/* xiaoxiaole.css — XiaoXiao乐 这一页的布局与组件。依赖 arcade.css 的配色/字体 token。 */
  .app{position:relative;min-height:100%;padding:14px;padding-block:16px;display:flex;flex-direction:column;align-items:center;gap:12px}
  .toggles{display:flex;gap:8px;justify-content:center;flex-wrap:wrap;margin-top:9px}
  .pill{
    font-family:var(--font);font-size:13px;background:var(--paper-field);border:2px solid var(--ink);
    border-radius:999px;padding:4px 14px;color:var(--ink);cursor:pointer;box-shadow:var(--shadow);text-decoration:none;
  }
  .pill:active{transform:translate(1px,2px);box-shadow:0 0 0}

  header.top{text-align:center}
  .title{
    margin:0;font-family:var(--font-cn);font-weight:700;letter-spacing:.06em;
    font-size:clamp(28px,7vw,44px);line-height:1.05;color:var(--ink);
    display:inline-flex;align-items:center;gap:12px;
  }
  .title .heart{width:clamp(20px,5vw,28px);height:auto;transform:rotate(-8deg)}
  .subtitle{margin:5px 0 0;color:var(--muted);font-size:16px}

  .hud{
    display:flex;gap:16px;flex-wrap:wrap;justify-content:center;
    background:var(--paper-field);border:2px solid var(--ink);border-radius:12px;
    padding:7px 16px;box-shadow:var(--shadow);
  }
  .hud-cell{display:flex;align-items:baseline;gap:6px}
  .hud-cell span{color:var(--muted);font-size:14px}
  .hud-cell b{font-size:23px;font-weight:400;font-variant-numeric:tabular-nums}
  .hud-cell b.you{color:var(--you)}

  .main{display:flex;gap:14px;align-items:stretch;justify-content:center;max-width:100%}
  .spacer{display:none}
  .boardwrap{position:relative;flex:0 0 auto}
  #board{display:block;touch-action:none;background:transparent}
  .rail{display:flex;flex-direction:column;gap:12px}
  .box{background:var(--paper-field);border:2px solid var(--ink);border-radius:12px;padding:8px 10px;box-shadow:var(--shadow)}
  .box h2{margin:0 0 6px;font-size:14px;color:var(--muted);font-weight:600;text-align:center}
  .box canvas{display:block;margin:0 auto;width:100%;height:auto;max-width:96px}

  .msg{
    position:absolute;left:50%;top:32%;transform:translate(-50%,-50%);
    font-family:var(--font-cn);font-weight:700;text-align:center;pointer-events:none;opacity:0;white-space:nowrap;
    text-shadow:0 1px 0 rgba(255,255,255,.7);
  }
  .msg.show{animation:pop 1.2s cubic-bezier(.2,.7,.2,1) forwards}
  @keyframes pop{
    0%{opacity:0;transform:translate(-50%,-46%) rotate(-3deg) scale(.7)}
    18%{opacity:1;transform:translate(-50%,-54%) rotate(-2deg) scale(1.08)}
    70%{opacity:1;transform:translate(-50%,-60%) rotate(-2deg) scale(1)}
    100%{opacity:0;transform:translate(-50%,-76%) rotate(-2deg) scale(1)}
  }
  .overlay{
    position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;
    gap:14px;text-align:center;padding:20px;
    background:rgba(251,247,234,.9);border:2px dashed var(--hair);border-radius:14px;
  }
  .overlay h3{margin:0;font-family:var(--font-cn);font-weight:700;letter-spacing:.04em;font-size:clamp(26px,6vw,36px);color:var(--ink);line-height:1.1}
  .overlay p{margin:0;color:var(--muted);font-size:16px;max-width:260px;line-height:1.6}
  .btn{
    font-family:var(--font);font-size:19px;cursor:pointer;color:var(--paper-field);
    background:var(--you);border:2px solid var(--ink);padding:9px 26px;border-radius:12px;
    box-shadow:2px 3px 0 rgba(45,51,70,.28);transition:transform .07s ease;
  }
  .btn:hover{filter:brightness(1.04)}
  .btn:active{transform:translate(2px,3px);box-shadow:0 0 0 rgba(0,0,0,0)}
  .btn:focus-visible{outline:2px solid var(--wife);outline-offset:3px}

  .deck{display:flex;gap:10px;justify-content:center;align-items:stretch;width:100%;max-width:380px}
  .deck.lefty{flex-direction:row-reverse}
  .controls{display:flex;gap:10px;flex:1}
  .cbtn{
    font-family:var(--font);font-size:17px;padding:10px 18px;border-radius:12px;color:var(--ink);
    background:var(--paper-field);border:2px solid var(--ink);cursor:pointer;box-shadow:var(--shadow);
    flex:1;min-width:0;user-select:none;-webkit-user-select:none;touch-action:manipulation;
  }
  .cbtn:active{transform:translate(2px,3px);box-shadow:0 0 0}
  .cbtn[data-act="hold"]{background:#e4eefb}
  .cbtn[data-act="undo"]{background:#fbecd7}
  .cbtn[data-act="pause"]{background:#efe8fb}
  .rightpad{display:none}
  .dropbar{background:var(--accent);color:var(--paper-field);flex:0 0 auto}
  .swipepad{display:none}

  .swipehint{display:none;color:var(--muted);font-size:13px;text-align:center;max-width:430px;line-height:1.6}
  .help{color:var(--faint);font-size:14px;text-align:center;max-width:480px;line-height:1.7}
  .help kbd{font-family:var(--font);font-size:13px;background:var(--paper-field);border:1.5px solid var(--hair);border-radius:6px;padding:0 7px;color:var(--muted)}

  /* ---- desktop ---- */
  @media (min-width:641px){
    #board{height:min(68vh,600px);width:auto;max-width:100%}
    .main{max-width:700px}
    .rail{width:118px;justify-content:flex-start}
    .swipehint{display:none}
  }

  /* ---- phone: fit one screen, swipe to play ---- */
  @media (max-width:640px){
    body{background-attachment:scroll}
    .app{height:100%;max-height:100%;overflow:hidden;padding:8px;padding-block:8px;gap:7px;touch-action:none}
    .spacer{display:block;flex:0 0 auto;width:clamp(46px,15vw,62px)}
    .title{font-size:23px;gap:8px}
    .title .heart{width:18px}
    .subtitle{display:none}
    .hud{padding:5px 10px;gap:14px;width:100%}
    .hud-cell span{font-size:12px}.hud-cell b{font-size:18px}
    .hud-cell.opt{display:none}
    .main{flex:1;min-height:0;width:100%;gap:8px;align-items:center;justify-content:center}
    #board{width:min(62vw,(100vh - 390px)/2);height:auto;max-width:100%}
    #board{width:min(62vw,(100svh - 362px)/2)}
    .rail{width:clamp(46px,15vw,62px);justify-content:center}
    .box{padding:5px 4px}
    .box h2{font-size:10.5px;margin:0 0 3px}
    .box canvas{max-width:100%}
    .deck{max-width:none;height:188px;gap:8px;align-items:stretch}
    .controls{flex-direction:column;gap:10px;flex:0 0 auto;width:90px}
    .cbtn{font-size:16px;padding:0;min-width:0}
    .rightpad{display:flex;flex:1;flex-direction:column;gap:8px;min-width:0}
    .swipepad{display:flex;flex:1;align-items:center;justify-content:center;text-align:center;
      border:2px dashed var(--hair);border-radius:12px;color:var(--muted);font-size:12.5px;line-height:1.6;
      background:rgba(255,255,255,.4);touch-action:none;padding:8px}
    .dropbar{padding:13px 0;font-size:18px;letter-spacing:.1em}
    .help{display:none}
  }
  /* ---- 横屏:棋盘天生是竖的,横屏提示转回竖屏 ---- */
  .rotate{display:none}
  .rotate .rt{font-family:var(--font-cn);font-weight:700;font-size:clamp(22px,6vw,28px);color:var(--ink)}
  .rotate .rs{color:var(--muted);font-size:16px;max-width:260px;line-height:1.5}
  @media (orientation:landscape) and (max-height:600px) and (pointer:coarse){
    .app{display:none}
    .rotate{display:flex;position:fixed;inset:0;flex-direction:column;align-items:center;justify-content:center;gap:14px;text-align:center;padding:24px;background:var(--paper)}
  }
  @media (prefers-reduced-motion:reduce){.msg.show{animation-duration:.6s}}