:root{
  --ui-bg: rgba(10,10,16,0.82);
  --ui-border: rgba(255,255,255,0.14);
  --ui-text: #f3f3f6;
  --ui-muted: rgba(243,243,246,0.75);
  --choice-bg: rgba(10,10,16,0.82);
  --choice-hover-bg: rgba(26,26,36,0.88);
  --nameTag-bg: transparent;
  --nameTag-text: #ffffff;
  --shadow: rgba(0,0,0,0.35);
}

html, body{
  margin:0;
  padding:0;
  height:100%;
  background:#0b0b10;
  color: var(--ui-text);
  font-family: system-ui, -apple-system, "Apple SD Gothic Neo", "Noto Sans KR", sans-serif;
}

#app{
  position: fixed;
  inset: 0;
  overflow: hidden;
  -webkit-tap-highlight-color: transparent;
}

/* Layers */
#bgLayer{
  position:absolute;
  inset:0;
  z-index: 0;
  background:#111;
  background-size: cover;
  background-position: center;
  transform: scale(1.02);
  filter: saturate(1.02);
}

#cgLayer{
  position:absolute;
  inset:0;
  z-index: 12;
  opacity: 0;
  transition: opacity 280ms ease;
  width:100%;
  height:100%;
  object-fit: contain;
  display:none;
  background: rgba(0,0,0,0.35);

  -webkit-user-drag: none;
  user-select: none;
  -webkit-touch-callout: none;
}

#cgLayer.visible{
  opacity: 1;
}

#spriteLayer{
  position:absolute;
  inset:0;
  pointer-events:none;
  z-index: 10;
}

.sprite{
  position:absolute;
  bottom:0;
  width: 40%;
  max-width: 520px;
  height:auto;
  opacity:0;
  transform: translateY(8px);
  transition: opacity 180ms ease, transform 180ms ease;
  filter: drop-shadow(0 16px 28px var(--shadow));
}

.sprite.visible{
  opacity:1;
  transform: translateY(0);
}

.slot-left{ left: 2%; }
.slot-center{ left: 30%; }
.slot-right{ right: 2%; }

/* Top bar */
#topBar{
  position:absolute;
  top:0;
  left:0;
  right:0;
  padding: calc(env(safe-area-inset-top) + 8px) 10px 8px 10px;
  display:flex;
  justify-content: space-between;
  align-items: center;
  gap:10px;
  z-index: 45;
  background: linear-gradient(to bottom, rgba(0,0,0,0.45), rgba(0,0,0,0));
}

#topBar .left, #topBar .right{
  display:flex;
  gap:8px;
  align-items:center;
}

.topBtn{
  padding: 8px 10px;
  border-radius: 12px;
  border:1px solid var(--ui-border);
  background: rgba(10,10,16,0.72);
  color: var(--ui-text);
  cursor:pointer;
  font-size: 13px;
}

.topBtn:active{ transform: translateY(1px); }

/* Textbox */
#textbox{
  position:absolute;
  left: 50%;
  bottom: calc(env(safe-area-inset-bottom) + 12px);
  transform: translateX(-50%);
  width: min(960px, 92vw);
  padding: 14px 18px;
  border-radius: 16px;
  background: var(--ui-bg);
  border: 1px solid var(--ui-border);
  box-shadow: 0 18px 38px var(--shadow);
  z-index: 30;
  user-select: none;
}

#nameTag{
  font-weight: 700;
  margin-bottom: 8px;
  color: var(--nameTag-text);
  background: var(--nameTag-bg);
}

#text{
  font-size: 20px;
  line-height: 1.55;
  white-space: pre-wrap;
}

#hint{
  margin-top: 8px;
  font-size: 12px;
  opacity: 0.6;
  text-align: right;
}

/* Choices */
#choices{
  position:absolute;
  left: 50%;
  bottom: calc(env(safe-area-inset-bottom) + 14px);
  transform: translateX(-50%);
  width: min(920px, 92vw);
  display:none;
  z-index: 35;
}

.choiceList{
  display:grid;
  gap: 10px;
}

.choiceBtn{
  padding: 12px 14px;
  font-size: 18px;
  text-align: left;
  color: var(--ui-text);
  background: var(--choice-bg);
  border: 1px solid var(--ui-border);
  border-radius: 14px;
  cursor: pointer;
}

.choiceBtn:hover{ background: var(--choice-hover-bg); }

/* Title card */
#titleCard{
  position:absolute;
  inset:0;
  display:none;
  align-items:center;
  justify-content:center;
  z-index: 40;
  background: rgba(0,0,0,0.35);
}

#titleCard .card{
  width: min(680px, 90vw);
  padding: 22px 18px;
  border-radius: 18px;
  background: rgba(10,10,16,0.88);
  border: 1px solid var(--ui-border);
  text-align:center;
}

#titleCard .main{
  font-size: 34px;
  font-weight: 800;
  margin-bottom: 8px;
}

#titleCard .sub{
  opacity: 0.85;
}

/* Title screen */
#titleScreen{
  position:absolute;
  inset:0;
  z-index: 50;
  display:flex;
  flex-direction: column;
  align-items:center;
  justify-content:center;
}

#titleScreen .title h1{
  margin:0 0 6px 0;
  font-size: 44px;
  line-height: 1.1;
}

#titleScreen .sub{
  opacity: 0.85;
  text-align:center;
}

#titleScreen .menu{
  display:grid;
  gap: 10px;
  width: min(420px, 86vw);
  margin-top: 18px;
}

.bigBtn{
  padding: 14px 14px;
  font-size: 18px;
  border-radius: 16px;
  border: 1px solid var(--ui-border);
  background: rgba(10,10,16,0.78);
  color: var(--ui-text);
  cursor:pointer;
}

.bigBtn:hover{ background: rgba(26,26,36,0.88); }

/* Overlay / modal */
.overlay{
  position:absolute;
  inset:0;
  display:none;
  align-items:center;
  justify-content:center;
  z-index: 60;
  background: rgba(0,0,0,0.55);
  padding: 18px;
}

.overlay.open{ display:flex; }

#overlayBody{
  width: min(840px, 92vw);
  max-height: min(78vh, 720px);
  overflow:auto;
  background: rgba(10,10,16,0.92);
  border: 1px solid var(--ui-border);
  border-radius: 16px;
  box-shadow: 0 22px 60px rgba(0,0,0,0.5);
  padding: 14px;
}

.modalHeader{
  display:flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  padding: 6px 6px 10px 6px;
  border-bottom: 1px solid rgba(255,255,255,0.10);
  margin-bottom: 10px;
}

.modalHeader h2{
  margin:0;
  font-size: 18px;
}

.modalClose{
  padding: 8px 10px;
  border-radius: 12px;
  border: 1px solid var(--ui-border);
  background: rgba(0,0,0,0.25);
  color: var(--ui-text);
  cursor:pointer;
}

.grid{
  display:grid;
  gap: 10px;
}

.saveRow{
  display:flex;
  align-items:center;
  justify-content: space-between;
  gap: 10px;
  padding: 12px;
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,0.12);
  background: rgba(0,0,0,0.18);
}

.saveRow .meta{
  display:flex;
  flex-direction: column;
  gap: 4px;
}

.saveRow .meta .title{ font-weight: 700; }
.saveRow .meta .sub{ opacity:0.78; font-size: 13px; }

.saveRow .actions{
  display:flex;
  gap:8px;
}

.smallBtn{
  padding: 10px 12px;
  border-radius: 12px;
  border: 1px solid var(--ui-border);
  background: rgba(70,120,255,0.22);
  color: var(--ui-text);
  cursor:pointer;
  font-size: 13px;
}

.smallBtn.secondary{
  background: rgba(0,0,0,0.18);
}

.smallBtn:hover{ filter: brightness(1.08); }

.galleryGrid{
  display:grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
}

@media (min-width: 720px){
  .galleryGrid{ grid-template-columns: repeat(3, 1fr); }
}

.cgCard{
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 14px;
  overflow:hidden;
  background: rgba(0,0,0,0.18);
  cursor:pointer;
}

.cgThumb{
  width: 100%;
  aspect-ratio: 16/9;
  object-fit: cover;
  display:block;
  background: rgba(0,0,0,0.28);
}

.cgLabel{
  padding: 10px;
  font-size: 14px;
  opacity: 0.95;
}

.cgLocked .cgThumb{
  filter: blur(7px) brightness(0.55);
}

.cgLocked .cgLabel{
  opacity: 0.7;
}

/* Chat overlay */
#chatOverlay{
  position:absolute;
  inset:0;
  display:none;
  align-items:center;
  justify-content:center;
  z-index: 55;
  background: rgba(0,0,0,0.55);
  padding: 14px;
}

#chatOverlay.open{ display:flex; }

.phone{
  width: min(520px, 92vw);
  height: min(720px, 84vh);
  display:flex;
  flex-direction: column;
  background: rgba(12,12,16,0.96);
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 18px;
  overflow:hidden;
}

.phoneHeader{
  display:flex;
  align-items:center;
  justify-content: space-between;
  gap:10px;
  padding: 12px 12px;
  border-bottom: 1px solid rgba(255,255,255,0.10);
}

.phoneHeader .title{ font-weight: 800; }
.phoneHeader .sub{ opacity:0.75; font-size: 12px; }

.phoneHeader button{
  padding: 8px 10px;
  border-radius: 12px;
  border: 1px solid var(--ui-border);
  background: rgba(0,0,0,0.25);
  color: var(--ui-text);
  cursor:pointer;
}

.phoneBody{
  flex:1;
  overflow:auto;
  padding: 12px;
  display:flex;
  flex-direction: column;
  gap: 10px;
}

.msg{
  max-width: 80%;
  padding: 10px 12px;
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,0.12);
  background: rgba(0,0,0,0.18);
  white-space: pre-wrap;
  line-height: 1.45;
}

.msg.me{
  align-self: flex-end;
  background: rgba(70,120,255,0.18);
}

.msg.other{
  align-self: flex-start;
}

.phoneFooter{
  display:flex;
  gap: 8px;
  padding: 10px 10px;
  border-top: 1px solid rgba(255,255,255,0.10);
}

.phoneFooter input{
  flex:1;
  padding: 10px 10px;
  border-radius: 12px;
  border: 1px solid rgba(255,255,255,0.12);
  background: rgba(0,0,0,0.20);
  color: var(--ui-text);
  outline:none;
}

.phoneFooter button{
  padding: 10px 12px;
  border-radius: 12px;
  border: 1px solid rgba(255,255,255,0.12);
  background: rgba(0,0,0,0.20);
  color: var(--ui-text);
  cursor:pointer;
}

/* Reduce motion */
body.reduce-motion .sprite,
body.reduce-motion #bgLayer{
  transition: none !important;
  transform: none !important;
}

/* ===== Mobile/UI fixes ===== */

#overlay, #chatOverlay { z-index: 9999; }
#overlay { background: rgba(0,0,0,0.55); }

#overlayBody {
  width: min(92vw, 520px);
  max-height: min(86vh, 740px);
  overflow: auto;
}

@media (max-width: 600px) {
  #textbox {
    left: 10px; right: 10px; bottom: 10px;
    transform: none;
    padding: 14px 14px 16px;
    max-height: 38vh;
    border-radius: 16px;
  }
  #nameTag { font-size: 16px; }
  #text { font-size: 17px; line-height: 1.5; }
  #hint { font-size: 12px; opacity: 0.75; }

  #choices{ left: 10px; right: 10px; width: auto; max-width: none; transform: none; }

  #topBar { padding: 10px 12px; }
  .topBtn { padding: 10px 14px; font-size: 14px; }
}

#topBar {
  padding-top: calc(10px + env(safe-area-inset-top));
  padding-left: calc(12px + env(safe-area-inset-left));
  padding-right: calc(12px + env(safe-area-inset-right));
}


/* ===== Character Positioning (Automatic Equidistant Layout) ===== */
/* Calculates uniform spacing based on sprite width to prevent awkward gaps */

:root{
  --ui-textbox-h: 180px;

  /* Desktop Baseline */
  --sprite-maxw: 560px;
  --sprite-bottom-pad: 0px;

  /* 1 Slot - Desktop (w=40%, centered) */
  --sprite-w-1: 58%;
  --slot1-C: 21%; 

  /* 3 Slots - Desktop (w=40%, margin=2% -> gap=28%) */
  --sprite-w-3: 40%;
  --slot3-L: 2%;
  --slot3-C: 30%;
  --slot3-R: 58%;

  /* 4 Slots - Desktop (w=30%, margin=2% -> gap=22%) */
  --sprite-w-4: 30%;
  --slot4-L: 2%;
  --slot4-C: 24%;
  --slot4-E: 46%;
  --slot4-R: 68%;
}

.sprite{
  width: var(--sprite-w-3); /* 기본은 3 slots 기준 */
  max-width: var(--sprite-maxw);
  bottom: calc(env(safe-area-inset-bottom, 0px) + var(--sprite-bottom-pad));
}

/* Apply unified left-based positioning */
.slot-left{ left: var(--slot3-L); right: auto !important; }
.slot-center{ left: var(--slot3-C); right: auto !important; }
.slot-right{ left: var(--slot3-R); right: auto !important; }
.slot-extra{ left: var(--slot4-E); right: auto !important; }

/* 1-slot override: 양옆 캐릭터가 안 보일 때 중앙 슬롯 크기/위치 재정의 */
body:has(#spriteLeft:not(.visible)):has(#spriteRight:not(.visible)) .slot-center {
  width: var(--sprite-w-1);
  left: var(--slot1-C);
}

/* 4-slot overrides */
body.layout4 .sprite{ width: var(--sprite-w-4); }
body.layout4 .slot-left{ left: var(--slot4-L); }
body.layout4 .slot-center{ left: var(--slot4-C); }
body.layout4 .slot-extra{ left: var(--slot4-E); }
body.layout4 .slot-right{ left: var(--slot4-R); }

/* --- Mobile portrait (세로) --- */
@media (max-width: 600px) and (orientation: portrait){
  #textbox, #choices{
    left: 10px !important;
    right: 10px !important;
    width: auto !important;
    max-width: none !important;
    transform: none !important;
  }

  :root{
    --sprite-maxw: none;
    --sprite-bottom-pad: max(0px, calc(var(--ui-textbox-h, 180px) - 80px));

    /* 1 Slot - Portrait (w=68%, centered) */
    --sprite-w-1: 68%;
    --slot1-C: 16%;

    /* 3 Slots - Portrait (w=60%, margin=-8% -> gap=28%) */
    --sprite-w-3: 60%;
    --slot3-L: -8%;
    --slot3-C: 20%;
    --slot3-R: 48%;

    /* 4 Slots - Portrait (w=50%, margin=-10% -> gap=23.3%) */
    --sprite-w-4: 50%;
    --slot4-L: -10%;
    --slot4-C: 13.3%;
    --slot4-E: 36.6%;
    --slot4-R: 60%;
  }

  .sprite{
    max-height: max(0px, calc(100vh - env(safe-area-inset-top, 0px) - var(--ui-textbox-h, 180px) - 16px));
  }

  #text{ font-size: 18px !important; line-height: 1.55 !important; }
  #nameTag{ font-size: 16px !important; }
}

/* --- Mobile landscape (가로) --- */
@media (max-width: 980px) and (orientation: landscape){
  :root{
    --sprite-maxw: none;
    --sprite-bottom-pad: max(0px, calc(var(--ui-textbox-h, 140px) - 80px));

    /* 1 Slot - Landscape (w=46%, centered) */
    --sprite-w-1: 46%;
    --slot1-C: 27%;

    /* 3 Slots - Landscape (w=42%, margin=2% -> gap=27%) */
    --sprite-w-3: 42%;
    --slot3-L: 2%;
    --slot3-C: 29%;
    --slot3-R: 56%;

    /* 4 Slots - Landscape (w=33%, margin=1% -> gap=21.6%) */
    --sprite-w-4: 33%;
    --slot4-L: 1%;
    --slot4-C: 22.6%;
    --slot4-E: 44.3%;
    --slot4-R: 66%;
  }

  .sprite{
    max-height: max(0px, calc(100vh - env(safe-area-inset-top, 0px) - var(--ui-textbox-h, 140px) - 10px));
  }

  #text{ font-size: 18px !important; }
  #hint{ font-size: 12px !important; opacity: 0.75 !important; }
}

/* Theme-consistent UI colors */
.topBtn, .bigBtn, .smallBtn, .choiceBtn, .modalClose{
  color: var(--ui-text);
  background: var(--choice-bg, var(--ui-bg));
  border-color: var(--ui-border);
}
.topBtn:hover, .bigBtn:hover, .smallBtn:hover, .choiceBtn:hover, .modalClose:hover{
  background: var(--choice-hover-bg, rgba(0,0,0,0.12));
}

#overlayBody{
  background: var(--ui-bg);
  border-color: var(--ui-border);
  color: var(--ui-text);
}
#overlayBody *{ color: inherit; }

/* Z-index fixes */
#textbox{ z-index: 30; }
#choices{ z-index: 35; }
#topBar{ z-index: 45; }
#spriteLayer{ z-index: 10; }

@media (prefers-reduced-motion: reduce){
  #cgLayer{ transition: none !important; }
  .sprite{ transition: none !important; }
}

/* Chat UX hardening */
#chatClose, .phoneFooter{ display:none !important; }
.msg{ color:#fff; }