/* Legend World — clear, consistent, responsive game UI */
:root {
  color-scheme: dark;
  --bg: #07111f;
  --surface: rgba(11, 23, 39, .94);
  --surface-raised: rgba(17, 33, 52, .98);
  --surface-soft: rgba(7, 17, 30, .78);
  --line: rgba(157, 188, 218, .19);
  --line-strong: rgba(121, 199, 241, .39);
  --text: #eff7ff;
  --muted: #a0b3c9;
  --blue: #39bdf2;
  --purple: #8b82ff;
  --green: #4dd6a5;
  --gold: #f6cd6a;
  --danger: #ff8296;
  --shadow: 0 18px 48px rgba(0, 0, 0, .34);
  --radius: 16px;
  --edge: 14px;
  --safe-top: env(safe-area-inset-top, 0px);
  --safe-right: env(safe-area-inset-right, 0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);
  --safe-left: env(safe-area-inset-left, 0px);
}

*, *::before, *::after { box-sizing: border-box; }
html, body { position: fixed; inset: 0; width: 100%; height: 100%; height: 100dvh; margin: 0; padding: 0; overflow: hidden; overscroll-behavior: none; }
body { background: var(--bg); color: var(--text); font-family: Mitr, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }
button, input { font: inherit; -webkit-tap-highlight-color: transparent; }
button { color: inherit; border: 0; cursor: pointer; font-weight: 650; touch-action: manipulation; transition: transform .15s ease, filter .15s ease, border-color .15s ease, background .15s ease, box-shadow .15s ease; }
button:hover { filter: brightness(1.08); }
button:active { transform: translateY(1px) scale(.985); }
:focus-visible { outline: 2px solid #82dcff; outline-offset: 3px; }
[hidden] { display: none !important; }

/* Map is the play space: all interface elements float above it. */
.layout { position: fixed; inset: 0; width: 100vw; height: 100vh; height: 100dvh; display: block; max-width: none; margin: 0; padding: 0; }
.map-wrap { position: absolute; inset: 0; width: 100%; height: 100%; min-height: 0; overflow: hidden; background: #a9c9b1; }
#map { position: absolute; inset: 0; z-index: 1; width: 100%; height: 100%; min-height: 0; }
.leaflet-container { background: #b9d6b8; font: inherit; }
.leaflet-tile { filter: saturate(1.08) contrast(1.025); }
.map-wrap::after { content: ""; position: absolute; inset: 0; z-index: 340; pointer-events: none; opacity: .035; background: repeating-linear-gradient(to bottom, transparent 0 3px, rgba(3, 12, 20, .28) 4px); }
.weather-rain, .weather-fog { position: absolute; inset: 0; z-index: 330; pointer-events: none; }
.weather-rain { opacity: .24; background-image: repeating-linear-gradient(105deg, transparent 0 21px, rgba(190, 229, 255, .56) 22px, transparent 23px 42px); background-size: 80px 100px; animation: lwRain .65s linear infinite; }
.weather-fog { background: rgba(206, 222, 222, .18); backdrop-filter: blur(1px); }
@keyframes lwRain { from { background-position: 0 0; } to { background-position: 0 100px; } }

/* Global header */
.topbar { position: fixed; z-index: 1200; top: calc(var(--safe-top) + 10px); left: calc(var(--safe-left) + var(--edge)); right: calc(var(--safe-right) + var(--edge)); height: 54px; padding: 7px 14px; display: flex; align-items: center; justify-content: space-between; gap: 12px; border: 1px solid var(--line); border-radius: 17px; background: linear-gradient(112deg, rgba(7, 19, 33, .97), rgba(18, 34, 55, .94)); box-shadow: var(--shadow); backdrop-filter: blur(18px) saturate(1.15); }
.brand { display: flex; align-items: center; min-width: 0; gap: 10px; }
.brand-icon { width: 36px; height: 36px; flex: 0 0 36px; display: grid; place-items: center; border-radius: 12px; color: #fff; font-size: 24px; background: linear-gradient(140deg, #32c6f4, #7164f5); box-shadow: 0 5px 18px rgba(69, 190, 255, .2); }
.brand strong { display: block; color: #f1f8ff; font-size: 14px; line-height: 1.2; font-weight: 850; letter-spacing: 1.25px; white-space: nowrap; }
.brand small { display: block; margin-top: 3px; color: #96abc3; font-size: 9px; letter-spacing: 1.2px; white-space: nowrap; }
.pill { min-width: 0; max-width: 48%; padding: 7px 11px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; border: 1px solid var(--line); border-radius: 999px; color: var(--muted); background: rgba(4, 14, 25, .7); font-size: 11px; font-weight: 650; }
.pill.online { color: #8af1c6; border-color: rgba(77, 214, 165, .35); background: rgba(20, 91, 70, .28); }

/* Player and weather HUD share a baseline and balanced screen gutters. */
.map-hud, .weather-hud { position: fixed; z-index: 1100; top: calc(var(--safe-top) + 76px); min-width: 0; }
.map-hud { left: calc(var(--safe-left) + var(--edge)); right: auto; display: flex; align-items: flex-start; flex-wrap: wrap; gap: 8px; max-width: min(42vw, 440px); pointer-events: none; }
.hud-card { display: flex; align-items: center; min-width: 0; gap: 10px; padding: 10px 12px; border: 1px solid var(--line); border-radius: 14px; background: rgba(9, 22, 38, .93); box-shadow: 0 9px 26px rgba(0, 0, 0, .22); backdrop-filter: blur(14px); }
.hud-card strong, .hud-card small { display: block; max-width: 100%; overflow-wrap: anywhere; }
.hud-card strong { color: #f2f8ff; font-size: 13px; line-height: 1.3; }
.hud-card small { margin-top: 3px; color: var(--muted); font-size: 10px; line-height: 1.35; }
.avatar { width: 34px; height: 34px; flex: 0 0 34px; display: grid; place-items: center; border-radius: 11px; background: linear-gradient(145deg, #19486a, #202f55); font-size: 22px; }
.map-hud .hud-card.compact, .map-hud .health { display: none !important; }
.weather-hud { left: auto; right: calc(var(--safe-right) + var(--edge)); display: flex; align-items: center; gap: 10px; width: max-content; max-width: min(35vw, 320px); padding: 10px 13px; border: 1px solid var(--line-strong); border-radius: 14px; color: var(--text); background: rgba(9, 22, 38, .94); box-shadow: 0 9px 26px rgba(0, 0, 0, .24); backdrop-filter: blur(14px); pointer-events: none; }
.weather-hud > span { flex: 0 0 auto; font-size: 27px; line-height: 1; }
.weather-hud strong, .weather-hud small { display: block; overflow-wrap: anywhere; }
.weather-hud strong { font-size: 12px; line-height: 1.35; }
.weather-hud small { margin-top: 3px; color: var(--muted); font-size: 10px; line-height: 1.4; }

/* Main navigation: one clear active action at a time. */
.game-menu { position: fixed; z-index: 1150; left: calc(var(--safe-left) + var(--edge)); top: 50%; bottom: auto; transform: translateY(-50%); display: flex; flex-direction: column; gap: 5px; padding: 7px; border: 1px solid var(--line); border-radius: 18px; background: rgba(7, 18, 31, .93); box-shadow: var(--shadow); backdrop-filter: blur(16px); }
.game-menu button { width: 54px; min-height: 52px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; flex: 0 0 auto; border: 1px solid transparent; border-radius: 12px; color: #eaf5ff; background: transparent; font-size: 20px; }
.game-menu button span { color: #a9bfd5; font-size: 10px; line-height: 1.15; font-weight: 650; }
.game-menu button:hover { background: rgba(73, 133, 177, .17); border-color: var(--line); }
.game-menu button.active { border-color: rgba(116, 210, 255, .55); background: linear-gradient(145deg, rgba(24, 142, 195, .44), rgba(95, 103, 225, .32)); box-shadow: inset 0 0 0 1px rgba(255,255,255,.035), 0 0 18px rgba(44,165,221,.12); }
.game-menu button.active span { color: #f0f9ff; }

/* Map tools and readable legend */
#recenter.fab { position: fixed; z-index: 1120; left: 12px !important; right: auto !important; bottom: 55px !important; width: 44px; height: 44px; display: grid; place-items: center; border: 1px solid var(--line-strong); border-radius: 14px; color: #f0f8ff; background: rgba(10, 25, 41, .96); box-shadow: 0 10px 26px rgba(0,0,0,.3); font-size: 25px; line-height: 1; }
#recenter.fab:hover { border-color: rgba(104, 211, 255, .7); box-shadow: 0 0 0 4px rgba(57,189,242,.1), 0 10px 26px rgba(0,0,0,.3); }
.leaflet-bottom.leaflet-right .leaflet-control:not(.leaflet-control-attribution) { display: none !important; }
.leaflet-bottom.leaflet-right .leaflet-control-attribution { position: fixed !important; left: auto !important; right: calc(var(--safe-right) + var(--edge)) !important; bottom: calc(var(--safe-bottom) + var(--edge) + clamp(240px, 32dvh, 360px) + 5px) !important; z-index: 1060 !important; margin: 0 !important; max-width: min(42vw, 300px); padding: 2px 6px !important; border-radius: 6px !important; color: #d1dfed !important; background: rgba(8,18,31,.76) !important; font-size: 9px !important; line-height: 1.25; }
.leaflet-control-attribution a { color: #8edbff !important; }
.marker { display: grid; place-items: center; width: 32px; height: 32px; border: 2px solid #fff !important; border-radius: 10px !important; box-shadow: 2px 3px 0 rgba(12, 27, 42, .5) !important; font-size: 21px; }
.marker.player { background: #087db8; }
.marker.other { background: #34506c; }
.marker.wander { background: #dba52b; }
.marker.follow { background: #8d6be6; }
.marker.patrol { background: #159a75; }
.marker.monster { width: 42px; height: 42px; display: flex; align-items: center; justify-content: center; border-color: #f4d77a !important; border-radius: 12px !important; background: #152537; font-size: 27px; line-height: 1; }
.marker.monster.follow { border-color: #c4a5ff !important; }
.marker.monster.patrol { border-color: #7ce4a1 !important; }
.marker.monster.wander { border-color: #f6d66b !important; }
.fab { cursor: pointer; }

/* Shared cards, forms, lists */
.panel { min-width: 0; flex-shrink: 0; padding: 16px; overflow-wrap: anywhere; border: 1px solid rgba(126,166,201,.2); border-radius: 15px; background: linear-gradient(145deg, rgba(20,36,55,.99), rgba(12,25,41,.99)); box-shadow: 0 5px 16px rgba(0,0,0,.12); }
.panel-heading { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 13px; }
.panel h2 { margin: 0; color: #f1f7ff; font-size: 16px; line-height: 1.35; font-weight: 780; letter-spacing: .1px; }
.panel label { display: block; margin-bottom: 6px; color: #b0c3d8; font-size: 12px; font-weight: 650; }
.tag { flex: 0 0 auto; padding: 4px 8px; border: 1px solid rgba(77,214,165,.22); border-radius: 999px; color: #80e8bd; background: rgba(25,103,79,.2); font-size: 10px; font-weight: 750; }
.inline { display: flex; align-items: center; min-width: 0; gap: 8px; }
.inline > * { min-width: 0; }
input { width: 100%; min-width: 0; min-height: 43px; padding: 10px 12px; border: 1px solid rgba(129,170,205,.3); border-radius: 11px; outline: none; color: var(--text); background: rgba(5,15,27,.82); font-size: 14px; }
input::placeholder { color: #8298b1; }
input:focus { border-color: #56c8ff; box-shadow: 0 0 0 3px rgba(56,184,242,.13); }
.primary, .secondary { min-height: 42px; border-radius: 11px; font-size: 13px; font-weight: 750; white-space: normal; }
.primary { padding: 10px 14px; border: 1px solid rgba(255,255,255,.12); color: white; background: linear-gradient(105deg, #159bd5, #6267ed); box-shadow: 0 5px 14px rgba(28,129,202,.16); }
.primary:hover { box-shadow: 0 8px 20px rgba(28,129,202,.24); }
.secondary { padding: 9px 12px; border: 1px solid rgba(150,190,221,.18); color: #e6f3ff; background: #263c55; }
.full { width: 100%; margin-top: 11px; }
.hint { margin: 8px 0 0; color: var(--muted); font-size: 12px; line-height: 1.6; }
.stats { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 8px; margin-top: 14px; }
.stats div { min-width: 0; padding: 11px 9px; border: 1px solid rgba(129,170,205,.18); border-radius: 12px; background: rgba(5,16,29,.55); }
.stats small, .stats strong { display: block; overflow-wrap: anywhere; }
.stats small { color: var(--muted); font-size: 10px; }
.stats strong { margin-top: 4px; color: #f3f8ff; font-size: 20px; letter-spacing: -.4px; }
.nearby { display: flex; flex-direction: column; gap: 9px; }
.nearby.empty, .empty { color: var(--muted); font-size: 12px; line-height: 1.6; }
.creature { display: flex; align-items: center; min-width: 0; gap: 10px; padding: 10px; border: 1px solid rgba(129,170,205,.2); border-radius: 13px; background: rgba(6,17,30,.6); }
.creature .emoji { font-size: 29px; flex: 0 0 auto; }
.creature .info { flex: 1; min-width: 0; }
.creature strong, .creature small { display: block; }
.creature strong { font-size: 13px; }
.creature small { margin-top: 3px; color: var(--muted); font-size: 11px; line-height: 1.45; }
.actions { display: flex; flex-wrap: wrap; gap: 6px; }
.actions button { min-height: 34px; padding: 7px 10px; border-radius: 9px; color: #fff; background: #254767; font-size: 11px; }
.actions .capture { background: #166d5b; }
.quest { padding: 12px 0; border-bottom: 1px solid rgba(129,170,205,.17); }
.quest:last-child { padding-bottom: 0; border-bottom: 0; }
.quest-top { display: flex; justify-content: space-between; gap: 8px; }
.quest strong { font-size: 13px; }
.quest p { margin: 6px 0 9px; color: var(--muted); font-size: 12px; line-height: 1.55; }
.progress { height: 6px; overflow: hidden; border-radius: 999px; background: #26374b; }
.progress span { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, var(--blue), var(--purple)); }
.quest-bottom { display: flex; justify-content: space-between; align-items: center; gap: 8px; margin-top: 8px; color: var(--muted); font-size: 11px; }
.quest-bottom button { min-height: 31px; padding: 6px 10px; border-radius: 8px; color: #c7ffec; background: #165d4c; font-size: 11px; }
.quest-bottom button:disabled { color: #7f91a8; background: #26364a; cursor: default; }
.inventory-list, .party-list { display: flex; flex-direction: column; gap: 9px; max-height: 38vh; overflow: auto; overscroll-behavior: contain; scrollbar-width: thin; scrollbar-color: #3a5875 transparent; }
.inventory-monster, .party-card { display: flex; align-items: center; min-width: 0; gap: 10px; padding: 10px; border: 1px solid rgba(129,170,205,.2); border-radius: 13px; background: rgba(6,17,30,.6); }
.monster-art { width: 46px; height: 46px; flex: 0 0 46px; display: grid; place-items: center; border: 1px solid var(--line); border-radius: 12px; background: #172a3d; font-size: 29px; }
.inventory-monster .info, .party-info { display: flex; flex: 1; min-width: 0; flex-direction: column; gap: 4px; }
.inventory-monster .info strong, .party-info strong { font-size: 13px; overflow-wrap: anywhere; }
.inventory-monster small, .party-info small { color: #a9bfd4; font-size: 11px; line-height: 1.45; }
.party-card button { flex-shrink: 0; }
.my-party { padding: 8px 0; line-height: 1.65; }
#inventory-panel, #party-panel { scroll-margin-top: 10px; }
.sidebar footer { padding: 6px 0 10px; color: #8395aa; font-size: 10px; text-align: center; }

/* Each menu selection gets its own centered, scrollable dialog. */
.panel-backdrop { position: fixed; inset: 0; z-index: 1400; background: rgba(2,8,18,.72); backdrop-filter: blur(7px) saturate(.82); animation: lwFade .16s ease-out; }
.sidebar { position: fixed; z-index: 1500; top: 50%; left: 50%; right: auto; bottom: auto; display: none; flex-direction: column; gap: 10px; width: min(620px, calc(100vw - 80px)); max-height: min(82dvh, 780px); padding: 0 10px 10px; overflow: auto; overscroll-behavior: contain; transform: translate(-50%, -50%); border: 1px solid rgba(136,184,220,.32); border-radius: 21px; background: linear-gradient(155deg, rgba(13,27,44,.99), rgba(7,17,30,.99)); box-shadow: 0 28px 90px rgba(0,0,0,.66), 0 0 0 1px rgba(255,255,255,.025); scrollbar-width: thin; scrollbar-color: #3a5875 transparent; }
.sidebar.open { display: flex; animation: lwModalIn .18s cubic-bezier(.2,.8,.2,1); }
.sidebar .panel[hidden] { display: none !important; }
.sidebar-close { position: sticky; top: 0; z-index: 5; display: flex; flex: 0 0 auto; align-items: center; justify-content: space-between; gap: 10px; margin: 0 -1px; padding: 14px 15px; border-bottom: 1px solid var(--line); border-radius: 19px 19px 0 0; background: rgba(16,30,48,.98); backdrop-filter: blur(16px); }
.sidebar-close strong { font-size: 14px; letter-spacing: .25px; }
.sidebar-close button { padding: 8px 11px; border: 1px solid rgba(150,190,221,.18); border-radius: 9px; background: #263d55; font-size: 12px; }
@keyframes lwFade { from { opacity: 0; } to { opacity: 1; } }
@keyframes lwModalIn { from { opacity: .75; transform: translate(-50%, -49%); } to { opacity: 1; transform: translate(-50%, -50%); } }

/* Persistent chat dock is independent of menu panels. */
.chat-dock { position: fixed !important; z-index: 1250 !important; right: calc(var(--safe-right) + var(--edge)) !important; left: auto !important; top: auto !important; bottom: calc(var(--safe-bottom) + var(--edge)) !important; display: flex !important; flex-direction: column; width: clamp(290px, 27vw, 360px) !important; height: clamp(240px, 32dvh, 360px) !important; min-height: 0 !important; max-height: calc(100dvh - 130px) !important; padding: 12px !important; overflow: hidden; border: 1px solid rgba(119,170,210,.4) !important; border-radius: 18px !important; background: rgba(9,20,34,.96) !important; box-shadow: 0 16px 44px rgba(0,0,0,.42) !important; backdrop-filter: blur(18px) saturate(1.15); pointer-events: auto; }
.chat-dock .panel-heading { flex: 0 0 auto; align-items: center; margin-bottom: 8px; }
.chat-dock .panel-heading h2 { font-size: 13px; letter-spacing: .2px; }
.chat-live { color: #69e9b7; font-size: 10px; font-weight: 800; white-space: nowrap; }
.chat-dock .chat-messages { display: flex; flex: 1 1 auto; flex-direction: column; gap: 7px; min-height: 0; max-height: none !important; padding: 9px; overflow-y: auto; overscroll-behavior: contain; border: 1px solid rgba(129,170,205,.12); border-radius: 11px; background: rgba(3,10,19,.42); scrollbar-width: thin; scrollbar-color: #35516d transparent; }
.message { font-size: 12px; line-height: 1.5; overflow-wrap: anywhere; }
.message strong { margin-right: 5px; color: #72d3ff; }
.message.system { color: #8ea3bb; font-style: italic; }
.chat-dock .chat-form { display: flex; flex: 0 0 auto; gap: 7px; margin-top: 8px; }
.chat-dock .chat-form input { min-height: 42px; padding: 9px 11px; font-size: 13px; }
.chat-dock .chat-form button { width: 42px; min-height: 42px; flex: 0 0 42px; border-radius: 11px; color: #fff; background: linear-gradient(135deg, #148fc9, #536cde); }

/* Sign-in and battle experiences */
.auth-gate { position: fixed; inset: 0; z-index: 5000; display: grid; place-items: center; padding: 18px; background: radial-gradient(circle at 50% 15%, #1a3b59, #08101d 66%); }
.auth-gate[hidden] { display: none !important; }
.auth-card { display: flex; flex-direction: column; gap: 10px; width: min(420px, 100%); max-height: calc(100dvh - 32px); padding: 27px; overflow: auto; border: 1px solid #36516b; border-radius: 22px; background: rgba(16,29,44,.98); box-shadow: 0 24px 80px #0008; }
.auth-logo { width: 58px; height: 58px; align-self: center; display: grid; place-items: center; border-radius: 17px; background: linear-gradient(135deg, #35c2f5, #7964ff); font-size: 32px; }
.auth-card h1 { margin: 0; text-align: center; letter-spacing: 1.8px; font-size: 23px; }
.auth-card p { margin: 0 0 8px; color: var(--muted); text-align: center; }
.auth-card label { color: #b9c9db; font-size: 13px; }
.auth-card input { min-height: 46px; font-size: 16px; }
.auth-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 7px; }
.auth-actions button { min-height: 46px; }
#authStatus { margin-top: 5px; color: var(--muted); text-align: center; line-height: 1.5; }
.battle-overlay { position: fixed; inset: 0; z-index: 4500; display: grid; place-items: center; padding: 16px; background: rgba(3,9,19,.94); }
.battle-overlay[hidden] { display: none !important; }
.battle-scene { width: min(760px,100%); max-height: calc(100dvh - 32px); padding: 17px; overflow: auto; border: 1px solid #6a87a2; border-radius: 20px; background: linear-gradient(160deg,#203d56,#101827 72%); box-shadow: 0 0 0 5px #07111d,0 20px 80px #0009; }
.battle-head { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding-bottom: 11px; border-bottom: 1px solid #526b82; font-weight: 900; letter-spacing: 1.2px; }
.battle-head button { padding: 8px 11px; border-radius: 9px; background: #273b50; }
.battle-arena { display: grid; grid-template-columns: minmax(0,1fr) auto minmax(0,1fr); align-items: center; gap: 12px; min-height: 220px; padding: 20px 8px; background: radial-gradient(ellipse at 50% 70%,#355c65,#20384a 45%,#172b3c 75%); }
.battle-monster { display: flex; flex-direction: column; align-items: center; gap: 6px; min-width: 0; text-align: center; }
.battle-monster > div:first-child { font-size: clamp(54px, 10vw, 90px); filter: drop-shadow(0 7px 0 #0005); animation: lwBob 1.4s ease-in-out infinite; }
.battle-monster.enemy > div:first-child { transform: scaleX(-1); }
.battle-monster strong { font-size: 15px; overflow-wrap: anywhere; }
.battle-monster small { color: #bfd0df; font-size: 12px; }
.battle-hp { width: min(190px,100%); height: 9px; overflow: hidden; border: 1px solid #8aa4b8; border-radius: 999px; background: #3a2532; }
.battle-hp span { display: block; width: 100%; height: 100%; background: linear-gradient(90deg,#f2d35e,#4be0a1); transition: width .25s; }
.battle-vs { color: var(--gold); font-size: 21px; font-weight: 1000; text-shadow: 2px 2px #101827; }
.battle-log { min-height: 58px; margin: 10px 0; padding: 12px; border: 1px solid #314a60; border-radius: 11px; background: #0a1422; line-height: 1.6; }
.battle-actions { display: flex; gap: 9px; }
.battle-actions button { flex: 1; min-height: 44px; }
@keyframes lwBob { 0%,100% { translate: 0 0; } 50% { translate: 0 -7px; } }

/* First-visit GPS welcome. Update log stays visible at the top of the modal. */
.gps-welcome { position: fixed; inset: 0; z-index: 4200; display: grid; place-items: center; padding: 20px; background: rgba(3,9,20,.78); backdrop-filter: blur(10px); }
.gps-welcome-card { width: 65vw; max-width: 780px; min-width: 320px; max-height: 88dvh; overflow: auto; border: 1px solid rgba(117,190,239,.36); border-radius: 22px; background: linear-gradient(145deg, #13253bfa, #0a1425fa); box-shadow: 0 28px 100px #000b; animation: lwWelcomeIn .24s ease-out; }
.gps-update-log { padding: 16px 22px; border-bottom: 1px solid #314b65; background: linear-gradient(90deg, rgba(27,66,97,.66), rgba(52,48,90,.58)); color: #c8def3; font-size: 12px; }
.gps-update-log strong { display: block; margin-bottom: 7px; color: #83dcff; font-size: 11px; letter-spacing: 1.5px; }
.gps-update-log p { margin: 4px 0; }
.gps-welcome-body { padding: clamp(22px, 4vw, 42px); text-align: center; }
.gps-welcome-icon { font-size: 42px; }
.gps-welcome-body h2 { margin: 8px 0; font-size: clamp(22px, 3vw, 32px); }
.gps-welcome-body > p { max-width: 460px; margin: 0 auto 20px; color: #a9bfd8; line-height: 1.7; }
.gps-welcome-body .full { display: block; max-width: 380px; margin: 10px auto 0; }
.gps-welcome-body > small { display: block; margin-top: 15px; color: #8199b4; font-size: 11px; line-height: 1.5; }
@keyframes lwWelcomeIn { from { opacity: 0; transform: scale(.975) translateY(8px); } to { opacity: 1; transform: scale(1) translateY(0); } }

/* Feedback toast and map popups */
.toast { position: fixed; z-index: 6000; left: 50%; bottom: calc(var(--safe-bottom) + 20px); max-width: min(90vw, 520px); padding: 12px 16px; transform: translate(-50%, 16px); opacity: 0; pointer-events: none; border: 1px solid var(--line-strong); border-radius: 13px; color: var(--text); background: rgba(10,25,42,.97); box-shadow: var(--shadow); backdrop-filter: blur(14px); font-size: 13px; transition: opacity .2s ease, transform .2s ease; }
.toast.show { opacity: 1; transform: translate(-50%, 0); }
.leaflet-popup-content-wrapper, .leaflet-popup-tip { color: var(--text); background: #111c2e; }
.leaflet-popup-content { font-size: 13px; }
.leaflet-popup-content button { margin: 5px 5px 0 0; padding: 7px 9px; border-radius: 8px; color: #fff; background: #1679ad; }

/* Tablet / narrow desktop */
@media (max-width: 950px), (max-height: 789px) {
  :root { --edge: 10px; }
  .map-hud { left: calc(var(--safe-left) + 10px); max-width: calc(50vw - 18px); }
  .weather-hud { right: calc(var(--safe-right) + 10px); max-width: calc(50vw - 18px); }
  .game-menu { left: 50%; top: auto; bottom: calc(var(--safe-bottom) + 8px); transform: translateX(-50%); flex-direction: row; gap: 3px; padding: 6px; max-width: calc(100vw - 18px); }
  .game-menu button { width: clamp(46px, 6.5vw, 56px); min-height: 50px; }
  #recenter.fab { left: 12px !important; right: auto !important; bottom: 55px !important; }
  .sidebar { width: min(620px, calc(100vw - 40px)); max-height: calc(100dvh - var(--safe-top) - var(--safe-bottom) - 28px); }
  .chat-dock { right: calc(var(--safe-right) + 10px) !important; bottom: calc(var(--safe-bottom) + 76px) !important; width: min(320px, 38vw) !important; height: clamp(205px, 28dvh, 285px) !important; }
  .leaflet-bottom.leaflet-right .leaflet-control-attribution { bottom: calc(var(--safe-bottom) + 76px + clamp(205px, 28dvh, 285px) + 5px) !important; right: calc(var(--safe-right) + 10px) !important; }
  .chat-dock .chat-messages { padding: 8px; }
}

/* Phones: prioritize the map, thumb-sized actions and equal HUD gutters. */
@media (max-width: 950px), (max-height: 789px) {
  :root { --edge: 8px; }
  .topbar { top: calc(var(--safe-top) + 6px); left: calc(var(--safe-left) + var(--edge)); right: calc(var(--safe-right) + var(--edge)); height: 47px; padding: 5px 8px; gap: 6px; border-radius: 14px; }
  .brand { gap: 7px; }
  .brand-icon { width: 30px; height: 30px; flex-basis: 30px; border-radius: 9px; font-size: 21px; }
  .brand strong { font-size: 12px; letter-spacing: .8px; }
  .brand small { margin-top: 2px; font-size: 8px; letter-spacing: .7px; }
  .pill { max-width: 43vw; padding: 5px 8px; font-size: 9px; }
  .map-hud, .weather-hud { top: calc(var(--safe-top) + 62px); }
  .map-hud { left: calc(var(--safe-left) + 8px); width: calc(50vw - 14px); max-width: calc(50vw - 14px); gap: 4px; }
  .hud-card { max-width: 100%; gap: 6px; padding: 7px 8px; border-radius: 11px; }
  .avatar { width: 28px; height: 28px; flex-basis: 28px; border-radius: 8px; font-size: 18px; }
  .hud-card strong { font-size: 11px; line-height: 1.25; }
  .hud-card small { font-size: 9px; }
  .weather-hud { right: calc(var(--safe-right) + 8px); width: calc(50vw - 14px); max-width: calc(50vw - 14px); gap: 6px; padding: 7px 8px; border-radius: 11px; }
  .weather-hud > span { font-size: 22px; }
  .weather-hud strong { font-size: 10px; line-height: 1.3; }
  .weather-hud small { margin-top: 2px; font-size: 8.5px; line-height: 1.3; }
  .game-menu { bottom: calc(var(--safe-bottom) + 7px); gap: 1px; padding: 5px; border-radius: 15px; }
  .game-menu button { width: clamp(45px, 14vw, 53px); min-height: 48px; gap: 2px; border-radius: 10px; font-size: 18px; }
  .game-menu button span { font-size: 9px; }
  #recenter.fab { left: 12px !important; right: auto !important; bottom: 55px !important; width: 40px; height: 40px; border-radius: 12px; font-size: 22px; }
  .leaflet-bottom.leaflet-right .leaflet-control-attribution { right: calc(var(--safe-right) + 7px) !important; bottom: calc(var(--safe-bottom) + 66px + clamp(160px, 25dvh, 220px) + 4px) !important; max-width: 56vw; padding: 2px 4px !important; font-size: 8px !important; }
  .sidebar { width: calc(100vw - 20px); max-height: calc(100dvh - var(--safe-top) - var(--safe-bottom) - 20px); padding: 0 7px 7px; gap: 7px; border-radius: 17px; }
  .sidebar-close { padding: 11px 12px; border-radius: 15px 15px 0 0; }
  .panel { padding: 13px; border-radius: 13px; }
  .panel h2 { font-size: 15px; }
  .panel-heading { gap: 7px; margin-bottom: 10px; }
  .panel label { font-size: 12px; }
  input { min-height: 42px; padding: 9px 10px; font-size: 14px; }
  .inline { gap: 6px; }
  .inline input { flex: 1 1 135px; }
  .primary, .secondary { min-height: 41px; padding: 9px 10px; font-size: 12px; }
  .stats { gap: 5px; }
  .stats div { padding: 8px 6px; }
  .stats small { font-size: 9px; }
  .stats strong { font-size: 18px; }
  .inventory-list, .party-list { max-height: 30dvh; }
  .chat-dock { right: calc(var(--safe-right) + 7px) !important; bottom: calc(var(--safe-bottom) + 66px) !important; width: min(62vw, 260px) !important; height: clamp(160px, 25dvh, 220px) !important; max-height: calc(100dvh - 150px - var(--safe-top) - var(--safe-bottom)) !important; padding: 8px !important; border-radius: 14px !important; }
  .chat-dock .panel-heading { gap: 6px; margin-bottom: 5px; }
  .chat-dock .panel-heading h2 { font-size: 11px; }
  .chat-live { font-size: 8px; }
  .chat-dock .chat-messages { gap: 5px; padding: 6px; border-radius: 9px; }
  .chat-dock .message { font-size: 10px; line-height: 1.4; }
  .chat-dock .chat-form { gap: 5px; margin-top: 6px; }
  .chat-dock .chat-form input { min-height: 36px; padding: 7px 8px; font-size: 12px; }
  .chat-dock .chat-form button { width: 36px; min-height: 36px; flex-basis: 36px; border-radius: 9px; }
  .gps-welcome { padding: 12px; }
  .gps-welcome-card { width: min(92vw, 520px); min-width: 0; max-height: calc(100dvh - var(--safe-top) - var(--safe-bottom) - 24px); border-radius: 18px; }
  .gps-update-log { padding: 12px 15px; font-size: 11px; }
  .gps-update-log strong { font-size: 10px; letter-spacing: 1.1px; }
  .gps-welcome-body { padding: 22px 17px; }
  .gps-welcome-icon { font-size: 34px; }
  .gps-welcome-body h2 { font-size: 23px; }
  .gps-welcome-body > p { margin-bottom: 16px; font-size: 13px; line-height: 1.65; }
  .auth-card { padding: 22px; border-radius: 18px; }
  .auth-card h1 { font-size: 20px; }
  .auth-actions { grid-template-columns: 1fr 1fr; }
  .battle-scene { padding: 10px; }
  .battle-arena { min-height: 185px; gap: 5px; padding: 12px 0; }
  .battle-monster strong { font-size: 12px; }
  .battle-monster small { font-size: 10px; }
  .battle-vs { font-size: 15px; }
  .battle-actions { flex-direction: column; gap: 7px; }
  .battle-log { min-height: 42px; padding: 9px; font-size: 12px; }
}

/* Very small phones */
@media (max-width: 380px) {
  .brand small { display: none; }
  .brand strong { font-size: 11px; letter-spacing: .55px; }
  .pill { max-width: 40vw; font-size: 8px; }
  .weather-hud small { display: none; }
  .weather-hud, .map-hud { width: calc(50vw - 13px); max-width: calc(50vw - 13px); }
  .game-menu button { width: clamp(42px, 13.2vw, 48px); min-height: 46px; }
  .chat-dock { width: min(60vw, 230px) !important; height: 158px !important; bottom: calc(var(--safe-bottom) + 63px) !important; }
  .leaflet-bottom.leaflet-right .leaflet-control-attribution { bottom: calc(var(--safe-bottom) + 63px + 158px + 4px) !important; }
  .auth-actions { grid-template-columns: 1fr; }
  .gps-welcome-body > p { font-size: 12px; }
}

/* Short landscape screens and small laptop windows */
@media (max-height: 560px) and (orientation: landscape) {
  .topbar { height: 43px; }
  .map-hud, .weather-hud { top: calc(var(--safe-top) + 58px); }
  .game-menu { left: calc(var(--safe-left) + 8px); top: 50%; bottom: auto; transform: translateY(-50%); flex-direction: column; padding: 5px; }
  .game-menu button { width: 43px; min-height: 39px; }
  .chat-dock { right: calc(var(--safe-right) + 8px) !important; width: min(32vw, 300px) !important; height: 44dvh !important; min-height: 145px !important; max-height: calc(100dvh - 16px) !important; bottom: calc(var(--safe-bottom) + 8px) !important; }
  .leaflet-bottom.leaflet-right .leaflet-control-attribution { right: calc(var(--safe-right) + 8px) !important; bottom: calc(var(--safe-bottom) + 8px + max(145px, 44dvh) + 4px) !important; }
  .sidebar { max-height: calc(100dvh - 16px); }
  .battle-arena { min-height: 140px; padding: 8px; }
  .battle-monster > div:first-child { font-size: 52px; }
  .gps-welcome-card { max-height: 94dvh; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; scroll-behavior: auto !important; transition-duration: .01ms !important; }
}


/* v16 interaction pass: remove legend clutter, move recenter into the mobile dock,
   and give mobile chat a real centered modal instead of a tiny floating dock. */
.mobile-only-menu { display: none !important; }
.recenter-label { display: none; }
.chat-heading-actions { display: flex; align-items: center; gap: 8px; }
.chat-close { display: none; width: 32px; height: 32px; flex: 0 0 32px; place-items: center; border: 1px solid rgba(150,190,221,.2); border-radius: 9px; color: #eaf5ff; background: rgba(40,59,81,.9); font-size: 15px; }
.chat-backdrop { position: fixed; inset: 0; z-index: 1550; background: rgba(2,8,18,.72); backdrop-filter: blur(7px); animation: lwFade .16s ease-out; }

/* Desktop: the recenter action is a quiet bottom-left map control. */
@media (min-width: 951px) {
  #recenter.fab { left: calc(var(--safe-left) + 16px) !important; right: auto !important; bottom: calc(var(--safe-bottom) + 16px) !important; width: 46px; height: 46px; border-radius: 14px; }
  .leaflet-bottom.leaflet-right .leaflet-control-attribution { bottom: calc(var(--safe-bottom) + var(--edge)) !important; }
}

/* Tablet and mobile: all actions share one bottom dock. The recenter button is
   physically reparented into this dock by app.js at these breakpoints. */
@media (max-width: 950px), (max-height: 789px) {
  .mobile-only-menu { display: flex !important; }
  .game-menu { width: max-content; max-width: calc(100vw - var(--safe-left) - var(--safe-right) - 12px); flex-wrap: nowrap; justify-content: center; }
  .game-menu button { width: clamp(41px, 5.6vw, 52px); min-height: 49px; }
  .game-menu #recenter.fab { position: static !important; inset: auto !important; z-index: auto !important; transform: none !important; display: flex !important; flex-direction: column; align-items: center; justify-content: center; gap: 2px; flex: 0 0 auto; width: clamp(41px, 5.6vw, 52px) !important; min-width: 0; min-height: 49px !important; height: auto !important; padding: 4px 1px; border: 1px solid transparent; border-radius: 10px; color: #eaf5ff; background: transparent; box-shadow: none; font-size: 20px; line-height: 1; }
  .game-menu #recenter.fab:hover { border-color: var(--line); background: rgba(73,133,177,.17); box-shadow: none; }
  .game-menu #recenter .recenter-label { display: block; color: #a9bfd5; font-size: 8px; line-height: 1.15; font-weight: 650; white-space: nowrap; }
  .chat-dock { display: none !important; }
  .chat-dock.mobile-chat-open { position: fixed !important; z-index: 1600 !important; left: 50% !important; right: auto !important; top: 50% !important; bottom: auto !important; transform: translate(-50%, -50%) !important; display: flex !important; flex-direction: column; width: min(92vw, 440px) !important; height: min(68dvh, 540px) !important; min-height: min(310px, calc(100dvh - 36px)) !important; max-height: calc(100dvh - var(--safe-top) - var(--safe-bottom) - 28px) !important; padding: 13px !important; overflow: hidden; border-radius: 19px !important; }
  .chat-dock.mobile-chat-open .panel-heading { gap: 10px; margin-bottom: 10px; }
  .chat-dock.mobile-chat-open .panel-heading h2 { font-size: 15px; }
  .chat-dock.mobile-chat-open .chat-close { display: grid; }
  .chat-dock.mobile-chat-open .chat-messages { padding: 10px; gap: 8px; }
  .chat-dock.mobile-chat-open .message { font-size: 13px; }
  .chat-dock.mobile-chat-open .chat-form { gap: 8px; margin-top: 10px; }
  .chat-dock.mobile-chat-open .chat-form input { min-height: 45px; padding: 10px 12px; font-size: 16px; }
  .chat-dock.mobile-chat-open .chat-form button { width: 45px; min-height: 45px; flex-basis: 45px; }
  .leaflet-bottom.leaflet-right .leaflet-control-attribution { right: calc(var(--safe-right) + 7px) !important; bottom: calc(var(--safe-bottom) + 7px) !important; max-width: min(60vw, 240px); }
}

@media (max-width: 950px), (max-height: 789px) {
  .game-menu { left: calc(var(--safe-left) + 6px); right: calc(var(--safe-right) + 6px); width: auto; max-width: none; gap: 1px; padding: 5px; }
  .game-menu button { width: clamp(38px, 12.6vw, 49px); min-height: 48px; flex: 1 1 0; gap: 2px; }
  .game-menu button span { font-size: 8.5px; }
  .game-menu #recenter.fab { width: clamp(38px, 12.6vw, 49px) !important; min-height: 48px !important; flex: 1 1 0; }
  .game-menu #recenter .recenter-label { font-size: 8px; }
  .chat-dock.mobile-chat-open { width: min(92vw, 420px) !important; height: min(70dvh, 560px) !important; min-height: min(300px, calc(100dvh - 32px)) !important; padding: 11px !important; }
}

@media (max-width: 380px) {
  .game-menu { left: calc(var(--safe-left) + 5px); right: calc(var(--safe-right) + 5px); padding: 4px; }
  .game-menu button { width: clamp(35px, 11.8vw, 42px); min-height: 45px; }
  .game-menu button span { font-size: 7.5px; }
  .game-menu #recenter.fab { width: clamp(35px, 11.8vw, 42px) !important; min-height: 45px !important; }
  .game-menu #recenter .recenter-label { font-size: 7.5px; }
  .chat-dock.mobile-chat-open { width: calc(100vw - 20px) !important; height: min(72dvh, 520px) !important; }
}

@media (max-height: 560px) and (orientation: landscape) {
  .game-menu { left: calc(var(--safe-left) + 6px); right: auto; top: 50%; bottom: auto; width: auto; transform: translateY(-50%); flex-direction: column; gap: 2px; padding: 5px; }
  .game-menu button { width: 43px; min-height: 38px; flex: 0 0 auto; }
  .game-menu #recenter.fab { width: 43px !important; min-height: 38px !important; flex: 0 0 auto; }
  .game-menu #recenter .recenter-label { font-size: 7px; }
  .chat-dock.mobile-chat-open { height: calc(100dvh - var(--safe-top) - var(--safe-bottom) - 22px) !important; min-height: 0 !important; width: min(72vw, 460px) !important; }
}

/* v17 responsive repair: make the mobile navigation span the viewport and sit flush to the bottom.
   Safe-area padding is inside the dock so the dock background still reaches the screen edges. */
@media (max-width: 950px), (max-height: 789px) {
  .game-menu {
    position: fixed !important;
    inset: auto 0 0 0 !important;
    width: 100vw !important;
    max-width: none !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    align-items: stretch !important;
    justify-content: space-between !important;
    gap: clamp(0px, .6vw, 3px) !important;
    margin: 0 !important;
    padding: 6px max(4px, var(--safe-right)) calc(6px + var(--safe-bottom)) max(4px, var(--safe-left)) !important;
    transform: none !important;
    border-radius: 16px 16px 0 0 !important;
    border-bottom: 0 !important;
    box-shadow: 0 -8px 28px rgba(0, 0, 0, .3) !important;
  }

  .game-menu > button,
  .game-menu > button.mobile-only-menu,
  .game-menu > #recenter.fab {
    position: static !important;
    inset: auto !important;
    transform: none !important;
    display: flex !important;
    flex: 1 1 0 !important;
    width: auto !important;
    min-width: 0 !important;
    max-width: none !important;
    min-height: 48px !important;
    height: auto !important;
    margin: 0 !important;
    padding: 3px 0 !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 3px !important;
    overflow: hidden !important;
    border-radius: 10px !important;
    font-size: clamp(16px, 5vw, 19px) !important;
    line-height: 1 !important;
  }

  .game-menu > button span {
    display: block !important;
    max-width: 100% !important;
    overflow: hidden !important;
    text-overflow: clip !important;
    white-space: nowrap !important;
    font-size: clamp(7px, 2.2vw, 9px) !important;
    line-height: 1.15 !important;
  }

  .game-menu > #recenter.fab {
    color: #eaf5ff !important;
    background: transparent !important;
    border: 1px solid transparent !important;
    box-shadow: none !important;
  }

  .game-menu > #recenter .recenter-label { display: block !important; }

  /* Keep dialogs comfortably above the full-width bottom dock. */
  .sidebar {
    bottom: calc(var(--safe-bottom) + 74px) !important;
    max-height: calc(100dvh - var(--safe-top) - var(--safe-bottom) - 90px) !important;
  }

  .chat-dock.mobile-chat-open {
    height: min(72dvh, calc(100dvh - var(--safe-top) - var(--safe-bottom) - 30px), 560px) !important;
    min-height: 0 !important;
    max-height: calc(100dvh - var(--safe-top) - var(--safe-bottom) - 24px) !important;
  }
}

@media (max-width: 380px) {
  .topbar { padding-right: 6px !important; padding-left: 6px !important; gap: 4px !important; }
  .brand { gap: 5px !important; }
  .brand-icon { width: 26px !important; height: 26px !important; flex-basis: 26px !important; font-size: 18px !important; }
  .brand strong { font-size: 10px !important; letter-spacing: .35px !important; }
  .pill { max-width: 39vw !important; padding: 4px 6px !important; }
  .map-hud { left: calc(var(--safe-left) + 6px) !important; }
  .weather-hud { right: calc(var(--safe-right) + 6px) !important; }
  .game-menu { gap: 1px !important; padding-right: max(3px, var(--safe-right)) !important; padding-left: max(3px, var(--safe-left)) !important; }
  .game-menu > button,
  .game-menu > button.mobile-only-menu,
  .game-menu > #recenter.fab { min-height: 46px !important; padding-right: 0 !important; padding-left: 0 !important; gap: 2px !important; }
  .game-menu > button span { font-size: clamp(6.5px, 2.15vw, 8px) !important; letter-spacing: -.1px; }
}

/* On short phones, retain the same bottom dock rather than switching to a side rail. */
@media (max-width: 950px) and (max-height: 560px) and (orientation: landscape) {
  .game-menu {
    left: 0 !important;
    right: 0 !important;
    top: auto !important;
    bottom: 0 !important;
    width: 100vw !important;
    transform: none !important;
    flex-direction: row !important;
  }
  .game-menu > button,
  .game-menu > #recenter.fab { width: auto !important; min-height: 42px !important; flex: 1 1 0 !important; }
  .sidebar { bottom: calc(var(--safe-bottom) + 64px) !important; max-height: calc(100dvh - var(--safe-top) - var(--safe-bottom) - 76px) !important; }
}


/* v20: use the established mobile/tablet layout consistently at every viewport
   width below 950px. Keep HUD alignment, full-width bottom menu, and content-sized
   weather panel. Narrow-phone fallbacks remain isolated to their smaller breakpoints. */
@media (max-width: 950px), (max-height: 789px) {
  .map-hud,
  .weather-hud {
    top: calc(var(--safe-top) + 62px) !important;
  }

  .map-hud {
    left: calc(var(--safe-left) + 8px) !important;
    right: auto !important;
    width: fit-content !important;
    max-width: calc(50vw - var(--safe-left) - 14px) !important;
  }

  .weather-hud {
    left: auto !important;
    right: calc(var(--safe-right) + 8px) !important;
    width: fit-content !important;
    min-width: 0 !important;
    max-width: calc(50vw - var(--safe-right) - 14px) !important;
    flex: 0 1 auto !important;
    gap: 7px !important;
    padding: 8px 9px !important;
    border-radius: 12px !important;
    box-sizing: border-box !important;
  }

  .weather-hud > span {
    flex: 0 0 auto !important;
    font-size: clamp(20px, 4.2vw, 24px) !important;
  }

  .weather-hud > div {
    min-width: 0 !important;
    width: auto !important;
    flex: 0 1 auto !important;
  }

  .weather-hud strong {
    font-size: clamp(10px, 2.05vw, 12px) !important;
    line-height: 1.25 !important;
    overflow-wrap: anywhere !important;
  }

  .weather-hud small {
    display: block !important;
    margin-top: 2px !important;
    font-size: clamp(8px, 1.55vw, 9px) !important;
    line-height: 1.25 !important;
    overflow-wrap: anywhere !important;
  }

  /* Keep all actions comfortably tappable and use the full viewport width. */
  .game-menu {
    position: fixed !important;
    inset: auto 0 0 0 !important;
    top: auto !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    transform: none !important;
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    align-items: stretch !important;
    justify-content: space-between !important;
    width: 100vw !important;
    max-width: none !important;
    min-width: 0 !important;
    padding: 6px max(4px, var(--safe-right)) calc(6px + var(--safe-bottom)) max(4px, var(--safe-left)) !important;
    gap: 2px !important;
    border-radius: 15px 15px 0 0 !important;
    box-sizing: border-box !important;
  }

  .game-menu > button,
  .game-menu > button.mobile-only-menu,
  .game-menu > #recenter.fab {
    min-width: 0 !important;
    min-height: 49px !important;
    flex: 1 1 0 !important;
    padding: 3px 1px !important;
    gap: 3px !important;
    font-size: 18px !important;
  }

  .game-menu > button span {
    font-size: 8px !important;
    line-height: 1.1 !important;
    letter-spacing: 0 !important;
  }

  .game-menu > #recenter .recenter-label {
    font-size: 8px !important;
    white-space: nowrap !important;
  }
}

/* At very narrow widths reduce decoration before reducing tap targets. */
@media (max-width: 360px) {
  .weather-hud {
    gap: 5px !important;
    padding: 7px !important;
  }

  .weather-hud > span { font-size: 19px !important; }
  .weather-hud small { display: none !important; }
  .game-menu { gap: 1px !important; padding-top: 5px !important; }
  .game-menu > button,
  .game-menu > button.mobile-only-menu,
  .game-menu > #recenter.fab {
    min-height: 47px !important;
    padding-right: 0 !important;
    padding-left: 0 !important;
    gap: 2px !important;
    font-size: 17px !important;
  }
  .game-menu > button span,
  .game-menu > #recenter .recenter-label { font-size: 7.5px !important; }
}


/* Guest entry option */
.auth-divider { display:flex; align-items:center; gap:12px; margin:2px 0 0; color:#8194a9; font-size:12px; }
.auth-divider::before,.auth-divider::after { content:""; flex:1; height:1px; background:#2c4359; }
.guest-button { display:flex; align-items:center; justify-content:center; gap:10px; width:100%; min-height:48px; padding:12px 16px; border:1px solid #3b826e; border-radius:13px; color:#dffcf0; background:linear-gradient(135deg,rgba(28,109,87,.35),rgba(18,49,48,.72)); font:inherit; font-weight:800; cursor:pointer; transition:transform .15s ease,border-color .15s ease,background .15s ease; }
.guest-button span { color:#74e1b4; font-size:18px; }
.guest-button:hover { border-color:#70d9ad; background:linear-gradient(135deg,rgba(28,135,97,.5),rgba(18,63,54,.85)); }
.guest-button:active { transform:scale(.99); }
.guest-button:disabled { opacity:.65; cursor:wait; }
.guest-note { text-align:center; color:#90a7ba; font-size:11px; line-height:1.45; }

/* Guest-to-account upgrade: clear, touch-friendly form that keeps the current adventure. */
.guest-upgrade-box { display:flex; flex-direction:column; gap:10px; margin-top:14px; padding:13px; border:1px solid rgba(77,214,165,.28); border-radius:14px; background:linear-gradient(145deg,rgba(20,93,76,.22),rgba(17,38,54,.64)); }
.guest-upgrade-box[hidden] { display:none !important; }
.guest-upgrade-copy { display:flex; flex-direction:column; gap:5px; }
.guest-upgrade-copy strong { color:#aaf3d6; font-size:13px; }
.guest-upgrade-copy small { color:#a7bdce; font-size:11px; line-height:1.6; }
.account-upgrade-overlay { position:fixed; inset:0; z-index:4600; display:grid; place-items:center; padding:18px; background:rgba(3,9,19,.82); backdrop-filter:blur(12px); }
.account-upgrade-overlay[hidden] { display:none !important; }
.account-upgrade-card { display:flex; flex-direction:column; gap:9px; width:min(460px,100%); max-height:calc(100dvh - var(--safe-top) - var(--safe-bottom) - 28px); padding:clamp(18px,4vw,28px); overflow:auto; border:1px solid rgba(104,194,229,.38); border-radius:22px; background:linear-gradient(150deg,rgba(20,40,61,.99),rgba(8,19,33,.99)); box-shadow:0 28px 90px rgba(0,0,0,.55); animation:lwUpgradeIn .18s ease-out; }
.account-upgrade-heading { display:flex; align-items:center; justify-content:space-between; }
.account-upgrade-icon { display:grid; place-items:center; width:48px; height:48px; border:1px solid rgba(115,204,240,.22); border-radius:15px; background:linear-gradient(135deg,rgba(39,159,203,.24),rgba(108,91,220,.22)); font-size:25px; }
.account-upgrade-close { width:36px; height:36px; border:1px solid var(--line); border-radius:10px; background:rgba(255,255,255,.06); }
.account-kicker { margin:4px 0 -5px; color:#7edfff; font-size:10px; font-weight:850; letter-spacing:1.6px; }
.account-upgrade-card h2 { margin:0; font-size:clamp(19px,3vw,24px); line-height:1.35; }
.account-upgrade-description { margin:0 0 5px; color:#adc1d5; font-size:13px; line-height:1.65; }
.account-upgrade-card label { margin-top:3px; color:#c8d9e9; font-size:12px; font-weight:750; }
.account-upgrade-card input { width:100%; min-height:45px; padding:11px 12px; border:1px solid rgba(144,182,215,.3); border-radius:11px; color:var(--text); background:rgba(3,12,23,.7); font-size:16px; outline:none; }
.account-upgrade-card input:focus { border-color:#55c8fa; box-shadow:0 0 0 3px rgba(55,189,242,.12); }
.field-hint { margin-top:-5px; color:#809bb5; font-size:10px; line-height:1.5; }
.account-upgrade-status { min-height:34px; margin:4px 0 0; color:#92abc4; font-size:11px; line-height:1.6; }
.account-upgrade-status.error { color:#ff9caa; }
.account-upgrade-actions { display:grid; grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr); gap:9px; margin-top:3px; }
.account-upgrade-actions button { min-height:45px; }
.account-upgrade-actions button:disabled { opacity:.6; cursor:wait; }
@keyframes lwUpgradeIn { from { opacity:0; transform:translateY(8px) scale(.99); } to { opacity:1; transform:translateY(0) scale(1); } }
@media (max-width:600px) {
  .account-upgrade-overlay { padding:calc(var(--safe-top) + 12px) 12px calc(var(--safe-bottom) + 12px); }
  .account-upgrade-card { width:100%; max-width:440px; padding:20px 17px; border-radius:19px; gap:8px; }
  .account-upgrade-description { font-size:12px; }
  .account-upgrade-actions { position:sticky; bottom:-1px; padding-top:8px; background:linear-gradient(180deg,rgba(8,19,33,0),rgba(8,19,33,.99) 30%); }
}
@media (prefers-reduced-motion:reduce) { .account-upgrade-card { animation:none; } }

/* v24 readability pass: larger type, stronger contrast, and clear Party scope controls. */
.sidebar .panel { padding: 18px; }
.sidebar .panel h2 { font-size: clamp(18px, 1.45vw, 21px) !important; line-height: 1.35; }
.sidebar .panel .panel-heading { gap: 12px; margin-bottom: 15px; }
.sidebar .panel p,
.sidebar .panel .hint,
.sidebar .panel label { font-size: 14px !important; line-height: 1.65 !important; }
.sidebar .panel input:not([type="radio"]) { min-height: 46px; font-size: 16px !important; }
.sidebar .panel .primary,
.sidebar .panel .secondary { min-height: 44px; font-size: 14px !important; }
.sidebar .panel .tag { font-size: 12px; }
.sidebar .stats small { font-size: 12px !important; }
.sidebar .stats strong { font-size: 22px; }
.sidebar .creature strong,
.sidebar .quest strong,
.sidebar .inventory-monster .info strong,
.sidebar .party-info strong { font-size: 15px !important; line-height: 1.45; }
.sidebar .creature small,
.sidebar .quest p,
.sidebar .inventory-monster small,
.sidebar .party-info small { font-size: 13px !important; line-height: 1.55; }
.sidebar .actions button,
.sidebar .quest-bottom button { min-height: 40px; font-size: 13px !important; }
.message { font-size: 14px; line-height: 1.6; }
.chat-dock .panel-heading h2 { font-size: 16px; }
.chat-dock .chat-form input { font-size: 15px; }
.sidebar-close strong { font-size: 17px; }
.sidebar-close button { min-height: 40px; font-size: 14px; }

.party-scope-option { display: flex !important; align-items: center; gap: 11px; margin: 9px 0 !important; padding: 12px 13px; border: 1px solid rgba(129,170,205,.24); border-radius: 13px; background: rgba(5,16,29,.52); cursor: pointer; }
.party-scope-option:has(input:checked) { border-color: rgba(75,196,244,.7); background: linear-gradient(110deg, rgba(25,128,172,.18), rgba(100,83,207,.15)); box-shadow: inset 0 0 0 1px rgba(75,196,244,.08); }
.party-scope-option input[type="radio"] { width: 19px; height: 19px; min-height: 19px; flex: 0 0 19px; margin: 0; accent-color: #4fc8f5; }
.party-scope-option > span { display: flex; flex: 1; min-width: 0; flex-direction: column; gap: 3px; }
.party-scope-option strong { color: #f1f8ff; font-size: 15px; line-height: 1.4; }
.party-scope-option small { color: #b7c9dc; font-size: 13px; line-height: 1.45; }
.global-party-access-status { margin: 10px 0 12px; padding: 10px 12px; border: 1px solid rgba(246,205,106,.22); border-radius: 11px; color: #f0d99b; background: rgba(122,83,20,.16); font-size: 13px; line-height: 1.5; }
.global-party-access-status.unlocked { color: #9cf0ca; border-color: rgba(77,214,165,.32); background: rgba(25,103,79,.18); }
.party-list-section { display: flex; flex-direction: column; gap: 8px; }
.party-list-section + .party-list-section { margin-top: 12px; padding-top: 12px; border-top: 1px solid rgba(129,170,205,.2); }
.party-list-section h3 { display: flex; flex-wrap: wrap; align-items: baseline; gap: 7px; margin: 0 0 3px; color: #eaf6ff; font-size: 15px; line-height: 1.5; }
.party-list-section h3 small { color: #a6bbd0; font-size: 12px; font-weight: 550; }
.party-empty-note { margin: 0 !important; padding: 8px 10px; border: 1px dashed rgba(129,170,205,.2); border-radius: 10px; color: #a7bad0; font-size: 13px !important; }
.party-scope-badge { display: inline-flex; vertical-align: middle; padding: 3px 7px; border-radius: 6px; color: #bdefff; background: rgba(30,137,179,.2); font-size: 10px; font-weight: 850; letter-spacing: .4px; }
.global-party-card { border-color: rgba(143,122,255,.3); background: linear-gradient(120deg, rgba(42,35,79,.34), rgba(6,17,30,.66)); }
.nearby-party-card { border-color: rgba(72,193,153,.24); }
.party-card { gap: 12px; padding: 12px; }
.party-card button { min-height: 42px; padding: 8px 12px; font-size: 13px; }
.party-card button:disabled { opacity: .62; cursor: default; }

.global-ad-overlay { position: fixed; inset: 0; z-index: 5300; display: grid; place-items: center; padding: 20px; background: rgba(2,8,18,.8); backdrop-filter: blur(9px) saturate(.85); }
.global-ad-card { position: relative; width: min(460px, 100%); max-height: calc(100dvh - 36px); overflow: auto; padding: 27px; border: 1px solid rgba(119,186,228,.36); border-radius: 22px; color: #f0f7ff; background: linear-gradient(155deg, #152b43, #091625 85%); box-shadow: 0 28px 90px rgba(0,0,0,.65); }
.global-ad-kicker { margin-bottom: 17px; color: #82d8ff; font-size: 11px; font-weight: 900; letter-spacing: 1.5px; }
.global-ad-close { position: absolute; top: 16px; right: 16px; width: 38px; height: 38px; border: 1px solid rgba(150,190,221,.18); border-radius: 10px; color: #edf7ff; background: #263d55; font-size: 16px; }
.global-ad-icon { display: grid; place-items: center; width: 58px; height: 58px; margin-bottom: 14px; border: 1px solid rgba(116,196,242,.2); border-radius: 17px; background: linear-gradient(135deg, rgba(25,151,199,.2), rgba(110,86,230,.2)); font-size: 31px; }
.global-ad-card h2 { margin: 0 0 11px; font-size: clamp(22px, 4vw, 27px); line-height: 1.3; }
.global-ad-card p { color: #c4d7e9; font-size: 15px; line-height: 1.7; }
.global-ad-card p strong { color: #fff0b4; }
.global-ad-policy-note { padding: 11px 12px; border-left: 3px solid #7d90ff; border-radius: 7px; background: rgba(94,103,173,.12); font-size: 13px !important; }
.global-ad-status { min-height: 42px; margin: 12px 0; color: #91a9c2 !important; font-size: 13px !important; }
.global-ad-actions { display: flex; gap: 10px; margin-top: 18px; }
.global-ad-actions button { flex: 1; min-height: 46px; font-size: 14px; }
.global-ad-actions button:disabled { opacity: .6; cursor: wait; }

@media (max-width: 950px), (max-height: 789px) {
  .sidebar .panel { padding: 15px; }
  .sidebar .panel h2 { font-size: 18px !important; }
  .sidebar .panel p,
  .sidebar .panel .hint,
  .sidebar .panel label { font-size: 14px !important; }
  .sidebar .creature strong,
  .sidebar .quest strong,
  .sidebar .inventory-monster .info strong,
  .sidebar .party-info strong { font-size: 15px !important; }
  .sidebar .creature small,
  .sidebar .quest p,
  .sidebar .inventory-monster small,
  .sidebar .party-info small { font-size: 13px !important; }
  .party-scope-option { padding: 11px; }
  .global-ad-card { width: min(440px, 100%); padding: 23px; }
  .global-ad-card p { font-size: 14px; }
}
@media (max-width: 380px) {
  .sidebar .panel { padding: 12px; }
  .sidebar .panel h2 { font-size: 17px !important; }
  .sidebar .panel p,
  .sidebar .panel .hint,
  .sidebar .panel label { font-size: 13px !important; }
  .sidebar .panel .primary,
  .sidebar .panel .secondary { font-size: 13px !important; }
  .party-scope-option strong { font-size: 14px; }
  .party-scope-option small { font-size: 12px; }
  .global-ad-card { padding: 20px; }
  .global-ad-actions { flex-direction: column-reverse; }
}

/* HUD text is intentionally a little larger too; content can wrap instead of clipping. */
.hud-card strong { font-size: 14px !important; line-height: 1.35; }
.hud-card small { font-size: 12px !important; line-height: 1.4; }
.weather-hud strong { font-size: 13px !important; line-height: 1.35; }
.weather-hud small { font-size: 11px !important; line-height: 1.4; }
@media (max-width: 950px), (max-height: 789px) {
  .hud-card strong { font-size: 12px !important; }
  .hud-card small { font-size: 10px !important; }
  .weather-hud strong { font-size: clamp(11px, 2.25vw, 13px) !important; }
  .weather-hud small { font-size: clamp(9px, 1.75vw, 10.5px) !important; }
}
@media (max-width: 360px) {
  .hud-card strong { font-size: 11px !important; }
  .weather-hud strong { font-size: 10.5px !important; }
}

/* v25 readability and control sizing pass.
   Keep standard interface text and its controls at a shared readable size;
   preserve compact icon navigation so it remains usable on narrow phones. */
:root { --lw-readable-font: 16px; --lw-body-copy-font: 15px; --lw-meta-font: 13px; }
body { font-size: var(--lw-readable-font) !important; line-height: 1.55; }

/* Main content and explanatory copy */
.auth-card p,
.auth-card label,
.auth-status,
.panel p,
.panel label,
.panel .hint,
.sidebar footer,
.gps-welcome-body > p,
.gps-welcome-body > small,
.gps-update-log p,
.account-upgrade-description,
.account-upgrade-card label,
.account-upgrade-status,
.global-ad-card p,
.global-ad-status,
.global-ad-policy-note,
.party-empty-note,
.global-party-access-status,
.party-scope-option strong,
.party-scope-option small,
.party-list-section h3,
.party-list-section h3 small,
.party-card,
.message,
.battle-log,
.battle-monster strong,
.battle-monster small,
.auth-divider,
.guest-note,
.guest-upgrade-copy strong,
.guest-upgrade-copy small,
.field-hint {
  font-size: max(var(--lw-body-copy-font), 1em) !important;
  line-height: 1.55;
}

/* Secondary hints remain smaller than body copy, but never tiny. */
.panel .tag,
.pill,
.guest-note,
.account-kicker,
.field-hint,
.party-scope-badge,
.chat-live,
.stats small,
.hud-card small,
.weather-hud small,
.brand small,
.sidebar footer,
.global-ad-kicker {
  font-size: var(--lw-meta-font) !important;
  line-height: 1.4;
}

/* Form fields and action buttons share the same type scale. */
button,
input:not([type="radio"]):not([type="checkbox"]),
select,
textarea {
  font-family: inherit !important;
  font-size: 16px !important;
}
.primary,
.secondary,
.guest-button,
.account-upgrade-actions button,
.global-ad-actions button,
.party-card button,
.sidebar-close button,
.chat-form button,
.battle-actions button {
  min-height: 44px;
  font-size: 16px !important;
  line-height: 1.35;
}
input:not([type="radio"]):not([type="checkbox"]),
select,
textarea {
  min-height: 46px;
  line-height: 1.4;
}
input::placeholder,
textarea::placeholder { font-size: 15px !important; opacity: 1; }

/* Native selection controls scale with their labels and keep a clear hit area. */
input[type="checkbox"],
input[type="radio"] {
  width: 21px !important;
  height: 21px !important;
  min-width: 21px !important;
  min-height: 21px !important;
  padding: 0 !important;
  margin: 0;
  accent-color: #4fc8f5;
  vertical-align: middle;
}
.party-scope-option { align-items: center; gap: 12px; }
.party-scope-option > span { gap: 4px; }
.party-scope-option strong { font-size: 16px !important; }
.party-scope-option small { font-size: 14px !important; }

/* Dialog headings/body and chat remain comfortably readable. */
.sidebar-close strong,
.panel h2,
.chat-dock .panel-heading h2 { font-size: 18px !important; line-height: 1.4; }
.sidebar .panel p,
.sidebar .panel .hint,
.sidebar .panel label { font-size: 15px !important; line-height: 1.6 !important; }
.sidebar .creature small,
.sidebar .quest p,
.sidebar .inventory-monster small,
.sidebar .party-info small,
.sidebar .stats small,
.sidebar .tag,
.party-empty-note { font-size: 14px !important; line-height: 1.5 !important; }
.message,
.chat-dock .message,
.chat-dock.mobile-chat-open .message { font-size: 15px !important; line-height: 1.55 !important; }
.chat-dock .chat-form input { font-size: 16px !important; }
.hud-card strong { font-size: 14px !important; line-height: 1.4; }
.weather-hud strong { font-size: 14px !important; line-height: 1.4; }

/* Keep navigation legible without allowing labels to overflow narrow phone docks. */
.game-menu > button,
.game-menu > button.mobile-only-menu,
.game-menu > #recenter.fab { font-size: 20px !important; }
.game-menu > button span,
.game-menu > #recenter .recenter-label {
  font-size: 11px !important;
  line-height: 1.2 !important;
  letter-spacing: 0 !important;
}
#recenter.fab { font-size: 25px !important; }
.brand strong { font-size: 15px !important; letter-spacing: .7px !important; }
.pill { font-size: 13px !important; }
.leaflet-bottom.leaflet-right .leaflet-control-attribution { font-size: 10px !important; }

@media (max-width: 950px), (max-height: 789px) {
  :root { --lw-body-copy-font: 14px; --lw-meta-font: 12px; }
  .panel { padding: 15px; }
  .sidebar .panel h2,
  .chat-dock .panel-heading h2 { font-size: 18px !important; }
  .sidebar .panel p,
  .sidebar .panel .hint,
  .sidebar .panel label { font-size: 14px !important; }
  .sidebar .panel .primary,
  .sidebar .panel .secondary,
  .sidebar .actions button,
  .sidebar .quest-bottom button,
  .party-card button { font-size: 15px !important; }
  .hud-card strong { font-size: 13px !important; }
  .hud-card small { font-size: 12px !important; }
  .weather-hud strong { font-size: 13px !important; }
  .weather-hud small { font-size: 12px !important; }
  .game-menu > button span,
  .game-menu > #recenter .recenter-label { font-size: clamp(9px, 2.4vw, 11px) !important; }
}

@media (max-width: 600px) {
  :root { --lw-body-copy-font: 14px; --lw-meta-font: 12px; }
  .primary,
  .secondary,
  .guest-button,
  .account-upgrade-actions button,
  .global-ad-actions button,
  .party-card button,
  .sidebar-close button,
  .battle-actions button { font-size: 15px !important; }
  .sidebar .panel h2,
  .chat-dock.mobile-chat-open .panel-heading h2 { font-size: 17px !important; }
  .sidebar .panel p,
  .sidebar .panel .hint,
  .sidebar .panel label { font-size: 14px !important; }
  .panel .tag,
  .pill { font-size: 12px !important; }
  .game-menu > button span,
  .game-menu > #recenter .recenter-label {
    font-size: clamp(9px, 2.65vw, 10.5px) !important;
    white-space: nowrap;
  }
  .hud-card strong { font-size: 12px !important; }
  .hud-card small,
  .weather-hud small { font-size: 11px !important; }
  .weather-hud strong { font-size: 12px !important; }
}

@media (max-width: 360px) {
  .game-menu > button span,
  .game-menu > #recenter .recenter-label { font-size: 9px !important; }
  .brand strong { font-size: 13px !important; }
  .pill { font-size: 11px !important; }
}

/* v26: persistent monster HP/regen, detailed map popups and animated turn battles. */
.inventory-monster { align-items: flex-start; }
.inventory-monster .info { flex: 1; min-width: 0; }
.monster-inventory-hp { width: 100%; margin: 6px 0 4px; }
.monster-popup-hp-top { display: flex; justify-content: space-between; align-items: center; gap: 8px; margin-bottom: 4px; color: #c1d2e3; font-size: 11px; }
.monster-popup-hp-top strong { color: #eef7ff; font-size: 12px; }
.monster-hp-track { height: 7px; overflow: hidden; border-radius: 999px; border: 1px solid rgba(149,185,212,.3); background: rgba(63,36,52,.8); }
.monster-hp-track > span { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg,#ff7187,#f8ce64 62%,#45d8a3); transition: width .35s ease; }
.monster-regen-status { color: #85edbc !important; font-weight: 750; }
.marker.monster.rarity-uncommon { outline: 2px solid #64c7a1; outline-offset: 1px; }
.marker.monster.rarity-rare { outline: 2px solid #4ebdff; outline-offset: 2px; }
.marker.monster.rarity-epic { outline: 3px solid #b69aff; outline-offset: 2px; }
.marker.monster.rarity-legendary { outline: 3px solid #ffcf70; outline-offset: 3px; box-shadow: 0 0 18px rgba(255,193,77,.62); }
.monster-map-popup { min-width: 220px; color: #eaf5ff; }
.monster-popup-title { display: flex; gap: 9px; align-items: center; margin: 0 0 9px; }
.monster-popup-emoji { display: grid; place-items: center; width: 42px; height: 42px; flex: 0 0 42px; border-radius: 13px; border: 1px solid rgba(106,181,229,.32); background: linear-gradient(135deg,rgba(24,112,151,.35),rgba(97,76,168,.3)); font-size: 27px; }
.monster-popup-title strong, .monster-popup-title small { display: block; }
.monster-popup-title strong { font-size: 15px; line-height: 1.4; }
.monster-popup-title small { margin-top: 2px; color: #adbed1; font-size: 12px; }
.monster-popup-tags { display: flex; flex-wrap: wrap; gap: 5px; margin: 7px 0 10px; }
.monster-popup-tags span { padding: 3px 7px; border: 1px solid rgba(139,179,211,.2); border-radius: 999px; background: rgba(37,67,93,.5); font-size: 11px; }
.monster-popup-hp { margin: 6px 0 9px; }
.monster-popup-facts { display: grid; grid-template-columns: 1fr 1fr; gap: 5px 8px; margin: 9px 0; color: #bdd1e4; font-size: 11px; }
.monster-element-effect { display: flex; flex-direction: column; gap: 3px; margin: 9px 0; padding: 8px 9px; border: 1px solid rgba(135,167,196,.2); border-radius: 9px; background: rgba(8,20,33,.6); }
.monster-element-effect strong { font-size: 11px; color: #bed1e4; }
.monster-element-effect > span { font-weight: 850; font-size: 13px; }
.monster-element-effect .positive { color: #71e8af; }
.monster-element-effect .negative { color: #ff9b9d; }
.monster-element-effect .neutral { color: #c4d5e5; }
.monster-popup-distance { color: #a9bed2; font-size: 11px; line-height: 1.45; margin-top: 8px; }
.monster-popup-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 7px; margin-top: 8px; }
.leaflet-popup-content .monster-popup-actions button { width: 100%; min-height: 38px; margin: 0; padding: 7px 9px; font-size: 12px; font-weight: 800; border: 1px solid rgba(123,205,244,.27); background: linear-gradient(135deg,#176a9a,#3056a4); }
.leaflet-popup-content .monster-popup-actions button.capture { background: linear-gradient(135deg,#187654,#236f7b); }
.leaflet-popup-content .monster-popup-actions button:disabled { opacity: .42; filter: grayscale(.6); cursor: not-allowed; }
.leaflet-popup-content-wrapper { border: 1px solid rgba(120,184,225,.35); border-radius: 14px !important; box-shadow: 0 16px 45px rgba(0,0,0,.38) !important; }
.leaflet-popup-content { margin: 13px 14px !important; }

/* Special attacks are dynamic and show cooldown/requirement states per owned monster. */
.battle-moves { display: grid !important; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 8px !important; max-height: min(31dvh,260px); overflow-y: auto; padding: 2px; }
.battle-move { display: flex; align-items: center; justify-content: flex-start; gap: 9px; min-width: 0; min-height: 58px !important; padding: 8px 10px !important; text-align: left; border: 1px solid rgba(123,165,201,.26) !important; border-radius: 12px; color: #edf7ff; background: linear-gradient(130deg,rgba(26,53,78,.98),rgba(15,30,48,.98)) !important; box-shadow: inset 0 1px rgba(255,255,255,.035); }
.battle-move.special-move { border-color: rgba(151,130,255,.38) !important; background: linear-gradient(130deg,rgba(60,49,111,.7),rgba(15,30,48,.98)) !important; }
.battle-move.basic-move { border-color: rgba(80,203,169,.35) !important; }
.battle-move .battle-move-icon { display: grid; place-items: center; flex: 0 0 34px; width: 34px; height: 34px; border-radius: 10px; background: rgba(4,15,29,.62); font-size: 20px; }
.battle-move .battle-move-label { min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.battle-move .battle-move-label strong { font-size: 13px; line-height: 1.35; overflow-wrap: anywhere; }
.battle-move .battle-move-label small { color: #b6c8dc; font-size: 10px; font-weight: 600; line-height: 1.35; }
.battle-move:disabled { opacity: .56; cursor: not-allowed; filter: saturate(.62); }
.battle-done { margin-top: 10px; }
.battle-fx { position: absolute; z-index: 3; left: 50%; top: 28%; transform: translate(-50%,0) scale(.7); opacity: 0; pointer-events: none; padding: 7px 12px; border: 1px solid rgba(255,231,153,.38); border-radius: 999px; color: #fff3b6; background: rgba(14,23,35,.92); box-shadow: 0 5px 20px #0006; font-size: 18px; font-weight: 1000; white-space: nowrap; }
.battle-fx.show { opacity: 1; animation: lwDamagePop .48s ease-out both; }
.battle-fx.enemy-fx { color: #ffb8c0; border-color: rgba(255,130,150,.48); }
.battle-arena { position: relative; overflow: hidden; }
#allySprite.attack-lunge { animation: lwAllyAttack .42s cubic-bezier(.2,.8,.3,1) both !important; }
#enemySprite.attack-lunge { animation: lwEnemyAttack .42s cubic-bezier(.2,.8,.3,1) both !important; }
#allySprite.hit-flash, #enemySprite.hit-flash { animation: lwHitShake .42s ease both !important; filter: drop-shadow(0 0 13px rgba(255,93,112,.94)) brightness(1.8) !important; }
@keyframes lwAllyAttack { 0% { transform: translateX(0) scale(1); } 42% { transform: translateX(34px) scale(1.16); } 100% { transform: translateX(0) scale(1); } }
@keyframes lwEnemyAttack { 0% { transform: scaleX(-1) translateX(0) scale(1); } 42% { transform: scaleX(-1) translateX(34px) scale(1.16); } 100% { transform: scaleX(-1) translateX(0) scale(1); } }
@keyframes lwHitShake { 0%,100% { translate: 0 0; } 20%,60% { translate: -5px 0; } 40%,80% { translate: 5px 0; } }
@keyframes lwDamagePop { 0% { opacity: 0; transform: translate(-50%,10px) scale(.55); } 25% { opacity: 1; transform: translate(-50%,-5px) scale(1.08); } 100% { opacity: 0; transform: translate(-50%,-32px) scale(1); } }
@media (max-width: 600px) {
  .battle-scene { padding: 12px; }
  .battle-arena { min-height: 170px; gap: 5px; padding: 13px 4px; }
  .battle-moves { max-height: 30dvh; gap: 6px !important; }
  .battle-move { min-height: 53px !important; padding: 7px !important; gap: 6px; }
  .battle-move .battle-move-icon { width: 29px; height: 29px; flex-basis: 29px; font-size: 18px; }
  .battle-move .battle-move-label strong { font-size: 12px; }
  .battle-move .battle-move-label small { font-size: 9px; }
  .monster-popup-facts { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) {
  #allySprite.attack-lunge, #enemySprite.attack-lunge, #allySprite.hit-flash, #enemySprite.hit-flash,
  .battle-fx.show { animation-duration: .01ms !important; animation-iteration-count: 1 !important; }
  .monster-hp-track > span { transition: none; }
}

.monster-cooldown-status { color: #d0c4ff !important; font-size: 11px !important; line-height: 1.45; overflow-wrap: anywhere; }
.inventory-monster.active-companion { border-color: rgba(77,214,165,.55); background: linear-gradient(130deg,rgba(17,74,65,.42),rgba(7,19,33,.83)); box-shadow: inset 0 0 0 1px rgba(77,214,165,.11); }
.monster-select-button { width: 100%; min-height: 38px; margin-top: 8px; border: 1px solid rgba(111,199,238,.3); border-radius: 10px; color: #e9f8ff; background: linear-gradient(120deg,rgba(27,107,143,.65),rgba(68,67,140,.68)); font-size: 13px; font-weight: 800; }
.monster-select-button.selected { border-color: rgba(77,214,165,.38); color: #a8f4d0; background: rgba(21,103,76,.22); }
.monster-select-button:disabled { cursor: default; opacity: .72; }


/* v27: immutable account name, profile photos, player reports and monster encyclopedia. */
.profile-identity { display:grid; grid-template-columns:64px minmax(0,1fr) auto; align-items:center; gap:13px; margin:4px 0 15px; padding:13px; border:1px solid rgba(132,177,211,.2); border-radius:15px; background:rgba(8,20,34,.64); }
.profile-avatar { width:62px; height:62px; overflow:hidden; display:grid; place-items:center; border:2px solid #79bcf0; border-radius:50%; background:linear-gradient(145deg,#234a6b,#202e55); color:#f4f8ff; font-size:30px; }
.profile-avatar img { width:100%; height:100%; object-fit:cover; }
.profile-identity-copy { display:grid; gap:4px; min-width:0; }
.profile-identity-copy strong { overflow-wrap:anywhere; font-size:17px; }
.profile-identity-copy small { color:var(--muted); font-size:12px; line-height:1.45; }
.profile-avatar-actions { display:flex; flex-direction:column; align-items:flex-end; gap:6px; max-width:142px; }
.avatar-upload-button { cursor:pointer; display:inline-flex; align-items:center; justify-content:center; min-height:40px; padding:9px 12px; border:1px solid rgba(117,191,240,.45); border-radius:10px; background:linear-gradient(145deg,#1c5074,#263d67); color:#f5faff; font-size:13px; font-weight:750; white-space:nowrap; }
.avatar-upload-button:hover { filter:brightness(1.12); }
.avatar img { width:100%; height:100%; object-fit:cover; border-radius:inherit; }
#avatarUploadStatus { text-align:right; font-size:11px !important; }
.profile-level-detail { margin:14px 0; padding:12px 13px; border:1px solid rgba(123,168,201,.18); border-radius:13px; background:rgba(5,16,29,.42); }
.profile-level-label { display:flex; justify-content:space-between; align-items:baseline; gap:8px; margin-bottom:9px; }
.profile-level-label strong { color:#cbeaff; font-size:14px; }
.profile-level-label small { color:var(--muted); font-size:11px; text-align:right; }
.profile-level-detail .progress { height:9px; overflow:hidden; border-radius:999px; background:#263b50; }
.profile-level-detail .progress span { display:block; height:100%; border-radius:inherit; background:linear-gradient(90deg,#27b0d8,#74e0b1); transition:width .22s ease; }
.profile-level-detail p { margin:8px 0 0; }
.marker.player-photo { display:block; width:38px; height:38px; overflow:hidden; padding:0; border-width:2px !important; border-radius:50% !important; background:#164a6a; }
.marker.player-photo img { display:block; width:100%; height:100%; object-fit:cover; border-radius:50%; }
.marker.player-photo.player { border-color:#6dd6ff !important; }
.marker.player-photo.other { border-color:#e6f3ff !important; }
.player-map-popup { min-width:200px; color:#172536; }
.player-popup-heading { display:flex; align-items:center; gap:10px; margin-bottom:10px; }
.player-popup-heading > div { display:grid; gap:3px; min-width:0; }
.player-popup-heading strong { color:#152337; overflow-wrap:anywhere; font-size:15px; }
.player-popup-heading small { color:#5b6e83; font-size:12px; }
.player-popup-avatar { display:block; width:44px; height:44px; flex:0 0 44px; object-fit:cover; border:2px solid #5ba5d8; border-radius:50%; }
.player-popup-avatar.fallback { display:grid; place-items:center; background:#dbeafe; font-size:26px; text-align:center; }
.player-xp-progress { padding:9px; border-radius:10px; background:#edf5fb; }
.player-xp-progress > div:first-child { display:flex; justify-content:space-between; gap:8px; font-size:11px; }
.player-xp-progress strong { color:#123f61; white-space:nowrap; }
.player-xp-progress .progress { height:7px; overflow:hidden; margin-top:6px; border-radius:99px; background:#cbd8e3; }
.player-xp-progress .progress span { display:block; height:100%; border-radius:99px; background:#1d9bd1; }
.player-xp-progress > small { display:block; margin-top:4px; color:#5d7183; font-size:10px; text-align:right; }
.player-report-trigger { width:100%; min-height:38px; margin-top:9px; border:1px solid #e3b3a8; border-radius:9px; background:#fff0ed; color:#973927; font-size:13px; font-weight:800; }
.player-report-trigger:hover { background:#ffe2dc; }
.player-report-overlay { position:fixed; inset:0; z-index:3200; display:grid; place-items:center; padding:20px; background:rgba(2,8,18,.78); backdrop-filter:blur(8px); }
.player-report-overlay[hidden] { display:none !important; }
.player-report-card { position:relative; width:min(520px,100%); max-height:calc(100dvh - 32px); overflow:auto; padding:24px; border:1px solid rgba(144,191,224,.35); border-radius:20px; background:linear-gradient(155deg,#132a43,#081625); color:#edf7ff; box-shadow:0 28px 90px rgba(0,0,0,.6); }
.player-report-heading { display:flex; align-items:center; justify-content:space-between; }
.player-report-icon { display:grid; place-items:center; width:45px; height:45px; border-radius:13px; background:rgba(233,101,81,.17); font-size:25px; }
.report-close { width:38px; height:38px; border:1px solid rgba(150,190,221,.2); border-radius:10px; background:#233c55; color:#f3f8ff; font-size:18px; }
.report-kicker { margin:14px 0 5px; color:#ffad99; font-size:11px; font-weight:850; letter-spacing:1.5px; }
.player-report-card h2 { margin:0 0 12px; font-size:23px; }
.player-report-target { margin:0 0 18px; padding:10px 12px; border:1px solid rgba(139,181,215,.2); border-radius:10px; background:rgba(1,12,24,.4); }
.player-report-card label { display:block; margin:14px 0 6px; font-size:14px; font-weight:750; }
.player-report-card select,.player-report-card textarea { box-sizing:border-box; width:100%; padding:12px; border:1px solid rgba(145,185,216,.3); border-radius:11px; background:#0b1b2c; color:#f2f8ff; font:inherit; font-size:15px; }
.player-report-card textarea { resize:vertical; min-height:104px; line-height:1.55; }
.player-report-card .field-hint { display:block; margin-top:6px; color:#97aec3; font-size:11px; line-height:1.5; }
.player-report-status { min-height:22px; margin:12px 0; color:#b8cce0; font-size:13px; }
.player-report-actions { display:flex; justify-content:flex-end; gap:9px; margin-top:14px; }
.player-report-actions button { min-height:44px; padding:10px 15px; }
.codex-open-button { margin-top:14px; }
.codex-filter-bar { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:7px; margin:10px 0 12px; }
.codex-filter-bar button { min-height:40px; border:1px solid rgba(137,181,214,.24); border-radius:10px; background:#142b41; color:#c3d9ec; font-size:13px; font-weight:750; }
.codex-filter-bar button.active { border-color:#5eb8e5; background:linear-gradient(145deg,#1c648b,#284a77); color:#fff; }
.monster-codex-list { display:grid; gap:10px; }
.codex-card { min-width:0; padding:13px; border:1px solid rgba(131,177,212,.22); border-radius:14px; background:linear-gradient(145deg,rgba(8,22,37,.8),rgba(17,35,53,.82)); }
.codex-card.is-caught { border-color:rgba(91,205,154,.4); }
.codex-card-heading { display:flex; align-items:center; gap:10px; min-width:0; }
.codex-art { display:grid; place-items:center; width:44px; height:44px; flex:0 0 44px; border:1px solid rgba(150,198,226,.2); border-radius:12px; background:#183149; font-size:27px; }
.codex-card-title { display:grid; gap:3px; flex:1; min-width:0; }
.codex-card-title strong { color:#f1f8ff; font-size:16px; overflow-wrap:anywhere; }
.codex-card-title small { color:#a9bfd2; font-size:12px; }
.codex-capture-badge { flex:0 0 auto; max-width:106px; padding:5px 7px; border-radius:8px; font-size:10px; font-weight:800; text-align:center; }
.codex-capture-badge.caught { background:rgba(52,176,122,.18); color:#9cf1c6; }
.codex-capture-badge.uncaught { background:rgba(131,151,173,.14); color:#b3c4d4; }
.codex-stats { display:flex; flex-wrap:wrap; gap:6px; margin-top:11px; }
.codex-stats span { padding:6px 8px; border:1px solid rgba(129,172,204,.16); border-radius:8px; background:rgba(4,15,27,.4); color:#bcd1e3; font-size:11px; }
.codex-stats strong { color:#f0f8ff; }
.codex-signature { display:grid; gap:4px; padding:9px 10px; border-left:3px solid #6a8de2; border-radius:0 9px 9px 0; background:rgba(89,119,196,.12); }
.codex-signature strong { color:#d9e6ff; font-size:13px; }
.codex-signature span,.codex-signature small { color:#a9c0d8; font-size:11px; line-height:1.45; }

@media (max-width:600px) {
  .profile-identity { grid-template-columns:52px minmax(0,1fr); gap:10px; padding:10px; }
  .profile-avatar { width:50px; height:50px; font-size:25px; }
  .profile-identity-copy strong { font-size:15px; }
  .profile-avatar-actions { grid-column:1 / -1; max-width:none; align-items:stretch; }
  .avatar-upload-button { width:100%; box-sizing:border-box; }
  #avatarUploadStatus { text-align:left; }
  .player-report-overlay { padding:10px; }
  .player-report-card { padding:17px; border-radius:16px; max-height:calc(100dvh - 20px); }
  .player-report-card h2 { font-size:20px; }
  .player-report-actions button { flex:1; }
  .codex-card { padding:10px; }
  .codex-capture-badge { max-width:80px; white-space:normal; }
  .codex-stats span { flex:1 1 100%; }
}

/* v28: map player profile popups use the same dark glass/cyan game theme as the HUD and panels. */
.player-map-popup {
  box-sizing: border-box;
  width: 232px;
  max-width: calc(100vw - 72px);
  min-width: 195px;
  color: #e8f4ff;
  font-family: inherit;
  font-size: 14px;
  line-height: 1.45;
}
.player-popup-heading { gap: 11px; margin-bottom: 12px; }
.player-popup-heading > div { gap: 4px; }
.player-popup-heading strong { color: #f0f8ff; font-size: 16px; font-weight: 850; line-height: 1.25; }
.player-popup-heading small { color: #a9c4da; font-size: 12px; line-height: 1.4; }
.player-popup-avatar { border-color: #58c7ed; box-shadow: 0 0 0 3px rgba(52,164,211,.12); background: #17334a; }
.player-popup-avatar.fallback { background: linear-gradient(145deg,#1d5472,#343b70); color: #effaff; }
.player-xp-progress {
  padding: 10px 11px;
  border: 1px solid rgba(111,197,237,.2);
  border-radius: 11px;
  background: linear-gradient(145deg,rgba(14,39,60,.98),rgba(18,31,54,.98));
  color: #d8eafa;
}
.player-xp-progress > div:first-child { align-items: baseline; gap: 10px; color: #b5cce0; font-size: 12px; }
.player-xp-progress strong { color: #e2f5ff; font-size: 12px; }
.player-xp-progress .progress { height: 8px; margin-top: 7px; background: #263d55; box-shadow: inset 0 1px 2px rgba(0,0,0,.25); }
.player-xp-progress .progress span { background: linear-gradient(90deg,#24b9df,#7487f5); box-shadow: 0 0 8px rgba(55,180,224,.22); }
.player-xp-progress > small { color: #a2bdd2; font-size: 11px; }
.player-report-trigger {
  min-height: 40px;
  margin-top: 11px;
  padding: 9px 12px;
  border: 1px solid rgba(255,153,140,.32);
  border-radius: 10px;
  background: linear-gradient(135deg,rgba(117,48,58,.88),rgba(85,48,78,.94));
  color: #ffe9e7;
  font-family: inherit;
  font-size: 13px;
  font-weight: 800;
  cursor: pointer;
  transition: border-color .15s ease, filter .15s ease, transform .15s ease;
}
.player-report-trigger:hover { border-color: rgba(255,173,158,.7); background: linear-gradient(135deg,#873b46,#66385c); filter: brightness(1.06); }
.player-report-trigger:active { transform: translateY(1px); }
.player-report-trigger:focus-visible { outline: 2px solid #70d8ff; outline-offset: 2px; }
@media (max-width: 600px) {
  .player-map-popup { width: min(220px, calc(100vw - 68px)); min-width: 180px; font-size: 13px; }
  .player-popup-heading strong { font-size: 15px; }
  .player-xp-progress { padding: 9px; }
}

/* v29: richer party card, friend requests, channel chat and new-message indicators. */
.my-party { margin: 12px 0 14px; padding: 0; overflow: hidden; border: 1px solid rgba(125,178,220,.2); border-radius: 16px; background: linear-gradient(145deg,rgba(14,31,50,.9),rgba(5,16,28,.84)); color: var(--text); }
.my-party-empty { display: grid; justify-items: center; gap: 7px; padding: 20px 14px; text-align: center; border-style: dashed; background: rgba(6,17,29,.5); }
.my-party-empty-icon { display: grid; place-items: center; width: 48px; height: 48px; border-radius: 15px; background: rgba(54,157,206,.13); font-size: 25px; }
.my-party-empty strong { font-size: 15px; }
.my-party-empty p { margin: 0; color: var(--muted); font-size: 13px; line-height: 1.6; }
.my-party-banner { display: flex; align-items: center; gap: 10px; padding: 13px; border-bottom: 1px solid rgba(138,179,211,.13); background: linear-gradient(115deg,rgba(33,109,147,.25),rgba(102,82,177,.14)); }
.my-party.global .my-party-banner { background: linear-gradient(115deg,rgba(101,76,183,.25),rgba(30,76,133,.18)); }
.my-party-emblem { display: grid; place-items: center; width: 42px; height: 42px; flex: 0 0 42px; border: 1px solid rgba(139,198,228,.24); border-radius: 13px; background: rgba(4,18,32,.52); font-size: 22px; }
.my-party-title { display: flex; min-width: 0; flex: 1; flex-direction: column; gap: 3px; }
.my-party-title strong { overflow-wrap: anywhere; color: #f3f9ff; font-size: 16px; line-height: 1.35; }
.my-party-title small { color: #a8c5dc; font-size: 12px; }
.my-party-stats { display: grid; grid-template-columns: .7fr 1.3fr 1fr; gap: 7px; padding: 11px 12px 8px; }
.my-party-stats > div { display: flex; min-width: 0; flex-direction: column; gap: 4px; padding: 7px 8px; border: 1px solid rgba(125,178,220,.13); border-radius: 9px; background: rgba(2,11,20,.32); }
.my-party-stats small { color: #91abc2; font-size: 10px; }
.my-party-stats strong { color: #f2f8ff; font-size: 17px; overflow-wrap: anywhere; }
.my-party-stats strong span { color: #91abc2; font-size: 12px; }
.my-party-stats .my-party-leader-name { font-size: 12px; line-height: 1.45; }
.my-party-stats .my-party-status { color: #84efbd; font-size: 12px; }
.my-party-progress { height: 5px; margin: 0 12px 12px; overflow: hidden; border-radius: 999px; background: #20364a; }
.my-party-progress span { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg,#3cbff0,#8b82ff); transition: width .2s ease; }
.my-party-members-heading { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; padding: 0 13px 7px; }
.my-party-members-heading strong { font-size: 13px; }
.my-party-members-heading small { color: #95abc1; font-size: 11px; }
.my-party .party-member-list { display: grid; gap: 6px; padding: 0 10px; }
.my-party .party-member { display: flex; align-items: center; gap: 9px; min-width: 0; padding: 8px; border: 1px solid rgba(125,178,220,.12); border-radius: 10px; background: rgba(3,13,24,.42); }
.party-member-avatar { display: grid; place-items: center; width: 32px; height: 32px; flex: 0 0 32px; border-radius: 10px; background: rgba(69,126,164,.19); font-size: 16px; }
.party-member-main { display: flex; flex: 1; min-width: 0; flex-direction: column; gap: 2px; }
.party-member-main strong { color: #e9f4ff; font-size: 13px; overflow-wrap: anywhere; }
.party-member-main small { color: #9db4c9; font-size: 11px; }
.my-party .party-member button { min-height: 32px; padding: 5px 8px; font-size: 11px; }
.my-party-footnote { margin: 10px 12px !important; color: #9fb5ca; font-size: 11px !important; line-height: 1.5; }
.my-party > #leavePartyBtn { width: calc(100% - 24px); margin: 0 12px 12px; }

.friends-section { display: grid; gap: 11px; margin-top: 18px; padding-top: 16px; border-top: 1px solid rgba(129,170,205,.22); }
.friends-heading { display: flex; align-items: center; justify-content: space-between; gap: 9px; }
.friends-heading h3 { margin: 0; color: #eff7ff; font-size: 16px; }
.friends-heading p { margin: 4px 0 0; color: #9fb5ca; font-size: 12px; line-height: 1.5; }
.icon-button { display: grid; place-items: center; width: 38px; height: 38px; flex: 0 0 38px; border: 1px solid rgba(129,178,213,.2); border-radius: 11px; color: #dcedfa; background: #17314a; font-size: 22px; }
.friend-code-card { display: grid; gap: 10px; padding: 12px; border: 1px solid rgba(89,183,225,.25); border-radius: 13px; background: linear-gradient(130deg,rgba(28,99,133,.18),rgba(57,51,112,.13)); }
.friend-code-card > div:first-child { display: flex; flex-direction: column; gap: 4px; }
.friend-code-card small { color: #9db8d0; font-size: 11px; }
.friend-code-card strong { color: #eaf8ff; font-size: 21px; letter-spacing: 1.4px; font-variant-numeric: tabular-nums; }
.friend-code-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 7px; }
.friend-code-actions button { min-height: 38px; padding: 7px; font-size: 12px; }
.add-friend-form { display: grid; gap: 6px; }
.add-friend-form label { color: #c7d8e7; font-size: 12px; font-weight: 750; }
.add-friend-form .inline { display: flex; gap: 7px; }
.add-friend-form input { min-width: 0; flex: 1; text-transform: uppercase; letter-spacing: .4px; }
.add-friend-form button { min-width: 76px; }
.friend-request-list,.friends-list { display: grid; gap: 7px; }
.friend-list-heading { margin-top: 3px; color: #bdd5e8; font-size: 12px; font-weight: 850; }
.outgoing-heading { margin-top: 9px; }
.friend-row { display: flex; align-items: center; min-width: 0; gap: 8px; padding: 9px; border: 1px solid rgba(129,170,205,.15); border-radius: 12px; background: rgba(4,15,27,.48); }
.friend-avatar { display: grid; place-items: center; width: 34px; height: 34px; flex: 0 0 34px; border-radius: 10px; background: #172f45; font-size: 17px; }
.friend-row-main { display: flex; min-width: 0; flex: 1; flex-direction: column; gap: 3px; }
.friend-row-main strong { color: #eef7ff; font-size: 13px; overflow-wrap: anywhere; }
.friend-row-main small { color: #97aec3; font-size: 11px; }
.friend-action { min-height: 34px; padding: 6px 9px; border-radius: 9px; font-size: 12px; }
.friend-action.accept { color: #a7f3cf; background: rgba(26,127,88,.35); border: 1px solid rgba(84,204,153,.22); }
.friend-action.decline { color: #ffb9c2; background: rgba(133,48,67,.3); border: 1px solid rgba(255,130,150,.17); }
.friend-action.whisper-action { color: #ccecff; background: rgba(33,111,155,.28); border: 1px solid rgba(100,186,232,.18); }
.friends-empty { margin: 0 !important; padding: 10px; border: 1px dashed rgba(129,170,205,.17); border-radius: 10px; color: #91a8bd; font-size: 12px !important; line-height: 1.55; }

.chat-dock .panel-heading h2 { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.chat-channel-label { display: block; margin: 0 0 5px; color: #a9bfd4; font-size: 12px; font-weight: 800; }
.chat-channel-select { display: block; width: 100%; min-width: 0; min-height: 42px; margin: 0 0 9px; padding: 8px 36px 8px 11px; border: 1px solid rgba(94,195,240,.32); border-radius: 11px; color: #eff8ff; background: linear-gradient(135deg,rgba(19,51,75,.96),rgba(29,38,68,.96)); font: inherit; font-size: 14px; font-weight: 750; color-scheme: dark; box-shadow: inset 0 1px 0 rgba(255,255,255,.035); }
.chat-channel-select:focus-visible { outline: 2px solid #60c6ef; outline-offset: 2px; }
.chat-channel-select option { color: #eff8ff; background: #14283b; }
.whisper-friend-label { margin: 0 0 4px; color: #b8ccde; font-size: 12px; font-weight: 750; }
.whisper-friend-select { width: 100%; min-height: 42px; margin: 0 0 8px; padding: 8px 10px; font-size: 14px; }
.chat-dock .chat-messages { min-height: 0; }
.chat-dock .message { display: grid; gap: 3px; padding: 7px 9px; border: 1px solid rgba(129,170,205,.1); border-radius: 10px; background: rgba(20,39,59,.56); }
.chat-dock .message.own-message { border-color: rgba(79,179,223,.22); background: rgba(22,71,99,.3); }
.chat-dock .message.system { background: transparent; border-style: dashed; }
.message-meta { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
.message-meta strong { margin: 0; font-size: 12px; }
.message-meta time { color: #708ba4; font-size: 10px; white-space: nowrap; }
.chat-dock .message p { margin: 0; color: #e0ebf6; font-size: 12px; line-height: 1.5; overflow-wrap: anywhere; }
.chat-dock .chat-heading-actions { min-width: 0; gap: 6px; }
.chat-minimize { display: grid; place-items: center; width: 30px; height: 30px; flex: 0 0 30px; border: 1px solid rgba(150,190,221,.18); border-radius: 9px; color: #eaf5ff; background: #263d55; font-size: 19px; line-height: 1; }
.chat-unread-inline { padding: 4px 7px; border-radius: 999px; color: #071521; background: #73e8b4; font-size: 10px; font-weight: 900; white-space: nowrap; }
.chat-unread-badge { position: absolute; top: 2px; right: 2px; display: grid; place-items: center; min-width: 17px; height: 17px; padding: 0 4px; border: 1px solid #081521; border-radius: 999px; color: #071521; background: #73e8b4; font-size: 9px !important; font-style: normal; font-weight: 900; line-height: 1; }
.chat-menu-button { position: relative !important; }
.chat-empty-state { display: grid; justify-items: center; gap: 7px; margin: auto; padding: 20px 12px; color: #bdd0e2; text-align: center; }
.chat-empty-state span { font-size: 28px; }
.chat-empty-state strong { color: #eaf5ff; font-size: 14px; }
.chat-empty-state small { max-width: 250px; color: #94abc0; font-size: 12px; line-height: 1.6; }
.chat-collapsed { height: 58px !important; min-height: 58px !important; max-height: 58px !important; padding: 8px 10px !important; overflow: hidden !important; }
.chat-collapsed .chat-channel-label,.chat-collapsed .chat-channel-select,.chat-collapsed .whisper-friend-label,.chat-collapsed .whisper-friend-select,.chat-collapsed .chat-messages,.chat-collapsed .chat-form { display: none !important; }
.chat-collapsed .panel-heading { margin: 0 !important; min-height: 40px; }
.chat-collapsed .panel-heading h2 { font-size: 13px !important; }
.chat-dock.mobile-chat-open .chat-minimize { display: none !important; }

/* Keep notices above the full-width mobile bottom navigation dock. */
@media (max-width: 950px), (max-height: 789px) {
  .toast { bottom: calc(var(--safe-bottom) + 82px) !important; max-width: min(92vw,520px); }
  .chat-dock .chat-channel-select { min-height: 44px; font-size: 15px; }
  .chat-dock.mobile-chat-open .message-meta strong { font-size: 13px; }
  .chat-dock.mobile-chat-open .message p { font-size: 14px; }
  .chat-dock.mobile-chat-open .chat-minimize { display: none !important; }
  .chat-collapsed { height: auto !important; max-height: none !important; }
  .my-party-stats { grid-template-columns: .7fr 1.3fr 1fr; }
  .friend-row-main strong { font-size: 14px; }
  .friend-row-main small { font-size: 12px; }
  .friends-section { padding-top: 14px; }
}
@media (min-width: 951px) {
  .chat-dock { height: clamp(330px, 42dvh, 470px) !important; }
  .chat-dock.chat-collapsed { height: 58px !important; min-height: 58px !important; }
  .chat-minimize { display: grid !important; }
  .chat-close { display: none !important; }
}
@media (max-width: 430px) {
  .chat-channel-select { min-height: 44px; font-size: 14px; padding-left: 9px; }
  .my-party-banner { padding: 10px; gap: 7px; }
  .my-party-title strong { font-size: 14px; }
  .my-party-stats { padding: 8px; gap: 5px; }
  .my-party-stats > div { padding: 6px; }
  .my-party-stats strong { font-size: 15px; }
  .my-party-stats small { font-size: 9px; }
  .friend-code-card strong { font-size: 19px; }
  .friend-action { padding: 5px 7px; font-size: 11px; }
}

/* v32 settings menu, persistent public-map privacy and audio preferences. */
.settings-panel { gap: 12px; }
.settings-group { display: grid; gap: 10px; padding: 13px; border: 1px solid rgba(126,166,201,.17); border-radius: 14px; background: rgba(4,15,27,.42); }
.settings-group h3 { margin: 0; color: #ecf7ff; font-size: 14px; line-height: 1.35; }
.settings-group > .hint { margin: -4px 0 0; font-size: 12px; }
.settings-recenter.fab,
#gameSidebar .settings-panel #recenter.fab {
  position: relative !important; z-index: auto !important; inset: auto !important; left: auto !important; right: auto !important; top: auto !important; bottom: auto !important; transform: none !important;
  display: flex !important; width: 100% !important; min-width: 0 !important; min-height: 46px !important; height: auto !important; margin: 0 !important; padding: 10px 13px !important;
  flex-direction: row !important; align-items: center !important; justify-content: center !important; gap: 9px !important;
  border: 1px solid rgba(75,191,236,.3) !important; border-radius: 12px !important; color: #effaff !important;
  background: linear-gradient(110deg,rgba(20,128,178,.35),rgba(86,81,176,.28)) !important; box-shadow: inset 0 1px 0 rgba(255,255,255,.04) !important;
  font-size: 15px !important; line-height: 1.3 !important; font-weight: 800 !important;
}
#gameSidebar .settings-panel #recenter.fab:hover { border-color: rgba(104,211,255,.65) !important; box-shadow: 0 0 0 3px rgba(57,189,242,.08) !important; }
#gameSidebar .settings-panel #recenter .recenter-label { display: inline !important; color: inherit !important; font-size: inherit !important; line-height: inherit !important; font-weight: inherit !important; white-space: normal !important; }
.settings-switch-row { display: flex !important; align-items: center; justify-content: space-between; gap: 12px; margin: 0 !important; padding: 11px 0 0; border-top: 1px solid rgba(129,170,205,.13); color: #edf6ff !important; cursor: pointer; }
.settings-switch-row > span { display: grid; min-width: 0; flex: 1; gap: 4px; }
.settings-switch-row strong { color: #eef7ff; font-size: 14px; line-height: 1.35; font-weight: 800; }
.settings-switch-row small { color: #9eb5cb; font-size: 12px; line-height: 1.5; font-weight: 500; }
.settings-switch-row input[type="checkbox"] { appearance: none; -webkit-appearance: none; position: relative; display: block; width: 48px !important; min-width: 48px !important; height: 28px !important; min-height: 28px !important; flex: 0 0 48px; margin: 0 !important; padding: 0 !important; border: 1px solid rgba(143,175,207,.42) !important; border-radius: 999px !important; outline: none; background: #27394d !important; box-shadow: inset 0 2px 5px rgba(0,0,0,.22); cursor: pointer; transition: background .18s,border-color .18s; }
.settings-switch-row input[type="checkbox"]::before { content: ""; position: absolute; left: 3px; top: 3px; width: 20px; height: 20px; border-radius: 50%; background: #d9e6f2; box-shadow: 0 1px 4px rgba(0,0,0,.32); transition: transform .18s ease,background .18s ease; }
.settings-switch-row input[type="checkbox"]:checked { border-color: rgba(77,214,165,.66) !important; background: linear-gradient(100deg,#168d9e,#398b8f) !important; }
.settings-switch-row input[type="checkbox"]:checked::before { transform: translateX(20px); background: #ffffff; }
.settings-switch-row input[type="checkbox"]:focus-visible { outline: 2px solid #82dcff; outline-offset: 3px; }
.settings-range-row { display: grid !important; gap: 9px; margin: 0 !important; padding-top: 3px; color: #eaf4ff !important; }
.settings-range-row > span { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.settings-range-row strong { font-size: 13px; line-height: 1.4; }
.settings-range-row output { color: #8bdcff; font-size: 13px; font-weight: 850; font-variant-numeric: tabular-nums; }
.settings-range-row input[type="range"] { appearance: none; -webkit-appearance: none; width: 100% !important; min-height: 25px !important; height: 25px !important; margin: 0 !important; padding: 0 !important; border: 0 !important; background: transparent !important; box-shadow: none !important; cursor: pointer; }
.settings-range-row input[type="range"]::-webkit-slider-runnable-track { height: 6px; border-radius: 999px; background: linear-gradient(90deg,#25b7e8,#8b82ff); }
.settings-range-row input[type="range"]::-moz-range-track { height: 6px; border-radius: 999px; background: linear-gradient(90deg,#25b7e8,#8b82ff); }
.settings-range-row input[type="range"]::-webkit-slider-thumb { appearance: none; -webkit-appearance: none; width: 18px; height: 18px; margin-top: -6px; border: 2px solid #f5fbff; border-radius: 50%; background: #3dbde9; box-shadow: 0 1px 7px rgba(0,0,0,.38); }
.settings-range-row input[type="range"]::-moz-range-thumb { width: 15px; height: 15px; border: 2px solid #f5fbff; border-radius: 50%; background: #3dbde9; box-shadow: 0 1px 7px rgba(0,0,0,.38); }
.settings-status { margin: 0; padding: 8px 10px; border-radius: 9px; color: #9fb8cf; background: rgba(12,29,47,.65); font-size: 12px; line-height: 1.5; }
.game-menu [data-panel="settings-panel"] { color: #dfeaff; }
.game-menu [data-panel="settings-panel"].active { color: #ffffff; }
@media (max-width: 950px), (max-height: 789px) {
  .settings-panel { gap: 9px; }
  .settings-group { gap: 9px; padding: 11px; }
  .settings-switch-row strong { font-size: 13px; }
  .settings-switch-row small { font-size: 11px; }
  .settings-range-row strong, .settings-range-row output { font-size: 12px; }
}


/* v33 fix: anchor mobile unread notifications to the Chat button itself, not the adjacent Settings button. */
@media (max-width: 950px), (max-height: 789px) {
  .game-menu > #chatMenuBtn.chat-menu-button {
    position: relative !important;
    isolation: isolate;
    overflow: visible !important;
    z-index: 2;
  }
  .game-menu > #chatMenuBtn.chat-menu-button > #mobileChatUnread.chat-unread-badge {
    position: absolute !important;
    top: -5px !important;
    right: -4px !important;
    left: auto !important;
    bottom: auto !important;
    z-index: 20 !important;
    display: grid;
    place-items: center;
    min-width: 18px;
    width: max-content;
    height: 18px;
    margin: 0 !important;
    transform: none !important;
    pointer-events: none;
  }
  .game-menu > #chatMenuBtn.chat-menu-button > #mobileChatUnread.chat-unread-badge[hidden] {
    display: none !important;
  }
}

/* v34: denser, clearer chat messages and terrain-based item inventory. */
.chat-dock .chat-messages {
  gap: 4px !important;
  padding: 7px !important;
  border-color: rgba(94, 195, 240, .15) !important;
  background: linear-gradient(180deg, rgba(2,10,19,.58), rgba(5,14,25,.72)) !important;
}
.chat-dock .message {
  display: grid !important;
  gap: 2px !important;
  padding: 5px 8px !important;
  border: 1px solid rgba(124,164,197,.10) !important;
  border-radius: 9px !important;
  background: rgba(23,42,62,.52) !important;
  font-size: 12.5px !important;
  line-height: 1.38 !important;
}
.chat-dock .message.own-message {
  border-color: rgba(72,183,229,.24) !important;
  background: linear-gradient(110deg,rgba(19,79,109,.48),rgba(29,51,83,.5)) !important;
}
.chat-dock .message.system {
  display: block !important;
  padding: 3px 7px !important;
  border-style: dashed !important;
  color: #8fa9c0 !important;
  font-size: 11.5px !important;
  text-align: center;
}
.chat-dock .message-meta { gap: 8px; min-width: 0; line-height: 1.2; }
.chat-dock .message-meta strong { font-size: 11.5px !important; line-height: 1.2 !important; }
.chat-dock .message-meta time { font-size: 9.5px !important; }
.chat-dock .message p { margin: 0 !important; color: #e3edf7 !important; font-size: 12.5px !important; line-height: 1.38 !important; overflow-wrap: anywhere; }
.chat-dock .message.system p { color: inherit !important; font-size: 11.5px !important; }

.item-inventory-section { display: grid; gap: 10px; margin-top: 18px; padding-top: 15px; border-top: 1px solid rgba(125,178,220,.18); }
.item-section-heading, .nearby-items-heading { display: flex; align-items: center; justify-content: space-between; gap: 8px; min-width: 0; }
.item-section-heading h3 { margin: 0; color: #edf7ff; font-size: 16px; line-height: 1.35; }
.nearby-items-heading { margin-top: 3px; }
.nearby-items-heading strong { color: #e5f2ff; font-size: 13px; }
.nearby-items-heading small { max-width: 48%; color: #90a8bf; font-size: 10px; line-height: 1.35; text-align: right; }
.inventory-items-grid, .nearby-items-list { display: grid; gap: 7px; min-width: 0; }
.inventory-items-grid.empty, .nearby-items-list.empty { display: block; }
.owned-item-card, .nearby-item-row { display: flex; align-items: center; gap: 9px; min-width: 0; padding: 9px; border: 1px solid rgba(125,178,220,.17); border-radius: 12px; background: linear-gradient(130deg,rgba(10,25,41,.78),rgba(8,18,31,.72)); }
.owned-item-icon, .nearby-item-icon { display: grid; place-items: center; width: 40px; height: 40px; flex: 0 0 40px; border: 1px solid rgba(119,176,211,.22); border-radius: 11px; background: rgba(34,63,87,.6); font-size: 22px; }
.owned-item-info, .nearby-item-info { display: flex; flex: 1; min-width: 0; flex-direction: column; gap: 3px; }
.owned-item-info strong, .nearby-item-info strong { color: #eff8ff; font-size: 13px; line-height: 1.35; overflow-wrap: anywhere; }
.owned-item-info small { color: #9fb5c9; font-size: 11px; line-height: 1.4; }
.owned-item-category { align-self: flex-start; padding: 2px 6px; border-radius: 999px; color: #9fe4ff; background: rgba(35,132,173,.16); font-size: 9px; }
.owned-item-quantity { flex: 0 0 auto; color: #90efc7; font-size: 14px; white-space: nowrap; }
.nearby-item-info small { color: #9db5ca; font-size: 11px; line-height: 1.4; }
.nearby-item-row button { min-height: 34px; flex: 0 0 auto; padding: 6px 10px; border: 1px solid rgba(93,197,235,.25); border-radius: 9px; color: #f0faff; background: linear-gradient(135deg,#17678a,#414d99); font-size: 12px; font-weight: 800; }
.nearby-item-row button:disabled { border-color: rgba(126,157,182,.12); color: #8fa2b4; background: #24364a; cursor: not-allowed; }
.item-empty-state { display: grid; justify-items: center; gap: 5px; padding: 18px 12px; border: 1px dashed rgba(125,178,220,.18); border-radius: 12px; color: #a9bfd4; background: rgba(6,17,29,.38); text-align: center; }
.item-empty-state span { font-size: 25px; }
.item-empty-state strong { color: #dceafa; font-size: 13px; }
.item-empty-state small { max-width: 300px; color: #8fa6bc; font-size: 11px; line-height: 1.5; }
.item-empty-state.compact { padding: 13px 9px; }
.marker.resource-node { position: relative; width: 36px; height: 36px; border: 2px solid #a5edc4 !important; border-radius: 11px !important; background: linear-gradient(145deg,#143a35,#182a42) !important; box-shadow: 0 4px 13px rgba(0,0,0,.34),0 0 0 3px rgba(80,225,162,.12) !important; font-size: 23px; }
.resource-popup { display: grid; gap: 9px; min-width: 190px; color: #eaf5ff; }
.resource-popup-heading { display: flex; align-items: center; gap: 9px; }
.resource-popup-heading > span { display: grid; place-items: center; width: 40px; height: 40px; flex: 0 0 40px; border: 1px solid rgba(134,218,175,.3); border-radius: 12px; background: #163b38; font-size: 24px; }
.resource-popup-heading > div { display: flex; min-width: 0; flex-direction: column; gap: 3px; }
.resource-popup-heading strong { color: #152638; font-size: 15px; }
.resource-popup-heading small { color: #5d7488; font-size: 11px; }
.resource-popup p { margin: 0; color: #62788a; font-size: 12px; line-height: 1.45; }
.resource-popup-meta { display: flex; flex-wrap: wrap; gap: 7px; color: #526d81; font-size: 11px; }
.resource-popup .primary { min-height: 38px; }
@media (max-width: 950px), (max-height: 789px) {
  .chat-dock.mobile-chat-open .chat-messages { gap: 5px !important; padding: 8px !important; }
  .chat-dock.mobile-chat-open .message { padding: 6px 8px !important; font-size: 13px !important; line-height: 1.4 !important; }
  .chat-dock.mobile-chat-open .message-meta strong { font-size: 12px !important; }
  .chat-dock.mobile-chat-open .message p { font-size: 13px !important; line-height: 1.4 !important; }
  .owned-item-card, .nearby-item-row { padding: 8px; gap: 7px; }
  .owned-item-icon, .nearby-item-icon { width: 36px; height: 36px; flex-basis: 36px; font-size: 20px; }
  .nearby-item-row button { padding: 6px 8px; }
}
@media (max-width: 360px) {
  .owned-item-card, .nearby-item-row { gap: 6px; }
  .owned-item-info small { display: none; }
  .nearby-items-heading small { font-size: 9px; }
}


/* v35: at-a-glance live terrain/online status and species-correct catch feedback. */
.map-player-card { align-items: flex-start; max-width: min(43vw, 390px); }
.hud-player-copy { min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.map-player-card .hud-status-line { max-width: 100%; margin-top: 3px; color: #aee7ff; font-size: 11px; line-height: 1.25; overflow-wrap: anywhere; }
.map-player-card .online-status-line { color: #8df0c3; font-variant-numeric: tabular-nums; }
.toast.capture-toast { border-color: rgba(246,205,106,.76); background: linear-gradient(125deg,rgba(48,39,21,.98),rgba(15,28,43,.98)); box-shadow: 0 0 0 1px rgba(246,205,106,.12), 0 14px 42px rgba(0,0,0,.34); animation: captureToastPop .35s cubic-bezier(.2,.9,.25,1.2) both; }
@keyframes captureToastPop { from { opacity: 0; transform: translate(-50%,18px) scale(.94); } to { opacity: 1; transform: translate(-50%,0) scale(1); } }
@media (max-width: 950px), (max-height: 789px) {
  .map-player-card { width: calc(50vw - 14px); max-width: calc(50vw - 14px); gap: 6px; }
  .map-player-card .hud-status-line { font-size: clamp(9px, 2.45vw, 11px); line-height: 1.25; }
}
@media (max-width: 380px) {
  .map-player-card .hud-status-line { font-size: 9px; }
  .map-player-card .avatar { width: 25px; height: 25px; flex-basis: 25px; }
}




/* v37: equipment UI, codex anatomy, compact mobile map HUD and separated online panel. */
.weather-stack{position:fixed;z-index:1102;top:calc(var(--safe-top) + 76px);right:calc(var(--safe-right) + var(--edge));display:flex;flex-direction:column;align-items:flex-end;gap:6px;width:max-content;max-width:min(35vw,320px);pointer-events:none}
.weather-stack .weather-hud{position:relative!important;top:auto!important;left:auto!important;right:auto!important;width:max-content!important;min-width:0!important;max-width:100%!important;box-sizing:border-box}
.online-hud{width:max-content;max-width:100%;box-sizing:border-box;padding:5px 9px;border-radius:10px;border:1px solid rgba(86,220,165,.35);background:linear-gradient(130deg,rgba(7,35,34,.94),rgba(11,29,43,.94));box-shadow:0 5px 14px rgba(0,0,0,.22);backdrop-filter:blur(10px);color:#9df5cf;font-size:11px;line-height:1.25;font-weight:750;font-variant-numeric:tabular-nums;overflow-wrap:anywhere}
.online-status-line{display:block;color:#9df5cf!important;font-size:inherit!important;line-height:inherit!important}
.terrain-status-line{display:inline-flex!important;align-items:center;gap:4px;width:max-content;max-width:100%;box-sizing:border-box;padding:4px 8px;border-radius:999px;border:1px solid rgba(99,217,190,.32);background:linear-gradient(120deg,rgba(11,74,66,.88),rgba(25,57,89,.9));color:#c6fff0!important;font-weight:800;box-shadow:inset 0 1px 0 rgba(255,255,255,.07);letter-spacing:.01em}
.gear-inventory-summary{display:flex;align-items:center;gap:10px;margin:8px 0 12px;padding:10px 12px;border:1px solid rgba(112,190,229,.24);border-radius:13px;background:linear-gradient(115deg,rgba(17,45,68,.88),rgba(26,34,62,.88));color:#dcefff}
.gear-summary-icon{width:36px;height:36px;flex:0 0 36px;display:grid;place-items:center;border-radius:11px;background:rgba(91,173,216,.12);font-size:20px}
.gear-inventory-summary>span:last-child{display:grid;gap:2px;min-width:0}.gear-inventory-summary strong{font-size:14px}.gear-inventory-summary small{color:#a7bfd4;font-size:12px;line-height:1.35}
.equipment-monster-art{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;line-height:1.05}.equipment-monster-art small{font-size:8px!important;line-height:1.1;color:#a9e9ff;text-align:center;max-width:64px}.gear-mini-badges{max-width:66px;font-size:10px;line-height:1.2;text-align:center;letter-spacing:1px}
.monster-equipment-summary{display:flex;flex-wrap:wrap;gap:6px;margin:7px 0}.monster-equipment-summary span{display:inline-flex;padding:4px 7px;border:1px solid rgba(120,184,223,.22);border-radius:8px;background:rgba(23,56,76,.6);color:#cceaff;font-size:11px;font-weight:750}
.monster-equipment-details,.codex-equipment-details{margin-top:8px;border:1px solid rgba(113,180,221,.24);border-radius:11px;background:rgba(7,19,34,.58);overflow:hidden}
.monster-equipment-details>summary,.codex-equipment-details>summary{cursor:pointer;list-style:none;padding:10px 11px;color:#c6eaff;font-weight:800;font-size:13px;display:flex;align-items:center;justify-content:space-between;gap:8px}
.monster-equipment-details>summary::-webkit-details-marker,.codex-equipment-details>summary::-webkit-details-marker{display:none}
.monster-equipment-details>summary::after,.codex-equipment-details>summary::after{content:"＋";color:#7ddbf4}.monster-equipment-details[open]>summary::after,.codex-equipment-details[open]>summary::after{content:"−"}
.monster-equipment-slots{display:grid;gap:6px;padding:0 8px 8px}.monster-equipment-row{display:grid;grid-template-columns:minmax(88px,.7fr) minmax(0,1fr);align-items:center;gap:7px;padding:7px;border:1px solid rgba(104,158,196,.18);border-radius:9px;background:rgba(16,34,53,.7);color:#cfe4f8;font-size:12px}
.equipment-slot-label{display:flex;align-items:center;gap:6px;min-width:0}.equipment-slot-label>span:last-child{display:grid;gap:2px;min-width:0}.equipment-slot-label strong{font-size:12px}.equipment-slot-label small{font-size:10px;color:#91b1ca;line-height:1.25;overflow-wrap:anywhere}.equipment-slot-icon{font-size:17px;flex:0 0 auto}
.monster-equipment-row select{width:100%;min-width:0;max-width:100%;box-sizing:border-box;padding:7px 6px;border-radius:8px;border:1px solid rgba(100,190,228,.34);background:#102a41;color:#eef9ff;font:inherit;font-size:12px}
.monster-equipment-row select:disabled{opacity:.62;cursor:not-allowed}.monster-equipment-note{display:block;padding:0 10px 9px;color:#aac1d3;font-size:11px;line-height:1.4}
.codex-anatomy{margin-top:8px;padding:8px 10px;border-radius:9px;border:1px solid rgba(104,206,189,.18);background:rgba(10,59,56,.32);color:#c7eee6;font-size:12px;line-height:1.45}.codex-anatomy span{color:#a6ccda}
.codex-equipment-parts{display:grid;gap:10px;padding:0 9px 10px}.codex-equipment-part h4{margin:2px 0 6px;color:#d8f2ff;font-size:13px}.codex-equipment-part h4 small{margin-left:5px;color:#83a9c4;font-size:10px;font-weight:500}.codex-equipment-items{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:6px}.codex-equipment-item{min-width:0;padding:7px;border:1px solid rgba(114,170,204,.2);border-radius:9px;background:rgba(14,31,48,.7);display:grid;gap:4px}.codex-equipment-item>span{font-size:12px;font-weight:750;color:#d8eaff;overflow-wrap:anywhere}.codex-equipment-item>small{font-size:10px;line-height:1.35;color:#9db8ce}.codex-equipment-item.incompatible{border-color:rgba(244,145,122,.32);background:rgba(72,28,35,.25)}.codex-equipment-item .gear-restriction{color:#ffb9a8}
.battle-equipment-badges{display:block;min-height:17px;max-width:160px;color:#a9e8ff!important;font-size:13px!important;letter-spacing:2px;line-height:1.3}
@media (max-width: 950px), (max-height: 789px){
  .weather-stack{top:calc(var(--safe-top) + 62px);right:calc(var(--safe-right) + 8px);max-width:calc(50vw - var(--safe-right) - 16px);gap:5px}
  .weather-stack .weather-hud{width:max-content!important;max-width:100%!important;padding:7px 8px!important;gap:6px!important}
  .online-hud{max-width:100%;font-size:10px;padding:5px 7px;border-radius:9px}
  .map-hud{width:fit-content!important;max-width:calc(50vw - var(--safe-left) - 16px)!important}
  .map-player-card{width:fit-content!important;max-width:100%!important;min-width:0!important;padding:7px 8px!important;gap:6px!important;box-sizing:border-box}
  .hud-player-copy{width:max-content;max-width:calc(50vw - 66px);min-width:0}
  .map-player-card .hud-status-line{width:max-content;max-width:100%;font-size:clamp(9px,2.15vw,11px)}
  .terrain-status-line{padding:3px 7px;font-size:clamp(9px,2vw,10.5px)!important}
  .monster-equipment-row{grid-template-columns:minmax(72px,.65fr) minmax(0,1fr);gap:5px;padding:6px}
}
@media(max-width:430px){
  .weather-stack{max-width:calc(50vw - 18px);top:calc(var(--safe-top) + 60px)}
  .weather-stack .weather-hud{padding:6px 7px!important}.weather-stack .weather-hud>span{font-size:20px!important}.weather-stack .weather-hud strong{font-size:10px!important}.weather-stack .weather-hud small{display:none!important}
  .map-hud{max-width:calc(50vw - 14px)!important}.map-player-card{padding:6px 7px!important}
  .hud-player-copy{max-width:calc(50vw - 54px)}
  .map-player-card .avatar{width:25px;height:25px;flex-basis:25px}
  .codex-equipment-items{grid-template-columns:1fr}
  .monster-equipment-row{grid-template-columns:1fr}.monster-equipment-row select{font-size:12px}
}
@media(max-width:340px){.map-player-card .hud-status-line{font-size:9px!important}.online-hud{font-size:9px}.gear-inventory-summary strong{font-size:12px}.gear-inventory-summary small{font-size:10px}}


/* v38: immutable monster Parts and original species-specific vector artwork. */
.marker.monster.monster-custom{width:46px;height:46px;box-sizing:border-box;display:flex;align-items:center;justify-content:center;padding:1px;overflow:hidden;border-radius:14px!important;background:linear-gradient(145deg,#183a52,#071a2b)!important;box-shadow:0 4px 12px rgba(0,0,0,.42),0 0 0 2px rgba(129,220,255,.20)!important;font-size:0;line-height:0}
.marker.monster.monster-custom .monster-marker-art{width:100%;height:100%;display:block;object-fit:contain;filter:drop-shadow(0 2px 2px rgba(0,0,0,.4))}
.marker.monster.monster-custom.wander{border-color:#f3d36d!important}.marker.monster.monster-custom.follow{border-color:#c3a4ff!important}.marker.monster.monster-custom.patrol{border-color:#7de8aa!important}
.marker.monster.monster-custom.rarity-uncommon{outline:2px solid #64c7a1;outline-offset:1px}.marker.monster.monster-custom.rarity-rare{outline:2px solid #4ebdff;outline-offset:2px}.marker.monster.monster-custom.rarity-epic{outline:3px solid #b69aff;outline-offset:2px}.marker.monster.monster-custom.rarity-legendary{outline:3px solid #ffcf70;outline-offset:3px;box-shadow:0 0 18px rgba(255,193,77,.62)!important}
.monster-popup-emoji.custom-monster-portrait{display:grid;place-items:center;width:48px;height:48px;flex:0 0 48px;border:1px solid rgba(108,201,244,.38);border-radius:12px;background:linear-gradient(145deg,#153b54,#091d31);overflow:hidden}
.monster-popup-creature{width:100%;height:100%;object-fit:contain;display:block}
.creature-art{width:50px;height:50px;flex:0 0 50px;display:grid;place-items:center;border:1px solid rgba(108,201,244,.28);border-radius:12px;background:linear-gradient(145deg,#17394f,#0a1b2b);overflow:hidden}
.nearby-creature-art{width:100%;height:100%;object-fit:contain;display:block}
.part-monster-art{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;min-width:84px;padding:8px 4px}
.part-monster-image{width:74px;height:74px;display:grid;place-items:center;border-radius:14px;background:radial-gradient(circle at 50% 35%,rgba(72,175,223,.24),rgba(7,21,37,.94));border:1px solid rgba(107,202,238,.25);overflow:hidden}
.owned-monster-art-image{width:100%;height:100%;object-fit:contain;display:block;filter:drop-shadow(0 3px 3px rgba(0,0,0,.32))}
.part-monster-art small{font-size:10px!important;color:#a9e9ff;text-align:center;max-width:84px}.part-tier-mini{display:flex;flex-wrap:wrap;justify-content:center;gap:2px;font-size:9px;color:#d5e8ff;line-height:1.4}
.monster-part-stat-summary{display:flex;flex-wrap:wrap;gap:5px;margin:7px 0}.monster-part-stat-summary span{padding:4px 7px;border-radius:8px;border:1px solid rgba(115,190,224,.24);background:rgba(16,45,66,.64);color:#d8f2ff;font-size:11px;font-weight:800}
.monster-parts-details,.codex-parts-details{margin-top:8px;border:1px solid rgba(110,191,226,.26);border-radius:12px;background:rgba(6,18,32,.70);overflow:hidden}
.monster-parts-details>summary,.codex-parts-details>summary{list-style:none;cursor:pointer;padding:10px 11px;display:flex;align-items:center;justify-content:space-between;gap:8px;color:#d8f3ff;font-weight:850;font-size:13px}
.monster-parts-details>summary::-webkit-details-marker,.codex-parts-details>summary::-webkit-details-marker{display:none}.monster-parts-details>summary::after,.codex-parts-details>summary::after{content:"＋";color:#7ce0fa}.monster-parts-details[open]>summary::after,.codex-parts-details[open]>summary::after{content:"−"}
.monster-parts-details>summary small{font-size:10px;color:#9abbd2;font-weight:600}
.monster-parts-grid{display:grid;gap:6px;padding:0 8px 8px}
.monster-part-card{border:1px solid color-mix(in srgb,var(--part-tier-color,#8398aa) 55%, transparent);border-left:3px solid var(--part-tier-color,#8398aa);border-radius:10px;overflow:hidden;background:linear-gradient(115deg,rgba(19,37,57,.96),rgba(8,21,36,.92));}
.monster-part-card>summary{cursor:pointer;list-style:none;display:flex;align-items:center;gap:8px;padding:9px;min-width:0}.monster-part-card>summary::-webkit-details-marker{display:none}.part-slot-icon{width:30px;height:30px;flex:0 0 30px;border-radius:8px;display:grid;place-items:center;background:rgba(95,163,204,.12);font-size:17px}.monster-part-card-title{display:grid;gap:2px;min-width:0;flex:1}.monster-part-card-title strong{color:#ecf8ff;font-size:12px}.monster-part-card-title small{font-size:11px;color:#a6c0d5;overflow-wrap:anywhere}.part-tier-badge{flex:0 0 auto;display:inline-flex;align-items:center;justify-content:center;max-width:46%;border:1px solid var(--part-tier-color,#8398aa);border-radius:7px;padding:3px 6px;background:color-mix(in srgb,var(--part-tier-color,#8398aa) 13%,#091a2c);color:var(--part-tier-color,#d4e0ea);font-size:10px;font-weight:900;text-align:center}
.monster-part-card-detail{padding:0 10px 10px 47px;color:#acc6d9}.monster-part-card-detail p{margin:0 0 7px;font-size:12px;line-height:1.45}.monster-part-bonuses{display:flex;flex-wrap:wrap;gap:5px}.monster-part-bonuses span{border:1px solid rgba(111,189,225,.2);background:rgba(24,53,74,.58);border-radius:7px;padding:3px 6px;color:#d3edff;font-size:10px;font-weight:750}.monster-part-card-detail>small{display:block;margin-top:6px;color:#91b1c6;font-size:10px}
.codex-monster-art-image{display:block;width:56px;height:56px;object-fit:contain}.custom-codex-art{display:grid;place-items:center;width:60px;height:60px;flex:0 0 60px;border-radius:13px;background:radial-gradient(circle at 50% 35%,rgba(76,168,224,.22),rgba(7,21,37,.88));border:1px solid rgba(115,205,240,.25);overflow:hidden}
.codex-parts-groups{display:grid;gap:10px;padding:8px}.codex-part-group h4{font-size:13px;color:#dcf4ff;margin:2px 0 6px}.codex-part-group h4 small{margin-left:5px;color:#89a9c1;font-weight:500;font-size:10px}.codex-part-options{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:6px}.codex-part-option{display:grid;gap:5px;align-content:start;min-width:0;border:1px solid color-mix(in srgb,var(--part-tier-color,#8398aa) 35%,transparent);border-radius:9px;padding:8px;background:rgba(14,31,48,.78)}.codex-part-option .part-tier-badge{justify-self:start;max-width:100%}.codex-part-option strong{font-size:12px;color:#e7f6ff}.codex-part-option>small{font-size:10px;line-height:1.4;color:#9fbbd1}.codex-part-option .monster-part-bonuses{gap:3px}.codex-part-option .monster-part-bonuses span{font-size:9px;padding:2px 4px}.codex-part-note{display:block;color:#94b7ce;padding:0 10px 10px;font-size:11px}
.battle-part-badges{display:block;min-height:17px;max-width:180px;color:#a9e8ff!important;font-size:10px!important;line-height:1.35;letter-spacing:0;overflow-wrap:anywhere}
@media (max-width: 950px), (max-height: 789px){.part-monster-art{min-width:70px}.part-monster-image{width:62px;height:62px}.monster-parts-details>summary,.codex-parts-details>summary{font-size:12px}.codex-part-options{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:380px){.monster-part-card>summary{gap:5px;padding:7px}.part-tier-badge{font-size:9px;padding:3px 4px;max-width:43%}.monster-part-card-detail{padding-left:38px}.codex-part-options{grid-template-columns:1fr}.part-monster-image{width:54px;height:54px}}


/* v39: custom Part/item artwork, multilingual controls, polished HUD. */
.profile-summary-stats{grid-template-columns:repeat(2,minmax(0,1fr))!important}
.language-picker-label{display:block;color:#b6d1e6;font-size:13px;font-weight:750;margin:2px 0 4px}
.language-picker{width:100%;min-height:42px;padding:9px 12px;border:1px solid rgba(104,184,226,.38);border-radius:11px;background:linear-gradient(145deg,#112c43,#0a1a2c);color:#eff8ff;font:inherit;font-size:15px;font-weight:650;outline-offset:3px}
.language-picker:focus-visible{outline:2px solid #63d5ff}
.auth-card .language-picker{margin-bottom:4px}
.part-art-frame,.codex-part-art-frame{width:44px;height:44px;flex:0 0 44px;display:grid;place-items:center;box-sizing:border-box;border:1px solid rgba(123,184,224,.62);border-radius:11px;background:radial-gradient(circle at 30% 18%,rgba(67,130,183,.27),transparent 66%),linear-gradient(145deg,#10263b,#071524);box-shadow:inset 0 1px 0 rgba(255,255,255,.10),0 0 10px rgba(79,158,215,.16);overflow:hidden}
.part-art-image{width:100%;height:100%;display:block;object-fit:contain;padding:3px;box-sizing:border-box;filter:drop-shadow(0 2px 3px rgba(0,0,0,.38))}
.part-tier-c .part-art-frame,.part-tier-c .codex-part-art-frame{background:radial-gradient(circle at 30% 18%,rgba(84,217,154,.26),transparent 66%),linear-gradient(145deg,#0e322d,#071d25)}
.part-tier-b .part-art-frame,.part-tier-b .codex-part-art-frame{background:radial-gradient(circle at 30% 18%,rgba(85,184,255,.34),transparent 66%),linear-gradient(145deg,#102d4b,#07182d)}
.part-tier-a .part-art-frame,.part-tier-a .codex-part-art-frame{background:radial-gradient(circle at 30% 18%,rgba(192,160,255,.36),transparent 66%),linear-gradient(145deg,#302147,#111527)}
.part-tier-s .part-art-frame,.part-tier-s .codex-part-art-frame{background:radial-gradient(circle at 30% 18%,rgba(255,209,102,.42),transparent 66%),linear-gradient(145deg,#49331c,#1b1c25)}
.part-tier-ss .part-art-frame,.part-tier-ss .codex-part-art-frame{background:radial-gradient(circle at 30% 18%,rgba(255,143,203,.43),transparent 66%),linear-gradient(145deg,#49213e,#20152b)}
.part-tier-ex .part-art-frame,.part-tier-ex .codex-part-art-frame{background:radial-gradient(circle at 30% 18%,rgba(255,105,95,.48),transparent 66%),linear-gradient(145deg,#4b1e2b,#1c1426);box-shadow:inset 0 1px 0 rgba(255,255,255,.13),0 0 13px rgba(255,95,105,.22)}
.part-slot-icon.part-slot-art{padding:0;background:linear-gradient(145deg,#10283c,#081827);border:1px solid rgba(129,191,224,.28);overflow:hidden}
.part-slot-art img{width:100%;height:100%;object-fit:contain;padding:2px;box-sizing:border-box}
.monster-part-card>summary .part-art-frame{width:38px;height:38px;flex-basis:38px}
.codex-part-art-frame{width:72px;height:66px;flex-basis:72px;border-radius:10px}
.codex-part-art-frame .part-art-image{padding:5px}
.codex-part-option{align-content:start}
.codex-part-option .part-tier-badge{margin-top:1px}
.custom-item-art{display:grid;place-items:center;overflow:hidden}
.owned-item-icon.custom-item-art{width:50px;height:50px;flex:0 0 50px;border-radius:12px;background:linear-gradient(145deg,#102b3d,#091726);border:1px solid rgba(111,190,220,.26)}
.owned-item-art-image{width:100%;height:100%;object-fit:contain;padding:3px;box-sizing:border-box}
.resource-popup-art{width:45px;height:45px;flex:0 0 45px;display:grid;place-items:center;border-radius:11px;border:1px solid rgba(112,216,171,.32);background:linear-gradient(145deg,#12372f,#0a1b2a);overflow:hidden}
.resource-popup-art-image,.nearby-item-art-image{width:100%;height:100%;display:block;object-fit:contain;padding:3px;box-sizing:border-box}
.nearby-item-icon.custom-item-art{width:42px;height:42px;flex:0 0 42px;border:1px solid rgba(116,195,224,.27);border-radius:10px;background:linear-gradient(145deg,#102b3d,#091726)}
.map-item-marker{width:36px;height:36px;display:grid;place-items:center;box-sizing:border-box;overflow:hidden;border:1.5px solid rgba(122,226,185,.9);border-radius:11px;background:radial-gradient(circle at 25% 15%,rgba(115,240,177,.35),transparent 60%),linear-gradient(145deg,#143b38,#0b1c2d);box-shadow:0 4px 13px rgba(0,0,0,.43),0 0 0 2px rgba(95,228,167,.15);transform:translateZ(0)}
.map-item-marker img{display:block;width:100%;height:100%;object-fit:contain;padding:3px;box-sizing:border-box;filter:drop-shadow(0 2px 2px rgba(0,0,0,.45))}
.map-item-marker.rare{border-color:#83ccff;background:radial-gradient(circle at 25% 15%,rgba(114,184,255,.45),transparent 62%),linear-gradient(145deg,#183b66,#1b2246);box-shadow:0 4px 14px rgba(0,0,0,.42),0 0 0 2px rgba(104,178,255,.2),0 0 12px rgba(90,166,255,.24)}
.map-item-marker.relic{border-color:#ffcf79;background:radial-gradient(circle at 25% 15%,rgba(255,202,99,.48),transparent 62%),linear-gradient(145deg,#4d3420,#20192a);box-shadow:0 4px 14px rgba(0,0,0,.42),0 0 0 2px rgba(255,201,104,.2),0 0 14px rgba(255,188,78,.25)}
/* Keep the player HUD snug to its content, with a consistent glass-and-metal theme. */
.map-hud{width:max-content;max-width:min(44vw,430px);pointer-events:none}
.map-player-card{width:max-content;max-width:100%;box-sizing:border-box;border:1px solid rgba(109,190,235,.36);border-radius:15px;background:linear-gradient(135deg,rgba(7,25,42,.96),rgba(18,33,54,.94));box-shadow:0 8px 22px rgba(0,0,0,.26),inset 0 1px 0 rgba(255,255,255,.06);backdrop-filter:blur(16px)}
.hud-player-copy{min-width:0}
@media (max-width: 950px), (max-height: 789px){
  .map-hud{width:fit-content!important;max-width:calc(50vw - var(--safe-left) - 14px)!important}
  .map-player-card{width:fit-content!important;max-width:100%!important;padding:7px 8px!important;border-radius:12px;background:linear-gradient(135deg,rgba(7,25,42,.96),rgba(18,33,54,.94))}
  .map-player-card .hud-player-copy{width:max-content;max-width:100%;min-width:0}
  .map-player-card .terrain-status-line{width:max-content;max-width:100%;white-space:normal}
  .online-hud{width:max-content!important}
}
@media(max-width:430px){
  .map-hud{max-width:calc(50vw - var(--safe-left) - 10px)!important}
  .map-player-card{padding:6px 7px!important;gap:5px!important}
  .map-player-card .hud-player-copy{max-width:calc(50vw - 49px)}
  .map-player-card .hud-status-line{max-width:100%;white-space:normal}
  .part-art-frame{width:36px;height:36px;flex-basis:36px}
  .codex-part-art-frame{width:58px;height:54px;flex-basis:58px}
  .owned-item-icon.custom-item-art{width:44px;height:44px;flex-basis:44px}
}
.codex-part-art-frame.part-tier-c{background:radial-gradient(circle at 30% 18%,rgba(84,217,154,.26),transparent 66%),linear-gradient(145deg,#0e322d,#071d25)}
.codex-part-art-frame.part-tier-b{background:radial-gradient(circle at 30% 18%,rgba(85,184,255,.34),transparent 66%),linear-gradient(145deg,#102d4b,#07182d)}
.codex-part-art-frame.part-tier-a{background:radial-gradient(circle at 30% 18%,rgba(192,160,255,.36),transparent 66%),linear-gradient(145deg,#302147,#111527)}
.codex-part-art-frame.part-tier-s{background:radial-gradient(circle at 30% 18%,rgba(255,209,102,.42),transparent 66%),linear-gradient(145deg,#49331c,#1b1c25)}
.codex-part-art-frame.part-tier-ss{background:radial-gradient(circle at 30% 18%,rgba(255,143,203,.43),transparent 66%),linear-gradient(145deg,#49213e,#20152b)}
.codex-part-art-frame.part-tier-ex{background:radial-gradient(circle at 30% 18%,rgba(255,105,95,.48),transparent 66%),linear-gradient(145deg,#4b1e2b,#1c1426);box-shadow:inset 0 1px 0 rgba(255,255,255,.13),0 0 13px rgba(255,95,105,.22)}

/* v39 — polished, content-sized Map HUD for the current glass-and-neon theme. */
.map-hud{z-index:1110;display:flex;align-items:flex-start;gap:0;width:max-content;max-width:min(44vw,430px);pointer-events:none}
.map-player-card{display:flex;align-items:center;gap:9px;width:max-content;min-width:0;max-width:100%;box-sizing:border-box;padding:9px 11px;border:1px solid rgba(112,202,239,.42);border-radius:15px;background:linear-gradient(145deg,rgba(7,24,41,.96),rgba(14,33,52,.94));box-shadow:0 9px 26px rgba(0,0,0,.32),inset 0 1px 0 rgba(255,255,255,.09),0 0 0 1px rgba(50,145,201,.05);backdrop-filter:blur(16px) saturate(1.12)}
.map-player-card .avatar{width:35px;height:35px;flex:0 0 35px;border:1px solid rgba(103,201,247,.43);border-radius:11px;background:linear-gradient(145deg,#19496a,#252f57);box-shadow:0 4px 12px rgba(0,0,0,.22)}
.map-player-card .hud-player-copy{display:flex;flex-direction:column;gap:3px;min-width:0;width:max-content;max-width:100%}
.map-player-card #playerName{display:block;color:#f2f9ff;font-size:13px;font-weight:850;line-height:1.2;overflow-wrap:anywhere;text-shadow:0 1px 9px rgba(47,165,218,.12)}
.map-player-card #levelLine{display:block;margin:0;color:#b7cce0;font-size:10.5px;line-height:1.25;font-variant-numeric:tabular-nums}
.map-player-card .terrain-status-line{display:inline-flex;align-items:center;gap:4px;width:max-content;max-width:100%;box-sizing:border-box;margin-top:2px;padding:4px 8px;border:1px solid rgba(77,218,187,.36);border-radius:8px;background:linear-gradient(110deg,rgba(12,74,68,.78),rgba(17,49,77,.9));color:#c9fff1!important;font-size:10.5px;font-weight:780;line-height:1.25;white-space:normal;box-shadow:inset 0 1px 0 rgba(255,255,255,.05)}
@media (max-width: 950px), (max-height: 789px){
  .map-hud{width:max-content!important;max-width:calc(50vw - var(--safe-left) - 14px)!important}
  .map-player-card{width:fit-content!important;max-width:100%!important;padding:7px 8px!important;gap:7px!important;border-radius:12px;background:linear-gradient(145deg,rgba(7,24,41,.97),rgba(14,33,52,.95))}
  .map-player-card .hud-player-copy{width:auto!important;max-width:calc(50vw - 63px)!important}
  .map-player-card #playerName{font-size:clamp(10px,2.25vw,12.5px)}
  .map-player-card #levelLine{font-size:clamp(9px,1.85vw,10.5px)}
  .map-player-card .terrain-status-line{width:fit-content!important;max-width:100%!important;padding:3px 6px!important;font-size:clamp(8.5px,1.8vw,10px)!important;line-height:1.22!important;white-space:normal!important}
}
@media(max-width:430px){
  .map-hud{max-width:calc(50vw - var(--safe-left) - 10px)!important}
  .map-player-card{gap:5px!important;padding:6px 7px!important;border-radius:11px}
  .map-player-card .avatar{width:26px;height:26px;flex-basis:26px;border-radius:8px;font-size:17px}
  .map-player-card .hud-player-copy{max-width:calc(50vw - 47px)!important;gap:2px!important}
  .map-player-card #playerName{font-size:10px!important;line-height:1.15}
  .map-player-card #levelLine{font-size:9px!important;line-height:1.18}
  .map-player-card .terrain-status-line{padding:3px 5px!important;font-size:8.5px!important;border-radius:7px}
}
@media(max-width:350px){
  .map-player-card .avatar{width:23px;height:23px;flex-basis:23px}
  .map-player-card .hud-player-copy{max-width:calc(50vw - 43px)!important}
  .map-player-card .terrain-status-line{font-size:8px!important;padding:2px 4px!important}
}

.leaflet-div-icon.map-item-div-icon{background:transparent!important;border:0!important}


/* v40: Mitr type, consistent dark selectors, item actions, and map-themed resources. */
:root{font-synthesis:none;text-rendering:optimizeLegibility}
body,button,input,select,textarea,option,.leaflet-container{font-family:Mitr,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif}
select,.language-picker,.chat-channel-select,.whisper-friend-select,.item-use-target,.panel select,.resource-popup select{color-scheme:dark;-webkit-appearance:none;appearance:none;background-color:#0a1929!important;color:#edf7ff!important;border:1px solid rgba(105,184,226,.4);border-radius:11px;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%239bc4de' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 11px center;padding-right:34px}
select option{background:#0d2033!important;color:#f0f7ff!important}
select:focus-visible{outline:2px solid #5ac7f2;outline-offset:2px}
.language-picker{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%239bc4de' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E")!important;background-color:#0b1b2c!important;box-shadow:inset 0 1px 0 rgba(255,255,255,.045),0 5px 16px rgba(0,0,0,.15)}
.owned-item-actions{display:flex;align-items:stretch;flex-wrap:wrap;gap:6px;margin-top:7px;min-width:0}
.owned-item-actions .item-use-target{flex:1 1 120px;min-width:0;min-height:34px;padding:5px 30px 5px 8px;font-size:12px}
.owned-item-actions .item-use-button{flex:0 1 auto;min-height:34px;padding:6px 10px;font-size:12px;white-space:nowrap}
.owned-item-actions .item-use-button:disabled{opacity:.45;cursor:not-allowed}
.owned-item-card{align-items:flex-start}
.owned-item-info{flex:1;min-width:0}
.owned-item-category{display:inline-flex;margin-top:4px;padding:2px 6px;border:1px solid rgba(100,190,230,.18);border-radius:7px;color:#a8cbe0;background:rgba(12,36,56,.7);font-size:10px}
.owned-item-quantity{flex:0 0 auto;color:#e8f6ff;font-size:13px}
.resource-popup.themed-item-popup{min-width:200px;max-width:290px;padding:2px;color:#eff8ff}
.resource-popup-heading strong{color:#f0f8ff!important;font-size:14px;line-height:1.35}
.resource-popup-heading small{color:#9fb8ce!important;font-size:11px;line-height:1.4}
.resource-popup p{color:#bfd1e2!important;font-size:12px;line-height:1.55}
.resource-popup-meta{color:#b9d3e5!important;align-items:center}
.resource-popup-meta span{display:inline-flex;align-items:center;gap:4px;border:1px solid rgba(100,174,219,.18);border-radius:8px;padding:4px 6px;background:rgba(10,28,46,.76)}
.resource-popup .primary{background:linear-gradient(135deg,#197ead,#4f5fd0);border:1px solid rgba(113,219,255,.42);border-radius:10px;color:#fff;min-height:40px;font-size:12px}
.dispatch-companion-card{display:flex;align-items:center;gap:8px;padding:8px;border:1px solid rgba(85,176,223,.22);border-radius:11px;background:linear-gradient(135deg,rgba(16,42,65,.9),rgba(7,20,34,.96))}
.dispatch-companion-art{width:46px;height:46px;flex:0 0 46px;object-fit:contain;border:1px solid rgba(114,195,233,.23);border-radius:9px;background:radial-gradient(circle at 50% 45%,rgba(69,162,222,.17),rgba(7,17,29,.75))}
.dispatch-companion-card>div{display:grid;gap:3px;min-width:0}
.dispatch-companion-card strong{font-size:12px!important;color:#eff8ff!important}
.dispatch-companion-card small{font-size:10px!important;line-height:1.4;color:#a8c2d8!important}
.item-empty-art{width:42px;height:42px;display:inline-grid;place-items:center}
.item-empty-art-image{width:100%;height:100%;object-fit:contain}
.map-item-marker.bait{border-color:#ffcf79;background:radial-gradient(circle at 25% 15%,rgba(255,206,111,.42),transparent 63%),linear-gradient(145deg,#58361c,#211a2d);box-shadow:0 4px 14px rgba(0,0,0,.42),0 0 0 2px rgba(255,197,94,.18),0 0 15px rgba(255,178,73,.25)}
.bait-lure-marker{position:relative;display:grid;place-items:center;width:40px;height:40px;border:2px solid #ffca77;border-radius:50%;background:radial-gradient(circle at 50% 25%,rgba(255,208,120,.45),rgba(16,28,49,.96) 72%);box-shadow:0 0 0 3px rgba(255,194,89,.19),0 0 18px rgba(255,179,72,.4);animation:lwLurePulse 1.65s ease-in-out infinite}
.bait-lure-art{display:block;width:31px;height:31px;object-fit:contain}
.bait-lure-marker i{position:absolute;inset:-5px;border:1px solid rgba(255,210,125,.65);border-radius:50%;pointer-events:none}
.bait-lure-popup .resource-popup-art{border-color:rgba(255,204,114,.5);background:linear-gradient(145deg,#563819,#1b1b2a)}
@keyframes lwLurePulse{0%,100%{transform:scale(.96);filter:brightness(1)}50%{transform:scale(1.05);filter:brightness(1.2)}}
.marker.monster.shiny{outline:2px solid #ffdc72;outline-offset:3px;box-shadow:0 0 0 4px rgba(255,214,105,.18),0 0 18px rgba(255,207,91,.6)}
.shiny-marker-glint{position:absolute;top:-7px;right:-4px;width:16px;height:16px;display:grid;place-items:center;border-radius:50%;color:#36270a;background:linear-gradient(145deg,#fff3ad,#f4b943);border:1px solid #fff0ab;font-size:12px;line-height:1;box-shadow:0 0 8px #ffdc74}
.shiny-pill{display:inline-flex;align-items:center;gap:3px;margin:2px 0 2px 4px;padding:2px 6px;border:1px solid rgba(255,211,93,.55);border-radius:7px;color:#ffe7a2;background:linear-gradient(135deg,rgba(113,75,14,.66),rgba(52,41,27,.8));font-size:10px;font-weight:800;white-space:nowrap}
.inventory-monster.is-shiny{border-color:rgba(255,211,104,.4);box-shadow:inset 0 0 18px rgba(255,202,93,.045)}
.gathering-status{display:block;color:#95d9ff!important;font-weight:700}
/* Keep notification badge anchored directly to the speech-bubble button. */
@media (max-width: 950px), (max-height: 789px){.game-menu>#chatMenuBtn.chat-menu-button{position:relative!important;overflow:visible!important}.game-menu>#chatMenuBtn>#mobileChatUnread{top:-5px!important;right:-5px!important;left:auto!important;bottom:auto!important;transform:none!important;z-index:30!important}.map-hud{width:fit-content!important;max-width:min(calc(50vw - var(--safe-left) - 12px),320px)!important}.map-hud .map-player-card{width:fit-content!important;max-width:100%!important}.map-player-card .hud-player-copy{width:max-content;max-width:100%;min-width:0}.weather-hud{max-width:min(calc(50vw - var(--safe-right) - 12px),330px)!important}}
@media(max-width:430px){.map-hud{width:max-content!important;max-width:calc(50vw - var(--safe-left) - 9px)!important}.map-player-card{width:fit-content!important;padding:6px 7px!important}.map-player-card .hud-player-copy{max-width:calc(50vw - 48px)}.owned-item-actions{gap:5px}.owned-item-actions .item-use-target{flex-basis:100%;min-height:36px}.owned-item-actions .item-use-button{width:100%}.dispatch-companion-card{gap:6px;padding:6px}}


/* v40 polish: keep language and settings selects consistent across browsers. */
select,select.language-picker,.language-picker,.chat-channel-select,.whisper-friend-select,.item-use-target{
  color-scheme:dark!important;-webkit-appearance:none!important;-moz-appearance:none!important;appearance:none!important;
  background-color:#0a1929!important;color:#edf7ff!important;border:1px solid rgba(105,184,226,.42)!important;
  border-radius:11px!important;background-repeat:no-repeat!important;background-position:right 11px center!important;
  background-size:14px 14px!important;box-shadow:inset 0 1px 0 rgba(255,255,255,.04)!important;
}
select option,select optgroup{background-color:#0b1a2a!important;color:#edf7ff!important}
select option:checked{background-color:#19466a!important;color:#fff!important}
select:focus-visible{outline:2px solid #5ac7f2!important;outline-offset:2px}
.language-picker{min-height:44px!important;padding:9px 35px 9px 12px!important;font-size:15px!important;font-weight:600!important;line-height:1.4!important;max-width:100%;box-sizing:border-box!important}
.auth-card .language-picker{display:block;width:100%;margin:4px 0 8px!important}
@media(max-width:600px){.language-picker{font-size:16px!important;min-height:46px!important}.map-hud{width:max-content!important}.map-player-card{width:fit-content!important}.mobile-chat-unread,.chat-unread-badge{top:-5px!important;right:-5px!important;left:auto!important}}


/* v41: language-aware map popups, item contest status, calmer typography, and compact-height mobile layout. */
.leaflet-popup-content-wrapper,
.leaflet-popup-tip { color: var(--text, #eaf5ff); background: linear-gradient(150deg, #13243a, #091625) !important; border: 1px solid rgba(103,178,225,.26); box-shadow: 0 12px 36px rgba(0,0,0,.38); }
.leaflet-popup-content { margin: 12px 13px !important; color: #e8f2fc; }
.leaflet-popup-content strong,
.leaflet-popup-content b { font-weight: 500 !important; }
.node-contested-hint { display:block; margin:7px 0; padding:7px 9px; border:1px solid rgba(245,190,90,.28); border-radius:9px; color:#ffd78b; background:rgba(116,76,20,.20); font-size:12px; line-height:1.45; }
.node-contested-hint.own { color:#93e7c0; border-color:rgba(70,205,149,.28); background:rgba(25,99,72,.18); }

/* Select controls use a consistent dark surface and custom chevron instead of platform-specific default fills. */
select, select.language-picker, .language-picker, .chat-channel-select, .whisper-friend-select, .item-use-target {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%239bbad2' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") !important;
  background-repeat:no-repeat !important; background-position:right 11px center !important; background-size:14px 14px !important;
}
select option, select optgroup { color:#edf7ff !important; background:#0b1a2a !important; }

/* Reduce heavy bold across the UI; reserve medium/semi-bold for headings and key actions. */
body, button, input, select, textarea, label, .hint, .pill, .tag, .chat-messages, .message p { font-weight:400 !important; }
strong, b, .game-menu button span, .sidebar-close strong, .panel-heading .tag, .chat-message-meta strong { font-weight:500 !important; }
h1, h2, h3, .panel h2, .sidebar-close strong, .auth-card h1, .battle-head, .monster-popup-title > div > strong { font-weight:600 !important; }
.primary, .secondary, .game-menu button.active span { font-weight:500 !important; }

/* Under 790px height (even on a wide desktop window) the whole page uses the touch/mobile layout. */
@media (min-width: 951px) and (max-height: 789px) {
  :root { --edge:8px; }
  .topbar { top:calc(var(--safe-top) + 6px); left:calc(var(--safe-left) + 8px); right:calc(var(--safe-right) + 8px); height:47px; padding:5px 9px; gap:7px; border-radius:14px; }
  .brand { gap:7px; }
  .brand-icon { width:30px; height:30px; flex-basis:30px; border-radius:9px; font-size:20px; }
  .brand strong { font-size:12px; letter-spacing:.65px; }
  .brand small { font-size:8px; letter-spacing:.4px; }
  .pill { max-width:43vw; padding:5px 8px; font-size:10px; }
  .map-hud, .weather-hud { top:calc(var(--safe-top) + 62px); }
  .map-hud { left:calc(var(--safe-left) + 8px); right:auto; width:fit-content !important; max-width:min(calc(50vw - var(--safe-left) - 14px),330px) !important; gap:4px; }
  .map-player-card { width:fit-content; max-width:100%; padding:7px 8px; gap:6px; border-radius:11px; }
  .map-player-card .hud-player-copy { width:max-content; max-width:100%; min-width:0; }
  .map-player-card strong { font-size:11px; }
  .map-player-card small { font-size:9px; }
  .weather-hud { right:calc(var(--safe-right) + 8px); left:auto; width:max-content; max-width:min(calc(50vw - var(--safe-right) - 14px),330px); gap:6px; padding:7px 8px; border-radius:11px; }
  .weather-hud > span { font-size:22px; }
  .weather-hud strong { font-size:10px; }
  .weather-hud small { font-size:8.5px; }
  .online-hud { right:calc(var(--safe-right) + 8px); max-width:min(calc(50vw - var(--safe-right) - 14px),330px); font-size:10px; }
  .mobile-only-menu { display:flex !important; }
  .game-menu { position:fixed !important; inset:auto 0 0 0 !important; width:100vw !important; max-width:none !important; min-width:0 !important; box-sizing:border-box !important; display:flex !important; flex-direction:row !important; flex-wrap:nowrap !important; align-items:stretch !important; justify-content:space-between !important; gap:clamp(0px,.6vw,3px) !important; margin:0 !important; padding:6px max(4px,var(--safe-right)) calc(6px + var(--safe-bottom)) max(4px,var(--safe-left)) !important; transform:none !important; border-radius:15px 15px 0 0 !important; border-bottom:0 !important; box-shadow:0 -8px 28px rgba(0,0,0,.3) !important; }
  .game-menu > button, .game-menu > button.mobile-only-menu, .game-menu > #recenter.fab { position:static !important; inset:auto !important; transform:none !important; display:flex !important; flex:1 1 0 !important; width:auto !important; min-width:0 !important; max-width:none !important; min-height:46px !important; height:auto !important; margin:0 !important; padding:3px 0 !important; flex-direction:column !important; align-items:center !important; justify-content:center !important; gap:2px !important; overflow:visible !important; border-radius:9px !important; font-size:18px !important; line-height:1 !important; }
  .game-menu > button span, .game-menu > #recenter .recenter-label { display:block !important; max-width:100% !important; overflow:hidden; white-space:nowrap !important; font-size:clamp(7px, .8vw, 9px) !important; line-height:1.1 !important; }
  .game-menu > #recenter.fab { background:transparent !important; border:1px solid transparent !important; box-shadow:none !important; color:#eaf5ff !important; }
  .game-menu > #chatMenuBtn.chat-menu-button { position:relative !important; isolation:isolate; overflow:visible !important; }
  .game-menu > #chatMenuBtn > #mobileChatUnread { position:absolute !important; top:-5px !important; right:-4px !important; left:auto !important; bottom:auto !important; z-index:30 !important; }
  .chat-dock { display:none !important; }
  .chat-dock.mobile-chat-open { position:fixed !important; z-index:1600 !important; left:50% !important; right:auto !important; top:50% !important; bottom:auto !important; transform:translate(-50%,-50%) !important; display:flex !important; flex-direction:column !important; width:min(82vw,520px) !important; height:min(72dvh,520px) !important; min-height:min(300px,calc(100dvh - 28px)) !important; max-height:calc(100dvh - var(--safe-top) - var(--safe-bottom) - 22px) !important; padding:11px !important; border-radius:17px !important; }
  .chat-backdrop { z-index:1550; }
  .sidebar { width:min(620px,calc(100vw - 20px)) !important; max-height:calc(100dvh - var(--safe-top) - var(--safe-bottom) - 96px) !important; bottom:calc(var(--safe-bottom) + 74px) !important; top:auto !important; transform:translateX(-50%) !important; }
  .leaflet-bottom.leaflet-right .leaflet-control-attribution { right:calc(var(--safe-right) + 7px) !important; bottom:calc(var(--safe-bottom) + 60px) !important; max-width:42vw; font-size:8px !important; }
  .toast { bottom:calc(var(--safe-bottom) + 68px) !important; max-width:min(90vw,500px); }
  .gps-welcome-card { max-height:calc(100dvh - 18px); overflow:auto; }
  .battle-scene { max-height:calc(100dvh - 10px); overflow:auto; }
}


/* v45: emphasize owned monster portraits and render manually approved partner campaigns. */
.part-monster-art{min-width:100px;padding:7px 5px;gap:6px}
.part-monster-image{width:88px;height:88px;border-radius:16px;background:radial-gradient(circle at 50% 28%,rgba(76,191,246,.33),rgba(91,76,176,.12) 55%,rgba(7,21,37,.96));border:1px solid rgba(119,218,255,.42);box-shadow:inset 0 0 0 1px rgba(255,255,255,.025),0 6px 18px rgba(0,0,0,.18)}
.inventory-monster.active-companion .part-monster-image{border-color:rgba(77,214,165,.68);box-shadow:0 0 0 2px rgba(77,214,165,.12),0 0 22px rgba(77,214,165,.09)}
.part-monster-art .part-tier-mini{max-width:96px;font-size:9px}
.approved-partner-ad-slot{margin:12px 0 16px;display:grid;gap:10px}
.approved-partner-ad{padding:12px;border:1px solid rgba(114,191,225,.25);border-radius:14px;background:linear-gradient(125deg,rgba(16,43,65,.86),rgba(10,23,40,.84));overflow:hidden}
.approved-partner-ad-kicker{margin-bottom:8px;color:#86d8ff;font-size:10px;font-weight:900;letter-spacing:1.1px}
.approved-partner-ad-body{display:flex;gap:11px;align-items:center;min-width:0}
.approved-partner-ad-body>img{display:block;width:74px;height:74px;flex:0 0 74px;object-fit:cover;border-radius:10px;border:1px solid rgba(130,196,229,.25);background:rgba(4,13,24,.5)}
.approved-partner-ad-copy{display:flex;flex-direction:column;gap:4px;min-width:0}
.approved-partner-ad-copy strong{font-size:14px;color:#f3faff;overflow-wrap:anywhere}
.approved-partner-ad-copy p{margin:0;color:#b8cde0;font-size:12px!important;line-height:1.5!important}
.approved-partner-ad-copy small{color:#91adc5;font-size:10px!important}
.approved-partner-ad-copy a{align-self:flex-start;margin-top:2px;color:#7cd8ff;font-size:12px;font-weight:800;text-decoration:none}
.approved-partner-ad-copy a:hover{text-decoration:underline}
@media(max-width:950px), (max-height:789px){.part-monster-art{min-width:82px}.part-monster-image{width:72px;height:72px}}
@media(max-width:380px){.part-monster-art{min-width:66px}.part-monster-image{width:58px;height:58px}.approved-partner-ad-body>img{width:60px;height:60px;flex-basis:60px}}


/* v46: reliable PC capture icon and recenter control inside Player menu */
.monster-popup-actions button.capture { display:inline-flex; align-items:center; justify-content:center; gap:6px; }
.capture-button-icon { width:15px; height:15px; flex:0 0 15px; display:inline-block; vertical-align:middle; }
#gameSidebar .profile-panel #recenter.fab,
#gameSidebar .profile-panel #recenter.profile-recenter-button {
  position:static !important; inset:auto !important; z-index:auto !important; transform:none !important;
  display:flex !important; align-items:center !important; justify-content:center !important; gap:8px !important;
  width:100% !important; min-width:0 !important; max-width:none !important; min-height:42px !important; height:auto !important;
  margin:11px 0 0 !important; padding:9px 12px !important; border:1px solid rgba(150,190,221,.18) !important;
  border-radius:11px !important; color:#e6f3ff !important; background:#263c55 !important;
  box-shadow:none !important; font-size:13px !important; line-height:1.35 !important;
}
#gameSidebar .profile-panel #recenter .recenter-label { display:inline !important; color:inherit !important; font-size:inherit !important; line-height:inherit !important; font-weight:750 !important; white-space:normal !important; }
#gameSidebar .profile-panel #recenter[hidden] { display:none !important; }

/* v50: original rounded UI and palette restored; pixel styling stays on the map layer and sprites. */
.pixel-world-theme .pixel-world-base-tiles { filter:saturate(1.12) contrast(1.04); }
.pixel-world-theme .pixel-map-grid-tile {
  width:100%;height:100%;pointer-events:none;opacity:.15;
  background-image:
    linear-gradient(rgba(10,30,23,.22) 1px,transparent 1px),
    linear-gradient(90deg,rgba(10,30,23,.22) 1px,transparent 1px),
    linear-gradient(rgba(237,250,190,.07) 1px,transparent 1px),
    linear-gradient(90deg,rgba(237,250,190,.07) 1px,transparent 1px);
  background-size:16px 16px,16px 16px,4px 4px,4px 4px;
}
.pixel-world-theme .marker,
.pixel-world-theme .player-map-marker,
.pixel-world-theme .monster-map-marker,
.pixel-world-theme .marker img,
.pixel-world-theme .player-map-marker img,
.pixel-world-theme .monster-map-marker img { image-rendering:pixelated; }
@media(max-width:600px){.pixel-world-theme .pixel-map-grid-tile{opacity:.11;}}


/* Legend World v50 enhancements */
.lw-area-context-entry{border:1px solid rgba(86,180,202,.5);border-left:3px solid #63cde8;border-radius:12px;background:linear-gradient(135deg,rgba(18,51,67,.94),rgba(16,29,49,.94));padding:9px 12px;margin:7px 0;font-size:.92rem;line-height:1.45;box-shadow:0 6px 16px rgba(0,0,0,.15);}
.leaflet-marker-icon.lw-rarity-common,.monster-marker.lw-rarity-common,.monster-pin.lw-rarity-common,.bot-marker.lw-rarity-common{border:2px solid #a6b5c2!important;}
.leaflet-marker-icon.lw-rarity-uncommon,.monster-marker.lw-rarity-uncommon,.monster-pin.lw-rarity-uncommon,.bot-marker.lw-rarity-uncommon{border:2px solid #57d69c!important;box-shadow:0 0 9px rgba(87,214,156,.4)!important;}
.leaflet-marker-icon.lw-rarity-rare,.monster-marker.lw-rarity-rare,.monster-pin.lw-rarity-rare,.bot-marker.lw-rarity-rare{border:2px solid #43b9ff!important;box-shadow:0 0 10px rgba(67,185,255,.42)!important;}
.leaflet-marker-icon.lw-rarity-epic,.monster-marker.lw-rarity-epic,.monster-pin.lw-rarity-epic,.bot-marker.lw-rarity-epic{border:2px solid #bd83ff!important;box-shadow:0 0 11px rgba(189,131,255,.45)!important;}
.leaflet-marker-icon.lw-rarity-legendary,.monster-marker.lw-rarity-legendary,.monster-pin.lw-rarity-legendary,.bot-marker.lw-rarity-legendary{border:2px solid #ffbb55!important;box-shadow:0 0 12px rgba(255,187,85,.48)!important;}
.leaflet-marker-icon.lw-rarity-mythic,.monster-marker.lw-rarity-mythic,.monster-pin.lw-rarity-mythic,.bot-marker.lw-rarity-mythic,.leaflet-marker-icon.lw-rarity-ex,.leaflet-marker-icon.lw-rarity-ss{border:2px solid #ff6c92!important;box-shadow:0 0 14px rgba(255,108,146,.55)!important;}
.lw-alpha{outline:2px solid #ffe18a!important;outline-offset:2px!important;}
.lw-shiny{filter:drop-shadow(0 0 7px #75edff)!important;}

#mapRegionLabel,.map-region-label,.region-context-label,[data-ui="region-context"]{display:none!important;}


/* v51: compact top navigation preserves Legend World's rounded blue theme. */
.topbar { justify-content: flex-start; gap: 12px; }
.topbar-home { display:flex; align-items:center; flex:0 1 auto; min-width:0; text-decoration:none; }
.topbar .lw-world-wordmark { width: clamp(104px, 14vw, 156px); height: 46px; margin:0; flex:0 1 auto; object-fit:contain; object-position:center; }
.topbar-nav { display:flex; align-items:center; gap:6px; min-width:0; }
.topbar-nav button { border:1px solid transparent; border-radius:12px; padding:8px 15px; color:#b9cce0; background:transparent; font:inherit; font-size:13px; font-weight:750; white-space:nowrap; transition:background .16s ease,border-color .16s ease,color .16s ease; }
.topbar-nav button:hover { background:rgba(66,139,186,.16); border-color:var(--line); color:#f1f8ff; }
.topbar-nav button.active { color:#f4fbff; border-color:rgba(106,204,247,.5); background:linear-gradient(135deg,rgba(27,145,192,.35),rgba(97,102,219,.28)); box-shadow:inset 0 0 0 1px rgba(255,255,255,.03); }
.topbar #connection { margin-left:auto; max-width:36%; }
.marketplace-coming-soon { margin:10px 0 2px; padding:24px 18px; border:1px solid var(--line); border-radius:18px; background:linear-gradient(145deg,rgba(19,43,66,.84),rgba(9,23,39,.82)); text-align:center; }
.marketplace-coming-soon-icon { width:58px; height:58px; display:grid; place-items:center; margin:0 auto 12px; border:1px solid var(--line-strong); border-radius:18px; color:#8ee2ff; background:linear-gradient(145deg,rgba(34,126,174,.24),rgba(87,94,206,.2)); font-size:32px; font-weight:800; }
.marketplace-coming-soon h3 { margin:0 0 8px; color:var(--text); font-size:17px; }
.marketplace-coming-soon p { margin:0 0 8px; color:var(--text); font-weight:700; }
.marketplace-coming-soon small { display:block; color:var(--muted); line-height:1.55; }
@media(max-width:600px) {
  .topbar { gap:6px; padding-left:8px; padding-right:7px; }
  .topbar .lw-world-wordmark { width:clamp(78px,24vw,106px); height:35px; }
  .topbar-nav { gap:3px; }
  .topbar-nav button { padding:7px 8px; border-radius:10px; font-size:11px; }
  .topbar #connection { max-width:62px; padding:5px 6px; font-size:9px; }
}
@media(max-width:370px) {
  .topbar { gap:4px; }
  .topbar .lw-world-wordmark { width:74px; }
  .topbar-nav button { padding:6px 6px; font-size:10px; }
  .topbar #connection { max-width:54px; font-size:8px; }
}


/* v52: keep the primary nav truly centered in the top bar while preserving the brand and connection pill at the edges. */
.topbar { position:fixed; }
.topbar-home { position:relative; z-index:3; flex:0 0 auto; }
.topbar-nav { position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); z-index:2; justify-content:center; white-space:nowrap; }
.topbar #connection { position:relative; z-index:3; margin-left:auto; flex:0 1 auto; }
@media(max-width:600px) {
  .topbar-nav { gap:3px; }
  .topbar-nav button { padding:6px 8px; }
}
@media(max-width:370px) {
  .topbar-nav { gap:1px; }
  .topbar-nav button { padding:5px 5px; font-size:10px; }
}

/* v52: live FPS + network round-trip status beside the online-player count. */
.online-hud { display:flex; align-items:center; justify-content:flex-start; flex-wrap:wrap; gap:5px 8px; }
.online-status-line { display:inline-block; white-space:nowrap; }
.lag-status-line { display:inline-flex; align-items:center; gap:3px; max-width:100%; color:#a9dfff; font-size:inherit; font-weight:800; line-height:1.25; white-space:nowrap; font-variant-numeric:tabular-nums; }
.lag-status-line.lag-smooth { color:#9df5cf; }
.lag-status-line.lag-slow { color:#ffd58b; }
.lag-status-line.lag-bad { color:#ff9ba8; }
.lag-status-line.lag-offline { color:#a7b7ca; }
.lag-status-line.lag-checking { color:#b6d7ef; }
@media(max-width:430px) {
  .online-hud { align-items:flex-start; flex-direction:column; gap:3px; }
  .online-status-line,.lag-status-line { white-space:normal; overflow-wrap:anywhere; }
}


/* v53: smooth monster travel without a JavaScript animation loop. */
.leaflet-marker-icon.lw-bot-motion-icon {
  transition: transform 1.75s cubic-bezier(.18,.62,.32,1);
}
@media (prefers-reduced-motion: reduce) {
  .leaflet-marker-icon.lw-bot-motion-icon { transition: none !important; }
}

/* Adaptive performance mode: retain the dark rounded theme but cut costly paint effects. */
html.lw-performance-low .leaflet-tile { filter: none !important; }
html.lw-performance-low .map-wrap::after { opacity: .015; }
html.lw-performance-low .pixel-world-theme .pixel-map-grid-tile { opacity: .045; background-size: 32px 32px,32px 32px,8px 8px,8px 8px; }
html.lw-performance-low .weather-rain { animation: none !important; background-size: 120px 140px; opacity: .10; }
html.lw-performance-low .weather-fog { backdrop-filter: none !important; }
html.lw-performance-low .bait-lure-marker { animation: none !important; box-shadow: 0 0 0 2px rgba(255,194,89,.12) !important; }
html.lw-performance-low .monster-marker-art,
html.lw-performance-low .marker.monster.monster-custom .monster-marker-art { filter: none !important; }
html.lw-performance-low .leaflet-marker-icon.lw-rarity-common,
html.lw-performance-low .leaflet-marker-icon.lw-rarity-uncommon,
html.lw-performance-low .leaflet-marker-icon.lw-rarity-rare,
html.lw-performance-low .leaflet-marker-icon.lw-rarity-epic,
html.lw-performance-low .leaflet-marker-icon.lw-rarity-legendary,
html.lw-performance-low .leaflet-marker-icon.lw-rarity-mythic,
html.lw-performance-low .leaflet-marker-icon.lw-rarity-ex,
html.lw-performance-low .leaflet-marker-icon.lw-rarity-ss { box-shadow: none !important; filter: none !important; }
html.lw-performance-low .topbar,
html.lw-performance-low .game-menu,
html.lw-performance-low .map-player-card,
html.lw-performance-low .weather-hud,
html.lw-performance-low .chat-dock,
html.lw-performance-low .hud-card { backdrop-filter: none !important; }
html.lw-performance-low .leaflet-marker-icon.lw-bot-motion-icon { transition-duration: 1.55s; }

html.lw-performance-low .marker.monster.monster-custom { box-shadow: 0 2px 5px rgba(0,0,0,.24) !important; }
html.lw-performance-low .marker.monster.monster-custom.rarity-legendary,
html.lw-performance-low .marker.monster.monster-custom.rarity-mythic,
html.lw-performance-low .marker.monster.monster-custom.shiny { box-shadow: 0 2px 5px rgba(0,0,0,.24) !important; filter:none !important; }


/* v54: anchor the wordmark to the far-left edge without disturbing the centered nav. */
.topbar { position:fixed; }
.topbar-home { position:absolute !important; left:12px; top:50%; transform:translateY(-50%); z-index:4; display:flex; align-items:center; flex:0 0 auto; min-width:0; margin:0; }
.topbar .lw-world-wordmark { display:block; width:clamp(112px, 13vw, 150px); height:42px; margin:0; object-fit:contain; object-position:left center; }
.topbar-nav { position:absolute !important; left:50%; top:50%; transform:translate(-50%,-50%); z-index:3; display:flex; justify-content:center; white-space:nowrap; }
.topbar #connection { position:absolute; right:12px; top:50%; transform:translateY(-50%); z-index:4; margin:0; flex:0 1 auto; max-width:min(30%, 220px); overflow:hidden; text-overflow:ellipsis; }
@media(max-width:600px) {
  .topbar-home { left:7px; }
  .topbar .lw-world-wordmark { width:clamp(66px, 22vw, 90px); height:32px; object-position:left center; }
  .topbar-nav { gap:2px; }
  .topbar-nav button { padding:6px 7px; font-size:10px; }
  .topbar #connection { right:6px; max-width:76px; padding:5px 6px; font-size:8.5px; }
}
@media(max-width:370px) {
  .topbar-home { left:6px; }
  .topbar .lw-world-wordmark { width:62px; height:29px; }
  .topbar-nav button { padding:5px 5px; font-size:9px; }
  .topbar #connection { right:5px; max-width:48px; padding:4px 4px; font-size:7.5px; }
}
.lag-status-line.lag-jank { color:#ffd58b; }
html.lw-performance-low .leaflet-marker-icon.lw-bot-motion-icon { transition-duration:1.25s; }

/* v56: reserve a taller, flush-to-top header while keeping the original rounded theme. */
.topbar {
  position: fixed !important;
  top: var(--safe-top) !important;
  height: 69px !important; /* +15px vertical room on desktop */
  border-top-left-radius: 13px;
  border-top-right-radius: 13px;
}
.map-hud, .weather-hud { top: calc(var(--safe-top) + 91px) !important; }
@media (max-width: 950px), (max-height: 789px) {
  .topbar { top: var(--safe-top) !important; height: 62px !important; /* +15px from the compact header */ }
  .map-hud, .weather-hud { top: calc(var(--safe-top) + 77px) !important; }
}

/* Fast-render preset: preserve colors/rounded panels but avoid full-screen repaint effects. */
html.lw-fast-render .leaflet-tile { filter: none !important; }
html.lw-fast-render .map-wrap::after { opacity: .012 !important; }
html.lw-fast-render .weather-rain { animation: none !important; opacity: .065 !important; background-size: 120px 160px !important; }
html.lw-fast-render .weather-fog { backdrop-filter: none !important; background: rgba(206,222,222,.09) !important; }
html.lw-fast-render .topbar,
html.lw-fast-render .game-menu,
html.lw-fast-render .map-player-card,
html.lw-fast-render .weather-hud,
html.lw-fast-render .chat-dock,
html.lw-fast-render .hud-card { backdrop-filter: none !important; }
html.lw-fast-render .leaflet-marker-icon.lw-rarity-common,
html.lw-fast-render .leaflet-marker-icon.lw-rarity-uncommon,
html.lw-fast-render .leaflet-marker-icon.lw-rarity-rare,
html.lw-fast-render .leaflet-marker-icon.lw-rarity-epic,
html.lw-fast-render .leaflet-marker-icon.lw-rarity-legendary,
html.lw-fast-render .leaflet-marker-icon.lw-rarity-mythic,
html.lw-fast-render .leaflet-marker-icon.lw-rarity-ex,
html.lw-fast-render .leaflet-marker-icon.lw-rarity-ss { filter: none !important; }
html.lw-fast-render .leaflet-marker-icon.lw-bot-motion-icon { will-change: transform; }
@media (min-width: 951px) and (min-height: 790px) {
  .weather-stack { top: calc(var(--safe-top) + 91px) !important; }
}
@media (max-width: 950px), (max-height: 789px) {
  .weather-stack { top: calc(var(--safe-top) + 77px) !important; }
}


/* v59: merge connection, online count, and latency into one readable Topbar status cluster. */
.topbar #connection.connection-cluster {
  position:absolute !important;
  right:12px !important;
  top:50% !important;
  transform:translateY(-50%) !important;
  z-index:5 !important;
  display:flex !important;
  flex-direction:column !important;
  align-items:stretch !important;
  justify-content:center !important;
  gap:4px !important;
  width:max-content !important;
  max-width:min(39%, 360px) !important;
  min-width:0 !important;
  box-sizing:border-box !important;
  padding:6px 10px !important;
  border-radius:12px !important;
  white-space:normal !important;
  overflow:hidden !important;
  text-overflow:clip !important;
  color:#dcefff !important;
  background:linear-gradient(132deg,rgba(7,24,40,.97),rgba(15,39,59,.96)) !important;
  border:1px solid rgba(111,177,219,.32) !important;
  box-shadow:0 5px 15px rgba(0,0,0,.19),inset 0 1px 0 rgba(255,255,255,.035) !important;
  font-size:10px !important;
  line-height:1.15 !important;
  font-variant-numeric:tabular-nums;
}
.topbar #connection.connection-cluster.online { border-color:rgba(77,214,165,.42) !important; }
.topbar #connection.connection-cluster.muted { border-color:rgba(145,169,192,.32) !important; }
.connection-status { display:flex; align-items:center; gap:6px; min-width:0; color:#dff2ff; font-size:10px; font-weight:750; line-height:1.1; white-space:nowrap; }
.connection-status #connectionLabel { overflow:hidden; text-overflow:ellipsis; }
.connection-indicator { width:7px; height:7px; flex:0 0 7px; border-radius:50%; background:#a4b7c7; box-shadow:0 0 0 2px rgba(164,183,199,.12); }
#connection.online .connection-indicator { background:#65e5b2; box-shadow:0 0 0 2px rgba(101,229,178,.13),0 0 8px rgba(101,229,178,.26); }
#connection.muted .connection-indicator { background:#f1bd72; box-shadow:0 0 0 2px rgba(241,189,114,.12); }
.connection-metrics { display:flex; align-items:center; justify-content:flex-start; flex-wrap:wrap; gap:3px 10px; min-width:0; width:100%; }
.connection-metrics .online-status-line,
.connection-metrics .lag-status-line { display:inline-flex !important; align-items:center; min-width:0; max-width:100%; margin:0; font-size:10px !important; line-height:1.15 !important; font-weight:750 !important; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.connection-metrics .online-status-line { color:#9df5cf !important; }
.connection-metrics .lag-status-line { color:#a9dfff; }
.connection-metrics .lag-status-line.lag-smooth { color:#9df5cf !important; }
.connection-metrics .lag-status-line.lag-slow,.connection-metrics .lag-status-line.lag-jank { color:#ffd58b !important; }
.connection-metrics .lag-status-line.lag-bad { color:#ff9ba8 !important; }
.connection-metrics .lag-status-line.lag-offline { color:#a7b7ca !important; }
.connection-metrics .lag-status-line.lag-checking { color:#b6d7ef !important; }
@media (max-width:950px) {
  .topbar #connection.connection-cluster { max-width:min(36vw,280px) !important; right:8px !important; padding:5px 8px !important; gap:3px !important; }
  .connection-status { font-size:9px; }
  .connection-metrics { gap:3px 7px; }
  .connection-metrics .online-status-line,.connection-metrics .lag-status-line { font-size:9px !important; }
}
@media (max-width:600px) {
  .topbar {
    display:grid !important;
    grid-template-columns:minmax(54px,.8fr) auto minmax(116px,1.2fr) !important;
    align-items:center !important;
    gap:4px !important;
    padding:4px 6px !important;
  }
  .topbar .topbar-home {
    position:static !important; left:auto !important; top:auto !important; transform:none !important;
    grid-column:1; justify-self:start; min-width:0; max-width:100%;
  }
  .topbar .lw-world-wordmark { width:clamp(56px,17vw,74px) !important; height:30px !important; object-position:left center !important; }
  .topbar .topbar-nav {
    position:static !important; left:auto !important; top:auto !important; transform:none !important;
    grid-column:2; justify-self:center; align-self:center; gap:2px !important; min-width:0; max-width:100%;
  }
  .topbar .topbar-nav button { padding:6px 6px !important; font-size:10px !important; border-radius:9px !important; }
  .topbar #connection.connection-cluster {
    position:static !important; right:auto !important; top:auto !important; transform:none !important;
    grid-column:3; justify-self:stretch; align-self:center; width:100% !important; max-width:100% !important; min-width:0 !important;
    padding:4px 6px !important; gap:3px !important; border-radius:10px !important; font-size:8px !important;
  }
  .connection-status { gap:4px; font-size:8.5px; }
  .connection-indicator { width:6px; height:6px; flex-basis:6px; }
  .connection-metrics { display:flex; flex-direction:column; align-items:flex-start; flex-wrap:nowrap; gap:2px; }
  .connection-metrics .online-status-line,.connection-metrics .lag-status-line { width:100%; max-width:100%; font-size:7.8px !important; line-height:1.1 !important; white-space:nowrap; }
}
@media (max-width:370px) {
  .topbar { grid-template-columns:minmax(50px,.72fr) auto minmax(108px,1.28fr) !important; gap:3px !important; padding-left:5px !important; padding-right:5px !important; }
  .topbar .lw-world-wordmark { width:54px !important; height:28px !important; }
  .topbar .topbar-nav { gap:1px !important; }
  .topbar .topbar-nav button { padding:5px 4px !important; font-size:9px !important; }
  .topbar #connection.connection-cluster { padding:4px 5px !important; }
  .connection-status { font-size:7.8px; gap:3px; }
  .connection-metrics .online-status-line,.connection-metrics .lag-status-line { font-size:7.2px !important; }
}


/* v60: square-edged topbar; status cluster sizes to its contents and stays right-aligned. */
.topbar {
  border-radius: 0 !important;
}
.topbar #connection.connection-cluster {
  width: max-content !important;
  min-width: 0 !important;
  max-width: min(39%, 360px) !important;
  justify-self: end !important;
}
.topbar #connection.connection-cluster .connection-status {
  width: max-content;
  max-width: 100%;
}
.topbar #connection.connection-cluster .connection-metrics {
  width: max-content !important;
  max-width: 100% !important;
  align-self: flex-start !important;
}
.topbar #connection.connection-cluster .connection-metrics .online-status-line,
.topbar #connection.connection-cluster .connection-metrics .lag-status-line {
  width: auto !important;
  max-width: 100% !important;
  flex: 0 1 auto !important;
}
@media (max-width: 600px) {
  .topbar {
    border-radius: 0 !important;
  }
  .topbar #connection.connection-cluster {
    width: max-content !important;
    max-width: 100% !important;
    justify-self: end !important;
    align-self: center !important;
  }
  .topbar #connection.connection-cluster .connection-metrics {
    width: max-content !important;
    max-width: 100% !important;
    align-items: flex-start !important;
  }
  .topbar #connection.connection-cluster .connection-metrics .online-status-line,
  .topbar #connection.connection-cluster .connection-metrics .lag-status-line {
    width: auto !important;
    max-width: 100% !important;
  }
}


/* v61: connection label alignment, calmer status typography, bottom-only Topbar rounding,
   tighter map HUD spacing, and precise mobile unread badge anchoring. */
.topbar {
  border-radius: 0 0 14px 14px !important;
}
.topbar #connection.connection-cluster,
.topbar #connection.connection-cluster * {
  font-weight: 400 !important;
}
.topbar #connection.connection-cluster .connection-status {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  align-self: stretch !important;
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
  font-weight: 400 !important;
}
.topbar #connection.connection-cluster .connection-status #connectionLabel {
  display: block !important;
  flex: 0 1 auto !important;
  min-width: 0 !important;
  max-width: calc(100% - 14px) !important;
  margin-left: auto !important;
  text-align: right !important;
  font-weight: 400 !important;
}
.topbar #connection.connection-cluster .connection-metrics,
.topbar #connection.connection-cluster .connection-metrics .online-status-line,
.topbar #connection.connection-cluster .connection-metrics .lag-status-line {
  font-weight: 400 !important;
}

/* Desktop topbar is 69px tall: keep map/weather HUD only 5px beneath it. */
@media (min-width: 951px) and (min-height: 790px) {
  .map-hud,
  .weather-stack { top: calc(var(--safe-top) + 74px) !important; }
  .topbar { border-radius: 0 0 14px 14px !important; }
}
/* Compact/tablet/mobile topbar is 62px tall: 5px separation. */
@media (max-width: 950px), (max-height: 789px) {
  .topbar { border-radius: 0 0 11px 11px !important; }
  .map-hud,
  .weather-stack { top: calc(var(--safe-top) + 67px) !important; }
  .game-menu > #chatMenuBtn.chat-menu-button {
    position: relative !important;
    isolation: isolate !important;
    overflow: visible !important;
  }
  .game-menu > #chatMenuBtn.chat-menu-button > #mobileChatUnread.chat-unread-badge {
    position: absolute !important;
    top: -2px !important;
    right: calc(50% - 19px) !important;
    left: auto !important;
    bottom: auto !important;
    z-index: 40 !important;
    display: grid !important;
    place-items: center !important;
    min-width: 17px !important;
    width: max-content !important;
    height: 17px !important;
    padding: 0 4px !important;
    margin: 0 !important;
    transform: none !important;
    font-size: 10px !important;
    line-height: 1 !important;
    pointer-events: none !important;
  }
  .game-menu > #chatMenuBtn.chat-menu-button > #mobileChatUnread.chat-unread-badge[hidden] {
    display: none !important;
  }
}
@media (max-width: 600px) {
  .topbar { border-radius: 0 0 10px 10px !important; }
  .topbar #connection.connection-cluster .connection-status { gap: 3px !important; }
  .topbar #connection.connection-cluster .connection-status #connectionLabel { text-align: right !important; }
}


/* v62: online count as a separate topbar content, per-channel unread badges, emoji and GIF chat. */
.topbar-right-status {
  position: absolute !important;
  top: 50% !important;
  right: 12px !important;
  transform: translateY(-50%) !important;
  z-index: 6 !important;
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  justify-content: flex-end !important;
  gap: 7px !important;
  width: max-content !important;
  max-width: min(43%, 470px) !important;
  min-width: 0 !important;
}
.topbar-right-status #connection.connection-cluster {
  position: relative !important;
  top: auto !important;
  right: auto !important;
  left: auto !important;
  transform: none !important;
  margin: 0 !important;
  width: max-content !important;
  min-width: 0 !important;
  max-width: min(240px, 25vw) !important;
  align-items: flex-end !important;
  text-align: right !important;
  overflow: hidden !important;
}
.topbar-right-status #connection .connection-status {
  display: flex !important;
  align-items: center !important;
  justify-content: flex-end !important;
  width: 100% !important;
  text-align: right !important;
}
.topbar-right-status #connection .connection-metrics {
  display: flex !important;
  justify-content: flex-end !important;
  align-items: flex-end !important;
  align-self: flex-end !important;
  width: max-content !important;
  max-width: 100% !important;
}
.topbar-right-status #connection .lag-status-line {
  display: inline-flex !important;
  justify-content: flex-end !important;
  max-width: 100% !important;
  text-align: right !important;
}
.topbar-online-count {
  display: inline-flex !important;
  flex: 0 0 auto !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 4px !important;
  width: max-content !important;
  max-width: 140px !important;
  min-width: 0 !important;
  padding: 7px 9px !important;
  border: 1px solid rgba(77,214,165,.36) !important;
  border-radius: 10px !important;
  background: linear-gradient(135deg,rgba(7,35,34,.96),rgba(11,29,43,.96)) !important;
  color: #bfffe2 !important;
  font-size: 10px !important;
  font-weight: 400 !important;
  line-height: 1.1 !important;
  white-space: nowrap !important;
  font-variant-numeric: tabular-nums;
  box-sizing: border-box !important;
}
.topbar-online-count #onlineLabelText { font-weight: 400 !important; }
.topbar-online-count #onlineCountValue { color: #eafff5 !important; font-weight: 600 !important; }
.topbar-online-count .topbar-online-dot { font-size: 9px; line-height: 1; }

@media (max-width: 950px) {
  .topbar-right-status { right: 8px !important; gap: 4px !important; max-width: 43% !important; }
  .topbar-right-status #connection.connection-cluster { max-width: min(185px, 22vw) !important; padding: 5px 7px !important; }
  .topbar-online-count { gap: 3px !important; padding: 5px 7px !important; font-size: 9px !important; }
}
@media (max-width: 600px) {
  .topbar { grid-template-columns: minmax(50px,.72fr) auto minmax(108px,1.28fr) !important; }
  .topbar-right-status {
    position: static !important;
    grid-column: 3 !important;
    justify-self: end !important;
    align-self: center !important;
    transform: none !important;
    display: flex !important;
    flex-direction: row !important;
    justify-content: flex-end !important;
    align-items: center !important;
    gap: 3px !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
  }
  .topbar-right-status #connection.connection-cluster {
    flex: 1 1 auto !important;
    width: max-content !important;
    max-width: 64px !important;
    min-width: 0 !important;
    padding: 4px 5px !important;
    gap: 2px !important;
    border-radius: 8px !important;
    font-size: 8px !important;
  }
  .topbar-right-status #connection .connection-status { gap: 3px !important; }
  .topbar-right-status #connection .connection-status #connectionLabel { max-width: calc(100% - 10px) !important; }
  .topbar-right-status #connection .connection-metrics { width: 100% !important; }
  .topbar-right-status #connection .lag-status-line { font-size: 7.4px !important; line-height: 1.05 !important; white-space: nowrap !important; }
  .topbar-online-count {
    flex: 0 1 auto !important;
    gap: 2px !important;
    max-width: 58px !important;
    min-width: 0 !important;
    padding: 5px 4px !important;
    border-radius: 8px !important;
    font-size: 7.8px !important;
    overflow: hidden !important;
  }
  .topbar-online-count .topbar-online-dot { font-size: 7px; }
}
@media (max-width: 370px) {
  .topbar { grid-template-columns: minmax(47px,.68fr) auto minmax(105px,1.32fr) !important; }
  .topbar-right-status { gap: 2px !important; }
  .topbar-right-status #connection.connection-cluster { max-width: 57px !important; padding: 3px 4px !important; }
  .topbar-online-count { max-width: 49px !important; padding: 4px 3px !important; font-size: 7.1px !important; gap: 1px !important; }
  .topbar-online-count #onlineLabelText { letter-spacing: -.2px; }
}

/* Chat tools remain part of the input form; media messages render as safe image nodes, never HTML strings. */
.chat-dock .chat-form { position: relative; align-items: center; }
.chat-dock .chat-form #chatInput { flex: 1 1 auto; min-width: 0; width: 0; }
.chat-extra-actions { position: relative; display: flex; flex: 0 0 auto; align-items: center; gap: 4px; }
.chat-dock .chat-form .chat-tool-button {
  display: grid !important; place-items: center !important;
  width: 32px !important; min-width: 32px !important; height: 36px !important; min-height: 36px !important;
  flex: 0 0 32px !important; padding: 0 !important; border: 1px solid rgba(112,183,221,.3) !important;
  border-radius: 9px !important; color: #d9f5ff !important;
  background: rgba(26,58,82,.94) !important; font-size: 17px !important; line-height: 1 !important;
}
.chat-dock .chat-form .chat-tool-button.chat-gif-button { font-size: 10px !important; font-weight: 800 !important; letter-spacing: .2px; }
.chat-emoji-picker {
  position: absolute; z-index: 30; left: 0; bottom: calc(100% + 8px); display: grid;
  grid-template-columns: repeat(4, 36px); gap: 4px; max-width: min(164px, 70vw); padding: 8px;
  border: 1px solid rgba(113,180,221,.35); border-radius: 13px; background: rgba(9,23,39,.98);
  box-shadow: 0 12px 32px rgba(0,0,0,.42); backdrop-filter: blur(12px);
}
.chat-emoji-picker[hidden] { display: none !important; }
.chat-dock .chat-form .chat-emoji-picker button {
  display: grid; place-items: center; width: 36px; min-width: 36px; height: 36px; min-height: 36px;
  flex: 0 0 36px; padding: 0; border: 1px solid transparent; border-radius: 8px;
  color: #fff; background: rgba(38,67,91,.7); font-size: 20px; line-height: 1;
}
.chat-emoji-picker button:hover { border-color: rgba(104,209,255,.55); background: rgba(43,110,149,.8); }
.message-content { display: grid; gap: 5px; min-width: 0; }
.message-content p { margin: 0; white-space: pre-wrap; overflow-wrap: anywhere; }
.chat-gif-image { display: block; width: auto; max-width: min(100%, 240px); max-height: 190px; object-fit: contain; border: 1px solid rgba(113,180,221,.2); border-radius: 10px; background: rgba(4,13,24,.5); }
@media (max-width: 600px) {
  .chat-dock .chat-form { gap: 4px !important; }
  .chat-dock .chat-form .chat-tool-button { width: 30px !important; min-width: 30px !important; height: 38px !important; min-height: 38px !important; flex-basis: 30px !important; }
  .chat-extra-actions { gap: 3px; }
  .chat-emoji-picker { grid-template-columns: repeat(4, 36px); }
  .chat-gif-image { max-width: min(100%, 220px); max-height: 160px; }
}


/* v62: move map/weather HUD five pixels farther from the topbar than v61. */
@media (min-width: 951px) and (min-height: 790px) {
  .map-hud, .weather-stack { top: calc(var(--safe-top) + 79px) !important; }
}
@media (max-width: 950px), (max-height: 789px) {
  .map-hud, .weather-stack { top: calc(var(--safe-top) + 72px) !important; }
}


/* v63: right-align the entire connection status group and match online-count pill height. */
.topbar #connection.connection-cluster .connection-status {
  justify-content: flex-end !important;
}
.topbar #connection.connection-cluster .connection-status #connectionLabel {
  margin-left: 0 !important;
  text-align: right !important;
}
.topbar-online-count {
  align-self: stretch !important;
  height: auto !important;
  min-height: 0 !important;
  box-sizing: border-box !important;
  align-items: center !important;
}


/* v64: compact, accessible custom chat-channel picker with modern unread badges. */
.chat-channel-select-native{position:absolute!important;width:1px!important;height:1px!important;min-height:1px!important;margin:-1px!important;padding:0!important;overflow:hidden!important;clip:rect(0,0,0,0)!important;clip-path:inset(50%)!important;white-space:nowrap!important;border:0!important;opacity:0!important;pointer-events:none!important}
.chat-channel-picker{position:relative;z-index:12;display:block;width:100%;min-width:0;margin:0 0 9px}
.chat-channel-trigger{display:flex;align-items:center;gap:10px;width:100%;min-width:0;min-height:52px;padding:8px 11px;border:1px solid rgba(94,195,240,.32);border-radius:13px;color:#eff8ff;background:linear-gradient(135deg,rgba(19,51,75,.98),rgba(22,35,61,.98));box-shadow:inset 0 1px 0 rgba(255,255,255,.045),0 4px 12px rgba(0,0,0,.12);text-align:left;cursor:pointer;transition:border-color .16s,background .16s,box-shadow .16s}
.chat-channel-trigger:hover,.chat-channel-trigger[aria-expanded="true"]{border-color:rgba(96,198,239,.7);background:linear-gradient(135deg,#163f5b,#20284a);box-shadow:0 0 0 2px rgba(72,176,222,.08)}
.chat-channel-trigger:focus-visible,.chat-channel-option:focus-visible{outline:2px solid #60c6ef;outline-offset:2px}
.chat-channel-trigger-icon{display:grid;place-items:center;flex:0 0 36px;width:36px;height:36px;border:1px solid rgba(111,193,232,.22);border-radius:10px;background:rgba(67,141,184,.16);font-size:18px}
.chat-channel-trigger-copy,.chat-channel-option-copy{display:grid;gap:2px;min-width:0;flex:1}
.chat-channel-trigger-copy strong{overflow:hidden;color:#f1f8ff;font-size:13px;font-weight:650;text-overflow:ellipsis;white-space:nowrap}
.chat-channel-trigger-copy small{overflow:hidden;color:#96b4ce;font-size:10px;font-weight:400;text-overflow:ellipsis;white-space:nowrap}
.chat-channel-chevron{flex:0 0 auto;color:#91bbd6;font-size:19px;line-height:1;transition:transform .16s}
.chat-channel-trigger[aria-expanded="true"] .chat-channel-chevron{transform:rotate(180deg)}
.chat-channel-unread-badge,.chat-channel-option-badge{display:inline-flex;align-items:center;justify-content:center;gap:3px;flex:0 0 auto;min-width:22px;padding:4px 7px;border:1px solid rgba(93,244,182,.28);border-radius:999px;color:#a0f8d3;background:linear-gradient(135deg,rgba(24,128,94,.32),rgba(20,83,83,.35));font-size:10px;font-weight:750;font-variant-numeric:tabular-nums;line-height:1}
.chat-channel-option-badge small{font-size:9px;font-weight:500;color:#9fe5d0}
.chat-channel-options{position:absolute;left:0;right:0;top:calc(100% + 6px);z-index:80;display:grid;gap:4px;max-height:min(300px,45dvh);overflow:auto;padding:6px;border:1px solid rgba(103,185,225,.3);border-radius:14px;background:linear-gradient(150deg,#10243a,#081726);box-shadow:0 16px 38px rgba(0,0,0,.44);overscroll-behavior:contain}
.chat-channel-options[hidden]{display:none!important}
.chat-channel-option{display:flex;align-items:center;gap:9px;min-width:0;width:100%;padding:9px;border:1px solid transparent;border-radius:10px;color:#dfedf8;background:transparent;text-align:left;cursor:pointer;transition:background .14s,border-color .14s}
.chat-channel-option:hover{background:rgba(65,132,174,.16);border-color:rgba(114,190,228,.16)}
.chat-channel-option.is-active{background:linear-gradient(100deg,rgba(25,101,139,.36),rgba(57,66,119,.26));border-color:rgba(93,190,231,.35)}
.chat-channel-option-icon{display:grid;place-items:center;flex:0 0 34px;width:34px;height:34px;border-radius:9px;background:rgba(71,123,162,.17);font-size:16px}
.chat-channel-option-copy strong{color:#edf8ff;font-size:12px;font-weight:650;line-height:1.3}
.chat-channel-option-copy small{color:#90a9c0;font-size:10px;font-weight:400;line-height:1.35}
.chat-channel-option-check{color:#8df0bf;font-size:15px;font-weight:800;padding-left:1px}
.chat-collapsed .chat-channel-picker{display:none!important}
@media(max-width:600px){.chat-channel-trigger{min-height:50px;padding:7px 9px}.chat-channel-options{max-height:min(260px,42dvh)}.chat-channel-option{padding:8px}.chat-channel-trigger-copy strong{font-size:13px}.chat-channel-option-copy small{font-size:10px}}

/* v64: expandable Codex guide consolidates world rules, habitats, rarity, items and moves. */
.codex-guide{margin:10px 0 12px}
.codex-guide-root,.codex-guide-section{min-width:0;overflow:hidden;border:1px solid rgba(105,184,226,.22);border-radius:13px;background:linear-gradient(145deg,rgba(12,31,49,.94),rgba(7,20,34,.92));}
.codex-guide-root>summary{display:flex;align-items:center;gap:9px;min-width:0;padding:11px;border-radius:12px;cursor:pointer;list-style:none;background:linear-gradient(120deg,rgba(38,105,139,.23),rgba(79,77,143,.15));}
.codex-guide-root>summary::-webkit-details-marker,.codex-guide-section>summary::-webkit-details-marker{display:none}
.codex-guide-root>summary::after,.codex-guide-section>summary::after{content:"＋";flex:0 0 auto;margin-left:auto;color:#8be3ff;font-size:16px}
.codex-guide-root[open]>summary::after,.codex-guide-section[open]>summary::after{content:"−"}
.codex-guide-summary-icon{display:grid;place-items:center;flex:0 0 36px;height:36px;border:1px solid rgba(109,202,236,.25);border-radius:11px;background:rgba(53,133,175,.2);font-size:19px}
.codex-guide-summary-copy{display:grid;gap:3px;min-width:0;flex:1}
.codex-guide-summary-copy strong{color:#e9f7ff;font-size:13px;font-weight:750}
.codex-guide-summary-copy small{color:#8baac2;font-size:10px;line-height:1.35}
.codex-guide-summary-count,.codex-section-count{flex:0 0 auto;padding:4px 7px;border:1px solid rgba(107,184,224,.22);border-radius:999px;color:#bfe8ff;background:rgba(27,72,104,.35);font-size:10px;font-variant-numeric:tabular-nums}
.codex-guide-body{display:grid;gap:7px;padding:8px}
.codex-guide-section>summary{display:flex;align-items:center;gap:7px;padding:10px;border-radius:10px;cursor:pointer;list-style:none;color:#dcefff;font-size:12px;font-weight:650;background:rgba(20,45,67,.65)}
.codex-guide-section[open]>summary{border-bottom:1px solid rgba(100,171,208,.14);border-radius:10px 10px 0 0;color:#a8e8ff}
.codex-guide-section>summary .codex-section-count{margin-left:auto}
.codex-guide-note{margin:8px 9px;color:#8daabd;font-size:10px;line-height:1.55}
.codex-rule-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px;padding:8px}
.codex-rule-stat{display:grid;align-content:start;gap:4px;min-width:0;padding:8px;border:1px solid rgba(105,171,207,.14);border-radius:10px;background:rgba(12,29,45,.75)}
.codex-rule-stat>span{font-size:16px}.codex-rule-stat>small{color:#8faec5;font-size:9px;line-height:1.3}.codex-rule-stat>strong{color:#d9f4ff;font-size:13px;font-weight:750;font-variant-numeric:tabular-nums}
.codex-guide-list{display:grid;gap:5px;padding:8px}
.codex-guide-row{display:grid;gap:4px;min-width:0;padding:8px 9px;border:1px solid rgba(107,174,208,.14);border-radius:9px;background:rgba(13,29,45,.7);color:#9fbbd0;font-size:10px;line-height:1.45}
.codex-guide-row>strong{color:#e5f5ff;font-size:12px;font-weight:700}.codex-guide-row b{color:#cfeeff;font-weight:650;font-variant-numeric:tabular-nums}
.codex-guide-row.rarity-rare{border-color:rgba(73,168,255,.25)}.codex-guide-row.rarity-epic{border-color:rgba(173,131,255,.28)}.codex-guide-row.rarity-legendary{border-color:rgba(255,198,92,.3)}
.codex-guide-section h4{margin:9px 9px 3px;color:#cce8fb;font-size:11px}
.codex-weather-list{display:flex;flex-wrap:wrap;gap:5px;padding:7px 8px 9px}
.codex-weather-chip{display:inline-flex;align-items:center;gap:7px;padding:5px 7px;border:1px solid rgba(104,170,209,.18);border-radius:8px;color:#b3ccdd;background:rgba(16,38,57,.7);font-size:10px}
.codex-weather-chip b{color:#d7f1ff;font-variant-numeric:tabular-nums}
.codex-tier-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:6px;padding:8px}
.codex-tier-chip{display:flex;align-items:center;gap:8px;min-width:0;padding:7px;border:1px solid color-mix(in srgb,var(--tier-color,#9eabb8) 35%,transparent);border-radius:9px;background:color-mix(in srgb,var(--tier-color,#9eabb8) 7%,#0b1c2c)}
.codex-tier-rank{display:grid;place-items:center;flex:0 0 32px;height:32px;border:1px solid color-mix(in srgb,var(--tier-color,#9eabb8) 50%,transparent);border-radius:9px;color:var(--tier-color,#c5d0d9);background:color-mix(in srgb,var(--tier-color,#9eabb8) 15%,#0a1a2a);font-size:12px;font-weight:900}
.codex-tier-chip>span:last-child{display:grid;gap:2px;min-width:0}.codex-tier-chip strong{color:#dceeff;font-size:10px;overflow-wrap:anywhere}.codex-tier-chip small{color:#8aa7be;font-size:9px}
.codex-element-grid{display:grid;gap:5px;padding:8px}
.codex-element-matchup{display:flex;align-items:center;gap:8px;padding:7px 9px;border:1px solid rgba(94,182,215,.14);border-radius:9px;color:#cde8f6;background:rgba(13,31,47,.72);font-size:11px}
.codex-element-matchup>span{flex:1;min-width:0}.codex-element-matchup icon{color:#81cee9;font-size:13px}.codex-element-matchup b{color:#98f2c8;font-size:10px;white-space:nowrap}
.codex-element-list{display:flex;flex-wrap:wrap;gap:5px;padding:0 8px 9px}.codex-element-list span{padding:4px 7px;border-radius:999px;color:#c5e7f6;background:rgba(57,102,140,.2);font-size:10px}
.codex-guide-items,.codex-guide-moves{display:grid;gap:6px;padding:8px}
.codex-guide-item{display:flex;align-items:flex-start;gap:9px;min-width:0;padding:8px;border:1px solid rgba(110,175,213,.15);border-radius:10px;background:rgba(11,27,42,.75)}
.codex-guide-item-art{display:grid;place-items:center;flex:0 0 42px;width:42px;height:42px;border:1px solid rgba(112,181,220,.16);border-radius:10px;background:rgba(46,97,132,.15)}
.codex-guide-item-image{display:block;width:36px;height:36px;object-fit:contain}
.codex-guide-item>div{display:grid;gap:4px;min-width:0;flex:1}.codex-guide-item strong{color:#e4f4ff;font-size:11px}.codex-guide-item p,.codex-move-row p{margin:0;color:#91abc0;font-size:10px;line-height:1.45;overflow-wrap:anywhere}.codex-guide-item small{color:#83a6c0;font-size:9px;line-height:1.4}.codex-item-kind{justify-self:start;padding:2px 6px;border-radius:999px;color:#a8e5ff;background:rgba(51,122,164,.17);font-size:9px}
.codex-move-row{display:flex;align-items:flex-start;gap:8px;padding:8px;border:1px solid rgba(107,177,214,.14);border-radius:10px;background:rgba(12,28,44,.75)}
.codex-move-icon{display:grid;place-items:center;flex:0 0 34px;height:34px;border:1px solid rgba(106,186,226,.18);border-radius:10px;background:rgba(48,108,146,.16);font-size:17px}
.codex-move-row>div{display:grid;gap:4px;min-width:0}.codex-move-row strong{color:#e0f2ff;font-size:11px}.codex-move-row small{color:#8fb1c9;font-size:9px;line-height:1.4}
@media(max-width:430px){.codex-rule-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.codex-guide-body{padding:6px}.codex-tier-grid{grid-template-columns:1fr}.codex-guide-summary-copy strong{font-size:12px}.codex-guide-summary-copy small{font-size:9px}.codex-guide-row{font-size:9px}}


/* v66: country-select world entry, WASD/joystick movement and global ranked PvP */
.virtual-movement-hint { position:absolute; z-index:720; left:calc(var(--safe-left) + 14px); bottom:calc(var(--safe-bottom) + 18px); padding:8px 12px; border:1px solid rgba(118,172,215,.35); border-radius:10px; background:rgba(7,19,33,.82); color:#d7eafa; box-shadow:0 8px 28px rgba(0,0,0,.26); font:600 11px/1.3 system-ui,sans-serif; pointer-events:none; backdrop-filter:blur(8px); }
.virtual-movement-hint span { color:#91a8bf; font-weight:400; }
.virtual-movement-hint[hidden], .virtual-joystick[hidden] { display:none !important; }
.virtual-joystick { position:absolute; z-index:810; left:calc(var(--safe-left) + 18px); bottom:calc(var(--safe-bottom) + 92px); display:none; flex-direction:column; align-items:center; gap:5px; width:124px; touch-action:none; user-select:none; -webkit-user-select:none; }
.virtual-joystick-ring { width:112px; height:112px; display:grid; place-items:center; border:1px solid rgba(165,205,235,.34); border-radius:50%; background:radial-gradient(circle at 38% 28%,rgba(76,130,170,.46),rgba(7,18,31,.78) 72%); box-shadow:0 10px 28px rgba(0,0,0,.36), inset 0 0 0 6px rgba(8,20,33,.32); touch-action:none; }
.virtual-joystick-thumb { width:44px; height:44px; border:1px solid rgba(205,231,249,.68); border-radius:50%; background:linear-gradient(145deg,#6e9dbd,#24496a); box-shadow:0 3px 10px rgba(0,0,0,.38),inset 0 1px 2px rgba(255,255,255,.24); transform:translate(0,0); will-change:transform; pointer-events:none; }
.virtual-joystick small { padding:3px 8px; border-radius:99px; color:#d8eafa; background:rgba(5,14,24,.72); font-size:10px; }
.country-picker-label { display:block; margin:14px auto 6px; max-width:380px; text-align:left; color:#bfd4e8; font-size:12px; }
.country-select { display:block; width:min(380px,100%); min-height:46px; margin:0 auto 12px; border:1px solid #476984; border-radius:12px; padding:10px 12px; background:#0d1d2e; color:#eef8ff; font:500 14px system-ui,sans-serif; }
#pvp-panel { gap:12px; }
.pvp-rank-card { display:flex; align-items:center; gap:12px; padding:15px; border:1px solid rgba(223,183,90,.34); border-radius:16px; background:linear-gradient(130deg,rgba(87,65,24,.27),rgba(18,37,56,.82)); }
.pvp-rank-emblem { flex:0 0 48px; width:48px; height:48px; display:grid; place-items:center; border:1px solid rgba(235,202,116,.32); border-radius:14px; background:rgba(185,135,42,.15); font-size:28px; }
.pvp-rank-copy { display:flex; flex:1; min-width:0; flex-direction:column; gap:3px; }
.pvp-rank-copy small,.pvp-rank-copy span { color:#adc0d3; font-size:11px; }
.pvp-rank-copy strong { color:#ffdc88; font-size:23px; line-height:1.2; }
.pvp-rank-position { flex:0 0 auto; color:#b5dfff; font-size:14px; font-weight:800; }
.pvp-queue-actions { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:8px; }
.pvp-queue-status { margin:0; padding:10px 12px; border:1px solid rgba(102,151,189,.24); border-radius:11px; background:rgba(7,18,30,.46); color:#a9c4db; font-size:12px; line-height:1.5; }
.pvp-queue-status.is-searching { color:#ffdf8b; border-color:rgba(238,187,79,.34); }
.pvp-queue-status.is-error { color:#ffada8; border-color:rgba(237,110,110,.32); }
.pvp-leaderboard-heading { display:flex; justify-content:space-between; align-items:center; gap:12px; margin-top:2px; }
.pvp-leaderboard-heading h3 { margin:0; font-size:14px; }
.pvp-leaderboard-heading small { color:var(--muted); font-size:11px; }
.pvp-leaderboard-list { display:flex; flex-direction:column; gap:6px; }
.pvp-leader-row { display:grid; grid-template-columns:34px minmax(0,1fr) auto; align-items:center; gap:9px; min-width:0; padding:9px 10px; border:1px solid rgba(118,160,197,.16); border-radius:11px; background:rgba(6,16,28,.52); }
.pvp-leader-rank { color:#8fb8d7; font-size:12px; font-weight:800; text-align:center; }
.pvp-leader-row.top-1 .pvp-leader-rank { color:#ffdd86; }
.pvp-leader-row.top-2 .pvp-leader-rank { color:#dce7f3; }
.pvp-leader-row.top-3 .pvp-leader-rank { color:#e6b38b; }
.pvp-leader-name { min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; color:#e5f2ff; font-size:12px; }
.pvp-leader-record { display:block; margin-top:2px; color:#879fb5; font-size:10px; font-weight:400; }
.pvp-leader-score { color:#ffd87d; font-size:12px; font-weight:800; white-space:nowrap; }
/* The earth element has one canonical symbol across map, battle, codex and equipment. */
.element-earth-icon { display:inline-block; font-family:"Apple Color Emoji","Segoe UI Emoji","Noto Color Emoji",sans-serif; }
@media (pointer:coarse), (max-width:760px) {
  .virtual-joystick:not([hidden]) { display:flex; }
  .virtual-movement-hint { display:none !important; }
  .pvp-queue-actions { grid-template-columns:1fr; }
  .pvp-rank-copy strong { font-size:21px; }
}
@media (pointer:fine) and (min-width:761px) {
  .virtual-movement-hint:not([hidden]) { display:block; }
  .virtual-joystick { display:none !important; }
}

/* v67: highlight the current player in the global ranked leaderboard. */
.pvp-leader-row.is-self { border-color:rgba(89,204,164,.55); background:linear-gradient(90deg,rgba(22,103,88,.26),rgba(6,16,28,.62)); box-shadow:inset 3px 0 0 rgba(99,235,183,.8); }
.pvp-leader-row.is-self .pvp-leader-name strong { color:#a9f5d3; }