/* Gameday HQ + fan tools. Uses the tokens from style.css. */
.page.gd { padding-bottom: 40px; }
.gd-icon { display: block; }
[hidden] { display: none !important; }

/* tool page header */
.gd-head { display: flex; gap: 14px; align-items: center; padding: 14px 0 20px; }
.gd-head-icon { width: 56px; height: 56px; flex-shrink: 0; border-radius: 12px; background: var(--blue); color: #fff; display: flex; align-items: center; justify-content: center; }
.gd-head-icon .gd-icon { width: 30px; height: 30px; }
.gd-head .block-sub { margin: 4px 0 0; }

/* HQ */
.gd-hq-head { padding: 26px 0 8px; display: flex; flex-direction: column; gap: 10px; }
.gd-hq-title { font-size: clamp(52px, 11vw, 88px); }
.gd-hq-head .block-sub { margin: 0; }
.gd-weather { margin: 18px 0 8px; border: 1px solid var(--line); border-radius: 12px; background: var(--tint); padding: 16px; }
.gd-weather-head { display: flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--blue); }
.gd-weather-body { margin-top: 10px; }
.gd-w-main { display: flex; align-items: center; gap: 16px; }
.gd-w-temp { font-family: var(--font-display); font-size: 64px; line-height: 1; color: var(--blue); }
.gd-w-short { font-size: 18px; font-weight: 700; display: flex; flex-direction: column; }
.gd-w-short small { font-size: 14px; font-weight: 500; color: var(--muted); }
.gd-w-hours { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 6px; margin-top: 12px; }
.gd-w-hours div { background: #fff; border: 1px solid var(--line); border-radius: 8px; padding: 6px 4px; display: flex; flex-direction: column; align-items: center; font-size: 12px; color: var(--muted); }
.gd-w-hours strong { font-size: 18px; color: var(--ink); }
.gd-w-tips { margin: 12px 0 0; padding-left: 20px; display: flex; flex-direction: column; gap: 4px; font-weight: 500; }
.gd-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin: 18px 0 28px; }
@media (min-width: 900px) { .gd-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px; } }
.gd-tile { display: flex; flex-direction: column; gap: 6px; padding: 16px; border: 1.5px solid var(--line); border-radius: 12px; background: #fff; transition: border-color .15s, transform .15s; }
.gd-tile:hover { border-color: var(--blue); transform: translateY(-2px); }
.gd-tile-icon { width: 44px; height: 44px; border-radius: 10px; background: var(--tint); color: var(--blue); display: flex; align-items: center; justify-content: center; margin-bottom: 4px; }
.gd-tile-name { font-family: var(--font-display); font-size: 22px; line-height: 1.05; text-transform: uppercase; color: var(--blue); }
.gd-tile-blurb { font-size: 14px; color: var(--muted); line-height: 1.35; }
.gd-tile.big { grid-column: 1 / -1; background: var(--red); border-color: var(--red); color: #fff; }
.gd-tile.big .gd-tile-name { color: #fff; font-size: 30px; }
.gd-tile.big .gd-tile-blurb { color: #fff; opacity: .92; font-size: 15px; }
.gd-tile.big .gd-tile-icon { background: rgba(255,255,255,.15); color: #fff; }
@media (min-width: 900px) { .gd-tile.big { grid-column: span 2; grid-row: span 2; justify-content: flex-end; } .gd-tile.big .gd-tile-name { font-size: 44px; } }

/* more-tools chips + shop plug (bottom of every tool) */
.gd-more { margin-top: 36px; }
.gd-more-head, .frame-opt-head { font-size: 13px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--red); margin-bottom: 10px; }
.gd-chips { display: flex; gap: 8px; overflow-x: auto; padding-bottom: 6px; scrollbar-width: thin; }
@media (min-width: 900px) { .gd-chips { flex-wrap: wrap; overflow: visible; } }
.gd-chip { flex-shrink: 0; display: inline-flex; align-items: center; gap: 8px; height: 44px; padding: 0 14px; border: 1.5px solid var(--line); border-radius: 999px; font-weight: 600; font-size: 14px; background: #fff; }
.gd-chip .gd-icon { width: 18px; height: 18px; color: var(--blue); }
.gd-chip:hover { border-color: var(--blue); }
.gd-shop-plug { margin-top: 20px; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; padding: 16px; border-radius: 12px; background: var(--tint); border: 1px solid var(--line); font-size: 15px; }

/* noise meter */
.noise { max-width: 560px; margin: 0 auto; display: flex; flex-direction: column; gap: 18px; }
.gauge-wrap { position: relative; width: 100%; max-width: 380px; margin: 0 auto; }
.gauge { width: 100%; display: block; }
.gauge path { fill: none; stroke-linecap: round; }
.gauge-track { stroke: var(--line); stroke-width: 18; }
.gauge-fill { stroke: var(--blue); stroke-width: 18; transition: stroke .2s; }
.noise.hot .gauge-fill { stroke: var(--red); }
.gauge .gauge-peak { stroke: var(--red); stroke-width: 28; stroke-linecap: butt; }
.gauge-read { position: absolute; left: 0; right: 0; top: 30%; display: flex; flex-direction: column; align-items: center; }
.gauge-num { font-family: var(--font-display); font-size: clamp(72px, 24vw, 112px); line-height: .95; color: var(--blue); font-variant-numeric: tabular-nums; }
.noise.hot .gauge-num { color: var(--red); }
.gauge-level { font-family: var(--font-display); font-size: 24px; text-transform: uppercase; letter-spacing: .03em; }
.gauge-peak-lab { font-size: 13px; font-weight: 600; color: var(--muted); text-transform: uppercase; letter-spacing: .08em; }
.noise-count { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; pointer-events: none; }
.noise-count:not(:empty) { align-items: flex-end; font-family: var(--font-display); font-size: 28px; color: var(--red); }
.noise-actions, .noise-share-row { display: flex; flex-direction: column; gap: 10px; }
@media (min-width: 600px) { .noise-actions, .noise-share-row { flex-direction: row; } .noise-actions .btn, .noise-share-row .btn { flex: 1 1 0; } }
.noise-result { display: flex; flex-direction: column; gap: 10px; padding: 18px; border-radius: 12px; background: var(--tint); border: 1px solid var(--line); }
.noise-result-num { font-family: var(--font-display); font-size: 88px; line-height: 1; color: var(--red); display: flex; align-items: baseline; gap: 10px; }
.noise-result-num small { font-family: var(--font-body); font-size: 16px; font-weight: 700; color: var(--muted); text-transform: uppercase; letter-spacing: .08em; }
.noise-result-level { font-family: var(--font-display); font-size: 30px; text-transform: uppercase; color: var(--blue); line-height: 1; }
.noise-card-preview { width: 100%; max-width: 300px; border-radius: 10px; box-shadow: var(--shadow); align-self: center; }
.noise-scale { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px 14px; font-size: 14px; color: var(--muted); }
.noise-scale strong { color: var(--ink); display: inline-block; min-width: 68px; }

/* soundboard */
.sb { display: flex; flex-direction: column; gap: 18px; }
.sb-shout { background: var(--blue); color: #fff; border-radius: 14px; padding: 18px; display: grid; gap: 14px; position: relative; overflow: hidden; }
.sb-shout::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 10px; background: url(zubaz.svg) center / cover no-repeat; }
.sb-shout-title { font-family: var(--font-display); font-size: 56px; line-height: 1; text-transform: uppercase; margin-top: 6px; }
.sb-shout p { margin: 6px 0 0; opacity: .92; }
.sb-play { display: flex; align-items: center; justify-content: center; gap: 14px; height: 72px; padding: 0 28px 0 12px; border-radius: 999px; background: #fff; color: var(--red); font: 400 34px/1 var(--font-display); text-transform: uppercase; letter-spacing: .03em; box-shadow: 0 6px 0 rgba(0,0,0,.25); transition: transform .06s, box-shadow .06s; }
.sb-play:active { transform: translateY(4px); box-shadow: 0 2px 0 rgba(0,0,0,.25); }
.sb-play-icon { width: 52px; height: 52px; border-radius: 50%; background: var(--red); color: #fff; display: flex; align-items: center; justify-content: center; padding-left: 3px; }
@media (min-width: 900px) { .sb-shout { grid-template-columns: 1fr auto; align-items: center; padding: 24px 28px; } }
.sb-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
@media (min-width: 700px) { .sb-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; } }
.sb-pad { aspect-ratio: 1.15; border: 0; border-radius: 14px; color: #fff; font: 400 22px/1.05 var(--font-display); text-transform: uppercase; letter-spacing: .02em; cursor: pointer; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; padding: 10px; box-shadow: 0 6px 0 rgba(0,0,0,.25); transition: transform .06s, box-shadow .06s; -webkit-tap-highlight-color: transparent; touch-action: manipulation; user-select: none; }
.sb-pad.red { background: var(--red); } .sb-pad.blue { background: var(--blue); } .sb-pad.ink { background: var(--ink); }
.sb-pad:active, .sb-pad.on { transform: translateY(4px); box-shadow: 0 2px 0 rgba(0,0,0,.25); }
.sb-pad.on { outline: 4px solid #FFD200; outline-offset: -4px; }
.sb-emoji { font-size: 34px; line-height: 1; }
.sb-controls { display: flex; gap: 14px; align-items: center; flex-wrap: wrap; }
.sb-vol { display: flex; align-items: center; gap: 10px; font-weight: 600; flex: 1 1 200px; }
.sb-vol input { flex: 1 1 auto; accent-color: var(--red); }

/* bingo */
.bingo { display: flex; flex-direction: column; gap: 16px; max-width: 720px; margin: 0 auto; }
.bingo-card { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 4px; background: var(--blue); padding: 4px; border-radius: 12px; }
.bingo-cell { aspect-ratio: 1; border: 0; border-radius: 6px; background: #fff; color: var(--ink); font: 600 11px/1.15 var(--font-body); padding: 3px; cursor: pointer; overflow: hidden; overflow-wrap: anywhere; display: flex; align-items: center; justify-content: center; text-align: center; -webkit-tap-highlight-color: transparent; }
@media (min-width: 600px) { .bingo-cell { font-size: 14px; padding: 6px; gap: 6px; } .bingo-card { gap: 6px; padding: 6px; } }
.bingo-cell.on { background: var(--red); color: #fff; }
.bingo-cell.hot { background: #FFD200; color: var(--ink); }
.bingo-cell.free { background: var(--red); color: #fff; font: 400 26px/1 var(--font-display); cursor: default; }
@media (min-width: 600px) { .bingo-cell.free { font-size: 40px; } }
.bingo-win { background: var(--red); color: #fff; border-radius: 12px; padding: 14px 18px; display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.bingo-win-title { font-family: var(--font-display); font-size: 40px; line-height: 1; animation: ko-pulse 1s ease-in-out infinite; }
.bingo-actions, .check-actions, .frame-actions { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }

/* scorekeeper */
.score { display: flex; flex-direction: column; gap: 14px; max-width: 760px; margin: 0 auto; }
.score-games { display: flex; gap: 8px; overflow-x: auto; }
.score-game { flex-shrink: 0; height: 44px; padding: 0 16px; border: 1.5px solid var(--line); border-radius: 999px; background: #fff; font-weight: 700; cursor: pointer; color: var(--ink); }
.score-game.on { background: var(--blue); border-color: var(--blue); color: #fff; }
.score-rules { margin: 0; color: var(--muted); font-size: 14px; }
.score-board { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.score-team { border-radius: 14px; padding: 12px; color: #fff; display: flex; flex-direction: column; align-items: center; gap: 6px; }
.score-team.blue { background: var(--blue); } .score-team.red { background: var(--red); }
.score-name { width: 100%; text-align: center; background: transparent; border: 0; border-bottom: 2px dashed rgba(255,255,255,.4); color: #fff; font: 400 24px/1.2 var(--font-display); text-transform: uppercase; padding: 4px; }
.score-name:focus { outline: none; border-bottom-color: #fff; }
.score-num { font-family: var(--font-display); font-size: clamp(88px, 28vw, 150px); line-height: 1; font-variant-numeric: tabular-nums; }
.score-wins { font-size: 13px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; min-height: 18px; opacity: .9; }
.score-btns { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; width: 100%; }
.score-btn { height: 56px; border-radius: 10px; border: 0; background: #fff; color: var(--ink); font: 400 26px/1 var(--font-display); cursor: pointer; touch-action: manipulation; }
.score-btn.minus { background: rgba(255,255,255,.18); color: #fff; }
.score-btn:disabled { opacity: .4; }
.score-banner { background: #FFD200; color: var(--ink); border-radius: 12px; padding: 14px; text-align: center; font-family: var(--font-display); font-size: 32px; text-transform: uppercase; }
.score-controls { display: flex; flex-wrap: wrap; gap: 10px 16px; align-items: center; }
.score-target { display: flex; gap: 12px; align-items: center; font-weight: 600; }
.score-target input[type=number] { width: 72px; height: 44px; padding: 0 10px; border: 1.5px solid var(--line); border-radius: var(--radius); }
.score-awake { font-weight: 600; display: flex; align-items: center; gap: 6px; }

/* checklist */
.check { display: flex; flex-direction: column; gap: 16px; max-width: 760px; }
.check-progress { display: flex; align-items: center; gap: 12px; }
.check-bar { flex: 1 1 auto; height: 12px; background: var(--line); border-radius: 999px; overflow: hidden; }
.check-bar span { display: block; height: 100%; background: var(--red); transition: width .2s; }
.check-count { font-weight: 700; white-space: nowrap; color: var(--blue); }
.check-groups { display: grid; gap: 14px; }
@media (min-width: 800px) { .check-groups { grid-template-columns: 1fr 1fr; } .check { max-width: none; } }
.check-group { border: 1px solid var(--line); border-radius: 12px; padding: 8px 14px 12px; margin: 0; }
.check-group legend { font-family: var(--font-display); font-size: 22px; text-transform: uppercase; color: var(--blue); padding: 0 6px; }
.check-row { display: flex; align-items: center; gap: 12px; padding: 9px 0; border-bottom: 1px solid var(--line); cursor: pointer; font-weight: 500; }
.check-row input { width: 22px; height: 22px; accent-color: var(--red); flex-shrink: 0; }
.check-row span { flex: 1 1 auto; }
.check-row.on span { color: var(--muted); text-decoration: line-through; }
.check-rm { border: 0; background: none; color: var(--muted); font-size: 22px; cursor: pointer; width: 32px; height: 32px; }
.check-add { display: flex; gap: 8px; margin-top: 10px; }
.check-add input { flex: 1 1 auto; min-width: 0; height: 40px; padding: 0 12px; border: 1.5px solid var(--line); border-radius: 6px; }

/* photo frame */
.frame { display: grid; gap: 16px; }
@media (min-width: 900px) { .frame { grid-template-columns: minmax(0, 460px) 1fr; align-items: start; gap: 36px; } .frame > .fine { grid-column: 1 / -1; } }
.frame-stage { position: relative; }
.frame-stage canvas { width: 100%; height: auto; display: block; border-radius: 10px; box-shadow: var(--shadow); touch-action: none; cursor: grab; background: var(--tint); }
.frame-pick { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; cursor: pointer; }
.frame-pick .fine { background: rgba(255,255,255,.85); padding: 2px 8px; border-radius: 6px; }
.frame-controls { display: flex; flex-direction: column; gap: 16px; }
.frame-zoom { display: flex; align-items: center; gap: 10px; font-weight: 600; }
.frame-zoom input { flex: 1 1 auto; accent-color: var(--red); }
.frame-controls .fine { margin-top: -10px; }
.frame-custom { margin-top: 10px; width: 100%; height: 48px; padding: 0 12px; border: 1.5px solid var(--line); border-radius: var(--radius); font-weight: 600; text-transform: uppercase; }

/* find my tailgate */
.spot { display: flex; flex-direction: column; gap: 18px; max-width: 620px; }
.spot-pin { background: var(--tint); border: 1px solid var(--line); border-radius: 12px; padding: 18px; display: flex; flex-direction: column; gap: 10px; }
.spot-label { font-family: var(--font-display); font-size: 34px; line-height: 1.05; text-transform: uppercase; color: var(--blue); overflow-wrap: anywhere; }
.spot-far { font-weight: 600; }
.spot-links { display: flex; flex-direction: column; gap: 10px; }
@media (min-width: 600px) { .spot-links { flex-direction: row; flex-wrap: wrap; } }
.spot-sub { font-family: var(--font-display); font-weight: 400; font-size: 26px; text-transform: uppercase; color: var(--blue); margin: 8px 0 0; }
.spot-drop { display: flex; flex-direction: column; gap: 12px; }
.spot-drop .field { margin: 0; }
.spot-result { display: flex; flex-direction: column; gap: 10px; }
.spot-acc { font-weight: 600; color: var(--blue); }
.spot-saved-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 10px 0; border-bottom: 1px solid var(--line); }

/* print: bingo card + checklist only */
@media print {
  .bar, .site-header, .zub-band, .site-footer, .crumbs, .gd-more, .gd-shop-plug, .bingo-actions, .check-actions, .check-add, .check-rm, #tailgate-gear, .fine, .toast, .demo-banner { display: none !important; }
  .bingo-card { background: #000; }
  .bingo-cell { font-size: 12px; }
}