:root {
    /* Brand — corner A of every duel. "Meme Riot" repaint: this app is
       friends slapping stickers of their favorite clips/songs onto a board
       and trash-talking, not a solemn arena — so the palette is loud,
       collage-y, hot pink vs. cobalt, not crimson vs. steel-blue. */
    --color-primary:        #FF3D81;
    --color-primary-hover:  #FF5C97;
    --color-primary-active: #D6296A;
    --color-primary-soft:   rgba(255, 61, 129, 0.18);

    /* Secondary — cobalt is corner B. Every gradient below is a duel. */
    --color-secondary:        #2D5BFF;
    --color-secondary-active: #1C3FCC;
    --color-secondary-hover:  rgba(45, 91, 255, 0.75);
    --color-crimson:          #2D5BFF;
    --color-crimson-hover:    #4A72FF;
    --color-crimson-soft:     rgba(45, 91, 255, 0.15);

    /* "Gold" — actually acid lime now. Reserved for victory/champion
       moments only (podium #1, confetti, winner card). Never a duel side,
       so it stays meaningful whenever it shows up. */
    --color-gold:        #B4FF39;
    --color-gold-hover:  #C6FF66;
    --color-gold-vivid:  #C6FF66;
    --color-gold-soft:   rgba(180, 255, 57, 0.18);

    /* Backgrounds — dark plum-black, the "board" the stickers sit on */
    --color-bg:         #14121A;
    --color-surface:    #1F1A28;
    --color-surface-2:  #2A2333;

    /* Borders */
    --color-border:     #3A3145;
    --color-border-soft:#241E2C;

    /* Text — warm cream, doubling as the "paper" tone for sticker cards
       (see --color-paper below), so brand text and sticker material read
       as the same material. */
    --color-text:        #F4EFE4;
    --color-text-muted:  #B6ABC4;
    --color-text-subtle: #7D7290;

    /* Paper — the sticker material itself: cream card stock + dark ink,
       used by .paperSticker for short/label-only content (podium blocks,
       the hero fight-card, callouts) where a full light/dark swap is safe. */
    --color-paper:      #F4EFE4;
    --color-paper-2:    #EDE6D6;
    --color-ink:         #201A28;
    --color-ink-muted:   #4A4058;
    --color-sticker-line: rgba(244, 239, 228, 0.9);

    /* States — error is deliberately orange-leaning, not pure pink, so a
       validation error never reads as "duel side A" */
    --color-error:       #F0553D;
    --color-error-hover: #FF6E52;

    --color-success:       #3FCB82;
    --color-success-hover: #5EDB9B;

    --color-info:       #A6B0F0;
    --color-info-hover: #8894E0;

    /* Vivid companions — the true brand colors above are deep, right for
       solid fills sitting under light text. Thin lines and gradient-clipped
       text need a brighter tint of the same hue to stay legible on near-black. */
    --color-primary-vivid:   #FF5FA0;
    --color-secondary-vivid: #5B82FF;

    /* Gradients — always a sweep between the two duel corners */
    --lg1: linear-gradient(0deg,   var(--color-secondary-vivid), var(--color-primary-vivid));
    --lg2: linear-gradient(90deg,  var(--color-secondary-vivid), var(--color-primary-vivid));
    --lg3: linear-gradient(180deg, var(--color-secondary-vivid), var(--color-primary-vivid));
    --lg4: linear-gradient(270deg, var(--color-secondary-vivid), var(--color-primary-vivid));

    /* The signature seam: a hard diagonal split, not a blend. Used sparingly. */
    --seam-hard: linear-gradient(100deg, var(--color-primary-vivid) 0%, var(--color-primary-vivid) calc(50% - 1px), var(--color-text) 50%, var(--color-secondary-vivid) calc(50% + 1px), var(--color-secondary-vivid) 100%);
    --seam-line: linear-gradient(100deg, var(--color-primary-vivid), var(--color-secondary-vivid));

    /* Type */
    --font-display: 'Bricolage Grotesque', 'Afacad', sans-serif;
    --font-body: 'Afacad', sans-serif;
    --font-mono: 'JetBrains Mono', ui-monospace, monospace;

    /* Motion — impact is a springy overshoot for anything that represents a
       decision landing (button press, judgment flash, confetti, XP fill);
       flow is smooth, for page-level reveals and transitions. */
    --ease-impact: cubic-bezier(0.34, 1.56, 0.64, 1);
    --ease-flow: cubic-bezier(0.4, 0, 0.2, 1);
    --duration-impact: 220ms;
    --duration-flow: 500ms;

    /* UI — rounder than the old Arena pass; a sticker has soft die-cut
       corners, not a sharp institutional edge. */
    --transition-default: ease-in-out 250ms;
    --radius-default: 1rem;
    --radius-small: 0.65rem;
    --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.4);
    --shadow-sm:
            0 2px 6px rgba(0, 0, 0, 0.45),
            0 1px 2px rgba(0, 0, 0, 0.1);
    --shadow-md:
            0 8px 24px rgba(0, 0, 0, 0.55),
            0 2px 6px rgba(0, 0, 0, 0.12);
    --shadow-lg:
            0 16px 40px rgba(0, 0, 0, 0.65),
            0 4px 12px rgba(0, 0, 0, 0.15);

    /* Glows — colored and soft; the primary hover/celebration feedback in
       this direction, standing in for flat darkening as "this is alive". */
    --glow-crimson: 0 0 24px rgba(255, 61, 129, 0.45);
    --glow-blue:    0 0 24px rgba(45, 91, 255, 0.45);
    --glow-gold:    0 0 28px rgba(180, 255, 57, 0.45);
    --glow-success: 0 0 24px rgba(63, 203, 130, 0.5);

    /* 0 on desktop; overridden below on mobile, where a fixed bottom tab
       bar covers this much of the viewport. Folded into every page's
       `calc(100dvh - 65px - var(--bottom-nav-offset))` height so content
       never ends up hidden behind it. */
    --bottom-nav-offset: 0px;
}

@media (max-width: 759px) {
    :root {
        --bottom-nav-offset: 4.5rem;
    }
}

* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    scrollbar-width: none;
    -ms-overflow-style: none;
}

*::-webkit-scrollbar {
    display: none;
}

html {
    background-color: var(--color-bg);
}

body {
    background-color: var(--color-bg);
    color: var(--color-text);
    font-family: var(--font-body);
    line-height: 1.5;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

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

/* Page-entrance reveal — plain CSS animation, not a Svelte `in:` transition.
   Svelte intentionally skips `in:` transitions on a component's very first
   render (hydration included), so anything meant to animate in on a hard
   page load has to run on the CSS animation timeline instead, which always
   plays regardless of hydration. Content itself is never delayed or
   conditionally mounted for this — it's in the DOM from first paint, so the
   animation only ever moves opacity/transform and never causes layout shift. */
@keyframes vd-enter {
    from {
        opacity: 0;
        transform: translate(var(--vd-enter-x, 0px), var(--vd-enter-y, 0px));
    }
    to {
        opacity: 1;
        transform: translate(0, 0);
    }
}

.vd-enter {
    animation: vd-enter var(--vd-enter-duration, 600ms) var(--ease-flow) var(--vd-enter-delay, 0ms) both;
}

:focus-visible {
    outline: 2px solid var(--color-primary-vivid);
    outline-offset: 2px;
    border-radius: 2px;
}

h1, h2, h3, h4, h5, h6 {
    font-family: var(--font-body);
    color: var(--color-text);
    font-weight: 700;
    line-height: 1.1;
}

h1, h2, h3 {
    font-family: var(--font-display);
    font-weight: 800;
    letter-spacing: -0.02em;
    text-wrap: balance;
}

h1 { font-size: clamp(2.5rem, 5vw, 4rem); }
h2 { font-size: clamp(2rem, 4vw, 3rem); }
h3 { font-size: 1.6rem; font-weight: 700; }
h4 { font-size: 1.25rem; }

p {
    color: var(--color-text-muted);
}

a {
    color: var(--color-primary);
    text-decoration: none;
    transition: color var(--transition-default);
}

a:hover {
    color: var(--color-primary-hover);
}

.container {
    width: 100%;
    height: 100%;
}

.mono {
    font-family: var(--font-mono);
    font-variant-numeric: tabular-nums;
}

/* The signature seam as a divider — a hairline gradient rule, the quiet
   version of the hard split used in hero moments. */
.seam {
    height: 2px;
    width: 100%;
    background: var(--seam-line);
    border-radius: 2px;
    border: none;
}

.translucent {
    background: rgba(244, 239, 228, 0.06) !important;
    box-shadow: 0 4px 30px rgba(0, 0, 0, 0.25) !important;
    backdrop-filter: blur(10px) !important;
    -webkit-backdrop-filter: blur(10px) !important;
    border: 1px solid rgba(244, 239, 228, 0.12) !important;
}

/* Sticker system — the "Meme Riot" signature. A .stickerFrame keeps the
   dark surface card (so embedded iframes/icons never need recoloring) but
   trades a flat drop-shadow for a hard offset shadow + bright outline, like
   a sticker peeled and slapped down at a slight angle. A .paperSticker goes
   further: full cream card stock + ink text, for short/label-only content
   (podium blocks, hero callouts) where inverting to light is safe. Both
   pair with .tiltL/.tiltR for the "slapped on a board" tilt. */
.stickerFrame {
    border: 3px solid var(--color-sticker-line);
    box-shadow: 6px 6px 0 rgba(0, 0, 0, 0.4);
}

.tiltL { transform: rotate(-1.75deg); }
.tiltR { transform: rotate(1.75deg); }

.paperSticker {
    background: var(--color-paper);
    color: var(--color-ink);
    border: 3px solid var(--color-ink);
    border-radius: var(--radius-default);
    box-shadow: 6px 6px 0 rgba(0, 0, 0, 0.35);
    position: relative;
}

/* The peeled corner: a small triangle in the accent color, tucked inside
   the card bounds so it survives overflow:hidden on iframe-bearing cards. */
.paperSticker::after {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    width: 26px;
    height: 26px;
    clip-path: polygon(100% 0, 0 0, 100% 100%);
    background: var(--color-gold);
}

.btnDisabled {
    cursor: not-allowed !important;
    background: var(--color-surface-2) !important;
    color: var(--color-text-subtle) !important;
    border-color: var(--color-border) !important;
}

.bannerWrapper {
    position: fixed;
    top: 2rem;
    right: 2rem;
    z-index: 9999;
    pointer-events: none;
}

.primaryButton, .secondaryButton {
    appearance: none;
    border-radius: var(--radius-small);
    padding: 0.85rem 1.5rem;
    font: inherit;
    line-height: 1.2;
    box-sizing: border-box;
}

.primaryButton {
    background: var(--color-primary) !important;
    color: var(--color-ink) !important;
    font-weight: 700 !important;
    border: none;
    box-shadow: 0 4px 0 var(--color-primary-active), var(--shadow-sm);

    cursor: pointer;
    transition:
        background var(--transition-default),
        box-shadow var(--duration-impact) var(--ease-impact),
        transform var(--duration-impact) var(--ease-impact);
}

/* Arcade-button press: a solid offset "edge" at rest that compresses flat
   when pressed, like a real physical button — the single change that gives
   every button in the app tactile feedback for free. */
.primaryButton:hover { background: var(--color-primary-hover) !important; box-shadow: 0 4px 0 var(--color-primary-active), var(--glow-crimson); transform: translateY(-2px) rotate(-1deg); }
.primaryButton:active {
    background: var(--color-primary-hover) !important;
    transform: translateY(4px) rotate(0deg);
    box-shadow: none;
}

.primaryButton:disabled {
    cursor: not-allowed !important;
    background: var(--color-surface-2) !important;
    color: var(--color-text-subtle) !important;
    box-shadow: none !important;
    transform: none !important;
}

.secondaryButton {
    background: var(--color-surface-2) !important;
    color: var(--color-text) !important;
    font-weight: 600 !important;
    border: 1px solid var(--color-border) !important;
    box-shadow: 0 4px 0 var(--color-border);

    cursor: pointer;
    transition:
        border-color var(--transition-default),
        box-shadow var(--duration-impact) var(--ease-impact),
        transform var(--duration-impact) var(--ease-impact);
}

.secondaryButton:hover { border-color: var(--color-text-subtle) !important; transform: translateY(-2px) rotate(1deg); }
.secondaryButton:active {
    transform: translateY(4px) rotate(0deg);
    box-shadow: none;
}
.secondaryButton:disabled {
    cursor: not-allowed !important;
    color: var(--color-text-subtle) !important;
    box-shadow: none !important;
    transform: none !important;
}


.title {
    font-family: var(--font-display);
    background: var(--lg2);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
    width: fit-content;
    line-height: 1.25;
}

.titleReverse {
    font-family: var(--font-display);
    background: var(--lg4);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
    width: fit-content;
    line-height: 1.25;
}

.subMenu {
    width: fit-content;
    height: 100%;
    overflow-y: scroll;
    display: flex;
    flex-direction: column;
    gap: 2rem;
}

.content {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    gap: 1rem;
}

.subTitle {
    font-family: var(--font-display);
    font-weight: 600;
    font-size: 1.25rem;
    color: var(--color-text);
}

.subMenu button {
    all: unset;
    height: fit-content;
    width: 100%;
    color: var(--color-text-muted);
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 0.5rem;
    cursor: pointer;
    transition: var(--transition-default);
}

.subMenu button:hover { color: var(--color-text); opacity: 1; }

.seperatorLine {
    width: 1px;
    height: 100%;
    margin: 0 1rem;
    background: var(--color-border);
    border-radius: var(--radius-small);
}

.setting {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}