/* Take It Back — Sodium.
   Warm, humid, unglamorous. Everything is stencilled or painted; nothing is
   glassy. The court is always behind the UI, so surfaces stay dark and the
   type does the work. */

*, *::before, *::after { box-sizing: border-box; }

:root {
  --ink: #ffe6c2;
  --dim: #b08a5e;
  --accent: #ff9a2e;
  --cool: #ffcf8a;
  --panel: rgba(22,12,5,0.74);
  --edge: rgba(255,180,96,0.24);
  --display: 'Staatliches', system-ui, sans-serif;
  --body: 'Archivo', system-ui, sans-serif;
}

html, body {
  margin: 0;
  height: 100%;
  background: #080402;
  color: var(--ink);
  font-family: var(--body);
  overflow: hidden;
  overscroll-behavior: none;
  -webkit-font-smoothing: antialiased;
}

.noscript { position: fixed; inset: 0; display: grid; place-items: center; font-size: 18px; }

.stage { position: relative; width: 100vw; height: 100dvh; overflow: hidden; background: #080402; }
#court { display: block; width: 100%; height: 100%; }

.overlay {
  position: absolute; inset: 0;
  pointer-events: none;
  font-family: var(--body);
  color: var(--ink);
  text-transform: uppercase;
}
.overlay.is-in > * { animation: scrin .34s cubic-bezier(.2,.75,.2,1) both; }
@keyframes scrin { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }

/* ===================== screens: shared skeleton ===================== */

.scr {
  position: absolute; inset: 0;
  display: flex; flex-direction: column; align-items: center;
  padding: 4.2% 4%;
  text-align: center;
}

.scr-head { display: flex; flex-direction: column; align-items: center; gap: 2px; width: 100%; }
.scr-kick { margin: 0; font-size: clamp(9px, .9vw, 12px); letter-spacing: .34em; color: var(--dim); }
.scr-h1, .scr-h2 { margin: 0; font-family: var(--display); color: var(--ink); letter-spacing: .06em; }
.scr-h2 { font-size: clamp(22px, 3.4vw, 50px); }
.scr-sub { margin: 0; color: var(--dim); }

.scr-cta {
  margin: 0; display: flex; align-items: center; justify-content: center; gap: 12px;
  font-size: clamp(10px, 1.05vw, 14px); letter-spacing: .26em;
}
.scr-btn {
  display: grid; place-items: center; min-width: clamp(20px, 2.1vw, 28px); height: clamp(20px, 2.1vw, 28px);
  padding: 0 6px; border-radius: 999px; border: 1.5px solid var(--accent);
  color: var(--accent); font-family: var(--display); font-size: clamp(9px, .95vw, 13px); letter-spacing: 0;
  animation: pulse 1.9s ease-in-out infinite;
}
@keyframes pulse { 0%,100% { opacity: .55; } 50% { opacity: 1; } }

.scr-foot {
  margin-top: auto; width: 100%;
  display: flex; justify-content: space-between; align-items: baseline;
  font-size: clamp(8px, .84vw, 11px); letter-spacing: .22em; color: var(--dim);
}
.scr-foot b { color: var(--accent); font-weight: inherit; }

/* ---- title ---- */
.scr--title { justify-content: center; }
.scr--title .scr-h1 {
  display: flex; flex-direction: column;
  font-size: clamp(44px, 9vw, 140px); line-height: .82;
  margin: .16em 0 .22em;
  text-shadow: 0 0 70px rgba(255,154,46,.45), 0 6px 0 rgba(90,36,0,.5);
}
.scr--title .scr-h1 span:nth-child(2) { font-size: .44em; letter-spacing: .52em; color: var(--accent); }
.scr--title .scr-sub { font-size: clamp(11px, 1.2vw, 16px); letter-spacing: .16em; margin-bottom: 1.8em; }

/* ---- lists ---- */
.scr-list { list-style: none; margin: clamp(14px, 2.2vw, 32px) 0 0; padding: 0; width: min(100%, 620px); }
.scr-list--tight { margin-top: 1.2em; }
.scr-item {
  display: flex; flex-direction: column; align-items: center; gap: 2px;
  padding: clamp(7px, 1.1vw, 14px) clamp(10px, 1.6vw, 22px);
  border: 2px solid transparent;
}
.scr-item-tag { font-size: clamp(8px, .78vw, 10px); letter-spacing: .3em; color: var(--dim); }
.scr-item-name { font-family: var(--display); font-size: clamp(16px, 2vw, 29px); letter-spacing: .05em; }
.scr-item-desc { font-size: clamp(9.5px, .98vw, 13px); color: var(--dim); text-transform: none; }
.scr-item.is-on {
  border-color: var(--edge); background: var(--panel);
  box-shadow: inset 0 0 40px rgba(0,0,0,.55);
  transform: rotate(-.4deg);
}
.scr-item.is-on .scr-item-name { color: #fff2dc; text-shadow: 0 0 26px rgba(255,154,46,.55); }

/* ---- pick ---- */
.scr--pick .scr-cards {
  display: grid;
  grid-template-columns: minmax(0,1fr) minmax(0,1.05fr) minmax(0,1fr);
  gap: clamp(10px, 1.6vw, 28px);
  width: 100%; margin-top: clamp(10px, 1.6vw, 24px); align-items: start;
}
.card:nth-of-type(1) { grid-column: 1; }
.card:nth-of-type(2) { grid-column: 3; }
.card {
  display: flex; flex-direction: column; align-items: center; gap: clamp(6px, .9vw, 13px);
  padding: clamp(10px, 1.5vw, 20px); border: 2px solid transparent;
}
.card.is-on { border-color: var(--edge); background: var(--panel); box-shadow: inset 0 0 46px rgba(0,0,0,.55); }
.card-head { display: flex; flex-direction: column; align-items: center; gap: 1px; }
.card-kind { font-size: clamp(8px, .76vw, 10px); letter-spacing: .32em; color: var(--accent); }
.card-name { margin: 0; font-family: var(--display); font-size: clamp(24px, 3.6vw, 54px); line-height: .95; }
.card-full { margin: 0; color: var(--dim); font-size: clamp(9.5px, .98vw, 13px); text-transform: none; }
.card-vitals { margin: 0; font-size: clamp(8px, .82vw, 10px); letter-spacing: .2em; color: var(--dim); }
.card-attrs { margin: 0; display: grid; gap: clamp(2px, .35vw, 5px); width: 100%; }
.attr { display: grid; grid-template-columns: minmax(56px, 42%) 1fr; align-items: center; gap: 10px; }
.attr-name { font-size: clamp(7.5px, .78vw, 10px); letter-spacing: .22em; color: var(--dim); text-align: right; }
.attr-bar { margin: 0; display: flex; gap: 3px; }
.attr-bar i { flex: 1; max-width: clamp(12px, 1.5vw, 22px); height: clamp(4px, .5vw, 7px); background: rgba(255,214,160,.16); }
.attr-bar i.on { background: var(--accent); }
.card-sig { display: flex; flex-direction: column; gap: 1px; }
.card-sig-kick { font-size: clamp(7.5px, .74vw, 9px); letter-spacing: .3em; color: var(--dim); }
.card-sig-name { font-family: var(--display); font-size: clamp(13px, 1.4vw, 20px); color: var(--cool); letter-spacing: .06em; }
.card-sig-desc { font-size: clamp(9px, .9vw, 12px); color: var(--dim); text-transform: none; }
.card-pick { margin-top: auto; font-size: clamp(8px, .8vw, 10px); letter-spacing: .3em; color: var(--dim); }
.card.is-on .card-pick { color: var(--accent); }

/* ---- chapter / pause plate ---- */
.scr--chapter, .scr--pause, .scr--initials { justify-content: center; }
.scr-plate {
  width: min(100%, 660px);
  padding: clamp(16px, 2.4vw, 34px);
  background: var(--panel);
  border: 2px solid var(--edge);
  box-shadow: inset 0 0 60px rgba(0,0,0,.6), 0 24px 50px -20px #000;
  transform: rotate(-.4deg);
}
.scr-plate .scr-h2 { margin: .1em 0 .55em; }
.scr-body { font-size: clamp(10px, 1.05vw, 15px); line-height: 1.62; color: #e2c69c; text-transform: none; }
.scr-body p { margin: 0 0 .75em; }
.scr-body p:last-child { margin-bottom: 0; }
.scr-rulestrip {
  list-style: none; margin: 1.3em 0 .8em; padding: 1em 0 0; border-top: 1px solid var(--edge);
  display: flex; flex-wrap: wrap; justify-content: center; gap: clamp(6px, 1vw, 16px);
}
.scr-rulestrip li { font-size: clamp(8px, .84vw, 11px); letter-spacing: .24em; color: var(--dim); }
.scr-unlock { margin: 0 0 1.3em; font-size: clamp(9px, .9vw, 12px); letter-spacing: .2em; color: var(--accent); }

.keys {
  width: 100%; margin-top: 1.3em; padding-top: 1.1em; border-top: 1px solid var(--edge);
  border-collapse: collapse; font-size: clamp(8px, .84vw, 11px); letter-spacing: .14em;
}
.keys th { font-size: clamp(7px, .7vw, 9px); letter-spacing: .3em; color: var(--dim); font-weight: 400; padding-bottom: 6px; }
.keys td { padding: 2.5px 8px; color: var(--dim); }
.keys-what { text-align: left; color: var(--ink); white-space: nowrap; }
.keys-k { text-align: center; }
.keys-k b { color: var(--accent); font-weight: inherit; }
.keys-note { text-align: left; text-transform: none; font-size: .92em; opacity: .75; }

/* The in-game strip: quiet, permanent, and never in the way. */
.sd-help {
  position: absolute; left: 50%; bottom: 11%;
  transform: translateX(-50%);
  display: none; white-space: nowrap;
  font-size: clamp(7.5px, .82vw, 10.5px); letter-spacing: .2em;
  color: rgba(255,214,160,.55);
  text-shadow: 0 2px 10px rgba(0,0,0,.9);
}
.sd-help.is-on { display: block; }

/* ---- rules ---- */
.scr-rules { display: grid; gap: clamp(2px, .4vw, 6px); width: min(100%, 660px); margin-top: clamp(10px, 1.8vw, 24px); }
.rule { display: grid; grid-template-columns: minmax(96px, 34%) 1fr; align-items: center; gap: clamp(8px, 1.4vw, 22px); padding: 3px 6px; }
.rule.is-on { background: rgba(255,154,46,.09); outline: 1px solid var(--edge); }
.rule-name { font-size: clamp(8px, .84vw, 11px); letter-spacing: .24em; color: var(--dim); text-align: right; }
.rule.is-on .rule-name { color: var(--ink); }
.rule-opts { display: flex; gap: clamp(4px, .7vw, 10px); flex-wrap: wrap; }
.opt {
  padding: clamp(2px, .32vw, 5px) clamp(6px, .9vw, 12px);
  font-size: clamp(8.5px, .88vw, 11px); letter-spacing: .12em; color: var(--dim);
  border: 1px solid rgba(255,180,96,.2);
}
.opt.is-on { background: var(--accent); border-color: var(--accent); color: #201002; box-shadow: 0 0 18px rgba(255,154,46,.5); }

/* ---- result ---- */
.scr--result { justify-content: center; }
.res-verdict { margin: .12em 0 .18em; font-family: var(--display); font-size: clamp(28px, 5vw, 76px); line-height: .95; text-shadow: 0 0 50px rgba(255,154,46,.5); }
.res-score { display: flex; justify-content: center; align-items: baseline; gap: clamp(8px, 1.4vw, 20px); margin-bottom: clamp(12px, 2vw, 26px); }
.res-n { font-family: var(--display); font-size: clamp(10px, 1.1vw, 15px); letter-spacing: .12em; color: var(--dim); }
.res-v { font-family: var(--display); font-size: clamp(32px, 5vw, 74px); line-height: .82; }
.res-v--lose { color: var(--dim); }
.res-dash { width: clamp(12px, 1.8vw, 26px); height: 2px; background: var(--dim); opacity: .5; }
.res-stats { margin: 0; width: min(100%, 640px); display: grid; grid-template-columns: 1fr 1fr; gap: 1px clamp(16px, 3vw, 46px); }
.stat { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; padding: 4px 0; border-bottom: 1px solid rgba(255,180,96,.12); }
.stat-k { font-size: clamp(8px, .8vw, 10px); letter-spacing: .22em; color: var(--dim); }
.stat-v { margin: 0; font-family: var(--display); font-size: clamp(11px, 1.2vw, 16px); letter-spacing: .04em; }
.res-note { margin: 1.2em 0 0; max-width: 56ch; font-size: clamp(10px, 1vw, 13.5px); line-height: 1.6; color: #e2c69c; text-transform: none; }
.res-next { display: flex; flex-direction: column; align-items: center; gap: 1px; margin: clamp(12px, 2vw, 26px) 0 1.1em; }
.res-next-kick { font-size: clamp(7.5px, .74vw, 9px); letter-spacing: .34em; color: var(--dim); }
.res-next-n { font-size: clamp(8.5px, .86vw, 11px); letter-spacing: .2em; color: var(--accent); }
.res-next-t { font-family: var(--display); font-size: clamp(16px, 1.9vw, 28px); }

/* ---- board ---- */
.board-tabs { display: flex; gap: 14px; margin: clamp(10px, 1.6vw, 22px) 0; }
.board-tab { font-size: clamp(8px, .84vw, 11px); letter-spacing: .24em; color: var(--dim); padding-bottom: 3px; border-bottom: 2px solid transparent; }
.board-tab.is-on { color: var(--ink); border-bottom-color: var(--accent); }
.board-list { list-style: none; margin: 0; padding: 0; width: min(100%, 620px); }
.board-row { display: grid; grid-template-columns: 34px 1fr auto auto; align-items: baseline; gap: 14px; padding: 6px 8px; border-bottom: 1px solid rgba(255,180,96,.12); }
.board-row.is-mine { background: rgba(255,154,46,.12); }
.board-rank { font-family: var(--display); color: var(--dim); }
.board-who { font-family: var(--display); font-size: clamp(14px, 1.5vw, 21px); letter-spacing: .1em; text-align: left; }
.board-man { font-size: clamp(8px, .8vw, 10px); letter-spacing: .2em; color: var(--dim); }
.board-run { font-family: var(--display); color: var(--accent); letter-spacing: .06em; }
.board-empty { padding: 20px; color: var(--dim); font-size: 13px; }

/* ---- initials ---- */
.init-slots { display: flex; justify-content: center; gap: 14px; margin: 1.2em 0 1.6em; }
.init-slot {
  display: grid; place-items: center;
  width: clamp(46px, 5vw, 74px); height: clamp(56px, 6vw, 92px);
  font-family: var(--display); font-size: clamp(28px, 3.4vw, 52px);
  border: 2px solid var(--edge); background: rgba(0,0,0,.35);
}
.init-slot.is-on { border-color: var(--accent); color: #fff2dc; box-shadow: 0 0 26px rgba(255,154,46,.4); }

/* ===================== in-game HUD ===================== */

.sd-head {
  position: absolute; top: 4%; left: 3.6%; right: 3.6%;
  display: flex; justify-content: space-between; align-items: baseline;
  font-size: clamp(9px, .95vw, 12px); letter-spacing: .3em; color: var(--dim);
}
.sd-when { color: var(--accent); letter-spacing: .22em; }

.sd-board {
  position: absolute; left: 50%; top: 4.5%;
  transform: translateX(-50%) rotate(-.5deg);
  display: grid; grid-template-columns: 1fr auto 1fr; align-items: center;
  gap: clamp(14px, 2.6vw, 40px);
  padding: 10px clamp(14px, 2vw, 26px) 12px;
  background: var(--panel); border: 2px solid var(--edge);
  box-shadow: inset 0 0 40px rgba(0,0,0,.6), 0 18px 40px -18px #000;
}
.sd-side { text-align: right; }
.sd-side--r { text-align: left; }
.sd-nm { font-family: var(--display); font-size: clamp(12px, 1.35vw, 19px); letter-spacing: .13em; color: var(--dim); }
.sd-nm.is-you { color: var(--accent); }
.sd-sc { font-family: var(--display); font-size: clamp(28px, 4.4vw, 62px); line-height: .84; text-shadow: 0 0 26px rgba(255,154,46,.45); }
.sd-mid { display: flex; flex-direction: column; align-items: center; gap: 2px; }
.sd-to { font-family: var(--display); font-size: clamp(11px, 1.2vw, 16px); letter-spacing: .16em; color: var(--accent); }
.sd-by { font-size: clamp(7.5px, .8vw, 10px); letter-spacing: .26em; color: var(--dim); }
.sd-clock { font-family: var(--display); font-size: clamp(13px, 1.5vw, 21px); color: var(--cool); }
.sd-clock.is-late { color: #ff5c3c; animation: pulse .5s ease-in-out infinite; }

.sd-strip {
  position: absolute; left: 3.6%; right: 3.6%; bottom: 5%;
  display: flex; justify-content: space-between; align-items: center;
  font-size: clamp(8px, .85vw, 10.5px); letter-spacing: .26em; color: var(--dim);
}
.sd-cold, .sd-legs { display: flex; align-items: center; gap: 11px; }
.sd-bars { display: flex; gap: 4px; }
.sd-bars i { width: clamp(13px, 1.7vw, 26px); height: clamp(6px, .7vw, 10px); background: rgba(255,214,160,.14); border: 1px solid rgba(255,180,96,.28); }
.sd-bars i.on { background: var(--accent); border-color: var(--accent); box-shadow: 0 0 16px rgba(255,154,46,.8); }
.sd-track { width: clamp(70px, 9vw, 140px); height: clamp(6px, .7vw, 10px); background: rgba(255,214,160,.14); border: 1px solid rgba(255,180,96,.28); }
.sd-track i { display: block; height: 100%; background: var(--cool); transition: width .2s linear; }

.sd-callout, .sd-callout.is-on, .sd-owe, .sd-check {
  position: absolute; left: 50%; transform: translate(-50%,-50%) rotate(-2deg);
  font-family: var(--display); white-space: nowrap; letter-spacing: .1em;
}
.sd-callout { display: none; }
.sd-callout.is-on {
  display: block;
  top: 38%; font-size: clamp(30px, 6.4vw, 96px); color: #fff2dc;
  text-shadow: 0 0 70px rgba(255,154,46,.95), 0 8px 0 rgba(120,50,0,.6);
  animation: pop .4s cubic-bezier(.16,1.2,.3,1) both;
}
.sd-owe.is-on { display: block; }
.sd-owe {
  display: none;
  top: 78%; font-size: clamp(15px, 2.2vw, 32px); color: var(--accent);
  text-shadow: 0 0 40px rgba(255,154,46,.9); animation: pulse 1s ease-in-out infinite;
}
.sd-check { top: 76%; font-size: clamp(12px, 1.6vw, 22px); color: var(--cool); letter-spacing: .24em; }
.sd-check b { color: var(--accent); }
@keyframes pop { from { opacity: 0; transform: translate(-50%,-50%) rotate(-2deg) scale(.82); } to { opacity: 1; transform: translate(-50%,-50%) rotate(-2deg) scale(1); } }

.sd-you { display: none; }

/* ===================== small screens ===================== */

@media (max-width: 720px) {
  .scr--pick .scr-cards { grid-template-columns: 1fr 1fr; }
  .card:nth-of-type(2) { grid-column: 2; }
  .card-attrs, .card-sig { display: none; }
  .res-stats { grid-template-columns: 1fr; }
  .pause-keys { grid-template-columns: 1fr; }
}

@media (prefers-reduced-motion: reduce) {
  .overlay.is-in > *, .scr-btn, .sd-callout, .sd-owe, .sd-clock.is-late { animation: none; }
}