/* ══════════════════════════════════════════════════════════════════════
   Sprite Spin the Wheel — tab game. 1080 × 1920 design canvas (the
   artwork's native size), scaled to fit and letter-boxed.
   Element positions come from js/config.js (measured off the artwork).
   ══════════════════════════════════════════════════════════════════════ */

@font-face { font-family: 'Unity Headline'; src: url('../assets/fonts/TCCC-UnityHeadline-Black.ttf') format('truetype'); font-weight: 900; font-display: block; }
@font-face { font-family: 'Unity Headline'; src: url('../assets/fonts/TCCC-UnityHeadline-Bold.ttf') format('truetype'); font-weight: 700; font-display: block; }
@font-face { font-family: 'Unity Text'; src: url('../assets/fonts/TCCC-UnityText-Regular.ttf') format('truetype'); font-weight: 400; font-display: block; }
@font-face { font-family: 'Unity Text'; src: url('../assets/fonts/TCCC-UnityText-Bold.ttf') format('truetype'); font-weight: 700; font-display: block; }

:root {
  --green:      #0BA14B;   /* flat artwork green, sampled */
  --green-deep: #06652F;
  --green-dark: #043F1D;
  --wheel:      #17AA4B;   /* wheel ring */
  --lime:       #00D201;   /* SUBMIT body, sampled */
  --lime-hi:    #46C250;
  --ink:        #06401E;   /* typed text */
  --warn:       #FFE45C;
}

* { box-sizing: border-box; margin: 0; padding: 0; -webkit-tap-highlight-color: transparent; }
[hidden] { display: none !important; }

html, body {
  height: 100%;
  background: #04301A;
  overflow: hidden;
  font-family: 'Unity Headline', 'Segoe UI', system-ui, sans-serif;
  -webkit-user-select: none; user-select: none;
  -webkit-touch-callout: none;
  touch-action: manipulation;
  overscroll-behavior: none;
}
body.hide-cursor, body.hide-cursor * { cursor: none !important; }

img { display: block; -webkit-user-drag: none; pointer-events: none; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }

#viewport { position: fixed; inset: 0; overflow: hidden; }
#stage {
  position: absolute; left: 0; top: 0;
  width: 1080px; height: 1920px;
  transform-origin: 0 0;
  overflow: hidden;
  background: var(--green);
}

.screen { position: absolute; inset: 0; opacity: 0; visibility: hidden; transition: opacity .3s ease; }
.screen.is-active { opacity: 1; visibility: visible; }
.plate { position: absolute; left: 0; top: 0; width: 1080px; height: 1920px; }

/* ═══════════════════════════ 1 · REGISTRATION ══════════════════════════ */
.field {
  position: absolute;
  display: flex; align-items: center; justify-content: center;
  padding: 0 40px;
  border-radius: 34px;
  transition: box-shadow .18s ease;
}
.field.is-focus { box-shadow: 0 0 0 6px var(--lime-hi), 0 0 36px 4px rgba(0, 210, 1, .45); }
.field.is-bad   { box-shadow: 0 0 0 6px #FF4D4D, 0 0 36px 4px rgba(255, 77, 77, .45); }
.field-txt {
  font-weight: 700; font-size: 64px; line-height: 1;
  color: var(--ink); white-space: pre; overflow: hidden;
  max-width: 800px;
}
.caret { width: 5px; height: 64px; margin-left: 5px; border-radius: 3px; background: var(--green); opacity: 0; }
.field.is-focus .caret { animation: blink 1.05s steps(1) infinite; }
@keyframes blink { 0%, 49% { opacity: 1; } 50%, 100% { opacity: 0; } }

.field-msg {
  position: absolute; left: 60px; width: 960px;
  text-align: center; font-size: 34px; font-weight: 700; letter-spacing: 1px;
  color: var(--warn); opacity: 0; transition: opacity .2s ease; pointer-events: none;
}
.field-msg.is-on { opacity: 1; }

.consent { position: absolute; display: grid; place-items: center; }
.consent::before { content: ''; position: absolute; left: -24px; top: -24px; width: 940px; height: 160px; }
.consent svg {
  width: 78%; height: 78%; fill: none; stroke: #fff; stroke-width: 14;
  stroke-linecap: round; stroke-linejoin: round;
  stroke-dasharray: 120; stroke-dashoffset: 120; transition: stroke-dashoffset .2s ease;
}
.consent[aria-pressed="true"] svg { stroke-dashoffset: 0; }
.consent.is-bad { animation: nudge .45s ease; }
@keyframes nudge { 0%, 100% { transform: translateX(0); } 25% { transform: translateX(-10px); } 75% { transform: translateX(10px); } }

.sprite-btn { position: absolute; display: block; transition: transform .12s ease, filter .2s ease; }
.sprite-btn img { width: 100%; height: 100%; }
.sprite-btn:active { transform: scale(.96); }

/* ═══════════════════════════════ 2 · WHEEL ═════════════════════════════ */
.wheel { position: absolute; will-change: transform; }
.wheel img { width: 100%; height: 100%; }
.hub { position: absolute; }
.spin-btn::before { content: ''; position: absolute; inset: -30px; }
.spin-btn.is-idle { animation: breathe 2.2s ease-in-out infinite; transform-origin: 50% 64%; }
@keyframes breathe { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.045); } }
.spin-btn.is-busy { pointer-events: none; }

/* ═══════════════════════════════ 3 · YOU WON ═══════════════════════════ */
.prize { position: absolute; }
.screen.is-active .prize { animation: prizeIn .7s cubic-bezier(.2, 1.5, .4, 1) .15s both; }
@keyframes prizeIn { from { transform: scale(.3) rotate(-14deg); opacity: 0; } to { transform: scale(1) rotate(0); opacity: 1; } }

/* ═══════════════════════════ ON-SCREEN KEYBOARD ════════════════════════ */
.kb {
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 60;
  padding: 34px 22px 30px;
  background: linear-gradient(180deg, var(--green-deep) 0%, var(--green-dark) 100%);
  border-top: 6px solid var(--lime);
  box-shadow: 0 -18px 48px rgba(0, 0, 0, .35);
  transform: translateY(100%);
  transition: transform .26s cubic-bezier(.3, .9, .4, 1);
}
.kb.is-open { transform: translateY(0); }
.kb-body { display: flex; flex-direction: column; align-items: center; gap: 12px; }
.kb-row  { display: flex; gap: 10px; }
.key {
  height: 112px; min-width: 96px; padding: 0 8px; border-radius: 20px;
  background: #fff; color: var(--green-deep);
  box-shadow: 0 6px 0 #02391A, 0 8px 14px rgba(0, 0, 0, .25);
  font-weight: 900; font-size: 48px;
  display: grid; place-items: center;
  transition: transform .07s ease, box-shadow .07s ease;
}
.key.is-down { transform: translateY(6px); box-shadow: 0 0 0 #02391A; background: #D9F5DD; }
.key--wide  { min-width: 214px; }
.key--space { min-width: 520px; font-size: 36px; letter-spacing: 4px; }
.key--alt   { background: #CFE8D5; }
.key--go    { background: linear-gradient(180deg, var(--lime-hi) 0%, var(--lime) 55%, #02AD11 100%); color: #fff; font-size: 40px; letter-spacing: 3px; }
.key svg { width: 54px; height: 54px; fill: none; stroke: currentColor; stroke-width: 8; stroke-linecap: round; stroke-linejoin: round; }
.kb--num .key    { height: 132px; min-width: 250px; font-size: 64px; }
.kb--num .kb-row, .kb--num .kb-body { gap: 16px; }

/* queued records still waiting for the network (diagnostic dot) */
.net-flag {
  position: absolute; right: 18px; top: 18px; z-index: 90;
  width: 18px; height: 18px; border-radius: 50%;
  background: #FF9800; box-shadow: 0 0 12px rgba(255, 152, 0, .9);
}

/* small full-screen toggle, bottom-right; the icon swaps with the state */
.fs-exit {
  position: absolute; right: 20px; bottom: 20px; z-index: 150;
  width: 58px; height: 58px; border-radius: 16px;
  display: grid; place-items: center;
  background: rgba(0, 0, 0, .16);
}
.fs-exit svg {
  width: 30px; height: 30px; fill: none; stroke: rgba(255, 255, 255, .78);
  stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round;
}
.fs-exit:active { background: rgba(0, 0, 0, .32); }

/* ═════════════════════════════ OPERATOR PANEL ══════════════════════════ */
.corner-tap { position: absolute; left: 0; top: 0; width: 150px; height: 150px; z-index: 130; }
.admin {
  position: absolute; inset: 0; z-index: 120;
  display: flex; flex-direction: column; gap: 22px;
  padding: 44px 44px 44px;
  background: linear-gradient(180deg, #05421F 0%, #032A14 100%);
  color: #E8F5EC; font-family: 'Unity Text', 'Segoe UI', sans-serif; font-size: 28px;
}
.admin-head { display: flex; align-items: center; justify-content: space-between; padding-left: 130px; }
.admin-head h2 { font-family: 'Unity Headline'; font-weight: 900; font-size: 52px; letter-spacing: 6px; color: #fff; }
.admin-meta { display: flex; justify-content: space-between; padding: 22px 28px; border-radius: 18px; background: rgba(255, 255, 255, .08); }
.admin-meta b { color: var(--lime-hi); }
.adm-card { display: flex; flex-direction: column; gap: 14px; padding: 22px 26px; border-radius: 18px; background: rgba(255, 255, 255, .07); }
.adm-card--grow { flex: 1; min-height: 0; }
.adm-title { font-family: 'Unity Headline'; font-weight: 700; font-size: 28px; letter-spacing: 3px; color: #9FE3AE; }
.adm-note { font-size: 23px; color: #A9C9B3; }
.adm-table { overflow: auto; border-radius: 12px; background: rgba(0, 0, 0, .25); }
.adm-table--short { max-height: 330px; }
.adm-table--grow { flex: 1; min-height: 0; }
.adm-table table { width: 100%; border-collapse: collapse; font-size: 25px; }
.adm-table th, .adm-table td { padding: 13px 16px; text-align: left; white-space: nowrap; border-bottom: 1px solid rgba(255, 255, 255, .08); }
.adm-table th { position: sticky; top: 0; background: #0A6A33; color: #fff; font-weight: 700; }
.adm-table td.num, .adm-table th.num { text-align: right; font-variant-numeric: tabular-nums; }
.adm-table .win { color: #7CF08E; font-weight: 700; }
.adm-empty { padding: 30px; text-align: center; color: #A9C9B3; }
.admin-actions { display: flex; gap: 16px; }
.adm-btn {
  padding: 22px 30px; border-radius: 16px;
  font-family: 'Unity Headline'; font-weight: 700; font-size: 28px; letter-spacing: 2px;
  background: rgba(255, 255, 255, .12); border: 2px solid rgba(255, 255, 255, .22); color: #fff;
}
.adm-btn:active { transform: translateY(3px); }