/* ==========================================================================
   Alpaka Games — Design Tokens & Basis
   ========================================================================== */

:root {
    /* Farbwelt: warmes Anthrazit statt Standard-Blau/Lila */
    --bg-0: #08090c;
    --bg-1: #0d0f14;
    --surface-1: #14171e;
    --surface-2: #1b1f28;
    --surface-3: #232833;
    --line: rgba(255, 255, 255, .07);
    --line-strong: rgba(255, 255, 255, .14);

    --text: #eef1f6;
    --text-dim: #98a1b3;
    --text-faint: #5f6878;

    --ember: #ff5a1f;
    --ember-soft: #ff8a5c;
    --mint: #22e0a1;
    --gold: #ffc93c;
    --ice: #59c2ff;
    --danger: #ff4d5e;

    --ring: 0 0 0 1px var(--line), 0 1px 0 rgba(255, 255, 255, .04) inset;
    --shadow-sm: 0 2px 8px rgba(0, 0, 0, .35);
    --shadow-md: 0 12px 32px -12px rgba(0, 0, 0, .7);
    --shadow-lg: 0 40px 80px -32px rgba(0, 0, 0, .9);
    --glow-ember: 0 0 0 1px rgba(255, 90, 31, .35), 0 8px 32px -8px rgba(255, 90, 31, .5);

    --r-xs: 6px;
    --r-sm: 10px;
    --r-md: 14px;
    --r-lg: 20px;
    --r-xl: 28px;
    --r-pill: 999px;

    --rail-w: 236px;
    --rail-w-collapsed: 76px;
    --topbar-h: 64px;
    --dock-h: 68px;

    --ease: cubic-bezier(.22, .9, .28, 1);
    --ease-out: cubic-bezier(.16, 1, .3, 1);
    --ease-spring: cubic-bezier(.34, 1.56, .64, 1);
    --dur: .28s;

    --font-display: 'Space Grotesk', 'Segoe UI', system-ui, sans-serif;
    --font-body: 'Inter', 'Segoe UI', system-ui, -apple-system, sans-serif;
    --font-mono: 'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, monospace;
}

*, *::before, *::after { box-sizing: border-box; }

html, body {
    height: 100%;
    margin: 0;
}

body {
    background: var(--bg-0);
    color: var(--text);
    font-family: var(--font-body);
    font-size: 15px;
    line-height: 1.5;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
    overflow: hidden;
    overscroll-behavior: none;
}

h1, h2, h3, h4 {
    font-family: var(--font-display);
    font-weight: 700;
    letter-spacing: -.02em;
    margin: 0;
    line-height: 1.1;
}

button, input, select, textarea {
    font: inherit;
    color: inherit;
}

button { cursor: pointer; }

a { color: var(--ember-soft); text-decoration: none; }
a:hover { text-decoration: underline; }

::selection { background: var(--ember); color: #fff; }

/* Scrollbars ------------------------------------------------------------- */
* { scrollbar-width: thin; scrollbar-color: var(--surface-3) transparent; }
*::-webkit-scrollbar { width: 10px; height: 10px; }
*::-webkit-scrollbar-track { background: transparent; }
*::-webkit-scrollbar-thumb {
    background: var(--surface-3);
    border-radius: var(--r-pill);
    border: 3px solid transparent;
    background-clip: content-box;
}
*::-webkit-scrollbar-thumb:hover { background: #333a48; background-clip: content-box; }

/* Ambient-Hintergrund ---------------------------------------------------- */
.ambient {
    position: fixed;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    overflow: hidden;
}

.ambient__blob {
    position: absolute;
    width: 60vmax;
    height: 60vmax;
    border-radius: 50%;
    filter: blur(90px);
    opacity: .16;
    will-change: transform;
}

.ambient__blob--a {
    background: radial-gradient(circle, var(--ember), transparent 65%);
    top: -22vmax; left: -14vmax;
    animation: drift-a 34s var(--ease) infinite alternate;
}

.ambient__blob--b {
    background: radial-gradient(circle, var(--mint), transparent 65%);
    bottom: -26vmax; right: -16vmax;
    opacity: .11;
    animation: drift-b 44s var(--ease) infinite alternate;
}

.ambient__grid {
    position: absolute;
    inset: -1px;
    background-image:
        linear-gradient(to right, rgba(255, 255, 255, .028) 1px, transparent 1px),
        linear-gradient(to bottom, rgba(255, 255, 255, .028) 1px, transparent 1px);
    background-size: 64px 64px;
    mask-image: radial-gradient(ellipse 90% 70% at 50% 0%, #000 30%, transparent 78%);
}

.ambient__noise {
    position: absolute;
    inset: 0;
    opacity: .035;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

@keyframes drift-a {
    to { transform: translate3d(14vmax, 10vmax, 0) scale(1.18); }
}
@keyframes drift-b {
    to { transform: translate3d(-12vmax, -8vmax, 0) scale(1.25); }
}

/* Buttons ---------------------------------------------------------------- */
.btn {
    --btn-bg: var(--surface-2);
    --btn-fg: var(--text);
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 10px 18px;
    border: 1px solid var(--line-strong);
    border-radius: var(--r-sm);
    background: var(--btn-bg);
    color: var(--btn-fg);
    font-family: var(--font-display);
    font-weight: 600;
    font-size: 14px;
    letter-spacing: -.01em;
    white-space: nowrap;
    transition: transform .16s var(--ease-spring), background .2s var(--ease),
                border-color .2s var(--ease), box-shadow .2s var(--ease), opacity .2s;
    overflow: hidden;
}

.btn::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(120deg, transparent 35%, rgba(255, 255, 255, .16) 50%, transparent 65%);
    transform: translateX(-120%);
    transition: transform .55s var(--ease-out);
}

.btn:hover::after { transform: translateX(120%); }
.btn:hover { transform: translateY(-2px); border-color: rgba(255, 255, 255, .24); }
.btn:active { transform: translateY(0) scale(.98); }
.btn:disabled { opacity: .4; pointer-events: none; }

.btn--primary {
    --btn-bg: linear-gradient(135deg, var(--ember), #ff8038);
    --btn-fg: #14100c;
    border-color: transparent;
    box-shadow: var(--glow-ember);
}
.btn--primary:hover { box-shadow: 0 0 0 1px rgba(255, 90, 31, .5), 0 14px 40px -10px rgba(255, 90, 31, .7); }

.btn--mint {
    --btn-bg: linear-gradient(135deg, var(--mint), #58f0c0);
    --btn-fg: #05231a;
    border-color: transparent;
}

.btn--ghost {
    --btn-bg: transparent;
    border-color: var(--line-strong);
}
.btn--ghost:hover { background: rgba(255, 255, 255, .05); }

.btn--danger { --btn-bg: rgba(255, 77, 94, .14); --btn-fg: #ff8a95; border-color: rgba(255, 77, 94, .3); }

.btn--sm { padding: 7px 13px; font-size: 13px; border-radius: var(--r-xs); }
.btn--lg { padding: 15px 30px; font-size: 17px; border-radius: var(--r-md); }
.btn--block { width: 100%; }

/* Formularfelder --------------------------------------------------------- */
.field { display: flex; flex-direction: column; gap: 7px; text-align: left; }

.field__label {
    font-size: 12px;
    font-weight: 600;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--text-faint);
}

.input {
    width: 100%;
    padding: 12px 14px;
    background: var(--bg-1);
    border: 1px solid var(--line-strong);
    border-radius: var(--r-sm);
    color: var(--text);
    transition: border-color .2s var(--ease), box-shadow .2s var(--ease), background .2s;
}

.input::placeholder { color: var(--text-faint); }

.input:focus {
    outline: none;
    border-color: rgba(255, 90, 31, .6);
    box-shadow: 0 0 0 3px rgba(255, 90, 31, .14);
    background: var(--surface-1);
}

/* Karten & Panels -------------------------------------------------------- */
.panel {
    background: linear-gradient(180deg, var(--surface-1), rgba(20, 23, 30, .6));
    border: 1px solid var(--line);
    border-radius: var(--r-lg);
    box-shadow: var(--shadow-md);
}

.panel__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 18px 22px;
    border-bottom: 1px solid var(--line);
}

.panel__title {
    font-size: 13px;
    font-weight: 700;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--text-dim);
}

.panel__body { padding: 22px; }

/* Chips ------------------------------------------------------------------ */
.chip {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 6px 13px;
    border-radius: var(--r-pill);
    background: rgba(255, 255, 255, .05);
    border: 1px solid var(--line);
    font-size: 13px;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
}

.chip--gold { color: var(--gold); border-color: rgba(255, 201, 60, .25); background: rgba(255, 201, 60, .08); }
.chip--ice { color: var(--ice); border-color: rgba(89, 194, 255, .25); background: rgba(89, 194, 255, .08); }
.chip--mint { color: var(--mint); border-color: rgba(34, 224, 161, .25); background: rgba(34, 224, 161, .08); }
.chip--ember { color: var(--ember-soft); border-color: rgba(255, 90, 31, .28); background: rgba(255, 90, 31, .1); }

/* Toasts ----------------------------------------------------------------- */
#toast-stack {
    position: fixed;
    z-index: 999;
    bottom: 24px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    pointer-events: none;
}

.toast {
    display: flex;
    align-items: center;
    gap: 11px;
    padding: 12px 20px;
    border-radius: var(--r-pill);
    background: rgba(24, 27, 34, .94);
    border: 1px solid var(--line-strong);
    box-shadow: var(--shadow-lg);
    backdrop-filter: blur(14px);
    font-size: 14px;
    font-weight: 500;
    animation: toast-in .42s var(--ease-spring) both;
}

.toast--out { animation: toast-out .3s var(--ease) both; }
.toast--good { border-color: rgba(34, 224, 161, .4); }
.toast--bad { border-color: rgba(255, 77, 94, .45); }
.toast__icon { font-size: 17px; }

@keyframes toast-in {
    from { opacity: 0; transform: translateY(22px) scale(.9); }
}
@keyframes toast-out {
    to { opacity: 0; transform: translateY(-10px) scale(.96); }
}

/* Modal ------------------------------------------------------------------ */
.modal-backdrop {
    position: fixed;
    inset: 0;
    z-index: 900;
    display: grid;
    place-items: center;
    padding: 20px;
    background: rgba(4, 5, 7, .72);
    backdrop-filter: blur(8px);
    animation: fade-in .22s var(--ease) both;
}

.modal {
    width: min(440px, 100%);
    animation: modal-in .4s var(--ease-spring) both;
}

@keyframes fade-in { from { opacity: 0; } }
@keyframes modal-in {
    from { opacity: 0; transform: translateY(18px) scale(.95); }
}

/* Utilities -------------------------------------------------------------- */
.num { font-variant-numeric: tabular-nums; }
.muted { color: var(--text-dim); }
.faint { color: var(--text-faint); }
.center { text-align: center; }
.stack { display: flex; flex-direction: column; }
.row { display: flex; align-items: center; }
.grow { flex: 1; }
.hidden { display: none !important; }
.sr-only {
    position: absolute; width: 1px; height: 1px;
    padding: 0; margin: -1px; overflow: hidden;
    clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

.divider { height: 1px; background: var(--line); border: 0; margin: 0; }

.skeleton {
    background: linear-gradient(90deg, var(--surface-2) 25%, var(--surface-3) 50%, var(--surface-2) 75%);
    background-size: 200% 100%;
    animation: shimmer 1.4s linear infinite;
    border-radius: var(--r-sm);
}

@keyframes shimmer { to { background-position: -200% 0; } }

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