/* ============================================================================
   style.css  –  Triblix Level Overview Website
   Adapted from Assets/UI/LevelViewerStyles.uss and WorldOverviewStyles.uss
   Dark theme matching the Unity in-game visual design.
   ============================================================================ */

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

:root {
    --bg-deep:       #12163a;   /* root background  rgb(18,22,48) */
    --bg-card:       #1a2040;   /* card background  rgb(26,32,64) */
    --bg-card-alt:   #1e2648;   /* alternating row  rgb(30,38,72) */
    --border-dim:    rgba(255,255,255,0.08);
    --border-light:  rgba(255,255,255,0.20);
    --text-primary:  #ffffff;
    --text-secondary:rgba(255,255,255,0.65);
    --text-goal:     #ffe664;
    --text-extra:    #a0c0dc;
    --accent-hover:  rgba(255,255,255,0.18);

    /* Bubble palette */
    --color-green:   #4dd98e;
    --color-yellow:  #f7d84e;
    --color-red:     #e05050;
    --color-cyan:    #4ecfee;
    --color-blue:    #4988e8;

    /* Overlay tints */
    --tint-frozen:   rgba(100, 180, 255, 0.55);
    --tint-frost:    rgba(160, 220, 255, 0.40);
    --tint-fog:      rgba(80,  90,  130, 0.78);

    /* Misc */
    --radius-card:   14px;
    --radius-bubble: 50%;
    font-family: system-ui, 'Segoe UI', sans-serif;
}

html, body {
    height: 100%;
    background: var(--bg-deep);
    color: var(--text-primary);
}

/* ---------- Top bar ---------- */
.top-bar {
    position: sticky;
    top: 0;
    z-index: 100;
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 14px 28px;
    background: var(--bg-deep);
    border-bottom: 2px solid var(--border-dim);
    backdrop-filter: blur(8px);
}

.top-bar__title {
    flex: 1;
    font-size: 1.5rem;
    font-weight: 700;
    letter-spacing: 0.03em;
    white-space: nowrap;
}

.top-bar__subtitle {
    font-size: 0.85rem;
    color: var(--text-secondary);
    white-space: nowrap;
}

.search-field {
    min-width: 220px;
    max-width: 340px;
    flex: 1 1 220px;
    height: 38px;
    background: rgba(255,255,255,0.08);
    border: 2px solid var(--border-light);
    border-radius: 20px;
    padding: 0 16px;
    color: var(--text-primary);
    font-size: 0.9rem;
    outline: none;
    transition: border-color 0.15s, background 0.15s;
}

.search-field::placeholder { color: var(--text-secondary); }

.search-field:focus {
    background: rgba(255,255,255,0.12);
    border-color: rgba(255,255,255,0.4);
}

/* ---------- Main content area ---------- */
.content {
    padding: 24px 24px 48px;
    max-width: 1600px;
    margin: 0 auto;
}

/* ---------- World sections ---------- */
.world-section {
    margin-bottom: 40px;
    padding: 20px 20px 24px;
    background: var(--bg-card);   /* fallback for browsers without color-mix() */
    background: color-mix(in srgb, var(--world-bg, #1a2040) 30%, #12163a 70%);
    border: 1px solid var(--border-dim);
    border-radius: 18px;
}

.world-heading {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 16px;
}

.world-emoji {
    font-size: 2rem;
    line-height: 1;
}

.world-name {
    font-size: 1.25rem;
    font-weight: 700;
}

.world-range {
    font-size: 0.85rem;
    color: var(--text-secondary);
    margin-left: auto;
}

/* ---------- Levels grid ---------- */
.levels-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(108px, 1fr));
    gap: 10px;
}

/* ---------- Level card ---------- */
.level-card {
    background: var(--bg-card);
    border: 2px solid var(--border-dim);
    border-radius: var(--radius-card);
    overflow: hidden;
    cursor: pointer;
    transition: transform 0.12s, border-color 0.12s, box-shadow 0.12s;
    user-select: none;
}

.level-card:hover {
    transform: translateY(-3px) scale(1.03);
    border-color: rgba(255,255,255,0.35);
    box-shadow: 0 8px 24px rgba(0,0,0,0.5);
}

.level-card:active {
    transform: translateY(0) scale(0.98);
}

/* Mini grid thumbnail */
.level-card__thumb {
    padding: 6px;
}

/* Footer bar inside each card */
.level-card__footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 4px 8px 6px;
    background: rgba(0,0,0,0.25);
    border-top: 1px solid var(--border-dim);
}

.level-card__num {
    font-size: 0.78rem;
    font-weight: 700;
    color: var(--text-primary);
}

.level-card__info {
    font-size: 0.72rem;
    color: var(--text-secondary);
}

/* ---------- Grid container ---------- */
.grid-container {
    display: flex;
    flex-direction: column;
    gap: 1px;
}

/* Mini thumbnail sizing */
.grid-container--mini .grid-row  { display: flex; gap: 1px; }
.grid-container--mini .cell      { width: 11px; height: 11px; border-radius: 3px; }

/* Full detail sizing */
.grid-container--full .grid-row  { display: flex; gap: 3px; }
.grid-container--full .cell      { width: 52px; height: 52px; border-radius: 10px; }

/* ---------- Grid cell ---------- */
.cell {
    position: relative;
    flex-shrink: 0;
    overflow: hidden;
}

/* ---------- Bubble ---------- */
.bubble {
    position: absolute;
    inset: 0;
    margin: 10%;
    border-radius: var(--radius-bubble);
    background: var(--bubble-color, #888);
    box-shadow: inset 0 -2px 4px rgba(0,0,0,0.3), inset 0 2px 3px rgba(255,255,255,0.35);
    transition: background 0.2s;
}

/* Color-changing: rainbow ring */
.bubble--color-changing {
    background: conic-gradient(
        #4dd98e, #f7d84e, #e05050, #4ecfee, #4988e8, #4dd98e
    ) !important;
    border-radius: var(--radius-bubble);
    box-shadow: 0 0 6px 2px rgba(200,150,255,0.5), inset 0 2px 3px rgba(255,255,255,0.25);
}

/* Color-popping: starburst */
.bubble--color-popping {
    background: var(--bubble-color, #888) !important;
    box-shadow: 0 0 0 3px rgba(255,200,0,0.7), inset 0 -2px 4px rgba(0,0,0,0.3);
    clip-path: polygon(
        50%  0%,  61% 35%, 98% 35%,
        68% 57%, 79% 91%, 50% 70%,
        21% 91%, 32% 57%,  2% 35%,
        39% 35%
    );
    border-radius: 0;
}

/* Stone obstacle: dark rocky look */
.bubble--stone {
    background: radial-gradient(circle at 40% 35%, #7a7a7a, #3a3a3a) !important;
    border-radius: 6px !important;
    box-shadow: inset 0 -2px 4px rgba(0,0,0,0.5), inset 0 2px 3px rgba(255,255,255,0.15);
}

/* Slime bubble: green blob with uneven shape */
.bubble--slime {
    background: radial-gradient(circle at 40% 35%, #7ee868, #3a7a2a) !important;
    border-radius: 40% 60% 55% 45% / 45% 55% 45% 55% !important;
    box-shadow: inset 0 -2px 4px rgba(0,0,0,0.4), 0 0 4px rgba(60,200,40,0.6);
}

/* Portal: glowing ring in pair colour */
.bubble--portal {
    background: radial-gradient(circle, rgba(255,255,255,0.15) 20%, var(--portal-color, #c040e0) 100%) !important;
    box-shadow:
        0 0 6px 3px var(--portal-color, #c040e0),
        inset 0 0 8px rgba(255,255,255,0.3);
}

/* ---------- Overlays (frozen / frost / fog) ---------- */
.overlay {
    position: absolute;
    inset: 0;
    border-radius: inherit;
    pointer-events: none;
}

.overlay--frozen {
    background: var(--tint-frozen);
    border: 2px solid rgba(120, 200, 255, 0.8);
    border-radius: 4px;   /* square-ish for frozen */
}

.overlay--frost {
    background: var(--tint-frost);
    border: 2px solid rgba(180, 230, 255, 0.6);
    border-radius: 4px;
    opacity: 0.75;
}

.overlay--fog {
    background: var(--tint-fog);
    backdrop-filter: blur(1px);
}

/* Pattern on fog overlay */
.overlay--fog::after {
    content: '';
    position: absolute;
    inset: 0;
    background: repeating-linear-gradient(
        135deg,
        rgba(255,255,255,0.06) 0px,
        rgba(255,255,255,0.06) 2px,
        transparent 2px,
        transparent 8px
    );
}

/* ---------- Static obstacle cell ---------- */
.cell--static-obstacle {
    background: #1a1a2a;
    border: 1px dashed rgba(255,80,80,0.5);
    border-radius: 4px;
}

.cell--static-obstacle::after {
    content: '✕';
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.55em;
    color: rgba(255,80,80,0.7);
}

/* ---------- Key indicator ---------- */
.key-indicator {
    position: absolute;
    top: 1px;
    right: 1px;
    font-size: 0.55em;
    line-height: 1;
    pointer-events: none;
    filter: drop-shadow(0 0 2px rgba(255,210,0,0.9));
    z-index: 10;
}

/* ---------- Detail overlay ---------- */
.detail-overlay {
    position: fixed;
    inset: 0;
    z-index: 200;
    background: rgba(0,0,0,0.7);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
    opacity: 0;
    transition: opacity 0.18s;
    backdrop-filter: blur(4px);
}

.detail-overlay--open { opacity: 1; }

/* ---------- Detail panel ---------- */
.detail-panel {
    background: var(--bg-card);
    border: 2px solid var(--border-light);
    border-radius: 20px;
    max-width: 640px;
    width: 100%;
    max-height: 90vh;      /* fallback for browsers without dvh */
    max-height: 90dvh;
    overflow-y: auto;
    padding: 28px;
    display: flex;
    flex-direction: column;
    gap: 20px;
    box-shadow: 0 24px 64px rgba(0,0,0,0.8);
    scrollbar-width: thin;
    scrollbar-color: rgba(255,255,255,0.15) transparent;
}

.detail-header {
    display: flex;
    align-items: flex-start;
    gap: 12px;
}

.detail-title {
    flex: 1;
    font-size: 1.3rem;
    font-weight: 700;
    line-height: 1.3;
}

.detail-close {
    background: rgba(255,255,255,0.08);
    border: 2px solid var(--border-light);
    color: var(--text-primary);
    border-radius: 50%;
    width: 36px;
    height: 36px;
    font-size: 1rem;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    transition: background 0.1s;
}

.detail-close:hover { background: var(--accent-hover); }

/* ---------- Meta chips ---------- */
.detail-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.meta-chip {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    background: rgba(255,255,255,0.07);
    border: 1px solid var(--border-dim);
    border-radius: 20px;
    padding: 4px 12px;
    font-size: 0.82rem;
    color: var(--text-extra);
}

.meta-label {
    color: var(--text-secondary);
    font-size: 0.75rem;
}

/* ---------- Detail grid ---------- */
.detail-grid-wrap {
    display: flex;
    justify-content: center;
    padding: 4px;
    background: rgba(0,0,0,0.2);
    border-radius: 14px;
}

/* ---------- Legend ---------- */
.legend {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.legend-item {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 0.78rem;
    color: var(--text-secondary);
}

.legend-swatch {
    width: 18px;
    height: 18px;
    border-radius: 4px;
    flex-shrink: 0;
}

.legend-swatch--frozen        { background: var(--tint-frozen);   border: 2px solid rgba(120,200,255,0.8); border-radius: 2px; }
.legend-swatch--frost         { background: var(--tint-frost);    border: 2px solid rgba(180,230,255,0.6); border-radius: 2px; opacity: 0.75; }
.legend-swatch--fog           { background: var(--tint-fog); }
.legend-swatch--color-changing{ background: conic-gradient(#4dd98e,#f7d84e,#e05050,#4ecfee,#4988e8,#4dd98e); border-radius: 50%; }
.legend-swatch--color-popping { background: #888; box-shadow: 0 0 0 3px rgba(255,200,0,0.7); border-radius: 50%; }
.legend-swatch--stone         { background: radial-gradient(circle at 40% 35%, #7a7a7a, #3a3a3a); border-radius: 2px; }
.legend-swatch--slime         { background: radial-gradient(circle at 40% 35%, #7ee868, #3a7a2a); border-radius: 40% 60%; }
.legend-swatch--portal        { background: radial-gradient(circle, rgba(255,255,255,0.2) 20%, #c040e0 100%); border-radius: 50%; box-shadow: 0 0 4px 2px #c040e0; }
.legend-swatch--static        { background: #1a1a2a; border: 1px dashed rgba(255,80,80,0.5); }
.legend-swatch--key           { background: #ffd700; border-radius: 50%; }

/* ---------- No results ---------- */
.no-results {
    color: var(--text-secondary);
    padding: 20px 0;
    text-align: center;
    font-size: 0.95rem;
}

/* ---------- Scrollbar (Webkit) ---------- */
::-webkit-scrollbar             { width: 6px; height: 6px; }
::-webkit-scrollbar-track       { background: transparent; }
::-webkit-scrollbar-thumb       { background: rgba(255,255,255,0.15); border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: rgba(255,255,255,0.28); }

/* ---------- Responsive tweaks ---------- */
@media (max-width: 600px) {
    .top-bar__subtitle { display: none; }
    .levels-grid { grid-template-columns: repeat(auto-fill, minmax(90px, 1fr)); }
    .detail-panel { padding: 18px; }
    .grid-container--full .cell { width: 38px; height: 38px; }
}