/* ── REGISTERED CUSTOM PROPERTIES (enables CSS variable transitions) ─────── */

@property --tier-panel-bg {
    syntax: '<color>';
    inherits: true;
    initial-value: #2a2318;
}
@property --tier-panel-border {
    syntax: '<color>';
    inherits: true;
    initial-value: rgba(180, 140, 80, 0.25);
}
@property --tier-panel-hover {
    syntax: '<color>';
    inherits: true;
    initial-value: rgba(255, 220, 150, 0.08);
}
@property --tier-menu-bg {
    syntax: '<color>';
    inherits: true;
    initial-value: #1e1a13;
}
@property --tier-accent {
    syntax: '<color>';
    inherits: true;
    initial-value: #c8902a;
}
@property --tier-accent-dim {
    syntax: '<color>';
    inherits: true;
    initial-value: rgba(200, 144, 42, 0.45);
}
@property --tier-accent-text {
    syntax: '<color>';
    inherits: true;
    initial-value: rgba(200, 144, 42, 0.6);
}
@property --tier-text {
    syntax: '<color>';
    inherits: true;
    initial-value: #e8d9b5;
}
@property --tier-text-dim {
    syntax: '<color>';
    inherits: true;
    initial-value: rgba(232, 217, 181, 0.55);
}
@property --tier-quote {
    syntax: '<color>';
    inherits: true;
    initial-value: rgba(232, 217, 181, 0.35);
}
@property --tier-tab-active {
    syntax: '<color>';
    inherits: true;
    initial-value: #e8d9b5;
}
@property --tier-tab-border {
    syntax: '<color>';
    inherits: true;
    initial-value: #c8902a;
}
@property --tier-border-done {
    syntax: '<color>';
    inherits: true;
    initial-value: rgba(200, 144, 42, 0.4);
}
@property --tier-border-prog {
    syntax: '<color>';
    inherits: true;
    initial-value: rgba(100, 180, 255, 0.6);
}

* {
    box-sizing: border-box;
    font-family: 'Raleway', sans-serif;
}

html,
body {
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
    background-color: #000000;
    overflow: visible;
}

#game {
    overflow: hidden;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

canvas {
    position: absolute;
    top: 0;
    left: 0;
    display: block;
}

#background-canvas {
    position: absolute;
    z-index: 1;
    top: 0;
    left: 0;
}

#string-canvas {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 3;
}

#ritual-canvas {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 4;
    pointer-events: none;
}

/* ── TIER COLOUR TOKENS ──────────────────────────────────────────────────── */
/*
  JavaScript sets data-tier="1" through "5" on #menu.
  @property declarations above make these transitionable.
  The transition: 4s ease on #menu animates all of them simultaneously.

  Tier 1 (pastoral):   warm amber/brown
  Tier 2 (industrial): cooler grey-green
  Tier 3 (science):    cold blue-grey
  Tier 4 (cosmic):     deep purple-black
  Tier 5 (mythic/end): near-black with faint red tint
*/

#menu {
    --tier-panel-bg:     #2a2318;
    --tier-panel-border: rgba(180, 140, 80, 0.25);
    --tier-panel-hover:  rgba(255, 220, 150, 0.08);
    --tier-menu-bg:      #1e1a13;
    --tier-accent:       #c8902a;
    --tier-accent-dim:   rgba(200, 144, 42, 0.45);
    --tier-accent-text:  rgba(200, 144, 42, 0.6);
    --tier-text:         #e8d9b5;
    --tier-text-dim:     rgba(232, 217, 181, 0.55);
    --tier-quote:        rgba(232, 217, 181, 0.35);
    --tier-tab-active:   #e8d9b5;
    --tier-tab-border:   #c8902a;
    --tier-border-done:  rgba(200, 144, 42, 0.4);
    --tier-border-prog:  rgba(100, 180, 255, 0.6);

    /* This single transition animates ALL registered custom properties */
    transition:
        transform 0.3s ease,
        --tier-panel-bg     4s ease,
        --tier-panel-border 4s ease,
        --tier-panel-hover  4s ease,
        --tier-menu-bg      4s ease,
        --tier-accent       4s ease,
        --tier-accent-dim   4s ease,
        --tier-accent-text  4s ease,
        --tier-text         4s ease,
        --tier-text-dim     4s ease,
        --tier-quote        4s ease,
        --tier-tab-active   4s ease,
        --tier-tab-border   4s ease,
        --tier-border-done  4s ease;
}

#menu[data-tier="2"] {
    --tier-panel-bg:     #1e2420;
    --tier-panel-border: rgba(120, 160, 110, 0.25);
    --tier-panel-hover:  rgba(140, 190, 120, 0.08);
    --tier-menu-bg:      #161c14;
    --tier-accent:       #7ab848;
    --tier-accent-dim:   rgba(122, 184, 72, 0.45);
    --tier-accent-text:  rgba(122, 184, 72, 0.6);
    --tier-text:         #c8d8c0;
    --tier-text-dim:     rgba(200, 216, 192, 0.55);
    --tier-quote:        rgba(200, 216, 192, 0.35);
    --tier-tab-active:   #c8d8c0;
    --tier-tab-border:   #7ab848;
    --tier-border-done:  rgba(122, 184, 72, 0.4);
}

#menu[data-tier="3"] {
    --tier-panel-bg:     #181e28;
    --tier-panel-border: rgba(80, 140, 200, 0.25);
    --tier-panel-hover:  rgba(80, 140, 200, 0.08);
    --tier-menu-bg:      #10141e;
    --tier-accent:       #4a9fd4;
    --tier-accent-dim:   rgba(74, 159, 212, 0.45);
    --tier-accent-text:  rgba(74, 159, 212, 0.6);
    --tier-text:         #b8cce0;
    --tier-text-dim:     rgba(184, 204, 224, 0.55);
    --tier-quote:        rgba(184, 204, 224, 0.35);
    --tier-tab-active:   #b8cce0;
    --tier-tab-border:   #4a9fd4;
    --tier-border-done:  rgba(74, 159, 212, 0.4);
}

#menu[data-tier="4"] {
    --tier-panel-bg:     #16121e;
    --tier-panel-border: rgba(140, 80, 200, 0.25);
    --tier-panel-hover:  rgba(140, 80, 200, 0.08);
    --tier-menu-bg:      #0e0b16;
    --tier-accent:       #9b59d4;
    --tier-accent-dim:   rgba(155, 89, 212, 0.45);
    --tier-accent-text:  rgba(155, 89, 212, 0.6);
    --tier-text:         #c8b8e0;
    --tier-text-dim:     rgba(200, 184, 224, 0.55);
    --tier-quote:        rgba(200, 184, 224, 0.35);
    --tier-tab-active:   #c8b8e0;
    --tier-tab-border:   #9b59d4;
    --tier-border-done:  rgba(155, 89, 212, 0.4);
}

#menu[data-tier="5"] {
    --tier-panel-bg:     #140f0f;
    --tier-panel-border: rgba(180, 40, 40, 0.2);
    --tier-panel-hover:  rgba(180, 40, 40, 0.06);
    --tier-menu-bg:      #0e0909;
    --tier-accent:       #c0392b;
    --tier-accent-dim:   rgba(192, 57, 43, 0.45);
    --tier-accent-text:  rgba(192, 57, 43, 0.6);
    --tier-text:         #d4b8b8;
    --tier-text-dim:     rgba(212, 184, 184, 0.55);
    --tier-quote:        rgba(212, 184, 184, 0.3);
    --tier-tab-active:   #d4b8b8;
    --tier-tab-border:   #c0392b;
    --tier-border-done:  rgba(192, 57, 43, 0.4);
}

/* ── MENU ────────────────────────────────────────────────────────────────── */

#menu {
    position: fixed;
    right: 0;
    top: 0;
    background-color: var(--tier-menu-bg);
    width: 35%;
    height: 100%;
    z-index: 10;
    transform: translateX(0);
    user-select: none;
    font-size: 18px;
    overflow: visible;
}

#menu.hidden {
    transform: translateX(100%);
}

#menu-tab {
    position: fixed;
    right: 35%;
    top: 50%;
    transform: translateY(-50%);
    background-color: bisque;
    color: rgb(255, 0, 0);
    width: 20px;
    height: 40px;
    z-index: 11;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: right 0.3s ease;
}

#menu.hidden ~ #menu-tab {
    right: 0;
}

#menu-content {
    height: calc(100% - 48px);
    overflow: hidden;
}

#tab-production {
    height: 100%;
    overflow-y: auto;
    padding: 14px;
    padding-bottom: 20px;
}

/* ── HUD COUNTERS ────────────────────────────────────────────────────────── */

#length-counter {
    position: fixed;
    top: 1rem;
    left: 50%;
    transform: translateX(-50%);
    color: rgb(255, 0, 0);
    font-family: monospace;
    font-size: 1.2rem;
    z-index: 12;
}

#speed-counter {
    position: fixed;
    top: 2.8rem;
    left: 50%;
    transform: translateX(-50%);
    color: #888888;
    font-family: monospace;
    font-size: 1rem;
    z-index: 12;
    transition: color 1s ease;
}

#speed-label {
    position: fixed;
    top: 4.2rem;
    left: 50%;
    transform: translateX(-50%);
    color: #888888;
    font-family: monospace;
    font-size: 0.8rem;
    letter-spacing: 2px;
    text-transform: uppercase;
    z-index: 12;
    transition: color 1s ease;
}

#bank-counter {
    position: fixed;
    top: 2.8rem;
    left: 50%;
    transform: translateX(-50%);
    color: rgb(136, 255, 0);
    font-family: monospace;
    font-size: 1rem;
    z-index: 12;
}

#ritual-counter {
    position: fixed;
    top: 5.5rem;
    left: 50%;
    transform: translateX(-50%);
    color: rgb(189, 0, 0);
    font-family: monospace;
    font-size: 0.85rem;
    letter-spacing: 2px;
    z-index: 12;
    display: none;
}

/* ── TABS ────────────────────────────────────────────────────────────────── */

#menu-tabs {
    display: flex;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.tab-btn {
    flex: 1;
    background: none;
    border: none;
    color: var(--tier-text-dim);
    padding: 10px 5px;
    cursor: pointer;
    font-size: clamp(0.75rem, 1vw, 1.2rem);
}

.tab-btn.active {
    color: var(--tier-tab-active);
    border-bottom: 2px solid var(--tier-tab-border);
}

.tab-panel {
    display: none;
    color: var(--tier-text);
}

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

/* ── PRODUCTION PANEL ────────────────────────────────────────────────────── */

.producer-item {
    display: flex;
    flex-direction: row;
    align-items: stretch;
    min-height: 128px;
    max-height: 128px;
    background: var(--tier-panel-bg);
    border-radius: 6px;
    margin-bottom: 6px;
    cursor: pointer;
    border: 1px solid var(--tier-panel-border);
    overflow: hidden;
    padding: 0;
    position: relative;
}

.producer-item:hover:not(.next-locked):not(.locked) {
    background: var(--tier-panel-hover);
    transition: background 0.15s ease;
}

.producer-item.locked,
.producer-item.next-locked.locked {
    opacity: 0.35;
    cursor: not-allowed;
}

.producer-item.next-locked {
    border: 1px dashed var(--tier-panel-border);
}

.producer-image-wrap {
    position: relative;
    width: 128px;
    min-width: 128px;
    flex-shrink: 0;
    align-self: stretch;
    overflow: hidden;
}

div.producer-image {
    width: 100%;
    height: 100%;
    min-height: 128px;
    background: rgba(0, 0, 0, 0.2);
    border-radius: 6px 0 0 6px;
    border-right: 1px solid var(--tier-panel-border);
}

img.producer-image {
    width: 128px;
    min-width: 128px;
    height: 100%;
    max-height: 128px;
    object-fit: cover;
    border-radius: 6px 0 0 6px;
    border-right: 1px solid var(--tier-panel-border);
    display: block;
    flex-shrink: 0;
}

.producer-image-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(
        to bottom,
        rgba(0, 0, 0, 0) 0%,
        rgba(0, 0, 0, 0) 50%,
        rgba(0, 0, 0, 0) 100%
    );
    z-index: 1;
    pointer-events: none;
}

.producer-cost {
    position: absolute;
    top: 8px;
    left: 50%;
    transform: translateX(-50%);
    font-size: clamp(0.7rem, 1vw, 1.1rem);
    font-weight: 700;
    color: var(--tier-accent);
    white-space: nowrap;
    z-index: 2;
}

.producer-sps {
    position: absolute;
    bottom: 8px;
    left: 50%;
    transform: translateX(-50%);
    font-size: clamp(0.55rem, 0.7vw, 0.75rem);
    opacity: 0.7;
    color: var(--tier-text);
    white-space: nowrap;
    z-index: 2;
}

.producer-count {
    position: absolute;
    top: 8px;
    right: 8px;
    font-size: clamp(1rem, 1.5vw, 1.6rem);
    font-weight: 700;
    color: var(--tier-text);
    min-width: 48px;
    text-align: right;
    padding: 0;
    flex-shrink: 0;
}

.producer-info {
    flex: 1;
    padding: 5px 12px 70px 7px;
    position: relative;
}

.producer-top {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.producer-name-row {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
}

.producer-name {
    font-size: clamp(0.9rem, 1.6vw, 1.7rem);
    font-weight: 700;
    letter-spacing: 0.5px;
    line-height: 1;
    color: var(--tier-text);
}

.producer-flavor {
    font-size: clamp(0.75rem, 1.2vw, 1rem);
    color: var(--tier-text-dim);
    line-height: 1.2;
}

.producer-quote-wrap {
    position: absolute;
    bottom: 5px;
    left: 2px;
    right: 0;
    padding-right: 12px;
}

.producer-quote {
    font-size: clamp(0.65rem, 1vw, 1.2rem);
    color: var(--tier-quote);
    font-style: italic;
    line-height: 1;
    text-align: center;
}

.producer-quote-author {
    font-size: clamp(0.6rem, 0.9vw, 1rem);
    color: var(--tier-text-dim);
    text-align: right;
    margin-top: 2px;
}

.producer-timer {
    font-size: clamp(0.6rem, 0.7vw, 0.7rem);
    color: var(--tier-accent-text);
    margin-top: 4px;
}

/* ── UPGRADES ────────────────────────────────────────────────────────────── */

.producer-upgrade {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 10px;
    background: rgba(0, 0, 0, 0.15);
    border-left: 3px solid var(--tier-panel-border);
    margin-bottom: 2px;
    padding: 8px 12px;
    cursor: pointer;
    min-height: 44px;
}

.producer-upgrade:hover:not(.upgrade-locked):not(.upgrade-done) {
    background: rgba(0, 0, 0, 0.25);
    transition: background 0.15s ease;
}

.producer-upgrade.upgrade-locked {
    opacity: 0.4;
    cursor: not-allowed;
}

.producer-upgrade.upgrade-done {
    opacity: 0.5;
    cursor: default;
    border-left-color: var(--tier-border-done);
}

.producer-upgrade.upgrade-progress {
    border-left-color: var(--tier-border-prog);
}

.producer-upgrade-icon {
    width: 32px;
    height: 32px;
    min-width: 32px;
    background: rgba(255, 255, 255, 0.06);
    border-radius: 4px;
    border: 1px solid var(--tier-panel-border);
    flex-shrink: 0;
}

.producer-upgrade-info {
    flex: 1;
}

.producer-upgrade-name {
    font-size: clamp(0.7rem, 0.85vw, 0.9rem);
    font-weight: 600;
    color: var(--tier-text);
}

.producer-upgrade-desc {
    font-size: clamp(0.6rem, 0.75vw, 0.78rem);
    color: var(--tier-text-dim);
    margin-top: 1px;
}

.producer-upgrade-cost {
    font-size: clamp(0.7rem, 0.85vw, 0.9rem);
    font-weight: 600;
    color: var(--tier-accent);
    white-space: nowrap;
    flex-shrink: 0;
}

.upgrade-done .producer-upgrade-cost {
    color: var(--tier-accent-dim);
}

.upgrade-progress .producer-upgrade-cost {
    color: var(--tier-border-prog);
}

.producer-upgrade-icons {
    display: flex;
    flex-direction: row;
    gap: 4px;
    flex-wrap: wrap;
}

.upgrade-pip {
    position: relative;
    width: 12px;
    height: 12px;
    border-radius: 2px;
    background: var(--tier-accent-dim);
    border: 1px solid var(--tier-accent-text);
    cursor: default;
    flex-shrink: 0;
}

/* ── ACHIEVEMENTS PANEL ──────────────────────────────────────────────────── */

#tab-achievements {
    padding: 14px;
}

.ach-summary {
    font-size: 0.8rem;
    color: var(--tier-text-dim);
    margin-bottom: 12px;
    letter-spacing: 1px;
    text-transform: uppercase;
}

.ach-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.ach-icon {
    position: relative;
    width: 48px;
    height: 48px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.6rem;
    cursor: default;
    border: 1px solid rgba(255, 255, 255, 0.08);
    transition: transform 0.1s ease, border-color 0.2s ease;
    user-select: none;
}

.ach-icon.earned {
    background: var(--tier-accent-dim);
    border-color: var(--tier-panel-border);
}

.ach-icon.earned:hover {
    transform: scale(1.12);
    border-color: var(--tier-accent);
}

.ach-icon.locked {
    background: rgba(255, 255, 255, 0.04);
    filter: grayscale(1) brightness(0.4);
}

.ach-icon.secret.locked {
    font-size: 1.2rem;
}

/* ── ACHIEVEMENT TOOLTIP ─────────────────────────────────────────────────── */

.ach-tooltip {
    display: none;
    position: fixed;
    z-index: 200;
    background: var(--tier-menu-bg);
    border: 1px solid var(--tier-accent-dim);
    border-radius: 8px;
    padding: 10px 13px;
    color: var(--tier-text);
    max-width: 220px;
    pointer-events: none;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.6);
}

.ach-tooltip.visible {
    display: block;
}

.ach-tooltip-name {
    font-size: 0.9rem;
    font-weight: bold;
    margin-bottom: 5px;
    color: var(--tier-accent);
}

.ach-tooltip-flavor {
    font-size: 0.78rem;
    line-height: 1.5;
    color: var(--tier-text-dim);
    margin-bottom: 6px;
}

.ach-tooltip-date {
    font-size: 0.7rem;
    color: var(--tier-text-dim);
    opacity: 0.6;
    border-top: 1px solid var(--tier-panel-border);
    padding-top: 5px;
    margin-top: 4px;
}

/* ── ACHIEVEMENT TOAST ───────────────────────────────────────────────────── */

.ach-toast {
    position: fixed;
    bottom: 30px;
    left: 50%;
    transform: translateX(-50%) translateY(20px);
    background: var(--tier-menu-bg);
    border: 1px solid var(--tier-accent-dim);
    border-radius: 10px;
    padding: 10px 18px;
    color: var(--tier-text);
    z-index: 300;
    display: flex;
    align-items: center;
    gap: 10px;
    opacity: 0;
    transition: opacity 0.4s ease, transform 0.4s ease;
    pointer-events: none;
    max-width: 320px;
}

.ach-toast.show {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
}

.ach-toast-icon {
    font-size: 1.5rem;
    flex-shrink: 0;
}

.ach-toast-label {
    font-size: 0.65rem;
    text-transform: uppercase;
    letter-spacing: 2px;
    color: var(--tier-text-dim);
}

.ach-toast-name {
    font-size: 0.9rem;
    font-weight: bold;
    color: var(--tier-accent);
}

/* ── OFFLINE MODAL ───────────────────────────────────────────────────────── */

#offline-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.7);
    z-index: 100;
    display: flex;
    align-items: center;
    justify-content: center;
}

#offline-modal {
    background: var(--tier-menu-bg);
    border: 1px solid var(--tier-panel-border);
    border-radius: 12px;
    padding: 32px 40px;
    text-align: center;
    color: var(--tier-text);
    max-width: 360px;
}

#offline-title {
    font-size: 1.4rem;
    margin-bottom: 16px;
    color: var(--tier-text-dim);
    text-transform: uppercase;
    letter-spacing: 3px;
}

#offline-body {
    font-size: 1rem;
    line-height: 1.7;
    margin-bottom: 24px;
}

#offline-body strong {
    color: var(--tier-accent);
}

#offline-close {
    background: none;
    border: 1px solid var(--tier-accent-dim);
    color: var(--tier-accent);
    font-size: 0.9rem;
    padding: 8px 24px;
    border-radius: 6px;
    cursor: pointer;
    letter-spacing: 1px;
    transition: background 0.2s ease;
}

#offline-close:hover {
    background: rgba(255, 255, 255, 0.05);
}

/* ── STRING MAP ──────────────────────────────────────────────────────────── */

#string-map-canvas {
    position: fixed !important;
    top: unset !important;
    left: unset !important;
}

#map-tooltip {
    display: none;
    position: fixed;
    z-index: 20;
    background: var(--tier-menu-bg);
    border: 1px solid var(--tier-panel-border);
    border-radius: 5px;
    padding: 4px 9px;
    font-size: 0.78rem;
    color: var(--tier-text);
    pointer-events: none;
    white-space: nowrap;
}

body.map-bottom #game,
body.map-bottom #menu,
body.map-bottom #menu-tab,
body.map-bottom #length-counter,
body.map-bottom #speed-counter,
body.map-bottom #speed-label,
body.map-bottom #ritual-counter {
    margin-bottom: var(--map-strip-size, 55px);
}

body.map-left #game,
body.map-left #length-counter,
body.map-left #speed-counter,
body.map-left #speed-label,
body.map-left #ritual-counter {
    margin-left: var(--map-strip-size, 55px);
}