/* Handheld battle presentation; all controls and HP are real HTML. */
@font-face { font-family:BugPixel; src:url('vt323.ttf') format('truetype'); font-display:swap; }
.bug-lab[data-view="battle"] { padding:20px 18px 15px; background:#f0f1e9; }
.bug-lab[data-view="battle"] .bug-battle-actions { display:none; }
.bug-game { padding-top:16px; }
.bug-game-toolbar { display:flex; justify-content:space-between; align-items:center; gap:10px; padding:0 2px 9px; }
.bug-game-toolbar > span { color:#65725a; font-size:11px; line-height:1.4; }
.bug-sound { display:inline-flex; align-items:center; gap:6px; min-height:36px; padding:4px 8px; border:1px solid #cbd3bf; border-radius:5px; background:#f8f9ef; font-size:10px; color:#617050; }
.bug-sound:hover { background:#fffdf4; }
.bug-sound:focus-visible { outline:2px solid #657747; outline-offset:2px; }
.bug-sound[aria-pressed="false"] .bug-sound-waves,.bug-sound[aria-pressed="true"] .bug-sound-mute { display:none; }
.bug-sound:disabled { opacity:.55; }
.bug-game-screen { border:3px solid #354b41; box-shadow:0 3px 0 #b3baaa,0 8px 18px #28382b14; overflow:hidden; background:#4d775f; border-radius:8px; font-family:BugPixel,'Courier New',monospace; -webkit-font-smoothing:auto; color:#303c3b; }
.bug-game-field { position:relative; isolation:isolate; aspect-ratio:1.75; overflow:hidden; background:repeating-linear-gradient(0deg,#ffffff0e 0 4px,transparent 4px 10px),linear-gradient(to bottom,#6ccabd 0 7%,#8bdcc9 7% 12%,#b7ecce 12% 18%,#92d692 18% 24%,#72c36d 24% 27%,#b7db81 27% 35%,#cde5a1 35% 58%,#b9d88e 58% 70%,#c8e09e 70%); }
.bug-game-field::after { content:""; position:absolute; inset:0; pointer-events:none; z-index:7; opacity:.13; background:repeating-linear-gradient(0deg,#375132 0 1px,transparent 1px 4px); }
.bug-ground { position:absolute; background:repeating-linear-gradient(0deg,transparent 0 7px,#73994133 7px 10px),radial-gradient(ellipse,#73b36b 0 59%,#639552 60% 65%,#c3ac69 66% 72%,transparent 73%); border-radius:50%; z-index:-1; }
.bug-ground::after { content:""; position:absolute; inset:7% 9% 23%; opacity:.6; background:repeating-linear-gradient(100deg,transparent 0 12px,#427847 12px 15px,transparent 15px 24px); clip-path:polygon(0 80%,5% 25%,10% 75%,15% 0,23% 70%,28% 16%,32% 75%,39% 10%,47% 80%,55% 25%,60% 74%,70% 15%,75% 70%,84% 4%,90% 65%,97% 20%,100% 100%,0 100%); }
.bug-ground-opponent { width:48%; height:25%; right:1%; top:33%; }
.bug-ground-player { width:63%; height:29%; left:-9%; bottom:-7%; }
.bug-health { position:absolute; width:47%; padding:10px 14px 7px; background:#f5f7e9; border:2px solid #4f6252; border-radius:3px 12px 3px 12px; box-shadow:3px 4px 0 #52705b99,0 0 0 2px #fcffe18c inset; z-index:4; }
.bug-health-opponent { left:3%; top:7%; }
.bug-health-player { right:3%; bottom:9%; }
.bug-health-heading { display:flex; align-items:baseline; justify-content:space-between; gap:7px; }
.bug-health-heading strong { font-weight:400; font-size:clamp(24px,2.4vw,31px); line-height:1; }
.bug-health-heading > span { font-size:13px; color:#718074; white-space:nowrap; }
.bug-health-meter { display:flex; align-items:center; justify-content:flex-end; gap:5px; margin-top:6px; }
.bug-health-meter > span { font-size:19px; color:#92732d; line-height:1; }
.bug-health-meter progress { display:block; width:74%; height:12px; appearance:none; border:2px solid #435849; border-radius:2px; background:#d1d8bb; overflow:hidden; }
.bug-health-meter progress::-webkit-progress-bar { background:#d1d8bb; }
.bug-health-meter progress::-webkit-progress-value { background:linear-gradient(#91d885 0 34%,#469853 35% 100%); transition:width .28s cubic-bezier(.22,.6,.2,1); }
.bug-health-meter progress::-moz-progress-bar { background:#469853; }
.bug-health[data-level="medium"] progress::-webkit-progress-value { background:linear-gradient(#f5dc84 0 34%,#c79b42 35%); }
.bug-health[data-level="low"] progress::-webkit-progress-value { background:linear-gradient(#f09e80 0 34%,#ca6451 35%); }
.bug-health[data-level="medium"] progress::-moz-progress-bar { background:#c79b42; }
.bug-health[data-level="low"] progress::-moz-progress-bar { background:#ca6451; }
.bug-health-value { display:block; text-align:right; font-size:22px; line-height:1; }
.bug-health-meta { display:flex; justify-content:space-between; align-items:center; gap:5px; margin-top:4px; }
.bug-type { border:0; border-bottom:1px dotted currentColor; background:none; padding:3px 0; color:#586452; font-size:16px; line-height:1; }
.bug-type:hover { color:#273c2b; }
.bug-type:focus-visible,.bug-statuses button:focus-visible { outline:2px solid #354b41; outline-offset:2px; }
.bug-statuses { display:flex; flex-wrap:wrap; gap:4px; }
.bug-statuses:empty { display:none; }
.bug-statuses button { border:1px solid #77865e; background:#e2e6bd; color:#52602e; font-size:14px; line-height:1; padding:3px 5px; margin-top:4px; border-radius:2px; }
.bug-statuses [data-status="bleeding"] { color:#8e3d3d; background:#f3ddd0; border-color:#b67669; }
.bug-statuses [data-status="counter"] { color:#6d5021; background:#f5dfa7; border-color:#b09146; }
.bug-health[data-impact="hit"] { animation:bug-panel-hit .25s ease-out; }
.bug-health[data-impact="shield"] { animation:bug-panel-block .35s ease-out; }
.bug-combatant { position:absolute; aspect-ratio:1; padding:0; border:0; background:none; border-radius:30%; z-index:2; cursor:zoom-in; }
.bug-combatant-opponent { width:30%; top:10%; right:9%; --battle-x:-1; --battle-y:1; }
.bug-combatant-player { width:38%; bottom:-2%; left:3%; --battle-x:1; --battle-y:-1; }
.bug-combatant:disabled { cursor:default; }
.bug-combatant:focus-visible { outline:2px dashed #436238; outline-offset:0; }
.bug-sprite { display:block; position:absolute; inset:0; background-image:url('battle-sprites.png'); background-size:500% 200%; background-repeat:no-repeat; image-rendering:pixelated; filter:drop-shadow(2px 5px 0 #2444212b); transform-origin:50% 80%; }
.bug-sprite-shield { position:absolute; inset:5%; border:4px solid #a8dfed; border-radius:48%; box-shadow:0 0 0 3px #486788bb inset,0 0 0 3px #effffc99,0 0 24px #bcebea66; background:linear-gradient(125deg,#ffffff30,transparent 50%,#81c7ff45); opacity:0; pointer-events:none; }
.bug-damage { position:absolute; top:17%; left:50%; transform:translateX(-50%); z-index:4; color:#fffdec; text-shadow:2px 2px #663e32,-2px -2px #663e32,2px -2px #663e32,-2px 2px #663e32; font-size:clamp(27px,3vw,40px); white-space:nowrap; pointer-events:none; }
.bug-absorbed { position:absolute; bottom:4%; left:50%; transform:translateX(-50%); white-space:nowrap; padding:2px 5px; border:1px solid #aa9048; background:#fff4cb; color:#655126; font-size:19px; line-height:1; z-index:4; pointer-events:none; }
.bug-absorbed:empty { display:none; }
.bug-combatant[data-action="blocked"] .bug-absorbed { animation:bug-absorb-number .7s ease-out both; }
.bug-combatant[data-counter="true"] .bug-sprite { filter:drop-shadow(0 0 3px #f6dc76) drop-shadow(2px 5px 0 #2444212b); }
.bug-combatant[data-action="attack"] { z-index:5; }
.bug-combatant[data-action="attack"] .bug-sprite { animation:bug-game-attack var(--move-duration,.7s) cubic-bezier(.3,.1,.25,1) both; }
.bug-combatant[data-action="hit"] .bug-sprite { animation:bug-game-hit .6s ease-out both; }
.bug-combatant[data-action="hit"] .bug-damage,.bug-combatant[data-action="blocked"] .bug-damage { animation:bug-game-damage 1.1s ease-out both; }
.bug-combatant[data-action="guard"] .bug-sprite-shield,.bug-combatant[data-action="blocked"] .bug-sprite-shield { opacity:1; animation:bug-game-shield .45s ease-out both; }
.bug-combatant[data-action="blocked"] .bug-damage { color:#e5ffff; font-size:clamp(23px,2.2vw,30px); text-shadow:2px 2px #355f72,-2px -2px #355f72,2px -2px #355f72,-2px 2px #355f72; }
.bug-combatant[data-action="blocked"] .bug-sprite-shield { animation:bug-shield-contact .38s ease-out both; }
.bug-combatant[data-action="prepare"] .bug-sprite { animation:bug-game-ready .8s ease-in-out 2; }
.bug-combatant[data-action="fainted"] .bug-sprite { opacity:.3; transform:translateY(13px) scale(.94); filter:grayscale(.6); transition:all .45s; }
.bug-game-console { position:relative; display:grid; grid-template-columns:minmax(0,1.05fr) minmax(0,1fr); gap:8px; padding:10px; border-top:4px solid #354b41; background:#49695b; min-height:155px; }
.bug-game-dialogue { background:#f8f7eb; border:3px solid #283e37; border-radius:5px; box-shadow:0 0 0 2px #ddca8b inset; padding:13px 14px; }
.bug-turn-label { font-size:14px; letter-spacing:.03em; color:#73856d; margin-bottom:5px; }
.bug-game-dialogue h3 { font-size:clamp(24px,2.4vw,29px); font-weight:400; line-height:.98; letter-spacing:0; }
.bug-game-dialogue > p:last-child { font-size:18px; line-height:1.07; margin-top:8px; color:#596a56; }
.bug-moves { display:grid; grid-template-columns:1fr 1fr; gap:7px; align-self:stretch; }
.bug-move { display:grid; grid-template-columns:1fr auto; grid-template-areas:'title type' 'description description' 'note note'; align-content:center; gap:3px 7px; position:relative; border:2px solid #334b41; border-radius:7px; padding:8px 11px; background:#e9cf9a; box-shadow:0 0 0 2px #fff2d3 inset,0 2px #253f34; color:#4d492e; text-align:left; min-height:65px; transition:filter .15s,transform .15s; }
.bug-move-basic { background:#e3e7d6; box-shadow:0 0 0 2px #f9faeb inset,0 2px #253f34; }
.bug-move-guard { background:#b3d3d5; box-shadow:0 0 0 2px #e4f5ed inset,0 2px #253f34; color:#304e57; }
.bug-move[data-type="armor"] { background:#e9cf9a; color:#4d492e; }
.bug-move[data-type="nature"] { background:#c9dba8; color:#344b2f; }
.bug-move[data-type="venom"] { background:#d9c8df; color:#583f5c; }
.bug-move[data-type="fire"] { background:#ebbd96; color:#67432e; }
.bug-move[data-type="wind"] { background:#b3d3d5; color:#304e57; }
.bug-move:hover:not(:disabled) { filter:brightness(1.07); transform:translateY(-1px); }
.bug-move:active:not(:disabled) { transform:translateY(1px); }
.bug-move:focus-visible { outline:2px solid #fff6b9; outline-offset:1px; }
.bug-move:focus-visible::before { content:'▸'; position:absolute; left:-7px; top:28%; color:#283f34; font-size:20px; }
.bug-move:disabled { filter:saturate(.5); opacity:.75; cursor:wait; }
.bug-move[data-cooldown="true"] { background:#b9c5b5; box-shadow:0 0 0 2px #d5ddca inset,0 2px #253f34; cursor:default; color:#354b3b; }
.bug-move[data-cooldown="true"] .bug-move-note { color:#354b3b; font-weight:bold; }
.bug-move[data-hint="true"] { outline:2px solid #edf5c5; outline-offset:1px; }
.bug-move[data-counter="true"]:not(:disabled) { box-shadow:0 0 0 2px #fff4b9 inset,0 2px #253f34,0 0 0 1px #d9bd63; }
.bug-move[data-counter="true"]:not(:disabled) .bug-move-note { color:#5e4617; }
.bug-move strong { grid-area:title; font-size:23px; line-height:1; font-weight:400; }
.bug-move-type { grid-area:type; font-size:12px; align-self:center; opacity:.7; }
.bug-move-detail { grid-area:description; font-size:16px; line-height:1; opacity:.8; }
.bug-move-note { grid-area:note; font-size:14px; line-height:1.1; color:#66654c; }
.bug-move { grid-template-columns:1fr; grid-template-areas:'type' 'title' 'description' 'note'; padding:9px; }
.bug-move strong { font-size:22px; }
.bug-game-console { grid-template-columns:minmax(0,.9fr) minmax(0,1.2fr); }
.bug-combatant[data-action="healed"] .bug-damage { color:#dfffbb; text-shadow:2px 2px #446033,-2px -2px #446033,2px -2px #446033,-2px 2px #446033; animation:bug-game-damage .9s ease-out both; }
.bug-move-fx[data-effect="heal"] .bug-fx-glow { display:block; width:115px; height:115px; border:3px solid #e5f4af; border-radius:50%; background:radial-gradient(circle,#ecffc480,transparent 65%); animation:bug-heal-glow 1s ease-out both; }
@keyframes bug-heal-glow { 0% { opacity:0; transform:translate(-50%,-50%) scale(.4); } 40% { opacity:1; transform:translate(-50%,-50%) scale(1); } 100% { opacity:0; transform:translate(-50%,-65%) scale(1.2); } }
.bug-intent { padding:7px 12px; border-top:2px solid #536c43; background:#e4ebc8; font-size:18px; line-height:1.12; text-align:center; min-height:36px; }
.bug-battle-guide { font-size:12px; color:#59634e; border-bottom:1px solid #d6dccb; }
.bug-battle-guide summary { cursor:pointer; padding:14px 0; min-height:44px; }
.bug-battle-guide > div { display:grid; gap:9px; padding:0 0 15px; line-height:1.6; }
.bug-battle-guide strong { color:#35452e; font-weight:600; }
.bug-game-ending { display:flex; flex-direction:column; align-self:center; gap:8px; text-align:center; }
.bug-game-ending button { border:2px solid #334b41; border-radius:5px; background:#e9cf9a; color:#3d4934; padding:12px 8px; box-shadow:0 0 0 2px #fff2d3 inset; font-size:25px; min-height:48px; }
.bug-game-ending .bug-rematch { background:#d8e0cd; box-shadow:0 0 0 2px #edf2df inset; font-size:22px; }
.bug-game-ending button:focus-visible { outline:2px solid #fff6b9; outline-offset:2px; }
.bug-game-ending a { font-size:19px; color:#f3f4dd; padding:10px 0; }
.bug-game-footer { display:flex; align-items:center; justify-content:space-between; gap:10px; padding-top:9px; }
.bug-game-footer > span { font-size:10px; line-height:1.4; color:#7a8272; }
.bug-game-footer button { min-height:42px; padding:8px 0 8px 7px; border:0; background:none; color:#56664b; font-size:11px; white-space:nowrap; }
.bug-game-footer button:hover { text-decoration:underline; text-underline-offset:3px; }
.bug-game-footer button:disabled { opacity:.45; }
.bug-game-footer a { font-size:11px; min-height:42px; display:inline-flex; align-items:center; color:#56664b; }
.bug-keepsake { position:relative; aspect-ratio:1.75; overflow:hidden; background:repeating-linear-gradient(0deg,#47663706 0 1px,transparent 1px 4px),radial-gradient(ellipse at 64% 50%,#fffdf0,#e4e9cf); }
.bug-keepsake-photo { position:absolute; width:31%; top:31%; left:6%; margin:0; transform:rotate(-4deg); animation:bug-photo-return .45s ease-out both; }
.bug-keepsake-photo img { display:block; width:100%; height:auto; aspect-ratio:847/578; object-fit:cover; padding:5px; border:1px solid #b2baa0; background:#fffdef; box-shadow:3px 5px 0 #8a98732b; }
.bug-keepsake-photo figcaption { text-align:center; margin-top:10px; font-size:16px; color:#748263; }
.bug-keepsake-arrow { position:absolute; left:40%; top:41%; font-size:40px; color:#a8b491; }
.bug-keepsake-card { position:absolute; top:7%; bottom:9%; right:6%; width:43%; animation:bug-card-victory .6s cubic-bezier(.2,.8,.25,1) both; }
.bug-keepsake-card button { display:flex; justify-content:center; width:100%; height:100%; padding:0; border:0; background:none; cursor:zoom-in; transform:rotate(3deg); }
.bug-keepsake-card button:focus-visible { outline:2px dashed #687949; outline-offset:5px; }
.bug-keepsake-card img { display:block; max-width:100%; height:100%; object-fit:contain; filter:drop-shadow(4px 8px 3px #51633936); }
.bug-keepsake-stamp { position:absolute; bottom:-4%; left:50%; transform:translateX(-50%) rotate(-4deg); padding:4px 10px; border:2px solid #526b3f; background:#edf3d4; color:#3a532c; box-shadow:2px 2px #526b3f44; font-size:21px; white-space:nowrap; pointer-events:none; }
.bug-keepsake[data-result="lost"] .bug-keepsake-stamp,.bug-keepsake[data-result="draw"] .bug-keepsake-stamp { background:#eeead8; border-color:#8d9271; color:#727856; }
@keyframes bug-photo-return { from { opacity:0; transform:translateX(-15px) rotate(-8deg); } to { opacity:1; transform:rotate(-4deg); } }
@keyframes bug-card-victory { from { opacity:0; transform:translateY(20px) scale(.92); } to { opacity:1; transform:none; } }
@keyframes bug-panel-hit { 0% { transform:translateX(2px); } 40% { transform:translateX(-2px); } 100% { transform:none; } }
@keyframes bug-panel-block { 30% { border-color:#d2b360; box-shadow:0 0 0 3px #f8e4a9; } }
@keyframes bug-shield-contact { 0% { transform:scale(1); } 22% { transform:scale(.88,1.06); background-color:#fff2b396; } 55% { transform:scale(1.05,.97); } 100% { transform:scale(1); } }
@keyframes bug-absorb-number { from { opacity:0; transform:translate(-50%,6px); } 20%,100% { opacity:1; transform:translate(-50%,0); } }
.bug-battle-actions { padding-top:13px; border-top:1px solid #d7dacd; }
.bug-challenge-invite { display:flex; align-items:center; justify-content:center; gap:8px; font-size:12px; color:#757c69; min-height:44px; }
.bug-invite-index { font-size:10px; color:#8a937b; }
.bug-challenge-controls { display:flex; align-items:center; justify-content:space-between; gap:12px; }
.bug-battle-primary { display:inline-flex; justify-content:center; align-items:center; gap:12px; min-height:46px; padding:12px 18px; border:1px solid #34452f; border-radius:8px; background:#34452f; color:#fffdf6; font-size:13px; font-weight:550; line-height:1.4; }
.bug-battle-primary:hover { background:#243720; }
.bug-battle-primary:disabled { opacity:.6; }
.bug-battle-text { min-height:44px; border:0; background:none; color:#5f6c53; font-size:12px; padding:8px 0; }
.bug-battle-text:hover { text-decoration:underline; text-underline-offset:4px; }
@keyframes bug-game-attack { 0%,100% { transform:none; } 24% { transform:translate(calc(var(--battle-x) * -12px),calc(var(--battle-y) * -5px)) scale(.97); } 50%,56% { transform:translate(calc(var(--battle-x) * 42px),calc(var(--battle-y) * 22px)) scale(1.05); } }
@keyframes bug-game-hit { 0%,100% { transform:none; filter:none; } 15%,45% { transform:translate(calc(var(--battle-x) * -10px),2px); filter:brightness(1.8) sepia(.2); } 30%,60% { transform:translate(calc(var(--battle-x) * 4px),-1px); filter:brightness(1); } }
@keyframes bug-game-damage { from { opacity:1; transform:translate(-50%,0); } 65% { opacity:1; } to { opacity:0; transform:translate(-50%,-28px); } }
@keyframes bug-game-shield { from { opacity:0; transform:scale(.6); } to { opacity:1; transform:scale(1); } }
@keyframes bug-game-ready { 0%,100% { transform:none; } 50% { transform:translateY(-5px); filter:drop-shadow(0 0 5px #eced8a); } }
@media(max-width:650px) {
  .bug-lab[data-view="battle"] { padding:17px 10px 9px; }
  .bug-lab[data-view="battle"] .bug-lab-head { padding-inline:5px; }
  .bug-game { padding-top:13px; }
  .bug-game-field,.bug-keepsake { aspect-ratio:1.35; }
  .bug-keepsake-stamp { font-size:17px; padding:4px 7px; }
  .bug-keepsake-photo figcaption { font-size:13px; }
  .bug-keepsake-arrow { font-size:30px; }
  .bug-keepsake-card { top:11%; bottom:13%; }
  .bug-game-toolbar > span { font-size:10px; }
  .bug-absorbed { font-size:16px; }
  .bug-health { padding:7px 8px 5px; width:51%; }
  .bug-health-opponent { top:6%; left:3%; }
  .bug-health-player { bottom:7%; right:3%; }
  .bug-health-heading { gap:3px; }
  .bug-health-heading strong { font-size:23px; }
  .bug-health-heading > span { font-size:10px; }
  .bug-health-value { font-size:18px; }
  .bug-health-meter { margin-top:4px; }
  .bug-health-meter > span { font-size:15px; }
  .bug-health-meter progress { height:10px; }
  .bug-combatant-opponent { width:35%; top:15%; right:7%; }
  .bug-combatant-player { width:45%; bottom:3%; left:0; }
  .bug-ground-opponent { top:36%; }
  .bug-ground-player { bottom:-4%; }
  .bug-game-console { grid-template-columns:1fr; gap:8px; padding:8px; }
  .bug-game-dialogue { padding:10px 12px; min-height:112px; }
  .bug-game-dialogue h3 { font-size:27px; }
  .bug-game-dialogue > p:last-child { font-size:19px; margin-top:6px; }
  .bug-moves { grid-template-columns:1fr 1fr; gap:6px; }
  .bug-move { grid-template-columns:1fr; grid-template-areas:'type' 'title' 'description' 'note'; padding:9px 8px; gap:4px; min-height:99px; }
  .bug-move-note { font-size:14px; }
  .bug-intent { font-size:17px; padding:7px 8px; }
  .bug-type { font-size:14px; }
  .bug-statuses button { font-size:13px; padding:2px 4px; }
  .bug-move-type { font-size:12px; }
  .bug-move strong { font-size:23px; }
  .bug-move-detail { font-size:15px; }
  .bug-game-footer { flex-direction:column-reverse; gap:0; padding-top:3px; }
  .bug-game-footer > span { font-size:9px; margin-bottom:6px; }
  .bug-game-footer button { font-size:11px; padding-inline:0; }
  .bug-game-ending { gap:2px; }
  .bug-game-ending a { min-height:44px; }
  .bug-challenge-controls { flex-direction:column; align-items:stretch; gap:2px; }
  .bug-battle-primary { min-height:46px; width:100%; font-size:12px; }
}
@media(max-width:360px) {
  .bug-health-heading strong { font-size:21px; }
  .bug-health-heading > span { font-size:8px; }
  .bug-move strong { font-size:21px; }
  .bug-move-detail { font-size:14px; }
}
/* Small, original effects keep each move legible without obscuring the HP panels. */
.bug-move-fx { position:absolute; width:1px; height:1px; z-index:3; pointer-events:none; }
.bug-move-fx > span { display:none; position:absolute; left:0; top:0; }
.bug-move-fx[data-effect="cloud"] .bug-fx-cloud { display:block; width:105px; height:85px; animation:bug-cloud-travel var(--contact,.5s) ease-in both,bug-cloud-clear .65s var(--contact,.5s) ease-out forwards; }
.bug-fx-cloud i { position:absolute; border:3px solid #567c39; background:#8eb95bec; border-radius:45%; width:57px; height:51px; box-shadow:inset 4px 5px #b5d57c; }
.bug-fx-cloud i:nth-child(1) { left:8px; top:25px; }
.bug-fx-cloud i:nth-child(2) { left:37px; top:8px; }
.bug-fx-cloud i:nth-child(3) { left:65px; top:29px; }
.bug-fx-cloud i:nth-child(4) { left:31px; top:41px; }
.bug-fx-cloud i:nth-child(5) { left:49px; top:-9px; width:26px; height:24px; }
.bug-move-fx[data-effect="bite"] .bug-fx-fangs { display:block; width:83px; height:90px; transform:translate(-50%,-50%); animation:bug-fx-fade calc(var(--contact,.35s) + .45s) both; }
.bug-fx-fangs i { position:absolute; width:100%; height:43%; left:0; background:#fff6d6; filter:drop-shadow(0 3px #705b42); clip-path:polygon(0 0,100% 0,100% 30%,88% 85%,77% 24%,62% 100%,50% 24%,35% 95%,23% 24%,12% 85%,0 30%); }
.bug-fx-fangs i:first-child { top:0; animation:bug-fang-top var(--contact,.35s) cubic-bezier(.7,0,.9,.7) both; }
.bug-fx-fangs i:last-child { bottom:0; transform:rotate(180deg); animation:bug-fang-bottom var(--contact,.35s) cubic-bezier(.7,0,.9,.7) both; }
.bug-move-fx[data-effect="glow"] .bug-fx-glow { display:block; width:130px; height:130px; border:7px solid #f9ef8f; background:radial-gradient(circle,#fffadfb0,transparent 65%); box-shadow:0 0 22px #fff397aa,inset 0 0 15px #fff397aa; border-radius:50%; animation:bug-glow-wave var(--contact,.46s) ease-in both,bug-cloud-clear .6s var(--contact,.46s) ease-out forwards; }
.bug-fx-glow::before,.bug-fx-glow::after { content:''; position:absolute; inset:26%; border:4px solid #ffffd7; transform:rotate(45deg); }
.bug-fx-glow::after { inset:-14%; border-width:2px; transform:rotate(15deg); opacity:.65; }
.bug-move-fx[data-effect="slime"] .bug-fx-slime { display:block; width:100px; height:58px; background:#839d58d9; border:3px solid #546f39; border-radius:45%; box-shadow:inset 0 7px #c9d3918c; animation:bug-slime-splash var(--contact,.5s) ease-in both,bug-cloud-clear .6s var(--contact,.5s) ease-out forwards; }
.bug-fx-slime i { position:absolute; width:15px; height:27px; border-radius:40%; background:#aac36e; border:2px solid #627d3e; top:-20px; left:9px; transform:rotate(-30deg); }
.bug-fx-slime i:nth-child(2) { top:-38px; left:48px; transform:rotate(10deg); }
.bug-fx-slime i:nth-child(3) { top:-16px; left:83px; transform:rotate(45deg); }
.bug-move-fx[data-effect="tackle"] .bug-fx-impact,.bug-move-fx[data-effect="dive"] .bug-fx-impact { display:block; width:100px; height:100px; background:#fff6bf; clip-path:polygon(50% 0,58% 34%,84% 15%,68% 43%,100% 50%,68% 57%,85% 85%,57% 68%,50% 100%,43% 67%,15% 84%,32% 57%,0 50%,34% 42%,15% 15%,43% 33%); opacity:0; animation:bug-impact-star .45s var(--contact,.3s) ease-out forwards; }
.bug-combatant[data-action="cast"] .bug-sprite { animation:bug-game-ready .6s ease-in-out; }
.bug-combatant[data-action="dive"] { z-index:5; }
.bug-combatant[data-action="dive"] .bug-sprite { animation:bug-dive var(--move-duration,.96s) cubic-bezier(.35,.05,.25,1) both; }
.bug-combatant[data-shield] .bug-sprite-shield { opacity:1; }
.bug-combatant[data-shield=""] .bug-sprite-shield { opacity:0; }
.bug-combatant[data-shield="shell"] .bug-sprite-shield { border-color:#edd08b; box-shadow:inset 0 0 0 4px #a88a51,0 0 0 3px #fff1c8bb; background:radial-gradient(circle at 30% 30%,#725133 0 6%,transparent 7%),radial-gradient(circle at 67% 60%,#725133 0 6%,transparent 7%),linear-gradient(140deg,#ead39b80,#dfb96a30); }
.bug-combatant[data-shield="grip"] .bug-sprite-shield { border-color:#73945b; border-style:dashed; box-shadow:inset 0 0 0 4px #a3bf71,0 0 0 3px #def1b099; background:repeating-linear-gradient(135deg,transparent 0 17px,#abc1794a 18px 22px); border-radius:37%; }
@keyframes bug-cloud-travel { 0% { transform:translate(calc(var(--from-x) - 50%),calc(var(--from-y) - 50%)) scale(.25); } 35% { transform:translate(calc(var(--from-x) * .8 - 50%),calc(var(--from-y) * .8 - 50%)) scale(.5); } 100% { transform:translate(-50%,-50%) scale(1.1); } }
@keyframes bug-fx-fade { 0% { opacity:0; } 10%,65% { opacity:1; } 100% { opacity:0; } }
@keyframes bug-fang-top { 0%,30% { transform:translateY(-27px); } 100% { transform:translateY(13px); } }
@keyframes bug-fang-bottom { 0%,30% { transform:translateY(27px) rotate(180deg); } 100% { transform:translateY(-13px) rotate(180deg); } }
@keyframes bug-glow-wave { 0% { transform:translate(calc(var(--from-x) - 50%),calc(var(--from-y) - 50%)) scale(.12) rotate(-30deg); } 100% { transform:translate(-50%,-50%) scale(1) rotate(20deg); } }
@keyframes bug-slime-splash { 0% { transform:translate(calc(var(--from-x) - 50%),calc(var(--from-y) - 50%)) scale(.25); } 85% { transform:translate(-50%,-45%) scale(.9,1.2); } 100% { transform:translate(-50%,-10%) scale(1.2,.8); } }
@keyframes bug-impact-star { 0% { opacity:1; transform:translate(-50%,-50%) scale(.7); } 20% { opacity:1; transform:translate(-50%,-50%) scale(1.1); } 100% { opacity:0; transform:translate(-50%,-50%) scale(.6) rotate(20deg); } }
@keyframes bug-dive { 0%,100% { transform:none; } 24% { transform:translateY(-30px) rotate(calc(var(--battle-x) * -15deg)); } 50%,56% { transform:translate(var(--dive-x),var(--dive-y)) rotate(calc(var(--battle-x) * 14deg)) scale(.92); } 85% { transform:translate(0,-10px); } }
@keyframes bug-cloud-clear { from { opacity:1; } to { opacity:0; } }
@media(prefers-reduced-motion:reduce) {
  .bug-lab *,.bug-lab *::before,.bug-lab *::after { animation:none!important; transition:none!important; }
}