/* Forged Steel Frame (No border-radius, strict pixel-art bevel) */
.pixel-box,
.canvas-frame {
    background: var(--bg-panel);
    border: 3px solid var(--steel-base);
    outline: 2px solid var(--bg-primary);
    border-radius: 0;
    box-shadow:
        inset 0 0 0 2px var(--steel-dark),
        6px 6px 0px var(--bg-primary);
    position: relative;
}

.pixel-box-active {
    border-color: var(--border-highlight);
    box-shadow:
        inset 0 0 0 2px var(--steel-dark),
        6px 6px 0px var(--bg-primary),
        0 0 22px var(--accent-glow);
}

/* Circular Forged Steel Avatar Ring */
.avatar-steel-ring {
    background-color: var(--bg-panel);
    border: 3px solid var(--steel-base);
    outline: 2px solid var(--bg-primary);
    box-shadow:
        inset 0 0 0 2px var(--steel-dark),
        0 0 0 1px var(--steel-light),
        4px 4px 0px var(--bg-primary);
    border-radius: 9999px;
    image-rendering: pixelated;
    overflow: hidden;
}

.avatar-steel-ring img {
    image-rendering: pixelated;
    image-rendering: crisp-edges;
}

/* Warm Bronze & Dragon Scale Accent Typography */
.text-bronze {
    color: var(--accent-warm);
}

.text-dragon {
    color: var(--accent-main);
}

.text-steel {
    color: var(--steel-light);
}

/* Arcade Pixel Button (Dragon Scales & Beveled Steel) */
.pixel-btn {
    background: linear-gradient(180deg, var(--accent-main) 0%, var(--accent-secondary) 100%);
    border: 2px solid var(--steel-base);
    outline: 1px solid var(--bg-primary);
    border-radius: 0;
    color: var(--steel-light);
    box-shadow:
        inset 0 1px 0 rgba(216, 226, 235, 0.25),
        4px 4px 0px var(--bg-primary);
    transition: transform 0.1s ease, box-shadow 0.1s ease, border-color 0.2s ease;
    cursor: pointer;
    user-select: none;
}

.pixel-btn:hover {
    background: linear-gradient(180deg, var(--accent-main-bright) 0%, var(--accent-main) 100%);
    border-color: var(--steel-light);
    transform: translate(-1px, -1px);
    box-shadow:
        inset 0 1px 0 rgba(216, 226, 235, 0.45),
        5px 5px 0px var(--bg-primary),
        0 0 14px var(--accent-glow);
}

.pixel-btn:active {
    transform: translate(2px, 2px);
    box-shadow: 1px 1px 0px var(--bg-primary);
}

/* Language Toggle Button (#lang-toggle) */
#lang-toggle {
    background: var(--bg-panel);
    border: 2px solid var(--steel-base);
    outline: 1px solid var(--bg-primary);
    border-radius: 0;
    color: var(--text-muted);
    box-shadow:
        inset 0 0 0 1px var(--steel-dark),
        4px 4px 0px var(--bg-primary);
    transition: transform 0.1s ease, box-shadow 0.1s ease, border-color 0.2s ease;
    cursor: pointer;
    user-select: none;
}

#lang-toggle:hover {
    border-color: var(--border-highlight);
    transform: translate(-1px, -1px);
    box-shadow:
        inset 0 0 0 1px var(--steel-dark),
        5px 5px 0px var(--bg-primary),
        0 0 12px var(--accent-glow);
}

#lang-toggle:active {
    transform: translate(2px, 2px);
    box-shadow: 1px 1px 0px var(--bg-primary);
}

#lang-toggle .lang-option {
    transition: color 0.2s ease, text-shadow 0.2s ease;
}

#lang-toggle .lang-option.active {
    color: var(--accent-warm);
    font-weight: 800;
    text-shadow: 0 0 8px var(--accent-glow);
}

/* ==========================================================================
   DRUKSYSTEM OS CRT MONITOR & PHOSPHOR TERMINAL
   ========================================================================== */
.crt-monitor-frame {
    background: var(--bg-panel);
    border: 6px solid var(--steel-base);
    outline: 3px solid var(--bg-primary);
    border-radius: 0;
    box-shadow:
        inset 0 0 0 3px var(--steel-dark),
        inset 0 0 0 5px var(--steel-light),
        12px 12px 0px var(--bg-primary),
        0 0 40px rgba(0, 0, 0, 0.9);
}

.crt-screen {
    background-color: var(--term-bg);
    color: var(--term-fg);
    font-family: var(--term-active-font);
    border: 3px solid var(--steel-dark);
    border-radius: 0;
    box-shadow:
        inset 0 0 28px rgba(0, 0, 0, 0.85),
        0 0 12px var(--term-glow);
    text-shadow: 0 0 6px var(--term-glow);
    position: relative;
    overflow: hidden;
}

[data-terminal-font="vt323"] .crt-screen {
    font-size: 1.2rem;
    line-height: 1.35;
}

[data-terminal-font="gothic"] .crt-screen {
    font-size: 0.72rem;
    line-height: 1.75;
}

.crt-output {
    user-select: text;
    scrollbar-width: thin;
    scrollbar-color: var(--term-dim) var(--term-bg);
}

.crt-output::-webkit-scrollbar {
    width: 6px;
}

.crt-output::-webkit-scrollbar-track {
    background: var(--term-bg);
}

.crt-output::-webkit-scrollbar-thumb {
    background: var(--term-dim);
}

.term-cmd-chip {
    background: transparent;
    border: 1px solid var(--term-dim);
    border-radius: 0;
    color: var(--term-fg);
    font-family: var(--term-active-font);
    padding: 0.25rem 0.55rem;
    font-size: 0.75rem;
    cursor: pointer;
    transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}

.term-cmd-chip:hover {
    background: var(--term-fg);
    color: var(--term-bg);
    border-color: var(--term-fg);
    text-shadow: none;
}

.term-link {
    color: var(--term-fg);
    text-decoration: underline;
    text-underline-offset: 3px;
    cursor: pointer;
}

.term-link:hover {
    background: var(--term-fg);
    color: var(--term-bg);
    text-shadow: none;
}

.term-input {
    background: transparent;
    border: none;
    outline: none;
    color: var(--term-fg);
    font-family: var(--term-active-font);
    text-shadow: 0 0 6px var(--term-glow);
    caret-color: var(--term-fg);
}

/* ==========================================================================
   BOTANICAL GRIMOIRE FLOATING UI (#floraPanel — Strictly 0px radius & 0px blur)
   ========================================================================== */
#floraPanel,
#floraPanel[data-flora-biome="emerald"] {
    --flora-ui-bg: #111C15;
    --flora-ui-border: #38754A;
    --flora-ui-inner: #1E3F2B;
    --flora-ui-accent: #58A668;
    --flora-ui-active-bg: #2D5A3C;
    --flora-ui-detail: var(--accent-warm);
}

#floraPanel[data-flora-biome="druk"] {
    --flora-ui-bg: #1A0E21;
    --flora-ui-border: var(--accent-secondary);
    --flora-ui-inner: #3D1247;
    --flora-ui-accent: var(--accent-main);
    --flora-ui-active-bg: var(--accent-secondary);
    --flora-ui-detail: var(--accent-ivory);
}

#floraPanel[data-flora-biome="autumn"] {
    --flora-ui-bg: #1F140E;
    --flora-ui-border: var(--shadow-warm);
    --flora-ui-inner: #4A2B1D;
    --flora-ui-accent: var(--accent-warm);
    --flora-ui-active-bg: var(--shadow-warm);
    --flora-ui-detail: var(--accent-ivory);
}

#floraPanel[data-flora-biome="matrix"] {
    --flora-ui-bg: #030A03;
    --flora-ui-border: #008F11;
    --flora-ui-inner: #003B00;
    --flora-ui-accent: #00FF41;
    --flora-ui-active-bg: #005C0A;
    --flora-ui-detail: var(--steel-light);
}

.flora-panel {
    background: var(--flora-ui-bg);
    border: 3px solid var(--flora-ui-border);
    outline: 2px solid var(--bg-primary);
    border-radius: 0;
    box-shadow:
        inset 0 0 0 2px var(--flora-ui-inner),
        6px 6px 0px var(--bg-primary);
}

.flora-panel-header {
    border-bottom: 2px solid var(--flora-ui-border);
}

.flora-panel-title {
    color: var(--flora-ui-accent);
}

.flora-val-badge {
    color: var(--flora-ui-detail);
}

.flora-biome-btn {
    background: var(--bg-primary);
    border: 2px solid var(--flora-ui-border);
    border-radius: 0;
    color: var(--steel-light);
    box-shadow: 2px 2px 0px var(--bg-primary);
    cursor: pointer;
    transition: border-color 0.1s ease, color 0.1s ease, background-color 0.1s ease;
}

.flora-biome-btn:hover {
    border-color: var(--flora-ui-accent);
    color: var(--flora-ui-detail);
}

.flora-biome-btn.active {
    background: var(--flora-ui-active-bg);
    border-color: var(--flora-ui-accent);
    color: var(--flora-ui-detail);
}

.flora-reseed-btn {
    background: var(--flora-ui-active-bg);
    border: 2px solid var(--flora-ui-accent);
    outline: 1px solid var(--bg-primary);
    border-radius: 0;
    color: var(--flora-ui-detail);
    box-shadow: 4px 4px 0px var(--bg-primary);
    cursor: pointer;
    user-select: none;
    transition: transform 0.1s ease, box-shadow 0.1s ease, border-color 0.15s ease;
}

.flora-reseed-btn:hover {
    border-color: var(--flora-ui-detail);
    transform: translate(-1px, -1px);
    box-shadow: 5px 5px 0px var(--bg-primary);
}

.flora-reseed-btn:active {
    transform: translate(2px, 2px);
    box-shadow: 1px 1px 0px var(--bg-primary);
}

.flora-slider {
    -webkit-appearance: none;
    appearance: none;
    height: 8px;
    background: var(--bg-primary);
    border: 2px solid var(--flora-ui-border);
    border-radius: 0;
    outline: none;
    cursor: pointer;
}

.flora-slider::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 12px;
    height: 16px;
    background: var(--flora-ui-accent);
    border: 2px solid var(--bg-primary);
    border-radius: 0;
    cursor: pointer;
}

.flora-slider::-moz-range-thumb {
    width: 12px;
    height: 16px;
    background: var(--flora-ui-accent);
    border: 2px solid var(--bg-primary);
    border-radius: 0;
    cursor: pointer;
}

/* Stepped Pixel-Art Pointer Arrow at Bottom of #floraPanel */
.flora-panel-arrow {
    position: absolute;
    bottom: -11px;
    left: 50%;
    transform: translateX(-50%);
    width: 14px;
    height: 8px;
    background: var(--flora-ui-border);
    border-left: 2px solid var(--bg-primary);
    border-right: 2px solid var(--bg-primary);
    border-bottom: 2px solid var(--bg-primary);
    box-shadow: 3px 3px 0px var(--bg-primary);
}

.flora-panel-arrow::after {
    content: '';
    position: absolute;
    bottom: -6px;
    left: 2px;
    width: 6px;
    height: 4px;
    background: var(--flora-ui-accent);
    border: 1px solid var(--bg-primary);
}

/* ==========================================================================
   ATMOSPHERIC GRIMOIRE FLOATING UI (#cloudPanel — Strictly 0px radius)
   ========================================================================== */
#cloudPanel,
#cloudPanel[data-cloud-weather="ethereal"] {
    --cloud-ui-bg: #0D1824;
    --cloud-ui-border: #2C5E7A;
    --cloud-ui-inner: #1A3347;
    --cloud-ui-accent: #7AD7F0;
    --cloud-ui-active-bg: #1F4E6B;
    --cloud-ui-detail: var(--steel-light);
}

#cloudPanel[data-cloud-weather="storm"] {
    --cloud-ui-bg: #120E1D;
    --cloud-ui-border: #56616E;
    --cloud-ui-inner: #3D1247;
    --cloud-ui-accent: #00E5FF;
    --cloud-ui-active-bg: #2B3138;
    --cloud-ui-detail: var(--accent-main);
}

#cloudPanel[data-cloud-weather="aurora"] {
    --cloud-ui-bg: #071A24;
    --cloud-ui-border: #1F4E6B;
    --cloud-ui-inner: #0E2233;
    --cloud-ui-accent: #00F5D4;
    --cloud-ui-active-bg: #16425B;
    --cloud-ui-detail: #7AD7F0;
}

#cloudPanel[data-cloud-weather="crimson"] {
    --cloud-ui-bg: #1E0F1D;
    --cloud-ui-border: var(--accent-main);
    --cloud-ui-inner: #3D1247;
    --cloud-ui-accent: var(--accent-warm);
    --cloud-ui-active-bg: var(--accent-secondary);
    --cloud-ui-detail: var(--accent-ivory);
}

.cloud-panel {
    background: var(--cloud-ui-bg);
    border: 3px solid var(--cloud-ui-border);
    outline: 2px solid var(--bg-primary);
    border-radius: 0;
    box-shadow:
        inset 0 0 0 2px var(--cloud-ui-inner),
        6px 6px 0px var(--bg-primary);
}

.cloud-panel-header {
    border-bottom: 2px solid var(--cloud-ui-border);
}

.cloud-panel-title {
    color: var(--cloud-ui-accent);
}

.cloud-val-badge {
    color: var(--cloud-ui-detail);
}

.cloud-weather-btn {
    background: var(--bg-primary);
    border: 2px solid var(--cloud-ui-border);
    border-radius: 0;
    color: var(--steel-light);
    box-shadow: 2px 2px 0px var(--bg-primary);
    cursor: pointer;
    transition: border-color 0.1s ease, color 0.1s ease, background-color 0.1s ease;
}

.cloud-weather-btn:hover {
    border-color: var(--cloud-ui-accent);
    color: var(--cloud-ui-detail);
}

.cloud-weather-btn.active {
    background: var(--cloud-ui-active-bg);
    border-color: var(--cloud-ui-accent);
    color: var(--cloud-ui-detail);
}

.cloud-reseed-btn {
    background: var(--cloud-ui-active-bg);
    border: 2px solid var(--cloud-ui-accent);
    outline: 1px solid var(--bg-primary);
    border-radius: 0;
    color: var(--cloud-ui-detail);
    box-shadow: 4px 4px 0px var(--bg-primary);
    cursor: pointer;
    user-select: none;
    transition: transform 0.1s ease, box-shadow 0.1s ease, border-color 0.15s ease;
}

.cloud-reseed-btn:hover {
    border-color: var(--cloud-ui-detail);
    transform: translate(-1px, -1px);
    box-shadow: 5px 5px 0px var(--bg-primary);
}

.cloud-reseed-btn:active {
    transform: translate(2px, 2px);
    box-shadow: 1px 1px 0px var(--bg-primary);
}

.cloud-slider {
    -webkit-appearance: none;
    appearance: none;
    height: 8px;
    background: var(--bg-primary);
    border: 2px solid var(--cloud-ui-border);
    border-radius: 0;
    outline: none;
    cursor: pointer;
}

.cloud-slider::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 12px;
    height: 16px;
    background: var(--cloud-ui-accent);
    border: 2px solid var(--bg-primary);
    border-radius: 0;
    cursor: pointer;
}

.cloud-slider::-moz-range-thumb {
    width: 12px;
    height: 16px;
    background: var(--cloud-ui-accent);
    border: 2px solid var(--bg-primary);
    border-radius: 0;
    cursor: pointer;
}

/* ==========================================================================
   INTERACTIVE DUNGEON ARCHIVE (#dungeonModal — Strictly 0px radius & 0px blur)
   ========================================================================== */
.dungeon-modal-frame {
    background: var(--bg-panel);
    border: 4px solid var(--steel-base);
    outline: 3px solid var(--bg-primary);
    border-radius: 0;
    box-shadow:
        inset 0 0 0 3px var(--steel-dark),
        10px 10px 0px var(--bg-primary);
}

.dungeon-scroll-area {
    user-select: text;
    scrollbar-width: thin;
    scrollbar-color: var(--accent-main) var(--bg-primary);
}

.dungeon-scroll-area::-webkit-scrollbar {
    width: 8px;
}

.dungeon-scroll-area::-webkit-scrollbar-track {
    background: var(--bg-primary);
}

.dungeon-scroll-area::-webkit-scrollbar-thumb {
    background: var(--accent-main);
    border: 1px solid var(--bg-primary);
}

.dungeon-class-card {
    background: var(--bg-card-deep);
    border: 3px solid var(--steel-base);
    outline: 2px solid var(--bg-primary);
    border-radius: 0;
    box-shadow:
        inset 0 0 0 2px var(--steel-dark),
        5px 5px 0px var(--bg-primary);
    transition: transform 0.1s ease, border-color 0.12s ease, box-shadow 0.12s ease;
}

.dungeon-class-card:hover,
.dungeon-class-card-active {
    background: var(--bg-panel);
    border-color: var(--accent-main);
    transform: translate(-2px, -2px);
    box-shadow:
        inset 0 0 0 2px var(--accent-secondary),
        7px 7px 0px var(--bg-primary);
}

.dungeon-card-cta {
    background: var(--bg-primary);
    border: 2px solid var(--steel-base);
    color: var(--steel-light);
    border-radius: 0;
}

.dungeon-class-card:hover .dungeon-card-cta,
.dungeon-class-card-active .dungeon-card-cta {
    background: var(--accent-secondary);
    border-color: var(--accent-warm);
    color: var(--accent-warm);
}

.dungeon-stat-track {
    width: 100%;
    height: 8px;
    background: var(--bg-primary);
    border: 1px solid var(--steel-base);
    border-radius: 0;
}

.dungeon-stat-fill {
    height: 100%;
    background: linear-gradient(90deg, var(--accent-secondary) 0%, var(--accent-main) 65%, var(--accent-warm) 100%);
    border-radius: 0;
}

.dungeon-omniscient-btn {
    background: var(--accent-secondary);
    border: 3px solid var(--accent-warm);
    outline: 2px solid var(--bg-primary);
    border-radius: 0;
    color: var(--steel-light);
    box-shadow:
        inset 0 0 0 2px var(--accent-main),
        6px 6px 0px var(--bg-primary);
    cursor: pointer;
    transition: transform 0.1s ease, background-color 0.12s ease, border-color 0.12s ease;
}

.dungeon-omniscient-btn:hover {
    background: var(--accent-main);
    border-color: var(--steel-light);
    color: var(--bg-primary);
    transform: translate(-2px, -2px);
    box-shadow:
        inset 0 0 0 2px var(--accent-warm),
        8px 8px 0px var(--bg-primary);
}

.dungeon-omniscient-btn:active {
    transform: translate(2px, 2px);
    box-shadow: 2px 2px 0px var(--bg-primary);
}

.dungeon-tab-btn {
    background: var(--bg-primary);
    border: 2px solid var(--steel-base);
    outline: 1px solid var(--bg-primary);
    border-radius: 0;
    color: var(--steel-light);
    box-shadow: 3px 3px 0px var(--bg-primary);
    cursor: pointer;
    transition: border-color 0.1s ease, background-color 0.1s ease, color 0.1s ease;
}

.dungeon-tab-btn:hover {
    border-color: var(--accent-main);
    color: var(--accent-warm);
}

.dungeon-tab-btn.active {
    background: var(--accent-secondary);
    border-color: var(--accent-warm);
    color: var(--accent-warm);
}

.dungeon-section-box {
    background: var(--bg-card-deep);
    border: 3px solid var(--steel-base);
    outline: 2px solid var(--bg-primary);
    border-radius: 0;
    box-shadow:
        inset 0 0 0 2px var(--steel-dark),
        5px 5px 0px var(--bg-primary);
}

.dungeon-item-card {
    background: var(--bg-panel);
    border: 2px solid var(--steel-base);
    border-radius: 0;
    box-shadow: 4px 4px 0px var(--bg-primary);
}

.dungeon-weapon-chip {
    background: var(--bg-primary);
    border: 2px solid var(--accent-main);
    border-radius: 0;
    color: var(--accent-warm);
    box-shadow: 3px 3px 0px var(--bg-primary);
}

.dungeon-inline-link {
    background: var(--bg-primary);
    border: 1px solid var(--accent-main);
    border-radius: 0;
    color: var(--accent-warm);
    padding: 0.2rem 0.45rem;
    transition: background-color 0.1s ease, color 0.1s ease;
}

.dungeon-inline-link:hover {
    background: var(--accent-main);
    color: var(--bg-primary);
}