/* ═══════════════════════════════════════════════════════
   ALQUIMIA INFINITA — Pixel Alchemy RPG Aesthetic
   Complete redesign with canvas drag-drop system
═══════════════════════════════════════════════════════ */

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

:root {
    /* Backgrounds */
    --bg-void:    #07050e;
    --bg-deep:    #0d0a1c;
    --bg-panel:   #151028;
    --bg-card:    #1e1838;
    --bg-raised:  #271f48;
    --bg-hover:   #32275c;

    /* Borders */
    --border-subtle: rgba(160, 120, 255, 0.12);
    --border-dim:    rgba(160, 120, 255, 0.25);
    --border-mid:    rgba(160, 120, 255, 0.45);
    --border-bright: rgba(200, 160, 255, 0.7);

    /* Accent palette — warm alchemy */
    --gold:     #f0b429;
    --gold-dim: #9a7210;
    --gold-glow: rgba(240, 180, 41, 0.35);
    --fire:     #ff5722;
    --fire-dim: rgba(255, 87, 34, 0.2);
    --water:    #22aaff;
    --water-dim: rgba(34, 170, 255, 0.2);
    --magic:    #a040ff;
    --magic-dim: rgba(160, 64, 255, 0.2);
    --emerald:  #22cc88;
    --ruby:     #ff2244;

    /* Text */
    --text:        #e8d8c0;
    --text-bright: #fff8ec;
    --text-dim:    #7060a0;
    --text-gold:   #f5c842;

    /* Rarity */
    --r-common:    #7060a0;
    --r-rare:      #22aaff;
    --r-epic:      #a040ff;
    --r-legendary: #f0b429;

    /* Spacing */
    --radius-sm: 4px;
    --radius-md: 8px;
    --radius-lg: 12px;

    /* Typography */
    --font-pixel: 'Press Start 2P', monospace;
    --font-body: 'Nunito', sans-serif;
}

html, body {
    height: 100%;
    overflow: hidden;
}

body {
    font-family: var(--font-body);
    background: var(--bg-void);
    color: var(--text);
    font-size: 14px;
    line-height: 1.5;
    overflow: hidden;
    overscroll-behavior: none;
}

button, input, select, textarea {
    -webkit-tap-highlight-color: transparent;
}

:focus-visible {
    outline: 2px solid var(--gold);
    outline-offset: 2px;
}

/* ─── SCANLINES OVERLAY ─── */
.scanlines {
    position: fixed;
    inset: 0;
    background: repeating-linear-gradient(
        0deg,
        transparent,
        transparent 2px,
        rgba(0,0,0,0.04) 2px,
        rgba(0,0,0,0.04) 4px
    );
    pointer-events: none;
    z-index: 9999;
}

/* ─── PARTICLES ─── */
.particles {
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: 1;
    overflow: hidden;
}

.particle {
    position: absolute;
    width: 3px;
    height: 3px;
    border-radius: 0; /* pixel style */
    opacity: 0;
    animation: floatUp 10s linear infinite;
}

@keyframes floatUp {
    0%   { transform: translateY(100vh) scaleX(1); opacity: 0; }
    5%   { opacity: 0.8; }
    90%  { opacity: 0.6; }
    100% { transform: translateY(-20px) scaleX(0); opacity: 0; }
}

/* ═══════════════════════════════════════
   HEADER
═══════════════════════════════════════ */
.game-header {
    position: relative;
    z-index: 200;
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 0 1.5rem;
    height: 64px;
    background: var(--bg-panel);
    border-bottom: 2px solid var(--border-dim);
    box-shadow: 0 4px 0 rgba(0,0,0,0.4), 0 0 30px rgba(160,64,255,0.08);
    flex-shrink: 0;
}

.logo {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    flex-shrink: 0;
}

.logo-flask {
    font-size: 2rem;
    filter: drop-shadow(0 0 8px var(--magic));
    animation: flaskPulse 3s ease-in-out infinite;
}

@keyframes flaskPulse {
    0%, 100% { filter: drop-shadow(0 0 6px var(--magic)); }
    50% { filter: drop-shadow(0 0 16px var(--gold)); transform: translateY(-2px); }
}

.logo-title {
    font-family: var(--font-pixel);
    font-size: 0.5rem;
    line-height: 1.8;
    color: var(--text-gold);
    text-shadow: 0 0 10px var(--gold-dim), 2px 2px 0 rgba(0,0,0,0.5);
    letter-spacing: 0.05em;
}

/* ─── TAB NAV ─── */
.tab-nav {
    display: flex;
    gap: 4px;
    flex: 1;
    justify-content: center;
}

.tab {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 0.5rem 1rem;
    background: transparent;
    border: 2px solid var(--border-subtle);
    border-radius: var(--radius-sm);
    color: var(--text-dim);
    font-family: var(--font-pixel);
    font-size: 0.45rem;
    letter-spacing: 0.05em;
    cursor: pointer;
    transition: all 0.15s;
    white-space: nowrap;
}

.tab:hover {
    border-color: var(--border-mid);
    color: var(--text);
    background: var(--bg-card);
}

.tab.active {
    background: var(--bg-raised);
    border-color: var(--gold);
    color: var(--gold);
    box-shadow: 0 0 12px var(--gold-glow), inset 0 0 8px rgba(240,180,41,0.05);
}

.tab-icon { font-size: 1rem; }

/* ─── STATS BAR ─── */
.stats-bar {
    display: flex;
    gap: 6px;
    flex-shrink: 0;
}

.stat-chip {
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 4px 10px;
    background: var(--bg-card);
    border: 2px solid var(--border-subtle);
    border-radius: var(--radius-sm);
    min-width: 64px;
}

.stat-chip:hover { border-color: var(--border-dim); }

.fire-chip { border-color: rgba(255, 87, 34, 0.3); }
.fire-chip .chip-val { color: var(--fire); }
.coin-chip { border-color: rgba(240,180,41,.35); }
.coin-chip .chip-val { color: var(--gold); }
.hint-chip { border-color: rgba(34,170,255,.35); }
.hint-chip .chip-val { color: var(--water); }

.chip-icon { font-size: 1rem; }
.chip-val {
    font-family: var(--font-pixel);
    font-size: 0.6rem;
    color: var(--gold);
    min-width: 16px;
    text-align: center;
}
.chip-label {
    font-size: 0.65rem;
    color: var(--text-dim);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

/* ═══════════════════════════════════════
   MAIN LAYOUT
═══════════════════════════════════════ */
.game-main {
    position: relative;
    z-index: 10;
    height: calc(100vh - 64px);
    overflow: hidden;
}

.tab-pane {
    display: none;
    height: 100%;
    overflow: hidden;
}

.tab-pane.active {
    display: block;
}

/* ═══════════════════════════════════════
   LAB TAB
═══════════════════════════════════════ */
.lab-layout {
    display: grid;
    grid-template-columns: 320px minmax(0, 1fr) 360px;
    grid-template-rows: minmax(0, 1fr) minmax(240px, 30vh);
    grid-template-areas:
        "quest canvas elements"
        "quest insights insights";
    height: 100%;
    overflow: hidden;
}

.lab-quest-rail {
    grid-area: quest;
    width: 320px;
    min-width: 0;
    display: flex;
    flex-direction: column;
    background: linear-gradient(180deg, rgba(21,16,40,.98), rgba(13,10,28,.98));
    border-right: 2px solid var(--border-dim);
    overflow: hidden;
}

.quest-rail-head {
    padding: 12px 14px 10px;
    border-bottom: 2px solid var(--border-subtle);
    background: rgba(160,64,255,.06);
}

.quest-rail-title {
    font-family: var(--font-pixel);
    font-size: .48rem;
    color: var(--gold);
    letter-spacing: .05em;
}

.quest-rail-sub {
    margin-top: 6px;
    font-size: .72rem;
    color: var(--text-dim);
}

.quest-rail-scroll {
    flex: 1;
    overflow-y: auto;
    padding: 10px 12px 16px;
    scrollbar-width: thin;
    scrollbar-color: var(--border-mid) transparent;
}

.quest-rail-scroll::-webkit-scrollbar { width: 5px; }
.quest-rail-scroll::-webkit-scrollbar-thumb {
    background: var(--border-mid);
    border-radius: 3px;
}

.lab-collections-section {
    margin-top: 0;
}

/* ─── CANVAS AREA ─── */
.canvas-area {
    grid-area: canvas;
    min-width: 0;
    min-height: 0;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    border-right: 2px solid var(--border-dim);
    background: var(--bg-deep);
    position: relative;
}

.canvas-area::before {
    content: '';
    position: absolute;
    inset: 0;
    background-image:
        radial-gradient(circle at 20% 30%, rgba(160,64,255,0.04) 0%, transparent 50%),
        radial-gradient(circle at 80% 70%, rgba(240,180,41,0.03) 0%, transparent 50%);
    pointer-events: none;
}

/* ─── CANVAS TOOLBAR ─── */
.canvas-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 8px 16px;
    background: var(--bg-panel);
    border-bottom: 2px solid var(--border-subtle);
    flex-shrink: 0;
    height: 44px;
}

.toolbar-eyebrow {
    font-family: var(--font-pixel);
    font-size: 0.42rem;
    color: var(--text-dim);
    letter-spacing: 0.08em;
}

.toolbar-right {
    display: flex;
    align-items: center;
    gap: 12px;
}

.progress-wrap {
    display: flex;
    align-items: center;
    gap: 8px;
}

.progress-track {
    width: 120px;
    height: 10px;
    background: var(--bg-card);
    border: 2px solid var(--border-dim);
    border-radius: 0;
    overflow: hidden;
}

.progress-fill {
    height: 100%;
    background: linear-gradient(90deg, var(--magic) 0%, var(--gold) 100%);
    transition: width 0.5s ease;
    width: 0%;
}

.progress-label {
    font-family: var(--font-pixel);
    font-size: 0.45rem;
    color: var(--gold);
}

.btn-tool {
    padding: 4px 10px;
    background: var(--bg-card);
    border: 2px solid var(--border-dim);
    border-radius: var(--radius-sm);
    color: var(--text-dim);
    font-family: var(--font-body);
    font-size: 0.75rem;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.15s;
}

.btn-tool:hover {
    border-color: var(--ruby);
    color: var(--ruby);
}

.btn-tool:disabled {
    opacity: .45;
    cursor: not-allowed;
    border-color: var(--border-subtle);
    color: var(--text-dim);
}

/* ─── LAB CANVAS ─── */
.lab-canvas {
    flex: 1;
    position: relative;
    overflow: hidden;
    cursor: default;
    /* Subtle grid pattern */
    background-image:
        linear-gradient(rgba(160,120,255,0.04) 1px, transparent 1px),
        linear-gradient(90deg, rgba(160,120,255,0.04) 1px, transparent 1px);
    background-size: 40px 40px;
}

/* ─── CANVAS HINT ─── */
.canvas-hint {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    pointer-events: none;
    opacity: 0.4;
    text-align: center;
}

.canvas-hint.hidden { display: none; }

.hint-glyph {
    font-size: 4rem;
    margin-bottom: 1rem;
    animation: hintFloat 3s ease-in-out infinite;
}

@keyframes hintFloat {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-12px); }
}

.hint-primary {
    font-family: var(--font-pixel);
    font-size: 0.5rem;
    color: var(--text-dim);
    margin-bottom: 0.5rem;
    letter-spacing: 0.05em;
}

.hint-secondary {
    font-size: 0.85rem;
    color: var(--text-dim);
    max-width: 300px;
}

.hint-arrow {
    font-size: 2rem;
    color: var(--gold);
    margin-top: 1rem;
    animation: arrowPulse 1.5s ease-in-out infinite;
}

@keyframes arrowPulse {
    0%, 100% { transform: translateX(0); opacity: 0.6; }
    50% { transform: translateX(8px); opacity: 1; }
}

/* ─── CANVAS TOKENS ─── */
.canvas-token {
    position: absolute;
    width: 80px;
    padding: 8px 4px 6px;
    background: var(--bg-card);
    border: 2px solid var(--border-dim);
    border-radius: var(--radius-md);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    cursor: grab;
    user-select: none;
    transition: box-shadow 0.15s, border-color 0.15s;
    will-change: transform;
}

.canvas-token:hover {
    border-color: var(--border-mid);
    box-shadow: 0 0 12px rgba(160,64,255,0.2);
}

.canvas-token.dragging {
    cursor: grabbing;
    box-shadow: 0 8px 24px rgba(0,0,0,0.6), 0 0 20px rgba(160,64,255,0.3);
    border-color: var(--magic);
    z-index: 500 !important;
    transform: scale(1.08) rotate(2deg);
}

.canvas-token.pending-combine {
    cursor: wait;
    pointer-events: none;
    opacity: .55;
    filter: saturate(.7);
    box-shadow: 0 0 0 1px rgba(240,180,41,.08) inset;
}

.canvas-token.overlap-target {
    border-color: var(--gold);
    box-shadow: 0 0 20px var(--gold-glow);
    animation: overlapPulse 0.4s ease-in-out infinite;
}

@keyframes overlapPulse {
    0%, 100% { box-shadow: 0 0 15px var(--gold-glow); }
    50% { box-shadow: 0 0 30px var(--gold-glow); }
}

.canvas-token.combining {
    animation: tokenCombine 0.35s ease-in forwards;
}

@keyframes tokenCombine {
    0%  { transform: scale(1); opacity: 1; }
    50% { transform: scale(1.3); opacity: 0.8; filter: brightness(2); }
    100% { transform: scale(0); opacity: 0; }
}

.canvas-token.shaking {
    animation: tokenShake 0.5s ease-out;
}

@keyframes tokenShake {
    0%, 100% { transform: translateX(0); }
    20% { transform: translateX(-6px) rotate(-2deg); }
    40% { transform: translateX(6px) rotate(2deg); }
    60% { transform: translateX(-4px) rotate(-1deg); }
    80% { transform: translateX(4px) rotate(1deg); }
}

@keyframes tokenAppear {
    0%  { transform: scale(0) rotate(-15deg); opacity: 0; }
    70% { transform: scale(1.15) rotate(3deg); opacity: 1; }
    100% { transform: scale(1) rotate(0); opacity: 1; }
}

@keyframes tokenDisappear {
    0%  { transform: scale(1); opacity: 1; }
    100% { transform: scale(0) rotate(10deg); opacity: 0; }
}

.canvas-token .token-icon { font-size: 1.8rem; line-height: 1; }
.canvas-token .token-name {
    font-size: 0.6rem;
    font-weight: 700;
    text-align: center;
    color: var(--text);
    line-height: 1.2;
    max-width: 70px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Rarity borders */
.canvas-token.rarity-rare    { border-color: rgba(34,170,255,0.5); }
.canvas-token.rarity-epic    { border-color: rgba(160,64,255,0.6); box-shadow: 0 0 8px rgba(160,64,255,0.15); }
.canvas-token.rarity-legendary {
    border-color: var(--gold);
    box-shadow: 0 0 12px var(--gold-glow);
    animation: legendaryGlow 2s ease-in-out infinite;
}

@keyframes legendaryGlow {
    0%, 100% { box-shadow: 0 0 10px var(--gold-glow); }
    50% { box-shadow: 0 0 20px var(--gold-glow), 0 0 40px rgba(240,180,41,0.1); }
}

.combine-marker {
    position: absolute;
    width: 110px;
    min-height: 72px;
    transform: translate(-50%, -50%);
    padding: 8px 8px 7px;
    background: rgba(21,16,40,.96);
    border: 2px solid rgba(240,180,41,.28);
    border-radius: var(--radius-md);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    pointer-events: none;
    box-shadow: 0 10px 24px rgba(0,0,0,.35);
}

.combine-marker[data-phase="active"] {
    border-color: rgba(160,64,255,.4);
}

.combine-marker[data-phase="success"] {
    border-color: rgba(34,204,136,.4);
}

.combine-marker[data-phase="failed"] {
    border-color: rgba(255,87,34,.35);
}

.combine-marker-icons {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 1rem;
    color: var(--text);
}

.combine-marker-loader {
    display: flex;
    gap: 4px;
}

.combine-marker-loader span {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--gold);
    opacity: .4;
    animation: combineLoaderDot 1s ease-in-out infinite;
}

.combine-marker-loader span:nth-child(2) { animation-delay: .15s; }
.combine-marker-loader span:nth-child(3) { animation-delay: .3s; }

.combine-marker-status {
    font-size: .62rem;
    font-weight: 700;
    color: var(--text-dim);
    text-align: center;
}

@keyframes combineLoaderDot {
    0%, 100% { transform: translateY(0); opacity: .35; }
    50% { transform: translateY(-4px); opacity: 1; }
}

/* ─── COMBINATION SPARK ─── */
.combo-spark {
    position: absolute;
    width: 60px;
    height: 60px;
    border-radius: 50%;
    pointer-events: none;
    transform: translate(-50%, -50%);
    animation: sparkExplode 0.6s ease-out forwards;
    z-index: 200;
}

@keyframes sparkExplode {
    0%  { width: 0; height: 0; opacity: 1; box-shadow: 0 0 0 0 var(--gold); }
    50% { width: 80px; height: 80px; opacity: 0.8; box-shadow: 0 0 20px 10px var(--gold); }
    100% { width: 120px; height: 120px; opacity: 0; box-shadow: 0 0 40px 20px transparent; }
}

/* ─── DISCOVERIES BAR ─── */
.discoveries-bar {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 16px;
    background: var(--bg-panel);
    border-top: 2px solid var(--border-subtle);
    flex-shrink: 0;
    height: 40px;
    overflow: hidden;
}

.bar-label {
    font-family: var(--font-pixel);
    font-size: 0.4rem;
    color: var(--text-dim);
    flex-shrink: 0;
    letter-spacing: 0.05em;
}

.discoveries-list {
    display: flex;
    gap: 6px;
    overflow-x: auto;
    scrollbar-width: none;
    flex: 1;
}
.discoveries-list::-webkit-scrollbar { display: none; }

.discovery-item {
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 3px 8px;
    background: var(--bg-card);
    border: 2px solid var(--border-subtle);
    border-radius: var(--radius-sm);
    flex-shrink: 0;
    font-size: 0.75rem;
    animation: slideFromLeft 0.3s ease-out;
    cursor: pointer;
    transition: border-color .15s, background .15s, transform .1s;
    user-select: none;
}
.discovery-item:hover {
    border-color: var(--accent-gold);
    background: rgba(240,180,41,.12);
    transform: translateY(-2px);
}
.discovery-item:active { transform: scale(.94); }

@keyframes slideFromLeft {
    from { transform: translateX(-20px); opacity: 0; }
    to   { transform: translateX(0);     opacity: 1; }
}

/* ═══════════════════════════════════════
   ELEMENTS PANEL
═══════════════════════════════════════ */
.elements-panel {
    grid-area: elements;
    width: 360px;
    min-width: 0;
    min-height: 0;
    display: flex;
    flex-direction: column;
    background: var(--bg-panel);
    overflow: hidden;
}

.panel-top {
    padding: 10px 12px 0;
    flex-shrink: 0;
}

.element-picker-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: .75rem;
    margin-bottom: .6rem;
}

.element-picker-subtitle {
    color: var(--text-dim);
    font-size: .72rem;
    line-height: 1.35;
}

.element-search-row {
    display: flex;
    gap: .5rem;
    align-items: center;
}

.atlas-open-btn {
    flex-shrink: 0;
    min-width: 88px;
}

.element-picker-meta,
.atlas-meta {
    margin-top: .45rem;
    color: var(--text-dim);
    font-size: .66rem;
}

.search-input {
    width: 100%;
    padding: 7px 12px;
    background: var(--bg-card);
    border: 2px solid var(--border-dim);
    border-radius: var(--radius-sm);
    color: var(--text);
    font-family: var(--font-body);
    font-size: 0.8rem;
    transition: border-color 0.15s;
    outline: none;
}
.search-input:focus { border-color: var(--magic); }
.search-input::placeholder { color: var(--text-dim); }

.filters {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    padding: 8px 0 4px;
}

.filter {
    padding: 3px 8px;
    background: var(--bg-card);
    border: 2px solid var(--border-subtle);
    border-radius: var(--radius-sm);
    color: var(--text-dim);
    font-family: var(--font-body);
    font-size: 0.7rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.15s;
}
.filter:hover { border-color: var(--border-mid); color: var(--text); }
.filter.active {
    background: var(--bg-raised);
    border-color: var(--magic);
    color: var(--magic);
}

/* ─── ELEMENTS GRID ─── */
.elements-grid {
    flex: 1;
    overflow-y: auto;
    padding: 10px 12px;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
    align-content: start;
    scrollbar-width: thin;
    scrollbar-color: var(--border-mid) transparent;
}

.elements-grid::-webkit-scrollbar { width: 4px; }
.elements-grid::-webkit-scrollbar-thumb {
    background: var(--border-mid);
    border-radius: 2px;
}

.element-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 92px;
    min-width: 0;
    padding: 10px 6px 8px;
    background: var(--bg-card);
    border: 2px solid var(--border-subtle);
    border-radius: var(--radius-md);
    cursor: pointer;
    transition: all 0.15s;
    user-select: none;
    position: relative;
    overflow: hidden;
}

.element-card--atlas {
    min-height: 116px;
    padding: 12px 10px 10px;
    align-items: flex-start;
    text-align: left;
}

.element-hover-tooltip {
    position: fixed;
    left: 0;
    top: 0;
    z-index: 6500;
    width: min(280px, calc(100vw - 32px));
    padding: .8rem .85rem;
    background: linear-gradient(180deg, rgba(28,20,52,.98), rgba(13,10,26,.98));
    border: 2px solid rgba(190,182,220,.16);
    border-radius: var(--radius-md);
    box-shadow: 0 16px 36px rgba(0,0,0,.42), 0 0 0 1px rgba(255,255,255,.04) inset;
    pointer-events: none;
    opacity: 0;
    transform: translateY(6px) scale(.98);
    transition: opacity .14s ease, transform .14s ease, border-color .14s ease, box-shadow .14s ease;
}
.element-hover-tooltip.visible {
    opacity: 1;
    transform: translateY(0) scale(1);
}
.element-hover-tooltip::before {
    content: '';
    position: absolute;
    inset: 1px;
    border-radius: inherit;
    background: linear-gradient(180deg, rgba(255,255,255,.04), transparent 30%);
    pointer-events: none;
}
.element-hover-tooltip::after {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background: linear-gradient(135deg, rgba(160,64,255,.08), rgba(240,180,41,.04));
    pointer-events: none;
}

.element-hover-tooltip.rarity-common {
    border-color: rgba(190,182,220,.16);
}
.element-hover-tooltip.rarity-common .element-tooltip-icon {
    filter: drop-shadow(0 0 8px rgba(190,182,220,.08));
}

.element-hover-tooltip.rarity-rare {
    border-color: rgba(34,170,255,.34);
    box-shadow: 0 16px 36px rgba(0,0,0,.42), 0 0 22px rgba(34,170,255,.08), 0 0 0 1px rgba(34,170,255,.08) inset;
}
.element-hover-tooltip.rarity-rare::after {
    background: linear-gradient(135deg, rgba(34,170,255,.12), rgba(160,64,255,.03));
}
.element-hover-tooltip.rarity-rare .element-tooltip-name {
    color: #bfe9ff;
}
.element-hover-tooltip.rarity-rare .element-tooltip-icon {
    filter: drop-shadow(0 0 12px rgba(34,170,255,.22));
}

.element-hover-tooltip.rarity-epic {
    border-color: rgba(160,64,255,.4);
    box-shadow: 0 16px 36px rgba(0,0,0,.42), 0 0 24px rgba(160,64,255,.12), 0 0 0 1px rgba(160,64,255,.08) inset;
}
.element-hover-tooltip.rarity-epic.visible {
    animation: tooltipEpicPulse 2.4s ease-in-out infinite;
}
.element-hover-tooltip.rarity-epic::after {
    background: linear-gradient(135deg, rgba(160,64,255,.16), rgba(92,45,180,.06));
}
.element-hover-tooltip.rarity-epic .element-tooltip-name {
    color: #ebddff;
}
.element-hover-tooltip.rarity-epic .element-tooltip-icon {
    filter: drop-shadow(0 0 14px rgba(160,64,255,.26));
}

.element-hover-tooltip.rarity-legendary {
    border-color: rgba(240,180,41,.44);
    box-shadow: 0 18px 42px rgba(0,0,0,.46), 0 0 28px rgba(240,180,41,.18), 0 0 0 1px rgba(240,180,41,.12) inset;
}
.element-hover-tooltip.rarity-legendary.visible {
    animation: tooltipLegendaryGlow 2.1s ease-in-out infinite;
}
.element-hover-tooltip.rarity-legendary::after {
    background: linear-gradient(135deg, rgba(240,180,41,.16), rgba(255,118,51,.06));
}
.element-hover-tooltip.rarity-legendary .element-tooltip-name {
    color: #ffe8aa;
}
.element-hover-tooltip.rarity-legendary .element-tooltip-icon {
    filter: drop-shadow(0 0 16px rgba(240,180,41,.34));
}
.element-tooltip-top {
    position: relative;
    z-index: 1;
    display: flex;
    gap: .7rem;
    align-items: flex-start;
}
.element-tooltip-icon {
    font-size: 1.8rem;
    line-height: 1;
    filter: drop-shadow(0 0 10px rgba(240,180,41,.12));
}
.element-tooltip-name {
    color: var(--text-bright);
    font-size: .85rem;
    font-weight: 900;
    line-height: 1.2;
    margin-bottom: .35rem;
}
.element-tooltip-badges {
    display: flex;
    flex-wrap: wrap;
    gap: .35rem;
}
.element-tooltip-badge {
    display: inline-flex;
    align-items: center;
    padding: 3px 7px;
    border-radius: 999px;
    font-size: .58rem;
    font-weight: 800;
    letter-spacing: .06em;
    text-transform: uppercase;
    background: rgba(255,255,255,.05);
    border: 1px solid rgba(255,255,255,.08);
    color: var(--text-dim);
}
.element-tooltip-badge.subtle {
    color: #ddd4ff;
    border-color: rgba(160,120,255,.24);
}
.element-tooltip-badge.rarity-common { color: var(--text-dim); }
.element-tooltip-badge.rarity-rare { color: var(--water); border-color: rgba(34,170,255,.3); }
.element-tooltip-badge.rarity-epic { color: var(--magic); border-color: rgba(160,64,255,.35); }
.element-tooltip-badge.rarity-legendary { color: var(--gold); border-color: rgba(240,180,41,.36); }
.element-tooltip-flavor {
    position: relative;
    z-index: 1;
    margin-top: .65rem;
    color: var(--text);
    font-size: .72rem;
    line-height: 1.45;
}
.element-tooltip-recipe {
    position: relative;
    z-index: 1;
    margin-top: .7rem;
    padding-top: .65rem;
    border-top: 1px solid rgba(255,255,255,.08);
}
.element-tooltip-recipe-title {
    color: var(--gold);
    font-size: .62rem;
    font-weight: 800;
    margin-bottom: .45rem;
    letter-spacing: .05em;
}
.element-tooltip-formula {
    display: flex;
    align-items: center;
    gap: .35rem;
    flex-wrap: wrap;
}
.element-tooltip-chip {
    display: inline-flex;
    align-items: center;
    gap: .3rem;
    padding: 4px 8px;
    border-radius: 999px;
    background: rgba(255,255,255,.05);
    border: 1px solid rgba(255,255,255,.07);
    color: var(--text);
    font-size: .62rem;
    font-weight: 700;
}
.element-tooltip-plus {
    color: var(--text-dim);
    font-size: .72rem;
    font-weight: 900;
}

@keyframes tooltipEpicPulse {
    0%, 100% { box-shadow: 0 16px 36px rgba(0,0,0,.42), 0 0 18px rgba(160,64,255,.08), 0 0 0 1px rgba(160,64,255,.08) inset; }
    50% { box-shadow: 0 16px 36px rgba(0,0,0,.42), 0 0 28px rgba(160,64,255,.16), 0 0 0 1px rgba(160,64,255,.12) inset; }
}

@keyframes tooltipLegendaryGlow {
    0%, 100% { box-shadow: 0 18px 42px rgba(0,0,0,.46), 0 0 22px rgba(240,180,41,.12), 0 0 0 1px rgba(240,180,41,.12) inset; }
    50% { box-shadow: 0 18px 42px rgba(0,0,0,.46), 0 0 36px rgba(240,180,41,.24), 0 0 0 1px rgba(240,180,41,.18) inset; }
}

.element-card:hover {
    background: var(--bg-raised);
    border-color: var(--border-mid);
    transform: translateY(-2px);
    box-shadow: 0 4px 8px rgba(0,0,0,0.3);
}

.element-card:active {
    transform: translateY(0) scale(0.95);
}

.element-card.selected {
    border-color: var(--gold);
    background: rgba(240,180,41,0.08);
}

.element-card.just-added {
    animation: cardJustAdded 0.4s ease-out;
}

.element-card.drag-source-active {
    opacity: .45;
    transform: scale(.96);
}

.picker-drag-ghost {
    position: fixed;
    left: 0;
    top: 0;
    z-index: 6400;
    transform: translate(-50%, -50%);
    display: inline-flex;
    align-items: center;
    gap: .45rem;
    padding: .55rem .75rem;
    border-radius: 999px;
    background: linear-gradient(180deg, rgba(28,20,52,.96), rgba(14,11,26,.98));
    border: 2px solid rgba(240,180,41,.24);
    color: var(--text-bright);
    font-size: .72rem;
    font-weight: 800;
    pointer-events: none;
    box-shadow: 0 14px 30px rgba(0,0,0,.35);
    white-space: nowrap;
}

.picker-drag-ghost-icon {
    font-size: 1.15rem;
    line-height: 1;
}

@keyframes cardJustAdded {
    0%  { transform: scale(1.2); border-color: var(--gold); }
    100% { transform: scale(1); }
}

.element-card[data-rarity="rare"]      { border-color: rgba(34,170,255,0.35); }
.element-card[data-rarity="epic"]      { border-color: rgba(160,64,255,0.4); }
.element-card[data-rarity="legendary"] {
    border-color: rgba(240,180,41,0.6);
    box-shadow: 0 0 6px rgba(240,180,41,0.15);
}

.element-card .element-icon { font-size: 1.75rem; margin-bottom: 5px; }
.element-card .element-name {
    font-size: 0.64rem;
    font-weight: 700;
    text-align: center;
    color: var(--text-dim);
    line-height: 1.25;
    overflow-wrap: anywhere;
}
.element-card--atlas .element-icon {
    font-size: 2rem;
    margin-bottom: .55rem;
}
.element-card--atlas .element-name {
    font-size: .76rem;
    text-align: left;
    color: var(--text-bright);
}
.element-card-meta {
    margin-top: .55rem;
    font-size: .58rem;
    font-weight: 800;
    letter-spacing: .08em;
    color: var(--text-dim);
}

.element-card[data-rarity="rare"]      .element-name { color: var(--water); }
.element-card[data-rarity="epic"]      .element-name { color: var(--magic); }
.element-card[data-rarity="legendary"] .element-name { color: var(--gold); }

/* Rarity dot */
.element-card::after {
    content: '';
    position: absolute;
    top: 3px;
    right: 3px;
    width: 5px;
    height: 5px;
    border-radius: 1px;
}
.element-card[data-rarity="rare"]::after      { background: var(--water); }
.element-card[data-rarity="epic"]::after      { background: var(--magic); }
.element-card[data-rarity="legendary"]::after { background: var(--gold); }
.element-card[data-rarity="common"]::after    { background: transparent; }

/* ─── PANEL BOTTOM ─── */
.panel-bottom {
    flex-shrink: 0;
    padding: 10px 12px 14px;
    border-top: 2px solid var(--border-subtle);
}
.panel-bottom::-webkit-scrollbar { display: none; }

.hint-btn {
    width: 100%;
    padding: 8px 10px;
    background: linear-gradient(135deg, rgba(160,64,255,0.1), rgba(240,180,41,0.08));
    border: 2px solid var(--border-dim);
    border-radius: var(--radius-sm);
    color: var(--text);
    font-family: var(--font-body);
    font-size: 0.78rem;
    font-weight: 600;
    cursor: pointer;
    text-align: left;
    transition: all 0.15s;
    margin-bottom: 12px;
}
.hint-btn:hover { border-color: var(--gold); color: var(--gold); }

.section-title {
    font-family: var(--font-pixel);
    font-size: 0.4rem;
    color: var(--text-dim);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    margin-bottom: 8px;
    margin-top: 10px;
}

/* ─── ACHIEVEMENTS ─── */
.lab-insights-dock {
    position: relative;
    grid-area: insights;
    min-height: 0;
    display: grid;
    grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr);
    gap: 12px;
    padding: 28px 12px 12px;
    background:
        radial-gradient(circle at 12% 20%, rgba(160,64,255,.08), transparent 34%),
        radial-gradient(circle at 84% 80%, rgba(240,180,41,.06), transparent 32%),
        linear-gradient(180deg, rgba(15,11,29,.98), rgba(12,9,24,.98));
    border-top: 2px solid var(--border-subtle);
}

/* Hide the ::before pseudo-label — replaced by the real toggle button */
.lab-insights-dock::before { content: none; }

/* ─── DOCK TOGGLE BUTTON ─── */
.insights-dock-toggle {
    grid-column: 1 / -1;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: .6em;
    width: 100%;
    background: none;
    border: none;
    border-bottom: 1px solid rgba(255,255,255,.06);
    padding: 0 0 6px;
    margin-bottom: 4px;
    cursor: pointer;
    color: rgba(240,180,41,.72);
    font-family: var(--font-pixel);
    font-size: .34rem;
    letter-spacing: .12em;
    text-transform: uppercase;
    transition: color .2s;
}
.insights-dock-toggle:hover { color: rgba(240,180,41,1); }
.insights-dock-chevron {
    font-size: .7rem;
    line-height: 1;
    transition: transform .25s;
}
.lab-insights-dock.collapsed .insights-dock-chevron { transform: rotate(180deg); }

/* ─── DOCK COLLAPSED STATE ─── */
.lab-layout.dock-collapsed {
    grid-template-rows: minmax(0, 1fr) auto;
}
.lab-insights-dock.collapsed {
    overflow: hidden;
    padding-top: 8px;
    padding-bottom: 8px;
}
.lab-insights-dock.collapsed .lab-side-box { display: none; }

.lab-side-box {
    position: relative;
    min-width: 0;
    background: linear-gradient(180deg, rgba(26,19,48,.96), rgba(14,11,26,.98));
    border: 2px solid var(--border-dim);
    border-radius: var(--radius-lg);
    padding: 1.15rem 1rem 1rem;
    overflow: hidden;
    box-shadow: 0 10px 26px rgba(0,0,0,.26), 0 0 0 1px rgba(255,255,255,.03) inset;
}

.lab-side-box::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(255,255,255,.04), transparent 22%);
    pointer-events: none;
}

.lab-side-head {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: .75rem;
    margin-bottom: .9rem;
    padding-bottom: .65rem;
    border-bottom: 1px solid rgba(160,120,255,.14);
}

.lab-side-head--toggle {
    cursor: pointer;
    user-select: none;
}
.lab-side-head--toggle:hover .insight-toggle-icon {
    color: var(--gold);
}

.insight-toggle-icon {
    font-size: .7rem;
    color: var(--text-dim);
    transition: transform 0.25s ease, color 0.15s;
    margin-top: 2px;
    flex-shrink: 0;
}
.insight-toggle-icon.collapsed {
    transform: rotate(180deg);
}

.lab-side-box.collapsed > :not(.lab-side-head) {
    display: none;
}
.lab-side-box.collapsed {
    padding-bottom: 1.15rem;
}
.lab-side-box.collapsed .lab-side-head {
    margin-bottom: 0;
    border-bottom: none;
    padding-bottom: 0;
}

.lab-side-subtitle {
    margin: 0;
    color: var(--text-dim);
    font-size: .72rem;
    line-height: 1.4;
}

.lab-side-box .section-title {
    margin-top: 0;
    color: var(--gold);
    text-shadow: 0 0 14px rgba(240,180,41,.08);
}

.achievements {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
    gap: 8px;
}

.achievement {
    position: relative;
    display: flex;
    align-items: center;
    gap: 10px;
    min-height: 72px;
    padding: 10px 12px;
    background: linear-gradient(180deg, rgba(33,24,56,.92), rgba(16,12,28,.96));
    border: 2px solid var(--border-subtle);
    border-radius: var(--radius-sm);
    opacity: 0.42;
    transition: all 0.3s;
    overflow: hidden;
}

.achievement::after {
    content: '';
    position: absolute;
    inset: auto 0 0 0;
    height: 2px;
    background: linear-gradient(90deg, transparent, rgba(160,64,255,.45), transparent);
    opacity: .5;
}

.achievement.unlocked {
    opacity: 1;
    border-color: rgba(240,180,41,.28);
    background: linear-gradient(180deg, rgba(46,32,16,.92), rgba(21,16,32,.96));
    box-shadow: 0 0 0 1px rgba(240,180,41,.08) inset, 0 8px 18px rgba(0,0,0,.18);
}
.achievement.rarity-rare { border-color: rgba(34,170,255,.24); }
.achievement.rarity-epic { border-color: rgba(160,64,255,.28); }
.achievement.rarity-legendary { border-color: rgba(240,180,41,.34); box-shadow: 0 0 0 1px rgba(240,180,41,.06) inset, 0 10px 22px rgba(0,0,0,.22); }

.achievement.just-unlocked {
    animation: achievementUnlock 0.5s ease-out;
}

@keyframes achievementUnlock {
    0%  { transform: scale(0.8); }
    60% { transform: scale(1.05); }
    100% { transform: scale(1); }
}

.achievement-icon {
    width: 40px;
    height: 40px;
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 1.35rem;
    border-radius: 12px;
    background: linear-gradient(180deg, rgba(255,255,255,.09), rgba(255,255,255,.03));
    box-shadow: 0 0 0 1px rgba(255,255,255,.06) inset;
}
.achievement-info h4 { font-size: 0.76rem; font-weight: 700; margin-bottom: 2px; color: var(--text-bright); }
.achievement-info p  { font-size: 0.67rem; color: var(--text-dim); line-height: 1.35; }

/* ─── DYNAMIC FEED ─── */
.feed-section { margin-top: 0; }

.feed-cards {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    gap: 8px;
}

.feed-card {
    position: relative;
    min-width: 0;
    min-height: 110px;
    padding: 12px 12px 10px;
    background: linear-gradient(180deg, rgba(28,20,52,.94), rgba(14,10,27,.98));
    border: 2px solid var(--border-subtle);
    border-radius: var(--radius-md);
    text-align: left;
    cursor: pointer;
    transition: all 0.15s;
    overflow: hidden;
}
.feed-card::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, rgba(255,255,255,.05), transparent 36%);
    pointer-events: none;
}
.feed-card:hover { border-color: var(--border-mid); transform: translateY(-3px); box-shadow: 0 10px 18px rgba(0,0,0,.24); }

.feed-card-icon  { font-size: 1.7rem; display: block; margin-bottom: 8px; }
.feed-card-name  { font-size: 0.7rem; font-weight: 800; display: block; margin-bottom: 4px; line-height: 1.35; color: var(--text-bright); }
.feed-card-subtitle {
    display: block;
    margin-bottom: 8px;
    font-size: .6rem;
    color: #ddd4ff;
    letter-spacing: .04em;
    text-transform: uppercase;
}
.feed-card-flavor {
    margin: 0 0 9px;
    color: var(--text-dim);
    font-size: .65rem;
    line-height: 1.4;
}
.feed-card-source {
    display: inline-flex;
    align-items: center;
    padding: 3px 8px;
    border-radius: 999px;
    font-size: 0.58rem;
    color: var(--text-dim);
    background: rgba(255,255,255,.05);
    border: 1px solid rgba(255,255,255,.06);
}

.feed-card.rare       { border-color: rgba(34,170,255,0.4); }
.feed-card.epic       { border-color: rgba(160,64,255,0.5); }
.feed-card.legendary  { border-color: rgba(240,180,41,0.6); }
.feed-loading { color: var(--text-dim); font-size: 0.8rem; padding: 8px 0; font-style: italic; }

/* ═══════════════════════════════════════
   SHARED COMPONENTS
═══════════════════════════════════════ */

/* ─── SECTION HEAD ─── */
.section-head {
    text-align: center;
    padding: 1.5rem 1rem 1rem;
}
.section-head h2 {
    font-family: var(--font-pixel);
    font-size: 0.7rem;
    color: var(--gold);
    letter-spacing: 0.1em;
    text-shadow: 0 0 20px var(--gold-glow);
    margin-bottom: 6px;
}
.section-head p { color: var(--text-dim); font-size: 0.85rem; }

/* ─── BOX TITLE ─── */
.box-title {
    font-family: var(--font-pixel);
    font-size: 0.45rem;
    color: var(--gold);
    letter-spacing: 0.08em;
    margin-bottom: 10px;
}
.box-title-small {
    font-size: 0.7rem;
    font-weight: 700;
    color: var(--text-dim);
    display: block;
    margin-bottom: 8px;
}

/* ─── SLOT ROW ─── */
.slot-row {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    margin-bottom: 14px;
}

.craft-slot {
    width: 110px;
    height: 110px;
    background: var(--bg-card);
    border: 2px dashed var(--border-dim);
    border-radius: var(--radius-md);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.2s;
}

.craft-slot:hover { border-color: var(--border-mid); }

.craft-slot.filled {
    border-style: solid;
    border-color: var(--magic);
    background: rgba(160,64,255,0.08);
}

.craft-slot .element-icon { font-size: 2.5rem; }
.craft-slot .element-name { font-size: 0.75rem; font-weight: 700; margin-top: 4px; text-align: center; }
.slot-placeholder { font-size: 0.7rem; color: var(--text-dim); text-align: center; padding: 0 8px; }

.slot-plus {
    font-size: 2rem;
    font-weight: 300;
    color: var(--text-dim);
}

/* ─── BUTTONS ─── */
.btn-primary {
    padding: 10px 24px;
    background: linear-gradient(135deg, var(--magic), var(--fire));
    border: none;
    border-radius: var(--radius-sm);
    color: white;
    font-family: var(--font-pixel);
    font-size: 0.45rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    cursor: pointer;
    transition: all 0.15s;
    box-shadow: 0 4px 0 rgba(0,0,0,0.4);
}
.btn-primary:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 0 rgba(0,0,0,0.4), 0 0 20px rgba(160,64,255,0.4);
}
.btn-primary:active { transform: translateY(1px); box-shadow: 0 2px 0 rgba(0,0,0,0.4); }

.btn-combine {
    padding: 10px 28px;
    background: linear-gradient(135deg, var(--magic) 0%, #6020b0 100%);
    border: none;
    border-radius: var(--radius-sm);
    color: white;
    font-family: var(--font-pixel);
    font-size: 0.45rem;
    letter-spacing: 0.08em;
    cursor: pointer;
    transition: all 0.15s;
    box-shadow: 0 4px 0 rgba(0,0,0,0.4);
    display: block;
    margin: 0 auto;
}
.btn-combine:hover:not(:disabled) {
    transform: translateY(-2px);
    box-shadow: 0 6px 0 rgba(0,0,0,0.4), 0 0 20px var(--magic-dim);
}
.btn-combine:disabled { opacity: 0.35; cursor: not-allowed; }

.btn-attack {
    padding: 10px 24px;
    background: linear-gradient(135deg, var(--fire) 0%, #cc2200 100%);
    border: none;
    border-radius: var(--radius-sm);
    color: white;
    font-family: var(--font-pixel);
    font-size: 0.45rem;
    letter-spacing: 0.08em;
    cursor: pointer;
    transition: all 0.15s;
    box-shadow: 0 4px 0 rgba(0,0,0,0.4);
}
.btn-attack:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 0 rgba(0,0,0,0.4), 0 0 20px var(--fire-dim);
}

.btn-ghost {
    padding: 6px 14px;
    background: transparent;
    border: 2px solid var(--border-dim);
    border-radius: var(--radius-sm);
    color: var(--text-dim);
    font-family: var(--font-body);
    font-size: 0.78rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.15s;
}
.btn-ghost:hover { border-color: var(--border-mid); color: var(--text); }

/* ─── RESULT AREA ─── */
.result-area { margin-top: 12px; min-height: 80px; text-align: center; }

.result-card {
    display: inline-block;
    padding: 16px 24px;
    background: var(--bg-card);
    border: 2px solid var(--magic);
    border-radius: var(--radius-md);
    animation: resultPop 0.4s ease-out;
    text-align: center;
}

.result-card.loading {
    border-color: rgba(240,180,41,.35);
    box-shadow: 0 0 0 1px rgba(240,180,41,.08) inset;
}

.result-card.loading .result-icon {
    animation: flaskPulse 1.8s ease-in-out infinite;
}

@keyframes resultPop {
    0%  { transform: scale(0) rotate(-10deg); opacity: 0; }
    60% { transform: scale(1.1) rotate(3deg); }
    100% { transform: scale(1) rotate(0); opacity: 1; }
}

.result-icon { font-size: 3rem; display: block; margin-bottom: 8px; }
.result-name { font-size: 1.3rem; font-weight: 900; margin-bottom: 4px; }
.result-rarity {
    display: inline-block;
    padding: 2px 10px;
    border-radius: 2px;
    font-size: 0.65rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    margin-bottom: 6px;
}
.result-rarity.common    { background: rgba(112,96,160,0.2); color: var(--r-common); }
.result-rarity.rare      { background: var(--water-dim);     color: var(--water); }
.result-rarity.epic      { background: var(--magic-dim);     color: var(--magic); }
.result-rarity.legendary { background: var(--gold-glow);     color: var(--gold); }
.result-flavor { color: var(--text-dim); font-style: italic; font-size: 0.8rem; }

.nothing-card {
    display: inline-block;
    padding: 16px 24px;
    background: var(--bg-card);
    border: 2px solid var(--border-subtle);
    border-radius: var(--radius-md);
    animation: fadeIn 0.3s ease-out;
}
.nothing-card span { font-size: 2.5rem; display: block; margin-bottom: 8px; }
.nothing-card p { color: var(--text-dim); font-size: 0.85rem; }

@keyframes fadeIn {
    from { opacity: 0; transform: translateY(8px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* ─── MINI ELEMENTS GRID ─── */
.mini-elements-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    max-height: 160px;
    overflow-y: auto;
    scrollbar-width: thin;
    scrollbar-color: var(--border-dim) transparent;
}
.mini-elements-grid::-webkit-scrollbar { width: 4px; }
.mini-elements-grid::-webkit-scrollbar-thumb {
    background: var(--border-dim);
    border-radius: 2px;
}

.mini-element-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 5px 4px;
    background: var(--bg-card);
    border: 2px solid var(--border-subtle);
    border-radius: var(--radius-sm);
    cursor: pointer;
    transition: all 0.15s;
    width: 56px;
}
.mini-element-card:hover { border-color: var(--border-mid); transform: scale(1.05); }
.mini-element-card.selected { border-color: var(--gold); background: rgba(240,180,41,0.08); }
.mini-element-card .mini-icon { font-size: 1.3rem; }
.mini-element-card .mini-name {
    font-size: 0.55rem;
    font-weight: 700;
    text-align: center;
    color: var(--text-dim);
    line-height: 1.2;
    max-width: 52px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* ─── EMPTY STATE ─── */
.empty-state { color: var(--text-dim); font-style: italic; font-size: 0.8rem; padding: 8px 0; }

/* ─── TOAST ─── */
.toast-container {
    position: fixed;
    bottom: 1.5rem;
    right: 1.5rem;
    display: flex;
    flex-direction: column;
    gap: 6px;
    z-index: 2000;
}

.toast {
    padding: 10px 16px;
    background: var(--bg-panel);
    border: 2px solid var(--border-mid);
    border-radius: var(--radius-sm);
    color: var(--text);
    font-size: 0.82rem;
    font-weight: 600;
    box-shadow: 0 4px 12px rgba(0,0,0,0.4);
    animation: toastIn 0.3s ease-out, toastOut 0.3s ease-in 2.7s forwards;
    max-width: 280px;
}

@keyframes toastIn {
    from { transform: translateX(100%); opacity: 0; }
    to   { transform: translateX(0);     opacity: 1; }
}
@keyframes toastOut {
    from { transform: translateX(0);     opacity: 1; }
    to   { transform: translateX(100%);  opacity: 0; }
}

/* ─── DISCOVERY POPUP ─── */
.discovery-popup {
    position: fixed;
    top: 76px;
    right: 16px;
    z-index: 2600;
    pointer-events: none;
}

.discovery-popup.hidden { display: none; }

.popup-backdrop {
    display: none;
}

.popup-content {
    position: relative;
    text-align: center;
    padding: 1rem 1rem .9rem;
    background: rgba(21,16,40,.96);
    border: 3px solid var(--gold);
    border-radius: var(--radius-lg);
    box-shadow: 0 0 30px var(--gold-glow), 0 10px 28px rgba(0,0,0,.35);
    animation: popupAppear 0.35s cubic-bezier(0.34, 1.56, 0.64, 1);
    width: min(360px, calc(100vw - 32px));
    overflow: hidden;
    pointer-events: auto;
}

@keyframes popupAppear {
    0%  { transform: translateY(-10px) scale(0.94); opacity: 0; }
    100% { transform: translateY(0) scale(1); opacity: 1; }
}

.popup-rays {
    position: absolute;
    inset: -50%;
    background: conic-gradient(
        from 0deg,
        transparent 0deg 20deg,
        rgba(240,180,41,0.04) 20deg 25deg,
        transparent 25deg 40deg,
        rgba(240,180,41,0.04) 40deg 45deg,
        transparent 45deg
    );
    animation: raysRotate 8s linear infinite;
    pointer-events: none;
}

@keyframes raysRotate { to { transform: rotate(360deg); } }

.popup-label {
    font-family: var(--font-pixel);
    font-size: 0.34rem;
    color: var(--gold-dim);
    letter-spacing: 0.12em;
    margin-bottom: .65rem;
}

.popup-icon {
    font-size: 3.2rem;
    display: block;
    margin-bottom: .5rem;
    animation: popupIconBounce 0.6s ease-out;
}

@keyframes popupIconBounce {
    0%  { transform: translateY(-30px) scale(0.5); opacity: 0; }
    60% { transform: translateY(8px) scale(1.1); }
    100% { transform: translateY(0) scale(1); opacity: 1; }
}

.popup-name {
    font-family: var(--font-pixel);
    font-size: 0.58rem;
    color: var(--text-gold);
    text-shadow: 0 0 14px var(--gold-glow);
    margin-bottom: 0.55rem;
    letter-spacing: 0.05em;
    line-height: 1.8;
}

.popup-flavor {
    color: var(--text-dim);
    font-style: italic;
    font-size: 0.76rem;
    margin-bottom: .8rem;
    max-width: 280px;
    margin-left: auto;
    margin-right: auto;
}

.popup-close {
    font-size: 0.38rem;
    padding: 8px 18px;
}

/* ─── CELEBRATION PARTICLES ─── */
@keyframes particleExplode {
    0%   { transform: translate(-50%, -50%) scale(1); opacity: 1; }
    100% { transform: translate(calc(-50% + var(--px)), calc(-50% + var(--py))) scale(0); opacity: 0; }
}

/* ═══════════════════════════════════════
   CRISOL ARCANO
═══════════════════════════════════════ */
.crisol-container {
    height: 100%;
    overflow-y: auto;
    padding: 0 1.4rem 1.8rem;
}

.crisol-head {
    padding-bottom: .8rem;
}

.crisol-hub-grid {
    display: grid;
    grid-template-columns: 300px minmax(0, 1fr);
    gap: 1rem;
    align-items: start;
}

.crisol-side-panel {
    position: sticky;
    top: 1rem;
    display: flex;
    flex-direction: column;
    gap: .85rem;
}

.crisol-side-box {
    background: linear-gradient(180deg, rgba(25,18,46,.96), rgba(14,11,27,.98));
    border: 2px solid rgba(160,120,255,.18);
    border-radius: var(--radius-lg);
    padding: 1rem 1rem .95rem;
    box-shadow: 0 14px 28px rgba(0,0,0,.2);
}

.crisol-overview-eyebrow {
    font-family: var(--font-pixel);
    font-size: .36rem;
    letter-spacing: .1em;
    color: var(--gold);
    margin-bottom: .65rem;
}

.crisol-score-wrap {
    display: flex;
    flex-direction: column;
    gap: .25rem;
    margin-bottom: .75rem;
}

.crisol-score-label {
    color: var(--text-dim);
    font-size: .68rem;
}

.crisol-score-value {
    font-size: 2rem;
    line-height: 1;
    color: var(--text-bright);
    text-shadow: 0 0 18px rgba(240,180,41,.08);
}

.crisol-rank-badge {
    display: inline-flex;
    width: fit-content;
    padding: 4px 10px;
    border-radius: 999px;
    background: rgba(240,180,41,.10);
    border: 1px solid rgba(240,180,41,.22);
    color: var(--gold);
    font-size: .68rem;
    font-weight: 800;
}

.crisol-next-meta {
    color: var(--text-dim);
    font-size: .68rem;
    line-height: 1.45;
}

.crisol-pillars {
    display: flex;
    flex-wrap: wrap;
    gap: .45rem;
}

.crisol-pillars span,
.crisol-triad-step {
    padding: 5px 9px;
    border-radius: 999px;
    background: rgba(255,255,255,.04);
    border: 1px solid rgba(255,255,255,.06);
    color: var(--text-dim);
    font-size: .64rem;
    font-weight: 700;
}

.crisol-hook-copy,
.crisol-mode-summary {
    color: var(--text);
    font-size: .74rem;
    line-height: 1.5;
}

.crisol-triad-progress {
    display: flex;
    flex-direction: column;
    gap: .45rem;
}

.crisol-contracts-list {
    display: flex;
    flex-direction: column;
    gap: .7rem;
}

.crisol-contract {
    padding: .8rem;
    border-radius: var(--radius-md);
    background: rgba(255,255,255,.03);
    border: 1px solid rgba(255,255,255,.06);
}

.crisol-contract.ready {
    border-color: rgba(34,204,136,.26);
    background: rgba(34,204,136,.07);
}

.crisol-contract-top,
.crisol-contract-meta {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: .7rem;
}

.crisol-contract-name {
    color: var(--text-bright);
    font-size: .78rem;
    font-weight: 900;
    margin-bottom: .18rem;
}

.crisol-contract-desc,
.crisol-contract-meta {
    color: var(--text-dim);
    font-size: .66rem;
    line-height: 1.45;
}

.crisol-contract-tier {
    flex-shrink: 0;
    padding: 3px 8px;
    border-radius: 999px;
    background: rgba(240,180,41,.08);
    color: var(--gold);
    font-size: .6rem;
    font-weight: 900;
}

.crisol-contract-track {
    width: 100%;
    height: 8px;
    margin: .55rem 0 .65rem;
    border-radius: 999px;
    overflow: hidden;
    background: rgba(255,255,255,.06);
    border: 1px solid rgba(255,255,255,.06);
}

.crisol-contract-fill {
    height: 100%;
    background: linear-gradient(90deg, var(--gold), var(--magic));
    border-radius: inherit;
}

.crisol-contract-btn {
    width: 100%;
    justify-content: center;
}

.crisol-contract-btn:disabled {
    opacity: .72;
    cursor: default;
}

.crisol-triad-step.done {
    color: var(--emerald);
    border-color: rgba(34,204,136,.24);
    background: rgba(34,204,136,.08);
}

.crisol-main-panel {
    min-width: 0;
}

.crisol-mode-strip {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: .8rem;
    margin-bottom: 1rem;
}

.crisol-mode-card {
    display: flex;
    align-items: center;
    gap: .85rem;
    width: 100%;
    padding: .95rem 1rem;
    background: linear-gradient(180deg, rgba(26,19,48,.96), rgba(12,10,24,.98));
    border: 2px solid var(--border-subtle);
    border-radius: var(--radius-lg);
    text-align: left;
    color: inherit;
    cursor: pointer;
    transition: all .16s ease;
    box-shadow: 0 10px 24px rgba(0,0,0,.16);
}

.crisol-mode-card:hover {
    transform: translateY(-2px);
    border-color: var(--border-mid);
}

.crisol-mode-card.active {
    border-color: rgba(240,180,41,.34);
    box-shadow: 0 0 0 1px rgba(240,180,41,.08) inset, 0 12px 28px rgba(0,0,0,.2);
    background: linear-gradient(180deg, rgba(46,32,16,.88), rgba(20,16,30,.98));
}

.crisol-mode-icon {
    font-size: 1.8rem;
    flex-shrink: 0;
}

.crisol-mode-name {
    color: var(--text-bright);
    font-size: .88rem;
    font-weight: 900;
    margin-bottom: .2rem;
}

.crisol-mode-meta {
    color: var(--text-dim);
    font-size: .68rem;
    line-height: 1.35;
}

.crisol-subpane.hidden { display: none; }

.crisol-pane-head {
    margin-bottom: 1rem;
}

.crisol-pane-head h3 {
    font-size: 1.08rem;
    color: var(--text-bright);
    margin-bottom: .3rem;
}

.crisol-pane-head p {
    color: var(--text-dim);
    font-size: .8rem;
    line-height: 1.45;
}

.crisol-embedded {
    max-width: none;
    margin: 0;
    padding: 0;
}

.oracle-header.compact {
    padding-top: .4rem;
}

.oracle-header-actions {
    display: inline-flex;
    align-items: center;
    gap: .6rem;
    flex-wrap: wrap;
}

.leaderboard-box.compact {
    margin-top: 1rem;
}

/* ═══════════════════════════════════════
   ARENA TAB
═══════════════════════════════════════ */
.arena-container {
    height: 100%;
    overflow-y: auto;
    padding: 0 2rem 2rem;
    scrollbar-width: thin;
    scrollbar-color: var(--border-dim) transparent;
}

.arena-battle-grid {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    gap: 1.5rem;
    align-items: center;
    margin-bottom: 1.5rem;
    padding: 1.5rem;
    background: var(--bg-panel);
    border: 2px solid var(--border-dim);
    border-radius: var(--radius-lg);
}

/* ─── DUELIST ─── */
.duelist {
    text-align: center;
    padding: 1.5rem;
    background: var(--bg-card);
    border: 2px solid var(--border-subtle);
    border-radius: var(--radius-md);
}
.player-side { border-color: rgba(34,170,255,0.35); }
.ai-side     { border-color: rgba(255,87,34,0.35); }

.duelist-portrait {
    font-size: 4rem;
    display: block;
    margin-bottom: 0.75rem;
    animation: duelistBob 2.5s ease-in-out infinite;
}
@keyframes duelistBob {
    0%, 100% { transform: translateY(0); }
    50%       { transform: translateY(-8px); }
}

.duelist-name {
    font-family: var(--font-pixel);
    font-size: 0.5rem;
    letter-spacing: 0.08em;
    margin-bottom: 0.5rem;
}

.duelist-stats {
    display: flex;
    justify-content: center;
    gap: 12px;
    font-size: 0.82rem;
    color: var(--text-dim);
}
.duelist-stats strong { color: var(--gold); }

/* ─── BATTLE CENTER ─── */
.battle-center { text-align: center; }

.vs-badge {
    font-family: var(--font-pixel);
    font-size: 1.8rem;
    color: var(--magic);
    text-shadow: 0 0 20px rgba(160,64,255,0.5);
    animation: vsPulse 1.5s ease-in-out infinite;
    margin-bottom: 0.75rem;
}
@keyframes vsPulse {
    0%, 100% { transform: scale(1); }
    50%       { transform: scale(1.08); }
}

.target-box {
    padding: 1rem;
    background: linear-gradient(135deg, rgba(160,64,255,0.1), rgba(240,180,41,0.08));
    border: 2px solid var(--border-mid);
    border-radius: var(--radius-md);
    margin-bottom: 0.75rem;
    min-width: 180px;
}
.target-eyebrow {
    font-family: var(--font-pixel);
    font-size: 0.4rem;
    color: var(--gold-dim);
    letter-spacing: 0.1em;
    margin-bottom: 6px;
}
.target-element {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    margin-bottom: 4px;
}
.target-icon { font-size: 2.5rem; }
.target-name { font-size: 1.1rem; font-weight: 900; }
.target-hint { font-size: 0.72rem; color: var(--text-dim); font-style: italic; }

.battle-timer {
    font-family: var(--font-pixel);
    font-size: 2rem;
    color: var(--water);
    margin-bottom: 0.75rem;
    letter-spacing: 0.05em;
}
.battle-timer.critical {
    color: var(--fire);
    animation: timerCrit 0.5s ease-in-out infinite;
}
@keyframes timerCrit {
    0%, 100% { transform: scale(1); }
    50%       { transform: scale(1.1); }
}
.timer-val { font-size: 2rem; }
.timer-unit { font-size: 1rem; }

.btn-duel-start {
    padding: 10px 20px;
    background: linear-gradient(135deg, var(--fire), var(--magic));
    border: none;
    border-radius: var(--radius-sm);
    color: white;
    font-family: var(--font-pixel);
    font-size: 0.45rem;
    letter-spacing: 0.08em;
    cursor: pointer;
    transition: all 0.15s;
    box-shadow: 0 4px 0 rgba(0,0,0,0.4);
}
.btn-duel-start:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 0 rgba(0,0,0,0.4), 0 0 20px var(--fire-dim);
}

/* ─── AI THINK ─── */
.ai-think { height: 32px; display: flex; align-items: center; justify-content: center; margin-top: 8px; }
.think-dots { display: flex; gap: 5px; }
.think-dots span {
    width: 8px;
    height: 8px;
    background: var(--text-dim);
    border-radius: 1px;
    animation: thinkDot 0.8s ease-in-out infinite;
}
.think-dots span:nth-child(2) { animation-delay: 0.2s; }
.think-dots span:nth-child(3) { animation-delay: 0.4s; }
@keyframes thinkDot {
    0%, 100% { transform: scaleY(0.4); background: var(--text-dim); }
    50%       { transform: scaleY(1.2); background: var(--magic); }
}

/* ─── DUEL CRAFT BOX ─── */
.duel-craft-box {
    padding: 1.5rem;
    background: var(--bg-panel);
    border: 2px solid var(--border-dim);
    border-radius: var(--radius-lg);
    text-align: center;
    margin-bottom: 1.5rem;
}

.duel-result {
    min-height: 40px;
    margin-top: 10px;
    font-size: 0.9rem;
    font-weight: 700;
}
.duel-success { color: var(--emerald); animation: successPop 0.4s ease-out; }
.duel-partial { color: var(--gold); }
.duel-fail    { color: var(--text-dim); }

@keyframes successPop {
    0%  { transform: scale(0.5); opacity: 0; }
    70% { transform: scale(1.1); }
    100% { transform: scale(1); opacity: 1; }
}

/* ─── MINI GRID BOX ─── */
.mini-grid-box {
    padding: 1rem 1.5rem;
    background: var(--bg-panel);
    border: 2px solid var(--border-subtle);
    border-radius: var(--radius-md);
    margin-bottom: 1.5rem;
}

/* ─── HISTORY BOX ─── */
.history-box {
    padding: 1rem 1.5rem;
    background: var(--bg-panel);
    border: 2px solid var(--border-subtle);
    border-radius: var(--radius-md);
}
.history-list { max-height: 160px; overflow-y: auto; }
.history-entry {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 5px 0;
    border-bottom: 1px solid var(--border-subtle);
    font-size: 0.8rem;
}

/* ═══════════════════════════════════════
   BOSS TAB
═══════════════════════════════════════ */
.boss-container {
    height: 100%;
    overflow-y: auto;
    padding: 0 2rem 2rem;
    scrollbar-width: thin;
    scrollbar-color: var(--border-dim) transparent;
}

.boss-layout {
    display: grid;
    grid-template-columns: 1fr 320px;
    gap: 1.5rem;
    margin-bottom: 1.5rem;
}

/* ─── BOSS ARENA ─── */
.boss-arena {
    background: var(--bg-panel);
    border: 2px solid var(--border-dim);
    border-radius: var(--radius-lg);
    padding: 1.5rem;
    position: relative;
    min-height: 340px;
}

.boss-card-main {
    display: flex;
    gap: 1.5rem;
    align-items: center;
    margin-bottom: 1.5rem;
}

.boss-avatar-wrap {
    flex-shrink: 0;
    width: 100px;
    height: 100px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, rgba(255,87,34,0.1), rgba(160,64,255,0.1));
    border: 2px solid rgba(255,87,34,0.4);
    border-radius: var(--radius-md);
}

.boss-avatar {
    font-size: 4rem;
    animation: bossFloat 3s ease-in-out infinite;
}
@keyframes bossFloat {
    0%, 100% { transform: translateY(0) scale(1); }
    50%       { transform: translateY(-8px) scale(1.05); }
}

.boss-name {
    font-family: var(--font-pixel);
    font-size: 0.6rem;
    color: var(--fire);
    letter-spacing: 0.05em;
    margin-bottom: 8px;
    text-shadow: 0 0 10px rgba(255,87,34,0.4);
}

.boss-hp-bar { margin-bottom: 8px; }
.hp-track {
    height: 18px;
    background: var(--bg-card);
    border: 2px solid var(--border-dim);
    border-radius: 2px;
    overflow: hidden;
    margin-bottom: 3px;
}
.hp-fill {
    height: 100%;
    background: linear-gradient(90deg, var(--fire) 0%, var(--gold) 100%);
    transition: width 0.5s ease;
    border-radius: 1px;
}
.hp-text { font-size: 0.72rem; color: var(--text-dim); }

.boss-taunt { font-style: italic; color: var(--text-dim); font-size: 0.82rem; }

/* ─── BOSS CLUES ─── */
.boss-clues-panel { background: var(--bg-card); border: 2px solid var(--border-subtle); border-radius: var(--radius-md); padding: 1rem; }
.clues-title { font-family: var(--font-pixel); font-size: 0.42rem; color: var(--gold-dim); letter-spacing: 0.08em; margin-bottom: 8px; }
.clue-list { display: flex; flex-direction: column; gap: 5px; margin-bottom: 10px; }
.clue {
    padding: 6px 10px;
    background: rgba(255,255,255,0.03);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-sm);
    font-size: 0.8rem;
    color: var(--text-dim);
}

.btn-hint-boss {
    width: 100%;
    padding: 8px 12px;
    background: rgba(160,64,255,0.1);
    border: 2px solid var(--border-dim);
    border-radius: var(--radius-sm);
    color: var(--text);
    font-size: 0.78rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.15s;
    font-family: var(--font-body);
}
.btn-hint-boss:hover { border-color: var(--magic); color: var(--magic); }

/* ─── BOSS ATTACK OVERLAY ─── */
.boss-attack {
    position: absolute;
    inset: 0;
    background: rgba(0,0,0,0.92);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    border-radius: var(--radius-lg);
    z-index: 50;
}
.boss-attack.hidden { display: none; }

.attack-fx { font-size: 5rem; margin-bottom: 1rem; animation: attackPop 0.5s ease-out; }
@keyframes attackPop {
    0% { transform: scale(0) rotate(-20deg); }
    70% { transform: scale(1.3) rotate(5deg); }
    100% { transform: scale(1) rotate(0); }
}
.attack-msg { font-size: 1rem; font-weight: 700; color: var(--fire); }

/* ─── BOSS VICTORY / GAMEOVER ─── */
.boss-victory, .boss-gameover {
    position: absolute;
    inset: 0;
    background: rgba(0,0,0,0.92);
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--radius-lg);
    z-index: 50;
}
.boss-victory.hidden, .boss-gameover.hidden { display: none; }

.victory-wrap, .gameover-wrap { text-align: center; animation: winAppear 0.5s ease-out; }
@keyframes winAppear {
    0% { transform: scale(0.5); opacity: 0; }
    100% { transform: scale(1); opacity: 1; }
}

.victory-star { font-size: 5rem; display: block; margin-bottom: 1rem; animation: starSpin 2s linear infinite; }
@keyframes starSpin { to { transform: rotate(360deg); } }

.victory-wrap h3 {
    font-family: var(--font-pixel);
    font-size: 1.2rem;
    color: var(--gold);
    text-shadow: 0 0 20px var(--gold-glow);
    margin-bottom: 0.5rem;
}
.gameover-wrap h3 {
    font-family: var(--font-pixel);
    font-size: 1.2rem;
    color: var(--fire);
    margin-bottom: 0.5rem;
}
.skull { font-size: 5rem; display: block; margin-bottom: 1rem; }

.loot-box { background: rgba(240,180,41,0.06); border: 2px solid var(--border-dim); border-radius: var(--radius-md); padding: 1rem; margin: 1rem 0; }
.loot-box h4 { font-family: var(--font-pixel); font-size: 0.42rem; color: var(--gold); margin-bottom: 8px; }
.loot-items { display: flex; gap: 8px; justify-content: center; flex-wrap: wrap; }
.loot-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 8px;
    background: var(--bg-card);
    border: 2px solid var(--border-dim);
    border-radius: var(--radius-sm);
    min-width: 80px;
    text-align: center;
}
.loot-item.rare      { border-color: var(--water); }
.loot-item.epic      { border-color: var(--magic); }
.loot-item.legendary { border-color: var(--gold); }
.loot-icon   { font-size: 1.8rem; }
.loot-name   { font-size: 0.72rem; font-weight: 700; margin-top: 3px; }
.loot-reward { font-size: 0.62rem; color: var(--text-dim); }

/* ─── BOSS COMBAT PANEL ─── */
.boss-combat-panel {
    background: var(--bg-panel);
    border: 2px solid var(--border-dim);
    border-radius: var(--radius-lg);
    padding: 1.5rem;
}

.boss-btn-row {
    display: flex;
    gap: 8px;
    justify-content: center;
    margin-bottom: 10px;
}

/* ─── BOSS ROSTER ─── */
.boss-roster {
    background: var(--bg-panel);
    border: 2px solid var(--border-subtle);
    border-radius: var(--radius-md);
    padding: 1rem 1.5rem;
    margin-bottom: 1.5rem;
}

.boss-cards {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    gap: 8px;
    margin-top: 8px;
}

.boss-card-mini {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 10px;
    background: var(--bg-card);
    border: 2px solid var(--border-subtle);
    border-radius: var(--radius-md);
    cursor: pointer;
    transition: all 0.15s;
    position: relative;
}
.boss-card-mini:hover { background: var(--bg-raised); border-color: var(--border-mid); }
.boss-card-mini.defeated { opacity: 0.5; border-color: rgba(240,180,41,0.3); }
.boss-card-mini.active { border-color: var(--fire); box-shadow: 0 0 10px rgba(255,87,34,0.2); }

.boss-card-mini .boss-avatar { font-size: 2rem; animation: none; }
.boss-info-mini h4 { font-size: 0.8rem; font-weight: 700; }
.boss-info-mini p  { font-size: 0.68rem; color: var(--text-dim); }
.defeated-badge { position: absolute; top: -4px; right: -4px; font-size: 1rem; }

/* ─── BATTLE LOG ─── */
.battle-log-box {
    background: var(--bg-panel);
    border: 2px solid var(--border-subtle);
    border-radius: var(--radius-md);
    padding: 1rem 1.5rem;
}
.log-entries { max-height: 120px; overflow-y: auto; }
.log-entry { display: flex; gap: 8px; padding: 4px 0; border-bottom: 1px solid var(--border-subtle); font-size: 0.78rem; }
.log-time { color: var(--text-dim); font-size: 0.68rem; flex-shrink: 0; }
.log-message { flex: 1; }

/* ═══════════════════════════════════════
   ORACLE TAB
═══════════════════════════════════════ */
.oracle-container {
    height: 100%;
    overflow-y: auto;
    max-width: 860px;
    margin: 0 auto;
    padding: 0 2rem 2rem;
    scrollbar-width: thin;
}

.oracle-header {
    text-align: center;
    padding: 1.5rem 0 1rem;
}

.oracle-orb {
    font-size: 5rem;
    display: block;
    margin-bottom: 0.75rem;
    animation: orbFloat 4s ease-in-out infinite;
    filter: drop-shadow(0 0 20px rgba(160,64,255,0.5));
}
@keyframes orbFloat {
    0%, 100% { transform: translateY(0) rotate(-5deg); filter: drop-shadow(0 0 20px rgba(160,64,255,0.5)); }
    50%       { transform: translateY(-12px) rotate(5deg); filter: drop-shadow(0 0 30px rgba(160,64,255,0.8)); }
}

.oracle-header h2 {
    font-family: var(--font-pixel);
    font-size: 0.7rem;
    color: var(--magic);
    letter-spacing: 0.1em;
    text-shadow: 0 0 20px rgba(160,64,255,0.5);
    margin-bottom: 6px;
}

.ai-badge {
    display: inline-block;
    padding: 2px 8px;
    border: 1px solid var(--border-dim);
    border-radius: 2px;
    font-size: 0.72rem;
    font-weight: 600;
    margin-left: 8px;
}

.btn-config {
    margin-top: 8px;
    padding: 6px 14px;
    background: var(--bg-card);
    border: 2px solid var(--border-dim);
    border-radius: var(--radius-sm);
    color: var(--text-dim);
    font-size: 0.78rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.15s;
    font-family: var(--font-body);
}
.btn-config:hover { border-color: var(--magic); color: var(--magic); }

/* ─── ORACLE MODES ─── */
.oracle-modes {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1rem;
    margin-bottom: 1.5rem;
}

.oracle-mode-btn {
    padding: 1.5rem 1rem;
    background: var(--bg-card);
    border: 2px solid var(--border-subtle);
    border-radius: var(--radius-md);
    color: var(--text);
    font-family: var(--font-body);
    cursor: pointer;
    transition: all 0.2s;
    text-align: center;
}
.oracle-mode-btn:hover {
    border-color: var(--magic);
    transform: translateY(-4px);
    box-shadow: 0 8px 20px rgba(160,64,255,0.15);
    background: var(--bg-raised);
}
.mode-icon { font-size: 2.5rem; display: block; margin-bottom: 0.5rem; }
.oracle-mode-btn h4 { font-size: 0.88rem; font-weight: 700; margin-bottom: 4px; }
.oracle-mode-btn p  { font-size: 0.72rem; color: var(--text-dim); }

/* ─── ORACLE ARENA ─── */
.oracle-arena { display: flex; flex-direction: column; gap: 1rem; }

.oracle-chat {
    max-height: 280px;
    overflow-y: auto;
    padding: 1rem;
    background: var(--bg-card);
    border: 2px solid var(--border-subtle);
    border-radius: var(--radius-md);
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    scrollbar-width: thin;
}

.oracle-msg { display: flex; gap: 10px; align-items: flex-start; }
.oracle-msg--oracle { align-self: flex-start; }
.oracle-msg--user   { align-self: flex-end; flex-direction: row-reverse; }

.msg-avatar { font-size: 1.5rem; flex-shrink: 0; }
.msg-bubble {
    max-width: 80%;
    padding: 8px 12px;
    border-radius: var(--radius-md);
}
.oracle-msg--oracle .msg-bubble {
    background: linear-gradient(135deg, rgba(160,64,255,0.2), rgba(34,170,255,0.15));
    border: 1px solid var(--border-mid);
}
.oracle-msg--user .msg-bubble {
    background: linear-gradient(135deg, rgba(34,170,255,0.2), rgba(255,87,34,0.15));
    border: 1px solid rgba(34,170,255,0.3);
}
.msg-bubble p { font-size: 0.85rem; line-height: 1.5; }

.oracle-challenge {
    padding: 1rem 1.5rem;
    background: var(--bg-panel);
    border: 2px solid var(--border-dim);
    border-radius: var(--radius-md);
    text-align: center;
}
.challenge-prompt { font-size: 1rem; margin-bottom: 8px; }
.attempts-row { color: var(--text-dim); font-size: 0.82rem; }
.attempts-row strong { color: var(--gold); }

.oracle-input-row { display: flex; gap: 8px; }
.oracle-input-row input {
    flex: 1;
    padding: 10px 16px;
    background: var(--bg-card);
    border: 2px solid var(--border-dim);
    border-radius: var(--radius-sm);
    color: var(--text);
    font-family: var(--font-body);
    font-size: 0.9rem;
    outline: none;
    transition: border-color 0.15s;
}
.oracle-input-row input:focus { border-color: var(--magic); }

.btn-oracle {
    padding: 10px 16px;
    background: linear-gradient(135deg, var(--magic), var(--water));
    border: none;
    border-radius: var(--radius-sm);
    font-size: 1.4rem;
    cursor: pointer;
    transition: all 0.15s;
    box-shadow: 0 4px 0 rgba(0,0,0,0.3);
}
.btn-oracle:hover { transform: translateY(-2px); box-shadow: 0 6px 0 rgba(0,0,0,0.3); }

/* ─── LEADERBOARD ─── */
.leaderboard-box {
    background: var(--bg-panel);
    border: 2px solid var(--border-subtle);
    border-radius: var(--radius-md);
    padding: 1rem 1.5rem;
}
.leaderboard-list { display: flex; flex-direction: column; gap: 4px; }
.lb-entry {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 6px 8px;
    background: var(--bg-card);
    border-radius: var(--radius-sm);
}
.lb-rank {
    width: 22px;
    height: 22px;
    background: var(--gold);
    border-radius: 2px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.72rem;
    font-weight: 900;
    color: var(--bg-deep);
}
.lb-name { flex: 1; font-size: 0.82rem; }
.lb-score { font-weight: 700; color: var(--gold); font-size: 0.82rem; }

/* ─── ORACLE THINKING ─── */
.oracle-thinking {
    text-align: center;
    padding: 2rem;
}
.oracle-thinking.hidden { display: none; }

/* ═══════════════════════════════════════
   SKINS (shop cosmetics)
═══════════════════════════════════════ */
body[data-skin="skin_ember"] {
    --bg-panel: #1b110d;
    --bg-card: #2a180f;
    --bg-raised: #3a2015;
    --border-subtle: rgba(255,120,60,.16);
    --border-dim: rgba(255,120,60,.35);
}
body[data-skin="skin_ocean"] {
    --bg-panel: #0d1520;
    --bg-card: #102032;
    --bg-raised: #17304a;
    --border-subtle: rgba(80,180,255,.14);
    --border-dim: rgba(80,180,255,.34);
}
body[data-skin="skin_void"] {
    --bg-panel: #100b22;
    --bg-card: #1a1236;
    --bg-raised: #281b52;
    --border-subtle: rgba(180,90,255,.18);
    --border-dim: rgba(180,90,255,.38);
}
body[data-skin="skin_gold"] {
    --bg-panel: #20180c;
    --bg-card: #2c2211;
    --bg-raised: #3e2e15;
    --border-subtle: rgba(240,180,41,.18);
    --border-dim: rgba(240,180,41,.42);
}

/* ═══════════════════════════════════════
   ARCHIVE TAB
═══════════════════════════════════════ */
.archive-container {
    height: 100%;
    overflow-y: auto;
    padding: 0 2rem 2rem;
    scrollbar-width: thin;
}

.archive-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 340px;
    gap: 1.5rem;
}

.archive-column { min-width: 0; }
.archive-box {
    background: var(--bg-panel);
    border: 2px solid var(--border-dim);
    border-radius: var(--radius-lg);
    padding: 1rem 1.2rem;
}
.archive-toolbar {
    display: flex;
    align-items: center;
    gap: .75rem;
    justify-content: space-between;
    margin-bottom: .8rem;
}
.archive-search {
    padding: 8px 12px;
    background: var(--bg-card);
    border: 2px solid var(--border-dim);
    border-radius: var(--radius-sm);
    color: var(--text);
    font-family: var(--font-body);
    font-size: .85rem;
    outline: none;
    min-width: 220px;
}
.archive-search:focus { border-color: var(--magic); }
.recipe-book-list,
.community-feed {
    display: flex;
    flex-direction: column;
    gap: .65rem;
}
.community-ranking-list {
    display: flex;
    flex-direction: column;
    gap: .55rem;
    margin-bottom: .15rem;
}
.community-ranking-card {
    width: 100%;
    display: flex;
    align-items: center;
    gap: .75rem;
    padding: .8rem .9rem;
    background: var(--bg-card);
    border: 2px solid var(--border-subtle);
    border-radius: var(--radius-md);
    color: inherit;
    text-align: left;
    cursor: pointer;
    transition: all .15s;
    font: inherit;
}
.community-ranking-card:hover {
    border-color: var(--border-mid);
    background: var(--bg-raised);
    transform: translateY(-2px);
}
.community-rank-pill {
    width: 34px;
    height: 34px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: rgba(240,180,41,.10);
    color: var(--gold);
    font-weight: 900;
    flex-shrink: 0;
}
.community-ranking-main { min-width: 0; flex: 1; }
.progress-tree {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: .75rem;
}
.tree-node {
    background: var(--bg-card);
    border: 2px solid var(--border-subtle);
    border-radius: var(--radius-md);
    padding: .8rem .9rem;
}
.tree-node-title { font-weight: 800; font-size: .78rem; margin-bottom: .35rem; }
.tree-node-meta { font-size: .68rem; color: var(--text-dim); margin-bottom: .35rem; }
.tree-link-list { display:flex; flex-direction:column; gap:.35rem; }
.tree-link { font-size:.72rem; color: var(--text); }
.recipe-entry,
.community-item {
    background: var(--bg-card);
    border: 2px solid var(--border-subtle);
    border-radius: var(--radius-md);
    padding: .8rem .9rem;
}

.cards-showcase-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: .7rem;
}

.showcase-card {
    background: linear-gradient(180deg, rgba(30,24,56,.95), rgba(15,11,29,.96));
    border: 2px solid var(--border-subtle);
    border-radius: var(--radius-md);
    overflow: hidden;
}
.showcase-card-art {
    width: 100%;
    aspect-ratio: 3 / 4;
    object-fit: cover;
    display: block;
}
.showcase-card-title {
    padding: .55rem .6rem .15rem;
    font-size: .7rem;
    font-weight: 800;
    color: var(--text-bright);
}
.showcase-card-slot {
    padding: 0 .6rem .65rem;
    font-size: .62rem;
    color: var(--gold);
}

.cards-sets-list {
    display: flex;
    flex-direction: column;
    gap: .55rem;
}
.card-set-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: .8rem;
    padding: .7rem .8rem;
    background: var(--bg-card);
    border: 2px solid var(--border-subtle);
    border-radius: var(--radius-md);
}
.card-set-row.completed {
    border-color: rgba(34,204,136,.28);
}
.card-set-row.claimed {
    box-shadow: 0 0 0 1px rgba(240,180,41,.12) inset;
}
.card-set-name { font-size: .74rem; font-weight: 800; color: var(--text-bright); }
.card-set-meta { font-size: .64rem; color: var(--text-dim); }
.card-set-pill {
    padding: 3px 8px;
    border-radius: 999px;
    background: rgba(240,180,41,.08);
    color: var(--gold);
    font-size: .62rem;
    font-weight: 800;
}

.cards-album-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: .9rem;
}

.collectible-card {
    background: linear-gradient(180deg, rgba(30,24,56,.95), rgba(15,11,29,.96));
    border: 2px solid var(--border-subtle);
    border-radius: var(--radius-lg);
    overflow: hidden;
    box-shadow: 0 8px 22px rgba(0,0,0,.28);
}
.collectible-card.favorite {
    box-shadow: 0 0 0 1px rgba(240,180,41,.18) inset, 0 0 18px rgba(240,180,41,.08), 0 8px 22px rgba(0,0,0,.28);
}
.collectible-card.series-guardianes-caidos {
    background: linear-gradient(180deg, rgba(29,18,24,.98), rgba(12,9,18,.98));
}
.collectible-card.series-arena-del-alquimista {
    background: linear-gradient(180deg, rgba(36,22,18,.98), rgba(18,11,12,.98));
}
.collectible-card.series-temporada-i-el-despertar {
    background: linear-gradient(180deg, rgba(18,24,38,.98), rgba(11,13,24,.98));
}
.collectible-card.series-reliquias-del-archivo,
.collectible-card.series-cronicas-de-coleccion {
    background: linear-gradient(180deg, rgba(31,23,45,.98), rgba(14,11,24,.98));
}
.collectible-card.series-legados-secretos {
    background: linear-gradient(180deg, rgba(38,28,16,.98), rgba(16,11,8,.98));
}
.collectible-card.rarity-rare { border-color: rgba(34,170,255,.35); }
.collectible-card.rarity-epic { border-color: rgba(160,64,255,.42); }
.collectible-card.rarity-legendary { border-color: rgba(240,180,41,.48); box-shadow: 0 0 18px rgba(240,180,41,.08), 0 8px 22px rgba(0,0,0,.28); }
.collectible-card-art-wrap {
    position: relative;
    aspect-ratio: 3 / 4;
    background: var(--bg-raised);
    overflow: hidden;
}
.collectible-card-art {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.collectible-card-rarity {
    position: absolute;
    top: 8px;
    right: 8px;
    padding: 3px 7px;
    border-radius: 999px;
    background: rgba(7,5,14,.68);
    border: 1px solid rgba(255,255,255,.08);
    font-size: .58rem;
    font-weight: 800;
    color: var(--text-bright);
    letter-spacing: .08em;
}
.collectible-card-body {
    padding: .85rem .9rem 1rem;
}
.collectible-card-series {
    font-size: .62rem;
    font-weight: 700;
    color: var(--gold);
    margin-bottom: .35rem;
    text-transform: uppercase;
    letter-spacing: .08em;
}
.collectible-card-name {
    font-size: .86rem;
    font-weight: 900;
    color: var(--text-bright);
    margin-bottom: .45rem;
}
.collectible-card-flavor {
    font-size: .72rem;
    color: #d7c9ef;
    font-style: italic;
    line-height: 1.4;
    margin-bottom: .4rem;
}
.collectible-card-meta {
    font-size: .68rem;
    color: var(--text-dim);
    line-height: 1.4;
}
.collectible-card-actions {
    display: flex;
    gap: .45rem;
    flex-wrap: wrap;
    margin-top: .75rem;
}

.card-unlock-popup {
    position: fixed;
    top: 82px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 3200;
}
.card-unlock-popup.hidden { display: none; }
.card-unlock-inner {
    min-width: 260px;
    padding: .9rem 1rem;
    background: rgba(21,16,40,.96);
    border: 2px solid rgba(240,180,41,.45);
    border-radius: var(--radius-lg);
    box-shadow: 0 12px 28px rgba(0,0,0,.35), 0 0 18px rgba(240,180,41,.08);
    text-align: center;
    animation: popupAppear .35s ease-out;
}
.card-envelope {
    position: relative;
    width: 132px;
    height: 170px;
    margin: 0 auto .75rem;
}
.card-envelope-body,
.card-envelope-flap {
    position: absolute;
    inset: 0;
    border-radius: 14px;
}
.card-envelope-body {
    background: linear-gradient(180deg, #3a2757, #241737);
    border: 2px solid rgba(240,180,41,.25);
    box-shadow: inset 0 -18px 40px rgba(0,0,0,.22);
}
.card-envelope-flap {
    height: 62%;
    inset: 0 0 auto 0;
    background: linear-gradient(180deg, #5b3a85, #3a2757);
    clip-path: polygon(0 0, 100% 0, 50% 92%);
    transform-origin: top center;
    animation: envelopeOpen .7s ease-out .25s forwards;
    border-top-left-radius: 12px;
    border-top-right-radius: 12px;
}
.card-unlock-preview {
    position: absolute;
    left: 50%;
    bottom: 14px;
    width: 102px;
    aspect-ratio: 3 / 4;
    transform: translateX(-50%) translateY(20px) scale(.86);
    border-radius: 10px;
    overflow: hidden;
    border: 2px solid rgba(240,180,41,.4);
    box-shadow: 0 10px 20px rgba(0,0,0,.28);
    animation: cardReveal .8s cubic-bezier(0.34, 1.56, 0.64, 1) .4s forwards;
    opacity: 0;
}
.card-unlock-preview img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
@keyframes envelopeOpen {
    from { transform: rotateX(0deg); }
    to { transform: rotateX(175deg); }
}
@keyframes cardReveal {
    from { opacity: 0; transform: translateX(-50%) translateY(20px) scale(.86); }
    to { opacity: 1; transform: translateX(-50%) translateY(-18px) scale(1); }
}
.card-unlock-label { font-size: .62rem; color: var(--gold); font-weight: 800; margin-bottom: .35rem; }
.card-unlock-name { font-size: .88rem; color: var(--text-bright); font-weight: 900; margin-bottom: .2rem; }
.card-unlock-series { font-size: .68rem; color: var(--text-dim); }
.recipe-entry:hover,
.community-item:hover { border-color: var(--border-mid); }
.recipe-top,
.community-top {
    display: flex;
    align-items: center;
    gap: .6rem;
    margin-bottom: .35rem;
}
.recipe-result-icon,
.community-icon { font-size: 1.35rem; flex-shrink: 0; }
.recipe-name,
.community-name { font-size: .82rem; font-weight: 800; }
.recipe-meta,
.community-meta { font-size: .68rem; color: var(--text-dim); }
.recipe-formula {
    display: flex;
    align-items: center;
    gap: .45rem;
    flex-wrap: wrap;
    margin-top: .45rem;
    font-size: .78rem;
}
.formula-chip {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    padding: 4px 8px;
    background: rgba(255,255,255,.03);
    border: 1px solid var(--border-subtle);
    border-radius: 999px;
}
.formula-op { color: var(--gold); font-weight: 700; }
.recipe-badge,
.community-badge {
    margin-left: auto;
    font-size: .66rem;
    padding: 2px 7px;
    border-radius: 4px;
    background: rgba(160,64,255,.12);
    color: var(--magic);
}
.community-group-title {
    font-family: var(--font-pixel);
    font-size: .38rem;
    color: var(--text-dim);
    letter-spacing: .08em;
    margin: .4rem 0 .1rem;
}
.archive-empty {
    color: var(--text-dim);
    font-style: italic;
    padding: .8rem 0;
}

.thinking-orbs { display: flex; justify-content: center; gap: 8px; margin-bottom: 1rem; }
.thinking-orbs span {
    width: 12px;
    height: 12px;
    background: var(--magic);
    border-radius: 2px;
    animation: thinkOrb 0.6s ease-in-out infinite;
}
.thinking-orbs span:nth-child(2) { animation-delay: 0.2s; }
.thinking-orbs span:nth-child(3) { animation-delay: 0.4s; }
@keyframes thinkOrb {
    0%, 100% { transform: translateY(0); opacity: 0.4; }
    50%       { transform: translateY(-12px); opacity: 1; }
}

/* ═══════════════════════════════════════
   GUILD TAB
═══════════════════════════════════════ */
.guild-container {
    height: 100%;
    overflow-y: auto;
    padding: 0 2rem 2rem;
    scrollbar-width: thin;
}
.guild-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 360px;
    gap: 1.5rem;
}
.guild-box {
    background: var(--bg-panel);
    border: 2px solid var(--border-dim);
    border-radius: var(--radius-lg);
    padding: 1rem 1.2rem;
    margin-bottom: 1.5rem;
}
.mission-list,.shop-list,.leaderboard-feed { display:flex; flex-direction:column; gap:.7rem; }
.mission-card,.shop-card,.leaderboard-entry-card {
    background: var(--bg-card);
    border: 2px solid var(--border-subtle);
    border-radius: var(--radius-md);
    padding: .85rem .95rem;
    transition: transform .15s ease, border-color .15s ease, box-shadow .15s ease;
}
.leaderboard-entry-card {
    width: 100%;
    color: inherit;
    text-align: left;
    cursor: pointer;
    font: inherit;
}
.mission-card:hover,.shop-card:hover,.leaderboard-entry-card:hover {
    border-color: var(--border-mid);
    transform: translateY(-1px);
}
.mission-card.ready {
    border-color: rgba(34,204,136,.35);
    box-shadow: 0 0 0 1px rgba(34,204,136,.12) inset;
}
.mission-card.claimed {
    opacity: .78;
    border-color: rgba(240,180,41,.28);
}
.shop-card.affordable {
    border-color: rgba(240,180,41,.22);
}
.shop-card.owned {
    border-color: rgba(34,204,136,.22);
}
.mission-top,.shop-top,.lb-top { display:flex; align-items:flex-start; gap:.7rem; }
.mission-icon,.shop-icon { font-size:1.4rem; flex-shrink:0; }
.mission-name,.shop-name,.lb-name { font-weight:800; font-size:.82rem; }
.mission-desc,.shop-desc,.lb-meta { font-size:.7rem; color:var(--text-dim); }
.mission-progress-row { display:flex; align-items:center; gap:.6rem; margin-top:.6rem; }
.mission-progress-track { flex:1; height:6px; background:var(--bg-raised); border-radius:3px; overflow:hidden; }
.mission-progress-fill { height:100%; background:linear-gradient(90deg,var(--magic),var(--gold)); }
.mission-progress-text { font-size:.68rem; color:var(--text-dim); min-width:58px; text-align:right; }
.mission-reward { margin-left:auto; font-size:.72rem; color:var(--gold); font-weight:700; }
.mission-actions,.shop-actions { display:flex; gap:.5rem; margin-top:.7rem; flex-wrap:wrap; }
.shop-price { margin-left:auto; color:var(--gold); font-weight:800; font-size:.78rem; }
.item-owned { color:var(--emerald); font-size:.72rem; font-weight:700; }
.lb-row { display:flex; align-items:center; gap:.6rem; }
.lb-rank-pill { min-width:26px; height:26px; display:flex; align-items:center; justify-content:center; background:var(--bg-raised); border-radius:6px; font-size:.72rem; font-weight:900; color:var(--gold); }
.lb-rank-pill.gold   { background: rgba(240,180,41,.16); color: var(--gold); }
.lb-rank-pill.silver { background: rgba(220,225,235,.12); color: #d8e0ea; }
.lb-rank-pill.bronze { background: rgba(191,120,72,.14); color: #d19162; }
.lb-score { margin-left:auto; color:var(--gold); font-weight:800; font-size:.78rem; }
.lb-you { border-color: rgba(240,180,41,.4); box-shadow: 0 0 0 1px rgba(240,180,41,.15) inset; }
.lb-extra { display:flex; gap:.8rem; flex-wrap:wrap; margin-top:.35rem; font-size:.68rem; color:var(--text-dim); }
.lb-title-chip {
    display: inline-flex;
    margin-top: .28rem;
    padding: 2px 7px;
    border-radius: 999px;
    font-size: .64rem;
    font-weight: 700;
    background: rgba(160,64,255,.1);
    color: var(--magic);
}

/* ─── MODAL ─── */
.modal-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.85);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 12px;
    z-index: 4000;
}
.modal-overlay.hidden { display: none; }

.modal-box {
    background: var(--bg-panel);
    border: 3px solid var(--magic);
    border-radius: var(--radius-lg);
    padding: 2rem;
    max-width: 400px;
    width: 90%;
    text-align: center;
    animation: popupAppear 0.3s ease-out;
    box-sizing: border-box;
}
.modal-box h3 { font-family: var(--font-pixel); font-size: 0.6rem; color: var(--magic); margin-bottom: 1rem; letter-spacing: 0.08em; }
.modal-box p  { color: var(--text-dim); font-size: 0.85rem; margin-bottom: 0.75rem; }
.modal-box input {
    width: 100%;
    padding: 10px 14px;
    background: var(--bg-card);
    border: 2px solid var(--border-dim);
    border-radius: var(--radius-sm);
    color: var(--text);
    font-family: var(--font-body);
    font-size: 0.9rem;
    margin-bottom: 1rem;
    outline: none;
}
.modal-box input:focus { border-color: var(--magic); }
.modal-btns { display: flex; gap: 8px; justify-content: center; margin-bottom: 1rem; }
.api-note { font-size: 0.72rem; color: var(--text-dim); }
.api-note a { color: var(--water); }

.profile-modal-box {
    max-width: min(1120px, 96vw);
    width: 96vw;
    max-height: 88vh;
    padding: 1.1rem 1.1rem 1.25rem;
    text-align: left;
    overflow: hidden;
}

.atlas-modal-box {
    max-width: min(1280px, 96vw);
    width: 96vw;
    max-height: min(90vh, calc(100vh - 24px));
    padding: 1rem 1rem 1.1rem;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.atlas-toolbar {
    display: flex;
    flex-direction: column;
    gap: .6rem;
    margin-bottom: .9rem;
    flex: 0 0 auto;
    min-width: 0;
}

.atlas-filters {
    flex-wrap: wrap;
}

.atlas-modal-head {
    margin-bottom: .85rem;
    flex: 0 0 auto;
}

.atlas-elements-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: .8rem;
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    overflow-x: hidden;
    padding-right: .2rem;
    padding-bottom: .35rem;
    align-content: start;
}
.profile-modal-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 1rem;
}
.profile-modal-head h3 { margin-bottom: .45rem; }
.profile-modal-head p { margin-bottom: 0; }
.profile-modal-body {
    max-height: calc(88vh - 92px);
    overflow-y: auto;
    padding-right: .2rem;
}
.profile-summary-grid {
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: .7rem;
    margin-bottom: 1rem;
}
.profile-stat-pill {
    background: rgba(255,255,255,.04);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-md);
    padding: .75rem .8rem;
    display: flex;
    flex-direction: column;
    gap: .2rem;
}
.profile-stat-pill strong {
    color: var(--text-bright);
    font-size: .95rem;
}
.profile-stat-pill span {
    color: var(--text-dim);
    font-size: .68rem;
}
.profile-section-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr);
    gap: 1rem;
    margin-bottom: 1rem;
}
.profile-box { margin-bottom: 1rem; }
.profile-collection-list {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: .75rem;
}
.profile-collection-card {
    background: var(--bg-card);
    border: 2px solid rgba(240,180,41,.18);
    border-radius: var(--radius-md);
    padding: .8rem .9rem;
}
.profile-collection-card.ai {
    border-color: rgba(160,64,255,.28);
}
.profile-collection-top {
    display: flex;
    gap: .7rem;
    align-items: flex-start;
    margin-bottom: .55rem;
}
.profile-collection-icon { font-size: 1.35rem; }
.profile-collection-name {
    font-size: .78rem;
    font-weight: 800;
    color: var(--text-bright);
}
.profile-collection-meta,
.profile-collection-reward {
    font-size: .66rem;
    color: var(--text-dim);
}
.profile-cards-grid {
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
}
.public-player-hero {
    margin-bottom: 1rem;
    background: linear-gradient(135deg, rgba(240,180,41,.08), rgba(160,64,255,.08));
}
.public-player-topline {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
}
.public-player-name {
    font-size: 1rem;
    font-weight: 900;
    color: var(--text-bright);
    margin-bottom: .3rem;
}
.public-player-title {
    color: var(--gold);
    font-size: .76rem;
    font-weight: 800;
}
.public-player-extra {
    display: flex;
    gap: .5rem;
    flex-wrap: wrap;
}
.public-player-extra span {
    padding: 4px 9px;
    border-radius: 999px;
    border: 1px solid rgba(255,255,255,.08);
    background: rgba(255,255,255,.04);
    color: var(--text-dim);
    font-size: .64rem;
    font-weight: 700;
}
.public-player-badges {
    margin-top: .9rem;
    display: flex;
    flex-wrap: wrap;
    gap: .45rem;
}
.public-achievement-badge {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    padding: 5px 10px;
    border-radius: 999px;
    background: rgba(255,255,255,.05);
    border: 1px solid rgba(255,255,255,.08);
    font-size: .64rem;
    font-weight: 800;
    color: var(--text);
}
.public-achievement-badge.rarity-rare { border-color: rgba(34,170,255,.24); color: var(--water); }
.public-achievement-badge.rarity-epic { border-color: rgba(160,64,255,.28); color: #e8dbff; }
.public-achievement-badge.rarity-legendary { border-color: rgba(240,180,41,.34); color: var(--gold); }
.public-discoveries-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    gap: .75rem;
}
.public-discovery-card {
    background: var(--bg-card);
    border: 2px solid var(--border-subtle);
    border-radius: var(--radius-md);
    padding: .85rem .9rem;
}
.public-discovery-card.rarity-rare { border-color: rgba(34,170,255,.24); }
.public-discovery-card.rarity-epic { border-color: rgba(160,64,255,.28); }
.public-discovery-card.rarity-legendary { border-color: rgba(240,180,41,.34); }
.public-discovery-icon { font-size: 1.55rem; margin-bottom: .45rem; }
.public-discovery-name { font-size: .76rem; font-weight: 800; color: var(--text-bright); margin-bottom: .35rem; }
.public-discovery-flavor { font-size: .66rem; color: var(--text-dim); line-height: 1.4; }

/* ─── GLOBAL HIDDEN ─── */
.hidden { display: none !important; }

/* ═══════════════════════════════════════
   LOGIN SCREEN
═══════════════════════════════════════ */
.login-screen {
    position: fixed;
    inset: 0;
    background: var(--bg-void);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 9000;
    animation: fadeIn 0.4s ease-out;
}

.login-screen.hidden { display: none !important; }

.login-box {
    text-align: center;
    padding: 3rem 4rem;
    background: var(--bg-panel);
    border: 3px solid var(--gold);
    border-radius: var(--radius-lg);
    box-shadow: 0 0 60px var(--gold-glow), 0 0 120px rgba(160,64,255,0.1);
    max-width: 480px;
    width: 90%;
    position: relative;
    overflow: hidden;
}

.login-box::before {
    content: '';
    position: absolute;
    inset: -100%;
    background: conic-gradient(from 0deg, transparent 0 20deg, rgba(240,180,41,0.03) 20deg 25deg, transparent 25deg);
    animation: raysRotate 12s linear infinite;
    pointer-events: none;
}

.login-flask {
    font-size: 5rem;
    display: block;
    margin-bottom: 1.2rem;
    animation: flaskPulse 3s ease-in-out infinite;
}

.login-title {
    font-family: var(--font-pixel);
    font-size: 1rem;
    color: var(--text-gold);
    text-shadow: 0 0 20px var(--gold-glow), 2px 2px 0 rgba(0,0,0,0.5);
    line-height: 2;
    margin-bottom: 0.5rem;
    letter-spacing: 0.05em;
}

.login-sub {
    color: var(--text-dim);
    font-size: 0.88rem;
    margin-bottom: 2.5rem;
    font-style: italic;
}

.login-form {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-bottom: 1.5rem;
}

.login-label {
    font-family: var(--font-pixel);
    font-size: 0.42rem;
    color: var(--text-dim);
    letter-spacing: 0.08em;
    text-align: left;
}

.login-input {
    padding: 12px 16px;
    background: var(--bg-card);
    border: 2px solid var(--border-dim);
    border-radius: var(--radius-sm);
    color: var(--text);
    font-family: var(--font-body);
    font-size: 1rem;
    font-weight: 600;
    outline: none;
    transition: border-color 0.15s, box-shadow 0.15s;
    text-align: center;
}
.login-input:focus {
    border-color: var(--gold);
    box-shadow: 0 0 15px var(--gold-glow);
}

.btn-login {
    padding: 14px 28px;
    background: linear-gradient(135deg, var(--gold) 0%, var(--fire) 100%);
    border: none;
    border-radius: var(--radius-sm);
    color: var(--bg-deep);
    font-family: var(--font-pixel);
    font-size: 0.55rem;
    font-weight: 900;
    letter-spacing: 0.08em;
    cursor: pointer;
    transition: all 0.15s;
    box-shadow: 0 4px 0 rgba(0,0,0,0.4);
}
.btn-login:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 0 rgba(0,0,0,0.4), 0 0 25px var(--gold-glow);
}
.btn-login:disabled { opacity: 0.4; cursor: not-allowed; transform: none; }

.btn-login--secondary {
    background: linear-gradient(135deg, #6a4fcf 0%, #9b59b6 100%);
}
.btn-login--ghost {
    background: transparent;
    border: 2px solid var(--border-dim);
    color: var(--text-dim);
    box-shadow: none;
    font-size: 0.45rem;
    padding: 10px 20px;
}
.btn-login--ghost:hover {
    border-color: var(--text-dim);
    box-shadow: none;
    transform: none;
}

.login-password-row {
    display: flex;
    flex-direction: column;
    gap: 6px;
    animation: fadeIn 0.2s ease;
}
.login-password-hint {
    font-size: 0.75rem;
    color: var(--text-dim);
    margin: 0;
    text-align: center;
    min-height: 1.1em;
}
.login-error {
    color: var(--fire);
    font-size: 0.78rem;
    text-align: center;
    min-height: 1.1em;
    animation: fadeIn 0.2s ease;
}

.login-offline-note {
    padding: 8px 12px;
    background: rgba(255,87,34,0.1);
    border: 1px solid rgba(255,87,34,0.3);
    border-radius: var(--radius-sm);
    color: var(--fire);
    font-size: 0.75rem;
    margin-bottom: 1rem;
}

.login-stats {
    display: flex;
    gap: 1rem;
    justify-content: center;
    padding-top: 1.5rem;
    border-top: 1px solid var(--border-subtle);
    margin-top: 1rem;
}
.login-stat-item { text-align: center; }
.ls-val {
    display: block;
    font-family: var(--font-pixel);
    font-size: 0.65rem;
    color: var(--gold);
    margin-bottom: 3px;
}
.ls-label { font-size: 0.65rem; color: var(--text-dim); }

/* ─── COMBINING OVERLAY ─── */
.combining-overlay {
    position: fixed;
    inset: 0;
    background: rgba(7,5,14,0.85);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 4500;
    animation: fadeIn 0.2s ease-out;
}

.combining-spinner {
    text-align: center;
    padding: 2.5rem 3.5rem;
    background: var(--bg-panel);
    border: 2px solid var(--magic);
    border-radius: var(--radius-lg);
    box-shadow: 0 0 40px rgba(160,64,255,0.3);
}

.spin-flask {
    font-size: 4rem;
    display: block;
    margin-bottom: 1rem;
    animation: spinSpin 1s linear infinite;
}
@keyframes spinSpin {
    0%   { transform: rotate(0deg) scale(1); }
    50%  { transform: rotate(180deg) scale(1.1); }
    100% { transform: rotate(360deg) scale(1); }
}

.spin-text {
    font-family: var(--font-pixel);
    font-size: 0.45rem;
    color: var(--magic);
    letter-spacing: 0.1em;
    margin-bottom: 1.2rem;
}

.spin-dots { display: flex; justify-content: center; gap: 8px; }
.spin-dots span {
    width: 10px; height: 10px;
    background: var(--magic);
    border-radius: 2px;
    animation: thinkOrb 0.6s ease-in-out infinite;
}
.spin-dots span:nth-child(2) { animation-delay: 0.2s; }
.spin-dots span:nth-child(3) { animation-delay: 0.4s; }

/* ─── INSTALL BUTTON / USER BADGE in header ─── */
.install-btn {
    padding: 6px 10px;
    background: linear-gradient(135deg, rgba(240,180,41,.16), rgba(160,64,255,.14));
    border: 2px solid var(--border-dim);
    border-radius: var(--radius-sm);
    color: var(--text);
    font-family: var(--font-body);
    font-size: .76rem;
    font-weight: 800;
    cursor: pointer;
    transition: all .15s;
    flex-shrink: 0;
}
.install-btn:hover { border-color: var(--gold); color: var(--gold); }

.user-badge {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 4px 10px;
    background: var(--bg-card);
    border: 2px solid var(--border-dim);
    border-radius: var(--radius-sm);
    cursor: pointer;
    transition: all 0.15s;
    flex-shrink: 0;
    appearance: none;
}
.user-badge:hover { border-color: var(--gold); }
.user-badge-icon { font-size: 1.2rem; }
.user-badge-name {
    font-family: var(--font-pixel);
    font-size: 0.42rem;
    color: var(--gold);
    max-width: 80px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* ─── SERVER STATUS DOT ─── */
.server-dot {
    width: 8px; height: 8px;
    border-radius: 2px;
    background: var(--text-dim);
    flex-shrink: 0;
    transition: background 0.3s;
}
.server-dot.online  { background: var(--emerald); box-shadow: 0 0 6px var(--emerald); }
.server-dot.offline { background: var(--text-dim); }
.server-dot.ai-active { background: var(--magic); box-shadow: 0 0 6px var(--magic); animation: aiPulse 1s ease-in-out infinite; }
@keyframes aiPulse { 0%,100%{opacity:1} 50%{opacity:0.4} }

/* ─── COLLECTIONS / FEATURED QUEST ─── */
.collections-section { margin-top: 10px; }

.featured-col-card {
    background: linear-gradient(135deg, rgba(160,64,255,.12), rgba(240,180,41,.08));
    border: 2px solid rgba(160,64,255,.35);
    border-radius: var(--radius-md);
    padding: 10px;
    margin-bottom: 10px;
}
.featured-col-card.just-completed-featured {
    animation: featuredVictoryPulse 1s ease-out 2;
    border-color: rgba(240,180,41,.65);
    box-shadow: 0 0 0 1px rgba(240,180,41,.18) inset, 0 0 22px rgba(240,180,41,.1);
}
.featured-col-card.locked {
    background: linear-gradient(135deg, rgba(112,96,160,.10), rgba(60,50,90,.10));
    border-color: var(--border-subtle);
}
.featured-top {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 6px;
}
.featured-icon { font-size: 1.5rem; flex-shrink: 0; }
.featured-title {
    font-size: .84rem;
    font-weight: 900;
    line-height: 1.35;
    overflow-wrap: anywhere;
}
.featured-sub { font-size: .66rem; color: var(--text-dim); }
.featured-hint {
    font-size: .74rem;
    color: var(--text);
    line-height: 1.45;
    margin-top: 6px;
}
.featured-next {
    display: inline-block;
    margin-top: 8px;
    padding: 4px 8px;
    background: rgba(240,180,41,.08);
    border: 1px solid rgba(240,180,41,.25);
    border-radius: 4px;
    font-size: .68rem;
    color: var(--gold);
    white-space: normal;
    overflow-wrap: anywhere;
    line-height: 1.4;
}
.featured-complete-banner {
    margin-top: 6px;
    padding: 6px 8px;
    border-radius: 6px;
    background: linear-gradient(135deg, rgba(240,180,41,.14), rgba(255,87,34,.08));
    border: 1px solid rgba(240,180,41,.28);
    color: var(--gold);
    font-size: .7rem;
    font-weight: 800;
}
.goal-transfer-fx {
    margin-top: 8px;
    padding: 7px 8px;
    border-radius: 8px;
    background: linear-gradient(135deg, rgba(80,48,160,.18), rgba(240,180,41,.08));
    border: 1px solid rgba(160,120,255,.28);
}
.goal-transfer-label {
    display: block;
    margin-bottom: 6px;
    font-size: .66rem;
    font-weight: 800;
    color: #efe5ff;
}
.goal-transfer-beam {
    position: relative;
    height: 6px;
    border-radius: 999px;
    overflow: hidden;
    background: rgba(255,255,255,.06);
}
.goal-transfer-beam::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, rgba(160,64,255,.18), rgba(240,180,41,.75), rgba(160,64,255,.18));
    opacity: .6;
}
.goal-transfer-beam span {
    position: absolute;
    top: 50%;
    left: -16px;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(255,245,185,.95) 0%, rgba(240,180,41,.85) 38%, rgba(240,180,41,0) 72%);
    transform: translateY(-50%);
    animation: goalTransferOrb 1.25s ease-in-out 2;
}

@keyframes featuredVictoryPulse {
    0% { transform: scale(.98); box-shadow: 0 0 0 0 rgba(240,180,41,.0); }
    45% { transform: scale(1.02); box-shadow: 0 0 0 10px rgba(240,180,41,.0), 0 0 28px rgba(240,180,41,.14); }
    100% { transform: scale(1); box-shadow: 0 0 0 0 rgba(240,180,41,.0); }
}

@keyframes goalTransferOrb {
    0% { left: -16px; opacity: .2; }
    15% { opacity: 1; }
    100% { left: calc(100% - 10px); opacity: .9; }
}

.col-card {
    position: relative;
    background: var(--bg-card);
    border: 2px solid var(--border-subtle);
    border-radius: var(--radius-md);
    padding: 10px;
    margin-bottom: 6px;
    cursor: pointer;
    transition: all 0.15s;
}
.col-card:hover { border-color: var(--border-mid); background: var(--bg-raised); }
.col-card.in-progress { border-color: rgba(160,64,255,.35); }
.col-card.completed {
    border-color: var(--gold-dim);
    background: rgba(240,180,41,.05);
    opacity: 0.8;
}
.col-card.followed-collection {
    border-color: rgba(240,180,41,.5);
    box-shadow: 0 0 0 1px rgba(240,180,41,.18) inset, 0 0 18px rgba(240,180,41,.08);
}
.col-card.just-completed {
    animation: collectionCompleteBurst 1.05s ease-out 2;
    border-color: rgba(240,180,41,.68);
    box-shadow: 0 0 0 1px rgba(240,180,41,.22) inset, 0 0 26px rgba(240,180,41,.12);
}
.col-card.locked-collection {
    border-color: rgba(112,96,160,.28);
    background: rgba(30,24,56,.78);
}

.col-header {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    margin-bottom: 6px;
}
.col-icon { font-size: 1.4rem; flex-shrink: 0; }
.col-info { flex: 1; min-width: 0; }
.col-name {
    font-size: .78rem;
    font-weight: 700;
    line-height: 1.3;
    white-space: normal;
    overflow-wrap: anywhere;
    padding-right: 6px;
}
.col-diff { font-size: .62rem; color: var(--text-dim); }
.col-follow-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-left: 6px;
    transform: translateY(-1px);
    filter: drop-shadow(0 0 6px rgba(240,180,41,.22));
}
.col-complete-stamp {
    position: absolute;
    top: 8px;
    right: 8px;
    padding: 3px 8px;
    border-radius: 999px;
    background: rgba(240,180,41,.14);
    border: 1px solid rgba(240,180,41,.35);
    color: var(--gold);
    font-size: .58rem;
    font-weight: 900;
    letter-spacing: .08em;
}

@keyframes collectionCompleteBurst {
    0% { transform: scale(.97); }
    35% { transform: scale(1.02); }
    100% { transform: scale(1); }
}
.col-progress-ring {
    flex-shrink: 0;
    width: 32px;
    height: 32px;
    border: 2px solid var(--border-dim);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
}
.col-pct { font-size: .6rem; font-weight: 700; color: var(--gold); }

.col-bar {
    height: 4px;
    background: var(--bg-raised);
    border-radius: 2px;
    overflow: hidden;
    margin-bottom: 4px;
}
.col-bar-fill { height: 100%; border-radius: 2px; transition: width .5s ease; }
.col-count { font-size: .65rem; color: var(--text-dim); }

/* Collection expanded elements list */
.col-elements {
    margin-top: 8px;
    padding-top: 8px;
    border-top: 1px solid var(--border-subtle);
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.col-elements.hidden { display: none; }

.col-el {
    font-size: .72rem;
    color: var(--text-dim);
    padding: 3px 0;
    display: flex;
    align-items: flex-start;
    gap: 4px;
    flex-wrap: wrap;
}
.col-el.found { color: var(--emerald); }
.col-el.missing { color: var(--text); opacity: .88; }
.col-hint {
    font-size: .65rem;
    color: var(--text-dim);
    font-style: italic;
    opacity: 0.7;
}
.col-target-preview {
    margin-top: 8px;
    padding-top: 8px;
    border-top: 1px dashed rgba(240,180,41,.18);
}

.col-target-list {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.col-target-pill {
    display: inline-flex;
    align-items: center;
    padding: 4px 8px;
    border-radius: 999px;
    background: rgba(255,255,255,.05);
    border: 1px solid rgba(255,255,255,.07);
    color: var(--text);
    font-size: .66rem;
    line-height: 1.35;
    overflow-wrap: anywhere;
}

.col-route-block {
    margin-top: 8px;
    padding-top: 8px;
    border-top: 1px dashed rgba(160,120,255,.18);
}
.col-route-title {
    font-size: .66rem;
    color: var(--gold);
    font-weight: 800;
    margin-bottom: 6px;
}
.col-route-list {
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.col-route-node {
    font-size: .68rem;
    color: var(--text-dim);
    line-height: 1.45;
    overflow-wrap: anywhere;
    word-break: break-word;
}
.col-route-node.intermediate { color: #d1c2ff; }
.col-route-node.target { color: var(--text); }
.col-route-node.found { color: var(--emerald); }
.col-route-node.missing { opacity: .9; }

.col-reward {
    margin-top: 6px;
    padding: 6px 8px;
    background: rgba(240,180,41,.08);
    border: 1px solid var(--border-dim);
    border-radius: var(--radius-sm);
    font-size: .72rem;
    color: var(--gold);
}

/* ─── HISTORY VARIANTS ─── */
.history-entry.player { color: var(--emerald); }
.history-entry.ai     { color: var(--ruby); }
.history-result { font-size: 1rem; }
.history-target { flex: 1; }
.history-winner { font-weight: 700; font-size: 0.75rem; }
.empty-history  { color: var(--text-dim); font-style: italic; font-size: 0.8rem; }

/* ─── TIMER VALUE (arena.js uses .timer-value) ─── */
.timer-value { font-size: 2rem; }
.timer-unit  { font-size: 1rem; }

/* ═══════════════════════════════════════
   MOBILE PANEL OVERLAYS
   Quest rail y Dossier como overlays en móvil
═══════════════════════════════════════ */
.mobile-panel-btn { display: none; }

.mobile-overlay {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 500;
    pointer-events: none;
}
.mobile-overlay.open {
    display: block;
    pointer-events: auto;
}
.mobile-overlay-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(0,0,0,.55);
}
.mobile-overlay-panel {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    max-height: 72vh;
    display: flex;
    flex-direction: column;
    background: var(--bg-panel);
    border-top: 2px solid var(--border-dim);
    border-radius: var(--radius-lg) var(--radius-lg) 0 0;
    overflow: hidden;
    box-shadow: 0 -8px 40px rgba(0,0,0,.6);
    animation: slideUpPanel .22s cubic-bezier(.32,1,.6,1);
}
@keyframes slideUpPanel {
    from { transform: translateY(100%); }
    to   { transform: translateY(0); }
}
.mobile-overlay-handle {
    width: 36px;
    height: 4px;
    background: var(--border-mid);
    border-radius: 2px;
    margin: 10px auto 0;
    flex-shrink: 0;
}
.mobile-overlay-content {
    flex: 1;
    overflow-y: auto;
    min-height: 0;
}

/* ═══════════════════════════════════════
   RESPONSIVE
═══════════════════════════════════════ */
@media (max-width: 1100px) {
    .boss-layout { grid-template-columns: 1fr; }
}

@media (max-width: 1280px) {
    .lab-layout {
        grid-template-columns: 290px minmax(0, 1fr) 320px;
        grid-template-rows: minmax(0, 1fr) minmax(220px, 28vh);
    }
    .lab-quest-rail { width: 290px; }
    .elements-panel { width: 320px; }
    .lab-insights-dock { grid-template-columns: 1fr; }
}

@media (max-width: 1100px) {
    .lab-quest-rail { width: 280px; }
    .lab-layout { grid-template-columns: 280px minmax(0, 1fr) 300px; }
    .elements-panel { width: 300px; }
    .achievements { grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); }
    .atlas-elements-grid { grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); }
}

@media (max-width: 900px) {
    /* ─── LAYOUT ROOT ─── */
    html, body { overflow: hidden; }

    /* ─── HEADER: compacto, solo logo + stats ─── */
    .game-header {
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        z-index: 300;
        flex-wrap: nowrap;
        height: auto;
        min-height: 52px;
        padding: calc(env(safe-area-inset-top, 0px) + 6px) 10px 6px;
        gap: 6px;
    }
    .logo { flex-shrink: 0; gap: 6px; }
    .logo-flask { font-size: 1.5rem; }
    .logo-title { font-size: .44rem; }

    /* Stats bar: scrollable en una línea, sin etiquetas */
    .stats-bar {
        flex: 1;
        overflow-x: auto;
        overflow-y: hidden;
        scrollbar-width: none;
        flex-wrap: nowrap;
        gap: 4px;
        min-width: 0;
    }
    .stats-bar::-webkit-scrollbar { display: none; }
    .stats-bar .chip-label { display: none; }
    .stat-chip { min-width: 40px; padding: 3px 7px; gap: 3px; flex-shrink: 0; }
    .chip-icon { font-size: .9rem; }
    .chip-val { font-size: .58rem; }
    .user-badge { flex-shrink: 0; }
    .user-badge-name { max-width: 60px; }
    .install-btn { display: none; }
    .server-dot { flex-shrink: 0; }

    /* Tab nav: barra fija en la parte inferior del viewport */
    .tab-nav {
        position: fixed;
        bottom: 0;
        left: 0;
        right: 0;
        z-index: 300;
        display: flex;
        gap: 0;
        justify-content: stretch;
        background: var(--bg-panel);
        border-top: 2px solid var(--border-dim);
        padding-bottom: env(safe-area-inset-bottom, 0px);
        box-shadow: 0 -4px 20px rgba(0,0,0,.5);
    }
    .tab {
        flex: 1;
        justify-content: center;
        flex-direction: column;
        gap: 2px;
        min-height: 52px;
        padding: .4rem .2rem;
        border: none;
        border-radius: 0;
        border-top: 2px solid transparent;
        font-size: .36rem;
    }
    .tab.active {
        border-color: var(--gold);
        background: rgba(240,180,41,.06);
        box-shadow: none;
    }
    .tab-label {
        display: block;
        font-size: .32rem;
        line-height: 1;
    }
    .tab-icon { font-size: 1.2rem; }

    /* ─── MAIN AREA: entre header y tab nav ─── */
    .game-main {
        position: fixed;
        top: calc(env(safe-area-inset-top, 0px) + 52px);
        bottom: calc(env(safe-area-inset-bottom, 0px) + 54px);
        left: 0;
        right: 0;
        height: auto;
        overflow: hidden;
    }
    .tab-pane { height: 100%; overflow: hidden; }

    /* ─── LAB LAYOUT: canvas máximo, elementos abajo ─── */
    .lab-layout {
        display: flex;
        flex-direction: column;
        height: 100%;
        overflow: hidden;
        gap: 0;
    }

    /* Canvas area ocupa todo el espacio restante */
    .canvas-area {
        flex: 1;
        min-height: 0;
        display: flex;
        flex-direction: column;
        border-right: none;
        border-bottom: 2px solid var(--border-subtle);
    }
    .lab-canvas {
        flex: 1;
        min-height: 0;
        background-size: 28px 28px;
    }

    /* Toolbar del canvas más compacta */
    .canvas-toolbar {
        height: auto;
        min-height: 44px;
        gap: 6px;
        align-items: center;
        flex-wrap: nowrap;
        padding: 6px 10px;
    }
    .toolbar-right {
        gap: 8px;
        margin-left: auto;
    }
    .progress-track { width: min(36vw, 160px); }
    .clear-btn { padding: 5px 10px; font-size: .7rem; }

    /* Discoveries bar: siempre horizontal, compacta */
    .discoveries-bar {
        flex-direction: row;
        align-items: center;
        height: 36px;
        min-height: 36px;
        padding: 0 8px;
        overflow-x: auto;
        flex-wrap: nowrap;
        scrollbar-width: none;
        flex-shrink: 0;
    }
    .discoveries-bar::-webkit-scrollbar { display: none; }
    .discoveries-list {
        flex-direction: row;
        flex-wrap: nowrap;
        width: auto;
    }
    .bar-label { flex-shrink: 0; font-size: .6rem; white-space: nowrap; }
    .discovery-item { padding: 2px 6px; font-size: .65rem; flex-shrink: 0; }

    /* Panel de elementos: drawer fijo en la parte inferior del lab */
    .elements-panel {
        width: 100%;
        height: min(38vh, 280px);
        min-height: 120px;
        max-height: 50vh;
        border-top: 2px solid var(--border-dim);
        border-left: none;
        box-shadow: 0 -8px 24px rgba(0,0,0,.4);
        flex-shrink: 0;
    }
    .element-picker-head {
        flex-direction: row;
        align-items: center;
        flex-wrap: wrap;
        gap: 6px;
        padding: 6px 10px;
    }
    .atlas-open-btn { margin-left: auto; }
    .elements-grid { grid-template-columns: repeat(4, 1fr); }
    .element-card { min-height: 72px; padding: 6px 4px; }
    .element-card .element-icon { font-size: 1.5rem; }
    .element-card .element-name { font-size: .58rem; }
    .atlas-elements-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); max-height: 60vh; }

    /* Quest rail y Insights: OCULTOS por defecto en móvil,
       accesibles desde botones del canvas toolbar */
    .lab-quest-rail { display: none; }
    .lab-insights-dock { display: none; }

    /* Mobile panel overlay buttons: visibles solo en móvil */
    .mobile-panel-btn { display: inline-flex; }

    /* ─── OTROS TABS ─── */
    .crisol-container,
    .arena-container,
    .boss-container,
    .oracle-container,
    .archive-container,
    .guild-container { padding: 0 .9rem 1rem; }

    .crisol-hub-grid { grid-template-columns: 1fr; }
    .crisol-side-panel { position: static; }
    .crisol-mode-strip { grid-template-columns: 1fr; }

    .archive-layout { grid-template-columns: 1fr; }
    .guild-layout { grid-template-columns: 1fr; }
    .archive-search { min-width: 0; width: 100%; }
    .archive-toolbar { align-items: stretch; flex-direction: column; }
    .cards-showcase-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .profile-summary-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .profile-section-grid { grid-template-columns: 1fr; }
    .profile-modal-box { width: 98vw; max-height: 92vh; }

    .arena-battle-grid { grid-template-columns: 1fr; }
    .battle-center { order: -1; }
    .oracle-modes { grid-template-columns: 1fr; }
    .oracle-input-row { flex-direction: column; }
    .btn-oracle { width: 100%; }

    /* Pixel fonts: más grandes y legibles */
    .quest-rail-title { font-size: .52rem; }
    .quest-rail-sub { font-size: .74rem; }
    .section-title { font-size: .46rem !important; }
}

@media (max-width: 600px) {
    .guild-box, .archive-box { padding: .9rem .85rem; }
    .cards-showcase-grid { grid-template-columns: 1fr; }
    .profile-summary-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .profile-modal-head { flex-direction: column; }
    .profile-modal-box { padding: .9rem .8rem 1rem; }
    .atlas-modal-box { width: 98vw; padding: .9rem .8rem 1rem; }

    .crisol-container { padding: 0 .75rem .9rem; }
    .crisol-side-box { padding: .8rem; }
    .crisol-mode-card { padding: .8rem .85rem; }

    .elements-panel { height: min(36vh, 260px); }
    .elements-grid { grid-template-columns: repeat(3, 1fr); }
    .atlas-elements-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }

    .canvas-token { width: 76px; min-height: 68px; padding: 7px 3px 6px; }
    .canvas-token .token-name { font-size: .56rem; max-width: 68px; }

    .slot-row { gap: 8px; }
    .craft-slot, .duel-slot { width: 88px; height: 88px; }
    .slot-plus { font-size: 1.4rem; }

    .boss-card-main { flex-direction: column; align-items: flex-start; }
    .boss-avatar-wrap { width: 80px; height: 80px; }
    .boss-avatar { font-size: 2.8rem; }

    .popup-content { width: min(92vw, 420px); padding: 1.8rem 1.1rem; }
    .popup-name { font-size: .8rem; line-height: 1.8; }
    .popup-icon { font-size: 4rem; }

    .login-box { padding: 1.8rem 1.1rem; width: min(94vw, 420px); }
    .login-title { font-size: .7rem; }
    .login-stats { gap: .5rem; flex-wrap: wrap; }

    /* ─── TOAST: rise above tab nav ─── */
    .toast-container {
        bottom: calc(env(safe-area-inset-bottom, 0px) + 58px + 1rem);
        right: 1rem;
        left: 1rem;
        align-items: center;
    }
    .toast { max-width: 100%; }

    /* ─── CANVAS HINT: arrow points down on mobile ─── */
    .hint-arrow { display: none; }
    .canvas-hint::after {
        content: '↓';
        font-size: 2rem;
        color: var(--gold);
        margin-top: 1rem;
        animation: arrowPulse 1.5s ease-in-out infinite;
    }
}

@media (max-width: 420px) {
    .game-header { min-height: 48px; }
    .game-main { top: calc(env(safe-area-inset-top, 0px) + 48px); }
    .tab { min-height: 50px; padding: .35rem .15rem; }
    .tab-icon { font-size: 1.1rem; }
    .tab-label { font-size: .3rem; }
    .elements-panel { height: min(34vh, 240px); }
    .elements-grid { grid-template-columns: repeat(3, 1fr); }
    .element-card { min-height: 64px; }
    .element-card .element-icon { font-size: 1.3rem; }
    .canvas-token { width: 68px; min-height: 62px; }
    .canvas-token .token-name { font-size: .52rem; max-width: 62px; }
    .hint-btn { font-size: .7rem; }
    .archive-search { min-width: 0; }
    .mission-top, .shop-top, .lb-row { gap: .5rem; }
}

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