/* =====================================================================
   skin-island.css — WO-485 SKIN 5: ISLAND PARADISE (pair-05)
   Every rule is scoped to html[data-skin="island"], so this file is inert
   (and none of its art is fetched) unless the saved skin is Island.

   Art layers (cut from Jason's pair-05 renders by docs/wo485-island/cut.py,
   never stretched — every art box carries its plate's own aspect ratio):
     world.webp          the world band of the home render; the three
                         signboards' baked words repainted as blank board,
                         the moving palms cut out and infilled underneath.
                         The place names are REAL HTML text on the boards.
     palm-crown.webp     the top-left palm, its own sprite   (sways)
     palm-corner.webp    the bottom-left fronds, own sprite  (sway)
     glints-a/b.webp     sun glints placed only on open water (travel)
     foam-a/b.webp       foam off the island's foreground shore (rolls in)
     falls-mask.png      alpha map of the waterfalls (static container mask)
     falls-streaks.png   falling-water texture (falls, inside the mask)
     login-scene.webp    the login render's island band (below the baked
                         "LIVE FREER", above the baked "WELCOME TO / YOUR
                         WORLD" words and the keypad card); palm cut out
     login-palm.webp     its palm crown sprite                (sways)
     login-glints.webp   its sea glints                       (travel)
   Controls: sand panels with a tan rim, driftwood keypad, turquoise primary
   (the render's ENTER THE ARENA), dark-teal name plates, bamboo secondary
   buttons, dark island signboards. All real HTML; digits/words stay sharp.

   Motion law: the world's living things move as SEPARATE layers animated
   with transform / opacity only (palms rotate about their base, water
   layers translate, birds fly + flap via translate/scale). The plate itself
   is never animated, warped or filtered. Controls never move.
   prefers-reduced-motion: every island animation is off.
   ===================================================================== */

html[data-skin="island"] {
  --apex-bg: #fbf7ec;
  --apex-bg-2: #e4f4ef;
  --apex-panel: #fdf0d6;
  --apex-panel-edge: #c99a5b;
  --apex-blue: #1f8f92;
  --apex-purple: #a8743a;
  --apex-yellow: #8e5a17;          /* accent TEXT on sand: deep driftwood */
  --apex-cyan: #12707a;            /* links / sub-heads: lagoon teal */
  --apex-text: #0f3d3f;
  --apex-text-dim: #3f6466;
  --apex-ok: #1b7a4a;
  --apex-warn: #a85d00;
  --apex-danger: #c0392b;
  --apex-offline: #7d8a85;
  --apex-line: rgba(15, 61, 63, .22);
  --sheet-solid: #fdf0d6;
  --i-ink: #0f3d3f;
  --i-ink-2: #3f6466;
  --i-cream: #fbf7ec;
  --i-sand: #fdebca;
  --i-sand-2: #efd3a0;
  --i-rim: #c99a5b;
  --i-rim-dark: #8f6431;
  --i-wood: #7a4e28;
  --i-wood-dark: #4a2e14;
  --i-teal: #24a9a2;
  --i-teal-lite: #6fd8cc;
  --i-teal-dark: #13706b;
  --i-board: #0b2624;
  --i-bamboo: #d9c17a;
  --i-bamboo-dark: #9c7d2f;
  --i-sign-font: "Oswald", "Bebas Neue", "Roboto Condensed", "Arial Narrow", "Helvetica Neue", Arial, sans-serif;
  --i-title-font: "Georgia", "Times New Roman", "Noto Serif", serif;
  --font-display: var(--i-sign-font);
  --panel-clip: none;
  --radius: 14px;
  --shadow: 0 6px 16px rgba(74, 46, 20, .18), 0 0 0 1px rgba(201, 154, 91, .45);
  --sitenav-bar: #fbf7ec;
  --sitenav-edge: #c99a5b;
  --sitenav-lit: #0f3d3f;
  --sitenav-pill: #24a9a2;
  --crew-body: #24a9a2; --crew-head: #7a4e28; --crew-legs: #0f3d3f;
  accent-color: #13706b;
  color-scheme: light;
}

/* ---------- page backdrop: cream sky over the lagoon ------------------ */
html[data-skin="island"] body {
  color: var(--i-ink);
  background: linear-gradient(180deg, #fcf8ec 0, #f3f4ea 280px, #e4f4ef 640px, #d3efea 100%) fixed;
}
html[data-skin="island"] .arena,
html[data-skin="island"] .candles,
html[data-skin="island"] .rocket { display: none !important; }

/* ---------- panels, cards, popups: sand with a tan rim ---------------- */
html[data-skin="island"] .panel,
html[data-skin="island"] .apex-panel,
html[data-skin="island"] .subcard {
  background: linear-gradient(180deg, #fff6e2, var(--i-sand) 45%, var(--i-sand-2));
  border: 2px solid var(--i-rim);
  border-radius: 16px;
  clip-path: none;
  box-shadow: 0 3px 0 var(--i-rim-dark), 0 10px 22px rgba(74, 46, 20, .18);
  color: var(--i-ink);
}
html[data-skin="island"] .apex-panel::before { display: none; }
html[data-skin="island"] .panel__head { border-bottom: 2px solid rgba(201, 154, 91, .45); }
html[data-skin="island"] .panel__title,
html[data-skin="island"] .stopsheet__title { font-family: var(--i-sign-font); font-weight: 800; color: var(--i-ink); letter-spacing: .02em; }
html[data-skin="island"] .subhead { color: var(--i-teal-dark); }
html[data-skin="island"] a { color: #0e6670; }

html[data-skin="island"] .acctrow,
html[data-skin="island"] .worldrow,
html[data-skin="island"] .skinpick__row,
html[data-skin="island"] .bell__item {
  background: #fffaf0; border: 2px solid rgba(201, 154, 91, .6); color: var(--i-ink);
}
html[data-skin="island"] .bell__item { border-left: 4px solid var(--apex-warn); }
html[data-skin="island"] .soon { background: #fff4dc; border-color: var(--i-rim); }

/* ---------- buttons ----------------------------------------------------
   secondary = bamboo cane (green-gold with nodes), primary = turquoise
   lagoon (the render's ENTER THE ARENA), ghost = sand. */
html[data-skin="island"] .btn,
html[data-skin="island"] .apex-btn {
  background:
    linear-gradient(90deg, rgba(90, 64, 10, .32) 0 2px, transparent 2px calc(100% - 2px), rgba(90, 64, 10, .32) calc(100% - 2px)),
    linear-gradient(180deg, #ecd89a, var(--i-bamboo) 45%, #c4a456 55%, #e2cc86);
  color: #2d2208; border: 2px solid var(--i-bamboo-dark); border-radius: 12px;
  box-shadow: 0 3px 0 #6f5718; clip-path: none; text-shadow: 0 1px 0 rgba(255, 248, 220, .55); font-weight: 800;
}
html[data-skin="island"] .btn--primary,
html[data-skin="island"] .apex-btn--primary {
  background: linear-gradient(180deg, #7fe0d4, #45c4b9 50%, var(--i-teal));
  color: var(--i-ink); border-color: var(--i-teal-dark); box-shadow: 0 3px 0 var(--i-teal-dark); text-shadow: none;
}
html[data-skin="island"] .btn--ghost,
html[data-skin="island"] .apex-btn--ghost {
  background: var(--i-sand); color: var(--i-ink); border-color: var(--i-rim); box-shadow: 0 2px 0 var(--i-rim-dark); text-shadow: none;
}
html[data-skin="island"] .stopfilter__chip { background: var(--i-sand); color: var(--i-ink); border: 2px solid var(--i-rim); }
html[data-skin="island"] .stopfilter__chip.is-on { background: var(--i-teal); color: #fff; border-color: var(--i-teal-dark); }
html[data-skin="island"] input,
html[data-skin="island"] select,
html[data-skin="island"] textarea {
  background: #fffaf0; color: var(--i-ink); border: 2px solid var(--i-rim); border-radius: 10px;
}

/* ---------- top bar: cream, sand pills with a tan rim ---------------- */
html[data-skin="island"] .topbar2 { background: transparent; }
html[data-skin="island"] .profile__btn,
html[data-skin="island"] .bell__btn,
html[data-skin="island"] .gear {
  background: var(--i-cream); color: var(--i-ink); border-color: var(--i-rim);
  box-shadow: inset 0 0 0 1px var(--i-rim), 0 2px 0 var(--i-rim-dark);
}
html[data-skin="island"] .acctbox {
  background: linear-gradient(180deg, #fff3da, var(--i-sand) 50%, var(--i-sand-2)); color: var(--i-ink);
  border-color: var(--i-rim); box-shadow: inset 0 0 0 1px var(--i-rim), 0 2px 0 var(--i-rim-dark);
}
html[data-skin="island"] .acctbox__stop { color: var(--i-ink); }
html[data-skin="island"] .profile__panel,
html[data-skin="island"] .bell__panel,
html[data-skin="island"] .appmenu__panel,
html[data-skin="island"] details > .appmenu__list {
  background: var(--i-sand); color: var(--i-ink); border: 2px solid var(--i-rim); border-radius: 14px;
}
html[data-skin="island"] .modepill { color: var(--i-ink); }
html[data-skin="island"] .modepill[data-mode="live"] { background: #fde3df; }
html[data-skin="island"] .modepill[data-mode="demo"] { background: linear-gradient(180deg, #7fe0d4, var(--i-teal)); border-color: var(--i-teal-dark); }
html[data-skin="island"] .bookline__label { background: #fffaf0; }

/* ---------- the floating bottom bar: cream, turquoise active pill ---- */
@media (max-width: 768px) {
  html[data-skin="island"] .sitenav--tabs {
    background: linear-gradient(180deg, #fdfaf1, #f1f4ea); border-color: var(--i-rim);
    box-shadow: inset 0 0 0 1px var(--i-rim), 0 3px 0 var(--i-rim-dark), 0 12px 26px rgba(15, 61, 63, .25);
  }
  html[data-skin="island"] .sitenav--tabs .sitenav__item { color: var(--i-ink); }
  html[data-skin="island"] .sitenav--tabs .sitenav__item.is-active .sitenav__glyph {
    background: linear-gradient(180deg, var(--i-teal-lite), var(--i-teal)); box-shadow: inset 0 0 0 2px var(--i-rim);
  }
}
html[data-skin="island"] .sitenav--side { background: var(--i-cream); border-right: 2px solid var(--i-rim); }
html[data-skin="island"] .sitenav__item { color: var(--i-ink); }

/* ---------- the world: one art plate, places laid on its buildings ---- */
html[data-skin="island"] .panel.world {
  background: transparent; border: 0; box-shadow: none; border-radius: 0;
}
html[data-skin="island"] .world__map {
  display: block; position: relative;
  width: 100%; max-width: 620px; margin: 0 auto;
  aspect-ratio: 1308 / 1516; min-height: 0; padding: 0;
  container-type: inline-size;
  background: #39b9cf url("../img/skins/island/world.webp") center / cover no-repeat;
  border-radius: 18px; border: 2px solid var(--i-rim);
  box-shadow: 0 3px 0 var(--i-rim-dark), 0 12px 26px rgba(15, 61, 63, .2);
  overflow: hidden;
  isolation: isolate;
}

/* places = hotspots over their buildings; the island never zooms its
   buildings (a glow marks the chosen one, the art stays put) */
html[data-skin="island"] .place {
  position: absolute; display: block; padding: 0; min-height: 0;
  background: transparent; border: 0; border-radius: 12px; box-shadow: none; color: #fff;
}
html[data-skin="island"] .place.is-zoomed {
  transform: none; border: 0;
  box-shadow: 0 0 0 3px rgba(111, 216, 204, .95), 0 0 24px rgba(255, 246, 214, .8);
}
html[data-skin="island"] .place__art {
  position: absolute; width: auto; height: auto; border-radius: 10px; background: none; overflow: visible;
}
/* name = real text on the blank island signboard */
html[data-skin="island"] .place__name {
  position: absolute; display: flex; align-items: center; justify-content: center;
  font-family: var(--i-sign-font); font-weight: 800; text-transform: uppercase; font-stretch: condensed;
  letter-spacing: .01em; line-height: 1; white-space: nowrap; color: #fffdf4;
  text-shadow: 0 1px 0 #000, 0 0 6px rgba(0, 0, 0, .6);
  font-size: 3.4cqw;
}
/* sub = the live line, on a sand tag hung under the board */
html[data-skin="island"] .place__sub {
  position: absolute; white-space: nowrap; font-size: max(10px, 2.4cqw); font-weight: 800; line-height: 1.2;
  padding: .12rem .5rem; border-radius: 999px;
  background: linear-gradient(180deg, #fff6e2, var(--i-sand)); color: var(--i-ink);
  border: 2px solid var(--i-rim); box-shadow: 0 2px 0 var(--i-rim-dark);
}

/* plate px -> %: Prop hut   x60..390  y544..929   (plate 1308 x 1516) */
html[data-skin="island"] .place--prop  { left: 4.587%; top: 35.884%; width: 25.229%; height: 25.396%; }
html[data-skin="island"] .place--prop .place__art  { left: 6%; top: 0; width: 88%; height: 62%; }
html[data-skin="island"] .place--prop .place__name { left: 0; top: 64.416%; width: 97.576%; height: 31.688%; font-size: 4.4cqw; }
html[data-skin="island"] .place--prop .place__sub  { left: 0; top: 99%; }

/*                  Forex villa x478..863  y412..834 */
html[data-skin="island"] .place--forex { left: 36.544%; top: 27.177%; width: 29.434%; height: 27.836%; }
html[data-skin="island"] .place--forex .place__art  { left: 5%; top: 0; width: 90%; height: 66%; }
html[data-skin="island"] .place--forex .place__name { left: 4.156%; top: 69.194%; width: 87.273%; height: 28.910%; font-size: 3.5cqw; }
html[data-skin="island"] .place--forex .place__sub  { left: 50%; top: 99%; transform: translateX(-50%); }

/*                  Plexy hut   x914..1284 y572..976 */
html[data-skin="island"] .place--plexy { left: 69.878%; top: 37.731%; width: 28.287%; height: 26.649%; }
html[data-skin="island"] .place--plexy .place__art  { left: 5%; top: 0; width: 90%; height: 68%; }
html[data-skin="island"] .place--plexy .place__name { left: 9.189%; top: 71.287%; width: 84.324%; height: 26.733%; font-size: 3.4cqw; }
html[data-skin="island"] .place--plexy .place__sub  { right: 0; top: 100%; }

/* plexy status sign: a driftwood board on the water */
html[data-skin="island"] .worldsign {
  right: 3%; bottom: 2.5%; z-index: 4;
  background: linear-gradient(180deg, #8a5a32, var(--i-wood) 60%, #5e3a1c); color: #fff6e6;
  border: 2px solid var(--i-wood-dark); border-radius: 8px; box-shadow: 0 2px 0 var(--i-wood-dark);
}
html[data-skin="island"] .worldsign[data-state="ok"] .worldsign__icon { background: #7ff0c0; }
html[data-skin="island"] .worldsign[data-state="warn"] .worldsign__icon { background: #ffc94a; }

/* ---------- LIVE MOTION (home) ----------------------------------------
   Each moving thing is its own layer; transform/opacity only.
   Layers that carry a full-plate sprite are sized to the whole map from
   inside their host (host box -> map box in %), so the sprite sits on its
   exact plate pixels. */

/* sea glints, two layers travelling opposite ways (map pseudos) */
html[data-skin="island"] .world__map::before,
html[data-skin="island"] .world__map::after {
  content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background: url("../img/skins/island/glints-a.webp") 0 0 / 100% 100% no-repeat;
  opacity: 0; will-change: transform, opacity;
  animation: isl-glint 6.4s ease-in-out infinite;
}
html[data-skin="island"] .world__map::after {
  background-image: url("../img/skins/island/glints-b.webp");
  animation-name: isl-glint-b; animation-delay: -3.2s;
}
@keyframes isl-glint {
  0%   { transform: translate(-1.1%, 0);    opacity: 0; }
  45%  { opacity: .95; }
  100% { transform: translate(1.1%, .25%);  opacity: 0; }
}
@keyframes isl-glint-b {
  0%   { transform: translate(1.1%, .2%);   opacity: 0; }
  50%  { opacity: .9; }
  100% { transform: translate(-1.1%, 0);    opacity: 0; }
}

/* the waterfalls: a static container masked to the falls; two streak
   layers fall inside it (the road of the default look is not drawn here) */
html[data-skin="island"] .world__road {
  display: block; position: absolute; inset: 0; left: 0; top: 0; bottom: 0; width: auto; margin: 0;
  z-index: 0; opacity: 1; border-radius: 0; background: none; overflow: hidden; pointer-events: none;
  -webkit-mask-image: url("../img/skins/island/falls-mask.png");
  -webkit-mask-size: 100% 100%; -webkit-mask-repeat: no-repeat; -webkit-mask-position: 0 0;
  mask-image: url("../img/skins/island/falls-mask.png");
  mask-size: 100% 100%; mask-repeat: no-repeat; mask-position: 0 0; mask-mode: alpha;
}
html[data-skin="island"] .world__road::before,
html[data-skin="island"] .world__road::after {
  content: ""; position: absolute; left: 0; width: 100%; pointer-events: none; will-change: transform;
}
/* period = 120 plate px = 7.9156% of the map; layer = 107.9156% tall */
html[data-skin="island"] .world__road::before {
  top: -7.9156%; height: 107.9156%;
  background: url("../img/skins/island/falls-streaks.png") 0 0 / 3.6697% 7.3349% repeat;
  animation: isl-falls .8s linear infinite;
}
/* a second, coarser sheet: period 180 plate px = 11.8734%; layer 111.8734% */
html[data-skin="island"] .world__road::after {
  top: -11.8734%; height: 111.8734%; opacity: .6;
  background: url("../img/skins/island/falls-streaks.png") 1.9% 0 / 5.5046% 10.6132% repeat;
  animation: isl-falls-b 1.05s linear infinite;
}
@keyframes isl-falls   { from { transform: translateY(0); } to { transform: translateY(7.3349%); } }
@keyframes isl-falls-b { from { transform: translateY(0); } to { transform: translateY(10.6132%); } }

/* palms sway about their base: hosted by the Prop hut (which never moves)
   prop box 330x385 at (60,544) -> map 1308x1516 */
html[data-skin="island"] .place--prop::before,
html[data-skin="island"] .place--prop::after {
  content: ""; position: absolute; pointer-events: none; z-index: 2;
  left: -18.182%; top: -141.299%; width: 396.364%; height: 393.766%;
  background: url("../img/skins/island/palm-crown.webp") 0 0 / 100% 100% no-repeat;
  transform-origin: 1.53% 31%;                 /* the trunk where it leaves the plate */
  animation: isl-palm 5.6s ease-in-out infinite alternate;
  will-change: transform;
}
html[data-skin="island"] .place--prop::after {
  background-image: url("../img/skins/island/palm-corner.webp");
  transform-origin: 0 100%;                    /* fronds rooted off the bottom-left corner */
  animation-name: isl-palm-b; animation-duration: 4.8s; animation-delay: -1.7s;
}
@keyframes isl-palm   { from { transform: rotate(-1.1deg); } to { transform: rotate(1.3deg); } }
@keyframes isl-palm-b { from { transform: rotate(1.2deg); }  to { transform: rotate(-1.4deg); } }

/* foam rolling onto the foreground shore: two bands, phased
   forex box 385x422 at (478,412); plexy box 370x404 at (914,572) */
html[data-skin="island"] .place--forex::after,
html[data-skin="island"] .place--plexy::before {
  content: ""; position: absolute; pointer-events: none; z-index: -1;
  background: url("../img/skins/island/foam-a.webp") 0 0 / 100% 100% no-repeat;
  opacity: 0; will-change: transform, opacity;
  animation: isl-foam 4.6s ease-out infinite;
}
html[data-skin="island"] .place--forex::after { left: -124.156%; top: -97.630%; width: 339.740%; height: 359.242%; }
html[data-skin="island"] .place--plexy::before {
  left: -247.027%; top: -141.584%; width: 353.514%; height: 375.248%;
  background-image: url("../img/skins/island/foam-b.webp"); animation-delay: -2.3s;
}
@keyframes isl-foam {
  0%   { transform: translateY(1.05%); opacity: 0; }
  30%  { opacity: .95; }
  75%  { transform: translateY(.05%);  opacity: .55; }
  100% { transform: translateY(-.2%);  opacity: 0; }
}

/* sea birds crossing the sky: fly = translate, flap = scale (separate
   properties, both compositor-only). Hosted by the Forex villa. */
html[data-skin="island"] .place--forex::before {
  content: ""; position: absolute; pointer-events: none; z-index: 3;
  left: -147.9%; top: -86%; width: 23.8%; aspect-ratio: 5 / 2;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 40'%3E%3Cg fill='none' stroke='%231d4447' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 22q7-9 14 0q7-9 14 0'/%3E%3Cpath d='M44 10q6-7 12 0q6-7 12 0'/%3E%3Cpath d='M70 28q5-6 10 0q5-6 10 0'/%3E%3C/g%3E%3C/svg%3E") center / contain no-repeat;
  animation: isl-fly 24s linear infinite, isl-flap .55s ease-in-out infinite alternate;
  will-change: translate, scale;
}
@keyframes isl-fly  { from { translate: 0 0; } 50% { translate: 760% 40%; } to { translate: 1530% -20%; } }
@keyframes isl-flap { from { scale: 1 1; } to { scale: 1 .5; } }

/* ---------- the travel object: the island speedboat ------------------ */
html[data-skin="island"] .traveller {
  left: -22px; top: -12px; width: 44px; height: 24px; border-radius: 0;
  box-shadow: none; filter: drop-shadow(0 2px 2px rgba(0, 0, 0, .4));
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 44 24'%3E%3Cpath d='M2 14h34l6-5-2 9q-1 3-4 3H8q-4 0-6-7z' fill='%23fffdf6' stroke='%230f3d3f' stroke-width='1.6' stroke-linejoin='round'/%3E%3Cpath d='M4 17h33' stroke='%2324a9a2' stroke-width='2.4'/%3E%3Cpath d='M12 14l4-6h12l5 6z' fill='%23bfe9f0' stroke='%230f3d3f' stroke-width='1.4' stroke-linejoin='round'/%3E%3Cpath d='M0 22q6-3 12 0t12 0 12 0' fill='none' stroke='%23ffffff' stroke-width='1.6' stroke-linecap='round'/%3E%3C/svg%3E") center / contain no-repeat;
}

/* ---------- summary sheet: solid sand, tan rim ----------------------- */
html[data-skin="island"] .stopsheet {
  background: var(--sheet-solid); background-image: none;
  border: 3px solid var(--i-rim); border-radius: 18px; color: var(--i-ink);
  box-shadow: 0 4px 0 var(--i-rim-dark);
}
html[data-skin="island"] .stopsheet::backdrop { background: rgba(8, 40, 44, .68); }

/* ---------- LOGIN ------------------------------------------------------
   Titles on the render's cream sky (dark teal serif); the cut island band
   sits right above the Member Access card; the card floats on the lagoon.
   scene box = W x W*487/1308 with W = min(100vw, 760px). */
html[data-skin="island"] body.page-login {
  background: linear-gradient(180deg, #fcf8ec 0, #f7f6ec 400px, #eef3e8 100%);
}
html[data-skin="island"] .page-login .ticker {
  background: var(--i-cream); color: var(--i-ink); border-bottom: 2px solid var(--i-rim);
  backdrop-filter: none; -webkit-backdrop-filter: none;
}
html[data-skin="island"] .page-login .brand__mark path:first-child { fill: #c08a3e; }
html[data-skin="island"] .page-login .brand__text strong { color: var(--i-ink); font-family: var(--i-title-font); font-weight: 900; text-shadow: none; }
html[data-skin="island"] .page-login .brand__text em { color: var(--i-ink); letter-spacing: .3em; text-shadow: none; }
html[data-skin="island"] .page-login .topbar__chip { background: var(--i-ink); color: #fff; border-color: var(--i-ink); }
html[data-skin="island"] .page-login .pitch { min-width: 0; }
html[data-skin="island"] .page-login .pitch__title,
html[data-skin="island"] .page-login .pitch__title-lead {
  font-family: var(--i-title-font); color: var(--i-ink); -webkit-text-fill-color: var(--i-ink);
  background: none; filter: none; text-shadow: none;
}
html[data-skin="island"] .page-login .pitch__title { font-size: clamp(1.9rem, 9.5vw, 4.4rem); overflow-wrap: anywhere; }
html[data-skin="island"] .page-login .pitch__title-hero {
  font-family: var(--i-title-font); color: #8e5a17; -webkit-text-fill-color: #8e5a17;
  background: none; filter: none; text-shadow: 0 1px 0 #fff3d6; animation: none;
}
html[data-skin="island"] .page-login .pitch__eyebrow { color: var(--i-teal-dark); letter-spacing: .12em; white-space: normal; overflow-wrap: anywhere; }
html[data-skin="island"] .page-login .pitch__lead,
html[data-skin="island"] .page-login .pitch__body { color: var(--i-ink); text-shadow: none; }
html[data-skin="island"] .page-login .pitch__lead strong,
html[data-skin="island"] .page-login .pitch__body strong { color: #7a4a12; }
html[data-skin="island"] .page-login .perk.apex-panel,
html[data-skin="island"] .page-login .quote.apex-panel { filter: none; }
html[data-skin="island"] .page-login .perk h2 { color: var(--i-teal-dark); font-family: var(--i-sign-font); }
html[data-skin="island"] .page-login .perk p,
html[data-skin="island"] .page-login .quote { color: var(--i-ink); }

/* the island band, right above the card; the lagoon under the card
   bleeds full width (border-image outset, no scrollable overflow) */
html[data-skin="island"] .page-login .gate {
  position: relative;
  padding-top: calc(min(100vw, 760px) * .372324 - 14px);
  border-image: linear-gradient(180deg, rgba(79, 209, 217, 0) 0, rgba(79, 209, 217, 0) calc(min(100vw, 760px) * .3), #43c8d2 calc(min(100vw, 760px) * .372324), #8be0dc 60%, #f1e4c2 88%, rgba(241, 228, 194, 0) 100%) fill 0 / 0 / 0 100vw;
}
html[data-skin="island"] .page-login .gate::before,
html[data-skin="island"] .page-login .gate::after {
  content: ""; position: absolute; top: 0; left: calc(50% - min(50vw, 380px));
  width: min(100vw, 760px); aspect-ratio: 1308 / 487; z-index: 0; pointer-events: none;
}
html[data-skin="island"] .page-login .gate::before {
  background: url("../img/skins/island/login-scene.webp") 0 0 / 100% 100% no-repeat;
}
/* glints box inset 1.5% each side so its travel never leaves the page */
html[data-skin="island"] .page-login .gate::after {
  left: calc(50% - min(50vw, 380px) + min(100vw, 760px) * .015);
  width: calc(min(100vw, 760px) * .97); aspect-ratio: auto; height: calc(min(100vw, 760px) * .372324);
  background: url("../img/skins/island/login-glints.webp") calc(min(100vw, 760px) * -.015) 0 / calc(min(100vw, 760px)) 100% no-repeat;
  opacity: 0; will-change: transform, opacity;
  animation: isl-glint 6s ease-in-out infinite;
}
html[data-skin="island"] .page-login .gate > * { position: relative; z-index: 1; }

/* the card: sand board, tan rim (render: MEMBER ACCESS card) */
html[data-skin="island"] .page-login .login.apex-panel {
  background: linear-gradient(180deg, #fdf0d4, var(--i-sand) 45%, #ecca93);
  border: 3px solid var(--i-rim); border-radius: 22px; clip-path: none;
  filter: none; box-shadow: 0 4px 0 var(--i-rim-dark), 0 18px 36px rgba(8, 50, 56, .35);
  color: var(--i-ink);
}
/* the card's two pseudos carry the band's palm + birds; they sit BEHIND
   the card (z -1 inside its stacking context) and above the scene */
html[data-skin="island"] .page-login .login.apex-panel::before,
html[data-skin="island"] .page-login .login.apex-panel::after {
  content: ""; display: block; position: absolute; inset: auto; clip-path: none; z-index: -1; pointer-events: none;
  top: calc(14px - min(100vw, 760px) * .372324 - 3px);
  left: calc(50% - min(50vw, 380px));
  width: min(100vw, 760px); aspect-ratio: 1308 / 487;
}
/* the palm box covers only the palm's own 24% of the band, so its sway
   stays inside the page (the sprite sits at the same plate pixels) */
html[data-skin="island"] .page-login .login.apex-panel::before {
  width: calc(min(100vw, 760px) * .24); aspect-ratio: auto; height: calc(min(100vw, 760px) * .372324);
  background: url("../img/skins/island/login-palm.webp") 0 0 / 416.6667% 100% no-repeat;
  transform-origin: 8% 100%;
  animation: isl-palm 5.6s ease-in-out infinite alternate;
  will-change: transform;
}
html[data-skin="island"] .page-login .login.apex-panel::after {
  width: calc(min(100vw, 760px) * .1); left: calc(50% - min(50vw, 380px) + min(100vw, 760px) * .04);
  top: calc(14px - min(100vw, 760px) * .372324 + min(100vw, 760px) * .05);
  aspect-ratio: 5 / 2;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 40'%3E%3Cg fill='none' stroke='%231d4447' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 22q7-9 14 0q7-9 14 0'/%3E%3Cpath d='M44 10q6-7 12 0q6-7 12 0'/%3E%3Cpath d='M70 28q5-6 10 0q5-6 10 0'/%3E%3C/g%3E%3C/svg%3E") center / contain no-repeat;
  animation: isl-fly-login 20s linear infinite, isl-flap .55s ease-in-out infinite alternate;
  will-change: translate, scale;
}
/* the flock crosses inside the band (enters/leaves by fading) */
@keyframes isl-fly-login {
  0%   { translate: 0 0;       opacity: 0; }
  8%   { opacity: 1; }
  50%  { translate: 400% 30%;  }
  92%  { opacity: 1; }
  100% { translate: 800% -10%; opacity: 0; }
}

html[data-skin="island"] .page-login .apex-panel__head {
  display: inline-block; align-self: center; justify-self: center;
  padding: .4rem 1.2rem; border-radius: 12px;
  background: linear-gradient(180deg, #17504f, var(--i-ink)); color: #fff;
  font-family: var(--i-sign-font); letter-spacing: .12em;
  box-shadow: 0 2px 0 #062022; border: 2px solid var(--i-rim);
}
html[data-skin="island"] .apex-panel__head::after { display: none; }
html[data-skin="island"] .page-login .code__slot {
  background: #fffdf6; border: 2px solid var(--i-rim); box-shadow: inset 0 1px 3px rgba(74, 46, 20, .2); border-radius: 9px;
}
html[data-skin="island"] .page-login .code__slot.is-filled { background: #e5f8f4; border-color: var(--i-teal); }
html[data-skin="island"] .page-login .code__slot.is-next { border-color: var(--i-teal-dark); }
html[data-skin="island"] .page-login .code__slot::after { background: var(--i-ink); }
/* driftwood keypad: brown wood with grain, cream digits */
html[data-skin="island"] .page-login .keypad .apex-btn--key,
html[data-skin="island"] .page-login .keypad .apex-btn--ghost {
  background:
    repeating-linear-gradient(178deg, rgba(255, 220, 170, .07) 0 2px, rgba(0, 0, 0, 0) 2px 7px, rgba(40, 20, 4, .08) 7px 9px),
    linear-gradient(180deg, #96643a 0, #7a4e28 55%, #5e3a1c 100%);
  color: #fff8ea; border: 2px solid #d7ad73; border-radius: 12px; clip-path: none;
  font-family: var(--i-sign-font); font-weight: 800; font-size: 1.35rem;
  box-shadow: inset 0 1px 0 rgba(255, 226, 180, .35), 0 3px 0 #3e2410;
  text-shadow: 0 1px 0 rgba(0, 0, 0, .5);
}
html[data-skin="island"] .page-login .keypad .apex-btn--ghost { font-size: 1rem; letter-spacing: .04em; }
html[data-skin="island"] .page-login .keypad .apex-btn--key:hover:not(:disabled) { filter: brightness(1.1); }
html[data-skin="island"] .page-login .login__submit {
  background: linear-gradient(180deg, #7fe0d4, #45c4b9 50%, var(--i-teal));
  color: var(--i-ink); border: 2px solid var(--i-rim); border-radius: 14px; clip-path: none;
  font-family: var(--i-sign-font); font-weight: 800; letter-spacing: .03em; text-shadow: 0 1px 0 rgba(255, 255, 255, .35);
  box-shadow: 0 3px 0 var(--i-teal-dark);
}
html[data-skin="island"] .page-login .login__submit:not(:disabled) { animation: none; }
html[data-skin="island"] .page-login .login__submit:disabled { filter: none; opacity: .7; }
html[data-skin="island"] .page-login .remember__box { background: #fffdf6; border-color: var(--i-ink); }
html[data-skin="island"] .page-login .login__lead,
html[data-skin="island"] .page-login .login__fine,
html[data-skin="island"] .page-login .code__hint,
html[data-skin="island"] .page-login .remember__text { color: var(--i-ink); }
html[data-skin="island"] .page-login .sig__name { color: var(--i-ink); font-family: var(--i-title-font); font-style: italic; text-shadow: none; }
html[data-skin="island"] .page-login .sig__role,
html[data-skin="island"] .page-login .footer__fine { color: var(--i-ink-2); text-shadow: none; }
html[data-skin="island"] .page-login .ticker .apex-chip { background: #e4ebe6; color: #2f4a48; border-color: #7f938e; }
html[data-skin="island"] .page-login .ticker__message { color: var(--i-ink-2); }
html[data-skin="island"] .page-login .ticker .chip { background: #eef1e6; color: #4f6462; border-color: #9fb0ab; }

/* ---------- header strip: cream, tan rule ---------------------------- */
html[data-skin="island"] body.app-body .app-header {
  /* translucency HELD at the default's 86% (Ace 10-14 acceptance call) */
  background: color-mix(in srgb, #fbf7ec 86%, transparent);
  border-bottom: 2px solid var(--i-rim); border-image: none;
  box-shadow: 0 3px 0 rgba(143, 100, 49, .2);
}
html[data-skin="island"] body.app-body .boot-veil { background: linear-gradient(180deg, #fcf8ec, #d3efea); }
html[data-skin="island"] .appmenu__btn,
html[data-skin="island"] .acctpicker__btn {
  background: linear-gradient(180deg, #fff3da, var(--i-sand) 50%, var(--i-sand-2)); color: var(--i-ink);
  border-color: var(--i-rim); box-shadow: inset 0 0 0 1px var(--i-rim), 0 2px 0 var(--i-rim-dark);
}
html[data-skin="island"] .appmenu__panel,
html[data-skin="island"] .acctpicker__panel {
  background: var(--i-sand); color: var(--i-ink); border: 2px solid var(--i-rim); border-radius: 12px;
}
html[data-skin="island"] .appmenu__item { color: var(--i-ink); }
html[data-skin="island"] body.app-body .app-footer__sig { color: var(--i-ink); text-shadow: 0 1px 0 rgba(255, 255, 255, .6); }
html[data-skin="island"] .chip { background: #fffaf0; }

/* ---------- the default look's neon layer (fortnite-app.css) is off ---- */
html[data-skin="island"] body.app-body {
  background: linear-gradient(180deg, #fcf8ec 0, #f3f4ea 280px, #e4f4ef 640px, #d3efea 100%);
  background-attachment: fixed;
}
html[data-skin="island"] body.app-body::before,
html[data-skin="island"] body.app-body::after { display: none; }
html[data-skin="island"] body.app-body .panel {
  border: 2px solid var(--i-rim); border-image: none;
  background: linear-gradient(180deg, #fff6e2, var(--i-sand) 45%, var(--i-sand-2));
  box-shadow: 0 3px 0 var(--i-rim-dark), 0 10px 22px rgba(74, 46, 20, .18);
  backdrop-filter: none;
}
html[data-skin="island"] body.app-body .panel.world { border: 0; background: transparent; box-shadow: none; }
html[data-skin="island"] body.app-body .panel::after { display: none; }
html[data-skin="island"] body.app-body .panel--hero { border-color: var(--i-teal); border-image: none; }
html[data-skin="island"] body.app-body .panel__head { border-bottom: 2px solid rgba(201, 154, 91, .45); border-image: none; }
html[data-skin="island"] body.app-body .panel__title,
html[data-skin="island"] body.app-body .subhead { text-shadow: none; }
html[data-skin="island"] body.app-body .chip { background: #fffaf0; box-shadow: none; text-shadow: none; }
html[data-skin="island"] body.app-body .btn--accent:not(:disabled),
html[data-skin="island"] body.app-body .btn:not(.btn--primary):not(.btn--ghost):not(:disabled) {
  background:
    linear-gradient(90deg, rgba(90, 64, 10, .32) 0 2px, transparent 2px calc(100% - 2px), rgba(90, 64, 10, .32) calc(100% - 2px)),
    linear-gradient(180deg, #ecd89a, var(--i-bamboo) 45%, #c4a456 55%, #e2cc86);
  color: #2d2208; border: 2px solid var(--i-bamboo-dark); border-radius: 12px;
  box-shadow: 0 3px 0 #6f5718; text-shadow: 0 1px 0 rgba(255, 248, 220, .55);
}
html[data-skin="island"] body.app-body .btn--primary:not(:disabled) {
  background: linear-gradient(180deg, #7fe0d4, #45c4b9 50%, var(--i-teal));
  color: var(--i-ink); border: 2px solid var(--i-teal-dark); border-radius: 12px; box-shadow: 0 3px 0 var(--i-teal-dark); text-shadow: none;
}
html[data-skin="island"] body.app-body .btn--ghost:not(:disabled),
html[data-skin="island"] body.app-body .viewbar__back {
  background: var(--i-sand); color: var(--i-ink); border: 2px solid var(--i-rim); border-radius: 12px;
  box-shadow: 0 2px 0 var(--i-rim-dark); text-shadow: none;
}
html[data-skin="island"] body.app-body .btn:disabled { box-shadow: none; background: #efe6d2; color: #6d7a76; border-color: #c2b597; }
html[data-skin="island"] body.app-body .stat {
  background: #fffaf0; border: 2px solid rgba(201, 154, 91, .55); border-left: 5px solid var(--i-teal);
  border-image: none; box-shadow: none; border-radius: 10px; color: var(--i-ink);
}
html[data-skin="island"] body.app-body .offline-card { background: #f4efe2; box-shadow: none; border-color: #c2b597; color: #4f6462; }
html[data-skin="island"] body.app-body .sitenav--side { background: var(--i-cream); border-right: 2px solid var(--i-rim); border-image: none; box-shadow: none; }
html[data-skin="island"] body.app-body .sitenav--tabs { border-color: var(--i-rim); box-shadow: inset 0 0 0 1px var(--i-rim), 0 3px 0 var(--i-rim-dark), 0 12px 26px rgba(15, 61, 63, .25); }
html[data-skin="island"] body.app-body .sitenav__item.is-active { text-shadow: none; }
html[data-skin="island"] body.app-body .sitenav__item.is-active .sitenav__icon { filter: none; }
html[data-skin="island"] body.app-body .appmenu__btn,
html[data-skin="island"] body.app-body .acctpicker__btn { border-color: var(--i-rim); box-shadow: inset 0 0 0 1px var(--i-rim), 0 2px 0 var(--i-rim-dark); }
html[data-skin="island"] body.app-body .appmenu__panel,
html[data-skin="island"] body.app-body .acctpicker__panel { border-color: var(--i-rim); box-shadow: 0 10px 22px rgba(15, 61, 63, .25); }
html[data-skin="island"] body.app-body .stepup { box-shadow: 0 0 0 3px var(--i-rim), 0 10px 26px rgba(15, 61, 63, .35); background: var(--i-sand); color: var(--i-ink); }
html[data-skin="island"] body.app-body .app-footer__sig { text-shadow: 0 1px 0 rgba(255, 255, 255, .6); }

/* calendar: sand day cards, turquoise week column */
html[data-skin="island"] .cal__cell { background: #fffaf0; border-color: rgba(201, 154, 91, .55); color: var(--i-ink); }
html[data-skin="island"] .cal__cell--pad { background: transparent; border-color: transparent; }
html[data-skin="island"] .cal__cell--week { background: #dff4ef; border-color: rgba(19, 112, 107, .45); }
html[data-skin="island"] .cal__cell--blank { border-color: #c2b597; }
html[data-skin="island"] .cal__colhead--week { color: var(--i-teal-dark); }

/* ---------- THE EYE (eye.html) ----------------------------------------
   Reached: the tokens above (sand cards, teal accent, dark-teal ink), the
   cream page, sand/teal section + fleet tabs, a driftwood-and-rim frame on
   the emblem, the title in the island serif. NOT reached: the emblem image
   itself — it is a fixed <img> (the-eye-emblem-v2.jpg) and there is no
   island emblem art, so it is framed, never repainted or swapped. */
html[data-skin="island"] .eye-body {
  background: linear-gradient(180deg, #fcf8ec 0, #f3f4ea 300px, #dff2ec 100%) fixed;
  color: var(--i-ink);
}
html[data-skin="island"] .eye { --glass-brd: rgba(201, 154, 91, .7); --glass-strong: #fbe7c2; }
html[data-skin="island"] .eye-hero__title { font-family: var(--i-title-font); font-weight: 900; color: var(--i-ink); }
html[data-skin="island"] .eye-hero__motto { color: var(--i-teal-dark); }
html[data-skin="island"] .eye-hero__emblem {
  border: 3px solid var(--i-rim); box-shadow: 0 0 0 3px #7a4e28, 0 4px 0 3px var(--i-wood-dark);
}
html[data-skin="island"] .eye-sections { background: #fbf7ec; border-bottom: 2px solid rgba(201, 154, 91, .5); }
html[data-skin="island"] .eye-sec,
html[data-skin="island"] .eye-tab {
  background: linear-gradient(180deg, #fff3da, var(--i-sand)); color: var(--i-ink); border: 2px solid var(--i-rim); font-weight: 700;
}
html[data-skin="island"] .eye-sec--on,
html[data-skin="island"] .eye-tab--on {
  background: linear-gradient(180deg, #7fe0d4, var(--i-teal)); color: var(--i-ink); border-color: var(--i-teal-dark);
}
html[data-skin="island"] .eye-card { box-shadow: 0 2px 0 rgba(143, 100, 49, .45); }
html[data-skin="island"] .eye-paper { color: var(--i-teal-dark); border-color: var(--i-teal-dark); }
html[data-skin="island"] .eye-backlink { color: #0e6670; }

/* ---------- reduced motion: the island holds still -------------------- */
@media (prefers-reduced-motion: reduce) {
  html[data-skin="island"] .world__map::before,
  html[data-skin="island"] .world__map::after,
  html[data-skin="island"] .world__road::before,
  html[data-skin="island"] .world__road::after,
  html[data-skin="island"] .place--prop::before,
  html[data-skin="island"] .place--prop::after,
  html[data-skin="island"] .place--forex::before,
  html[data-skin="island"] .place--forex::after,
  html[data-skin="island"] .place--plexy::before,
  html[data-skin="island"] .page-login .gate::after,
  html[data-skin="island"] .page-login .login.apex-panel::before,
  html[data-skin="island"] .page-login .login.apex-panel::after { animation: none !important; }
  /* still glints/foam rest at a calm visible level; birds are not drawn */
  html[data-skin="island"] .world__map::before,
  html[data-skin="island"] .page-login .gate::after { opacity: .6; }
  html[data-skin="island"] .world__map::after,
  html[data-skin="island"] .place--forex::after,
  html[data-skin="island"] .place--plexy::before { opacity: 0; }
  html[data-skin="island"] .place--forex::before,
  html[data-skin="island"] .page-login .login.apex-panel::after { display: none; }
}