:root{
  --bg:#eef4ff; --card:#fff; --ink:#1f2a44; --muted:#6b7a99;
  --accent:#4f7cff; --good:#22c55e; --bad:#ef4444; --warn:#f59e0b;
}
*{box-sizing:border-box}
body{margin:0;font-family:"Segoe UI",system-ui,-apple-system,sans-serif;background:
  radial-gradient(1200px 500px at 10% -10%, #dbe7ff, transparent),
  radial-gradient(1000px 500px at 110% 10%, #ffe6f2, transparent), var(--bg);
  color:var(--ink);min-height:100vh}
.hidden{display:none !important}

/* ---------- Login ---------- */
#login-view{display:flex;align-items:center;justify-content:center;min-height:100vh;padding:20px}
.card{background:var(--card);border-radius:22px;padding:28px;box-shadow:0 18px 40px rgba(31,42,68,.14)}
.login-card{width:min(420px,100%);text-align:center}
.login-card h1{margin:.2em 0;font-size:2rem}
.sub{color:var(--muted);margin-top:0}
.avatars{display:flex;flex-wrap:wrap;gap:8px;justify-content:center;margin:14px 0}
.avatars button{font-size:1.6rem;background:#f2f6ff;border:3px solid transparent;border-radius:14px;
  width:52px;height:52px;cursor:pointer}
.avatars button.sel{border-color:var(--accent);background:#e4ecff}
input,select{width:100%;padding:13px 14px;margin:6px 0;border:2px solid #dbe3f5;border-radius:14px;
  font-size:1rem;background:#fbfcff;color:var(--ink)}
input:focus,select:focus{outline:none;border-color:var(--accent)}
.row{display:flex;gap:10px;margin-top:10px}
button{font-family:inherit;font-size:1rem;padding:12px 16px;border-radius:14px;border:2px solid #dbe3f5;
  background:#fff;cursor:pointer;font-weight:600;color:var(--ink)}
button:hover{background:#f4f7ff}
button.primary{background:var(--accent);color:#fff;border-color:var(--accent);flex:1}
button.primary:hover{filter:brightness(1.08)}
button.ghost{background:transparent}
.msg{min-height:1.4em;color:var(--bad);font-weight:600}
.msg.ok{color:var(--good)}

/* ---------- App ---------- */
header{display:flex;align-items:center;gap:16px;flex-wrap:wrap;padding:14px 22px;background:#fff;
  box-shadow:0 4px 18px rgba(31,42,68,.08);position:sticky;top:0;z-index:10}
.brand{font-size:1.25rem;font-weight:800}
nav{display:flex;gap:8px;flex:1}
.tab{border:none;background:#f1f5ff;border-radius:999px;padding:10px 18px}
.tab.active{background:var(--accent);color:#fff}
.user{display:flex;align-items:center;gap:10px;font-weight:700}
main{padding:22px;max-width:1100px;margin:0 auto}

.levels{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:14px;margin-bottom:22px}
.level{background:#fff;border-radius:18px;padding:16px;box-shadow:0 8px 20px rgba(31,42,68,.08);
  cursor:pointer;border:3px solid transparent;transition:transform .12s}
.level:hover{transform:translateY(-3px);border-color:var(--accent)}
.level h3{margin:.1em 0 .3em}
.level p{margin:0;color:var(--muted);font-size:.92rem}
.level .pts{display:inline-block;margin-top:10px;background:#fff3d6;color:#a06b00;border-radius:999px;
  padding:4px 10px;font-weight:700;font-size:.85rem}

.hud{display:flex;gap:10px;flex-wrap:wrap;align-items:center;margin-bottom:14px}
.pill{background:#fff;border-radius:999px;padding:9px 14px;font-weight:700;box-shadow:0 4px 12px rgba(31,42,68,.08)}

#grid-wrap{overflow:auto;background:#fff;border-radius:20px;padding:18px;box-shadow:0 10px 26px rgba(31,42,68,.1)}
#grid{display:grid;gap:3px;justify-content:start}
.cell{width:56px;height:56px;display:flex;align-items:center;justify-content:center;
  font-size:1.15rem;font-weight:700;border-radius:8px}
.cell.given{background:#fff;border:2px solid #cfd8ee}
.cell.op,.cell.eqs{background:transparent;color:var(--muted);font-size:1.35rem}
.cell.blank{padding:0;background:#eef1f8;border:2px dashed #b9c4de}
.cell.blank input{width:100%;height:100%;margin:0;padding:0;text-align:center;font-size:1.1rem;
  font-weight:800;border:none;background:transparent;border-radius:6px}
.cell.blank input:focus{outline:3px solid var(--accent)}
.cell.correct{background:#dcfce7;border:2px solid var(--good)}
.cell.correct input{color:#15803d}
.cell.wrong{background:#fee2e2;border:2px solid var(--bad);animation:shake .3s}
.cell.wrong input{color:#b91c1c}
.cell.hintcell{background:#fef3c7;border:2px solid var(--warn)}
@keyframes shake{25%{transform:translateX(-4px)}75%{transform:translateX(4px)}}

.pill.penalty{color:var(--bad)}
.penalty-fly{position:fixed;transform:translate(-50%,0);z-index:120;pointer-events:none;
  font-weight:900;font-size:1.25rem;color:var(--bad);text-shadow:0 2px 6px rgba(255,255,255,.9);
  transition:transform 1.2s cubic-bezier(.2,.8,.3,1),opacity 1.2s ease-out}
.penalty-fly.go{transform:translate(-50%,-90px) scale(1.25);opacity:0}

.win{margin-top:16px;background:#dcfce7;border:3px solid var(--good);border-radius:18px;padding:18px;
  font-size:1.1rem;font-weight:700;text-align:center}

.filters{display:flex;gap:10px;margin-bottom:14px;max-width:520px}
table.board{width:100%;border-collapse:collapse;background:#fff;border-radius:18px;overflow:hidden;
  box-shadow:0 10px 26px rgba(31,42,68,.1)}
table.board th,table.board td{padding:12px 14px;text-align:left;border-bottom:1px solid #eef1f8}
table.board th{background:#f6f9ff;color:var(--muted);font-size:.88rem;text-transform:uppercase;letter-spacing:.03em}
table.board tr.me{background:#eef4ff;font-weight:800}
.rank1{font-size:1.2rem}
@media (max-width:600px){.cell{width:44px;height:44px;font-size:1rem}}

/* ---------- Portal ---------- */
.games{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:14px;margin-bottom:22px}
.game-card{background:#fff;border-radius:20px;padding:18px;box-shadow:0 8px 20px rgba(31,42,68,.08);cursor:pointer;
  border:3px solid transparent;transition:transform .12s}
.game-card:hover{transform:translateY(-3px)}
.game-card.active{border-color:var(--accent)}
.game-card .gicon{font-size:2.4rem}
.game-card h3{margin:.2em 0}
.game-card p{margin:0;color:var(--muted)}
.setup-head{display:flex;align-items:center;gap:14px;flex-wrap:wrap;margin-bottom:12px}
.setup-head h2{margin:0}
.setup-options{display:flex;gap:10px;flex-wrap:wrap;align-items:center}
.setup-options select{width:auto;margin:0}
.pill.unranked{background:#fff3d6;color:#a06b00}
button.small{padding:7px 11px;font-size:.9rem}
button:disabled{opacity:.5;cursor:not-allowed}
td.actions{display:flex;gap:6px;flex-wrap:wrap}
.tag{background:#eef4ff;color:var(--accent);border-radius:999px;padding:2px 8px;font-size:.78rem;font-weight:700}
#ch-detail{margin-top:18px}
.toast{position:fixed;left:50%;bottom:26px;transform:translateX(-50%);background:#1f2a44;color:#fff;padding:12px 18px;
  border-radius:14px;z-index:200;font-weight:700;box-shadow:0 10px 26px rgba(0,0,0,.25)}
.toast.bad{background:var(--bad)}

.modal-bg{position:fixed;inset:0;background:rgba(31,42,68,.45);display:flex;align-items:center;justify-content:center;z-index:300;padding:20px}
.modal{width:min(420px,100%)}
.modal h3{margin-top:0}
.modal label{display:block;font-weight:700;font-size:.85rem;color:var(--muted);margin-top:6px}
.name-hint{background:#fff3d6;color:#7a5200;border-radius:12px;padding:8px 12px;font-size:.92rem;margin:6px 0}
.modal.intro{width:min(560px,100%);max-height:90vh;overflow:auto}
.intro-item{display:flex;gap:12px;align-items:flex-start;margin:10px 0}
.intro-item p{margin:2px 0 0;color:var(--muted)}
.intro-icon{font-size:1.8rem;line-height:1}
.admin-btns{flex-wrap:wrap}
button.danger{background:#e5484d;color:#fff;border-color:#e5484d}