/* ============================================================
 * css/table-stickers.css — 桌贴页（#/real/stickers，realm/venues.js 的 ss-* 结构）屏幕态
 * ============================================================
 * 背景：ss-* 类名此前在样式表里没有任何定义（旧 web/css/table-stickers.css 在 6afdd5c 被删除
 * 且从未登记回 index.html）。上一批（6e97701）只补了打印口径（style.css 的 @media print 块，
 * 屏幕态不在该批范围）。本文件补屏幕态：四贴从「全宽纵向堆叠、无卡片边界、二维码铺满整屏、
 * 下载按钮 21px 高的浏览器默认样式」变成可读卡片。
 *
 * 为什么全部包在 @media screen 里（关键取舍）：
 *   本文件在 index.html 里排在 style.css 之后登记，而 style.css 的 @media print 块用的是
 *   .ss-sheet/.ss-stickers/.ss-sticker 等同特异性选择器；若在顶层写这些选择器，打印时后加载的
 *   本文件会覆盖打印块，把「A4 一页四贴」的 2×2 栅格、mm 尺寸与 42mm 二维码带回屏幕版式，
 *   直接打断 6e97701 已验收的打印版式。包进 @media screen 后，打印（media=print）时本文件
 *   一条规则都不参与层叠，打印口径仍然是 style.css 的唯一来源。故本文件不写任何 @media print。
 *
 * 版式取舍：
 *   - 贴纸栅格 repeat(auto-fit, minmax(150px, 1fr))：纸张内宽 320→264px 时自然只放 1 列
 *     （单贴拿满宽度、二维码 200px、可扫性最好），≥368px 视口（390/430 及多数机型）放 2 列，
 *     与打印的 2×2 版式一致；永远不可能 3~4 贴挤成一行。
 *   - 二维码不铺满屏：单贴内上限 200px 宽，且保留 SVG 自带的 4 模块静区，模块间距不小于
 *     3.2px（390px 宽机型实测 133px / 41 模块 ≈ 3.2px/模块），手机摄像头在 20~25cm 可读。
 *   - 单贴是可读卡片：白卡 + 1px 描边 + 圆角，场名/桌号/方位/搭档提示/扫码提示分层设字号，
 *     方位用品牌蓝药丸突出（屏幕主要靠它区分 N/E/S/W）；2026-09-14 品牌改蓝后该药丸随 --felt-* 令牌变蓝。
 *   - 「下载单张 SVG」为触控目标：min-height 40px、整宽（上限 190px）、描边次级按钮样式。
 *   - 「贴放示意」在屏幕上给真实方位盒（虚线桌面 + 四向药丸 + 桌心圆），否则 N/E/S/W 只会
 *     渲染成五行堆叠文字，读者无法判断方位。
 *   - 长场名/桌名可能很长：相关文本 overflow-wrap:anywhere，保证 320px 无横向溢出。
 * 目标视口：320 / 390 / 430 三宽无横向溢出。
 * ============================================================ */
@media screen {
  /* ---------- 顶部打印 CTA 区（.no-print，仅屏幕可见） ---------- */
  .ss-print-bar { margin: 12px 14px 14px; padding: 12px 12px 10px; border-radius: var(--radius);
    background: var(--card-grad); box-shadow: inset 0 0 0 1px var(--card-line), var(--shadow); }
  .ss-print-bar .btn { min-height: 46px; height: auto; padding: 9px 12px;
    font-size: 14.5px; line-height: 1.3; }
  .ss-print-bar .tiny { margin-top: 6px !important; line-height: 1.6; overflow-wrap: anywhere; }

  /* ---------- 纸张：屏幕态就是桌贴整块卡片 ---------- */
  .ss-print-area { padding: 0 0 24px; }
  .ss-sheet { margin: 0 14px; padding: 14px 14px 16px; border-radius: var(--radius);
    background: var(--card); box-shadow: inset 0 0 0 1px var(--card-line), var(--shadow); }
  .ss-sheet-title { margin: 0 0 12px; padding: 0 0 10px; border-bottom: 1px solid var(--line);
    color: var(--ink); font-size: 14px; font-weight: 800; line-height: 1.45;
    text-align: center; overflow-wrap: anywhere; }

  /* ---------- 四张贴纸：窄屏单列、常规手机 2×2（与打印版式一致，绝不铺成一行） ---------- */
  .ss-stickers { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 12px; }
  .ss-sticker { display: flex; flex-direction: column; align-items: center; min-width: 0;
    padding: 12px 10px 10px; border: 1px solid var(--line-2); border-radius: 14px;
    background: var(--card-grad); text-align: center; }
  .ss-st-venue { color: var(--ink-3); font-size: 12px; line-height: 1.4; overflow-wrap: anywhere; }
  .ss-st-table { margin-top: 2px; color: var(--ink); font-size: 16px; font-weight: 800; line-height: 1.3;
    overflow-wrap: anywhere; }
  .ss-st-dir { margin: 6px 0 10px; padding: 3px 12px; border-radius: 999px;
    background: var(--felt-100); color: var(--felt-700);
    font-size: 15px; font-weight: 800; line-height: 1.4; letter-spacing: .04em; }

  /* 二维码：单贴内上限 200px，容器留白 4px 白框（SVG 自带 4 模块静区，扫码不受影响） */
  .ss-st-qr { width: 100%; max-width: 200px; margin: 0 auto; padding: 4px;
    border-radius: 10px; background: #fff; box-shadow: inset 0 0 0 1px var(--line); }
  .ss-st-qr svg { display: block; width: 100%; height: auto; aspect-ratio: 1 / 1; background: #fff; }

  .ss-st-pair { margin-top: 10px; color: var(--ink-2); font-size: 12px; font-weight: 700; }
  .ss-st-tip { margin-top: 2px; color: var(--ink-3); font-size: 11.5px; }

  /* 单张下载：>=40px 触控高度、整宽次级按钮 */
  .ss-st-dl { margin-top: 10px; width: 100%; max-width: 190px; min-height: 40px; padding: 8px 12px;
    border: 1px solid var(--line-2); border-radius: 10px; background: #fff; color: var(--felt-700);
    font-family: inherit; font-size: 13px; font-weight: 700; line-height: 1.3; cursor: pointer; }
  .ss-st-dl:active { background: var(--felt-100); }

  /* ---------- 贴放示意（面向桌心） ---------- */
  .ss-map { margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--line); text-align: center; }
  .ss-map-t { margin: 0 0 10px; color: var(--ink-2); font-size: 12.5px; font-weight: 700; }
  .ss-map-box { position: relative; width: min(240px, 100%); height: 140px; margin: 0 auto;
    border: 1px dashed var(--line-2); border-radius: 14px; background: var(--card-soft);
    color: var(--felt-700); font-size: 12px; font-weight: 700; }
  .ss-map-n, .ss-map-e, .ss-map-s, .ss-map-w, .ss-map-c { position: absolute; }
  .ss-map-n, .ss-map-e, .ss-map-s, .ss-map-w { padding: 4px 10px; border-radius: 999px;
    background: var(--felt-100); white-space: nowrap; }
  .ss-map-n { top: 9px; left: 50%; transform: translateX(-50%); }
  .ss-map-e { right: 8px; top: 50%; transform: translateY(-50%); }
  .ss-map-s { bottom: 9px; left: 50%; transform: translateX(-50%); }
  .ss-map-w { left: 8px; top: 50%; transform: translateY(-50%); }
  .ss-map-c { left: 50%; top: 50%; transform: translate(-50%, -50%);
    display: flex; align-items: center; justify-content: center; width: 60px; height: 60px;
    border-radius: 50%; background: #fff; box-shadow: inset 0 0 0 1px var(--line-2); color: var(--ink-3); }
}