:root {
  --sky:rgba(240,250,255,.72); --sky2:rgba(223,240,251,.8); --card:rgba(255,255,255,.78);
  --mint:#6fd6c4; --mint-dp:#3fb39e; --mint-soft:#bfe9df; --mint-ink:#15564b;
  --blue:#5bb8e8; --sun:#ffd45e; --coral:#ff8a73; --coral-soft:#fff3f0;
  --ink:#2f4858; --muted:#7e97a6; --line:#dcedf5; --line2:#c9e2ef;
  --black:#4a5a66; --black-edge:#34424c; --red:#d9483b; --red-edge:#a8281c;
  --ok:#3f9d6e; --warn:#e8623f; --pending:#c9971a;
  --shadow:0 8px 24px rgba(31,112,160,.18);
}
* { box-sizing:border-box; }
/* 海天一色：天空 → 海面 渐变，固定不随滚动 */
body { margin:0; font-family:"Quicksand","Nunito","M PLUS Rounded 1c","Segoe UI","Microsoft YaHei",sans-serif;
  background:linear-gradient(180deg,#d9f1ff 0%,#eefaff 26%,#c4eaf8 48%,#92d4ec 72%,#62b8dd 100%) fixed;
  min-height:100vh; color:var(--ink); -webkit-font-smoothing:antialiased; }
/* 半透明面板统一毛玻璃 */
.controls,.card,.bot-card,.empty-hero,.modal,.info-card,.rules-panel,.result-banner,.ver-row,.match-row,.lb-table td,.guide-content pre { backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px); }
code,pre,.mono { font-family:"Cascadia Code","Fira Code",monospace; }
h1,h2,h3 { font-weight:600; }
a { color:var(--blue); cursor:pointer; text-decoration:none; }
a:hover { text-decoration:underline; }
.hidden { display:none !important; }

/* ---- Topbar ---- */
.topbar { display:flex; align-items:center; gap:18px; padding:10px 24px; background:rgba(255,255,255,.62); backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px); box-shadow:0 2px 12px rgba(31,112,160,.12); flex-wrap:wrap; position:sticky; top:0; z-index:20; }
.brand { display:flex; align-items:center; gap:10px; }
.brand-mark { font-size:26px; }
.brand-text h1 { margin:0; font-size:20px; line-height:1; display:flex; align-items:baseline; gap:8px; }
.brand-en { font-size:13px; font-weight:700; letter-spacing:1px; color:var(--mint-dp); font-style:italic; }
.brand-sub { font-size:10px; letter-spacing:2px; color:var(--mint-dp); font-weight:600; }
.tabs { display:flex; gap:4px; margin-left:10px; flex-wrap:wrap; }
.tab { background:transparent; border:none; color:var(--muted); padding:8px 14px; font-size:14px; font-weight:600; cursor:pointer; border-radius:999px; transition:.15s; font-family:inherit; }
.tab:hover { color:var(--ink); background:var(--sky); }
.tab.active { color:var(--mint-ink); background:var(--mint-soft); }
.auth-state { margin-left:auto; display:flex; align-items:center; gap:10px; font-size:14px; }
.auth-state .who { display:flex; align-items:center; gap:8px; font-weight:600; }
.tab-panel { display:none; }
.tab-panel.active { display:block; }

/* ---- Buttons ---- */
button { font-family:inherit; background:var(--card); color:var(--ink); border:1.5px solid var(--line2); border-radius:999px; padding:8px 16px; cursor:pointer; font-size:14px; font-weight:600; transition:.15s; white-space:nowrap; }
button:hover:not(:disabled) { border-color:var(--mint); color:var(--mint-ink); }
button:disabled { opacity:.45; cursor:not-allowed; }
button.primary { background:var(--mint); color:var(--mint-ink); border-color:var(--mint); box-shadow:0 4px 0 var(--mint-dp); }
button.primary:hover:not(:disabled) { transform:translateY(-1px); color:var(--mint-ink); }
button.primary:active:not(:disabled) { transform:translateY(2px); box-shadow:0 2px 0 var(--mint-dp); }
button.primary.block { display:block; width:100%; padding:11px; font-size:15px; margin-top:6px; }
button.secondary { background:var(--card); }
button.mini { padding:6px 12px; font-size:13px; }
button.icon-btn { border:none; background:transparent; color:var(--muted); padding:4px 8px; font-size:16px; }
button.icon-btn:hover { color:var(--coral); background:transparent; }
button.danger { color:var(--warn); border-color:#f3c9bd; }
button.danger:hover:not(:disabled) { border-color:var(--coral); color:var(--warn); }

/* ---- 观战 layout ---- */
.layout { display:grid; grid-template-columns:minmax(340px,520px) 300px; gap:24px; padding:24px; max-width:980px; margin:0 auto; }
@media(max-width:820px){ .layout{ grid-template-columns:1fr; } }

.controls { background:var(--card); border-radius:18px; padding:16px; display:grid; gap:10px; margin-bottom:16px; box-shadow:var(--shadow); }
.ctrl-row { display:flex; align-items:center; gap:10px; }
.ctrl-row label { min-width:64px; flex:0 0 auto; white-space:nowrap; color:var(--muted); font-size:14px; display:flex; align-items:center; gap:6px; font-weight:600; }
.dot { width:10px; height:10px; border-radius:50%; display:inline-block; }
.black-dot { background:var(--black); } .red-dot { background:var(--red); }
select,input[type=text],input[type=email],input[type=password],input[type=number],textarea {
  font-family:inherit; background:var(--sky); color:var(--ink); border:1.5px solid var(--line2); border-radius:12px; padding:9px 12px; font-size:14px; width:100%; transition:.15s; }
select:focus,input:focus,textarea:focus { outline:none; border-color:var(--mint); background:#fff; box-shadow:0 0 0 3px rgba(111,214,196,.25); }
.controls input[type=number],.ctrl-row input[type=number],.ctrl-row input[type=password] { width:90px; flex:0 0 auto; }
.ctrl-row input[type=range] { flex:1; }

/* ---- board ---- */
.board-wrap { display:flex; flex-direction:column; align-items:center; }
.board { display:grid; grid-template-columns:repeat(4,1fr); grid-template-rows:repeat(4,1fr); gap:5px; width:100%; max-width:460px; aspect-ratio:1/1; background:rgba(150,212,240,.45); backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px); padding:10px; border-radius:18px; box-shadow:var(--shadow); }
.cell { background:rgba(255,255,255,.55); border-radius:12px; position:relative; display:flex; align-items:center; justify-content:center; transition:box-shadow .15s; }
.cell.alt { background:rgba(232,247,255,.5); }
.cell.lastfrom { box-shadow:inset 0 0 0 3px rgba(111,214,196,.6); }
.cell.lastto { box-shadow:inset 0 0 0 3px var(--mint); }
.cell.captured::after { content:"✕"; position:absolute; color:var(--coral); font-size:26px; font-weight:700; opacity:.9; animation:capflash .6s ease; }
@keyframes capflash { from{transform:scale(1.8);opacity:0;} to{transform:scale(1);opacity:.9;} }
.token { width:84%; height:84%; display:flex; align-items:center; justify-content:center; animation:drop .18s ease; filter:drop-shadow(0 3px 3px rgba(47,72,88,.25)); }
@keyframes drop { from{transform:translateY(-6px) scale(.9);opacity:.4;} to{transform:none;opacity:1;} }
.token svg { width:100%; height:100%; display:block; }
/* 试玩交互态 */
.cell.clickable { cursor:pointer; }
.cell.clickable:hover { box-shadow:inset 0 0 0 2px rgba(111,214,196,.45); }
.cell.sel { box-shadow:inset 0 0 0 3px var(--mint) !important; cursor:pointer; }
.cell.hint { cursor:pointer; }
.cell.hint::before { content:""; position:absolute; width:30%; height:30%; border-radius:50%; background:rgba(111,214,196,.55); animation:hintpulse 1.1s ease infinite; }
@keyframes hintpulse { 0%,100%{transform:scale(1);} 50%{transform:scale(1.18);} }
.mini-icon { display:inline-flex; width:18px; height:18px; vertical-align:-4px; }
.mini-icon svg { width:100%; height:100%; }
.status-line { margin-top:12px; color:var(--muted); font-size:14px; min-height:20px; text-align:center; }
.playback { display:flex; align-items:center; gap:8px; margin-top:16px; justify-content:center; flex-wrap:wrap; }
.playback .speed { display:flex; align-items:center; gap:6px; color:var(--muted); font-size:13px; }
.ply-indicator { text-align:center; color:var(--muted); font-size:13px; margin-top:8px; }

/* ---- right panel ---- */
.result-banner { background:var(--card); border-radius:16px; padding:14px 16px; text-align:center; font-size:16px; font-weight:700; box-shadow:var(--shadow); color:var(--coral); }
.result-banner.win { color:var(--mint-dp); }
.result-banner small { display:block; color:var(--muted); font-weight:500; font-size:13px; margin-top:4px; }
.info-grid { display:grid; grid-template-columns:1fr 1fr; gap:12px; margin:16px 0 12px; }
.info-card { background:var(--card); border-radius:16px; padding:12px; text-align:center; box-shadow:var(--shadow); border:2px solid transparent; }
.info-card.black-side { border-top:4px solid var(--black); }
.info-card.red-side { border-top:4px solid var(--red); }
.info-card.active { border-color:var(--mint); }
.side-name { color:var(--muted); font-size:13px; margin-bottom:6px; font-weight:600; display:flex; align-items:center; justify-content:center; gap:6px; }
.side-name .r-av { width:24px; height:24px; border-radius:7px; overflow:hidden; flex:0 0 auto; }
.side-name .r-av svg, .side-name .r-av img { width:100%; height:100%; display:block; object-fit:cover; }
.side-count { font-size:30px; font-weight:700; }
.side-count small { font-size:13px; color:var(--muted); font-weight:500; margin-left:2px; }
.meta-line { display:flex; justify-content:space-between; color:var(--muted); font-size:13px; padding:0 4px 8px; }
.meta-line b { color:var(--ink); }
.movelist-title { margin:8px 0; font-size:15px; color:var(--muted); border-bottom:1.5px solid var(--line); padding-bottom:6px; }
.move-list { list-style:none; margin:0; padding:0; max-height:260px; overflow-y:auto; font-size:13px; font-variant-numeric:tabular-nums; }
.move-list li { padding:5px 8px; border-radius:8px; cursor:pointer; display:flex; gap:8px; align-items:center; }
.move-list li:hover { background:var(--sky); }
.move-list li.cur { background:var(--mint-soft); }
.mv-no { color:var(--muted); width:28px; flex:0 0 auto; }
.mv-side { width:18px; height:18px; flex:0 0 auto; display:inline-flex; }
.mv-side svg { width:100%; height:100%; }
.mv-cap { color:var(--coral); margin-left:auto; font-weight:700; }
.mv-pass { color:var(--muted); font-style:italic; }
.s-black { color:var(--black); } .s-red { color:var(--red-edge); }
.rules-hint { margin-top:12px; color:var(--muted); cursor:pointer; font-size:13px; user-select:none; font-weight:600; }
.rules-hint:hover { color:var(--mint-dp); }
.rules-panel { background:var(--card); border-radius:12px; padding:8px 12px; margin-top:8px; box-shadow:var(--shadow); }
.rules-panel ul { margin:6px 0; padding-left:18px; color:var(--muted); line-height:1.9; font-size:13px; }
.rules-panel b { color:var(--ink); }

/* ---- 面板页 ---- */
.panel-page { max-width:880px; margin:0 auto; padding:28px 24px; }
.panel-header { display:flex; align-items:center; gap:16px; margin-bottom:20px; }
.panel-header h2 { margin:0; }
.muted { color:var(--muted); font-size:14px; }
.muted-center { text-align:center; color:var(--muted); padding:24px; }
.field { margin-bottom:14px; }
.field label,.field-label { display:block; color:var(--muted); font-size:13px; margin-bottom:6px; font-weight:600; }
.field-label { margin-top:6px; }
.field-err { color:var(--warn); font-size:12px; margin-top:5px; min-height:14px; }
.field-err.ok { color:var(--mint-dp); }
.hint { color:var(--muted); font-size:12px; margin:8px 0; display:flex; align-items:center; gap:6px; }
.warn-box { background:var(--coral-soft); color:var(--warn); border-radius:12px; padding:10px 12px; font-size:13px; margin:12px 0; }

/* ---- Leaderboard ---- */
.lb-table { width:100%; border-collapse:separate; border-spacing:0 6px; font-size:14px; }
.lb-table th { color:var(--muted); font-weight:600; text-align:left; padding:6px 12px; }
.lb-table td { padding:12px; background:var(--card); }
.lb-table tbody tr td:first-child { border-radius:12px 0 0 12px; }
.lb-table tbody tr td:last-child { border-radius:0 12px 12px 0; }
.lb-table tbody tr { box-shadow:var(--shadow); }
.lb-table .rank-1 td:first-child { color:#e0a000; font-weight:700; }
.lb-table .rank-2 td:first-child { color:#9aa7b0; font-weight:700; }
.lb-table .rank-3 td:first-child { color:#cd7f32; font-weight:700; }
.lb-name { display:flex; align-items:center; gap:8px; font-weight:600; }

/* ---- 我的棋手 / 详情 ---- */
.empty-hero { background:var(--card); border-radius:20px; padding:40px 28px; text-align:center; box-shadow:var(--shadow); }
.empty-hero h2 { margin:0 0 8px; }
.empty-hero p { color:var(--muted); margin:0 0 20px; }
.bot-card { display:flex; align-items:center; gap:16px; background:var(--card); border-radius:18px; padding:18px 20px; box-shadow:var(--shadow); flex-wrap:wrap; }
.bot-card .av { width:64px; height:64px; border-radius:16px; overflow:hidden; flex:0 0 auto; }
.bot-card .grow { flex:1; min-width:180px; }
.bot-card h2 { margin:0 0 4px; display:flex; align-items:center; gap:8px; }
.bot-card .stat-row { color:var(--muted); font-size:13px; display:flex; gap:14px; flex-wrap:wrap; }
.bot-card .actions { display:flex; gap:8px; }
.chip { display:inline-block; font-size:12px; font-weight:700; padding:3px 10px; border-radius:999px; }
.chip.empty { background:var(--coral-soft); color:var(--warn); }
.chip.active { background:var(--mint-soft); color:var(--mint-ink); }
.chip.ver { background:var(--sky2); color:var(--blue); }
.chip.passed { background:#e3f5ea; color:var(--ok); }
.chip.failed { background:var(--coral-soft); color:var(--warn); }
.chip.pending { background:#fdf3da; color:var(--pending); }
.chip.rank-chip { background:var(--sky2); color:var(--ink); }

.detail-grid { display:grid; grid-template-columns:240px 1fr; gap:18px; margin-bottom:18px; }
@media(max-width:760px){ .detail-grid{ grid-template-columns:1fr; } }
.card { background:var(--card); border-radius:18px; padding:18px 20px; box-shadow:var(--shadow); }
.card h3 { margin:0 0 12px; font-size:16px; }
.ov-row { display:flex; justify-content:space-between; padding:8px 0; border-bottom:1px solid var(--line); font-size:14px; }
.ov-row:last-child { border-bottom:none; }
.ov-row span:first-child { color:var(--muted); }
.ov-row b { font-weight:700; }
.detail-head { display:flex; align-items:center; gap:16px; margin-bottom:18px; }
.detail-head .av { width:72px; height:72px; border-radius:18px; overflow:hidden; }
.detail-head h2 { margin:0; }
.access-row { display:flex; align-items:center; gap:10px; background:var(--sky); border-radius:12px; padding:10px 12px; margin-bottom:10px; font-size:13px; }
.access-row .lbl { color:var(--muted); width:80px; font-weight:600; flex:0 0 auto; }
.access-row .val { flex:1; font-family:"Cascadia Code",monospace; color:var(--mint-dp); word-break:break-all; }
.access-actions { display:flex; gap:10px; flex-wrap:wrap; margin-top:6px; }

.subtabs { display:flex; gap:6px; margin:18px 0 12px; }
.subtab { padding:8px 18px; border-radius:999px; }
.subtab.active { background:var(--mint-soft); color:var(--mint-ink); border-color:var(--mint-soft); }
.ver-row,.match-row { display:flex; align-items:center; gap:12px; background:var(--card); border-radius:14px; padding:12px 16px; box-shadow:var(--shadow); margin-bottom:10px; flex-wrap:wrap; }
.ver-row .grow,.match-row .grow { flex:1; min-width:160px; }
.ver-row .vmeta,.match-row .vmeta { color:var(--muted); font-size:12px; margin-top:3px; }
.match-row .m-av { width:34px; height:34px; border-radius:10px; overflow:hidden; flex:0 0 auto; }
.match-row .m-av svg, .match-row .m-av img { width:100%; height:100%; display:block; object-fit:cover; }

/* ---- 对战列表：场卡片 ---- */
.game-pills { display:flex; gap:6px; margin-top:6px; flex-wrap:wrap; }
.game-pill { font-size:12px; font-weight:600; padding:2px 10px; border-radius:999px; background:var(--sky2); color:var(--ink); }
.game-pill.passed { background:#e3f5ea; color:var(--ok); }
.game-pill.failed { background:var(--coral-soft); color:var(--warn); }
.game-pill.pending { background:#fdf3da; color:var(--pending); }
.rp-delta { font-size:12px; font-weight:700; margin-left:8px; color:var(--muted); }
.rp-delta.up { color:var(--ok); }
.rp-delta.down { color:var(--warn); }
.rp-delta.practice { color:var(--muted); font-weight:600; }

/* ---- 头像选择器 ---- */
.avatar-picker { display:grid; grid-template-columns:repeat(4,1fr); gap:10px; margin:8px 0; }
.av-tile { position:relative; border:2px solid var(--line); border-radius:14px; padding:3px; background:#fff; cursor:pointer; transition:.15s; }
.av-tile:hover { border-color:var(--mint); }
.av-tile.sel { border-color:var(--mint); }
.av-tile svg,.av-tile img { width:100%; display:block; border-radius:9px; aspect-ratio:1/1; object-fit:cover; }
.av-tile .check { position:absolute; right:-6px; top:-6px; background:var(--mint); color:#fff; width:20px; height:20px; border-radius:50%; font-size:12px; line-height:20px; text-align:center; }
.av-upload { grid-column:span 2; border:2px dashed var(--line2); border-radius:14px; background:var(--sky); display:flex; flex-direction:column; align-items:center; justify-content:center; gap:3px; color:var(--blue); cursor:pointer; min-height:74px; font-size:12px; text-align:center; }
.av-upload:hover { border-color:var(--mint); }

/* ---- Modal ---- */
.modal-mask { position:fixed; inset:0; background:rgba(47,72,88,.32); display:flex; align-items:center; justify-content:center; z-index:50; padding:20px; }
.modal { background:var(--card); border-radius:20px; padding:22px 24px; width:420px; max-width:100%; box-shadow:0 16px 40px rgba(47,72,88,.25); max-height:90vh; overflow:auto; }
.modal-wide { width:680px; }
/* ---- 对局回放弹窗 ---- */
.replay-modal { width:900px; max-width:96vw; }
.replay-tabs { display:flex; gap:8px; margin:4px 0 14px; }
.replay-tabs .game-tab { padding:6px 16px; font-size:13px; }
.replay-tabs .game-tab.active { background:var(--mint-soft); color:var(--mint-ink); border-color:var(--mint-soft); }
.replay-body { display:grid; grid-template-columns:1.25fr 1fr; gap:20px; align-items:start; }
.replay-left { display:flex; flex-direction:column; align-items:center; }
.replay-board { max-width:420px; }
.replay-side { min-width:0; }
.replay-side .move-list { max-height:320px; }
@media(max-width:820px){ .replay-body{ grid-template-columns:1fr; } }
.modal-narrow { width:340px; text-align:center; }
.modal-head { display:flex; align-items:center; justify-content:space-between; margin-bottom:6px; }
.modal-head h2 { margin:0; font-size:18px; }
#replayTitle .t-av { display:inline-flex; width:22px; height:22px; border-radius:6px; overflow:hidden; vertical-align:-5px; margin-right:4px; }
#replayTitle .t-av svg, #replayTitle .t-av img { width:100%; height:100%; object-fit:cover; }
.modal-sub { color:var(--muted); font-size:13px; margin:0 0 16px; }
.modal-foot { text-align:center; color:var(--muted); font-size:13px; margin:14px 0 0; }
.code-view { background:var(--sky); border-radius:12px; padding:14px; overflow:auto; max-height:60vh; font-size:13px; line-height:1.6; }
.crop-stage { display:flex; justify-content:center; margin-bottom:14px; }
#cropCanvas { border-radius:14px; background:var(--sky); cursor:grab; touch-action:none; }
.popup-icon { width:52px; height:52px; border-radius:50%; background:var(--coral-soft); color:var(--coral); display:flex; align-items:center; justify-content:center; margin:6px auto 12px; font-size:26px; }
.popup-actions { display:flex; gap:10px; margin-top:18px; }
.popup-actions button { flex:1; }

/* ---- 玩法教程入口 + 弹窗 ---- */
.rules-row { display:flex; align-items:center; gap:10px; margin-top:12px; }
.rules-row .rules-hint { margin-top:0; }
.tutorial-btn { margin-left:auto; background:var(--mint-soft); color:var(--mint-ink); border-color:var(--mint-soft); font-size:13px; padding:7px 14px; }
.tutorial-btn:hover:not(:disabled) { background:var(--mint); color:var(--mint-ink); border-color:var(--mint); }
.tutorial-btn.pulse { animation:tutPulse 1.6s ease-in-out infinite; }
.tutorial-btn.pulse:hover { animation:none; }
@keyframes tutPulse { 0%,100% { box-shadow:0 0 0 0 rgba(111,214,196,.6); } 50% { box-shadow:0 0 0 8px rgba(111,214,196,0); } }
.tutorial-modal { width:660px; max-width:96vw; }
.tut-mark { font-size:22px; vertical-align:-2px; margin-right:4px; }
.tut-sub { font-size:13px; color:var(--muted); font-weight:500; margin-left:8px; }
.tut-steps { display:flex; gap:8px; flex-wrap:wrap; margin:12px 0 4px; }
.tut-chip { font-size:13px; font-weight:600; padding:6px 13px; border-radius:999px; border:1.5px solid var(--line2); background:var(--card); color:var(--muted); }
.tut-chip.on { background:var(--mint-soft); color:var(--mint-ink); border-color:var(--mint-soft); }
.tut-card { background:var(--card); border:1.5px solid var(--line); border-radius:16px; padding:14px; margin-top:12px; }
.tut-tip { background:rgba(191,233,223,.32); border-color:var(--mint-soft); }
.tut-tip p { margin:0; font-size:13.5px; line-height:1.7; color:var(--mint-ink); }
.tut-tip b { color:var(--mint-ink); }
.tut-p { font-size:14px; line-height:1.85; margin:0; color:var(--muted); }
.tut-p b { color:var(--ink); }
.ex-head { display:flex; align-items:center; gap:8px; margin-bottom:10px; }
.ex-no { width:22px; height:22px; border-radius:50%; background:var(--mint); color:var(--mint-ink); font-size:13px; font-weight:800; display:flex; align-items:center; justify-content:center; flex:0 0 auto; }
.ex-tag { font-size:12px; font-weight:700; padding:2px 10px; border-radius:999px; }
.ex-tag.black { background:#e7ecef; color:var(--black-edge); }
.ex-tag.red { background:#f7dcd8; color:var(--red-edge); }
.ex-body { display:flex; gap:16px; align-items:flex-start; flex-wrap:wrap; }
.ex-right { flex:1; min-width:190px; }
.ex-cap { font-size:13.5px; line-height:1.7; margin:0 0 12px; color:var(--ink); }
.cap-before { color:var(--muted); }
.cap-after { color:var(--mint-dp); }
.tut-play { font-size:13px; }
.tut-foot { display:flex; align-items:center; gap:10px; margin-top:16px; }
.tut-dots { margin:0 auto; font-size:12px; color:var(--muted); }
.mini-board-wrap { position:relative; width:196px; height:196px; flex:0 0 auto; }
.mini-board { width:196px; height:196px; background:rgba(150,212,240,.5); border-radius:14px; padding:8px; display:grid; grid-template-columns:repeat(4,1fr); grid-template-rows:repeat(4,1fr); gap:4px; }
.mb-cell { position:relative; border-radius:9px; display:flex; align-items:center; justify-content:center; background:rgba(255,255,255,.6); }
.mb-cell.alt { background:rgba(232,247,255,.55); }
.mb-cell.pair { box-shadow:inset 0 0 0 3px rgba(111,214,196,.95); }
.mb-cell.pair-red { box-shadow:inset 0 0 0 3px #b4b2a9; }
.mb-cell.ring { box-shadow:inset 0 0 0 3px var(--mint-dp); }
.mb-token { width:84%; height:84%; filter:drop-shadow(0 2px 2px rgba(47,72,88,.22)); }
.mb-token svg { width:100%; height:100%; display:block; }
.mb-cap { position:absolute; font-size:26px; font-weight:800; color:var(--coral); }
.mb-safe { position:absolute; top:0; right:1px; font-size:13px; }
.mb-arrow { position:absolute; inset:0; pointer-events:none; }

/* ---- Guide ---- */
.guide-content h3 { color:var(--mint-dp); margin-top:24px; margin-bottom:8px; }
.guide-content ol,.guide-content ul { color:var(--muted); line-height:1.9; padding-left:20px; }
.guide-content li b { color:var(--ink); }
.api-table { width:100%; border-collapse:collapse; font-size:13px; margin:12px 0; }
.api-table td { padding:8px 10px; border-bottom:1px solid var(--line); vertical-align:top; }
.api-table td:first-child { white-space:nowrap; }
.guide-content pre { background:var(--card); border-radius:12px; padding:14px; overflow-x:auto; box-shadow:var(--shadow); }
.guide-content code,.access-row code { font-size:12px; }

/* ---- 试玩终局动画 ---- */
.result-pop { position:relative; z-index:2; background:var(--card); backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px); border-radius:24px; padding:32px 38px; text-align:center; width:330px; max-width:92%; box-shadow:0 20px 50px rgba(15,60,90,.35); animation:rpop .55s cubic-bezier(.18,1.5,.4,1); }
.result-pop h2 { margin:6px 0 4px; font-size:30px; }
.result-pop.win h2 { color:var(--mint-dp); }
.result-pop.loss h2 { color:var(--warn); }
.result-pop.draw h2 { color:var(--pending); }
.rp-emoji { font-size:58px; line-height:1.1; animation:rbounce .9s ease infinite alternate; }
@keyframes rpop { from { transform:scale(.35) translateY(60px); opacity:0; } 65% { transform:scale(1.07); opacity:1; } to { transform:scale(1); opacity:1; } }
@keyframes rbounce { from { transform:translateY(0) rotate(-5deg); } to { transform:translateY(-10px) rotate(6deg); } }
#confettiBox { position:absolute; inset:0; overflow:hidden; pointer-events:none; z-index:1; }
.confetti { position:absolute; top:-30px; animation:cfall linear forwards; }
@keyframes cfall { to { transform:translateY(110vh) rotate(720deg); } }

/* ---- Toast ---- */
.toast { position:fixed; bottom:28px; left:50%; transform:translateX(-50%); background:var(--ink); color:#fff; padding:11px 20px; border-radius:999px; font-size:14px; font-weight:600; z-index:80; box-shadow:0 8px 24px rgba(47,72,88,.3); }

/* ---- 试玩子页签（挑战棋手 / 双人同屏） ---- */
.play-subtabs { max-width:980px; margin:18px auto -8px; padding:0 24px; }

/* ---- 玩家棋手搜索 ---- */
.search-box { position:relative; flex:1; min-width:0; }
.search-results { position:absolute; top:calc(100% + 6px); left:0; right:0; background:#fff; border:1.5px solid var(--line2); border-radius:14px; box-shadow:var(--shadow); z-index:30; max-height:280px; overflow:auto; padding:6px; }
.search-item { display:flex; align-items:center; gap:10px; padding:8px 10px; border-radius:10px; cursor:pointer; }
.search-item:hover { background:var(--sky); }
.search-item.disabled { opacity:.55; cursor:not-allowed; }
.search-item .s-av { width:32px; height:32px; border-radius:9px; overflow:hidden; flex:0 0 auto; }
.search-item .s-av svg, .search-item .s-av img { width:100%; height:100%; display:block; object-fit:cover; }
.search-item .s-info { flex:1; min-width:0; display:flex; flex-direction:column; line-height:1.3; }
.search-item .s-info b { font-size:14px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.search-item .s-info small { color:var(--muted); font-size:12px; }
.search-item .s-tag { font-size:12px; color:var(--mint-ink); background:var(--mint-soft); padding:2px 9px; border-radius:999px; flex:0 0 auto; }
.search-item.disabled .s-tag { background:var(--sky); color:var(--muted); }
.search-empty { padding:14px; text-align:center; color:var(--muted); font-size:13px; }
.btn-row { display:flex; gap:8px; }