.roulette-intro{padding-bottom:20px}
.roulette-setup{max-width:800px;margin:0 auto 24px}
.roulette-fields{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px 24px;margin-top:16px}
.roulette-fields label{font-weight:700}
.roulette-fields small{font-weight:400;color:var(--muted)}
.roulette-fields label:not(.roulette-check){display:block}
.roulette-fields :is(input:not([type=checkbox]),select),.roulette-answer input,.roulette-solve input{display:block;width:100%;min-height:44px;padding:9px 11px;background:#0d1626;color:var(--text);border:1px solid #40536c;border-radius:9px;font:inherit}
.roulette-fields :is(input:not([type=checkbox]),select){margin:6px 0 14px}
.roulette-check{display:flex;align-items:center;gap:8px;margin:10px 0}
.roulette-check input{width:18px;height:18px;accent-color:#82e9c3;flex:none}
.roulette-check:has(input:disabled){color:var(--muted)}
#rouletteMathHint{margin:8px 0 14px}
#rouletteSetupStatus:empty{display:none}
body:has(.roulette-game[open]){overflow:hidden}
.roulette-game{position:fixed;inset:0;margin:0;width:100%;max-width:none;height:100dvh;max-height:none;overflow:hidden;padding:max(clamp(8px,2vw,24px),env(safe-area-inset-top)) max(clamp(8px,2vw,24px),env(safe-area-inset-right)) max(clamp(8px,2vw,24px),env(safe-area-inset-bottom)) max(clamp(8px,2vw,24px),env(safe-area-inset-left));border:0;background:radial-gradient(ellipse at top left,#143346 0,transparent 60%),#0b1020;color:var(--text)}
.roulette-stage{display:grid;grid-template-rows:auto auto minmax(0,1fr);gap:clamp(5px,1.25dvh,14px);height:100%;max-width:1240px;margin:auto}
.roulette-stage :is(p,h2){margin:0}
.roulette-feedback{position:fixed;inset:0;z-index:2;display:grid;place-items:center;padding:16px;pointer-events:none}
.roulette-cry span{font-size:clamp(64px,23vmin,156px);line-height:1;filter:drop-shadow(0 7px 16px #0008);animation:roulette-cry 740ms ease-in-out both}
@keyframes roulette-cry{
  0%,100%{opacity:0;transform:scale(var(--cry-small,.82))}
  26%,65%{opacity:1;transform:scale(1)}
}
.roulette-turn-notice span{max-width:min(100%,640px);padding:clamp(14px,4vw,30px);border:2px solid #ff747d;border-radius:18px;background:#35131c;color:#ff858e;box-shadow:0 10px 40px #000b;font-size:clamp(25px,6vw,56px);line-height:1.15;font-weight:800;text-align:center;animation:roulette-turn-notice 2100ms ease-in-out both}
@keyframes roulette-turn-notice{
  0%,100%{opacity:0}
  10%,29%,83%{opacity:1}
  19%{opacity:var(--notice-pulse,.62)}
}
.roulette-heading,.roulette-title{display:flex;align-items:center;gap:clamp(5px,1.3vw,12px)}
.roulette-heading{justify-content:space-between}
.roulette-title h2{font-size:clamp(15px,2.5vw,25px);line-height:1.2}
.roulette-title .badge{white-space:nowrap;padding:3px 7px}
#rouletteSettings{white-space:nowrap;padding:7px 10px;font-size:clamp(11px,2vw,14px)}
.roulette-scores{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(0,1fr);gap:clamp(5px,1vw,12px)}
.roulette-score{min-width:0;padding:clamp(5px,1dvh,12px) clamp(7px,1.2vw,16px);background:#14243a;border:1px solid #324761;border-radius:12px;line-height:1.2}
.roulette-score[aria-current=true]{border-color:#ffd46a;background:#332b23}
.roulette-score strong,.roulette-score span{display:block}
.roulette-score strong{font-size:clamp(12px,2vw,16px);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.roulette-score span{margin-top:3px;color:#ffda76;font-size:clamp(13px,2.3vw,20px);font-variant-numeric:tabular-nums}
.roulette-layout{display:grid;grid-template-columns:minmax(150px,.75fr) minmax(0,1.85fr);gap:clamp(5px,1.25dvh,14px);min-height:0}
.roulette-spin,.roulette-puzzle{min-width:0;min-height:0;padding:clamp(8px,2vw,24px)}
.roulette-spin{display:grid;justify-items:center;align-content:center;gap:clamp(4px,1.1dvh,12px);text-align:center}
.roulette-puzzle{display:grid;align-content:center;gap:clamp(4px,1.1dvh,12px)}
.roulette-mechanism{position:relative;width:min(100%,270px,30vw,44dvh);aspect-ratio:1;margin:6px auto}
.roulette-wheel{position:absolute;inset:0;border:5px solid #ffdb7e;border-radius:50%;background:#276c75;transition:transform 1.3s cubic-bezier(.17,.78,.24,1);box-shadow:0 8px 20px #060b18aa}
.roulette-wheel span{position:absolute;transform:translate(-50%,-50%);font-size:clamp(11px,2vw,16px);font-weight:800;color:white;text-shadow:0 1px 3px #000}
.roulette-wheel .roulette-special{white-space:pre-line;line-height:1.05;text-align:center;font-size:clamp(9px,1.5vw,12px)}
.roulette-pointer{position:absolute;top:-8px;left:50%;transform:translateX(-50%);z-index:2;width:0;height:0;border-left:11px solid transparent;border-right:11px solid transparent;border-top:22px solid #fff1a2}
.roulette-hub{position:absolute;inset:40%;border-radius:50%;display:grid;place-items:center;background:#111e32;color:#ffda76;border:2px solid #ffda76;font-weight:800}
#rouletteValue{color:#ffda76;font-weight:800;line-height:1.2}
#rouletteSpin{padding:7px 13px}
.roulette-clue{padding:clamp(4px,1dvh,10px) 9px;border-radius:10px;background:#193b3a;font-size:clamp(12px,2vw,16px);line-height:1.25}
.roulette-clue span{color:#a5efce;margin-right:6px}
.roulette-words{display:grid;gap:clamp(3px,.9dvh,8px)}
.roulette-row{display:grid;grid-template-columns:repeat(var(--letters,1),minmax(0,clamp(21px,3.7vw,42px)));gap:clamp(2px,.45vw,5px);perspective:440px}
.roulette-row span{height:clamp(20px,5.7dvh,44px);display:grid;place-items:center;background:#253950;border-bottom:2px solid #7292af;border-radius:4px;font-weight:800;font-size:clamp(13px,min(3vw,4dvh),24px);transition:transform 100ms ease-in-out}
.roulette-row span[data-visible=true]{color:#c9ffe7;background:#1c5147;border-color:#87e9c7}
.roulette-row span.roulette-primed{background:#fff;border-color:#fff}
.roulette-row span.roulette-turning{transform:rotateY(90deg)}
.roulette-turn{font-weight:800;color:#ffda76}
.roulette-turn,.roulette-status{font-size:clamp(12px,2vw,16px);line-height:1.25;overflow-wrap:anywhere}
.roulette-status{min-height:2.5em}
.roulette-dialog{position:fixed;inset:0;margin:auto;width:min(510px,calc(100% - 28px));max-height:calc(100dvh - 28px);overflow:auto;padding:clamp(18px,5vw,30px);border:1px solid #506581;border-radius:18px;background:#17243a;color:var(--text);box-shadow:0 18px 60px #000a}
.roulette-dialog::backdrop{background:#07101cbd}
.roulette-dialog h2{margin:6px 0 12px}
.roulette-math{border-color:#8c7145}
.roulette-math label{display:block;margin:8px 0;font-weight:700}
.roulette-equation{margin:12px 0;color:#ffda76;font-size:clamp(22px,5vw,38px);font-weight:800;line-height:1.35;overflow-wrap:anywhere}
.roulette-answer{display:flex;flex-wrap:wrap;gap:8px}
.roulette-answer input{width:min(100%,150px)}
.roulette-verdict{margin-top:18px;padding-top:10px;border-top:1px solid #3b4d67}
.roulette-actions{display:flex;flex-wrap:wrap;gap:8px}
.roulette-solve p{margin:0 0 8px}
.roulette-solve label{display:block;margin-top:7px;font-weight:700}
.roulette-solve input{margin-top:3px;min-height:40px;padding:6px 10px}
.roulette-solve .roulette-actions{margin-top:12px}
.roulette-right{background:#205043;color:#c9ffe7}
.roulette-wrong{background:#743241;color:#ffe0e5}
.roulette-result{text-align:center;border-color:#ffda76}
.roulette-result-content{position:relative}
.roulette-result .roulette-actions{justify-content:center;margin-top:18px}
.roulette-winner{margin:10px 0;color:#ffda76;font-size:clamp(28px,8vw,52px);font-weight:800;line-height:1.1;overflow-wrap:anywhere}
#rouletteConfetti{position:absolute;inset:0;pointer-events:none;overflow:hidden;border-radius:inherit}
#rouletteConfetti span{position:absolute;top:-16px;left:var(--left);width:8px;height:13px;border-radius:2px;background:var(--color);animation:roulette-confetti 1.35s var(--delay) ease-in both}
@keyframes roulette-confetti{to{transform:translate(var(--drift),360px) rotate(420deg);opacity:0}}
.roulette-keyboard{display:grid;grid-template-columns:repeat(13,minmax(0,1fr));gap:clamp(3px,.65vw,6px)}
.roulette-keyboard button{min-height:clamp(25px,6.5dvh,48px);padding:2px 0;font-size:clamp(12px,2vw,17px)}
.roulette-keyboard button[data-hit=true]{background:#205043;color:#baffdd;opacity:1}
.roulette-keyboard button[data-hit=false]{background:#743241;color:#ffe0e5;opacity:1}
#rouletteReplay{justify-self:start;padding:7px 13px}
@media(max-width:700px) and (min-height:501px),(max-width:479px){
  .roulette-layout{grid-template-columns:minmax(0,1fr);grid-template-rows:auto minmax(0,1fr)}
  .roulette-spin{grid-template-columns:auto minmax(0,1fr);grid-template-rows:auto auto;gap:2px 12px}
  .roulette-mechanism{grid-row:1 / 3;width:clamp(76px,15dvh,120px);margin:2px 0}
  #rouletteValue{align-self:end;font-size:14px}
  #rouletteSpin{align-self:start}
  .roulette-wheel{border-width:3px}
  .roulette-wheel span{font-size:clamp(8px,1.75dvh,13px)}
  .roulette-wheel .roulette-special{font-size:clamp(6px,1.3dvh,10px)}
  .roulette-pointer{top:-4px;border-left-width:6px;border-right-width:6px;border-top-width:12px}
  .roulette-hub{font-size:12px}
  .roulette-keyboard{grid-template-columns:repeat(9,minmax(0,1fr))}
}
@media(max-height:540px){
  .roulette-game{font-size:13px}
  .roulette-spin,.roulette-puzzle{padding:6px}
  .roulette-puzzle{gap:4px}
  .roulette-row span{height:clamp(18px,4.3dvh,26px)}
  .roulette-status{min-height:1.25em}
  .roulette-keyboard button{min-height:clamp(23px,5.1dvh,32px)}
}
@media(max-height:540px) and (max-width:479px){
  .roulette-mechanism{width:clamp(62px,13.6dvh,88px)}
}
@media(max-width:370px){
  .roulette-title{flex-wrap:wrap;row-gap:3px}
  .roulette-row span{font-size:12px}
}
@media(max-width:540px){.roulette-fields{grid-template-columns:1fr;gap:0}}
@media(prefers-reduced-motion:reduce){.roulette-wheel,.roulette-row span{transition:none}#rouletteConfetti{display:none}.roulette-cry{--cry-small:1}.roulette-turn-notice{--notice-pulse:1}}