/* 网页版的基础布局与通用控件。尺寸统一用 rem：1rem = 界面宽度的 100/750，
   界面宽度 --w 由 js/main.js 按屏幕算出，所以手机、平板、电脑上都是等比缩放。 */
:root {
  --w: 100vw;
  --bg: #101418;
  --surface-lowest: #0b0f12;
  --surface-low: #181c20;
  --surface: #1c2024;
  --surface-high: #262a2f;
  --surface-highest: #31353a;
  --on: #e0e3e8;
  --on-variant: #c0c8c3;
  --muted: #8a938e;
  --outline: #414845;
  --hair: rgba(255, 255, 255, 0.08);
  --primary: #a3d0be;
  --on-primary: #08372b;
  --felt: #0d3b2e;
  --felt-hi: #144a3b;
  --gold: #e9c349;
  --on-gold: #3c2f00;
  --red: #ff6d6b;
  --red-dim: rgba(224, 82, 82, 0.14);
  font-size: calc(var(--w) / 7.5);
}

* {
  box-sizing: border-box;
  -webkit-tap-highlight-color: transparent;
}
html,
body {
  height: 100%;
  margin: 0;
}
body {
  overflow-x: hidden;
}
body {
  background: radial-gradient(ellipse at center, #0d1f1a 0%, #070a0c 75%);
  color: var(--on);
  font-size: 0.28rem;
  line-height: 1.4;
  font-family: Inter, -apple-system, 'PingFang SC', 'Microsoft YaHei', 'Helvetica Neue', sans-serif;
  user-select: none;
  -webkit-user-select: none;
}
input {
  width: 100%;
  margin: 0;
  padding: 0;
  border: 0;
  outline: 0;
  background: none;
  color: inherit;
  font: inherit;
  user-select: text;
  -webkit-user-select: text;
}
input::placeholder {
  color: var(--muted);
}

/* 界面主体：手机上铺满，宽屏上是居中的一列 */
#app {
  position: relative;
  width: var(--w);
  /* 屏幕太矮（如手机横屏）时保证最小高度，由页面整体滚动 */
  height: max(100vh, 13.5rem);
  height: max(100dvh, 13.5rem);
  margin: 0 auto;
  overflow: hidden;
  background: var(--bg);
  box-shadow: 0 0 0 1px var(--hair), 0 0 1.2rem rgba(0, 0, 0, 0.6);
}
.p-hall,
.p-create .scroll {
  height: 100%;
  overflow-y: auto;
}
.p-create,
.p-room {
  position: relative;
  height: 100%;
}
.p-hall::-webkit-scrollbar,
.scroll::-webkit-scrollbar,
.lobby::-webkit-scrollbar,
.settle-body::-webkit-scrollbar,
.sheet::-webkit-scrollbar,
.chat-scroll::-webkit-scrollbar {
  display: none;
}
.boot {
  padding-top: 45vh;
  text-align: center;
  color: var(--muted);
}

/* 导航栏 */
.nav {
  position: sticky;
  top: 0;
  z-index: 50;
  flex: none;
  padding-top: env(safe-area-inset-top);
  background: var(--bg);
}
.nav-row {
  display: flex;
  align-items: center;
  gap: 0.16rem;
  height: 1rem;
  padding: 0 0.24rem;
}
.nav-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 0.64rem;
  height: 0.64rem;
  font-size: 0.44rem;
}
.nav-text {
  flex: 1;
  min-width: 0;
}
.nav-title {
  font-size: 0.34rem;
  font-weight: 700;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.nav-sub {
  font-size: 0.22rem;
  color: var(--muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* 扑克牌：骨白牌面，红桃方块用绯红，黑桃梅花用石板黑 */
.pc {
  position: relative;
  display: inline-block;
  flex: none;
  background: #f8fafc;
  color: #1e293b;
  border-radius: 0.12rem;
  border: 1px solid rgba(255, 255, 255, 0.12);
  box-shadow: 0 0.04rem 0.16rem rgba(0, 0, 0, 0.35);
  font-weight: 700;
  overflow: hidden;
}
.pc.red {
  color: #e05252;
}
.pc-corner {
  position: absolute;
  left: 0.08rem;
  top: 0.04rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  line-height: 1.05;
}
.pc-center {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 6%;
  text-align: center;
  opacity: 0.28;
  line-height: 1;
}
.pc.back {
  background: #181e24;
  border-color: rgba(255, 255, 255, 0.14);
}
.pc-mark {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 36%;
  padding-bottom: 36%;
  transform: translate(-50%, -50%) rotate(45deg);
  border: 0.03rem solid rgba(163, 208, 190, 0.28);
  border-radius: 0.06rem;
}
.pc.s {
  width: 0.48rem;
  height: 0.66rem;
  border-radius: 0.08rem;
}
.pc.s .pc-corner {
  left: 0;
  right: 0;
  top: 0.04rem;
}
.pc.s .pc-rank {
  font-size: 0.24rem;
}
.pc.s .pc-pip {
  font-size: 0.22rem;
}
.pc.s .pc-center {
  display: none;
}
.pc.m {
  width: 0.8rem;
  height: 1.12rem;
}
.pc.m .pc-rank {
  font-size: 0.32rem;
}
.pc.m .pc-pip {
  font-size: 0.24rem;
}
.pc.m .pc-center {
  font-size: 0.56rem;
}
.pc.l {
  width: 1.24rem;
  height: 1.74rem;
  border-radius: 0.16rem;
}
.pc.l .pc-corner {
  left: 0.12rem;
  top: 0.08rem;
}
.pc.l .pc-rank {
  font-size: 0.44rem;
}
.pc.l .pc-pip {
  font-size: 0.32rem;
}
.pc.l .pc-center {
  font-size: 0.84rem;
}

/* 轻提示 */
.toast {
  position: absolute;
  left: 50%;
  top: 42%;
  z-index: 300;
  max-width: 80%;
  transform: translate(-50%, -50%);
  padding: 0.2rem 0.36rem;
  border-radius: 0.16rem;
  background: rgba(11, 15, 18, 0.92);
  border: 1px solid var(--hair);
  font-size: 0.28rem;
  text-align: center;
  pointer-events: none;
}

/* 确认框 */
.dialog-mask {
  position: absolute;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  z-index: 200;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0.62);
}
.dialog {
  width: 78%;
  padding: 0.4rem 0.36rem 0.32rem;
  border-radius: 0.28rem;
  background: var(--surface-low);
  border: 1px solid var(--hair);
}
.dialog-title {
  font-size: 0.34rem;
  font-weight: 700;
}
.dialog-body {
  margin-top: 0.16rem;
  font-size: 0.28rem;
  line-height: 1.6;
  color: var(--on-variant);
}

/* 操作菜单 */
.menu-mask {
  z-index: 200;
}
.menu-item {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 1.04rem;
  border-radius: 0.2rem;
  font-size: 0.3rem;
}
.menu-item + .menu-item {
  margin-top: 0.12rem;
}
.menu-item.opt {
  background: var(--surface);
  border: 1px solid var(--hair);
}
.menu-item.cancel {
  margin-top: 0.24rem;
  color: var(--muted);
}

/* 滑杆 */
input[type='range'].slider {
  -webkit-appearance: none;
  appearance: none;
  height: 0.56rem;
  background: none;
}
.slider::-webkit-slider-runnable-track {
  height: 0.12rem;
  border-radius: 0.06rem;
  background: linear-gradient(90deg, var(--gold) var(--pct, 0%), var(--surface-lowest) var(--pct, 0%));
}
.slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 0.44rem;
  height: 0.44rem;
  margin-top: -0.16rem;
  border-radius: 50%;
  background: var(--gold);
  border: 0.06rem solid var(--surface);
}
.slider::-moz-range-track {
  height: 0.12rem;
  border-radius: 0.06rem;
  background: var(--surface-lowest);
}
.slider::-moz-range-progress {
  height: 0.12rem;
  border-radius: 0.06rem;
  background: var(--gold);
}
.slider::-moz-range-thumb {
  width: 0.36rem;
  height: 0.36rem;
  border-radius: 50%;
  background: var(--gold);
  border: 0.06rem solid var(--surface);
}

/* 可点击元素：按下变淡；有鼠标的设备上显示手型并在悬停时提亮 */
.btn,
.ab,
.q,
.opt,
.tab,
.switch-row,
.create,
.mode,
.paste,
.go,
.room-btn,
.info-btn,
.phrase,
.preset,
.step,
.cell.empty,
.nav-icon,
.leave,
.menu-item,
.seat.pick {
  cursor: pointer;
}
.btn:active,
.ab:active,
.q:active,
.create:active,
.mode:active,
.paste:active,
.go:active,
.room-btn:active,
.info-btn:active,
.phrase:active,
.preset:active,
.step:active,
.nav-icon:active,
.menu-item:active {
  opacity: 0.75;
}
@media (hover: hover) {
  .btn:hover,
  .ab:hover,
  .q:hover,
  .opt:hover,
  .create:hover,
  .mode:hover,
  .paste:hover,
  .go:hover,
  .room-btn:hover,
  .info-btn:hover,
  .phrase:hover,
  .preset:hover,
  .step:hover,
  .menu-item:hover {
    filter: brightness(1.12);
  }
}
.off {
  cursor: default !important;
  filter: none !important;
}

/* 短语条横向滚动 */
.p-room .chat-scroll {
  overflow-x: auto;
}