*{box-sizing:border-box}

  :root{
    --ink:#1a1a1a;
    --paper:#fffef0;
    --white:#ffffff;
    --red:#ff3333;
    --yellow:#ffcc00;
    --blue:#3366ff;
    --green:#33cc33;
    --font:"Comic Sans MS","Chalkboard SE","PingFang SC","Microsoft YaHei","Hiragino Sans GB",sans-serif;
    /* 牌形固定 1:1.626。
       抽牌区的牌按视口高度缩放 —— 竖向空间优先给抽牌区；
       上面「过去/现在/未来」三个槽位相应收小，腾出高度。
       （用 vh 而不是固定 px：单屏布局里固定 px 放大后会把页面撑破、底部被裁） */
    --ch:clamp(150px,42vh,320px);
    --cw:calc(var(--ch) / 1.626);
    --ch-big:clamp(114px,26vh,200px);
    --cw-big:calc(var(--ch-big) / 1.626);
  }
  @media (max-width:760px){
    :root{--cw:104px;--ch:170px;--cw-big:74px;--ch-big:120px}
  }

  html,body{height:100%;margin:0;padding:0;overflow:hidden}
  body{
    background:var(--paper);color:var(--ink);
    font-family:var(--font);font-weight:900;
    -webkit-tap-highlight-color:transparent;user-select:none;
  }
  body::before{
    content:"";position:fixed;inset:0;pointer-events:none;z-index:0;
    background-image:radial-gradient(circle, rgba(26,26,26,.09) 1.1px, transparent 1.1px);
    background-size:9px 9px;
  }
  body::after{
    content:"";position:fixed;inset:0;pointer-events:none;z-index:0;
    background:repeating-linear-gradient(90deg, transparent 0 24px, rgba(26,26,26,.028) 24px 26px);
  }

  .band{display:none}
  .rule{display:none}

  .app{
    position:relative;z-index:1;height:100%;max-width:1240px;margin:0 auto;
    display:flex;flex-direction:column;gap:clamp(6px,1.2vh,13px);
    padding:clamp(8px,1.6vh,16px) clamp(10px,2vw,24px);
  }

  /* ---------- 顶栏 ---------- */
  .header{flex:none;display:flex;align-items:center;gap:clamp(8px,1.4vw,18px)}
  .header h1{
    margin:0;white-space:nowrap;font-size:clamp(24px,3.4vw,44px);line-height:1;letter-spacing:.03em;
    text-shadow:3px 3px 0 var(--red), -3px -3px 0 var(--blue);
  }
  .header p{
    margin:0;min-width:0;font-size:clamp(11px,1.25vw,14px);font-weight:700;
    color:#4a4a4a;line-height:1.35;
  }

  /* ---------- 三个槽位 ---------- */
  .reading{
    flex:none;display:flex;gap:clamp(12px,2.2vw,30px);justify-content:center;
    padding:clamp(2px,.6vh,8px) 0 0;
  }
  .slot-wrap{display:flex;flex-direction:column;align-items:center;gap:clamp(6px,1vh,11px)}
  .slot{
    position:relative;width:var(--cw-big);height:var(--ch-big);border-radius:12px;
    border:5px dashed rgba(26,26,26,.26);background:rgba(255,255,255,.55);
    display:flex;align-items:center;justify-content:center;
    transition:border-color .3s, background .3s;
  }
  .slot::before{content:attr(data-n);font-size:clamp(20px,2.4vw,30px);color:rgba(26,26,26,.2)}
  .slot:has(.placed){border-color:transparent;background:transparent}
  .slot:has(.placed)::before{opacity:0}
  .slot-cap{
    font-size:clamp(11px,1.2vw,14px);padding:3px 13px;
    background:var(--white);border:3px solid var(--ink);border-radius:9px;
    box-shadow:3px 3px 0 var(--ink);letter-spacing:.06em;
  }
  .slot-wrap:nth-child(1) .slot-cap{background:var(--blue);color:var(--white)}
  .slot-wrap:nth-child(2) .slot-cap{background:var(--red);color:var(--white)}
  .slot-wrap:nth-child(3) .slot-cap{background:var(--green);color:var(--white)}

  /* ---------- 牌桌 ---------- */
  .deck{
    position:relative;z-index:1;flex:1 1 auto;width:100%;min-height:clamp(150px,26vh,240px);
    background:var(--white);border:5px solid var(--ink);border-radius:16px;
    box-shadow:8px 8px 0 var(--ink);
  }

  /* ---------- 卡片 ---------- */
  .card{
    position:absolute;left:50%;bottom:22px;width:var(--cw);height:var(--ch);
    margin-left:calc(var(--cw) / -2);perspective:900px;transform-origin:center bottom;
    cursor:pointer;will-change:transform;
    transition:transform .42s cubic-bezier(.34,1.3,.64,1), opacity .3s ease;
  }
  .card-inner{
    position:relative;width:100%;height:100%;transform-style:preserve-3d;
    transition:transform .58s cubic-bezier(.42,0,.28,1);
  }
  .card.flipped .card-inner{transform:rotateY(180deg)}
  .card-face{
    position:absolute;inset:0;border-radius:10px;overflow:hidden;
    backface-visibility:hidden;-webkit-backface-visibility:hidden;
    box-shadow:4px 4px 0 var(--ink);
  }

  .card-back{
    border:4px solid var(--ink);background:var(--white);
    display:grid;place-items:center;
    background-image:radial-gradient(circle, rgba(26,26,26,.10) 1px, transparent 1px);
    background-size:8px 8px;
  }
  .bk-q{
    width:56%;aspect-ratio:1;display:grid;place-items:center;
    font-size:calc(var(--cw) * .4);line-height:1;color:var(--ink);
    background:var(--yellow);border:4px solid var(--ink);border-radius:50%;
    box-shadow:3px 3px 0 var(--ink);transform:rotate(-8deg);
  }

  .card-front{
    transform:rotateY(180deg);background:var(--white);border:4px solid var(--ink);
    display:flex;flex-direction:column;
  }
  /* 图片区固定 1:1，和建筑图标同形：不裁切、不留空档 */
  .fm-img{
    flex:none;width:100%;aspect-ratio:1 / 1;overflow:hidden;
    display:flex;align-items:center;justify-content:center;
  }
  .fm-img svg{width:100%;height:100%;display:block}
  .fm-label{
    flex:1 1 auto;min-height:0;border-top:4px solid var(--ink);
    display:flex;flex-direction:column;align-items:center;justify-content:center;
    gap:2px;padding:2px;
  }
  .fm-label b{
    font-size:clamp(11px,1.3vw,16px);letter-spacing:.02em;
    white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%;
  }
  .fm-label span{font-size:clamp(8px,1vw,11px);font-weight:700;opacity:.82;letter-spacing:.02em}
  /* 标名带按建筑上色，沿用 bingo 的五色分组 */
  .card-front[data-b="定日镜场"] .fm-label{background:var(--blue);color:var(--white)}
  .card-front[data-b="庭院"]     .fm-label{background:var(--red);color:var(--white)}
  .card-front[data-b="中央公园"] .fm-label{background:var(--green);color:var(--white)}
  .card-front[data-b="钟楼"]     .fm-label{background:var(--yellow);color:var(--ink)}
  .card-front[data-b="钟楼"] .fm-label span{opacity:.7}

  .card.placed{
    position:absolute;inset:0;width:100%;height:100%;margin:0;
    transform:none;transform-origin:center center;cursor:default;pointer-events:none;
    transition:none;animation:pop .42s cubic-bezier(.34,1.3,.64,1);
  }
  .card.placed .card-face{box-shadow:8px 8px 0 var(--ink)}
  @keyframes pop{from{opacity:0;transform:translateY(14px) scale(.9) rotate(-3deg)} to{opacity:1;transform:none}}

  /* ---------- 底部 ---------- */
  .footer{
    flex:none;display:flex;align-items:center;justify-content:center;gap:14px;
    padding-bottom:clamp(2px,.6vh,8px);
  }
  #reset{
    appearance:none;font-family:inherit;font-weight:900;white-space:nowrap;
    background:var(--red);color:var(--white);
    border:3px solid var(--ink);border-radius:10px;box-shadow:3px 3px 0 var(--ink);
    padding:7px 22px;font-size:clamp(12px,1.3vw,15px);letter-spacing:.06em;cursor:pointer;
    transition:transform .15s ease-out, box-shadow .15s ease-out, background .15s, color .15s;
  }
  #reset:hover{transform:translate(2px,2px);box-shadow:1px 1px 0 var(--ink);background:var(--yellow);color:var(--ink)}
  #reset:active{transform:translate(3px,3px);box-shadow:none}
  .hint{
    font-size:clamp(11px,1.25vw,14px);font-weight:900;
    background:var(--white);border:3px solid var(--ink);border-radius:9px;
    box-shadow:3px 3px 0 var(--ink);padding:4px 12px;
  }

  @media (max-width:760px){
    .header p{display:none}
    .app{gap:8px}
    .deck{min-height:190px;border-width:4px;box-shadow:5px 5px 0 var(--ink);border-radius:13px}
    .card-face{border-radius:8px;box-shadow:3px 3px 0 var(--ink)}
    .card-back{border-width:3px}
    .bk-q{border-width:3px;box-shadow:2px 2px 0 var(--ink)}
    .card-front{border-width:3px}
    .fm-label{border-top-width:3px}
    .slot-cap{border-width:2px;box-shadow:2px 2px 0 var(--ink);padding:2px 9px}
  }

  /* ===== 硬边美漫覆盖层：头部直接复用主页的 c-topbar / c-hero 组件 ===== */
  :root{
    --font:var(--display);      /* 标题/正文族统一到系统字体 */
    --white:var(--paper-2);     /* 收编白色到 paper-2，配色收敛 */
  }

  /* 接入主页顶栏后，body 改成「顶栏 + Hero 固定、牌桌区自适应」的纵向 flex */
  html,body{height:100%;overflow:hidden}
  body{display:flex;flex-direction:column}
  .c-topbar,.c-hero{flex:none}
  .app{flex:1 1 auto;height:auto;min-height:0}

  /* 圆角 >8px → 硬角 4px（圆形元素不受影响） */
  .slot,.slot-cap,.deck,.card-face,#reset,.hint{border-radius:4px}

  /* 虚线 / 半透明边框 → 实心墨线 */
  .slot{
    border:var(--bw) solid var(--ink);
    background:var(--paper-2);
  }

  /* 硬偏移墨线阴影：套用系统 token */
  .slot-cap{box-shadow:var(--sh-s)}
  /* 牌桌：悬停抬升、按下压平。只用 box-shadow 反馈，不碰 transform —— 牌堆里
     每张牌的位置由 JS 的抽牌动画写 transform，改父级 transform 会连带位移整叠牌 */
  .deck{box-shadow:var(--sh-l);transition:box-shadow .1s ease-out}
  .deck:hover{box-shadow:12px 12px 0 var(--ink)}
  .deck:active{box-shadow:4px 4px 0 var(--ink)}
  .card-face{box-shadow:var(--sh-s)}
  .bk-q{box-shadow:var(--sh-s)}
  .hint{box-shadow:var(--sh-s)}

  /* 卡片 / 槽位标签一律用 --display */
  .slot-cap,.fm-label b,.hint{
    font-family:var(--display);text-transform:uppercase;letter-spacing:.04em;
  }
  .fm-label span{font-family:var(--body)}

  /* 按钮：硬边 + 位移手感 */
  #reset{
    font-family:var(--display);text-transform:uppercase;letter-spacing:.04em;
    border:var(--bw) solid var(--ink);box-shadow:var(--sh-m);
  }
  #reset:hover{transform:translate(3px,3px);box-shadow:3px 3px 0 var(--ink);background:var(--yellow);color:var(--ink)}
  #reset:active{transform:translate(6px,6px);box-shadow:none}

  /* 抽牌区：去掉牌桌的边框、底色与投影，这块整片都是抽牌区，
     顶栏以下的空间全给它。min-height 跟着牌高走，保证牌堆永远放得下。
     宽度用 100vw + 负 margin 突破 .app 的 max-width，牌堆才能铺满屏幕两边。 */
  .deck{
    background:transparent;border:0;box-shadow:none;border-radius:0;
    min-height:calc(var(--ch) + 26px);
    width:100vw;margin-left:calc(50% - 50vw);margin-right:calc(50% - 50vw);
  }
  .deck:hover,.deck:active{box-shadow:none}

  /* 槽位是「放置目标」：滑过时底色飘黄，表示这里能放牌（参考页
     .tbl tr:hover td / .crumb a:hover 的同一反馈）。
     已放过牌的槽位已经被 .slot:has(.placed) 透明化，这里必须排除，
     否则牌后面会透出一块黄底 */
  .slot{transition:background .12s linear}
  .slot:not(:has(.placed)):hover{background:var(--yellow)}
  /* 槽位标签与页脚提示条：硬阴影内缩 + 位移，与按钮同一手感 */
  .slot-cap,.hint{transition:transform .1s linear,box-shadow .1s linear}
  .slot:not(:has(.placed)):hover .slot-cap{transform:translate(-2px,-2px);box-shadow:4px 4px 0 0 var(--ink)}
  .hint:hover{transform:translate(-2px,-2px);box-shadow:4px 4px 0 0 var(--ink)}