:root{--gold:#B08D57;--brown:#4A3728;--cream:#FAF6EE;--ink:#2E2219;--sel:#EFE3CC;--peer:#F4ECDD;--user:#1F3A5A;--bad:#8A1C12}
*{box-sizing:border-box}
html,body{margin:0;background:var(--cream);color:var(--ink);font-family:Georgia,"Times New Roman","DejaVu Serif",serif;font-size:20px;-webkit-text-size-adjust:100%}
body{min-height:100vh;overflow-x:hidden}
.hb{display:flex;gap:8px}header{display:flex;align-items:center;justify-content:space-between;padding:8px 12px;border-bottom:3px solid var(--gold)}
h1{margin:0;font-size:30px;color:var(--brown);font-weight:normal;letter-spacing:.04em}
button{font:inherit;font-size:20px;min-height:56px;min-width:56px;padding:0 14px;border:2px solid var(--brown);border-radius:10px;background:#fff;color:var(--brown);cursor:pointer;touch-action:manipulation;-webkit-tap-highlight-color:transparent}
button:focus-visible{outline:4px solid var(--user);outline-offset:2px}
button[aria-pressed="true"],.lvl.on{background:var(--brown);color:var(--cream)}
main{padding:8px;max-width:1100px;margin:0 auto}
#levels{display:flex;gap:8px;align-items:center;flex-wrap:wrap;margin-bottom:8px}
.lbl{font-size:20px;color:var(--brown)}
.lvl{flex:1 1 0}
#wrap{display:flex;flex-direction:column;gap:10px;align-items:center}
#board{--s:min(calc(100vw - 16px),560px);width:var(--s);height:var(--s);display:grid;grid-template-columns:repeat(9,minmax(0,1fr));grid-template-rows:repeat(9,minmax(0,1fr));border:3px solid var(--brown);background:var(--brown);gap:1px;user-select:none;-webkit-user-select:none}
.c{min-height:0;min-width:0;border:0;border-radius:0;overflow:hidden;background:#fff;display:flex;align-items:center;justify-content:center;font-size:calc(var(--s)/14);color:var(--ink);font-weight:bold;cursor:pointer;position:relative;padding:0}
.c.u{color:var(--user);font-weight:normal}
.c.peer{background:var(--peer)}
.c.same{background:var(--sel)}
.c.sel{background:var(--sel);box-shadow:inset 0 0 0 3px var(--brown)}
.c.bad{color:var(--bad);text-decoration:underline}
.c.br{border-right:3px solid var(--brown)}.c.bb{border-bottom:3px solid var(--brown)}
.n{display:grid;grid-template-columns:repeat(2,1fr);grid-template-rows:repeat(2,1fr);width:100%;height:100%;font-size:max(14px,calc(var(--s)/24));font-weight:normal;color:var(--brown);line-height:1}
.n span{display:flex;align-items:center;justify-content:center}
#side{width:min(100%,560px)}
#msg{min-height:1.4em;margin:4px 0 8px;font-size:22px;color:var(--brown);text-align:center}
#msg.win{font-size:26px;border:2px solid var(--gold);border-radius:10px;padding:10px;background:#fff}
#pad{display:grid;grid-template-columns:repeat(5,1fr);gap:6px}
#pad button{padding:0;font-size:26px;min-width:0}
#tools{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-top:10px}
#tools button{padding:0 6px}
@media (min-width:900px){#wrap{flex-direction:row;align-items:flex-start;justify-content:center}#side{width:380px}#pad{grid-template-columns:repeat(3,1fr)}#pad button{min-height:72px}}
@media (orientation:landscape) and (max-height:600px){header{padding:2px 10px}h1{font-size:22px}header button,#levels button{min-height:56px}#levels{margin-bottom:4px}#wrap{flex-direction:row;align-items:flex-start;justify-content:center}#board{--s:min(calc(100vh - 16px),calc(100vw - 420px))}#side{width:400px}#pad{grid-template-columns:repeat(5,1fr)}#tools{grid-template-columns:repeat(3,1fr)}#msg{margin:0;font-size:20px}main{max-width:none}}
#help{position:fixed;inset:0;background:rgba(46,34,25,.6);display:flex;align-items:center;justify-content:center;padding:12px;z-index:5}
#help[hidden],#update[hidden]{display:none}
.card{background:var(--cream);border:3px solid var(--gold);border-radius:14px;padding:16px 20px;max-width:560px;max-height:100%;overflow:auto;line-height:1.45}
.card h2{margin:0 0 8px;color:var(--brown);font-weight:normal}
.card img{display:block;margin:0 auto;max-width:100%;height:auto}
.small{font-size:20px}
#update{position:fixed;left:8px;right:8px;bottom:8px;background:var(--brown);color:var(--cream);padding:8px 12px;border-radius:10px;display:flex;align-items:center;justify-content:space-between;gap:8px;z-index:4}
@media (orientation:landscape) and (max-height:600px){
 main{display:grid;grid-template-columns:auto 410px;grid-template-rows:auto 1fr;column-gap:12px;padding:6px;justify-content:center}
 #wrap{display:contents}
 #board{grid-column:1;grid-row:1/3;--s:min(calc(100vh - 76px),calc(100vw - 440px))}
 #levels{grid-column:2;grid-row:1}
 #side{grid-column:2;grid-row:2;width:410px}
 #pad button{min-height:56px}
}
button:disabled{color:var(--brown);border-style:dashed;cursor:default}
@media (orientation:landscape) and (max-height:600px){
 header{position:absolute;top:6px;right:6px;border:0;padding:0}header h1{display:none}
 #board{--s:min(calc(100vh - 14px),calc(100vw - 480px))}
 main{grid-template-columns:auto 450px}#side{width:450px}
 #levels{padding-right:0;margin-right:170px}#levels .lbl{display:none}
 #tools{grid-template-columns:repeat(3,1fr);margin-top:6px}#pad{gap:4px}
}

.back{padding:6px 12px 0}.back a{display:inline-flex;align-items:center;min-height:48px;font-size:22px;color:var(--brown);text-decoration:underline;text-underline-offset:4px}.back a:focus-visible{outline:4px solid var(--user);outline-offset:2px}