/* KLIKA — styles */
:root{
  --page:#EEF1FA; --surface:#FFFFFF; --surface2:#F7F8FD;
  --text:#151B40; --muted:#5D6590;
  --line:#D9DEF0; --ink:#151B40; --ink2:#262F63; --ink3:#343E7E;
  --gold:#FFC53D; --goldink:#3B2C00;
  --c1:#E5394F; --c2:#0FA08F; --c3:#6B4BF5; --c4:#EA8B07;
  --ok:#0FA08F; --bad:#E5394F;
  --display:"Suez One", Georgia, serif;
  --ui:"Assistant","Segoe UI",system-ui,sans-serif;
  --r:16px;
  --shadow:0 10px 30px -12px rgba(21,27,64,.28);
  box-sizing:border-box;
  padding-top:env(safe-area-inset-top,0px);
  padding-bottom:env(safe-area-inset-bottom,0px);
}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    --page:#090D28; --surface:#161C46; --surface2:#1C2352; --text:#EAEDFB;
    --muted:#9DA5D2; --line:#2D3470; --shadow:0 10px 30px -12px rgba(0,0,0,.6);
  }
}
:root[data-theme="dark"]{
  --page:#090D28; --surface:#161C46; --surface2:#1C2352; --text:#EAEDFB;
  --muted:#9DA5D2; --line:#2D3470; --shadow:0 10px 30px -12px rgba(0,0,0,.6);
}
*,*::before,*::after{box-sizing:inherit}
html{height:100%;scroll-padding-top:env(safe-area-inset-top,0px)}
body{
  margin:0;min-height:100%;color:var(--text);font-family:var(--ui);font-size:17px;line-height:1.5;
  background:var(--page);
  background-image:
    radial-gradient(60vw 44vw at 88% -8%, rgba(107,75,245,.16), transparent 62%),
    radial-gradient(52vw 40vw at 2% 6%, rgba(255,197,61,.20), transparent 60%),
    radial-gradient(70vw 50vw at 50% 108%, rgba(15,160,143,.14), transparent 64%);
  background-attachment:fixed;
  -webkit-text-size-adjust:100%;
}
#app{min-height:100%}
button{font:inherit;color:inherit;cursor:pointer}
input,select,textarea{font:inherit;color:inherit}
:focus-visible{outline:3px solid var(--gold);outline-offset:2px;border-radius:6px}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}

.wrap{max-width:880px;margin:0 auto;padding:20px 18px 70px}
.stack{display:flex;flex-direction:column;gap:14px}
.row{display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.grow{flex:1}
.muted{color:var(--muted);font-size:15px}
.small{font-size:14px}
h1,h2,h3{margin:0;font-weight:800}
h3{font-size:16.5px}
.hr{height:1px;background:var(--line);border:0;margin:6px 0}
.hidden{display:none!important}
.center{text-align:center}

/* buttons */
.btn{border:0;border-radius:13px;padding:13px 18px;font-weight:800;background:var(--ink);color:#fff;
  transition:transform .08s ease,box-shadow .18s ease,filter .18s ease;box-shadow:0 4px 0 0 var(--ink3)}
.btn:active{transform:translateY(2px);box-shadow:0 2px 0 0 var(--ink3)}
.btn.gold{background:var(--gold);color:var(--goldink);box-shadow:0 4px 0 0 #D9A317}
.btn.gold:active{box-shadow:0 2px 0 0 #D9A317}
.btn.ghost{background:transparent;border:1.5px solid var(--line);color:var(--text);box-shadow:none}
.btn.ghost:active{transform:translateY(1px)}
.btn.slim{padding:9px 14px;font-weight:700;font-size:14.5px;box-shadow:none;border-radius:11px}
.btn.slim:not(.ghost){background:var(--ink2)}
.btn.wide{width:100%;padding:16px;font-size:19px}
.btn[disabled]{opacity:.42;cursor:not-allowed;box-shadow:none}
.btn.danger{background:transparent;border:1.5px solid var(--bad);color:var(--bad);box-shadow:none}

.field{width:100%;padding:12px 14px;border:1.5px solid var(--line);border-radius:12px;background:var(--surface);transition:border-color .15s}
.field:focus{border-color:var(--c3)}
textarea.field{min-height:72px;resize:vertical}
label.lbl{font-size:13.5px;color:var(--muted);font-weight:700;display:block;margin-bottom:5px}
.card{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:18px;box-shadow:var(--shadow)}
.card.tight{padding:15px}
.card.flat{box-shadow:none}

/* home */
.hero{text-align:center;padding:22px 0 6px}
.mark{width:66px;height:66px;margin:0 auto 6px;display:block}
.brand{font-family:var(--display);font-size:clamp(46px,14vw,78px);line-height:1;letter-spacing:-.015em}
.brand.latin{letter-spacing:.06em;font-size:clamp(42px,13vw,74px)}
.tag{color:var(--muted);font-size:16.5px;margin-top:8px}
.codebox{font-family:var(--display);font-size:clamp(34px,11vw,52px);text-align:center;letter-spacing:.24em;
  padding:14px 10px 14px 0;border:2.5px dashed var(--line);border-radius:18px;background:var(--surface2);
  width:100%;text-transform:uppercase}
.codebox::placeholder{color:var(--line)}
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.mini{font-size:13px;color:var(--muted);text-align:center}
.feat{display:flex;gap:10px;align-items:flex-start;padding:9px 0}
.feat b{display:block;font-size:15px}
.feat .ic{font-size:20px;flex:0 0 auto;line-height:1.3}

/* stage */
.stage{position:fixed;inset:0;color:#fff;display:flex;flex-direction:column;overflow:hidden;
  padding:calc(13px + env(safe-area-inset-top,0px)) 16px calc(13px + env(safe-area-inset-bottom,0px));
  background:#11163A;
  background-image:radial-gradient(70vw 60vh at 50% -14%, #2A3382 0%, transparent 60%),
                   radial-gradient(50vw 40vh at 100% 110%, #3C2A74 0%, transparent 62%)}
.stage .top{display:flex;justify-content:space-between;align-items:center;gap:8px;flex:0 0 auto}
.stage .body{flex:1 1 auto;display:flex;flex-direction:column;justify-content:center;gap:16px;min-height:0}
.stage .foot{display:flex;justify-content:center;gap:10px;flex:0 0 auto;margin-top:10px;flex-wrap:wrap}
.pill{background:rgba(255,255,255,.13);border-radius:999px;padding:6px 14px;font-weight:700;font-size:14.5px}
.pill.gold{background:var(--gold);color:var(--goldink)}
.qtext{font-family:var(--display);font-size:clamp(23px,5vw,50px);line-height:1.22;text-align:center;
  text-wrap:balance;max-width:20ch;margin-inline:auto}
.bigcode{font-family:var(--display);font-size:clamp(54px,17vw,140px);line-height:1;letter-spacing:.1em;color:var(--gold)}
.timer{font-family:var(--display);font-size:clamp(30px,7vw,58px);line-height:1;color:var(--gold);min-width:2ch;text-align:center}
.timer.low{color:#FF7A8A;animation:pulse .6s ease-in-out infinite alternate}
@keyframes pulse{to{transform:scale(1.13)}}
.qrbox{background:#fff;padding:10px;border-radius:14px;line-height:0}
.qrbox img,.qrbox canvas{width:150px;height:150px}

.tiles{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.tiles.one{grid-template-columns:1fr}
.tile{border:0;border-radius:15px;padding:17px 15px;min-height:86px;color:#fff;text-align:start;
  display:flex;align-items:center;gap:12px;font-weight:800;font-size:clamp(16.5px,2.5vw,25px);
  box-shadow:inset 0 -4px 0 rgba(0,0,0,.18);transition:opacity .25s,transform .1s,box-shadow .2s}
.tile .glyph{font-size:1.2em;flex:0 0 auto;opacity:.92}
.tile .cnt{margin-inline-start:auto;font-size:.78em;opacity:.9;font-weight:700}
.tile .num{margin-inline-start:auto;background:rgba(0,0,0,.22);border-radius:8px;padding:2px 9px;font-size:.72em}
.t1{background:var(--c1)} .t2{background:var(--c2)} .t3{background:var(--c3)} .t4{background:var(--c4)}
.t5{background:#C2417F} .t6{background:#3E7BD6}
.tile.dim{opacity:.22} .tile.sel{box-shadow:inset 0 -4px 0 rgba(0,0,0,.18),0 0 0 4px #fff}
.tile.win{box-shadow:inset 0 -4px 0 rgba(0,0,0,.18),0 0 0 5px var(--gold),0 0 36px rgba(255,197,61,.45)}
.tile:active{transform:scale(.985)}

.chip{background:rgba(255,255,255,.14);border-radius:11px;padding:7px 13px;font-weight:700;font-size:15.5px}
.chip.new{animation:pop .35s cubic-bezier(.34,1.56,.64,1)}
@keyframes pop{from{transform:scale(.5);opacity:0}to{transform:scale(1);opacity:1}}
.players{display:flex;flex-wrap:wrap;gap:8px;justify-content:center;align-content:flex-start;overflow:auto;padding:4px}

.board{display:flex;flex-direction:column;gap:8px;max-width:640px;margin:0 auto;width:100%}
.brow{display:flex;align-items:center;gap:11px;background:rgba(255,255,255,.1);border-radius:13px;padding:11px 14px;
  animation:slide .35s ease both}
@keyframes slide{from{opacity:0;transform:translateY(8px)}}
.brow.me{background:var(--gold);color:var(--goldink)}
.brow .rank{font-family:var(--display);font-size:21px;width:1.5em;text-align:center;opacity:.78}
.brow .nm{flex:1;font-weight:700;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.brow .sc{font-family:var(--display);font-size:20px}
.delta{font-size:12.5px;opacity:.8}
.podium{display:flex;align-items:flex-end;justify-content:center;gap:10px;max-width:520px;margin:0 auto;width:100%}
.pod{flex:1;text-align:center}
.pod .bar{border-radius:14px 14px 0 0;background:rgba(255,255,255,.15);display:flex;align-items:flex-end;
  justify-content:center;padding-bottom:9px;font-family:var(--display);font-size:27px;animation:grow .5s ease both}
@keyframes grow{from{height:0!important}}
.pod.p1 .bar{background:var(--gold);color:var(--goldink);height:148px}
.pod.p2 .bar{height:108px} .pod.p3 .bar{height:80px}
.pod .who{margin-top:8px;font-weight:800;font-size:15px}
.reactions{position:fixed;inset-block-end:0;inset-inline:0;height:46vh;pointer-events:none;overflow:hidden;z-index:50}
.react{position:absolute;bottom:-40px;font-size:33px;animation:float 3s linear forwards}
@keyframes float{to{transform:translateY(-46vh) rotate(16deg);opacity:0}}

/* player */
.play{min-height:100%;display:flex;flex-direction:column;gap:12px;
  padding:calc(12px + env(safe-area-inset-top,0px)) 14px calc(12px + env(safe-area-inset-bottom,0px))}
.pbar{display:flex;justify-content:space-between;align-items:center;gap:8px;flex:0 0 auto}
.score{font-family:var(--display);font-size:21px}
.pq{font-size:18px;font-weight:700;line-height:1.35;text-wrap:balance}
.feedback{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;
  gap:10px;border-radius:20px;padding:26px 18px;color:#fff;animation:pop .3s cubic-bezier(.34,1.56,.64,1)}
.feedback.good{background:linear-gradient(160deg,#17B7A4,#0B8577)}
.feedback.bad{background:linear-gradient(160deg,#EE5468,#C22438)}
.feedback.neutral{background:linear-gradient(160deg,#2B3573,#1B2150)}
.feedback .big{font-family:var(--display);font-size:clamp(28px,9vw,44px);line-height:1.1}
.streakbar{align-self:center;background:linear-gradient(90deg,#E5394F,#EA8B07);color:#fff;
  font-weight:800;font-size:15px;padding:8px 16px;border-radius:999px;box-shadow:0 4px 14px rgba(229,57,79,.35);
  animation:pop .3s cubic-bezier(.34,1.56,.64,1)}
.streakbar.gold{background:linear-gradient(90deg,#FFC53D,#F0A81C);color:var(--goldink);box-shadow:0 4px 14px rgba(240,168,28,.4)}
.emojibar{display:flex;gap:8px;justify-content:center;flex:0 0 auto}
.emojibar button{background:var(--surface);border:1.5px solid var(--line);border-radius:13px;font-size:23px;padding:6px 12px;line-height:1}
.emojibar button:active{transform:scale(.9)}

/* editor */
.qcard{background:var(--surface);border:1px solid var(--line);border-inline-start:6px solid var(--ink2);
  border-radius:15px;padding:15px;display:flex;flex-direction:column;gap:10px;box-shadow:var(--shadow)}
.qhead{display:flex;align-items:center;gap:7px}
.qnum{font-family:var(--display);font-size:19px;color:var(--muted);min-width:1.5em}
.opts{display:flex;flex-direction:column;gap:8px}
.opt{display:flex;align-items:center;gap:8px}
.opt .glyph{width:1.3em;text-align:center;font-size:19px}
.g1{color:var(--c1)} .g2{color:var(--c2)} .g3{color:var(--c3)} .g4{color:var(--c4)} .g5{color:#C2417F} .g6{color:#3E7BD6}
.tick{border:1.5px solid var(--line);background:var(--surface);border-radius:10px;padding:7px 11px;font-size:13.5px;font-weight:800;white-space:nowrap}
.tick.on{background:var(--ok);border-color:var(--ok);color:#fff}
.seg{display:flex;border:1.5px solid var(--line);border-radius:12px;overflow:hidden}
.seg button{background:transparent;border:0;padding:10px 12px;font-size:14px;font-weight:700;flex:1;white-space:nowrap}
.seg button.on{background:var(--ink);color:#fff}
.toggle{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:11px 0;border-bottom:1px solid var(--line)}
.toggle:last-child{border-bottom:0}
.toggle .t{font-size:15.5px;font-weight:600}
.toggle .d{font-size:13px;color:var(--muted)}
.sw{width:50px;height:29px;border-radius:999px;background:var(--line);border:0;position:relative;flex:0 0 auto;transition:background .18s}
.sw::after{content:"";position:absolute;top:3px;inset-inline-end:3px;width:23px;height:23px;border-radius:50%;background:#fff;transition:inset-inline-end .18s}
.sw.on{background:var(--ok)} .sw.on::after{inset-inline-end:24px}
.banner{background:var(--ink2);color:#fff;border-radius:13px;padding:11px 14px;font-size:14.5px}
.banner.warn{background:#7A5B00;color:#FFEBB8}
.toast{position:fixed;inset-inline:0;inset-block-end:calc(20px + env(safe-area-inset-bottom,0px));margin:auto;
  width:max-content;max-width:88%;background:var(--ink);color:#fff;padding:11px 18px;border-radius:999px;
  font-weight:700;z-index:99;box-shadow:0 10px 30px rgba(0,0,0,.3);text-align:center}
.tbl{width:100%;border-collapse:collapse;font-size:14.5px}
.tbl th,.tbl td{padding:9px 8px;border-bottom:1px solid var(--line);text-align:start}
.tbl th{color:var(--muted);font-size:13px;font-weight:700}
.bar{height:7px;border-radius:999px;background:var(--line);overflow:hidden}
.bar i{display:block;height:100%;background:var(--ok)}