/* Main lobby inspired by a polished mobile game dashboard, adapted to Pen Fight Club. */
.game-hub{position:relative;isolation:isolate;overflow:hidden;max-width:none;min-height:100vh;padding:27px clamp(22px,5vw,76px) 54px;color:#f4f8ff;background:radial-gradient(circle at 50% 18%,rgba(43,84,153,.38),transparent 30%),linear-gradient(125deg,#071019 0%,#111e2e 54%,#071019 100%)}.game-hub:before{content:"";position:absolute;z-index:-2;inset:0;background:repeating-linear-gradient(115deg,rgba(255,255,255,.025) 0 1px,transparent 2px 8px),radial-gradient(ellipse at center bottom,rgba(115,62,25,.44),transparent 56%)}.game-hub:after{content:"";position:absolute;z-index:-1;width:min(76vw,740px);height:260px;left:50%;top:95px;transform:translateX(-50%) rotate(-5deg);background:repeating-linear-gradient(#fffdf5 0 20px,#c1d3e2 21px 22px);clip-path:polygon(5% 5%,94% 0,100% 88%,7% 100%,0 73%);opacity:.98;box-shadow:0 21px 54px rgba(0,0,0,.4)}.hub-status{position:relative;z-index:2;display:flex;align-items:center;justify-content:space-between;gap:14px}.hub-player{display:grid;grid-template-columns:44px auto;column-gap:10px;align-items:center;min-width:200px;border:1px solid rgba(105,175,255,.44);border-radius:15px;background:rgba(5,17,34,.75);box-shadow:inset 0 0 18px rgba(55,122,209,.13);padding:8px 12px;color:#fff;text-align:left;cursor:pointer}.hub-player span{grid-row:1/3;width:42px;height:42px;display:grid;place-items:center;border:2px solid #a7c9ef;border-radius:50%;background:linear-gradient(145deg,#4a637e,#182839);font-size:25px}.hub-player b{font:18px Fredoka,sans-serif}.hub-player small{font:8px "DM Mono",monospace;color:#b9cde5}.hub-currency{display:flex;align-items:center;gap:8px}.hub-currency>span,.hub-currency button{border:1px solid rgba(118,175,227,.4);border-radius:22px;background:rgba(5,17,34,.75);padding:8px 12px;color:#fff;font:700 11px "DM Mono",monospace}.hub-currency>span{color:var(--yellow);font-size:14px}.hub-currency>span b{color:#fff}.hub-currency button{cursor:pointer}.hub-logo{position:relative;z-index:1;width:max-content;margin:36px auto 49px;text-align:center;color:#0b4ee4;transform:rotate(-3deg)}.hub-logo>span{position:absolute;left:50%;top:-23px;transform:translateX(-50%);font:37px "Permanent Marker",cursive}.hub-logo h1{font:clamp(70px,10vw,132px)/.69 "Permanent Marker",cursive;letter-spacing:-8px;text-shadow:2px 2px #fff,4px 4px rgba(10,20,45,.36)}.hub-logo h1 em{color:#cf1d23;text-shadow:2px 2px #fff,4px 4px rgba(10,20,45,.34)}.hub-logo p{margin:20px 0 0;color:#1c2940;font:700 16px "DM Mono",monospace;letter-spacing:4px}.hub-scribble{position:absolute;z-index:1;font:22px/1.05 "Permanent Marker",cursive;color:#bed2ed;opacity:.85;transform:rotate(-9deg)}.hub-scribble.left{left:5%;top:130px}.hub-scribble.right{right:5%;top:210px;transform:rotate(8deg)}.hub-feature-grid,.hub-mode-grid,.hub-collections,.hub-footer-cards{position:relative;z-index:2;max-width:1000px;margin-inline:auto}.hub-feature-grid{display:grid;grid-template-columns:1.3fr .9fr;gap:17px}.hub-card{position:relative;isolation:isolate;overflow:hidden;min-height:190px;border:1px solid rgba(104,177,246,.65);border-radius:19px;background:linear-gradient(135deg,rgba(13,36,57,.94),rgba(6,15,29,.95));box-shadow:0 8px 22px rgba(0,0,0,.32),inset 0 0 18px rgba(104,174,255,.1);color:#fff;text-align:left;cursor:pointer;padding:22px}.hub-card:before{content:"";position:absolute;inset:0;z-index:-1;background:repeating-linear-gradient(120deg,rgba(255,255,255,.035) 0 1px,transparent 2px 8px)}.hub-card div{position:absolute;left:22px;right:22px;bottom:20px;display:grid;gap:5px}.hub-card b,.hub-mini b,.hub-footer-cards b{font:28px Fredoka,sans-serif}.hub-card small,.hub-mini small,.hub-footer-cards small{font:11px "DM Mono",monospace;color:#d6dfec}.hub-card i,.hub-footer-cards i{position:absolute;right:19px;bottom:17px;width:48px;height:48px;display:grid;place-items:center;border-radius:50%;background:#087bea;color:#fff;font:32px Fredoka,sans-serif;font-style:normal;box-shadow:0 3px 0 #034e9f}.hub-friends i{background:#09ad63;box-shadow-color:#05763f}.hub-pen{position:absolute;top:46px;width:165px;height:29px;border:2px solid #071019;border-radius:9px;filter:drop-shadow(4px 6px 4px rgba(0,0,0,.55))}.hub-pen:after{content:"";position:absolute;right:-18px;top:5px;border-left:17px solid #d3b293;border-top:7px solid transparent;border-bottom:7px solid transparent}.hub-pen.blue{left:45px;background:linear-gradient(#72d7ff,#147cdd);transform:rotate(12deg)}.hub-pen.red{right:38px;background:linear-gradient(#ff725e,#b8191c);transform:rotate(-12deg)}.friend-doodle{display:block;margin:30px auto 0;width:max-content;color:#eaf2ff;font:54px "Permanent Marker",cursive;letter-spacing:-13px;transform:rotate(-5deg)}.hub-mode-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:13px;margin-top:17px}.hub-mini{min-height:160px;border:1px solid rgba(101,175,235,.5);border-radius:16px;background:linear-gradient(145deg,rgba(20,35,47,.96),rgba(4,11,21,.96));color:#fff;padding:17px 13px;text-align:center;cursor:pointer}.hub-mini span{display:block;font-size:46px;line-height:1;margin:2px 0 15px}.hub-mini b{display:block;font-size:16px}.hub-mini small{display:block;margin-top:8px;font-size:9px}.hub-mini.trophy{border-color:#e6b442}.hub-mini.target{border-color:#bd4b4b}.hub-mini.clock{border-color:#6f58d8}.hub-collections{display:grid;grid-template-columns:1fr 1fr;gap:17px;margin-top:17px}.hub-collections section{padding:15px;border:1px solid rgba(100,176,238,.5);border-radius:14px;background:rgba(4,16,31,.78)}.hub-collections section>b{font:700 12px Fredoka,sans-serif}.hub-theme-picks,.hub-skin-picks{display:flex;gap:8px;margin-top:12px;overflow-x:auto;padding-bottom:2px}.hub-theme-picks button,.hub-skin-picks button{flex:0 0 91px;min-height:56px;border:1px solid rgba(146,194,238,.52);border-radius:8px;background:linear-gradient(135deg,#22435b,#0a1525);color:#fff;font:700 8px "DM Mono",monospace;cursor:pointer}.hub-theme-picks button:nth-child(2){background:linear-gradient(145deg,#8b552c,#332017)}.hub-theme-picks button:nth-child(3){background:linear-gradient(145deg,#2f6a5b,#142d2d)}.hub-theme-picks button:nth-child(4){background:linear-gradient(145deg,#3b5194,#0f1837)}.hub-skin-picks button:nth-child(2){background:linear-gradient(145deg,#e23b38,#6d1117)}.hub-theme-picks button.active,.hub-skin-picks button.active{outline:3px solid #fff;box-shadow:0 0 0 5px #08a852}.hub-footer-cards{display:grid;grid-template-columns:repeat(3,1fr);gap:13px;margin-top:17px}.hub-footer-cards button{display:grid;grid-template-columns:56px 1fr 26px;align-items:center;gap:10px;min-height:94px;border:1px solid rgba(100,176,238,.5);border-radius:14px;background:rgba(6,18,33,.83);color:#fff;padding:14px;text-align:left;cursor:pointer}.hub-footer-cards span{font-size:38px}.hub-footer-cards b{display:block;font-size:17px}.hub-footer-cards small{display:block;margin-top:5px;font-size:9px}.hub-footer-cards i{position:static;width:27px;height:27px;font-size:20px;background:#203957;box-shadow:none}
.game-hub+.hero{display:none}@media(max-width:700px){.game-hub{min-height:100svh;padding:20px 13px 38px}.hub-status{align-items:start}.hub-player{min-width:0;grid-template-columns:34px auto;padding:6px 8px}.hub-player span{width:34px;height:34px;font-size:20px}.hub-player b{font-size:13px}.hub-player small{font-size:7px}.hub-currency{gap:5px}.hub-currency>span,.hub-currency button{padding:7px 8px;font-size:8px}.hub-currency button{display:none}.game-hub:after{top:91px;width:94vw;height:210px}.hub-logo{margin:34px auto 31px}.hub-logo h1{font-size:70px;letter-spacing:-6px}.hub-logo p{font-size:10px;letter-spacing:2px;margin-top:17px}.hub-scribble{display:none}.hub-feature-grid{grid-template-columns:1.15fr .85fr;gap:9px}.hub-card{min-height:151px;padding:13px;border-radius:14px}.hub-card div{left:13px;right:13px;bottom:13px}.hub-card b{font-size:18px}.hub-card small{font-size:8px;line-height:1.35}.hub-card i{right:11px;bottom:10px;width:34px;height:34px;font-size:23px}.hub-pen{top:31px;width:105px;height:20px}.hub-pen.blue{left:15px}.hub-pen.red{right:7px}.friend-doodle{margin-top:23px;font-size:38px}.hub-mode-grid{grid-template-columns:repeat(2,1fr);gap:9px;margin-top:10px}.hub-mini{min-height:117px;padding:12px 7px}.hub-mini span{font-size:34px;margin-bottom:9px}.hub-mini b{font-size:14px}.hub-mini small{font-size:8px}.hub-collections{grid-template-columns:1fr;margin-top:10px;gap:10px}.hub-collections section{padding:12px}.hub-footer-cards{grid-template-columns:1fr;margin-top:10px;gap:9px}.hub-footer-cards button{min-height:78px}.hub-footer-cards span{font-size:32px}.hub-footer-cards b{font-size:15px}}