/* ============================================================
   screens.css — 各画面固有レイアウト
   title / quiz / answer / count / pause / result
============================================================ */

/* ================= TITLE (47:1906) ================= */
#screen-title{ justify-content:flex-end; }

/* 地平線基準（空と同じ 420:383 のラッパー） */
.title-skywrap{
  position:absolute; top:0; left:0; width:100%;
  aspect-ratio:420 / 383;
}
.title-logo{
  position:absolute; left:50%; top:47%;
  width:75%; max-width:330px; height:auto;
  transform:translate(-50%,-50%);
  filter:drop-shadow(0 6px 0 rgba(49,34,3,.15));
}
.title-items{
  position:absolute; left:0; right:0; bottom:-24%; height:36%;
}
.title-item{
  position:absolute; bottom:0; width:33%; height:auto;
  filter:drop-shadow(0 5px 3px rgba(0,0,0,.12));
  animation:bob 2.8s ease-in-out infinite;
}
.title-item.ti-1{ left:2%;  transform:rotate(-8deg); animation-delay:0s;   }
.title-item.ti-2{ left:33%; bottom:-6%; animation-delay:.6s;  }
.title-item.ti-3{ right:1%; transform:rotate(12deg); animation-delay:1.2s; }

.title-bottom{
  position:relative; z-index:2;
  display:flex; flex-direction:column; align-items:center; gap:20px;
  padding:0 30px calc(max(20%, 120px) + var(--safe-bottom));
}
.title-copy{
  width:280px; max-width:100%;
  font-weight:900; font-size:22px; line-height:1.2; text-align:center;
  color:var(--brown); text-transform:uppercase;
  /* 白ふち（8方向 + 斜めの text-shadow を重ねて縁取りにする） */
  text-shadow:
    -2px -2px 0 #fff, 2px -2px 0 #fff, -2px 2px 0 #fff, 2px 2px 0 #fff,
    0 -3px 0 #fff, 0 3px 0 #fff, -3px 0 0 #fff, 3px 0 0 #fff,
    -3px -1px 0 #fff, 3px -1px 0 #fff, -3px 1px 0 #fff, 3px 1px 0 #fff,
    -1px -3px 0 #fff, 1px -3px 0 #fff, -1px 3px 0 #fff, 1px 3px 0 #fff;
}
.btn-play{ max-width:280px; }

/* ================= LANGUAGE (151:3984) ================= */
.lang-modal{
  position:absolute; inset:0; z-index:40;
  display:flex; background:rgba(0,0,0,.70);
}
.lang-modal[hidden]{ display:none; }
.card-lang{ padding:40px; gap:20px; }
.lang-title{
  width:100%; text-align:center; font-weight:900; font-size:34px; line-height:1.1;
  color:var(--pink); text-transform:uppercase;
}
.card-lang .btn-stack{ max-width:none; }
.card-lang .btn .btn-inner{ height:110px; text-align:center; }
/* 言語名はそれぞれの言語の書体で固定（画面の言語に関係なく） */
.btn-lang-opt .btn-inner{ font-family:'Luckiest Guy','Arial Rounded MT Bold',sans-serif; }
/* padding は画面の言語に左右されないよう、ここで固定する。
   html[lang="ja"] .btn .btn-inner（詳細度 0,3,1）より強くするため .card-lang を挟んで 0,4,1 にする */
html .card-lang .btn-lang-opt[data-lang="id"] .btn-inner,
html .card-lang .btn-lang-opt[data-lang="en"] .btn-inner{ padding:8px 20px 0; letter-spacing:.09em; }
html .card-lang .btn-lang-opt[data-lang="ja"] .btn-inner{ font-family:var(--font-ja-display); padding:0 20px 8px; letter-spacing:.09em; }

/* ================= QUIZ (16:98) ================= */
.card-quiz{
  /* Figma: 880 中 680（約 77%）。Safari のツールバーで画面が低くなっても上下の余白を保つ。
     内容がそれより高い場合は内容に合わせて伸びる（上限は画面いっぱい） */
  height:auto; min-height:min(680px, 77%); max-height:100%;
  padding:40px 30px; justify-content:space-between; gap:20px;
}
.card-top{ display:flex; flex-direction:column; align-items:center; gap:22px; width:100%; }
.card-bottom{ display:flex; flex-direction:column; align-items:center; gap:20px; width:100%; padding-bottom:6px; }

.quiz-q{
  width:100%; text-align:center;
  font-weight:900; font-size:26px; line-height:1.3;
  color:var(--pink); text-transform:uppercase;
}
.quiz-q.long{ font-size:22px; }
.quiz-item{ width:190px; height:190px; display:flex; align-items:center; justify-content:center; }
.quiz-item img{ width:100%; height:100%; object-fit:contain; }

.ox-row{ display:flex; gap:10px; width:100%; }
.ox-row .btn{ flex:1; border-radius:26px; box-shadow:var(--shadow-btn); }
.ox-row .btn .btn-inner{ height:100px; border-radius:20px; padding:0; }
.ox-row .btn .btn-inner::before{ left:10px; top:6px; }
.ox-row .btn img{ width:50px; height:50px; }

/* ================= ANSWER (17:431 / 45:213) ================= */
.card-answer{
  /* Figma: 880 中 680（約 77%）。Safari のツールバーで画面が低くなっても上下の余白を保つ。
     内容がそれより高い場合は内容に合わせて伸びる（上限は画面いっぱい） */
  height:auto; min-height:min(680px, 77%); max-height:100%;
  padding:36px 26px 46px; justify-content:space-between; gap:16px;
}
.verdict-wrap{ display:flex; flex-direction:column; align-items:center; width:100%; }
.verdict{
  font-family:var(--font-display); font-size:58px; letter-spacing:.06em; line-height:1;
  color:var(--pink); text-transform:uppercase; padding-top:6px;
}
.verdict.salah{ color:var(--dark); }
.verdict-sub{
  width:260px; text-align:center; font-weight:900; font-size:14px; line-height:1.3;
  color:var(--brown); text-transform:uppercase; margin-top:4px;
}
.verdict-mark{ width:110px; height:110px; }
.btn-next{ max-width:280px; }
.btn-next .btn-inner{ height:80px; }

/* ================= COUNTDOWN (45:874 / 45:1457) ================= */
.count-num{
  font-family:var(--font-num); font-size:120px; letter-spacing:.06em; line-height:1;
  color:#fff; text-shadow:10px 10px 0 rgba(0,0,0,.6); text-transform:uppercase;
  padding-top:14px;
  animation:countPop 1s ease both;   /* COUNTDOWN_STEP_MS（1秒）に合わせる */
}

/* ================= PAUSE (46:971) ================= */
.card-pause{ padding:40px; gap:20px; }
.pause-title{
  width:100%; text-align:center; font-weight:900; font-size:34px; line-height:1.3;
  color:var(--pink); text-transform:uppercase;
}
.card-pause .btn-stack{ max-width:none; }

/* ================= RESULT (47:1216〜47:1660) ================= */
.card-result{ padding:60px 40px; gap:50px; }
.result-top{ display:flex; flex-direction:column; align-items:center; gap:30px; width:100%; padding-top:10px; }
.result-title{
  width:100%; text-align:center;
  font-family:var(--font-display); font-size:50px; letter-spacing:.06em; line-height:1;
  color:var(--pink); text-transform:uppercase; padding-top:8px;
}
.result-score{ display:flex; align-items:center; gap:14px; }
.result-score img{ width:60px; height:60px; }
.result-num{
  font-family:var(--font-num); font-size:80px; letter-spacing:.04em; line-height:1;
  color:var(--brown-num); padding-top:12px;
}
.result-num.pop{ animation:starPop .45s ease; }
.result-msg{
  width:100%; text-align:center; font-weight:900; font-size:26px; line-height:1.3;
  color:var(--pink); text-transform:uppercase; min-height:34px;
}

/* ================= 日本語（Figma JP 151:2992） =================
   Dela Gothic One は Luckiest Guy より字面が下に寄らないので、上の詰め物（padding-top）を外す */
html[lang="ja"] .btn .btn-inner{ padding:0 20px 8px; letter-spacing:.06em; }
html[lang="ja"] .btn-square .btn-inner{ padding:8px 0 10px; }   /* ゴミ箱はアイコンのみなので既存のまま */
html[lang="ja"] .ox-row .btn .btn-inner{ padding:0; }
html[lang="ja"] .btn-play .btn-inner{ letter-spacing:0; }
html[lang="ja"] .skip-label{ padding-top:0; }
html[lang="ja"] .verdict{ font-size:53px; padding-top:0; }
html[lang="ja"] .verdict-wrap{ gap:14px; }
html[lang="ja"] .verdict-sub{ margin-top:0; }
html[lang="ja"] .result-title{ letter-spacing:0; padding-top:0; }
html[lang="ja"] .quiz-q.long{ font-size:23px; }

/* ================= 小さい端末（iPhone SE 667px など） ================= */
@media (max-height:700px){
  .title-items{ bottom:-18%; height:32%; }
  .title-bottom{ gap:14px; padding-bottom:calc(60px + var(--safe-bottom)); }
  .title-copy{ font-size:18px; }
  .btn-play .btn-inner{ height:76px; font-size:34px; }

  .card-wrap{ padding-top:calc(14px + var(--safe-top)); padding-bottom:calc(14px + var(--safe-bottom)); }
  .card-quiz{ padding:24px 24px 20px; gap:12px; }
  .card-top{ gap:14px; }
  .card-bottom{ gap:12px; padding-bottom:0; }
  .quiz-q{ font-size:22px; }
  .quiz-q.long{ font-size:19px; }
  .quiz-item{ width:140px; height:140px; }
  .ox-row .btn .btn-inner{ height:84px; }
  .skip-label{ font-size:26px; }

  .card-answer{ padding:24px 22px 28px; gap:10px; }
  .verdict{ font-size:48px; }
  .verdict-mark{ width:84px; height:84px; }
  .hint{ padding:14px 16px; font-size:16px; }
  .btn-next .btn-inner{ height:70px; }

  .card-result{ padding:40px 30px; gap:30px; }
  .result-top{ gap:20px; }
  .card-pause{ padding:30px; }
  .btn-stack .btn .btn-inner{ height:76px; }

  html[lang="ja"] .verdict{ font-size:44px; }
  html[lang="ja"] .quiz-q{ font-size:21px; }
  html[lang="ja"] .quiz-q.long{ font-size:19px; }
  html[lang="en"] .bin-label{ font-size:20px; }
  .card-lang{ padding:30px; }
  .card-lang .btn .btn-inner{ height:90px; }
}