@import url('https://fonts.googleapis.com/css2?family=Instrument+Serif:ital@0;1&family=DM+Sans:wght@400;500;600&family=JetBrains+Mono:wght@400;500&display=swap');

/* ============================================================
   Design tokens
   ============================================================ */

:root {
    /* Semantic colors */
    --color-bg: hsl(37 22% 90%);
    --color-fg: hsl(36 18% 10%);
    --color-surface: hsl(39 36% 93%);
    --color-surface-hover: hsl(39 28% 95%);
    --color-border: hsl(37 15% 78%);
    --color-board-cell: hsl(42 38% 95%);
    --color-board-border: hsl(37 15% 78%);
    --color-safe: hsl(40 28% 87%);

    /* Player palettes — base swatches (kept as raw HSL triplets so they
       can be remapped at runtime via --player-N = var(--base-color-X)). */
    --base-color-0: 10 63% 48%;
    --base-color-1: 152 38% 39%;
    --base-color-2: 43 75% 48%;
    --base-color-3: 223 54% 43%;
    --base-color-0-light: 16 68% 88%;
    --base-color-1-light: 148 30% 85%;
    --base-color-2-light: 46 64% 82%;
    --base-color-3-light: 220 42% 88%;

    --player-0: var(--base-color-0);
    --player-1: var(--base-color-1);
    --player-2: var(--base-color-2);
    --player-3: var(--base-color-3);
    --player-0-light: var(--base-color-0-light);
    --player-1-light: var(--base-color-1-light);
    --player-2-light: var(--base-color-2-light);
    --player-3-light: var(--base-color-3-light);
    --player-0-path: 18 48% 83%;
    --player-1-path: 148 26% 83%;
    --player-2-path: 46 60% 78%;
    --player-3-path: 215 38% 85%;

    /* Spacing scale (4px base) */
    --space-1: 4px;
    --space-2: 8px;
    --space-3: 12px;
    --space-4: 16px;
    --space-5: 20px;
    --space-6: 24px;
    --space-8: 32px;
    --space-10: 40px;
    --space-12: 48px;

    /* Radii */
    --radius-sm: 6px;
    --radius-md: 10px;
    --radius-lg: 12px;
    --radius-xl: 16px;
    --radius-2xl: 20px;
    --radius-pill: 9999px;

    /* Fonts */
    --font-display: "Instrument Serif", Georgia, serif;
    --font-sans: "DM Sans", -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
    --font-mono: "JetBrains Mono", "SF Mono", ui-monospace, monospace;

    /* Layout */
    --frame-max-w: 384px;
    --frame-min-h: calc(100dvh - 16px);
    --frame-fixed-h: 820px;
    --frame-fixed-max-h: calc(100dvh - 32px);

    /* Controls */
    --icon-btn-size: 38px;
    --cta-h: 60px;
    --cta-h-sm: 48px;
}

.dark {
    --color-bg: hsl(30 20% 8%);
    --color-fg: hsl(35 20% 90%);
    --color-surface: hsl(30 15% 14%);
    --color-surface-hover: hsl(30 15% 18%);
    --color-border: hsl(30 10% 25%);
    --color-board-cell: hsl(30 12% 20%);
    --color-board-border: hsl(30 12% 28%);
    --color-safe: hsl(30 15% 20%);

    --base-color-0: 10 63% 55%;
    --base-color-1: 152 38% 45%;
    --base-color-2: 43 75% 55%;
    --base-color-3: 223 54% 55%;
    --base-color-0-light: 10 40% 20%;
    --base-color-1-light: 152 30% 18%;
    --base-color-2-light: 43 40% 18%;
    --base-color-3-light: 223 35% 20%;

    --player-0-path: 10 30% 25%;
    --player-1-path: 148 20% 22%;
    --player-2-path: 43 30% 22%;
    --player-3-path: 223 25% 25%;
}

/* ============================================================
   Reset + base typography
   ============================================================ */

*, *::before, *::after {
    box-sizing: border-box;
    border: 0 solid var(--color-border);
}

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

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

body {
    font-family: var(--font-sans);
    font-weight: 400;
    line-height: 1.5;
    display: flex;
    flex-direction: column;
}

body,
#pause-menu,
#settings-overlay {
    background-image:
        radial-gradient(ellipse 80% 70% at 50% 50%,
            hsl(31 50% 71% / 0.6) 0%,
            hsl(31 42% 77% / 0.4) 35%,
            hsl(31 35% 84% / 0.18) 65%,
            transparent 90%);
    background-attachment: fixed;
}

.dark body,
.dark #pause-menu,
.dark #settings-overlay {
    background-image:
        radial-gradient(ellipse 80% 70% at 50% 50%,
            hsl(28 45% 25% / 0.85) 0%,
            hsl(28 35% 20% / 0.5) 35%,
            hsl(28 25% 15% / 0.2) 65%,
            transparent 90%);
}

button {
    font: inherit;
    color: inherit;
    background: transparent;
    border: 0;
    padding: 0;
    cursor: pointer;
}

input {
    font: inherit;
    color: inherit;
}

a {
    color: inherit;
    text-decoration: none;
}

table td {
    font-variant-numeric: tabular-nums;
}

/* ============================================================
   Utility classes (kept minimal — only the ones JS depends on)
   ============================================================ */

.hidden {
    display: none !important;
}

/* ============================================================
   Layout primitives — used by home, setup, settings, pause, board,
   changelog, privacy. Outer page frame + top icon row + CTAs.
   ============================================================ */

.page {
    flex: 1;
    display: flex;
    align-items: flex-start;
    justify-content: center;
    padding: var(--space-2);
}

@media (min-width: 640px) {
    .page {
        align-items: center;
    }
}

.frame {
    width: 100%;
    max-width: var(--frame-max-w);
    display: flex;
    flex-direction: column;
    min-height: var(--frame-min-h);
}

@media (min-width: 640px) {
    .frame {
        min-height: 0;
        height: var(--frame-fixed-h);
        max-height: var(--frame-fixed-max-h);
    }
}

.frame-overlay {
    position: fixed;
    inset: 0;
    z-index: 50;
    background: var(--color-bg);
    overflow-y: auto;
    display: none;
    align-items: flex-start;
    justify-content: center;
    padding: var(--space-2);
}

.frame-overlay:not(.hidden) {
    display: flex;
}

@media (min-width: 640px) {
    .frame-overlay:not(.hidden) {
        align-items: center;
    }
}

.top-bar {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    padding-top: var(--space-1);
    padding-bottom: var(--space-6);
}

.top-bar-title {
    flex: 1;
    text-align: center;
    font-size: 11px;
    font-weight: 500;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    opacity: 0.5;
}

.icon-btn {
    width: var(--icon-btn-size);
    height: var(--icon-btn-size);
    border-radius: var(--radius-pill);
    background: transparent;
    border: 1px solid hsl(var(--color-fg-h, 36 18% 10%) / 0.15);
    border-color: color-mix(in srgb, var(--color-fg) 15%, transparent);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    opacity: 0.7;
    transition: opacity 150ms ease;
    color: inherit;
    padding: 0;
    text-decoration: none;
}

.icon-btn:hover {
    opacity: 1;
}

.icon-btn-spacer {
    width: var(--icon-btn-size);
}

.frame-body {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.frame-footer {
    padding-top: var(--space-4);
    padding-bottom: var(--space-2);
    display: flex;
    flex-direction: column;
    gap: 10px;
}

/* CTAs */

.cta-primary {
    width: 100%;
    height: var(--cta-h);
    border-radius: var(--radius-2xl);
    background: var(--color-fg);
    color: var(--color-bg);
    font-weight: 500;
    font-size: 17px;
    letter-spacing: 0.025em;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    transition: opacity 150ms ease;
}

.cta-primary:hover {
    opacity: 0.9;
}

.cta-primary:disabled {
    opacity: 0.4;
    cursor: not-allowed;
}

.cta-secondary {
    width: 100%;
    height: var(--cta-h-sm);
    border-radius: var(--radius-2xl);
    background: transparent;
    color: var(--color-fg);
    font-weight: 500;
    font-size: 14px;
    border: 1px solid color-mix(in srgb, var(--color-fg) 15%, transparent);
    cursor: pointer;
    opacity: 0.8;
    transition: background-color 150ms ease;
}

.cta-secondary:hover {
    background: color-mix(in srgb, var(--color-fg) 5%, transparent);
}

/* Display text + section labels */

.display-title {
    font-family: var(--font-display);
    font-size: 40px;
    line-height: 1;
    letter-spacing: -0.025em;
    padding: var(--space-2) var(--space-1);
    margin: 0;
}

.body-helper {
    font-size: 14px;
    opacity: 0.5;
    padding: var(--space-2) var(--space-1) var(--space-4);
    max-width: 320px;
    margin: 0;
}

.section-label {
    font-size: 11px;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    opacity: 0.4;
    font-weight: 500;
}

.section-group {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
}

.surface-card {
    background: var(--color-surface);
    border-radius: var(--radius-2xl);
    border: 1px solid color-mix(in srgb, var(--color-fg) 10%, transparent);
}

.surface-card-padded {
    padding: 14px;
}

/* ============================================================
   Player color helpers
   (player-N variables are remapped at runtime — see scripts/render-logic.js)
   ============================================================ */

.player-bg-0 { background-color: hsl(var(--player-0)); }
.player-bg-1 { background-color: hsl(var(--player-1)); }
.player-bg-2 { background-color: hsl(var(--player-2)); }
.player-bg-3 { background-color: hsl(var(--player-3)); }

.player-bg-soft-0 { background-color: hsl(var(--player-0-light)); }
.player-bg-soft-1 { background-color: hsl(var(--player-1-light)); }
.player-bg-soft-2 { background-color: hsl(var(--player-2-light)); }
.player-bg-soft-3 { background-color: hsl(var(--player-3-light)); }

.player-bg-path-0 { background-color: hsl(var(--player-0-path)); }
.player-bg-path-1 { background-color: hsl(var(--player-1-path)); }
.player-bg-path-2 { background-color: hsl(var(--player-2-path)); }
.player-bg-path-3 { background-color: hsl(var(--player-3-path)); }

.player-fg-0 { color: hsl(var(--player-0)); }
.player-fg-1 { color: hsl(var(--player-1)); }
.player-fg-2 { color: hsl(var(--player-2)); }
.player-fg-3 { color: hsl(var(--player-3)); }

.player-border-0 { border-color: hsl(var(--player-0)); }
.player-border-1 { border-color: hsl(var(--player-1)); }
.player-border-2 { border-color: hsl(var(--player-2)); }
.player-border-3 { border-color: hsl(var(--player-3)); }

.player-fill-0 { fill: hsl(var(--player-0)); }
.player-fill-1 { fill: hsl(var(--player-1)); }
.player-fill-2 { fill: hsl(var(--player-2)); }
.player-fill-3 { fill: hsl(var(--player-3)); }

/* ============================================================
   Keyframes + animation utility classes
   (utility class names are queried by JS — preserve them)
   ============================================================ */

@keyframes dice-ripple {
    0% { width: 80%; height: 80%; opacity: 0.5; }
    100% { width: 220%; height: 220%; opacity: 0; }
}

.dice-ripple {
    animation: dice-ripple 1.8s ease-out infinite;
    pointer-events: none;
}

@keyframes dice-shake {
    0% { transform: scale(1) rotate(0deg); }
    20% { transform: scale(0.92) rotate(-5deg); }
    40% { transform: scale(0.95) rotate(3deg); }
    60% { transform: scale(1.04) rotate(-2deg); }
    80% { transform: scale(1.02) rotate(1deg); }
    100% { transform: scale(1) rotate(0deg); }
}

.dice-rolling {
    animation: dice-shake 0.45s ease-in-out;
}

@keyframes capture-pulse {
    0% { transform: scale(1); opacity: 1; }
    30% { transform: scale(1.15); opacity: 0.8; }
    100% { transform: scale(0); opacity: 0; }
}

.token-captured {
    animation: capture-pulse 0.5s ease-in forwards;
}

@keyframes active-dice-pulse {
    0%, 100% {
        transform: scale(1);
        box-shadow: 0 12px 24px -8px var(--pulse-color), inset 0 -2px 0 rgba(0,0,0,0.12), 0 0 0 0 var(--pulse-color);
    }
    50% {
        transform: scale(1.05);
        box-shadow: 0 14px 28px -8px var(--pulse-color), inset 0 -2px 0 rgba(0,0,0,0.12), 0 0 0 10px transparent;
    }
}

.active-dice-pulse {
    animation: active-dice-pulse 1.6s ease-in-out infinite;
}

@keyframes token-bounce {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-20%); }
}

.animate-bounce {
    animation: token-bounce 1s infinite;
}

/* ============================================================
   Touch defaults for interactive game elements
   ============================================================ */

wc-token, wc-dice {
    touch-action: manipulation;
}

wc-quick-start, wc-board {
    display: block;
}

wc-token .animate-bounce {
    filter: drop-shadow(0 0 4px currentColor);
}