/*
 * Mahjang Spirit World — Design System
 *
 * Elemental palette mapped to Mahjong suits.
 * Two-font system: IM Fell English (display) + Space Mono (data).
 * Stone-textured panels with multi-layer carved borders.
 */

@import url('https://fonts.googleapis.com/css2?family=IM+Fell+English:ital@0;1&family=Space+Mono:wght@400;700&display=swap');

:root {
    /* Elemental spirit palette — suits */
    --spirit-wood: #4ade80;          /* Bamboo */
    --spirit-wood-deep: #166534;
    --spirit-wood-glow: rgba(74, 222, 128, 0.55);

    --spirit-water: #38bdf8;         /* Dots */
    --spirit-water-deep: #075985;
    --spirit-water-glow: rgba(56, 189, 248, 0.55);

    --spirit-fire: #fb923c;          /* Characters */
    --spirit-fire-deep: #7c2d12;
    --spirit-fire-glow: rgba(251, 146, 60, 0.55);

    --spirit-void: #c084fc;          /* Winds and Dragons */
    --spirit-void-deep: #4c1d95;
    --spirit-void-glow: rgba(192, 132, 252, 0.55);

    /* Atmosphere */
    --void-bg: #0d0d14;
    --void-bg-deep: #06060b;
    --stone-chrome: #1e1b2e;
    --stone-chrome-light: #2a2640;
    --stone-edge: #3a3556;
    --stone-carved-shadow: rgba(0, 0, 0, 0.65);
    --stone-carved-highlight: rgba(255, 255, 255, 0.06);

    /* Spirit energy accent */
    --spirit-gold: #fde68a;
    --spirit-gold-deep: #b45309;
    --spirit-gold-glow: rgba(253, 230, 138, 0.6);

    /* Text */
    --ink-primary: #ece7d5;
    --ink-secondary: #b8b3a0;
    --ink-tertiary: #6e6a5b;

    /* Typography */
    --font-display: 'IM Fell English', 'Cinzel', Georgia, serif;
    --font-data: 'Space Mono', 'JetBrains Mono', monospace;

    /* Motion */
    --ease-stone: cubic-bezier(0.22, 1, 0.36, 1);
    --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
}

/* Suit color resolver — used by tile renderer + altar */
.suit-bamboo { color: var(--spirit-wood); }
.suit-dots { color: var(--spirit-water); }
.suit-chars { color: var(--spirit-fire); }
.suit-wind { color: var(--spirit-void); }
.suit-dragon { color: var(--spirit-void); }

/* Reduce motion is a hard contract — disables all decorative motion */
.reduce-motion *,
.reduce-motion *::before,
.reduce-motion *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
}

/* ----------------------------------------------------------
 * Backgrounds
 * ---------------------------------------------------------- */

.spirit-world-bg {
    position: fixed;
    inset: 0;
    background:
        radial-gradient(ellipse at 18% 78%, rgba(192, 132, 252, 0.12) 0%, transparent 55%),
        radial-gradient(ellipse at 82% 22%, rgba(56, 189, 248, 0.10) 0%, transparent 55%),
        radial-gradient(ellipse at 50% 50%, rgba(74, 222, 128, 0.05) 0%, transparent 60%),
        linear-gradient(180deg, var(--void-bg-deep) 0%, var(--void-bg) 60%, #0a0916 100%);
    z-index: -2;
}

.spirit-world-bg::after {
    content: '';
    position: absolute;
    inset: 0;
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.6'/%3E%3C/svg%3E");
    opacity: 0.04;
    mix-blend-mode: overlay;
    pointer-events: none;
}

/* ----------------------------------------------------------
 * Stone panel — the foundational chrome for HUD, cards, modals
 * ---------------------------------------------------------- */

.stone-panel {
    background:
        linear-gradient(145deg,
            var(--stone-chrome-light) 0%,
            var(--stone-chrome) 60%,
            #161325 100%);
    border-radius: 14px;
    border: 1px solid var(--stone-edge);
    box-shadow:
        0 8px 30px rgba(0, 0, 0, 0.55),
        inset 0 1px 0 var(--stone-carved-highlight),
        inset 0 -2px 4px var(--stone-carved-shadow);
    position: relative;
    color: var(--ink-primary);
}

.stone-panel::before {
    content: '';
    position: absolute;
    inset: 4px;
    border-radius: 10px;
    border: 1px solid rgba(120, 110, 90, 0.12);
    pointer-events: none;
}

.stone-panel-strong {
    box-shadow:
        0 12px 50px rgba(0, 0, 0, 0.65),
        0 0 0 1px var(--stone-edge),
        inset 0 1px 0 rgba(255, 255, 255, 0.08),
        inset 0 -3px 6px var(--stone-carved-shadow);
}

/* ----------------------------------------------------------
 * Typography utilities
 * ---------------------------------------------------------- */

.spirit-display {
    font-family: var(--font-display);
    letter-spacing: 0.04em;
    color: var(--ink-primary);
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.6);
}

.spirit-data {
    font-family: var(--font-data);
    font-weight: 700;
    letter-spacing: 0.02em;
    color: var(--ink-primary);
}

.spirit-label {
    font-family: var(--font-display);
    font-style: italic;
    color: var(--ink-tertiary);
    letter-spacing: 0.18em;
    text-transform: lowercase;
    font-size: 0.85em;
}

.spirit-glow-text {
    text-shadow:
        0 0 12px var(--spirit-gold-glow),
        0 0 22px rgba(253, 230, 138, 0.25);
}

/* ----------------------------------------------------------
 * Buttons — carved stone aesthetic
 * ---------------------------------------------------------- */

.spirit-btn {
    font-family: var(--font-display);
    letter-spacing: 0.16em;
    text-transform: uppercase;
    font-size: 1.05em;
    padding: 14px 30px;
    border-radius: 10px;
    border: 1px solid var(--stone-edge);
    cursor: pointer;
    color: var(--ink-primary);
    background:
        linear-gradient(145deg, var(--stone-chrome-light) 0%, var(--stone-chrome) 100%);
    box-shadow:
        0 4px 14px rgba(0, 0, 0, 0.4),
        inset 0 1px 0 rgba(255, 255, 255, 0.08),
        inset 0 -2px 4px rgba(0, 0, 0, 0.4);
    transition: transform 220ms var(--ease-spring),
                box-shadow 220ms var(--ease-stone),
                border-color 220ms var(--ease-stone);
    position: relative;
    overflow: hidden;
}

.spirit-btn:hover:not(:disabled) {
    transform: translateY(-2px);
    border-color: var(--spirit-gold);
    box-shadow:
        0 8px 22px rgba(0, 0, 0, 0.5),
        0 0 28px var(--spirit-gold-glow),
        inset 0 1px 0 rgba(255, 255, 255, 0.12);
}

.spirit-btn:active:not(:disabled) {
    transform: translateY(0);
    box-shadow:
        0 2px 8px rgba(0, 0, 0, 0.5),
        inset 0 2px 6px rgba(0, 0, 0, 0.4);
}

.spirit-btn:disabled {
    opacity: 0.45;
    cursor: not-allowed;
    filter: saturate(0.6);
}

.spirit-btn-primary {
    border-color: var(--spirit-gold-deep);
    background:
        linear-gradient(145deg, #2a2640 0%, #1a1730 100%),
        linear-gradient(145deg, var(--spirit-gold) 0%, var(--spirit-gold-deep) 100%);
    color: var(--spirit-gold);
    text-shadow: 0 0 10px var(--spirit-gold-glow);
}

.spirit-btn-primary:hover:not(:disabled) {
    border-color: var(--spirit-gold);
    box-shadow:
        0 8px 24px rgba(0, 0, 0, 0.5),
        0 0 32px var(--spirit-gold-glow),
        inset 0 1px 0 rgba(253, 230, 138, 0.3);
}

.spirit-btn-danger {
    color: var(--spirit-fire);
}

.spirit-btn-danger:hover:not(:disabled) {
    border-color: var(--spirit-fire);
    box-shadow:
        0 8px 22px rgba(0, 0, 0, 0.5),
        0 0 28px var(--spirit-fire-glow);
}

.spirit-btn-cool {
    color: var(--spirit-water);
}

.spirit-btn-cool:hover:not(:disabled) {
    border-color: var(--spirit-water);
    box-shadow:
        0 8px 22px rgba(0, 0, 0, 0.5),
        0 0 28px var(--spirit-water-glow);
}

/* ----------------------------------------------------------
 * Focus rings — accessibility
 * ---------------------------------------------------------- */

.spirit-btn:focus-visible,
[tabindex]:focus-visible,
button:focus-visible,
.spirit-tile:focus-visible {
    outline: 2px solid var(--spirit-gold);
    outline-offset: 3px;
    box-shadow: 0 0 18px var(--spirit-gold-glow);
}

/* ----------------------------------------------------------
 * Settings modal
 * ---------------------------------------------------------- */

.settings-modal {
    position: fixed;
    inset: 0;
    background: rgba(6, 5, 14, 0.85);
    backdrop-filter: blur(8px);
    z-index: 2000;
    display: none;
    align-items: center;
    justify-content: center;
}

.settings-modal.active { display: flex; }

.settings-card {
    width: min(440px, 90vw);
    padding: 32px 36px;
    border-radius: 16px;
}

.settings-title {
    font-family: var(--font-display);
    font-size: 1.8em;
    margin-bottom: 24px;
    text-align: center;
    color: var(--spirit-gold);
    text-shadow: 0 0 16px var(--spirit-gold-glow);
}

.settings-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 0;
    border-bottom: 1px solid rgba(120, 110, 90, 0.15);
    font-family: var(--font-display);
    font-size: 1.05em;
}

.settings-row:last-child { border-bottom: none; }

.settings-row-label { color: var(--ink-primary); }

.settings-row-value {
    font-family: var(--font-data);
    color: var(--spirit-gold);
}

.settings-toggle {
    width: 52px;
    height: 28px;
    background: var(--stone-chrome);
    border: 1px solid var(--stone-edge);
    border-radius: 14px;
    position: relative;
    cursor: pointer;
    transition: background 220ms var(--ease-stone), border-color 220ms;
}

.settings-toggle::after {
    content: '';
    position: absolute;
    top: 3px;
    left: 4px;
    width: 20px;
    height: 20px;
    background: var(--ink-tertiary);
    border-radius: 50%;
    transition: left 220ms var(--ease-spring), background 220ms var(--ease-stone);
}

.settings-toggle.on {
    background: rgba(253, 230, 138, 0.18);
    border-color: var(--spirit-gold);
}

.settings-toggle.on::after {
    left: 26px;
    background: var(--spirit-gold);
    box-shadow: 0 0 12px var(--spirit-gold-glow);
}

.settings-segmented {
    display: inline-flex;
    background: var(--stone-chrome);
    border: 1px solid var(--stone-edge);
    border-radius: 10px;
    overflow: hidden;
}

.settings-segmented-option {
    padding: 6px 14px;
    cursor: pointer;
    color: var(--ink-secondary);
    font-family: var(--font-data);
    font-size: 0.9em;
    border: none;
    background: transparent;
    transition: background 220ms, color 220ms;
}

.settings-segmented-option.active {
    background: rgba(253, 230, 138, 0.15);
    color: var(--spirit-gold);
}

.settings-slider {
    width: 130px;
    accent-color: var(--spirit-gold);
}

.settings-actions {
    display: flex;
    justify-content: flex-end;
    margin-top: 24px;
    gap: 12px;
}

/* ----------------------------------------------------------
 * Settings gear icon
 * ---------------------------------------------------------- */

.settings-gear {
    position: fixed;
    top: 16px;
    right: 16px;
    width: 42px;
    height: 42px;
    border-radius: 50%;
    background: var(--stone-chrome);
    border: 1px solid var(--stone-edge);
    color: var(--ink-secondary);
    font-size: 1.3em;
    cursor: pointer;
    z-index: 1500;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform 300ms var(--ease-spring), color 300ms, border-color 300ms;
}

.settings-gear:hover {
    transform: rotate(60deg);
    color: var(--spirit-gold);
    border-color: var(--spirit-gold);
    box-shadow: 0 0 20px var(--spirit-gold-glow);
}