:root{color-scheme:dark;--ink:#e7e6ce;--muted:#aab9a9;--gold:#d2bb7f;font-family:"Microsoft JhengHei","PingFang TC",sans-serif}
*{box-sizing:border-box}html,body{margin:0;width:100%;height:100%;overflow:hidden;background:#203f3a}button,input,select{font:inherit}button{cursor:pointer}button:focus-visible,summary:focus-visible,select:focus-visible,input:focus-visible{outline:2px solid var(--gold);outline-offset:4px}[hidden]{display:none!important}
.stage{position:fixed;inset:0;width:100%;height:100%;height:100dvh;overflow:hidden;color:var(--ink)}canvas{display:block;width:100%;height:100%;outline:none;touch-action:none;user-select:none;cursor:crosshair}
.menu-toggle{position:absolute;z-index:5;top:max(18px,env(safe-area-inset-top));right:max(18px,env(safe-area-inset-right));width:40px;height:40px;padding:10px;border:1px solid #d7dfc32b;border-radius:50%;color:#e7e6ceb0;background:#16352d50;backdrop-filter:blur(8px);transition:background .2s,color .2s}.menu-toggle:hover{background:#16352dcc;color:var(--ink)}.menu-toggle svg{width:100%;height:100%;fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round}
.overlay,.menu-layer{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;padding:22px;background:#102d2b38}.overlay{z-index:2}.intro-card{text-align:center;max-width:390px;padding:32px 36px;background:#16382eed;box-shadow:0 16px 60px #0d252f33;border:1px solid #ced7b827;border-radius:14px;backdrop-filter:blur(8px)}h1{margin:0 0 17px;font-size:35px;letter-spacing:.1em;font-weight:600}.intro-card p{margin:0 0 24px;color:#c2ccae;font-size:14px;line-height:1.9}.intro-card small{display:block;margin-top:19px;font-size:11px;letter-spacing:.07em;color:var(--muted)}
.primary{display:flex;align-items:center;justify-content:center;gap:22px;width:100%;min-height:48px;padding:13px 22px;border:0;border-radius:6px;background:var(--gold);color:#263e32;font-size:14px;font-weight:600;letter-spacing:.06em}.primary:hover{background:#dfca91}.primary span{font-size:18px;font-weight:400}
.menu-layer{z-index:6;background:#10292770;backdrop-filter:blur(5px)}.menu-card{width:350px;max-width:100%;max-height:100%;overflow:auto;padding:27px;border-radius:12px;border:1px solid #cad2b72b;background:#193c34f7;box-shadow:0 18px 80px #071f2d55}.menu-heading{display:flex;justify-content:space-between;align-items:center;gap:16px}.menu-heading h2{margin:0;font-size:23px;font-weight:500;letter-spacing:.06em}.close-button{width:32px;height:32px;border:0;background:transparent;color:var(--muted);font-size:28px;line-height:1}.close-button:hover{color:var(--ink)}.menu-location{font-size:12px;color:var(--muted);margin:11px 0 22px;line-height:1.7}.stats{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-bottom:25px}.stats div{display:flex;flex-direction:column;gap:7px}.stats span{font-size:10px;color:var(--muted);letter-spacing:.1em}.stats strong{font-size:23px;font-weight:500;font-variant-numeric:tabular-nums}.stats small{font-size:10px;color:var(--muted)}.menu-actions{display:flex;gap:10px;margin-top:10px;margin-bottom:23px}.tool-button{flex:1;padding:11px 8px;border:1px solid #bac8a735;border-radius:5px;background:transparent;color:#d5ddc2;font-size:12px}.tool-button:hover{background:#d5dfb911}.tool-button span,kbd{margin-left:7px;font-family:inherit;font-size:11px;color:var(--muted)}details{border-top:1px solid #cad2b723;padding:14px 0 3px}summary{cursor:pointer;font-size:12px;letter-spacing:.04em;color:#cad5bb;line-height:1.8}.field{margin:17px 0}.field label{display:block;color:#b8c8b1;font-size:12px;margin-bottom:9px}.field output{float:right;color:var(--gold)}select{width:100%;padding:10px;color:#dce2c8;background:#244b40;border:1px solid #ced7b82e;border-radius:4px;font-size:12px}input[type=range]{width:100%;accent-color:var(--gold)}.check{display:flex;align-items:center;gap:8px;font-size:12px;color:#b8c8b1}.check input{accent-color:var(--gold)}.quiet,.menu-help{font-size:10px;line-height:1.8;color:#9fb5a1}.quiet{margin:13px 0}.menu-help{margin:20px 0 0;text-align:center}
.toast{position:absolute;z-index:7;left:50%;bottom:max(26px,env(safe-area-inset-bottom));transform:translate(-50%,8px);width:max-content;max-width:calc(100% - 40px);padding:11px 18px;border-radius:6px;color:#e3e5c9;background:#15372fe8;font-size:12px;line-height:1.6;text-align:center;opacity:0;pointer-events:none;transition:opacity .2s,transform .2s}.toast.show{opacity:1;transform:translate(-50%,0)}.fatal{position:absolute;inset:0;display:grid;place-items:center;padding:24px;background:#193c34;color:#e3e5c9}
@media(max-height:550px){.menu-layer{padding:12px}.menu-card{padding:20px}.intro-card{padding:24px 30px}.stats{margin-bottom:18px}.menu-location{margin-bottom:16px}}
@media(prefers-reduced-motion:reduce){button,.toast{transition:none}}