/* /v2: the hub in the "Made Today" sheet's style. Each game is a field of its own colour (--c, frame --d). */
:root { --field: #1d0a3a; --deep: #0d041c; --ink: #fff4e6; --hot: #ffd23f; --hot-ink: #241005 }
* { box-sizing: border-box }
html, body { margin: 0; background: var(--field); color: var(--ink); font: 400 17px/1.45 Archivo, system-ui, sans-serif }
a { color: inherit }
[hidden] { display: none !important }
button, input { font: inherit }
.in { max-width: 1240px; margin: 0 auto; padding: 0 24px }

/* cover */
.cover { max-width: 1240px; margin: 0 auto; padding: 56px 24px 44px }
.cover .date { font: 600 14px/1 Archivo, sans-serif; letter-spacing: .14em; text-transform: uppercase; color: var(--hot) }
.cover .mark { display: block; text-decoration: none; font: 400 clamp(60px, 12vw, 148px)/.9 'Archivo Black', sans-serif; margin: 14px 0 18px; letter-spacing: -.02em }
.cover .lede { font-size: clamp(19px, 2.2vw, 25px); margin: 0; max-width: 46ch }

/* a game, the sheet's way */
.game { background: var(--c); color: #fff }
.game .in { padding-top: 64px; padding-bottom: 72px; display: grid; grid-template-columns: 1fr 1.35fr; gap: 40px 56px; align-items: center }
.game .no { font: 400 22px/1 'Archivo Black', sans-serif; display: flex; align-items: center; gap: 12px }
.game .no { color: rgba(255,255,255,.7) }
.game h1, .game h2 { font: 400 clamp(46px, 7vw, 92px)/.92 'Archivo Black', sans-serif; margin: 10px 0 16px; letter-spacing: -.015em; overflow-wrap: anywhere }
.game:not(.lead) h2 { font-size: clamp(40px, 5.4vw, 70px) }
/* a long one-word name shrinks to fit its column instead of breaking mid-word (BATTLEBOARD, 10-14) */
.game .words { container-type: inline-size }
.game h1 { font-size: min(clamp(46px, 7vw, 92px), 100cqi / (var(--n, 1) * .8)) }
.game:not(.lead) h2 { font-size: min(clamp(40px, 5.4vw, 70px), 100cqi / (var(--n, 1) * .8)) }
.game .pitch { font: 600 clamp(21px, 2.3vw, 27px)/1.25 Archivo, sans-serif; margin: 0 0 22px }
.game dl { display: grid; grid-template-columns: max-content 1fr; gap: 8px 18px; margin: 0 0 26px; font-size: 16px }
.game dt { font-weight: 600; opacity: .7; text-transform: uppercase; letter-spacing: .08em; font-size: 12.5px; padding-top: 3px }
.game dd { margin: 0 }
.links { display: flex; flex-wrap: wrap; gap: 10px }
.links a { text-decoration: none; font: 400 16px/1 'Archivo Black', sans-serif; padding: 15px 22px; border-radius: 12px; background: #fff; color: var(--c) }
.links a.go { background: var(--hot); color: var(--hot-ink); font-size: 18px }
.links a.ghost { background: transparent; color: #fff; box-shadow: inset 0 0 0 2px currentColor }
.badge { display: inline-block; font: 600 12.5px/1 Archivo, sans-serif; letter-spacing: .1em; text-transform: uppercase; padding: 7px 10px; border-radius: 999px; background: var(--hot); color: var(--hot-ink) }
.badge.held { background: transparent; color: #fff; box-shadow: inset 0 0 0 1.5px currentColor }
.stage { display: block; order: 2 }
.stage .tv { display: block; position: relative; width: 100%; aspect-ratio: 16/9; border-radius: 12px; border: 8px solid var(--d); background: var(--d); overflow: hidden; box-shadow: 0 24px 60px rgba(0,0,0,.35) }
.tv video, .tv img, .pic video, .pic img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block }
.nameplate { position: absolute; inset: 0; display: grid; place-items: center; padding: 8%; text-align: center; font: 400 clamp(22px, 4vw, 56px)/.95 'Archivo Black', sans-serif; color: #fff; background: radial-gradient(circle at 30% 20%, var(--c), var(--d)) }

/* the picker's door (pick.gameaday.xyz) */

/* signup */
.band { padding: 60px 0 }
.band .in { display: grid; grid-template-columns: 1fr 1.35fr; gap: 24px 56px; align-items: start }
.band h2 { font: 400 clamp(34px, 4.6vw, 58px)/.95 'Archivo Black', sans-serif; margin: 0 0 12px; letter-spacing: -.01em }
.band p { margin: 0 0 12px; font-size: 18px }
#signup { background: var(--hot); color: var(--hot-ink) }
.subform { display: grid; gap: 12px }
.subrow { display: flex; flex-wrap: wrap; gap: 10px; align-items: center }
.subform input[type=email], .knock input { flex: 1 1 220px; min-width: 0; border: 0; border-radius: 12px; padding: 15px 16px; font-size: 18px; background: #fff; color: var(--hot-ink); box-shadow: inset 0 0 0 2px var(--hot-ink) }
.seg { display: inline-flex; border-radius: 12px; box-shadow: inset 0 0 0 2px var(--hot-ink); overflow: hidden }
.seg input { position: absolute; opacity: 0; pointer-events: none }
.seg span { display: block; padding: 13px 14px; font-weight: 600; cursor: pointer }
.seg input:checked + span { background: var(--hot-ink); color: var(--hot) }
.seg input:focus-visible + span { outline: 3px solid var(--field); outline-offset: -3px }
.go, .notify { border: 0; border-radius: 12px; padding: 15px 22px; font: 400 17px/1 'Archivo Black', sans-serif; cursor: pointer; background: var(--hot-ink); color: var(--hot) }
.notify { background: transparent; color: var(--hot-ink); box-shadow: inset 0 0 0 2px currentColor }
.notify.lead { background: var(--hot-ink); color: var(--hot) }
.ways { font-weight: 600 }
.fine { font-size: 13.5px !important; opacity: .8; margin: 0 !important }
.msg { font-weight: 600; margin: 0 !important }
.msg.bad { color: #9b1200 }
.ios p { margin: 4px 0 !important; font-size: 15px !important }

/* every game */
.floor { padding: 64px 0 72px }
.floor h2 { font: 400 clamp(40px, 6vw, 76px)/.92 'Archivo Black', sans-serif; margin: 0 0 22px; letter-spacing: -.015em }
#filters { display: grid; gap: 10px; margin-bottom: 14px }
#filters .row { display: flex; flex-wrap: wrap; gap: 8px; align-items: center }
.grp { font: 600 12.5px/1 Archivo, sans-serif; letter-spacing: .1em; text-transform: uppercase; opacity: .7; width: 54px }
.chip { border: 0; border-radius: 999px; padding: 10px 14px; cursor: pointer; font-weight: 600; background: transparent; color: var(--ink); box-shadow: inset 0 0 0 1.5px rgba(255,244,230,.5) }
.chip i { font-style: normal; opacity: .6; margin-left: 2px }
.chip.on { background: var(--ink); color: var(--field); box-shadow: none }
#sorts { margin: 0 0 26px; font-weight: 600; opacity: .9 }
#sorts span { opacity: .5; margin: 0 4px }
.sort { border: 0; background: none; color: var(--ink); cursor: pointer; font-weight: 600; padding: 6px 2px; opacity: .65 }
.sort.on { opacity: 1; text-decoration: underline; text-underline-offset: 4px }
#games { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 18px }
#games li { background: var(--c); border-radius: 16px; overflow: hidden; color: #fff; display: flex; flex-direction: column }
.cab { text-decoration: none; display: block }
.pic { display: block; position: relative; aspect-ratio: 16/9; background: var(--d) }
.pic .nameplate { font-size: 30px }
.cap { display: block; padding: 14px 16px 4px }
.cap .no { display: flex; align-items: center; gap: 8px; font: 400 14px/1 'Archivo Black', sans-serif; color: rgba(255,255,255,.7) }
.cap .badge { font-size: 11px; padding: 5px 8px }
.cap b { display: block; font: 400 26px/1 'Archivo Black', sans-serif; margin: 8px 0 6px; overflow-wrap: anywhere }
.cap .bl { display: block; font-size: 15px; line-height: 1.3; opacity: .92 }
.tags { display: flex; flex-wrap: wrap; gap: 6px; margin: 10px 16px 0 }
.tag { border: 0; border-radius: 999px; padding: 6px 10px; font-size: 13px; font-weight: 600; cursor: pointer; background: rgba(0,0,0,.22); color: #fff }
.plaque { margin: 10px 16px 16px; font-size: 13.5px; opacity: .78 }
#empty { font-size: 20px; font-weight: 600 }

/* about, back room, footer */
.band.dark { background: var(--deep) }
.band.dark a { color: var(--hot) }
.knock { display: flex; flex-wrap: wrap; gap: 10px }
.knock input { box-shadow: none }
.knock .go { background: var(--hot); color: var(--hot-ink) }
.nope { color: var(--hot); font-weight: 600 }
footer { background: var(--deep); padding: 8px 0 56px; font-size: 14.5px; opacity: .85 }
footer p { margin: 0 0 8px }

@media (max-width: 860px) {
  .in, .cover { padding-left: 16px; padding-right: 16px }
  .cover { padding-top: 40px; padding-bottom: 32px }
  .game .in { grid-template-columns: 1fr; padding-top: 32px; padding-bottom: 44px }
  .stage { order: -1 }
  .band .in { grid-template-columns: 1fr }
  .band { padding: 44px 0 }
  .floor { padding: 44px 0 52px }
  .grp { width: 100% }
  #games { grid-template-columns: 1fr }
}