/* app.css — shared look & feel. Pico Park aesthetic (kravspec §2, opdateret efter
   ønske): lyst/hvidt, grønt græs, simpelt, fladt 2D, tykke sorte outlines, glade
   farver. Mario/Pico Park "thumbnail"-stemning. Bruges af spiller + storskærm. */
:root{
  --paper:#fbfdff; --sky:#dff1ff; --ink:#1a1a1a; --line:#1a1a1a;
  --grass:#7ec850; --grass2:#6bb83f;
  --gold:#ffc63c; --red:#ff6a52; --blue:#4ab3ff; --green:#5ad06a; --pink:#ff77c4; --purple:#b07bff;
  --shadow:0 6px 0 var(--line);
  --font:'Trebuchet MS',system-ui,-apple-system,sans-serif;
}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{margin:0;height:100%}
body{font-family:var(--font);color:var(--ink);
  background:linear-gradient(180deg,var(--sky) 0%,var(--paper) 42%) no-repeat;
  background-attachment:fixed;overscroll-behavior:none;-webkit-user-select:none;user-select:none}
/* grass ground strip with the classic Pico black baseline */
body::after{content:'';position:fixed;left:0;right:0;bottom:0;height:120px;z-index:-1;
  background:var(--grass);border-top:6px solid var(--line);
  box-shadow:inset 0 14px 0 #ffffff22}

/* ---- Pico figures ---- */
.pico{width:100%;height:100%;display:block;overflow:visible}
.bouquet{display:flex;justify-content:center;align-items:flex-end;gap:-6px}
.bq-fig{width:84px;height:104px;margin:0 -6px;filter:drop-shadow(0 5px 0 rgba(0,0,0,.18))}

/* ---- landing ---- */
.landing-title{font-size:clamp(2.2rem,9vw,3.4rem);font-weight:900;color:var(--ink);line-height:.98;
  letter-spacing:-1px;text-align:center}
.landing-title b{color:var(--red)}
.landing-sub{font-size:1.1rem;font-weight:700;opacity:.7;text-align:center}

/* ---- buttons ---- */
.big-btn{display:flex;align-items:center;justify-content:center;gap:10px;width:100%;
  border:4px solid var(--line);border-radius:18px;padding:20px;font-size:1.4rem;font-weight:900;
  color:#fff;background:var(--blue);box-shadow:var(--shadow);cursor:pointer;
  text-shadow:2px 2px 0 rgba(0,0,0,.22);transition:transform .07s,box-shadow .07s}
.big-btn:active{transform:translateY(5px);box-shadow:0 1px 0 var(--line)}
.big-btn.green{background:var(--green)} .big-btn.red{background:var(--red)}
.big-btn.gold{background:var(--gold);color:#5a3e00;text-shadow:none}

/* ---- generic layout ---- */
.screen{position:fixed;inset:0;display:flex;flex-direction:column;align-items:center;
  justify-content:center;padding:22px;text-align:center;gap:16px}
.hidden{display:none!important}
.title{font-size:2rem;font-weight:900;color:var(--ink);line-height:1.05;letter-spacing:-.5px}
.subtitle{font-size:1.05rem;font-weight:700;opacity:.75}
.pill{display:inline-block;padding:7px 16px;border:3px solid var(--line);border-radius:999px;
  font-weight:900;color:#fff;box-shadow:0 3px 0 var(--line)}

/* ---- bouncy animations (juice) ---- */
@keyframes pop{0%{transform:scale(.6)}60%{transform:scale(1.15)}100%{transform:scale(1)}}
@keyframes bob{0%,100%{transform:translateY(0)}50%{transform:translateY(-9px)}}
@keyframes wob{0%,100%{transform:rotate(-2deg)}50%{transform:rotate(2deg)}}
.pop{animation:pop .25s ease-out}
.bob{animation:bob 1.1s ease-in-out infinite}
.wob{animation:wob 1.4s ease-in-out infinite}
@keyframes shake{10%,90%{transform:translate(-1px,0)}20%,80%{transform:translate(2px,0)}
  30%,50%,70%{transform:translate(-4px,0)}40%,60%{transform:translate(4px,0)}}
.shake{animation:shake .5s}

/* floating score pops */
.floater{position:fixed;font-weight:900;font-size:1.8rem;pointer-events:none;z-index:60;
  text-shadow:2px 2px 0 #fff,3px 3px 0 var(--line);animation:floatUp 1s ease-out forwards}
@keyframes floatUp{0%{opacity:1;transform:translateY(0) scale(.8)}
  100%{opacity:0;transform:translateY(-90px) scale(1.3)}}
.confetti{position:fixed;width:12px;height:12px;z-index:55;pointer-events:none;border:2px solid var(--line)}
@keyframes fall{to{transform:translateY(110vh) rotate(720deg);opacity:.2}}

/* ---- team-select cards (each shows its Pico figure) ---- */
.team-grid{display:flex;flex-direction:column;gap:14px;width:100%;max-width:420px}
.team-card{display:flex;align-items:center;gap:14px;border:4px solid var(--line);border-radius:18px;
  padding:12px 18px;font-size:1.5rem;font-weight:900;color:#fff;box-shadow:var(--shadow);cursor:pointer;
  text-shadow:2px 2px 0 rgba(0,0,0,.25)}
.team-card:active{transform:translateY(5px);box-shadow:0 1px 0 var(--line)}
.team-card .fig{width:56px;height:64px;flex:0 0 auto;background:#fff;border:3px solid var(--line);
  border-radius:14px;padding:4px 6px;display:flex;box-shadow:0 3px 0 var(--line)}

/* ---- permission banner ---- */
.perm-banner{display:flex;align-items:center;gap:10px;justify-content:center;flex-wrap:wrap;
  padding:12px 16px;border:3px solid var(--line);border-radius:14px;font-weight:900;color:#fff;
  box-shadow:0 3px 0 var(--line)}
.perm-banner.ok{background:var(--green)}
.perm-banner.bad{background:var(--red)}
.perm-banner.wait{background:var(--gold);color:#5a3e00}
.link-btn{background:none;border:none;color:var(--blue);font-weight:900;text-decoration:underline;
  cursor:pointer;font-size:1rem}

/* ---- modal (guide) ---- */
.modal{position:fixed;inset:0;background:rgba(20,20,20,.45);display:flex;align-items:center;
  justify-content:center;padding:18px;z-index:100}
.modal-card{background:#fff;border:4px solid var(--line);border-radius:18px;padding:22px;
  max-width:440px;width:100%;box-shadow:var(--shadow);text-align:left;max-height:88vh;overflow:auto}
.modal-card h2{margin-top:0}
.modal-card ol{padding-left:1.2em;line-height:1.5}

/* ---- tap target ---- */
.tap-zone{position:relative;flex:1;width:100%;display:flex;align-items:center;justify-content:center}
.tap-big{width:min(72vw,320px);height:min(72vw,320px);border-radius:50%;border:6px solid var(--line);
  background:radial-gradient(circle at 40% 35%,#ffe08a,var(--gold));box-shadow:0 8px 0 var(--line);
  display:flex;align-items:center;justify-content:center;font-size:2.4rem;font-weight:900;color:#5a3e00}
.tap-big:active{transform:translateY(6px) scale(.97);box-shadow:0 2px 0 var(--line)}
.counter{font-size:3rem;font-weight:900;color:var(--ink)}

/* ---- HUD ---- */
.hud{position:fixed;top:0;left:0;right:0;display:flex;justify-content:space-between;align-items:center;
  padding:10px 14px;font-weight:900;z-index:40}
.hud .me{display:flex;align-items:center;gap:8px;background:#fff;border:3px solid var(--line);
  border-radius:999px;padding:5px 12px 5px 6px;box-shadow:0 3px 0 var(--line)}
.hud .me .fig{width:26px;height:32px;flex:0 0 auto}
.dot{width:16px;height:16px;border:2px solid var(--line);border-radius:50%}

/* ---- sensor meter ---- */
.meter{width:min(80vw,340px);height:36px;border:4px solid var(--line);border-radius:999px;background:#fff;
  overflow:hidden;box-shadow:0 4px 0 var(--line)}
.meter > i{display:block;height:100%;width:0;background:var(--green);transition:width .1s}

/* ---- scroll game ---- */
.scroll-box{flex:1;width:min(92vw,460px);overflow-y:scroll;border:5px solid var(--line);border-radius:16px;
  -webkit-overflow-scrolling:touch;box-shadow:var(--shadow);background:#fff}
.scroll-row{height:64px;display:flex;align-items:center;justify-content:center;font-size:1.5rem;
  font-weight:900;color:var(--ink);border-bottom:3px solid var(--line)}

/* ---- quiz game ---- */
.qtimer{width:min(92vw,460px);height:18px;border:3px solid var(--line);border-radius:999px;overflow:hidden;background:#fff}
.qtimer > i{display:block;height:100%;width:100%;background:var(--gold);transition:width .1s linear}
.quiz-opts{display:grid;grid-template-columns:1fr 1fr;gap:12px;width:min(92vw,460px)}
.quiz-opt{display:flex;align-items:center;gap:8px;justify-content:center;border:4px solid var(--line);
  border-radius:14px;padding:18px 10px;font-size:1.1rem;font-weight:900;color:#fff;box-shadow:var(--shadow);
  cursor:pointer;text-shadow:2px 2px 0 rgba(0,0,0,.25);min-height:74px}
.quiz-opt:active{transform:translateY(4px);box-shadow:0 2px 0 var(--line)}
.quiz-opt.dim{opacity:.4}
.quiz-opt.picked{opacity:1;outline:5px solid var(--ink)}
.qshape{font-size:1.3rem}
.qstatus{font-weight:900;min-height:1.4em;font-size:1.1rem}
/* free-text answer (tillæg 1) — big, mobile-friendly input */
.ft-form{display:flex;flex-direction:column;gap:14px;width:min(92vw,460px)}
.ft-input{width:100%;padding:18px;font-size:1.5rem;font-weight:800;text-align:center;
  border:4px solid var(--line);border-radius:16px;background:#fff;color:var(--ink);box-shadow:var(--shadow)}
.ft-input:focus{outline:none;border-color:var(--blue)}
.ft-send{width:100%}

/* ---- scream / shake / dance / steps / whip mascot (team Pico figure) ---- */
.mascot{width:min(34vw,150px);height:min(42vw,184px);transition:transform .08s;
  display:flex;align-items:center;justify-content:center;transform-origin:center bottom}
.mascot svg{width:100%;height:100%}
.dance-stage{display:flex;align-items:center;justify-content:center;height:34vh}

/* ---- flappy ---- */
.hud-mini{font-weight:900;font-size:1.2rem;color:var(--ink)}
.fl-canvas{flex:1;width:min(96vw,520px);border:5px solid var(--line);border-radius:16px;
  background:#bfe9ff;box-shadow:var(--shadow);touch-action:none}

/* ---- reaction test (tillæg 2) ---- */
.rx-zone{flex:1;width:min(96vw,520px);border:6px solid var(--line);border-radius:18px;display:flex;
  align-items:center;justify-content:center;text-align:center;font-size:2.1rem;font-weight:900;
  box-shadow:var(--shadow);cursor:pointer;padding:20px;line-height:1.2;background:#c44;color:#fff;
  touch-action:manipulation}
.rx-zone small{font-size:1.1rem;font-weight:700;opacity:.9}