/*
 * Online play keeps one multiplayer renderer. These skins mirror every entry
 * in the offline UI registry without replacing the room or WebSocket session.
 */

html[data-ui="table"] {
  --online-bg: #e7dfc8;
  --online-paper: #f7f0db;
  --online-ink: #171714;
  --online-muted: #706c60;
  --online-accent: #f7d91e;
  --online-accent-ink: #171714;
  --online-danger: #e42b25;
  --online-success: #1b7651;
  --online-light: #f7f0db;
  --online-intro: #171714;
  --online-table: #315d46;
  --online-table-edge: #274c3a;
  --online-card: #fffdf6;
  --online-selected: #fff6a7;
  --online-font: "Courier New", Courier, monospace;
  --online-display: Impact, Haettenschweiler, sans-serif;
  --online-line: 3px solid #171714;
  --online-thin-line: 2px solid #171714;
  --online-radius: 0;
  --online-shadow: 5px 5px 0 #171714;
  --online-large-shadow: 12px 12px 0 #171714;
  --online-deck: repeating-linear-gradient(45deg, #171714 0 7px, #f7d91e 7px 10px);
  --online-body-texture: none;
}

html[data-ui="desktop"] {
  --online-bg: #6c746f;
  --online-paper: #d1cbbf;
  --online-ink: #171b18;
  --online-muted: #6e6a61;
  --online-accent: #d7bd57;
  --online-accent-ink: #171b18;
  --online-danger: #9d292c;
  --online-success: #267058;
  --online-light: #f5f0e3;
  --online-intro: #46586a;
  --online-table: #164c37;
  --online-table-edge: #0c3324;
  --online-card: #f5f0e3;
  --online-selected: #ead67d;
  --online-font: "Lucida Sans", "Nimbus Sans L", "Trebuchet MS", sans-serif;
  --online-display: "URW Bookman", "Bookman Old Style", Georgia, serif;
  --online-line: 1px solid #6e6a61;
  --online-thin-line: 1px solid #777168;
  --online-radius: 0;
  --online-shadow: inset 1px 1px #eee9de, inset -2px -2px #8b857a, 3px 3px 0 rgba(24, 29, 26, .3);
  --online-large-shadow: inset 1px 1px #eee9de, inset -2px -2px #777168, 8px 9px 0 rgba(24, 29, 26, .42);
  --online-deck: repeating-linear-gradient(135deg, #0c3324 0 6px, #d7bd57 6px 8px);
  --online-body-texture: linear-gradient(#747c77, #606863);
}

html[data-ui="plain"] {
  --online-bg: #f4f4f1;
  --online-paper: #fff;
  --online-ink: #171717;
  --online-muted: #717171;
  --online-accent: #171717;
  --online-accent-ink: #fff;
  --online-danger: #a51f24;
  --online-success: #176448;
  --online-light: #fff;
  --online-intro: #fff;
  --online-table: #ecece8;
  --online-table-edge: #d7d7d2;
  --online-card: #fff;
  --online-selected: #dedede;
  --online-font: ui-monospace, "SFMono-Regular", Consolas, monospace;
  --online-display: ui-monospace, "SFMono-Regular", Consolas, monospace;
  --online-line: 1px solid #171717;
  --online-thin-line: 1px solid #aaa;
  --online-radius: 0;
  --online-shadow: none;
  --online-large-shadow: none;
  --online-deck: repeating-linear-gradient(135deg, #171717 0 2px, #fff 2px 5px);
  --online-body-texture: none;
}

html[data-ui="arcade"] {
  color-scheme: dark;
  --online-bg: #08070b;
  --online-paper: #071714;
  --online-ink: #fff4d2;
  --online-muted: #2b8067;
  --online-accent: #ffe66d;
  --online-accent-ink: #08070b;
  --online-danger: #ff3e68;
  --online-success: #72f1b8;
  --online-light: #fff4d2;
  --online-intro: #4d0d25;
  --online-table: #020706;
  --online-table-edge: #2b8067;
  --online-card: #111116;
  --online-selected: #3b1730;
  --online-font: Menlo, "Courier New", monospace;
  --online-display: Impact, Haettenschweiler, sans-serif;
  --online-line: 2px solid #72f1b8;
  --online-thin-line: 1px solid #2b8067;
  --online-radius: 0;
  --online-shadow: 4px 4px 0 #000, 0 0 14px rgba(114, 241, 184, .2);
  --online-large-shadow: 9px 9px 0 #000, 0 0 26px rgba(255, 62, 104, .24);
  --online-deck: repeating-linear-gradient(135deg, #8f173b 0 9px, #42d9ff 9px 11px);
  --online-body-texture: radial-gradient(circle at 50% -20%, #4a0f23 0, transparent 42rem), repeating-linear-gradient(90deg, #08070b 0 28px, #0d0b11 28px 29px);
}

html[data-ui="atelier"] {
  --online-bg: #ebe7da;
  --online-paper: #f2eee3;
  --online-ink: #17201c;
  --online-muted: #6d7068;
  --online-accent: #9f3f2f;
  --online-accent-ink: #ebe7da;
  --online-danger: #9f3f2f;
  --online-success: #315b62;
  --online-light: #ebe7da;
  --online-intro: #17201c;
  --online-table: #315b62;
  --online-table-edge: #294a50;
  --online-card: #f6f2e7;
  --online-selected: #dcd5c3;
  --online-font: "Avenir Next Condensed", "DIN Condensed", "Franklin Gothic Condensed", sans-serif;
  --online-display: "Iowan Old Style", Baskerville, "Palatino Linotype", serif;
  --online-line: 1px solid rgba(23, 32, 28, .55);
  --online-thin-line: 1px solid rgba(23, 32, 28, .3);
  --online-radius: 0;
  --online-shadow: none;
  --online-large-shadow: none;
  --online-deck: repeating-linear-gradient(90deg, #17201c 0 1px, #ebe7da 1px 5px);
  --online-body-texture: linear-gradient(90deg, transparent 49.85%, rgba(23, 32, 28, .08) 50%, transparent 50.15%), repeating-linear-gradient(0deg, rgba(65, 54, 37, .025) 0 1px, transparent 1px 4px);
}

html[data-ui="zine"] {
  --online-bg: #eee9dc;
  --online-paper: #fffef5;
  --online-ink: #111;
  --online-muted: #65615a;
  --online-accent: #f6e52e;
  --online-accent-ink: #111;
  --online-danger: #e02727;
  --online-success: #1261b9;
  --online-light: #fffef5;
  --online-intro: #111;
  --online-table: #1261b9;
  --online-table-edge: #0d417c;
  --online-card: #fffef5;
  --online-selected: #f6e52e;
  --online-font: "Courier Prime", Courier, monospace;
  --online-display: "Archivo Black", Impact, sans-serif;
  --online-line: 4px solid #111;
  --online-thin-line: 2px dotted #111;
  --online-radius: 0;
  --online-shadow: 7px 8px 0 #111;
  --online-large-shadow: 14px 16px 0 #111;
  --online-deck: repeating-linear-gradient(135deg, #111 0 8px, #f6e52e 8px 11px);
  --online-body-texture: linear-gradient(90deg, transparent 49.7%, rgba(0, 0, 0, .045) 50%, transparent 50.3%), radial-gradient(ellipse at 12% 22%, rgba(0, 0, 0, .08), transparent 21%), radial-gradient(ellipse at 83% 68%, rgba(224, 39, 39, .08), transparent 32%);
}

html[data-ui="toybox"] {
  --online-bg: #071b30;
  --online-paper: #e7c88e;
  --online-ink: #17212a;
  --online-muted: #8caaa8;
  --online-accent: #d98220;
  --online-accent-ink: #17212a;
  --online-danger: #bc3b2f;
  --online-success: #50a6ab;
  --online-light: #f2dfbd;
  --online-intro: #102d41;
  --online-table: #12354d;
  --online-table-edge: #071b30;
  --online-card: #eddbb6;
  --online-selected: #f0b34e;
  --online-font: "Trebuchet MS", "Gill Sans", sans-serif;
  --online-display: Georgia, "Times New Roman", serif;
  --online-line: 3px dashed #c6954b;
  --online-thin-line: 2px dashed rgba(112, 75, 45, .65);
  --online-radius: 10px 15px 9px 13px;
  --online-shadow: inset 0 0 0 2px rgba(255,255,255,.14), 4px 6px 0 rgba(0,0,0,.3);
  --online-large-shadow: inset 0 0 0 3px rgba(105,64,28,.2), 9px 12px 0 rgba(0,0,0,.3);
  --online-deck: repeating-linear-gradient(135deg, #9d342d 0 9px, #d98220 9px 12px);
  --online-body-texture: url("../../assets/ui/felt-theatre.png") center / cover fixed no-repeat;
}

html[data-ui] {
  color: var(--online-ink);
  background: var(--online-bg);
  font-family: var(--online-font);
}

html[data-ui] body {
  color: var(--online-ink);
  background: var(--online-body-texture);
  background-color: var(--online-bg);
  font-family: var(--online-font);
}

.online-ui-switcher {
  position: fixed;
  z-index: 1001;
  top: 14px;
  right: 190px;
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 38px;
  padding: 5px 8px;
  border: var(--online-line);
  border-radius: var(--online-radius);
  color: var(--online-ink);
  background: var(--online-paper);
  box-shadow: var(--online-shadow);
  font-family: var(--online-font);
  font-size: 10px;
  font-weight: 900;
  letter-spacing: .12em;
  text-transform: uppercase;
}

.online-ui-switcher select {
  max-width: 150px;
  border: 0;
  color: inherit;
  background: transparent;
  font: inherit;
}

html[data-ui] .play-mode-nav,
html[data-ui] .online-entry input,
html[data-ui] .online-entry button,
html[data-ui] .game-actions button,
html[data-ui] .start-game,
html[data-ui] .lobby-card,
html[data-ui] .player-chip,
html[data-ui] .pile,
html[data-ui] .your-zone,
html[data-ui] .playing-card,
html[data-ui] .call-row label,
html[data-ui] .game-log,
html[data-ui] .online-notice {
  border-color: var(--online-ink);
  border-radius: var(--online-radius);
}

html[data-ui] .play-mode-nav,
html[data-ui] .online-entry input,
html[data-ui] .online-entry button,
html[data-ui] .game-actions button,
html[data-ui] .start-game,
html[data-ui] .lobby-card,
html[data-ui] .pile,
html[data-ui] .playing-card,
html[data-ui] .online-notice.floating {
  box-shadow: var(--online-shadow);
}

html[data-ui] .play-mode-nav,
html[data-ui] .online-entry input,
html[data-ui] .online-entry button,
html[data-ui] .game-actions button,
html[data-ui] .start-game,
html[data-ui] .lobby-card,
html[data-ui] .player-chip,
html[data-ui] .pile,
html[data-ui] .your-zone,
html[data-ui] .playing-card,
html[data-ui] .call-row label,
html[data-ui] .game-log {
  color: var(--online-ink);
  background-color: var(--online-paper);
}

html[data-ui] .play-mode-nav a { color: var(--online-ink); }
html[data-ui] .play-mode-nav a + a { border-color: var(--online-ink); }
html[data-ui] .play-mode-nav a.active,
html[data-ui] .online-entry button.primary,
html[data-ui] .game-actions button.primary,
html[data-ui] .start-game.primary,
html[data-ui] .player-chip.current,
html[data-ui] .seat em {
  color: var(--online-accent-ink);
  background: var(--online-accent);
}

html[data-ui] .online-intro { color: var(--online-light); background: var(--online-intro); }
html[data-ui] .online-intro h1,
html[data-ui] .room-code,
html[data-ui] .online-logo { font-family: var(--online-display); }
html[data-ui] .online-intro h1 b { color: inherit; font: inherit; }
html[data-ui] .online-intro h1 span,
html[data-ui] .online-logo span,
html[data-ui] .room-code { color: var(--online-danger); }
html[data-ui] .online-intro a { color: var(--online-accent); }
html[data-ui] .or { border-color: var(--online-ink); }
html[data-ui] .or span,
html[data-ui] .turn-message,
html[data-ui] .game-log { background-color: var(--online-bg); }
html[data-ui] .online-header { border-color: var(--online-ink); }
html[data-ui] .online-logo { color: var(--online-ink); }
html[data-ui] .lobby-card { box-shadow: var(--online-large-shadow); }
html[data-ui] .seat { border-color: var(--online-muted); }
html[data-ui] .seat.empty { color: var(--online-muted); }
html[data-ui] .connection.online { color: var(--online-success); }
html[data-ui] .connection.offline { color: var(--online-danger); }
html[data-ui] .presence { background-color: var(--online-danger); }
html[data-ui] .presence.online { background-color: var(--online-success); }

html[data-ui] .online-table {
  border-color: var(--online-ink);
  color: var(--online-light);
  background: var(--online-table);
  box-shadow: inset 0 0 0 8px var(--online-table-edge);
}

html[data-ui] .pile.deck {
  color: var(--online-light);
  background: var(--online-deck);
  text-shadow: 2px 2px var(--online-ink);
}

html[data-ui] .pile.red,
html[data-ui] .playing-card.red,
html[data-ui] .game-log .bad { color: var(--online-danger); }
html[data-ui] .playing-card { background: var(--online-card); }
html[data-ui] .playing-card.selected { background: var(--online-selected); }
html[data-ui] .online-notice { color: var(--online-light); background: var(--online-danger); }
html[data-ui] .game-log li { border-color: var(--online-muted); }

html[data-ui="desktop"] .online-landing,
html[data-ui="desktop"] .online-shell {
  width: min(1380px, calc(100% - 24px));
  min-height: calc(100vh - 24px);
  margin: 12px auto;
  border: 2px solid #3e403d;
  background: var(--online-paper);
  box-shadow: var(--online-large-shadow);
}
html[data-ui="desktop"] .online-landing { grid-template-columns: minmax(0, 1fr) minmax(320px, .8fr); }
html[data-ui="desktop"] .online-header { padding-inline: 12px; background: #46586a; color: white; }
html[data-ui="desktop"] .online-header .online-logo { color: white; }
html[data-ui="desktop"] .online-ui-switcher,
html[data-ui="desktop"] .play-mode-nav { top: auto; bottom: 9px; }

html[data-ui="plain"] .online-intro { color: var(--online-ink); border-right: var(--online-line); }
html[data-ui="plain"] .online-intro h1 { font-size: clamp(3rem, 8vw, 7rem); line-height: .95; }
html[data-ui="plain"] .online-intro h1 span { color: inherit; }
html[data-ui="plain"] .online-table { box-shadow: none; }
html[data-ui="plain"] .playing-card.selected { outline: 3px solid var(--online-ink); outline-offset: -5px; transform: translateY(-8px); }

html[data-ui="arcade"] .online-intro {
  background: repeating-linear-gradient(135deg, #8f173b 0 14px, #991b43 14px 28px);
  box-shadow: inset -18px 0 #4d0d25;
}
html[data-ui="arcade"] .online-intro h1 { text-shadow: 4px 4px 0 #ff3e68, 8px 8px 0 #4427a1, 0 0 20px rgba(255,230,109,.35); }
html[data-ui="arcade"] .online-logo,
html[data-ui="arcade"] .room-code { text-shadow: 0 0 12px currentColor; }
html[data-ui="arcade"] .online-table { background-image: repeating-linear-gradient(0deg, transparent 0 3px, rgba(114,241,184,.05) 3px 4px); }
html[data-ui="arcade"] .playing-card.selected { box-shadow: 0 0 0 2px var(--online-accent), 0 0 24px var(--online-danger); }

html[data-ui="atelier"] .online-intro { border-right: 1px solid rgba(235,231,218,.28); }
html[data-ui="atelier"] .online-intro h1 { font-weight: 400; line-height: .88; }
html[data-ui="atelier"] .online-intro h1 span { font-style: italic; }
html[data-ui="atelier"] .online-kicker,
html[data-ui="atelier"] .hand-heading,
html[data-ui="atelier"] .table-status { letter-spacing: .18em; text-transform: uppercase; }
html[data-ui="atelier"] .online-table { box-shadow: inset 0 0 0 1px rgba(235,231,218,.35); }
html[data-ui="atelier"] .playing-card.selected { border-bottom: 6px solid var(--online-danger); }

html[data-ui="zine"] .online-intro { transform: rotate(-.35deg) scale(1.01); }
html[data-ui="zine"] .online-intro h1 { text-transform: uppercase; text-shadow: 4px 2px 0 #111; }
html[data-ui="zine"] .lobby-card { transform: rotate(.6deg); }
html[data-ui="zine"] .playing-card:nth-child(3n+1) { transform: rotate(-1deg); }
html[data-ui="zine"] .playing-card:nth-child(3n+2) { transform: rotate(1.2deg); }
html[data-ui="zine"] .playing-card.selected { transform: translateY(-14px) rotate(-2deg); }
html[data-ui="zine"] .online-table { background-image: radial-gradient(circle at 30% 40%, rgba(255,255,255,.13) 0 1px, transparent 2px); background-size: 11px 13px; }

html[data-ui="toybox"] .online-intro,
html[data-ui="toybox"] .lobby-card,
html[data-ui="toybox"] .online-table,
html[data-ui="toybox"] .your-zone { transform: rotate(-.25deg); }
html[data-ui="toybox"] .online-intro h1 { font-weight: 700; text-shadow: 0 3px 0 rgba(0,0,0,.25); }
html[data-ui="toybox"] .online-entry label,
html[data-ui="toybox"] .or span { color: var(--online-light); }
html[data-ui="toybox"] .or { border-color: var(--online-light); }
html[data-ui="toybox"] .online-table { border-radius: 20px 28px 21px 26px; }
html[data-ui="toybox"] .playing-card { border-radius: 8px 12px 7px 10px; }
html[data-ui="toybox"] .playing-card::after { content: ""; position: absolute; inset: 5px; border: 1px dashed rgba(116,74,43,.36); border-radius: 4px 7px 4px 6px; pointer-events: none; }
html[data-ui="toybox"] .playing-card { position: relative; }
html[data-ui="toybox"] .playing-card.selected { transform: translateY(-15px) rotate(-1deg); box-shadow: 0 0 0 4px var(--online-accent), var(--online-shadow); }

@media (max-width: 720px) {
  .online-ui-switcher { top: 60px; right: 14px; }
  html[data-ui] .online-intro { min-width: 0; overflow: hidden; }
  html[data-ui] .online-intro h1 { max-width: 100%; font-size: clamp(3rem, 14vw, 5rem); letter-spacing: -.055em; }
  html[data-ui] .online-intro h1 b { display: block; }
  html[data-ui] .online-entry { min-width: 0; }
  html[data-ui="desktop"] .online-ui-switcher { top: auto; bottom: 54px; }
  html[data-ui="desktop"] .online-landing { grid-template-columns: 1fr; }
  html[data-ui="plain"] .online-intro { border-right: 0; border-bottom: var(--online-line); }
}

@media (prefers-reduced-motion: reduce) {
  html[data-ui] .playing-card { transition: none; }
}