/* ============================================================
   塔罗抽牌 · 样式
   ============================================================ */
:root{
  --bg:        #f3ecdd;
  --bg2:       #efe6d3;
  --panel:     #fbf7ee;
  --panel-2:   #f7f0e0;
  --line:      #e3d7bd;
  --line-soft: #ece2cc;
  --gold:      #b8924e;
  --gold-2:    #c9a25e;
  --gold-deep: #9a7833;
  --ink:       #4a4337;
  --ink-soft:  #7d7460;
  --muted:     #a59a82;
  --shadow:    0 18px 40px -22px rgba(80,60,20,.45);
  --card-w: 86px;
  --card-h: 144px;
  --radius: 16px;
}

*{ box-sizing:border-box; }
html,body{ height:100%; }
body{
  margin:0;
  font-family:"PingFang SC","Microsoft YaHei","Noto Sans SC",system-ui,sans-serif;
  color:var(--ink);
  background:
    radial-gradient(1200px 600px at 70% -10%, #fbf6ea 0%, transparent 60%),
    linear-gradient(160deg, var(--bg) 0%, var(--bg2) 100%);
  overflow:hidden;
}
h1,h2,h3{ font-family:"Songti SC","STSong","SimSun","Noto Serif SC",serif; font-weight:600; }

#app{ height:100vh; height:100dvh; display:flex; flex-direction:column; touch-action:manipulation; }
.view{ display:none; height:100%; flex-direction:column; }
.view.active{ display:flex; }

/* ---------- 顶栏 ---------- */
.topbar{
  display:flex; align-items:center; gap:24px;
  padding:14px 28px;
  border-bottom:1px solid var(--line);
  background:linear-gradient(180deg,#fcf8ef,#f7f0e1);
}
.brand{ display:flex; align-items:center; gap:12px; }
.brand-mark{ width:34px; height:34px; color:var(--gold); }
.brand-text h1{ margin:0; font-size:22px; letter-spacing:4px; color:var(--ink); }
.brand-text span{ font-size:11px; letter-spacing:2px; color:var(--muted); text-transform:uppercase; }

.stat-strip{ display:flex; gap:10px; margin-left:auto; }
.stat{
  display:flex; flex-direction:column; align-items:center;
  min-width:74px; padding:8px 14px;
  background:var(--panel); border:1px solid var(--line);
  border-radius:12px;
}
.stat-label{ font-size:11px; color:var(--muted); letter-spacing:1px; }
.stat-val{ font-size:20px; font-weight:600; color:var(--ink); font-family:"Songti SC",serif; }
.stat.drawn{ background:linear-gradient(180deg,#f6ead0,#f1e0bf); border-color:#e6d3a8; }
.stat.drawn .stat-val{ color:var(--gold-deep); }

.btn-restart{
  display:inline-flex; align-items:center; gap:7px;
  padding:9px 16px; border-radius:11px; cursor:pointer;
  border:1px solid var(--line); background:var(--panel);
  color:var(--ink-soft); font-size:14px; transition:.18s;
}
.btn-restart:hover{ border-color:var(--gold-2); color:var(--gold-deep); background:#fbf3e2; }
.btn-restart svg{ width:17px; height:17px; }
.btn-restart.big{ padding:13px 30px; font-size:16px; }

/* ---------- 问题栏 ---------- */
.question-bar{
  display:flex; align-items:center; gap:16px;
  padding:14px 28px;
  border-bottom:1px solid var(--line-soft);
}
.q-label{ font-size:15px; color:var(--gold-deep); white-space:nowrap; letter-spacing:1px; }
#question-input{
  flex:1; padding:11px 18px; font-size:15px;
  border:1px solid var(--line); border-radius:12px;
  background:#fdfaf3; color:var(--ink); outline:none; transition:.18s;
  font-family:inherit;
}
#question-input:focus{ border-color:var(--gold-2); box-shadow:0 0 0 3px rgba(201,162,94,.15); }
.q-hint{ font-size:12px; color:var(--muted); white-space:nowrap; }

/* ---------- 舞台 ---------- */
.stage{ flex:1; display:flex; gap:18px; padding:18px 28px; min-height:0; }

/* 抽牌盒 */
.drawbox{
  width:200px; flex:none; display:flex; flex-direction:column;
  background:var(--panel); border:1px solid var(--line);
  border-radius:var(--radius); padding:16px; box-shadow:var(--shadow);
}
.drawbox-head{ text-align:center; margin-bottom:12px; }
.drawbox-title{ display:block; font-size:16px; color:var(--gold-deep); letter-spacing:1px; }
.drawbox-sub{ font-size:11px; color:var(--muted); }
.drawbox-slot{
  flex:1; position:relative; border:1.5px dashed var(--line);
  border-radius:12px; background:#fdfaf2; overflow:hidden; transition:.18s;
}
.drawbox.drag-over .drawbox-slot{
  border-color:var(--gold-2); background:#f7eccf;
  box-shadow:inset 0 0 0 3px rgba(201,162,94,.18);
}
.drawbox-empty{
  position:absolute; inset:0; display:flex; flex-direction:column;
  align-items:center; justify-content:center; gap:10px; color:var(--muted);
  pointer-events:none;
}
.drawbox-empty svg{ width:34px; height:34px; opacity:.6; }
.drawbox-empty p{ margin:0; font-size:13px; }
.drawbox-count{ text-align:center; margin-top:12px; font-size:13px; color:var(--ink-soft); }
.drawbox-count b{ color:var(--gold-deep); font-size:17px; font-family:"Songti SC",serif; }

/* 牌桌 */
.table{
  flex:1; position:relative; overflow:hidden;
  border:1px solid var(--line); border-radius:var(--radius);
  background:
    radial-gradient(900px 600px at 50% 50%, #fcf8ef 0%, #f4ecda 100%);
  box-shadow:inset 0 0 60px -30px rgba(120,90,30,.25);
  touch-action:none;
}
.table::before{
  content:""; position:absolute; inset:24px; border:1px solid var(--line-soft);
  border-radius:10px; pointer-events:none; opacity:.7;
}

/* ---------- 牌 ---------- */
.card{
  position:absolute; top:0; left:0;
  width:var(--card-w); height:var(--card-h);
  border-radius:9px; cursor:grab;
  will-change:transform;
  transition:transform .5s cubic-bezier(.22,.61,.36,1), box-shadow .2s;
}
.card.dragging{ transition:none; cursor:grabbing; z-index:9999 !important; }
.card-back{
  width:100%; height:100%; border-radius:9px;
  background:linear-gradient(155deg,#fbf6ea 0%,#f3e8cf 100%);
  border:1px solid #d9c391;
  box-shadow:0 6px 14px -8px rgba(90,60,15,.5), inset 0 0 0 1px rgba(255,255,255,.4);
  color:#bf9a52;
  display:flex; align-items:center; justify-content:center;
  overflow:hidden;
}
.card-back svg{ width:100%; height:100%; }
.card:hover{ box-shadow:0 14px 26px -12px rgba(90,60,15,.55); }
.card.locked{ cursor:not-allowed; }
.card.captured{ animation:pop .4s ease; }
@keyframes pop{ 0%{ transform:scale(1.12); } 100%{ transform:scale(1); } }

/* ---------- 工具栏 ---------- */
.toolbar{
  display:flex; gap:12px; padding:14px 28px 18px;
  border-top:1px solid var(--line); justify-content:center;
  background:linear-gradient(0deg,#f7f0e1,#fbf7ef);
}
.tool{
  display:flex; flex-direction:column; align-items:center; gap:3px;
  width:120px; padding:11px 8px; cursor:pointer;
  border:1px solid var(--line); border-radius:13px;
  background:var(--panel); color:var(--ink-soft); transition:.18s;
}
.tool:hover{ border-color:var(--gold-2); color:var(--gold-deep); background:#fbf3e2; transform:translateY(-2px); }
.tool:active{ transform:translateY(0); }
.tool svg{ width:26px; height:26px; }
.tool-name{ font-size:15px; letter-spacing:1px; }
.tool-sub{ font-size:11px; color:var(--muted); }
.tool.primary{
  background:linear-gradient(160deg,var(--gold-2),var(--gold-deep));
  border-color:var(--gold-deep); color:#fff; box-shadow:var(--shadow);
}
.tool.primary .tool-sub{ color:#f3e6cc; }
.tool.primary:hover{ filter:brightness(1.05); color:#fff; }

/* ---------- 结果视图 ---------- */
#view-result{ overflow-y:auto; }
.result-question{
  margin:18px 28px 0; padding:14px 22px;
  background:var(--panel); border:1px solid var(--line); border-radius:14px;
  font-size:15px; color:var(--ink-soft);
}
.result-question b{ color:var(--gold-deep); }
.result-cards{
  display:flex; flex-wrap:wrap; gap:26px; justify-content:center;
  padding:30px 28px;
}
.rcard{ width:170px; display:flex; flex-direction:column; align-items:center; gap:10px; }
.rcard-pos{ font-size:14px; color:var(--gold-deep); letter-spacing:2px; }
.face{
  width:170px; height:284px; border-radius:14px; position:relative;
  background:linear-gradient(165deg,#fdfaf3,#f5ecd8);
  border:1px solid #e0cfa3;
  box-shadow:0 22px 44px -22px rgba(90,60,15,.55), inset 0 0 0 1px rgba(255,255,255,.5);
  display:flex; flex-direction:column; align-items:center; justify-content:space-between;
  padding:16px 12px; transform-style:preserve-3d;
  animation:flipIn .7s cubic-bezier(.3,.7,.3,1) both;
}
@keyframes flipIn{
  0%{ transform:rotateY(90deg) scale(.9); opacity:0; }
  100%{ transform:rotateY(0) scale(1); opacity:1; }
}
/* 逆位：仅徽记倒转作为视觉提示，文字保持正向以便阅读 */
.face.reversed .face-emblem{ transform:rotate(180deg); }
.face-top{ display:flex; justify-content:space-between; width:100%; font-size:13px; color:var(--ink-soft); }
.face-emblem{ width:84px; height:84px; }
.face-name{ font-family:"Songti SC",serif; font-size:24px; letter-spacing:3px; }
.face-roman{ font-size:15px; color:var(--muted); letter-spacing:2px; }
.face-suit{ font-size:12px; color:var(--muted); }
.rcard-orient{
  font-size:13px; padding:3px 12px; border-radius:20px;
  border:1px solid var(--line);
}
.rcard-orient.up{ color:var(--gold-deep); background:#f6ecd4; }
.rcard-orient.rev{ color:#9a6b4a; background:#f1e3d6; border-color:#e3cdb8; }

.result-panels{
  display:grid; grid-template-columns:1fr 1.2fr; gap:18px;
  padding:0 28px 24px;
}
.panel{
  background:var(--panel); border:1px solid var(--line);
  border-radius:16px; padding:20px 24px;
}
.panel h3{ margin:0 0 14px; color:var(--gold-deep); font-size:17px; letter-spacing:1px; }
.panel p{ margin:0; line-height:2; color:var(--ink-soft); font-size:15px; }
.panel ul{ margin:0; padding:0; list-style:none; display:flex; flex-direction:column; gap:14px; }
.panel li{ display:flex; gap:12px; align-items:flex-start; }
.li-emblem{ width:34px; height:34px; flex:none; color:var(--gold); margin-top:2px; }
.li-body b{ color:var(--ink); font-size:15px; }
.li-body .tag{ font-size:12px; color:var(--gold-deep); margin-left:6px; }
.li-body p{ font-size:13.5px; line-height:1.7; margin:4px 0 0; }

.result-actions{ display:flex; justify-content:center; align-items:stretch; gap:14px; flex-wrap:wrap; padding:0 0 40px; }
/* 两个按钮统一尺寸，避免一宽一窄不协调 */
.result-actions .big-action,
.result-actions .btn-restart.big{ min-width:150px; justify-content:center; }
.big-action{ width:auto; flex-direction:row; gap:8px; padding:13px 22px; }
.big-action svg{ width:18px; height:18px; }
.big-action .tool-name{ font-size:16px; }

/* ---------- Toast ---------- */
.toast{
  position:fixed; left:50%; bottom:120px; transform:translateX(-50%) translateY(20px);
  background:rgba(74,67,55,.95); color:#fbf6ea; padding:11px 22px;
  border-radius:24px; font-size:14px; opacity:0; pointer-events:none;
  transition:.28s; z-index:10000;
}
.toast.show{ opacity:1; transform:translateX(-50%) translateY(0); }

/* ---------- 设置弹窗 ---------- */
.modal-mask{
  position:fixed; inset:0; background:rgba(60,48,28,.4);
  display:none; align-items:center; justify-content:center; z-index:10001;
  backdrop-filter:blur(2px);
}
.modal-mask.show{ display:flex; }
.modal{
  width:min(480px,92vw); background:var(--panel);
  border:1px solid var(--line); border-radius:18px; box-shadow:var(--shadow);
  overflow:hidden;
}
.modal-head{
  display:flex; align-items:center; justify-content:space-between;
  padding:16px 22px; border-bottom:1px solid var(--line-soft);
  background:linear-gradient(180deg,#fcf8ef,#f7f0e1);
}
.modal-head h3{ margin:0; color:var(--gold-deep); font-size:18px; letter-spacing:1px; }
.modal-close{
  border:none; background:none; font-size:24px; line-height:1; color:var(--muted);
  cursor:pointer; padding:0 4px;
}
.modal-close:hover{ color:var(--ink); }
.modal-body{ padding:22px; display:flex; flex-direction:column; gap:18px; }
.field{ display:flex; flex-direction:column; gap:6px; }
.field-label{ font-size:14px; color:var(--ink); font-weight:600; }
.field input, .field select{
  padding:10px 14px; font-size:14px; font-family:inherit;
  border:1px solid var(--line); border-radius:10px; background:#fdfaf3;
  color:var(--ink); outline:none; transition:.18s;
}
.field input:focus, .field select:focus{ border-color:var(--gold-2); box-shadow:0 0 0 3px rgba(201,162,94,.15); }
.field-hint{ font-size:12px; color:var(--muted); }
.modal-warn{
  margin:0; font-size:12.5px; line-height:1.6; color:#9a6b4a;
  background:#f6ecdd; border:1px solid #e6d3a8; border-radius:10px; padding:10px 14px;
}
.modal-foot{
  display:flex; justify-content:space-between; gap:12px;
  padding:16px 22px; border-top:1px solid var(--line-soft);
}
.modal-save{ width:auto; padding:10px 28px; flex-direction:row; }

/* ---------- 结果页 AI 状态 ---------- */
.panel h3 .ai-badge{
  font-size:11px; color:#fff; background:linear-gradient(160deg,var(--gold-2),var(--gold-deep));
  padding:2px 9px; border-radius:20px; margin-left:8px; letter-spacing:1px; vertical-align:middle;
}
.ai-loading{ display:inline-flex; align-items:center; gap:8px; color:var(--muted); font-size:14px; }
.ai-loading .dot{ width:7px; height:7px; border-radius:50%; background:var(--gold-2); animation:blink 1s infinite; }
.ai-loading .dot:nth-child(2){ animation-delay:.2s; }
.ai-loading .dot:nth-child(3){ animation-delay:.4s; }
@keyframes blink{ 0%,80%,100%{ opacity:.25; } 40%{ opacity:1; } }
#result-summary{ white-space:pre-wrap; }
.ai-error{ color:#a85; font-size:13.5px; }
.ai-hint{
  margin-top:10px; font-size:12.5px; color:var(--muted);
  border-top:1px dashed var(--line); padding-top:10px;
}
.ai-hint a{ color:var(--gold-deep); cursor:pointer; text-decoration:underline; }

@media (max-width:1000px){
  .result-panels{ grid-template-columns:1fr; }
  .stat-strip{ display:none; }
}

/* 仅手机显示的提示，默认隐藏 */
.only-mobile{ display:none; }

/* ============================================================
   手机版（≤640px）—— 仅在窄屏生效，桌面版不受影响
   ============================================================ */
@media (max-width:640px){
  .only-desktop{ display:none !important; }
  .only-mobile{ display:block !important; }

  /* 牌变小，便于在小屏铺开与点选 */
  :root{ --card-w:58px; --card-h:96px; }

  /* 顶栏：精简为图标按钮 */
  .topbar{ gap:8px; padding:9px 12px; }
  .brand{ gap:8px; }
  .brand-mark{ width:26px; height:26px; }
  .brand-text h1{ font-size:17px; letter-spacing:2px; }
  .brand-text span{ display:none; }
  .topbar .btn-restart{ font-size:0; padding:8px; gap:0; }
  .topbar .btn-restart svg{ width:18px; height:18px; }

  /* 问题栏：纵向堆叠 */
  .question-bar{ flex-direction:column; align-items:stretch; gap:8px; padding:10px 12px; }
  .q-label{ font-size:14px; }
  /* 字号须 ≥16px，否则 iOS 点击输入框会自动放大聚焦 */
  #question-input{ font-size:16px; padding:10px 14px; }
  .q-hint{ display:none; }

  /* 舞台：上牌桌、下抽牌盒 */
  .stage{ flex-direction:column; padding:10px 12px; gap:10px; min-height:0; }
  .table{ order:1; flex:1 1 0; min-height:130px; overflow-y:auto; touch-action:pan-y; }
  .table::before{ display:none; }

  /* 抽牌盒：底部横条 */
  .drawbox{
    order:2; width:auto; flex:none; flex-direction:row; align-items:center;
    gap:10px; height:96px; padding:8px 12px;
  }
  .drawbox-head{ margin:0; flex:none; text-align:left; }
  .drawbox-title{ font-size:13px; }
  .drawbox-sub{ font-size:10px; }
  .drawbox-slot{ flex:1; height:100%; }
  .drawbox-empty{ flex-direction:row; gap:8px; }
  .drawbox-empty svg{ width:22px; height:22px; }
  .drawbox-empty p{ font-size:12px; }
  .drawbox-count{ margin:0; flex:none; white-space:nowrap; font-size:12px; }
  .drawbox-count b{ font-size:15px; }

  /* 工具栏：5 个操作键并成一行，查看结果独占一行（避免占两行把主按钮挤出屏幕） */
  .toolbar{ flex-wrap:wrap; gap:6px; padding:8px 12px calc(10px + env(safe-area-inset-bottom)); }
  .tool{ width:auto; flex:1 1 0; min-width:0; padding:7px 2px; border-radius:11px; gap:2px; }
  .tool svg{ width:20px; height:20px; }
  .tool-name{ font-size:12px; letter-spacing:0; }
  .tool-sub{ display:none; }
  .tool.primary{ flex-basis:100%; flex-direction:row; padding:12px; margin-top:2px; }
  .tool.primary svg{ width:22px; height:22px; }
  .tool.primary .tool-name{ font-size:15px; }

  /* 结果页 */
  .result-question{ margin:14px 12px 0; padding:12px 14px; font-size:14px; }
  .result-cards{ gap:14px; padding:18px 12px; }
  .rcard{ width:128px; gap:8px; }
  .face{ width:128px; height:214px; padding:11px 8px; border-radius:12px; }
  .face-emblem{ width:60px; height:60px; }
  .face-name{ font-size:18px; letter-spacing:1px; }
  .result-panels{ padding:0 12px 24px; gap:14px; }
  .panel{ padding:16px 18px; }
  .panel h3{ font-size:16px; }

  /* 成果页按钮：纵向排列、两键等宽满行（下载键不再吃工具栏的 100% 规则） */
  .result-actions{
    flex-direction:column; align-items:stretch; gap:10px;
    padding:0 16px calc(28px + env(safe-area-inset-bottom));
  }
  .result-actions .tool.primary{ flex-basis:auto; }
  .result-actions .big-action,
  .result-actions .btn-restart.big{ width:auto; min-width:0; padding:13px; justify-content:center; }
}