:root{
  --bg:#14100d; --fg:#fff3e6; --accent:#ffb020; --accent2:#ff7a00; --card:#241a14;
  --radius:22px;
}
body[data-level="1"]{--accent:#ffb020;--accent2:#ff7a00;--bg:#17100a;--card:#2a1d12}
body[data-level="2"]{--accent:#ff4d3d;--accent2:#d6201a;--bg:#190a0a;--card:#2e1210}
body[data-level="3"]{--accent:#ff2e93;--accent2:#a21caf;--bg:#16081a;--card:#2a1030}
body[data-level="4"]{--accent:#ff1744;--accent2:#7a0010;--bg:#050505;--card:#150507}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{margin:0;min-height:100%;background:var(--bg);color:var(--fg);
  font-family:'Manrope',system-ui,sans-serif;transition:background .5s}
body[data-level="4"] .card{box-shadow:0 0 40px #ff174455,inset 0 0 0 2px var(--accent)}
.logo{position:fixed;top:14px;left:16px;z-index:4;display:flex;align-items:center;gap:6px;
  font:900 15px 'Unbounded',sans-serif;letter-spacing:.5px;color:var(--fg);opacity:.9;
  background:none;border:0;padding:4px 0;cursor:pointer}
.logo svg{flex:none}
.heat{position:fixed;top:0;left:0;right:0;height:6px;background:#ffffff14;z-index:5}
#heatBar{height:100%;width:25%;background:linear-gradient(90deg,var(--accent2),var(--accent));transition:width .6s}
main{max-width:480px;margin:0 auto;padding:56px 16px calc(24px + env(safe-area-inset-bottom))}
.screen{display:none;flex-direction:column;gap:14px;min-height:calc(100vh - 48px)}
.screen.active{display:flex}
h1{font:900 clamp(48px,16vw,72px)/.95 'Unbounded',sans-serif;margin:30px 0 0;
  background:linear-gradient(135deg,var(--accent),var(--accent2));-webkit-background-clip:text;color:transparent}
h2{font:900 32px 'Unbounded',sans-serif;margin:20px 0 0;color:var(--accent)}
.sub{opacity:.7;margin:0 0 10px}
.info{margin-top:28px;font-size:15px;line-height:1.6;opacity:.9}
.info h2{font-size:22px;margin:0 0 8px}
.info h3{font-size:17px;margin:16px 0 6px}
.info p{margin:0 0 10px}
.info ol,.info ul{padding-left:20px;margin:0 0 8px}
.info li{margin-bottom:6px}
.modal{position:fixed;inset:0;z-index:10;background:#000000b3;display:flex;align-items:center;justify-content:center;padding:16px}
.modal-box{width:100%;max-width:380px;background:var(--card);border-radius:var(--radius);padding:24px;display:flex;flex-direction:column;gap:12px;text-align:center}
.modal-box p{margin:0 0 6px;font-weight:700;line-height:1.5}
.safety{margin-top:20px;padding:16px;border-radius:16px;background:#ffffff0d;text-align:left}
.big{font-size:20px;font-weight:800}
.list{padding-left:20px;line-height:1.7}
input[type=text],input:not([type]){padding:16px;border-radius:14px;border:2px solid #ffffff22;
  background:#ffffff0d;color:var(--fg);font:600 18px 'Manrope',sans-serif}
input:focus{outline:none;border-color:var(--accent)}
.check{display:flex;gap:10px;font-size:14px;opacity:.85;align-items:flex-start}
.btn{padding:18px;border-radius:16px;border:0;font:800 18px 'Manrope',sans-serif;color:var(--fg);
  background:#ffffff14;cursor:pointer;transition:transform .1s,opacity .2s}
.btn:active{transform:scale(.97)}
.btn:disabled{opacity:.35}
.btn.primary{background:linear-gradient(135deg,var(--accent),var(--accent2));color:#140a00}
.btn.drink{background:#ffffff1f}
.btn.ghost{background:transparent;border:2px solid #ffffff2a}
.btn.small{padding:12px;font-size:15px}
.btn.support{display:block;text-align:center;text-decoration:none;margin-top:auto;
  color:#fff;background:linear-gradient(135deg,#ff2e93,#7a0010);box-shadow:0 8px 24px #ff2e9340;
  transform:rotate(-1.5deg);letter-spacing:.2px}
.btn.support:active{transform:rotate(-1.5deg) scale(.97)}
.topbar{display:flex;justify-content:space-between;align-items:center;font:700 14px 'Unbounded',sans-serif;color:var(--accent)}
.icon{background:none;border:0;color:var(--fg);font-size:26px;cursor:pointer}
.turn{opacity:.75}
.turn b{color:var(--accent)}
.card{flex:1;min-height:200px;display:flex;align-items:center;justify-content:center;text-align:center;
  background:var(--card);border-radius:var(--radius);padding:28px;font:800 clamp(20px,6vw,26px)/1.35 'Manrope',sans-serif;
  animation:flip .45s ease}
.card.flip{animation:flip .45s ease}
@keyframes flip{from{transform:rotateX(90deg);opacity:0}to{transform:none;opacity:1}}
.penalty{text-align:center;font-size:14px;opacity:.8}
.penalty b{color:var(--accent)}
.actions{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.rule{background:linear-gradient(135deg,var(--accent2),var(--accent));color:#140a00;border-radius:14px;
  padding:10px 14px;font-weight:800;font-size:14px}
.rule small{display:block;font-weight:600;opacity:.8}
.hidden{display:none!important}
.upgrade{display:flex;flex-direction:column;gap:8px}
.upbtn{background:var(--fg);color:#140a00;animation:pulse 1.2s infinite}
@keyframes pulse{50%{box-shadow:0 0 0 10px #ffffff22}}
.link{background:none;border:0;color:var(--fg);opacity:.6;text-decoration:underline;font:600 14px 'Manrope';cursor:pointer}
.score{font-size:13px;opacity:.75;text-align:center;line-height:1.6}
.finale{position:relative;overflow:hidden;text-align:center;align-items:center}
.finale .big{margin:0}
.finale h1{font-size:clamp(30px,9vw,44px);line-height:1.1;margin:10px 0 0;overflow-wrap:anywhere}
.confetti{position:absolute;inset:0;pointer-events:none;z-index:0}
.confetti i{position:absolute;top:-40px;font-size:24px;font-style:normal;animation:fall linear infinite}
@keyframes fall{to{transform:translateY(110vh) rotate(360deg)}}
.finale>*:not(.confetti){position:relative;z-index:1}
.finale .btn{width:100%}