:root{color-scheme:dark;font-family:system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;color:#e8eef2;background:#101a22;font-synthesis:none}*{box-sizing:border-box}body{margin:0}main{width:min(100% - 32px,520px);margin:30px auto 24px}h1{font-size:36px;letter-spacing:-1.3px;margin:0;line-height:1.2}h1 span{font-size:12px;letter-spacing:0;margin-left:12px;color:#9fb3bf;border:1px solid #42505b;border-radius:4px;padding:3px 6px;vertical-align:middle}.eyebrow{font-size:10px;letter-spacing:1.8px;color:#9fb3bf;font-weight:650;margin:0 0 8px}.intro{color:#9fb3bf;margin:7px 0 22px;font-size:14px}button{font:inherit;touch-action:manipulation;cursor:pointer;color:inherit;border:1px solid #425463;background:#1c2b36;border-radius:7px;min-height:44px}button:hover{background:#2c3f4d}button:focus-visible,summary:focus-visible{outline:3px solid #fff;outline-offset:3px}button:disabled{cursor:default;opacity:.48}nav{display:flex;gap:8px;margin-bottom:24px}nav button{flex:1;font-weight:650}nav button[aria-current="step"]{background:#baf379;border-color:#baf379;color:#152313}.level-heading{display:flex;justify-content:space-between;align-items:center}.level-heading .eyebrow{margin-bottom:4px}h2{font-size:23px;margin:0;letter-spacing:-.5px}.counter{display:flex;gap:9px;align-items:center}.counter strong{font-size:30px;font-variant-numeric:tabular-nums}.counter span{font-size:10px;line-height:1.4;color:#a8bac5}#brief{font-size:13px;line-height:1.5;color:#b4c4cf;margin:12px 0 16px;min-height:20px}.board-wrap{padding:5px;background:#080f15;border:1px solid #425463;border-radius:9px}#board{display:grid;grid-template-columns:repeat(8,1fr);gap:3px;aspect-ratio:1}.tile{position:relative;min-width:0;min-height:0;border-radius:3px;padding:0;display:flex;align-items:center;justify-content:center;background:#223340;border:1px solid #334958;aspect-ratio:1;font-size:clamp(14px,4vw,22px);user-select:none}.tile.wall{background:#111c24;border-color:#172630;background-image:repeating-linear-gradient(135deg,transparent 0 7px,#1d2a3440 7px 9px)}.tile.wall:hover{background-color:#111c24}.tile.guard-sight{background-color:#713b37;background-image:repeating-linear-gradient(135deg,transparent 0 6px,#f4b0a22c 6px 8px)}.tile.camera-sight{background-color:#5b481f;background-image:radial-gradient(#e4bd6760 1px,transparent 1px);background-size:6px 6px}.tile.guard-sight.camera-sight{background-color:#745023;background-image:repeating-linear-gradient(135deg,transparent 0 6px,#f4b0a255 6px 8px)}.tile.adjacent{box-shadow:inset 0 0 0 1px #9bacb8}.piece{z-index:2;line-height:1;font-weight:800}.piece.thief{background:#baf379;color:#172512;width:68%;height:68%;display:grid;place-items:center;border-radius:50%}.piece.guard{color:#ffb6a8}.piece.camera{color:#ffdc87}.piece.diamond{color:#a5e8ff;font-size:1.2em}.piece.exit{color:#baf379;border:1px dashed #baf379;padding:3px 6px}.facing{position:absolute;right:1px;top:0;font-size:13px;font-weight:800}.patrol-dot{position:absolute;color:#b1bfca;font-size:19px;line-height:1;left:3px;bottom:0}.next-marker{position:absolute;inset:3px;border:1px dashed #f5b3a6;border-radius:2px;color:#f5b3a6;font-size:12px;text-align:left;padding-left:2px;line-height:1.1}.legend{display:flex;flex-wrap:wrap;gap:8px 13px;font-size:11px;color:#b8c8d2;margin:14px 0 18px}.legend span{display:flex;align-items:center;gap:5px}.legend b{width:15px;height:15px;text-align:center;font-size:13px}.thief-key,.exit-key{color:#baf379}.diamond-key{color:#a5e8ff}.guard-key{color:#ffb6a8}.camera-key{color:#ffdc87}.guard-sight-key{background:repeating-linear-gradient(135deg,#713b37 0 3px,#c48479 3px 4px)}.camera-sight-key{background:#806a35;background-image:radial-gradient(#ffdc87 1px,transparent 1px);background-size:5px 5px}.actions{display:flex;gap:10px}.actions button{flex:1}.primary{background:#baf379;color:#172512;border-color:#baf379;font-weight:700}.primary:hover{background:#d0ffa0}.primary span{font-weight:400;font-size:11px;margin-left:7px}#status{font-size:13px;line-height:1.55;min-height:42px;padding:12px 0;color:#b9cbd6}#status.failed{color:#ffb6a8}#status.won{color:#baf379}#next{width:100%;margin-bottom:14px}[hidden]{display:none!important}details{border-top:1px solid #334653;padding-top:16px;font-size:12px;line-height:1.65;color:#b4c4cf}summary{cursor:pointer;font-size:13px;font-weight:650;color:#e8eef2}details p{margin:9px 0}footer{font-size:10px;color:#8fa2af;margin-top:22px;text-align:center}@media(max-width:380px){main{width:calc(100% - 20px);margin-top:18px}.legend{gap:7px 10px}h1{font-size:31px}#board{gap:2px}.facing{font-size:10px}.piece.exit{padding:2px 4px}}@media(prefers-reduced-motion:no-preference){button{transition:background-color .1s}}
/* Recognizable pieces with matching legend icons. Shape + color identify each role. */
.icon{display:block;width:100%;height:100%;overflow:visible}
.tile .piece{position:absolute;inset:12%;width:auto;height:auto;padding:0;border:0;border-radius:0;background:none;display:block;pointer-events:none}
.tile .piece.thief{color:#baf379;z-index:4;filter:drop-shadow(0 1px 1px #08120b)}
.tile .piece.guard{color:#ff9eaa;z-index:3}
.tile .piece.camera{color:#ffce70;z-index:3}
.tile .piece.diamond{color:#8de0ff;inset:17%;filter:drop-shadow(0 0 3px #8de0ff33)}
.tile .piece.exit{color:#baf379;inset:10% 15%;z-index:2}
.tile:has(.thief) .piece.exit,.tile:has(.thief) .piece.guard{opacity:.3}
.tile .facing{z-index:5;right:1px;top:1px;background:#101a22;border:1px solid #82949f;border-radius:3px;min-width:13px;font-size:12px;line-height:13px;color:#fff;text-align:center;pointer-events:none}
.tile .loot-badge{position:absolute;right:0;bottom:0;width:34%;height:34%;z-index:6;color:#8de0ff;background:#132a39;border-radius:50%;padding:1px;pointer-events:none}
.tile.guard-sight{background-color:#64333b;background-image:repeating-linear-gradient(135deg,transparent 0 6px,#ff9eaa38 6px 8px)}
.tile.camera-sight{background-color:#57451f;background-image:radial-gradient(#ffce7090 1px,transparent 1px);background-size:6px 6px}
.tile.guard-sight.camera-sight{background-color:#62412d;background-image:repeating-linear-gradient(135deg,transparent 0 6px,#ff9eaa55 6px 8px),radial-gradient(#ffce70 1px,transparent 1px);background-size:auto,6px 6px}
.legend b[data-icon]{width:24px;height:24px;flex:none}
.legend{gap:10px 16px;align-items:center}
.legend .guard-key{color:#ff9eaa}.legend .camera-key{color:#ffce70}.legend .diamond-key{color:#8de0ff}
.legend .guard-sight-key{background:repeating-linear-gradient(135deg,#64333b 0 3px,#ff9eaa 3px 4px)}
.next-marker{z-index:1;border-color:#ffb4bf;color:#ffd7dd;pointer-events:none}
.patrol-dot{pointer-events:none}
@media(max-width:380px){.legend{gap:8px 12px}.legend b[data-icon]{width:21px;height:21px}.tile .facing{font-size:10px;line-height:11px;min-width:11px}.tile .piece{inset:10%}}