/* ============ 造梦工坊 · Dream Forge ============
   深夜铸造台：void 底色 + 幽蓝紫魔法光 + 琥珀行动色
   =============================================== */

:root {
  --void: #0b0e1a;
  --panel: #131a2e;
  --panel-2: #182136;
  --line: rgba(140, 155, 255, .16);
  --glow: #7b6cff;
  --glow-soft: rgba(123, 108, 255, .35);
  --teal: #4fd8c8;
  --ember: #ffb454;
  --ember-deep: #e08f2c;
  --text: #e9ecfa;
  --dim: #8b93b8;
}

* { box-sizing: border-box; margin: 0; padding: 0; -webkit-tap-highlight-color: transparent; }

html, body {
  height: 100%;
  font-family: "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif;
  background: var(--void);
  color: var(--text);
  overscroll-behavior: none;
  touch-action: manipulation;
  /* App 式界面：禁用 iOS 长按文本选择/拷贝弹框（输入框单独放开） */
  -webkit-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
}
input, textarea {
  -webkit-user-select: text;
  user-select: text;
}

/* ---------- 氛围层：星空 + 极光 ---------- */
.stars, .aurora {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
}
.stars {
  background-image:
    radial-gradient(1.2px 1.2px at 12% 22%, rgba(255,255,255,.8) 50%, transparent 51%),
    radial-gradient(1px 1px at 34% 68%, rgba(255,255,255,.5) 50%, transparent 51%),
    radial-gradient(1.5px 1.5px at 58% 12%, rgba(200,210,255,.9) 50%, transparent 51%),
    radial-gradient(1px 1px at 73% 44%, rgba(255,255,255,.45) 50%, transparent 51%),
    radial-gradient(1.3px 1.3px at 88% 76%, rgba(255,255,255,.7) 50%, transparent 51%),
    radial-gradient(1px 1px at 22% 88%, rgba(200,220,255,.55) 50%, transparent 51%),
    radial-gradient(1.4px 1.4px at 45% 36%, rgba(255,255,255,.6) 50%, transparent 51%),
    radial-gradient(1px 1px at 66% 92%, rgba(255,255,255,.4) 50%, transparent 51%),
    radial-gradient(1.1px 1.1px at 94% 18%, rgba(255,255,255,.65) 50%, transparent 51%);
  animation: twinkle 6s ease-in-out infinite alternate;
}
@keyframes twinkle { from { opacity: .55; } to { opacity: 1; } }
.aurora {
  background:
    radial-gradient(60% 42% at 20% -8%, rgba(123, 108, 255, .22), transparent 70%),
    radial-gradient(50% 36% at 85% -6%, rgba(79, 216, 200, .13), transparent 70%);
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}

.screen {
  position: relative;
  z-index: 1;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 22px;
}
.overlay {
  position: fixed;
  inset: 0;
  z-index: 10;
  justify-content: center;
  background: var(--void);
}
.overlay::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(55% 40% at 50% -10%, rgba(123,108,255,.2), transparent 70%);
  pointer-events: none;
}
[hidden] { display: none !important; }

/* ---------- 登录 ---------- */
.login-title {
  font-size: clamp(34px, 7vw, 50px);
  font-weight: 800;
  letter-spacing: .12em;
  background: linear-gradient(120deg, #cfd4ff 10%, var(--glow) 45%, var(--teal) 90%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.login-box {
  margin-top: 30px;
  width: min(88%, 360px);
  display: flex;
  flex-direction: column;
  gap: 14px;
  align-items: stretch;
}
.login-box input {
  font-size: 17px;
  padding: 15px 20px;
  border-radius: 14px;
  border: 1px solid var(--line);
  background: var(--panel);
  color: var(--text);
  outline: none;
}
.login-box input:focus { border-color: var(--glow-soft); box-shadow: 0 0 0 3px rgba(123,108,255,.15); }
.login-box input::placeholder { color: #5d6488; }
.login-btn { justify-content: center; margin-top: 6px; }
.login-err {
  min-height: 1.4em;
  text-align: center;
  font-size: 14px;
  color: #ff7a8a;
  letter-spacing: .08em;
}

.ver {
  position: absolute;
  bottom: 14px;
  font-size: 11px;
  color: #3a4066;
  letter-spacing: .2em;
}

/* ---------- 首页 ---------- */
.home-header { text-align: center; margin: 26px 0 30px; }
.eyebrow {
  font-size: 12px;
  letter-spacing: .55em;
  text-indent: .55em;
  color: var(--dim);
  margin-bottom: 12px;
}
.home-header h1 {
  font-size: clamp(38px, 8vw, 58px);
  font-weight: 800;
  letter-spacing: .12em;
  background: linear-gradient(120deg, #cfd4ff 10%, var(--glow) 45%, var(--teal) 90%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.subtitle {
  font-size: clamp(14px, 3.4vw, 17px);
  color: var(--dim);
  margin-top: 12px;
  letter-spacing: .18em;
}

.forge-btn {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: clamp(19px, 4.4vw, 24px);
  font-weight: 700;
  color: #1b1206;
  background: linear-gradient(135deg, #ffcf7d, var(--ember));
  border: none;
  border-radius: 999px;
  padding: 18px 42px;
  cursor: pointer;
  box-shadow: 0 0 0 1px rgba(255, 180, 84, .4), 0 10px 34px rgba(255, 180, 84, .28);
  transition: transform .12s, box-shadow .12s;
}
.forge-btn:active { transform: scale(.96); box-shadow: 0 0 0 1px rgba(255,180,84,.4), 0 4px 14px rgba(255,180,84,.2); }
.forge-spark { font-size: 1.1em; }

.game-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  gap: 16px;
  width: 100%;
  max-width: 780px;
  margin-top: 34px;
}
.game-card {
  position: relative;
  background: linear-gradient(165deg, var(--panel-2), var(--panel));
  border: 1px solid var(--line);
  border-radius: 20px;
  padding: 20px 14px 16px;
  text-align: center;
  cursor: pointer;
  transition: transform .12s, border-color .12s, box-shadow .12s;
}
.game-card:active {
  transform: scale(.97);
  border-color: var(--glow-soft);
  box-shadow: 0 0 24px rgba(123, 108, 255, .25);
}
.game-card .icon {
  font-size: 46px;
  filter: drop-shadow(0 0 14px rgba(123, 108, 255, .5));
}
.game-card .name {
  font-size: 17px;
  font-weight: 700;
  margin-top: 10px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.card-actions {
  display: flex;
  justify-content: center;
  gap: 8px;
  margin-top: 12px;
}
.mini {
  font-size: 14px;
  font-weight: 700;
  border-radius: 999px;
  padding: 8px 16px;
  cursor: pointer;
  border: 1px solid transparent;
  white-space: nowrap;
}
.mini.play { background: rgba(79, 216, 200, .14); color: var(--teal); border-color: rgba(79, 216, 200, .3); }
.mini.edit { background: rgba(123, 108, 255, .14); color: #b3a8ff; border-color: rgba(123, 108, 255, .32); }
.game-card .del {
  position: absolute;
  top: 10px;
  right: 10px;
  border: none;
  background: transparent;
  color: var(--dim);
  font-size: 14px;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  cursor: pointer;
  opacity: .6;
}
.game-card .del:active { opacity: 1; color: #ff7a8a; }

.empty-hint {
  margin-top: 60px;
  font-size: 17px;
  color: var(--dim);
  text-align: center;
  line-height: 2.1;
  letter-spacing: .1em;
}

/* ---------- 引导对话 ---------- */
.corner-btn {
  position: absolute;
  top: 20px;
  right: 20px;
  z-index: 2;
  font-size: 18px;
  color: var(--dim);
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 50%;
  width: 46px;
  height: 46px;
  cursor: pointer;
}
.guide-tag {
  font-size: 12px;
  letter-spacing: .4em;
  text-indent: .4em;
  color: var(--dim);
  margin-bottom: 10px;
}
#talk h2 {
  font-size: clamp(21px, 4.6vw, 28px);
  font-weight: 700;
  letter-spacing: .06em;
  text-align: center;
  max-width: 90%;
}

.chat-list {
  margin: 20px 0 12px;
  width: min(92%, 560px);
  max-height: 36dvh;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 6px 2px;
}
.bubble {
  max-width: 85%;
  padding: 12px 18px;
  border-radius: 18px;
  font-size: clamp(16px, 3.6vw, 20px);
  line-height: 1.55;
}
.bubble.guide {
  align-self: flex-start;
  background: var(--panel-2);
  border: 1px solid var(--line);
  color: var(--text);
  border-bottom-left-radius: 6px;
}
.bubble.kid {
  align-self: flex-end;
  background: linear-gradient(135deg, rgba(255, 207, 125, .95), rgba(255, 180, 84, .95));
  color: #1b1206;
  font-weight: 600;
  border-bottom-right-radius: 6px;
}

.confirm-btn {
  font-size: clamp(19px, 4.4vw, 24px);
  font-weight: 800;
  letter-spacing: .08em;
  color: #120b02;
  background: linear-gradient(135deg, #ffd98f, var(--ember));
  border: none;
  border-radius: 999px;
  padding: 16px 40px;
  margin-bottom: 16px;
  cursor: pointer;
  box-shadow: 0 0 0 1px rgba(255,180,84,.5), 0 0 30px rgba(255, 180, 84, .38);
  animation: emberPulse 1.8s ease-in-out infinite;
}
@keyframes emberPulse {
  0%, 100% { box-shadow: 0 0 0 1px rgba(255,180,84,.5), 0 0 22px rgba(255,180,84,.3); }
  50% { box-shadow: 0 0 0 1px rgba(255,180,84,.7), 0 0 44px rgba(255,180,84,.55); }
}

/* 召唤球 */
.orb-wrap {
  position: relative;
  width: 168px;
  height: 168px;
  display: grid;
  place-items: center;
  margin-top: 6px;
}
.orb {
  width: 118px;
  height: 118px;
  border-radius: 50%;
  border: none;
  font-size: 44px;
  cursor: pointer;
  user-select: none;
  -webkit-user-select: none;
  -webkit-touch-callout: none;
  touch-action: none;
  color: var(--text);
  background:
    radial-gradient(circle at 32% 28%, rgba(255,255,255,.28), transparent 40%),
    radial-gradient(circle at 50% 60%, #4a3fb0, #221b52 75%);
  box-shadow:
    0 0 0 1px rgba(140, 155, 255, .3),
    0 0 36px var(--glow-soft),
    inset 0 0 26px rgba(123, 108, 255, .55);
  transition: transform .12s;
}
.orb:active { transform: scale(.95); }
.orb-ring {
  position: absolute;
  border-radius: 50%;
  border: 1px solid rgba(123, 108, 255, .35);
  animation: ringSpin 9s linear infinite;
  /* 关键：定位元素会盖在按钮上方，必须放行点击命中 */
  pointer-events: none;
}
.orb-ring.r1 { width: 146px; height: 146px; border-style: dashed; }
.orb-ring.r2 { width: 168px; height: 168px; opacity: .5; animation-direction: reverse; animation-duration: 14s; }
@keyframes ringSpin { to { transform: rotate(360deg); } }

.orb.recording {
  background:
    radial-gradient(circle at 32% 28%, rgba(255,255,255,.3), transparent 40%),
    radial-gradient(circle at 50% 60%, #d98a2b, #7a4410 75%);
  box-shadow:
    0 0 0 1px rgba(255, 180, 84, .5),
    0 0 46px rgba(255, 180, 84, .55),
    inset 0 0 26px rgba(255, 180, 84, .6);
  animation: orbPulse .9s ease-in-out infinite;
}
@keyframes orbPulse { 0%,100% { transform: scale(1); } 50% { transform: scale(1.07); } }

/* 录音中：符文环转为琥珀色并加速，外圈声波涟漪持续扩散 */
.orb-wrap.recording .orb-ring {
  border-color: rgba(255, 180, 84, .55);
  animation-duration: 3s;
}
.orb-wrap.recording::before,
.orb-wrap.recording::after {
  content: "";
  position: absolute;
  width: 118px;
  height: 118px;
  border-radius: 50%;
  border: 2px solid rgba(255, 180, 84, .6);
  animation: ripple 1.4s ease-out infinite;
  pointer-events: none;
}
.orb-wrap.recording::after { animation-delay: .7s; }
@keyframes ripple {
  from { transform: scale(1); opacity: .8; }
  to   { transform: scale(1.6); opacity: 0; }
}

.mic-hint.recording { color: var(--ember); }

.mic-hint {
  margin-top: 12px;
  font-size: 14px;
  color: var(--dim);
  letter-spacing: .14em;
}

.type-row {
  display: flex;
  gap: 10px;
  margin-top: 26px;
  width: min(92%, 520px);
}
.type-row input {
  flex: 1;
  font-size: 16px;
  padding: 14px 20px;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: var(--panel);
  color: var(--text);
  outline: none;
}
.type-row input:focus { border-color: var(--glow-soft); box-shadow: 0 0 0 3px rgba(123,108,255,.15); }
.type-row input::placeholder { color: #5d6488; }
.go-btn {
  font-size: 16px;
  font-weight: 700;
  color: #b3a8ff;
  background: rgba(123, 108, 255, .14);
  border: 1px solid rgba(123, 108, 255, .32);
  border-radius: 999px;
  padding: 0 24px;
  cursor: pointer;
}

/* ---------- 铸造中 ---------- */
.crystal {
  font-size: 84px;
  filter: drop-shadow(0 0 30px rgba(123, 108, 255, .8));
  animation: crystalFloat 2.6s ease-in-out infinite;
}
@keyframes crystalFloat {
  0%, 100% { transform: translateY(0) rotate(-3deg); }
  50% { transform: translateY(-18px) rotate(3deg); }
}
#making h2 {
  margin-top: 20px;
  font-size: clamp(21px, 4.6vw, 28px);
  letter-spacing: .1em;
}
.making-msg {
  margin-top: 12px;
  font-size: clamp(15px, 3.4vw, 18px);
  color: #b3a8ff;
  letter-spacing: .12em;
  min-height: 1.6em;
}

.stages {
  margin-top: 24px;
  width: min(88%, 360px);
  background: rgba(19, 26, 46, .8);
  border: 1px solid var(--line);
  border-radius: 18px;
  padding: 16px 22px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.stage {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: clamp(15px, 3.4vw, 18px);
  font-weight: 600;
  color: #4d5578;
  transition: color .4s;
}
.stage .st-icon { font-size: 1.15em; }
.stage.doing { color: var(--ember); }
.stage.doing .st-icon { animation: crystalFloat 1.2s ease-in-out infinite; display: inline-block; }
.stage.done { color: var(--teal); }

.progress-track {
  width: min(80%, 400px);
  height: 6px;
  background: var(--panel-2);
  border-radius: 999px;
  margin-top: 26px;
  overflow: hidden;
}
.progress-fill {
  height: 100%;
  width: 3%;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--glow), var(--teal), var(--ember));
  box-shadow: 0 0 12px var(--glow-soft);
  transition: width 1s linear;
}
.making-tip {
  margin-top: 20px;
  font-size: 13px;
  color: var(--dim);
  letter-spacing: .16em;
}

/* ---------- 玩游戏 ---------- */
#player { padding: 0; }
.player-bar {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 14px;
  gap: 10px;
}
.player-title {
  font-size: 17px;
  font-weight: 700;
  letter-spacing: .08em;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.bar-btn {
  font-size: 15px;
  font-weight: 700;
  color: var(--text);
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 11px 20px;
  cursor: pointer;
  flex-shrink: 0;
}
.bar-btn.refine {
  color: #1b1206;
  background: linear-gradient(135deg, #ffcf7d, var(--ember));
  border-color: transparent;
}
#game-frame {
  flex: 1;
  width: 100%;
  border: none;
  background: #fff;
  border-radius: 18px 18px 0 0;
}

/* 可访问性：键盘焦点 */
button:focus-visible, input:focus-visible {
  outline: 2px solid var(--teal);
  outline-offset: 2px;
}