/* 石头游戏 · 手绘风对局页
 *
 * 坐标系：效果图 design/mockup.png（941×1672，页面裁掉顶部 48px 状态栏）。
 * --u = 效果图 1px 对应的页面长度；.abs 元素用 --x/--y/--w/--h 写效果图坐标即可。
 * 移动端铺满宽度，桌面端限制为 430px 宽的手机尺寸。
 */

:root {
  --W: min(100vw, 430px);
  --u: calc(var(--W) / 941);
  --ink: #1e2346;
  --paper: #f3ecdc;
  --font: "Xiaolai SC", "Hannotate SC", "Kaiti SC", "PingFang SC", sans-serif;
}

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { margin: 0; }

body {
  min-height: 100vh;
  min-height: 100dvh;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font);
  -webkit-font-smoothing: antialiased;
  -webkit-text-size-adjust: 100%;
}

.app {
  position: relative;
  width: var(--W);
  min-height: 100vh;
  min-height: 100dvh;
  margin: 0 auto;
  padding-top: env(safe-area-inset-top);
  background: var(--paper);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  justify-content: center;   /* 比 9:16 更长的屏幕上下留出纸面 */
}

/* 桌面端：居中显示一台"手机" */
@media (min-width: 520px) {
  :root { --W: min(430px, (100vh - 48px) * 941 / 1624); }   /* 窗口矮时整台手机缩小放得下 */
  body {
    display: flex;
    padding: 24px 0;
    background: radial-gradient(circle at 50% 30%, #4a4e5e, #23252e);
  }
  .app {
    min-height: 0;
    margin: auto;
    border-radius: 28px;
    box-shadow: 0 20px 60px rgba(0, 0, 0, .45);
  }
}

.stage {
  position: relative;
  width: 100%;
  height: calc(1624 * var(--u));
  background: url(/img/game/bg.jpg) center top / 100% 100% no-repeat;
}

.abs {
  position: absolute;
  left: calc(var(--x) * var(--u));
  top: calc((var(--y) - 48) * var(--u));
  width: calc(var(--w) * var(--u));
  height: calc(var(--h) * var(--u));
}

.center { display: flex; align-items: center; justify-content: center; }
[hidden] { display: none !important; }

/* ---------- 顶部回合信息 ---------- */
.round-title, .turn-pill, .turn-order {
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
  white-space: nowrap;
}
.round-title {
  font-size: calc(45 * var(--u));
  letter-spacing: calc(3 * var(--u));
  -webkit-text-stroke: calc(1.8 * var(--u)) currentColor;
  padding-bottom: calc(2 * var(--u));
}
.round-title em {
  font-style: normal;
  color: #ee4a22;
  font-size: 1.2em;
  margin: 0 calc(3 * var(--u)) 0 calc(1 * var(--u));
}
.turn-pill {
  font-size: calc(33 * var(--u));
  letter-spacing: calc(3 * var(--u));
  -webkit-text-stroke: calc(1.1 * var(--u)) currentColor;
}
.turn-order {
  font-size: calc(29 * var(--u));
  word-spacing: calc(4 * var(--u));
  color: #262b4d;
}

/* ---------- 通用按钮 ---------- */
.btn {
  margin: 0;
  padding: 0;
  font-family: inherit;
  color: #fff;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
  white-space: nowrap;
  -webkit-text-stroke: calc(1 * var(--u)) currentColor;
  transition: transform .08s, filter .15s;
}
.btn:active:not(:disabled) { transform: translateY(calc(3 * var(--u))) scale(.98); }
.btn:disabled { cursor: default; filter: grayscale(.75) brightness(1.08); opacity: .75; }

/* 彩铅斜纹 + 高光 */
.btn-blue, .btn-orange {
  border: calc(4.5 * var(--u)) solid;
  box-shadow:
    inset 0 calc(-7 * var(--u)) 0 rgba(0, 0, 0, .14),
    0 calc(5 * var(--u)) calc(7 * var(--u)) rgba(40, 50, 90, .22);
}
.btn-blue {
  border-color: #102a63;
  background:
    repeating-linear-gradient(118deg, rgba(255, 255, 255, .09) 0 calc(2 * var(--u)), transparent calc(2 * var(--u)) calc(7 * var(--u))),
    linear-gradient(180deg, #5c9df6 0%, #2d70e2 45%, #1f59c8 100%);
  text-shadow: 0 calc(2 * var(--u)) 0 rgba(10, 30, 90, .35);
}
.btn-orange {
  border-color: #3a1a12;
  background:
    repeating-linear-gradient(118deg, rgba(255, 255, 255, .1) 0 calc(2 * var(--u)), transparent calc(2 * var(--u)) calc(7 * var(--u))),
    linear-gradient(180deg, #ff8456 0%, #f15529 45%, #dd4119 100%);
  text-shadow: 0 calc(2 * var(--u)) 0 rgba(110, 30, 10, .35);
}
.btn-blue::before, .btn-orange::before,
.btn-blue::after, .btn-orange::after {
  content: "";
  position: absolute;
  pointer-events: none;
  border-radius: 50%;
}
.btn-blue::before, .btn-orange::before {       /* 左上高光 */
  left: 5%; top: 11%; width: 14%; height: 32%;
  border-top: calc(4 * var(--u)) solid rgba(255, 255, 255, .8);
  border-left: calc(2 * var(--u)) solid rgba(255, 255, 255, .35);
  border-radius: 60% 0 0 0 / 70% 0 0 0;
}
.btn-blue::after, .btn-orange::after {         /* 右下反光 */
  right: 7%; bottom: 12%; width: 14%; height: 30%;
  border-bottom: calc(3 * var(--u)) solid rgba(255, 255, 255, .45);
  border-radius: 0 0 60% 0 / 0 0 70% 0;
}

/* ---------- 问一个问题 ---------- */
.field {
  margin: 0;
  padding: 0 calc(26 * var(--u));
  font-family: inherit;
  font-size: calc(39 * var(--u));
  color: var(--ink);
  background: #fff;
  border: calc(3.5 * var(--u)) solid #5f6168;
  border-radius: calc(18 * var(--u));
  box-shadow:
    inset 0 0 0 calc(3 * var(--u)) #ededed,
    0 calc(4 * var(--u)) 0 rgba(0, 0, 0, .07);
  outline: none;
  -webkit-appearance: none;
  appearance: none;
}
.field::placeholder { color: #a3a7b6; }
.field:focus { border-color: #2d5fc4; }
.field:disabled { color: #5a5f7a; background: #f7f6f2; opacity: 1; -webkit-text-fill-color: #5a5f7a; }

.btn-ask {
  border-radius: calc(28 * var(--u));
  font-size: calc(52 * var(--u));
  letter-spacing: calc(8 * var(--u));
  padding-left: calc(8 * var(--u));
}

.chips {
  display: flex;
  align-items: center;
  gap: calc(15 * var(--u));
  overflow: hidden;
}
.chip {
  flex: none;
  min-width: calc(121 * var(--u));
  height: calc(50 * var(--u));
  padding: 0 calc(16 * var(--u));
  font-family: inherit;
  font-size: calc(28 * var(--u));
  color: var(--ink);
  border: calc(3 * var(--u)) solid;
  border-radius: calc(25 * var(--u));
  box-shadow: 0 calc(3 * var(--u)) 0 rgba(0, 0, 0, .06);
  cursor: pointer;
  line-height: 1;
}
.chip:nth-child(3n+1) { background: #d0e7fa; border-color: #97c4eb; }
.chip:nth-child(3n+2) { background: #fbe9a4; border-color: #eccb62; }
.chip:nth-child(3n+3) { background: #fad4de; border-color: #eca6ba; }
.chip:active { transform: translateY(calc(2 * var(--u))); }
.chip:disabled { opacity: .55; cursor: default; transform: none; }

/* ---------- 本轮情报 ---------- */
.intel {
  display: flex;
  flex-direction: column;
  gap: calc(5 * var(--u));
}
.intel-row {
  flex: 1;
  display: flex;
  align-items: center;
  padding: 0 calc(20 * var(--u)) 0 calc(7 * var(--u));
  background: rgba(255, 255, 255, .7);
  border: calc(2.5 * var(--u)) solid #e3e3e3;
  border-radius: calc(10 * var(--u));
}
.who {
  flex: none;
  width: calc(98 * var(--u));
  height: calc(54 * var(--u));
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: calc(30 * var(--u));
  -webkit-text-stroke: calc(1.2 * var(--u)) currentColor;
  border: calc(3 * var(--u)) solid;
  border-radius: calc(10 * var(--u));
}
.who.me { background: #bdd9f8; border-color: #7db2ec; }
.who.op { background: #f9c5d4; border-color: #ec95ae; }
.q {
  flex: 1;
  min-width: 0;
  padding: 0 calc(12 * var(--u)) 0 calc(25 * var(--u));
  font-size: calc(28.5 * var(--u));
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.ans {
  flex: none;
  width: calc(156 * var(--u));
  height: calc(52 * var(--u));
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: calc(29 * var(--u));
  -webkit-text-stroke: calc(1 * var(--u)) currentColor;
  border: calc(3 * var(--u)) solid;
  border-radius: calc(26 * var(--u));
  white-space: nowrap;
}
.ans.yes     { background: #baf0b4; border-color: #88d682; color: #1d5a1d; }
.ans.no      { background: #fdd4d9; border-color: #efacb6; color: var(--ink); }
.ans.invalid { background: #e7e7eb; border-color: #c6c6ce; color: #5b5d6b; }
.ans.pending { background: transparent; border-color: #c9c9cf; border-style: dashed; color: #8a8d9c; -webkit-text-stroke: 0; }
.ans:empty   { visibility: hidden; }

/* ---------- 拿多少？ ---------- */
.btn-round { border-radius: 50%; }
.btn-round::before { left: 16%; top: 14%; width: 30%; height: 36%; }
.btn-round::after { display: none; }
.bar {
  position: absolute;
  left: 50%;
  top: 50%;
  width: calc(38 * var(--u));
  height: calc(12 * var(--u));
  transform: translate(-50%, -50%);
  background: #fff;
  border-radius: calc(6 * var(--u));
  box-shadow: 0 0 0 calc(1.5 * var(--u)) rgba(16, 42, 99, .5);
}
.bar.v { width: calc(12 * var(--u)); height: calc(38 * var(--u)); }

.count {
  margin: 0;
  padding: 0;
  font-family: inherit;
  font-size: calc(66 * var(--u));
  text-align: center;
  color: var(--ink);
  -webkit-text-stroke: calc(2.6 * var(--u)) currentColor;
  background: #fff;
  border: calc(3.5 * var(--u)) solid #8f9197;
  border-radius: calc(14 * var(--u));
  box-shadow: inset 0 0 0 calc(3 * var(--u)) #efefef, 0 calc(4 * var(--u)) 0 rgba(0, 0, 0, .06);
  outline: none;
  -webkit-appearance: none;
  appearance: none;
}
.count:focus { border-color: #2d5fc4; }

.btn-take {
  border-radius: calc(30 * var(--u));
  font-size: calc(44 * var(--u));
  word-spacing: calc(-6 * var(--u));
}
.take-hint {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: calc(25 * var(--u));
  color: #30354f;
  white-space: nowrap;
}
.take-msg {
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  white-space: pre-line;
  font-size: calc(34 * var(--u));
  line-height: 1.3;
  -webkit-text-stroke: calc(.8 * var(--u)) currentColor;
}
.take-msg.wide { width: calc(660 * var(--u)); }

/* ---------- 历史情报 ---------- */
.history {
  display: flex;
  flex-direction: column;
  gap: calc(2.5 * var(--u));
  overflow-y: auto;
  scrollbar-width: none;
  overscroll-behavior: contain;
}
.history::-webkit-scrollbar { display: none; }
.h-row {
  flex: 0 0 calc(43 * var(--u));
  display: flex;
  align-items: center;
  font-size: calc(24.5 * var(--u));
  white-space: nowrap;
  background: #eef2f8;
  border: calc(2 * var(--u)) solid #dde4ee;
  border-radius: calc(8 * var(--u));
  overflow: hidden;
}
.h-round {
  flex: none;
  width: calc(100 * var(--u));
  align-self: stretch;
  display: flex;
  align-items: center;
  justify-content: center;
  border-right: calc(2 * var(--u)) solid #dde4ee;
}
.h-q {
  min-width: 0;
  padding-left: calc(17 * var(--u));
  overflow: hidden;
  text-overflow: ellipsis;
}
.h-ans {
  flex: none;
  margin-left: calc(14 * var(--u));
  color: #2c7a20;
  -webkit-text-stroke: calc(.7 * var(--u)) currentColor;
}
.h-ans.invalid { color: #7a7d8c; }
.h-take { display: flex; align-items: center; padding-left: calc(14 * var(--u)); }
.h-take img { width: calc(44 * var(--u)); height: calc(42 * var(--u)); object-fit: contain; }
.h-take span { margin-left: calc(24 * var(--u)); }
.gap { width: calc(22 * var(--u)); }
.h-empty { font-size: calc(23 * var(--u)); color: #8a8d9c; padding: calc(10 * var(--u)) 0 0 calc(8 * var(--u)); }

/* ---------- 左上角：离开 / 房间号 ---------- */
.top-btn, .room-tag {
  z-index: 4;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: inherit;
  color: var(--ink);
  background: #fbf5e8;
  border: calc(3 * var(--u)) solid #caa86a;
  box-shadow: 0 calc(3 * var(--u)) 0 rgba(90, 70, 40, .15);
  line-height: 1;
}
.top-btn {
  margin: 0;
  padding: 0;
  font-size: calc(26 * var(--u));
  border-radius: calc(26 * var(--u));
  cursor: pointer;
}
.top-btn:active { transform: translateY(calc(2 * var(--u))); }
.room-tag {
  flex-direction: column;
  gap: calc(4 * var(--u));
  font-size: calc(19 * var(--u));
  color: #5a5f7a;
  border-radius: calc(14 * var(--u));
}
.room-tag b {
  font-weight: normal;
  font-size: calc(28 * var(--u));
  letter-spacing: calc(2 * var(--u));
  color: #ee4a22;
  -webkit-text-stroke: calc(1 * var(--u)) currentColor;
}

/* ---------- 大厅（盖住下方卡片区） ---------- */
.lobby {
  z-index: 3;
  display: flex;
  flex-direction: column;
  padding: calc(44 * var(--u)) calc(64 * var(--u)) calc(34 * var(--u));
  background:
    repeating-linear-gradient(125deg, rgba(222, 196, 150, .1) 0 calc(2 * var(--u)), transparent calc(2 * var(--u)) calc(8 * var(--u))),
    #fbf5e8;
  border: calc(4 * var(--u)) solid #d5b27a;
  border-radius: calc(34 * var(--u));
  box-shadow:
    inset 0 0 0 calc(5 * var(--u)) #fdf9f0,
    inset 0 0 0 calc(7.5 * var(--u)) #ecd9b5,
    0 calc(8 * var(--u)) calc(18 * var(--u)) rgba(90, 70, 40, .2);
}
.lobby-title {
  margin: 0;
  font-weight: normal;
  font-size: calc(58 * var(--u));
  text-align: center;
  -webkit-text-stroke: calc(2 * var(--u)) currentColor;
}
.lobby-sub {
  margin: calc(10 * var(--u)) 0 calc(34 * var(--u));
  font-size: calc(26 * var(--u));
  text-align: center;
  color: #5a5f7a;
}
.lobby-label { margin-bottom: calc(12 * var(--u)); font-size: calc(29 * var(--u)); }
.lobby-input { flex: none; height: calc(92 * var(--u)); min-width: 0; }
.lobby .btn { position: relative; }
.lobby-create {
  height: calc(100 * var(--u));
  margin-top: calc(22 * var(--u));
  border-radius: calc(30 * var(--u));
  font-size: calc(46 * var(--u));
  letter-spacing: calc(6 * var(--u));
}
.lobby-or {
  display: flex;
  align-items: center;
  gap: calc(16 * var(--u));
  margin: calc(34 * var(--u)) 0 calc(22 * var(--u));
  font-size: calc(26 * var(--u));
  color: #7a7d8c;
}
.lobby-or::before, .lobby-or::after {
  content: "";
  flex: 1;
  border-top: calc(2.5 * var(--u)) dashed #d7c49e;
}
.lobby-join { display: flex; gap: calc(18 * var(--u)); }
.lobby-join .lobby-input { flex: 1; letter-spacing: calc(4 * var(--u)); }
.lobby-join .btn {
  flex: none;
  width: calc(190 * var(--u));
  height: calc(92 * var(--u));
  border-radius: calc(26 * var(--u));
  font-size: calc(44 * var(--u));
  letter-spacing: calc(4 * var(--u));
}
.lobby-rules {
  margin: calc(36 * var(--u)) 0 0;
  padding: calc(20 * var(--u)) calc(24 * var(--u)) calc(20 * var(--u)) calc(64 * var(--u));
  font-size: calc(26 * var(--u));
  line-height: 1.75;
  background: rgba(255, 255, 255, .55);
  border: calc(2.5 * var(--u)) solid #e6dcc6;
  border-radius: calc(16 * var(--u));
}
.lobby-link {
  margin-top: auto;
  align-self: center;
  font-size: calc(29 * var(--u));
  color: #2d5fc4;
  text-decoration: none;
}

/* ---------- 提示 ---------- */
.toast {
  position: fixed;
  left: 50%;
  bottom: 14%;
  transform: translateX(-50%);
  max-width: calc(var(--W) - 48px);
  padding: 10px 18px;
  font-size: 15px;
  color: #fff;
  background: rgba(30, 35, 70, .9);
  border-radius: 999px;
  z-index: 10;
  pointer-events: none;
}

/* ---------- 调试：game.html?overlay 叠加效果图对比 ---------- */
.ref-overlay {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 5;
}