/* Tile Trail: raised numbered tiles, a deliberately recessed empty square. */
.trail-arena{background:radial-gradient(ellipse at 10% 0,#566681,#2c364d 75%);padding:24px;color:#f2f3ff}
.trail-board-head,.trail-board-foot{display:flex;align-items:center;justify-content:space-between;gap:12px;font:700 10px/1.5 Arial,sans-serif;letter-spacing:1.4px;color:#d4dcf0}
.trail-board-head{margin:0 2px 17px}.trail-board-foot{margin:17px 2px 0;letter-spacing:.5px;font-weight:400}.trail-board-foot>span:last-child{font-size:9px;letter-spacing:1.5px;color:#c1cde4}
.trail-empty-key{display:flex;align-items:center;gap:6px;font:11px/1.4 Loop,Arial,sans-serif;letter-spacing:0;color:#e0e7f7}.trail-empty-key i{width:14px;height:14px;border:1px dashed #b9cbe6;border-radius:4px;display:block;background:#1f2a3d}
.trail-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;border-radius:21px;padding:8px;background:#1822384a;box-shadow:inset 0 2px 10px #131b3050;outline-offset:6px}
.trail-grid:focus-visible{outline:3px solid #c6bdff}
.trail-tile{position:relative;display:grid;place-items:center;aspect-ratio:1;min-width:0;min-height:44px;border-radius:18px;border:1px solid #d7e1f975;background:linear-gradient(145deg,#dce7f9,#aabddb);color:#243550;box-shadow:inset 0 1px 1px #fff,0 4px 0 #7385a4,0 7px 10px #121d3540;transition:background .16s,transform .16s,box-shadow .16s;font:500 clamp(32px,5vw,60px)/1 Arial,sans-serif}
.trail-tile.can-slide{background:linear-gradient(145deg,#f1e8ff,#cbb7f0);border-color:#f2e7ff;box-shadow:inset 0 1px 1px #fff,0 4px 0 #8875ad,0 7px 10px #121d3540}
.trail-tile.can-slide:hover{background:linear-gradient(145deg,#fbf5ff,#ded0ff);transform:translateY(-2px)}
.trail-tile.can-slide:active{transform:translateY(3px);box-shadow:inset 0 1px 1px #fff,0 1px 0 #8875ad,0 3px 5px #121d3540}
.trail-tile:focus-visible{outline:3px solid #fff;outline-offset:3px;z-index:1}
.trail-tile:disabled{opacity:1}.trail-number{pointer-events:none}.trail-tile-dot{position:absolute;bottom:11%;width:5px;height:5px;border-radius:50%;background:transparent}.trail-tile.is-placed .trail-tile-dot{background:#536e91}
.trail-empty{border:1px dashed #c6d4ee80;background:#1d2a40b0;box-shadow:inset 0 3px 12px #111c3470;color:#c4d2ec;align-content:center;gap:7px}
.trail-empty-symbol{font:300 28px/1 Arial,sans-serif;opacity:.75}.trail-empty-word{font:700 9px/1.3 Loop,Arial,sans-serif;letter-spacing:1.4px}
.trail-grid.is-paused .trail-tile:not(.trail-empty){background:linear-gradient(145deg,#8797b1,#73849f);color:#e0e8f4;border-color:#b6c5df70;box-shadow:inset 0 1px 1px #b7c7dd,0 4px 0 #52637d}.trail-grid.is-paused{opacity:.7}
.trail-arena .status{color:#e2e8f6;min-height:44px;margin-top:15px}
.trail-reference{display:flex;align-items:center;gap:18px;margin:20px 0;padding:16px 18px;background:#ffffff70;border:1px solid #fff;border-radius:19px}
.trail-mini{display:grid;grid-template-columns:repeat(3,20px);gap:4px;flex:none}.trail-mini span{display:grid;place-items:center;width:20px;height:20px;border-radius:4px;background:#e2dbee;color:#5b4578;font:700 11px/1 Arial,sans-serif}.trail-mini .empty{border:1px dashed #b8a9ce;background:transparent;color:#806b9e}
.trail-reference figcaption{display:grid;gap:5px;min-width:0}.trail-reference strong{font-size:13px;color:#513a6d}.trail-reference figcaption>span{font-size:11px;line-height:1.6;color:#766387}
.trail-metrics .metric{flex:1}.trail-actions>button{min-height:48px;padding:12px 17px}.trail-help{margin-top:18px}.trail-layout .result h2:focus{outline:none}
@media(min-width:651px) and (max-width:1000px){.trail-arena{padding:18px}.trail-grid{gap:9px;padding:6px}.trail-tile{border-radius:14px}.trail-reference{padding:13px;gap:12px}.trail-board-head{font-size:9px;letter-spacing:1px}}
@media(max-width:650px){.trail-arena{order:3;padding:15px}.trail-reference{order:1;margin:0;padding:10px 14px;gap:15px}.trail-reference figcaption{display:flex;align-items:center;gap:15px}.trail-reference figcaption>span{font-size:10px}.trail-mini{grid-template-columns:repeat(3,14px);gap:3px}.trail-mini span{width:14px;height:14px;border-radius:3px;font-size:9px}.trail-reference strong{font-size:12px}.trail-metrics{order:2}.trail-actions{order:2}.trail-layout .result{order:4}.trail-help{order:5;margin:0}.trail-grid{gap:9px;padding:6px}.trail-tile{border-radius:14px;font-size:clamp(32px,9vw,48px)}.trail-board-head{margin-bottom:12px}.trail-board-foot{margin-top:12px}.trail-arena .status{font-size:12px;min-height:38px;margin-top:10px}.trail-actions>button{flex:1;padding:10px 11px;font-size:12px}.trail-reference figcaption>span br{display:none}.trail-empty-symbol{font-size:24px}.trail-empty-word{font-size:8px}}
@media(max-width:360px){.trail-arena{padding:12px}.trail-grid{gap:8px;padding:5px}.trail-tile{border-radius:12px}.trail-board-head{font-size:9px;letter-spacing:.8px}.trail-empty-key{font-size:10px}.trail-reference figcaption{display:grid;gap:3px}.trail-reference{padding:9px 12px}.trail-arena .status{font-size:11px}.trail-actions>button{padding:10px 8px}}
@media(prefers-reduced-motion:reduce){.trail-tile{transition:none}.trail-tile.can-slide:hover,.trail-tile.can-slide:active{transform:none}}