/* The card room's table styles, shared by every card game. Each theme only
   sets these variables; cards.css draws everything from them. Clubhouse is
   the default; a player's choice is kept in their browser (kit/themes.js).
   Every theme is dark-ish at the edges so stepping in from the shelf never
   flashes (docs/design-system.md). Each one must make every indicator a
   card game draws stand out (the turn ring, a picked card, Your move's
   ring, the hot badge, the cards on the felt): tools/room/styles.mjs
   measures them, and check:room fails a style that falls short. Classic,
   Formica and Midnight were cut for it (2026-10-29). */

/* The house rules' tokens (docs/design-system.md), the same small set every
   UO game declares: five type roles, five spaces, one way to show a pick.
   The pick is drawn in currentColor, so it takes the ink of whatever it sits
   on (a light sheet, the felt); a theme may draw it its own way. */
:root {
  --t-display: clamp(32px, 7vw, 44px);
  --t-heading: 20px;
  --t-body: 16px;
  --t-label: 16px;
  --t-note: 14px;
  --s1: 4px; --s2: 8px; --s3: 16px; --s4: 24px; --s5: 40px;
  --pick-tint: color-mix(in srgb, currentColor 16%, transparent);
  --pick-ring: inset 0 0 0 2px currentColor;
  --pick-weight: 700;
  /* the soft line round things you set rather than press (inputs, choices) */
  --field-edge: 1.5px solid color-mix(in srgb, currentColor 50%, transparent);
  /* ink on the bright things: a seat's color (its mark, a ribbon), the turn
     yellow (a badge), a move asking "…anyway?" (themes below change it) */
  --seat-ink: #111;
  --turn-ink: #111;
  --confirm-ink: #1d0a06;
}

/* (and the foyer of a game that opts in with data-foyer="felt" on its page,
   Get In Line: its menu, a table's door and its waiting room sit on this
   felt while one is showing, its board keeping its own look; ADR 0036) */
:root,
[data-theme="clubhouse"],
[data-foyer="felt"]:has(.felt.foyer) {
  --room: #10241d;
  --table: radial-gradient(ellipse at 50% 30%, #245a49, #1d4a3c 55%, #163b30);
  --rail: 2px solid #f4efe4;
  --rail-radius: 18px;
  --ink: #f4efe4;
  --soft: #adcdc0;
  --panel: rgba(0, 0, 0, .18);
  --panel-edge: 1.5px solid rgba(244, 239, 228, .22); /* (solid: dashed only ever means "not yet") */
  --ui-font: -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
  --display: var(--ui-font);
  --display-weight: 800;

  --card: #ffffff;
  --card-edge: 1px solid #ffffff;
  --card-radius: 8px;
  --card-font: var(--ui-font);
  --card-weight: 800;
  --card-shadow: 0 1px 0 rgba(0, 0, 0, .35);
  --suit-s: #121212;
  --suit-c: #121212;
  --suit-h: #d7263d;
  --suit-d: #d7263d;
  --joker: #2b59c3;
  --back: #e63b2e;
  --back-edge: 3px solid #f4efe4;
  --back-pattern: radial-gradient(circle, rgba(244, 239, 228, .55) 1.4px, transparent 1.8px) 0 0 / 8px 8px;
  --select: 4px 4px 0 #f5c518;
  --lift: translate(-3px, -14px);

  --chip: rgba(0, 0, 0, .2);
  --chip-edge: 2px solid #f4efe4;
  --chip-radius: 99px;
  --turn: #f5c518;
  --btn: #f4efe4;
  --btn-ink: #1d4a3c;
  --btn-edge: 2px solid #f4efe4;
  --btn2: transparent;
  --btn2-ink: #f4efe4;
  --btn2-edge: 2px solid #f4efe4;
  --btn-radius: 10px;
  --btn-weight: 700;
  --sheet: #173f33;
  --good: #8fe0a8;
  --bad: #ff9b8f;
  color-scheme: dark;
}

[data-theme="gamebox"] {
  --room: #15130f;
  --table: #15130f;
  --rail: 2px solid #f4efe4;
  --rail-radius: 10px;
  --ink: #f4efe4;
  --soft: #ada391;
  --panel: #1f1b16;
  --panel-edge: 2px solid #f4efe4;
  --card: #f4efe4;
  --card-edge: 2px solid #f4efe4;
  --card-radius: 8px;
  --card-weight: 800;
  --card-shadow: none;
  --suit-s: #15130f;
  --suit-c: #15130f;
  --suit-h: #c62a1e;
  --suit-d: #c62a1e;
  --joker: #2b59c3;
  --back: #2b59c3;
  --chip-radius: 10px;
  --card-edge: 2px solid #c9c1b0;
  --back-edge: 2px solid #f4efe4;
  --back-pattern: radial-gradient(circle, #f4efe4 1.6px, transparent 2px) 0 0 / 8px 8px;
  --chip: transparent;
  --turn: #f5c518;
  --btn: #f5c518;
  --btn-ink: #15130f;
  --btn-edge: 2px solid #f4efe4;
  --btn2-edge: 2px solid #f4efe4;
  --sheet: #1f1b16;
}

/* A nod to the solitaire that came with early Windows: green felt, gray
   bevelled buttons, a tiled card back. */
[data-theme="retro"] {
  --room: #004d00;
  --table: #008000;
  --rail: 2px solid #000;
  --rail-radius: 0;
  --ink: #ffffff;
  --soft: #e6ffe6;
  --panel: rgba(0, 0, 0, .12);
  --panel-edge: 1px dotted rgba(255, 255, 255, .5);
  --ui-font: Tahoma, Verdana, "MS Sans Serif", sans-serif;
  --display: Tahoma, Verdana, sans-serif;
  --display-weight: 700;
  --card: #ffffff;
  --card-edge: 1px solid #000;
  --card-radius: 4px;
  --card-font: "Times New Roman", serif;
  --card-weight: 700;
  --card-shadow: none;
  --suit-s: #000;
  --suit-c: #000;
  --suit-h: #ff0000;
  --suit-d: #ff0000;
  --joker: #000080;
  --back: #0000a8;
  --back-edge: 3px solid #fff;
  --back-pattern: repeating-conic-gradient(#0000a8 0 25%, #5454fc 0 50%) 0 0 / 6px 6px;
  --select: 0 0 0 2px #000, 0 0 0 4px #ffff00;
  --lift: translateY(-12px);
  --chip: #c0c0c0;
  --chip-edge: 2px outset #fff;
  --turn: #ffff00;
  --btn: #c0c0c0;
  --btn-ink: #000;
  --btn-edge: 2px outset #fff;
  --btn2: #c0c0c0;
  --btn2-ink: #000;
  --btn2-edge: 2px outset #fff;
  --btn-radius: 0;
  --btn-weight: 400;
  --chip-radius: 0;
  --sheet: #c0c0c0;
  --good: #006400;
  --bad: #a00000;
}
[data-theme="retro"] .seat { color: #000; }
[data-theme="retro"] .seat .soft { color: #333; }
[data-theme="retro"] :is(.sheet, .house-sheet) { color: #000; }
[data-theme="retro"] :is(.sheet, .house-sheet) .soft { color: #333; }

[data-theme="casino"] {
  --room: #2a0509;
  --table: radial-gradient(ellipse at 50% 30%, #9c1c2c, #7a1020 55%, #5a0a16);
  --rail: 6px solid #d4af37;
  --rail-radius: 26px;
  --ink: #fbf3df;
  --soft: #f0c7b0;
  --panel: rgba(0, 0, 0, .2);
  --panel-edge: 1px solid rgba(212, 175, 55, .45);
  --display: Georgia, serif;
  --display-weight: 700;
  --card: #fffaf0;
  --card-edge: 1px solid #e6dcc4;
  --card-radius: 7px;
  --card-weight: 800;
  --card-shadow: 0 2px 3px rgba(0, 0, 0, .45);
  --suit-s: #111;
  --suit-c: #111;
  --suit-h: #c8102e;
  --suit-d: #c8102e;
  --joker: #8a6508;
  --back: #111;
  --back-edge: 3px solid #fffaf0;
  --back-pattern: repeating-linear-gradient(45deg, rgba(212, 175, 55, .8) 0 2px, transparent 2px 7px);
  --select: 0 0 0 2px #d4af37, 0 10px 14px rgba(0, 0, 0, .45);
  --lift: translateY(-14px);
  --chip: rgba(0, 0, 0, .3);
  --chip-edge: 1.5px solid #d4af37;
  --turn: #ffd95a;
  --btn: #d4af37;
  --btn-ink: #2a0509;
  --btn-edge: 1.5px solid #d4af37;
  --btn2: transparent;
  --btn2-ink: #fbf3df;
  --btn2-edge: 1.5px solid #d4af37;
  --btn-radius: 99px;
  --sheet: #5a0a16;
}

/* High contrast, with each suit its own color: easy on small phones and for
   players who can't tell red from black at a glance. */
[data-theme="fourcolor"] {
  --room: #000;
  --table: #0b0b0b;
  --rail: 2px solid #fff;
  --rail-radius: 12px;
  --ink: #ffffff;
  --soft: #cfcfcf;
  --panel: #161616;
  --panel-edge: 2px solid #5a5a5a;
  --card: #ffffff;
  --card-edge: 2px solid #b8b8b8;
  --card-radius: 8px;
  --card-weight: 900;
  --card-shadow: none;
  --suit-s: #000000;
  --suit-c: #0a7d2c;
  --suit-h: #d10f1f;
  --suit-d: #1450d8;
  --joker: #7a2ad8;
  --back: #333;
  --back-edge: 2px solid #fff;
  --back-pattern: repeating-linear-gradient(90deg, #fff 0 2px, transparent 2px 8px);
  --select: 0 0 0 4px #ffe600;
  --lift: translateY(-16px);
  --chip: #000;
  --chip-edge: 2px solid #fff;
  --turn: #ffe600;
  --btn: #ffe600;
  --btn-ink: #000;
  --btn-edge: 2px solid #ffe600;
  --btn2: #000;
  --btn2-ink: #fff;
  --btn2-edge: 2px solid #fff;
  --sheet: #111;
  --good: #7dff9b;
  --bad: #ff8a8a;
}

[data-theme="arcade"] {
  --room: #05050c;
  --table: linear-gradient(rgba(255, 46, 136, .09) 1px, transparent 1px) 0 0 / 28px 28px,
           linear-gradient(90deg, rgba(0, 229, 255, .09) 1px, transparent 1px) 0 0 / 28px 28px, #0a0a16;
  --rail: 2px solid #00e5ff;
  --rail-radius: 6px;
  --ink: #e6f7ff;
  --soft: #8aa9c8;
  --panel: rgba(0, 229, 255, .05);
  --panel-edge: 1px solid rgba(255, 46, 136, .55);
  --ui-font: "Menlo", "SFMono-Regular", Consolas, monospace;
  --display: "Menlo", "SFMono-Regular", Consolas, monospace;
  --display-weight: 700;
  --card: #14142b;
  --card-edge: 1.5px solid #00e5ff;
  --card-radius: 6px;
  --card-font: "Menlo", "SFMono-Regular", Consolas, monospace;
  --card-weight: 700;
  --card-shadow: none;
  --suit-s: #00e5ff;
  --suit-c: #b6ff3a;
  --suit-h: #ff2e88;
  --suit-d: #ffb800;
  --joker: #c77dff;
  --back: #0a0a16;
  --back-edge: 1.5px solid #ff2e88;
  --back-pattern: repeating-linear-gradient(135deg, rgba(255, 46, 136, .6) 0 1px, transparent 1px 6px);
  --select: 0 0 0 2px #b6ff3a;
  --lift: translateY(-14px);
  --chip: rgba(0, 229, 255, .06);
  --chip-edge: 1px solid #00e5ff;
  --turn: #b6ff3a;
  --btn: #ff2e88;
  --btn-ink: #05050c;
  --btn-edge: 1px solid #ff2e88;
  --btn2: transparent;
  --btn2-ink: #00e5ff;
  --btn2-edge: 1px solid #00e5ff;
  --btn-radius: 4px;
  --sheet: #0a0a16;
  --good: #b6ff3a;
  --bad: #ff2e88;
}

/* Light surfaces in dark themes (and the reverse) need their own ink:
   re-scope the variables on those surfaces rather than patching colors. */
[data-theme="retro"] :is(.seat, .sheet, .house-sheet, .gamelog, .rummy .group, .rummy .staging, .rummy .meldpop, .rummy .meldtag, .rummy .jchip, .rummy .cset .pill, .seatlist .seat, .recent a, .recent .forget:hover, .toast, .house-toast) { --ink: #000; --soft: #333; color: #000; }
[data-theme="retro"] :is(.sheet, .house-sheet) { --turn: #000080; }
/* (the house kit reads its own names: its sheets, toasts and banners are on
   the light gray too) */
[data-theme="retro"] :is(.house-scrim, .house-toasts, .house-banner) { --house-ink: #000; --house-soft: #333; --house-turn: #000080; --house-turn-ink: #fff; }
[data-theme="retro"] .seat .count.low { color: #000080; }
[data-theme="retro"] .rummy .group { background: #c0c0c0; }
[data-theme="retro"] .rummy .group .ok { color: #006400; }
[data-theme="retro"] .rummy .group .no { color: #a00000; }
[data-theme="retro"] :is(.seatlist .seat, .recent a) { border-radius: 0; border: var(--chip-edge); }
[data-theme="retro"] .seatlist .seat .face { background: #000080; color: #fff; }
[data-theme="retro"] :is(.sheet .who, .house-sheet .who, .loglines .who) { filter: brightness(.36) saturate(1.4); }
[data-theme="retro"] .tiles.list .name { color: var(--ink) !important; filter: none; }
[data-theme="retro"] .tiles.list .name::before { content: '● '; color: var(--seat); }
/* the "…anyway?" color: a light warning reads with dark ink, a dark one with
   light. Where the warning is too close to the main button (Arcade's), it
   asks in its own color. */
[data-theme="arcade"] { --confirm: #ff7a1a; }
[data-theme="arcade"] .rummy .seat .who, [data-theme="arcade"] .rummy .pile .count, [data-theme="arcade"] .rummy .act, [data-theme="arcade"] .rummy .tool, [data-theme="arcade"] .rummy .seg.small { font-family: system-ui, -apple-system, sans-serif; }
/* Retro's buttons are all gray, as they were; the default one gets the heavy
   black outline old dialogs used, so the main choice still stands out. */
[data-theme="retro"] .btn:not(.alt):not(.quiet):not(.danger):not([disabled]) { box-shadow: 0 0 0 2px #000; font-weight: 700; }
[data-theme="retro"] .btn.danger { border: var(--btn2-edge); }
/* Its choices are a row of gray buttons; the picked one is pushed in, on
   the checkered gray of a latched toolbar button. Fields are sunken. */
[data-theme="retro"] {
  --pick-tint: repeating-conic-gradient(#fff 0 25%, #c0c0c0 0 50%) 0 0 / 2px 2px;
  --pick-ring: inset 1px 1px 0 #000, inset 2px 2px 0 #808080, inset -1px -1px 0 #fff;
  --field-edge: 2px inset #fff;
}
[data-theme="retro"] .seg { --ink: #000; --soft: #333; color: #000; background: #c0c0c0; border: 2px outset #fff; padding: 2px; }
[data-theme="retro"] .seg button { border-radius: 0; }
[data-theme="retro"] .stepper .btn { background: var(--btn2); color: var(--btn2-ink); border: var(--btn2-edge); }
/* Its quiet tools stay small gray buttons, as on an old menu bar. */
[data-theme="retro"] .bar .tools .btn.quiet, [data-theme="retro"] .bar .btn.quiet.more { background: var(--btn); color: var(--btn-ink); border: var(--btn-edge); text-decoration: none; }
[data-theme="retro"] .bar .tools .btn.quiet.stop { background: none; color: var(--ink); border: 0; text-decoration: underline; }
/* The soft line, in each theme's own edge. */
[data-theme="gamebox"] { --field-edge: 2px solid #7d7566; }
[data-theme="casino"] { --field-edge: 1.5px solid rgba(212, 175, 55, .65); }
[data-theme="fourcolor"] { --field-edge: 2px solid #8a8a8a; }
[data-theme="arcade"] { --field-edge: 1px solid rgba(0, 229, 255, .6); }