:root{color-scheme:light;--color-bg: #fff8f0;--color-surface: #ffffff;--color-border: #e6d5c3;--color-text: #2f2a26;--color-muted: #6f6258;--color-accent: #e76f51;--color-accent-dark: #c45c41;--color-secondary: #f4a261;--color-heart: #e63946;--color-meter: #2a9d8f;--shadow-soft: 0 10px 30px rgba(47, 42, 38, .08);--radius-lg: 20px;--radius-md: 12px;--radius-sm: 8px;font-family:Segoe UI,system-ui,-apple-system,sans-serif;line-height:1.5;font-weight:400;color:var(--color-text);background:linear-gradient(180deg,#fff8f0,#fdebd3)}*,*:before,*:after{box-sizing:border-box}body{margin:0;min-height:100vh}button,select{font:inherit}#app{min-height:100vh}.app{width:min(1100px,100%);margin:0 auto;padding:1rem;display:flex;flex-direction:column;gap:1rem}.hud{display:grid;gap:1rem;padding:1.25rem;background:var(--color-surface);border:1px solid var(--color-border);border-radius:var(--radius-lg);box-shadow:var(--shadow-soft)}.hud__title{margin:0;font-size:clamp(1.75rem,4vw,2.5rem);line-height:1.1}.hud__subtitle{margin:.35rem 0 0;color:var(--color-muted)}.hud__group--stats{display:grid;gap:.75rem;grid-template-columns:repeat(auto-fit,minmax(140px,1fr))}.hud__stat{padding:.75rem;border-radius:var(--radius-md);background:#fff4e8;border:1px solid var(--color-border)}.hud__stat-label{display:block;font-size:.85rem;color:var(--color-muted);margin-bottom:.35rem}.hud__hearts{display:flex;gap:.25rem;font-size:1.35rem}.hud__heart{color:#d8c7b8}.hud__heart--filled{color:var(--color-heart)}.hud__timer{font-size:1.5rem;font-variant-numeric:tabular-nums;font-weight:700}.hud__meter{position:relative;height:1.75rem;border-radius:999px;background:#efe4d8;overflow:hidden}.hud__meter-fill{height:100%;background:linear-gradient(90deg,#2a9d8f,#57cc99);transition:width .3s ease}.hud__meter-label{position:absolute;top:0;right:0;bottom:0;left:0;display:grid;place-items:center;font-size:.85rem;font-weight:600}.app__main{display:grid;gap:1rem}.board{padding:1rem;background:var(--color-surface);border:1px solid var(--color-border);border-radius:var(--radius-lg);box-shadow:var(--shadow-soft)}.board__grid{display:grid;grid-template-columns:repeat(var(--board-size),minmax(0,1fr));gap:.35rem;width:min(100%,520px);margin:0 auto;aspect-ratio:1}.board__cell{display:grid;place-items:center;border:1px solid var(--color-border);border-radius:var(--radius-sm);background:color-mix(in srgb,var(--area-color, #fffaf4) 72%,white);cursor:pointer;transition:transform .15s ease,background-color .15s ease}.board__cell:disabled{cursor:not-allowed;opacity:.85}.board__cell--cross{background:color-mix(in srgb,var(--area-color, #fffaf4) 45%,#f0e4d8)}.board__cell--dog{background:color-mix(in srgb,var(--area-color, #fffaf4) 55%,#ffe8d6)}.board__cell--fail{background:color-mix(in srgb,var(--area-color, #fffaf4) 45%,#ffd6d6)}.board__cell:hover,.board__cell:focus-visible{background:#ffe8d6;transform:translateY(-1px);outline:2px solid var(--color-secondary);outline-offset:1px}.board__cell-placeholder{opacity:.35;font-size:clamp(.85rem,2vw,1.1rem)}.board__cell-mark{font-size:clamp(.85rem,2vw,1.15rem);line-height:1}.board__cell-mark--cross{color:var(--color-muted);font-weight:700}.board__cell-mark--dog{font-size:clamp(1rem,2.4vw,1.35rem)}.board__cell-mark--fail{color:var(--color-heart);font-weight:800}.board__hint{margin:1rem 0 0;text-align:center;color:var(--color-muted);font-size:.95rem}.controls{display:flex;flex-wrap:wrap;gap:1rem;align-items:end;justify-content:space-between;padding:1rem;background:var(--color-surface);border:1px solid var(--color-border);border-radius:var(--radius-lg);box-shadow:var(--shadow-soft)}.controls__field{display:grid;gap:.35rem;min-width:180px}.controls__label{font-size:.9rem;color:var(--color-muted)}.controls__select{padding:.65rem .75rem;border-radius:var(--radius-sm);border:1px solid var(--color-border);background:#fffaf4}.controls__actions{display:flex;flex-wrap:wrap;gap:.75rem}.controls__button{padding:.7rem 1.1rem;border-radius:999px;border:none;cursor:pointer;font-weight:600}.controls__button--secondary{background:#efe4d8;color:var(--color-text)}.controls__button--primary{background:var(--color-accent);color:#fff}.controls__button--primary:hover,.controls__button--primary:focus-visible{background:var(--color-accent-dark)}.overlays{position:relative}.overlay{position:fixed;top:0;right:0;bottom:0;left:0;display:grid;place-items:center;padding:1rem;background:#2f2a2659;z-index:10}.overlay--welcome{position:static;background:transparent;padding:0}.overlay--result .overlay__title{color:var(--color-accent)}.overlay--loss .overlay__title{color:var(--color-heart)}.overlay__action{margin-top:1rem;width:100%}.app--drawing-crosses{-webkit-user-select:none;user-select:none}.app--drawing-crosses .board__cell{cursor:crosshair}.overlay__panel{width:min(420px,100%);padding:1.25rem;border-radius:var(--radius-lg);background:var(--color-surface);border:1px solid var(--color-border);box-shadow:var(--shadow-soft);text-align:center}.overlay__panel--compact{width:100%}.overlay__title{margin:0 0 .5rem}.overlay__text{margin:0;color:var(--color-muted)}@media(min-width:768px){.app{padding:1.5rem}.hud{grid-template-columns:1fr 1.4fr;align-items:center}.app__main{grid-template-columns:minmax(0,1.4fr) minmax(260px,.8fr);align-items:start}.controls{flex-direction:column;align-items:stretch;height:100%}.controls__actions{margin-top:auto;flex-direction:column}.controls__button{width:100%}}@media(min-width:1024px){.app{padding:2rem;gap:1.5rem}.board__grid{width:min(100%,620px)}}