/* AquaGO 海洋人格測驗 — 沿用主站深藍玻璃風格 */

/* 內海字体（手寫感），只切出結果頁引言會用到的字，原始全字庫檔案太大不適合網頁載入 */
@font-face{
  font-family:'NaikaiFont';
  src:url('fonts/NaikaiFont-Bold-subset.woff2') format('woff2');
  font-weight:700;
  font-display:swap;
}

:root{
  --primary:#2FA4C7;
  --primary-rgb:47,164,199;
  --bg-dark:#0A1628;
  --bg-darker:#040B14;
}

*{margin:0;padding:0;box-sizing:border-box;}

html,body{
  background:var(--bg-dark);
  color:#fff;
  font-family:'Inter',sans-serif;
  width:100%;
  min-height:100dvh;
}

body{
  background:
    radial-gradient(120% 60% at 50% -10%, rgba(47,164,199,0.16), transparent 60%),
    var(--bg-dark);
}

a{color:inherit;}
button{font-family:inherit;}

::selection{background:rgba(var(--primary-rgb),0.35);}

/* ---------- SHELL ---------- */
#quiz-shell{
  max-width:600px;
  margin:0 auto;
  min-height:100dvh;
  display:flex;
  flex-direction:column;
  padding:0 20px;
}

/* ---------- TOPBAR ---------- */
#quiz-topbar{
  position:relative;
  z-index:20;
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  gap:12px;
  padding:16px 0;
}
.question-nav{
  display:flex;
  align-items:center;
  gap:14px;
  margin-bottom:20px;
}
.q-back-btn{
  display:flex;
  align-items:center;
  justify-content:center;
  width:36px;
  height:36px;
  min-width:36px;
  border-radius:50%;
  border:1px solid rgba(255,255,255,0.14);
  background:rgba(255,255,255,0.06);
  color:#fff;
  font-size:18px;
  cursor:pointer;
  transition:background 0.2s ease;
}
.q-back-btn:hover{background:rgba(255,255,255,0.12);}
.q-progress-track{
  flex:1;
  height:6px;
  border-radius:999px;
  background:rgba(255,255,255,0.14);
  overflow:hidden;
}
.q-progress-fill{
  height:100%;
  width:0%;
  border-radius:999px;
  background:linear-gradient(to right, #2B6A99, #47B0FF, #47F6FF);
  transition:width 0.35s ease;
}
#quizAppLink{
  display:flex;
  align-items:center;
  flex-shrink:0;
}
#quizAppLink img{
  height:36px;
  width:auto;
  display:block;
}

/* ---------- MAIN ---------- */
#quizMain{
  flex:1;
  padding-bottom:48px;
}

.screen{
  animation:screenFade 0.35s ease;
}
@keyframes screenFade{
  from{opacity:0; transform:translateY(8px);}
  to{opacity:1; transform:translateY(0);}
}
@media (prefers-reduced-motion: reduce){
  .screen{animation:none;}
}

.eyebrow{
  font-family:'Manrope',sans-serif;
  font-size:12px;
  font-weight:700;
  letter-spacing:0.14em;
  color:var(--primary);
  text-transform:uppercase;
  margin-bottom:14px;
}

/* ---------- COVER ---------- */
.screen-cover{position:relative;}

.cover-hero{
  position:relative;
  width:100vw;
  margin-left:calc(50% - 50vw);
  margin-bottom:-48px;
  min-height:100dvh;
  display:flex;
  flex-direction:column;
  padding:20px 24px 64px;
  overflow:hidden;
  background:
    linear-gradient(180deg, rgba(4,11,20,0.28), transparent 22%, transparent 68%, rgba(4,11,20,0.35)),
    url('desktop_bg.png') center/cover no-repeat;
}
@media (max-width:640px){
  .cover-hero{
    padding-left:36px;
    padding-right:36px;
    background:
      linear-gradient(180deg, rgba(4,11,20,0.28), transparent 22%, transparent 68%, rgba(4,11,20,0.35)),
      url('mobile_bg2.png') center/cover no-repeat;
  }
  .cover-hero-body{max-width:340px;}
}

.bubble-layer{
  position:absolute;
  top:0;
  left:0;
  right:0;
  height:100dvh;
  overflow:hidden;
  pointer-events:none;
  z-index:1;
}
.bubble{
  position:absolute;
  bottom:-40px;
  width:10px;
  height:10px;
  border-radius:50%;
  background:rgba(255,255,255,0.28);
  box-shadow:inset -2px -2px 3px rgba(255,255,255,0.25), inset 1px 1px 2px rgba(255,255,255,0.5);
  animation:bubble-rise linear infinite;
}
@keyframes bubble-rise{
  0%{transform:translateY(0) translateX(0); opacity:0;}
  10%{opacity:0.7;}
  90%{opacity:0.5;}
  100%{transform:translateY(-115vh) translateX(var(--bubble-drift,10px)); opacity:0;}
}
.bubble-0{left:6%;  width:7px;  height:7px;  animation-duration:12s; animation-delay:0s;   --bubble-drift:12px;}
.bubble-1{left:16%; width:11px; height:11px; animation-duration:15s; animation-delay:2s;   --bubble-drift:-14px;}
.bubble-2{left:27%; width:6px;  height:6px;  animation-duration:10s; animation-delay:4.5s; --bubble-drift:8px;}
.bubble-3{left:38%; width:9px;  height:9px;  animation-duration:13s; animation-delay:1s;   --bubble-drift:-10px;}
.bubble-4{left:48%; width:13px; height:13px; animation-duration:17s; animation-delay:6s;   --bubble-drift:16px;}
.bubble-5{left:58%; width:7px;  height:7px;  animation-duration:11s; animation-delay:3s;   --bubble-drift:-8px;}
.bubble-6{left:67%; width:10px; height:10px; animation-duration:14s; animation-delay:7.5s; --bubble-drift:10px;}
.bubble-7{left:76%; width:6px;  height:6px;  animation-duration:9s;  animation-delay:0.5s; --bubble-drift:-6px;}
.bubble-8{left:84%; width:12px; height:12px; animation-duration:16s; animation-delay:5s;   --bubble-drift:14px;}
.bubble-9{left:92%; width:8px;  height:8px;  animation-duration:12.5s; animation-delay:8.5s; --bubble-drift:-12px;}
.bubble-10{left:22%; width:5px; height:5px;  animation-duration:9.5s; animation-delay:10s;  --bubble-drift:6px;}
.bubble-11{left:71%; width:5px; height:5px;  animation-duration:10.5s; animation-delay:9s;  --bubble-drift:-6px;}
@media (prefers-reduced-motion: reduce){
  .bubble{animation:none !important; display:none;}
}

.cover-hero-topbar{
  position:relative;
  z-index:2;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  max-width:1200px;
  width:100%;
  margin:0 auto;
}
.cover-logo{height:20px;display:block;}
.cover-lang-toggle{
  display:flex;
  align-items:center;
  gap:8px;
}
.cover-lang-option{
  border:none;
  background:none;
  padding:4px 2px;
  font-family:'Inter',sans-serif;
  font-size:13px;
  font-weight:600;
  color:rgba(255,255,255,0.55);
  cursor:pointer;
  transition:color 0.2s ease;
  touch-action:manipulation;
}
.cover-lang-option.active{color:#fff;}
.cover-lang-sep{color:rgba(255,255,255,0.3); font-size:13px;}

.cover-hero-body{
  position:relative;
  z-index:2;
  flex:1;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  text-align:center;
  max-width:600px;
  width:100%;
  margin:0 auto;
  padding:8vh 0;
}
.cover-hero-eyebrow{
  color:#0E3247;
  opacity:0.75;
  text-shadow:0 1px 1px rgba(255,255,255,0.4), 0 0 18px rgba(255,255,255,0.45);
}
.cover-title{
  font-family:'Manrope',sans-serif;
  font-weight:800;
  font-size:clamp(32px,5.2vw,48px);
  line-height:1.2;
  letter-spacing:-0.01em;
  color:#0A2A43;
  margin-bottom:16px;
  text-shadow:0 1px 2px rgba(255,255,255,0.4), 0 0 22px rgba(255,255,255,0.4);
}
.cover-intro{
  font-size:16px;
  line-height:1.6;
  color:rgba(10,42,67,0.78);
  max-width:460px;
  margin-bottom:32px;
  text-shadow:0 1px 1px rgba(255,255,255,0.35), 0 0 16px rgba(255,255,255,0.35);
}
.cover-hero-panel{
  width:100%;
  max-width:380px;
  padding:16px 18px;
  border-radius:18px;
  background:rgba(4,11,20,0.45);
  backdrop-filter:blur(10px);
  -webkit-backdrop-filter:blur(10px);
  border:1px solid rgba(255,255,255,0.12);
  text-align:left;
  margin-bottom:24px;
}
.name-label{
  display:block;
  font-family:'Manrope',sans-serif;
  font-weight:600;
  font-size:13px;
  color:rgba(255,255,255,0.6);
  margin-bottom:8px;
}
.name-input{
  width:100%;
  height:52px;
  padding:0 16px;
  border-radius:14px;
  border:1px solid rgba(255,255,255,0.14);
  background:rgba(255,255,255,0.06);
  color:#fff;
  font-size:16px;
  outline:none;
  transition:border-color 0.2s ease, background 0.2s ease;
}
.name-input::placeholder{color:rgba(255,255,255,0.4);}
.name-input:focus{
  border-color:var(--primary);
  background:rgba(255,255,255,0.1);
}
.cover-disclaimer{
  margin-top:20px;
  max-width:400px;
  font-size:12px;
  line-height:1.6;
  color:rgba(255,255,255,0.68);
  text-shadow:0 1px 3px rgba(4,11,20,0.7), 0 0 14px rgba(4,11,20,0.55);
}

/* ---------- BUTTONS ---------- */
.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:52px;
  padding:14px 28px;
  border-radius:999px;
  border:none;
  font-family:'Manrope',sans-serif;
  font-weight:700;
  font-size:16px;
  cursor:pointer;
  transition:transform 0.15s ease, box-shadow 0.2s ease, opacity 0.2s ease;
  touch-action:manipulation;
}
.btn:active{transform:scale(0.97);}
.btn-full{width:100%;}
.btn-primary{
  background:linear-gradient(to right, #2FA4C7, #3EC7D9, #6FE3FF);
  color:#04212b;
  box-shadow:0 12px 30px rgba(47,164,199,0.28);
}
.btn-outline{
  background:rgba(255,255,255,0.06);
  color:#fff;
  border:1px solid rgba(255,255,255,0.18);
}
.btn-outline:hover{background:rgba(255,255,255,0.10);}
.btn-cover{
  padding:16px 36px;
  gap:14px;
  background:linear-gradient(180deg, rgba(216,238,249,0.95), rgba(151,206,232,0.92));
  color:#0B2A43;
  border:1px solid rgba(255,255,255,0.6);
  box-shadow:0 10px 24px rgba(10,42,67,0.22), inset 0 1px 0 rgba(255,255,255,0.7);
}
.btn-cover:hover{background:linear-gradient(180deg, rgba(224,242,251,0.95), rgba(163,213,236,0.92));}
.btn-text-muted{
  display:block;
  margin:20px auto 0;
  background:none;
  border:none;
  color:rgba(255,255,255,0.45);
  font-size:14px;
  padding:12px;
  cursor:pointer;
  text-decoration:underline;
  text-underline-offset:3px;
}

/* ---------- QUESTION / RESULT background ---------- */
body.photo-bg{
  background:
    linear-gradient(180deg, rgba(4,11,20,0.15), rgba(4,11,20,0.3)),
    url('question_bg.png') center/cover no-repeat;
}
.screen-question{padding-top:24px;}
.question-card{
  padding:28px 24px;
  border-radius:32px;
  background:rgba(180,215,235,0.14);
  border:1px solid rgba(255,255,255,0.3);
  backdrop-filter:blur(18px);
  -webkit-backdrop-filter:blur(18px);
  box-shadow:0 20px 50px rgba(4,11,20,0.35);
}
.q-count{
  font-family:'Manrope',sans-serif;
  font-size:12px;
  font-weight:700;
  letter-spacing:0.1em;
  color:rgba(255,255,255,0.55);
  margin-bottom:14px;
}
.q-text{
  font-family:'Manrope',sans-serif;
  font-weight:800;
  font-size:clamp(24px,6vw,30px);
  line-height:1.35;
  margin-bottom:28px;
}
.q-options{
  display:flex;
  flex-direction:column;
  gap:12px;
}
.q-option{
  display:flex;
  align-items:center;
  gap:14px;
  width:100%;
  min-height:60px;
  padding:16px 18px;
  border-radius:18px;
  border:1px solid rgba(255,255,255,0.22);
  background:rgba(255,255,255,0.08);
  color:#fff;
  text-align:left;
  font-size:16px;
  line-height:1.45;
  cursor:pointer;
  transition:background 0.2s ease, border-color 0.2s ease, transform 0.15s ease;
}
.q-option:hover{background:rgba(255,255,255,0.14);}
.q-option:active{transform:scale(0.98);}
.q-option-dot{
  width:20px;
  height:20px;
  min-width:20px;
  border-radius:50%;
  border:2px solid rgba(255,255,255,0.4);
  transition:border-color 0.2s ease, background 0.2s ease;
}
.q-option.is-selected{
  border-color:var(--primary);
  background:rgba(var(--primary-rgb),0.22);
}
.q-option.is-selected .q-option-dot{
  border-color:var(--primary);
  background:var(--primary);
  box-shadow:inset 0 0 0 3px rgba(10,22,40,1);
}

/* ---------- RESULT ---------- */
.screen-result{padding-top:8px;}
.result-card{
  background:rgba(255,255,255,0.04);
  border:1px solid rgba(255,255,255,0.10);
  border-radius:28px;
  padding:32px 24px;
  backdrop-filter:blur(10px);
}
/* 淡出漸層直接寫在 .result-hero「自己的」background 上（不是另外疊一個
   position:absolute 的 sibling 元素）。實測發現 WebKit（Safari）只要疊兩個
   position:absolute + inset:0 的手足元素——一個放照片 background-image、
   另一個放漸層 background——就會整個合成失敗，兩層都畫不出來，只剩卡片
   本身的深色底，看起來像照片完全消失、上下硬切一條線。混在同一個
   background-image 清單裡（gradient 跟 url 用逗號隔開）也一樣會失敗。
   這裡改成：漸層是 .result-hero 自己的背景（元素本身的 background，不是
   額外疊出來的圖層），照片子元素則用 mask-image 由不透明淡到透明，
   淡出的部分自然透出父層的漸層背景——完全不會踩到那個雙層合成的問題。 */
.result-hero{
  position:relative;
  margin:-32px -24px 0;
  padding:40px 24px 28px;
  min-height:340px;
  border-radius:28px 28px 0 0;
  display:flex;
  align-items:flex-start;
  overflow:hidden;
  /* 所有覆蓋層都在容器底部之前歸零；最後 12% 保持完全透明，
     避免任何仍帶 alpha 的背景在 hero 邊界形成一條水平接縫。 */
  background:linear-gradient(180deg,
    rgba(4,11,20,0.42) 0%,
    rgba(4,11,20,0.30) 24%,
    rgba(4,11,20,0.56) 44%,
    rgba(4,11,20,0.40) 62%,
    rgba(4,11,20,0.18) 74%,
    rgba(4,11,20,0.04) 84%,
    rgba(4,11,20,0) 90%,
    rgba(4,11,20,0) 100%
  );
}
.result-hero-bg{
  position:absolute;
  inset:0;
  background-size:cover;
  background-position:center;
  background-repeat:no-repeat;
  /* 橢圓形柔邊避免整張圖片在同一高度淡出，視覺上不會形成水平線。 */
  -webkit-mask-image:radial-gradient(ellipse 145% 90% at 50% 0%, #000 0%, #000 28%, rgba(0,0,0,0.82) 44%, rgba(0,0,0,0.48) 62%, rgba(0,0,0,0.16) 78%, transparent 92%, transparent 100%);
  mask-image:radial-gradient(ellipse 145% 90% at 50% 0%, #000 0%, #000 28%, rgba(0,0,0,0.82) 44%, rgba(0,0,0,0.48) 62%, rgba(0,0,0,0.16) 78%, transparent 92%, transparent 100%);
}
.result-hero-content{position:relative; z-index:1; min-width:0; width:100%;}
.result-hero-text{min-width:0; max-width:82%;}
.result-hero-text .eyebrow,
.result-hero-text .result-name,
.result-hero-text .result-name-en,
.result-hero-quote .quote-mark,
.result-hero-quote .result-share-line{
  text-shadow:0 2px 10px rgba(0,0,0,0.5), 0 1px 3px rgba(0,0,0,0.4);
}
.result-hero-quote{
  margin-top:16px;
  max-width:60%;
}
.result-hero-quote .quote-mark{
  display:block;
  font-family:Georgia,serif;
  font-size:40px;
  font-weight:700;
  color:var(--primary);
  opacity:0.75;
  line-height:1;
  margin-bottom:2px;
}
.result-name{
  font-family:'Manrope',sans-serif;
  font-weight:800;
  font-size:clamp(30px,8vw,40px);
  line-height:1.1;
  margin-bottom:4px;
}
.result-name-en{
  font-family:'Inter',sans-serif;
  font-weight:400;
  font-size:15px;
  color:rgba(255,255,255,0.4);
  margin-bottom:14px;
}
.result-tag{
  display:inline-block;
  padding:6px 14px;
  border-radius:999px;
  /* 淺色標籤字疊在明亮的場景圖上常常糊掉，加一層深色底色墊在淺藍色調之下增加對比 */
  background:linear-gradient(rgba(4,11,20,0.55), rgba(4,11,20,0.55)), rgba(var(--primary-rgb),0.18);
  border:1px solid rgba(var(--primary-rgb),0.5);
  color:var(--primary);
  font-family:'Manrope',sans-serif;
  font-weight:700;
  font-size:13px;
}

.result-share-line{
  font-family:'Caveat',cursive;
  font-size:22px;
  line-height:1.4;
  color:rgba(255,255,255,0.88);
}
html[lang="zh-TW"] .result-share-line{
  font-family:'NaikaiFont',cursive;
  font-size:20px;
  line-height:1.7;
}

.result-divider{
  border:none;
  border-top:1px solid rgba(255,255,255,0.12);
  margin:24px 0;
}

/* 結果頁專屬的「解鎖」CTA——跟下面 CREATURE DETAIL 區塊的 .app-cta 是
   兩套獨立樣式，故意不共用：這裡文案更短（標題 + 兩個連結，沒有副標題），
   放在 hero 圖片正下方，而不是整張卡片最下面。 */
.unlock-cta{
  margin-top:20px;
  text-align:center;
}
.unlock-cta-title{
  display:flex;
  align-items:center;
  justify-content:center;
  flex-wrap:wrap;
  gap:6px 4px;
  font-family:'Manrope',sans-serif;
  font-weight:700;
  font-size:16px;
  line-height:1.35;
  color:#fff;
  margin-bottom:18px;
}
.unlock-cta-gift{position:relative; display:inline-flex; font-size:18px; line-height:1;}
.unlock-cta-sparkle{position:absolute; top:-9px; left:-8px; font-size:10px;}
.unlock-cta-title-accent{color:#BFE6FA;}
.unlock-cta-store{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  width:100%;
  padding:15px 20px;
  border-radius:999px;
  background:linear-gradient(90deg,#2FA4C7,#3EC7D9,#6FE3FF);
  box-shadow:0 8px 20px rgba(47,164,199,0.35);
  color:#fff;
  font-family:'Manrope',sans-serif;
  font-weight:700;
  font-size:16px;
  text-decoration:none;
}
.unlock-cta-store svg{width:19px; height:19px; display:block; flex-shrink:0;}
.unlock-cta-ig{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:6px;
  margin-top:24px;
  font-family:'Manrope',sans-serif;
  font-weight:600;
  font-size:13px;
  color:rgba(255,255,255,0.75);
  text-decoration:none;
}
.unlock-cta-ig svg{width:15px; height:15px; display:block; flex-shrink:0;}

.result-traits-grid{
  display:flex;
  align-items:flex-start;
  gap:18px;
  margin-top:28px;
}
.result-traits-grid .radar-wrap{flex:0 0 38%; max-width:160px; margin:0;}
.result-traits-grid .result-block{flex:1; min-width:0; margin-bottom:0;}

.radar-wrap{
  display:flex;
  justify-content:center;
  margin:0 auto 20px;
}
.radar-svg{width:min(100%,280px); height:auto;}
.radar-ring{fill:none; stroke:rgba(255,255,255,0.12); stroke-width:1;}
.radar-axis{stroke:rgba(255,255,255,0.18); stroke-width:1;}
.radar-data{fill:rgba(47,164,199,0.32); stroke:#6FE3FF; stroke-width:2.5;}
.radar-label{
  fill:rgba(255,255,255,0.78);
  font-family:'Manrope',sans-serif;
  font-size:12px;
  font-weight:700;
}

.result-block{margin-bottom:24px;}
.result-block h3{
  font-family:'Manrope',sans-serif;
  font-size:14px;
  font-weight:700;
  letter-spacing:0.04em;
  color:var(--primary);
  text-transform:uppercase;
  margin-bottom:10px;
}
.result-block p{
  font-size:15px;
  line-height:1.65;
  color:rgba(255,255,255,0.88);
}
.trait-tag-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:10px;
  margin-top:20px;
}
.trait-tag-grid .trait-tag-line{
  flex-direction:column;
  align-items:flex-start;
  gap:6px;
  margin-top:0;
  padding:12px 14px;
}
.trait-tag-line{
  display:flex;
  align-items:flex-start;
  flex-wrap:nowrap;
  gap:8px;
  margin-top:12px;
  padding:10px 14px;
  border-radius:14px;
  background:rgba(255,255,255,0.03);
  border:1px solid rgba(255,255,255,0.1);
  font-size:14px !important;
  line-height:1.6 !important;
  color:rgba(255,255,255,0.85) !important;
}
.trait-tag{
  flex-shrink:0;
  padding:3px 10px;
  border-radius:999px;
  font-family:'Manrope',sans-serif;
  font-size:11px;
  font-weight:700;
  white-space:nowrap;
}
.trait-tag-text{flex:1; min-width:0;}
.trait-tag-strength{background:rgba(var(--primary-rgb),0.18); color:var(--primary);}
.trait-tag-weakness{background:rgba(230,120,90,0.18); color:#E6906F;}

.result-fact-grid{
  display:flex;
  align-items:flex-start;
  gap:16px;
  margin-bottom:32px;
}
.result-fact-grid .result-block{flex:1; min-width:0; margin-bottom:0;}
.result-fact-img{
  flex:0 0 34%;
  max-width:150px;
  height:auto;
  border-radius:16px;
}
@media (max-width:520px){
  .result-fact-grid{flex-direction:column-reverse; align-items:center;}
  .result-fact-grid .result-block{width:100%;}
  .result-fact-img{flex:0 0 auto; width:150px; max-width:55%; margin-bottom:4px;}
}
.source-link{
  display:inline-block;
  margin-top:12px;
  font-size:13px;
  color:var(--primary);
  text-decoration:none;
  border-bottom:1px solid rgba(var(--primary-rgb),0.4);
}
.source-link:hover{border-bottom-color:var(--primary);}

.pairing-heading{
  font-family:'Manrope',sans-serif;
  font-size:14px;
  font-weight:700;
  letter-spacing:0.04em;
  color:var(--primary);
  text-transform:uppercase;
  margin-bottom:28px;
}
.pairing-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:10px;
  margin-bottom:24px;
}
.pairing-card{
  position:relative;
  min-width:0;
  padding:22px 8px 14px;
  border-radius:16px;
  background:rgba(255,255,255,0.05);
  text-align:center;
  overflow:visible;
}
.pairing-card-romance{background:rgba(255,140,170,0.12); border:1px solid rgba(255,140,170,0.22);}
.pairing-card-friendship{background:rgba(120,220,160,0.12); border:1px solid rgba(120,220,160,0.22);}
.pairing-card-rivalry{background:rgba(240,200,90,0.12); border:1px solid rgba(240,200,90,0.22);}
.pairing-img{
  width:70%;
  max-width:94px;
  aspect-ratio:1/1;
  object-fit:contain;
  margin:-41px auto 8px;
  display:block;
  filter:drop-shadow(0 8px 14px rgba(0,0,0,0.4));
}
.pairing-label{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:4px;
  font-size:11px;
  color:rgba(255,255,255,0.6);
  margin-bottom:6px;
}
.pairing-icon{
  display:inline-flex;
  width:12px;
  height:12px;
}
.pairing-icon svg{width:100%; height:100%; display:block;}
.pairing-card-romance .pairing-icon{color:#FF8CAA;}
.pairing-card-friendship .pairing-icon{color:#78DCA0;}
.pairing-card-rivalry .pairing-icon{color:#F0C85A;}
.pairing-name{
  font-family:'Manrope',sans-serif;
  font-weight:700;
  font-size:15px;
}

.result-disclaimer{
  text-align:center;
  font-size:11px;
  color:rgba(255,255,255,0.35);
}

.result-actions{
  display:flex;
  gap:12px;
  margin-top:24px;
}
.result-actions .btn{flex:1;}

.gallery-cta{margin-top:14px;}

/* ---------- GALLERY ---------- */
.screen-gallery{padding-top:24px;}
.creature-nav-title{
  flex:1;
  font-family:'Manrope',sans-serif;
  font-weight:700;
  font-size:17px;
}
.gallery-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:16px 12px;
}
@media (min-width:520px){
  .gallery-grid{grid-template-columns:repeat(4,1fr);}
}
.gallery-item{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:8px;
  padding:0;
  border:none;
  background:none;
  color:#fff;
  cursor:pointer;
  touch-action:manipulation;
}
.gallery-item-frame{
  display:flex;
  align-items:center;
  justify-content:center;
  width:100%;
  aspect-ratio:1/1;
  padding:12%;
  border-radius:18px;
  background:rgba(255,255,255,0.05);
  border:1px solid rgba(255,255,255,0.14);
  overflow:hidden;
  transition:background 0.2s ease, transform 0.15s ease;
}
.gallery-item:active .gallery-item-frame{transform:scale(0.95); background:rgba(255,255,255,0.1);}
.gallery-item-frame img{
  width:100%;
  height:100%;
  object-fit:contain;
  display:block;
  filter:drop-shadow(0 6px 10px rgba(0,0,0,0.35));
}
.gallery-item-name{
  font-family:'Manrope',sans-serif;
  font-weight:700;
  font-size:13px;
  text-align:center;
  line-height:1.3;
}

/* ---------- CREATURE DETAIL ---------- */
.result-block-solo{margin-top:28px;}

.app-cta{
  position:relative;
  margin-top:40px;
  padding:20px 20px 22px;
  border-radius:20px;
  background:linear-gradient(135deg,#4FB3E8,#0E4C8C 65%,#0A2F5E);
  text-align:center;
  overflow:visible;
}
.app-cta-icon{
  display:block;
  width:76px;
  height:76px;
  margin:-46px auto 2px;
  filter:drop-shadow(0 10px 14px rgba(0,0,0,0.35));
}
.app-cta-title{
  font-family:'Manrope',sans-serif;
  font-weight:700;
  font-size:15px;
  line-height:1.3;
  margin-bottom:8px;
}
.app-cta-title-white{color:#fff;}
.app-cta-title-accent{color:#BFE6FA;}
.app-cta-subtitle{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  font-size:12px;
  color:rgba(255,255,255,0.75);
  margin-bottom:14px;
}
.app-cta-rule{
  flex:1;
  max-width:36px;
  height:1px;
  background:rgba(255,255,255,0.35);
}
.app-cta-links{
  display:flex;
  align-items:center;
  justify-content:center;
  flex-wrap:wrap;
  row-gap:8px;
  column-gap:14px;
}
.app-cta-ig-group{
  display:inline-flex;
  align-items:center;
  gap:14px;
}
.app-cta-sep{color:rgba(255,255,255,0.35); font-size:14px;}
.app-cta-store,
.app-cta-ig{
  display:inline-flex;
  align-items:center;
  gap:6px;
  font-family:'Manrope',sans-serif;
  font-size:14px;
  font-weight:700;
  color:#fff;
  text-decoration:none;
}
.app-cta-store svg,
.app-cta-ig svg{width:17px; height:17px; display:block; flex-shrink:0;}
.app-cta-store svg{margin-top:-2px;}

/* ---------- RESPONSIVE ---------- */
@media (min-width:640px){
  #quiz-shell{padding:0;}
  .result-card{padding:40px 36px;}
  .result-hero{margin:-40px -36px 0; padding:40px 36px 36px; min-height:380px;}
}

@media (max-width:380px){
  .pairing-grid{gap:6px;}
  .pairing-card{padding:12px 4px;}
  .pairing-name{font-size:13px;}
}

/* ---------- SHARE IMAGE MODAL ---------- */
.share-image-modal{
  position:fixed; inset:0; z-index:100;
  background:rgba(4,11,20,0.92);
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:16px; padding:24px;
  overflow-y:auto;
}
.share-image-modal img{
  display:block;
  /* 分享卡是直向長圖，手機橫向時螢幕高度很矮，用 width:100% 撐版會讓圖片
     遠超過可視高度、只看得到中間一截。改成同時限制寬高，讓圖片依螢幕
     方向自動縮到完整顯示。 */
  width:auto; height:auto;
  max-width:min(420px, 90vw);
  max-height:80vh;
  border-radius:16px; box-shadow:0 20px 60px rgba(0,0,0,0.5);
}
.share-image-modal p{
  margin:0; text-align:center; font-size:14px;
  color:rgba(255,255,255,0.65); font-family:'Inter',sans-serif;
}
.share-image-modal-close{
  position:absolute; top:20px; right:20px;
  width:36px; height:36px; border-radius:50%; border:none;
  background:rgba(255,255,255,0.12); color:#fff;
  font-size:16px; line-height:1; cursor:pointer;
}

.quiz-toast{
  position:fixed; left:50%; bottom:32px; z-index:200;
  transform:translate(-50%, 12px);
  max-width:min(340px, 86vw);
  padding:12px 18px;
  background:rgba(4,11,20,0.92);
  color:#fff; font-size:14px; text-align:center; line-height:1.4;
  font-family:'Inter',sans-serif;
  border-radius:12px; box-shadow:0 12px 32px rgba(0,0,0,0.35);
  opacity:0; transition:opacity 0.25s ease, transform 0.25s ease;
  pointer-events:none;
}
.quiz-toast.is-visible{
  opacity:1;
  transform:translate(-50%, 0);
}