/* 第六人格 M0 登录门 —— 深色、无重动效、低端机友好（不用 backdrop-filter） */
:root {
  --bg: #07090f;
  --card: rgba(19, 23, 37, 0.86);
  --line: rgba(255, 255, 255, 0.09);
  --txt: #e8ecf6;
  --dim: #97a0b5;
  --accent: #7f5cff;
  --accent2: #3ee6ff;
  --ok: #43e0b8;
  --bad: #ff5d7a;
}

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

html, body { height: 100%; }

body {
  background:
    radial-gradient(1100px 640px at 78% -12%, rgba(127, 92, 255, 0.20), transparent 62%),
    radial-gradient(880px 560px at 12% 112%, rgba(62, 230, 255, 0.10), transparent 58%),
    var(--bg);
  color: var(--txt);
  font-family: system-ui, -apple-system, "PingFang SC", "Microsoft YaHei", sans-serif;
  min-height: 100dvh;
  display: grid;
  place-items: center;
  padding: max(20px, env(safe-area-inset-top)) 16px max(20px, env(safe-area-inset-bottom));
  -webkit-tap-highlight-color: transparent;
}

.stage { width: min(430px, 100%); display: grid; gap: 14px; }

.card {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 20px;
  padding: 34px 28px 28px;
}

.brand { text-align: center; margin-bottom: 24px; }

.title {
  font-size: 40px;
  letter-spacing: 6px;
  font-weight: 700;
  background: linear-gradient(120deg, var(--accent), var(--accent2));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.subtitle { margin-top: 10px; color: var(--dim); font-size: 14px; letter-spacing: 1px; }

.state { display: grid; gap: 14px; text-align: center; }
.state.hidden, .hidden { display: none; }

.lead { color: var(--dim); font-size: 15px; line-height: 1.7; }

.welcome { font-size: 17px; }
.welcome strong { color: var(--accent2); }

.row { display: flex; align-items: center; justify-content: center; gap: 8px; font-size: 14px; }

.dot {
  width: 9px; height: 9px; border-radius: 50%;
  background: var(--dim); display: inline-block; flex: none;
}
.dot.ok { background: var(--ok); }
.dot.bad { background: var(--bad); }

.muted { color: var(--dim); }
.note { font-size: 13px; }

.btn {
  display: flex; align-items: center; justify-content: center;
  min-height: 48px; padding: 0 18px;
  border-radius: 12px; border: 1px solid var(--line);
  background: rgba(255, 255, 255, 0.04);
  color: var(--txt); font-size: 16px; text-decoration: none;
  cursor: pointer; font-family: inherit;
}
.btn.primary {
  background: linear-gradient(120deg, var(--accent), #5a3ee0);
  border-color: transparent; font-weight: 600;
}
.btn.ghost { color: var(--dim); }
.btn:disabled { opacity: 0.45; cursor: default; }

@media (hover: hover) and (pointer: fine) {
  .btn.primary:hover { filter: brightness(1.12); }
  .btn.ghost:hover { color: var(--txt); }
}

.error {
  margin-top: 14px; text-align: center;
  color: var(--bad); font-size: 14px; line-height: 1.6;
}

.foot { text-align: center; color: var(--dim); font-size: 12px; letter-spacing: 2px; }

/* ===== M1：3D 大厅 ===== */

#c3d {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  outline: none;
  touch-action: none;
}
#c3d.hidden { display: none; }

#hud { position: fixed; inset: 0; pointer-events: none; z-index: 5; }
#hud.hidden { display: none; }

#topbar {
  position: absolute;
  top: max(10px, env(safe-area-inset-top));
  left: 12px;
  right: 12px;
  display: flex;
  align-items: center;
  gap: 14px;
  font-size: 13px;
  color: var(--dim);
  background: rgba(10, 13, 22, 0.62);
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 8px 14px;
  width: fit-content;
  margin: 0 auto;
}
.brand-mini {
  background: linear-gradient(120deg, var(--accent), var(--accent2));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  font-weight: 700;
  letter-spacing: 2px;
}
.live { display: flex; align-items: center; gap: 6px; }

#chatlog {
  position: absolute;
  left: 12px;
  top: 64px;
  max-width: min(70vw, 420px);
  display: grid;
  gap: 4px;
  font-size: 14px;
}
.chat-row {
  background: rgba(10, 13, 22, 0.55);
  border-radius: 8px;
  padding: 4px 10px;
  width: fit-content;
  max-width: 100%;
  overflow-wrap: anywhere;
  transition: opacity 1.5s;
}
.chat-row b { color: var(--accent2); font-weight: 600; }
.chat-row.self b { color: var(--ok); }
.chat-row.fade { opacity: 0.35; }

#hint {
  position: absolute;
  bottom: 92px;
  left: 0;
  right: 0;
  text-align: center;
  color: var(--dim);
  font-size: 12px;
  letter-spacing: 1px;
}

#chatform {
  position: absolute;
  left: 12px;
  right: 12px;
  bottom: max(14px, env(safe-area-inset-bottom));
  display: flex;
  gap: 8px;
  pointer-events: auto;
}
#chatinput {
  flex: 1;
  min-height: 44px;
  border-radius: 12px;
  border: 1px solid var(--line);
  background: rgba(10, 13, 22, 0.72);
  color: var(--txt);
  font-size: 16px;
  font-family: inherit;
  padding: 0 14px;
  outline: none;
}
#chatinput:focus { border-color: var(--accent); }
.btn.mini { min-height: 44px; padding: 0 18px; border-radius: 12px; }

#joy {
  position: absolute;
  left: max(18px, env(safe-area-inset-left));
  bottom: max(76px, calc(env(safe-area-inset-bottom) + 76px));
  width: 112px;
  height: 112px;
  border-radius: 50%;
  border: 1.5px solid rgba(255, 255, 255, 0.22);
  background: rgba(10, 13, 22, 0.4);
  touch-action: none;
  pointer-events: auto;
}
#joyknob {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 46px;
  height: 46px;
  margin: -23px 0 0 -23px;
  border-radius: 50%;
  background: rgba(127, 92, 255, 0.55);
  border: 1.5px solid rgba(255, 255, 255, 0.35);
  pointer-events: none;
}

/* 桌面端摇杆用处小，指针设备才显示 */
@media (hover: none) and (pointer: coarse) {
  #joy { display: block; }
}
@media not ((hover: none) and (pointer: coarse)) {
  #joy { display: block; opacity: 0.5; }
}

/* ===== M2：排队 / 对局 HUD / 结算 ===== */

#queue-panel {
  position: absolute;
  top: 64px;
  right: 12px;
  width: min(300px, 78vw);
  background: rgba(10, 13, 22, 0.72);
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 12px;
  pointer-events: auto;
  display: grid;
  gap: 10px;
}
#queue-panel.hidden { display: none; }
#q-status { font-size: 12.5px; color: var(--dim); line-height: 1.6; }
.qbtns { display: grid; gap: 8px; }
.qbtn {
  min-height: 44px;
  border-radius: 10px;
  border: 1px solid var(--line);
  background: rgba(255, 255, 255, 0.05);
  color: var(--txt);
  font-size: 14.5px;
  font-family: inherit;
  cursor: pointer;
}
.qbtn.queued {
  background: linear-gradient(120deg, var(--accent), #5a3ee0);
  border-color: transparent;
  font-weight: 600;
}
@media (hover: hover) and (pointer: fine) {
  .qbtn:hover { border-color: var(--accent); }
}

#matchhud { position: absolute; inset: 0; pointer-events: none; }
#matchhud.hidden { display: none; }

#mtop {
  position: absolute;
  top: max(10px, env(safe-area-inset-top));
  left: 0;
  right: 0;
  margin: 0 auto;
  width: fit-content;
  display: flex;
  align-items: center;
  gap: 14px;
  font-size: 14px;
  background: rgba(10, 13, 22, 0.68);
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 8px 16px;
}
#m-role { color: var(--accent2); font-weight: 700; }
#m-time { font-weight: 700; letter-spacing: 1px; }
#m-power.on { color: var(--ok); }

#crosshair {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 6px;
  height: 6px;
  margin: -3px 0 0 -3px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.75);
}
#crosshair.hidden { display: none; }

.abtn {
  position: absolute;
  right: max(20px, env(safe-area-inset-right));
  bottom: max(96px, calc(env(safe-area-inset-bottom) + 96px));
  min-width: 108px;
  min-height: 64px;
  border-radius: 50%;
  border: 2px solid rgba(255, 255, 255, 0.3);
  background: rgba(127, 92, 255, 0.4);
  color: #fff;
  font-size: 15px;
  font-weight: 600;
  font-family: inherit;
  pointer-events: auto;
  cursor: pointer;
  touch-action: none;
}
.abtn:disabled { opacity: 0.4; }
.abtn.pressing { transform: scale(0.94); background: rgba(127, 92, 255, 0.65); }
.abtn.atk { bottom: max(180px, calc(env(safe-area-inset-bottom) + 180px)); background: rgba(255, 60, 90, 0.42); }

#endpanel {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  background: rgba(4, 6, 12, 0.72);
  pointer-events: auto;
}
#endpanel.hidden { display: none; }
.endcard {
  width: min(420px, 92vw);
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 18px;
  padding: 26px 24px;
  text-align: center;
}
#end-title { font-size: 30px; letter-spacing: 4px; margin-bottom: 6px; }
#end-title.surv { color: var(--ok); }
#end-reason { color: var(--dim); font-size: 14px; margin-bottom: 14px; }
#end-rows { display: grid; gap: 6px; margin-bottom: 14px; }
.end-row {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  font-size: 14px;
  background: rgba(255, 255, 255, 0.04);
  border-radius: 8px;
  padding: 7px 12px;
}
.end-row b { font-weight: 600; }
.end-row span { color: var(--dim); }
.end-back { color: var(--dim); font-size: 12.5px; }

.sfxbtn {
  pointer-events: auto;
  min-height: 26px;
  padding: 2px 8px;
  border-radius: 8px;
  border: 1px solid var(--line);
  background: rgba(255, 255, 255, 0.05);
  color: var(--dim);
  font-size: 11.5px;
  font-family: inherit;
  cursor: pointer;
}
.sfxbtn.off { color: var(--bad); border-color: rgba(255, 93, 122, 0.4); }

/* ===== 横屏矮视口（iPhone 横屏 844×390 等） ===== */
@media (max-height: 520px) {
  #topbar { padding: 5px 10px; font-size: 12px; gap: 10px; }
  #chatlog { top: 44px; font-size: 12.5px; gap: 3px; max-width: 56vw; }
  #chatlog .chat-row:nth-last-child(n+4) { display: none; }
  #hint { display: none; }
  #joy { width: 88px; height: 88px; left: 10px; bottom: max(10px, env(safe-area-inset-bottom)); opacity: 0.55; }
  #joyknob { width: 38px; height: 38px; margin: -19px 0 0 -19px; }
  #chatform { left: auto; width: min(46vw, 340px); right: 10px; bottom: max(10px, env(safe-area-inset-bottom)); }
  #chatinput { min-height: 40px; font-size: 15px; }
  .btn.mini { min-height: 40px; padding: 0 14px; }
  #queue-panel { top: 44px; right: 8px; width: min(240px, 60vw); padding: 8px; gap: 6px; }
  .qbtn { min-height: 40px; font-size: 13.5px; }
  .abtn { min-width: 92px; min-height: 56px; bottom: max(64px, calc(env(safe-area-inset-bottom) + 64px)); font-size: 14px; }
  .abtn.atk { bottom: max(134px, calc(env(safe-area-inset-bottom) + 134px)); }
  .endcard { max-height: calc(100dvh - 40px); overflow: auto; padding: 18px 16px; }
  #end-title { font-size: 24px; }
}