/* ============================================================
   生活派对 Lite · 全局样式
   清新低多边形卡通风格，移动端优先，桌面端自动放大居中
   ============================================================ */
:root{
  --c1:#ff8fb1;        /* 主粉 */
  --c2:#7ee787;        /* 草绿 */
  --c3:#7cc7ff;        /* 天蓝 */
  --c4:#ffd166;        /* 暖黄 */
  --c5:#b892ff;        /* 梦幻紫 */
  --ink:#3a2e4d;       /* 深墨紫（主文字） */
  --paper:#fffdf7;     /* 纸白 */
  --shadow:0 6px 0 rgba(58,46,77,.18), 0 12px 24px rgba(58,46,77,.18);
  --radius:18px;
}
*{margin:0;padding:0;box-sizing:border-box;-webkit-tap-highlight-color:transparent;}
html,body{height:100%;overflow:hidden;}
body{
  font-family:"PingFang SC","Microsoft YaHei",system-ui,sans-serif;
  color:var(--ink);
  background:linear-gradient(180deg,#bdeaff 0%,#e8f9ff 45%,#d8f5d0 100%);
  user-select:none;
  touch-action:none;
}
.hidden{display:none !important;}
button{font-family:inherit;cursor:pointer;border:none;}
input{font-family:inherit;}

/* ---------- 3D 舞台 ---------- */
#stage{position:fixed;inset:0;}
#c3d{display:block;width:100%;height:100%;}
#worldTip{
  position:absolute;left:50%;top:62%;transform:translateX(-50%);
  background:rgba(58,46,77,.78);color:#fff;padding:8px 16px;border-radius:999px;
  font-size:14px;font-weight:700;pointer-events:none;white-space:nowrap;
  animation:bob 1.2s ease-in-out infinite;
}
@keyframes bob{0%,100%{transform:translate(-50%,0)}50%{transform:translate(-50%,-6px)}}

/* ---------- 全屏界面基础 ---------- */
.screen{
  position:fixed;inset:0;z-index:50;
  display:flex;align-items:center;justify-content:center;padding:18px;
}
#boot{background:linear-gradient(160deg,#aee3ff,#ffd6e7 60%,#d8f5d0);z-index:100;}
.boot-card,.panel{
  background:var(--paper);border-radius:28px;box-shadow:var(--shadow);
  border:3px solid #fff;
}
.boot-card{padding:40px 34px;text-align:center;max-width:380px;}
.boot-sub{color:#8b7da8;font-size:13px;margin-top:6px;}
.boot-msg{margin:22px 0 12px;font-size:14px;color:#6f5f94;}
.boot-spin{
  width:38px;height:38px;margin:0 auto;border-radius:50%;
  border:5px solid #eee0ff;border-top-color:var(--c5);
  animation:spin 0.9s linear infinite;
}
@keyframes spin{to{transform:rotate(360deg)}}

.logo{font-size:30px;font-weight:900;letter-spacing:1px;
  background:linear-gradient(90deg,var(--c1),var(--c5),var(--c3));
  -webkit-background-clip:text;background-clip:text;color:transparent;}
.logo span{font-size:.55em;background:var(--c4);-webkit-background-clip:text;background-clip:text;
  border:2px solid var(--c4);border-radius:8px;padding:0 4px;margin-left:4px;}
.logo.big{font-size:38px;text-align:center;}

/* ---------- 主菜单 ---------- */
.menu-card{width:min(420px,94vw);padding:30px 26px;}
.field{display:block;margin:18px 0 8px;}
.field span{font-size:13px;font-weight:700;color:#8b7da8;}
.field input,.join-row input,#chatInput{
  width:100%;margin-top:6px;padding:13px 16px;font-size:16px;font-weight:700;
  border:2.5px solid #e7dff7;border-radius:14px;background:#faf7ff;color:var(--ink);
  outline:none;
}
.field input:focus,.join-row input:focus,#chatInput:focus{border-color:var(--c5);}
.menu-btns{display:flex;flex-direction:column;gap:10px;margin-top:14px;}
.join-row{display:flex;gap:8px;}
.join-row input{margin-top:0;letter-spacing:4px;text-align:center;}
.menu-tip{margin-top:16px;font-size:11.5px;line-height:1.7;color:#a394c0;text-align:center;}

/* ---------- 按钮体系 ---------- */
.btn{
  background:#f1eaff;color:var(--ink);font-weight:800;font-size:15px;
  padding:12px 18px;border-radius:14px;border:2.5px solid #fff;
  box-shadow:0 4px 0 #d9ccf5;transition:transform .08s,box-shadow .08s;
}
.btn:active{transform:translateY(3px);box-shadow:0 1px 0 #d9ccf5;}
.btn.primary{background:linear-gradient(135deg,var(--c1),#ff6fa0);color:#fff;box-shadow:0 4px 0 #d44f7c;}
.btn.primary:active{box-shadow:0 1px 0 #d44f7c;}
.btn.success{background:linear-gradient(135deg,var(--c2),#4ec96a);color:#fff;box-shadow:0 4px 0 #3ba354;flex:0 0 74px;}
.btn.success:active{box-shadow:0 1px 0 #3ba354;}
.btn.warn{background:linear-gradient(135deg,var(--c4),#ffb13d);color:#7a4e00;box-shadow:0 4px 0 #d9912a;}
.btn.big{font-size:17px;padding:15px;}
.btn.mini{padding:8px 12px;font-size:13px;border-radius:10px;}

/* ---------- 捏脸换装 ---------- */
.dress-card{width:min(560px,96vw);max-height:94vh;overflow:auto;padding:22px;}
.dress-title{text-align:center;font-size:20px;font-weight:900;margin-bottom:10px;}
.dress-preview{
  height:240px;border-radius:18px;position:relative;overflow:hidden;
  background:linear-gradient(180deg,#cdeeff,#e8fff0);
  border:3px solid #fff;box-shadow:inset 0 -6px 0 rgba(58,46,77,.08);
}
.dress-preview canvas{width:100%;height:100%;}
.dress-controls{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin:14px 0;}
.dress-group{background:#faf7ff;border-radius:14px;padding:10px;}
.dg-label{font-size:12px;font-weight:800;color:#8b7da8;margin-bottom:6px;}
.dg-opts{display:flex;flex-wrap:wrap;gap:6px;}
.opt{
  min-width:34px;height:34px;padding:0 8px;border-radius:10px;border:2.5px solid #e7dff7;
  background:#fff;font-size:13px;font-weight:800;display:flex;align-items:center;justify-content:center;
}
.opt.swatch{padding:0;}
.opt.on{border-color:var(--c5);box-shadow:0 0 0 3px rgba(184,146,255,.25);}
#btnDressOk{width:100%;}

/* ---------- HUD 通用 ---------- */
#hud{position:fixed;inset:0;z-index:20;pointer-events:none;}
#hud button,#hud input,#hud .chip,#roomBar,.side-panel,#chatPanel,#overlay .modal,
#emoteBar,.action-btn,#joyZone,#btnChat{pointer-events:auto;}

#topBar{
  position:absolute;top:10px;left:50%;transform:translateX(-50%);
  display:flex;align-items:center;gap:10px;
  background:rgba(255,253,247,.92);border-radius:999px;padding:5px 12px;
  box-shadow:0 4px 12px rgba(58,46,77,.18);border:2.5px solid #fff;
}
.game-title{font-weight:900;font-size:15px;}
.game-timer{font-weight:900;color:#ff5f8f;font-size:16px;min-width:34px;text-align:center;}

#roomBar{
  position:absolute;top:10px;left:10px;display:flex;align-items:center;gap:8px;
}
.room-code{
  background:rgba(58,46,77,.82);color:#fff;font-size:13px;font-weight:700;
  padding:9px 14px;border-radius:14px;box-shadow:0 4px 10px rgba(58,46,77,.2);
}
.room-code b{font-size:17px;letter-spacing:2px;color:var(--c4);}
.chip{
  background:rgba(255,253,247,.94);border:2.5px solid #fff;border-radius:14px;
  padding:9px 14px;font-size:14px;font-weight:800;box-shadow:0 4px 10px rgba(58,46,77,.18);
}
.chat-fab{position:absolute;right:12px;top:64px;width:48px;height:48px;border-radius:50%;font-size:20px;}

/* 侧滑面板 */
.side-panel{
  position:absolute;top:60px;background:rgba(255,253,247,.97);border:3px solid #fff;
  border-radius:18px;box-shadow:var(--shadow);padding:12px;width:248px;max-height:60vh;
  overflow:auto;z-index:30;
}
#playerPanel{left:10px;}
#gameMenu{right:10px;width:268px;}
.side-panel.bottom{
  top:auto;bottom:88px;right:10px;width:min(340px,calc(100vw - 20px));padding:8px;max-height:52vh;
  display:flex;flex-direction:column;
}
.sp-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:8px;}
.sp-head b{font-size:16px;}
.x{background:#f1eaff;border-radius:8px;width:28px;height:28px;font-weight:900;}
.sp-note{font-size:11px;color:#a394c0;text-align:center;margin-top:8px;}

.p-item{display:flex;align-items:center;gap:8px;padding:7px 6px;border-radius:10px;font-size:14px;font-weight:700;}
.p-item .dot{width:12px;height:12px;border-radius:50%;}
.p-item .tag{margin-left:auto;font-size:10px;background:#eee5ff;color:#7a5fc0;padding:2px 7px;border-radius:99px;}
.p-item .tag.host{background:#ffe9c2;color:#b5781e;}
.p-item .tag.bot{background:#d9f2ff;color:#2c7fb8;}

.g-item{
  display:flex;align-items:center;gap:10px;padding:11px;border-radius:14px;margin-bottom:8px;
  background:#faf7ff;border:2.5px solid #efe7ff;font-weight:800;
}
.g-item:active{background:#f1e8ff;}
.g-item .gi-icon{font-size:26px;}
.g-item .gi-name{font-size:15px;}
.g-item .gi-info{font-size:11px;color:#a394c0;font-weight:600;margin-top:2px;}

/* ---------- 摇杆 ---------- */
#joyZone{
  position:absolute;left:24px;bottom:30px;width:132px;height:132px;border-radius:50%;
  background:radial-gradient(circle,rgba(255,255,255,.35),rgba(255,255,255,.12));
  border:3px solid rgba(255,255,255,.65);
  touch-action:none;
}
#joyKnob{
  position:absolute;left:50%;top:50%;width:56px;height:56px;margin:-28px 0 0 -28px;
  border-radius:50%;background:rgba(255,255,255,.85);
  box-shadow:0 4px 10px rgba(58,46,77,.25);border:3px solid #fff;pointer-events:none;
}
/* 桌面端提示键盘，摇杆淡化 */
@media (hover:hover) and (pointer:fine){
  #joyZone{opacity:.55;width:110px;height:110px;left:18px;bottom:22px;}
}

/* ---------- 动作按钮 / 表情 ---------- */
#actionWrap{position:absolute;right:26px;bottom:30px;display:flex;flex-direction:column;align-items:center;gap:12px;}
.action-btn{
  width:86px;height:86px;border-radius:50%;font-size:17px;font-weight:900;color:#fff;
  background:linear-gradient(160deg,var(--c4),#ff9f43);border:4px solid #fff;
  box-shadow:0 6px 0 #d9832a,0 10px 18px rgba(58,46,77,.25);
}
.action-btn:active{transform:translateY(4px);box-shadow:0 2px 0 #d9832a;}
.action-btn.cool{background:linear-gradient(160deg,var(--c3),#4aa8ff);box-shadow:0 6px 0 #2f7fd1,0 10px 18px rgba(58,46,77,.25);}
.action-btn.danger{background:linear-gradient(160deg,#ff7a7a,#ff4d6d);box-shadow:0 6px 0 #d12a4b,0 10px 18px rgba(58,46,77,.25);}
#emoteBar{display:flex;gap:7px;background:rgba(255,253,247,.85);padding:6px;border-radius:999px;border:2.5px solid #fff;box-shadow:0 4px 12px rgba(58,46,77,.15);}
.emote{
  width:42px;height:42px;border-radius:50%;background:#fff;border:2px solid #f0e8ff;font-size:20px;
  display:flex;align-items:center;justify-content:center;
}
.emote:active,.emote.on{background:var(--c4);transform:scale(1.08);}

/* ---------- 聊天 ---------- */
#chatMsgs{flex:1;overflow-y:auto;min-height:120px;max-height:38vh;padding:4px;}
.chat-msg{font-size:13.5px;line-height:1.5;margin:5px 2px;word-break:break-all;}
.chat-msg b{margin-right:5px;}
.chat-msg .sys{color:#a394c0;font-size:12px;}
.chat-input-row{display:flex;gap:6px;margin-top:8px;}
.chat-input-row input{margin-top:0;font-size:14px;padding:10px 12px;}
#btnVoice.on{background:var(--c2);}
#btnVoice.muted{background:#ffd0d0;}

/* ---------- 通用覆盖层（模态） ---------- */
.overlay{
  position:absolute;inset:0;z-index:40;background:rgba(58,46,77,.45);
  display:flex;align-items:center;justify-content:center;padding:18px;
}
.modal{
  background:var(--paper);border-radius:22px;border:3px solid #fff;box-shadow:var(--shadow);
  width:min(520px,96vw);max-height:86vh;overflow:auto;padding:22px;
}
.modal.wide{width:min(720px,97vw);}
.modal h2{font-size:22px;text-align:center;margin-bottom:6px;}
.modal .sub{text-align:center;color:#a394c0;font-size:13px;margin-bottom:14px;}
.modal .row{display:flex;gap:10px;flex-wrap:wrap;justify-content:center;}

/* 结果 / 倒计时 */
.countdown{
  position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;
  background:rgba(58,46,77,.35);z-index:35;pointer-events:none;
}
.countdown .cd-num{font-size:110px;font-weight:900;color:#fff;text-shadow:0 8px 0 rgba(58,46,77,.3);
  animation:cdpop 1s ease infinite;}
@keyframes cdpop{0%{transform:scale(.6);opacity:0}40%{transform:scale(1.1);opacity:1}100%{transform:scale(1);opacity:1}}
.countdown .cd-label{font-size:24px;font-weight:900;color:#fff;text-shadow:0 3px 0 rgba(58,46,77,.3);}

/* 问答题 / 投票 选项 */
.answer-card{
  background:#faf7ff;border:2.5px solid #efe7ff;border-radius:14px;padding:13px 15px;
  margin:8px 0;font-size:15px;font-weight:700;width:100%;text-align:left;position:relative;
}
.answer-card:active{background:#f1e8ff;}
.answer-card.picked{border-color:var(--c5);background:#f4edff;}
.answer-card .votes{position:absolute;right:12px;top:50%;transform:translateY(-50%);color:var(--c1);font-weight:900;}
.answer-card.correct{border-color:var(--c2);background:#eaffe9;}
.answer-card.wrong{border-color:#ffb3b3;background:#ffefef;}
.big-input{
  width:100%;padding:14px;border-radius:14px;border:2.5px solid #e7dff7;font-size:16px;
  font-weight:700;outline:none;margin:8px 0;
}
.big-input:focus{border-color:var(--c5);}
.score-row{display:flex;justify-content:space-between;align-items:center;padding:10px 14px;
  background:#faf7ff;border-radius:12px;margin:6px 0;font-weight:800;}
.score-row .rank{font-size:18px;width:34px;}
.score-row .sc{color:var(--c1);}

/* 玩家状态网格（投票等） */
.player-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(130px,1fr));gap:8px;}
.p-card{
  background:#faf7ff;border:2.5px solid #efe7ff;border-radius:14px;padding:10px;text-align:center;font-weight:800;
}
.p-card.dead{opacity:.45;filter:grayscale(1);}
.p-card .pc-name{font-size:14px;margin-top:4px;}
.p-card .pc-state{font-size:11px;color:#a394c0;margin-top:2px;}
.p-card.voted{border-color:var(--c5);background:#f4edff;}

/* 进度条 */
.pbar{height:16px;border-radius:99px;background:#ece4ff;overflow:hidden;margin:8px 0;}
.pbar>div{height:100%;border-radius:99px;background:linear-gradient(90deg,var(--c2),#4ec96a);transition:width .4s;}
.hold-ring{
  position:absolute;width:110px;height:110px;border-radius:50%;pointer-events:none;
}

/* 侦探线索 / 露营面板 */
.evidence-list{font-size:14px;line-height:1.8;}
.evidence-list li{margin-left:20px;margin-bottom:4px;}
.case-book{
  position:absolute;left:10px;bottom:170px;width:220px;background:rgba(255,253,247,.94);
  border:2.5px solid #fff;border-radius:16px;padding:10px 12px;font-size:12.5px;
  box-shadow:0 4px 12px rgba(58,46,77,.15);max-height:36vh;overflow:auto;
}
.case-book b{display:block;margin-bottom:4px;font-size:13px;}

/* 建造模式工具栏 */
.builder-bar{
  position:absolute;left:50%;bottom:18px;transform:translateX(-50%);
  display:flex;gap:8px;background:rgba(255,253,247,.95);padding:9px;border-radius:18px;
  border:3px solid #fff;box-shadow:var(--shadow);max-width:96vw;overflow-x:auto;
}
.bb-item{flex:0 0 auto;width:52px;height:52px;border-radius:12px;border:2.5px solid #efe7ff;
  background:#fff;font-size:22px;display:flex;flex-direction:column;align-items:center;justify-content:center;}
.bb-item span{font-size:9px;font-weight:800;color:#8b7da8;}
.bb-item.on{border-color:var(--c5);background:#f4edff;}
.builder-tools{position:absolute;right:18px;bottom:130px;display:flex;flex-direction:column;gap:8px;}
.color-row{display:flex;gap:6px;margin-top:6px;flex-wrap:wrap;justify-content:center;}
.color-dot{width:28px;height:28px;border-radius:8px;border:2.5px solid #fff;box-shadow:0 0 0 2px #e7dff7;}
.color-dot.on{box-shadow:0 0 0 3px var(--c5);}

/* 轻提示 toast */
.toast{
  position:absolute;left:50%;top:22%;transform:translateX(-50%);z-index:60;
  background:rgba(58,46,77,.9);color:#fff;padding:11px 22px;border-radius:999px;
  font-size:14.5px;font-weight:700;max-width:84vw;text-align:center;
  box-shadow:0 6px 18px rgba(58,46,77,.3);
}

/* 桌面端放大优化 */
@media (min-width:820px){
  .menu-card,.dress-card{padding:38px 40px;}
  #joyZone{width:150px;height:150px;}
}