:root {
  --ink: #1b1533; --ink2: #2a2140; --paper: #fff8ec; --accent: #ff5a5f; --gold: #ffc233; --ok: #4cd97b;
  --sl: env(safe-area-inset-left, 0px); --sr: env(safe-area-inset-right, 0px); --sb: env(safe-area-inset-bottom, 0px); --st: env(safe-area-inset-top, 0px);
  --u: clamp(11px, 1.9vmin + 4px, 16px);
  --W: 100vw;                                    /* 画面的宽度（手机竖着拿、画面转过来的时候，是屏幕的高） */
}
* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { margin: 0; height: 100%; overflow: hidden; background: var(--ink); color: var(--ink);
  font: var(--u)/1.35 "PingFang SC", "HarmonyOS Sans SC", "Microsoft YaHei", "Noto Sans SC", system-ui, sans-serif;
  -webkit-user-select: none; user-select: none; touch-action: none; overscroll-behavior: none; }
#cv { position: fixed; inset: 0; width: 100%; height: 100%; display: block; touch-action: none; }
/* 手机竖着拿：整个页面转 90° 横着显示（宽、高、角度由 view.js 设置）。转过来以后，页面的左边其实是手机的上边，留边也要跟着换 */
#app { transform-origin: 0 0; }
html.rot #app { position: absolute; left: 0; top: 0; }
html.rot { --W: 100vh; --sl: env(safe-area-inset-top, 0px); --sr: env(safe-area-inset-bottom, 0px); --st: env(safe-area-inset-right, 0px); --sb: env(safe-area-inset-left, 0px); }
.hidden { display: none !important; }
button, input { font: inherit; color: inherit; }
button { cursor: pointer; border: 0; }

/* ---------- 通用部件 ---------- */
.screen { position: fixed; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: safe center; gap: .6em;
  padding: calc(var(--st) + 10px) calc(var(--sr) + 12px) calc(var(--sb) + 10px) calc(var(--sl) + 12px); overflow-y: auto; touch-action: pan-x pan-y;
  background: radial-gradient(120% 90% at 50% 0%, rgba(84, 60, 160, .55), rgba(27, 21, 51, .86)); }
.overlay { position: fixed; inset: 0; display: flex; align-items: center; justify-content: safe center; padding: 10px; overflow-y: auto; touch-action: pan-x pan-y;
  background: rgba(20, 14, 40, .62); }
.panel { background: var(--paper); border: 3px solid var(--ink); border-radius: 18px; box-shadow: 0 6px 0 var(--ink), 0 14px 30px rgba(0, 0, 0, .35);
  padding: 1em; width: min(26em, 100%); display: flex; flex-direction: column; gap: .7em; }
.panel.wide { width: min(54em, 100%); }
.row { display: flex; align-items: center; gap: .5em; }
.grow { flex: 1; }
.hint { font-size: .85em; color: #6b6285; }
.btn { background: var(--accent); color: #fff; font-weight: 800; border: 3px solid var(--ink); border-radius: 14px; padding: .5em 1.1em;
  box-shadow: 0 4px 0 var(--ink); transition: transform .06s, box-shadow .06s; white-space: nowrap; }
.btn:active { transform: translateY(3px); box-shadow: 0 1px 0 var(--ink); }
.btn.big { font-size: 1.25em; padding: .5em 1.4em; }
.btn.alt { background: var(--gold); color: var(--ink); }
.btn.ok { background: var(--ok); color: var(--ink); }
.btn:disabled { background: #b9b3c9; color: #f2eefc; cursor: default; }
.mini { background: #fff; border: 2px solid var(--ink); border-radius: 10px; padding: .25em .7em; font-weight: 700; box-shadow: 0 2px 0 var(--ink); white-space: nowrap; }
.mini:active { transform: translateY(2px); box-shadow: none; }
input { background: #fff; border: 3px solid var(--ink); border-radius: 12px; padding: .45em .7em; min-width: 0; flex: 1; font-weight: 700;
  -webkit-user-select: text; user-select: text; outline: none; }
input:focus { border-color: var(--accent); }

/* ---------- 首页 ---------- */
.logo { margin: 0; font-size: clamp(34px, 9vmin, 76px); font-weight: 900; color: #fff; letter-spacing: .04em; line-height: 1.05;
  text-shadow: 0 4px 0 var(--ink), 0 0 0 var(--ink), 3px 3px 0 var(--ink), -3px 3px 0 var(--ink), 3px -3px 0 var(--ink), -3px -3px 0 var(--ink), 0 9px 0 rgba(0, 0, 0, .25); transform: rotate(-2deg); }
.logo b { color: var(--gold); }
.sub { margin: 0; color: #e9defa; font-weight: 700; }
.foot { margin: 0; color: #b9a9e6; font-size: .85em; }
.me { display: flex; gap: .8em; align-items: center; }
#avatar { width: 6.4em; height: 6.4em; flex: none; background: #dff3ff; border: 3px solid var(--ink); border-radius: 16px; }
.mecol { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: .5em; }
.mecol input { width: 100%; }
.swatches { display: flex; gap: .35em; flex-wrap: wrap; }
.swatches i { width: 1.7em; height: 1.7em; border-radius: 50%; border: 3px solid var(--ink); cursor: pointer; }
.swatches i.sel { box-shadow: 0 0 0 3px var(--gold); transform: scale(1.12); }
.swatches i.used { opacity: .25; }
.hatrow span { flex: 1; text-align: center; font-weight: 700; }
#create { width: 100%; }
#roomList { display: flex; flex-direction: column; gap: .35em; }
#roomList button { display: flex; justify-content: space-between; gap: 1em; background: #eaf7ff; border: 2px solid var(--ink); border-radius: 10px; padding: .4em .7em; font-weight: 700; }

/* ---------- 房间 ---------- */
.head { justify-content: space-between; }
.roomno { font-size: 1.3em; font-weight: 800; }
.roomno b { color: var(--accent); letter-spacing: .12em; font-size: 1.25em; }
.cols { display: flex; gap: 1em; align-items: flex-start; }
#plist { flex: 1.2; min-width: 0; display: grid; grid-template-columns: 1fr 1fr; gap: .4em; }
.pl { display: flex; align-items: center; gap: .4em; background: #fff; border: 2px solid var(--ink); border-radius: 12px; padding: .2em .5em .2em .2em; min-width: 0; }
.pl canvas { width: 2.6em; height: 2.6em; flex: none; }
.pl .nm { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 800; }
.pl .tag { font-size: .75em; color: #6b6285; font-weight: 700; white-space: nowrap; }
.pl.off { opacity: .45; }
.pl.t0 { background: #ffe9e9; } .pl.t1 { background: #e3f1ff; }
.pl .x { background: none; font-weight: 900; color: #b33; padding: 0 .2em; }
.side { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: .6em; }
#share { display: flex; gap: .6em; align-items: center; background: #fff; border: 2px dashed var(--ink); border-radius: 12px; padding: .5em; }
#qr { width: 6.6em; height: 6.6em; flex: none; image-rendering: pixelated; cursor: zoom-in; }
/* 点二维码放大：外网网址长，码很密，放大了才好扫 */
#qrBox { width: auto; max-width: 100%; align-items: center; text-align: center; cursor: zoom-out; }
#qrBigCv { width: min(62vmin, 24em); height: min(62vmin, 24em); image-rendering: pixelated; }
#qrBigUrl { max-width: min(62vmin, 24em); font-size: .8em; font-weight: 700; line-height: 1.25; word-break: break-all; }
.sharetxt { min-width: 0; display: flex; flex-direction: column; gap: .3em; align-items: flex-start; }
#shareUrl { font-weight: 800; word-break: break-all; -webkit-user-select: text; user-select: text; }
#shareUrl span { display: inline-block; max-width: 100%; }
#shareUrl.long { font-size: .8em; font-weight: 700; line-height: 1.25; }   /* 外网网址很长，字小一点 */
.sharebtns { flex-wrap: wrap; gap: .4em; }
#cfg { display: grid; grid-template-columns: auto 1fr; gap: .35em .6em; align-items: center; }
#cfg label { font-weight: 700; white-space: nowrap; }
.seg { display: flex; flex-wrap: wrap; gap: .25em; }
.seg button { background: #fff; border: 2px solid var(--ink); border-radius: 9px; padding: .15em .55em; font-weight: 700; }
.seg button.on { background: var(--gold); box-shadow: 0 2px 0 var(--ink); }
.seg button:disabled { cursor: default; opacity: .55; }
.seg button.on:disabled { opacity: 1; }
.foot2 { flex-wrap: wrap; }

/* ---------- 对局界面 ---------- */
#hud { position: fixed; inset: 0; pointer-events: none; }
#hud > * { position: absolute; }
#hud button, #cards, #stick { pointer-events: auto; }
.chip { background: rgba(27, 21, 51, .78); color: #fff; border-radius: 999px; padding: .2em .8em; font-weight: 800; display: flex; align-items: center; gap: .4em; white-space: nowrap; }
#top { top: calc(var(--st) + 6px); left: 50%; transform: translateX(-50%); display: flex; gap: .4em; align-items: center; }
#clock b { font-size: 1.3em; min-width: 1.2em; text-align: center; color: var(--gold); font-variant-numeric: tabular-nums; }
#clock.hurry b { color: #ff6b6b; animation: pulse .5s infinite alternate; }
@keyframes pulse { to { transform: scale(1.35); } }
#windArrow { display: inline-block; width: 3.4em; height: .7em; border-radius: 99px; background: rgba(255, 255, 255, .18); position: relative; overflow: hidden; }
#windArrow::after { content: ""; position: absolute; top: 0; bottom: 0; left: var(--l, 50%); width: var(--w, 0%); background: var(--c, #7fd6ff); border-radius: 99px; }
#windVal { min-width: 2.6em; text-align: left; }
#plhud { top: calc(var(--st) + 6px); left: calc(var(--sl) + 6px); display: flex; flex-direction: column; gap: 2px; font-size: .82em; }
.ph { display: flex; align-items: center; gap: .35em; background: rgba(27, 21, 51, .66); color: #fff; border-radius: 99px; padding: 1px .6em 1px 3px; font-weight: 700; }
.ph i { width: 1.05em; height: 1.05em; border-radius: 50%; border: 2px solid #fff; flex: none; }
.ph .n { max-width: 5.5em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ph .bar { width: 3.4em; height: .5em; background: rgba(255, 255, 255, .22); border-radius: 99px; overflow: hidden; }
.ph .bar u { display: block; height: 100%; background: var(--ok); border-radius: 99px; transition: width .25s; }
.ph .r { width: 1em; text-align: center; }
.ph.dead { opacity: .5; } .ph.me { outline: 2px solid var(--gold); }
/* 右上角从上到下：一排小按钮（放不下会自动折成两排）、表情面板、战报 */
#rt { top: calc(var(--st) + 6px); right: calc(var(--sr) + 6px); display: flex; flex-direction: column; align-items: flex-end; gap: .35em; }
#tools { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: .3em; max-width: calc(var(--W) / 2 - 12.5em); }   /* 别压到正中间的回合和倒计时 */
#tools button { width: 2.5em; height: 2.5em; border-radius: 50%; background: rgba(27, 21, 51, .72); color: #fff; font-size: 1.05em; padding: 0; }
#tools button.on { background: var(--gold); }
#tools .vmic.on { background: var(--ok); }
#tools .vteam { width: auto; padding: 0 .7em; border-radius: 99px; font-weight: 800; font-size: .95em; height: 2.76em; }
#tools .vteam.on { color: var(--ink); }
#emotes { display: grid; grid-template-columns: repeat(4, 1fr); gap: .25em; background: rgba(27, 21, 51, .8); padding: .4em; border-radius: 14px; pointer-events: auto; }
#emotes button { font-size: 1.6em; background: none; padding: .1em; }
#feed { display: flex; flex-direction: column; align-items: flex-end; gap: 2px; font-size: .85em; }
/* 语音：开着麦的按钮是绿的；谁在说话，谁的名字外面亮一圈绿 */
.mini.vmic.on { background: var(--ok); }
.pl.talk { box-shadow: 0 0 0 3px var(--ok); }
.ph.talk { box-shadow: 0 0 0 2px var(--ok); }
#askBox h3 { margin: 0; font-size: 1.25em; }
#askBox p { margin: 0; }
#feed div { background: rgba(27, 21, 51, .7); color: #fff; border-radius: 8px; padding: 1px .6em; font-weight: 700; animation: fade 4.5s forwards; }
@keyframes fade { 0%, 80% { opacity: 1; } 100% { opacity: 0; } }
#banner { top: 21%; left: 0; right: 0; text-align: center; font-size: clamp(22px, 6.4vmin, 54px); font-weight: 900; color: #fff; opacity: 0;
  text-shadow: 3px 3px 0 var(--ink), -3px 3px 0 var(--ink), 3px -3px 0 var(--ink), -3px -3px 0 var(--ink), 0 6px 0 rgba(0, 0, 0, .3); }
#banner.show { animation: bn 1.9s ease-out forwards; }
#banner small { display: block; font-size: .46em; color: var(--gold); }
@keyframes bn { 0% { opacity: 0; transform: scale(1.7); } 12% { opacity: 1; transform: scale(1); } 78% { opacity: 1; } 100% { opacity: 0; transform: translateY(-14px); } }
#tip { bottom: calc(var(--sb) + 7.2em); left: 0; right: 0; text-align: center; color: #fff; font-weight: 800; text-shadow: 0 2px 0 var(--ink), 0 0 6px var(--ink); padding: 0 1em; }
#cards { bottom: calc(var(--sb) + 6px); left: 50%; transform: translateX(-50%); display: flex; gap: .4em; }
.card { width: 8.6em; height: 5.1em; background: var(--paper); border: 3px solid var(--ink); border-radius: 12px; box-shadow: 0 3px 0 var(--ink); padding: .25em .35em;
  display: grid; grid-template-columns: 2.9em 1fr; grid-template-rows: auto 1fr; gap: 0 .3em; text-align: left; transition: transform .1s; }
.card canvas { grid-row: 1 / 3; width: 2.9em; height: 2.9em; align-self: center; }
.card b { font-size: .98em; white-space: nowrap; }
.card span { font-size: .68em; line-height: 1.2; color: #5b5273; overflow: hidden; }
.card.r1 { background: #e4f1ff; border-color: #2167c7; box-shadow: 0 3px 0 #2167c7; }
.card.r2 { background: #fff0c2; border-color: #c77700; box-shadow: 0 3px 0 #c77700, 0 0 14px rgba(255, 194, 51, .9); }
.card.sel { transform: translateY(-.7em) scale(1.06); outline: 3px solid var(--accent); }
.card.dim { filter: saturate(.5) brightness(.8); }
#cards.locked .card { pointer-events: none; opacity: .82; }
#ready { bottom: calc(var(--sb) + 10px); right: calc(var(--sr) + 10px); }
#stick { bottom: calc(var(--sb) + 14px); left: calc(var(--sl) + 18px); width: 8.4em; height: 8.4em; border-radius: 50%; background: rgba(255, 255, 255, .16); border: 3px solid rgba(255, 255, 255, .5); touch-action: none; }
#knob { position: absolute; left: 50%; top: 50%; width: 3.6em; height: 3.6em; margin: -1.8em 0 0 -1.8em; border-radius: 50%; background: rgba(255, 255, 255, .85); border: 3px solid var(--ink); }
#jump { bottom: calc(var(--sb) + 20px); right: calc(var(--sr) + 22px); width: 5.4em; height: 5.4em; border-radius: 50%; background: var(--gold); border: 3px solid var(--ink);
  box-shadow: 0 5px 0 var(--ink); font-weight: 900; font-size: 1.15em; touch-action: none; }
#jump:active, #jump.down { transform: translateY(4px); box-shadow: 0 1px 0 var(--ink); }

/* ---------- 结算 ---------- */
#overBox h2 { margin: 0; text-align: center; font-size: 1.7em; }
.rank { display: grid; grid-template-columns: auto auto 1fr auto; gap: .3em .7em; align-items: center; }
.rank canvas { width: 2.4em; height: 2.4em; }
.rank .pos { font-weight: 900; font-size: 1.2em; text-align: center; }
.rank .who b { display: block; } .rank .who span { font-size: .8em; color: #6b6285; }
.rank .ttl { background: var(--gold); border: 2px solid var(--ink); border-radius: 99px; padding: .05em .7em; font-weight: 800; white-space: nowrap; }
.rank .st { grid-column: 3 / 5; font-size: .78em; color: #6b6285; margin-top: -.35em; }

#toast { position: fixed; left: 50%; top: 14%; transform: translateX(-50%); background: var(--ink); color: #fff; padding: .45em 1.1em; border-radius: 99px; font-weight: 800;
  opacity: 0; transition: opacity .25s; pointer-events: none; z-index: 10; width: max-content; max-width: 92%; text-align: center; }
#toast.show { opacity: 1; }

@media (max-width: 640px), (max-height: 430px) {
  .cols { gap: .6em; }
  #qr { width: 5.2em; height: 5.2em; }
  .panel { padding: .7em; gap: .5em; }
}
/* 窗口太瘦（电脑上把窗口拉得很窄；手机进了房间一律横屏，碰不到这里）：一排放不下，就上下叠着放 */
html.narrow .cols { flex-direction: column; align-items: stretch; }
html.narrow .card { width: 7.2em; }
html.narrow #top { top: calc(var(--st) + 3.3em); }
html.narrow #tools { max-width: calc(var(--W) - 13.5em); }   /* 别压到左上角的血条 */
html.narrow #feed { margin-top: 2.6em; }                   /* 回合和倒计时挪到了第二行，战报再往下让一让 */
html.narrow #cards { bottom: calc(var(--sb) + 10em); }    /* 手牌抬高，给摇杆和跳跃键让位 */
html.narrow #tip { bottom: calc(var(--sb) + 17.2em); }