/* ============================================================
 * 方案 A「黏土白瓷派对」· runtime 设计 token / 组件基线
 * 来源：evidence/ui_preview/mvp_visual_review.html 的 .skin-a（已拍板）
 * 评审批次 MVP-VISUAL-001 · 逻辑尺寸 390×844 pt @1x · 浅色底
 * 五要素：大卡浮层 / 黏土钮三层影 / 输入框内凹 / 球面径向高光 / 相框接触阴影
 * 禁止深色背景；禁止扁平平涂 + 细描边。
 * ============================================================ */
:root{
  --bg:#F4F7FB; --card:#FFFFFF;
  --p:#4A90E2; --p-l:#6BA6EA; --p-d:#2E6CA8;
  --s1:#52C41A; --s1d:#2F8A0C;
  --s2:#FA8C16; --s2d:#C46A0A;
  --s3:#F5222D;
  --sunk:#EDF2F8;
  --ink:#333333; --ink2:#5A6B7C; --ink3:#8A99A8; --line:#E3EAF2;
  --r:16px; --btn-thick:4px;
  --font:-apple-system,BlinkMacSystemFont,"PingFang SC","Microsoft YaHei",sans-serif;
  /* ① 大卡浮层：双层柔影 + 顶缘高光 */
  --card-shadow:0 2px 3px rgba(28,52,82,.08),0 8px 16px rgba(28,52,82,.10),inset 0 1px 0 #fff;
  /* ② 黏土钮：底部厚度 + 外投影 + 内顶高光 + 内底暗缘 */
  --clay-shadow:0 4px 0 var(--p-d),0 9px 16px rgba(28,52,82,.20),inset 0 2px 0 rgba(255,255,255,.55),inset 0 -3px 6px rgba(0,0,0,.14);
  --clay-shadow-ghost:0 3px 0 rgba(28,52,82,.10),0 8px 14px rgba(28,52,82,.12),inset 0 2px 0 #fff,inset 0 -3px 6px rgba(28,52,82,.07);
  /* ③ 输入框内凹：上暗下亮 + 外底亮线 */
  --sunk-shadow:inset 0 2px 5px rgba(28,52,82,.15),inset 0 -1px 0 rgba(255,255,255,.95),0 1px 0 rgba(255,255,255,.9);
}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{margin:0;padding:0}
body{background:#F8F9FA;color:var(--ink);font-family:var(--font);line-height:1.55;-webkit-font-smoothing:antialiased}
button{font-family:inherit;cursor:pointer}

/* ── 手机外壳（评审页 .screen 的 1× 实尺寸版本） ────────────── */
.phone{width:390px;height:844px;border-radius:44px;position:relative;overflow:hidden;border:9px solid #fff;
 background:var(--bg);color:var(--ink);flex:0 0 390px;
 box-shadow:0 2px 4px rgba(28,52,82,.06),0 12px 28px rgba(28,52,82,.13),0 24px 48px rgba(28,52,82,.07),inset 0 1px 0 rgba(255,255,255,.95)}
.screen{position:absolute;inset:0;padding:22px 20px 20px;display:flex;flex-direction:column;gap:14px;overflow:hidden}
.screen::-webkit-scrollbar{display:none}
.ui{position:relative;z-index:1}
.bottom{margin-top:auto}

/* ── 通用文字 / 顶栏 ─────────────────────────────────────── */
.topbar{display:flex;align-items:center;gap:11px;height:34px;flex:0 0 34px}
.brand{font-size:14px;font-weight:600;flex:1;letter-spacing:.02em}
.h1{font-size:26px;font-weight:800;line-height:1.28;letter-spacing:-.01em}
.h2{font-size:14px;color:var(--ink2);margin-top:3px}
.label{font-size:13px;font-weight:600;color:var(--ink2);letter-spacing:.03em}
.fine{font-size:11px;color:var(--ink3);text-align:center;margin-top:5px;line-height:1.5}
.chip{display:inline-block;font-size:11px;border-radius:6px;padding:2px 8px;background:var(--sunk);color:var(--ink2)}

/* ④ 圆形件球面径向高光 */
.sphere{width:34px;height:34px;border-radius:50%;flex:0 0 34px;
 background:radial-gradient(circle at 32% 26%,#fff 0%,var(--s1) 26%,var(--s1d) 100%);
 box-shadow:inset -3px -5px 7px rgba(0,0,0,.17),0 4px 8px rgba(28,52,82,.18)}
.sphere.small{width:24px;height:24px;flex-basis:24px}
.sphere.blue{background:radial-gradient(circle at 32% 26%,#fff 0%,var(--p-l) 26%,var(--p-d) 100%)}
.sphere.orange{background:radial-gradient(circle at 32% 26%,#fff 0%,var(--s2) 26%,var(--s2d) 100%)}

/* ② 黏土钮三层影 */
.clay-btn{border:0;border-radius:var(--r);padding:16px 18px;color:#fff;font-size:17px;font-weight:700;
 text-align:left;width:100%;background:linear-gradient(180deg,var(--p-l),var(--p));
 box-shadow:var(--clay-shadow);text-shadow:0 1px 1px rgba(0,0,0,.16);
 display:flex;justify-content:space-between;align-items:center;transition:transform .08s,box-shadow .08s}
.clay-btn .ar{font-size:22px;font-weight:400}
.clay-btn:active{transform:translateY(3px);box-shadow:0 1px 0 var(--p-d),0 4px 8px rgba(28,52,82,.18),inset 0 2px 0 rgba(255,255,255,.45),inset 0 -2px 5px rgba(0,0,0,.18)}
.clay-btn.ghost{background:linear-gradient(180deg,#FFFFFF,var(--card));color:var(--p-d);box-shadow:var(--clay-shadow-ghost);text-shadow:none}
.clay-btn.ghost:active{box-shadow:0 1px 0 rgba(28,52,82,.10),0 4px 8px rgba(28,52,82,.12),inset 0 2px 0 #fff,inset 0 -2px 5px rgba(28,52,82,.10)}
.clay-btn.warm{background:linear-gradient(180deg,#FFB55C,var(--s2));box-shadow:0 4px 0 var(--s2d),0 9px 16px rgba(28,52,82,.20),inset 0 2px 0 rgba(255,255,255,.55),inset 0 -3px 6px rgba(0,0,0,.14)}
.clay-btn[disabled]{opacity:.55;pointer-events:none}

/* ③ 输入框内凹 */
.input-sunk{background:var(--sunk);border:0;border-radius:var(--r);padding:13px 15px;font-size:14px;color:var(--ink3);
 box-shadow:var(--sunk-shadow);outline:none;width:100%}

/* ① 大卡浮层 / ⑤ 相框 + 接触阴影 */
.frame-card{background:var(--card);border-radius:var(--r);padding:9px;border:1px solid rgba(28,52,82,.06);
 box-shadow:var(--card-shadow);display:flex;align-items:center;gap:13px;margin-bottom:11px;cursor:pointer;transition:transform .1s}
.frame-card:active{transform:scale(.985)}
.thumb{width:84px;height:64px;border-radius:12px;border:5px solid #fff;flex:0 0 84px;position:relative;
 box-shadow:0 3px 7px rgba(28,52,82,.18);background:linear-gradient(150deg,#EAF3FD,#D7EAFB);overflow:hidden}
.thumb.t2{background:linear-gradient(150deg,#EDF9E7,#D9F2C6)}
.thumb.t3{background:linear-gradient(150deg,#FFF3E6,#FFE2BF)}
.thumb .mini{position:absolute;width:26px;height:26px;border-radius:50%;top:16px;left:26px;
 background:radial-gradient(circle at 32% 26%,#fff 0%,var(--p) 30%,var(--p-d) 100%);
 box-shadow:inset -2px -2px 4px rgba(0,0,0,.18),0 2px 4px rgba(28,52,82,.2)}
.thumb.t2 .mini{background:radial-gradient(circle at 32% 26%,#fff 0%,var(--s1) 30%,var(--s1d) 100%)}
.thumb.t3 .mini{background:radial-gradient(circle at 32% 26%,#fff 0%,var(--s2) 30%,var(--s2d) 100%)}
.gc-name{font-size:16px;font-weight:700;line-height:1.3}
.gc-desc{font-size:12px;color:var(--ink3);margin-top:3px}

.tabbar{display:flex;justify-content:space-around;align-items:center;height:46px;margin-top:12px;background:var(--card);
 border-radius:16px;box-shadow:0 2px 6px rgba(28,52,82,.10),inset 0 1px 0 #fff;font-size:12px;color:var(--ink3)}
.tabbar .on{color:var(--p-d);font-weight:700}

/* ── 对局页 ─────────────────────────────────────────────── */
.scorebar{display:flex;align-items:center;gap:10px;background:var(--card);border-radius:16px;padding:12px 14px;
 box-shadow:0 2px 4px rgba(28,52,82,.07),0 8px 16px rgba(28,52,82,.09),inset 0 1px 0 #fff;flex:0 0 auto}
.scorebar .n{font-size:24px;font-weight:800;color:var(--p-d)}
.scorebar .t{font-size:13px;color:var(--ink2);flex:1}
.pips{display:flex;gap:5px}
.pip{width:10px;height:10px;border-radius:50%;background:var(--sunk);box-shadow:inset 0 1px 2px rgba(28,52,82,.18)}
.pip.on{background:var(--s2);box-shadow:inset 0 1px 0 rgba(255,255,255,.6),0 1px 2px rgba(28,52,82,.15)}
/* P2 区倒置（两人对坐，竖屏上下分区）——设计意图，非渲染 bug */
.p2-zone{transform:rotate(180deg)}
.p2-note{font-size:11px;color:var(--ink3);text-align:center;letter-spacing:.02em}

.arena{flex:1;min-height:0;border-radius:24px;position:relative;
 background:linear-gradient(170deg,#FFFFFF,var(--bg));border:1px solid rgba(28,52,82,.06);
 box-shadow:inset 0 2px 8px rgba(28,52,82,.09),inset 0 -1px 0 #fff,0 6px 14px rgba(28,52,82,.07);
 overflow:hidden;touch-action:none}
.arena .mid{position:absolute;left:0;right:0;top:50%;height:0;border-top:1px dashed rgba(28,52,82,.18)}
.arena .hint{position:absolute;left:0;right:0;text-align:center;font-size:12px;color:var(--ink3);pointer-events:none}
.paddle{position:absolute;left:50%;transform:translateX(-50%);width:100px;height:15px;border-radius:10px;
 background:linear-gradient(180deg,var(--p-l),var(--p-d));
 box-shadow:0 3px 6px rgba(28,52,82,.24),inset 0 1px 0 rgba(255,255,255,.7)}
.paddle.p2{background:linear-gradient(180deg,#FFC078,var(--s2d))}
.ball{position:absolute;left:50%;top:46%;width:26px;height:26px;border-radius:50%;transform:translate(-50%,-50%);
 background:radial-gradient(circle at 32% 26%,#fff 0%,var(--s2) 28%,var(--s2d) 100%);
 box-shadow:inset -2px -3px 5px rgba(0,0,0,.2),0 4px 8px rgba(28,52,82,.24)}
.half-tag{position:absolute;left:12px;font-size:11px;color:var(--ink3);pointer-events:none}

.grid3{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;width:100%}
.cell{aspect-ratio:1;border:0;border-radius:var(--r);background:var(--sunk);display:flex;align-items:center;justify-content:center;
 box-shadow:inset 0 3px 6px rgba(28,52,82,.16),inset 0 -1px 0 rgba(255,255,255,.9),0 1px 0 rgba(255,255,255,.9)}
.cell.mark{background:var(--card);box-shadow:0 3px 7px rgba(28,52,82,.13),inset 0 2px 0 #fff}
.cell .m{width:44px;height:44px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:24px;font-weight:800;color:#fff;
 background:radial-gradient(circle at 32% 26%,#fff 0%,var(--p) 26%,var(--p-d) 100%);
 box-shadow:inset -3px -5px 7px rgba(0,0,0,.18),0 3px 6px rgba(28,52,82,.22)}
.cell .m.o{background:radial-gradient(circle at 32% 26%,#fff 0%,var(--s2) 26%,var(--s2d) 100%)}
.cell:disabled{cursor:default}

.progress{height:14px;border-radius:999px;background:var(--sunk);box-shadow:inset 0 2px 4px rgba(28,52,82,.16);overflow:hidden}
.progress i{display:block;height:100%;width:0;border-radius:999px;background:linear-gradient(180deg,var(--s1),var(--s1d));
 box-shadow:inset 0 1px 0 rgba(255,255,255,.5);transition:width .25s}
.track{position:relative;flex:1;min-height:0;border-radius:24px;background:linear-gradient(170deg,#FFFFFF,var(--bg));
 box-shadow:inset 0 2px 8px rgba(28,52,82,.09),inset 0 -1px 0 #fff;overflow:hidden}
.rail{position:absolute;left:24px;right:24px;height:0;border-top:2px dashed rgba(28,52,82,.15)}
.door{position:absolute;left:50%;top:12%;transform:translateX(-50%);width:60px;height:100px;border-radius:10px;
 background:linear-gradient(180deg,#DDE8F3,#B9CCE0);box-shadow:0 4px 9px rgba(28,52,82,.18),inset 0 2px 0 rgba(255,255,255,.8)}
.switch{position:absolute;width:40px;height:40px;border-radius:50%;
 background:radial-gradient(circle at 32% 26%,#fff 0%,var(--s1) 28%,var(--s1d) 100%);
 box-shadow:inset -2px -3px 5px rgba(0,0,0,.18),0 3px 6px rgba(28,52,82,.2)}
.coop-pad{position:absolute;left:50%;transform:translateX(-50%);width:78%;border:0;border-radius:22px;padding:18px 10px;
 font-size:16px;font-weight:800;color:#fff;background:linear-gradient(180deg,var(--p-l),var(--p));box-shadow:var(--clay-shadow);text-shadow:0 1px 1px rgba(0,0,0,.16)}
.coop-pad.p2{background:linear-gradient(180deg,#FFB55C,var(--s2));box-shadow:0 4px 0 var(--s2d),0 9px 16px rgba(28,52,82,.20),inset 0 2px 0 rgba(255,255,255,.55),inset 0 -3px 6px rgba(0,0,0,.14)}
.coop-pad:active{transform:translateX(-50%) translateY(3px)}
.stat2{display:flex;gap:10px}
.stat2>div{flex:1;background:var(--card);border-radius:14px;padding:11px;box-shadow:0 2px 4px rgba(28,52,82,.07),0 7px 14px rgba(28,52,82,.10),inset 0 1px 0 #fff}

/* ⑤ 场终战报：相框 + 接触阴影 */
.report-card{background:var(--card);border:9px solid #fff;border-radius:var(--r);padding:12px;
 box-shadow:0 2px 3px rgba(28,52,82,.08),0 10px 20px rgba(28,52,82,.14)}
.photo{height:140px;border-radius:14px;background:linear-gradient(150deg,#EAF3FD,#CBE1F8);position:relative;
 box-shadow:inset 0 2px 6px rgba(28,52,82,.1);overflow:hidden;display:flex;align-items:center;justify-content:center}
.photo .flash{font-size:23px;font-weight:800;color:var(--p-d);text-shadow:0 1px 0 #fff}

/* 合规：局内零广告。下面这条选择器存在的意义是「一旦出现即视为违规」 */
.ad-slot,[data-ad],iframe[data-ad]{display:none !important}

/* ── 页面外壳（评审页，不属于手机屏） ───────────────────── */
.page{max-width:1280px;margin:0 auto;padding:0 28px 80px}
header{background:linear-gradient(160deg,#FFFFFF,#EAF3FD);border-bottom:1px solid var(--line);padding:34px 0 28px}
header .page{padding-bottom:0}
.eyebrow{display:inline-block;font-size:11.5px;letter-spacing:.12em;color:var(--p-d);background:#fff;border:1px solid #D6E7FA;border-radius:999px;padding:4px 12px}
h1.title{font-size:26px;margin:12px 0 6px}
.sub{font-size:13.5px;color:var(--ink2);margin:0 0 14px;max-width:920px}
.meta span{display:inline-block;font-size:11.5px;color:var(--ink2);background:rgba(255,255,255,.9);border:1px solid #DCE9F7;border-radius:7px;padding:4px 10px;margin:2px 5px 2px 0}
.stage{display:flex;gap:36px;align-items:flex-start;flex-wrap:wrap;margin-top:28px}
.side{flex:1;min-width:420px}
.side h2{font-size:18px;margin:0 0 6px}
.side p{font-size:13px;color:var(--ink2)}
.card{background:#fff;border:1px solid var(--line);border-radius:16px;padding:16px 18px;box-shadow:0 1px 2px rgba(28,52,82,.04),0 8px 24px rgba(28,52,82,.08);margin:14px 0}
table{width:100%;border-collapse:separate;border-spacing:0;font-size:12.5px}
th{background:linear-gradient(180deg,#F0F6FD,#E8F1FB);text-align:left;padding:8px 10px;border-bottom:1px solid #D9E6F4;white-space:nowrap}
td{padding:7px 10px;border-bottom:1px solid #EEF3F8;color:var(--ink2);vertical-align:top}
tr:last-child td{border-bottom:none}
td strong{color:var(--ink)}
.ok{color:#3A8F12;font-weight:700}
.bad{color:#C4262E;font-weight:700}
code{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:11.5px;background:#F4F7FB;padding:1px 5px;border-radius:4px}
.legend{font-size:12px;color:var(--ink2);line-height:1.8}
.foot{margin-top:36px;padding-top:14px;border-top:1px solid var(--line);font-size:11.5px;color:var(--ink3)}
@media(max-width:900px){.stage{gap:18px}.side{min-width:320px}.phone{transform:scale(.85);transform-origin:top left;margin-bottom:-120px}}