:root{color-scheme:light;--paper:#f7f4ed;--ink:#3d3832;--muted:#8c8377;--caramel:#8a593b;--green:#758567}*{box-sizing:border-box}html,body{margin:0;width:100%;height:100%;overflow:hidden}body{background:#eae7e1;color:var(--ink);font-family:"Noto Sans TC","Microsoft JhengHei",sans-serif}button,a{-webkit-tap-highlight-color:transparent}button{font:inherit;cursor:pointer}button:focus-visible,a:focus-visible{outline:3px solid #8b9a7a;outline-offset:4px}[hidden]{display:none!important}#app{position:relative;isolation:isolate;overflow:hidden;max-width:480px;width:100%;height:100%;height:100dvh;min-height:500px;margin:auto;background:var(--paper);box-shadow:0 0 90px #6155410b}canvas{position:absolute;inset:0;width:100%;height:100%;touch-action:none}.paper{position:absolute;inset:0;pointer-events:none;opacity:.11;background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.82' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Cpath fill='%23948a78' filter='url(%23n)' opacity='.4' d='M0 0h180v180H0z'/%3E%3C/svg%3E")}.topbar{position:absolute;top:calc(25px + env(safe-area-inset-top));left:28px;right:22px;display:flex;align-items:center;justify-content:space-between}.wordmark{font-family:Georgia,serif;font-size:19px;font-style:italic;color:var(--caramel);text-decoration:none;letter-spacing:.2px}.wordmark span{display:block;font:10px/2 sans-serif;letter-spacing:3px;color:var(--muted)}.tools{display:flex;gap:5px}.icon-button{display:grid;place-items:center;width:44px;height:44px;border:1px solid #d9d1c3;border-radius:50%;color:#7b6d5c;background:#f7f4edb3}.icon-button svg{width:19px;height:19px;fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}.screen{position:absolute;inset:0;pointer-events:none}.home{padding-top:calc(145px + env(safe-area-inset-top));text-align:center}.eyebrow{font:10px/1.6 Georgia,serif;letter-spacing:2.5px;color:#9b856b;margin:0 0 20px}h1{font-family:"Noto Serif TC","PMingLiU",serif;font-size:48px;letter-spacing:8px;line-height:1.4;font-weight:500;margin:0}h1 span{display:block;padding-left:8px}.intro{font-size:13px;line-height:2.1;letter-spacing:2px;color:var(--muted);margin-top:20px}.home-bottom{position:absolute;bottom:calc(79px + env(safe-area-inset-bottom));left:40px;right:40px}.record{font-size:12px;letter-spacing:1px;margin-bottom:19px;color:#8d7b64}.tiny-star{font-size:19px;color:#aa8c55;margin-right:5px}.record strong{font-size:18px;font-weight:500;margin:0 4px}.record-score{font-size:10px;display:block;margin-top:3px;letter-spacing:1px}.primary{width:100%;min-height:54px;display:flex;align-items:center;justify-content:center;gap:32px;background:var(--caramel);border:1px solid var(--caramel);color:#fff9ef;border-radius:12px;font-size:15px;letter-spacing:2px;text-decoration:none;pointer-events:auto;box-shadow:0 5px 14px #8a593b12;transition:background .15s,transform .15s}.primary:hover{background:#774b32}.primary:active{transform:translateY(2px)}.primary span{font-size:21px}.caption{font-size:11px;color:#a39786;letter-spacing:1px;margin:15px 0 0}footer{position:absolute;bottom:calc(19px + env(safe-area-inset-bottom));width:100%;text-align:center;font-size:11px;color:#a09483;letter-spacing:2px;pointer-events:none}footer span{display:block;font:8px Georgia,serif;letter-spacing:1.7px;margin-top:8px;color:#b3a894}#hud{position:absolute;top:calc(119px + env(safe-area-inset-top));left:32px;right:32px;display:flex;justify-content:center;gap:58px;pointer-events:none}.stat>span{font-size:11px;letter-spacing:2px;color:#968b7c}.stat>div{margin-top:6px}.stat strong{font-family:Georgia,serif;font-weight:400;font-size:39px;line-height:1}.stat small{font-size:11px;margin-left:8px;color:#9e907b}.score{position:absolute;top:91px;font-size:11px;color:#aa9983;letter-spacing:2px}#toast{position:absolute;top:34%;left:0;right:0;text-align:center;color:var(--green);letter-spacing:4px;font-size:17px;pointer-events:none;opacity:0;transition:opacity .25s}#toast.show{opacity:1}#play-hint{position:absolute;bottom:calc(96px + env(safe-area-inset-bottom));left:0;right:0;text-align:center;font-size:13px;letter-spacing:3px;color:#8f7f68;pointer-events:none}#play-hint span{display:block;font:8px Georgia,serif;letter-spacing:2px;margin-top:12px;color:#b7a991}.veil{position:absolute;inset:0;background:#f7f4ed91;backdrop-filter:blur(5px);display:flex;align-items:center;justify-content:center;padding:26px;z-index:5}.card{width:100%;max-height:calc(100dvh - 40px);overflow:auto;padding:36px 25px 18px;border:1px solid #e0d8c9;background:#fbf8f1f5;border-radius:22px;box-shadow:0 14px 50px #5440250d;text-align:center}.card h2{font-family:"Noto Serif TC","PMingLiU",serif;font-size:28px;font-weight:500;letter-spacing:3px;margin:8px 0 15px}.card p{font-size:12px;line-height:1.8;color:#998973}.card .eyebrow{font-size:9px;color:#93805e}.card .result-intro{margin:22px 0 0;letter-spacing:2px}.result-copy{font-size:11px!important}.result-stats{display:flex;justify-content:space-around;padding:24px 0;margin:10px 0 20px;border-top:1px solid #e8e0d2;border-bottom:1px solid #e8e0d2}.result-stats strong{display:block;font:32px Georgia,serif;color:#715139}.result-stats span{font-size:10px;color:#9b8c79;display:block;margin-top:9px}.secondary{width:100%;min-height:48px;background:transparent;color:var(--caramel);border:1px solid #d9ccbb;border-radius:12px;margin-top:12px;letter-spacing:1px;font-size:13px}.text-button{background:none;border:0;color:#958773;font-size:12px;padding:16px;min-height:44px}.pause-card .primary{margin-top:30px}#share-preview{max-width:100%;max-height:49dvh;display:block;margin:15px auto;border-radius:8px}#storage-notice{position:absolute;bottom:0;background:#eee6d8;color:#715139;font-size:11px;padding:8px;width:100%;z-index:10;text-align:center}@media(max-height:730px){.home{padding-top:110px}h1{font-size:39px;line-height:1.3}.eyebrow{margin-bottom:12px}.intro{margin-top:13px;font-size:12px}.home-bottom{bottom:63px}.topbar{top:18px}#hud{top:94px}.card{padding-top:22px}.result-stats{padding:17px 0}.record{margin-bottom:10px}footer{bottom:13px}}@media(prefers-reduced-motion:reduce){*{transition:none!important}}
#play-hint{bottom:calc(64px + env(safe-area-inset-bottom))}
.mode-picker{display:flex;gap:6px;background:#eae7e1;border-radius:12px;padding:4px;pointer-events:auto}.mode{flex:1;min-height:42px;border:0;background:transparent;color:#8c8377;border-radius:9px;font-size:13px;letter-spacing:1px}.mode.active{background:#fffcf5;color:#8a593b;box-shadow:0 2px 6px #5440250a}.mode-description{font-size:11px;color:#9b8c79;letter-spacing:.5px;margin:7px 0 12px}.stars{color:#ad8a47;letter-spacing:7px;font-size:27px;line-height:1.6}.live-stars{position:absolute;top:76px;font-size:18px;letter-spacing:5px}.mode-label{position:absolute;top:111px;color:#9b8c79;font-size:11px;letter-spacing:2px}.rating-hint{font-size:11px!important;margin:2px 0 10px}.result-stats strong{font-size:44px}#hud{gap:0}#hud .stat{text-align:center}.home-bottom .record{margin-bottom:12px}@media(max-height:730px){.home{padding-top:90px}.home h1{font-size:32px}.home .intro{margin-top:10px;font-size:11px;line-height:1.8}.home .eyebrow{font-size:9px}.mode-description{margin:5px 0 9px}.mode{min-height:38px}.home-bottom{bottom:62px}.home-bottom .record{margin-bottom:7px}.home-bottom .caption{margin-top:10px}}
.crazy-exit{position:absolute;bottom:calc(61px + env(safe-area-inset-bottom));right:20px;min-height:44px;padding:0 14px;border:1px solid #cbbb9f;background:#f7f4ede8;border-radius:12px;color:#8a593b;font-size:12px;z-index:2}#app:has(.crazy-exit:not([hidden])) #play-hint{bottom:calc(116px + env(safe-area-inset-bottom))}.mode{white-space:nowrap;font-size:12px;padding:0 5px}
.final-scene{margin:12px 0 10px}.final-scene #result-scene{position:static;display:block;width:100%;height:auto;max-height:22dvh;object-fit:contain;border-radius:12px;border:1px solid #e8e0d2}.final-scene figcaption{font-size:10px;color:#a09483;letter-spacing:1px;margin-top:6px}#result .result-stats{padding:13px 0;margin:8px 0 14px}#result .card{padding-top:24px}#result .result-intro{margin-top:10px}#result .card h2{margin-bottom:8px}
body{font-family:"Yu Gothic","Hiragino Kaku Gothic ProN","Meiryo",sans-serif}h1,.card h2{font-family:"Yu Mincho","Hiragino Mincho ProN","MS PMincho",serif}.wordmark{font-family:"Yu Mincho","Meiryo",serif;font-style:normal;font-size:17px}.intro{letter-spacing:1px}.mode-description{letter-spacing:0}.home .caption{font-size:10px;letter-spacing:0}#play-hint{letter-spacing:1px}.eyebrow{font-family:"Yu Gothic","Meiryo",sans-serif;letter-spacing:1px}.result-copy{letter-spacing:0}
/* Keep the title and introduction comfortably above the home mascot. */
.home h1,.home .intro{position:relative;top:-28px}
@media(max-height:730px){.home h1,.home .intro{top:-18px}}
#language{width:82px;min-height:40px;border:1px solid #d9d1c3;border-radius:10px;background:#f7f4ed;color:#7b6d5c;font:11px "Yu Gothic","Meiryo",sans-serif;padding:0 3px;cursor:pointer}.topbar .wordmark{max-width:94px;font-size:14px;line-height:1.5}.tools{align-items:center;gap:3px}html[lang="en"] .home h1{font-size:40px;letter-spacing:2px}html[lang="en"] .home .intro{font-size:12px;letter-spacing:0}html[lang="en"] .card h2{font-size:24px;letter-spacing:0}html[lang="en"] .primary{letter-spacing:1px}html[lang="en"] .result-copy{font-size:11px}@media(max-height:730px){html[lang="en"] .home h1{font-size:30px}html[lang="en"] .home .intro{font-size:10px}}
/* Keep the Japanese shop name on one line without shifting other languages. */
html[lang="ja"] .topbar .wordmark{white-space:nowrap;max-width:none;flex-shrink:0;font-size:13px;letter-spacing:0}