/*
 * SHIFT Reference World 01 integration.
 * Isolated from the stable procedural fallback so a failed asset load cannot blank gameplay.
 */
.world-plate{
  position:absolute;
  z-index:1;
  left:50%;
  top:50%;
  width:100%;
  height:100%;
  transform:translate(-50%,-50%);
  object-fit:cover;
  object-position:50% 50%;
  pointer-events:none;
  user-select:none;
  opacity:0;
  filter:saturate(.9) contrast(1.04) brightness(.83);
  transition:opacity .48s ease,filter .48s ease,transform .72s cubic-bezier(.16,.78,.18,1);
}
.game.world-art-ready .world-plate{opacity:.97}
.game.world-art-ready.stage-2{--stage-hue:42;--stage-glow:rgba(255,203,104,.30)}
.game.world-art-ready.stage-3{--stage-hue:326;--stage-glow:rgba(255,96,179,.30)}
.game.world-art-ready.stage-2 .world-plate{
  opacity:.94;
  filter:saturate(.86) contrast(1.08) brightness(.74);
  transform:translate(-50%,-50%) scale(1.035);
}
.game.world-art-ready.stage-3 .world-plate{
  opacity:.91;
  filter:saturate(.92) contrast(1.12) brightness(.67);
  transform:translate(-50%,-50%) scale(1.07);
}
.game.world-art-ready.stage-2 .scene::before,
.game.world-art-ready.stage-3 .scene::before{
  content:"";
  position:absolute;
  z-index:2;
  inset:0;
  pointer-events:none;
  mix-blend-mode:screen;
}
.game.world-art-ready.stage-2 .scene::before{
  background:
    radial-gradient(ellipse at 50% 55%,rgba(255,206,107,.14),transparent 42%),
    linear-gradient(180deg,rgba(112,70,12,.12),transparent 46%,rgba(255,190,74,.06));
}
.game.world-art-ready.stage-3 .scene::before{
  background:
    radial-gradient(ellipse at 50% 55%,rgba(255,89,174,.13),transparent 38%),
    linear-gradient(180deg,rgba(68,11,48,.16),transparent 44%,rgba(126,19,86,.10));
}

.game.world-art-ready .moon,
.game.world-art-ready .architecture,
.game.world-art-ready .horizon,
.game.world-art-ready .floor{opacity:0}

.game.world-art-ready .fog{
  z-index:2;
  bottom:17%;
  opacity:.42;
  filter:blur(36px);
}
.game.world-art-ready .fog2{
  z-index:2;
  bottom:7%;
  opacity:.28;
  filter:blur(40px);
}

.game.world-art-ready .gate-zone{
  top:60%;
  width:min(990px,72vw);
  gap:clamp(10px,1.7vw,24px);
}
.game.world-art-ready .gate{
  height:clamp(285px,51vh,430px);
  filter:drop-shadow(0 24px 44px rgba(0,0,0,.28));
}
.game.world-art-ready .gate .arch{
  inset:0 4%;
  border-color:transparent;
  background:transparent;
  box-shadow:none;
}
.game.world-art-ready .gate .arch::before{
  inset:8% 10% 7%;
  opacity:.07;
  background:radial-gradient(ellipse at 50% 54%,var(--gate-light),transparent 58%);
  box-shadow:none;
}
.game.world-art-ready .gate:not(:disabled):hover .arch::before{
  opacity:.23;
  filter:brightness(1.24) saturate(1.08);
  box-shadow:0 0 72px var(--gate-glow);
}
.game.world-art-ready .gate .arch::after{
  bottom:7%;
  width:44%;
  opacity:.56;
}
.game.world-art-ready .portal{
  inset:15% 18% 9%;
  opacity:0;
  border-radius:16px 16px 8px 8px;
  background:radial-gradient(ellipse at 50% 54%,rgba(255,255,255,.88) 0 2%,var(--gate-light) 10%,rgba(255,255,255,.08) 34%,transparent 72%);
  box-shadow:0 0 62px var(--gate-glow);
  mix-blend-mode:screen;
}
.game.world-art-ready .gate.selected .portal{opacity:.84}
.game.world-art-ready .gate.selected.outcome-win .portal{
  background:radial-gradient(ellipse at 50% 54%,#fff 0 4%,rgba(220,255,189,.9) 11%,rgba(144,255,103,.26) 34%,transparent 72%);
  box-shadow:0 0 92px rgba(190,255,139,.42);
}
.game.world-art-ready .gate.selected.outcome-lose .portal{
  background:radial-gradient(ellipse at 50% 54%,rgba(255,220,214,.95) 0 3%,rgba(255,91,80,.6) 12%,rgba(128,11,17,.18) 38%,transparent 72%);
  box-shadow:0 0 82px rgba(255,70,63,.34);
}
.game.world-art-ready .gate-copy{
  bottom:16%;
  padding:18px 0 14px;
  background:radial-gradient(ellipse at 50% 52%,rgba(0,0,0,.52),rgba(0,0,0,.2) 48%,transparent 72%);
  text-shadow:0 3px 12px #000,0 8px 28px rgba(0,0,0,.95);
}
.game.world-art-ready .risk-dot{top:17%}

/* The procedural version recenters the selected CSS gate. With baked architecture that
   would detach the overlay from the actual door, so Reference World keeps the portal
   locked to its physical opening and uses light/hero motion for anticipation instead. */
.game.world-art-ready .gate-zone.resolving .gate.selected,
.game.world-art-ready.target-0 .gate-zone.resolving .gate.selected,
.game.world-art-ready.target-2 .gate-zone.resolving .gate.selected{
  transform:translateY(-1.2vh) scale(1.045);
}
.game.world-art-ready .gate-zone.resolving .gate.selected.commit,
.game.world-art-ready.target-0 .gate-zone.resolving .gate.selected.commit,
.game.world-art-ready.target-2 .gate-zone.resolving .gate.selected.commit{
  transform:translateY(-2.2vh) scale(1.075);
}

.game.world-art-ready.stage-shift .world-plate{
  filter:saturate(.7) contrast(1.03) brightness(1.08);
}

@media (max-width:760px){
  .game.world-art-ready .world-plate{
    top:44%;
    width:142vw;
    height:auto;
    max-width:none;
    object-fit:contain;
    opacity:.96;
    -webkit-mask-image:linear-gradient(180deg,transparent 0,#000 10%,#000 86%,transparent 100%);
    mask-image:linear-gradient(180deg,transparent 0,#000 10%,#000 86%,transparent 100%);
  }
  .game.world-art-ready .gate-zone{
    top:48%;
    width:98vw;
    gap:2px;
    padding:0 4px;
  }
  .game.world-art-ready .gate{
    height:39vh;
    min-height:235px;
  }
  .game.world-art-ready .gate-copy{
    bottom:15%;
    padding:12px 0 10px;
  }
  .game.world-art-ready .gate .arch{inset:2% 3%}
  .game.world-art-ready .portal{inset:9% 8% 8%}
}

@media (prefers-reduced-motion:reduce){
  .world-plate{transition-duration:.01ms!important}
}

/* Gate Risk Language 01 — non-color risk identity.
   Steady stays concentric/parallel, Bold converges into a diamond,
   Abyss is fractured/segmented. These marks are visual only; math is unchanged. */
.game.world-art-ready .gate::before,
.game.world-art-ready .gate::after{
  content:"";
  position:absolute;
  z-index:3;
  top:27%;
  width:2px;
  height:27%;
  pointer-events:none;
  opacity:.28;
  transition:opacity .22s ease,filter .22s ease;
}
.game.world-art-ready .gate::before{left:19%}
.game.world-art-ready .gate::after{right:19%}
.game.world-art-ready .gate[data-p=".8"]::before,
.game.world-art-ready .gate[data-p=".8"]::after{
  background:linear-gradient(180deg,transparent,rgba(222,249,255,.78) 20%,rgba(222,249,255,.38) 78%,transparent);
  box-shadow:0 0 14px rgba(130,229,255,.18);
}
.game.world-art-ready .gate[data-p=".6"]::before{
  background:linear-gradient(180deg,transparent,rgba(255,231,169,.76) 22%,rgba(255,231,169,.34) 78%,transparent);
  transform:skewY(-13deg) translateX(4px);
  box-shadow:0 0 14px rgba(255,210,98,.17);
}
.game.world-art-ready .gate[data-p=".6"]::after{
  background:linear-gradient(180deg,transparent,rgba(255,231,169,.76) 22%,rgba(255,231,169,.34) 78%,transparent);
  transform:skewY(13deg) translateX(-4px);
  box-shadow:0 0 14px rgba(255,210,98,.17);
}
.game.world-art-ready .gate[data-p=".4"]::before,
.game.world-art-ready .gate[data-p=".4"]::after{
  width:3px;
  background:repeating-linear-gradient(180deg,rgba(255,181,219,.76) 0 15%,transparent 15% 27%);
  filter:drop-shadow(0 0 6px rgba(255,98,172,.22));
}
.game.world-art-ready .gate[data-p=".4"]::before{transform:skewY(-17deg) translateX(5px)}
.game.world-art-ready .gate[data-p=".4"]::after{transform:skewY(12deg) translateX(-2px)}
.game.world-art-ready .gate:not(:disabled):hover::before,
.game.world-art-ready .gate:not(:disabled):hover::after{opacity:.56;filter:brightness(1.28)}

.game.world-art-ready .gate .risk-dot{
  top:16%;
  width:22px;
  height:22px;
  background:rgba(5,8,11,.72);
  border:1.5px solid rgba(255,255,255,.88);
  box-shadow:0 0 18px rgba(255,255,255,.16),0 0 38px var(--gate-glow);
  opacity:.92;
  animation:gate-sigil-breathe 2.7s ease-in-out infinite alternate;
}
.game.world-art-ready .gate .risk-dot::before,
.game.world-art-ready .gate .risk-dot::after{
  content:"";
  position:absolute;
  left:50%;
  top:50%;
  transform:translate(-50%,-50%);
  background:rgba(255,255,255,.9);
}
.game.world-art-ready .gate[data-p=".8"] .risk-dot{border-radius:50%}
.game.world-art-ready .gate[data-p=".8"] .risk-dot::before{
  width:8px;height:8px;border-radius:50%;background:transparent;border:1px solid rgba(255,255,255,.9);
}
.game.world-art-ready .gate[data-p=".8"] .risk-dot::after{width:3px;height:3px;border-radius:50%}
.game.world-art-ready .gate[data-p=".6"] .risk-dot{
  width:19px;height:19px;border-radius:2px;transform:translateX(-50%) rotate(45deg);
}
.game.world-art-ready .gate[data-p=".6"] .risk-dot::before{
  width:7px;height:7px;border-radius:1px;background:transparent;border:1px solid rgba(255,255,255,.9);
}
.game.world-art-ready .gate[data-p=".6"] .risk-dot::after{width:2px;height:2px;border-radius:50%}
.game.world-art-ready .gate[data-p=".4"] .risk-dot{
  width:23px;height:23px;border:0;border-radius:0;
  clip-path:polygon(50% 0,92% 23%,92% 77%,50% 100%,8% 77%,8% 23%);
  background:linear-gradient(107deg,rgba(255,244,250,.9) 0 43%,transparent 43% 56%,rgba(255,244,250,.9) 56% 100%);
  filter:drop-shadow(0 0 12px var(--gate-glow));
}
.game.world-art-ready .gate[data-p=".4"] .risk-dot::before{
  width:3px;height:18px;background:rgba(255,244,250,.9);transform:translate(-50%,-50%) rotate(-31deg);
}
.game.world-art-ready .gate[data-p=".4"] .risk-dot::after{display:none}
@keyframes gate-sigil-breathe{from{opacity:.72}to{opacity:1}}
@media (prefers-reduced-motion:reduce){.game.world-art-ready .gate .risk-dot{animation:none}}
@media (max-width:760px){
  .game.world-art-ready .gate::before,.game.world-art-ready .gate::after{top:24%;height:23%;opacity:.2}
  .game.world-art-ready .gate .risk-dot{top:11%;transform:translateX(-50%) scale(.78)}
  .game.world-art-ready .gate[data-p=".6"] .risk-dot{transform:translateX(-50%) rotate(45deg) scale(.78)}
}

/* Threshold VFX Language — final operator-demo pass.
   One physical vocabulary: charge slit -> threshold impact -> win corridor / loss collapse. */
.game.world-art-ready .gate.selected .portal{
  opacity:.78;
  transform:scaleX(.18) scaleY(.98);
  filter:saturate(.92) brightness(1.08);
  transition:opacity .22s ease,transform .42s cubic-bezier(.2,.78,.16,1),filter .3s ease,box-shadow .3s ease;
  background:
    radial-gradient(ellipse at 50% 52%,rgba(255,255,255,.96) 0 3%,var(--gate-light) 10%,rgba(255,255,255,.06) 28%,transparent 68%),
    linear-gradient(90deg,transparent 0 43%,rgba(255,255,255,.22) 49%,rgba(255,255,255,.22) 51%,transparent 57%);
  box-shadow:0 0 34px var(--gate-glow),0 0 76px rgba(255,255,255,.08);
}
.game.world-art-ready .gate.selected .portal::before{
  inset:-12%;
  opacity:.72;
  filter:blur(1px);
  background:repeating-radial-gradient(ellipse at center,transparent 0 12%,rgba(255,255,255,.22) 13% 14%,transparent 15% 25%);
  animation:threshold-pressure .72s ease-in-out infinite alternate;
}
.game.world-art-ready .gate.selected .portal::after{
  left:50%;top:50%;
  width:7%;height:82%;
  border-radius:50%;
  background:linear-gradient(180deg,transparent 0,rgba(255,255,255,.96) 18%,#fff 50%,rgba(255,255,255,.92) 82%,transparent 100%);
  filter:blur(4px);
  opacity:.86;
  animation:threshold-core .54s ease-in-out infinite alternate;
}
.game.world-art-ready .gate.selected.commit .portal{
  opacity:1;
  transform:scaleX(.94) scaleY(1.035);
  filter:saturate(1.06) brightness(1.12);
  box-shadow:0 0 54px var(--gate-glow),0 0 112px rgba(255,255,255,.12);
}
.game.world-art-ready .gate.selected.commit .portal::before{
  inset:-5%;
  background:radial-gradient(ellipse at center,transparent 0 39%,rgba(255,255,255,.48) 42% 44%,transparent 47% 100%);
  animation:threshold-impact .62s cubic-bezier(.12,.72,.18,1) both;
}
.game.world-art-ready .gate.selected.outcome-win .portal{
  transform:scaleX(1.02) scaleY(1.04);
  background:
    linear-gradient(90deg,transparent 0 30%,rgba(224,255,207,.08) 43%,rgba(255,255,255,.88) 49%,#fff 50%,rgba(255,255,255,.88) 51%,rgba(224,255,207,.08) 57%,transparent 70%),
    radial-gradient(ellipse at 50% 52%,#fff 0 4%,rgba(226,255,199,.92) 11%,rgba(162,255,113,.28) 34%,transparent 72%);
  box-shadow:0 0 86px rgba(193,255,150,.46),0 0 150px rgba(255,255,255,.12);
}
.game.world-art-ready .gate.selected.outcome-win .portal::before{
  inset:-18%;
  background:radial-gradient(ellipse at center,transparent 0 42%,rgba(231,255,214,.48) 45% 47%,transparent 50% 100%);
  animation:threshold-win-wave .76s cubic-bezier(.12,.72,.18,1) both;
}
.game.world-art-ready .gate.selected.outcome-win .portal::after{
  width:34%;height:96%;
  background:linear-gradient(180deg,transparent,rgba(247,255,240,.68) 13%,#fff 50%,rgba(237,255,224,.68) 87%,transparent);
  filter:blur(12px);
  opacity:.9;
  animation:threshold-win-core .82s ease-out both;
}
.game.world-art-ready .gate.selected.outcome-lose .portal{
  transform:scaleX(.14) scaleY(.98);
  filter:saturate(.72) brightness(.72);
  background:
    linear-gradient(114deg,transparent 0 35%,rgba(255,125,116,.64) 36% 38%,transparent 39% 53%,rgba(255,92,84,.5) 54% 56%,transparent 57%),
    linear-gradient(66deg,transparent 0 42%,rgba(255,130,120,.46) 43% 45%,transparent 46%),
    radial-gradient(ellipse at center,rgba(255,214,207,.62) 0 3%,rgba(124,14,18,.28) 28%,rgba(6,2,3,.92) 66%);
  box-shadow:0 0 46px rgba(255,69,62,.35),0 0 90px rgba(90,0,8,.22);
}
.game.world-art-ready .gate.selected.outcome-lose .portal::before{
  inset:-10%;
  background:
    linear-gradient(72deg,transparent 0 45%,rgba(255,135,126,.72) 46% 47%,transparent 48%),
    linear-gradient(108deg,transparent 0 52%,rgba(255,91,84,.58) 53% 54%,transparent 55%);
  animation:threshold-loss-fracture .46s ease-out both;
}
.game.world-art-ready .gate.selected.outcome-lose .portal::after{
  width:3px;height:88%;filter:blur(2px);opacity:.68;
  background:linear-gradient(180deg,transparent,rgba(255,151,142,.92) 20%,rgba(255,73,65,.96) 50%,rgba(255,151,142,.86) 80%,transparent);
  animation:none;
}
.game.world-art-ready .result-burst{top:46%}
.game.world-art-ready .result-burst small{
  display:inline-block;
  padding:5px 9px 4px;
  border:1px solid rgba(255,255,255,.16);
  border-radius:999px;
  background:rgba(3,5,7,.42);
  backdrop-filter:blur(10px);
  letter-spacing:.22em;
}
.game.world-art-ready .result-burst strong{
  margin-top:8px;
  font-size:clamp(48px,6.6vw,88px);
  letter-spacing:.035em;
}
.game.world-art-ready .result-burst.win strong{text-shadow:0 0 28px rgba(218,255,187,.32),0 16px 70px #000}
.game.world-art-ready .result-burst.lose strong{text-shadow:0 0 22px rgba(255,92,82,.26),0 16px 70px #000}

@keyframes threshold-pressure{from{transform:scale(.92);opacity:.38}to{transform:scale(1.08);opacity:.82}}
@keyframes threshold-core{from{transform:translate(-50%,-50%) scaleX(.72);opacity:.52}to{transform:translate(-50%,-50%) scaleX(1.28);opacity:1}}
@keyframes threshold-impact{0%{transform:scale(.28);opacity:1}100%{transform:scale(1.65);opacity:0}}
@keyframes threshold-win-wave{0%{transform:scale(.38);opacity:.94}100%{transform:scale(1.8);opacity:0}}
@keyframes threshold-win-core{0%{transform:translate(-50%,-50%) scaleX(.18);opacity:.7}55%{opacity:1}100%{transform:translate(-50%,-50%) scaleX(1.22);opacity:.72}}
@keyframes threshold-loss-fracture{0%{transform:scale(1.08);opacity:0}35%{opacity:1}100%{transform:scale(.88);opacity:.72}}

@media (max-width:760px){
  .game.world-art-ready .gate.selected .portal{transform:scaleX(.22) scaleY(.96)}
  .game.world-art-ready .gate.selected.commit .portal{transform:scaleX(.9) scaleY(1.02)}
  .game.world-art-ready .gate.selected.outcome-win .portal{transform:scaleX(.98) scaleY(1.02)}
  .game.world-art-ready .gate.selected.outcome-lose .portal{transform:scaleX(.18) scaleY(.96)}
  .game.world-art-ready .result-burst strong{font-size:clamp(38px,14vw,60px)}
}



/* Anticipation commitment pressure.
   Once a gate is chosen, the room closes around that commitment without
   changing the 620ms outcome timing or hinting at win/loss. */
.game.world-art-ready.resolving .scene{
  transform-origin:50% 49%;
  transition:transform .18s cubic-bezier(.2,.72,.18,1),filter .18s ease;
}
.game.world-art-ready.resolving .scene::after{
  content:"";
  position:absolute;
  z-index:3;
  inset:0;
  pointer-events:none;
  opacity:.08;
  background:radial-gradient(ellipse at 50% 51%,transparent 22%,rgba(0,0,0,.10) 55%,rgba(0,0,0,.32) 100%);
  transition:opacity .18s ease;
}
.game.world-art-ready.resolving.anticipation-step-1 .scene{
  transform:scale(1.004);
  filter:brightness(.992) saturate(.995);
}
.game.world-art-ready.resolving.anticipation-step-2 .scene{
  transform:scale(1.009);
  filter:brightness(.978) saturate(.985);
}
.game.world-art-ready.resolving.anticipation-step-3 .scene{
  transform:scale(1.015);
  filter:brightness(.958) saturate(.97);
}
.game.world-art-ready.resolving.anticipation-step-1 .scene::after{opacity:.14}
.game.world-art-ready.resolving.anticipation-step-2 .scene::after{opacity:.22}
.game.world-art-ready.resolving.anticipation-step-3 .scene::after{opacity:.32}

.game.world-art-ready .gate-zone.resolving .gate{
  transition:opacity .18s ease,transform .22s cubic-bezier(.16,.78,.18,1);
}
.game.world-art-ready .gate-zone.resolving .gate:not(.selected){opacity:.72}
.game.world-art-ready.anticipation-step-2 .gate-zone.resolving .gate:not(.selected){opacity:.58}
.game.world-art-ready.anticipation-step-3 .gate-zone.resolving .gate:not(.selected){opacity:.44}
.game.world-art-ready.anticipation-step-3 .gate-zone.resolving .gate.selected{
  filter:drop-shadow(0 30px 58px rgba(0,0,0,.42));
}

@media (max-width:760px){
  .game.world-art-ready.resolving.anticipation-step-3 .scene{transform:scale(1.01)}
  .game.world-art-ready.anticipation-step-3 .gate-zone.resolving .gate:not(.selected){opacity:.50}
}
@media (prefers-reduced-motion:reduce){
  .game.world-art-ready.resolving .scene{
    transform:none!important;
    filter:none!important;
    transition:none!important;
  }
  .game.world-art-ready.resolving .scene::after{display:none!important}
  .game.world-art-ready .gate-zone.resolving .gate:not(.selected){opacity:.72}
}