/* Ionic Bonding Activity — every rule is scoped to #iba so nothing leaks into the shared site header/footer.
 * UI panels read the site tokens (light + dark). The particle stages are always dark so the shaded ions,
 * the electron accent and the glow read the same in both themes. */

#iba {
  /* ion color language (also read by js/sprites.js) */
  --iba-cat1: #f08a4b; --iba-cat2: #e5533d; --iba-cat3: #c7303a; --iba-cat4: #9e1f3c;
  --iba-an1: #34b3c9;  --iba-an2: #3b82d6;  --iba-an3: #5566d6;
  --iba-electron: #d9f542;
  --iba-neutral: #8b95a7;

  --iba-ink: var(--tlg-ink, #15191f);
  --iba-muted: var(--tlg-text-muted, #4a5261);
  --iba-bg: var(--tlg-page-bg, #f6f7f9);
  --iba-panel: var(--tlg-surface, #ffffff);
  --iba-panel-2: var(--tlg-surface-2, #f1f3f6);
  --iba-border: var(--tlg-border, #dde1e7);
  --iba-accent: var(--tlg-chemistry-solid, #0f766e);
  --iba-accent-fg: var(--tlg-on-solid, #ffffff);
  --iba-focus: var(--tlg-focus, #2563eb);
  --iba-good: #0f7a4a;
  --iba-good-bg: #e3f5ec;
  --iba-bad: #b42318;
  --iba-bad-bg: #fdeceb;
  --iba-stage: #0d1420;
  --iba-stage-2: #152032;
  --iba-stage-ink: #e6ecf4;
  --iba-stage-muted: #9aa8bb;
  --iba-stage-grid-img: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1000 400' preserveAspectRatio='none'%3E%3Cdefs%3E%3ClinearGradient id='f' x1='0' y1='0' x2='0' y2='400' gradientUnits='userSpaceOnUse'%3E%3Cstop offset='0' stop-color='%239ab0d2' stop-opacity='0'/%3E%3Cstop offset='1' stop-color='%239ab0d2' stop-opacity='0.2'/%3E%3C/linearGradient%3E%3C/defs%3E%3Cpath d='M0 4.6H1000 M0 15.9H1000 M0 33.0H1000 M0 55.4H1000 M0 82.7H1000 M0 114.9H1000 M0 151.6H1000 M0 192.8H1000 M0 238.3H1000 M0 288.1H1000 M0 342.0H1000 M-500 400L220.0 0 M-450 400L234.0 0 M-400 400L248.0 0 M-350 400L262.0 0 M-300 400L276.0 0 M-250 400L290.0 0 M-200 400L304.0 0 M-150 400L318.0 0 M-100 400L332.0 0 M-50 400L346.0 0 M0 400L360.0 0 M50 400L374.0 0 M100 400L388.0 0 M150 400L402.0 0 M200 400L416.0 0 M250 400L430.0 0 M300 400L444.0 0 M350 400L458.0 0 M400 400L472.0 0 M450 400L486.0 0 M500 400L500.0 0 M550 400L514.0 0 M600 400L528.0 0 M650 400L542.0 0 M700 400L556.0 0 M750 400L570.0 0 M800 400L584.0 0 M850 400L598.0 0 M900 400L612.0 0 M950 400L626.0 0 M1000 400L640.0 0 M1050 400L654.0 0 M1100 400L668.0 0 M1150 400L682.0 0 M1200 400L696.0 0 M1250 400L710.0 0 M1300 400L724.0 0 M1350 400L738.0 0 M1400 400L752.0 0 M1450 400L766.0 0 M1500 400L780.0 0' fill='none' stroke='url%28%23f%29' stroke-width='1' vector-effect='non-scaling-stroke'/%3E%3C/svg%3E");
  --iba-stage-vignette: rgba(3,6,12,0.55);
  --iba-radius: 10px;
  color: var(--iba-ink);
  font-family: var(--tlg-font-body, system-ui, sans-serif);
  font-size: 15px;
  line-height: 1.45;
  max-width: 1360px;
  margin: 0 auto;
  padding: 12px 16px 24px;
  display: block;
}
html[data-theme="dark"] #iba {
  --iba-stage-grid-img: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1000 400' preserveAspectRatio='none'%3E%3Cdefs%3E%3ClinearGradient id='f' x1='0' y1='0' x2='0' y2='400' gradientUnits='userSpaceOnUse'%3E%3Cstop offset='0' stop-color='%237892ba' stop-opacity='0'/%3E%3Cstop offset='1' stop-color='%237892ba' stop-opacity='0.16'/%3E%3C/linearGradient%3E%3C/defs%3E%3Cpath d='M0 4.6H1000 M0 15.9H1000 M0 33.0H1000 M0 55.4H1000 M0 82.7H1000 M0 114.9H1000 M0 151.6H1000 M0 192.8H1000 M0 238.3H1000 M0 288.1H1000 M0 342.0H1000 M-500 400L220.0 0 M-450 400L234.0 0 M-400 400L248.0 0 M-350 400L262.0 0 M-300 400L276.0 0 M-250 400L290.0 0 M-200 400L304.0 0 M-150 400L318.0 0 M-100 400L332.0 0 M-50 400L346.0 0 M0 400L360.0 0 M50 400L374.0 0 M100 400L388.0 0 M150 400L402.0 0 M200 400L416.0 0 M250 400L430.0 0 M300 400L444.0 0 M350 400L458.0 0 M400 400L472.0 0 M450 400L486.0 0 M500 400L500.0 0 M550 400L514.0 0 M600 400L528.0 0 M650 400L542.0 0 M700 400L556.0 0 M750 400L570.0 0 M800 400L584.0 0 M850 400L598.0 0 M900 400L612.0 0 M950 400L626.0 0 M1000 400L640.0 0 M1050 400L654.0 0 M1100 400L668.0 0 M1150 400L682.0 0 M1200 400L696.0 0 M1250 400L710.0 0 M1300 400L724.0 0 M1350 400L738.0 0 M1400 400L752.0 0 M1450 400L766.0 0 M1500 400L780.0 0' fill='none' stroke='url%28%23f%29' stroke-width='1' vector-effect='non-scaling-stroke'/%3E%3C/svg%3E");
  --iba-stage-vignette: rgba(0,0,0,0.7);
  --iba-good: #4ade80; --iba-good-bg: #0f2a1d;
  --iba-bad: #fca5a5;  --iba-bad-bg: #3a1414;
}
#iba *, #iba *::before, #iba *::after { box-sizing: border-box; }
#iba [hidden] { display: none !important; }
#iba h1 { font-size: 1.7rem; margin: 4px 0 4px; font-family: var(--tlg-font-heading, inherit); }
#iba h2 { font-size: 1.2rem; margin: 0; }
#iba h3 { font-size: 1rem; margin: 0 0 6px; }
#iba p { margin: 0 0 8px; }
#iba sub, #iba sup { line-height: 0; font-size: .72em; }
#iba .iba-sub { color: var(--iba-muted); }
#iba .iba-live { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }

/* ── Buttons & controls ──────────────────────────────────────────────────────────────────────── */
#iba :where(button:not(.lgt-btn)) { font: inherit; color: inherit; }
#iba .iba-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  min-height: 36px; padding: 0 14px; border-radius: 8px; border: 1px solid var(--iba-accent);
  background: var(--iba-accent); color: var(--iba-accent-fg); font-weight: 700; cursor: pointer;
  transition: background .15s, border-color .15s, opacity .15s;
}
#iba .iba-btn:hover { filter: brightness(1.08); }
#iba .iba-btn:disabled { opacity: .45; cursor: not-allowed; filter: none; }
#iba .iba-btn--ghost { background: var(--iba-panel); color: var(--iba-ink); border-color: var(--iba-border); font-weight: 600; }
#iba .iba-btn--ghost[aria-expanded="true"], #iba .iba-btn--ghost[aria-pressed="true"] { border-color: var(--iba-accent); box-shadow: inset 0 0 0 1px var(--iba-accent); }
#iba .iba-btn--small { min-height: 30px; padding: 0 10px; font-size: .9rem; }
#iba .iba-btn--big { min-height: 44px; padding: 0 20px; font-size: 1.02rem; }
#iba .iba-icon-btn { width: 36px; padding: 0; font-size: 1.05rem; }
#iba :focus-visible { outline: 3px solid var(--iba-focus); outline-offset: 2px; }
#iba .iba-count:empty { display: none; }
#iba .iba-count { background: var(--iba-accent); color: var(--iba-accent-fg); border-radius: 999px; font-size: .75rem; padding: 0 7px; line-height: 18px; }

#iba label.iba-field { display: flex; flex-direction: column; gap: 4px; font-size: .9rem; color: var(--iba-muted); }
#iba .iba-field > span { font-weight: 600; color: var(--iba-ink); }
#iba .iba-field .iba-seg { width: max-content; max-width: 100%; }
#iba select, #iba input[type="text"], #iba input[type="number"] {
  font: inherit; color: var(--iba-ink); background: var(--iba-panel); border: 1px solid var(--iba-border);
  border-radius: 8px; min-height: 36px; padding: 4px 8px;
}
#iba input[type="number"] { width: 110px; }
#iba input[type="range"] { width: 100%; accent-color: var(--iba-accent); min-height: 28px; }
#iba .iba-slider { display: grid; grid-template-columns: 1fr auto; gap: 2px 10px; align-items: center; }
#iba .iba-slider > .iba-slider-label { font-weight: 600; font-size: .9rem; }
#iba .iba-slider > output { font-variant-numeric: tabular-nums; font-size: .9rem; color: var(--iba-muted); }
#iba .iba-slider > input { grid-column: 1 / -1; }
#iba .iba-seg { display: inline-flex; border: 1px solid var(--iba-border); border-radius: 8px; overflow: hidden; flex-wrap: wrap; background: var(--iba-panel); }
#iba .iba-seg button { border: 0; background: transparent; padding: 6px 12px; min-height: 34px; cursor: pointer; font-weight: 600; border-right: 1px solid var(--iba-border); }
#iba .iba-seg button:last-child { border-right: 0; }
#iba .iba-seg button[aria-pressed="true"] { background: var(--iba-accent); color: var(--iba-accent-fg); }
#iba .iba-switch-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 6px 0; }
#iba .iba-switch-row small { display: block; color: var(--iba-muted); font-size: .8rem; }
#iba .iba-switch { position: relative; width: 44px; height: 24px; border-radius: 12px; border: 1px solid var(--iba-border); background: var(--iba-panel-2); cursor: pointer; flex: none; padding: 0; }
#iba .iba-switch::after { content: ''; position: absolute; top: 2px; left: 2px; width: 18px; height: 18px; border-radius: 50%; background: var(--iba-muted); transition: transform .15s, background .15s; }
#iba .iba-switch[aria-checked="true"] { background: var(--iba-accent); border-color: var(--iba-accent); }
#iba .iba-switch[aria-checked="true"]::after { transform: translateX(20px); background: #fff; }
#iba .iba-stepper { display: inline-flex; align-items: center; border: 1px solid var(--iba-border); border-radius: 8px; background: var(--iba-panel); }
#iba .iba-stepper button { width: 32px; min-height: 34px; border: 0; background: transparent; cursor: pointer; font-size: 1.1rem; font-weight: 700; }
#iba .iba-stepper output { min-width: 44px; text-align: center; font-weight: 700; font-variant-numeric: tabular-nums; }

/* ── Gate & home ─────────────────────────────────────────────────────────────────────────────── */
#iba .iba-gate { max-width: 860px; margin: 24px auto; text-align: center; }
#iba .iba-gate-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-top: 18px; }
#iba .iba-gate-card, #iba .iba-home-card {
  display: flex; flex-direction: column; gap: 6px; text-align: left; padding: 18px; border-radius: 12px;
  border: 1px solid var(--iba-border); background: var(--iba-panel); cursor: pointer; box-shadow: var(--tlg-shadow-1, 0 1px 2px rgba(0,0,0,.06));
  transition: border-color .15s, transform .15s;
}
#iba .iba-gate-card:hover, #iba .iba-home-card:hover:not(:disabled) { border-color: var(--iba-accent); }
#iba .iba-gate-title { font-size: 1.25rem; font-weight: 700; }
#iba .iba-gate-desc, #iba .iba-home-desc { color: var(--iba-muted); font-size: .92rem; }
#iba .iba-home-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 16px; flex-wrap: wrap; margin-bottom: 12px; }
#iba .iba-level-chip { display: flex; align-items: center; gap: 10px; font-weight: 700; flex-wrap: wrap; }
#iba .iba-home-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 12px; }
#iba .iba-home-card { position: relative; min-height: 118px; }
#iba .iba-home-card:disabled { cursor: not-allowed; opacity: .5; }
#iba .iba-home-num { font-size: .78rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--iba-accent); }
#iba .iba-home-title { font-weight: 700; font-size: 1.05rem; }
#iba .iba-home-check { position: absolute; top: 12px; right: 12px; width: 26px; height: 26px; border-radius: 50%; background: var(--iba-good); color: #fff; display: grid; place-items: center; font-weight: 700; }
html[data-theme="dark"] #iba .iba-home-check { color: #062014; }
#iba .iba-home-card--test { border-width: 2px; border-color: var(--iba-accent); }
#iba .iba-home-card .iba-ap-tag { font-size: .72rem; font-weight: 700; background: var(--iba-panel-2); border-radius: 999px; padding: 1px 8px; align-self: flex-start; }
#iba .iba-test-banner { background: var(--iba-bad-bg); color: var(--iba-bad); padding: 8px 12px; border-radius: 8px; font-weight: 600; }

/* ── Mode frame ─────────────────────────────────────────────────────────────────────────────── */
#iba .iba-mode { position: relative; }
#iba .iba-mode-head { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; padding: 4px 0 6px; }
#iba .iba-mode-title { flex: 1 1 auto; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
#iba #modeNum { color: var(--iba-accent); font-weight: 700; }
#iba .iba-done-badge { font-size: .8rem; background: var(--iba-good-bg); color: var(--iba-good); border-radius: 999px; padding: 2px 10px; font-weight: 700; }
#iba .iba-mode-tools { display: flex; gap: 8px; flex-wrap: wrap; }
#iba .iba-goal { color: var(--iba-muted); margin: 0 0 8px; max-width: 80ch; }
#iba .iba-popover { position: absolute; right: 150px; top: 46px; z-index: 30; width: 320px; max-height: 60vh; overflow: auto; background: var(--iba-panel); border: 1px solid var(--iba-border); border-radius: 12px; padding: 10px 14px; box-shadow: 0 10px 30px rgba(0,0,0,.18); }
#iba .iba-popover h3 { font-size: .95rem; }
#iba .iba-popover .iba-empty { color: var(--iba-muted); font-size: .9rem; }
#iba .iba-advanced { background: var(--iba-panel); border: 1px solid var(--iba-border); border-radius: 12px; padding: 10px 14px; margin-bottom: 10px; display: flex; flex-wrap: wrap; gap: 12px 24px; align-items: flex-end; }
#iba .iba-advanced > * { min-width: 200px; }
#iba .iba-help { position: absolute; right: 0; top: 46px; z-index: 31; width: 340px; background: var(--iba-panel); border: 1px solid var(--iba-border); border-radius: 12px; padding: 12px 16px; box-shadow: 0 10px 30px rgba(0,0,0,.18); }
#iba .iba-help-head { display: flex; justify-content: space-between; align-items: center; }
#iba .iba-help ul { margin: 6px 0 0; padding-left: 18px; }
#iba .iba-help li { margin-bottom: 8px; }

/* Stage: mode-owned. The common layout is a dark visual plus a side panel. */
#iba .iba-stage-wrap { position: relative; }
#iba .iba-layout { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 12px; align-items: stretch; }
#iba .iba-layout--wide { grid-template-columns: minmax(0, 1fr) 360px; }
#iba .iba-layout--three { grid-template-columns: 250px minmax(0, 1fr) 280px; }
/* Stage look shared by every particle stage (Canvas 2D, SVG and WebGL are all transparent over it): a dark radial
 * field, a faint floor grid in perspective (depth) and a vignette. One static background (the grid is an inline SVG,
 * rasterized once), so it adds no per-frame canvas or compositing work. */
#iba .iba-visual {
  position: relative;
  background:
    radial-gradient(ellipse 75% 70% at 50% 48%, transparent 58%, var(--iba-stage-vignette) 100%),
    var(--iba-stage-grid-img) center bottom / 140% 60% no-repeat,
    radial-gradient(ellipse at 40% 30%, var(--iba-stage-2), var(--iba-stage) 70%);
  border-radius: var(--iba-radius); overflow: hidden; color: var(--iba-stage-ink);
  height: clamp(420px, calc(100vh - 250px), 640px); min-height: 420px;
}
#iba .iba-visual canvas { display: block; width: 100%; height: 100%; touch-action: none; }
#iba .iba-visual .iba-canvas-layer { position: absolute; inset: 0; }
#iba .iba-side { background: var(--iba-panel); border: 1px solid var(--iba-border); border-radius: var(--iba-radius); padding: 12px 14px; display: flex; flex-direction: column; gap: 10px; overflow: auto; max-height: clamp(420px, calc(100vh - 250px), 640px); }
#iba .iba-side h3 { margin: 0; }
#iba .iba-side > * { flex-shrink: 0; }
#iba .iba-primary { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
#iba .iba-readout { background: var(--iba-panel-2); border-radius: 8px; padding: 8px 10px; font-variant-numeric: tabular-nums; }
#iba .iba-readout dl { display: grid; grid-template-columns: auto 1fr; gap: 2px 10px; margin: 0; }
#iba .iba-readout dt { color: var(--iba-muted); }
#iba .iba-readout dd { margin: 0; font-weight: 700; text-align: right; white-space: nowrap; }
#iba .iba-big { font-size: 1.6rem; font-weight: 700; font-variant-numeric: tabular-nums; }
#iba .iba-note { font-size: .86rem; color: var(--iba-muted); }
#iba .iba-msg { border-radius: 8px; padding: 8px 10px; font-size: .92rem; }
#iba .iba-msg--good { background: var(--iba-good-bg); color: var(--iba-good); }
#iba .iba-msg--bad { background: var(--iba-bad-bg); color: var(--iba-bad); }
#iba .iba-msg--info { background: var(--iba-panel-2); }
#iba .iba-msg:empty { display: none; }
#iba .iba-stage-label { position: absolute; z-index: 4; font-size: .85rem; color: var(--iba-stage-muted); pointer-events: none; }
#iba .iba-stage-toolbar { position: absolute; left: 10px; bottom: 10px; display: flex; gap: 8px; flex-wrap: wrap; z-index: 4; }
#iba .iba-stage-toolbar .iba-btn--ghost { background: rgba(21,32,50,.88); color: var(--iba-stage-ink); border-color: #33445e; }
#iba .iba-tabs { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 8px; }
#iba .iba-kbd { font-size: .8rem; color: var(--iba-muted); }

/* ── Periodic table (Mode 2, and the lookup table in Mode 3) ─────────────────────────────────── */
#iba .iba-ptable { display: grid; grid-template-columns: repeat(18, minmax(0, 1fr)); gap: 3px; }
#iba .iba-pcell { aspect-ratio: 1 / 1.05; border-radius: 5px; border: 1px solid var(--iba-border); background: var(--iba-panel); display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 1px; cursor: pointer; font-size: .82rem; line-height: 1.05; position: relative; color: var(--iba-ink); }
#iba .iba-pcell b { font-size: 1.02rem; }
#iba .iba-pcell .iba-pq { font-size: .75rem; font-weight: 700; min-height: 1em; }
#iba .iba-pcell--off { opacity: .35; cursor: default; }
#iba .iba-pcell--gap { border: 0; background: transparent; cursor: default; }
#iba .iba-pcell[aria-pressed="true"] { outline: 3px solid var(--iba-focus); outline-offset: 0; }
#iba .iba-pcell--group { box-shadow: inset 0 0 0 2px var(--iba-accent); }
#iba .iba-pcell.iba-cat, #iba .iba-pcell.iba-an { color: #10141a; }
#iba .iba-groupnums { display: grid; grid-template-columns: repeat(18, minmax(0, 1fr)); gap: 3px; font-size: .72rem; color: var(--iba-muted); text-align: center; margin-bottom: 2px; }
#iba .iba-groupnums button { border: 0; background: transparent; cursor: pointer; font-size: .72rem; color: var(--iba-muted); padding: 2px 0; border-radius: 4px; }
#iba .iba-rule-fig { margin: 8px 0 0; }
#iba .iba-rule-fig figcaption { margin-top: 4px; }
#iba .iba-rule-pic { display: block; max-width: 100%; border-radius: 8px; }
#iba .iba-mini-row { display: flex; align-items: center; gap: 10px; }
#iba .iba-mini-bohr { width: 110px; height: 110px; flex: none; }
#iba .iba-sweep { position: absolute; inset: 0; border-radius: 5px; background: var(--iba-accent); opacity: 0; pointer-events: none; animation: iba-sweep .75s ease-out both; }
@keyframes iba-sweep { 0% { opacity: 0; } 25% { opacity: .55; } 100% { opacity: 0; } }
#iba .iba-sweep-ion { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); pointer-events: none; }
#iba .iba-legend { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; font-size: .82rem; color: var(--iba-muted); margin-top: 6px; }
#iba .iba-legend i { display: inline-block; width: 14px; height: 14px; border-radius: 3px; vertical-align: -2px; margin-right: 4px; }

/* ── Bond Builder ───────────────────────────────────────────────────────────────────────────── */
#iba .iba-tray { display: flex; flex-direction: column; gap: 8px; }
#iba .iba-tray-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; overflow: auto; max-height: calc(clamp(420px, calc(100vh - 250px), 640px) - 110px); padding: 2px; }
#iba .iba-tray-piece { border: 1px solid var(--iba-border); border-radius: 8px; background: var(--iba-panel-2); padding: 4px; cursor: grab; display: flex; flex-direction: column; align-items: center; gap: 2px; touch-action: none; min-height: 58px; }
#iba .iba-tray-piece svg { width: 88%; height: auto; pointer-events: none; }
#iba .iba-tray-piece span { font-size: .78rem; font-weight: 700; pointer-events: none; }
#iba .iba-tray-piece[aria-pressed="true"] { outline: 3px solid var(--iba-focus); }
#iba .iba-tray-piece { position: relative; }
#iba .iba-tray-piece.iba-glow { box-shadow: 0 0 0 3px var(--iba-electron); }
/* Part 1 highlight: a slow breathing glow (opacity only, so it stays on the compositor) */
#iba .iba-tray-piece.iba-glow::after { content: ''; position: absolute; inset: -3px; border-radius: 10px; box-shadow: 0 0 18px 5px var(--iba-electron); opacity: .3; animation: iba-breathe 2.4s ease-in-out infinite; pointer-events: none; }
@keyframes iba-breathe { 0%, 100% { opacity: .2; } 50% { opacity: 1; } }
/* grip hint on draggables (hover, focus, touch) */
#iba .iba-grip { position: absolute; left: 5px; top: 6px; width: 8px; height: 12px; opacity: 0; transition: opacity .15s; pointer-events: none;
  background: radial-gradient(circle, var(--iba-muted) 1.1px, transparent 1.4px) 0 0 / 4px 4px; }
#iba .iba-tray-piece:hover .iba-grip, #iba .iba-tray-piece:focus-visible .iba-grip, #iba .iba-tray-piece:active .iba-grip { opacity: .8; }
#iba .iba-bench-piece { cursor: grab; outline-offset: 3px; }
#iba .iba-bench-piece .iba-grip-svg { opacity: 0; transition: opacity .15s; }
#iba .iba-bench-piece:hover .iba-grip-svg, #iba .iba-bench-piece:focus-visible .iba-grip-svg, #iba .iba-bench-piece:active .iba-grip-svg { opacity: .55; }
#iba .iba-bench-piece.iba-dragsrc { opacity: .25; }
#iba .iba-bench-svg.iba-lite .iba-stripe, #iba .iba-bench-svg.iba-lite .iba-mold, #iba .iba-bench-svg.iba-lite .iba-shadow { display: none; }
#iba .iba-leftover { transform-box: fill-box; transform-origin: center; animation: iba-jiggle .11s ease-in-out 6 alternate; filter: drop-shadow(0 0 5px #fde047); }
#iba .iba-bench-svg.iba-lite .iba-leftover { filter: none; }
@keyframes iba-jiggle { from { transform: translateX(-1.6px) rotate(-4deg); } to { transform: translateX(1.6px) rotate(4deg); } }
#iba .iba-grow-layer { position: absolute; inset: 0; opacity: 0; transition: opacity .2s; pointer-events: none; }
#iba .iba-grow-layer.on { opacity: 1; }
#iba .iba-tray.iba-drop, #iba .iba-tray .iba-drop { box-shadow: inset 0 0 0 3px var(--iba-electron); border-radius: var(--iba-radius); }
#iba .iba-bench { position: relative; }
#iba .iba-bench.iba-drop { box-shadow: inset 0 0 0 3px var(--iba-electron); border-radius: var(--iba-radius); }
#iba .iba-chips { display: flex; flex-wrap: wrap; gap: 4px; }
#iba .iba-chips button { border: 1px solid var(--iba-border); background: var(--iba-panel); border-radius: 999px; padding: 2px 10px; min-height: 28px; font-size: .8rem; font-weight: 600; cursor: pointer; }
#iba .iba-chips button[aria-pressed="true"] { background: var(--iba-accent); color: var(--iba-accent-fg); border-color: var(--iba-accent); }
#iba .iba-bench svg.iba-bench-svg { position: absolute; inset: 0; width: 100%; height: 100%; }
#iba .iba-formula-big { font-size: 2rem; font-weight: 700; letter-spacing: .02em; }
#iba .iba-cross { font-size: 1.05rem; }
#iba .iba-challenge-card { border: 1px solid var(--iba-border); border-radius: 8px; padding: 8px 10px; background: var(--iba-panel-2); }
#iba .iba-dots { display: flex; gap: 4px; flex-wrap: wrap; }
#iba .iba-dots span { width: 12px; height: 12px; border-radius: 50%; background: var(--iba-border); }
#iba .iba-dots span.done { background: var(--iba-good); }
#iba .iba-dots span.cur { box-shadow: 0 0 0 2px var(--iba-focus); }
#iba .iba-builder { display: flex; flex-wrap: wrap; gap: 8px; align-items: flex-end; }
#iba .iba-builder label { display: flex; flex-direction: column; gap: 2px; font-size: .82rem; color: var(--iba-muted); }
#iba .iba-builder .iba-paren { min-height: 34px; }

/* The lifted puzzle piece: moved with transform (a composited layer), its shadow grows as it lifts. */
.iba-lifted { position: fixed; left: 0; top: 0; z-index: 80; pointer-events: none; width: 116px; will-change: transform;
  filter: drop-shadow(0 3px 4px rgba(0,0,0,.3)); transition: filter .18s ease-out; }
.iba-lifted.up { filter: drop-shadow(0 14px 14px rgba(0,0,0,.38)); }
.iba-lifted.iba-lite { filter: none; }
.iba-lifted svg { width: 100%; height: auto; display: block; }

/* ── Shell additions: mode links, coach marks, first-visit wiggle, home progress ────────────────── */
#iba .iba-link { align-self: flex-start; border-style: dashed; }
#iba .iba-wiggle { animation: iba-wiggle .5s ease-in-out 2; }
@keyframes iba-wiggle { 25% { transform: rotate(-3deg); } 75% { transform: rotate(3deg); } }
#iba { position: relative; }
#iba .iba-coach-spot { position: absolute; z-index: 90; border-radius: 10px; box-shadow: 0 0 0 3px var(--iba-electron), 0 0 0 9999px rgba(8,12,20,.45); pointer-events: none; transition: all .25s; }
#iba .iba-coach { position: absolute; z-index: 91; background: var(--iba-panel); color: var(--iba-ink); border: 1px solid var(--iba-border); border-radius: 12px; padding: 12px 14px; box-shadow: 0 12px 30px rgba(0,0,0,.3); }
#iba .iba-coach p { margin: 0 0 8px; }
#iba .iba-coach-row { display: flex; align-items: center; gap: 8px; justify-content: flex-end; }
#iba .iba-coach-row .iba-note { margin-right: auto; }
#iba .iba-progress { margin-top: 16px; background: var(--iba-panel); border: 1px solid var(--iba-border); border-radius: 12px; padding: 12px 16px; max-width: 760px; }
#iba .iba-progress-row { display: grid; grid-template-columns: 200px 1fr 70px; gap: 12px; align-items: center; padding: 3px 0; }
#iba .iba-progress-row b { text-align: right; font-variant-numeric: tabular-nums; }
#iba .iba-progress-bar { height: 8px; border-radius: 4px; background: var(--iba-panel-2); overflow: hidden; }
#iba .iba-progress-bar > i { display: block; height: 100%; background: var(--iba-accent); }
#iba .iba-progress-modes { list-style: none; margin: 8px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 4px 14px; font-size: .88rem; color: var(--iba-muted); }
#iba .iba-progress-modes li.done { color: var(--iba-good); font-weight: 600; }
#iba .iba-sound-row { border-top: 1px dashed var(--iba-border); }

/* ── Ranking list (Modes 7, 8, tests) ───────────────────────────────────────────────────────── */
#iba .iba-rank { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
#iba .iba-rank li { display: flex; align-items: center; gap: 8px; padding: 6px 8px; border: 1px solid var(--iba-border); border-radius: 8px; background: var(--iba-panel); cursor: grab; touch-action: none; }
#iba .iba-rank li.dragging { opacity: .6; border-style: dashed; }
#iba .iba-rank li .iba-rank-grip { width: 8px; height: 14px; flex: none; opacity: .3; transition: opacity .15s; background: radial-gradient(circle, var(--iba-muted) 1.1px, transparent 1.4px) 0 0 / 4px 4px; }
#iba .iba-rank li:hover .iba-rank-grip, #iba .iba-rank li:focus-visible .iba-rank-grip, #iba .iba-rank li:active .iba-rank-grip { opacity: .9; }
#iba .iba-rank li .iba-rank-n { width: 22px; font-weight: 700; color: var(--iba-muted); }
#iba .iba-rank li .iba-rank-label { flex: 1; font-weight: 700; }
#iba .iba-rank li .iba-rank-move { display: inline-flex; gap: 2px; }
#iba .iba-rank li .iba-rank-move button { width: 30px; min-height: 30px; border: 1px solid var(--iba-border); border-radius: 6px; background: var(--iba-panel-2); cursor: pointer; }
#iba .iba-rank--row { flex-direction: row; flex-wrap: wrap; }
#iba .iba-rank--row li { flex-direction: column; min-width: 86px; text-align: center; }

/* ── Test ───────────────────────────────────────────────────────────────────────────────────── */
#iba .iba-test-card { background: var(--iba-panel); border: 1px solid var(--iba-border); border-radius: 12px; padding: 16px 18px; max-width: 1100px; }
#iba .iba-test-progress { display: flex; justify-content: space-between; color: var(--iba-muted); font-size: .9rem; margin-bottom: 8px; }
#iba .iba-test-bar { height: 6px; border-radius: 3px; background: var(--iba-panel-2); overflow: hidden; margin-bottom: 12px; }
#iba .iba-test-bar > i { display: block; height: 100%; background: var(--iba-accent); }
#iba .iba-test-prompt { font-size: 1.08rem; font-weight: 600; margin-bottom: 10px; }
#iba .iba-choices { display: flex; flex-direction: column; gap: 6px; }
#iba .iba-choice { display: flex; gap: 10px; align-items: flex-start; text-align: left; padding: 8px 12px; border-radius: 8px; border: 1px solid var(--iba-border); background: var(--iba-panel); cursor: pointer; min-height: 40px; }
#iba .iba-choice[aria-checked="true"] { border-color: var(--iba-accent); box-shadow: inset 0 0 0 2px var(--iba-accent); }
#iba .iba-choice .iba-letter { font-weight: 700; color: var(--iba-muted); }
#iba .iba-test-nav { display: flex; justify-content: space-between; margin-top: 14px; gap: 8px; }
#iba .iba-figure { background: var(--iba-stage); border-radius: 8px; margin: 6px 0 10px; width: 100%; max-width: 520px; height: 200px; display: block; }
#iba .iba-results table { border-collapse: collapse; width: 100%; max-width: 640px; margin: 8px 0 14px; }
#iba .iba-results th, #iba .iba-results td { text-align: left; padding: 6px 8px; border-bottom: 1px solid var(--iba-border); }
#iba .iba-review-item { border-left: 4px solid var(--iba-bad); padding: 6px 10px; margin: 8px 0; background: var(--iba-panel-2); border-radius: 0 8px 8px 0; }
#iba .iba-test-puzzle .iba-visual { height: 440px; min-height: 440px; }
#iba .iba-test-puzzle .iba-tray-list { max-height: 380px; }
#iba .iba-choice--right { border-color: var(--iba-good); box-shadow: inset 0 0 0 2px var(--iba-good); background: var(--iba-good-bg); }
#iba .iba-choice--wrong { border-color: var(--iba-bad); border-style: dashed; }
#iba .iba-choice-tag { margin-left: auto; font-size: .8rem; font-weight: 700; white-space: nowrap; }
#iba .iba-choice--right .iba-choice-tag { color: var(--iba-good); }
#iba .iba-choice--wrong .iba-choice-tag { color: var(--iba-bad); }
#iba .iba-review-right { border: 2px solid var(--iba-good); border-radius: 8px; padding: 2px 10px; display: inline-block; }

/* ── Toast, fps ─────────────────────────────────────────────────────────────────────────────── */
#iba .iba-toast { position: fixed; left: 50%; bottom: 24px; transform: translateX(-50%); background: var(--tlg-toast-bg, #1f2937); color: var(--tlg-toast-text, #fff); padding: 10px 16px; border-radius: 10px; z-index: 60; max-width: min(560px, 90vw); box-shadow: 0 8px 24px rgba(0,0,0,.25); }
#iba .iba-fps { position: fixed; right: 8px; bottom: 8px; background: #000c; color: #9f9; font: 12px monospace; padding: 2px 6px; border-radius: 4px; z-index: 70; }

/* ── Narrow screens ─────────────────────────────────────────────────────────────────────────── */
@media (max-width: 1000px) {
  #iba .iba-layout, #iba .iba-layout--wide, #iba .iba-layout--three { grid-template-columns: 1fr; }
  #iba .iba-side { max-height: none; }
  #iba .iba-gate-grid { grid-template-columns: 1fr; }
  #iba .iba-popover { right: 8px; }
}
@media (prefers-reduced-motion: reduce) {
  #iba *, .iba-lifted { transition: none !important; animation: none !important; }
  #iba .iba-tray-piece.iba-glow::after { opacity: .8; }
}
/* Touch screens: bigger targets for pieces, ranking rows and small buttons (≥ 24 px everywhere, most ≥ 44 px). */
@media (pointer: coarse) {
  #iba .iba-tray-piece { min-height: 66px; }
  #iba .iba-rank li { min-height: 48px; }
  #iba .iba-rank li .iba-rank-move button { width: 40px; min-height: 40px; }
  #iba .iba-btn--small { min-height: 40px; }
  #iba .iba-chips button { min-height: 36px; }
  #iba .iba-grip, #iba .iba-bench-piece .iba-grip-svg { opacity: .5; }
}