/* iQuit Employee Badge page (/badge). Builds on style.css. */
.bhero{padding:56px 22px 84px;text-align:left;overflow:hidden;background:radial-gradient(ellipse 55% 55% at 78% 55%,rgba(57,255,90,.16),transparent 70%),radial-gradient(ellipse 50% 40% at 15% 100%,rgba(255,182,39,.12),transparent 70%),#000}
.bgrid{max-width:1180px;margin:0 auto;display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:48px;align-items:start}
.bpreview{padding-top:26px}
.bh1{font-size:clamp(44px,6.2vw,84px);font-weight:900;letter-spacing:-.05em;line-height:.95;color:#fff}
.bh1 .free{text-shadow:0 0 40px rgba(57,255,90,.35)}
.blede{font-size:clamp(18px,2vw,21px);color:#c7c7cc;margin-top:18px;max-width:520px;font-weight:500}
.blede b{color:#fff}

.bform{margin-top:28px;max-width:540px}
.blabel{display:block;font-weight:800;font-size:15px;color:#fff;margin-bottom:8px}
.bfield{display:flex;align-items:center;gap:8px;background:#fff;border:3px solid #000;border-radius:999px;padding:5px 5px 5px 18px;box-shadow:6px 6px 0 var(--paint)}
.bfield:focus-within{outline:3px solid var(--green);outline-offset:3px}
.bat{font-size:22px;font-weight:900;color:#000}
.bfield input{flex:1;min-width:0;border:0;outline:0;background:transparent;font:700 20px/1.2 var(--font);color:#000;padding:10px 0}
.bfield input::placeholder{color:#a1a1a6;font-weight:600}
.bfield .btn{flex-shrink:0;padding:12px 20px}
.bmsg{font-size:14px;color:#a1a1a6;margin-top:12px;min-height:1.4em}
.bmsg.err{color:#ff8a8a;font-weight:700}

.bresult{margin-top:24px;background:#111113;border:1px solid #2a2a2d;border-radius:20px;padding:20px 22px}
.bresult-k{font-size:13px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:var(--gold)}
.bresult-type{font-size:clamp(26px,3vw,34px);font-weight:900;letter-spacing:-.03em;line-height:1.1;color:var(--green);margin-top:4px}
.bresult-desc{font-size:17px;color:#e8e8ed;margin-top:6px}
.bactions{display:flex;flex-wrap:wrap;gap:10px;margin-top:18px}
.btip{font-size:13px;color:#86868b;margin-top:12px}

.bpreview{min-width:0}
.bframe{position:relative;scroll-margin-top:76px;border-radius:18px;transform:rotate(1.2deg);transition:transform .2s ease}
.bframe.ready{transform:rotate(0)}
.bframe img{width:100%;aspect-ratio:1200/675;object-fit:cover;border-radius:14px;border:3px solid #000;box-shadow:0 0 80px rgba(57,255,90,.22);background:#22c55e}
.bpill{position:absolute;top:-14px;left:18px;z-index:2;background:var(--gold);color:#000;font-weight:900;font-size:14px;letter-spacing:.04em;text-transform:uppercase;padding:5px 12px;border:3px solid #000;border-radius:999px;transform:rotate(-4deg)}
.bpill.done{background:var(--green)}

.types{background:#fff}
.qt-grid{list-style:none;max-width:1100px;margin:48px auto 0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px;text-align:left}
.qt{background:var(--light);border:3px solid #000;border-radius:18px;padding:18px 20px 20px;box-shadow:5px 5px 0 #000;position:relative}
.qt:nth-child(3n+1){transform:rotate(-.6deg)}.qt:nth-child(3n+2){transform:rotate(.5deg)}
.qt-n{display:inline-block;font:800 13px/1 var(--mono);background:var(--paint);color:#000;border:2px solid #000;border-radius:6px;padding:4px 6px;margin-bottom:10px}
.qt h3{font-size:21px;font-weight:900;letter-spacing:-.02em;line-height:1.15;color:#000}
.qt p{font-size:15.5px;color:#3a3a3c;margin-top:6px;line-height:1.4}
.qt.me{background:#dcfce7;outline:4px solid var(--paint);outline-offset:2px}
.types-cta{display:flex;gap:12px;justify-content:center;flex-wrap:wrap;margin-top:48px}
.bfoot-risk{font-size:13px;color:var(--ink);margin-bottom:10px}


/* reroll + rare */
.bhunt{margin-top:18px;font-size:16px;font-weight:700;color:#e8e8ed}
.bhunt b{color:var(--green);font-weight:900}.bhunt b.gold{color:var(--gold)}
.bresult-no{display:inline-block;margin-left:6px;font:800 12px/1 var(--mono);color:#000;background:var(--green);border-radius:6px;padding:3px 6px;letter-spacing:0;vertical-align:1px}
.breroll{margin-top:16px;width:100%;background:var(--gold);color:#000;border:3px solid #000;box-shadow:5px 5px 0 var(--paint);font-weight:900;font-size:18px;padding:14px 20px}
.breroll:hover{transform:translate(-1px,-1px);box-shadow:6px 6px 0 var(--paint)}
.breroll:active{transform:translate(3px,3px);box-shadow:2px 2px 0 var(--paint)}
.bresult.rare{border:3px solid var(--gold);background:linear-gradient(135deg,#1c1503,#111113 55%,#16111c);box-shadow:0 0 50px rgba(255,182,39,.25)}
.bresult.rare .bresult-type{color:var(--gold)}
.bresult.rare .bresult-no{background:var(--gold)}
.bpill.rare{background:linear-gradient(90deg,#FFB627,#fff1a8,#ff8ad8,#7ae8ff,#FFB627);color:#000}
.bframe.rare img{box-shadow:0 0 90px rgba(255,182,39,.45)}
.bframe.shake{animation:bshake .45s ease}
@keyframes bshake{0%{transform:rotate(0)}25%{transform:rotate(-2deg) scale(.98)}55%{transform:rotate(1.6deg) scale(1.01)}100%{transform:rotate(0)}}
@media (prefers-reduced-motion:reduce){.bframe.shake{animation:none}}
.rare-head{max-width:820px;margin:72px auto 0}
.rare-tag{display:inline-block;background:var(--gold);color:#000;font-weight:900;font-size:15px;letter-spacing:.08em;border:3px solid #000;border-radius:999px;padding:5px 14px;transform:rotate(-3deg);margin-bottom:14px}
.qt-grid-rare{margin-top:36px}
.qt-rare{background:linear-gradient(135deg,#fff7d6,#fff 45%,#fdebff 75%,#e3fbff);border-color:#000;box-shadow:5px 5px 0 var(--gold)}
.qt-rare .qt-n{background:var(--gold)}
.qt-rare.me{background:#fff1a8;outline-color:var(--gold)}

@media (max-width:900px){
  .bgrid{grid-template-columns:minmax(0,1fr);gap:30px}
  .bpreview{order:2;padding-top:4px}
  .qt-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:680px){
  .bhero{padding:30px 16px 60px}
  .bh1{font-size:clamp(40px,12vw,60px)}
  .bfield{flex-wrap:wrap;border-radius:22px;padding:6px 6px 6px 14px}
  .bfield input{font-size:19px;flex:1 1 60%}
  .bfield .btn{flex:1 1 100%;margin-top:2px}
  .bactions .btn{flex:1 1 100%}
  .bresult{padding:18px}
  .qt-grid{grid-template-columns:minmax(0,1fr);gap:14px}
  .qt{transform:none!important}
  .types-cta .btn{flex:1 1 100%}
  .bhunt{font-size:15px}
  .rare-head{margin-top:56px}
}