/* ===== bimmelim ===== lys have: hvid, pink, orange, gul ================== */
:root{
  --bg:#ffffff; --bg2:#fff8f4; --line:#f0e4e0;
  --pink:#ff6f91; --orange:#ffa23e; --yellow:#ffd23e;
  --green:#6fbf8b; --leaf:#4f9e6a;
  --ink:#33303a; --soft:#8a838f;
  --font:"Nunito","Quicksand","Segoe UI",system-ui,-apple-system,sans-serif;
}
*,*::before,*::after{box-sizing:border-box}
/* Browserens [hidden] taber til enhver klasse der sætter display -- fastgør den. */
[hidden]{display:none !important}
html,body{margin:0}
body{
  min-height:100svh;background:var(--bg);color:var(--ink);
  font-family:var(--font);font-weight:600;
  -webkit-tap-highlight-color:transparent;
  overflow-x:hidden;
}
button{font-family:inherit;font-weight:700;cursor:pointer}

/* ---------- top ---------- */
.top{text-align:center;padding:clamp(18px,5vw,34px) 16px 4px}
.mascot{width:clamp(74px,20vw,104px);margin:0 auto}
.mascot .cat{width:100%;height:auto;display:block}
.top h1{
  margin:.18em 0 0;font-size:clamp(32px,9vw,54px);font-weight:800;
  letter-spacing:-.02em;color:var(--pink);
}
.tagline{margin:.2em 0 0;font-size:clamp(13px,3.6vw,16px);color:var(--soft);font-weight:600}

/* ---------- kort ---------- */
main{
  max-width:520px;margin:0 auto;
  padding:12px 14px calc(120px + env(safe-area-inset-bottom));
  display:flex;flex-direction:column;gap:14px;
}
.card{
  background:var(--bg2);border:2px solid var(--line);border-radius:20px;
  padding:clamp(14px,4vw,20px);
}
.card h3{
  margin:0 0 10px;font-size:13px;letter-spacing:.08em;text-transform:uppercase;
  color:var(--soft);font-weight:800;
}
.hint{margin:0 0 10px;font-size:14px;color:var(--soft);font-weight:600}

.btn{
  border:none;border-radius:999px;background:var(--pink);color:#fff;
  font-size:15px;padding:12px 24px;box-shadow:0 3px 0 #e0577a;
}
.btn:hover{background:#ff5e84}
.btn:active{transform:translateY(2px);box-shadow:0 1px 0 #e0577a}
.btn-big{font-size:19px;padding:15px 42px;margin-top:4px}

/* ---------- spillets hud ---------- */
.game-card{padding-bottom:clamp(14px,4vw,20px)}
.hud{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-bottom:12px}
.hud-item{
  background:#fff;border:2px solid var(--line);border-radius:14px;
  padding:8px 6px;text-align:center;
}
.hud-item span{display:block;font-size:10px;letter-spacing:.1em;text-transform:uppercase;color:var(--soft)}
.hud-item b{display:block;font-size:22px;font-weight:800;color:var(--ink);line-height:1.2}
#score.bump{animation:bump .3s}
@keyframes bump{0%{transform:scale(1)}45%{transform:scale(1.35);color:var(--orange)}100%{transform:scale(1)}}
#clock.low{color:var(--pink)}

/* ---------- krukkerne ---------- */
.board-wrap{position:relative}
.pots{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(6px,2vw,12px)}
.pot-cell{
  position:relative;aspect-ratio:1/1.12;border:none;background:none;padding:0;
  display:flex;align-items:flex-end;justify-content:center;touch-action:manipulation;
}
.pot-cell .pot{position:absolute;left:0;bottom:0;width:100%;height:auto;z-index:2}
.pot-hole{fill:#7a5c4e}
.pot-body{fill:var(--orange)}
.pot-rim{fill:#ff8f2e}

/* dyret kommer op bag krukkens kant */
.critter-slot{
  position:absolute;left:8%;width:84%;bottom:34%;z-index:1;
  transform:translateY(78%);opacity:0;pointer-events:none;
  transition:transform .17s ease-out,opacity .1s;
}
.pot-cell.up .critter-slot{transform:translateY(-6%);opacity:1}
.pot-cell.hit .critter-slot{transform:translateY(-6%) scale(.82);opacity:.55}
.critter{display:block;width:100%;height:auto}

/* ugle: varm karamel, tydelig mod den orange krukke */
.o-body{fill:#b07a4e}
.o-tuft{fill:#9a6741}
.o-wing{fill:#9a6741}
.o-belly{fill:#f6dcbe}
.o-disc{fill:#f6dcbe}
.o-white{fill:#fff}
.o-eye{fill:#33303a}
.o-spark{fill:#fff}
.o-beak{fill:var(--orange)}
.o-foot{fill:none;stroke:var(--orange);stroke-width:3.4;stroke-linecap:round}

/* ugle med solbriller: mørkere fjer og et gyldent skær */
.c-body{fill:#8d5f3c}
.c-tuft{fill:#7a5133}
.c-wing{fill:#7a5133}
.c-belly{fill:#f0d0ac}
.c-lens{fill:#33303a}
.c-bridge{fill:#33303a}
.c-beak{fill:var(--orange)}
.c-foot{fill:none;stroke:var(--orange);stroke-width:3.4;stroke-linecap:round}
.cool{filter:drop-shadow(0 0 7px rgba(255,210,62,.95))}

/* flagermus: næsten uglens farver med vilje -- man skal aflæse formen,
   ikke farven. Kendetegnene er de spidse ører, de smalle øjne, hjørne-
   tænderne og at der ikke er lyse ansigtsskiver eller orange næb. */
.t-body{fill:#a5714a}
.t-ear{fill:#8f5f3e}
.t-wing{fill:#8f5f3e}
.t-belly{fill:#d8b591}
.t-lid{fill:#8f5f3e}
.t-white{fill:#fff}
.t-eye{fill:#33303a}
.t-nose{fill:#6d4630}
.t-fang{fill:#fff}
.t-foot{fill:none;stroke:#6d4630;stroke-width:3.4;stroke-linecap:round}

/* point der popper op når man rammer */
.pop{
  position:absolute;left:50%;top:14%;transform:translateX(-50%);
  font-size:20px;font-weight:800;pointer-events:none;z-index:5;
  animation:pop-up .7s ease-out forwards;
}
.pop.plus{color:var(--leaf)}
.pop.big{color:var(--orange)}
.pop.minus{color:var(--pink)}
@keyframes pop-up{
  0%{opacity:0;transform:translate(-50%,6px) scale(.7)}
  25%{opacity:1;transform:translate(-50%,-6px) scale(1.15)}
  100%{opacity:0;transform:translate(-50%,-34px) scale(1)}
}

/* ---------- overlay (klar / færdig) ---------- */
.overlay{
  position:absolute;inset:-6px;z-index:10;border-radius:18px;
  background:rgba(255,248,244,.94);backdrop-filter:blur(3px);
  display:flex;align-items:center;justify-content:center;text-align:center;padding:14px;
}
.overlay-inner{max-width:300px}
.overlay h2{margin:0 0 6px;font-size:clamp(22px,6vw,30px);color:var(--pink);font-weight:800}
.overlay p{margin:0 0 12px;font-size:14px;color:var(--soft);line-height:1.5}
.rules{list-style:none;margin:0 0 14px;padding:0;display:flex;flex-direction:column;gap:7px}
.rules li{display:flex;align-items:center;gap:9px;font-size:14px;color:var(--ink);text-align:left}
.rules b{margin-left:auto;font-weight:800}
.chip{width:34px;height:34px;flex:none;display:block}
.chip svg{width:100%;height:auto;display:block}
.final-score{font-size:46px;font-weight:800;color:var(--orange);line-height:1;margin:2px 0 8px}
.unlocked-note{color:var(--leaf);font-weight:700}

/* ---------- beskeder ---------- */
.messages{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:9px}
.messages li{
  display:flex;gap:11px;align-items:flex-start;
  background:#fff;border:2px solid var(--line);border-radius:14px;padding:11px 13px;
}
.messages li.open{border-color:var(--green);background:#f4fdf7}
.msg-num{
  flex:none;width:26px;height:26px;border-radius:50%;background:var(--line);color:var(--soft);
  display:flex;align-items:center;justify-content:center;font-size:13px;font-weight:800;
}
.messages li.open .msg-num{background:var(--green);color:#fff}
.msg-text{font-size:15px;line-height:1.45}
.messages li:not(.open) .msg-text{color:var(--soft);font-weight:600}

/* ---------- scoreboard ---------- */
.row-form{display:flex;gap:8px}
.row-form input{flex:1;min-width:0}
.board{list-style:none;margin:12px 0 0;padding:0;display:flex;flex-direction:column;gap:6px}
.board li{
  display:grid;grid-template-columns:2em 1fr auto;gap:10px;align-items:center;
  background:#fff;border:2px solid var(--line);border-radius:12px;padding:9px 12px;font-size:15px;
}
.board li.me{border-color:var(--pink);background:#fff4f6}
.board .pos{color:var(--soft);font-weight:800}
.board .pts{color:var(--orange);font-weight:800}
.board li.board-empty{display:block;color:var(--soft);font-weight:600;font-size:14px}

/* ---------- formularer ---------- */
form{display:flex;flex-direction:column;gap:9px}
input{
  font-family:inherit;font-weight:600;font-size:15px;color:var(--ink);
  padding:12px 14px;border-radius:12px;width:100%;
  background:#fff;border:2px solid var(--line);
}
input::placeholder{color:#bdb5c2}
input:focus{outline:none;border-color:var(--pink)}
.seg{display:flex;gap:7px}
.seg label{flex:1}
.seg input{position:absolute;opacity:0;width:0;height:0}
.seg span{
  display:block;text-align:center;padding:11px 6px;border-radius:12px;cursor:pointer;
  font-size:14px;font-weight:700;color:var(--soft);background:#fff;border:2px solid var(--line);
}
.seg input:checked+span{color:#fff;background:var(--pink);border-color:var(--pink)}
.seg input:focus-visible+span{outline:2px solid var(--orange);outline-offset:2px}
.form-msg{margin:10px 0 0;font-size:14px;color:var(--leaf);font-weight:700;min-height:1.2em}
.form-msg.bad{color:var(--pink)}

/* ---------- blomsterbund ---------- */
.meadow{
  position:fixed;left:0;right:0;bottom:0;height:88px;z-index:-1;pointer-events:none;
  display:flex;align-items:flex-end;justify-content:space-around;
  border-bottom:14px solid #eaf6ee;
}
.meadow .flower{width:38px;height:auto;margin-bottom:2px}
.meadow .flower:nth-child(even){width:28px;margin-bottom:10px}
.flower .petals{fill:var(--pink)}
.flower .middle{fill:var(--yellow)}
.flower.o .petals{fill:var(--orange)}
.flower.y .petals{fill:var(--yellow)}
.flower.y .middle{fill:var(--orange)}

/* ---------- kattens ansigt ---------- */
.k-fur{fill:#ffc9d6}
.k-ear{fill:var(--pink)}
.k-lens,.k-bridge{fill:#33303a}
.k-nose{fill:var(--pink)}
.k-mouth{fill:none;stroke:#8a6070;stroke-width:3.4;stroke-linecap:round}
.k-blush{fill:var(--pink);opacity:.45}

@media (min-width:560px){
  .meadow{height:110px}
  .meadow .flower{width:46px}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms !important;animation-iteration-count:1 !important;
    transition-duration:.08s !important}
}