:root{color-scheme:light;--ink:#191712;--paper:#fff3d9;--red:#d82b1d;--yellow:#ffd637;--olive:#555638;--line:3px solid var(--ink);font-family:"Microsoft JhengHei","PingFang TC","Noto Sans TC",sans-serif;font-synthesis:none;color:var(--ink);background:#24211d}
*{box-sizing:border-box}
html,body{margin:0;min-width:280px;height:100%;overscroll-behavior:none}
body{overflow:hidden;-webkit-tap-highlight-color:transparent}
button{font:inherit;color:inherit;cursor:pointer;-webkit-user-select:none;user-select:none;touch-action:manipulation}
button:disabled{cursor:default}
button:focus-visible{outline:4px solid #167cba;outline-offset:3px;z-index:12}
button,img{-webkit-touch-callout:none}
button,[data-marker]{-webkit-user-select:none;user-select:none}
[hidden]{display:none!important}
.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}
.app-shell{position:relative;width:min(100%,480px);height:100vh;height:100dvh;margin:0 auto;background:var(--paper);overflow:hidden;box-shadow:0 0 50px #0007}
.cover-screen{height:100%;display:grid;place-items:center;background:#efe0bd;background-image:repeating-linear-gradient(115deg,transparent 0 10px,#5b382708 10px 11px)}
.cover-frame{position:relative;aspect-ratio:941/1672;width:min(100%,calc(100dvh * .5628));max-height:100%;isolation:isolate;container-type:inline-size}
.cover-image{display:block;width:100%;height:auto;pointer-events:none}
.cover-dialogue{position:absolute;left:81.2%;top:6.45%;width:17%;height:7.3%;margin:0;display:flex;flex-direction:column;justify-content:center;align-items:center;color:var(--ink);font-family:"DFKai-SB","KaiTi","Microsoft JhengHei",serif;font-size:clamp(9px,3.05cqw,15px);font-weight:1000;line-height:1.2;letter-spacing:-.045em;transform:rotate(-7deg);pointer-events:none}
.cover-dialogue span{display:block;white-space:nowrap}
.cover-hotspot{position:absolute;appearance:none;border:0;background:transparent;color:transparent;padding:0;min-height:48px;border-radius:10px;transition:filter .12s,box-shadow .12s}
.cover-hotspot:not(:disabled):active{background:#fff3;transform:scale(.985)}
.cover-hotspot:focus-visible{outline-offset:0}
.fighter{top:63.7%;width:27.5%;height:16.7%;border:3px solid transparent;border-radius:8px}
.fighter-easy{left:6.4%}.fighter-medium{left:36.3%}.fighter-hard{left:65.7%}
.fighter-name{position:absolute;left:4%;bottom:-.2%;width:92%;height:18.2%;display:flex;align-items:center;justify-content:center;color:var(--ink);font-family:"DFKai-SB","KaiTi","Microsoft JhengHei",serif;font-size:clamp(14px,5.6cqw,27px);font-weight:1000;line-height:1;letter-spacing:.02em;-webkit-text-stroke:.25px var(--ink)}
.fighter[aria-pressed="true"]{border-color:var(--yellow);box-shadow:0 0 0 2px var(--ink),inset 0 0 0 2px var(--ink)}
.selection{position:absolute;top:-10px;left:50%;transform:translateX(-50%) rotate(-3deg);min-width:66px;max-width:calc(100% + 8px);padding:3px 5px;border:2px solid var(--ink);background:var(--paper);color:var(--ink);font-size:11px;font-weight:900;white-space:nowrap;line-height:1.1;box-shadow:2px 2px 0 var(--ink)}
.fighter[aria-pressed="true"] .selection{background:var(--yellow)}
.cover-start{left:11.3%;top:81.5%;width:77.2%;height:10.5%;border-radius:34px}
.cover-start:disabled{background:#30241155}
.cover-help{left:31.3%;bottom:.6%;width:37.5%;height:5.4%;border-radius:22px}
.cover-loading{position:absolute;left:50%;top:79%;transform:translate(-50%,-50%);margin:0;background:var(--paper);border:2px solid var(--ink);font-size:12px;font-weight:900;padding:5px 10px;white-space:nowrap;box-shadow:3px 3px 0 var(--ink)}
.cover-sound{position:absolute;left:2.3%;bottom:.6%;min-width:62px;height:48px;padding:4px;border:0;background:none;font-size:11px;font-weight:900;color:var(--ink)}
.cover-sound:before{content:"♪";display:block;font-size:22px;line-height:22px}
.game-screen{position:relative;display:flex;flex-direction:column;height:100%;gap:5px;padding:max(6px,env(safe-area-inset-top)) 9px max(5px,env(safe-area-inset-bottom));background-color:var(--paper);background-image:radial-gradient(#b8884322 .65px,transparent .7px);background-size:5px 5px}
.game-toolbar{flex:0 0 48px;display:flex;align-items:center;gap:4px;position:relative;z-index:2}
.icon-button{width:48px;min-height:48px;padding:0;border:0;background:none;font-size:24px;font-weight:900;line-height:1;display:grid;place-items:center;flex-shrink:0}
.game-toolbar .icon-button{width:48px;height:48px;min-height:48px;position:relative}
.home-button{font-size:36px;transform:translateY(-1px)}
.difficulty-badge{flex:1;white-space:nowrap;font-size:14px;font-weight:900;letter-spacing:.04em}
.toolbar-pause{position:relative;min-width:48px;height:48px;border:2px solid var(--ink);border-radius:4px;background:var(--paper);font-size:12px;font-weight:900;box-shadow:2px 2px 0 var(--ink)}
.sound-toggle{width:48px;min-height:48px;padding:2px;border:0;background:none;font-size:10px;font-weight:900;white-space:nowrap}
.sound-toggle:before{content:"♪";display:block;font-size:21px;line-height:22px}
.game-hud{flex:0 0 41px;display:flex;align-items:center;justify-content:space-between;gap:7px;border-top:3px solid var(--ink);border-bottom:3px solid var(--ink);padding:2px 3px;background:#ffe7b1}
.challenge-count{display:flex;align-items:baseline;gap:7px;white-space:nowrap}
.hud-eyebrow{font-size:10px;font-weight:800}
.challenge-count strong{font-size:20px;font-weight:1000;letter-spacing:-.04em}
.sticks{display:flex;align-items:center;gap:4px;transform:rotate(-7deg)}
.sticks i{display:block;width:7px;height:26px;border:2px solid var(--ink);background:linear-gradient(to top,#cd783c 0 29%,#fff9ea 29% 91%,#e4481d 91%)}
.sticks i.done{background:#443e30;opacity:.27;transform:rotate(12deg) translateY(2px)}
.clock{display:flex;align-items:baseline;gap:2px;color:#9f2017;white-space:nowrap;font-size:10px;font-weight:900}
.clock strong{font-size:27px;font-variant-numeric:tabular-nums;line-height:1}
.scene{position:relative;flex:1 1 auto;min-height:40dvh;border:var(--line);overflow:hidden;isolation:isolate;background:#edb561;box-shadow:3px 3px 0 var(--ink);--caption-height:60px;--reach-x:35%;--reach-y:65%}
.scene-backdrop{position:absolute;inset:0;background:#caa35d url("a-manga/corridor.png") center center/cover no-repeat;z-index:-3}
.scene-backdrop:after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,#b9601715 10%,transparent 30%,#793a1c28 80%,#3e210e66)}
.scene-halftone{position:absolute;inset:0;pointer-events:none;z-index:3;opacity:.25;background:radial-gradient(#331800 1px,transparent 1.2px) 0 0/5px 5px;mask-image:linear-gradient(90deg,#000,transparent 20%,transparent 80%,#000)}
.scene-speed-lines{position:absolute;inset:0;z-index:4;pointer-events:none;opacity:0;background:repeating-conic-gradient(from 3deg at 60% 45%,transparent 0deg 9deg,#28160d88 9.2deg 9.6deg,transparent 9.8deg 18deg);mask-image:radial-gradient(ellipse,transparent 35%,#000 100%)}
.scene[data-phase="side"] .scene-speed-lines,.scene[data-phase="search"] .scene-speed-lines{opacity:.5}
.enemy-art{position:absolute;width:auto;aspect-ratio:4/5;height:calc(100% - var(--caption-height) + 12px);right:-3%;bottom:var(--caption-height);background-image:url("a-manga/enemy-easy.png");background-size:300% 100%;background-repeat:no-repeat;z-index:0;transform-origin:55% 90%;filter:drop-shadow(3px 4px 0 #21130644)}
.enemy-art[data-level="medium"]{background-image:url("a-manga/enemy-medium.png")}
.enemy-art[data-level="hard"]{background-image:url("a-manga/enemy-hard.png")}
.enemy-art[data-pose="back"]{background-position:0% 50%}.enemy-art[data-pose="side"]{background-position:50% 50%}.enemy-art[data-pose="front"]{background-position:100% 50%}
.scene[data-phase="cue"] .enemy-art{animation:shoulder-turn .24s ease-in-out infinite alternate}
.enemy-cue{display:none;position:absolute;right:6%;top:35%;width:54px;height:54px;z-index:2;transform:rotate(-16deg)}
.scene[data-phase="cue"] .enemy-cue{display:block}
.enemy-cue i{position:absolute;background:var(--yellow);border:2px solid var(--ink);width:6px;height:22px;top:0;left:7px;transform:rotate(-27deg)}
.enemy-cue i:nth-child(2){left:24px;top:5px;transform:rotate(8deg)}.enemy-cue i:nth-child(3){left:38px;top:17px;transform:rotate(47deg);height:17px}
.hero-art{position:absolute;left:3%;bottom:calc(var(--caption-height) - 11px);width:auto;aspect-ratio:1/2;height:calc(100% - var(--caption-height) - 5px);background-image:url("a-manga/hero.png");background-size:200% 100%;background-repeat:no-repeat;z-index:1;filter:drop-shadow(3px 2px 0 #1e1b1766)}
.hero-art[data-pose="hidden"]{background-position:0% 50%}.hero-art[data-pose="smoking"]{background-position:100% 50%}
.pocket-markers{position:absolute;left:3%;bottom:calc(var(--caption-height) - 11px);width:auto;aspect-ratio:1/2;height:calc(100% - var(--caption-height) - 5px);z-index:5;pointer-events:none}
.pocket-marker{position:absolute;display:grid;place-items:center;width:24px;height:24px;background:#fff2d5eb;border:2px solid var(--ink);border-radius:50%;font-size:12px;font-weight:1000;box-shadow:1px 2px 0 #16140d80;transform:translate(-50%,-50%)}
.marker-1{left:36%;top:60%}.marker-2{left:57%;top:43%}.marker-3{left:71%;top:60%}.marker-4{left:40%;top:83%}.marker-5{left:65%;top:83%}
.pocket-marker.active{background:var(--yellow);box-shadow:0 0 0 2px var(--paper),2px 3px 0 var(--ink);transform:translate(-50%,-50%) scale(1.12)}
.pocket-marker.target{background:var(--red);color:white;animation:target-pulse .3s ease-in-out infinite alternate;z-index:2}
.reach-hand{position:absolute;left:var(--reach-x);top:var(--reach-y);width:75%;height:29%;z-index:7;pointer-events:none;transform:translate(-8%,-50%);filter:drop-shadow(2px 4px 0 #1a140a66);transform-origin:95% 50%;animation:hand-reach .18s ease-out both}
.reach-hand img{display:block;width:100%;height:100%;object-fit:fill}
.speech-bubble{position:absolute;left:4%;top:3%;max-width:79%;padding:9px 13px 10px;border:3px solid var(--ink);border-radius:46% 39% 42% 36%/41% 34% 42% 40%;background:#fff9e9;z-index:8;transform:rotate(-3deg);box-shadow:3px 3px 0 #271d1455}
.speech-bubble:after{content:"";position:absolute;right:14px;bottom:-11px;width:17px;height:17px;background:#fff9e9;border-right:3px solid var(--ink);border-bottom:3px solid var(--ink);transform:skew(-17deg) rotate(29deg);z-index:-1}
.speech-bubble p{margin:0;font-size:clamp(12px,3.4vw,16px);font-weight:1000;line-height:1.38;letter-spacing:.02em}
.reaction-mark{display:none;position:absolute;top:25%;right:3%;z-index:7;color:var(--yellow);-webkit-text-stroke:2px var(--ink);font-size:53px;font-weight:1000;line-height:1;transform:rotate(16deg)}
.scene[data-phase="side"] .reaction-mark,.scene[data-phase="search"] .reaction-mark{display:block}
.scene-caption{position:absolute;left:0;right:0;bottom:0;z-index:10;background:var(--paper);border-top:3px solid var(--ink);min-height:var(--caption-height)}
.scene-caption strong{display:block;padding:5px 5px 6px;text-align:center;background:var(--olive);color:#fff9e7;font-size:13px;font-weight:900;line-height:1.2}
.scene-caption p{margin:0;padding:4px 7px 5px;font-size:10px;line-height:1.45;font-weight:700}
.scene[data-phase="cue"] .scene-caption strong{background:#8d6114}.scene[data-phase="side"] .scene-caption strong,.scene[data-phase="search"] .scene-caption strong{background:#af2b1d}
.smoke-drawing{position:absolute;left:34%;top:20%;width:38px;height:65px;z-index:3;pointer-events:none}
.smoke-drawing i{position:absolute;width:13px;height:44px;left:6px;bottom:0;border-left:4px solid #fff4d4d9;border-radius:50%;transform:rotate(19deg);opacity:.8}
.smoke-drawing i:nth-child(2){left:19px;bottom:8px;height:27px;transform:rotate(-13deg)}.smoke-drawing i:nth-child(3){left:10px;bottom:32px;height:19px;transform:rotate(-25deg)}
.smoke-drawing.puffing i{animation:smoke-rise .7s ease-out infinite}
.pocket-panel{flex:0 0 auto}
.pocket-heading{display:flex;align-items:center;justify-content:space-between;font-size:11px;font-weight:900;line-height:16px;margin:2px 1px 4px}
.pocket-heading strong{font-size:11px;color:#8c291c}
.pocket-grid{display:grid;grid-template-columns:repeat(6,1fr);gap:4px}
.pocket-grid button{grid-column:span 2;display:flex;align-items:center;justify-content:center;gap:5px;min-height:48px;padding:4px 2px;border:2px solid var(--ink);background:#fff6de;border-radius:4px;font-size:12px;font-weight:900;box-shadow:2px 2px 0 var(--ink)}
.pocket-grid button:nth-child(4),.pocket-grid button:nth-child(5){grid-column:span 3}
.pocket-grid b{display:grid;place-items:center;width:19px;height:19px;background:var(--ink);color:var(--paper);border-radius:50%;font-size:11px;flex-shrink:0}
.pocket-grid button[aria-pressed="true"]{background:var(--yellow);box-shadow:2px 2px 0 var(--ink),inset 0 0 0 1px var(--ink)}
.pocket-grid button:disabled{color:#8b826e;background:#e9d9b8;box-shadow:1px 1px 0 #69604e}
.pocket-grid button[aria-pressed="true"]:disabled{background:#e3c661;color:var(--ink)}
.pocket-grid button:not(:disabled):active{transform:translate(2px,2px);box-shadow:none}
.action-panel{flex:0 0 auto;margin-top:1px}
.action-meta{display:flex;justify-content:space-between;gap:3px;margin:1px 2px 4px;font-size:10px;line-height:13px;white-space:nowrap}
.action-meta strong{font-weight:900}.action-meta span{font-variant-numeric:tabular-nums}
.smoke-button{display:block;width:100%;min-height:54px;border:3px solid var(--ink);border-radius:9px 9px 6px 6px;background:var(--red);background-image:repeating-linear-gradient(-21deg,transparent 0 7px,#711c1115 7px 8px);color:#fff7de;box-shadow:3px 3px 0 var(--ink);font-size:18px;font-weight:1000;text-shadow:1px 2px 0 #79170d;letter-spacing:.02em;touch-action:none;position:relative}
.smoke-button:not(:disabled):active,.smoke-button.holding{background-color:#ad291e;box-shadow:1px 1px 0 var(--ink);transform:translate(2px,2px)}
.smoke-button:disabled{background:#70654e;color:#ece2c9;text-shadow:none}
.puff-track{height:5px;background:#d1bd91;margin:5px 1px 0;border-radius:0 0 2px 2px;overflow:hidden}
.puff-fill{height:100%;width:0;background:#d93020}
.record-label{flex:0 0 auto;margin:0;text-align:center;font-size:9px;color:#605747;line-height:12px}
.game-overlay{position:absolute;inset:0;z-index:30;display:flex;align-items:center;justify-content:center;padding:24px;background:#1c140ba6;backdrop-filter:blur(3px)}
.overlay-card{width:100%;max-width:365px;border:4px solid var(--ink);padding:27px 19px 23px;background:var(--paper);background-image:radial-gradient(#83572025 .8px,transparent .9px);background-size:5px 5px;box-shadow:8px 8px 0 var(--ink);transform:rotate(-1.5deg);text-align:center}
.panel-kicker{font-size:11px;font-weight:1000;letter-spacing:.15em}
.overlay-card h2{margin:13px 0 14px;font-size:28px;font-weight:1000;line-height:1.3;letter-spacing:-.04em}
.overlay-card p{margin:0 0 22px;font-size:14px;font-weight:700;line-height:1.65}
.comic-button{display:block;width:100%;min-height:50px;margin-top:11px;padding:10px 12px;border:3px solid var(--ink);border-radius:5px;font-size:16px;font-weight:1000;box-shadow:3px 3px 0 var(--ink)}
.primary-button{background:var(--red);color:#fff6dc}.secondary-button{background:#ffe08b}
.comic-button:active{transform:translate(2px,2px);box-shadow:1px 1px 0 var(--ink)}
.pause-countdown{display:block;font-size:96px;color:var(--red);line-height:1.2;-webkit-text-stroke:3px var(--ink);text-shadow:4px 4px 0 var(--yellow);font-variant-numeric:tabular-nums}
.result-stamp{width:65px;height:65px;margin:15px auto 10px;display:grid;place-items:center;border:4px solid var(--red);color:var(--red);font-size:43px;font-weight:1000;transform:rotate(-12deg)}
.result-card h2{font-size:25px;margin-top:8px}
.help-dialog{width:min(calc(100% - 30px),420px);max-height:calc(100dvh - 38px);padding:0;border:4px solid var(--ink);color:var(--ink);background:var(--paper);box-shadow:7px 7px 0 var(--ink);overflow:auto;overscroll-behavior:contain}
.help-dialog::backdrop{background:#1c140bbd;backdrop-filter:blur(3px)}
.help-paper{padding:16px 18px 17px;background-image:radial-gradient(#b8884325 .7px,transparent .8px);background-size:5px 5px}
.help-paper header{display:flex;align-items:center;justify-content:space-between;margin-top:-9px;margin-right:-9px}
.close-button{font-size:31px}
.help-paper h2{font-size:25px;line-height:1.35;font-weight:1000;margin:5px 0 19px;letter-spacing:-.05em}
.help-steps{list-style:none;margin:0;padding:0;display:grid;gap:16px}
.help-steps li{display:flex;gap:11px}
.help-steps li>b{display:grid;place-items:center;align-self:flex-start;flex-shrink:0;width:33px;height:33px;background:var(--yellow);border:2px solid var(--ink);font-size:14px;font-weight:1000;box-shadow:2px 2px 0 var(--ink);transform:rotate(-4deg)}
.help-steps h3{font-size:15px;font-weight:1000;margin:0 0 4px;line-height:1.4}
.help-steps p{font-size:12px;font-weight:700;line-height:1.6;margin:0}
.help-footer{border-top:2px solid var(--ink);padding-top:12px;margin:17px 0 0;font-size:10px;line-height:1.7;text-align:center;font-weight:700}
@keyframes shoulder-turn{from{transform:rotate(-1deg) translateX(-1px)}to{transform:rotate(-4deg) translateX(-4px)}}
@keyframes target-pulse{from{box-shadow:0 0 0 2px var(--paper)}to{box-shadow:0 0 0 5px #ffd637;transform:translate(-50%,-50%) scale(1.15)}}
@keyframes hand-reach{from{transform:translate(38%,-55%) rotate(-8deg)}to{transform:translate(-8%,-50%) rotate(0)}}
@keyframes smoke-rise{from{opacity:.75;transform:translateY(5px) rotate(15deg)}to{opacity:.15;transform:translateY(-18px) rotate(-5deg)}}
@media(max-height:690px){.game-screen{gap:4px;padding-top:max(4px,env(safe-area-inset-top));padding-bottom:max(4px,env(safe-area-inset-bottom))}.game-toolbar{flex-basis:29px}.game-hud{flex-basis:37px}.scene{--caption-height:30px;min-height:40dvh}.scene-caption p{display:none}.scene-caption strong{font-size:12px;min-height:27px;padding-top:7px}.speech-bubble{padding:7px 10px 8px}.speech-bubble p{font-size:12px}.record-label{display:none}.pocket-heading{margin-top:1px;margin-bottom:3px;line-height:14px}.action-meta{font-size:9px;margin-bottom:3px;line-height:12px}.smoke-button{min-height:50px;font-size:16px}.puff-track{height:4px;margin-top:4px}.hud-eyebrow{display:none}}
@media(max-width:350px){.game-screen{padding-left:7px;padding-right:7px}.game-hud{gap:4px}.challenge-count strong{font-size:18px}.sticks{gap:3px}.sticks i{height:24px}.pocket-grid button{font-size:11px;gap:4px}.scene-caption strong{font-size:11px}.action-meta{font-size:9px}.selection{font-size:10px;min-width:59px}.help-paper{padding-left:13px;padding-right:13px}}
@media(min-height:850px){.game-screen{gap:7px;padding-left:12px;padding-right:12px}.game-toolbar{flex-basis:36px}.game-hud{flex-basis:48px}.pocket-grid button{min-height:52px}.smoke-button{min-height:60px}.pocket-heading{font-size:12px;margin-bottom:6px}.action-meta{font-size:11px;margin-bottom:6px}.record-label{font-size:10px}}
@media(orientation:landscape) and (max-height:550px){.app-shell{max-width:480px}.game-screen{overflow:hidden}.game-overlay{position:fixed;padding:15px}.overlay-card{max-width:400px;padding:16px}.overlay-card h2{font-size:23px;margin:8px 0}.overlay-card p{font-size:12px;margin-bottom:12px}.comic-button{min-height:45px;margin-top:7px}.pause-countdown{font-size:60px}.cover-frame{width:calc(100dvh * .5628)}}
@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation:none!important;transition:none!important}.scene[data-phase="cue"] .enemy-art{transform:rotate(-4deg) translateX(-3px)}.pocket-marker.target{box-shadow:0 0 0 4px var(--yellow)}}
.game-toolbar{min-height:60px;flex-basis:60px;gap:7px;align-items:center}
.game-brand-button{flex:1;min-width:0;height:60px;display:flex;flex-direction:column;align-items:flex-start;justify-content:center;gap:7px;padding:0 1px;border:0;background:none}
.game-wordmark{display:block;white-space:nowrap;font-family:"DFKai-SB","KaiTi","Microsoft JhengHei",serif;font-size:clamp(20px,5.9vw,28px);font-weight:1000;line-height:1;letter-spacing:-.13em;transform:rotate(-3deg);-webkit-text-stroke:.4px var(--ink);text-shadow:1px 1px 0 var(--paper)}
.game-wordmark em{color:#b42013;font-style:normal;-webkit-text-stroke:.4px #a01b10;margin-right:2px}
.game-brand-button .sticks{gap:6px;transform:none;width:100%;padding-right:5px}
.game-brand-button .sticks i{width:calc((100% - 24px)/5);height:10px;border-radius:2px;border-width:2px;background:linear-gradient(90deg,#edb832 0 26%,#fffaf0 26%);box-shadow:1px 1px 0 #21180e44}
.game-brand-button .sticks i.done{background:#55503e;transform:none;opacity:.3}
.scoreboard{align-self:center;display:flex;flex-direction:column;align-items:flex-end;gap:3px;min-width:79px}
.scoreboard .clock{color:var(--ink);gap:2px;border-bottom:1px solid var(--ink);padding-bottom:2px}
.scoreboard .clock strong{font-size:33px;color:#b12315;font-family:"DFKai-SB","KaiTi",serif;font-style:italic}
.scoreboard #completed-label{font-size:12px;font-weight:1000;line-height:1}
.toolbar-pause{min-width:48px;width:48px;border-radius:9px;background:#fff8e5;font-size:12px}
.difficulty-badge{position:absolute;top:6px;right:7px;z-index:6;font-size:9px;background:#fff3d9d9;padding:2px 5px;border:1px solid #3b2a1788;letter-spacing:0}
.scene{--caption-height:42px}
.enemy-art{height:calc(100% - var(--caption-height) + 60px);right:-5%}
.hero-art,.pocket-markers{left:6%;height:calc(100% - var(--caption-height) + 35px);bottom:-55px}
.hero-art[data-pose="smoking"]{transform:translateX(-10%)}
.marker-1{left:28%;top:59%}.marker-2{left:64%;top:41.5%}.marker-3{left:74%;top:59%}.marker-4{left:35%;top:70%}.marker-5{left:72%;top:70%}
.pocket-marker{border-radius:5px;font-size:14px;box-shadow:2px 2px 0 #16140d80}
.speech-bubble{top:4%;left:4%;max-width:65%;padding:12px 13px;transform:rotate(-5deg);border-radius:27% 36% 32% 30%/35% 39% 27% 32%}
.speech-bubble p{font-family:"DFKai-SB","KaiTi","Microsoft JhengHei",serif;font-size:clamp(14px,3.8vw,18px);line-height:1.25;font-weight:1000}
.scene-caption{background:transparent;border:0;min-height:42px;bottom:4px}
.scene-caption strong{position:relative;margin:0 -6px;border-top:3px solid var(--ink);border-bottom:3px solid var(--ink);padding:8px 7px;background:#ad2b1b;font-family:"DFKai-SB","KaiTi","Microsoft JhengHei",serif;font-size:clamp(13px,4vw,18px);font-weight:1000;line-height:1.25;transform:rotate(-2deg);box-shadow:0 3px 0 #fff4d6;text-shadow:2px 2px 0 #1a150e}
.scene-caption p{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;padding:0}
.smoke-button{border-radius:35px;font-family:"DFKai-SB","KaiTi","Microsoft JhengHei",serif;font-size:23px;box-shadow:0 0 0 2px var(--paper),0 0 0 4px var(--ink);margin-top:2px;text-shadow:1px 2px 0 var(--ink);letter-spacing:0}
.pocket-grid button{border-width:3px;border-radius:7px;background-image:radial-gradient(#9f6d1f16 .8px,transparent 1px);background-size:4px 4px}
.pocket-grid b{background:none;color:var(--ink);font-family:"DFKai-SB","KaiTi","Microsoft JhengHei",serif;font-size:20px;width:auto;height:auto;line-height:1}
.pocket-grid button:nth-child(4){margin-left:16px}.pocket-grid button:nth-child(5){margin-right:16px}
.pause-overlay .sound-toggle{width:100%;font-size:14px;background:#fff4d6;min-height:48px;display:flex;align-items:center;justify-content:center;gap:8px}
.reach-hand{height:auto;aspect-ratio:1/1;width:75%;transform:translate(-10%,-25%);animation:hand-reach-diagonal .18s ease-out both}
.reach-hand img{object-fit:contain}
@keyframes hand-reach-diagonal{from{transform:translate(30%,-15%) rotate(-8deg)}to{transform:translate(-10%,-25%) rotate(0)}}
@media(max-height:690px){.game-toolbar{min-height:55px;flex-basis:55px}.game-brand-button{height:55px}.scene{--caption-height:36px}.hero-art,.pocket-markers{bottom:-45px}.speech-bubble{padding:8px 10px}.speech-bubble p{font-size:13px}.scene-caption strong{padding-top:6px;padding-bottom:6px;font-size:13px}.smoke-button{font-size:21px}.scoreboard .clock strong{font-size:30px}}

/* The second art pass keeps all live controls above the safe-area edge. */
.game-screen{gap:4px;padding-top:max(2px,env(safe-area-inset-top));padding-bottom:max(9px,env(safe-area-inset-bottom));background-image:repeating-linear-gradient(118deg,transparent 0 13px,#94733a07 13px 14px),radial-gradient(ellipse at 18% 3%,#f1cc8433,transparent 52%)}
.game-toolbar{min-height:52px;flex-basis:52px;gap:6px}
.game-brand-button{height:52px;gap:6px}
.game-wordmark{font-family:"Microsoft JhengHei","PingFang TC",sans-serif;font-size:clamp(20px,6vw,26px);font-weight:900;font-synthesis:weight;letter-spacing:-.1em;transform:rotate(-3deg) skew(-3deg);-webkit-text-stroke:.7px var(--ink);text-shadow:1px 2px 0 #fff7df}
.game-wordmark em{-webkit-text-stroke:.7px #a01b10}
.scoreboard .clock strong{font-family:"Microsoft JhengHei",sans-serif;font-weight:900;font-synthesis:weight;font-size:35px;line-height:.9;-webkit-text-stroke:.5px #b12315}
.scoreboard #completed-label{font-size:13px}
.toolbar-pause{font-size:0;display:grid;place-items:center;border-width:3px;box-shadow:2px 2px 0 #17130c}
.toolbar-pause:before{content:"";display:block;width:22px;height:27px;border-radius:2px;background:linear-gradient(90deg,var(--ink) 0 35%,transparent 35% 65%,var(--ink) 65%)}
.scene{--caption-height:54px;box-shadow:none}
.scene-backdrop{filter:brightness(1.1) saturate(1.08)}
.enemy-art{right:-10%;height:calc(100% - var(--caption-height) + 40px);bottom:var(--caption-height)}
.hero-art,.pocket-markers{left:10%;bottom:30px;width:72%;height:calc(100% - 104px);max-height:420px;aspect-ratio:auto}
.hero-art{background-image:url("a-manga/hero-crouch.png")}
.hero-art[data-pose="smoking"]{transform:none}
.marker-1{left:26.95%;top:72.95%}.marker-2{left:67.71%;top:52.73%}.marker-3{left:78.78%;top:74.9%}.marker-4{left:21.22%;top:87.4%}.marker-5{left:80.86%;top:87.89%}
.pocket-marker{width:23px;height:23px;border-width:2px;font-size:15px;font-weight:900;box-shadow:1px 2px 0 #17130c}
.speech-bubble{left:3%;top:4%;max-width:45%;padding:13px 14px 16px;border:0;border-radius:0;transform:rotate(-4deg);background:var(--ink);clip-path:polygon(0 20%,15% 0,83% 4%,96% 21%,94% 67%,100% 92%,79% 84%,64% 100%,13% 94%,0 70%);box-shadow:none;filter:drop-shadow(2px 3px 0 #1b120c55)}
.speech-bubble:before{content:"";position:absolute;inset:3px;background:#fff9e8;clip-path:inherit;z-index:-1}
.speech-bubble:after{display:none}
.speech-bubble p{position:relative;font-family:"Microsoft JhengHei","PingFang TC",sans-serif;font-size:15px;font-weight:900;font-synthesis:weight;line-height:1.25;-webkit-text-stroke:.1px var(--ink)}
.reaction-mark{top:28%;right:1%;font-size:45px}
.scene-caption{bottom:3px;min-height:48px;z-index:10}
.scene-caption strong{margin:0 -8px;padding:10px 9px 12px;border:0;font-family:"Microsoft JhengHei","PingFang TC",sans-serif;font-size:24px;font-weight:900;font-synthesis:weight;line-height:1.12;-webkit-text-stroke:1px #17130c;paint-order:stroke fill;text-shadow:2px 2px 0 #17130c;transform:rotate(-2.5deg);box-shadow:none;background-image:linear-gradient(174deg,#f03b2300 12%,#f03b2366 12.6% 21%,transparent 21.5%),repeating-linear-gradient(-17deg,transparent 0 16px,#09070488 16.8px 17.5px,transparent 18px 36px);clip-path:polygon(0 11%,4% 4%,12% 9%,19% 0,25% 6%,40% 1%,49% 7%,68% 0,78% 5%,90% 2%,100% 9%,98% 23%,100% 41%,97% 58%,100% 78%,94% 84%,100% 96%,81% 92%,70% 99%,57% 94%,42% 100%,28% 95%,16% 100%,7% 91%,0 95%,2% 77%,0 63%,3% 44%)}
.scene[data-phase="search"] .scene-caption strong{font-size:19px}
.progress-panel{flex:0 0 26px;display:flex;align-items:center;gap:9px;padding:1px 2px}
.progress-panel strong{font-size:13px;white-space:nowrap;font-weight:900;font-synthesis:weight}
.progress-panel .puff-track{flex:1;height:10px;border:1px solid #807052;border-radius:3px;background:#e0d4b9;box-shadow:inset 1px 1px 1px #62553f44;margin:0}
.progress-panel .puff-fill{background:linear-gradient(90deg,#e0a72e,#f8db6e)}
.pocket-grid{gap:5px}
.pocket-grid button{min-height:52px;font-family:"Microsoft JhengHei","PingFang TC",sans-serif;font-size:18px;font-weight:900;font-synthesis:weight;gap:6px;border:3px solid var(--ink);box-shadow:1px 2px 0 var(--ink)}
.pocket-grid b{font-family:inherit;font-size:21px;font-weight:900;font-synthesis:weight}
.pocket-grid button:nth-child(4){margin-left:24px}.pocket-grid button:nth-child(5){margin-right:24px}
.cooldown-label{display:block;text-align:center;margin:6px 0 1px;font-size:13px;font-weight:900;font-synthesis:weight;line-height:18px;color:#544e3e}
.action-panel{margin-top:4px;padding:0 5px 2px}
.smoke-button{min-height:60px;margin:0;border-width:4px;border-radius:38px;font-family:"Microsoft JhengHei","PingFang TC",sans-serif;font-size:30px;font-weight:900;font-synthesis:weight;line-height:1.1;-webkit-text-stroke:1px #21150f;paint-order:stroke fill;text-shadow:2px 3px 0 #21150f;background-color:#e52f1b;background-image:linear-gradient(165deg,transparent 34%,#17110caa 34.3% 35%,transparent 35.5% 69%,#1b120c55 69.3% 70.3%,transparent 71%),linear-gradient(12deg,#ff702c66 0,transparent 39%),repeating-linear-gradient(-27deg,transparent 0 13px,#35130944 13.8px 14.5px,transparent 15px 31px);box-shadow:0 0 0 2px var(--paper),0 0 0 4px var(--ink)}
.smoke-button:before,.smoke-button:after{content:"";position:absolute;pointer-events:none;width:32px;height:40px;top:7px;background:radial-gradient(circle at 12px 6px,#20150d 0 2px,transparent 2.5px),radial-gradient(circle at 21px 20px,#20150d 0 3px,transparent 3.5px),radial-gradient(circle at 5px 27px,#20150d 0 1px,transparent 2px);z-index:-1}
.smoke-button:before{left:-18px}.smoke-button:after{right:-18px;transform:rotate(180deg)}
.record-label{display:none}
.cover-sound{font-size:12px;font-weight:900;font-synthesis:weight}.cover-sound:before{font-size:24px;font-weight:900}
.selection{font-weight:900;font-synthesis:weight}
@media(max-height:690px){.game-screen{gap:3px;padding-bottom:max(8px,env(safe-area-inset-bottom))}.game-toolbar{min-height:52px;flex-basis:52px}.game-brand-button{height:52px}.scene{--caption-height:44px}.hero-art,.pocket-markers{width:auto;aspect-ratio:3/4;height:calc(100% - 82px);bottom:32px;left:14%}.speech-bubble{max-width:43%;padding:11px 10px 13px}.speech-bubble p{font-size:12px}.scene-caption strong{font-size:20px;padding:8px 8px 10px}.scene[data-phase="search"] .scene-caption strong{font-size:16px}.progress-panel{flex-basis:24px}.progress-panel strong{font-size:11px}.pocket-grid button{min-height:48px;font-size:15px}.pocket-grid b{font-size:19px}.cooldown-label{margin-top:4px;font-size:12px;line-height:16px}.smoke-button{min-height:54px;font-size:27px}.action-panel{margin-top:2px}.pocket-marker{width:21px;height:21px;font-size:13px}.enemy-art{height:calc(100% - var(--caption-height) + 25px)}}
@media(max-width:350px){.game-wordmark{font-size:20px}.game-toolbar{gap:5px}.scoreboard{min-width:67px}.scoreboard .clock strong{font-size:29px}.scoreboard #completed-label{font-size:11px}.scene-caption strong{font-size:18px}.pocket-grid button{font-size:14px}.progress-panel{gap:5px}.progress-panel strong{font-size:10px}.pocket-grid button:nth-child(4){margin-left:18px}.pocket-grid button:nth-child(5){margin-right:18px}}
@media(orientation:landscape) and (max-height:550px){.cover-help{left:calc(100% + 16px);bottom:20px;top:auto;width:96px;height:48px;border:2px solid var(--ink);border-radius:7px;background:var(--paper);color:var(--ink);box-shadow:2px 2px 0 var(--ink)}.cover-help .sr-only{position:static;clip:auto;width:auto;height:auto;margin:0;overflow:visible;font-size:13px;font-weight:900}.cover-sound{left:-96px;bottom:20px;width:80px}.cover-loading{max-width:190px;white-space:normal;text-align:center;top:79%;font-size:10px}.game-overlay{overflow:auto}.pause-overlay .overlay-card{margin:auto}.overlay-card .comic-button{min-height:48px}.selection{font-size:9px;min-width:45px;padding:2px}}
.hero-art,.pocket-markers{bottom:38px}
.scene-caption{bottom:-2px}
.scene-caption strong{-webkit-text-stroke:.45px #fff3da;text-shadow:-1.5px -1.5px 0 #17130c,1.5px -1.5px 0 #17130c,-1.5px 1.5px 0 #17130c,2px 3px 0 #17130c}
.smoke-button{font-size:33px;-webkit-text-stroke:.6px #fff3da;text-shadow:-2px -2px 0 #21150f,2px -2px 0 #21150f,-2px 2px 0 #21150f,2px 2px 0 #21150f,3px 4px 0 #21150f}
.pocket-grid button{font-size:20px;-webkit-text-stroke:.2px currentColor}
@media(max-height:690px){.hero-art,.pocket-markers{bottom:40px}.pocket-grid button{font-size:17px}.smoke-button{font-size:29px}}
@media(max-width:350px){.pocket-grid button{font-size:15px}.smoke-button{font-size:27px}}
.speech-bubble{left:8%;min-width:132px}
.speech-bubble p{font-size:18px}
@media(max-height:690px){.speech-bubble{left:3%;min-width:112px}.speech-bubble p{font-size:13px}}

/* Generated ink remains a visual layer; every value and action is live HTML. */
.game-wordmark{height:32px;width:100%;background:url("a-manga/ui-ink.png") 50% 100%/100% 300% no-repeat;color:transparent;-webkit-text-stroke:0;text-shadow:none;transform:none;overflow:hidden;flex-shrink:0}
.game-wordmark em{color:transparent;-webkit-text-stroke:0;text-shadow:none}
.game-brand-button{gap:3px}
.scene[data-phase] .scene-caption strong{background:transparent url("a-manga/ui-ink.png") 50% 0%/100% 300% no-repeat;clip-path:none;transform:rotate(-2.5deg);padding-left:14px;padding-right:14px}
.smoke-button,.smoke-button:disabled,.smoke-button:not(:disabled):active,.smoke-button.holding{background:transparent url("a-manga/ui-ink.png") 50% 50%/100% 300% no-repeat;border:0;box-shadow:none;transform:none;border-radius:0}
.smoke-button:before,.smoke-button:after{display:none}
.smoke-button:disabled{filter:grayscale(.85) brightness(.85)}
.smoke-button:not(:disabled):active,.smoke-button.holding{filter:brightness(.88)}
@media(max-width:350px){.game-wordmark{height:29px}.game-brand-button{gap:5px}}
.game-screen{--game-gutter:9px}
.scene{margin-left:calc(-1 * var(--game-gutter));margin-right:calc(-1 * var(--game-gutter));width:calc(100% + 2 * var(--game-gutter));border-left:0;border-right:0}
.hero-art,.pocket-markers{left:9.5%;width:68%}
.enemy-art[data-level="hard"]{background-image:url("a-manga/enemy-hard-v2.png")}
.game-brand-button .sticks{max-width:194px}
.action-panel{display:flex;justify-content:center;padding-left:0;padding-right:0}
.smoke-button{max-width:332px;font-family:"DFKai-SB","KaiTi","Microsoft JhengHei",serif;font-size:40px;-webkit-text-stroke:1.1px #fff3da}
.scene[data-phase] .scene-caption strong{font-family:"DFKai-SB","KaiTi","Microsoft JhengHei",serif;font-size:28px;-webkit-text-stroke:.9px #fff3da}
.scene[data-phase="search"] .scene-caption strong{font-size:21px}
.pocket-grid button{font-family:"DFKai-SB","KaiTi","Microsoft JhengHei",serif;font-size:24px;-webkit-text-stroke:.6px currentColor}
.pocket-grid b{font-family:inherit;font-size:25px}
.pocket-grid button:nth-child(4){margin-left:40px}.pocket-grid button:nth-child(5){margin-right:40px}
@media(max-height:690px){.hero-art,.pocket-markers{width:auto;left:14%}.smoke-button{font-size:35px}.scene[data-phase] .scene-caption strong{font-size:23px}.scene[data-phase="search"] .scene-caption strong{font-size:18px}.pocket-grid button{font-size:21px}.pocket-grid b{font-size:23px}.pocket-grid button:nth-child(4){margin-left:35px}.pocket-grid button:nth-child(5){margin-right:35px}}
@media(max-width:350px){.game-screen{--game-gutter:7px}.pocket-grid button{font-size:19px}.pocket-grid button:nth-child(4){margin-left:32px}.pocket-grid button:nth-child(5){margin-right:32px}.scene[data-phase] .scene-caption strong{font-size:21px}.scene[data-phase="search"] .scene-caption strong{font-size:17px}.smoke-button{font-size:32px}.game-brand-button .sticks{max-width:160px}}
@media(min-height:850px){.game-screen{--game-gutter:12px}}
.game-wordmark{width:min(100%,198px)}
.enemy-art{bottom:calc(var(--caption-height) - 12px)}
.smoke-button{max-width:360px}
.scene-backdrop{background-image:url("a-manga/corridor-v2.png");background-position:center 35%;filter:none}
/* Tall screens add scenery, not stretched bodies. Keep the eye above the foreground hair. */
@media(min-height:760px){.hero-art,.pocket-markers{width:min(68%,37dvh);height:auto;max-height:none;aspect-ratio:3/4}.enemy-art{width:auto;height:min(106.25vw,53.75dvh,510px,calc(100% - var(--caption-height) - 70px));max-height:none;aspect-ratio:4/5;bottom:calc(var(--caption-height) + 70px)}}
/* Give the main action the height of a painted manga title, within the thumb zone. */
.progress-panel{flex-basis:24px}
.pocket-grid button{min-height:48px}
.action-panel{margin-top:0;padding-bottom:0}
.smoke-button{min-height:86px;font-size:48px}
@media(max-height:690px){.smoke-button{min-height:72px;font-size:40px}}
@media(max-width:350px){.smoke-button{font-size:36px}}
/* The image's grasp point is at 10% / 25%; its sleeve follows the opponent's arm. */
.reach-hand{width:var(--reach-width,65%);height:auto;aspect-ratio:1/1;transform-origin:10% 25%;transform:translate(-10%,-25%) rotate(var(--reach-angle,0deg));animation:hand-reach-connected .18s ease-out both}
@keyframes hand-reach-connected{from{transform:translate(-10%,-25%) rotate(var(--reach-angle,0deg)) translate(25%,18%)}to{transform:translate(-10%,-25%) rotate(var(--reach-angle,0deg)) translate(0,0)}}
/* A shared portrait frame keeps the read-and-react composition identical on tall phones. */
@media(min-height:760px){
 .game-screen{--game-gutter:9px;width:min(100%,390px);height:min(100dvh,177.77778vw,693px);position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);container-type:size;padding-left:9px;padding-right:9px;box-shadow:0 0 0 1px #6c54292b,0 3px 22px #6c542917}
 .scene{min-height:0}
 .hero-art,.pocket-markers{left:9.5%;width:68%;height:calc(100% - 104px);max-height:420px;aspect-ratio:auto;bottom:38px}
 .enemy-art{width:auto;height:calc(100% - var(--caption-height) + 40px);bottom:calc(var(--caption-height) - 12px);aspect-ratio:4/5}
}
@container(max-height:679px){
 .game-toolbar{min-height:52px;flex-basis:52px}.game-brand-button{height:52px}
 .scene{--caption-height:44px}
 .hero-art,.pocket-markers{width:auto;aspect-ratio:3/4;height:calc(100% - 82px);bottom:40px;left:14%}
 .enemy-art{height:calc(100% - var(--caption-height) + 25px)}
 .speech-bubble{left:3%;min-width:112px;max-width:43%;padding:11px 10px 13px}.speech-bubble p{font-size:13px}
 .scene[data-phase] .scene-caption strong{font-size:23px;padding-top:8px;padding-bottom:10px}.scene[data-phase="search"] .scene-caption strong{font-size:18px}
 .progress-panel strong{font-size:11px}.pocket-grid button{font-size:21px}.pocket-grid b{font-size:23px}
 .pocket-grid button:nth-child(4){margin-left:35px}.pocket-grid button:nth-child(5){margin-right:35px}
 .cooldown-label{margin-top:4px;font-size:12px;line-height:16px}
 .smoke-button{min-height:72px;font-size:40px}.pocket-marker{width:21px;height:21px;font-size:13px}
}
.scene{overflow:visible;clip-path:inset(-14px 0 0)}
.enemy-art[data-level="hard"][data-pose="side"]{background-image:url("a-manga/enemy-hard-look.png");background-size:100% 100%;background-position:center;height:calc(100% - var(--caption-height) + 25px);right:-3%}
.enemy-art[data-level="easy"][data-pose="front"],.enemy-art[data-level="medium"][data-pose="front"]{bottom:calc(var(--caption-height) - 47px)}
/* Preserve complete source silhouettes: the sleeve crosses the nominal atlas divider. */
.hero-art,.pocket-markers{left:13.4%;bottom:26px;width:auto;height:calc(100% - 102px);max-height:none;aspect-ratio:3/4}
.hero-art{background-image:none}
.hero-art:before{content:"";position:absolute;top:0;left:0;width:200%;height:100%;background:url("a-manga/hero-pocket-v2.png") 0 0/100% 100% no-repeat;clip-path:polygon(0 0,54.10156% 0,54.10156% 78.125%,53.0599% 78.125%,53.0599% 100%,0 100%)}
.hero-art[data-pose="smoking"]:before{left:-101.5625%;clip-path:polygon(53.71094% 0,100% 0,100% 100%,53.71094% 100%,53.71094% 73.24219%,54.36198% 73.24219%,54.36198% 48.82813%,53.71094% 48.82813%)}
/* v7 lighting pose: hero-lighting.png is one 768x1024 frame registered to the smoking frame (tools/finalize_lighting_pose.py). */
.hero-art[data-pose="lighting"]:before{left:0;width:100%;background-image:url("a-manga/hero-lighting.png");background-size:100% 100%;clip-path:none}
.scene:has(.hero-art[data-pose="lighting"]) .smoke-drawing{display:none}
.smoke-drawing{left:63%;top:30.9%;width:30px;height:46px;transform:translate(-50%,-100%)}
.smoke-drawing i{height:28px;border-left-width:2px}.smoke-drawing i:nth-child(2){height:22px}.smoke-drawing i:nth-child(3){height:16px;bottom:24px}
@media(max-height:690px){.hero-art,.pocket-markers{height:calc(100% - 82px);bottom:28px;left:13.4%}}
@container(max-height:679px){.hero-art,.pocket-markers{height:calc(100% - 82px);bottom:28px;left:13.4%}}
.marker-1{left:27.34375%;top:78.32031%}.marker-2{left:71.875%;top:57.8125%}.marker-3{left:85.9375%;top:78.41797%}.marker-4{left:24.73958%;top:88.37891%}.marker-5{left:83.98438%;top:88.76953%}
.scene:has(.hero-art[data-pose="smoking"]) .marker-1,.scene:has(.hero-art[data-pose="lighting"]) .marker-1{left:25.52083%;top:78.41797%}
.scene:has(.hero-art[data-pose="smoking"]) .marker-2,.scene:has(.hero-art[data-pose="lighting"]) .marker-2{left:66.66667%;top:57.8125%}
.scene:has(.hero-art[data-pose="smoking"]) .marker-3,.scene:has(.hero-art[data-pose="lighting"]) .marker-3{left:83.33333%;top:78.51563%}
.scene:has(.hero-art[data-pose="smoking"]) .marker-4,.scene:has(.hero-art[data-pose="lighting"]) .marker-4{left:23.4375%;top:88.37891%}
.scene:has(.hero-art[data-pose="smoking"]) .marker-5,.scene:has(.hero-art[data-pose="lighting"]) .marker-5{left:83.33333%;top:88.76953%}
/* The searchable anchor stays at the real opening; its label leaves the hand visible. */
.marker-2{left:69.66146%;top:52.53906%;border:0!important;background:transparent!important;box-shadow:none!important}
.scene:has(.hero-art[data-pose="smoking"]) .marker-2,.scene:has(.hero-art[data-pose="lighting"]) .marker-2{left:66.66667%;top:52.53906%}
.marker-2 .marker-label{position:absolute;inset:0;display:grid;place-items:center;border:2px solid var(--ink);border-radius:4px;background:#fff2d5eb;box-shadow:1px 2px 0 #17130c;transform:translate(10px,-26px)}
.marker-2.active .marker-label{background:var(--yellow);box-shadow:0 0 0 2px var(--paper),2px 3px 0 var(--ink)}
.marker-2.target .marker-label{background:var(--red);color:#fff}
.marker-2 .marker-label:after{content:"";position:absolute;left:50%;top:100%;width:2px;height:16px;background:var(--paper);box-shadow:0 0 0 1px var(--ink);transform-origin:top center;transform:rotate(34deg);z-index:-1}
@media(max-height:690px){.marker-2 .marker-label{transform:translate(8px,-22px)}.marker-2 .marker-label:after{height:13px}}
@container(max-height:679px){.marker-2 .marker-label{transform:translate(8px,-22px)}.marker-2 .marker-label:after{height:13px}}

/* Elapsed challenge and local scorebook share the existing ink-and-paper treatment. */
.cover-leaderboard{position:absolute;right:1.8%;bottom:.6%;min-width:72px;min-height:48px;padding:4px 2px;border:0;background:transparent;font-size:11px;font-weight:900;line-height:1.25}
.cover-leaderboard:before{content:"榜";display:block;font-size:20px;line-height:24px}
.scoreboard{min-width:108px;flex-shrink:0}
.scoreboard .clock strong{font-size:23px;letter-spacing:-1.2px;font-style:normal;-webkit-text-stroke:0;line-height:1.1}
.scoreboard .clock>span{font-size:10px}
.game-overlay{overflow:auto;overscroll-behavior:contain}
.result-panel .overlay-card{transform:none;margin:auto;max-height:calc(100% - 14px);overflow:auto;padding:18px 15px;overscroll-behavior:contain}
.result-card .result-stamp{font-size:32px;width:46px;height:46px}
.result-card h2{font-size:23px;margin:6px 0 8px}
.result-card>p{margin-bottom:12px;font-size:13px}
.result-card .comic-button{min-height:44px;margin-top:8px}
.score-form{text-align:left;border-top:2px dashed var(--ink);border-bottom:2px dashed var(--ink);padding:10px 0;margin-top:8px}
.score-form label{display:block;font-weight:900;font-size:13px;margin-bottom:6px}
.score-form label span{font-size:10px;font-weight:600;margin-left:6px}
.score-entry{display:flex;gap:6px;align-items:stretch}
.score-entry input{min-width:0;width:100%;border:2px solid var(--ink);border-radius:2px;background:#fffaf0;font:inherit;font-size:16px;padding:8px;min-height:44px;color:var(--ink)}
.score-entry button{border:2px solid var(--ink);border-radius:2px;background:var(--yellow);font-size:12px;min-width:96px;font-weight:900;padding:6px}
.score-entry button:disabled{background:#ddd2ba;color:#51462f}
.score-form .score-message,.score-message{margin:7px 0 0;font-size:12px;line-height:1.5;font-weight:600;overflow-wrap:anywhere}
.leaderboard-dialog{max-width:430px}
.leaderboard-note{font-size:12px;line-height:1.65;margin-top:-7px}
.leaderboard-tabs{display:flex;gap:7px;margin:16px 0}
.leaderboard-tabs button{flex:1;min-width:0;min-height:52px;border:2px solid var(--ink);background:var(--paper);font-size:16px;font-weight:900;padding:6px 4px;box-shadow:2px 2px 0 var(--ink)}
.leaderboard-tabs button span{display:block;font-size:11px;margin-top:2px}
.leaderboard-tabs button[aria-pressed="true"]{background:var(--yellow);transform:rotate(-2deg)}
.leaderboard-dialog h3{font-size:15px;margin:16px 0 10px}
.leaderboard-empty{padding:25px 14px;border:2px dashed #a18650;text-align:center;font-size:14px;line-height:1.7}
.leaderboard-table{width:100%;border-collapse:collapse;table-layout:fixed;font-size:13px}
.leaderboard-table th,.leaderboard-table td{padding:9px 4px;border-bottom:1px solid #b9a276;text-align:left;overflow-wrap:anywhere}
.leaderboard-table th:first-child,.leaderboard-table td:first-child{width:16%;text-align:center}
.leaderboard-table th:last-child,.leaderboard-table td:last-child{width:33%;text-align:right;font-variant-numeric:tabular-nums}
.leaderboard-table tbody tr:first-child{background:#ffde75}
.audio-options{display:flex;gap:10px;margin:18px 0 8px}
.audio-options button{flex:1;min-height:44px;border:2px solid var(--ink);background:var(--yellow);font-weight:900;font-size:13px}
.audio-options button[aria-pressed="false"]{background:#e8ddc6}
.audio-status{font-size:11px;line-height:1.6;margin:5px 0;color:#5c4d36}
@media(max-width:350px){.scoreboard{min-width:99px}.scoreboard .clock strong{font-size:21px}.game-toolbar{gap:4px}.score-entry button{min-width:86px;font-size:11px}.cover-leaderboard{right:1%;font-size:10px;min-width:65px}}
@media(orientation:landscape) and (max-height:550px){.cover-leaderboard{right:calc(100% + 8px);bottom:80px;width:90px;background:var(--paper);border:2px solid var(--ink)}.result-panel .overlay-card{max-height:none}}

/* v7 revamp (2026-10-21): danger lights on frame and main button, floating notes, search threat, cooldown fill, bonus feedback, result rank */
.danger-frame{position:absolute;inset:0;z-index:30;pointer-events:none;border:6px solid transparent}
.game-screen[data-danger="safe"] .danger-frame{border-color:#2f9e4f}
.game-screen[data-danger="warn"] .danger-frame{border-color:#f2b705;animation:danger-blink .2s steps(2,jump-none) infinite}
.game-screen[data-danger="watch"] .danger-frame{border-color:#d62b1f}
.game-screen[data-danger="search"] .danger-frame{border-color:#d62b1f;animation:danger-blink .2s steps(2,jump-none) infinite}
.game-screen[data-paused="true"] .danger-frame{border-color:transparent;animation:none}
@keyframes danger-blink{from{opacity:1}to{opacity:.25}}
@keyframes button-blink{from{opacity:1}to{opacity:.6}}

/* The main button is a red ink-brush image (ui-ink.png); hue filters recolor the pill without filling its transparent edge. */
.game-screen[data-danger="safe"] #smoke-button{filter:hue-rotate(115deg) saturate(.85)}
.game-screen[data-danger="safe"] #smoke-button.holding{filter:hue-rotate(115deg) saturate(.85) brightness(.88)}
.game-screen[data-danger="warn"] #smoke-button{filter:hue-rotate(45deg) saturate(1.6) brightness(1.35);animation:button-blink .2s steps(2,jump-none) infinite}
.game-screen[data-danger="watch"] #smoke-button{filter:grayscale(1) brightness(.7)}
.game-screen[data-danger="watch"] #smoke-button.holding{filter:none}
.game-screen[data-danger="search"] #smoke-button:disabled{filter:grayscale(1) brightness(.7)}
.game-screen[data-threat="mine"] #smoke-button:disabled{filter:none;animation:button-blink .2s steps(2,jump-none) infinite}
.game-screen[data-threat="other"] #smoke-button:disabled{filter:hue-rotate(115deg) saturate(.85)}
.game-screen[data-paused="true"] #smoke-button{filter:grayscale(.85) brightness(.85) !important;animation:none !important}

.pocket-grid button{position:relative;overflow:hidden}
.pocket-grid button::after{content:"";position:absolute;inset:0;background:#3a352c66;transform-origin:left;transform:scaleX(var(--cd,0));pointer-events:none}
.pocket-grid button.target{background:#d62b1f !important;color:#fff !important;animation:button-pulse .3s ease-in-out infinite alternate}
@keyframes button-pulse{from{box-shadow:0 0 0 2px #fff3d9}to{box-shadow:0 0 0 5px #ffd637}}
.pocket-grid button.safe:not(:disabled){background:#bfe8c8 !important;box-shadow:0 0 0 3px #2f9e4f,2px 2px 0 var(--ink) !important}

.pocket-marker.target::after{content:"";position:absolute;inset:-8px;border-radius:50%;background:conic-gradient(#ffd637 calc(var(--tell,0) * 360deg),transparent 0);-webkit-mask:radial-gradient(circle,transparent 58%,#000 60%);mask:radial-gradient(circle,transparent 58%,#000 60%);pointer-events:none}

.float-note{position:absolute;left:50%;top:65%;z-index:28;width:max-content;max-width:88%;padding:8px 14px;border:3px solid #191712;border-radius:10px;background:#fffaf0;color:#191712;box-shadow:3px 3px 0 #191712;font:900 clamp(16px,5vw,22px)/1.25 "Microsoft JhengHei","PingFang TC",sans-serif;text-align:center;pointer-events:none;transform:translate(-50%,-50%)}
.float-note[data-kind="good"]{background:#ffe14d}
.float-note[data-kind="bad"]{background:#d62b1f;color:#fff}
.float-note.pop{animation:note-pop 1.3s ease-out both}
@keyframes note-pop{0%{opacity:0;transform:translate(-50%,-30%) scale(.7)}12%{opacity:1;transform:translate(-50%,-50%) scale(1.08)}20%{transform:translate(-50%,-50%) scale(1)}80%{opacity:1}100%{opacity:0;transform:translate(-50%,-70%)}}

.scene[data-slow="true"]::before{content:"";position:absolute;inset:0;z-index:27;background:#fff;pointer-events:none;animation:slow-flash .35s ease-out both}
.scene[data-slow="true"]{filter:saturate(.5) contrast(1.15)}
@keyframes slow-flash{from{opacity:.75}to{opacity:0}}

.game-brand-button .sticks i.done{background:#d62b1f;opacity:1;animation:stick-done .3s ease-out}
@keyframes stick-done{0%{transform:scaleY(.4)}60%{transform:scaleY(1.5)}100%{transform:none}}

.result-stamp[data-rank="S"]{border-color:#c79a00;color:#c79a00}
.result-stamp[data-rank="A"]{border-color:#2f9e4f;color:#2f9e4f}

@media (prefers-reduced-motion:reduce){.danger-frame,#smoke-button,.pocket-grid button.target,.float-note.pop,.scene[data-slow="true"]::before{animation:none !important}}