:root{
  --bg:#121213;
  --panel:#1a1a1b;
  --border:#3a3a3c;
  --border-light:#565758;
  --ink:#ffffff;
  --muted:#818384;
  --green:#538d4e;
  --yellow:#b59f3b;
  --gray:#3a3a3c;
  --red:#ff4d5e;
  color-scheme: dark;
}
*{ box-sizing:border-box; }
html,body{ height:100%; margin:0; }
body{
  background:var(--bg); color:var(--ink);
  font-family:'Helvetica Neue',Arial,sans-serif;
  display:flex; flex-direction:column; align-items:center;
  padding:env(safe-area-inset-top,0px) 8px env(safe-area-inset-bottom,0px);
}

#app-header{
  width:100%; max-width:500px; display:flex; align-items:center; justify-content:space-between;
  padding:10px 4px; border-bottom:1px solid var(--border);
}
#app-header h1{ font-size:1.7rem; letter-spacing:.12em; margin:0; font-weight:800; }
.icon-btn{
  background:none; border:none; color:var(--ink); font-size:1.3rem; cursor:pointer;
  width:36px; height:36px; border-radius:50%;
}
.icon-btn:hover{ background:rgba(255,255,255,.08); }

#app-main{ width:100%; max-width:500px; display:flex; flex-direction:column; align-items:center; flex:1; padding:10px 0 20px; }

#board{
  display:grid; grid-template-rows:repeat(6,1fr); gap:6px; margin:14px 0 22px;
  width:min(330px, 82vw); aspect-ratio:5/6;
}
.board-row{ display:grid; grid-template-columns:repeat(5,1fr); gap:6px; }

.tile{
  display:flex; align-items:center; justify-content:center;
  font-size:1.8rem; font-weight:700; text-transform:uppercase;
  border:2px solid var(--border); border-radius:4px;
  aspect-ratio:1/1;
  transition:transform .12s ease;
  user-select:none;
}
.tile.filled{ border-color:var(--border-light); animation:pop .1s ease; }
.tile.correct{ background:var(--green); border-color:var(--green); }
.tile.present{ background:var(--yellow); border-color:var(--yellow); }
.tile.absent{ background:var(--gray); border-color:var(--gray); color:var(--muted); }
.tile.flip{ animation:flip .5s ease forwards; }
.tile.shake{ animation:shake .4s ease; }

@keyframes pop{ from{ transform:scale(0.9); } to{ transform:scale(1); } }
@keyframes flip{
  0%{ transform:rotateX(0); }
  50%{ transform:rotateX(90deg); }
  51%{ transform:rotateX(90deg); }
  100%{ transform:rotateX(0); }
}
@keyframes shake{
  10%,90%{ transform:translateX(-2px); }
  20%,80%{ transform:translateX(4px); }
  30%,50%,70%{ transform:translateX(-8px); }
  40%,60%{ transform:translateX(8px); }
}

#toast{
  position:fixed; top:70px; left:50%; transform:translateX(-50%);
  background:#fff; color:#111; padding:10px 16px; border-radius:5px; font-weight:600;
  z-index:80; box-shadow:0 4px 14px rgba(0,0,0,.4);
}

#keyboard{ width:100%; max-width:500px; padding:0 4px; }
.kb-row{ display:flex; justify-content:center; gap:6px; margin-bottom:8px; }
.key{
  flex:1; max-width:44px; height:52px;
  display:flex; align-items:center; justify-content:center;
  background:var(--border-light); color:var(--ink);
  border:none; border-radius:4px; font-weight:700; font-size:.85rem;
  cursor:pointer; text-transform:uppercase; user-select:none;
}
.key.wide{ max-width:66px; font-size:.7rem; }
.key.correct{ background:var(--green); }
.key.present{ background:var(--yellow); }
.key.absent{ background:var(--gray); color:var(--muted); }
.key:active{ opacity:.75; }

.hidden{ display:none !important; }

.modal-backdrop{
  position:fixed; inset:0; background:rgba(0,0,0,.7); z-index:90;
  display:flex; align-items:center; justify-content:center; padding:16px;
}
.modal{
  background:var(--panel); border:1px solid var(--border); border-radius:8px;
  max-width:420px; width:100%; padding:24px; position:relative; max-height:85vh; overflow:auto;
}
.modal h2{ margin-top:0; letter-spacing:.05em; }
.modal-close{
  position:absolute; top:12px; right:14px; background:none; border:none; color:var(--ink);
  font-size:1.5rem; cursor:pointer; line-height:1;
}
.example-row{ display:grid; grid-template-columns:repeat(5,36px); gap:4px; margin:8px 0 2px; }
.example-row .tile{ font-size:1.1rem; aspect-ratio:1/1; }
.example-caption{ font-size:.85rem; color:var(--muted); margin-top:2px; margin-bottom:16px; }
.muted{ color:var(--muted); font-size:.85rem; }

.result-text{ font-size:1.1rem; font-weight:700; text-align:center; margin-bottom:12px; }
.name-row{ display:flex; gap:8px; margin-bottom:10px; }
#player-name{
  flex:1; padding:10px 12px; border-radius:4px; border:1px solid var(--border-light);
  background:var(--bg); color:var(--ink); font-size:1rem;
}
.btn{
  font-family:inherit; font-size:.95rem; font-weight:700; padding:10px 14px;
  border-radius:4px; border:none; background:var(--border-light); color:var(--ink); cursor:pointer;
  width:100%; margin-bottom:8px;
}
.btn-primary{ background:var(--green); }
.btn:hover{ filter:brightness(1.1); }

table{ width:100%; border-collapse:collapse; margin-top:10px; }
th,td{ text-align:left; padding:7px 6px; border-bottom:1px solid var(--border); font-size:.9rem; }
th{ color:var(--muted); font-size:.72rem; text-transform:uppercase; }
tbody tr:first-child td{ color:var(--yellow); font-weight:700; }

#fatal-error-box{ font-family:monospace; }