@import "https://fonts.googleapis.com/css2?family=DM+Mono:wght@400;500&family=Nunito:wght@600;700;800;900&display=swap";:root{color:#26372d;font-synthesis:none;text-rendering:optimizelegibility;--ink:#26372d;--muted:#788276;--green:#315e4d;--green2:#4f8568;--cream:#fff9e9;--gold:#e5ad55;--orange:#d66f4b;--line:#dce5ce;--shadow:0 12px 30px #314a3015;background:#eef3df;font-family:Nunito,Noto Sans TC,Microsoft JhengHei,sans-serif}*{box-sizing:border-box}html{background:#eef3df;min-width:320px;min-height:100%}body{background:linear-gradient(160deg,#f0f5e4 0%,#e6efd8 60%,#f4e8c8 100%);min-width:320px;min-height:100svh;margin:0}button,input{font:inherit}button{touch-action:manipulation;-webkit-tap-highlight-color:transparent}button:focus-visible,input:focus-visible{outline-offset:3px;outline:3px solid #e3984c}.app-shell{width:min(100%,560px);min-height:100svh;padding:max(12px,env(safe-area-inset-top)) 18px max(22px,env(safe-area-inset-bottom));margin:auto;position:relative;overflow:hidden}.topbar{justify-content:space-between;align-items:center;height:52px;display:flex}.brand{color:inherit;align-items:center;gap:9px;text-decoration:none;display:flex}.brand-icon{border:3px solid var(--green);width:36px;height:36px;color:var(--green);background:#f7cf78;place-items:center;font:500 12px DM Mono,monospace;display:grid;transform:rotate(-3deg);box-shadow:3px 3px #a5ba91}.brand small{color:#788276;letter-spacing:.12em;font-size:9px;font-weight:900;display:block}.brand strong{color:var(--green);font-size:15px;line-height:1.15;display:block}.brand i{color:var(--orange);font-style:normal}.top-actions{align-items:center;gap:6px;display:flex}.icon-button,.sound-button{height:36px;color:var(--green);cursor:pointer;background:#f9f8e9;border:2px solid #d6e0c8;border-radius:10px;font-weight:900;box-shadow:2px 2px #c1d1b6}.icon-button{width:36px;font-size:15px}.sound-button{align-items:center;gap:5px;padding:0 9px;font-size:10px;display:flex}.sound-button span:first-child{color:var(--orange);font-size:15px}.hidden{display:none!important}.view{animation:.24s both enter;display:none}.view.active{display:block}@keyframes enter{0%{opacity:0;transform:translateY(7px)}to{opacity:1;transform:translateY(0)}}.hero{padding:24px 4px 17px}.eyebrow{letter-spacing:.1em;color:#a56c3c;font:500 10px DM Mono,monospace}.pixel-star{color:#e19b3d}.hero h1{letter-spacing:-.05em;color:var(--green);margin:10px 0;font-size:clamp(35px,10vw,49px);line-height:1.04}.hero h1 span{color:var(--orange)}.hero p{color:#6e7c6d;max-width:360px;margin:0;font-size:13px;line-height:1.55}.panel{box-shadow:var(--shadow);background:#fbf9eb;border:2px solid #dce5ce;border-radius:16px}.setup-card{padding:16px}.field-label{color:#647568;margin:0 0 6px;font-size:11px;font-weight:900;display:block}.setup-card input{width:100%;height:43px;color:var(--ink);background:#fffdf4;border:2px solid #e2e6d3;border-radius:9px;padding:0 11px;font-size:13px;font-weight:800}.character-label{margin-top:13px}.role-options{grid-template-columns:1fr 1fr .9fr;gap:8px;display:grid}.role-card,.random-card{cursor:pointer;background:#f4f5e6;border:2px solid #e0e5d3;border-radius:11px;justify-content:center;align-items:center;height:86px;display:flex;position:relative;overflow:hidden}.role-card img{height:78px;image-rendering:pixelated;position:absolute;bottom:-7px}.role-card strong,.random-card strong{color:#315e4d;text-shadow:0 1px #fff9e9;font-size:10px;position:absolute;bottom:4px}.role-card.selected{background:#e5f0d8;border-color:#4e8b68;box-shadow:0 0 0 2px #71a17728}.check{z-index:2;background:var(--green);color:#fff;border-radius:50%;width:17px;height:17px;font-size:11px;display:none;position:absolute;top:4px;right:5px}.role-card.selected .check{place-items:center;display:grid}.random-card{background:#fbf0d2;flex-direction:column}.random-card.selected{background:#ffedbd;border-color:#d6a343}.random-card span{font-size:25px}.random-card strong{text-shadow:none;position:static}.primary-button{background:var(--green);color:#fff7df;cursor:pointer;border:2px solid #294e40;border-radius:10px;justify-content:space-between;align-items:center;width:100%;min-height:50px;margin-top:12px;padding:0 15px 0 18px;font-size:15px;font-weight:900;display:flex;box-shadow:0 4px #243f35}.primary-button:active,.control-button:active{transform:translateY(2px);box-shadow:0 2px #243f35}.primary-button b{color:#ffd475;font:500 18px DM Mono,monospace}.microcopy{text-align:center;color:#888a75;margin:10px 0 0;font-size:9px;font-weight:700}.leaderboard{margin-top:13px;padding:13px}.section-heading{justify-content:space-between;align-items:center;margin-bottom:9px;display:flex}.section-heading h2{color:var(--green);margin:2px 0 0;font-size:17px}.clear-button{color:#a65e48;cursor:pointer;background:0 0;border:0;font-size:9px;font-weight:900}.clear-button:disabled{color:#bcbdb0}.leaderboard-list{gap:5px;display:grid}.leaderboard-row{background:#f0f1e2;border-radius:8px;grid-template-columns:22px minmax(0,1fr) auto;align-items:center;gap:3px 6px;padding:6px 8px;display:grid}.rank-number,.rank-score{color:var(--green);font:500 11px DM Mono,monospace}.rank-name{text-overflow:ellipsis;white-space:nowrap;color:#425d4c;font-size:10px;font-weight:900;overflow:hidden}.rank-level,.rank-date{color:#929280;grid-column:2/4;font-size:8px}.rank-date{margin-top:-3px}.complete-badge{color:#c7902d;margin-left:4px}.empty-board{text-align:center;color:#909384;padding:13px;font-size:10px}.board-note{text-align:center;color:#9a9c8e;margin:8px 0 0;font-size:8px}.intro-view,.result-view{text-align:center;flex-direction:column;justify-content:center;align-items:center;min-height:calc(100svh - 90px);padding:20px 3px;display:none}.intro-view.active,.result-view.active{display:flex}.level-mark{color:#634923;background:#f7d77e;border:3px solid #ad8540;place-items:center;width:54px;height:54px;font:500 18px DM Mono,monospace;display:grid;box-shadow:3px 3px #d1b36c}.intro-view h1,.result-view h1,.final-view h1{color:var(--green);letter-spacing:-.04em;margin:8px 0;font-size:clamp(30px,8vw,39px)}.intro-copy,.result-copy{color:#758070;max-width:340px;margin:0 auto 13px;font-size:13px;line-height:1.6}.pixel-scene-card{width:100%;margin:6px 0;padding:8px}.preview-scene{letter-spacing:10px;height:95px;image-rendering:pixelated;background:linear-gradient(#b9dbe0 0 66%,#d5be78 66%);border-bottom:5px dashed #887746;place-items:center;font-size:35px;display:grid}.role-notice{color:#57785d;margin:8px 0 2px;font-size:11px;font-weight:900}.play-view{padding-top:15px}.play-heading{justify-content:space-between;align-items:center;margin:0 2px 9px;display:flex}.play-heading h1{color:var(--green);margin:2px 0;font-size:19px}.level-pill{color:#725a2e;background:#f6d985;border:2px solid #c6a651;padding:7px 9px;font:500 11px DM Mono,monospace}.stats-row{grid-template-columns:1fr 1fr 1fr;gap:6px;margin:0 0 9px;display:grid}.stat-chip{text-align:center;background:#fbf9eb;border:2px solid #dfe5d1;border-radius:9px;padding:6px 3px}.stat-chip small{color:#828977;font-size:8px;font-weight:800;display:block}.stat-chip strong{color:var(--green);margin-top:2px;font:500 15px DM Mono,monospace;display:block}.timer-chip strong{color:#b75b41}.game-frame{background:#fff9e8;border-radius:12px;padding:4px;position:relative;overflow:hidden}.game-frame canvas{aspect-ratio:24/11;width:100%;height:auto;image-rendering:pixelated;touch-action:none;display:block}.game-banner{color:#fff5d9;text-align:center;letter-spacing:.04em;text-shadow:2px 2px #27382e;background:#253b37b0;place-items:center;font-size:21px;font-weight:900;display:grid;position:absolute;inset:0}.controls{grid-template-columns:74px minmax(0,1fr) 88px;align-items:center;gap:8px;margin-top:12px;display:grid}.control-button{color:#fff8de;cursor:pointer;-webkit-user-select:none;user-select:none;background:#4f8568;border:2px solid #315e4d;border-radius:13px;flex-direction:column;justify-content:center;align-items:center;gap:1px;height:69px;display:flex;box-shadow:0 4px #254b3b}.control-button span{font-size:22px;line-height:1}.control-button small{font-size:10px;font-weight:900}.jump-control{background:#d67a47;border-color:#9f5436;height:82px;box-shadow:0 4px #82442d}.control-hint{text-align:center;color:#858b78;font-size:9px;font-weight:700;line-height:1.45}.result-icon{color:#b47f2c;background:#f7d77e;border:3px solid #c39a4a;place-items:center;width:62px;height:62px;margin-bottom:12px;font-size:30px;display:grid;box-shadow:4px 4px #e4c87d}.result-card{flex-direction:column;align-items:center;width:100%;margin:5px 0;padding:15px;display:flex}.result-card span{color:#89907f;font-size:10px;font-weight:900}.result-card strong{color:var(--green);font:500 34px DM Mono,monospace}.result-card small{color:#ae7939;font-size:10px;font-weight:900}.result-actions{width:100%}.text-button{color:#607966;cursor:pointer;background:0 0;border:0;margin-top:10px;padding:9px;font-size:11px;font-weight:900}.final-view{text-align:center;padding:16px 0 20px;display:none}.final-view.active{display:block}.finale-icon{color:#fff6cf;background:#9bce80;border-color:#60894b;margin:13px auto 10px}.final-view h1{margin:4px 0}.final-view .result-copy{margin-bottom:8px}.final-view .result-card{margin:6px 0;padding:8px}.final-view .result-card strong{font-size:28px}.final-board{text-align:left;margin-top:8px}.final-view>.primary-button{margin-top:11px}.modal-backdrop{z-index:20;-webkit-backdrop-filter:blur(5px);backdrop-filter:blur(5px);background:#243a31aa;place-items:center;padding:18px;display:grid;position:fixed;inset:0}.modal-card{width:min(100%,420px);max-height:85svh;padding:23px 20px 20px;position:relative;overflow:auto}.modal-close{color:#7b8775;cursor:pointer;background:0 0;border:0;font-size:25px;position:absolute;top:8px;right:10px}.modal-title{color:var(--green);margin:0 30px 9px 0;font-size:21px}.modal-copy{color:#718071;font-size:12px;line-height:1.7}.modal-actions{gap:8px;display:flex}.modal-actions button{color:#426450;cursor:pointer;background:#f6f5e8;border:2px solid #d8e0cc;border-radius:8px;flex:1;min-height:42px;font-size:11px;font-weight:900}.confetti-layer{z-index:30;pointer-events:none;position:fixed;inset:0;overflow:hidden}.confetti-piece{width:8px;height:13px;animation:fall 3.7s linear var(--delay) forwards;opacity:0;position:absolute;top:-15px}.confetti-piece.dot{border-radius:50%;width:9px;height:9px}@keyframes fall{8%{opacity:1}to{opacity:.95;transform:translate(var(--drift),110svh) rotate(var(--spin))}}.toast{z-index:31;left:50%;bottom:max(20px,env(safe-area-inset-bottom));opacity:0;pointer-events:none;background:var(--green);color:#fff7df;border-radius:9px;padding:9px 14px;font-size:11px;font-weight:900;transition:all .2s;position:fixed;transform:translate(-50%,16px)}.toast.show{opacity:1;transform:translate(-50%)}@media (width>=700px){body{padding:20px 0}.app-shell{background:#f1f4e3aa;border:1px solid #fff8;border-radius:22px;min-height:min(900px,100svh - 40px);box-shadow:0 20px 70px #41553b22}.hero{padding-top:28px}.home-view{max-width:470px;margin:auto}.setup-card,.leaderboard{margin-top:10px}.intro-view,.result-view{min-height:calc(100svh - 100px)}}@media (height<=730px){.hero{padding-top:12px;padding-bottom:9px}.hero h1{margin:7px 0;font-size:34px}.hero p{font-size:11px}.setup-card{padding:12px}.leaderboard{margin-top:8px}.role-card,.random-card{height:72px}.role-card img{height:67px}.intro-view,.result-view{min-height:calc(100svh - 80px)}}@media (width<=380px){.app-shell{padding-left:12px;padding-right:12px}.brand small{display:none}.controls{grid-template-columns:66px minmax(0,1fr) 78px;gap:6px}.control-button{height:64px}.jump-control{height:76px}.control-hint{font-size:8px}}@media (prefers-reduced-motion:reduce){*,:before,:after{scroll-behavior:auto!important;transition-duration:.01ms!important;animation-duration:.01ms!important;animation-iteration-count:1!important}}.rank-stars{color:#a27e3f;grid-column:2/4;margin-top:-3px;font-size:8px}.mode-label{margin-top:12px}.mode-options{grid-template-columns:1fr 1fr;gap:8px;display:grid}.mode-card{text-align:left;cursor:pointer;background:#f4f5e6;border:2px solid #e0e5d3;border-radius:10px;flex-direction:column;justify-content:center;align-items:flex-start;gap:2px;min-height:54px;padding:7px 9px;display:flex}.mode-card strong{color:#42634e;font-size:11px}.mode-card span{color:#818877;font-size:9px}.mode-card.selected{background:#e5f0d8;border-color:#4e8b68;box-shadow:0 0 0 2px #71a17728}.result-board{text-align:left;width:100%;margin:7px 0 0;padding:10px}.result-board .section-heading{margin-bottom:6px}.result-board .section-heading h2{font-size:14px}.result-board .leaderboard-row{padding:5px 7px}.result-view.with-board{justify-content:flex-start;padding-top:12px}.result-view.with-board .result-icon{width:46px;height:46px;margin-bottom:6px;font-size:23px}.result-view.with-board h1{font-size:28px}.result-view.with-board .result-copy{margin-bottom:5px;font-size:11px}.result-view.with-board .result-card{margin:3px 0;padding:8px}.result-view.with-board .result-card strong{font-size:27px}.result-view.with-board .result-board{margin-top:5px}.result-view.with-board .result-actions .primary-button{margin-top:8px}.exit-button{color:#a7503d;cursor:pointer;background:#fff4e8;border:2px solid #c7795e;border-radius:10px;height:36px;padding:0 8px;font-size:10px;font-weight:900;box-shadow:2px 2px #e9c7ae}