/* v378 · A single material language across the map, menus, and gameplay.
   Decorative layers never receive pointer events. Gameplay stays in canvas. */
:root{
  --polish-ink:#153b49;
  --polish-cream:#fff6e8;
  --polish-gold:#ffe09a;
  --polish-line:rgba(255,236,191,.46);
  --polish-shadow:rgba(19,35,40,.35)
}
body{background:radial-gradient(ellipse at 50% 40%,#304d51,#142a32 65%,#0c1e27)}
#stage{box-shadow:0 0 0 1px rgba(255,241,204,.13),0 22px 70px rgba(7,24,33,.50)}

/* The cover art remains in place; the vignette gives the title and footer
   enough separation while leaving Juna's face unobscured. */
#startView:before{
  background:linear-gradient(180deg,rgba(18,34,42,.33) 0%,transparent 31%,transparent 57%,rgba(30,25,20,.08) 78%,rgba(18,25,27,.40) 100%),
             radial-gradient(ellipse at 50% 31%,transparent 35%,rgba(29,39,40,.18) 100%);
}
#startView .ecke button{
  background:linear-gradient(150deg,rgba(255,248,227,.28),rgba(35,57,62,.30));
  border:1px solid rgba(255,245,220,.68);
  box-shadow:inset 0 1px rgba(255,255,255,.34),0 4px 13px rgba(17,30,34,.28);
}
#startView #startEasy,#mapStart,#garageStartBtn,#shopBack{
  background:linear-gradient(163deg,#fff1b9 0%,#ffe09a 37%,#ffc56b 78%,#eba84c 100%);
  box-shadow:inset 0 2px 0 rgba(255,255,255,.68),inset 0 -2px 0 rgba(163,99,33,.19),
             0 4px 0 #a4723b,0 12px 22px rgba(39,34,27,.28);
}
#startView #startEasy:focus-visible,#mapStart:focus-visible{outline:3px solid #8cf3ee;outline-offset:4px}
.btn:not(:disabled):hover{filter:brightness(1.065)}
.btn:not(:disabled):active{filter:brightness(.96)}

/* Map is the hero. The rails and action row use the same enamel and brass
   details as the other screens without placing another panel over the art. */
#mapView{background:linear-gradient(180deg,rgba(16,49,58,.88),rgba(17,39,49,.95))}
#mapView .kartebox{
  border:3px solid rgba(255,244,212,.96)!important;
  border-radius:25px;
  box-shadow:inset 0 0 0 1px rgba(26,77,85,.35),0 4px 0 rgba(139,107,66,.65),
             0 18px 36px rgba(3,29,40,.41)!important;
}
#mapView .kartebox:after{
  content:'';position:absolute;inset:0;z-index:1;border-radius:22px;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.46),inset 0 0 28px rgba(19,75,84,.13);
  pointer-events:none;
}
#mapView .mapregions button{
  color:#f7f1e6;
  border:1px solid rgba(255,229,183,.32);
  background:linear-gradient(165deg,rgba(87,115,112,.76),rgba(35,61,66,.88));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.16),0 3px 7px rgba(6,29,35,.20);
}
#mapView .mapregions button.active{
  color:#203b3d;
  background:linear-gradient(165deg,#fff5d7,#eed49a);
  border-color:#fff6d7;
  box-shadow:inset 0 1px 0 #fff,0 0 0 2px rgba(252,210,121,.55),0 5px 13px rgba(3,29,38,.32);
}
#mapView .mapregions button.active b{filter:drop-shadow(0 1px 0 rgba(81,54,27,.28))}
#mapView .mapregionlive{color:#fff3d4;font-weight:600;text-shadow:0 2px 8px rgba(10,30,37,.55)}
#mapView .mapactions .btn.ghost{
  background:rgba(255,249,235,.12);color:#fff8eb;
  border:1px solid rgba(255,246,222,.52);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.13),0 5px 13px rgba(5,29,37,.25);
}
#mapView .karteNav{
  background:linear-gradient(155deg,#fff3ce,#e3c791);
  color:var(--polish-ink);border:1px solid #fff9dd;
  box-shadow:0 3px 0 #9c8464,0 6px 12px rgba(17,51,61,.22);
}

/* Dark modal surfaces become a restrained continuation of the game art. */
#pauseView .panel,#setView .panel,#tastenView .panel,#overView .panel,
#winView .panel,#legalView .panel,#levelCompleteView .mapstack,#shopView .panel{
  border:1px solid var(--polish-line);
  background:radial-gradient(ellipse at 50% 0%,rgba(94,124,116,.27),transparent 62%),
             linear-gradient(150deg,rgba(43,73,77,.97),rgba(22,45,55,.98));
  box-shadow:inset 0 1px 0 rgba(255,250,227,.19),0 15px 38px rgba(9,25,31,.34);
}
#garageView #dogCard{
  box-shadow:inset 0 1px 0 rgba(255,251,226,.29),0 13px 36px rgba(22,18,12,.42)!important;
}
#shopView .equipment-tile{
  border-color:rgba(255,230,176,.35);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.10),0 4px 10px rgba(13,24,23,.25);
}
#shopView .equipment-tile.selected{
  border-color:#ffe7a5;box-shadow:0 0 0 2px rgba(255,227,152,.28),0 7px 15px rgba(11,25,28,.31);
}
#shopView .equipment-detail{
  background:radial-gradient(ellipse at 20% 42%,rgba(255,222,141,.24),transparent 53%),
             linear-gradient(145deg,rgba(76,82,68,.86),rgba(30,57,60,.97));
}

/* Status stays compact and uses one hue across counters and controls. */
#hud .pill,#hud .hud-right button{
  color:var(--polish-ink);
  background:linear-gradient(145deg,rgba(255,250,238,.87),rgba(227,241,233,.76));
  border:1px solid rgba(255,255,255,.80);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.62),0 3px 9px rgba(16,51,63,.19);
}
#pts,.mult-badge{
  color:#405d71!important;
  border-color:rgba(255,255,255,.74)!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.63),0 3px 9px rgba(16,51,63,.16)!important;
}
#barkBtnM{border-color:rgba(255,255,255,.82)!important}
#jumpBtn{box-shadow:inset 0 1px rgba(255,255,255,.70),0 4px 0 #ae7c37,0 9px 16px rgba(13,47,56,.29)}
button:focus-visible,a:focus-visible{outline:3px solid #8cf2ed;outline-offset:3px}

@media (max-width:430px){
  #mapView .mapregions button{border-radius:12px}
  #mapView .kartebox{border-width:2px!important}
  #mapView .mapregionlive{font-size:11px}
}
@media (prefers-reduced-motion:reduce){
  .btn,.mapregions button{transition:none!important}
}