/* ================= DESIGN TOKENS =================
   Illustrated board-game look (docs/DESIGN.md §7): everything is a printed component.
   - ink navy (--ink) for text and every outline; cream paper (--paper*) for surfaces, with a paper grain;
     kraft cardboard (--kraft) is the table on home / lobby.
   - ONE warm accent, mustard (--accent): the primary action and "something is expected from you".
   - sage (--good) / terracotta (--bad) only for small status marks. Team colours are small dots, tabs and tokens.
   Surfaces get a 2.5px ink outline, a slightly irregular corner radius and a small offset "printed" shadow. */
:root {
  --ink: #1d2744;
  --ink-2: #44506f;
  --ink-3: #5d6785;
  --ink-line: rgba(29, 39, 68, .38);
  --ink-faint: rgba(29, 39, 68, .16);

  --paper: #fbf3dc;
  --paper-hi: #fffaea;
  --paper-2: #f2e6c4;
  --paper-3: #e6d4a6;

  --kraft: #c9a36b;
  --kraft-d: #a98250;
  --kraft-l: #dcc08f;

  --accent: #f0b73e;
  --accent-hi: #f7c95f;
  --accent-d: #bf8612;
  --accent-soft: rgba(240, 183, 62, .26);
  --good: #5b9468;
  --good-ink: #36704a;
  --good-bg: #d9e9d2;
  --bad: #c4553b;
  --bad-ink: #b0452c;
  --bad-bg: #f3d0c3;
  --blue: #5f86b0;

  /* team palette: identification only (the server sends the real colours; --tc softens them a little) */
  --red: #E63946;
  --yellow: #F4A300;

  --bw: 2.5px;
  --rr: 16px 19px 17px 20px / 19px 16px 20px 17px;          /* cards, panels */
  --rr-s: 12px 14px 13px 15px / 14px 12px 15px 13px;         /* buttons, inputs, small cards */
  --rr-xs: 9px 11px 10px 12px / 11px 9px 12px 10px;          /* chips, rows */
  --print: 3px 4px 0 rgba(29, 39, 68, .28);                   /* offset "printed" shadow */
  --print-s: 2px 3px 0 rgba(29, 39, 68, .26);

  --f-head: "Secular One", "Rubik", system-ui, sans-serif;
  --f-body: "Rubik", system-ui, "Segoe UI", Arial, sans-serif;
  --f-hand: "Gveret Levin", "Secular One", "Rubik", system-ui, sans-serif;   /* hand-drawn accent: logo, a few labels */

  /* paper grain + kraft fibres: tiny inline SVG noise, no image files */
  --grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='p' x='0' y='0' width='100%25' height='100%25'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='2' seed='4' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .45 0 0 0 0 .32 0 0 0 0 .14 0 0 0 .7 -.26'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23p)'/%3E%3C/svg%3E");
  --squiggle: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='28' height='8' viewBox='0 0 28 8'%3E%3Cpath d='M0 4 Q7 -1 14 4 T28 4' fill='none' stroke='%23e5ae3a' stroke-width='2.6' stroke-linecap='round'/%3E%3C/svg%3E");   /* hand-drawn underline */
  --kraft-grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='320' height='320'%3E%3Cfilter id='k' x='0' y='0' width='100%25' height='100%25'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.028 .3' numOctaves='3' seed='8' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .36 0 0 0 0 .22 0 0 0 0 .07 0 0 0 1.2 -.48'/%3E%3C/filter%3E%3Cfilter id='s' x='0' y='0' width='100%25' height='100%25'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='1.05' numOctaves='1' seed='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .22 0 0 0 0 .14 0 0 0 0 .05 0 0 0 1.1 -.42'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23k)'/%3E%3Crect width='100%25' height='100%25' filter='url(%23s)'/%3E%3C/svg%3E");
}

/* team / player colours, softened a little so small dots and tabs sit calmly on paper (plain colour where color-mix is missing) */
.team-col, .banner, .sc-team, .trap, .lock-chip, .trophy, .standings li, .tdot { --tc: var(--c, #888); }
.pl, .sc-pl { --tp: var(--pc, #888); }
@supports (color: color-mix(in srgb, red, blue)) {
  .team-col, .banner, .sc-team, .trap, .lock-chip, .trophy, .standings li, .tdot { --tc: color-mix(in srgb, var(--c, #888) 86%, #7a6644); }
  .pl, .sc-pl { --tp: color-mix(in srgb, var(--pc, #888) 88%, #7a6644); }
}

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
[hidden] { display: none !important; }
::selection { background: var(--accent); color: var(--ink); }

html { -webkit-text-size-adjust: 100%; color-scheme: light; }
body {
  margin: 0;
  min-block-size: 100vh;
  font-family: var(--f-body);
  font-size: 17px;
  line-height: 1.4;
  color: var(--ink);
  background:
    radial-gradient(110% 70% at 50% -8%, rgba(255, 238, 200, .5), transparent 62%),
    radial-gradient(130% 80% at 50% 118%, rgba(84, 50, 18, .34), transparent 62%),
    var(--kraft-grain),
    var(--kraft);
  overflow-x: hidden;
}
h1, h2, h3 { font-family: var(--f-head); font-weight: 400; margin: 0; }
.panel h2::after { content: ""; display: block; inline-size: 56px; block-size: 8px; margin-block-start: 2px; background: var(--squiggle) repeat-x left center / 28px 8px; }
.modal-box h2::after { margin-inline: auto; }
p { margin: 0; }
a { color: var(--ink); font-weight: 700; }
button { font-family: inherit; }
.muted { color: var(--ink-2); font-size: .92rem; }

#app { min-block-size: 100vh; }
.screen { inline-size: min(100%, 1180px); margin-inline: auto; padding: 14px 14px 48px; }

/* ---------- icons: drawn in ink, round caps ---------- */
.ico { display: inline-block; inline-size: 1.15em; block-size: 1.15em; flex: none; vertical-align: -.2em; }

/* ---------- buttons: chunky printed tokens. Cream by default, mustard = the one primary action ---------- */
.btn {
  font-family: var(--f-body);
  font-size: 1rem;
  font-weight: 700;
  line-height: 1.15;
  color: var(--ink);
  background: var(--grain), var(--paper);
  border: var(--bw) solid var(--ink);
  border-radius: var(--rr-s);
  padding: .55em 1.1em;
  min-block-size: 46px;
  box-shadow: 0 4px 0 var(--ink);
  cursor: pointer;
  transition: transform .08s, box-shadow .08s, background-color .15s;
  user-select: none;
  touch-action: manipulation;
}
.btn:hover:not(:disabled) { background-color: var(--paper-hi); transform: translateY(-1px); box-shadow: 0 5px 0 var(--ink); }
.btn:active:not(:disabled) { transform: translateY(3px); box-shadow: 0 1px 0 var(--ink); }
.btn:disabled { opacity: .5; cursor: not-allowed; box-shadow: 0 3px 0 var(--ink-line); border-color: var(--ink-3); color: var(--ink-3); }
.btn:focus-visible, .seg button:focus-visible, .toggle:focus-visible, .swatch:focus-visible, .input:focus-visible { outline: 3px dashed var(--ink); outline-offset: 3px; }

.btn.primary, .btn.green { background: var(--grain), var(--accent); font-weight: 800; }
.btn.primary:hover:not(:disabled), .btn.green:hover:not(:disabled) { background-color: var(--accent-hi); }
.btn.primary:disabled, .btn.green:disabled { background: var(--grain), var(--paper-3); }
.btn.ghost { background: transparent; border-color: transparent; box-shadow: none; color: var(--ink-2); }
.btn.ghost:hover:not(:disabled) { background: rgba(255, 250, 234, .6); color: var(--ink); border-color: var(--ink-line); box-shadow: none; transform: none; }
.btn.ghost:active:not(:disabled) { transform: translateY(1px); box-shadow: none; }
.btn.big { font-size: 1.2rem; padding: .55em 1.3em; min-block-size: 58px; border-radius: var(--rr); }
.btn.sm { font-size: .92rem; padding: .3em .85em; min-block-size: 40px; border-radius: var(--rr-xs); box-shadow: 0 3px 0 var(--ink); }
.btn.sm:hover:not(:disabled) { box-shadow: 0 4px 0 var(--ink); }
.btn.sm:active:not(:disabled) { box-shadow: 0 1px 0 var(--ink); }
.btn.block { display: block; inline-size: 100%; }
.icon-btn { min-inline-size: 42px; padding-inline: .5em; display: inline-grid; place-items: center; }
.icon-btn .ico { inline-size: 1.25em; block-size: 1.25em; vertical-align: 0; }
.icon-btn.is-off { color: var(--bad-ink); }

/* ---------- panels / forms ---------- */
.panel {
  position: relative;
  background: var(--grain), var(--paper);
  border: var(--bw) solid var(--ink);
  border-radius: var(--rr);
  box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, .55), var(--print);
  padding: 1rem;
}
.field { display: grid; gap: .35rem; margin-block-end: .9rem; }
.field > span { font-family: var(--f-hand); font-size: 1.15rem; color: var(--ink-2); line-height: 1.1; }
.input {
  font: inherit; font-size: 1.15rem; inline-size: 100%;
  padding: .6em .85em; background: var(--paper-hi); color: var(--ink);
  border: var(--bw) solid var(--ink); border-radius: var(--rr-s);
  box-shadow: inset 0 2px 0 rgba(29, 39, 68, .1);
}
.input::placeholder { color: var(--ink-3); opacity: .85; }
.input:focus { outline: none; box-shadow: inset 0 2px 0 rgba(29, 39, 68, .1), 0 0 0 4px var(--accent-soft), 0 0 0 4px rgba(240, 183, 62, .5); }
.input:focus-visible { outline: none; }
.code-input { text-align: center; letter-spacing: .25em; font-weight: 800; text-transform: uppercase; font-family: var(--f-head); }
.badge { display: inline-block; padding: .25em .85em; border: 2px solid var(--ink); border-radius: 999px; font-weight: 600; font-size: .88rem; color: var(--ink-2); background: var(--paper-hi); }
.badge.warn { color: var(--ink); background: var(--accent-soft); border-color: var(--accent-d); }

/* ---------- toasts / connection ---------- */
#toasts { position: fixed; inset-block-start: 10px; inset-inline: 0; z-index: 100; display: grid; justify-items: center; gap: 8px; pointer-events: none; padding-inline: 12px; }
.toast {
  position: relative;
  background: var(--grain), var(--paper-hi); color: var(--ink); padding: .55em 1.1em; padding-inline-start: 1.5em;
  border-radius: var(--rr-s); border: var(--bw) solid var(--ink);
  font-weight: 600; box-shadow: var(--print); max-inline-size: 92vw; text-align: center;
  animation: toast-in .25s ease-out;
}
.toast::before { content: ""; position: absolute; inset-block: 0; inset-inline-start: 0; inline-size: 9px; background: var(--ink-3); border-inline-end: 2px solid var(--ink); border-start-start-radius: 9px; border-end-start-radius: 9px; }
.toast.bad::before { background: var(--bad); }
.toast.warn::before { background: var(--accent); }
.toast.good::before { background: var(--good); }
.toast.out { opacity: 0; transform: translateY(-10px); transition: .3s; }
.toast.sticky { pointer-events: auto; display: flex; align-items: center; gap: .6em; font-size: .92rem; padding-block: .4em; }
.toast.sticky .btn { padding-block: .2em; }
.toast.sticky .x { background: none; border: 0; color: var(--ink-3); font-size: 1.3em; line-height: 1; cursor: pointer; padding: 0 .2em; }
@keyframes toast-in { from { opacity: 0; transform: translateY(-12px) rotate(-1deg); } }
.conn {
  position: fixed; inset-block-start: 0; inset-inline: 0; z-index: 120; text-align: center; font-weight: 700; padding: .5em;
  background: var(--bad); color: var(--paper-hi); border-block-end: var(--bw) solid var(--ink); box-shadow: 0 3px 0 rgba(29, 39, 68, .3);
}

/* ---------- fx: confetti = punched paper bits ---------- */
#fx { position: fixed; inset: 0; pointer-events: none; z-index: 90; overflow: hidden; }
.confetto { position: absolute; border-radius: 2px; border: 1px solid rgba(29, 39, 68, .75); animation: confetto 1.7s cubic-bezier(.15, .7, .3, 1) forwards; }
@keyframes confetto {
  0% { transform: translate(0, 0) rotate(0); opacity: 1; }
  70% { opacity: 1; }
  100% { transform: translate(var(--dx), calc(var(--dy) + 260px)) rotate(var(--rot)); opacity: 0; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}