/* assets/style.css */
:root{
  --text:#ffffff;
  --btn:#ff4d6d;
  --accent:#ffd166;
}
*{ box-sizing:border-box; }
html,body{ height:100%; }
body{
  margin:0;
  font-family:'Outfit',system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial,sans-serif;
  color:var(--text);
  overflow-x:hidden;
}
.bgsvg{
  position: fixed; inset: 0;
  width: 100vw; height: 100vh;
  display:block;
  z-index: -2;
}
.page{
  min-height:100%;
  display:grid;
  grid-template-rows:auto 1fr auto;
  gap:24px;
}
.header{ text-align:center; padding:24px 16px 0; }
.header h1{
  margin:0 0 8px;
  font-size:2.1rem;
  letter-spacing:.3px;
  text-shadow:0 2px 12px rgba(0,0,0,.55);
}
.lead{ margin:0; opacity:.98; text-shadow:0 1px 8px rgba(0,0,0,.45); }
.quota{ margin-top:8px; opacity:.95; font-weight:600; }
.main{ display:grid; place-items:center; gap:22px; padding:16px; }
.wheel-wrap{
  position:relative;
  display:grid;
  place-items:center;
  padding:0;
  background: transparent;
  box-shadow:none;
}
.pointer{
  position:absolute; top:8px;
  width:0;height:0;
  border-left:16px solid transparent;
  border-right:16px solid transparent;
  border-bottom:26px solid var(--accent);
  filter: drop-shadow(0 6px 8px rgba(0,0,0,.45));
}
.shadow{
  position:absolute; bottom:-12px;
  filter: blur(12px) opacity(.75);
  pointer-events:none;
}
.controls{ display:grid; gap:12px; text-align:center; }
.btn{
  appearance:none; border:none; cursor:pointer;
  padding:14px 22px; border-radius:12px;
  background:var(--btn); color:#fff; font-weight:800; letter-spacing:.2px;
  box-shadow:0 10px 30px rgba(255,77,109,.35);
  transition: transform .08s ease, filter .2s ease;
}
.btn:hover{ filter:brightness(1.08); }
.btn:active{ transform: translateY(1px); }
.result{ min-height:28px; font-weight:700; text-align:center; text-shadow:0 2px 10px rgba(0,0,0,.6); }
.footer{ text-align:center; padding:16px; opacity:.9; text-shadow:0 1px 6px rgba(0,0,0,.5); }
canvas{ display:block; }
.flames{ pointer-events:none; }
.flame .core{
  fill: rgba(255,240,150,0.95);
  filter: drop-shadow(0 0 6px rgba(255,200,120,0.85));
  animation: flick 1.1s ease-in-out infinite alternate, sway 1.8s ease-in-out infinite alternate;
  transform-origin: 50% 80%;
}
.flame .halo{
  fill: rgba(255,150,60,0.45);
  filter: blur(2px);
  animation: flickHalo 1.1s ease-in-out infinite alternate, sway 1.8s ease-in-out infinite alternate;
  transform-origin: 50% 80%;
  animation-delay: .12s;
  mix-blend-mode: screen;
}
@keyframes flick{
  0%   { opacity:.85; transform: scaleY(0.92) scaleX(0.96); }
  50%  { opacity:1.00; transform: scaleY(1.06) scaleX(1.00); }
  100% { opacity:.88; transform: scaleY(0.96) scaleX(0.94); }
}
@keyframes flickHalo{
  0%   { opacity:.55; transform: scale(1.15); }
  50%  { opacity:.85; transform: scale(1.22); }
  100% { opacity:.60; transform: scale(1.18); }
}
@keyframes sway{
  0%   { transform: translate(0,0) rotate(-2deg); }
  50%  { transform: translate(.8px,-1.2px) rotate(2.6deg); }
  100% { transform: translate(0,0) rotate(-1.4deg); }
}
@media (prefers-reduced-motion: reduce){
  .flame .core, .flame .halo{ animation:none; }
}
@media (max-width: 420px){
  .header h1{ font-size:1.8rem; }
}