:root {
  --bg: #17141f;
  --panel: #201c2c;
  --line: #322b45;
  --text: #ece8f5;
  --muted: #9a93b0;
  --accent: #ffb86b;
  --font: "Noto Sans TC", "Microsoft JhengHei", system-ui, sans-serif;
}
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; background: var(--bg); color: var(--text); font-family: var(--font); }
button, input, select { font: inherit; color: inherit; }
select option { background: var(--panel); color: var(--text); }

#app { display: grid; grid-template-rows: auto 1fr auto; height: 100vh; height: 100dvh; }

header { display: flex; align-items: center; gap: 12px; padding: 10px 16px; border-bottom: 1px solid var(--line); flex-wrap: wrap; }
.brand { font-weight: 700; font-size: 18px; white-space: nowrap; }
.tag.bad { color: #ffb4b4; border-color: #7a3a46; }
.tag { font-size: 12px; font-weight: 400; color: var(--muted); border: 1px solid var(--line); padding: 2px 8px; border-radius: 99px; margin-left: 6px; }

.pill { background: var(--panel); border: 1px solid var(--line); border-radius: 10px; padding: 6px 12px; cursor: pointer; transition: background .15s, border-color .15s; }
.pill:hover { border-color: var(--accent); }

main { display: grid; grid-template-columns: 1fr 270px; min-height: 0; }
#stage { position: relative; min-height: 0; overflow: hidden; }
#cv { width: 100%; height: 100%; display: block; touch-action: none; }
/* 疊在 3D 畫面上的名牌、對話泡泡、表情 */
#labels { position: absolute; inset: 0; pointer-events: none; overflow: hidden; }
.lbl { position: absolute; transform: translate(-50%, -100%); display: flex; flex-direction: column; align-items: center; gap: 3px; white-space: nowrap; }
.lbl .name { font-size: 12px; font-weight: 600; background: rgba(20, 16, 30, .7); color: #fff; padding: 1px 7px; border-radius: 99px; border: 1px solid rgba(255, 255, 255, .15); }
.lbl .name.me { background: rgba(255, 184, 107, .9); color: #2a1d0c; border-color: transparent; }
.lbl .bub { font-size: 13px; background: #fff; color: #222; padding: 4px 9px; border-radius: 10px; max-width: 200px; white-space: normal; text-align: center; box-shadow: 0 2px 8px rgba(0, 0, 0, .25); }
.lbl .emo { font-size: 24px; animation: pop .25s ease-out; }
@keyframes pop { from { transform: scale(.4); opacity: 0; } to { transform: scale(1); opacity: 1; } }
#loading { position: absolute; inset: 0; display: grid; place-items: center; color: var(--muted); font-size: 14px; background: var(--bg); }
#loading[hidden] { display: none; }
#tip { position: absolute; pointer-events: none; background: rgba(20, 16, 30, .88); border: 1px solid var(--line); padding: 4px 10px; border-radius: 8px; font-size: 13px; white-space: nowrap; }

aside { border-left: 1px solid var(--line); background: var(--panel); overflow: auto; padding: 14px; display: flex; flex-direction: column; gap: 16px; }
aside h2 { font-size: 13px; color: var(--muted); font-weight: 600; margin: 0 0 8px; letter-spacing: .05em; }
.muted { color: var(--muted); font-weight: 400; }
.grow { flex: 1; min-height: 120px; display: flex; flex-direction: column; }

#online { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 2px; }
#online li { display: grid; grid-template-columns: 12px 1fr; column-gap: 8px; align-items: center; padding: 6px 8px; border-radius: 8px; }
#online li[title] { cursor: pointer; }
#online li[title]:hover { background: rgba(255, 255, 255, .05); }
#online li i, #log i { width: 10px; height: 10px; border-radius: 50%; display: inline-block; }
#online li small { grid-column: 2; color: var(--muted); font-size: 12px; }
#online li b { font-weight: 600; font-size: 14px; }

.row { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 8px; font-size: 14px; }
.row > span { white-space: nowrap; }
.row input:not([type=color]) { flex: 1; min-width: 0; background: var(--bg); border: 1px solid var(--line); border-radius: 8px; padding: 6px 10px; }
.row input[type=color] { width: 44px; height: 28px; border: 1px solid var(--line); border-radius: 8px; background: var(--bg); padding: 2px; cursor: pointer; }

h2.head { display: flex; align-items: center; justify-content: space-between; }
.mini { background: var(--bg); border: 1px solid var(--line); border-radius: 8px; padding: 2px 8px; font-size: 12px; cursor: pointer; color: var(--text); letter-spacing: 0; }
.mini:hover { border-color: var(--accent); }
#lookPreview { width: 100%; height: 150px; display: block; border-radius: 10px; margin-bottom: 10px; background: #d6c2a6; }
.ctl { display: flex; align-items: center; gap: 6px; flex: 1; justify-content: flex-end; min-width: 0; }
.ctl select { flex: 1; min-width: 0; max-width: 120px; background: var(--bg); border: 1px solid var(--line); border-radius: 8px; padding: 4px 6px; }
.ctl input[type=checkbox] { width: 18px; height: 18px; accent-color: var(--accent); }
.swatches { display: flex; gap: 4px; flex-wrap: wrap; justify-content: flex-end; max-width: 170px; }
.swatches button { width: 20px; height: 20px; border-radius: 50%; border: 2px solid var(--line); cursor: pointer; padding: 0; }
.swatches button.orig { background: var(--bg); color: var(--muted); font-size: 10px; line-height: 1; }
.pill.wide { width: 100%; text-align: center; }
.pill.primary { background: var(--accent); color: #2a1d0c; border-color: transparent; font-weight: 600; }

/* 對戰大廳（走進遊玩區才出現，疊在 3D 畫面左下角）：寬、矮，三列橫排（使用者：原本太高太擠） */
#arena { position: absolute; left: 14px; bottom: 14px; width: min(640px, calc(100% - 28px)); background: rgba(32, 28, 44, .94); border: 1px solid var(--line); border-radius: 14px; padding: 10px 14px; font-size: 14px; z-index: 5; backdrop-filter: blur(6px); display: flex; flex-direction: column; gap: 8px; }
#arena[hidden] { display: none; }
#arena .head { display: flex; align-items: center; gap: 10px; }
#arena .head .title { font-weight: 700; font-size: 15px; white-space: nowrap; }
#arena .head small { margin-left: auto; color: var(--muted); font-size: 12px; white-space: nowrap; }
#arena .head .count { margin-left: auto; font-size: 26px; font-weight: 700; color: var(--accent); line-height: 1; }
#arena .games { display: flex; gap: 6px; }
#arena .games button { background: var(--bg); border: 1px solid var(--line); border-radius: 10px; padding: 4px 10px; cursor: pointer; font-size: 13px; white-space: nowrap; }
#arena .games button.on { border-color: var(--accent); color: var(--accent); }
#arena .games button:disabled { cursor: default; opacity: .7; }
#arena ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; }
#arena li { display: flex; align-items: center; gap: 6px; padding: 3px 10px; border-radius: 99px; background: rgba(255, 255, 255, .06); border: 1px solid transparent; font-size: 13px; max-width: 100%; }
#arena li.ok { border-color: rgba(143, 227, 163, .5); }
#arena li .nm { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#arena li .st { color: var(--muted); font-size: 12px; }
#arena li.ok .st { color: #8fe3a3; }
#arena .btns { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; }
#arena .btns .pill { padding: 6px 12px; font-size: 13px; white-space: nowrap; }
#arena .pill:disabled { opacity: .45; cursor: default; }
#arena .join { font-size: 14px; padding: 8px 16px; }
#arena .hint { color: var(--muted); font-size: 12px; margin-left: auto; text-align: right; }
#matchOverlay { position: fixed; inset: 0; background: rgba(10, 8, 16, .8); display: grid; place-items: center; z-index: 30; padding: 16px; }
#matchOverlay[hidden] { display: none; }
#matchOverlay .box { background: var(--panel); border: 1px solid var(--line); border-radius: 16px; padding: 24px 28px; max-width: 420px; text-align: center; }
#matchOverlay h3 { margin: 0 0 10px; font-size: 20px; }
#matchOverlay p { color: var(--muted); margin: 0 0 16px; line-height: 1.6; }
/* 第一人稱：畫面正中央的準心、操作提示 */
#crosshair { position: absolute; left: 50%; top: 50%; width: 14px; height: 14px; margin: -7px 0 0 -7px; pointer-events: none; z-index: 4; }
#crosshair::before, #crosshair::after { content: ''; position: absolute; background: rgba(255, 255, 255, .9); box-shadow: 0 0 2px rgba(0, 0, 0, .6); }
#crosshair::before { left: 6px; top: 0; width: 2px; height: 14px; }
#crosshair::after { left: 0; top: 6px; width: 14px; height: 2px; }
#crosshair.on::before, #crosshair.on::after { background: var(--accent); }
#crosshair[hidden], #fpHint[hidden] { display: none; }
#fpHint { position: absolute; left: 50%; bottom: 14px; transform: translateX(-50%); background: rgba(20, 16, 30, .78); color: #fff; padding: 6px 12px; border-radius: 10px; font-size: 13px; pointer-events: none; z-index: 4; max-width: calc(100% - 24px); text-align: center; line-height: 1.6; }
#fpHint button { pointer-events: auto; margin-left: 6px; }
/* 射擊場 HUD（疊在 3D 畫面上） */
#hud { position: absolute; inset: 0; pointer-events: none; z-index: 6; font-size: 14px; color: #fff; text-shadow: 0 1px 2px rgba(0, 0, 0, .7); }
#hud .top { position: absolute; top: 10px; left: 50%; transform: translateX(-50%); display: flex; gap: 14px; align-items: center; background: rgba(20, 16, 30, .6); border-radius: 12px; padding: 6px 14px; font-weight: 700; }
#hud .top .timer { font-size: 20px; font-variant-numeric: tabular-nums; }
#hud .top .score.T { color: #ff8a8a; } #hud .top .score.CT { color: #8fc3ff; }
#hud .mine { position: absolute; top: 54px; left: 50%; transform: translateX(-50%); font-size: 13px; font-weight: 700; background: rgba(20, 16, 30, .5); padding: 2px 10px; border-radius: 8px; }
#hud .feed { position: absolute; top: 12px; right: 12px; display: flex; flex-direction: column; gap: 4px; align-items: flex-end; font-size: 13px; }
#hud .feed div { background: rgba(20, 16, 30, .55); padding: 3px 10px; border-radius: 8px; }
#hud .bottom { position: absolute; left: 14px; right: 14px; bottom: 14px; display: flex; justify-content: space-between; align-items: flex-end; }
#hud .hp { width: 180px; height: 22px; background: rgba(20, 16, 30, .6); border-radius: 11px; position: relative; overflow: hidden; }
#hud .hp i { position: absolute; inset: 0; width: 100%; background: linear-gradient(90deg, #d84c4c, #8fe3a3); transition: width .15s; }
#hud .hp b { position: absolute; inset: 0; display: grid; place-items: center; font-size: 13px; }
#hud .gun { text-align: right; background: rgba(20, 16, 30, .6); border-radius: 12px; padding: 6px 14px; }
#hud .gun b { display: block; font-size: 15px; } #hud .gun span { font-size: 20px; font-variant-numeric: tabular-nums; }
#hud .hitmark { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); font-size: 26px; color: #ffe9a0; opacity: 0; }
#hud .hitmark.on { animation: hit .18s ease-out; }
#hud .hitmark.head { color: #ff4d4d; font-size: 34px; }
@keyframes hit { from { opacity: 1; transform: translate(-50%, -50%) scale(1.3); } to { opacity: 0; transform: translate(-50%, -50%) scale(.9); } }
#hud .flash { position: absolute; inset: 0; background: radial-gradient(ellipse at center, transparent 50%, rgba(220, 40, 40, .55)); opacity: 0; }
#hud .flash.on { animation: flash .35s ease-out; }
@keyframes flash { from { opacity: 1; } to { opacity: 0; } }
#hud .dead { position: absolute; left: 50%; top: 42%; transform: translate(-50%, -50%); font-size: 22px; font-weight: 700; background: rgba(20, 16, 30, .7); padding: 10px 20px; border-radius: 12px; }
#hud .dead[hidden] { display: none; }
#hud .board { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); background: rgba(20, 16, 30, .92); border: 1px solid var(--line); border-radius: 14px; padding: 14px 20px; min-width: 320px; text-shadow: none; }
#hud .board[hidden] { display: none; }
#hud .board h3 { margin: 0 0 10px; text-align: center; }
#hud .board table { border-collapse: collapse; width: 100%; } #hud .board th, #hud .board td { padding: 4px 8px; text-align: left; } #hud .board th { color: var(--muted); font-weight: 600; font-size: 12px; }
#hud .board td i { display: inline-block; width: 10px; height: 10px; border-radius: 50%; } #hud .board tr.me td { color: var(--accent); }
#hud .board p { color: var(--muted); font-size: 12px; margin: 8px 0 0; text-align: center; }
/* 準心：中間一點＋四條短線，走路時張開、瞄準時收緊 */
#hud .cross { position: absolute; left: 50%; top: 50%; width: 0; height: 0; --gap: 6px; --len: 9px; transition: --gap .1s; }
#hud .cross[hidden] { display: none; }
#hud .cross.move { --gap: 11px; }
#hud .cross.aim { --gap: 3px; --len: 7px; }
#hud .cross i, #hud .cross b { position: absolute; background: #fff; box-shadow: 0 0 2px rgba(0, 0, 0, .8); }
#hud .cross b { width: 3px; height: 3px; border-radius: 50%; left: -1.5px; top: -1.5px; }
#hud .cross i:nth-child(1) { width: 2px; height: var(--len); left: -1px; top: calc(-1 * var(--gap) - var(--len)); }
#hud .cross i:nth-child(2) { width: 2px; height: var(--len); left: -1px; top: var(--gap); }
#hud .cross i:nth-child(3) { height: 2px; width: var(--len); top: -1px; left: calc(-1 * var(--gap) - var(--len)); }
#hud .cross i:nth-child(4) { height: 2px; width: var(--len); top: -1px; left: var(--gap); }
/* 狙擊鏡：中間透明的圓、外面全黑，加十字線 */
#hud .scope { position: absolute; inset: 0; background: radial-gradient(circle at center, transparent 0, transparent 33vmin, rgba(0, 0, 0, .97) 34vmin); }
#hud .scope::before, #hud .scope::after { content: ''; position: absolute; left: 50%; top: 50%; background: rgba(0, 0, 0, .8); }
#hud .scope::before { width: 66vmin; height: 1px; transform: translate(-50%, -50%); }
#hud .scope::after { width: 1px; height: 66vmin; transform: translate(-50%, -50%); }
#hud .scope[hidden] { display: none; }
#hud .hint { position: absolute; left: 50%; bottom: 50px; transform: translateX(-50%); font-size: 12px; color: rgba(255, 255, 255, .8); background: rgba(20, 16, 30, .5); padding: 4px 10px; border-radius: 8px; white-space: nowrap; max-width: calc(100% - 24px); overflow: hidden; text-overflow: ellipsis; }
/* 設定視窗：跟對戰提示同一種外觀 */
#settings { position: fixed; inset: 0; background: rgba(10, 8, 16, .8); display: grid; place-items: center; z-index: 30; padding: 16px; }
#settings[hidden] { display: none; }
#settings .box { background: var(--panel); border: 1px solid var(--line); border-radius: 16px; padding: 22px 24px; width: min(380px, 100%); }
#settings h3 { margin: 0 0 16px; font-size: 18px; }
#settings .setRow { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
#settings .setNote { color: var(--muted); font-size: 13px; line-height: 1.6; margin: 10px 0 18px; min-height: 2.6em; }
#settings .setRow input[type=range] { flex: 1; max-width: 180px; accent-color: var(--accent); }
#settings .setRow b { color: var(--accent); margin-left: 4px; }
#settings .pill.primary { width: 100%; }
#settings .acctBtns { display: flex; gap: 8px; margin: -8px 0 16px; }
#settings .acctBtns .pill { flex: 1; font-size: 13px; }
#acct { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; color: var(--muted); }
#acct img { width: 22px; height: 22px; border-radius: 50%; }
#loginBtn { text-decoration: none; color: inherit; font-size: 13px; }

/* 更衣室 */
#dress { position: fixed; inset: 0; background: rgba(10, 8, 16, .72); display: grid; place-items: center; z-index: 20; padding: 12px; }
#dress[hidden] { display: none; }
.dressBox { width: min(980px, 100%); height: min(700px, 100%); background: var(--panel); border: 1px solid var(--line); border-radius: 16px; display: grid; grid-template-rows: auto 1fr; overflow: hidden; }
.dressBox header { display: flex; align-items: center; justify-content: space-between; padding: 12px 16px; border-bottom: 1px solid var(--line); font-size: 16px; }
.dressBox .btns { display: flex; gap: 8px; }
.dressBody { display: grid; grid-template-columns: 5fr 6fr; min-height: 0; }
.dressLeft { position: relative; background: #d6c2a6; min-height: 0; }
.dressLeft canvas { width: 100%; height: 100%; display: block; cursor: grab; touch-action: none; }
.dressLeft canvas:active { cursor: grabbing; }
.dressLeft small { position: absolute; left: 12px; bottom: 10px; color: #5a4634; font-size: 12px; }
.dressRight { display: flex; flex-direction: column; min-height: 0; }
#dressTabs { display: flex; border-bottom: 1px solid var(--line); }
#dressTabs button { flex: 1; background: none; border: 0; border-bottom: 2px solid transparent; padding: 12px 0; color: var(--muted); font-size: 15px; cursor: pointer; }
#dressTabs button.on { color: var(--accent); border-bottom-color: var(--accent); }
.items { flex: 1; overflow: auto; display: grid; grid-template-columns: repeat(auto-fill, minmax(88px, 1fr)); gap: 10px; padding: 14px; align-content: start; }
/* 正方形格子：用 padding-top 撐高度（aspect-ratio 在某些排版下會被拉長），內容全部絕對定位 */
.item { position: relative; width: 100%; height: 0; padding: 100% 0 0; border: 2px solid var(--line); border-radius: 14px; background: #efe6d8; overflow: hidden; cursor: pointer; color: #7a6a58; font-size: 14px; }
.item > * { position: absolute; inset: 0; width: 100%; height: 100%; display: grid; place-items: center; }
.item:hover { border-color: #c9a86f; }
.item.on { border-color: var(--accent); box-shadow: 0 0 0 3px rgba(255, 184, 107, .35); }
#dressColors { border-top: 1px solid var(--line); padding: 10px 14px; display: flex; flex-direction: column; gap: 8px; }
.colorRow { display: flex; align-items: center; gap: 10px; font-size: 13px; }
.colorRow > span { color: var(--muted); white-space: nowrap; min-width: 56px; }
.colorRow .swatches { max-width: none; justify-content: flex-start; }
.seg { display: inline-flex; border: 1px solid var(--line); border-radius: 99px; overflow: hidden; }
.seg button { background: none; border: 0; color: var(--muted); padding: 3px 14px; font-size: 13px; cursor: pointer; }
.seg button.on { background: var(--accent); color: #2a1d0c; }
@media (max-width: 720px) {
  .dressBody { grid-template-columns: 1fr; grid-template-rows: 220px 1fr; }
  .dressBox { border-radius: 12px; }
}
.swatches button.on { border-color: var(--accent); box-shadow: 0 0 0 2px rgba(255, 184, 107, .35); }
#log { flex: 1; overflow: auto; font-size: 13px; display: flex; flex-direction: column; gap: 4px; min-height: 80px; max-height: 260px; }
#log div { line-height: 1.45; }
#log b { margin: 0 6px 0 5px; }
#log span { color: #d8d2e6; overflow-wrap: anywhere; }

.help ul { margin: 0; padding-left: 18px; color: var(--muted); font-size: 13px; line-height: 1.7; }

footer { display: flex; align-items: center; gap: 10px; padding: 10px 16px; border-top: 1px solid var(--line); flex-wrap: wrap; }
.emotes { display: flex; gap: 6px; }
.emote { font-size: 18px; padding: 4px 10px; }
#chatForm { display: flex; gap: 8px; flex: 1; min-width: 220px; }
#msgIn { flex: 1; min-width: 0; background: var(--panel); border: 1px solid var(--line); border-radius: 10px; padding: 8px 12px; }
#msgIn:focus { outline: none; border-color: var(--accent); }

@media (max-width: 780px) {
  header { padding: 8px 16px; }
      main { grid-template-columns: 1fr; grid-template-rows: minmax(300px, 1fr) auto; }
  aside { border-left: 0; border-top: 1px solid var(--line); max-height: 32vh; }
  .help { display: none; }
}

/* 我的角色：預設收起，避免不小心改到 */
.fold { background: none; border: 0; padding: 0; color: var(--muted); font-size: 13px; font-weight: 600; letter-spacing: .05em; cursor: pointer; display: inline-flex; align-items: center; gap: 6px; }
.fold:hover { color: var(--text); }
.fold .arrow { display: inline-block; transition: transform .15s; }
#lookSection:not(.collapsed) .fold .arrow { transform: rotate(90deg); }
#lookSection.collapsed .foldBody, #lookSection.collapsed #randLook { display: none; }
#lookSection.collapsed h2 { margin-bottom: 0; }

/* 躲貓貓 HUD：階段、剩餘人數、中央提示、冷卻、誤擊的橘色閃光 */
#hud .top .phase { color: #ffd98a; } #hud .top .left { color: #9ad0ff; }
#hud .center { position: absolute; left: 50%; top: 28%; transform: translate(-50%, -50%); font-size: 24px; font-weight: 700; text-align: center; background: rgba(20, 16, 30, .62); padding: 10px 22px; border-radius: 14px; white-space: nowrap; }
#hud .center[hidden] { display: none; }
#hud .cds { position: absolute; left: 50%; bottom: 14px; transform: translateX(-50%); display: flex; gap: 10px; }
#hud .cds[hidden] { display: none; }
#hud .cd { background: rgba(20, 16, 30, .62); border: 1px solid transparent; border-radius: 12px; padding: 6px 14px; min-width: 96px; text-align: center; font-weight: 700; font-size: 14px; }
#hud .cd small { display: block; font-size: 11px; color: #cfc8dc; font-weight: 600; }
#hud .cd em { display: block; font-style: normal; font-size: 12px; color: #cfc8dc; }
#hud .cd.ready { border-color: var(--accent); } #hud .cd.ready em { color: var(--accent); }
#hud .flash.wrong { background: radial-gradient(ellipse at center, transparent 50%, rgba(255, 150, 40, .55)); }
#hud .gun[hidden] { display: none; }

/* 大廳面板的戰場主題列 */
#arena .themes { flex-wrap: wrap; }
#arena .themes button { font-size: 12px; padding: 3px 8px; }

/* 手機虛擬搖桿（只在觸控裝置顯示）：左下角，拖動圓點走路 */
#stick { position: absolute; left: 14px; bottom: 14px; width: 100px; height: 100px; border-radius: 50%; background: rgba(32, 28, 44, .45); border: 1px solid rgba(255, 255, 255, .18); touch-action: none; user-select: none; z-index: 5; }
#stick .knob { position: absolute; left: 50%; top: 50%; width: 44px; height: 44px; margin: -22px 0 0 -22px; border-radius: 50%; background: rgba(255, 184, 107, .85); box-shadow: 0 2px 8px rgba(0, 0, 0, .35); }