/* EkoVille — overlays and bottom-sheet panels (encounter, dex, level quiz).
   Split of the old styles.css; index.html loads these in order (cascade order matters). */

/* ============================== Overlays & panels ============================== */
.ov{position:absolute;inset:0;z-index:600;background:radial-gradient(70% 60% at 50% 42%,rgba(70,40,110,.42),rgba(30,20,50,.62));backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);display:none;align-items:flex-end;justify-content:center}
.ov.show{display:flex;animation:fade .22s var(--ease-out) both}
@keyframes fade{from{opacity:0}to{opacity:1}}
/* Rich green sheet with a slow sunburst behind the content. The sunburst is a
   BACKGROUND layer, not a child: an oversized absolute child would overflow and
   create a phantom scroll area on an overflow-y:auto panel. Inner cards stay
   light so text and icons still read. */
.panel{position:relative;width:100%;color:#fff;
  background:
    repeating-conic-gradient(from 0deg at 50% 18%,rgba(255,255,255,.13) 0deg 7deg,transparent 7deg 20deg),
    radial-gradient(120% 60% at 50% 0%,rgba(255,255,255,.32),transparent 62%),
    linear-gradient(180deg,#63cf6b 0%,#2f9e54 58%,#1d7a45 100%);
  border:5px solid #fff;border-bottom:0;border-radius:32px 32px 0 0;
  padding:20px 20px 26px;padding-bottom:calc(26px + env(safe-area-inset-bottom,0px));
  box-shadow:inset 0 3px 0 rgba(255,255,255,.45),0 -18px 60px rgba(8,45,20,.55);
  animation:up .34s var(--ease-back) both;max-height:92%;overflow-y:auto;overflow-x:hidden;
  -webkit-overflow-scrolling:touch;overscroll-behavior:contain}
.panel>*{position:relative}
@keyframes up{from{transform:translateY(100%)}to{transform:none}}
.grab{width:46px;height:6px;border-radius:99px;background:rgba(255,255,255,.6);margin:0 auto 14px}
.rinki-banner{text-align:center;font-family:var(--display);font-weight:800;font-size:14px;color:#fff;
  background:linear-gradient(180deg,var(--purple-1),var(--purple-2));border:2px solid #fff;border-radius:999px;
  padding:6px 14px;margin:0 0 12px;box-shadow:0 3px 8px rgba(110,50,180,.4)}
.rinki-step{display:inline-block;margin-left:6px;padding:1px 8px;border-radius:999px;background:rgba(255,255,255,.25);font-size:12px}
.enc-head{text-align:center;margin:0 0 14px;padding:14px 16px 8px;background:rgba(8,58,16,.32);border:2px solid rgba(255,255,255,.5);border-radius:22px;box-shadow:inset 0 1px 0 rgba(255,255,255,.25)}
.enc-head .crt{width:112px;height:112px;animation:bob 1.6s ease-in-out infinite;filter:drop-shadow(0 6px 8px rgba(0,40,10,.35))}
/* Sticker headings: white fill, dark-green outline, chunky drop. */
.enc-name{font-family:var(--display);font-weight:800;font-size:27px;letter-spacing:-.02em;text-align:center;margin:2px 0 0;color:#fff;-webkit-text-stroke:2.5px var(--ink-line);paint-order:stroke fill;text-shadow:0 3px 6px rgba(0,45,10,.45)}
.enc-q{text-align:center;font-family:var(--display);font-weight:800;font-size:17px;color:#fff;-webkit-text-stroke:2px var(--ink-line);paint-order:stroke fill;text-shadow:var(--drop);margin:10px 0 14px}
.opts{display:grid;gap:10px}
/* Light plastic cards on the green sheet: plain dark ink, no outline. */
.opt{display:flex;align-items:center;gap:12px;border:3px solid #fff;background:linear-gradient(180deg,#ffffff,#eef4ff);border-radius:18px;padding:14px 16px;cursor:pointer;font-family:var(--body);font-size:16px;font-weight:700;color:var(--ink);text-align:left;
  box-shadow:inset 0 2px 0 #fff,0 4px 0 rgba(150,150,190,.35),0 7px 14px rgba(20,60,30,.22);
  transition:transform .1s var(--ease-out),box-shadow .1s,background .12s}
/* hover only where a real pointer exists — on touch it would stick after a tap */
@media (hover:hover){.opt:hover{background:linear-gradient(180deg,#ffffff,#e9f7e2)}}
.opt:active{transform:translateY(4px);box-shadow:inset 0 2px 0 #fff,0 1px 0 rgba(150,150,190,.35)}
.opt .sw{width:22px;height:22px;border-radius:7px;flex:none;border:2px solid #fff;box-shadow:0 2px 4px rgba(0,0,0,.22)}
.opt:disabled{cursor:default}
.opt.correct{border-color:#fff;background:linear-gradient(180deg,#c6ffb0,#8fe86a);box-shadow:inset 0 2px 0 rgba(255,255,255,.7),0 4px 0 var(--green-d);animation:correctpop .4s var(--ease-back) both}
.opt.wrong{border-color:#fff;background:linear-gradient(180deg,var(--red-1),#ff6d86);color:#fff;text-shadow:0 1px 0 rgba(90,0,20,.4);box-shadow:inset 0 2px 0 rgba(255,255,255,.6),0 4px 0 var(--red-d);animation:shake .35s ease both}
@keyframes correctpop{0%{transform:scale(1)}40%{transform:scale(1.06)}100%{transform:scale(1)}}
@keyframes shake{0%,100%{transform:translateX(0)}25%{transform:translateX(-5px)}75%{transform:translateX(5px)}}
/* challenge: true/false */
.tf-opts{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.opt.center{justify-content:center;text-align:center;font-size:17px;padding:18px 14px}
/* Mission progress shown in the result panel: what this catch just advanced. */
.mprog{margin:24px 0 2px;padding:20px 12px 11px;border-radius:18px;
  background:rgba(8,58,16,.42);border:2px solid rgba(255,255,255,.6);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.22),0 3px 10px rgba(0,40,10,.3)}
/* heading rides the block's top edge as a gold badge — the old 12px translucent
   caption vanished against the panel. .panel>* is already position:relative. */
.mprog-h{position:absolute;top:-12px;left:50%;transform:translateX(-50%);
  padding:5px 15px;border-radius:999px;white-space:nowrap;
  background:linear-gradient(180deg,var(--gold-2),var(--gold-d));
  border:2px solid #fff;color:#fff;
  font-family:var(--display);font-weight:800;font-size:14px;letter-spacing:.01em;
  -webkit-text-stroke:0;text-shadow:0 1px 2px rgba(90,55,0,.6);
  box-shadow:0 3px 7px rgba(90,55,0,.4)}
@media (max-width:360px){.mprog-h{font-size:13px;padding:4px 12px}}
.mprow + .mprow{margin-top:9px}
.mptop{display:flex;align-items:baseline;gap:8px;margin-bottom:4px}
.mplab{flex:1;min-width:0;font-size:13px;font-weight:800;color:#fff;line-height:1.15;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;text-shadow:0 1px 2px rgba(0,45,10,.55)}
.mpnum{flex:none;font-family:var(--display);font-weight:800;font-size:13px;color:#ffe066;
  font-variant-numeric:tabular-nums;text-shadow:0 1px 2px rgba(0,45,10,.55)}
.mpbar{height:9px;border-radius:99px;background:rgba(0,50,0,.35);overflow:hidden;
  border:2px solid rgba(255,255,255,.55);box-shadow:inset 0 1px 2px rgba(0,40,0,.35)}
.mpbar i{display:block;height:100%;border-radius:99px;
  background:linear-gradient(90deg,var(--gold-2),#fff2a0);box-shadow:0 0 8px rgba(255,220,80,.8);
  transition:width .5s var(--ease-out)}
.mprow.done .mpbar i{background:linear-gradient(90deg,var(--green-2),var(--green-1))}
.mprow.done .mplab{color:#c6ffb0}

/* chip that flies from the result panel to the 🎯 missions button */
.flymission{position:absolute;z-index:700;pointer-events:none;white-space:nowrap;
  font-family:var(--display);font-weight:800;font-size:17px;color:#fff;
  padding:5px 12px;border-radius:999px;border:2px solid #fff;
  background:linear-gradient(180deg,var(--purple-1),var(--purple-2));
  box-shadow:0 4px 10px rgba(80,40,140,.45);text-shadow:0 1px 2px rgba(50,20,90,.5)}
/* Flying announcement (recycling truck): pops centre-screen and floats up. Gold,
   matching the truck marker, so the two read as the same event. */
.flytext{position:absolute;z-index:700;pointer-events:none;white-space:nowrap;
  font-family:var(--display);font-weight:800;font-size:22px;color:#fff;
  padding:7px 18px;border-radius:999px;border:3px solid #fff;
  background:linear-gradient(180deg,var(--gold-1),var(--gold-2) 60%,var(--gold-d));
  box-shadow:0 6px 16px rgba(150,100,10,.5);text-shadow:0 2px 3px rgba(120,70,0,.45)}
.iconbtn.bump{animation:pillbump .42s var(--ease-back)}

/* Praise banner lifted out of the task panel after a completed task.
   Sits above .ov (z-index 600) or the overlay would hide it. */
.praise{position:absolute;z-index:700;pointer-events:none;left:0;top:0;
  width:min(300px,84%);text-align:center;
  font-family:var(--display);font-weight:800;font-size:30px;line-height:1.05;letter-spacing:-.01em;
  color:#fff;-webkit-text-stroke:6px var(--ink-line);paint-order:stroke fill;
  text-shadow:0 4px 0 rgba(0,45,10,.35),0 8px 22px rgba(0,40,10,.5);
  filter:drop-shadow(0 0 14px rgba(255,230,120,.65))}
@media (max-width:360px){.praise{font-size:25px;-webkit-text-stroke-width:5px}}
/* level-up variant: sits higher, gold instead of white */
.praise.level{color:#ffe066;-webkit-text-stroke-width:6px;
  filter:drop-shadow(0 0 18px rgba(255,214,80,.9))}

/* sparks from a correct stop (Fx.sparks) — above the overlay like .praise */
.spark{position:absolute;z-index:700;pointer-events:none;width:16px;height:4px;border-radius:99px;
  background:linear-gradient(90deg,#fff,var(--gold-2) 55%,rgba(255,176,40,0));
  box-shadow:0 0 8px rgba(255,214,80,.95)}
.sparkring{position:absolute;z-index:699;pointer-events:none;width:46px;height:46px;border-radius:50%;
  border:4px solid rgba(255,235,150,.95);box-shadow:0 0 16px rgba(255,214,80,.8),inset 0 0 10px rgba(255,214,80,.6)}

/* hidden-item stand-in: big "?" in place of the caught sprite (quiz) */
.qmark{width:108px;height:108px;margin:0 auto;display:grid;place-items:center;border-radius:28px;
  background:linear-gradient(180deg,var(--gold-1),var(--gold-2) 55%,var(--gold-d));
  border:4px solid #fff;color:#fff;font-family:var(--display);font-weight:800;font-size:62px;line-height:1;
  -webkit-text-stroke:3px var(--gold-t);paint-order:stroke fill;
  box-shadow:inset 0 3px 0 rgba(255,255,255,.6),0 6px 0 var(--gold-d),0 10px 20px rgba(60,40,0,.35);
  animation:bob 1.6s ease-in-out infinite}
/* challenge: quiz (two stacked answers, A/B letter chips) */
.quiz-opts{display:grid;gap:10px}
.quiz-opts .opt{font-size:15px;line-height:1.25;align-items:flex-start}
.qletter{flex:none;display:grid;place-items:center;width:26px;height:26px;border-radius:9px;background:linear-gradient(180deg,var(--green-2),var(--green-d));color:#fff;font-size:14px;font-weight:800;box-shadow:0 2px 4px rgba(0,0,0,.2)}
.opt.wrong .qletter{background:rgba(255,255,255,.35)}
.quiz-badge{display:inline-block;margin-right:8px;padding:4px 12px;border-radius:999px;
  background:linear-gradient(180deg,var(--gold-2),var(--gold-d));border:2px solid #fff;
  color:#fff;text-shadow:0 1px 2px rgba(90,55,0,.55);
  -webkit-text-stroke:0;                 /* .enc-q's 2px outline would clog 13px text */
  font-size:13px;font-weight:800;letter-spacing:.02em;vertical-align:middle;
  box-shadow:0 2px 5px rgba(90,55,0,.3)}
/* Compact encounter header (see Challenges.compactHead): buys ~84px so the tall
   match-up task fits a 568px-high phone without the panel needing to scroll. */
.panel.compact .enc-head{padding:10px 12px 6px;margin-bottom:10px}
.panel.compact .enc-head .crt{width:56px;height:56px}
.panel.compact .qmark{width:56px;height:56px;border-radius:16px;font-size:32px;border-width:3px;
  -webkit-text-stroke-width:2px;box-shadow:inset 0 2px 0 rgba(255,255,255,.6),0 4px 0 var(--gold-d),0 6px 12px rgba(60,40,0,.3)}
.panel.compact .enc-name{font-size:20px;-webkit-text-stroke-width:2px}
.panel.compact .enc-q{font-size:16px;margin:6px 0 10px}
.panel.compact .pcard{min-height:58px}

/* challenge: match-up — drag an item card onto a bin card.
   .pcard is shared by both sides so a bin is exactly as large as the item being
   dragged onto it: same box, same icon slot, same label slot. */
.pairs{display:grid;grid-template-columns:1fr 1fr;gap:10px}
/* gap 6, not 8: four rows of .pcard overflowed a 568px phone by 2px even before
   the bin artwork, and a swipe on a card cannot scroll the panel (touch-action). */
.pcol{display:grid;gap:6px;align-content:start}
.pcard{display:flex;align-items:center;gap:8px;min-height:62px;box-sizing:border-box;
  border:3px solid #fff;border-radius:16px;padding:8px 10px;
  background:linear-gradient(180deg,#fff,#eef4ff);font-family:var(--body);font-weight:800;font-size:13px;color:var(--ink);text-align:left;
  box-shadow:inset 0 2px 0 #fff,0 4px 0 rgba(150,150,190,.35);
  transition:transform .12s var(--ease-out),box-shadow .12s,background .12s,opacity .2s}
.pcard .pic{flex:none;width:44px;height:44px;display:grid;place-items:center}
/* long names ("Kannettava tietokone") wrap to two lines and get an ellipsis
   instead of being silently clipped mid-word */
.pcard .plab{line-height:1.15;min-width:0;overflow-wrap:anywhere;
  display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden}
.pitem{cursor:grab;touch-action:none;-webkit-user-select:none;user-select:none}
.pitem .crt{width:44px;height:44px;pointer-events:none}
/* The bin artwork fills the same 44px slot the item sprite uses, so an item card
   and a bin card stay exactly the same size (a forgiving drop target on a
   phone). The category colour moved to the card's left edge — three images
   cannot carry eleven categories, so the colour has to say it. */
.pbin{border-left-width:8px}
.binimg{object-fit:contain;pointer-events:none;filter:drop-shadow(0 2px 3px rgba(0,0,0,.3))}
.pcard .pic .binimg{width:44px;height:44px}
.pitem.dragging{cursor:grabbing;z-index:5;position:relative;transform-origin:50% 50%;
  box-shadow:inset 0 2px 0 #fff,0 10px 18px rgba(20,60,30,.4);border-color:var(--gold-1)}
.pbin.over{background:linear-gradient(180deg,#fff8d6,#ffe9a0);border-color:var(--gold-2);transform:scale(1.04);
  box-shadow:inset 0 2px 0 #fff,0 6px 0 var(--gold-d),0 0 0 3px rgba(255,200,60,.5)}
.pitem.spent{pointer-events:none}
.pitem.done{opacity:.42;background:linear-gradient(180deg,#dcffcd,#b6f09a);box-shadow:inset 0 2px 0 #fff,0 3px 0 var(--green-d)}
.pitem.missed{opacity:.42;background:linear-gradient(180deg,#ffd9e0,#ffb3c1);box-shadow:inset 0 2px 0 #fff,0 3px 0 var(--red-d)}
.pbin.filled{background:linear-gradient(180deg,#dcffcd,#b6f09a);box-shadow:inset 0 2px 0 #fff,0 3px 0 var(--green-d)}
.pbin.correct{background:linear-gradient(180deg,#c6ffb0,#8fe86a);border-color:#fff;animation:correctpop .4s var(--ease-back) both}
.pbin.wrong{background:linear-gradient(180deg,var(--red-1),#ff6d86);color:#fff;animation:shake .35s ease both}

/* challenge: memory — cards shown, then hidden; find the matching pairs.
   Each card has a face-down back (♻️ on green) and a face-up front (the sticker);
   .revealed cross-fades to the front, .matched locks it open and turns green. */
.memwrap{display:grid;gap:10px}
.memtop{display:flex;justify-content:space-between;align-items:center;min-height:26px}
.memfound{font-family:var(--display);font-weight:800;font-size:15px;color:#fff;
  background:linear-gradient(180deg,var(--green-1),var(--green-2));border:2px solid #fff;border-radius:99px;
  padding:2px 12px;text-shadow:0 1px 2px rgba(0,45,10,.4);box-shadow:0 3px 7px rgba(30,120,40,.35)}
.memlives{display:flex;gap:5px}
.memgrid{display:grid;grid-template-columns:repeat(4,1fr);gap:8px}
.memcard{position:relative;aspect-ratio:1;padding:0;border:0;background:none;cursor:pointer;
  -webkit-user-select:none;user-select:none;transition:transform .12s var(--ease-out)}
.memcard:active{transform:scale(.94)}
.memcard.matched{cursor:default}
.memback,.memfront{position:absolute;inset:0;display:grid;place-items:center;border:3px solid #fff;border-radius:14px;
  box-shadow:inset 0 2px 0 rgba(255,255,255,.6),0 4px 0 rgba(150,150,190,.35);transition:opacity .18s var(--ease-out)}
.memback{font-size:26px;background:linear-gradient(160deg,var(--green-1),var(--green-2));
  text-shadow:0 2px 3px rgba(0,45,10,.35)}
.memfront{opacity:0;background:linear-gradient(180deg,#fff,#eef4ff)}
.memfront .crt{width:46px;height:46px}
.memcard.revealed .memback{opacity:0}
.memcard.revealed .memfront{opacity:1}
.memcard.revealed:not(.matched) .memfront{animation:correctpop .3s var(--ease-back) both}
.memcard.matched .memfront{opacity:1;background:linear-gradient(180deg,#c6ffb0,#8fe86a);border-color:#fff;
  box-shadow:inset 0 2px 0 rgba(255,255,255,.7),0 4px 0 var(--green-d)}
@media (max-width:360px){.memfront .crt{width:40px;height:40px}.memback{font-size:22px}}

/* challenge: stop the marker inside the right category band */
.stopwrap{display:grid;gap:11px}
.stopbar{position:relative;display:flex;height:62px;border-radius:16px;overflow:hidden;border:3px solid #fff;
  box-shadow:inset 0 2px 0 rgba(255,255,255,.5),0 4px 0 rgba(150,150,190,.35),0 8px 16px rgba(20,60,30,.25)}
.stopbar .band{flex:1;display:grid;place-items:center;padding:0 3px}
.stopbar .band span{font-family:var(--display);font-weight:800;font-size:10.5px;line-height:1.1;text-align:center;color:#fff;
  text-shadow:0 1px 2px rgba(0,0,0,.55);word-break:break-word}
.stopbar .band.target{box-shadow:inset 0 0 0 3px rgba(255,255,255,.85)}
.needle{position:absolute;top:-3px;bottom:-3px;left:0;width:6px;margin-left:-3px;border-radius:99px;
  background:linear-gradient(180deg,#fff,#ffe066);box-shadow:0 0 10px rgba(255,255,255,.95),0 0 4px rgba(0,0,0,.4)}
.stopbar.flash-ok{animation:correctpop .26s var(--ease-back) both}
.stopbar.flash-bad{animation:shake .26s ease both}
.stoprounds{display:flex;justify-content:center;gap:8px}
.stoprounds i{width:13px;height:13px;border-radius:50%;background:rgba(255,255,255,.35);border:2px solid rgba(255,255,255,.6)}
.stoprounds i.hit{background:linear-gradient(180deg,var(--green-1),var(--green-2));border-color:#fff}
.stoprounds i.miss{background:linear-gradient(180deg,var(--red-1),var(--red-2));border-color:#fff}
#stopBtn{margin-top:0}

/* challenge: catch the falling trash in a labelled bin.
   The stage is a fixed-height sky the drops fall through; `touch-action:none`
   is what makes the drag work at all on a phone (otherwise the browser scrolls
   the sheet instead of steering the bin). */
.catchwrap{display:grid;gap:10px}
/* Height is capped by viewport, not fixed: the stage sets `touch-action:none`,
   so if the panel ever grows past the screen the player has to scroll a sheet
   that swallows drags. 46vh keeps the whole task on one screen down to 568px. */
.catchstage{position:relative;height:min(290px,46vh);border-radius:20px;overflow:hidden;touch-action:none;cursor:grab;
  background:linear-gradient(180deg,#bfeaff 0%,#e8f7ff 62%,#d9f0cf 100%);
  border:3px solid #fff;box-shadow:inset 0 2px 0 rgba(255,255,255,.7),0 4px 0 rgba(150,150,190,.35),0 8px 16px rgba(20,60,30,.25)}
.catchstage:active{cursor:grabbing}
.catchstage.flash-ok{animation:correctpop .26s var(--ease-back) both}
/* A miss shakes AND floods the stage red — a shake alone was easy to miss while
   the player is tracking the next drop. The overlay is a ::after so it needs no
   extra element in the stage, and it sits above the drops (z 5). */
.catchstage.flash-bad{animation:shake .26s ease both}
.catchstage.flash-bad::after{content:'';position:absolute;inset:0;z-index:5;pointer-events:none;
  border-radius:17px;background:rgba(255,61,99,.5);box-shadow:inset 0 0 44px 14px rgba(207,31,71,.85);
  animation:catchmiss .46s ease-out forwards}
@keyframes catchmiss{0%{opacity:0}18%{opacity:1}100%{opacity:0}}
/* score + lives ride inside the stage so the header stays compact */
.catchtop{position:absolute;top:8px;left:9px;right:9px;z-index:3;display:flex;justify-content:space-between;align-items:center;pointer-events:none}
.cscore{font-family:var(--display);font-weight:800;font-size:15px;color:#fff;background:linear-gradient(180deg,var(--green-1),var(--green-2));
  border:2px solid #fff;border-radius:999px;padding:2px 11px;box-shadow:0 3px 7px rgba(20,80,20,.35);text-shadow:0 1px 2px rgba(0,45,10,.5)}
.cscore.done{background:linear-gradient(180deg,var(--gold-1),var(--gold-2));color:var(--gold-t);text-shadow:none;box-shadow:0 3px 7px rgba(180,120,20,.4)}
.clives{display:flex;gap:5px}
.clives i,.memlives i{--heart:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' d='M12 21.35l-1.45-1.32C5.4 15.36 2 12.28 2 8.5 2 5.42 4.42 3 7.5 3c1.74 0 3.41.81 4.5 2.09C13.09 3.81 14.76 3 16.5 3 19.58 3 22 5.42 22 8.5c0 3.78-3.4 6.86-8.55 11.54L12 21.35z'/%3E%3C/svg%3E");
  width:22px;height:21px;border:0;border-radius:0;background:linear-gradient(180deg,var(--red-1),var(--red-2));
  -webkit-mask:var(--heart) center/contain no-repeat;mask:var(--heart) center/contain no-repeat;
  filter:drop-shadow(0 1px 2px rgba(0,0,0,.3))}
.clives i.lost,.memlives i.lost{background:rgba(255,255,255,.55);filter:none;transform:scale(.82);transition:transform .2s,background .2s}
/* the bin: parked on the floor, moved by changing `left` (translate -50% keeps
   the label centred on the touch point) */
.catchbin{position:absolute;bottom:0;left:50%;transform:translateX(-50%);z-index:2;width:84px;
  display:flex;flex-direction:column;align-items:center;gap:2px;padding:4px 4px 6px;pointer-events:none}
.catchbin .binimg{width:52px;height:52px}
.catchbin .binlab{font-size:11px;color:#fff;padding:2px 9px;border-radius:999px;border:2px solid #fff;
  background:linear-gradient(180deg,var(--green-1),var(--green-2));
  white-space:nowrap;text-shadow:0 1px 2px rgba(0,45,10,.55);box-shadow:0 2px 5px rgba(0,0,0,.3)}
.cdrop{position:absolute;top:-46px;left:0;margin-left:-22px;width:44px;height:44px;z-index:1;pointer-events:none;
  animation:cdropspin 2.4s linear infinite}
.cdrop .crt{width:44px;height:44px;display:block;filter:drop-shadow(0 3px 4px rgba(0,0,0,.28))}
@keyframes cdropspin{0%,100%{transform:rotate(-7deg)}50%{transform:rotate(7deg)}}
/* opening cue: "Liikuta roskista" → 3 → 2 → 1 → "Nyt!" */
.catchcue{position:absolute;inset:0;z-index:4;display:grid;place-items:center;pointer-events:none;
  font-family:var(--display);font-weight:800;text-align:center;color:#fff;
  -webkit-text-stroke:3px var(--ink-line);paint-order:stroke fill;text-shadow:0 3px 6px rgba(0,45,10,.45);
  opacity:0;transform:scale(.6);transition:opacity .12s,transform .12s}
.catchcue.show{opacity:1;transform:scale(1)}
.catchcue.ready{font-size:27px;padding:0 18px}
.catchcue.num{font-size:74px}
.catchcue.go{font-size:52px;color:#ffe066}
.catchcue.win{font-size:44px;color:#ffe066}
@media (prefers-reduced-motion:reduce){.cdrop{animation:none}}
/* Swipe minigame ("Kuuluuko tänne?"): a Tinder-style card stack. */
.swipewrap{display:grid;gap:9px}
.swipetop{display:flex;justify-content:space-between;align-items:flex-start;min-height:40px;gap:8px}
.swipestat{display:flex;flex-direction:column;align-items:center;gap:3px}
.swipestat-l{font-family:var(--display);font-weight:800;font-size:10px;text-transform:uppercase;letter-spacing:.5px;color:#fff;opacity:.9;text-shadow:0 1px 2px rgba(0,45,10,.5)}
.swipecombo{align-self:center;font-family:var(--display);font-weight:800;font-size:15px;color:#ffd84d;text-shadow:0 1px 2px rgba(120,80,0,.4)}
/* Fixed, viewport-capped height so the whole task (stack + buttons) stays on one
   screen down to 568px; overflow hidden clips a card as it flies off. */
.swipestage{position:relative;height:min(250px,40vh);overflow:hidden;border-radius:22px}
.swipecard{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;
  background:linear-gradient(180deg,#ffffff,#eef2f7);border:3px solid #fff;border-radius:22px;
  box-shadow:0 8px 18px rgba(30,40,70,.25),inset 0 2px 0 rgba(255,255,255,.85);touch-action:none;cursor:grab;will-change:transform}
.swipecard:active{cursor:grabbing}
.swipecard.top{z-index:2}
.swipecard.peek{z-index:1;transform:scale(.94) translateY(12px);opacity:.5;filter:saturate(.75);pointer-events:none}
.swipecard.flash-ok{box-shadow:0 0 0 4px rgba(80,200,90,.85),0 8px 18px rgba(30,40,70,.25)}
.swipecard.flash-bad{box-shadow:0 0 0 4px rgba(255,61,99,.9),0 8px 18px rgba(30,40,70,.25)}
.swipeitem .crt{width:84px;height:84px;filter:drop-shadow(0 4px 5px rgba(0,0,0,.22))}
.swipeto{font-size:20px;line-height:1;color:#9aa4b2}
.swipebin{display:inline-flex;align-items:center;gap:8px;padding:7px 15px;border-radius:999px;
  border:3px solid var(--bc);background:#fff;box-shadow:0 3px 8px rgba(30,40,70,.18)}
.swipebinsw{width:16px;height:16px;border-radius:50%;background:var(--bc);border:2px solid #fff;box-shadow:0 0 0 1px rgba(0,0,0,.15)}
.swipebinlab{font-family:var(--display);font-weight:800;font-size:16px;color:#33404f}
/* KYLLÄ / EI watermark stamps that fade in as the card is dragged. */
.swipestamp{position:absolute;top:14px;font-family:var(--display);font-weight:800;font-size:26px;letter-spacing:.02em;
  padding:3px 12px;border-radius:12px;text-transform:uppercase;opacity:0;pointer-events:none;
  -webkit-text-stroke:1.5px #fff;paint-order:stroke fill}
.swipestamp.yes{right:12px;transform:rotate(14deg);color:#3fae52;border:4px solid #3fae52}
.swipestamp.no{left:12px;transform:rotate(-14deg);color:#ff3d63;border:4px solid #ff3d63}
.swipebtns{display:flex;gap:10px}
.swipebtn{flex:1;font-family:var(--display);font-weight:800;font-size:19px;color:#fff;border:3px solid #fff;border-radius:18px;padding:12px 0;cursor:pointer;
  -webkit-text-stroke:1.5px var(--ink-line);paint-order:stroke fill;text-shadow:0 2px 3px rgba(0,30,10,.35);
  box-shadow:inset 0 2px 0 rgba(255,255,255,.5),0 4px 0 rgba(0,0,0,.15),0 6px 12px rgba(30,30,60,.2)}
.swipebtn:active{transform:translateY(3px);box-shadow:inset 0 2px 0 rgba(255,255,255,.4),0 1px 0 rgba(0,0,0,.15)}
.swipebtn.yes{background:linear-gradient(180deg,var(--green-1),var(--green-2))}
.swipebtn.no{background:linear-gradient(180deg,#ff92a6,#ff3d63)}
/* ===== level-up quiz (own overlay, reuses .quiz-opts buttons) ===== */
.lqhead{display:flex;flex-direction:column;align-items:center;gap:9px;margin-bottom:14px}
.lqbadge{padding:5px 15px;border-radius:999px;white-space:nowrap;
  background:linear-gradient(180deg,var(--gold-1),var(--gold-2) 58%,var(--gold-d));
  border:2px solid #fff;color:var(--gold-t);
  font-family:var(--display);font-weight:800;font-size:14px;
  box-shadow:0 3px 7px rgba(90,55,0,.4)}
.lqsteps{display:flex;gap:7px}
.lqdot{width:10px;height:10px;border-radius:99px;background:rgba(255,255,255,.35);border:2px solid rgba(255,255,255,.6)}
.lqdot.done{background:linear-gradient(180deg,var(--green-1),var(--green-2));border-color:#fff}
.lqdot.on{width:26px;background:linear-gradient(90deg,var(--gold-1),var(--gold-2));border-color:#fff}
.lqq{text-align:center;font-family:var(--display);font-weight:800;font-size:19px;line-height:1.2;color:#fff;
  -webkit-text-stroke:2px var(--ink-line);paint-order:stroke fill;text-shadow:var(--drop);margin:0 0 16px}
/* the explanation is the whole point of the wrong answer — make it read */
.lqwhy{margin-top:14px;padding:14px 14px 12px;border-radius:18px;
  background:rgba(255,255,255,.94);color:var(--ink);font-size:14px;font-weight:700;line-height:1.35;
  border:3px solid #fff;box-shadow:0 5px 14px rgba(0,40,10,.35);animation:up .3s var(--ease-back) both}
.lqwhy-h{font-family:var(--display);font-weight:800;font-size:14px;color:#b06a00;margin-bottom:5px}
.lqwhy .btn{margin-top:13px}
.lqdone{text-align:center;padding:6px 0 2px}
.lqstar{font-size:46px;line-height:1;animation:lustar 1.6s ease-in-out}
.lqscore{font-family:var(--display);font-weight:800;font-size:31px;color:#fff;margin-top:4px;
  -webkit-text-stroke:2.5px var(--ink-line);paint-order:stroke fill;text-shadow:0 3px 6px rgba(0,45,10,.45)}
.lqsub{font-size:14.5px;font-weight:700;color:#eafff0;margin-top:7px;text-shadow:0 1px 2px rgba(0,45,10,.55)}
/* challenge: odd-one-out */
.odd-opts{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.odd-opt{display:flex;flex-direction:column;align-items:center;gap:5px;border:3px solid #fff;background:linear-gradient(180deg,#ffffff,#eef4ff);border-radius:18px;padding:11px 6px;cursor:pointer;font-family:var(--body);
  box-shadow:inset 0 2px 0 #fff,0 4px 0 rgba(150,150,190,.35),0 7px 14px rgba(20,60,30,.22);
  transition:transform .1s var(--ease-out),box-shadow .1s,background .12s}
@media (hover:hover){.odd-opt:hover{background:linear-gradient(180deg,#ffffff,#e9f7e2)}}
.odd-opt:active{transform:translateY(4px);box-shadow:inset 0 2px 0 #fff,0 1px 0 rgba(150,150,190,.35)}
.odd-opt .crt{width:56px;height:56px}
.odd-opt .on{font-size:11px;font-weight:700;color:var(--ink);line-height:1.1;text-align:center}
.odd-opt:disabled{cursor:default}
.odd-opt.dim{opacity:.45}
.odd-opt.correct{background:linear-gradient(180deg,#c6ffb0,#8fe86a);box-shadow:inset 0 2px 0 rgba(255,255,255,.7),0 4px 0 var(--green-d);animation:correctpop .4s var(--ease-back) both}
.odd-opt.wrong{background:linear-gradient(180deg,var(--red-1),#ff6d86);box-shadow:inset 0 2px 0 rgba(255,255,255,.6),0 4px 0 var(--red-d);animation:shake .35s ease both}
/* challenge: drag-to-bin */
.dragstage{height:104px;display:grid;place-items:center;margin:2px 0 12px;position:relative}
.dragitem{touch-action:none;cursor:grab}
.dragitem.dragging{cursor:grabbing;z-index:5}
.dragitem:not(.dragging){transition:transform .2s}
.dragitem .crt{width:72px;height:72px;pointer-events:none}
.bins{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
/* Padding/gap are tighter than they look like they should be: the bin artwork
   adds ~46px of height to each of these, and the drag task has no compactHead —
   it has to keep fitting a 568px phone without the panel scrolling, because the
   dragged sticker sets touch-action:none and a swipe on it cannot scroll. */
.bin{display:flex;flex-direction:column;align-items:center;gap:4px;border:3px dashed rgba(255,255,255,.75);background:rgba(8,58,16,.3);border-radius:18px;padding:8px 6px;box-shadow:inset 0 1px 0 rgba(255,255,255,.25);transition:transform .12s var(--ease-back),border-color .12s,background .12s}
.bin .binimg{width:46px;height:46px}
.bin.over{border-color:#fff;background:rgba(147,242,122,.4);transform:scale(1.07)}
.bin.correct{border-style:solid;border-color:#fff;background:linear-gradient(180deg,#c6ffb0,#8fe86a);animation:correctpop .4s var(--ease-back) both}
.bin.wrong{border-style:solid;border-color:#fff;background:linear-gradient(180deg,var(--red-1),#ff6d86);animation:shake .35s ease both}
.binsw{width:22px;height:22px;border-radius:7px;border:2px solid #fff;box-shadow:0 2px 4px rgba(0,0,0,.22)}
.binlab{font-size:12px;font-weight:800;color:#fff;text-align:center;line-height:1.1;text-shadow:0 1px 2px rgba(0,45,10,.6)}
/* challenge: timer bar */
.enc-timer{height:9px;border-radius:99px;background:rgba(0,50,0,.28);overflow:hidden;margin:0 0 14px;border:2px solid rgba(255,255,255,.7);box-shadow:inset 0 1px 2px rgba(0,40,0,.3)}
.enc-timer-fill{height:100%;width:100%;border-radius:99px;background:linear-gradient(90deg,var(--gold-2),#fff2a0);box-shadow:0 0 10px rgba(255,220,80,.8)}
.result{text-align:center;padding:8px 0 4px}
.result .big{font-family:var(--display);font-weight:800;font-size:33px;letter-spacing:-.02em;color:#fff;-webkit-text-stroke:2.5px var(--ink-line);paint-order:stroke fill;text-shadow:0 3px 6px rgba(0,45,10,.45)}
.result .sub{color:#eafff0;font-size:14px;font-weight:600;margin-top:6px;line-height:1.5;text-shadow:0 1px 2px rgba(0,45,10,.5)}
.result .reward{display:inline-flex;align-items:center;gap:7px;background:linear-gradient(180deg,var(--gold-1),var(--gold-2));color:var(--gold-t);font-family:var(--display);font-weight:800;padding:8px 20px;border-radius:999px;font-size:19px;margin-top:14px;
  box-shadow:inset 0 2px 0 rgba(255,255,255,.6),0 4px 0 var(--gold-d),0 8px 18px rgba(255,180,40,.45);animation:bump .5s var(--ease-back) .25s backwards}
@keyframes bump{0%{transform:scale(1)}40%{transform:scale(1.22)}100%{transform:scale(1)}}
.result .levelup{display:flex;align-items:center;justify-content:center;gap:8px;margin:12px auto 0;max-width:max-content;background:linear-gradient(180deg,var(--purple-1),var(--purple-2));color:#fff;font-family:var(--display);font-weight:800;padding:9px 18px;border-radius:999px;font-size:15px;border:2px solid #fff;box-shadow:0 4px 10px rgba(110,50,180,.45);animation:pop .4s var(--ease-back) both}
@keyframes pop{from{transform:scale(.6);opacity:0}to{transform:scale(1);opacity:1}}
/* Sits ABOVE the encounter header, so it announces the rare find before the eye
   reaches the sticker. Rides on top of any success branch (caught / evolved). */
.shinychip{display:block;width:max-content;margin:0 auto 6px;background:linear-gradient(180deg,var(--shiny-1),var(--shiny-2) 60%,var(--shiny-d));color:var(--shiny-t);font-family:var(--display);font-weight:800;font-size:15px;letter-spacing:.04em;padding:7px 18px;border-radius:999px;border:3px solid #fff;box-shadow:0 4px 0 rgba(0,110,140,.5),0 8px 18px rgba(18,198,232,.45);animation:pop .4s var(--ease-back) both,shinypulse 1.5s ease-in-out .4s infinite}
@keyframes shinypulse{0%,100%{box-shadow:0 4px 0 rgba(0,110,140,.5),0 8px 18px rgba(18,198,232,.45)}50%{box-shadow:0 4px 0 rgba(0,110,140,.5),0 8px 26px rgba(80,225,255,.9)}}
.dex-profile{display:flex;align-items:center;gap:7px;background:linear-gradient(180deg,var(--gold-1),var(--gold-2));border:2px solid #fff;border-radius:999px;padding:7px 15px;margin:0 0 14px;font-weight:800;font-size:14px;color:var(--gold-t);box-shadow:0 3px 8px rgba(200,140,20,.4)}
.dex-profile svg{width:17px;height:17px;color:var(--gold-t);flex:none}
/* daily streak + section headings */
.daily{background:linear-gradient(180deg,#ffc48a,#ff7a2e);border:2px solid #fff;border-radius:999px;padding:7px 15px;margin:0 0 14px;font-weight:800;font-size:14px;color:#fff;text-align:center;text-shadow:0 1px 2px rgba(120,40,0,.45);box-shadow:0 3px 8px rgba(200,90,20,.4)}
/* Daily walking tiers. ONE bar scaled to the top tier with a pip per goal, so
   the three targets read as one journey instead of three competing bars. */
.walkday{background:linear-gradient(180deg,#fff,#eaf6ff);border:3px solid #fff;border-radius:18px;padding:11px 13px;margin:0 0 14px;
  box-shadow:inset 0 2px 0 #fff,0 4px 0 rgba(150,150,190,.3)}
.walkday .wd-h{display:flex;justify-content:space-between;align-items:center;gap:8px;font-weight:800;font-size:13.5px;color:var(--purple-2)}
.walkday .wd-h b{font-family:var(--display);font-size:17px;color:#1d7a45;font-variant-numeric:tabular-nums}
.walkday .wd-bar{position:relative;height:11px;margin:9px 0 8px;border-radius:99px;background:#d7e4f0;box-shadow:inset 0 1px 3px rgba(40,60,90,.25)}
.walkday .wd-bar i{display:block;height:100%;border-radius:99px;background:linear-gradient(90deg,#93f27a,var(--green-2));transition:width .5s var(--ease-out)}
.walkday .wd-pip{position:absolute;top:50%;width:13px;height:13px;margin:-6.5px 0 0 -6.5px;border-radius:50%;background:#fff;border:3px solid #b9c9d8;box-sizing:border-box}
.walkday .wd-pip.done{background:var(--gold-2);border-color:#fff;box-shadow:0 0 0 2px rgba(255,176,40,.5)}
.walkday .wd-tiers{display:flex;justify-content:space-between;gap:5px;flex-wrap:wrap}
.walkday .wd-tier{font-size:11px;font-weight:800;color:#6a7a8c;white-space:nowrap}
.walkday .wd-tier.done{color:#1d7a45}
.walkday .wd-streak{margin-top:9px;text-align:center;font-size:12.5px;font-weight:800;color:#c2570d}
.sub-h{font-family:var(--display);font-weight:800;font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:rgba(255,255,255,.92);margin:16px 0 8px;text-shadow:0 1px 2px rgba(0,45,10,.5)}
/* daily missions */
.missions{display:grid;gap:11px}
.mission{--accent:var(--green-2);--accent-ink:var(--green-d);--tint:#f1fbf4;position:relative;background:linear-gradient(180deg,#fff,var(--tint));border:3px solid #fff;border-left:6px solid var(--accent);border-radius:16px;padding:12px 14px;color:var(--ink);box-shadow:inset 0 2px 0 #fff,0 4px 0 rgba(150,150,190,.3),0 8px 16px rgba(10,50,20,.25)}
/* rotate accent colours so the list feels lively, not uniform */
.mission:nth-child(3n+1){--accent:var(--blue-2);--accent-ink:var(--blue-d);--tint:#eef7fc}
.mission:nth-child(3n+2){--accent:var(--gold-2);--accent-ink:var(--gold-t);--tint:#fff7e8}
.mission:nth-child(3n+3){--accent:var(--purple-2);--accent-ink:var(--purple-d);--tint:#f5eefd}
.mission.done{--accent:var(--green-2);--accent-ink:var(--green-d);--tint:#dff6e1;background:linear-gradient(180deg,#eafbe9,var(--tint))}
/* label wears the card's own accent as a deep display-font ink, not flat black */
.mrow{display:flex;justify-content:space-between;align-items:center;gap:8px;font-size:15px;font-weight:800;color:var(--ink)}
.mrow>span:first-child{display:flex;align-items:center;gap:9px;font-family:var(--display);font-weight:700;font-size:15.5px;letter-spacing:-.01em;color:var(--accent-ink)}
.mico{flex:none;width:32px;height:32px;border-radius:11px;display:grid;place-items:center;font-size:16px;background:linear-gradient(180deg,#fff,#e8edf3);border:2px solid #fff;box-shadow:0 2px 5px rgba(80,70,110,.28)}
.mrow .mc{font-weight:800;color:#fff;font-variant-numeric:tabular-nums;flex:none;background:linear-gradient(180deg,var(--accent),var(--accent));border:2px solid #fff;border-radius:99px;padding:2px 10px;font-size:12.5px;box-shadow:0 2px 5px rgba(0,0,0,.18)}
.mbar{height:10px;border-radius:99px;background:rgba(0,0,0,.09);overflow:hidden;margin-top:9px;box-shadow:inset 0 1px 2px rgba(0,0,0,.16)}
.mfill{height:100%;border-radius:99px;background:linear-gradient(90deg,var(--accent),#fff);background-size:200% 100%;transition:width .5s var(--ease-out);box-shadow:0 0 8px -1px var(--accent)}
.mission.done .mfill{animation:mfillshine 1.6s ease-in-out infinite}
@keyframes mfillshine{0%,100%{background-position:0 0}50%{background-position:100% 0}}
/* achievement badges */
.badges{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.badge{background:linear-gradient(180deg,#ffffff,#eef4ff);border:3px solid #fff;border-radius:16px;padding:10px 6px;text-align:center;box-shadow:inset 0 2px 0 #fff,0 4px 0 rgba(150,150,190,.3)}
.badge .bico{font-size:26px;line-height:1.1}
.badge .bn{font-family:var(--display);font-weight:800;font-size:12px;margin-top:3px;color:var(--purple-d);line-height:1.1}
.badge .bd{font-size:10px;color:var(--muted);font-weight:600;margin-top:2px;line-height:1.15}
.badge.locked{opacity:.6;filter:grayscale(.7)}
.badge.locked .bico{filter:grayscale(1) opacity(.5)}
/* tabs */
.tabs{display:flex;gap:5px;background:rgba(8,58,16,.34);border:2px solid rgba(255,255,255,.5);border-radius:16px;padding:4px;margin:0 0 14px;box-shadow:inset 0 1px 0 rgba(255,255,255,.25)}
.tab{flex:1;min-width:0;border:0;background:none;border-radius:12px;padding:9px 4px;font-family:var(--body);font-weight:800;font-size:13px;color:rgba(255,255,255,.85);cursor:pointer;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;text-shadow:0 1px 2px rgba(0,45,10,.5);transition:background .15s,color .15s}
@media (max-width:360px){.tab{font-size:11.5px;padding:9px 2px}}
.tab.active{background:linear-gradient(180deg,var(--gold-1),var(--gold-2));color:var(--gold-t);text-shadow:none;box-shadow:inset 0 2px 0 rgba(255,255,255,.6),0 3px 0 var(--gold-d)}
.tabnotif{display:inline-flex;align-items:center;justify-content:center;min-width:17px;height:17px;padding:0 4px;margin-left:5px;border-radius:99px;background:linear-gradient(180deg,var(--red-1),var(--red-2));color:#fff;font-size:11px;font-weight:800;line-height:1;vertical-align:middle;text-shadow:none;box-shadow:0 1px 3px rgba(0,0,0,.3)}
.tabpane{display:none;animation:stepin .25s var(--ease-out) both}
.tabpane.active{display:block}
/* walking stat card + stat grid */
.walkcard{position:relative;text-align:center;background:linear-gradient(180deg,var(--blue-1),var(--blue-2));color:#fff;border:3px solid #fff;border-radius:20px;padding:16px 14px;margin:0 0 11px;box-shadow:inset 0 2px 0 rgba(255,255,255,.5),0 5px 0 var(--blue-d),0 10px 20px rgba(20,80,130,.35)}
.walkcard .wico{width:26px;height:26px;color:#fff}
.walkcard .wkm{font-family:var(--display);font-weight:800;font-size:34px;line-height:1;letter-spacing:-.02em;margin-top:2px;text-shadow:0 2px 3px rgba(0,45,80,.5)}
.walkcard .wkm span{font-size:17px;font-weight:700}
.walkcard .wlabel{font-weight:700;font-size:12.5px;margin-top:3px;opacity:.92;text-shadow:0 1px 2px rgba(0,45,80,.45)}
.statgrid{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.statcard{background:linear-gradient(180deg,#ffffff,#eef4ff);border:3px solid #fff;border-radius:16px;padding:12px 10px;text-align:center;box-shadow:inset 0 2px 0 #fff,0 4px 0 rgba(150,150,190,.3)}
.statcard .sv{font-family:var(--display);font-weight:800;font-size:26px;color:#e0850c;line-height:1;font-variant-numeric:tabular-nums}
.statcard .sl{font-size:11px;color:var(--purple-2);font-weight:800;letter-spacing:.06em;text-transform:uppercase;margin-top:4px;line-height:1.2;opacity:.85}
/* The shiny counter is the one stat that should look like treasure. */
.statcard.shinystat{background:linear-gradient(180deg,#f2fdff,#c7f2fb);border-color:#fff}
.statcard.shinystat .sv{color:var(--shiny-d)}

/* ---------- Chunky buttons ---------- */
.btn{--b1:var(--gold-1);--b2:var(--gold-2);--bd:var(--gold-d);--bt:var(--gold-t);
  position:relative;overflow:hidden;margin-top:16px;width:100%;cursor:pointer;
  background:linear-gradient(180deg,var(--b1),var(--b2));color:var(--bt);border:0;border-radius:22px;
  padding:15px 30px;font-family:var(--display);font-weight:700;font-size:19px;letter-spacing:-.01em;
  box-shadow:inset 0 2px 0 rgba(255,255,255,.7),inset 0 -3px 6px rgba(0,0,0,.12),0 6px 0 var(--bd),0 12px 22px rgba(50,30,70,.28);
  transition:transform .09s var(--ease-out),box-shadow .09s}
/* Glossy top cap — the single strongest "plastic" cue. */
.btn::before{content:'';position:absolute;left:8%;right:8%;top:6px;height:42%;border-radius:16px;background:linear-gradient(180deg,rgba(255,255,255,.65),rgba(255,255,255,0));pointer-events:none}
.btn::after{content:'';position:absolute;inset:0;background:linear-gradient(105deg,transparent 40%,rgba(255,255,255,.55) 50%,transparent 60%);transform:translateX(-140%);animation:sweep 3.6s ease-in-out 1.2s infinite;pointer-events:none}
@keyframes sweep{0%,72%{transform:translateX(-140%)}100%{transform:translateX(140%)}}
@media (hover:hover){.btn:hover{filter:brightness(1.03)}}
.btn:active{transform:translateY(5px);box-shadow:inset 0 2px 0 rgba(255,255,255,.6),0 1px 0 var(--bd),0 4px 10px rgba(50,30,70,.3)}
/* Primary "go" action: green body with sticker text. */
.btn.go{--b1:var(--green-1);--b2:var(--green-2);--bd:var(--green-d);color:#fff;-webkit-text-stroke:2px var(--ink-line);paint-order:stroke fill;text-shadow:0 2px 3px rgba(0,45,10,.4)}
.mbtn-row{display:flex;gap:8px;margin-top:9px}
.mbtn-row .btn{margin-top:0}
.mbtn-row .mbtn-info{width:auto;flex:none}
.mbtn-row #dexClose,.mbtn-row #petClose{flex:1}
.btn.ghost{--bt:var(--ink);background:linear-gradient(180deg,#ffffff,#eef0f6);color:var(--ink);font-size:16px;padding:13px 22px;margin-top:9px;
  box-shadow:inset 0 2px 0 #fff,0 5px 0 #c7cbd8,0 10px 18px rgba(50,30,70,.18)}
.btn.ghost::before{background:linear-gradient(180deg,rgba(255,255,255,.9),rgba(255,255,255,0))}
.btn.ghost::after{display:none}
@media (hover:hover){.btn.ghost:hover{background:linear-gradient(180deg,#ffffff,#e9f7e2)}}
.btn.ghost:active{box-shadow:inset 0 2px 0 #fff,0 1px 0 #c7cbd8}
.btn.danger{--b1:#fff0ee;--b2:#ffdad4;--bd:#e0a79e;--bt:#a5301f;font-size:16px;padding:13px 22px;margin-top:9px}
.btn.danger::after{display:none}
.btn.danger.armed{--b1:var(--red-1);--b2:var(--red-2);--bd:var(--red-d);--bt:#fff;text-shadow:0 1px 0 rgba(90,0,20,.4)}
.btn:disabled{opacity:.45;cursor:not-allowed}
.btn:disabled::after{display:none}

/* Sheet headings share the sticker treatment. */
.sheet-h{font-family:var(--display);font-weight:800;font-size:28px;letter-spacing:-.02em;margin:0 0 6px;display:flex;align-items:center;gap:9px;color:#fff;-webkit-text-stroke:2.5px var(--ink-line);paint-order:stroke fill;text-shadow:0 3px 6px rgba(0,45,10,.45)}
.sheet-h svg{-webkit-text-stroke:0}
.sheet-p{color:#eafff0;font-size:14px;font-weight:600;margin:0 0 16px;line-height:1.5;text-shadow:0 1px 2px rgba(0,45,10,.5)}
.sheet-p .st{font-weight:800;white-space:nowrap}
.st-found{color:#93f27a}
.st-caught{color:#ffe066}
.st-walk{color:#a8e6ff}
.dex{display:grid;grid-template-columns:repeat(3,1fr);gap:11px}
.dcell{background:linear-gradient(180deg,#ffffff,#eef4ff);border:3px solid #fff;border-radius:16px;padding:11px 6px;text-align:center;box-shadow:inset 0 2px 0 #fff,0 4px 0 rgba(150,150,190,.3)}
.dcell .crt{width:54px;height:54px}
.dcell.locked .crt{filter:grayscale(1) brightness(.6) opacity(.3)}
.dcell .dn{font-family:var(--display);font-weight:800;font-size:11.5px;margin-top:4px;line-height:1.1;color:var(--purple-d)}
.dcell .dc{font-size:11px;color:var(--muted);font-weight:600;margin-top:1px}
.dcell.locked{filter:saturate(.4)}
.dcell.locked .dn,.dcell.locked .dc{color:#9aa3b2}

/* ============================== Pet (Ekolemmikki) ==============================
   Bottom sheet with the pet front and centre; the meters reuse .mpbar.
   Kept deliberately TIGHT vertically (small paddings, food+growth side by
   side) so the whole sheet fits a phone screen without scrolling. */
.pethome{text-align:center;margin:2px 0 8px;padding:10px 12px 6px;background:rgba(8,58,16,.32);
  border:2px solid rgba(255,255,255,.5);border-radius:22px;box-shadow:inset 0 1px 0 rgba(255,255,255,.25)}
.petbig{width:118px;height:118px;object-fit:contain;animation:bob 1.6s ease-in-out infinite;
  filter:drop-shadow(0 6px 8px rgba(0,40,10,.35))}
/* Asleep: no bobbing (it is resting) and colours dimmed a notch. */
.petbig.asleep{animation:none;filter:saturate(.75) brightness(.94) drop-shadow(0 6px 8px rgba(0,40,10,.35))}
/* The pet's name under its portrait: a proper chunky pill button, so renaming
   reads as something you can tap — plain text was too easy to miss. */
.petname{width:fit-content;margin:7px auto 2px;padding:7px 20px;border-radius:999px;cursor:pointer;
  background:linear-gradient(180deg,#ffffff,#eef0f6);color:var(--ink);border:3px solid #fff;
  font-family:var(--display);font-weight:800;font-size:17px;
  box-shadow:inset 0 2px 0 #fff,0 4px 0 #c7cbd8,0 6px 12px rgba(50,30,70,.2);
  transition:transform .1s var(--ease-out),box-shadow .1s}
.petname:active{transform:translateY(3px);box-shadow:inset 0 2px 0 #fff,0 1px 0 #c7cbd8}
/* Still unnamed: gold + a gentle pulse, the sheet's clearest call to action. */
.petname.unnamed{background:linear-gradient(180deg,var(--gold-1),var(--gold-2));color:var(--gold-t);
  box-shadow:inset 0 2px 0 rgba(255,255,255,.6),0 4px 0 var(--gold-d),0 6px 14px rgba(255,170,40,.45);
  animation:btnpulse 1.4s ease-in-out infinite}
.petnamefield{display:block;margin:7px auto 2px;max-width:220px;text-align:center;padding:11px 14px;font-size:17px}
/* Care streak (fed AND patted, per day) under the meters. */
.petcare{text-align:center;font-size:12.5px;font-weight:800;color:#c6ffb0;margin:-2px 0 9px;
  text-shadow:0 1px 2px rgba(0,45,10,.5)}
.petbig.wiggle{animation:petwiggle .6s var(--ease-back)}
@keyframes petwiggle{0%,100%{transform:none}25%{transform:rotate(-7deg) scale(1.08)}60%{transform:rotate(6deg) scale(1.05)}}
/* Stage name as a gold chip, the mood line under it in plain sheet text. */
.petstage{width:fit-content;margin:0 auto 4px;padding:3px 14px;border-radius:999px;
  background:linear-gradient(180deg,var(--gold-1),var(--gold-2));border:2px solid #fff;color:var(--gold-t);
  font-family:var(--display);font-weight:800;font-size:15px;box-shadow:0 3px 8px rgba(150,100,10,.4)}
/* Mood line = sticker headline: display font, gold, dark-green outline like
   the sheet headings. The pat reply reuses it and only adds the pop-in. */
.petmood{text-align:center;font-family:var(--display);font-weight:800;font-size:20px;line-height:1.15;color:#ffe066;
  -webkit-text-stroke:2.5px var(--ink-line);paint-order:stroke fill;margin:0 0 9px;
  text-shadow:0 3px 6px rgba(0,45,10,.45);filter:drop-shadow(0 0 10px rgba(255,220,80,.45))}
.petmood.patline{animation:patpop .5s var(--ease-back) both}
@keyframes patpop{0%{transform:scale(.5) rotate(-4deg);opacity:0}60%{transform:scale(1.12) rotate(2deg)}100%{transform:scale(1) rotate(0)}}
/* Food + growth stacked full-width — side by side they read cramped. */
.petbars{display:grid;grid-template-columns:1fr;gap:8px;margin:0 0 9px}
.petbars .petbar{margin:0}
.petbar{margin:0 0 9px;padding:8px 10px;border-radius:16px;background:rgba(8,58,16,.42);
  border:2px solid rgba(255,255,255,.6);box-shadow:inset 0 1px 0 rgba(255,255,255,.22)}
.petbar .pb-h{display:flex;justify-content:space-between;align-items:center;gap:6px;margin-bottom:5px;
  font-weight:800;font-size:12.5px;color:#fff;text-shadow:0 1px 2px rgba(0,45,10,.55);white-space:nowrap}
.petbar .pb-h b{font-family:var(--display);font-size:14px;color:#ffe066;font-variant-numeric:tabular-nums}
/* Daily pats: a row of hearts (one per pat the pet asks for today) with the
   Silitä button living in the same card. */
.hearts{display:flex;justify-content:center;gap:7px;margin:3px 0 1px}
.heart{font-size:24px;line-height:1;filter:grayscale(.3) opacity(.55);transition:filter .2s}
.heart.on{filter:none;text-shadow:0 2px 6px rgba(40,160,60,.5)}
.heart.pop{animation:heartpop .5s var(--ease-back)}
@keyframes heartpop{0%{transform:scale(.3)}55%{transform:scale(1.45) rotate(8deg)}100%{transform:scale(1)}}
.petbar.pats .btn{width:100%;margin-top:10px}
/* Cooldown lock: greyed but still tappable, so the refusal (error sound +
   shake, see Pet._pat) can play — a real `disabled` would swallow the tap. */
#petPat.locked{filter:saturate(.45) brightness(.92);opacity:.8;cursor:default}
#petPat.deny{animation:shake .35s ease}