/* Expeditions tab. Same navy panels / blue edges as the rest of the game; the idle layout follows the reference. */
/* Expeditions mode inside the Hunts tab */
.exp-tab-explore .exp-tab-lock { display: none; margin-left: .25rem; font-size: .75em; }
.exp-tab-explore.is-locked { filter: saturate(.55); }
.exp-tab-explore.is-locked .exp-tab-lock { display: inline; }

.xp-hub { --xp-bg: #111829; --xp-edge: #2e4063; --xp-card: #182238; width: 100%; margin: 0 auto; display: grid; gap: .6rem; color: #e2e8f0; }
.xp-panel { border: 1.6px solid var(--xp-edge); border-radius: 10px; background: var(--xp-bg); box-shadow: 0 0 0 2px #ffffff0a inset, 0 5px 0 #00000073; padding: .5rem .65rem; min-width: 0; }
.xp-panel h3 { display: flex; align-items: center; gap: .5rem; margin: 0 0 .35rem; font: 800 .92rem var(--font-pixel-ui); color: #f1f5f9; }
.xp-panel h3 svg { width: 1.4rem; height: 1.4rem; flex: none; }
.xp-help { margin-left: auto; width: 1.4rem; height: 1.4rem; display: grid; place-items: center; border-radius: 50%; border: 1px solid #60a5fa; background: #1e3a8a66; color: #bfdbfe; font: 800 .7rem var(--font-pixel-ui); cursor: pointer; padding: 0; }
.xp-kicker { color: #38bdf8; font: 700 .62rem var(--font-pixel-title); letter-spacing: .09em; }

/* Locked */
.xp-locked { margin: 4rem auto; max-width: 30rem; text-align: center; padding: 2rem; border: 1.6px solid var(--xp-edge); border-radius: 10px; background: var(--xp-bg); box-shadow: 0 5px 0 #00000073; }
.xp-locked-icon { font-size: 2.6rem; }
.xp-locked h2 { margin: .4rem 0; font: 800 1.5rem var(--font-pixel-ui); color: #fbbf24; }
.xp-locked p { color: #94a3b8; }
.xp-req-list { list-style: none; margin: 1rem 0 0; padding: 0; display: grid; gap: .5rem; text-align: left; }
.xp-req { display: flex; align-items: center; gap: .6rem; padding: .55rem .7rem; border: 1px solid #7f1d1d; border-radius: .5rem; background: #2a0f16; color: #fecaca; font-weight: 700; }
.xp-req i { width: 1.4rem; height: 1.4rem; display: grid; place-items: center; border-radius: 50%; background: #ef4444; color: #fff; font-style: normal; font-size: .8rem; flex: none; }
.xp-req.is-ok { border-color: #166534; background: #0b2a1a; color: #bbf7d0; }
.xp-req.is-ok i { background: #22c55e; }
.xp-req small { color: #94a3b8; font-weight: 600; }

/* Area selection */
.xp-select-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 1rem; padding: .3rem .2rem .6rem; border-bottom: 1px solid var(--xp-edge); }
.xp-select-head h2 { margin: .3rem 0 .2rem; font: 800 1.9rem var(--font-pixel-ui); color: #f8fafc; }
.xp-select-head p { margin: 0; color: #94a3b8; font-size: .85rem; }
.xp-team-level { text-align: center; padding: .4rem 1rem; border: 1px solid #fbbf2466; border-radius: .6rem; background: #fbbf2412; }
.xp-team-level small { display: block; color: #fcd34d; font: 700 .55rem var(--font-pixel-ui); letter-spacing: .08em; }
.xp-team-level strong { font: 800 1.6rem var(--font-pixel-ui); color: #fde68a; }
.xp-area-grid { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: .7rem; }
.xp-area { display: flex; flex-direction: column; border: 1.6px solid var(--xp-edge); border-radius: 10px; background: var(--xp-bg); overflow: hidden; box-shadow: 0 5px 0 #00000073; transition: transform .2s, border-color .2s, box-shadow .2s; }
.xp-area:hover { transform: translateY(-3px); border-color: var(--area); box-shadow: 0 5px 0 #00000073, 0 0 1.2rem color-mix(in srgb, var(--area) 35%, transparent); }
.xp-area-art { position: relative; height: 8rem; background: linear-gradient(var(--sky0), var(--sky1) 62%, var(--ground) 62%); overflow: hidden; }
.xp-area-art i { position: absolute; left: 0; right: 0; bottom: 0; height: 38%; background: repeating-linear-gradient(90deg, #ffffff10 0 6px, transparent 6px 14px); }
.xp-area-art img { position: absolute; bottom: .1rem; width: 4.6rem; height: 4.6rem; object-fit: contain; filter: drop-shadow(0 4px 3px #0007); left: calc(4% + var(--i) * 30%); transform: translateY(calc(var(--i) * -.35rem)); }
.xp-area-body { display: flex; flex-direction: column; gap: .45rem; padding: .7rem; flex: 1; }
.xp-area-body h3 { margin: 0; font: 800 .95rem var(--font-pixel-ui); color: var(--area); }
.xp-area-body p { margin: 0; color: #94a3b8; font-size: .68rem; line-height: 1.4; min-height: 2.9rem; }
.xp-area-meta { display: flex; gap: .4rem; flex-wrap: wrap; }
.xp-area-meta span { padding: .15rem .45rem; border-radius: .3rem; background: #0d1424; border: 1px solid var(--xp-edge); color: #cbd5e1; font: 700 .58rem var(--font-pixel-ui); }
.xp-area-meta .xp-level { border-color: color-mix(in srgb, var(--area) 60%, transparent); color: var(--area); }
.xp-hint { font-size: .62rem; font-weight: 700; }
.xp-hint.is-low { color: #fca5a5; } .xp-hint.is-ok { color: #86efac; } .xp-hint.is-high { color: #93c5fd; } .xp-hint.is-none { color: #94a3b8; }
.xp-drop-row { display: flex; gap: .3rem; margin-top: auto; }
.xp-chip { flex: 1; aspect-ratio: 1; display: grid; place-items: center; border: 1.6px solid var(--c); border-radius: .4rem; background: color-mix(in srgb, var(--c) 14%, #0d1424); padding: .2rem; }
.xp-chip svg { width: 100%; height: 100%; }
.xp-area .exp-primary { width: 100%; }

/* Active: top bar. Three cards with the same size and structure (label above, big value below). */
.xp-top { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .6rem; }
.xp-card { display: flex; align-items: center; gap: .8rem; min-height: 4.3rem; padding: .55rem .9rem; border: 1.6px solid var(--xp-edge); border-radius: 10px; background: var(--xp-bg); box-shadow: 0 5px 0 #00000073; min-width: 0; }
.xp-card-text { display: grid; gap: .15rem; min-width: 0; flex: none; }
.xp-card-text small { color: #94a3b8; font: 700 .68rem var(--font-clean, inherit); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.xp-card-text strong { color: #f8fafc; font: 800 1.35rem/1.1 var(--font-pixel-ui); letter-spacing: .03em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.xp-area-card .xp-card-text { flex: 1; }
.xp-area-card .xp-card-text strong { font-size: 1.15rem; }
.xp-area-thumb { width: 3.2rem; height: 2.7rem; border-radius: .5rem; border: 1.5px solid var(--area); background: linear-gradient(var(--sky0), var(--sky1) 60%, var(--ground) 60%); flex: none; image-rendering: pixelated; }
.xp-progress-card { background: linear-gradient(90deg, color-mix(in srgb, var(--area) 12%, var(--xp-bg)), var(--xp-bg)); }
.xp-track { flex: 1; min-width: 0; padding: 0 .9rem 0 .2rem; align-self: center; }
.xp-track-line { position: relative; height: 4px; margin-top: 1rem; border-radius: 2px; background: #243350; }
.xp-track-line b { position: absolute; left: 0; top: 0; bottom: 0; border-radius: inherit; background: linear-gradient(90deg, #fbbf24, var(--area)); box-shadow: 0 0 .5rem var(--area); }
.xp-track-line i { position: absolute; top: 50%; width: .8rem; height: .8rem; margin: -.4rem 0 0 -.4rem; border-radius: 50%; border: 2px solid #475569; background: #0d1424; }
.xp-track-line i.is-on { border-color: #fbbf24; background: #fde68a; box-shadow: 0 0 .5rem #fbbf24; }
.xp-track-line img { position: absolute; bottom: 7px; width: 2rem; height: 2rem; margin-left: -1rem; object-fit: contain; image-rendering: pixelated; transition: left .8s linear; }
.xp-timer-card { justify-content: space-between; }
.xp-collect { flex: none; padding: .28rem .6rem; border-radius: .45rem; border: 1px solid #fbbf24; background: #fbbf2418; color: #fde68a; font: 800 .6rem var(--font-pixel-ui); letter-spacing: .05em; cursor: pointer; }
.xp-collect:hover { background: #fbbf2430; }
.xp-collect.is-ready { background: linear-gradient(#22c55e, #15803d); border-color: #86efac; color: #fff; animation: xpReady 1.4s ease-in-out infinite; }
@keyframes xpReady { 0%, 100% { box-shadow: 0 0 .4rem #22c55e66; } 50% { box-shadow: 0 0 1.1rem #22c55e; } }
/* Main: scene + side column */
.xp-main { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: .6rem; align-items: stretch; }
.xp-scene { position: relative; min-height: 0; border: 1.6px solid var(--xp-edge); border-radius: 10px; overflow: hidden; background: #0b1020; box-shadow: 0 5px 0 #00000073; }
.xp-canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; image-rendering: pixelated; object-fit: cover; }
.xp-side { display: grid; grid-template-rows: auto 1fr; gap: .5rem; min-height: 0; contain: size; overflow: hidden; }
.xp-bonus-note { margin: 0 0 .3rem; font-size: .6rem; line-height: 1.3; color: #cbd5e1; }
.xp-bonus-note b { color: #fbbf24; }
.xp-bonus-bar { display: flex; align-items: center; gap: .5rem; }
.xp-bonus-bar > i { flex: 1; height: .9rem; border-radius: .5rem; background: #0b1222; border: 1px solid var(--xp-edge); overflow: hidden; }
.xp-bonus-bar b { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, #38bdf8, #a78bfa); box-shadow: 0 0 .5rem #38bdf8; transition: width .8s; }
.xp-bonus-bar strong { font: 800 1.05rem var(--font-pixel-ui); color: #38bdf8; min-width: 2.6rem; text-align: right; }
.xp-bonus-scale { display: flex; align-items: center; gap: .4rem; font-size: .58rem; color: #94a3b8; margin: .1rem 0 .3rem; }
.xp-bonus-scale i { flex: 1; border-top: 2px dashed #38bdf866; }
.xp-bonus-list { list-style: none; margin: 0; padding: 0; display: grid; gap: .12rem; }
.xp-bonus-list li { display: flex; align-items: center; gap: .5rem; font-size: .78rem; color: #cbd5e1; }
.xp-bonus-list li svg { width: 1.2rem; height: 1.2rem; flex: none; }
.xp-bonus-list .xp-ico { width: 1.2rem; height: 1.2rem; display: grid; place-items: center; flex: none; }
.xp-bonus-list .xp-ico svg { width: 100%; height: 100%; }
.xp-bonus-list li span:nth-child(2) { flex: 1; }
.xp-bonus-list b { color: #4ade80; font: 800 .8rem var(--font-pixel-ui); }
.xp-drops { display: flex; flex-direction: column; min-height: 0; }
.xp-drop-grid { flex: 1; display: grid; grid-template-columns: repeat(4, 1fr); grid-auto-rows: 1fr; gap: .45rem; min-height: 0; }
.xp-slot { position: relative; aspect-ratio: 2.05; padding: .2rem; display: grid; place-items: center; border: 1.6px solid color-mix(in srgb, var(--c) 55%, #1e293b); border-radius: .5rem; background: color-mix(in srgb, var(--c) 10%, #0d1424); padding: .3rem; opacity: .55; transition: opacity .3s, box-shadow .3s; }
.xp-slot.has { opacity: 1; border-color: var(--c); box-shadow: 0 0 .6rem color-mix(in srgb, var(--c) 40%, transparent); }
.xp-slot svg { width: 74%; height: 74%; min-height: 0; }
.xp-slot { grid-template-rows: 1fr auto; justify-items: center; align-items: center; padding: .35rem .2rem .25rem; aspect-ratio: auto; }
.xp-slot-name { max-width: 100%; color: #cbd5e1; font: 700 .52rem/1.15 var(--font-clean, inherit); text-align: center; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; text-transform: none; }
.xp-slot b { position: absolute; right: .15rem; bottom: .05rem; padding: 0 .25rem; border-radius: .25rem; background: #0b1222e6; color: #fff; font: 800 .6rem var(--font-pixel-ui); }
/* Bottom: team + log */
.xp-bottom { display: grid; grid-template-columns: 395px 1fr; gap: .6rem; height: 12.8rem; }
.xp-bar-title { margin: -.6rem -.7rem .5rem; padding: .45rem .8rem; border-radius: 8px 8px 0 0; background: linear-gradient(90deg, #1d4ed8, #1e3a8a 70%, transparent); }
.xp-ball { width: 1.2rem; height: 1.2rem; border-radius: 50%; border: 2px solid #0b1222; background: linear-gradient(#ef4444 0 45%, #0b1222 45% 55%, #f8fafc 55%); flex: none; }
.xp-team { display: flex; flex-direction: column; min-height: 0; overflow: hidden; }
#xpTeam { display: grid; gap: .35rem; overflow: hidden; }
.xp-mon { display: grid; grid-template-columns: 3.6rem 1.5rem 5.2rem 1fr; align-items: center; gap: .4rem; padding: .25rem .4rem .25rem 0; border: 1px solid color-mix(in srgb, var(--c) 45%, #1e293b); border-radius: .5rem; background: linear-gradient(90deg, color-mix(in srgb, var(--c) 22%, #0d1424), #0d1424 55%); overflow: hidden; }
.xp-mon-art { height: 2.9rem; display: grid; place-items: center; overflow: hidden; }
.xp-mon-art img { width: 3.6rem; height: 3.6rem; object-fit: contain; }
.xp-mon-type { width: 1.5rem; height: 1.5rem; display: grid; place-items: center; border-radius: 50%; background: #0b1222; border: 1px solid #ffffff33; }
.xp-mon-type img { width: 1rem; height: 1rem; }
.xp-mon-info strong { display: block; font: 800 .78rem var(--font-pixel-ui); color: #f8fafc; text-transform: capitalize; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.xp-mon-lv { display: inline-block; margin-top: .15rem; padding: .05rem .4rem; border-radius: .25rem; background: #0b1222; border: 1px solid #334155; font: 700 .58rem var(--font-pixel-ui); color: #e2e8f0; }
.xp-mon-bars { display: grid; grid-template-columns: auto 1fr auto; align-items: center; column-gap: .35rem; row-gap: .2rem; font-size: .58rem; color: #94a3b8; font-weight: 800; }
.xp-mon-bars i { height: .5rem; border-radius: .3rem; background: #0b1222; border: 1px solid #334155; position: relative; overflow: hidden; }
.xp-mon-bars i b, .xp-mon-bars i u { position: absolute; left: 0; top: 0; bottom: 0; border-radius: inherit; }
.xp-mon-bars i.hp b { background: linear-gradient(#4ade80, #16a34a); }
.xp-mon-bars i.xp u { background: #7dd3fc66; }
.xp-mon-bars i.xp b { background: linear-gradient(#38bdf8, #0284c7); }
.xp-mon-bars em { font-style: normal; color: #cbd5e1; font-size: .56rem; min-width: 4.2rem; text-align: right; white-space: nowrap; }
.xp-mon-bars em small { color: #4ade80; }
.xp-team-empty { color: #64748b; }
.xp-log { display: flex; flex-direction: column; min-height: 0; padding: .4rem .5rem; }
.xp-log-head { display: flex; justify-content: flex-end; color: #94a3b8; font-size: .68rem; padding: 0 .3rem .3rem; }
#xpLog { list-style: none; margin: 0; padding: 0 .25rem 0 0; overflow-y: auto; scrollbar-width: thin; scrollbar-color: #2e4063 transparent; display: grid; gap: .25rem; align-content: start; }
.xp-row { display: grid; grid-template-columns: 2.6rem 2.2rem 1fr auto auto; align-items: center; gap: .5rem; padding: .22rem .5rem; border-left: 3px solid var(--c); border-radius: .35rem; background: linear-gradient(90deg, color-mix(in srgb, var(--c) 18%, #0d1424), #0d1424 60%); font-size: .75rem; }
.xp-row time { color: #94a3b8; font-size: .66rem; }
.xp-row img { width: 2rem; height: 2rem; object-fit: contain; image-rendering: pixelated; }
.xp-row-ico { width: 1.7rem; height: 1.7rem; display: grid; place-items: center; }
.xp-row-ico svg { width: 100%; height: 100%; }
.xp-row-text { color: #f1f5f9; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; text-transform: capitalize; }
.xp-exp { display: inline-flex; align-items: center; gap: .3rem; padding: .1rem .4rem; border-radius: 1rem; background: #1e3a8a88; border: 1px solid #3b82f6; color: #bfdbfe; font-size: .62rem; font-weight: 800; white-space: nowrap; }
.xp-exp i { font-style: normal; padding: 0 .25rem; border-radius: .6rem; background: #3b82f6; color: #fff; font-size: .5rem; }
.xp-tag { font-style: normal; min-width: 4rem; text-align: center; padding: .1rem .4rem; border-radius: .3rem; background: color-mix(in srgb, var(--c) 20%, #0d1424); border: 1px solid color-mix(in srgb, var(--c) 70%, transparent); color: color-mix(in srgb, var(--c) 60%, #fff); font-size: .62rem; font-weight: 800; }
.xp-tag i { font-style: normal; margin-right: .2rem; }
.xp-row-empty { color: #64748b; padding: .6rem; font-size: .78rem; }

html.battlemon-mobile .xp-hub { width: 100%; }





.xp-progress-card .xp-card-text { min-width: 4.2rem; }
.xp-progress-card .xp-card-text strong { overflow: visible; }


/* Cards in the same row: the description absorbs the spare height so tags, warning and thumbs line up. */
.xp-area-body p { flex: 1 0 auto; }

/* Scene frame: clean edge, no inner vignette */
.xp-scene { border-radius: 12px; box-shadow: 0 5px 0 #00000073, 0 0 0 1px #00000055, inset 0 0 0 2px #ffffff12; }

/* Expedition list: running state, head stats */
.xp-head-stats { display: flex; gap: .6rem; }
.xp-area.is-running { border-color: var(--area); box-shadow: 0 5px 0 #00000073, 0 0 1rem color-mix(in srgb, var(--area) 28%, transparent); }
.xp-running { display: grid; gap: .3rem; padding: .35rem .5rem; border: 1px solid color-mix(in srgb, var(--area) 55%, transparent); border-radius: .4rem; background: color-mix(in srgb, var(--area) 12%, #0d1424); }
.xp-running-top { display: flex; align-items: center; justify-content: space-between; gap: .4rem; }
.xp-running-top b { color: var(--area); font: 800 .55rem var(--font-pixel-ui); letter-spacing: .06em; }
.xp-running-top em { font: 800 .8rem var(--font-pixel-ui); color: #f8fafc; font-style: normal; }
.xp-running > i { display: block; height: .4rem; border-radius: .3rem; background: #0b1222; overflow: hidden; }
.xp-running > i u { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, #fbbf24, var(--area)); transition: width .8s linear; }
.xp-view-btn { background: linear-gradient(#1e3a5f, #142a46) !important; border-color: var(--area) !important; color: #f1f5f9 !important; }
.xp-view-btn.is-ready { background: linear-gradient(#22c55e, #15803d) !important; border-color: #86efac !important; color: #fff !important; animation: xpReady 1.4s ease-in-out infinite; }

/* Back + switcher above the expedition view */
.xp-crumbs { display: flex; align-items: center; gap: .7rem; min-width: 0; }
.xp-back { display: inline-flex; align-items: center; gap: .4rem; flex: none; padding: .45rem .8rem; border: 1px solid #38bdf8; border-radius: .5rem; background: #0c2238; color: #bae6fd; font: 800 .62rem var(--font-pixel-ui); letter-spacing: .05em; cursor: pointer; transition: transform .15s, box-shadow .15s, background .15s; }
.xp-back svg { width: .9rem; height: .9rem; }
.xp-back:hover { background: #12334f; box-shadow: 0 0 .9rem #38bdf855; transform: translateY(-1px); }
.xp-chip-list { display: flex; gap: .45rem; flex: 1; min-width: 0; overflow: hidden; }
.xp-chip-nav { display: inline-flex; align-items: center; gap: .45rem; min-width: 0; padding: .38rem .65rem; border: 1px solid color-mix(in srgb, var(--area) 45%, #2e4063); border-radius: .5rem; background: #0d1424; color: #cbd5e1; font: 700 .62rem var(--font-pixel-ui); cursor: pointer; transition: border-color .15s, background .15s; }
.xp-chip-nav i { width: .55rem; height: .55rem; border-radius: 50%; background: var(--area); box-shadow: 0 0 .4rem var(--area); flex: none; }
.xp-chip-nav span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.xp-chip-nav em { font-style: normal; color: #94a3b8; font-size: .58rem; }
.xp-chip-nav:hover, .xp-chip-nav.is-current { border-color: var(--area); background: color-mix(in srgb, var(--area) 16%, #0d1424); color: #fff; }
.xp-crumb-count { flex: none; color: #94a3b8; font: 700 .6rem var(--font-pixel-ui); letter-spacing: .06em; }
/* Live view fills the whole window: the hub gets the available height (set in fit()) and the scene takes what is left. */
.xp-hub.xp-live { grid-template-rows: auto auto minmax(0, 1fr) auto; }
.xp-hub.xp-live .xp-main { min-height: 0; }
.xp-hub.xp-live .xp-scene { height: 100%; }
.xp-hub.xp-live .xp-bottom { height: 11.5rem; }
/* Compact chrome so the scene gets the room; the canvas crops the sky first (anchored to the ground). */
.xp-hub.xp-live { gap: .5rem; }
.xp-hub.xp-live .xp-card { min-height: 3.6rem; padding: .4rem .8rem; }
.xp-hub.xp-live .xp-card-text strong { font-size: 1.15rem; }
.xp-hub.xp-live .xp-area-card .xp-card-text strong { font-size: 1.05rem; }
.xp-hub.xp-live .xp-bottom { height: 11rem; }
.xp-hub.xp-live #xpTeam { overflow-y: auto; scrollbar-width: thin; scrollbar-color: #2e4063 transparent; }
.xp-hub.xp-live .xp-canvas { object-position: 50% 90%; }
/* Team picker (3 slots) */
.xp-team-modal { width: min(40rem, 94vw); height: min(40rem, 92vh); display: flex; flex-direction: column; }
.xp-team-modal .modal-header small { display: block; margin-top: .25rem; color: #94a3b8; font: 700 .58rem var(--font-pixel-ui); letter-spacing: .05em; }
.xp-slots { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .6rem; padding: .7rem 1rem .2rem; flex: none; }
.xp-slot-box { position: relative; display: grid; justify-items: center; align-content: center; gap: .1rem; min-height: 6.2rem; padding: .4rem; border: 2px dashed #334a6b; border-radius: .7rem; background: #0d1424; color: #475569; cursor: default; }
.xp-slot-box > span { font: 800 1.6rem var(--font-pixel-ui); color: #334a6b; }
.xp-slot-box small { color: #64748b; font: 700 .52rem var(--font-pixel-ui); letter-spacing: .06em; }
.xp-slot-box.is-filled { border-style: solid; border-color: #4ade80; background: linear-gradient(#10301f, #0d1424); box-shadow: 0 0 .9rem #22c55e33; color: #e2e8f0; cursor: pointer; transition: transform .15s; }
.xp-slot-box.is-filled:hover { transform: translateY(-2px); border-color: #f87171; }
.xp-slot-box img { width: 3.6rem; height: 3.6rem; object-fit: contain; image-rendering: pixelated; }
.xp-slot-box strong { max-width: 100%; font: 800 .66rem var(--font-pixel-ui); text-transform: capitalize; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.xp-slot-box.is-filled small { color: #fde68a; }
.xp-slot-box i { position: absolute; top: .3rem; right: .4rem; font-style: normal; color: #94a3b8; font-size: .7rem; }
.xp-team-tools { padding: .5rem 1rem 0; flex: none; }
.xp-pick-list { flex: 1; min-height: 0; padding-top: .5rem; }
.xp-pick-row.is-on { border-color: #4ade80; box-shadow: 0 0 .8rem #22c55e44; }
.xp-pick-row:disabled { opacity: .45; cursor: not-allowed; transform: none; }
.xp-team-foot { padding: .6rem 1rem .9rem; flex: none; }
.xp-team-foot .exp-primary { width: 100%; }

/* ---- Live view v3: scene with a HUD on top, log under it; bonus, drops (list) and team in the right column ---- */
.xp-hub.xp-live { grid-template-rows: auto minmax(0, 1fr); gap: .6rem; }
.xp-layout { display: grid; grid-template-columns: minmax(0, 1fr) 23rem; gap: .7rem; min-height: 0; }
.xp-left { display: grid; grid-template-rows: minmax(0, 1fr) 9.5rem; gap: .7rem; min-height: 0; min-width: 0; }
.xp-right { display: grid; grid-template-rows: auto minmax(0, 1fr) auto; gap: .6rem; min-height: 0; min-width: 0; }
.xp-hub.xp-live .xp-scene { height: 100%; }
.xp-hud { position: absolute; top: .7rem; left: .7rem; right: .7rem; z-index: 3; display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: .6rem; align-items: stretch; pointer-events: none; }
.xp-hud-pill { pointer-events: auto; display: flex; align-items: center; gap: .8rem; min-width: 0; padding: .45rem .85rem; border-radius: .8rem; border: 1px solid #ffffff22; background: #080d1ad9; backdrop-filter: blur(6px); box-shadow: 0 .3rem 1rem #0007, inset 0 1px #ffffff12; }
.xp-hud-pill .xp-card-text { gap: .1rem; }
.xp-hud-pill .xp-card-text small { font-size: .62rem; }
.xp-hud-pill .xp-card-text strong { font-size: 1.05rem; }
.xp-hud-area { border-color: color-mix(in srgb, var(--area) 55%, #ffffff22); }
.xp-hud-progress .xp-track { flex: 1; min-width: 6rem; padding: 0 .8rem 0 .2rem; }
.xp-hud-progress .xp-card-text { min-width: 3.6rem; }
.xp-hud-timer .xp-card-text strong { letter-spacing: .05em; }
.xp-hud .xp-collect { padding: .4rem .8rem; font-size: .62rem; }

/* right column */
.xp-right .xp-panel { padding: .55rem .7rem; }
.xp-right .xp-panel h3 { margin-bottom: .45rem; font-size: .82rem; }
.xp-bonus-pct { margin-left: auto; color: #38bdf8; font: 800 .95rem var(--font-pixel-ui); }
.xp-bonus .xp-help { margin-left: .4rem; }
.xp-bonus-bar { margin-bottom: .5rem; }
.xp-bonus-bar > i { display: block; height: .55rem; border-radius: .4rem; background: #0b1222; border: 1px solid var(--xp-edge); overflow: hidden; }
.xp-bonus-bar b { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, #38bdf8, #a78bfa); box-shadow: 0 0 .5rem #38bdf8; transition: width .8s; }
.xp-bonus-list li { font-size: .74rem; }
.xp-drops { display: flex; flex-direction: column; min-height: 0; }
.xp-drop-list { list-style: none; margin: 0; padding: 0 .2rem 0 0; display: grid; gap: .35rem; align-content: start; flex: 1; min-height: 0; overflow-y: auto; scrollbar-width: thin; scrollbar-color: #2e4063 transparent; }
.xp-drop { display: grid; grid-template-columns: 1.9rem minmax(0, 1fr) auto 2.8rem; align-items: center; gap: .55rem; padding: .32rem .55rem; border: 1px solid color-mix(in srgb, var(--c) 35%, #1e293b); border-left: 3px solid var(--c); border-radius: .5rem; background: linear-gradient(90deg, color-mix(in srgb, var(--c) 10%, #0d1424), #0d1424 70%); opacity: .5; transition: opacity .3s, box-shadow .3s; }
.xp-drop.has { opacity: 1; box-shadow: 0 0 .7rem color-mix(in srgb, var(--c) 28%, transparent); }
.xp-drop-ico { display: grid; place-items: center; width: 1.9rem; height: 1.9rem; }
.xp-drop-ico svg { width: 100%; height: 100%; }
.xp-drop-name { min-width: 0; color: #f1f5f9; font: 700 .76rem var(--font-clean, inherit); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.xp-drop-tag { font-style: normal; padding: .05rem .4rem; border-radius: .3rem; background: color-mix(in srgb, var(--c) 18%, #0d1424); border: 1px solid color-mix(in srgb, var(--c) 60%, transparent); color: color-mix(in srgb, var(--c) 60%, #fff); font: 800 .5rem var(--font-pixel-ui); white-space: nowrap; }
.xp-drop-qty { text-align: right; color: #fff; font: 800 .8rem var(--font-pixel-ui); }
.xp-drop:not(.has) .xp-drop-qty { color: #64748b; }
.xp-right .xp-team { overflow: visible; }
.xp-right .xp-bar-title { margin: -.55rem -.7rem .5rem; }
.xp-hub.xp-live #xpTeam { max-height: 12.5rem; overflow-y: auto; }
.xp-log { padding: .5rem .6rem; }
.xp-log-head { display: flex; align-items: center; justify-content: space-between; padding: 0 .2rem .35rem; color: #94a3b8; font-size: .66rem; }
.xp-log-head h3 { margin: 0; font-size: .8rem; }
.xp-log-head h3 svg { width: 1.1rem; height: 1.1rem; }

/* compact right column so the drop list shows everything */
.xp-drop { padding: .2rem .5rem; grid-template-columns: 1.6rem minmax(0, 1fr) auto 2.6rem; gap: .5rem; }
.xp-drop-ico { width: 1.6rem; height: 1.6rem; }
.xp-drop-list { gap: .28rem; }
.xp-right .xp-mon { grid-template-columns: 2.6rem 1.3rem 4.6rem 1fr; padding: .12rem .35rem .12rem 0; gap: .3rem; }
.xp-right .xp-mon-art { height: 2.2rem; }
.xp-right .xp-mon-art img { width: 2.7rem; height: 2.7rem; }
.xp-right .xp-mon-type { width: 1.3rem; height: 1.3rem; }
.xp-right .xp-mon-info strong { font-size: .68rem; }
.xp-hub.xp-live #xpTeam { max-height: 9.4rem; gap: .25rem; }
.xp-right .xp-bonus-list { gap: .05rem; }

/* Slots on the running expedition */
.xp-mon.is-empty { display: flex; align-items: center; justify-content: center; gap: .5rem; width: 100%; padding: .35rem; border: 2px dashed #334a6b; border-radius: .5rem; background: #0d1424; color: #64748b; font: 800 .6rem var(--font-pixel-ui); letter-spacing: .05em; cursor: pointer; transition: border-color .15s, color .15s, background .15s; }
.xp-mon.is-empty:hover { border-color: #4ade80; color: #bbf7d0; background: #0e2a1c; }
.xp-mon-add { display: grid; place-items: center; width: 1.4rem; height: 1.4rem; border-radius: 50%; border: 1px solid currentColor; font-size: .9rem; }
.xp-edit-team { margin-left: auto; padding: .2rem .55rem; border-radius: .4rem; border: 1px solid #93c5fd; background: #0c2238aa; color: #dbeafe; font: 800 .5rem var(--font-pixel-ui); letter-spacing: .05em; cursor: pointer; }
.xp-edit-team:hover { background: #12334f; }

/* Layout v4: crumbs live in the screen header under the title; team (3 slots) under the scene; diary in the right column */
.xp-crumbs-host:empty { display: none; }
.xp-crumbs-host { margin-top: .45rem; }
.xp-crumbs-host .xp-crumbs { flex-wrap: nowrap; }
.xp-hub.xp-live { grid-template-rows: minmax(0, 1fr); }
.xp-left { grid-template-rows: minmax(0, 1fr) auto; }
.xp-right { grid-template-rows: auto minmax(0, 1fr) minmax(0, .85fr); }
.xp-left .xp-team { padding: .5rem .7rem .6rem; overflow: visible; }
.xp-left .xp-bar-title { margin: -.5rem -.7rem .5rem; }
.xp-hub.xp-live .xp-left #xpTeam { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .5rem; max-height: none; overflow: visible; }
.xp-left .xp-mon { grid-template-columns: 3rem 4.6rem minmax(0, 1fr); padding: .25rem .4rem .25rem 0; }
.xp-left .xp-mon-type { display: none; }
.xp-left .xp-mon-art { height: 3rem; }
.xp-left .xp-mon-art img { width: 3.2rem; height: 3.2rem; }
.xp-left .xp-mon.is-empty { min-height: 3.7rem; }
.xp-right .xp-log { display: flex; flex-direction: column; min-height: 0; padding: .55rem .65rem; }
.xp-right .xp-log #xpLog { flex: 1; min-height: 0; }
.xp-right .xp-row { grid-template-columns: 2.2rem 1.8rem minmax(0, 1fr) auto; gap: .4rem; font-size: .68rem; }
.xp-right .xp-row .xp-tag, .xp-right .xp-row .xp-exp { display: none; }
.xp-right .xp-row.is-item .xp-tag { display: none; }

/* Scale fix: normal-size UI; only the scene follows the window height (clamped), team under it, diary/drops on the right */
.xp-hub.xp-live { grid-template-rows: auto; height: auto; }
.xp-layout { align-items: stretch; }
.xp-left { grid-template-rows: auto auto; }
.xp-hub.xp-live .xp-scene { height: clamp(17rem, calc(100dvh - 26rem), 33rem); min-height: 17rem; }
.xp-right { grid-template-rows: auto minmax(7.5rem, 1fr) minmax(6.5rem, .8fr); contain: size; overflow: hidden; }
.xp-hub.xp-live .xp-card-text strong { font-size: 1.1rem; }
.xp-right { grid-template-rows: auto minmax(9rem, 1.4fr) minmax(5.5rem, .6fr); }
.xp-right .xp-bonus-list li { font-size: .68rem; }
.xp-right .xp-bonus .xp-bonus-bar { margin-bottom: .3rem; }
.xp-right .xp-panel h3 { margin-bottom: .3rem; font-size: .8rem; }
.xp-drop { padding: .16rem .5rem; }

.xp-select-head h2 { display: none; }