/* Game select: a console-style home screen (full-bleed art of the selected game, a sliding row of tiles,
   details and actions under it). Opens first; Play hands over to the game page below. */
body.hub-open{overflow:hidden}
.hub{position:fixed;inset:0;z-index:50;display:grid;grid-template-rows:auto 1fr auto;grid-template-columns:minmax(0,1fr);overflow:hidden;background:#060508;color:#f6f1ea;font-family:var(--font-body);opacity:1;transition:opacity .45s ease,visibility .45s}
.hub[hidden]{display:grid;opacity:0;visibility:hidden;pointer-events:none}
.hub__bg{position:absolute;inset:0;overflow:hidden;z-index:0}
.hub__bg img{position:absolute;inset:-2%;width:104%;height:104%;object-fit:cover;opacity:0;transform:scale(1.03);transition:opacity .7s ease,transform 7s ease-out}
.hub__bg img.is-on{opacity:1;transform:scale(1)}
.hub__bg:after{content:'';position:absolute;inset:0;background:linear-gradient(180deg,#07060bcc 0,#07060b33 22%,#07060b00 40%,#07060b99 66%,#07060bf2 88%),linear-gradient(90deg,#07060bdd 0,#07060b55 38%,#07060b00 60%)}
.hub__top{position:relative;z-index:2;display:flex;align-items:center;gap:22px;padding:22px 48px}
.hub__brand{height:40px;width:auto;filter:drop-shadow(0 0 12px rgba(255,42,61,.4))}
.hub__section{font-family:var(--font-pixel);font-size:11px;letter-spacing:.26em;text-transform:uppercase;color:#f6f1ea;padding:6px 14px;border-bottom:2px solid var(--crimson);box-shadow:0 6px 12px -8px var(--crimson)}
.hub__right{margin-left:auto;display:flex;align-items:center;gap:18px;font-size:13px;color:#cfc3b6}
.hub__clock{font-variant-numeric:tabular-nums;font-size:16px;color:#f3ead9}
.hub__pad{display:inline-flex;align-items:center;gap:6px;opacity:.45;transition:opacity .3s}
.hub__pad.is-on{opacity:1;color:#8fd9b4}
.hub__stage{position:relative;z-index:2;display:flex;flex-direction:column;justify-content:flex-end;padding:0 0 18px;min-height:0}
.hub__row{position:relative;height:262px;overflow-x:clip;overflow-y:visible;padding:12px 0 0 48px}
.hub__track{display:flex;gap:22px;align-items:flex-end;height:100%;transition:transform .5s cubic-bezier(.2,.8,.2,1);will-change:transform}
.tile{position:relative;flex:none;width:300px;height:169px;border-radius:14px;overflow:hidden;border:0;padding:0;background:#15111b;cursor:pointer;box-shadow:0 10px 30px #0009;transform-origin:left bottom;transition:width .45s cubic-bezier(.2,.8,.2,1),height .45s cubic-bezier(.2,.8,.2,1),box-shadow .3s,filter .3s;filter:saturate(.8) brightness(.78)}
.tile img{width:100%;height:100%;object-fit:cover;display:block}
.tile.is-selected{width:420px;height:236px;filter:none;box-shadow:0 0 0 3px #f3ead9,0 0 0 7px #e5546a88,0 18px 50px #000c,0 0 60px #e5546a44}
.tile:focus-visible{outline:none}
.tile__lock{position:absolute;inset:0;display:grid;place-items:center;align-content:center;gap:8px;background:radial-gradient(circle at 50% 40%,#2a1d2b 0,#110d16 70%);color:#a8999f;font-size:12px;letter-spacing:2px;text-transform:uppercase}
.tile__lock b{font-family:Crypt,Georgia,serif;font-size:34px;color:#e5546a99;letter-spacing:0;text-transform:none}
.tile__label{position:absolute;left:0;right:0;bottom:0;padding:22px 14px 10px;font-size:13px;text-align:left;color:#fff;background:linear-gradient(0deg,#000d,#0000);opacity:0;transition:opacity .3s}
.tile:not(.is-selected):hover .tile__label{opacity:1}
.hub__info{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:end;gap:30px;padding:26px 48px 0}
.hub__kicker{margin:0 0 10px;font-family:var(--font-pixel);font-size:11px;letter-spacing:.26em;text-transform:uppercase;color:var(--crimson);text-shadow:0 0 12px rgba(255,42,61,.5)}
.hub__title{margin:0;font-family:var(--font-display);font-weight:400;font-size:clamp(34px,4.4vw,62px);line-height:1;letter-spacing:-1px;text-shadow:0 4px 24px #000}
.hub__blurb{margin:12px 0 0;max-width:620px;color:#d8ccbd;font-size:15px;line-height:1.55;text-shadow:0 2px 12px #000}
.hub__chips{display:flex;flex-wrap:wrap;gap:8px;margin-top:14px}
.hub__chips span{padding:5px 11px;border-radius:999px;background:#0b090fcc;border:1px solid #ffffff22;font-size:12px;color:#e8ddcf}
.hub__actions{display:flex;gap:12px}
.hub-btn{display:inline-flex;align-items:center;gap:10px;min-height:52px;padding:0 26px;border-radius:12px;border:1px solid #ffffff2e;background:#0d0a12d9;color:#f3ead9;font-size:15px;letter-spacing:1px;text-transform:uppercase;backdrop-filter:blur(6px);transition:transform .15s,background .2s,box-shadow .2s}
.hub-btn:hover{background:#1c1622}
.hub-btn:active{transform:translateY(1px) scale(.98)}
.hub-btn:focus-visible{outline:2px solid #f3ead9;outline-offset:3px}
.hub-btn--play{min-width:190px;justify-content:center;background:linear-gradient(180deg,#f0566c,#c62440);border-color:#ff8a9a;box-shadow:0 8px 28px #e5546a55;font-weight:600}
.hub-btn--play:hover{background:linear-gradient(180deg,#ff6a7e,#d42e4a)}
.hub-btn--play[disabled]{background:#2a2430;border-color:#ffffff22;box-shadow:none;color:#9c919f;cursor:not-allowed}
.hub-btn kbd{font:inherit;font-size:11px;padding:2px 7px;border-radius:5px;background:#0006;border:1px solid #fff4}
.hub__dots{display:flex;gap:7px;padding:16px 48px 0}
.hub__dots i{width:26px;height:4px;border-radius:2px;background:#ffffff2e;transition:background .3s,width .3s}
.hub__dots i.is-on{width:42px;background:#e5546a}
.hub__hints{position:relative;z-index:2;display:flex;gap:26px;flex-wrap:wrap;padding:14px 48px 22px;font-size:12px;color:#b3a7ab;border-top:1px solid #ffffff12;background:#07060bb3}
.hub__hints kbd{font:inherit;font-size:11px;margin-right:6px;padding:2px 7px;border-radius:5px;border:1px solid #ffffff38;color:#f3ead9}
.hub__toast{position:absolute;z-index:3;left:50%;top:92px;transform:translate(-50%,-8px);padding:10px 18px;border-radius:10px;background:#120e17ee;border:1px solid #e5546a77;font-size:13px;opacity:0;transition:opacity .25s,transform .25s;pointer-events:none}
.hub__toast.is-on{opacity:1;transform:translate(-50%,0)}
.hub.is-launching .tile.is-selected{transform:scale(1.06);transition:transform .35s}
.games-btn{margin-right:auto}
@media (max-width:820px){
  .hub__top{padding:16px 18px}.hub__section{display:none}
  .hub__row{height:190px;padding-left:18px}.tile{width:200px;height:113px}.tile.is-selected{width:300px;height:169px}
  .hub__info{grid-template-columns:1fr;padding:20px 18px 0;gap:16px}.hub__blurb{font-size:14px}
  .hub__actions .hub-btn{flex:1;justify-content:center;min-width:0}
  .hub__dots{padding:14px 18px 0}.hub__hints{padding:12px 18px 16px;gap:14px}.hub__hints .hint-pad{display:none}
}
@media (prefers-reduced-motion:reduce){.hub,.hub__bg img,.hub__track,.tile{transition:none}.hub__bg img{transform:none}}
.hub-btn[hidden]{display:none}

/* buttons: the same art-kit plates as the game page */
.hub-btn{border:0;border-style:solid;border-image-repeat:stretch;border-image-source:url('./assets/ui/btn-secondary.webp');border-image-slice:0 165 fill;border-image-width:0 36px;border-radius:0;background:none;backdrop-filter:none;padding:0 40px;font-weight:600;letter-spacing:.14em;text-shadow:0 1px 2px #000}
.hub-btn:hover{background:none;border-image-source:url('./assets/ui/btn-secondary-hover.webp')}
.hub-btn--play{min-width:230px;min-height:58px;border-image-source:url('./assets/ui/btn-primary.webp');border-image-width:0 44px;background:none;box-shadow:none}
.hub-btn--play:hover{background:none;border-image-source:url('./assets/ui/btn-primary-hover.webp');filter:brightness(1.06)}
.hub-btn--play[disabled]{background:none;border-image-source:url('./assets/ui/btn-disabled.webp');color:#a59aa3}
.hub__chips span{font-family:var(--font-body);border-color:rgba(255,42,61,.35)}
.hub__hints kbd{font-family:var(--font-pixel);border-color:rgba(255,42,61,.4)}
.tile.is-selected{box-shadow:0 0 0 2px #f6f1ea,0 0 0 1px rgba(255,42,61,.55),0 0 18px rgba(255,42,61,.45),0 0 48px rgba(255,42,61,.3),0 18px 50px #000c}
.tile__lock b{font-family:var(--font-display)}
.hub-btn{white-space:nowrap}
@media (max-width:560px){.hub-btn{padding:0 22px;font-size:13px;letter-spacing:.1em}.hub-btn--play{min-width:0}.hub-btn kbd{display:none}}
.hub__chips .hub__prize{display:inline-flex;align-items:center;gap:8px;padding:4px 12px 4px 4px;border-color:rgba(234,196,123,.6);background:rgba(20,14,10,.8)}
.hub__chips .hub__prize:not(:has(img)){padding-left:12px}
.hub__prize img{width:26px;height:26px;border-radius:999px;object-fit:cover}
.hub__prize b{font-weight:600;color:var(--prize)}
.hub__clock{white-space:nowrap}@media (max-width:560px){.hub__right{gap:10px}.hub__clock{font-size:13px}}