/* ── Reset & Base ─────────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

:root {
    --bg:        #0e0e12;
    --surface:   #16161e;
    --border:    #2a2a3a;
    --text:      #d4d0c8;
    --text-dim:  #7a7a8a;
    --accent:    #6eb5a0;
    --danger:    #c04040;
    --warn:      #c09040;
    --admin:     #a06ec0;

    --ocean:     #1c4e8c;
    --lake:      #3a6e90;
    --shallows:  #3a8aaa;
    --beach:     #d2c38c;
    --river:     #4078be;
    --swamp:     #3c503c;
    --marsh:     #556848;
    --grassland: #6eaf41;
    --plains:    #b9af5a;
    --savanna:   #a09238;
    --forest:    #285a28;
    --jungle:    #1a5c1a;
    --desert:    #d2af64;
    --mountain:  #827d78;
    --tundra:    #8ea898;
    --snow:      #e6ebf0;
    --glacier:   #c8dce8;
    --volcano:   #d85a06;
    --sprite-grid-cell: 24px;
    --sprite-grid-cell-medium: 20px;
}

html, body { height: 100svh; background: var(--bg); color: var(--text); font-family: 'Segoe UI', system-ui, sans-serif; font-size: 14px; overflow: hidden; }

/* ── Login Screen ─────────────────────────────────────────────────────────── */
.login-screen { display: flex; align-items: center; justify-content: center; height: 100svh; }
.login-box { background: var(--surface); border: 1px solid var(--border); border-radius: 8px; padding: 2.5rem; width: 340px; display: flex; flex-direction: column; gap: 1rem; }
.login-box h1 { font-size: 1.5rem; color: var(--accent); text-align: center; }
.login-box label { display: flex; flex-direction: column; gap: .3rem; color: var(--text-dim); font-size: .85rem; }
.login-box input { background: var(--bg); border: 1px solid var(--border); color: var(--text); padding: .5rem .7rem; border-radius: 4px; font-size: 1rem; outline: none; }
.login-box input:focus { border-color: var(--accent); }
.login-box button { background: var(--accent); color: #0e0e12; border: none; border-radius: 4px; padding: .6rem 1rem; font-size: 1rem; font-weight: 600; cursor: pointer; }
.login-box button:disabled { opacity: .5; cursor: default; }
.hint { font-size: .78rem; color: var(--text-dim); text-align: center; }
.status-text { color: var(--text-dim); text-align: center; }
.error-text  { color: var(--danger); font-size: .85rem; }
.success-text { color: var(--accent); font-size: .85rem; }

/* ── Game Layout ──────────────────────────────────────────────────────────── */
.game-layout {
    display: grid;
    grid-template-columns: 1fr 220px;
    grid-template-rows: 1fr 220px;
    height: 100svh;
    gap: 4px;
    padding: 4px;
}
.map-area  { grid-column: 1; grid-row: 1; overflow: hidden;  background: #050508; border: 1px solid var(--border); border-radius: 6px; display: flex; align-items: center; justify-content: center; }
.sidebar   { grid-column: 2; grid-row: 1 / 3; display: flex; flex-direction: column; gap: 4px; overflow-y: auto; }
.chat-area { grid-column: 1; grid-row: 2; }

/* ── Hex Map ──────────────────────────────────────────────────────────────── */
.hex-map-container { cursor: default; display: flex; align-items: center; justify-content: center;  }
.hex-map-svg { display: block; }
.hex-group { cursor: pointer; }
.hex-group:hover path { filter: brightness(1.25); }
.hex-group.adjacent path { stroke: rgba(255,255,255,.5); stroke-width: 1.5; }
.hex-group.hovered path { stroke: white; stroke-width: 1.5; filter: brightness(1.3); }

.hex-tile { stroke-width: 1; }
.hex-fog  { fill: #050508; stroke: rgba(0,0,0,.5); stroke-width: .8; pointer-events: none; }
.biome-ocean     { fill: var(--ocean);     filter: url(#tex-water);   stroke: color-mix(in srgb, var(--ocean)     80%, rgb(49, 32, 19)); }
.biome-lake      { fill: var(--lake);      filter: url(#tex-water);   stroke: color-mix(in srgb, var(--lake)      90%, rgb(49, 32, 19)); }
.biome-shallows  { fill: var(--shallows);  filter: url(#tex-water);   stroke: color-mix(in srgb, var(--shallows)  90%, rgb(49, 32, 19)); }
.biome-beach     { fill: var(--beach);     filter: url(#tex-sand);    stroke: color-mix(in srgb, var(--beach)     90%, rgb(49, 32, 19)); }
.biome-river     { fill: var(--river);     filter: url(#tex-water);   stroke: color-mix(in srgb, var(--river)     90%, rgb(49, 32, 19)); }
.biome-swamp     { fill: var(--swamp);     filter: url(#tex-wetland); stroke: color-mix(in srgb, var(--swamp)     70%, rgb(49, 32, 19)); }
.biome-marsh     { fill: var(--marsh);     filter: url(#tex-wetland); stroke: color-mix(in srgb, var(--marsh)     70%, rgb(49, 32, 19)); }
.biome-grassland { fill: var(--grassland); filter: url(#tex-grass);   stroke: color-mix(in srgb, var(--grassland) 90%, rgb(49, 32, 19)); }
.biome-plains    { fill: var(--plains);    filter: url(#tex-grass);   stroke: color-mix(in srgb, var(--plains)    90%, rgb(49, 32, 19)); }
.biome-savanna   { fill: var(--savanna);   filter: url(#tex-grass);   stroke: color-mix(in srgb, var(--savanna)   90%, rgb(49, 32, 19)); }
.biome-forest    { fill: var(--forest);    filter: url(#tex-forest);  stroke: color-mix(in srgb, var(--forest)    60%, rgb(49, 32, 19)); }
.biome-jungle    { fill: var(--jungle);    filter: url(#tex-forest);  stroke: color-mix(in srgb, var(--jungle)    90%, rgb(49, 32, 19)); }
.biome-desert    { fill: var(--desert);    filter: url(#tex-sand);    stroke: color-mix(in srgb, var(--desert)    90%, rgb(49, 32, 19)); }
.biome-mountain  { fill: var(--mountain);  filter: url(#tex-rock);    stroke: color-mix(in srgb, var(--mountain)  90%, rgb(49, 32, 19)); }
.biome-tundra    { fill: var(--tundra);    filter: url(#tex-tundra);  stroke: color-mix(in srgb, var(--tundra)    90%, rgb(49, 32, 19)); }
.biome-snow      { fill: var(--snow);      filter: url(#tex-snow);    stroke: color-mix(in srgb, var(--snow)      90%, rgb(49, 32, 19)); }
.biome-glacier   { fill: var(--glacier);   filter: url(#tex-snow);    stroke: color-mix(in srgb, var(--glacier)   90%, rgb(49, 32, 19)); }
.biome-volcano   { fill: var(--volcano);   filter: url(#tex-lava);    stroke: color-mix(in srgb, var(--volcano)   90%, rgb(49, 32, 19)); }

.feature-dot         { pointer-events: none; opacity: 0.82; stroke: rgba(0,0,0,0.5); stroke-width: 0.8; }
.feature-dot.feature-nature  { fill: #9b59b6; }
.feature-dot.feature-ruins   { fill: #c0392b; }
.feature-dot.feature-water   { fill: #2980b9; }
.feature-dot.feature-desert  { fill: #d4a017; }
.feature-dot.feature-cold    { fill: #85c1e9; }
.feature-dot.feature-dungeon   { fill: #f0c040; stroke: rgba(120,80,0,0.7);  opacity: 1; animation: dungeon-dot-pulse 2.4s ease-in-out infinite; }
.feature-dot.feature-challenge { fill: #f07820; stroke: rgba(160,60,0,0.7);  opacity: 1; animation: challenge-dot-pulse 2.0s ease-in-out infinite; }
.feature-dot.feature-fishing   { fill: #2080c8; stroke: rgba(0,40,120,0.7);  opacity: 1; animation: fishing-dot-pulse 2.8s ease-in-out infinite; }

.feature-dungeon-halo {
    fill: rgba(240, 192, 64, 0.35);
    stroke: rgba(240, 192, 64, 0.6);
    stroke-width: 0.8;
    pointer-events: none;
    transform-box: fill-box;
    transform-origin: center;
    animation: dungeon-halo-ripple 2.4s ease-out infinite;
}

.feature-challenge-halo {
    fill: rgba(240, 120, 32, 0.30);
    stroke: rgba(240, 120, 32, 0.65);
    stroke-width: 0.8;
    pointer-events: none;
    transform-box: fill-box;
    transform-origin: center;
    animation: challenge-halo-ripple 2.0s ease-out infinite;
}

@keyframes dungeon-halo-ripple {
    0%   { transform: scale(1);   opacity: 0.7; }
    100% { transform: scale(2.8); opacity: 0; }
}

@keyframes dungeon-dot-pulse {
    0%, 100% { opacity: 0.95; }
    50%       { opacity: 1; filter: drop-shadow(0 0 3px rgba(240, 192, 64, 0.9)); }
}

@keyframes challenge-halo-ripple {
    0%   { transform: scale(1);   opacity: 0.75; }
    100% { transform: scale(2.6); opacity: 0; }
}

@keyframes challenge-dot-pulse {
    0%, 100% { opacity: 0.90; }
    50%       { opacity: 1; filter: drop-shadow(0 0 3px rgba(240, 120, 32, 0.95)); }
}

.feature-fishing-halo {
    fill: rgba(32, 128, 200, 0.28);
    stroke: rgba(32, 128, 200, 0.55);
    stroke-width: 0.8;
    pointer-events: none;
    transform-box: fill-box;
    transform-origin: center;
    animation: fishing-halo-ripple 2.8s ease-out infinite;
}

@keyframes fishing-halo-ripple {
    0%   { transform: scale(1);   opacity: 0.65; }
    100% { transform: scale(2.5); opacity: 0; }
}

@keyframes fishing-dot-pulse {
    0%, 100% { opacity: 0.88; }
    50%       { opacity: 1; filter: drop-shadow(0 0 3px rgba(32, 128, 200, 0.90)); }
}

.player-dot       { pointer-events: none; }
.player-dot.self  { stroke: #0e0e12; stroke-width: 1.5; }
.player-dot.other { stroke: #0e0e12; stroke-width: 1; }

.tile-tooltip { fill: white; font-size: 11px; pointer-events: none; text-shadow: 0 0 4px #000; }

/* ── Minimap ──────────────────────────────────────────────────────────────── */
.minimap-container { background: var(--surface); border: 1px solid var(--border); border-radius: 6px; padding: 6px; display: flex; flex-direction: column; gap: 4px; cursor: pointer; }
.minimap-container:hover { border-color: var(--accent); }
.minimap-canvas { width: 100%; image-rendering: pixelated; border: 1px solid var(--border); border-radius: 3px; }
.minimap-label { font-size: .75rem; color: var(--text-dim); text-align: center; display: none; }

.minimap-popup { background: var(--surface); border: 1px solid var(--border); border-radius: 8px; display: flex; flex-direction: column; gap: 8px; padding: 1rem; max-width: 90vw; max-height: 90vh; }
.minimap-popup-header { display: flex; justify-content: space-between; align-items: center; color: var(--text); font-size: .9rem; font-weight: 600; }
.minimap-popup-header button { background: none; border: none; color: var(--text-dim); font-size: 1rem; cursor: pointer; padding: .1rem .4rem; border-radius: 3px; }
.minimap-popup-header button:hover { background: var(--border); color: var(--text); }
.minimap-popup-canvas { image-rendering: pixelated; border: 1px solid var(--border); border-radius: 3px; max-width: 100%; }

/* ── Color Swatch ─────────────────────────────────────────────────────────── */
.color-swatch-label { cursor: pointer; display: inline-flex; align-items: center; position: relative; width: 18px; height: 18px; flex-shrink: 0; }
.color-swatch-input { position: absolute; inset: 0; opacity: 0; cursor: pointer; width: 100%; height: 100%; padding: 0; border: none; }
.color-swatch { position: absolute; inset: 2px; border-radius: 50%; border: 2px solid rgba(255,255,255,.3); pointer-events: none; }
.color-swatch-label:hover .color-swatch { border-color: white; }

/* ── Actions Menu ─────────────────────────────────────────────────────────── */
.actions-menu { display: flex; flex-direction: column; overflow-y: auto; background: var(--surface); border: 1px solid var(--border); border-radius: 6px; }
.action-item { background: none; border: none; color: var(--text); padding: .5rem .75rem; font-size: .85rem; cursor: pointer; text-align: left; display: flex; align-items: center; gap: .4rem; }
.action-item:not([disabled]):hover { background: var(--border); }
.action-item[disabled] { opacity: .4; cursor: default; }
.action-cooldown { margin-left: auto; font-size: .75rem; color: var(--warn); }
.action-soon { margin-left: auto; font-size: .72rem; color: var(--text-dim); font-style: italic; }

/* ── Player Info ──────────────────────────────────────────────────────────── */
.player-status-bars { display: contents; }
.player-info { background: var(--surface); border: 1px solid var(--border); border-radius: 6px; padding: .75rem; display: flex; flex-direction: column; gap: .5rem; flex: 1; overflow-y: auto; }
.player-name { font-size: 1rem; font-weight: 600; color: var(--text); display: flex; align-items: center; gap: .4rem; }
.admin-badge     { background: var(--admin); color: white; font-size: .68rem; padding: .1rem .4rem; border-radius: 10px; font-weight: 600; }
.egg-title       { background: #7a2e0a; color: #f0c080; font-size: .65rem; padding: .1rem .4rem; border-radius: 10px; font-weight: 600; white-space: nowrap; }
.egg-title-small { background: #7a2e0a; color: #f0c080; font-size: .58rem; padding: .05rem .3rem; border-radius: 8px; font-weight: 600; margin-left: .25rem; white-space: nowrap; }
.tile-info   { display: flex; align-items: center; gap: .5rem; }
.biome-tag   { font-size: .78rem; padding: .15rem .5rem; border-radius: 10px; font-weight: 600; background: var(--border); }
.biome-tag.biome-ocean     { background: var(--ocean);     color: #e0e8f8; }
.biome-tag.biome-lake      { background: var(--lake);      color: #d0e8f4; }
.biome-tag.biome-shallows  { background: var(--shallows);  color: #e0f0f8; }
.biome-tag.biome-beach     { background: var(--beach);     color: #0e0e12; }
.biome-tag.biome-river     { background: var(--river);     color: white; }
.biome-tag.biome-swamp     { background: var(--swamp);     color: #a0c0a0; }
.biome-tag.biome-marsh     { background: var(--marsh);     color: #c0d8b0; }
.biome-tag.biome-grassland { background: var(--grassland); color: #0e0e12; }
.biome-tag.biome-plains    { background: var(--plains);    color: #0e0e12; }
.biome-tag.biome-savanna   { background: var(--savanna);   color: #0e0e12; }
.biome-tag.biome-forest    { background: var(--forest);    color: #a0e0a0; }
.biome-tag.biome-jungle    { background: var(--jungle);    color: #90d890; }
.biome-tag.biome-desert    { background: var(--desert);    color: #0e0e12; }
.biome-tag.biome-mountain  { background: var(--mountain);  color: #0e0e12; }
.biome-tag.biome-tundra    { background: var(--tundra);    color: #0e0e12; }
.biome-tag.biome-snow      { background: var(--snow);      color: #0e0e12; }
.biome-tag.biome-glacier   { background: var(--glacier);   color: #0e0e12; }
.biome-tag.biome-volcano   { background: var(--volcano);   color: #f0a080; }
.coords { font-size: .75rem; color: var(--text-dim); }
.feature-tag    { font-size: .75rem; color: var(--text-dim); font-style: italic; }
.settlement-tag { font-size: .75rem; color: #c8a46e; font-weight: 600; }

.cooldown-bar  { background: var(--border); border-radius: 4px; height: 14px; position: relative; overflow: hidden; flex-shrink: 0; }
.cooldown-fill { background: var(--warn); height: 100%; transition: width .1s linear; }
.cooldown-text { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-size: .7rem; color: white; font-weight: 600; }
.stun-bar  { background: #3a0808; border-radius: 4px; height: 16px; position: relative; overflow: hidden; border: 1px solid #7a1010; flex-shrink: 0; }
.stun-fill { background: #c03030; height: 100%; transition: width .1s linear; }
.stun-text { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-size: .7rem; color: #ffaaaa; font-weight: 600; letter-spacing: .02em; }

.hunger-bar  { background: var(--border); border-radius: 4px; height: 14px; position: relative; overflow: hidden; flex-shrink: 0; }
.hunger-fill { height: 100%; transition: width .5s ease; }
.hunger-fill.hunger-stuffed  { background: #a0c860; }
.hunger-fill.hunger-satiated { background: #50a060; }
.hunger-fill.hunger-peckish  { background: #c09030; }
.hunger-fill.hunger-hungry   { background: #c06020; }
.hunger-fill.hunger-starving { background: #c03030; }
.hunger-text { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-size: .7rem; color: white; font-weight: 600; }

.active-buffs { display: flex; flex-wrap: wrap; gap: .25rem; }
.buff-chip { font-size: .68rem; padding: .15rem .45rem; border-radius: 10px; font-weight: 600; letter-spacing: .01em; white-space: nowrap; }
.buff-chip.buff-cooldownreduction    { background: rgba(80,160,240,.18); color: #70c0ff; border: 1px solid rgba(80,160,240,.35); }
.buff-chip.buff-gatherbonus          { background: rgba(80,200,100,.18); color: #70e080; border: 1px solid rgba(80,200,100,.35); }
.buff-chip.buff-hungerdrainreduction { background: rgba(180,140,60,.18);  color: #d4a840; border: 1px solid rgba(180,140,60,.35); }

.inv-modal-buff { font-size: .7rem; color: #80b8e0; margin: .1rem 0 0; font-style: italic; }

.section-label { font-size: .75rem; color: var(--text-dim); }
.players-here  { display: flex; flex-wrap: wrap; gap: .3rem; align-items: center; }
.player-chip      { background: var(--border); color: var(--text); font-size: .78rem; padding: .1rem .4rem; border-radius: 10px; display: inline-flex; align-items: center; gap: .25rem; }
.player-chip.self { background: rgba(240,224,80,.2); color: #f0e050; }
.kiss-btn { background: none; border: none; cursor: pointer; font-size: .78rem; padding: 0 .1rem; line-height: 1; opacity: .85; color: var(--text); }
.kiss-btn:disabled { opacity: .45; cursor: default; font-size: .65rem; }
.admin-link { font-size: .8rem; color: var(--admin); text-decoration: none; margin-top: auto; }
.admin-link:hover { text-decoration: underline; }

/* ── XP Bar (PlayerInfo) ──────────────────────────────────────────────────── */
.xp-bar-row      { display: flex; align-items: center; gap: .35rem; }
.xp-level-label  { font-size: .72rem; font-weight: 700; color: #a080e0; white-space: nowrap; }
.xp-bar          { flex: 1; background: var(--border); border-radius: 4px; height: 10px; overflow: hidden; }
.xp-fill         { height: 100%; background: linear-gradient(90deg, #6030b0, #a060e8); transition: width .4s ease; }
.xp-text         { font-size: .68rem; color: var(--text-dim); white-space: nowrap; }
.xp-points-badge { background: rgba(200,140,60,.25); color: #e0a840; font-size: .68rem; font-weight: 700; padding: .1rem .4rem; border-radius: 10px; white-space: nowrap; border: 1px solid rgba(200,140,60,.4); }
.xp-stats-btn    { background: none; border: none; cursor: pointer; color: var(--text-dim); font-size: .8rem; padding: 0 .1rem; line-height: 1; opacity: .7; }
.xp-stats-btn:hover { color: var(--text); opacity: 1; }

/* ── Player Stats Modal ───────────────────────────────────────────────────── */
.pstab-modal { background: var(--surface); border: 1px solid var(--border); border-radius: 8px; padding: 1.25rem 1.5rem; width: 340px; display: flex; flex-direction: column; gap: .75rem; max-height: 90svh; overflow-y: auto; }
.pstab-level-row { display: flex; align-items: center; gap: .5rem; }
.pstab-level     { font-size: .85rem; font-weight: 700; color: #a080e0; white-space: nowrap; }
.pstab-xp-bar    { flex: 1; background: var(--border); border-radius: 4px; height: 10px; overflow: hidden; }
.pstab-xp-fill   { height: 100%; background: linear-gradient(90deg, #6030b0, #a060e8); transition: width .4s ease; }
.pstab-xp-text   { font-size: .72rem; color: var(--text-dim); white-space: nowrap; }
.pstab-points-row   { display: flex; align-items: center; justify-content: space-between; font-size: .82rem; background: var(--bg); border-radius: 4px; padding: .3rem .6rem; }
.pstab-points-label { color: var(--text-dim); }
.pstab-points-value { font-weight: 700; color: var(--text); }
.pstab-points-value.has-points { color: #e0a840; }
.pstab-error  { font-size: .8rem; color: var(--danger); }
.pstab-stats  { display: flex; flex-direction: column; gap: .35rem; }
.pstab-stat-row   { display: flex; align-items: center; gap: .5rem; background: var(--bg); border-radius: 4px; padding: .3rem .6rem; }
.pstab-stat-label { font-size: .82rem; color: var(--text-dim); width: 5rem; flex-shrink: 0; }
.pstab-stat-value { font-size: .9rem; font-weight: 700; color: var(--text); min-width: 2.5rem; }
.pstab-stat-hint  { font-size: .68rem; color: var(--text-dim); flex: 1; }
.pstab-spend-btn  { margin-left: auto; background: rgba(110,181,160,.18); color: var(--accent); border: 1px solid rgba(110,181,160,.35); border-radius: 4px; font-size: .75rem; padding: .15rem .5rem; cursor: pointer; white-space: nowrap; }
.pstab-spend-btn:hover:not(:disabled) { background: rgba(110,181,160,.35); }
.pstab-spend-btn.disabled, .pstab-spend-btn:disabled { opacity: .38; cursor: default; }
.pstab-footnote { font-size: .68rem; color: var(--text-dim); font-style: italic; }
.pstab-equip-section { display: flex; flex-direction: column; gap: .25rem; padding-top: .5rem; border-top: 1px solid var(--border); }
.pstab-equip-title   { font-size: .7rem; color: var(--text-dim); text-transform: uppercase; letter-spacing: .04em; }
.pstab-equip-row     { display: flex; align-items: baseline; gap: .4rem; font-size: .8rem; }
.pstab-equip-name    { color: var(--text); flex: 1; }
.pstab-equip-stats   { color: var(--text-dim); font-size: .72rem; }

/* Bestiary tab */
.bestiary-list { display: flex; flex-direction: column; max-height: 420px; overflow-y: auto; padding: .25rem 0; }
.bestiary-empty { color: var(--text-dim); font-style: italic; text-align: center; padding: 2rem 0; }
.bestiary-entry { display: flex; gap: 12px; padding: 10px 4px; border-bottom: 1px solid var(--border); align-items: flex-start; }
.bestiary-entry:last-child { border-bottom: none; }
.bestiary-sprite { flex: 0 0 64px; }
.bestiary-sprite svg { width: 64px; height: 64px; }
.bestiary-info { display: flex; flex-direction: column; gap: 4px; flex: 1; min-width: 0; }
.bestiary-name { font-size: .9rem; font-weight: 600; color: var(--text); display: flex; align-items: baseline; gap: .5rem; flex-wrap: wrap; }
.bestiary-kills { font-size: .72rem; font-weight: 400; color: var(--text-dim); }
.bestiary-desc { font-size: .75rem; color: var(--text-dim); margin: 0; line-height: 1.4; }
.bestiary-tags { display: flex; flex-wrap: wrap; gap: 4px; }
.bestiary-location { font-size: .68rem; padding: 1px 6px; border-radius: 999px; background: rgba(255,255,255,.07); color: var(--text-dim); }
.bestiary-location.dungeon { background: rgba(140,80,200,.2); color: #c09fe0; }
.bestiary-weak { font-size: .68rem; padding: 1px 6px; border-radius: 999px; background: rgba(220,160,40,.15); color: #e0c060; }
.bestiary-resist { font-size: .68rem; padding: 1px 6px; border-radius: 999px; background: rgba(80,140,200,.15); color: #80b8e0; }

/* ── Companion Dialog ─────────────────────────────────────────────────────── */
.companion-dialog { background: var(--surface); border: 1px solid var(--border); border-radius: 10px; padding: 1.25rem; display: flex; flex-direction: column; gap: .75rem; width: min(90vw, 520px); box-shadow: 0 8px 32px rgba(0,0,0,.5); }
.companion-dialog-titlebar { display: flex; align-items: center; gap: .5rem; font-size: 1rem; font-weight: 700; }
.companion-dialog-name   { color: var(--text); }
.companion-dialog-species { font-size: .8rem; color: var(--text-dim); font-style: italic; }
.sprite-editor-tabs { display: flex; gap: 0; border-bottom: 1px solid var(--border); }
.sprite-tab { flex: 1; background: none; border: none; border-bottom: 2px solid transparent; padding: .4rem; font-size: .82rem; color: var(--text-dim); cursor: pointer; }
.sprite-tab.active { color: var(--accent); border-bottom-color: var(--accent); }
.companion-stats-body { display: flex; flex-direction: column; gap: .55rem; }
.companion-desc { font-size: .82rem; color: var(--text-dim); font-style: italic; line-height: 1.5; }
.companion-stat-row { display: flex; align-items: center; justify-content: space-between; background: var(--bg); border-radius: 4px; padding: .3rem .6rem; font-size: .85rem; }
.companion-stat-label { color: var(--text-dim); }
.companion-moves-section { display: flex; flex-direction: column; gap: .1rem; }
.companion-moves-header { font-size: .72rem; color: var(--text-dim); text-transform: uppercase; letter-spacing: .05em; margin-bottom: .1rem; }
.companion-move-card { display: flex; flex-direction: column; gap: .15rem; background: var(--bg); border-radius: 4px; padding: .3rem .6rem; }
.companion-move-header { display: flex; align-items: center; gap: .5rem; }
.companion-move-name { font-size: .82rem; font-weight: 600; color: var(--text); flex: 1; }
.companion-move-desc { font-size: .72rem; color: var(--text-dim); font-style: italic; }
.companion-move-power { font-size: .75rem; color: var(--text-dim); white-space: nowrap; }
.companion-move-kind { font-size: .65rem; font-weight: 700; padding: .1rem .35rem; border-radius: 8px; white-space: nowrap; }
.companion-move-kind.buff   { background: rgba(40,180,80,.2);  color: #4cda70; border: 1px solid rgba(40,180,80,.35); }
.companion-move-kind.debuff { background: rgba(200,140,20,.2); color: #e6a820; border: 1px solid rgba(200,140,20,.35); }
.companion-move-aoe { font-size: .65rem; font-weight: 700; padding: .1rem .35rem; border-radius: 8px; background: rgba(120,60,200,.2); color: #b080f0; border: 1px solid rgba(120,60,200,.35); white-space: nowrap; }

/* ── Companion Panel ──────────────────────────────────────────────────────── */
.companion-panel { background: var(--surface); border: 1px solid var(--border); border-radius: 6px; padding: .6rem .75rem; display: flex; flex-direction: column; gap: .35rem; }
.companion-header { display: flex; align-items: center; gap: .4rem; }
.companion-emoji  { font-size: 1.1rem; }
.companion-sprite-btn { width: 36px; height: 36px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.companion-emoji-placeholder { font-size: 1.4rem; line-height: 1; }
.companion-name   { font-size: .9rem; font-weight: 700; color: var(--text); }
.companion-element { font-size: .68rem; font-weight: 600; padding: .1rem .4rem; border-radius: 10px; background: var(--border); color: var(--text-dim); }
.companion-element.companion-element-fire    { background: rgba(200,80,20,.25);  color: #e08040; }
.companion-element.companion-element-frost   { background: rgba(80,160,220,.2);  color: #70c0ff; }
.companion-element.companion-element-storm   { background: rgba(200,160,20,.2);  color: #e0d050; }
.companion-element.companion-element-nature  { background: rgba(60,160,80,.2);   color: #60c870; }
.companion-element.companion-element-dark    { background: rgba(120,60,200,.2);  color: #b080f0; }
.companion-species { font-size: .72rem; color: var(--text-dim); font-style: italic; }
.companion-moves   { display: flex; flex-wrap: wrap; gap: .25rem; }
.companion-move-chip { font-size: .65rem; padding: .12rem .4rem; border-radius: 8px; background: var(--bg); border: 1px solid var(--border); color: var(--text-dim); white-space: nowrap; }
.companion-move-chip.hits-all { border-color: #6040a0; color: #b090e0; }
.companion-element-row { display: flex; gap: .3rem; flex-wrap: wrap; }

/* ── Companion Moves Tab ──────────────────────────────────────────────────── */
.companion-moves-body { display: flex; flex-direction: column; gap: .5rem; padding: .25rem 0; }
.companion-moves-hint { font-size: .75rem; color: var(--text-dim); margin: 0; }
.companion-moves-error { font-size: .78rem; color: #e05050; background: rgba(200,50,50,.1); border-radius: 4px; padding: .3rem .6rem; }
.companion-move-slots { display: flex; flex-direction: column; gap: .4rem; }
.companion-move-slot { background: var(--bg); border: 1px solid var(--border); border-radius: 6px; padding: .4rem .6rem; cursor: pointer; transition: border-color .15s; }
.companion-move-slot:hover { border-color: var(--accent); }
.companion-move-slot.open { border-color: var(--accent); }
.companion-move-slot.empty { border-style: dashed; opacity: .7; }
.companion-move-slot-header { display: flex; align-items: center; gap: .5rem; }
.companion-move-slot-empty { font-size: .8rem; color: var(--text-dim); }
.companion-move-remove { margin-left: auto; background: none; border: none; color: var(--text-dim); cursor: pointer; font-size: .9rem; padding: 0 .2rem; line-height: 1; }
.companion-move-remove:hover { color: #e05050; }
.companion-move-picker { background: var(--surface); border: 1px solid var(--border); border-radius: 6px; padding: .5rem; margin-top: .25rem; max-height: 280px; overflow-y: auto; display: flex; flex-direction: column; gap: .5rem; }
.companion-picker-group { display: flex; flex-direction: column; gap: .2rem; }
.companion-picker-group-label { font-size: .68rem; text-transform: uppercase; letter-spacing: .05em; color: var(--text-dim); margin-bottom: .1rem; }
.companion-picker-option { background: var(--bg); border: 1px solid var(--border); border-radius: 4px; padding: .3rem .5rem; cursor: pointer; transition: border-color .12s; }
.companion-picker-option:hover:not(.in-use) { border-color: var(--accent); }
.companion-picker-option.in-use { opacity: .45; cursor: default; }
.companion-picker-option-header { display: flex; align-items: center; gap: .4rem; }

/* ── Companion action buttons ─────────────────────────────────────────────── */
.companion-hatch-btn   { background: rgba(180,140,60,.18); color: #d4a840; border: 1px solid rgba(180,140,60,.4) !important; }
.companion-hatch-btn:hover { background: rgba(180,140,60,.35) !important; }
.companion-release-btn { background: rgba(160,90,200,.15); color: #b070e0; border: 1px solid rgba(160,90,200,.35) !important; }
.companion-release-btn:hover { background: rgba(160,90,200,.3) !important; }

/* ── Chat Panel ───────────────────────────────────────────────────────────── */
.chat-panel    { display: flex; flex-direction: column; height: 100%; background: var(--surface); border: 1px solid var(--border); border-radius: 6px; overflow: hidden; }
.chat-tabs     { display: flex; background: var(--bg); border-bottom: 1px solid var(--border); }
.chat-tabs button { flex: 1; background: none; border: none; color: var(--text-dim); padding: .5rem; font-size: .85rem; cursor: pointer; position: relative; }
.chat-tabs button.active { color: var(--accent); border-bottom: 2px solid var(--accent); }
.unread-badge  { background: var(--danger); color: white; font-size: .65rem; padding: .05rem .35rem; border-radius: 10px; margin-left: .3rem; }
.chat-messages { flex: 1; overflow-y: auto; padding: .5rem; display: flex; flex-direction: column; gap: .25rem; scrollbar-width: thin; }
.chat-msg      { display: flex; gap: .4rem; align-items: baseline; flex-wrap: wrap; font-size: .85rem; line-height: 1.4; }
.chat-msg.system .chat-content { color: var(--warn); font-style: italic; }
.chat-msg.world-msg .chat-sender { color: #f090c0; }
.chat-sender   { color: var(--accent); font-weight: 600; flex-shrink: 0; }
.chat-time     { color: var(--text-dim); font-size: .72rem; flex-shrink: 0; }
.chat-content  { color: var(--text); word-break: break-word; }
.chat-empty    { color: var(--text-dim); font-style: italic; font-size: .82rem; padding: .5rem; }

.chat-input        { display: flex; gap: .4rem; padding: .4rem; border-top: 1px solid var(--border); }
.chat-input input  { flex: 1; background: var(--bg); border: 1px solid var(--border); color: var(--text); padding: .4rem .6rem; border-radius: 4px; font-size: .9rem; outline: none; }
.chat-input input:focus { border-color: var(--accent); }
.chat-input button { background: var(--accent); color: #0e0e12; border: none; border-radius: 4px; padding: .4rem .9rem; font-weight: 600; font-size: .85rem; cursor: pointer; }
.chat-input button:disabled { opacity: .4; cursor: default; }

/* ── Modals ───────────────────────────────────────────────────────────────── */
.modal-overlay { position: fixed; inset: 0; background: rgba(0,0,0,.65); display: flex; align-items: center; justify-content: center; z-index: 100; }
.modal-box     { background: var(--surface); border: 1px solid var(--border); border-radius: 8px; padding: 2rem; max-width: 400px; width: 90%; display: flex; flex-direction: column; gap: 1rem; }
.modal-box.danger { border-color: var(--danger); }
.modal-box p   { line-height: 1.6; }
.modal-title   { font-size: 1rem; font-weight: 600; color: var(--text); }
.modal-hint    { font-size: .82rem; color: var(--text-dim); line-height: 1.5; }
.modal-textarea { background: var(--bg); border: 1px solid var(--border); color: var(--text); border-radius: 4px; padding: .5rem .7rem; font-size: .9rem; font-family: inherit; resize: vertical; outline: none; width: 100%; }
.modal-textarea:focus { border-color: var(--accent); }
.modal-char-count { font-size: .75rem; color: var(--text-dim); text-align: right; }
.modal-actions { display: flex; gap: .75rem; flex-wrap: wrap; }
.modal-actions button { background: var(--accent); color: #0e0e12; border: none; border-radius: 4px; padding: .5rem 1rem; font-weight: 600; cursor: pointer; }
.modal-actions button:last-child { background: var(--border); color: var(--text); }
.modal-actions button:disabled { opacity: .4; cursor: default; }
.btn-danger    { background: var(--danger); color: white; border: none; border-radius: 4px; padding: .5rem 1rem; font-weight: 600; cursor: pointer; }
.action-divider { border-top: 1px solid var(--border); margin: .2rem 0; }

.tile-editor-fields { display: flex; flex-direction: column; gap: .75rem; }
.tile-editor-label { display: flex; flex-direction: column; gap: .3rem; font-size: .85rem; color: var(--text-dim); }
.tile-editor-select { background: var(--bg); border: 1px solid var(--border); color: var(--text); border-radius: 4px; padding: .4rem .6rem; font-size: .9rem; font-family: inherit; outline: none; }
.tile-editor-select:focus { border-color: var(--accent); }

.toast-error { position: fixed; bottom: 1.5rem; left: 50%; transform: translateX(-50%); background: var(--danger); color: white; padding: .6rem 1.4rem; border-radius: 6px; font-size: .9rem; z-index: 200; pointer-events: none; animation: fadeIn .2s ease; }
@keyframes fadeIn { from { opacity: 0; transform: translateX(-50%) translateY(10px); } to { opacity: 1; transform: translateX(-50%) translateY(0); } }

/* ── Loading & Misc ───────────────────────────────────────────────────────── */
.loading-screen { display: flex; align-items: center; justify-content: center; height: 100svh; color: var(--text-dim); font-size: 1.1rem; }

/* ── Admin Panel ──────────────────────────────────────────────────────────── */
.admin-panel { max-width: 600px; margin: 3rem auto; padding: 2rem; background: var(--surface); border: 1px solid var(--border); border-radius: 8px; display: flex; flex-direction: column; gap: 1.5rem; overflow-y: auto; height: 100svh; }
.admin-panel h2 { color: var(--accent); }
.admin-panel h3 { color: var(--text); margin-bottom: .5rem; }
.warning-text { color: var(--warn); font-size: .85rem; }
.form-row { display: flex; flex-wrap: wrap; gap: 1rem; }
.form-row label { display: flex; flex-direction: column; gap: .25rem; font-size: .85rem; color: var(--text-dim); }
.form-row input { background: var(--bg); border: 1px solid var(--border); color: var(--text); padding: .35rem .6rem; border-radius: 4px; font-size: .9rem; width: 120px; }

.admin-section { display: flex; flex-direction: column; gap: .75rem; padding: 1rem; background: rgba(255,255,255,.03); border: 1px solid var(--border); border-radius: 6px; }
.admin-section h4 { font-size: .9rem; color: var(--text-dim); margin-top: .25rem; }

.option-grid { display: grid; grid-template-columns: 1fr 1fr; gap: .75rem 1.5rem; }
.option-grid label { display: flex; flex-direction: column; gap: .3rem; font-size: .84rem; color: var(--text-dim); }
.option-grid label small { font-size: .75rem; color: var(--text-dim); opacity: .75; }
.option-grid input[type=number] { background: var(--bg); border: 1px solid var(--border); color: var(--text); padding: .3rem .5rem; border-radius: 4px; font-size: .9rem; width: 110px; }
.option-grid input[type=range] { accent-color: var(--accent); cursor: pointer; }

.stat-grid { display: grid; grid-template-columns: auto 1fr; gap: .3rem 1rem; font-size: .84rem; }
.stat-grid span:nth-child(odd) { color: var(--text-dim); }
.stat-grid span:nth-child(even) { color: var(--text); font-weight: 500; }

.dim-text { color: var(--text-dim); font-size: .9rem; }
.back-link { color: var(--accent); text-decoration: none; font-size: .9rem; }
.back-link:hover { text-decoration: underline; }
.preset-buttons { display: flex; flex-wrap: wrap; gap: .5rem; margin-bottom: .5rem; }
.preset-btn { background: var(--surface); border: 1px solid var(--border); color: var(--text); border-radius: 4px; padding: .35rem .85rem; font-size: .85rem; cursor: pointer; }
.preset-btn:hover { border-color: var(--accent); color: var(--accent); }

/* ── Crafting ─────────────────────────────────────────────────────────────── */
.crafting-toggle { width: 100%; display: flex; justify-content: space-between; align-items: center; background: var(--surface); border: 1px solid var(--border); border-radius: 6px; color: var(--text-dim); font-size: .78rem; padding: .35rem .5rem; cursor: pointer; }
.crafting-toggle:hover { background: rgba(255,255,255,.05); color: var(--text); }
.crafting-modal { max-width: 520px; padding: 1.25rem; gap: .75rem; }
.crafting-modal-header { display: flex; align-items: center; justify-content: space-between; }
.crafting-modal-close { background: none; border: none; color: var(--text-dim); font-size: 1rem; cursor: pointer; padding: 0 .25rem; line-height: 1; }
.crafting-modal-close:hover { color: var(--text); }
.crafting-recipes { display: flex; flex-direction: column; gap: .4rem; overflow-y: auto; max-height: 70vh; }
.recipe-card { border: 1px solid var(--border); border-radius: 5px; padding: .45rem .6rem; display: flex; flex-direction: column; gap: .25rem; }
.recipe-header { display: flex; align-items: center; justify-content: space-between; gap: .4rem; }
.recipe-name { font-size: .85rem; color: var(--text); flex: 1; }
.recipe-consumable { font-size: .68rem; color: var(--text-dim); margin-left: .3rem; }
.recipe-craft-btn { font-size: .75rem; padding: .2rem .55rem; background: var(--accent); color: #0e0e12; border: none; border-radius: 3px; cursor: pointer; white-space: nowrap; font-weight: 600; }
.recipe-craft-btn:disabled { opacity: .35; cursor: default; }
.recipe-craft-btn:not(:disabled):hover { filter: brightness(1.15); }
.recipe-ingredients { display: flex; flex-wrap: wrap; gap: .2rem; }
.ingredient { font-size: .72rem; padding: .1rem .3rem; border-radius: 3px; background: rgba(255,255,255,.05); }
.ingredient-ok      { color: var(--accent); }
.ingredient-missing { color: var(--danger); }
.workshop-active         { font-size: .75rem; color: var(--accent); padding: .2rem .1rem; margin: 0; }
.workshop-section-label  { font-size: .72rem; color: var(--accent); font-weight: 600; text-transform: uppercase; letter-spacing: .04em; margin-top: .4rem; margin-bottom: 0; padding: .15rem .1rem; border-top: 1px solid var(--border); }
.campfire-section-label  { color: #e07030; }
.recipe-card-workshop    { border-color: rgba(110,181,160,.35); }
.recipe-card-campfire    { border-color: rgba(224,112,48,.35); }
.eat-btn { font-size: .7rem; padding: .15rem .4rem; border-radius: 3px; background: #3a5a30; border: 1px solid #4a7040; color: #90d070; cursor: pointer; transition: background .15s; }
.eat-btn:hover { background: #4a7040; }
.structure-existing { display: flex; align-items: center; justify-content: space-between; gap: .5rem; background: rgba(255,255,255,.05); border-radius: 5px; padding: .5rem .75rem; }
.structure-existing-info { display: flex; flex-direction: column; gap: .1rem; }
.structure-existing-name { font-size: .9rem; font-weight: 600; color: var(--text); }
.structure-existing-builder { font-size: .72rem; color: var(--text-dim); }
.structure-existing-desc { font-size: .78rem; color: var(--text-dim); margin: 0; line-height: 1.5; }
.structure-destroy-btn { font-size: .75rem; padding: .2rem .55rem; background: var(--danger); color: #fff; border: none; border-radius: 3px; cursor: pointer; white-space: nowrap; font-weight: 600; flex-shrink: 0; }
.structure-destroy-btn:hover { filter: brightness(1.2); }

/* ── Inventory Panel ──────────────────────────────────────────────────────── */
.inventory-panel { margin-top: 4px; border-top: 1px solid var(--border); }
.inventory-empty { font-size: .78rem; color: var(--text-dim); padding: .4rem .5rem; font-style: italic; }
.inventory-section-label { font-size: .7rem; color: var(--text-dim); text-transform: uppercase; letter-spacing: .04em; padding: .3rem .5rem .1rem; margin: 0; }
.inventory-grid { display: flex; flex-direction: column; gap: 2px; padding: .1rem .25rem .3rem; max-height: 160px; overflow-y: auto; }
.inventory-item { display: flex; justify-content: space-between; align-items: center; padding: .2rem .5rem; border-radius: 3px; font-size: .8rem; cursor: default; }
.inventory-item:hover { background: rgba(255,255,255,.06); }
.inventory-name { color: var(--text); }
.inventory-qty  { color: var(--accent); font-weight: 600; font-size: .75rem; }

/* ── Inventory Modal ──────────────────────────────────────────────────────── */
.inv-modal { max-width: 480px; padding: 1.25rem; gap: .6rem; max-height: 85vh; overflow-y: auto; }
.inv-modal-list { display: flex; flex-direction: column; gap: .35rem; }
.inv-modal-item { border: 1px solid var(--border); border-radius: 5px; padding: .4rem .6rem; display: flex; flex-direction: column; gap: .2rem; }
.inv-modal-item-header { display: flex; align-items: center; justify-content: space-between; gap: .5rem; }
.inv-modal-name { font-size: .85rem; color: var(--text); flex: 1; }
.inv-modal-qty  { font-size: .78rem; color: var(--accent); font-weight: 600; white-space: nowrap; }
.inv-modal-desc { font-size: .75rem; color: var(--text-dim); line-height: 1.5; margin: 0; font-style: italic; }
.tile-inv-controls { display: flex; align-items: center; gap: .3rem; flex-shrink: 0; }

/* ── Tile Inventory Panel ─────────────────────────────────────────────────── */
.tile-inv-empty { font-size: .78rem; color: var(--text-dim); padding: .25rem 0; font-style: italic; }
.tile-inv-row { display: flex; align-items: center; gap: .35rem; padding: .2rem .5rem; border-radius: 3px; font-size: .8rem; }
.tile-inv-row:hover { background: rgba(255,255,255,.05); }
.tile-inv-name { flex: 1; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tile-inv-qty { color: var(--accent); font-weight: 600; font-size: .75rem; white-space: nowrap; }
.tile-inv-input { width: 46px; background: var(--surface); border: 1px solid var(--border); border-radius: 3px; color: var(--text); font-size: .78rem; padding: .1rem .25rem; text-align: center; -moz-appearance: textfield; }
.tile-inv-input::-webkit-inner-spin-button, .tile-inv-input::-webkit-outer-spin-button { -webkit-appearance: none; }
.tile-inv-btn { font-size: .72rem; padding: .15rem .4rem; background: var(--surface); border: 1px solid var(--border); border-radius: 3px; color: var(--text-dim); cursor: pointer; white-space: nowrap; flex-shrink: 0; }
.tile-inv-btn:hover { background: rgba(255,255,255,.08); color: var(--text); border-color: var(--accent); }

/* ── Roads ────────────────────────────────────────────────────────────────── */
.road-line   { stroke: #685844; stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; fill: none; opacity: .85; pointer-events: none; }
.road-bridge { stroke: #685844; stroke-width: 2;   stroke-linecap: round; stroke-dasharray: 5,3;  fill: none; opacity: .9;  pointer-events: none; }


/* ── Settlement shapes ────────────────────────────────────────────────────── */
.settle-center          { fill: #d4904a; stroke: #8b5010; stroke-width: 1; pointer-events: none; }
.settle-center-roof     { fill: #b06828; stroke: #8b5010; stroke-width: 1; pointer-events: none; }
.settle-residential     { fill: #d4b07a; stroke: #8b6030; stroke-width: .8; pointer-events: none; }
.settle-residential-roof{ fill: #b08040; stroke: #8b6030; stroke-width: .8; pointer-events: none; }
.settle-market          { fill: #d4a030; stroke: #8b6000; stroke-width: .8; pointer-events: none; }
.settle-market-awning   { stroke: #8b6000; stroke-width: 2; fill: none; pointer-events: none; }
.settle-farm            { stroke: #70a858; stroke-width: 1.5; fill: none; pointer-events: none; }
.settle-guard           { fill: #8090a0; stroke: #4a6070; stroke-width: .8; pointer-events: none; }
.settle-inn             { fill: #c07c50; stroke: #8b4828; stroke-width: .8; pointer-events: none; }
.settle-inn-roof        { fill: #9a5030; stroke: #8b4828; stroke-width: .8; pointer-events: none; }
.settle-mill            { fill: #b8986a; stroke: #7a6030; stroke-width: .8; pointer-events: none; }
.settle-mill-arm        { stroke: #7a6030; stroke-width: 1.5; fill: none; pointer-events: none; }

/* ── Scrollbar ────────────────────────────────────────────────────────────── */
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--border); border-radius: 3px; }


/* ── Mobile-only elements (hidden on desktop) ────────────────────────────── */
.mobile-action-bar     { display: none; }
.mobile-sheet-backdrop { display: none; }
.mobile-sheet-header   { display: none; }
.mobile-status-strip   { display: none; }
.mobile-sheet-title    { font-size: .85rem; font-weight: 600; color: var(--text); }
.mobile-sheet-close    { background: none; border: none; color: var(--text-dim); font-size: 1.1rem; cursor: pointer; padding: 0 .3rem; line-height: 1; }
.mobile-sheet-close:hover { color: var(--text); }
.mobile-action-btn {
    flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center;
    gap: 2px; background: none; border: none; cursor: pointer; color: var(--text-dim);
    padding: 6px 2px; transition: color .15s; -webkit-tap-highlight-color: transparent;
}
.mobile-action-btn:active:not(:disabled) { background: rgba(255,255,255,.08); }
.mobile-action-btn:disabled { opacity: .38; cursor: default; }
.mobile-action-btn.mab-active { color: var(--accent); }
.mab-icon  { font-size: 1.25rem; line-height: 1; }
.mab-label { font-size: .58rem; line-height: 1; white-space: nowrap; }
.player-companion-container { display: contents; }
.sidebar .player-info { min-height: 120px;}
.sidebar .player-name-details {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

@media (max-width: 768px) {
    .game-layout {
        grid-template-columns: 1fr;
        grid-template-rows: auto 1fr 180px;
        padding-bottom: 56px;
    }
    .mobile-status-strip {
        display: flex;
        flex-direction: column;
        gap: 3px;
        grid-column: 1;
        grid-row: 1;
        padding: 4px 6px;
        background: var(--surface);
        border: 1px solid var(--border);
        border-radius: 6px;
    }
    .map-area  { grid-column: 1; grid-row: 2; }
    /* Sidebar: keep in DOM (position: fixed removes from grid) so modal overlays inside can render */
    .sidebar {
        display: flex;
        flex-direction: column;
        gap: 4px;
        position: fixed;
        bottom: 56px; left: 0; right: 0;
        max-height: 0;
        overflow: hidden;
        z-index: 97;
        background: var(--surface);
        border: 1px solid var(--border);
        border-bottom: none;
        border-radius: 14px 14px 0 0;
        padding: 0 6px;
        box-shadow: 0 -4px 24px rgba(0,0,0,.5);
    }
    .sidebar.mobile-open {
        max-height: 78vh;
        overflow-y: auto;
        padding: 0 6px 20px;
        animation: mobile-slide-up .22s ease-out;
    }
    .sidebar .player-info { min-height: 80px;}
    .sidebar .player-status-bars,
    .sidebar .crafting-toggle.inventory-toggle,
    .sidebar .crafting-toggle.craft-toggle,
    .sidebar .action-item.action-investigate,
    .sidebar .action-item.action-gather { 
        display: none; 
    }
    .sidebar .player-companion-container {
        display: flex;
        gap: .4rem;
        flex-wrap: wrap;
    }
    .sidebar .player-companion-container > * {
        flex: 1;
    }
    .chat-area { grid-column: 1; grid-row: 3; }
    @keyframes mobile-slide-up {
        from { transform: translateY(100%); opacity: 0.6; }
        to   { transform: translateY(0);    opacity: 1; }
    }

    .mobile-sheet-backdrop {
        display: block;
        position: fixed;
        inset: 0;
        bottom: 56px;
        background: rgba(0,0,0,.45);
        z-index: 96;
    }

    .mobile-sheet-header {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: .6rem .5rem .4rem;
        border-bottom: 1px solid var(--border);
        margin: 0 -6px .25rem;
        position: sticky;
        top: 0;
        background: var(--surface);
        z-index: 1;
        flex-shrink: 0;
    }

    .mobile-action-bar {
        display: flex;
        position: fixed;
        bottom: 0; left: 0; right: 0;
        height: 56px;
        background: var(--surface);
        border-top: 1px solid var(--border);
        z-index: 95;
        padding: 0 4px;
    }

    .minimap-canvas { display: none; }
    .minimap-label  { display: inline; }
    .tile-inv-input { width: 28px; }
    .toast-error    { bottom: calc(56px + .75rem); }
}

/* ── Dungeon ──────────────────────────────────────────────────────────────── */
.dungeon-view { display: flex; flex-direction: column; gap: .5rem; height: 100%; align-items: center; justify-content: center; position: relative; }
.dungeon-hud { display: flex; align-items: center; gap: 1rem; padding: .25rem .5rem; background: rgba(10,10,20,.7); border-radius: 4px; font-size: .8rem; color: var(--text-dim); position: absolute; top: 0; }
.dungeon-floor-label { color: var(--accent); font-weight: 600; }
.dungeon-dark-warning { color: #aaa; font-size: .75rem; }

.dungeon-svg { display: block; cursor: default; overflow: visible; }
.dungeon-room { cursor: default; transition: fill .15s; }
.dungeon-room-clickable { cursor: pointer; }
.dungeon-room-clickable:hover { filter: brightness(1.35); }
.dungeon-room-player { filter: brightness(1.2); }
.dungeon-room-icon { font-size: 14px; pointer-events: none; user-select: none; }
.dungeon-player-dot { pointer-events: none; }

.dungeon-tooltip { position: absolute; background: rgba(10,10,20,.92); border: 1px solid var(--border); border-radius: 4px; padding: .3rem .55rem; font-size: .78rem; color: var(--text); pointer-events: none; max-width: 180px; }
.dungeon-tooltip-loot { color: #c8a84a; font-size: .73rem; margin-top: .15rem; }

.dungeon-enter-btn, .dungeon-stair-btn { background: rgba(40,60,40,.7) !important; border-color: #4a8040 !important; color: #8cd88c !important; }
.dungeon-enter-btn:hover, .dungeon-stair-btn:hover { background: rgba(60,90,60,.8) !important; }
.challenge-action-btn { background: rgba(27, 48, 88, 0.7) !important; border-color: #3d598d !important; color: #9fb1e2 !important; }
.challenge-action-btn:hover { background: rgba(44, 60, 105, 0.8) !important; }
.dungeon-rope-btn { background: rgba(60,40,20,.7) !important; border-color: #8a6030 !important; color: #d4a060 !important; }
.dungeon-rope-btn:hover { background: rgba(80,55,25,.8) !important; }
/* DungeonActions in mobile-status-strip — compact chip style */
.mobile-status-strip .mobile-dungeon-actions { display: flex; align-items: center; justify-content: center; gap: 0.5rem; }
.mobile-status-strip .mobile-dungeon-actions .action-item { border: 1px solid; border-radius: 4px; }
.admin-combat-btn { background: rgba(80,20,20,.7) !important; border-color: #a04040 !important; color: #e08080 !important; }
.admin-combat-btn:hover:not(:disabled) { background: rgba(110,30,30,.8) !important; }

.inv-modal-buff { font-size: .73rem; color: #7ab0d4; font-style: italic; margin: 0; }
.fish-world-record { color: #d4a840; font-style: normal; }

/* ── Fishing rank badges ─────────────────────────────────────────────────── */
.fishing-rank-badge { font-size: .65rem; font-weight: 700; border-radius: 10px; padding: 1px 8px; white-space: nowrap; letter-spacing: .04em; }
.fishing-rank-chip  { font-size: .6rem;  font-weight: 700; border-radius: 8px;  padding: 1px 5px; margin-left: 2px; cursor: default; }
.rank-1  { background: rgba(120,120,120,.2); color: #909090; }
.rank-2  { background: rgba(80,160,80,.2);  color: #70c070; }
.rank-3  { background: rgba(80,160,80,.2);  color: #70c070; }
.rank-4  { background: rgba(60,120,200,.2); color: #70a8e8; }
.rank-5  { background: rgba(60,120,200,.2); color: #70a8e8; }
.rank-6  { background: rgba(160,80,200,.2); color: #c080e8; }
.rank-7  { background: rgba(160,80,200,.2); color: #c080e8; }
.rank-8  { background: rgba(200,140,30,.2); color: #e0a840; }
.rank-9  { background: rgba(200,140,30,.2); color: #e0a840; }
.rank-10 { background: rgba(220,180,60,.3); color: #f0d060; border: 1px solid rgba(220,180,60,.4); }
.fish-category-tag { display: inline-block; font-size: .65rem; font-style: normal; font-weight: 600; border-radius: 8px; padding: 1px 7px; letter-spacing: .04em; }

/* ── Journal fishing rank card ───────────────────────────────────────────── */
.fishing-rank-card { border-radius: 6px; padding: .6rem .8rem; margin-bottom: .6rem; background: var(--bg); border: 1px solid var(--border); }
.fishing-rank-card-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: .4rem; }
.fishing-rank-title { font-weight: 700; font-size: .85rem; }
.fishing-rank-xp    { font-size: .72rem; color: var(--text-dim); }
.fishing-rank-bar-bg   { height: 5px; background: rgba(255,255,255,.08); border-radius: 3px; margin-bottom: .45rem; overflow: hidden; }
.fishing-rank-bar-fill { height: 100%; background: linear-gradient(90deg, #40a060, #60d080); border-radius: 3px; transition: width .3s; }
.fishing-rank-bonuses  { display: flex; flex-direction: column; gap: .18rem; }
.fishing-rank-unlock   { font-size: .68rem; }
.fishing-rank-unlock.unlocked { color: #70c880; }
.fishing-rank-unlock.locked   { color: var(--text-dim); opacity: .55; }
.fish-category-freshwater { background: rgba(40,120,200,.18); color: #70b8f0; }
.fish-category-saltwater  { background: rgba(40,180,140,.18); color: #50d0b0; }
.fish-category-deep       { background: rgba(80,40,160,.18);  color: #a080e0; }
.fish-category-cold       { background: rgba(160,220,255,.18); color: #a8d8f8; }
.fish-journal-unknown { opacity: .65; }
.fish-journal-unknown .inv-modal-name { color: var(--text-dim); font-style: italic; letter-spacing: .08em; }
.fish-journal-location { font-size: .68rem; color: var(--text-dim); margin: .1rem 0 0; }

/* ── Inventory Modal — tabs ──────────────────────────────────────────────── */
.inv-tabs { display: flex; gap: .3rem; border-bottom: 1px solid var(--border); padding-bottom: .4rem; margin-bottom: .4rem; }
.inv-tab { flex: 1; font-size: .78rem; padding: .25rem .5rem; border-radius: 4px; border: 1px solid transparent; background: transparent; color: var(--text-dim); cursor: pointer; transition: all .15s; }
.inv-tab:hover { background: rgba(255,255,255,.05); color: var(--text); }
.inv-tab.active { background: rgba(80,160,240,.15); border-color: rgba(80,160,240,.35); color: #80c0f0; }

/* ── Equipment tab ───────────────────────────────────────────────────────── */
.inv-equipment { display: flex; flex-direction: column; gap: .6rem; }
.equip-slot { border: 1px solid var(--border); border-radius: 6px; padding: .5rem .65rem; display: flex; flex-direction: column; gap: .35rem; }
.equip-slot-header { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; }
.equip-slot-label { font-size: .75rem; color: var(--text-dim); text-transform: uppercase; letter-spacing: .04em; min-width: 4.5rem; }
.equip-slot-equipped { font-size: .85rem; color: #90d070; font-weight: 600; flex: 1; }
.equip-slot-empty { font-size: .82rem; color: var(--text-dim); font-style: italic; flex: 1; }
.equip-unequip-btn { font-size: .68rem; padding: .12rem .35rem; border-radius: 3px; background: rgba(180,60,60,.2); border: 1px solid rgba(180,60,60,.4); color: #e08080; cursor: pointer; transition: background .15s; }
.equip-unequip-btn:hover { background: rgba(180,60,60,.35); }
.equip-available { display: flex; flex-direction: column; gap: .2rem; border-top: 1px solid rgba(255,255,255,.07); padding-top: .3rem; }
.equip-available-item { display: flex; align-items: center; gap: .5rem; font-size: .82rem; }
.equip-stat-hint { font-size: .72rem; color: #80c0f0; flex: 1; }
.equip-equip-btn { font-size: .68rem; padding: .12rem .4rem; border-radius: 3px; background: rgba(40,100,200,.2); border: 1px solid rgba(80,140,220,.35); color: #80b0f0; cursor: pointer; transition: background .15s; margin-left: auto; }
.equip-equip-btn:hover:not(:disabled) { background: rgba(60,120,220,.35); }
.equip-equip-btn:disabled { opacity: .45; cursor: default; }

/* ── Players / Feedback modal ────────────────────────────────────────────── */
.players-modal { max-width: 480px; padding: 1.25rem; gap: .75rem; display: flex; flex-direction: column; }
.players-modal-tabs { display: flex; gap: .25rem; flex: 1; }
.players-tab { background: none; border: none; border-bottom: 2px solid transparent; color: var(--text-dim); font-size: .85rem; font-family: inherit; padding: .25rem .6rem .3rem; cursor: pointer; transition: color .15s, border-color .15s; }
.players-tab:hover { color: var(--text); }
.players-tab.active { color: var(--accent); border-bottom-color: var(--accent); }

.players-list { display: flex; flex-direction: column; gap: .25rem; max-height: 60vh; overflow-y: auto; }
.player-row { display: flex; align-items: center; gap: .65rem; padding: .45rem .55rem; border-radius: 5px; border: 1px solid transparent; transition: background .1s; }
.player-row:hover { background: rgba(255,255,255,.04); }
.player-row-online { border-color: rgba(110,181,160,.2); }
.player-row-sprite { flex: 0 0 auto; display: flex; align-items: center; gap: 4px; }
.player-row-companion { display: block; align-self: flex-end; }
.player-row-svg { display: block; image-rendering: pixelated; }
.player-row-dot { width: 22px; height: 22px; border-radius: 50%; }
.player-row-info { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: .15rem; }
.player-row-name { font-size: .84rem; font-weight: 600; color: var(--text); display: flex; align-items: center; gap: .35rem; flex-wrap: wrap; }
.player-row-meta { display: flex; align-items: center; gap: .6rem; }
.player-row-coords { font-size: .72rem; color: var(--text-dim); font-variant-numeric: tabular-nums; }
.player-row-seen { font-size: .72rem; font-weight: 500; }
.seen-online  { color: #6eb5a0; }
.seen-offline { color: var(--text-dim); }

.feedback-modal { max-width: 480px; padding: 1.25rem; gap: .75rem; display: flex; flex-direction: column; }
.feedback-textarea { width: 100%; background: var(--bg); border: 1px solid var(--border); border-radius: 5px; color: var(--text); font-family: inherit; font-size: .85rem; padding: .5rem .65rem; resize: vertical; outline: none; line-height: 1.5; }
.feedback-textarea:focus { border-color: var(--accent); }
.feedback-actions { display: flex; justify-content: flex-end; align-items: center; }
.feedback-submit-btn { font-size: .82rem; padding: .3rem .9rem; border-radius: 4px; border: 1px solid var(--accent); background: rgba(110,181,160,.15); color: var(--accent); cursor: pointer; transition: background .15s; }
.feedback-submit-btn:hover:not(:disabled) { background: rgba(110,181,160,.3); }
.feedback-submit-btn:disabled { opacity: .4; cursor: default; }
.feedback-list { display: flex; flex-direction: column; gap: .5rem; max-height: 60vh; overflow-y: auto; }
.feedback-entry { border: 1px solid var(--border); border-radius: 5px; padding: .5rem .65rem; display: flex; flex-direction: column; gap: .25rem; }
.feedback-entry-header { display: flex; justify-content: space-between; align-items: baseline; gap: .5rem; }
.feedback-username { font-size: .78rem; color: var(--accent); font-weight: 600; }
.feedback-date { font-size: .7rem; color: var(--text-dim); white-space: nowrap; }
.feedback-text { font-size: .82rem; color: var(--text); line-height: 1.5; margin: 0; white-space: pre-wrap; }

/* ── Combat enemy outcome animations ────────────────────────────────────── */
@keyframes enemy-die {
  0%   { transform: scale(1, 1);       opacity: 1; }
  50%  { transform: scale(2.2, 0.12);  opacity: 0.85; }
  100% { transform: scale(2.2, 0);     opacity: 0; }
}
@keyframes enemy-flee {
  0%   { transform: translateX(0);     opacity: 1; }
  15%  { transform: translateX(-8px);  opacity: 1; }
  100% { transform: translateX(150px) scale(0.2); opacity: 0; }
}
.combat-enemy-dying   { animation: enemy-die  0.65s ease-in  forwards; transform-origin: center bottom; pointer-events: none; }
.combat-enemy-fleeing { animation: enemy-flee 0.55s ease-out forwards; pointer-events: none; }

/* ── Combat shake animation ──────────────────────────────────────────────── */
@keyframes combat-shake {
  0%, 100% { transform: translateX(0) rotate(0deg); }
  20%      { transform: translateX(-6px) rotate(-4deg); }
  40%      { transform: translateX(6px)  rotate(4deg); }
  60%      { transform: translateX(-4px) rotate(-2deg); }
  80%      { transform: translateX(4px)  rotate(2deg); }
}
.combat-shake { animation: combat-shake 0.35s ease-in-out; }

@keyframes combat-strike {
  0%, 100% { transform: translateX(0) rotate(0deg); }
  10%      { transform: translateX(-10px) rotate(-16deg); }
  20%      { transform: translateX(100px)  rotate(10deg); }
}
.combat-strike { animation: combat-strike 0.25s ease-out }

@keyframes combat-strike-enemy {
  0%, 100% { transform: translateX(0) rotate(0deg); }
  10%      { transform: translateX(10px) rotate(16deg); }
  20%      { transform: translateX(-100px)  rotate(-10deg); }
}
.combat-strike-enemy { animation: combat-strike-enemy 0.25s ease-out }

/* ── Combat bounce animation ─────────────────────────────────────────────── */
@keyframes combat-bounce {
  0%   { transform: translateY(0)     scaleX(1)    scaleY(1);    }
  20%  { transform: translateY(-14px) scaleX(1.04) scaleY(0.96); }
  45%  { transform: translateY(0)     scaleX(0.96) scaleY(1.06); }
  62%  { transform: translateY(-6px)  scaleX(1.02) scaleY(0.98); }
  80%  { transform: translateY(0)     scaleX(0.99) scaleY(1.02); }
  100% { transform: translateY(0)     scaleX(1)    scaleY(1);    }
}
.combat-bounce { animation: combat-bounce 0.45s ease-out; }

/* ── Combat idle animations ──────────────────────────────────────────────── */
@keyframes combat-idle-bob {
  0%, 100% { transform: translateY(0) rotate(0deg); }
  50%      { transform: translateY(-4px) rotate(2deg) scale(1.02,  0.98); }
  60%      { transform: translateX(-2px) rotate(-4deg) scale(0.99,  1.01) skewX(-2deg); }
  70%      { transform: translateX(2px) rotate(-3deg) scale(1,  1) skewX(1deg); }
  80%      { transform: translateX(0px) rotate(0deg) scale(0.97,  1.02) skewX(0deg); }
}
@keyframes combat-player-idle {
  0%   { transform: scale(1,     1)     skewX(0deg)    translateX(0);    }
  7%   { transform: scale(1.02,  0.98)  skewX(0.5deg)  translateX(0);    }
  15%  { transform: scale(0.99,  1.01)  skewX(-0.4deg) translateX(0);    }
  23%  { transform: scale(1.01,  0.99)  skewX(0.3deg)  translateX(0);    }
  30%  { transform: scale(1,     1)     skewX(0deg)    translateX(0);    }
  /* anticipation squish before hop */
  36%  { transform: scale(0.95,  1.05)  skewX(0deg)    translateX(0);    }
  /* hop */
  43%  { transform: scale(1.07,  0.93)  skewX(-1.5deg) translateX(6px); }
  /* land and settle */
  50%  { transform: scale(0.97,  1.02)  skewX(0.5deg)  translateX(-2px); }
  57%  { transform: scale(1.01,  0.99)  skewX(-0.2deg) translateX(1px);  }
  63%  { transform: scale(1,     1)     skewX(0deg)    translateX(0);    }
  /* warp phase */
  72%  { transform: scale(1.015, 0.99)  skewX(0.35deg) translateX(0);    }
  81%  { transform: scale(0.99,  1.01)  skewX(-0.3deg) translateX(0);    }
  91%  { transform: scale(1.01,  0.995) skewX(0.2deg)  translateX(0);    }
  100% { transform: scale(1,     1)     skewX(0deg)    translateX(0);    }
}
.combat-player-svg:not(.combat-shake):not(.combat-strike):not(.combat-bounce):not(.combat-magic-cast):not(.combat-magic-heal) { animation: combat-player-idle 4s ease-in-out infinite; }
.combat-companion-svg:not(.combat-strike):not(.combat-bounce)                 { animation: combat-player-idle 3.2s ease-in-out infinite -1.2s; }
.combat-enemy-svg                                         { animation: combat-idle-bob 2.5s ease-in-out infinite; }
.combat-enemy-side .combat-enemy:nth-child(2) .combat-enemy-svg {
    animation-delay: 500ms;
    animation-duration: 3s;
    animation-timing-function: cubic-bezier(0.075, 0.82, 0.165, 1);
}
.combat-enemy-side .combat-enemy:nth-child(3) .combat-enemy-svg {
    animation-delay: 800ms;
    animation-duration: 2s;
    animation-direction: alternate;
}

/* ── Magic animations ────────────────────────────────────────────────────── */

@keyframes combat-magic-cast-pulse {
    0%   { transform: translateX(0)    scale(1);    filter: none; }
    22%  { transform: translateX(-8px)  scale(0.94); filter: drop-shadow(0 0 6px #c084fc); }
    40%  { transform: translateX(-14px) scale(0.88); filter: drop-shadow(0 0 14px #c084fc) drop-shadow(0 0 28px #a855f7); }
    54%  { transform: translateX(10px)  scale(1.07); filter: drop-shadow(0 0 22px #ffffff) drop-shadow(0 0 34px #c084fc); }
    70%  { transform: translateX(3px)   scale(1.02); filter: drop-shadow(0 0 8px #a855f7); }
    100% { transform: translateX(0)    scale(1);    filter: none; }
}
.combat-magic-cast {
    animation: combat-magic-cast-pulse 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}

/* ── Magic bolt projectile ───────────────────────────────────────────────── */
.combat-magic-bolt {
    position: absolute;
    height: 10px;
    border-radius: 5px;
    background: linear-gradient(90deg, transparent 0%, #c084fc 25%, #ffffff 75%, #f0e6ff 100%);
    box-shadow: 0 0 10px 4px #a855f7, 0 0 22px 6px #c084fc55;
    pointer-events: none;
    opacity: 0;
    animation: magic-bolt-fly 0.5s ease-in forwards;
}
@keyframes magic-bolt-fly {
    0%   { opacity: 0;   width: 4px;  transform: translateX(0); }
    20%  { opacity: 0.7; width: 8px;  transform: translateX(0); }
    40%  { opacity: 1;   width: 12px; transform: translateX(0); }
    52%  { opacity: 1;   width: 44px; transform: translateX(16px); }
    85%  { opacity: 0.9; width: 58px; transform: translateX(270px); }
    100% { opacity: 0;   width: 30px; transform: translateX(320px); }
}
.combat-magic-bolt.b1 { top: 52px; left: 88px; animation-delay: 0s;    }
.combat-magic-bolt.b2 { top: 43px; left: 86px; animation-delay: 0.05s; }
.combat-magic-bolt.b3 { top: 61px; left: 90px; animation-delay: 0.10s; }

@keyframes combat-magic-heal-pulse {
    0%   { transform: scale(1);                   filter: none; }
    20%  { transform: scaleX(0.93) scaleY(1.08);  filter: drop-shadow(0 0 8px #ffffff) drop-shadow(0 0 16px #86efac); }
    45%  { transform: scaleX(0.88) scaleY(1.18);  filter: drop-shadow(0 0 18px #ffffff) drop-shadow(0 0 36px #4ade80); }
    65%  { transform: scaleX(1.07) scaleY(0.96);  filter: drop-shadow(0 0 12px #ffffff) drop-shadow(0 0 24px #86efac); }
    82%  { transform: scaleX(0.98) scaleY(1.03);  filter: drop-shadow(0 0 5px #86efac); }
    100% { transform: scale(1);                   filter: none; }
}
.combat-magic-heal {
    animation: combat-magic-heal-pulse 0.65s cubic-bezier(0.4, 0, 0.2, 1);
}

@keyframes combat-magic-shake {
    0%   { transform: scale(1.18) translateX(0);   filter: brightness(2.2) drop-shadow(0 0 12px #c084fc) drop-shadow(0 0 24px #a855f7); }
    10%  { transform: scale(0.92) translateX(-12px); filter: brightness(1.4) drop-shadow(0 0 8px #a855f7); }
    22%  { transform: scale(1.04) translateX(14px);  filter: brightness(1.6) drop-shadow(0 0 10px #c084fc); }
    34%  { transform: scale(0.96) translateX(-11px); filter: brightness(1.3) drop-shadow(0 0 6px #a855f7); }
    46%  { transform: scale(1.02) translateX(9px);   filter: brightness(1.2) drop-shadow(0 0 4px #c084fc); }
    58%  { transform: scale(0.99) translateX(-6px);  filter: brightness(1.1); }
    72%  { transform: scale(1.01) translateX(4px);   filter: brightness(1); }
    86%  { transform: scale(1)    translateX(-2px);  filter: none; }
    100% { transform: scale(1)    translateX(0);     filter: none; }
}
.combat-magic-shake {
    animation: combat-magic-shake 0.55s cubic-bezier(0.3, 0, 0.7, 1);
}

/* ── Heal particle orbs ──────────────────────────────────────────────────── */
.combat-heal-particles {
    position: absolute;
    top: 50%; left: 50%;
    width: 0; height: 0;
    pointer-events: none;
}
.heal-orb {
    position: absolute;
    width: 8px; height: 8px;
    border-radius: 50%;
    background: radial-gradient(circle, #fff 0%, #86efac 60%, transparent 100%);
    box-shadow: 0 0 6px 2px #86efac, 0 0 12px 4px #ffffff66;
    animation: heal-orb-rise 0.65s ease-out forwards;
    opacity: 0;
}
@keyframes heal-orb-rise {
    0%   { opacity: 0;   transform: translate(var(--ox), var(--oy)) scale(0.3); }
    20%  { opacity: 1; }
    80%  { opacity: 0.7; }
    100% { opacity: 0;   transform: translate(var(--dx), var(--dy)) scale(1.2); }
}
.heal-orb.o1 { --ox: -24px; --oy:  0px; --dx: -36px; --dy: -50px; animation-delay: 0s;    }
.heal-orb.o2 { --ox:  24px; --oy:  0px; --dx:  38px; --dy: -45px; animation-delay: 0.07s; }
.heal-orb.o3 { --ox:  0px;  --oy: 10px; --dx:  -8px; --dy: -58px; animation-delay: 0.14s; }
.heal-orb.o4 { --ox:  12px; --oy: -5px; --dx:  30px; --dy: -52px; animation-delay: 0.06s; }

/* ── Magic spark particles ───────────────────────────────────────────────── */
.combat-magic-sparks {
    position: absolute;
    top: 50%; left: 50%;
    width: 0; height: 0;
    pointer-events: none;
}
.combat-magic-sparks.enemy-sparks {
    top: 30%; left: 50%;
}
.magic-spark {
    position: absolute;
    width: 7px; height: 7px;
    border-radius: 50%;
    background: radial-gradient(circle, #ffffff 0%, #c084fc 40%, #7c3aed 80%, transparent 100%);
    box-shadow: 0 0 8px 3px #a855f7, 0 0 16px 5px #c084fc88;
    animation: magic-spark-fly 0.42s ease-out forwards;
    opacity: 0;
}
@keyframes magic-spark-fly {
    0%   { opacity: 0;   transform: translate(0, 0) scale(0.2); }
    8%   { opacity: 1;   transform: translate(calc(var(--tx) * 0.1), calc(var(--ty) * 0.1)) scale(1.4); }
    70%  { opacity: 0.8; }
    100% { opacity: 0;   transform: translate(var(--tx), var(--ty)) scale(0.5); }
}
.magic-spark.s1 { --tx: -52px; --ty: -38px; animation-delay: 0s;    }
.magic-spark.s2 { --tx:  50px; --ty: -34px; animation-delay: 0.03s; }
.magic-spark.s3 { --tx: -18px; --ty: -60px; animation-delay: 0.06s; }
.magic-spark.s4 { --tx:  42px; --ty: -56px; animation-delay: 0.02s; }
.magic-spark.s5 { --tx:  -6px; --ty: -46px; animation-delay: 0.09s; }

/* ── Death overlay ───────────────────────────────────────────────────────── */
.death-overlay {
    position: fixed;
    inset: 0;
    z-index: 900;
    background: rgba(0, 0, 0, 0.92);
    display: flex;
    align-items: center;
    justify-content: center;
    animation: death-fade-in 0.6s ease;
}
@keyframes death-fade-in {
    from { opacity: 0; }
    to   { opacity: 1; }
}
.death-modal {
    max-width: 540px;
    width: 90%;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1.5rem;
    text-align: center;
    padding: 2.5rem 2rem;
    border: 1px solid #5a1a1a;
    background: #100808;
    border-radius: 4px;
    box-shadow: 0 0 60px rgba(180, 0, 0, 0.25);
    animation: death-rise 0.7s cubic-bezier(0.22, 1, 0.36, 1);
}
@keyframes death-rise {
    from { transform: translateY(24px); opacity: 0; }
    to   { transform: translateY(0);    opacity: 1; }
}
.death-title {
    font-size: 2rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    color: #c03030;
    text-shadow: 0 0 24px rgba(200, 40, 40, 0.5);
}
.death-message {
    font-size: 0.93rem;
    line-height: 1.7;
    color: #b0a0a0;
    font-style: italic;
}
.death-confirm-btn {
    margin-top: 0.5rem;
    padding: 0.55rem 1.6rem;
    background: transparent;
    border: 1px solid #6a2020;
    color: #c08080;
    border-radius: 3px;
    font-size: 0.9rem;
    cursor: pointer;
    letter-spacing: 0.04em;
    transition: background 0.2s, color 0.2s, border-color 0.2s;
}
.death-confirm-btn:hover {
    background: #3a0a0a;
    border-color: #c03030;
    color: #e0a0a0;
}

/* ── Combat overlay ──────────────────────────────────────────────────────── */
.combat-overlay {
    position: fixed;
    inset: 0;
    z-index: 200;
    background: rgba(5, 5, 8, 0.82);
    backdrop-filter: blur(2px);
    display: flex;
    align-items: center;
    justify-content: center;
}

/* ── Combat view ─────────────────────────────────────────────────────────── */
.combat-view { display: flex; flex-direction: column; gap: .6rem; padding: 1rem 1.25rem; height: 100svh; max-height: 100svh; box-sizing: border-box; width: min(560px, 100vw); }
.combat-hud { display: flex; justify-content: center; }
.combat-context { font-size: .8rem; color: var(--text-dim); letter-spacing: .04em; }
.combat-battlefield { display: flex; align-items: center; justify-content: space-between; gap: 1rem; min-height: 130px; }
.combat-player-side { display: flex; flex-direction: column; align-items: center; gap: .3rem; min-width: 100px; position: relative; overflow: visible; }
.combat-player-svg { filter: drop-shadow(0 0 8px rgba(80,160,240,.4)); }
.combat-player-label { font-size: .78rem; color: var(--text); }
.combat-status-badge-container { display: flex; flex-direction: column; gap: 2px; position: absolute; top: 0; }
.combat-player-side .combat-status-badge-container { left: 0; }
.combat-enemy-side .combat-status-badge-container { right: 0; }
.combat-status-badge { font-size: .7rem; padding: .1rem .4rem; border-radius: 3px; }
.combat-status-badge.defend    { background: rgba(80,120,200,.2); border: 1px solid rgba(80,120,200,.4); color: #80a0e0; }
.combat-status-badge.steady    { background: rgba(80,180,200,.2); border: 1px solid rgba(80,180,200,.4); color: #60cce0; }
.combat-status-badge.buff      { background: rgba(100,200,120,.15); border: 1px solid rgba(100,200,120,.35); color: #80d090; }
.combat-status-badge.buff.enemy-buff { background: rgba(200,100,80,.15); border: 1px solid rgba(200,100,80,.35); color: #e08870; }
.combat-enemy-side { display: flex; flex-wrap: wrap; gap: .5rem; justify-content: flex-end; flex: 1; position: relative; }
.combat-enemy { display: flex; flex-direction: column; align-items: center; gap: .2rem; cursor: pointer; padding: .3rem; border-radius: 6px; border: 2px solid transparent; transition: border-color .15s; position: relative; }
.combat-enemy:hover { border-color: rgba(255,224,102,.4); }
.combat-enemy.targeted { border-color: #ffe066; background: rgba(255,224,102,.08); }
.combat-enemy.fled { opacity: .4; cursor: default; }
.combat-enemy-name { font-size: .72rem; color: var(--text-dim); text-align: center; }
.combat-enemy-hp { display: flex; flex-direction: column; align-items: center; gap: .15rem; font-size: .68rem; color: var(--text-dim); }
.combat-player-stats { display: flex; flex-direction: column; gap: .3rem; }
.combat-stat-row { display: flex; align-items: center; gap: .5rem; }
.combat-stat-label { font-size: .75rem; color: var(--text-dim); min-width: 1.8rem; }
.combat-stat-value { font-size: .75rem; color: var(--text); white-space: nowrap; }
.combat-hp-bar { height: 10px; background: rgba(255,255,255,.1); border-radius: 5px; overflow: hidden; flex: 1; }
.combat-hp-bar.wide { flex: 1; }
.combat-stamina-bar { height: 10px; background: rgba(255,255,255,.1); border-radius: 5px; overflow: hidden; flex: 1; }
.combat-stamina-bar.wide { flex: 1; }
.combat-hp-fill { height: 100%; background: linear-gradient(90deg, #3a8a3a, #60c040); border-radius: 5px; transition: width .3s; }
.combat-stamina-fill { height: 100%; background: linear-gradient(90deg, #3060c0, #60a0f0); border-radius: 5px; transition: width .3s; }
.combat-mana-bar { height: 10px; background: rgba(255,255,255,.1); border-radius: 5px; overflow: hidden; flex: 1; }
.combat-mana-bar.wide { flex: 1; }
.combat-mana-fill { height: 100%; background: linear-gradient(90deg, #6020b0, #9050e0); border-radius: 5px; transition: width .3s; }
.combat-actions { display: flex; flex-wrap: wrap; gap: .4rem; }
.combat-btn { font-size: .8rem; padding: .3rem .65rem; border-radius: 5px; border: 1px solid var(--border); background: rgba(255,255,255,.06); color: var(--text); cursor: pointer; transition: background .15s; }
.combat-btn:hover:not(:disabled) { background: rgba(255,255,255,.12); }
.combat-btn:disabled { opacity: .4; cursor: default; }
.combat-btn .cost { font-size: .68rem; color: var(--text-dim); }
.combat-btn.attack  { border-color: rgba(190,120,40,.6); color: #e0a050; }
.combat-btn.attack:hover:not(:disabled)  { background: rgba(190,120,40,.18); }
.combat-btn.steady  { border-color: rgba(80,180,200,.5); color: #60cce0; }
.combat-btn.steady:hover:not(:disabled)  { background: rgba(80,180,200,.15); }
.combat-btn.defend  { border-color: rgba(80,120,200,.5); color: #80a0e0; }
.combat-btn.defend:hover:not(:disabled)  { background: rgba(80,120,200,.15); }
.combat-btn.item    { border-color: rgba(80,180,80,.5);  color: #80d080; }
.combat-btn.item:hover:not(:disabled)    { background: rgba(80,180,80,.15); }
.combat-btn.flee    { border-color: rgba(180,140,60,.5); color: #d0a060; }
.combat-btn.flee:hover:not(:disabled)    { background: rgba(180,140,60,.15); }
.combat-btn.spell   { border-color: rgba(140,60,220,.5); color: #b080f0; }
.combat-btn.spell:hover:not(:disabled)   { background: rgba(140,60,220,.15); }
.combat-btn.refocus { border-color: rgba(100,60,180,.5); color: #9070d0; }
.combat-btn.refocus:hover:not(:disabled) { background: rgba(100,60,180,.15); }
/* ── Combat picker modals ────────────────────────────────────────────────── */
.combat-picker-overlay { position: fixed; inset: 0; background: rgba(0,0,0,.55); z-index: 600; display: flex; align-items: center; justify-content: center; padding: 1rem; }
.combat-picker-modal   { background: var(--surface); border: 1px solid var(--border); border-radius: 10px; width: 100%; max-width: 360px; max-height: 70vh; display: flex; flex-direction: column; overflow: hidden; }
.combat-picker-header  { display: flex; align-items: center; justify-content: space-between; padding: .6rem .9rem; border-bottom: 1px solid var(--border); flex-shrink: 0; }
.combat-picker-title   { font-weight: 700; font-size: .95rem; color: var(--text); }
.combat-picker-close   { background: none; border: none; color: var(--text-dim); font-size: 1rem; cursor: pointer; padding: .1rem .3rem; line-height: 1; }
.combat-picker-close:hover { color: var(--text); }
.combat-picker-list    { display: flex; flex-direction: column; gap: .35rem; padding: .6rem; overflow-y: auto; }
.combat-picker-option  { display: flex; flex-direction: column; gap: .2rem; padding: .65rem .8rem; border-radius: 6px; border: 1px solid var(--border); background: var(--bg); cursor: pointer; text-align: left; transition: background .1s; }
.combat-picker-option:hover:not(:disabled) { background: rgba(255,255,255,.06); }
.combat-picker-option:disabled { opacity: .45; cursor: default; }
.picker-option-top     { display: flex; align-items: baseline; justify-content: space-between; gap: .5rem; }
.picker-option-name    { font-size: .88rem; font-weight: 600; color: var(--text); }
.picker-option-cost    { font-size: .78rem; color: var(--text-dim); white-space: nowrap; }
.picker-option-desc    { font-size: .74rem; color: var(--text-dim); line-height: 1.35; }
.picker-insufficient   { border-color: rgba(255,80,80,.25) !important; }
.picker-insufficient .picker-option-name { color: #e07070; }
.combat-spell-picker { display: flex; flex-direction: column; gap: .3rem; padding: .3rem 0 0; }
.combat-spell-btn { display: flex; align-items: baseline; gap: .4rem; font-size: .75rem; padding: .3rem .6rem; border-radius: 4px; border: 1px solid rgba(140,60,220,.4); background: rgba(140,60,220,.1); color: #b080f0; cursor: pointer; text-align: left; }
.combat-spell-btn:hover:not(:disabled) { background: rgba(140,60,220,.2); }
.combat-spell-btn:disabled { opacity: .4; cursor: default; }
.combat-spell-btn .spell-name { font-weight: 600; color: #c8a0ff; min-width: 7rem; }
.combat-spell-btn .spell-cost { font-size: .7rem; color: #9060d0; min-width: 3rem; }
.combat-spell-btn .spell-desc { font-size: .7rem; color: var(--text-dim); opacity: .85; }
.combat-spell-btn.spell-insufficient { opacity: .5; }
.combat-attack-picker { display: flex; flex-direction: column; gap: .3rem; padding: .3rem 0 0; }
.combat-attack-btn { display: flex; align-items: baseline; gap: .4rem; font-size: .75rem; padding: .3rem .6rem; border-radius: 4px; border: 1px solid rgba(190,120,40,.4); background: rgba(190,120,40,.1); color: #e0a050; cursor: pointer; text-align: left; }
.combat-attack-btn:hover:not(:disabled) { background: rgba(190,120,40,.2); }
.combat-attack-btn:disabled { opacity: .4; cursor: default; }
.combat-attack-btn .attack-name { font-weight: 600; color: #f0c070; min-width: 9rem; }
.combat-attack-btn .attack-cost { font-size: .7rem; color: #b07030; min-width: 3rem; }
.combat-attack-btn .attack-desc { font-size: .7rem; color: var(--text-dim); opacity: .85; }
.combat-attack-btn.attack-insufficient { opacity: .5; }
.combat-item-picker { display: flex; flex-wrap: wrap; gap: .3rem; padding: .3rem 0 0; }
.combat-item-btn { display: flex; align-items: center; gap: .3rem; font-size: .75rem; padding: .2rem .5rem; border-radius: 4px; border: 1px solid rgba(80,180,80,.4); background: rgba(80,180,80,.1); color: #80d080; cursor: pointer; }
.combat-item-btn:hover { background: rgba(80,180,80,.2); }
.combat-item-btn .item-name { color: var(--text); }
.combat-item-btn .item-effect { font-size: .7rem; color: #80d090; opacity: .85; }
.combat-item-btn .qty { color: var(--text-dim); font-size: .7rem; }
.combat-waiting { font-size: .8rem; color: var(--text-dim); font-style: italic; }
.combat-log { display: flex; flex-direction: column; gap: .15rem; border-top: 1px solid var(--border); padding-top: .4rem; flex: 1; overflow-y: auto; }
.combat-log-line { font-size: .75rem; color: var(--text-dim); line-height: 1.45; }
.combat-log-line:first-child { color: var(--text); }

/* ── Combat end screen ───────────────────────────────────────────────────── */
.combat-end-screen { display: flex; flex-direction: column; align-items: center; gap: .75rem; padding: 1.5rem 1rem; text-align: center; flex: 1; }
.combat-end-title { font-size: 1.6rem; font-weight: 700; letter-spacing: .04em; }
.combat-end-title.victory { color: #80d060; text-shadow: 0 0 16px rgba(80,200,60,.4); }
.combat-end-title.fled    { color: #d0b060; text-shadow: 0 0 16px rgba(200,160,60,.3); }
.combat-end-title.defeat  { color: #d06060; text-shadow: 0 0 16px rgba(200,60,60,.4); }
.combat-end-msg { font-size: .85rem; color: var(--text-dim); max-width: 28rem; line-height: 1.55; margin: 0; }
.combat-end-loot { display: flex; flex-direction: column; gap: .25rem; border: 1px solid rgba(80,200,60,.25); border-radius: 6px; padding: .6rem 1rem; background: rgba(60,160,40,.08); min-width: 12rem; }
.combat-end-loot-label { font-size: .72rem; color: var(--text-dim); text-transform: uppercase; letter-spacing: .04em; margin: 0 0 .2rem; }
.combat-end-loot-item { font-size: .85rem; color: var(--text); }
.combat-end-loot-qty { color: #80d060; font-weight: 600; }
.combat-end-log { display: flex; flex-direction: column; gap: .12rem; opacity: .6; }
.combat-end-btn { margin-top: .5rem; font-size: .9rem; padding: .45rem 1.6rem; border-radius: 6px; border: 1px solid rgba(80,160,240,.4); background: rgba(40,100,200,.2); color: #80b0f0; cursor: pointer; transition: background .15s; }
.combat-end-btn:hover { background: rgba(60,120,220,.35); }

/* ── Sprite editor button in PlayerInfo ─────────────────────────────────── */
.sprite-edit-btn { background: none; border: 1px solid var(--border); border-radius: 4px; padding: 1px; cursor: pointer; line-height: 0; display: inline-flex; align-items: center; justify-content: center; }
.sprite-edit-btn:hover { border-color: rgba(80,160,240,.5); background: rgba(80,160,240,.1); }
.sprite-edit-preview { display: block; image-rendering: pixelated; }

/* ── Sprite editor modal ─────────────────────────────────────────────────── */
.sprite-editor-modal { background: var(--surface); border: 1px solid var(--border); border-radius: 10px; padding: 1.25rem; display: flex; flex-direction: column; gap: .75rem; width: min(90vw, 520px); box-shadow: 0 8px 32px rgba(0,0,0,.5); }
.sprite-editor-body { display: flex; gap: 1rem; align-items: flex-start; }
.sprite-grid-wrap { flex: 0 0 auto; }
.sprite-grid { display: grid; grid-template-columns: repeat(16, var(--sprite-grid-cell)); grid-template-rows: repeat(16, var(--sprite-grid-cell)); border: 1px solid var(--border); cursor: crosshair; user-select: none; }
.sprite-grid.medium-grid { grid-template-columns: repeat(20, var(--sprite-grid-cell-medium)); grid-template-rows: repeat(20, var(--sprite-grid-cell-medium)); }
.sprite-cell { width: var(--sprite-grid-cell); height: var(--sprite-grid-cell); box-sizing: border-box; border: 1px solid rgba(255,255,255,.06); }
.sprite-grid.medium-grid .sprite-cell { width: var(--sprite-grid-cell-medium); height: var(--sprite-grid-cell-medium); }
.sprite-cell.transparent { background-image: repeating-conic-gradient(#333 0% 25%, #555 0% 50%); background-size: 8px 8px; }
.sprite-cell:hover { outline: 1px solid rgba(255,255,255,.4); outline-offset: -1px; }
.sprite-preview-wrap { display: flex; flex-direction: column; gap: .35rem; align-items: center; }
.sprite-preview-label { font-size: .7rem; color: var(--text-dim); text-transform: uppercase; letter-spacing: .05em; }
.sprite-preview-svg { image-rendering: pixelated; border: 1px solid var(--border); background-image: repeating-conic-gradient(#333 0% 25%, #555 0% 50%); background-size: 8px 8px; }
.sprite-editor-tools { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; padding-top: .25rem; border-top: 1px solid var(--border); }
.sprite-tool-label { font-size: .75rem; color: var(--text-dim); display: flex; align-items: center; gap: .4rem; }
.sprite-color-input { width: 32px; height: 24px; padding: 0; border: 1px solid var(--border); border-radius: 3px; background: none; cursor: pointer; }
.sprite-alpha-slider { width: 80px; }
.sprite-alpha-value { font-size: .72rem; color: var(--text-dim); min-width: 2.5rem; }
.sprite-tool-btn { font-size: .75rem; padding: .25rem .6rem; border-radius: 4px; border: 1px solid var(--border); background: var(--input-bg, rgba(255,255,255,.05)); color: var(--text); cursor: pointer; }
.sprite-tool-btn:hover { background: rgba(255,255,255,.1); }
.sprite-tool-btn.active { border-color: rgba(80,200,120,.4); background: rgba(80,200,120,.15); color: #80d090; }
.sprite-save-error { font-size: .75rem; color: #e08080; border: 1px solid rgba(220,80,80,.3); border-radius: 4px; padding: .3rem .6rem; background: rgba(200,60,60,.1); }

/* ── Enemy affix CSS filters ─────────────────────────────────────────────── */
@keyframes affix-shake { 0%,100% { transform: translateX(0); } 20% { transform: translateX(-3px) rotate(-1deg); } 60% { transform: translateX(3px) rotate(1deg); } }
@keyframes affix-pulse { 0%,100% { filter: brightness(1) saturate(1.8) hue-rotate(20deg); } 50% { filter: brightness(1.4) saturate(2.4) hue-rotate(20deg); } }
@keyframes affix-drift { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-5px); } }
@keyframes affix-jitter { 0%,100% { transform: translate(0,0); } 25% { transform: translate(-2px,1px); } 50% { transform: translate(2px,-1px); } 75% { transform: translate(-1px,2px); } }
@keyframes affix-curse  { 0%,100% { filter: brightness(0.9) saturate(1.5) hue-rotate(240deg); } 50% { filter: brightness(1.2) saturate(2) hue-rotate(260deg); } }
@keyframes affix-frenzy { 0%,100% { transform: scaleX(1) rotate(0); } 30% { transform: scaleX(1.04) rotate(0.5deg); } 60% { transform: scaleX(.97) rotate(-0.5deg); } }

.affix-rabid    { filter: saturate(1.8) hue-rotate(-10deg) brightness(1.1); animation: affix-shake 0.7s ease-in-out infinite; }
.affix-burning  { filter: saturate(2) hue-rotate(20deg) brightness(1.2); animation: affix-pulse 1.2s ease-in-out infinite; }
.affix-venomous { filter: saturate(1.6) hue-rotate(80deg) brightness(1.05); animation: affix-drift 2.5s ease-in-out infinite; }
.affix-armored  { filter: brightness(0.8) saturate(0.6) contrast(1.2); }
.affix-spectral { filter: brightness(1.1) saturate(0.3) contrast(1.1) opacity(0.82); animation: affix-drift 3s ease-in-out infinite; }
.affix-enraged  { filter: saturate(2.4) hue-rotate(-20deg) brightness(1.25); animation: affix-jitter 0.35s steps(1) infinite; }
.affix-cursed   { animation: affix-curse 2s ease-in-out infinite; }
.affix-frenzied { filter: saturate(2) hue-rotate(-5deg) brightness(1.15); animation: affix-frenzy 0.4s ease-in-out infinite; }

/* ── Player status badges ────────────────────────────────────────────────── */
.combat-status-badge.status-disease     { background: rgba(120,60,200,.25); border-color: rgba(140,80,210,.5); color: #c080ff; }
.combat-status-badge.status-burn        { background: rgba(220,100,20,.25); border-color: rgba(240,120,30,.5); color: #ff9040; }
.combat-status-badge.status-venom       { background: rgba(60,180,60,.25); border-color: rgba(80,200,80,.5); color: #60e060; }
.combat-status-badge.status-staminadrain { background: rgba(100,80,160,.25); border-color: rgba(120,90,180,.5); color: #a080e0; }
.combat-status-badge.status-stun         { background: rgba(240,200,40,.2);  border-color: rgba(255,220,60,.5);  color: #ffd84a; }

/* ── SpriteView component ────────────────────────────────────────────────── */
.sprite-view { display: block; image-rendering: pixelated; }

/* ── Companion nickname editor ───────────────────────────────────────────── */
.companion-nickname-input { flex: 1; background: var(--bg); border: 1px solid var(--border); border-radius: 4px; color: var(--text); padding: .2rem .45rem; font-size: .82rem; outline: none; min-width: 0; }
.companion-nickname-input:focus { border-color: var(--accent); }
.companion-rename-btn { font-size: .72rem; padding: .2rem .55rem; border-radius: 4px; border: 1px solid rgba(110,181,160,.4); background: rgba(110,181,160,.12); color: var(--accent); cursor: pointer; white-space: nowrap; }
.companion-rename-btn:hover:not(:disabled) { background: rgba(110,181,160,.25); }
.companion-rename-btn:disabled { opacity: .35; cursor: default; }
.companion-nickname-label { flex: 1; min-width: 6rem; }
.companion-nickname-label .companion-nickname-input { width: 100%; }

/* ── Companion inline in PlayerInfo ─────────────────────────────────────── */
.companion-inline { display: flex; align-items: center; gap: .4rem; padding: .2rem .4rem; border-radius: 5px; background: rgba(120,60,200,.08); border: 1px solid rgba(120,60,200,.2); cursor: pointer; transition: background .15s; }
.companion-inline:hover { background: rgba(120,60,200,.18); }
.companion-inline-sprite { image-rendering: pixelated; flex-shrink: 0; }
.companion-inline-emoji { font-size: 1rem; line-height: 1; flex-shrink: 0; }
.companion-inline-name { font-size: .78rem; color: var(--text-dim); font-style: italic; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* ── Companion sprite in combat ──────────────────────────────────────────── */
.combat-fighters-row { display: flex; align-items: flex-end; gap: .5rem; position: relative; overflow: visible; }
.combat-companion-mini { display: flex; flex-direction: column; align-items: center; position: absolute; right: 0; bottom: 0; }
.combat-companion-svg { image-rendering: pixelated; filter: drop-shadow(0 0 8px rgba(80, 160, 240, .4)); }

/* ── Battle button in player list ────────────────────────────────────────── */
.battle-btn {
    display: inline-flex; align-items: center; justify-content: center;
    padding: 1px 5px; margin-left: 3px;
    background: rgba(180, 100, 20, .18); border: 1px solid rgba(220, 140, 40, .35);
    color: #e8b050; border-radius: 4px; font-size: .75rem; cursor: pointer; line-height: 1;
    transition: background .15s, border-color .15s;
}
.battle-btn:hover { background: rgba(220, 140, 40, .30); border-color: rgba(220, 140, 40, .6); }

/* ── Companion battle challenge notification ─────────────────────────────── */
.battle-challenge-notify {
    position: fixed; bottom: 1.5rem; left: 50%; transform: translateX(-50%);
    display: flex; align-items: center; gap: 12px;
    background: #1a1820; border: 1px solid rgba(200, 140, 40, .5);
    border-radius: 10px; padding: 12px 16px; min-width: 340px; max-width: 440px;
    box-shadow: 0 4px 24px rgba(0,0,0,.6), 0 0 0 1px rgba(200,140,40,.15);
    z-index: 2000; animation: battle-notify-in .25s ease-out;
}
@keyframes battle-notify-in {
    from { opacity: 0; transform: translateX(-50%) translateY(20px); }
    to   { opacity: 1; transform: translateX(-50%) translateY(0); }
}
.battle-challenge-portrait {
    flex-shrink: 0; width: 52px; height: 52px;
    display: flex; align-items: center; justify-content: center;
    background: rgba(255,255,255,.04); border-radius: 8px;
}
.battle-challenge-emoji { font-size: 2rem; }
.battle-challenge-body { flex: 1; min-width: 0; }
.battle-challenge-title { font-weight: 700; color: #e8b050; font-size: .85rem; margin-bottom: 2px; }
.battle-challenge-text { font-size: .82rem; color: var(--text-dim); line-height: 1.3; }
.battle-challenge-timer { font-size: .72rem; color: rgba(200,140,40,.6); margin-top: 3px; }
.battle-challenge-actions { display: flex; flex-direction: column; gap: 5px; flex-shrink: 0; }
.battle-accept-btn {
    padding: 5px 12px; border-radius: 5px; font-size: .78rem; font-weight: 600; cursor: pointer;
    background: rgba(60, 160, 80, .25); border: 1px solid rgba(80, 200, 100, .4); color: #7dda8e;
    transition: background .15s;
}
.battle-accept-btn:hover { background: rgba(60, 160, 80, .42); }
.battle-decline-btn {
    padding: 5px 12px; border-radius: 5px; font-size: .78rem; cursor: pointer;
    background: rgba(120, 40, 40, .25); border: 1px solid rgba(180, 60, 60, .35); color: #d07070;
    transition: background .15s;
}
.battle-decline-btn:hover { background: rgba(120, 40, 40, .42); }

/* ── Companion battle result modal ───────────────────────────────────────── */
.battle-result-modal {
    background: #161420; border: 1px solid rgba(180,120,30,.4);
    border-radius: 12px; padding: 24px; width: 540px; max-width: 96vw; max-height: 85vh;
    display: flex; flex-direction: column; gap: 16px; overflow: hidden;
}
.battle-result-header { text-align: center; }
.battle-outcome { font-size: 1.6rem; font-weight: 800; letter-spacing: .04em; }
.battle-outcome.win  { color: #f0c040; text-shadow: 0 0 16px rgba(240,180,0,.5); }
.battle-outcome.loss { color: #a04040; }
.battle-outcome.draw { color: #8888aa; }
.battle-outcome.animating {
    color: #e0a030; font-size: 1.1rem; font-weight: 700;
    animation: battle-pulse-text 0.9s ease-in-out infinite alternate;
}
@keyframes battle-pulse-text {
    from { opacity: .6; }
    to   { opacity: 1; }
}

.battle-result-matchup {
    display: flex; align-items: center; justify-content: center; gap: 20px;
}
.battle-result-side {
    display: flex; flex-direction: column; align-items: center; gap: 4px;
    padding: 10px 14px; border-radius: 10px; border: 1px solid rgba(255,255,255,.06);
    background: rgba(255,255,255,.03); min-width: 110px; transition: border-color .2s;
}
.battle-result-side.winner {
    border-color: rgba(240, 190, 40, .5);
    background: rgba(240, 190, 40, .06);
    box-shadow: 0 0 20px rgba(240,190,40,.12);
}
.battle-result-emoji { font-size: 2.5rem; }
.battle-result-player  { font-size: .72rem; color: var(--text-dim); }
.battle-result-companion { font-size: .82rem; font-weight: 600; color: var(--text); }
.battle-result-vs { font-size: 1.1rem; font-weight: 700; color: rgba(255,255,255,.3); flex-shrink: 0; }

/* HP bars */
.battle-hp-bar {
    width: 100%; height: 7px; background: rgba(255,255,255,.1);
    border-radius: 4px; overflow: hidden; margin-top: 6px;
}
.battle-hp-fill {
    height: 100%; border-radius: 4px;
    transition: width 0.35s ease-out, background-color 0.35s;
}
.battle-hp-fill.hp-high { background: #50c060; }
.battle-hp-fill.hp-mid  { background: #d0a020; }
.battle-hp-fill.hp-low  { background: #d04030; }
.battle-hp-text { font-size: .65rem; color: var(--text-dim); }

/* Sprite-only animation wrapper — only this element moves/flashes */
.battle-sprite-anim {
    display: flex; align-items: center; justify-content: center;
}

.battle-result-defending-sprite {
    transform: scaleX(-1);
}

/* Per-action battle animations (applied to .battle-sprite-anim only) */
.anim-lunge-right { animation: lunge-right 0.48s ease-in-out; }
@keyframes lunge-right {
    0%  { transform: translateX(0)    scale(1); }
    42% { transform: translateX(28px) scale(1.1); }
    62% { transform: translateX(28px) scale(1.1); }
    100%{ transform: translateX(0)    scale(1); }
}
.anim-lunge-left  { animation: lunge-left 0.48s ease-in-out; }
@keyframes lunge-left {
    0%  { transform: translateX(0)     scale(1); }
    42% { transform: translateX(-28px) scale(1.1); }
    62% { transform: translateX(-28px) scale(1.1); }
    100%{ transform: translateX(0)     scale(1); }
}
.anim-hit { animation: hit-flash 0.48s ease-in-out; }
@keyframes hit-flash {
    0%  { filter: brightness(1);              transform: translateX(0); }
    18% { filter: brightness(3) saturate(0);  transform: translateX(-8px); }
    42% { filter: brightness(2) saturate(0);  transform: translateX(6px); }
    68% { filter: brightness(1.4);            transform: translateX(-2px); }
    100%{ filter: brightness(1);              transform: translateX(0); }
}
.anim-dodge { animation: dodge-jump 0.44s ease-in-out; }
@keyframes dodge-jump {
    0%  { transform: translateY(0)     translateX(0); }
    35% { transform: translateY(-22px) translateX(10px); }
    100%{ transform: translateY(0)     translateX(0); }
}
.anim-heal { animation: heal-glow 0.44s ease-in-out; }
@keyframes heal-glow {
    0%  { filter: brightness(1); }
    45% { filter: brightness(1.5) drop-shadow(0 0 12px rgba(80,220,120,.95)); }
    100%{ filter: brightness(1); }
}
.anim-buff { animation: buff-shimmer 0.44s ease-in-out; }
@keyframes buff-shimmer {
    0%  { filter: brightness(1); }
    45% { filter: brightness(1.6) drop-shadow(0 0 14px rgba(240,200,60,.95)); }
    100%{ filter: brightness(1); }
}
.anim-debuff { animation: debuff-curse 0.44s ease-in-out; }
@keyframes debuff-curse {
    0%  { filter: brightness(1);                                   transform: translateX(0); }
    30% { filter: brightness(0.6) hue-rotate(240deg) saturate(2); transform: translateX(-5px); }
    60% { filter: brightness(0.75) hue-rotate(200deg);            transform: translateX(5px); }
    100%{ filter: brightness(1);                                   transform: translateX(0); }
}
.anim-stun { animation: stun-wobble 0.44s ease-in-out; }
@keyframes stun-wobble {
    0%,100%{ transform: rotate(0deg); }
    18%    { transform: rotate(-10deg) translateX(-5px); }
    42%    { transform: rotate(10deg)  translateX(5px); }
    66%    { transform: rotate(-6deg)  translateX(-3px); }
    84%    { transform: rotate(5deg)   translateX(3px); }
}
.anim-rally { animation: rally-surge 0.44s ease-in-out; }
@keyframes rally-surge {
    0%  { filter: brightness(1); transform: scale(1); }
    48% { filter: brightness(1.8) drop-shadow(0 0 14px rgba(100,160,255,.95)); transform: scale(1.14); }
    100%{ filter: brightness(1); transform: scale(1); }
}
.anim-win { animation: win-burst 0.65s ease-in-out; }
@keyframes win-burst {
    0%  { transform: scale(1);    filter: brightness(1); }
    40% { transform: scale(1.2);  filter: brightness(1.7) drop-shadow(0 0 18px rgba(240,200,40,.95)); }
    100%{ transform: scale(1);    filter: brightness(1); }
}

.battle-result-log {
    flex: 1; overflow-y: auto; background: rgba(0,0,0,.3); border-radius: 6px;
    padding: 10px 12px; font-family: monospace; font-size: .74rem; line-height: 1.55;
    min-height: 220px; max-height: 220px; display: flex; flex-direction: column; gap: 1px;
}
.battle-log-line { color: var(--text-dim); }
.battle-log-line:last-child { animation: log-line-in 0.15s ease-out; }
@keyframes log-line-in {
    from { opacity: 0; transform: translateY(-3px); }
    to   { opacity: 1; transform: translateY(0); }
}
.battle-log-line.log-header { color: rgba(160,140,200,.9); font-weight: 600; margin-top: 4px; }
.battle-log-line.log-win  { color: #f0c040; font-weight: 700; margin-top: 4px; }
.battle-log-line.log-draw { color: #8888aa; font-weight: 700; margin-top: 4px; }
.battle-log-line.log-crit   { color: #ff9040; }
.battle-log-line.log-super  { color: #60d090; }
.battle-log-line.log-rally  { color: #80c0ff; font-style: italic; }
.battle-log-line.log-status { color: #c0a0e0; font-style: italic; }
.battle-log-line.log-action { color: rgba(200,200,220,.75); }

.battle-result-footer { display: flex; justify-content: center; }
.battle-close-btn, .battle-skip-btn {
    padding: 8px 28px; border-radius: 6px; font-size: .85rem; cursor: pointer; transition: background .15s;
}
.battle-close-btn {
    background: rgba(80, 60, 120, .35); border: 1px solid rgba(120,100,180,.4); color: var(--text);
}
.battle-close-btn:hover { background: rgba(80, 60, 120, .55); }
.battle-skip-btn {
    background: rgba(60, 60, 60, .4); border: 1px solid rgba(140,140,140,.3); color: var(--text-dim);
}
.battle-skip-btn:hover { background: rgba(80, 80, 80, .55); color: var(--text); }

/* ── Companion Tier Badge ─────────────────────────────────────────────────── */
.companion-tier-badge { font-size: .65rem; font-weight: 700; padding: .15rem .5rem; border-radius: 8px; white-space: nowrap; margin-left: auto; }
.companion-tier-badge.tier-t1 { background: rgba(120,120,120,.2); color: #a0a0a0; border: 1px solid rgba(140,140,140,.35); }
.companion-tier-badge.tier-t2 { background: rgba(80,160,220,.18); color: #70b8ff; border: 1px solid rgba(80,160,220,.4); }
.companion-tier-badge.tier-t3 { background: rgba(200,150,30,.18); color: #f0c040; border: 1px solid rgba(200,150,30,.45); }

/* ── Level & XP Row ──────────────────────────────────────────────────────── */
.companion-level-row { display: flex; align-items: center; gap: .5rem; }
.companion-level-label { font-size: .82rem; font-weight: 600; color: var(--text); white-space: nowrap; }
.companion-xp-bar { flex: 1; height: 6px; background: var(--border); border-radius: 4px; overflow: hidden; }
.companion-xp-fill { height: 100%; background: linear-gradient(90deg, #4060d0, #70a0ff); border-radius: 4px; transition: width .3s ease; }
.companion-xp-text { font-size: .72rem; color: var(--text-dim); white-space: nowrap; }

/* ── Temperament Badge ───────────────────────────────────────────────────── */
.companion-temperament-badge { font-size: .7rem; font-weight: 700; padding: .1rem .45rem; border-radius: 8px; white-space: nowrap; }
.companion-temp-hint { font-size: .68rem; color: var(--text-dim); margin-left: .25rem; }
.temp-bold     { background: rgba(220,100,50,.18); color: #e07840; border: 1px solid rgba(220,100,50,.35); }
.temp-timid    { background: rgba(80,160,220,.18); color: #6090e0; border: 1px solid rgba(80,160,220,.35); }
.temp-reckless { background: rgba(220,50,50,.18);  color: #e05050; border: 1px solid rgba(220,50,50,.35); }
.temp-careful  { background: rgba(60,180,100,.18); color: #50c870; border: 1px solid rgba(60,180,100,.35); }
.temp-cunning  { background: rgba(180,80,220,.18); color: #c060e0; border: 1px solid rgba(180,80,220,.35); }
.temp-stoic    { background: rgba(140,140,140,.18); color: #b0b0b0; border: 1px solid rgba(140,140,140,.35); }
.temp-playful  { background: rgba(220,180,40,.18); color: #e0c040; border: 1px solid rgba(220,180,40,.35); }
.temp-fierce   { background: rgba(200,40,40,.22);  color: #e03030; border: 1px solid rgba(200,40,40,.45); font-style: italic; }

/* ── Battle Record ───────────────────────────────────────────────────────── */
.companion-battle-record { display: flex; gap: .5rem; font-size: .82rem; }
.record-win  { color: #50c870; font-weight: 600; }
.record-loss { color: #e05050; font-weight: 600; }

/* ── Stat Allocation Grid ────────────────────────────────────────────────── */
.companion-stat-points-row { font-size: .78rem; color: #f0c040; font-weight: 600; text-align: center; padding: .2rem; background: rgba(200,150,30,.08); border-radius: 4px; }
.companion-stat-grid { display: grid; grid-template-columns: 1fr 1fr; gap: .3rem .6rem; padding: .1rem 0; }
.companion-stat-item { display: flex; align-items: center; gap: .35rem; background: var(--bg); border-radius: 4px; padding: .25rem .5rem; font-size: .82rem; }
.companion-stat-item .companion-stat-label { color: var(--text-dim); width: 2.8rem; flex-shrink: 0; }
.companion-stat-value { flex: 1; font-weight: 600; color: var(--text); }
.companion-fishing-section { margin-top: .6rem; border-top: 1px solid var(--border); padding-top: .5rem; }
.companion-fishing-label { font-size: .72rem; font-weight: 600; color: #50d0b0; letter-spacing: .05em; text-transform: uppercase; margin-bottom: .35rem; }
.companion-fishing-section .companion-stat-item .companion-stat-label { width: 6rem; }
.fishing-bonus-pos { color: #60e890 !important; }
.fishing-bonus-neg { color: #e87060 !important; }
.companion-alloc-btn { width: 18px; height: 18px; padding: 0; border-radius: 50%; background: rgba(80,120,220,.25); border: 1px solid rgba(80,120,220,.5); color: #80a8ff; font-size: .75rem; line-height: 1; cursor: pointer; display: flex; align-items: center; justify-content: center; flex-shrink: 0; transition: background .12s; }
.companion-alloc-btn:hover { background: rgba(80,120,220,.5); }
.companion-alloc-spacer { width: 18px; flex-shrink: 0; }

/* ── Items Section ───────────────────────────────────────────────────────── */
.companion-items-section { display: flex; flex-direction: column; gap: .4rem; padding: .5rem; background: rgba(80,80,80,.08); border-radius: 6px; border: 1px solid var(--border); }
.companion-items-label { font-size: .7rem; text-transform: uppercase; letter-spacing: .05em; color: var(--text-dim); }
.companion-item-btn { font-size: .8rem; padding: .35rem .75rem; border-radius: 5px; cursor: pointer; border: 1px solid var(--border); background: var(--bg); color: var(--text); transition: background .12s; }
.companion-item-btn:hover { background: var(--surface); }
.companion-item-btn.core-btn { background: rgba(80,160,220,.12); color: #70b8ff; border-color: rgba(80,160,220,.4); }
.companion-item-btn.core-btn:hover { background: rgba(80,160,220,.25); }
.companion-item-btn.evolve-btn { background: rgba(200,150,30,.12); color: #f0c040; border-color: rgba(200,150,30,.4); }
.companion-item-btn.evolve-btn:hover { background: rgba(200,150,30,.28); }
.companion-core-picker { display: flex; flex-wrap: wrap; align-items: center; gap: .35rem; }
.companion-core-picker-label { font-size: .75rem; color: var(--text-dim); }
.companion-core-choice { cursor: pointer; transition: transform .1s; }
.companion-core-choice:hover { transform: scale(1.1); }

/* ── Status move chip ────────────────────────────────────────────────────── */
.companion-move-status { font-size: .65rem; font-weight: 700; padding: .1rem .35rem; border-radius: 8px; background: rgba(120,60,60,.2); color: #e08080; border: 1px solid rgba(160,60,60,.35); white-space: nowrap; }

/* ── Tutorial ─────────────────────────────────────────────────────────────── */
.tutorial-open-btn { font-size: .75rem; padding: .25rem .6rem; border-radius: 5px; border: 1px solid rgba(100,180,220,.4); background: rgba(100,180,220,.08); color: #80c8e8; cursor: pointer; transition: background .15s; margin-top: .2rem; }
.tutorial-open-btn:hover { background: rgba(100,180,220,.18); }
.tutorial-modal { background: var(--surface); border: 1px solid var(--border); border-radius: 10px; width: min(520px, 94vw); max-height: 86vh; display: flex; flex-direction: column; box-shadow: 0 8px 32px rgba(0,0,0,.5); }
.tutorial-header { display: flex; align-items: center; justify-content: space-between; padding: .85rem 1.1rem .6rem; border-bottom: 1px solid var(--border); }
.tutorial-title { font-size: 1rem; font-weight: 700; color: var(--text); }
.tutorial-close { background: none; border: none; color: var(--text-dim); font-size: 1rem; cursor: pointer; padding: 0 .25rem; line-height: 1; }
.tutorial-close:hover { color: var(--text); }
.tutorial-body { flex: 1; overflow-y: auto; padding: .9rem 1.1rem; }
.tutorial-footer { padding: .7rem 1.1rem; border-top: 1px solid var(--border); display: flex; align-items: center; justify-content: space-between; gap: .5rem; }
.tutorial-dots { display: flex; gap: .35rem; }
.tutorial-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--border); cursor: pointer; transition: background .15s; }
.tutorial-dot.active { background: #80c8e8; }
.tutorial-nav { display: flex; gap: .5rem; }
.tutorial-nav-btn { font-size: .8rem; padding: .3rem .75rem; border-radius: 5px; border: 1px solid var(--border); background: rgba(255,255,255,.06); color: var(--text); cursor: pointer; }
.tutorial-nav-btn:hover { background: rgba(255,255,255,.12); }
.tutorial-nav-btn.primary { border-color: rgba(100,180,220,.5); background: rgba(100,180,220,.12); color: #80c8e8; }
.tutorial-nav-btn.primary:hover { background: rgba(100,180,220,.22); }
.tut-section { margin-bottom: .85rem; }
.tut-section:last-child { margin-bottom: 0; }
.tut-section-title { font-size: .85rem; font-weight: 700; color: var(--text); margin-bottom: .35rem; }
.tut-section-body { font-size: .8rem; color: var(--text-dim); line-height: 1.55; margin: 0; }
.tut-section-body strong { color: var(--text); }
.tut-section-body svg { overflow: visible; vertical-align: middle; }
.tut-action-list { display: flex; flex-direction: column; gap: .5rem; }
.tut-action { font-size: .78rem; color: var(--text-dim); line-height: 1.45; }
.tut-action-name { font-weight: 700; color: var(--text); margin-right: .3rem; }

/* ── sprite editor ─────────────────────────────────────────────────────────────── */
@media(max-width: 560px) {
    .sprite-editor-body .sprite-preview-wrap { display: none; }
}
@media(max-width: 470px) {
    .sprite-editor-body { 
        --sprite-grid-cell: 22px;
        --sprite-grid-cell-medium: 18px;
    }
}
@media(max-width: 430px) {
    .sprite-editor-body { 
        --sprite-grid-cell: 20px;
        --sprite-grid-cell-medium: 16px;
    }
}
@media(max-width: 400px) {
    .sprite-editor-body { 
        --sprite-grid-cell: 18px;
        --sprite-grid-cell-medium: 15px;
    }
}
@media(max-width: 360px) {
    .sprite-editor-body { 
        --sprite-grid-cell: 16px;
        --sprite-grid-cell-medium: 14px;
    }
}