/* Full of English - oyun ortak stilleri */
* { margin: 0; padding: 0; box-sizing: border-box; }

:root {
  --primary: #0ea5e9;
  --accent: #4f46e5;
  --ink: #0f172a;
  --muted: #64748b;
  --line: #e2e8f0;
  --ok: #16a34a;
  --bad: #dc2626;
  --warn: #f59e0b;
  --bg: #f8fafc;
}

body.g {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  background: var(--bg);
  color: var(--ink);
  overflow-x: hidden;
  -webkit-text-size-adjust: 100%;
}

.wrap { width: 100%; max-width: 460px; margin: 0 auto; padding: 14px 14px calc(20px + env(safe-area-inset-bottom)); }

/* --- baslik --- */
.hd { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; }
.hd b { font-size: 1.05rem; letter-spacing: -0.01em; }
.bk {
  width: 32px; height: 32px; flex: 0 0 auto; display: flex; align-items: center; justify-content: center;
  background: #fff; border: 1px solid var(--line); border-radius: 9px; color: var(--muted);
  text-decoration: none; font-size: 1.05rem;
}
.bk:hover { color: var(--accent); border-color: #c7d2fe; }
.lv {
  margin-left: auto; font-size: 0.75rem; font-weight: 700; padding: 4px 10px; border-radius: 99px;
  background: #e0f2fe; color: #0369a1;
}

/* --- zaman cubugu --- */
.bar { height: 6px; background: #e2e8f0; border-radius: 99px; overflow: hidden; margin-bottom: 10px; }
.t { display: block; height: 100%; width: 100%; background: linear-gradient(90deg, var(--primary), var(--accent)); transition: width 1s linear; }
.t.low { background: linear-gradient(90deg, #f97316, var(--bad)); }

.row { display: flex; gap: 6px; margin-bottom: 14px; flex-wrap: wrap; }
.pill {
  font-size: 0.76rem; font-weight: 600; padding: 5px 10px; border-radius: 99px;
  background: #fff; border: 1px solid var(--line); color: var(--muted); font-variant-numeric: tabular-nums;
}

/* --- Boggle tablosu --- */
.grid5 {
  display: grid; grid-template-columns: repeat(5, 1fr); gap: 6px;
  background: #fff; padding: 8px; border: 1px solid var(--line); border-radius: 14px;
  margin-bottom: 12px; touch-action: manipulation; user-select: none;
}
.cell {
  aspect-ratio: 1; display: flex; align-items: center; justify-content: center;
  font-size: clamp(1.1rem, 6vw, 1.5rem); font-weight: 800; text-transform: uppercase;
  background: #f1f5f9; border-radius: 9px; cursor: pointer; color: #334155;
  transition: background 0.1s, color 0.1s, transform 0.1s;
}
.cell.on { background: linear-gradient(135deg, var(--primary), var(--accent)); color: #fff; transform: scale(0.94); }

.cur {
  font-size: 1.5rem; font-weight: 800; text-align: center; letter-spacing: 0.18em;
  text-transform: uppercase; min-height: 2rem; color: var(--ink); font-variant-numeric: tabular-nums;
}
.ms { text-align: center; font-size: 0.85rem; min-height: 1.3em; color: var(--muted); margin-bottom: 10px; }
.ms.ok { color: var(--ok); font-weight: 600; }
.ms.bad { color: var(--bad); font-weight: 600; }
.ms.warn { color: var(--warn); font-weight: 600; }

/* --- bulunan kelimeler --- */
.finds { background: #fff; border: 1px solid var(--line); border-radius: 12px; padding: 10px 12px; margin-bottom: 14px; }
.fh { font-size: 0.72rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted); margin-bottom: 8px; }
.chips { display: flex; flex-wrap: wrap; gap: 5px; }
.chip {
  font-size: 0.78rem; font-weight: 600; padding: 3px 8px; border-radius: 7px;
  background: #f1f5f9; color: #475569;
}
.chip.a1 { background: #dcfce7; color: #15803d; }
.chip.a2 { background: #ccfbf1; color: #0f766e; }
.chip.b1 { background: #dbeafe; color: #1d4ed8; }
.chip.b2 { background: #ede9fe; color: #6d28d9; }
.chip.c1 { background: #fae8ff; color: #a21caf; }

/* --- butonlar --- */
.acts { display: flex; gap: 8px; }
.btn {
  flex: 1; padding: 12px; border: 0; border-radius: 11px; color: #fff;
  font-size: 0.92rem; font-weight: 700; cursor: pointer;
  background: linear-gradient(135deg, var(--primary), var(--accent));
  box-shadow: 0 4px 0 #4f46e5;
}
.btn:active { transform: translateY(4px); box-shadow: 0 0 0 #4f46e5; }
.btn.ghost { background: #fff; color: var(--muted); border: 1px solid var(--line); box-shadow: 0 3px 0 #e2e8f0; }
.btn.ghost:active { transform: translateY(3px); box-shadow: 0 0 0 #e2e8f0; }

/* --- seviye sayfasi --- */
.sheet { position: fixed; inset: 0; background: rgba(15, 23, 42, 0.4); display: flex; align-items: flex-end; z-index: 50; }
.sheet[hidden] { display: none; }
.sheetIn { background: #fff; width: 100%; border-radius: 16px 16px 0 0; padding: 18px 16px calc(20px + env(safe-area-inset-bottom)); }
.lvGrid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-bottom: 14px; }
.lvBtn2 {
  padding: 12px; border: 1px solid var(--line); background: #fff; border-radius: 10px;
  font-size: 0.9rem; font-weight: 700; color: var(--ink); cursor: pointer;
}
.lvBtn2.on { background: #e0f2fe; border-color: var(--primary); color: #0369a1; }

@media (max-width: 360px) {
  .cell { font-size: 1.05rem; }
  .cur { font-size: 1.3rem; }
}