/* =====================================================================
   Alice sin side — felles stil for alle sidene
   ===================================================================== */
:root{
  --gronn:#0E8F45;
  --gronn-lys:#3FD37A;
  --gronn-mork:#04351C;
  --gull:#FFD166;
  --gull-mork:#b98d20;
  --rod:#FF4D5E;
  --rosa:#FF7BAC;
  --sno:#F4FFF8;
  --skygge:0 14px 34px rgba(0,0,0,.4);
}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html{
  scroll-behavior:smooth;
  -webkit-text-size-adjust:100%;   /* iPad: ikke skaler tekst i landskap */
  overscroll-behavior:none;        /* ingen "dra ned for å laste inn på nytt" */
}
body{
  margin:0;min-height:100svh;
  touch-action:manipulation;       /* iPad: ingen forsinkelse, ingen dobbelttrykk-zoom */
  -webkit-user-select:none;user-select:none;
  -webkit-touch-callout:none;      /* iPad: ingen meny ved langt trykk */
  overscroll-behavior:none;
  font-family:"Comic Sans MS","Chalkboard SE","Comic Neue","Trebuchet MS",system-ui,sans-serif;
  color:var(--sno);
  background:
    radial-gradient(1200px 700px at 20% -10%, #0d6a37 0%, transparent 60%),
    linear-gradient(180deg,#052A17 0%, #073D22 25%, #04351C 60%, #062E1A 100%);
  background-attachment:fixed;
  overflow-x:hidden;
}
.aurora{
  position:fixed;inset:-20% -20% auto -20%;height:70vh;z-index:0;pointer-events:none;
  background:
    radial-gradient(50% 60% at 20% 40%, rgba(63,211,122,.30), transparent 70%),
    radial-gradient(45% 55% at 60% 30%, rgba(120,255,190,.22), transparent 70%),
    radial-gradient(40% 50% at 85% 55%, rgba(255,209,102,.16), transparent 70%);
  filter:blur(30px);animation:auroraMove 18s ease-in-out infinite alternate;
}
@keyframes auroraMove{
  0%{transform:translate3d(-4%,0,0) scale(1)}
  50%{transform:translate3d(3%,2%,0) scale(1.08)}
  100%{transform:translate3d(5%,-2%,0) scale(1.03)}
}
#fx{position:fixed;inset:0;width:100%;height:100%;z-index:60;pointer-events:none}
.wrap{
  position:relative;z-index:2;max-width:1000px;margin:0 auto;
  padding:0 calc(14px + env(safe-area-inset-right)) calc(60px + env(safe-area-inset-bottom)) calc(14px + env(safe-area-inset-left));
}

/* ---------- toppstripe med hjem-knapp ---------- */
.topbar{
  position:sticky;top:0;z-index:30;display:flex;align-items:center;gap:10px;
  padding:10px 0;margin-bottom:6px;
  background:linear-gradient(180deg,rgba(4,53,28,.95) 60%,rgba(4,53,28,0));
}
.home-btn{
  display:inline-flex;align-items:center;gap:7px;text-decoration:none;flex:none;
  font-family:inherit;font-size:clamp(16px,3.2vw,21px);font-weight:bold;cursor:pointer;border:none;
  padding:11px 18px;border-radius:999px;color:#08331d;
  background:linear-gradient(180deg,#ffffff,#c8f5db);
  box-shadow:0 6px 0 #6f9c84,0 10px 20px rgba(0,0,0,.3);transition:transform .12s;
}
.home-btn:active{transform:translateY(4px);box-shadow:0 2px 0 #6f9c84}
.page-title{
  flex:1;text-align:center;margin:0;line-height:1.1;
  font-size:clamp(20px,4.6vw,34px);color:#fff;
  text-shadow:0 3px 0 rgba(4,53,28,.7),0 0 22px rgba(63,211,122,.5);
}
.chip{
  flex:none;background:var(--gull);color:#3a2600;font-weight:bold;white-space:nowrap;
  padding:9px 16px;border-radius:999px;font-size:clamp(15px,3vw,20px);box-shadow:0 5px 0 var(--gull-mork);
}
.chip.pop{animation:chipPop .35s ease}
@keyframes chipPop{50%{transform:scale(1.22) rotate(-4deg)}}

/* ---------- panel / kort ---------- */
.panel{
  position:relative;border-radius:30px;padding:18px 16px 22px;
  background:linear-gradient(180deg, rgba(255,255,255,.10), rgba(255,255,255,.04));
  border:3px solid rgba(63,211,122,.45);
  box-shadow:var(--skygge), inset 0 1px 0 rgba(255,255,255,.25);
}
.hint{font-size:clamp(13px,2.5vw,17px);color:var(--gull);text-align:center;margin:10px 0 0;font-weight:bold}
.sub{margin:0 0 14px;color:#cdf6de;text-align:center;font-size:clamp(14px,2.7vw,19px)}

/* ---------- knapper ---------- */
.btn{
  font-family:inherit;font-weight:bold;cursor:pointer;border:none;color:#08331d;
  font-size:clamp(17px,3.4vw,24px);padding:15px 28px;border-radius:999px;
  background:linear-gradient(180deg,#ffffff,#d9f7e6);
  box-shadow:0 8px 0 #7fae95,0 14px 26px rgba(0,0,0,.32);transition:transform .12s;
}
.btn:active{transform:translateY(5px);box-shadow:0 3px 0 #7fae95}
.btn.gold{background:linear-gradient(180deg,#FFE29A,var(--gull));box-shadow:0 8px 0 var(--gull-mork),0 14px 26px rgba(0,0,0,.32)}
.btn.green{background:linear-gradient(180deg,#8CFFC0,var(--gronn-lys));box-shadow:0 8px 0 #0A6C34,0 14px 26px rgba(0,0,0,.32)}
.btn.pink{background:linear-gradient(180deg,#FF9EC2,#E0294F);color:#fff;box-shadow:0 8px 0 #9c1330,0 14px 26px rgba(0,0,0,.32)}
.btn.big{font-size:clamp(20px,4.4vw,30px);padding:18px 34px}
.btn[disabled]{opacity:.5;cursor:default}

/* ---------- spillflate ---------- */
.stage{
  position:relative;border-radius:24px;overflow:hidden;
  border:3px solid rgba(255,255,255,.3);box-shadow:var(--skygge);background:#0b3f6b;
}
.stage canvas{display:block;width:100%;touch-action:pan-y}
.stage canvas.playing{touch-action:none}

/* ---------- overlegg (start / ferdig) ---------- */
.overlay{
  position:absolute;inset:0;z-index:20;display:flex;align-items:center;justify-content:center;
  text-align:center;padding:16px;background:rgba(4,40,22,.86);
  -webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px);
  transition:opacity .3s;
}
.overlay.hidden{opacity:0;pointer-events:none}
.overlay h2{margin:0 0 6px;font-size:clamp(22px,5vw,36px);color:#fff;text-shadow:0 3px 0 rgba(0,0,0,.35)}
.overlay p{margin:8px 0 14px;font-size:clamp(14px,2.8vw,19px);color:#dcffe9;line-height:1.5}
.overlay .emo{font-size:clamp(46px,10vw,76px);line-height:1;animation:bob 2s ease-in-out infinite}

/* ---------- felles animasjoner ---------- */
@keyframes bob{0%,100%{transform:translateY(0)}50%{transform:translateY(-12px)}}
@keyframes pulse{0%,100%{transform:scale(1)}50%{transform:scale(1.06)}}
@keyframes popIn{from{opacity:0;transform:translateY(18px) scale(.9)}to{opacity:1;transform:none}}
@keyframes shakeX{0%,100%{transform:none}25%{transform:translateX(-9px)}75%{transform:translateX(9px)}}
@keyframes rightPop{0%{transform:scale(1)}45%{transform:scale(1.1)}100%{transform:none}}
@keyframes stampIn{0%{transform:scale(2.4) rotate(-16deg);opacity:0}70%{transform:scale(.93) rotate(4deg);opacity:1}100%{transform:none}}
.hidden-el{display:none !important}

@media (prefers-reduced-motion:reduce){
  *{animation-duration:.001s !important;animation-iteration-count:1 !important}
}

/* =====================================================================
   iPad / nettbrett — hovedmålet. Større trykkflater og god plass.
   ===================================================================== */
@media (min-width:700px) and (pointer:coarse){
  .btn{font-size:24px;padding:19px 34px}
  .btn.big{font-size:32px;padding:24px 44px}
  .home-btn{font-size:23px;padding:15px 24px}
  .chip{font-size:23px;padding:13px 22px}
  .page-title{font-size:36px}
  .panel{padding:24px 22px 28px;border-radius:34px}
  .sub{font-size:21px}
  .hint{font-size:18px}
}
/* iPad i landskap: hold spillflaten innenfor skjermen uten å måtte scrolle */
@media (orientation:landscape) and (max-height:820px){
  .stage{max-height:78svh}
  .topbar{padding:7px 0}
}