/* Bug League: discover -> photograph -> collectible -> binder -> battle. */
.bug-lab { --bug-accent:#947444; --bug-paper:#f4f1e9; background:var(--bug-paper); padding:25px 28px 23px; color:#343830; transition:background .4s; scroll-margin-top:24px; }
.bug-lab-head { display:flex; justify-content:space-between; align-items:center; gap:12px; font-size:12px; font-weight:550; }
.bug-demo-label { font-size:10px; font-weight:400; color:#777b70; }
.bug-journey { display:grid; grid-template-columns:repeat(5,1fr); list-style:none; padding:0; margin:22px 0 24px; gap:6px; }
.bug-journey li { display:flex; align-items:center; justify-content:center; gap:5px; padding:8px 0; border-bottom:2px solid #dcdfd2; color:#909586; font-size:10px; white-space:nowrap; }
.bug-journey li > span { font-size:8px; opacity:.7; font-variant-numeric:tabular-nums; }
.bug-journey li[aria-current="step"] { color:#384b2f; border-color:#586d43; font-weight:600; }
.bug-journey li[data-done="true"] { border-color:#b0bba1; color:#718163; }
.bug-discovery { text-align:center; }
.bug-discovery-photo { width:min(100%,390px); margin-inline:auto; position:relative; overflow:hidden; border-radius:10px; aspect-ratio:847/578; background:#dbd6c8; }
.bug-discovery-photo > img { width:100%; height:100%; object-fit:cover; }
.bug-discovery-photo > span { position:absolute; left:14px; bottom:13px; padding:6px 10px; border:1px solid #ffffff40; background:#242c2196; color:#fffaf0; border-radius:4px; font-size:10px; backdrop-filter:blur(6px); }
.bug-discovery-copy { padding:19px 5px 17px; }
.bug-discovery-copy h3 { font-size:clamp(24px,2.5vw,32px); font-weight:550; letter-spacing:-.04em; line-height:1.08; }
.bug-discovery-copy p { color:#78806e; margin-top:12px; font-size:12px; line-height:1.6; }
.bug-discovery > .bug-battle-primary { min-width:200px; }
.bug-discovery > .bug-battle-text { display:block; margin:4px auto 0; }
.bug-card-facts { border-top:1px solid #d8ddce; padding:17px 0 0; margin-top:12px; }
.bug-card-facts > p { color:#546343; font-size:13px; font-weight:550; }
.bug-card-facts dl { display:grid; grid-template-columns:repeat(3,1fr); gap:10px; margin:13px 0 9px; }
.bug-card-facts dt { font-size:9px; color:#8a917f; margin-bottom:5px; }
.bug-card-facts dd { margin:0; font-size:13px; color:#3f5035; }
.bug-card-facts details { font-size:11px; line-height:1.6; color:#6d7861; }
.bug-card-facts summary { padding:8px 0; cursor:pointer; min-height:38px; }
.bug-demo-note { color:#89917f; font-size:10px; line-height:1.5; margin-top:8px; }
.bug-binder { animation:bug-binder-arrive .4s ease-out both; }
.bug-binder-heading { display:flex; justify-content:space-between; align-items:center; gap:10px; margin-bottom:20px; }
.bug-binder-heading p { font-size:9px; letter-spacing:.1em; color:#839176; margin-bottom:8px; }
.bug-binder-heading h3 { font-weight:550; font-size:clamp(22px,2.3vw,29px); letter-spacing:-.04em; line-height:1.12; }
.bug-binder-heading > span { color:#869178; font-size:12px; font-variant-numeric:tabular-nums; white-space:nowrap; }
.bug-binder-page { position:relative; padding:20px 20px 20px 35px; border:1px solid #455541; border-radius:6px 12px 12px 6px; background:repeating-linear-gradient(90deg,#ffffff04 0 1px,transparent 1px 3px),#455643; box-shadow:inset 14px 0 12px -9px #182717b3,0 8px 12px -10px #263521aa; }
.bug-binder-rings { position:absolute; left:-5px; top:0; bottom:0; width:30px; display:flex; flex-direction:column; justify-content:space-around; }
.bug-binder-page { max-width:380px; margin-inline:auto; }
.bug-binder-rings i { width:26px; height:11px; border:3px solid #ccd1c6; border-left-color:#929c89; border-bottom-color:#a2ab9a; background:#31442a; border-radius:50%; box-shadow:0 2px 3px #15241180; }
.bug-binder-pockets { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:13px 11px; }
.bug-binder-pocket { position:relative; aspect-ratio:3/4.25; display:flex; flex-direction:column; justify-content:center; align-items:center; gap:7px; padding:5px 5px 15px; border:1px solid #cbd7bb36; border-radius:3px; background:linear-gradient(120deg,#d3dfbf12,transparent 42%,#dde9d208); box-shadow:inset 0 1px 0 #ffffff1a,0 2px 3px #19281433; color:#c5d1b66e; }
.bug-binder-pocket img { display:block; width:100%; border-radius:4px; box-shadow:1px 2px 2px #0c1b1370; }
.bug-binder-pocket > span { font-size:28px; font-weight:300; }
.bug-binder-pocket > small { font-size:8px; }
button.bug-binder-pocket { cursor:pointer; justify-content:flex-start; }
button.bug-binder-pocket > span { font-size:9px; color:#d0dcc2; font-weight:400; position:absolute; bottom:4px; }
button.bug-binder-pocket[data-selected="true"] { border-color:#e1d9a2; background:#dde5b513; box-shadow:0 0 0 1px #e1d9a2; }
button.bug-binder-pocket:focus-visible { outline:2px solid #fff4b7; outline-offset:3px; }
.bug-binder-note { font-size:10px; color:#8a917f; text-align:center; margin:12px 0 22px; }
.bug-friend-invite { display:flex; align-items:center; gap:15px; padding:16px 0; border-top:1px solid #d8ddce; margin-bottom:8px; }
.bug-friend-invite > img { width:59px; height:auto; border-radius:5px; transform:rotate(-5deg); box-shadow:1px 4px 7px #41503826; }
.bug-friend-invite span { font-size:8px; letter-spacing:.09em; color:#8a947d; }
.bug-friend-invite h4 { font-size:20px; font-weight:550; letter-spacing:-.025em; margin:4px 0 5px; }
.bug-friend-invite p { font-size:11px; line-height:1.6; color:#738067; }
.bug-binder > .bug-battle-primary { width:100%; }
.bug-binder > .bug-battle-text { display:block; margin:auto; }
.bug-binder > .bug-demo-note { text-align:center; margin-top:0; }
.bug-lab[data-view="battle"] .bug-journey { margin:12px 0 3px; }
.bug-lab[data-phase="collected"] .bug-camera-shutter { opacity:.4; cursor:default; }
@keyframes bug-binder-arrive { from { opacity:0; transform:translateY(10px); } to { opacity:1; transform:none; } }
.bug-arena { position:relative; display:grid; grid-template-columns:minmax(0,1fr) 24px minmax(0,1.05fr); align-items:center; gap:14px; max-width:600px; margin:26px auto 0; isolation:isolate; }
.bug-phone-column,.bug-result-column { display:flex; min-width:0; flex-direction:column; align-items:center; align-self:stretch; }
.bug-step { font-size:11px; font-weight:550; color:#606458; margin:0 0 21px; white-space:nowrap; }
.bug-step > span { margin-right:6px; color:#95998d; font-size:9px; font-variant-numeric:tabular-nums; }
.bug-transfer-arrow { font-size:25px; font-weight:300; color:#aaa99b; align-self:center; margin-top:-24px; }
.bug-iphone { position:relative; width:100%; max-width:194px; aspect-ratio:194/389; padding:5px; border:1px solid #76766f; border-radius:32px; background:linear-gradient(125deg,#d5d4ca,#646761 18%,#b6b7ad 40%,#3e423c 80%,#b4b4a9); box-shadow:0 17px 25px -13px #222b2945,0 1px 1px #fff8 inset; }
.bug-iphone::before,.bug-iphone::after { content:""; position:absolute; width:3px; border-radius:2px; background:linear-gradient(90deg,#5b5e58,#b4b5ac); }
.bug-iphone::before { left:-3px; top:23%; height:13%; box-shadow:0 -22px 0 -1px #62655f; }
.bug-iphone::after { right:-3px; top:30%; height:12%; }
.bug-iphone-screen { position:relative; height:100%; display:flex; flex-direction:column; border:2px solid #050505; border-radius:26px; overflow:hidden; background:#101111; color:#f5f5f3; }
.bug-phone-status { position:relative; display:flex; justify-content:space-between; align-items:center; flex:none; min-height:34px; padding:10px 12px 6px; font-size:8px; font-weight:600; }
.bug-island { position:absolute; left:50%; top:7px; width:34%; height:16px; border-radius:15px; transform:translateX(-50%); background:#010101; }
.bug-island::after { content:""; position:absolute; right:6px; top:5px; width:5px; height:5px; border-radius:50%; background:radial-gradient(circle at 35% 35%,#22394d,#060a10 75%); }
.bug-camera-top { display:flex; align-items:center; justify-content:space-between; padding:12px 13px 4px; color:#d9dbd9; }
.bug-camera-top > span { font-size:7px; letter-spacing:.06em; border:1px solid #6a6c69; padding:2px 3px; border-radius:2px; }
.bug-camera-space { flex:1; display:flex; align-items:center; padding-block:8px; }
.bug-camera-photo { position:relative; width:100%; aspect-ratio:847/578; overflow:hidden; background:#272c25; }
.bug-camera-photo > img,.bug-photo-flight { width:100%; height:100%; object-fit:cover; object-position:50% 50%; }
.bug-camera-focus { position:absolute; left:40%; top:38%; width:24%; aspect-ratio:1; border:1px solid #ffe178; border-radius:3px; opacity:.6; transition:transform .35s,opacity .35s; }
.bug-camera-blink { position:absolute; inset:0; background:#050605; opacity:0; }
.bug-camera-bottom { flex:none; padding:0 12px 24px; text-align:center; }
.bug-camera-zoom { display:grid; place-items:center; width:24px; height:24px; margin:0 auto 12px; border:1px solid #444943; border-radius:50%; color:#f6d778; font-size:9px; }
.bug-camera-mode { position:static; color:#f6d778; font-size:8px; font-weight:600; letter-spacing:.08em; margin:0 0 11px; }
.bug-camera-controls { display:flex; align-items:center; justify-content:space-between; gap:8px; }
.bug-camera-shutter { display:grid; place-items:center; flex:none; width:52px; height:52px; border:2px solid #f6f6f4; border-radius:50%; padding:3px; background:transparent; }
.bug-camera-shutter > span { display:block; width:100%; height:100%; border-radius:50%; background:#f6f6f4; transition:transform .16s; }
.bug-camera-shutter:hover > span { transform:scale(.91); }
.bug-camera-shutter:active > span { transform:scale(.8); }
.bug-camera-shutter:focus-visible { outline-color:#f6d778; outline-offset:5px; }
.bug-camera-shutter[aria-disabled="true"] { cursor:wait; }
.bug-camera-thumbnail { width:24px; height:27px; border-radius:3px; overflow:hidden; opacity:0; transition:opacity .2s; }
.bug-camera-thumbnail > img { width:100%; height:100%; object-fit:cover; }
.bug-lab[data-has-collection="true"] .bug-camera-thumbnail { opacity:1; }
.bug-camera-switch { flex:none; color:#c5c9c5; }
.bug-home-indicator { position:absolute; bottom:6px; left:33%; width:34%; height:3px; background:#ebede9; border-radius:5px; }
.bug-phone-caption { font-size:10px; line-height:1.5; color:#777a70; text-align:center; margin-top:17px; }
.bug-result-column { justify-content:center; }
.bug-result-column > .bug-step { margin-bottom:auto; }
.bug-card-stage { position:relative; width:100%; max-width:233px; aspect-ratio:3/4; margin:26px 0 0; perspective:900px; }
.bug-card-back,.bug-card-front { position:absolute; inset:0; border:0; padding:0; background:none; border-radius:12px; transition:opacity .25s,transform .4s; box-shadow:0 15px 25px -12px #40392460; }
.bug-card-back { transform:rotate(3deg); }
.bug-card-back > img,.bug-card-front > img { width:100%; height:100%; border-radius:12px; }
.bug-card-back > p { position:absolute; top:53%; left:19%; width:62%; font-size:clamp(13px,1.4vw,19px); line-height:1.4; text-align:center; color:#453820; }
.bug-card-back strong { font-weight:650; }
.bug-card-front { opacity:0; cursor:zoom-in; }
.bug-card-front:disabled { pointer-events:none; }
.bug-card-front:focus-visible { outline-color:var(--bug-accent); outline-offset:6px; }
#bug-photo-destination { position:absolute; pointer-events:none; left:11.05%; top:14.3%; width:78%; height:39.9%; }
.bug-inspect-label { display:flex; flex-direction:column; align-items:center; justify-content:center; min-height:51px; gap:5px; margin:12px 0 0; padding:0; border:0; color:#5a5e51; background:none; font-size:11px; line-height:1.4; }
.bug-inspect-label:disabled { color:#777a70; }
.bug-inspect-hint { opacity:0; color:#737866; font-size:10px; }
.bug-lab[data-phase="collected"] .bug-inspect-hint { opacity:1; }
.bug-lab[data-phase="collected"] .bug-inspect-label:hover .bug-inspect-hint { text-decoration:underline; text-underline-offset:3px; }
.bug-photo-flight { position:absolute; max-width:none; pointer-events:none; top:0; left:0; z-index:4; opacity:0; transform-origin:0 0; border-radius:1px; }
.bug-experience-stage { min-height:0; }
.bug-phone-column,.bug-result-column,.bug-transfer-arrow { transition:transform .25s,opacity .25s; }
.bug-lab[data-view="entering"] .bug-phone-column { opacity:0; transform:translateX(-25px); }
.bug-lab[data-view="entering"] .bug-result-column { opacity:0; transform:translateX(-55px) scale(.95); }
.bug-lab[data-view="entering"] .bug-transfer-arrow { opacity:0; }
.bug-capture-prompt { min-height:45px; display:flex; align-items:center; justify-content:center; margin:15px 0 0; text-align:center; font-size:12px; line-height:1.5; color:#63695a; }
.bug-lab[data-phase="framing"] .bug-camera-focus { opacity:1; transform:scale(.86); }
.bug-lab[data-phase="snapping"] .bug-camera-blink { animation:bug-shutter-blink .17s ease-out both; }
.bug-lab[data-phase="transferring"] .bug-card-back,.bug-lab[data-phase="revealing"] .bug-card-back,.bug-lab[data-phase="collected"] .bug-card-back { opacity:0; transform:rotate(0) scale(.97); pointer-events:none; }
.bug-lab[data-phase="revealing"] .bug-card-front,.bug-lab[data-phase="collected"] .bug-card-front { opacity:1; }
.bug-lab[data-phase="revealing"] .bug-card-front { animation:bug-collectible-arrive .45s ease-out both; }
@keyframes bug-shutter-blink { 0%,100% { opacity:0; } 35% { opacity:.95; } }
@keyframes bug-collectible-arrive { from { opacity:0; box-shadow:0 0 0 2px var(--bug-accent),0 5px 30px #8d803648; } to { opacity:1; box-shadow:0 15px 25px -12px #40392460; } }
.bug-inspection { position:fixed; padding:20px; border:1px solid #e3dfd2; border-radius:18px; background:#f4f1e9; color:#303829; width:min(540px,calc(100vw - 32px)); max-height:calc(100dvh - 32px); overflow:auto; box-shadow:0 30px 100px #10171055; }
.bug-inspection::backdrop { background:#10150de0; backdrop-filter:blur(7px); }
.bug-inspection > header { display:flex; align-items:center; justify-content:space-between; gap:15px; margin-bottom:16px; }
.bug-inspection h2 { font-size:22px; letter-spacing:-.035em; font-weight:600; }
.bug-inspection header p { font-size:12px; color:#77816b; margin-top:4px; }
.bug-inspection header button { border:1px solid #d7d9cb; border-radius:50%; background:none; width:40px; height:40px; font-size:25px; font-weight:300; color:#6b7461; }
.bug-inspection > img { width:auto; height:auto; max-width:100%; max-height:calc(100dvh - 180px); margin:auto; border-radius:10px; }
.bug-inspection-note { margin-top:13px; font-size:10px; text-align:center; color:#7a806f; }
html:has(#bug-inspection[open]) { overflow:hidden; }
@media (max-width:650px) {
  .bug-lab { padding:21px 18px; }
  .bug-lab-head { font-size:11px; }
  .bug-demo-label { font-size:9px; }
  .bug-arena { gap:9px; grid-template-columns:minmax(0,1fr) 12px minmax(0,1fr); margin-top:23px; }
  .bug-step { font-size:9px; margin-bottom:19px; }
  .bug-step > span { margin-right:3px; font-size:8px; }
  .bug-iphone { border-radius:27px; padding:4px; }
  .bug-iphone-screen { border-radius:22px; }
  .bug-phone-status { min-height:28px; padding:9px 8px 5px; font-size:7px; }
  .bug-phone-status > svg { width:17px; }
  .bug-island { height:13px; }
  .bug-island::after { top:4px; width:4px; height:4px; }
  .bug-camera-top { padding:8px 9px 2px; }
  .bug-camera-bottom { padding:0 8px 19px; }
  .bug-camera-zoom { width:21px; height:21px; font-size:8px; margin-bottom:8px; }
  .bug-camera-mode { font-size:7px; margin-bottom:8px; }
  .bug-camera-shutter { width:46px; height:46px; }
  .bug-camera-controls { gap:4px; }
  .bug-camera-thumbnail { width:19px; height:22px; }
  .bug-camera-switch { width:19px; }
  .bug-transfer-arrow { font-size:18px; }
  .bug-card-stage { margin-top:23px; }
  .bug-card-front,.bug-card-back,.bug-card-back > img,.bug-card-front > img { border-radius:8px; }
  .bug-card-back > p { font-size:12px; }
  .bug-phone-caption { font-size:9px; margin-top:12px; max-width:17ch; min-height:27px; }
  .bug-inspect-label { font-size:10px; margin-top:9px; min-height:49px; }
  .bug-inspect-hint { font-size:9px; }
  .bug-capture-prompt { font-size:11px; min-height:49px; margin-top:5px; }
}
@media (max-width:360px) {
  .bug-lab { padding-inline:14px; }
  .bug-demo-label { font-size:9px; }
  .bug-journey { gap:3px; margin:16px 0 19px; }
  .bug-journey li { font-size:9px; gap:3px; }
  .bug-binder-page { padding:15px 12px 15px 25px; }
  .bug-binder-pockets { gap:9px; }
  .bug-binder-rings { width:24px; }
  .bug-binder-rings i { width:22px; }
  .bug-binder-pocket { padding:4px 4px 16px; gap:4px; }
  .bug-binder-pocket > small { font-size:7px; }
  .bug-binder-heading h3 { font-size:22px; }
  .bug-arena { gap:5px; grid-template-columns:minmax(0,1fr) 9px minmax(0,1fr); }
  .bug-step > span { display:none; }
  .bug-camera-shutter { width:44px; height:44px; }
  .bug-camera-switch { width:15px; }
  .bug-camera-thumbnail { width:16px; }
  .bug-camera-top { padding-block:4px 0; }
  .bug-camera-space { padding-block:4px; }
  .bug-camera-zoom { margin-bottom:5px; }
}
@media (prefers-reduced-motion:reduce) {
  .bug-lab *,.bug-lab *::before,.bug-lab *::after { animation:none!important; transition:none!important; }
  .bug-photo-flight,.bug-camera-blink { display:none; }
}