/* game.css — 遊戲畫面（M2） */

.screen.hidden{display:none}

/* HUD */
.game-screen{min-height:100svh;display:flex;flex-direction:column;
  padding:max(14px,env(safe-area-inset-top)) 16px max(20px,env(safe-area-inset-bottom));}
.game-hud{display:flex;align-items:center;gap:10px;margin-bottom:auto}
.hud-btn{border:none;font-family:inherit;font-weight:800;cursor:pointer;
  background:#fff;color:var(--accent-d);border-radius:14px;padding:10px 13px;font-size:15px;
  box-shadow:0 3px 0 #f0dcc6, inset 0 0 0 1.5px #f0dcc6}
.hud-btn:active{transform:translateY(2px)}
.hud-btn:disabled{opacity:.45;box-shadow:none}
.hud-title{flex:1;display:flex;flex-direction:column;align-items:center;line-height:1.2}
.hud-title #g-level{font-weight:900;font-size:16px;letter-spacing:1px}
.hud-title .timer{font-variant-numeric:tabular-nums;font-weight:800;font-size:14px;color:var(--accent-d);
  font-family:ui-monospace,"SF Mono",monospace;letter-spacing:.5px}
.win-time-row{font-size:15px;color:var(--sub);margin:2px 0 2px;font-weight:700}
.win-time-row #win-time{font-variant-numeric:tabular-nums;font-family:ui-monospace,monospace;color:var(--accent-d);font-weight:900;font-size:18px}

/* board area */
.board-area{flex:1;display:flex;align-items:center;justify-content:center;padding:18px 0}
.board{
  --n:6;--gap:6px;
  position:relative;
  width:min(92vw,440px);aspect-ratio:1;
  display:grid;grid-template-columns:repeat(var(--n),1fr);gap:var(--gap);
  background:linear-gradient(180deg,#f3e3cc,#e9d4b4);
  border-radius:22px;padding:10px;
  box-shadow:inset 0 2px 6px rgba(120,80,30,.18), 0 12px 28px rgba(150,100,40,.16);
}
.cell{
  appearance:none;border:none;padding:0;cursor:pointer;
  aspect-ratio:1;border-radius:13px;position:relative;
  background:linear-gradient(180deg,#fffefb,#fff6ea);
  box-shadow:0 2px 4px rgba(150,100,40,.10), inset 0 0 0 1px rgba(220,190,150,.55);
  display:flex;align-items:center;justify-content:center;
  transition:transform .07s ease;
}
.cell:active{transform:scale(.94)}
.cell.fixed{background:linear-gradient(180deg,#fbeacd,#f6e0bd);
  box-shadow:inset 0 0 0 2px #e0b070;cursor:default}
.cell.empty::after{content:"";width:26%;height:26%;border-radius:50%;background:rgba(180,140,90,.14)}
.cell .pc{width:88%;height:88%;animation:pop .18s ease}
@keyframes pop{from{transform:scale(.6);opacity:.4}to{transform:scale(1);opacity:1}}

.cell.bad{box-shadow:inset 0 0 0 2.5px #e2563f, 0 2px 4px rgba(150,100,40,.10);animation:shake .3s}
@keyframes shake{0%,100%{transform:translateX(0)}25%{transform:translateX(-3px)}75%{transform:translateX(3px)}}
.cell.hinted{box-shadow:inset 0 0 0 3px #36b37e, 0 0 0 4px rgba(54,179,126,.25)}

/* = / × 約束徽章 */
.con{position:absolute;z-index:5;transform:translate(-50%,-50%);
  min-width:22px;height:22px;padding:0 3px;border-radius:11px;
  background:#fff;border:2px solid #b08a5a;color:#7a5630;
  font-weight:900;font-size:13px;line-height:18px;text-align:center;
  box-shadow:0 2px 4px rgba(120,80,30,.2)}
.con.ne{color:#c0492f;border-color:#d98a72}

/* win overlay */
.overlay{position:fixed;inset:0;display:flex;align-items:center;justify-content:center;
  background:rgba(60,40,20,.36);backdrop-filter:blur(3px);z-index:50;padding:24px}
.overlay.hidden{display:none}
.win-card{background:#fffaf2;border-radius:24px;padding:30px 26px;text-align:center;width:100%;max-width:320px;
  box-shadow:0 24px 60px rgba(120,80,30,.3);animation:pop .25s ease}
.win-card h2{margin:6px 0 4px;font-size:26px;font-weight:900}
.win-stars{font-size:30px;letter-spacing:4px;color:#f5b324;margin:6px 0 18px}
.win-card .menu{margin-top:4px}

/* toast 小提示 */
.toast{position:fixed;left:50%;bottom:calc(30px + env(safe-area-inset-bottom));
  transform:translateX(-50%) translateY(18px);
  background:#3a2417;color:#fff;padding:11px 22px;border-radius:999px;
  font-weight:700;font-size:14px;white-space:nowrap;
  opacity:0;pointer-events:none;transition:opacity .25s, transform .25s;z-index:60;
  box-shadow:0 10px 24px rgba(0,0,0,.25)}
.toast.show{opacity:1;transform:translateX(-50%) translateY(0)}