@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&family=Noto+Sans+TC:wght@400;500;600;700&display=swap');
:root{color-scheme:dark;--bg:#0c1417;--panel:#172426;--line:rgba(216,240,224,.13);--muted:#9aaba6;--cream:#ecf4e9;--lime:#d8ef9d;--mint:#a7d4bd}*{box-sizing:border-box}body{margin:0;background:radial-gradient(ellipse at 13% -15%,#28453c 0,transparent 38%),radial-gradient(ellipse at 100% 55%,#23392e 0,transparent 33%),#0c1417;color:var(--cream);font-family:'DM Sans','Microsoft YaHei Light','Microsoft YaHei','Noto Sans TC',sans-serif;font-weight:400}button,select,textarea{font:inherit}button{cursor:pointer}.shell{max-width:1510px;margin:auto;padding:0 54px}.topbar{height:79px;border-bottom:1px solid var(--line);display:flex;justify-content:space-between;align-items:center}.brand{display:flex;align-items:center;gap:12px;color:#e4f3e2;text-decoration:none;font-size:12px;letter-spacing:.2em;font-weight:700}.brand i{color:#819e86;font-style:normal}.brand-icon{width:34px;height:34px;border:1px solid #8db899;border-radius:11px;display:grid;place-items:center;font-size:19px;color:var(--lime)}.top-note{font-size:12px;letter-spacing:.1em;color:var(--muted)}.live-dot,.status-dot{display:inline-block;width:7px;height:7px;background:#b7e99f;border-radius:50%;margin-right:9px;box-shadow:0 0 12px #a2e3a5}.intro{display:flex;align-items:end;justify-content:space-between;padding:44px 0 32px}.eyebrow,.section-kicker{margin:0;color:#b3c7aa;font-size:10px;font-weight:700;letter-spacing:.2em}.eyebrow span{color:var(--lime);margin-left:8px}h1{font-size:clamp(34px,4vw,48px);font-weight:500;letter-spacing:.035em;margin:12px 0 9px}h1 span{color:var(--lime)}.subtitle{color:#a7b8b2;margin:0;font-size:15px}.intro-side{display:flex;flex-direction:column;gap:7px;text-align:right;color:#819790;font-size:11px;letter-spacing:.13em}.intro-side b{color:#d4ecb4;margin:0 7px;font-size:10px}.layout{display:grid;grid-template-columns:minmax(0,1fr) 360px;gap:20px;align-items:stretch}.track-card,.panel,.stats{background:linear-gradient(145deg,rgba(30,46,43,.93),rgba(19,29,30,.96));border:1px solid var(--line);border-radius:20px;box-shadow:0 16px 50px rgba(0,0,0,.14)}.track-card{padding:24px 25px 20px}.track-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:18px}.track-head h2,.panel h2{font-size:19px;font-weight:600;margin:8px 0 0}.track-status{font-size:12px;color:#b5c9bc;border:1px solid rgba(198,228,195,.16);border-radius:999px;padding:9px 13px}.canvas-wrap{position:relative;border-radius:13px;overflow:hidden;background:#304e37}canvas{display:block;width:100%;aspect-ratio:1040/570}.track-overlay{position:absolute;left:17px;bottom:15px;display:flex;gap:16px;background:rgba(11,24,19,.74);backdrop-filter:blur(10px);border:1px solid rgba(255,255,255,.1);border-radius:100px;padding:9px 13px;font-size:11px}.track-overlay span:first-child{color:#a8dafa}.track-overlay span:last-child{color:#ffc8aa}.track-bottom{display:flex;justify-content:space-between;color:#81968d;font-size:11px;margin-top:17px}.stats{margin-top:16px;display:grid;grid-template-columns:repeat(4,1fr);padding:22px 6px}.stats>div{padding:0 20px;border-right:1px solid var(--line)}.stats>div:last-child{border:0}.stats small{display:block;font-size:11px;color:var(--muted);margin-bottom:9px}.stats strong{font-size:24px;font-weight:500}.stats em{font-size:11px;color:#92a89c;font-style:normal;font-weight:400;margin-left:4px}.panel{padding:28px;display:flex;flex-direction:column}.panel-heading{padding-bottom:23px;border-bottom:1px solid var(--line);margin-bottom:22px}.panel-heading h2{font-size:22px;margin-top:10px}.panel-heading p:last-child{font-size:12px;line-height:1.7;color:#99ada4;margin:10px 0 0}.field{margin-bottom:20px}.field label,.input-label{display:block;font-size:12px;color:#d2e1d4;margin-bottom:10px;font-weight:600}.choice-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px}.choice{border:1px solid var(--line);background:#152120;color:#e8f0e6;text-align:left;border-radius:12px;padding:12px 9px;display:flex;gap:9px;align-items:center;transition:.2s}.choice:hover,.choice.selected{border-color:#c9e99c;background:#293b2b}.choice b,.choice small{display:block}.choice b{font-size:13px}.choice small{font-size:9px;color:#98ada2;margin-top:4px;line-height:1.3}.choice-icon{display:grid;place-items:center;border-radius:9px;width:29px;height:29px;flex:none}.blue{background:#324b52;color:#a6e0fb}.peach{background:#5a4238;color:#ffc09e}select,textarea{width:100%;color:#e6f1e5;border:1px solid rgba(216,240,224,.15);background:#101c1b;border-radius:10px;outline:none}select{padding:12px 13px;font-size:13px}select:focus,textarea:focus{border-color:#c9e99c;box-shadow:0 0 0 3px #c9e99c1a}.field-note{display:block;color:#82958d;margin-top:8px;font-size:11px}.primary,.secondary{border:0;border-radius:11px;padding:14px 16px;font-size:13px;font-weight:700}.primary{background:var(--lime);color:#1a2c1a;display:flex;justify-content:space-between;align-items:center}.primary:hover{background:#e6f8b4}.primary span{font-size:18px}.hint{font-size:11px;line-height:1.7;color:#889d92;margin:15px 0 0}.hint b{color:#c4daac}.hidden{display:none!important}.article-label{display:flex;justify-content:space-between;font-size:11px;color:#9eb2a6;margin-bottom:11px}.article-text{height:156px;overflow:auto;padding:15px;background:#101c1b;border:1px solid var(--line);border-radius:11px;color:#91a39a;font-size:15px;line-height:2;letter-spacing:.03em;overflow-wrap:anywhere}.article-text .done{color:#d5edaa}.article-text .current{color:#fff;background:#698f69;border-radius:3px;box-shadow:0 0 0 2px #698f69}.input-label{margin-top:20px}textarea{resize:vertical;min-height:88px;padding:13px;font-size:14px;line-height:1.6}textarea::placeholder{color:#71877e}.typing-feedback{min-height:25px;font-size:11px;color:#a6bea7;margin:9px 0}.typing-feedback.error{color:#ffad99}.game-actions{display:flex;gap:8px;margin-top:4px}.secondary{background:#263b32;color:#d8ead9;border:1px solid var(--line)}.game-actions button{flex:1}.rule-card{margin-top:auto;padding:17px 14px;border-radius:12px;background:#293b2e;display:flex;gap:11px;color:#d0e6c3;font-size:11px;line-height:1.6}.rule-card span{color:var(--lime)}.rule-card p{margin:0}footer{display:flex;justify-content:space-between;padding:28px 0 36px;color:#718780;font-size:10px;letter-spacing:.06em}.result{position:fixed;inset:0;z-index:5;display:grid;place-items:center;padding:20px;background:rgba(3,9,8,.76);backdrop-filter:blur(8px)}.result-card{max-width:420px;width:100%;padding:36px;background:#1b2c27;border:1px solid #59725b;border-radius:22px;text-align:center;box-shadow:0 25px 80px #0008}.result-icon{display:grid;place-items:center;width:58px;height:58px;margin:0 auto 20px;border-radius:18px;background:#d8ef9d;color:#233923;font-size:24px}.result-card h2{font-size:30px;margin:12px 0}.result-card>p:not(.section-kicker){font-size:13px;line-height:1.7;color:#abc1b3}.result-stats{padding:17px;margin:20px 0;background:#14221e;border-radius:12px;font-size:13px;color:#cfe1d2}.result-actions{display:flex;gap:10px}.result-actions button{flex:1;justify-content:center}button:focus-visible{outline:3px solid #ecffbf;outline-offset:3px}@media(max-width:950px){.shell{padding:0 25px}.layout{grid-template-columns:1fr}.panel{max-width:none}.choice-grid{grid-template-columns:repeat(2,1fr)}.intro{padding-top:35px}.stats{margin-bottom:0}.rule-card{margin-top:18px}}@media(max-width:520px){.shell{padding:0 16px}.topbar{height:65px}.top-note{font-size:10px}.intro{padding:28px 0 24px}.intro-side{display:none}.track-card{padding:17px 14px}.track-head h2{font-size:17px}.track-status{font-size:10px}.track-bottom{font-size:9px}.stats{grid-template-columns:repeat(2,1fr);row-gap:20px}.stats>div:nth-child(2){border:0}.stats strong{font-size:21px}.panel{padding:22px}.track-overlay{font-size:9px;left:8px;bottom:8px;padding:6px 9px}footer span:last-child{display:none}}

/* During play, the stage fills the page and the article lives inside it. */
.is-playing .layout{display:block}.is-playing .track-card{padding:15px}.is-playing .track-head{margin-bottom:10px}.is-playing .canvas-wrap{min-height:0}.is-playing .track-overlay{bottom:auto;top:12px;z-index:1}.is-playing .track-bottom{margin-top:9px}.is-playing .stats{margin-top:10px;padding:12px 6px}.is-playing .stats small{margin-bottom:3px}.is-playing .stats strong{font-size:19px}.canvas-wrap canvas{image-rendering:pixelated}.play-overlay{position:absolute;left:16px;right:16px;bottom:16px;background:rgba(8,17,19,.92);border:1px solid rgba(209,240,215,.25);border-radius:12px;padding:10px 14px;box-shadow:0 8px 28px #0008}.play-top{display:flex;gap:12px;align-items:center;color:#c8d9cd;font-size:11px}.play-top #count{margin-left:auto;white-space:nowrap}.article-text{height:auto;overflow-x:auto;overflow-y:hidden;white-space:pre;overflow-wrap:normal;padding:8px 2px;margin:4px 0;background:transparent;border:0;border-radius:0;font-family:Consolas,monospace;font-size:clamp(16px,2vw,22px);line-height:1.45;scrollbar-width:none}.article-text::-webkit-scrollbar{display:none}.article-text .done{color:#bde788}.article-text .current{color:#142015;background:#d8ef9d;box-shadow:none;border-radius:2px}.typing-row{display:flex;gap:7px}.typing-row input{flex:1;min-width:0;color:#f0f8ed;background:#101c1b;border:1px solid #5b7865;border-radius:8px;padding:8px 10px;outline:none;font:14px Consolas,monospace}.typing-row input:focus{border-color:#d8ef9d}.typing-row button{padding:8px 12px;font-size:11px}.typing-feedback{min-height:0;margin:5px 0 0;font-size:10px}.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}@media(max-width:700px){.is-playing .shell{padding:0 8px}.is-playing .intro{padding:12px 0}.is-playing .intro h1{font-size:25px;margin:4px 0}.is-playing .subtitle,.is-playing .intro .eyebrow,.is-playing .track-head,.is-playing .track-bottom,.is-playing footer,.is-playing .track-overlay,.is-playing .topbar{display:none}.is-playing .track-card{padding:5px}.is-playing .canvas-wrap{padding-bottom:140px}.is-playing .play-overlay{left:5px;right:5px;bottom:5px;padding:8px}.play-top #play-goal{display:none}.article-text{font-size:17px}.is-playing .stats{grid-template-columns:repeat(4,1fr);row-gap:0;padding:10px 0}.is-playing .stats>div{padding:0 5px}.is-playing .stats small{font-size:9px}.is-playing .stats strong{font-size:15px}.is-playing .stats em{font-size:9px}}

/* Match the other Yume service pages: neutral, translucent glass UI. */
@font-face{font-family:YumeLight;src:local("Microsoft YaHei Light"),local("Microsoft YaHei UI Light"),local("微软雅黑 Light");font-weight:300;font-display:swap}
:root{--bg:#090909;--panel:#151515;--line:rgba(255,255,255,.18);--muted:#c8c8c8;--cream:#f4f4f4;--lime:#f5f5f5;--mint:#d0d0d0}
body{position:relative;isolation:isolate;background:#090909;color:#f4f4f4;font-family:YumeLight,"Microsoft YaHei Light","Microsoft YaHei","Noto Sans TC",sans-serif;font-weight:300}
body::before{content:"";position:fixed;inset:0;z-index:-1;pointer-events:none;background:linear-gradient(rgba(0,0,0,.70),rgba(0,0,0,.76)),url("https://acgpicture.yumenashyi.com/random?orientation=landscape") center/cover no-repeat;background-color:#090909}
@media(orientation:portrait){body::before{background-image:linear-gradient(rgba(0,0,0,.70),rgba(0,0,0,.76)),url("https://acgpicture.yumenashyi.com/random?orientation=portrait")}}
.brand,.brand i,.brand-icon,.eyebrow,.section-kicker,.eyebrow span,h1 span,.intro-side b,.track-status,.field label,.input-label,.hint b,.rule-card,.rule-card span,.track-overlay span:first-child,.track-overlay span:last-child{color:#f2f2f2}
.brand-icon{border-color:#ffffff66}.top-note,.subtitle,.intro-side,.track-bottom,.stats small,.stats em,.panel-heading p:last-child,.field-note,.hint,.article-label,.typing-feedback,footer{color:#c3c3c3}
.live-dot,.status-dot{background:#ededed;box-shadow:0 0 10px #ffffff88}
.track-card,.panel,.stats{background:rgba(0,0,0,.48);border:1px solid #ffffff30;backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);box-shadow:0 12px 40px #0003}
.track-status{border-color:#ffffff35}.canvas-wrap{background:#171717}.track-overlay{background:rgba(0,0,0,.72);border-color:#ffffff33}
.choice{background:#0007;border-color:#ffffff30;color:#f0f0f0}.choice:hover,.choice.selected{background:#ffffff24;border-color:#ffffffa0}.choice small{color:#c2c2c2}.choice-icon,.blue,.peach{background:#ffffff18;color:#f2f2f2}
select,textarea,.typing-row input{color:#f2f2f2;background:rgba(0,0,0,.72);border-color:#ffffff40}
select:focus,textarea:focus,.typing-row input:focus{border-color:#ffffffad;box-shadow:0 0 0 3px #ffffff20}
textarea::placeholder,.typing-row input::placeholder{color:#ababab}.primary{background:#ededed;color:#111}.primary:hover{background:#fff}.secondary{background:#ffffff17;color:#eee;border-color:#ffffff30}.secondary:hover{background:#ffffff28}
.play-overlay{background:rgba(0,0,0,.76);border-color:#ffffff40;backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px)}.play-top{color:#d4d4d4}.article-text{color:#aaa}.article-text .done{color:#fff}.article-text .current{color:#111;background:#eee}.typing-feedback.error{color:#eee}
.rule-card{background:#ffffff12}.result{background:rgba(0,0,0,.8)}.result-card{background:rgba(15,15,15,.9);border-color:#ffffff55;backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px)}.result-icon{background:#ededed;color:#111}.result-card>p:not(.section-kicker){color:#ccc}.result-stats{background:#0008;color:#eee}button:focus-visible{outline-color:#fff}

.fullscreen-button{border:1px solid #ffffff55;background:#ffffff14;color:#eee;border-radius:8px;font-size:11px;padding:6px 9px;white-space:nowrap}.fullscreen-button:hover{background:#ffffff30}
html:fullscreen,html:fullscreen body{width:100%;height:100%;overflow:hidden;background:#090909}
html:fullscreen body.is-playing .shell{height:100%;max-width:none;padding:8px}
html:fullscreen body.is-playing .topbar,html:fullscreen body.is-playing .intro,html:fullscreen body.is-playing footer,html:fullscreen body.is-playing .track-bottom{display:none}
html:fullscreen body.is-playing .layout{height:100%}
html:fullscreen body.is-playing .game-column{height:100%;display:flex;flex-direction:column}
html:fullscreen body.is-playing .track-card{flex:1;min-height:0;display:flex;flex-direction:column;padding:8px}
html:fullscreen body.is-playing .track-head{display:none}
html:fullscreen body.is-playing .canvas-wrap{flex:1;min-height:0;padding:0;background:#111}
html:fullscreen body.is-playing canvas{width:100%;height:100%;aspect-ratio:auto;object-fit:contain}
html:fullscreen body.is-playing .stats{flex:none;margin-top:6px}
@media(max-width:700px){.fullscreen-button{font-size:10px;padding:5px 7px}html:fullscreen body.is-playing .track-overlay{display:none}}