/* style.css - snyggt och enkelt */
* { box-sizing: border-box; font-family: Inter, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial; }
html,body { height:100%; margin:0; background: linear-gradient(180deg, #f7fbff, #e6f0ff); color:#1b2430; }
.container { max-width:980px; margin:28px auto; padding:20px; }
header { text-align:center; margin-bottom:12px; }
h1 { margin:4px 0; font-size:2.2rem; }
.subtitle { color:#475569; margin-top:0; }

.game-panel { background: #fff; border-radius:12px; padding:16px; box-shadow: 0 6px 20px rgba(20,30,60,0.08); }
.top-row { display:flex; gap:12px; align-items:center; justify-content:space-between; margin-bottom:14px; }
.top-row input { padding:6px 8px; border-radius:6px; border:1px solid #e6eef8; min-width:140px; }
.top-row button { padding:8px 12px; border-radius:8px; border:none; background:#1f7aee; color:white; cursor:pointer; }
.top-row button:active { transform:translateY(1px); }

.grid { display:grid; grid-template-columns: repeat(3, 1fr); gap:12px; padding:6px; }
.cell { background: linear-gradient(180deg,#f6f9ff,#edf5ff); border-radius:10px; height:120px; display:flex; align-items:flex-end; justify-content:center; position:relative; overflow:hidden; cursor:pointer; }
.mole { width:78px; height:78px; border-radius:50%; background: radial-gradient(circle at 30% 30%, #ffdd99, #f29c3e); display:flex; align-items:center; justify-content:center; transform:translateY(120%); transition:transform 120ms ease-out; box-shadow: 0 6px 16px rgba(0,0,0,0.12); }
.mole.up { transform:translateY(0%); }
.mole:active { transform: scale(0.95); }

.controls { display:flex; gap:8px; justify-content:center; margin-top:12px; }
.controls button { padding:8px 12px; border-radius:8px; border:1px solid #e0e7ff; background:white; cursor:pointer; }
.controls button.active { background:#1f7aee; color:white; border-color:#155bb5; }

.scores { margin-top:12px; padding:12px; background:#fff; border-radius:12px; box-shadow:0 6px 16px rgba(10,20,40,0.04); }
.scores h2 { margin-top:0; font-size:1.1rem; }
footer { text-align:center; margin-top:12px; color:#6b7280; }
@media (max-width:700px){
  .top-row { flex-direction:column; gap:8px; align-items:stretch; }
  .cell { height:100px; }
}