/* ===== Base theme ===== */
:root{
  --brand:#497f64;
  --bg:#0d0f10;
  --text:#ffffff;
  --muted:#a5b3a8;
  --border:#2a2d31;

  --tileSize: clamp(40px, min(9.2vw, (100vw - 64px)/7), 56px);

  --correct:#2ea043; /* green */
  --present:#e3b341; /* yellow */
  --absent:#3a3f45;  /* gray */

  --btnBg:#12161a;
}

/* Global */
html,body{height:100%}
body{
  margin:0;
  background:var(--bg);
  color:var(--text);
  font-family:system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;
}

/* ===== Topbar (Header: brand + actions only) ===== */
.ws-topbar{
  position:sticky;
  top:0;
  z-index:40;
  width:100%;
  background:#0e1115cc;
  backdrop-filter: blur(6px);
  border-bottom:1px solid var(--border);
}
.ws-topbar-inner{
  max-width:920px;
  margin:0 auto;
  padding:10px 16px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
}
.ws-brand{
  display:flex;
  align-items:center;
  gap:10px;
  font:800 18px/1 system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;
  letter-spacing:.3px;
}
.ws-brand .dot{ width:10px; height:10px; border-radius:50%; background:var(--brand); display:inline-block }

.ws-actions{
  display:flex;
  align-items:center;
  gap:8px;
}
.icon-btn{
  display:grid; place-items:center;
  width:36px; height:36px;
  border-radius:10px;
  border:1px solid var(--border);
  background:var(--btnBg);
  cursor:pointer;
}
.icon-btn svg{ width:18px; height:18px; stroke:#e8e8e8; }

/* ===== Stage + HUD ===== */
#game{
  width:100%;
  max-width:720px;
  margin:24px auto 48px;
  padding:0 16px 48px;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:16px;
}

.ws-hud{
  width:100%;
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:12px;
  max-width:560px;
}
.ws-hud .ws-tag{
  font:600 14px/1 system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;
  padding:8px 10px;
  border:1px solid var(--border);
  border-radius:10px;
  background:#111419;
  color:var(--text);
}
.ws-hud-right{ display:flex; gap:8px; align-items:center; flex-wrap:wrap; }

/* Score pulse when chips land */
@keyframes ws-pulse {
  0% { transform: scale(1); }
  40% { transform: scale(1.07); }
  100% { transform: scale(1); }
}
.ws-tag.pulse { animation: ws-pulse 260ms ease; }

/* ===== Stage wrapper (bubble overlays grid) ===== */
.ws-stage{
  width:100%;
  max-width:560px;
  position:relative;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:12px;
}

/* ===== Grid ===== */
.ws-grid{
  display:grid;
  gap:8px;
  justify-items:center;
}
.ws-row{
  display:grid;
  gap:8px;
}
.ws-tile{
  width:var(--tileSize);
  height:var(--tileSize);
  border:1px solid var(--border);
  border-radius:8px;
  display:grid;
  place-items:center;
  font-weight:700;
  text-transform:uppercase;
  background:#0f1214;
  color:var(--text);
  user-select:none;
  transition:transform .06s ease, background .15s ease, border-color .15s ease;
  transform-style:preserve-3d;
}
.ws-tile.active{ outline:2px solid var(--brand); outline-offset:-2px; }
.ws-tile.filled{ background:#111419; border-color:#3a3f45; }
.ws-row.ws-locked .ws-tile{ opacity:.9; }

/* Submitted colors */
.ws-tile.state-correct{ background:var(--correct); border-color:var(--correct); color:#000; }
.ws-tile.state-present{ background:var(--present); border-color:var(--present); color:#000; }
.ws-tile.state-absent{  background:var(--absent);  border-color:#000; color:#fff; }

/* Flip animation */
@keyframes ws-flip-1 {
  0%   { transform: rotateX(0); }
  49%  { transform: rotateX(90deg); }
  51%  { transform: rotateX(90deg); }
  100% { transform: rotateX(0); }
}
.ws-tile.flip { animation: ws-flip-1 420ms ease var(--flip-delay, 0ms) both; }

/* Shake for errors */
@keyframes ws-shake{
  0%,100%{transform:translateX(0)}
  25%{transform:translateX(-4px)}
  75%{transform:translateX(4px)}
}
.ws-row.shake .ws-tile{ animation:ws-shake 120ms linear 0s 2; }

/* ===== Keyboard ===== */
.ws-kb{
  margin-top:8px;
  display:grid;
  gap:8px;
  width:100%;
  padding: 0 12px;                /* side padding on mobile */
  -webkit-tap-highlight-color: transparent;
}
.ws-kb-row{
  display:grid;
  grid-auto-flow:column;
  justify-content:center;
  gap:6px;
}
.ws-kb-key{
  font:600 14px/1 system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;
  padding:12px 10px;
  min-width:34px;
  border-radius:8px;
  border:1px solid var(--border);
  background:#12161a;
  color:var(--text);
  cursor:pointer;
  user-select:none;
  touch-action:manipulation;
}
.ws-kb-key:active{ transform:translateY(1px) }
.ws-kb-enter{ padding:12px 14px }
.ws-kb-back{  padding:12px 14px }

/* Keyboard color states */
.ws-kb-key.k-correct{ background:var(--correct); border-color:var(--correct); color:#000; }
.ws-kb-key.k-present{ background:var(--present); border-color:var(--present); color:#000; }
.ws-kb-key.k-absent{  background:var(--absent);  border-color:#000;  color:#fff; }

/* ===== Bubble message ===== */
.ws-bubble{
  position:absolute;
  left:50%;
  top:0;
  transform:translate(-50%, -12px);
  background:#111419;
  color:var(--text);
  border:1px solid var(--border);
  border-radius:12px;
  padding:10px 12px;
  font:600 14px/1 system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;
  box-shadow:0 6px 18px rgba(0,0,0,.35);
  opacity:0;
  pointer-events:none;
  transition:opacity .18s ease, transform .18s ease;
  white-space:nowrap;
  z-index:5;
}
.ws-bubble.show{ opacity:1; transform:translate(-50%, -24px); }

/* ===== Modals: Generic, End Card, Rules, Settings ===== */
.ws-modal,
.ws-endcard{
  position:fixed;
  inset:0;
  background:rgba(0,0,0,.6);
  display:flex;
  align-items:center;
  justify-content:center;
  z-index:50;
}
.ws-modal .card,
.ws-endcard .card{
  width:min(92vw, 560px);
  background:#111419;
  border:1px solid var(--border);
  border-radius:16px;
  padding:20px;
  box-shadow:0 12px 32px rgba(0,0,0,.45);
}
.ws-modal h3,
.ws-endcard h3{
  margin:0 0 10px 0;
  font:700 20px/1.2 system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;
}
.ws-modal p, .ws-modal li,
.ws-endcard p{ margin:6px 0; color:var(--muted) }
.ws-modal .row,
.ws-endcard .row{ display:flex; gap:8px; margin-top:12px; flex-wrap:wrap }
.ws-btn{
  border:1px solid var(--border);
  background:#12161a;
  color:var(--text);
  border-radius:10px;
  padding:10px 12px;
  font:600 14px/1 system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;
  cursor:pointer;
}
.ws-btn.primary{ background:var(--brand); color:#fff; border-color:var(--brand) }

/* Mini example tiles inside rules */
.ws-mini-row{
  display:grid; grid-auto-flow:column; gap:6px; margin-top:8px;
}
.ws-mini-tile{
  width:28px; height:28px; border-radius:6px; display:grid; place-items:center;
  font:700 12px/1 system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif; text-transform:uppercase;
  border:1px solid #000;
}
.ws-mini-tile.correct{ background:var(--correct); color:#000; border-color:var(--correct); }
.ws-mini-tile.present{ background:var(--present); color:#000; border-color:var(--present); }
.ws-mini-tile.absent{  background:var(--absent);  color:#fff; border-color:#000; }

/* Settings form */
.ws-form{ display:grid; gap:10px; }
.ws-field{
  display:flex; align-items:center; justify-content:space-between;
  background:#0f1317; border:1px solid var(--border); padding:10px; border-radius:10px;
}
.ws-field label{ font:600 14px/1 system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif; }
.ws-field input[type="checkbox"]{ width:18px; height:18px; }

/* ===== Floating points chip ===== */
.ws-fxfloat{
  position:fixed;
  z-index:60;
  pointer-events:none;
  font:800 14px/1 system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;
  padding:6px 8px;
  border-radius:999px;
  background:#111419;
  border:1px solid var(--border);
  color:#fff;
  box-shadow:0 8px 20px rgba(0,0,0,.45);
  transition: transform 420ms cubic-bezier(.22,.82,.25,1), opacity 420ms ease, left 420ms ease, top 420ms ease;
  opacity:.98;
}
.ws-fxfloat.green{ background:var(--correct); color:#000; border-color:var(--correct); }
.ws-fxfloat.yellow{ background:var(--present); color:#000; border-color:var(--present); }

/* ===== Mobile tweaks ===== */
@media (max-width: 430px){
  :root{ --tileSize: clamp(36px, 10.5vw, 48px); }
  .ws-kb{ padding: 0 10px; gap: 6px; }
  .ws-kb-row{ gap: 5px; }
  .ws-kb-key{ padding: 10px 8px; min-width: 30px; font-weight: 700; }
  .ws-modal .card, .ws-endcard .card { padding:16px; }
}

/* ===== HUD layout tweaks ===== */
.ws-hud-right { gap:8px; }
@media (max-width:430px){
  .ws-hud-right { gap:6px; }
}