/* ============================================================
   Bloementuin — HTML5 pipe-rotation puzzel
   Stage 800×600, schaalt via transform: scale()
   ============================================================ */

:root {
  --text: #f1f4ff;
  --scale: 1;
}

*, *::before, *::after { box-sizing: border-box; }

html, body {
  margin: 0; padding: 0;
  width: 100%; height: 100%;
  overflow: hidden;
  font-family: 'Rubik', system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
  font-weight: 600;
  color: var(--text);
  background: #5BC83E;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  user-select: none; -webkit-user-select: none;
  -webkit-tap-highlight-color: transparent;
  overscroll-behavior: none;
  touch-action: manipulation;
}
button { font-family: inherit; cursor: pointer; border: 0; outline: 0; }

.app {
  position: fixed; inset: 0;
  display: flex; align-items: center; justify-content: center;
  background: #5BC83E;     /* fallback wanneer .garden-bg niet rendert */
  overflow: hidden;
}

/* Fullscreen bloementuin-achtergrond.
   Vult de volledige viewport en zit ACHTER de stage — geen frame, geen
   panel, de hele scène (lucht, heuvels, perken, struiken, bloemen) wordt
   in één SVG (.garden-decoration) hieronder getekend. Deze container is
   alleen een fallback-kleur voor het geval de SVG niet laadt. */
.garden-bg {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
  background: #8acd6c;
}

/* Geïllustreerde tuin-scène. Vult de viewport via slice; alle vormen
   (lucht, zon, heuvels, bloembedden, pad, struiken, bloemen, gras)
   zitten in de inline SVG in index.html. */
.garden-decoration {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

/* Centrale bloementuinlaag — ligt direct ACHTER het pipe-grid en tint
   het centrale gebied groen + voegt zachte bloem-spikkels en perk-
   schaduwen toe. Door de radial mask vloeien de randen weg → geen
   paneel-perceptie. Zit boven .garden-decoration (broader scene) maar
   onder .stage (z-index: 2). */
.pipe-garden-layer {
  position: absolute;
  left: 50%;
  top: clamp(60px, 10vh, 130px);
  width: clamp(760px, 78vw, 1280px);
  height: clamp(460px, 78vh, 880px);
  transform: translateX(-50%);
  pointer-events: none;
  z-index: 1;
  /* Meerdere overlappende perk-vlekken + zachte weide-basis */
  background:
    repeating-linear-gradient(75deg, rgba(255,255,255,0.016) 0 1px, transparent 1px 9px),
    repeating-linear-gradient(165deg, rgba(18,105,35,0.022) 0 1px, transparent 1px 12px),
    radial-gradient(ellipse 38% 28% at 18% 30%, rgba(104,215,91,0.40) 0%, rgba(67,184,60,0.22) 45%, transparent 70%),
    radial-gradient(ellipse 36% 26% at 80% 28%, rgba(104,215,91,0.36) 0%, rgba(46,152,52,0.20) 45%, transparent 70%),
    radial-gradient(ellipse 40% 28% at 22% 70%, rgba(46,152,52,0.44) 0%, rgba(32,122,43,0.22) 45%, transparent 72%),
    radial-gradient(ellipse 40% 28% at 78% 72%, rgba(46,152,52,0.42) 0%, rgba(32,122,43,0.22) 45%, transparent 72%),
    radial-gradient(ellipse 32% 22% at 50% 45%, rgba(170,255,120,0.14) 0%, transparent 65%),
    linear-gradient(180deg, rgba(67,184,60,0.40) 0%, rgba(46,152,52,0.54) 100%);
  /* Zachte radial mask → randen vloeien weg, geen paneel */
  mask:         radial-gradient(78% 72% at 50% 50%, black 0%, black 55%, transparent 96%);
  -webkit-mask: radial-gradient(78% 72% at 50% 50%, black 0%, black 55%, transparent 96%);
}

/* Subtiele kleine bloem-stippen — tile-pattern, zacht alpha, gemaskt
   zodat ze als "verre bloementuin" leesbaar zijn (niet als confetti). */
.pipe-garden-layer::before {
  content: '';
  position: absolute;
  inset: 8% 6%;
  pointer-events: none;
  background:
    radial-gradient(circle at 22% 28%, rgba(255,220,90,0.55) 0 2.4px, transparent 3.4px),
    radial-gradient(circle at 38% 22%, rgba(255,255,255,0.50) 0 2px,   transparent 3px),
    radial-gradient(circle at 62% 30%, rgba(255,150,180,0.50) 0 2.4px, transparent 3.4px),
    radial-gradient(circle at 78% 25%, rgba(200,160,240,0.48) 0 2.4px, transparent 3.4px),
    radial-gradient(circle at 32% 60%, rgba(255,220,90,0.50) 0 2.4px,  transparent 3.4px),
    radial-gradient(circle at 52% 65%, rgba(255,255,255,0.50) 0 2px,   transparent 3px),
    radial-gradient(circle at 72% 58%, rgba(255,150,180,0.48) 0 2.4px, transparent 3.4px);
  background-size:
    180px 140px,
    160px 130px,
    195px 155px,
    170px 140px,
    185px 150px,
    165px 130px,
    190px 150px;
  opacity: 0.50;
  mask:         radial-gradient(80% 70% at 50% 50%, black 0%, black 60%, transparent 100%);
  -webkit-mask: radial-gradient(80% 70% at 50% 50%, black 0%, black 60%, transparent 100%);
}

/* Donkergroene perk-schaduwen onderin het centrale gebied — geven
   diepte direct achter de kraan-rij. */
.pipe-garden-layer::after {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(ellipse 30% 18% at 20% 82%, rgba(45,140,55,0.28) 0%, transparent 65%),
    radial-gradient(ellipse 30% 18% at 80% 84%, rgba(45,140,55,0.28) 0%, transparent 65%),
    radial-gradient(ellipse 32% 16% at 50% 92%, rgba(40,135,55,0.22) 0%, transparent 70%);
  opacity: 0.65;
}

/* Stage = scaling-container BOVEN de tuinlaag.
   Geen card-frame, geen achtergrond. */
.stage {
  position: relative;
  z-index: 2;
  width: 800px; height: 600px;
  overflow: hidden;
  transform-origin: center;
  transform: scale(var(--scale));
  background: transparent;
}

/* Heg-ring rond het speelveld. Zit ALTIJD exact rond het pipe-grid omdat
   hij in de stage staat en preserveAspectRatio="none" hem 1:1 op de
   stage-bounds (800×600) strekt. Drop-shadow met diepe donkergroene tint
   geeft de bolletjes meer "candy"-volume zonder hard zwart te worden. */
.hedge-frame {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 1;
  filter:
    drop-shadow(0 3px 3px rgba(8,85,22,0.42))
    drop-shadow(0 9px 13px rgba(8,85,22,0.28));
}

/* Topbar — pills stacked links, icons rechts */
.topbar {
  position: absolute;
  top: 12px; left: 14px; right: 14px;
  display: flex; align-items: flex-start; gap: 10px;
  z-index: 5;
}
.topbar__left  { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; }
.topbar__right { flex: 1; display: flex; justify-content: flex-end; gap: 6px; }

.pill {
  background:
    linear-gradient(180deg, rgba(80,170,95,0.28), rgba(13,83,43,0.0)) ,
    linear-gradient(180deg, rgba(13,83,43,0.88), rgba(5,55,30,0.88));
  border: 1px solid rgba(190,255,170,0.22);
  border-radius: 10px;
  padding: 6px 16px 8px;
  display: flex; flex-direction: column; align-items: center;
  min-width: 110px;
  line-height: 1;
  box-shadow: 0 4px 12px rgba(0,45,20,0.35);
}
.pill__label {
  font-size: 10px; letter-spacing: 1.4px; text-transform: uppercase;
  font-weight: 800; color: #FFFFFF;
  text-shadow: 0 1px 2px rgba(0,45,20,0.55);
}
.pill__value {
  font-size: 22px; font-weight: 900; color: #FFD335;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.4px;
  margin-top: 4px;
  /* Gele highlight bovenop + warme schaduw onder voor scherpere "pop" */
  text-shadow:
    0 1px 0 #FFF176,
    0 2px 3px rgba(80,65,10,0.55);
}
.pill--lights .pill__value { color: #FFD335; }

.icon-btn {
  width: 28px; height: 28px;
  border-radius: 7px;
  background: rgba(15, 24, 60, 0.32);
  border: 1px solid rgba(255,255,255,0.18);
  color: var(--text);
  font-size: 14px;
  display: grid; place-items: center;
  text-shadow: 0 1px 1px rgba(0,0,0,0.35);
  transition: filter .15s, transform .08s, background .15s;
}
.icon-btn:hover  { filter: brightness(1.15); }
.icon-btn:active { transform: translateY(1px); }

/* Board area: gecentreerd vlak waar de grid in zit.
   Krimpt mee met de smaller heuvel-shape (15 × 44 = 660 breed) en zit
   verticaal centraal binnen de heg-inner. */
.board-wrap {
  position: absolute;
  left: 50%;
  top: 64px;
  transform: translateX(-50%);
  width: 660px;   /* 15 cells × 44px */
  height: 380px;  /* 50px top-offset + 7×44 grid + 22px bottom-padding */
}
.tree-bg {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  pointer-events: none;
}
.board {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  top: 50px;            /* ruimte boven voor kraan-rij */
  /* Tiles worden absoluut gepositioneerd binnen dit vlak. */
}
/* Een buis-tegel */
.tile {
  position: absolute;
  width: 44px; height: 44px;
  cursor: pointer;
  transition: transform .12s ease-out;
  z-index: 3;
}
.tile:hover  { transform: scale(1.04); }
.tile:active { transform: scale(0.96); }
.tile.power  { cursor: default; }
.tile.power:hover,
.tile.power:active { transform: none; }
/* Inactieve leiding: fris donkerblauw (niet navy), geen glow, kleine
   schaduw met #0E5F92-tint zodat de pijp loskomt van het gras. */
.tile-svg {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  overflow: visible;
  pointer-events: none;
  filter: drop-shadow(0 2px 1.5px rgba(4,65,105,0.38));
  transition: filter .18s ease .08s;
  z-index: 5;
}
.tile.power .tile-svg {
  z-index: 1;
}
.tile-svg rect,
.tile-svg circle,
.tile-svg ellipse {
  transition: fill .14s ease;
}
.pipe-shadow {
  fill: rgba(0,45,85,0.38);
}
.pipe-core {
  fill: url(#pipeOffG);
  stroke: rgba(0,45,85,0.46);
  stroke-width: 1;
}
.pipe-highlight {
  fill: rgba(120,210,255,0.22);
}
.pipe-unified-shade {
  fill: url(#pipeUnifiedShadeOffG);
}
.pipe-unified-highlight {
  fill: url(#pipeUnifiedHighlightOffG);
}
.pipe-gloss-line {
  stroke: rgba(145,225,255,0.54);
  stroke-width: 3;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.pipe-edge-line {
  stroke: rgba(0,45,85,0.38);
  stroke-width: 3.3;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.source-nozzle-core {
  fill: url(#pipeOnG);
  stroke: rgba(8,127,190,0.38);
}
.source-nozzle-highlight {
  fill: rgba(225,255,255,0.58);
}
.source-nozzle-shadow {
  fill: rgba(0,80,135,0.30);
}
.source-well-shadow {
  fill: rgba(0,45,80,0.28);
}
.source-well-rim-dark {
  fill: #5A6C75;
}
.source-well-rim {
  fill: #AAB9C1;
}
.source-well-rim-highlight {
  fill: #E2EEF2;
}
.source-water-dark {
  fill: #004B78;
}
.source-water-core {
  fill: #078FDC;
}
.source-water-glint {
  fill: rgba(255,255,255,0.62);
}

/* Gevulde leiding → scherp helder water, minimal glow (géén grote waas) */
.tile.powered .pipe-core {
  fill: url(#pipeOnG);
  stroke: rgba(0,80,135,0.38);
}
.tile.powered .pipe-highlight {
  fill: rgba(225,255,255,0.58);
}
.tile.powered .pipe-unified-shade {
  fill: url(#pipeUnifiedShadeOnG);
}
.tile.powered .pipe-unified-highlight {
  fill: url(#pipeUnifiedHighlightOnG);
  opacity: 1;
}
.tile.powered .pipe-gloss-line {
  stroke: rgba(225,255,255,0.72);
}
.tile.powered .pipe-edge-line {
  stroke: rgba(0,80,135,0.30);
}
.tile.powered .pipe-shadow {
  fill: rgba(0,80,135,0.30);
}
.tile.powered .tile-svg {
  filter:
    drop-shadow(0 0 2px rgba(40,190,245,0.16))
    drop-shadow(0 2px 1.5px rgba(7,134,199,0.38));
  /* Shimmer is nu zeer subtiel — alleen kleine glow-pulse, geen waas */
  animation: waterShimmer 2.8s ease-in-out 0.22s infinite;
}
@keyframes waterShimmer {
  0%, 100% {
    filter:
      drop-shadow(0 0 2px rgba(35,185,245,0.16))
      drop-shadow(0 1px 1.5px rgba(8,127,190,0.36));
  }
  50% {
    filter:
      drop-shadow(0 0 3px rgba(93,228,255,0.22))
      drop-shadow(0 1px 1.5px rgba(8,127,190,0.36));
  }
}
/* Animatie wanneer een tegel net gedraaid is */
.tile.spin .tile-svg {
  animation: tileSpin 0.22s cubic-bezier(.34,1.56,.64,1);
}
@keyframes tileSpin {
  from { transform: rotate(-90deg); }
  to   { transform: rotate(0deg); }
}

/* Flower-end tile: bloem, steel en kort eindstuk zijn één roteerbaar stuk.
   De state wisselt alleen via kleur/helderheid; er is geen scale/pulse. */
.flower-end-art {
  pointer-events: none;
}
.flower-shadow {
  fill: rgba(20,80,20,0.28);
  opacity: 0.72;
}
.flower-stem-pipe {
  fill: #168328;
  stroke: rgba(4,65,35,0.45);
  stroke-width: 0.7;
  filter: brightness(0.92) saturate(0.9);
}
.flower-leaf {
  fill: #2FAE35;
  stroke: rgba(5,75,25,0.35);
  stroke-width: 0.5;
  filter: brightness(0.9) saturate(0.88);
}
.flower-head {
  filter: brightness(0.93) saturate(0.84)
          drop-shadow(0 1.6px 1.3px rgba(20,80,20,0.22));
  opacity: 0.9;
}
.flower-petal {
  stroke: rgba(70,45,10,0.28);
  stroke-width: 0.45;
}
.flower-heart {
  stroke: rgba(90,55,10,0.34);
  stroke-width: 0.5;
  filter: brightness(0.88) saturate(0.9);
}
.flower-petal-shine,
.flower-heart-shine {
  fill: rgba(255,255,255,0.82);
  opacity: 0.18;
}
.flower-sparkle {
  fill: rgba(255,255,255,0.88);
  opacity: 0;
}
.tile.powered .flower-stem-pipe {
  fill: #21B94A;
  filter: brightness(1.04) saturate(1.08)
          drop-shadow(0 0 2px rgba(35,185,245,0.18));
}
.tile.powered .flower-leaf {
  fill: #39C642;
  filter: brightness(1.02) saturate(1.08);
}
.tile.powered .flower-head {
  filter: brightness(1.06) saturate(1.12)
          drop-shadow(0 1.6px 1.3px rgba(20,80,20,0.24))
          drop-shadow(0 0 4px rgba(255,240,120,0.28))
          drop-shadow(0 0 2px var(--flower-glow));
  opacity: 1;
}
.tile.powered .flower-heart {
  fill: #FFE889;
  filter: drop-shadow(0 0 5px rgba(255,230,90,0.45));
}
.tile.powered .flower-petal-shine,
.tile.powered .flower-heart-shine {
  opacity: 0.78;
}
.tile.powered .flower-sparkle {
  animation: flowerTileSparkle .32s ease-out;
}
@keyframes flowerTileSparkle {
  0%   { opacity: 0; }
  45%  { opacity: 0.85; }
  100% { opacity: 0; }
}

/* Waterdruppel-icoon op het top-down waterpunt.
   Top: 50% → exact in het midden van de trunk-tile (= midden van de stenen
   tegel die in tree-bg wordt getekend). Radial drop-shadow (geen y-offset)
   zodat het icoon plat op het water lijkt te liggen, niet erboven te zweven. */
.power-icon {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  width: 24px; height: 24px;
  border-radius: 50%;
  background: radial-gradient(circle at 50% 36%, #6EEBFF 0%, #078FDC 55%, #004B78 100%);
  display: grid; place-items: center;
  box-shadow:
    inset 0 0 5px rgba(0,75,120,0.42),
    0 0 7px rgba(45,180,240,0.18),
    0 0 5px rgba(0,45,80,0.30);
  z-index: 6;
  animation: powerPulse 2.0s ease-in-out infinite;
}
.power-icon svg { width: 16px; height: 16px; }
@keyframes powerPulse {
  0%, 100% { box-shadow: inset 0 0 5px rgba(0,75,120,0.42),
                          0 0 7px rgba(45,180,240,0.18),
                          0 0 5px rgba(0,45,80,0.30); }
  50%      { box-shadow: inset 0 0 5px rgba(0,75,120,0.42),
                          0 0 11px rgba(110,235,255,0.32),
                          0 0 5px rgba(0,45,80,0.30); }
}

/* Overlay — basis voor start- en win-paneel */
.overlay {
  position: absolute; inset: 0;
  z-index: 50;
  display: none;
  align-items: center; justify-content: center;
  padding: 24px;
}
.overlay--visible { display: flex; }

/* Win-overlay: dekkend tuingroen — speelveld is niet zichtbaar door het
   paneel heen. */
#winOverlay {
  background: #5BC83E;
}

/* Start-overlay: TRANSPARANT — de bloementuin-achtergrond blijft zichtbaar
   en speelveld-elementen (kraan, leidingen, pills, heg) worden verborgen.
   Zo zie je bij de start alleen de tuin met het logo + knop. */
#startOverlay {
  background: transparent;
}
.stage:has(#startOverlay.overlay--visible) > .topbar,
.stage:has(#startOverlay.overlay--visible) > .board-wrap,
.stage:has(#startOverlay.overlay--visible) > .hedge-frame {
  display: none;
}

/* Paneel — gedeelde basis voor start- en win-overlay. Achtergrond, rand en
   schaduw komen van .panel--start / .panel--win. */
.panel {
  position: relative;
  border-radius: 22px;
  padding: 22px 26px 22px;
  text-align: center;
  max-width: 400px;
  width: 100%;
  animation: panelIn .35s ease-out;
}
@keyframes panelIn {
  from { transform: translateY(16px) scale(.96); opacity: 0; }
  to   { transform: translateY(0)    scale(1);   opacity: 1; }
}
.panel__title {
  margin: 0 0 4px;
  font-size: 32px; font-weight: 900;
  letter-spacing: -0.8px;
  line-height: 1.05;
}
.panel__intro {
  margin: 0 0 12px;
  font-size: 13px; font-weight: 600;
}

.panel__actions {
  display: flex; gap: 10px; justify-content: center; flex-wrap: wrap;
  margin-top: 4px;
}

/* Start- en win-paneel — lichte cream achtergrond met groene rand en
   warme zonneglow, past bij het tuinthema. */
.panel--start,
.panel--win {
  background:
    radial-gradient(ellipse 70% 50% at 50% 0%, rgba(255,245,180,0.55) 0%, transparent 65%),
    linear-gradient(180deg, #FFFDF2 0%, #F4FFE3 60%, #E6F8C8 100%);
  border: 2px solid #5BC83E;
  box-shadow:
    0 24px 60px rgba(20,80,30,0.45),
    0 0 0 4px rgba(91,200,62,0.18),
    inset 0 1px 0 rgba(255,255,255,0.85);
}
.panel__title--win {
  color: #2E9F2C;
  margin: 0 0 6px;
  text-shadow:
    0 2px 0 rgba(255,255,255,0.65),
    0 6px 14px rgba(20,80,30,0.18);
}
.panel--start .panel__intro,
.panel__intro--win {
  color: #2E7D2E;
  font-size: 14px;
  font-weight: 700;
  margin: 0 0 14px;
  text-shadow: 0 1px 0 rgba(255,255,255,0.6);
}
.panel--start .panel__intro { margin-bottom: 18px; }

/* Logo bovenop start-paneel — vervangt de tekst-titel */
.panel__logo {
  display: block;
  margin: -6px auto 14px;
  width: 100%;
  max-width: 340px;
  height: auto;
  user-select: none;
  -webkit-user-drag: none;
  filter: drop-shadow(0 6px 14px rgba(20,75,30,0.35));
}

/* Knop-basis — gedeelde structuur. Achtergrond/kleur/rand komen van de
   modifiers (.btn--start, .btn--restart, .btn--home, .btn--submit). */
.btn {
  border-radius: 16px;
  padding: 11px 22px;
  font-size: 14px; font-weight: 900;
  letter-spacing: 0.4px;
  font-family: inherit;
  text-transform: uppercase;
  cursor: pointer;
  transition: transform .12s ease, filter .12s ease;
}

/* Start-knop — groene "garden"-variant met sap-glans, past bij het logo */
.btn--start {
  background: linear-gradient(180deg, #8FE45A 0%, #5BC83E 50%, #2E9F2C 100%);
  color: #FFFFFF;
  border: 2px solid rgba(255,255,255,0.55);
  padding: 14px 38px;
  font-size: 16px;
  letter-spacing: 1px;
  text-shadow: 0 2px 2px rgba(20,80,30,0.45);
  box-shadow:
    0 10px 22px rgba(20,120,30,0.40),
    0 0 0 3px rgba(91,200,62,0.22),
    inset 0 2px 0 rgba(255,255,255,0.45),
    inset 0 -3px 0 rgba(20,100,30,0.30);
}
.btn--start:hover  { transform: translateY(-2px); filter: brightness(1.06); }
.btn--start:active { transform: translateY(1px);  filter: brightness(0.96); }
.win-time-block {
  margin: 6px 0 18px;
  padding: 14px 22px 16px;
  border-radius: 16px;
  border: 2px solid #5BC83E;
  background:
    linear-gradient(180deg, #FFFDF2 0%, #EFFAD6 100%);
  text-align: center;
  box-shadow:
    0 4px 12px rgba(20,80,30,0.18),
    inset 0 1px 0 rgba(255,255,255,0.85);
}
.win-time-label {
  font-size: 11px;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  font-weight: 800;
  color: #2E7D2E;
}
.win-time-value {
  font-size: 24px;
  font-weight: 900;
  color: #C97A0F;
  letter-spacing: -0.2px;
  margin-top: 6px;
  text-shadow: 0 1px 0 rgba(255,255,255,0.65);
}

.panel__actions--win {
  flex-direction: column;
  gap: 10px;
  align-items: stretch;
  width: 100%;
  flex-wrap: nowrap;
  margin-top: 8px;
}
.win-buttons-row {
  display: flex;
  gap: 12px;
  justify-content: center;
  align-items: stretch;
}
.win-buttons-row .btn {
  flex: 1 1 0;
  min-width: 0;
  padding: 12px 16px;
}
.panel__actions--win .btn--submit {
  width: 100%;
  padding: 12px 16px;
}

/* Win-knoppen: icon + label naast elkaar */
.btn__icon  { font-size: 18px; line-height: 1; display: inline-block; }
.btn__label { font-weight: 900; letter-spacing: 0.4px; }
.btn--restart, .btn--home, .btn--submit {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  text-transform: none;
  font-size: 15px;
}

/* Speel-opnieuw — warm oranje (primaire actie, kontrast met groene tuin) */
.btn--restart {
  background: linear-gradient(180deg, #FFB45A 0%, #FF8B35 55%, #E66510 100%);
  color: #FFFFFF;
  border: 2px solid rgba(255,255,255,0.55);
  text-shadow: 0 2px 2px rgba(120,50,5,0.42);
  box-shadow:
    0 10px 22px rgba(190,80,15,0.35),
    inset 0 2px 0 rgba(255,255,255,0.40),
    inset 0 -3px 0 rgba(160,55,5,0.30);
}
.btn--restart:hover  { transform: translateY(-1px); filter: brightness(1.05); }
.btn--restart:active { transform: translateY(1px);  filter: brightness(0.96); }

/* Naar-start — wit met groene tekst (secundair) */
.btn--home {
  background: linear-gradient(180deg, #FFFFFF 0%, #F4FBE8 100%);
  color: #2E7D2E;
  border: 2px solid #BCE39E;
  text-shadow: 0 1px 0 rgba(255,255,255,0.8);
  box-shadow:
    0 8px 18px rgba(20,80,30,0.20),
    inset 0 2px 0 rgba(255,255,255,0.85),
    inset 0 -2px 0 rgba(180,210,140,0.45);
}
.btn--home:hover  { transform: translateY(-1px); filter: brightness(1.02); }
.btn--home:active { transform: translateY(1px);  filter: brightness(0.97); }

/* Score-insturen — tuin-groen accent */
.btn--submit {
  background: linear-gradient(180deg, #8FE45A 0%, #5BC83E 50%, #2E9F2C 100%);
  color: #FFFFFF;
  border: 2px solid rgba(255,255,255,0.55);
  text-shadow: 0 2px 2px rgba(20,80,30,0.45);
  box-shadow:
    0 10px 22px rgba(20,120,30,0.35),
    inset 0 2px 0 rgba(255,255,255,0.45),
    inset 0 -3px 0 rgba(20,100,30,0.30);
}
.btn--submit:hover  { transform: translateY(-1px); filter: brightness(1.05); }
.btn--submit:active { transform: translateY(1px);  filter: brightness(0.96); }