/* ============================================================
   符号名搭配器 · 共用样式
   ------------------------------------------------------------
   免费页 /name/peidai 和 付费页的自由搭配弹层共用这一份。
   两边外观必须完全一致，所以样式只此一份：改这里，两边同时生效，
   不会出现"改了一边忘了另一边"。
   ============================================================ */

/* ---------- 游戏切换标签 ---------- */
.gtabs{display:flex;gap:8px;margin-bottom:10px}
.gtab{
  flex:1;border:1.5px solid #e9ecf5;background:#f7f8fd;border-radius:11px;
  padding:9px 6px;font-family:inherit;font-size:13.5px;font-weight:700;color:#5b6478;
  cursor:pointer;transition:all .15s;
  display:flex;flex-direction:column;align-items:center;gap:2px;
}
.gtab small{font-weight:400;font-size:11px;color:#9aa1b5}
.gtab.sel{background:linear-gradient(100deg,#eef2ff,#f5edff);border-color:#b9c6ff;color:#3d4ec4}
.gtab.sel small{color:#7b86c9}

/* ---------- 符号网格 ---------- */
/* 宽屏 8 列、窄屏 6 列 —— 和原型一致（原型就是这么写的） */
.sym-grid{display:grid;grid-template-columns:repeat(6,1fr);gap:8px;margin-top:2px}
@media (min-width:420px){.sym-grid{grid-template-columns:repeat(8,1fr)}}
.sym-cell{
  position:relative;aspect-ratio:1/1;border:1.5px solid #e9ecf5;background:#f7f8fd;
  border-radius:11px;cursor:pointer;padding:0;overflow:hidden;
  display:flex;align-items:center;justify-content:center;
  transition:border-color .12s, background .12s, transform .1s;
  -webkit-user-select:none;user-select:none;-webkit-touch-callout:none;
}
/* 用 canvas 而不是 img：符号要按"和汉字同字号"的比例画，
   直接放 img 会被撑满格子，显得又大又笨，和原型不是一回事 */
.sym-cell canvas{width:100%;height:100%;display:block;pointer-events:none}
.sym-cell:active{transform:scale(.94)}
.sym-cell.sel{border-color:#8b5cf6;background:linear-gradient(135deg,#f1edff,#e8f0ff)}
.sym-cell .ord{
  position:absolute;top:2px;right:3px;font-size:9.5px;font-weight:800;color:#fff;
  background:linear-gradient(135deg,#4f7cff,#8b5cf6);
  min-width:13px;height:13px;border-radius:999px;
  display:none;align-items:center;justify-content:center;padding:0 3px;
}
.sym-cell.sel .ord{display:flex}

/* ---------- 拖动搭配区 ---------- */
.strip{
  display:flex;flex-wrap:wrap;gap:5px;justify-content:center;padding:12px 8px;
  background:#f7f8fd;border-radius:14px;border:1.5px dashed #e3e7f2;min-height:78px;
  align-content:center;touch-action:none;
}
.strip-empty{color:#b3b9cb;font-size:12.5px;margin:auto}
.blk{
  /* ★ 拖动区方块大小就改这两行：
     width / height 一起改（比如 40px 更紧凑、56px 更大），
     块里的字会自动按比例跟着变（pad.js 里 字号 = 块宽 × 0.56）。
     改完刷新页面即可（手机上看不到变化就清一下缓存）。 */
  position:relative;width:40px;height:40px;border-radius:10px;background:#fff;
  border:1.5px solid #eef1f8;cursor:grab;touch-action:none;flex:none;
  display:flex;align-items:center;justify-content:center;
  transition:border-color .12s, box-shadow .12s;
}
.blk canvas{width:100%;height:100%;display:block;pointer-events:none}
.blk.sign{background:#fbf9ff;border-color:#e9e2ff}
/* 拖动中：整块跟着手指走（X 和 Y 都跟），所以能拖到第二行的位置 */
.blk.drag{border-color:#8b5cf6;box-shadow:0 10px 26px rgba(124,108,240,.3);z-index:20;cursor:grabbing;opacity:.96}
.blk .blk-x{
  position:absolute;top:-7px;right:-7px;width:18px;height:18px;border-radius:50%;
  background:#fff;border:1.5px solid #f5b9b9;color:#e24b4a;font-size:11px;line-height:1;
  display:flex;align-items:center;justify-content:center;cursor:pointer;
  font-family:inherit;padding:0;z-index:2;
}
.blk .blk-x:hover{background:#fdecec}
.blk .blk-x:active{background:#fdecec;border-color:#e24b4a;color:#e24b4a}

/* ---------- 快捷摆放 ---------- */
.quick-bar{display:flex;gap:7px;margin-top:10px}
.q-btn{
  flex:1;border:1.5px solid #e9ecf5;background:#f7f8fd;border-radius:10px;
  padding:8px 4px;font-family:inherit;font-size:12.5px;font-weight:600;color:#5b6478;
  cursor:pointer;transition:all .14s;white-space:nowrap;
}
.q-btn:active{background:#eef2ff;border-color:#c9d3ff;color:#3d4ec4}

/* ---------- 预览（深色底，和原型一致） ---------- */
.preview-box{
  background:#151a26;border-radius:14px;padding:14px 12px;position:relative;overflow:hidden;
  margin-top:12px;-webkit-user-select:none;user-select:none;-webkit-touch-callout:none;
}
.preview-box::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(circle at 50% 120%,rgba(124,108,240,.22),transparent 60%);
}
.preview-box canvas{width:100%;height:104px;display:block;position:relative;z-index:1}
.pv-hint{text-align:center;font-size:11.5px;color:#7f8aa6;margin-top:7px;position:relative;z-index:1;min-height:15px}
.pv-lock{text-align:center;font-size:11px;color:#8b93ad;margin-top:2px;position:relative;z-index:1}