/* Brand palette and typography aligned with h5.tczj31088.com. */
:root{--blue:#0869e9;--ink:#263755;--muted:#697384;--line:#edf0f5;background:#f5f8fe;color:var(--ink);font-family:"Microsoft YaHei","PingFang SC",Arial,sans-serif}
body{background:linear-gradient(130deg,#edf5ff 0%,#f8fbff 42%,#f5f8fe 75%);min-height:100vh}
.topbar{height:70px;background:#fff;border-bottom:1px solid var(--line);padding:0 max(4.1vw,28px);gap:64px}
.brand{color:var(--blue);font-size:24px;font-weight:700;letter-spacing:0;white-space:nowrap}
.brand-logo{width:28px;height:28px;object-fit:contain}.footer-brand{display:flex;align-items:center;gap:8px}.footer-brand img{width:22px;height:22px;object-fit:contain}
.page-nav{height:100%;display:flex;gap:36px;align-items:stretch;margin-right:auto}
.page-nav a{display:flex;align-items:center;position:relative;font-size:16px;text-decoration:none;color:var(--ink);white-space:nowrap}
.page-nav a:hover,.page-nav a[aria-current]{color:var(--blue)}
.page-nav a[aria-current]:after{content:"";position:absolute;bottom:0;left:0;right:0;height:3px;background:var(--blue)}
.online{color:#697384;font-size:14px}.online i,.pill i{background:var(--blue)}
main{max-width:1280px;padding:38px 28px 0}.page-heading{margin-bottom:28px}
.eyebrow{color:var(--blue);letter-spacing:1.5px;font-size:12px}
h1{font-size:36px;color:var(--ink);letter-spacing:0;line-height:1.45;margin:9px 0 10px}
h1 span{font-size:17px;vertical-align:middle;color:#697384;margin-left:22px;font-weight:400;letter-spacing:0}
.page-heading p{color:#697384;font-size:14px;line-height:1.8}
.secondary{border-color:#d8e5f7;border-radius:9px;color:var(--blue);padding:12px 20px;background:#fff;font-size:14px}
button:focus-visible,a:focus-visible{outline-color:var(--blue)}
.workspace{gap:24px;grid-template-columns:minmax(0,1fr) 320px}
.game-card,.settings-card{border:1px solid #e4ebf6;border-radius:12px;box-shadow:0 8px 28px #26375505}
.game-top{padding:20px 24px 0}.pill{background:#edf5ff;color:#0869e9;border-radius:6px;font-size:13px}
.equal-label{color:#77869c;font-size:12px}
.play-scene{background:radial-gradient(ellipse at 36% 55%,#dfedff 0%,#f4f9ff 40%,transparent 69%)}
.wheel-shell{border-color:#a6caff;background:linear-gradient(145deg,#f3f9ff,#bbd8fc);box-shadow:0 8px 0 #87b6ef,0 18px 30px #0869e91a}
.wheel-ring i{background:#fff;box-shadow:0 0 5px #74adf9}
.wheel-hub{background:#fff;border-color:#e9f3ff;box-shadow:0 4px 16px #0869e929;color:var(--blue)}
.wheel-hub small{color:#4f7baa}.finger-target{border-color:#0869e9;background:#fff;box-shadow:0 0 0 5px #0869e91a}
.robot-speech{border-color:#d9e7fa;color:#697384;transform:none;box-shadow:0 5px 14px #0869e908}
.robot-speech strong{color:#0869e9}.character-caption{color:#72839e}.spark{color:#81b5f4}.orbit{border-color:#dce9fa}
.status{color:#5c6e88;font-size:14px}.spin-button{background:#0869e9;border-radius:9px;box-shadow:0 4px 0 #0451bd,0 9px 22px #0869e92b;font-weight:700;letter-spacing:1px}.spin-button>span:first-child{color:#c7e5ff}
.hint{color:#74839b;font-size:12px;line-height:1.7}.tiny-dot{background:#8ab8f1}
.result-strip{background:#f3f7ff;border-top-color:#e5edfa}.result-icon{background:#fff;color:#0869e9;border-color:#dce9fa;border-radius:8px}
.result-label{color:#74849c;font-size:12px}.result-strip strong{color:#263755;font-size:15px}.result-decoration{color:#88a6cd}
.settings-heading h2{color:#263755;font-size:21px}.settings-heading .eyebrow{color:#5386ca;font-size:11px}.settings-symbol{color:#0869e9}
.settings-intro{color:#697384;font-size:13px}.section-label{font-size:14px;color:#263755}.section-label span:last-child{color:#78869b;font-size:12px}
.prize-row{background:#f7f9fd;border-color:#e5ecf6;border-radius:8px;padding:12px 10px}.prize-swatch{color:#24538a}.prize-row input{color:#263755;font-size:14px}.prize-row:focus-within{border-color:#0869e9;box-shadow:0 0 0 2px #0869e914}.delete-prize{color:#7f90a8}
.add-button{border-color:#b7cceb;color:#0869e9;font-size:14px}.config-note{background:#f1f6ff;color:#647b9a;font-size:12px}.apply-button{background:#0869e9;color:#fff;font-size:14px;border-radius:9px}.reset-button{color:#718199;font-size:12px}.settings-footer{background:#f7f9fd;border-color:#e8eef7;color:#7a8ca5;font-size:11px}
footer{color:#8592a7;font-size:12px;border-top:1px solid #e2eaf6;margin-top:28px;padding:22px 0}footer>span:first-child{font-size:15px;color:#0869e9;font-weight:700}footer a{color:#697384;text-decoration:none}footer a:hover{color:#0869e9}
dialog{border-color:#d7e5f9;border-radius:16px;color:#263755;box-shadow:0 30px 100px #10285538}dialog::backdrop{background:#112d515e}.dialog-close{color:#7d8ca3}.dialog-art{color:#0869e9}dialog p{color:#697384}
@keyframes twinkle{to{background:#5da9ff;box-shadow:0 0 10px #0869e9}}
@media(min-width:1500px){main{padding:38px 28px 0}.topbar{padding:0 max(4.1vw,28px)}}
@media(max-width:1100px){.topbar{gap:32px}.workspace{grid-template-columns:minmax(0,1fr) 285px;gap:18px}h1 span{display:block;margin:4px 0 0;font-size:16px}.online{font-size:12px}}
@media(max-width:800px){.topbar{height:60px;padding:0 18px;gap:24px}.brand{font-size:19px}.page-nav{gap:20px}.page-nav a{font-size:14px}.online{display:none}main{padding:25px 18px 0}.workspace{grid-template-columns:1fr}.page-heading{margin-bottom:22px}h1{font-size:29px}h1 span{font-size:15px;margin-top:5px}.page-heading p{font-size:13px;max-width:360px}.secondary{padding:11px 14px}.game-card,.settings-card{border-radius:10px}.hint{font-size:11px}.result-strip strong{font-size:14px}footer{font-size:11px;gap:12px;flex-wrap:wrap}footer p{font-size:11px}.character-caption{font-size:9px}}
@media(max-width:480px){.topbar{gap:16px}.brand{font-size:17px}.page-nav{margin-left:auto;margin-right:0;gap:16px}.page-nav a{font-size:12px}.page-nav a:first-child{display:none}.page-heading{align-items:center;gap:10px}h1{font-size:27px}h1 span{font-size:13px}.page-heading p{font-size:12px;max-width:235px}.page-heading .eyebrow{font-size:10px}.secondary{font-size:12px;padding:10px}.pill{font-size:12px}.status{font-size:13px}.hint{font-size:10px}.result-strip strong{font-size:13px}.result-decoration{display:none}.character-caption{font-size:8px}}
/* Compact play surface: keep the stage proportional so the fingertip stays aligned. */
body{min-height:100svh}
.topbar{height:60px}
main{max-width:1100px;padding:16px 24px 18px}
.page-heading{margin-bottom:14px}
.page-heading .eyebrow,.page-heading p{display:none}
h1{font-size:28px;margin:0;line-height:1.5}
h1 span{display:inline;font-size:14px;margin-left:18px}
.settings-toggle{width:44px;height:44px;min-width:44px;padding:10px;justify-content:center}
.workspace{display:block}
.game-top{padding:12px 20px 0}
.play-scene{width:min(100%,850px,calc((100svh - 430px)*1.8));min-width:280px;aspect-ratio:1.8;margin:8px auto 0}
.game-controls{padding:10px 16px 14px}
.status{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.spin-button{padding:13px 28px;font-size:18px;min-height:52px}
.hint{margin-top:12px;font-size:12px}
.result-strip{padding:10px 20px;min-height:60px}
.result-strip>div{gap:3px}
.result-icon{font-size:20px}
main>footer{display:none}
.settings-dialog{width:min(460px,calc(100vw - 32px));max-height:calc(100svh - 32px);padding:24px 24px 0;text-align:left;overflow:auto;overscroll-behavior:contain;margin:auto}
.settings-dialog:not([open]){display:none}
.settings-dialog .settings-heading{gap:16px}
.settings-dialog .settings-heading h2{font-size:21px;margin:8px 0 0}
.settings-close{border:0;background:#edf5ff;color:#517294;font-size:26px;width:44px;height:44px;border-radius:9px;flex-shrink:0;line-height:1}
.settings-dialog .settings-intro{margin:12px 0 20px;font-size:14px}
.settings-dialog .config-note{margin:14px 0;font-size:12px}
.settings-dialog .config-note p{margin:0;font-size:12px}
.settings-dialog .reset-button{min-height:44px;margin:4px auto 8px}
.settings-dialog .prize-row input{font-size:16px}
.settings-dialog .delete-prize{width:32px;min-height:32px;flex-shrink:0}
.settings-dialog .settings-footer{margin:0 -24px;font-size:11px}
@media(min-width:1500px){main{padding:16px 24px 18px}}
@media(max-width:800px){main{padding:14px 18px 18px}.page-heading{margin-bottom:12px}h1{font-size:26px}h1 span{font-size:13px;margin-left:12px}.play-scene{margin-top:12px}.robot-speech{top:0}.game-controls{padding-top:14px}}
@media(max-width:480px){main{padding:12px}.page-heading{align-items:center}h1{font-size:23px}h1 span{display:block;margin:2px 0 0;font-size:12px}.play-scene{min-width:0;width:100%}.hint{font-size:10px}.robot-speech{top:-3%}.settings-dialog{padding:20px 18px 0}.settings-dialog .settings-footer{margin:0 -18px}}
@media(min-width:600px) and (max-height:700px){.topbar{height:52px}main{padding-top:10px}.page-heading{margin-bottom:8px}h1{font-size:24px}.game-top{padding-top:8px}.pill{padding:6px 10px}.play-scene{width:min(100%,calc((100svh - 400px)*1.8));margin-top:6px}.game-controls{padding:8px 16px 12px}.hint{margin-top:10px}.result-strip{min-height:54px;padding:8px 20px}}

.play-scene{margin-bottom:30px}
.settings-dialog{width:min(520px,calc(100vw - 32px))}.rate-heading{display:flex;justify-content:space-between;padding:0 54px 8px 40px;font-size:12px;color:#697384}.rate-input{display:flex;align-items:center;gap:3px;flex:0 0 100px;border-left:1px solid #dce5f2;padding-left:8px}.settings-dialog .rate-input input{width:72px;padding:5px 0;text-align:right;font-size:15px}.rate-input span{font-size:12px;color:#697384}.rate-total{font-size:13px;text-align:right;color:#0869e9;margin:10px 0 12px}.rate-total.invalid{color:#b45239}@media(max-width:480px){.settings-dialog .prize-row{gap:6px;padding:8px}.rate-input{flex-basis:82px;padding-left:5px}.settings-dialog .rate-input input{width:58px}.settings-dialog .delete-prize{width:26px}.rate-heading{padding-right:40px}}