:root{--bg: #0b0b0b;--bg-2: #141414;--bg-3: #1a1a1a;--ink: #f5f2ea;--muted: #a8a396;--gold: #c9a227;--gold-deep: #8a7320;--line: rgba(255, 255, 255, .12);--green: #2a6347;--water: #3a8fb7;--rock: #5a5650;--road: #3d3a36;--swale: #c9a227;--soil-hi: #4a3a28;--soil-lo: #6b5340;--danger: #c8102e;--ok: #3d8b65;--radius: 12px;--font: system-ui, -apple-system, "Segoe UI", Roboto, Ubuntu, sans-serif}*,*:before,*:after{box-sizing:border-box}html,body{margin:0;padding:0;min-height:100%;background:var(--bg);color:var(--ink);font-family:var(--font);-webkit-tap-highlight-color:transparent;touch-action:manipulation}#app{min-height:100dvh;display:flex;flex-direction:column;max-width:520px;margin:0 auto}.screen{display:none;flex:1;flex-direction:column;padding:1rem 1rem 1.25rem;gap:.75rem}.screen.active{display:flex}.brand-row{display:flex;align-items:center;justify-content:space-between;gap:.75rem}.brand-row img.logo{height:28px;width:auto;opacity:.95}.lang-switch{display:flex;gap:.25rem}.lang-switch button{background:transparent;border:1px solid var(--line);color:var(--muted);font-size:.65rem;letter-spacing:.06em;text-transform:uppercase;padding:.25rem .4rem;border-radius:4px;cursor:pointer}.lang-switch button.active{border-color:var(--gold);color:var(--gold)}h1{font-size:1.55rem;font-weight:600;letter-spacing:.02em;margin:.25rem 0 0;line-height:1.2}h1 span.gold{color:var(--gold)}.tagline{color:var(--muted);font-size:.9rem;line-height:1.45;margin:0}.card{background:var(--bg-2);border:1px solid var(--line);border-radius:var(--radius);padding:1rem}.card h2{margin:0 0 .5rem;font-size:.75rem;letter-spacing:.14em;text-transform:uppercase;color:var(--gold);font-weight:600}.card p,.card li{margin:0;color:var(--ink);font-size:.9rem;line-height:1.45}.card ul{margin:.4rem 0 0;padding-left:1.1rem;color:var(--muted)}.card li{color:var(--muted);margin-bottom:.25rem}.btn{display:inline-flex;align-items:center;justify-content:center;gap:.4rem;border:none;border-radius:999px;padding:.85rem 1.25rem;font-size:.95rem;font-weight:600;cursor:pointer;font-family:inherit;transition:transform .12s ease,opacity .12s ease}.btn:active{transform:scale(.98)}.btn:disabled{opacity:.4;cursor:not-allowed}.btn-primary{background:var(--gold);color:#0b0b0b}.btn-ghost{background:transparent;color:var(--ink);border:1px solid var(--line)}.btn-danger{background:transparent;color:var(--muted);border:1px solid var(--line);font-size:.8rem;padding:.55rem .9rem}.btn-block{width:100%}.stack{display:flex;flex-direction:column;gap:.6rem;margin-top:auto}.level-list{display:flex;flex-direction:column;gap:.45rem;max-height:42vh;overflow:auto}.level-btn{display:flex;align-items:center;gap:.75rem;width:100%;text-align:left;background:var(--bg-3);border:1px solid var(--line);border-radius:10px;padding:.7rem .85rem;color:var(--ink);cursor:pointer;font-family:inherit}.level-btn .num{width:1.75rem;height:1.75rem;border-radius:50%;border:1px solid var(--gold);color:var(--gold);display:flex;align-items:center;justify-content:center;font-size:.8rem;font-weight:700;flex-shrink:0}.level-btn.done .num{background:var(--gold);color:#0b0b0b}.level-btn.locked{opacity:.45}.level-btn .meta{display:flex;flex-direction:column;gap:.1rem;min-width:0}.level-btn .meta strong{font-size:.9rem;font-weight:600}.level-btn .meta span{font-size:.72rem;color:var(--muted)}.hud{display:flex;flex-wrap:wrap;align-items:center;gap:.5rem .75rem}.hud .level-label{font-size:.7rem;letter-spacing:.12em;text-transform:uppercase;color:var(--gold);font-weight:600}.hud .stats{display:flex;flex-wrap:wrap;gap:.5rem;font-size:.78rem;color:var(--muted);flex:1}.hud .stats b{color:var(--ink);font-weight:600}.toolbar{display:flex;gap:.4rem;flex-wrap:wrap}.toolbar .btn{flex:1;min-width:0;padding:.65rem .5rem;font-size:.8rem}.board-wrap{min-height:280px;position:relative;flex:1;min-height:240px;display:flex;align-items:center;justify-content:center;background:var(--bg-2);border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;touch-action:none;-webkit-user-select:none;user-select:none}.board-wrap canvas{display:block;max-width:100%;max-height:100%;width:100%;height:auto}.legend{display:flex;flex-wrap:wrap;gap:.55rem .85rem;font-size:.68rem;color:var(--muted)}.legend span{display:inline-flex;align-items:center;gap:.3rem}.dot{width:.65rem;height:.65rem;border-radius:2px;display:inline-block}.dot-soil{background:linear-gradient(180deg,var(--soil-hi),var(--soil-lo))}.dot-swale{background:var(--swale)}.dot-rock{background:var(--rock)}.dot-road{background:var(--road)}.dot-water{background:var(--water);border-radius:50%}.hint-bar{font-size:.78rem;color:var(--muted);text-align:center;min-height:1.2em}.hint-bar.ok{color:var(--ok)}.hint-bar.warn{color:var(--gold)}.overlay{position:fixed;top:0;right:0;bottom:0;left:0;background:#000000b8;display:flex;align-items:flex-end;justify-content:center;z-index:20;padding:1rem;max-width:520px;margin:0 auto}.overlay.hidden{display:none}.sheet{background:var(--bg-2);border:1px solid var(--line);border-radius:16px 16px 12px 12px;padding:1.25rem;width:100%;max-width:480px;animation:slideUp .25s ease}@keyframes slideUp{0%{transform:translateY(24px);opacity:0}to{transform:translateY(0);opacity:1}}.sheet .badge{display:inline-block;font-size:.65rem;letter-spacing:.14em;text-transform:uppercase;color:var(--gold);border:1px solid var(--gold-deep);padding:.2rem .5rem;border-radius:4px;margin-bottom:.5rem}.sheet h2{margin:0 0 .4rem;font-size:1.25rem}.sheet .score-line{font-size:1.05rem;margin:.5rem 0}.sheet .score-line b.win{color:var(--ok)}.sheet .score-line b.lose{color:var(--danger)}.sheet .tip-box{background:var(--bg-3);border-left:3px solid var(--gold);padding:.75rem .85rem;margin:.75rem 0 1rem;border-radius:0 8px 8px 0}.sheet .tip-box strong{display:block;color:var(--gold);font-size:.72rem;letter-spacing:.1em;text-transform:uppercase;margin-bottom:.35rem}.sheet .tip-box p{margin:0;font-size:.88rem;line-height:1.45;color:var(--ink)}.sheet .actions{display:flex;flex-direction:column;gap:.5rem}.footer-note{font-size:.65rem;color:var(--muted);text-align:center;opacity:.7;margin-top:.25rem}@media(min-width:480px){.overlay{align-items:center}.sheet{border-radius:16px}}