/* =========================================================
 * 智神超人团 · 数学大富翁 1→101  — 样式
 * ========================================================= */
* { margin: 0; padding: 0; box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { height: 100%; }
body {
  font-family: -apple-system, BlinkMacSystemFont, 'PingFang SC', 'Microsoft YaHei', 'Segoe UI', Roboto, sans-serif;
  color: #1e293b;
  background: linear-gradient(180deg, #7dd3fc 0%, #bae6fd 35%, #e0f2fe 100%);
  overflow-x: hidden;
}

button { font-family: inherit; cursor: pointer; border: none; outline: none; }
small { color: #64748b; }

/* 飘动的云（装饰） */
body::before, body::after {
  content: '☁️';
  position: fixed;
  font-size: 90px; opacity: .5; z-index: 0; pointer-events: none; animation: drift 40s linear infinite;
}
body::before { top: 4%; left: -6%; }
body::after { top: 18%; right: -6%; animation-duration: 55s; animation-direction: reverse; }
@keyframes drift { to { transform: translateX(120vw); } }

.screen { display: none; position: relative; z-index: 1; }
.screen.active { display: block; }

/* ================= 通用按钮 ================= */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  padding: 10px 18px; border-radius: 14px; font-size: 15px; font-weight: 700;
  background: #fff; color: #334155; box-shadow: 0 3px 10px rgba(15,23,42,.08);
  transition: transform .12s, box-shadow .12s, filter .12s;
}
.btn:hover { transform: translateY(-1px); box-shadow: 0 6px 16px rgba(15,23,42,.14); }
.btn:active { transform: translateY(0) scale(.98); }
.btn:disabled, .btn.disabled { opacity: .45; cursor: not-allowed; transform: none !important; }
.btn-primary { background: linear-gradient(135deg,#6366f1,#8b5cf6); color: #fff; box-shadow: 0 6px 18px rgba(99,102,241,.35); }
.btn-ghost { background: rgba(255,255,255,.7); }
.btn-big { padding: 14px 34px; font-size: 19px; border-radius: 18px; }
.btn-mini { padding: 5px 10px; font-size: 12px; border-radius: 10px; }
.btn-dice {
  padding: 10px 22px; font-size: 17px; border-radius: 16px;
  background: linear-gradient(135deg,#f59e0b,#ef4444); color: #fff;
  box-shadow: 0 5px 14px rgba(239,68,68,.35); animation: pulseBtn 1.6s infinite;
}
@keyframes pulseBtn { 0%,100%{ transform: scale(1);} 50%{ transform: scale(1.05);} }

/* ================= 主菜单 ================= */
#screen-menu.active { min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: 24px; }
.menu-card {
  background: rgba(255,255,255,.9); backdrop-filter: blur(6px);
  border-radius: 28px; padding: 30px 34px; max-width: 640px; width: 100%;
  text-align: center; box-shadow: 0 18px 50px rgba(2,32,71,.18);
}
.menu-logo { font-size: 60px; line-height: 1; }
.menu-title {
  font-size: 38px; letter-spacing: 4px; margin: 6px 0 2px;
  background: linear-gradient(90deg,#6366f1,#ec4899,#f59e0b); -webkit-background-clip: text; background-clip: text; color: transparent;
}
.menu-sub { font-size: 18px; color: #64748b; }
.menu-desc { margin: 14px auto 6px; font-size: 14.5px; color: #475569; line-height: 1.9; }
.setting-group { margin: 18px 0 4px; text-align: left; }
.setting-label { font-size: 13px; color: #94a3b8; margin: 10px 2px 6px; font-weight: 700; }
.diff-list { display: flex; gap: 10px; }
.diff-card {
  flex: 1; border-radius: 16px; padding: 12px 8px; background: #f1f5f9; border: 2.5px solid transparent;
  text-align: center; transition: .15s;
}
.diff-card .diff-name { display: block; font-size: 18px; font-weight: 800; }
.diff-card .diff-desc { display: block; font-size: 11.5px; color: #64748b; margin-top: 4px; line-height: 1.5; }
.diff-card.on { background: #eef2ff; border-color: #6366f1; transform: translateY(-2px); box-shadow: 0 8px 18px rgba(99,102,241,.25); }
.seg { display: flex; gap: 10px; }
.seg-btn { flex: 1; padding: 11px; border-radius: 14px; background: #f1f5f9; font-weight: 700; font-size: 15px; color: #475569; transition: .15s; }
.seg-btn.on { background: linear-gradient(135deg,#6366f1,#8b5cf6); color: #fff; box-shadow: 0 5px 12px rgba(99,102,241,.3); }
#screen-menu .btn-big { width: 100%; margin-top: 22px; }
#btn-menu-rules { margin-top: 12px; width: 100%; }

/* ================= 选人 ================= */
#screen-lobby.active { min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: 24px; }
.lobby-card {
  background: rgba(255,255,255,.92); border-radius: 26px; padding: 26px 30px;
  max-width: 720px; width: 100%; box-shadow: 0 18px 50px rgba(2,32,71,.16);
}
.lobby-title { text-align: center; font-size: 24px; }
.lobby-info { text-align: center; margin: 14px 0 6px; color: #475569; }
.hero-grid { display: flex; flex-wrap: wrap; gap: 14px; justify-content: center; margin: 14px 0; }
.hero-pick {
  position: relative; width: 118px; padding: 14px 6px 8px; border-radius: 18px;
  background: #f8fafc; border: 3px solid transparent; transition: .15s; display: flex; flex-direction: column; align-items: center; gap: 6px;
}
.hero-pick.chooseable { cursor: pointer; }
.hero-pick.chooseable:hover { transform: translateY(-3px); border-color: #6366f1; box-shadow: 0 8px 18px rgba(99,102,241,.2); }
.hero-pick.picked { opacity: .75; border-color: #94a3b8; }
.hero-pick-name { font-weight: 800; font-size: 15px; }
.hero-pick-tag {
  position: absolute; top: -9px; right: -8px; background: #6366f1; color: #fff;
  font-size: 11px; padding: 3px 8px; border-radius: 20px; font-weight: 700;
}
.lobby-btns { display: flex; gap: 12px; justify-content: center; margin-top: 14px; }

/* 头像圆 */
.avatar {
  position: relative; border-radius: 50%; display: grid; place-items: center;
  border: 3px solid #fff; box-shadow: 0 3px 8px rgba(0,0,0,.15); flex: none; overflow: hidden;
}
.avatar-emoji { font-size: 50%; line-height: 1; }
.avatar.avatar-emoji { font-size: 40%; }

/* ================= 游戏页骨架 ================= */
#screen-game.active { height: 100vh; display: flex; flex-direction: column; }
.game-top {
  display: flex; align-items: center; gap: 10px; padding: 8px 14px;
  background: rgba(255,255,255,.85); backdrop-filter: blur(4px);
  box-shadow: 0 2px 10px rgba(0,0,0,.06); flex: none;
}
.game-title { font-size: 18px; font-weight: 800; flex: 1; text-align: center; letter-spacing: 1px; }
.diff-tag { background: #60a5fa; color: #fff; border-radius: 20px; padding: 4px 12px; font-size: 13px; font-weight: 800; }

.players-bar { display: flex; gap: 8px; padding: 8px 14px; overflow-x: auto; flex: none; }
.pchip {
  display: flex; align-items: center; gap: 8px; background: rgba(255,255,255,.85);
  border-radius: 16px; padding: 6px 12px 6px 6px; border: 2px solid transparent; min-width: 170px;
}
.pchip.active { border-color: #f59e0b; background: #fff; box-shadow: 0 4px 14px rgba(245,158,11,.35); }
.pchip.won { filter: grayscale(.2); }
.pchip-info { line-height: 1.2; min-width: 0; }
.pchip-name { font-weight: 800; font-size: 13.5px; white-space: nowrap; }
.pchip-name small { color: #94a3b8; font-weight: 600; margin-left: 3px; }
.pchip-pos { font-size: 12px; color: #64748b; }
.pchip-cards { margin-left: auto; display: flex; gap: 2px; flex: none; }
.pchip-cards span { font-size: 12px; }
.pchip-cards .none { color: #cbd5e1; }

.game-main { flex: 1; display: flex; min-height: 0; gap: 0; }
.board-view {
  flex: 1; min-width: 0; min-height: 0; display: flex; overflow: auto;
  padding: 10px; background: rgba(255,255,255,.18);
}
.board-container { margin: auto; position: relative; flex: none; }

/* ================= 棋盘 ================= */
.board-grid { position: relative; background: transparent; }
.cell { position: absolute; border-radius: 0; transition: transform .12s, filter .12s; }
.cell.hex { clip-path: polygon(25% 0, 75% 0, 100% 50%, 75% 100%, 25% 100%, 0 50%); }
.cell.empty { background: rgba(255,255,255,.055); pointer-events: none; }
.cell.empty:hover { transform: none; }
.cell:hover { transform: scale(1.12); z-index: 5; }
.cell.pulse { animation: cellpulse .7s; }
@keyframes cellpulse { 0%{ transform: scale(1);} 35%{ transform: scale(1.35);} 100%{ transform: scale(1);} }

/* 数字：叠在圆盘正中 */
.cell .num {
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  font-weight: 900; font-size: calc(var(--tile, 56px) * .36);
  color: #fff; text-shadow: 0 1px 2px rgba(0,0,0,.4); line-height: 1; pointer-events: none;
}
.cell .num.on-white { color: #334155; text-shadow: 0 1px 1px rgba(255,255,255,.6); }
.disc {
  position: absolute; left: 2%; top: 2%; width: 96%; height: 96%; border-radius: 50%;
  box-shadow: inset 0 -2px 4px rgba(0,0,0,.12), 0 1px 2px rgba(0,0,0,.1); pointer-events: none;
}

/* 质数/合数 视觉区分 */
.type-start { background: radial-gradient(circle, #059669, #34d399); border-radius: 50%; box-shadow: 0 3px 8px rgba(5,150,105,.4); }
.type-start .num { font-size: calc(var(--tile, 56px) * .26); color: #fff; text-shadow: none; }
.type-win { background: radial-gradient(circle, #f59e0b, #fcd34d); border-radius: 50%; box-shadow: 0 3px 10px rgba(245,158,11,.5); }
.type-win .win-num {
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  font-size: calc(var(--tile, 56px) * .46); font-weight: 900; color: #fff;
  text-shadow: 0 2px 4px rgba(180,83,9,.6); line-height: 1; pointer-events: none;
}
.type-win .num { position: absolute; top: -22%; left: 0; right: 0; display: flex; justify-content: center; font-size: calc(var(--tile, 56px) * .34); }
.type-composite .num { text-shadow: 0 1px 2px rgba(0,0,0,.55); }

/* 区间配色格（以定稿效果图为准） */
.cell.cell-num { box-shadow: none; }
.cell.cell-num .num { color: #fff; text-shadow: 0 1px 2px rgba(0,0,0,.5); }
.cell.type-prime { }
.hex-inner {
  position: absolute; inset: 0; background: rgba(15,23,42,.34); pointer-events: none;
  clip-path: polygon(25% 0, 75% 0, 100% 50%, 75% 100%, 25% 100%, 0 50%);
  transform: scale(.74);
}
.prime-badge {
  position: absolute; top: 8%; right: 15%; width: 1.05em; height: 1.05em; border-radius: 50%;
  background: rgba(15,23,42,.8); color: #fff; font-weight: 900;
  font-size: calc(var(--tile, 56px) * .26); display: grid; place-items: center; pointer-events: none;
}

/* 一元运算按钮 */
.unary-btn { width: 44px; height: 40px; border-radius: 10px; font-size: 19px; font-weight: 900;
  background: #e7f5ff; color: #0b7285; border: 2px solid #a5d8ff; touch-action: none; }
.unary-btn.sel { outline: 3px solid #f59e0b; transform: scale(1.08); }
.verify-btn { background: #e7f5ff; color: #0b7285; }
.pchip-heroes { font-size: 11px; color: #64748b; }

/* 六边形头像 */
.avatar.hexa, .hero-avatar.hexa {
  border-radius: 0; border: none;
  clip-path: polygon(25% 0, 75% 0, 100% 50%, 75% 100%, 25% 100%, 0 50%);
}

/* 选人合影横幅（正式合影到位前用角色图占位） */
.banner-tip { text-align: center; color: #94a3b8; font-size: 12px; margin: 6px 0 8px; }
.hero-banner {
  display: flex; gap: 10px; overflow-x: auto; padding: 12px; border-radius: 18px;
  background-image:
    radial-gradient(1.4px 1.4px at 20% 30%, rgba(255,255,255,.7), transparent),
    radial-gradient(1.4px 1.4px at 70% 65%, rgba(255,255,255,.6), transparent),
    radial-gradient(1.4px 1.4px at 45% 85%, rgba(255,255,255,.5), transparent),
    linear-gradient(135deg, #241a4d, #0f0b2b);
  background-size: 180px 180px, 240px 240px, 300px 300px, cover;
  border: 1px solid rgba(150,140,255,.28);
}
.hero-banner .hero-pick { width: 122px; flex: none; background: rgba(255,255,255,.06); }
.hero-banner .hero-pick-name { color: #e9e6ff; }
.hero-banner .hero-pick.chooseable:hover { border-color: #ffd43b; }

/* 棋盘区太空背景（占位，等美术定稿） */
.board-view {
  background-image:
    radial-gradient(1.5px 1.5px at 20% 30%, rgba(255,255,255,.8), transparent),
    radial-gradient(1.5px 1.5px at 65% 60%, rgba(255,255,255,.6), transparent),
    radial-gradient(1.2px 1.2px at 40% 80%, rgba(255,255,255,.5), transparent),
    radial-gradient(1.2px 1.2px at 85% 25%, rgba(255,255,255,.55), transparent),
    radial-gradient(1200px 800px at 30% 15%, #2b1d5e 0%, #160f36 45%, #0a0720 100%);
  background-size: 190px 190px, 260px 260px, 320px 320px, 220px 220px, cover;
}

/* 右下角文字规则板 */
.game-main { position: relative; }
.rules-board {
  position: absolute; right: 10px; bottom: 10px; width: 300px; max-height: 48%; overflow: auto;
  background: rgba(10,8,32,.74); color: #e9e6ff; border: 1px solid rgba(160,150,255,.35);
  border-radius: 14px; padding: 10px 12px; font-size: 11.5px; line-height: 1.65; z-index: 60;
  backdrop-filter: blur(4px); pointer-events: auto;
}
.rules-board .rb-title { font-weight: 900; font-size: 13px; margin-bottom: 4px; color: #ffd43b; }
.rules-board p { margin: 2px 0; }
@media (max-width: 1040px) { .rules-board { display: none; } }
.cell-gift { position: absolute; top: -18%; right: -8%; font-size: calc(var(--tile, 56px) * .52); filter: drop-shadow(0 1px 1px rgba(0,0,0,.3)); pointer-events: none; }
.factor-tip {
  position: absolute; bottom: -6%; left: 0; right: 0; text-align: center;
  font-size: calc(var(--tile, 56px) * .24); font-weight: 800; color: rgba(255,255,255,.96);
  text-shadow: 0 1px 2px rgba(0,0,0,.55); display: none; pointer-events: none; line-height: 1;
}
.cell:hover .factor-tip { display: block; }

/* ================= 英雄棋子 ================= */
.hero {
  position: absolute; transform: translate(-50%, -50%); pointer-events: none;
  width: calc(var(--tile, 56px) * .76); height: calc(var(--tile, 56px) * .76);
}
.hero-avatar {
  width: 100%; aspect-ratio: 1; border-radius: 50%; display: grid; place-items: center;
  border: 3px solid #fff; box-shadow: 0 4px 8px rgba(0,0,0,.25); overflow: hidden;
  position: relative; background-size: cover; background-position: center;
}
.hero-emoji { font-size: calc(var(--tile, 56px) * .44); line-height: 1; }
.hero-tag {
  position: absolute; left: 50%; top: calc(100% - 2px); transform: translateX(-50%);
  background: rgba(15,23,42,.72); color: #fff; font-size: calc(var(--tile, 56px) * .18);
  padding: 1px 6px; border-radius: 8px; white-space: nowrap; font-weight: 700;
}
.hero.active .hero-avatar { box-shadow: 0 0 0 3px #fbbf24, 0 5px 12px rgba(0,0,0,.3); animation: bob 1.4s ease-in-out infinite; }
@keyframes bob { 0%,100%{ transform: translateY(0);} 50%{ transform: translateY(-5px);} }

/* 装饰格 */
.cell.deco { display: grid; place-items: center; background: rgba(255,255,255,.32); border-radius: 50%; pointer-events: none; }
.deco-dot {
  width: 34%; height: 34%; border-radius: 50%; background: rgba(148,163,184,.5);
}

/* ================= 侧边面板 ================= */
.panel {
  width: 402px; flex: none; display: flex; flex-direction: column; min-height: 0;
  background: rgba(255,255,255,.9); border-left: 1px solid rgba(0,0,0,.05);
  box-shadow: -6px 0 20px rgba(2,32,71,.06); padding: 12px; gap: 10px; overflow-y: auto;
}
.turn-box {
  background: linear-gradient(135deg,#eef2ff,#fdf4ff); border: 2px solid #e0e7ff;
  border-radius: 18px; padding: 12px 14px; flex: none;
}
.turn-head { display: flex; align-items: center; gap: 10px; }
.turn-avatar {
  width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center;
  font-size: 24px; border: 3px solid #fff; box-shadow: 0 3px 8px rgba(0,0,0,.15);
}
.turn-name { font-size: 15px; }
.turn-name b { color: #6366f1; font-size: 17px; }
.turn-pos { font-size: 12.5px; color: #64748b; margin-top: 2px; }
.turn-actions { margin-top: 10px; display: flex; gap: 8px; }

.dice-zone { min-height: 78px; display: flex; align-items: center; justify-content: center; gap: 14px; flex: none; }
.dice-zone.active { background: rgba(99,102,241,.06); border-radius: 16px; }
.dice-slot { width: 62px; height: 62px; display: grid; place-items: center; }
.die { width: 58px; height: 58px; border-radius: 16%; background: #fff; box-shadow: 0 6px 14px rgba(0,0,0,.18); position: relative; }
.die6 { padding: 9px; }
.pips { width: 100%; height: 100%; display: grid; grid-template-columns: repeat(3,1fr); grid-template-rows: repeat(3,1fr); gap: 2px; }
.pips i { border-radius: 50%; display: block; }
.pips i.on { background: #1e3a8a; }
.dieN { display: grid; place-items: center; background: linear-gradient(145deg,#fde68a,#f59e0b); }
.dieN.big { width: 60px; height: 60px; }
.die-num { font-size: 26px; font-weight: 900; color: #7c2d12; }
.dice-slot.land { animation: land .35s cubic-bezier(.2,1.6,.4,1); }
@keyframes land { 0%{ transform: translateY(-14px) scale(.8);} 100%{ transform: translateY(0) scale(1);} }

/* 算式区 */
.solve-zone { background: #fff; border: 2px solid #e2e8f0; border-radius: 18px; padding: 12px; flex: none; }
.solve-zone.hidden { display: none; }
.solve-head { font-weight: 800; font-size: 14px; margin-bottom: 10px; }
.solve-head small { font-weight: 500; font-size: 11px; }
.expr-line {
  display: flex; align-items: center; justify-content: center; gap: 6px; flex-wrap: wrap;
  background: #f8fafc; border-radius: 14px; padding: 10px 6px; margin-bottom: 8px;
}
.num-slot {
  width: 56px; height: 52px; border-radius: 12px; border: 2.5px dashed #cbd5e1; background: #fff;
  display: grid; place-items: center; position: relative; font-weight: 900; font-size: 20px;
  transition: .12s; user-select: none;
}
.num-slot.has { border-style: solid; border-color: #818cf8; background: #eef2ff; }
.slot-empty { color: #cbd5e1; }
.slot-num { color: #4338ca; }
.root-toggle {
  position: absolute; right: -8px; bottom: -8px; width: 24px; height: 24px; border-radius: 50%;
  background: #10b981; color: #fff; font-weight: 900; font-size: 15px; line-height: 1;
  display: grid; place-items: center; box-shadow: 0 2px 6px rgba(16,185,129,.4);
}
.root-toggle.on { background: #ec4899; }
.op-well {
  width: 42px; height: 42px; border-radius: 12px; border: 2.5px dashed #fecaca; background: #fff;
  font-weight: 900; font-size: 22px; color: #e11d48; transition: .12s; user-select: none;
}
.op-well.has { border-style: solid; background: #fff1f2; }
.eq { font-weight: 900; font-size: 24px; margin-left: 4px; }
.expr-result { font-weight: 900; font-size: 26px; min-width: 34px; text-align: center; color: #94a3b8; }
.expr-result.ok { color: #059669; }
.expr-result.bad { color: #dc2626; }
.solve-hint { font-size: 12px; color: #94a3b8; margin: 6px 0 4px; font-weight: 600; }
.num-tray { display: flex; gap: 10px; margin-bottom: 4px; }
.num-chip {
  width: 46px; height: 46px; border-radius: 12px; font-size: 20px; font-weight: 900;
  background: linear-gradient(145deg,#c7d2fe,#6366f1); color: #fff; box-shadow: 0 4px 8px rgba(99,102,241,.3);
  transition: .1s; touch-action: none;
}
.num-chip.sel { outline: 3px solid #f59e0b; transform: scale(1.1); }
.num-chip.used { opacity: .3; pointer-events: none; box-shadow: none; }
.op-palette { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 4px; }
.op-btn {
  width: 40px; height: 40px; border-radius: 10px; font-size: 20px; font-weight: 900;
  background: #fff1f2; color: #e11d48; border: 2px solid #fecaca; touch-action: none;
}
.op-btn.sel { outline: 3px solid #f59e0b; transform: scale(1.1); }
.sqrt-hint { font-size: 11px; color: #10b981; margin: 4px 0; }
.solve-msg { min-height: 22px; font-size: 13.5px; font-weight: 700; color: #64748b; margin: 4px 0; }
.solve-msg.good { color: #059669; }
.solve-msg.bad { color: #dc2626; }
.solve-btns { display: flex; gap: 8px; }
.solve-btns .btn { flex: 1; }

/* 道具栏 */
.my-cards { background: #fffbeb; border: 2px solid #fde68a; border-radius: 16px; padding: 10px; flex: none; }
.my-cards-title { font-size: 12.5px; font-weight: 800; color: #92400e; margin-bottom: 8px; }
.my-cards-empty { font-size: 12.5px; color: #a16207; }
.my-cards-row { display: flex; flex-wrap: wrap; gap: 8px; }
.card-chip {
  display: flex; align-items: center; gap: 6px; padding: 6px 12px 6px 8px; border-radius: 12px;
  background: #fff; border: 2px solid #fde68a; font-weight: 800; font-size: 13px; color: #78350f;
  transition: .12s;
}
.card-chip:hover { transform: translateY(-2px); box-shadow: 0 5px 12px rgba(180,83,9,.2); }
.card-emoji { font-size: 20px; }

/* 日志 */
.log-zone { flex: 1; min-height: 90px; max-height: 220px; overflow-y: auto; background: #f8fafc; border-radius: 14px; padding: 8px 10px; font-size: 12.5px; line-height: 1.8; }
.log-line { border-bottom: 1px dashed #e2e8f0; padding: 2px 0; }
.log-line.sys { color: #64748b; }
.log-line.roll { color: #b45309; }
.log-line.ok { color: #166534; }
.log-line.trap { color: #b91c1c; font-weight: 700; }
.log-line.card { color: #7c3aed; }
.log-line.shield { color: #0369a1; }
.log-line.ai { color: #0e7490; font-weight: 700; }
.log-line.win { color: #f59e0b; font-weight: 900; font-size: 14px; }

/* ================= 弹窗 ================= */
.modal-overlay {
  position: fixed; inset: 0; background: rgba(15,23,42,.55); z-index: 200;
  display: flex; align-items: center; justify-content: center; padding: 20px; backdrop-filter: blur(3px);
  animation: fadein .18s;
}
@keyframes fadein { from { opacity: 0; } }
.modal-card {
  background: #fff; border-radius: 24px; padding: 22px 24px; max-width: 440px; width: 100%;
  max-height: 86vh; overflow-y: auto; text-align: center; box-shadow: 0 24px 60px rgba(0,0,0,.3);
  animation: pop .22s cubic-bezier(.2,1.5,.4,1);
}
@keyframes pop { from { transform: scale(.85); opacity: 0; } }
.modal-icon { font-size: 52px; }
.modal-title { font-size: 20px; font-weight: 900; margin: 8px 0; }
.modal-body { font-size: 14.5px; color: #475569; line-height: 1.8; text-align: left; }
.modal-btns { display: flex; gap: 10px; justify-content: center; margin-top: 16px; }
.modal-btns .btn { flex: 1; }

.rules p { margin: 6px 0; }
.draw-body { display: flex; justify-content: center; }
.draw-card {
  border-radius: 20px; padding: 18px; width: 100%; text-align: center; border: 3px solid #fff;
  box-shadow: 0 8px 20px rgba(0,0,0,.12);
}
.draw-emoji { display: block; font-size: 56px; }
.draw-name { display: block; font-size: 22px; font-weight: 900; margin-top: 4px; }
.draw-desc { display: block; font-size: 14px; margin-top: 6px; color: #374151; font-weight: 600; }

.win-body { text-align: center; }
.win-avatar {
  width: 86px; height: 86px; border-radius: 50%; display: grid; place-items: center; font-size: 46px;
  margin: 6px auto; border: 4px solid #fcd34d; box-shadow: 0 0 0 5px #fef3c7;
}
.win-body p { text-align: center; font-size: 16px; }

.opp-list { display: flex; flex-direction: column; gap: 8px; }
.opp-btn {
  display: flex; align-items: center; gap: 10px; padding: 10px 14px; border-radius: 14px;
  background: #f8fafc; border: 2px solid #e2e8f0; font-size: 15px; font-weight: 700; transition: .12s;
}
.opp-btn:hover { border-color: #6366f1; background: #eef2ff; }
.opp-btn small { margin-left: auto; }
.opp-avatar { width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; font-size: 18px; border: 2px solid #fff; }

/* toast / 大标语 */
.toast {
  position: fixed; left: 50%; bottom: 34px; transform: translate(-50%, 20px); opacity: 0;
  background: rgba(15,23,42,.85); color: #fff; padding: 10px 20px; border-radius: 20px;
  font-size: 14px; font-weight: 700; z-index: 300; transition: .25s; pointer-events: none; max-width: 86vw; text-align: center;
}
.toast.show { opacity: 1; transform: translate(-50%, 0); }
#big-note {
  position: fixed; top: 12%; left: 50%; transform: translate(-50%, -8px); opacity: 0;
  background: linear-gradient(135deg,#6366f1,#ec4899); color: #fff; font-size: 26px; font-weight: 900;
  padding: 14px 34px; border-radius: 24px; z-index: 150; box-shadow: 0 14px 34px rgba(99,102,241,.4);
  transition: .25s; pointer-events: none; white-space: nowrap;
}
#big-note.show { opacity: 1; transform: translate(-50%, 0); }

/* 拖拽幽灵 */
.ghost { border-radius: 12px !important; box-shadow: 0 10px 20px rgba(0,0,0,.3) !important; }

/* ================= 响应式 ================= */
@media (max-width: 1040px) {
  .game-main { flex-direction: column; overflow: hidden; }
  .board-view { flex: 1 1 55%; min-height: 0; }
  .panel { flex: 1 1 45%; width: 100%; max-height: none; min-height: 0; border-left: none; border-top: 1px solid rgba(0,0,0,.05); }
  #big-note { font-size: 20px; padding: 10px 20px; white-space: normal; text-align: center; }
  .menu-card { padding: 22px 18px; }
  .game-title { font-size: 15px; }
}