:root{
  --ink:#1a0630; --deep:#2a0b4d; --purple:#5b1a9e; --violet:#8b2be2; --magenta:#e01fd0; --pink:#ff6ad5; --blush:#ffc2f0;
  --gem:#ffd23f; --gem2:#ffb400; --mint:#5ef2c8; --red:#ff4d6d; --white:#fff8ff;
  --r:18px; --shadow:6px 6px 0 var(--ink);
}
*{box-sizing:border-box}
html,body{margin:0}
html{background:#1b0633}
body{font-family:'Fredoka',system-ui,sans-serif;color:var(--white);min-height:100vh;
  background:radial-gradient(1200px 600px at 80% -10%,rgba(224,31,208,.45),transparent 60%),
             radial-gradient(900px 600px at -10% 30%,rgba(139,43,226,.55),transparent 60%),
             linear-gradient(180deg,#24093f 0%,#3a0f6b 45%,#1b0633 100%);
  background-attachment:fixed;overflow-x:hidden}
body::before{content:"";position:fixed;inset:0;pointer-events:none;opacity:.18;z-index:0;
  background-image:radial-gradient(var(--pink) 1.4px,transparent 1.6px);background-size:14px 14px}
a{color:var(--gem)}
.sparkles{position:fixed;inset:0;pointer-events:none;z-index:0;overflow:hidden}
.sparkles i{position:absolute;width:14px;height:14px;background:var(--white);opacity:.0;
  clip-path:polygon(50% 0,61% 39%,100% 50%,61% 61%,50% 100%,39% 61%,0 50%,39% 39%);animation:twinkle 3.6s infinite ease-in-out}
@keyframes twinkle{0%,100%{opacity:0;transform:scale(.3) rotate(0)}50%{opacity:.95;transform:scale(1) rotate(45deg)}}
.wrap{position:relative;z-index:1;max-width:560px;margin:0 auto;padding:16px 16px 64px}
header.top{display:flex;align-items:center;gap:10px;margin:4px 0 14px}
header.top img{width:44px;height:44px;border-radius:50%;border:3px solid var(--ink);box-shadow:3px 3px 0 var(--ink)}
header.top .brand{font-family:'Bangers',cursive;font-size:30px;letter-spacing:2px;color:var(--gem);
  -webkit-text-stroke:1.5px var(--ink);text-shadow:3px 3px 0 var(--ink)}
header.top .x{margin-left:auto;font-weight:600;font-size:14px;color:var(--blush);text-decoration:none;background:rgba(0,0,0,.25);padding:6px 10px;border-radius:999px;border:2px solid var(--ink)}
.steps{display:flex;gap:6px;margin:0 0 16px}
.steps span{flex:1;text-align:center;font-family:'Bangers',cursive;letter-spacing:1px;font-size:16px;padding:7px 4px;border-radius:12px;
  background:rgba(255,255,255,.08);border:2px solid var(--ink);color:var(--blush)}
.steps span.on{background:var(--gem);color:var(--ink);box-shadow:3px 3px 0 var(--ink)}
.steps span.done{background:var(--mint);color:var(--ink)}
.hero{position:relative;border-radius:var(--r);overflow:hidden;border:4px solid var(--ink);box-shadow:var(--shadow);margin-bottom:18px;background:#2b0c4a}
.hero img{display:block;width:100%;height:auto}
.hero .title{position:absolute;left:12px;bottom:8px}
h1,.h1{font-family:'Bangers',cursive;font-weight:400;letter-spacing:3px;line-height:.95;margin:0;
  font-size:clamp(44px,13vw,72px);color:var(--white);-webkit-text-stroke:2.5px var(--ink);
  text-shadow:4px 4px 0 var(--magenta),8px 8px 0 var(--ink);transform:rotate(-3deg)}
h2{font-family:'Bangers',cursive;font-weight:400;letter-spacing:2px;font-size:30px;margin:0 0 8px;color:var(--gem);-webkit-text-stroke:1.2px var(--ink);text-shadow:3px 3px 0 var(--ink)}
.lead{font-size:17px;color:var(--blush);margin:8px 0 18px}
.card{background:linear-gradient(160deg,rgba(91,26,158,.92),rgba(42,11,77,.95));border:4px solid var(--ink);border-radius:var(--r);box-shadow:var(--shadow);padding:18px;margin:0 0 18px;position:relative}
.card.pink{background:linear-gradient(160deg,#ff6ad5,#c21bb5)}
.card.gold{background:linear-gradient(160deg,#ffe073,#ffb400);color:var(--ink)}
.card.gold h2{color:var(--ink);text-shadow:none;-webkit-text-stroke:0}
.task{display:flex;align-items:center;gap:12px;padding:12px;border-radius:14px;background:rgba(0,0,0,.22);border:3px solid var(--ink);margin-bottom:10px}
.task .ic{width:40px;height:40px;flex:0 0 40px;border-radius:12px;display:grid;place-items:center;background:var(--pink);color:var(--ink);font-weight:700;font-size:20px;border:3px solid var(--ink)}
.task .tx{flex:1;min-width:0}
.task .tx b{display:block;font-size:16px}
.task .tx small{color:var(--blush)}
.task.done .ic{background:var(--mint)}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;font-family:'Bangers',cursive;letter-spacing:1.5px;font-size:20px;
  padding:12px 18px;border-radius:14px;border:3px solid var(--ink);background:var(--gem);color:var(--ink);box-shadow:4px 4px 0 var(--ink);
  cursor:pointer;text-decoration:none;transition:transform .08s,box-shadow .08s;user-select:none}
.btn:active{transform:translate(3px,3px);box-shadow:1px 1px 0 var(--ink)}
.btn.small{font-size:16px;padding:8px 12px;box-shadow:3px 3px 0 var(--ink)}
.btn.pink{background:var(--pink)} .btn.mint{background:var(--mint)} .btn.ghost{background:rgba(255,255,255,.12);color:var(--white)}
.btn.block{width:100%}
.btn[disabled]{opacity:.5;cursor:not-allowed;filter:grayscale(.5)}
label{display:block;font-weight:600;margin:12px 0 6px}
input[type=text],input[type=password],input[type=number],textarea,select{width:100%;font:inherit;font-size:16px;padding:12px;border-radius:12px;border:3px solid var(--ink);
  background:var(--white);color:var(--ink);outline:none}
input:focus,textarea:focus{box-shadow:0 0 0 3px var(--pink)}
.check{display:flex;align-items:center;gap:8px;margin:0;font-weight:500}
.check input{width:22px;height:22px;accent-color:var(--magenta)}
.err{background:var(--red);color:var(--white);border:3px solid var(--ink);border-radius:12px;padding:10px 12px;margin:12px 0;font-weight:600;display:none}
.ok{background:var(--mint);color:var(--ink);border:3px solid var(--ink);border-radius:12px;padding:10px 12px;margin:12px 0;font-weight:600;display:none}
.show{display:block!important}
.pill{display:inline-block;font-weight:700;font-size:13px;padding:4px 10px;border-radius:999px;border:2px solid var(--ink);background:var(--gem);color:var(--ink)}
.pill.demo{background:var(--pink)} .pill.live{background:var(--mint)}
.muted{color:var(--blush);font-size:14px}
.mono{font-family:ui-monospace,Menlo,monospace;font-size:12px;word-break:break-all}
.row{display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.grow{flex:1}
.gem{display:inline-block;width:22px;height:26px;vertical-align:-5px;background:linear-gradient(135deg,#fff6b0,var(--gem) 40%,var(--gem2));
  clip-path:polygon(50% 0,100% 35%,50% 100%,0 35%);filter:drop-shadow(2px 2px 0 var(--ink))}
footer{margin-top:28px;text-align:center;color:var(--blush);font-size:13px}

/* ---------- dice ---------- */
.stage{perspective:900px;display:grid;place-items:center;height:200px;margin:8px 0 4px}
.dice{width:120px;height:120px;position:relative;transform-style:preserve-3d;transform:rotateX(-20deg) rotateY(30deg);transition:transform 1.2s cubic-bezier(.2,.9,.25,1.15)}
.dice.tumble{animation:tumble .7s linear infinite}
@keyframes tumble{from{transform:rotateX(0) rotateY(0) rotateZ(0)}to{transform:rotateX(360deg) rotateY(720deg) rotateZ(180deg)}}
.face{position:absolute;inset:0;border-radius:22px;border:4px solid var(--ink);display:grid;grid-template:repeat(3,1fr)/repeat(3,1fr);padding:14px;
  background:radial-gradient(circle at 30% 25%,#fff 0,#ffe3fa 35%,#ff9be6 100%);box-shadow:inset -6px -8px 0 rgba(91,26,158,.25)}
.face i{width:20px;height:20px;border-radius:50%;background:var(--deep);place-self:center;box-shadow:inset 2px 2px 0 rgba(255,255,255,.35)}
.face.f6{background:radial-gradient(circle at 30% 25%,#fffbe0 0,#ffe073 40%,#ffb400 100%)}
.face.f6 i{background:var(--magenta)}
.f1{transform:rotateY(0) translateZ(60px)} .f6{transform:rotateY(180deg) translateZ(60px)}
.f2{transform:rotateY(90deg) translateZ(60px)} .f5{transform:rotateY(-90deg) translateZ(60px)}
.f3{transform:rotateX(90deg) translateZ(60px)} .f4{transform:rotateX(-90deg) translateZ(60px)}
.shadow{width:120px;height:18px;border-radius:50%;background:rgba(0,0,0,.35);filter:blur(4px);margin:-10px auto 0}
.result{font-family:'Bangers',cursive;letter-spacing:2px;text-align:center;font-size:44px;min-height:52px;-webkit-text-stroke:1.5px var(--ink);text-shadow:4px 4px 0 var(--ink)}
.result.win{color:var(--gem);animation:pop .5s}
.result.lose{color:var(--pink)}
@keyframes pop{0%{transform:scale(.3)}70%{transform:scale(1.25)}100%{transform:scale(1)}}
.hist{display:flex;gap:6px;flex-wrap:wrap}
.hist button{width:36px;height:36px;border-radius:10px;border:3px solid var(--ink);background:var(--blush);color:var(--ink);font-weight:700;cursor:pointer}
.hist button.w{background:var(--gem)}
details{background:rgba(0,0,0,.22);border:3px solid var(--ink);border-radius:14px;padding:10px 12px;margin-top:12px}
details summary{cursor:pointer;font-weight:700}
.kv{display:grid;grid-template-columns:110px 1fr;gap:4px 10px;margin-top:8px;font-size:13px}
.kv b{color:var(--blush);font-weight:600}
.confetti{position:fixed;top:-20px;width:12px;height:16px;z-index:50;pointer-events:none;animation:fall 2.6s linear forwards}
@keyframes fall{to{transform:translateY(110vh) rotate(720deg)}}
.art{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.art img{width:100%;border-radius:14px;border:3px solid var(--ink);box-shadow:3px 3px 0 var(--ink);display:block}

/* admin */
.wide{max-width:1100px}
.stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:10px}
.stat{background:rgba(0,0,0,.25);border:3px solid var(--ink);border-radius:14px;padding:10px}
.stat b{display:block;font-family:'Bangers',cursive;font-size:30px;letter-spacing:1px;color:var(--gem)}
.stat small{color:var(--blush)}
table{width:100%;border-collapse:collapse;font-size:13px}
th,td{padding:6px;border-bottom:1px solid rgba(255,255,255,.15);text-align:left;vertical-align:top}
.tablewrap{overflow-x:auto}
.grid2{display:grid;grid-template-columns:1fr;gap:0 14px}
@media(min-width:760px){.grid2{grid-template-columns:1fr 1fr}}
.warn{background:#ff4d6d;color:#fff;border:3px solid var(--ink);border-radius:12px;padding:8px 12px;font-weight:700}
.qtext{padding:10px 12px;border-radius:14px;background:rgba(0,0,0,.22);border:3px dashed var(--ink);margin:-4px 0 12px}
.qtext small{color:var(--blush)}
.qtext p{margin:6px 0 8px;white-space:pre-wrap;font-size:14px}
.toast{position:fixed;left:50%;bottom:28px;transform:translateX(-50%) translateY(30px);opacity:0;max-width:92vw;text-align:center;background:var(--ink);color:#fff;border:3px solid var(--pink);border-radius:16px;padding:10px 16px;font-weight:700;z-index:60;transition:.3s cubic-bezier(.3,1.8,.5,1);pointer-events:none}
.toast.show{opacity:1;transform:translateX(-50%) translateY(0)}