/* ============================================================
   麻将换牌顾问 · 设计系统 v2（手机优先）
   主题：暗光麻将桌绒布 · 深墨绿 + 青玉 + 香槟金
   手法：大圆角嵌套 · 内高光 · 带环境色阴影 · 克制发光 · 等宽数字
   ============================================================ */
:root{
  /* —— 背景（深墨绿绒布感，替代死黑）—— */
  --bg-0:#060b09; --bg-1:#0a120f; --bg-2:#0f1a16; --bg-3:#14231d; --bg-4:#1b2e26;
  /* —— 线条 / 内高光 —— */
  --line:rgba(255,255,255,.07); --line-strong:rgba(255,255,255,.14);
  --hair:rgba(255,255,255,.09);
  /* —— 文字 —— */
  --text:#e9f2ee; --text-dim:#9eb1a9; --text-faint:#65786f;
  /* —— 主色：青玉 —— */
  --jade:#2fc4ae; --jade-hi:#63e6d2; --jade-deep:#0d6d5f; --jade-ink:#04241f;
  /* —— 辅色：香槟金 —— */
  --gold:#e0c88e; --gold-hi:#f4e3b4; --gold-deep:#a9863c; --gold-ink:#241b04;
  /* —— 语义 —— */
  --red:#ff6f6f; --red-deep:#7a2a2a;
  /* —— 光晕 —— */
  --glow-jade:rgba(47,196,174,.30); --glow-gold:rgba(224,200,142,.26);
  /* —— 圆角梯度（外大内小）—— */
  --r-xl:20px; --r-lg:16px; --r-md:12px; --r-sm:8px; --r-pill:999px;
  /* 兼容别名（旧引用） */
  --radius:16px; --radius-sm:9px;
  --shadow:0 8px 22px -10px rgba(0,0,0,.7), 0 2px 6px -3px rgba(0,0,0,.5);
  /* —— 阴影（带环境色，不是死黑）—— */
  --shadow-sm:0 1px 2px rgba(0,0,0,.5);
  --shadow-md:0 10px 26px -12px rgba(0,0,0,.85), 0 3px 8px -4px rgba(0,0,0,.6);
  --shadow-lg:0 26px 56px -18px rgba(0,0,0,.9), 0 10px 22px -10px rgba(0,0,0,.65);
  /* —— 间距 —— */
  --sp-1:4px;--sp-2:8px;--sp-3:12px;--sp-4:16px;--sp-5:20px;--sp-6:24px;--sp-8:32px;
  /* —— 缓动 —— */
  --ease-out:cubic-bezier(.16,1,.3,1); --ease-spring:cubic-bezier(.34,1.4,.64,1);
  --dock-h:78px;
  --mono:ui-monospace,"SF Mono",Consolas,"Roboto Mono",monospace;
  --font:"SF Pro Display",-apple-system,"PingFang SC","Microsoft YaHei","Segoe UI",sans-serif;
}
*,*::before,*::after{margin:0;padding:0;box-sizing:border-box;-webkit-tap-highlight-color:transparent;}
html,body{background:var(--bg-0);color:var(--text);font-family:var(--font);min-height:100vh;-webkit-font-smoothing:antialiased;overflow-x:hidden;}
body{padding-bottom:calc(var(--dock-h) + env(safe-area-inset-bottom,0px) + 20px);}
.num,.rval,.rmeta b,.mcount,.chip,.mini,.dval,.mono{font-variant-numeric:tabular-nums;}

/* —— 背景：绒布质感 + 网格暗纹 + 顶光 —— */
.bg-decor{
  position:fixed;inset:0;z-index:0;pointer-events:none;
  background:
    radial-gradient(ellipse 90% 55% at 50% -12%,rgba(47,196,174,.13),transparent 62%),
    radial-gradient(ellipse 60% 45% at 92% 108%,rgba(224,200,142,.06),transparent 60%),
    radial-gradient(ellipse 55% 40% at 6% 102%,rgba(47,196,174,.05),transparent 58%),
    linear-gradient(180deg,var(--bg-1),var(--bg-0) 78%);
}
.bg-decor::before{
  content:"";position:absolute;inset:0;
  background-image:
    linear-gradient(rgba(255,255,255,.022) 1px,transparent 1px),
    linear-gradient(90deg,rgba(255,255,255,.022) 1px,transparent 1px);
  background-size:46px 46px;
  mask-image:radial-gradient(ellipse 72% 58% at 50% 0%,#000 26%,transparent 74%);
  -webkit-mask-image:radial-gradient(ellipse 72% 58% at 50% 0%,#000 26%,transparent 74%);
}
.bg-decor::after{  /* 极细绒布噪点 */
  content:"";position:absolute;inset:0;opacity:.5;
  background-image:radial-gradient(rgba(255,255,255,.05) .5px,transparent .5px);
  background-size:3px 3px;
  mask-image:radial-gradient(ellipse 80% 80% at 50% 40%,#000 10%,transparent 80%);
  -webkit-mask-image:radial-gradient(ellipse 80% 80% at 50% 40%,#000 10%,transparent 80%);
}

.wrap{position:relative;z-index:1;max-width:760px;margin:0 auto;padding:18px 16px 26px;}

/* —— 顶部导航 —— */
.topbar{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:6px 0 14px;}
.brand{display:flex;align-items:center;gap:11px;}
.brand .logo{
  width:40px;height:40px;border-radius:13px;flex-shrink:0;position:relative;
  background:linear-gradient(150deg,var(--jade-hi),var(--jade) 45%,var(--jade-deep));
  display:flex;align-items:center;justify-content:center;
  box-shadow:var(--shadow-jade,0 8px 22px -8px var(--glow-jade)),0 1px 0 rgba(255,255,255,.5) inset;
  color:var(--jade-ink);font-size:20px;font-weight:800;letter-spacing:.5px;
}
.brand .t{font-size:16.5px;font-weight:800;letter-spacing:.3px;line-height:1.15;}
.brand .t span{color:var(--jade-hi);}
.brand .s{font-size:9.5px;color:var(--text-faint);letter-spacing:2.4px;text-transform:uppercase;margin-top:3px;font-weight:600;}

.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:11px 18px;border:none;border-radius:var(--r-md);
  font-size:14px;font-weight:700;color:var(--jade-ink);cursor:pointer;font-family:inherit;
  background:linear-gradient(160deg,var(--jade-hi),var(--jade) 50%,var(--jade-deep));
  box-shadow:var(--shadow-md),0 1px 0 rgba(255,255,255,.35) inset;
  transition:transform .16s var(--ease-out),box-shadow .2s,filter .2s;text-decoration:none;
}
.btn:hover{filter:brightness(1.05);}
.btn:active{transform:scale(.97);}
.btn.ghost{background:var(--bg-3);color:var(--text-dim);box-shadow:0 1px 0 var(--hair) inset,var(--shadow-sm);border:1px solid var(--line);}
.btn.ghost:hover{color:var(--text);border-color:var(--line-strong);}
.btn.sm{padding:9px 14px;font-size:13px;border-radius:10px;flex-shrink:0;}
.btn.calc{
  background:linear-gradient(160deg,var(--jade-hi),var(--jade) 46%,var(--jade-deep));
  color:var(--jade-ink);font-size:16px;font-weight:800;padding:0 28px;height:50px;flex:1;
  border-radius:14px;box-shadow:0 12px 28px -12px var(--glow-jade),0 2px 6px -2px rgba(0,0,0,.5),0 1px 0 rgba(255,255,255,.45) inset;
}
.btn:disabled{opacity:.45;pointer-events:none;}

.intro{color:var(--text-dim);font-size:13px;margin:2px 2px 14px;line-height:1.7;}
.intro b{color:var(--jade-hi);}

/* —— 面板通用（哑光微渐变 + 内高光）—— */
.panel{
  background:
    linear-gradient(165deg,rgba(255,255,255,.05),rgba(255,255,255,.014) 42%,rgba(0,0,0,.05)),
    var(--bg-2);
  border:1px solid var(--line);border-radius:var(--r-lg);
  box-shadow:var(--shadow-md),0 1px 0 var(--hair) inset;
  padding:var(--sp-5);margin-bottom:var(--sp-4);
}

/* —— 术语速查 —— */
.glossary{margin:0 0 14px;border:1px solid var(--line);border-radius:var(--r-lg);background:var(--bg-2);overflow:hidden;box-shadow:var(--shadow-sm),0 1px 0 var(--hair) inset;}
.glossary summary{padding:14px 16px;font-size:13.5px;font-weight:700;color:var(--jade-hi);cursor:pointer;list-style:none;}
.glossary summary::-webkit-details-marker{display:none;}
.glossary summary::after{content:'＋';float:right;opacity:.6;font-weight:400;}
.glossary[open] summary::after{content:'－';}
.gl-body{padding:0 16px 16px;}
.gl-sec + .gl-sec{margin-top:14px;}
.gl-h{font-size:10.5px;letter-spacing:1.6px;color:var(--gold);font-weight:800;margin-bottom:8px;text-transform:uppercase;}
.gl-item{font-size:12.5px;color:var(--text-dim);line-height:1.7;padding:5px 0;border-bottom:1px dashed rgba(255,255,255,.05);}
.gl-item:last-child{border-bottom:none;}
.gl-item b{color:var(--text);}
.gl-tip{margin-top:10px;font-size:12px;color:var(--text-dim);line-height:1.7;background:rgba(47,196,174,.07);border:1px solid rgba(47,196,174,.18);border-radius:10px;padding:10px 12px;}
.c-red{color:#ff9b9b !important;} .c-gold{color:var(--gold) !important;} .c-jade{color:var(--jade-hi) !important;}

/* ============================================================
   牌盘（9 列网格）
   ============================================================ */
.modesw{display:flex;gap:9px;margin-bottom:12px;}
.mode{
  flex:1;display:flex;align-items:center;gap:8px;justify-content:center;
  padding:12px 10px;border-radius:var(--r-md);border:1px solid var(--line);background:var(--bg-3);
  color:var(--text-dim);font-size:14px;font-weight:700;cursor:pointer;font-family:inherit;
  transition:.2s var(--ease-out);
}
.mode .mi{opacity:.6;font-size:12px;}
.mode.active[data-mode="hand"]{background:linear-gradient(160deg,var(--jade-hi),var(--jade) 55%,var(--jade-deep));border-color:transparent;color:var(--jade-ink);box-shadow:0 8px 20px -10px var(--glow-jade),0 1px 0 rgba(255,255,255,.4) inset;}
.mode.active[data-mode="seen"]{background:linear-gradient(160deg,#ff9b9b,#d84a4a 55%,#8f2a2a);border-color:transparent;color:#2a0808;box-shadow:0 8px 20px -10px rgba(255,111,111,.4),0 1px 0 rgba(255,255,255,.35) inset;}
.mode.active[data-mode="hand"] .mi,.mode.active[data-mode="seen"] .mi{opacity:.75;}
.mcount{margin-left:auto;font-size:12px;font-weight:800;padding:1px 9px;border-radius:var(--r-pill);background:rgba(0,0,0,.4);min-width:26px;text-align:center;}
.mode.active[data-mode="hand"] .mcount{color:var(--jade-ink);background:rgba(0,0,0,.18);}
.mode.active[data-mode="seen"] .mcount{color:#2a0808;background:rgba(0,0,0,.18);}

.hint{font-size:12px;color:var(--text-faint);margin:0 2px 12px;line-height:1.6;}

.palette{display:flex;flex-direction:column;gap:10px;}
.suit-row{display:grid;grid-template-columns:20px repeat(9,1fr);gap:6px;align-items:center;}
.suit-tag{font-size:11px;color:var(--text-faint);font-weight:800;text-align:center;letter-spacing:.5px;}

/* 牌面：象牙玉质感 + 内倒角高光 */
.tile{
  position:relative;aspect-ratio:3/4;border-radius:var(--r-sm);
  background:linear-gradient(165deg,#fcfdfb 0%,#f0f4f1 42%,#dde6e1 100%);
  color:#16241f;border:none;
  box-shadow:
    0 1px 0 rgba(255,255,255,.95) inset,
    0 -2px 3px rgba(20,40,34,.14) inset,
    0 3px 8px -3px rgba(0,0,0,.55),
    0 1px 2px rgba(0,0,0,.35);
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  cursor:pointer;user-select:none;font-weight:800;
  transition:transform .13s var(--ease-spring),box-shadow .2s;
}
.tile:active{transform:scale(.9);}
.tile .num{font-size:clamp(14px,4.6vw,20px);line-height:1;letter-spacing:-.5px;}
.tile .suit-mark{font-size:clamp(8px,2.4vw,11px);color:#5c6f6a;margin-top:2px;line-height:1;font-weight:700;}
.tile.honor .num{font-size:clamp(13px,4.2vw,18px);}
.tile.honor .suit-mark{display:none;}
/* 花色/字牌专属色（拟真麻将牌） */
.tile.suit-m .num{color:#1a2b26;}
.tile.suit-p .num,.tile.suit-s .num{color:#1f6b5c;}
.tile.hono4 .num{color:#2f6ea8;}   /* 白 */
.tile.hono5 .num{color:#1f8a5a;}   /* 发 */
.tile.hono6 .num{color:#c0342b;}   /* 中 */
.tile.honor .num{font-weight:900;}
.tile .badge{
  position:absolute;top:-6px;right:-6px;min-width:17px;height:17px;padding:0 3px;border-radius:var(--r-pill);
  display:flex;align-items:center;justify-content:center;font-size:10px;font-weight:800;color:#fff;
  box-shadow:0 2px 6px rgba(0,0,0,.55);opacity:0;transform:scale(.4);transition:.15s var(--ease-spring);
}
.tile.in-hand{box-shadow:0 0 0 2px var(--jade) inset,0 0 0 2px rgba(47,196,174,.25),0 6px 16px -8px var(--glow-jade);}
.tile.in-hand .badge{opacity:1;transform:scale(1);background:linear-gradient(150deg,var(--jade-hi),var(--jade-deep));color:#04241f;}
.tile.in-seen .badge{opacity:1;transform:scale(1);background:linear-gradient(150deg,#ff9b9b,#a83232);}
.tile.in-both .badge{opacity:1;transform:scale(1);background:linear-gradient(90deg,var(--jade) 50%,#c0392b 50%);}

.legend{display:flex;flex-wrap:wrap;gap:14px;align-items:center;margin-top:12px;font-size:11.5px;color:var(--text-faint);}
.legend .sw{display:inline-block;width:12px;height:12px;border-radius:4px;margin-right:5px;vertical-align:-1px;box-shadow:0 1px 0 rgba(255,255,255,.2) inset;}
.sw-hand{background:linear-gradient(150deg,var(--jade-hi),var(--jade-deep));} .sw-seen{background:linear-gradient(150deg,#ff9b9b,#a83232);}
.legend .lg-note{margin-left:auto;}

/* —— 选择概览 —— */
.sel-panel{padding:12px 16px;}
.sel-row{display:flex;gap:11px;align-items:flex-start;padding:8px 0;}
.sel-row + .sel-row{border-top:1px dashed var(--line);}
.sel-label{width:62px;flex-shrink:0;font-size:12.5px;color:var(--text-faint);padding-top:6px;}
.sel-tiles{display:flex;flex-wrap:wrap;gap:5px;flex:1;min-height:28px;}
.sel-tiles .mini{
  font-family:var(--mono);font-size:12.5px;font-weight:700;
  padding:3px 8px;border-radius:7px;background:var(--bg-4);border:1px solid var(--line);color:var(--text);
  box-shadow:0 1px 0 var(--hair) inset;
}
.sel-empty{color:var(--text-faint);font-size:12.5px;padding-top:6px;}
.mini-clear{
  flex-shrink:0;font-size:11.5px;padding:7px 11px;border-radius:9px;border:1px solid var(--line);
  background:var(--bg-3);color:var(--text-faint);cursor:pointer;font-family:inherit;transition:.16s;
}
.mini-clear:active{color:var(--text);border-color:var(--line-strong);}

/* ============================================================
   结果
   ============================================================ */
.result{min-height:20px;}
.result .card{
  background:
    linear-gradient(165deg,rgba(255,255,255,.05),rgba(255,255,255,.014) 42%,rgba(0,0,0,.05)),
    var(--bg-2);
  border:1px solid var(--line);border-radius:var(--r-lg);
  box-shadow:var(--shadow-lg),0 1px 0 var(--hair) inset;padding:18px;
}
.result h3{font-size:14.5px;margin-bottom:12px;letter-spacing:.3px;}
.result .sh-line{font-size:13px;color:var(--text-dim);margin-bottom:14px;}
.result .sh-line b{color:var(--jade-hi);font-size:15px;}
.best{
  position:relative;overflow:hidden;
  background:linear-gradient(150deg,rgba(224,200,142,.15),rgba(224,200,142,.03) 60%,transparent);
  border:1px solid rgba(224,200,142,.5);border-radius:var(--r-md);padding:14px 16px;margin-bottom:14px;
  box-shadow:0 10px 30px -14px var(--glow-gold),0 1px 0 rgba(255,255,255,.12) inset;
}
.best::before{content:"";position:absolute;inset:0;pointer-events:none;background:radial-gradient(120% 80% at 100% 0%,rgba(244,227,180,.14),transparent 60%);}
.best .tag{font-size:10.5px;color:var(--gold);letter-spacing:1.8px;font-weight:800;text-transform:uppercase;}
.best .main{font-size:22px;font-weight:800;margin:4px 0 6px;color:#fff;letter-spacing:.3px;}
.best .main em{color:var(--gold-hi);font-style:normal;}
.best .sub{font-size:12.5px;color:var(--text-dim);line-height:1.6;}
.best .sub b{color:var(--gold-hi);}
.best .uk{display:flex;flex-wrap:wrap;gap:5px;margin-top:10px;}
.uk .chip{font-family:var(--mono);font-size:12px;font-weight:700;padding:4px 8px;border-radius:7px;background:rgba(47,196,174,.13);border:1px solid rgba(47,196,174,.32);color:var(--jade-hi);}

.opts{border-top:1px solid var(--line);padding-top:10px;}
.opts .o{display:flex;flex-wrap:wrap;align-items:center;gap:6px 10px;padding:10px 2px;font-size:13px;border-bottom:1px dashed rgba(255,255,255,.05);}
.opts .o:last-child{border-bottom:none;}
.opts .o .discard{font-weight:800;font-size:14.5px;min-width:50px;}
.opts .o .meta{color:var(--text-dim);}
.opts .o .meta b{color:var(--gold);}
.opts .o .waits{margin-left:auto;color:var(--text-faint);font-family:var(--mono);font-size:11.5px;flex-basis:100%;}
.opts .o.best-row{background:linear-gradient(90deg,rgba(224,200,142,.10),transparent 70%);border-radius:10px;padding-left:10px;padding-right:10px;}
.opts .o .safe{font-size:10.5px;padding:2px 7px;border-radius:var(--r-pill);border:1px solid var(--line);color:var(--text-dim);}
.opts .o .safe.gen{color:#ff9b9b;border-color:rgba(255,111,111,.4);}
.opts .o .safe.gen2{color:#ffd18a;border-color:rgba(224,200,142,.4);}
.tips{font-size:12px;color:var(--text-faint);margin-top:14px;line-height:1.75;}
.tips b{color:var(--text-dim);}
.err{color:#ff9b9b;font-size:14px;}

/* —— 改良 —— */
.improve{margin-top:9px;}
.imp-line{font-size:12.5px;color:var(--text-dim);line-height:1.65;}
.imp-line b{color:var(--jade-hi);}
.imp-line.dim{color:var(--text-faint);}
.imp-loading{font-size:12px;color:var(--text-faint);opacity:.85;}
.imp-loading::after{content:'▉';animation:blink 1s steps(2) infinite;margin-left:2px;}
@keyframes blink{0%,50%{opacity:1}51%,100%{opacity:.15}}
.improve .uk{margin-top:7px;}

.footer{margin-top:28px;text-align:center;font-size:11.5px;color:var(--text-faint);line-height:1.9;}
.footer a{color:inherit;opacity:.8;text-decoration:none;}

/* ============================================================
   底部固定操作栏（玻璃拟态）
   ============================================================ */
.dock{
  position:fixed;left:0;right:0;bottom:0;z-index:40;
  display:flex;align-items:center;gap:14px;
  padding:12px 16px calc(12px + env(safe-area-inset-bottom,0px));
  background:linear-gradient(180deg,rgba(12,20,17,.82),rgba(8,14,12,.94));
  backdrop-filter:blur(16px) saturate(1.4);-webkit-backdrop-filter:blur(16px) saturate(1.4);
  border-top:1px solid var(--line);
  box-shadow:0 -12px 30px -16px rgba(0,0,0,.8);
  max-width:760px;margin:0 auto;
}
.dock-info{display:flex;flex-direction:column;gap:3px;font-size:11.5px;color:var(--text-faint);line-height:1.3;letter-spacing:.3px;}
.dock-info b{color:var(--jade-hi);font-size:15px;font-weight:800;}

/* —— 算法演示入口 —— */
.explain-entry{
  display:flex;align-items:center;gap:13px;margin:14px 0 6px;padding:15px 16px;
  border-radius:var(--r-lg);text-decoration:none;
  background:
    linear-gradient(150deg,rgba(47,196,174,.14),rgba(224,200,142,.06) 70%,transparent),
    var(--bg-2);
  border:1px solid rgba(47,196,174,.3);
  box-shadow:var(--shadow-md),0 1px 0 var(--hair) inset;
  transition:.2s var(--ease-out);position:relative;overflow:hidden;
}
.explain-entry::before{content:"";position:absolute;inset:0;pointer-events:none;background:radial-gradient(90% 140% at 100% 50%,rgba(47,196,174,.12),transparent 60%);}
.explain-entry:active{transform:scale(.985);border-color:var(--jade);}
.explain-entry .ee-ico{
  width:40px;height:40px;border-radius:13px;flex-shrink:0;
  background:linear-gradient(150deg,var(--jade-hi),var(--jade) 45%,var(--jade-deep));color:var(--jade-ink);
  display:flex;align-items:center;justify-content:center;font-size:19px;font-weight:800;
  box-shadow:0 8px 20px -8px var(--glow-jade),0 1px 0 rgba(255,255,255,.5) inset;
}
.explain-entry .ee-txt{display:flex;flex-direction:column;gap:4px;flex:1;min-width:0;}
.explain-entry .ee-txt b{font-size:14.5px;color:var(--text);font-weight:800;}
.explain-entry .ee-txt i{font-size:11.5px;color:var(--text-faint);font-style:normal;line-height:1.45;}
.explain-entry .ee-arrow{font-size:18px;color:var(--jade-hi);flex-shrink:0;font-weight:700;}

@media(min-width:600px){
  .wrap{padding:24px 20px 30px;}
  .tile .num{font-size:20px;}
  .tile.honor .num{font-size:18px;}
}

/* —— 尊重减少动效偏好 —— */
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{animation-duration:.001ms !important;animation-iteration-count:1 !important;transition-duration:.001ms !important;}
}