*{box-sizing:border-box}
:root{
  --ink:#24333a;--muted:#6c777b;--card:#fffaf2;
  --wood1:#f1d39c;--wood2:#d6aa70;--wood3:#b9844f;
}
html,body{margin:0;width:100%;height:100%;overflow:hidden;font-family:system-ui,-apple-system,"Segoe UI",sans-serif;background:radial-gradient(circle at top,#f8f4ed,#e7dfd1 72%);color:var(--ink)}
body{display:flex;justify-content:center}
button,select{font:inherit}
button{cursor:pointer}
.game-shell{
  width:min(100%,920px);height:100dvh;padding:7px 12px 9px;
  display:grid;grid-template-rows:auto auto auto 1fr auto auto;gap:7px
}
.app-header{display:flex;justify-content:center;align-items:center;min-height:47px}
.title-block{display:flex;align-items:baseline;gap:9px}
.brand{font-size:10px;font-weight:900;letter-spacing:.16em;color:#81633f;text-transform:uppercase}
h1{margin:0;font-size:clamp(30px,5vh,48px);line-height:1;letter-spacing:-.04em}
.settings-bar{display:flex;justify-content:center;gap:8px;flex-wrap:wrap}
.settings-bar label{height:37px;display:flex;align-items:center;gap:7px;background:var(--card);border:1px solid #eadfce;border-radius:12px;padding:4px 7px 4px 10px;font-size:10px;font-weight:850;box-shadow:0 2px 8px #0001}
.settings-bar select{height:27px;border:1px solid #d8cbbb;border-radius:8px;background:white;padding:2px 25px 2px 8px;color:var(--ink);font-weight:700;font-size:11px}

.hud{display:grid;grid-template-columns:minmax(190px,280px) 82px 82px;justify-content:center;gap:8px}
.hud-card{height:92px;background:var(--card);border:1px solid #eadfce;border-radius:15px;box-shadow:0 3px 12px #00000013}
.task-card{padding:7px 10px;display:flex;flex-direction:column;align-items:center;justify-content:center;overflow:hidden}
.hud-label{font-size:10px;text-transform:uppercase;letter-spacing:.12em;font-weight:900;color:#45545b;text-align:center;margin-bottom:4px}
.target-grid{display:grid;grid-template-columns:repeat(4,16px);grid-template-rows:repeat(4,16px);gap:2px}
.mini-piece{width:16px;height:16px;border-radius:50%;display:grid;place-items:center;font-size:8px;font-weight:1000;color:white;text-shadow:0 1px 2px #0005;box-shadow:inset -3px -4px 0 #0002}
.stat-card{display:flex;flex-direction:column;align-items:center;justify-content:center}
.stat-value{font-size:22px;font-weight:900;line-height:1}
.mini-stat{font-size:9px;color:var(--muted);font-weight:750;margin-top:4px}

.board-area{min-height:0;display:flex;align-items:center;justify-content:center}
.wood-frame{
  position:relative;
  width:min(92vw,560px,calc((100dvh - 205px) * .93));
  aspect-ratio:1/1.08;max-height:100%;
  padding:5.5% 5.5% 5%;
  border-radius:5%;
  background:
    repeating-linear-gradient(92deg,#ffffff10 0 5px,#00000009 5px 8px,#ffffff08 8px 14px),
    linear-gradient(120deg,var(--wood1),#edcb93 42%,var(--wood2) 75%,var(--wood3));
  box-shadow:0 12px 28px #57422744,inset 0 0 0 3px #fff5,inset 0 -8px 16px #70471e22;
}
.wood-logo{position:absolute;right:3.5%;bottom:2%;font-size:11px;font-weight:900;font-style:italic;color:#805b33aa}
.board{width:100%;height:100%;display:grid;grid-template-columns:repeat(6,1fr);grid-template-rows:repeat(5,1fr);gap:1.2%}
.cell{position:relative;display:grid;place-items:center;isolation:isolate}
.cell::before{content:"";position:absolute;z-index:0;width:30%;height:126%;background:linear-gradient(90deg,#4b4947,#787673,#4a4846);border-radius:999px;box-shadow:inset 4px 0 6px #0006,inset -3px 0 5px #fff2}
.cell.top::after{content:"";position:absolute;z-index:0;width:130%;height:30%;background:linear-gradient(#4b4947,#787673,#4a4846);border-radius:999px;box-shadow:inset 0 4px 6px #0006,inset 0 -2px 4px #fff2}
.cell.park::before{height:30%;width:130%;background:linear-gradient(#4b4947,#787673,#4a4846)}
.piece{position:relative;z-index:3;width:68%;aspect-ratio:1;border:0;border-radius:50%;display:grid;place-items:center;font-size:clamp(15px,3.5vmin,27px);font-weight:1000;color:#fff;text-shadow:0 1px 2px #0006;box-shadow:inset -9px -9px 0 #0002,inset 4px 4px 0 #fff4,0 5px 7px #3b291b55;transition:transform .12s ease,filter .12s ease}
.piece:hover{transform:scale(1.06)}
.piece.selected{outline:4px solid #fff;outline-offset:3px;transform:scale(1.08)}
.empty-slot{position:relative;z-index:2;width:43%;aspect-ratio:1;border-radius:50%;border:2px dashed #ffffff66;background:transparent}
.empty-slot.destination{width:57%;border:4px solid #fff;background:#ffffff48;box-shadow:0 0 0 4px #263c4738;animation:pulse .8s ease-in-out infinite alternate}
@keyframes pulse{to{transform:scale(1.08);background:#ffffff68}}
.red{background:#ef4f58}.blue{background:#3289d6}.green{background:#60b84c}.yellow{background:#f5c928}
.symbol-red::after{content:"○"}.symbol-blue::after{content:"▲"}.symbol-green::after{content:"■"}.symbol-yellow::after{content:"★"}

.controls{display:flex;justify-content:center;gap:8px}
.controls button,.dialog button{border:0;border-radius:12px;padding:9px 16px;font-weight:850;background:var(--card);color:var(--ink);box-shadow:0 3px 10px #0002}
.controls button:disabled{opacity:.38;cursor:default}
.primary{background:#2d444d!important;color:#fff!important}
.instruction{text-align:center;font-size:11px;color:var(--muted);min-height:14px}
.modal{position:fixed;inset:0;background:#17252dcc;display:grid;place-items:center;padding:20px;z-index:50}
.hidden{display:none!important}
.dialog{width:min(92vw,400px);background:var(--card);border-radius:24px;padding:26px;text-align:center;box-shadow:0 24px 70px #0007}
.dialog h2{font-size:28px;margin:7px 0}.dialog p{color:var(--muted)}
.stars{font-size:34px;letter-spacing:4px;color:#e6ad13}.dialog-actions{display:flex;justify-content:center;gap:9px;margin-top:16px}

@media(max-width:560px){
  .game-shell{padding:5px 7px 7px;gap:5px}
  .app-header{min-height:38px}.brand{font-size:8px}h1{font-size:29px}
  .settings-bar{gap:5px}.settings-bar label{height:33px;padding-left:7px;font-size:9px}.settings-bar select{height:24px;font-size:10px}
  .hud{grid-template-columns:minmax(145px,1fr) 62px 62px;gap:5px}
  .hud-card{height:76px;border-radius:12px}.target-grid{grid-template-columns:repeat(4,14px);grid-template-rows:repeat(4,14px)}.mini-piece{width:14px;height:14px}
  .wood-frame{width:min(95vw,calc((100dvh - 170px) * .95));padding:5.5% 4.5% 5%}
  .controls button{padding:8px 12px;font-size:13px}
}
@media(max-height:650px){
  .game-shell{gap:4px}.app-header{min-height:30px}h1{font-size:26px}.brand{display:none}
  .settings-bar label{height:30px}.hud-card{height:65px}
  .target-grid{grid-template-columns:repeat(4,12px);grid-template-rows:repeat(4,12px)}.mini-piece{width:12px;height:12px}
  .wood-frame{width:min(82vw,calc((100dvh - 145px) * .95))}
  .controls button{padding:6px 11px;font-size:12px}.instruction{font-size:10px}
}

/* v0.12: lidt mere plads til niveau-beskrivelsen uden at ændre højden */
#difficultyLabel{
  max-width:74px;
  text-align:center;
  line-height:1.05;
}

/* v0.13: diskret markering af gennemførte baner i statusfeltet */
#difficultyLabel{
  white-space:normal;
}
.dialog strong{
  display:inline-block;
  margin-top:5px;
}


/* v0.19: Bane-kortet viser kun overskrift og banenummer */
.level-card .stat-value{
  margin-top:2px;
}