body.wheel-page{--ink:#17234f;--blue:#5369ff;--soft:#eef3ff;--pink:#ff5f92;--yellow:#ffc83d;--line:#d9e2ff;}
*{box-sizing:border-box} body.wheel-page{margin:0;font-family:"Noto Sans TC","Microsoft JhengHei",system-ui,sans-serif;color:var(--ink);background:
radial-gradient(circle at 50% -10%,#fff 0 24%,transparent 48%),linear-gradient(135deg,#f7faff 0%,#edf2ff 50%,#f9fbff 100%);min-height:100vh;overflow-x:hidden}
body.wheel-page:before{content:"";position:fixed;inset:0;pointer-events:none;background-image:radial-gradient(circle,#fff 0 2px,transparent 3px);background-size:58px 58px;opacity:.38}
.wheel-app{max-width:1520px;margin:auto;padding:26px 28px 20px;position:relative}
.pill{border:1.5px solid #cbd5ff;background:#fff;border-radius:18px;padding:14px 22px;font-size:18px;font-weight:800;color:#24305f;box-shadow:0 8px 18px #6f7fc928,inset 0 -3px 0 #dfe5ff;cursor:pointer;transition:.2s}.pill:hover{transform:translateY(-2px)}
.wheel-main{display:grid;grid-template-columns:320px minmax(560px,1fr) 350px;gap:22px;align-items:start}.card{background:rgba(255,255,255,.87);border:1.5px solid #d8e0fa;border-radius:24px;box-shadow:0 14px 30px #6e7eb72c,inset 0 1px 0 #fff;padding:20px;backdrop-filter:blur(10px)}
.card h2{margin:0 0 16px;font-size:24px}.count{float:right;background:#eef0ff;color:#4f5cff;border-radius:999px;padding:7px 12px;font-size:14px}.list{display:flex;flex-direction:column;gap:4px;max-height:410px;overflow:auto}.row{display:grid;grid-template-columns:34px 1fr 28px;align-items:center;padding:9px 8px;border-bottom:1px solid #e6eafb;font-weight:700;background:#fff;border-radius:9px}.num{width:27px;height:27px;border-radius:50%;display:grid;place-items:center;color:#fff;font-size:14px}.del{border:0;background:transparent;font-size:22px;color:#a5abc3;cursor:pointer}.list-actions{display:flex;gap:10px;margin-top:15px}.outline{flex:1;padding:11px;border-radius:14px;background:#fff;border:1.5px solid #6878ff;color:#4659ee;font-weight:800;cursor:pointer}.outline.danger{border-color:#ff8aaf;color:#ff4f86}.quick{margin-top:14px}.quick-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px}.quick button{padding:12px 8px;border-radius:13px;border:1px solid #d8def4;background:#fff;color:#2d375c;font-weight:700;cursor:pointer}
.stage{position:relative;min-height:720px;display:flex;flex-direction:column;align-items:center;justify-content:center;z-index:0}.wheel-shell{position:relative;width:min(610px,72vw);aspect-ratio:1;border-radius:50%;padding:19px;background:linear-gradient(145deg,#9b62ff,#4e47c6);box-shadow:0 18px 0 #5748b8,0 32px 50px #4c5cb64c,inset 0 0 0 5px #bfa6ff}.wheel-shell:before{content:"";position:absolute;inset:7px;border-radius:50%;background:repeating-conic-gradient(from 0deg,#fff 0 2deg,transparent 2deg 18deg);opacity:.35}.bulbs{position:absolute;inset:0;animation:spinLights 7s linear infinite;pointer-events:none}.bulbs i{position:absolute;left:50%;top:50%;width:18px;height:18px;border-radius:50%;background:#fff8b5;box-shadow:0 0 12px #fff,0 0 22px #ffe76c;transform:rotate(calc(var(--i)*30deg)) translateY(-295px)}@keyframes spinLights{to{transform:rotate(360deg)}}
.wheel{width:100%;height:100%;border-radius:50%;position:relative;overflow:hidden;background:conic-gradient(#ffd95a 0 36deg,#ffab72 36deg 72deg,#ef75a7 72deg 108deg,#db6ed1 108deg 144deg,#9f78e9 144deg 180deg,#5c8ce8 180deg 216deg,#54bee2 216deg 252deg,#6fd08b 252deg 288deg,#9bdc65 288deg 324deg,#d6e568 324deg);box-shadow:inset 0 0 0 4px #ffffffaa;transition:transform 8.6s cubic-bezier(.09,.72,.12,1)}.label{position:absolute;left:50%;top:50%;width:42%;height:32px;margin-top:-16px;transform-origin:0 50%;transform:rotate(calc(var(--i)*36deg - 72deg)) translateX(12%);display:flex;align-items:center;justify-content:flex-end;padding-right:18px;font-weight:900;font-size:24px;color:#1e2444;text-shadow:0 1px #fff8}.label span{display:block;transform:rotate(90deg);max-width:120px;text-align:center}.hub{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:178px;height:178px;border-radius:50%;background:linear-gradient(#ffffff,#d7dcff);padding:13px;box-shadow:0 0 0 7px #7054cf,0 9px 20px #313b8150;z-index:5}.hub img{width:100%;height:100%;border-radius:50%;object-fit:cover}.pointer{position:absolute;top:-43px;left:50%;transform:translateX(-50%);z-index:9;width:78px;height:98px;background:linear-gradient(#ff7fa6,#ed3e76);clip-path:polygon(50% 100%,0 43%,10% 12%,50% 0,90% 12%,100% 43%);filter:drop-shadow(0 8px 5px #75295844)}.pointer:after{content:"★";position:absolute;left:22px;top:13px;color:#ffe36e;font-size:35px;text-shadow:0 2px 0 #bd8150}
.base{margin-top:13px;width:min(520px,70vw);height:126px;background:linear-gradient(#6d5de0,#7f72e6);border-radius:38% 38% 25px 25px;box-shadow:0 18px 0 #4e43b3;display:flex;align-items:center;justify-content:center}.spin{width:88%;padding:20px;border:0;border-radius:30px;background:linear-gradient(#ffe36b,#ffbd22);box-shadow:inset 0 -7px 0 #e79810,0 7px 0 #fff,0 14px 20px #a96d2250;color:#4f3100;font-weight:900;font-size:33px;cursor:pointer}.spin small{display:block;font-size:14px;font-weight:700;margin-top:3px}.spin:active{transform:translateY(3px)}
.float{position:absolute;width:96px;filter:drop-shadow(0 14px 12px #6c79b049);animation:float 3.7s ease-in-out infinite}.f1{left:2%;top:20%}.f2{right:1%;top:20%;animation-delay:.4s}.f3{left:1%;top:48%;animation-delay:.8s}.f4{right:0;top:48%;animation-delay:1.2s}.f5{right:12%;top:2%;animation-delay:.7s}.f6{right:8%;top:68%;animation-delay:1.5s}@keyframes float{50%{transform:translateY(-14px) rotate(5deg)}}.jump{position:absolute;left:4%;bottom:2%;width:190px;filter:drop-shadow(0 15px 15px #5269a44c);z-index:-1}
.winner{padding-top:96px;position:relative;text-align:center;min-height:650px;border-color:#ffb79d;box-shadow:0 16px 32px #ff8c6b30}.winner .crown{position:absolute;top:-20px;left:50%;transform:translateX(-50%);width:190px;filter:drop-shadow(0 8px 10px #e0508033)}.ribbon{background:linear-gradient(#ff6f9c,#e83e74);color:white;font-size:28px;font-weight:900;padding:14px;border-radius:15px;box-shadow:inset 0 -5px 0 #c42b5c,0 8px 17px #ef5a873d;margin-bottom:25px}.winner-avatar{width:205px;height:205px;object-fit:cover;border-radius:50%;border:12px solid #f5d7ff;box-shadow:0 10px 26px #dd69a64c}.winner p{font-size:17px;margin-bottom:4px}.winner h3{font-size:48px;color:#ef416f;margin:0 0 14px}.winner-actions{display:flex;gap:12px}.again{flex:1;border:0;border-radius:18px;background:linear-gradient(#ffe366,#ffc32f);padding:14px;font-size:18px;font-weight:900;box-shadow:inset 0 -4px 0 #df9d10;cursor:pointer}.remove{flex:1;border:1px solid #cdd4ed;border-radius:18px;background:#fff;padding:14px;font-size:17px;font-weight:800;cursor:pointer}
.history{margin-top:20px;display:flex;align-items:center;gap:20px;padding:16px 24px}.history h3{margin:0;white-space:nowrap}.chips{display:flex;gap:12px;flex:1;overflow:auto}.chip{min-width:150px;background:#fff;border-radius:999px;padding:10px 16px;box-shadow:0 4px 12px #6673a31e;font-weight:800}.chip small{display:block;color:#8b92a9;font-weight:500;margin-top:2px}
.confetti{position:fixed;inset:0;pointer-events:none;overflow:hidden;z-index:99}.confetti i{position:absolute;width:10px;height:18px;border-radius:3px;animation:fall 1.8s linear forwards}@keyframes fall{from{transform:translateY(-10vh) rotate(0)}to{transform:translateY(110vh) rotate(720deg)}}
@media(max-width:1180px){.wheel-main{grid-template-columns:290px 1fr}.winner{grid-column:1/-1;min-height:auto;padding-top:75px}.winner-avatar{width:170px;height:170px}.stage{min-height:650px}}@media(max-width:800px){.wheel-app{padding:15px}.topbar{align-items:flex-start}.brand h1{font-size:24px}.brand p{font-size:14px}.brand img{width:58px;height:58px}.actions{display:none}.wheel-main{display:flex;flex-direction:column}.stage{order:1;width:100%;min-height:560px}.left{order:2;width:100%}.winner{order:3;width:100%}.wheel-shell{width:min(90vw,520px)}.bulbs i{transform:rotate(calc(var(--i)*30deg)) translateY(calc(-45vw + 18px))}.label{font-size:18px}.hub{width:135px;height:135px}.jump{width:125px}.float{width:65px}.history{flex-direction:column;align-items:stretch}.chips{width:100%}}
.winner-avatar{display:grid;place-items:center;overflow:hidden;background:linear-gradient(135deg,#efe3ff,#e7ecff);margin:0 auto}.winner-avatar img,.winner-avatar svg{width:100%;height:100%;object-fit:cover;display:block}.winner:not(.revealed) .winner-actions,.winner:not(.revealed) #shareResultBtn{display:none}.winner:not(.revealed) .winner-avatar{animation:mysPulse 1.9s ease-in-out infinite}@keyframes mysPulse{50%{transform:scale(1.05)}}.winner h3{transition:.3s}
.modal{position:fixed;inset:0;background:#1c214acc;backdrop-filter:blur(5px);display:none;align-items:center;justify-content:center;z-index:200;padding:20px}.modal.open{display:flex}.modal-panel{background:#fff;border-radius:26px;max-width:470px;width:100%;max-height:86vh;overflow:auto;padding:28px;box-shadow:0 30px 70px #1c214a66}.modal-panel h2{margin:0;font-size:26px}.modal-sub{color:#8b92a9;font-size:15px;margin:4px 0 20px;font-weight:600}.rank-row{display:grid;grid-template-columns:44px 1fr auto;align-items:center;gap:14px;padding:11px 0;border-bottom:1px solid #eef1fb}.rank-badge{width:40px;height:40px;border-radius:50%;display:grid;place-items:center;font-weight:900;color:#fff;font-size:17px;flex-shrink:0}.rank-name{font-weight:800;font-size:17px;color:#1e2444}.rank-bar{height:8px;border-radius:99px;background:#eef1fb;margin-top:7px;overflow:hidden}.rank-bar i{display:block;height:100%;border-radius:99px}.rank-count{font-weight:900;color:#4f5cff;white-space:nowrap;font-variant-numeric:tabular-nums}.modal-empty{text-align:center;color:#9aa0b8;padding:44px 10px;font-weight:700;line-height:1.7}.modal-actions{display:flex;gap:12px;margin-top:22px}.toast{position:fixed;left:50%;bottom:42px;transform:translateX(-50%) translateY(16px);background:#1c214a;color:#fff;padding:14px 26px;border-radius:14px;font-weight:800;opacity:0;transition:.3s;z-index:300;box-shadow:0 12px 30px #1c214a55;pointer-events:none}.toast.show{opacity:1;transform:translateX(-50%) translateY(0)}

/* Homepage-aligned tool shell. */
.wheel-page .wheel-page-heading .crumb-row{margin:0}
.wheel-page .wheel-page-heading .container{width:min(1520px,100%);padding:0 28px}
.wheel-page{--ink:#172033;--blue:#2563eb;--line:#e7edf5;background:#f8fbff}.wheel-page:before{display:none}.wheel-page .wheel-page-heading{padding:30px 0 24px;background:#fff;border-bottom:1px solid var(--line)}.wheel-page .wheel-breadcrumb{display:flex;gap:8px;color:#667085;font-size:14px}.wheel-page .wheel-breadcrumb a{color:#2563eb;text-decoration:none}.wheel-page .wheel-heading-row{display:flex;justify-content:space-between;gap:24px;align-items:end;margin-top:14px}.wheel-page .wheel-kicker{margin:0 0 8px;color:#2563eb;font-size:13px;font-weight:800}.wheel-page .wheel-heading-row h1{margin:0;color:#172033;font-size:36px}.wheel-page .wheel-heading-row p:not(.wheel-kicker){margin:8px 0 0;color:#667085}.wheel-page .wheel-actions{display:flex;flex-wrap:wrap;gap:8px;justify-content:flex-end}.wheel-page .wheel-action{min-height:40px;padding:0 14px;border:1px solid #cdd9ea;border-radius:8px;background:#fff;color:#1d4ed8;font-weight:800;cursor:pointer}.wheel-page .wheel-action:hover{border-color:#2563eb;background:#eff6ff}.wheel-page .wheel-app{max-width:1520px;padding:28px}.wheel-page .wheel-main{grid-template-columns:320px minmax(610px,1fr) 350px;gap:22px}.wheel-page .card{border-color:#dce6f2;border-radius:10px;box-shadow:0 10px 24px rgba(24,60,100,.08)}.wheel-page .wheel-shell{background:linear-gradient(145deg,#60a5fa,#2563eb);box-shadow:0 14px 0 #1d4ed8,0 24px 42px rgba(37,99,235,.26),inset 0 0 0 4px #bfdbfe}.wheel-page .base{background:linear-gradient(#2563eb,#1d4ed8);box-shadow:0 14px 0 #1e40af}.wheel-page .spin{background:linear-gradient(#fcd34d,#f59e0b);box-shadow:inset 0 -7px 0 #d97706,0 7px 0 #fff,0 14px 20px rgba(146,64,14,.25)}.wheel-page .winner{border-color:#fde68a}.wheel-page .ribbon{background:linear-gradient(#2563eb,#1d4ed8);box-shadow:inset 0 -5px 0 #1e40af,0 8px 17px rgba(37,99,235,.2)}.wheel-page .history{border-radius:10px}

/* Keep the source wheel's control columns intact; reflow instead of squeezing. */
@media(max-width:1330px){.wheel-page .wheel-main{grid-template-columns:320px minmax(610px,1fr)}.wheel-page .winner{grid-column:1/-1;min-height:auto;padding-top:75px}.wheel-page .winner-avatar{width:170px;height:170px}.wheel-page .stage{min-height:650px}}
@media(max-width:1008px){.wheel-page .wheel-main{display:flex;flex-direction:column}.wheel-page .stage{order:1;width:100%;min-height:650px}.wheel-page .left{order:2;width:100%}.wheel-page .winner{order:3;width:100%}}
@media(max-width:800px){.wheel-page .wheel-page-heading{padding:22px 0}.wheel-page .wheel-heading-row{align-items:start;flex-direction:column}.wheel-page .wheel-heading-row h1{font-size:30px}.wheel-page .wheel-actions{justify-content:flex-start}.wheel-page .wheel-app{width:min(100% - 24px,1520px);padding:15px}.wheel-page .topbar,.wheel-page .brand,.wheel-page .actions{display:initial}}
@media(prefers-reduced-motion:reduce){.wheel-page *, .wheel-page *:before, .wheel-page *:after{animation-duration:.01ms!important;animation-iteration-count:1!important;scroll-behavior:auto!important;transition-duration:.01ms!important}}

/* Desktop dimensions match toolman-wheel-v2 exactly. */
.wheel-page .wheel-app{width:auto;max-width:1520px;margin:auto;padding:26px 28px 20px}
.wheel-page .wheel-main{width:auto;max-width:none;grid-template-columns:320px minmax(560px,1fr) 350px;gap:22px}
.wheel-page .wheel-shell{width:min(610px,72vw)}
.wheel-page .bulbs i{transform:rotate(calc(var(--i)*30deg)) translateY(-295px)}
@media(max-width:800px){.wheel-page .wheel-shell{width:min(90vw,520px)}.wheel-page .bulbs i{transform:rotate(calc(var(--i)*30deg)) translateY(calc(-45vw + 18px))}}
@media(max-width:800px){.wheel-page .wheel-page-heading .container{width:calc(100% - 24px);padding:0 15px}}