*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
:root{--bg:#f5f5f5;--text:#222;--header-bg:#fff;--header-border:#ddd;--cell-bg:#fff;--cell-border:#bbb;--cell-filled:#333;--cell-x:#cc3333;--clue-color:#555;--clue-done:#bbb;--accent:#4a90d9;--modal-bg:#fff;--modal-text:#222;--overlay-bg:rgba(0,0,0,0.4);--group-border:#666}
[data-theme="dark"]{--bg:#1a1a2e;--text:#e0e0e0;--header-bg:#16213e;--header-border:#0f3460;--cell-bg:#2a2a4a;--cell-border:#555;--cell-filled:#e0e0e0;--cell-x:#ff6b6b;--clue-color:#aaa;--clue-done:#555;--accent:#4a90d9;--modal-bg:#16213e;--modal-text:#e0e0e0;--overlay-bg:rgba(0,0,0,0.6);--group-border:#888}
html,body{height:100%;font-family:'Inter',sans-serif;background:var(--bg);color:var(--text);-webkit-user-select:none;user-select:none;overflow-x:hidden}
body{display:flex;justify-content:center}
.app{width:100%;display:flex;flex-direction:column;align-items:center}
.app-header{width:100%;display:flex;align-items:center;justify-content:space-between;padding:12px 16px;background:var(--header-bg);border-bottom:1px solid var(--header-border)}
.app-title{font-size:1.25rem;font-weight:700}
.icon-btn{background:none;border:none;cursor:pointer;color:var(--text);padding:6px;border-radius:8px;display:flex;align-items:center;justify-content:center;width:36px;height:36px}
.icon-btn:hover{background:rgba(128,128,128,0.15)}
.icon-btn svg{width:20px;height:20px}
[data-theme="light"] .icon-moon{display:none}[data-theme="dark"] .icon-sun{display:none}[data-theme="dark"] .icon-moon{display:block}
.game-container{padding:12px;display:flex;flex-direction:column;align-items:center;gap:10px;width:100%}
.controls-bar{display:flex;align-items:center;gap:16px}
.size-btns{display:flex;gap:4px}
.size-btn{padding:6px 14px;font-family:inherit;font-size:.8rem;font-weight:600;border:1px solid var(--header-border);border-radius:6px;background:var(--cell-bg);color:var(--text);cursor:pointer}
.size-btn.active{background:var(--accent);color:#fff;border-color:var(--accent)}
.timer{font-size:.85rem;font-weight:600;opacity:.6}
.puzzle-wrapper{overflow:visible;max-width:100%}
table.nonogram{border-collapse:collapse}
table.nonogram td{text-align:center;vertical-align:middle;font-size:.65rem;font-weight:600;color:var(--clue-color)}
table.nonogram td.cell{background:var(--cell-bg);border:1px solid var(--cell-border);cursor:pointer;font-size:.9rem;font-weight:700;aspect-ratio:1;min-width:20px;min-height:20px}
table.nonogram td.cell.filled{background:var(--cell-filled)}
table.nonogram td.cell.marked{color:var(--cell-x)}
table.nonogram td.cell.gb-right{border-right:2px solid var(--group-border)}
table.nonogram td.cell.gb-bottom{border-bottom:2px solid var(--group-border)}
table.nonogram td.corner-cell{width:auto;height:auto}
table.nonogram td.clue-cell{padding:2px 6px;white-space:nowrap}
table.nonogram td.clue-cell.col-clue{vertical-align:bottom;padding-bottom:4px;line-height:1.4}
table.nonogram td.clue-cell.row-clue{text-align:right;padding-right:6px}
table.nonogram td.clue-cell.row-clue .clue-num+.clue-num{margin-left:5px}
table.nonogram td.clue-cell.done{color:var(--clue-done);text-decoration:line-through}
.hint{font-size:.7rem;opacity:.5}
.new-btn{padding:8px 24px;font-family:inherit;font-size:.85rem;font-weight:600;border:none;border-radius:8px;background:var(--accent);color:#fff;cursor:pointer}
.modal-overlay{position:fixed;inset:0;background:var(--overlay-bg);display:none;align-items:center;justify-content:center;z-index:100}
.modal-overlay.active{display:flex}
.modal{background:var(--modal-bg);color:var(--modal-text);border-radius:16px;padding:28px;text-align:center;max-width:300px;width:90%;box-shadow:0 12px 40px rgba(0,0,0,0.2)}
.win-icon{font-size:48px;margin-bottom:6px}
.modal-title{font-size:1.2rem;font-weight:700;margin-bottom:4px}
.modal-sub{font-size:.85rem;opacity:.7;margin-bottom:14px}
.play-again-btn{width:100%;padding:12px;font-family:inherit;font-size:1rem;font-weight:600;border:none;border-radius:10px;background:var(--accent);color:#fff;cursor:pointer}