/* Sors Duo: the look of each floor, more exclusive the higher you go (the Lobby stays as it is), hidden under the guest skins | games/Sors_Duo/css/floors.css | v.0.1 */

/* The room behind the table: one fixed layer, painted under everything else. Each floor
   switches on the pieces it needs (plan 9b). */
.floor-decor { position: fixed; inset: 0; z-index: -1; pointer-events: none; overflow: hidden; }
.floor-decor i { position: absolute; inset: 0; display: none; }
html[class*="theme-"] .floor-decor { display: none; }
.floor-decor.fd-in { animation: fd-in 1.4s ease-out; }
@keyframes fd-in { from { opacity: 0; } }
@keyframes fd-twinkle { from { opacity: .35; } to { opacity: 1; } }
@keyframes fd-drift { to { transform: translate(4vmax, -3vmax) rotate(8deg) scale(1.08); } }
@keyframes fd-turn { to { transform: rotate(360deg); } }

/* ---------------------------------------------------------------- 2. Salon
   Bordeaux velvet with a gold damask, the warm light of a chandelier from above. */
html[data-floor="salon"]:not([class*="theme-"]) { --lacquer: #1c0c11; }
html[data-floor="salon"]:not([class*="theme-"]) .fd-back {
  display: block;
  background:
    radial-gradient(circle at 50% 50%, rgba(201, 164, 76, .10) 0 2px, transparent 2.5px) 0 0 / 44px 44px,
    radial-gradient(ellipse 7px 12px at 50% 50%, rgba(201, 164, 76, .06) 0 60%, transparent 64%) 22px 22px / 44px 44px,
    radial-gradient(ellipse at 50% 42%, rgba(120, 20, 38, .55) 0%, transparent 70%),
    linear-gradient(180deg, #1c070d, #13050a 70%, #0c0306);
}
html[data-floor="salon"]:not([class*="theme-"]) .fd-light {
  display: block;
  background: radial-gradient(ellipse 34% 26% at 50% 0%, rgba(255, 214, 150, .26), transparent 75%);
}
html[data-floor="salon"]:not([class*="theme-"]) .fd-spark {
  display: block;
  bottom: auto;
  left: 36%;
  right: 36%;
  height: 18vh;
  background: radial-gradient(circle, rgba(255, 240, 210, .85) 0 1px, transparent 1.6px) 0 0 / 17px 13px;
  mask-image: radial-gradient(ellipse 50% 80% at 50% 0%, #000 25%, transparent 75%);
  animation: fd-twinkle 5s ease-in-out infinite alternate;
}
html[data-floor="salon"]:not([class*="theme-"]) .cabinet {
  box-shadow: 0 0 0 5px var(--black), 0 0 0 6px var(--gold), 0 16px 34px rgba(0, 0, 0, .6), 0 0 34px rgba(160, 30, 52, .28);
}

/* ---------------------------------------------------------------- 3. Velvet Room
   Deep purple, heavy curtains tied back with gold, a spotlight on the table. */
html[data-floor="velvet"]:not([class*="theme-"]) { --lacquer: #170b1d; }
html[data-floor="velvet"]:not([class*="theme-"]) .fd-back {
  display: block;
  background:
    radial-gradient(ellipse 42% 48% at 50% 46%, rgba(120, 50, 150, .42), transparent 72%),
    repeating-linear-gradient(90deg, rgba(255, 255, 255, .018) 0 1px, transparent 1px 7px),
    linear-gradient(180deg, #13071b, #0b0410);
}
html[data-floor="velvet"]:not([class*="theme-"]) .fd-light {
  display: block;
  background: radial-gradient(ellipse 26% 72% at 50% -12%, rgba(255, 225, 245, .13), transparent 70%);
}
html[data-floor="velvet"]:not([class*="theme-"]) .fd-left,
html[data-floor="velvet"]:not([class*="theme-"]) .fd-right {
  display: block;
  right: auto;
  width: 13vw;
  background:
    linear-gradient(180deg, transparent 49%, var(--gold) 49% 50.5%, var(--gold-lo) 50.5% 52%, transparent 52%),
    linear-gradient(90deg, rgba(0, 0, 0, .55), transparent 35%, rgba(0, 0, 0, .35)),
    repeating-linear-gradient(90deg, #2a0b33 0, #5b1f6b 1.1vw, #34103f 2.2vw, #1d0724 3vw);
  border-right: 2px solid var(--gold-lo);
  clip-path: polygon(0 0, 100% 0, 100% 30%, 52% 51%, 74% 100%, 0 100%);
}
html[data-floor="velvet"]:not([class*="theme-"]) .fd-right { left: auto; right: 0; transform: scaleX(-1); }
html[data-floor="velvet"]:not([class*="theme-"]) .cabinet {
  box-shadow: 0 0 0 5px var(--black), 0 0 0 6px var(--gold), 0 16px 34px rgba(0, 0, 0, .6), 0 0 38px rgba(130, 60, 170, .3);
}

/* ---------------------------------------------------------------- 4. Gilded Floor
   Black and gold Art Deco: a sunburst behind the table, fluted gold pilasters, gold dust. */
html[data-floor="gilded"]:not([class*="theme-"]) { --lacquer: #0d0b07; }
html[data-floor="gilded"]:not([class*="theme-"]) .fd-back {
  display: block;
  background:
    radial-gradient(ellipse at 50% 44%, rgba(96, 74, 26, .5), transparent 70%),
    linear-gradient(180deg, #0e0b05, #070604);
}
html[data-floor="gilded"]:not([class*="theme-"]) .fd-light {
  display: block;
  inset: -40vmax;
  background: repeating-conic-gradient(from 0deg at 50% 46%, rgba(201, 164, 76, .14) 0 3deg, transparent 3deg 10deg);
  mask-image: radial-gradient(circle at 50% 46%, #000 0, rgba(0, 0, 0, .55) 16vmax, transparent 44vmax);
}
html[data-floor="gilded"]:not([class*="theme-"]) .fd-left,
html[data-floor="gilded"]:not([class*="theme-"]) .fd-right {
  display: block;
  top: 9vh;
  bottom: 7vh;
  left: 2.5vw;
  right: auto;
  width: 4.5vw;
  background:
    linear-gradient(90deg, rgba(0, 0, 0, .45), transparent 30%, transparent 70%, rgba(0, 0, 0, .45)),
    repeating-linear-gradient(90deg, rgba(201, 164, 76, .6) 0 2px, rgba(201, 164, 76, .14) 2px 7px, transparent 7px 10px);
  border-top: 7px double var(--gold);
  border-bottom: 7px double var(--gold);
  box-shadow: 0 0 22px rgba(201, 164, 76, .14);
}
html[data-floor="gilded"]:not([class*="theme-"]) .fd-right { left: auto; right: 2.5vw; }
html[data-floor="gilded"]:not([class*="theme-"]) .fd-spark {
  display: block;
  background:
    radial-gradient(circle, rgba(240, 214, 138, .8) 0 1px, transparent 1.6px) 0 0 / 151px 113px,
    radial-gradient(circle, rgba(240, 214, 138, .55) 0 .8px, transparent 1.3px) 70px 50px / 97px 137px;
  animation: fd-twinkle 4s ease-in-out infinite alternate;
}
html[data-floor="gilded"]:not([class*="theme-"]) .cabinet {
  box-shadow: 0 0 0 5px var(--black), 0 0 0 6px var(--gold-hi), 0 16px 34px rgba(0, 0, 0, .6), 0 0 40px rgba(240, 214, 138, .3);
}

/* ---------------------------------------------------------------- 5. Penthouse
   A wall of windows over a night city: stars, a moon, lit towers, white gold trim. */
html[data-floor="penthouse"]:not([class*="theme-"]) { --lacquer: #0c111c; }
html[data-floor="penthouse"]:not([class*="theme-"]) .fd-back {
  display: block;
  background:
    radial-gradient(circle at 93% 8%, rgba(255, 246, 222, .5) 0, rgba(255, 244, 214, .18) 1.4vmax, rgba(255, 244, 214, .05) 3vmax, transparent 8vmax),
    radial-gradient(circle, rgba(255, 255, 255, .75) 0 .8px, transparent 1.2px) 0 0 / 97px 71px,
    radial-gradient(circle, rgba(255, 255, 255, .45) 0 .7px, transparent 1.1px) 40px 30px / 131px 89px,
    linear-gradient(180deg, #03060f 0%, #081326 55%, #12234a 100%);
}
html[data-floor="penthouse"]:not([class*="theme-"]) .fd-low {
  display: block;
  top: auto;
  height: 36vh;
  background:
    linear-gradient(0deg, rgba(255, 150, 80, .10), transparent 45%),
    linear-gradient(#050912, #050912) 0% 100% / 7% 58% no-repeat,
    linear-gradient(#060a14, #060a14) 6% 100% / 5% 84% no-repeat,
    linear-gradient(#050912, #050912) 12% 100% / 8% 46% no-repeat,
    linear-gradient(#070c17, #070c17) 19% 100% / 4% 96% no-repeat,
    linear-gradient(#050912, #050912) 24% 100% / 9% 64% no-repeat,
    linear-gradient(#060a14, #060a14) 32% 100% / 6% 40% no-repeat,
    linear-gradient(#070c17, #070c17) 38% 100% / 7% 74% no-repeat,
    linear-gradient(#050912, #050912) 45% 100% / 5% 55% no-repeat,
    linear-gradient(#060a14, #060a14) 51% 100% / 8% 88% no-repeat,
    linear-gradient(#050912, #050912) 58% 100% / 6% 50% no-repeat,
    linear-gradient(#070c17, #070c17) 64% 100% / 7% 100% no-repeat,
    linear-gradient(#050912, #050912) 71% 100% / 5% 62% no-repeat,
    linear-gradient(#060a14, #060a14) 77% 100% / 8% 44% no-repeat,
    linear-gradient(#070c17, #070c17) 85% 100% / 6% 80% no-repeat,
    linear-gradient(#050912, #050912) 91% 100% / 7% 57% no-repeat,
    linear-gradient(#060a14, #060a14) 100% 100% / 5% 70% no-repeat;
}
/* The lit windows: two grids that do not line up, masked to the towers. */
html[data-floor="penthouse"]:not([class*="theme-"]) .fd-low::after {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle, rgba(255, 212, 140, .7) 0 1px, transparent 1.5px) 0 0 / 8px 11px,
    radial-gradient(circle, rgba(0, 0, 0, .85) 0 3px, transparent 3.5px) 0 0 / 13px 17px;
  mask-image:
    linear-gradient(#000, #000), linear-gradient(#000, #000), linear-gradient(#000, #000), linear-gradient(#000, #000),
    linear-gradient(#000, #000), linear-gradient(#000, #000), linear-gradient(#000, #000), linear-gradient(#000, #000),
    linear-gradient(#000, #000), linear-gradient(#000, #000), linear-gradient(#000, #000), linear-gradient(#000, #000),
    linear-gradient(#000, #000), linear-gradient(#000, #000), linear-gradient(#000, #000), linear-gradient(#000, #000);
  mask-size: 7% 54%, 5% 80%, 8% 42%, 4% 92%, 9% 60%, 6% 36%, 7% 70%, 5% 51%, 8% 84%, 6% 46%, 7% 96%, 5% 58%, 8% 40%, 6% 76%, 7% 53%, 5% 66%;
  mask-position: 0% 100%, 6% 100%, 12% 100%, 19% 100%, 24% 100%, 32% 100%, 38% 100%, 45% 100%, 51% 100%, 58% 100%, 64% 100%, 71% 100%, 77% 100%, 85% 100%, 91% 100%, 100% 100%;
  mask-repeat: no-repeat;
  opacity: .8;
}
/* The window: tall white gold mullions and a transom, the city behind the glass. */
html[data-floor="penthouse"]:not([class*="theme-"]) .fd-right {
  display: block;
  background:
    linear-gradient(180deg, transparent calc(9vh - 3px), rgba(222, 205, 165, .16) calc(9vh - 3px) 9vh, transparent 9vh),
    linear-gradient(90deg, transparent calc(24vw - 3px), rgba(222, 205, 165, .16) calc(24vw - 3px) 24vw, transparent 24vw calc(76vw - 3px), rgba(222, 205, 165, .16) calc(76vw - 3px) 76vw, transparent 76vw);
}
/* Enough dark behind the table to read the cards over the city lights. */
html[data-floor="penthouse"]:not([class*="theme-"]) .fd-light {
  display: block;
  background: radial-gradient(ellipse 42% 46% at 50% 46%, rgba(3, 6, 15, .72), transparent 76%);
}
html[data-floor="penthouse"]:not([class*="theme-"]) .cabinet {
  border-color: #e3d6b4;
  box-shadow: 0 0 0 5px var(--black), 0 0 0 6px #cdbf9d, 0 16px 34px rgba(0, 0, 0, .6), 0 0 36px rgba(150, 180, 230, .22);
}

/* ---------------------------------------------------------------- 6. Vault Between Worlds
   The last room: a vault door of gold rings turning behind the table, a nebula drifting,
   cracks of light in the dark, diamonds everywhere. */
html[data-floor="vault"]:not([class*="theme-"]) { --lacquer: #0a090d; }
html[data-floor="vault"]:not([class*="theme-"]) .fd-back { display: block; background: #040306; }
html[data-floor="vault"]:not([class*="theme-"]) .fd-low {
  display: block;
  inset: -20vmax;
  background:
    radial-gradient(ellipse 40% 30% at 22% 30%, rgba(96, 40, 170, .36), transparent 70%),
    radial-gradient(ellipse 35% 28% at 80% 70%, rgba(20, 120, 150, .3), transparent 70%),
    radial-gradient(ellipse 30% 25% at 68% 22%, rgba(210, 160, 60, .2), transparent 70%);
  animation: fd-drift 60s ease-in-out infinite alternate;
}
html[data-floor="vault"]:not([class*="theme-"]) .fd-light {
  display: block;
  inset: auto;
  left: 50%;
  top: 46%;
  width: 130vmin;
  height: 130vmin;
  margin: -65vmin 0 0 -65vmin;
  border-radius: 50%;
  background:
    repeating-radial-gradient(circle, transparent 0 34px, rgba(201, 164, 76, .24) 34px 36px, transparent 36px 58px),
    repeating-conic-gradient(rgba(201, 164, 76, .11) 0 1.2deg, transparent 1.2deg 15deg);
  mask-image: radial-gradient(circle, #000 18%, transparent 70%);
  animation: fd-turn 180s linear infinite;
}
/* Cracks of light: the glow sits on the element, the jagged line on its ::before. */
html[data-floor="vault"]:not([class*="theme-"]) .fd-left,
html[data-floor="vault"]:not([class*="theme-"]) .fd-right {
  display: block;
  inset: auto;
  left: 1.2vw;
  top: 44vh;
  width: 34px;
  height: 40vh;
  filter: drop-shadow(0 0 6px rgba(255, 232, 186, .85)) drop-shadow(0 0 16px rgba(150, 190, 255, .5));
  animation: fd-twinkle 4.5s ease-in-out infinite alternate;
}
html[data-floor="vault"]:not([class*="theme-"]) .fd-right { left: auto; right: 1.2vw; top: 36vh; height: 48vh; transform: scaleX(-1); animation-delay: -2s; }
html[data-floor="vault"]:not([class*="theme-"]) .fd-left::before,
html[data-floor="vault"]:not([class*="theme-"]) .fd-right::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent, rgba(255, 238, 196, .95) 18%, rgba(200, 225, 255, .9) 62%, transparent);
  clip-path: polygon(50% 0, 35% 15%, 60% 30%, 30% 48%, 55% 65%, 40% 82%, 52% 100%, 56% 100%, 46% 82%, 61% 65%, 36% 48%, 66% 30%, 41% 15%, 54% 0);
}
html[data-floor="vault"]:not([class*="theme-"]) .fd-spark {
  display: block;
  background:
    radial-gradient(circle, rgba(255, 255, 255, .95) 0 1px, transparent 1.6px) 0 0 / 173px 131px,
    radial-gradient(circle, rgba(200, 230, 255, .85) 0 1.2px, transparent 1.8px) 60px 80px / 241px 197px,
    radial-gradient(circle, rgba(255, 225, 160, .9) 0 1px, transparent 1.5px) 120px 20px / 113px 157px;
  animation: fd-twinkle 3s ease-in-out infinite alternate;
}
html[data-floor="vault"]:not([class*="theme-"]) .cabinet {
  border-color: #e6edf5;
  box-shadow: 0 0 0 5px var(--black), 0 0 0 6px #b9c4d2, 0 16px 34px rgba(0, 0, 0, .6), 0 0 28px rgba(170, 205, 255, .26), 0 0 56px rgba(201, 164, 76, .18);
}

/* ---------------------------------------------------------------- narrow screens, motion */
@media (max-width: 900px) {
  html[data-floor="velvet"]:not([class*="theme-"]) .fd-left,
  html[data-floor="velvet"]:not([class*="theme-"]) .fd-right { width: 7vw; }
  html[data-floor="gilded"]:not([class*="theme-"]) .fd-left,
  html[data-floor="gilded"]:not([class*="theme-"]) .fd-right { display: none; }
  html[data-floor="penthouse"]:not([class*="theme-"]) .fd-low { height: 24vh; }
}
@media (prefers-reduced-motion: reduce) {
  .floor-decor, .floor-decor i { animation: none !important; }
}