*{box-sizing:border-box}html{background:#351e21}body{margin:0;color:#402b26;font-family:system-ui,-apple-system,'Noto Sans TC',sans-serif;overscroll-behavior-y:contain}button{font:inherit;cursor:pointer;touch-action:manipulation;-webkit-tap-highlight-color:transparent}button:focus-visible{outline:3px solid #ca9147;outline-offset:2px}button:disabled{cursor:default}.game{max-width:480px;min-height:100svh;margin:auto;background:#fcf3e4;padding:0 14px max(8px,env(safe-area-inset-bottom))}header{display:flex;justify-content:space-between;align-items:center;background:#501e24;color:#fff2de;margin:0 -14px;padding:12px 16px}.brand{font-size:20px;font-weight:900;letter-spacing:2px}.brand span{font-size:10px;font-weight:500;letter-spacing:1px}.record{font-size:11px;opacity:.85}.heading{display:flex;align-items:center;justify-content:space-between;padding:13px 0 10px}small{font-size:9px;letter-spacing:2px;color:#a3754b}h1{font-size:26px;letter-spacing:-.5px;margin:1px 0}.edition{font-size:10px;color:#937054;background:#eee1ce;padding:6px 9px;border-radius:20px}.stats{display:grid;grid-template-columns:repeat(3,1fr);gap:6px}.stats>div{background:#fffaf0;border:1px solid #e6d8c5;border-radius:10px;padding:7px 10px;display:flex;align-items:center;justify-content:space-between}.stats span{font-size:10px;color:#8a7865}.stats strong{font-size:22px;color:#57332b;font-variant-numeric:tabular-nums}.stats strong span{font-size:10px;margin-left:2px}.timertrack{height:3px;background:#e7d7bd;margin:8px 1px;border-radius:8px;overflow:hidden}.timertrack i{display:block;width:100%;height:100%;background:#b66542;transform-origin:left;transition:transform .12s linear}.stage{overflow:hidden;background:#632c2e;border-radius:16px;box-shadow:0 2px 0 #dfceb4}.ticket{margin:9px 10px 0;padding:8px 10px;background:#fff8e9;border-radius:8px;position:relative;z-index:1}.tickethead{display:flex;justify-content:space-between;font-size:9px;color:#98816a;padding-bottom:5px;border-bottom:1px dashed #dac9b2;letter-spacing:.5px}.requirements{display:flex;align-items:center;justify-content:space-between;gap:8px;padding-top:5px;font-size:13px}.requirements b{font-size:19px;color:#553229}.requirements span{border-left:1px solid #dfd1bc;padding-left:10px;color:#66523f}canvas{display:block;width:100%;height:auto;aspect-ratio:420/180}.dialogue{margin:0;padding:7px 8px;min-height:30px;text-align:center;background:#efe2ce;color:#715342;font-size:11px;line-height:16px}.controls{margin-top:10px;padding:11px;background:#fff9ee;border:1px solid #e5d5bd;border-radius:16px}fieldset{border:0;margin:0 0 8px;padding:0}legend{width:100%;font-size:11px;font-weight:800;margin-bottom:5px;color:#654637}legend span{float:right;font-weight:500;font-size:10px;color:#9b8d78}.choices{display:grid;grid-template-columns:repeat(3,1fr);gap:7px}.choice{position:relative;min-height:46px;border:1px solid #e4d8c5;border-radius:10px;background:#f4eddf;color:#675742;padding:5px 3px;line-height:16px;font-size:12px;transition:background .08s,transform .08s;display:flex;align-items:center;justify-content:center;gap:5px}.choice .icon{font-size:19px}.choice:active{transform:scale(.96)}.choice[aria-checked=true]{border:2px solid #3c6752;background:#e3ecdd;color:#284d38;padding:4px 2px;box-shadow:0 2px 0 #3c6752}.choice[aria-checked=true]:after{content:'✓';position:absolute;top:0;right:4px;font-size:10px;color:#315a40}.choice:disabled{opacity:.65}fieldset.error legend{color:#b13c30}fieldset.error .choice[aria-checked=true]{border-color:#b13c30;background:#fbe7dd;color:#9b332a}fieldset.error .choice[aria-checked=true]:after{content:'!';color:#b13c30}.primary{width:100%;min-height:46px;border:0;border-radius:11px;background:#a33e33;box-shadow:0 3px 0 #742822;color:#fff3df;font-weight:800;font-size:16px;padding:10px;transition:transform .08s}.primary:active:not(:disabled){transform:translateY(2px);box-shadow:0 1px 0 #742822}.primary:disabled{box-shadow:0 2px 0 #d4c6ad;background:#e1d5c0;color:#96846e}.notice{font-size:10px;line-height:15px;min-height:30px;margin:8px 0 0;color:#8c735d;text-align:center}.notice.bad{color:#ac3b2f;font-weight:650}.tools{display:flex;align-items:center;gap:6px;margin-top:7px}.tools>span{flex:1;font-size:9px;color:#9a8066}.tools button{background:transparent;border:1px solid #dac9ad;border-radius:20px;font-size:10px;color:#74533f;min-height:32px;padding:5px 10px}.tools button:disabled{opacity:.5}footer{text-align:center;font-size:9px;color:#aa9178;padding-top:6px}.overlay{position:fixed;inset:0;background:#26151bda;backdrop-filter:blur(5px);display:grid;place-items:center;padding:20px;z-index:10}.overlay[hidden]{display:none}.modal{background:#fff4e2;width:100%;max-width:370px;border-radius:23px;padding:23px;text-align:center;box-shadow:0 20px 60px #0004}.portrait{height:113px;width:230px;margin:0 auto 10px;background-image:url('assets/characters-atlas.png');background-size:400% 200%;background-position:0% 0%;background-repeat:no-repeat;width:113px;border-radius:12px}.modal h2{font-size:27px;margin:9px 0}.modal p{font-size:13px;line-height:1.8;color:#846b53}.rules{display:flex;gap:8px;margin:19px 0}.rules span{flex:1;background:#efe2cf;border-radius:10px;padding:10px 2px;font-size:10px;color:#896e53}.rules b{display:block;font-size:19px;color:#644031;margin-bottom:3px}.secondary{width:100%;border:1px solid #d4bfa0;background:transparent;color:#754e37;padding:10px;border-radius:10px;margin-top:12px}.modal .small{font-size:10px;margin-bottom:0}.urgent{color:#bb3e2d!important}.scorepop{animation:score .25s ease-out}.newticket{animation:ticket .15s ease-out}@keyframes score{50%{transform:scale(1.2);color:#c65b30}}@keyframes ticket{from{opacity:.4;transform:translateY(-5px)}to{opacity:1;transform:translateY(0)}}@media(max-height:740px){.heading{padding:8px 0 6px}h1{font-size:23px}header{padding-top:8px;padding-bottom:8px}canvas{aspect-ratio:420/150}.controls{padding:9px;margin-top:7px}.choice{min-height:42px}fieldset{margin-bottom:6px}.notice{min-height:26px;margin-top:6px}.stats>div{padding:5px 8px}.ticket{padding-top:6px;padding-bottom:6px}.tools{margin-top:5px}.tools button{min-height:29px}.dialogue{padding:5px;min-height:26px}}@media(prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}

.tools>span{font-size:8px}.tools{gap:4px}.tools button{font-size:9px;padding:5px 8px}.modal .small{font-size:10px}

/* Little Fish: charcoal, red restaurant wall, warm wood and pink neon. */
:root{color-scheme:dark;--ink:#141112;--panel:#211a1c;--line:#513439;--paper:#fff2e9;--muted:#cfb5ae;--neon:#ff8ebc;--red:#d52c4c}
html{background:#0c0b0c}body{color:var(--paper);background:radial-gradient(ellipse at 50% 0,#3b101e 0,#0c0b0c 65%)}.game{background:radial-gradient(ellipse at 0 0,#39151e 0,transparent 55%),#151213;box-shadow:0 0 100px #0007}
header{background:linear-gradient(105deg,#521322,#261219 70%);border-bottom:1px solid #b24d70;padding-top:10px;padding-bottom:10px}.brand{font-family:'STKaiti','KaiTi',serif;font-size:26px;font-weight:900;letter-spacing:2px;color:#fff8fb;text-shadow:0 0 2px #fff,0 0 9px #ff70b8,0 0 22px #d92f7c}.brand span{font-family:system-ui,sans-serif;font-size:9px;color:#f8dbe5;letter-spacing:2px;text-shadow:none}.record{color:#e4c6cc;font-size:10px;background:#140c1266;padding:5px 9px;border:1px solid #a4596b66;border-radius:20px}.record b{color:#fff4ec}
.heading{padding-top:12px;padding-bottom:10px}small{color:#f4a2bc;font-size:9px;letter-spacing:2px}h1{color:#fff5ed;font-size:25px;letter-spacing:.5px;text-shadow:0 2px 8px #0005}.edition{background:#411f2a;color:#ffc0d7;border:1px solid #743747;font-size:9px;padding:5px 8px}
.stats{gap:7px}.stats>div{background:linear-gradient(150deg,#302025,#201b1c);border:1px solid #56353c;border-radius:10px;padding:7px 9px}.stats span{color:#d3b6b5;font-size:10px}.stats strong{color:#fff1e4;font-size:23px}.stats strong span{color:#d3b6b5}.stats>div:first-child strong{color:#ffb9d4}.timertrack{background:#3b282d;height:3px}.timertrack i{background:linear-gradient(90deg,#c72b4d,#ff99c7);box-shadow:0 0 8px #ff4b97}
.stage{background:#571723;border:1px solid #7d3646;border-radius:15px;box-shadow:0 8px 22px #0004}.ticket{background:linear-gradient(115deg,#701d2e,#461822);border:1px solid #b25368;border-radius:9px;margin:8px 9px 0;padding:8px 10px;box-shadow:0 3px 8px #0003}.tickethead{color:#f3c6ce;border-bottom-color:#c47b8766;font-size:9px}.requirements b{color:#fff4ed;font-size:19px}.requirements span{color:#ffe3df;border-left-color:#b2607066}.dialogue{background:#2e191e;color:#f3d4cc;border-top:1px solid #76404b;line-height:16px;font-size:11px}
.controls{background:linear-gradient(140deg,#271b1e,#1c1819);border:1px solid #5b353e;border-radius:15px;box-shadow:0 5px 20px #0003;padding:11px}legend{color:#ffe6da;font-size:11px}legend span{color:#c7aaa7;font-size:10px}.choice{background:linear-gradient(150deg,#3b2a2c,#2b2325);border:1px solid #6b474d;color:#fff0e8;border-radius:10px;font-size:12px;box-shadow:0 2px 0 #0e0c0d}.choice .icon{filter:drop-shadow(0 2px 2px #0003);font-size:19px}.choice[aria-checked=true]{background:linear-gradient(140deg,#9a3451,#6e2035);border-color:#ffb3d2;color:#fff6f3;box-shadow:0 0 0 1px #ff92bc22,0 3px 0 #4c1225}.choice[aria-checked=true]:after{color:#ffd4e6}.choice:disabled{opacity:.6}.primary{background:linear-gradient(110deg,#d32b4b,#ae203f);color:#fff5ef;border-radius:10px;box-shadow:0 3px 0 #71132d,0 0 16px #d827491b;font-size:16px;letter-spacing:1px}.primary:active:not(:disabled){box-shadow:0 1px 0 #71132d}.primary:disabled{background:#392d30;color:#c1aeaa;box-shadow:0 2px 0 #22191c}.notice{color:#d0b5ae;font-size:10px}.notice.bad{color:#ffb6a4}fieldset.error legend{color:#ffb8a5}fieldset.error .choice[aria-checked=true]{background:#5e292a;border-color:#ffaf98;color:#ffe0d4}fieldset.error .choice[aria-checked=true]:after{color:#ffd1b8}
.tools>span{color:#bb9d99;font-size:8px}.tools button{border-color:#71505a;background:#291d22;color:#f0d3d6;font-size:9px;border-radius:9px;min-height:32px}.tools button[aria-pressed=true]{background:#432331;border-color:#ae617c;color:#ffc5df}.tools button:disabled{opacity:.5}footer{color:#b99c96;font-size:9px}
.overlay{background:#09050bea;backdrop-filter:blur(7px)}.modal{background:radial-gradient(ellipse at 50% 0,#542135 0,transparent 60%),#20151b;border:1px solid #ac587c;box-shadow:0 25px 80px #0009,0 0 40px #e6388220;border-radius:22px;color:#fff1eb}.portrait{background-color:#361a25;border:1px solid #7b4057;box-shadow:0 0 25px #e76e9d1c}.modal h2{color:#fff4f0;font-size:27px}.modal small{color:#ffabd1}.modal p{color:#dfbfc1}.rules span{background:#3c2430;border:1px solid #65374d;color:#efc7d4}.rules b{color:#ffbddc}.secondary{color:#ffd0e3;border-color:#9b526f;background:#3d2030}.urgent{color:#ff98a6!important}@keyframes score{50%{transform:scale(1.2);color:#ff9dc7}}
@media(max-height:740px){header{padding-top:6px;padding-bottom:6px}.heading{padding-top:7px;padding-bottom:6px}.brand{font-size:24px}h1{font-size:23px}.controls{padding:9px}.stats>div{padding:5px 8px}.ticket{padding-top:6px;padding-bottom:6px}.tools button{min-height:29px}}
@media(max-width:520px) and (min-height:741px){header{padding-top:8px;padding-bottom:8px}.brand{font-size:25px}.heading{padding-top:8px;padding-bottom:7px}.controls{padding:9px}fieldset{margin-bottom:7px}legend{margin-bottom:4px}.choice{min-height:44px}.notice{min-height:26px;line-height:13px;margin-top:6px}.ticket{padding-top:6px;padding-bottom:6px}.tools{margin-top:6px}}
.scene-wrap{position:relative;isolation:isolate}.impact{position:absolute;z-index:3;left:5%;top:7%;width:90%;padding:9px 12px;background:#fff0c9;color:#802c29;border:2px solid #c9574a;border-radius:14px;font-weight:900;font-size:clamp(17px,5vw,23px);line-height:1.2;text-align:center;text-shadow:0 1px 0 #fff8e8;box-shadow:0 4px 15px #0006;pointer-events:none;animation:impact-in .2s cubic-bezier(.2,1.5,.5,1)}.impact[hidden]{display:none}.impact.sneak{background:#fff3d9f2;color:#6b422a;font-size:19px}.impact.munch{background:#ffe3d1f2;color:#872d42;font-size:21px}.impact.caught{top:14%;left:2%;width:96%;padding:15px 14px;background:#ffdb80;color:#a01927;border:3px solid #ff8a58;font-size:clamp(23px,6vw,30px);letter-spacing:1px;transform:rotate(-3deg);text-shadow:1px 2px 0 #fff1bc;box-shadow:0 0 0 3px #9c152a,0 5px 20px #0008}.impact.fever{background:linear-gradient(110deg,#ca2f23,#9e1c35);color:#fff0a2;border-color:#ffc766;text-shadow:0 2px 3px #81201b;top:3%;font-size:24px}.stage.startled{animation:startled .28s ease-out}.on-fire .stats>div:last-child{background:linear-gradient(135deg,#6e2519,#6b1b2e);border-color:#ffc275;box-shadow:0 0 13px #ff742c44}.on-fire #combo{color:#ffd37a;font-size:21px;white-space:nowrap}.on-fire .stage{border-color:#e89843;box-shadow:0 0 14px #ff712d33}.on-fire #serve:not(:disabled){background:linear-gradient(100deg,#db6120,#c82641);box-shadow:0 3px 0 #8f261a,0 0 14px #e6832b33}@keyframes impact-in{from{opacity:0;translate:0 6px;scale:.85}to{opacity:1;translate:0 0;scale:1}}@keyframes startled{0%,100%{transform:translateX(0)}20%{transform:translateX(-4px) rotate(-.4deg)}45%{transform:translateX(4px) rotate(.4deg)}70%{transform:translateX(-2px)}}
/* Comic shout frame: yellow centre, red inset and black jagged outline. */
.impact.sneak,.impact.munch,.impact.caught{display:grid;place-items:center;left:2%;top:2%;width:96%;min-height:126px;padding:31px 49px 34px;background:transparent url('assets/dialogue-burst.svg') center/100% 100% no-repeat;border:0;border-radius:0;box-shadow:none;filter:drop-shadow(0 4px 2px #0005);color:#211014;font-weight:950;line-height:1.16;text-shadow:0 1px 0 #fff4ad;letter-spacing:0;white-space:normal}.impact.sneak{font-size:19px;transform:rotate(-2deg)}.impact.munch{font-size:21px;transform:rotate(1deg)}.impact.caught{font-size:clamp(21px,5.7vw,28px);transform:rotate(-3deg);min-height:132px;padding:30px 46px 33px;color:#9b1425}.impact[hidden]{display:none}

footer a{color:inherit;text-underline-offset:2px}

.edition{font-variant-numeric:tabular-nums;white-space:nowrap;font-size:9px}.edition.qualified{background:#743726;border-color:#ecc06d;color:#ffe8a6}.reward-offer{display:grid;gap:3px;margin:13px 0 8px;padding:10px 9px;border:1px solid #d7a65d;border-radius:12px;background:linear-gradient(110deg,#623025,#3d1c29);color:#ffe2a6}.reward-offer b{font-size:20px}.reward-offer span{font-size:13px;color:#fff0c7}.modal .reward-terms{font-size:11px;color:#f3d0aa;line-height:1.65;margin:7px 0 10px}.reward-offer.qualified{box-shadow:0 0 18px #f4b95433}.portrait.winner{background-position:0% 100%;position:relative}.portrait.winner:after{content:'🍍';position:absolute;right:-5px;bottom:2px;font-size:40px;filter:drop-shadow(0 3px 2px #0005);animation:score .45s ease-out}.modal:has(.reward-offer) .portrait{height:86px;width:86px}.modal:has(.reward-offer) h2{font-size:23px}.modal:has(.reward-offer) #modaltext{font-size:12px}.modal:has(.reward-offer) .rules{margin:12px 0}.modal{max-height:calc(100svh - 32px);overflow:auto}

.reward-dish{margin:2px 0 10px;text-align:center}.reward-dish[hidden]{display:none}.reward-dish img{display:block;width:100%;height:148px;object-fit:contain;filter:drop-shadow(0 5px 10px #0005)}.reward-dish figcaption{font-size:21px;font-weight:900;letter-spacing:2px;color:#ffe3a2;margin-top:5px}.reward-winner .portrait{display:none}.reward-winner #modaltext{font-size:11px}.reward-winner .reward-offer{margin-top:9px}.reward-winner .small{display:none}@media(max-height:740px){.reward-dish img{height:115px}.reward-dish figcaption{font-size:19px}}

.reward-cast{display:grid;grid-template-columns:1fr 1.8fr 1fr;align-items:center;min-height:150px;gap:0;isolation:isolate}.reward-cat{width:100%;aspect-ratio:1;background-image:url('assets/characters-atlas.png');background-size:400% 200%;background-repeat:no-repeat;filter:drop-shadow(0 4px 8px #0004);align-self:center;z-index:0;overflow:hidden}.reward-cat.fatb{background-position:100% 100%}.reward-cat.didi{background-position:100% 0%}.reward-dish .reward-cast img{position:relative;z-index:1;width:126%;max-width:none;height:145px;object-fit:contain;justify-self:center}.reward-dish figcaption{margin-top:0}@media(max-height:740px){.reward-cast{min-height:120px}.reward-dish .reward-cast img{height:115px}}
.reward-cat.fatb{clip-path:inset(5% 0 0 0)}

/* Core feedback: a visible five-second window, readable errors and an explicit pause. */
.speed-window{margin:7px 2px 0;color:#e6bdc8;font-size:10px}.speed-window>div:first-child{display:flex;justify-content:space-between;gap:8px;line-height:15px}.speed-window b{font-variant-numeric:tabular-nums;color:#ffe6ab;min-width:37px;text-align:right}.speed-track{height:4px;background:#412730;border-radius:5px;overflow:hidden;margin-top:3px}.speed-track i{display:block;height:100%;background:#ffa9cb;transform-origin:left}.speed-urgent .speed-track i{background:#ffbd66}.speed-urgent b{color:#ffbd66}.pause-overlay{z-index:20}.pause-overlay .modal{padding:26px 22px}.choice:active:not(:disabled){border-color:#fff0d9;box-shadow:0 0 0 2px #ff9ac355}fieldset.error legend span{color:#ffb8a5;font-weight:800}
@media(max-height:740px){.speed-window{margin-top:5px;font-size:9px}.scene-wrap canvas{aspect-ratio:420/130}.controls{margin-top:6px}.heading{padding-top:5px;padding-bottom:5px}.notice{min-height:27px}}
@media(max-width:520px){.scene-wrap canvas{aspect-ratio:420/140}.tools button{min-height:44px;min-width:44px}.heading{padding-top:6px;padding-bottom:5px}.stats>div:last-child>span{white-space:nowrap;font-size:9px}.stats>div:last-child{gap:3px}.stats #combo{font-size:20px}}
@media(max-width:520px) and (max-height:740px){.scene-wrap canvas{aspect-ratio:420/100}.game{padding-left:10px;padding-right:10px}.controls{padding:7px}.tools{margin-top:4px}.choice{min-height:44px}}

/* Preserve the bitmap's 840x360 geometry at every viewport height. */
.scene-wrap canvas{width:100%;height:auto;aspect-ratio:auto!important}
@media(max-width:520px){.stage .ticket{margin-top:6px}.controls{margin-top:6px}.speed-window{margin-top:5px}.controls fieldset{margin-bottom:5px}.controls legend{margin-bottom:3px}.controls .notice{margin-top:5px}.game footer{padding-top:4px}}
