/* @file Background-only grain for all themes and transparent paper surfaces for light/graphite; layout and storage keys stay unchanged. */
:root {
    --accent-surface: #324331;
    --accent-text: #ead9ae;
    --graphite-grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.62' numOctaves='4' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' opacity='.25' filter='url(%23n)'/%3E%3C/svg%3E");
}
:root[data-theme='dark'] body {
    background-color: var(--panel);
    background-image: var(--graphite-grain);
}
:root[data-theme='dark'] .experience-bar > span {
    color: #fff;
    mix-blend-mode: difference;
}
:root:not([data-theme='dark']) {
    color-scheme: light;
    --gold: #8b621f;
    --accent-surface: #eee8d9;
    --accent-text: #70501d;
    --muted: #66736b;
    --panel: #f6f7f3;
    --graphite-paper: #f4f5f1;
    --line: #d6dcd6;
    --battle-background: #f4f6f1;
    --battle-text: #293b33;
    --ability-locked-text: #727b75;
    --checkbox-fill: #536d60;
    --checkbox-mark: #ffffff;
}
:root:not([data-theme='dark']) body {
    color: #343e3d;
    background-color: var(--graphite-paper);
    background-image: var(--graphite-grain);
}
:root:not([data-theme='dark']) .card,
:root:not([data-theme='dark']) dialog,
:root:not([data-theme='dark']) #chat {
    color: #343e3d;
    background-color: transparent;
    background-image: none;
    box-shadow: 0 2px 10px #35453b0b;
}
:root:not([data-theme='dark']) #gameHeader,
:root:not([data-theme='dark']) .navigation-inner {
    color: #343e3d;
    background-color: transparent;
    background-image: none;
    box-shadow: none;
}
:root:not([data-theme='dark']) button,
:root:not([data-theme='dark']) input,
:root:not([data-theme='dark']) select {
    color: #34473d;
    background-color: transparent;
    border-color: var(--line);
}
:root:not([data-theme='dark']) .primary,
:root:not([data-theme='dark']) button[aria-pressed='true'] {
    background-color: var(--accent-surface);
    color: var(--accent-text);
    border-color: var(--gold);
}
:root:not([data-theme='dark']) .bar {
    background-color: #e4eae2;
}
:root:not([data-theme='dark']) .bar i {
    background-color: #687f70;
}
:root:not([data-theme='dark']) .bar.energy i {
    background-color: #9a946b;
}
:root:not([data-theme='dark']) .bar.mana i {
    background-color: #788f9b;
}
.appearance-setting {
    display: block;
    margin-block: 12px 6px;
}
#appearanceTheme {
    display: block;
    box-sizing: border-box;
    width: 100%;
    min-height: 44px;
    margin-bottom: 16px;
}

:root:not([data-theme='dark']) .dungeon-entry-art {
    background: transparent;
}
:root:not([data-theme='dark']) dialog,
:root:not([data-theme='dark']) body.chat-open #chat {
    background-color: var(--panel);
    background-image: var(--graphite-grain);
}
:root:not([data-theme='dark']) option {
    background-color: var(--panel);
}

:root[data-theme='graphite'] {
    --gold: #455854;
    --accent-surface: #d3ddd5;
    --accent-text: #344f40;
    --panel: #e2e4e1;
    --graphite-paper: #e2e4e1;
    --line: #bec6c0;
    --battle-background: #e2e4e1;
}

:root[data-accent='red'] {
    --gold: #a33e41;
    --accent-surface: #f0dfe0;
    --accent-text: #7d292e;
    --checkbox-fill: #9a3f45;
}
:root[data-theme='dark'][data-accent='red'] {
    --gold: #ee9396;
    --accent-surface: #492b30;
    --accent-text: #f1bec0;
    --checkbox-fill: #a4545c;
}
:root[data-theme='dark'] {
    color-scheme: dark;
    --battle-background: #152420;
}
:root[data-theme='dark'] .card,
:root[data-theme='dark'] #gameHeader,
:root[data-theme='dark'] .navigation-inner {
    background-color: transparent;
    background-image: none;
}
:root[data-theme='dark'] dialog,
:root[data-theme='dark'] body.chat-open #chat {
    background-color: var(--panel);
    background-image: var(--graphite-grain);
}
:root[data-theme='dark'] button,
:root[data-theme='dark'] input,
:root[data-theme='dark'] select {
    background-color: transparent;
}
:root[data-theme='dark'] .primary,
:root[data-theme='dark'] button[aria-pressed='true'] {
    color: var(--accent-text);
    background-color: var(--accent-surface);
    border-color: var(--gold);
}
:root[data-theme='dark'] option {
    background-color: var(--panel);
}
:root[data-grain='off'] {
    --graphite-grain: none;
}
.trade-sides {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(220px, 100%), 1fr));
    gap: 12px;
}
.trade-offer {
    padding: 12px;
    border: 1px solid var(--line);
    border-radius: 12px;
    overflow-wrap: anywhere;
}
.trade-session .economy-form {
    margin-block: 14px;
}
#tradeDialog {
    width: min(720px, calc(100% - 24px));
    max-height: calc(100dvh - 24px);
    overflow-y: auto;
}