/* =========================================================
   Kriollo Spin & Win
   Sizing: every size is written in "design px" and multiplied by --s.
     portrait  -> design canvas 1080 x 1920  (--s = min(vw/1080, vh/1920))
     landscape -> design canvas 1920 x 1080  (--s = min(vw/1920, vh/1080))
   --s is set by JS on resize (handles mobile address bars); CSS below is the fallback.
   ========================================================= */
@font-face { font-family: 'Baloo 2'; font-weight: 700; font-display: block; src: url(../fonts/baloo2-700.woff2) format('woff2'); }
@font-face { font-family: 'Baloo 2'; font-weight: 800; font-display: block; src: url(../fonts/baloo2-800.woff2) format('woff2'); }
@font-face { font-family: 'Poppins'; font-weight: 500; font-display: swap; src: url(../fonts/poppins-500.woff2) format('woff2'); }
@font-face { font-family: 'Poppins'; font-weight: 600; font-display: swap; src: url(../fonts/poppins-600.woff2) format('woff2'); }

:root {
  --s: min(calc(100vw / 1080), calc(100vh / 1920));
  --red: #D7251A;
  --red-dark: #A8170D;
  --red-light: #F0412F;
  --brown: #643025;
  --brown-dark: #3F1A12;
  --brown-light: #8A4535;
  --orange: #F7941D;
  --yellow: #FFD400;
  --yellow-light: #FFE84D;
  --cream: #FFF7E0;
  --white: #FFFFFF;
  --ink: #3F1A12;
  --wheel: calc(var(--s) * 940);
  --ease-out: cubic-bezier(.2, .9, .25, 1);
  --ease-back: cubic-bezier(.34, 1.56, .64, 1);
}
@media (orientation: landscape) {
  :root { --s: min(calc(100vw / 1920), calc(100vh / 1080)); --wheel: calc(var(--s) * 900); }
}

[hidden] { display: none !important; }
[ng-cloak], .ng-cloak { display: none !important; }
*, *::before, *::after { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }

html, body {
  margin: 0; height: 100%; overflow: hidden;
  background: var(--yellow);
  color: var(--ink);
  font-family: 'Baloo 2', 'Poppins', system-ui, sans-serif;
  -webkit-font-smoothing: antialiased;
  user-select: none; -webkit-user-select: none;
  touch-action: manipulation;
  overscroll-behavior: none;
}
body.hide-cursor, body.hide-cursor * { cursor: none !important; }
button { font: inherit; color: inherit; border: 0; background: none; cursor: pointer; padding: 0; }
input { font: inherit; user-select: text; -webkit-user-select: text; }
img { -webkit-user-drag: none; user-select: none; }

/* ===================== Background ===================== */
.bg { position: fixed; inset: 0; overflow: hidden; z-index: 0;
  background: radial-gradient(120% 80% at 50% 45%, #FFE95A 0%, #FFD400 45%, #FFB800 100%); }
.bg-rays {
  position: absolute; left: 50%; top: 46%;
  width: 260vmax; height: 260vmax; margin: -130vmax 0 0 -130vmax;
  background: repeating-conic-gradient(from 0deg, rgba(255,255,255,.20) 0deg 7.5deg, rgba(255,255,255,0) 7.5deg 15deg);
  -webkit-mask: radial-gradient(circle, #000 0%, rgba(0,0,0,.55) 22%, transparent 48%);
          mask: radial-gradient(circle, #000 0%, rgba(0,0,0,.55) 22%, transparent 48%);
  animation: rays 90s linear infinite;
}
@keyframes rays { to { transform: rotate(360deg); } }
.bg-glow { position: absolute; inset: 0;
  background: radial-gradient(60% 40% at 50% 50%, rgba(255,255,255,.35), transparent 70%); }

.drip { position: absolute; left: 0; right: 0; top: 0; height: calc(var(--s) * 190);
  background: url(../img/drip.svg) repeat-x 0 0 / auto 100%;
  filter: drop-shadow(0 calc(var(--s) * 8) 0 rgba(247,148,29,.85)); }
.waves { position: absolute; left: 0; right: 0; bottom: 0; height: calc(var(--s) * 150); overflow: hidden; }
.wave { position: absolute; left: 0; bottom: 0; width: 200%; height: 100%; display: block; }
.wave-back  { bottom: calc(var(--s) * 10); animation: waveMove 24s linear infinite; }
.wave-front { animation: waveMove 34s linear infinite reverse; }
@keyframes waveMove { from { transform: translateX(0); } to { transform: translateX(-50%); } }

.bg-bubbles i {
  position: absolute; bottom: -10%; border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, rgba(255,255,255,.9), rgba(255,255,255,.25) 60%, rgba(255,255,255,0) 72%);
  width: calc(var(--s) * 60); height: calc(var(--s) * 60);
  animation: bubble 16s linear infinite; opacity: .55;
}
.bg-bubbles i:nth-child(1)  { left: 6%;  animation-delay: 0s;   transform: scale(.6); }
.bg-bubbles i:nth-child(2)  { left: 16%; animation-delay: -4s;  width: calc(var(--s) * 34); height: calc(var(--s) * 34); }
.bg-bubbles i:nth-child(3)  { left: 27%; animation-delay: -9s;  animation-duration: 20s; }
.bg-bubbles i:nth-child(4)  { left: 39%; animation-delay: -2s;  width: calc(var(--s) * 24); height: calc(var(--s) * 24); }
.bg-bubbles i:nth-child(5)  { left: 51%; animation-delay: -12s; animation-duration: 19s; }
.bg-bubbles i:nth-child(6)  { left: 62%; animation-delay: -6s;  width: calc(var(--s) * 40); height: calc(var(--s) * 40); }
.bg-bubbles i:nth-child(7)  { left: 72%; animation-delay: -14s; }
.bg-bubbles i:nth-child(8)  { left: 81%; animation-delay: -3s;  width: calc(var(--s) * 28); height: calc(var(--s) * 28); animation-duration: 13s; }
.bg-bubbles i:nth-child(9)  { left: 90%; animation-delay: -8s;  animation-duration: 18s; }
.bg-bubbles i:nth-child(10) { left: 96%; animation-delay: -11s; width: calc(var(--s) * 20); height: calc(var(--s) * 20); }
@keyframes bubble {
  0%   { transform: translate3d(0, 0, 0); opacity: 0; }
  10%  { opacity: .55; }
  50%  { transform: translate3d(calc(var(--s) * 30), -60vh, 0); }
  100% { transform: translate3d(calc(var(--s) * -20), -120vh, 0); opacity: 0; }
}

/* ===================== Screens ===================== */
.app { position: fixed; inset: 0; z-index: 1; }
.screen {
  position: absolute; inset: 0;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  padding: calc(var(--s) * 150) calc(var(--s) * 60) calc(var(--s) * 130);
  opacity: 0; visibility: hidden; pointer-events: none;
  transform: scale(1.04);
  transition: opacity .45s ease, transform .55s var(--ease-out), visibility 0s linear .45s;
}
.screen.on { opacity: 1; visibility: visible; pointer-events: auto; transform: none;
  transition: opacity .45s ease, transform .55s var(--ease-out), visibility 0s; }

/* Logo: never animated except a soft fade-in with its screen */
.logo-hero, .logo-top {
  display: block; height: auto;
  filter: drop-shadow(0 calc(var(--s) * 14) calc(var(--s) * 18) rgba(100,48,37,.28));
}
.logo-hero { width: calc(var(--s) * 860); }
.logo-top  { width: calc(var(--s) * 500); }

/* ---------- Buttons ---------- */
.btn {
  position: relative; display: inline-flex; align-items: center; justify-content: center;
  font-weight: 800; letter-spacing: .02em; line-height: 1;
  border-radius: 999px; color: var(--white);
  transition: transform .15s ease, box-shadow .15s ease, filter .2s;
}
.btn-primary {
  background: linear-gradient(180deg, var(--red-light), var(--red) 55%, var(--red-dark));
  border: calc(var(--s) * 8) solid var(--white);
  box-shadow: calc(var(--s) * 6) calc(var(--s) * 12) 0 var(--orange), 0 calc(var(--s) * 22) calc(var(--s) * 40) rgba(100,48,37,.35);
  text-shadow: 0 calc(var(--s) * 4) 0 rgba(100,20,10,.45);
  font-size: calc(var(--s) * 56);
  padding: calc(var(--s) * 26) calc(var(--s) * 80) calc(var(--s) * 20);
}
.btn-primary:active:not([disabled]) { transform: translate(calc(var(--s) * 4), calc(var(--s) * 8)); box-shadow: calc(var(--s) * 2) calc(var(--s) * 4) 0 var(--orange), 0 calc(var(--s) * 10) calc(var(--s) * 20) rgba(100,48,37,.3); }
.btn-primary[disabled] { filter: saturate(.6) brightness(.95); cursor: default; }
.btn-block { width: 100%; }
.btn-link { display: block; margin: calc(var(--s) * 22) auto 0; font-weight: 700; color: var(--brown); font-size: calc(var(--s) * 34); padding: calc(var(--s) * 8) calc(var(--s) * 20); opacity: .8; }

/* ===================== 1. START ===================== */
.screen-start { gap: calc(var(--s) * 34); }
.screen-start.on .logo-hero { animation: softIn .9s var(--ease-out) both; }
@keyframes softIn { from { opacity: 0; transform: translateY(calc(var(--s) * 20)); } to { opacity: 1; transform: none; } }

.headline {
  margin: calc(var(--s) * 10) 0 0; display: flex; align-items: baseline; gap: calc(var(--s) * 22);
  font-weight: 800; font-size: calc(var(--s) * 170); line-height: .9; letter-spacing: .01em;
}
.headline span { display: inline-block; }
.hl-spin, .hl-win {
  color: var(--red);
  -webkit-text-stroke: calc(var(--s) * 3) var(--white);
  paint-order: stroke fill;
  text-shadow: 0 0 0 var(--white), calc(var(--s) * 7) calc(var(--s) * 9) 0 var(--brown);
}
.hl-win { color: var(--brown); text-shadow: calc(var(--s) * 7) calc(var(--s) * 9) 0 var(--orange); }
.hl-amp { color: var(--white); font-size: .6em; text-shadow: calc(var(--s) * 4) calc(var(--s) * 5) 0 var(--orange); }
.screen-start.on .hl-spin { animation: popIn .7s var(--ease-back) .25s both; }
.screen-start.on .hl-amp  { animation: popIn .7s var(--ease-back) .38s both; }
.screen-start.on .hl-win  { animation: popIn .7s var(--ease-back) .5s both; }
@keyframes popIn { from { opacity: 0; transform: scale(.4) translateY(calc(var(--s) * 40)); } to { opacity: 1; transform: none; } }

.sub { margin: 0; font-weight: 700; font-size: calc(var(--s) * 44); color: var(--brown); text-align: center; }

.showcase { display: flex; justify-content: center; align-items: flex-end; flex-wrap: wrap; gap: calc(var(--s) * 18);
  margin: calc(var(--s) * 20) 0 calc(var(--s) * 30); max-width: calc(var(--s) * 980); }
.sc-item {
  width: calc(var(--s) * 132); height: calc(var(--s) * 132);
  border-radius: 50%;
  background: radial-gradient(circle at 50% 40%, #fff 0%, #FFF3C4 60%, #FFE27A 100%);
  border: calc(var(--s) * 6) solid var(--white);
  box-shadow: calc(var(--s) * 4) calc(var(--s) * 8) 0 var(--orange), 0 calc(var(--s) * 14) calc(var(--s) * 24) rgba(100,48,37,.22);
  display: flex; align-items: center; justify-content: center; overflow: hidden;
  animation: bob 3.2s ease-in-out infinite;
}
.sc-item img { display: block; flex: none; width: 72%; height: 72%; object-fit: contain; filter: drop-shadow(0 calc(var(--s) * 6) calc(var(--s) * 6) rgba(0,0,0,.2)); }
@keyframes bob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(calc(var(--s) * -14)); } }

.btn-start { font-size: calc(var(--s) * 92); padding: calc(var(--s) * 34) calc(var(--s) * 150) calc(var(--s) * 26); }
.btn-start::after {
  content: ''; position: absolute; inset: calc(var(--s) * -8); border-radius: inherit;
  border: calc(var(--s) * 6) solid rgba(255,255,255,.9);
  animation: ripple 2s ease-out infinite; pointer-events: none;
}
@keyframes ripple { 0% { transform: scale(1); opacity: .9; } 100% { transform: scale(1.25, 1.5); opacity: 0; } }
.fineprint { margin: calc(var(--s) * 10) 0 0; font-family: 'Poppins', sans-serif; font-weight: 500; font-size: calc(var(--s) * 26); color: var(--brown); opacity: .75; }

/* ===================== Cards ===================== */
.card {
  background: var(--white);
  border-radius: calc(var(--s) * 56);
  box-shadow: calc(var(--s) * 12) calc(var(--s) * 18) 0 var(--orange), 0 calc(var(--s) * 40) calc(var(--s) * 80) rgba(100,48,37,.3);
  padding: calc(var(--s) * 60) calc(var(--s) * 64) calc(var(--s) * 44);
}
.card-title { margin: 0; font-weight: 800; color: var(--red); font-size: calc(var(--s) * 70); line-height: 1.05; text-align: center; }
.card-sub { margin: calc(var(--s) * 10) 0 calc(var(--s) * 36); font-family: 'Poppins', sans-serif; font-weight: 500; color: var(--brown); opacity: .85; font-size: calc(var(--s) * 30); text-align: center; line-height: 1.4; }

/* ===================== 2. REGISTER ===================== */
.screen-register { gap: calc(var(--s) * 50); }
.reg-card { width: calc(var(--s) * 900); }
.screen-register.on .reg-card { animation: cardIn .6s var(--ease-back) both; }
@keyframes cardIn { from { opacity: 0; transform: translateY(calc(var(--s) * 60)) scale(.94); } to { opacity: 1; transform: none; } }

.field { display: block; margin-bottom: calc(var(--s) * 34); }
.field-label { display: block; font-weight: 800; color: var(--brown); font-size: calc(var(--s) * 34); margin: 0 0 calc(var(--s) * 10) calc(var(--s) * 14); }
.field input {
  display: block; width: 100%;
  height: calc(var(--s) * 116);
  border-radius: calc(var(--s) * 30);
  border: calc(var(--s) * 5) solid #F1D9A6;
  background: var(--cream);
  padding: calc(var(--s) * 8) calc(var(--s) * 36) 0;
  font-weight: 800; font-size: calc(var(--s) * 50); color: var(--brown-dark);
  outline: none; transition: border-color .2s, box-shadow .2s, background .2s;
}
.field input::placeholder { color: #C9A77A; font-weight: 700; }
.field.focus input { border-color: var(--orange); background: #fff; box-shadow: 0 0 0 calc(var(--s) * 8) rgba(247,148,29,.25); }
.field.err input { border-color: var(--red); background: #FFF0EE; animation: shake .4s; }
.err-msg { display: block; color: var(--red); font-family: 'Poppins', sans-serif; font-weight: 600; font-size: calc(var(--s) * 26); margin: calc(var(--s) * 10) 0 0 calc(var(--s) * 14); }
@keyframes shake { 0%, 100% { transform: none; } 20%, 60% { transform: translateX(calc(var(--s) * -10)); } 40%, 80% { transform: translateX(calc(var(--s) * 10)); } }
.reg-card .btn-primary { margin-top: calc(var(--s) * 18); font-size: calc(var(--s) * 60); }
.dots i { animation: blink 1.2s infinite; font-style: normal; }
.dots i:nth-child(2) { animation-delay: .2s; } .dots i:nth-child(3) { animation-delay: .4s; }
@keyframes blink { 0%, 100% { opacity: .2; } 50% { opacity: 1; } }

/* kiosk: logo smaller, keyboard under the card */
.has-osk .screen-register { justify-content: flex-start; padding-top: calc(var(--s) * 170); gap: calc(var(--s) * 30); }
.has-osk .screen-register .logo-top { width: calc(var(--s) * 380); }
.has-osk .reg-card { padding-top: calc(var(--s) * 44); padding-bottom: calc(var(--s) * 30); }
.has-osk .card-sub { margin-bottom: calc(var(--s) * 24); }

/* ---------- On-screen keyboard ---------- */
.osk {
  width: calc(var(--s) * 1020);
  background: rgba(100,48,37,.92);
  border-radius: calc(var(--s) * 40);
  padding: calc(var(--s) * 18);
  box-shadow: 0 calc(var(--s) * 20) calc(var(--s) * 50) rgba(63,26,18,.4);
  animation: cardIn .5s var(--ease-out) both;
}
.osk-row { display: flex; justify-content: center; gap: calc(var(--s) * 10); margin-bottom: calc(var(--s) * 10); }
.osk-row:last-child { margin-bottom: 0; }
.key {
  flex: 0 0 calc(var(--s) * 88); height: calc(var(--s) * 104);
  border-radius: calc(var(--s) * 20);
  background: linear-gradient(180deg, #fff, #FFF3D6);
  box-shadow: 0 calc(var(--s) * 7) 0 var(--orange);
  color: var(--brown-dark); font-weight: 800; font-size: calc(var(--s) * 46);
  transition: transform .08s, box-shadow .08s;
}
.key:active { transform: translateY(calc(var(--s) * 6)); box-shadow: 0 calc(var(--s) * 1) 0 var(--orange); background: #FFE8A8; }
.key-wide { flex-basis: calc(var(--s) * 150); }
.key-space { flex: 0 0 calc(var(--s) * 560); font-size: calc(var(--s) * 32); }
.key-next { flex: 0 0 calc(var(--s) * 300); font-size: calc(var(--s) * 34); background: linear-gradient(180deg, var(--red-light), var(--red)); color: #fff; box-shadow: 0 calc(var(--s) * 7) 0 var(--red-dark); }
.osk.numeric { width: calc(var(--s) * 640); }
.osk-num { display: grid; grid-template-columns: repeat(3, 1fr); gap: calc(var(--s) * 14); }
.osk-num .key { height: calc(var(--s) * 110); font-size: calc(var(--s) * 56); }
.osk-num .key-fn { font-size: calc(var(--s) * 32); background: linear-gradient(180deg, #FFE7B0, #FFD27A); }

/* ===================== 3. WHEEL ===================== */
.screen-wheel { gap: calc(var(--s) * 20); justify-content: flex-start; padding-top: calc(var(--s) * 190); }
.wheel-side { display: flex; flex-direction: column; align-items: center; text-align: center; }
.hello { margin: calc(var(--s) * 18) 0 0; font-weight: 700; font-size: calc(var(--s) * 44); color: var(--brown); }
.hello b { color: var(--red); font-weight: 800; }
.tap-hint {
  margin: calc(var(--s) * 4) 0 0; font-weight: 800; font-size: calc(var(--s) * 66); line-height: 1.1;
  color: var(--white); text-shadow: calc(var(--s) * 4) calc(var(--s) * 6) 0 var(--brown);
  transition: opacity .3s, transform .3s;
}
.tap-hint span { color: var(--red); -webkit-text-stroke: calc(var(--s) * 2) #fff; paint-order: stroke fill; }
.tap-hint.hide { opacity: 0; transform: scale(.9); position: absolute; pointer-events: none; }
.spinning-hint { font-size: calc(var(--s) * 54); }

.wheel-zone { flex: 1; display: flex; align-items: center; justify-content: center; width: 100%; min-height: 0; }
.wheel-wrap { position: relative; width: var(--wheel); height: var(--wheel); flex: none; margin-bottom: calc(var(--s) * 40); }
.screen-wheel.on .wheel-wrap { animation: wheelIn .9s var(--ease-back) both .1s; }
@keyframes wheelIn { from { opacity: 0; transform: scale(.6) rotate(-40deg); } to { opacity: 1; transform: none; } }

.wheel-rim {
  position: absolute; inset: 0; border-radius: 50%;
  background:
    radial-gradient(circle, transparent 0 calc(50% - var(--s) * 52), rgba(0,0,0,.25) calc(50% - var(--s) * 52) calc(50% - var(--s) * 46), transparent calc(50% - var(--s) * 46)),
    conic-gradient(from 20deg, #7A3B2D, #4A2018, #7A3B2D, #4A2018, #7A3B2D);
  border: calc(var(--s) * 12) solid var(--white);
  box-shadow:
    calc(var(--s) * 12) calc(var(--s) * 18) 0 var(--orange),
    0 calc(var(--s) * 40) calc(var(--s) * 70) rgba(63,26,18,.45),
    inset 0 0 0 calc(var(--s) * 6) rgba(255,255,255,.12);
}
.bulb {
  --r: calc(var(--wheel) / 2 - var(--s) * 36);
  position: absolute; left: 50%; top: 50%;
  width: calc(var(--s) * 26); height: calc(var(--s) * 26); margin: calc(var(--s) * -13) 0 0 calc(var(--s) * -13);
  border-radius: 50%;
  transform: rotate(var(--a)) translateY(calc(var(--r) * -1));
  background: radial-gradient(circle at 35% 35%, #fff, #FFE680 45%, #F7B21D 100%);
  box-shadow: 0 0 calc(var(--s) * 18) calc(var(--s) * 4) rgba(255,220,90,.85);
  animation: bulb 1.4s ease-in-out infinite;
}
.bulb.odd { animation-delay: -.7s; }
@keyframes bulb { 0%, 100% { opacity: 1; filter: none; } 50% { opacity: .35; box-shadow: 0 0 calc(var(--s) * 4) rgba(255,220,90,.3); } }
.wheel-wrap.spinning .bulb { animation-duration: .32s; }
.wheel-wrap.won .bulb { animation: bulbParty .22s steps(2) infinite; }
.wheel-wrap.won .bulb.odd { animation-delay: -.11s; }
@keyframes bulbParty { 0% { opacity: 1; background: radial-gradient(circle at 35% 35%, #fff, #FF8A7A 45%, #D7251A); } 100% { opacity: 1; } }

.wheel-disc {
  position: absolute; inset: calc(var(--s) * 70); border-radius: 50%;
  overflow: hidden;
  box-shadow: 0 0 0 calc(var(--s) * 8) var(--orange), 0 0 0 calc(var(--s) * 13) #fff;
  will-change: transform; transform: rotate(0deg); backface-visibility: hidden;
}
.wheel-disc canvas { display: block; width: 100%; height: 100%; }
.wheel-gloss {
  position: absolute; inset: calc(var(--s) * 70); border-radius: 50%; pointer-events: none;
  background:
    radial-gradient(120% 70% at 30% 10%, rgba(255,255,255,.28), rgba(255,255,255,0) 45%),
    radial-gradient(circle, rgba(0,0,0,0) 62%, rgba(63,26,18,.28) 100%);
}

.hub {
  position: absolute; left: 50%; top: 50%;
  width: calc(var(--wheel) * .25); height: calc(var(--wheel) * .25);
  transform: translate(-50%, -50%);
  border-radius: 50%;
  background: radial-gradient(circle at 40% 30%, var(--red-light), var(--red) 55%, var(--red-dark) 100%);
  border: calc(var(--s) * 12) solid var(--white);
  box-shadow: calc(var(--s) * 6) calc(var(--s) * 10) 0 var(--orange), 0 calc(var(--s) * 18) calc(var(--s) * 40) rgba(63,26,18,.5), inset 0 calc(var(--s) * -10) calc(var(--s) * 20) rgba(100,10,0,.4);
  display: grid; place-items: center; z-index: 3;
  transition: transform .15s ease, filter .3s;
}
.hub-text { position: relative; font-weight: 800; color: #fff; font-size: calc(var(--wheel) * .068); line-height: 1; padding-top: calc(var(--s) * 8);
  text-shadow: 0 calc(var(--s) * 4) 0 var(--brown-dark); letter-spacing: .02em; }
.hub-ring { position: absolute; inset: calc(var(--s) * -26); border-radius: 50%; border: calc(var(--s) * 8) solid rgba(255,255,255,.95); animation: hubPulse 1.6s ease-out infinite; pointer-events: none; }
@keyframes hubPulse { 0% { transform: scale(.85); opacity: .9; } 100% { transform: scale(1.35); opacity: 0; } }
.hub:not([disabled]) { animation: hubBreath 1.6s ease-in-out infinite; }
@keyframes hubBreath { 0%, 100% { transform: translate(-50%, -50%) scale(1); } 50% { transform: translate(-50%, -50%) scale(1.06); } }
.hub:active:not([disabled]) { transform: translate(-50%, -50%) scale(.94); animation: none; }
.hub[disabled] { cursor: default; }
.hub[disabled] .hub-ring { display: none; }

.pointer {
  position: absolute; left: 50%; bottom: calc(var(--s) * -40);
  width: calc(var(--wheel) * .14); margin-left: calc(var(--wheel) * -.07);
  transform-origin: 50% 70%; z-index: 4;
  filter: drop-shadow(0 calc(var(--s) * 10) calc(var(--s) * 10) rgba(63,26,18,.4));
}
.pointer svg { display: block; width: 100%; height: auto; }
.pointer.flick { animation: flick .12s ease-out; }
@keyframes flick { 0% { transform: rotate(0); } 40% { transform: rotate(-14deg); } 100% { transform: rotate(0); } }

/* ===================== Modals ===================== */
.modal {
  position: fixed; inset: 0; z-index: 20;
  display: flex; align-items: center; justify-content: center;
  padding: calc(var(--s) * 60);
  background: radial-gradient(circle, rgba(63,26,18,.55), rgba(40,14,8,.82));
  opacity: 0; visibility: hidden; pointer-events: none;
  transition: opacity .35s ease, visibility 0s linear .35s;
}
.modal.on { opacity: 1; visibility: visible; pointer-events: auto; transition: opacity .35s ease, visibility 0s; }
.modal .card, .modal .result-card { transform: scale(.6) translateY(calc(var(--s) * 80)); opacity: 0; transition: transform .6s var(--ease-back), opacity .3s; }
.modal.on .card, .modal.on .result-card { transform: none; opacity: 1; }

.result-card {
  position: relative; width: calc(var(--s) * 860); max-width: 100%;
  background: linear-gradient(180deg, #FFFDF5, #FFF2C9);
  border: calc(var(--s) * 12) solid var(--white);
  border-radius: calc(var(--s) * 64);
  box-shadow: calc(var(--s) * 14) calc(var(--s) * 20) 0 var(--orange), 0 calc(var(--s) * 50) calc(var(--s) * 100) rgba(0,0,0,.45);
  padding: calc(var(--s) * 110) calc(var(--s) * 64) calc(var(--s) * 54);
  text-align: center;
}
.rc-burst { position: absolute; inset: 0; border-radius: inherit; overflow: hidden; pointer-events: none; }
.rc-burst::before { content: ''; position: absolute; left: 50%; top: 42%; width: 200%; aspect-ratio: 1; transform: translate(-50%, -50%);
  background: repeating-conic-gradient(rgba(255,212,0,.22) 0 10deg, transparent 10deg 20deg); animation: rays 30s linear infinite; }
.rc-ribbon {
  position: absolute; left: 50%; top: 0; transform: translate(-50%, -55%);
  background: linear-gradient(180deg, var(--red-light), var(--red) 60%, var(--red-dark));
  color: #fff; font-weight: 800; font-size: calc(var(--s) * 64); line-height: 1; white-space: nowrap;
  padding: calc(var(--s) * 30) calc(var(--s) * 60) calc(var(--s) * 22);
  border: calc(var(--s) * 9) solid #fff; border-radius: calc(var(--s) * 30);
  box-shadow: calc(var(--s) * 8) calc(var(--s) * 12) 0 var(--orange), 0 calc(var(--s) * 20) calc(var(--s) * 30) rgba(0,0,0,.25);
  text-shadow: 0 calc(var(--s) * 4) 0 rgba(100,20,10,.5);
}
.sample .rc-ribbon { background: linear-gradient(180deg, var(--brown-light), var(--brown) 60%, var(--brown-dark)); }
.modal.on .rc-ribbon span { display: inline-block; animation: popIn .6s var(--ease-back) .35s both; }
.rc-lead { position: relative; margin: 0; font-weight: 700; font-size: calc(var(--s) * 44); color: var(--brown); }
.rc-prize { position: relative; height: calc(var(--s) * 420); display: grid; place-items: center; margin: calc(var(--s) * 10) 0; }
.rc-rays { position: absolute; width: calc(var(--s) * 400); height: calc(var(--s) * 400); border-radius: 50%;
  background: radial-gradient(circle, #fff 0%, rgba(255,255,255,.9) 30%, rgba(255,232,77,.6) 55%, rgba(255,212,0,0) 72%); }
.rc-prize img { position: relative; max-width: calc(var(--s) * 520); max-height: calc(var(--s) * 380);
  filter: drop-shadow(0 calc(var(--s) * 20) calc(var(--s) * 20) rgba(63,26,18,.35)); }
.modal.on .rc-prize img { animation: prizeIn .9s var(--ease-back) .3s both, floaty 3s ease-in-out 1.3s infinite; }
@keyframes prizeIn { from { opacity: 0; transform: scale(.2) rotate(-20deg); } to { opacity: 1; transform: none; } }
@keyframes floaty { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(calc(var(--s) * -12)); } }
.rc-title { position: relative; margin: 0; font-weight: 800; font-size: calc(var(--s) * 74); line-height: 1.02; color: var(--red);
  text-shadow: calc(var(--s) * 4) calc(var(--s) * 5) 0 rgba(247,148,29,.45); }
.sample .rc-title { color: var(--brown); }
.rc-note { position: relative; margin: calc(var(--s) * 18) auto calc(var(--s) * 14); max-width: calc(var(--s) * 640); font-family: 'Poppins', sans-serif; font-weight: 500; font-size: calc(var(--s) * 30); line-height: 1.45; color: var(--brown); }
.rc-meta { position: relative; display: flex; justify-content: center; gap: calc(var(--s) * 30); font-family: 'Poppins', sans-serif; font-weight: 600; font-size: calc(var(--s) * 26); color: var(--brown); opacity: .7; margin-bottom: calc(var(--s) * 34); }
.result-card .btn-primary small { font-size: .6em; margin-left: .3em; opacity: .85; }

.info-card { width: calc(var(--s) * 800); max-width: 100%; text-align: center; }
.info-icon { width: calc(var(--s) * 150); height: calc(var(--s) * 150); margin: 0 auto calc(var(--s) * 24); border-radius: 50%;
  display: grid; place-items: center; font-size: calc(var(--s) * 84); line-height: 1;
  background: radial-gradient(circle at 40% 30%, #FFE84D, var(--yellow) 60%, #F7B21D); border: calc(var(--s) * 8) solid #fff;
  box-shadow: calc(var(--s) * 5) calc(var(--s) * 8) 0 var(--orange); }
.info-icon.err { background: radial-gradient(circle at 40% 30%, var(--red-light), var(--red)); color: #fff; }
.info-strong { margin: calc(var(--s) * -18) 0 calc(var(--s) * 34); font-weight: 800; font-size: calc(var(--s) * 40); color: var(--brown); }

.confetti { position: fixed; inset: 0; width: 100%; height: 100%; z-index: 30; pointer-events: none; }

/* sound toggle (online mode only) */
.sound-btn { position: fixed; z-index: 15; right: calc(var(--s) * 30); top: calc(var(--s) * 30);
  width: calc(var(--s) * 96); height: calc(var(--s) * 96); min-width: 40px; min-height: 40px; border-radius: 50%;
  background: rgba(255,255,255,.92); color: var(--brown); box-shadow: calc(var(--s) * 3) calc(var(--s) * 5) 0 var(--orange);
  display: grid; place-items: center; }
.sound-btn svg { width: 58%; height: 58%; }

.corner-hotspot { position: fixed; left: 0; top: 0; width: calc(var(--s) * 140); height: calc(var(--s) * 140); min-width: 50px; min-height: 50px; z-index: 50; }

/* ===================== Operator ===================== */
.pin-card { width: calc(var(--s) * 640); max-width: 100%; }
.pin-dots { display: flex; justify-content: center; gap: calc(var(--s) * 24); margin: calc(var(--s) * 30) 0; }
.pin-dots i { width: calc(var(--s) * 34); height: calc(var(--s) * 34); border-radius: 50%; border: calc(var(--s) * 5) solid var(--brown); }
.pin-dots i.f { background: var(--brown); }
.op-panel { position: fixed; inset: 0; z-index: 60; background: rgba(40,14,8,.85); overflow: auto; padding: 16px; font-family: 'Poppins', sans-serif; user-select: text; }
.op-inner { max-width: 1000px; margin: 0 auto; background: #fff; border-radius: 18px; padding: 20px 22px 28px; color: #3F1A12; font-size: 15px; }
.op-head { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; position: relative; padding-right: 44px; }
.op-head h3 { margin: 0; font-family: 'Baloo 2'; font-weight: 800; font-size: 26px; color: var(--red); }
.op-status { display: flex; flex-wrap: wrap; gap: 6px; }
.pill { font-size: 12px; font-weight: 600; padding: 4px 10px; border-radius: 99px; background: #F3E9DA; }
.pill.ok { background: #DFF5E1; color: #1B6B2A; } .pill.bad { background: #FFE0DC; color: #A8170D; } .pill.warn { background: #FFF0C2; color: #8A5A00; }
.op-x { position: absolute; right: 0; top: -4px; font-size: 34px; line-height: 1; width: 40px; height: 40px; color: #643025; }
.op-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 16px 0 6px; }
.op-btn { background: #F3E9DA; color: #3F1A12; font-weight: 600; font-size: 14px; padding: 9px 16px; border-radius: 10px; }
.op-btn.primary { background: var(--red); color: #fff; margin-top: 10px; }
.op-btn[disabled] { opacity: .5; }
.op-msg { font-size: 13px; color: #8A4535; }
.op-inner h4 { margin: 22px 0 8px; font-size: 16px; }
.op-inner h4 small { font-weight: 500; color: #8A4535; font-size: 12px; }
.op-table-wrap { overflow-x: auto; }
.op-table { width: 100%; border-collapse: collapse; font-size: 14px; }
.op-table th, .op-table td { padding: 7px 8px; border-bottom: 1px solid #F0E4D2; text-align: left; white-space: nowrap; }
.op-table th { font-size: 12px; text-transform: uppercase; letter-spacing: .04em; color: #8A4535; }
.op-table input[type=number] { width: 78px; padding: 6px 8px; border: 1px solid #E2CDB0; border-radius: 8px; font-size: 14px; }
.op-table input[type=checkbox] { width: 20px; height: 20px; }
.op-table tr.off td { opacity: .45; }
.op-table.compact td { font-size: 13px; }
.op-days { display: flex; gap: 8px; flex-wrap: wrap; }
.op-day { border: 1px solid #F0E4D2; border-radius: 12px; padding: 8px 12px; display: grid; min-width: 150px; }
.op-day.today { border-color: var(--orange); background: #FFF7E0; }
.op-day span { font-weight: 600; font-size: 18px; } .op-day small { color: #8A4535; }
.op-empty { color: #8A4535; }

/* ===================== Landscape layouts (canvas 1920 x 1080) ===================== */
@media (orientation: landscape) {
  .screen { padding: calc(var(--s) * 110) calc(var(--s) * 80) calc(var(--s) * 150); }
  .screen-start { gap: calc(var(--s) * 14); }
  .logo-hero { width: calc(var(--s) * 540); }
  .headline { font-size: calc(var(--s) * 120); }
  .sub { font-size: calc(var(--s) * 38); }
  .sc-item { width: calc(var(--s) * 130); height: calc(var(--s) * 130); }
  .showcase { max-width: none; margin: calc(var(--s) * 14) 0 calc(var(--s) * 26); }
  .btn-start { font-size: calc(var(--s) * 74); }

  .screen-register { flex-direction: row; gap: calc(var(--s) * 110); }
  .screen-register .logo-top { width: calc(var(--s) * 620); }
  .reg-card { width: calc(var(--s) * 860); }
  .has-osk .screen-register { flex-direction: column; flex-wrap: nowrap; padding-top: calc(var(--s) * 40); gap: calc(var(--s) * 20); justify-content: center; }
  .has-osk .screen-register .logo-top { display: none; }
  .has-osk .reg-card { width: calc(var(--s) * 1100); display: grid; grid-template-columns: 1fr 1fr; column-gap: calc(var(--s) * 30); padding: calc(var(--s) * 30) calc(var(--s) * 40) calc(var(--s) * 20); }
  .has-osk .reg-card .card-title, .has-osk .reg-card .card-sub, .has-osk .reg-card .btn, .has-osk .reg-card .btn-link { grid-column: 1 / -1; }
  .has-osk .reg-card .card-title { font-size: calc(var(--s) * 54); }
  .has-osk .reg-card .btn-link { display: none; }
  .has-osk .osk { width: calc(var(--s) * 1100); padding: calc(var(--s) * 14); }
  .has-osk .osk .key { height: calc(var(--s) * 84); }
  .has-osk .osk.numeric { width: calc(var(--s) * 560); }

  .screen-wheel { flex-direction: row; justify-content: center; gap: calc(var(--s) * 90); padding: calc(var(--s) * 80) calc(var(--s) * 80) calc(var(--s) * 70); }
  .wheel-side { width: calc(var(--s) * 640); }
  .wheel-side .logo-top { width: calc(var(--s) * 560); }
  .wheel-zone { flex: none; width: auto; }
  .wheel-wrap { margin-bottom: calc(var(--s) * 30); }
  .tap-hint { font-size: calc(var(--s) * 72); }

  .result-card { padding-top: calc(var(--s) * 90); width: calc(var(--s) * 820); }
  .rc-prize { height: calc(var(--s) * 300); }
  .rc-rays { width: calc(var(--s) * 320); height: calc(var(--s) * 320); }
  .rc-prize img { max-height: calc(var(--s) * 280); max-width: calc(var(--s) * 420); }
  .rc-title { font-size: calc(var(--s) * 62); }
  .rc-ribbon { font-size: calc(var(--s) * 56); }
  .rc-note { margin: calc(var(--s) * 10) auto; }
  .rc-meta { margin-bottom: calc(var(--s) * 22); }
}

@media (prefers-reduced-motion: reduce) {
  .bg-rays, .wave, .bg-bubbles i, .sc-item, .btn-start::after { animation: none !important; }
}