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

html, body {
  height: 100%;
  background: #000;
  color: #eadfc8;
  overflow: hidden;
  font-family: "Songti SC", "STSong", "SimSun", "Noto Serif SC", serif;
}

#game {
  position: fixed; inset: 0; user-select: none; -webkit-user-select: none;
  touch-action: manipulation; -webkit-tap-highlight-color: transparent;
}

/* 手機豎著拿的時候，把整個遊戲轉 90 度，橫著顯示 */
@media (orientation: portrait) and (max-width: 820px) {
  #game {
    inset: auto; top: 0; left: 100vw;
    width: 100vh; height: 100vw;
    transform-origin: top left; transform: rotate(90deg);
  }
  #msg { font-size: 14px; line-height: 1.6; padding: 8px 24px; bottom: 4%; max-width: 80vh; }
  .overlay .sub { margin-bottom: 16px; }
  button.big { padding: 8px 20px; font-size: 16px; margin-top: 8px; }
}
/* 手機橫著拿 */
@media (orientation: landscape) and (max-height: 500px) {
  #msg { font-size: 14px; line-height: 1.6; padding: 8px 24px; bottom: 4%; }
  .overlay .sub { margin-bottom: 16px; }
  button.big { padding: 8px 20px; font-size: 16px; margin-top: 8px; }
}
#stage, #stage svg { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }

.hand  { font-family: "KaiTi", "STKaiti", "Kaiti SC", "Kaiti TC", "DFKai-SB", "BiauKai", "楷體", serif; }
.serif { font-family: "Songti SC", "STSong", "SimSun", "Noto Serif SC", serif; }

/* ---------- 可點選區域 ---------- */
.hs { fill: transparent; stroke: none; pointer-events: all; }
svg.show-spots .hs {
  fill: rgba(255, 220, 120, .12);
  stroke: rgba(255, 220, 120, .85);
  stroke-width: 3;
  stroke-dasharray: 12 8;
}

/* ---------- 介面 ---------- */
#fade {
  position: absolute; inset: 0; background: #000;
  opacity: 0; pointer-events: none; transition: opacity .38s ease;
}
#fade.on { opacity: 1; }

#tip {
  position: fixed; transform: translate(20px, 20px);
  padding: 4px 12px; border-radius: 4px;
  background: rgba(10, 8, 20, .78); border: 1px solid rgba(255, 220, 160, .3);
  font-size: 14px; letter-spacing: .12em; white-space: nowrap;
  pointer-events: none; opacity: 0; transition: opacity .15s;
}
#tip.on { opacity: 1; }

#msg {
  position: absolute; left: 50%; bottom: 7%; transform: translateX(-50%);
  max-width: min(860px, 88vw); padding: 14px 30px;
  background: linear-gradient(90deg, transparent, rgba(8, 6, 16, .85) 12%, rgba(8, 6, 16, .85) 88%, transparent);
  font-size: clamp(15px, 1.6vw, 20px); line-height: 1.8; letter-spacing: .08em;
  text-align: center; text-shadow: 0 1px 4px #000;
  opacity: 0; transition: opacity .6s; pointer-events: none;
}
#msg.on { opacity: 1; }

#inv { position: absolute; right: 18px; bottom: 18px; display: flex; gap: 10px; }
.slot {
  width: 64px; height: 64px; padding: 4px; border-radius: 8px;
  border: 1px solid rgba(255, 210, 150, .4); background: rgba(10, 8, 20, .65);
}
.slot svg { width: 100%; height: 100%; }

#hud { position: absolute; top: 14px; right: 14px; display: flex; gap: 8px; }
#hud button {
  width: 38px; height: 38px; border-radius: 50%; cursor: pointer;
  border: 1px solid rgba(255, 210, 150, .35); background: rgba(10, 8, 20, .55);
  color: #eadfc8; font-size: 16px;
}
#hud button:hover { background: rgba(60, 40, 30, .7); }
#hud button.on { background: rgba(255, 210, 150, .3); border-color: rgba(255, 220, 120, .9); }
#hud button.off { opacity: .4; }

/* ---------- 全屏層：標題 / 幫助 / 結局 ---------- */
.overlay {
  position: absolute; inset: 0; padding: 24px;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  text-align: center;
  background: radial-gradient(ellipse at center, rgba(5, 4, 15, .3), rgba(0, 0, 0, .88));
  transition: opacity .9s;
}
.overlay.hidden { opacity: 0; pointer-events: none; }

.overlay h1 {
  font-family: "KaiTi", "STKaiti", "Kaiti SC", "Kaiti TC", "DFKai-SB", "BiauKai", serif; font-weight: normal;
  font-size: clamp(52px, 9vw, 112px); letter-spacing: .3em; padding-left: .3em;
  color: #ffe2b0; text-shadow: 0 0 40px rgba(255, 160, 90, .55);
}
.overlay h2 {
  font-family: "KaiTi", "STKaiti", "Kaiti SC", "Kaiti TC", "DFKai-SB", "BiauKai", serif; font-weight: normal;
  font-size: clamp(26px, 3.4vw, 40px); letter-spacing: .3em; margin: 30px 0 10px;
  color: #ffe2b0;
}
.overlay .sub { margin: 8px 0 34px; letter-spacing: .6em; opacity: .85; }
.overlay .hint { margin-top: 30px; font-size: 13px; letter-spacing: .2em; opacity: .55; }
.overlay .story { font-size: clamp(16px, 1.8vw, 21px); line-height: 2.1; letter-spacing: .1em; }
.overlay .row { display: flex; gap: 16px; flex-wrap: wrap; justify-content: center; }

button.big {
  margin-top: 14px; min-width: 220px; padding: 12px 28px; cursor: pointer;
  background: rgba(0, 0, 0, .25); border: 1px solid rgba(255, 210, 150, .5);
  color: #ffe2b0; font: inherit; font-size: 18px; letter-spacing: .4em;
  transition: background .3s, box-shadow .3s;
}
button.big:hover { background: rgba(255, 190, 120, .12); box-shadow: 0 0 24px rgba(255, 170, 90, .25); }

.panel {
  max-width: 560px; padding: 32px 40px; text-align: left; line-height: 1.9;
  background: rgba(14, 10, 22, .92); border: 1px solid rgba(255, 210, 150, .3);
}
.panel h3 { font-weight: normal; font-size: 24px; letter-spacing: .3em; margin-bottom: 12px; color: #ffe2b0; }
.panel ul { margin: 8px 0 8px 1.4em; }
.panel p { margin: 8px 0; }
.panel button.big { display: block; margin: 20px auto 0; }

/* ---------- 場景動畫 ---------- */
.wave    { animation: drift 10s ease-in-out infinite alternate; }
.drift   { animation: drift 40s ease-in-out infinite alternate; }
.glint   { animation: glint 3.2s ease-in-out infinite; }
.twinkle { animation: twinkle 5s ease-in-out infinite; }
.sway    { transform-box: fill-box; transform-origin: 50% 100%; animation: sway 3.5s ease-in-out infinite alternate; }
.flicker { transform-box: fill-box; transform-origin: center; animation: flicker 2.3s ease-in-out infinite; }
.pulse   { transform-box: fill-box; transform-origin: center; animation: pulse 3s ease-in-out infinite; }
.sweep   { animation: sweep 9s ease-in-out infinite; }
.flash   { animation: flash 9s linear infinite; }
.needle  { animation: needle 1.6s ease-in-out infinite alternate; }
.reveal  { opacity: 0; animation: reveal 5s ease-out 2s forwards; }
.blink3  { animation: blink3 4.5s ease-in-out infinite; }
.aurora  { animation: aurora 18s ease-in-out infinite alternate; }

@keyframes drift   { from { transform: translateX(-60px); } to { transform: translateX(60px); } }
@keyframes glint   { 0%, 100% { opacity: .05; } 50% { opacity: .9; } }
@keyframes twinkle { 0%, 100% { opacity: .95; } 50% { opacity: .25; } }
@keyframes sway    { from { transform: rotate(-4deg); } to { transform: rotate(5deg); } }
@keyframes flicker {
  0%, 100% { opacity: .85; transform: scale(1); }
  30% { opacity: 1; transform: scale(1.03); }
  60% { opacity: .78; transform: scale(.98); }
}
@keyframes pulse   { 0%, 100% { opacity: .78; transform: scale(.97); } 50% { opacity: 1; transform: scale(1.03); } }
@keyframes sweep   { 0%, 100% { transform: scaleX(1); } 50% { transform: scaleX(-1); } }
@keyframes flash {
  0%, 17%, 33%, 67%, 83%, 100% { opacity: 0; }
  25%, 75% { opacity: 1; }
}
@keyframes needle  { from { transform: rotate(-25deg); } to { transform: rotate(35deg); } }
@keyframes reveal  { to { opacity: 1; } }
@keyframes blink3 {
  0%, 30%, 100% { opacity: .08; }
  5%, 15%, 25% { opacity: 1; }
  10%, 20% { opacity: .08; }
}
@keyframes aurora  { from { transform: translateX(-80px); opacity: .5; } to { transform: translateX(80px); opacity: .95; } }

@media (prefers-reduced-motion: reduce) {
  svg * { animation: none !important; }
  .reveal { opacity: 1; }
}