/* The Pokébot region (Round 3, 2026-10-07): the map drawn in the browser by public/js/map.js — the bot's /map, here to hover and click. */
.map-wrap { position:relative; padding:0; overflow:hidden; border-radius:var(--r-lg); background:#0E2440; }
.map-wrap canvas { display:block; width:100%; height:auto; cursor:default; }
.map-wrap canvas.on-town { cursor:pointer; }
.map-tip { position:absolute; z-index:3; pointer-events:none; min-width:180px; max-width:260px; padding:10px 12px; border-radius:12px; background:rgba(6,10,24,.92); box-shadow:0 0 0 1px var(--line-2), 0 10px 30px rgba(0,0,0,.5); font-size:.82rem; color:var(--muted); }
.map-tip b { display:block; color:var(--text); font-size:.95rem; margin-bottom:2px; }
.map-tip .tip-icon { float:left; width:36px; height:36px; border-radius:50%; margin:0 10px 4px 0; }
.map-tip .t { display:inline-block; padding:1px 8px; border-radius:999px; font-size:.68rem; font-weight:700; color:#fff; text-transform:uppercase; letter-spacing:.06em; margin-right:6px; }
.map-tip .g { display:block; margin-top:4px; color:#ffe39a; }
.map-legend { position:absolute; right:12px; bottom:12px; display:flex; flex-wrap:wrap; gap:6px 14px; padding:8px 12px; border-radius:12px; background:rgba(6,10,24,.78); font-size:.74rem; color:rgba(255,255,255,.85); max-width:calc(100% - 24px); }
.map-legend .dot { display:inline-block; width:10px; height:10px; border-radius:50%; background:rgba(255,255,255,.55); margin-right:6px; vertical-align:-1px; }
.map-legend .dot.visited { background:#FFF6D8; }
.map-legend .dot.ring { background:none; box-shadow:inset 0 0 0 2px #FFD66E; }
.map-legend .dot.hubd { background:#E8C766; box-shadow:0 0 0 3px rgba(255,214,110,.35); }
.map-legend .dot.gym { background:none; box-shadow:inset 0 0 0 2px #fff; border-radius:3px; }
.beasts { display:grid; grid-template-columns:repeat(auto-fit, minmax(240px, 1fr)); gap:12px; }
.beast { display:flex; gap:12px; align-items:center; padding:12px 14px; border-radius:16px; background:var(--bg2); box-shadow:inset 0 0 0 1px var(--line); text-decoration:none; color:inherit; min-width:0; }
.beast img { width:72px; height:72px; image-rendering:pixelated; flex:none; }
.beast b { display:block; font-family:var(--font-d); font-size:1rem; }
.beast span { color:var(--muted); font-size:.84rem; }
.beast:hover { box-shadow:inset 0 0 0 1px var(--line-2); }
.gym-list { display:grid; grid-template-columns:repeat(auto-fill, minmax(260px, 1fr)); gap:10px; }
.gym-row { display:grid; grid-template-columns:auto 1fr auto; gap:10px; align-items:center; padding:10px 12px; border-radius:14px; background:rgba(255,255,255,.03); box-shadow:inset 0 0 0 1px var(--line); color:inherit; text-decoration:none; min-width:0; }
.gym-row:hover { background:rgba(168,120,255,.08); }
.gym-row .ty { width:14px; height:14px; border-radius:50%; }
.gym-row b { display:block; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.gym-row small { color:var(--muted); }
.gym-row .badge-mine { font-size:.72rem; font-weight:700; color:#ffe39a; }
/* the town on a server's page */
.town-card { display:grid; grid-template-columns:auto 1fr; gap:16px; align-items:center; padding:16px 18px; border-radius:var(--r-lg); background:var(--bg2); box-shadow:inset 0 0 0 1px var(--line); margin:0 0 14px; }
.town-card .tr { width:96px; height:96px; image-rendering:pixelated; }
.town-card h3 { font-family:var(--font-d); font-size:1.1rem; margin:0 0 4px; }
.town-card .team { display:flex; gap:4px; margin-top:6px; flex-wrap:wrap; }
.town-card .team img { width:48px; height:48px; image-rendering:pixelated; background:rgba(0,0,0,.25); border-radius:10px; }
.town-card .pill { display:inline-block; padding:2px 10px; border-radius:999px; font-size:.72rem; font-weight:700; color:#fff; text-transform:uppercase; letter-spacing:.06em; }
@media (max-width: 640px) { .map-legend { position:static; border-radius:0; } .town-card { grid-template-columns:1fr; } }