/* Skins: every page in the signed-in player's theme (config/themes.php), set on
   <body data-skin> by the layout; a guest wears Family. The same palettes as
   the games' public/css/skins.css (Bone Yard, the Back Room) — change them
   together. Pictures: public/images/skins/<theme>-*.webp, from
   docs/art-prompts/skins/; a missing one leaves the colours. */

body[data-skin] {
  background: linear-gradient(var(--skin-shade), var(--skin-shade)), var(--skin-bg) center / 512px repeat, var(--bg);
  background-attachment: fixed;
}
body[data-skin] .card, body[data-skin] .game, body[data-skin] .top {
  background: linear-gradient(var(--panel-shade), var(--panel-shade)), var(--skin-panel) center / 384px repeat, var(--panel);
}
body[data-skin] .btn.gold { background: linear-gradient(var(--gold-2), var(--gold)); color: var(--gold-ink); border-color: var(--gold-2); }
body[data-skin] .card { position: relative; }
body[data-skin] .card::before, body[data-skin] .card::after {
  content: ''; position: absolute; width: 54px; height: 54px; pointer-events: none;
  background: var(--skin-corner) center / contain no-repeat;
}
body[data-skin] .card::before { left: 4px; top: 4px; }
body[data-skin] .card::after { right: 4px; bottom: 4px; transform: rotate(180deg); }
body[data-skin] h1, body[data-skin] h2 { font-family: var(--display); }

body[data-skin="family"] {
  --gold-ink: #3a2400; --display: Georgia, "Times New Roman", serif;
  --skin-shade: rgba(14, 26, 20, 0.35); --panel-shade: rgba(21, 38, 29, 0.8);
  --skin-bg: url("/images/skins/family-background.webp"); --skin-panel: url("/images/skins/family-panel.webp"); --skin-corner: url("/images/skins/family-corner.webp");
}
body[data-skin="scifi"] {
  --bg: #0b1220; --panel: #121c2e; --line: rgba(79, 209, 232, 0.25); --ink: #e6f1ff; --soft: #a9bdd6; --muted: #7f93ad;
  --gold: #4fd1e8; --gold-2: #8be8f7; --gold-ink: #04202a; --display: "Exo 2", sans-serif;
  --skin-shade: rgba(11, 18, 32, 0.45); --panel-shade: rgba(18, 28, 46, 0.8);
  --skin-bg: url("/images/skins/scifi-background.webp"); --skin-panel: url("/images/skins/scifi-panel.webp"); --skin-corner: url("/images/skins/scifi-corner.webp");
}
body[data-skin="medieval"] {
  --bg: #1d1610; --panel: #2a2017; --line: rgba(201, 161, 74, 0.28); --ink: #f1e6cf; --soft: #d4c3a3; --muted: #a8977a;
  --gold: #c9a14a; --gold-2: #e6c375; --gold-ink: #2a1b05; --red: #8e2a1e; --display: "Cinzel", Georgia, serif;
  --skin-shade: rgba(29, 22, 16, 0.4); --panel-shade: rgba(36, 26, 17, 0.86);
  --skin-bg: url("/images/skins/medieval-background.webp"); --skin-panel: url("/images/skins/medieval-panel.webp"); --skin-corner: url("/images/skins/medieval-corner.webp");
}
body[data-skin="pirate"] {
  --bg: #0f1a22; --panel: #2a1d12; --line: rgba(212, 162, 76, 0.3); --ink: #f3e7cc; --soft: #d7c6a3; --muted: #a49577;
  --gold: #d4a24c; --gold-2: #ecc477; --gold-ink: #2a1904; --red: #b8432e; --display: "Pirata One", Georgia, serif;
  --skin-shade: rgba(15, 26, 34, 0.35); --panel-shade: rgba(36, 24, 14, 0.8);
  --skin-bg: url("/images/skins/pirate-background.webp"); --skin-panel: url("/images/skins/pirate-panel.webp"); --skin-corner: url("/images/skins/pirate-corner.webp");
}
body[data-skin="fantasy"] {
  --bg: #140f24; --panel: #1f1836; --line: rgba(180, 140, 255, 0.28); --ink: #efe8ff; --soft: #c8bde6; --muted: #9a8fbd;
  --gold: #b48cff; --gold-2: #d4bcff; --gold-ink: #1d0c3a; --display: "Cinzel Decorative", "Cinzel", Georgia, serif;
  --skin-shade: rgba(20, 15, 36, 0.3); --panel-shade: rgba(31, 24, 54, 0.78);
  --skin-bg: url("/images/skins/fantasy-background.webp"); --skin-panel: url("/images/skins/fantasy-panel.webp"); --skin-corner: url("/images/skins/fantasy-corner.webp");
}