* { box-sizing: border-box; }
:root{
  --bg:#0b0d12;
  --panel:#121521;
  --ink:#dfe6f8;
  --muted:#93a0bf;
  --accent:#7aa2ff;
  --accent-2:#a67aff;
  --danger:#ff6b6b;
  --good:#66e6a8;
  --pill:#1d2234;
  --shadow: 0 10px 30px rgba(0,0,0,.45);
}
html,body{height:100%;}
body{
  margin:0;
  background: radial-gradient(1200px 600px at 10% -10%, #13172a 0%, #0b0d12 40%), var(--bg);
  color:var(--ink);
  font-family: system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Cantarell, Noto Sans, 'Helvetica Neue', Arial, 'Apple Color Emoji','Segoe UI Emoji', 'Noto Color Emoji', sans-serif;
}
.app{max-width:1100px; margin:0 auto; padding:16px;}

.topbar{
  display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between;
  gap:12px; background:var(--panel); border:1px solid #1c2133; border-radius:16px; padding:12px 14px; box-shadow:var(--shadow);
}
h1{font-size:20px; margin:0; display:flex; align-items:center; gap:8px;}
.muted{color:var(--muted); font-weight:400;}

.stats{display:flex; gap:8px; flex-wrap:wrap;}
.pill{background:var(--pill); color:var(--ink); border:1px solid #1f2539; border-radius:999px; padding:6px 10px; font-size:14px;}

.actions{display:flex; gap:8px; flex-wrap:wrap;}
.btn{
  background:#1a2033; color:var(--ink);
  border:1px solid #273056; padding:10px 14px; border-radius:12px;
  cursor:pointer; font-weight:600; transition:.2s transform ease, .2s background ease, .2s border ease;
}
.btn:hover{ transform: translateY(-1px); background:#202744; }
.btn.primary{ background:linear-gradient(135deg, var(--accent), var(--accent-2)); border-color: #5c78ff; color:#0d1230;}
.btn.small{ padding:6px 10px; font-size:14px;}
.btn.danger{ background: linear-gradient(135deg, #ff9a9a, #ff6b6b); border-color:#ff6b6b; color:#1b0b0b;}

.board-wrap{
  margin-top:18px; background:var(--panel); border:1px solid #1c2133; border-radius:16px; padding:16px; box-shadow:var(--shadow);
}
.message{margin:0 0 12px 0; color:var(--muted);}
.board{
  display:grid; gap:10px;
  grid-template-columns: repeat(auto-fit, minmax(64px, 1fr));
}
.emoji-btn{
  font-size:34px; line-height:1; padding:16px; background:#161a2a; border:1px solid #202744; border-radius:16px;
  display:flex; align-items:center; justify-content:center; user-select:none; -webkit-user-select:none; touch-action:manipulation;
  transition: .15s transform ease, .15s background ease, .15s border ease, .15s box-shadow ease;
  box-shadow: 0 2px 0 rgba(0,0,0,.45);
}
.emoji-btn:hover{ transform: translateY(-1px); background:#1b2140; }
.emoji-btn:active{ transform: translateY(0); background:#1c2244; }
.emoji-btn.disabled{ opacity:.5; pointer-events:none; }
.emoji-btn.highlight{ background:#232a55; border-color:#4250a0; box-shadow:0 0 0 3px rgba(122,162,255,.25) inset; }

.footer{color:var(--muted); text-align:center; padding:16px 0 6px 0; font-size:14px;}

.overlay{
  position:fixed; inset:0; background: rgba(6, 8, 14, .75);
  display:flex; align-items:center; justify-content:center; z-index:40;
}
.overlay.hidden{ display:none; }
.overlay-card{
  width:min(720px, 96vw); background:var(--panel); border:1px solid #222942; border-radius:16px; box-shadow:var(--shadow);
  padding:14px; display:flex; flex-direction:column; gap:12px;
}
.overlay-header{ display:flex; align-items:center; justify-content:space-between; gap:12px; }
.scores-list{ display:grid; gap:8px; max-height:55vh; overflow:auto; padding-right:4px;}
.score-row{
  display:grid; grid-template-columns: 1fr 1fr 2fr; gap:10px; align-items:center;
  padding:10px; border:1px solid #263053; border-radius:12px; background:#141a2e;
}
.score-row .rank{ font-weight:700; }
.score-empty{ color:var(--muted); text-align:center; padding:12px; }
kbd{ background:#19203a; border:1px solid #253059; border-bottom-width:3px; padding:0 6px; border-radius:6px; }

.end-summary{ display:grid; gap:10px; }
.end-line{ display:flex; align-items:center; justify-content:space-between; gap:12px; padding:10px; border:1px solid #263053; border-radius:12px; background:#141a2e; }
.good{ color: var(--good); }
.bad{ color: var(--danger); }

@media (pointer:coarse){
  .emoji-btn{ font-size:40px; padding:18px; }
}
