@font-face{font-family:DM;src:url(body.ttf);font-display:swap}
@font-face{font-family:DM;src:url(display.ttf);font-weight:900;font-display:swap}
@font-face{font-family:Space;src:url(space.ttf);font-weight:700;font-display:swap}
:root{color:#16392f;background:#f8f3e7;font-family:DM,system-ui,sans-serif;--ink:#16392f;--cream:#fffaf0;--orange:#ff7950;--purple:#7050ae}
*{box-sizing:border-box}
[hidden]{display:none!important}
body{margin:0}
a{color:inherit}
button,select{font:inherit}
button,select,.br-back{border-radius:12px;border:1px solid var(--ink);min-height:44px;padding:.65rem .85rem}
button{background:var(--ink);color:white;font-weight:900;cursor:pointer}
button:disabled{opacity:.45;cursor:default}
select{background:white;color:var(--ink);max-width:100%;min-width:0}
:focus-visible{outline:3px solid var(--purple);outline-offset:3px}
.br-header{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:.6rem clamp(1rem,5vw,4.5rem);background:var(--cream);border-bottom:1px solid #d5d8c7}
.br-header img{display:block;width:clamp(126px,20vw,176px);height:auto}
.br-back,.br-outline{background:var(--cream);color:var(--ink);font-weight:900;text-decoration:none;white-space:nowrap}
main{width:min(1200px,100%);margin:auto;padding:clamp(1rem,3vw,2.6rem)}
.br-heading{display:flex;align-items:end;justify-content:space-between;gap:1.25rem;margin-bottom:1.4rem}
.br-heading h1{font-size:clamp(3.6rem,10vw,7.5rem);line-height:.91;letter-spacing:-.09em;margin:.32rem 0 .75rem;font-weight:900}
.br-heading h1 span{color:#e66743}
.br-heading p:last-child{margin:.5rem 0 0;font-weight:900;font-size:clamp(1rem,2vw,1.25rem)}
.br-kicker,.br-count span{font:700 .78rem Space,monospace;letter-spacing:.09em;margin:0}
.br-picker{display:grid;gap:.45rem;font-weight:900}
.br-board{display:grid;grid-template-columns:minmax(0,1fr) minmax(275px,330px);gap:1rem;align-items:start}
.br-map,.br-controls{border:1px solid #c5cbbb;border-radius:20px;overflow:hidden;background:var(--cream)}
.br-map-head{padding:.85rem 1rem;background:#183e32;color:white;display:flex;align-items:center;justify-content:space-between;gap:.6rem}
.br-map-head .br-kicker{color:#cae3b2}
h2{font-weight:900;letter-spacing:-.035em;margin:.2rem 0 0;line-height:1.13;font-size:clamp(1.25rem,3vw,1.8rem)}
#route-map{width:100%;height:auto;aspect-ratio:1.5;display:block;background:#dcece7}
#route-map>path{fill:#f3e8c9;stroke:#9ba88a;stroke-width:1;vector-effect:non-scaling-stroke}
#route-map>path.is-driven{fill:#f8a37d}
#route-map>path.is-finish{fill:#cbb6ed;stroke:#7050ae}
.br-road,.br-shortcut{fill:none;stroke-width:3;vector-effect:non-scaling-stroke;stroke-linejoin:round;stroke-linecap:round}
.br-road{stroke:#9f3a20}
.br-shortcut{stroke:#224d9b;stroke-dasharray:4 5;animation:br-shortcut-in .65s ease-out both}
.br-legend{padding:.65rem 1rem;display:flex;gap:.5rem 1.15rem;flex-wrap:wrap;font-weight:900;font-size:.88rem}
.br-legend span{display:inline-flex;align-items:center;gap:.4rem}
.br-legend i{display:inline-block;width:.85rem;height:.85rem;border-radius:.25rem}
.br-drive{background:#f8a37d}.br-target{background:#cbb6ed}.br-best{background:#224d9b}
.br-controls{padding:1rem;display:grid;gap:1rem}
.br-count{display:flex;align-items:center;justify-content:space-between;gap:.65rem;padding:.55rem .85rem;background:#f9d8ae;border-radius:12px}
.br-count strong{font-size:1.7rem;font-weight:900}
.br-state p{margin:.4rem 0 0;line-height:1.4}
#trail{padding:0;margin:0;display:flex;gap:.35rem;flex-wrap:wrap;list-style:none}
#trail li{background:#f1e8cf;border-radius:.4rem;padding:.25rem .45rem;font-size:.87rem;font-weight:900}
#trail li:last-child{background:#ffdfc7}
.br-move{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:.45rem;margin-top:.45rem}
.br-actions{display:flex;flex-wrap:wrap;gap:.45rem}
.br-rules{margin:1rem 0 0;font-size:.95rem}
footer{margin-top:1rem;font-size:.8rem}
@media(max-width:760px){
  .br-heading{display:grid;gap:.75rem}
  .br-board{grid-template-columns:1fr}
  .br-controls{gap:.75rem}
}

.br-finish {
  overflow: hidden;
  padding: .9rem;
  border: 1px solid #a9c994;
  border-radius: 14px;
  background: #e9f3d8;
  animation: br-finish-in .4s ease-out both;
}
.br-finish.is-detour { background: #fff0d4; border-color: #e2ba71; }
.br-finish-top { display: flex; align-items: center; gap: .75rem; }
.br-finish-icon {
  display: grid;
  flex: 0 0 3.15rem;
  height: 3.15rem;
  place-items: center;
  border-radius: 50%;
  background: #173e32;
  color: #fffaf0;
  font-size: 1.7rem;
  font-weight: 900;
  animation: br-flag-wave .65s .1s ease-out both;
}
.is-detour .br-finish-icon { background: #87451f; animation-name: br-turn-sign; }
.br-finish-scores { display: grid; grid-template-columns: 1fr 1fr; gap: .5rem; margin: .85rem 0 .65rem; }
.br-finish-scores div { padding: .55rem .65rem; border-radius: 9px; background: #fffaf0; }
.br-finish-scores dt { font-size: .8rem; font-weight: 900; }
.br-finish-scores dd { margin: 0; font-size: 1.65rem; font-weight: 900; }
#finish-detail { margin: 0; line-height: 1.45; }
@keyframes br-finish-in {
  from { opacity: 0; transform: translateY(12px); }
  to { opacity: 1; transform: translateY(0); }
}
@keyframes br-flag-wave {
  0% { transform: scale(.65) rotate(-20deg); }
  48% { transform: scale(1.14) rotate(12deg); }
  75% { transform: rotate(-8deg); }
  100% { transform: scale(1) rotate(0); }
}
@keyframes br-turn-sign {
  0% { transform: rotate(-55deg) scale(.85); }
  65% { transform: rotate(12deg); }
  100% { transform: rotate(0) scale(1); }
}
@keyframes br-shortcut-in { from { opacity: 0; } to { opacity: 1; } }
@media (prefers-reduced-motion: reduce) {
  .br-finish, .br-finish-icon, .br-shortcut { animation: none; }
}