.siteMain{
  min-height:100vh;
  background:
    radial-gradient(circle at 50% 14%, rgba(61, 40, 94, 0.16), transparent 34%),
    linear-gradient(to bottom, #050507 0%, #090711 52%, #110915 100%);
}

.scene{
  position:relative;
  overflow:hidden;
}

.scene--selection{
  position:relative;
  isolation:isolate;
  min-height:unset;
  background:transparent;
}

.scene__bg{
  position:absolute;
  inset:0;
  pointer-events:none;
}

.sceneStage{
  position:relative;
  width:100%;
  min-height:auto;
  overflow:hidden;
  padding:calc(var(--header-h) + 20px) 16px 0;
}

.sceneStageShell{
  --scene-top-space:62%;

  --curtain-bg-width:108%;
  --curtain-bg-bottom:73%;

  --curtain-width:70%;
  --curtain-bottom:0%;
  --curtain-left-x:-10%;
  --curtain-right-x:-10%;

  --character-width:58%;
  --character-bottom:10%;

  --prop-left-x:6%;
  --prop-left-top:-20%;
  --prop-left-width:25%;

  --prop-right-x:4%;
  --prop-right-top:-70%;
  --prop-right-width:25%;

  --fan-top:14%;
  --fan-width:72%;
  --fan-height:34%;

  position:relative;
  width:clamp(720px, 70vw, 1100px);
  max-width:100%;
  margin:0 auto;
}

.sceneStageShell::before{
  content:"";
  display:block;
  padding-top:var(--scene-top-space);
}

/* HUD */

.selectionHud{
  position:absolute;
  top:18px;
  left:50%;
  transform:translateX(-50%);
  z-index:40;
  width:min(760px, calc(100vw - 28px));
  text-align:center;
  padding:18px 20px;
  background:rgba(10, 7, 12, 0.68);
  border:1px solid rgba(255,255,255,0.08);
  border-radius:24px;
  box-shadow:var(--shadow-soft);
  backdrop-filter:blur(8px);
}

.selectionHud h1{
  margin:0 0 8px;
  font-size:clamp(2rem, 4vw, 4rem);
  line-height:1;
  color:var(--gold-soft);
}

.selectionHud p{
  margin:0 0 10px;
  color:var(--text-dim);
  font-size:clamp(1rem, 1.4vw, 1.25rem);
}

.selectionCounter{
  font-size:clamp(1rem, 1.5vw, 1.35rem);
  font-weight:700;
  letter-spacing:0.04em;
  color:var(--text-main);
}

/* ALLT ÄR ANKRAT I BORDET */

.sceneTableAnchor{
  position:relative;
  z-index:10;
  width:100%;
}

.sceneTableComposite{
  position:relative;
  width:100%;
  overflow:visible;
}

.tableImage{
  display:block;
  width:100%;
  height:auto;
  object-fit:contain;
  position:relative;
  z-index:3;
}

/* Bakgrundsgardin */
.scene__curtainBackground{
  position:absolute;
  left:50%;
  bottom:var(--curtain-bg-bottom);
  transform:translateX(-50%);
  width:var(--curtain-bg-width);
  z-index:1;
  pointer-events:none;
}

.scene__curtainBackground img{
  display:block;
  width:100%;
  height:auto;
  object-fit:contain;
}

/* Sidogardiner */
/* Sidogardiner är också knutna till bordet */
.scene__curtain{
  position:absolute;
  bottom:18%;
  width:50%;
  z-index:2;
  pointer-events:none;
}

.scene__curtain img{
  display:block;
  width:100%;
  height:auto;
  object-fit:contain;
}

.scene__curtain--left{
  left:-9%;
}

.scene__curtain--right{
  right:-9%;
}

/* Karaktär */
.scene__character{
  position:absolute;
  left:50%;
  bottom:82.5%;
  transform:translateX(-50%);
  width:66%;
  z-index:5;
  pointer-events:none;
}

.fortuneTeller{
  display:block;
  width:100%;
  height:auto;
  object-fit:contain;
}

/* Bordets aktiva yta */
.sceneTableSurface{
  position:absolute;
  inset:0;
  z-index:6;
  pointer-events:none;
}

/* Props */
.scene__tableProp{
  position:absolute;
  z-index:7;
  pointer-events:none;
}

.scene__tableProp img{
  display:block;
  width:100%;
  height:auto;
}

.scene__tableProp--left{
  left:var(--prop-left-x);
  top:var(--prop-left-top);
  width:var(--prop-left-width);
}

.scene__tableProp--right{
  right:var(--prop-right-x);
  top:var(--prop-right-top);
  width:var(--prop-right-width);
}

/* Kortfläkt */
.tarotFan{
  position:absolute;
  left:50%;
  top:var(--fan-top);
  transform:translateX(-50%);
  width:var(--fan-width);
  height:var(--fan-height);
  z-index:10;
  pointer-events:auto;
}

/* TOPVIEW */

.scene--topview{
  display:none;
  min-height:auto;
  background:
    radial-gradient(circle at center, rgba(95,40,66,0.2), transparent 40%),
    linear-gradient(to bottom, #09070a 0%, #140a13 100%);
}

body.phase-topview .scene--selection{
  display:none;
}

body.phase-topview .scene--topview{
  display:flex;
}

.topviewPlaceholder{
  width:min(780px, calc(100vw - 32px));
  padding:32px;
  text-align:center;
  background:var(--panel);
  border:1px solid var(--panel-border);
  border-radius:22px;
}

/* ALL RESPONSIVE STYRNING LIGGER NU HÄR I SAMMA FIL */

@media (max-width: 1200px){
  .sceneStageShell{
    --scene-top-space:63%;

    --curtain-bg-width:110%;
    --curtain-bg-bottom:72%;

    --curtain-width:32%;
    --curtain-bottom:0%;
    --curtain-left-x:-9%;
    --curtain-right-x:-9%;

    --character-width:59%;
    --character-bottom:52%;

    --fan-top:14.5%;
    --fan-width:71%;
    --fan-height:33%;

    width:min(92vw, 1120px);
  }
}

@media (max-width: 900px){
  .selectionHud{
    top:14px;
    width:calc(100vw - 22px);
    padding:14px 16px;
  }

  .selectionHud h1{
    font-size:clamp(1.9rem, 7vw, 3rem);
  }

  .selectionHud p{
    font-size:1rem;
  }

  .sceneStage{
    padding:calc(var(--header-h) + 20px) 10px 0;
  }

  .sceneStageShell{
    --scene-top-space:65%;

    --curtain-bg-width:112%;
    --curtain-bg-bottom:71%;

    --curtain-width:34%;
    --curtain-bottom:0%;
    --curtain-left-x:-8%;
    --curtain-right-x:-8%;

    --character-width:60%;
    --character-bottom:51%;

    --prop-left-x:5%;
    --prop-left-top:-18%;
    --prop-left-width:24%;

    --prop-right-x:4%;
    --prop-right-top:-64%;
    --prop-right-width:24%;

    --fan-top:15.5%;
    --fan-width:69%;
    --fan-height:31%;

    width:min(96vw, 980px);
  }

  .tarotCard{
    width:112px;
  }
}

@media (max-width: 700px){
  .siteHeader__inner{
    grid-template-columns:56px 1fr;
  }

  .siteHeader__right{
    display:none;
  }

  .scene--selection,
  .sceneStage{
    min-height:auto;
  }

  .selectionHud{
    top:12px;
    width:calc(100vw - 20px);
    padding:14px 14px;
    border-radius:18px;
  }

  .selectionHud h1{
    font-size:clamp(1.7rem, 8vw, 2.7rem);
  }

  .selectionHud p{
    font-size:0.95rem;
  }

  .selectionCounter{
    font-size:1rem;
  }

  .sceneStage{
    padding:calc(var(--header-h) + 20px) 8px 0;
  }

  .sceneStageShell{
    --scene-top-space:68%;

    --curtain-bg-width:116%;
    --curtain-bg-bottom:70%;

    --curtain-width:36%;
    --curtain-bottom:64%;
    --curtain-left-x:-7%;
    --curtain-right-x:-7%;

    --character-width:62%;
    --character-bottom:50%;

    --prop-left-x:4.5%;
    --prop-left-top:-17%;
    --prop-left-width:23%;

    --prop-right-x:3.5%;
    --prop-right-top:-60%;
    --prop-right-width:23%;

    --fan-top:16.5%;
    --fan-width:68%;
    --fan-height:29%;

    width:min(98vw, 980px);
  }

  .scene__curtain{
    opacity:1;
  }

  .tarotCard{
    width:88px;
  }
}