:root{--bg:#fdf8f7;--ink:#2b2b2b;--muted:#7b7480;--line:#d9d2d0;--blue:#3b7ff2;--salmon:#e8877a;--reset:#de7f7f;--red:#e3342f;color-scheme:light;font-family:"Segoe UI",Tahoma,system-ui,sans-serif}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{margin:0;overflow-x:hidden;background:var(--bg);color:var(--ink)}
body{min-height:100vh;user-select:none}
.page{width:min(100%,560px);margin:auto;padding:max(10px,env(safe-area-inset-top)) 16px max(26px,env(safe-area-inset-bottom))}
.topline{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-bottom:10px}
.topline .brand-line{margin:0;min-width:0}
.icon{flex:none;width:38px;height:38px;border:1px solid var(--line);border-radius:12px;background:#fff;color:var(--ink);font-size:17px;cursor:pointer}
/* brand chips on a light page */
.cloud-brand{background:#f1ebff;border-color:#d8c8ff;color:#3a2d5c;box-shadow:none}
.dancing-313{color:#7a4dff;text-shadow:none}
.baron-credit{background:#fff;border-color:var(--line);color:#8a8390}
.baron-credit b{color:#6c45e0;text-shadow:none}
.dancing-baron i{animation-name:baronDanceLight}
@keyframes baronDanceLight{0%,45%,100%{transform:translateY(0) rotateY(0);color:#6c45e0}18%{transform:translateY(-3px) rotateY(180deg);color:#e3342f}30%{transform:translateY(1px) rotateY(360deg);color:#3b7ff2}}
.sinan-credit{margin:18px auto 0;padding-top:12px;text-align:center;color:#9a929e;font-size:11px;letter-spacing:1.5px;font-weight:800}
.sinan-credit b{color:#6c45e0;font-size:14px;letter-spacing:2px}

/* result bar — takes the colour of the slice the needle stops on */
.banner{display:flex;align-items:center;justify-content:center;min-height:62px;margin:0 0 18px;padding:8px 16px;border-radius:12px;background:var(--salmon);color:#2b2b2b;font-size:30px;font-weight:600;text-align:center;line-height:1.15;overflow-wrap:anywhere;transition:background .35s}
.banner.pop{animation:pop .5s ease}
@keyframes pop{0%{transform:scale(1)}40%{transform:scale(1.04)}100%{transform:scale(1)}}

/* the wheel stays still, the red needle spins */
.wheel-box{position:relative;overflow:hidden;width:min(100%,460px);aspect-ratio:1;margin:0 auto}
#wheel{display:block;width:100%;height:100%;will-change:transform;filter:drop-shadow(0 2px 3px #0002)}
.needle{position:absolute;inset:0;pointer-events:none;will-change:transform}
.needle:before{content:"";position:absolute;left:50%;top:50%;width:8.6%;height:8.6%;transform:translate(-50%,-50%);border-radius:50%;background:linear-gradient(90deg,#fff 50%,#e9e6e6 50%);box-shadow:0 1px 3px #0004;z-index:1}
.needle i{position:absolute;left:50%;top:50%;width:13%;height:6.4%;transform:translateY(-50%);background:var(--red);clip-path:polygon(0 0,100% 50%,0 100%);filter:drop-shadow(0 1px 1px #0003);z-index:2}

.controls{display:flex;justify-content:center;align-items:center;gap:14px;margin:22px 0 8px}
.btn{border:0;border-radius:6px;font:inherit;cursor:pointer;transition:transform .12s,opacity .2s}
.btn:active{transform:scale(.96)}
.btn:disabled{opacity:.45;cursor:default}
.btn-spin{min-width:110px;padding:22px 26px;background:var(--blue);color:#fff;font-size:24px}
.btn-reset{padding:12px 18px;background:var(--reset);color:#fff;font-size:19px}
.btn-ghost{padding:11px 16px;border:1px solid var(--line);background:#fff;color:var(--ink);font-size:15px}
.status{min-height:22px;margin:4px 0 18px;text-align:center;color:var(--muted);font-size:14px}

.list-head{display:flex;justify-content:space-between;align-items:center;gap:8px;margin-bottom:8px}
.tag{padding:7px 12px;border:1px solid #8b8590;border-radius:6px;background:#fff;color:#5d5862;font-size:15px}
.tag b{color:var(--ink)}
.tag.live[hidden]{display:none}.tag.live{display:flex;align-items:center;gap:6px;border-color:#9ad59a;color:#2f7d32;font-size:13px}
.tag.live i{width:8px;height:8px;border-radius:50%;background:#34c759;animation:blink 1.4s infinite}
@keyframes blink{50%{opacity:.25}}
.names{min-height:180px;max-height:330px;overflow:auto;border:1.5px solid #222;background:#fff;padding:8px 0}
.row{display:flex;align-items:center;gap:10px;padding:5px 14px;font-size:21px;line-height:1.3}
.row .av{position:relative;flex:none;display:grid;place-items:center;width:30px;height:30px;border-radius:50%;overflow:hidden;color:#fff;font-size:14px;font-weight:700}
.row .av img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.row .nm{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.row small{color:var(--muted);font-size:12px}
.row.me{background:#eef4ff}
.row.hit{background:#fff3c4;transition:background .3s}
.row.new{animation:slidein .45s ease}
.row.out .nm{color:#a39da6;text-decoration:line-through}
.row.out .av{filter:grayscale(1);opacity:.5}
.names .empty{padding:20px;text-align:center;color:var(--muted);font-size:15px}
@keyframes slidein{from{opacity:0;transform:translateX(-14px);background:#e7ffe5}to{opacity:1;transform:none}}

.overlay{position:fixed;inset:0;z-index:20;display:grid;place-items:center;padding:16px;background:#2b1f2a66;backdrop-filter:blur(3px)}
.overlay[hidden]{display:none}
.winner-card{position:relative;overflow:hidden;width:min(100%,340px);padding:26px 20px 20px;border-radius:16px;background:#fff;text-align:center;box-shadow:0 20px 60px #0004;animation:pop .5s ease}
.winner-card .cup{display:block;font-size:54px}
.winner-card small{color:var(--muted);font-size:14px}
.winner-card h2{margin:6px 0 18px;font-size:30px;overflow-wrap:anywhere}
.winner-card .btn{display:block;width:100%;margin-top:10px}
.winner-card .btn-spin{padding:15px;font-size:20px}
#confetti{position:absolute;inset:0;pointer-events:none}
#confetti i{position:absolute;top:-12px;width:8px;height:14px;background:var(--c);animation:fall var(--d) linear infinite;animation-delay:var(--delay)}
@keyframes fall{to{transform:translateY(520px) rotate(540deg)}}
@media(max-width:380px){.banner{font-size:25px}.btn-spin{padding:18px 22px;font-size:21px}.row{font-size:18px}.baron-credit{display:none}}
@media(prefers-reduced-motion:reduce){.row.new,.banner.pop{animation:none}}
.add-form{display:flex;gap:8px;margin:0 0 8px}
.add-form[hidden]{display:none}
.add-form input{flex:1;min-width:0;height:48px;padding:0 14px;border:1.5px solid #222;border-radius:6px;background:#fff;color:var(--ink);font:inherit;font-size:18px;user-select:text}
.add-form input:focus{outline:2px solid var(--blue);outline-offset:1px}
.add-form button{flex:none;padding:0 16px;border:0;border-radius:6px;background:var(--blue);color:#fff;font:inherit;font-size:17px;cursor:pointer}
.add-form button:disabled,.add-form input:disabled{opacity:.5}
.row .del{flex:none;width:30px;height:30px;border:0;border-radius:50%;background:#fde3df;color:#c2410c;font-size:19px;line-height:1;cursor:pointer}
.pick{display:flex;flex-direction:column;align-items:center;gap:6px;margin:16px auto 0;padding:14px 16px;max-width:420px;border:2px dashed #e8877a;border-radius:12px;background:#fff;text-align:center;animation:pop .45s ease}
.pick[hidden]{display:none}
.pick small{color:var(--muted);font-size:13px}
.pick b{font-size:28px;line-height:1.2;overflow-wrap:anywhere}
.btn-out{margin-top:4px;padding:14px 22px;background:#d97706;color:#fff;font-size:20px;font-weight:700;border-radius:10px;box-shadow:0 3px 0 #9a5404}
.btn-out[hidden]{display:none}
.pick span{color:var(--muted);font-size:13px}

/* ---------- theme switch (top) ---------- */
.theme-switch{display:flex;width:max-content;margin:0 auto 12px;padding:4px;gap:4px;border:1px solid var(--line);border-radius:999px;background:#fff}
.theme-switch button{border:0;border-radius:999px;padding:8px 16px;background:transparent;color:var(--muted);font:inherit;font-size:15px;font-weight:700;cursor:pointer;transition:background .2s,color .2s,transform .12s}
.theme-switch button:active{transform:scale(.95)}
.theme-switch button[aria-pressed="true"]{background:var(--blue);color:#fff}
.sky{display:none}

/* ---------- 🎈 kids theme: bright cartoon ---------- */
body.kids{--bg:#9be7ff;--ink:#2d2a32;--muted:#4a4458;--line:#2d2a32;--blue:#1982c4;--reset:#ff595e;--red:#ff595e;
  font-family:"Baloo Bhaijaan 2","Segoe UI",Tahoma,sans-serif;
  background:linear-gradient(#9be7ff 0,#c9f3ff 55%,#fff6c9 100%) fixed}
body.kids .page{position:relative;z-index:1}
body.kids .sky{display:block;position:fixed;inset:0;z-index:0;pointer-events:none;overflow:hidden}
body.kids .sky i{position:absolute;width:120px;height:38px;border-radius:40px;background:#fff;opacity:.9;animation:drift 38s linear infinite}
body.kids .sky i:before,body.kids .sky i:after{content:"";position:absolute;border-radius:50%;background:#fff}
body.kids .sky i:before{width:52px;height:52px;top:-26px;left:18px}
body.kids .sky i:after{width:40px;height:40px;top:-18px;left:58px}
body.kids .sky i:nth-child(1){top:120px;left:-130px}
body.kids .sky i:nth-child(2){top:420px;left:-130px;animation-duration:52s;animation-delay:-20s;transform:scale(.7)}
body.kids .sky i:nth-child(3){top:760px;left:-130px;animation-duration:45s;animation-delay:-34s}
body.kids .sky b{position:absolute;font-size:26px;animation:bob 3.4s ease-in-out infinite}
body.kids .sky b:nth-of-type(1){top:70px;right:8%}
body.kids .sky b:nth-of-type(2){top:300px;left:4%;font-size:34px;animation-delay:-1.2s}
body.kids .sky b:nth-of-type(3){top:560px;right:5%;animation-delay:-2s}
@keyframes drift{to{transform:translateX(calc(100vw + 260px))}}
@keyframes bob{50%{transform:translateY(-12px) rotate(8deg)}}

body.kids .icon,body.kids .theme-switch,body.kids .tag,body.kids .names,body.kids .add-form input,body.kids .pick,body.kids .winner-card{border:3px solid #2d2a32;box-shadow:4px 4px 0 #2d2a32}
body.kids .icon{border-radius:14px;background:#fff}
body.kids .theme-switch{background:#fff}
body.kids .theme-switch button[aria-pressed="true"]{background:#ff595e}
body.kids .banner{border:3px solid #2d2a32;border-radius:20px;box-shadow:0 6px 0 #2d2a32;color:#2d2a32;font-weight:800;font-size:32px}
body.kids .banner:not([style*="background"]),body.kids .banner[style=""]{background:#ffca3a}
body.kids #wheel{filter:drop-shadow(0 8px 0 #2d2a3355)}
body.kids .needle:before{width:12%;height:12%;background:radial-gradient(circle at 35% 35%,#fff 0 30%,#ffca3a 31%);border:4px solid #2d2a32;box-shadow:none}
body.kids .needle i{width:16%;height:9%;background:#ff595e;filter:drop-shadow(0 0 0 #2d2a32) drop-shadow(2px 2px 0 #2d2a32)}
body.kids .btn{border:3px solid #2d2a32;border-radius:18px;font-weight:800;box-shadow:0 6px 0 #2d2a32}
body.kids .btn:active{transform:translateY(4px);box-shadow:0 2px 0 #2d2a32}
body.kids .btn-spin{background:#8ac926;color:#fff;text-shadow:0 2px 0 #2d2a32;font-size:28px}
body.kids .btn-reset{background:#ff924c}
body.kids .btn-out{background:#ff595e;box-shadow:0 6px 0 #2d2a32}
body.kids .btn-ghost{background:#fff}
body.kids .status{color:#2d2a32;font-weight:700}
body.kids .tag{border-radius:14px;color:#2d2a32;font-weight:700}
body.kids .tag.live{background:#c7f9a5}
body.kids .add-form input{border-radius:16px;font-weight:700}
body.kids .add-form button{border:3px solid #2d2a32;border-radius:16px;background:#9b5de5;font-weight:800;box-shadow:3px 3px 0 #2d2a32}
body.kids .names{border-radius:20px;background:#fffdf3}
body.kids .row{font-weight:700}
body.kids .row .av{border:2.5px solid #2d2a32}
body.kids .row.me{background:#e3f6ff}
body.kids .row.hit{background:#fff0a8}
body.kids .row .del{border:2px solid #2d2a32;background:#ffd6d7;color:#2d2a32}
body.kids .pick{border-radius:22px;border-style:solid;background:#fffdf3}
body.kids .winner-card{border-radius:26px;background:#fffdf3}
body.kids .cloud-brand,body.kids .baron-credit{border:2px solid #2d2a32;background:#fff}
body.kids .sinan-credit{color:#2d2a32}
body.kids .sinan-credit b{color:#ff595e}
.winner-card>*:not(#confetti){position:relative;z-index:1}
.pick .ask{margin:2px 0 4px;font-size:17px;font-weight:700;color:var(--ink)}
.send-list{display:flex;flex-wrap:wrap;justify-content:center;gap:8px;max-width:100%}
.send{padding:10px 14px;border:0;border-radius:10px;background:#d97706;color:#fff;font:inherit;font-size:17px;font-weight:700;cursor:pointer;box-shadow:0 3px 0 #9a5404;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;transition:transform .12s}
.send:active{transform:translateY(2px);box-shadow:0 1px 0 #9a5404}
.send:disabled{opacity:.5}
body.kids .send{border:3px solid #2d2a32;border-radius:16px;background:#ff595e;box-shadow:0 5px 0 #2d2a32}