/* ═══════════════════════════════════════════════════════════════════════
   Crownworld Interactive Map — CSS
   Layout, avatar animations, popups, speech bubbles.
   All avatar animations work on ANY PNG — no sprite sheets required.
   ═══════════════════════════════════════════════════════════════════════ */

/* ── Root container ───────────────────────────────────────────────────── */

.crownworld-viewport {
    position:      relative;
    overflow:      hidden;
    line-height:   0; /* prevent inline-block gap under canvas */
    margin:        -8px;
    border:        1px solid rgba(210, 175, 70, 0.45);
    border-radius: 8px;
    box-shadow:    0 0 0 1px rgba(210, 175, 70, 0.08),
                   0 4px 24px rgba(0, 0, 0, 0.5);
}

.crownworld-root {
    position: relative;
    width:  1920px;
    height: 1080px;
    overflow: hidden;
    /* JS sets transform: scale(N) for responsive sizing */
}

/* ── Canvas layers ────────────────────────────────────────────────────── */

.crownworld-root canvas {
    position: absolute;
    top:  0;
    left: 0;
    display: block;
}

#crownworld-canvas-bg {
    z-index: 1; /* static map — drawn once */
}

#crownworld-canvas-fx {
    z-index: 2; /* shadows, footsteps — redrawn each frame */
    pointer-events: none;
}

/* ── Avatar overlay ───────────────────────────────────────────────────── */

#crownworld-avatars {
    position: absolute;
    top:    0;
    left:   0;
    width:  1920px;
    height: 1080px;
    z-index: 3;
    pointer-events: none; /* let hover events through to individual wrappers */
}

/* ── Avatar wrapper (receives JS transform: translate) ────────────────── */

.av-wrapper {
    position: absolute;
    top:  0;
    left: 0;
    display:        flex;
    flex-direction: column;
    align-items:    center;
    pointer-events: auto;
    cursor:         pointer;
    /* GPU layer hint */
    will-change: transform;
}

/* Fade in on spawn — opacity only on wrapper so JS transform is never overridden */
@keyframes av-fadein {
    from { opacity: 0; }
    to   { opacity: 1; }
}
.av-fadein { animation: av-fadein 0.5s ease-out forwards; }

/* The scale pop lives on the inner element where it doesn't conflict */
@keyframes av-fadein-pop {
    from { transform: scale(0.7); }
    to   { transform: scale(1);   }
}
.av-fadein .av-inner { animation: av-fadein-pop 0.45s cubic-bezier(0.34,1.56,0.64,1) forwards; }

/* Fade out on remove */
@keyframes av-fadeout {
    from { opacity: 1; }
    to   { opacity: 0; }
}
.av-fadeout {
    animation:     av-fadeout 0.5s ease-in forwards;
    pointer-events: none;
}
@keyframes av-fadeout-shrink {
    from { transform: scale(1);   }
    to   { transform: scale(0.6); }
}
.av-fadeout .av-inner { animation: av-fadeout-shrink 0.5s ease-in forwards; }

/* ── Avatar inner div (receives CSS animation class) ─────────────────── */

.av-inner {
    position: relative;
    display:  flex;
    flex-direction: column;
    align-items:    center;
    /* --av-facing is set by JS: 1 = right, -1 = left */
    --av-facing: 1;
}

/* ── Avatar image ─────────────────────────────────────────────────────── */

.av-img {
    display:       block;
    width:         48px;
    height:        48px;
    object-fit:    contain;
    image-rendering: pixelated; /* keeps pixel art crisp */
    user-select:   none;
    -webkit-user-drag: none;
}

/* ── Shadow ellipse ───────────────────────────────────────────────────── */

.av-shadow {
    width:  40px;
    height: 10px;
    background: radial-gradient(ellipse, rgba(0,0,0,0.30) 0%, transparent 70%);
    position:  absolute;
    bottom:    -4px;
    left:      50%;
    transform: translateX(-50%);
    pointer-events: none;
}

/* ── Name plate ───────────────────────────────────────────────────────── */

.av-nameplate {
    margin-top:    3px;
    font-size:     10px;
    font-family:   sans-serif;
    font-weight:   600;
    color:         #fff;
    text-shadow:   0 1px 3px rgba(0,0,0,0.85);
    white-space:   nowrap;
    pointer-events: none;
    user-select:   none;
}

/* ── Platform badge (TikTok / YouTube icon on avatar wrapper) ─────────── */

.av-platform-badge {
    position:          absolute;
    bottom:            2px;
    right:             2px;
    width:             14px;
    height:            14px;
    border-radius:     50%;
    background-size:   contain;
    background-repeat: no-repeat;
    background-color:  rgba(0,0,0,0.5);
    pointer-events:    none;
}
.av-platform-tiktok  { background-image: url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 14 14%27 fill=%27%23fff%27%3E%3Cpath d=%27M10.2 1C10.2 1 10.2 3.2 12.5 3.5V5.5C11.4 5.5 10.5 5.1 9.8 4.5V8.8C9.8 11.5 7 12.8 5 11.6C3 10.4 3.2 7.4 5.5 6.5V8.6C4.6 8.9 4.2 9.8 4.6 10.6C5 11.4 6.2 11.5 6.8 10.8C7 10.5 7.1 10.1 7.1 9.7V1H10.2Z%27/%3E%3C/svg%3E");  }
.av-platform-youtube { background-image: url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 14 14%27 fill=%27%23fff%27%3E%3Cpath d=%27M13.2 3.8C13 3 12.4 2.4 11.6 2.2 10.6 2 7 2 7 2S3.4 2 2.4 2.2C1.6 2.4 1 3 0.8 3.8 0.6 4.8 0.6 7 0.6 7S0.6 9.2 0.8 10.2C1 11 1.6 11.6 2.4 11.8 3.4 12 7 12 7 12S10.6 12 11.6 11.8C12.4 11.6 13 11 13.2 10.2 13.4 9.2 13.4 7 13.4 7S13.4 4.8 13.2 3.8ZM5.6 9.2V4.8L9.2 7 5.6 9.2Z%27/%3E%3C/svg%3E"); }

/* Lift the wrapper to the top of the stacking order while it has an active bubble */
.av-wrapper:has(.av-bubble) {
    z-index: 10;
}

/* ── Speech bubble ────────────────────────────────────────────────────── */

.av-bubble {
    position:      absolute;
    /* gap for the 8px arrow tip below */
    bottom:        calc(100% + 10px);
    left:          50%;
    transform:     translateX(-50%);
    background:    #fdfce8;
    color:         #111;
    font-size:     13px;
    font-family:   'Courier New', Courier, monospace;
    font-weight:   900;
    line-height:   1.3;
    padding:       3px 6px;
    border-radius: 3px;
    border:        2px solid #1c1c1c;
    /* hard pixel drop-shadow — no blur */
    box-shadow:    2px 2px 0 #1c1c1c;
    /* overflow MUST stay visible so ::before / ::after arrows aren't clipped */
    overflow:      visible;
    pointer-events: none;
    animation:     av-bubble-in 0.2s steps(4, end);
}

/* Text is constrained inside a block child — wraps at word boundaries for longer messages */
.av-bubble-text {
    display:       block;
    width:         max-content;
    max-width:     220px;
    word-break:    break-word;
    white-space:   normal;
    overflow:      hidden;
    text-overflow: ellipsis;
    font-weight:   800;
}

/* Inline emote images inside speech bubbles */
.av-bubble-emote {
    display:        inline-block;
    width:          28px;
    height:         28px;
    vertical-align: middle;
    margin:         -3px 1px 0;
    object-fit:     contain;
}

/* Outer arrow — dark border colour, slightly larger */
.av-bubble::before {
    content:   '';
    position:  absolute;
    bottom:    -11px; /* border(7) + gap(2) + 2 for outer overlap */
    left:      50%;
    transform: translateX(-50%);
    border:    7px solid transparent;
    border-top-color: #1c1c1c;
    border-bottom: none;
}

/* Inner arrow — fill colour, sits on top of ::before */
.av-bubble::after {
    content:   '';
    position:  absolute;
    bottom:    -8px;
    left:      50%;
    transform: translateX(-50%);
    border:    5px solid transparent;
    border-top-color: #fdfce8;
    border-bottom: none;
}

@keyframes av-bubble-in {
    from { opacity: 0; transform: translateX(-50%) translateY(4px); }
    to   { opacity: 1; transform: translateX(-50%) translateY(0); }
}
.av-bubble.fading {
    animation: av-bubble-out 0.35s ease-in forwards;
}
@keyframes av-bubble-out {
    to { opacity: 0; transform: translateX(-50%) translateY(-3px); }
}

/* ── Speech bubble — dark mode (body.cw-dark toggled by MainLayout.razor.cs) ── */

body.cw-dark .av-bubble {
    background:  #1e1b2e;
    color:       #f0eeff;
    border-color: #6655a8;
    box-shadow:  2px 2px 0 #3d3260;
}

body.cw-dark .av-bubble::before {
    border-top-color: #6655a8;
}

body.cw-dark .av-bubble::after {
    border-top-color: #1e1b2e;
}

/* ═══════════════════════════════════════════════════════════════════════
   ANIMATION STATES
   Each animation uses --av-facing (1 or -1) so the same keyframe works
   for both left and right movement directions.
   ═══════════════════════════════════════════════════════════════════════ */

/* ── Idle breathing ───────────────────────────────────────────────────── */

@keyframes av-idle-breathe {
    0%,  100% { transform: scale(1.00) translateY(0px); }
    40%        { transform: scale(1.03) translateY(-2px); }
    70%        { transform: scale(0.98) translateY(1px); }
}
.av-idle .av-img {
    animation: av-idle-breathe 3.2s ease-in-out infinite;
}

/* ── Walking bob ──────────────────────────────────────────────────────── */

@keyframes av-walk-bob {
    0%   { transform: scaleX(var(--av-facing)) translateY(0px)  rotate(calc(var(--av-facing) * -1.5deg)); }
    50%  { transform: scaleX(var(--av-facing)) translateY(-5px) rotate(calc(var(--av-facing) *  1.5deg)); }
    100% { transform: scaleX(var(--av-facing)) translateY(0px)  rotate(calc(var(--av-facing) * -1.5deg)); }
}
.av-walk .av-img {
    animation: av-walk-bob 0.36s ease-in-out infinite;
}

/* ── Running bob ──────────────────────────────────────────────────────── */

@keyframes av-run-bob {
    0%   { transform: scaleX(var(--av-facing)) translateY(0px)  rotate(calc(var(--av-facing) * -3deg)); }
    50%  { transform: scaleX(var(--av-facing)) translateY(-8px) rotate(calc(var(--av-facing) *  3deg)); }
    100% { transform: scaleX(var(--av-facing)) translateY(0px)  rotate(calc(var(--av-facing) * -3deg)); }
}
.av-run .av-img {
    animation: av-run-bob 0.20s ease-in-out infinite;
}

/* ── Jump (squash & stretch, one-shot) ────────────────────────────────── */

@keyframes av-jump {
    0%   { transform: translateY(0px)    scale(1.00, 1.00); }
    12%  { transform: translateY(0px)    scale(1.15, 0.85); } /* anticipation squash */
    35%  { transform: translateY(-38px)  scale(0.88, 1.15); } /* rising stretch */
    60%  { transform: translateY(-42px)  scale(0.88, 1.15); } /* peak */
    80%  { transform: translateY(-4px)   scale(1.12, 0.88); } /* pre-land squash */
    100% { transform: translateY(0px)    scale(1.00, 1.00); } /* settle */
}
.av-jump .av-img {
    animation: av-jump 0.6s cubic-bezier(.36,.07,.19,.97) forwards;
}

/* ── Dancing ──────────────────────────────────────────────────────────── */

@keyframes av-dance {
    0%   { transform: translateY(0px)    rotate(-6deg)  scale(1.00); }
    25%  { transform: translateY(-10px)  rotate(0deg)   scale(1.06); }
    50%  { transform: translateY(0px)    rotate(6deg)   scale(1.00); }
    75%  { transform: translateY(-10px)  rotate(0deg)   scale(1.06); }
    100% { transform: translateY(0px)    rotate(-6deg)  scale(1.00); }
}
.av-dance .av-img {
    animation: av-dance 0.52s ease-in-out infinite;
}

/* ── Celebrating ──────────────────────────────────────────────────────── */

@keyframes av-celebrate {
    0%,  100% { transform: translateY(0px)    rotate(0deg)   scale(1.0); }
    20%        { transform: translateY(-22px)  rotate(-12deg) scale(1.1); }
    40%        { transform: translateY(-32px)  rotate( 12deg) scale(1.1); }
    60%        { transform: translateY(-20px)  rotate(-8deg)  scale(1.05); }
    80%        { transform: translateY(-10px)  rotate( 5deg)  scale(1.0); }
}
.av-celebrate .av-img {
    animation: av-celebrate 0.7s ease-in-out infinite;
}

/* ── Surprised pop (one-shot) ─────────────────────────────────────────── */

@keyframes av-surprised {
    0%   { transform: scale(1.0)  translateY(0px); }
    25%  { transform: scale(1.30) translateY(-6px); }
    55%  { transform: scale(0.93) translateY(1px); }
    75%  { transform: scale(1.05) translateY(-2px); }
    100% { transform: scale(1.0)  translateY(0px); }
}
.av-surprised .av-img {
    animation: av-surprised 0.8s ease-out forwards;
}

/* ── Sitting (no animation, just slight scale down) ───────────────────── */

.av-sit .av-img {
    transform:  scale(0.92) translateY(4px);
    transition: transform 0.4s ease;
}

/* ── Waving (arm raise + tilt, one-shot) ─────────────────────────────── */

@keyframes av-wave {
    0%   { transform: scaleX(var(--av-facing)) rotate(0deg)    translateY(0px); }
    15%  { transform: scaleX(var(--av-facing)) rotate(12deg)   translateY(-6px); }
    35%  { transform: scaleX(var(--av-facing)) rotate(-10deg)  translateY(-8px); }
    55%  { transform: scaleX(var(--av-facing)) rotate(10deg)   translateY(-6px); }
    75%  { transform: scaleX(var(--av-facing)) rotate(-6deg)   translateY(-3px); }
    100% { transform: scaleX(var(--av-facing)) rotate(0deg)    translateY(0px); }
}
.av-wave .av-img {
    animation: av-wave 1.2s ease-in-out forwards;
}

/* ── Water traversal ─────────────────────────────────────────────────── */

/* Applied to .av-inner when avatar is on a water tile */
@keyframes av-swim-bob {
    0%,100% { transform: translateY(0px)   rotate(-1.5deg) scaleX(var(--av-facing)); }
    35%     { transform: translateY(-5px)  rotate(1.5deg)  scaleX(var(--av-facing)); }
    70%     { transform: translateY(-2px)  rotate(-0.5deg) scaleX(var(--av-facing)); }
}
.av-in-water .av-inner {
    animation: av-swim-bob 1.4s ease-in-out infinite;
}
/* Blue-water visual tint on the image */
.av-in-water .av-img {
    filter:  brightness(0.82) saturate(1.5) hue-rotate(18deg);
    opacity: 0.88;
    transition: filter 0.4s ease, opacity 0.4s ease;
}
/* Ripple shadow replaces the normal ellipse shadow when in water */
.av-in-water .av-shadow {
    background: radial-gradient(ellipse,
        rgba(60, 140, 210, 0.40) 0%,
        rgba(60, 140, 210, 0.10) 50%,
        transparent 72%);
    width:  44px;
    height: 12px;
    animation: av-swim-bob 1.4s ease-in-out infinite reverse;
}

/* ═══════════════════════════════════════════════════════════════════════
   POPUP LAYER — Avatar hover card + zone tooltip
   Both live inside crownworld-root (world-space px), pointer-events: none
   ═══════════════════════════════════════════════════════════════════════ */

/* Shared hidden state — CSS transitions for smooth fade in/out */
.cw-popup-hidden {
    opacity:         0 !important;
    visibility:      hidden !important;
    pointer-events:  none !important;
    transition:      opacity 0.15s ease, visibility 0.15s ease;
}

/* ── Avatar hover card ─────────────────────────────────────────────────── */

.cw-hover-card {
    position:        absolute;
    z-index:         20;
    pointer-events:  none;
    display:         flex;
    align-items:     flex-start;
    gap:             10px;
    width:           220px;
    padding:         12px;
    background:      rgba(12, 8, 22, 0.93);
    border:          1px solid rgba(210, 175, 70, 0.55);
    border-radius:   10px;
    color:           #f0e8d0;
    font-family:     sans-serif;
    font-size:       12px;
    line-height:     1.45;
    box-shadow:      0 6px 24px rgba(0,0,0,0.65), 0 0 0 1px rgba(255,215,60,0.08);
    backdrop-filter: blur(5px);
    transition:      opacity 0.15s ease, visibility 0.15s ease;
}

.cw-hc-portrait {
    width:         58px;
    height:        58px;
    flex-shrink:   0;
    object-fit:    contain;
    border-radius: 7px;
    border:        1px solid rgba(255,215,60,0.2);
    background:    rgba(255,255,255,0.04);
}

.cw-hc-body {
    flex:       1;
    min-width:  0;
}

.cw-hc-name {
    display:       block;
    font-weight:   700;
    font-size:     13px;
    color:         #f5d060;
    white-space:   nowrap;
    overflow:      hidden;
    text-overflow: ellipsis;
}

.cw-hc-divider {
    height:     1px;
    margin:     6px 0;
    background: rgba(210,175,70,0.3);
}

.cw-hc-lore {
    margin:      0;
    color:       #ccc0a8;
    font-size:   11.5px;
}

.cw-hc-hint {
    display:     block;
    margin-top:  7px;
    font-size:   10.5px;
    color:       rgba(200,180,100,0.5);
    font-style:  italic;
}

/* ── Zone tooltip ──────────────────────────────────────────────────────── */

.cw-zone-tooltip {
    position:        absolute;
    z-index:         20;
    pointer-events:  none;
    max-width:       230px;
    padding:         8px 12px 10px;
    background:      rgba(8, 6, 18, 0.90);
    border:          1px solid rgba(180, 155, 55, 0.38);
    border-radius:   7px;
    color:           #e8ddb8;
    font-family:     sans-serif;
    font-size:       12px;
    line-height:     1.4;
    box-shadow:      0 3px 14px rgba(0,0,0,0.5);
    backdrop-filter: blur(4px);
    transition:      opacity 0.15s ease, visibility 0.15s ease;
}

.cw-zone-tooltip .cw-zone-icon {
    font-size:    14px;
    margin-right: 5px;
    vertical-align: middle;
}

.cw-zone-tooltip .cw-zone-name {
    display:       inline;
    font-weight:   700;
    font-size:     13px;
    color:         #f0c840;
}

.cw-zone-tooltip .cw-zone-lore {
    display:    block;
    margin:     5px 0 0;
    font-size:  11.5px;
    color:      #b8ac88;
}

/* ═══════════════════════════════════════════════════════════════════════
   INSPECT MODAL — full-viewport overlay (appended to <body>, position:fixed)
   ═══════════════════════════════════════════════════════════════════════ */

.cw-inspect-overlay {
    position:   fixed;
    inset:      0;
    z-index:    9000;
    display:    flex;
    align-items:     center;
    justify-content: center;
    background: rgba(4, 2, 12, 0.82);
    backdrop-filter: blur(6px);
    transition: opacity 0.2s ease, visibility 0.2s ease;
}

.cw-inspect-hidden {
    opacity:    0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
}

.cw-inspect-modal {
    position:      relative;
    display:       flex;
    align-items:   flex-start;
    gap:           24px;
    max-width:     640px;
    width:         90vw;
    padding:       28px;
    background:    rgba(14, 10, 26, 0.97);
    border:        1px solid rgba(210, 175, 70, 0.5);
    border-radius: 16px;
    box-shadow:    0 12px 48px rgba(0,0,0,0.8), 0 0 0 1px rgba(255,215,60,0.06);
    color:         #f0e8d0;
    font-family:   sans-serif;
}

.cw-inspect-close {
    position:      absolute;
    top:           12px;
    right:         14px;
    background:    none;
    border:        none;
    color:         rgba(200,180,100,0.6);
    font-size:     18px;
    cursor:        pointer;
    line-height:   1;
    padding:       4px 6px;
    border-radius: 4px;
    transition:    color 0.15s, background 0.15s;
}
.cw-inspect-close:hover {
    color:       #f5d060;
    background:  rgba(255,215,60,0.08);
}

.cw-inspect-portrait {
    width:         140px;
    height:        140px;
    flex-shrink:   0;
    object-fit:    contain;
    border-radius: 10px;
    border:        1px solid rgba(210,175,70,0.3);
    background:    rgba(255,255,255,0.04);
}

.cw-inspect-content {
    flex: 1;
    min-width: 0;
}

.cw-inspect-name {
    font-size:   20px;
    font-weight: 700;
    color:       #f5d060;
    line-height: 1.2;
}

.cw-inspect-alt-name {
    font-size:  13px;
    color:      rgba(200,180,100,0.55);
    margin-top: 2px;
}

.cw-inspect-hr {
    border:     none;
    border-top: 1px solid rgba(210,175,70,0.25);
    margin:     12px 0;
}

.cw-inspect-lore {
    margin:      0;
    font-size:   13.5px;
    line-height: 1.6;
    color:       #ccc0a8;
    max-height:  200px;
    overflow-y:  auto;
    scrollbar-width: thin;
    scrollbar-color: rgba(210,175,70,0.3) transparent;
}

.cw-inspect-footer {
    margin-top: 16px;
}

.cw-inspect-twitch {
    display:         inline-flex;
    align-items:     center;
    gap:             5px;
    padding:         6px 14px;
    background:      rgba(145, 70, 255, 0.18);
    border:          1px solid rgba(145, 70, 255, 0.4);
    border-radius:   6px;
    color:           #bf94ff;
    font-size:       12px;
    font-weight:     600;
    text-decoration: none;
    transition:      background 0.15s, border-color 0.15s;
}
.cw-inspect-twitch:hover {
    background:   rgba(145, 70, 255, 0.32);
    border-color: rgba(145, 70, 255, 0.7);
}

.cw-inspect-tiktok {
    display:         inline-flex;
    align-items:     center;
    gap:             5px;
    padding:         6px 14px;
    background:      rgba(105, 201, 208, 0.15);
    border:          1px solid rgba(105, 201, 208, 0.4);
    border-radius:   6px;
    color:           #69C9D0;
    font-size:       12px;
    font-weight:     600;
    text-decoration: none;
    transition:      background 0.15s, border-color 0.15s;
}
.cw-inspect-tiktok:hover {
    background:   rgba(105, 201, 208, 0.30);
    border-color: rgba(105, 201, 208, 0.7);
}

.cw-inspect-youtube {
    display:         inline-flex;
    align-items:     center;
    gap:             5px;
    padding:         6px 14px;
    background:      rgba(255, 70, 70, 0.15);
    border:          1px solid rgba(255, 70, 70, 0.4);
    border-radius:   6px;
    color:           #ff7070;
    font-size:       12px;
    font-weight:     600;
    text-decoration: none;
    transition:      background 0.15s, border-color 0.15s;
}
.cw-inspect-youtube:hover {
    background:   rgba(255, 70, 70, 0.30);
    border-color: rgba(255, 70, 70, 0.7);
}

/* ═══════════════════════════════════════════════════════════════════════
   ZONE INSPECT MODAL — full-viewport overlay for zone lore
   Shares the overlay/hidden classes with the avatar inspect modal.
   ═══════════════════════════════════════════════════════════════════════ */

.cw-zone-modal {
    position:      relative;
    max-width:     480px;
    width:         88vw;
    padding:       28px;
    background:    rgba(14, 10, 26, 0.97);
    border:        1px solid rgba(210, 175, 70, 0.5);
    border-radius: 16px;
    box-shadow:    0 12px 48px rgba(0,0,0,0.8), 0 0 0 1px rgba(255,215,60,0.06);
    color:         #f0e8d0;
    font-family:   sans-serif;
}

.cw-zone-modal-header {
    display:     flex;
    align-items: center;
    gap:         8px;
}

.cw-zone-modal-icon {
    font-size: 22px;
}

.cw-zone-modal-name {
    font-size:   20px;
    font-weight: 700;
    color:       #f5d060;
    line-height: 1.2;
}

.cw-zone-modal-lore {
    margin:      0;
    font-size:   13.5px;
    line-height: 1.7;
    color:       #ccc0a8;
    max-height:  260px;
    overflow-y:  auto;
    scrollbar-width: thin;
    scrollbar-color: rgba(210,175,70,0.3) transparent;
}

/* ═══════════════════════════════════════════════════════════════════════
   Crownworld Grid Editor — Admin Page
   ═══════════════════════════════════════════════════════════════════════ */

.cw-editor-page {
    display:        flex;
    flex-direction: column;
    height:         calc(100vh - 60px); /* fill viewport minus header */
    gap:            0;
}

/* ── Toolbar ──────────────────────────────────────────────────────────── */

.cw-editor-toolbar {
    padding:          0.5rem 0.75rem;
    background:       var(--rz-base-background-color, #1e1e2e);
    border-bottom:    1px solid rgba(255,255,255,0.08);
    flex-shrink:      0;
}

/* ── Status bar ───────────────────────────────────────────────────────── */

.cw-editor-status {
    padding:       0.25rem 0.75rem;
    font-size:     0.75rem;
    color:         rgba(255,255,255,0.55);
    background:    var(--rz-base-background-color, #1e1e2e);
    border-bottom: 1px solid rgba(255,255,255,0.05);
    flex-shrink:   0;
}

.cw-editor-status b { color: rgba(255,255,255,0.85); }

.cw-editor-hint {
    font-style: italic;
    color: rgba(255,255,255,0.35);
}

/* ── Canvas container ─────────────────────────────────────────────────── */

.cw-editor-canvas-wrap {
    flex:           1 1 auto;
    overflow:       hidden;
    display:        flex;
    align-items:    flex-start;
    justify-content: flex-start;
    background:     #111;
    cursor:         crosshair;
    min-height:     0; /* allow flex child to shrink */
}

.cw-editor-canvas-wrap canvas {
    display: block;
}

/* ── Zone color swatch (next to dropdown) ─────────────────────────────── */

.cw-zone-swatch {
    display:       inline-block;
    width:         18px;
    height:        18px;
    border-radius: 3px;
    border:        1px solid rgba(255,255,255,0.25);
    vertical-align: middle;
    flex-shrink:   0;
}

/* ── Legend row ───────────────────────────────────────────────────────── */

.cw-editor-legend {
    display:     flex;
    flex-wrap:   wrap;
    gap:         0.4rem 0.75rem;
    padding:     0.3rem 0.75rem;
    font-size:   0.72rem;
    color:       rgba(255,255,255,0.55);
    background:  var(--rz-base-background-color, #1e1e2e);
    border-top:  1px solid rgba(255,255,255,0.05);
    flex-shrink: 0;
}

.cw-legend-item {
    display:     flex;
    align-items: center;
    gap:         0.3rem;
}

.cw-legend-swatch {
    display:       inline-block;
    width:         14px;
    height:        14px;
    border-radius: 2px;
    flex-shrink:   0;
}