:root { --red:#ee2440; --aqua:#6dc6cd; --yellow:#ffca10; --ink:#202124; --paper:#fff; --soft:#f7f8f5; }
*{box-sizing:border-box} html{min-height:100%;background:#e9eeee} body{margin:0;min-height:100vh;color:var(--ink);font-family:Nunito,Arial,sans-serif;background:radial-gradient(circle at 50% 0%,#fff 43%,#edf1ef 100%)}
button{font:inherit;cursor:pointer}.app-shell{width:min(100%,720px);min-height:100svh;margin:auto;position:relative;overflow:hidden;background:#fff;box-shadow:0 0 52px #8c97972a;isolation:isolate}.topbar{height:76px;display:flex;align-items:center;justify-content:space-between;padding:18px 25px}.brand{color:var(--ink);font-weight:900;text-decoration:none;letter-spacing:-1px;font-size:18px;display:flex;align-items:center;gap:8px}.brand span span{color:var(--red)}.brand-mark{color:var(--red);font-size:24px;line-height:1}.icon-button,.close-button{border:0;background:transparent;color:var(--ink);width:42px;height:42px;border-radius:50%;display:grid;place-items:center;transition:.2s}.icon-button:hover{background:var(--soft);transform:rotate(30deg)}.icon-button svg{width:24px;fill:currentColor}
.game-stage{text-align:center;padding:10px 20px 0;position:relative;z-index:1}.eyebrow{font-size:10px;font-weight:900;letter-spacing:2px;color:var(--red);margin:0 0 7px}.game-stage h1{font-family:'Baloo 2',cursive;font-size:clamp(30px,5.2vw,42px);line-height:.98;letter-spacing:-1.5px;margin:0 auto 9px;max-width:450px}.game-stage h1 em{font-style:normal;color:var(--red)}.intro{margin:0;color:#72777b;font-size:14px;font-weight:700}.wheel-wrap{width:min(84vw,492px);aspect-ratio:1;margin:23px auto -8px;position:relative;filter:drop-shadow(0 14px 13px #354c5321)}.pointer{position:absolute;width:47px;height:55px;background:var(--ink);left:50%;top:-13px;translate:-50% 0;z-index:3;clip-path:polygon(50% 100%,0 0,100% 0);filter:drop-shadow(0 3px 0 #fff)}.pointer span{position:absolute;width:9px;height:9px;border-radius:50%;background:var(--yellow);top:11px;left:19px}.wheel{position:absolute;inset:0;border:5px solid #fff;padding:0;border-radius:50%;background:transparent;overflow:hidden;transition:transform 5.6s cubic-bezier(.13,.69,.12,1);will-change:transform}.segments{position:absolute;inset:0;border-radius:50%;overflow:hidden;background:conic-gradient(from -22.5deg,var(--red) 0 45deg,var(--aqua) 45deg 90deg,var(--yellow) 90deg 135deg,var(--red) 135deg 180deg,var(--aqua) 180deg 225deg,var(--red) 225deg 270deg,var(--aqua) 270deg 315deg,var(--yellow) 315deg 360deg)}.segment{position:absolute;left:50%;top:50%;height:49%;width:12.5%;transform-origin:50% 100%;display:flex;flex-direction:column;align-items:center;justify-content:flex-start;padding-top:6%;color:white;pointer-events:none}.segment-badge{width:clamp(33px,6.7vw,48px);height:clamp(33px,6.7vw,48px);border-radius:50%;display:grid;place-items:center;background:#fff;color:var(--ink);font-size:clamp(19px,3.4vw,28px);box-shadow:0 1px #ffffff99}.segment-label{font-family:'Baloo 2',cursive;font-weight:800;font-size:clamp(8px,1.65vw,13px);line-height:.95;letter-spacing:-.3px;margin-top:5px;width:80px;text-align:center;text-shadow:0 1px #00000012}.wheel-center{position:absolute;z-index:2;width:31%;aspect-ratio:1;border-radius:50%;background:white;left:34.5%;top:34.5%;display:flex;flex-direction:column;align-items:center;justify-content:center;border:4px solid #fff;box-shadow:0 2px 7px #28343c27}.center-icon{color:var(--red);font-size:clamp(34px,7.5vw,55px);line-height:.8}.tap-label{font-size:clamp(7px,1.35vw,10px);font-weight:900;letter-spacing:.7px;line-height:1.05;margin-top:5px}.wheel.spinning{pointer-events:none}.wheel.spinning .tap-label{opacity:.2}
.result-card{width:min(92%,530px);min-height:86px;margin:17px auto 15px;border:1.5px solid #e9eceb;border-radius:17px;padding:13px 15px;display:flex;align-items:center;text-align:left;gap:12px;background:#fff;box-shadow:0 7px 22px #273c3c0b;transition:.3s}.result-card.winner{border-color:var(--red);animation:arrive .6s ease}.result-icon{width:51px;height:51px;flex:0 0 51px;border-radius:50%;display:grid;place-items:center;background:#fff0f2;color:var(--red);font-size:27px}.result-kicker{font-size:9px;letter-spacing:1.4px;font-weight:900;color:var(--red);margin:0 0 1px}.result-card h2{font-family:'Baloo 2';letter-spacing:-.3px;font-size:18px;line-height:1;margin:0}.result-card p:last-child{font-size:11px;line-height:1.2;margin:4px 0 0;color:#74797d;font-weight:700}.sound-hint{font-size:11px;font-weight:800;color:#92989a;margin:0 0 20px}.sound-dot{display:inline-block;width:8px;height:8px;border-radius:50%;background:#6ec6a5;margin-right:5px}.sound-dot.off{background:#c9cdcc}.pedestal{width:75%;margin:5px auto -20px;height:170px;background:var(--aqua);clip-path:polygon(12% 0,88% 0,100% 100%,0 100%);position:relative;z-index:0}.pedestal::after{content:'';position:absolute;height:13px;background:var(--ink);bottom:0;left:-13%;right:-13%}.pedestal-logo{position:absolute;top:41%;font-family:'Baloo 2';font-size:clamp(13px,2.6vw,19px);font-weight:900;line-height:.76;text-align:left;transform:rotate(-8deg)}.pedestal-logo::before{content:'';position:absolute;border:5px repeating-radial-gradient(circle,#ffca10 0 1px,transparent 2px 4px);inset:-17px -14px;border-radius:46%;z-index:-1}.pedestal-logo.yellow{left:22%;color:var(--red)}.pedestal-logo.coral{right:21%;color:var(--red);transform:rotate(8deg)}.pedestal-logo.coral::before{border-color:var(--red)}
.settings{position:absolute;z-index:10;inset:0;background:#1d24297d;display:flex;align-items:flex-end;opacity:0;visibility:hidden;transition:.25s}.settings.open{opacity:1;visibility:visible}.settings-panel{background:#fff;width:100%;max-height:91svh;overflow:auto;padding:25px 25px 28px;border-radius:26px 26px 0 0;transform:translateY(100%);transition:transform .35s cubic-bezier(.2,.8,.2,1)}.settings.open .settings-panel{transform:none}.settings-heading{display:flex;justify-content:space-between;align-items:flex-start;margin-bottom:22px}.settings-heading h2{font-family:'Baloo 2';font-size:30px;letter-spacing:-1px;margin:0;line-height:1}.settings-heading .eyebrow{margin-bottom:2px}.close-button{font-size:32px;line-height:1;background:#f4f5f3}.setting-group{margin-bottom:20px}.setting-group>p,.items-title p{font-size:10px;font-weight:900;letter-spacing:1.5px;margin:0 0 10px;color:#737a7a}.copy-settings{display:grid;grid-template-columns:1fr 1fr;gap:8px}.copy-settings>p{grid-column:1/-1;margin:0}.copy-settings label{font-size:10px;font-weight:900;color:#737a7a}.copy-settings input,.item-row input{width:100%;border:1px solid #e3e7e5;background:#f7f8f6;border-radius:9px;margin-top:4px;padding:9px;font:700 12px Nunito;color:var(--ink);outline-color:var(--red)}.items-title{display:flex;align-items:center;justify-content:space-between}.items-title p{margin:0}.items-title span{font-size:10px;font-weight:900;color:var(--red)}.items-editor{display:grid;gap:6px;max-height:174px;overflow:auto;padding-right:2px}.item-row{display:grid;grid-template-columns:28px 1fr 31px;align-items:center;gap:7px}.item-row span{font-size:16px;text-align:center}.item-row input{margin:0}.remove-item{border:0;background:#fff0f2;color:var(--red);border-radius:8px;height:31px;font-size:20px;line-height:1}.add-item{margin-top:8px;border:1px dashed #a8b1af;border-radius:9px;width:100%;padding:8px;background:#fff;color:#4c5957;font-size:12px;font-weight:900}.add-item:disabled{opacity:.45;cursor:not-allowed}.theme-list,.icon-list{display:flex;gap:9px}.theme-choice{border:2px solid transparent;background:#f4f6f4;border-radius:12px;width:53px;height:43px;padding:5px;display:flex;gap:2px;align-items:stretch}.theme-choice.active{border-color:var(--ink)}.theme-choice i{display:block;flex:1;border-radius:6px}.icon-choice{border:2px solid transparent;width:43px;height:43px;border-radius:50%;background:#f4f6f4;color:var(--ink);font-size:23px;display:grid;place-items:center}.icon-choice.active{background:#fff0f2;border-color:var(--red);color:var(--red)}.sound-control{border-top:1px solid #edf0ef;border-bottom:1px solid #edf0ef;padding:15px 0;display:flex;align-items:center;justify-content:space-between;cursor:pointer}.sound-control strong{display:block;font-size:14px}.sound-control small{display:block;color:#82888a;font-weight:700;font-size:11px;margin-top:1px}.sound-control input{display:none}.sound-control i{width:43px;height:25px;background:#cdd2d0;border-radius:20px;position:relative;transition:.2s}.sound-control i::after{content:'';position:absolute;width:19px;height:19px;border-radius:50%;background:#fff;top:3px;left:3px;transition:.2s;box-shadow:0 1px 3px #0002}.sound-control input:checked+i{background:var(--red)}.sound-control input:checked+i::after{left:21px}.done-button{margin-top:21px;width:100%;border:0;border-radius:12px;background:var(--ink);color:#fff;padding:14px;font-weight:900;font-size:14px}@keyframes arrive{50%{transform:scale(1.025);box-shadow:0 9px 25px #ee244034}}@media (min-width:721px){.app-shell{min-height:100vh}.pedestal{height:180px}}@media (max-height:760px){.topbar{height:60px;padding-block:11px}.wheel-wrap{margin-top:13px;width:min(70vw,400px)}.game-stage{padding-top:2px}.pedestal{height:100px}.result-card{margin-block:8px}.sound-hint{margin-bottom:8px}}

/* SVG wheel: each item owns a true outer arc, so labels follow the sector. */
.wheel{border:0;background:transparent;overflow:visible}.wheel svg{display:block;width:100%;height:100%;overflow:visible}.wheel-sector{stroke:none}.wheel-rim{fill:none;stroke:#fff;stroke-width:5px}.wheel-badge{fill:#fff;filter:drop-shadow(0 2px 3px #1a303326)}.wheel-badge-icon{fill:var(--ink);font-family:'Baloo 2',sans-serif;font-weight:800;text-anchor:middle;dominant-baseline:central}.wheel-label{fill:#fff;font-family:'Baloo 2',sans-serif;font-weight:800;letter-spacing:.2px;text-shadow:0 1px 1px #0002}.wheel-center-disc{fill:#fff;stroke:#fff;stroke-width:5px;filter:drop-shadow(0 2px 7px #28343c27)}.wheel .center-icon{fill:var(--red);font-family:'Baloo 2',sans-serif;font-weight:800;font-size:70px;text-anchor:middle;dominant-baseline:central}.spin-label{fill:var(--ink);font-family:Nunito,sans-serif;font-size:10px;font-weight:900;letter-spacing:1.5px;text-anchor:middle}.wheel.spinning .spin-label{opacity:.2}.pedestal{width:78%;height:auto;display:block;margin:0 auto -15px;background:none;clip-path:none;overflow:visible}.pedestal-body{fill:var(--aqua)}.pedestal-foot{fill:var(--ink)}.pedestal-mark path{fill:none;stroke-width:8px;stroke-dasharray:2 4px;stroke-linecap:round}.pedestal-mark text{fill:var(--red);font:900 16px/1 'Baloo 2',sans-serif;text-anchor:middle}.mark-yellow path{stroke:var(--yellow)}.mark-coral path{stroke:var(--red)}
.wheel{border:0;background:transparent;overflow:visible}.wheel svg{display:block;width:100%;height:100%;overflow:visible}.wheel-sector{stroke:none}.wheel-rim{fill:none;stroke:#fff;stroke-width:5px}.wheel-badge{fill:#fff;filter:drop-shadow(0 2px 3px #1a303326)}.wheel-badge-image{pointer-events:none}.wheel-label{fill:#fff;font-family:Fredoka,'Baloo 2',sans-serif;font-weight:700;letter-spacing:.2px;paint-order:stroke;stroke:#0002;stroke-width:1px}.wheel-label-dark{fill:var(--ink);stroke:none}.wheel-center-disc{fill:#fff;stroke:#fff;stroke-width:5px;filter:drop-shadow(0 2px 7px #28343c27)}.wheel .center-icon{fill:var(--red);font-family:'Baloo 2',sans-serif;font-weight:800;font-size:70px;text-anchor:middle;dominant-baseline:central}.spin-label{fill:var(--ink);font-family:Nunito,sans-serif;font-size:10px;font-weight:900;letter-spacing:1.5px;text-anchor:middle}.wheel.spinning .spin-label{opacity:.2}.pedestal{width:78%;height:auto;display:block;margin:-96px auto -15px;background:none;clip-path:none;overflow:visible;position:relative;z-index:0}.pedestal-body{fill:var(--aqua)}.pedestal-foot{fill:var(--ink)}.pedestal-mark path{fill:none;stroke-width:9px;stroke-dasharray:2 4px;stroke-linecap:round}.pedestal-mark text{fill:var(--red);font:900 18px/1 Fredoka,'Baloo 2',sans-serif;text-anchor:middle}.mark-yellow path{stroke:var(--yellow)}.mark-coral path{stroke:var(--red)}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}