/* Infin8 Neon UI kit: one shared component layer for every Infin8 game.
   Requires infin8-ui-tokens.css first. Animations touch only opacity and
   transform; all stop under prefers-reduced-motion and inside .i8-paused. */

/* ---- Root, galaxy, wordmark ------------------------------------------- */
.i8-root { color: var(--i8-text); font: 500 var(--i8-fs-md)/1.45 var(--i8-font); --gp-focus-color: var(--i8-cyan-bright); -webkit-tap-highlight-color: transparent; }
.i8-root *, .i8-root *::before, .i8-root *::after { box-sizing: border-box; }
.i8-galaxy { position: relative; background: var(--i8-galaxy); background-color: var(--i8-base); isolation: isolate; }
.i8-galaxy::before {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; opacity: .7;
  background:
    radial-gradient(1px 1px at 12% 22%, #fff, transparent), radial-gradient(1px 1px at 68% 14%, #cfe9ff, transparent),
    radial-gradient(1.5px 1.5px at 84% 62%, #fff, transparent), radial-gradient(1px 1px at 34% 78%, #e8d9ff, transparent),
    radial-gradient(1px 1px at 52% 44%, #fff, transparent), radial-gradient(1.5px 1.5px at 22% 56%, #bff5ff, transparent),
    radial-gradient(1px 1px at 92% 30%, #fff, transparent), radial-gradient(1px 1px at 6% 90%, #ffd9fb, transparent);
  animation: i8-twinkle 6s ease-in-out infinite alternate;
}
.i8-wordmark { display: inline-flex; align-items: baseline; font: 900 var(--i8-fs-2xl)/1 var(--i8-font); letter-spacing: -.01em; text-transform: uppercase; }
.i8-wordmark__chrome { background: var(--i8-grad-chrome); -webkit-background-clip: text; background-clip: text; color: transparent; filter: drop-shadow(0 0 6px rgba(127, 240, 255, .35)); }
.i8-wordmark__8 { margin: 0 -.02em; font-size: 1.35em; background: linear-gradient(170deg, var(--i8-cyan) 10%, var(--i8-blue) 45%, var(--i8-violet) 65%, var(--i8-magenta) 92%); -webkit-background-clip: text; background-clip: text; color: transparent; filter: drop-shadow(0 0 10px rgba(230, 76, 255, .55)); }
.i8-eyebrow { color: var(--i8-cyan); font: 800 var(--i8-fs-xs)/1.2 var(--i8-font); letter-spacing: var(--i8-track-wide); text-transform: uppercase; }
.i8-muted { color: var(--i8-muted); }
.i8-sr-only { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* Brand art (brand/): the approved chrome INFIN + glossy 8 logotype cut from the
   core wordmark, the core banner's two nebula edges and one Neon knob frame. */
.i8-logotype { display: block; width: min(100%, var(--i8-logo-w, 320px)); height: auto; aspect-ratio: 720 / 267; filter: drop-shadow(0 0 10px rgba(77, 232, 255, .45)) drop-shadow(0 0 22px rgba(230, 76, 255, .3)); animation: i8-pulse var(--i8-t-pulse) ease-in-out infinite alternate; }
.i8-galaxy--art { background: url("brand/galaxy-left.webp") left center / auto 100% no-repeat, url("brand/galaxy-right.webp") right center / auto 100% no-repeat, var(--i8-galaxy); background-color: var(--i8-base); }
.i8-knob { display: block; width: var(--i8-knob, 56px); aspect-ratio: 1; border-radius: 50%; background: url("brand/knob.webp") center / contain no-repeat; filter: drop-shadow(0 0 8px rgba(77, 232, 255, .55)); }
.i8-title-grad { background: var(--i8-grad); -webkit-background-clip: text; background-clip: text; color: transparent; filter: drop-shadow(0 0 8px rgba(139, 92, 246, .55)); }
.i8-tabs { display: flex; flex-wrap: wrap; gap: 6px; padding: 4px; border: 1px solid var(--i8-line-soft); border-radius: var(--i8-r-control); background: rgba(9, 12, 24, .6); }
.i8-tabs > button { flex: 1 1 auto; min-height: var(--i8-touch); padding: 0 var(--i8-s3); border: 1px solid transparent; border-radius: var(--i8-r-compact); background: transparent; color: var(--i8-muted); font: 800 var(--i8-fs-xs)/1 var(--i8-font); letter-spacing: var(--i8-track); text-transform: uppercase; cursor: pointer; }
.i8-tabs > button:hover { color: var(--i8-text); border-color: rgba(127, 240, 255, .35); }
.i8-tabs > [aria-selected="true"], .i8-tabs > [aria-pressed="true"] { color: #fff; border-color: var(--i8-cyan); background: linear-gradient(160deg, #2a6cf0, #5b2bd8 60%, #a81fc4); box-shadow: 0 0 12px rgba(77, 232, 255, .4), var(--i8-inset); }

/* ---- Glass panels / frames -------------------------------------------- */
.i8-panel {
  position: relative; isolation: isolate; padding: var(--i8-s4); border-radius: var(--i8-r-panel); color: var(--i8-text);
  background: var(--i8-grad-glass), var(--i8-glass-bg);
  -webkit-backdrop-filter: blur(var(--i8-glass-blur)); backdrop-filter: blur(var(--i8-glass-blur));
  box-shadow: var(--i8-inset), var(--i8-shadow);
}
.i8-panel::before { /* gradient neon border */
  content: ""; position: absolute; inset: 0; z-index: -1; padding: 1px; border-radius: inherit; pointer-events: none;
  background: var(--i8-grad-diag); opacity: .75;
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
}
.i8-panel--solid { background: var(--i8-grad-glass), var(--i8-glass-bg-strong); }
.i8-panel--glow::after {
  content: ""; position: absolute; inset: 0; z-index: -2; border-radius: inherit; pointer-events: none;
  box-shadow: var(--i8-glow-3); opacity: .55; animation: i8-pulse var(--i8-t-pulse) ease-in-out infinite alternate;
}
.i8-panel--glow::before { opacity: 1; }
.i8-panel--hud { border-radius: var(--i8-r-compact); clip-path: polygon(14px 0, calc(100% - 14px) 0, 100% 14px, 100% calc(100% - 14px), calc(100% - 14px) 100%, 14px 100%, 0 calc(100% - 14px), 0 14px); }
.i8-panel--hud::after { /* bright corner brackets */
  content: ""; position: absolute; inset: 3px; pointer-events: none;
  background:
    linear-gradient(var(--i8-cyan), var(--i8-cyan)) left 12px top 0 / 26px 2px,
    linear-gradient(var(--i8-cyan), var(--i8-cyan)) left 0 top 12px / 2px 26px,
    linear-gradient(var(--i8-magenta), var(--i8-magenta)) right 12px bottom 0 / 26px 2px,
    linear-gradient(var(--i8-magenta), var(--i8-magenta)) right 0 bottom 12px / 2px 26px;
  background-repeat: no-repeat; filter: drop-shadow(0 0 4px var(--i8-cyan));
}
.i8-panel__title { margin: 0 0 var(--i8-s2); font: 800 var(--i8-fs-lg)/1.2 var(--i8-font); letter-spacing: .02em; }

/* Circular HUD ring: rotating dashed arc around a glass core. */
.i8-ring { position: relative; display: grid; place-items: center; width: var(--i8-ring-size, 120px); aspect-ratio: 1; border-radius: 50%; background: radial-gradient(circle, rgba(13, 17, 28, .85) 55%, transparent 56%); }
.i8-ring::before, .i8-ring::after { content: ""; position: absolute; border-radius: 50%; pointer-events: none; }
.i8-ring::before { inset: 0; background: var(--i8-grad-ring); -webkit-mask: radial-gradient(circle, transparent 62%, #000 63% 67%, transparent 68%); mask: radial-gradient(circle, transparent 62%, #000 63% 67%, transparent 68%); filter: drop-shadow(0 0 6px var(--i8-cyan)); }
.i8-ring::after { inset: -6px; background: repeating-conic-gradient(var(--i8-cyan) 0 14deg, transparent 14deg 30deg); -webkit-mask: radial-gradient(circle, transparent 68%, #000 69% 72%, transparent 73%); mask: radial-gradient(circle, transparent 68%, #000 69% 72%, transparent 73%); opacity: .8; animation: i8-spin 14s linear infinite; }
.i8-ring__label { position: relative; text-align: center; font: 800 var(--i8-fs-lg)/1.1 var(--i8-font); }
.i8-ring__label small { display: block; color: var(--i8-muted); font-size: var(--i8-fs-xs); letter-spacing: var(--i8-track); text-transform: uppercase; }

/* ---- Buttons ------------------------------------------------------------ */
.i8-btn {
  --i8-fill: linear-gradient(160deg, #2a6cf0, #1d3fc8 55%, #1a2a9a);
  --i8-edge: var(--i8-cyan); --i8-halo: rgba(77, 232, 255, .5);
  position: relative; isolation: isolate; overflow: hidden; display: inline-flex; align-items: center; justify-content: center; gap: var(--i8-s2);
  min-height: var(--i8-touch); min-width: var(--i8-touch); padding: 0 var(--i8-s4);
  border: 1.5px solid var(--i8-edge); border-radius: var(--i8-r-control);
  background: var(--i8-fill); color: var(--i8-on-neon);
  font: 800 var(--i8-fs-sm)/1 var(--i8-font); letter-spacing: var(--i8-track); text-transform: uppercase; text-decoration: none; white-space: nowrap;
  box-shadow: var(--i8-inset), 0 0 12px var(--i8-halo); cursor: pointer; user-select: none; touch-action: manipulation;
  transition: transform var(--i8-t-fast) var(--i8-ease), box-shadow var(--i8-t-med) var(--i8-ease), border-color var(--i8-t-med);
}
.i8-btn::before { /* hover/idle glow layer */
  content: ""; position: absolute; inset: 0; z-index: -1; background: radial-gradient(120% 90% at 50% 0%, rgba(255, 255, 255, .28), transparent 60%); opacity: .6; transition: opacity var(--i8-t-med);
}
.i8-btn::after { /* sheen sweep */
  content: ""; position: absolute; top: 0; bottom: 0; left: 0; width: 40%; z-index: -1;
  background: linear-gradient(100deg, transparent, rgba(255, 255, 255, .32), transparent);
  transform: translateX(-160%) skewX(-18deg); pointer-events: none;
}
.i8-btn:hover:not(:disabled):not([aria-disabled="true"]), .i8-btn.is-hover { --i8-fill: linear-gradient(160deg, #7a3cf0, #5b2bd8 55%, #3d1fa8); --i8-edge: var(--i8-purple-light); --i8-halo: rgba(155, 109, 255, .65); }
.i8-btn:hover:not(:disabled)::before { opacity: 1; }
.i8-btn:hover:not(:disabled)::after, .i8-btn:focus-visible::after { animation: i8-sheen .9s var(--i8-ease) 1; }
.i8-btn:active:not(:disabled), .i8-btn.is-active, .i8-btn[aria-pressed="true"] { --i8-fill: linear-gradient(160deg, #d03ce8, #a81fc4 55%, #7a1aa0); --i8-edge: #ff8bf0; --i8-halo: rgba(230, 76, 255, .7); }
.i8-btn:active:not(:disabled) { transform: translateY(1px) scale(.98); }
.i8-btn:disabled, .i8-btn[aria-disabled="true"] { --i8-fill: linear-gradient(160deg, #2a2f3d, #1c202b); --i8-edge: #4a5166; --i8-halo: transparent; color: #a6adbf; cursor: not-allowed; }
.i8-btn:disabled::before { opacity: 0; }
.i8-btn--ghost { --i8-fill: rgba(12, 18, 36, .7); --i8-halo: rgba(77, 232, 255, .25); }
.i8-btn--hot { --i8-fill: linear-gradient(160deg, #a33cf0, #8a1fc4 55%, #5a1aa0); --i8-edge: var(--i8-magenta); --i8-halo: rgba(230, 76, 255, .55); }
.i8-btn--live { --i8-halo: rgba(77, 232, 255, .6); }
.i8-btn--live::before { animation: i8-pulse var(--i8-t-pulse) ease-in-out infinite alternate; }
.i8-btn--sm { min-height: 36px; padding: 0 var(--i8-s3); font-size: var(--i8-fs-xs); }
@media (pointer: coarse) { .i8-btn--sm { min-height: var(--i8-touch); } }
.i8-btn--block { display: flex; width: 100%; }
.i8-btn__icon { flex: none; width: 1.35em; height: 1.35em; fill: currentColor; filter: drop-shadow(0 0 4px rgba(255, 255, 255, .45)); }

/* Square icon tiles: 44px touch, 48px HUD. */
.i8-icon-btn {
  position: relative; display: inline-grid; place-items: center; width: var(--i8-touch); height: var(--i8-touch); padding: 0;
  border: 1.5px solid rgba(127, 240, 255, .55); border-radius: var(--i8-r-control);
  background: linear-gradient(160deg, rgba(30, 44, 80, .9), rgba(12, 16, 32, .92)); color: var(--i8-text);
  box-shadow: var(--i8-inset), 0 0 10px rgba(77, 232, 255, .22); cursor: pointer; touch-action: manipulation;
  transition: transform var(--i8-t-fast) var(--i8-ease), border-color var(--i8-t-med), box-shadow var(--i8-t-med);
}
.i8-icon-btn svg { width: 22px; height: 22px; fill: currentColor; }
.i8-icon-btn:hover:not(:disabled) { border-color: var(--i8-cyan-bright); box-shadow: var(--i8-inset), var(--i8-glow-2); }
.i8-icon-btn:active:not(:disabled), .i8-icon-btn[aria-pressed="true"] { transform: scale(.94); border-color: var(--i8-magenta); color: #fff; box-shadow: var(--i8-inset), var(--i8-glow-hot); }
.i8-icon-btn:disabled { opacity: .5; cursor: not-allowed; }
.i8-icon-btn--hud { width: var(--i8-touch-hud); height: var(--i8-touch-hud); border-radius: 50%; background: rgba(9, 12, 24, .5); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
.i8-icon-btn--hud svg { width: 24px; height: 24px; }
.i8-icon-btn--gem { border-color: rgba(230, 76, 255, .6); box-shadow: var(--i8-inset), 0 0 10px rgba(230, 76, 255, .3); }

/* Focus: keyboard and gamepad share one visible ring (not glow alone). */
.i8-root :focus-visible, .i8-root .gp-focus { outline: 3px solid var(--i8-cyan-bright) !important; outline-offset: 3px !important; box-shadow: 0 0 0 6px rgba(7, 9, 16, .85), 0 0 18px 4px rgba(230, 76, 255, .55) !important; }

/* ---- Inputs ------------------------------------------------------------- */
.i8-field { display: flex; align-items: center; gap: var(--i8-s3); min-height: var(--i8-touch); color: var(--i8-text-soft); font-size: var(--i8-fs-sm); }
.i8-field--stack { flex-direction: column; align-items: stretch; gap: var(--i8-s1); }
.i8-toggle {
  -webkit-appearance: none; appearance: none; position: relative; flex: none; width: 52px; height: 30px; margin: 7px 0; border-radius: var(--i8-r-pill); cursor: pointer;
  background: #1a2032; border: 1.5px solid #4a5166; transition: border-color var(--i8-t-med);
}
.i8-toggle::before { content: ""; position: absolute; inset: 0; border-radius: inherit; background: var(--i8-grad); opacity: 0; transition: opacity var(--i8-t-med); }
.i8-toggle::after { content: ""; position: absolute; top: 3px; left: 3px; width: 21px; height: 21px; border-radius: 50%; background: #e4e8f4; box-shadow: 0 1px 4px rgba(0, 0, 0, .5); transition: transform var(--i8-t-med) var(--i8-ease); }
.i8-toggle:checked { border-color: var(--i8-cyan); box-shadow: 0 0 12px rgba(77, 232, 255, .45); }
.i8-toggle:checked::before { opacity: 1; }
.i8-toggle:checked::after { transform: translateX(22px); background: #fff; }
.i8-toggle:disabled { opacity: .5; cursor: not-allowed; }

.i8-slider { -webkit-appearance: none; appearance: none; width: 100%; height: var(--i8-touch); margin: 0; background: transparent; cursor: pointer; --i8-fill: 50%; }
.i8-slider::-webkit-slider-runnable-track { height: 6px; border-radius: var(--i8-r-pill); background: var(--i8-grad) 0 0 / var(--i8-fill) 100% no-repeat, #1e2436; }
.i8-slider::-moz-range-track { height: 6px; border-radius: var(--i8-r-pill); background: #1e2436; }
.i8-slider::-moz-range-progress { height: 6px; border-radius: var(--i8-r-pill); background: var(--i8-grad); }
.i8-slider::-webkit-slider-thumb { -webkit-appearance: none; width: 22px; height: 22px; margin-top: -8px; border: 3px solid #fff; border-radius: 50%; background: var(--i8-cyan); box-shadow: 0 0 10px var(--i8-cyan), 0 0 22px rgba(139, 92, 246, .6); }
.i8-slider::-moz-range-thumb { width: 18px; height: 18px; border: 3px solid #fff; border-radius: 50%; background: var(--i8-cyan); box-shadow: 0 0 10px var(--i8-cyan); }

.i8-select { position: relative; display: inline-flex; min-width: 160px; }
.i8-select select, .i8-input {
  -webkit-appearance: none; appearance: none; width: 100%; min-height: var(--i8-touch); padding: 0 40px 0 var(--i8-s3);
  border: 1.5px solid rgba(146, 155, 179, .45); border-radius: var(--i8-r-control); background: rgba(9, 12, 24, .8); color: var(--i8-text);
  font: 600 var(--i8-fs-sm)/1 var(--i8-font); transition: border-color var(--i8-t-med), box-shadow var(--i8-t-med);
}
.i8-input { padding-right: var(--i8-s3); }
.i8-input::placeholder { color: var(--i8-muted); }
.i8-select select option { background: var(--i8-panel-solid); color: var(--i8-text); }
.i8-select::after { content: ""; position: absolute; right: 16px; top: 50%; width: 8px; height: 8px; border: solid var(--i8-cyan); border-width: 0 2px 2px 0; transform: translateY(-70%) rotate(45deg); pointer-events: none; }
.i8-select select:hover, .i8-input:hover, .i8-select select:focus, .i8-input:focus { border-color: var(--i8-cyan); box-shadow: 0 0 12px rgba(77, 232, 255, .3); }

.i8-segmented { display: inline-flex; gap: 2px; padding: 3px; border: 1.5px solid rgba(146, 155, 179, .35); border-radius: var(--i8-r-control); background: rgba(9, 12, 24, .75); }
.i8-segmented label { position: relative; display: flex; }
.i8-segmented input { position: absolute; inset: 0; margin: 0; opacity: 0; cursor: pointer; }
.i8-segmented span { display: grid; place-items: center; min-height: 38px; min-width: 44px; padding: 0 var(--i8-s3); border-radius: var(--i8-r-compact); color: var(--i8-muted); font: 800 var(--i8-fs-xs)/1 var(--i8-font); letter-spacing: var(--i8-track); text-transform: uppercase; transition: color var(--i8-t-med), background-color var(--i8-t-med); }
.i8-segmented input:hover + span { color: var(--i8-text); }
.i8-segmented input:checked + span { color: #fff; background: linear-gradient(160deg, #2a6cf0, #5b2bd8); box-shadow: 0 0 12px rgba(77, 232, 255, .4), var(--i8-inset); }
.i8-segmented input:focus-visible + span, .i8-segmented input.gp-focus + span { outline: 3px solid var(--i8-cyan-bright); outline-offset: 1px; }
.i8-root .i8-segmented input:focus-visible, .i8-root .i8-segmented input.gp-focus { outline: none !important; box-shadow: none !important; }

/* ---- Badges ------------------------------------------------------------- */
.i8-badge {
  --i8-b: #0a6fb0; --i8-bl: var(--i8-cyan);
  display: inline-flex; align-items: center; gap: 4px; min-height: 24px; padding: 0 10px; border: 1.5px solid var(--i8-bl); border-radius: var(--i8-r-pill);
  background: var(--i8-b); color: #fff; font: 800 var(--i8-fs-xs)/1 var(--i8-font); letter-spacing: var(--i8-track); text-transform: uppercase; white-space: nowrap;
  box-shadow: 0 0 10px color-mix(in srgb, var(--i8-bl) 55%, transparent);
}
.i8-badge--new { --i8-b: #0a6fb0; --i8-bl: var(--i8-cyan); }
.i8-badge--pro { --i8-b: #5b2ee0; --i8-bl: var(--i8-purple-light); }
.i8-badge--beta { --i8-b: #b0209f; --i8-bl: var(--i8-pink); }
.i8-badge--live { --i8-b: #c8102e; --i8-bl: #ff6b80; }
.i8-badge--live::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: #fff; animation: i8-pulse 1s ease-in-out infinite alternate; }
.i8-badge--dev { --i8-b: #1d4ed8; --i8-bl: #6aa0ff; }
.i8-badge--audio { --i8-b: #6d28d9; --i8-bl: var(--i8-purple); }
.i8-badge--app { --i8-b: #a21caf; --i8-bl: var(--i8-magenta); }
.i8-badge--game { --i8-b: #0369a1; --i8-bl: var(--i8-cyan-bright); }

/* ---- Progress, loaders, dividers ----------------------------------------- */
.i8-progress { position: relative; overflow: hidden; height: 12px; border: 1px solid rgba(127, 240, 255, .4); border-radius: var(--i8-r-pill); background: rgba(9, 12, 24, .85); --i8-value: .5; }
.i8-progress__bar { position: absolute; inset: 0; background: var(--i8-grad); transform: scaleX(var(--i8-value)); transform-origin: left; box-shadow: 0 0 12px rgba(77, 232, 255, .6); transition: transform var(--i8-t-slow) var(--i8-ease); }
.i8-progress--striped .i8-progress__bar::after { content: ""; position: absolute; inset: 0 -40px 0 0; background: repeating-linear-gradient(-45deg, rgba(255, 255, 255, .28) 0 8px, transparent 8px 16px); animation: i8-stripes .8s linear infinite; }
.i8-progress--segmented .i8-progress__bar { -webkit-mask: repeating-linear-gradient(90deg, #000 0 10px, transparent 10px 13px); mask: repeating-linear-gradient(90deg, #000 0 10px, transparent 10px 13px); }

.i8-loader-ring { display: inline-block; width: var(--i8-loader, 40px); aspect-ratio: 1; border-radius: 50%; background: conic-gradient(from 0deg, transparent 0 15%, var(--i8-cyan), var(--i8-violet), var(--i8-magenta)); -webkit-mask: radial-gradient(circle, transparent 58%, #000 60%); mask: radial-gradient(circle, transparent 58%, #000 60%); filter: drop-shadow(0 0 6px var(--i8-violet)); animation: i8-spin var(--i8-t-spin) linear infinite; }
.i8-loader-dots { display: inline-flex; gap: 6px; }
.i8-loader-dots i { width: 9px; height: 9px; border-radius: 50%; background: var(--i8-cyan); box-shadow: 0 0 8px var(--i8-cyan); animation: i8-dot 1s ease-in-out infinite; }
.i8-loader-dots i:nth-child(2) { background: var(--i8-violet); animation-delay: .15s; }
.i8-loader-dots i:nth-child(3) { background: var(--i8-magenta); animation-delay: .3s; }
.i8-loader-bars { display: inline-flex; align-items: flex-end; gap: 3px; height: 28px; }
.i8-loader-bars i { width: 4px; height: 100%; border-radius: 2px; background: var(--i8-grad-diag); transform-origin: bottom; animation: i8-eq .9s ease-in-out infinite alternate; }
.i8-loader-bars i:nth-child(2) { animation-delay: -.3s; } .i8-loader-bars i:nth-child(3) { animation-delay: -.6s; } .i8-loader-bars i:nth-child(4) { animation-delay: -.15s; }

.i8-divider { height: 2px; margin: var(--i8-s4) 0; border: 0; border-radius: 2px; background: var(--i8-grad); box-shadow: 0 0 8px rgba(77, 232, 255, .5); }
.i8-divider--fade { background: linear-gradient(90deg, transparent, var(--i8-cyan) 20%, var(--i8-violet) 50%, var(--i8-magenta) 80%, transparent); }
.i8-divider--dots { height: 4px; background: radial-gradient(circle, var(--i8-cyan) 1.5px, transparent 2px) 0 0 / 10px 4px; box-shadow: none; }
.i8-accent { position: relative; padding-left: var(--i8-s3); }
.i8-accent::before { content: ""; position: absolute; left: 0; top: 10%; bottom: 10%; width: 3px; border-radius: 2px; background: linear-gradient(var(--i8-cyan), var(--i8-magenta)); box-shadow: 0 0 8px var(--i8-cyan); }

/* ---- Pop-up sheet (native <dialog>: Esc + focus trap built in) ------------ */
.i8-sheet {
  position: fixed; z-index: var(--i8-z-sheet); inset: auto 0 0 0; width: 100%; max-width: 100%; max-height: min(86vh, 720px); margin: 0; padding: 0;
  border: 0; border-radius: var(--i8-r-panel) var(--i8-r-panel) 0 0; color: var(--i8-text); overflow: visible;
  background: transparent;
}
.i8-sheet[open] { display: flex; animation: i8-rise var(--i8-t-slow) var(--i8-ease); }
.i8-sheet::backdrop { background: rgba(3, 4, 10, .62); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); }
.i8-sheet > .i8-panel { display: flex; flex-direction: column; width: 100%; max-height: inherit; padding: 0; border-radius: inherit; padding-bottom: env(safe-area-inset-bottom); }
.i8-sheet__head { display: flex; align-items: center; justify-content: space-between; gap: var(--i8-s3); padding: var(--i8-s4) var(--i8-s4) var(--i8-s2); }
.i8-sheet__title { margin: 0; font: 900 var(--i8-fs-lg)/1.2 var(--i8-font); letter-spacing: .04em; text-transform: uppercase; }
.i8-sheet__body { display: grid; gap: var(--i8-s2); padding: var(--i8-s2) var(--i8-s4); overflow-y: auto; overscroll-behavior: contain; }
.i8-sheet__foot { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: var(--i8-s2); padding: var(--i8-s3) var(--i8-s4) var(--i8-s4); border-top: 1px solid var(--i8-line-soft); }
.i8-sheet__row { display: flex; align-items: center; justify-content: space-between; gap: var(--i8-s3); min-height: 52px; padding: 4px var(--i8-s3); border-radius: var(--i8-r-control); background: rgba(255, 255, 255, .03); }
.i8-sheet__row > :first-child { color: var(--i8-text-soft); font-weight: 650; }
@media (min-width: 720px) {
  .i8-sheet { inset: 0; width: min(560px, calc(100% - 48px)); margin: auto; border-radius: var(--i8-r-panel); }
}

/* ---- HUD layout: corners and edges only; the centre stays clear ----------- */
.i8-hud {
  position: absolute; inset: 0; z-index: var(--i8-z-hud); pointer-events: none; display: grid; gap: var(--i8-s2);
  grid-template: "tl top tr" auto ". . ." 1fr "bl bottom br" auto / minmax(0, 1fr) auto minmax(0, 1fr);
  padding: var(--i8-safe-t) var(--i8-safe-r) var(--i8-safe-b) var(--i8-safe-l);
}
.i8-hud > * { pointer-events: auto; }
@media (max-width: 560px) { .i8-hud { grid-template: "tl tr" auto "top top" auto ". ." 1fr "bottom bottom" auto "bl br" auto / minmax(0, 1fr) minmax(0, 1fr); } }
.i8-hud__tl { grid-area: tl; justify-self: start; align-self: start; }
.i8-hud__top { grid-area: top; justify-self: center; align-self: start; }
.i8-hud__tr { grid-area: tr; justify-self: end; align-self: start; }
.i8-hud__bl { grid-area: bl; justify-self: start; align-self: end; }
.i8-hud__bottom { grid-area: bottom; justify-self: center; align-self: end; }
.i8-hud__br { grid-area: br; justify-self: end; align-self: end; }
.i8-corner { display: flex; flex-direction: column; gap: 6px; max-width: min(46vw, 300px); }
.i8-hud__tr .i8-corner, .i8-hud__br .i8-corner, .i8-corner--end { align-items: flex-end; }
.i8-stat { display: inline-flex; align-items: baseline; gap: 6px; padding: 5px 10px; border: 1px solid rgba(127, 240, 255, .3); border-radius: var(--i8-r-compact); background: var(--i8-glass-bg-hud); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); font: 800 var(--i8-fs-sm)/1.1 var(--i8-font); text-shadow: 0 1px 2px #000; }
.i8-stat b { color: var(--i8-muted); font-size: var(--i8-fs-xs); letter-spacing: var(--i8-track); text-transform: uppercase; }

/* Mobile control pads: translucent, edge-anchored, never wider than 40vw. */
.i8-pad {
  --i8-pad-btn: var(--i8-touch-hud);
  position: absolute; bottom: var(--i8-safe-b); display: none; z-index: var(--i8-z-pads); gap: 6px; max-width: 42vw; padding: 6px;
  border: 1px solid rgba(127, 240, 255, .18); border-radius: 22px; background: rgba(9, 12, 24, .32);
  -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); opacity: .86; touch-action: none; user-select: none;
  grid-template-columns: repeat(var(--i8-pad-cols, 3), var(--i8-pad-btn));
}
.i8-pad .i8-icon-btn { width: var(--i8-pad-btn); height: var(--i8-pad-btn); }
.i8-pad--left { left: var(--i8-safe-l); }
.i8-pad--right { right: var(--i8-safe-r); }
.i8-pad .i8-pad__gap { visibility: hidden; }
@media (pointer: coarse) { .i8-pad { display: grid; } }
@media (max-width: 480px) { .i8-pad { --i8-pad-btn: var(--i8-touch); gap: 4px; } }
.i8-pad--always { display: grid; }

/* Auto-hiding toolbar (infin8-ui.js autoHide toggles .is-idle). */
.i8-toolbar {
  display: inline-flex; align-items: center; gap: 6px; padding: 6px; z-index: var(--i8-z-toolbar);
  border-radius: var(--i8-r-pill); background: var(--i8-glass-bg-hud); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  border: 1px solid rgba(127, 240, 255, .25); box-shadow: 0 6px 22px rgba(0, 0, 0, .35);
  transition: opacity var(--i8-t-slow) var(--i8-ease), transform var(--i8-t-slow) var(--i8-ease);
}
.i8-toolbar.is-idle:not(:focus-within):not(:hover) { opacity: 0; transform: translateY(-10px); pointer-events: none; }
.i8-hud__bottom .i8-toolbar.is-idle:not(:focus-within):not(:hover) { transform: translateY(10px); }

/* ---- Motion -------------------------------------------------------------- */
@keyframes i8-pulse { from { opacity: .4; } to { opacity: 1; } }
@keyframes i8-twinkle { from { opacity: .45; } to { opacity: .85; } }
@keyframes i8-spin { to { transform: rotate(360deg); } }
@keyframes i8-sheen { from { transform: translateX(-160%) skewX(-18deg); } to { transform: translateX(360%) skewX(-18deg); } }
@keyframes i8-stripes { to { transform: translateX(-22.6px); } }
@keyframes i8-dot { 0%, 100% { transform: scale(.55); opacity: .45; } 50% { transform: scale(1); opacity: 1; } }
@keyframes i8-eq { from { transform: scaleY(.25); } to { transform: scaleY(1); } }
@keyframes i8-rise { from { opacity: 0; transform: translateY(24px); } to { opacity: 1; transform: none; } }

.i8-paused [class*="i8-"], .i8-paused[class*="i8-"], .i8-paused [class*="i8-"]::before, .i8-paused [class*="i8-"]::after, .i8-paused[class*="i8-"]::before, .i8-paused[class*="i8-"]::after, .i8-paused [class*="i8-"] > i {
  animation-play-state: paused !important;
}
@media (prefers-reduced-motion: reduce) {
  [class*="i8-"], [class*="i8-"]::before, [class*="i8-"]::after, [class*="i8-"] > i { animation: none !important; transition: none !important; }
}