html, body {
  height: 100%;
  height: 100dvh;
  overflow: hidden;
  margin: 0;
}

body {
  position: relative;
  background-image: url(/public/boardgame/seti/assets/background.jpg);
  background-size: cover;
  background-position: center;
  /* breathing room on the sides, requested */
  padding: 0 5vw;
  box-sizing: border-box;
}

* {
  box-sizing: border-box;
}

.app-wrap {
  margin: 0 auto;
  height: 100%;
  height: 100dvh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  /* width is set by main.js so the whole stack fits one screen */
}

.title-block {
  /* half again (was 50%, then 100% before that) */
  width: 25%;
  /* sized to the logo image's own proportions (783x257) so it gets
     breathing room without being stretched or cropped */
  aspect-ratio: 783 / 257;
  /* top: breathing room above the title; bottom: before the wheel */
  margin: 3% auto 4%;
  background-image: url(/public/boardgame/seti/assets/logo_seti_en.png);
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
}

.wheel {
  width: 100%;
  height: 100%;
  background-repeat: no-repeat;
  background-size: contain;
  position: absolute;
}

.fly-wrap {
  width: 100%;
  height: 100%;

  display: flex;
  align-items: center;
  justify-content: center;
  transform-origin: center;
  position: absolute;
  left: 0%;
  right: 0%;
  margin: auto;
  overflow: hidden;
}

.wheel-wrap {
  width: 100%;
  aspect-ratio: 1;
  display: flex;
  transform: rotate(-10);
  position: relative;
  align-items: center;
  justify-content: center;
  transition: opacity 0.2s;
}

.fly-wrap-1 {

  width: 34%;
  height: 34%;
  z-index: 8;
}
.fly-wrap-2 {
  width: 48%;
  height: 48%;
  z-index: 7;
}
.fly-wrap-3 {
  width: 62%;
  height: 62%;
  z-index: 6;
}
.wheel1 {
  background-image: url(/public/boardgame/seti/wheels/wheel1.png);
  animation: sun-rotate 1000s linear;
}
.wheel1.wheel-blur {
  background-image: url(/public/boardgame/seti/wheels/wheel1blur.png);
}
.wheel2 {
  background-image: url(/public/boardgame/seti/wheels/wheel2.png);
  animation: sun-rotate 1600s linear;
}
.wheel2.wheel-blur {
  background-image: url(/public/boardgame/seti/wheels/wheel2blur.png);
}
.wheel3 {
  background-image: url(/public/boardgame/seti/wheels/wheel3.png);
  animation: sun-rotate 2800s linear;
}
.wheel3.wheel-blur {
  background-image: url(/public/boardgame/seti/wheels/wheel3blur.png);
}
.wheel4 {
  background-image: url(/public/boardgame/seti/wheels/wheel4.png);
  z-index: 5;
  animation: sun-rotate 5000s linear;
}

.sun {
  position: absolute;
  margin: auto;
  top: 45%;
  background-image: url(/public/boardgame/seti/assets/sun.png);
  background-size: cover;
  width: 10%;
  height: 10%;
  z-index: 200;
  animation: sun-rotate 1800s linear;
}
@keyframes sun-rotate {
  from {
    transform: rotate(0);
  }

  to {
    transform: rotate(-36000deg);
  }
}


button {
  background-image: url(/public/boardgame/seti/assets/button.png);
  background-size: cover;
  /* was 36%, then halved to 18%; bumped up a bit now that the mission
     labels freed up some vertical space */
  width: 21%;
  aspect-ratio: 1;
  transition: transform .1s, filter .2s;
  display: block;
  border: unset;
  background-color: transparent;
  /* kept proportional to button width (was -4% at 36%, -2% at 18%) */
  margin-top: -2.3%;
}

button.pulsin {
  animation: pulse 1s alternate infinite;

}

@keyframes pulse {
  from {
    filter: drop-shadow(0px 0px 5px #41BFE7)
  }
  to {
    filter: drop-shadow(0px 0px 10px #41BFE7)
  }
}



.connector {
  aspect-ratio: 0.9;
  /* was 20%, then halved to 10%; scaled up with the button (same ratio) */
  width: 11.7%;
  background-repeat: no-repeat;
  background-image: url(/public/boardgame/seti/assets/connector.png);
  background-size: 100% 100%;
}

button:active {
  transform: scale(0.9);
}
button:hover {
  transform: scale(1.1);
  filter: brightness(1.1);
}

.button-wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-bottom: 4%;
}


.sector-wrap {
  position: absolute;
  width: 75%;
  height: 30%;
  z-index: 250;
  pointer-events: none;
}

#sector-wrap-1 {
  top: 0.2%
}

#sector-wrap-2 {
  right: 47.1%;
  transform: rotate(-90deg)
}

#sector-wrap-3 {
  left: 47.1%;
  transform: rotate(90deg)
}

#sector-wrap-4 {
  bottom: 0.2%;
  transform: rotate(180deg)
}

.sector {
  background-repeat: no-repeat;
  background-size: 100%;
  width: 100%;
  height: 100%;
  animation: sector-name-fadein 2s ease-out forwards;
}

.sector-1 {
  background-image: url(/public/boardgame/seti/assets/sector1.png);
}
.sector-2 {
  background-image: url(/public/boardgame/seti/assets/sector2.png);
}
.sector-3 {
  background-image: url(/public/boardgame/seti/assets/sector3.png);
}
.sector-4 {
  background-image: url(/public/boardgame/seti/assets/sector4.png);
}

.sector-label {
  position: absolute;
  top: 5%;
  width: 100%;
  height: 25%;
  background-position: center;
  background-size: contain;
  background-repeat: no-repeat;
  animation: sector-name-fadein 4s ease-out forwards;
}

@keyframes sector-name-fadein {
  from {
    transform: translate(0, -300%) scale(2);
    opacity: 0;
  }
  to {
    transform: translate(0, 0%) scale(1);
    opacity: 1;
  }
}


.sector-label-1 {
  background-image: url(/public/boardgame/seti/assets/name1.png);
}
.sector-label-2 {
  background-image: url(/public/boardgame/seti/assets/name2.png);
}
.sector-label-3 {
  background-image: url(/public/boardgame/seti/assets/name3.png);
}
.sector-label-4 {
  background-image: url(/public/boardgame/seti/assets/name4.png);
}

/* ------------------------------------------------------------------ */
/* Added feature: mission cards (Gold Scoring Tiles).                   */
/* Sits between the wheel and the spin button. Drawn together with the  */
/* wheels by that same button — no separate button. Each slot shows a  */
/* label (기술/임무/수입/기타) above its square; give each .mission-card */
/* a background-image the same way sector-1..4 do above (see IMAGES.md)*/
/* to change the art, or swap main.js's MISSION_SETS to repoint them.   */
/* ------------------------------------------------------------------ */

.missions-bar {
  width: 100%;
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  gap: 2%;
  /* breathing room above (below the wheel) and below (before the button) */
  margin: 4% 0;
}

.mission-slot {
  flex: 1 1 0;
  min-width: 0;
  container-type: inline-size;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0;
}

.mission-label {
  font-family: system-ui, -apple-system, "Segoe UI", sans-serif;
  font-weight: 600;
  font-size: 15cqi;
  letter-spacing: .03em;
  color: #eaf1fb;
  line-height: 1;
  position: relative;
  z-index: 1;
  text-align: center;
}

.mission-card {
  width: 100%;
  aspect-ratio: 1;
  border-radius: 10%;
  border: 1px solid rgba(255, 255, 255, 0.18);
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  /* pulls the square up snug against the label above it — negative gap
     isn't valid CSS, so the overlap is done with a margin instead */
  margin-top: -3cqi;
}

.mission-card.chosen-a,
.mission-card.chosen-b {
  animation: sector-name-fadein 0.6s ease-out;
}

/* ------------------------------------------------------------------ */
/* 진짜 원인: 위쪽의 전역 "button {...}" 규칙(스핀 버튼용으로 만든,       */
/* width:21%+aspect-ratio:1인 정사각형 큰 버튼)이 element 선택자라       */
/* /pwa-install.js가 화면 구석에 새로 만드는 <button class="pwa-install- */
/* fab"> 에도 그대로 적용되고 있었음 — 그 스크립트는 width/aspect-ratio/ */
/* background-image 를 아예 안 정하므로, 충돌 없는 이 값들은 그대로      */
/* 새어 들어와서 뷰포트 폭의 21% 크기 정사각형이 돼버린 것(= "화면의     */
/* 1/4"). 여기서 그 속성들을 전부 다시 정해서 막음 — 기기 종류와 무관하게 */
/* 항상 작은 구석 버튼으로 고정. /pwa-install.js 자체나 다른 앱은 그대로. */
/* ------------------------------------------------------------------ */

body .pwa-install-fab {
  width: auto;
  height: auto;
  aspect-ratio: unset;
  background-image: none;
  background-size: auto;
  margin-top: 0;
  display: flex;
  padding: 8px 14px;
  gap: 5px;
  font-size: 13px;
  box-shadow: 0 4px 12px rgba(60, 40, 120, 0.3);
}