/* The hub is independent of the full-screen game layout. */
.arcade-hub .wrap{max-width:1180px;margin:auto;padding:22px 24px 60px}
.arcade-hub header{padding:8px 0 22px;border:0;background:none;gap:14px}
.arcade-hub header>img{width:58px;height:58px;object-fit:contain}
.arcade-hub header h1{font-size:clamp(1.15rem,2.4vw,1.7rem);letter-spacing:-.03em}
.arcade-hub .eyebrow{color:#d8b986;font-size:.66rem;font-weight:800;letter-spacing:.19em}
.arcade-hub #menu{background:none}
.arcade-hub .arcade-nav{display:flex;gap:6px;padding:6px;background:#0d1b27dc;border:1px solid #344a59;border-radius:16px;margin:0 0 20px;box-shadow:0 10px 25px #0003}
.arcade-hub .arcade-nav button{min-height:50px;display:flex;align-items:center;justify-content:center;gap:10px;border-radius:11px;font-size:.9rem;color:#b9cbd5;flex:1;position:relative}
.arcade-hub .arcade-nav button[aria-selected=true]{color:#fff0d8;background:linear-gradient(130deg,#644522,#302b25);border:1px solid #b08a53;box-shadow:inset 0 1px #e9c79540}
.arcade-hero{position:relative;min-height:370px;padding:42px;border:1px solid #587081;border-radius:22px;overflow:hidden;background:linear-gradient(90deg,#061320e8,#06132059),url('/assets/arcade-art/yard.webp') center/cover;box-shadow:inset 0 1px #c6dbe133,0 18px 55px #0005}
.hero-copy{position:relative;z-index:2;max-width:490px}
.arcade-hero h2{font-size:clamp(2.4rem,5.5vw,4.1rem);line-height:.98;letter-spacing:-.05em;margin:14px 0 18px;color:#fff5e5;text-shadow:0 3px 20px #0008}
.arcade-hero p{color:#c7d6dd;font-size:1rem;max-width:340px;line-height:1.5;margin-bottom:24px}
.hero-play{display:inline-flex;align-items:center;gap:10px;padding:14px 20px;font-size:.9rem}
.hero-caption{display:block;font-size:.6rem;letter-spacing:.15em;color:#c2d3da;margin:12px 0 0}
.hero-ships{position:absolute;right:7%;top:8%;width:36%;height:90%;pointer-events:none;transform:rotate(18deg)}
.hero-ships img{position:absolute;width:75%;height:80%;object-fit:contain;filter:drop-shadow(0 25px 22px #000b)}
.hero-ships img+img{width:49%;right:-18%;top:21%;filter:hue-rotate(140deg) drop-shadow(0 20px 20px #000b)}
.arcade-hub .arcade-stats{display:flex;justify-content:flex-end;gap:26px;margin:14px 2px 26px;padding:0;background:none;border:0}
.arcade-hub .arcade-stat{display:flex;align-items:baseline;gap:7px;background:none;padding:0;border:0}
.arcade-hub .arcade-stat strong{font-size:1.05rem;color:#c9e9e8}
.arcade-hub .arcade-stat span{font-size:.74rem;color:#9eb2bd}
.arcade-hub .card.game-library{background:none;border:0;box-shadow:none;padding:0}
.arcade-hub:not(.invade-open) .wrap:has(>#play:not(.hidden)){max-width:560px}
.library-heading{display:flex;align-items:end;justify-content:space-between;gap:12px;margin-bottom:16px}
.library-heading h2{font-size:1.65rem;letter-spacing:-.035em;margin:5px 0 0}
.library-heading>span{color:#95acb9;font-size:.73rem}
.arcade-hub .menu-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
.arcade-hub .game-pick{display:flex;flex-direction:column;align-items:stretch;gap:0;padding:0;overflow:hidden;border-radius:17px;position:relative;height:100%;text-align:left}
.arcade-hub .game-pick canvas{width:100%!important;height:auto!important;aspect-ratio:3/2;border:0;border-bottom:1px solid #405866;border-radius:0;object-fit:cover}
.arcade-hub .game-pick>span{padding:16px;display:block;margin:0}
.arcade-hub .game-pick b{font-size:1.08rem;margin:7px 0;color:#fff2df}
.arcade-hub .game-pick span span{line-height:1.45;font-size:.81rem;min-height:2.9em}
.arcade-hub .game-pick .game-category{font-size:.55rem;font-weight:800;letter-spacing:.12em;color:#94c7cc}
.arcade-hub .game-pick .game-launch{display:flex;align-items:center;justify-content:space-between;margin-top:auto;border-top:1px solid #3b56655c;padding:11px 16px;background:#07131b66;color:#edc38b;font-size:.75rem;font-weight:800}
.arcade-hub .game-pick:hover{border-color:#d2ae78;transform:translateY(-2px)}
.arcade-hub .social-heading{display:flex;gap:18px;align-items:center;padding:24px;border:1px solid #415b6c;border-radius:18px;margin-bottom:18px;background:linear-gradient(105deg,#1f3948,#0a1b27)}
.social-heading>.arcade-symbol{width:42px;height:42px;color:#edc38b}
.social-heading h2{margin:0;font-size:1.8rem;letter-spacing:-.03em}.social-heading p{margin:5px 0 0;color:#aec4ce;line-height:1.45;font-size:.9rem}
.arcade-hub .arcade-panel:not([data-arcade-panel=play])>.card{border:1px solid #354e60;border-radius:17px;padding:22px}
.arcade-hub :is(input,textarea,select){background:#07121ccc;color:#edf3f5;border-color:#4c6472;border-radius:10px}
.arcade-hub :is(.friend-row,.leader-row,.chat-msg){border-color:#36505f}
.arcade-hub #play .ov-art{margin-bottom:2px}
.arcade-hub .rank.podium{background:linear-gradient(140deg,#74542d,#332d24);border:1px solid #d0a364;border-radius:9px;color:#ffe0a6;font-weight:900;text-align:center}
.arcade-hub.invade-open .wrap{padding:0}
@media(max-width:760px){.arcade-hub .wrap{padding:14px 16px 36px}.arcade-hub .menu-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}.arcade-hero{padding:28px;min-height:330px}.hero-ships{right:2%;top:15%;opacity:.7}.hero-copy{max-width:70%}.library-heading>span{display:none}.arcade-hub .game-pick>span{padding:12px}.arcade-hub .game-pick b{font-size:.95rem}.arcade-hub .game-pick span span{font-size:.74rem}.arcade-hub .arcade-nav button{gap:6px;font-size:.8rem}}
@media(max-width:480px){.arcade-hub .wrap{padding:12px 12px 32px}.arcade-hub header>img{width:43px;height:43px}.arcade-hub header{gap:9px;padding-bottom:16px}.arcade-hub .arcade-nav{margin-bottom:14px}.arcade-hub .arcade-nav button{flex-direction:column;gap:4px;font-size:.66rem;min-height:52px}.arcade-hero{padding:25px 20px;min-height:350px}.hero-copy{max-width:100%}.arcade-hero h2{font-size:2.7rem;max-width:230px}.arcade-hero p{font-size:.88rem;max-width:230px}.hero-ships{width:40%;right:-1%;top:15%;height:60%;opacity:.5}.hero-play{font-size:.75rem;padding:13px 12px}.arcade-hub .game-pick .game-category{font-size:.49rem;letter-spacing:.07em}.arcade-hub .game-pick span span{min-height:4.35em}.arcade-hub .game-pick .game-launch{padding:10px 12px}.arcade-hub .social-heading{padding:18px;gap:12px}.social-heading h2{font-size:1.45rem}.social-heading p{font-size:.8rem}.arcade-hub .arcade-panel:not([data-arcade-panel=play])>.card{padding:16px}}
@media(max-width:340px){.arcade-hub .menu-grid{grid-template-columns:1fr}.arcade-hub .game-pick span span{min-height:0}.arcade-hub .game-pick canvas{aspect-ratio:2/1}.arcade-hub .game-pick b{font-size:1.1rem}}