/* =========================================================
     奶油糖果玩具盒 · Claymorphism + Tactile Digital
     奶油底 / 泡泡糖 / 香芋 / 薄荷 / 黄油 / 可可紫
     ========================================================= */
  :root{
    color-scheme:light;
    --paper:#FFF7F0;
    --paper-2:#FFEDE1;
    --card:#FFFFFF;
    --ink:#4B3A55;
    --ink-2:#7A6A83;
    --muted:#9C8CA3;
    --pink:#FF89AE;
    --pink-deep:#E8557F;
    --pink-ink:#C93D6E;
    --taro:#B7A4FF;
    --taro-ink:#7C63E8;
    --mint:#5FD1AE;
    --mint-ink:#1F8A6B;
    --butter:#FFCE6B;
    --butter-ink:#8A5A00;
    --line:rgba(75,58,85,.10);
    --line-2:rgba(75,58,85,.20);
    --r-xl:30px;
    --r-lg:22px;
    --r:16px;
    --r-sm:12px;
    --sh-card:
      inset 0 2px 0 rgba(255,255,255,.95),
      inset 0 -4px 0 rgba(75,58,85,.045),
      0 24px 44px -30px rgba(75,58,85,.5),
      0 6px 16px -12px rgba(75,58,85,.28);
    --sh-key:0 5px 0 -1px rgba(75,58,85,.14), 0 14px 22px -16px rgba(75,58,85,.55);
    --font:"Varela Round","Nunito","Quicksand","Comfortaa","PingFang SC","HarmonyOS Sans SC","Microsoft YaHei UI","Microsoft YaHei",system-ui,-apple-system,"Segoe UI",sans-serif;
    --spring:cubic-bezier(.34,1.56,.64,1);
}


  *{box-sizing:border-box}
  [hidden]{display:none !important}
  html,body{height:100%}
  body{
    margin:0;
    font-family:var(--font);
    color:var(--ink);
    background:var(--paper);
    -webkit-font-smoothing:antialiased;
    overflow-x:hidden;
  }
  button{font-family:inherit;color:inherit}
  img{display:block}
  h1,h2,p{margin:0}
  svg{display:block}
  ::selection{background:rgba(255,137,174,.35)}
  :focus-visible{outline:3px solid var(--taro-ink);outline-offset:3px;border-radius:6px}

  /* ---------- 奶油桌面：柔和色块 + 波点 ---------- */
  .aurora{
    position:fixed;inset:0;z-index:0;pointer-events:none;
    background:
      radial-gradient(46vw 46vw at 6% -8%,rgba(255,137,174,.34),transparent 62%),
      radial-gradient(40vw 40vw at 98% 0%,rgba(183,164,255,.32),transparent 62%),
      radial-gradient(56vw 44vw at 48% 112%,rgba(95,209,174,.26),transparent 64%),
      linear-gradient(180deg,var(--paper),var(--paper-2) 58%,var(--paper));
  }
  .aurora::after{
    content:"";position:absolute;inset:0;
    background-image:radial-gradient(rgba(75,58,85,.09) 1.5px,transparent 1.6px);
    background-size:24px 24px;
    -webkit-mask-image:radial-gradient(120% 85% at 50% 0%,rgba(0,0,0,.6),transparent 74%);
    mask-image:radial-gradient(120% 85% at 50% 0%,rgba(0,0,0,.6),transparent 74%);
  }

  /* ---------- 顶栏 ---------- */
  .topbar{
    position:sticky;top:0;z-index:30;
    background:rgba(255,247,240,.84);
    backdrop-filter:blur(18px) saturate(1.15);
    border-bottom:2px solid rgba(255,255,255,.9);
    box-shadow:0 12px 30px -26px rgba(75,58,85,.6);
  }
  .topbar::after{
    content:"";position:absolute;left:0;right:0;bottom:-3px;height:5px;opacity:.95;
    background:linear-gradient(90deg,var(--pink) 0%,var(--butter) 32%,var(--mint) 60%,var(--taro) 100%);
  }
  .topbar-inner{
    position:relative;max-width:1320px;margin:0 auto;padding:14px 24px;
    display:flex;align-items:center;gap:14px;
  }
  .brand{display:flex;align-items:center;gap:13px;min-width:0}
  /* 品牌标识：整站（后台 / 官网 / 客户页 / 标签页）共用 /brand.svg
     换正式 logo 时只替换那一个文件，这里不用动 */
  .brand-mark{
    width:48px;height:48px;flex:none;display:block;
    transform:rotate(-4deg);
    filter:drop-shadow(0 9px 14px rgba(232,85,127,.45));
  }
  .brand-text{display:flex;flex-direction:column;gap:3px;min-width:0}
  .brand-title{
    font-size:17px;font-weight:800;letter-spacing:.01em;line-height:1.15;color:var(--ink);
    text-wrap:balance;
  }
  .brand-sub{font-size:11.5px;color:var(--muted);letter-spacing:.03em}
  .topbar-end{margin-left:auto;display:flex;align-items:center;gap:10px}

  .status-chip{
    display:inline-flex;align-items:center;gap:8px;
    height:38px;padding:0 15px;border-radius:999px;
    font-size:12.5px;font-weight:750;letter-spacing:.02em;
    color:var(--ink-2);background:#fff;border:3px solid #fff;
    box-shadow:0 4px 0 -1px rgba(75,58,85,.13),0 10px 18px -14px rgba(75,58,85,.5);
    transition:background .25s,color .25s,box-shadow .25s;
  }
  .status-chip .pip{
    width:9px;height:9px;border-radius:50%;background:var(--muted);flex:none;
    box-shadow:0 0 0 3px rgba(75,58,85,.08);transition:background .25s,box-shadow .25s;
  }
  .status-chip.is-play{color:var(--taro-ink);background:linear-gradient(180deg,#F3EEFF,#fff 70%)}
  .status-chip.is-play .pip{background:var(--taro);box-shadow:0 0 0 4px rgba(183,164,255,.38)}
  .status-chip.is-bingo{color:var(--butter-ink);background:linear-gradient(180deg,#FFF3D6,#fff 70%)}
  .status-chip.is-bingo .pip{background:var(--butter);box-shadow:0 0 0 4px rgba(255,206,107,.45)}

  .icon-btn{
    width:42px;height:42px;display:grid;place-items:center;cursor:pointer;
    background:#fff;border:3px solid #fff;border-radius:14px;color:var(--ink);
    box-shadow:0 5px 0 -1px rgba(75,58,85,.14),0 12px 20px -16px rgba(75,58,85,.6);
    transition:transform .14s var(--spring),box-shadow .14s,background .18s;
  }
  .icon-btn:hover{background:#FFFBF7;transform:translateY(-1px)}
  .icon-btn:active{transform:translateY(4px);box-shadow:0 1px 0 -1px rgba(75,58,85,.14)}

  /* ---------- 布局 ---------- */
  .layout{
    position:relative;z-index:2;
    max-width:1320px;margin:0 auto;padding:26px 24px 64px;
    display:grid;grid-template-columns:minmax(0,1fr) 348px;gap:20px;align-items:start;
  }
  .stage{display:flex;flex-direction:column;gap:16px;min-width:0}
  .side{display:flex;flex-direction:column;gap:14px;min-width:0}

  .panel,.toolbar,.board-wrap{
    position:relative;
    background:linear-gradient(180deg,#fff,#FFFCFA);
    border:3px solid #fff;
    box-shadow:var(--sh-card);
  }
  .panel,.toolbar{border-radius:26px}

  .panel-head{position:relative;display:flex;align-items:center;gap:10px;padding:17px 20px 12px}
  .panel-title{font-size:14px;font-weight:800;letter-spacing:.02em;color:var(--ink)}
  .panel-note{margin-left:auto;font-size:12px;color:var(--muted);font-variant-numeric:tabular-nums}
  .panel-body{position:relative;padding:0 20px 20px}

  /* ---------- 工具栏 ---------- */
  .toolbar{
    padding:18px 20px;
    display:flex;flex-wrap:wrap;align-items:flex-end;gap:18px 26px;
  }
  .field{display:flex;flex-direction:column;gap:10px}
  .field-label{
    font-size:10.5px;font-weight:800;letter-spacing:.14em;
    color:var(--muted);text-transform:uppercase;
  }
  .size-row{display:flex;align-items:center;gap:10px}
  .times{color:var(--muted);font-size:14px;font-weight:800}

  .stepper{
    display:flex;align-items:center;overflow:hidden;
    background:var(--paper-2);border:3px solid #fff;border-radius:999px;
    box-shadow:0 4px 0 -1px rgba(75,58,85,.12),inset 0 3px 8px rgba(75,58,85,.07);
  }
  .stepper button{
    width:40px;height:44px;border:0;background:transparent;cursor:pointer;
    font-size:18px;line-height:1;font-weight:800;color:var(--ink);
    display:grid;place-items:center;transition:background .16s,transform .12s var(--spring);
  }
  .stepper button:hover:not(:disabled){background:#fff}
  .stepper button:active:not(:disabled){transform:scale(.86)}
  .stepper button:disabled{opacity:.3;cursor:not-allowed}
  .stepper-val{
    min-width:46px;text-align:center;font-size:15.5px;font-weight:800;
    font-variant-numeric:tabular-nums;line-height:44px;color:var(--ink);
    background:#fff;border-left:2px solid rgba(75,58,85,.07);border-right:2px solid rgba(75,58,85,.07);
  }

  .chips{display:flex;gap:8px;flex-wrap:wrap}
  .chip{
    height:42px;padding:0 16px;border-radius:999px;
    border:3px solid #fff;background:#fff;color:var(--ink-2);cursor:pointer;
    font-size:12.5px;font-weight:750;font-variant-numeric:tabular-nums;
    box-shadow:0 4px 0 -1px rgba(75,58,85,.12);
    transition:transform .14s var(--spring),box-shadow .16s,background .18s,color .18s;
  }
  .chip:hover:not(:disabled){transform:translateY(-1px);color:var(--ink);background:#FFFBF7}
  .chip:active:not(:disabled){transform:translateY(3px);box-shadow:0 1px 0 -1px rgba(75,58,85,.12)}
  .chip.is-on{
    color:#fff;background:linear-gradient(150deg,#FFA6C1,var(--pink) 48%,var(--taro));
    box-shadow:0 4px 0 -1px rgba(124,99,232,.4),0 14px 22px -16px rgba(232,85,127,.95);
  }
  .chip.is-on:hover:not(:disabled){color:#fff;background:linear-gradient(150deg,#FFA6C1,var(--pink) 48%,var(--taro))}
  .chip:disabled{opacity:.4;cursor:not-allowed}

  .btn{
    position:relative;height:46px;padding:0 19px;border-radius:16px;
    border:3px solid #fff;background:#fff;color:var(--ink);
    font-size:13.5px;font-weight:750;cursor:pointer;
    display:inline-flex;align-items:center;gap:8px;white-space:nowrap;
    box-shadow:var(--sh-key);
    transition:transform .14s var(--spring),box-shadow .14s,filter .18s,background .18s;
  }
  .btn:hover:not(:disabled){transform:translateY(-1px);background:#FFFBF7}
  .btn:active:not(:disabled){transform:translateY(4px);box-shadow:0 1px 0 -1px rgba(75,58,85,.14)}
  .btn:disabled{opacity:.4;cursor:not-allowed;box-shadow:0 3px 0 -1px rgba(75,58,85,.1)}
  .btn-primary{
    border-color:#fff;color:#fff;
    background:linear-gradient(152deg,#FFA2BD 0%,var(--pink) 52%,#F0699A 100%);
    text-shadow:0 1px 0 rgba(160,40,80,.3);
    box-shadow:0 5px 0 -1px rgba(214,60,110,.55),0 16px 24px -16px rgba(232,85,127,.95);
  }
  .btn-primary:hover:not(:disabled){background:linear-gradient(152deg,#FFAEC7 0%,#FF95B6 52%,#F4749F 100%);filter:none}
  .btn-primary:active:not(:disabled){box-shadow:0 1px 0 -1px rgba(214,60,110,.55)}
  .btn-sm{height:38px;padding:0 14px;font-size:12.5px;border-radius:13px}

  .toolbar-end{margin-left:auto;display:flex;align-items:center;gap:10px;flex-wrap:wrap}
  .lock-chip{
    display:inline-flex;align-items:center;gap:7px;height:38px;padding:0 15px;
    border-radius:999px;font-size:12px;font-weight:750;
    color:var(--taro-ink);background:linear-gradient(180deg,#F3EEFF,#fff 72%);
    border:3px solid #fff;box-shadow:0 4px 0 -1px rgba(124,99,232,.2);
  }

  /* ---------- 糖果托盘 ---------- */
  .board-wrap{
    border-radius:var(--r-xl);
    padding:18px 18px 20px;
    display:flex;flex-direction:column;gap:14px;
    transition:box-shadow .3s;
  }
  .board-wrap.is-bingo{
    box-shadow:0 0 0 4px rgba(255,206,107,.6),var(--sh-card);
  }
  .board-head{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
  .board-hint{font-size:12.5px;color:var(--muted);font-weight:650}
  .board-hint b{color:var(--ink);font-weight:800}
  .board-meters{margin-left:auto;display:flex;gap:8px;flex-wrap:wrap}
  .meter{
    display:inline-flex;align-items:center;gap:6px;height:30px;padding:0 12px;border-radius:999px;
    background:var(--paper-2);border:2px solid rgba(75,58,85,.07);
    font-size:11.5px;font-weight:700;color:var(--muted);font-variant-numeric:tabular-nums;
  }
  .meter b{font-weight:800;color:var(--ink)}
  .meter.hit{
    color:var(--mint-ink);background:#E9FBF4;border-color:rgba(95,209,174,.65);
  }
  .meter.hit b{color:var(--mint-ink)}

  .board{
    display:grid;gap:clamp(4px,.8vmin,9px);
    grid-template-columns:repeat(var(--c,5),minmax(0,1fr));
    aspect-ratio:var(--c,5) / var(--r,5);
    width:min(100%,calc(58vh * var(--c,5) / var(--r,5)),660px);
    margin:0 auto;position:relative;
  }

  /* ---------- 软糖格子 ---------- */
  .cell{
    position:relative;aspect-ratio:1;padding:0;border-radius:20px;
    border:0;background:#fff;overflow:hidden;
    box-shadow:0 4px 0 -1px rgba(75,58,85,.1),0 14px 24px -20px rgba(75,58,85,.6);
    transition:transform .18s var(--spring),box-shadow .2s ease;
  }
  /* 白底补齐：原图按完整比例居中，四周直接留白 */
  .cell img.fg{
    position:absolute;inset:0;width:100%;height:100%;object-fit:contain;
    transition:filter .25s;
  }
  .cell::after{
    content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;
    box-shadow:inset 0 0 0 3px #fff;
  }
  .cell .idx{
    position:absolute;top:6px;left:6px;padding:1px 8px;border-radius:999px;
    background:rgba(255,255,255,.94);border:2px solid rgba(75,58,85,.1);
    color:var(--ink);font-size:10px;font-weight:800;letter-spacing:.02em;
    font-variant-numeric:tabular-nums;
  }
  .cell .ph{
    position:absolute;inset:0;display:grid;place-items:center;
    background:repeating-linear-gradient(135deg,rgba(255,137,174,.16) 0 12px,rgba(183,164,255,.12) 12px 24px);
    color:rgba(75,58,85,.45);font-size:20px;font-weight:800;
  }
  .cell .stamp{
    position:absolute;inset:0;display:grid;place-items:center;
    opacity:0;transform:scale(.75);
    background:
      radial-gradient(120% 120% at 28% 20%,rgba(255,255,255,.5),transparent 56%),
      linear-gradient(150deg,rgba(255,137,174,.9),rgba(183,164,255,.88));
    box-shadow:inset 0 0 0 4px rgba(255,255,255,.62);
    transition:opacity .16s ease,transform .24s var(--spring);
  }
  .cell .stamp svg{filter:drop-shadow(0 2px 6px rgba(90,40,70,.35))}
  .cell.marked{transform:scale(.965);box-shadow:0 0 0 3px var(--pink),0 3px 0 -1px rgba(75,58,85,.12),0 18px 26px -20px rgba(232,85,127,.95)}
  .cell.marked .stamp{opacity:1;transform:scale(1)}
  .cell.marked img.fg{filter:brightness(.9) saturate(.94)}
  .cell.win{z-index:2;box-shadow:0 0 0 4px var(--butter),0 0 0 9px rgba(255,206,107,.34),0 18px 30px -18px rgba(228,150,20,.9);animation:pop .36s var(--spring)}
  .cell.win .stamp{
    background:
      radial-gradient(120% 120% at 28% 20%,rgba(255,255,255,.55),transparent 56%),
      linear-gradient(150deg,rgba(255,206,107,.94),rgba(255,137,174,.9));
  }
  @keyframes pop{0%{transform:scale(.965)}45%{transform:scale(1.055)}100%{transform:scale(1)}}

  .board.is-play .cell{cursor:pointer}
  .board.is-play .cell:hover:not(.marked){
    transform:translateY(-4px) rotate(-.7deg);
    box-shadow:0 0 0 3px rgba(183,164,255,.9),0 22px 30px -22px rgba(75,58,85,.75);
  }
  .board.is-play .cell:hover:not(.marked) img.fg{filter:saturate(1.08) brightness(1.03)}
  .board.is-play .cell.marked:hover{transform:scale(.985) rotate(.6deg)}
  .board.tiny-cells .cell .idx{display:none}
  .board.tiny-cells .cell .stamp svg{width:52%;height:52%}

  /* ---------- BINGO 横幅 ---------- */
  .banner{
    position:absolute;left:50%;top:16px;transform:translate(-50%,-14px) scale(.9);
    display:flex;align-items:center;gap:10px;
    padding:12px 22px 12px 16px;border-radius:999px;overflow:hidden;
    background:
      radial-gradient(circle at 12% 84%,rgba(255,255,255,.55) 0 4px,transparent 5px),
      radial-gradient(circle at 78% 22%,rgba(255,255,255,.5) 0 3px,transparent 4px),
      radial-gradient(circle at 46% 78%,rgba(255,255,255,.45) 0 3px,transparent 4px),
      linear-gradient(118deg,var(--butter) 0%,#FFB067 46%,var(--pink) 100%);
    border:3px solid #fff;color:#5A2E12;
    font-size:15px;font-weight:800;letter-spacing:.05em;
    box-shadow:0 5px 0 -1px rgba(214,60,110,.3),0 22px 40px -22px rgba(232,85,127,.95);
    opacity:0;pointer-events:none;z-index:12;
    transition:opacity .3s,transform .3s var(--spring);
  }
  .banner.show{opacity:1;transform:translate(-50%,0) scale(1)}
  .banner small{font-size:12px;font-weight:750;opacity:.72;letter-spacing:.02em}

  /* ---------- 玩法说明 ---------- */
  .steps{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:13px}
  .steps li{display:flex;gap:11px;font-size:12.5px;line-height:1.72;color:var(--ink-2)}
  .steps .n{
    flex:none;width:24px;height:24px;border-radius:50%;margin-top:1px;
    display:grid;place-items:center;font-size:11px;font-weight:800;color:#fff;
    background:linear-gradient(158deg,#FFA6C1,var(--pink));
    border:2px solid #fff;box-shadow:0 3px 0 rgba(232,85,127,.32);
  }
  .steps b{color:var(--ink);font-weight:800}
  .steps code{
    font-family:ui-monospace,"Cascadia Mono",Consolas,monospace;font-size:11px;
    background:rgba(75,58,85,.07);padding:1px 6px;border-radius:6px;color:var(--pink-ink);
  }

  /* ---------- 提示条 ---------- */
  .toast{
    position:fixed;left:50%;bottom:30px;transform:translate(-50%,16px);
    padding:14px 22px;border-radius:18px;max-width:calc(100vw - 40px);text-align:center;
    background:#fff;color:var(--ink);border:3px solid #fff;
    font-size:13px;font-weight:700;letter-spacing:.01em;
    box-shadow:0 6px 0 -2px rgba(75,58,85,.12),0 26px 44px -26px rgba(75,58,85,.75);
    opacity:0;pointer-events:none;transition:opacity .22s,transform .22s var(--spring);z-index:60;
  }
  .toast.show{opacity:1;transform:translate(-50%,0)}

  /* ---------- 拖入提示 ---------- */
  body.dragging .board-wrap{box-shadow:0 0 0 6px rgba(183,164,255,.55),var(--sh-card)}
  body.dragging .board-wrap::after{
    content:"松手即可导入图片";
    position:absolute;inset:0;z-index:14;border-radius:24px;
    display:grid;place-items:center;
    background:rgba(255,247,240,.92);
    border:4px dashed rgba(183,164,255,.85);
    color:var(--ink);font-size:15px;font-weight:800;letter-spacing:.03em;
    pointer-events:none;
  }

  @media (max-width:1080px){
    .layout{grid-template-columns:minmax(0,1fr);padding:22px 18px 56px}
    .side{order:2}
  }
  @media (max-width:620px){
    .topbar-inner{padding:11px 16px;gap:10px}
    .brand-sub{display:none}
    .brand-mark{width:42px;height:42px}
    .brand-title{font-size:14.5px}
    .status-chip{height:34px;padding:0 12px;font-size:12px}
    .toolbar{padding:15px;gap:15px 18px}
    .toolbar-end{width:100%;margin-left:0}
    .toolbar-end .btn{flex:1}
    .lock-chip{display:none}
    .board-wrap{padding:13px}
    .board{width:min(100%,calc(66vh * var(--c,5) / var(--r,5)))}
    .board-hint{font-size:12px}
  }

  /* ---------- 客户页页尾的平台入口（跳到官网） ---------- */
  .arbin-foot{text-align:center;padding:10px 0 6px;grid-column:1/-1}
  .arbin-foot a{
    display:inline-flex;align-items:center;gap:7px;text-decoration:none;
    background:#fff;color:var(--ink-2);border-radius:999px;padding:10px 18px;
    font-size:12.5px;font-weight:800;
    box-shadow:0 4px 14px -9px rgba(75,58,85,.6),0 2px 0 -1px rgba(75,58,85,.08);
    transition:transform .2s ease,box-shadow .2s ease,color .2s ease;
  }
  .arbin-foot a:hover{transform:scale(1.04);color:var(--ink);box-shadow:0 8px 22px -12px rgba(75,58,85,.7)}
  .arbin-foot a:active{transform:scale(.97)}
  .arbin-foot .dot{
    width:14px;height:14px;border-radius:50%;flex:none;
    background:linear-gradient(150deg,#FFB3C9,#B7A4FF);box-shadow:0 2px 6px rgba(255,137,174,.6);
  }

  @media (prefers-reduced-motion:reduce){
    *,*::before,*::after{
      transition-duration:.01ms !important;
      animation-duration:.01ms !important;
      animation-iteration-count:1 !important;
    }
    .board.is-play .cell:hover:not(.marked),
    .board.is-play .cell.marked:hover{transform:none}
  }

/* =====================================================================
   全局皮肤：顶栏孟菲斯 + 正文波普（"疏"这一档）
   —— 只改颜色 / 边框颜色 / 阴影 / 底色，不动任何宽度、高度、间距、栅格。
     这份文件是后台、五个客户页、链接失效页共用的，所以改这里就是全局生效。
     面板、按钮、标签原本就是 3px 边框（白色描边），这里只把颜色换成墨色，
     边框宽度不变，因此布局不会移动一个像素。
   ===================================================================== */

/* 底色：横向色浪 + 方格网（原来的柔光斑块收起来，位置尺寸都不变）
   注意：个别玩法页自己的 <style> 里也写了 .aurora，所以要带 body 提升优先级 */
body .aurora,body .aurora::before,body .aurora::after,body .aurora i{display:none}
body{background:transparent}
body::before{
  content:"";position:fixed;inset:0;z-index:-2;
  background:linear-gradient(100deg,#3fd0dd 0%,#46cde8 26%,#5c9ae0 62%,#7b72e6 100%);
  background-size:220% 100%;
  animation:arbin-wave 26s ease-in-out infinite alternate;
}
@keyframes arbin-wave{from{background-position:0% 50%}to{background-position:100% 50%}}
body::after{
  content:"";position:fixed;inset:0;z-index:-1;pointer-events:none;
  background-image:
    linear-gradient(rgba(255,255,255,.17) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.17) 1px, transparent 1px);
  background-size:62px 62px, 62px 62px;
}

/* 顶栏：孟菲斯（奶油底 + 墨色底线 + 黑白斜纹） */
.topbar{
  background:#fef9ef;border-bottom-color:#111;
  -webkit-backdrop-filter:none;backdrop-filter:none;box-shadow:none;
}
.topbar::after{
  background:repeating-linear-gradient(45deg,#111 0 6px,transparent 6px 14px);
  opacity:1;
}
.brand-title{color:#111}
.brand-sub{color:#3d3a36}

/* 面板：白纸 + 墨色边 + 硬投影（边框还是原来的 3px） */
.panel,.toolbar,.board-wrap{
  background:#fff;border-color:#111;
  box-shadow:4px 4px 0 #111;
}

/* 按钮：墨色边 + 硬投影，hover 换黄橙渐变，按下压平 */
.btn{
  border-color:#111;border-radius:999px;
  box-shadow:2px 2px 0 #111;
}
.btn:hover:not(:disabled){
  background:linear-gradient(180deg,#ffd76b,#ffa93f);
  transform:none;box-shadow:3px 3px 0 #111;
}
.btn:active:not(:disabled){transform:translate(3px,3px);box-shadow:none}
.btn:disabled{box-shadow:2px 2px 0 #111}
.btn-primary{
  background:linear-gradient(180deg,#ffd76b,#ff9f3c);
  border-color:#111;color:#111;
}
.btn-primary:hover:not(:disabled){background:linear-gradient(180deg,#ffe38f,#ffb055)}

/* 步骤 / 选项按钮 */
.chip{
  background:#fff;border-color:#111;color:#111;box-shadow:none;
}
.chip:hover:not(:disabled){background:#fff6df;color:#111;transform:none}
.chip:active:not(:disabled){transform:none;box-shadow:none}
.chip.is-on,.chip.is-on:hover:not(:disabled){
  color:#111;background:#feca57;box-shadow:0 4px 12px -10px rgba(0,0,0,.6);
}
.icon-btn{border-color:#111;box-shadow:2px 2px 0 #111}
.icon-btn:hover{background:#fff6df;transform:none}
.icon-btn:active{transform:translate(3px,3px);box-shadow:none}

/* 提示条：墨色边 + 硬投影（宽度沿用原来的 3px） */
.toast{border-color:#111;box-shadow:4px 4px 0 #111}

/* 页面内的确认框 / 输入框（替代会被内嵌浏览器拦掉的原生 confirm/prompt） */
.ask-mask{
  position:fixed;inset:0;z-index:9000;display:grid;place-items:center;padding:20px;
  background:rgba(23,22,26,.5);
}
.ask-card{
  width:100%;max-width:430px;background:#fff;border:3px solid #111;border-radius:20px;
  box-shadow:6px 6px 0 #111;padding:20px 20px 16px;
}
.ask-title{font-size:12.5px;font-weight:800;letter-spacing:.08em;color:var(--muted)}
.ask-text{margin-top:9px;font-size:14.5px;font-weight:700;line-height:1.7;color:var(--ink)}
.ask-input{
  width:100%;height:46px;margin-top:14px;padding:0 14px;border-radius:14px;
  border:3px solid #111;background:#fff;color:var(--ink);
  font-family:inherit;font-size:16px;font-weight:800;letter-spacing:.18em;
}
.ask-input:focus{outline:3px solid var(--pink);outline-offset:2px}
.ask-error{margin-top:8px;font-size:12.5px;font-weight:800;color:#b62f5f}
.ask-row{display:flex;gap:10px;justify-content:flex-end;margin-top:18px;flex-wrap:wrap}
.ask-row .btn{min-width:92px}

/* 棋盘格子：只把柔影换成硬影、圆角收一点，尺寸位置都不动 */
/* 客户页的「本单规则」：俱乐部在 DIY 里写的规则说明，开单时快照进这间房；
   后台那个开关关掉就整块不显示 */
.deal-rules{
  background:#fff;border-radius:20px;padding:14px 16px;border:3px solid #fff;
  box-shadow:var(--sh-card);margin-bottom:14px;
}
.deal-rules-title{
  font-size:11.5px;font-weight:800;letter-spacing:.14em;color:var(--muted);
  text-transform:uppercase;margin-bottom:8px;
}
.deal-rules-text{
  margin:0;font-size:13px;font-weight:700;line-height:1.75;color:var(--ink-2);
  white-space:pre-wrap;word-break:break-word;
}

.cell{
  border-radius:16px;
  box-shadow:3px 3px 0 rgba(17,17,17,.9);
}
.cell.marked{box-shadow:0 0 0 3px var(--pink),4px 4px 0 rgba(17,17,17,.9)}
.cell.win{box-shadow:0 0 0 4px var(--butter),0 0 0 9px rgba(255,206,107,.34),4px 4px 0 rgba(17,17,17,.9)}
.board.is-play .cell:hover:not(.marked){box-shadow:0 0 0 3px rgba(183,164,255,.9),3px 3px 0 rgba(17,17,17,.9)}

/* 文字：整体压成墨色系，小字压深一点（浅底上更清楚） */
/* 顺手把几个"浅底 + 同色深字"的对比度拉到 AA：字色各压深约 10%，
   色相不变，胶囊还是原来那身，只是小字看得更清楚 */
:root{
  --ink:#111111;--ink-2:#555555;--muted:#5c5c5c;
  --pink-ink:#b62f5f;--taro-ink:#6a50d8;--mint-ink:#17795e;
}

/* 直接压在色浪上的说明文字（不在白面板里的那些小字）：
   波普底色是彩色的，中灰字压上去会糊，所以统一压成墨色 + 一层白描边 */
.layout .cnt,.layout .ff-hint,.layout .hint,.layout .board-hint,.layout .gt-tierhint,
.layout .ff-count,.layout .bh-hint,.layout small{
  color:#0b1220;
  text-shadow:0 1px 0 rgba(255,255,255,.8);
}

/* 五个玩法页各自的白面板 / 卡片 / 按钮：边框换墨色、柔影换硬影。
   这些类名写在各页自己的 <style> 里，所以前缀 body 提升优先级才压得住；
   边框宽度沿用原本的 3px，尺寸和位置都不动。 */
body .gt-arena,body .gt-panel,body .gt-pick,body .gt-log,body .gt-rules,
body .bt-card,body .bt-cell,
body .bh-card,body .bh-bar,body .bh-map-wrap,body .bh-select,
body .ff-side,body .ff-board-panel,body .ff-confirm,body .ff-piece,
body .ended-card{
  border-color:#111111;
  box-shadow:3px 3px 0 #111111;
}
/* 地图上的复活点保持原样（黑洞那圈粉色漩涡就是靠它自己的柔光+旋转做出来的，
   套硬阴影会把漩涡糊掉），所以这里显式不动它 */
body .bh-spot{border-color:#fff;box-shadow:0 3px 10px rgba(0,0,0,.5)}
body .bh-spot.picked,body .bh-spot.blackhole{border-color:rgba(255,255,255,.9)}
/* 这些页里的小字提示同样压成墨色，白底/浅底上都够清楚 */
body .gt-tierhint,body .gt-empty,body .bt-missing,body .bt-foot,
body .bh-row,body .ff-hint,body .cnt{color:#0b1220}
/* 小小巨人那个主按钮原来没有边框，补一圈墨边 + 硬影（高度写死了，加了边框尺寸不变） */
body .gt-confirm{border:3px solid #111111;box-shadow:3px 3px 0 #111111}

@media (prefers-reduced-motion:reduce){
  body::before{animation:none}
}
@media (max-width:620px){
  body::after{background-size:46px 46px, 46px 46px}
}

/* ---------- 结算小票：客服后台与客户页共用（渲染和导出在 /receipt.js） ---------- */
.receipt-mask{
  position:fixed;inset:0;z-index:120;display:flex;justify-content:center;align-items:flex-start;
  overflow:auto;padding:4vh 16px 20px;
  background:rgba(44,44,44,.42);
}
.receipt{
  position:relative;width:min(560px,100%);flex:none;
  background-color:#f5f0e8;
  background-image:
    radial-gradient(rgba(44,44,44,.055) 1px,transparent 1.2px),
    radial-gradient(rgba(44,44,44,.035) 1px,transparent 1.2px);
  background-size:13px 13px,21px 21px;
  background-position:0 0,6px 9px;
  padding:26px 24px 30px;color:#2c2c2c;
  border-radius:4px;box-shadow:3px 3px 0 rgba(44,44,44,.3);
  font-family:"KaiTi","STKaiti","Kaiti SC","楷体","Microsoft YaHei",sans-serif;
}
.receipt::before{
  content:"";position:absolute;inset:5px;border:2px solid #2c2c2c;border-radius:3px;
  filter:url(#sketchy);pointer-events:none;
}
.receipt-head{text-align:center;margin-bottom:6px}
.receipt-title{font-size:26px;font-weight:600;letter-spacing:.34em;margin:6px 0 4px;color:#2c2c2c}
.receipt-sub{font-size:12px;color:#8a8a8a;font-family:ui-monospace,Consolas,monospace;letter-spacing:.02em}
.receipt-dash{border-top:2px dashed #a0a0a0;margin:14px 0}
.receipt-row{display:flex;justify-content:space-between;gap:14px;font-size:14px;padding:3px 2px}
.receipt-row .k{color:#5a5a5a;flex:none}
.receipt-row .v{font-weight:600;text-align:right;word-break:break-all}
/* 缩进子行：跟在上一条记录下面，比如某一局的黑洞选点 */
.receipt-row.is-sub{padding:1px 2px 3px 14px}
.receipt-row.is-sub .k{color:#8a8a8a}
.receipt-row.is-sub .k::before{content:"↳ "}
.receipt-row.is-sub .v{font-weight:500;color:#5a5a5a}
/* 弹窗里的"本次要提交什么"明细（黑洞锁定前列出选中的复活点） */
.ask-picked{
  margin-top:12px;padding:10px 13px;border:2px dashed rgba(75,58,85,.35);border-radius:14px;
  background:rgba(255,206,107,.16);font-size:13px;font-weight:700;color:var(--ink-2);line-height:1.6;
}
.ask-picked b{display:block;margin-top:3px;font-size:14px;font-weight:800;color:var(--ink);word-break:break-all}
/* 操作流水顶部那行"这单有几台设备在操作" + 每行末尾的设备编号 */
.dev-line{margin:-8px 0 12px;font-size:12px;font-weight:700;color:var(--ink-2);line-height:1.7}
.dev-line b{color:var(--ink)}
.ev-ip{font-style:normal;margin-left:6px;color:var(--muted);font-weight:750;font-size:11px;white-space:nowrap}
.receipt-sec{font-size:12.5px;color:#8a8a8a;letter-spacing:.16em;margin:4px 0 6px;text-align:center}
.receipt-total{
  margin-top:14px;padding:10px 12px;border:2px solid #2c2c2c;border-radius:4px;
  display:flex;justify-content:space-between;font-size:16px;font-weight:600;
  background-image:
    repeating-linear-gradient(45deg,rgba(44,44,44,.15) 0 1px,transparent 1px 5px),
    repeating-linear-gradient(-45deg,rgba(44,44,44,.09) 0 1px,transparent 1px 6px);
}
.receipt-foot{display:flex;justify-content:space-between;align-items:flex-end;margin-top:18px;font-size:12.5px;color:#8a8a8a}
.receipt-actions{display:flex;gap:10px;justify-content:center;margin-top:18px}
.receipt-btn{
  border:2px solid #2c2c2c;border-radius:4px;background:transparent;color:#2c2c2c;
  padding:7px 15px;font-size:13px;font-weight:600;cursor:pointer;font-family:inherit;
  box-shadow:1px 1px 0 rgba(44,44,44,.3);transition:opacity .2s ease,box-shadow .2s ease;
}
.receipt-btn:hover{box-shadow:2px 2px 0 rgba(44,44,44,.5);opacity:.9}
.receipt-btn:active{opacity:.8}
.receipt-btn:focus-visible{outline:none;box-shadow:2px 2px 0 rgba(44,44,44,.4)}
.receipt-btn.primary{background:#2c2c2c;color:#f5f0e8}
.receipt-btn.dashed{border-style:dashed}
.doodle{display:block;stroke:#2c2c2c;stroke-width:2;fill:none;stroke-linecap:round;stroke-linejoin:round}
/* 客户页达成后出现的「领小票」入口 */
.receipt-entry{
  display:flex;align-items:center;justify-content:center;gap:8px;width:100%;
  margin-bottom:14px;padding:12px 16px;border:0;border-radius:18px;cursor:pointer;
  font-family:inherit;font-size:14px;font-weight:800;color:#fff;
  background:linear-gradient(152deg,#FFAEC7 0%,#FF95B6 52%,#F4749F 100%);
  box-shadow:0 10px 22px -12px rgba(244,116,159,.9);
  transition:filter .18s,transform .18s;
}
.receipt-entry:hover{filter:brightness(1.04);transform:translateY(-1px)}
.receipt-entry:active{transform:translateY(1px)}

/* 图片补了几次还是没加载出来时打上的标记（retry.js 用的），点一下会再试一轮 */
img.img-failed{
  outline:2px dashed #E8557F;
  outline-offset:-2px;
  background:#FFF0F5;
  cursor:pointer;
}
/* 自定义小票沿用现有弹层，纸张和下载由同一份 SVG 排版。 */
.receipt.receipt-designed{background:transparent;padding:0;border:0;box-shadow:none;filter:none;max-width:min(440px,calc(100vw - 32px));overflow:visible;transform:none}
.receipt.receipt-designed::before,.receipt.receipt-designed::after{display:none}
.receipt-designed>svg{display:block;width:100%;height:auto;filter:drop-shadow(0 12px 24px #0002)}
.receipt-designed .receipt-actions{background:#fff;padding:15px;border-radius:12px;margin-top:16px}
.receipt-export-error{background:#fff;color:#9b2949;font-size:12px;text-align:center}

/* The printer and torn-paper effects are presentation only, outside the exported receipt. */
#bnReceiptMask.receipt-print-mask{display:block;isolation:isolate;overflow:auto;overscroll-behavior:contain;padding:0 24px 138px;background:radial-gradient(ellipse at 28% 15%,#ffe3ee8c,transparent 65%),radial-gradient(ellipse at 90% 75%,#d9cce66b,transparent 60%),#f5eff4e8;backdrop-filter:none;color:#493643;font-family:"Microsoft YaHei",system-ui,sans-serif;scrollbar-gutter:stable}
#bnReceiptMask[hidden]{display:none}
.rp-stage{--rp-paper-color:#fff9fc;position:relative;width:min(400px,calc(100vw - 72px));margin: max(64px,8vh) auto 0;perspective:1200px;padding-bottom:32px}
.rp-printer{position:relative;z-index:4;height:94px;width:calc(100% + 30px);margin-left:-15px;border:1px solid #665864;border-radius:18px 18px 10px 10px;background:linear-gradient(165deg,#72636f 0%,#493c48 13%,#2c252f 72%,#382c38 100%);box-shadow:inset 0 1px 0 #b4a1b2,inset 0 -3px 0 #1d1622,0 9px 18px -8px #35213270,0 2px 3px #160c2640}
.rp-machine-face{position:absolute;inset:9px 12px 19px;padding:10px 15px;border-radius:9px;border:1px solid #75657266;background:linear-gradient(140deg,#3e3440,#241f29);box-shadow:inset 0 1px 2px #110a1477;color:#f9e9f2}
.rp-machine-mark{display:block;font:8px/1.2 ui-monospace,Consolas,monospace;letter-spacing:.16em;color:#b9a7ba}
.rp-machine-face strong{display:block;font-size:14px;line-height:1.6;letter-spacing:.16em;font-weight:600;margin-top:3px}
.rp-machine-caption{position:absolute;right:15px;bottom:13px;font-size:9px;letter-spacing:.06em;color:#c8b2c5}
.rp-power{position:absolute;right:15px;top:11px;width:5px;height:5px;border-radius:50%;background:#addfc7;box-shadow:0 0 5px #a6f6cb4d}
.rp-slot{position:absolute;z-index:6;left:11px;right:11px;bottom:4px;height:9px;border-radius:5px;background:linear-gradient(#0d0812,#16101c 55%,#564451);box-shadow:0 -1px 0 #1a111d,0 1px 0 #a58c9a73}
.rp-slot::after{content:"";position:absolute;left:10px;right:10px;top:3px;height:1px;background:#c496b132;box-shadow:0 2px 3px #000}
.rp-stub{position:absolute;left:15px;right:15px;bottom:-4px;height:8px;background:var(--rp-paper-color);clip-path:polygon(0 0,100% 0,100% 50%,98% 80%,96% 50%,94% 90%,92% 65%,90% 95%,88% 55%,86% 85%,84% 50%,82% 80%,80% 50%,78% 90%,76% 65%,74% 95%,72% 55%,70% 85%,68% 50%,66% 80%,64% 50%,62% 90%,60% 65%,58% 95%,56% 55%,54% 85%,52% 50%,50% 80%,48% 50%,46% 90%,44% 65%,42% 95%,40% 55%,38% 85%,36% 50%,34% 80%,32% 50%,30% 90%,28% 65%,26% 95%,24% 55%,22% 85%,20% 50%,18% 80%,16% 50%,14% 90%,12% 65%,10% 95%,8% 55%,6% 85%,4% 50%,2% 80%,0 55%);opacity:0;pointer-events:none}
.rp-torn .rp-stub{opacity:1}
.rp-paper-window{position:relative;z-index:2;margin-top:-4px;overflow:hidden;visibility:hidden;padding:0 6px 42px;margin-left:-6px;margin-right:-6px}
.rp-feed{transform:translateY(-100%)}
.rp-paper{position:relative;transform-origin:90% 0;padding-top:8px;cursor:grab;touch-action:none;filter:drop-shadow(0 10px 16px #4d273726);outline:none}
.rp-paper::before{content:"";position:absolute;left:0;right:0;top:0;height:10px;background:var(--rp-paper-color);border-bottom:1px solid #7c596021;clip-path:polygon(0 0,100% 0,100% 100%,0 100%)}
.rp-torn .rp-paper::before{clip-path:var(--rp-ragged)}
.rp-paper:focus-visible{outline:2px solid #bc4b80;outline-offset:5px;border-radius:4px}
.rp-paper.is-pulling{cursor:grabbing;user-select:none}
.rp-paper-curl{position:absolute;z-index:2;top:0;right:-1px;width:72px;height:32px;opacity:var(--rp-curl,0);background:linear-gradient(138deg,transparent 49%,#bfa7b141 50%,#fffaf9 59%,#e9dbe3 80%,transparent 81%);transform:skewY(-9deg);transform-origin:right top;pointer-events:none}
.rp-paper.is-pulling::after{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(100deg,#9b718b0d,transparent 32%,transparent 70%,#7b4f6c1f);opacity:var(--rp-tension,0)}
#bnReceiptMask.receipt-print-mask .receipt{width:100%;max-width:none;margin:0;flex:none;box-sizing:border-box;transform:none}
#bnReceiptMask.receipt-print-mask .receipt-designed>svg{filter:none}
#bnReceiptMask.receipt-print-mask .receipt::before{filter:none}
#bnReceiptMask[data-print-state="detached"] .rp-paper{touch-action:pan-y;cursor:auto}
.rp-top-tools{position:fixed;z-index:8;top:16px;right:20px;display:flex;gap:8px}
.rp-top-tools button{border:1px solid #b98da32e;background:#fff9fcdb;box-shadow:0 3px 12px #44293708;color:#725369;border-radius:10px;height:34px;min-width:36px;padding:0 11px;font:500 11px/1 "Microsoft YaHei",system-ui,sans-serif;cursor:pointer}
.rp-top-tools [data-receipt="close"]{font-size:23px;padding:0 9px}
.rp-bottom{position:fixed;z-index:7;bottom:0;left:0;right:0;padding:26px 20px max(20px,env(safe-area-inset-bottom));background:linear-gradient(transparent,#faf4f9f2 28%);text-align:center;pointer-events:none}
.rp-status{font-size:12px;font-weight:500;color:#76516b;margin:0 0 11px;letter-spacing:.025em}
#bnReceiptMask .rp-actions{margin:0;gap:8px;pointer-events:auto}
#bnReceiptMask .rp-actions .receipt-btn{border:1px solid #b76c932e;background:#fff9fc;color:#79546c;box-shadow:0 2px 5px #805e7610;border-radius:9px;min-height:38px;padding:8px 16px;font:500 12px/1.5 "Microsoft YaHei",system-ui,sans-serif;letter-spacing:0;transition:none}
#bnReceiptMask .rp-actions .receipt-btn.primary{background:#bb537f;color:#fff;border-color:#bb537f;box-shadow:0 4px 13px #bb537f26}
#bnReceiptMask .rp-actions .receipt-btn:disabled{opacity:.45;cursor:wait}
#bnReceiptMask .rp-actions .receipt-btn:hover:not(:disabled){background:#f3dce7;color:#693950;transform:none}
#bnReceiptMask .rp-actions .receipt-btn.primary:hover:not(:disabled){background:#a84570;color:#fff}
#bnReceiptMask .rp-actions .receipt-btn:focus-visible,.rp-top-tools button:focus-visible{outline:2px solid #bd5681;outline-offset:3px}
#bnReceiptMask .rp-bottom .receipt-export-error{background:transparent;max-width:440px;margin:8px auto 0;font-size:12px;color:#a92f5b;pointer-events:auto}
#bnReceiptMask .rp-bottom .receipt-export-error:empty{display:none}
:root[data-theme="dark"] #bnReceiptMask.receipt-print-mask{background:radial-gradient(ellipse at 30% 15%,#78548638,transparent 70%),#18121feF;color:#f7eaf4}
:root[data-theme="dark"] .rp-top-tools button{background:#312638eF;border-color:#aa84a33b;color:#ead5e4}
:root[data-theme="dark"] .rp-bottom{background:linear-gradient(transparent,#1d1526f5 28%)}
:root[data-theme="dark"] .rp-status{color:#dcb3cf}
:root[data-theme="dark"] #bnReceiptMask .rp-actions .receipt-btn{background:#332639;border-color:#b887a145;color:#efdaea}
:root[data-theme="dark"] #bnReceiptMask .rp-actions .receipt-btn.primary{background:#dd93b6;border-color:#dd93b6;color:#301e2a}
:root[data-theme="dark"] #bnReceiptMask .rp-bottom .receipt-export-error{color:#ffafc9}
@media(max-width:600px){#bnReceiptMask.receipt-print-mask{padding-left:20px;padding-right:20px;scrollbar-gutter:auto}.rp-stage{margin-top:70px;width:calc(100vw - 62px)}.rp-printer{height:86px}.rp-machine-caption{font-size:8px;right:10px}.rp-top-tools{top:12px;right:14px}.rp-bottom{padding-left:12px;padding-right:12px}.rp-status{font-size:11px}#bnReceiptMask .rp-actions .receipt-btn{padding:8px 12px;font-size:11px}.rp-paper{filter:drop-shadow(0 7px 9px #4d273720)}}
@media(prefers-reduced-motion:reduce){.rp-paper{perspective:none}.rp-paper.is-pulling::after,.rp-paper-curl{display:none}}