:root{--bg-primary: #0d1117;--bg-surface: #161b22;--bg-elevated: #1c2128;--bg-overlay: #21262d;--border-default: #30363d;--border-muted: #21262d;--border-subtle: #1b1f24;--text-primary: #e6edf3;--text-secondary: #8b949e;--text-muted: #6e7681;--text-placeholder: #484f58;--accent-green: #7cfc00;--accent-orange: #ff6b35;--accent-blue: #58a6ff;--accent-gold: #ffd700;--btn-bg: rgba(110, 118, 129, .1);--btn-bg-hover: rgba(110, 118, 129, .2);--btn-bg-active: rgba(110, 118, 129, .3);--btn-border: #3d444d;--btn-border-hover: #5a6270;--btn-primary-bg: #2a5a8a;--btn-primary-bg-hover: #316daa;--btn-primary-border: #3d7ab5;--btn-success-bg: #238636;--btn-success-bg-hover: #2ea043;--btn-success-border: #3d8b3d;--radius-sm: 6px;--radius-md: 8px;--radius-lg: 12px;--shadow-sm: 0 1px 2px rgba(0, 0, 0, .3);--shadow-md: 0 3px 8px rgba(0, 0, 0, .4);--shadow-lg: 0 8px 24px rgba(0, 0, 0, .5);--font-body: -apple-system, BlinkMacSystemFont, "Segoe UI", "Noto Sans", Helvetica, Arial, sans-serif;--font-mono: "SF Mono", "Cascadia Code", "Fira Code", "Menlo", "Consolas", monospace;--transition-fast: .15s ease;--transition-normal: .25s ease}*{margin:0;padding:0;box-sizing:border-box}html,body{width:100%;min-height:100%;overflow-x:hidden;overflow-y:auto}body{font-family:var(--font-body);background-color:var(--bg-primary);color:var(--text-primary);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;line-height:1.5}#app{width:100%;min-height:100vh;display:flex;flex-direction:column;align-items:center}header{width:100%;padding:20px 24px 12px;text-align:center;position:relative;border-bottom:1px solid var(--border-muted)}header h1{font-family:var(--font-body);font-size:22px;font-weight:600;letter-spacing:3px;text-transform:uppercase;color:var(--text-primary)}button{font-family:var(--font-body);border:none;outline:none;cursor:pointer;transition:all var(--transition-fast)}button:focus-visible{outline:2px solid var(--accent-blue);outline-offset:2px}#help-button{position:absolute;top:16px;left:20px;background:var(--btn-bg);border:1px solid var(--btn-border);color:var(--text-secondary);font-size:16px;width:36px;height:36px;display:flex;align-items:center;justify-content:center;border-radius:var(--radius-sm);line-height:1;transition:all var(--transition-fast)}#help-button:hover{background:var(--btn-bg-hover);border-color:var(--btn-border-hover);color:var(--text-primary)}#help-button:active{background:var(--btn-bg-active);transform:scale(.95)}#toggle-mode{position:absolute;top:16px;right:20px;background:var(--btn-bg);border:1px solid var(--btn-border);color:var(--text-secondary);font-size:13px;font-weight:500;padding:6px 16px;border-radius:var(--radius-sm);letter-spacing:.3px;transition:all var(--transition-fast)}#toggle-mode:hover{background:var(--btn-bg-hover);border-color:var(--btn-border-hover);color:var(--text-primary)}#toggle-mode:active{background:var(--btn-bg-active);transform:scale(.97)}#game-controls{display:flex;align-items:center;justify-content:center;gap:12px;padding:12px 24px;width:100%;background:var(--bg-surface);border-bottom:1px solid var(--border-muted)}#turn-counter,#firebreak-counter,#value-counter{font-size:13px;font-weight:500;color:var(--text-secondary);padding:4px 10px;background:var(--bg-elevated);border-radius:var(--radius-sm);border:1px solid var(--border-subtle)}#turn-counter span,#firebreak-counter span,#value-counter span{color:var(--text-primary);font-weight:600;font-family:var(--font-mono)}#skip-turn,#finish-btn,#restart-btn{background:var(--btn-bg);border:1px solid var(--btn-border);color:var(--text-secondary);font-size:13px;font-weight:500;padding:6px 16px;border-radius:var(--radius-sm);letter-spacing:.3px;transition:all var(--transition-fast)}#skip-turn:hover,#finish-btn:hover,#restart-btn:hover{background:var(--btn-bg-hover);border-color:var(--btn-border-hover);color:var(--text-primary)}#skip-turn:active,#finish-btn:active,#restart-btn:active{background:var(--btn-bg-active);transform:scale(.97)}#skip-turn:disabled,#finish-btn:disabled,#restart-btn:disabled{background:var(--bg-elevated);border-color:var(--border-subtle);color:var(--text-placeholder);cursor:not-allowed;transform:none}.phase-status{font-size:11px;font-weight:600;text-transform:uppercase;letter-spacing:1.5px;transition:color var(--transition-normal);padding:4px 10px;border-radius:var(--radius-sm);min-width:140px;text-align:center;white-space:nowrap}.phase-status.status-player-turn{color:var(--accent-green);background:#7cfc0014}.phase-status.status-fire-spreading{color:var(--accent-orange);background:#ff6b3514}.phase-status.status-game-over{color:var(--text-muted);background:#6e768114}#game-area{position:relative;flex:1 0 auto;display:flex;align-items:center;justify-content:center;width:100%;padding:24px 32px 32px}#game-area.phase-player-turn{box-shadow:inset 0 0 0 2px #7cfc001f;transition:box-shadow var(--transition-normal)}#game-area.phase-fire-spreading{box-shadow:inset 0 0 0 2px #ff6b351f;transition:box-shadow var(--transition-normal)}#game-area.phase-game-over{box-shadow:none;transition:box-shadow var(--transition-normal)}#canvas-container{display:flex;align-items:center;justify-content:center}#game-canvas{image-rendering:pixelated;image-rendering:-moz-crisp-edges;image-rendering:crisp-edges;display:block;touch-action:none;-webkit-user-select:none;user-select:none;-webkit-tap-highlight-color:transparent;cursor:pointer}.emoji-grid{display:grid;gap:1px;background-color:var(--bg-surface);padding:1px;line-height:1;touch-action:none;-webkit-user-select:none;user-select:none;-webkit-tap-highlight-color:transparent;cursor:pointer}.emoji-grid span{display:flex;align-items:center;justify-content:center;background-color:var(--bg-primary)}#legend{position:absolute;right:32px;top:50%;transform:translateY(-50%);display:flex;flex-direction:column;gap:8px;font-size:13px;color:var(--text-secondary);min-width:120px;background:var(--bg-surface);border:1px solid var(--border-default);border-radius:var(--radius-md);padding:14px 16px;box-shadow:var(--shadow-sm)}#legend h2{font-size:10px;text-transform:uppercase;letter-spacing:1.5px;color:var(--text-muted);font-weight:600;margin-bottom:4px;padding-bottom:6px;border-bottom:1px solid var(--border-muted)}.legend-item{display:flex;align-items:center;gap:10px;position:relative;cursor:default}.legend-item[data-tooltip]:hover:after{content:attr(data-tooltip);position:absolute;right:calc(100% + 10px);top:50%;transform:translateY(-50%);background:var(--bg-overlay);color:var(--text-primary);font-size:11px;font-weight:400;line-height:1.4;padding:6px 10px;border-radius:var(--radius-sm);border:1px solid var(--border-default);box-shadow:var(--shadow-md);white-space:nowrap;z-index:10;pointer-events:none}.legend-icon{width:28px;height:28px;display:flex;align-items:center;justify-content:center;flex-shrink:0}.legend-icon canvas{image-rendering:pixelated;image-rendering:crisp-edges;display:block}.legend-label{white-space:nowrap;font-size:12px;font-weight:500;color:var(--text-secondary)}.legend-points{margin-left:auto;font-size:10px;font-weight:600;color:var(--accent-gold);white-space:nowrap}.hidden{display:none!important}.grid-locked{pointer-events:none!important}.placement-flash{animation:flash-confirm .25s ease-out}@keyframes flash-confirm{0%{filter:brightness(1.3)}to{filter:brightness(1)}}#score-overlay{position:absolute;inset:0;z-index:20;display:flex;align-items:center;justify-content:center;background:#0d1117d9;backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);border-radius:var(--radius-md)}#score-overlay.fade-in{animation:overlay-appear .5s ease-out forwards}@keyframes overlay-appear{0%{opacity:0}to{opacity:1}}#score-display{position:relative;text-align:center;padding:28px 32px 32px;max-width:380px;width:90%;background:var(--bg-surface);border:1px solid var(--border-default);border-radius:var(--radius-lg);box-shadow:var(--shadow-lg)}#score-close{position:absolute;top:10px;right:10px;width:28px;height:28px;display:flex;align-items:center;justify-content:center;background:var(--btn-bg);border:1px solid var(--btn-border);color:var(--text-secondary);font-size:18px;line-height:1;border-radius:var(--radius-sm);cursor:pointer;transition:all var(--transition-fast)}#score-close:hover{background:var(--btn-bg-hover);border-color:var(--btn-border-hover);color:var(--text-primary)}#score-close:active{background:var(--btn-bg-active);transform:scale(.92)}#score-display.fade-in{animation:score-appear .6s ease-out forwards}@keyframes score-appear{0%{opacity:0;transform:translateY(12px) scale(.96)}to{opacity:1;transform:translateY(0) scale(1)}}#score-percentage{font-size:52px;font-weight:700;letter-spacing:2px;color:var(--text-primary);line-height:1.1}#score-tier{font-size:18px;margin-top:8px;text-transform:uppercase;letter-spacing:4px;font-weight:700}.tier-perfect{color:var(--accent-gold)}.tier-excellent{color:var(--accent-green)}.tier-great{color:var(--accent-blue)}.tier-good{color:var(--text-secondary)}.tier-poor{color:var(--text-muted)}#score-value-saved{font-size:15px;font-weight:600;color:var(--text-secondary);margin-top:12px;font-family:var(--font-mono);letter-spacing:.5px}#score-value-saved .value-highlight{color:var(--accent-gold)}#score-nudge{font-size:13px;color:var(--text-muted);margin-top:14px;font-style:italic;line-height:1.5}#score-display.perfect #score-percentage{color:var(--accent-gold);text-shadow:0 0 16px rgba(255,215,0,.4)}.streak-display{margin-top:16px;font-size:13px;color:var(--text-secondary);display:flex;align-items:center;justify-content:center;gap:8px;padding:10px 16px;background:var(--bg-surface);border-radius:var(--radius-md);border:1px solid var(--border-muted)}.streak-value{font-weight:700;color:#ff9500;font-family:var(--font-mono);font-size:15px}.streak-separator{color:var(--border-default)}.streak-label{color:var(--text-muted);font-size:12px;text-transform:uppercase;letter-spacing:.5px;font-weight:500}.share-buttons{display:flex;gap:10px;justify-content:center;margin-top:20px}.share-button{display:inline-flex;align-items:center;justify-content:center;background:var(--btn-primary-bg);border:1px solid var(--btn-primary-border);color:#fff;font-size:14px;font-weight:600;padding:10px 28px;cursor:pointer;border-radius:var(--radius-sm);font-family:var(--font-body);letter-spacing:.5px;transition:all var(--transition-fast);box-shadow:var(--shadow-sm)}.share-button:hover:not(:disabled){background:var(--btn-primary-bg-hover);border-color:#4d9ad5;box-shadow:var(--shadow-md);transform:translateY(-1px)}.share-button:active:not(:disabled){background:#1e4a7a;transform:translateY(0);box-shadow:var(--shadow-sm)}.share-button:disabled{cursor:default}.share-button.share-feedback{background:var(--btn-success-bg);border-color:var(--btn-success-border)}dialog#tutorial{background:var(--bg-surface);color:var(--text-primary);border:1px solid var(--border-default);border-radius:var(--radius-lg);padding:28px;max-width:400px;width:90vw;font-family:var(--font-body);box-shadow:var(--shadow-lg);margin:auto}dialog#tutorial::backdrop{background:#000000bf;backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px)}.tutorial-heading{font-size:18px;margin-bottom:14px;text-align:center;font-weight:600;letter-spacing:1px;color:var(--text-primary)}.tutorial-intro{font-size:14px;color:var(--text-secondary);text-align:center;margin-bottom:12px;line-height:1.6}.tutorial-terrain-guide{display:flex;flex-direction:column;gap:4px;margin-bottom:16px;padding:10px 12px;background:var(--bg-elevated);border-radius:var(--radius-sm);border:1px solid var(--border-muted)}.tutorial-terrain-row{display:flex;align-items:baseline;gap:8px;font-size:12px;line-height:1.5}.tutorial-terrain-name{font-weight:600;color:var(--text-primary);min-width:42px;flex-shrink:0}.tutorial-terrain-desc{color:var(--text-muted)}.tutorial-terrain-desc strong{color:var(--accent-gold);font-weight:600}.tutorial-status{font-size:13px;color:#ff9500;text-align:center;margin:14px 0;min-height:1.5em;font-weight:500}.tutorial-done-btn{display:block;width:100%;margin:20px auto 0;background:var(--btn-success-bg);border:1px solid var(--btn-success-border);color:#fff;font-size:14px;font-weight:600;padding:10px 32px;cursor:pointer;border-radius:var(--radius-sm);font-family:var(--font-body);letter-spacing:.5px;transition:all var(--transition-fast);box-shadow:var(--shadow-sm)}.tutorial-done-btn:hover{background:var(--btn-success-bg-hover);box-shadow:var(--shadow-md);transform:translateY(-1px)}.tutorial-done-btn:active{background:#196c2e;transform:translateY(0);box-shadow:var(--shadow-sm)}.tutorial-mini-grid{display:grid;gap:2px;background-color:var(--border-default);padding:2px;margin:0 auto;width:fit-content;touch-action:none;-webkit-user-select:none;user-select:none;cursor:pointer;border-radius:var(--radius-sm)}.tutorial-mini-grid canvas{display:block;background-color:var(--bg-surface);width:48px;height:48px;image-rendering:pixelated;transition:transform .1s ease,background-color .15s ease;border-radius:2px}.tutorial-mini-grid canvas:active{transform:scale(.92)}.tutorial-mini-grid canvas.tutorial-highlight{background-color:#7cfc0014}#game-over-actions{display:flex;gap:10px;justify-content:center;padding:12px 24px 20px;width:100%}#game-over-actions button{font-size:14px;font-weight:600;padding:10px 28px;border-radius:var(--radius-sm);letter-spacing:.5px;transition:all var(--transition-fast);box-shadow:var(--shadow-sm)}#results-btn{background:var(--btn-primary-bg);border:1px solid var(--btn-primary-border);color:#fff}#results-btn:hover{background:var(--btn-primary-bg-hover);border-color:#4d9ad5;box-shadow:var(--shadow-md);transform:translateY(-1px)}#results-btn:active{background:#1e4a7a;transform:translateY(0);box-shadow:var(--shadow-sm)}#reset-btn{background:var(--btn-bg);border:1px solid var(--btn-border);color:var(--text-secondary)}#reset-btn:hover{background:var(--btn-bg-hover);border-color:var(--btn-border-hover);color:var(--text-primary);box-shadow:var(--shadow-md);transform:translateY(-1px)}#reset-btn:active{background:var(--btn-bg-active);transform:translateY(0);box-shadow:var(--shadow-sm)}@media(max-width:768px){header{padding:16px 16px 10px}header h1{font-size:17px}#help-button{width:32px;height:32px;font-size:14px;top:13px;left:14px}#toggle-mode{font-size:12px;padding:5px 12px;top:13px;right:14px}#game-controls{gap:8px;padding:10px 14px;flex-wrap:wrap}#game-area{flex-direction:column;gap:16px;padding:8px 16px 16px}#legend{position:static;transform:none;flex-direction:row;flex-wrap:wrap;justify-content:center;min-width:unset;gap:8px 14px;padding:10px 14px}#legend h2{width:100%;text-align:center;border-bottom:none;padding-bottom:0}#score-display{padding:20px 20px 24px;max-width:320px}#score-percentage{font-size:40px}#score-tier{font-size:15px}#score-value-saved{font-size:13px}.share-buttons{flex-direction:column}.share-button{width:100%;padding:12px 24px}#game-over-actions{padding:10px 14px 16px}#game-over-actions button{flex:1;padding:10px 20px}.tutorial-done-btn{padding:12px 24px}}@media(max-width:380px){#game-controls{gap:6px;padding:8px 10px}#turn-counter,#firebreak-counter{font-size:12px;padding:3px 8px}#skip-turn,#finish-btn,#restart-btn{font-size:12px;padding:5px 12px}.phase-status{font-size:10px;min-width:120px;letter-spacing:1px}}