/* ── pollen bomb ─────────────────────────────────────────── */
:root{
  --bg:#07070c;
  --panel:rgba(255,255,255,.035);
  --line:rgba(255,255,255,.09);
  --txt:#e9e9f2;
  --dim:#8b8ba3;
  --red:#ff3b3b;
  --orange:#ff9d2f;
  --green:#38e08a;
  --cyan:#65d1ff;
  --mono:ui-monospace,"Cascadia Mono","Cascadia Code",Consolas,"Roboto Mono",monospace;
}

*{box-sizing:border-box}
html,body{margin:0;padding:0}

body{
  min-height:100vh;
  color:var(--txt);
  background:var(--bg);
  font:15px/1.55 system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  background-image:
    radial-gradient(900px 520px at 85% -10%, rgba(255,59,59,.17), transparent 62%),
    radial-gradient(760px 460px at 0% 110%, rgba(101,209,255,.10), transparent 60%);
  background-attachment:fixed;
}

.hidden{display:none !important}
a{color:var(--cyan)}
code{font-family:var(--mono);font-size:.92em;background:rgba(255,255,255,.07);padding:1px 5px;border-radius:5px}

/* ── header ── */
.topbar{
  display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;
  padding:16px clamp(16px,4vw,40px);
}
.brand{font:800 20px/1 var(--mono);letter-spacing:1px}
.brand span{color:var(--red);text-shadow:0 0 22px rgba(255,59,59,.6)}
.top-right{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.auth{display:flex;align-items:center;gap:10px;position:relative}
.authed{display:flex;align-items:center;gap:8px}
.who{font:12px var(--mono);color:var(--green)}
.pill{
  font:12px var(--mono);padding:5px 11px;border-radius:99px;
  background:rgba(255,214,102,.12);border:1px solid rgba(255,214,102,.35);color:#ffd666;
}
.icon-btn{
  background:none;border:1px solid var(--line);border-radius:10px;
  width:34px;height:34px;cursor:pointer;font-size:15px;color:var(--txt);
}
.icon-btn:hover{border-color:rgba(255,255,255,.3)}

details summary{cursor:pointer;color:var(--dim);font-size:12px;list-style:none}
details summary::-webkit-details-marker{display:none}
details summary:hover{color:var(--txt)}
.dev-row{display:flex;gap:6px;margin-top:8px}
.dev-row input{
  flex:1;min-width:180px;background:#0b0b13;border:1px solid var(--line);border-radius:8px;
  color:var(--txt);padding:7px 10px;font-family:var(--mono);font-size:12px;
}
.warn{color:#ffb4b4;font-size:12px;max-width:340px;margin:8px 0 0}
#dev-details{position:relative}

/* ── buttons ── */
.btn{
  background:#15151f;color:var(--txt);border:1px solid var(--line);
  border-radius:11px;padding:10px 16px;cursor:pointer;
  font:600 14px/1 system-ui;transition:.15s;
}
.btn:hover{border-color:rgba(255,255,255,.32);transform:translateY(-1px)}
.btn.ghost{background:transparent}
.btn.tiny{padding:7px 11px;font-size:12px;border-radius:9px}
.btn.danger{background:rgba(255,59,59,.12);border-color:rgba(255,59,59,.5);color:#ff8f8f}
.btn.danger:hover{background:rgba(255,59,59,.22)}
.btn.arm{
  display:block;margin:26px auto 0;padding:17px 42px;font-size:19px;font-weight:800;
  letter-spacing:.5px;border:none;border-radius:14px;color:#1a0600;
  background:linear-gradient(135deg,#ffd166,#ff9d2f 45%,#ff3b3b);
  box-shadow:0 10px 40px rgba(255,90,40,.4), inset 0 1px 0 rgba(255,255,255,.6);
  animation:armGlow 2.2s ease-in-out infinite;
}
.btn.arm:hover{transform:translateY(-2px) scale(1.02)}
.btn.arm:active{transform:scale(.98)}
.btn:disabled{opacity:.5;cursor:not-allowed}
@keyframes armGlow{
  0%,100%{box-shadow:0 10px 40px rgba(255,90,40,.35), inset 0 1px 0 rgba(255,255,255,.6)}
  50%{box-shadow:0 10px 64px rgba(255,60,60,.65), inset 0 1px 0 rgba(255,255,255,.6)}
}
.nudge{animation:nudge .5s}
@keyframes nudge{0%,100%{transform:translateX(0)}20%,60%{transform:translateX(-7px)}40%,80%{transform:translateX(7px)}}

/* ── gate (pre-connect) ── */
.gate{text-align:center}
.gate .lede{margin-left:auto;margin-right:auto}
.gate .how{text-align:left;margin-top:34px}
.dash-title{margin:0 0 24px;font-size:clamp(22px,3.4vw,32px);letter-spacing:-.6px;font-weight:850}

/* ── setup panel ── */
main{padding:8px clamp(16px,4vw,40px) 40px;max-width:1040px;margin:0 auto}
.panel{
  background:var(--panel);border:1px solid var(--line);border-radius:22px;
  padding:clamp(20px,4vw,42px);backdrop-filter:blur(8px);
}
h1{
  margin:0 0 10px;font-size:clamp(30px,5.4vw,54px);line-height:1.06;
  letter-spacing:-1.6px;font-weight:850;
}
h1 em{font-style:normal;color:var(--orange);text-shadow:0 0 30px rgba(255,157,47,.4)}
.lede{color:var(--dim);max-width:62ch;margin:0 0 30px;font-size:16px}

.controls{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:26px}
.ctl h2{
  margin:0 0 11px;font:700 12px/1 var(--mono);letter-spacing:2px;
  text-transform:uppercase;color:var(--dim);
}
.chips{display:flex;flex-wrap:wrap;gap:8px}
.chip{
  background:#12121c;border:1px solid var(--line);color:var(--txt);
  padding:8px 13px;border-radius:10px;cursor:pointer;font:600 13px/1 system-ui;transition:.14s;
}
.chip:hover{border-color:rgba(255,255,255,.3)}
.chip.active{
  border-color:var(--red);color:#ffd9d9;background:rgba(255,59,59,.14);
  box-shadow:0 0 18px rgba(255,59,59,.28);
}
textarea,input,select{
  width:100%;background:#0b0b13;border:1px solid var(--line);border-radius:11px;
  color:var(--txt);padding:11px 13px;font-family:var(--mono);font-size:13.5px;
}
textarea{resize:vertical;margin-top:10px}
textarea:focus,input:focus,select:focus{outline:none;border-color:rgba(255,157,47,.6)}
select{cursor:pointer}
.custom-fuse{display:flex;align-items:center;gap:8px;margin-top:10px;color:var(--dim);font-size:13px}
.custom-fuse input{width:90px;margin:0}
.hint{color:var(--dim);font-size:12.5px;margin:9px 0 0}
.hint.center{text-align:center}
.how{margin-top:30px;border-top:1px dashed var(--line);padding-top:16px;color:var(--dim);font-size:13.5px}
.how ol{padding-left:20px}
.how li{margin:5px 0}
.redirect{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.redirect code{word-break:break-all}

/* ── arena ── */
.arena-top{display:flex;align-items:center;gap:20px;flex-wrap:wrap}
.timer{
  font:700 clamp(46px,9vw,84px)/1 var(--mono);letter-spacing:-3px;
  font-variant-numeric:tabular-nums;color:var(--orange);
  text-shadow:0 0 34px rgba(255,157,47,.4);transition:color .2s;
}
.timer.danger{color:var(--red);animation:pulse .48s steps(2) infinite;text-shadow:0 0 40px rgba(255,59,59,.75)}
@keyframes pulse{50%{opacity:.45}}
.arena-meta{flex:1;min-width:200px}
.ot-badge{
  display:inline-block;margin-bottom:6px;padding:4px 10px;border-radius:99px;
  font:700 11px/1 var(--mono);letter-spacing:1px;color:#ffd9b0;
  background:rgba(255,157,47,.16);border:1px solid rgba(255,157,47,.6);
  box-shadow:0 0 18px rgba(255,157,47,.35);animation:pulse .5s steps(2) infinite;
}
.arena-task{font-weight:700;font-size:15px}
.arena-model{font:12px var(--mono);color:var(--dim);margin-top:3px}

.fuse-track{
  position:relative;height:15px;margin-top:16px;border-radius:99px;
  background:#14141e;border:1px solid var(--line);
}
.fuse-fill{
  position:relative;height:100%;width:100%;border-radius:99px;
  background:linear-gradient(90deg,#ff2b2b,#ff9d2f);
  box-shadow:0 0 20px rgba(255,120,40,.55);transition:width .06s linear;
}
.spark{
  position:absolute;right:-8px;top:50%;width:17px;height:17px;
  transform:translateY(-50%);border-radius:50%;
  background:radial-gradient(circle,#fff 0%,#ffd166 42%,rgba(255,157,47,0) 72%);
  animation:sparkle .3s infinite alternate;
}
@keyframes sparkle{from{transform:translateY(-50%) scale(.75)}to{transform:translateY(-50%) scale(1.3)}}

/* ── thinking (reasoning) panel ── */
.thinking{
  display:flex;gap:13px;align-items:flex-start;
  margin-top:16px;padding:12px 15px;
  background:rgba(255,255,255,.035);border:1px solid var(--line);border-radius:14px;
  transition:opacity .45s ease,transform .45s ease;
}
.thinking.fade{opacity:0;transform:translateY(-7px)}
.bulb{
  width:26px;height:26px;flex:none;margin-top:2px;
  filter:drop-shadow(0 0 5px rgba(255,255,255,.55));
}
.thinking.on .bulb{animation:bulbPulse 1.5s ease-in-out infinite}
.thinking.on .ray{animation:rayBlink 1.5s ease-in-out infinite}
@keyframes bulbPulse{50%{filter:drop-shadow(0 0 13px #fff)}}
@keyframes rayBlink{0%,100%{opacity:.35}50%{opacity:1}}
.think-body{flex:1;min-width:0}
.think-label{font:600 13px/1 var(--mono);color:#fff;letter-spacing:.4px}
.tdots{animation:blink 1.1s steps(3) infinite}
.think-text{
  display:flex;align-items:flex-end;
  height:calc(5 * 1.45em);margin-top:6px;overflow:hidden;
  font:12.5px/1.45 var(--mono);color:#b9b9cd;
  -webkit-mask-image:linear-gradient(to bottom,transparent 0,#000 26%);
  mask-image:linear-gradient(to bottom,transparent 0,#000 26%);
}
#think-text{flex:1;min-width:0;white-space:pre-wrap;word-break:break-word}

.terminal{
  margin:16px 0 0;height:min(46vh,430px);overflow:auto;
  background:#0a0a11;border:1px solid var(--line);border-radius:14px;
  padding:16px 18px;font:13.5px/1.55 var(--mono);color:#ffcf9b;
  white-space:pre-wrap;word-break:break-word;
}
#stream:empty::before{content:"⏳ waiting for the model…";color:var(--dim)}
#stream::after{content:"▮";color:var(--orange);animation:blink 1s steps(2) infinite}
@keyframes blink{50%{opacity:0}}

/* ── overlay ── */
.overlay{
  position:fixed;inset:0;z-index:60;display:grid;place-items:center;padding:24px;
  background:radial-gradient(760px 440px at 50% 38%, rgba(255,0,0,.24), rgba(0,0,0,.95));
  backdrop-filter:blur(7px);animation:fadeIn .22s ease-out;
  overflow:auto;
}
.overlay.win{background:radial-gradient(760px 440px at 50% 38%, rgba(0,255,150,.18), rgba(0,0,0,.95))}
@keyframes fadeIn{from{opacity:0}to{opacity:1}}
.overlay-card{max-width:760px;width:100%;text-align:center;padding:20px 0}
.big{
  font:900 clamp(52px,13vw,124px)/0.95 var(--mono);letter-spacing:-4px;color:#fff;
  text-shadow:0 0 46px rgba(255,59,59,.9),0 0 110px rgba(255,59,59,.5);
  animation:glitch 2.6s infinite;
}
.overlay.win .big{
  text-shadow:0 0 46px rgba(56,224,138,.9),0 0 110px rgba(56,224,138,.5);animation:none;
}
@keyframes glitch{
  0%,88%,100%{transform:translate(0);clip-path:none}
  90%{transform:translate(-4px,1px);clip-path:inset(20% 0 55% 0)}
  92%{transform:translate(5px,-2px);clip-path:inset(62% 0 8% 0)}
  94%{transform:translate(-3px,2px);clip-path:inset(5% 0 82% 0)}
}
.sub{margin-top:14px;font-size:clamp(15px,2.4vw,20px);color:#ffd0d0;font-weight:600}
.overlay.win .sub{color:#b8ffd9}
.meta{margin-top:8px;font:12.5px var(--mono);color:var(--dim);word-break:break-word}

.lastwords{
  margin:26px auto 0;max-width:640px;text-align:left;
  background:#0a0a11;border:1px solid rgba(255,59,59,.35);border-radius:14px;padding:14px 16px;
  box-shadow:0 0 40px rgba(255,59,59,.18);
}
.lw-label{font:700 11px var(--mono);letter-spacing:2px;color:var(--red);margin-bottom:8px}
.lw-text{
  font:13.5px/1.6 var(--mono);color:#ffcf9b;white-space:pre-wrap;word-break:break-word;
  min-height:44px;max-height:32vh;overflow:auto;
}
.lw-text:empty::before{content:"the model is writing its will…";color:var(--dim)}

.overlay-actions{display:flex;justify-content:center;gap:10px;margin-top:26px;flex-wrap:wrap}

/* ── fx ── */
.particle{
  position:fixed;left:50%;top:44%;width:9px;height:9px;border-radius:50%;
  background:var(--c,#ff3b3b);pointer-events:none;z-index:70;
  animation:fly 1.05s cubic-bezier(.15,.7,.35,1) forwards;
}
@keyframes fly{
  from{transform:translate(-50%,-50%) scale(1);opacity:1}
  to{transform:translate(calc(-50% + var(--tx)),calc(-50% + var(--ty))) scale(.1);opacity:0}
}
.shaking{animation:shake .55s}
@keyframes shake{
  10%,90%{transform:translate(-2px,1px)}
  30%,70%{transform:translate(6px,-3px)}
  50%{transform:translate(-7px,2px)}
  40%,60%{transform:translate(4px,4px)}
}

#toast{
  position:fixed;left:50%;bottom:26px;transform:translateX(-50%);
  background:#15151f;border:1px solid rgba(255,157,47,.5);color:#ffd9b0;
  padding:12px 18px;border-radius:12px;font-size:13.5px;z-index:90;max-width:min(90vw,540px);
  box-shadow:0 14px 44px rgba(0,0,0,.6);animation:fadeIn .2s;
}
#toast.err{border-color:rgba(255,59,59,.6);color:#ffb4b4}
#toast.ok{border-color:rgba(56,224,138,.6);color:#b8ffd9}

footer{
  display:flex;justify-content:space-between;gap:14px;flex-wrap:wrap;
  padding:14px clamp(16px,4vw,40px) 26px;color:var(--dim);font:12px var(--mono);
}
.credit{opacity:.7}

@media (max-width:620px){
  .timer{font-size:52px}
  .arena-meta{order:3;flex-basis:100%}
}

/* ── toggles (modes) ── */
.toggles{margin-top:26px;display:flex;flex-direction:column;gap:14px;max-width:660px}
.toggle-row{display:flex;align-items:flex-start;gap:14px;text-align:left}
.toggle{
  position:relative;flex:none;width:54px;height:30px;margin-top:2px;border-radius:99px;cursor:pointer;
  background:#15151f;border:1px solid var(--line);transition:.2s;padding:0;
}
.toggle .knob{
  position:absolute;top:3px;left:3px;width:22px;height:22px;border-radius:50%;
  background:#6b6b80;transition:.2s;
}
.toggle[aria-checked="true"]{background:rgba(255,59,59,.22);border-color:rgba(255,59,59,.65);box-shadow:0 0 20px rgba(255,59,59,.35)}
.toggle[aria-checked="true"] .knob{left:27px;background:#ff5c5c;box-shadow:0 0 12px rgba(255,92,92,.9)}
.toggle-text strong{font-size:14px;display:block}
.toggle-text span{display:block;color:var(--dim);font-size:12.5px;line-height:1.45}
.toggle-text code{font-size:11.5px}
.custom-fuse input{width:64px;text-align:center}

/* ── arena grid: chat ui + code ui (computer mcp workspace) ── */
.arena-grid{display:grid;grid-template-columns:1fr;gap:16px;margin-top:16px;align-items:start}
.arena-grid.split{grid-template-columns:minmax(250px,36%) 1fr}
@media (max-width:860px){.arena-grid.split{grid-template-columns:1fr}}

.chat-panel{
  display:flex;flex-direction:column;min-width:0;
  background:#0a0a11;border:1px solid var(--line);border-radius:14px;
  height:min(46vh,430px);
}
.chat-head{padding:11px 14px;border-bottom:1px solid var(--line);font:700 12px var(--mono);letter-spacing:1.5px;color:var(--dim)}
.chat-sub{font-weight:400;letter-spacing:0;opacity:.7;margin-left:6px}
.chat-log{flex:1;overflow-y:auto;padding:12px;display:flex;flex-direction:column;gap:9px;min-height:0}
.chat-empty{color:var(--dim);font:12.5px var(--mono);opacity:.75}
.bubble{
  max-width:94%;padding:8px 11px;border-radius:12px;
  font:12.5px/1.5 var(--mono);white-space:pre-wrap;word-break:break-word;
}
.bubble.ai{align-self:flex-start;background:rgba(157,255,208,.07);border:1px solid rgba(157,255,208,.3);color:#d7ffec}
.bubble.you{align-self:flex-end;background:rgba(111,76,255,.16);border:1px solid rgba(111,76,255,.5);color:#e8e2ff}

/* question card — the bomb is frozen */
.ask-card{
  margin:0 12px 12px;padding:12px 13px;border-radius:14px;
  border:1px solid rgba(101,209,255,.65);background:rgba(101,209,255,.08);
  box-shadow:0 0 26px rgba(101,209,255,.22);animation:fadeIn .25s ease-out;
}
.ask-tag{font:700 10.5px var(--mono);letter-spacing:1.6px;color:#a9e8ff;margin-bottom:8px}
.ask-q{font:600 13px/1.5 var(--mono);color:#eaf7ff;margin-bottom:10px;white-space:pre-wrap}
.ask-opts{display:flex;flex-direction:column;gap:7px}
.ask-opt{
  text-align:left;background:#101019;border:1px solid rgba(101,209,255,.35);color:var(--txt);
  padding:8px 11px;border-radius:9px;cursor:pointer;font:600 12.5px/1.35 system-ui;transition:.14s;
}
.ask-opt:hover{border-color:var(--cyan);background:rgba(101,209,255,.14);transform:translateX(2px)}
.ask-free{display:flex;gap:7px;margin-top:8px}
.ask-free input{flex:1;min-width:0;width:auto;padding:7px 10px;font-size:12.5px}
.fz-badge{
  display:inline-block;margin:0 6px 6px 0;padding:4px 10px;border-radius:99px;
  font:700 11px/1 var(--mono);letter-spacing:1px;color:#cdefff;
  background:rgba(101,209,255,.15);border:1px solid rgba(101,209,255,.6);
  box-shadow:0 0 18px rgba(101,209,255,.35);animation:pulse .8s steps(2) infinite;
}
.timer.frozen{color:var(--cyan);text-shadow:0 0 34px rgba(101,209,255,.6);animation:frozenGlow 1.5s ease-in-out infinite}
@keyframes frozenGlow{50%{text-shadow:0 0 50px rgba(101,209,255,.95)}}

/* file tabs (multi-file code ui) */
.file-tabs{display:flex;gap:7px;flex-wrap:wrap;margin-top:16px}
.file-tab{
  background:#101019;border:1px solid var(--line);color:var(--dim);
  padding:6px 12px;border-radius:9px;cursor:pointer;font:600 12px var(--mono);transition:.14s;
}
.file-tab:hover{border-color:rgba(255,255,255,.3);color:var(--txt)}
.file-tab.active{
  color:#eafff4;border-color:rgba(157,255,208,.55);background:rgba(157,255,208,.1);
  box-shadow:0 0 14px rgba(157,255,208,.18);
}
.col-code{min-width:0}
.col-code .terminal{margin-top:14px}

/* agony: late code box in the overlay */
.latecode{border-color:rgba(255,157,47,.5);box-shadow:0 0 40px rgba(255,157,47,.16)}
.latecode .lw-label{color:var(--orange)}
.latecode .lw-text:empty::before{content:"still typing…"}

/* ── mcp servers / tools picker ── */
.mcp-chips{display:flex;flex-wrap:wrap;gap:6px;margin-top:9px}
.tool-chips{display:flex;flex-wrap:wrap;gap:6px;margin-top:6px}
.mcp-chip{
  background:#101019;border:1px solid var(--line);color:var(--dim);
  padding:4px 10px;border-radius:8px;cursor:pointer;font:600 11.5px var(--mono);transition:.14s;
}
.mcp-chip:hover{border-color:rgba(255,255,255,.3);color:var(--txt)}
.mcp-chip.on{
  color:#dcf4ff;border-color:rgba(101,209,255,.55);background:rgba(101,209,255,.13);
  box-shadow:0 0 12px rgba(101,209,255,.18);
}
.col-head{font:700 11px var(--mono);letter-spacing:1.5px;color:var(--dim);margin:0 0 10px}

/* ── mcp tool activity ── */
.tool-panel{
  margin-top:14px;padding:11px 13px;border-radius:12px;
  border:1px solid rgba(101,209,255,.4);background:rgba(101,209,255,.06);
}
.tool-panel.err{border-color:rgba(255,59,59,.55);background:rgba(255,59,59,.07)}
.tool-head{font:700 10.5px var(--mono);letter-spacing:1.4px;color:#a9e8ff;margin-bottom:7px}
.tool-panel.err .tool-head{color:#ffb4b4}
.tool-cmd{font:12.5px/1.5 var(--mono);color:#eaf7ff;white-space:pre-wrap;word-break:break-word}
.tool-out{
  margin:9px 0 0;max-height:170px;overflow:auto;
  font:12px/1.5 var(--mono);color:#9fd8c0;white-space:pre-wrap;word-break:break-word;
}
.tool-out:empty::before{content:"running…";color:var(--dim)}