/* ============================================================
   果酱祖玛 · 苹果园
   MC 方块风，配色/字体/描边与「果酱游戏厅」dashboard 完全一致
   ============================================================ */
*{box-sizing:border-box}
:root{
  --cream:#fff7e9; --cream-2:#f7edda; --cream-lo:#e6d8bf; --cream-hi:#fffdf8;
  --brown:#8a7358; --brown-d:#5b4a38; --ink:#5b4a38;
  --green:#79bb48; --green-d:#5f9d33; --wood:#cba36d;
  --line:3px solid #8a7358;
}
html,body{height:100%;margin:0;padding:0;overflow:hidden}
body{
  font-family:"Segoe UI","PingFang SC","Hiragino Sans GB","Microsoft YaHei",system-ui,sans-serif;
  color:var(--ink);-webkit-font-smoothing:antialiased;
  -webkit-user-select:none;user-select:none;-webkit-tap-highlight-color:transparent;
}

#app{position:fixed;inset:0}
.screen{position:absolute;inset:0;display:none}
.screen.active{display:block}

/* 与 dashboard 同样的苹果园背景 */
#menu{
  display:none;flex-direction:column;align-items:center;justify-content:center;gap:clamp(22px,4vh,44px);
  padding:calc(24px + env(safe-area-inset-top,0px)) 24px calc(26px + env(safe-area-inset-bottom,0px));
  background:#cfe6f2 url("../assets/orchard_bg.png") center top/cover no-repeat;
  overflow-y:auto;
}
#menu.active{display:flex}

.h-title{
  margin:0;color:#fff;font-weight:900;letter-spacing:6px;
  font-size:clamp(34px,6vw,54px);text-align:center;
  text-shadow:3px 3px 0 var(--brown-d),-3px 3px 0 var(--brown-d),3px -3px 0 var(--brown-d),-3px -3px 0 var(--brown-d),
              0 10px 20px rgba(90,70,45,.30);
}

/* ---------- 方块关卡（MC 按钮）---------- */
.levels{
  display:grid;grid-template-columns:repeat(3,1fr);
  gap:clamp(14px,2.4vw,26px);width:min(660px,92vw);
}
.lv{
  position:relative;cursor:pointer;
  aspect-ratio:1/1;
  background:var(--cream);
  border:3px solid var(--brown);border-radius:0;
  box-shadow:inset 3px 3px 0 var(--cream-hi),inset -3px -3px 0 var(--cream-lo),
             0 8px 0 rgba(110,88,60,.20);
  display:flex;align-items:center;justify-content:center;
  transition:transform .1s ease,box-shadow .1s ease;
  overflow:hidden;
}
.lv .num{
  font-size:clamp(40px,9vw,72px);font-weight:900;line-height:1;letter-spacing:2px;
  color:var(--brown-d);
  text-shadow:2px 2px 0 var(--cream-hi),-2px -2px 0 var(--cream-lo);
}
a.lv:hover,.lv:hover{transform:translateY(-4px);
  box-shadow:inset 3px 3px 0 var(--cream-hi),inset -3px -3px 0 var(--cream-lo),0 12px 0 rgba(110,88,60,.24)}
.lv:active{transform:translateY(2px);
  box-shadow:inset 3px 3px 0 var(--cream-lo),inset -3px -3px 0 var(--cream-hi),0 4px 0 rgba(110,88,60,.20)}

/* 锁住的关卡：置灰 + 🔒 */
.lv.locked{
  cursor:not-allowed;background:#efe7d7;
  filter:grayscale(1) brightness(1.04);opacity:.94;
}
.lv.locked .num{display:none}
.lv.locked .lock{font-size:clamp(34px,7vw,58px);line-height:1;filter:grayscale(1);opacity:.55}

/* ================= 游戏 ================= */
#game{position:absolute;inset:0}
#cv{display:block;width:100%;height:100%;touch-action:none}

#hud{
  position:absolute;top:0;left:0;right:0;display:flex;align-items:center;gap:8px;
  padding:calc(10px + env(safe-area-inset-top,0px))
          calc(12px + env(safe-area-inset-right,0px)) 10px
          calc(12px + env(safe-area-inset-left,0px));
  pointer-events:none;z-index:5;
}
.mc-ico,.chip,.bar{
  background:var(--cream);
  border:3px solid var(--brown);border-radius:0;
  box-shadow:inset 3px 3px 0 var(--cream-hi),inset -3px -3px 0 var(--cream-lo),
             0 4px 0 rgba(110,88,60,.22);
}
.mc-ico{
  pointer-events:auto;width:42px;height:42px;flex:0 0 auto;cursor:pointer;
  color:var(--brown-d);font-size:17px;font-weight:900;line-height:1;
  display:flex;align-items:center;justify-content:center;padding:0;
}
.mc-ico:active{transform:translateY(2px);
  box-shadow:inset 3px 3px 0 var(--cream-lo),inset -3px -3px 0 var(--cream-hi)}
.mc-ico.off{filter:grayscale(.45);opacity:.85}
.menu-sound{position:absolute;z-index:3;
  top:calc(18px + env(safe-area-inset-top,0px));
  right:calc(18px + env(safe-area-inset-right,0px))}
.chip{
  height:42px;display:flex;align-items:center;gap:7px;padding:0 13px;flex:0 0 auto;
}
.chip .px{width:20px;height:20px;image-rendering:pixelated;-ms-interpolation-mode:nearest-neighbor}
.chip b{font-size:18px;font-weight:900;color:var(--brown-d);font-variant-numeric:tabular-nums}
.bar{height:42px;width:clamp(70px,16vw,150px);padding:6px;margin-right:auto;display:flex;align-items:center}
.bar i{display:block;height:100%;width:0;background:linear-gradient(180deg,#93d05e,var(--green));
  border:2px solid var(--green-d);transition:width .18s ease}

/* 连击 */
#combo{
  position:absolute;left:50%;top:19%;transform:translate(-50%,-50%);
  font-size:34px;font-weight:900;color:#fff;pointer-events:none;z-index:6;letter-spacing:2px;
  text-shadow:3px 3px 0 var(--brown-d),-3px 3px 0 var(--brown-d),3px -3px 0 var(--brown-d),-3px -3px 0 var(--brown-d),
              0 8px 14px rgba(0,0,0,.28);
  animation:pop .8s ease-out forwards;
}
@keyframes pop{
  0%{opacity:0;transform:translate(-50%,-50%) scale(.5)}
  22%{opacity:1;transform:translate(-50%,-50%) scale(1.16)}
  68%{opacity:1;transform:translate(-50%,-60%) scale(1)}
  100%{opacity:0;transform:translate(-50%,-100%) scale(1)}
}

/* ================= 弹层（与果酱跑酷一致）================= */
.overlay{position:absolute;inset:0;background:rgba(60,48,34,.5);display:flex;align-items:center;justify-content:center;
  z-index:30;padding:16px}
.hidden{display:none!important}
.panel{
  background:var(--cream);border:var(--line);border-radius:0;
  box-shadow:inset 3px 3px 0 var(--cream-hi),inset -3px -3px 0 var(--cream-lo),0 8px 0 rgba(110,88,60,.20);
  padding:18px;text-align:center;min-width:320px;max-width:min(92vw,430px);
  max-height:100%;display:flex;flex-direction:column;      /* 矮屏时整体不会被撑出屏幕 */
}
.panel > h2,.panel > .row,.panel > .final-score,.panel > .over-sticker,.panel > .over-sub{flex:0 0 auto}
.panel h2{margin:0 0 14px;font-size:26px;color:var(--brown-d)}
.over-sticker{width:136px;height:136px;display:block;margin:0 auto 8px;border-radius:16px;
  border:3px solid var(--brown);background:#fff;object-fit:cover}
.final-score{margin-bottom:8px}
.final-score span{font-size:52px;font-weight:900;color:var(--brown-d);font-variant-numeric:tabular-nums}
.final-score small{margin-left:6px;color:#7a6852;font-weight:700}
.over-sub{margin-bottom:16px;min-height:20px;color:#7a6852;font-size:14px}
.intro-text{margin:0 0 16px;font-size:16px;line-height:1.75;color:var(--ink);font-weight:600}
.lv .num sub{font-size:.46em;vertical-align:-.16em;letter-spacing:0}
.panel .row{display:flex;gap:10px;justify-content:center;flex-wrap:wrap;margin-top:6px}

/* MC 按钮 */
.btn{
  display:inline-flex;align-items:center;justify-content:center;height:48px;padding:0 22px;border-radius:0;cursor:pointer;
  background:var(--wood);color:#fff;font-weight:700;letter-spacing:1px;border:3px solid #6b5539;
  box-shadow:inset -3px -3px 0 rgba(0,0,0,.18),inset 3px 3px 0 rgba(255,255,255,.35);
  text-shadow:2px 2px 0 rgba(0,0,0,.25);font-family:inherit;font-size:15px;
}
.btn:hover{filter:brightness(1.06)}
.btn:active{transform:translateY(2px)}
.btn-primary{background:var(--green);border-color:#4b7f27}
.btn-primary:hover{background:#83c751}
.btn-ghost{background:#a99a83;border-color:#7a6b56}

/* 排行榜弹窗 */
.field{display:block;text-align:left;margin-bottom:12px}
.field span{display:block;font-size:13px;color:#7a6852;margin-bottom:5px;font-weight:700}
.field input{width:100%;height:42px;padding:0 12px;font:inherit;color:var(--ink);
  background:#fffdf6;border:var(--line);border-radius:0;outline:none}
.field input:focus{border-color:var(--green-d)}
.field input.bad{border-color:#c0503c;background:#fff3f0}
.name-field{width:min(330px,88vw);text-align:center}
.name-field span{text-align:center;color:#fff;font-weight:800;
  text-shadow:2px 2px 0 var(--brown-d),-2px 2px 0 var(--brown-d),2px -2px 0 var(--brown-d),-2px -2px 0 var(--brown-d)}
.leaderboard{list-style:none;margin:0 0 14px;padding:0;flex:1 1 auto;min-height:46px;
  max-height:min(44vh,290px);overflow:auto;text-align:left}
.leaderboard li{display:flex;align-items:center;gap:10px;padding:8px 6px;
  border-bottom:2px solid rgba(138,115,88,.22);font-size:14px}
.leaderboard li:last-child{border-bottom:0}
.leaderboard .rank{width:24px;color:#a08a6c;font-weight:800}
.leaderboard .nm{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.leaderboard .sc{font-weight:800;color:var(--brown-d)}
.leaderboard .empty{color:#a08a6c;justify-content:center;border:0}

/* 排行榜分页 */
.board-nav{display:flex;align-items:center;justify-content:center;gap:14px;margin:2px 0 12px}
.board-nav #boardPageLbl{min-width:52px;font-weight:900;color:var(--brown-d);font-variant-numeric:tabular-nums}
.board-nav .mc-ico:disabled{filter:grayscale(1);opacity:.42;cursor:not-allowed}
.board-nav .mc-ico:disabled:active{transform:none;
  box-shadow:inset 3px 3px 0 var(--cream-hi),inset -3px -3px 0 var(--cream-lo)}

/* 关卡方块右上角的排行榜按钮 */
.lv-board{
  position:absolute;top:6px;right:6px;width:34px;height:34px;padding:0;cursor:pointer;
  display:flex;align-items:center;justify-content:center;font-size:17px;line-height:1;
  background:var(--cream);border:3px solid var(--brown);border-radius:0;
  box-shadow:inset 2px 2px 0 var(--cream-hi),inset -2px -2px 0 var(--cream-lo);
}
.lv-board:hover{background:#fffdf6}
.lv-board:active{transform:translateY(2px)}

@media(max-width:560px){
  #hud{padding:calc(7px + env(safe-area-inset-top,0px)) calc(8px + env(safe-area-inset-right,0px)) 7px
       calc(8px + env(safe-area-inset-left,0px));gap:6px}
  .mc-ico{width:34px;height:34px;font-size:14px;border-width:2px}
  .chip{height:34px;padding:0 8px;gap:4px;border-width:2px}
  .chip b{font-size:14px}
  .chip .px{width:15px;height:15px}
  /* 进度条吃满剩余空间，不再被挤成一小块 */
  .bar{height:34px;padding:4px;border-width:2px;width:auto;flex:1 1 auto;min-width:26px;margin-right:2px}
  #combo{font-size:26px}
  .panel{min-width:0;width:100%;padding:14px}
  .over-sticker{width:92px;height:92px}
  .final-score{margin-bottom:4px}
  .final-score span{font-size:38px}
  .over-sub{margin-bottom:12px;font-size:13px}
  .btn{height:44px;padding:0 16px;font-size:14px}
  .lv-board{width:30px;height:30px;font-size:15px}
  .leaderboard li{padding:6px 5px;font-size:13px}
  .leaderboard{max-height:min(38vh,260px);margin-bottom:10px}
  .board-nav{gap:10px;margin:2px 0 10px}
  .field input{height:38px}
  .h-title{letter-spacing:3px}
  .levels{gap:12px}
  #menu{gap:clamp(14px,3vh,26px)}
}

/* 矮屏 / 横屏：把选关界面压扁，别让方块被挤出屏幕 */
@media(max-height:560px){
  #menu{gap:12px}
  .h-title{font-size:clamp(22px,4.6vw,32px);letter-spacing:3px}
  .levels{gap:10px}
  .lv .num{font-size:clamp(30px,7vw,48px)}
  .lv.locked .lock{font-size:clamp(26px,6vw,40px)}
  .lv-board{width:26px;height:26px;font-size:13px;top:4px;right:4px}
  .name-field input{height:34px}
  .name-field span{font-size:12px}
  /* 弹窗也压扁，保证整块放得下 */
  .overlay{padding:12px}
  .panel{padding:12px}
  .panel h2{font-size:20px;margin-bottom:8px}
  .over-sticker{width:70px;height:70px;margin-bottom:6px}
  .final-score span{font-size:30px}
  .over-sub{margin-bottom:10px}
  .leaderboard{max-height:min(32vh,190px);min-height:40px;margin-bottom:10px}
  .leaderboard li{padding:5px 5px;font-size:13px}
  .board-nav{margin:0 0 8px}
  .btn{height:40px;padding:0 14px;font-size:13px}
}