/* =====================================================================
   skin-western.css — WO-471 SKIN 1: WESTERN (pair-01, Jason's original)
   Every rule is scoped to html[data-skin="western"], so this file is inert
   (and its art is never fetched) unless the saved skin is Western.

   Art layers (cut from Jason's pair-01 renders, never stretched — each
   art box carries the plate's own aspect ratio):
     world-day.webp    the world band of the home render, signs BLANKED
                       (every baked word removed: docs/wo471-western/cut.py); the
                       real place names are HTML text laid on those signs.
     login-scene.webp  the lake / farm / house / gate band of the login
                       render, cut below all baked titles, above the
                       baked keypad card.
   Sky, panels, buttons, keypad, signs: CSS materials sampled from the
   renders (cream signboards, brown wood, gold, day sky / sunset sky).
   Movement (WO-485 motion law — real layers, transform/opacity only; see the
   "movement" block): running water (river, waterfall, stream strips cut from
   the render, seen through a top plate), the waterwheel turning, foam,
   glints, chimney smoke; on the login the windmill turns, the lake glints,
   birds cross, the house chimney smokes. Reduced motion: still.
   ===================================================================== */

html[data-skin="western"] {
  --apex-bg: #8fd0f4;
  --apex-bg-2: #cfe9c0;
  --apex-panel: #fbf1d8;
  --apex-panel-edge: #8a5a2b;
  --apex-blue: #2f78b7;
  --apex-purple: #8a5a2b;
  --apex-yellow: #a8660f;          /* accent TEXT on cream: amber-brown */
  --apex-cyan: #1f6f8b;            /* links / sub-heads: river teal */
  --apex-text: #3b2412;
  --apex-text-dim: #7a5a3a;
  --apex-ok: #2e7d32;
  --apex-warn: #b26a00;
  --apex-danger: #c62828;
  --apex-offline: #8a7a66;
  --apex-line: rgba(107, 63, 31, .25);
  --sheet-solid: #fbf1d8;
  --w-gold: #f5c542;
  --w-gold-deep: #d99a1e;
  --w-wood: #7a4a24;
  --w-wood-dark: #4a2a12;
  --w-cream: #fbf1d8;
  --w-cream-2: #f3e2bb;
  --w-ink: #3b2412;
  --w-sign-font: "Rockwell", "Roboto Slab", "Zilla Slab", "Arvo", "Georgia", serif;
  --font-display: var(--w-sign-font);
  --panel-clip: none;
  --radius: 14px;
  --shadow: 0 6px 16px rgba(74, 42, 18, .22), 0 0 0 1px rgba(122, 74, 36, .25);
  --sitenav-bar: #fbf1d8;
  --sitenav-edge: #8a5a2b;
  --sitenav-lit: #3b2412;
  --sitenav-pill: #f5c542;
  --crew-body: #b5442a; --crew-head: #8a5a2b; --crew-legs: #3e2a1a;   /* ranch hands */
  color-scheme: light;
}

/* ---------- page backdrop: day sky over meadow ------------------------ */
html[data-skin="western"] body {
  color: var(--w-ink);
  background:
    radial-gradient(120px 46px at 18% 70px, rgba(255, 255, 255, .95), rgba(255, 255, 255, 0) 70%),
    radial-gradient(160px 54px at 82% 120px, rgba(255, 255, 255, .9), rgba(255, 255, 255, 0) 70%),
    linear-gradient(180deg, #4fa9e6 0, #8fd0f4 260px, #cfe9c0 520px, #e9f2d2 100%) fixed;
}
/* the arena ornaments of the default look do not belong in this world */
html[data-skin="western"] .arena,
html[data-skin="western"] .candles,
html[data-skin="western"] .rocket { display: none !important; }

/* ---------- panels, cards, popups: cream signboard + wood edge -------- */
html[data-skin="western"] .panel,
html[data-skin="western"] .apex-panel,
html[data-skin="western"] .subcard {
  background: linear-gradient(180deg, #fdf6e3, var(--w-cream) 40%, var(--w-cream-2));
  border: 3px solid var(--w-wood);
  border-radius: 16px;
  clip-path: none;
  box-shadow: 0 4px 0 var(--w-wood-dark), 0 10px 22px rgba(74, 42, 18, .25);
  color: var(--w-ink);
}
html[data-skin="western"] .apex-panel::before { display: none; }
html[data-skin="western"] .panel__head { border-bottom: 2px dashed rgba(122, 74, 36, .45); }
html[data-skin="western"] .panel__title,
html[data-skin="western"] .stopsheet__title { font-family: var(--w-sign-font); font-weight: 900; color: var(--w-ink); }
html[data-skin="western"] .subhead { color: var(--w-wood); }
html[data-skin="western"] a { color: #1f5f7a; }

html[data-skin="western"] .acctrow,
html[data-skin="western"] .worldrow,
html[data-skin="western"] .skinpick__row,
html[data-skin="western"] .bell__item {
  background: #fffaf0; border: 2px solid rgba(122, 74, 36, .45); color: var(--w-ink);
}
html[data-skin="western"] .bell__item { border-left: 4px solid var(--apex-warn); }
html[data-skin="western"] .soon { background: #fff4d6; border-color: var(--w-gold-deep); }

/* ---------- buttons: wood + gold, like the render's pills ------------- */
html[data-skin="western"] .btn,
html[data-skin="western"] .apex-btn {
  background: linear-gradient(180deg, #8a5630, var(--w-wood) 55%, #6a3d1b);
  color: #fff6e0; border: 2px solid var(--w-wood-dark); border-radius: 12px;
  box-shadow: 0 3px 0 var(--w-wood-dark); clip-path: none; text-shadow: 0 1px 0 rgba(0, 0, 0, .35);
}
html[data-skin="western"] .btn--primary,
html[data-skin="western"] .apex-btn--primary {
  background: linear-gradient(180deg, #ffe07a, var(--w-gold) 55%, var(--w-gold-deep));
  color: var(--w-ink); border-color: #9a6a12; box-shadow: 0 3px 0 #9a6a12; text-shadow: none;
}
html[data-skin="western"] .btn--ghost,
html[data-skin="western"] .apex-btn--ghost {
  background: var(--w-cream); color: var(--w-ink); border-color: var(--w-wood); box-shadow: 0 2px 0 var(--w-wood); text-shadow: none;
}
html[data-skin="western"] .stopfilter__chip { background: var(--w-cream); color: var(--w-ink); border: 2px solid var(--w-wood); }
html[data-skin="western"] .stopfilter__chip.is-on { background: var(--w-gold); color: var(--w-ink); border-color: #9a6a12; }
html[data-skin="western"] input, html[data-skin="western"] select, html[data-skin="western"] textarea {
  background: #fffaf0; color: var(--w-ink); border: 2px solid var(--w-wood); border-radius: 10px;
}

/* ---------- top bar: sits on the sky; cream pills with dark edge ------ */
html[data-skin="western"] .topbar2 { background: transparent; }
html[data-skin="western"] .profile__btn,
html[data-skin="western"] .bell__btn,
html[data-skin="western"] .gear {
  /* border WIDTH stays the default's 1px (controls keep Original's boxes);
     the heavier wood rim is an inset shadow */
  background: var(--w-cream); color: var(--w-ink); border: 1px solid var(--w-wood-dark);
  box-shadow: inset 0 0 0 1px var(--w-wood-dark), 0 2px 0 var(--w-wood-dark);
}
html[data-skin="western"] .acctbox {
  background: var(--w-cream); color: var(--w-ink); border: 1px solid var(--w-wood-dark); border-radius: 14px;
  box-shadow: inset 0 0 0 1px var(--w-wood-dark), 0 2px 0 var(--w-wood-dark);
}
html[data-skin="western"] .acctbox__stop { color: var(--w-ink); font-weight: 800; }
html[data-skin="western"] .profile__panel,
html[data-skin="western"] .bell__panel,
html[data-skin="western"] .appmenu__panel,
html[data-skin="western"] details > .appmenu__list {
  background: var(--w-cream); color: var(--w-ink); border: 2px solid var(--w-wood-dark); border-radius: 14px;
}
html[data-skin="western"] .modepill[data-mode="live"] { background: #fde3e3; }
html[data-skin="western"] .modepill[data-mode="demo"] { background: #e3f4e3; }
html[data-skin="western"] .bookline__label { background: #fffaf0; }

/* ---------- the floating bottom bar: cream board, gold active pill ---- */
@media (max-width: 768px) {
  html[data-skin="western"] .sitenav--tabs {
    /* 1px border like the default (same bar box); the 3px wood rim is inset */
    background: var(--w-cream); border: 1px solid var(--w-wood-dark); border-radius: 22px;
    box-shadow: inset 0 0 0 2px var(--w-wood-dark), 0 4px 0 var(--w-wood-dark), 0 12px 26px rgba(74, 42, 18, .35);
  }
  html[data-skin="western"] .sitenav--tabs .sitenav__item { color: var(--w-ink); font-weight: 800; }
  html[data-skin="western"] .sitenav--tabs .sitenav__item.is-active .sitenav__glyph {
    background: var(--w-gold); box-shadow: inset 0 0 0 2px #9a6a12;
  }
}
html[data-skin="western"] .sitenav--side { background: var(--w-cream); border-right: 3px solid var(--w-wood); }
html[data-skin="western"] .sitenav__item { color: var(--w-ink); }

/* ---------- the world: one art plate, places laid on its buildings ---- */
html[data-skin="western"] .panel.world {
  background: transparent; border: 0; box-shadow: none; border-radius: 0;
}
html[data-skin="western"] .world__map {
  display: block; position: relative;
  width: 100%; max-width: 620px; margin: 0 auto;
  aspect-ratio: 1320 / 2160; min-height: 0; padding: 0;
  container-type: inline-size;
  background: #6fae4c url("../img/skins/western/world-day.webp") center / cover no-repeat;
  border-radius: 18px; border: 3px solid var(--w-wood-dark);
  box-shadow: 0 4px 0 var(--w-wood-dark);
  overflow: hidden;
}
html[data-skin="western"] .world__road { display: none; }

/* places become hotspots over their buildings (all %, of the plate) */
html[data-skin="western"] .place {
  position: absolute; display: block; padding: 0; min-height: 0;
  background: transparent; border: 0; border-radius: 12px; box-shadow: none; color: var(--w-ink);
  transform-origin: 50% 60%;
}
html[data-skin="western"] .place.is-zoomed {
  transform: scale(1.06); border: 0;
  box-shadow: 0 0 0 3px rgba(245, 197, 66, .9), 0 0 26px rgba(255, 236, 160, .75);
}
html[data-skin="western"] .place__art {
  position: absolute; width: auto; height: auto; border-radius: 10px; background: none;
}
/* name = real text on the blanked signboard */
html[data-skin="western"] .place__name {
  position: absolute; display: flex; align-items: center; justify-content: center;
  font-family: var(--w-sign-font); font-weight: 900; text-transform: uppercase;
  letter-spacing: .01em; line-height: 1; white-space: nowrap; color: var(--w-ink);
  font-size: 3.5cqw;
}
/* sub = live line on a small hanging tag (the render's second sign) */
html[data-skin="western"] .place__sub {
  position: absolute; left: 50%; transform: translateX(-50%);
  white-space: nowrap; font-size: max(10px, 2.5cqw); font-weight: 700; line-height: 1.2;
  padding: .12rem .5rem; border-radius: 999px;
  background: #fffaf0; color: var(--w-ink); border: 2px solid var(--w-wood-dark);
  box-shadow: 0 2px 0 var(--w-wood-dark);
}

/* Prop Farm — red barn + silo, signboard in the field */
html[data-skin="western"] .place--prop  { left: 3%;  top: 0;    width: 53%; height: 21%; }
html[data-skin="western"] .place--prop .place__art  { left: 8.7%; top: 0; width: 85.7%; height: 66%; }
html[data-skin="western"] .place--prop .place__name { left: 14.9%; top: 70.5%; width: 56.6%; height: 21.4%; font-size: 3.7cqw; }
html[data-skin="western"] .place--prop .place__sub  { left: 43%; top: 96%; }

/* Forex Factory — brick factory on the river, cream sign + small sign */
html[data-skin="western"] .place--forex { left: 48%; top: 28%; width: 50%; height: 26%; }
html[data-skin="western"] .place--forex .place__art  { left: 2%; top: 4%; width: 88%; height: 34%; }
html[data-skin="western"] .place--forex .place__name { left: 24.6%; top: 40%; width: 61.8%; height: 18%; font-size: 2.85cqw; }
html[data-skin="western"] .place--forex .place__sub  { left: 55%; top: 56%; }

/* Plexy Market — striped awnings, cream arch sign + pill */
html[data-skin="western"] .place--plexy { left: 4%; top: 56%; width: 76%; height: 31%; }
html[data-skin="western"] .place--plexy .place__art  { left: 0; top: 42%; width: 100%; height: 56%; }
html[data-skin="western"] .place--plexy .place__name { left: 24.6%; top: 16.5%; width: 42.8%; height: 10.6%; font-size: 3.3cqw; }
html[data-skin="western"] .place--plexy .place__sub  { left: 50%; top: 27.5%; }

/* the agents' place (admin only) — the far-shore town under the hills */
html[data-skin="western"] .place--agents { left: 76%; top: 2.5%; width: 23%; height: 12%; }
html[data-skin="western"] .place--agents .place__art  { left: 0; top: 10%; width: 100%; height: 55%; }
html[data-skin="western"] .place--agents .place__name {
  left: 50%; top: 66%; transform: translateX(-50%); width: auto; padding: .1rem .4rem;
  font-size: 2.4cqw; background: var(--w-cream); border: 2px solid var(--w-wood-dark); border-radius: 6px;
}
html[data-skin="western"] .place--agents .place__sub { left: 50%; top: 92%; font-size: max(9px, 2.1cqw); }
html[data-skin="western"] .crew { height: 40%; }

/* plexy status sign: a wooden board */
html[data-skin="western"] .worldsign {
  right: 3%; bottom: 2.5%;
  background: linear-gradient(180deg, #8a5630, var(--w-wood)); color: #fff6e0;
  border: 2px solid var(--w-wood-dark); border-radius: 8px; box-shadow: 0 2px 0 var(--w-wood-dark);
}
html[data-skin="western"] .worldsign[data-state="ok"] .worldsign__icon { background: #7ee07e; }
html[data-skin="western"] .worldsign[data-state="warn"] .worldsign__icon { background: #ffc94a; }

/* ---------- movement (WO-485 amendment 2, motion law) --------------------
   Real element layers, cut from Jason's render by docs/wo471-western/cut.py
   + motion.py (numbers: docs/wo485-western/layers.json). Every animation is
   transform / opacity only — no background-position, no filter, no warp of
   the plate. Stack inside the world box (its own stacking context):
     plate (world-day.webp, the wheel's old spokes infilled)
     -1  river + stream strips, the turning waterwheel, lake glints
      0  top plate (world-top.webp) = the plate again with the WATER and the
         wheel's face cut out, so the strips show only through real water
         and the wheel turns behind the post / axle beam / stone pier
      1  places (labels) carrying the sprites: waterfall frames, smoke,
         foam, glints
   Nothing is in front of a label; the labels and controls never move. */
html[data-skin="western"] .world__map { isolation: isolate; }
html[data-skin="western"] .world__road {
  display: block; position: absolute; inset: 0; z-index: auto;
  width: auto; height: auto; margin: 0; border-radius: 0; opacity: 1;
  background: url("../img/skins/western/world-top.webp") right bottom / 85.5303% 60.9259% no-repeat;
  pointer-events: none;
}
html[data-skin="western"] .world__map::before,
html[data-skin="western"] .world__map::after,
html[data-skin="western"] .world__road::before,
html[data-skin="western"] .world__road::after {
  content: ""; position: absolute; z-index: -1; pointer-events: none;
  background-position: 0 0; background-size: 100% 100%; background-repeat: no-repeat;
  will-change: transform;
}
/* the river (pool below the falls, running down-left past the factory) —
   a strip of the river's own water laid along the flow; it slides one
   period (half its length) and repeats seamlessly */
html[data-skin="western"] .world__map::before {
  left: 64.9201%; top: 53.2639%; width: 69.5455%; height: 17.1759%;
  background-image: url("../img/skins/western/water-river.webp");
  transform-origin: 24.7336% 50%;
  transform: rotate(-28.106deg);
  animation: w-river 16s linear infinite;
}
@keyframes w-river {
  from { transform: rotate(-28.106deg) translateX(0); }
  to   { transform: rotate(-28.106deg) translateX(-50%); }
}
/* sun glints on the far lake (outside the top plate, so on the plate
   itself): twinkle and drift with the ripples */
html[data-skin="western"] .world__road::before {
  left: 76.5152%; top: 13.7037%; width: 22.7273%; height: 3.5185%;
  background:
    radial-gradient(closest-side, rgba(255, 255, 255, .9), rgba(255, 255, 255, 0)) 6% 30% / 9% 16% no-repeat,
    radial-gradient(closest-side, rgba(255, 255, 255, .8), rgba(255, 255, 255, 0)) 30% 64% / 7% 12% no-repeat,
    radial-gradient(closest-side, rgba(255, 255, 255, .9), rgba(255, 255, 255, 0)) 52% 26% / 10% 14% no-repeat,
    radial-gradient(closest-side, rgba(255, 255, 255, .75), rgba(255, 255, 255, 0)) 74% 70% / 8% 12% no-repeat,
    radial-gradient(closest-side, rgba(255, 255, 255, .85), rgba(255, 255, 255, 0)) 94% 40% / 7% 14% no-repeat;
  will-change: transform, opacity;
  animation: w-glint-lake 3.4s ease-in-out infinite alternate;
}
/* the stream under the two stone bridges */
html[data-skin="western"] .world__road::after {
  left: 61.1667%; top: 74.213%; width: 90.303%; height: 28.7963%;
  background-image: url("../img/skins/western/water-stream.webp");
  transform-origin: 24.7986% 50%;
  transform: rotate(-34.804deg);
  animation: w-stream 17s linear infinite;
}
@keyframes w-stream {
  from { transform: rotate(-34.804deg) translateX(0); }
  to   { transform: rotate(-34.804deg) translateX(-50%); }
}
/* the waterwheel: its face, cut and rebuilt round from its own 8 spokes,
   turns about the hub; scaleX(rx/ry) puts it back in the render's
   foreshortening, so it turns IN that perspective. Clockwise — the falls
   pour down its right side. */
html[data-skin="western"] .world__map::after {
  left: 77.5379%; top: 48.4722%; width: 11.9697%; height: 7.3148%;
  background-image: url("../img/skins/western/wheel.webp");
  transform-origin: 50% 50%;
  transform: scaleX(.8421) rotate(0deg);
  animation: w-wheel 14s linear infinite;
}
@keyframes w-wheel {
  from { transform: scaleX(.8421) rotate(0deg); }
  to   { transform: scaleX(.8421) rotate(360deg); }
}

/* sprites on top of the top plate. They ride on the place hotspots' (and
   their decorative art boxes') pseudo-elements, positioned in % of those
   boxes so they land on the plate; pointer-events none, labels untouched. */
html[data-skin="western"] .place__art { overflow: visible; }
html[data-skin="western"] .place::before,
html[data-skin="western"] .place::after,
html[data-skin="western"] .place__art::before,
html[data-skin="western"] .place__art::after {
  content: ""; position: absolute; pointer-events: none; opacity: 0;
  background-repeat: no-repeat; will-change: transform, opacity;
}

/* chimney smoke: 3 puffs per stack, staggered, rising and drifting with the
   render's own plume (up and to the right). Stack 1 = left chimney. */
html[data-skin="western"] .place--forex::before,
html[data-skin="western"] .place--forex::after,
html[data-skin="western"] .place--forex .place__art::before,
html[data-skin="western"] .place--forex .place__art::after,
html[data-skin="western"] .place--prop::before,
html[data-skin="western"] .place--prop::after {
  border-radius: 50%;
  background: radial-gradient(circle at 42% 40%, rgba(255, 255, 255, .95), rgba(242, 242, 240, .65) 52%, rgba(255, 255, 255, 0) 71%);
  animation: w-smoke 5.4s ease-out infinite;
}
html[data-skin="western"] .place--forex::before { left: 71.879%; top: -10.47%; width: 9.697%; height: 11.396%; }
html[data-skin="western"] .place--forex::after  { left: 71.879%; top: -10.47%; width: 9.697%; height: 11.396%; animation-delay: -1.8s; }
html[data-skin="western"] .place--forex .place__art::before { left: 79.408%; top: -42.559%; width: 11.019%; height: 33.518%; animation-delay: -3.6s; }
/* stack 2 = right chimney */
html[data-skin="western"] .place--forex .place__art::after { left: 95.592%; top: -24.753%; width: 11.019%; height: 33.518%; animation-delay: -.9s; }
html[data-skin="western"] .place--prop::before { left: 166.152%; top: 127.866%; width: 9.148%; height: 14.109%; animation-delay: -2.7s; }
html[data-skin="western"] .place--prop::after  { left: 166.152%; top: 127.866%; width: 9.148%; height: 14.109%; animation-delay: -4.5s; }
@keyframes w-smoke {
  0%   { transform: translate(0, 0) scale(.45); opacity: 0; }
  14%  { opacity: .85; }
  100% { transform: translate(45%, -240%) scale(1.9); opacity: 0; }
}

/* sun glints riding the river downstream (two, staggered) */
html[data-skin="western"] .place--plexy::before,
html[data-skin="western"] .place--plexy::after {
  background:
    radial-gradient(closest-side, rgba(255, 255, 255, .95), rgba(255, 255, 255, 0)) 8% 30% / 24% 34% no-repeat,
    radial-gradient(closest-side, rgba(255, 255, 255, .85), rgba(230, 248, 255, 0)) 52% 72% / 16% 26% no-repeat,
    radial-gradient(closest-side, rgba(255, 255, 255, .9), rgba(255, 255, 255, 0)) 88% 22% / 12% 22% no-repeat;
  animation: w-glint-river 3.6s ease-in-out infinite;
}
html[data-skin="western"] .place--plexy::before { left: 109.37%; top: 7.826%; width: 13.955%; height: 5.974%; }
html[data-skin="western"] .place--plexy::after  { left: 98.405%; top: 12.007%; width: 13.955%; height: 5.974%; animation-delay: -1.8s; }
@keyframes w-glint-river {
  0%   { transform: translate(0, 0); opacity: 0; }
  35%  { opacity: .95; }
  100% { transform: translate(-85.7%, 160%); opacity: 0; }
}
/* foam at the foot of the falls — the render's own splash, cut as a sprite,
   churning (scale + opacity) */
html[data-skin="western"] .place--plexy .place__art::before {
  left: 111.962%; top: -78.627%; width: 12.959%; height: 17.601%;
  background: url("../img/skins/western/foam-falls.webp") 0 0 / 100% 100% no-repeat;
  transform-origin: 50% 70%;
  animation: w-foam 1.3s ease-in-out infinite;
}
@keyframes w-foam {
  0%, 100% { transform: scale(.96); opacity: .5; }
  50%      { transform: scale(1.05); opacity: 1; }
}
/* glints down the stream */
html[data-skin="western"] .place--plexy .place__art::after {
  left: 110.367%; top: 53.115%; width: 11.962%; height: 10.667%;
  background:
    radial-gradient(closest-side, rgba(255, 255, 255, .95), rgba(255, 255, 255, 0)) 12% 40% / 26% 36% no-repeat,
    radial-gradient(closest-side, rgba(255, 255, 255, .85), rgba(230, 248, 255, 0)) 70% 70% / 18% 28% no-repeat;
  animation: w-glint-stream 4.2s ease-in-out -1s infinite;
}
@keyframes w-glint-stream {
  0%   { transform: translate(0, 0); opacity: 0; }
  35%  { opacity: .9; }
  100% { transform: translate(-75%, 157%); opacity: 0; }
}
/* the waterfall beside the wheel: two frames of its OWN water (cut to the
   falls' shape, at half a period apart along its flow) slide down and
   cross-fade — the falls pours; the plate's falls stays underneath */
html[data-skin="western"] .place--prop .place__art::before,
html[data-skin="western"] .place--prop .place__art::after {
  left: 177.72%; top: 355.072%; width: 23.351%; height: 59.791%;
  background: url("../img/skins/western/falls-0.webp") 0 0 / 100% 100% no-repeat;
  animation: w-falls 1.2s linear infinite;
}
html[data-skin="western"] .place--prop .place__art::after {
  background-image: url("../img/skins/western/falls-1.webp");
  animation-delay: -.6s;
}
@keyframes w-falls {
  0%   { transform: translateY(-5%); opacity: 0; }
  50%  { opacity: 1; }
  100% { transform: translateY(5%); opacity: 0; }
}
@keyframes w-glint-lake {
  0%   { transform: translateX(0); opacity: .15; }
  50%  { opacity: .9; }
  100% { transform: translateX(5%); opacity: .3; }
}

/* ---------- the travel object: the Western bike ----------------------- */
html[data-skin="western"] .traveller {
  left: -20px; top: -14px; width: 40px; height: 28px; border-radius: 0;
  box-shadow: none; filter: drop-shadow(0 2px 2px rgba(0, 0, 0, .45));
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 28'%3E%3Cg fill='none' stroke='%233b2412' stroke-width='2.6'%3E%3Ccircle cx='9' cy='19' r='7' fill='%23fbf1d8'/%3E%3Ccircle cx='31' cy='19' r='7' fill='%23fbf1d8'/%3E%3C/g%3E%3Cg fill='none' stroke='%23b5442a' stroke-width='2.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 19 16 9h12l3 10M16 9l5 10h-12M21 19 28 9'/%3E%3Cpath d='M28 9l-1-4h4'/%3E%3C/g%3E%3Cpath d='M13 7h6' stroke='%233b2412' stroke-width='3' stroke-linecap='round'/%3E%3Ccircle cx='21' cy='19' r='2' fill='%23f5c542'/%3E%3C/svg%3E") center / contain no-repeat;
}

/* ---------- summary sheet: solid cream, wood frame -------------------- */
html[data-skin="western"] .stopsheet {
  background: var(--sheet-solid); background-image: none;
  border: 3px solid var(--w-wood-dark); border-radius: 18px; color: var(--w-ink);
  box-shadow: 0 5px 0 var(--w-wood-dark);
}
html[data-skin="western"] .stopsheet::backdrop { background: rgba(40, 24, 10, .7); }

/* ---------- login: sunset sky, the lake-farm-gate scene, wood keypad --
   Titles sit on clean sunset sky (CSS, colours sampled from the render);
   the cut scene band sits directly above the Member Access card, as in the
   render; the card is a cream board with a brown wood keypad. */
html[data-skin="western"] body.page-login {
  background:
    radial-gradient(80px 80px at 84% 250px, #fff7b0 0, #fdf37c 40%, rgba(253, 174, 48, 0) 75%) no-repeat,
    linear-gradient(180deg, #3d3484 0, #6b4aa0 140px, #9061af 260px, #d8607e 420px, #fc6d51 560px,
                    #fd8f3e 700px, #fdae30 860px, #f0a169 1000px, #d9a05a 1300px, #8f8a3a 1700px, #5b7a2c 100%);
}
html[data-skin="western"] .page-login .ticker {
  background: var(--w-cream); color: var(--w-ink); border-bottom: 3px solid var(--w-wood-dark);
  backdrop-filter: none; -webkit-backdrop-filter: none;
}
html[data-skin="western"] .page-login .brand__text strong { color: #ffe27a; text-shadow: 0 2px 0 #7a3e0e; font-family: var(--w-sign-font); }
html[data-skin="western"] .page-login .brand__text em { color: #fff3d6; text-shadow: 0 1px 2px rgba(60, 20, 0, .7); }
html[data-skin="western"] .page-login .pitch__title,
html[data-skin="western"] .page-login .pitch__title-hero,
html[data-skin="western"] .page-login .pitch__title-lead {
  font-family: var(--w-sign-font); color: #ffe27a; filter: none;
  text-shadow: 0 2px 0 #7a3e0e, 0 4px 10px rgba(60, 20, 0, .55);
  -webkit-text-fill-color: #ffe27a; background: none;
}
html[data-skin="western"] .page-login .pitch__eyebrow,
html[data-skin="western"] .page-login .pitch__lead,
html[data-skin="western"] .page-login .pitch__body { color: #fff8e6; text-shadow: 0 1px 3px rgba(60, 20, 0, .8); }
html[data-skin="western"] .page-login .pitch__lead strong,
html[data-skin="western"] .page-login .pitch__body strong { color: #ffe27a; }
html[data-skin="western"] .page-login .perk.apex-panel,
html[data-skin="western"] .page-login .quote.apex-panel { filter: none; }
html[data-skin="western"] .page-login .perk h2 { color: var(--w-wood); font-family: var(--w-sign-font); }
html[data-skin="western"] .page-login .perk p,
html[data-skin="western"] .page-login .quote { color: var(--w-ink); }

/* the scene band, right above the card */
html[data-skin="western"] .page-login .gate { position: relative; padding-top: 230px; }
html[data-skin="western"] .page-login .gate::before {
  content: ""; position: absolute; top: 0; left: 50%; transform: translateX(-50%);
  width: min(100vw, 760px); height: 260px; z-index: 0; pointer-events: none;
  background: url("../img/skins/western/login-scene.webp") center / cover no-repeat;
  -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 22%, #000 100%);
  mask-image: linear-gradient(180deg, transparent 0, #000 22%, #000 100%);
}
html[data-skin="western"] .page-login .gate > * { position: relative; z-index: 1; }

/* ---------- login movement (WO-485 motion law) ------------------------------
   The scene band is drawn "cover" in a min(100vw,760px) x 260px box centred
   on the gate; --wu is that cover scale (CSS px per render px), so a sprite at
   render point (X,Y) of the 1320x532 band sits at
     left: 50% + (X-660)*wu,   top: 130px + (Y-266)*wu   (gate coordinates).
   Hosts: .gate::after (windmill rotor), and the access card's own
   decorative pseudo-elements, offset back up into the scene (the card's
   padding box starts 234px below the gate top: 230px band + 4px border).
   The card, keypad, words never move. */
html[data-skin="western"] .page-login .gate { --wu: max(calc(min(100vw, 760px) / 1320), calc(260px / 532)); }
/* the windmill's 18-blade rotor, cut from the render as a disc, turning */
html[data-skin="western"] .page-login .gate::after {
  content: ""; position: absolute; z-index: 0; pointer-events: none;
  left: calc(50% + (398 - 660) * var(--wu)); top: calc(130px + (55 - 266) * var(--wu));
  width: calc(68 * var(--wu)); height: calc(68 * var(--wu));
  background: url("../img/skins/western/rotor.webp") 0 0 / 100% 100% no-repeat;
  transform-origin: 50.74% 49.63%;
  animation: w-rotor 8s linear infinite; will-change: transform;
}
@keyframes w-rotor { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }
html[data-skin="western"] .page-login .login.apex-panel::before,
html[data-skin="western"] .page-login .login.apex-panel::after,
html[data-skin="western"] .page-login .login .apex-panel__head::before {
  content: ""; display: block; position: absolute; inset: auto; z-index: 0; pointer-events: none;
  clip-path: none; background-repeat: no-repeat; will-change: transform, opacity;
}
/* sun glints on the lake below the far shore: twinkle and drift with the ripples */
html[data-skin="western"] .page-login .login.apex-panel::before {
  left: calc(50% + (500 - 660) * var(--wu)); top: calc(130px - 234px + (68 - 266) * var(--wu));
  width: calc(440 * var(--wu)); height: calc(44 * var(--wu));
  background:
    radial-gradient(closest-side, rgba(255, 246, 214, .95), rgba(255, 240, 200, 0)) 4% 40% / 6% 30% no-repeat,
    radial-gradient(closest-side, rgba(255, 246, 214, .85), rgba(255, 240, 200, 0)) 26% 70% / 5% 24% no-repeat,
    radial-gradient(closest-side, rgba(255, 246, 214, .9), rgba(255, 240, 200, 0)) 49% 34% / 7% 28% no-repeat,
    radial-gradient(closest-side, rgba(255, 246, 214, .8), rgba(255, 240, 200, 0)) 71% 66% / 5% 24% no-repeat,
    radial-gradient(closest-side, rgba(255, 246, 214, .9), rgba(255, 240, 200, 0)) 93% 42% / 6% 28% no-repeat;
  animation: w-glint-lake 3.2s ease-in-out infinite alternate;
}
/* three birds gliding across the evening sky above the scene */
html[data-skin="western"] .page-login .login.apex-panel::after {
  left: calc(50% - min(50vw, 380px)); top: calc(-234px + 6px);
  width: 54px; height: 22px; opacity: 0;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 54 22'%3E%3Cg fill='none' stroke='%233b1d2a' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2 9q4-5 8 0q4-5 8 0'/%3E%3Cpath d='M24 4q3-4 6 0q3-4 6 0'/%3E%3Cpath d='M34 17q3.5-4.5 7 0q3.5-4.5 7 0'/%3E%3C/g%3E%3C/svg%3E") 0 0 / 100% 100% no-repeat;
  animation: w-birds 24s linear infinite;
}
@keyframes w-birds {
  0%   { transform: translate(0, 0); opacity: 0; }
  8%   { opacity: .9; }
  50%  { transform: translate(calc((min(100vw, 760px) - 54px) / 2), -6px); }
  92%  { opacity: .9; }
  100% { transform: translate(calc(min(100vw, 760px) - 54px), 2px); opacity: 0; }
}
/* the farmhouse chimney smokes (in view where the band shows the house) */
html[data-skin="western"] .page-login .login .apex-panel__head::before {
  /* the head is centred in the card and starts 1.15rem (card padding) below
     the card's padding box */
  left: calc(50% + (1128 - 660) * var(--wu)); top: calc(130px - 234px - 1.15rem + (8 - 266) * var(--wu));
  width: calc(30 * var(--wu)); height: calc(30 * var(--wu)); border-radius: 50%;
  background: radial-gradient(circle at 42% 40%, rgba(255, 255, 255, .9), rgba(236, 228, 226, .6) 52%, rgba(255, 255, 255, 0) 71%);
  animation: w-smoke 5s ease-out infinite;
}
/* on a phone the band is cropped to its middle and the house is out of
   frame — no smoke drawn where there is no chimney (and none off-screen) */
@media (max-width: 560px) {
  html[data-skin="western"] .page-login .login .apex-panel__head::before { display: none; }
}
html[data-skin="western"] .page-login .login.apex-panel {
  background: linear-gradient(180deg, #fff8e6, var(--w-cream) 50%, var(--w-cream-2));
  border: 4px solid var(--w-wood); border-radius: 18px; clip-path: none;
  filter: none; box-shadow: 0 5px 0 var(--w-wood-dark), 0 18px 36px rgba(40, 20, 6, .45);
  color: var(--w-ink);
}
html[data-skin="western"] .page-login .code__slot {
  background: #fffaf0; border: 2px solid #b08a5a; box-shadow: inset 0 1px 3px rgba(74, 42, 18, .25); border-radius: 8px;
}
html[data-skin="western"] .page-login .code__slot.is-filled { background: #fff1c4; border-color: var(--w-gold-deep); }
html[data-skin="western"] .page-login .code__slot.is-next { border-color: var(--w-wood); }
html[data-skin="western"] .page-login .code__slot::after { background: var(--w-ink); }
html[data-skin="western"] .page-login .keypad .apex-btn--key,
html[data-skin="western"] .page-login .keypad .apex-btn--ghost {
  background: linear-gradient(180deg, #8a5630 0, #6e4120 60%, #5a3216 100%);
  color: #fff6e0; border: 2px solid #3e2410; border-radius: 12px; clip-path: none;
  font-family: var(--w-sign-font); font-weight: 900;
  box-shadow: inset 0 1px 0 rgba(255, 220, 170, .35), 0 3px 0 #3e2410;
  text-shadow: 0 1px 0 rgba(0, 0, 0, .45);
}
html[data-skin="western"] .page-login .keypad .apex-btn--key:hover:not(:disabled) { filter: brightness(1.12); }
html[data-skin="western"] .page-login .login__submit {
  background: linear-gradient(180deg, #ffe07a, var(--w-gold) 55%, var(--w-gold-deep));
  color: var(--w-ink); border: 2px solid #9a6a12; border-radius: 14px; clip-path: none;
  font-family: var(--w-sign-font); font-weight: 900; text-shadow: none; box-shadow: 0 3px 0 #9a6a12;
}
html[data-skin="western"] .page-login .login__submit:not(:disabled) { animation: none; }
html[data-skin="western"] .page-login .login__submit:disabled { filter: none; opacity: .7; }
html[data-skin="western"] .page-login .remember__box { background: #fffaf0; border-color: var(--w-wood); }
html[data-skin="western"] .page-login .login__lead,
html[data-skin="western"] .page-login .login__fine,
html[data-skin="western"] .page-login .code__hint { color: var(--w-ink); }
html[data-skin="western"] .page-login .sig__name { color: #fff8e6; text-shadow: 0 1px 3px rgba(0, 0, 0, .6); }
html[data-skin="western"] .page-login .sig__role,
html[data-skin="western"] .page-login .footer__fine { color: #fff3d6; text-shadow: 0 1px 2px rgba(0, 0, 0, .6); }

/* reduced motion: NO motion. The water strips and the wheel stay where they
   are (at rest they ARE the render's water and wheel); the drawn sprites go. */
@media (prefers-reduced-motion: reduce) {
  html[data-skin="western"] .world__map::before,
  html[data-skin="western"] .world__map::after,
  html[data-skin="western"] .world__road::before,
  html[data-skin="western"] .world__road::after,
  html[data-skin="western"] .place::before,
  html[data-skin="western"] .place::after,
  html[data-skin="western"] .place__art::before,
  html[data-skin="western"] .place__art::after,
  html[data-skin="western"] .page-login .gate::after,
  html[data-skin="western"] .page-login .login.apex-panel::before,
  html[data-skin="western"] .page-login .login.apex-panel::after,
  html[data-skin="western"] .page-login .login .apex-panel__head::before { animation: none !important; will-change: auto; }
  html[data-skin="western"] .world__road::before,
  html[data-skin="western"] .place::before,
  html[data-skin="western"] .place::after,
  html[data-skin="western"] .place__art::before,
  html[data-skin="western"] .place__art::after,
  html[data-skin="western"] .page-login .login.apex-panel::before,
  html[data-skin="western"] .page-login .login.apex-panel::after,
  html[data-skin="western"] .page-login .login .apex-panel__head::before { display: none; }
}

/* panel heads ("Member access", perks): a dark wood name-plate, as in the render */
html[data-skin="western"] .apex-panel__head {
  display: inline-block; align-self: center; justify-self: center;
  padding: .35rem 1rem; border-radius: 10px;
  background: linear-gradient(180deg, #6e4120, #4a2a12); color: #fff3d6;
  font-family: var(--w-sign-font); letter-spacing: .08em;
  box-shadow: 0 2px 0 #2e1a0a;
}
html[data-skin="western"] .apex-panel__head::after { display: none; }

/* header strip on the sky: no neon rule under it */
html[data-skin="western"] body.app-body .app-header {
  /* translucency HELD at the default's 86% + blur (Ace 10-14: the sticky
     top-bar translucency is his acceptance call, not a build change) */
  background: color-mix(in srgb, #6fbbee 86%, transparent);
  border-bottom: 3px solid var(--w-wood-dark); border-image: none;
  box-shadow: 0 3px 0 rgba(74, 42, 18, .25);
}
html[data-skin="western"] body.app-body .boot-veil { background: linear-gradient(180deg, #4fa9e6, #cfe9c0); }
html[data-skin="western"] .appmenu__btn,
html[data-skin="western"] .acctpicker__btn {
  background: var(--w-cream); color: var(--w-ink);
  border-color: var(--w-wood-dark); border-radius: 12px; box-shadow: inset 0 0 0 1px var(--w-wood-dark), 0 2px 0 var(--w-wood-dark);
}
html[data-skin="western"] .appmenu__panel,
html[data-skin="western"] .acctpicker__panel {
  background: var(--w-cream); color: var(--w-ink); border: 2px solid var(--w-wood-dark); border-radius: 12px;
}
html[data-skin="western"] .appmenu__item { color: var(--w-ink); }
/* Jason's signature under the world: kept, in dark ink on the meadow */
html[data-skin="western"] body.app-body .app-footer__sig { color: var(--w-ink); text-shadow: 0 1px 0 rgba(255, 255, 255, .6); }
html[data-skin="western"] .chip { background: #fffaf0; }

/* login: the slab serif runs wider than the default condensed face —
   size the hero so nothing overflows a 390 px phone */
html[data-skin="western"] .page-login .pitch { min-width: 0; }
html[data-skin="western"] .page-login .pitch__title { font-size: clamp(1.8rem, 9vw, 4.2rem); overflow-wrap: anywhere; }
html[data-skin="western"] .page-login .pitch__eyebrow { letter-spacing: .12em; white-space: normal; overflow-wrap: anywhere; }
html[data-skin="western"] .page-login .topbar__chip { background: #4a2a12; color: #ffe27a; border-color: #ffe27a; }
html[data-skin="western"] .page-login .ticker .chip,
html[data-skin="western"] .page-login .ticker .apex-chip { background: #efe3c8; color: #6b5a44; border-color: #8a7a66; }

/* ---------- the default look's neon layer (fortnite-app.css) is off ---- */
html[data-skin="western"] body.app-body {
  background:
    radial-gradient(120px 46px at 18% 70px, rgba(255, 255, 255, .95), rgba(255, 255, 255, 0) 70%),
    radial-gradient(160px 54px at 82% 120px, rgba(255, 255, 255, .9), rgba(255, 255, 255, 0) 70%),
    linear-gradient(180deg, #4fa9e6 0, #8fd0f4 260px, #cfe9c0 520px, #e9f2d2 100%);
  background-attachment: fixed;
}
html[data-skin="western"] body.app-body::before,
html[data-skin="western"] body.app-body::after { display: none; }
html[data-skin="western"] body.app-body .panel {
  border: 3px solid var(--w-wood); border-image: none;
  background: linear-gradient(180deg, #fdf6e3, var(--w-cream) 40%, var(--w-cream-2));
  box-shadow: 0 4px 0 var(--w-wood-dark), 0 10px 22px rgba(74, 42, 18, .25);
  backdrop-filter: none;
}
html[data-skin="western"] body.app-body .panel.world { border: 0; background: transparent; box-shadow: none; }
html[data-skin="western"] body.app-body .panel::after { display: none; }
html[data-skin="western"] body.app-body .panel--hero { border-color: var(--w-gold-deep); border-image: none; }
html[data-skin="western"] body.app-body .panel__head { border-bottom: 2px dashed rgba(122, 74, 36, .45); border-image: none; }
html[data-skin="western"] body.app-body .panel__title,
html[data-skin="western"] body.app-body .subhead { text-shadow: none; }
html[data-skin="western"] body.app-body .chip { background: #fffaf0; box-shadow: none; text-shadow: none; }
html[data-skin="western"] body.app-body .btn--accent:not(:disabled),
html[data-skin="western"] body.app-body .btn:not(.btn--primary):not(.btn--ghost):not(:disabled) {
  background: linear-gradient(180deg, #8a5630, var(--w-wood) 55%, #6a3d1b);
  color: #fff6e0; border: 2px solid var(--w-wood-dark); border-radius: 12px;
  box-shadow: 0 3px 0 var(--w-wood-dark); text-shadow: 0 1px 0 rgba(0, 0, 0, .35);
}
html[data-skin="western"] body.app-body .btn--primary:not(:disabled) {
  background: linear-gradient(180deg, #ffe07a, var(--w-gold) 55%, var(--w-gold-deep));
  color: var(--w-ink); border: 2px solid #9a6a12; border-radius: 12px; box-shadow: 0 3px 0 #9a6a12; text-shadow: none;
}
html[data-skin="western"] body.app-body .btn--ghost:not(:disabled),
html[data-skin="western"] body.app-body .viewbar__back {
  background: var(--w-cream); color: var(--w-ink); border: 2px solid var(--w-wood); border-radius: 12px;
  box-shadow: 0 2px 0 var(--w-wood); text-shadow: none;
}
html[data-skin="western"] body.app-body .btn:disabled { box-shadow: none; background: #efe3c8; color: #8a7a66; border-color: #b8a88a; }
html[data-skin="western"] body.app-body .stat {
  background: #fffaf0; border: 2px solid rgba(122, 74, 36, .45); border-left: 5px solid var(--w-gold-deep);
  border-image: none; box-shadow: none; border-radius: 10px; color: var(--w-ink);
}
html[data-skin="western"] body.app-body .offline-card { background: #f6eedc; box-shadow: none; border-color: #b8a88a; color: #6b5a44; }
html[data-skin="western"] body.app-body .sitenav--side { background: var(--w-cream); border-right: 3px solid var(--w-wood); border-image: none; box-shadow: none; }
html[data-skin="western"] body.app-body .sitenav--tabs { border-color: var(--w-wood-dark); box-shadow: inset 0 0 0 2px var(--w-wood-dark), 0 4px 0 var(--w-wood-dark), 0 12px 26px rgba(74, 42, 18, .35); }
html[data-skin="western"] body.app-body .sitenav__item.is-active { text-shadow: none; }
html[data-skin="western"] body.app-body .sitenav__item.is-active .sitenav__icon { filter: none; }
html[data-skin="western"] body.app-body .appmenu__btn,
html[data-skin="western"] body.app-body .acctpicker__btn { border-color: var(--w-wood-dark); box-shadow: 0 2px 0 var(--w-wood-dark); }
html[data-skin="western"] body.app-body .appmenu__panel,
html[data-skin="western"] body.app-body .acctpicker__panel { border-color: var(--w-wood-dark); box-shadow: 0 10px 22px rgba(74, 42, 18, .35); }
html[data-skin="western"] body.app-body .stepup { box-shadow: 0 0 0 3px var(--w-wood), 0 10px 26px rgba(74, 42, 18, .4); background: var(--w-cream); color: var(--w-ink); }
html[data-skin="western"] body.app-body .app-footer__sig { text-shadow: 0 1px 0 rgba(255, 255, 255, .6); }

/* calendar: cream day cards, tan week column */
html[data-skin="western"] .cal__cell { background: #fffaf0; border-color: rgba(122, 74, 36, .4); color: var(--w-ink); }
html[data-skin="western"] .cal__cell--pad { background: transparent; border-color: transparent; }
html[data-skin="western"] .cal__cell--week { background: #f3e2bb; border-color: rgba(122, 74, 36, .5); }
html[data-skin="western"] .cal__cell--blank { border-color: #b8a88a; }
html[data-skin="western"] .cal__colhead--week { color: var(--w-wood); }