/* =====================
/assets/kryssle.css
===================== */
:root{ --kry-bg:#0f172a; --kry-panel:#111827; --kry-tile:#1f2937; --kry-text:#e5e7eb; --kry-muted:#9ca3af; --kry-correct:#16a34a; --kry-present:#ca8a04; --kry-absent:#374151; --kry-accent:#38bdf8; }
.kryssle{ font:16px/1.45 system-ui,-apple-system,Segoe UI,Roboto,Noto Sans,"Helvetica Neue",Arial; color:var(--kry-text); background:transparent; }
.kryssle *{ box-sizing:border-box; }
.kry-header{ max-width:720px; margin:24px auto 0; padding:0 16px; display:flex; align-items:center; justify-content:space-between; }
.kry-title{ font-size: clamp(20px, 3.5vw, 28px); margin:0; letter-spacing:.5px; }
.kry-clue{ color:var(--kry-muted); font-size:15px; margin-top:4px; }
.kry-wrap{ max-width:720px; margin:12px auto 40px; padding:0 16px 24px; }
.kry-panel{ background:var(--kry-panel); border-radius:14px; padding:16px; box-shadow:0 8px 24px rgba(0,0,0,.25); }
.kry-grid{ display:grid; gap:8px; justify-content:center; margin:16px 0 8px; }
.kry-row{ display:grid; gap:8px; grid-auto-flow:column; justify-content:center; }
.kry-tile{ width:48px; height:48px; display:grid; place-items:center; border-radius:8px; background:var(--kry-tile); font-weight:700; font-size:22px; text-transform:uppercase; border:2px solid #0b1220; }
.kry-tile.revealed{ color:#fff; border-color:transparent; }
.kry-tile.correct{ background:var(--kry-correct); }
.kry-tile.present{ background:var(--kry-present); }
.kry-tile.absent{ background:var(--kry-absent); }
.kry-row.kry-shake{ animation:kry-shake .25s ease-in-out 0s 2; }
@keyframes kry-shake{ 25%{transform:translateX(-4px)} 75%{transform:translateX(4px)} }
.kry-kb{ display:grid; gap:8px; margin-top:14px; user-select:none; }
.kry-kb-row{ display:flex; gap:8px; justify-content:center; flex-wrap:wrap; }
.kry-key{ background:#111827; border:1px solid #0b1220; padding:10px 10px; min-width:36px; border-radius:10px; text-transform:uppercase; font-weight:600; cursor:pointer; color:var(--kry-text); }
.kry-key:active{ filter:brightness(1.2); }
.kry-key.small{ font-size:12px; min-width:56px; }
.kry-key.correct{ background:var(--kry-correct); color:#fff; border-color:transparent; }
.kry-key.present{ background:var(--kry-present); color:#fff; border-color:transparent; }
.kry-key.absent{ background:var(--kry-absent); color:#fff; border-color:transparent; }
.kry-bar{ display:flex; gap:8px; justify-content:space-between; align-items:center; margin-top:8px; }
.kry-icon{ background:#0b1220; border:1px solid #0b1220; color:#cbd5e1; padding:10px 12px; border-radius:10px; cursor:pointer; }
.kry-toasts{ position:fixed; inset:16px 16px auto auto; display:flex; flex-direction:column; gap:8px; z-index:10; }
.kry-toast{ background:rgba(17,24,39,.98); border:1px solid #0b1220; padding:10px 12px; border-radius:10px; color:#e5e7eb; }
.kry-muted{ color:var(--kry-muted); font-size:13px; }
.kry-footer{ margin-top:16px; display:flex; gap:12px; align-items:center; flex-wrap:wrap; }
.kry-badge{ background:#0b1220; padding:6px 10px; border-radius:999px; font-size:12px; color:#cbd5e1; border:1px solid #0b1220; }
@media (max-width:420px){ .kry-tile{ width:40px; height:40px; font-size:18px; } }