:root{--bg-kraft:#ece1cc;--bg-mat:#e2d4bc;--paper-sheet:#fffef8;--paper-flap:#faf4e6;--paper-shadow:#402d1a2e;--paper-shadow-deep:#2d1e0f52;--color-ink:#2b241d;--color-ink-muted:#6e6255;--color-ink-faint:#a09282;--color-terracotta:#c4552e;--color-terracotta-hover:#b04924;--color-matcha:#437651;--color-washi-gold:#c89538;--border-kraft:#d6c5a9;--border-crease:#bba788;--font-display:"Fraunces", serif;--font-body:"Plus Jakarta Sans", sans-serif;--font-mono:"JetBrains Mono", monospace}*,:before,:after{box-sizing:border-box;-webkit-user-select:none;user-select:none;-webkit-tap-highlight-color:transparent;margin:0;padding:0}html,body{background-color:var(--bg-kraft);width:100%;height:100%;color:var(--color-ink);font-family:var(--font-body);background-image:radial-gradient(circle at 50% 50%, #ffffff40 0%, transparent 80%), radial-gradient(var(--border-kraft) .75px, transparent .75px);background-size:100% 100%,20px 20px;font-size:15px;line-height:1.4;overflow:hidden}#app-container{flex-direction:column;width:100%;max-width:1100px;height:100dvh;margin:0 auto;padding:10px 14px;display:flex;position:relative;overflow:hidden}#game-header{background:var(--paper-sheet);border:1px solid var(--border-kraft);box-shadow:0 4px 14px var(--paper-shadow);border-radius:14px;flex-shrink:0;justify-content:space-between;align-items:center;margin-bottom:12px;padding:10px 18px;display:flex}.brand{align-items:center;gap:10px;display:flex}.brand-crest{border:1.5px solid var(--color-washi-gold);width:38px;height:38px;color:var(--color-terracotta);font-family:var(--font-display);box-shadow:0 2px 4px var(--paper-shadow);background:#fdf6ec;border-radius:9px;justify-content:center;align-items:center;font-size:20px;font-weight:700;display:inline-flex}.brand-title{font-family:var(--font-display);letter-spacing:-.01em;color:var(--color-ink);font-size:18px;font-weight:700;line-height:1.1}.brand-subtitle{text-transform:uppercase;letter-spacing:.12em;color:var(--color-terracotta);font-size:11px;font-weight:600}.header-center{flex-direction:column;align-items:center;gap:4px;display:flex}.level-meta{align-items:center;gap:8px;display:flex}.level-badge{font-family:var(--font-body);letter-spacing:.05em;text-transform:uppercase;color:var(--color-matcha);font-size:12px;font-weight:700}.level-sep{color:var(--color-ink-faint);font-weight:700}.level-name{font-family:var(--font-display);color:var(--color-ink);font-size:15px;font-weight:600}.stats-row{border:1px solid var(--border-kraft);background:#f7efe1;border-radius:20px;align-items:center;gap:6px;padding:3px 12px;display:flex}.stat-item{align-items:center;gap:4px;display:flex}.stat-label{color:var(--color-ink-muted);text-transform:uppercase;font-size:11px;font-weight:600}.stat-val{font-family:var(--font-mono);color:var(--color-ink);font-variant-numeric:tabular-nums;font-size:13px;font-weight:700}.stat-divider{color:var(--color-ink-faint);font-size:12px}.header-right{align-items:center;gap:8px;display:flex}.btn-icon{background:var(--paper-sheet);border:1px solid var(--border-kraft);width:36px;height:36px;color:var(--color-ink);cursor:pointer;box-shadow:0 2px 0 var(--border-crease), 0 3px 6px var(--paper-shadow);border-radius:9px;justify-content:center;align-items:center;font-size:16px;font-weight:700;transition:transform .1s,box-shadow .1s,background-color .15s;display:flex}.btn-icon:hover{background:#fdfbf7}.btn-icon:active{box-shadow:0 0 0 var(--border-crease), 0 1px 2px var(--paper-shadow);transform:translateY(2px)}#stage{flex-direction:column;flex:1;justify-content:space-between;align-items:center;width:100%;min-height:0;display:flex;position:relative}#canvas-wrapper{flex:1;justify-content:center;align-items:center;width:100%;min-height:0;padding:4px;display:flex;position:relative}#game-canvas{max-width:100%;max-height:100%;box-shadow:0 10px 28px var(--paper-shadow-deep), 0 2px 6px var(--paper-shadow);cursor:pointer;touch-action:none;border-radius:12px;display:block}.toast{color:#fffaf0;z-index:50;pointer-events:none;white-space:nowrap;background:#39281e;border-radius:24px;padding:8px 18px;font-size:13px;font-weight:600;transition:opacity .25s,transform .25s;position:absolute;top:12px;left:50%;transform:translate(-50%)translateY(0);box-shadow:0 4px 16px #0000004d}.toast.hidden{opacity:0;pointer-events:none;transform:translate(-50%)translateY(-12px)}#control-deck{flex-direction:column;flex-shrink:0;align-items:center;gap:10px;width:100%;padding-top:8px;display:flex}.deck-actions{justify-content:center;align-items:center;gap:12px;width:100%;max-width:520px;display:flex}.btn-tactile{font-family:var(--font-body);border:1px solid var(--border-kraft);cursor:pointer;border-radius:10px;justify-content:center;align-items:center;gap:8px;padding:10px 18px;font-size:14px;font-weight:600;transition:transform .1s,box-shadow .1s,background-color .15s;display:inline-flex;position:relative}.btn-primary{background:var(--color-terracotta);color:#fff9f2;border-color:#a33e1a;box-shadow:0 4px #8b3415,0 6px 12px #8b34154d}.btn-primary:hover{background:var(--color-terracotta-hover)}.btn-primary:active{transform:translateY(3px);box-shadow:0 1px #8b3415,0 2px 4px #8b341540}.btn-secondary{background:var(--paper-sheet);border-color:var(--border-kraft);color:var(--color-ink);box-shadow:0 3px 0 var(--border-crease), 0 4px 8px var(--paper-shadow)}.btn-secondary:hover{background:#faf4e9}.btn-secondary:active{box-shadow:0 1px 0 var(--border-crease), 0 2px 4px var(--paper-shadow);transform:translateY(2px)}.btn-icon-glyph{font-size:15px}.key-hint{font-family:var(--font-mono);color:inherit;background:#0000001f;border-radius:4px;padding:2px 6px;font-size:10px;font-weight:700}.btn-primary .key-hint{background:#ffffff38}.touch-dpad{flex-direction:column;align-items:center;gap:4px;margin-top:4px;display:none}.dpad-middle{align-items:center;gap:4px;display:flex}.dpad-center{border:1px dashed var(--border-crease);background:#ecdcc1;border-radius:8px;width:44px;height:44px}.dpad-btn{background:var(--paper-sheet);border:1px solid var(--border-kraft);width:46px;height:44px;color:var(--color-ink);cursor:pointer;box-shadow:0 3px 0 var(--border-crease), 0 4px 8px var(--paper-shadow);touch-action:none;-webkit-touch-callout:none;border-radius:9px;justify-content:center;align-items:center;font-size:15px;font-weight:700;display:flex}.dpad-btn:active{box-shadow:0 1px 0 var(--border-crease), 0 2px 4px var(--paper-shadow);background:#f4ecdc;transform:translateY(2px)}.modal-backdrop{-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);z-index:100;opacity:1;visibility:visible;background:#241a118c;justify-content:center;align-items:center;padding:16px;transition:opacity .25s,visibility .25s;display:flex;position:fixed;inset:0}.modal-backdrop.hidden{opacity:0;visibility:hidden;pointer-events:none}.modal-card{background:var(--paper-sheet);border:2px solid var(--border-kraft);width:100%;max-width:460px;box-shadow:0 18px 40px #281a0e66, 0 4px 12px var(--paper-shadow);text-align:center;border-radius:18px;padding:28px 24px;animation:.28s cubic-bezier(.18,.89,.32,1.28) modalPop;position:relative}@keyframes modalPop{0%{opacity:0;transform:scale(.92)translateY(12px)}to{opacity:1;transform:scale(1)translateY(0)}}.origami-seal{border:2px solid var(--color-washi-gold);width:58px;height:58px;color:var(--color-terracotta);background:#fbf0dc;border-radius:50%;justify-content:center;align-items:center;margin:0 auto 12px;font-size:30px;display:flex;box-shadow:0 4px 12px #c8953847}.seal-defeat{color:#dc2626;background:#fee2e2;border-color:#ef4444;font-size:32px;animation:.45s sealShake;box-shadow:0 4px 14px #ef444459}@keyframes sealShake{0%,to{transform:rotate(0)}25%{transform:rotate(-8deg)}75%{transform:rotate(8deg)}}.defeat-card{box-shadow:0 18px 45px #b91c1c47, 0 4px 14px var(--paper-shadow);background:#fffdfc;border-color:#fca5a5}.modal-title{font-family:var(--font-display);color:var(--color-ink);margin-bottom:6px;font-size:24px;font-weight:700}.modal-subtitle{color:var(--color-ink-muted);margin-bottom:20px;font-size:14px}.victory-stats{border:1px solid var(--border-kraft);background:#f7efe1;border-radius:12px;justify-content:space-around;margin-bottom:24px;padding:12px 16px;display:flex}.v-stat{flex-direction:column;align-items:center;display:flex}.v-label{text-transform:uppercase;color:var(--color-ink-muted);margin-bottom:2px;font-size:11px;font-weight:600}.v-value{font-family:var(--font-mono);color:var(--color-ink);font-size:20px;font-weight:700}.v-stars{color:var(--color-washi-gold);letter-spacing:2px;font-size:18px}.modal-actions{justify-content:center;gap:12px;display:flex}.btn-large{padding:12px 28px;font-size:15px}.btn-full{width:100%}.help-card{text-align:left;max-width:520px;max-height:90vh;overflow-y:auto}.modal-header{justify-content:space-between;align-items:center;margin-bottom:16px;display:flex}.btn-close{color:var(--color-ink-muted);cursor:pointer;background:0 0;border:none;padding:4px;font-size:18px;font-weight:700}.btn-close:hover{color:var(--color-ink)}.help-content{flex-direction:column;gap:14px;margin-bottom:24px;display:flex}.rule-item{border:1px solid var(--border-kraft);background:#f7efe1;border-radius:10px;align-items:flex-start;gap:14px;padding:10px 14px;display:flex}.rule-number{font-family:var(--font-display);color:var(--color-terracotta);font-size:18px;font-weight:700;line-height:1.2}.rule-item h3{color:var(--color-ink);margin-bottom:3px;font-size:14px;font-weight:700}.rule-item p{color:var(--color-ink-muted);font-size:13px;line-height:1.45}.btn-level-badge{color:var(--color-matcha);cursor:pointer;background:#edf7ef;border:1px solid #c2e0c8;border-radius:8px;align-items:center;gap:5px;padding:3px 9px;font-family:inherit;transition:all .15s;display:inline-flex}.btn-level-badge:hover{background:#def0e2;transform:translateY(-1px)}.dropdown-caret{opacity:.7;font-size:9px}.stat-gold{color:#b58022!important}.btn-char-toggle{color:#065f46;background:#ecfdf5;border-color:#a7f3d0}.btn-char-toggle:hover{background:#d1fae5}.characters-card{text-align:left;max-width:680px;max-height:88vh;overflow-y:auto}.characters-grid{grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:12px;margin-top:16px;display:grid}.character-card{background:var(--paper-sheet);border:1.5px solid var(--border-kraft);box-shadow:0 3px 6px var(--paper-shadow);cursor:pointer;border-radius:12px;flex-direction:column;justify-content:space-between;padding:14px;transition:all .15s;display:flex;position:relative}.character-card:hover{border-color:var(--color-washi-gold);box-shadow:0 6px 14px var(--paper-shadow);transform:translateY(-2px)}.character-card.active-character{border:2px solid var(--color-terracotta);background:#fffbf9;box-shadow:0 4px 12px #c4552e38}.char-card-top{align-items:center;gap:10px;margin-bottom:8px;display:flex}.char-avatar-box{border-radius:10px;justify-content:center;align-items:center;width:44px;height:44px;font-size:24px;display:flex;box-shadow:inset 0 1px 3px #00000014}.char-names-box{flex-direction:column;display:flex}.char-card-name{font-family:var(--font-display);color:var(--color-ink);font-size:15px;font-weight:700;line-height:1.2}.char-card-species{color:var(--color-ink-muted);font-size:11px;font-weight:600}.char-card-desc{color:var(--color-ink-muted);flex:1;margin-bottom:12px;font-size:12px;line-height:1.35}.btn-select-char{width:100%;font-family:var(--font-body);border:1px solid var(--border-kraft);color:var(--color-ink);cursor:pointer;text-align:center;background:#fdfaf4;border-radius:8px;padding:6px 10px;font-size:12px;font-weight:700;transition:all .15s}.character-card.active-character .btn-select-char{background:var(--color-terracotta);color:#fff;border-color:var(--color-terracotta)}.levels-card{text-align:left;max-width:680px;max-height:88vh;overflow-y:auto}.chapters-list{flex-direction:column;gap:16px;margin-top:14px;display:flex}.chapter-section{border:1px solid var(--border-kraft);background:#fbf6ec;border-radius:12px;padding:14px}.chapter-title{font-family:var(--font-display);color:var(--color-terracotta);align-items:center;gap:6px;margin-bottom:10px;font-size:15px;font-weight:700;display:flex}.chapter-grid{grid-template-columns:repeat(auto-fill,minmax(136px,1fr));gap:8px;display:grid}.level-card-btn{background:var(--paper-sheet);border:1px solid var(--border-kraft);cursor:pointer;text-align:left;box-shadow:0 2px 4px var(--paper-shadow);border-radius:9px;flex-direction:column;align-items:flex-start;gap:4px;padding:9px 11px;transition:all .15s;display:flex}.level-card-btn:hover{border-color:var(--color-washi-gold);box-shadow:0 4px 8px var(--paper-shadow);background:#fffbf2;transform:translateY(-2px)}.level-card-btn.active-level{border:2px solid var(--color-terracotta);background:#fdf5f0}.level-card-num{font-family:var(--font-mono);color:var(--color-matcha);font-size:11px;font-weight:700}.level-card-name{font-family:var(--font-body);color:var(--color-ink);font-size:12px;font-weight:600;line-height:1.25}.level-card-tags{flex-wrap:wrap;gap:3px;margin-top:2px;display:flex}.mech-tag{color:var(--color-ink-muted);background:#f0e6d6;border-radius:4px;padding:2px 6px;font-size:9px;font-weight:700}.mech-tag-gold{color:#9c6c17;background:#faebd0}.mech-tag-ink{color:#2b221a;background:#e2dbd5}.mech-tag-wind{color:#2b5585;background:#d8e7f8}.mech-tag-spikes{color:#166534;background:#dcfce7}.mech-tag-gate{color:#991b1b;background:#fee2e2}.mech-tag-seal{color:#92400e;background:#fef3c7}.mech-tag-fragile{color:#854d0e;background:#fef08a}.level-card-stars{color:#eab308;letter-spacing:1px;margin-top:2px;font-size:11px}.btn-badge-toggle{font-family:var(--font-body);cursor:pointer;border:1px solid var(--border-kraft);background:var(--paper-sheet);box-shadow:0 2px 0 var(--border-crease), 0 2px 5px var(--paper-shadow);border-radius:20px;align-items:center;gap:5px;padding:5px 10px;font-size:12px;font-weight:700;transition:transform .1s,background-color .15s;display:inline-flex}.btn-badge-toggle:active{box-shadow:0 0 0 var(--border-crease);transform:translateY(2px)}.btn-mode-challenge{color:var(--color-terracotta);background:#fff5f2;border-color:#fca5a5}.btn-mode-challenge:hover{background:#ffebe5}.btn-mode-zen{color:var(--color-matcha);background:#f0fdf4;border-color:#bbf7d0}.btn-mode-zen:hover{background:#dcfce7}.btn-lang-toggle{font-size:11px;font-weight:800;font-family:var(--font-mono);width:auto;padding:0 8px}.stat-muted{color:var(--color-ink-faint)}.stat-warn{color:#d97706!important}.stat-danger{animation:.8s infinite alternate pulse-danger;color:#dc2626!important}@keyframes pulse-danger{0%{transform:scale(1)}to{transform:scale(1.1)}}.hint-banner{border:1.5px solid var(--color-washi-gold);z-index:45;background:#fffdf5;border-radius:12px;justify-content:space-between;align-items:center;gap:10px;width:540px;max-width:90%;padding:8px 16px;transition:opacity .25s,transform .25s;display:flex;position:absolute;top:10px;left:50%;transform:translate(-50%)translateY(0);box-shadow:0 6px 18px #402d1a2e}.hint-banner.hidden{opacity:0;pointer-events:none;transform:translate(-50%)translateY(-14px)}.hint-icon{flex-shrink:0;font-size:18px}.hint-message{color:var(--color-ink);flex:1;font-size:13px;font-weight:600;line-height:1.35}.btn-hint-close{color:var(--color-ink-muted);cursor:pointer;background:0 0;border:none;border-radius:4px;padding:2px 6px;font-size:14px;font-weight:700}.btn-hint-close:hover{color:var(--color-ink);background:#0000000f}@media (width<=820px){#game-header{flex-wrap:wrap;gap:8px;padding:8px 12px}.header-left{order:1}.header-right{order:2}.header-center{order:3;width:100%;margin-top:4px}}@media (width<=680px){#app-container{padding:6px}#game-header{margin-bottom:6px;padding:6px 10px}.brand-crest{width:30px;height:30px;font-size:15px}.brand-title{font-size:14px}.brand-subtitle{display:none}.level-name{font-size:12px}.btn-badge-toggle{padding:4px 8px;font-size:11px}.touch-dpad{display:flex}.deck-actions{gap:6px;max-width:100%}.btn-tactile{padding:7px 10px;font-size:12px}.key-hint{display:none}}@media (pointer:coarse){.touch-dpad{display:flex}}
