/* =========================================================
     奶油糖果玩具盒 · 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-mark{
    width:48px;height:48px;border-radius:17px;flex:none;position:relative;
    display:grid;place-items:center;border:3px solid #fff;
    background:linear-gradient(158deg,#FFB6CC 0%,var(--pink) 52%,#F06A93 100%);
    box-shadow:
      inset 0 -5px 0 rgba(75,58,85,.16),
      inset 0 3px 0 rgba(255,255,255,.6),
      0 10px 18px -10px rgba(232,85,127,.85);
    transform:rotate(-4deg);
  }
  .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;border-radius:15px}
    .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}
  }

  @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}
  }