* { margin: 0; padding: 0; box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
  html { height: 100%; }
  body {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    background: linear-gradient(160deg, #1b2233 0%, #2d2438 100%);
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    justify-content: safe center;
    min-height: 100vh; min-height: 100svh; padding: 10px 8px 4px;
    user-select: none; touch-action: manipulation;
  }
  .panel {
    position: relative;
    --cs: 40px;            /* 格子边长，由 JS 的 fit() 覆写 */
    --gap: 2px;
    background: rgba(255,255,255,.05);
    border: 1px solid rgba(255,255,255,.10);
    border-radius: 18px; padding: 10px;
    box-shadow: 0 20px 60px rgba(0,0,0,.45);
    display: flex; flex-direction: column; align-items: center; gap: 8px;
  }
  .side { display: flex; flex-direction: column; align-items: center; gap: 7px; width: 100%; }
  .boardcol { display: flex; align-items: center; justify-content: center; }
  .padcol { display: flex; align-items: center; justify-content: center; }

  .topbar { display: flex; align-items: center; gap: 6px; width: 100%; }
  .stat {
    flex: 1; background: rgba(255,255,255,.07); border-radius: 10px;
    padding: 3px 6px; text-align: center; color: #fff; min-width: 0;
  }
  .stat small { display: block; font-size: 9px; font-weight: 700; letter-spacing: 1px; opacity: .55; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .stat span { font-size: 15px; font-weight: 800; letter-spacing: .5px; }
  #mute-btn {
    flex: 0 0 auto; width: 44px; height: 44px; border-radius: 10px; padding: 0;
    background: rgba(255,255,255,.07); border: none; color: #fff;
    font-size: 17px; cursor: pointer; font-family: inherit;
  }

  .levelrow { display: flex; align-items: center; gap: 6px; width: 100%; }
  .levelrow button {
    flex: 0 0 auto; width: 44px; height: 44px; border-radius: 11px; border: none;
    background: rgba(255,255,255,.12); color: #fff; font-size: 15px; font-family: inherit;
    cursor: pointer; transition: background .15s;
  }
  .levelrow button:hover { background: rgba(255,255,255,.2); }
  .levelrow button.hot { background: #f0a500; color: #2a1d00; animation: pulse 1s ease-in-out infinite; }
  .status {
    flex: 1; min-width: 0; min-height: 22px; font-size: 13px; font-weight: 800;
    letter-spacing: .5px; color: #ffd76e; text-align: center; line-height: 1.3;
  }
  #hint {
    width: 100%; margin-top: -3px; font-size: 12px; font-weight: 700;
    color: #ff9f8a; text-align: center; line-height: 1.4;
  }
  /* 没有提示时整块塌掉，别白占纵向（手机横屏最缺的就是纵向） */
  #hint:empty { display: none; }

  .board {
    display: grid;
    gap: var(--gap);
    padding: calc(var(--gap) * 1.5);
    background: #2b3345;
    border-radius: 12px;
    box-shadow: inset 0 3px 12px rgba(0,0,0,.45);
    touch-action: none;                      /* 滑动自己处理，别让浏览器抢去做滚动 */
  }
  .scell { position: relative; border-radius: 3px; background: #39435a; }
  .scell.wall { background: #1d2432; box-shadow: inset 0 0 0 1px rgba(255,255,255,.045); }
  /* 目标点：没箱子时也看得见的小菱形 */
  .scell.goal::after {
    content: ''; position: absolute; inset: 30%; border-radius: 3px;
    background: #f0a500; opacity: .55; transform: rotate(45deg) scale(.62);
  }
  .scell.walk { cursor: pointer; }
  /* 箱子：<span> 必须 display:block，否则行内元素忽略百分比尺寸 → 塌成 0×0（SPECS 14） */
  .crate {
    display: block; position: absolute; inset: 8%; border-radius: 4px;
    background: linear-gradient(150deg, #d8a86a, #a4703a 70%, #7d5024);
    box-shadow: inset 0 0 0 2px rgba(0,0,0,.22), 0 2px 3px rgba(0,0,0,.35);
    transition: left .08s ease, top .08s ease;
  }
  .crate::after {
    content: ''; position: absolute; inset: 18%; border-radius: 2px;
    border: 2px solid rgba(0,0,0,.18);
  }
  .crate.on { background: linear-gradient(150deg, #8fe08a, #35a55e 70%, #1f7a41); }
  .crate.pop { animation: pop .18s ease; }
  @keyframes pop { 0%,100% { transform: scale(1) } 45% { transform: scale(1.16) } }
  .hero {
    display: block; position: absolute; inset: 12%; border-radius: 50%;
    background: radial-gradient(circle at 34% 30%, #9fd4ff, #3b82f6 62%, #1d4ed8);
    box-shadow: inset 0 0 0 2px rgba(0,0,0,.2), 0 2px 4px rgba(0,0,0,.35);
  }
  .hero::after {
    content: ''; position: absolute; left: 50%; top: 50%; width: 34%; height: 34%;
    margin: -17% 0 0 -17%; border-radius: 50%;
    background: rgba(255,255,255,.75);
  }

  .actions { display: flex; gap: 8px; width: 100%; }
  .actions button {
    flex: 1; min-height: 44px; border-radius: 12px; border: none; cursor: pointer;
    font-size: 14px; font-weight: 800; letter-spacing: 1px; font-family: inherit;
    transition: transform .12s ease;
  }
  .actions button:active { transform: scale(.96); }
  .actions button:disabled { opacity: .4; cursor: default; }
  .btn-primary { background: #4a90ff; color: #fff; box-shadow: 0 4px 0 #2a63bd; }
  .btn-ghost { background: rgba(255,255,255,.14); color: #fff; box-shadow: 0 4px 0 rgba(0,0,0,.25); }

  /* 屏幕方向键：单击走一格，按住连续走（照抄 cross-road 的做法） */
  .dpad {
    display: grid; grid-template-columns: repeat(3, 50px); grid-template-rows: repeat(2, 50px);
    gap: 8px;
  }
  .dpad button {
    min-height: 50px; border-radius: 12px; font-size: 20px; font-weight: 800; font-family: inherit;
    background: rgba(255,255,255,.13); color: #fff; box-shadow: 0 3px 0 rgba(0,0,0,.28);
    border: none; padding: 0; cursor: pointer;
  }
  .dpad button:active { background: rgba(255,255,255,.28); }
  .dpad [data-dir="up"] { grid-column: 2; grid-row: 1; }
  .dpad [data-dir="left"] { grid-column: 1; grid-row: 2; }
  .dpad [data-dir="down"] { grid-column: 2; grid-row: 2; }
  .dpad [data-dir="right"] { grid-column: 3; grid-row: 2; }

  .overlay {
    position: absolute; inset: 0; border-radius: 18px; z-index: 6;
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    gap: 7px; text-align: center; padding: 18px;
    background: rgba(14, 16, 26, .88); backdrop-filter: blur(3px); color: #fff;
  }
  .hidden { display: none !important; }
  .over-title { font-size: 22px; font-weight: 800; letter-spacing: 2px; }
  .over-sub { font-size: 13px; opacity: .8; line-height: 1.6; }
  .icon-big { font-size: 40px; }
  .final-line { font-size: 15px; font-weight: 700; }
  .new-record {
    background: #ffd76e; color: #5a3e00; font-size: 12px; font-weight: 800;
    padding: 4px 14px; border-radius: 999px; animation: pulse 1s ease-in-out infinite;
  }
  @keyframes pulse { 0%,100% { transform: scale(1) } 50% { transform: scale(1.08) } }
  .over-btns { display: flex; gap: 8px; margin-top: 6px; width: 100%; }
  .over-btns button {
    flex: 1; min-height: 44px; border-radius: 12px; border: none; cursor: pointer;
    font-size: 14px; font-weight: 800; font-family: inherit;
  }
  .start-btn { margin-top: 6px; padding: 12px 28px; }

  .footer {
    margin-top: 10px; color: rgba(255,255,255,.5); font-size: 12px;
    text-align: center; line-height: 1.9; max-width: 470px;
  }
  .footer a {
    color: rgba(255,255,255,.78); text-decoration: none; display: inline-block;
    min-width: 44px; min-height: 44px; line-height: 44px;
  }
  .footer a:hover { color: #ffd76e; }

  /* 横屏 / 矮窗口（视口高 ≤700px）：改成左右分栏 —— 棋盘靠左，HUD/方向键靠右。
     竖排时纵向只剩 ~200px（格子被压到 20px 点不准），横排后棋盘高度可用 ~330px。
     挖掉的都是「不是触控目标」的纵向浪费，触控目标一律保持 ≥44px。 */
  @media (orientation: landscape) and (max-height: 700px) {
    body { padding: 2px 6px 2px; }
    .panel { flex-direction: row; align-items: center; padding: 6px; gap: 8px; }
    .boardcol { order: -1; }
    .side { width: 200px; flex: 0 0 auto; gap: 5px; }
    /* 侧栏只有 200px，三个 HUD 标签（CRATES 最长）必须缩字距才不被省略号吃掉 */
    .stat { padding: 3px 4px; }
    .stat small { font-size: 8px; letter-spacing: .4px; }
    .padcol { flex: 0 0 auto; }
    .dpad { grid-template-columns: repeat(3, 46px); grid-template-rows: repeat(2, 46px); gap: 6px; }
    .footer { max-width: none; margin-top: 4px; line-height: 1.4; font-size: 11px; }
    /* 横向明明有余量、纵向只剩几十像素时，把站点工具行与页脚文字并到同一行 ——
       省下的是「不是触控目标」的折行高度，三键仍各自 44×44 */
    .footer .wg-tools { display: inline-flex; vertical-align: middle; margin-right: 8px; }
    .status { min-height: 18px; font-size: 12px; }
    .overlay { padding: 10px; gap: 5px; }
    .over-title { font-size: 18px; }
    .over-sub, .final-line { font-size: 12px; }
    .icon-big { font-size: 26px; }
    .over-btns button { min-height: 44px; font-size: 13px; }
  }


.btn-primary{background:#225db2;color:#fff}.btn-primary:hover{background:#1b4e98}.btn-ghost:hover{background:rgba(255,255,255,.22)}button:focus-visible{outline:3px solid #fff;outline-offset:3px}button{font-size:16px!important;cursor:pointer}button:disabled{cursor:default;opacity:.45}button:active{transform:translateY(1px)}#mute-btn{font-size:20px!important}.stat small{font-size:12px;opacity:1;color:#d7dce6}.stat span{font-size:18px}.footer{font-size:13px;color:#ccd3df}.footer a{color:#ffd76e}.over-sub{color:#e7eaf2;opacity:1}.over-sub,.final-line{font-size:14px!important}.overlay{overflow:auto}.over-btns{flex-wrap:wrap}.over-btns button{flex:1 1 140px}.board:focus-visible{outline:3px solid #ffd76e;outline-offset:3px}body{scrollbar-color:#71809a #1b2233;scrollbar-width:auto}body::-webkit-scrollbar{width:10px}body::-webkit-scrollbar-track{background:#1b2233}body::-webkit-scrollbar-thumb{background:#71809a;border:2px solid #1b2233;border-radius:6px}body::-webkit-scrollbar-thumb:hover{background:#a4afc1}@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important}}