/*! Party Prize Wheel v1.0.0 – (c) Pyxios, https://pyxios.com */
:root{
  --bg1:#fff7e7;
  --bg2:#ffe2ef;
  --bg3:#eee8ff;
  --text:#27152f;
  --muted:#77677f;
  --panel:rgba(255,255,255,.82);
  --white:#fff;
  --purple:#7c3aed;
  --purple-dark:#4c1d95;
  --pink:#ec4899;
  --gold:#f59e0b;
  --orange:#f97316;
  --green:#22c55e;
  --blue:#0ea5e9;
  --shadow:0 24px 70px rgba(64,29,79,.16);
  --soft-shadow:0 12px 30px rgba(64,29,79,.10);
  --radius:30px;
}

*{box-sizing:border-box}
html{min-height:100%;scroll-behavior:smooth}
body{
  margin:0;
  min-height:100vh;
  color:var(--text);
  font-family:"Segoe UI", Arial, Helvetica, sans-serif;
  background:
    radial-gradient(circle at 7% 8%, rgba(255,224,118,.72), transparent 26%),
    radial-gradient(circle at 91% 12%, rgba(236,72,153,.22), transparent 28%),
    radial-gradient(circle at 50% 92%, rgba(124,58,237,.20), transparent 38%),
    linear-gradient(135deg,var(--bg1),var(--bg2) 48%,var(--bg3));
  overflow-x:hidden;
}
body::before{
  content:"";
  position:fixed;
  inset:0;
  pointer-events:none;
  opacity:.38;
  background-image:
    radial-gradient(circle, rgba(255,255,255,.9) 0 2px, transparent 2px),
    radial-gradient(circle, rgba(124,58,237,.18) 0 2px, transparent 2px);
  background-size:42px 42px, 68px 68px;
  background-position:0 0,20px 22px;
}
button,input,select,textarea{font:inherit}
button{cursor:pointer}
button:disabled{cursor:not-allowed;opacity:.62;transform:none!important}

.ambient span{
  position:fixed;
  width:120px;
  height:120px;
  border-radius:50%;
  opacity:.32;
  filter:blur(1px);
  pointer-events:none;
  animation:floaty 9s ease-in-out infinite;
}
.ambient span:nth-child(1){left:3%;top:18%;background:#f59e0b;animation-delay:-1s}
.ambient span:nth-child(2){right:4%;top:24%;background:#ec4899;animation-delay:-3s;width:90px;height:90px}
.ambient span:nth-child(3){left:8%;bottom:12%;background:#8b5cf6;animation-delay:-2s;width:80px;height:80px}
.ambient span:nth-child(4){right:10%;bottom:14%;background:#22c55e;animation-delay:-4s;width:110px;height:110px}
.ambient span:nth-child(5){left:46%;top:7%;background:#3b82f6;animation-delay:-6s;width:70px;height:70px}
.ambient span:nth-child(6){right:28%;bottom:5%;background:#f97316;animation-delay:-7s;width:60px;height:60px}
@keyframes floaty{0%,100%{transform:translateY(0) scale(1)}50%{transform:translateY(-24px) scale(1.06)}}

.app-shell{
  position:relative;
  z-index:1;
  width:min(1400px,96%);
  margin:0 auto;
  padding:clamp(16px,2.6vw,34px) 0 42px;
}
.hero{text-align:center;margin-bottom:clamp(14px,2vw,24px)}
.event-kicker{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:9px 16px;
  margin-bottom:12px;
  border-radius:999px;
  color:#6d28d9;
  background:rgba(255,255,255,.92);
  box-shadow:var(--soft-shadow);
  font-size:14px;
  font-weight:900;
}
h1{
  margin:0 0 10px;
  font-size:clamp(34px,4.7vw,60px);
  line-height:1.03;
  letter-spacing:-.045em;
}
.hero p{
  max-width:780px;
  margin:0 auto;
  color:var(--muted);
  font-size:clamp(15px,1.7vw,18px);
  line-height:1.5;
}

.game-layout{
  display:grid;
  grid-template-columns:minmax(420px,820px) minmax(300px,430px);
  gap:24px;
  align-items:start;
}
.wheel-card,.side-card,.modal-card{
  background:var(--panel);
  border:1px solid rgba(255,255,255,.76);
  border-radius:var(--radius);
  box-shadow:var(--shadow);
  backdrop-filter:blur(16px);
}
.wheel-card{
  position:relative;
  overflow:hidden;
  padding:clamp(14px,2vw,22px);
}
.wheel-card::after{
  content:"";
  position:absolute;
  right:-110px;
  bottom:-120px;
  width:260px;
  height:260px;
  background:radial-gradient(circle,rgba(255,255,255,.78),rgba(255,255,255,0) 70%);
  pointer-events:none;
}
.wheel-toolbar{
  position:relative;
  z-index:2;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  padding:8px 8px 14px;
}
.round-status{
  display:flex;
  align-items:baseline;
  gap:8px;
  min-width:max-content;
  color:#4b2658;
}
.round-status strong{font-size:28px;line-height:1;font-weight:900;color:var(--purple)}
.round-status span{font-size:13px;font-weight:900;text-transform:uppercase;letter-spacing:.06em;color:var(--muted)}
.toolbar-actions{display:flex;align-items:center;gap:8px;flex-wrap:wrap;justify-content:flex-end}
.select-pill,.icon-btn{
  display:inline-flex;
  align-items:center;
  gap:7px;
  min-height:38px;
  border:1px solid rgba(124,58,237,.13);
  border-radius:999px;
  background:rgba(255,255,255,.72);
  box-shadow:0 8px 18px rgba(64,29,79,.06);
  color:#4b2658;
  font-size:13px;
  font-weight:900;
  white-space:nowrap;
}
.select-pill{padding:4px 5px 4px 12px}
.select-pill select{
  border:0;
  border-radius:999px;
  padding:6px 22px 6px 8px;
  background:#fff;
  color:#4b2658;
  font-weight:900;
  outline:none;
}
.icon-btn{padding:8px 12px;border:0}
.icon-btn:hover,.mini-link:hover{transform:translateY(-1px)}

.wheel-wrap{
  position:relative;
  z-index:1;
  width:min(78vh, 100%, 820px);
  max-width:100%;
  aspect-ratio:1;
  margin:0 auto 16px;
  display:grid;
  place-items:center;
}
canvas{
  width:100%;
  height:100%;
  display:block;
  filter:drop-shadow(0 22px 34px rgba(41,24,54,.20));
}
.pointer{
  position:absolute;
  top:-10px;
  left:50%;
  z-index:7;
  width:60px;
  height:80px;
  transform:translateX(-50%);
  border:0;
  background:linear-gradient(145deg,#fff9d8 0%,#ffd86a 30%,#f59e0b 62%,#9a4306 100%);
  clip-path:polygon(50% 100%, 8% 22%, 20% 4%, 80% 4%, 92% 22%);
  filter:
    drop-shadow(0 18px 18px rgba(74,35,8,.34))
    drop-shadow(0 7px 5px rgba(74,35,8,.28))
    drop-shadow(0 0 12px rgba(255,218,95,.38));
  will-change:filter, transform;
}
.pointer::before{
  content:"";
  position:absolute;
  inset:8px 11px 20px;
  border-radius:999px 999px 14px 14px;
  background:linear-gradient(180deg,rgba(255,255,255,.82),rgba(255,255,255,.16));
  clip-path:polygon(50% 100%, 10% 12%, 90% 12%);
  opacity:.9;
}
.pointer::after{
  content:"";
  position:absolute;
  left:50%;
  top:13px;
  width:22px;
  height:22px;
  transform:translateX(-50%);
  border-radius:50%;
  background:radial-gradient(circle at 35% 30%,#fff 0,#fff7d6 34%,#f59e0b 72%,#9a4306 100%);
  border:3px solid rgba(255,255,255,.94);
  box-shadow:
    inset 0 2px 4px rgba(255,255,255,.45),
    0 5px 10px rgba(92,47,12,.26),
    0 0 0 6px rgba(255,255,255,.18);
}
.center-spin{
  position:absolute;
  z-index:5;
  width:clamp(90px,14%,126px);
  height:clamp(90px,14%,126px);
  display:grid;
  place-items:center;
  border:7px solid #fff;
  border-radius:50%;
  color:#5f3400;
  background:radial-gradient(circle at 35% 30%,#fff 0,#ffeaa6 22%,#f59e0b 66%,#d97706 100%);
  box-shadow:inset 0 7px 13px rgba(255,255,255,.46),0 13px 32px rgba(245,158,11,.36);
  transition:transform .16s ease;
}
.center-spin:hover{transform:scale(1.035)}
.center-spin span{font-size:clamp(13px,1.6vw,18px);font-weight:900;line-height:1.08;letter-spacing:.04em;text-align:center;text-transform:uppercase}
.main-controls{position:relative;z-index:2;display:flex;justify-content:center;gap:12px;flex-wrap:wrap}
.primary-btn,.secondary-btn{
  min-height:48px;
  border:0;
  border-radius:999px;
  padding:13px 24px;
  font-size:16px;
  font-weight:900;
  transition:transform .16s ease,box-shadow .2s ease,opacity .2s ease;
}
.primary-btn{
  min-width:178px;
  color:#fff;
  background:linear-gradient(135deg,var(--purple),var(--pink));
  box-shadow:0 14px 28px rgba(124,58,237,.28);
}
.secondary-btn{
  color:#3b2745;
  background:#fff;
  box-shadow:0 10px 22px rgba(64,29,79,.10);
}
.primary-btn:hover,.secondary-btn:hover{transform:translateY(-2px)}

.side-card{padding:16px;display:flex;flex-direction:column;gap:14px}
.info-box{background:rgba(255,255,255,.78);border:1px solid rgba(124,58,237,.08);border-radius:22px;padding:16px;box-shadow:0 10px 24px rgba(64,29,79,.06)}
.info-box h2{margin:0 0 12px;font-size:17px;line-height:1.2}
.status-main{min-height:62px;font-size:clamp(20px,2.4vw,26px);font-weight:900;line-height:1.22;letter-spacing:-.02em}
.status-note{margin:8px 0 0;color:var(--muted);font-size:14px;line-height:1.45}
.stats-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.stat{padding:13px 10px;border-radius:17px;text-align:center;background:#fff8ea;border:1px solid #fbe4ae}
.stat strong{display:block;margin-bottom:5px;color:var(--purple);font-size:26px;line-height:1;font-weight:900}
.stat span{font-size:12px;color:var(--muted);font-weight:900;text-transform:uppercase;letter-spacing:.04em}
.box-title-row{display:flex;justify-content:space-between;gap:12px;align-items:center;margin-bottom:10px}
.box-title-row h2{margin:0}
.mini-link{border:0;background:#f5f0ff;color:#5b21b6;border-radius:999px;padding:7px 10px;font-size:12px;font-weight:900}
.history-list{margin:0;padding-left:22px;display:grid;gap:8px;max-height:260px;overflow:auto}
.history-list li{padding:9px 10px;border-radius:13px;background:#fbf9ff;font-size:14px;line-height:1.35}
.history-list strong{color:#4c1d95}
.empty-state{margin:0;color:var(--muted);font-size:14px}

.modal{position:fixed;inset:0;z-index:100;display:none;align-items:center;justify-content:center;padding:20px;background:rgba(39,21,47,.48)}
.modal.show{display:flex}
.modal-card{position:relative;width:min(560px,96vw);max-height:92vh;overflow:auto;padding:27px 22px 24px;text-align:center;animation:popIn .24s ease both;background:rgba(255,255,255,.94)}
.result-modal-card{overflow:hidden}
.result-modal-card::before{content:"";position:absolute;left:-80px;bottom:-90px;width:210px;height:210px;background:radial-gradient(circle,rgba(124,58,237,.16),rgba(124,58,237,0) 68%)}
.settings-card{width:min(980px,96vw);text-align:left;padding:28px}
.close-x{position:absolute;top:14px;right:14px;z-index:2;width:38px;height:38px;border:0;border-radius:50%;background:#fff;color:#4b2658;box-shadow:0 8px 16px rgba(64,29,79,.1);font-size:25px;line-height:1;font-weight:800}
.modal-emoji{text-align:center;font-size:56px;margin:0 0 8px}.modal-card h2{text-align:center;margin:0 0 8px;font-size:clamp(28px,4vw,38px);letter-spacing:-.04em}.modal-card p{text-align:center;margin:0 0 14px;color:var(--muted);line-height:1.46}
.modal-result{position:relative;margin:0 auto 14px;padding:15px 16px;border-radius:20px;background:#fff6df;border:1px solid #f9dda0;color:#5b3200;font-size:clamp(24px,4vw,34px);font-weight:900;text-align:center;line-height:1.15}
.modal-hint{font-weight:700}.modal-actions{display:flex;justify-content:center;gap:10px;flex-wrap:wrap;margin-top:16px}.settings-actions{justify-content:flex-end}
.settings-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px}.settings-section{padding:15px;border-radius:22px;background:#fbf9ff;border:1px solid rgba(124,58,237,.10)}.settings-section h3{margin:0 0 12px;font-size:18px}.wide-section{grid-column:1/-1}.field-grid{display:grid;gap:12px}.two-cols{grid-template-columns:repeat(2,minmax(0,1fr))}.compact-grid{align-items:end}.field{display:grid;gap:7px}.field span,.check-option{color:#5d4b66;font-size:13px;font-weight:900;text-transform:uppercase;letter-spacing:.04em}.field input,.field select,.field textarea{width:100%;border:1px solid rgba(124,58,237,.16);border-radius:15px;background:#fff;color:var(--text);outline:none;padding:12px 13px;font-weight:700}.field input:focus,.field select:focus,.field textarea:focus{border-color:rgba(124,58,237,.55);box-shadow:0 0 0 4px rgba(124,58,237,.09)}.field textarea{min-height:120px;resize:vertical;line-height:1.42;font-family:"Segoe UI",Arial,sans-serif}.option-row{margin-top:12px}.check-option{display:flex;align-items:flex-start;gap:9px;text-transform:none;letter-spacing:0;line-height:1.35}.check-option input{width:18px;height:18px;accent-color:var(--purple);margin-top:1px}.settings-note{margin:8px 0 0!important;text-align:left!important;color:var(--muted)!important;font-size:13px!important;font-weight:700!important}

.confetti{position:fixed;inset:0;z-index:99;overflow:hidden;pointer-events:none}.confetti-piece{position:absolute;top:-24px;width:10px;height:18px;border-radius:3px;opacity:.95;animation:fall linear forwards}@keyframes fall{to{transform:translateY(112vh) rotate(760deg);opacity:1}}@keyframes popIn{from{transform:scale(.93);opacity:0}to{transform:scale(1);opacity:1}}

body.clean-mode .hero, body.clean-mode .side-card{display:none}body.clean-mode .game-layout{grid-template-columns:1fr;max-width:min(980px,98vw);margin:0 auto}body.clean-mode .app-shell{width:min(1100px,98%);padding-top:10px}body.clean-mode .wheel-wrap{width:min(86vh,96vw,920px)}body.clean-mode .wheel-toolbar{justify-content:center}body.clean-mode .round-status{display:none}

body.fullscreen-active{overflow:hidden}body.fullscreen-active .app-shell{width:100%;height:100vh;padding:10px;display:grid;place-items:center}body.fullscreen-active .hero, body.fullscreen-active .side-card{display:none}body.fullscreen-active .game-layout{width:100%;height:100%;display:grid;grid-template-columns:1fr;place-items:center}.fullscreen-active .wheel-card{width:min(100%, calc(100vh * 1.18));max-height:100%;padding:10px;border-radius:24px}.fullscreen-active .wheel-toolbar{padding:4px 6px 8px}.fullscreen-active .wheel-wrap{width:min(calc(100vh - 150px),96vw,980px);margin-bottom:8px}.fullscreen-active .main-controls{padding-bottom:4px}.fullscreen-active .primary-btn,.fullscreen-active .secondary-btn{min-height:44px;padding:10px 20px}

@media (max-width:1100px){.game-layout{grid-template-columns:1fr}.wheel-wrap{width:min(76vh,92vw,820px)}.side-card{display:grid;grid-template-columns:repeat(2,minmax(0,1fr))}.history-box{grid-column:1/-1}.settings-grid{grid-template-columns:1fr}.wide-section{grid-column:auto}}
@media (max-width:760px){.app-shell{width:min(100%,96%);padding-top:12px}.hero{margin-bottom:12px}h1{font-size:clamp(29px,8vw,42px)}.game-layout{gap:14px}.wheel-card,.side-card{border-radius:22px}.wheel-toolbar{align-items:flex-start;flex-direction:column}.toolbar-actions{justify-content:flex-start}.icon-btn,.select-pill{font-size:12px;min-height:36px}.wheel-wrap{width:min(92vw,660px)}.main-controls .primary-btn,.main-controls .secondary-btn{width:100%;max-width:300px}.side-card{display:flex}.stats-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.two-cols{grid-template-columns:1fr}.settings-card{padding:22px 14px}.modal{padding:10px}.settings-actions{justify-content:center}.settings-actions .primary-btn,.settings-actions .secondary-btn{width:100%}}
@media (max-width:520px){.toolbar-actions{display:grid;grid-template-columns:1fr 1fr;width:100%}.select-pill,.icon-btn{justify-content:center}.select-pill{grid-column:1/-1}.pointer{width:50px;height:68px;top:-7px}.center-spin{border-width:5px}.stats-grid{grid-template-columns:1fr 1fr}.history-list{max-height:180px}}
@media (orientation:landscape) and (max-height:820px){.hero{display:none}.app-shell{padding-top:10px}.game-layout{grid-template-columns:minmax(430px,1fr) minmax(270px,360px);gap:14px}.wheel-wrap{width:min(calc(100vh - 150px),62vw,780px)}.side-card{display:flex}.info-box{padding:12px}.status-main{min-height:44px;font-size:19px}.history-list{max-height:150px}.wheel-toolbar{padding-bottom:8px}}

/* Safe buttons and tablet / fullscreen improvements */
.spin-only{justify-content:center}
.game-box{background:linear-gradient(135deg,rgba(255,255,255,.92),rgba(255,248,234,.92))}
.danger-soft-btn,
.danger-btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  border:0;
  border-radius:999px;
  font-weight:900;
  min-height:46px;
  padding:12px 18px;
  transition:transform .16s ease, box-shadow .18s ease, filter .18s ease;
}
.danger-soft-btn{
  width:100%;
  color:#9f1239;
  background:#fff1f2;
  border:1px solid rgba(225,29,72,.18);
  box-shadow:0 10px 22px rgba(159,18,57,.07);
}
.danger-btn{
  color:#fff;
  background:linear-gradient(135deg,#e11d48,#fb7185);
  box-shadow:0 14px 28px rgba(225,29,72,.20);
}
.danger-soft-btn:hover,
.danger-btn:hover{transform:translateY(-1px);filter:saturate(1.05)}
.confirm-card{width:min(520px,96vw)}
.floating-actions{
  position:fixed;
  right:calc(14px + env(safe-area-inset-right));
  bottom:calc(14px + env(safe-area-inset-bottom));
  z-index:80;
  display:none;
  gap:8px;
  flex-wrap:wrap;
  justify-content:flex-end;
  max-width:min(520px,calc(100vw - 28px));
  pointer-events:auto;
}
.float-btn{
  border:1px solid rgba(124,58,237,.15);
  border-radius:999px;
  min-height:40px;
  padding:9px 13px;
  color:#4c1d95;
  background:rgba(255,255,255,.92);
  box-shadow:0 10px 24px rgba(64,29,79,.12);
  font-size:13px;
  font-weight:900;
  backdrop-filter:blur(14px);
}
.float-btn.danger{color:#9f1239;background:rgba(255,241,242,.94);border-color:rgba(225,29,72,.18)}
body.clean-mode .floating-actions,
body.fullscreen-active .floating-actions{display:flex}
body.clean-mode .main-controls{padding-bottom:58px}
body.fullscreen-active .floating-actions{right:18px;bottom:18px}
body.fullscreen-active .modal,
body.fullscreen-active .confetti{position:fixed}
:fullscreen{background:linear-gradient(135deg,var(--bg1),var(--bg2) 48%,var(--bg3))}
body.fullscreen-active{background:
  radial-gradient(circle at 7% 8%, rgba(255,224,118,.72), transparent 26%),
  radial-gradient(circle at 91% 12%, rgba(236,72,153,.22), transparent 28%),
  radial-gradient(circle at 50% 92%, rgba(124,58,237,.20), transparent 38%),
  linear-gradient(135deg,var(--bg1),var(--bg2) 48%,var(--bg3));
}
.fullscreen-active .wheel-card{background:rgba(255,255,255,.86)}
.fullscreen-active .floating-actions .float-btn{min-height:44px;font-size:14px}
@media (max-width:760px){
  .game-box{order:3}
  .floating-actions{left:10px;right:10px;bottom:10px;justify-content:center}
  .float-btn{flex:1 1 auto;min-width:118px}
  body.clean-mode .main-controls{padding-bottom:104px}
}


/* Clean view inside fullscreen: only the wheel and the floating menu remain. */
body.clean-mode.fullscreen-active .wheel-toolbar,
body.clean-mode.fullscreen-active .main-controls{
  display:none;
}
body.clean-mode.fullscreen-active .wheel-card{
  display:grid;
  place-items:center;
  width:100%;
  height:100%;
  max-height:none;
  background:transparent;
  box-shadow:none;
  border-color:transparent;
}
body.clean-mode.fullscreen-active .wheel-wrap{
  width:min(calc(100vh - 46px),96vw,1080px);
  margin:0;
}
body.clean-mode.fullscreen-active .floating-actions{
  display:flex;
}
@media (max-width:760px){
  body.clean-mode.fullscreen-active .wheel-wrap{
    width:min(calc(100vh - 96px),96vw,880px);
  }
}

/* Clean fullscreen uses the real viewport size, so the wheel always stays
   inside the visible area – also on tablets in landscape orientation. */
body.clean-mode.fullscreen-active{
  overflow:hidden;
}
body.clean-mode.fullscreen-active .app-shell{
  position:fixed;
  inset:0;
  width:100vw;
  max-width:none;
  height:100vh;
  height:100dvh;
  min-height:100vh;
  min-height:100dvh;
  margin:0;
  padding:0;
  display:flex;
  align-items:center;
  justify-content:center;
  overflow:hidden;
}
body.clean-mode.fullscreen-active .game-layout{
  width:100vw;
  height:100vh;
  height:100dvh;
  max-width:none;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:
    clamp(8px,2vmin,20px)
    clamp(8px,2vmin,20px)
    calc(74px + env(safe-area-inset-bottom))
    clamp(8px,2vmin,20px);
  overflow:hidden;
}
body.clean-mode.fullscreen-active .wheel-card{
  flex:0 0 auto;
  width:100%;
  height:100%;
  max-width:none;
  max-height:none;
  min-width:0;
  min-height:0;
  padding:0;
  display:flex;
  align-items:center;
  justify-content:center;
  overflow:visible;
  background:transparent;
  box-shadow:none;
  border-color:transparent;
}
body.clean-mode.fullscreen-active .wheel-wrap{
  width:min(calc(100vw - 32px), calc(100dvh - 112px), 1080px);
  height:min(calc(100vw - 32px), calc(100dvh - 112px), 1080px);
  max-width:100%;
  max-height:100%;
  margin:0 auto;
  flex:0 0 auto;
  transform:none;
}
body.clean-mode.fullscreen-active canvas{
  max-width:100%;
  max-height:100%;
}
body.clean-mode.fullscreen-active .floating-actions{
  position:fixed;
  right:calc(16px + env(safe-area-inset-right));
  bottom:calc(14px + env(safe-area-inset-bottom));
  left:auto;
  max-width:calc(100vw - 32px);
}
@media (max-width:760px), (max-height:760px){
  body.clean-mode.fullscreen-active .game-layout{
    padding:
      8px
      8px
      calc(92px + env(safe-area-inset-bottom))
      8px;
  }
  body.clean-mode.fullscreen-active .wheel-wrap{
    width:min(calc(100vw - 20px), calc(100dvh - 128px), 900px);
    height:min(calc(100vw - 20px), calc(100dvh - 128px), 900px);
  }
  body.clean-mode.fullscreen-active .floating-actions{
    left:8px;
    right:8px;
    bottom:calc(8px + env(safe-area-inset-bottom));
    justify-content:center;
  }
}


/* Fullscreen clean view fine-tuning: no blurred glass behind the wheel. */
.fullscreen-title{
  display:none;
  position:fixed;
  top:calc(12px + env(safe-area-inset-top));
  left:50%;
  transform:translateX(-50%);
  z-index:70;
  max-width:min(92vw,780px);
  padding:9px 20px 10px;
  border-radius:999px;
  color:#4c1d95;
  background:rgba(255,255,255,.78);
  border:1px solid rgba(255,255,255,.85);
  box-shadow:0 14px 34px rgba(64,29,79,.12);
  font-size:clamp(21px,3.2vw,42px);
  font-weight:900;
  line-height:1.08;
  letter-spacing:-.04em;
  text-align:center;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
body.clean-mode.fullscreen-active:not(.fullscreen-title-hidden) .fullscreen-title{
  display:block;
}
body.clean-mode.fullscreen-active .wheel-card,
body.clean-mode.fullscreen-active .wheel-card::before,
body.clean-mode.fullscreen-active .wheel-card::after{
  backdrop-filter:none!important;
  -webkit-backdrop-filter:none!important;
}
body.clean-mode.fullscreen-active .wheel-card::after{display:none!important}
body.clean-mode.fullscreen-active .ambient span{
  filter:none;
  opacity:.30;
}
body.clean-mode.fullscreen-active:not(.fullscreen-title-hidden) .game-layout{
  padding-top:calc(clamp(64px,9dvh,108px) + env(safe-area-inset-top));
}
body.clean-mode.fullscreen-active:not(.fullscreen-title-hidden) .wheel-wrap{
  width:min(calc(100vw - 32px), calc(100dvh - 186px), 1080px);
  height:min(calc(100vw - 32px), calc(100dvh - 186px), 1080px);
}
@media (max-width:760px), (max-height:760px){
  .fullscreen-title{
    top:calc(8px + env(safe-area-inset-top));
    max-width:calc(100vw - 20px);
    padding:8px 14px 9px;
    font-size:clamp(19px,5.8vw,30px);
  }
  body.clean-mode.fullscreen-active:not(.fullscreen-title-hidden) .game-layout{
    padding-top:calc(58px + env(safe-area-inset-top));
  }
  body.clean-mode.fullscreen-active:not(.fullscreen-title-hidden) .wheel-wrap{
    width:min(calc(100vw - 20px), calc(100dvh - 176px), 900px);
    height:min(calc(100vw - 20px), calc(100dvh - 176px), 900px);
  }
}


/* Fun animations for non-prize fields */
.modal.fun-result .modal-result{
  background:#f5f0ff;
  border-color:rgba(124,58,237,.18);
  color:#4c1d95;
}
.modal.fun-result .modal-card::before{
  background:radial-gradient(circle,rgba(236,72,153,.18),rgba(236,72,153,0) 68%);
}
.fun-piece{
  position:absolute;
  left:50vw;
  top:54vh;
  z-index:1;
  font-size:clamp(24px,4vw,54px);
  line-height:1;
  filter:drop-shadow(0 10px 14px rgba(64,29,79,.16));
  transform:translate(-50%,-50%);
  animation:funBurst ease-out forwards;
}
.fun-bubble{
  position:absolute;
  bottom:-54px;
  z-index:1;
  width:clamp(46px,6vw,76px);
  height:clamp(46px,6vw,76px);
  display:grid;
  place-items:center;
  border-radius:50%;
  background:rgba(255,255,255,.88);
  border:1px solid rgba(255,255,255,.72);
  color:#4c1d95;
  box-shadow:0 16px 28px rgba(64,29,79,.12);
  font-size:clamp(17px,2.4vw,28px);
  font-weight:900;
  animation:funBubble ease-out forwards;
}
.fun-ribbon{
  position:absolute;
  z-index:1;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:10px 16px;
  border-radius:999px;
  background:linear-gradient(135deg,rgba(255,255,255,.96),rgba(245,240,255,.94));
  color:#4c1d95;
  border:1px solid rgba(124,58,237,.15);
  box-shadow:0 14px 28px rgba(64,29,79,.12);
  font-size:clamp(18px,2.6vw,32px);
  font-weight:900;
  transform:translate(-50%,-50%) rotate(var(--rot));
  animation:funRibbon ease-out forwards;
}
@keyframes funBurst{
  0%{opacity:0;transform:translate(-50%,-50%) scale(.15) rotate(0deg)}
  14%{opacity:1}
  100%{opacity:0;transform:translate(calc(-50% + var(--tx)),calc(-50% + var(--ty))) scale(var(--scale)) rotate(var(--rot))}
}
@keyframes funBubble{
  0%{opacity:0;transform:translateY(0) translateX(0) scale(.65) rotate(0deg)}
  12%{opacity:1}
  100%{opacity:0;transform:translateY(-108vh) translateX(var(--tx)) scale(1.08) rotate(var(--rot))}
}
@keyframes funRibbon{
  0%{opacity:0;transform:translate(-50%,-50%) scale(.5) rotate(var(--rot))}
  18%{opacity:1;transform:translate(-50%,-50%) scale(1.08) rotate(var(--rot))}
  72%{opacity:1;transform:translate(-50%,-66%) scale(1) rotate(var(--rot))}
  100%{opacity:0;transform:translate(-50%,-92%) scale(.82) rotate(var(--rot))}
}

/* End of game */
.modal.game-over-result .modal-card{
  background:
    radial-gradient(circle at 18% 10%, rgba(255,224,118,.58), transparent 30%),
    radial-gradient(circle at 90% 18%, rgba(236,72,153,.18), transparent 34%),
    linear-gradient(180deg, rgba(255,255,255,.98), rgba(255,247,237,.96));
  border-color:rgba(245,158,11,.25);
}
.modal.game-over-result .modal-emoji{
  animation:endCheers 1.15s ease-in-out infinite alternate;
}
.modal.game-over-result #modalTitle{
  color:#5b21b6;
}
.modal.game-over-result .modal-result{
  background:linear-gradient(135deg,#fff7d6,#f5e8ff);
  border-color:rgba(245,158,11,.35);
  color:#5b3200;
  box-shadow:0 14px 30px rgba(245,158,11,.15);
  animation:endGlow 1.9s ease-in-out infinite;
}
.modal.game-over-result .modal-hint{
  max-width:440px;
  margin-left:auto!important;
  margin-right:auto!important;
  color:#5d3b6d!important;
  font-size:clamp(16px,2.2vw,20px)!important;
}
.end-ribbon{
  position:absolute;
  z-index:2;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-width:52px;
  padding:10px 16px;
  border-radius:999px;
  background:linear-gradient(135deg,rgba(255,255,255,.98),rgba(255,248,231,.95));
  color:#6d28d9;
  border:1px solid rgba(245,158,11,.28);
  box-shadow:0 18px 34px rgba(64,29,79,.14);
  font-size:clamp(18px,2.5vw,34px);
  font-weight:900;
  transform:translate(-50%,-50%) rotate(var(--rot));
  animation:endRibbon ease-out forwards;
}
@keyframes endCheers{
  from{transform:translateY(0) rotate(-4deg) scale(1)}
  to{transform:translateY(-7px) rotate(5deg) scale(1.08)}
}
@keyframes endGlow{
  0%,100%{transform:scale(1);box-shadow:0 14px 30px rgba(245,158,11,.15)}
  50%{transform:scale(1.025);box-shadow:0 18px 38px rgba(236,72,153,.20)}
}
@keyframes endRibbon{
  0%{opacity:0;transform:translate(-50%,-50%) scale(.55) rotate(var(--rot))}
  18%{opacity:1;transform:translate(-50%,-50%) scale(1.08) rotate(var(--rot))}
  74%{opacity:1;transform:translate(-50%,-72%) scale(1) rotate(var(--rot))}
  100%{opacity:0;transform:translate(-50%,-106%) scale(.82) rotate(var(--rot))}
}

/* ─── Touch / responsiveness / undo ───────────────────────────────── */

/* Undo button and spacing inside the Game box */
.game-box{display:flex;flex-direction:column;gap:10px}
.game-box h2{margin-bottom:2px}
.soft-btn{
  width:100%;
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  border:1px solid rgba(124,58,237,.18);
  border-radius:999px;
  min-height:46px;
  padding:12px 18px;
  color:#4c1d95;
  background:#f5f1ff;
  box-shadow:0 10px 22px rgba(76,29,149,.07);
  font-weight:900;
  transition:transform .16s ease, box-shadow .18s ease, filter .18s ease;
}

/* No double-tap delay, no blue tap highlight, no accidental text selection */
button,.center-spin,.select-pill,.icon-btn,.float-btn,canvas,.wheel-wrap{
  touch-action:manipulation;
  -webkit-tap-highlight-color:transparent;
}
button,.center-spin,.select-pill,.icon-btn,.float-btn,canvas{
  -webkit-user-select:none;user-select:none;
}

/* Disable pull-to-refresh / bounce while playing on mobile */
html,body{overscroll-behavior:none}

/* Tactile press feedback on touch */
.primary-btn:active,.secondary-btn:active,.center-spin:active,
.danger-btn:active,.danger-soft-btn:active,.soft-btn:active,
.icon-btn:active,.float-btn:active{transform:scale(.97)}

/* On touch devices do not leave buttons stuck in their hover state */
@media (hover:none){
  .icon-btn:hover,.mini-link:hover,.center-spin:hover,
  .primary-btn:hover,.secondary-btn:hover,
  .danger-soft-btn:hover,.danger-btn:hover,.soft-btn:hover,
  .float-btn:hover{transform:none;filter:none}
}

/* Respect the system reduced-motion setting (decorative motion is switched off) */
@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto}
  .ambient span{animation:none}
  .center-spin,.primary-btn,.secondary-btn,.icon-btn,
  .float-btn,.soft-btn,.danger-btn,.danger-soft-btn{transition:none}
}


/* Pseudo fullscreen fallback for browsers without the Fullscreen API (iPhone Safari) */
body.pseudo-fullscreen{position:fixed;inset:0;width:100%;height:100%}

/* Hidden attribute must always win over component display rules */
[hidden]{display:none!important}

/* Settings: field hints and the host prize key */
.field-hint{color:var(--muted);font-size:12px;font-weight:700}
.prize-key{margin-top:12px;padding:12px 14px;border-radius:15px;background:#fff;border:1px dashed rgba(124,58,237,.28)}
.prize-key summary{cursor:pointer;color:#5b21b6;font-size:14px;font-weight:900}
.prize-key ol{list-style:none;margin:12px 0 0;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(190px,1fr));gap:6px 14px;font-size:14px;font-weight:700}
.prize-key li.is-used{color:var(--muted);text-decoration:line-through}

/* Visible keyboard focus */
button:focus-visible,select:focus-visible,summary:focus-visible{outline:3px solid rgba(124,58,237,.55);outline-offset:2px}

/* Reduced motion: keep the result, drop the flying decorations */
@media (prefers-reduced-motion: reduce){
  .confetti{display:none}
  .modal-card,.modal.game-over-result .modal-emoji,.modal.game-over-result .modal-result{animation:none}
}

/* Demo build */
.demo-bar{position:fixed;top:0;left:0;right:0;z-index:90;display:flex;align-items:center;justify-content:center;gap:10px;flex-wrap:wrap;min-height:44px;padding:8px 14px;background:#27152f;color:#fff;font-size:14px;font-weight:700}
.demo-bar strong{padding:3px 10px;border-radius:999px;background:linear-gradient(135deg,#7c3aed,#ec4899);font-weight:900;letter-spacing:.08em}
.demo-bar a{color:#ffd86a;font-weight:900;text-decoration:none;white-space:nowrap}
.demo-bar a:hover{text-decoration:underline}
.demo-note{opacity:.75}
body{padding-top:44px}
body.fullscreen-active{padding-top:0}
body.fullscreen-active .demo-bar{display:none}
.demo-lock{margin:0 0 16px!important;padding:10px 14px;border-radius:14px;background:#fff6df;border:1px solid #f9dda0;color:#5b3200!important;font-weight:800}
.buy-link{display:inline-flex;align-items:center;justify-content:center;text-decoration:none}
.settings-card :disabled{opacity:.75;cursor:not-allowed}
@media (max-width:520px){.demo-note{display:none}.demo-bar{font-size:13px;gap:8px}}