/* EkoVille — theme tokens + page layout.
   Split of the old styles.css; index.html loads these in order (cascade order matters). */

/* ============================================================================
   EkoVille — UI system aligned with Kaatopaikka Saga.
   Design language: bright "candy-plastic" casual game.
   Thick light rims, glossy tops, chunky 3D press, sticker text
   (white fill + dark-green outline on colour, plain dark ink on light cards).
   ========================================================================== */

/* ============================== Theme tokens ============================== */
:root{
  /* candy ramps (shared with the Saga build) */
  --gold-1:#ffe680;--gold-2:#ffb028;--gold-d:#d97d0c;--gold-t:#7a4400;
  --green-1:#93f27a;--green-2:#3ec13c;--green-d:#268a24;
  --red-1:#ff92a6;--red-2:#ff3d63;--red-d:#cf1f47;
  --blue-1:#79d6ff;--blue-2:#2ea0ea;--blue-d:#1a6fb2;
  --purple-1:#cfa4ff;--purple-2:#9a53ec;--purple-d:#6b2fb0;
  /* Shiny (rare variant) owns its OWN ramp on purpose. Gold is the game's
     everyday colour — XP bar, reward pill, evolved ★, level-up card, Rinki
     bonus — so a gold shiny just read as "one more gold thing". Cyan is used
     nowhere else, so it means exactly one thing on screen. Change these four
     values to recolour every shiny surface at once. */
  --shiny-1:#a9f4ff;--shiny-2:#12c6e8;--shiny-d:#0086a8;--shiny-t:#00404f;
  --sky-1:#57c4ff;--sky-2:#b9e8ff;

  /* legacy names kept so existing markup keeps resolving */
  --pine:#2f9e54;--pine-2:#3ec13c;--mint:#c6ffb0;--mint-deep:#3ec13c;
  --ink:#37264a;--muted:#7d6b8e;--card:#ffffff;
  --sky:#BFE1F2;--sky-deep:#8FC4E5;--peach:#FFD8C4;--lav:#E0D4F4;--lemon:#FBEFC2;--blush:#FAD4E2;

  /* ONE text theme: on colour -> white fill + dark outline + soft shadow,
     on light -> plain dark ink, no outline. Outlines only on text >=14px;
     an outline fuses small glyphs and makes numbers unreadable. */
  --ink-line:#1b5c22;
  --drop:0 2px 3px rgba(0,45,10,.5);

  --ease-out:cubic-bezier(.22,1,.36,1);
  --ease-back:cubic-bezier(.34,1.7,.5,1);

  --display:Fredoka,system-ui,-apple-system,"Segoe UI",sans-serif;
  --body:Fredoka,system-ui,-apple-system,"Segoe UI",sans-serif;
}

/* ============================== Base / layout ============================== */
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{margin:0}
body{font-family:var(--body);font-weight:600;background:linear-gradient(180deg,var(--sky-1) 0%,var(--sky-2) 48%,#cdf0b4 100%);color:var(--ink);min-height:100vh;display:flex;align-items:flex-start;justify-content:center;padding:24px 12px;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased}
@media (max-width:480px){body{padding:0}}
.phone{width:100%;max-width:430px;height:min(860px,100vh);height:min(860px,100dvh);background:#bfe9ff;border-radius:34px;overflow:hidden;position:relative;box-shadow:0 30px 70px -20px rgba(40,70,50,.5);user-select:none}
@media (max-width:480px){.phone{border-radius:0;height:100vh;height:100dvh}}
#map{position:absolute;inset:0;background:#cfe3ea}
.leaflet-div-icon{background:transparent!important;border:none!important}
.leaflet-container{font-family:var(--body)}
.leaflet-control-attribution{font-size:8px;background:rgba(255,255,255,.4);color:#5a6b60;padding:0 4px}
.leaflet-control-attribution a{color:#5a6b60}