/* Each brass stop is aligned to its actual 3D space; details unfold over that space. */
#trail-canvas{position:relative;min-height:570px}
#trail-canvas canvas{z-index:0}
.board-game__controls{display:contents}
.board-stop,.board-stop.is-selected{position:absolute;z-index:3;left:0;top:0;right:auto;bottom:auto;width:56px;height:56px;min-height:56px;margin:0;padding:0;border:2px solid #fff1c9;border-radius:50%;background:radial-gradient(circle at 32% 24%,#b88645,#604020 72%);box-shadow:inset 0 0 0 3px #513018,0 3px 0 #27170d,0 8px 16px #0009;transform:translate(-50%,-50%);cursor:pointer;transition:transform .32s cubic-bezier(.2,.8,.2,1),box-shadow .32s}
.board-stop:hover,.board-stop:focus-visible{transform:translate(-50%,-50%) scale(1.16);box-shadow:inset 0 0 0 3px #513018,0 0 0 4px #f4cb7a,0 12px 20px #0009}
.board-stop.is-selected{background:radial-gradient(circle at 30% 24%,#ffdf96,#b5792d 75%);box-shadow:inset 0 0 0 3px #81501b,0 0 0 4px #fff0bd,0 10px 18px #0009}
.board-stop:after{font-size:1.08rem;color:#fff8df;text-shadow:0 1px 2px #241207}
.board-stop.is-selected:after{color:#28180b;text-shadow:none}
.board-stop:focus-visible{outline:3px solid #fff;outline-offset:7px}
.board-game__hint{position:absolute;z-index:2;left:18px;bottom:29px;max-width:260px;margin:0;padding:12px 16px;border:1px solid #dcb66f;background:#130e0ce8;color:#fff0d0;font:700 .82rem var(--label);letter-spacing:.07em;box-shadow:0 7px 20px #0008;pointer-events:none}
.board-game__hint[hidden]{display:none}
.board-game__detail,html[data-theme="night"] .board-game__detail{position:absolute;z-index:6;right:auto;bottom:auto;left:50%;top:100px;display:flex;flex-direction:column;align-items:stretch;justify-content:flex-start;gap:8px;width:min(355px,calc(100% - 24px));min-height:0;max-height:calc(100% - 85px);overflow:auto;margin:0;padding:22px 24px 24px;border:3px solid #cba058;border-radius:8px;background:linear-gradient(#110c09f0,#1c120deb),url('../assets/ranch-wood-seamless.webp') center/562px 360px repeat;color:#fff3db;box-shadow:inset 0 0 0 2px #302014,0 17px 27px #090604b8;filter:none;text-shadow:none;transform:translateX(-50%);transform-origin:50% 0}
.board-game__detail[hidden],html[data-theme="night"] .board-game__detail[hidden]{display:none}
.board-game__detail.is-open{animation:unfold-board-detail .42s cubic-bezier(.18,.82,.2,1) both}
@keyframes unfold-board-detail{from{opacity:0;transform:translateX(-50%) translateY(-18px) rotateX(-16deg) scale(.92)}to{opacity:1;transform:translateX(-50%) translateY(0) rotateX(0) scale(1)}}
.board-game__detail:before{content:'';position:absolute;inset:8px;border:1px solid #d4a86472;border-radius:4px;pointer-events:none}
.board-detail-close{position:absolute;right:13px;top:10px;z-index:1;display:grid;place-items:center;width:30px;height:30px;padding:0;border:1px solid #cba058;border-radius:50%;background:#4e3119;color:#fff0d0;font:700 1.3rem sans-serif;cursor:pointer}
.board-detail-close:hover,.board-detail-close:focus-visible{background:#a77936;color:#1a1008;outline:2px solid #fff4d2;outline-offset:2px}
.board-game__detail span,html[data-theme="night"] .board-game__detail span{padding-right:26px;color:#f2c47e;font:800 .82rem var(--label);letter-spacing:.1em;text-shadow:none}
.board-game__detail h3,html[data-theme="night"] .board-game__detail h3{max-width:none;margin:4px 0;color:#fff6e8;font:600 clamp(2rem,2.8vw,2.75rem)/.95 var(--display);overflow-wrap:anywhere;text-shadow:none}
.board-game__detail p,html[data-theme="night"] .board-game__detail p{max-width:none;margin:0;color:#f8e8ce;font:500 1rem/1.48 'DM Sans',sans-serif;text-shadow:none}
.board-game__detail small,html[data-theme="night"] .board-game__detail small{margin-top:5px;color:#f2c47e;font:800 .72rem/1.3 var(--label);letter-spacing:.08em;text-shadow:none;overflow-wrap:anywhere}
.board-game__table:after{z-index:1}
html[lang='es'] #trail-canvas:before{content:'MGR / LA RUTA DORADA'}
@media(max-width:690px){#trail-canvas{height:555px;min-height:555px}.board-stop,.board-stop.is-selected{width:43px;height:43px;min-height:43px}.board-stop:after{font-size:.9rem}.board-game__detail,html[data-theme="night"] .board-game__detail{width:calc(100% - 22px);max-height:calc(100% - 75px);padding:18px 20px 19px}.board-game__detail h3,html[data-theme="night"] .board-game__detail h3{font-size:2rem}.board-game__detail p,html[data-theme="night"] .board-game__detail p{font-size:.9rem;line-height:1.42}.board-game__detail small{font-size:.67rem}.board-game__hint{bottom:23px;left:10px;right:10px;max-width:none;font-size:.72rem}.board-game__table:after{top:12px}}
@media(prefers-reduced-motion:reduce){.board-game__detail.is-open{animation:none}.board-stop{transition:none}}