/* =============================================================================
   SheetHead — Tournament mode UI (on the card-room design system)
============================================================================= */

/* ---------- in-game: compact indicator ---------- */
.tbar { flex: none; display: flex; align-items: center; justify-content: center; gap: 14px 22px; flex-wrap: wrap; padding: 4px 12px; min-height: 26px; box-sizing: border-box; position: relative; z-index: 19;
  background: linear-gradient(180deg, rgba(227,183,90,.14), rgba(227,183,90,.04)); border-top: 1px solid rgba(227,183,90,.35); border-bottom: 1px solid var(--line); }
.tb-tag { display: inline-flex; align-items: center; gap: 6px; font: 700 10.5px/1 var(--f-ui); letter-spacing: .2em; text-transform: uppercase; color: var(--paper); white-space: nowrap; }
.tb-cup { color: var(--brass); flex: none; }
.tb-tag b { color: var(--brass); font-weight: 800; } .tb-tag i { font-style: normal; } .tb-tag em { font-style: normal; color: rgba(243,234,216,.6); margin-left: 6px; }
.tb-scores { display: flex; gap: 6px 14px; list-style: none; margin: 0; padding: 0; flex-wrap: wrap; justify-content: center; }
.tb-scores li { display: inline-flex; align-items: baseline; gap: 5px; font: 700 11.5px/1 var(--f-ui); color: rgba(243,234,216,.75); }
.tb-scores li b { font: 400 15px/1 var(--f-display); color: var(--paper); }
.tb-scores li.lead b { color: var(--brass-3); } .tb-scores li.me span { color: var(--paper); text-decoration: underline; text-underline-offset: 3px; text-decoration-color: var(--brass); }
@media (max-width: 560px) { .tbar { gap: 3px 12px; padding: 4px 8px; } .tb-tag { letter-spacing: .1em; font-size: 10px; } .tb-scores li { font-size: 10.5px; } .tb-scores li b { font-size: 13px; } }

/* ---------- in-game: winner's setup sheet ---------- */
.setup-sheet { --setw: clamp(46px, 12.6vw, 84px); position: fixed; left: 0; right: 0; bottom: 0; z-index: 58; box-sizing: border-box; margin: 0 auto; max-width: 880px; outline: none;
  padding: 14px 16px calc(14px + env(safe-area-inset-bottom, 0px)); background: linear-gradient(180deg, rgba(31,22,21,.97), rgba(12,9,11,.99));
  border-top: 2px solid var(--brass); border-radius: 14px 14px 0 0; box-shadow: 0 -18px 50px rgba(0,0,0,.6); animation: js-in .32s var(--ease-out) both; }
.ss-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 14px; }
.ss-kicker { font: 700 10px/1 var(--f-ui); letter-spacing: .3em; text-transform: uppercase; color: var(--brass); margin-bottom: 6px; }
.ss-title { font: 400 clamp(19px, 3vw, 24px)/1.1 var(--f-display); color: var(--paper); }
.ss-sub { margin-top: 4px; font: 500 12.5px/1.35 var(--f-body); color: rgba(243,234,216,.7); }
.ss-timer { flex: none; min-width: 58px; padding: 6px 8px; border-radius: 8px; text-align: center; border: 1.5px solid var(--line-2); background: rgba(243,234,216,.05); }
.ss-timer b { display: block; font: 400 26px/1 var(--f-display); color: var(--paper); font-variant-numeric: tabular-nums; }
.ss-timer span { font: 700 9px/1 var(--f-ui); letter-spacing: .22em; text-transform: uppercase; color: rgba(243,234,216,.6); }
.ss-timer.warn { border-color: var(--brass); } .ss-timer.warn b { color: var(--brass-3); }
.ss-timer.danger { border-color: #ff5d73; background: rgba(255,93,115,.14); animation: ssPulse 1s ease-in-out infinite; } .ss-timer.danger b { color: #ff8a99; font-size: 30px; }
@keyframes ssPulse { 0%,100% { box-shadow: 0 0 0 0 rgba(255,93,115,.6); } 50% { box-shadow: 0 0 0 8px rgba(255,93,115,0); } }
.ss-cards { display: flex; justify-content: center; gap: clamp(6px, 1.6vw, 14px); margin: 12px 0 8px; }
.ss-slot { display: flex; flex-direction: column; align-items: center; gap: 8px; padding-top: calc(var(--setw) * .34); }
.ss-slot .card { --cw: var(--setw); }
.ss-tag { font: 800 9px/1 var(--f-ui); letter-spacing: .16em; text-transform: uppercase; padding: 4px 7px; border-radius: 4px; background: rgba(243,234,216,.08); color: rgba(243,234,216,.6); transition: background .2s, color .2s; }
.ss-slot.on .ss-tag { background: var(--mint); color: #04231c; }
.ss-foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.ss-count { font: 700 12px var(--f-ui); letter-spacing: .1em; text-transform: uppercase; color: rgba(243,234,216,.75); } .ss-count b { font: 400 20px var(--f-display); color: var(--brass-3); }
@media (max-width: 520px) { .ss-sub { display: none; } .ss-title { font-size: 18px; } }

/* ---------- setup screen ---------- */
.tsetup { display: grid; gap: 24px; max-width: 760px; margin: 0 auto; }
.tsetup .ticket { text-align: left; }
.t-lede { color: #4b3d31; font-size: 15.5px; line-height: 1.6; margin: 0 0 18px; }
.t-label { display: block; font: 700 11px/1 var(--f-ui); letter-spacing: .28em; text-transform: uppercase; color: var(--felt); margin: 20px 0 10px; }
.target-tiles { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; }
.target-tile { position: relative; padding: 14px 6px 12px; border-radius: 10px; cursor: pointer; text-align: center; border: 1.5px solid var(--paper-ink); background: #fffaf0; color: var(--paper-ink); box-shadow: 0 4px 0 var(--paper-ink);
  transition: transform .15s var(--ease-out), box-shadow .15s, background .2s; }
.target-tile b { display: block; font: 400 clamp(34px, 5vw, 46px)/1 var(--f-display); }
.target-tile span { display: block; margin-top: 4px; font: 700 9.5px/1.2 var(--f-ui); letter-spacing: .16em; text-transform: uppercase; color: var(--paper-dim); }
.target-tile:hover { transform: translateY(-2px); box-shadow: 0 6px 0 var(--paper-ink); }
.target-tile[aria-checked="true"] { background: var(--paper-ink); color: var(--brass-3); box-shadow: 0 4px 0 var(--brass-2), 0 0 0 3px var(--brass); }
.target-tile[aria-checked="true"] span { color: var(--brass); }
.t-rules { margin: 18px 0 0; padding: 0; list-style: none; display: grid; gap: 10px; }
.t-rules li { display: grid; grid-template-columns: 30px 1fr; gap: 10px; align-items: start; font-size: 14.5px; line-height: 1.5; color: #33281f; }
.t-rules li > i { font: 400 20px/1 var(--f-display); color: var(--felt); font-style: normal; }
.t-actions { margin-top: 22px; }

/* ---------- scoreboard between games ---------- */
.tboard { min-height: 100dvh; display: grid; place-items: center; padding: 22px 16px calc(22px + env(safe-area-inset-bottom, 0px)); position: relative; }
.tboard-ticket { width: 100%; max-width: 640px; }
.tb-head { text-align: center; }
.tb-title { font: 400 clamp(30px, 4.6vw, 46px)/1 var(--f-display); margin: 10px 0 4px; color: var(--paper-ink); }
.tb-sub { font: 700 12px/1.4 var(--f-ui); letter-spacing: .2em; text-transform: uppercase; color: var(--paper-dim); }
.tb-won { display: inline-block; margin-top: 12px; padding: 7px 14px; border-radius: 6px; background: var(--felt); color: #fff; font: 700 12px/1 var(--f-ui); letter-spacing: .16em; text-transform: uppercase; }
.tb-rows { list-style: none; margin: 20px 0 6px; padding: 0; border-top: 1.5px solid var(--paper-ink); }
.tb-row { display: grid; grid-template-columns: 34px 46px 1fr auto; gap: 12px; align-items: center; padding: 12px 8px; border-bottom: 1.5px dotted rgba(28,20,16,.3); position: relative; }
.tb-row.winner { background: linear-gradient(90deg, rgba(227,183,90,.42), rgba(227,183,90,.1)); }
.tb-pos { font: 400 26px/1 var(--f-display); color: var(--felt); text-align: center; }
.tb-av { width: 42px; aspect-ratio: 1; border-radius: 10px; display: grid; place-items: center; font-size: 22px; background: hsl(var(--hue, 40) 60% 88%); border: 2px solid var(--paper-ink); box-shadow: 0 3px 0 var(--paper-3); }
.tb-name { font: 600 16px/1.1 var(--f-body); color: var(--paper-ink); }
.tb-name small { display: block; margin-top: 4px; font: 700 9.5px/1 var(--f-ui); letter-spacing: .16em; text-transform: uppercase; color: var(--felt); }
.tb-pips { display: flex; gap: 4px; margin-top: 7px; flex-wrap: wrap; }
.tb-pips i { width: 14px; height: 18px; border-radius: 3px; border: 1.5px solid rgba(28,20,16,.45); background: transparent; }
.tb-pips i.on { background: var(--paper-ink); border-color: var(--paper-ink); }
.tb-pips i.new { background: var(--felt); border-color: var(--felt); animation: pipIn .7s var(--ease-out) both; }
@keyframes pipIn { 0% { transform: scale(.2) rotate(-30deg); } 60% { transform: scale(1.35) rotate(6deg); } 100% { transform: scale(1); } }
.tb-pts { font: 400 34px/1 var(--f-display); color: var(--paper-ink); min-width: 40px; text-align: right; font-variant-numeric: tabular-nums; }
.tb-row.winner .tb-pts { color: var(--felt); }
.tb-plus { position: absolute; right: 54px; top: 6px; font: 800 13px var(--f-ui); color: var(--felt); animation: plusUp 1.4s var(--ease-out) both; }
@keyframes plusUp { from { opacity: 0; transform: translateY(8px); } 25% { opacity: 1; } to { opacity: 1; transform: translateY(-4px); } }
.tb-count { margin-top: 18px; text-align: center; }
.tb-count .cd-label { font: 700 11px/1 var(--f-ui); letter-spacing: .28em; text-transform: uppercase; color: var(--paper-dim); }
.tb-count .cd-num { display: block; margin: 8px auto 6px; font: 400 clamp(44px, 8vw, 64px)/1 var(--f-display); color: var(--felt); font-variant-numeric: tabular-nums; }
.tb-count .cd-num.tick { animation: cdTick .9s var(--ease-out) both; }
@keyframes cdTick { 0% { transform: scale(1.5); opacity: .2; } 30% { transform: scale(1); opacity: 1; } 100% { transform: scale(.94); opacity: .9; } }
.tb-bar { height: 6px; border-radius: 3px; background: rgba(28,20,16,.18); overflow: hidden; }
.tb-bar i { display: block; height: 100%; background: var(--felt); transition: width .25s linear; }
.tb-hint { margin: 12px 0 0; font-size: 13px; line-height: 1.5; color: var(--paper-dim); text-align: center; }
.tb-leave { margin-top: 12px; text-align: center; }

/* ---------- tournament victory ---------- */
.tvic { min-height: 100dvh; display: grid; grid-template-columns: minmax(0, 1fr); place-items: center; padding: 22px 16px calc(22px + env(safe-area-inset-bottom, 0px)); position: relative; overflow: hidden; }
.tvic-gl { position: fixed; inset: 0; z-index: 0; pointer-events: none; }
.tvic-gl canvas { display: block; }
.tvic-ticket { position: relative; z-index: 2; width: 100%; max-width: 640px; text-align: center; }
.tvic-crown { width: 92px; margin: -2px auto 0; filter: drop-shadow(0 10px 18px rgba(0,0,0,.4)); }
.tvic-kicker { font: 800 12px/1 var(--f-ui); letter-spacing: .4em; text-transform: uppercase; color: var(--felt); margin: 10px 0 8px; }
.tvic-name { font: 400 clamp(38px, 7vw, 64px)/1 var(--f-display); margin: 0; color: var(--paper-ink); }
.tvic-line { margin: 10px 0 0; font-size: 15px; color: #4b3d31; }
.tvic-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin: 20px 0 6px; }
.tvic-stats div { padding: 10px 6px; border-radius: 8px; border: 1.5px solid rgba(28,20,16,.35); background: rgba(255,255,255,.4); }
.tvic-stats b { display: block; font: 400 30px/1 var(--f-display); color: var(--felt); }
.tvic-stats span { display: block; margin-top: 5px; font: 700 9.5px/1.2 var(--f-ui); letter-spacing: .16em; text-transform: uppercase; color: var(--paper-dim); }
.tvic .tb-rows { text-align: left; }
.tvic-wins { font: 700 11px/1 var(--f-ui); letter-spacing: .12em; text-transform: uppercase; color: var(--paper-dim); align-self: center; }

@media (max-width: 560px) {
  .target-tiles { gap: 7px; } .target-tile { padding: 12px 2px 10px; } .target-tile span { font-size: 8.5px; letter-spacing: .1em; }
  .tb-row { grid-template-columns: 26px 38px 1fr auto; gap: 8px; padding: 10px 4px; } .tb-av { width: 36px; font-size: 19px; } .tb-pts { font-size: 28px; } .tb-plus { right: 40px; }
  .tb-pips i { width: 11px; height: 15px; }
  .tvic-stats b { font-size: 25px; } .tvic-crown { width: 76px; }
}
@media (prefers-reduced-motion: reduce) { .setup-sheet, .tb-pips i.new, .tb-plus, .tb-count .cd-num.tick, .ss-timer.danger { animation: none; } }

/* ---------- entry point on the solo / online screens ---------- */
.tourney-cta { display: flex; align-items: center; gap: 16px; width: min(680px, 100%); margin: 26px auto 0; padding: 16px 18px; text-align: left; cursor: pointer; color: var(--paper);
  border: 1.5px solid var(--brass-2); border-radius: 12px; background: linear-gradient(180deg, rgba(227,183,90,.16), rgba(227,183,90,.05)); transition: transform .2s var(--ease-out), border-color .2s, background .2s; }
.tourney-cta:hover, .tourney-cta:focus-visible { transform: translateY(-3px); border-color: var(--brass); background: linear-gradient(180deg, rgba(227,183,90,.26), rgba(227,183,90,.08)); }
.tc-seal { flex: none; width: 46px; height: 46px; border-radius: 50%; display: grid; place-items: center; background: var(--brass); color: var(--brass-ink); box-shadow: 0 0 0 3px var(--ink-1), 0 0 0 4.5px var(--brass-2); }
.tc-text { flex: 1; min-width: 0; } .tc-text b { display: block; font: 400 24px/1.1 var(--f-display); }
.tc-text i { display: block; margin-top: 4px; font: 500 13.5px/1.4 var(--f-body); font-style: normal; color: rgba(243,234,216,.72); }
.tc-go { flex: none; display: inline-flex; align-items: center; gap: 8px; font: 700 12px/1 var(--f-ui); letter-spacing: .16em; text-transform: uppercase; color: var(--brass-3); }
@media (max-width: 560px) { .tourney-cta { gap: 12px; padding: 14px; } .tc-go { display: none; } .tc-text b { font-size: 21px; } }
.tb-title { text-wrap: balance; }
@media (max-width: 560px) { .tb-title { font-size: 27px; } }
/* The "Tournament" word (and its "First to N / Game N" subtitle, hidden elsewhere) does not fit a phone header, but the
   cup must stay: it is the only thing left telling a player at a glance that this is a Tournament, not a normal match. */
@media (max-width: 560px) { .gs-top .title.tourney .title-word { display: none; } }
.title-cup { color: var(--brass); flex: none; }