/* ── The game beyond the binder (2026-09-30): League, hunts, servers, the trainer's own numbers ─────────
   Loaded on profiles and the dashboard after db.css; drawn by /js/trainergame.js from /api/profile/:uid/game. */

/* the 18 types — used by the party's type chips, the gym badges and the Elite Four */
.t-normal { --tc:#a8a77a; } .t-fire { --tc:#ee8130; } .t-water { --tc:#6390f0; } .t-electric { --tc:#f7d02c; } .t-grass { --tc:#7ac74c; } .t-ice { --tc:#96d9d6; }
.t-fighting { --tc:#c22e28; } .t-poison { --tc:#a33ea1; } .t-ground { --tc:#e2bf65; } .t-flying { --tc:#a98ff3; } .t-psychic { --tc:#f95587; } .t-bug { --tc:#a6b91a; }
.t-rock { --tc:#b6a136; } .t-ghost { --tc:#735797; } .t-dragon { --tc:#6f35fc; } .t-dark { --tc:#705746; } .t-steel { --tc:#b7b7ce; } .t-fairy { --tc:#d685ad; }
.type { display:inline-flex; align-items:center; padding:2px 8px; border-radius:7px; font-size:.64rem; font-weight:800; letter-spacing:.06em; text-transform:uppercase; color:var(--tc, var(--muted)); background:color-mix(in srgb, var(--tc, #888) 16%, transparent); border:1px solid color-mix(in srgb, var(--tc, #888) 45%, transparent); white-space:nowrap; }

/* ── the party ── */
.league, .league > *, .party > *, .league-grid > * { min-width:0; }
.party { display:grid; grid-template-columns:repeat(auto-fill, minmax(168px, 1fr)); gap:12px; margin-bottom:12px; }
.mon { position:relative; display:flex; flex-direction:column; align-items:center; text-align:center; padding:16px 12px 14px; }
.mon.lead { border-color:rgba(255,201,77,.4); box-shadow:0 0 0 1px rgba(255,201,77,.15), 0 14px 34px rgba(124,58,237,.18); }
.mon .tile-badges { pointer-events:auto; }
.mon-pic { position:relative; width:96px; height:96px; display:grid; place-items:center; margin:6px 0 4px; }
.mon-pic::before { content:''; position:absolute; inset:14px 10px 4px; border-radius:50%; background:radial-gradient(closest-side, color-mix(in srgb, var(--tc, #7c3aed) 40%, transparent), transparent); filter:blur(6px); }
.mon-pic img { position:relative; width:96px; height:96px; object-fit:contain; image-rendering:pixelated; image-rendering:crisp-edges; }
.mon-pic img.anim { image-rendering:auto; }
.mon-name { font-weight:800; font-size:.92rem; line-height:1.2; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:100%; }
.mon-nick { font-size:.74rem; color:var(--muted); font-style:italic; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:100%; }
.mon-lvl { display:inline-block; margin-top:5px; padding:1px 9px; border-radius:8px; font-family:var(--font-d); font-weight:700; font-size:.7rem; color:var(--gold); background:rgba(255,201,77,.1); border:1px solid rgba(255,201,77,.35); font-variant-numeric:tabular-nums; }
.mon-types { display:flex; flex-wrap:wrap; justify-content:center; gap:4px; margin-top:8px; }
.mon-bond { display:flex; align-items:center; gap:6px; margin-top:9px; font-size:.7rem; color:var(--dim); }
.mon-bond .hearts { letter-spacing:1px; font-size:.8rem; line-height:1; color:var(--pink); }
.mon-bond .hearts i { font-style:normal; opacity:.22; }
.mon-abil { margin-top:5px; font-size:.68rem; color:var(--dim); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:100%; }
.mon.shiny .mon-pic::before { background:radial-gradient(closest-side, rgba(255,94,162,.5), rgba(168,120,255,.35) 60%, transparent); }
.mon-empty { display:grid; place-items:center; align-content:center; gap:4px; min-height:150px; border-radius:var(--r-lg); border:2px dashed rgba(255,255,255,.1); color:var(--dim); font-size:.78rem; }

/* ── KPIs with a bar inside ── */
.league-kpis { margin-bottom:12px; }
.league-kpis .kpi .v .sm { font-size:1.2rem; }
.kpi .bar { height:5px; border-radius:5px; background:rgba(255,255,255,.06); overflow:hidden; margin-top:8px; }
.kpi .bar i { display:block; height:100%; width:100%; transform:scaleX(0); transform-origin:left; background:linear-gradient(90deg, var(--violet), var(--green)); transition:transform .8s var(--ease); }
.kpi .v .net { font-size:.8rem; font-weight:700; margin-left:6px; }
.net.up { color:var(--green); } .net.down { color:var(--red); }

/* ── badges + Elite Four ── */
.league-grid { display:grid; grid-template-columns:minmax(0, 1.25fr) minmax(0, .75fr); gap:12px; align-items:start; }
.gyms { display:grid; grid-template-columns:repeat(8, minmax(0, 1fr)); gap:6px; }
.gym { display:flex; flex-direction:column; align-items:center; gap:6px; text-align:center; min-width:0; }
.gym-disc { width:44px; height:44px; border-radius:50%; display:grid; place-items:center; font-family:var(--font-d); font-weight:800; font-size:.9rem; color:#0c0718; background:radial-gradient(circle at 35% 30%, #fff 0, color-mix(in srgb, var(--tc, #888) 85%, #fff) 20%, var(--tc, #888) 60%, color-mix(in srgb, var(--tc, #888) 55%, #000) 100%); box-shadow:0 0 0 2px rgba(255,255,255,.18), 0 0 18px color-mix(in srgb, var(--tc, #888) 55%, transparent), inset 0 -2px 4px rgba(0,0,0,.35); transition:transform .25s var(--ease); }
.gym-name { font-size:.66rem; font-weight:700; line-height:1.2; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:100%; }
.gym-badge { font-size:.6rem; color:var(--dim); line-height:1.2; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:100%; }
.gym.off .gym-disc { filter:grayscale(1); opacity:.28; box-shadow:0 0 0 2px rgba(255,255,255,.08); }
.gym.off .gym-name, .gym.off .gym-badge { color:var(--dim); opacity:.7; }
.gym:not(.off):hover .gym-disc { transform:scale(1.08); }
.elite { display:grid; gap:6px; }
.e4 { display:grid; grid-template-columns:34px minmax(0, 1fr) auto; gap:10px; align-items:center; padding:7px 10px; border-radius:10px; background:rgba(255,255,255,.03); font-size:.84rem; }
.e4-n { width:34px; height:34px; border-radius:10px; display:grid; place-items:center; font-family:var(--font-d); font-weight:800; font-size:.8rem; color:#0c0718; background:var(--tc, var(--muted)); box-shadow:0 0 14px color-mix(in srgb, var(--tc, #888) 45%, transparent); }
.e4 b { font-weight:700; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.e4 small { display:block; font-size:.7rem; color:var(--dim); }
.e4 .st { font-size:.7rem; font-weight:700; letter-spacing:.06em; text-transform:uppercase; color:var(--green); white-space:nowrap; }
.e4.off .e4-n { filter:grayscale(1); opacity:.3; box-shadow:none; }
.e4.off b { color:var(--dim); } .e4.off .st { color:var(--dim); opacity:.6; }
.e4.champ { background:linear-gradient(90deg, rgba(255,201,77,.12), rgba(255,255,255,.02)); border:1px solid rgba(255,201,77,.35); }
.e4.champ.off { background:rgba(255,255,255,.03); border-color:transparent; }
.e4.champ .e4-n { background:linear-gradient(135deg, #ffc94d, #ff9f1c); }
.e4.frontier { border:1px dashed rgba(255,255,255,.14); }   /* 🏛️ Hoenn's Battle Frontier row (Phase 4, 2026-10-29): only on a run whose feed carries `frontier` */
.e4.frontier .e4-n { background:linear-gradient(135deg, #9fd3ff, #5b8def); font-size:1rem; }

/* ── 🌍 the League Region switcher (Hoenn Phase 0, 2026-10-23): the site's .tabs pills over the League section, only for a trainer who started another region;
   the region they stand in wears a small "here" ── */
.region-tabs { margin-bottom:12px; }
.region-tabs button { display:inline-flex; align-items:center; gap:7px; }
.region-tabs .rg-here { font-size:.6rem; font-weight:800; letter-spacing:.08em; text-transform:uppercase; padding:1px 7px; border-radius:7px; color:var(--green); background:color-mix(in srgb, var(--green) 14%, transparent); border:1px solid color-mix(in srgb, var(--green) 40%, transparent); }
.region-tabs button.active .rg-here { color:#fff; background:rgba(255,255,255,.16); border-color:rgba(255,255,255,.32); }

/* ── hunting ── */
.hunts.tiles.sm .tile-foot { white-space:normal; line-height:1.35; }
.found { display:flex; flex-wrap:wrap; gap:8px; margin-top:16px; }
.found-row { display:flex; align-items:center; gap:10px; padding:6px 12px 6px 6px; border-radius:12px; background:rgba(94,255,166,.06); border:1px solid rgba(94,255,166,.25); color:inherit; text-decoration:none; font-size:.8rem; min-width:0; max-width:100%; transition:.15s; }
a.found-row:hover { border-color:var(--green); }
.found-row img { width:30px; aspect-ratio:600/825; object-fit:cover; border-radius:4px; background:var(--bg3); flex:none; }
.found-row span { display:flex; flex-direction:column; min-width:0; }
.found-row b { font-weight:700; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.found-row small { color:var(--green); font-size:.7rem; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.hunt-empty { grid-column:1 / -1; padding:22px 16px; text-align:center; color:var(--muted); font-size:.9rem; }
.hint-line code.cmd { cursor:pointer; }

/* ── plays in ── */
.plays-in { display:flex; flex-wrap:wrap; align-items:center; gap:8px; margin:-2px 0 14px; font-size:.8rem; color:var(--dim); }
.plays-in .chips a { display:inline-flex; align-items:center; gap:7px; padding:5px 12px 5px 6px; text-transform:none; letter-spacing:0; }
.plays-in .chips a:not(:has(img)) { padding-left:12px; }
.plays-in img { width:20px; height:20px; border-radius:50%; object-fit:cover; background:var(--bg3); }
.plays-in .n { color:var(--dim); font-weight:500; }

/* ── the dashboard: the trainer's own numbers + today's quests ── */
.game-top { display:grid; grid-template-columns:minmax(0, 1.15fr) minmax(0, .85fr); gap:12px; margin-bottom:14px; }
.game-top > * { min-width:0; }
.eco { display:grid; grid-template-columns:repeat(3, minmax(0, 1fr)); gap:8px; }
.eco-cell { padding:10px 12px; border-radius:12px; background:rgba(255,255,255,.03); border:1px solid var(--line); min-width:0; }
.eco-cell .k { font-size:.64rem; letter-spacing:.09em; text-transform:uppercase; color:var(--muted); }
.eco-cell .v { font-family:var(--font-d); font-weight:700; font-size:1.2rem; color:var(--gold); margin-top:3px; letter-spacing:-.02em; line-height:1.1; font-variant-numeric:tabular-nums; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.eco-cell .v.gem { color:#c9b3ff; } .eco-cell .v.shard { color:var(--cyan); }
.eco-cell .v.ready { color:var(--green); font-size:1rem; }
.eco-cell .v.wait { color:var(--text); font-size:1rem; }
.eco-cell .s { font-size:.7rem; color:var(--dim); margin-top:3px; min-height:1.1em; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.eco-cell .s code.cmd { font-size:.9em; padding:0 6px; cursor:pointer; }
.eco-cell.hot { border-color:rgba(94,255,166,.4); background:rgba(94,255,166,.06); }
.eco-meter { display:flex; gap:3px; margin-top:7px; }
.eco-meter i { flex:1; height:5px; border-radius:5px; background:rgba(255,255,255,.07); }
.eco-meter i.on { background:linear-gradient(90deg, var(--violet), var(--pink)); }

.quests { display:grid; gap:8px; }
.quest { display:grid; grid-template-columns:22px minmax(0, 1fr) auto; gap:4px 10px; align-items:center; font-size:.84rem; }
.quest .chk { width:22px; height:22px; border-radius:7px; display:grid; place-items:center; font-size:.72rem; font-weight:800; border:1px solid var(--line-2); color:transparent; background:rgba(255,255,255,.03); }
.quest.done .chk { color:#0c0718; background:var(--green); border-color:transparent; box-shadow:0 0 12px rgba(94,255,166,.4); }
.quest .lbl { font-weight:600; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.quest.done .lbl { color:var(--muted); text-decoration:line-through; text-decoration-color:rgba(255,255,255,.3); }
.quest .cnt { font-size:.74rem; color:var(--dim); font-variant-numeric:tabular-nums; white-space:nowrap; }
.quest .cnt b { color:var(--text); font-weight:600; }
.quest .bar { grid-column:2 / -1; height:5px; border-radius:5px; background:rgba(255,255,255,.06); overflow:hidden; }
.quest .bar i { display:block; height:100%; width:100%; transform:scaleX(0); transform-origin:left; background:linear-gradient(90deg, var(--violet), var(--pink)); transition:transform .8s var(--ease); }
.quest.done .bar i { background:var(--green); }
.q-sub { display:flex; align-items:baseline; justify-content:space-between; gap:12px; margin:14px 0 10px; }
.q-sub h4 { font-size:.68rem; letter-spacing:.1em; text-transform:uppercase; color:var(--muted); font-weight:700; }
.q-sub span { font-size:.72rem; color:var(--dim); }
.q-foot { margin-top:12px; font-size:.76rem; color:var(--dim); display:flex; flex-wrap:wrap; gap:6px 14px; }
.q-foot b { color:var(--text); font-weight:600; }
.q-foot .all { color:var(--green); font-weight:700; }

@media (max-width:1000px) { .league-grid, .game-top { grid-template-columns:1fr; } }
@media (max-width:720px) {
  .party { grid-template-columns:repeat(auto-fill, minmax(140px, 1fr)); gap:8px; }
  .mon { padding:12px 8px 12px; } .mon-empty ~ .mon-empty { display:none; } .mon-empty { min-height:120px; }
  .gyms { grid-template-columns:repeat(4, minmax(0, 1fr)); gap:10px 6px; }
  .eco { grid-template-columns:repeat(2, minmax(0, 1fr)); }
}
@media (max-width:400px) { .party { grid-template-columns:repeat(2, minmax(0, 1fr)); } }

/* ── the Arena on a trainer's page (2026-10-08): rank, record, Tower best, cups, read live from the Arena's own APIs ── */
/* Wave 2: beyond the cards — the level / season / duel / town / journey / Hall of Fame strip on a profile */
.trainer-kpis { margin-bottom:12px; }
.trainer-kpis .kpi .v .sm { font-size:1.05rem; line-height:1.3; }
.trainer-rows { display:grid; gap:12px; }
.trow { padding:12px 14px; border-radius:14px; background:rgba(255,255,255,.03); box-shadow:inset 0 0 0 1px var(--line); }
.trow h4 { margin:0 0 8px; font-size:.72rem; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:var(--muted); }
.trow h4 small { font-weight:600; letter-spacing:0; text-transform:none; color:var(--dim); margin-left:6px; }
.tchips { display:flex; flex-wrap:wrap; gap:8px; }
.tchip { display:inline-flex; align-items:center; gap:8px; padding:6px 12px 6px 8px; border-radius:24px; font-size:.82rem; font-weight:600; color:var(--text); background:rgba(255,255,255,.04); box-shadow:inset 0 0 0 1px var(--line); text-decoration:none; }
.tchip i { width:14px; height:14px; border-radius:50%; background:radial-gradient(circle at 35% 30%, #fff 0, color-mix(in srgb, var(--tc, #888) 85%, #fff) 20%, var(--tc, #888) 60%, color-mix(in srgb, var(--tc, #888) 55%, #000) 100%); box-shadow:0 0 8px color-mix(in srgb, var(--tc, #888) 55%, transparent); }
.tchip small { color:var(--dim); font-weight:500; }
.tchip.jb { background:rgba(246,227,160,.08); box-shadow:inset 0 0 0 1px rgba(246,227,160,.25); }
a.tchip:hover { box-shadow:inset 0 0 0 1px var(--line-2); }
.hof-team { display:flex; flex-wrap:wrap; gap:10px; }
.hof-mon { display:grid; justify-items:center; gap:2px; width:84px; padding:8px 4px; border-radius:12px; background:linear-gradient(180deg, rgba(246,227,160,.1), rgba(246,227,160,.03)); box-shadow:inset 0 0 0 1px rgba(246,227,160,.3); font-size:.74rem; text-align:center; }
.hof-mon img { width:64px; height:64px; image-rendering:pixelated; }
.hof-mon b { max-width:100%; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.hof-mon small { color:var(--dim); }
.hof-mon.shiny { box-shadow:inset 0 0 0 1px rgba(255,255,255,.5), 0 0 14px rgba(246,227,160,.25); }
.arena-kpis { margin-bottom:10px; }
.arena-kpis .kpi .v.sm { font-size:1.05rem; line-height:1.3; }
.arena-kpis .tier { display:inline-flex; align-items:center; gap:8px; }
.arena-kpis .tier img { width:30px; height:30px; object-fit:contain; image-rendering:pixelated; }
.tchip.crest { background:rgba(255,214,110,.08); box-shadow:inset 0 0 0 1px rgba(255,214,110,.4); }   /* a town's Town Crest: all seven badges (2026-10-09) */