/* ============================================================
   JTV game adapter — layout only.
   These prototypes were built for a big screen. This tightens the
   spacing scale and type as the window gets shorter, so a prompt
   fits on screen instead of running off the bottom.
   Loaded after each game's own styles; overrides nothing else.
   ============================================================ */

/* --- short windows: pull in the spacing scale the games are built on --- */
@media (max-height: 860px){
  :root{--s3:12px;--s4:17px;--s5:24px;--s6:32px}
  .title-xl{font-size:clamp(30px,6.2vw,68px)}
  .btn{padding:13px 28px}
  .btn.big{padding:16px 40px;min-height:58px;font-size:clamp(17px,2.3vw,25px)}
}
@media (max-height: 700px){
  :root{--s2:8px;--s3:10px;--s4:13px;--s5:18px;--s6:24px}
  .title-xl{font-size:clamp(26px,5.2vw,52px)}
  .sub{font-size:clamp(12px,1.5vw,15px);line-height:1.45}
  .kicker{font-size:clamp(10px,1.3vw,13px);letter-spacing:.26em}
  .btn{padding:11px 24px}
  .btn.big{padding:13px 32px;min-height:50px}
  .gamecard ul{font-size:11.5px;line-height:1.4}
}

/* --- With one mode left, "CHOOSE YOUR GAME" is not a choice. Dropping the
       block takes ~280px off the setup screen so it fits without scrolling;
       the rules still live behind HOW IT WORKS and the RULES button. --- */
.setup-block:has(.gamecards){display:none}
.gamecards:has(> .gamecard:only-child) .gamecard{flex:0 1 560px;max-width:560px}

/* --- the ten-slot board is the tallest thing in the game; compress the
       rows on short screens so all ten are visible at once --- */
@media (max-height:820px) and (min-width:561px){
  .slots{gap:6px!important}
  .slot{min-height:44px!important;padding-block:4px!important}
  .item-card{padding-block:14px}
}
@media (max-height:700px) and (min-width:561px){
  .slots{gap:4px!important}
  .slot{min-height:38px!important;padding-block:2px!important;font-size:15px}
  .board-head{font-size:11px}
}

/* --- phones: the games are portrait-hostile by default --- */
@media (max-width: 560px){
  :root{--s3:11px;--s4:14px;--s5:20px;--s6:26px}
  .title-xl{font-size:clamp(28px,10vw,46px);line-height:.95}
  .btnrow{gap:10px;width:100%}
  .btnrow .btn{flex:1 1 100%}
  .gamecard{flex:1 1 100%;max-width:100%}
  .setup{gap:var(--s4)}
}

/* --- the sticky call-to-action was see-through, so the content behind it
       read as broken layout. Make it an opaque bar and give the column
       room to end above it. --- */
.setup-cta{
  background:linear-gradient(180deg,
    rgba(8,3,18,0) 0%,
    rgba(8,3,18,.86) 34%,
    rgba(8,3,18,.98) 62%,
    rgba(8,3,18,1) 100%) !important;
  padding-block:var(--s5) var(--s3) !important;
}
/* leave room for the sticky bar so the last row can clear it when scrolled */
.setup{padding-bottom:118px}
@media (max-height:620px){.setup{padding-bottom:96px}}
@media (max-height:760px), (max-width:560px){
  .setup-cta .btn.big{padding:13px 30px;min-height:52px;font-size:clamp(16px,2.2vw,22px)}
}

/* --- overflow cue: only visible while there is more to read --- */
.jtv-more{
  position:fixed;left:50%;bottom:34px;transform:translateX(-50%) translateY(6px);
  z-index:99998;pointer-events:none;opacity:0;transition:opacity .25s ease,transform .25s ease;
  font:700 10px/1 'Segoe UI',system-ui,sans-serif;letter-spacing:.18em;text-transform:uppercase;
  color:#fff;background:rgba(0,0,0,.62);border:1px solid rgba(255,255,255,.24);
  border-radius:999px;padding:7px 13px;backdrop-filter:blur(6px);
}
.jtv-more.is-on{opacity:.85;transform:translateX(-50%) translateY(0)}
/* the sticky call-to-action already occupies the bottom edge — don't stack on it */
@media (min-height:661px){body:has(.setup-cta) .jtv-more{display:none}}

/* On a short window a sticky bar hides the fields behind it. Below this
   height it simply sits at the end of the form, covering nothing. */
@media (max-height:660px){
  .setup-cta{position:static!important;background:none!important;padding-block:var(--s4) 0!important}
  .setup{padding-bottom:var(--s4)!important}
}
@media (prefers-reduced-motion:reduce){.jtv-more{transition:none}}