@import url("https://fonts.googleapis.com/css2?family=DM+Mono:wght@500;700&family=Fraunces:opsz,wght@9..144,700;9..144,800&family=Outfit:wght@500;700;800&display=swap");
:root{font-family:Outfit,system-ui,sans-serif;color:#f5f8e8;background:#183d48}*{box-sizing:border-box}body{min-height:100vh;margin:0;background:radial-gradient(circle at 13% 5%,#8ecfb6 0,transparent 26%),radial-gradient(circle at 91% 43%,#f6bd55 0,transparent 25%),linear-gradient(145deg,#12313d,#225b63 54%,#153d48);overflow-x:hidden}body:before{content:"";position:fixed;inset:0;pointer-events:none;background:linear-gradient(90deg,rgba(255,255,255,.05) 1px,transparent 1px),linear-gradient(rgba(255,255,255,.05) 1px,transparent 1px);background-size:28px 28px}.trail-nav,.trail-app{position:relative;z-index:1;width:min(620px,100%);margin:auto}.trail-nav{height:68px;display:flex;align-items:center;justify-content:space-between;padding:0 21px}.trail-nav a{color:#f7f3df;text-decoration:none;font-weight:800}.trail-nav a:last-child{border:1px solid rgba(247,243,223,.42);border-radius:999px;padding:8px 13px}.trail-app{padding:24px 18px 54px}.trail-hero>p,.trail-head p,.trail-levels>p{margin:0;color:#ffcc62;font:700 .72rem "DM Mono",monospace;letter-spacing:.13em;text-transform:uppercase}.trail-hero h1{margin:7px 0 9px;font:800 clamp(2.65rem,12vw,4.8rem)/.88 Fraunces,serif;letter-spacing:-.065em}.trail-hero>span{display:block;max-width:430px;color:#d9f0df;font-size:1.04rem}.trail-game,.trail-levels,.trail-how{margin-top:23px;border:1px solid rgba(236,255,231,.22);border-radius:26px;background:rgba(5,30,37,.56);box-shadow:0 20px 44px rgba(3,20,26,.22);overflow:hidden}.trail-head{display:flex;align-items:center;justify-content:space-between;padding:16px 17px;border-bottom:1px solid rgba(236,255,231,.15)}.trail-head p{color:#fff4d8;font-size:1rem;letter-spacing:.04em;text-transform:none}.trail-head span{color:#a9d5c5;font:700 .68rem "DM Mono",monospace}.trail-head b{color:#ffda7a;font:700 .72rem "DM Mono",monospace;letter-spacing:.06em;text-transform:uppercase}.trail-board{width:min(100%,490px);margin:16px auto 6px;padding:8px;display:grid;grid-template-columns:repeat(var(--trail-columns),1fr);grid-template-rows:repeat(var(--trail-rows),1fr);gap:3px;aspect-ratio:var(--trail-columns)/var(--trail-rows);background:#0d2a34;border-radius:18px;touch-action:none;user-select:none}.trail-cell{position:relative;min-width:0;min-height:0;display:grid;place-items:center;border-radius:9px}.trail-cell.wall{background:#0b222a;box-shadow:inset 0 0 0 1px rgba(189,239,223,.04)}.trail-cell.floor{background:linear-gradient(145deg,#dbeacb,#b7d4b7);color:#173e43;box-shadow:inset 0 -3px rgba(50,104,91,.22)}.trail-cell.floor>span{position:relative;z-index:1;font:800 clamp(.7rem,4.4vw,1.32rem) "DM Mono",monospace}.trail-cell.floor>span.empty{opacity:.35}.trail-cell.goal{background:linear-gradient(145deg,#ffe99a,#e8ad44);box-shadow:inset 0 0 0 2px #fff4c8,inset 0 -4px rgba(143,82,18,.28)}.trail-cell.goal i{position:absolute;width:30%;height:30%;border:3px solid #795116;border-top:0;transform:rotate(45deg);bottom:17%;left:34%}.trail-cell.player b{position:absolute;z-index:3;width:47%;height:47%;border-radius:50%;background:#7147bf;border:3px solid #f8ecff;box-shadow:0 3px 0 #38276a,0 0 0 4px rgba(102,65,176,.24)}.trail-message{min-height:2.45em;margin:10px 18px 0;text-align:center;color:#d8ede1;font-weight:700;font-size:.91rem}.trail-message.complete{color:#ffdc6d}.trail-actions{display:grid;grid-template-columns:1fr 1.3fr;gap:10px;padding:13px 16px 16px}.trail-actions button,.trail-levels button{border:0;font:800 .95rem Outfit,sans-serif;cursor:pointer}.trail-actions button{padding:14px 12px;border-radius:14px;background:#ffcc61;color:#1e3d42;box-shadow:0 4px 0 #b77b25}.trail-actions .trail-quiet{background:#345e62;color:#eff6e4;box-shadow:0 4px 0 #1b3e43}.trail-actions button:active{transform:translateY(3px);box-shadow:none}.trail-levels{padding:17px}.trail-levels>p{margin-bottom:11px;color:#b9ded1}.trail-levels>div{display:grid;grid-template-columns:repeat(5,1fr);gap:8px}.trail-levels button{position:relative;aspect-ratio:1;border-radius:13px;background:#234e55;color:#d8f6e9;border:1px solid rgba(224,255,230,.18)}.trail-levels button.selected{background:#ffcd67;color:#243f42}.trail-levels button[data-done=true]:after{content:"";position:absolute;width:7px;height:7px;right:7px;top:7px;border-radius:50%;background:#68edb7}.trail-how{padding:18px}.trail-how h2{margin:0 0 7px;font:800 1.55rem Fraunces,serif}.trail-how p{margin:0;color:#c8e2d3;line-height:1.45}@media(max-width:420px){.trail-app{padding:18px 12px 42px}.trail-board{gap:2px;padding:6px;border-radius:15px}.trail-cell{border-radius:7px}.trail-nav{padding:0 15px}.trail-hero h1{font-size:3.05rem}.trail-cell.floor>span{font-size:clamp(.62rem,4vw,1rem)}}

/* Pips read like dice while cleared tiles quietly fall out of the path. */
.trail-cell.floor.spent{opacity:0;box-shadow:none}.trail-cell.floor.vanishing{animation:trail-vanish .32s ease-out forwards}.pips{position:relative;z-index:1;width:52%;height:52%;display:grid;grid-template-columns:repeat(3,1fr);grid-template-rows:repeat(3,1fr);place-items:center}.pips i{width:clamp(4px,11%,8px);aspect-ratio:1;border-radius:50%;background:#1c5655;box-shadow:inset 0 1px rgba(255,255,255,.32)}.pips-1 i:nth-child(1){grid-area:2/2}.pips-2 i:nth-child(1){grid-area:1/1}.pips-2 i:nth-child(2){grid-area:3/3}.pips-3 i:nth-child(1){grid-area:1/1}.pips-3 i:nth-child(2){grid-area:2/2}.pips-3 i:nth-child(3){grid-area:3/3}.pips-4 i:nth-child(1){grid-area:1/1}.pips-4 i:nth-child(2){grid-area:1/3}.pips-4 i:nth-child(3){grid-area:3/1}.pips-4 i:nth-child(4){grid-area:3/3}.pips-5 i:nth-child(1){grid-area:1/1}.pips-5 i:nth-child(2){grid-area:1/3}.pips-5 i:nth-child(3){grid-area:2/2}.pips-5 i:nth-child(4){grid-area:3/1}.pips-5 i:nth-child(5){grid-area:3/3}.pips-6 i:nth-child(1){grid-area:1/1}.pips-6 i:nth-child(2){grid-area:2/1}.pips-6 i:nth-child(3){grid-area:3/1}.pips-6 i:nth-child(4){grid-area:1/3}.pips-6 i:nth-child(5){grid-area:2/3}.pips-6 i:nth-child(6){grid-area:3/3}.trail-cell.goal>.exit{position:absolute;width:30%;height:30%;border:3px solid #795116;border-top:0;transform:rotate(45deg);bottom:17%;left:34%}.trail-cell.goal .pips i{position:static;width:clamp(4px,11%,8px);height:auto;border:0;transform:none;bottom:auto;left:auto}.trail-levels>div{grid-template-columns:repeat(10,1fr);gap:6px}.trail-levels button{border-radius:9px;font-size:.72rem}.trail-levels button[data-done=true]:after{width:6px;height:6px;right:4px;top:4px}@keyframes trail-vanish{from{opacity:1;transform:scale(1)}to{opacity:0;transform:scale(.65)}}@media(max-width:420px){.pips i{width:clamp(3px,10%,7px)}.trail-cell.goal .pips i{width:clamp(3px,10%,7px)}}

/* Large, classic dice pips remain readable even on seven-wide boards. */
.pips{width:78%;height:78%}.pips i,.trail-cell.goal .pips i{width:clamp(6px,20%,13px)}@media(max-width:420px){.pips i,.trail-cell.goal .pips i{width:clamp(6px,20%,11px)}}

/* Oversized pips and a clean square player token. */
.pips i,.trail-cell.goal .pips i{width:clamp(11px,38%,24px)}.trail-cell.player b{width:48%;height:48%;border-radius:18%;background:#fff;border:3px solid #102124;box-shadow:0 3px 0 #020707,0 0 0 3px rgba(255,255,255,.25)}@media(max-width:420px){.pips i,.trail-cell.goal .pips i{width:clamp(10px,38%,20px)}}

/* A zero-dot tile stays bright until the player actually leaves it. */
.trail-cell.floor:not(.spent){background:linear-gradient(145deg,#dbeacb,#b7d4b7)}

/* Ten level buttons must share the available width, including two-digit labels. */
.trail-levels>div{grid-template-columns:repeat(10,minmax(0,1fr));gap:6px}.trail-levels button{min-width:0}