/* Wickline prototype styles. Palette and type follow Scorch (dark ember theme, Fraunces + Nunito). */
* { touch-action: manipulation; }
:root {
  --bg: #16110e; --panel: #241b16; --panel2: #2f241d; --line: #4a3a2e; --text: #f4e8d8; --muted: #bba68f;
  --accent: #ff8a3d; --accent2: #ffc35c; --on-accent: #2a1406;
  --ok: #6fcf7a; --bad: #ef5a5a; --wall: #8a7a6a;
  --tile: #3a2d23; --tile2: #463628; --tilefg: #f6e7cf; --tileedge: #5a4535;
  --fuse: #e9c27a; --fuseglow: #ffb347; --mark: #c98b6b; --cp: #ffd27a; --cpbg: #4b3417;
  --fs: 16px;
}
body.cb { --ok: #4aa3ff; --bad: #ff9f1c; }
body.big { --fs: 19px; }
* { box-sizing: border-box; }
html, body { margin: 0; background: var(--bg); color: var(--text); font-family: Nunito, system-ui, sans-serif; font-size: var(--fs); }
body { background: radial-gradient(120% 80% at 50% 0%, #2a1c13 0%, var(--bg) 60%); background-attachment: fixed; color: var(--text); }
/* play */
.playbar { display: flex; gap: 8px; align-items: center; }
.lvlname { flex: 1; font-weight: 800; }
.pill { background: var(--panel2); border: 1px solid var(--line); border-radius: 999px; padding: 3px 10px; font-size: .85em; font-variant-numeric: tabular-nums; }
.coach { background: var(--cpbg); border: 1px solid var(--accent2); border-radius: 12px; padding: 8px 10px; display: flex; gap: 8px; align-items: center; font-size: .92em; }
.coach span { flex: 1; }
.boardwrap { position: relative; isolation: isolate; margin: 0 auto; touch-action: none; user-select: none; -webkit-user-select: none; }
.board { display: grid; gap: 0; }
.cell { position: relative; border: 0; border-radius: 0; padding: 0; min-height: 0; background: transparent; display: flex; align-items: center; justify-content: center; cursor: pointer; }
.cell .tile { position: absolute; z-index: 0; inset: 3px; border-radius: 9px; background: linear-gradient(160deg, var(--tile2), var(--tile)); border: 1px solid var(--tileedge); box-shadow: inset 0 -3px 0 rgba(0,0,0,.25); }
.cell.on .tile { background: linear-gradient(160deg, #5b4130, #4a3426); }
.cell .op { position: relative; z-index: 2; text-shadow: 0 1px 3px #000, 0 0 6px #000; font-weight: 900; color: var(--tilefg); font-size: calc(var(--cs) * .32); line-height: 1; }
.cell .cpv { position: absolute; z-index: 2; bottom: 7%; left: 50%; transform: translateX(-50%); background: var(--cpbg); color: var(--cp); border: 1px solid var(--cp);
  border-radius: 999px; padding: 0 5px; font-size: calc(var(--cs) * .2); font-weight: 900; line-height: 1.25; white-space: nowrap; }
.cell .cpv.ok { border-color: var(--ok); color: var(--ok); } .cell .cpv.bad { border-color: var(--bad); color: var(--bad); }
.cell .cpv.ok::after { content: " ✓"; } .cell .cpv.bad::after { content: " ✗"; }
.cell .run { position: absolute; z-index: 2; top: 7%; left: 9%; font-size: calc(var(--cs) * .17); color: #e8d6bd; text-shadow: 0 0 3px #000; font-weight: 800; }
.cell .run.bad { color: var(--bad); }
.cell .ord { position: absolute; z-index: 2; top: 6%; right: 8%; width: calc(var(--cs) * .26); height: calc(var(--cs) * .26); border-radius: 50%; background: #2c4a6e; color: #cfe6ff; font-size: calc(var(--cs) * .17); font-weight: 900; display: flex; align-items: center; justify-content: center; }
.cell .ord.bad { background: var(--bad); color: #fff; }
.cell .arr { position: absolute; z-index: 2; font-size: calc(var(--cs) * .22); color: var(--accent2); font-weight: 900; }
.cell .arr.N { top: 2%; } .cell .arr.S { bottom: 2%; } .cell .arr.E { right: 6%; } .cell .arr.W { left: 6%; }
.cell.start .tile { background: radial-gradient(circle at 50% 45%, #ffcf6b, #c55a1c 70%); border-color: #ffcf6b; }
.cell.start .op { color: #2a1406; text-shadow: 0 1px 0 rgba(255,240,200,.6); font-size: calc(var(--cs) * .36); }
.cell.end .tile { background: radial-gradient(circle at 50% 40%, #6b3a8f, #3a1f52 75%); border-color: #c79bff; }
.cell.hint .tile { box-shadow: 0 0 0 3px var(--accent2), 0 0 18px var(--accent2); animation: pulse 1s infinite alternate; }
.cell.badcell .tile { box-shadow: 0 0 0 2px var(--bad); }
.cell.shake { animation: shake .25s; }
@keyframes pulse { from { filter: brightness(1); } to { filter: brightness(1.35); } }
@keyframes shake { 25% { transform: translateX(-3px); } 75% { transform: translateX(3px); } }
svg.lines { position: absolute; z-index: 1; inset: 0; pointer-events: none; overflow: visible; }
canvas.fx { position: absolute; z-index: 3; inset: 0; pointer-events: none; }
.headnum { position: absolute; z-index: 4; transform: translate(-50%, -125%); background: var(--accent2); color: var(--on-accent); font-weight: 900; border-radius: 999px; padding: 1px 8px; font-size: .9em; pointer-events: none; white-space: nowrap; box-shadow: 0 2px 6px rgba(0,0,0,.4); }
.status { min-height: 1.4em; text-align: center; font-size: .9em; color: var(--muted); }
.tools { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; }
.hintbox { background: var(--panel2); border: 1px solid var(--accent2); border-radius: 14px; padding: 10px 12px; }
.hintbox p { margin: 0 0 8px; }
.helpline { text-align: center; margin: 0; }

.checkbtn { width: 100%; font-size: 1.05em; }
.cell:focus-visible, button:focus-visible, a:focus-visible { outline: 3px solid var(--accent2); outline-offset: 2px; }
button[aria-pressed="true"] { background: var(--accent); color: var(--on-accent); }
a { color: var(--accent2); }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.status { min-height: 1.4em; text-align: center; font-size: .9em; color: var(--muted); }