:root{
  --bg:#0e1230;
  --bg2:#151a45;
  --card:#1b2154;
  --card2:#232a66;
  --ink:#eef1ff;
  --muted:#9aa3d4;
  --accent:#5b8cff;
  --accent2:#7c5bff;
  --good:#37d67a;
  --bad:#ff5470;
  --warn:#ffbf47;
  --radius:18px;
  --shadow:0 10px 30px rgba(0,0,0,.35);
}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{margin:0;height:100%}
body{
  background:radial-gradient(1200px 700px at 50% -10%, #1c2560 0%, var(--bg) 60%);
  color:var(--ink);
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Inter,system-ui,sans-serif;
  overflow:hidden;
  user-select:none;
}
.screen{
  position:fixed;inset:0;
  display:none;flex-direction:column;
  padding:max(16px,env(safe-area-inset-top)) 16px max(16px,env(safe-area-inset-bottom));
  overflow-y:auto;
}
.screen.active{display:flex}

.card{
  background:linear-gradient(180deg,var(--card) 0%,var(--bg2) 100%);
  border:1px solid rgba(255,255,255,.06);
  border-radius:var(--radius);
  box-shadow:var(--shadow);
  padding:20px;
  margin:0 auto 14px;
  width:100%;max-width:520px;
}
.card.center{text-align:center;margin-top:auto;margin-bottom:auto}
h1,h2{margin:0 0 12px}
h2{font-size:15px;color:var(--muted);text-transform:uppercase;letter-spacing:.08em;margin-top:18px}
h2:first-child{margin-top:0}

.logo{font-size:34px;line-height:1;font-weight:800;text-align:center;margin-top:8px}
.logo span{display:block;background:linear-gradient(90deg,var(--accent),var(--accent2));-webkit-background-clip:text;background-clip:text;color:transparent}
.tagline{text-align:center;color:var(--muted);margin:0 0 22px}
.hint{color:var(--muted);font-size:13px;line-height:1.5;margin:10px 0 0}
.error{color:var(--bad);font-size:14px;min-height:18px;margin:10px 0 0;text-align:center}

.field{display:block;margin:0 0 14px}
.field span{display:block;font-size:13px;color:var(--muted);margin-bottom:6px}
input{
  width:100%;padding:14px 16px;font-size:17px;
  background:var(--card2);color:var(--ink);
  border:1px solid rgba(255,255,255,.08);border-radius:14px;outline:none;
}
input:focus{border-color:var(--accent)}
#in-code{text-transform:uppercase;letter-spacing:.25em;text-align:center;font-weight:700}

.btn{
  border:none;border-radius:14px;padding:14px 18px;font-size:16px;font-weight:700;
  color:#fff;cursor:pointer;transition:transform .06s ease,filter .15s ease;
}
.btn:active{transform:scale(.97)}
.btn.big{width:100%;padding:16px;font-size:18px}
.btn.small{padding:8px 12px;font-size:14px}
.btn.primary{background:linear-gradient(90deg,var(--accent),var(--accent2))}
.btn.secondary{background:var(--card2);border:1px solid rgba(255,255,255,.1)}
.btn.ghost{background:transparent;color:var(--muted);border:1px solid rgba(255,255,255,.12)}
.btn:disabled{opacity:.5;pointer-events:none}

.topbar{display:flex;align-items:center;justify-content:space-between;width:100%;max-width:520px;margin:0 auto 12px;gap:12px}
.me{display:flex;flex-direction:column}
.me-nick{font-weight:800;font-size:18px}
.me-rating{font-size:13px;color:var(--muted)}
.board-title{margin:0;font-size:18px}

.grid-levels{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.lvl{
  background:var(--card2);border:1.5px solid transparent;border-radius:12px;
  padding:10px 6px;text-align:center;cursor:pointer;
}
.lvl b{display:block;font-size:18px}
.lvl small{display:block;font-size:11px;color:var(--muted);margin-top:2px}
.lvl.sel{border-color:var(--accent);background:linear-gradient(180deg,var(--card2),#2c3585)}

.pill-row{display:flex;gap:8px;flex-wrap:wrap}
.pill{
  background:var(--card2);border:1.5px solid transparent;border-radius:999px;
  padding:10px 16px;font-size:14px;font-weight:600;cursor:pointer;color:var(--ink);
}
.pill.sel{border-color:var(--accent);background:linear-gradient(90deg,#2c3585,#34306f)}
.small-pills .pill{padding:7px 12px;font-size:13px}

.actions{margin-top:20px;display:flex;flex-direction:column;gap:10px}
.or{text-align:center;color:var(--muted);font-size:13px;margin:4px 0}
.friend-row{display:flex;flex-direction:column;gap:8px}
.join-inline{display:flex;gap:8px}
.join-inline input{flex:0 0 120px}
.join-inline .btn{flex:1}

.history{list-style:none;margin:0;padding:0}
.history li{display:flex;justify-content:space-between;align-items:center;padding:10px 0;border-bottom:1px solid rgba(255,255,255,.06);font-size:14px}
.history li:last-child{border-bottom:none}
.h-res{font-weight:800;width:26px}
.h-res.win{color:var(--good)}.h-res.loss{color:var(--bad)}.h-res.draw{color:var(--warn)}
.h-mid{flex:1;padding:0 10px;color:var(--muted)}
.h-delta.up{color:var(--good)}.h-delta.down{color:var(--bad)}
.empty{color:var(--muted);text-align:center;padding:14px 0}

/* Gaidīšana */
.spinner{width:44px;height:44px;border:4px solid rgba(255,255,255,.15);border-top-color:var(--accent);border-radius:50%;margin:6px auto 16px;animation:spin 1s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
.code-box{margin:12px 0}
.code{font-size:44px;font-weight:800;letter-spacing:.2em;color:var(--accent);margin:6px 0}

/* Atpakaļskaitīšana */
#screen-countdown{align-items:center;justify-content:center}
.countdown-wrap{text-align:center}
.vs{display:flex;align-items:center;gap:14px;justify-content:center;margin-bottom:24px}
.vs-name{font-size:20px;font-weight:800;max-width:38vw;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.vs-x{color:var(--accent);font-weight:800}
.cd-number{font-size:120px;font-weight:800;line-height:1;animation:pop .9s ease}
@keyframes pop{0%{transform:scale(.4);opacity:0}40%{transform:scale(1.1);opacity:1}100%{transform:scale(1);opacity:1}}

/* Duelis */
#screen-duel{padding:0;justify-content:space-between}
.scoreboard{display:flex;align-items:center;gap:8px;padding:max(12px,env(safe-area-inset-top)) 14px 8px}
.sb-player{display:flex;flex-direction:column;min-width:70px}
.sb-player.right{align-items:flex-end}
.sb-name{font-size:12px;color:var(--muted);max-width:24vw;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.sb-score{font-size:26px;font-weight:800}
.sb-timer{flex:1;text-align:center}
.timer-bar{height:8px;background:rgba(255,255,255,.1);border-radius:999px;overflow:hidden}
.timer-fill{height:100%;width:100%;background:linear-gradient(90deg,var(--good),var(--warn));transition:width 1s linear}
.sb-timer span{font-size:12px;color:var(--muted);display:block;margin-top:4px}

.question-area{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;position:relative;overflow:hidden}
.transition-circle{position:absolute;width:20px;height:20px;border-radius:50%;background:radial-gradient(circle,var(--accent2),var(--accent));opacity:0;transform:scale(0);z-index:1}
.transition-circle.run{animation:grow 3s ease forwards}
@keyframes grow{
  0%{opacity:.0;transform:scale(0)}
  10%{opacity:.85}
  100%{opacity:0;transform:scale(60)}
}
.question{font-size:min(15vw,64px);font-weight:800;z-index:2;text-align:center}
.answer-display{font-size:min(11vw,44px);font-weight:700;color:var(--accent);min-height:1.2em;z-index:2;letter-spacing:.02em}
.round-flash{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-size:min(18vw,90px);font-weight:800;opacity:0;z-index:3;pointer-events:none}
.round-flash.show{animation:flash 1.1s ease}
.round-flash.good{color:var(--good)}
.round-flash.bad{color:var(--bad)}
@keyframes flash{0%{opacity:0;transform:scale(.6)}25%{opacity:1;transform:scale(1)}75%{opacity:1}100%{opacity:0;transform:scale(1.1)}}

.numpad{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;padding:8px 12px max(14px,env(safe-area-inset-bottom))}
.np{
  background:var(--card2);border:1px solid rgba(255,255,255,.08);color:var(--ink);
  font-size:26px;font-weight:700;border-radius:14px;padding:16px 0;cursor:pointer;
  transition:transform .05s ease,background .1s ease;
}
.np:active{transform:scale(.95);background:#2c3585}
.np-ok{background:linear-gradient(90deg,var(--good),#2bbf6a);color:#08210f}
.np-wide{}
.numpad.locked{opacity:.45;pointer-events:none}

/* Rezultāts */
.result-badge{font-size:40px;font-weight:800;margin-bottom:8px}
.result-badge.win{color:var(--good)}
.result-badge.loss{color:var(--bad)}
.result-badge.draw{color:var(--warn)}
.result-scores{font-size:56px;font-weight:800;margin:6px 0}
.result-scores .colon{color:var(--muted);margin:0 8px}
.result-rating{font-size:18px;margin:10px 0}
.result-rating .up{color:var(--good)}
.result-rating .down{color:var(--bad)}

/* Tops */
.board{list-style:none;counter-reset:rank;margin:0;padding:0}
.board li{counter-increment:rank;display:flex;align-items:center;gap:12px;padding:11px 0;border-bottom:1px solid rgba(255,255,255,.06)}
.board li::before{content:counter(rank);width:26px;text-align:center;font-weight:800;color:var(--muted)}
.board li:nth-child(1)::before{color:#ffd453}
.board .b-nick{flex:1;font-weight:600}
.board .b-rating{font-weight:800;color:var(--accent)}
.board .b-games{font-size:12px;color:var(--muted);width:60px;text-align:right}