/* =========================
   iOS Safari text autosize OFF (hard)
   ========================= */
html, body, *, *::before, *::after{
  -webkit-text-size-adjust: 100% !important;
  text-size-adjust: 100% !important;
}

/* =========================
   Base
   ========================= */
html, body{
  margin:0;
  width:100%;
  height:100%;
  height:-webkit-fill-available;
  overflow:hidden;
  overscroll-behavior:none;
  background:#050505;
}

/* ✅ iPhone横向き “中央ズレ” 対策 */
body{
  padding-left: env(safe-area-inset-left);
  padding-right: env(safe-area-inset-right);
  box-sizing: border-box;
}

:root{
  --title-font-pc: 40px; --title-tracking-pc: 0.39em;
  --title-font-tab: 40px; --title-tracking-tab: 0.50em;
  --title-font-sp: 22px; --title-tracking-sp: 0.44em;

  --icons-size-pc: 29px; --icons-size-sp: 20px;
  --icons-gap-pc: 1.50rem; --icons-gap-sp: 1.20rem;

  --divider-thickness: 1px;
  --divider-color: rgba(255,255,255,0.25);
  --divider-gap: 1.68rem;

  --top-body-minH: calc(3 * 2.1em);
  --divider-width-pc: 38%;
  --divider-width-sp: 38%;

  /* ✅ scale (JS sets) */
  --ns-scale: 1;

  /* ===== AUDIO (Glass) ===== */
  --ap-w: 370px;
  --ap-pad: 12px;
  --ap-radius: 18px;
  --ap-blur: 16px;

  --ap-bg: rgba(255,255,255,0.02);
  --ap-border: rgba(255,255,255,0.08);
  --ap-glow: rgba(255,255,255,0.06);

  --ap-txt: #FFFFFFE6;
  --ap-sub: #FFFFFF99;

  --ap-scale: 0.70;  /* PC */
}

/* =========================
   ✅ PC Design-as-Board scaling for SP landscape
   ========================= */
#nsScaleViewport{
  position: fixed;
  inset: 0;
  z-index: 1; /* above background */
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

/* PC design board size */
#nsScaleBoard{
  width: 1024px;
  height: 768px;
  transform-origin: center center;
}

/* default */
html:not(.ns-land-sp) #nsScaleBoard{ transform: none; }
/* SP landscape: JS sets --ns-scale */
html.ns-land-sp #nsScaleBoard{ transform: scale(var(--ns-scale, 1)); }

/* stage uses full board */
#nsScaleBoard .stage{
  width: 100%;
  height: 100%;
}

/* =========================
   Layout (inside stage)
   ========================= */
.stage{
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0;
}

.ns-title-frame{
  width: 100% !important;
  max-width: 520px !important;
  margin: 0 auto !important;
  left: 0 !important;
  right: 0 !important;
}

.ns-title-wrap-top{
  width:100%;
  display:block;
  text-align:center;
  position:relative;
  overflow:visible;
}

h1#nsTitle{
  display:block;
  margin:0;
  padding:0;
  color:#fff;
  font-family: Georgia,'Times New Roman',Times,serif;
  font-weight:400;
  line-height:1.125;
  text-transform:uppercase;
  white-space:nowrap;
  overflow:hidden;
  -webkit-text-size-adjust:100%;
  font-size: var(--title-font-pc);
  letter-spacing: var(--title-tracking-pc);
  visibility:visible;
  opacity:0;
  transition: opacity 1.0s ease;
}
@media (max-width:1024px){
  h1#nsTitle{ font-size: var(--title-font-tab); letter-spacing: var(--title-tracking-tab); }
}
@media (max-width:640px){
  h1#nsTitle{ font-size: var(--title-font-sp); letter-spacing: var(--title-tracking-sp); }
}

.ns-top-block{
  width:min(90%,640px);
  margin: 4rem auto 0;
  text-align:center;
  min-height: var(--top-body-minH);
  opacity:1;
}

.ns-i18n{
  display:block;
  margin:0;
  white-space:pre-line;
  line-height:1.0;
  font-size:1.3rem;
  letter-spacing:0.12em;
  font-family:'Lateef',serif;
  font-weight:400;
  color:#fff;
}

@media (max-width:640px){
  .ns-i18n{
    font-size: 0.9rem;
    line-height: 1.10;
    letter-spacing: 0.10em;
  }
}