/* ============ 好友乐园 · 界面 ============ */
:root {
  /* v4：动森式纯色块——奶油底、棕色字、薄荷绿主按钮、暖黄选中 */
  --text: #5C4A33;
  --text-2: #A8977A;
  --text-3: #C9B996;
  --line: rgba(110, 90, 60, .12);
  --line-2: rgba(110, 90, 60, .2);
  --glass: #FFF9EC;
  --solid: #FFF9EC;
  --cr2: #F4ECDA;
  --cr3: #ECE1C8;
  --primary: #4FAA6E;
  --primary-2: #6EC28C;
  --primary-d: #3E8F5A;
  --primary-soft: #DDF0D4;
  --accent: #F5C94E;
  --accent-d: #D9A92E;
  --danger: #E0685A;
  --red: #C24E40;
  --shadow: 0 3px 0 rgba(120, 95, 55, .16), 0 10px 22px -10px rgba(40, 50, 30, .5);
  --shadow-lg: 0 6px 0 rgba(150, 120, 70, .12), 0 24px 48px -16px rgba(60, 70, 50, .5);
  --r: 22px;
  --font: "Noto Sans SC", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", system-ui, sans-serif;
  --serif: "Noto Serif SC", "Songti SC", "STSong", serif;
}
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; overflow: hidden; }
body {
  font: 400 14px/1.5 var(--font);
  color: var(--text);
  background: #DDEFEA;
  -webkit-font-smoothing: antialiased;
  font-feature-settings: "tnum";
  user-select: none;
  -webkit-user-select: none;
}
button, input { font: inherit; color: inherit; }
button { cursor: pointer; }
input { user-select: text; -webkit-user-select: text; }
.hidden { display: none !important; }
#world { position: fixed; inset: 0; background: linear-gradient(#9FD3E6 0%, #D6EFEA 48%, #F6EFDD 100%); }
#world canvas { display: block; touch-action: none; }

/* ---------- 基础组件 ---------- */
.panel {
  background: var(--glass);
  backdrop-filter: blur(14px) saturate(1.2);
  -webkit-backdrop-filter: blur(14px) saturate(1.2);
  border: 1px solid rgba(255, 255, 255, .7);
  border-radius: var(--r);
  box-shadow: var(--shadow);
}
.ico { width: 20px; height: 20px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  height: 40px; padding: 0 18px; border: 0; border-radius: 10px;
  font: 600 15px/1 var(--font); white-space: nowrap; flex: none;
  color: var(--text); background: #fff;
  box-shadow: inset 0 0 0 1px var(--line-2), 0 2px 0 rgba(38, 50, 58, .07);
  transition: transform .06s, box-shadow .06s, background .15s, opacity .15s;
}
.btn .ico { width: 18px; height: 18px; }
.btn:hover:not(:disabled) { background: #F5F7F7; }
.btn:active:not(:disabled) { transform: translateY(1px); box-shadow: inset 0 0 0 1px var(--line-2); }
.btn:disabled { opacity: .45; cursor: default; }
.btn.primary { color: #fff; background: linear-gradient(var(--primary-2), var(--primary)); box-shadow: 0 2px 0 var(--primary-d), 0 4px 10px rgba(47, 143, 130, .26); }
.btn.primary:hover:not(:disabled) { background: linear-gradient(#3AAA9B, #31968A); }
.btn.primary:active:not(:disabled) { box-shadow: 0 0 0 var(--primary-d); }
.btn.accent { color: #5A3A06; background: linear-gradient(#F4B954, var(--accent)); box-shadow: 0 2px 0 var(--accent-d), 0 4px 10px rgba(233, 162, 59, .28); }
.btn.danger { color: #fff; background: var(--danger); box-shadow: 0 2px 0 #B2403C; }
.btn.ghost { background: transparent; box-shadow: none; }
.btn.ghost:hover:not(:disabled) { background: rgba(38, 50, 58, .06); }
.btn.sm { height: 32px; padding: 0 12px; font-size: 13px; border-radius: 8px; }
.btn.lg { height: 46px; padding: 0 24px; font-size: 16px; }
.btn.block { width: 100%; }
.key { display: inline-grid; place-items: center; min-width: 18px; height: 18px; padding: 0 4px; border-radius: 4px; background: rgba(38, 50, 58, .07); box-shadow: inset 0 -1px 0 rgba(38, 50, 58, .12); font: 500 11px/1 var(--font); color: var(--text-2); white-space: nowrap; }
.coin { display: inline-grid; place-items: center; width: 20px; height: 20px; flex: none; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #FFE29A, #E9A23B 70%); box-shadow: inset 0 -2px 0 rgba(160, 100, 10, .3), 0 0 0 1.5px #C9841F; font: 700 10px/1 var(--font); color: #8A5A0E; }
.coin.big { width: 26px; height: 26px; font-size: 12px; }
.tag { display: inline-flex; align-items: center; height: 18px; padding: 0 6px; border-radius: 4px; background: rgba(38, 50, 58, .07); color: var(--text-2); font: 600 11px/1 var(--font); white-space: nowrap; flex: none; }
.tag.me { background: var(--primary-soft); color: var(--primary); }
.ib { display: grid; place-items: center; width: 32px; height: 32px; border: 0; border-radius: 8px; background: transparent; color: var(--text-2); flex: none; }
.ib:hover { background: rgba(38, 50, 58, .06); color: var(--text); }

/* ---------- 登录 ---------- */
.login { position: fixed; inset: 0; display: grid; place-items: center; z-index: 30; background: radial-gradient(ellipse at center, rgba(255, 255, 255, .05), rgba(30, 50, 55, .28)); }
.login-card { width: 380px; padding: 28px 28px 22px; background: rgba(255, 255, 255, .92); animation: rise .5s ease-out both; }
.login-brand { display: flex; align-items: center; gap: 14px; margin-bottom: 22px; }
.brand-mark { width: 52px; height: 52px; flex: none; }
.brand-mark svg { width: 100%; height: 100%; display: block; }
.login-brand h1 { margin: 0; font: 700 24px/1.25 var(--font); letter-spacing: 1px; }
.login-brand p { margin: 2px 0 0; color: var(--text-2); font-size: 13px; }
.field { display: block; margin-bottom: 12px; }
.field span { display: block; margin-bottom: 6px; font: 600 13px/1.2 var(--font); color: var(--text-2); }
.field input { width: 100%; height: 44px; padding: 0 14px; border: 1px solid var(--line-2); border-radius: 10px; background: #fff; outline: none; font-size: 15px; transition: box-shadow .15s, border-color .15s; }
.field input:focus { border-color: var(--primary); box-shadow: 0 0 0 3px rgba(47, 143, 130, .16); }
.form-err { min-height: 20px; margin: -2px 0 8px; color: var(--danger); font-size: 13px; }
.form-note { margin: 12px 0 0; color: var(--text-3); font-size: 12px; line-height: 1.6; }
@keyframes rise { from { opacity: 0; transform: translateY(16px); } }

/* ---------- HUD ---------- */
.hud > * { position: fixed; z-index: 5; }
.mecard { left: 16px; top: 16px; display: flex; align-items: center; gap: 12px; max-width: 300px; padding: 8px 16px 8px 8px; text-align: left; border: 1px solid rgba(255, 255, 255, .7); }
.mecard:hover { background: rgba(255, 255, 255, .92); }
.avatar { position: relative; width: 48px; height: 48px; flex: none; border-radius: 50%; overflow: hidden; background: #DCEDEA; box-shadow: 0 0 0 2px #fff, 0 0 0 3.5px var(--primary); }
.avatar img { width: 100%; height: 100%; object-fit: cover; display: block; }
.me-text { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.me-name { display: flex; align-items: center; gap: 6px; min-width: 0; }
.me-name b { font: 600 16px/1.2 var(--font); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lv { flex: none; font: 600 11px/1 var(--font); color: var(--primary); background: var(--primary-soft); border-radius: 4px; padding: 3px 5px; white-space: nowrap; }
.me-sub { display: flex; align-items: center; gap: 8px; font-size: 12px; line-height: 1.2; color: var(--text-2); white-space: nowrap; }
.me-title { color: var(--accent-d); font-weight: 600; }
.me-title:empty { display: none; }
.bar { display: block; width: 72px; height: 4px; border-radius: 2px; background: rgba(38, 50, 58, .1); overflow: hidden; flex: none; }
.bar i { display: block; height: 100%; width: 0; background: var(--accent); transition: width .4s; }

.res { right: 16px; top: 16px; display: flex; gap: 8px; }
.chip { display: flex; align-items: center; gap: 8px; height: 40px; padding: 0 14px 0 11px; font: 600 15px/1 var(--font); white-space: nowrap; }
.chip .ico { width: 19px; height: 19px; color: var(--accent-d); }
#coinChip { position: relative; }
.coin-fly { position: absolute; right: 12px; top: 44px; font: 700 14px/1 var(--font); color: var(--accent-d); white-space: nowrap; animation: coinFly 1.4s ease-out forwards; pointer-events: none; }
.coin-fly.neg { color: var(--text-2); }
@keyframes coinFly { from { opacity: 0; transform: translateY(-6px); } 15% { opacity: 1; } to { opacity: 0; transform: translateY(14px); } }

.dock { right: 16px; top: 50%; transform: translateY(-50%); padding: 6px; display: flex; flex-direction: column; gap: 2px; }
.dbtn { position: relative; width: 58px; height: 60px; border: 0; border-radius: 10px; background: transparent; color: var(--text); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; transition: background .15s; }
.dbtn:hover { background: rgba(38, 50, 58, .06); }
.dbtn:active { transform: translateY(1px); }
.dbtn .di { display: grid; place-items: center; width: 22px; height: 22px; }
.dbtn .di .ico { width: 22px; height: 22px; }
.dbtn .dl { font: 500 12px/1 var(--font); white-space: nowrap; }
.dbtn .key { position: absolute; left: 4px; top: 4px; min-width: 14px; height: 14px; font-size: 9px; opacity: 0; transition: opacity .15s; }
.dock:hover .key { opacity: 1; }
.dbtn .badge { position: absolute; top: 6px; right: 9px; min-width: 16px; height: 16px; padding: 0 4px; border-radius: 8px; background: var(--danger); color: #fff; font: 600 10px/16px var(--font); text-align: center; box-shadow: 0 0 0 2px #fff; }

/* 顶部通知 */
.notices { left: 50%; top: 16px; transform: translateX(-50%); display: flex; flex-direction: column; align-items: center; gap: 6px; pointer-events: none; max-width: calc(100vw - 720px); min-width: 280px; }
.notice { display: flex; align-items: center; gap: 8px; max-width: 100%; min-height: 36px; padding: 8px 16px 8px 12px; font-size: 13px; line-height: 1.4; color: var(--text); animation: drop .35s ease-out both; transition: opacity .35s, transform .35s; }
.notice .dot { width: 6px; height: 6px; flex: none; border-radius: 50%; background: var(--primary); }
.notice .txt { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.notice.gold .dot { background: var(--accent); }
.notice.out { opacity: 0; transform: translateY(-6px); }
@keyframes drop { from { opacity: 0; transform: translateY(-10px); } }

/* 地点卡片 */
.spot { right: 96px; top: 70px; width: 296px; overflow: hidden; animation: slideIn .3s ease-out both; }
@keyframes slideIn { from { opacity: 0; transform: translateX(14px); } }
.spot .cover { position: relative; height: 88px; padding: 14px 16px; color: #fff; overflow: hidden; }
.spot .cover::after { content: ""; position: absolute; inset: 0; background-image: linear-gradient(rgba(255, 255, 255, .08) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, .08) 1px, transparent 1px); background-size: 22px 22px; pointer-events: none; }
.spot .cat { position: relative; z-index: 1; font-size: 12px; line-height: 1.3; opacity: .8; white-space: nowrap; }
.spot .cover h3 { position: absolute; z-index: 1; left: 16px; bottom: 12px; margin: 0; font: 700 21px/1.25 var(--font); letter-spacing: .5px; white-space: nowrap; }
.spot .emblem { position: absolute; z-index: 1; right: 44px; top: 17px; width: 54px; height: 54px; border-radius: 50%; display: grid; place-items: center; background: radial-gradient(circle at 40% 35%, #FBF0DC, #E8D3AE); box-shadow: 0 4px 10px rgba(0, 0, 0, .22), inset 0 -3px 0 rgba(120, 80, 40, .2); font: 700 25px/1 var(--serif); color: var(--red); }
.spot .emblem::before { content: ""; position: absolute; inset: 6px; border-radius: 50%; border: 1.5px solid rgba(184, 56, 42, .55); }
.spot .emblem.svg::before { display: none; }
.spot .emblem .ico { width: 26px; height: 26px; color: var(--primary-d); }
.spot .emblem.ddz { font: 400 30px/1 var(--font); color: #2A2420; }
.spot .emblem.uno { font: 900 14px/1 var(--font); color: #E5484D; letter-spacing: -.5px; }
.spot .emblem .gm-emb { width: 24px; height: 24px; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #6A6A70, #18181B 70%); box-shadow: 9px 6px 0 -3px #fff, 9px 6px 0 -2px #9AA0A4; }
.spot .emblem.gomoku::before, .spot .emblem.uno::before, .spot .emblem.ddz::before { border-color: rgba(60, 50, 40, .3); }
.spot .x { position: absolute; z-index: 2; right: 6px; top: 6px; color: rgba(255, 255, 255, .8); }
.spot .x:hover { color: #fff; background: rgba(255, 255, 255, .14); }
.spot .body { padding: 14px 16px 16px; }
.spot .meta { display: flex; flex-wrap: wrap; gap: 6px 14px; font-size: 12px; line-height: 1.4; color: var(--text-2); }
.spot .meta span { display: inline-flex; align-items: center; gap: 4px; white-space: nowrap; }
.spot .meta .ico { width: 15px; height: 15px; }
.spot .meta b { color: var(--accent-d); font-weight: 600; }
.spot p { margin: 0; font-size: 13px; line-height: 1.6; color: var(--text-2); }
.spot hr { border: 0; border-top: 1px solid var(--line); margin: 12px 0; }
.spot .row { display: flex; justify-content: space-between; align-items: baseline; font-size: 13px; color: var(--text-2); }
.spot .row b { color: var(--text); font-weight: 600; }
.seats { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin: 10px 0 14px; }
.seat { display: flex; align-items: center; gap: 8px; height: 50px; padding: 0 10px; border-radius: 10px; background: rgba(38, 50, 58, .045); min-width: 0; }
.seat img, .seat .ph { width: 32px; height: 32px; flex: none; border-radius: 50%; background: #DCEDEA; object-fit: cover; }
.seat .ph { display: grid; place-items: center; color: var(--text-3); font-size: 18px; background: rgba(38, 50, 58, .06); }
.seat .who { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.seat .who b { font: 600 13px/1.2 var(--font); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.seat .who small { font-size: 11px; line-height: 1.2; color: var(--text-3); white-space: nowrap; }
.seat.empty { background: transparent; box-shadow: inset 0 0 0 1.5px rgba(38, 50, 58, .14); }
.seat.me { box-shadow: inset 0 0 0 1.5px rgba(47, 143, 130, .45); background: var(--primary-soft); }
.acts { display: flex; gap: 8px; }
.acts .btn { flex: 1 1 0; min-width: 0; }
.acts .btn.fit { flex: none; }
.spot .note { margin-top: 10px; font-size: 12px; color: var(--text-3); text-align: center; line-height: 1.5; }

/* 小地图 */
.map { left: 16px; bottom: 16px; width: 212px; padding: 6px; }
.map canvas { display: block; width: 200px; height: 200px; border-radius: 10px; cursor: crosshair; }
.map .cap { display: flex; justify-content: space-between; align-items: center; gap: 8px; padding: 7px 6px 2px; font-size: 12px; line-height: 1.2; color: var(--text-2); white-space: nowrap; }
.map .cap b { color: var(--text); font-weight: 600; font-size: 13px; }
.map { transition: width .2s; }
.map-btn { position: absolute; right: 8px; top: 8px; z-index: 2; display: grid; place-items: center; width: 30px; height: 30px; border: 0; border-radius: 8px; background: rgba(255, 255, 255, .85); color: var(--text); cursor: pointer; }
.map-btn .di, .map-btn .ico { width: 18px; height: 18px; }
.map.collapsed { width: auto; padding: 6px; }
.map.collapsed canvas, .map.collapsed .cap { display: none; }
.map.collapsed .map-btn { position: static; width: 44px; height: 44px; background: transparent; }
.map.collapsed .map-btn .di, .map.collapsed .map-btn .ico { width: 22px; height: 22px; }
.dbtn.on { background: rgba(38, 50, 58, .1); }

/* 聊天 */
.chat { left: 240px; bottom: 16px; width: 360px; }
.chat .log { display: flex; flex-direction: column; gap: 3px; max-height: 168px; overflow: hidden; padding: 8px 12px; margin-bottom: 8px; border-radius: 12px; background: linear-gradient(90deg, rgba(20, 30, 36, .38), rgba(20, 30, 36, 0)); -webkit-mask-image: linear-gradient(transparent, #000 22%); mask-image: linear-gradient(transparent, #000 22%); }
.chat .log:empty { display: none; }
.chat .msg { font-size: 13px; line-height: 1.5; color: #fff; text-shadow: 0 1px 2px rgba(0, 0, 0, .4); word-break: break-word; animation: msgIn .25s ease-out both; }
.chat .msg b { font-weight: 600; margin-right: 6px; }
@keyframes msgIn { from { opacity: 0; transform: translateY(4px); } }
.chat-input { position: relative; display: flex; align-items: center; gap: 4px; height: 42px; padding: 0 5px 0 14px; }
.chat-input input { flex: 1; min-width: 0; height: 100%; border: 0; outline: none; background: transparent; font-size: 14px; }
.chat-input input::placeholder { color: var(--text-3); }
.pop { position: absolute; right: 0; bottom: 50px; width: 236px; padding: 10px; animation: drop .2s ease-out both; }
.pop h4 { margin: 0 0 8px; font: 600 12px/1.2 var(--font); color: var(--text-3); }
.pop .grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; }
.pop .emo { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 8px 0 6px; border: 0; border-radius: 8px; background: rgba(38, 50, 58, .04); font-size: 12px; line-height: 1; color: var(--text-2); }
.pop .emo:hover { background: var(--primary-soft); color: var(--primary); }
.pop .emo .ico { width: 20px; height: 20px; }
.pop .emo .k { font-size: 10px; color: var(--text-3); }
.pop .quick { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.pop .quick button { height: 28px; padding: 0 10px; border: 0; border-radius: 14px; background: rgba(38, 50, 58, .05); font-size: 12px; color: var(--text); white-space: nowrap; }
.pop .quick button:hover { background: var(--primary-soft); color: var(--primary); }

/* 底部胶囊按钮（站起来、回到对局） */
.pills { left: 50%; bottom: 20px; transform: translateX(-50%); display: flex; gap: 8px; }
.pills .btn { box-shadow: var(--shadow); }

/* 操作提示 */
.hint { left: 50%; bottom: 76px; transform: translateX(-50%); display: flex; align-items: center; gap: 18px; padding: 10px 10px 10px 18px; font-size: 13px; color: var(--text-2); white-space: nowrap; animation: drop .4s ease-out both; }
.hint span { display: inline-flex; align-items: center; gap: 6px; }
.hint b { color: var(--text); font-weight: 600; }

/* ---------- 世界里的名字和气泡 ---------- */
.grade { position: absolute; inset: 0; pointer-events: none; z-index: 1; background: radial-gradient(120% 90% at 50% 45%, rgba(255, 236, 205, 0) 55%, rgba(80, 60, 40, .16) 100%), linear-gradient(rgba(255, 240, 215, .05), rgba(255, 225, 190, .06)); mix-blend-mode: multiply; }
.labels { position: absolute; inset: 0; pointer-events: none; overflow: hidden; z-index: 1; }
.name3d { position: absolute; left: 0; top: 0; white-space: nowrap; font: 600 13px/1.2 var(--font); color: #fff; text-shadow: 0 1px 2px rgba(0, 0, 0, .55), 0 0 6px rgba(0, 0, 0, .25); transform-origin: 50% 100%; will-change: transform; }
.name3d.mine { color: #FFF3D2; }
.name3d.off { opacity: .55; }
/* 项目标签：白底胶囊，名字 + 能玩什么；可点击 */
.spot-tag { position: absolute; left: 0; top: 0; display: flex; align-items: center; gap: 7px; padding: 6px 12px 6px 10px; border-radius: 999px; background: rgba(255, 253, 248, .96); box-shadow: 0 3px 12px rgba(40, 35, 25, .18); border: 1px solid rgba(43, 42, 39, .08); white-space: nowrap; pointer-events: auto; cursor: pointer; transform-origin: 50% 100%; will-change: transform; }
.spot-tag::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: #2F8F82; flex: none; }
.spot-tag::after { content: ""; position: absolute; left: 50%; bottom: -6px; width: 10px; height: 10px; background: inherit; border-right: 1px solid rgba(43, 42, 39, .08); border-bottom: 1px solid rgba(43, 42, 39, .08); transform: translateX(-50%) rotate(45deg); }
.spot-tag b { font: 700 14px/1.2 var(--font); color: #2B2A27; }
.spot-tag .sub { font: 500 12px/1.2 var(--font); color: #6F6A60; }
.spot-tag .note { display: none; font: 600 12px/1.2 var(--font); color: #fff; background: #E9A23B; padding: 2px 8px; border-radius: 999px; }
.spot-tag.has-note .note { display: inline-block; }
.spot-tag.soon::before { background: #C9BFAE; }
.spot-tag.soon .sub { color: #A39A8B; }
.spot-tag.sight { padding: 4px 10px; background: rgba(255, 253, 248, .82); box-shadow: 0 2px 8px rgba(40, 35, 25, .12); cursor: default; pointer-events: none; }
.spot-tag.sight::before { background: #B8A98F; width: 6px; height: 6px; }
.spot-tag.sight b { font-size: 12px; font-weight: 600; color: #5A564E; }

.say { position: absolute; left: 0; top: 0; max-width: 220px; width: max-content; padding: 8px 12px; background: #fff; color: var(--text); border-radius: 12px; font-size: 14px; line-height: 1.45; word-break: break-word; box-shadow: 0 4px 14px rgba(30, 45, 55, .18); transform-origin: 50% 100%; will-change: transform; }
.say::after { content: ""; position: absolute; left: 50%; bottom: -5px; width: 11px; height: 11px; background: #fff; transform: translateX(-50%) rotate(45deg); border-radius: 2px; }

/* ---------- 弹窗 ---------- */
.modal { position: fixed; inset: 0; z-index: 20; display: none; place-items: center; background: rgba(18, 26, 30, .42); backdrop-filter: blur(2px); padding: 24px; }
.modal.show { display: grid; animation: fade .2s ease-out both; }
@keyframes fade { from { opacity: 0; } }
.modal-card { position: relative; max-width: 100%; max-height: 100%; display: flex; flex-direction: column; background: var(--solid); border: 0; box-shadow: var(--shadow-lg); animation: rise .3s ease-out both; overflow: hidden; }
.m-head { display: flex; align-items: center; gap: 12px; padding: 18px 20px 14px; border-bottom: 1px solid var(--line); flex: none; }
.m-head h2 { margin: 0; font: 700 19px/1.3 var(--font); white-space: nowrap; }
.m-head .sub { color: var(--text-2); font-size: 13px; white-space: nowrap; }
.m-head .sp { flex: 1; }
.m-body { padding: 16px 20px 20px; overflow: auto; min-height: 0; }
.tabs { display: flex; gap: 4px; padding: 3px; border-radius: 10px; background: rgba(38, 50, 58, .06); flex-wrap: wrap; }
.tabs button { height: 30px; padding: 0 12px; border: 0; border-radius: 8px; background: transparent; color: var(--text-2); font: 500 13px/1 var(--font); white-space: nowrap; }
.tabs button.on { background: #fff; color: var(--text); box-shadow: 0 1px 3px rgba(0, 0, 0, .1); font-weight: 600; }

/* 护照 */
.passport { width: 860px; height: min(680px, calc(100vh - 48px)); }
.pp-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(176px, 1fr)); gap: 12px; }
.pp-item { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 14px 10px 14px; border-radius: 12px; background: #F3EEE2; box-shadow: inset 0 0 0 1px rgba(120, 90, 50, .1); text-align: center; }
.pp-item.got { background: #F7F1E4; }
.pp-item .nm { font: 600 14px/1.3 var(--font); }
.pp-item .ds { font-size: 12px; line-height: 1.5; color: var(--text-2); min-height: 36px; }
.pp-item .tr { display: flex; align-items: center; gap: 6px; font-size: 11px; line-height: 1; color: var(--text-3); white-space: nowrap; }
.tier { display: inline-flex; align-items: center; height: 18px; padding: 0 6px; border-radius: 4px; font: 600 11px/1 var(--font); white-space: nowrap; }
.tier.bronze { color: #9A5A2F; background: rgba(180, 105, 58, .12); }
.tier.silver { color: #4F6273; background: rgba(95, 116, 134, .13); }
.tier.gold { color: #A3740F; background: rgba(192, 138, 30, .15); }
.stamp-svg { display: block; }
.stamp-svg.empty { opacity: .8; }
.pp-progress { display: flex; align-items: center; gap: 10px; font-size: 13px; color: var(--text-2); white-space: nowrap; }
.pp-progress .bar { width: 120px; height: 6px; border-radius: 3px; }

/* 换装 / 商店 */
.wardrobe { width: 940px; height: min(660px, calc(100vh - 48px)); }
.wd { display: grid; grid-template-columns: 300px 1fr; grid-template-rows: minmax(0, 1fr); min-height: 0; flex: 1; }
.wd-left { display: flex; flex-direction: column; min-height: 0; overflow: hidden; border-right: 1px solid var(--line); background: linear-gradient(#EAF4F1, #F7F3EA); }
.wd-left canvas { flex: 1 1 0; width: 100%; height: 0; min-height: 0; cursor: grab; }
.wd-left canvas:active { cursor: grabbing; }
.wd-tools { display: flex; justify-content: center; gap: 6px; padding: 0 16px 10px; }
.wd-foot { padding: 14px 16px 16px; border-top: 1px solid var(--line); background: rgba(255, 255, 255, .6); }
.wd-cost { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 10px; font-size: 13px; color: var(--text-2); white-space: nowrap; }
.wd-cost b { display: inline-flex; align-items: center; gap: 6px; color: var(--text); font-size: 15px; }
.wd-right { display: flex; flex-direction: column; min-width: 0; min-height: 0; }
.wd-right .tabs { margin: 14px 20px 0; }
.wd-items { flex: 1; overflow: auto; padding: 14px 20px 20px; display: grid; grid-template-columns: repeat(auto-fill, minmax(118px, 1fr)); gap: 10px; align-content: start; }
.item { position: relative; display: flex; flex-direction: column; align-items: stretch; padding: 0; border: 0; border-radius: 12px; background: #fff; box-shadow: inset 0 0 0 1px var(--line); overflow: hidden; text-align: left; transition: box-shadow .15s, transform .15s; }
.item:hover { transform: translateY(-1px); box-shadow: inset 0 0 0 1px var(--line-2), 0 4px 12px rgba(30, 45, 55, .08); }
.item.on { box-shadow: inset 0 0 0 2px var(--primary); }
.item .th { display: flex; align-items: center; justify-content: center; height: 108px; overflow: hidden; background: linear-gradient(#EEF6F3, #F8F4EA); }
.item .th img { height: 108px; width: 108px; object-fit: contain; display: block; flex: none; }
.item .th .sw { width: 44px; height: 44px; border-radius: 50%; box-shadow: inset 0 -3px 0 rgba(0, 0, 0, .12), 0 0 0 3px #fff, 0 2px 6px rgba(0, 0, 0, .12); }
.item .tx { display: flex; flex-direction: column; gap: 3px; padding: 8px 10px 9px; min-width: 0; }
.item .tx b { font: 600 13px/1.3 var(--font); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.item .pr { display: flex; align-items: center; gap: 5px; font-size: 12px; line-height: 1.2; color: var(--text-2); white-space: nowrap; }
.item .pr .coin { width: 16px; height: 16px; font-size: 9px; }
.item .pr.own { color: var(--primary); }
.item .pr .kind { margin-left: auto; font-size: 11px; color: var(--text-3); }
.item .pr.lock { color: var(--text-3); overflow: hidden; text-overflow: ellipsis; }
.item .ck { position: absolute; top: 8px; right: 8px; width: 20px; height: 20px; border-radius: 50%; background: var(--primary); color: #fff; display: grid; place-items: center; }
.item .ck .ico { width: 13px; height: 13px; stroke-width: 2.6; }
.item.badgeitem .th { height: 96px; }

/* 个人主页 */
.profile { width: 760px; height: min(560px, calc(100vh - 48px)); }
.pf { display: grid; grid-template-columns: 260px 1fr; grid-template-rows: minmax(0, 1fr); flex: 1; min-height: 0; }
.pf-left { position: relative; display: flex; flex-direction: column; min-height: 0; overflow: hidden; background: linear-gradient(#EAF4F1, #F7F3EA); border-right: 1px solid var(--line); }
.pf-left canvas { flex: 1 1 0; width: 100%; height: 0; min-height: 0; }
.pf-right { padding: 22px 24px; overflow: auto; }
.pf-rec { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.pf-rec > div { display: flex; justify-content: space-between; align-items: center; gap: 8px; height: 36px; padding: 0 12px; border-radius: 8px; background: rgba(38, 50, 58, .04); font-size: 13px; white-space: nowrap; }
.pf-rec b { font-weight: 600; }
.pf-rec span { color: var(--text-2); }
.pf-name { display: flex; align-items: center; gap: 8px; margin-bottom: 4px; min-width: 0; }
.pf-name h2 { margin: 0; font: 700 24px/1.3 var(--font); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pf-title { display: flex; align-items: center; gap: 8px; color: var(--text-2); font-size: 13px; margin-bottom: 18px; }
.pf-title select { height: 30px; padding: 0 8px; border: 1px solid var(--line-2); border-radius: 8px; background: #fff; font: 500 13px var(--font); color: var(--text); }
.stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin-bottom: 20px; }
.stat { padding: 10px 12px; border-radius: 10px; background: rgba(38, 50, 58, .04); }
.stat b { display: block; font: 700 20px/1.2 var(--font); }
.stat span { font-size: 12px; color: var(--text-2); white-space: nowrap; }
.sec-t { display: flex; align-items: center; justify-content: space-between; margin: 0 0 10px; font: 600 14px/1.3 var(--font); }
.sec-t small { font-weight: 400; color: var(--text-3); font-size: 12px; }
.showcase { display: grid; grid-template-columns: repeat(6, 1fr); gap: 8px; margin-bottom: 20px; }
.show-slot { aspect-ratio: 1; border-radius: 12px; display: grid; place-items: center; background: rgba(38, 50, 58, .04); box-shadow: inset 0 0 0 1.5px rgba(38, 50, 58, .08); border: 0; padding: 0; color: var(--text-3); font-size: 20px; }
.show-slot.can:hover { box-shadow: inset 0 0 0 1.5px var(--primary); color: var(--primary); }
.show-slot svg { width: 78%; height: 78%; }
.pf-acts { display: flex; gap: 8px; flex-wrap: wrap; }
.picker { margin-top: 10px; padding: 10px; border-radius: 12px; background: #fff; box-shadow: inset 0 0 0 1px var(--line); display: flex; flex-wrap: wrap; gap: 8px; }
.picker button { border: 0; background: transparent; padding: 2px; border-radius: 50%; }
.picker button:hover { background: var(--primary-soft); }
.picker .none { font-size: 12px; color: var(--text-3); padding: 6px; }

/* 好友列表 */
.friends { width: 460px; max-height: min(620px, calc(100vh - 48px)); }
.fl { display: flex; flex-direction: column; gap: 6px; }
.fr { display: flex; align-items: center; gap: 12px; padding: 8px 10px; border-radius: 12px; }
.fr:hover { background: rgba(38, 50, 58, .04); }
.fr img { width: 44px; height: 44px; flex: none; border-radius: 50%; background: #DCEDEA; }
.fr .who { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.fr .who b { display: flex; align-items: center; gap: 6px; font: 600 14px/1.25 var(--font); min-width: 0; }
.fr .who b .n { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fr .who small { font-size: 12px; line-height: 1.3; color: var(--text-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fr .acts2 { display: flex; gap: 6px; flex: none; }
.invite-box { margin-top: 14px; padding: 16px; border-radius: 14px; background: linear-gradient(135deg, rgba(47, 143, 130, .08), rgba(233, 162, 59, .08)); box-shadow: inset 0 0 0 1px var(--line); }
.invite-box .ib-t b { display: block; font-size: 15px; }
.invite-box .ib-t small { display: block; margin-top: 2px; color: var(--text-2); font-size: 12px; line-height: 1.5; }
.invite-box .ib-acts { display: flex; gap: 8px; margin-top: 12px; }
.invite-box .ib-acts .btn { text-decoration: none; }
.invite-box .ib-acts .btn .ico { transform: rotate(-90deg); }
.invite-box .ib-addr { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.invite-box code { padding: 3px 8px; border-radius: 6px; background: rgba(255, 255, 255, .8); font: 500 12px/1.4 ui-monospace, Menlo, monospace; color: var(--text-2); }
.empty-note { padding: 28px 10px; text-align: center; color: var(--text-3); font-size: 13px; line-height: 1.7; }

/* 照片 */
.photo { width: 720px; }
.photo img { display: block; width: 100%; border-radius: 6px; box-shadow: 0 6px 18px rgba(0, 0, 0, .18); }
.photo .row3 { display: flex; justify-content: flex-end; gap: 8px; margin-top: 14px; }

/* 确认框 */
.confirmbox { width: 360px; padding: 22px; }
.confirmbox h3 { margin: 0 0 6px; font: 700 17px/1.3 var(--font); }
.confirmbox p { margin: 0 0 18px; color: var(--text-2); font-size: 14px; line-height: 1.6; }
.confirmbox .acts { justify-content: flex-end; }
.confirmbox .acts .btn { flex: none; }

/* ---------- 获得印章 ---------- */
.reward { position: fixed; inset: 0; z-index: 40; display: grid; place-items: center; background: rgba(18, 26, 30, .6); backdrop-filter: blur(3px); }
.rcard { position: relative; width: 360px; padding: 28px 28px 24px; text-align: center; background: var(--solid); border-radius: 18px; box-shadow: var(--shadow-lg); animation: pop .4s cubic-bezier(.2, 1.2, .4, 1) both; }
@keyframes pop { from { opacity: 0; transform: translateY(24px) scale(.96); } }
.rcard .kicker { font: 600 12px/1 var(--font); letter-spacing: 3px; color: var(--accent-d); }
.rcard .paper { position: relative; width: 196px; height: 196px; margin: 16px auto 18px; border-radius: 12px; background: #F3EEE2; box-shadow: inset 0 0 0 1px rgba(120, 90, 50, .12); display: grid; place-items: center; isolation: isolate; }
.rcard .paper::before { content: ""; position: absolute; inset: -40px; border-radius: 50%; background: radial-gradient(rgba(233, 162, 59, .26), transparent 65%); z-index: -1; animation: glow 2.4s ease-in-out infinite; }
@keyframes glow { 50% { transform: scale(1.08); opacity: .7; } }
.rcard .paper .stamp-svg { animation: slam .5s .2s cubic-bezier(.2, 1.3, .4, 1) both; transform: rotate(-8deg); }
@keyframes slam { 0% { transform: rotate(-24deg) scale(2.2); opacity: 0; } 60% { transform: rotate(-6deg) scale(.94); opacity: 1; } 100% { transform: rotate(-8deg) scale(1); } }
.rcard h2 { margin: 0; font: 700 24px/1.3 var(--font); }
.rcard .desc { margin-top: 4px; font-size: 13px; line-height: 1.5; color: var(--text-2); }
.gifts { display: flex; justify-content: center; flex-wrap: wrap; gap: 8px; margin: 18px 0 22px; }
.gift { display: inline-flex; align-items: center; gap: 6px; height: 34px; padding: 0 12px 0 8px; border-radius: 8px; background: rgba(38, 50, 58, .05); font: 600 13px/1 var(--font); white-space: nowrap; animation: fadeUp .35s both; }
.gift small { font-weight: 400; color: var(--text-3); font-size: 12px; }
.gift:nth-child(1) { animation-delay: .65s; } .gift:nth-child(2) { animation-delay: .75s; } .gift:nth-child(3) { animation-delay: .85s; }
@keyframes fadeUp { from { opacity: 0; transform: translateY(6px); } }
.rcard .btn { width: 100%; height: 44px; font-size: 16px; }

/* ---------- 对局 ---------- */
.game { position: fixed; inset: 0; z-index: 15; display: grid; place-items: center; padding: 20px; background: rgba(18, 26, 30, .45); animation: fade .2s ease-out both; }
.game-card { width: min(1080px, 100%); height: min(760px, 100%); display: flex; flex-direction: column; background: var(--solid); border: 0; box-shadow: var(--shadow-lg); overflow: hidden; }
.game-head { display: flex; align-items: center; gap: 12px; height: 56px; padding: 0 12px 0 20px; border-bottom: 1px solid var(--line); flex: none; }
.game-head .gt { flex: 1; display: flex; align-items: baseline; gap: 10px; min-width: 0; }
.game-head .gt b { font: 700 17px/1.3 var(--font); white-space: nowrap; }
.game-head .gt span { color: var(--text-2); font-size: 13px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.game-head .gb { display: flex; gap: 6px; }
.game-body { flex: 1; min-height: 0; }

.xq { display: grid; grid-template-columns: 1fr 300px; height: 100%; }
.xq-board { position: relative; display: grid; place-items: center; padding: 18px; min-height: 0; min-width: 0; background: radial-gradient(ellipse at 50% 45%, #FFFDF7, #EFE8DA); }
.xq-svg { display: block; height: 100%; max-height: 100%; max-width: 100%; aspect-ratio: 572 / 632; filter: drop-shadow(0 10px 22px rgba(80, 50, 20, .22)); }
.xq-svg.can-move { cursor: pointer; }
.pc { transition: transform .24s cubic-bezier(.3, .7, .3, 1); }
.pc .lift { transition: transform .15s; }
.pc.sel .lift { transform: translateY(-5px) scale(1.06); }
.pc.sel .face { fill: url(#pcSel); }
.pc.moving .lift { animation: hop .26s ease-out; }
@keyframes hop { 40% { transform: translateY(-8px) scale(1.08); } }
.pc.gone { opacity: 0; transition: opacity .25s; }
.xq-dots .dot { cursor: pointer; animation: dotIn .2s ease-out both; }
@keyframes dotIn { from { opacity: 0; } }
.checkring { animation: pulseR 1s ease-in-out infinite; }
@keyframes pulseR { 50% { opacity: .35; } }
.xq-float { position: absolute; inset: 0; pointer-events: none; overflow: hidden; display: grid; place-items: center; }
.xq-boom { grid-area: 1 / 1; padding: 10px 26px; border-radius: 14px; background: rgba(255, 253, 247, .95); box-shadow: 0 8px 24px rgba(60, 30, 10, .25); font: 700 40px/1.2 var(--serif); color: var(--red); letter-spacing: 6px; animation: boom 1.2s ease-out forwards; }
.xq-boom.cap { font-size: 30px; color: #6E4520; }
.xq-boom.soft { font: 600 18px/1.3 var(--font); color: var(--text); letter-spacing: 0; }
@keyframes boom { 0% { opacity: 0; transform: scale(.6); } 18% { opacity: 1; transform: scale(1.06); } 70% { opacity: 1; transform: scale(1); } 100% { opacity: 0; transform: translateY(-16px); } }
.xq-react { position: absolute; bottom: 12%; display: flex; flex-direction: column; align-items: center; gap: 2px; animation: floatUp 2.6s ease-out forwards; }
.xq-react .e { font-size: 34px; line-height: 1; }
.xq-react .n { font-size: 11px; line-height: 1.2; color: var(--text-2); background: rgba(255, 255, 255, .85); border-radius: 6px; padding: 1px 6px; white-space: nowrap; }
@keyframes floatUp { 0% { opacity: 0; transform: translateY(20px); } 15% { opacity: 1; } 100% { opacity: 0; transform: translateY(-240px); } }
.xq-result { position: absolute; inset: 0; display: grid; place-items: center; background: rgba(250, 247, 240, .55); animation: fade .3s both; }
.xq-res-card { width: 340px; padding: 24px; text-align: center; background: #fff; border-radius: 16px; box-shadow: var(--shadow-lg); animation: pop .4s both; }
.xq-res-card .kicker { font-size: 13px; color: var(--text-3); }
.xq-res-card h2 { margin: 4px 0 12px; font: 700 30px/1.3 var(--font); }
.xq-res-card.win h2 { color: var(--primary); }
.xq-res-card.lose h2 { color: var(--text-2); }
.earn { display: inline-flex; align-items: center; gap: 8px; height: 40px; padding: 0 16px; border-radius: 10px; background: #FBF3E2; font-size: 14px; color: var(--text-2); white-space: nowrap; }
.earn b { font: 700 20px/1 var(--font); color: var(--accent-d); }
.res-stamps { display: flex; justify-content: center; gap: 10px; margin-top: 14px; }
.res-stamps .rs { display: flex; flex-direction: column; align-items: center; gap: 4px; font-size: 12px; color: var(--text-2); white-space: nowrap; }
.res-btns { display: flex; justify-content: center; gap: 8px; margin-top: 20px; }

.xq-side { display: flex; flex-direction: column; gap: 12px; padding: 16px; border-left: 1px solid var(--line); background: #FBFAF6; min-height: 0; }
.xq-pcard { position: relative; display: flex; align-items: center; gap: 10px; padding: 10px; border-radius: 12px; background: #fff; box-shadow: inset 0 0 0 1px var(--line); transition: box-shadow .2s, background .2s; }
.xq-pcard.turn { box-shadow: inset 0 0 0 2px var(--primary); background: #F4FAF8; }
.xq-ava { width: 46px; height: 46px; flex: none; border-radius: 50%; background: #DCEDEA; }
.xq-pinfo { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.xq-pname { display: flex; align-items: center; gap: 6px; min-width: 0; }
.xq-pname .nm { font: 600 15px/1.25 var(--font); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.xq-psub { display: flex; align-items: center; gap: 8px; font-size: 12px; line-height: 1.2; color: var(--text-2); white-space: nowrap; }
.xq-psub .side { display: inline-flex; align-items: center; gap: 4px; font-weight: 600; }
.xq-psub .side::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: currentColor; }
.xq-psub .side.red { color: var(--red); }
.xq-psub .side.black { color: #3A3330; }
.xq-psub .ttl { color: var(--accent-d); overflow: hidden; text-overflow: ellipsis; }
.xq-turn { flex: none; height: 22px; padding: 0 8px; border-radius: 11px; background: var(--primary); color: #fff; font: 600 11px/22px var(--font); white-space: nowrap; }
.xq-capt { display: flex; flex-wrap: wrap; gap: 3px; min-height: 24px; margin-top: 6px; padding: 0 2px; }
.xq-capt i { display: grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; font: 700 12px/1 var(--serif); font-style: normal; background: #F3DFBA; box-shadow: inset 0 0 0 1px rgba(110, 69, 32, .35); }
.xq-capt i.red { color: var(--red); }
.xq-capt i.black { color: #2E2620; }
.xq-capt .none { font-size: 12px; line-height: 22px; color: var(--text-3); }
.xq-mid { flex: 1; min-height: 0; display: flex; flex-direction: column; gap: 10px; }
.xq-status { display: flex; flex-direction: column; gap: 8px; }
.xq-status .st { display: flex; align-items: center; justify-content: center; gap: 6px; min-height: 40px; padding: 8px 12px; border-radius: 10px; background: rgba(38, 50, 58, .045); font-size: 14px; line-height: 1.4; color: var(--text-2); text-align: center; }
.xq-status .st.mine { background: var(--primary-soft); color: var(--primary-d); font-weight: 600; }
.xq-status .st.req { background: #FBF3E2; color: #8A5A0E; font-weight: 600; }
.xq-status .st b { color: var(--danger); }
.xq-status .row2 { display: flex; gap: 8px; }
.xq-status .row2 .btn { flex: 1; }
.xq-status > .btn { align-self: center; }
.xq-moves { flex: 1; min-height: 0; overflow: auto; border-radius: 10px; background: #fff; box-shadow: inset 0 0 0 1px var(--line); }
.xq-moves-head, .xq-moves li { display: grid; grid-template-columns: 44px 1fr 1fr; align-items: center; padding: 0 12px; }
.xq-moves-head { position: sticky; top: 0; height: 32px; background: #fff; border-bottom: 1px solid var(--line); font-size: 12px; color: var(--text-3); }
.xq-moves ol { list-style: none; margin: 0; padding: 4px 0; }
.xq-moves li { height: 28px; font: 500 13px/1 var(--serif); white-space: nowrap; }
.xq-moves li .n { font: 400 12px/1 var(--font); color: var(--text-3); }
.xq-moves li.empty { display: block; height: auto; padding: 18px 12px; font: 400 12px/1.5 var(--font); color: var(--text-3); text-align: center; }
.xq-moves li:nth-child(even) { background: rgba(38, 50, 58, .025); }
.xq-actions { display: flex; flex-direction: column; gap: 10px; }
.xq-btns { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.xq-btns .btn { padding: 0 8px; }
.xq-reacts { display: grid; grid-template-columns: repeat(6, 1fr); gap: 4px; }
.xq-reacts button { height: 34px; border: 0; border-radius: 8px; background: rgba(38, 50, 58, .045); font-size: 18px; line-height: 1; }
.xq-reacts button:hover { background: rgba(38, 50, 58, .09); }
.xq-reacts button:active { transform: scale(.94); }
.confirm { display: flex; align-items: center; gap: 8px; padding: 8px 10px; border-radius: 10px; background: #FBEDEC; font-size: 13px; color: #8E2F2B; white-space: nowrap; }
.confirm span { flex: 1; }


/* ---------- 五子棋 ---------- */
.gm-svg { aspect-ratio: 1; }
.gm-st.new { animation: stoneIn .22s ease-out both; }
@keyframes stoneIn { from { transform: scale(1.25); opacity: .4; } }
.gm-st { transform-box: fill-box; transform-origin: center; }
.gm-win { animation: pulseR 1s ease-in-out infinite; }
.gm-tips { display: flex; flex-direction: column; gap: 4px; padding: 12px 14px; border-radius: 10px; background: #fff; box-shadow: inset 0 0 0 1px var(--line); font-size: 13px; line-height: 1.6; color: var(--text-2); }
.gm-tips b { color: var(--text); font-weight: 600; }
.xq-psub .side.white { color: #7E858A; }
.xq-psub .side.white::before { background: #fff; box-shadow: inset 0 0 0 1px #9AA0A4; }

/* ---------- 牌桌（斗地主 / UNO） ---------- */
.ct { height: 100%; }
.ct-felt { position: relative; height: 100%; overflow: hidden; background: radial-gradient(ellipse 70% 60% at 50% 42%, #3E8F7E, #2C7062 62%, #235A4F); }
.ct-felt::before { content: ""; position: absolute; inset: 14px; border-radius: 26px; box-shadow: inset 0 0 0 2px rgba(255, 255, 255, .07); pointer-events: none; }
.ct-seat { position: absolute; top: 22px; display: flex; flex-direction: column; gap: 12px; max-width: 46%; }
.ct-seat.left { left: 22px; align-items: flex-start; }
.ct-seat.right { right: 22px; align-items: flex-end; }
.ct-seat.top { left: 50%; transform: translateX(-50%); align-items: center; }
.ct-seat:empty { display: none; }
.ct-who { display: grid; grid-template-columns: 50px auto; align-items: center; gap: 3px 10px; padding: 8px 14px 8px 8px; border-radius: 14px; background: rgba(255, 255, 255, .94); box-shadow: 0 6px 16px rgba(10, 30, 25, .25); transition: box-shadow .2s; }
.ct-who img { grid-row: span 2; width: 50px; height: 50px; border-radius: 50%; background: #DCEDEA; }
.ct-who.turn { box-shadow: 0 0 0 3px #F4B954, 0 6px 16px rgba(10, 30, 25, .25); animation: turnGlow 1.4s ease-in-out infinite; }
@keyframes turnGlow { 50% { box-shadow: 0 0 0 5px rgba(244, 185, 84, .55), 0 6px 16px rgba(10, 30, 25, .25); } }
.ct-name { display: flex; align-items: center; gap: 6px; min-width: 0; }
.ct-name b { font: 600 14px/1.2 var(--font); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 120px; }
.ct-sub { display: flex; align-items: center; gap: 8px; font-size: 12px; color: var(--text-2); white-space: nowrap; }
.ct-sub .cnt { font-weight: 600; color: var(--text); }
.role { display: inline-flex; align-items: center; height: 20px; padding: 0 7px; border-radius: 5px; font: 700 11px/1 var(--font); white-space: nowrap; }
.role.ll { background: #F6C35C; color: #6A4206; }
.role.fm { background: #DDEFE9; color: var(--primary-d); }
.ct-play { display: flex; flex-direction: column; gap: 6px; min-height: 66px; }
.ct-seat.left .ct-play { align-items: flex-start; }
.ct-seat.right .ct-play { align-items: flex-end; }
.ct-say { padding: 6px 14px; border-radius: 12px; background: rgba(255, 255, 255, .9); font: 600 14px/1.3 var(--font); color: var(--text-2); white-space: nowrap; animation: pop .25s both; }
.ct-type { font-size: 12px; color: rgba(255, 255, 255, .78); white-space: nowrap; }
.ct-center { position: absolute; left: 50%; top: 20px; transform: translateX(-50%); display: flex; flex-direction: column; align-items: center; gap: 8px; }
.ct-bottom { display: flex; gap: 6px; }
.ct-mult { font-size: 13px; color: rgba(255, 255, 255, .8); white-space: nowrap; }
.ct-mult b { font: 700 18px/1 var(--font); color: #FFD27A; }
.ct-mult.big { margin: 4px 0 12px; font-size: 14px; color: var(--accent-d); font-weight: 600; }
.ct-msg { font-size: 13px; color: rgba(255, 255, 255, .72); white-space: nowrap; }
.ct-myplay { position: absolute; left: 50%; bottom: 232px; transform: translateX(-50%); display: flex; flex-direction: column; align-items: center; gap: 6px; }
.ct-bar { position: absolute; left: 50%; bottom: 162px; transform: translateX(-50%); display: flex; align-items: center; gap: 12px; }
.ct-acts { display: flex; align-items: center; gap: 8px; }
.ct-acts .btn { min-width: 76px; }
.ct-wait { font-size: 14px; color: rgba(255, 255, 255, .85); white-space: nowrap; }
.ct-wait.mine { color: #FFE29A; font-weight: 600; }
.ct-timer { height: 26px; padding: 0 10px; border-radius: 13px; background: rgba(0, 0, 0, .3); color: #FFE29A; font: 600 12px/26px var(--font); white-space: nowrap; }
.ct-hand { position: absolute; left: 0; right: 0; bottom: 18px; display: flex; justify-content: center; padding: 0 200px; }
.ct-watch { height: 100px; display: grid; place-items: center; color: rgba(255, 255, 255, .7); font-size: 14px; }
.ct-me { position: absolute; left: 22px; bottom: 150px; }
.ct-reacts { position: absolute; right: 22px; bottom: 150px; width: 228px; }
.ct-reacts .xq-reacts button { background: rgba(255, 255, 255, .14); }
.ct-reacts .xq-reacts button:hover { background: rgba(255, 255, 255, .26); }
.ct-res { display: flex; flex-direction: column; gap: 6px; margin: 6px 0 14px; text-align: left; }
.ct-res > div { display: flex; align-items: center; gap: 8px; padding: 6px 10px; border-radius: 10px; background: rgba(38, 50, 58, .04); font-size: 13px; }
.ct-res > div.w { background: var(--primary-soft); }
.ct-res img { width: 30px; height: 30px; border-radius: 50%; background: #DCEDEA; }
.ct-res b { font-weight: 600; white-space: nowrap; }
.ct-res .rest { margin-left: auto; color: var(--text-3); white-space: nowrap; }
.ct .xq-result { background: rgba(20, 50, 44, .35); }
.ct .xq-react .n { background: rgba(255, 255, 255, .9); }

/* 扑克牌 */
.ct-cards { display: flex; }
.pk { position: relative; flex: none; width: 66px; height: 94px; border-radius: 8px; background: linear-gradient(#FFFFFF, #F6F3EC); box-shadow: 0 1px 0 rgba(0, 0, 0, .12), 0 3px 8px rgba(10, 30, 25, .28), inset 0 0 0 1px rgba(0, 0, 0, .08); color: #23262A; font-family: var(--font); user-select: none; transition: transform .12s; }
.pk.red { color: #D23C3C; }
.pk .r { position: absolute; left: 6px; top: 4px; font: 700 21px/1 var(--font); letter-spacing: -1px; }
.pk .s { position: absolute; left: 7px; top: 27px; font-size: 15px; line-height: 1; }
.pk .big { position: absolute; right: 6px; bottom: 2px; font-size: 34px; line-height: 1; opacity: .9; }
.pk.joker .jk { position: absolute; left: 6px; top: 5px; font: 700 11px/1.05 var(--font); color: #23262A; }
.pk.joker.big .jk, .pk.joker.big .jn { color: #D23C3C; }
.pk.joker .jn { position: absolute; right: 6px; bottom: 6px; font: 700 15px/1 var(--serif); writing-mode: vertical-rl; }
.ct-cards.hand .pk { cursor: pointer; }
.ct-cards.hand .pk + .pk { margin-left: -38px; }
.ct-cards.hand .pk:hover { transform: translateY(-6px); }
.ct-cards.hand .pk.sel { transform: translateY(-20px); box-shadow: 0 0 0 2px #F4B954, 0 6px 14px rgba(10, 30, 25, .35); }
.ct-cards.small .pk { width: 44px; height: 62px; border-radius: 6px; }
.ct-cards.small .pk + .pk { margin-left: -24px; }
.ct-cards.small .pk .r { left: 4px; top: 3px; font-size: 15px; }
.ct-cards.small .pk .s { left: 5px; top: 19px; font-size: 11px; }
.ct-cards.small .pk .big { font-size: 20px; right: 4px; }
.ct-cards.small .pk.joker .jk { font-size: 8px; left: 4px; }
.ct-cards.small .pk.joker .jn { font-size: 11px; right: 3px; bottom: 4px; }
.ct-cards.small { animation: playIn .22s ease-out both; }
.ct-cards.rest { animation: none; opacity: .92; flex-wrap: wrap; max-width: 300px; row-gap: 4px; }
@keyframes playIn { from { opacity: 0; transform: translateY(14px) scale(.96); } }
.pk.mini { width: 40px; height: 56px; border-radius: 6px; }
.pk.mini .r { left: 4px; top: 3px; font-size: 14px; }
.pk.mini .s { left: 4px; top: 18px; font-size: 10px; }
.pk.mini .big { font-size: 18px; right: 3px; }
.pk.mini.joker .jk { font-size: 7px; left: 3px; }
.pk.mini.joker .jn { font-size: 10px; right: 2px; bottom: 3px; }
.pk.back { background: repeating-linear-gradient(45deg, #C9574A 0 6px, #B84A3E 6px 12px); box-shadow: inset 0 0 0 3px #fff, 0 2px 6px rgba(10, 30, 25, .3); }
.pk-back-stack { display: inline-flex; align-items: center; gap: 6px; }
.pk-back-stack .pk.back { width: 18px; height: 26px; border-radius: 3px; box-shadow: inset 0 0 0 2px #fff, 0 1px 2px rgba(0, 0, 0, .2); }
.pk-back-stack .pk.back + .pk.back { margin-left: -14px; }
.pk-back-stack b { font: 700 15px/1 var(--font); color: var(--text); }

/* UNO 牌 */
.uc { --c: #E5484D; position: relative; flex: none; width: 72px; height: 108px; border-radius: 11px; color: #fff; user-select: none; transition: transform .14s, filter .14s, box-shadow .14s;
  background: linear-gradient(155deg, color-mix(in srgb, var(--c) 78%, #fff) 0%, var(--c) 38%, color-mix(in srgb, var(--c) 82%, #000) 100%);
  box-shadow: inset 0 0 0 4px #FFFDF8, inset 0 0 0 5px rgba(0, 0, 0, .1), 0 1px 0 rgba(0, 0, 0, .18), 0 6px 14px rgba(10, 30, 25, .32); }
.uc::after { content: ""; position: absolute; inset: 4px; border-radius: 8px; background: linear-gradient(140deg, rgba(255, 255, 255, .38), rgba(255, 255, 255, 0) 42%); pointer-events: none; }
.uc.c-r { --c: #E5484D; } .uc.c-y { --c: #EFB22E; } .uc.c-g { --c: #2FA36B; } .uc.c-b { --c: #3B7DD8; } .uc.c-w { --c: #2A2C33; }
.uc .tl, .uc .br { position: absolute; z-index: 1; display: grid; place-items: center; min-width: 14px; height: 18px; font: 900 16px/1 var(--font); color: #fff; text-shadow: 1px 1px 0 rgba(0, 0, 0, .55); }
.uc .tl { left: 8px; top: 8px; } .uc .br { right: 8px; bottom: 8px; transform: rotate(180deg); }
.uc .tl svg, .uc .br svg { width: 15px; height: 15px; filter: drop-shadow(1px 1px 0 rgba(0, 0, 0, .5)); }
.uc .wdot { width: 13px; height: 13px; border-radius: 50%; background: conic-gradient(#E5484D 0 25%, #3B7DD8 0 50%, #2FA36B 0 75%, #EFB22E 0); box-shadow: 0 0 0 1.5px #fff; }
.uc .oval { position: absolute; left: 50%; top: 50%; width: 52px; height: 84px; margin: -42px 0 0 -26px; border-radius: 50%; background: #FFFDF8; transform: rotate(30deg); display: grid; place-items: center; overflow: hidden; box-shadow: inset 0 -3px 6px rgba(0, 0, 0, .12); }
.uc .oval b { transform: rotate(-30deg); font: 900 36px/1 var(--font); color: var(--c); -webkit-text-stroke: 1.5px #1F1F24; text-shadow: 2px 2px 0 #1F1F24; letter-spacing: -1px; }
.uc .oval b.ic { width: 36px; height: 36px; display: grid; color: var(--c); filter: drop-shadow(1.5px 1.5px 0 #1F1F24); -webkit-text-stroke: 0; text-shadow: none; }
.uc .oval b.ic svg { width: 100%; height: 100%; }
.uc.c-w .oval { grid-template-columns: 1fr 1fr; grid-template-rows: 1fr 1fr; background: none; box-shadow: 0 0 0 3px #FFFDF8; }
.uc.c-w .oval i { display: block; width: 100%; height: 100%; }
.uc.c-w .oval i:nth-child(1) { background: #E5484D; } .uc.c-w .oval i:nth-child(2) { background: #3B7DD8; } .uc.c-w .oval i:nth-child(3) { background: #EFB22E; } .uc.c-w .oval i:nth-child(4) { background: #2FA36B; }
.uc.c-w .oval b { position: absolute; color: #fff; font-size: 28px; -webkit-text-stroke: 1.5px #1F1F24; }
.uc.back { --c: #23252B; background: radial-gradient(ellipse at 50% 40%, #34363E, #1C1D22); }
.uc.back::before { content: "UNO"; position: absolute; left: 50%; top: 50%; width: 60px; height: 36px; margin: -18px 0 0 -30px; border-radius: 50%; background: linear-gradient(#EE5A4F, #D23E36); transform: rotate(-24deg); color: #F7D04A; font: italic 900 17px/36px var(--font); text-align: center; text-shadow: 1.5px 1.5px 0 #1F1F24; box-shadow: 0 0 0 2.5px #F7D04A; }
.uc.back::after { background: none; }

/* 手牌：轻轻扇形展开，能出的牌抬起来发光 */
.ct.uno .ct-hand { bottom: 14px; }
.ct.uno .ct-cards.hand .uc { transform: rotate(var(--fan, 0deg)); transform-origin: 50% 160%; }
.ct.uno .ct-cards.hand .uc + .uc { margin-left: calc(-30px - max(0px, (var(--n) - 9) * 2.2px)); }
.ct.uno .ct-cards.hand .uc.ok { cursor: pointer; transform: rotate(var(--fan, 0deg)) translateY(-16px); box-shadow: inset 0 0 0 4px #FFFDF8, 0 0 0 3px #FFE29A, 0 0 22px rgba(255, 226, 154, .65), 0 10px 18px rgba(10, 30, 25, .35); }
.ct.uno .ct-cards.hand .uc.ok:hover { transform: rotate(var(--fan, 0deg)) translateY(-28px) scale(1.06); z-index: 2; }
.ct.uno .ct-cards.hand .uc.dim { filter: brightness(.68) saturate(.65); }
.ct.uno .ct-cards.hand .uc.arrive { animation: ucArrive .45s .2s cubic-bezier(.2, 1.3, .4, 1) both; }
@keyframes ucArrive { from { opacity: 0; transform: rotate(var(--fan, 0deg)) translateY(-70px) scale(.7); } }
.ct.uno .ct-cards.hand .uc.dealt { animation: ucArrive .4s calc(var(--i) * 55ms * 3 + 200ms) cubic-bezier(.2, 1.2, .4, 1) both; }

/* 对手：一小把扇形的牌背 + 张数 */
.uno-fan { position: relative; width: 44px; height: 30px; }
.uno-fan i { position: absolute; left: 14px; top: 2px; width: 18px; height: 27px; border-radius: 3px; background: #26282D; box-shadow: inset 0 0 0 1.5px #fff, 0 1px 2px rgba(0, 0, 0, .3); transform: rotate(var(--r)); transform-origin: 50% 120%; }
.uno-fan i::after { content: ""; position: absolute; left: 3px; right: 3px; top: 9px; height: 8px; border-radius: 50%; background: #E5484D; transform: rotate(-24deg); }
.uno-cnt { font: 800 17px/1 var(--font); color: var(--text); }
.ct.uno .ct-seat { top: auto; }
.ct.uno .ct-seat.left { left: 18px; top: 38%; transform: translateY(-50%); }
.ct.uno .ct-seat.right { right: 18px; top: 38%; transform: translateY(-50%); }
.ct.uno .ct-seat.top { top: 14px; }
.ct-who.hit { animation: whoHit .5s ease-out; }
@keyframes whoHit { 20% { transform: translateX(-7px) rotate(-2deg); } 40% { transform: translateX(6px) rotate(2deg); } 60% { transform: translateX(-4px); } 80% { transform: translateX(2px); } }
.uno-flag { height: 20px; padding: 0 7px; border-radius: 5px; background: #E5484D; color: #fff; font: 800 11px/20px var(--font); animation: pulseR 1s ease-in-out infinite; }

/* 出牌顺序的轨道：虚线一直沿出牌方向流动，箭头指方向，光点停在当前出牌的人身上 */
.uno-track { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; overflow: visible; }
.uno-track .base { fill: none; stroke: rgba(255, 255, 255, .1); stroke-width: 14; }
.uno-track .flow { fill: none; stroke: rgba(255, 255, 255, .42); stroke-width: 3; stroke-dasharray: 2 18; stroke-linecap: round; animation: flow 1.1s linear infinite; }
.uno-track.mine .flow { stroke: rgba(255, 226, 154, .7); }
@keyframes flow { to { stroke-dashoffset: -40; } }
.uno-track .chev path { fill: none; stroke: rgba(255, 255, 255, .7); stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; }
.ct-felt.flip .uno-track { animation: trackFlip .7s ease-out; }
@keyframes trackFlip { 0% { opacity: 1; } 30% { opacity: .1; transform: scaleX(-1); } 100% { opacity: 1; } }
.uno-nodes { position: absolute; inset: 0; pointer-events: none; }
.uno-node { position: absolute; width: 0; height: 0; }
.uno-node .dot { position: absolute; left: -7px; top: -7px; width: 14px; height: 14px; border-radius: 50%; background: rgba(255, 255, 255, .35); box-shadow: 0 0 0 3px rgba(255, 255, 255, .12); }
.uno-node.next .dot { background: rgba(255, 255, 255, .8); }
.uno-node .lbl { position: absolute; left: 12px; top: -11px; height: 22px; padding: 0 8px; border-radius: 11px; background: rgba(255, 255, 255, .92); color: var(--primary-d); font: 700 11px/22px var(--font); white-space: nowrap; }
.uno-token { position: absolute; width: 30px; height: 30px; margin: -15px 0 0 -15px; border-radius: 50%; background: radial-gradient(circle, #FFF6D8 0 30%, #FFD27A 55%, rgba(255, 210, 122, 0) 72%); transition: left .55s cubic-bezier(.3, .7, .3, 1), top .55s cubic-bezier(.3, .7, .3, 1); animation: tokenPulse 1.2s ease-in-out infinite; pointer-events: none; }
@keyframes tokenPulse { 50% { transform: scale(1.35); } }

/* 中间：牌堆、弃牌堆（最近几张叠在一起）、当前颜色 */
.uno-glow { position: absolute; left: 50%; top: 44%; width: 520px; height: 340px; margin: -170px 0 0 -260px; border-radius: 50%; background: radial-gradient(closest-side, color-mix(in srgb, var(--cc, #fff) 40%, transparent), transparent); opacity: .55; transition: background .6s; pointer-events: none; }
.ct.uno .ct-center { top: 44%; transform: translate(-50%, -50%); flex-direction: row; gap: 46px; align-items: center; }
.uno-deck { position: relative; width: 92px; height: 136px; padding: 0; border: 0; background: none; }
.uno-deck .uc { position: absolute; left: 0; top: 0; width: 92px; height: 136px; }
.uno-deck .uc:nth-child(2) { top: -3px; left: 2px; } .uno-deck .uc:nth-child(3) { top: -6px; left: 4px; }
.uno-deck .uc.back::before { width: 74px; height: 44px; margin: -22px 0 0 -37px; font-size: 21px; line-height: 44px; }
.uno-deck span { position: absolute; left: -20px; right: -20px; top: 146px; text-align: center; font-size: 12px; color: rgba(255, 255, 255, .8); white-space: nowrap; }
.uno-deck.can { cursor: pointer; }
.uno-deck.can .uc:nth-child(3) { box-shadow: inset 0 0 0 4px #FFFDF8, 0 0 0 3px #FFE29A, 0 0 24px rgba(255, 226, 154, .7); animation: deckBob 1.2s ease-in-out infinite; }
.uno-deck.can span { color: #FFE29A; font-weight: 700; }
@keyframes deckBob { 50% { transform: translateY(-5px); } }
.uno-pile { position: relative; width: 96px; height: 142px; }
.uno-pile .uc { position: absolute; left: 0; top: 0; width: 96px; height: 142px; border-radius: 13px; transform: translate(var(--dx), var(--dy)) rotate(var(--rot)); }
.uno-pile .uc.under { filter: brightness(.86); }
.uno-pile .uc.hold { visibility: hidden; }
.uno-pile .uc .oval { width: 68px; height: 110px; margin: -55px 0 0 -34px; }
.uno-pile .uc .oval b { font-size: 46px; }
.uno-pile .uc .oval b.ic { width: 46px; height: 46px; }
.uno-pile .uc .tl, .uno-pile .uc .br { font-size: 19px; }
.uno-now { position: absolute; left: 50%; top: 164px; transform: translateX(-50%); display: flex; align-items: center; gap: 8px; height: 28px; padding: 0 12px 0 6px; border-radius: 14px; background: rgba(0, 0, 0, .28); color: #fff; font-size: 12px; white-space: nowrap; }
.uno-now .sw { width: 18px; height: 18px; border-radius: 50%; box-shadow: 0 0 0 2px #fff; }
.uno-now .sw.c-r { background: #E5484D; } .uno-now .sw.c-y { background: #EFB22E; } .uno-now .sw.c-g { background: #2FA36B; } .uno-now .sw.c-b { background: #3B7DD8; }
.uno-now b { font-weight: 700; }
.uno-now .dir { color: rgba(255, 255, 255, .7); }
.ct.uno .ct-wait b { color: #FFE29A; }

/* 特效层 */
.uno-fx { position: absolute; inset: 0; pointer-events: none; overflow: hidden; z-index: 4; }
.uno-fly { position: absolute; will-change: transform; filter: drop-shadow(0 10px 14px rgba(0, 0, 0, .3)); }
.uno-fly .uc::after { display: block; }
.uno-stamp { position: absolute; transform: translate(-50%, -50%); display: grid; place-items: center; animation: stampIn 1.4s cubic-bezier(.2, 1.3, .4, 1) both; }
.uno-stamp.plus { padding: 6px 14px; border-radius: 12px; background: #E5484D; color: #fff; font: 900 30px/1 var(--font); box-shadow: 0 0 0 3px #fff, 0 8px 18px rgba(0, 0, 0, .3); }
.uno-stamp.skip { width: 66px; height: 66px; border-radius: 50%; background: rgba(255, 255, 255, .95); color: #E5484D; box-shadow: 0 8px 18px rgba(0, 0, 0, .3); }
.uno-stamp.skip svg { width: 52px; height: 52px; }
.uno-stamp.uno { padding: 8px 16px; border-radius: 18px 18px 18px 4px; background: #F7D04A; color: #C2302A; font: italic 900 26px/1 var(--font); box-shadow: 0 0 0 3px #C2302A, 0 8px 18px rgba(0, 0, 0, .3); }
@keyframes stampIn { 0% { opacity: 0; transform: translate(-50%, -50%) scale(2.2) rotate(-14deg); } 18% { opacity: 1; transform: translate(-50%, -50%) scale(.92) rotate(-6deg); } 28% { transform: translate(-50%, -50%) scale(1) rotate(-8deg); } 80% { opacity: 1; } 100% { opacity: 0; transform: translate(-50%, -80%) scale(1) rotate(-8deg); } }
.uno-ripple { position: absolute; width: 40px; height: 40px; margin: -20px 0 0 -20px; border-radius: 50%; border: 10px solid var(--rc); animation: ripple 1.2s ease-out forwards; }
@keyframes ripple { from { transform: scale(.5); opacity: .95; } to { transform: scale(28); opacity: 0; border-width: 2px; } }
.uno-conf { position: absolute; top: -12px; width: 9px; height: 14px; border-radius: 2px; animation: confFall linear forwards; }
@keyframes confFall { to { transform: translate(var(--dx), 720px) rotate(var(--rot)); } }
.ct-cards.small .uc { width: 34px; height: 50px; border-radius: 6px; box-shadow: inset 0 0 0 2px #fff; }
.ct-cards.small .uc::after { display: none; }
.ct-cards.small .uc + .uc { margin-left: -16px; }
.ct-cards.small .uc .tl, .ct-cards.small .uc .br { display: none; }
.ct-cards.small .uc .oval { width: 24px; height: 38px; margin: -19px 0 0 -12px; }
.ct-cards.small .uc .oval b { font-size: 13px; -webkit-text-stroke: 0; text-shadow: none; }
.ct-cards.small .uc .oval b.ic { width: 15px; height: 15px; }
.uno-rest { max-width: 260px; flex-wrap: wrap; row-gap: 4px; }
.uno-pick { position: absolute; left: 50%; bottom: 210px; transform: translateX(-50%); z-index: 5; display: flex; align-items: center; gap: 8px; padding: 10px 12px; border-radius: 14px; background: #fff; box-shadow: var(--shadow-lg); animation: pop .2s both; }
.uno-pick > span { font: 600 13px/1 var(--font); color: var(--text-2); white-space: nowrap; margin-right: 4px; }
.uno-pick [data-color] { width: 54px; height: 40px; border: 0; border-radius: 10px; color: #fff; font: 700 14px/1 var(--font); box-shadow: inset 0 -3px 0 rgba(0, 0, 0, .18); }
.uno-pick [data-color]:hover { transform: translateY(-2px); }
.uno-pick .c-r { background: #E5484D; } .uno-pick .c-y { background: #EFB22E; } .uno-pick .c-g { background: #2FA36B; } .uno-pick .c-b { background: #3B7DD8; }

/* ---------- 提示条 ---------- */
.toast { position: fixed; left: 50%; bottom: 96px; transform: translate(-50%, 20px); z-index: 60; max-width: min(520px, 90vw); padding: 10px 18px; border-radius: 10px; background: rgba(32, 42, 48, .92); color: #fff; font-size: 14px; line-height: 1.5; text-align: center; opacity: 0; pointer-events: none; transition: opacity .2s, transform .2s; }
.toast.show { opacity: 1; transform: translate(-50%, 0); }
.conn { position: fixed; left: 50%; top: 16px; transform: translateX(-50%); z-index: 70; padding: 8px 16px; border-radius: 10px; background: var(--danger); color: #fff; font-size: 13px; }

/* ---------- 窄一点的屏幕 ---------- */
@media (max-width: 1180px) {
  .chat { width: 300px; }
  .notices { max-width: calc(100vw - 640px); }
  .wardrobe { width: 100%; }
  .wd { grid-template-columns: 260px 1fr; }
}
@media (max-width: 980px) {
  .xq { grid-template-columns: 1fr 260px; }
  .notices { display: none; }
  .hint { display: none !important; }
}


/* ============ v4 界面：纯色块、大圆角、胶囊按钮（对照 设计/界面样稿.html） ============ */
.panel { background: var(--glass); backdrop-filter: none; -webkit-backdrop-filter: none; border: 0; border-radius: var(--r); box-shadow: var(--shadow); color: var(--text); }
.btn { height: 42px; padding: 0 20px; border-radius: 21px; background: var(--cr2); color: var(--text); box-shadow: none; font: 600 14px/1 var(--font); }
.btn:hover:not(:disabled) { background: var(--cr3); }
.btn:active:not(:disabled) { transform: scale(.97); box-shadow: none; }
.btn.primary { color: #fff; background: linear-gradient(#6EC28C, #4CA56E); letter-spacing: .12em; font-weight: 700; box-shadow: 0 10px 18px -10px rgba(60, 150, 95, .8), inset 0 1px 0 rgba(255, 255, 255, .3); }
.btn.primary:hover:not(:disabled) { background: linear-gradient(#6EC28C, #4CA56E); filter: brightness(1.06); }
.btn.primary:active:not(:disabled) { box-shadow: none; }
.btn.accent { color: #7A5A0E; background: var(--accent); box-shadow: none; }
.btn.danger { color: #C24E40; background: #FBE1DC; box-shadow: none; }
.btn.ghost { background: transparent; }
.btn.sm { height: 34px; padding: 0 14px; border-radius: 17px; font-size: 13px; }
.btn.lg { height: 50px; padding: 0 28px; border-radius: 25px; font-size: 17px; }
.key { min-width: 20px; height: 20px; padding: 0 5px; border-radius: 6px; background: var(--cr2); color: var(--text-2); box-shadow: inset 0 -2px 0 rgba(150, 120, 70, .2); font-weight: 600; }
.ib { border-radius: 50%; color: var(--text-2); }
.ib:hover { background: var(--cr2); }

/* 登录 */
.login-card { background: var(--glass); border-radius: 26px; padding: 30px 28px 24px; }
.login-brand h1 { color: var(--text); }
.field span { color: var(--text-2); font-weight: 600; }
.field input { height: 46px; padding: 0 18px; border: 0; border-radius: 23px; background: var(--cr2); color: var(--text); font-weight: 500; }
.field input::placeholder { color: var(--text-3); }
.field input:focus { background: #fff; box-shadow: 0 0 0 2.5px var(--primary-2); }

/* 左上角：我的卡片 */
.mecard { left: 20px; top: 20px; gap: 12px; padding: 10px 22px 10px 10px; border-radius: 40px; }
.avatar { width: 56px; height: 56px; background: linear-gradient(#CFE6F7 0 58%, #BFE0A0 58%); box-shadow: 0 0 0 3px #fff; }
.me-name b { font-weight: 800; font-size: 16px; color: var(--text); }
.lv { height: 20px; padding: 0 7px; border-radius: 10px; background: var(--accent); color: #7A5A0E; font: 800 11px/20px var(--font); }
.me-sub { color: var(--text-2); font-weight: 500; }
.bar { width: 120px; height: 6px; border-radius: 3px; background: var(--cr2); }
.bar i { background: linear-gradient(90deg, #6EC28C, #4FAA6E); }

/* 右上角：时间、乐园币 */
.res { right: 20px; top: 20px; }
.chip { height: 42px; padding: 0 16px 0 10px; border-radius: 21px; font: 800 15px/1 var(--font); color: var(--text); }

/* 右下角竖排：功能栏（彩色图标块），叠在「我的位置」上面；底部中间留给「下车/站起来」这些胶囊 */
.dock { left: auto; right: 20px; top: auto; bottom: 78px; transform: none; flex-direction: column; gap: 2px; padding: 6px; border-radius: 30px; }
.spot { right: 112px; }
.dbtn { width: 66px; height: auto; padding: 8px 0 6px; border-radius: 24px; gap: 4px; color: var(--text); }
.dbtn:hover, .dbtn.on { background: var(--cr2); }
.dbtn .di { width: 44px; height: 44px; border-radius: 16px; background: var(--c, #A8977A); color: #fff; box-shadow: inset 0 -3px 0 rgba(0, 0, 0, .1); }
.dbtn .di .ico { width: 24px; height: 24px; }
.dbtn .dl { font: 700 12px/1 var(--font); }
.dbtn .key { left: 6px; top: 4px; background: #fff; }
.dbtn[data-open="passport"] { --c: #5FA77A; }
.dbtn[data-open="wardrobe"] { --c: #F08A4E; }
.dbtn[data-open="shop"] { --c: #5A9BD5; }
.dbtn[data-open="friends"] { --c: #8E7CC3; }
.dbtn .badge { background: var(--danger); box-shadow: 0 0 0 2.5px var(--glass); }

/* 小地图：右上角，默认收起成一个图标 */
.map { left: auto; right: 20px; bottom: auto; top: 76px; width: 210px; padding: 8px 8px 10px; border-radius: 28px; }
.map canvas { width: 194px; height: 194px; border-radius: 21px; }
.map .cap b { font-weight: 800; color: var(--text); }
.map.collapsed { width: auto; padding: 4px; border-radius: 21px; }
.map.collapsed .map-btn { width: 42px; height: 42px; color: var(--text); }
.map-btn { background: var(--glass); color: var(--text); border-radius: 50%; }

/* 右下角：我的位置（镜头回到自己身上） */
.locate { right: 20px; bottom: 20px; padding: 4px; border-radius: 21px; }
.locate .map-btn { position: static; width: 42px; height: 42px; }
.locate .map-btn .di, .locate .map-btn .ico { width: 22px; height: 22px; }

/* 左下角：聊天 */
.chat { left: 20px; bottom: 20px; width: 340px; }
.chat .msg { justify-self: start; width: fit-content; max-width: 100%; padding: 7px 14px; border-radius: 16px; background: rgba(255, 249, 236, .92); color: var(--text); text-shadow: none; font-weight: 500; box-shadow: 0 4px 12px -6px rgba(40, 50, 30, .35); }
.chat .msg b { font-weight: 800; }
.chat-input { height: 48px; padding: 0 6px 0 18px; border-radius: 24px; }
.chat-input input::placeholder { color: var(--text-3); }

/* 通知、提示条 */
.notice { min-height: 46px; padding: 0 20px 0 12px; border-radius: 23px; font-weight: 600; }
.hint { bottom: 118px; border-radius: 24px; padding: 10px 10px 10px 20px; color: var(--text-2); }
.hint b { color: var(--text); }

/* 场馆卡（走近时出现）：顶上一条彩色书签 */
.spot { right: 20px; top: 132px; width: 320px; border-radius: 26px; overflow: visible; }
.spot .cover { border-radius: 26px 26px 0 0; }

/* 弹窗 */
.modal-card { background: var(--solid); border-radius: 26px; }
.m-head { border-bottom: 1px dashed var(--line-2); }
.m-head h2 { color: var(--text); font-weight: 800; }
.tabs { background: var(--cr2); border-radius: 22px; padding: 4px; }
.tabs button { height: 34px; padding: 0 16px; border-radius: 17px; color: var(--text-2); font-weight: 600; }
.tabs button.on { background: #fff; color: var(--text); box-shadow: 0 2px 6px -2px rgba(120, 95, 55, .35); }
.item { border-radius: 18px; background: #fff; box-shadow: none; }
.item.on { box-shadow: 0 0 0 3px var(--accent); }
.hud:has(.map:not(.collapsed)) .spot { right: 244px; }

/* 项目标签：小招牌（左边一条颜色、下面一根细杆），不像对话框 */
.spot-tag { gap: 0; flex-direction: column; align-items: flex-start; padding: 6px 12px 6px 11px; border: 0; border-left: 4px solid var(--tc, #4FAA6E); border-bottom: 16px solid transparent; border-radius: 10px; background: var(--glass); background-clip: padding-box; box-shadow: none; filter: drop-shadow(0 3px 6px rgba(60, 50, 30, .22)); cursor: pointer; }
.spot-tag::before { content: ""; position: absolute; left: 50%; bottom: -16px; width: 2px; height: 16px; border-radius: 1px; background: rgba(92, 74, 51, .45); transform: translateX(-50%); }
.spot-tag::after { content: ""; position: absolute; left: 50%; bottom: -19px; width: 6px; height: 6px; border-radius: 50%; background: var(--tc, #4FAA6E); border: 0; transform: translateX(-50%); }
.spot-tag b { font: 800 13.5px/1.25 var(--font); color: var(--text); }
.spot-tag .sub { font: 500 11.5px/1.3 var(--font); color: var(--text-2); }
.spot-tag .note { margin-top: 3px; background: var(--accent); color: #7A5A0E; }
.spot-tag.sight { padding: 4px 10px 4px 9px; border-left-color: #C9B996; background: rgba(255, 249, 236, .9); background-clip: padding-box; }
.spot-tag.sight::after { background: #C9B996; }
.spot-tag.sight b { font-size: 12px; font-weight: 700; color: var(--text); }

/* ============ 象棋「棋盒」窗口（对照 设计/游戏窗口方案.html），尺寸跟着屏幕走 ============ */
.game.qh-on { padding: 0; container-type: size; background: rgba(60, 45, 25, .42); }
.game.qh-on .game-card { width: 100%; height: 100%; background: none; box-shadow: none; border-radius: 0; }
.game.qh-on .game-head { display: none; }
.qh { position: relative; width: 100%; height: 100%; --lea: #8A6748; --lea2: #75563B; --lea3: #A88B6E; --pg: #F7EFDD; --pg2: #EFE4CC; --cr: #FFF9EC; --cr2: #F4ECDA; --cr3: #ECE1C8; --br: #6B5740; --brd: #5C4A33; --br2: #A8977A; }
.qh-box { position: absolute; left: 50%; top: 52%; transform: translate(-50%, -50%); width: min(90cqw, 178cqh); height: min(91cqh, 64cqw); padding: 1.6cqh; border-radius: 3.2cqh; background: var(--lea); box-shadow: 0 .7cqh 0 var(--lea2), 0 3cqh 6cqh -2cqh rgba(30, 20, 10, .6); }
.qh-box.shake { animation: qhShake .5s cubic-bezier(.36, .07, .19, .97); }
@keyframes qhShake { 20% { transform: translate(calc(-50% - 1.2cqh), -50%) rotate(-.6deg); } 40% { transform: translate(calc(-50% + 1cqh), -50%) rotate(.5deg); } 60% { transform: translate(calc(-50% - .6cqh), -50%); } 80% { transform: translate(calc(-50% + .4cqh), -50%); } }
.qh-box::before { content: ""; position: absolute; inset: .8cqh; border-radius: 2.6cqh; border: .25cqh dashed rgba(255, 235, 200, .35); pointer-events: none; }
.qh-page { position: relative; height: 100%; border-radius: 2.2cqh; background: var(--pg); display: grid; grid-template-columns: minmax(0, 19%) minmax(0, 1fr) minmax(0, 19%); gap: 1.6%; padding: 3.2cqh 1.8% 3.6cqh; }
.qh-rings { position: absolute; left: -1.6%; top: 0; bottom: 0; display: flex; flex-direction: column; justify-content: space-evenly; pointer-events: none; }
.qh-rings i { display: block; width: 3.4cqh; height: 1.5cqh; border-radius: 1cqh; background: linear-gradient(#D9C2A0, #A88A62); box-shadow: 0 .3cqh 0 rgba(60, 40, 20, .35); }
.qh-plaque { position: absolute; left: 50%; top: -2.2cqh; transform: translateX(-50%); display: flex; align-items: center; gap: 1.2cqh; height: 5.2cqh; padding: 0 2.6cqh 0 .8cqh; border-radius: 2.6cqh; background: var(--lea2); color: #FFF3DC; font: 800 2.3cqh/1 var(--font); letter-spacing: .08em; white-space: nowrap; box-shadow: 0 .5cqh 0 rgba(40, 25, 10, .35); z-index: 2; }
.qh-plaque i { display: grid; place-items: center; width: 3.8cqh; height: 3.8cqh; border-radius: 50%; background: #D9704F; color: #fff; font: 900 2.1cqh/1 var(--serif); font-style: normal; }
.qh-plaque small { font: 600 1.5cqh var(--font); color: #E8D5B4; letter-spacing: 0; }
.qh-plaque::before, .qh-plaque::after { content: ""; position: absolute; top: 50%; width: 2cqh; height: .4cqh; border-radius: .2cqh; background: #D9C2A0; }
.qh-plaque::before { left: -1.6cqh; } .qh-plaque::after { right: -1.6cqh; }
.qh-tl, .qh-tr { position: absolute; top: 2.2cqh; display: flex; gap: 1cqh; z-index: 3; }
.qh-tl { left: 2.2cqh; } .qh-tr { right: 2.2cqh; }
.qh-rb { display: grid; place-items: center; width: 5.4cqh; height: 5.4cqh; border: 0; border-radius: 50%; background: var(--cr); color: var(--br); box-shadow: 0 .4cqh 0 rgba(120, 95, 55, .25); cursor: pointer; }
.qh-rb svg { width: 2.6cqh; height: 2.6cqh; }
.qh-rail { display: flex; flex-direction: column; gap: 1.5cqh; min-height: 0; }
.qh-flagw { position: relative; }
.qh-flagw.on::before { content: ""; position: absolute; inset: -.8cqh; background: #F5C94E; clip-path: polygon(0 0, 100% 0, 100% 84%, 50% 100%, 0 84%); border-radius: 2.2cqh 2.2cqh 0 0; animation: qhBreathe 1.6s ease-in-out infinite; }
@keyframes qhBreathe { 50% { opacity: .4; } }
.qh-flag { position: relative; display: grid; justify-items: center; gap: .5cqh; padding: 2cqh 1cqh 4.4cqh; background: var(--lea3); color: #FFF6E6; clip-path: polygon(0 0, 100% 0, 100% 84%, 50% 100%, 0 84%); border-radius: 1.6cqh 1.6cqh 0 0; text-align: center; transition: background .3s, filter .3s, opacity .3s; filter: saturate(.5); opacity: .7; }
.qh-flag.on { background: var(--lea2); filter: none; opacity: 1; }
.qh-flag .k { font: 700 1.4cqh var(--font); color: #E8D5B4; letter-spacing: .1em; }
.qh-flag .av { width: 8cqh; height: 8cqh; border-radius: 50%; background: linear-gradient(#CFE6F7 0 58%, #BFE0A0 58%); box-shadow: 0 0 0 .4cqh #FFF3DC; overflow: hidden; }
.qh-flag .av img { width: 100%; height: 100%; display: block; }
.qh-flag b { font: 800 1.9cqh var(--font); max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.qh-flag .wr { font: 500 1.4cqh var(--font); color: #E8D5B4; }
.qh-flag .sd { display: inline-flex; align-items: center; gap: .6cqh; height: 2.4cqh; padding: 0 1cqh; border-radius: 1.2cqh; background: rgba(255, 255, 255, .16); font: 700 1.3cqh var(--font); }
.qh-flag .sd i { width: 1cqh; height: 1cqh; border-radius: 50%; background: var(--dc); }
.qh-flag .st { margin-top: .4cqh; height: 4.4cqh; padding: 0 2cqh; border-radius: 2.2cqh; font: 900 2.2cqh/4.4cqh var(--font); letter-spacing: .08em; background: rgba(255, 255, 255, .12); color: #E8D5B4; }
.qh-flag.on .st { background: #F5C94E; color: #6E500A; }
.qh-bub { position: absolute; top: 1cqh; right: 1cqh; max-width: 90%; padding: .4cqh 1cqh; border-radius: 1.4cqh; background: #fff; color: var(--brd); font: 700 1.6cqh var(--font); animation: qhPop .3s cubic-bezier(.34, 1.56, .64, 1) both; z-index: 2; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
@keyframes qhPop { from { transform: scale(.3); opacity: 0; } }
.qh-tray { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: .6cqh; padding: 1cqh; border-radius: 1.6cqh; background: var(--pg2); }
.qh-tray span { aspect-ratio: 1; border-radius: 50%; background: rgba(140, 110, 70, .12); box-shadow: inset 0 .2cqh .3cqh rgba(100, 70, 30, .15); display: grid; place-items: center; font: 900 1.7cqh/1 var(--serif); }
.qh-tray span.p { background: none; box-shadow: none; }
.qh-tray span { position: relative; }
.qh-tray span.p svg { position: absolute; left: -4%; top: -2%; width: 108%; height: 116%; display: block; overflow: visible; filter: drop-shadow(0 .25cqh .2cqh rgba(74, 46, 16, .3)); }
.qh-tray .r { color: #B8352B; } .qh-tray .b { color: #2B2724; }
.qh-panel { border-radius: 1.6cqh; background: var(--cr); padding: 1.3cqh 1.5cqh; min-height: 0; overflow: hidden; color: var(--br); }
.qh-panel h4 { margin: 0 0 .8cqh; display: flex; justify-content: space-between; align-items: center; font: 800 1.6cqh var(--font); color: var(--brd); }
.qh-panel h4 span { font-weight: 600; color: var(--br2); font-size: 1.3cqh; }
.qh-wtip { font: 500 1.3cqh var(--font); color: var(--br2); }
.qh-chat { flex: 1; display: flex; flex-direction: column; }
.qh-msgs { flex: 1; min-height: 0; overflow-y: auto; display: flex; flex-direction: column; gap: .6cqh; font: 500 1.45cqh/1.45 var(--font); color: var(--br); scrollbar-width: none; }
.qh-msgs > div:first-child { margin-top: auto; }
.qh-msgs b { font-weight: 800; margin-right: .5cqh; }
.qh-msgs .emo { font-size: 2.4cqh; line-height: 1; }
.qh-emos { display: flex; gap: .4cqh; margin: .8cqh 0 .6cqh; }
.qh-emos button { flex: 1; height: 3.6cqh; border: 0; border-radius: 1.2cqh; background: var(--cr2); font-size: 2cqh; cursor: pointer; transition: transform .15s; }
.qh-emos button:hover { transform: translateY(-.3cqh); background: var(--cr3); }
.qh-cin { display: flex; gap: .6cqh; }
.qh-cin input { flex: 1; min-width: 0; height: 4.2cqh; padding: 0 1.4cqh; border: 0; border-radius: 2.1cqh; background: var(--cr2); font: 500 1.5cqh var(--font); color: var(--br); outline: none; }
.qh-cin input:focus { background: #fff; box-shadow: 0 0 0 .25cqh #6EC28C; }
.qh-cin button { width: 4.2cqh; height: 4.2cqh; flex: none; border: 0; border-radius: 50%; background: linear-gradient(#6EC28C, #4CA56E); color: #fff; display: grid; place-items: center; cursor: pointer; }
.qh-cin svg { width: 2cqh; height: 2cqh; }
.qh-acts { display: grid; grid-template-columns: repeat(3, 1fr); gap: .8cqh; }
.qh-acts:empty { display: none; }
.qh-acts button { display: grid; justify-items: center; gap: .3cqh; padding: 1cqh 0 .8cqh; border: 0; border-radius: 1.4cqh; background: var(--cr); color: var(--br); font: 700 1.4cqh var(--font); box-shadow: 0 .4cqh 0 rgba(120, 95, 55, .22); cursor: pointer; }
.qh-acts button:disabled { opacity: .45; cursor: default; }
.qh-acts button svg { width: 2.4cqh; height: 2.4cqh; }
.qh-acts button.d { background: #FBE1DC; color: #B8432F; }
.qh-mid { position: relative; display: flex; flex-direction: column; align-items: center; min-height: 0; min-width: 0; }
.qh-board { position: relative; flex: 1; min-height: 0; width: 100%; display: grid; place-items: center; }
.qh-svg { display: block; border-radius: 1.8cqh; box-shadow: 0 .7cqh 0 #B98A4A, 0 2cqh 3cqh -1.6cqh rgba(90, 60, 20, .55); transition: box-shadow .3s; }
.qh-board.me .qh-svg { box-shadow: 0 .7cqh 0 #B98A4A, 0 0 0 .6cqh rgba(245, 201, 78, .95), 0 2cqh 3cqh -1.6cqh rgba(90, 60, 20, .55); }
.qh-svg.can-move { cursor: pointer; }
.qh-svg .pc { transition: transform .32s cubic-bezier(.45, 0, .25, 1); }
.qh-svg .pc .lift { transition: transform .16s ease-out; }
.qh-svg .pc .sh { transition: opacity .16s, transform .16s; }
.qh-svg .pc.sel .lift { transform: translateY(-5px) scale(1.07); }
.qh-svg .pc.sel .sh { opacity: .7; transform: translate(2px, 4px) scale(1.06); }
.qh-svg .pc.moving .lift { animation: qhLift .34s cubic-bezier(.3, 0, .3, 1); }
.qh-svg .pc.moving .sh { animation: qhLiftSh .34s cubic-bezier(.3, 0, .3, 1); }
@keyframes qhLift { 35%, 65% { transform: translateY(-7px) scale(1.09); } 88% { transform: translateY(0) scale(.98); } }
@keyframes qhLiftSh { 35%, 65% { opacity: .55; transform: translate(3px, 6px) scale(1.1); } }
.qh-svg .pc.dead { opacity: 0; transition: opacity .12s .12s; }
.qh-marks > * { animation: qhMark .25s .26s both; }
@keyframes qhMark { from { opacity: 0; } }
.qh-svg .pc.check .ring { animation: qhChk 1s ease-in-out infinite; }
@keyframes qhChk { 50% { stroke-width: 5; stroke: #E0473C; } }
.qh-dot { fill: #4FAA6E; opacity: .85; pointer-events: none; }
.qh-capr { fill: none; stroke: #E0685A; stroke-width: 3; stroke-dasharray: 5 4; pointer-events: none; }
.qh-stamp { position: absolute; left: 50%; top: 48%; transform: translate(-50%, -50%) rotate(-12deg) scale(1.8); opacity: 0; pointer-events: none; transition: transform .35s cubic-bezier(.2, 1.6, .5, 1), opacity .2s; z-index: 3; }
.qh-stamp.show { transform: translate(-50%, -50%) rotate(-12deg) scale(1); opacity: .92; }
.qh-stamp div { padding: 1cqh 3cqh; border: .7cqh double #C23B2E; border-radius: 1.4cqh; color: #C23B2E; font: 900 5.4cqh/1 var(--serif); letter-spacing: .3em; text-indent: .3em; background: rgba(255, 245, 230, .55); }
.qh-float { position: absolute; z-index: 15; display: grid; justify-items: center; pointer-events: none; animation: qhRise 2.2s ease-out forwards; }
.qh-float .e { font-size: 3.4cqh; line-height: 1; }
.qh-float .n { font: 600 1.2cqh var(--font); color: var(--br); background: rgba(255, 255, 255, .85); border-radius: .6cqh; padding: .1cqh .6cqh; }
@keyframes qhRise { from { opacity: 0; transform: translateY(0) scale(.6); } 15% { opacity: 1; transform: translateY(-2cqh) scale(1.1); } to { opacity: 0; transform: translateY(-16cqh) scale(1); } }
.qh-over { position: absolute; inset: 0; z-index: 30; display: grid; place-items: center; background: rgba(60, 45, 25, .35); border-radius: 2.2cqh; animation: fade .2s both; }
.qh-dlg { width: min(46cqh, 80%); padding: 3cqh 3cqh 2.4cqh; border-radius: 3cqh; background: var(--cr); text-align: center; box-shadow: 0 1cqh 0 rgba(150, 120, 70, .14), 0 3cqh 5cqh -2cqh rgba(40, 30, 10, .6); animation: qhPop .3s cubic-bezier(.34, 1.56, .64, 1) both; }
.qh-dlg .av { width: 9cqh; height: 9cqh; margin: -7.5cqh auto 1cqh; border-radius: 50%; background: linear-gradient(#CFE6F7 0 58%, #BFE0A0 58%); box-shadow: 0 0 0 .5cqh #fff; overflow: hidden; }
.qh-dlg .av img { width: 100%; height: 100%; display: block; }
.qh-dlg h3 { margin: 0; font: 900 3cqh var(--font); color: var(--brd); }
.qh-dlg h3.win { color: #4FAA6E; font-size: 4.4cqh; letter-spacing: .1em; }
.qh-dlg p { margin: .6cqh 0 2.2cqh; font: 500 1.6cqh var(--font); color: var(--br2); }
.qh .two { display: grid; grid-template-columns: 1fr 1fr; gap: 1.2cqh; }
.qh .two:has(> :only-child) { grid-template-columns: 1fr; }
.qh-pill { display: inline-flex; align-items: center; justify-content: center; height: 5cqh; padding: 0 2.4cqh; border: 0; border-radius: 2.5cqh; background: var(--cr2); color: var(--br); font: 700 1.8cqh var(--font); cursor: pointer; }
.qh-pill.d { background: #E0685A; color: #fff; }
.qh-pill.p { background: linear-gradient(#6EC28C, #4CA56E); color: #fff; letter-spacing: .1em; box-shadow: 0 .5cqh 1cqh -.4cqh rgba(60, 150, 95, .8); }
.qh-link { margin-top: 1.2cqh; border: 0; background: none; color: var(--br2); font: 600 1.5cqh var(--font); cursor: pointer; }
.qh-rw { display: flex; justify-content: center; gap: 1cqh; margin: 0 0 2cqh; }
.qh-rw div { display: grid; gap: .2cqh; width: 10cqh; padding: 1.2cqh 0 1cqh; border-radius: 2cqh; background: var(--cr2); font: 800 2.2cqh var(--font); color: var(--brd); }
.qh-rw small { font: 600 1.2cqh var(--font); color: var(--br2); }
.qh-stamps { display: flex; justify-content: center; gap: 1.6cqh; margin: -.6cqh 0 2cqh; }
.qh-stamps div { display: grid; justify-items: center; gap: .4cqh; font: 600 1.3cqh var(--font); color: var(--br); }
.qh-ask { position: absolute; z-index: 25; width: 30cqh; padding: 1.6cqh; border-radius: 2cqh; background: var(--cr); color: var(--br); box-shadow: 0 .6cqh 0 rgba(150, 120, 70, .14), 0 2cqh 4cqh -1.6cqh rgba(40, 30, 10, .6); animation: qhPop .3s cubic-bezier(.34, 1.56, .64, 1) both; }
.qh-ask::before { content: ""; position: absolute; top: 3cqh; width: 1.6cqh; height: 1.6cqh; background: var(--cr); transform: rotate(45deg); border-radius: .3cqh; }
.qh-ask.l::before { left: -.8cqh; } .qh-ask.r::before { right: -.8cqh; }
.qh-ask b { display: block; font: 800 1.8cqh var(--font); color: var(--brd); }
.qh-ask p { margin: .4cqh 0 1.2cqh; font: 500 1.4cqh var(--font); color: var(--br2); }
.qh-ask .qh-pill { height: 4.2cqh; font-size: 1.6cqh; }
@container (max-aspect-ratio: 3/2) {
  .qh-page { grid-template-columns: minmax(0, 23%) minmax(0, 1fr) minmax(0, 23%); }
  .qh-opt { display: none; }
  .qh-flag .wr { display: none; }
  .qh-emos { display: none; }
}
/* 侧栏版（五子棋）：棋盘在左，右边一条窄栏放双方、按钮和聊天；旗子变成横条小卡 */
.qh-side .qh-box { width: min(90cqw, 134cqh); }
.qh-side .qh-page { grid-template-columns: minmax(0, 1fr) 36cqh; gap: 2.6cqh; padding: 3.2cqh 2.4cqh 3.4cqh 3.6cqh; }
.qh-side .qh-rail { gap: 1.2cqh; }
.qh-side .qh-flag { clip-path: none; border-radius: 1.8cqh; padding: 1.2cqh 1.4cqh; display: grid; grid-template-columns: auto auto 1fr auto; grid-template-areas: "av b b st" "av sd cnt st"; justify-items: start; align-items: center; column-gap: 1cqh; row-gap: .5cqh; text-align: left; }
.qh-side .qh-flag .k, .qh-side .qh-flag .wr { display: none; }
.qh-side .qh-flag .av { grid-area: av; width: 6.2cqh; height: 6.2cqh; box-shadow: 0 0 0 .3cqh #FFF3DC; }
.qh-side .qh-flag b { grid-area: b; font-size: 1.8cqh; }
.qh-side .qh-flag .sd { grid-area: sd; }
.qh-side .qh-flag .st { grid-area: st; margin: 0; height: 3.6cqh; padding: 0 1.4cqh; font: 800 1.6cqh/3.6cqh var(--font); }
.qh-side .qh-flagw.on::before { clip-path: none; inset: -.5cqh; border-radius: 2.3cqh; }
.qh-side .qh-bub { top: -1.6cqh; right: 1cqh; }
.qh-side .qh-tray[hidden] { display: none; }
.qh-side .qh-emos { display: flex; }
.qh-flag .gm-cnt { grid-area: cnt; display: inline-flex; align-items: center; gap: .5cqh; font: 600 1.3cqh var(--font); color: #E8D5B4; white-space: nowrap; }
.qh-flag .gm-cnt svg { width: 2.2cqh; height: 2.3cqh; overflow: visible; }
.qh-flag .gm-cnt b { font: 800 1.7cqh/1 var(--font); color: #FFF6E6; }
.qh-chat h4 span i { font-style: normal; }
/* 多人局（跳棋）：右栏一排紧凑的身份牌 */
.qh-multi .qh-flags { display: flex; flex-direction: column; gap: 1cqh; min-height: 0; overflow-y: auto; overflow-x: visible; padding: .6cqh .6cqh .6cqh 0; }
.qh-multi .qh-flag { padding: .8cqh 1.2cqh; row-gap: .2cqh; }
.qh-multi .qh-flag .av { width: 4.8cqh; height: 4.8cqh; }
.qh-multi .qh-flag b { font-size: 1.6cqh; }
.qh-multi .qh-flag .st { height: 3cqh; font: 800 1.4cqh/3cqh var(--font); padding: 0 1.1cqh; }
.qh-multi .qh-flagw.gone { opacity: .45; }
.qh-multi .qh-flag { grid-template-columns: auto minmax(0, 1fr) auto; grid-template-areas: "av b st" "av cnt st"; }
.qh-multi .qh-flag .sd { display: none; }
.qh-multi .qh-flag b { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
.qh-multi .qh-flag .st { white-space: nowrap; }
.qh-flag .tq-cnt em { display: block; width: 1.6cqh; height: 1.6cqh; border-radius: 50%; box-shadow: inset -.2cqh -.3cqh .4cqh rgba(0, 0, 0, .3), inset .2cqh .2cqh .3cqh rgba(255, 255, 255, .5); }
.qh-flag .tq-cnt { grid-area: cnt; display: inline-flex; align-items: center; gap: .6cqh; font: 600 1.3cqh var(--font); color: #E8D5B4; white-space: nowrap; }
.qh-flag .tq-cnt i { display: block; width: 6cqh; height: .7cqh; border-radius: .4cqh; background: rgba(255, 255, 255, .18); overflow: hidden; }
.qh-flag .tq-cnt i u { display: block; height: 100%; border-radius: .4cqh; }
.qh-flag .tq-cnt b { font: 800 1.5cqh/1 var(--font); color: #FFF6E6; }
.qh-plaque .tq-emb { font-style: normal; color: #3B7DD8; margin-right: .6cqh; }
.spot .emblem .tt-emb { display: block; width: 26px; height: 26px; background: conic-gradient(#47D6F2 0 25%, #FFD54A 0 50%, #FF6680 0 75%, #B47BFF 0); border-radius: 5px; box-shadow: inset 0 0 0 2px rgba(255,255,255,.5); }
.spot .emblem .tq-emb { font-style: normal; font: 700 26px/1 var(--font); color: #3B7DD8; }
.qh-svg.can-move .tq-mine { cursor: pointer; }
.tq-dest { cursor: pointer; }
.tq-m { transition: transform .16s ease-in-out; }
.tq-m.sel .lift { transform: translateY(-4px); }
.tq-dest.jump { animation: tqPulse 1.2s ease-in-out infinite; transform-box: fill-box; transform-origin: center; }
@keyframes tqPulse { 50% { transform: scale(1.12); } }
/* 很窄的时候：两边栏全藏，只留棋盘；悔棋/求和/认输挪到右上角，轮到谁写在左上角 */
.qh-mini, .qh-ministat { display: none; }
@container (max-aspect-ratio: 13/10) or (max-width: 760px) {
  .qh-box { top: 50%; width: min(96cqw, 80cqh); height: min(84cqh, 112cqw); padding: 1.2cqw; border-radius: 2.4cqw; }
  .qh-page { grid-template-columns: minmax(0, 1fr); padding: 3cqh 2cqw 3cqh; border-radius: 1.8cqw; }
  .qh-page > .qh-rail, .qh-rings { display: none; }
  .qh-side .qh-box { width: min(96cqw, 80cqh); height: min(84cqh, calc(92cqw + 6.6cqh)); }
  .qh-side .qh-page { grid-template-columns: minmax(0, 1fr); padding: 3cqh 2cqw; }
  .qh-mini { display: flex; gap: 1cqh; }
  .qh-rb:disabled { opacity: .45; cursor: default; }
  .qh-rb.d { background: #FBE1DC; color: #B8432F; }
  .qh-ministat { display: inline-flex; align-items: center; height: 5.4cqh; padding: 0 2cqh; border-radius: 2.7cqh; background: var(--cr); color: var(--br); font: 800 1.9cqh var(--font); box-shadow: 0 .4cqh 0 rgba(120, 95, 55, .25); white-space: nowrap; max-width: 40cqw; overflow: hidden; text-overflow: ellipsis; }
  .qh-ministat.on { background: #F5C94E; color: #6E500A; }
  .qh-ministat.off { display: none; }
  .qh-ask { left: 50% !important; right: auto !important; top: 14cqh !important; margin-left: -15cqh; }
  .qh-ask::before { display: none; }
}
/* 下象棋时把乐园的 HUD 藏起来，棋盒自己有返回和离开 */
body:has(#game.qh-on:not(.hidden)) .hud > * { visibility: hidden; }
/* 象棋：和电脑玩时挑难度 */
.acts:has(.lvpick) { flex-wrap: wrap; }
.lvpick { flex-basis: 100%; display: flex; align-items: center; gap: 6px; }
.lvpick > span { font-size: 12px; color: var(--ink-3, #8a7a62); white-space: nowrap; margin-right: 2px; }
.lvpick .btn { flex: 1; padding-left: 0; padding-right: 0; }
/* 五子棋（棋盒） */
.qh-plaque i.gm-emb { background: radial-gradient(circle at 35% 30%, #77777C, #18181B 70%); box-shadow: inset 0 0 0 .2cqh rgba(255, 255, 255, .15); }
.gm-st.drop .lift { animation: gmDrop .18s cubic-bezier(.5, 0, .9, .6); }
.gm-st.drop .sh { animation: gmDropSh .18s ease-in; }
@keyframes gmDrop { from { transform: translateY(-9px) scale(1.14); opacity: .3; } }
@keyframes gmDropSh { from { opacity: 0; transform: scale(1.3); } }
.gm-st.win .lift { animation: gmWin .5s var(--d, 0s) cubic-bezier(.34, 1.56, .64, 1) both; }
.gm-st.win .lift > circle { stroke: #F5C94E; stroke-opacity: 1; stroke-width: 3; }
@keyframes gmWin { 0% { transform: scale(1); } 50% { transform: scale(1.18); } 100% { transform: scale(1.06); } }
.gm-wl { stroke: #E0473C; stroke-width: 4.5; stroke-linecap: round; opacity: .85; stroke-dasharray: 1; animation: gmLine .5s .65s ease-out both; pointer-events: none; }
@keyframes gmLine { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }
.gm-last { pointer-events: none; }
.gm-ghost { opacity: .45; pointer-events: none; }
/* 下棋时左上角一直在的「收起 / 展开」按钮；收起时乐园左上的头像卡往右让一让 */
.qh-toggle { position: fixed; left: 20px; top: 20px; z-index: 60; display: inline-flex; align-items: center; gap: 6px; height: 44px; padding: 0 18px 0 14px; border: 0; border-radius: 22px; background: #FFF9EC; color: #6B5740; font: 800 15px var(--font); box-shadow: 0 4px 0 rgba(120, 95, 55, .25), 0 8px 18px -8px rgba(40, 25, 10, .45); cursor: pointer; }
.qh-toggle svg { width: 20px; height: 20px; }
.qh-toggle.open .up, .qh-toggle:not(.open) .dn { display: none; }
.qh-toggle .dot { display: none; width: 8px; height: 8px; border-radius: 50%; background: #E0473C; }
.qh-toggle.attn { background: #F5C94E; color: #6E500A; animation: qhBreathe2 1.4s ease-in-out infinite; }
.qh-toggle.attn .dot { display: block; }
@keyframes qhBreathe2 { 50% { box-shadow: 0 4px 0 rgba(120, 95, 55, .25), 0 0 0 7px rgba(245, 201, 78, .35); } }
.qh-toggle.hidden { display: none; }
body.qh-min .mecard { left: 132px; }
.qh-tl { left: 124px; }

/* ================= UNO 马戏团牌桌（对照 设计/UNO牌桌.html；类名都带 ut- 前缀，免得和乐园界面冲突） ================= */
.ut { position: relative; width: 100%; height: 100%; container-type: size; overflow: hidden;
  --ink: #23140C; --cream: #FFF6E3; --paper: #FFF9EC; --r: #E2412F; --y: #F6B71E; --g: #35A158; --b: #2F7FD8; --k: #1F1A1A;
  --comic: "ZCOOL KuaiLe", "PingFang SC", sans-serif; --num: "Lilita One", "Arial Black", sans-serif; }
.ut-stage { --u: min(1cqh, .6cqw); --hh: clamp(118px, calc(var(--u) * 22), 168px); position: absolute; inset: 0; overflow: hidden; user-select: none; font-family: var(--font); background: #8E1A12; }
.ut button { font-family: inherit; }
.ut-stage .ut-chatp { position: absolute; right: calc(var(--u) * 9); top: calc(var(--u) * 10); width: min(300px, 70cqw); padding: 12px; border-radius: 16px; background: var(--paper); border: 3px solid var(--ink); box-shadow: 5px 6px 0 var(--ink); z-index: 26; display: none; }
.ut-stage .ut-chatp.ut-on { display: block; }
.ut-chatp .ut-emos { display: flex; gap: 6px; margin-bottom: 8px; }
.ut-chatp .ut-emos button { flex: 1; height: 36px; border: 2px solid var(--ink); border-radius: 10px; background: #fff; font-size: 18px; cursor: pointer; }
.ut-chatp form { display: flex; gap: 6px; }
.ut-chatp input { flex: 1; min-width: 0; height: 36px; padding: 0 12px; border: 2px solid var(--ink); border-radius: 18px; font: 500 14px var(--font); outline: none; }
.ut-chatp form button { height: 36px; padding: 0 14px; border: 2px solid var(--ink); border-radius: 18px; background: var(--y); font: 800 14px var(--font); cursor: pointer; }
.ut-bub { position: absolute; left: 50%; bottom: calc(100% + var(--u) * 4.4); transform: translateX(-50%); max-width: calc(var(--u) * 30); padding: calc(var(--u) * .6) calc(var(--u) * 1.6); border-radius: calc(var(--u) * 2); background: #fff; border: calc(var(--u) * .3) solid var(--ink); font: 700 calc(var(--u) * 1.8)/1.3 var(--font); color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; z-index: 8; animation: ut_pop .25s cubic-bezier(.34, 1.56, .64, 1); }
.ut-float { position: absolute; z-index: 45; font-size: calc(var(--u) * 5); pointer-events: none; animation: ut_rise 2.2s ease-out forwards; }
@keyframes ut_rise { from { opacity: 0; transform: translateY(0) scale(.6); } 15% { opacity: 1; transform: translateY(-2cqh) scale(1.1); } to { opacity: 0; transform: translateY(-16cqh); } }
.ut-go { position: absolute; left: 50%; bottom: calc(var(--hh) + var(--u) * 11); transform: translateX(-50%); z-index: 20; padding: calc(var(--u) * 1.2) calc(var(--u) * 3.6); border: calc(var(--u) * .45) solid var(--ink); border-radius: calc(var(--u) * 4); background: var(--y); font: calc(var(--u) * 3)/1 var(--comic); color: var(--ink); box-shadow: 0 calc(var(--u) * .6) 0 var(--ink); cursor: pointer; white-space: nowrap; animation: ut_pop .25s cubic-bezier(.34, 1.56, .64, 1); }
.ut-go small { font: 700 calc(var(--u) * 1.6) var(--font); margin-left: calc(var(--u) * 1); }
.ut-go[hidden] { display: none; }
/* ---------- 背景：马戏团大棚里的放射线 + 聚光 ---------- */
.ut-bg { position: absolute; left: 50%; top: 52%; width: 260vmax; height: 260vmax; background:
  radial-gradient(circle at 50% 50%, rgba(255, 210, 120, .32), transparent 14%),
  repeating-conic-gradient(from 0deg at 50% 50%, #C42D20 0 6deg, #A01D14 6deg 12deg);
  transform: translate(-50%, -50%); animation: ut_spinc 160s linear infinite; } /* 放射线铺满整屏，转的时候四角也不露底 */
@keyframes ut_spinc { to { transform: translate(-50%, -50%) rotate(360deg); } }
.ut-vig { position: absolute; inset: 0; background: radial-gradient(ellipse 90% 85% at 50% 55%, transparent 60%, rgba(20, 6, 2, .5)); pointer-events: none; }
@keyframes utSpin { to { transform: rotate(360deg); } }
/* 牌桌：倾斜的圆台，奶油色边 + 红绒面 */
.ut-table { position: absolute; left: 50%; top: 53%; width: calc(var(--u) * 132); height: calc(var(--u) * 132); transform: translate(-50%, -50%) perspective(calc(var(--u) * 150)) rotateX(58deg); border-radius: 50%;
  background: radial-gradient(circle at 50% 45%, #D23A2A, #A3241A 62%, #7E170F 70%, #FFF1D6 70.5%, #F5DDB0 74%, #C99A5B 74.5%, #8E5E2C 76%, transparent 76.5%);
  box-shadow: 0 calc(var(--u) * 6) calc(var(--u) * 10) rgba(0, 0, 0, .45); }
.ut-table::after { content: ""; position: absolute; inset: 0; border-radius: 50%; background: repeating-radial-gradient(circle at 50% 50%, transparent 0 calc(var(--u) * 3), rgba(0, 0, 0, .05) calc(var(--u) * 3) calc(var(--u) * 3.3)); mask: radial-gradient(circle, #000 0 69%, transparent 70%); }

/* ---------- 方向箭头：两段弧，跟着当前颜色变色，按出牌方向慢慢转 ---------- */
.ut-dir { position: absolute; left: 50%; top: 52%; width: calc(var(--u) * 64); height: calc(var(--u) * 46); transform: translate(-50%, -50%); pointer-events: none; }
.ut-dir svg { width: 100%; height: 100%; overflow: visible; transition: transform .45s cubic-bezier(.5, -.4, .4, 1.4); }
.ut-dir.ccw svg { transform: scaleX(-1); } /* 反方向就左右镜像，箭头跟着掉头 */
.ut-dir .ut-arc { fill: none; stroke: var(--cur, var(--y)); stroke-width: 7; stroke-linecap: round; }
.ut-dir .ut-flow { fill: none; stroke: rgba(255, 255, 255, .55); stroke-width: 2.4; stroke-linecap: round; stroke-dasharray: 6 16; animation: ut_flow 1.1s linear infinite; }
@keyframes ut_flow { to { stroke-dashoffset: -22; } }
.ut-dir .ut-arc-o { fill: none; stroke: var(--ink); stroke-width: 12; stroke-linecap: round; }
.ut-dir .ut-head { fill: var(--cur, var(--y)); stroke: var(--ink); stroke-width: 2.6; stroke-linejoin: round; }
.ut-dir.ut-flip { animation: ut_flip .5s ease-out; }
@keyframes ut_flip { 40% { transform: translate(-50%, -50%) scale(1.18); } }

/* ---------- 牌 ---------- */
.ut-card { --w: calc(var(--h) * .68); position: absolute; width: var(--w); height: var(--h); border-radius: calc(var(--h) * .085); background: #fff; box-shadow: 0 0 0 calc(var(--h) * .012) var(--ink), 0 calc(var(--h) * .03) 0 rgba(35, 20, 12, .35), 0 calc(var(--h) * .06) calc(var(--h) * .08) rgba(0, 0, 0, .25); }
.ut-card .ut-in { position: absolute; inset: 5.5%; border-radius: calc(var(--h) * .06); background: var(--cc); overflow: hidden; }
.ut-card .ut-in::before { content: ""; position: absolute; left: 50%; top: 50%; width: 92%; height: 62%; transform: translate(-50%, -50%) rotate(-32deg); border-radius: 50%; background: #fff; box-shadow: inset 0 0 0 calc(var(--h) * .012) rgba(0, 0, 0, .08); }
.ut-card .ut-in::after { content: ""; position: absolute; inset: 0; background: linear-gradient(135deg, rgba(255, 255, 255, .25), transparent 40%, rgba(0, 0, 0, .12)); pointer-events: none; }
.ut-card .ut-big, .ut-card .ut-ci { position: absolute; font-family: var(--num); color: var(--cc); -webkit-text-stroke: calc(var(--h) * .012) var(--ink); paint-order: stroke fill; line-height: 1; }
.ut-card .ut-big { left: 50%; top: 50%; transform: translate(-50%, -52%); font-size: calc(var(--h) * .44); text-shadow: calc(var(--h) * .02) calc(var(--h) * .024) 0 var(--ink); z-index: 1; }
.ut-card .ut-ci { color: #fff; font-size: calc(var(--h) * .15); z-index: 1; }
.ut-card .ut-ci.ut-tl { left: 9%; top: 6%; } .ut-card .ut-ci.ut-br { right: 9%; bottom: 6%; transform: rotate(180deg); }
.ut-card .ut-big svg { width: calc(var(--h) * .42); height: calc(var(--h) * .42); display: block; filter: drop-shadow(calc(var(--h) * .02) calc(var(--h) * .024) 0 var(--ink)); }
.ut-card .ut-ci svg { width: calc(var(--h) * .15); height: calc(var(--h) * .15); display: block; }
.ut-card.ut-w .ut-in { background: var(--k); }
.ut-card.ut-w .ut-in::before { background: conic-gradient(from -32deg, var(--r) 0 25%, var(--b) 0 50%, var(--y) 0 75%, var(--g) 0); box-shadow: 0 0 0 calc(var(--h) * .014) #fff; }
.ut-card.ut-w .ut-big { color: #fff; }
.ut-card.ut-w.ut-chosen .ut-in { box-shadow: inset 0 0 0 calc(var(--h) * .045) var(--pick); }
/* 牌背：我们自己的「乐园」牌背 */
.ut-card.ut-back .ut-in { background: repeating-linear-gradient(135deg, #2A1B3D 0 8%, #33224A 8% 16%); }
.ut-card.ut-back .ut-in::before { background: radial-gradient(circle at 42% 38%, #F0584A, #C42D20); box-shadow: 0 0 0 calc(var(--h) * .014) var(--ink), inset 0 0 0 calc(var(--h) * .035) #F6B71E, inset 0 0 0 calc(var(--h) * .05) var(--ink); width: 82%; height: 50%; } /* 牌背：只有一个红黄椭圆，不写字 */

/* ---------- 牌堆 ---------- */
.ut-pile { position: absolute; left: 50%; top: 50%; --h: clamp(104px, calc(var(--u) * 20), 150px); }
.ut-pile .ut-card { left: calc(var(--h) * -.34); top: calc(var(--h) * -.5); transition: transform .2s; }
.ut-deck { position: absolute; left: calc(50% - var(--u) * 24); top: calc(50% - var(--u) * 6); --h: clamp(80px, calc(var(--u) * 15), 112px); width: calc(var(--h) * .68); height: var(--h); cursor: default; transform: rotate(-14deg); }
.ut-deck .ut-card { left: 0; }
.ut-deck .ut-card:nth-child(1) { top: calc(var(--u) * 1.6); } .ut-deck .ut-card:nth-child(2) { top: calc(var(--u) * .8); } .ut-deck .ut-card:nth-child(3) { top: 0; }
.ut-deck.ut-can { cursor: pointer; }
.ut-deck.ut-can .ut-card:last-of-type { animation: ut_nudge 1.2s ease-in-out infinite; box-shadow: 0 0 0 calc(var(--u) * .3) var(--ink), 0 0 0 calc(var(--u) * 1) #FFE07A, 0 calc(var(--u) * 1) calc(var(--u) * 3) rgba(0, 0, 0, .4); }
@keyframes ut_nudge { 50% { transform: translateY(calc(var(--u) * -1)); } }
.ut-deck .ut-lbl { position: absolute; left: 50%; bottom: calc(var(--u) * -4.6); transform: translateX(-50%) rotate(14deg); white-space: nowrap; font: 700 calc(var(--u) * 1.9) var(--font); color: #FFE9C0; text-shadow: 0 1px 2px rgba(0, 0, 0, .6); }
.ut-deck.ut-can .ut-lbl { color: #FFE07A; }
/* 叠加中的罚牌数 */
.ut-stackb { position: absolute; left: calc(50% + var(--u) * 13); top: calc(50% - var(--u) * 15); width: calc(var(--u) * 13); height: calc(var(--u) * 13); display: grid; place-items: center; pointer-events: none; transform: scale(0); transition: transform .3s cubic-bezier(.34, 1.56, .64, 1); }
.ut-stackb.ut-on { transform: scale(1) rotate(8deg); }
.ut-stackb svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.ut-stackb b { position: relative; font: calc(var(--u) * 4.4)/1 var(--num); color: #fff; -webkit-text-stroke: calc(var(--u) * .35) var(--ink); paint-order: stroke fill; }
.ut-stackb.ut-bump { animation: ut_bump .35s; }
@keyframes ut_bump { 40% { transform: scale(1.35) rotate(-6deg); } }

/* ---------- 玩家 ---------- */
.ut-seat { position: absolute; transform: translate(-50%, -50%); }
.ut-ava { position: relative; width: calc(var(--u) * 11); height: calc(var(--u) * 11); }
.ut-ava .ut-burst { position: absolute; inset: -60%; opacity: 0; transition: opacity .25s; pointer-events: none; }
.ut-ava .ut-burst svg { width: 100%; height: 100%; animation: utSpin 6s linear infinite; }
.ut-seat.ut-on .ut-ava .ut-burst { opacity: 1; }
.ut-ava .ut-fr { position: absolute; inset: 0; transform: rotate(-5deg); border-radius: calc(var(--u) * 1.2); background: var(--sc, #7FC4F0); box-shadow: 0 0 0 calc(var(--u) * .5) #fff, 0 0 0 calc(var(--u) * .9) var(--ink), calc(var(--u) * .7) calc(var(--u) * .9) 0 calc(var(--u) * .9) rgba(0, 0, 0, .35); overflow: hidden; transition: transform .25s; }
.ut-seat.ut-on .ut-ava .ut-fr { transform: rotate(-5deg) scale(1.1); animation: ut_bob .9s ease-in-out infinite; }
@keyframes ut_bob { 50% { transform: rotate(-2deg) scale(1.13); } }
.ut-ava img { width: 120%; margin: -4% -10% 0; display: block; }
.ut-ava .ut-nm { position: absolute; left: calc(var(--u) * -1); top: calc(var(--u) * -3.8); padding: calc(var(--u) * .3) calc(var(--u) * 2.6) calc(var(--u) * .3) calc(var(--u) * 1); background: linear-gradient(90deg, #2E8FD0, #57B4E8 70%, rgba(87, 180, 232, 0)); color: #fff; font: 800 calc(var(--u) * 1.9)/1.2 var(--font); white-space: nowrap; text-shadow: 0 1px 0 rgba(0, 0, 0, .35); clip-path: polygon(0 0, 100% 0, 92% 100%, 0 100%); }
.ut-seat.ut-me .ut-ava .ut-nm { background: linear-gradient(90deg, #E5932A, #F6B71E 70%, rgba(246, 183, 30, 0)); }
.ut-ava .ut-cnt { position: absolute; left: calc(100% + var(--u) * 1.6); bottom: 0; display: flex; align-items: center; gap: calc(var(--u) * .4); font: calc(var(--u) * 3.8)/1 var(--num); color: #fff; -webkit-text-stroke: calc(var(--u) * .3) var(--ink); paint-order: stroke fill; }
.ut-ava .ut-cnt i { width: calc(var(--u) * 2.4); height: calc(var(--u) * 3.2); border-radius: calc(var(--u) * .35); background: #fff; box-shadow: 0 0 0 calc(var(--u) * .25) var(--ink), calc(var(--u) * .5) calc(var(--u) * -.5) 0 calc(var(--u) * -.0) #fff, calc(var(--u) * .5) calc(var(--u) * -.5) 0 calc(var(--u) * .25) var(--ink); }
.ut-ava .ut-bang { position: absolute; left: 50%; bottom: calc(var(--u) * -2.4); transform: translateX(-50%) scale(0); width: calc(var(--u) * 4.6); height: calc(var(--u) * 4.6); display: grid; place-items: center; transition: transform .3s cubic-bezier(.34, 1.56, .64, 1); }
.ut-ava .ut-bang svg { position: absolute; inset: 0; }
.ut-ava .ut-bang b { position: relative; font: calc(var(--u) * 2.6)/1 var(--num); color: #fff; -webkit-text-stroke: calc(var(--u) * .25) var(--ink); paint-order: stroke fill; }
.ut-seat.ut-one .ut-ava .ut-bang { transform: translateX(-50%) scale(1); }
/* 对手的牌背扇形：放在头像和牌堆之间 */
.ut-fan { position: absolute; width: 0; height: 0; --h: calc(var(--u) * 8.5); pointer-events: none; }
.ut-fan > div { position: absolute; left: 0; top: 0; }
.ut-fan .ut-card { left: calc(var(--h) * -.34); top: calc(var(--h) * -.5); transform-origin: 50% 150%; }
/* 抓人按钮 */
.ut-catch { position: absolute; left: 50%; top: calc(100% + var(--u) * 3.2); transform: translateX(-50%); padding: calc(var(--u) * .8) calc(var(--u) * 2.4); border: calc(var(--u) * .4) solid var(--ink); border-radius: calc(var(--u) * 3); background: var(--y); font: calc(var(--u) * 2.6)/1 var(--comic); color: var(--ink); cursor: pointer; box-shadow: 0 calc(var(--u) * .5) 0 var(--ink); animation: ut_wiggle .5s ease-in-out infinite; white-space: nowrap; z-index: 5; }
@keyframes ut_wiggle { 25% { transform: translateX(-50%) rotate(-6deg); } 75% { transform: translateX(-50%) rotate(6deg); } }

/* ---------- 我的手牌 ---------- */
.ut-hand { position: absolute; left: 50%; bottom: calc(var(--u) * 2); --h: var(--hh); height: var(--h); transform: translateX(-50%); }
.ut-hand .ut-card { bottom: 0; transition: transform .22s cubic-bezier(.3, .7, .3, 1), filter .2s, left .25s; cursor: default; }
.ut-hand.ut-turn .ut-card.ut-dim { filter: brightness(.55) saturate(.7); }
.ut-hand .ut-card.ut-ok { cursor: pointer; transform: translateY(calc(var(--u) * -2.6)); }
.ut-hand .ut-card.ut-ok:hover { transform: translateY(calc(var(--u) * -5.5)) scale(1.04); z-index: 50 !important; }
.ut-hand .ut-card.ut-new { animation: ut_newc .5s ease-out; }
.ut-hand .ut-card.ut-sel { cursor: pointer; transform: translateY(calc(var(--u) * -6)); box-shadow: 0 0 0 calc(var(--h) * .012) var(--ink), 0 0 0 calc(var(--u) * .9) #FFE07A, 0 calc(var(--u) * 1) calc(var(--u) * 2.4) rgba(0, 0, 0, .4); }
.ut-hand .ut-card.ut-pair { cursor: pointer; transform: translateY(calc(var(--u) * -2.6)); } /* 同数字、可以一起出的牌 */
@keyframes ut_newc { from { filter: brightness(1.6); } }
.ut-turnTip { position: absolute; left: 50%; bottom: calc(var(--hh) + var(--u) * 6); transform: translateX(-50%) scale(0); padding: calc(var(--u) * .7) calc(var(--u) * 2.4); border-radius: calc(var(--u) * 3); background: var(--y); border: calc(var(--u) * .35) solid var(--ink); font: calc(var(--u) * 2.4)/1.1 var(--comic); color: var(--ink); white-space: nowrap; box-shadow: 0 calc(var(--u) * .5) 0 var(--ink); transition: transform .25s cubic-bezier(.34, 1.56, .64, 1); pointer-events: none; }
.ut-turnTip.ut-on { transform: translateX(-50%) scale(1); }

/* UNO 大按钮 / 不出了 */
.ut-acts { position: absolute; right: calc(var(--u) * 5); bottom: calc(var(--u) * 6); display: flex; flex-direction: column; align-items: center; gap: calc(var(--u) * 2); }
.ut-unoBtn { position: relative; width: calc(var(--u) * 15); height: calc(var(--u) * 15); border: 0; background: none; cursor: pointer; transform: scale(0); transition: transform .3s cubic-bezier(.34, 1.56, .64, 1); }
.ut-unoBtn.ut-on { transform: scale(1); animation: ut_pulse 1s ease-in-out infinite; }
.ut-unoBtn svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.ut-unoBtn b { position: relative; font: calc(var(--u) * 4.6)/1 var(--num); color: var(--y); -webkit-text-stroke: calc(var(--u) * .45) var(--ink); paint-order: stroke fill; transform: rotate(-8deg); display: inline-block; }
@keyframes ut_pulse { 50% { transform: scale(1.08) rotate(3deg); } }
.ut-pill { padding: calc(var(--u) * 1) calc(var(--u) * 2.6); border: calc(var(--u) * .35) solid var(--ink); border-radius: calc(var(--u) * 3); background: var(--paper); font: 800 calc(var(--u) * 2)/1 var(--font); color: var(--ink); cursor: pointer; box-shadow: 0 calc(var(--u) * .5) 0 var(--ink); }
.ut-pill[hidden] { display: none; }

/* 选颜色：四色转盘 */
.ut-picker { position: absolute; left: 50%; top: 50%; width: calc(var(--u) * 30); height: calc(var(--u) * 30); transform: translate(-50%, -50%) scale(0); transition: transform .28s cubic-bezier(.34, 1.56, .64, 1); z-index: 30; border-radius: 50%; box-shadow: 0 0 0 calc(var(--u) * .6) var(--ink), 0 calc(var(--u) * 1) 0 calc(var(--u) * .6) var(--ink), 0 0 0 100vmax rgba(20, 6, 2, .45); }
.ut-picker.ut-on { transform: translate(-50%, -50%) scale(1); }
.ut-picker button { position: absolute; width: 50%; height: 50%; border: calc(var(--u) * .3) solid var(--ink); cursor: pointer; font: calc(var(--u) * 2.6)/1 var(--comic); color: #fff; -webkit-text-stroke: calc(var(--u) * .2) var(--ink); paint-order: stroke fill; transition: filter .15s; }
.ut-picker button:hover { filter: brightness(1.15); }
.ut-picker [data-c=r] { left: 0; top: 0; background: var(--r); border-radius: 100% 0 0 0; }
.ut-picker [data-c=b] { right: 0; top: 0; background: var(--b); border-radius: 0 100% 0 0; }
.ut-picker [data-c=g] { left: 0; bottom: 0; background: var(--g); border-radius: 0 0 0 100%; }
.ut-picker [data-c=y] { right: 0; bottom: 0; background: var(--y); border-radius: 0 0 100% 0; }
.ut-picker i { position: absolute; left: 50%; top: 50%; width: 34%; height: 34%; transform: translate(-50%, -50%); border-radius: 50%; background: var(--paper); border: calc(var(--u) * .4) solid var(--ink); display: grid; place-items: center; font: 800 calc(var(--u) * 1.9)/1.2 var(--font); color: var(--ink); font-style: normal; text-align: center; pointer-events: none; }

/* 爆炸字 */
.ut-bam { position: absolute; width: calc(var(--u) * 16); height: calc(var(--u) * 16); transform: translate(-50%, -50%) scale(0) rotate(-12deg); display: grid; place-items: center; pointer-events: none; z-index: 40; animation: ut_bam 1.15s cubic-bezier(.3, 1.5, .5, 1) forwards; }
.ut-bam svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.ut-bam b { position: relative; font: calc(var(--u) * 3.6)/1 var(--comic); color: #fff; -webkit-text-stroke: calc(var(--u) * .35) var(--ink); paint-order: stroke fill; white-space: nowrap; transform: rotate(-6deg); }
@keyframes ut_bam { 18% { transform: translate(-50%, -50%) scale(1.15) rotate(-6deg); opacity: 1; } 30%, 75% { transform: translate(-50%, -50%) scale(1) rotate(-8deg); opacity: 1; } to { transform: translate(-50%, -50%) scale(.9) rotate(-8deg); opacity: 0; } }
.ut-fly { position: absolute; z-index: 35; transition: transform .38s cubic-bezier(.3, .6, .25, 1); pointer-events: none; }

/* 角上：收起 / 离开 / 聊天（和棋盒一致） */
.ut-corner { position: absolute; top: calc(var(--u) * 2.4); display: flex; gap: calc(var(--u) * 1); z-index: 20; }
.ut-corner.ut-l { left: calc(var(--u) * 2.4); } .ut-corner.ut-r { right: calc(var(--u) * 2.4); }
.ut-rb { display: inline-flex; align-items: center; gap: calc(var(--u) * .6); height: calc(var(--u) * 5.4); padding: 0 calc(var(--u) * 2); border: calc(var(--u) * .3) solid var(--ink); border-radius: calc(var(--u) * 2.7); background: var(--paper); color: var(--ink); font: 800 calc(var(--u) * 1.8) var(--font); box-shadow: 0 calc(var(--u) * .45) 0 var(--ink); cursor: pointer; }
.ut-rb.ut-ic { width: calc(var(--u) * 5.4); padding: 0; justify-content: center; }
.ut-rb svg { width: calc(var(--u) * 2.4); height: calc(var(--u) * 2.4); }
.ut-chatb { position: absolute; right: calc(var(--u) * 2.4); top: calc(var(--u) * 10); }
.ut-chatb .ut-rb { width: calc(var(--u) * 5.4); padding: 0; justify-content: center; font-size: calc(var(--u) * 2.4); }
.ut-logo { position: absolute; left: 140px; top: calc(var(--u) * 1.6); transform: rotate(-4deg); font: calc(var(--u) * 4.4)/1 var(--num); color: var(--y); -webkit-text-stroke: calc(var(--u) * .45) var(--ink); paint-order: stroke fill; text-shadow: calc(var(--u) * .4) calc(var(--u) * .5) 0 var(--ink); letter-spacing: .04em; pointer-events: none; }
.ut-logo small { display: block; text-align: center; font: calc(var(--u) * 1.7)/1.3 var(--comic); color: #fff; -webkit-text-stroke: calc(var(--u) * .2) var(--ink); letter-spacing: .3em; text-shadow: none; }
.ut-rules { display: none; position: absolute; inset: 0; z-index: 70; background: rgba(20, 6, 2, .55); place-items: center; }
.ut-rules.ut-on { display: grid; }
.ut-rules .ut-sheet { position: relative; width: min(680px, 92%); max-height: 86%; overflow-y: auto; padding: 26px 30px 22px; border-radius: 22px; background: var(--paper); border: 4px solid var(--ink); box-shadow: 8px 10px 0 var(--ink); color: #3B2A1C; font: 500 15px/1.75 var(--font); animation: ut_pop .3s cubic-bezier(.34, 1.56, .64, 1); scrollbar-width: thin; }
.ut-rules h2 { margin: 0 0 4px; font: 30px/1.2 var(--comic); color: var(--r); -webkit-text-stroke: 1px var(--ink); }
.ut-rules .ut-lead { margin: 0 0 14px; color: #7A6550; }
.ut-rules h3 { margin: 18px 0 6px; font: 800 17px/1.4 var(--font); color: var(--ink); display: flex; align-items: center; gap: 8px; }
.ut-rules h3 i { font-style: normal; display: inline-grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; background: var(--y); border: 2px solid var(--ink); font: 14px/1 var(--num); }
.ut-rules p { margin: 4px 0; }
.ut-rules ul { margin: 4px 0; padding-left: 1.2em; }
.ut-rules li { margin: 3px 0; }
.ut-rules b { color: var(--ink); }
.ut-rules .ut-eg { margin: 6px 0; padding: 8px 12px; border-radius: 10px; background: #F4ECDA; color: #5C4A33; font-size: 14px; }
.ut-rules .ut-tbl { display: grid; grid-template-columns: 78px 1fr; gap: 8px 12px; align-items: center; margin: 8px 0; }
.ut-rules .ut-tbl .ut-card { position: relative; --h: 70px; }
.ut-rules .ut-x { position: sticky; top: 0; float: right; margin: -8px -12px 0 0; width: 36px; height: 36px; border-radius: 50%; border: 3px solid var(--ink); background: var(--y); font: 800 18px/1 var(--font); cursor: pointer; }

/* 结算 */
.ut-res { position: absolute; inset: 0; display: grid; place-items: center; background: rgba(20, 6, 2, .55); z-index: 60; }
.ut-res[hidden] { display: none; }
.ut-res .ut-dlg { position: relative; width: max(calc(var(--u) * 48), 380px); padding: calc(var(--u) * 4) calc(var(--u) * 3) calc(var(--u) * 3); border-radius: calc(var(--u) * 3); background: var(--paper); border: calc(var(--u) * .5) solid var(--ink); box-shadow: calc(var(--u) * 1) calc(var(--u) * 1.2) 0 var(--ink); text-align: center; animation: ut_pop .35s cubic-bezier(.34, 1.56, .64, 1); }
@keyframes ut_pop { from { transform: scale(.4); opacity: 0; } }
.ut-res img { width: calc(var(--u) * 14); height: calc(var(--u) * 14); border-radius: 50%; border: calc(var(--u) * .5) solid var(--ink); background: #CFE6F7; object-fit: cover; margin-top: calc(var(--u) * -11); }
.ut-res h3 { margin: calc(var(--u) * 1) 0 calc(var(--u) * .5); font: calc(var(--u) * 5.4)/1.1 var(--comic); color: var(--r); -webkit-text-stroke: calc(var(--u) * .3) var(--ink); paint-order: stroke fill; }
.ut-res p { margin: 0 0 calc(var(--u) * 2.4); font: 600 calc(var(--u) * 1.8) var(--font); color: #6B5740; }
.ut-res .ut-row { display: flex; gap: calc(var(--u) * 1.4); justify-content: center; }

@container (max-aspect-ratio: 1/1) {
  .ut-stage { --u: min(.66cqh, 1.15cqw); }
  .ut-table { top: 50%; }
  .ut-seat.ut-me { left: 12% !important; top: 74% !important; }
  .ut-stage { --hh: clamp(100px, calc(var(--u) * 20), 150px); }
  .ut-acts { right: calc(var(--u) * 2); bottom: calc(var(--hh) + var(--u) * 4); }
}

.ut-pill { white-space: nowrap; }

/* ---------- 方块雨（俄罗斯方块对战）：全屏霓虹街机 ---------- */
.tt { position: relative; width: 100%; height: 100%; container-type: size; overflow: hidden; color: #EDEBFF; font-family: var(--font); background: radial-gradient(120% 90% at 50% 10%, #2A2260 0%, #16123A 55%, #0B0920 100%); user-select: none; }
.tt-bg { position: absolute; inset: 0; pointer-events: none; background-image: linear-gradient(rgba(130, 120, 255, .07) 1px, transparent 1px), linear-gradient(90deg, rgba(130, 120, 255, .07) 1px, transparent 1px); background-size: 4.6cqh 4.6cqh; mask-image: radial-gradient(80% 70% at 50% 50%, #000 40%, transparent 100%); }
.tt-bg i { position: absolute; width: 3.4cqh; height: 3.4cqh; border-radius: .7cqh; opacity: .18; animation: ttRain 14s linear infinite; }
.tt-bg i:nth-child(1) { left: 6%; background: #47D6F2; animation-delay: -2s; } .tt-bg i:nth-child(2) { left: 18%; background: #FF6680; animation-delay: -9s; animation-duration: 18s; }
.tt-bg i:nth-child(3) { left: 33%; background: #FFD54A; animation-delay: -5s; } .tt-bg i:nth-child(4) { left: 71%; background: #62DE79; animation-delay: -12s; animation-duration: 16s; }
.tt-bg i:nth-child(5) { left: 84%; background: #B47BFF; animation-delay: -7s; } .tt-bg i:nth-child(6) { left: 94%; background: #FFA048; animation-delay: -1s; animation-duration: 20s; }
@keyframes ttRain { from { transform: translateY(-10cqh) rotate(0); } to { transform: translateY(110cqh) rotate(180deg); } }
.tt-top { position: absolute; left: 0; right: 0; top: 0; height: 9cqh; display: flex; align-items: center; justify-content: space-between; padding: 0 3cqh 0 15cqh; /* 左上角留给乐园的「收起」按钮 */ z-index: 3; }
.tt-logo { font: 900 3.6cqh/1 var(--font); letter-spacing: .4cqh; color: #fff; text-shadow: 0 0 1.4cqh #7B5CFF, 0 0 3cqh rgba(123, 92, 255, .6); }
.tt-logo small { display: block; margin-top: .5cqh; font: 700 1.2cqh/1 var(--font); letter-spacing: .5cqh; color: #59E3FF; text-shadow: none; }
.tt-lv { display: flex; flex-direction: column; align-items: center; gap: .4cqh; }
.tt-lv b { font: 800 2.2cqh/1 var(--font); color: #FFD54A; text-shadow: 0 0 1cqh rgba(255, 213, 74, .6); }
.tt-lv span { font-size: 1.4cqh; color: #A9A3E0; }
.tt-tr { display: flex; gap: 1cqh; }
.tt-btn { height: 4.4cqh; padding: 0 2.2cqh; border: 0; border-radius: 2.2cqh; background: rgba(255, 255, 255, .1); color: #EDEBFF; font: 700 1.6cqh/1 var(--font); cursor: pointer; box-shadow: inset 0 0 0 .15cqh rgba(255, 255, 255, .18); }
.tt-btn:hover { background: rgba(255, 255, 255, .18); }
.tt-btn.d { color: #FF8FA0; }
.tt-btn.p { background: linear-gradient(180deg, #8C6BFF, #6A4BE6); box-shadow: 0 .6cqh 1.6cqh -.6cqh rgba(123, 92, 255, .9); color: #fff; }
.tt-main { position: absolute; inset: 9cqh 2cqh 7cqh; display: flex; align-items: center; justify-content: center; gap: 2.4cqh; }
.tt-me { display: flex; align-items: flex-start; gap: 1.8cqh; }
.tt-side { display: flex; flex-direction: column; gap: 1.6cqh; width: 14cqh; }
.tt-box { padding: 1.2cqh; border-radius: 1.6cqh; background: rgba(15, 12, 40, .7); box-shadow: inset 0 0 0 .15cqh rgba(140, 120, 255, .35); }
.tt-box h4 { margin: 0 0 .8cqh; font: 800 1.4cqh/1 var(--font); letter-spacing: .3cqh; color: #A9A3E0; }
.tt-box h4 small { float: right; padding: .2cqh .6cqh; border-radius: .5cqh; background: rgba(255, 255, 255, .1); font-size: 1.1cqh; color: #ccc; }
.tt-hold { width: 100%; aspect-ratio: 3 / 2; display: block; }
.tt-next { width: 100%; aspect-ratio: 120 / 330; display: block; }
.tt-stats { display: grid; gap: 1cqh; }
.tt-stats div { padding: .9cqh 1.2cqh; border-radius: 1.2cqh; background: rgba(15, 12, 40, .55); }
.tt-stats small { display: block; font-size: 1.2cqh; color: #8F89C9; }
.tt-stats b { font: 900 2.4cqh/1.2 var(--font); color: #fff; font-variant-numeric: tabular-nums; }
.tt-keys { display: flex; flex-direction: column; gap: .7cqh; font-size: 1.25cqh; color: #8F89C9; }
.tt-keys kbd { display: inline-block; min-width: 2.2cqh; margin-right: .5cqh; padding: .2cqh .5cqh; border-radius: .5cqh; background: rgba(255, 255, 255, .1); color: #ddd; font: 700 1.15cqh/1.4 var(--font); text-align: center; }
.tt-well { position: relative; height: 76cqh; aspect-ratio: 1 / 2; padding: .6cqh; border-radius: 1.4cqh; background: rgba(8, 6, 26, .85); box-shadow: 0 0 0 .3cqh #6B4BFF, 0 0 2.4cqh rgba(107, 75, 255, .75), inset 0 0 3cqh rgba(0, 0, 0, .6); }
.tt-well.hit { animation: ttHit .4s; }
@keyframes ttHit { 30% { box-shadow: 0 0 0 .4cqh #FF5D73, 0 0 3.6cqh rgba(255, 93, 115, .9), inset 0 0 3cqh rgba(0, 0, 0, .6); transform: translateY(.6cqh); } }
.tt-cv { width: 100%; height: 100%; display: block; border-radius: .8cqh; }
.tt-meter { position: absolute; left: -2.2cqh; top: .6cqh; bottom: .6cqh; width: 1.1cqh; border-radius: .6cqh; background: rgba(255, 255, 255, .08); overflow: hidden; display: flex; align-items: flex-end; }
.tt-meter i { display: block; width: 100%; height: 0; background: linear-gradient(0deg, #FF5D73, #FFA048); transition: height .2s; }
.tt-meter.hot i { animation: ttBlink .5s infinite alternate; }
@keyframes ttBlink { to { filter: brightness(1.6); } }
.tt-fx { position: absolute; inset: 0; pointer-events: none; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1cqh; }
.tt-pop { font: 900 3.2cqh/1 var(--font); color: #fff; letter-spacing: .2cqh; text-shadow: 0 0 1.4cqh #7B5CFF; animation: ttPop 1.3s ease-out both; white-space: nowrap; }
.tt-pop.big { font-size: 5.4cqh; color: #FFD54A; text-shadow: 0 0 2cqh rgba(255, 213, 74, .9), 0 .4cqh 0 #B5541F; }
.tt-pop.cmb { font-size: 2.6cqh; color: #59E3FF; }
.tt-pop.sm { font-size: 2cqh; color: #FFB2C0; }
@keyframes ttPop { 0% { transform: scale(.4); opacity: 0; } 15% { transform: scale(1.12); opacity: 1; } 30% { transform: scale(1); } 80% { opacity: 1; } 100% { transform: translateY(-4cqh); opacity: 0; } }
.tt-cd { position: absolute; inset: 0; display: none; place-items: center; font: 900 14cqh/1 var(--font); color: #fff; text-shadow: 0 0 3cqh #7B5CFF; pointer-events: none; }
.tt-cd.on { display: grid; }
.tt-cd.go { animation: ttCd .9s ease-out both; }
@keyframes ttCd { 0% { transform: scale(1.6); opacity: 0; } 20% { transform: scale(1); opacity: 1; } 100% { transform: scale(.9); opacity: 0; } }
.tt-dead { position: absolute; inset: 0; display: none; flex-direction: column; align-items: center; justify-content: center; gap: 1.4cqh; border-radius: 1.4cqh; background: rgba(10, 8, 30, .55); pointer-events: none; }
.tt-dead.on { display: flex; }
.tt-dead b { font: 900 8cqh/1 var(--font); color: #FF5D73; text-shadow: 0 0 2.4cqh rgba(255, 93, 115, .8); }
.tt-dead.watch b { font-size: 4cqh; color: #A9A3E0; text-shadow: none; }
.tt-dead span { font-size: 1.6cqh; color: #D7D3FF; text-align: center; padding: 0 2cqh; }
.tt-opps { display: grid; grid-auto-flow: row; gap: 1.6cqh; align-content: center; }
.tt-op { width: 15cqh; padding: 1cqh; border-radius: 1.4cqh; background: rgba(15, 12, 40, .7); box-shadow: inset 0 0 0 .15cqh rgba(140, 120, 255, .3); transition: opacity .3s; }
.tt-op.dead { opacity: .55; }
.tt-op.hit { animation: ttHit .4s; }
.tt-oph { display: flex; align-items: center; gap: .8cqh; margin-bottom: .8cqh; }
.tt-oph img { width: 3cqh; height: 3cqh; border-radius: 50%; background: #FFF3DC; }
.tt-oph b { font-size: 1.4cqh; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tt-opb { position: relative; }
.tt-opb canvas { width: 100%; aspect-ratio: 1 / 2; display: block; border-radius: .6cqh; background: rgba(8, 6, 26, .8); }
.tt-opm { position: absolute; left: -1cqh; top: 0; bottom: 0; width: .6cqh; border-radius: .3cqh; background: rgba(255, 255, 255, .06); display: flex; align-items: flex-end; overflow: hidden; }
.tt-opm i { display: block; width: 100%; background: #FF5D73; }
.tt-ko { position: absolute; inset: 0; display: grid; place-items: center; font: 900 1.6cqh/1.2 var(--font); color: #FF8FA0; text-align: center; text-shadow: 0 0 1cqh rgba(0, 0, 0, .8); }
.tt-ops { margin-top: .6cqh; font-size: 1.2cqh; color: #8F89C9; text-align: center; }
.tt-shot { position: absolute; z-index: 5; width: 4cqh; height: 4cqh; margin: -2cqh 0 0 -2cqh; border-radius: 50%; display: grid; place-items: center; font: 900 1.8cqh/1 var(--font); color: #fff; background: radial-gradient(circle at 35% 30%, #FFE3A0, #FF5D73 70%); box-shadow: 0 0 2cqh #FF5D73; transition: transform .45s cubic-bezier(.5, -.2, .6, 1.2), opacity .45s; pointer-events: none; }
.tt-emos { position: absolute; left: 50%; bottom: 1.4cqh; transform: translateX(-50%); display: flex; gap: .8cqh; z-index: 3; }
.tt-emos button { width: 4.6cqh; height: 4.6cqh; border: 0; border-radius: 50%; background: rgba(255, 255, 255, .1); font-size: 2.2cqh; cursor: pointer; }
.tt-emos button:hover { background: rgba(255, 255, 255, .2); transform: translateY(-.3cqh); }
.tt-react { position: absolute; bottom: 8cqh; z-index: 6; display: flex; flex-direction: column; align-items: center; animation: ttFloat 2.2s ease-out both; pointer-events: none; }
.tt-react span { font-size: 5cqh; } .tt-react small { font-size: 1.3cqh; color: #D7D3FF; }
@keyframes ttFloat { from { transform: translateY(0); opacity: 0; } 15% { opacity: 1; } to { transform: translateY(-30cqh); opacity: 0; } }
.tt-res { position: absolute; inset: 0; z-index: 8; display: none; place-items: center; background: rgba(8, 6, 26, .6); backdrop-filter: blur(4px); }
.tt-res.on { display: grid; animation: ttFade .3s both; }
@keyframes ttFade { from { opacity: 0; } }
.tt-dlg { width: min(46cqh, 90cqw); padding: 3.4cqh 3cqh 2.6cqh; border-radius: 3cqh; background: linear-gradient(180deg, #2D2470, #1A1545); box-shadow: 0 0 0 .3cqh #6B4BFF, 0 3cqh 6cqh -2cqh rgba(0, 0, 0, .8); text-align: center; }
.tt-dlg h3 { margin: 0; font: 900 4.4cqh/1.2 var(--font); color: #fff; }
.tt-dlg h3.win { color: #FFD54A; text-shadow: 0 0 2cqh rgba(255, 213, 74, .7); }
.tt-dlg p { margin: 1cqh 0 2cqh; font-size: 1.6cqh; color: #A9A3E0; }
.tt-rank { list-style: none; margin: 0 0 2cqh; padding: 0; display: grid; gap: .8cqh; text-align: left; }
.tt-rank li { display: grid; grid-template-columns: 3cqh 3.6cqh 1fr auto; align-items: center; gap: 1cqh; padding: .8cqh 1.2cqh; border-radius: 1.2cqh; background: rgba(255, 255, 255, .06); }
.tt-rank li.me { box-shadow: inset 0 0 0 .2cqh #8C6BFF; }
.tt-rank li span { font: 900 2cqh/1 var(--font); color: #FFD54A; }
.tt-rank li img { width: 3.6cqh; height: 3.6cqh; border-radius: 50%; background: #FFF3DC; }
.tt-rank li b { font-size: 1.6cqh; } .tt-rank li em { font-style: normal; font-size: 1.2cqh; color: #8F89C9; }
.tt-big { display: flex; justify-content: center; gap: 4cqh; margin-bottom: 2cqh; }
.tt-big b { display: block; font: 900 4.6cqh/1 var(--font); color: #fff; } .tt-big small { font-size: 1.3cqh; color: #8F89C9; }
.tt-coin { margin-bottom: 2cqh; font: 800 2cqh/1 var(--font); color: #FFD54A; }
.tt-two { display: flex; gap: 1.2cqh; justify-content: center; }
.tt-two .tt-btn { height: 5.4cqh; padding: 0 3cqh; font-size: 1.8cqh; }

/* ---------- 小鸟飞飞：单机，扁平剪影风 ---------- */
.fb { position: relative; width: 100%; height: 100%; container-type: size; overflow: hidden; font-family: var(--font); user-select: none; background: #EBC2B6; }
.fb-cv { position: absolute; inset: 0; width: 100%; height: 100%; display: block; cursor: pointer; touch-action: none; }
.fb-hud { position: absolute; left: 0; right: 0; top: 6cqh; display: flex; flex-direction: column; align-items: center; pointer-events: none; color: #fff; }
.fb-score { font: 200 11cqh/1 var(--font); letter-spacing: .4cqh; text-shadow: 0 .4cqh 2cqh rgba(40, 30, 60, .25); font-variant-numeric: tabular-nums; }
.fb-score.up { animation: fbUp .28s ease-out; }
@keyframes fbUp { 35% { transform: translateY(-1cqh); opacity: .75; } }
.fb-best { margin-top: 1cqh; font: 500 1.5cqh/1 var(--font); letter-spacing: .3cqh; opacity: .75; }
.fb-x { position: absolute; right: 2.6cqh; top: 2.6cqh; height: 4.2cqh; padding: 0 2cqh; border: 0; border-radius: 2.1cqh; background: rgba(30, 24, 48, .28); color: #fff; font: 600 1.5cqh/1 var(--font); letter-spacing: .1cqh; cursor: pointer; backdrop-filter: blur(6px); }
.fb-x:hover { background: rgba(30, 24, 48, .42); }
.fb-start { position: absolute; left: 50%; top: 58%; transform: translate(-50%, -50%); text-align: center; color: #fff; pointer-events: none; transition: opacity .4s, transform .4s; }
.fb-start.off { opacity: 0; transform: translate(-50%, -40%); }
.fb-start h2 { margin: 0; font: 300 6cqh/1 var(--font); letter-spacing: 1.4cqh; text-shadow: 0 .4cqh 2cqh rgba(40, 30, 60, .25); }
.fb-start p { margin: 2cqh 0 0; font: 500 1.6cqh/1 var(--font); letter-spacing: .4cqh; opacity: .85; animation: fbBlink 1.6s ease-in-out infinite; }
@keyframes fbBlink { 50% { opacity: .4; } }
.fb-res { position: absolute; inset: 0; display: none; place-items: center; background: rgba(30, 24, 48, .22); }
.fb-res.on { display: grid; animation: ttFade .35s both; }
.fb-dlg { width: min(40cqh, 88cqw); padding: 3.4cqh 3.2cqh 2.8cqh; border-radius: 2.6cqh; background: rgba(255, 255, 255, .78); backdrop-filter: blur(14px); box-shadow: 0 3cqh 7cqh -3cqh rgba(30, 24, 48, .55); text-align: center; color: #3E3550; }
.fb-dlg small { font: 600 1.3cqh/1 var(--font); letter-spacing: .4cqh; color: #8B8299; }
.fb-big { margin: 1.4cqh 0 .6cqh; font: 200 10cqh/1 var(--font); }
.fb-sub { min-height: 2.4cqh; margin-bottom: 2cqh; font-size: 1.5cqh; color: #8B8299; }
.fb-sub b { padding: .4cqh 1.2cqh; border-radius: 1.2cqh; background: #3E3550; color: #FFD36B; font-weight: 700; letter-spacing: .2cqh; animation: drPop .6s; }
.fb-lb { list-style: none; margin: 0 0 2.4cqh; padding: 0; display: grid; gap: .5cqh; text-align: left; }
.fb-lb li { display: grid; grid-template-columns: 2.6cqh 3cqh 1fr auto; align-items: center; gap: 1cqh; padding: .7cqh 1.2cqh; border-radius: 1.2cqh; font-size: 1.5cqh; }
.fb-lb li:nth-child(odd) { background: rgba(62, 53, 80, .05); }
.fb-lb li.me { background: rgba(62, 53, 80, .12); font-weight: 700; }
.fb-lb li span { font-weight: 700; color: #8B8299; text-align: center; }
.fb-lb li img { width: 3cqh; height: 3cqh; border-radius: 50%; background: #FFF3DC; }
.fb-lb li b { font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fb-lb li em { font-style: normal; font-weight: 700; font-variant-numeric: tabular-nums; }
.fb-lb .wait { display: block; text-align: center; color: #8B8299; }
.fb-two { display: flex; gap: 1cqh; }
.fb-btn { flex: 1; height: 5cqh; border: 0; border-radius: 2.5cqh; background: rgba(62, 53, 80, .08); color: #3E3550; font: 600 1.6cqh/1 var(--font); letter-spacing: .1cqh; cursor: pointer; }
.fb-btn.p { background: #3E3550; color: #fff; }
.spot .emblem .fb-emb { display: block; width: 22px; height: 22px; border-radius: 50%; background: #E9685C; box-shadow: inset -4px -4px 0 rgba(0, 0, 0, .12), 8px 0 0 -6px #5B4A63; position: relative; }

/* ---------- 你画我猜：画室 ---------- */
.dr { position: relative; width: 100%; height: 100%; container-type: size; overflow: hidden; font-family: var(--font); color: #3A3229; background: radial-gradient(120% 100% at 50% 0%, #FBF3E2 0%, #EEDFC2 70%, #E2CFA8 100%); }
.dr::before { content: ""; position: absolute; inset: 0; background-image: radial-gradient(rgba(150, 110, 60, .08) 1px, transparent 1.4px); background-size: 1.6cqh 1.6cqh; pointer-events: none; }
.dr-top { position: absolute; left: 0; right: 0; top: 0; height: 10cqh; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; padding: 0 2.6cqh 0 15cqh; z-index: 2; }
.dr-logo { font: 900 3.2cqh/1 var(--font); color: #C2457A; letter-spacing: .3cqh; }
.dr-logo small { display: block; margin-top: .5cqh; font: 700 1.3cqh/1 var(--font); color: #9A7B52; letter-spacing: .4cqh; }
.dr-word { display: flex; align-items: center; gap: 1.4cqh; padding: 1.2cqh 2.6cqh; border-radius: 3cqh; background: #fff; box-shadow: 0 .6cqh 1.6cqh -.8cqh rgba(120, 80, 30, .5); min-height: 6cqh; }
.dr-word:empty { visibility: hidden; }
.dr-word .lab { font-size: 1.5cqh; color: #9A8B76; }
.dr-word .w { font: 900 3.2cqh/1 var(--font); color: #3A3229; letter-spacing: .4cqh; }
.dr-word .cat { padding: .4cqh 1cqh; border-radius: 1cqh; background: #F6EEDC; font-size: 1.4cqh; color: #9A7B52; }
.dr-word .boxes { display: flex; gap: .7cqh; }
.dr-word .boxes i { width: 4cqh; height: 4.6cqh; border-radius: .8cqh; background: #F3EBDA; border-bottom: .4cqh solid #D9C7A4; display: grid; place-items: center; font: 900 2.6cqh/1 var(--font); font-style: normal; color: #C2457A; }
.dr-word .boxes i.h { background: #FFF1F6; animation: drPop .4s; }
@keyframes drPop { 40% { transform: scale(1.2); } }
.dr-tr { display: flex; align-items: center; justify-content: flex-end; gap: 1.4cqh; }
.dr-round { font: 700 1.6cqh/1 var(--font); color: #9A7B52; }
.dr-timer { position: relative; width: 6cqh; height: 6cqh; }
.dr-timer svg { width: 100%; height: 100%; transform: rotate(-90deg); }
.dr-timer circle { fill: #fff; stroke: #EADFC8; stroke-width: 3.4; }
.dr-timer circle.v { fill: none; stroke: #5CB85C; stroke-dasharray: 100; stroke-linecap: round; transition: stroke-dashoffset .2s linear; }
.dr-timer.hot circle.v { stroke: #E2483D; } .dr-timer.hot b { color: #E2483D; animation: drPop .5s infinite; }
.dr-timer.off { opacity: .35; }
.dr-timer b { position: absolute; inset: 0; display: grid; place-items: center; font: 900 2.1cqh/1 var(--font); }
.dr-btn { height: 4.6cqh; padding: 0 2.4cqh; border: 0; border-radius: 2.3cqh; background: #fff; color: #3A3229; font: 700 1.7cqh/1 var(--font); cursor: pointer; box-shadow: 0 .4cqh 1.2cqh -.6cqh rgba(120, 80, 30, .5); }
.dr-btn.d { color: #D24B5A; }
.dr-btn.p { background: linear-gradient(180deg, #E86A9A, #C2457A); color: #fff; }
.dr-main { position: absolute; inset: 11cqh 2.6cqh 2.6cqh; display: grid; grid-template-columns: 24cqh minmax(0, 1fr) 34cqh; gap: 2.4cqh; }
.dr-pl { display: flex; flex-direction: column; gap: 1cqh; overflow-y: auto; }
.dr-p { position: relative; display: grid; grid-template-columns: 4.6cqh 1fr auto; align-items: center; gap: 1cqh; padding: 1cqh 1.2cqh; border-radius: 1.8cqh; background: rgba(255, 255, 255, .8); box-shadow: 0 .4cqh 1cqh -.6cqh rgba(120, 80, 30, .5); }
.dr-p img { width: 4.6cqh; height: 4.6cqh; border-radius: 50%; background: #FFF3DC; }
.dr-p b { font-size: 1.6cqh; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dr-p span { font: 900 2cqh/1 var(--font); color: #C2457A; font-variant-numeric: tabular-nums; }
.dr-p em { position: absolute; left: -.6cqh; top: -.6cqh; width: 2.6cqh; height: 2.6cqh; border-radius: 50%; display: grid; place-items: center; background: #F5C94E; font-style: normal; font-size: 1.5cqh; box-shadow: 0 .2cqh .6cqh rgba(0, 0, 0, .2); }
.dr-p em.ok { background: #5CB85C; color: #fff; }
.dr-p u { position: absolute; right: 1cqh; top: -1.2cqh; text-decoration: none; padding: .2cqh .8cqh; border-radius: 1cqh; background: #5CB85C; color: #fff; font: 800 1.3cqh/1.4 var(--font); animation: drPop .5s; }
.dr-p.drawing { box-shadow: inset 0 0 0 .25cqh #F5C94E, 0 .4cqh 1cqh -.6cqh rgba(120, 80, 30, .5); }
.dr-p.ok { background: #EAF7E6; }
.dr-p.me b { color: #C2457A; }
.dr-p.gone { opacity: .45; }
.dr-mid { display: flex; flex-direction: column; gap: 1.6cqh; min-width: 0; min-height: 0; }
.dr-easel { position: relative; flex: 1; min-height: 0; display: grid; place-items: center; container-type: size; }
.dr-paper { position: relative; box-sizing: border-box; width: min(100cqw, 133.3cqh); height: min(75cqw, 100cqh); padding: 1.2cqh; border-radius: 1cqh; background: #fff; box-shadow: 0 1.4cqh 3cqh -1.4cqh rgba(110, 70, 30, .55), 0 0 0 .2cqh #E6D7BA; }
.dr-paper i { position: absolute; width: 9cqh; height: 2.6cqh; background: rgba(245, 201, 78, .55); top: -1cqh; }
.dr-paper i.t1 { left: 6%; transform: rotate(-6deg); } .dr-paper i.t2 { right: 6%; transform: rotate(5deg); }
.dr-cv { width: 100%; height: 100%; display: block; border-radius: .6cqh; touch-action: none; }
.dr-cv.can { cursor: crosshair; }
.dr-ov { position: absolute; inset: 0; display: none; place-items: center; pointer-events: none; }
.dr-ov.on { display: grid; background: rgba(250, 243, 228, .7); backdrop-filter: blur(2px); pointer-events: auto; animation: ttFade .25s both; }
.dr-ov.soft { background: rgba(250, 243, 228, .45); }
.dr-card { display: flex; flex-direction: column; align-items: center; gap: 1.2cqh; padding: 3cqh 4cqh; border-radius: 3cqh; background: #fff; box-shadow: 0 1.4cqh 3cqh -1.2cqh rgba(110, 70, 30, .5); }
.dr-card img { width: 8cqh; height: 8cqh; border-radius: 50%; background: #FFF3DC; }
.dr-card b { font: 900 7cqh/1 var(--font); color: #C2457A; }
.dr-card span { font-size: 1.8cqh; color: #7A6A55; }
.dr-card.rv b { font-size: 6cqh; letter-spacing: .5cqh; animation: drPop .6s; }
.dr-pick { text-align: center; padding: 3cqh 3.4cqh; border-radius: 3cqh; background: #fff; box-shadow: 0 1.4cqh 3cqh -1.2cqh rgba(110, 70, 30, .5); }
.dr-pick h4 { margin: 0 0 2cqh; font: 800 2.2cqh/1 var(--font); }
.dr-pick div { display: flex; gap: 1.6cqh; }
.dr-pick button { min-width: 15cqh; padding: 2.4cqh 2cqh; border: 0; border-radius: 2cqh; background: linear-gradient(180deg, #FFF6E6, #F6E7C8); box-shadow: inset 0 -.5cqh 0 #E6D2AA, 0 .6cqh 1.4cqh -.8cqh rgba(110, 70, 30, .6); font: 900 2.8cqh/1 var(--font); color: #3A3229; cursor: pointer; transition: transform .15s; }
.dr-pick button:hover { transform: translateY(-.6cqh) rotate(-1deg); background: linear-gradient(180deg, #FFEFF5, #F9D7E4); }
.dr-pick p { margin: 1.8cqh 0 0; font-size: 1.4cqh; color: #9A8B76; }
.dr-tools { display: flex; align-items: center; justify-content: center; gap: 1.4cqh; height: 7cqh; padding: 0 2cqh; border-radius: 3.5cqh; background: rgba(255, 255, 255, .85); box-shadow: 0 .6cqh 1.6cqh -.8cqh rgba(120, 80, 30, .5); opacity: .35; pointer-events: none; transition: opacity .2s; }
.dr-tools.on { opacity: 1; pointer-events: auto; }
.dr-cols { display: grid; grid-template-columns: repeat(6, 3cqh); gap: .6cqh; }
.dr-col { width: 3cqh; height: 3cqh; border: 0; border-radius: 50%; background: var(--c); box-shadow: inset 0 0 0 .2cqh rgba(0, 0, 0, .12); cursor: pointer; }
.dr-col.on { box-shadow: 0 0 0 .3cqh #fff, 0 0 0 .55cqh #3A3229; }
.dr-sizes { display: flex; gap: .6cqh; }
.dr-sz { width: 4.6cqh; height: 4.6cqh; border: 0; border-radius: 1.2cqh; background: #F6EEDC; display: grid; place-items: center; cursor: pointer; }
.dr-sz i { display: block; border-radius: 50%; background: #3A3229; max-width: 3cqh; max-height: 3cqh; }
.dr-sz.on { box-shadow: inset 0 0 0 .25cqh #C2457A; }
.dr-tool { height: 4.6cqh; padding: 0 1.6cqh; border: 0; border-radius: 1.2cqh; background: #F6EEDC; font: 700 1.5cqh/1 var(--font); color: #3A3229; cursor: pointer; }
.dr-tool.on { background: #3A3229; color: #fff; }
.dr-tool.d { color: #D24B5A; }
.dr-side { display: flex; flex-direction: column; gap: 1.2cqh; min-height: 0; }
.dr-feed { flex: 1; min-height: 0; overflow-y: auto; display: flex; flex-direction: column; gap: .7cqh; padding: 1.4cqh; border-radius: 2cqh; background: rgba(255, 255, 255, .8); box-shadow: 0 .6cqh 1.6cqh -.8cqh rgba(120, 80, 30, .5); font-size: 1.55cqh; line-height: 1.5; }
.dr-feed b { margin-right: .8cqh; color: #9A7B52; }
.dr-feed .sys { align-self: center; padding: .3cqh 1.2cqh; border-radius: 1cqh; background: #F6EEDC; font-size: 1.35cqh; color: #9A7B52; }
.dr-feed .ok { padding: .5cqh 1.2cqh; border-radius: 1cqh; background: #EAF7E6; color: #3E8E3E; font-weight: 800; }
.dr-feed .near small { margin-left: .8cqh; padding: .1cqh .7cqh; border-radius: .8cqh; background: #FFF1D6; color: #C27A12; font-size: 1.2cqh; }
.dr-in { display: flex; gap: .8cqh; padding: .8cqh; border-radius: 2.6cqh; background: #fff; box-shadow: 0 .6cqh 1.6cqh -.8cqh rgba(120, 80, 30, .5); }
.dr-in input { flex: 1; min-width: 0; height: 4.6cqh; padding: 0 1.6cqh; border: 0; border-radius: 2.3cqh; background: #F6EEDC; font: 600 1.7cqh/1 var(--font); color: #3A3229; outline: none; }
.dr-in input:disabled { opacity: .6; }
.dr-in button { height: 4.6cqh; padding: 0 2.2cqh; border: 0; border-radius: 2.3cqh; background: #C2457A; color: #fff; font: 800 1.7cqh/1 var(--font); cursor: pointer; }
.dr-react { position: absolute; bottom: 6cqh; display: flex; flex-direction: column; align-items: center; animation: ttFloat 2.2s ease-out both; pointer-events: none; z-index: 5; }
.dr-react span { font-size: 5cqh; } .dr-react small { font-size: 1.3cqh; }
.dr-res { position: absolute; inset: 0; display: none; place-items: center; background: rgba(90, 60, 30, .3); backdrop-filter: blur(3px); z-index: 6; }
.dr-res.on { display: grid; animation: ttFade .3s both; }
.dr-dlg { width: min(60cqh, 92cqw); padding: 3.4cqh 3cqh 2.8cqh; border-radius: 3cqh; background: #FFF9EC; box-shadow: 0 0 0 .4cqh #F5C94E, 0 3cqh 6cqh -2cqh rgba(90, 60, 30, .6); text-align: center; }
.dr-dlg h3 { margin: 0 0 2.4cqh; font: 900 3.6cqh/1.2 var(--font); color: #C2457A; }
.dr-pod { display: grid; grid-template-columns: repeat(3, 1fr); align-items: end; gap: 1.4cqh; margin-bottom: 2cqh; }
.dr-pod > div { display: flex; flex-direction: column; align-items: center; gap: .6cqh; }
.dr-pod img { width: 7cqh; height: 7cqh; border-radius: 50%; background: #FFF3DC; box-shadow: 0 0 0 .3cqh #fff; }
.dr-pod b { font-size: 1.7cqh; } .dr-pod span { font-size: 1.4cqh; color: #7A6A55; }
.dr-pod i { width: 100%; display: grid; place-items: center; border-radius: 1.2cqh 1.2cqh 0 0; font: 900 3cqh/1 var(--font); font-style: normal; color: #fff; }
.dr-pod .s1 i { height: 11cqh; background: linear-gradient(180deg, #F5C94E, #E0A42B); }
.dr-pod .s2 i { height: 8cqh; background: linear-gradient(180deg, #C9D3DC, #9FAAB6); }
.dr-pod .s3 i { height: 6cqh; background: linear-gradient(180deg, #E5A576, #C27A4A); }
.dr-rest { list-style: none; margin: 0 0 2cqh; padding: 0; display: grid; gap: .6cqh; }
.dr-rest li { display: grid; grid-template-columns: 3cqh 1fr auto; padding: .7cqh 1.4cqh; border-radius: 1.2cqh; background: #F3EAD6; font-size: 1.5cqh; text-align: left; }
.dr-rest li span { font-weight: 900; color: #9A7B52; } .dr-rest li em { font-style: normal; color: #7A6A55; }
.dr-two { display: flex; gap: 1.2cqh; justify-content: center; }
.dr-two .dr-btn { height: 5.4cqh; padding: 0 3cqh; font-size: 1.8cqh; }
.spot .emblem .dr-emb { font-style: normal; font-size: 24px; color: #C2457A; }

/* 方块雨单机：没有对手、没有攻击条；结算卡上有个人最好和排行榜 */
.tt.solo .tt-meter, .tt.solo .tt-emos, .tt.solo .tt-stats div:nth-child(3) { display: none; }
.tt-best { margin: -.6cqh 0 1.6cqh; font-size: 1.6cqh; color: #A9A3E0; }
.tt-best b { margin-right: .8cqh; color: #FFD54A; font-size: 2cqh; }
.tt-best.new { animation: drPop .6s; }
.tt-rank .wait { justify-content: center; display: block; text-align: center; color: #8F89C9; font-size: 1.4cqh; }
/* 地点卡片里的排行榜 */
.spot .lb { margin-top: 14px; padding: 10px 12px; border-radius: 12px; background: var(--cr2, #F6EEDC); }
.spot .lb h5 { display: flex; justify-content: space-between; margin: 0 0 8px; font: 800 13px/1 var(--font); color: var(--text); }
.spot .lb h5 small { font-weight: 500; color: var(--text-3); }
.spot .lb-r { display: grid; grid-template-columns: 18px 22px 1fr auto; align-items: center; gap: 8px; padding: 4px 2px; font-size: 13px; }
.spot .lb-r span { font-weight: 800; color: var(--text-3); text-align: center; }
.spot .lb-r:nth-child(2) span { color: #D9A21B; } .spot .lb-r:nth-child(3) span { color: #9AA5B1; } .spot .lb-r:nth-child(4) span { color: #C27A4A; }
.spot .lb-r img { width: 22px; height: 22px; border-radius: 50%; background: #FFF3DC; }
.spot .lb-r b { font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.spot .lb-r em { font-style: normal; font-weight: 800; font-variant-numeric: tabular-nums; }
.spot .lb-r.me { border-radius: 8px; background: rgba(255, 255, 255, .7); }
.spot .lb-empty { font-size: 12.5px; color: var(--text-3); }

/* ---------- 斗地主：全屏牌桌（欢乐斗地主的玩法） ---------- */
.dz { position: relative; width: 100%; height: 100%; container-type: size; overflow: hidden; font-family: var(--font); color: #fff; user-select: none; background: #12332B; }
.dz.shake { animation: dzShake .5s; }
@keyframes dzShake { 15% { transform: translate(-1.2cqh, .6cqh); } 30% { transform: translate(1cqh, -.8cqh); } 45% { transform: translate(-.8cqh, .4cqh); } 60% { transform: translate(.6cqh, -.2cqh); } 80% { transform: translate(-.2cqh, .1cqh); } }
.dz-felt { position: absolute; inset: 0; background: radial-gradient(120% 90% at 50% 42%, #2F8A6E 0%, #1F6A55 45%, #134236 80%, #0D2C24 100%); }
.dz-felt::before { content: ""; position: absolute; left: 50%; top: 46%; width: 128cqh; height: 70cqh; transform: translate(-50%, -50%); border-radius: 50%; border: .35cqh solid rgba(255, 220, 140, .18); box-shadow: inset 0 0 6cqh rgba(0, 0, 0, .25); }
.dz-felt::after { content: ""; position: absolute; inset: 0; background-image: radial-gradient(rgba(255, 255, 255, .05) 1px, transparent 1.3px); background-size: .9cqh .9cqh; opacity: .6; }
.dz-top { position: absolute; left: 0; right: 0; top: 0; height: 13cqh; display: grid; grid-template-columns: 1fr auto 1fr; align-items: start; padding: 2cqh 2.6cqh 0 15cqh; z-index: 3; }
.dz-logo { font: 900 3.4cqh/1 var(--font); letter-spacing: .4cqh; color: #FFE08A; text-shadow: 0 .3cqh 0 #8A5A12, 0 0 2cqh rgba(255, 200, 80, .4); }
.dz-logo small { display: block; margin-top: .6cqh; font: 700 1.3cqh/1 var(--font); letter-spacing: .5cqh; color: rgba(255, 255, 255, .55); text-shadow: none; }
.dz-info { display: flex; align-items: center; gap: 2cqh; padding: 1cqh 2cqh; border-radius: 2.4cqh; background: rgba(0, 0, 0, .25); box-shadow: inset 0 0 0 .15cqh rgba(255, 220, 140, .25); }
.dz-bottom { display: flex; gap: .6cqh; }
.dz-mult { display: flex; flex-direction: column; align-items: center; }
.dz-mult small { font-size: 1.2cqh; color: rgba(255, 255, 255, .6); }
.dz-mult b { font: 900 3.2cqh/1 var(--font); color: #FFD54A; text-shadow: 0 0 1.4cqh rgba(255, 213, 74, .6); }
.dz-tr { display: flex; justify-content: flex-end; gap: 1cqh; }
.dz-btn { height: 4.6cqh; padding: 0 2.2cqh; border: 0; border-radius: 2.3cqh; background: linear-gradient(180deg, #FFFFFF, #E9E2D2); color: #3A3229; font: 800 1.7cqh/1 var(--font); cursor: pointer; box-shadow: 0 .5cqh 0 #B8AC92, 0 .9cqh 1.6cqh -.6cqh rgba(0, 0, 0, .5); transition: transform .08s; }
.dz-btn:active { transform: translateY(.4cqh); box-shadow: 0 .1cqh 0 #B8AC92; }
.dz-btn:disabled { opacity: .45; cursor: default; }
.dz-btn.ghost { background: rgba(0, 0, 0, .28); color: #fff; box-shadow: inset 0 0 0 .15cqh rgba(255, 255, 255, .2); }
.dz-btn.ghost.d { color: #FFB0B0; }
.dz-btn.hot { background: linear-gradient(180deg, #FFD86A, #F5A623); color: #5A3305; box-shadow: 0 .5cqh 0 #C0761A, 0 .9cqh 1.8cqh -.6cqh rgba(245, 166, 35, .8); }
.dz-btn.big { height: 6.4cqh; min-width: 15cqh; padding: 0 3cqh; border-radius: 3.2cqh; font-size: 2.3cqh; letter-spacing: .2cqh; }
.dz-btn small { display: block; margin-top: .3cqh; font-size: 1.2cqh; font-weight: 700; opacity: .75; letter-spacing: 0; }
/* 对手 */
.dz-seat { position: absolute; top: 24cqh; z-index: 2; }
.dz-seat.l { left: 4cqh; } .dz-seat.r { right: 4cqh; }
.dz-who { display: flex; flex-direction: column; align-items: center; gap: .9cqh; width: 16cqh; }
.dz-av { position: relative; width: 11cqh; height: 11cqh; }
.dz-av img { width: 100%; height: 100%; border-radius: 50%; background: #FFF3DC; box-shadow: 0 0 0 .5cqh #F2E2B8, 0 0 0 .8cqh rgba(0, 0, 0, .25), 0 1cqh 2cqh rgba(0, 0, 0, .4); }
.dz-who.ll .dz-av img { box-shadow: 0 0 0 .5cqh #FFC83D, 0 0 0 .8cqh #A86A00, 0 0 2.4cqh rgba(255, 200, 60, .7); }
.dz-role { position: absolute; left: 50%; bottom: -1.2cqh; transform: translateX(-50%); padding: .35cqh 1.2cqh; border-radius: 1.2cqh; font: 900 1.4cqh/1.2 var(--font); font-style: normal; white-space: nowrap; }
.dz-role.ll { background: linear-gradient(180deg, #FFD86A, #E89A12); color: #5A3305; box-shadow: 0 .3cqh .8cqh rgba(0, 0, 0, .35); }
.dz-role.ll::before { content: "♛ "; }
.dz-role.fm { background: linear-gradient(180deg, #8FD0FF, #3E8ED0); color: #0C2E4D; }
.dz-ring { position: absolute; inset: -1.2cqh; width: calc(100% + 2.4cqh); height: calc(100% + 2.4cqh); transform: rotate(-90deg); pointer-events: none; }
.dz-ring circle { fill: none; stroke: #7CF2A2; stroke-width: 2.2; stroke-dasharray: 113; stroke-linecap: round; transition: stroke-dashoffset .25s linear; filter: drop-shadow(0 0 .4cqh #7CF2A2); }
.dz-ring.hot circle { stroke: #FF6B6B; filter: drop-shadow(0 0 .4cqh #FF6B6B); }
.dz-name { margin-top: .6cqh; font: 800 1.7cqh/1.2 var(--font); text-shadow: 0 .2cqh .4cqh rgba(0, 0, 0, .5); white-space: nowrap; }
.dz-name small { margin-left: .6cqh; padding: .1cqh .6cqh; border-radius: .6cqh; background: rgba(255, 255, 255, .18); font-size: 1.1cqh; font-weight: 600; }
.dz-cnt { display: flex; align-items: center; gap: .8cqh; padding: .5cqh 1.2cqh .5cqh .6cqh; border-radius: 1.6cqh; background: rgba(0, 0, 0, .3); }
.dz-cnt b { font: 900 2.4cqh/1 var(--font); font-variant-numeric: tabular-nums; }
.dz-cnt.warn { background: rgba(220, 40, 40, .55); animation: dzWarn .8s ease-in-out infinite alternate; }
@keyframes dzWarn { to { box-shadow: 0 0 1.6cqh rgba(255, 60, 60, .9); } }
.dz-back { width: 2.6cqh; height: 3.5cqh; border-radius: .4cqh; background: repeating-linear-gradient(45deg, #C83C3C 0 .5cqh, #A82A2A .5cqh 1cqh); box-shadow: inset 0 0 0 .25cqh #fff, 0 .2cqh .4cqh rgba(0, 0, 0, .4); }
/* 牌 */
.dzc { position: relative; flex: none; width: 12cqh; height: 16.8cqh; border-radius: 1cqh; background: linear-gradient(180deg, #FFFFFF, #F3EFE6); color: #22252B; box-shadow: 0 .3cqh .6cqh rgba(0, 0, 0, .35), inset 0 0 0 .1cqh rgba(0, 0, 0, .08); transition: transform .12s ease-out, box-shadow .12s; }
.dzc.red { color: #D6302A; }
.dzc .r { position: absolute; left: .8cqh; top: .6cqh; font: 900 3.4cqh/1 'Georgia', var(--font); letter-spacing: -.2cqh; }
.dzc .s { position: absolute; left: 1.05cqh; top: 4.2cqh; font-size: 2.5cqh; line-height: 1; }
.dzc .c { position: absolute; right: 1cqh; bottom: .8cqh; font-size: 5.6cqh; line-height: 1; opacity: .9; }
.dzc.joker .jk { position: absolute; left: .9cqh; top: .8cqh; width: 1.6cqh; font: 900 1.6cqh/1.05 var(--font); word-break: break-all; color: #22252B; }
.dzc.joker.big .jk, .dzc.joker.big .jc { color: #D6302A; }
.dzc.joker .jc { position: absolute; right: 1cqh; bottom: .6cqh; font-size: 6cqh; line-height: 1; color: #22252B; }
.dzc.back { background: repeating-linear-gradient(45deg, #C83C3C 0 .8cqh, #A82A2A .8cqh 1.6cqh); box-shadow: inset 0 0 0 .45cqh #fff, 0 .3cqh .6cqh rgba(0, 0, 0, .35); }
.dzc.mini { width: 4.4cqh; height: 6cqh; border-radius: .6cqh; }
.dzc.mini .r { font-size: 1.8cqh; left: .5cqh; top: .4cqh; } .dzc.mini .s { font-size: 1.4cqh; left: .6cqh; top: 2.3cqh; } .dzc.mini .c { display: none; }
.dzc.mini.joker .jk { font-size: 1cqh; left: .4cqh; top: .4cqh; width: 1cqh; } .dzc.mini.joker .jc { font-size: 2.4cqh; right: .4cqh; bottom: .3cqh; }
.dzc.mini.back { box-shadow: inset 0 0 0 .3cqh #fff, 0 .2cqh .4cqh rgba(0, 0, 0, .35); }
.dz-cards { display: flex; justify-content: center; }
.dz-cards .dzc + .dzc { margin-left: -7.3cqh; }
.dz-cards.hand { padding-top: 3cqh; }
.dz-cards.hand .dzc { cursor: pointer; }
.dz-cards.hand .dzc:hover { transform: translateY(-.8cqh); }
.dz-cards.hand .dzc.sel { transform: translateY(-3cqh); box-shadow: 0 .6cqh 1.4cqh rgba(0, 0, 0, .4), inset 0 0 0 .3cqh #FFC83D; }
.dz-cards.rest .dzc, .dz-play .dz-cards .dzc { width: 7.6cqh; height: 10.6cqh; }
.dz-play .dz-cards .dzc + .dzc, .dz-cards.rest .dzc + .dzc { margin-left: -4.6cqh; }
.dz-play .dzc .r { font-size: 2.3cqh; } .dz-play .dzc .s { font-size: 1.7cqh; top: 2.9cqh; } .dz-play .dzc .c { font-size: 4cqh; }
.dz-play .dz-cards { animation: dzIn .22s ease-out both; }
@keyframes dzIn { from { transform: translateY(2cqh) scale(.9); opacity: 0; } }
/* 出的牌放在哪 */
.dz-play { position: absolute; z-index: 1; display: flex; flex-direction: column; align-items: center; gap: 1cqh; }
.dz-play.l { left: 22cqh; top: 26cqh; align-items: flex-start; }
.dz-play.r { right: 22cqh; top: 26cqh; align-items: flex-end; }
.dz-play.me { left: 50%; bottom: 36cqh; transform: translateX(-50%); }
.dz-type { padding: .4cqh 1.4cqh; border-radius: 1.4cqh; background: rgba(0, 0, 0, .35); font: 800 1.5cqh/1.2 var(--font); color: #FFE08A; }
.dz-say { padding: 1.2cqh 2.4cqh; border-radius: 2.4cqh; background: #fff; color: #C2410C; font: 900 2.6cqh/1 var(--font); box-shadow: 0 .8cqh 1.6cqh -.6cqh rgba(0, 0, 0, .5); animation: dzSay .3s cubic-bezier(.3, 1.6, .5, 1) both; }
.dz-say:empty { display: none; }
.dz-say.no { color: #5B6470; }
@keyframes dzSay { from { transform: scale(.4); opacity: 0; } }
/* 我 */
.dz-me { position: absolute; left: 3cqh; bottom: 4cqh; z-index: 3; }
.dz-me .dz-who { width: 13cqh; } .dz-me .dz-av { width: 9cqh; height: 9cqh; }
.dz-hand { position: absolute; left: 16cqh; right: 16cqh; bottom: 3cqh; z-index: 2; display: flex; justify-content: center; touch-action: none; }
.dz-watch { padding: 1.6cqh 3cqh; border-radius: 3cqh; background: rgba(0, 0, 0, .3); font-size: 1.8cqh; }
.dz-acts { position: absolute; left: 50%; bottom: 25.5cqh; transform: translateX(-50%); z-index: 3; display: flex; gap: 2cqh; }
.dz-emos { position: absolute; right: 2.4cqh; bottom: 3cqh; z-index: 3; display: flex; flex-direction: column; gap: .8cqh; }
.dz-emos button { width: 4.6cqh; height: 4.6cqh; border: 0; border-radius: 50%; background: rgba(0, 0, 0, .28); font-size: 2.2cqh; cursor: pointer; }
/* 特效 */
.dz-fx { position: absolute; inset: 0; z-index: 6; pointer-events: none; }
.dz-pop { position: absolute; left: 50%; top: 42%; transform: translate(-50%, -50%); white-space: nowrap; font: 900 5cqh/1 var(--font); color: #fff; text-shadow: 0 .4cqh 0 rgba(0, 0, 0, .35); animation: dzPop 1.6s ease-out both; }
.dz-pop.bomb { font-size: 11cqh; color: #FFD54A; text-shadow: 0 0 3cqh #FF6A00, 0 .6cqh 0 #8A2A00; }
.dz-pop.cap { font-size: 7cqh; color: #8FE3FF; text-shadow: 0 0 2cqh #2B9BFF, 0 .5cqh 0 #0C4A80; }
.dz-pop.rob { font-size: 4.6cqh; color: #FFD86A; }
.dz-pop.ll { font-size: 5.4cqh; color: #FFD86A; text-shadow: 0 0 2cqh rgba(255, 200, 60, .8), 0 .4cqh 0 #8A5A12; }
.dz-pop.warn { top: 30%; font-size: 3.6cqh; color: #FF8A8A; }
.dz-pop.soft { font-size: 3.4cqh; }
@keyframes dzPop { 0% { transform: translate(-50%, -50%) scale(.3); opacity: 0; } 14% { transform: translate(-50%, -50%) scale(1.15); opacity: 1; } 26% { transform: translate(-50%, -50%) scale(1); } 80% { opacity: 1; } 100% { transform: translate(-50%, -64%) scale(1); opacity: 0; } }
.dz-plane { position: absolute; top: 34%; left: -10%; font-size: 12cqh; color: #fff; animation: dzFly 1.5s ease-in-out both; filter: drop-shadow(0 1cqh 1cqh rgba(0, 0, 0, .4)); }
@keyframes dzFly { to { left: 110%; transform: translateY(-6cqh) rotate(-8deg); } }
.dz-rocket { position: absolute; left: 50%; bottom: 10%; font-size: 12cqh; animation: dzRocket 1.4s ease-in both; }
@keyframes dzRocket { to { bottom: 110%; transform: rotate(-12deg) scale(1.3); } }
.dz-react { position: absolute; bottom: 30cqh; display: flex; flex-direction: column; align-items: center; animation: ttFloat 2.2s ease-out both; }
.dz-react span { font-size: 5cqh; } .dz-react small { font-size: 1.3cqh; }
/* 结算 */
.dz-res { position: absolute; inset: 0; z-index: 8; display: none; place-items: center; background: rgba(5, 20, 15, .55); backdrop-filter: blur(3px); }
.dz-res.on { display: grid; animation: ttFade .3s both; }
.dz-dlg { width: min(66cqh, 92cqw); padding: 0 3cqh 3cqh; border-radius: 3cqh; background: linear-gradient(180deg, #FFFBF0, #F4E9CF); color: #3A3229; text-align: center; box-shadow: 0 3cqh 6cqh -2cqh rgba(0, 0, 0, .7); }
.dz-banner { margin: -3cqh auto 1.4cqh; width: fit-content; padding: 1.6cqh 5cqh; border-radius: 3cqh; font: 900 4.2cqh/1 var(--font); letter-spacing: .4cqh; color: #fff; background: linear-gradient(180deg, #FF7A59, #D6402A); box-shadow: 0 .8cqh 0 #8E2615, 0 1.2cqh 2.4cqh -.6cqh rgba(0, 0, 0, .5); }
.dz-dlg.win .dz-banner { background: linear-gradient(180deg, #FFD86A, #F5A623); color: #5A3305; box-shadow: 0 .8cqh 0 #B8700E, 0 1.2cqh 2.4cqh -.6cqh rgba(0, 0, 0, .5); }
.dz-dlg.lose .dz-banner { background: linear-gradient(180deg, #9AA6B2, #6B7682); box-shadow: 0 .8cqh 0 #4A535C, 0 1.2cqh 2.4cqh -.6cqh rgba(0, 0, 0, .5); }
.dz-dlg p { margin: 0 0 1.8cqh; font-size: 1.6cqh; color: #7A6A55; }
.dz-mx { display: flex; flex-wrap: wrap; justify-content: center; gap: .8cqh; margin-bottom: 2cqh; }
.dz-mx span { display: flex; gap: .8cqh; align-items: center; padding: .6cqh 1.4cqh; border-radius: 1.4cqh; background: #EFE3C6; font-size: 1.5cqh; }
.dz-mx span b { color: #C2410C; font-weight: 900; }
.dz-mx .tot { background: #3A3229; color: #fff; } .dz-mx .tot b { color: #FFD54A; font-size: 2cqh; }
.dz-rl { display: grid; gap: .8cqh; margin-bottom: 2cqh; }
.dz-rl > div { display: grid; grid-template-columns: 5cqh 1fr auto auto; align-items: center; gap: 1.2cqh; padding: .8cqh 1.4cqh; border-radius: 1.6cqh; background: rgba(0, 0, 0, .04); text-align: left; }
.dz-rl > div.w { background: rgba(245, 166, 35, .16); }
.dz-rl img { width: 5cqh; height: 5cqh; border-radius: 50%; background: #FFF3DC; }
.dz-rl b { font-size: 1.8cqh; } .dz-rl em { font-style: normal; font-size: 1.5cqh; color: #7A6A55; }
.dz-rl .dz-role { position: static; transform: none; }
.dz-coin { margin-bottom: 2cqh; font: 900 2.2cqh/1 var(--font); color: #C27A12; }
.dz-two { display: flex; justify-content: center; gap: 1.2cqh; }
.dz-two .dz-btn { height: 5.6cqh; padding: 0 3cqh; font-size: 1.9cqh; }

/* ---------- 界面精修：位置不变，只统一材质和图标 ----------
   所有悬浮在乐园上的东西：半透明米色磨砂 + 一圈细白边 + 很淡的投影；图标一律深棕细线，不用彩色色块 */
.hud { --ink: #4A3D2E; --ink2: #8A7A64; }
.hud .panel, .hud .mecard, .hud .chip, .hud .dock, .hud .map, .hud .locate, .hud .chat-input {
  background: rgba(255, 250, 240, .74); backdrop-filter: blur(14px) saturate(1.15); -webkit-backdrop-filter: blur(14px) saturate(1.15);
  box-shadow: 0 10px 28px -14px rgba(60, 45, 25, .55), inset 0 0 0 1px rgba(255, 255, 255, .6); color: var(--ink);
}
/* 左上角名牌：小一号、头像一圈白边 */
.hud .mecard { padding: 7px 18px 7px 7px; gap: 11px; border-radius: 32px; }
.hud .mecard:hover { background: rgba(255, 252, 245, .9); }
.hud .mecard .avatar img { box-shadow: 0 0 0 2px #fff; }
.hud .me-name b { font-weight: 700; letter-spacing: .3px; }
.hud .me-sub { color: var(--ink2); }
.hud .bar { height: 4px; background: rgba(90, 70, 40, .12); }
/* 右上角：时间、乐园币 */
.hud .chip { height: 38px; padding: 0 14px 0 10px; border-radius: 19px; font: 700 14px/1 var(--font); }
.hud .chip .ico { color: #B07A2A; }
/* 功能栏：右侧正中竖排，细线图标 + 小字 */
.hud .dock { left: auto; right: 20px; top: 50%; bottom: auto; transform: translateY(-50%); padding: 6px; gap: 2px; border-radius: 22px; flex-direction: column; }
.hud .dbtn { width: 58px; height: auto; padding: 10px 0 8px; gap: 5px; border-radius: 16px; color: var(--ink); }
.hud .dbtn:hover, .hud .dbtn.on { background: rgba(255, 255, 255, .7); }
.hud .dbtn .di { width: 24px; height: 24px; border-radius: 0; background: none !important; color: var(--ink); box-shadow: none; }
.hud .dbtn .di .ico { width: 23px; height: 23px; stroke-width: 1.7; }
.hud .dbtn .dl { font: 500 11.5px/1 var(--font); color: var(--ink2); letter-spacing: .5px; }
.hud .dbtn:hover .dl { color: var(--ink); }
.hud .dbtn .key { left: 4px; top: 4px; background: rgba(255, 255, 255, .8); }
.hud .dock + .dock, .hud .dbtn + .dbtn { margin-top: 0; }
/* 小地图按钮、我的位置：同一种小圆钮 */
.hud .map.collapsed { padding: 3px; border-radius: 50%; }
.hud .map.collapsed .map-btn { width: 40px; height: 40px; background: transparent; color: var(--ink); }
.hud .map:not(.collapsed) { border-radius: 24px; }
.hud .locate { padding: 3px; border-radius: 50%; }
.hud .locate .map-btn { width: 40px; height: 40px; background: transparent; color: var(--ink); }
/* 聊天框 */
.hud .chat-input { height: 42px; border-radius: 21px; }
.hud .chat-input input::placeholder { color: var(--ink2); }
/* 地点卡片挪开一点，别贴着功能栏 */
.hud .spot { right: 96px; }

/* 地图收进了右侧功能栏：收起时整个藏起来，打开时还在右上角 */
.hud .map.collapsed { display: none; }

/* ---------- 四个页面重做：成就册 / 换装 / 好友 / 主页 —— 克制、纸面、深棕墨色，少圆角少彩色 ---------- */
.modal-card.passport, .modal-card.wardrobe, .modal-card.profile, .modal-card.friends { --ink: #3F3426; --ink2: #8C7C66; --ink3: #B6A88F; --hair: rgba(90, 70, 40, .13); --sel: #2F5D4A; background: #FBF7EE; border-radius: 18px; color: var(--ink); }
.modal-card .m-head { padding: 18px 22px 14px; }
.modal-card.profile .m-head h2, .modal-card.friends .m-head h2, .modal-card.wardrobe .m-head h2 { font: 700 18px/1.3 var(--font); letter-spacing: .5px; }
.btn.ic { width: 36px; padding: 0; justify-content: center; }
.btn.sm.ic { width: 32px; }
.empty-line { padding: 12px 14px; margin-bottom: 18px; border-radius: 10px; background: rgba(90, 70, 40, .05); color: var(--ink2); font-size: 13px; }

/* 成就册：封面翻开 */
.modal-card.ach { width: 940px; height: min(620px, calc(100vh - 48px)); background: transparent; box-shadow: none; overflow: visible; animation: fade .25s both; }
.book { --pw: 50%; position: relative; flex: 1; display: flex; perspective: 2200px; transition: transform .8s cubic-bezier(.3, .7, .2, 1); }
.book.closed { transform: translateX(-25%); }
.book .pg { position: relative; width: 50%; height: 100%; background: #FBF6EA; box-shadow: 0 30px 60px -24px rgba(40, 28, 12, .6); overflow: hidden; }
.book .pg::after { content: ''; position: absolute; inset: 0; pointer-events: none; background-image: radial-gradient(rgba(120, 90, 40, .05) 1px, transparent 1px); background-size: 6px 6px; }
.book .pg.l { border-radius: 14px 4px 4px 14px; background: linear-gradient(90deg, #FBF6EA 88%, #EFE6D2); transition: opacity .3s .45s; }
.book .pg.r { border-radius: 4px 14px 14px 4px; background: linear-gradient(90deg, #EBE1CB, #FBF6EA 10%); }
.book.closed .pg.l { opacity: 0; transition-delay: 0s; }
.book .in { position: relative; z-index: 1; height: 100%; display: flex; flex-direction: column; padding: 34px 40px 26px; color: #3F3426; }
.book .cover { position: absolute; left: 50%; top: -6px; bottom: -6px; width: calc(50% + 6px); transform-origin: 0 50%; transform-style: preserve-3d; transition: transform 1s cubic-bezier(.45, .1, .2, 1); cursor: pointer; z-index: 3; }
.book:not(.closed) .cover { transform: rotateY(-180deg); pointer-events: none; z-index: 0; transition: transform 1s cubic-bezier(.45, .1, .2, 1), z-index 0s .5s; }
.book .pg { z-index: 1; }
.book .cover > div { position: absolute; inset: 0; backface-visibility: hidden; border-radius: 4px 16px 16px 4px; }
.cv-f { display: flex; flex-direction: column; align-items: center; justify-content: center; background: radial-gradient(120% 90% at 30% 20%, #3B5A47, #22392C); box-shadow: inset 6px 0 0 rgba(0, 0, 0, .18), inset 0 0 0 1px rgba(255, 255, 255, .06), 0 30px 60px -20px rgba(20, 30, 20, .7); color: #D9BC7A; }
.cv-frame { width: 64%; padding: 46px 0 40px; display: flex; flex-direction: column; align-items: center; gap: 12px; border: 1.5px solid rgba(217, 188, 122, .7); outline: 1px solid rgba(217, 188, 122, .35); outline-offset: 6px; }
.cv-frame small { font: 500 13px/1 var(--font); letter-spacing: 6px; opacity: .85; }
.cv-frame h2 { margin: 0; font: 700 54px/1 var(--serif); letter-spacing: 14px; text-indent: 14px; text-shadow: 0 1px 0 rgba(0, 0, 0, .35); }
.cv-frame i { width: 40px; height: 1.5px; background: currentColor; opacity: .7; }
.cv-frame span { font: 600 11px/1 var(--font); letter-spacing: 5px; opacity: .7; }
.cv-own { position: absolute; bottom: 38px; font: 500 14px/1 var(--serif); letter-spacing: 3px; opacity: .8; }
.cv-b { transform: rotateY(180deg); background: linear-gradient(90deg, #2C4838, #22392C); border-radius: 16px 4px 4px 16px !important; }
.bk-x { position: absolute; top: -6px; right: -48px; width: 38px; height: 38px; border-radius: 50%; background: rgba(255, 250, 240, .9); color: #3F3426; box-shadow: 0 6px 16px -6px rgba(0, 0, 0, .4); }
/* 左页：持有人 + 总数 + 目录 */
.bk-owner { display: flex; align-items: center; gap: 14px; padding-bottom: 20px; border-bottom: 1px solid rgba(90, 70, 40, .15); }
.bk-owner img { width: 52px; height: 52px; border-radius: 50%; background: #E7EEE6; box-shadow: 0 0 0 2px #fff, 0 0 0 3px rgba(90, 70, 40, .15); }
.bk-owner b { display: block; font: 700 19px/1.3 var(--serif); letter-spacing: 1px; }
.bk-owner small { font-size: 12.5px; color: #8C7C66; }
.bk-total { display: flex; align-items: center; gap: 26px; padding: 22px 0; }
.bk-ring { --p: 0; flex: none; width: 104px; height: 104px; border-radius: 50%; display: flex; flex-direction: column; align-items: center; justify-content: center; background: radial-gradient(closest-side, #FBF6EA 84%, transparent 85%), conic-gradient(#2F5D4A calc(var(--p) * 1%), rgba(90, 70, 40, .12) 0); }
.bk-ring b { font: 700 30px/1 var(--serif); }
.bk-ring small { margin-top: 4px; font-size: 12px; color: #8C7C66; }
.bk-tiers { flex: 1; display: flex; flex-direction: column; gap: 9px; }
.bk-tiers div { display: flex; align-items: center; justify-content: space-between; padding-bottom: 8px; border-bottom: 1px dashed rgba(90, 70, 40, .16); }
.bk-tiers b { font: 700 16px/1 var(--serif); }
.bk-h { margin: 6px 0 10px; font: 600 12px/1 var(--font); letter-spacing: 6px; color: #8C7C66; }
.bk-toc { display: flex; flex-direction: column; }
.bk-toc button { display: flex; align-items: baseline; gap: 12px; padding: 12px 6px; border: 0; border-bottom: 1px solid rgba(90, 70, 40, .1); background: none; color: #3F3426; font: 500 15px/1 var(--serif); text-align: left; cursor: pointer; }
.bk-toc button:hover { background: rgba(90, 70, 40, .04); }
.bk-toc .no { font: 600 11px/1 var(--font); color: #B6A88F; }
.bk-toc .dots { flex: 1; border-bottom: 1px dotted rgba(90, 70, 40, .3); transform: translateY(-3px); }
.bk-toc .ct { font: 500 13px/1 var(--font); color: #8C7C66; }
.bk-toc button.on { color: #2F5D4A; font-weight: 700; }
.bk-toc button.on .no { color: #2F5D4A; }
.bk-foot { margin-top: auto; font-size: 12px; color: #B6A88F; letter-spacing: 1px; }
/* 左页底部：最近盖的三枚 */
.bk-recent div { display: flex; align-items: baseline; gap: 10px; padding: 7px 6px; font-size: 13px; }
.bk-recent b { font-weight: 600; }
.bk-recent .dots { flex: 1; border-bottom: 1px dotted rgba(90, 70, 40, .25); transform: translateY(-3px); }
.bk-recent small { font-size: 12px; color: #8C7C66; }
.bk-recent .none { display: block; padding: 6px; color: #B6A88F; }
/* 右页：一类印章，九枚一页 */
.bk-rh { display: flex; align-items: baseline; justify-content: space-between; padding-bottom: 14px; border-bottom: 1px solid rgba(90, 70, 40, .15); }
.bk-rh span { font: 700 20px/1 var(--serif); letter-spacing: 4px; }
.bk-rh small { font-size: 12.5px; color: #8C7C66; }
.bk-grid { flex: 1; display: grid; grid-template-columns: repeat(3, 1fr); grid-template-rows: repeat(3, minmax(0, 1fr)); gap: 4px 10px; padding-top: 12px; min-height: 0; }
.bk-st { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; min-width: 0; text-align: center; }
.bk-st .stamp-svg { margin-bottom: 2px; transform: rotate(-6deg); }
.bk-st:not(.got) .stamp-svg { opacity: .5; transform: none; }
.bk-st b { font: 600 13px/1.3 var(--font); max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bk-st small { font-size: 11px; line-height: 1.35; color: #8C7C66; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bk-st em { display: inline-flex; align-items: center; gap: 4px; font: 500 11px/1 var(--font); font-style: normal; color: #B6A88F; margin-top: 2px; }
.bk-st em .coin { width: 14px; height: 14px; font-size: 8px; }
.bk-st:not(.got) b { color: #8C7C66; }
.bk-pager { display: flex; align-items: center; justify-content: center; gap: 14px; height: 30px; font: 500 12px/1 var(--font); color: #8C7C66; }
.bk-pager button { width: 30px; height: 30px; display: grid; place-items: center; border: 1px solid rgba(90, 70, 40, .18); border-radius: 50%; background: transparent; color: #3F3426; }
.bk-pager button:disabled { opacity: .3; }
.bk-pager .nx .ico { transform: rotate(180deg); }
.bk-pager .ico { width: 15px; height: 15px; }
.book .in.flip { animation: pgflip .4s ease-out; }
@keyframes pgflip { from { opacity: 0; transform: translateX(14px); } }

/* 换装 = 商店同一套：左边展台，右边货架 */
.modal-card.wardrobe { width: 980px; height: min(680px, calc(100vh - 48px)); }
.wardrobe .chip { background: rgba(90, 70, 40, .06); box-shadow: none !important; font-weight: 700; }
.wd { grid-template-columns: 320px 1fr; }
.wd-left { background: radial-gradient(70% 50% at 50% 78%, rgba(255, 255, 255, .9), transparent 70%), linear-gradient(#EDE6D6, #F6F1E6); border-right: 1px solid var(--hair); }
.wd-tools { gap: 4px; }
.wd-tools .btn { color: var(--ink2); }
.wd-foot { background: #FBF7EE; border-top: 1px solid var(--hair); }
.wd-cost { color: var(--ink2); }
.wd-foot .btn.primary { height: 44px; border-radius: 12px; background: var(--sel); box-shadow: none; font-weight: 600; letter-spacing: 1px; }
.wd-foot .btn.primary:disabled { background: #CFC6B4; }
.wd-right .tabs { margin: 16px 22px 0; padding: 0; gap: 22px; background: none; border-bottom: 1px solid var(--hair); border-radius: 0; flex-wrap: nowrap; overflow-x: auto; overflow-y: hidden; scrollbar-width: none; }
.wd-right .tabs button { height: 36px; padding: 0 1px; border-radius: 0; color: var(--ink2); font-size: 14px; box-shadow: none; background: none; border-bottom: 2px solid transparent; margin-bottom: -1px; }
.wd-right .tabs button.on { color: var(--ink); background: none; box-shadow: none; border-bottom-color: var(--ink); }
.wd-items { padding: 16px 22px 22px; grid-template-columns: repeat(auto-fill, minmax(128px, 1fr)); gap: 12px; }
.wardrobe .item { border-radius: 12px; background: #fff; box-shadow: 0 0 0 1px var(--hair); }
.wardrobe .item:hover { transform: none; box-shadow: 0 0 0 1px rgba(90, 70, 40, .28), 0 8px 18px -10px rgba(60, 40, 20, .35); }
.wardrobe .item.on { box-shadow: 0 0 0 2px var(--ink); }
.wardrobe .item .th { height: 116px; background: #F4EFE4; }
.wardrobe .item .th img { width: 116px; height: 116px; }
.wardrobe .item .tx { padding: 9px 11px 10px; gap: 4px; }
.wardrobe .item .tx b { color: var(--ink); }
.wardrobe .item .pr { color: var(--ink2); }
.wardrobe .item .pr.own { color: var(--sel); }
.wardrobe .item .ck { background: var(--ink); }

/* 好友 */
.modal-card.friends { width: 560px; max-height: min(680px, calc(100vh - 48px)); }
.friends .m-head .sub { color: var(--ink2); }
.friends .m-body { padding: 10px 14px 18px; }
.fl-h { display: flex; align-items: center; gap: 8px; margin: 14px 8px 6px; font: 600 12px/1 var(--font); letter-spacing: 2px; color: var(--ink2); }
.fl-h span { font-weight: 500; letter-spacing: 0; color: var(--ink3); }
.fl { gap: 2px; }
.fl.mine { padding-bottom: 6px; border-bottom: 1px solid var(--hair); }
.fr { padding: 9px 10px; border-radius: 12px; }
.fr:hover { background: rgba(90, 70, 40, .05); }
.fr .av { position: relative; flex: none; }
.fr img { display: block; width: 46px; height: 46px; background: #E7EEE6; }
.fr .av .dot { position: absolute; right: 0; bottom: 1px; }
.dot { display: inline-block; width: 9px; height: 9px; border-radius: 50%; background: #C9BFAE; box-shadow: 0 0 0 2px #FBF7EE; }
.dot.on { background: #4FAA6E; }
.fr .who b { font-size: 14.5px; color: var(--ink); }
.fr .who small { display: flex; align-items: center; gap: 7px; color: var(--ink2); font-size: 12.5px; }
.fr .st { flex: none; height: 19px; padding: 0 7px; display: inline-flex; align-items: center; border-radius: 5px; font: 600 11px/1 var(--font); background: rgba(90, 70, 40, .07); color: var(--ink2); }
.fr .st.play { background: #2F5D4A; color: #fff; }
.fr .st.watch { background: rgba(47, 93, 74, .12); color: #2F5D4A; }
.fr .st.fun { background: rgba(192, 138, 30, .14); color: #9A6E14; }
.fr .st.off { background: none; box-shadow: inset 0 0 0 1px var(--hair); color: var(--ink3); }
.fr.off .who b, .fr.off img { opacity: .55; }
.fr .acts2 { gap: 4px; }
.fr .acts2 .btn { color: var(--ink); }
.fr .acts2 .btn:not(.ghost) { background: #fff; box-shadow: 0 0 0 1px var(--hair); }
.friends .invite-box { margin: 18px 8px 0; background: rgba(90, 70, 40, .045); box-shadow: none; border-radius: 12px; }
.friends .invite-box .btn.primary { background: var(--sel); box-shadow: none; }

/* 我的主页 */
.modal-card.profile { width: 960px; height: min(660px, calc(100vh - 48px)); }
.pf { grid-template-columns: 300px 1fr; }
.pf-left { background: radial-gradient(70% 45% at 50% 60%, rgba(255, 255, 255, .85), transparent 70%), linear-gradient(#EDE6D6, #F6F1E6); border-right: 1px solid var(--hair); }
.pf-id { flex: none; padding: 16px 20px 18px; border-top: 1px solid var(--hair); background: #FBF7EE; }
.pf-id .pf-name { margin-bottom: 6px; }
.pf-id .pf-name h2 { font: 700 21px/1.25 var(--serif); letter-spacing: 1px; }
.pf-id .lv { color: var(--sel); background: rgba(47, 93, 74, .1); }
.pf-id .pf-title { margin-bottom: 6px; }
.pf-id .pf-title select { width: 100%; height: 32px; border-color: var(--hair); color: var(--ink); }
.pf-id .ttl { color: #9A6E14; font-weight: 600; }
.pf-meta { display: flex; align-items: center; gap: 6px; margin-bottom: 14px; font-size: 12px; color: var(--ink2); }
.pf-meta .dot { box-shadow: none; width: 7px; height: 7px; }
.pf-id .pf-acts { flex-wrap: nowrap; }
.pf-id .pf-acts .btn:not(.ic) { flex: 1; }
.pf-id .pf-acts .btn.primary { background: var(--sel); box-shadow: none; }
.pf-acts .pc { display: inline-flex; align-items: center; gap: 4px; opacity: .85; }
.pf-right { padding: 20px 26px 26px; }
.kpi { display: grid; grid-template-columns: repeat(6, 1fr); margin-bottom: 24px; border: 1px solid var(--hair); border-radius: 12px; background: #fff; }
.kpi div { padding: 12px 14px; }
.kpi div + div { border-left: 1px solid var(--hair); }
.kpi small { display: block; margin-bottom: 6px; font-size: 11.5px; color: var(--ink2); white-space: nowrap; }
.kpi b { font: 700 22px/1 var(--serif); color: var(--ink); }
.kpi b i { font: 500 12px/1 var(--font); font-style: normal; color: var(--ink3); margin-left: 1px; }
.profile .sec-t { margin: 0 0 10px; font: 600 13px/1.3 var(--font); letter-spacing: 2px; color: var(--ink); }
.profile .sec-t small { letter-spacing: 0; color: var(--ink3); }
.lnk { border: 0; background: none; padding: 0; font: 500 12px/1 var(--font); color: var(--sel); cursor: pointer; letter-spacing: 0; }
.rec { width: 100%; border-collapse: collapse; margin-bottom: 12px; font-size: 13px; }
.rec th { padding: 0 8px 8px; text-align: right; font: 500 11.5px/1 var(--font); color: var(--ink3); border-bottom: 1px solid var(--hair); }
.rec td { padding: 9px 8px; text-align: right; border-bottom: 1px solid rgba(90, 70, 40, .07); font-variant-numeric: tabular-nums; color: var(--ink); }
.rec th:first-child, .rec td:first-child { text-align: left; padding-left: 2px; }
.rec td:first-child { font-weight: 600; }
.rec th.wr, .rec td.wr { width: 38%; text-align: left; }
.rec .wrc { display: flex; align-items: center; gap: 10px; }
.wbar { flex: 1; height: 5px; border-radius: 3px; background: rgba(90, 70, 40, .1); overflow: hidden; }
.wbar i { display: block; height: 100%; background: var(--sel); border-radius: 3px; }
.rec .wrc span:last-child { width: 34px; text-align: right; font-size: 12px; color: var(--ink2); }
.rec td .na { width: auto !important; text-align: left !important; color: var(--ink3) !important; }
.rec tr.nil td { color: var(--ink3); }
.rec tr.nil td:first-child { color: var(--ink2); }
.solo-rec { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: 24px; }
.solo-rec div { display: flex; align-items: baseline; justify-content: space-between; padding: 12px 14px; border-radius: 10px; background: rgba(90, 70, 40, .045); }
.solo-rec small { font-size: 12px; color: var(--ink2); }
.solo-rec b { font: 700 18px/1 var(--serif); }
.profile .showcase { margin-bottom: 10px; gap: 10px; }
.profile .show-slot { border-radius: 12px; background: #fff; box-shadow: 0 0 0 1px var(--hair); color: var(--ink3); }
.profile .show-slot.can:hover, .profile .show-slot.on { box-shadow: 0 0 0 2px var(--ink); color: var(--ink); }
.profile .picker { margin: 0 0 14px; box-shadow: 0 0 0 1px var(--hair); }
.recent { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; margin: 0 0 18px; }
.recent > div { display: flex; align-items: center; gap: 8px; min-width: 0; padding: 8px 10px; border-radius: 10px; background: rgba(90, 70, 40, .045); }
.recent .stamp-svg { flex: none; transform: rotate(-6deg); }
.recent span { min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.recent b { font: 600 12.5px/1.3 var(--font); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.recent small { font-size: 11px; color: var(--ink3); }
.social { display: flex; gap: 22px; padding-top: 14px; border-top: 1px solid var(--hair); font-size: 12.5px; color: var(--ink2); }
.social b { font: 700 14px/1 var(--serif); color: var(--ink); margin: 0 2px; }
.profile .showcase + .sec-t, .profile .picker + .sec-t { margin-top: 18px; }
@media (max-width: 760px) {
  .modal-card.ach { width: 100%; }
  .book.closed { transform: none; }
  .book .pg.l { display: none; }
  .book .pg.r, .book .cover { width: 100%; left: 0; }
  .pf { grid-template-columns: 1fr; }
  .kpi { grid-template-columns: repeat(3, 1fr); }
}

/* ---------- 第一屏：创建形象（换装页）+ 起名字 + 名牌头像预览 ---------- */
body.pre .modal { z-index: 40; }
.wardrobe.pre .wd-left { position: relative; }
.wd-plate { position: absolute; left: 50%; top: 16px; transform: translateX(-50%); z-index: 1; display: flex; align-items: center; gap: 10px; max-width: 270px; padding: 6px 18px 6px 6px; border-radius: 30px; background: rgba(255, 250, 240, .92); box-shadow: 0 10px 22px -12px rgba(60, 45, 25, .5), inset 0 0 0 1px rgba(255, 255, 255, .8); white-space: nowrap; }
.wd-plate img { flex: none; width: 42px; height: 42px; border-radius: 50%; background: #DCEDEA; box-shadow: 0 0 0 2px #fff; }
.wd-plate span { min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.wd-plate b { font: 700 15px/1.2 var(--font); overflow: hidden; text-overflow: ellipsis; color: var(--ink); }
.wd-plate small { font-size: 11px; color: var(--ink2); }
.wd-name { position: relative; }
.wd-name input { width: 100%; height: 44px; padding: 0 48px 0 14px; border: 1px solid var(--hair); border-radius: 12px; background: #fff; color: var(--ink); font: 600 15px/1 var(--font); outline: none; }
.wd-name input:focus { border-color: var(--sel); box-shadow: 0 0 0 3px rgba(47, 93, 74, .14); }
.wd-name button { position: absolute; right: 6px; top: 6px; width: 32px; height: 32px; display: grid; place-items: center; border: 0; border-radius: 9px; background: rgba(90, 70, 40, .07); color: var(--ink); cursor: pointer; }
.wd-name .ico { width: 18px; height: 18px; }
.wd-err { min-height: 16px; margin: 6px 0 6px; font-size: 12px; }
.wd-login { border: 0; background: none; padding: 0 4px; color: var(--sel); font: 600 13px/1 var(--font); cursor: pointer; white-space: nowrap; }

/* 游客中心：一张小卡片，两个输入框一个按钮，下面两行小字入口 */
.modal-card.visitor { --ink: #3F3426; --ink2: #8C7C66; --ink3: #B6A88F; --hair: rgba(90, 70, 40, .14); --sel: #2F5D4A; width: 360px; background: #FBF7EE; border-radius: 20px; color: var(--ink); }
.vc-x { position: absolute; top: 12px; right: 12px; color: var(--ink3); }
.vc { padding: 34px 32px 24px; text-align: center; }
.vc h2 { margin: 0 0 8px; font: 700 22px/1.3 var(--serif); letter-spacing: 2px; }
.vc-sub { margin: 0 0 24px; font-size: 12.5px; line-height: 1.6; color: var(--ink2); }
.vc-f { display: flex; flex-direction: column; gap: 10px; }
.vc-f input { width: 100%; height: 46px; padding: 0 16px; border: 1px solid var(--hair); border-radius: 12px; background: #fff; color: var(--ink); font: 500 15px/1 var(--font); outline: none; }
.vc-f input:focus { border-color: var(--sel); box-shadow: 0 0 0 3px rgba(47, 93, 74, .12); }
.vc .form-err { min-height: 18px; margin: 8px 0 6px; font-size: 12.5px; }
.vc .btn.primary { height: 46px; border-radius: 12px; background: var(--sel); box-shadow: none; font-size: 15px; letter-spacing: 4px; }
.vc-links { display: flex; justify-content: center; align-items: center; gap: 12px; margin-top: 16px; min-height: 16px; }
.vc-links button { border: 0; background: none; padding: 0; color: var(--ink2); font: 500 12.5px/1 var(--font); cursor: pointer; }
.vc-links button:hover { color: var(--sel); }
.vc-links i { width: 1px; height: 11px; background: var(--hair); }
.vc-id { display: flex; align-items: center; justify-content: center; gap: 12px; padding: 14px; border-radius: 14px; background: #fff; box-shadow: 0 0 0 1px var(--hair); text-align: left; }
.vc-id img { width: 44px; height: 44px; border-radius: 50%; background: #E7EEE6; }
.vc-id small { display: block; font-size: 11px; color: var(--ink2); }
.vc-id b { font: 700 18px/1.3 var(--font); }
.vc-code { display: block; padding: 16px 10px; border-radius: 12px; background: #fff; box-shadow: 0 0 0 1px var(--hair); font: 700 18px/1.4 ui-monospace, Menlo, monospace; letter-spacing: 1.5px; color: var(--ink); user-select: all; }

/* 门票：登记完领到的纸票，右边一截撕口存根，盖着「入园」章 */
.modal-card.tkm { background: transparent; box-shadow: none; overflow: visible; animation: none; }
.tk-wrap { --ink: #3F3426; --ink2: #8C7C66; --ink3: #B6A88F; --sel: #2F5D4A; display: flex; flex-direction: column; align-items: center; color: var(--ink); }
.tk-hello { text-align: center; color: #FFF9EC; margin-bottom: 22px; animation: tkfade .5s ease-out both; text-shadow: 0 2px 12px rgba(30, 20, 5, .45); }
.tk-hello small { font: 600 11px/1 ui-monospace, Menlo, monospace; letter-spacing: 4px; opacity: .85; }
.tk-hello h2 { margin: 10px 0 6px; font: 700 34px/1.2 var(--serif); letter-spacing: 4px; }
.tk-hello p { margin: 0; font-size: 13.5px; opacity: .9; }
.ticket { display: grid; grid-template-columns: 1fr 150px; width: min(600px, calc(100vw - 32px)); filter: drop-shadow(0 2px 2px rgba(60, 40, 20, .12)) drop-shadow(0 26px 34px rgba(30, 20, 5, .45)); animation: tkin .9s cubic-bezier(.2, .9, .25, 1.15) .15s both; transform-origin: 50% 120%; }
.ticket .main, .ticket .stub { position: relative; background: #FBF6EA; background-image: radial-gradient(rgba(120, 90, 40, .06) 1px, transparent 1px); background-size: 5px 5px; }
.ticket .main { padding: 24px 28px 20px; border-radius: 14px 0 0 14px; -webkit-mask: radial-gradient(circle at 100% 0, #0000 12px, #000 12.5px) top / 100% 51% no-repeat, radial-gradient(circle at 100% 100%, #0000 12px, #000 12.5px) bottom / 100% 51% no-repeat; mask: radial-gradient(circle at 100% 0, #0000 12px, #000 12.5px) top / 100% 51% no-repeat, radial-gradient(circle at 100% 100%, #0000 12px, #000 12.5px) bottom / 100% 51% no-repeat; }
.ticket .stub { border-radius: 0 14px 14px 0; display: flex; flex-direction: column; align-items: center; justify-content: space-between; padding: 22px 0 20px; -webkit-mask: radial-gradient(circle at 0 0, #0000 12px, #000 12.5px) top / 100% 51% no-repeat, radial-gradient(circle at 0 100%, #0000 12px, #000 12.5px) bottom / 100% 51% no-repeat; mask: radial-gradient(circle at 0 0, #0000 12px, #000 12.5px) top / 100% 51% no-repeat, radial-gradient(circle at 0 100%, #0000 12px, #000 12.5px) bottom / 100% 51% no-repeat; }
.ticket .stub::before { content: ''; position: absolute; left: 0; top: 18px; bottom: 18px; border-left: 2px dotted rgba(60, 45, 25, .3); }
.ticket .meta { display: flex; justify-content: space-between; font: 600 11px/1 ui-monospace, Menlo, monospace; letter-spacing: 3px; color: var(--ink2); }
.ticket h3 { margin: 14px 0 16px; font: 700 22px/1.3 var(--serif); letter-spacing: 1px; }
.ticket .lbl { font: 600 12px/1 var(--font); letter-spacing: 2px; color: var(--ink2); }
.ticket .code { margin: 10px 0 14px; padding: 12px 0; border-top: 1px dashed rgba(90, 70, 40, .22); border-bottom: 1px dashed rgba(90, 70, 40, .22); font: 700 27px/1 ui-monospace, Menlo, monospace; letter-spacing: 2px; color: var(--sel); user-select: all; white-space: nowrap; }
.ticket .code i { font-style: normal; color: var(--ink3); margin: 0 4px; }
.ticket p { margin: 0 0 16px; font-size: 12.5px; line-height: 1.7; color: var(--ink2); }
.ticket .foot { display: flex; gap: 26px; font-size: 12px; color: var(--ink2); }
.ticket .foot b { margin-left: 8px; color: var(--ink); font-weight: 600; }
.ticket .adm, .ticket .v { font: 700 10.5px/1 ui-monospace, Menlo, monospace; letter-spacing: 3px; color: var(--ink3); }
.ticket .v { font-family: var(--serif); letter-spacing: 6px; font-size: 13px; color: var(--ink2); }
.ticket .sp { animation: tkstamp .35s cubic-bezier(.3, 1.6, .5, 1) 1s both; }
.tk-stamp { display: block; width: 104px; height: 104px; transform: rotate(-12deg); opacity: .88; }
.tk-acts { display: flex; gap: 10px; margin-top: 26px; animation: tkfade .4s ease-out 1.2s both; }
.tk-acts .btn { height: 44px; padding: 0 18px; border-radius: 22px; background: rgba(255, 250, 240, .92); color: var(--ink); box-shadow: none; }
.tk-acts .btn .ico { transform: rotate(-90deg); }
.tk-acts .btn.primary { background: var(--sel); color: #fff; padding: 0 24px; letter-spacing: 1px; }
@keyframes tkin { from { opacity: 0; transform: translateY(80px) rotate(-6deg) scale(.9); } 60% { opacity: 1; } to { transform: rotate(-1.2deg); } }
@keyframes tkstamp { from { opacity: 0; transform: scale(2.2) rotate(8deg); } }
@keyframes tkfade { from { opacity: 0; transform: translateY(8px); } }
@media (max-width: 640px) { .ticket { grid-template-columns: 1fr 96px; } .tk-stamp { width: 76px; height: 76px; } .ticket .code { font-size: 19px; } .tk-acts { flex-wrap: wrap; justify-content: center; } }

/* 登记提醒：一张小票从底部滑上来，左边深绿存根写「门票」，只出现一次 */
.regtip { position: fixed; left: 50%; bottom: 84px; z-index: 15; display: flex; width: min(470px, calc(100vw - 32px)); transform: translateX(-50%); filter: drop-shadow(0 2px 2px rgba(60, 40, 20, .1)) drop-shadow(0 20px 30px rgba(40, 28, 12, .38)); animation: rtin .6s cubic-bezier(.2, .9, .3, 1.2) both; }
.regtip.hidden { display: none; }
.regtip.out { animation: rtout .3s ease-in both; }
.rt-stub { flex: none; width: 58px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; border-radius: 14px 0 0 14px; background: radial-gradient(120% 90% at 30% 20%, #3B5A47, #22392C); color: #D9BC7A; font: 700 17px/1 var(--serif); -webkit-mask: radial-gradient(circle at 100% 0, #0000 8px, #000 8.5px) top / 100% 51% no-repeat, radial-gradient(circle at 100% 100%, #0000 8px, #000 8.5px) bottom / 100% 51% no-repeat; mask: radial-gradient(circle at 100% 0, #0000 8px, #000 8.5px) top / 100% 51% no-repeat, radial-gradient(circle at 100% 100%, #0000 8px, #000 8.5px) bottom / 100% 51% no-repeat; }
.rt-main { position: relative; flex: 1; min-width: 0; padding: 16px 20px 14px; border-radius: 0 14px 14px 0; background: #FBF6EA; background-image: radial-gradient(rgba(120, 90, 40, .06) 1px, transparent 1px); background-size: 5px 5px; color: #3F3426; -webkit-mask: radial-gradient(circle at 0 0, #0000 8px, #000 8.5px) top / 100% 51% no-repeat, radial-gradient(circle at 0 100%, #0000 8px, #000 8.5px) bottom / 100% 51% no-repeat; mask: radial-gradient(circle at 0 0, #0000 8px, #000 8.5px) top / 100% 51% no-repeat, radial-gradient(circle at 0 100%, #0000 8px, #000 8.5px) bottom / 100% 51% no-repeat; }
.rt-main::before { content: ''; position: absolute; left: 0; top: 12px; bottom: 12px; border-left: 2px dotted rgba(60, 45, 25, .28); }
.rt-main b { display: block; font: 700 15px/1.35 var(--font); }
.rt-main small { display: block; margin: 5px 0 12px; font-size: 12.5px; line-height: 1.6; color: #8C7C66; }
.rt-a { display: flex; align-items: center; gap: 14px; }
.rt-a button { height: 34px; padding: 0; border: 0; background: none; color: #8C7C66; font: 500 13px/1 var(--font); cursor: pointer; }
.rt-a button:hover { color: #3F3426; }
.rt-a .go { padding: 0 16px; border-radius: 17px; background: #2F5D4A; color: #fff; font-weight: 600; letter-spacing: .5px; }
.rt-a .go:hover { background: #274F3E; color: #fff; }
@keyframes rtin { from { opacity: 0; transform: translate(-50%, 40px) rotate(-2deg); } }
@keyframes rtout { to { opacity: 0; transform: translate(-50%, 24px); } }