/* =========================================================
 * main.css —— 卡通多主题抽奖组件样式
 * 主题通过 body.theme-{themeCode} 切换 CSS 变量，
 * Canvas 内部配色由 js/themes.js 提供，两套资源按 themeCode 隔离。
 * ========================================================= */
* { margin: 0; padding: 0; box-sizing: border-box; -webkit-tap-highlight-color: transparent; }

html, body { height: 100%; }

body {
  font-family: "PingFang SC", "Microsoft YaHei", "Helvetica Neue", sans-serif;
  color: var(--text);
  background: linear-gradient(180deg, var(--bg1), var(--bg2)) fixed;
  transition: background 0.3s, color 0.3s;
  overflow-x: hidden;
}

/* ---------------- 5 套主题变量 ---------------- */
body.theme-mengchong { /* 萌宠乐园：浅粉+奶白 */
  --bg1: #FFF6E9; --bg2: #FFE9F0;
  --card: #FFFDF9; --tab: #FFE3EC;
  --primary: #FF8FAB; --primary-deep: #FF6B8F;
  --btn1: #FFA5B8; --btn2: #FF7FA0;
  --text: #8A6252; --sub: #B79A8C;
}
body.theme-xingji { /* 星际小宝：浅紫+浅青，深色星空 */
  --bg1: #232347; --bg2: #3A2E63;
  --card: #32326A; --tab: #41417E;
  --primary: #B39DFF; --primary-deep: #8F79F0;
  --btn1: #A78BFF; --btn2: #7C5CFF;
  --text: #EDEAFF; --sub: #A9A3D9;
}
body.theme-tangguo { /* 糖果甜品：蜜桃粉+薄荷绿 */
  --bg1: #FFF0F5; --bg2: #E8FBF3;
  --card: #FFFDFA; --tab: #FFD9E8;
  --primary: #FF9EBB; --primary-deep: #F973A3;
  --btn1: #FFA8C5; --btn2: #FF7FAE;
  --text: #96555F; --sub: #C09098;
}
body.theme-senlin { /* 森林童话：嫩绿+米色 */
  --bg1: #F0F9E8; --bg2: #E4F3D9;
  --card: #FDFEF7; --tab: #DFF5C8;
  --primary: #8BC34A; --primary-deep: #6FA82F;
  --btn1: #A5D66E; --btn2: #7DBB3F;
  --text: #4E6B33; --sub: #8BA36F;
}
body.theme-haiyang { /* 海洋泡泡：浅蓝+浅青 */
  --bg1: #E8F7FF; --bg2: #D6F1FF;
  --card: #FBFEFF; --tab: #CDEFFF;
  --primary: #5BB8F5; --primary-deep: #3A9AE0;
  --btn1: #6EC6FF; --btn2: #3FA4EF;
  --text: #33627E; --sub: #7BA3B8;
}

/* ---------------- 背景漂浮装饰 ---------------- */
#bgDeco span {
  position: fixed; z-index: 0; pointer-events: none;
  font-size: 26px; opacity: 0.45;
  animation: floaty 6s ease-in-out infinite;
}
#bgDeco span:nth-of-type(1) { top: 8%;  left: 6%;  animation-delay: 0s; }
#bgDeco span:nth-of-type(2) { top: 14%; right: 8%; animation-delay: 1.2s; font-size: 32px; }
#bgDeco span:nth-of-type(3) { top: 46%; left: 4%;  animation-delay: 2.4s; }
#bgDeco span:nth-of-type(4) { top: 56%; right: 5%; animation-delay: 0.8s; font-size: 30px; }
#bgDeco span:nth-of-type(5) { bottom: 12%; left: 10%; animation-delay: 1.8s; }
#bgDeco span:nth-of-type(6) { bottom: 8%;  right: 12%; animation-delay: 3s; }
@keyframes floaty {
  0%, 100% { transform: translateY(0) rotate(-4deg); }
  50%      { transform: translateY(-14px) rotate(5deg); }
}

/* ---------------- 页面骨架 ---------------- */
#app {
  position: relative; z-index: 1;
  max-width: 420px; margin: 0 auto;
  padding: 16px 16px 40px;
  display: flex; flex-direction: column; align-items: center;
}

.page-title {
  font-size: 24px; font-weight: 800; letter-spacing: 2px;
  margin: 8px 0 14px;
  text-shadow: 0 2px 0 rgba(255, 255, 255, 0.5);
}
body.theme-xingji .page-title { text-shadow: 0 0 12px rgba(179, 157, 255, 0.8); }

/* ---------------- Tab（圆角胶囊） ---------------- */
.tabs { display: flex; gap: 8px; margin-bottom: 10px; flex-wrap: wrap; justify-content: center; }

.pill {
  border: none; cursor: pointer; outline: none;
  padding: 7px 16px; border-radius: 999px;
  background: var(--tab); color: var(--text);
  font-size: 13px; font-weight: 600;
  transition: all 0.25s ease-out;
}
.pill.active {
  background: var(--primary); color: #fff;
  box-shadow: 0 3px 10px var(--primary);
  transform: translateY(-1px);
}
.pill:active { transform: scale(0.94); }

/* ---------------- 组件区 ---------------- */
#stage { margin-top: 8px; }
.stage.hidden { display: none; }

.wheel-wrap {
  position: relative;
  width: 340px; height: 340px; max-width: 88vw;
  display: flex; align-items: center; justify-content: center;
  transition: transform 0.2s ease-out;
}
.wheel-wrap.dragging { transform: scale(1.02); }
.wheel-canvas { display: block; touch-action: none; cursor: grab; z-index: 1; }
.wheel-wrap.dragging .wheel-canvas { cursor: grabbing; }

/* 顶部固定指针（不随转盘旋转） */
.wheel-pointer {
  position: absolute; top: -4px; left: 50%; transform: translateX(-50%);
  width: 0; height: 0; z-index: 2;
  border-left: 13px solid transparent;
  border-right: 13px solid transparent;
  border-top: 30px solid var(--primary-deep);
  filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.25));
  animation: pointerGlow 1.6s ease-in-out infinite;
  pointer-events: none;
}
@keyframes pointerGlow {
  0%, 100% { filter: drop-shadow(0 2px 3px rgba(0,0,0,0.25)); }
  50%      { filter: drop-shadow(0 2px 8px var(--primary)); }
}

.gasha-wrap { width: 340px; max-width: 88vw; display: flex; justify-content: center; }
.gasha-canvas { display: block; touch-action: none; cursor: grab; }
.gasha-wrap.dragging .gasha-canvas { cursor: grabbing; }

/* 3D 版扭蛋机（three.js）：激活后隐藏 2D 画布 */
#gashaStage.gasha3d-on .gasha-canvas { display: none; }
.gasha3d-canvas { display: block; touch-action: none; cursor: grab; }
.gasha-wrap.dragging .gasha3d-canvas { cursor: grabbing; }

#hint {
  margin: 12px 0 4px; font-size: 13px; color: var(--sub);
  animation: hintPulse 1.8s ease-in-out infinite;
}
@keyframes hintPulse { 0%, 100% { opacity: 0.65; } 50% { opacity: 1; } }

/* PC 端：隐藏滑动手势提示，仅保留按钮抽奖 */
@media (hover: hover) and (pointer: fine) {
  #hint { display: none; }
}

/* ---------------- 次数 & 按钮 ---------------- */
#countBar { margin: 8px 0 12px; font-size: 14px; font-weight: 600; }
#countBar b { color: var(--primary-deep); font-size: 18px; padding: 0 2px; }

.btn-primary {
  border: none; cursor: pointer; outline: none;
  min-width: 200px; padding: 13px 40px;
  border-radius: 999px; font-size: 17px; font-weight: 800; letter-spacing: 4px;
  color: #fff; background: linear-gradient(180deg, var(--btn1), var(--btn2));
  box-shadow: 0 5px 0 var(--primary-deep), 0 8px 18px rgba(0, 0, 0, 0.15);
  transition: transform 0.12s, box-shadow 0.12s, opacity 0.2s;
}
.btn-primary:active { transform: translateY(3px) scale(0.98); box-shadow: 0 2px 0 var(--primary-deep); }
.btn-primary.disabled {
  opacity: 0.45;
  cursor: not-allowed;
  filter: grayscale(0.5);
  /* 注意：不加 pointer-events:none —— 次数耗尽时点击按钮需触发引导弹窗 */
}

#footerBtns { display: flex; gap: 12px; margin-top: 16px; }
.btn-sub {
  border: 2px solid var(--primary); background: var(--card); color: var(--primary-deep);
  cursor: pointer; outline: none;
  padding: 8px 18px; border-radius: 999px; font-size: 13px; font-weight: 700;
  transition: transform 0.15s;
}
.btn-sub:active { transform: scale(0.94); }

/* ---------------- 音效开关 & 用户名状态 ---------------- */
#soundBtn {
  position: fixed; top: 12px; right: 12px; z-index: 50;
  width: 40px; height: 40px; border-radius: 50%;
  border: 2px solid var(--primary); background: var(--card);
  font-size: 18px; cursor: pointer;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12);
}
#userBtn {
  position: fixed; top: 12px; right: 60px; z-index: 50;
  max-width: 150px; height: 40px; padding: 0 12px;
  border-radius: 999px; border: 2px solid var(--primary); background: var(--card);
  color: var(--text); font-size: 12.5px; font-weight: 700;
  cursor: pointer; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12);
}

/* ---------------- 用户名绑定弹窗 ---------------- */
.login-input {
  width: 88%; padding: 11px 12px; margin: 4px 0 14px;
  border: 2px solid var(--tab); border-radius: 12px;
  font-size: 15px; text-align: center; outline: none;
  background: #fff; color: var(--text);
}
.login-input:focus { border-color: var(--primary); }
.login-status { margin-top: 10px; font-size: 12.5px; line-height: 1.6; }
.login-status.ok { color: #4e8b33; }
.login-status.bad { color: #d24b6c; }
.login-status.hidden { display: none; }

/* ---------------- 弹窗 ---------------- */
.mask {
  position: fixed; inset: 0; z-index: 100;
  background: rgba(0, 0, 0, 0.55);
  display: flex; align-items: center; justify-content: center;
}
.mask.hidden { display: none; }

.popup {
  position: relative;
  width: 82%; max-width: 340px;
  background: var(--card); color: var(--text);
  border-radius: 24px; padding: 28px 22px 24px;
  text-align: center;
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.3);
  animation: popIn 0.25s ease-out;
}
@keyframes popIn {
  from { transform: scale(0.7); opacity: 0; }
  to   { transform: scale(1);   opacity: 1; }
}
.popup-title { font-size: 18px; margin-bottom: 12px; }
.popup h3 { font-size: 20px; margin: 8px 0 6px; }
.popup p { font-size: 13px; color: var(--sub); line-height: 1.6; }

.popup-close {
  position: absolute; top: 10px; right: 12px;
  width: 30px; height: 30px; border-radius: 50%;
  border: none; background: var(--tab); color: var(--sub);
  font-size: 14px; cursor: pointer;
}

/* 结果弹窗 */
.result-popup { overflow: hidden; }
.result-rays {
  position: absolute; top: -40px; left: 50%; transform: translateX(-50%);
  width: 260px; height: 260px; border-radius: 50%;
  background: radial-gradient(circle, var(--tab) 0%, transparent 65%);
  animation: raysSpin 8s linear infinite;
  pointer-events: none;
}
@keyframes raysSpin { to { transform: translateX(-50%) rotate(360deg); } }
.prize-icon { position: relative; font-size: 64px; line-height: 1.2; animation: prizeBounce 0.6s ease-out; }
.prize-icon img {
  width: 84px; height: 84px; object-fit: cover;
  border-radius: 50%; border: 4px solid #fff;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15);
}
@keyframes prizeBounce {
  0% { transform: scale(0.2); }
  60% { transform: scale(1.25); }
  100% { transform: scale(1); }
}
.result-popup .btn-primary { margin-top: 16px; letter-spacing: 2px; }
.guide-text { margin-bottom: 14px; }

/* 抽奖记录 */
.history-list {
  max-height: 320px; overflow-y: auto; margin-bottom: 12px;
  text-align: left;
}
.history-item {
  display: flex; align-items: center; gap: 10px;
  padding: 9px 4px; border-bottom: 1px dashed var(--tab);
  font-size: 13px;
}
.history-item .h-icon { font-size: 24px; }
.history-item .h-img { width: 26px; height: 26px; border-radius: 50%; object-fit: cover; border: 2px solid var(--tab); }
.history-item .h-main { flex: 1; min-width: 0; }
.history-item .h-name { font-weight: 700; }
.history-item .h-time { font-size: 11px; color: var(--sub); }
.history-item .h-status { font-size: 11px; padding: 3px 8px; border-radius: 999px; flex-shrink: 0; }
.h-status.wait { background: var(--tab); color: var(--primary-deep); }
.h-status.done { background: transparent; color: var(--sub); border: 1px solid var(--tab); }
/* 情趣扭蛋记录：状态可点击切换 */
.h-status.toggle { cursor: pointer; }
.h-status.toggle::after { content: ' ↻'; font-size: 10px; opacity: 0.7; }
.h-status.toggle:active { transform: scale(0.92); }
.history-empty { text-align: center; color: var(--sub); padding: 30px 0; font-size: 13px; }

/* 活动规则 */
.rules-content { text-align: left; font-size: 13px; line-height: 1.8; color: var(--sub); margin-bottom: 6px; }
.rules-content b { color: var(--primary-deep); }

/* ---------------- Toast ---------------- */
#toast {
  position: fixed; left: 50%; bottom: 18%; transform: translateX(-50%);
  z-index: 200; max-width: 80%;
  background: rgba(0, 0, 0, 0.75); color: #fff;
  padding: 10px 20px; border-radius: 999px;
  font-size: 13px; text-align: center;
  animation: popIn 0.2s ease-out;
}
#toast.hidden { display: none; }

/* ---------------- 低端机降级：关闭所有装饰动画 ---------------- */
body.low-perf *,
body.low-perf *::before { animation: none !important; }