:root{color-scheme:light;font-family:Georgia,'Times New Roman',serif;background:#e4ddcf;color:#30291f;--accent:#765536;--focus:#28718b}
.branding{display:flex;align-items:center;gap:10px}.app-icon{border:0;background:transparent;padding:0;flex:none;border-radius:12px;line-height:0}.app-icon img{display:block;border-radius:12px;object-fit:contain}.app-icon:hover{background:transparent;filter:brightness(1.08)}dialog{padding:0;width:min(420px,calc(100vw - 28px));max-height:calc(100dvh - 28px);overflow:auto;border:1px solid #b79d73;border-radius:14px;background:#fbf4e4;color:#30291f;box-shadow:0 24px 70px #20160d66}dialog::backdrop{background:#241d16a8;backdrop-filter:blur(5px)}.about-header{display:flex;align-items:center;justify-content:space-between;padding:12px 16px;background:#eadcc3;border-bottom:1px solid #c9b38d;font:700 13px system-ui,sans-serif}.about-header button{font-size:23px;padding:0;width:32px;height:32px}.about-content{padding:18px 22px 24px;text-align:center}.about-logo{background:white;border-radius:10px;padding:12px;margin-bottom:14px}.about-logo img{max-width:100%;height:auto}.about-app-icon{border-radius:12px}.about-content h2{margin:8px 0 4px;font-size:29px}.about-subtitle{color:#79583b;margin:0 0 16px}.about-features{display:grid;gap:8px;padding:13px;border:1px solid #d9c8a9;border-radius:9px;text-align:left;font:13px/1.4 system-ui,sans-serif;background:#f1e6d2}.about-author{display:grid;gap:5px;margin-top:16px;padding-top:13px;border-top:1px solid #d9c8a9;font:13px system-ui,sans-serif}.about-author span{font-size:12px;color:#75644f}.about-author a{color:#765536}@media(max-width:600px){.app-icon img{width:38px;height:38px}.branding{gap:6px}.branding h1{font-size:21px!important}}
*{box-sizing:border-box}html,body{margin:0;width:100%;height:100%;overflow:hidden}body{background:radial-gradient(ellipse at 20% 10%,#fffaf0a8,transparent 65%),#e4ddcf}button,select{font:inherit;color:inherit;touch-action:manipulation;cursor:pointer}button:focus-visible,select:focus-visible{outline:2px solid var(--focus);outline-offset:2px}
#app{height:100vh;height:100dvh;max-width:1600px;margin:auto;padding:clamp(8px,1.6vw,24px);display:grid;grid-template-columns:minmax(0,1fr) 210px;grid-template-rows:auto auto auto auto minmax(0,1fr) auto;gap:10px 16px;background:repeating-linear-gradient(0deg,#a77b3010 0,#a77b3010 1px,transparent 1px,transparent 4px),radial-gradient(ellipse at top,#fffcf4,#f5ecd8);box-shadow:0 0 40px #59432718}
header{grid-column:1/-1;display:flex;align-items:center;justify-content:space-between;gap:16px;border-bottom:1px solid #baa582;padding-bottom:12px}.branding h1{font-size:clamp(22px,2.8vw,38px);font-variant:small-caps;margin:0;color:#513b28;letter-spacing:.02em}.branding p{margin:3px 0 0;font-size:17px;color:#715e49}.level-tabs{display:flex;gap:4px}.level-tabs button{padding:12px 16px;background:#e7d8bd;border:1px solid #c5ae88;border-radius:4px;font-size:14px}.level-tabs button[aria-pressed=true]{background:#79583b;color:#fff9ed;border-color:#79583b}
button,select{border:1px solid #baa17b;border-radius:5px;background:#fffaf080;padding:8px 10px;font-size:14px}button:hover{background:#e6d7ba}button.primary{background:#79583b;color:#fffaf1;border-color:#79583b;font-weight:bold}button.primary:hover{background:#64462e}nav{display:flex;gap:6px;align-items:center}.info{grid-column:1/-1;display:flex;align-items:center;justify-content:space-between;gap:8px;font-size:13px;color:#725e47}.mobile-level{display:none}#puzzle{max-width:125px}#difficulty{font-size:12px}
.board{grid-column:1;display:grid;grid-template-columns:minmax(100px,1fr) repeat(var(--n),minmax(0,1fr));border-top:1px solid #b9a17d;border-left:1px solid #b9a17d;align-self:stretch;min-width:0}.head,.cell{min-width:0;border-right:1px solid #b9a17d;border-bottom:1px solid #b9a17d;display:flex;align-items:center;justify-content:center;padding:7px;min-height:46px}.head{background:#e8d9bd80;font-size:15px;font-weight:bold}.category{justify-content:flex-start;font-weight:bold;font-size:15px;background:var(--wash,#dae1dd)}.category[data-category="1"]{--wash:#e3e3c4}.category[data-category="2"]{--wash:#eed8cc}.category[data-category="3"]{--wash:#f0e2b9}.cell select{width:100%;min-width:0;text-overflow:ellipsis;padding:6px 3px;background:#fffaf060;font-size:14px}.cell select.good{background:#d4e4cd;border-color:#447141}.cell select.bad{background:#f0d1c6;border-color:#a03c30}
.actions{grid-column:2;grid-row:3;display:flex;flex-direction:column;gap:9px;border:1px solid #c4ad88;border-radius:6px;padding:12px;background:#fff9ec45}.actions h2{font-size:15px;margin:0 0 3px}.actions button{min-height:39px}.progress-label{display:flex;justify-content:space-between;gap:4px;margin-top:auto;padding-top:8px;font-size:14px}#progress{font-variant-numeric:tabular-nums}progress{accent-color:#79583b;width:100%;height:10px;border:0;border-radius:10px;overflow:hidden}progress::-webkit-progress-bar{background:#ded3bd}progress::-webkit-progress-value{background:#876344}
.clues-heading{grid-column:1/-1;display:flex;gap:10px;align-items:baseline;border-top:1px solid #baa582;padding-top:9px}.clues-heading strong{font-size:17px;letter-spacing:.13em}.clues-heading small{font:12px system-ui,sans-serif;color:#78684f}.clues{grid-column:1/-1;min-height:0;overflow:auto;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));grid-auto-rows:min-content;align-content:start;gap:5px 18px;overscroll-behavior:contain}.clue{display:flex;align-items:flex-start;gap:8px;border-bottom:1px solid #baa58255;padding:5px 0;min-width:0}.clue .number{flex:none;display:grid;place-items:center;width:25px;height:25px;border-radius:50%;background:#e6d5b6;font-size:13px}.clue button{font-size:var(--clue-size,15px);line-height:1.3;flex:1;text-align:left;border:0;border-radius:0;background:transparent;padding:2px 0;min-width:0}.clue button:hover{color:#885c31}.clue.done{opacity:.5}.clue.done button{text-decoration:line-through}footer{grid-column:1/-1;font:12px system-ui,sans-serif;color:#715e49;min-height:16px}#message{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
@media(min-width:1000px) and (min-height:800px){.head,.cell{min-height:62px}.clue{padding:9px 0}}
@media(max-width:900px){#app{grid-template-columns:minmax(0,1fr) 165px;gap:7px 10px}.level-tabs button{padding:9px 8px;font-size:12px}.branding h1{font-size:25px}.clues{grid-template-columns:repeat(2,minmax(0,1fr))}.head,.cell{min-height:40px;padding:5px}}
@media(max-width:600px){#app{padding:8px max(7px,env(safe-area-inset-right)) max(7px,env(safe-area-inset-bottom)) max(7px,env(safe-area-inset-left));grid-template-columns:minmax(0,1fr);grid-template-rows:auto auto auto auto auto minmax(0,1fr) auto;gap:6px}header{padding-bottom:5px;gap:5px}.branding h1{font-size:24px}.branding p{font-size:13px;margin-top:1px}.level-tabs{display:none}.mobile-level{display:block;max-width:115px}.info{grid-column:1;flex-wrap:wrap;gap:4px;font-size:11px}nav{gap:4px}nav button{padding:5px 8px;min-height:30px}nav select{padding:5px;font-size:12px}#puzzle{max-width:88px}#difficulty{font-size:10px}.board{grid-column:1;grid-row:3;grid-template-columns:minmax(70px,1.2fr) repeat(var(--n),minmax(0,1fr))}.head,.cell{min-height:35px;padding:3px}.head{font-size:12px}.category{font-size:11px;overflow-wrap:anywhere}.cell select{padding:5px 0;font-size:12px;min-height:28px;border-radius:3px}.actions{grid-row:4;grid-column:1;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:4px;padding:0;border:0;background:transparent}.actions h2{display:none}.actions button{font-size:12px;padding:6px 2px;min-height:34px}.progress-label{grid-column:1/4;align-self:center;margin:0;padding:0;font-size:11px}.actions progress{grid-column:4;align-self:center;margin:0}.clues-heading{grid-column:1;grid-row:5;padding-top:5px;gap:6px}.clues-heading strong{font-size:13px}.clues-heading small{font-size:10px}.clues{grid-column:1;grid-row:6;grid-template-columns:minmax(0,1fr);gap:2px}.clue{gap:6px;padding:3px 0}.clue .number{width:20px;height:20px;font-size:11px}.clue button{font-size:var(--clue-size,13px);line-height:1.25;padding:1px 0}footer{grid-column:1;grid-row:7;font-size:10px}}
@media(max-height:650px){#app{gap:4px;padding-top:5px;padding-bottom:5px}header{padding-bottom:4px}.head,.cell{min-height:29px;padding:2px}.cell select{min-height:25px;padding-top:3px;padding-bottom:3px}.clue{padding:2px 0}.actions{gap:4px}.actions button{min-height:29px}.branding h1{font-size:21px}}