/* T3V: the medieval look (docs/UI-STYLE.md, docs/design/mockups/medieval.css) with six colour themes.
   Every colour comes from the custom properties below. A theme is a set of values plus its frame and panel
   textures; no layout differs between themes. CSS and system serif fonts only: no images, no web fonts.
   test/themes.test.ts reads the theme blocks below (one per [data-theme]) and checks their contrast pairs. */

/* ============================================================== shared tokens (every theme) */
:root {
  /* gauges */
  --hp-hi: #e0644a; --hp: #b23a2a; --hp-lo: #6e1c12;
  --sp-hi: #74c4e4; --sp: #2f7fa6; --sp-lo: #174560;
  --song-hi: #f2d27a; --song: #c49a2c; --song-lo: #6e5214;
  --xp-hi: #f1d48a; --xp: #c9a046; --xp-lo: #7a5a1f;
  /* rarity rims, gems and pips: the same in every theme (text inks per panel material: --rar-* below) */
  --r-common: #b9ae95; --r-uncommon: #4f9a56; --r-rare: #4f7fd0; --r-veryrare: #9b6ddb; --r-legendary: #e8913a;
  /* states and badges (badges carry their own fill, so they read the same on any panel) */
  --ok: #6fc28a; --warn: #e3a04a; --danger: #d0503f;
  --harm-bg: #5a1712; --harm-fg: #fde9d8; --harm-rim: #c0443c;
  --help-bg: #1d4a44; --help-fg: #dff6ee; --help-rim: #5fb8a0;
  /* fixed text colours (checked against every theme's frame by test/themes.test.ts) */
  --flag-fg: #ffffff; --flag-bg: #a8291c; --danger-btn-fg: #fff3ee; --danger-btn-top: #8a2a1c; --danger-btn-bot: #5a170f;
  --dawn-fg: #ffc98a; --dusk-fg: #ffbca0; --night-fg: #d2ccff; --light-fg: #ffcf8a; --downed-fg: #ffb8a8; --stable-fg: #ffe08a;
  --back-tag-fg: #dcecf2; --back-tag-top: #2d4f63; --back-tag-bot: #183040; --acting-fg: #1a1208; --seal-fg: #f3c7a8; --seal-bg: #7d1f16;
  --font-display: "Palatino Linotype", "Book Antiqua", Palatino, Georgia, "Liberation Serif", "DejaVu Serif", serif;
  --font-body: Georgia, "Palatino Linotype", "Book Antiqua", Palatino, "Liberation Serif", "DejaVu Serif", serif;
  --fs-xs: 12px; --fs-s: 13.5px; --fs-m: 15px; --fs-l: 18px; --fs-xl: 24px; --fs-xxl: 44px;
  --s1: 4px; --s2: 8px; --s3: 12px; --s4: 16px; --s5: 24px; --s6: 32px;
  --tap: 34px;
}
@media (max-width: 700px) { :root { --tap: 44px; --fs-s: 14px; --fs-m: 16px; } }

/* ============================================================== the six themes */
/* Stone & Steel (default): grey stone blocks, slate panels, steel rims, banner-red tabs with gold, torch-orange glow. */
:root, [data-theme="stone"] {
  --bg: #0b0d11;
  --wood-950: #12151a; --wood-900: #1a1e25; --wood-800: #2b3038; --wood-700: #4a515c; --wood-600: #5d6672;
  --gold-800: #3a4048; --gold-700: #7d8793; --gold-500: #c9a046; --gold-300: #f0cf73;
  --parch-50: #4d5562; --parch-100: #3d4450; --parch-200: #343b46; --parch-300: #2b3039; --parch-edge: #2b3039; /* dark panel: its shading only darkens it further (more contrast for light text) */
  --ink: #e8ebf0; --ink-soft: #b8c0cb; --ink-red: #ffa08f;
  --on-wood: #eef1f4; --on-wood-soft: #c3cad4;
  --banner-600: #b2291f; --banner-700: #8c1f18; --banner-800: #67140f; --banner-900: #430c0a;
  --primary-fg: #ffe3a3;
  --btn-top: #5a626e; --btn-mid: #313741; --btn-bot: #262b33; --btn-fg: #eef1f4; --btn-rim: #8a929c;
  --tab-top: #9e1f1a; --tab-bot: #5e0f0c; --tab-fg: #ffe3a3; --tabon-top: #c42a22; --tabon-bot: #8a1712; --tabon-fg: #fff3c9; --tab-rim: #c9a046;
  --dis-bg: #262b33; --dis-fg: #9aa3ad; --dis-rim: #5d6672;
  --kbd-bg: #4b535e; --kbd-fg: #eef1f4;
  --focus: #ffd98a; --focus-parch: #ffd98a;
  --slot-hi: #2a3a52; --slot-lo: #0c1118; --slot-rim: #6d7681; --pocket-hi: #2c3340; --pocket-lo: #1b2029; --pocket-rim: #4b5562;
  --medal-rim: #8a929c; --ring: #8a929c; --frame-edge: #15181d; --parch-rim: #727b86; --track: #12171e;
  --rar-common: #c9bfa8; --rar-uncommon: #7fd08a; --rar-rare: #8fb8ff; --rar-veryrare: #c9a6ff; --rar-legendary: #ffb25e;
  --ok-ink: #8fdca0; --bad-ink: #ff9a88; --warn-ink: #ffc46b;
  --glyph: #c9a046; --title-glow: rgba(255, 170, 60, .45); --row-bg: rgba(255, 255, 255, .04); --row-sel: rgba(255, 217, 138, .14);
  --frame-tex:
    linear-gradient(90deg, rgba(0, 0, 0, .34) 0 2px, transparent 2px) 0 0 / 64px 32px,
    linear-gradient(0deg, rgba(0, 0, 0, .34) 0 2px, transparent 2px) 0 0 / 64px 32px,
    linear-gradient(180deg, rgba(255, 255, 255, .05), transparent 30%),
    linear-gradient(180deg, var(--wood-700), var(--wood-800));
  --parch-tex:
    linear-gradient(90deg, rgba(0, 0, 0, .18) 0 1px, transparent 1px) 0 0 / 48px 48px,
    linear-gradient(0deg, rgba(0, 0, 0, .18) 0 1px, transparent 1px) 0 0 / 48px 48px,
    linear-gradient(180deg, var(--parch-100), var(--parch-300));
  --parch-shadow: inset 0 0 18px rgba(0, 0, 0, .6);
  --body-tex: radial-gradient(ellipse at 50% 0%, rgba(80, 100, 130, .22), transparent 60%), radial-gradient(ellipse at 50% 100%, rgba(0, 0, 0, .6), transparent 70%);
}
/* Parchment & Wood: carved dark wood, gold trim, warm cream parchment, red cloth (the v0 direction; the kit as drawn). */
[data-theme="parchment"] {
  --bg: #0f0a07;
  --wood-950: #160e08; --wood-900: #21150c; --wood-800: #2e1d11; --wood-700: #4a2e1a; --wood-600: #6b4423;
  --gold-800: #4e3a14; --gold-700: #7a5a1f; --gold-500: #c9a046; --gold-300: #f1d48a;
  --parch-50: #f6ecd2; --parch-100: #ede1c2; --parch-200: #e2d2ab; --parch-300: #d0bc8e; --parch-edge: #cfbb94; /* the darkest rendered pixel 8 px inside a panel (measured), for the contrast test */
  --ink: #2a1d10; --ink-soft: #57401f; --ink-red: #7d1f16;
  --on-wood: #f3e6c4; --on-wood-soft: #cdbb93;
  --banner-600: #a3301f; --banner-700: #7f2117; --banner-800: #5d1a14; --banner-900: #3b0f0b;
  --primary-fg: #f1d48a;
  --btn-top: #7a4e2a; --btn-mid: #4a2c16; --btn-bot: #3a2312; --btn-fg: #f3e6c4; --btn-rim: #7a5a1f;
  --tab-top: #5d1a14; --tab-bot: #3b0f0b; --tab-fg: #e8d6b0; --tabon-top: #a53327; --tabon-bot: #7f2117; --tabon-fg: #f1d48a; --tab-rim: #7a5a1f;
  --dis-bg: #2a1b10; --dis-fg: #9c8b6c; --dis-rim: #5a4422;
  --kbd-bg: #4a2e1a; --kbd-fg: #f6ecd2;
  --focus: #ffe08a; --focus-parch: #7d1f16;
  --slot-hi: #3a2a1a; --slot-lo: #140d07; --slot-rim: #7a5a1f; --pocket-hi: #5a3c22; --pocket-lo: #3a2615; --pocket-rim: #7a5a33;
  --medal-rim: #7a5a1f; --ring: #c9a046; --frame-edge: #7a5a1f; --parch-rim: #7a5a1f; --track: #22160c;
  --rar-common: #524a3b; --rar-uncommon: #26562a; --rar-rare: #244a88; --rar-veryrare: #5b3697; --rar-legendary: #743c07;
  --ok-ink: #1d5635; --bad-ink: #8e1f12; --warn-ink: #6b4104;
  --glyph: #7a5a1f; --title-glow: rgba(241, 212, 138, .3); --row-bg: rgba(90, 55, 20, .07); --row-sel: rgba(255, 246, 220, .7);
  --frame-tex:
    repeating-linear-gradient(90deg, rgba(0, 0, 0, .16) 0 2px, transparent 2px 9px),
    repeating-linear-gradient(0deg, rgba(255, 255, 255, .025) 0 1px, transparent 1px 5px),
    linear-gradient(180deg, var(--wood-700), var(--wood-800));
  --parch-tex:
    radial-gradient(ellipse at 25% 15%, rgba(255, 255, 255, .35), transparent 60%),
    radial-gradient(ellipse at 85% 95%, rgba(120, 80, 30, .12), transparent 55%),
    linear-gradient(180deg, var(--parch-100), var(--parch-200));
  --parch-shadow: inset 0 0 14px rgba(90, 55, 20, .22); /* T3V look review item 4: lighter shading (option A) */
  --body-tex: radial-gradient(ellipse at 50% 0%, rgba(110, 60, 25, .25), transparent 60%), radial-gradient(ellipse at 50% 100%, rgba(0, 0, 0, .6), transparent 70%);
}
/* Forest: moss and pine greens, bark-striped frame, leaf-green tabs, warm gold, earthy brown pockets. */
[data-theme="forest"] {
  --bg: #0a0f0a;
  --wood-950: #0e140c; --wood-900: #151d12; --wood-800: #1f2a18; --wood-700: #3a4a2c; --wood-600: #4f6339;
  --gold-800: #3d4a24; --gold-700: #7d8f5a; --gold-500: #c9b052; --gold-300: #efe08a;
  --parch-50: #3c4c32; --parch-100: #2f3d27; --parch-200: #273320; --parch-300: #1e2819; --parch-edge: #1e2819;
  --ink: #e8efe2; --ink-soft: #b2c0a0; --ink-red: #e0b04a;
  --on-wood: #eef3e8; --on-wood-soft: #c2cdb2;
  --banner-600: #4a7420; --banner-700: #3a5e18; --banner-800: #2c4512; --banner-900: #1c2d0b;
  --primary-fg: #fff6d8;
  --btn-top: #56442a; --btn-mid: #3a2e1c; --btn-bot: #2f2416; --btn-fg: #f1ecc9; --btn-rim: #7d8f5a;
  --tab-top: #34482a; --tab-bot: #1f2c18; --tab-fg: #f1ecc9; --tabon-top: #4a7420; --tabon-bot: #2f4c14; --tabon-fg: #fff6d8; --tab-rim: #c9b052;
  --dis-bg: #1f2a18; --dis-fg: #9aa88a; --dis-rim: #4a5a33;
  --kbd-bg: #4a5a33; --kbd-fg: #f1ecc9;
  --focus: #ffe08a; --focus-parch: #ffe08a;
  --slot-hi: #2c3a22; --slot-lo: #0c120a; --slot-rim: #7d8f5a; --pocket-hi: #4a3a24; --pocket-lo: #2d2214; --pocket-rim: #5a4a33;
  --medal-rim: #7d8f5a; --ring: #7d8f5a; --frame-edge: #141c10; --parch-rim: #7d8f5a; --track: #101410;
  --rar-common: #c9bfa8; --rar-uncommon: #7fd08a; --rar-rare: #8fb8ff; --rar-veryrare: #c9a6ff; --rar-legendary: #ffb25e;
  --ok-ink: #8fdca0; --bad-ink: #ff9a88; --warn-ink: #ffc46b;
  --glyph: #c9b052; --title-glow: rgba(230, 215, 120, .45); --row-bg: rgba(255, 255, 255, .04); --row-sel: rgba(239, 224, 138, .14);
  --frame-tex: repeating-linear-gradient(90deg, rgba(0, 0, 0, .22) 0 3px, transparent 3px 11px), linear-gradient(180deg, var(--wood-700), var(--wood-800));
  --parch-tex: radial-gradient(ellipse at 30% 20%, rgba(160, 190, 120, .12), transparent 60%), linear-gradient(180deg, var(--parch-100), var(--parch-300));
  --parch-shadow: inset 0 0 18px rgba(0, 0, 0, .55);
  --body-tex: radial-gradient(ellipse at 50% 0%, rgba(80, 120, 60, .2), transparent 60%), radial-gradient(ellipse at 50% 100%, rgba(0, 0, 0, .6), transparent 70%);
}
/* Midnight: navy and indigo stone, silver trim, moonlit-blue tabs, pale silver highlights. */
[data-theme="midnight"] {
  --bg: #070a14;
  --wood-950: #0a0e1c; --wood-900: #0e1424; --wood-800: #10162a; --wood-700: #1f2a4a; --wood-600: #2d3b63;
  --gold-800: #2e3650; --gold-700: #55607a; --gold-500: #b9c3d6; --gold-300: #eef3ff;
  --parch-50: #26315a; --parch-100: #1c2542; --parch-200: #171f39; --parch-300: #121830; --parch-edge: #121830;
  --ink: #e6ecf7; --ink-soft: #a9b6d0; --ink-red: #9cc3ff;
  --on-wood: #e6ecf7; --on-wood-soft: #a9b6d0;
  --banner-600: #3b56a8; --banner-700: #2d4486; --banner-800: #1f2f66; --banner-900: #141f44;
  --primary-fg: #fff6d8;
  --btn-top: #34406a; --btn-mid: #232c52; --btn-bot: #1a2142; --btn-fg: #e8eeff; --btn-rim: #9aa8c8;
  --tab-top: #2d3f78; --tab-bot: #18244a; --tab-fg: #e8eeff; --tabon-top: #4c66b8; --tabon-bot: #2a3c7a; --tabon-fg: #fff6d8; --tab-rim: #b9c3d6;
  --dis-bg: #10162a; --dis-fg: #8f9bb6; --dis-rim: #3a4770;
  --kbd-bg: #3a4770; --kbd-fg: #eef3ff;
  --focus: #ffe08a; --focus-parch: #ffe08a;
  --slot-hi: #1e2b52; --slot-lo: #080c18; --slot-rim: #9aa8c8; --pocket-hi: #1c2440; --pocket-lo: #10152a; --pocket-rim: #3a4770;
  --medal-rim: #9aa8c8; --ring: #9aa8c8; --frame-edge: #0a0e1c; --parch-rim: #9aa8c8; --track: #0a0e18;
  --rar-common: #c9bfa8; --rar-uncommon: #7fd08a; --rar-rare: #8fb8ff; --rar-veryrare: #c9a6ff; --rar-legendary: #ffb25e;
  --ok-ink: #8fdca0; --bad-ink: #ff9a88; --warn-ink: #ffc46b;
  --glyph: #b9c3d6; --title-glow: rgba(170, 200, 255, .5); --row-bg: rgba(255, 255, 255, .04); --row-sel: rgba(170, 200, 255, .14);
  --frame-tex:
    linear-gradient(90deg, rgba(0, 0, 0, .3) 0 2px, transparent 2px) 0 0 / 64px 32px,
    linear-gradient(0deg, rgba(0, 0, 0, .3) 0 2px, transparent 2px) 0 0 / 64px 32px,
    linear-gradient(180deg, var(--wood-700), var(--wood-800));
  --parch-tex: radial-gradient(ellipse at 30% 20%, rgba(140, 170, 255, .12), transparent 60%), linear-gradient(180deg, var(--parch-100), var(--parch-300));
  --parch-shadow: inset 0 0 18px rgba(0, 0, 0, .55);
  --body-tex: radial-gradient(ellipse at 50% 0%, rgba(90, 120, 200, .22), transparent 60%), radial-gradient(ellipse at 50% 100%, rgba(0, 0, 0, .6), transparent 70%);
}
/* Crimson Keep: charcoal and wine red, black tabs with ember-orange lettering, copper trim. */
[data-theme="crimson"] {
  --bg: #0c0606;
  --wood-950: #120707; --wood-900: #180909; --wood-800: #1c0909; --wood-700: #3a1414; --wood-600: #5a2020;
  --gold-800: #4a2e14; --gold-700: #a8743a; --gold-500: #d4a24a; --gold-300: #ffd88a;
  --parch-50: #3e2424; --parch-100: #2e1a1a; --parch-200: #251414; --parch-300: #1d1010; --parch-edge: #1d1010;
  --ink: #f3e6e2; --ink-soft: #c7a69a; --ink-red: #ff8a5c;
  --on-wood: #f3e6e2; --on-wood-soft: #d0b0a6;
  --banner-600: #8a1f1a; --banner-700: #6a1612; --banner-800: #4a0e0c; --banner-900: #2e0807;
  --primary-fg: #ffd9a0;
  --btn-top: #4a201a; --btn-mid: #331512; --btn-bot: #260e0b; --btn-fg: #ffd9a0; --btn-rim: #a8743a;
  --tab-top: #2a2a2e; --tab-bot: #141418; --tab-fg: #ffd9a0; --tabon-top: #5a1a14; --tabon-bot: #2e0c0a; --tabon-fg: #fff6d8; --tab-rim: #d4a24a;
  --dis-bg: #1c0909; --dis-fg: #a8908a; --dis-rim: #5a2c1e;
  --kbd-bg: #5a2c1e; --kbd-fg: #ffe9cc;
  --focus: #ffe08a; --focus-parch: #ffe08a;
  --slot-hi: #3a1612; --slot-lo: #0c0505; --slot-rim: #a8743a; --pocket-hi: #2c2626; --pocket-lo: #181414; --pocket-rim: #5a2c1e;
  --medal-rim: #a8743a; --ring: #a8743a; --frame-edge: #120505; --parch-rim: #a8743a; --track: #120808;
  --rar-common: #c9bfa8; --rar-uncommon: #7fd08a; --rar-rare: #8fb8ff; --rar-veryrare: #c9a6ff; --rar-legendary: #ffb25e;
  --ok-ink: #8fdca0; --bad-ink: #ff9a88; --warn-ink: #ffc46b;
  --glyph: #d4a24a; --title-glow: rgba(255, 170, 90, .5); --row-bg: rgba(255, 255, 255, .04); --row-sel: rgba(255, 216, 138, .13);
  --frame-tex:
    linear-gradient(90deg, rgba(0, 0, 0, .3) 0 2px, transparent 2px) 0 0 / 64px 32px,
    linear-gradient(0deg, rgba(0, 0, 0, .3) 0 2px, transparent 2px) 0 0 / 64px 32px,
    linear-gradient(180deg, var(--wood-700), var(--wood-800));
  --parch-tex: radial-gradient(ellipse at 30% 20%, rgba(255, 140, 100, .1), transparent 60%), linear-gradient(180deg, var(--parch-100), var(--parch-300));
  --parch-shadow: inset 0 0 18px rgba(0, 0, 0, .55);
  --body-tex: radial-gradient(ellipse at 50% 0%, rgba(140, 40, 30, .22), transparent 60%), radial-gradient(ellipse at 50% 100%, rgba(0, 0, 0, .6), transparent 70%);
}
/* Emberforge: blackened iron with rivets, molten orange and gold glow, teal rune accents. */
[data-theme="ember"] {
  --bg: #0a0706;
  --wood-950: #0e0b0a; --wood-900: #141110; --wood-800: #141110; --wood-700: #2b2624; --wood-600: #3e3633;
  --gold-800: #5a3a26; --gold-700: #7a4a2a; --gold-500: #ff9a2e; --gold-300: #ffd36b;
  --parch-50: #3a3330; --parch-100: #2a2422; --parch-200: #211c1a; --parch-300: #181413; --parch-edge: #181413;
  --ink: #f2e6d8; --ink-soft: #c9ae98; --ink-red: #ff9a2e;
  --on-wood: #f2e6d8; --on-wood-soft: #c9ae98;
  --banner-600: #a63c0d; --banner-700: #8a300a; --banner-800: #6e1f07; --banner-900: #3e1204;
  --primary-fg: #ffe7c4;
  --btn-top: #3a302c; --btn-mid: #282220; --btn-bot: #1c1614; --btn-fg: #ffd9a6; --btn-rim: #ff7a1f;
  --tab-top: #3a2a22; --tab-bot: #1c1412; --tab-fg: #ffcf8a; --tabon-top: #ffb347; --tabon-bot: #e2701f; --tabon-fg: #1a0b04; --tab-rim: #ff7a1f;
  --dis-bg: #1c1614; --dis-fg: #a8968a; --dis-rim: #5a3a26;
  --kbd-bg: #5a3a26; --kbd-fg: #ffe7c4;
  --focus: #ffe08a; --focus-parch: #ffe08a;
  --slot-hi: #4a1c0c; --slot-lo: #0e0807; --slot-rim: #7a4a2a; --pocket-hi: #2b2523; --pocket-lo: #171312; --pocket-rim: #4a3a30;
  --medal-rim: #ff8a2a; --ring: #ff7a1f; --frame-edge: #0a0807; --parch-rim: #5a3a26; --track: #120c0a;
  --rar-common: #c9bfa8; --rar-uncommon: #7fd08a; --rar-rare: #8fb8ff; --rar-veryrare: #c9a6ff; --rar-legendary: #ffb25e;
  --ok-ink: #8fdca0; --bad-ink: #ff9a88; --warn-ink: #ffc46b;
  --glyph: #4fd4e6; --title-glow: rgba(255, 110, 20, .7); --row-bg: rgba(255, 140, 60, .05); --row-sel: rgba(255, 154, 46, .16);
  --frame-tex: radial-gradient(circle at 8px 8px, #5a5450 0 2px, transparent 3px) 0 0 / 40px 40px, linear-gradient(180deg, var(--wood-700), var(--wood-800));
  --parch-tex:
    radial-gradient(ellipse at 50% 110%, rgba(255, 100, 20, .22), transparent 55%),
    radial-gradient(circle at 10px 10px, #4a4440 0 1.5px, transparent 2.5px) 0 0 / 56px 56px,
    linear-gradient(180deg, var(--parch-100), var(--parch-300));
  --parch-shadow: inset 0 0 22px rgba(0, 0, 0, .7), inset 0 -6px 18px rgba(255, 90, 10, .18);
  --body-tex: radial-gradient(ellipse at 50% 30%, rgba(80, 40, 20, .5), transparent 70%);
}
[data-theme="ember"] .frame, [data-theme="ember"] #viewport { box-shadow: 0 0 0 2px #000, 0 0 0 4px var(--ring), 0 0 0 6px #000, 0 0 26px rgba(255, 110, 20, .4), 0 12px 32px rgba(0, 0, 0, .7); }
[data-theme="ember"] .btn, [data-theme="ember"] button { box-shadow: inset 0 1px 0 rgba(255, 200, 140, .2), 0 0 8px rgba(255, 110, 20, .25), 0 2px 0 #000; }
[data-theme="ember"] .orn, [data-theme="ember"] .display { text-shadow: 0 2px 0 #000, 0 0 10px rgba(255, 110, 20, .55); }

/* ============================================================== context aliases
   Older rules (and the builders in src/platform-web) use these names. On frames they mean text on wood; inside a
   reading panel (.parch, the overlay, the dialogs, the log) they are redefined to ink on parchment. */
:root {
  --void: rgba(0, 0, 0, .45); --night: var(--wood-900); --shadow: rgba(0, 0, 0, .25); --slate: var(--gold-800); --dusk: var(--gold-700);
  --mist: var(--on-wood-soft); --pale: var(--on-wood-soft); --bone: var(--on-wood); --white: var(--on-wood);
  --gold: var(--gold-300); --amber: var(--gold-300); --ember: var(--warn); --violet: #c9a6ff; --blood: var(--danger); --green: var(--ok);
  --serif: var(--font-display); --teal: var(--help-rim); --crystal: var(--sp-hi);
}
.parch, .panel, #overlay, #log-panel, .tip.parch-tip, .reminder {
  --void: var(--parch-50); --night: var(--parch-100); --shadow: var(--row-bg); --slate: var(--parch-rim); --dusk: var(--parch-rim);
  --mist: var(--ink-soft); --pale: var(--ink-soft); --bone: var(--ink); --white: var(--ink);
  --gold: var(--ink-red); --amber: var(--ink-red); --ember: var(--warn-ink); --violet: var(--rar-veryrare); --blood: var(--bad-ink); --green: var(--ok-ink);
  --teal: var(--ok-ink); --crystal: var(--rar-rare);
  color: var(--ink);
}

/* ============================================================== base */
* { box-sizing: border-box; }
html { background: var(--bg); }
body { margin: 0; background: var(--body-tex), var(--bg); background-attachment: fixed; color: var(--on-wood); font: var(--fs-m)/1.4 var(--font-body); min-height: 100vh; }
#app { max-width: 1296px; margin: 0 auto; padding: 12px 16px; }
img.portrait, .item-icon, .medal img { image-rendering: pixelated; image-rendering: crisp-edges; }
.num, #time-of-day, .member .info > span { font-variant-numeric: tabular-nums lining-nums; }
[hidden] { display: none !important; }

/* ============================================================== materials */
.frame, .panel, #title-screen .title-card {
  position: relative;
  border-radius: 6px;
  background: var(--frame-tex);
  border: 2px solid var(--frame-edge);
  box-shadow: 0 0 0 2px #000, 0 0 0 4px var(--ring), 0 0 0 6px #000, 0 12px 32px rgba(0, 0, 0, .65);
}
.frame::before { /* L-shaped corner brackets */
  content: ""; position: absolute; inset: -9px; pointer-events: none;
  --L: 30px; --t: 3px; --c: var(--gold-300);
  background:
    linear-gradient(var(--c), var(--c)) left top / var(--L) var(--t) no-repeat, linear-gradient(var(--c), var(--c)) left top / var(--t) var(--L) no-repeat,
    linear-gradient(var(--c), var(--c)) right top / var(--L) var(--t) no-repeat, linear-gradient(var(--c), var(--c)) right top / var(--t) var(--L) no-repeat,
    linear-gradient(var(--c), var(--c)) left bottom / var(--L) var(--t) no-repeat, linear-gradient(var(--c), var(--c)) left bottom / var(--t) var(--L) no-repeat,
    linear-gradient(var(--c), var(--c)) right bottom / var(--L) var(--t) no-repeat, linear-gradient(var(--c), var(--c)) right bottom / var(--t) var(--L) no-repeat;
}
.frame::after { /* studs */
  content: ""; position: absolute; inset: -2px; pointer-events: none;
  --stud: radial-gradient(circle, var(--gold-300) 0 2.5px, var(--gold-700) 3.5px 5px, transparent 6px);
  background: var(--stud) left top / 14px 14px no-repeat, var(--stud) right top / 14px 14px no-repeat, var(--stud) left bottom / 14px 14px no-repeat, var(--stud) right bottom / 14px 14px no-repeat;
}
.parch, .panel, #overlay, #log-panel {
  color: var(--ink);
  background: var(--parch-tex);
  border: 2px solid var(--parch-rim);
  border-radius: 3px;
  box-shadow: var(--parch-shadow), 0 0 0 2px #0a0806;
}
/* the dialogs and sheets: a parchment sheet with the frame's outer rings */
.panel { box-shadow: var(--parch-shadow), 0 0 0 2px #000, 0 0 0 4px var(--ring), 0 0 0 6px #000, 0 12px 32px rgba(0, 0, 0, .65); padding: 12px 14px; }
.plaque {
  position: relative; border-radius: 4px;
  background: linear-gradient(180deg, rgba(0, 0, 0, .35), rgba(0, 0, 0, .2)), var(--wood-900);
  border: 1px solid var(--gold-800);
  box-shadow: inset 0 2px 6px rgba(0, 0, 0, .7), 0 1px 0 rgba(255, 220, 160, .08);
}

/* ============================================================== type */
.display { font-family: var(--font-display); font-variant: small-caps; letter-spacing: .1em; color: var(--gold-300); text-shadow: 0 2px 0 #000, 0 0 12px var(--title-glow); margin: 0; }
.orn { display: flex; align-items: center; gap: 8px; margin: 0 0 var(--s2); font: bold var(--fs-m)/1.2 var(--font-display); font-variant: small-caps; letter-spacing: .1em; color: var(--gold-300); }
.orn::before { content: "\2726"; font-size: .7em; color: var(--glyph); }
.orn::after { flex: 1; content: ""; height: 1px; background: linear-gradient(90deg, var(--gold-700), transparent); }
.parch .orn, #log-panel .orn { color: var(--ink-red); }
.parch .orn::after, #log-panel .orn::after { background: linear-gradient(90deg, var(--parch-rim), transparent); }
.banner {
  position: relative; display: inline-block; margin: 0;
  padding: 5px 30px 7px;
  font: var(--fs-l)/1.2 var(--font-display); font-variant: small-caps; letter-spacing: .08em; color: var(--primary-fg);
  text-shadow: 0 1px 0 #000;
  background: repeating-linear-gradient(90deg, rgba(0, 0, 0, .08) 0 1px, transparent 1px 3px), linear-gradient(180deg, var(--banner-600), var(--banner-800));
  clip-path: polygon(0 0, 100% 0, calc(100% - 14px) 50%, 100% 100%, 0 100%, 14px 50%);
  box-shadow: inset 0 2px 0 rgba(255, 210, 160, .2);
}
.banner::before { content: ""; position: absolute; left: 0; right: 0; top: 3px; bottom: 3px; pointer-events: none; border-top: 1px solid var(--gold-500); border-bottom: 1px solid var(--gold-500); }
.hint { color: var(--on-wood-soft); font-size: var(--fs-xs); }
.parch .hint, .panel .hint, #overlay .hint { color: var(--ink-soft); }
.msg { min-height: 1.4em; color: var(--warn); }
.parch .msg, .panel .msg, #overlay .msg { color: var(--warn-ink); }
h3, h4 { font-family: var(--font-display); font-variant: small-caps; letter-spacing: .06em; }

/* ============================================================== buttons */
button, .btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  min-height: var(--tap); padding: 3px 12px;
  font: var(--fs-s)/1.15 var(--font-display); font-variant: small-caps; letter-spacing: .05em;
  color: var(--btn-fg);
  background: linear-gradient(180deg, var(--btn-top), var(--btn-mid) 60%, var(--btn-bot));
  border: 2px solid var(--btn-rim); border-radius: 3px;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .2), inset 0 -2px 0 rgba(0, 0, 0, .35), 0 2px 0 #000;
  cursor: pointer; text-align: center;
}
button:not(:disabled):hover { border-color: var(--gold-500); filter: brightness(1.12); }
button:not(:disabled):active { transform: translateY(1px); box-shadow: inset 0 2px 4px rgba(0, 0, 0, .6); }
button:focus-visible, select:focus-visible, input:focus-visible, [tabindex]:focus-visible, summary:focus-visible {
  outline: 3px solid var(--focus); outline-offset: 2px; box-shadow: 0 0 0 6px rgba(255, 224, 138, .25);
}
.parch :focus-visible, .panel :focus-visible, #overlay :focus-visible, #log-panel :focus-visible { outline-color: var(--focus-parch); }
button.primary, #btn-begin, #btn-review.primary {
  color: var(--primary-fg); border-color: var(--gold-500);
  background: linear-gradient(180deg, var(--banner-600), var(--banner-800));
}
/* selected / toggled: gilt rim and glow AND a ▸ mark, so it never relies on colour */
button[aria-pressed="true"], button.on, button.sel, button[aria-selected="true"] {
  border-color: var(--gold-300); color: var(--gold-300);
  box-shadow: inset 0 0 10px rgba(241, 212, 138, .35), 0 0 0 1px var(--gold-300), 0 2px 0 #000;
}
button[aria-pressed="true"]::before, button.on::before, button.sel::before, button[aria-selected="true"]::before { content: "\25B8"; color: var(--gold-300); }
.parch button[aria-pressed="true"], .parch button.on, .parch button.sel, .panel button.on, .panel button.sel, .panel button[aria-selected="true"], #overlay button.sel, #overlay button[aria-pressed="true"] { color: var(--btn-fg); }
/* disabled: flat, dim, dashed rim; the reason is in its title (and usually beside it) */
button:disabled, button[aria-disabled="true"] {
  cursor: not-allowed; color: var(--dis-fg); background: var(--dis-bg);
  border-style: dashed; border-color: var(--dis-rim); box-shadow: none; filter: none;
}
button.ghost { background: transparent; border-color: var(--gold-800); box-shadow: none; color: var(--on-wood); }
button.small, .menu.small button { min-height: 28px; padding: 2px 9px; font-size: var(--fs-xs); }
button.danger { border-color: var(--danger); color: var(--danger-btn-fg); background: linear-gradient(180deg, var(--danger-btn-top), var(--danger-btn-bot)); }
button.refused { border-style: dashed; }
kbd {
  display: inline-grid; place-items: center; min-width: 18px; height: 18px; padding: 0 4px;
  font: bold 11px/1 var(--font-body); color: var(--gold-300); font-variant: normal; letter-spacing: 0;
  background: rgba(0, 0, 0, .45); border: 1px solid var(--gold-700); border-radius: 3px; box-shadow: inset 0 1px 2px #000;
}
button:disabled kbd { color: var(--dis-fg); border-color: var(--dis-rim); }
@media (pointer: coarse) { button kbd { display: none; } }
select, input[type="text"], input:not([type]) {
  font: var(--fs-s) var(--font-body); color: var(--ink); background: var(--parch-50);
  border: 1px solid var(--parch-rim); border-radius: 3px; min-height: 28px; padding: 2px 4px;
}
input[type="range"] { accent-color: var(--gold-500); }
.menu { display: flex; gap: 8px; justify-content: center; flex-wrap: wrap; margin: 12px 0; }
.menu.small { justify-content: flex-start; gap: 5px; flex-wrap: nowrap; margin: 0; }
.menu.col { flex-direction: column; align-items: stretch; margin: 6px 0 0; gap: 6px; }
.row { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; }

/* ============================================================== tabs (red cloth pennants) */
.card-tabs button, .shop-tabs button, .sheet-tabs button, [role="tab"] {
  position: relative; color: var(--tab-fg);
  background: linear-gradient(180deg, var(--tab-top), var(--tab-bot));
  border: 2px solid var(--tab-rim); border-bottom: none; border-radius: 3px 3px 0 0;
  clip-path: polygon(0 0, 100% 0, 100% 80%, 50% 100%, 0 80%); padding-bottom: 9px;
  box-shadow: none;
}
.card-tabs button.on, .shop-tabs button.on, .sheet-tabs button.on, [role="tab"][aria-selected="true"] {
  color: var(--tabon-fg); background: linear-gradient(180deg, var(--tabon-top), var(--tabon-bot));
  border-color: var(--gold-500); transform: translateY(3px);
  text-decoration: underline; text-decoration-color: var(--gold-500); text-underline-offset: 4px; box-shadow: none;
}
.card-tabs button.on::before, .shop-tabs button.on::before, .sheet-tabs button.on::before, [role="tab"][aria-selected="true"]::before { color: inherit; }

/* ============================================================== badges (shape tells harmful from helpful) */
.badges { display: flex; flex-wrap: wrap; gap: 3px; }
.badge {
  position: relative; display: inline-flex; align-items: center; min-height: 18px; padding: 1px 6px 1px 9px;
  font: bold 11px/1 var(--font-body); letter-spacing: .02em; cursor: help;
  color: var(--harm-fg); background: var(--harm-bg); border: 1px solid var(--harm-rim);
  clip-path: polygon(6px 0, 100% 0, 100% 100%, 6px 100%, 0 50%);
}
.badge[data-kind="tonic"], .badge[data-kind="buff"], .badge[data-kind="coat"], .badge.help { color: var(--help-fg); background: var(--help-bg); border-color: var(--help-rim); clip-path: none; border-radius: 10px; padding: 1px 8px; }
/* T3X lasting conditions (stone, paralysis, Hollowed, rising, shattered) and Withered: harmful, with a double rim (they outlast a rest) */
.badge[data-kind^="cond-"], .badge[data-kind="withered"] { border: 2px double var(--harm-rim); font-variant: small-caps; letter-spacing: .04em; }
.badge.neutral { color: var(--on-wood); background: var(--wood-800); border-color: var(--gold-700); clip-path: none; border-radius: 3px; }
.badge:focus-visible { outline: 2px solid var(--focus); outline-offset: 1px; }
@media (max-width: 700px) { .badge { min-height: 22px; font-size: 12px; } }

/* ============================================================== rarity (colour + pips + word) */
small.rarity { font-size: 11px; margin-left: 4px; }
.r-common, small.r-common, span.rname.r-common { color: var(--rar-common) !important; }
.r-uncommon, small.r-uncommon, span.rname.r-uncommon { color: var(--rar-uncommon) !important; }
.r-rare, small.r-rare, span.rname.r-rare { color: var(--rar-rare) !important; }
.r-very-rare, small.r-very-rare, span.rname.r-very-rare { color: var(--rar-veryrare) !important; }
.r-legendary, small.r-legendary, span.rname.r-legendary { color: var(--rar-legendary) !important; }
span.rname.r-uncommon::before, span.rname.r-rare::before, span.rname.r-very-rare::before, span.rname.r-legendary::before { display: inline-block; margin-right: 4px; font-size: 9px; letter-spacing: 1px; vertical-align: 1px; }
span.rname.r-uncommon::before { content: "\25C6"; } span.rname.r-rare::before { content: "\25C6\25C6"; }
span.rname.r-very-rare::before { content: "\25C6\25C6\25C6"; } span.rname.r-legendary::before { content: "\25C6\25C6\25C6\25C6"; }

/* ============================================================== title screen */
#title-screen { text-align: center; }
.title-stage { min-height: calc(100vh - 24px); display: grid; place-items: center; padding: 16px 0; }
#title-screen .title-card { width: min(560px, 100%); padding: 28px 30px 20px; }
#title-name { font-size: var(--fs-xxl); line-height: 1.05; letter-spacing: .08em; }
#title-tagline { margin: 10px 0 4px; font-style: italic; color: var(--on-wood-soft); }
.rule { margin: 12px auto 16px; width: 70%; height: 10px; background: radial-gradient(circle, var(--gold-300) 0 2px, transparent 3px) center / 10px 10px no-repeat, linear-gradient(90deg, transparent, var(--gold-500) 30% 45%, transparent 45% 55%, var(--gold-500) 55% 70%, transparent) center / 100% 1px no-repeat; }
.title-menu { flex-direction: column; gap: 9px; margin: 0; }
.title-menu button { width: 100%; justify-content: flex-start; min-height: 46px; padding: 6px 16px; font-size: var(--fs-l); text-align: left; }
.title-menu button .what { margin-left: auto; font: italic var(--fs-xs) var(--font-body); font-variant: normal; letter-spacing: 0; color: var(--on-wood-soft); text-align: right; }
.title-menu button.primary .what { color: var(--primary-fg); opacity: .9; }
.title-menu button:disabled .what { color: var(--dis-fg); }
.small-row { display: flex; gap: 8px; justify-content: center; margin-top: 12px; flex-wrap: wrap; }
#title-screen .keys { margin-top: 12px; }
.save-help-box { margin-top: 8px; text-align: left; font-size: var(--fs-xs); color: var(--on-wood-soft); }
.save-help-box summary { cursor: pointer; text-align: center; font-family: var(--font-display); font-variant: small-caps; letter-spacing: .05em; }
#save-slot { min-height: 1.2em; }
#persist-status:empty, #save-age:empty, #save-slot-time:empty { display: none; }
.reminder { border: 1px solid var(--warn); border-radius: 4px; padding: 8px 10px; margin: 8px 0; font-size: var(--fs-s); }
#title-reminder { text-align: left; }

/* ============================================================== prologue: an open book */
#prologue-screen { display: grid; place-items: center; min-height: calc(100vh - 24px); }
.book { width: min(1100px, 100%); min-height: min(620px, calc(100vh - 40px)); display: grid; grid-template-columns: 0.8fr 1fr; padding: 14px; }
.book .page { position: relative; border-radius: 4px 0 0 4px; }
.book .page.left { display: grid; place-items: center; align-content: center; gap: 16px; padding: 32px; box-shadow: inset -24px 0 30px -18px rgba(0, 0, 0, .6), var(--parch-shadow), 0 0 0 2px #0a0806; }
.book .page.right { border-radius: 0 4px 4px 0; padding: 40px 46px 26px; display: flex; flex-direction: column; box-shadow: inset 24px 0 30px -18px rgba(0, 0, 0, .6), var(--parch-shadow), 0 0 0 2px #0a0806; }
.book .chap { text-align: center; font: var(--fs-m) var(--font-display); font-variant: small-caps; letter-spacing: .2em; color: var(--ink-soft); }
.book-crest { font-size: 64px; line-height: 1; color: var(--ink-red); text-shadow: 0 0 18px var(--title-glow); }
.book-name { margin: 0; text-align: center; font: bold var(--fs-xl) var(--font-display); font-variant: small-caps; letter-spacing: .08em; color: var(--ink-red); }
.book h2.title { text-align: center; margin: 0 0 18px; font: bold 28px var(--font-display); font-variant: small-caps; letter-spacing: .08em; color: var(--ink-red); }
.book .text { font-size: 21px; line-height: 1.6; flex: 1; }
.book .text p { margin: 0 0 16px; }
.book .text p:first-child::first-letter, #overlay[data-mode="scene"] > p:first-child::first-letter {
  float: left; font: bold 60px/0.85 var(--font-display); color: var(--ink-red); margin: 6px 8px 0 0; padding: 4px 6px;
  border: 2px solid var(--parch-rim); background: var(--row-bg);
}
.endmark { text-align: center; color: var(--glyph); letter-spacing: .3em; margin: 8px 0; }
.foot { margin-top: auto; display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.dots { display: flex; gap: 8px; align-items: center; }
.dots i { width: 10px; height: 10px; transform: rotate(45deg); border: 1px solid var(--parch-rim); display: inline-block; }
.dots i.on { background: var(--ink-red); border-color: var(--ink-red); }

/* ============================================================== settings */
#settings-screen { display: grid; place-items: center; min-height: calc(100vh - 24px); }
.settings-card { width: min(760px, 100%); padding: 22px 24px 18px; display: grid; gap: 14px; }
.settings-card > .banner { justify-self: center; }
.settings-sec { padding: 12px 14px; }
.settings-sec p { margin: 4px 0 8px; }
.theme-pick { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.theme-opt { display: grid; grid-template-columns: 1fr; gap: 4px; justify-items: stretch; min-height: 86px; padding: 8px; text-align: left; }
.theme-opt .sw { display: grid; grid-template-columns: 1.4fr 1fr 1fr; height: 30px; border: 1px solid #000; border-radius: 2px; overflow: hidden; }
.theme-opt .sw i { display: block; }
.theme-opt .nm { font-size: var(--fs-m); }
.theme-opt .ds { font: italic 11px var(--font-body); font-variant: normal; letter-spacing: 0; opacity: .9; }
#sound-row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
#sound-row input[type="range"] { width: 180px; }
#settings-screen .row { justify-content: center; }

/* ============================================================== the game screen */
/* Laptop: header · view 640x400 | right column (map + facts, the battle or story panel, the log) · party strip. */
#game-screen {
  display: grid; gap: 10px 12px; min-height: calc(100dvh - 24px); /* T3V look review item 5: use the window's height */
  grid-template-columns: 644px minmax(0, 1fr);
  grid-template-rows: auto 404px 1fr auto;
  grid-template-areas: "head head" "view right" "party party" "pad pad";
}
#hud-head { grid-area: head; display: flex; align-items: center; gap: 12px; min-width: 0; flex-wrap: wrap; }
#area-name { font-size: 17px; max-width: 46%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#time-of-day { font-style: italic; color: var(--on-wood-soft); font-size: var(--fs-s); }
#time-of-day[data-phase="dawn"] { color: var(--dawn-fg); } #time-of-day[data-phase="day"] { color: var(--on-wood); }
#time-of-day[data-phase="dusk"] { color: var(--dusk-fg); } #time-of-day[data-phase="night"] { color: var(--night-fg); }
#gold-row { display: flex; align-items: center; gap: 10px; white-space: nowrap; margin-left: auto; }
#gold-row > * { white-space: nowrap; }
.purse, #gold { display: inline-flex; align-items: center; gap: 4px; font-weight: bold; color: var(--gold-300); font-variant-numeric: tabular-nums; font-size: var(--fs-s); }
#gold::before { content: ""; width: 13px; height: 13px; border-radius: 50%; background: radial-gradient(circle at 35% 35%, #fff2b8, #c9a046 45%, #7a5a1f); border: 1px solid #3a2a0c; }
#difficulty { font-variant: small-caps; letter-spacing: .05em; font-size: var(--fs-xs); padding: 1px 9px; border: 1px solid var(--gold-700); border-radius: 12px; color: var(--on-wood-soft); }
#difficulty[data-d="easy"] { border-color: var(--ok); } #difficulty[data-d="hard"] { border-color: var(--danger); border-style: double; border-width: 3px; }
#danger-row { display: flex; align-items: center; gap: 5px; font: var(--fs-xs) var(--font-body); color: var(--on-wood-soft); }
#gauge { position: relative; width: 56px; height: 10px; background: var(--track); border: 1px solid #000; border-radius: 6px; overflow: hidden; flex: none; box-shadow: inset 0 1px 3px #000, 0 0 0 1px var(--gold-800); }
#gauge::after { content: ""; position: absolute; inset: 0; background: repeating-linear-gradient(90deg, transparent 0 calc(25% - 1px), rgba(0, 0, 0, .55) calc(25% - 1px) 25%); }
#gauge > i { display: block; height: 100%; width: 0; background: linear-gradient(180deg, #9fe07a, #4f9a36); transition: width .2s; }
#gauge[data-band="rising"] > i { background: linear-gradient(180deg, #ffe08a, #c99a2c); }
#gauge[data-band="high"] > i { background: repeating-linear-gradient(135deg, rgba(0, 0, 0, .28) 0 3px, transparent 3px 6px), linear-gradient(180deg, #ff7a52, #c0331f); }
#gauge.flash { animation: gaugeflash .5s ease-in-out 6; }
@keyframes gaugeflash { 50% { box-shadow: 0 0 8px 2px rgba(224, 90, 60, .9); border-color: #e05a3c; } }
#save-menu { flex: none; }

#viewport { grid-area: view; position: relative; width: 644px; height: 404px; border: 2px solid var(--gold-700); background: #000; box-shadow: 0 0 0 2px #000, 0 0 0 4px var(--ring), 0 0 0 6px #000, 0 10px 28px rgba(0, 0, 0, .6); }
#view { display: block; width: 640px; height: 400px; image-rendering: pixelated; image-rendering: crisp-edges; cursor: default; }
#game-screen[data-battle="1"] #view { cursor: crosshair; }
#stage-slot { grid-row: 2; grid-column: 1 / -1; position: relative; pointer-events: none; z-index: 4; min-width: 0; }
#stage-slot:empty { display: none; }
#stage-slot > * { pointer-events: auto; }
#rightcol { grid-area: right; display: flex; flex-direction: column; gap: 10px; min-height: 0; min-width: 0; height: 404px; }
#battle-slot:empty { display: none; }
#battle-slot { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; }
#battle-slot > #overlay { min-height: 0; }
/* in a fight the turn panel takes what it needs; the log keeps at least a few lines below it */
#rightcol[data-mode="battle"] #battle-slot { flex: 0 1 auto; }
#rightcol[data-mode="battle"] #log-panel { flex: 1 1 64px; min-height: 64px; }

/* the side panel: map + facts (light, kept items, flask, card, sneak), save age and the message line */
#side { flex: none; display: flex; flex-direction: column; gap: 6px; min-width: 0; }
#side-top { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 10px; align-items: start; }
#minimap-box { padding: 6px; line-height: 0; }
#minimap { display: block; width: auto; height: auto; max-width: 160px; max-height: 160px; image-rendering: pixelated; image-rendering: crisp-edges; }
#facts { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
#inv-row { display: flex; align-items: center; flex-wrap: wrap; gap: 5px; }
#inventory { flex: 1 1 100%; font-size: var(--fs-xs); line-height: 1.3; color: var(--on-wood-soft); max-height: 4em; overflow-y: auto; }
#skill-row { display: flex; align-items: center; gap: 5px; flex-wrap: wrap; font-size: var(--fs-xs); }
#skill-row #light-status { flex: 1 1 100%; color: var(--light-fg); font-style: italic; }
#skill-row #light-status:empty { display: none; }
#skill-row #light-status[data-dark="1"] { color: var(--on-wood-soft); }
#inv-row button, #skill-row button { min-height: 28px; padding: 2px 8px; font-size: var(--fs-xs); }
#btn-finds { color: var(--primary-fg); background: linear-gradient(180deg, var(--banner-600), var(--banner-800)); border-color: var(--gold-500); }
#threat-note { margin: 0; padding: 3px 8px; font: bold var(--fs-xs) var(--font-body); color: var(--harm-fg); background: var(--harm-bg); border: 1px solid var(--harm-rim); clip-path: polygon(6px 0, 100% 0, 100% 100%, 6px 100%, 0 50%); padding-left: 12px; }
/* T3V look review item 5: the save age and the message line live in the Log panel (framed), not loose on the wood */
#save-age { margin-left: auto; font: italic var(--fs-xs) var(--font-body); font-variant: normal; letter-spacing: 0; order: 3; }
#log-panel .orn::after { order: 2; }
/* N6: the message line has a fixed height, so a long message never moves the log; it scrolls inside. */
#sys-msg { margin: 0 0 4px; flex: none; height: 2.7em; overflow-y: auto; font-size: var(--fs-xs); line-height: 1.3; color: var(--warn-ink); border-bottom: 1px dotted var(--parch-rim); }
#sys-msg:empty { visibility: hidden; }
#log-panel { flex: 1 1 0; min-height: 60px; display: flex; flex-direction: column; padding: 8px 12px 6px; }
#log-panel .orn { margin-bottom: 4px; font-size: var(--fs-s); }
#log { flex: 1; min-height: 0; overflow-y: auto; font-size: var(--fs-s); line-height: 1.4; color: var(--ink-soft); scrollbar-width: thin; }
#log div { margin: 0 0 2px; padding-left: 13px; text-indent: -13px; }
#log div::before { content: "\2726  "; color: var(--glyph); font-size: 9px; }
#log div:last-child { color: var(--ink); font-weight: bold; }
#log div.levelup { color: var(--ink-red); font-weight: bold; }
#log div.crit { color: var(--warn-ink); }
#log .threat { color: var(--bad-ink); }

/* exploring: the map and facts; in a fight, a story scene or indoors they step aside */
#side[data-mode="battle"] #side-top, #side[data-mode="scene"] #side-top { display: none; }
#rightcol[data-mode="scene"] #side, #rightcol[data-mode="scene"] #log-panel { display: none; }
#side[data-mode="battle"] #danger-row, #side[data-mode="battle"] #threat-note { display: none; }
#game-screen[data-battle="1"] #danger-row, #game-screen[data-battle="1"] #btn-mute { display: none; }

/* ============================================================== the overlay (rest, scene, battle, interior, defeat) */
#overlay { position: absolute; inset: auto 10px 10px 10px; padding: 10px 14px; z-index: 2; }
#overlay p { margin: 0 0 8px; white-space: pre-line; font-size: var(--fs-m); }
#overlay .row { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; }
#overlay h3 { margin: 0 0 6px; color: var(--ink-red); font-size: var(--fs-l); }
#overlay p.story { font-style: italic; color: var(--ink-soft); }
#overlay .choices { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; margin: 6px 0 8px; }
#overlay .choices button { text-align: left; justify-content: flex-start; }
#overlay .choices.row { flex-direction: row; }
#overlay small { color: var(--ink-soft); }
#overlay .confirm { border: 1px solid var(--warn-ink); padding: 8px 10px; margin: 6px 0; background: var(--row-bg); }
#overlay[data-mode="rest"] { border-color: var(--gold-500); }
#rest-ready.flash { color: var(--warn-ink); font-weight: bold; }
/* the battle panel in the right column (laptop): the turn, the actions, the targets, the foes */
#battle-slot > #overlay, #stage-slot > #overlay { position: relative; inset: auto; }
#battle-slot > #overlay[data-mode="battle"] { max-height: 100%; overflow-y: auto; }
#overlay[data-mode="battle"] p { margin: 6px 0 0; font-size: var(--fs-s); }
#overlay[data-mode="battle"] .row + small { display: block; margin-top: 4px; }
#overlay[data-mode="battle"] .row > b:first-child { color: var(--ink-red); font-family: var(--font-display); font-variant: small-caps; letter-spacing: .05em; }
#overlay[data-mode="battle"] .acts-row { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 5px; width: 100%; }
#overlay[data-mode="battle"] .acts-row button { padding: 2px 4px; justify-content: flex-start; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
#overlay[data-mode="battle"] .acts-row #btn-study { grid-column: span 2; }
#battle-slot #overlay[data-mode="battle"] .row:has(> button[data-target], > button[data-quick], > button[data-spell], > button[data-item], > button[data-verse]) { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 5px; }
#battle-slot #overlay[data-mode="battle"] .row > .who { grid-column: 1 / -1; }
#overlay[data-mode="battle"] .row > .who > b { color: var(--ink-red); font-family: var(--font-display); font-variant: small-caps; letter-spacing: .05em; }
#side[data-mode="battle"], #side[data-mode="scene"] { display: none; }
#battle-slot #overlay[data-mode="battle"] .row > button[data-target], #battle-slot #overlay[data-mode="battle"] .row > button[data-quick], #battle-slot #overlay[data-mode="battle"] .row > button[data-spell], #battle-slot #overlay[data-mode="battle"] .row > button[data-item], #battle-slot #overlay[data-mode="battle"] .row > button[data-verse] { justify-content: flex-start; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; padding: 2px 6px; }
#overlay #battle-foes { padding-top: 6px; border-top: 1px solid var(--parch-rim); }
#overlay #battle-foes .row-front b { color: var(--ink-red); }
#overlay #battle-foes .row-back b { color: var(--rar-rare); }
#overlay button.hinted { border-color: var(--ok); box-shadow: 0 0 6px rgba(111, 194, 138, .7); }
#overlay .heal-hint { display: block; color: var(--ok-ink); margin: 2px 0; }
#overlay .downed-line { color: var(--bad-ink); }
#btn-quick.urgent { border-color: var(--danger); box-shadow: 0 0 6px rgba(208, 80, 63, .7); }
#btn-quick.sel { border-color: var(--gold-300); }
#battle-queued { display: block; margin-top: 4px; color: var(--ink-soft); }
/* a story scene in the right column: the facing page of an open book (the view is the picture on the left) */
#battle-slot > #overlay[data-mode="scene"] { flex: 1; padding: 22px 24px 14px; display: flex; flex-direction: column; box-shadow: inset 24px 0 30px -18px rgba(0, 0, 0, .55), var(--parch-shadow), 0 0 0 2px #0a0806; }
#battle-slot > #overlay[data-mode="scene"] > p:first-child { font-size: 18px; line-height: 1.55; flex: 1; overflow-y: auto; }
#battle-slot > #overlay[data-mode="scene"] .row { justify-content: space-between; }
#battle-slot:has(> #overlay[data-mode="scene"]) { flex: 1; }
/* indoors (laptop): one framed panel over the view and the right column */
/* T3V look review item 1: an interior (shop, guild, inn, Chapter) is the full sheet under the top bar */
#stage-slot > #overlay[data-mode="interior"] { position: fixed; top: 58px; bottom: 12px; left: max(12px, calc(50% - 620px)); right: max(12px, calc(50% - 620px)); z-index: 6; overflow-y: auto; padding: 14px 18px; box-shadow: var(--parch-shadow), 0 0 0 2px #000, 0 0 0 4px var(--ring), 0 0 0 6px #000, 0 0 0 2000px rgba(5, 4, 3, .45); }
#viewport > #overlay[data-mode="interior"] { inset: 10px; overflow-y: auto; }
#stage-slot #overlay[data-mode="interior"] .choices:not(.shop-actions) { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); align-items: stretch; }
#stage-slot #overlay[data-mode="interior"] .choices:not(.shop-actions) > small { grid-column: 1 / -1; }
#overlay .roster { margin: 6px 0; font-size: var(--fs-s); }
#overlay .roster h4 { margin: 0 0 4px; color: var(--ink-red); }
#overlay .roster-row { display: flex; gap: 6px; align-items: center; padding: 1px 0; }
#overlay .roster-row b { color: var(--ink); }
#overlay .lock-why { color: var(--warn-ink); }

/* the shop: fixed regions (header, filters, the two lists, the description) that fit without scrolling */
#overlay[data-mode="interior"]:has(> .shop) { overflow: hidden; display: flex; }
.shop { display: flex; flex-direction: column; flex: 1; min-height: 0; min-width: 0; }
.shop-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin: 0 0 6px; flex-wrap: wrap; }
#overlay .shop-head h3 { margin: 0; min-width: 0; }
#overlay .shop-head .choices.shop-actions { margin: 0; align-items: center; flex: none; flex-direction: row; gap: 6px; }
.shop-tabs { display: flex; flex-wrap: wrap; gap: 4px; margin: 0 0 6px; align-items: flex-end; }
.shop-tabs button { min-height: 30px; padding: 3px 10px 9px; }
.shop-who { margin-left: auto; font-size: var(--fs-xs); white-space: nowrap; align-self: center; }
.shop-cols { display: grid; grid-template-columns: 1.25fr 1fr; gap: 10px; }
.shop-cols h4 { margin: 0 0 4px; color: var(--ink-red); font-size: var(--fs-s); }
.shop .shop-cols { flex: 1; min-height: 0; }
.shop .shop-cols > div { display: flex; flex-direction: column; min-height: 0; }
.shop .shop-list { max-height: none; flex: 1; min-height: 0; }
#overlay .shop p.detail { flex: none; height: calc(5 * 1.3 * 12.5px + 10px); min-height: 0; max-height: none; overflow: hidden; margin: 6px 0 0; padding: 4px 8px; font: 12.5px/1.3 var(--font-body); white-space: pre-line; }
@media (min-width: 701px) {
  /* laptop: the description sits in its own column beside the lists, so the lists get the full height */
  .shop { display: grid; grid-template-columns: minmax(0, 1fr) 240px; grid-template-rows: auto auto minmax(0, 1fr); column-gap: 12px; }
  .shop > .shop-head, .shop > .shop-tabs { grid-column: 1 / -1; }
  .shop > .shop-cols { grid-column: 1; grid-row: 3; }
  #overlay .shop > p.detail { grid-column: 2; grid-row: 3; height: auto; margin: 0; overflow: hidden; }
}

/* lists: shop, finds, the card's slots and pack, the roster */
.shop-list, .sheet-slots, .sheet-pack-list, .sheet-keys, .roster-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 3px; }
.shop-list { overflow-y: auto; scrollbar-width: thin; }
.shop-list li, .sheet-slots li, .sheet-pack-list li { display: flex; align-items: center; gap: 8px; background: var(--row-bg); border: 1px solid transparent; border-bottom-color: var(--parch-rim); padding: 2px 6px; font-size: var(--fs-s); line-height: 1.2; min-height: 32px; flex-shrink: 0; }
.shop-list li:hover, .sheet-slots li:hover, .sheet-pack-list li:hover, .shop-list li:focus-within, .sheet-pack-list li:focus-within { background: var(--row-sel); box-shadow: inset 4px 0 0 var(--ink-red); }
.shop-list li > span:nth-child(2), .sheet-slots li > span:nth-child(2), .sheet-pack-list li > span:nth-child(2) { flex: 1; min-width: 0; }
.shop-list li > span:nth-child(3) { color: var(--ink); font-weight: bold; font-variant-numeric: tabular-nums; min-width: 3em; text-align: right; }
.shop-list li small, .sheet-slots li small, .sheet-pack-list li small { color: var(--ink-soft); font-size: 11.5px; }
.shop-list li .item-icon, .sheet-slots li .item-icon, .sheet-pack-list li .item-icon { width: 24px; height: 24px; padding: 2px; box-sizing: content-box; background: radial-gradient(circle at 50% 40%, var(--slot-hi), var(--slot-lo) 75%); border: 1px solid var(--slot-rim); border-radius: 3px; }
.shop-list button, .sheet-slots button, .sheet-pack-list button { min-height: 26px; padding: 1px 8px; font-size: var(--fs-xs); }
.sheet-slots .slot-empty { width: 28px; height: 28px; border: 1px dashed var(--parch-rim); border-radius: 3px; flex: none; background: radial-gradient(circle at 50% 40%, var(--slot-hi), var(--slot-lo) 75%); opacity: .7; }
.sheet-slots li i { color: var(--ink-soft); }
.sheet-pack-list li.unfit > span:nth-child(2) { color: var(--ink-soft); }
.item-icon { flex: none; vertical-align: middle; }

/* ============================================================== the party strip */
#party { grid-area: party; display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 12px; min-width: 0; padding: 4px 2px 2px; align-content: start; }
.member {
  position: relative; display: grid; grid-template-columns: 48px minmax(0, 1fr); gap: 4px 8px; align-items: start;
  padding: 7px 8px 6px; min-width: 0; cursor: default;
  border-radius: 6px; background: var(--frame-tex); border: 2px solid var(--frame-edge);
  box-shadow: 0 0 0 2px #000, 0 0 0 3px var(--gold-700), 0 6px 18px rgba(0, 0, 0, .55);
}
.member .portrait { width: 48px; height: 48px; border-radius: 50%; border: 3px solid var(--medal-rim); background: radial-gradient(circle at 50% 35%, var(--slot-hi), var(--slot-lo) 75%); box-shadow: 0 0 0 2px #000; flex: none; }
.member .info { min-width: 0; display: flex; flex-wrap: wrap; align-items: baseline; column-gap: 4px; line-height: 1.2; font-size: var(--fs-xs); }
.member .info > b { flex: 1 1 auto; min-width: 0; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font: bold var(--fs-m) var(--font-display); font-variant: small-caps; letter-spacing: .04em; color: var(--gold-300); order: 1; }
.member .info > .row-tag { order: 0; }
.member .info > small.desc { order: 3; flex: 1 1 100%; color: var(--on-wood-soft); font-style: italic; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.member .info > span { order: 4; float: none !important; margin-left: auto; color: var(--on-wood); font-weight: bold; }
.member .info > .flag { order: 4; }
.member .info > .bar { order: 5; flex: 1 1 100%; }
.member .info > small.stats { order: 6; flex: 1 1 100%; color: var(--on-wood-soft); }
.member .info > small { order: 4; color: var(--on-wood-soft); }
.member .info > small.downed, .member .info > small.pick-hint { order: 4; }
.member .info > .badges { order: 7; flex: 1 1 100%; margin-top: 2px; }
.member { --pw: 48px; }
.member .info > .reorder-box { position: absolute; top: calc(var(--pw) + 11px); left: 8px; width: var(--pw); display: inline-flex; justify-content: space-between; } /* under the portrait */
.member:has(.reorder-box) { min-height: calc(var(--pw) + 38px); }
.member button.reorder { min-height: 20px; min-width: 20px; padding: 0 3px; font-size: 9px; line-height: 1; }
.member .row-tag { font: bold 9.5px/1.3 var(--font-display); font-variant: small-caps; letter-spacing: .05em; padding: 0 5px; margin-right: 2px; clip-path: polygon(0 0, 100% 0, calc(100% - 4px) 50%, 100% 100%, 0 100%); }
.member .row-tag.front { color: var(--primary-fg); background: linear-gradient(180deg, var(--banner-600), var(--banner-800)); }
.member .row-tag.back { color: var(--back-tag-fg); background: linear-gradient(180deg, var(--back-tag-top), var(--back-tag-bot)); }
.member.back-start { }
.member.active { box-shadow: 0 0 0 2px #000, 0 0 0 3px var(--gold-300), 0 0 18px rgba(241, 212, 138, .55); }
.member.active::after { content: "Acting"; position: absolute; top: -9px; right: 8px; font: 10px var(--font-display); font-variant: small-caps; letter-spacing: .06em; padding: 0 7px; color: var(--acting-fg); background: var(--focus); border: 1px solid #000; }
.member.active .portrait { border-color: var(--gold-300); box-shadow: 0 0 0 2px #000, 0 0 12px rgba(241, 212, 138, .6); }
.member.down .portrait { filter: grayscale(1) brightness(.55); }
.member.down { opacity: .85; }
.member.down .info > b { text-decoration: line-through; text-decoration-color: var(--danger); }
.member.downed { border-color: var(--danger); }
.member small.downed { color: var(--downed-fg); font-weight: bold; }
.member small.downed.stable { color: var(--stable-fg); }
.member .info > small.pick-hint { color: var(--gold-300); }
/* HP gauge: engraved track with quarter ticks; low HP (a third or less) adds stripes and the word "low" */
.member .bar { position: relative; height: 10px; margin: 3px 0 1px; background: var(--track); border: 1px solid #000; border-radius: 6px; overflow: hidden; box-shadow: inset 0 1px 3px #000, 0 0 0 1px var(--gold-800); }
.member .bar::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: repeating-linear-gradient(90deg, transparent 0 calc(25% - 1px), rgba(0, 0, 0, .55) calc(25% - 1px) 25%); }
.member .bar > i { display: block; height: 100%; background: linear-gradient(180deg, var(--hp-hi), var(--hp) 55%, var(--hp-lo)); }
.member .bar > i.low { background: repeating-linear-gradient(135deg, rgba(0, 0, 0, .28) 0 3px, transparent 3px 6px), linear-gradient(180deg, #ff7a52, #c0331f 55%, #6e1c12); }
.member .flag { font: bold 9.5px/1.3 var(--font-body); color: var(--flag-fg); background: var(--flag-bg); padding: 0 4px; border-radius: 2px; font-variant: small-caps; }
#party.compact .member .info > small.desc, #party.compact .member .info > small.stats, #party.compact .member .info > small.pick-hint { display: none; }
#party .member .badge { position: relative; }
#badge-tip { position: fixed; z-index: 16; width: 250px; max-width: calc(100vw - 16px); pointer-events: none; padding: 7px 10px; font: var(--fs-xs)/1.35 var(--font-body); color: var(--on-wood); background: var(--wood-950); border: 1px solid var(--gold-500); border-radius: 4px; box-shadow: 0 0 0 1px #000, 0 6px 16px rgba(0, 0, 0, .7); }
/* laptop (1280x800): the party in two rows of three under the view; the right column runs down beside it */
@media (min-width: 1101px) {
  #game-screen { grid-template-areas: "head head" "view right" "party right" "pad pad"; }
  #rightcol { grid-row: 2 / 4; height: auto; contain: size; }
  #party { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 1100px) { /* small laptop: slim cards (name, HP, badges); the details are in the card's tooltip and the character card */
  #party .member .info > small.desc, #party .member .info > small.stats { display: none; }
  #party { gap: 10px; }
  .member { grid-template-columns: 40px minmax(0, 1fr); padding: 5px 6px; }
  .member .portrait { width: 40px; height: 40px; }
  .member { --pw: 40px; }
  .member .info > b { font-size: var(--fs-s); }
}

/* the phone pad: hidden on laptops (the keys do the same) */
#pad { grid-area: pad; display: none; }

/* ============================================================== dialogs and modals */
#creator-modal, #sheet-modal, #roster-modal, #confirm-modal { position: fixed; inset: 0; background: rgba(8, 5, 3, .72); display: flex; align-items: flex-start; justify-content: center; padding: 18px; overflow-y: auto; z-index: 10; }
#confirm-modal { z-index: 12; align-items: center; }
#creator-modal-box { width: 780px; max-width: 100%; }
#sheet-box { width: 980px; max-width: 100%; }
#roster-box { width: 880px; max-width: 100%; }
#confirm-box { position: relative; width: 560px; max-width: 100%; padding: 28px 24px 18px; }
.seal { position: absolute; top: -18px; left: 50%; transform: translateX(-50%); width: 38px; height: 38px; border-radius: 50%; background: radial-gradient(circle at 40% 35%, #c9473a, #7d1f16 60%, #4a0f0a); box-shadow: 0 2px 4px rgba(0, 0, 0, .6), inset 0 0 0 4px rgba(0, 0, 0, .15); display: grid; place-items: center; color: var(--seal-fg); font: bold 16px var(--font-display); }
#confirm-box h3, #roster-box h3, #storage-alert-box h3, #finds h3, #sheet h3, #creator-modal-box h3, #create-party h3, #review h3 { margin: 4px 0 8px; font-size: var(--fs-l); color: var(--ink-red); }
#confirm-box h3 { text-align: center; }
#confirm-box p { margin: 6px 0; }
#confirm-box p.warn { color: var(--warn-ink); border-top: 1px solid var(--parch-rim); border-bottom: 1px solid var(--parch-rim); padding: 6px 0; }
#confirm-box .row { justify-content: center; margin-top: 12px; }
#roster-box h4 { color: var(--ink-red); margin: 10px 0 4px; }
.roster-list li { display: flex; gap: 8px; align-items: center; border-bottom: 1px solid var(--parch-rim); background: var(--row-bg); padding: 4px 6px; }
.roster-list li .who { flex: 1; min-width: 0; }
.roster-list li .who b { color: var(--ink); }
.roster-list li .where { color: var(--ink-soft); font-size: var(--fs-xs); }
.roster-list li .where.out { color: var(--warn-ink); }
.roster-list li .acts { display: flex; gap: 4px; flex-wrap: wrap; justify-content: flex-end; }
.roster-list li button { min-height: 26px; padding: 1px 8px; font-size: var(--fs-xs); }
.roster-list li.down .who b { text-decoration: line-through; }
.roster-list .portrait, #overlay .portrait.mini { border-radius: 50%; border: 2px solid var(--medal-rim); flex: none; }
#roster-box .msg, #review-msg { min-height: 1.2em; }
#storage-alert { position: fixed; top: 8px; left: 8px; width: 560px; max-width: calc(100vw - 16px); z-index: 14; }
#storage-alert-box { border-color: var(--warn); }
#game-reminder { position: absolute; top: 8px; left: 8px; max-width: 440px; margin: 0; z-index: 3; font-size: var(--fs-xs); padding: 5px 8px; background: var(--parch-tex); }
/* the finds panel: not modal, it floats over the view */
#finds-modal { position: fixed; left: 18px; top: 60px; z-index: 9; pointer-events: none; width: min(620px, calc(100vw - 36px)); max-height: calc(100vh - 72px); overflow-y: auto; } /* over the view, below the top bar */
#finds-box { pointer-events: auto; }
#finds p { font-size: var(--fs-s); margin: 4px 0 8px; }
#finds p.warn { color: var(--warn-ink); }
#finds .shop-list li { display: grid; grid-template-columns: auto minmax(0, 1fr) auto auto auto; gap: 6px; }
#finds .shop-list li > span:nth-child(2) { min-width: 0; }
#finds > div:last-child { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 8px; }

/* ============================================================== the character card */
#sheet .sheet-msg { margin: 4px 0 6px; padding: 4px 8px; border-left: 3px solid var(--ink-red); background: var(--row-bg); }
.sheet-tabs { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 6px; }
.sheet-tabs button { clip-path: none; border-radius: 22px; border-bottom: 2px solid var(--tab-rim); padding: 3px 12px 3px 3px; min-height: 40px; background: linear-gradient(180deg, var(--btn-top), var(--btn-bot)); color: var(--btn-fg); }
.sheet-tabs button.on { transform: none; text-decoration: none; background: linear-gradient(180deg, var(--btn-top), var(--btn-bot)); color: var(--gold-300); border-color: var(--gold-300); box-shadow: 0 0 10px rgba(241, 212, 138, .5); }
.sheet-tabs .portrait, .sheet-who .portrait { border-radius: 50%; border: 2px solid var(--medal-rim); background: radial-gradient(circle at 50% 35%, var(--slot-hi), var(--slot-lo) 75%); }
.card-tabs { display: flex; flex-wrap: wrap; gap: 5px; margin: 0 0 10px; border-bottom: 2px solid var(--parch-rim); padding: 0 0 0 4px; align-items: flex-end; }
.card-tabs button { min-height: 34px; padding: 4px 12px 10px; }
.sheet-body { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); gap: 14px; align-items: start; }
.sheet-body.card-gear { grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.4fr); }
#sheet h4 { margin: 10px 0 4px; font-size: var(--fs-s); color: var(--ink-red); display: flex; gap: 6px; align-items: center; }
#sheet h4::before { content: "\2726"; font-size: .7em; color: var(--glyph); }
#sheet h4::after { flex: 1; content: ""; height: 1px; background: linear-gradient(90deg, var(--parch-rim), transparent); }
.sheet-who { display: flex; gap: 10px; align-items: center; }
.sheet-who b { font: bold var(--fs-xl) var(--font-display); font-variant: small-caps; letter-spacing: .04em; color: var(--ink); }
.sheet-who small { color: var(--ink-soft); font-style: italic; }
.sheet-who .portrait { width: 72px; height: 72px; border-width: 3px; }
.sheet-stats, .card-attrs, .sheet-skills { border-collapse: collapse; font-size: var(--fs-s); font-variant-numeric: tabular-nums; width: 100%; }
.sheet-stats th, .card-attrs th { text-align: left; color: var(--ink-soft); font-weight: normal; padding: 2px 10px 2px 0; white-space: nowrap; vertical-align: top; font-variant: small-caps; letter-spacing: .04em; }
.sheet-stats td, .card-attrs td { color: var(--ink); padding: 2px 6px 2px 0; vertical-align: top; border-bottom: 1px dotted var(--parch-rim); }
.card-attrs td:nth-child(2) { font: bold var(--fs-m) var(--font-display); text-align: center; width: 2.2em; }
.card-attrs td small { color: var(--ink-soft); }
.sheet-skills td { padding: 1px 4px; border-bottom: 1px dotted var(--parch-rim); }
.sheet-skills tr.trained td:first-child { color: var(--ink-red); font-weight: bold; }
.sheet-skills .pick { padding: 0 6px; font-size: 11px; min-height: 24px; }
#sheet p.warn { margin: 4px 0; color: var(--warn-ink); font-size: var(--fs-s); }
#sheet small { color: var(--ink-soft); }
.sheet-slots { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; }
.card-gear .sheet-slots { grid-template-columns: minmax(0, 1fr); }
.sheet-slots li { min-width: 0; }
.sheet-slots li > span:nth-child(2) { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sheet-pack-list { max-height: 380px; overflow-y: auto; scrollbar-width: thin; }
.sheet-pack-list li.pack-slot, .pack-copy { flex-wrap: wrap; }
.sheet-pack-list li.pack-slot > span:nth-child(2) { min-width: 9em; }
.sheet-pack-list li.pack-slot > span:last-child, .pack-copy > span:last-child { margin-left: auto; display: flex; flex-wrap: wrap; gap: 3px; justify-content: flex-end; align-items: center; }
.pack-copies-row { list-style: none; background: none !important; border: none !important; padding: 0 0 0 30px !important; min-height: 0 !important; box-shadow: none !important; }
.pack-copies { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 2px; width: 100%; }
.pack-copy { display: flex; align-items: center; gap: 6px; background: var(--row-bg); border: 1px dashed var(--parch-rim); padding: 2px 6px; font-size: var(--fs-xs); }
.pack-copy > span:first-child { flex: 1; min-width: 0; }
.sheet-pack-list select { max-width: 9em; margin-left: 3px; }
.kept-box { margin-top: 8px; border-top: 1px solid var(--parch-rim); padding-top: 4px; }
.kept-box > small { display: block; margin-bottom: 3px; }
.sheet-keys li { display: flex; align-items: center; gap: 6px; font-size: var(--fs-s); }
#sheet-detail, #overlay p.detail { min-height: 2.6em; margin: 8px 0; padding: 6px 8px; border-left: 3px solid var(--ink-red); color: var(--ink); font: var(--fs-s)/1.35 var(--font-body); background: var(--row-bg); }
#sheet .sheet-spells { list-style: none; padding-left: 0; margin: 2px 0 6px; }
#sheet .sheet-spells li { display: flex; flex-wrap: wrap; gap: 4px; align-items: center; justify-content: space-between; padding: 3px 0; border-bottom: 1px dotted var(--parch-rim); }
#sheet .sheet-spells.minor li { justify-content: flex-start; opacity: .9; }
.xp-bar { height: 10px; background: var(--track); border: 1px solid #000; border-radius: 6px; margin: 2px 0 8px; max-width: 320px; overflow: hidden; box-shadow: inset 0 1px 3px #000; }
.xp-bar > div { height: 100%; background: linear-gradient(180deg, var(--xp-hi), var(--xp) 55%, var(--xp-lo)); }
#card-xp { margin: 8px 0 2px; font-size: var(--fs-s); }
.card-list { list-style: none; margin: 0 0 4px; padding: 0; font-size: var(--fs-s); display: flex; flex-direction: column; gap: 2px; }
.card-list li img { vertical-align: middle; margin-right: 4px; }
.card-list b { color: var(--ink-red); font-variant: small-caps; }
#card-condition { border-left: 3px double var(--bad-ink); padding: 2px 0 2px 8px; margin: 2px 0 4px; background: var(--row-bg); }
#card-condition .card-list { margin: 2px 0 0 10px; }
#card-condition .card-list li::before { content: "\25B8 "; color: var(--glyph); }
/* the battle panel: "No one can act this round" (T3X) */
#no-actor { padding: 6px 8px; border-left: 3px solid var(--bad-ink); background: var(--row-bg); }
#overlay #battle-conditions b, #overlay #battle-downed b { color: var(--bad-ink); }

/* ============================================================== party creation and review */
#create-screen { display: grid; gap: 14px; }
.create-head { text-align: center; }
.create-head .hint { margin: 8px 0 0; }
.create-body { display: grid; grid-template-columns: 290px minmax(0, 1fr); gap: 16px; align-items: start; }
#draft-list { list-style: none; margin: 0 0 8px; padding: 0; display: flex; flex-direction: column; gap: 6px; }
#draft-list li { display: flex; gap: 8px; align-items: center; background: var(--row-bg); border-bottom: 1px solid var(--parch-rim); padding: 4px 6px; font-size: var(--fs-s); line-height: 1.25; }
#draft-list li > div { flex: 1; min-width: 0; }
#draft-list .portrait, .review-card .portrait { border-radius: 50%; border: 2px solid var(--medal-rim); background: radial-gradient(circle at 50% 35%, var(--slot-hi), var(--slot-lo) 75%); flex: none; }
button.small { align-self: flex-start; }
.creator { font-size: var(--fs-s); }
.creator h4 { margin: 8px 0 4px; font-size: var(--fs-s); color: var(--ink-red); }
.cr-head { display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.cr-name label { font: bold var(--fs-m) var(--font-display); font-variant: small-caps; color: var(--ink-red); }
.cr-name input { font: var(--fs-m) var(--font-body); padding: 6px 8px; width: 15em; }
.creator small.bad, .creator .bad { color: var(--bad-ink); }
.cr-face { display: grid; grid-template-columns: auto 96px auto; grid-template-rows: auto auto; gap: 2px 6px; align-items: center; justify-items: center; }
.cr-face small { grid-column: 1 / -1; font-size: var(--fs-xs); }
.cr-portrait { width: 96px; height: 96px; image-rendering: pixelated; border-radius: 50%; border: 4px solid var(--medal-rim); background: radial-gradient(circle at 50% 35%, var(--slot-hi), var(--slot-lo) 75%); box-shadow: 0 0 0 3px #000; }
.cr-choices { display: flex; flex-wrap: wrap; gap: 4px; }
.cr-info { margin: 4px 0 0; font-size: var(--fs-s); line-height: 1.3; }
.cr-info b { color: var(--ink-red); }
.cr-mods { color: var(--ok-ink); }
.cr-stats { display: grid; grid-template-columns: 1.15fr 1fr; gap: 14px; }
.cr-attrs, .cr-derived { border-collapse: collapse; width: 100%; font-size: var(--fs-s); }
.cr-attrs th, .cr-derived th { text-align: left; color: var(--ink-soft); font-weight: normal; padding: 2px 6px 2px 0; }
.cr-attrs td { padding: 1px 6px; border-top: 1px solid var(--parch-rim); }
.cr-derived td, .cr-derived th { border-top: 1px solid var(--parch-rim); padding: 2px 6px 2px 0; }
.cr-attrs td.num, .cr-derived td.num { text-align: right; font-variant-numeric: tabular-nums; }
.cr-attrs td.total { font-weight: bold; font-size: var(--fs-m); }
.cr-attrs td.up { color: var(--ok-ink); } .cr-attrs td.down { color: var(--bad-ink); }
.cr-derived td.num { font-weight: bold; width: 3.2em; }
.cr-derived td.why { color: var(--ink-soft); font-size: var(--fs-xs); padding-left: 8px; }
.cr-bar { width: 32%; } .cr-bar > i { display: block; height: 7px; background: linear-gradient(180deg, var(--xp-hi), var(--xp)); border: 1px solid #000; border-radius: 3px; }
.cr-rolls { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin: 10px 0 2px; }
.cr-reroll { color: var(--primary-fg); background: linear-gradient(180deg, var(--banner-600), var(--banner-800)); border-color: var(--gold-500); }
.cr-roll { font-variant-numeric: tabular-nums; }
.cr-roll b { margin-right: 2px; }
.cr-hint { color: var(--ink-soft); font-size: var(--fs-xs); display: block; }
.cr-actions { display: flex; gap: 8px; align-items: center; margin-top: 10px; flex-wrap: wrap; }
.cr-accept { color: var(--primary-fg); background: linear-gradient(180deg, var(--banner-600), var(--banner-800)); border-color: var(--gold-500); }
.cr-msg { min-height: 1.2em; margin: 6px 0 0; color: var(--warn-ink); font-size: var(--fs-s); }
.cr-attrs tr.key td { background: var(--row-sel); }
.cr-attrs tr.key td:first-child { font-weight: bold; box-shadow: inset 3px 0 0 var(--ink-red); }
.cr-attrs tr.cr-keynote td { border-top: none; padding: 0 6px 2px 12px; font-size: 11px; background: var(--row-sel); }
.cr-keywarn { margin: 4px 0 0; font-size: var(--fs-xs); color: var(--warn-ink); }
#review-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 10px; }
.review-card { display: grid; grid-template-columns: 76px 1fr; gap: 8px; background: var(--row-bg); border: 1px solid var(--parch-rim); padding: 8px; font-size: var(--fs-s); }
.review-card p { margin: 4px 0; }
.review-card b { color: var(--ink-red); font: bold var(--fs-m) var(--font-display); font-variant: small-caps; }
.review-attrs { display: flex; gap: 10px; margin: 4px 0 0; font-variant-numeric: tabular-nums; font-weight: bold; }
.review-attrs small { color: var(--ink-soft); font-weight: normal; }
#difficulty-pick { border: 1px solid var(--parch-rim); border-radius: 4px; margin: 10px 0; padding: 6px 10px 8px; display: flex; flex-wrap: wrap; gap: 6px 14px; align-items: flex-start; }
#difficulty-pick legend { color: var(--ink-red); font: bold var(--fs-s) var(--font-display); font-variant: small-caps; padding: 0 4px; }
#difficulty-pick label { display: flex; gap: 6px; align-items: baseline; max-width: 300px; cursor: pointer; }
#difficulty-pick small { color: var(--ink-soft); }

/* ============================================================== small laptop (1000x640) */
@media (max-width: 1100px) {
  #app { padding: 8px; }
  #game-screen { gap: 8px 12px; }
  #hud-head { gap: 8px; }
  #area-name { font-size: 15px; padding: 4px 24px 5px; max-width: 40%; }
  #gauge-text { display: none; }
  #minimap-box { padding: 4px; }
  #minimap { max-width: 140px; max-height: 140px; }
  #log-panel { padding: 6px 10px 4px; }
  .member .info > .reorder-box button { min-width: 18px; }
}

/* ============================================================== phone (390x844): one column */
@media (max-width: 700px) {
  /* T3V (review M1): every control is a 44 px target on the phone: buttons, lists and the volume slider */
  button, select, input[type="text"], input:not([type]) { min-height: 44px; min-width: 44px; }
  .sheet-slots button, .sheet-skills .pick, .shop-list button, .roster-list li button { min-height: 44px; padding: 6px 10px; }
  #sound-row input[type="range"] { height: 44px; width: 100%; }
  #app { padding: 8px; }
  .title-stage { display: block; min-height: 0; padding: 10px 0; }
  #title-screen .title-card { padding: 22px 16px 16px; }
  #title-name { font-size: 32px; letter-spacing: .04em; }
  .title-menu button { min-height: 52px; font-size: var(--fs-m); flex-wrap: wrap; }
  .title-menu button .what { margin-left: 0; flex: 1 1 100%; text-align: left; }
  #title-screen .keys { display: none; }
  .book { grid-template-columns: minmax(0, 1fr); min-height: 0; }
  .book .page.left { padding: 16px; gap: 6px; border-radius: 4px 4px 0 0; }
  .book-crest { font-size: 36px; }
  .book .page.right { padding: 18px 16px 14px; border-radius: 0 0 4px 4px; }
  .book .text { font-size: 17px; }
  .theme-pick { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  #game-screen { min-height: 0; grid-template-columns: minmax(0, 1fr); grid-template-rows: none; gap: 8px; grid-template-areas: "head" "view" "pad" "party" "right"; }
  #hud-head { gap: 6px; }
  #area-name { max-width: 100%; flex: 1 1 100%; font-size: 15px; white-space: normal; }
  #gold-row { margin-left: 0; flex-wrap: wrap; }
  #save-menu { flex-wrap: wrap; width: 100%; }
  #save-menu button { flex: 1 1 22%; min-height: 44px; font-size: var(--fs-s); }
  #btn-mute { min-height: 44px; min-width: 44px; }
  #viewport { width: 100%; height: auto; }
  #view { width: 100%; height: auto; aspect-ratio: 640 / 400; }
  #overlay, #viewport > #overlay[data-mode="interior"] { position: static; inset: auto; max-height: none; margin: 0; border-width: 2px 0 0; }
  #overlay[data-mode="interior"]:has(> .shop) { height: 80vh; }
  #game-reminder { max-width: calc(100% - 16px); }
  #rightcol { height: auto; }
  #side-top { grid-template-columns: minmax(0, 1fr); }
  #minimap-box { display: none; } /* phone: the map is the small inset in the view's corner */
  #sys-msg { height: auto; min-height: 2.2em; max-height: 6em; }
  #log-panel { min-height: 0; flex: none; }
  #log { max-height: 140px; }
  #inv-row button, #skill-row button, #overlay .row button, #overlay .choices button, #overlay button { min-height: 44px; padding: 6px 10px; }
  #overlay[data-mode="battle"] .acts-row { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  #overlay[data-mode="battle"] .acts-row button { white-space: normal; font-size: 13px; padding: 2px 3px; }
  #pad { display: grid; grid-template-columns: 168px minmax(0, 1fr); gap: 8px; align-items: stretch; }
  #game-screen[data-battle="1"] #pad, #game-screen[data-mode="scene"] #pad, #game-screen[data-mode="interior"] #pad { display: none; }
  .dpad { display: grid; grid-template-columns: repeat(3, 52px); grid-template-rows: repeat(2, 48px); gap: 6px; }
  .dpad button { min-height: 48px; padding: 0; font: 20px var(--font-body); }
  .pad-acts { display: grid; grid-template-columns: 1fr; gap: 6px; }
  .pad-acts button { min-height: 48px; }
  #party { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px 8px; }
  .member { grid-template-columns: 36px minmax(0, 1fr); padding: 5px; gap: 2px 5px; min-height: 64px; }
  .member .portrait { width: 36px; height: 36px; border-width: 2px; }
  .member .info > b { font-size: 13px; }
  .member .info > small.desc, .member .info > small.stats { display: none; }
  .member .info > .reorder-box { position: static; flex: 1 1 100%; order: 8; justify-content: space-between; margin-left: -41px; width: calc(100% + 41px); } /* the row under the portrait too */
  #party .member .info > .reorder-box button.reorder { min-height: 44px; min-width: 44px; font-size: 12px; }
  .create-body, .sheet-body, .sheet-body.card-gear, .cr-stats, .shop-cols { grid-template-columns: minmax(0, 1fr); }
  .sheet-slots { grid-template-columns: minmax(0, 1fr); }
  .card-tabs button { flex: 1 1 45%; min-height: 44px; clip-path: none; border-radius: 3px; border-bottom: 2px solid var(--tab-rim); padding: 6px; }
  .card-tabs button.on { transform: none; }
  .sheet-tabs button { min-height: 44px; }
  .sheet-pack-list { max-height: none; }
  .sheet-pack-list li, .pack-copy { flex-wrap: wrap; }
  .sheet-pack-list li > span:last-child, .pack-copy > span:last-child { flex-basis: 100%; display: flex; flex-wrap: wrap; gap: 3px; justify-content: flex-end; }
  .sheet-pack-list button, .sheet-pack-list select, .shop-list button, .roster-list li button { min-height: 44px; padding: 6px 8px; }
  #finds-modal { top: auto; bottom: 8px; max-height: 60vh; }
  /* S9: each find is two lines on the phone: icon and name, then who / Take / Leave */
  #finds .shop-list li { grid-template-columns: auto minmax(0, 1fr) auto; grid-template-rows: auto auto; row-gap: 4px; align-items: center; }
  #finds .shop-list li > span:nth-child(2) { grid-column: 2 / -1; }
  #finds .shop-list li > select { grid-column: 1 / 3; min-height: 44px; min-width: 0; }
  #finds .shop-list li > button:last-child { grid-column: 3; }
  #finds .shop-list li > button[data-key^="finds-take"] { grid-column: 3; grid-row: 2; }
  #finds .shop-list li > button[data-key^="finds-leave"] { grid-column: 3; grid-row: 3; }
  #review-list { grid-template-columns: minmax(0, 1fr); }
  .cr-name input { width: 100%; max-width: 15em; }
  .cr-head { flex-wrap: wrap; }
  .menu.small { flex-wrap: wrap; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}