:root{
  --base-width: 340px;
  --bg: #121213;
  --panel: #1c1c1e;
  --accent: #ffd54a;
  --muted: #818384;
}

/* base */
body {
  background: var(--bg);
  color: #ffffff;
  font-family: Inter, Arial, sans-serif;
  text-align: center;
  padding: 18px;
  margin: 0;
}

header { margin-bottom: 6px; }
.title {
  margin: 6px 0 8px 0;
  font-size: 34px;
  letter-spacing: 1px;
  color: var(--accent);
}

/* streak bar */
.streak-bar {
  display: flex;
  gap: 10px;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  color: #fff;
  margin-bottom: 8px;
}
.streak-bar .best { font-weight: 600; color: #cfc6a0; margin-left:6px; font-size:14px; }
.small-btn {
  background: transparent;
  border: 1px solid var(--muted);
  color: #fff;
  padding: 6px 8px;
  border-radius: 6px;
  cursor: pointer;
  font-weight:700;
}

/* main board */
#board-container { display:flex; justify-content:center; margin: 0 auto 12px; width: 100%; }
#board { display: grid; gap: 6px; margin-bottom: 8px; }
.board-row { display:flex; justify-content:center; }

/* tile */
.tile {
  border: 2px solid #3a3a3c;
  background: var(--bg);
  color: #ffffff;
  display: inline-flex;
  justify-content: center;
  align-items: center;
  font-size: 22px;
  font-weight: 800;
  margin: 2px;
  text-transform: uppercase;
  user-select: none;
  height: 56px;
  width: 56px;
  border-radius: 6px;
  transition: transform 160ms ease;
}

/* keyboard */
#keyboard { margin-top: 12px; max-width: 720px; margin-left:auto;margin-right:auto;}
.keyboard-row { display:flex; justify-content:center; margin:6px 0; }
.key {
  background:var(--muted); color:#fff; border:none; border-radius:6px; padding:12px 8px; margin:4px; cursor:pointer;
  font-weight:700; min-width:36px; text-align:center; user-select:none;
}
.key.big { min-width:78px; padding:12px 12px; }

/* colors */
.correct { background: #538d4e !important; border-color:#538d4e !important; color: #fff; }
.present { background: #b59f3b !important; border-color:#b59f3b !important; color: #fff; }
.absent  { background: #3a3a3c !important; border-color:#3a3a3c !important; color: #fff; }

/* messages & hint */
#message { margin-top: 14px; font-size: 16px; min-height:22px; color:#fff; }
.hint-row { display:flex; align-items:center; gap:12px; justify-content:center; margin-top:8px; }
.hint-btn { background:var(--accent); color:#000; border:none; padding:8px 12px; border-radius:8px; font-weight:700; cursor:pointer; }
.hint-text { color:var(--accent); margin-top:8px; font-weight:600; min-width:200px; text-align:left; }

/* popup common */
.popup {
  position: fixed;
  top:0; left:0; width:100%; height:100%;
  display:flex; justify-content:center; align-items:center;
  background: rgba(0,0,0,0.65);
  z-index: 999;
}
.popup.hidden { display:none; }
.popup-content {
  width: 88%;
  max-width: 380px;
  background: var(--panel);
  border-radius: 12px;
  padding: 18px;
  border: 2px solid var(--accent);
  text-align: center;
}
.popup-content h2 { color: var(--accent); margin: 0 0 8px 0; font-size:20px;}
.popup-content p { color: #fff; margin: 8px 0; font-size:15px; }
.popup-actions { display:flex; gap:8px; justify-content:center; margin-top:10px; }
.popup-btn {
  background: var(--accent);
  color: #000;
  padding: 8px 12px;
  border-radius: 8px;
  border: none;
  font-weight:700;
  cursor: pointer;
}

/* countdown */
.countdown { font-weight:700; color:#fff; font-size:14px; margin-top:6px; }

/* notification (small) */
.notify {
  position: fixed; right: 14px; bottom: 18px; z-index:1500;
  background: #222; color: #fff; padding: 10px 14px; border-radius: 8px; border: 2px solid var(--accent);
}
.notify.hidden { display:none; }

/* theme list */
.theme-list { display:flex; flex-wrap:wrap; gap:8px; justify-content:center; margin-top:8px; }
.theme-item {
  padding:8px 10px; border-radius:8px; border:1px solid #333; cursor:pointer; min-width:120px; font-weight:700;
}
.theme-item.locked { opacity:0.45; filter:grayscale(0.6); cursor: not-allowed; }

/* badges */
.badges-list { display:flex; flex-wrap:wrap; gap:8px; justify-content:center; margin-top:8px; }
.badge {
  background: #222; border:1px solid #333; padding:8px; min-width:120px; border-radius:8px; color:#fff; font-weight:700;
}
.badge.locked { opacity:0.35; filter:grayscale(0.7); }

/* THEMES (examples). We apply by body[data-theme="NAME"] */
body[data-theme="shinobi"] { --accent: #7bd389; --panel:#0f1720; background: #06121a; }
body[data-theme="geass"] { --accent: #ff3b3b; --panel:#1b0f12; background: #090507; }
body[data-theme="titan"] { --accent: #f2c94c; --panel:#17140f; background: #070707; }
body[data-theme="ultrainstinct"] { --accent: #9ad3ff; --panel:#08101a; background:#02060a; }
body[data-theme="demon"] { --accent: #ff7b3b; --panel:#200f0f; background:#080303; }

/* small responsive adjustments */
@media (max-width:420px) {
  .tile { height:48px; width:48px; font-size:18px; }
  .hint-text { display:none; } /* save space */
  .small-btn { padding:6px; font-size:13px; }
}