:root{
  --bg:#f7f4ef; --panel:#fffdf9; --text:#272421; --muted:#756f68;
  --border:#3b3732; --accent:#8b5cf6; --bad:#c2410c; --good:#15803d;
}
*{box-sizing:border-box}
body{margin:0;background:var(--bg);color:var(--text);font-family:Inter,ui-sans-serif,system-ui,-apple-system,Segoe UI,sans-serif}
.app{max-width:860px;margin:0 auto;padding:14px 16px 18px}
header{display:flex;justify-content:space-between;gap:16px;align-items:flex-start}
h1{font-size:clamp(28px,4vw,40px);margin:0 0 2px;letter-spacing:-1.5px}
header p{margin:0;color:var(--muted);max-width:600px;line-height:1.35;font-size:13px}
.stats{display:flex;gap:8px;flex-wrap:wrap;justify-content:flex-end}
.stats span{background:var(--panel);border:1px solid #ddd6ce;border-radius:999px;padding:7px 11px;font-size:13px}
.controls{display:flex;gap:9px;flex-wrap:wrap;align-items:end;margin:14px 0}
label{display:flex;flex-direction:column;gap:5px;font-size:12px;color:var(--muted);font-weight:700}
select,button{min-height:38px;border:1px solid #cfc7be;border-radius:10px;background:var(--panel);color:var(--text);padding:9px 13px;font:inherit}
button{cursor:pointer;font-weight:700}
button:hover{border-color:#958b81}
button:focus-visible,select:focus-visible,.cell:focus-visible{outline:3px solid #c4b5fd;outline-offset:2px}
#newGame{background:var(--text);color:white;border-color:var(--text)}
.game-area{display:grid;grid-template-columns:minmax(0,470px) minmax(190px,235px);gap:16px;align-items:start}
.board{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));grid-template-rows:repeat(7,minmax(0,1fr));width:min(470px,100%);aspect-ratio:1/1;border:3px solid var(--border);border-radius:12px;overflow:hidden;background:white;box-shadow:0 8px 24px #332d2612}
.cell{position:relative;border:1px solid rgba(255,255,255,.92);display:grid;place-items:center;padding:0;width:100%;height:100%;min-width:0;min-height:0;cursor:pointer;transition:filter .12s,transform .08s}
.cell:hover{filter:brightness(.97)}
.cell.blocked{cursor:not-allowed;opacity:.78}
.cell.cat::after{content:"🐱";font-size:clamp(22px,3.8vw,34px);line-height:1}
.cell.given.cat::after{filter:saturate(.75)}
.cell.wrong{box-shadow:inset 0 0 0 4px #ef4444}
.cell.hinted{box-shadow:inset 0 0 0 4px #22c55e}
.side{display:flex;flex-direction:column;gap:14px}
.panel,.message{background:var(--panel);border:1px solid #ddd6ce;border-radius:14px;padding:13px}
.panel h2{font-size:16px;margin:0 0 8px}
.panel ul{margin:0;padding-left:20px;color:#5f5952;line-height:1.5;font-size:13px}
.message{font-weight:650;line-height:1.45}
.message.good{color:var(--good);border-color:#86efac;background:#f0fdf4}
.message.bad{color:var(--bad);border-color:#fdba74;background:#fff7ed}
footer{margin-top:10px;color:var(--muted);font-size:12px}
@media(max-width:760px){
  .game-area{grid-template-columns:1fr}
  .board{max-width:500px;margin:0 auto}
  .side{order:2}
  header{flex-direction:column}
  .stats{justify-content:flex-start}
}
@media(max-width:420px){
  .app{padding:10px 10px 14px}
  .controls{gap:6px}
  select,button{padding:8px 10px}
  .board{width:100%}
}