@import url("./tokens.css");

* { box-sizing: border-box; }
html { background: #c8c2ae; }
body {
  min-width: 320px; min-height: 100vh; margin: 0; color: var(--ink);
  background: radial-gradient(circle at 16% 12%, rgba(255,255,255,.25) 0 1px, transparent 2px) 0 0 / 17px 17px, linear-gradient(145deg, #ece4cc, #bdb5a0);
  font-family: var(--font-body);
}
button, a { -webkit-tap-highlight-color: transparent; }
.game-handheld {
  width: min(100% - 24px, 820px); min-height: calc(100vh - 24px); margin: 12px auto; padding: clamp(18px, 4vw, 36px);
  border: 2px solid var(--shell-shadow); border-radius: 28px 28px 48px 28px;
  background: linear-gradient(135deg, var(--shell-highlight), var(--shell) 55%, #c9c1a9); box-shadow: var(--shadow);
}
.game-header { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 18px; }
.game-brand { margin: 0; font-family: var(--font-display); font-size: clamp(1rem, 3vw, 1.45rem); letter-spacing: .06em; }
.game-back, .game-control {
  display: inline-flex; align-items: center; justify-content: center; min-width: 44px; min-height: 44px; padding: 9px 14px;
  border: 2px solid var(--cartridge-edge); border-radius: 9px; color: var(--ink); background: var(--cartridge); box-shadow: 0 3px 0 var(--shell-shadow); font: 700 .9rem var(--font-body); text-decoration: none; cursor: pointer;
}
.game-back:hover, .game-control:hover:not(:disabled) { background: var(--shell-highlight); }
.game-back:active, .game-control:active:not(:disabled) { transform: translateY(2px); box-shadow: 0 1px 0 var(--shell-shadow); }
.game-control:disabled { cursor: not-allowed; opacity: .55; }
.game-lcd {
  padding: clamp(18px, 4vw, 30px); border: 5px solid #777563; border-radius: 20px;
  background: linear-gradient(rgba(224,238,198,.22) 1px, transparent 1px) 0 0 / 100% 5px, linear-gradient(110deg, var(--lcd-light), var(--lcd));
  box-shadow: inset 0 0 0 2px rgba(49,74,42,.24), inset 0 12px 24px rgba(255,255,255,.18);
}
.game-title { margin: 0; color: var(--lcd-deep); font-family: var(--font-display); font-size: clamp(1.6rem, 5vw, 2.35rem); letter-spacing: .04em; }
.game-scoreboard { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; margin: 18px 0; }
.game-scoreboard div { padding: 10px; border: 2px solid rgba(49,74,42,.5); border-radius: 8px; background: rgba(223,236,198,.62); }
.game-scoreboard dt { color: var(--lcd-deep); font-size: .78rem; font-weight: 700; }
.game-scoreboard dd { margin: 4px 0 0; color: var(--ink); font-family: var(--font-display); font-size: 1.35rem; }
.game-stage { display: grid; place-items: center; min-height: 260px; padding: 18px; border: 3px inset rgba(49,74,42,.66); border-radius: 12px; background: rgba(223,236,198,.5); }
.game-message { max-width: 28ch; margin: 0; color: var(--lcd-deep); font-weight: 700; text-align: center; }
.game-status { min-height: 1.5em; margin: 14px 0; color: var(--lcd-deep); font-size: .9rem; font-weight: 700; }
.game-controls { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.game-control--start { background: #f4d372; }
.game-control--pause { background: #a9cad7; }
.game-control--restart { background: #e69b7b; }
.game-back:focus-visible, .game-control:focus-visible { outline: 4px solid var(--focus); outline-offset: 3px; }
.merge-tile { will-change: transform, opacity; }
.merge-tile--move-left { animation: merge-slide-left 160ms ease-out; }
.merge-tile--move-right { animation: merge-slide-right 160ms ease-out; }
.merge-tile--move-up { animation: merge-slide-up 160ms ease-out; }
.merge-tile--move-down { animation: merge-slide-down 160ms ease-out; }
.merge-tile--merged { animation: merge-pop 140ms ease-out; }
.merge-tile--new { animation: merge-enter 130ms ease-out; }
.mines-cell { background: #aebd8c; transition: background-color 120ms ease-out, transform 120ms ease-out, color 120ms ease-out; }
.mines-cell--revealed { background: #dfecc6; transform: scale(.96); }
.mines-cell--flagged { background: #f0d170; color: #314a2a; }
.mines-cell--mine { background: #be554c; color: #fff7df; animation: mines-mine 180ms ease-out; }
@keyframes mines-mine { 0% { transform: scale(.68); } 68% { transform: scale(1.12); } 100% { transform: scale(1); } }
@keyframes merge-slide-left { from { transform: translateX(20%); } to { transform: translateX(0); } }
@keyframes merge-slide-right { from { transform: translateX(-20%); } to { transform: translateX(0); } }
@keyframes merge-slide-up { from { transform: translateY(20%); } to { transform: translateY(0); } }
@keyframes merge-slide-down { from { transform: translateY(-20%); } to { transform: translateY(0); } }
@keyframes merge-pop { 0% { transform: scale(.78); } 72% { transform: scale(1.12); } 100% { transform: scale(1); } }
@keyframes merge-enter { from { opacity: 0; transform: scale(.62); } to { opacity: 1; transform: scale(1); } }
@media (min-width: 600px) { .game-handheld { min-height: auto; margin: 36px auto; } }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { transition-duration: .01ms !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; } }