*{box-sizing:border-box}
body{margin:0;background:#0b0b14;color:#e8e8d0;font-family:"Courier New",monospace;image-rendering:pixelated}
header{text-align:center;padding:10px}
h1{margin:0;letter-spacing:4px;color:#ffd84a;text-shadow:3px 3px 0 #a33}
#subtitle{font-size:13px;opacity:.8}
main{display:flex;gap:16px;justify-content:center;align-items:flex-start;flex-wrap:wrap;padding:8px}
.panel{border:3px solid #556;background:#14141f;padding:8px;margin-bottom:12px;box-shadow:4px 4px 0 #000}
.label{color:#7fd;font-weight:bold;margin-bottom:6px}
#right{width:300px}
#hud{display:flex;justify-content:space-between;font-size:18px;margin-bottom:6px}
#status{color:#ff8}
canvas{display:block;image-rendering:pixelated}
#board{border:3px solid #556;cursor:pointer;box-shadow:4px 4px 0 #000}
button{font-family:inherit;font-weight:bold;background:#ffd84a;color:#111;border:0;padding:6px 12px;box-shadow:3px 3px 0 #a33;cursor:pointer}
button:active{transform:translate(2px,2px);box-shadow:1px 1px 0 #a33}
#controls{margin-top:8px;text-align:center}
#customForm{display:flex;gap:4px}
#customInput{flex:1;font-family:inherit;background:#000;color:#9f9;border:2px solid #556;padding:4px}
#aiBtn{margin-top:6px;width:100%;background:#7fd}
#aiStatus{font-size:12px;margin-top:4px;opacity:.85}
#changeLog{margin-top:6px;font-size:13px;color:#9f9;min-height:2em;white-space:pre-line}
#changeLog .err{color:#f88}
ol{margin:0;padding-left:22px}
.hints{font-size:12px;padding-left:16px;opacity:.8}
/* ---- mobile / touch ---- */
html{-webkit-text-size-adjust:100%;text-size-adjust:100%}
body{padding:env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);overflow-x:hidden}
button,input,summary{touch-action:manipulation}
#board{touch-action:none;-webkit-user-select:none;user-select:none;-webkit-touch-callout:none;-webkit-tap-highlight-color:transparent;height:auto}
#center{max-width:100%;min-width:0}
#customInput{font-size:16px}
@media (pointer:coarse){
  button{min-height:44px;padding:10px 16px;font-size:16px}
  #customInput{min-height:44px}
  summary{padding:10px 0}
}
@media (max-width:700px){
  main{flex-direction:column;align-items:stretch;flex-wrap:nowrap;gap:8px;padding:6px}
  #center{order:1;width:100%}
  #left{order:2}
  #right{order:3;width:100%}
  #left .panel{display:flex;flex-direction:column;align-items:center}
  #board{margin:0 auto;width:100% !important}
  #hud{font-size:16px}
  #controls button{width:100%}
  header{padding:6px}
  h1{font-size:24px}
  .panel{margin-bottom:8px}
}
/* ---- 2026 visual refresh ---- */
body{background:radial-gradient(ellipse at 50% -10%,#24203a 0%,#0b0b14 60%) fixed;image-rendering:auto}
canvas{image-rendering:auto}
h1{font-size:34px;text-shadow:3px 3px 0 #a33,0 0 18px rgba(255,216,74,.35)}
.panel{border:2px solid #3a3a55;border-radius:12px;background:linear-gradient(180deg,#1a1a2a,#121220);box-shadow:0 6px 18px rgba(0,0,0,.5)}
#board{border:3px solid #4a4a66;border-radius:10px;box-shadow:0 10px 30px rgba(0,0,0,.6),0 0 0 1px #000}
#queue{border-radius:8px}
button{border-radius:8px}
#audioBar{display:flex;gap:6px;justify-content:flex-end;margin-bottom:6px}
#audioBar button{background:#2a2a40;color:#e8e8d0;box-shadow:0 2px 0 #000;font-size:13px;padding:4px 10px;border:1px solid #556}
#audioBar button[aria-pressed="true"]{background:#7fd;color:#111}
@media (pointer:coarse){#audioBar button{min-height:44px;font-size:15px}}
@media (max-width:700px){header{padding-right:60px}h1{font-size:24px}#audioBar{justify-content:center}}
#bombHint{min-height:1.3em;margin-top:6px;text-align:center;font-size:13px;color:#ffb040}