/* PokeGrass — UI over a full-screen 3D world. Handheld-console look: bold rounded type, white glossy panels,
   thick soft shadows, bright grass-green primary, gold for legendaries. */
:root {
  --ink: #15233b;
  --ink2: #34465f;
  --muted: #4b5b73;
  --paper: #ffffff;
  --paper2: #f2f7ff;
  --line: #dbe6f5;
  --leaf: #2fbf57;
  --leaf2: #1c9a43;
  --leaf3: #0f6e2f;
  --lime: #b9f24a;
  --sky: #5fb8ff;
  --sky2: #2f8cf0;
  --sun: #ffc72c;
  --sun2: #e59b00;
  --berry: #ff4f6d;
  --violet: #8e44ec;
  /* glass: the world stays visible through every panel; the backdrop is only lightly blurred and brightened, so
     dark text stays readable over dark woods as well as over bright snow */
  --glass: rgba(255, 255, 255, 0.58);
  --glass-hud: rgba(255, 255, 255, 0.32);
  --glass-lite: rgba(255, 255, 255, 0.24);
  --glass-strong: rgba(255, 255, 255, 0.72);
  --glass-line: rgba(255, 255, 255, 0.6);
  --blur: blur(6px) saturate(1.3) brightness(1.38);
  --blur-page: blur(12px) saturate(1.12) brightness(1.16);
  --halo: 0 0 4px rgba(255, 255, 255, 0.85);
  --shadow-soft: 0 8px 24px rgba(20, 45, 90, 0.13), 0 1px 3px rgba(20, 45, 90, 0.08);
  --shadow: 0 10px 30px rgba(20, 45, 90, 0.16), 0 2px 6px rgba(20, 45, 90, 0.08);
  --r: 22px;
  --display: "Baloo 2", "Nunito", system-ui, sans-serif;
  --body: "Nunito", system-ui, -apple-system, sans-serif;
}
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; background: #bfe4ff; color: var(--ink); font: 600 16px/1.5 var(--body); -webkit-font-smoothing: antialiased; }
body { overflow: hidden; }
a { color: inherit; }
button { font: inherit; color: inherit; cursor: pointer; }
img { max-width: 100%; }
[hidden] { display: none !important; }
.muted { color: var(--muted); }
#gl { position: fixed; inset: 0; width: 100vw; height: 100vh; display: block; z-index: 0; touch-action: none; }

/* ---------- the name ---------- */
/* Pato's own wordmark, as it is: one picture, sized by its height wherever it goes. */
.logo-img { display: block; height: auto; width: auto; }
.top-word { height: 52px; filter: drop-shadow(0 2px 3px rgba(8, 30, 14, 0.5)); }
.boot-word { height: clamp(64px, 13vw, 120px); filter: drop-shadow(0 3px 0 rgba(8, 30, 14, 0.5)) drop-shadow(0 10px 22px rgba(8, 30, 14, 0.55)); }
.hero-word { margin: 0.05em 0 0.16em; display: flex; justify-content: center; }
.hero-word .logo-img { height: clamp(48px, 9.5vw, 132px); filter: drop-shadow(0 4px 0 rgba(8, 30, 14, 0.45)) drop-shadow(0 14px 26px rgba(8, 30, 14, 0.55)); }
.foot-word { height: 42px; margin: 0 auto; }

/* ---------- boot ----------
   The 3D loader draws in the main canvas (js/boot.js); this layer holds the logo, the progress and the tips.
   Before the scripts run, a sky gradient stands in so the page is never blank. */
#boot { position: fixed; inset: 0; z-index: 100; display: grid; place-items: end center; padding-bottom: 12vh; pointer-events: none;
  background: linear-gradient(180deg, #5fb3ff 0%, #a9dcff 55%, #dff3ff 100%); transition: opacity 0.9s ease, visibility 0.9s; }
body.boot3d #boot { background: transparent; }
body:not(.booting) #boot { opacity: 0; visibility: hidden; }
body.booting #top, body.booting #screens { opacity: 0; pointer-events: none; }
#top, #screens { transition: opacity 0.8s ease 0.2s; }
.boot-in { text-align: center; display: grid; justify-items: center; gap: 16px; animation: bootIn 0.9s cubic-bezier(0.2, 1.1, 0.3, 1) both; }
@keyframes bootIn { from { opacity: 0; transform: translateY(18px) scale(0.96); } }
/* the mark: on the loading curtain it floats, in the top bar it sits beside the name, on the home page above it */
@keyframes markFloat { 0%, 100% { transform: translateY(0) rotate(-1.5deg); } 50% { transform: translateY(-10px) rotate(1.5deg); } }
.hero-mark { width: clamp(150px, 26vw, 260px); height: auto; margin: 0 auto -6px; display: block; filter: drop-shadow(0 18px 28px rgba(10, 50, 25, 0.35)); animation: markFloat 4.2s ease-in-out infinite; }
@media (prefers-reduced-motion: reduce) { .hero-mark { animation: none; } }
.boot-bar { position: relative; width: min(320px, 70vw); height: 14px; border-radius: 99px; background: rgba(255, 255, 255, 0.45); backdrop-filter: var(--blur); -webkit-backdrop-filter: var(--blur);
  box-shadow: inset 0 1px 3px rgba(10, 40, 80, 0.18), 0 0 0 1px rgba(255, 255, 255, 0.7); overflow: hidden; }
.boot-bar i { display: block; height: 100%; width: 6%; border-radius: 99px; background: linear-gradient(90deg, #3fd26a, #b9f24a); box-shadow: 0 0 14px rgba(185, 242, 74, 0.8); transition: width 0.35s ease; }
.boot-bar b { position: absolute; inset: 0; display: grid; place-items: center; font: 800 10px var(--display); color: #0f4a26; letter-spacing: 0.08em; }
.boot-tip { margin: 0; padding: 7px 16px; border-radius: 99px; background: rgba(255, 255, 255, 0.5); backdrop-filter: var(--blur); -webkit-backdrop-filter: var(--blur);
  font: 800 15px var(--display); color: var(--leaf3); box-shadow: var(--shadow-soft); transition: opacity 0.3s; }

/* ---------- header ----------
   Light frosted glass: the world stays visible behind the bar, the bar stays readable. */
/* under the top bar, a band of frosted glass fades out whatever a page scrolls beneath it (shown once the page scrolls) */
#topfade { position: fixed; top: 0; left: 0; right: 0; height: 88px; z-index: 19; pointer-events: none; opacity: 0; transition: opacity 0.3s;
  backdrop-filter: blur(12px) saturate(1.1); -webkit-backdrop-filter: blur(12px) saturate(1.1); background: linear-gradient(rgba(255, 255, 255, 0.28), rgba(255, 255, 255, 0));
  -webkit-mask-image: linear-gradient(#000 42%, transparent); mask-image: linear-gradient(#000 42%, transparent); }
body.scrolled:not([data-view="play"]) #topfade { opacity: 1; }
#top { position: fixed; top: 12px; left: 14px; right: 14px; z-index: 20; display: flex; align-items: center; gap: 14px; pointer-events: none; }
#top > * { pointer-events: auto; }
.brand { text-decoration: none; padding: 4px; display: inline-flex; align-items: center; gap: 8px; flex: none; }
/* the name is a picture: it must never be squeezed by the bar, or the P loses its side */
.brand .logo-img { flex: none; width: auto; max-width: none; object-fit: contain; }

.glassy, #nav, .icon-btn, .balls-hud { background: rgba(255, 255, 255, 0.46); backdrop-filter: var(--blur); -webkit-backdrop-filter: var(--blur); box-shadow: var(--shadow-soft), inset 0 0 0 1px var(--glass-line); }
#nav { margin: 0 auto; display: flex; gap: 2px; padding: 4px; border-radius: 99px; }
#nav a { position: relative; font: 700 15px var(--display); text-decoration: none; padding: 6px 13px; border-radius: 99px; color: var(--ink2); transition: background 0.2s, color 0.2s; }
#nav a:hover { background: rgba(255, 255, 255, 0.6); color: var(--ink); }
#nav a.on { background: linear-gradient(rgba(86, 196, 96, 0.34), rgba(22, 104, 44, 0.62)), url("/brand/grass-fill.webp") center / auto 240px; color: #fff;
  text-shadow: 0 1px 0 rgba(6, 34, 14, 0.5); box-shadow: 0 2px 0 var(--leaf3), 0 4px 10px rgba(15, 110, 47, 0.25); }
body[data-view="play"] #nav, body[data-view="play"] .icon-btn, body[data-view="play"] .balls-hud { background: var(--glass-lite); }
.top-right { display: flex; align-items: center; gap: 8px; flex: 0 1 auto; min-width: 0; }
.top-right .btn { min-width: 0; }
.x-btn { text-decoration: none; }
.x-btn svg { width: 17px; height: 17px; fill: var(--ink); }
.x-btn.soon { opacity: 0.55; cursor: default; }
.balls-hud { border: 0; cursor: pointer; }
.balls-hud:hover { filter: brightness(1.06); }
.icon-btn { width: 40px; height: 40px; border-radius: 50%; border: 0; display: grid; place-items: center; font-size: 17px; transition: background 0.2s, transform 0.15s; }
.icon-btn:hover { background: rgba(255, 255, 255, 0.7); }
.icon-btn:active { transform: scale(0.94); }
#mute::before { content: "⚙️"; font-size: 17px; }
.burger { display: none; gap: 4px; padding: 0; align-content: center; justify-content: center; }
.burger i { display: block; width: 18px; height: 2.5px; background: var(--ink); border-radius: 2px; }
.balls-hud { display: flex; gap: 8px; padding: 6px 12px; border-radius: 99px; font: 800 14px var(--display); color: var(--ink); }
.balls-hud span { display: flex; align-items: center; gap: 4px; }
#trainer-btn { padding: 8px 16px; font-size: 15px; }
.nav-dot.on-dot::after, .nav-prize::after { content: ""; position: absolute; right: 5px; top: 5px; width: 7px; height: 7px; border-radius: 50%; background: var(--sun); box-shadow: 0 0 0 2px #fff; }
.nav-dot.on-dot::after { background: var(--berry); }
.settings { position: fixed; top: 62px; right: 14px; z-index: 45; width: 260px; padding: 14px; border-radius: 20px; background: var(--glass-strong); backdrop-filter: var(--blur); -webkit-backdrop-filter: var(--blur); box-shadow: 0 16px 40px rgba(20, 45, 90, 0.22), inset 0 0 0 1px var(--glass-line); display: grid; gap: 10px; animation: pop 0.25s both; }
.settings h4 { margin: 0; font: 800 16px var(--display); }
.settings label { display: flex; align-items: center; justify-content: space-between; gap: 10px; font: 700 14px var(--body); color: var(--ink2); }
.settings .seg { margin: 0; }
.switch { appearance: none; width: 42px; height: 24px; border-radius: 99px; background: #cfd9e8; position: relative; cursor: pointer; transition: background 0.2s; flex: none; }
.switch::after { content: ""; position: absolute; left: 3px; top: 3px; width: 18px; height: 18px; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3); transition: transform 0.2s; }
.switch:checked { background: var(--leaf); } .switch:checked::after { transform: translateX(18px); }

/* ball icons (CSS) */
.bi { display: inline-block; width: 18px; height: 18px; border-radius: 50%; position: relative; flex: none;
  background: linear-gradient(180deg, var(--bc) 0 47%, #1a2330 47% 53%, #f4f6fb 53%); box-shadow: inset 0 -2px 3px rgba(0, 0, 0, 0.2), 0 1px 2px rgba(0, 0, 0, 0.25); }
.bi::after { content: ""; position: absolute; left: 50%; top: 50%; width: 32%; height: 32%; transform: translate(-50%, -50%); border-radius: 50%; background: #fff; box-shadow: 0 0 0 1.5px #1a2330; }
.bi-ball { --bc: #39c25a; } .bi-super { --bc: #2f7cf6; } .bi-hyper { --bc: #8e44ec; } .bi-hood { --bc: #f4b400; }

/* ---------- buttons ---------- */
/* Every green surface is made of the same grass as the letters of GRASS: the texture, with a green tint over it so
   the white text stays readable, and the same little step of shadow underneath. */
.grassy-fill { background: linear-gradient(rgba(86, 196, 96, 0.34), rgba(22, 104, 44, 0.62)), url("/brand/grass-fill.webp") center / auto 260px; }
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; border: 0; text-decoration: none; font: 800 17px var(--display); color: #fff; padding: 10px 22px; border-radius: 99px;
  background: linear-gradient(rgba(86, 196, 96, 0.34), rgba(22, 104, 44, 0.62)), url("/brand/grass-fill.webp") center / auto 260px;
  text-shadow: 0 1px 0 rgba(6, 34, 14, 0.55), 0 2px 7px rgba(6, 34, 14, 0.45);
  box-shadow: 0 4px 0 var(--leaf3), 0 10px 20px rgba(15, 110, 47, 0.3); transition: transform 0.12s ease, box-shadow 0.12s ease, filter 0.2s; white-space: nowrap; }
.btn:hover { filter: brightness(1.05); transform: translateY(-1px); }
.btn:active { transform: translateY(3px); box-shadow: 0 1px 0 var(--leaf3), 0 4px 10px rgba(15, 110, 47, 0.3); }
.btn.big { font-size: 21px; padding: 14px 30px; }
.btn.small { font-size: 15px; padding: 8px 16px; }
.btn.ghost { color: var(--ink); text-shadow: none; background: linear-gradient(180deg, #fff, #eef4fc); box-shadow: 0 4px 0 #c9d6ea, 0 10px 20px rgba(20, 45, 90, 0.14); }
.btn.gold { color: #3a2600; text-shadow: none; background: linear-gradient(180deg, #ffe07a, var(--sun) 55%, var(--sun2)); box-shadow: 0 4px 0 #a86f00, 0 10px 20px rgba(165, 110, 0, 0.3); }
.btn:disabled { filter: grayscale(0.8) opacity(0.6); cursor: not-allowed; transform: none; }
#trainer-btn.named { color: var(--ink); background: linear-gradient(180deg, #fff, #eef4fc); box-shadow: 0 3px 0 #c9d6ea, var(--shadow); }

/* ---------- screens ---------- */
#screens { position: fixed; inset: 0; z-index: 5; pointer-events: none; }
.screen { position: absolute; inset: 0; opacity: 0; visibility: hidden; transition: opacity 0.45s ease, visibility 0.45s; }
.screen.on { opacity: 1; visibility: visible; }
/* Who takes the mouse: pages take it all; on the play screen only the HUD pieces do (everything else goes to the 3D
   world, so dragging turns the camera and clicking walks). Hidden screens take nothing. */
.page { overflow-y: auto; -webkit-overflow-scrolling: touch; pointer-events: auto; }
.screen:not(.on), .screen:not(.on) * { pointer-events: none !important; }
[data-screen="play"] > .play-hud > *, [data-screen="play"] > .hud-right > *, [data-screen="play"] > .joy, [data-screen="play"] > .coach { pointer-events: auto; }
.page-in { max-width: 1180px; margin: 0 auto; padding: 96px 20px 60px; display: grid; gap: 22px; align-content: start; }
.page-in.two { grid-template-columns: 1.3fr 1fr; align-items: start; }
.page-head h1, .page-head h2 { margin: 0; }
h1, h2, h3 { font-family: var(--display); line-height: 1.05; margin: 0 0 10px; color: var(--ink); }
h1 { font-size: 46px; }
h2 { font-size: 30px; }
h3 { font-size: 21px; }
.page-head { background: var(--glass); backdrop-filter: var(--blur-page); -webkit-backdrop-filter: var(--blur-page); border-radius: var(--r); padding: 22px 26px; box-shadow: var(--shadow); }
.panel { background: var(--glass); backdrop-filter: var(--blur-page); -webkit-backdrop-filter: var(--blur-page); border-radius: var(--r); padding: 24px 26px; box-shadow: var(--shadow); }
.panel-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.seg { display: inline-flex; gap: 4px; margin-top: 14px; padding: 4px; border-radius: 99px; background: var(--paper2); }
.seg button { border: 0; background: transparent; font: 700 15px var(--display); padding: 6px 14px; border-radius: 99px; color: var(--ink2); }
.seg button.on { background: #fff; color: var(--ink); box-shadow: 0 2px 6px rgba(20, 45, 90, 0.15); }

/* ---------- home ---------- */
[data-screen="home"] { overflow-y: auto; pointer-events: auto; }
.hero { min-height: 100vh; display: grid; place-items: center; padding: 90px 20px 40px; text-align: center; }
.hero-in { max-width: 860px; }
@keyframes live { 70% { box-shadow: 0 0 0 9px rgba(255, 59, 48, 0); } 100% { box-shadow: 0 0 0 0 rgba(255, 59, 48, 0); } }
.hero-sub { margin: 0 auto 26px; max-width: 640px; font-size: 20px; line-height: 1.5; color: var(--ink); background: var(--glass); backdrop-filter: blur(10px); padding: 14px 22px; border-radius: 18px; box-shadow: var(--shadow); }
.hero-cta { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; }
.hero-stats { display: flex; gap: 10px; justify-content: center; margin-top: 22px; flex-wrap: wrap; }
.hero-stats div { background: var(--glass); backdrop-filter: blur(10px); border-radius: 16px; padding: 8px 16px; box-shadow: var(--shadow); font: 700 14px var(--body); color: var(--ink2); }
.hero-stats .live-now { background: linear-gradient(rgba(86, 196, 96, 0.34), rgba(22, 104, 44, 0.62)), url("/brand/grass-fill.webp") center / auto 200px; color: #fff; text-shadow: 0 1px 0 rgba(6, 34, 14, 0.5); }
.hero-stats .live-now b { color: #fff; }
.hero-stats b { display: block; font: 800 24px/1.1 var(--display); color: var(--ink); }
.ca-pill { display: inline-flex; align-items: center; gap: 10px; margin-top: 18px; padding: 8px 8px 8px 16px; border-radius: 99px; background: #fff; box-shadow: var(--shadow); font: 700 14px var(--body); }
.ca-pill code { font: 700 13px ui-monospace, Menlo, monospace; color: var(--ink2); }
.ca-pill.wide { display: flex; justify-content: space-between; margin: 0; }
.home-panels { max-width: 1180px; margin: 0 auto; padding: 0 20px 40px; display: grid; gap: 22px; }
.steps { display: grid; grid-template-columns: repeat(4, 1fr); gap: 28px 14px; margin-top: 14px; } /* room for each step's number badge */
.step { background: #fff; border-radius: 18px; padding: 18px; box-shadow: 0 3px 0 var(--line); position: relative; }
.step b { position: absolute; top: -12px; left: 16px; width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; color: #fff; font: 800 18px var(--display);
  background: linear-gradient(rgba(86, 196, 96, 0.34), rgba(22, 104, 44, 0.62)), url("/brand/grass-fill.webp") center / auto 200px; text-shadow: 0 1px 0 rgba(6, 34, 14, 0.5); box-shadow: 0 3px 0 var(--leaf3); }
.step h3 { margin-top: 14px; }
.step p { margin: 0; color: var(--ink2); font-size: 15px; }
.card-row { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 12px; margin: 12px 0 18px; }
.timer { font: 700 15px var(--display); color: var(--muted); }
.evo-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin: 8px 0 12px; }
.evo-row .mon { background: #fff; }
.foot { text-align: center; padding: 30px 20px 10px; color: var(--ink2); font-size: 14px; }
.foot p { max-width: 560px; margin: 10px auto; background: var(--glass); padding: 10px 16px; border-radius: 14px; }
.foot-links { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; }

/* ---------- monster cards ---------- */
.grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(178px, 1fr)); gap: 14px; }
.mon { position: relative; background: var(--glass); backdrop-filter: blur(10px); border-radius: 20px; padding: 10px 12px 12px; box-shadow: var(--shadow); cursor: pointer; transition: transform 0.18s ease, box-shadow 0.18s; overflow: hidden; border: 2px solid transparent; text-align: left; }
.mon:hover { transform: translateY(-3px); box-shadow: 0 16px 34px rgba(20, 45, 90, 0.22); }
.mon .no { font: 800 13px var(--display); color: var(--muted); }
.mon .pic { height: 132px; display: grid; place-items: center; position: relative; margin: 2px -6px 4px; border-radius: 14px; background: radial-gradient(70% 55% at 50% 72%, rgba(95, 184, 255, 0.28), transparent 70%), linear-gradient(180deg, #e9f6ff, #f9fcff); overflow: hidden; }
.mon .pic::after { content: ""; position: absolute; left: 20%; right: 20%; bottom: 10px; height: 14px; border-radius: 50%; background: radial-gradient(closest-side, rgba(30, 60, 30, 0.28), transparent); }
.mon .pic img.th { height: 124px; width: auto; position: relative; z-index: 1; filter: drop-shadow(0 4px 4px rgba(0, 0, 0, 0.12)); }
.mon .pic .ph { width: 64px; height: 64px; border-radius: 50%; background: #dfeefd; animation: pulse 1.2s infinite ease-in-out; }
@keyframes pulse { 50% { opacity: 0.5; } }
.mon .coin { position: absolute; right: 8px; top: 8px; z-index: 2; width: 34px; height: 34px; border-radius: 50%; border: 3px solid #fff; box-shadow: 0 2px 6px rgba(0, 0, 0, 0.25); object-fit: cover; background: #fff; }
.mon .nm { font: 800 19px/1.1 var(--display); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mon .sub { font-size: 13px; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mon .tags { display: flex; gap: 5px; flex-wrap: wrap; margin-top: 6px; }
.type, .rar, .mc, .chip { display: inline-flex; align-items: center; font: 800 11.5px/1 var(--body); text-transform: uppercase; letter-spacing: 0.04em; padding: 5px 8px; border-radius: 99px; }
.type { color: #fff; background: var(--c, #888); box-shadow: inset 0 -2px 0 rgba(0, 0, 0, 0.18); text-shadow: 0 1px 0 rgba(0, 0, 0, 0.25); }
.rar { background: #eef3fa; color: var(--ink2); }
.rar.r-Uncommon { background: #e3f7ea; color: #127a3a; }
.rar.r-Rare { background: #e2efff; color: #1d5fc2; }
.rar.r-Epic { background: #f1e6ff; color: #6b2fc0; }
.rar.r-Legendary { background: linear-gradient(90deg, #ffe07a, #ffc72c); color: #5a3a00; }
.mc { background: #f4f6fa; color: var(--ink2); text-transform: none; }
.chip { background: var(--berry); color: #fff; }
.chip.ghost { background: linear-gradient(90deg, #9b6bff, #5b2bc4); } .chip.hot { background: #ff9500; } .chip.rare { background: #2f7cf6; } .chip.legend { background: linear-gradient(90deg, #ffc72c, #ff9500); } .chip.new { background: var(--berry); }
.mon .lv { position: absolute; left: 10px; top: 38px; z-index: 2; font: 800 15px var(--display); background: #fff; padding: 2px 9px; border-radius: 99px; box-shadow: 0 2px 5px rgba(0, 0, 0, 0.15); }
.mon.shiny { border-color: #ff9ef0; background: linear-gradient(160deg, rgba(255, 240, 252, 0.95), rgba(240, 250, 255, 0.92)); }
.mon.fainted .pic img.th { filter: grayscale(1) opacity(0.55); }
.mon.legendary { border-color: #ffd34d; }
.mon.owned .nm::after { content: ""; display: inline-block; vertical-align: 2px; margin-left: 6px; width: 14px; height: 14px; border-radius: 50%; background: linear-gradient(180deg, #39c25a 0 46%, #1a2330 46% 54%, #f4f6fb 54%); box-shadow: 0 1px 2px rgba(0, 0, 0, 0.3); }
.mon .disc { margin-top: 6px; font-size: 12px; color: var(--ink2); }
.mon .disc b { color: var(--leaf2); }
.empty { padding: 40px; text-align: center; color: var(--ink2); background: var(--glass); border-radius: var(--r); box-shadow: var(--shadow); }
#box-grid:empty { display: none; }
.grid > .empty { grid-column: 1 / -1; }

/* ---------- play ----------
   The HUD is light glass floating over the world: compact, collapsible, never a wall in front of the game. */
[data-screen="play"] { pointer-events: none; }
#tags { position: absolute; inset: 0; pointer-events: none; overflow: hidden; }
.tag { position: absolute; left: 0; top: 0; display: flex; align-items: center; gap: 5px; padding: 3px 9px 3px 3px; border-radius: 99px; background: rgba(255, 255, 255, 0.62); backdrop-filter: blur(10px) saturate(1.6); -webkit-backdrop-filter: blur(10px) saturate(1.6);
  box-shadow: 0 4px 12px rgba(20, 45, 90, 0.18), inset 0 0 0 1px rgba(255, 255, 255, 0.75); font: 800 13px var(--display); color: var(--ink); white-space: nowrap; pointer-events: auto; cursor: pointer; transform-origin: 50% 100%; transition: opacity 0.25s, background 0.2s; will-change: transform; }
.tag img { width: 22px; height: 22px; border-radius: 50%; object-fit: cover; background: #fff; }
.tag .chip { font-size: 9.5px; padding: 3px 6px; }
.tag.owned { opacity: 0.6; }
.tag.owned::after { content: "✓"; color: var(--leaf2); }
.tag:hover { background: rgba(255, 255, 255, 0.92); z-index: 5; }
.play-hud { position: absolute; left: 14px; top: 72px; display: grid; gap: 8px; width: 272px; pointer-events: none; }
.play-hud > * { pointer-events: auto; }
.hud-card { background: var(--glass-hud); backdrop-filter: var(--blur); -webkit-backdrop-filter: var(--blur); border-radius: 18px; padding: 8px; box-shadow: var(--shadow-soft), inset 0 0 0 1px var(--glass-line); }
.hud-head { display: flex; align-items: center; gap: 4px; }
.hud-toggle { flex: 1; min-width: 0; display: flex; align-items: baseline; gap: 6px; border: 0; background: transparent; padding: 4px 6px; border-radius: 12px; text-align: left; white-space: nowrap; }
.hud-toggle:hover { background: rgba(255, 255, 255, 0.45); }
.hud-toggle b { font: 800 16px var(--display); color: var(--ink); }
.hud-toggle span { font: 700 12.5px var(--body); color: var(--ink2); overflow: hidden; text-overflow: ellipsis; }
.hud-toggle .chev { margin-left: auto; align-self: center; width: 8px; height: 8px; border-right: 2.5px solid var(--ink2); border-bottom: 2.5px solid var(--ink2); transform: rotate(45deg) translateY(-2px); transition: transform 0.25s; flex: none; }
.hud-card.closed .chev { transform: rotate(-45deg); }
.hud-ic { flex: none; width: 34px; height: 34px; border: 0; border-radius: 12px; background: rgba(255, 255, 255, 0.55); box-shadow: inset 0 0 0 1px var(--glass-line); font-size: 16px; display: grid; place-items: center; transition: background 0.2s, transform 0.15s; }
.hud-ic:hover { background: rgba(255, 255, 255, 0.9); } .hud-ic:active { transform: scale(0.93); }
.hud-list { display: grid; gap: 2px; margin-top: 4px; max-height: min(42vh, 330px); overflow-y: auto; scrollbar-width: thin; transition: max-height 0.3s ease, margin 0.3s; }
.hud-card.closed .hud-list { max-height: 0; margin: 0; overflow: hidden; }
.hud-row { display: flex; align-items: center; gap: 7px; padding: 4px 6px; border-radius: 11px; cursor: pointer; border: 0; background: transparent; text-align: left; width: 100%; transition: background 0.15s; }
.hud-row:hover { background: rgba(255, 255, 255, 0.62); }
.hud-row img, .hud-row .q { width: 26px; height: 26px; border-radius: 50%; object-fit: cover; background: #fff; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.18); flex: none; }
.hud-row .s { font: 800 14px var(--display); color: var(--ink); flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hud-row .m { font: 700 11px var(--body); color: var(--ink2); width: 44px; text-align: right; flex: none; }
.hud-row .chip { font-size: 9.5px; padding: 3px 6px; flex: none; }
.hud-row.owned { opacity: 0.5; }
.hud-row.hidden-row .q { display: grid; place-items: center; font: 800 14px var(--display); color: #fff; background: linear-gradient(135deg, #6b7c99, #36415c); font-style: normal; }
.hud-row.hidden-row .s { color: var(--ink2); letter-spacing: 1px; }
.hud-buffs { display: flex; flex-wrap: wrap; gap: 4px; margin: 6px 2px 2px; }
.hud-buffs .buff { font: 800 10.5px var(--display); background: rgba(238, 243, 255, 0.85); color: #4a3fb0; border-radius: 99px; padding: 3px 8px; }
.chip.t-uncommon { background: #3aa655; } .chip.t-rare { background: #2f7cf6; } .chip.t-epic { background: linear-gradient(90deg, #a24dff, #6a2bd8); } .chip.t-legendary { background: linear-gradient(90deg, #ffc72c, #ff9500); }
/* one-line event pills */
.hud-events { display: grid; gap: 6px; }
.ev { display: flex; align-items: center; gap: 8px; width: 100%; min-height: 38px; border: 0; text-align: left; padding: 6px 12px 6px 6px; border-radius: 14px; background: var(--glass-hud); backdrop-filter: var(--blur); -webkit-backdrop-filter: var(--blur);
  box-shadow: var(--shadow-soft), inset 0 0 0 1px var(--glass-line); font: 700 12.5px var(--body); color: var(--ink2); cursor: pointer; transition: background 0.2s; }
.ev:hover { background: rgba(255, 255, 255, 0.72); }
.ev .ei { flex: none; width: 26px; height: 26px; border-radius: 9px; display: grid; place-items: center; font-size: 14px; background: var(--ec, #eef3fa); }
.ev .et { min-width: 0; flex: 1; line-height: 1.2; }
.ev .et b { display: block; font: 800 13.5px var(--display); color: var(--ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ev .et small { display: block; font: 700 11.5px var(--body); color: var(--ink2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ev-legend { --ec: linear-gradient(135deg, #ffe07a, #ffb400); }
.ev-legend.open { background: linear-gradient(135deg, rgba(255, 240, 180, 0.8), rgba(255, 207, 51, 0.72)); }
.ev-golden { --ec: linear-gradient(135deg, #fff3b0, #ffc933); }
.ev-golden.open { background: linear-gradient(135deg, rgba(255, 243, 176, 0.85), rgba(255, 184, 28, 0.75)); animation: goldpulse 1.4s ease-in-out infinite; }
@keyframes goldpulse { 50% { box-shadow: 0 0 0 5px rgba(255, 200, 40, 0.4), var(--shadow-soft); } }
.ev-feat { --ec: linear-gradient(135deg, #bfe6ff, #5fb8ff); }
.ev-ghost { --ec: linear-gradient(135deg, #b597ff, #6a3fd0); cursor: default; }
/* right column: minimap and missions */
.hud-right { position: absolute; right: 14px; top: 72px; width: 214px; display: grid; grid-template-columns: minmax(0, 1fr); gap: 8px; justify-items: end; pointer-events: none; }
.hud-right > * { pointer-events: auto; }
.minimap { position: relative; width: 150px; height: 150px; border-radius: 50%; cursor: pointer; background: var(--glass-lite); box-shadow: 0 6px 20px rgba(0, 0, 0, 0.2), 0 0 0 3px rgba(255, 255, 255, 0.75); transition: transform 0.2s; }
.minimap:hover { transform: scale(1.03); }
.minimap canvas { width: 100%; height: 100%; display: block; border-radius: 50%; }
.hud-missions { width: 100%; min-width: 0; overflow: hidden; background: var(--glass-hud); backdrop-filter: var(--blur); -webkit-backdrop-filter: var(--blur); border-radius: 16px; padding: 8px 10px; box-shadow: var(--shadow-soft), inset 0 0 0 1px var(--glass-line); }
.hud-missions:empty { display: none; }
.hm-head { display: flex; justify-content: space-between; align-items: center; gap: 6px; font: 800 13px var(--display); color: var(--ink); cursor: pointer; white-space: nowrap; } .hm-head small { overflow: hidden; text-overflow: ellipsis; }
.hm-head small { font: 700 11px var(--body); color: var(--ink2); }
.hm-row { margin-top: 6px; font: 700 11.5px var(--body); color: var(--ink2); }
.hm-row .hm-t { display: flex; justify-content: space-between; gap: 6px; } .hm-row .hm-t span:first-child { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .hm-row .hm-t span:last-child { flex: none; }
.hm-bar { height: 5px; border-radius: 99px; background: rgba(20, 45, 90, 0.12); margin-top: 3px; overflow: hidden; }
.hm-bar i { display: block; height: 100%; border-radius: 99px; background: linear-gradient(90deg, #3fd26a, #9be35a); transition: width 0.5s; }
.hm-row.done .hm-bar i { background: linear-gradient(90deg, #ffc72c, #ff9f1a); }
.hm-claim { margin-top: 6px; width: 100%; border: 0; border-radius: 10px; padding: 5px; font: 800 12.5px var(--display); color: #fff; background: linear-gradient(rgba(86, 196, 96, 0.34), rgba(22, 104, 44, 0.62)), url("/brand/grass-fill.webp") center / auto 200px; text-shadow: 0 1px 0 rgba(6, 34, 14, 0.5); box-shadow: 0 2px 0 var(--leaf3); }
body.encounter .hud-right, body.encounter .place-banner, body.encounter .play-hud, body.encounter #tags, body.encounter .play-hint, body.encounter #top { opacity: 0; pointer-events: none !important; }
.play-hud, .hud-right, #tags, .play-hint { transition: opacity 0.35s; }
.place-banner { position: absolute; left: 50%; top: 74px; transform: translate(-50%, -16px); opacity: 0; pointer-events: none; text-align: center; background: var(--glass-hud); backdrop-filter: var(--blur); -webkit-backdrop-filter: var(--blur);
  border-radius: 18px; padding: 8px 24px 10px; box-shadow: var(--shadow-soft), inset 0 0 0 1px var(--glass-line); transition: opacity 0.45s, transform 0.45s; }
.place-banner.in { opacity: 1; transform: translate(-50%, 0); }
.place-banner, .play-hint { pointer-events: none !important; } /* information only: never in the way of the mouse */
.place-banner small { display: block; font: 800 11px var(--body); color: var(--ink2); text-transform: uppercase; letter-spacing: 1.5px; }
.place-banner b { display: block; font: 800 26px/1.1 var(--display); color: var(--ink); }
.place-banner span { font: 700 12.5px var(--body); color: #1f7a3a; }
.event-pill { display: inline-flex; align-items: center; gap: 8px; margin: 0 auto 18px; padding: 9px 18px; border-radius: 999px; background: linear-gradient(135deg, #6a3fd0, #3a1d85); color: #fff; font: 800 15px var(--display); box-shadow: var(--shadow); text-decoration: none; }
.event-pill[hidden] { display: none; }
.play-hint { position: absolute; left: 50%; bottom: 18px; transform: translateX(-50%); background: var(--glass-hud); backdrop-filter: var(--blur); -webkit-backdrop-filter: var(--blur); padding: 7px 16px; border-radius: 99px; font: 700 13.5px var(--display); color: var(--ink); box-shadow: var(--shadow-soft), inset 0 0 0 1px var(--glass-line); pointer-events: none; transition: opacity 0.5s; white-space: nowrap; }
.coach { position: absolute; z-index: 25; max-width: 280px; padding: 12px 14px; border-radius: 16px; background: var(--glass-strong); backdrop-filter: var(--blur); -webkit-backdrop-filter: var(--blur); box-shadow: 0 14px 34px rgba(20, 45, 90, 0.25), inset 0 0 0 1px var(--glass-line); font: 700 14px var(--body); color: var(--ink); pointer-events: auto; animation: pop 0.3s both; }
.coach b { display: block; font: 800 16px var(--display); margin-bottom: 2px; }
.coach .coach-foot { display: flex; justify-content: space-between; align-items: center; margin-top: 8px; font-size: 12px; color: var(--muted); }
.coach button { border: 0; border-radius: 99px; padding: 5px 14px; font: 800 13px var(--display); color: #fff; background: linear-gradient(rgba(86, 196, 96, 0.34), rgba(22, 104, 44, 0.62)), url("/brand/grass-fill.webp") center / auto 200px; text-shadow: 0 1px 0 rgba(6, 34, 14, 0.5); box-shadow: 0 2px 0 var(--leaf3); }

/* ---------- capture ----------
   Light glass, compact, centred: the monster stays the star of the screen. */
#capture { position: fixed; inset: 0; z-index: 30; pointer-events: none; opacity: 0; transition: opacity 0.35s; }
#capture.on { opacity: 1; }
#capture > * { pointer-events: auto; }
.cap-plate { position: absolute; left: 18px; top: 18px; display: flex; gap: 10px; align-items: center; padding: 8px 16px 8px 8px; border-radius: 20px; background: var(--glass-hud); backdrop-filter: var(--blur); -webkit-backdrop-filter: var(--blur); color: var(--ink);
  box-shadow: var(--shadow-soft), inset 0 0 0 1px var(--glass-line); animation: slideIn 0.5s cubic-bezier(0.2, 1.3, 0.4, 1) both; max-width: calc(100vw - 36px); }
@keyframes slideIn { from { transform: translateX(-120%); } }
.cap-logo { width: 48px; height: 48px; border-radius: 50%; border: 3px solid #fff; object-fit: cover; background: #fff; box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2); }
.cap-name { font: 800 22px/1 var(--display); }
.cap-sub { font-size: 13px; color: var(--ink2); margin: 2px 0 5px; }
.cap-tags { display: flex; gap: 4px; flex-wrap: wrap; }
.cap-tags .type, .cap-tags .rar, .cap-tags .mc { font-size: 10px; padding: 4px 7px; }
.cap-shiny { font-size: 13px; color: #c2289f; }
.cap-ring { position: absolute; left: 0; top: 0; pointer-events: none !important; transition: opacity 0.2s; }
.cap-ring.hide { opacity: 0; }
.cap-ring svg { width: 100%; height: 100%; overflow: visible; }
.cap-ring circle { fill: none; stroke-width: 6; }
.cap-ring .o { stroke: #fff; opacity: 0.85; filter: drop-shadow(0 0 3px rgba(0, 0, 0, 0.3)); }
.cap-ring .i { stroke: var(--ring, #34c759); stroke-width: 8; transform-origin: 100px 100px; filter: drop-shadow(0 0 6px var(--ring)); }
.cap-q { position: absolute; left: 50%; top: -12%; transform: translateX(-50%); font: 800 34px var(--display); color: #fff; text-shadow: 0 3px 0 var(--leaf3), 0 0 12px rgba(0, 0, 0, 0.4); opacity: 0; white-space: nowrap; }
.cap-q.pop { animation: qpop 1s ease both; }
@keyframes qpop { 0% { opacity: 0; transform: translate(-50%, 10px) scale(0.6); } 20% { opacity: 1; transform: translate(-50%, 0) scale(1.1); } 70% { opacity: 1; } 100% { opacity: 0; transform: translate(-50%, -20px); } }
.cap-bottom { position: absolute; left: 50%; bottom: 16px; transform: translateX(-50%); width: min(640px, calc(100vw - 24px)); display: grid; gap: 8px; }
.cap-say, .bt-say { background: var(--glass-strong); backdrop-filter: var(--blur); -webkit-backdrop-filter: var(--blur); border-radius: 18px; padding: 12px 18px; box-shadow: var(--shadow-soft), inset 0 0 0 1px var(--glass-line); font: 700 17px/1.35 var(--display); color: var(--ink); position: relative; min-height: 52px; }
.cap-say p, .bt-say p { margin: 0; }
.cap-say.in p, .bt-say.in p { animation: type 0.4s steps(20) both; }
@keyframes type { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0 0 0 0); } }
.cap-new { display: block; margin-top: 5px; font-size: 14.5px; color: var(--leaf2); }
.cap-new.gold { color: #b87400; }
.cap-next { position: absolute; right: 16px; bottom: 8px; font-style: normal; color: var(--berry); animation: bob 0.8s infinite; }
@keyframes bob { 50% { transform: translateY(3px); } }
.cap-actions { display: flex; gap: 8px; align-items: stretch; }
.cap-balls { display: flex; gap: 4px; flex: 1; min-width: 0; background: var(--glass-hud); backdrop-filter: var(--blur); -webkit-backdrop-filter: var(--blur); padding: 4px; border-radius: 16px; box-shadow: var(--shadow-soft), inset 0 0 0 1px var(--glass-line); }
.cap-ball { flex: 1; min-width: 0; display: grid; justify-items: center; gap: 1px; border: 0; background: transparent; border-radius: 12px; padding: 5px 2px; font: 700 11px var(--display); color: var(--ink2); transition: background 0.15s; }
.cap-ball:hover:not(:disabled) { background: rgba(255, 255, 255, 0.5); }
.cap-ball .bi { width: 24px; height: 24px; }
.cap-ball em { font: 800 14px var(--display); font-style: normal; color: var(--ink); }
.cap-ball.sel { background: rgba(255, 255, 255, 0.88); box-shadow: 0 0 0 2px var(--leaf), 0 3px 8px rgba(15, 110, 47, 0.2); }
#capture.busy .cap-balls, #capture.busy .cap-throw, #capture.busy .cap-run { opacity: 0.5; filter: saturate(0.5); pointer-events: none; transition: opacity 0.2s; }
.cap-ball:disabled { opacity: 0.35; }
.cap-throw { font-size: 20px; padding: 10px 26px; }
.cap-throw small { font-size: 13px; opacity: 0.9; }
.cap-run { border: 0; border-radius: 16px; background: var(--glass-hud); backdrop-filter: var(--blur); -webkit-backdrop-filter: var(--blur); padding: 0 16px; font: 800 15px var(--display); color: var(--ink); box-shadow: var(--shadow-soft), inset 0 0 0 1px var(--glass-line); }
.cap-run:hover { background: rgba(255, 255, 255, 0.75); }

/* ---------- trainer card / board / feed ---------- */
.trainer-card { display: grid; grid-template-columns: auto 1fr auto; gap: 18px; align-items: center; padding: 22px 26px; border-radius: 26px; color: #fff;
  background: linear-gradient(rgba(96, 205, 106, 0.32), rgba(22, 104, 44, 0.6)), url("/brand/grass-fill.webp") center / auto 460px;
  text-shadow: 0 1px 0 rgba(6, 34, 14, 0.5), 0 2px 8px rgba(6, 34, 14, 0.35); box-shadow: 0 16px 36px rgba(15, 110, 47, 0.35); position: relative; overflow: hidden; }
.trainer-card::after { content: ""; position: absolute; right: -60px; top: -60px; width: 240px; height: 240px; border-radius: 50%; border: 26px solid rgba(255, 255, 255, 0.12); }
.tc-badge { width: 84px; height: 84px; border-radius: 50%; background: #fff; display: grid; place-items: center; box-shadow: 0 4px 0 rgba(0, 0, 0, 0.12); }
.tc-badge .bi { width: 56px; height: 56px; }
.tc-name { font: 800 32px/1 var(--display); display: flex; align-items: center; gap: 8px; }
.tc-name button { border: 0; background: rgba(255, 255, 255, 0.2); color: #fff; border-radius: 99px; font: 700 13px var(--body); padding: 4px 10px; }
.tc-meta { opacity: 0.9; font-size: 14px; }
.tc-stats { display: flex; gap: 16px; margin-top: 10px; flex-wrap: wrap; }
.tc-stats div { font-size: 13px; opacity: 0.9; }
.tc-stats b { display: block; font: 800 24px/1 var(--display); opacity: 1; }
.tc-side { display: grid; gap: 8px; justify-items: end; position: relative; z-index: 1; }
.board { display: grid; gap: 6px; }
.brow { display: grid; grid-template-columns: 44px 1fr auto auto; gap: 10px; align-items: center; padding: 10px 12px; border-radius: 14px; background: #fff; box-shadow: 0 2px 0 var(--line); }
.brow .rk { font: 800 20px var(--display); color: var(--muted); text-align: center; }
.brow:nth-child(1) .rk { color: #e5a800; } .brow:nth-child(2) .rk { color: #8b9ab3; } .brow:nth-child(3) .rk { color: #c7773a; }
.brow .who { font: 800 17px var(--display); }
.brow .who small { display: block; font: 600 12px var(--body); color: var(--muted); }
.brow .sc { font: 800 18px var(--display); }
.brow .mini { font-size: 12px; color: var(--muted); text-align: right; }
.brow.me { outline: 3px solid var(--leaf); }
.feed { display: grid; gap: 6px; }
.frow { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 14px; background: #fff; box-shadow: 0 2px 0 var(--line); font-size: 14px; }
.frow img { width: 34px; height: 34px; border-radius: 50%; object-fit: cover; background: #fff; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2); }
.frow .t { flex: 1; min-width: 0; }
.frow .t b { font-family: var(--display); font-size: 16px; }
.frow .when { color: var(--muted); font-size: 12px; white-space: nowrap; }

/* ---------- legends ---------- */
.legend-now { display: grid; grid-template-columns: 1fr auto; gap: 16px; align-items: center; padding: 22px 26px; border-radius: 26px; background: linear-gradient(135deg, #fff4c4, #ffd65a 60%, #ffb800); box-shadow: 0 16px 36px rgba(200, 140, 0, 0.35); }
.legend-now:empty { display: none; } /* until the schedule has loaded */
.legend-now h2 { margin: 0; }
.legend-now .cd { font: 800 44px/1 var(--display); color: #5a3a00; }
.legend-now p { margin: 4px 0 0; color: #6b4a00; }
.legend-teaser { background: linear-gradient(135deg, rgba(255, 244, 196, 0.95), rgba(255, 214, 90, 0.92)); }
/* the hours of the day ahead: one row per appearance, the live one lit */
.legend-next { display: grid; gap: 6px; }
.ln-row { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 14px; background: #fff; box-shadow: 0 2px 0 var(--line); font-size: 14px; }
.ln-row img { width: 34px; height: 34px; border-radius: 50%; object-fit: cover; background: #fff; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2); }
.ln-row .t { flex: 1; min-width: 0; display: flex; align-items: baseline; gap: 8px; }
.ln-row .t b { font-family: var(--display); font-size: 16px; }
.ln-row .t small { color: var(--muted); font-size: 12px; }
.ln-row .ln-at { font: 800 16px var(--display); color: var(--ink); white-space: nowrap; }
.ln-row .ln-at small { display: block; font: 600 11px/1 var(--body, inherit); color: var(--muted); }
.ln-row .ln-in { color: var(--muted); font-size: 12px; white-space: nowrap; width: 76px; text-align: right; }
.ln-row.live { background: linear-gradient(135deg, #fff6d2, #ffe082); box-shadow: 0 2px 0 #e7b93f; }
.ln-row.live .ln-at, .ln-row.live .ln-in { color: #6b4a00; }

/* ---------- token ---------- */
.tiers { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }
.tier { background: #fff; border-radius: 18px; padding: 16px; box-shadow: 0 3px 0 var(--line); }
.tier h3 { margin: 0 0 4px; }
.tier .min { font: 800 15px var(--display); color: var(--leaf2); margin-bottom: 8px; }
.tier ul { margin: 0; padding: 0; list-style: none; display: grid; gap: 4px; font-size: 14px; }
.tier li { display: flex; align-items: center; gap: 6px; }
.tier.me { outline: 3px solid var(--leaf); }
.daily { display: grid; grid-template-columns: 1fr auto; gap: 16px; align-items: center; }
.daily .items { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 8px; font: 800 18px var(--display); }
.daily .items span { display: flex; align-items: center; gap: 5px; background: #fff; padding: 6px 12px; border-radius: 99px; box-shadow: 0 2px 0 var(--line); }
.shop-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin-top: 10px; }
.pack { background: #fff; border-radius: 18px; padding: 16px; text-align: center; box-shadow: 0 3px 0 var(--line); display: grid; gap: 8px; justify-items: center; }
.pack .bi { width: 44px; height: 44px; }
.pack b { font: 800 18px var(--display); }
.faq details { background: #fff; border-radius: 14px; padding: 12px 16px; margin-top: 8px; box-shadow: 0 2px 0 var(--line); }
.faq summary { font: 800 17px var(--display); cursor: pointer; }
.faq p { margin: 8px 0 0; color: var(--ink2); }

/* ---------- modal ---------- */
#modal { position: fixed; inset: 0; z-index: 40; display: grid; place-items: center; background: rgba(12, 28, 50, 0.45); backdrop-filter: blur(4px); padding: 16px; animation: fade 0.25s both; }
@keyframes fade { from { opacity: 0; } }
.mbox { width: min(920px, 100%); max-height: calc(100vh - 32px); overflow: auto; background: #fff; border-radius: 28px; box-shadow: 0 30px 80px rgba(0, 0, 0, 0.35); display: grid; grid-template-columns: 1.1fr 1fr; position: relative; animation: pop 0.35s cubic-bezier(0.2, 1.3, 0.4, 1) both; }
@keyframes pop { from { transform: scale(0.9); opacity: 0; } }
.mbox .stage3d { position: relative; min-height: 440px; background: radial-gradient(46% 11% at 50% 80%, rgba(40, 110, 50, 0.28) 0%, transparent 100%), radial-gradient(60% 18% at 50% 81%, #9bd97c 0%, #7cc65e 70%, transparent 71%), linear-gradient(180deg, #7fc6ff 0%, #c9eaff 58%, #e6f6ff 100%); border-radius: 28px 0 0 28px; overflow: hidden; }
.mbox .stage3d canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
.mbox .info { padding: 26px; display: grid; gap: 10px; align-content: start; }
.mbox .close { position: absolute; right: 14px; top: 14px; z-index: 2; width: 40px; height: 40px; border-radius: 50%; border: 0; background: #f0f4fa; font-size: 20px; }
.mbox .dexno { font: 800 16px var(--display); color: var(--muted); }
.mbox .ttl { display: flex; align-items: center; gap: 10px; }
.mbox .ttl img { width: 48px; height: 48px; border-radius: 50%; object-fit: cover; box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2); }
.mbox .ttl h2 { margin: 0; }
.stats { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.stats div { background: var(--paper2); border-radius: 14px; padding: 10px 12px; font-size: 13px; color: var(--ink2); }
.stats b { display: block; font: 800 20px/1.1 var(--display); color: var(--ink); }
.evo-line { display: flex; gap: 6px; align-items: center; }
.evo-line span { flex: 1; text-align: center; padding: 8px 4px; border-radius: 12px; background: var(--paper2); font: 800 13px var(--display); color: var(--muted); }
.evo-line span.on { background: linear-gradient(rgba(86, 196, 96, 0.34), rgba(22, 104, 44, 0.62)), url("/brand/grass-fill.webp") center / auto 200px; color: #fff; text-shadow: 0 1px 0 rgba(6, 34, 14, 0.5); }
.dex-text { background: var(--paper2); border-radius: 16px; padding: 12px 14px; font-size: 15px; color: var(--ink2); }
.links { display: flex; gap: 8px; flex-wrap: wrap; }
.links a { font: 700 14px var(--display); text-decoration: none; padding: 6px 12px; border-radius: 99px; background: var(--paper2); }

.mbox.small-box { width: min(440px, 100%); grid-template-columns: minmax(0, 1fr); }
.field { width: 100%; font: 800 22px var(--display); padding: 12px 16px; border-radius: 16px; border: 3px solid var(--line); outline: none; color: var(--ink); }
.field:focus { border-color: var(--leaf); }

.mbox.wide-box { width: min(640px, 100%); }
.mbox.small-box .info { min-width: 0; }
.skins { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 8px; }
.skin { border: 3px solid transparent; background: var(--paper2); border-radius: 16px; padding: 4px; aspect-ratio: 1; }
.skin img { width: 100%; height: 100%; object-fit: contain; }
.skin.on { border-color: var(--leaf); background: #effbf2; }
.tc-badge img { width: 76px; height: 76px; object-fit: contain; }
.tc-name button + button { margin-left: 4px; }
.joy { position: absolute; left: 22px; bottom: 150px; width: 128px; height: 128px; border-radius: 50%; background: rgba(255, 255, 255, 0.35); border: 3px solid rgba(255, 255, 255, 0.8); backdrop-filter: blur(6px); box-shadow: var(--shadow); display: none; place-items: center; touch-action: none; pointer-events: auto; }
.joy i { width: 56px; height: 56px; border-radius: 50%; background: linear-gradient(180deg, #fff, #e6eef9); box-shadow: 0 4px 10px rgba(0, 0, 0, 0.25); transition: transform 0.05s; }
@media (pointer: coarse) { .joy { display: grid; } }
body.encounter .joy { opacity: 0; pointer-events: none !important; }

/* ---------- rewards ---------- */
.nav-prize { position: relative; }
.nav-prize::after { content: ""; position: absolute; right: 7px; top: 6px; width: 7px; height: 7px; border-radius: 50%; background: var(--sun); box-shadow: 0 0 0 2px #fff; }
.rw-head { display: flex; justify-content: space-between; gap: 16px; align-items: center; flex-wrap: wrap; }
.live-pill { font: 800 15px var(--display); padding: 8px 14px; border-radius: 99px; background: #eef3fa; color: var(--ink2); white-space: nowrap; }
.live-pill.on { background: #e3f7ea; color: var(--leaf2); }
.prize-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.prize { background: linear-gradient(160deg, #fffdf2, #fff4c9); border-radius: 22px; padding: 18px; box-shadow: var(--shadow); border: 2px solid #ffe28a; }
.prize .pi { font-size: 30px; }
.prize h3 { margin: 6px 0 2px; }
.prize .pa { font: 800 22px var(--display); color: #8a5a00; margin-bottom: 6px; }
.prize p { margin: 0; color: var(--ink2); font-size: 14px; }
.elig { display: flex; justify-content: space-between; align-items: center; gap: 16px; flex-wrap: wrap; }
.elig.ok { background: rgba(227, 247, 234, 0.92); }
.elig h2 { margin: 0 0 4px; }
.elig p { margin: 0; }
.rw-two { display: grid; grid-template-columns: 1.7fr 1fr; gap: 22px; align-items: start; }
.rw-week .board { grid-template-columns: 1fr 1fr; grid-auto-flow: column; column-gap: 12px; } /* 1-10 on the left, 11-20 on the right */
@media (max-width: 720px) { .rw-week .board { grid-template-columns: 1fr; grid-auto-flow: row; grid-template-rows: none !important; } }
.my-week { display: flex; gap: 12px; margin: 6px 0 12px; }
.my-week div { background: #fff; border-radius: 14px; padding: 8px 14px; font-size: 13px; color: var(--muted); box-shadow: 0 2px 0 var(--line); }
.my-week b { display: block; font: 800 22px var(--display); color: var(--ink); }
.pts { font-size: 13px; margin: 12px 0 0; }
.claim .ci { font-size: 24px; width: 34px; text-align: center; }
.claim .cu { text-align: right; font-size: 13px; white-space: nowrap; }
.claim .cu b { font: 800 18px var(--display); }
.st { font-weight: 800; font-size: 12px; }
.st.paid { color: var(--leaf2); } .st.pend { color: var(--sun2); } .st.void { color: var(--muted); }
.claim select { font: 700 13px var(--body); border-radius: 8px; border: 2px solid var(--line); padding: 3px; }
.perks-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin-top: 10px; }
.perk { background: #fff; border-radius: 18px; padding: 16px; box-shadow: 0 3px 0 var(--line); display: grid; gap: 6px; align-content: start; }
.perk .pe { font-size: 28px; }
.perk b { font: 800 18px var(--display); }
.perk p { margin: 0; font-size: 14px; color: var(--ink2); }
.perk .price { font: 800 15px var(--display); color: var(--leaf2); }
.item-timer { font: 800 13px var(--display); background: #fff4c9; border-radius: 99px; padding: 4px 10px; margin-top: 6px; display: inline-block; }
.chip.early { background: #00b3a4; } .chip.lure { background: #e05dd6; } .chip.safari { background: #8a5a00; }
@media (max-width: 1080px) { .prize-grid, .perks-grid { grid-template-columns: repeat(2, 1fr); } .rw-two { grid-template-columns: 1fr; } }
@media (max-width: 720px) { .prize-grid, .perks-grid { grid-template-columns: 1fr; } }

/* ---------- gyms ---------- */
.badge-case { display: flex; gap: 8px; margin-top: 14px; flex-wrap: wrap; }
.badge { width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; font: 800 17px var(--display); color: #fff; background: #d6dfeb; box-shadow: inset 0 -3px 0 rgba(0, 0, 0, 0.12); }
.badge.on { background: radial-gradient(circle at 35% 30%, #ffffff 0 12%, var(--c) 45%); box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2), inset 0 0 0 3px rgba(255, 255, 255, 0.7); text-shadow: 0 1px 2px rgba(0, 0, 0, 0.4); }
.gym-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }
.gym { background: var(--glass); backdrop-filter: blur(10px); border-radius: 22px; padding: 14px; box-shadow: var(--shadow); display: grid; gap: 6px; border-top: 5px solid var(--c); }
.gym.done { background: linear-gradient(180deg, rgba(227, 247, 234, 0.95), rgba(255, 255, 255, 0.9)); }
.gym-top { display: flex; justify-content: space-between; align-items: center; }
.gym-no { font: 800 15px var(--display); color: var(--muted); }
.gym-pic { height: 140px; display: grid; place-items: center; position: relative; border-radius: 14px; background: radial-gradient(70% 55% at 50% 72%, color-mix(in srgb, var(--c) 30%, transparent), transparent 70%), linear-gradient(180deg, #eef6ff, #fbfdff); }
.gym-pic img.th { height: 132px; }
.gym-pic .ph { width: 64px; height: 64px; border-radius: 50%; background: #dfeefd; animation: pulse 1.2s infinite; }
.gym-pic .coin { position: absolute; right: 8px; top: 8px; width: 34px; height: 34px; border-radius: 50%; border: 3px solid #fff; box-shadow: 0 2px 6px rgba(0, 0, 0, 0.25); object-fit: cover; }
.gym .nm { font: 800 19px var(--display); }
.gym .sub { font-size: 13px; color: var(--muted); }
.gym-rw { font-size: 13px; color: var(--ink2); display: flex; gap: 6px; align-items: center; flex-wrap: wrap; min-height: 22px; }
.gym-rw span { display: inline-flex; align-items: center; gap: 3px; font-weight: 800; }
.gym-rw .pts { background: #eaf7e4; color: #2f7d32; border-radius: 99px; padding: 1px 8px; }
.team-pick { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; max-height: 46vh; overflow: auto; padding: 2px; }
.tp { display: grid; justify-items: center; gap: 2px; padding: 10px 6px; border-radius: 16px; border: 3px solid transparent; background: var(--paper2); }
.tp img { width: 42px; height: 42px; border-radius: 50%; object-fit: cover; box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2); }
.tp b { font: 800 15px var(--display); }
.tp span { font-size: 12px; color: var(--muted); }
.tp.on { border-color: var(--c); background: #fff; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12); }
body.battling #top, body.battling [data-screen="battle"] .page-in { opacity: 0; pointer-events: none !important; }
#battle { position: fixed; inset: 0; z-index: 30; pointer-events: none; opacity: 0; transition: opacity 0.3s; }
#battle.on { opacity: 1; }
#battle > * { pointer-events: auto; }
.bt-plate { position: absolute; width: min(330px, 44vw); background: var(--glass-hud); backdrop-filter: var(--blur); -webkit-backdrop-filter: var(--blur); border-radius: 18px; padding: 9px 14px 10px; box-shadow: var(--shadow-soft), inset 0 0 0 1px var(--glass-line); animation: slideIn 0.45s cubic-bezier(0.2, 1.3, 0.4, 1) both; }
.bt-plate.f { left: 18px; top: 18px; }
.bt-plate.p { right: 18px; bottom: 190px; animation-name: slideInR; }
@keyframes slideInR { from { transform: translateX(120%); } }
.bt-name { font: 800 19px var(--display); display: flex; align-items: center; gap: 8px; color: var(--ink); }
.bt-name small { font-size: 14px; color: var(--ink2); }
.bt-name .type { margin-left: auto; }
.bt-hp { height: 10px; border-radius: 99px; background: rgba(20, 45, 90, 0.14); margin-top: 6px; overflow: hidden; box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.15); }
.bt-hp i { display: block; height: 100%; border-radius: 99px; transition: background 0.2s; }
.bt-hpn { text-align: right; font: 800 15px var(--display); margin-top: 3px; }
.bt-buffs { font: 800 12px var(--body); color: #c0392b; margin-top: 3px; }
.bt-team { position: absolute; display: flex; gap: 5px; }
.bt-team.f { left: 28px; top: 104px; } .bt-team.p { right: 28px; bottom: 168px; }
.bt-team i { width: 14px; height: 14px; border-radius: 50%; background: linear-gradient(180deg, #e8483d 0 46%, #1a2330 46% 54%, #f4f6fb 54%); box-shadow: 0 1px 2px rgba(0, 0, 0, 0.3); }
.bt-team i.out { filter: grayscale(1) opacity(0.4); }
.bt-bottom { position: absolute; left: 50%; bottom: 16px; transform: translateX(-50%); width: min(900px, calc(100vw - 24px)); display: grid; grid-template-columns: 1fr 1.25fr; gap: 8px; align-items: stretch; }
.bt-say { min-height: 128px; display: flex; align-items: center; }
.bt-menu { display: grid; grid-template-columns: 1fr auto; gap: 8px; }
.bt-moves { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.bt-move { border: 0; border-radius: 14px; padding: 9px 13px; text-align: left; background: var(--glass-strong); backdrop-filter: var(--blur); -webkit-backdrop-filter: var(--blur); box-shadow: inset 0 -4px 0 var(--c), var(--shadow-soft); display: grid; color: var(--ink); transition: transform 0.12s, background 0.15s; }
.bt-move:hover:not(:disabled) { background: #fff; }
.bt-move b { font: 800 16.5px var(--display); }
.bt-move span { font-size: 12px; color: var(--muted); font-weight: 800; }
.bt-move:hover { transform: translateY(-1px); }
.bt-move:disabled { opacity: 0.4; }
.bt-side { display: grid; gap: 8px; align-content: stretch; }
.bt-side button:not(.btn) { border: 0; border-radius: 14px; padding: 0 16px; font: 800 15px var(--display); color: var(--ink); background: var(--glass-hud); backdrop-filter: var(--blur); -webkit-backdrop-filter: var(--blur); box-shadow: var(--shadow-soft), inset 0 0 0 1px var(--glass-line); }
.bt-side button:disabled { opacity: 0.45; }
@media (max-width: 1080px) { .gym-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 720px) {
  .gym-grid { grid-template-columns: 1fr 1fr; gap: 10px; }
  .gym-pic { height: 110px; } .gym-pic img.th { height: 100px; }
  .team-pick { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .bt-bottom { grid-template-columns: 1fr; bottom: 10px; }
  .bt-say { min-height: 64px; }
  /* phone held upright: compact plates in the corners, the two monsters between them */
  .bt-plate { width: min(260px, 66vw); padding: 7px 12px 8px; }
  .bt-plate.f { left: 10px; top: 10px; } .bt-plate.p { right: 10px; bottom: 228px; }
  .bt-team.f { left: auto; right: 16px; top: 22px; } .bt-team.p { left: 16px; right: auto; bottom: 244px; }
  .bt-name { font-size: 17px; }
  .bt-move b { font-size: 15px; }
}

/* ---------- evolution ---------- */
.evo-box { width: min(560px, 100%); height: min(560px, 80vh); border-radius: 28px; overflow: hidden; position: relative; background: radial-gradient(60% 50% at 50% 55%, #fffbe6 0%, #bfe6ff 55%, #7cc3ff 100%); box-shadow: 0 30px 80px rgba(0, 0, 0, 0.35); animation: pop 0.35s both; }
.evo-box canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
.evo-say { position: absolute; left: 14px; right: 14px; bottom: 14px; background: #fff; border-radius: 18px; padding: 14px 18px; font: 700 19px var(--display); box-shadow: 0 8px 20px rgba(0, 0, 0, 0.2); display: flex; gap: 12px; align-items: center; justify-content: space-between; }
.evo-say p { margin: 0; }

/* ---------- toasts ---------- */
#toasts { position: fixed; top: 70px; left: 50%; transform: translateX(-50%); z-index: 60; display: grid; gap: 8px; pointer-events: none; }
.toast { background: rgba(21, 35, 59, 0.82); backdrop-filter: blur(14px) saturate(1.5); -webkit-backdrop-filter: blur(14px) saturate(1.5); color: #fff; padding: 11px 18px; border-radius: 16px; font: 700 15px var(--display); box-shadow: 0 10px 26px rgba(0, 0, 0, 0.25), inset 0 0 0 1px rgba(255, 255, 255, 0.12); animation: toast 3.6s ease both; max-width: 90vw; text-align: center; }
.toast.good { background: rgba(28, 154, 67, 0.88); }
@keyframes toast { 0% { opacity: 0; transform: translateY(-10px); } 8%, 85% { opacity: 1; transform: none; } 100% { opacity: 0; } }

/* ---------- responsive ---------- */
@media (max-width: 1320px) {
  #nav { position: fixed; top: 60px; right: 14px; left: auto; flex-direction: column; border-radius: 20px; padding: 6px; display: none; background: var(--glass-strong); min-width: 190px; }
  body[data-view="play"] #nav { background: var(--glass-strong); }
  #nav a { padding: 9px 16px; }
  #nav.open { display: flex; animation: pop 0.2s both; }
  .burger { display: grid; }
  .steps, .tiers, .shop-grid { grid-template-columns: repeat(2, 1fr); }
  .page-in.two { grid-template-columns: 1fr; }
}
@media (max-width: 720px) {
  #top { top: 8px; left: 8px; right: 8px; gap: 6px; }
  .top-word { height: 40px; }
  .top-right { gap: 5px; }
  .top-right .btn.small { padding: 6px 10px; font-size: 13px; }
  .balls-hud { display: none !important; }
  #trainer-btn { padding: 7px 12px; font-size: 13.5px; }
  .icon-btn { width: 36px; height: 36px; }
  #nav { top: 52px; right: 8px; }
  h1 { font-size: 36px; }
  .hero-sub { font-size: 17px; }
  .steps, .tiers, .shop-grid, .evo-row { grid-template-columns: 1fr; }
  .grid { grid-template-columns: repeat(2, 1fr); gap: 10px; }
  .mon .pic { height: 108px; }
  .mon .pic img.th { height: 100px; }
  /* play: a compact bottom sheet, the minimap top right */
  .play-hud { left: 8px; right: 8px; top: auto; bottom: 8px; width: auto; gap: 6px; grid-template-columns: minmax(0, 1fr); }
  .hud-events { display: flex; gap: 6px; overflow-x: auto; scrollbar-width: none; order: -1; }
  .hud-events::-webkit-scrollbar { display: none; }
  .ev { width: auto; flex: 1 1 0; min-width: 0; min-height: 34px; padding: 4px 10px 4px 4px; } /* side by side, never cut by the screen edge */
  .ev .ei { width: 24px; height: 24px; font-size: 13px; }
  .ev .et b { font-size: 12.5px; } .ev .et small { font-size: 10.5px; }
  .hud-card { padding: 6px; border-radius: 16px; }
  .hud-toggle b { font-size: 14.5px; }
  .hud-ic { width: 32px; height: 32px; font-size: 15px; }
  .hud-list { display: flex; gap: 5px; overflow-x: auto; overflow-y: hidden; max-height: 60px; margin-top: 5px; scrollbar-width: none;
    -webkit-mask-image: linear-gradient(90deg, #000 86%, transparent); mask-image: linear-gradient(90deg, #000 86%, transparent); } /* swipe for more */
  .hud-list::-webkit-scrollbar { display: none; }
  .hud-row { flex: none; width: auto; background: rgba(255, 255, 255, 0.6); padding: 4px 9px 4px 4px; border-radius: 99px; }
  .hud-row .m { display: none; }
  .hud-row .s { font-size: 13px; max-width: 110px; }
  .hud-buffs { display: none; }
  .event-pill { font-size: 13px; padding: 7px 14px; }
  .play-hint { display: none; }
  .hud-right { top: 56px; right: 8px; width: 150px; gap: 6px; }
  .minimap { width: 92px; height: 92px; }
  .hud-missions { padding: 6px 8px; border-radius: 14px; }
  .hud-missions:not(.open) .hm-row, .hud-missions:not(.open) .hm-claim { display: none; }
  .place-banner { top: 60px; padding: 6px 16px 8px; max-width: calc(100vw - 130px); left: calc(50% - 50px); } .place-banner b { font-size: 19px; }
  .skins { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .joy { bottom: 138px; left: 16px; width: 112px; height: 112px; }
  .mbox { grid-template-columns: 1fr; }
  .mbox .stage3d { min-height: 300px; border-radius: 28px 28px 0 0; }
  .trainer-card { grid-template-columns: minmax(0, 1fr); gap: 14px; padding: 18px; }
  .trainer-card > div { min-width: 0; }
  .tc-badge { width: 72px; height: 72px; } .tc-badge img { width: 64px; height: 64px; }
  .tc-name { font-size: 26px; flex-wrap: wrap; }
  .tc-stats { gap: 10px 16px; } .tc-stats b { font-size: 20px; }
  .tc-side { grid-column: 1 / -1; justify-items: stretch; width: 100%; }
  .cap-plate { left: 8px; top: 8px; padding: 6px 12px 6px 6px; }
  .cap-name { font-size: 18px; }
  .cap-logo { width: 40px; height: 40px; }
  .cap-say, .bt-say { font-size: 15.5px; padding: 10px 14px; }
  .cap-actions { display: grid; grid-template-columns: 1fr auto; }
  .cap-balls { grid-column: 1 / -1; }
  .legend-now { grid-template-columns: 1fr; }
  .daily { grid-template-columns: 1fr; }
}

/* ---------- Species Dex ---------- */
.dex-progress { display: grid; grid-template-columns: auto 1fr; gap: 6px 16px; align-items: center; padding: 16px 20px; margin-bottom: 14px; }
.dex-progress .dp-num { font: 800 30px var(--display); color: var(--ink); } .dex-progress .dp-num b { color: #2f9e4f; }
.dex-progress .dp-bar { height: 14px; border-radius: 99px; background: #e6edf5; overflow: hidden; box-shadow: inset 0 2px 3px rgba(0,0,0,0.08); }
.dex-progress .dp-bar i { display: block; height: 100%; background: linear-gradient(90deg, #3fcf6a, #2fa34f); border-radius: 99px; transition: width 0.6s; }
.dex-progress .dp-txt { grid-column: 1 / -1; font-size: 13px; color: var(--muted); display: flex; flex-wrap: wrap; gap: 7px 7px; align-items: center; }
.dex-filters { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 14px; }
.seg.small button { padding: 6px 12px; font-size: 13px; }
.chips-row { flex-wrap: wrap; }
.rar { display: inline-block; font: 800 11px var(--display); text-transform: uppercase; letter-spacing: 0.5px; padding: 2px 8px; border-radius: 99px; color: #fff; background: #9aa4b2; }
.rar.t-common { background: #9aa4b2; } .rar.t-uncommon { background: #3aa655; } .rar.t-rare { background: #2f7cf6; } .rar.t-epic { background: linear-gradient(90deg, #a24dff, #6a2bd8); } .rar.t-legendary { background: linear-gradient(90deg, #ffc72c, #ff9500); }
.sp-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 12px; }
.sp-card { position: relative; display: grid; justify-items: center; gap: 4px; padding: 12px 10px 12px; border: 0; border-radius: 22px; background: #fff; box-shadow: var(--shadow); cursor: pointer; text-align: center; transition: transform 0.15s, box-shadow 0.15s; }
.sp-card:hover { transform: translateY(-3px); }
.sp-card img { width: 112px; height: 112px; object-fit: contain; transition: filter 0.3s; }
.sp-card b { font: 800 16px var(--display); color: var(--ink); }
.sp-card small { font: 700 12px var(--body); color: var(--muted); }
.sp-card .no { position: absolute; left: 12px; top: 10px; font: 800 12px var(--display); color: var(--muted); }
.sp-card .got { position: absolute; right: 10px; top: 9px; font: 800 11px var(--display); color: #fff; background: #2f9e4f; border-radius: 99px; padding: 2px 8px; }
.sp-tags { display: flex; gap: 4px; flex-wrap: wrap; justify-content: center; }
.sp-card.caught.t-rare { box-shadow: 0 0 0 3px #2f7cf6 inset, var(--shadow); } .sp-card.caught.t-epic { box-shadow: 0 0 0 3px #a24dff inset, var(--shadow); } .sp-card.caught.t-legendary { box-shadow: 0 0 0 3px #ffb31a inset, var(--shadow); background: linear-gradient(180deg, #fffbe9, #fff); }
/* not caught yet: pale, washed out */
.sp-card.missing { background: rgba(247,250,253,0.94); box-shadow: 0 2px 8px rgba(30,50,90,0.08); }
.sp-card.missing img { filter: grayscale(1) brightness(1.55) contrast(0.6); opacity: 0.5; }
.sp-card.missing b { color: #8a96a8; } .sp-card.missing .type, .sp-card.missing .rar { opacity: 0.55; }
.mbox.form-box { display: block; width: min(660px, 94vw); max-width: 660px; padding: 26px; max-height: 92vh; overflow: auto; }
.form-box .close { position: absolute; right: 14px; top: 14px; }
.fb-top { display: grid; grid-template-columns: 200px 1fr; gap: 18px; align-items: center; }
.fb-pic { background: radial-gradient(circle at 50% 60%, #eef6ff, #dfeaf7); border-radius: 26px; padding: 10px; }
.fb-pic img { width: 180px; height: 180px; object-fit: contain; display: block; margin: auto; }
.fb-pic.missing img, .fb-ev.missing img { filter: grayscale(1) brightness(1.75) contrast(0.55); opacity: 0.55; }
.fb-id h2 { margin: 2px 0 6px; font: 800 32px var(--display); }
.fb-id .dexno { font: 800 13px var(--display); color: var(--muted); } .fb-id .dexno .ok { color: #2f9e4f; }
.fb-chain { display: flex; align-items: center; justify-content: center; gap: 6px; margin: 16px 0 6px; flex-wrap: wrap; }
.fb-chain .arr { font-style: normal; font: 800 20px var(--display); color: var(--muted); }
.fb-ev { display: grid; justify-items: center; border: 0; background: #f4f8fc; border-radius: 18px; padding: 8px 10px; cursor: pointer; min-width: 110px; }
.fb-ev.cur { box-shadow: 0 0 0 3px #3fcf6a inset; background: #fff; }
.fb-ev img { width: 72px; height: 72px; object-fit: contain; }
.fb-ev span { font: 800 13px var(--display); } .fb-ev small { font-size: 11px; color: var(--muted); }
.fb-stats { grid-template-columns: repeat(4, 1fr); }
.fb-mine { margin-top: 12px; } .fb-mine h4 { margin: 0 0 6px; font: 800 15px var(--display); }
.chip-tok { display: inline-block; margin: 0 6px 6px 0; padding: 4px 10px; border-radius: 99px; background: #eef6ee; color: #2f7d32; font: 800 13px var(--display); text-decoration: none; }
.fb-actions { margin-top: 14px; display: flex; justify-content: center; }
@media (max-width: 720px) {
  .sp-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
  .sp-card { padding: 10px 4px; border-radius: 18px; } .sp-card img { width: 78px; height: 78px; } .sp-card b { font-size: 13px; }
  .sp-card .no { left: 8px; top: 6px; font-size: 10px; } .sp-card .got { right: 6px; top: 5px; font-size: 9px; padding: 1px 6px; }
  .sp-tags .type, .sp-tags .rar { font-size: 9px; padding: 1px 6px; }
  .fb-top { grid-template-columns: 1fr; justify-items: center; text-align: center; } .fb-stats { grid-template-columns: repeat(2, 1fr); }
  .fb-ev { min-width: 88px; } .fb-ev img { width: 56px; height: 56px; }
}

/* ---------- $POKEGRASS page and Mart ---------- */
.tk-stats { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 14px; }
.tk-stats div { background: #fff; border-radius: 16px; padding: 8px 14px; box-shadow: var(--shadow); font-size: 13px; color: var(--muted); }
.tk-stats b { display: block; font: 800 20px var(--display); color: var(--ink); }
.uses { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }
.use { background: #f6f9fd; border-radius: 20px; padding: 14px; } .use .emo { font-size: 28px; } .use b { display: block; font: 800 17px var(--display); margin: 4px 0; } .use p { margin: 0; font-size: 14px; color: var(--ink2); }
.mart-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 12px; margin-top: 10px; }
.mart-item { display: grid; gap: 6px; align-content: start; background: #f6f9fd; border-radius: 20px; padding: 14px; position: relative; }
.mart-item .bi { width: 34px; height: 34px; } .mart-item .emo { font-size: 30px; line-height: 1; }
.mart-item b { font: 800 16px var(--display); } .mart-item p { margin: 0; font-size: 13px; color: var(--ink2); min-height: 36px; }
.mi-price { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px; } .mi-price .usd { font: 800 20px var(--display); color: #2f9e4f; } .mi-price .tok { font-size: 12px; color: var(--muted); }
.mart-item .btn { justify-self: start; }
.mart-item.buff { background: linear-gradient(180deg, #f3f0ff, #f6f9fd); } .mart-item.spawn { background: linear-gradient(180deg, #fff6e6, #f6f9fd); }
#mart-modal .mart-grid { grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); }
.hud-buffs .buff.rank { background: linear-gradient(90deg, #ffe07a, #ffc02e); color: #5a3a00; }
.frow .rk { font: 800 14px var(--display); color: var(--muted); width: 30px; }
@media (max-width: 1080px) { .uses { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 720px) { .uses { grid-template-columns: 1fr; } .mart-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .mart-item p { min-height: 0; } }

/* ---------- weekly pot ---------- */
.pot { display: grid; grid-template-columns: 1.3fr 1fr 1fr; gap: 12px; margin-bottom: 14px; }
.pot-note { margin: -4px 0 16px; font-size: 14.5px; }
.pot > div { background: linear-gradient(rgba(86, 196, 96, 0.3), rgba(22, 104, 44, 0.66)), url("/brand/grass-fill.webp") center / auto 420px; color: #fff; border-radius: 22px; padding: 16px 20px;
  text-shadow: 0 1px 0 rgba(6, 34, 14, 0.5), 0 2px 8px rgba(6, 34, 14, 0.35); box-shadow: var(--shadow); }
.pot > div:first-child { background: linear-gradient(160deg, #ffcf33, #ff9f1a); color: #3a2400; text-shadow: none; }
.pot small { display: block; font: 800 12px var(--display); text-transform: uppercase; letter-spacing: 1px; opacity: 0.85; }
.pot b { display: block; font: 800 40px/1.1 var(--display); }
.pot span { font: 700 13px var(--body); opacity: 0.9; }
.prize .ps { font: 700 12px var(--body); color: #8a6a20; margin-bottom: 6px; }
.prize.golden { background: linear-gradient(160deg, #fff6c9, #ffe27a); border-color: #ffc933; }
.gold-now { color: #c23d00; }
@media (max-width: 720px) { .pot { grid-template-columns: 1fr; } .pot b { font-size: 32px; } }

.hero-stats .pot-stat { background: linear-gradient(160deg, #fff3b0, #ffcf33); } .hero-stats .pot-stat b { color: #6a4300; }

/* ---------- missions ---------- */
.mis-two, .box-two { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; align-items: start; }
.two-up { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; align-items: start; }
.app-soon { display: grid; grid-template-columns: 1.6fr 1fr; gap: 20px; align-items: center; }
.app-soon h2 { margin: 0 0 6px; }
.app-cta { display: grid; gap: 8px; justify-items: start; }
@media (max-width: 860px) { .app-soon { grid-template-columns: 1fr; } }
.others .board { margin: 14px 0 16px; }
.others-cta { display: flex; gap: 10px; flex-wrap: wrap; }
.live-pill { display: inline-flex; align-items: center; gap: 7px; }
.live-pill::before { content: ""; width: 9px; height: 9px; border-radius: 50%; background: #35c75a; box-shadow: 0 0 0 4px rgba(53, 199, 90, 0.25); animation: livePulse 1.8s ease-in-out infinite; }
@keyframes livePulse { 50% { box-shadow: 0 0 0 7px rgba(53, 199, 90, 0.08); } } /* the market moves, and the proof they are paid */
@media (max-width: 1080px) { .two-up { grid-template-columns: 1fr; } }
.panel:empty { display: none; } /* a panel with nothing to show yet (Eggs and Trades before the first game) takes no room */
.box-two:not(:has(> .panel:not(:empty))) { display: none; }
.mis-list { display: grid; gap: 10px; margin-top: 8px; }
.mis { background: rgba(255, 255, 255, 0.72); border-radius: 16px; padding: 12px 14px; box-shadow: 0 2px 0 var(--line); }
.mis-t { display: flex; justify-content: space-between; gap: 10px; align-items: baseline; }
.mis-t b { font: 800 16px var(--display); } .mis-t span { font: 800 13px var(--display); color: var(--ink2); white-space: nowrap; }
.mis-bar { height: 8px; border-radius: 99px; background: rgba(20, 45, 90, 0.1); margin: 8px 0; overflow: hidden; }
.mis-bar i { display: block; height: 100%; border-radius: 99px; background: linear-gradient(90deg, #3fd26a, #9be35a); transition: width 0.5s; }
.mis.done .mis-bar i { background: linear-gradient(90deg, #ffc72c, #ff9f1a); }
.mis.claimed { opacity: 0.6; }
.mis-f { display: flex; justify-content: space-between; align-items: center; gap: 10px; }
.mis-rw { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; font: 800 13px var(--display); color: var(--ink2); }
.mis-rw span { display: inline-flex; align-items: center; gap: 3px; }
.mis-rw .pts { background: #eaf7e4; color: #2f7d32; border-radius: 99px; padding: 1px 8px; }
.mis-ok { font: 800 13px var(--display); color: var(--leaf2); }
.mis-bonus { margin-top: 12px; padding: 10px 12px; border-radius: 14px; background: rgba(255, 244, 201, 0.85); font: 700 14px var(--body); color: #6b4a00; }
.mis-bonus.got { background: rgba(227, 247, 234, 0.9); color: #1f7a3a; }
.feat-day { display: grid; grid-template-columns: auto 1fr auto; gap: 16px; align-items: center; background: linear-gradient(135deg, rgba(223, 241, 255, 0.85), rgba(255, 255, 255, 0.7)); }
.feat-day .fd-i { font-size: 38px; } .feat-day h2 { margin: 0 0 4px; } .feat-day p { margin: 0; }
.invite { display: grid; gap: 12px; }
.invite h2 { margin: 0 0 4px; } .invite p { margin: 0; }
.inv-box { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; background: rgba(255, 255, 255, 0.8); border-radius: 16px; padding: 8px 8px 8px 14px; box-shadow: 0 2px 0 var(--line); }
.inv-box code { flex: 1; min-width: 0; font: 700 13px ui-monospace, Menlo, monospace; color: var(--ink2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ---------- eggs ---------- */
.egg-help { font-size: 14px; margin: 4px 0 10px; }
.egg-h { margin: 14px 0 8px; font-size: 16px; }
.egg-row { display: grid; grid-template-columns: repeat(auto-fill, minmax(118px, 1fr)); gap: 10px; }
.egg { display: grid; justify-items: center; gap: 4px; padding: 10px 8px 12px; border-radius: 18px; background: rgba(255, 255, 255, 0.78); box-shadow: 0 2px 0 var(--line); text-align: center; }
.egg img { width: 78px; height: 78px; object-fit: contain; filter: drop-shadow(0 4px 5px rgba(0, 0, 0, 0.15)); }
.egg b { font: 800 14px var(--display); } .egg small { font: 700 12px var(--body); color: var(--muted); }
.egg-bar { width: 100%; height: 7px; border-radius: 99px; background: rgba(20, 45, 90, 0.1); overflow: hidden; }
.egg-bar i { display: block; height: 100%; border-radius: 99px; background: linear-gradient(90deg, #3fd26a, #9be35a); }
.egg.ready { box-shadow: 0 0 0 3px #ffc933, 0 6px 18px rgba(255, 180, 0, 0.3); }
.egg.ready img { animation: wobble 0.9s ease-in-out infinite; }
@keyframes wobble { 25% { transform: rotate(-8deg); } 75% { transform: rotate(8deg); } }
.egg.empty-slot { min-height: 150px; place-content: center; background: rgba(255, 255, 255, 0.4); border: 2px dashed rgba(107, 124, 153, 0.35); box-shadow: none; }
.egg.empty-slot span { font: 800 14px var(--display); color: var(--ink2); }
.egg .btn { margin-top: 2px; }
#nav a.on-dot::after { content: ""; position: absolute; right: 5px; top: 5px; width: 7px; height: 7px; border-radius: 50%; background: var(--berry); box-shadow: 0 0 0 2px #fff; }
#nav a.tr-dot::after { content: ""; position: absolute; right: 5px; top: 5px; width: 7px; height: 7px; border-radius: 50%; background: var(--sky2); box-shadow: 0 0 0 2px #fff; }

/* ---------- trades ---------- */
.tr-code { display: flex; justify-content: space-between; align-items: center; gap: 10px; background: rgba(255, 255, 255, 0.8); border-radius: 16px; padding: 10px 12px 10px 14px; box-shadow: 0 2px 0 var(--line); margin: 8px 0 10px; }
.tr-code small { display: block; font: 800 11px var(--body); text-transform: uppercase; letter-spacing: 1px; color: var(--muted); }
.tr-code b { font: 800 22px ui-monospace, Menlo, monospace; letter-spacing: 1px; }
.tr-find { display: flex; gap: 8px; }
/* keeping a Box: the wallet, or a key */
.keep-box { max-width: 620px; }
.keep-two { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin: 14px 0 6px; }
.keep-card { background: var(--paper2); border-radius: 18px; padding: 16px; display: grid; gap: 8px; align-content: start; }
.keep-card h3 { margin: 0; font-size: 18px; }
.keep-card p { margin: 0; font-size: 14px; }
.keep-key { display: flex; align-items: center; gap: 8px; background: #fff; border-radius: 12px; padding: 8px 10px; box-shadow: 0 2px 0 var(--line); }
.keep-key code { flex: 1; min-width: 0; font: 800 13px ui-monospace, Menlo, monospace; letter-spacing: 0.5px; overflow-wrap: anywhere; }
.keep-h { margin: 16px 0 8px; }
.keep-warn { margin: 10px 0 0; font-size: 13.5px; }
@media (max-width: 620px) { .keep-two { grid-template-columns: 1fr; } }
.field.small { font-size: 15px; padding: 8px 12px; border-radius: 12px; flex: 1; min-width: 0; text-transform: uppercase; }
.field.small::placeholder { text-transform: none; font-weight: 700; color: var(--muted); }
@media (max-width: 520px) { .tr-find { flex-wrap: wrap; } .tr-find .field { flex: 1 1 100%; } .tr-find .btn { flex: 1 1 100%; } } /* phone: the code gets the whole width */
.tr-h { margin: 14px 0 6px; font-size: 16px; }
.tr-help { font-size: 14px; margin: 10px 0 0; }
.tr-offer { display: flex; justify-content: space-between; align-items: center; gap: 10px; flex-wrap: wrap; background: rgba(255, 255, 255, 0.8); border-radius: 16px; padding: 10px 12px; box-shadow: 0 2px 0 var(--line); margin-top: 8px; }
.tr-deal { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font: 700 13px var(--body); color: var(--ink2); }
.tr-act { display: flex; gap: 6px; }
.tr-mon { display: inline-flex; align-items: center; gap: 5px; background: var(--paper2); border-radius: 99px; padding: 3px 10px 3px 3px; }
.tr-mon img { width: 26px; height: 26px; border-radius: 50%; object-fit: cover; background: #fff; }
.tr-mon b { font: 800 13px var(--display); color: var(--ink); } .tr-mon small { font-size: 11px; color: var(--muted); }
.tr-sel { margin: 4px 0 10px; font: 700 14px var(--body); display: flex; align-items: center; gap: 8px; }
.tr-foot { display: flex; justify-content: space-between; gap: 10px; margin-top: 10px; }

/* ---------- arena ---------- */
.ar-me { display: grid; grid-template-columns: auto auto 1fr; gap: 18px; align-items: center; }
.ar-me small { display: block; font: 800 11px var(--body); text-transform: uppercase; letter-spacing: 1px; color: var(--muted); }
.ar-rating b { display: block; font: 800 44px/1 var(--display); color: var(--ink); } .ar-rating span, .ar-left span { font: 700 13px var(--body); color: var(--ink2); }
.ar-left b { display: block; font: 800 28px/1.1 var(--display); }
.ar-team { display: grid; gap: 6px; justify-items: end; }
.ar-mons { display: flex; gap: 6px; flex-wrap: wrap; }
.ar-mon { display: grid; justify-items: center; gap: 1px; }
.ar-mon img { width: 42px; height: 42px; border-radius: 50%; object-fit: cover; background: #fff; box-shadow: 0 2px 5px rgba(0, 0, 0, 0.18); border: 2px solid #fff; }
.ar-mon small { font: 800 11px var(--display); color: var(--ink2); }
#arena-body { display: grid; gap: 22px; } /* the rating, the challengers and the ladder, each with room to breathe */
.ar-h { margin: 4px 0 -8px; padding-left: 4px; color: #fff; text-shadow: 0 1px 2px rgba(0, 0, 0, 0.4), 0 2px 10px rgba(0, 0, 0, 0.35); }
.ar-opps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.ar-opp { display: grid; gap: 8px; padding: 18px; }
.ar-oh { display: flex; justify-content: space-between; align-items: center; } .ar-oh b { font: 800 20px var(--display); }
.ar-r { font: 800 16px var(--display); background: var(--paper2); border-radius: 99px; padding: 3px 10px; }
.ar-kind { font: 700 12px var(--body); color: var(--muted); }
.ar-opp .btn { justify-self: start; }
@media (max-width: 1080px) { .mis-two, .box-two { grid-template-columns: 1fr; } .ar-opps { grid-template-columns: 1fr 1fr; } }
@media (max-width: 720px) {
  .ar-me { grid-template-columns: 1fr 1fr; } .ar-team { grid-column: 1 / -1; justify-items: start; }
  .ar-opps { grid-template-columns: 1fr; }
  .feat-day { grid-template-columns: 1fr; text-align: center; justify-items: center; }
  .egg-row { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
.mart-item .egg-ic { width: 40px; height: 40px; object-fit: contain; }
.dex-top { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; margin-top: 14px; }
.dex-top .seg { margin-top: 0; }

/* readable text on see-through HUD glass, whatever is behind */
.hud-card, .ev, .hud-missions, .cap-plate, .bt-plate, .place-banner, .play-hint, #nav a:not(.on), .balls-hud, .cap-ball, .cap-run, .bt-side button:not(.btn), .bt-move, .cap-say, .bt-say { text-shadow: var(--halo); }
.hud-row .chip, .cap-tags .type, .cap-tags .rar, .bt-name .type { text-shadow: 0 1px 0 rgba(0, 0, 0, 0.25); }
.ev-legend.open { background: linear-gradient(135deg, rgba(255, 240, 180, 0.5), rgba(255, 207, 51, 0.42)); }
.ev-golden.open { background: linear-gradient(135deg, rgba(255, 243, 176, 0.55), rgba(255, 184, 28, 0.45)); }
.hud-ic { background: rgba(255, 255, 255, 0.4); }
.hud-toggle span, .hud-row .m, .ev .et small, .hm-row, .hm-head small, .hud-row.hidden-row .s { color: #1f2d45; font-weight: 800; }

/* ---------- minimap label ---------- */
.mini-label { position: absolute; left: 50%; bottom: -9px; transform: translateX(-50%); white-space: nowrap; padding: 3px 10px; border-radius: 99px; font: 800 11.5px var(--display); color: var(--ink);
  background: rgba(255, 255, 255, 0.82); backdrop-filter: var(--blur); -webkit-backdrop-filter: var(--blur); box-shadow: 0 3px 10px rgba(0, 0, 0, 0.18); pointer-events: none; }
.hud-right .minimap { margin-bottom: 8px; }

/* ---------- region map ---------- */
#modal:has(.map-modal) { padding: 12px; background: rgba(8, 20, 34, 0.5); backdrop-filter: blur(3px); }
.map-modal { width: min(1200px, 100%); height: min(780px, calc(100vh - 24px)); display: grid; grid-template-columns: minmax(0, 1fr) 330px; border-radius: 28px; overflow: hidden;
  background: rgba(255, 255, 255, 0.78); backdrop-filter: blur(14px) saturate(1.4); -webkit-backdrop-filter: blur(14px) saturate(1.4); box-shadow: 0 30px 80px rgba(0, 0, 0, 0.4), inset 0 0 0 1px rgba(255, 255, 255, 0.7); animation: pop 0.3s cubic-bezier(0.2, 1.2, 0.4, 1) both; }
.mm-view { position: relative; overflow: hidden; background: #183a24; cursor: grab; touch-action: none; user-select: none; }
.mm-view.grabbing { cursor: grabbing; }
.mm-stage { position: absolute; left: 0; top: 0; transform-origin: 0 0; will-change: transform; --inv: 1; }
.mm-photo { position: absolute; inset: 0; width: 100%; height: 100%; display: block; pointer-events: none; filter: saturate(1.12) contrast(1.04); }
.mm-view::after { content: ""; position: absolute; inset: 0; pointer-events: none; box-shadow: inset 0 0 90px rgba(0, 20, 10, 0.35); }
.mm-dots { position: absolute; inset: 0; pointer-events: none; }
.mm-dot { position: absolute; width: 11px; height: 11px; border-radius: 50%; border: 2px solid rgba(10, 20, 35, 0.8); transform: translate(-50%, -50%) scale(var(--inv)); box-shadow: 0 1px 3px rgba(0, 0, 0, 0.35); }
.mm-dot.big { width: 15px; height: 15px; animation: dotpulse 1.6s ease-in-out infinite; }
@keyframes dotpulse { 50% { box-shadow: 0 0 0 6px rgba(255, 220, 80, 0.35); } }
.mm-place { position: absolute; z-index: 2; display: flex; align-items: center; gap: 7px; padding: 4px 13px 4px 4px; border: 0; border-radius: 99px; cursor: pointer; white-space: nowrap;
  transform: translate(-50%, -50%) scale(var(--inv)); background: rgba(255, 255, 255, 0.88); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.28), inset 0 0 0 1px rgba(255, 255, 255, 0.9); transition: box-shadow 0.2s, background 0.2s; }
.mm-place:hover { background: #fff; box-shadow: 0 8px 24px rgba(0, 0, 0, 0.35), 0 0 0 3px rgba(63, 210, 106, 0.8); }
.mp-i { width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center; font-size: 17px; background: linear-gradient(180deg, #ffffff, #e8f1fb); box-shadow: inset 0 -2px 0 rgba(20, 45, 90, 0.08); }
.mp-t { display: grid; line-height: 1.05; text-align: left; } .mp-t b { font: 800 15px var(--display); color: var(--ink); } .mp-t small { font: 800 11px var(--body); color: #1f7a3a; }
.mm-place.here { box-shadow: 0 6px 18px rgba(0, 0, 0, 0.28), 0 0 0 3px #3fd26a; }
.mm-place.feat { box-shadow: 0 6px 18px rgba(0, 0, 0, 0.28), 0 0 0 3px #5fb8ff; }
.mm-place.gold { background: linear-gradient(135deg, #fff7cc, #ffd24a); animation: goldpulse 1.4s ease-in-out infinite; }
.mm-me { position: absolute; z-index: 3; width: 36px; height: 36px; transform: translate(-50%, -50%) scale(var(--inv)); display: grid; place-items: center; pointer-events: none;
  filter: drop-shadow(0 0 1.5px #fff) drop-shadow(0 0 1.5px #fff) drop-shadow(0 3px 4px rgba(0, 0, 0, 0.45)); }
.mm-me::before { content: ""; position: absolute; inset: 0; border-radius: 50%; background: rgba(255, 59, 92, 0.28); animation: mepulse 1.8s ease-out infinite; }
@keyframes mepulse { from { transform: scale(0.5); opacity: 1; } to { transform: scale(1.5); opacity: 0; } }
.mm-me i { width: 20px; height: 24px; background: #ff3b5c; clip-path: polygon(50% 0, 100% 100%, 50% 74%, 0 100%); }
.mm-compass { position: absolute; left: 14px; top: 14px; width: 42px; height: 42px; border-radius: 50%; display: grid; place-items: center; font: 800 18px var(--display); color: #c2263f;
  background: rgba(255, 255, 255, 0.9); box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25); pointer-events: none; }
.mm-compass::before { content: ""; position: absolute; top: -7px; left: 50%; transform: translateX(-50%); border: 6px solid transparent; border-bottom: 8px solid #c2263f; }
.mm-zoom { position: absolute; right: 14px; bottom: 14px; display: grid; gap: 6px; }
.mm-zoom button { width: 42px; height: 42px; border: 0; border-radius: 14px; font: 800 22px var(--display); color: var(--ink); background: rgba(255, 255, 255, 0.9); box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25); }
.mm-zoom button:hover { background: #fff; } .mm-zoom button:active { transform: scale(0.94); }
.mm-legend { position: absolute; left: 14px; bottom: 14px; display: flex; gap: 10px; flex-wrap: wrap; max-width: calc(100% - 90px); padding: 7px 12px; border-radius: 14px; background: rgba(255, 255, 255, 0.88);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2); font: 800 11.5px var(--display); color: var(--ink); pointer-events: none; }
.mm-legend span { display: inline-flex; align-items: center; gap: 4px; }
.mm-legend i { width: 10px; height: 10px; border-radius: 50%; border: 2px solid rgba(10, 20, 35, 0.75); }
.mm-legend i.me { background: #ff3b5c; border-color: #fff; box-shadow: 0 0 0 1px #ff3b5c; }
.mm-pop { position: absolute; z-index: 5; width: 224px; display: grid; gap: 4px; padding: 12px 14px; border-radius: 18px; background: #ffffff; box-shadow: 0 14px 36px rgba(0, 0, 0, 0.3); animation: pop 0.2s both; cursor: default; }
.mm-pop b { font: 800 17px var(--display); } .mm-pop small { font: 700 12px var(--body); color: var(--ink2); } .mm-pop span { font: 700 13px var(--body); color: #1f7a3a; }
.mm-pop .btn { margin-top: 6px; justify-self: start; }
.mm-side { display: flex; flex-direction: column; min-height: 0; padding: 18px 16px 16px; gap: 10px; }
.mm-head { display: flex; justify-content: space-between; align-items: center; } .mm-head h2 { margin: 0; font-size: 26px; }
.mm-x { width: 38px; height: 38px; border: 0; border-radius: 50%; font-size: 20px; background: rgba(240, 244, 250, 0.95); }
.mm-help { margin: 0; font-size: 13px; color: var(--ink2); }
.mm-list { display: grid; gap: 8px; overflow-y: auto; padding: 2px; margin: 0 -2px; }
.mm-card { display: grid; grid-template-columns: 42px minmax(0, 1fr) auto; gap: 10px; align-items: center; padding: 9px 10px; border: 0; border-radius: 16px; text-align: left; cursor: pointer;
  background: rgba(255, 255, 255, 0.75); box-shadow: 0 2px 0 rgba(20, 45, 90, 0.08); transition: background 0.15s, transform 0.15s; }
.mm-card:hover { background: #fff; transform: translateX(2px); }
.mc-i { width: 42px; height: 42px; border-radius: 14px; display: grid; place-items: center; font-size: 22px; background: linear-gradient(180deg, #eef6ff, #dfeaf7); }
.mc-t { display: grid; gap: 2px; min-width: 0; } .mc-t b { font: 800 15px var(--display); color: var(--ink); } .mc-t small { font: 700 11.5px var(--body); color: var(--ink2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mc-n { font: 700 11px var(--body); color: var(--muted); text-align: right; white-space: nowrap; } .mc-n b { display: block; font: 800 18px var(--display); color: #1f7a3a; }
.mm-card.here { box-shadow: 0 0 0 2px #3fd26a inset; } .mm-card.here .mc-n { color: #1f7a3a; font-weight: 800; }
.mm-card.gold { background: linear-gradient(135deg, rgba(255, 247, 204, 0.95), rgba(255, 214, 90, 0.85)); }
.mp-tag { font: 800 10.5px var(--display); font-style: normal; justify-self: start; padding: 2px 8px; border-radius: 99px; }
.mp-tag.gold { background: #ffcc33; color: #5a3a00; } .mp-tag.feat { background: #d9edff; color: #1d5fc2; }
.mp-tag.soon { background: #fff2cc; color: #8a6200; }
@media (max-width: 860px) {
  #modal:has(.map-modal) { padding: 0; }
  .map-modal { width: 100vw; height: 100dvh; border-radius: 0; grid-template-columns: minmax(0, 1fr); grid-template-rows: minmax(0, 1.25fr) minmax(0, 1fr); }
  .mm-side { padding: 12px 12px 10px; } .mm-head h2 { font-size: 22px; } .mm-help { display: none; }
  .mm-legend { font-size: 10px; gap: 6px; padding: 5px 8px; max-width: calc(100% - 76px); }
  .mm-zoom button { width: 38px; height: 38px; }
  .mp-i { width: 26px; height: 26px; font-size: 14px; } .mp-t b { font-size: 12.5px; } .mp-t small { font-size: 10px; } .mm-place { padding: 3px 10px 3px 3px; }
}