:root{
  --bg:#070908;--bg2:#101711;--panel:#111713;--panel2:#18211b;
  --gold:#f3c84b;--gold2:#d9a824;--cream:#fbf4df;--muted:#8f9a92;
  --green:#153d2a;--green2:#245b3d;--line:rgba(255,255,255,.12);
}
*{box-sizing:border-box}
html,body{margin:0;width:100%;height:100%;overflow:hidden;background:var(--bg);color:var(--cream);font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif}
body{background:radial-gradient(circle at 50% 45%,#17291e 0,#0b100d 48%,#060807 86%)}
button{font:inherit}
.app-shell{width:100%;height:100dvh;min-height:100vh}

/* Public screen deliberately contains only the two sponsor rails and the wheel. */
.game-layout{
  width:100%;height:100%;min-width:0;min-height:0;
  display:grid;
  grid-template-columns:clamp(92px,14.5vw,250px) minmax(0,1fr) clamp(92px,14.5vw,250px);
  align-items:center;
  gap:clamp(8px,1.35vw,24px);
  padding:clamp(8px,1.15vw,18px) clamp(9px,1.35vw,22px);
}
.wheel-stage{width:100%;height:100%;min-width:0;min-height:0;display:grid;place-items:center;overflow:visible}
.wheel-wrap{
  position:relative;
  width:min(100%,calc(100dvh - clamp(16px,2.3vw,32px)),1120px);
  aspect-ratio:1;
  filter:drop-shadow(0 25px 52px rgba(0,0,0,.66));
}
#wheel{display:block;width:100%;height:100%;border-radius:50%;will-change:transform}
.pointer{position:absolute;right:-25px;top:50%;transform:translateY(-50%);z-index:7;width:50px;height:56px;filter:drop-shadow(0 5px 8px rgba(0,0,0,.55))}
.pointer span{position:absolute;inset:0;clip-path:polygon(0 50%,100% 0,100% 100%);background:linear-gradient(135deg,#ffe37a,#e8b628);border-radius:3px}
.spin-button{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:clamp(72px,15.2%,158px);aspect-ratio:1;border-radius:50%;border:var(--spin-border,8px) solid #0c110e;padding:0 .22em;background:radial-gradient(circle at 35% 25%,#ffe47c,#f1c443 52%,#d8a523 100%);box-shadow:0 13px 30px rgba(0,0,0,.6),inset 0 2px 0 rgba(255,255,255,.6);z-index:6;cursor:pointer;color:#0f1712;font-weight:1000;letter-spacing:var(--spin-letter,.055em);font-size:var(--spin-font,16px);line-height:1;overflow:hidden;white-space:nowrap;transition:transform .16s ease,filter .16s ease}
.spin-button:hover{filter:brightness(1.04)}
.spin-button:active{transform:translate(-50%,-50%) scale(.97)}
.spin-button[disabled]{cursor:default;filter:saturate(.65);opacity:.88}
.spin-button>span{display:block;max-width:100%;line-height:1;white-space:nowrap}

/* Every rail is a self-contained equal-row grid. The number of rows is supplied by JS.
   Each image is contained and centred inside its own card, regardless of source dimensions. */
.sponsor-rail{
  width:100%;
  height:min(var(--wheel-px,96dvh),96dvh,1040px);
  min-height:0;
  display:grid;
  grid-template-rows:repeat(var(--sponsor-count,3),minmax(0,1fr));
  gap:clamp(6px,1.05vh,14px);
  align-self:center;
  justify-self:stretch;
  align-content:center;
}
.sponsor-card{
  position:relative;
  min-width:0;min-height:0;width:100%;height:100%;
  border:1px solid rgba(255,255,255,.13);
  border-radius:clamp(12px,1.3vw,20px);
  background:linear-gradient(145deg,rgba(24,31,27,.96),rgba(10,13,11,.96));
  display:grid;place-items:center;
  overflow:hidden;
  box-shadow:0 14px 42px rgba(0,0,0,.30),inset 0 1px rgba(255,255,255,.03);
}
.sponsor-media{position:absolute;inset:0;min-width:0;min-height:0;padding:clamp(6px,1vw,15px);display:flex;align-items:center;justify-content:center;overflow:hidden}
.sponsor-media img{display:block;width:auto;height:auto;max-width:100%;max-height:100%;object-fit:contain;object-position:center center;margin:0;border-radius:9px;flex:0 1 auto}
.sponsor-text{width:100%;padding:10px;font-size:clamp(13px,1.25vw,22px);font-weight:950;color:var(--gold);text-align:center;letter-spacing:.01em;overflow-wrap:anywhere}

.result-overlay{position:fixed;inset:0;z-index:50;display:grid;place-items:center;padding:28px;background:rgba(0,0,0,.76);backdrop-filter:blur(12px)}
.result-overlay[hidden]{display:none!important}
.result-card{width:min(720px,93vw);min-height:410px;border-radius:31px;border:1px solid rgba(255,255,255,.16);background:linear-gradient(155deg,#17211a,#0d120f 68%);box-shadow:0 35px 110px rgba(0,0,0,.68);padding:48px 52px 44px;text-align:center;display:flex;flex-direction:column;align-items:center;justify-content:center;position:relative;overflow:hidden}
.result-card::before{content:"";position:absolute;inset:0 0 auto;height:5px;background:linear-gradient(90deg,transparent,var(--gold),transparent)}
.result-card.lose::before{background:linear-gradient(90deg,transparent,#7c8780,transparent)}
.result-badge{padding:12px 22px;border-radius:999px;background:rgba(243,200,75,.11);border:1px solid rgba(243,200,75,.3);color:var(--gold);font-size:clamp(18px,1.55vw,24px);line-height:1;letter-spacing:.13em;font-weight:900;text-transform:uppercase}
.result-card.lose .result-badge{color:#b8c0bb;border-color:rgba(184,192,187,.25);background:rgba(184,192,187,.08)}
.result-card h2{font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;font-size:var(--result-title-size,42px);font-weight:800;line-height:1.04;margin:18px 0 24px;letter-spacing:-.012em;white-space:nowrap;max-width:100%;overflow:hidden}
.result-image{display:block;max-width:min(340px,70vw);max-height:300px;object-fit:contain;border-radius:18px;margin:0 auto 25px}
.result-image[hidden],.result-fallback[hidden]{display:none!important}
.result-fallback{font-size:95px;line-height:1;margin:0 auto 28px;filter:drop-shadow(0 8px 20px rgba(0,0,0,.35))}
.result-close{border:0;border-radius:14px;background:linear-gradient(180deg,#f9d65f,#eab72d);color:#101711;font-weight:950;font-size:19px;padding:15px 38px;min-width:190px;cursor:pointer;box-shadow:0 9px 25px rgba(0,0,0,.3)}
.result-card.lose .result-close{background:#69736d;color:white}

/* Result typography tuned for the 4:3 installation screen: stronger status chip,
   calmer title typography that matches the rest of the UI. */
@media (min-width:840px) and (max-aspect-ratio:3/2){
  .result-card{width:min(710px,90vw);padding:44px 48px 40px}
  .result-badge{font-size:clamp(19px,1.7vw,24px);padding:13px 24px}
  .result-card h2{font-weight:800}
}

/* 4:3 landscape is the main installation target. Keep the wheel as large as the centre column
   permits and let sponsor cards divide the full vertical space evenly. */
@media (min-width:840px) and (max-aspect-ratio:3/2){
  .game-layout{grid-template-columns:clamp(96px,13.8vw,235px) minmax(0,1fr) clamp(96px,13.8vw,235px);gap:clamp(8px,1.15vw,18px);padding:8px 10px}
  .wheel-wrap{width:min(100%,calc(100dvh - 16px),1120px)}
  .sponsor-rail{height:min(var(--wheel-px,calc(100dvh - 18px)),calc(100dvh - 18px),1060px);gap:8px}
  .sponsor-media{padding:7px}
  .pointer{right:-22px;width:45px;height:50px}
}

@media(max-width:920px) and (min-aspect-ratio:3/2){
  .game-layout{grid-template-columns:clamp(90px,13.5vw,124px) minmax(0,1fr) clamp(90px,13.5vw,124px);padding:7px 9px;gap:8px}
  .wheel-wrap{width:min(100%,calc(100dvh - 14px),760px)}
  .sponsor-media{padding:6px}
  .pointer{right:-20px;width:42px;height:47px}
}

@media(max-width:680px) and (orientation:portrait){
  html,body{overflow:auto}
  .app-shell{height:auto;min-height:100dvh}
  .game-layout{height:auto;min-height:100dvh;grid-template-columns:1fr;grid-template-areas:"wheel" "left" "right";padding:12px;gap:12px}
  .wheel-stage{grid-area:wheel}
  .wheel-wrap{width:min(91vw,680px)}
  .sponsor-rail{height:auto;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));grid-template-rows:none;gap:8px}
  #leftSponsors{grid-area:left}#rightSponsors{grid-area:right}
  .sponsor-card{height:110px}
  .sponsor-media{position:absolute;inset:0;padding:6px}
  .pointer{right:-18px;width:38px;height:42px}
  .result-card{min-height:360px;padding:38px 20px}
}