/* Infin8-Artist game page. Built on the Infin8 Neon UI kit (infin8-ui-tokens.css + infin8-ui.css) and the shared
   Infin8 surface (galaxy texture + scrim). Translucent glass panels over the live 3D stage; cyan is live/active,
   violet the left loop, cyan the right loop. Responsive 360-1920 px, visible focus everywhere, reduced motion
   removes every animation (system preference or the in-game setting). */

.ag { margin: 0; min-height: 100svh; overflow-x: hidden; --ag-top: 60px; }
.ag [hidden] { display: none !important; }
.ag h1, .ag h2, .ag h3 { font-family: var(--i8-font-display); }
.ag h2 { margin: 0 0 var(--i8-s2); font-size: clamp(22px, 3.2vw, 32px); font-weight: 800; letter-spacing: .01em; }
.ag h3 { margin: 0 0 var(--i8-s2); font-size: var(--i8-fs-lg); font-weight: 800; }
.ag p { margin: 0 0 var(--i8-s2); }
.ag kbd { display: inline-grid; place-items: center; min-width: 1.8em; padding: 1px 6px; border: 1px solid rgba(127, 240, 255, .5); border-radius: 6px; background: rgba(9, 12, 24, .8); font: 700 .85em/1.4 var(--i8-font); color: var(--i8-text); }
.ag-small { font-size: var(--i8-fs-sm); }
.ag-row { display: flex; flex-wrap: wrap; align-items: center; gap: var(--i8-s2); }
.ag-row--end { justify-content: flex-end; margin-top: var(--i8-s3); }

/* ---- world: the hero art and the 3D stage behind every screen ---- */
.ag-world { position: fixed; inset: 0; z-index: 0; pointer-events: none; }
.ag-stage { position: absolute; inset: 0; width: 100%; height: 100%; display: block; opacity: 0; transition: opacity var(--i8-t-slow) var(--i8-ease); }
.ag.has-stage .ag-world .ag-stage { opacity: 1; }
.ag-world::after { content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(90deg, rgba(7, 9, 16, .78), rgba(7, 9, 16, .2) 46%, rgba(7, 9, 16, 0) 70%); transition: opacity var(--i8-t-slow); }
.ag[data-screen="encore"] .ag-world::after, .ag[data-screen="jam"] .ag-world::after { opacity: 0; }
.ag-hero { position: absolute; right: max(2vw, 16px); top: 50%; width: min(56vw, 760px); height: auto; transform: translateY(-46%); opacity: .95; transition: opacity var(--i8-t-slow); }
.ag.has-stage .ag-hero { opacity: 0; }
.ag.ag-reduced .ag-hero-cues { display: none; }

/* ---- top bar ---- */
.ag-top { position: fixed; z-index: 30; top: 0; left: 0; right: 0; display: flex; align-items: center; gap: var(--i8-s3); flex-wrap: wrap;
  padding: var(--i8-safe-t) var(--i8-safe-r) 8px var(--i8-safe-l); background: linear-gradient(180deg, rgba(7, 9, 16, .9), rgba(7, 9, 16, 0)); }
.ag-brand { display: inline-flex; align-items: center; gap: var(--i8-s2); min-height: 44px; color: var(--i8-cyan); font-weight: 800; text-decoration: none; }
.ag-brand img { width: 36px; height: 36px; border-radius: 50%; box-shadow: 0 0 18px rgba(182, 108, 255, .5); }
.ag-top__actions { margin-left: auto; display: flex; gap: var(--i8-s2); }
.ag[data-screen="encore"] .ag-top, .ag[data-screen="jam"] .ag-top, .ag[data-screen="construct"] .ag-top { display: none; }
.ag-ea { white-space: nowrap; }

/* ---- screens ---- */
.ag-main { position: relative; z-index: 1; }
.ag-screen { min-height: 100svh; padding: calc(var(--ag-top) + var(--i8-safe-t)) var(--i8-safe-r) var(--i8-safe-b) var(--i8-safe-l); box-sizing: border-box; }
.ag-screen--center { display: grid; place-items: center; }
.ag-head { width: min(100%, 1240px); margin: 0 auto var(--i8-s4); }
.ag-card { width: min(100%, 640px); }
.ag-foot { width: min(100%, 1240px); margin: var(--i8-s4) auto 0; display: flex; flex-wrap: wrap; gap: var(--i8-s3); align-items: center; justify-content: space-between; }
.ag-status { margin: 0; color: var(--i8-muted); font-size: var(--i8-fs-sm); }
.ag-status b { color: var(--i8-text-soft); font-weight: 700; }

/* ---- title ---- */
.ag-screen--title { display: flex; align-items: center; }
.ag-title { width: min(100%, 540px); margin-left: max(0px, 4vw); padding: var(--i8-s5); }
.ag-logo { margin: var(--i8-s2) 0 var(--i8-s3); display: grid; gap: 2px; line-height: 1; }
.ag-logo .i8-logotype { --i8-logo-w: 300px; }
.ag-logo__word { font: 900 clamp(46px, 8vw, 84px)/.95 var(--i8-font-display); letter-spacing: .04em; text-transform: uppercase; }
.ag-tag { color: var(--i8-text-soft); font-size: var(--i8-fs-md); line-height: 1.55; }
.ag-menu { display: grid; gap: var(--i8-s2); margin: var(--i8-s4) 0 var(--i8-s3); }
.ag-menu .i8-btn { justify-content: flex-start; min-height: 48px; font-size: var(--i8-fs-md); }
.ag-menu__primary { min-height: 56px !important; font-size: var(--i8-fs-lg) !important; }
.ag-press { color: var(--i8-muted); font-size: var(--i8-fs-sm); }
.ag:not(.ag-reduced) .ag-press { animation: ag-blink 2.4s ease-in-out infinite; }
.ag-note { margin-top: var(--i8-s3); padding: var(--i8-s3); border-radius: var(--i8-r-control); background: rgba(9, 12, 24, .62); border: 1px solid var(--i8-line-soft); color: var(--i8-text-soft); font-size: var(--i8-fs-sm); line-height: 1.5; }
.ag-note strong { color: var(--i8-warning); }
@keyframes ag-blink { 50% { opacity: .45; } }

/* ---- loading ---- */
.ag-load-bar { margin: var(--i8-s3) 0; }
.ag-load { list-style: none; margin: 0 0 var(--i8-s3); padding: 0; display: grid; gap: var(--i8-s2); }
.ag-load li { display: grid; grid-template-columns: 28px 1fr auto; gap: var(--i8-s2); align-items: center; padding: 10px 12px; border-radius: var(--i8-r-control); background: rgba(21, 26, 42, .82); border: 1px solid var(--i8-line-soft); }
.ag-load li b { font-weight: 750; }
.ag-load li small { grid-column: 2 / -1; color: var(--i8-muted); font-size: var(--i8-fs-sm); }
.ag-load li .ag-load__mark { font-weight: 900; text-align: center; }
.ag-load li[data-state="done"] .ag-load__mark { color: var(--i8-success); }
.ag-load li[data-state="warn"] { border-color: rgba(255, 212, 121, .55); }
.ag-load li[data-state="warn"] .ag-load__mark { color: var(--i8-warning); }
.ag-load li[data-state="fail"] { border-color: rgba(255, 112, 139, .7); }
.ag-load li[data-state="fail"] .ag-load__mark { color: var(--i8-danger); }
.ag-load li[data-state="run"] .ag-load__mark { color: var(--i8-cyan); }
.ag:not(.ag-reduced) .ag-load li[data-state="run"] .ag-load__mark { animation: ag-blink 1s ease-in-out infinite; }
.ag-load-note { padding: var(--i8-s3); border-radius: var(--i8-r-control); background: rgba(255, 212, 121, .08); border: 1px solid rgba(255, 212, 121, .35); font-size: var(--i8-fs-sm); }

/* ---- modes ---- */
.ag-modes { width: min(100%, 1240px); margin: 0 auto; display: grid; gap: var(--i8-s4); grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }
.ag-mode { display: flex; flex-direction: column; gap: var(--i8-s1); padding: var(--i8-s5); }
.ag-mode p { color: var(--i8-text-soft); line-height: 1.55; }
.ag-mode .i8-btn { margin-top: auto; align-self: flex-start; }
.ag-mode__glyph { font-size: 34px; line-height: 1; background: var(--i8-grad); -webkit-background-clip: text; background-clip: text; color: transparent; }
.ag-mode__kind { margin: 0; color: var(--i8-cyan) !important; font: 800 var(--i8-fs-xs)/1.2 var(--i8-font); letter-spacing: var(--i8-track-wide); text-transform: uppercase; }
.ag-mode__progress { color: var(--i8-muted) !important; font-size: var(--i8-fs-sm); }

/* ---- setlist ---- */
.ag-setlist { width: min(100%, 1240px); margin: 0 auto; display: grid; gap: var(--i8-s4); grid-template-columns: minmax(0, 1fr); align-items: start; }
@media (min-width: 900px) { .ag-setlist { grid-template-columns: minmax(300px, 420px) minmax(0, 1fr); } }
.ag-sub { margin: var(--i8-s2) 0; font: 800 var(--i8-fs-xs)/1.2 var(--i8-font) !important; letter-spacing: var(--i8-track-wide); text-transform: uppercase; color: var(--i8-text-soft); }
.ag-songlist { list-style: none; margin: 0 0 var(--i8-s3); padding: 0; display: grid; gap: 6px; }
.ag-song { width: 100%; display: grid; grid-template-columns: 34px 1fr auto; gap: var(--i8-s2); align-items: center; min-height: 56px; padding: 8px 12px; text-align: left;
  border: 1px solid var(--i8-line-soft); border-radius: var(--i8-r-control); background: rgba(12, 16, 30, .72); color: var(--i8-text); font: inherit; cursor: pointer; }
.ag-song:hover { border-color: rgba(127, 240, 255, .5); }
.ag-song[aria-pressed="true"] { border-color: var(--i8-cyan); background: linear-gradient(160deg, rgba(42, 108, 240, .35), rgba(91, 43, 216, .3)); box-shadow: 0 0 12px rgba(77, 232, 255, .3); }
.ag-song__n { font: 800 var(--i8-fs-lg)/1 var(--i8-font-display); color: var(--i8-cyan); text-align: center; }
.ag-song__t { display: grid; gap: 2px; min-width: 0; }
.ag-song__t strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ag-song__t small { color: var(--i8-muted); font-size: var(--i8-fs-xs); }
.ag-song__g { font: 900 var(--i8-fs-lg)/1 var(--i8-font-display); color: var(--i8-text-soft); }
.ag-song.is-locked { opacity: .72; }
.ag-song.is-locked .ag-song__n { color: var(--i8-muted); }
.ag-detail { padding: var(--i8-s5); }
.ag-detail__head { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--i8-s3); }
.ag-lock { padding: var(--i8-s2) var(--i8-s3); border-radius: var(--i8-r-control); background: rgba(255, 212, 121, .08); border: 1px solid rgba(255, 212, 121, .4); color: var(--i8-warning); }
.ag-choice { border: 0; margin: 0 0 var(--i8-s3); padding: 0; min-width: 0; }
.ag-choice legend { padding: 0; margin-bottom: 6px; font: 800 var(--i8-fs-xs)/1.2 var(--i8-font); letter-spacing: var(--i8-track-wide); text-transform: uppercase; color: var(--i8-text-soft); }
.ag-choice .i8-segmented { flex-wrap: wrap; }
.ag-best { width: 100%; border-collapse: collapse; font-size: var(--i8-fs-sm); margin: var(--i8-s2) 0; }
.ag-best th, .ag-best td { padding: 6px 8px; text-align: left; border-bottom: 1px solid var(--i8-line-soft); }
.ag-best th { color: var(--i8-muted); font-weight: 700; }

/* ---- play HUD (Encore and Jam) ---- */
.ag-screen--play { position: fixed; inset: 0; min-height: 0; padding: 0; z-index: 2; pointer-events: none; }
.ag-screen--play > * { pointer-events: auto; }
.ag-hud { position: absolute; top: var(--i8-safe-t); left: var(--i8-safe-l); right: var(--i8-safe-r); display: flex; gap: var(--i8-s2); align-items: flex-start; pointer-events: none; }
.ag-hud > * { pointer-events: auto; }
.ag-hud__song { display: grid; gap: 2px; min-width: min(240px, 46vw); max-width: min(46vw, 420px); padding: 10px 18px; }
.ag-hud__song strong { font: 800 var(--i8-fs-md)/1.2 var(--i8-font-display); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ag-hud__song span { font-size: var(--i8-fs-xs); }
.ag-songbar { height: 4px; margin-top: 6px; border-radius: 4px; background: rgba(146, 155, 179, .25); overflow: hidden; }
.ag-songbar i { display: block; height: 100%; width: 0; background: var(--i8-grad); }
.ag-hud__score { margin-left: auto; display: grid; grid-template-columns: auto auto; gap: 0 var(--i8-s3); align-items: baseline; padding: 10px 16px; text-align: right; }
.ag-score { font: 900 clamp(22px, 3.4vw, 34px)/1 var(--i8-font-display); font-variant-numeric: tabular-nums; grid-column: 1 / -1; }
.ag-score--sm { font-size: var(--i8-fs-lg); text-transform: capitalize; }
.ag-mult { color: var(--i8-magenta); font: 900 var(--i8-fs-lg)/1 var(--i8-font-display); }
.ag-combo { color: var(--i8-text-soft); font-size: var(--i8-fs-sm); font-variant-numeric: tabular-nums; }
.ag-pausebtn { flex: none; }
.ag-callout { position: absolute; left: 50%; top: 22%; transform: translateX(-50%); margin: 0; pointer-events: none !important; text-align: center;
  font: 900 clamp(20px, 3.6vw, 36px)/1.1 var(--i8-font-display); color: var(--i8-text); text-shadow: 0 0 18px rgba(77, 232, 255, .55), 0 2px 0 #090b13; opacity: 0; }
.ag-callout.is-on { opacity: 1; }
.ag:not(.ag-reduced) .ag-callout.is-on { animation: ag-pop .9s var(--i8-ease) both; }
@keyframes ag-pop { 0% { opacity: 0; transform: translate(-50%, 8px) scale(.92); } 15% { opacity: 1; transform: translate(-50%, 0) scale(1.04); } 80% { opacity: 1; } 100% { opacity: 0; transform: translate(-50%, -6px); } }
.ag-count { position: absolute; left: 50%; top: 34%; transform: translate(-50%, -50%); margin: 0; pointer-events: none !important;
  font: 900 clamp(64px, 12vw, 140px)/1 var(--i8-font-display); background: var(--i8-grad); -webkit-background-clip: text; background-clip: text; color: transparent; filter: drop-shadow(0 0 18px rgba(230, 76, 255, .5)); }
.ag-ringwrap { position: absolute; left: 0; right: 0; bottom: 0; height: 46%; }
.ag-ring { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.ag-touch { position: absolute; inset: 0; display: none; grid-template-columns: 1fr 1fr; }
.ag.is-touch .ag-touch { display: grid; }
.ag-touch__zone { margin: 0; border: 0; background: transparent; color: rgba(237, 242, 255, .55); font: 800 var(--i8-fs-sm)/1 var(--i8-font); letter-spacing: var(--i8-track);
  text-transform: uppercase; display: flex; align-items: flex-end; padding: 0 16px 34px; touch-action: none; -webkit-user-select: none; user-select: none; }
.ag-touch__zone--left { justify-content: flex-start; } .ag-touch__zone--right { justify-content: flex-end; }
.ag-touch__zone.is-down { background: radial-gradient(ellipse at 50% 80%, rgba(155, 109, 255, .25), transparent 70%); }
.ag-touch__zone--right.is-down { background: radial-gradient(ellipse at 50% 80%, rgba(77, 232, 255, .25), transparent 70%); }
.ag-keys { position: absolute; left: 50%; bottom: calc(46% + 6px); transform: translateX(-50%); margin: 0; padding: 4px 12px; border-radius: var(--i8-r-pill); background: rgba(9, 12, 24, .7);
  color: var(--i8-text-soft); font-size: var(--i8-fs-xs); white-space: nowrap; pointer-events: none !important; }

/* ---- results ---- */
.ag-results { width: min(100%, 760px); padding: var(--i8-s5); }
.ag-results__top { display: grid; grid-template-columns: auto 1fr; gap: var(--i8-s4); align-items: center; margin: var(--i8-s3) 0; }
.ag-grade { position: relative; display: grid; place-items: center; width: 132px; aspect-ratio: 1; border-radius: 50%;
  background: radial-gradient(circle, rgba(13, 17, 28, .9) 58%, transparent 59%), var(--i8-grad-ring); box-shadow: var(--i8-glow-2); }
.ag-grade span { font: 900 64px/1 var(--i8-font-display); color: var(--i8-text); }
.ag-grade small { position: absolute; bottom: 24px; color: var(--i8-muted); font-size: var(--i8-fs-xs); letter-spacing: var(--i8-track-wide); text-transform: uppercase; }
.ag-grade[data-grade="S"] span { background: var(--i8-grad); -webkit-background-clip: text; background-clip: text; color: transparent; }
.ag-grade[data-grade="D"] span, .ag-grade[data-grade="E"] span { color: var(--i8-muted); }
.ag-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: var(--i8-s2); margin: 0; }
.ag-stats div { padding: 10px 12px; border-radius: var(--i8-r-control); background: rgba(21, 26, 42, .85); border: 1px solid var(--i8-line-soft); }
.ag-stats dt { color: var(--i8-muted); font-size: var(--i8-fs-xs); text-transform: uppercase; letter-spacing: var(--i8-track); }
.ag-stats dd { margin: 2px 0 0; font: 800 var(--i8-fs-xl)/1.1 var(--i8-font-display); font-variant-numeric: tabular-nums; }
.ag-res-flags { display: flex; flex-wrap: wrap; gap: var(--i8-s2); min-height: 0; }
.ag-res-flags .i8-badge { font-size: var(--i8-fs-xs); }
.ag-counts { list-style: none; margin: 0 0 var(--i8-s2); padding: 0; display: flex; flex-wrap: wrap; gap: var(--i8-s2); }
.ag-counts li { padding: 6px 10px; border-radius: var(--i8-r-pill); background: rgba(9, 12, 24, .7); border: 1px solid var(--i8-line-soft); font-size: var(--i8-fs-sm); }
.ag-counts b { margin-right: 4px; }
@media (max-width: 560px) { .ag-results__top { grid-template-columns: 1fr; justify-items: center; } .ag-grade { width: 112px; } }

/* ---- construct ---- */
.ag-screen--construct { isolation: isolate; }
.ag-construct__stage { position: absolute; inset: 0; z-index: -1; pointer-events: none !important; }
.ag-construct__stage .ag-stage { opacity: 1; }
#studio-mount.as-stage-ui {
  position: absolute; inset: 0; box-sizing: border-box; display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto; gap: var(--i8-s2); pointer-events: none;
  padding: var(--i8-safe-t) var(--i8-safe-r) var(--i8-safe-b) var(--i8-safe-l);
}
.as-stage-ui > :where(.as-bar, .as-stage-tools, .as-stage-dock) {
  min-width: 0; pointer-events: auto; max-width: 100%;
}
.as-stage-ui dialog { pointer-events: auto; }
.as-stage-ui .as-bar { justify-content: space-between; gap: var(--i8-s2); }
.as-stage-ui .as-bar__brand { margin-right: 0; }
.as-stage-ui .as-bar__host { margin-left: 0; }
.as-stage-tools {
  align-self: stretch; justify-self: end; width: min(100%, 600px);
  min-height: 0; overflow: auto; overscroll-behavior: contain; scrollbar-gutter: stable;
  border-radius: var(--i8-r-control); background: rgba(9, 12, 24, .96);
}
.as-stage-tools > section, .as-stage-tools > aside { border: 0; box-shadow: none; background: transparent; }
.as-stage-tools__head {
  position: sticky; top: 0; z-index: 2; display: flex; justify-content: flex-end;
  padding: var(--i8-s1) var(--i8-s2); background: #090c18;
}
.as-stage-dock {
  grid-row: 3; justify-self: center; display: grid; width: min(100%, 900px);
  max-height: min(44svh, 390px); overflow: auto; overscroll-behavior: contain;
  box-sizing: border-box; gap: var(--i8-s1); padding: var(--i8-s2);
  background: rgba(9, 12, 24, .94);
}
.as-stage-dock__actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--i8-s1) var(--i8-s2); }
.as-stage-dock .as-surface { padding: 0; background: transparent; border: 0; box-shadow: none; }
.as-stage-dock .as-surface h2 { font-size: var(--i8-fs-sm); }
.as-stage-dock .as-pads { grid-template-columns: repeat(8, minmax(0, 1fr)); gap: var(--i8-s1); }
.as-stage-dock .as-pad { aspect-ratio: auto; min-height: 44px; padding: 4px 6px; grid-template-rows: auto 1fr; }
.as-stage-dock .as-pad small { position: static; line-height: 1; }
.as-stage-dock .as-pad span { align-self: end; }
.as-stage-dock .as-keys { height: clamp(46px, 12svh, 110px); }
.as-stage-dock .as-status { padding: 2px 0; font-size: var(--i8-fs-xs); background: transparent; }
.as-stage-song { padding: var(--i8-s2); display: grid; gap: var(--i8-s3); }
.ag-tutorial { padding: var(--i8-s3); }
@media (max-width: 620px) {
  .as-stage-ui .as-bar__brand small { display: none; }
  .as-stage-ui .as-bar__group { gap: var(--i8-s1); }
}
@media (max-width: 480px) {
  .as-stage-dock .as-pads { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .as-stage-dock .as-pad { min-height: 38px; }
  .as-stage-dock .as-hint { display: none; }
}
@media (max-height: 540px) {
  .as-stage-ui .as-bar__brand { display: none; }
  .as-stage-dock { max-height: 48svh; }
  .as-stage-dock .as-hint { display: none; }
}
.ag-steps { margin: var(--i8-s3) 0; padding: 0; list-style: none; display: grid; gap: 6px; counter-reset: step; }
.ag-steps li { counter-increment: step; display: grid; grid-template-columns: 28px 1fr; gap: 2px var(--i8-s2); padding: 8px 10px; border-radius: var(--i8-r-control); border: 1px solid var(--i8-line-soft); background: rgba(12, 16, 30, .6); }
.ag-steps li::before { content: counter(step); grid-row: span 2; display: grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; border: 1px solid var(--i8-line-soft); font-weight: 800; font-size: var(--i8-fs-xs); }
.ag-steps li strong { font-size: var(--i8-fs-sm); }
.ag-steps li span { grid-column: 2; color: var(--i8-muted); font-size: var(--i8-fs-xs); line-height: 1.45; }
.ag-steps li.is-done { opacity: .7; }
.ag-steps li.is-done::before { content: "✓"; background: rgba(92, 230, 165, .2); border-color: var(--i8-success); color: var(--i8-success); }
.ag-steps li.is-current { border-color: var(--i8-cyan); box-shadow: 0 0 12px rgba(77, 232, 255, .25); }
.ag-steps li.is-current::before { border-color: var(--i8-cyan); color: var(--i8-cyan); }
.ag-steps li.is-current span { color: var(--i8-text-soft); }
.as-bar__host { margin-left: auto; }

/* ---- jam ---- */
.ag-jams { width: min(100%, 1240px); margin: 0 auto var(--i8-s4); display: grid; gap: var(--i8-s3); grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
.ag-jam { display: grid; gap: 4px; padding: var(--i8-s4); text-align: left; cursor: pointer; font: inherit; color: var(--i8-text); border: 0; }
.ag-jam[aria-checked="true"] { box-shadow: 0 0 0 2px var(--i8-cyan), var(--i8-glow-2); }
.ag-jam strong { font: 800 var(--i8-fs-lg)/1.2 var(--i8-font-display); }
.ag-jam small { color: var(--i8-muted); }
.ag-jam-pick { margin: 0 auto; }
.ag-jamsurface { position: absolute; left: 50%; bottom: var(--i8-safe-b); transform: translateX(-50%); width: min(calc(100% - 24px), 860px); padding: var(--i8-s3); }
.ag-jampads { display: grid; grid-template-columns: repeat(8, minmax(0, 1fr)); gap: var(--i8-s2); }
.ag-jampad { min-height: 76px; border-radius: var(--i8-r-control); border: 1.5px solid rgba(127, 240, 255, .45); background: linear-gradient(160deg, rgba(30, 44, 80, .92), rgba(12, 16, 32, .94));
  color: var(--i8-text); font: 800 var(--i8-fs-sm)/1.2 var(--i8-font); display: grid; place-items: center; gap: 2px; touch-action: none; -webkit-user-select: none; user-select: none; cursor: pointer; }
.ag-jampad small { color: var(--i8-muted); font-size: var(--i8-fs-xs); font-weight: 700; }
.ag-jampad.is-lit { border-color: var(--i8-magenta); background: linear-gradient(160deg, #d03ce8, #7a1aa0); box-shadow: var(--i8-glow-hot); }
.ag-jamoct { justify-content: center; margin-top: var(--i8-s2); }
@media (max-width: 640px) { .ag-jampads { grid-template-columns: repeat(4, minmax(0, 1fr)); } .ag-jampad { min-height: 64px; } }

/* ---- dialogs ---- */
.ag-dialog > .i8-panel { width: 100%; max-height: min(88svh, 760px); overflow: auto; }
@media (min-width: 720px) {
  .ag-dialog.i8-sheet { width: min(440px, calc(100% - 48px)); }
  .ag-dialog--wide.i8-sheet { width: min(860px, calc(100% - 48px)); }
}
.ag-dialog .ag-menu { margin: 0; }
.ag-set-group { margin: 0 0 var(--i8-s4); }
.ag-set-group h3 { font: 800 var(--i8-fs-xs)/1.2 var(--i8-font) !important; letter-spacing: var(--i8-track-wide); text-transform: uppercase; color: var(--i8-text-soft); margin: 0 0 var(--i8-s2); }
.ag-slider { display: grid; grid-template-columns: minmax(90px, 140px) 1fr 64px; gap: var(--i8-s3); align-items: center; min-height: 44px; }
.ag-slider output { text-align: right; font-variant-numeric: tabular-nums; color: var(--i8-text-soft); font-size: var(--i8-fs-sm); }
.ag-bind { width: 100%; border-collapse: collapse; font-size: var(--i8-fs-sm); }
.ag-bind th, .ag-bind td { padding: 6px 8px; text-align: left; border-bottom: 1px solid var(--i8-line-soft); vertical-align: middle; }
.ag-bind th { color: var(--i8-muted); font-weight: 700; }
.ag-bind td .i8-btn { margin-left: 6px; }
.ag-bind tr.is-active-device td, .ag-bind th.is-active-device { color: var(--i8-cyan-bright); }
.ag-device { display: inline-flex; gap: 6px; align-items: center; margin-bottom: var(--i8-s3); }
.ag-credits h3 { margin-top: var(--i8-s3); }
.ag-credits ul { margin: 0; padding-left: 1.2em; display: grid; gap: 6px; }
.ag-credits li { color: var(--i8-text-soft); font-size: var(--i8-fs-sm); line-height: 1.45; }
.ag-credits a { color: var(--i8-cyan); }
.ag-cal-beat { display: grid; place-items: center; width: 120px; aspect-ratio: 1; margin: var(--i8-s3) auto; border-radius: 50%; border: 3px solid var(--i8-cyan); font: 900 34px/1 var(--i8-font-display); }
.ag-cal-beat.is-on { background: rgba(77, 232, 255, .2); }
.ag-noscript { position: relative; z-index: 3; margin: 100px auto; width: min(100% - 32px, 560px); padding: 16px; border-radius: 14px; background: var(--i8-panel-solid); }

/* ---- account, cloud, leaderboards ---- */
.ag-account { display: flex; align-items: center; gap: var(--i8-s2); margin-left: auto; min-height: 44px; font-size: var(--i8-fs-sm); }
.ag-account + .ag-top__actions { margin-left: 0; }
.ag-account__chip { display: inline-flex; align-items: center; gap: var(--i8-s2); min-height: 40px; padding: 4px 12px 4px 4px; border-radius: var(--i8-r-pill);
  border: 1px solid rgba(127, 240, 255, .45); background: rgba(9, 12, 24, .78); color: var(--i8-text); text-decoration: none; }
.ag-account__avatar { display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; background: var(--i8-grad-diag); font-weight: 900; color: #fff; }
.ag-account__meta { display: grid; line-height: 1.15; }
.ag-account__meta small { color: var(--i8-muted); font-size: var(--i8-fs-xs); }
.ag-account__in { display: inline-flex; align-items: center; min-height: 40px; padding: 0 14px; border-radius: var(--i8-r-pill); border: 1px solid rgba(127, 240, 255, .55);
  background: rgba(9, 12, 24, .78); color: var(--i8-cyan-bright); font-weight: 800; text-decoration: none; }
.ag-account__guest { color: var(--i8-muted); font-size: var(--i8-fs-xs); }
.ag-cloud { margin: -4px 0 var(--i8-s2); }
.ag-boardtabs { margin: var(--i8-s2) 0; }
.ag-board { min-height: 44px; }
.ag-board table { width: 100%; border-collapse: collapse; font-size: var(--i8-fs-sm); }
.ag-board th, .ag-board td { padding: 6px 8px; text-align: left; border-bottom: 1px solid var(--i8-line-soft); }
.ag-board th { color: var(--i8-muted); font-weight: 700; }
.ag-board tr.is-self td { color: var(--i8-cyan-bright); font-weight: 800; }
.ag-board .ag-tag-v { color: var(--i8-success); font-size: var(--i8-fs-xs); }
.ag-board .ag-tag-u { color: var(--i8-warning); font-size: var(--i8-fs-xs); }
.ag-board p { margin: 8px 0; color: var(--i8-text-soft); font-size: var(--i8-fs-sm); }
.ag-res-board { margin-top: var(--i8-s3); padding-top: var(--i8-s3); border-top: 1px solid var(--i8-line-soft); }
.ag-challenge { padding: var(--i8-s2) var(--i8-s3); border-radius: var(--i8-r-control); background: rgba(230, 76, 255, .1); border: 1px solid rgba(230, 76, 255, .45); }

/* ---- friends ---- */
.ag-friends { width: min(100%, 1000px); margin: 0 auto; display: grid; gap: var(--i8-s4); grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }
.ag-friends .ag-card { width: auto; padding: var(--i8-s5); }
.ag-code-input { font: 800 var(--i8-fs-xl)/1 var(--i8-font-mono) !important; letter-spacing: .2em; text-transform: uppercase; }
.ag-lobby { margin: 0 auto; width: min(100%, 760px); padding: var(--i8-s5); }
.ag-lobby__head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-end; gap: var(--i8-s3); }
.ag-code { margin: 0; font: 900 clamp(34px, 6vw, 52px)/1 var(--i8-font-mono); letter-spacing: .18em; background: var(--i8-grad); -webkit-background-clip: text; background-clip: text; color: transparent; }
.ag-roster { list-style: none; margin: var(--i8-s3) 0; padding: 0; display: grid; gap: 6px; }
.ag-roster li { display: grid; grid-template-columns: 36px 1fr auto auto auto; gap: var(--i8-s2); align-items: center; padding: 8px 12px; border-radius: var(--i8-r-control); border: 1px solid var(--i8-line-soft); background: rgba(12, 16, 30, .7); }
.ag-roster__host { display: inline-flex; gap: 6px; }
@media (max-width: 640px) { .ag-roster li { grid-template-columns: 36px 1fr auto; } .ag-roster__host { grid-column: 2 / -1; } }
.ag-roster li.is-self { border-color: var(--i8-cyan); }
.ag-roster .ag-avatar { display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; background: var(--i8-grad-diag); font-weight: 900; }
/* Lobby states use the Infin8 theme colours, always with words: cyan = ready, purple = waiting, electric blue = a problem. */
.ag-state { font-weight: 800; font-size: var(--i8-fs-sm); }
.ag-state--ready { color: var(--i8-cyan); }
.ag-state--wait { color: var(--i8-purple-light); }
.ag-state--problem { color: var(--i8-blue); filter: brightness(1.35); }
#lobby-status[data-state="ready"] { color: var(--i8-cyan); }
#lobby-status[data-state="wait"] { color: var(--i8-purple-light); }
#lobby-status[data-state="problem"] { color: #6fa3ff; }
.ag-recent { margin: var(--i8-s4) auto 0; width: min(100%, 1000px); }
.ag-recent h3 { margin: 0; }
.ag-recent .ag-row { justify-content: space-between; }
.ag-recent li { grid-template-columns: 36px 1fr auto; }
.ag-emotes { position: absolute; right: var(--i8-safe-r); top: calc(var(--i8-safe-t) + 92px); display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 6px; max-width: min(46vw, 420px); }
.ag-players { position: absolute; left: var(--i8-safe-l); top: calc(var(--i8-safe-t) + 92px); margin: 0; padding: 0; list-style: none; display: grid; gap: 6px; pointer-events: none !important; }
.ag-players li { display: flex; align-items: center; gap: 8px; padding: 6px 12px; border-radius: var(--i8-r-pill); background: rgba(9, 12, 24, .78); border: 1px solid var(--i8-line-soft); font-size: var(--i8-fs-sm); }
.ag-players li b { font-weight: 800; }
.ag-players li span { color: var(--i8-muted); }
.ag-players li.is-hit { border-color: var(--i8-magenta); box-shadow: var(--i8-glow-hot); }
.ag-players li.is-self { border-color: var(--i8-cyan); }
.ag-players--construct { top: max(130px, 19svh); max-width: calc(100% - var(--i8-safe-l) - var(--i8-safe-r)); pointer-events: none !important; }

/* ---- phones ---- */
@media (max-width: 720px) {
  .ag { --ag-top: 56px; }
  .ag-ea { display: none; }
  .ag-account__meta small, .ag-account__guest { display: none; }
  .ag-top__actions .i8-btn { padding: 0 10px; }
  .ag-title { margin: 0 auto; padding: var(--i8-s4); }
  .ag-screen--title { align-items: flex-end; }
  .ag-hero { right: 50%; top: 18%; width: 96vw; transform: translate(50%, -50%); opacity: .55; }
  .ag-world::after { background: linear-gradient(180deg, rgba(7, 9, 16, .3), rgba(7, 9, 16, .82) 52%); }
  .ag-hud__song { max-width: 52vw; padding: 8px 12px; }
  .ag-hud__score { padding: 8px 12px; }
  .ag-ringwrap { height: 50%; }
  .ag-keys { display: none; }
  .ag-slider { grid-template-columns: 1fr 56px; }
  .ag-slider > span { grid-column: 1 / -1; }
}

/* ---- reduced motion (system or in-game) ---- */
.ag.ag-reduced *, .ag.ag-reduced *::before, .ag.ag-reduced *::after { animation: none !important; transition: none !important; }
@media (prefers-reduced-motion: reduce) { .ag-hero-cues { display: none; } .ag-press { animation: none !important; } }