/* ===== SWAGATH brand system ===== */
:root{
  --gold:#f9be1e; --gold-deep:#f6a81e; --orange:#f47a20; --red:#ed1c24; --red-deep:#c1121a;
  --ink:#1a1613; --ink-2:#241d18; --ink-3:#2f2620; --line:#4a3b2e;
  --text:#fff5ea; --muted:#e7dccb;
  --cta:linear-gradient(135deg,#f9be1e 0%,#f47a20 52%,#ed1c24 100%);
  --shadow:0 14px 40px rgba(0,0,0,.5);
}
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0; color:var(--text);
  font-family:"Poppins",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  background-color:#1a1613;
  background-image:url("assets/bg-vertical.jpg");
  background-position:center center; background-size:cover; background-repeat:no-repeat; background-attachment:fixed;
  min-height:100dvh; -webkit-font-smoothing:antialiased;
}
body[data-bg="unlock"]{ background-image:url("assets/bg-unlock-vertical.jpg"); }
body[data-bg="done"]{ background-image:url("assets/bg-done-vertical.jpg"); }
@media (min-aspect-ratio:1/1){
  body{ background-image:url("assets/bg-horizontal.jpg"); }
  body[data-bg="unlock"]{ background-image:url("assets/bg-unlock-horizontal.jpg"); }
  body[data-bg="done"]{ background-image:url("assets/bg-done-horizontal.jpg"); }
}
/* legibility scrim — darkens the center where the UI sits, keeps the art visible at the edges */
body::before{
  content:""; position:fixed; inset:0; z-index:0; pointer-events:none;
  background:radial-gradient(120% 90% at 50% 50%, rgba(0,0,0,.55) 0%, rgba(0,0,0,.28) 45%, rgba(0,0,0,.08) 78%, transparent 100%);
}

#app{
  position:relative; z-index:1;
  width:100%; max-width:480px; margin:0 auto; min-height:100dvh;
  display:flex; flex-direction:column; justify-content:center;
  padding:max(20px,env(safe-area-inset-top)) 20px max(24px,env(safe-area-inset-bottom));
  gap:8px;
}
.screen{display:none; text-align:center; animation:fade .35s ease}
.screen.active{display:flex; flex-direction:column; align-items:center; gap:12px}
@media (prefers-reduced-motion:reduce){ .screen{animation:none} }
@keyframes fade{from{opacity:0; transform:translateY(10px)} to{opacity:1; transform:none}}

h1,h2,.win-code,button.primary{font-family:"Anton","Poppins",system-ui,sans-serif; font-weight:400; letter-spacing:.5px}
h2{font-size:clamp(1.5rem,6.5vw,2.1rem); margin:2px 0; text-transform:uppercase; text-shadow:0 3px 14px rgba(0,0,0,.7)}
.wheel-heading{margin-bottom:2px}
.sub{color:var(--muted); margin:0; font-size:clamp(.95rem,3.6vw,1.05rem); text-shadow:0 2px 10px rgba(0,0,0,.8)}
.tagline{font-family:"Arima",cursive; color:var(--gold); font-size:clamp(1rem,4.6vw,1.25rem); margin:-2px 0 2px; text-shadow:0 2px 10px rgba(0,0,0,.8)}
.error{color:#ff9d9d; margin:2px 0; font-weight:600}

.headline{width:clamp(250px,80vw,360px); height:auto; filter:drop-shadow(0 10px 26px rgba(0,0,0,.6)); margin-bottom:2px}
.headline-won{width:clamp(230px,72vw,360px); height:auto; filter:drop-shadow(0 10px 26px rgba(0,0,0,.6)); margin-bottom:2px}
.headline-merci{width:clamp(210px,62vw,320px); height:auto; filter:drop-shadow(0 10px 26px rgba(0,0,0,.6)); margin-bottom:2px}
.brand-logo{width:clamp(110px,38vw,170px); aspect-ratio:1; filter:drop-shadow(0 8px 22px rgba(0,0,0,.55))}

/* Language switch */
.lang-switch{position:fixed; top:calc(env(safe-area-inset-top) + 10px); right:12px; z-index:40;
  display:flex; gap:3px; background:rgba(10,8,6,.5); border:1px solid var(--line); border-radius:999px; padding:3px; backdrop-filter:blur(4px)}
.lang-switch button{border:0; background:none; color:var(--muted); font-family:"Poppins",sans-serif; font-weight:700; font-size:.8rem; padding:5px 11px; border-radius:999px; cursor:pointer}
.lang-switch button.active{background:var(--cta); color:#2a1200}
body.kiosk .lang-switch button{font-size:1rem; padding:8px 16px}

input,textarea{
  width:100%; padding:15px 16px; border-radius:14px; border:2px solid var(--line);
  background:rgba(10,8,6,.6); color:var(--text); font-size:1.1rem; text-align:center; font-family:inherit;
  backdrop-filter:blur(2px);
}
input::placeholder,textarea::placeholder{color:#b7a894}
input:focus,textarea:focus{outline:none; border-color:var(--gold); box-shadow:0 0 0 4px rgba(249,190,30,.2)}
#code-input{text-transform:uppercase; letter-spacing:3px; font-weight:700}

button.primary{
  width:100%; max-width:340px; padding:17px 20px; border:0; border-radius:16px;
  background:var(--cta); color:#2a1200; font-size:clamp(1.15rem,5vw,1.4rem); text-transform:uppercase;
  cursor:pointer; box-shadow:0 8px 24px rgba(237,28,36,.4); transition:transform .08s ease, box-shadow .2s ease;
}
button.primary:active{transform:translateY(2px) scale(.99)}
button.primary:disabled{opacity:.65; cursor:default}
button.link{background:none; border:0; color:var(--muted); margin-top:2px; cursor:pointer; font-size:.95rem; text-decoration:underline; text-shadow:0 2px 8px rgba(0,0,0,.8)}

/* ===== Wheel (canvas graffiti) ===== */
.wheel-wrap{
  position:relative; width:clamp(260px,84vw,420px); aspect-ratio:1; margin:6px auto 12px;
  transition:transform .3s ease, filter .3s ease;
}
#wheel{position:absolute; inset:0; width:100%; height:100%; filter:drop-shadow(0 16px 34px rgba(0,0,0,.6))}
.wheel-pointer{position:absolute; top:-5%; left:50%; transform:translateX(-50%); width:15%; height:auto; z-index:3; filter:drop-shadow(0 5px 4px rgba(0,0,0,.55))}
.wheel-logo{position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); width:22%; height:auto; border-radius:50%; pointer-events:none; box-shadow:0 4px 16px rgba(0,0,0,.55); z-index:2}
.wheel-wrap.win{transform:scale(1.03); filter:drop-shadow(0 0 26px rgba(249,190,30,.65))}

/* Prize */
.prize-label{font-family:"Anton",sans-serif; font-size:clamp(1.8rem,8vw,2.6rem); color:var(--gold); text-transform:uppercase; margin:6px 0; line-height:1; text-shadow:0 3px 16px rgba(0,0,0,.8)}
.win-code{
  font-size:clamp(1.8rem,8vw,2.4rem); letter-spacing:8px; color:var(--ink);
  background:var(--gold); padding:12px 10px 12px 18px; border-radius:14px; margin:6px 0;
  box-shadow:inset 0 -4px 0 rgba(0,0,0,.15), 0 8px 22px rgba(0,0,0,.4);
}
.countdown{font-size:clamp(1rem,4.4vw,1.2rem); color:var(--gold); font-weight:700; text-shadow:0 2px 8px rgba(0,0,0,.8)}
.countdown.expired{color:#ff9d9d}

.thumbs{display:flex; gap:16px; justify-content:center; margin:10px 0}
.thumb{background:rgba(36,29,24,.5); border:2px solid var(--line); border-radius:22px; padding:12px 16px; cursor:pointer; transition:transform .08s, border-color .2s, background .2s}
.thumb img{width:clamp(74px,22vw,108px); height:auto; display:block; filter:drop-shadow(0 6px 12px rgba(0,0,0,.5))}
.thumb:active{transform:scale(.93)}
#btn-up:hover{border-color:var(--gold); background:rgba(249,190,30,.12)}
#btn-down:hover{border-color:var(--red); background:rgba(237,28,36,.12)}
body.kiosk .thumb img{width:min(18vh,150px)}

#confetti{position:fixed; inset:0; pointer-events:none; z-index:50; display:none}

/* ===== Kiosk (big screen) ===== */
body.kiosk #app{max-width:900px}
body.kiosk .headline{width:min(60vh,560px)}
body.kiosk .wheel-wrap{width:min(72vh,640px)}
body.kiosk .brand-logo{width:min(26vh,240px)}
body.kiosk button.primary{max-width:460px; padding:24px; font-size:clamp(1.6rem,3vw,2.2rem)}
body.kiosk .win-code,body.kiosk .prize-label{font-size:clamp(2.4rem,5vw,3.6rem)}

@media (max-height:520px) and (orientation:landscape){
  #app{justify-content:flex-start; padding-top:14px}
  .wheel-wrap{width:min(52vh,320px)}
  .headline{width:clamp(200px,42vh,320px)}
  .brand-logo{width:clamp(80px,20vh,120px)}
}

/* ===== Admin ===== */
.admin{ background:#1a1613 url("assets/bg-horizontal.jpg") center center / cover no-repeat fixed; }
.admin #app{max-width:780px; justify-content:flex-start; text-align:left; padding-top:26px}
.admin .screen.active{align-items:stretch}
.admin h2{text-align:left; margin-top:26px; color:var(--gold)}
.admin .card{background:rgba(36,29,24,.9); border:1px solid var(--line); border-radius:18px; padding:16px}
.admin label{display:block; text-align:left; margin:10px 0 0; color:var(--muted); font-size:.85rem; text-transform:uppercase; letter-spacing:.5px}
.admin label input{text-align:left; margin-top:5px}
.admin table{width:100%; border-collapse:collapse}
.admin #prizes th{text-align:left; font-size:.72rem; text-transform:uppercase; color:var(--muted); padding:6px 4px}
.admin #prizes td{padding:3px}
.admin #prizes input{padding:8px; font-size:.95rem; text-align:left; border-radius:8px}
.admin #prizes button{background:var(--ink-3); color:var(--text); border:1px solid var(--line); border-radius:8px; padding:8px 10px; cursor:pointer}
.admin .code-display{font-family:"Anton",sans-serif; font-size:clamp(2rem,9vw,3rem); letter-spacing:6px; color:var(--ink); background:var(--gold); border-radius:14px; padding:14px; text-align:center}
.admin ul{padding-left:18px; color:var(--muted)}
.admin .stat-row{font-size:1.1rem}
.admin .stat-row b{color:var(--gold)}

:focus-visible{outline:3px solid var(--gold); outline-offset:2px; border-radius:6px}