/* Multi-game entry point. Double Speed retains its own home and four modes. */
.game-hub {
  position: relative; z-index: 130; min-height: 100dvh;
  padding: 20px 28px 40px; color: #f4fbff;
  background: radial-gradient(ellipse at 66% 4%,#1e5794 0%,transparent 49%),
    radial-gradient(ellipse at 9% 84%,#103c71 0%,transparent 48%),#06172d;
}
.hub-shell { max-width: 1160px; width: 100%; margin: 0 auto; }
.hub-header {
  display: flex; align-items: center; justify-content: space-between; gap: 15px;
  padding: 8px 0 21px; border-bottom: 1px solid #6fa0ca52;
}
.hub-identity { display: flex; gap: 13px; align-items: center; }
.hub-identity strong { display:block; font: 900 15px Outfit,sans-serif; letter-spacing: .145em; }
.hub-identity small { display:block; color:#9ac5e6; font-size: 9px; font-weight: 800; letter-spacing:.19em; margin-top:5px; }
.hub-emblem { display:grid;place-items:center;width:41px;height:41px;border:1px solid #76b1e7;border-radius:13px;color:#d5efff;font-size:27px; }
.hub-library-count { display:flex;align-items:center;gap:9px;white-space:nowrap;font-size:10px;letter-spacing:.13em;font-weight:800;color:#b4d6ed; }
.hub-status-dot { display:inline-block;width:7px;height:7px;flex:0 0 7px;border-radius:50%;background:#63bcff;box-shadow:0 0 11px #62beffb8; }
.hub-intro { margin: 32px 0 35px; max-width: 760px; }
.hub-eyebrow { color:#a9dafa; font-size:10px; font-weight:900; letter-spacing:.2em; }
.hub-intro h1 { font: 900 clamp(44px,6.6vw,84px)/.99 Outfit,sans-serif; letter-spacing:-.052em; margin:15px 0 16px; }
.hub-intro h1 em { font-style:normal;color:#b8e4ff; }
.hub-intro p { color:#bdd6e8;font-size:14px;line-height:1.65;max-width:550px;margin:0; }
.hub-section-line { display:flex;justify-content:space-between;align-items:end;gap:15px;margin:0 0 15px; }
.hub-section-line h2 { font:800 26px Outfit,sans-serif;margin:0;letter-spacing:-.03em; }
.hub-section-line span { color:#81add0;font:800 10px Outfit,sans-serif;letter-spacing:.15em; }
.hub-game-grid { display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px;align-items:stretch; }
.hub-game-card {
  display:flex;flex-direction:column;min-width:0;padding:0;text-align:left;overflow:hidden;
  border-radius:23px;position:relative;border:1px solid #7eb8e5;
  contain:layout paint;
  transition:transform .22s ease,border-color .22s ease;
}
.hub-double-speed { background:linear-gradient(148deg,#f8fcff,#e1f2ff 73%,#cce7ff);color:#0c3666;box-shadow:0 13px 0 #2c6baa,0 22px 36px #010c2588; }
.hub-double-speed:hover,.hub-double-speed:focus-visible { transform:translateY(-5px);border-color:#fff;box-shadow:0 16px 0 #377fbd,0 29px 42px #010c25a0;outline:2px solid #d4efff;outline-offset:2px; }
.hub-war { background:linear-gradient(148deg,#174876,#0b2b55 77%,#08254a);color:#eff9ff;border-color:#568ab7;box-shadow:0 13px 30px #010c2594; }
.hub-card-art { contain:paint;display:block;position:relative;height:205px;flex:0 0 205px;overflow:hidden; }
.hub-double-art { background:radial-gradient(circle at 52% 50%,#64bbef 0%,#2977b9 43%,#164b83 100%); }
.hub-war-art { background:radial-gradient(circle at 52% 49%,#3f7eab 0%,#1b4f83 46%,#0d355f 100%); }
.hub-card-art::after { content:'';position:absolute;inset:0;pointer-events:none;background:repeating-linear-gradient(135deg,transparent 0 53px,#ffffff0b 54px 55px); }
.hub-art-glow { position:absolute;left:50%;top:45%;width:280px;height:280px;border:1px dashed #dbf3ff70;border-radius:50%;transform:translate(-50%,-50%);box-shadow:0 0 90px #cceeff2b; }
.hub-preview-card { position:absolute;top:30px;left:calc(50% - 58px);display:flex;flex-direction:column;width:116px;height:160px;padding:10px 12px;border:4px solid #fff;border-radius:12px;background:#fffdfb;color:#124b7d;box-shadow:0 15px 23px #051c438a;font:900 31px Outfit,sans-serif; }
.hub-preview-card small { display:block;font:normal 20px Georgia,serif;line-height:1.1; }
.hub-preview-card b { align-self:center;margin:auto;font:normal 64px Georgia,serif; }
.hub-preview-one { transform:rotate(-19deg) translateX(-33px); }
.hub-preview-two { transform:rotate(16deg) translateX(34px);color:#dc4e57; }
.hub-art-spark { position:absolute;top:10px;left:calc(50% + 110px);font-size:39px;color:#ecfaff;text-shadow:0 0 17px white; }
.hub-war-card-one { color:#dc4e57;transform:rotate(-17deg) translateX(-38px); }
.hub-war-card-two { transform:rotate(16deg) translateX(39px); }
.hub-war-burst { position:absolute;top:10px;left:calc(50% + 97px);font-size:56px;color:#9ccef081;transform:rotate(15deg); }
.hub-game-info { display:flex;flex-direction:column;align-items:flex-start;flex:1;padding:27px 32px 30px; }
.hub-game-tag { display:inline-flex;align-items:center;gap:9px;border-radius:20px;padding:8px 12px;font-size:9px;font-weight:900;letter-spacing:.17em; }
.hub-live-tag { color:#11508a;background:#bde5ff;border:1px solid #73bceb; }
.hub-soon-tag { color:#b7d3ed;background:#2a5882;border:1px solid #5c8db7; }
.hub-game-title { display:block;font:900 clamp(34px,3.7vw,50px)/1.04 Outfit,sans-serif;letter-spacing:-.045em;margin:14px 0 10px; }
.hub-game-title-mark { color:#4aa5e8; }
.hub-game-desc { display:block;color:#507293;font-size:13px;line-height:1.6;max-width:460px;margin:0 0 15px; }
.hub-war .hub-game-desc { color:#bed4e8; }
.hub-game-chips { display:flex;gap:7px;flex-wrap:wrap;margin:0 0 24px; }
.hub-game-chips span { font-size:9px;font-weight:800;letter-spacing:.07em;padding:7px 10px;border-radius:5px;border:1px solid #a7cbe5;color:#416a8c;background:#eaf6ff; }
.hub-war .hub-game-chips span { border-color:#4e80aa;background:#154575;color:#c6e4f7; }
.hub-game-action { margin-top:auto;display:inline-flex;justify-content:space-between;align-items:center;gap:24px;border-radius:8px;background:#1469bb;color:#fff;font-size:11px;font-weight:900;letter-spacing:.13em;padding:14px 19px;box-shadow:0 3px 0 #7eb6df; }
.hub-double-speed:hover .hub-game-action { background:#0a528f; }
.hub-game-action span { font-size:17px;line-height:10px; }
.hub-soon-action { background:#234a73;color:#b7d4e9;border:1px solid #6185a6;box-shadow:none; }
.hub-footer { display:flex;justify-content:space-between;gap:16px;border-top:1px solid #6fa0ca52;margin-top:45px;padding:23px 0;color:#82afcf;font-size:9px;letter-spacing:.16em;font-weight:800; }
.home-nav-actions { display:flex;gap:9px;align-items:center; }
.home-back { background:transparent;color:#d1e8f8; }
.home-back:hover { background:#224e79; }
@media(max-width:760px) {
  .hub-game-grid { grid-template-columns:1fr;gap:18px; }
  .hub-game-card { flex-direction:row;min-height:260px; }
  .hub-card-art { flex:0 0 39%;height:auto;min-height:260px; }
  .hub-preview-card { left:calc(50% - 58px);top:50px; }
  .hub-game-info { padding:24px; }
  .hub-game-chips { margin-bottom:18px; }
  .hub-intro { margin:28px 0; }
}
@media(max-width:560px) {
  .game-hub { padding:12px 16px 30px; }
  .hub-header { padding-bottom:15px; }
  .hub-identity strong { font-size:12px; }
  .hub-emblem { width:33px;height:33px;font-size:22px; }
  .hub-library-count { font-size:8px;letter-spacing:.04em; }
  .hub-intro h1 { font-size:clamp(38px,11vw,53px); }
  .hub-intro p { font-size:12px; }
  .hub-section-line h2 { font-size:21px; }
  .hub-section-line span { font-size:8px; }
  .hub-game-card { flex-direction:column; }
  .hub-card-art { height:145px;flex-basis:145px;min-height:145px; }
  .hub-preview-card { top:15px; transform-origin:center; }
  .hub-preview-one { transform:rotate(-19deg) translateX(-33px) scale(.83); }
  .hub-preview-two { transform:rotate(16deg) translateX(34px) scale(.83); }
  .hub-war-card-one { transform:rotate(-17deg) translateX(-38px) scale(.83); }
  .hub-war-card-two { transform:rotate(16deg) translateX(39px) scale(.83); }
  .hub-game-info { padding:19px 22px 24px; }
  .hub-game-title { font-size:36px;margin:10px 0 8px; }
  .hub-game-desc { font-size:12px;margin-bottom:12px; }
  .hub-game-chips { margin-bottom:17px; }
  .hub-footer { flex-direction:column;margin-top:27px; }
  .home-nav-actions { gap:6px; }
  .home-nav-actions .home-rules { font-size:10px;padding:9px 11px; }
  #allGamesBtn { display:none; }
}
@media(prefers-reduced-motion:reduce){.hub-game-card { transition:none; }}

/* Use the document scroll surface and stop painting the inactive game below the hub. */
html[data-game=hub] .shell{display:none}
html[data-game=hub] body{background:#06172d}
html[data-game=hub] .shell *{animation-play-state:paused!important}
@media(hover:none){.hub-double-speed:hover{transform:none}}

/* A late game update must never cover the collection after Home is selected. */
html[data-game=hub] :is(#modeScreen,#lobbyScreen,#dailyScreen,#warScreen,#memoryScreen){display:none!important}

.hub-game-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
@media(max-width:650px){.hub-game-grid{grid-template-columns:1fr}}

/* About stays beside the collection identity without button styling. */
.hub-brand-nav{display:flex;align-items:center;gap:28px;flex-shrink:0}
.hub-about-link{display:inline-flex;align-items:center;min-height:44px;padding:0 2px;color:#b4d6ed;font:600 13px 'DM Sans',sans-serif;text-decoration:none;transition:color .15s ease,text-shadow .15s ease}
.hub-about-link:hover{color:#f4fbff;text-shadow:0 0 14px #86ceff66}
.hub-about-link:focus-visible{color:#f4fbff;outline:2px solid #a8dcff;outline-offset:5px;border-radius:2px}
@media(max-width:1000px){.hub-header{flex-wrap:wrap}.hub-brand-nav{flex:1}.hub-library-count{display:none}}
@media(max-width:550px){.hub-brand-nav{width:100%;justify-content:space-between;gap:18px}.hub-header{gap:10px}.hub-about-link{font-size:13px}}
@media(prefers-reduced-motion:reduce){.hub-about-link{transition:none}}