: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;
  }
  *{box-sizing:border-box;}
  html,body{height:100%;margin:0;padding:0;overflow:hidden;}
  body{
    background:var(--paper);
    color:var(--ink);
    font-family:var(--font);
    font-weight:900;
    display:flex;flex-direction:column;
    gap:clamp(6px,1vh,12px);
    padding:clamp(8px,1.6vh,16px) clamp(10px,2vw,24px) clamp(10px,1.8vh,18px);
    -webkit-tap-highlight-color:transparent;
  }
  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);
  }

  /* ---------- 顶栏 ---------- */
  .bar{position:relative;z-index:1;display:flex;align-items:center;gap:clamp(8px,1.4vw,18px);}
  .logo{
    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);
  }
  .hint{
    margin:0;min-width:0;
    font-size:clamp(11px,1.25vw,14px);font-weight:700;color:#4a4a4a;line-height:1.35;
    overflow:hidden;
  }
  .hud{margin-left:auto;display:flex;align-items:center;gap:clamp(6px,0.9vw,12px);flex-shrink:0;}
  .pill{
    display:inline-flex;align-items:baseline;gap:5px;white-space:nowrap;
    background:var(--white);border:3px solid var(--ink);border-radius:9px;
    box-shadow:3px 3px 0 var(--ink);
    padding:2px 10px;font-size:clamp(11px,1.25vw,14px);
  }
  .pill b{font-size:1.25em;}
  .burst{
    display:inline-flex;align-items:center;gap:5px;white-space:nowrap;
    background:var(--yellow);color:var(--ink);
    border:3px solid var(--ink);border-radius:9px;
    box-shadow:4px 4px 0 var(--red);padding:2px 12px;
    font-size:clamp(12px,1.6vw,19px);letter-spacing:.05em;
    transform:rotate(-3deg);
    transition:opacity .1s ease-out, transform .1s ease-out;
  }
  .burst.off{opacity:0;transform:rotate(-3deg) scale(.4);pointer-events:none;}
  .btn{
    appearance:none;font-family:inherit;font-weight:900;white-space:nowrap;
    background:var(--red);color:var(--white);
    border:3px solid var(--ink);border-radius:9px;
    box-shadow:3px 3px 0 var(--ink);
    padding:5px 16px;font-size:clamp(11px,1.25vw,14px);letter-spacing:.05em;cursor:pointer;
    transition:transform .15s ease-out, box-shadow .15s ease-out, background .15s ease-out, color .15s ease-out;
  }
  .btn:hover{transform:translate(2px,2px);box-shadow:1px 1px 0 var(--ink);background:var(--yellow);color:var(--ink);}
  .btn:active{transform:translate(3px,3px);box-shadow:none;}

  /* ---------- 棋盘 ---------- */
  .board-wrap{position:relative;z-index:1;flex:1 1 auto;min-height:0;display:flex;justify-content:center;}
  .board{
    position:relative;display:grid;
    grid-template-columns:repeat(5,1fr);grid-template-rows:repeat(5,1fr);
    gap:clamp(5px,0.85vw,11px);
    height:100%;width:100%;
    max-width:calc(100vh - 118px);
    max-width:min(1240px, calc(100dvh - 118px));
    background:var(--white);
    border:6px solid var(--ink);border-radius:16px;
    box-shadow:9px 9px 0 var(--ink);
    padding:clamp(7px,1vw,14px);
    touch-action:manipulation;
  }
  .card{
    appearance:none;font-family:inherit;font-weight:900;
    position:relative;display:flex;flex-direction:column;
    min-width:0;min-height:0;overflow:hidden;
    background:var(--white);
    border:4px solid var(--ink);border-radius:10px;
    box-shadow:4px 4px 0 var(--ink);
    padding:0;cursor:crosshair;
    transition:transform .1s ease-out, box-shadow .1s ease-out;
  }
  .pic{
    position:relative;display:block;flex:1 1 auto;min-height:0;overflow:hidden;
    border-bottom:4px solid var(--ink);background:#eeeee0;
  }
  .pic img{
    width:100%;height:100%;object-fit:cover;display:block;
    pointer-events:none;-webkit-user-drag:none;
    filter:contrast(1.05) saturate(1.06);
  }
  .veil{
    position:absolute;inset:0;display:grid;place-items:center;
    background:rgba(26,26,26,.42);
    opacity:0;transition:opacity .1s ease-out;
  }
  .veil b{
    font-size:clamp(16px,2.4vw,38px);color:var(--white);
    text-shadow:3px 3px 0 rgba(0,0,0,.5);
    transform:scale(.2) rotate(-14deg);
    transition:transform .1s ease-out;
  }
  .cap{
    flex:0 0 auto;display:block;
    padding:clamp(2px,.5vw,6px) 3px;
    font-size:clamp(9px,1.2vw,15px);line-height:1.2;letter-spacing:.02em;
    white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
  }
  .cap.long{font-size:clamp(8px,1.03vw,13px);letter-spacing:0;}
  .card:hover{transform:scale(1.055) rotate(-1.8deg);box-shadow:8px 8px 0 var(--ink);z-index:4;}
  .card.on{transform:translate(3px,3px);box-shadow:0 0 0 var(--ink);}
  .card.on .veil{opacity:1;}
  .card.on .veil b{transform:scale(1) rotate(-6deg);}
  .card.on:hover{transform:translate(1px,1px) scale(1.03) rotate(-1deg);box-shadow:2px 2px 0 var(--ink);}
  .card.hit{animation:hit .32s ease-out;}
  @keyframes hit{
    0%{transform:translate(3px,3px) scale(1);}
    45%{transform:translate(3px,3px) scale(1.13) rotate(-3deg);}
    100%{transform:translate(3px,3px) scale(1);}
  }

  /* ---------- 连线 ---------- */
  .fx{position:absolute;inset:0;pointer-events:none;z-index:6;}
  .strike{
    position:absolute;border-radius:99px;background:var(--ink);
    box-shadow:0 0 0 4px var(--paper), 0 0 0 7px rgba(26,26,26,.22);
    transform-origin:0 50%;
    transform:rotate(var(--rot)) scaleX(0);
  }
  .strike.in{animation:swipe .26s cubic-bezier(.2,.9,.3,1.3) forwards;}
  @keyframes swipe{
    from{transform:rotate(var(--rot)) scaleX(0);}
    to{transform:rotate(var(--rot)) scaleX(1);}
  }

  @media (max-width:760px){
    .hint{display:none;}
    .bar{gap:8px;}
    .logo{font-size:clamp(22px,7vw,32px);}
    .board{
      height:auto;width:100%;
      aspect-ratio:1 / 1.14;
      max-height:100%;
      border-width:5px;box-shadow:6px 6px 0 var(--ink);border-radius:12px;
    }
    .card{border-width:3px;box-shadow:3px 3px 0 var(--ink);border-radius:8px;}
    .pic{border-bottom-width:3px;}
    .cap{font-size:9px;padding:2px 1px;}
  }
  @media (max-height:520px){
    .hint{display:none;}
  }

  /* 对齐主页的硬边美漫系统：头部/控件直接复用 base.css 的 c-topbar / c-hero / c-chip / c-btn */
  :root{--font:var(--display)}
  body{font-family:var(--display);padding:0}
  /* 提示消息改为固定到屏幕右下角后，它不再占用棋盘的高度，
     这里把上下留白收紧，腾出的空间全部让给棋盘。 */
  .board-wrap{padding:8px clamp(8px,1.6vw,20px)}
  /* 棋盘外面再套一层「刚好包住棋盘」的盒子。
     计数器要贴棋盘的右下角：若直接挂在 .board-wrap 上，对齐的会是容器右边缘、
     跟棋盘右边缘错位，所以套这一层，让两者右边缘重合。
     margin:0 auto 是关键 —— 少了它这层会靠左（block 默认左对齐），
     棋盘跟着偏左、计数器也跟着跑偏。 */
  .board-fit{
    position:relative;display:flex;flex-direction:column;
    height:100%;width:100%;min-height:0;
    /* 92 = 顶栏高度 + 上下留白 + 余量。工具条移出文档流后，
       这条上限相应放宽，棋盘才能吃掉原来被它占掉的那一段高度。 */
    max-width:min(1240px, calc(100dvh - 92px));
    margin:0 auto;
  }
  .board{border-radius:4px;width:100%;height:auto;max-width:none;flex:1 1 auto;min-height:0}
  .card{border-radius:4px}
  /* 点击反馈：未选中的卡片按下时压平，松开回弹到 hover 的放大态 */
  .card:not(.on):active{transform:translate(3px,3px) scale(.97) rotate(0);box-shadow:0 0 0 var(--ink);z-index:5}
  .burst{
    background:var(--yellow);color:var(--ink);
    border:3px solid var(--ink);border-radius:4px;
    box-shadow:4px 4px 0 var(--red);
    font-family:var(--display);letter-spacing:.05em;
  }
  #reset{font-family:var(--display)}
  /* 提示消息：宽屏固定到「屏幕右下角」——脱离文档流，不再占棋盘的高度。
     这里是**竖排一列**（BINGO 数量在最上），不是横排：
     横排时排第一的 BINGO 徽章恰好是最宽的一项，整条会向左伸进棋盘区、
     把最右一列卡片的文字压住；竖排后整列宽度只由最宽的那一项决定，
     右边那溜空间足以容下，不碰棋盘。
     窗口接近正方形时右侧空间不够，自动回落到棋盘上方一行（媒体查询不成立）。 */
  .toolbar{
    flex:none;order:-1;
    display:flex;align-items:center;justify-content:flex-end;gap:10px;flex-wrap:wrap;
    padding:0 0 10px;
  }
  @media (min-width:760px) and (min-aspect-ratio:3/2){
    .toolbar{
      position:fixed;
      right:clamp(14px,2.2vw,32px);bottom:clamp(14px,2.4vh,26px);
      flex-direction:column;align-items:flex-end;justify-content:flex-end;flex-wrap:nowrap;
      gap:10px;order:0;padding:0;z-index:7;
    }
    .burst{font-size:clamp(18px,2.3vw,30px);padding:5px 18px}
  }
  @media (max-width:760px){
    .board-fit{max-width:100%}
    .board{border-radius:4px;max-width:100%}
    .card{border-radius:4px}
  }

  /* 滑过卡片时，先把「盖章以后」的样子透出来一点 —— 参考页
     .panel:hover::after 的同一套路（悬停预览，不改布局）。
     .card.on 的遮罩本来就是全不透明，用 :not(.on) 把它排除在外，
     两条规则各管各的，不存在覆盖关系 */
  .card:not(.on):hover .veil{opacity:.34}