/* REROLL for Roblox: what the spoofer page does not have. Shared parts live in site.css. */

/* results line under the hero: same cells as the identity line, a number instead of a serial */
.ids.stats .id{cursor:default;min-width:0}
.ids.stats .n,.ids.stats .s{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ids.stats .v{margin-top:12px;font:700 clamp(18px,1.85vw,26px)/1 var(--wide);letter-spacing:.01em;min-height:26px;cursor:default;font-variant-numeric:tabular-nums;overflow-wrap:normal;white-space:nowrap}
.ids.stats .v i{font-style:normal;font-size:14px;color:var(--acid-ink);margin-left:2px}
.dice svg path{fill:currentColor;stroke:none}
.rbx .dice:hover svg,.rbx .dice.spin svg{transform:none}
.rbx .dice.spin svg{animation:beat .6s var(--ease) 3}
@keyframes beat{50%{transform:scale(.8)}}

/* the test line: function names instead of bytes */
.dump .bytes.fn{gap:18px}
.dump .bytes.fn .b{padding:5px 8px;letter-spacing:.04em;text-transform:none}
.dump .bytes.fn .b::after{content:" ✓";color:transparent}
.dump .bytes.fn .b.ok::after{color:var(--acid-ink)}
.dump .bytes.fn .b.no{color:#c4422f}
.dump .bytes.fn .b.no::after{content:" ×";color:#c4422f}

/* test cards */
.tests{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
.test{
  position:relative;padding:26px 26px 24px;border:1.5px solid var(--line);border-radius:22px;display:flex;flex-direction:column;min-width:0;
  transition:border-color .5s var(--ease),transform .5s var(--ease),background-color .5s var(--ease);
}
.test:hover{border-color:var(--ink);transform:translateY(-2px);background:#fff}
.test.main{border-color:var(--ink);background:#fff}
.test .k{font:500 10.5px/1 var(--mono);letter-spacing:.2em;text-transform:uppercase;color:var(--muted)}
.test h3{margin-top:10px;font-size:18px}
.test .big{margin-top:26px;font:700 64px/.9 var(--wide);letter-spacing:-.01em;font-variant-numeric:tabular-nums;display:flex;align-items:flex-start}
.test .big i{font-style:normal;font-size:24px;color:var(--acid-ink);margin:6px 0 0 6px}
.test .meter{margin-top:20px;height:6px;border-radius:3px;background:var(--line);overflow:hidden}
.test .meter i{display:block;height:100%;width:0;background:var(--acid);border-radius:3px;transition:width 1.4s var(--ease)}
.rv.in .test .meter i{width:var(--p)}
.test .det{margin-top:14px;font:400 12px/1.6 var(--mono);color:var(--muted)}
.test .det b{font-weight:500;color:var(--ink)}
.test .miss{margin-top:18px;font:400 11.5px/1.6 var(--mono);color:var(--muted)}
.test .miss span{display:inline-block;margin:6px 6px 0 0;padding:3px 8px;border-radius:6px;border:1px solid var(--line);color:var(--ink2)}
a.inl{border-bottom:1px solid var(--dim);transition:border-color .4s var(--ease)}
a.inl:hover{border-color:var(--ink)}
#app,#features,#hub,#tests,#compare,#steps,#faq,#download{scroll-margin-top:12px}

/* script hub */
.hubbar{display:flex;align-items:center;gap:18px;flex-wrap:wrap;margin-bottom:18px}
.search{display:flex;align-items:center;gap:10px;height:44px;width:300px;padding:0 14px;border:1.5px solid var(--ink);border-radius:12px;background:#fff;cursor:text}
.search svg{width:16px;height:16px;fill:none;stroke:var(--muted);stroke-width:2;stroke-linecap:round;flex:none}
.search input{flex:1;min-width:0;border:0;outline:0;background:transparent;font:500 13px/1 var(--mono);color:var(--ink);letter-spacing:.02em}
.search input::placeholder{color:var(--dim)}
.search input::-webkit-search-cancel-button{opacity:.5}
.search:focus-within{box-shadow:0 0 0 4px rgba(185,255,30,.35)}
.hubbar .chips{gap:8px}
.hubgrid{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;min-height:212px}
.game{
  position:relative;display:flex;flex-direction:column;gap:14px;padding:18px 18px 16px;border:1.5px solid var(--line);border-radius:18px;background:transparent;min-width:0;
  transition:border-color .45s var(--ease),transform .45s var(--ease),background-color .45s var(--ease);
}
.game:hover{border-color:var(--ink);transform:translateY(-2px);background:#fff}
.game .gtop{display:flex;align-items:center;gap:12px;min-width:0}
.game .mono{width:40px;height:40px;border-radius:11px;background:var(--ink);color:var(--acid);display:grid;place-items:center;font:700 13px/1 var(--wide);letter-spacing:.02em;flex:none}
.game h3{font-size:15.5px;line-height:1.25;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.game .cat{font:500 10.5px/1 var(--mono);letter-spacing:.16em;text-transform:uppercase;color:var(--muted);margin-top:5px}
.game .feat{font:400 12px/1.55 var(--mono);color:var(--muted);min-height:37px}
.game .open{align-self:flex-start;height:32px;padding:0 12px;border-radius:9px;border:1.5px solid var(--ink);font:600 10.5px/1 var(--mono);letter-spacing:.16em;text-transform:uppercase;display:inline-flex;align-items:center;gap:8px;transition:background-color .4s var(--ease),color .4s var(--ease)}
.game .open svg{width:12px;height:12px;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round;transition:transform .4s var(--ease)}
.game .open:hover{background:var(--ink);color:#fff}
.game .open:hover svg{transform:translateX(3px)}
.game.sent .open{background:var(--acid);border-color:var(--acid);color:var(--ink)}
.hubempty{grid-column:1/-1;padding:40px 0;text-align:center;font:400 13px/1.6 var(--mono);color:var(--muted)}

/* after-download sheet */
.sheet{position:fixed;inset:0;z-index:80;display:grid;place-items:center;padding:24px;background:rgba(13,14,11,.32);backdrop-filter:blur(6px);opacity:0;transition:opacity .35s var(--ease)}
.sheet.on{opacity:1}
.sheet[hidden]{display:none}
.sheet-card{position:relative;width:min(560px,100%);border:1.5px solid var(--ink);border-radius:24px;background:var(--paper);padding:34px 34px 30px;transform:translateY(14px);transition:transform .5s var(--ease)}
.sheet.on .sheet-card{transform:none}
.sheet-card::before{content:"";position:absolute;left:50%;top:-1.5px;width:1.5px;height:10px;background:var(--ink);transform:translateX(-50%)}
.sheet-card .k{font:500 11px/1 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
.sheet-card .k .sl{color:var(--dim);margin:0 6px}
.sheet-card h3{margin-top:12px;font:700 24px/1.15 var(--wide);letter-spacing:.02em;text-transform:uppercase}
.sheet-steps{list-style:none;margin:24px 0 26px;padding:0;counter-reset:s;display:flex;flex-direction:column;gap:14px}
.sheet-steps li{counter-increment:s;display:grid;grid-template-columns:34px 1fr;column-gap:14px;align-items:start}
.sheet-steps li::before{content:counter(s);grid-row:1/3;width:34px;height:34px;border-radius:10px;background:var(--ink);color:var(--acid);display:grid;place-items:center;font:700 13px/1 var(--wide)}
.sheet-steps b{font:600 15px/1.3 var(--sans)}
.sheet-steps span{font:400 12.5px/1.55 var(--mono);color:var(--muted);margin-top:3px}
.sheet-act{display:flex;gap:12px;flex-wrap:wrap}
.sheet-x{position:absolute;right:16px;top:16px;width:36px;height:36px;border-radius:10px;display:grid;place-items:center;transition:background-color .4s var(--ease)}
.sheet-x:hover{background:rgba(13,14,11,.07)}
.sheet-x svg{width:16px;height:16px;fill:none;stroke:var(--ink);stroke-width:2;stroke-linecap:round}

@media (max-width:1240px){.hubgrid{grid-template-columns:repeat(3,1fr)}}
@media (max-width:1000px){.tests{grid-template-columns:repeat(2,1fr)}.hubgrid{grid-template-columns:repeat(2,1fr)}.search{width:100%}}
@media (max-width:1000px){.ids.stats .v{font-size:24px}}
@media (max-width:640px){.tests{grid-template-columns:1fr}.ids.stats .v{font-size:22px}.hubgrid{grid-template-columns:1fr}.sheet-card{padding:28px 22px 24px}.sheet-card h3{font-size:20px}}
.rbx .cmp{grid-template-columns:1.25fr .9fr 1.6fr;min-width:620px}
.hubmore{margin-top:14px;width:100%;justify-content:center}
.hubmore[hidden],.game[hidden]{display:none}
.swipe{display:none}
@media (max-width:820px){
  .rbx .cmpwrap{-webkit-mask-image:linear-gradient(90deg,#000 82%,transparent);mask-image:linear-gradient(90deg,#000 82%,transparent)}
  .rbx .cmpwrap.end{-webkit-mask-image:none;mask-image:none}
  .swipe{display:block;margin-top:12px;font:500 10.5px/1 var(--mono);letter-spacing:.16em;text-transform:uppercase;color:var(--muted)}
}
@media (max-width:640px){
  .hubbar .chips{flex-wrap:nowrap;overflow-x:auto;width:100%;scrollbar-width:none;-webkit-mask-image:linear-gradient(90deg,#000 85%,transparent);mask-image:linear-gradient(90deg,#000 85%,transparent)}
  .hubbar .chips::-webkit-scrollbar{display:none}
  .hubbar .chip{flex:none}
}