:root{color-scheme:dark;--bg:#080808;--surface:#161616;--line:#252525;--text:#f6f6f6;--muted:#858585;--orange:#ff9800;--yellow:#ffc400;--green:#85d39b;--red:#ed9696;font-family:Arial,"Microsoft YaHei",sans-serif;background:var(--bg);color:var(--text)}
*{box-sizing:border-box}body{margin:0;min-height:100dvh;background:radial-gradient(ellipse 500px 190px at 50% 0,rgba(126,72,0,.12),transparent 100%)}button,input,textarea{font:inherit}button,a,input{-webkit-tap-highlight-color:transparent}button{cursor:pointer;color:inherit}button:disabled{cursor:default}button:focus-visible,a:focus-visible,input:focus-visible,textarea:focus-visible{outline:2px solid var(--orange);outline-offset:5px}button{border:0}a{color:var(--orange);text-underline-offset:4px}[hidden]{display:none!important}.game-shell{width:min(100%,620px);margin:0 auto;padding:0 24px}.topbar{height:54px;display:grid;grid-template-columns:1fr auto 1fr;align-items:center}.counter{display:flex;align-items:center;gap:8px;background:#161616;border:1px solid #242424;border-radius:30px;padding:8px 12px;font:11px "Courier New",monospace;color:#949494;letter-spacing:.2px}.counter strong{color:var(--orange);font-size:12px;white-space:nowrap}.streak{justify-self:end}.menu-button{justify-self:start;width:34px;height:34px;background:#151515;border:1px solid #303030;border-radius:50%;display:grid;place-items:center}.menu-icon,.menu-icon:before,.menu-icon:after{display:block;width:13px;height:1px;background:#9d9d9d}.menu-icon{position:relative}.menu-icon:before,.menu-icon:after{content:"";position:absolute;left:0}.menu-icon:before{top:-4px}.menu-icon:after{top:4px}
main{padding:20px 0 0}h1{text-align:center;font-size:clamp(35px,7.6vw,60px);letter-spacing:-2.8px;font-weight:800;white-space:nowrap;margin:0 0 27px;line-height:1.15}h1 span{background:var(--orange);color:#050505;border-radius:7px;padding:0 8px 4px;display:inline-block}.difficulty{display:flex;gap:6px;justify-content:center;margin:0 0 25px}.difficulty button{background:#191919;color:#909090;border:1px solid #222;border-radius:30px;font-size:12px;font-weight:700;padding:10px 15px;transition:background .15s,color .15s}.difficulty button:hover{color:#ddd;background:#242424}.difficulty button[aria-pressed=true]{background:var(--yellow);border-color:var(--yellow);color:#201800}.timeline{height:15px;display:flex;gap:3px;margin:0 36px}.segment{height:100%;background:#242424;border-radius:3px;min-width:5px;position:relative;overflow:hidden}.segment.unlocked{background:#3b2a11}.segment.current{background:var(--orange);box-shadow:0 0 13px #ff980038}.segment .segment-fill{height:100%;background:#ffc04b;width:0}.timeline-labels{position:relative;display:flex;justify-content:space-between;margin:7px 36px 0;color:var(--orange);font:10px "Courier New",monospace}.timeline-labels span:last-child{color:#666}.player{position:relative;display:flex;align-items:center;justify-content:center;height:190px;margin-top:19px}.play-button{position:relative;display:grid;place-items:center;flex-shrink:0;width:128px;height:128px;border-radius:50%;background:#ffac2d;color:#080808;border:3px solid #825815;box-shadow:inset 0 0 0 1px #ffc36225;transition:transform .15s,background .15s}.play-button:hover:enabled{background:#ffb945;transform:scale(1.035)}.play-button:active:enabled{transform:scale(.97)}.play-button:disabled{opacity:1}.play-icon{width:0;height:0;border-top:14px solid transparent;border-bottom:14px solid transparent;border-left:22px solid #101010;margin-left:6px}.playing .play-icon{width:23px;height:28px;border:0;border-left:8px solid #101010;border-right:8px solid #101010;margin:0}.loading .play-icon{width:28px;height:28px;border:3px solid #4d330c;border-right-color:transparent;border-radius:50%;margin:0;animation:spin 1s linear infinite}@keyframes spin{to{transform:rotate(360deg)}}#clock{position:absolute;left:calc(50% + 80px);color:var(--orange);font:bold 29px "Courier New",monospace;letter-spacing:-1px}.status{position:absolute;top:0;left:0;right:0;z-index:1;font-size:12px;height:18px;line-height:18px;margin:0;padding:0 8px;text-align:center;color:#aaa;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;pointer-events:none}.status.error{color:var(--red)}.guess-form{display:flex;align-items:flex-start;gap:8px}.search-wrap{position:relative;flex:1;min-width:0}.search-wrap input{height:50px;width:100%;border-radius:13px;background:#151515;border:1px solid #252525;color:#efefef;padding:0 16px 0 44px;font-size:14px}.search-wrap input::placeholder{color:#686868}.search-wrap input:disabled::placeholder{color:#4f4f4f}.search-icon{position:absolute;top:19px;left:19px;width:11px;height:11px;border:1.5px solid #6d6d6d;border-radius:50%;pointer-events:none}.search-icon:after{content:"";position:absolute;width:5px;height:1.5px;background:#6d6d6d;transform:rotate(45deg);right:-4px;bottom:-2px}.skip-button{height:50px;padding:0 20px;display:flex;align-items:center;gap:7px;background:#191919;border:1px solid #252525;border-radius:13px;font-size:14px;font-weight:bold}.skip-button:hover:enabled{background:#252525}.skip-button:disabled{color:#777}.skip-icon{width:12px;height:13px;background:currentColor;clip-path:polygon(0 0,80% 40%,80% 0,100% 0,100% 100%,80% 100%,80% 60%,0 100%)}.suggestions{z-index:5;position:absolute;top:calc(100% + 6px);left:0;right:0;max-height:276px;overflow:auto;border:1px solid #323232;background:#171717;border-radius:12px;padding:5px;box-shadow:0 10px 32px #0008}.suggestion{display:flex;justify-content:space-between;align-items:center;gap:10px;width:100%;text-align:left;padding:13px 10px;border-radius:7px;background:transparent;font-size:13px}.suggestion small{color:#888;font-size:11px}.suggestion[aria-selected=true],.suggestion:hover{background:#2e261a}.no-results{color:#999;font-size:12px;padding:12px}.attempts{list-style:none;padding:0;margin:17px 0 0;display:flex;gap:7px;flex-wrap:wrap}.attempts li{font-size:12px;background:#151515;border:1px solid #242424;border-radius:7px;padding:8px 10px;color:#aaa}.attempts li.hit{color:var(--green);border-color:#34533d}.attempts li.miss{color:var(--red)}.empty-state{text-align:center;margin:20px 0 0;font-size:12px;color:#777}.empty-state p{margin:0 0 8px}.text-button{font-size:12px;padding:0;background:transparent;color:#d99a3e;text-decoration:none}.text-button:hover{text-decoration:underline}.reveal{margin-top:23px;padding:23px 0 0;border-top:1px solid var(--line);text-align:center}.reveal>p:first-child{font-size:12px;color:var(--green);margin:0 0 8px}.reveal.lost>p:first-child{color:var(--red)}.reveal h2{font-size:24px;margin:0}.answer-alt{font-size:13px;color:#999;margin:8px 0 15px}.reveal a{font-size:12px;display:block;margin-bottom:20px}.primary,.secondary{padding:13px 20px;border-radius:10px;font-weight:700;font-size:13px;line-height:1.4}.primary{background:var(--orange);color:#171005}.primary:hover{background:#ffb133}.secondary{background:#232323;border:1px solid #353535;color:#eee}.reveal .primary{min-width:160px}.summary{text-align:center;padding:40px 0 0}.summary-label{color:#999;font:11px "Courier New",monospace;letter-spacing:2px}.summary h2{font-size:66px;color:var(--orange);margin:15px 0 25px}.summary h2 small{font-size:26px;color:#646464}.results{display:grid;gap:8px;text-align:left}.result-row{display:flex;justify-content:space-between;padding:12px 0;border-bottom:1px solid var(--line);font-size:13px}.result-row span:last-child{font-family:"Courier New",monospace;color:var(--orange)}.summary-actions{display:flex;gap:10px;justify-content:center;margin-top:27px}footer{display:flex;justify-content:center;align-items:center;gap:14px;color:#363636;margin:50px 0 30px;font-size:11px}footer button{color:#787878;background:transparent;font-size:11px;padding:8px 0}footer button:hover{color:#ddd}
dialog{width:min(420px,calc(100% - 32px));border:1px solid #343434;border-radius:17px;background:#141414;color:#eee;padding:25px;box-shadow:0 30px 100px #000a}dialog::backdrop{background:#000b;backdrop-filter:blur(4px)}.dialog-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:18px}.dialog-head h2{font-size:22px;margin:0;letter-spacing:-.6px}.close-button{font-size:27px;line-height:1;background:#242424;border-radius:50%;width:30px;height:30px;color:#aaa}dialog p{font-size:13px;line-height:1.8}dialog .muted{color:#8d8d8d}.small{font-size:11px!important}.menu-row{display:flex;justify-content:space-between;width:100%;padding:18px 0;background:transparent;border-bottom:1px solid #292929;text-align:left;font-size:14px}.volume-label{display:flex;justify-content:space-between;font-size:13px;color:#aaa;margin:25px 0 12px}#volume{width:100%;accent-color:var(--orange)}.file-button{display:block;text-align:center;cursor:pointer;margin:12px 0;position:relative}.file-button input{position:absolute;width:1px;height:1px;opacity:0}.file-button:focus-within{outline:2px solid var(--orange);outline-offset:3px}.help-list{padding-left:19px;font-size:13px;color:#ccc;line-height:2.2}.help-list li{padding:0 0 10px 5px}.stats-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:20px;margin:25px 0}.stat strong{display:block;font:700 32px "Courier New",monospace;color:var(--orange);margin-bottom:5px}.stat span{font-size:12px;color:#999}#import-status{color:var(--orange);overflow-wrap:anywhere}
@media(min-width:760px){.game-shell{padding-top:13px}main{padding-top:34px}}
@media(max-width:480px){.game-shell{padding:0 20px}.topbar{height:41px;margin:0 -9px}.counter{font-size:9px;padding:7px 9px}.counter strong{font-size:10px}.menu-button{width:29px;height:29px}main{padding-top:11px}h1{font-size:clamp(31px,9.3vw,43px);letter-spacing:-1.9px;margin-bottom:20px}h1 span{padding:1px 6px 3px;border-radius:5px}.difficulty{gap:5px;margin-bottom:22px}.difficulty button{padding:8px 10px;font-size:10px}.timeline{height:12px;margin:0 24px}.timeline-labels{margin:6px 24px 0;font-size:9px}.player{height:150px;margin-top:13px}.play-button{width:96px;height:96px}.play-icon{border-top-width:11px;border-bottom-width:11px;border-left-width:18px}.playing .play-icon{height:23px;width:19px;border-width:0 6px}#clock{left:calc(50% + 62px);font-size:24px}.status{font-size:11px;height:16px;line-height:16px;margin:0}.search-wrap input{height:44px;font-size:12px;padding-left:36px}.search-icon{left:15px;top:16px;width:10px;height:10px}.skip-button{height:44px;padding:0 16px;font-size:12px}.empty-state{font-size:11px}footer{margin-top:35px}}
/* Keep the main game controls visible without a settings menu. */
.game-shell{min-height:100dvh;display:flex;flex-direction:column}.topbar{grid-template-columns:1fr;flex-shrink:0}.counter{justify-self:center}
.volume-control{display:flex;align-items:center;gap:12px;width:min(100%,240px);margin:0 auto 20px;color:#858585;font-size:11px}
.volume-control label{flex-shrink:0}.volume-control #volume{flex:1;min-width:0;width:auto;height:24px;margin:0;cursor:pointer}.volume-control output{min-width:4ch;text-align:right;font-variant-numeric:tabular-nums}
footer strong{color:#9a9a9a;font-family:"Courier New",monospace;letter-spacing:.5px}footer button:hover strong{color:#eee}footer button.copied strong{color:var(--orange)}footer button.copied:after{content:"已复制";margin-left:8px;color:var(--orange)}
.game-actions{display:flex;justify-content:center;align-items:center;gap:8px;margin:0 0 12px}.game-actions .skip-button{justify-content:center;min-width:80px}
/* Center the play button and its clock as one group, like the reference. */
.play-button{left:-34px}#clock{left:calc(50% + 46px)}
@media(max-width:480px){.play-button{left:-24px}#clock{left:calc(50% + 38px)}}
@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation:none!important;transition:none!important}}

/* Footer credit sits under the QQ group, and the share card dialog. */
footer{flex-direction:column;gap:7px;color:#fff;font-size:12px}
footer button,footer button:hover,footer strong,footer button:hover strong{color:#fff;font-size:12px}
footer .credit{color:#fff;font-size:12px;text-decoration:none;padding:2px 0}
footer .credit:hover{color:#fff;text-decoration:underline}
.share-dialog{width:min(430px,calc(100% - 24px))}
.share-card-wrap{margin:0 0 14px;background:#0b0b0b;border-radius:14px}
.share-card-wrap canvas,.share-card-wrap img{display:block;width:100%;height:auto;border-radius:14px}
.share-actions{display:flex;flex-wrap:wrap;gap:8px}
.share-actions button{flex:1 1 calc(50% - 4px);min-width:110px}
.share-dialog #share-tip{margin:0 0 12px}
#bug-form{display:grid;gap:12px}
#bug-form label{font-size:13px}
#bug-form select,#bug-form textarea{width:100%;min-width:0;background:#202020;color:#fff;border:1px solid #444;border-radius:8px;padding:12px;font:inherit;font-size:16px}
#bug-form textarea{resize:vertical}
#bug-form select:focus-visible{outline:2px solid var(--orange);outline-offset:3px}
#bug-clip{color:#aaa}
#bug-status{margin:0;overflow-wrap:anywhere}
#bug-status:empty{display:none}
#bug-submit:disabled{opacity:.6}
.roster-entry{display:flex;justify-content:center;align-items:center;flex-wrap:wrap;gap:4px 12px;margin:10px 0 0;color:#aaa;font-size:12px}
.roster-entry button{min-height:32px}
.roster-list{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px 20px;list-style:none;margin:0;padding:0;font-size:15px;overflow-wrap:anywhere}
#roster-dialog{max-height:85dvh;overflow:auto}

/* Reveal panel is the tallest state on screen, so the footer is pulled up out of
   its 50px gap there - that is the space the answer and its button need. */
body.revealing footer{margin-top:16px}
footer .credit,footer .credit:hover{text-decoration:underline}