:root{--bg-rice:#f5f0e8;--ink-dark:#2c2c2c;--ink-light:#666;--accent-teal:#4a9;--accent-gold:gold;--accent:#e90;--panel-bg:#0009;--panel-border:#ffffff1a;--btn-bg:#ffffff26;--btn-active:#ffffff4d;--danger:#f44;--success:#4a9;--wood-brown:#8b6914;--wood-dark:#5c4a0e;--font-title:1.2rem;--font-body:.9rem;--font-small:.75rem;--font-tiny:.65rem;--radius-sm:8px;--radius-lg:12px;--space-xs:.25rem;--space-sm:.5rem;--space-md:.75rem;--space-lg:1rem;--page-top:3rem}*{box-sizing:border-box;-webkit-user-select:none;user-select:none;margin:0;padding:0}#root{overflow:hidden}#root *{max-width:100%}input,textarea{-webkit-user-select:text;user-select:text}body{color:var(--ink-dark);min-height:100dvh;padding:0;padding-bottom:env(safe-area-inset-bottom);background-color:#1a1a1a;justify-content:center;align-items:center;margin:0;font-family:Noto Serif TC,Source Han Serif TC,serif;display:flex}#root{background-color:var(--bg-rice);width:100%;max-width:430px;min-height:100dvh;max-height:932px;margin:auto;position:relative;overflow:hidden auto}.page{min-height:100dvh;padding-top:var(--page-top);padding-bottom:calc(70px + env(safe-area-inset-bottom));flex-direction:column;justify-content:flex-start;align-items:center;padding-left:1rem;padding-right:1rem;display:flex}.panel{border-radius:var(--radius-lg);padding:var(--space-lg);background:#f5f0e8f2;border:1px solid #00000014;width:100%;max-width:420px;margin:0 auto;box-shadow:0 2px 8px #0000000d}.btn-wood{color:var(--ink-dark);border-radius:var(--radius-sm);padding:var(--space-sm) var(--space-lg);cursor:pointer;min-width:44px;min-height:44px;text-shadow:none;background:#f5f0e8 url(/assets/ui/panel_paper.png) 50%/cover no-repeat;border:1px solid #00000026;font-family:inherit;font-size:.85rem;font-weight:600;transition:transform .1s,box-shadow .2s;box-shadow:0 2px 8px #00000026}.btn-wood:hover{transform:scale(1.02);box-shadow:0 2px 8px #0000001a}.btn-wood:active{transform:scale(.98)}.btn-icon{justify-content:center;align-items:center;min-width:44px;min-height:44px;display:inline-flex}.ink-progress{background:#e8e0d0;border-radius:4px;width:100%;max-width:100%;height:8px;overflow:hidden}.ink-progress-fill{background:linear-gradient(90deg,#2c2c2c,#5a8a7a);max-width:100%;height:100%;transition:width .3s}h1,h2,h3{font-weight:700}input,select{background:#fff;border:1px solid #d4c9a8;border-radius:4px;padding:.5rem .8rem;font-family:inherit;font-size:1rem}input:focus,select:focus{outline:2px solid var(--accent-teal)}@keyframes shake{0%,to{transform:translate(0)}20%{transform:translate(-6px)}40%{transform:translate(6px)}60%{transform:translate(-4px)}80%{transform:translate(4px)}}@keyframes attackFlash{0%{opacity:1}50%{opacity:.3}to{opacity:1}}@keyframes shakeHit{0%,to{transform:translate(0)}25%{transform:translate(-5px)}75%{transform:translate(5px)}}@keyframes damageFloat{0%{opacity:1;transform:translateY(0)}to{opacity:0;transform:translateY(-20px)}}.shake{animation:.4s shake}.page{animation:.3s ease-in fadeIn}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}.page-fade{animation:.3s ease-in fadeIn}button{transition:transform .1s,opacity .1s}button:hover{opacity:.85}button:active{transform:scale(.95)}button:disabled{opacity:.5;transform:none}.toast{z-index:300;color:#fff;background:#000000d9;border-radius:12px;padding:1rem 2rem;font-size:1.1rem;font-weight:700;position:fixed;top:50%;left:50%;transform:translate(-50%,-50%)}.toast-success{color:#4f8}.toast-error{color:#f66}.toast-info{color:#fd0}.hp-bar-fill{transition:width .5s ease-out}@keyframes float{0%,to{transform:translateY(0)}50%{transform:translateY(-5px)}}@keyframes bubbleRise{0%{opacity:0;transform:translateY(20px)}20%{opacity:1}to{opacity:.8;transform:translateY(-10px)}}@keyframes floatUp{0%{opacity:1;transform:translateY(0)}to{opacity:0;transform:translateY(-30px)}}.damage-float{pointer-events:none;font-size:1.3rem;font-weight:700;animation:1s ease-out forwards floatUp;position:absolute}@keyframes glow{0%,to{box-shadow:0 0 5px gold}50%{box-shadow:0 0 20px gold}}.celebrate{animation:1s ease-in-out 3 glow}@keyframes flash{0%{opacity:0}50%{opacity:.8}to{opacity:0}}.breakthrough-flash{z-index:250;pointer-events:none;background:gold;animation:1s ease-out forwards flash;position:fixed;inset:0}#root div[style*="position: fixed"],#root div[style*=position\:fixed]{max-width:430px;transform:translate(-50%);left:50%!important}img{max-width:100%;height:auto}@keyframes bounce{0%,to{transform:translateY(0)}50%{transform:translateY(-10px)}}.guide-arrow{animation:1s infinite bounce}@keyframes pulseGlow{0%,to{box-shadow:0 0 5px #ffd7004d}50%{box-shadow:0 0 15px #ffd700cc}}.pulse-glow{animation:2s infinite pulseGlow}.action-zone{flex-direction:column;gap:8px;max-height:35%;padding:.8rem;display:flex;position:absolute;bottom:56px;left:0;right:0;overflow-y:auto}.btn-action{background:var(--panel-bg);cursor:pointer;border:1px solid #00000026;border-radius:12px;min-height:44px;padding:.6rem 1.2rem;font-family:inherit;font-size:.9rem;font-weight:600;box-shadow:0 2px 8px #0000004d}.quest-banner{color:#fff;text-align:center;pointer-events:none;background:linear-gradient(135deg,#ffb400e6,#ff6400cc);border-radius:12px;padding:.8rem 1.2rem;font-size:1.1rem;font-weight:700;animation:2s infinite pulse;box-shadow:0 4px 12px #0000004d}@keyframes pulse{0%,to{transform:scale(1)}50%{transform:scale(1.02)}}.text-contrast{text-shadow:0 1px 3px #000c,0 0 6px #0006}.msg-overlay{color:#fff;background:#000000b3;border-radius:6px;padding:.4rem .8rem;font-size:.85rem}.quest-banner,[data-non-interactive]{pointer-events:none!important}[data-non-interactive] button{pointer-events:auto!important}