.siteMain{
  min-height:100vh;
  background:var(--color-page-bg);
}

.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:82%;

  --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:var(--color-card-bg);
  border:1px solid var(--color-border-accent);
  border-radius:var(--radius-panel);
  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(--text-main);
}

.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);
}

.sceneDialogue{
  position:absolute;
  left:72%;
  bottom:107%;
  transform:translate(-50%, 14px);
  display:flex;
  justify-content:center;
  width:min(430px, 42vw);
  z-index:9;
  opacity:0;
  pointer-events:none;
  transition:
    opacity .26s ease,
    transform .26s ease;
}

.sceneDialogue.is-visible{
  opacity:1;
  transform:translate(-50%, 0);
}

.sceneDialogue.is-changing{
  opacity:0;
  transform:translate(-50%, 10px);
}

.sceneDialogue__bubble{
  position:relative;
  width:fit-content;
  max-width:100%;
  padding:14px 18px;
  border-radius:18px;
  background:rgba(251, 239, 212, 0.96);
  color:#24180a;
  border:1px solid rgba(124, 80, 11, 0.28);
  box-shadow:0 16px 34px rgba(0,0,0,0.28);
}

.sceneDialogue__bubble::after{
  content:"";
  position:absolute;
  left:20%;
  bottom:-11px;
  width:20px;
  height:20px;
  background:rgba(251, 239, 212, 0.96);
  border-right:1px solid rgba(124, 80, 11, 0.28);
  border-bottom:1px solid rgba(124, 80, 11, 0.28);
  transform:translateX(-50%) rotate(45deg);
  border-bottom-right-radius:4px;
}

.sceneDialogue__text{
  margin:0;
  font-size:clamp(0.95rem, 1.1vw, 1.08rem);
  line-height:1.45;
  text-align:center;
}

/* 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:var(--color-page-bg);
}

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:79%;

    --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;
  }

  .sceneDialogue{
  width:min(520px, 58vw);
  }

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

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

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

    --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;
  }

  .sceneDialogue{
  width:min(92vw, 340px);
  }

  .sceneDialogue__bubble{
    padding:12px 14px;
    border-radius:16px;
  }

  .sceneDialogue__text{
    font-size:0.94rem;
    line-height:1.4;
  }

  .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;
  }
}

.siteFooter{
  margin-top:clamp(56px, 8vw, 96px);
  padding:90px 0 0;
}

.siteFooter__nav{
  display:grid;
  grid-template-columns:repeat(2, minmax(0, 1fr));
  gap:clamp(32px, 6vw, 86px);
  width:min(1120px, calc(100% - 32px));
  margin:0 auto;
  padding-bottom:70px;
  align-items:start;
  align-content:start;
}

.siteFooter__section{
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  justify-content:flex-start;
  align-self:start;
  height:auto;
  min-width:0;
}

.siteFooter__heading{
  margin:0 0 24px;
  font-size:clamp(1.05rem, 1.6vw, 1.35rem);
  line-height:1.1;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--text-main);
}

.siteFooter__columns{
  display:grid;
  grid-template-columns:repeat(2, minmax(0, 1fr));
  gap:clamp(18px, 3vw, 42px);
  width:100%;
  align-items:start;
  align-content:start;
}

.siteFooter__group{
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  justify-content:flex-start;
  gap:14px;
  min-width:0;
}

.siteFooter__group a{
  width:100%;
  text-align:left;
  line-height:1.16;
  white-space:normal;
}

.siteFooter p{
  width:100%;
  margin:0;
  padding:9px 20px;
  text-align:center;
  color:var(--text-dim);
  background:var(--color-header-bg);
  border-top:1px solid var(--color-border-accent);
  border-radius:0;
  box-shadow:none;
  box-sizing:border-box;
}

@media (max-width: 760px){
  .siteFooter{
    margin-top:48px;
    padding:70px 0 0;
  }

  .siteFooter__nav{
    grid-template-columns:repeat(2, minmax(0, 1fr));
    gap:22px;
    width:min(620px, calc(100% - 32px));
    padding-bottom:56px;
    align-items:start;
    align-content:start;
  }

  .siteFooter__section{
    align-self:start;
  }

  .siteFooter__columns{
    grid-template-columns:1fr;
    gap:10px;
    align-items:start;
    align-content:start;
  }

  .siteFooter__heading{
    margin-bottom:16px;
    font-size:1rem;
  }

  .siteFooter__group{
    gap:10px;
  }

  .siteFooter p{
    margin:0;
    padding:8px 16px;
  }
}

@media (max-width: 420px){
  .siteFooter__nav{
    gap:16px;
  }
}

@media (min-width: 761px){
  .siteFooter__section:nth-child(2){
    padding-left:clamp(48px, 7vw, 120px);
  }
}

@media (max-width: 760px){
  .siteFooter__section:nth-child(2){
    padding-left:clamp(20px, 6vw, 38px);
  }
}