/* Skins: the whole page in the player's theme (Family, Sci-Fi, Medieval, Pirate,
   Fantasy), chosen on their Fury Sting profile and set on <body data-skin> by
   skin.js. Colours and type are here; the pictures are /art/skins/<theme>-*.webp
   (background and panel textures, a frame corner, a divider), from
   games/docs/art-prompts/skins/. The same file in Bone Yard and the Back Room —
   change one, copy it to the other — and games.furysting.com has its own
   (public/css/skins.css) with the same palettes. Every picture fails soft: 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] .btn { background: linear-gradient(var(--btn-1), var(--btn-2)); }
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] .btn.danger { background: linear-gradient(#e0625d, #b23a36); color: #fff; border-color: #f2918d; }
body[data-skin] .btn.press { background: linear-gradient(#b14cff, #7b22c9); color: #fff; border-color: #d6a0ff; }
body[data-skin] .btn.ghost { background: transparent; }
body[data-skin] .modal-card, body[data-skin] .panel-card, body[data-skin] .slide {
  background: linear-gradient(var(--panel-shade), var(--panel-shade)), var(--skin-panel) center / 384px repeat, var(--panel-solid);
}
body[data-skin] .lobby-head, body[data-skin] .bottom-nav { background: linear-gradient(var(--panel-shade), var(--panel-shade)), var(--skin-panel) center / 384px repeat, var(--panel-solid); }

/* A corner ornament top left and, turned, bottom right of every pop-up and panel. */
body[data-skin] .modal-card::before, body[data-skin] .panel-card::before,
body[data-skin] .modal-card::after, body[data-skin] .panel-card::after {
  content: ''; position: absolute; width: 54px; height: 54px; pointer-events: none; z-index: 1;
  background: var(--skin-corner) center / contain no-repeat;
}
body[data-skin] .modal-card::before, body[data-skin] .panel-card::before { left: 4px; top: 4px; }
body[data-skin] .modal-card::after, body[data-skin] .panel-card::after { right: 4px; bottom: 4px; transform: rotate(180deg); }
body[data-skin] .modal-card > h2:first-of-type::after, body[data-skin] .panel-card > h2:first-of-type::after {
  content: ''; display: block; height: 22px; margin: 6px auto 0; max-width: 260px; background: var(--skin-divider) center / contain no-repeat;
}

/* --- the five ---------------------------------------------------------------------- */

body[data-skin="family"] {
  --skin-shade: rgba(10, 29, 20, 0.35); --panel-shade: rgba(23, 51, 31, 0.78);
  --btn-1: #2b4c38; --btn-2: #1d3a29;
  --skin-bg: url("/art/skins/family-background.webp"); --skin-panel: url("/art/skins/family-panel.webp");
  --skin-corner: url("/art/skins/family-corner.webp"); --skin-divider: url("/art/skins/family-divider.webp");
}
body[data-skin="scifi"] {
  --bg: #0b1220; --bg-2: #121c2e; --panel: rgba(18, 28, 46, 0.92); --panel-solid: #121c2e; --panel-line: rgba(79, 209, 232, 0.25);
  --ink: #e6f1ff; --ink-soft: #a9bdd6; --muted: #7f93ad; --gold: #4fd1e8; --gold-2: #8be8f7; --gold-ink: #04202a; --accent-rgb: 79, 209, 232;
  --display: "Exo 2", "Alfa Slab One", sans-serif;
  --skin-shade: rgba(11, 18, 32, 0.45); --panel-shade: rgba(18, 28, 46, 0.8);
  --btn-1: #1f3350; --btn-2: #142238;
  --skin-bg: url("/art/skins/scifi-background.webp"); --skin-panel: url("/art/skins/scifi-panel.webp");
  --skin-corner: url("/art/skins/scifi-corner.webp"); --skin-divider: url("/art/skins/scifi-divider.webp");
}
body[data-skin="medieval"] {
  --bg: #1d1610; --bg-2: #2a2017; --panel: rgba(42, 32, 23, 0.94); --panel-solid: #2a2017; --panel-line: rgba(201, 161, 74, 0.28);
  --ink: #f1e6cf; --ink-soft: #d4c3a3; --muted: #a8977a; --gold: #c9a14a; --gold-2: #e6c375; --gold-ink: #2a1b05; --red: #8e2a1e; --accent-rgb: 201, 161, 74;
  --display: "Cinzel", Georgia, serif;
  /* The sandstone panel is light; it is shaded hard so ivory text reads on it. */
  --skin-shade: rgba(29, 22, 16, 0.4); --panel-shade: rgba(36, 26, 17, 0.86);
  --btn-1: #4a3524; --btn-2: #33241a;
  --skin-bg: url("/art/skins/medieval-background.webp"); --skin-panel: url("/art/skins/medieval-panel.webp");
  --skin-corner: url("/art/skins/medieval-corner.webp"); --skin-divider: url("/art/skins/medieval-divider.webp");
}
body[data-skin="pirate"] {
  --bg: #0f1a22; --bg-2: #18242e; --panel: rgba(42, 29, 18, 0.94); --panel-solid: #2a1d12; --panel-line: rgba(212, 162, 76, 0.3);
  --ink: #f3e7cc; --ink-soft: #d7c6a3; --muted: #a49577; --gold: #d4a24c; --gold-2: #ecc477; --gold-ink: #2a1904; --red: #b8432e; --accent-rgb: 212, 162, 76;
  --display: "Pirata One", Georgia, serif;
  --skin-shade: rgba(15, 26, 34, 0.35); --panel-shade: rgba(36, 24, 14, 0.8);
  --btn-1: #3d2c1b; --btn-2: #2a1d12;
  --skin-bg: url("/art/skins/pirate-background.webp"); --skin-panel: url("/art/skins/pirate-panel.webp");
  --skin-corner: url("/art/skins/pirate-corner.webp"); --skin-divider: url("/art/skins/pirate-divider.webp");
}
body[data-skin="fantasy"] {
  --bg: #140f24; --bg-2: #1f1836; --panel: rgba(31, 24, 54, 0.94); --panel-solid: #1f1836; --panel-line: rgba(180, 140, 255, 0.28);
  --ink: #efe8ff; --ink-soft: #c8bde6; --muted: #9a8fbd; --gold: #b48cff; --gold-2: #d4bcff; --gold-ink: #1d0c3a; --accent-rgb: 180, 140, 255;
  --green: #3fd19a;
  --display: "Cinzel Decorative", "Cinzel", Georgia, serif;
  --skin-shade: rgba(20, 15, 36, 0.3); --panel-shade: rgba(31, 24, 54, 0.78);
  --btn-1: #34295a; --btn-2: #241c40;
  --skin-bg: url("/art/skins/fantasy-background.webp"); --skin-panel: url("/art/skins/fantasy-panel.webp");
  --skin-corner: url("/art/skins/fantasy-corner.webp"); --skin-divider: url("/art/skins/fantasy-divider.webp");
}