/* ═══════════════════════════════════════════════════════════════════════════
   TUNANEPAL · screens
   ═══════════════════════════════════════════════════════════════════════════ */

/* ─────────────────────────────────────────────────────────────── sign in ── */
#gate {
  position: fixed; inset: 0; z-index: 60;
  display: flex; flex-direction: column; justify-content: flex-end;
  background: var(--paper);
  overflow: hidden;
}
#gate .gate__art { position: absolute; top: 0; left: 0; right: 0; height: 58vh; }
#gate .gate__art svg { width: 100%; height: 100%; display: block; }
#gate .gate__body {
  position: relative; z-index: 2;
  width: 100%; max-width: var(--shell);
  margin: 0 auto;
  padding: 0 24px max(30px, env(safe-area-inset-bottom));
}

.wordmark {
  font-family: var(--display);
  font-size: 54px;
  font-weight: 700;
  line-height: .92;
  letter-spacing: -.015em;
  color: var(--ink);
}
.wordmark em { font-style: normal; color: var(--crimson); }
.wordmark + p { color: var(--ink-3); margin: 6px 0 26px; max-width: 30ch; }

/* ────────────────────────────────────────────────────────────── app shell ── */
#app {
  display: flex; flex-direction: column;
  max-width: var(--shell);
  min-height: 100dvh;
  margin: 0 auto;
  background: var(--paper);
  border-inline: 1px solid var(--line);
}
@media (max-width: 520px) { #app { border-inline: 0; } }

.topbar {
  position: sticky; top: 0; z-index: 30;
  display: flex; align-items: center; gap: 11px;
  padding: max(12px, env(safe-area-inset-top)) var(--pad) 11px;
  background: color-mix(in srgb, var(--paper) 88%, transparent);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--line-soft);
}
.topbar__id { min-width: 0; flex: 1; }
.topbar__id b { display: block; font-family: var(--display); font-size: 19px; color: var(--ink); }
.topbar__id small { display: block; font-size: var(--t-xs); color: var(--ink-3); }

.purse {
  display: flex; flex-direction: column; align-items: flex-end;
  padding: 5px 11px;
  background: var(--marigold-sk);
  border: 1px solid color-mix(in srgb, var(--marigold) 35%, transparent);
  border-radius: var(--r-sm);
}
.purse small { font-size: 9.5px; letter-spacing: .14em; text-transform: uppercase; color: #9A6200; }
.purse b { font-family: var(--mono); font-size: 15px; font-weight: 600; color: #7A4E00; }
[data-theme="dark"] .purse small, [data-theme="dark"] .purse b { color: var(--marigold); }

.bell { position: relative; background: none; border: 0; padding: 6px; cursor: pointer; color: var(--ink-2); }
.bell svg { width: 21px; height: 21px; stroke: currentColor; fill: none; stroke-width: 1.7; }
.bell .dot {
  position: absolute; top: 3px; right: 3px;
  min-width: 15px; height: 15px; padding: 0 3px;
  border-radius: 9px;
  background: var(--crimson); color: #fff;
  font-family: var(--mono); font-size: 9px; font-weight: 600;
  display: grid; place-items: center;
  border: 1.5px solid var(--paper);
}

main { flex: 1; padding: 0 var(--pad) 92px; }

.screen { display: none; }
.screen[data-on] { display: block; animation: screenIn .2s var(--ease) both; }
@keyframes screenIn { from { opacity: 0; transform: translateY(6px); } }

.section-head {
  display: flex; align-items: baseline; justify-content: space-between; gap: 12px;
  margin: 24px 0 11px;
}

/* ──────────────────────────────────────────────────────────── ad banner ──
   Swipeable strip: drag with a finger or mouse, tap a dot or an arrow, or
   let it advance on its own. Auto-advance pauses the moment you touch it. */
.adstrip {
  position: relative;
  margin-top: 12px;
  border-radius: var(--r);
  overflow: hidden;
  background: var(--card-sunk);
  box-shadow: var(--shadow-sm);
  touch-action: pan-y;          /* page still scrolls; we handle sideways */
  user-select: none;
  cursor: grab;
}
.adstrip:active { cursor: grabbing; }
.adstrip__track { display: flex; will-change: transform; }
.adslide { flex: 0 0 100%; min-width: 100%; }
.adslide a { display: block; }
.adstrip img {
  width: 100%; aspect-ratio: 16 / 7; object-fit: cover; display: block;
  -webkit-user-drag: none;
}

.adnav {
  position: absolute; top: 50%; transform: translateY(-50%); z-index: 2;
  width: 30px; height: 30px;
  display: grid; place-items: center;
  border: 0; border-radius: 50%;
  background: rgba(20, 16, 10, .42);
  color: #fff; font-size: 21px; line-height: 1;
  cursor: pointer;
  opacity: 0; transition: opacity .18s, background .18s;
}
.adstrip:hover .adnav { opacity: 1; }
.adnav:hover { background: rgba(20, 16, 10, .68); }
.adnav--prev { left: 8px; }
.adnav--next { right: 8px; }
@media (hover: none) { .adnav { opacity: .8; } }

.adstrip__dots {
  position: absolute; bottom: 9px; left: 0; right: 0; z-index: 2;
  display: flex; justify-content: center; gap: 5px;
}
.adstrip__dots button {
  width: 7px; height: 7px; padding: 0;
  border: 0; border-radius: 50%;
  background: rgba(255, 255, 255, .55);
  cursor: pointer;
  transition: width .22s, background .22s;
}
.adstrip__dots button[data-on] { background: #fff; width: 18px; border-radius: 4px; }

/* ──────────────────────────────────────────── live rooms / tournaments ──
   One pill, two panes. Nothing moves except which pane is shown.        */
.modeswitch {
  display: grid; grid-template-columns: 1fr 1fr; gap: 4px;
  padding: 4px;
  margin: 18px 0 14px;
  background: var(--card-sunk);
  border: 1px solid var(--line);
  border-radius: 30px;
}
.modeswitch button {
  padding: 10px 8px;
  border: 0; border-radius: 26px;
  background: transparent;
  color: var(--ink-3);
  font-family: var(--display); font-size: 16px; font-weight: 600;
  letter-spacing: .07em; text-transform: uppercase;
  cursor: pointer;
  transition: background .18s var(--ease), color .18s;
}
.modeswitch button[aria-pressed="true"] {
  background: var(--ink);
  color: var(--paper);
  box-shadow: var(--shadow-sm);
}

/* ──────────────────────────────────────────────────────── game chooser ── */
.gamepick { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 16px; }
.gamepick button {
  position: relative;
  display: flex; flex-direction: column; align-items: flex-start; gap: 2px;
  padding: 15px 14px 13px;
  text-align: left;
  border: 1px solid var(--line);
  border-radius: var(--r);
  background: var(--card);
  cursor: pointer;
  overflow: hidden;
  transition: all .16s var(--ease);
}
.gamepick button:hover { border-color: var(--ink-3); }
.gamepick button[aria-pressed="true"] {
  background: var(--ink);
  border-color: var(--ink);
}
.gamepick button[aria-pressed="true"] .g-name,
.gamepick button[aria-pressed="true"] .g-count { color: var(--paper); }
.gamepick .g-name { font-family: var(--display); font-size: 22px; font-weight: 600; color: var(--ink); }
.gamepick .g-count { font-size: var(--t-xs); color: var(--ink-3); letter-spacing: .06em; text-transform: uppercase; }
.gamepick .g-mark {
  position: absolute; right: -14px; top: -14px;
  width: 62px; height: 62px; border-radius: 50%;
  background: var(--crimson); opacity: .09;
}
.gamepick button:nth-child(2) .g-mark { background: var(--indigo); }

/* ───────────────────────────────────────────────────────────── room card ── */
.room {
  display: flex; flex-direction: column; gap: 11px;
  margin-bottom: 11px;
}
.room__top { display: flex; align-items: flex-start; gap: 10px; }
.room__title { flex: 1; min-width: 0; }
.room__title h3 { font-size: 20px; }
.room__title small { display: block; color: var(--ink-3); font-size: var(--t-sm); }

.room__stake {
  text-align: right;
  flex-shrink: 0;
}
.room__stake b {
  display: block;
  font-family: var(--mono); font-size: 19px; font-weight: 600;
  color: var(--crimson);
}
.room__stake small { font-size: 9.5px; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-3); }

.room__tags { display: flex; flex-wrap: wrap; gap: 6px; }
.tag {
  padding: 3px 9px;
  border-radius: var(--r-sm);
  background: var(--card-sunk);
  color: var(--ink-2);
  font-size: var(--t-xs);
  font-weight: 500;
  letter-spacing: .03em;
}
.tag--on  { background: var(--win-sk); color: var(--win); }
.tag--off { background: var(--crimson-sk); color: var(--crimson-dk); }
[data-theme="dark"] .tag--off { color: var(--crimson); }

.room__foot { display: flex; align-items: center; gap: 10px; }

/* live countdown — the 10-minute fuse on every room */
.fuse { display: flex; align-items: center; gap: 6px; flex: 1; }
.fuse__track { flex: 1; height: 4px; border-radius: 3px; background: var(--card-sunk); overflow: hidden; }
.fuse__fill {
  display: block; height: 100%;
  background: var(--win);
  transition: width 1s linear, background .4s;
}
.fuse__fill[data-low] { background: var(--marigold); }
.fuse__fill[data-out] { background: var(--crimson); }
.fuse__time { font-family: var(--mono); font-size: var(--t-sm); font-weight: 600; color: var(--ink-2); min-width: 42px; }

/* credentials, revealed only after paying in */
.creds {
  display: grid; grid-template-columns: 1fr 1fr; gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  overflow: hidden;
}
.creds > div { background: var(--win-sk); padding: 10px 12px; }
.creds .full { grid-column: 1 / -1; }
.creds small { display: block; font-size: 9.5px; letter-spacing: .13em; text-transform: uppercase; color: var(--win); }
.creds b { font-family: var(--mono); font-size: 16px; font-weight: 600; color: var(--ink); }

/* ───────────────────────────────────────────────── details sheet layout ── */
.spec { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1px; background: var(--line); border: 1px solid var(--line); border-radius: var(--r-sm); overflow: hidden; margin-bottom: 16px; }
.spec > div { background: var(--card); padding: 10px 12px; }
.spec small { display: block; font-size: 9.5px; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-3); }
.spec b { font-family: var(--display); font-size: 17px; font-weight: 600; color: var(--ink); }
.spec .yes { color: var(--win); }
.spec .no { color: var(--loss); }
[data-theme="dark"] .spec .no { color: var(--crimson); }

.stakebox {
  display: flex; align-items: center; justify-content: space-between;
  padding: 13px 14px;
  background: var(--crimson-sk);
  border: 1px solid color-mix(in srgb, var(--crimson) 25%, transparent);
  border-radius: var(--r-sm);
  margin-bottom: 14px;
}
.stakebox small { display: block; font-size: var(--t-xs); color: var(--crimson-dk); letter-spacing: .08em; text-transform: uppercase; }
.stakebox b { font-family: var(--mono); font-size: 24px; font-weight: 600; color: var(--crimson-dk); }
.stakebox .win-line { text-align: right; font-size: var(--t-sm); color: var(--ink-2); }
.stakebox .win-line b { display: block; font-size: 19px; color: var(--win); }
[data-theme="dark"] .stakebox small, [data-theme="dark"] .stakebox > div > b { color: var(--crimson); }

/* ───────────────────────────────────────────────────────────── tab bar ── */
.tabbar {
  position: fixed; bottom: 0; left: 0; right: 0; z-index: 40;
  display: grid; grid-template-columns: repeat(5, 1fr);
  max-width: var(--shell); margin: 0 auto;
  background: color-mix(in srgb, var(--paper) 94%, transparent);
  backdrop-filter: blur(14px);
  border-top: 1px solid var(--line);
  padding-bottom: env(safe-area-inset-bottom);
}
.tabbar button {
  position: relative;
  display: flex; flex-direction: column; align-items: center; gap: 3px;
  padding: 9px 2px 10px;
  background: none; border: 0; cursor: pointer;
  color: var(--ink-3);
  font-family: var(--display);
  font-size: 11.5px; font-weight: 600;
  letter-spacing: .09em; text-transform: uppercase;
  transition: color .14s;
}
.tabbar button svg { width: 21px; height: 21px; stroke: currentColor; fill: none; stroke-width: 1.7; }
.tabbar button[aria-current="page"] { color: var(--ink); }
/* the active marker repeats the pennant silhouette */
.tabbar button[aria-current="page"]::before {
  content: '';
  position: absolute; top: 0;
  width: 26px; height: 4px;
  background: var(--crimson);
  clip-path: polygon(0 0, 100% 0, 100% 100%, 50% 58%, 0 100%);
}

/* ──────────────────────────────────────────────────────── misc screens ── */
.tabs-inline {
  display: flex; gap: 6px; margin-bottom: 14px;
  flex-wrap: wrap;
  justify-content: center;   /* sits centred under its heading */
}
.tabs-inline button {
  flex-shrink: 0;
  padding: 7px 14px;
  border-radius: 20px;
  border: 1px solid var(--line);
  background: var(--card);
  color: var(--ink-3);
  font-family: var(--display); font-size: 14px; font-weight: 600;
  letter-spacing: .06em; text-transform: uppercase;
  cursor: pointer;
}
.tabs-inline button[aria-pressed="true"] { background: var(--ink); border-color: var(--ink); color: var(--paper); }

/* ────────────────────────────────────────── auth card on the sign-in gate ── */
.wordmark-sub { color: var(--ink-3); margin: 6px 0 20px; max-width: 30ch; }

.gate__card {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: 20px 18px 18px;
  box-shadow: var(--shadow);
}
.gate__card h2 { font-size: var(--t-h2); }
.gate__sub { color: var(--ink-3); font-size: var(--t-sm); margin: 2px 0 16px; }
.gate__card .btn + .btn { margin-top: 8px; }
#gateSwitch { margin-top: 14px; }
#gateSwitch p { line-height: 1.9; }

/* On a wide screen the gate art was scaling into giant triangles. Cap it to
   the app column so the ridgeline keeps its proportions. */
#gate .gate__art {
  max-width: var(--shell);
  left: 50%;
  transform: translateX(-50%);
  right: auto;
  width: 100%;
}

/* ══════════════════════════════════════════ shared screen components ══════ */

.two-up { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
@media (max-width: 380px) { .two-up { grid-template-columns: 1fr; gap: 0; } }

.chiprow { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 8px; }
.chiprow button {
  padding: 7px 13px;
  border: 1px solid var(--line); border-radius: 20px;
  background: var(--card); color: var(--ink-2);
  font-family: var(--mono); font-size: 13.5px; cursor: pointer;
  transition: all .13s var(--ease);
}
.chiprow button:hover { border-color: var(--ink-3); }
.chiprow button[data-on] { background: var(--marigold); border-color: var(--marigold); color: #2A1B00; }

/* balance headline on the Load screen */
.balance-card {
  background: linear-gradient(135deg, var(--crimson), #8E1026);
  color: #fff;
  border-radius: var(--r);
  padding: 18px;
  margin-bottom: 16px;
}
.balance-card small { font-size: var(--t-xs); letter-spacing: .14em; text-transform: uppercase; opacity: .8; }
.balance-card b { display: block; font-size: 34px; font-weight: 600; margin-top: 2px; }

/* file picker that looks like a real control, not a browser default */
.filepick {
  position: relative;
  display: flex; align-items: center; justify-content: center;
  min-height: 84px; padding: 14px;
  border: 1.5px dashed var(--line); border-radius: var(--r-sm);
  background: var(--card-sunk);
  color: var(--ink-3); font-size: var(--t-sm); text-align: center;
  cursor: pointer; transition: all .15s;
}
.filepick:hover { border-color: var(--indigo); color: var(--indigo); }
.filepick input[type=file] { position: absolute; inset: 0; opacity: 0; cursor: pointer; }
.filepick[data-has] { border-style: solid; border-color: var(--win); background: var(--win-sk); color: var(--win); }
.filepick--inline { min-height: 0; padding: 8px 14px; border-radius: 20px; font-weight: 600; }

/* payment QR */
.qrbox {
  display: flex; gap: 14px; align-items: flex-start;
  padding: 12px; margin-bottom: 16px;
  background: var(--card-sunk); border: 1px solid var(--line); border-radius: var(--r-sm);
}
.qrbox img {
  width: 132px; height: 132px; object-fit: contain; flex-shrink: 0;
  background: #fff; border-radius: var(--r-sm); padding: 5px;
}
.qrbox__meta { flex: 1; min-width: 0; }
@media (max-width: 400px) { .qrbox { flex-direction: column; align-items: center; } }

/* UC packs */
.packgrid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.pack {
  display: flex; flex-direction: column; gap: 2px;
  padding: 14px; text-align: left;
  border: 1px solid var(--line); border-radius: var(--r);
  background: var(--card); cursor: pointer;
  transition: all .14s var(--ease);
}
.pack:hover { border-color: var(--ink-3); }
.pack[data-on] { border-color: var(--marigold); background: var(--marigold-sk); }
.pack b { font-family: var(--display); font-size: 19px; color: var(--ink); }
.pack small { color: var(--ink-3); font-size: var(--t-xs); }
.pack__price { display: block; margin-top: 6px; font-weight: 600; color: var(--crimson); }

/* three-up score strip, used on My games and Settings */
.scoreline {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px;
  background: var(--line); border: 1px solid var(--line);
  border-radius: var(--r); overflow: hidden; margin-bottom: 16px;
}
.scoreline > div { background: var(--card); padding: 12px 10px; text-align: center; }
.scoreline b { display: block; font-size: 20px; font-weight: 600; color: var(--ink); }
.scoreline small { font-size: 10px; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-3); }

/* profile block */
.profile { text-align: center; padding: 22px 16px 18px; }
.profile .avatar { margin: 0 auto 12px; }
.profile h2 { font-size: var(--t-h2); }
.profile__acts { display: flex; gap: 8px; justify-content: center; margin-top: 14px; }

/* settings menu rows */
.menurow {
  display: flex; align-items: center; gap: 12px;
  width: 100%; padding: 14px;
  background: none; border: 0; border-bottom: 1px solid var(--line-soft);
  color: var(--ink-3); text-align: left; cursor: pointer;
  transition: background .13s;
}
.menurow:last-child { border-bottom: 0; }
.menurow:hover { background: var(--card-sunk); }
.menurow b { display: block; color: var(--ink); font-family: var(--display); font-size: 17px; font-weight: 600; }
.menurow small { display: block; color: var(--ink-3); font-size: var(--t-sm); }

/* leaderboard */
.lbrow { display: flex; align-items: center; gap: 11px; padding: 10px 0; border-bottom: 1px solid var(--line-soft); }
.lbrow:last-child { border-bottom: 0; }
.lbrow b { display: block; color: var(--ink); font-weight: 600; }
.lbrow small { display: block; color: var(--ink-3); font-size: var(--t-xs); }
.lbrank {
  min-width: 34px; font-family: var(--mono); font-size: var(--t-sm);
  font-weight: 600; color: var(--ink-3);
}
.lbrank--top { color: var(--crimson); font-size: 16px; }

/* theme chooser */
.themepick { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.themepick button {
  padding: 14px; text-align: left; cursor: pointer;
  border: 1.5px solid var(--line); border-radius: var(--r); background: var(--card);
}
.themepick button[aria-pressed="true"] { border-color: var(--crimson); }
.themepick b { display: block; font-family: var(--display); font-size: 18px; color: var(--ink); margin-top: 8px; }
.themepick small { color: var(--ink-3); font-size: var(--t-xs); }
.swatch { display: block; width: 100%; height: 40px; border-radius: var(--r-sm); border: 1px solid var(--line); }
.swatch--cream { background: linear-gradient(135deg, #F6F1E4 55%, #D51A34 55%); }
.swatch--dark  { background: linear-gradient(135deg, #14161F 55%, #FF4257 55%); }

/* support chat */
.chatbox {
  max-height: 260px; overflow-y: auto;
  padding: 10px; border: 1px solid var(--line); border-radius: var(--r-sm);
  background: var(--card-sunk);
}
.bubble {
  max-width: 84%; margin-bottom: 9px; padding: 9px 12px;
  border-radius: 14px; font-size: var(--t-sm);
}
.bubble p { margin: 0; }
.bubble time { display: block; margin-top: 3px; font-size: 10px; opacity: .65; }
.bubble img, .bubble video { width: 100%; border-radius: 9px; margin-top: 6px; display: block; }
.bubble--player { margin-left: auto; background: var(--crimson); color: #fff; border-bottom-right-radius: 4px; }
.bubble--admin  { margin-right: auto; background: var(--card); color: var(--ink-2); border: 1px solid var(--line); border-bottom-left-radius: 4px; }

/* star rating */
.stars { display: flex; gap: 6px; justify-content: center; }
.stars button {
  background: none; border: 0; cursor: pointer;
  font-size: 38px; line-height: 1; color: var(--line);
  transition: color .12s, transform .12s;
}
.stars button:hover { transform: scale(1.12); }
.stars button[data-on] { color: var(--marigold); }

/* ═════════════════════════════════════════════════ rulebook + agreement ══ */

.field--tight { margin-bottom: 10px; }
.seg--wrap { flex-wrap: wrap; }
.seg--wrap button { flex: 0 1 auto; min-width: 0; padding: 8px 12px; font-size: 14px; }

.rulebook {
  border: 1px solid var(--line);
  border-radius: var(--r);
  background: var(--card-sunk);
  padding: 14px;
  margin-bottom: 14px;
  max-height: 300px;
  overflow-y: auto;
}
.rulebook__title { margin: 0 0 10px; color: var(--crimson); }

.rulelist { list-style: none; margin: 0; padding: 0; }

.rule-head {
  display: flex; align-items: center; gap: 7px;
  font-family: var(--display); font-size: 16px; font-weight: 600;
  color: var(--ink);
  margin: 14px 0 7px;
}
.rule-head::before {
  content: ''; width: 8px; height: 8px; flex-shrink: 0;
  background: var(--indigo); transform: rotate(45deg);
}
.rule-head:first-child { margin-top: 0; }

.rule {
  display: flex; gap: 8px;
  font-size: var(--t-sm); line-height: 1.45;
  padding: 3px 0 3px 4px;
}
.rule > span { flex-shrink: 0; font-weight: 700; width: 14px; text-align: center; }
.rule--no      { color: var(--crimson); }
.rule--no > span { color: var(--crimson); }
.rule--yes     { color: var(--win); }
.rule--neutral { color: var(--ink-2); }
.rule--neutral > span { color: var(--ink-3); }

.rule-warn {
  margin: 9px 0;
  padding: 9px 11px;
  border: 1px solid var(--crimson);
  border-left-width: 3px;
  border-radius: var(--r-sm);
  background: var(--crimson-sk);
  color: var(--crimson-dk);
  font-size: var(--t-sm);
  font-weight: 600;
}
[data-theme="dark"] .rule-warn { color: var(--crimson); }

.rule-text { font-size: var(--t-sm); color: var(--ink-2); margin: 6px 0; }

/* the gate itself */
.agree {
  display: flex; align-items: flex-start; gap: 10px;
  padding: 12px 13px; margin-bottom: 12px;
  border: 1.5px solid var(--line);
  border-radius: var(--r-sm);
  background: var(--card);
  cursor: pointer;
  transition: border-color .15s, background .15s;
}
.agree:hover { border-color: var(--ink-3); }
.agree[data-on] { border-color: var(--win); background: var(--win-sk); }
.agree input[type=checkbox] {
  width: 20px; height: 20px; flex-shrink: 0; margin-top: 1px;
  accent-color: var(--win); cursor: pointer;
}
.agree span { font-size: var(--t-sm); color: var(--ink-2); line-height: 1.4; }
.agree[data-on] span { color: var(--win); font-weight: 600; }

.spec { grid-template-columns: repeat(2, 1fr); }
.spec b.yes { color: var(--win); }
.spec b.no  { color: var(--loss); }
[data-theme="dark"] .spec b.no { color: var(--crimson); }


/* what a player still owes, shown on Settings so it is never a surprise */
.owedbox {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 12px 14px; margin-bottom: 14px;
  border: 1px solid var(--crimson); border-left-width: 3px;
  border-radius: var(--r-sm); background: var(--crimson-sk);
}
.owedbox small { display: block; font-size: var(--t-xs); letter-spacing: .1em; text-transform: uppercase; color: var(--crimson-dk); }
.owedbox b { font-family: var(--mono); font-size: 19px; color: var(--crimson-dk); }
.owedbox p { font-size: var(--t-xs); color: var(--ink-2); max-width: 22ch; }
[data-theme="dark"] .owedbox small, [data-theme="dark"] .owedbox b { color: var(--crimson); }

/* ══════════════════════════════════════════════════════════ tournaments ══ */
.tourn {
  border: 1px solid var(--line);
  border-radius: var(--r);
  background: var(--card);
  overflow: hidden;
  margin-bottom: 12px;
  box-shadow: var(--shadow-sm);
}
.tourn__banner { width: 100%; aspect-ratio: 16 / 7; object-fit: cover; display: block; }
.tourn__banner--blank {
  display: grid; place-items: center;
  background: linear-gradient(135deg, var(--crimson), #6E1030);
}
.tourn__banner--blank span {
  font-family: var(--display); font-size: 30px; font-weight: 700;
  letter-spacing: .06em; color: rgba(255, 255, 255, .82);
}
.tourn__body { padding: 14px; }
.tourn__head { display: flex; align-items: flex-start; gap: 10px; margin-bottom: 12px; }
.tourn__head h3 { font-size: 20px; }
.tourn__head small { display: block; color: var(--ink-3); font-size: var(--t-sm); }
.tourn__meta {
  display: flex; flex-wrap: wrap; gap: 6px 14px;
  font-size: var(--t-sm); color: var(--ink-3); margin-bottom: 10px;
}
.tourn__meta b { color: var(--ink); font-weight: 600; }

/* 1st / 2nd / 3rd, gold-silver-bronze rail on the left of each cell */
.prizerow {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px;
  background: var(--line); border: 1px solid var(--line);
  border-radius: var(--r-sm); overflow: hidden; margin-bottom: 12px;
}
.prizerow > div { position: relative; background: var(--card-sunk); padding: 9px 10px 9px 13px; }
.prizerow > div::before {
  content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 3px;
}
.prizerow > div:nth-child(1)::before { background: #E8940C; }
.prizerow > div:nth-child(2)::before { background: #9AA3B8; }
.prizerow > div:nth-child(3)::before { background: #B4713A; }
.prizerow small { display: block; font-size: 9.5px; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-3); }
.prizerow b { font-family: var(--mono); font-size: 15px; font-weight: 600; color: var(--ink); }

.slotbar { height: 5px; border-radius: 3px; background: var(--card-sunk); overflow: hidden; margin-bottom: 8px; }
.slotbar i { display: block; height: 100%; background: linear-gradient(90deg, var(--marigold), var(--crimson)); }

/* the whole tournament card is the tap target, so the pointer says so */
.tourn--tap { cursor: pointer; transition: transform .14s var(--ease), border-color .14s; }
.tourn--tap:hover { border-color: var(--ink-3); }
.tourn--tap:active { transform: scale(.994); }
.tourn--tap:focus-visible { outline: 2px solid var(--indigo); outline-offset: 2px; }
/* the call-to-action is a label now, not a button — keep it looking the same */
.tourn--tap .btn { width: 100%; pointer-events: none; }

/* ══════════════════════════════════════════════════════ install prompt ══ */
.installcard {
  display: flex; align-items: center; gap: 12px;
  padding: 11px 12px;
  margin-top: 12px;
  border: 1px solid var(--line);
  border-left: 3px solid var(--crimson);
  border-radius: var(--r);
  background: var(--card);
  box-shadow: var(--shadow-sm);
}
.installcard__icon img { border-radius: 10px; display: block; }
.installcard b { display: block; font-family: var(--display); font-size: 17px; color: var(--ink); }
.installcard small { display: block; font-size: var(--t-xs); color: var(--ink-3); }
.installcard__x {
  background: none; border: 0; cursor: pointer;
  color: var(--ink-3); font-size: 22px; line-height: 1;
  padding: 0 2px; align-self: flex-start;
}
.installcard__x:hover { color: var(--ink); }

/* numbered steps in the iPhone sheet */
.steplist { list-style: none; margin: 14px 0; padding: 0; }
.steplist li {
  display: flex; gap: 11px; align-items: flex-start;
  padding: 9px 0; border-bottom: 1px solid var(--line-soft);
  font-size: var(--t-sm); color: var(--ink-2);
}
.steplist li:last-child { border-bottom: 0; }
.steplist span {
  flex-shrink: 0; width: 22px; height: 22px;
  display: grid; place-items: center;
  border-radius: 50%; background: var(--crimson); color: #fff;
  font-family: var(--mono); font-size: 12px; font-weight: 600;
}

.installopt {
  padding: 13px;
  margin-bottom: 10px;
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  background: var(--card-sunk);
}
.installopt b { display: block; font-family: var(--display); font-size: 17px; color: var(--ink); margin-bottom: 3px; }
.installopt .btn { margin-top: 10px; text-decoration: none; }

/* the mark itself, above the wordmark on the sign-in screen */
.brandlogo {
  display: block;
  width: 76px; height: 76px;
  margin-bottom: 12px;
  border-radius: 50%;
  box-shadow: 0 3px 14px rgba(28, 24, 19, .16);
}
[data-theme="dark"] .brandlogo { box-shadow: 0 3px 16px rgba(0, 0, 0, .5); }

/* ═════════════════════════════════════════ important deposit notice ═════ */
.notice-red {
  display: flex; gap: 11px; align-items: flex-start;
  padding: 13px 14px;
  margin-bottom: 14px;
  border: 2px solid var(--crimson);
  border-radius: var(--r);
  background: var(--crimson-sk);
}
.notice-red__mark {
  flex-shrink: 0;
  font-size: 19px; line-height: 1.2;
  color: var(--crimson);
}
.notice-red b {
  display: block;
  font-family: var(--display);
  font-size: 17px; font-weight: 600;
  letter-spacing: .04em; text-transform: uppercase;
  color: var(--crimson-dk);
  margin-bottom: 2px;
}
.notice-red p {
  font-size: var(--t-sm);
  font-weight: 600;
  line-height: 1.45;
  color: var(--crimson-dk);
}
[data-theme="dark"] .notice-red b,
[data-theme="dark"] .notice-red p { color: var(--crimson); }

/* ══════════════════════════════════════════════════ team roster rows ═══ */
.rosterrow { display: flex; align-items: flex-start; gap: 10px; }
.rosterrow__n {
  flex-shrink: 0;
  width: 24px; height: 24px; margin-top: 22px;
  display: grid; place-items: center;
  border-radius: 50%;
  background: var(--card-sunk); color: var(--ink-3);
  font-family: var(--mono); font-size: 11px; font-weight: 600;
}
.rosterrow__n:only-child, .listrow .rosterrow__n { margin-top: 0; }
/* the captain is marked, since only they hold the room ID */
.rosterrow:first-of-type .rosterrow__n,
.listrow .rosterrow__n:not(:empty) { background: var(--crimson-sk); color: var(--crimson-dk); }
[data-theme="dark"] .rosterrow:first-of-type .rosterrow__n,
[data-theme="dark"] .listrow .rosterrow__n { color: var(--crimson); }

/* the app's own voice in a support chat — a notice, not a message */
.sysmsg {
  text-align: center;
  margin: 12px auto;
  padding: 14px 16px;
  max-width: 90%;
  border: 1px dashed var(--line);
  border-radius: var(--r);
  background: var(--card-sunk);
}
.sysmsg__tick {
  display: grid; place-items: center;
  width: 32px; height: 32px; margin: 0 auto 8px;
  border-radius: 50%;
  background: var(--win-sk); color: var(--win);
  font-size: 16px; font-weight: 700;
}
.sysmsg p { font-size: var(--t-sm); color: var(--ink-2); line-height: 1.45; }
.sysmsg time { display: block; margin-top: 5px; font-size: 10px; color: var(--ink-3); }

/* packs the player cannot yet afford stay visible but clearly out of reach */
.pack--short { opacity: .55; }
.pack--short .pack__price { color: var(--ink-3); }
.pack__lock {
  display: block; margin-top: 5px;
  font-size: 10px; letter-spacing: .06em; text-transform: uppercase;
  color: var(--crimson);
}

/* leaderboard now counts games, not rupees */
.lbwins { text-align: right; }
.lbwins b {
  display: block; font-family: var(--mono); font-size: 17px;
  font-weight: 600; color: var(--win);
}
.lbwins small {
  font-size: 9.5px; letter-spacing: .1em; text-transform: uppercase;
  color: var(--ink-3);
}

/* the second warning line, separated so both read as distinct rules */
.notice-red__second {
  margin-top: 7px;
  padding-top: 7px;
  border-top: 1px solid color-mix(in srgb, var(--crimson) 28%, transparent);
}

/* ═══════════════════════════════════════════════════════ the battle line ══
   Crimson bleeding into black, cut on the same diagonal as the pennant that
   runs through the rest of the app.                                       */
.battlecry {
  font-family: var(--display);
  font-size: clamp(26px, 8.2vw, 36px);
  font-weight: 700;
  line-height: 1.02;
  letter-spacing: -.01em;
  text-transform: uppercase;
  margin: -12px 0 22px;

  background-image: linear-gradient(102deg,
    #12100E 0%,
    #4A0C18 26%,
    #B4142C 52%,
    #FF2D45 72%,
    #12100E 100%);
  background-size: 240% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;

  /* the gradient drifts, so the words catch light rather than sitting flat */
  animation: emberDrift 7s ease-in-out infinite alternate;
}

@keyframes emberDrift {
  from { background-position:   0% 50%; }
  to   { background-position: 100% 50%; }
}

/* a thin ember underline, brightest where the text is hottest */
.battlecry::after {
  content: '';
  display: block;
  width: 84px;
  height: 3px;
  margin-top: 9px;
  border-radius: 2px;
  background: linear-gradient(90deg, #FF2D45, #B4142C 55%, transparent);
}

[data-theme="dark"] .battlecry {
  background-image: linear-gradient(102deg,
    #6B6560 0%,
    #A81026 24%,
    #FF3B52 50%,
    #FF7A88 70%,
    #6B6560 100%);
}

@media (prefers-reduced-motion: reduce) {
  .battlecry { animation: none; background-position: 40% 50%; }
}