/* EkoVille — intro wizard + settings sheet.
   Split of the old styles.css; index.html loads these in order (cascade order matters). */

/* ============================== Intro ============================== */
.intro{text-align:center}
/* The cover is the biggest block on this sheet. It is capped against the
   viewport so the start button stays reachable — but by SCALING, never cropping:
   `object-fit:cover` cut the artwork in half on a short phone. The width cap is
   the height cap times the image's own 4:3 ratio, so the whole picture is always
   visible. Width never exceeds 100% of the panel's content box: a wider value
   overflowed the panel's `overflow-x:hidden` and clipped the right edge. */
.intro .cover{display:block;height:auto;border-radius:22px;
  width:min(100%, calc(38vh * 1.333));
  margin:-20px auto 12px}
.stepwrap{animation:stepin .32s var(--ease-out) both}
@keyframes stepin{from{opacity:0;transform:translateX(16px)}to{opacity:1;transform:none}}
.steps{display:flex;justify-content:center;gap:7px;margin:0 0 12px}
.steps .dot{width:9px;height:9px;border-radius:99px;background:rgba(255,255,255,.45);transition:width .25s,background .25s}
.steps .dot.on{width:24px;background:linear-gradient(90deg,var(--gold-1),var(--gold-2));box-shadow:0 0 8px rgba(255,200,60,.7)}
/* Intro "welcome back" counters: sticker icon + big number, one accent per stat.
   Scoped to .bstat so the Dex .statcard grid keeps its own plainer look. */
.backstats{display:grid;grid-template-columns:1fr 1fr 1fr;gap:9px 8px;margin:16px 0 2px}
.bstat{position:relative;padding:26px 6px 11px;border-radius:20px;border:3px solid #fff;text-align:center;
  background:linear-gradient(180deg,#fff,var(--c-bg));
  box-shadow:inset 0 2px 0 #fff,0 5px 0 var(--c-edge),0 9px 16px rgba(20,60,30,.28);
  animation:bstatin .42s var(--ease-back) both}
.bstat.lv{--c-bg:#eaffe2;--c-edge:#9fd894;--c-ink:#2f8a3c;--c-glow:rgba(62,193,60,.5)}
.bstat.xp{--c-bg:#fff5d9;--c-edge:#eccb7a;--c-ink:#d9820a;--c-glow:rgba(255,176,40,.55)}
.bstat.km{--c-bg:#e6f6ff;--c-edge:#96cbea;--c-ink:#1f7fbf;--c-glow:rgba(46,160,234,.5)}
/* Row two of the record. Same card as the big three — the three without their
   own sprite carry an emoji instead, sized to sit where a .bicon would. */
.bstat.sorted{--c-bg:#e8ffe6;--c-edge:#8fd68c;--c-ink:#2b8a4a;--c-glow:rgba(62,193,60,.45)}
.bstat.shiny{--c-bg:#e2fbff;--c-edge:#8bd8e8;--c-ink:#0d7f99;--c-glow:rgba(18,198,232,.5)}
.bstat.streak{--c-bg:#ffeceb;--c-edge:#f0a9a2;--c-ink:#c23f34;--c-glow:rgba(255,61,99,.4)}
.bemo{position:absolute;top:-15px;left:50%;transform:translateX(-50%);font-size:27px;line-height:1;
  filter:drop-shadow(0 3px 5px rgba(20,60,30,.35));animation:bfloat 3.2s ease-in-out infinite}
.bstat:nth-child(2){animation-delay:.06s}
.bstat:nth-child(3){animation-delay:.12s}
.bstat:nth-child(4){animation-delay:.18s}
.bstat:nth-child(5){animation-delay:.24s}
.bstat:nth-child(6){animation-delay:.3s}
.bstat:nth-child(4) .bemo{animation-delay:.3s}
.bstat:nth-child(5) .bemo{animation-delay:.7s}
.bstat:nth-child(6) .bemo{animation-delay:1.1s}
@keyframes bstatin{from{opacity:0;transform:translateY(10px) scale(.9)}to{opacity:1;transform:none}}
/* icon sticker straddles the top edge of the card */
/* cropped sprites are no longer square — pin the height, let width follow */
.bicon{position:absolute;top:-18px;left:50%;transform:translateX(-50%);height:42px;width:auto;
  filter:drop-shadow(0 3px 5px rgba(20,60,30,.35));animation:bfloat 3.2s ease-in-out infinite}
.bstat:nth-child(2) .bicon{animation-delay:.4s}
.bstat:nth-child(3) .bicon{animation-delay:.8s}
@keyframes bfloat{0%,100%{transform:translateX(-50%) translateY(0)}50%{transform:translateX(-50%) translateY(-3px)}}
.bval{font-family:var(--display);font-weight:800;font-size:27px;line-height:1;color:var(--c-ink);
  font-variant-numeric:tabular-nums;text-shadow:0 1px 0 #fff,0 0 12px var(--c-glow)}
.blab{margin-top:3px;font-size:10.5px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:var(--c-ink);opacity:.75}
.bsub{margin-top:2px;font-size:10px;font-weight:700;color:var(--muted);line-height:1.15;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
@media (max-width:360px){.bval{font-size:23px}.bicon{height:34px;top:-14px}.bstat{padding-top:22px}}
/* Short screens: two rows of cards plus a cover is a lot of sheet. Everything
   shrinks together so the start button stays above the fold — measured against
   360x640 and 360x568, where it was otherwise ~70-110px below it. */
@media (max-height:700px){
  .intro .cover{width:min(100%, calc(21vh * 1.333));margin-bottom:9px}
  .intro .lead{font-size:25px;margin-bottom:4px}
  .backstats{margin:11px 0 2px;gap:7px}
  .bstat{padding:19px 4px 7px}
  .bval{font-size:21px}
  .blab{font-size:9.5px;letter-spacing:.06em}
  .bsub{font-size:9px}
  .bicon{height:30px;top:-12px}
  .bemo{font-size:22px;top:-12px}
}
.intronav{display:flex;gap:9px;margin-top:16px}
.intronav .btn{margin-top:0}
.intronav .btn.ghost{width:auto;flex:none;padding-left:18px;padding-right:18px}
.intronav .btn:not(.ghost){flex:1}
/* How-to steps: dark card on the green sheet, white outlined text. */
.howto{text-align:left;display:grid;gap:8px;margin:0 0 4px}
.howto div{display:flex;gap:11px;font-size:14px;font-weight:600;align-items:center;color:#eafff0;line-height:1.35;text-shadow:0 1px 2px rgba(0,45,10,.5);background:rgba(8,58,16,.32);border:2px solid rgba(255,255,255,.45);border-radius:14px;padding:8px 11px}
.howto .n{width:28px;height:28px;border-radius:10px;color:#fff;font-family:var(--display);font-weight:800;font-size:14px;display:grid;place-items:center;flex:none;border:2px solid #fff;box-shadow:0 2px 5px rgba(0,40,10,.3)}
/* Keyed by step number (.c1….c6), not by position: the how-to is paged two at a
   time, so :nth-child restarted the palette on every page. */
.howto .n.c1{background:linear-gradient(180deg,var(--green-1),var(--green-2))}
.howto .n.c2{background:linear-gradient(180deg,var(--blue-1),var(--blue-2))}
.howto .n.c3{background:linear-gradient(180deg,var(--gold-1),var(--gold-2));color:var(--gold-t)}
.howto .n.c4{background:linear-gradient(180deg,var(--purple-1),var(--purple-2))}
.howto .n.c5{background:linear-gradient(180deg,var(--red-1),var(--red-2))}
.howto .n.c6{background:linear-gradient(180deg,var(--shiny-1),var(--shiny-2))}
.intro .lead{font-family:var(--display);font-weight:800;font-size:30px;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);margin:0 0 6px}
/* Gold, not white: the welcome-back greeting sits on the panel's own green
   sunburst, where white reads as just more panel. Scoped to `.gold` so the
   new-player headings keep the plain white treatment. */
.intro .lead.gold{color:#ffe066}
.intro .sub{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)}
/* "Näin peli toimii:" is the banner over the how-to, not body copy — it gets the
   game's sticker-text treatment (gold fill, dark outline) so it carries the
   screen on the pages where the big white lead is not repeated. */
.intro .howsub{font-family:var(--display);font-weight:800;font-size:25px;line-height:1.15;letter-spacing:-.01em;
  color:#ffe066;-webkit-text-stroke:2.5px var(--ink-line);paint-order:stroke fill;
  text-shadow:0 3px 5px rgba(0,45,10,.45);margin:0 0 14px;animation:howsubin .38s var(--ease-back) both}
@keyframes howsubin{from{transform:scale(.82) translateY(-4px);opacity:0}to{transform:none;opacity:1}}
.field{text-align:left;margin:0 0 6px}
.field-label{display:flex;align-items:center;gap:6px;font-weight:800;font-size:13px;color:#fff;margin:0 0 7px;text-shadow:0 1px 2px rgba(0,45,10,.5)}
.field-label .req{color:#ffe066;font-weight:800}
.inputwrap{position:relative}
.inputwrap>svg{position:absolute;left:14px;top:50%;transform:translateY(-50%);width:19px;height:19px;color:var(--green-2);pointer-events:none;z-index:1}
.inputwrap .namefield{padding-left:42px}

/* ============================== Settings ============================== */
.field-lab{display:block;text-align:left;font-weight:800;font-size:13px;color:#fff;margin:14px 0 6px;text-shadow:0 1px 2px rgba(0,45,10,.5)}
.field-lab:first-of-type{margin-top:4px}
.namefield{width:100%;border:3px solid #fff;background:linear-gradient(180deg,#ffffff,#f4f7ff);border-radius:15px;padding:13px 15px;font-family:var(--body);font-size:16px;font-weight:700;color:var(--ink);box-shadow:inset 0 2px 4px rgba(80,70,110,.14)}
.namefield:focus{outline:none;border-color:var(--gold-1);box-shadow:inset 0 2px 4px rgba(80,70,110,.14),0 0 0 3px rgba(255,200,60,.55)}
.tracks{display:grid;gap:8px}
.trackopt{display:flex;align-items:center;gap:11px;border:3px solid #fff;background:linear-gradient(180deg,#ffffff,#eef4ff);border-radius:15px;padding:12px 14px;cursor:pointer;font-family:var(--body);font-size:15px;font-weight:700;color:var(--ink);text-align:left;width:100%;
  box-shadow:inset 0 2px 0 #fff,0 4px 0 rgba(150,150,190,.3);transition:transform .1s var(--ease-out),box-shadow .1s}
.trackopt:active{transform:translateY(3px);box-shadow:inset 0 2px 0 #fff,0 1px 0 rgba(150,150,190,.3)}
.trackopt svg{width:18px;height:18px;color:var(--muted);flex:none}
.trackopt.active{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)}
.trackopt.active svg{color:var(--gold-t)}
.trackopt .chk{margin-left:auto;color:var(--gold-t);font-weight:800;opacity:0}
.trackopt.active .chk{opacity:1}
.toggle-row{display:flex;align-items:center;gap:10px;margin-top:8px}
.toggle-row .tlab{font-weight:800;font-size:14px;color:#fff;text-shadow:0 1px 2px rgba(0,45,10,.5)}
.switch{margin-left:auto;width:54px;height:30px;border-radius:999px;background:rgba(0,50,0,.32);border:2px solid rgba(255,255,255,.7);position:relative;cursor:pointer;transition:background .2s;flex:none;box-shadow:inset 0 1px 3px rgba(0,40,0,.35)}
.switch.on{background:linear-gradient(180deg,var(--gold-1),var(--gold-2));border-color:#fff}
.switch::after{content:"";position:absolute;top:2px;left:2px;width:22px;height:22px;border-radius:50%;background:#fff;box-shadow:0 2px 4px rgba(0,0,0,.28);transition:transform .2s var(--ease-back)}
.switch.on::after{transform:translateX(24px)}