:root {
    color-scheme: dark;
    --kraken-ink: #f2fbff;
    --kraken-muted: #9fc6d7;
    --kraken-dim: #6f98aa;
    --kraken-cyan: #54d6f6;
    --kraken-coral: #f27668;
    --kraken-gold: #e7b64c;
    --kraken-violet: #8f7bff;
    --kraken-glass: rgba(8, 28, 39, 0.68);
    --kraken-glass-strong: rgba(10, 35, 49, 0.82);
    --kraken-line: rgba(126, 220, 244, 0.2);
    --kraken-shadow: 0 22px 80px rgba(0, 0, 0, 0.44);
}

body.kraken-themed {
    min-height: 100vh;
    background: #02090e;
    color: var(--kraken-ink);
}

body.kraken-themed::before,
body.kraken-themed::after {
    content: "";
    position: fixed;
    inset: 0;
    pointer-events: none;
}

body.kraken-themed::before {
    z-index: -2;
    background:
        radial-gradient(circle at 18% 12%, rgba(84, 214, 246, 0.18), transparent 30%),
        linear-gradient(180deg, rgba(1, 12, 18, 0.16), rgba(1, 8, 13, 0.34) 62%, rgba(1, 5, 9, 0.72));
}

body.kraken-themed::after {
    z-index: 0;
    background:
        radial-gradient(ellipse at 50% 0%, rgba(129, 218, 239, 0.12), transparent 38%),
        linear-gradient(90deg, rgba(0, 0, 0, 0.18), transparent 20%, transparent 78%, rgba(0, 0, 0, 0.22));
}

.site-wallpaper,
.aurelia-background,
.depth-scene {
    position: fixed;
    inset: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
}

.site-wallpaper {
    z-index: -5;
    background-image: url("/assets/kraken-unbound-underwater-wallpaper.png");
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
    filter: saturate(1.04) contrast(1.05) brightness(0.9);
}

body.kraken-theme-arkade .site-wallpaper,
body.kraken-theme-music .site-wallpaper {
    background-image: url("/assets/kraken-unbound-shipwreck-wallpaper.png");
}

body.kraken-theme-traveller .site-wallpaper {
    background-image:
        linear-gradient(rgba(0, 10, 18, 0.25), rgba(0, 8, 14, 0.64)),
        url("/assets/kraken-unbound-underwater-wallpaper.png");
    filter: saturate(0.88) contrast(1.12) brightness(0.64);
}

.aurelia-background {
    --aurelia-opacity: 0.72;
    z-index: -1;
    border: 0;
    opacity: 0 !important;
    visibility: hidden !important;
    transition: none !important;
    filter:
        brightness(1.12)
        contrast(1.06)
        saturate(1.1)
        drop-shadow(0 0 20px rgba(255, 176, 95, 0.34))
        drop-shadow(0 0 30px rgba(84, 214, 246, 0.16));
    mix-blend-mode: screen;
}

.aurelia-background.is-ready {
    opacity: var(--aurelia-opacity) !important;
    visibility: visible !important;
}

.depth-scene {
    z-index: 1;
    opacity: 0.78;
    mix-blend-mode: screen;
}

body.kraken-themed .ocean-bg,
body.kraken-themed .bubbles,
body.kraken-themed .light-rays,
body.kraken-themed .aurora,
body.kraken-themed .particle-canvas {
    display: none !important;
}

body.kraken-themed > :not(.site-wallpaper):not(.aurelia-background):not(.depth-scene):not(.clock-hud):not(.bubbles-container):not(.back-link):not(.clock-back-link):not(.user-bar):not(.login-overlay):not(.arkade-topbar) {
    position: relative;
    z-index: 2;
}

body.kraken-themed .container,
body.kraken-themed .app-shell {
    position: relative;
    z-index: 2;
}

body.kraken-themed header h1,
body.kraken-themed .container > h1,
body.kraken-themed h1 {
    letter-spacing: 0;
    text-shadow:
        0 3px 20px rgba(0, 0, 0, 0.85),
        0 0 28px rgba(84, 214, 246, 0.18);
}

body.kraken-themed .tagline,
body.kraken-themed .subtitle,
body.kraken-themed .eyebrow,
body.kraken-themed .panel-label {
    color: var(--kraken-muted);
}

body.kraken-themed .back-link,
body.kraken-themed .clock-back-link {
    background: rgba(4, 19, 28, 0.72);
    border: 1px solid rgba(126, 220, 244, 0.18);
    border-radius: 8px;
    color: var(--kraken-muted);
    padding: 8px 12px;
    backdrop-filter: blur(14px);
    box-shadow: 0 12px 34px rgba(0, 0, 0, 0.26);
}

body.kraken-themed .back-link:hover,
body.kraken-themed .clock-back-link:hover {
    color: var(--kraken-ink);
    border-color: rgba(84, 214, 246, 0.42);
}

body.kraken-themed .controls-section,
body.kraken-themed .converter-section,
body.kraken-themed .common-section,
body.kraken-themed .help-section,
body.kraken-themed .privacy-notice,
body.kraken-themed .security-notice,
body.kraken-themed .stats-section,
body.kraken-themed .transform-section,
body.kraken-themed .canvas-section,
body.kraken-themed .qr-section,
body.kraken-themed .preview-section,
body.kraken-themed .settings-section,
body.kraken-themed .drop-zone,
body.kraken-themed .deck,
body.kraken-themed .library,
body.kraken-themed .game-card,
body.kraken-themed .login-modal,
body.kraken-themed .panel,
body.kraken-themed .card,
body.kraken-themed .stat-card,
body.kraken-themed .quick-grid > *,
body.kraken-themed .input-panel,
body.kraken-themed .qr-container {
    background:
        linear-gradient(145deg, rgba(255, 255, 255, 0.065), rgba(255, 255, 255, 0.018)),
        var(--kraken-glass);
    border-color: var(--kraken-line);
    box-shadow: var(--kraken-shadow);
    backdrop-filter: blur(18px) saturate(1.15);
}

body.kraken-themed button,
body.kraken-themed .load-btn,
body.kraken-themed .category-tab,
body.kraken-themed .type-btn,
body.kraken-themed .transform-btn,
body.kraken-themed .action-btn,
body.kraken-themed .small-btn,
body.kraken-themed .generate-btn,
body.kraken-themed .copy-btn,
body.kraken-themed .copy-inline-btn,
body.kraken-themed .swap-btn,
body.kraken-themed .icon-btn,
body.kraken-themed .play-btn,
body.kraken-themed .download-btn,
body.kraken-themed .login-btn {
    border-color: rgba(126, 220, 244, 0.24);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.08),
        0 12px 34px rgba(0, 0, 0, 0.24);
}

body.kraken-themed button:hover,
body.kraken-themed .load-btn:hover,
body.kraken-themed .category-tab:hover,
body.kraken-themed .type-btn:hover,
body.kraken-themed .transform-btn:hover,
body.kraken-themed .action-btn:hover,
body.kraken-themed .small-btn:hover,
body.kraken-themed .generate-btn:hover,
body.kraken-themed .copy-btn:hover,
body.kraken-themed .copy-inline-btn:hover,
body.kraken-themed .swap-btn:hover,
body.kraken-themed .icon-btn:hover,
body.kraken-themed .play-btn:hover,
body.kraken-themed .download-btn:hover,
body.kraken-themed .login-btn:hover {
    border-color: rgba(84, 214, 246, 0.54);
    filter: brightness(1.08);
}

body.kraken-themed input,
body.kraken-themed textarea,
body.kraken-themed select {
    background: rgba(2, 14, 22, 0.7);
    border-color: rgba(126, 220, 244, 0.24);
    color: var(--kraken-ink);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05);
}

body.kraken-themed input:focus,
body.kraken-themed textarea:focus,
body.kraken-themed select:focus {
    border-color: rgba(84, 214, 246, 0.62);
    box-shadow: 0 0 0 3px rgba(84, 214, 246, 0.14);
    outline: none;
}

body.kraken-themed .category-tab.active,
body.kraken-themed .type-btn.active,
body.kraken-themed .login-tab.active {
    background:
        linear-gradient(145deg, rgba(84, 214, 246, 0.22), rgba(242, 118, 104, 0.1)),
        var(--kraken-glass-strong);
    color: var(--kraken-ink);
}

body.kraken-themed .game-card {
    overflow: hidden;
}

body.kraken-themed .game-card::before {
    opacity: 0.44;
}

body.kraken-themed .game-icon {
    filter: drop-shadow(0 0 18px rgba(84, 214, 246, 0.26));
}

body.kraken-themed .sound-toggle {
    z-index: 20;
    background: rgba(4, 19, 28, 0.78);
    border-color: rgba(126, 220, 244, 0.24);
    backdrop-filter: blur(14px);
}

body.kraken-theme-music .deck {
    background:
        linear-gradient(145deg, rgba(6, 32, 45, 0.8), rgba(3, 15, 24, 0.9)),
        rgba(8, 28, 39, 0.72);
}

body.kraken-theme-traveller .aurelia-background {
    --aurelia-opacity: 0.42;
}

body.kraken-themed.kraken-clock-preserve-wallpaper {
    background: #02070b;
}

body.kraken-themed.kraken-clock-preserve-wallpaper::before,
body.kraken-themed.kraken-clock-preserve-wallpaper::after {
    display: none;
}

body.kraken-clock-preserve-wallpaper .site-wallpaper {
    display: none;
}

body.kraken-clock-preserve-wallpaper #abyss {
    z-index: 0;
}

body.kraken-clock-preserve-wallpaper .clock-hud {
    position: fixed;
    inset: 0;
    z-index: 3;
}

body.kraken-clock-preserve-wallpaper .aurelia-background {
    --aurelia-opacity: 0.5;
    z-index: 1;
    filter:
        brightness(1.08)
        contrast(1.04)
        saturate(1.05)
        drop-shadow(0 0 16px rgba(255, 176, 95, 0.26));
}

body.kraken-clock-preserve-wallpaper .depth-scene {
    z-index: 2;
    opacity: 0.46;
}

body.kraken-clock-preserve-wallpaper .bubbles-container {
    position: fixed;
    inset: 0;
    z-index: 2;
    pointer-events: none;
    overflow: hidden;
    mix-blend-mode: screen;
    opacity: 0.82;
}

body.kraken-clock-preserve-wallpaper .bubble {
    background:
        radial-gradient(circle at 30% 28%, rgba(255, 255, 255, 0.88), rgba(205, 249, 255, 0.36) 18%, rgba(96, 226, 255, 0.1) 48%, rgba(96, 226, 255, 0.02) 72%, transparent 100%);
    border: 1px solid rgba(214, 250, 255, 0.5);
    box-shadow:
        inset -2px -4px 8px rgba(176, 241, 255, 0.1),
        inset 2px 3px 7px rgba(255, 255, 255, 0.18),
        0 0 10px rgba(108, 226, 255, 0.16);
}

body.kraken-clock-preserve-wallpaper .bubble::before {
    background: rgba(255, 255, 255, 0.72);
}

@media (max-width: 760px) {
    body.kraken-themed::after {
        background: linear-gradient(180deg, rgba(0, 0, 0, 0.08), rgba(0, 0, 0, 0.34));
    }

    .aurelia-background {
        --aurelia-opacity: 0.58;
    }
}

@media (prefers-reduced-motion: reduce) {
    .aurelia-background {
        --aurelia-opacity: 0.42;
    }

    .depth-scene {
        opacity: 0.42;
    }
}