/* Kelimio v1.5 — değerlendirme + renkler; letters 2 satır */
:root{
  --bg:#f8fafc;
  --text:#0f172a;
  --muted:#64748b;
  --card:#ffffff;
  --border:#e2e8f0;
  --primary:#2563eb;
  --cell-size: 54px;
  --gap-col: 6px;
  --gap-row: 10px;

  --c-correct:#22c55e;
  --c-present:#f59e0b;
  --c-absent:#94a3b8;
}
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0; font:16px/1.4 system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial,'Apple Color Emoji','Segoe UI Emoji';
  background:var(--bg); color:var(--text);
}
.header{
  position:sticky; top:0; z-index:10;
  display:flex; align-items:center; justify-content:space-between;
  padding:10px 16px; background:var(--card); border-bottom:1px solid var(--border);
}
.logo{font-weight:800}
.right{display:flex; align-items:center; gap:8px}
.badge{display:inline-block; padding:4px 8px; border-radius:999px; background:#eef2ff; color:#1e293b; font-size:12px}
.btn{padding:8px 12px; border:1px solid var(--border); background:#fff; border-radius:10px; cursor:pointer}
.btn.ghost{background:transparent}
.btn.primary{background:var(--primary); color:#fff; border-color:var(--primary)}

.home{max-width:1100px; margin:24px auto; padding:0 16px}
.card{background:var(--card); border:1px solid var(--border); border-radius:16px; padding:16px}

.hero{display:flex; flex-direction:column; align-items:center; gap:6px; margin:18px 0 10px}
.logo-anim{
  font-size: clamp(38px, 8vw, 72px);
  font-weight: 900;
  letter-spacing: .5px;
  background: linear-gradient(92deg, #2563eb, #22c55e, #f59e0b);
  -webkit-background-clip: text; background-clip:text; color: transparent;
  animation: floaty 6s ease-in-out infinite, hue 14s linear infinite;
  text-shadow: 0 2px 10px rgba(37,99,235,0.12);
}
.hero-sub{font-weight:700; color:var(--muted); letter-spacing:.4px}
@keyframes floaty{ 0%,100%{transform:translateY(0)} 50%{transform:translateY(-6px)} }
@keyframes hue{ 0%{filter:hue-rotate(0deg)} 100%{filter:hue-rotate(360deg)} }

.modesRow{ display:grid; grid-template-columns: repeat(3, minmax(160px,1fr)); gap:12px; margin:14px 0 20px; }
.btn.mode{ padding:14px 16px; font-weight:800; border-radius:14px; font-size:16px; border:2px solid var(--border); }
.btn.mode.ghost{background:transparent}

.leaders{ display:grid; grid-template-columns: repeat(auto-fit, minmax(260px,1fr)); gap:16px; align-items:stretch; }
.leaderCard .cardTitle{margin:0 0 8px}
.list-clean{margin:0; padding-left:20px}
.list-clean li{padding:4px 0; font-weight:700}
.badge.week{background:#e2f3ff; color:#0b3452; margin-left:6px}

/* Oyun ekranı */
.game{max-width:900px; margin:24px auto; padding:0 16px}
.gameTop{display:flex; align-items:center; justify-content:space-between; margin-bottom:12px}
.title{font-size:24px; font-weight:800}
.subtitle{color:var(--muted); font-size:14px}

.boardCard, .lettersCard{ background:var(--card); border:1px solid var(--border); border-radius:16px; padding:16px; margin-top:12px }
.boardHeader{font-weight:700; margin-bottom:8px}

/* Grid */
.grid{
  --cols:5;
  display:grid;
  grid-template-columns: repeat(var(--cols), var(--cell-size));
  grid-auto-rows: var(--cell-size);
  column-gap: var(--gap-col);
  row-gap: var(--gap-row);
  justify-content:center;
  padding:12px 0;
}
.row{display:contents}
.cell{
  display:flex; align-items:center; justify-content:center;
  border:2px solid var(--border); border-radius:10px; background:#fff; font-weight:800; font-size:22px;
  transform-style: preserve-3d;
}
.cell.correct{ background: var(--c-correct); border-color: var(--c-correct); color:#fff; }
.cell.present{ background: var(--c-present); border-color: var(--c-present); color:#111; }
.cell.absent{ background: var(--c-absent); border-color: var(--c-absent); color:#fff; }

/* Animations */
@keyframes flipIn {
  0%   { transform: rotateX(0deg);   }
  50%  { transform: rotateX(90deg);  }
  100% { transform: rotateX(0deg);   }
}
.flip .cell{ animation: flipIn .28s ease; }

@keyframes shake {
  10%, 90% { transform: translateX(-1px); }
  20%, 80% { transform: translateX(2px);  }
  30%, 50%, 70% { transform: translateX(-4px); }
  40%, 60% { transform: translateX(4px); }
}
.shake .cell{ animation: shake .45s ease both; border-color:#ef4444; }

/* Harf tablosu: 2 sabit sıra (üst: sesli, alt: sessiz), ortalı */
.letters{
  display:flex; flex-direction:column; align-items:center; gap:10px;
  margin:12px auto 0; max-width:100%;
}
.letters-row{
  display:flex; justify-content:center; align-items:center; gap:6px; flex-wrap:nowrap; overflow-x:auto;
}
.l{
  border:1px solid var(--border); border-radius:8px; padding:8px 10px; min-width:32px; text-align:center; font-weight:700; background:#fff;
}
.l.correct{ background: var(--c-correct); border-color: var(--c-correct); color:#fff; }
.l.present{ background: var(--c-present); border-color: var(--c-present); color:#111; }
.l.absent{ background: var(--c-absent); border-color: var(--c-absent); color:#fff; }

.fx{position:fixed; inset:0; pointer-events:none; z-index:60; display:none}
#err{display:none; position:fixed; left:0; right:0; top:0; padding:10px 14px; background:#fee2e2; color:#991b1b; border-bottom:2px solid #ef4444; z-index:100; text-align:center; font-weight:800}

.modal{position:fixed; inset:0; display:none; align-items:center; justify-content:center; background:rgba(15,23,42,.4); z-index:80}
.modal.show{display:flex}
.modal-card{width:min(560px,92vw); background:#fff; border:1px solid var(--border); border-radius:16px; padding:16px}
.modal-actions{display:flex; justify-content:flex-end; gap:8px; margin-top:12px}
.modal-body{min-height:80px}

.hidden{display:none !important}
.note{color:var(--muted)}
.right{display:flex;align-items:center;gap:8px}
.in{height:34px;padding:6px 10px;border-radius:10px;border:1px solid #e2e8f0;min-width:150px;outline:none}
.btn{padding:8px 12px;border:1px solid #e2e8f0;background:#fff;border-radius:10px;cursor:pointer}
.btn.ghost{background:transparent}
.badge{display:inline-block;padding:4px 8px;border-radius:999px;background:#eef2ff;color:#1e293b;font-size:12px}
/* ---------- Modern Kayıt Formu ---------- */
.modal-card{border-radius:16px; box-shadow:0 12px 30px rgba(15,23,42,.12)}
.modal-body{padding:6px}

.signup-title{font-size:18px; font-weight:800; margin:0 0 6px}
.signup-sub{font-size:12px; color:#64748b; margin:0 0 12px}

.form-grid{display:grid; grid-template-columns:1fr; gap:12px}
@media (min-width: 640px){ .form-grid{grid-template-columns:1fr 1fr} }
.form-row{display:flex; flex-direction:column; gap:6px}
.form-row--full{grid-column:1 / -1}

.form-row label{font-weight:700}
.form-row input{
  width:100%; height:40px; padding:8px 12px;
  border:1px solid #e2e8f0; border-radius:10px; outline:none;
}
.form-row input:focus{border-color:#2563eb; box-shadow:0 0 0 3px rgba(37,99,235,.15)}

.form-hint{font-size:12px; color:#64748b}
.form-error{color:#b91c1c; font-weight:700; background:#fee2e2; border:1px solid #fecaca;
            padding:8px 10px; border-radius:10px; margin-bottom:6px}

.form-actions{display:flex; gap:8px; justify-content:flex-end}
.btn.primary{background:#2563eb; color:#fff; border-color:#2563eb}