:root { color-scheme: light dark; --accent: #b32424; }
html[data-theme="light"] { color-scheme: light; }
html[data-theme="dark"] { color-scheme: dark; }
* { box-sizing: border-box; }
body { font-family: system-ui, sans-serif; margin: 0; padding: 0 1rem 2rem; max-width: 1100px; margin-inline: auto; }
header { position: relative; }
header h1 { margin-bottom: 0; }
#themebtn { position: absolute; top: .6rem; right: 0; font-size: 1.5rem; line-height: 1;
  background: none; border: 1px solid rgba(127,127,127,.4); border-radius: 8px; padding: .3rem .5rem; }
.sub { margin-top: .2rem; }
.sub a { color: #fff; color: light-dark(#1a1a1a, #fff); }
a { color: var(--accent); }
main { display: flex; gap: 1.5rem; flex-wrap: wrap; align-items: flex-start; }
#boardwrap { flex: 1 1 480px; min-width: 340px; }
#board { display: grid; gap: 0; width: max-content; margin-bottom: .6rem;
  background: rgba(127,127,127,.08); padding: 2px; border-radius: 4px; }
.cell { position: relative; }
.cell.playable { outline: 1px dashed rgba(127,127,127,.55); outline-offset: -2px; cursor: pointer; }
.cell.playable:hover { background: rgba(179,36,36,.12); }
.tile { width: 100%; height: 100%; display: block; }
/* Pending (uncommitted) tiles - the chosen move and its forced cascade - render
   darker than committed tiles; everything returns to normal on Commit. (Brightening
   was invisible: the tile gifs are mostly white, and white clips at white.) */
.tile.preview { filter: brightness(.68); }
/* Forced-cascade previews glow, as the render comment always promised - the
   consequence is visually distinct from the tile you chose. */
.tile.forced { filter: brightness(.82) drop-shadow(0 0 4px var(--accent)); }
.tile.overlay { position: absolute; inset: 0; }
#status { font-weight: 600; min-height: 1.4em; margin: .3rem 0; }
#entry { display: flex; gap: .5rem; align-items: center; flex-wrap: wrap; }
#movebox { font-family: ui-monospace, monospace; width: 12rem; padding: .35rem .5rem; }
#moveerr { color: var(--accent); }
#hint { margin: .35rem 0 .45rem; font-size: 1rem; }
.dim { opacity: .65; }
#controls { flex: 0 0 300px; display: flex; flex-direction: column; gap: .8rem; }
fieldset { border: 1px solid rgba(127,127,127,.4); border-radius: 6px; }
fieldset label { display: block; margin: .15rem 0; }
.btnrow { display: flex; gap: .5rem; flex-wrap: wrap; }
button { padding: .4rem .8rem; cursor: pointer; }
.mono { font-family: ui-monospace, monospace; font-size: .82rem; }
#history { word-break: break-word; min-height: 1.2em; }
#enginelog { max-height: 16rem; overflow: auto; margin: 0; white-space: pre-wrap; }
footer { margin-top: 1.4rem; font-size: .8rem; }
select { padding: .3rem; }

.pstat { opacity: .65; font-size: .85em; font-variant-numeric: tabular-nums; }