:root{
/* ZEMARIS SHARED UI TOKENS BEGIN (generated) */
  --bg:#050712;
  --text:#eef5ff;
  --muted:#92a4c1;
  --font-ui:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  --color-accent-cyan:#62e9ff;
  --color-accent-violet:#a489ff;
  --color-control-ink:#07111c;
  --ui-action-primary-bg:linear-gradient(90deg,var(--color-accent-cyan),var(--color-accent-violet));
  --ui-action-primary-ink:var(--color-control-ink);
  --ui-action-secondary-bg:rgba(255,255,255,.045);
  --ui-action-secondary-ink:#eaf5ff;
  --ui-action-secondary-border:rgba(150,195,230,.16);
  --ui-action-danger-bg:#35202c;
  --ui-action-danger-ink:#ffb9bd;
  --ui-action-danger-border:#9d515c;
  --ui-action-disabled-opacity:.58;
  --ui-focus-outline-strong:rgba(97,232,255,.72);
  --ui-text-title:#eef8ff;
  --ui-text-description:#9fb1ca;
  --ui-text-field:#edf7ff;
  --ui-form-label-ink:#aebfd1;
  --ui-form-error-ink:#ff7f8d;
  --ui-form-success-ink:#78f0b1;
  --ui-status-warning-ink:#ffbd81;
  --ui-selection-bg:rgba(97,232,255,.10);
  --ui-selection-border:rgba(97,232,255,.40);
  --ui-selection-ink:#e9f8ff;
  --ui-modal-border:rgba(150,195,230,.18);
  --ui-radius-sm:9px;
  --radius-md:12px;
/* ZEMARIS SHARED UI TOKENS END */


  --font-brand:"Arial Black",Arial,Helvetica,sans-serif;
  --font-symbol:system-ui,sans-serif;

  /* Shared semantic visual language. CSS and canvas sample these same tokens. */

  --color-focus-cyan:#61e8ff;
  --color-progress:#68f5ff;
  --color-progress-violet:#a683ff;
  --color-neutral-event:#577590;
  --color-success:#74ffb0;
  --color-danger:#ff304f;
  --color-danger-hot:#ff5363;
  --color-health-low:#ff5f79;
  --color-reward:#ffd65a;
  --color-rift:#c77dff;
  --color-shield-loot:#0f8fff;
  --color-shield-loot-ring:#35bcff;
  --color-rift-loot:#9a3bff;

  --color-text-strong:#f2f9ff;
  --color-actor-name:rgba(245,248,255,.96);
  --color-actor-name-concealed:rgba(214,224,233,.94);
  --color-death-label:rgba(210,218,226,.88);
  --color-death-label-stroke:rgba(3,5,8,.94);
  --ui-focus-outline:rgba(97,232,255,.55);

  --ui-focus-glow:rgba(97,232,255,.16);
  --ui-focus-bright:rgba(97,232,255,.42);
  --ui-focus-fill:rgba(97,232,255,.055);

  /* One semantic palette for interactive UI; gameplay/loot colors stay independent. */

  --ui-space-small:8px;
  --ui-space-section:16px;
  --ui-space-group:24px;

  --ui-action-font-size:14px;
  --ui-text-scale:1;
  --ui-text-md:13px;
  --ui-board-width:clamp(208px,calc(222.4px * var(--ui-text-scale)),241.6px);

  --ui-surface:rgba(7,12,24,.84);
  --ui-surface-soft:var(--ui-action-secondary-bg);
  --minimap-size:164px;
  --ui-border-strong:var(--ui-action-secondary-border);
  --ui-input-border:rgba(127,165,204,.16);

  --hud-edge-gap:18px;
  --hud-control-left:14px;
  --hud-control-clearance:54px;
  --hud-dock-offset:11px;
  --hud-panel-pad:12px;
  --hud-panel-radius:12px;
  --hud-panel-bg:rgba(6,10,21,.91);
  --hud-panel-border:rgba(150,195,230,.16);
  --hud-panel-shadow-y:10px;
  --hud-panel-shadow-blur:28px;
  --hud-panel-shadow-color:rgba(0,0,0,.20);
  --hud-panel-shadow:0 var(--hud-panel-shadow-y) var(--hud-panel-shadow-blur) var(--hud-panel-shadow-color);

  --ui-modal-bg:rgba(6,10,21,.98);

  --ui-modal-radius:14px;
  --ui-modal-shadow:0 24px 70px rgba(0,0,0,.48);
  --ui-modal-padding:22px;
  --ui-modal-padding-narrow:16px;
  --ui-modal-close-size:40px;
  --ui-modal-action-height:48px;
  --ui-modal-width-sm:420px;
  --ui-modal-width-md:460px;
  --ui-modal-width-lg:580px;
  --ui-modal-width-xl:720px;
  --ui-form-height:48px;
  --ui-form-radius:12px;
  --ui-form-bg:rgba(4,10,17,.84);

  --ui-form-error-border:#e67d89;

  --ui-form-disabled-opacity:.65;
  --ui-modal-section-gap:var(--ui-space-section);
  --ui-modal-group-gap:var(--ui-space-group);
  --ui-field-label-gap:var(--ui-space-small);
  --ui-card-inset:16px;
  /* The intro leaderboard and gameplay HUD share one heading/readout language. */
  --ui-panel-heading-ink:#89a1be;
  --ui-panel-heading-size:12px;
  --ui-panel-heading-tracking:.08em;
  --ui-panel-divider:rgba(155,191,218,.16);
  --ui-hud-value-ink:#edf5ff;
  --ui-hud-readout-ink:rgba(214,230,240,.72);
  --ui-hud-meta-ink:rgba(188,202,216,.56);

  --ui-selection-hover:rgba(97,232,255,.07);

  --ui-team-blue:#49bdff;
  --ui-team-red:#ff748b;
  --actor-team-blue:#2caff0;
  --actor-team-red:#ef5975;
  /* Shared informational cards across help, walls, loot and roadmap. */
  --ui-info-card-bg:rgba(7,13,24,.78);
  --ui-info-card-border:var(--ui-modal-border);
  --ui-info-card-radius:var(--ui-radius-sm);
  --ui-info-card-accent:rgba(97,232,255,.20);
  --ui-info-card-title:var(--ui-text-title);
  --ui-info-card-text:var(--ui-text-description);
}
*{box-sizing:border-box}
button,input,textarea,select{font:inherit}
strong,b{font-weight:850}
html,body{
  margin:0;width:100%;height:100%;overflow:hidden;background:var(--bg);
  font-family:var(--font-ui);font-size:14px;line-height:1.45;color:var(--text);
  font-variant-numeric:tabular-nums;
  user-select:none;-webkit-user-select:none;caret-color:transparent;
}
input,textarea,[contenteditable="true"]{
  user-select:text;-webkit-user-select:text;caret-color:auto;
}
canvas{display:block;width:100%;height:100%;cursor:crosshair}
#introFloorColor,#game{position:fixed;inset:0}
#introFloorColor{z-index:0;pointer-events:none}
#game{z-index:1}
/* Intro spectator only: the live game canvas stays compositor-grayscale.
   Colored floor branding lives on a tiny transparent layer beneath it and is
   revealed only through the logo glyphs, so actors/walls still occlude it. */
body.intro-ui #game{filter:grayscale(1)}
body:not(.intro-ui) #game{filter:none}
body:not(.intro-ui) #introFloorColor{display:none}
#hud{position:fixed;inset:0;z-index:2;pointer-events:none}
/* Gameplay camera is letterboxed, but HUD uses the full physical viewport.
   This avoids a second DPR-dependent UI transform and keeps controls readable. */
body.game-ui #hud{
  container:gamehud / size;
}
body.intro-ui #game,body.game-ui #game,body.game-ui #hud{touch-action:none}

#topLeftHud{
  position:absolute;
  left:var(--hud-edge-gap);
  top:var(--hud-edge-gap);
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  gap:var(--hud-edge-gap);
}

.hudIdentityRow .playerNameHud{
  flex:0 1 auto;
  min-width:0;
}
#hudEvent{
  position:absolute;
  left:50%;
  top:29px;
  min-width:178px;
  height:60px;
  box-sizing:border-box;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:0 12px;
  opacity:0;
  transform:translateX(-50%) scale(.70);
  transform-origin:center center;
  white-space:nowrap;
  pointer-events:none;
  font-size:36px;
  line-height:1;
  font-weight:900;
  letter-spacing:.105em;
  text-align:center;
  will-change:transform,opacity,filter;
  background:radial-gradient(ellipse at center,rgba(3,7,14,.40) 0%,rgba(3,7,14,.16) 48%,rgba(3,7,14,0) 76%);
  border:0;
  border-radius:18px;
  backdrop-filter:none;
  text-shadow:
    0 1px 2px rgba(0,0,0,.92),
    0 0 8px rgba(255,255,255,.32),
    0 0 20px currentColor,
    0 0 42px currentColor;
}
/* Event colors communicate meaning instead of making every message look urgent. */
#hudEvent.neutral{
  color:var(--color-neutral-event);
  text-shadow:
    0 1px 2px rgba(0,0,0,.96),
    0 0 10px color-mix(in srgb,currentColor 62%,transparent),
    0 0 28px color-mix(in srgb,currentColor 48%,transparent);
  filter:drop-shadow(0 0 12px color-mix(in srgb,currentColor 48%,transparent));
}
#hudEvent.progress{
  color:var(--color-progress);
  text-shadow:
    0 1px 2px rgba(0,0,0,.96),
    0 0 12px color-mix(in srgb,currentColor 72%,transparent),
    0 0 34px color-mix(in srgb,currentColor 56%,transparent);
  filter:drop-shadow(0 0 18px color-mix(in srgb,currentColor 64%,transparent));
}
#hudEvent.special{
  min-width:210px;
  color:var(--color-rift);
  font-size:40px;
  letter-spacing:.11em;
  text-shadow:
    0 1px 2px rgba(0,0,0,.96),
    0 0 10px color-mix(in srgb,currentColor 78%,transparent),
    0 0 25px color-mix(in srgb,currentColor 72%,transparent),
    0 0 52px color-mix(in srgb,currentColor 52%,transparent);
  filter:drop-shadow(0 0 20px color-mix(in srgb,currentColor 68%,transparent));
}
#hudEvent.record,
#hudEvent.recordPlacement,
#hudEvent.recordStatus{
  max-width:min(94vw,760px);
  height:auto;
  min-height:60px;
  white-space:normal;
  font-size:clamp(15px,2.3vw,28px);
  line-height:1.15;
  letter-spacing:.045em;
}
#hudEvent.record{
  color:#e9c86c;
  text-shadow:0 1px 2px #000,0 0 15px rgba(233,200,108,.75);
}
#hudEvent.recordPlacement{color:#75e6ff}
#hudEvent.recordStatus{font-size:clamp(13px,2vw,22px);color:#bdcddd}
#hudEvent.kill{
  color:var(--color-success);
  text-shadow:
    0 1px 2px rgba(0,0,0,.96),
    0 0 12px color-mix(in srgb,currentColor 74%,transparent),
    0 0 34px color-mix(in srgb,currentColor 56%,transparent);
  filter:drop-shadow(0 0 18px color-mix(in srgb,currentColor 64%,transparent));
}
#hudEvent.streak{
  min-width:170px;
  color:var(--color-reward);
  font-size:40px;
  font-weight:1000;
  letter-spacing:.085em;
  text-shadow:
    0 1px 2px rgba(0,0,0,.96),
    0 0 12px color-mix(in srgb,currentColor 74%,transparent),
    0 0 34px color-mix(in srgb,currentColor 56%,transparent);
  filter:drop-shadow(0 0 18px color-mix(in srgb,currentColor 64%,transparent));
}
#hudEvent.dead{
  min-width:138px;
  color:var(--color-danger);
  font-size:36px;
  text-shadow:
    0 1px 2px rgba(0,0,0,.96),
    0 0 12px color-mix(in srgb,currentColor 74%,transparent),
    0 0 34px color-mix(in srgb,currentColor 56%,transparent);
  filter:drop-shadow(0 0 18px color-mix(in srgb,currentColor 64%,transparent));
}
#hudEvent.show{
  animation:hudEventApproach 2.35s cubic-bezier(.20,.62,.24,1) both;
}
#hudEvent.dead.show{
  animation-duration:2.55s;
}
#hudEvent.streak.show{
  animation-duration:2.75s;
}
@keyframes hudEventApproach{
  0%{
    opacity:0;
    transform:translateX(-50%) scale(.42);
    filter:blur(2.2px);
  }
  18%{
    opacity:.58;
    transform:translateX(-50%) scale(.72);
    filter:blur(.8px);
  }
  36%{
    opacity:1;
    transform:translateX(-50%) scale(.98);
    filter:blur(0);
  }
  72%{
    opacity:1;
    transform:translateX(-50%) scale(1.03);
    filter:blur(0);
  }
  100%{
    opacity:0;
    transform:translateX(-50%) scale(1.22);
    filter:blur(.45px);
  }
}
.levelMeta .big{font-weight:900;line-height:1.15;letter-spacing:.01em}
#xpMeter i{display:block;height:100%;width:0;background:linear-gradient(90deg,var(--color-focus-cyan),var(--color-progress-violet));border-radius:999px}
/* Right-side HUD: one visual system for all arena and private match modes. */
.boardStatsLegend{
  display:grid;
  grid-template-columns:21px minmax(0,1fr) 65px;
  gap:7px;
  align-items:center;
  padding:10px 8px 6px;
  color:#829bb3;
  font:850 9px/1.3 var(--font-ui);
  letter-spacing:.05em;
}
.boardStatsLegend[hidden]{display:none}
.boardStatsLegend span:last-child{text-align:right}
.boardColumns-deathmatch{grid-template-columns:minmax(0,1fr) 43px 43px}
.boardColumns-deathmatch span:not(:first-child){text-align:right}
.boardColumns-survival{grid-template-columns:minmax(0,1fr) auto}
#scores,.scoresEntries,.boardSurvivalSummary>div{display:flex;flex-direction:column;gap:3px}
.scoreline{
  display:grid;
  grid-template-columns:21px minmax(0,1fr) 65px;
  gap:7px;
  align-items:center;
  min-height:35px;
  margin:0;
  padding:8px 7px;
  border:1px solid transparent;
  border-radius:var(--ui-radius-sm);
  font-variant-numeric:tabular-nums;
}
/* Zebra is scoped to each list; isolated local row and record are not striped. */
.scoresEntries>.scoreline:nth-child(even):not(.me){background:rgba(122,155,190,.085)}
.scoreline.me:not(.scoreRecord){
  background:rgba(98,233,255,.105)!important;
  border-color:rgba(98,233,255,.55);
  box-shadow:inset 0 0 12px rgba(98,233,255,.025);
}
.scoreName{
  min-width:0;
  overflow:hidden;
  white-space:nowrap;
  text-overflow:ellipsis;
  font:700 calc(12px * var(--ui-text-scale))/1.25 var(--font-ui);
  letter-spacing:-.01em;
  color:#e3edf8;
}
.scoreValue{font:850 calc(12px * var(--ui-text-scale))/1.25 var(--font-ui);text-align:right;white-space:nowrap;color:var(--ui-hud-value-ink)}
.scoreValue.secondary{color:#93a9be}
.scorePos{color:#8da3b8;font:850 11px/1 var(--font-ui);text-align:left}
.scoreline.podium1 .scorePos{color:#ffd36f}
.scoreline.podium2 .scorePos{color:#cbd8e8}
.scoreline.podium3 .scorePos{color:#d6a17d}
.scoreline.me .scoreName,.scoreline.me .scoreValue,.scoreline.me .scorePos{color:#9befff}
.scoreline.hot:not(.me) .scoreName{color:var(--color-danger-hot)}
.scoreline.respawning:not(.me){opacity:.58}
.scoreline.respawning.me .scoreName,.scoreline.respawning.me .scoreValue{color:#b6c7d5}
.scoreline.inactive:not(.me){opacity:.53}
.scoreDivider{height:1px;border-top:1px dashed #31455a;margin:6px 0}
.scoreRecord{
  min-height:47px;
  background:rgba(255,211,111,.055);
  border-color:rgba(255,211,111,.24);
  margin-top:8px;
}
.scoreRecord .scorePos{display:flex;align-items:center;color:#ffd36f}
.scoreRecord .scorePos svg{width:18px;height:18px}
.scoreRecordIdentity{min-width:0;display:flex;flex-direction:column;gap:2px}
.scoreRecord .scoreName{font-weight:780;color:#f3e7c3}
.scoreRecordSubtitle{font:750 9px/1.3 var(--font-ui);letter-spacing:.035em;color:#bea77b}
.scoreRecord .scoreValue{color:#ffe1a1}
.scoreline-deathmatch{grid-template-columns:minmax(0,1fr) 43px 43px;gap:3px}
.scoreline-team{grid-template-columns:8px minmax(0,1fr) 32px}
.scoreTeamDot{width:7px;height:7px;border-radius:50%;background:var(--ui-team-blue)}
.scoreTeamDot.red{background:var(--ui-team-red)}
.scoreline-survival{grid-template-columns:minmax(0,1fr) auto}
.scoreState{font:850 9px/1.2 var(--font-ui);white-space:nowrap;letter-spacing:.03em}
.scoreState.is-alive{color:#77efb4}
.scoreState.is-out{color:#a2b2c0}
.scoreline-survival.eliminated:not(.me){opacity:.5}

.boardSummary[hidden]{display:none}
.boardProgress{padding:14px 1px 12px}
.boardProgressTop{display:flex;justify-content:space-between;align-items:center;gap:6px;margin-bottom:8px}
.boardProgressLabel{font:850 9.5px/1.3 var(--font-ui);letter-spacing:.04em;color:#93aac0}
.boardProgressValue{font:900 12px/1.3 var(--font-ui);white-space:nowrap}
.boardTrack{height:5px;border-radius:10px;background:#223246;overflow:hidden}
.boardTrackFill{height:100%;border-radius:10px;background:#62d9f7}
.boardTeamTotals{display:grid;grid-template-columns:1fr 1fr;gap:13px;padding:15px 1px 12px}
.boardTeamName{display:block;font:850 10px/1.3 var(--font-ui);letter-spacing:.06em}
.boardTeamTotal.blue .boardTeamName{color:var(--ui-team-blue)}
.boardTeamTotal.red .boardTeamName{color:var(--ui-team-red)}
.boardTeamNumber{display:block;font:900 22px/1.4 var(--font-ui);letter-spacing:-.04em;margin:3px 0 6px}
.boardTeamTotal.blue .boardTrackFill{background:var(--ui-team-blue)}
.boardTeamTotal.red .boardTrackFill{background:var(--ui-team-red)}
.boardSectionHeading{display:flex;justify-content:space-between;gap:8px;padding:8px 5px 7px;margin:4px 0 5px;border-bottom:1px solid rgba(155,195,232,.16);font:850 9px/1.2 var(--font-ui);letter-spacing:.04em;color:#93aac0}
.boardSectionHeading.blue{color:var(--ui-team-blue)}
.boardSectionHeading.red{color:var(--ui-team-red)}
.boardSurvivalSummary{display:flex;align-items:center;justify-content:space-between;gap:6px;padding:17px 2px 13px}
.boardSurvivalNumber{font:900 31px/1.1 var(--font-ui);color:#77efb4}
.boardSurvivalHint{font:750 9px/1.3 var(--font-ui);color:#93aac0;text-align:right}
.boardZoneStatus{display:flex;justify-content:space-between;align-items:center;gap:7px;background:rgba(255,201,116,.055);border:1px solid rgba(255,201,116,.23);border-radius:7px;padding:9px 8px;margin:0 0 4px}
.boardZoneLabel{font:850 9.5px/1.3 var(--font-ui);color:#ffd29e}
.boardZoneDescription{font:750 9px/1.3 var(--font-ui);color:#c4ad8e;text-align:right;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0}

.card{width:min(650px,calc(100vw - 34px));padding:28px;text-align:center}
.playerColorChoice:hover{
  transform:scale(1.08);
}
/* Shared action geometry; variants only override semantic custom properties.
   Legacy unclassified buttons keep their existing primary appearance. */
button,button.primaryAction{
  --ui-button-bg:var(--ui-action-primary-bg);
  --ui-button-ink:var(--ui-action-primary-ink);
  --ui-button-border-width:0px;
  --ui-button-border-color:transparent;
  pointer-events:auto;cursor:pointer;
  border:var(--ui-button-border-width) solid var(--ui-button-border-color);
  border-radius:999px;padding:15px 29px;
  font-size:var(--ui-action-font-size);line-height:1;font-weight:900;
  background:var(--ui-button-bg);color:var(--ui-button-ink);
}

/* ===== ZEMARIS UI CONSISTENCY PASS ===== */
.panel{
  background:var(--ui-surface);
  border:1px solid var(--hud-panel-border);
  border-radius:var(--hud-panel-radius);
  backdrop-filter:blur(7px);
  box-shadow:var(--hud-panel-shadow);
}

/* Shared HUD shell; geometry and behavior remain local. */
#levelBox,#weaponStatusRow,#board,.debugBar,
body.intro-ui #introRecords,body.intro-ui #start .simpleStartSetup{
  background:var(--hud-panel-bg);
  border:1px solid var(--hud-panel-border);
  border-radius:var(--hud-panel-radius);
  box-shadow:var(--hud-panel-shadow);
}

#rightHud{
  position:absolute;
  right:var(--hud-edge-gap);
  top:var(--hud-edge-gap);
  width:var(--ui-board-width);
  display:flex;
  flex-direction:column;
  gap:8px;
  pointer-events:none;
}

#board{
  position:relative;
  width:100%;
  box-sizing:border-box;
  padding:var(--hud-panel-pad);
}

button:not(.playerColorChoice){
  border-radius:var(--ui-radius-sm);
  padding:14px 24px;
  letter-spacing:.02em;
}

button.secondary{
  --ui-button-bg:var(--ui-action-secondary-bg);
  --ui-button-ink:var(--ui-action-secondary-ink);
  --ui-button-border-width:1px;
  --ui-button-border-color:var(--ui-action-secondary-border);
  box-shadow:none;
}
button.dangerAction{
  --ui-button-bg:var(--ui-action-danger-bg);
  --ui-button-ink:var(--ui-action-danger-ink);
  --ui-button-border-width:1px;
  --ui-button-border-color:var(--ui-action-danger-border);
  box-shadow:none;
}
button.primaryAction:disabled,button.secondary:disabled,button.dangerAction:disabled{
  cursor:not-allowed;
  opacity:var(--ui-action-disabled-opacity);
}

/* ===== END UI CONSISTENCY PASS ===== */


@media(max-width:760px){
  body.intro-ui{--hud-edge-gap:8px}
}

@container gamehud (max-width:720px){
  #board{display:none}
  .gameControlHint{display:none!important}
}


/* Bottom text system. Metadata stays at the left edge; the compact control
   hint is gameplay-only and centered exactly as in the earlier HUD. */
.gameMeta,.gameControlHint,.gameTelemetry{
  bottom:var(--hud-edge-gap);
  align-items:center;
  gap:7px;
  padding:0;
  white-space:nowrap;
  font-family:var(--font-ui);
  font-size:10px;
  line-height:1.1;
  letter-spacing:.06em;
  pointer-events:none;
}
.gameMeta{
  position:fixed;
  left:var(--hud-edge-gap);
  z-index:41;
  display:flex;
  font-weight:700;
  color:rgba(205,216,228,.54);
}
.gameControlHint{
  position:fixed;
  left:50%;
  z-index:41;
  display:none;
  transform:translateX(-50%);
  font-weight:500;
  color:var(--ui-hud-meta-ink);
}
body.game-ui .gameControlHint{display:flex}
/* One lightweight telemetry row for gameplay AND the intro demo. Network score
   and RTT reuse input acknowledgements; local simulation reports no fake ping. */
.gameTelemetry{
  position:fixed;
  right:var(--hud-edge-gap);
  z-index:41;
  display:flex;
  justify-content:flex-end;
  font-weight:700;
  color:var(--ui-hud-meta-ink);
  font-variant-numeric:tabular-nums;
}
.gameTelemetryFps,.gameTelemetryNetwork,.gameControlHint strong,.gameMetaVersion{font-weight:800;color:var(--ui-hud-readout-ink)}
.gameTelemetryFps.warn,.gameTelemetryNetwork.warn{color:var(--color-reward)}
.gameTelemetryFps.low,.gameTelemetryNetwork.low{color:var(--color-danger)}
.gameTelemetryDetail{color:var(--ui-hud-meta-ink)}
.gameControlSep{opacity:.35}
.gameMetaAuthor{
  color:var(--ui-hud-meta-ink);
}
.gameMetaSep{opacity:.35}

/* Bottom-left control dock. Shared help/settings stays available on the intro screen;
   gameplay-only actions are hidden there without creating a second control set. */
.gameControls{
  position:fixed;
  left:var(--hud-control-left);
  /* Keep the dock one metadata-gap above the PRE-ALPHA row. */
  bottom:calc(var(--hud-edge-gap) * 2 + var(--hud-dock-offset));
  z-index:42;
  display:none;
  align-items:center;
  gap:6px;
  pointer-events:auto;
}
body.game-ui .gameControls,body.intro-ui .gameControls{display:flex}
body.intro-ui #returnMenuToggle{display:none}
#debugBarToggle[hidden]{display:none!important}
body.intro-ui #debugBarToggle{display:none!important}
.gameControlButton{
  width:42px;
  height:42px;
  min-width:42px;
  padding:0!important;
  display:grid;
  place-items:center;
  /* Same secondary surface language as the modal POKRAČOVAT action. */
  border:1px solid var(--ui-border-strong)!important;
  border-radius:var(--ui-radius-sm)!important;
  background:var(--ui-action-secondary-bg)!important;
  color:var(--ui-action-secondary-ink)!important;
  box-shadow:none;
}
.gameControlButton svg{
  width:20px;
  height:20px;
  display:block;
  overflow:visible;
}
#fullscreenToggle .fullscreenExitIcon{display:none}
#fullscreenToggle.is-fullscreen .fullscreenEnterIcon{display:none}
#fullscreenToggle.is-fullscreen .fullscreenExitIcon{display:block}
.gameControlButton.is-off{
  color:rgba(190,204,218,.58)!important;
  border-color:rgba(150,195,230,.11)!important;
}


/* Feedback reuses the shared secondary dock button and modal form system. */
.gameControlButton.feedbackToggle{
  width:130px;min-width:130px;padding:0 10px!important;
  font:850 11px/1.2 var(--font-ui)!important;letter-spacing:.035em;
  white-space:nowrap;
}
.feedbackDialog{--ui-modal-width:var(--ui-modal-width-md)}
.feedbackForm,.debugAuthForm{display:grid;gap:var(--ui-modal-section-gap)}
.feedbackForm{margin-top:var(--ui-modal-group-gap)}
.feedbackOptional,.feedbackRating legend span{font-weight:600;color:#8c9fb4}
#feedbackAreaGroup[hidden]{display:none}
.uiFormField.feedbackMessage{height:112px;min-height:96px;padding:14px 14px;resize:vertical;line-height:1.45;font-weight:600}
.feedbackCounter{text-align:right;color:var(--ui-text-description);font-size:11px;margin-top:-10px}
.feedbackRating{border:0;margin:8px 0 0;padding:0;min-width:0}
.feedbackRating legend{margin-bottom:6px}
.feedbackStars{display:flex;gap:6px}
.feedbackStars button{
  border:0!important;background:none!important;box-shadow:none!important;
  padding:3px!important;font:32px/1 var(--font-ui)!important;
  color:#728396!important;cursor:pointer;
}
.feedbackStars button.is-selected{color:var(--color-reward)!important}
/* One keyboard-focus treatment across shared form and dialog controls. */
.feedbackStars button:focus-visible,.introRecordsSwitch button:focus-visible,.uiIdentityRefresh:focus-visible,.uiIdentityColor:focus-visible,
.uiModalClose:focus-visible,.uiDialogAction:focus-visible,.gameSettingToggle:focus-visible,
.weaponBranchOption:focus-visible,.weaponHelpBranchButton:focus-visible,.gameModeButton:focus-visible,
.privateMatchDialog button:focus-visible,.privateMatchDialog select:focus-visible{
  outline:2px solid var(--ui-focus-outline-strong);outline-offset:2px;
}
.feedbackStatus{min-height:17px;margin:0;color:var(--color-success);font-size:12px;line-height:1.45}
.uiFormStatus.is-error,.uiFormStatus.error{color:var(--ui-form-error-ink)}
.uiFormStatus.is-ok{color:var(--ui-form-success-ink)}
.feedbackChallenge{display:grid;gap:8px;min-height:0}
.feedbackChallenge[hidden]{display:none}
#feedbackChallengeWidget{min-height:64px;max-width:100%;overflow:hidden}
.returnMenuActions.feedbackActions{margin-top:8px}
@media(max-width:420px){.gameControlButton.feedbackToggle{width:116px;min-width:116px;font-size:10px!important}}

/* Shared presentation for all modal surfaces, including the weapon picker.
   Dialog behavior is still managed by each existing event-driven controller.
   The live game canvas needs no blur/filter or per-frame UI work. */
.gameModal,.weaponBranchModal{
  position:fixed;
  inset:0;
  z-index:90;
  display:none;
  align-items:center;
  justify-content:center;
  padding:16px;
  overflow-y:auto;
  overscroll-behavior:contain;
  background:rgba(1,4,10,.78);
  pointer-events:auto;
}
/* Keep online arena motion legible below a dialog without blur or extra canvas passes. */
body.game-ui.game-modal-live .gameModal.open{background:rgba(1,4,10,.65)}
.gameModal.open,.weaponBranchModal.open{display:flex}
.gameModalDialog,.weaponBranchDialog,.spawnLoadingPanel{
  border:1px solid var(--ui-modal-border);
  border-radius:var(--ui-modal-radius);
  background:var(--ui-modal-bg);
  box-shadow:var(--ui-modal-shadow);
}
.gameModalDialog,.weaponBranchDialog{
  width:min(var(--ui-modal-width,var(--ui-modal-width-sm)),calc(100vw - 32px));
  max-height:calc(100dvh - 32px);
  overflow-y:auto;
  overscroll-behavior:contain;
  flex-shrink:0;
  padding:var(--ui-modal-padding);
  text-align:left;
}
/* Unified dialog inputs, identity row and action geometry.
   Static CSS only: no new work in the game's rendering loop. */
.uiIdentityLabel,.privateLobbyInfo label{
  display:block;color:var(--ui-form-label-ink);font:850 calc(12px * var(--ui-text-scale))/1.35 var(--font-ui);
  letter-spacing:.055em;
}
.uiIdentityBlock,.uiFormGroup,.privateLobbyInfo label{display:grid;gap:var(--ui-field-label-gap);min-width:0}
.uiIdentityRow{display:grid;grid-template-columns:var(--ui-form-height) minmax(0,1fr);align-items:center;gap:10px;min-width:0}
.uiIdentityColor.playerColorChoice{
  width:var(--ui-form-height);height:var(--ui-form-height);
  min-width:var(--ui-form-height);min-height:var(--ui-form-height);
  border-radius:var(--ui-form-radius);padding:0;transform:none;
}
.uiIdentityInputWrap{position:relative;min-width:0}
.uiIdentityInput,.uiFormField,.uiFormSelect{
  width:100%;min-width:0;min-height:var(--ui-form-height);
  border:1px solid var(--ui-input-border);border-radius:var(--ui-form-radius);
  background:var(--ui-form-bg);color:var(--ui-text-field);
  font:750 calc(14px * var(--ui-text-scale))/1.25 var(--font-ui);
  outline:none;transition:border-color .15s ease,box-shadow .15s ease;
}
.uiIdentityInput{display:block;height:var(--ui-form-height);padding:0 54px 0 15px}
.uiFormField{padding:0 14px}
/* One stable caret for both private-match and feedback selects. */
.uiFormSelect{
  appearance:none;-webkit-appearance:none;
  height:var(--ui-form-height);padding:0 40px 0 14px;cursor:pointer;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%2394b7cd' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m4 6 4 4 4-4'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 14px center;background-size:16px 16px;
}
.uiIdentityInput::placeholder,.uiFormField::placeholder{color:#8c9fb4;font-weight:600}
.uiIdentityInput:focus,.uiFormField:focus,.uiFormSelect:focus{
  border-color:var(--ui-focus-outline-strong);
  box-shadow:0 0 0 3px var(--ui-focus-glow);
}
.uiIdentityInput[aria-invalid="true"],.uiFormField[aria-invalid="true"],.uiFormSelect[aria-invalid="true"]{border-color:var(--ui-form-error-border)}
.uiIdentityInput:disabled,.uiFormField:disabled,.uiFormSelect:disabled,.privateTeamChoice:disabled{opacity:var(--ui-form-disabled-opacity);cursor:not-allowed}
.uiIdentityRefresh{
  position:absolute;right:5px;top:50%;transform:translateY(-50%);
  display:grid;place-items:center;width:42px;height:42px;min-width:42px;
  padding:0!important;border:1px solid var(--ui-border-strong)!important;
  border-radius:9px!important;background:var(--ui-surface-soft)!important;
  color:#cce5f4!important;font:850 23px/1 var(--font-symbol)!important;
  letter-spacing:0!important;
}
.uiIdentityRefresh:hover,.uiModalClose:hover{background:var(--ui-focus-fill)!important;color:#effbff!important}
.uiIdentityRefresh[hidden]{display:none!important}
.uiDialogAction{
  min-height:var(--ui-modal-action-height);
  padding:10px 16px!important;
  font:850 calc(13px * var(--ui-text-scale))/1.25 var(--font-ui)!important;
  letter-spacing:.035em!important;
}
/* Draw the close glyph around the actual button centre, independent of font metrics. */
.uiModalClose{
  position:relative;flex:0 0 var(--ui-modal-close-size);
  width:var(--ui-modal-close-size);min-width:var(--ui-modal-close-size);
  height:var(--ui-modal-close-size);padding:0!important;
  display:grid;place-items:center;font-size:0!important;line-height:0!important;
}
.uiModalClose::before,.uiModalClose::after{
  content:"";position:absolute;left:50%;top:50%;width:17px;height:2px;
  border-radius:2px;background:currentColor;pointer-events:none;
}
.uiModalClose::before{transform:translate(-50%,-50%) rotate(45deg)}
.uiModalClose::after{transform:translate(-50%,-50%) rotate(-45deg)}
.uiModalClose[hidden]{display:none!important}
.gameModalHeader{
  position:sticky;
  top:0;
  z-index:2;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:14px;
  margin-bottom:var(--ui-modal-section-gap);
  background:var(--ui-modal-bg);
}
.gameModalTitle{
  color:var(--ui-text-title);
  font:900 calc(16px * var(--ui-text-scale))/1.2 var(--font-ui);
  letter-spacing:.075em;
}
.gameModalText{
  margin:0;
  color:var(--ui-text-description);
  font-size:calc(var(--ui-text-md) * var(--ui-text-scale));
  line-height:1.5;
}
.returnMenuActions,.debugAuthActions{display:flex;justify-content:flex-end;gap:var(--ui-space-small)}
.returnMenuActions{margin-top:var(--ui-modal-group-gap)}
.returnMenuActions button{
  min-width:126px;
  padding:0 16px!important;
}
.gameHelpDialog{
  --game-help-panel-bg:var(--ui-modal-bg);
  --ui-modal-width:calc(var(--ui-modal-width-xl) * 1.25);
  display:flex;
  flex-direction:column;
  min-height:0;
  height:min(680px,calc(100dvh - 32px));
  padding:0!important;
  overflow:hidden;
}
.gameHelpHeading{flex:0 0 auto;margin:0;padding:16px 16px 12px;background:var(--game-help-panel-bg)}
.gameHelpBody{display:flex;flex:1 1 auto;min-height:0;min-width:0;overflow:hidden}
.gameHelpTabs{z-index:auto;flex:0 0 166px;align-items:stretch;margin:0;padding:12px 8px;background:rgba(3,12,22,.52);border-right:1px solid rgba(110,169,201,.18);min-width:0;overflow-y:auto;overflow-x:hidden;scrollbar-width:thin;scrollbar-color:rgba(97,232,255,.28) transparent}
.gameHelpTabList{display:flex;flex-direction:column;align-items:stretch;gap:16px;min-height:min-content;min-width:0;overflow:visible;padding:0;scrollbar-width:none}
.gameHelpNavGroup{display:flex;flex-direction:column;gap:4px;min-width:0}
.gameHelpNavSecondary{padding-top:15px;border-top:1px solid rgba(97,232,255,.2)}
.gameHelpNavLabel{padding:2px 9px 7px;color:#779cb2;font:850 calc(10px * var(--ui-text-scale))/1.2 var(--font-ui);letter-spacing:.12em}
.gameHelpTabList .gameHelpTab{display:block;flex:0 0 auto;width:100%;min-height:39px;text-align:left;white-space:normal;overflow-wrap:break-word;padding:9px 11px!important;border-radius:7px!important;border:1px solid transparent!important;background:transparent!important;color:#99b2c5!important;font:800 calc(11.5px * var(--ui-text-scale))/1.3 var(--font-ui)!important;letter-spacing:.025em}
.gameHelpTabList .gameHelpTab:hover{color:#e6f7ff!important;background:var(--ui-selection-hover)!important}
.gameHelpTabList .gameHelpTab[aria-selected="true"]{color:#e5fcff!important;border-color:rgba(97,232,255,.31)!important;background:linear-gradient(90deg,rgba(97,232,255,.17),rgba(97,232,255,.045))!important;box-shadow:inset 3px 0 #61e8ff!important}
.gameHelpContent{flex:1 1 auto;display:flex;min-width:0;min-height:0}
.gameHelpContent>.gameHelpPanel{flex:1 1 auto;min-width:0}
.gameHelpTabList::-webkit-scrollbar{display:none}
.gameHelpPanel{
  flex:1 1 auto;
  min-height:0;
  padding:16px;
  overflow-y:auto;
  background:var(--game-help-panel-bg);
}
.gameHelpPanel,.debugBar,.privateMatchScroll,.chatMessages{
  scrollbar-width:thin;
  scrollbar-color:rgba(97,232,255,.46) rgba(255,255,255,.035);
}
.gameHelpPanel::-webkit-scrollbar,.debugBar::-webkit-scrollbar,.privateMatchScroll::-webkit-scrollbar,.chatMessages::-webkit-scrollbar{width:8px}
.gameHelpPanel::-webkit-scrollbar-track,.debugBar::-webkit-scrollbar-track,.privateMatchScroll::-webkit-scrollbar-track,.chatMessages::-webkit-scrollbar-track{
  background:rgba(255,255,255,.025);
  border-radius:8px;
}
.gameHelpPanel::-webkit-scrollbar-thumb,.debugBar::-webkit-scrollbar-thumb,.privateMatchScroll::-webkit-scrollbar-thumb,.chatMessages::-webkit-scrollbar-thumb{
  border:2px solid rgba(3,7,14,.78);
  border-radius:8px;
  background:linear-gradient(180deg,rgba(97,232,255,.62),rgba(76,201,240,.30));
  background-clip:padding-box;
}
.gameHelpPanel::-webkit-scrollbar-thumb:hover,.debugBar::-webkit-scrollbar-thumb:hover,.privateMatchScroll::-webkit-scrollbar-thumb:hover,.chatMessages::-webkit-scrollbar-thumb:hover{
  background:linear-gradient(180deg,rgba(97,232,255,.78),rgba(76,201,240,.42));
  background-clip:padding-box;
}
.gameHelpPanel[hidden]{display:none}
/* Accessibility setting adjusts GUI text, not camera or canvas scale. */
.gameSettingRow{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:16px;border:1px solid var(--ui-border-strong);border-radius:10px;background:var(--ui-surface-soft)}
.gameSettingRow+.gameSettingRow{margin-top:12px}
.gameSettingRow>div,.privateModeSummary{display:grid;gap:5px;min-width:0}
.gameSettingRow strong{color:#e5f4ff;font:850 13px/1.3 var(--font-ui)}
.gameSettingRow span{color:#9eb2c8;font:600 12px/1.4 var(--font-ui)}
.gameSettingToggle{flex:0 0 auto;min-width:99px;min-height:42px;border:1px solid rgba(97,232,255,.4)!important;border-radius:8px!important;color:#d9faff!important;background:rgba(97,232,255,.08)!important;font:900 12px/1.2 var(--font-ui)!important;cursor:pointer}
.gameSettingToggle.is-off{color:#a5b8c8!important;border-color:var(--ui-border-strong)!important;background:rgba(255,255,255,.025)!important}
@media(max-width:390px){.gameSettingRow{flex-direction:column;align-items:stretch}.gameSettingToggle{align-self:flex-start}}

.helpTextSize[hidden]{display:none!important}
.helpTextSize{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:8px 12px;margin:16px 0 0;padding:12px;border:1px solid var(--ui-border-strong);border-radius:var(--ui-radius-sm);background:var(--ui-surface-soft);color:#c2d5e7;font-size:12px}
.helpTextSize label{font-weight:800;font-size:calc(12px * var(--ui-text-scale))}
.helpTextSize select{min-height:36px;min-width:106px;padding:6px 10px;border:1px solid var(--ui-border-strong);border-radius:8px;background:#122033;color:var(--ui-text-title)}
.gameHelpIntro{
  margin-bottom:16px;
  color:#a8b9cc;
}
.gameHelpItem .helpControlList{display:grid;gap:7px}
.gameHelpItem .helpControlList>span{display:flex;align-items:center;gap:12px}
.helpControlList kbd{flex:0 0 124px;text-align:center;padding:4px 7px;border:1px solid var(--ui-border-strong);border-radius:5px;background:rgba(255,255,255,.045);font:800 calc(11px * var(--ui-text-scale))/1.2 var(--font-ui);color:#d1e6f5}
.gameHelpGrid{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:12px;
}
/* One informational-card foundation; equipment previews keep their own identity. */
.gameHelpItem,.lootHelpItem,.wallHelpItem,.gameRoadmapItem{
  min-width:0;
  padding:var(--ui-card-inset);
  border:1px solid var(--ui-info-card-border);
  border-radius:var(--ui-info-card-radius);
  background:var(--ui-info-card-bg);
  box-shadow:inset 3px 0 0 var(--ui-info-card-accent);
}
.gameHelpItem strong,.lootHelpItem strong,.wallHelpItem strong,.gameRoadmapItem strong{
  color:var(--ui-info-card-title);
  font-size:calc(13px * var(--ui-text-scale));
  line-height:1.3;
  font-weight:900;
  letter-spacing:.025em;
}
.gameHelpItem span,.lootHelpItem p,.wallHelpItem p,.gameRoadmapItem span{
  color:var(--ui-info-card-text);
  font-size:calc(12px * var(--ui-text-scale));
  line-height:1.5;
  font-weight:600;
}
.gameHelpItem strong{display:block;margin-bottom:4px}
.gameHelpGrid + .lootHelpHeading{margin-top:15px}
.lootHelpHeading{
  margin:18px 0 10px;
  color:#dbeafa;
  font:900 calc(13px * var(--ui-text-scale))/1.25 var(--font-ui);
  letter-spacing:.07em;
}
.lootHelpHeading:first-of-type{margin-top:0}
.lootHelpList{display:grid;gap:10px}
.lootHelpItem{
  --loot-accent:#8fb5d8;
  --ui-info-card-accent:color-mix(in srgb,var(--loot-accent) 52%,transparent);
  display:flex;align-items:center;gap:10px
}
.lootHelpPreview{flex:0 0 44px;width:44px;height:44px}
.lootHelpItem>div{min-width:0}
.lootHelpItem strong{display:block;margin-bottom:5px}
.lootHelpItem p{margin:0}
.lootHelpItem p b{color:#e2edfa}

.weaponHelpBranchNav{
  display:flex;
  gap:6px;
  margin:0 0 10px;
}
.weaponHelpBranchButton{
  flex:1;
  min-width:0;
  min-height:40px;
  padding:0 10px!important;
  border:1px solid rgba(150,195,230,.13)!important;
  border-radius:8px!important;
  background:rgba(255,255,255,.025)!important;
  color:#8095ab!important;
  box-shadow:none!important;
  font:900 calc(12px * var(--ui-text-scale))/1.15 var(--font-ui)!important;
  letter-spacing:.025em;
}
.weaponHelpBranchButton:hover{background:rgba(97,232,255,.055)!important;color:#dcecf7!important}
.weaponHelpBranchButton[aria-pressed="true"]{
  border-color:rgba(97,232,255,.32)!important;
  background:rgba(97,232,255,.09)!important;
  color:#e9f8ff!important;
}
.weaponHelpCatalog{display:grid;gap:12px}
.weaponHelpBranchIntro{
  --weapon-help-accent:#61e8ff;
  display:grid;
  gap:6px;
  padding:12px 14px;
  border:1px solid color-mix(in srgb,var(--weapon-help-accent) 28%,rgba(150,195,230,.08));
  border-radius:10px;
  background:color-mix(in srgb,var(--weapon-help-accent) 8%,rgba(4,8,15,.96));
}
.weaponHelpBranchIntro strong{color:color-mix(in srgb,var(--weapon-help-accent) 62%,#eef8ff);font:900 calc(13px * var(--ui-text-scale))/1.2 var(--font-ui);letter-spacing:.05em}
.weaponHelpBranchIntro span{color:#9fb1c5;font-size:calc(12px * var(--ui-text-scale));line-height:1.42;font-weight:600}
.weaponHelpFamilyRow{
  display:grid;
  grid-template-columns:minmax(0,1fr);
  align-items:start;
  gap:12px;
  padding:16px 0;
  border:0;
  border-bottom:0;
  border-radius:0;
  background:transparent;
}
.weaponHelpFamilyLabel{display:flex;align-items:baseline;justify-content:space-between;flex-wrap:wrap;gap:4px 12px;min-width:0}
.weaponHelpName{display:block;overflow-wrap:anywhere;color:color-mix(in srgb,var(--weapon-help-accent) 58%,#f1f8fc);font:900 calc(14px * var(--ui-text-scale))/1.2 var(--font-ui);letter-spacing:.025em}
.weaponHelpEyebrow{display:block;color:#9bafc5;font:800 calc(11px * var(--ui-text-scale))/1.2 var(--font-ui);letter-spacing:.025em}
.weaponHelpVariants{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;min-width:0}
.weaponHelpVariant{min-width:0;padding:14px;border:1px solid color-mix(in srgb,var(--weapon-help-accent) 17%,rgba(255,255,255,.025));border-radius:7px;background:rgba(0,0,0,.12)}
.weaponHelpVariantHeader{display:flex;align-items:baseline;justify-content:space-between;gap:8px;min-width:0;margin-bottom:5px}
.weaponHelpVariantName{min-width:0;overflow-wrap:anywhere;color:#dceaf5;font:900 calc(13px * var(--ui-text-scale))/1.25 var(--font-ui);letter-spacing:.015em}
.weaponHelpVariantMeta{display:block;color:#9cafc4;font:800 calc(11px * var(--ui-text-scale))/1.2 var(--font-ui);letter-spacing:.015em;white-space:nowrap}
.weaponHelpVariant canvas,.riftWeaponPreview canvas{display:block;width:180px;max-width:100%;height:auto;aspect-ratio:120 / 38;margin:8px auto 12px}
.weaponHelpStats{display:grid;grid-template-columns:minmax(0,1fr);gap:7px}
.weaponHelpStat{display:flex;align-items:baseline;justify-content:space-between;flex-wrap:wrap;gap:6px;min-width:0;padding:8px 10px;border-radius:5px;background:rgba(255,255,255,.04);font-family:var(--font-ui)}
.weaponHelpStat b{color:#b6c8da;font-size:calc(11px * var(--ui-text-scale));line-height:1.25;letter-spacing:.01em}
.weaponHelpStat em{color:#f0f7ff;font-size:calc(12px * var(--ui-text-scale));line-height:1.25;font-style:normal;font-weight:850;white-space:nowrap}
/* Rift uses the same card anatomy as the three standard weapon variants. */
.riftHelpCatalog{grid-template-columns:repeat(3,minmax(0,1fr))}
.riftWeaponHelpCard{display:flex;flex-direction:column;gap:9px;align-items:stretch}
.riftWeaponHelpCard .weaponHelpVariantHeader{margin-bottom:0}
.riftWeaponPreview{display:grid;place-items:center;min-height:70px;border:1px solid color-mix(in srgb,var(--weapon-help-accent) 24%,transparent);border-radius:7px;background:rgba(0,0,0,.14)}
.riftWeaponHelpCard .weaponHelpDescription{margin-top:0;align-self:stretch}
.riftWeaponHelpCard .weaponHelpDescription p{margin:0}
@media(max-width:620px){.riftHelpCatalog{grid-template-columns:minmax(0,1fr)}}

.gameRoadmapList{
  display:grid;
  gap:8px;
}
.gameRoadmapItem{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:4px 12px}
.gameRoadmapItem span{grid-column:1 / -1}
.gameRoadmapStatus{
  align-self:start;
  font-style:normal;
  padding:5px 8px;
  border:1px solid rgba(97,232,255,.20);
  border-radius:999px;
  color:#8fe9f7;
  background:rgba(97,232,255,.055);
  font-size:calc(11px * var(--ui-text-scale));
  line-height:1.2;
  font-weight:900;
  letter-spacing:.04em;
  white-space:nowrap;
}
.gameRoadmapNote{
  margin:12px 2px 0;
  color:#71859c;
  font-size:calc(12px * var(--ui-text-scale));
  line-height:1.45;
}
@media(max-width:520px){
  .gameModalDialog,.weaponBranchDialog{padding:var(--ui-modal-padding-narrow)}
  .gameHelpDialog{padding:0}
  .returnMenuActions{flex-direction:column}
  .returnMenuActions button{width:100%}
  .gameHelpPanel{padding:12px}
  .gameHelpGrid{grid-template-columns:1fr}
}
@media(max-width:620px){
  .weaponHelpVariants{grid-template-columns:minmax(0,1fr)}
  .gameHelpPanel{padding:12px}
}


.debugBar{
  position:fixed;
  /* Docked between the game buttons and minimap, above the movement hint. */
  left:calc(14px + 3 * 42px + 3 * 6px + 10px + 130px + 8px);
  right:calc(var(--hud-edge-gap) + var(--ui-board-width) + 8px);
  bottom:calc(var(--hud-edge-gap) * 2 + var(--hud-dock-offset));
  z-index:41;
  display:none;
  flex-direction:row;
  flex-wrap:nowrap;
  align-content:flex-start;
  align-items:stretch;
  gap:0;
  width:auto;
  max-height:min(190px,38vh);
  box-sizing:border-box;
  padding:7px 8px;
  overflow-y:auto;
  overflow-x:auto;
  pointer-events:auto;
}
body.game-ui .debugBar{display:flex}
body.game-ui .debugBar.is-hidden{display:none}
.debugBarHeader{
  display:flex;
  align-items:center;
  flex:0 0 auto;
  flex-direction:column;
  justify-content:center;
  align-self:stretch;
  gap:6px;
  padding:3px 9px 3px 2px;
  border-right:1px solid rgba(255,255,255,.07);
}
.debugBarLabel{
  color:#89a1be;
  font:900 10px/1 var(--font-ui);
  letter-spacing:.11em;
  user-select:none;
}
#debugBar .debugGroup{
  display:flex;
  width:126px;
  flex:0 0 126px;
  max-width:none;
  flex-wrap:wrap;
  align-items:flex-start;
  align-content:flex-start;
  gap:4px;
  min-width:64px;
  max-height:100%;
  padding:3px 7px;
  border:0;
  border-left:1px solid rgba(255,255,255,.07);
  border-radius:0;
  background:transparent;
}
#debugBar #debugWeaponGroup{width:160px;flex-basis:160px}
#debugBar #debugBranchGroup{width:142px;flex-basis:142px}
#debugBar .debugGroup[aria-label="Systém"]{width:152px;flex-basis:152px}
#debugBar .debugStepValue{
  width:38px;
  height:27px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  flex:0 0 38px;
  padding:0 4px;
  border:1px solid rgba(97,232,255,.09);
  border-radius:5px;
  outline:0;
  background:rgba(97,232,255,.045);
  color:#d5f8ff;
  font:850 9px/1 var(--font-ui);
  font-variant-numeric:tabular-nums;
  text-align:center;
  user-select:none;
}
#debugBar input.debugStepValue{
  appearance:textfield;
  user-select:text;
}
#debugBar input.debugStepValue:focus{
  border-color:rgba(97,232,255,.32);
  background:rgba(97,232,255,.075);
}
#debugBar input.debugStepValue::-webkit-inner-spin-button,
#debugBar input.debugStepValue::-webkit-outer-spin-button{appearance:none;margin:0}
#debugBar .debugStepValue.warn{
  color:#ffd68a;
  border-color:rgba(255,190,82,.28);
  background:rgba(140,91,26,.16);
}
#debugBar .debugStepButton{
  width:27px;
  padding:0!important;
  font-size:14px!important;
}
#debugBar button:disabled{
  opacity:.34;
  cursor:default;
  pointer-events:none;
}
#debugBar .debugGroupTitle{
  flex:0 0 100%;
  margin:0 0 1px 1px;
  color:rgba(172,190,210,.58);
  font:800 7.5px/1 var(--font-ui);
  letter-spacing:.10em;
  text-transform:uppercase;
  user-select:none;
  white-space:nowrap;
}
#debugBar button{
  position:static!important;left:auto!important;right:auto!important;bottom:auto!important;
  margin:0;height:27px;min-width:0;padding:0 7px;
  border:1px solid transparent;
  border-radius:5px;
  background:rgba(255,255,255,.045);
  color:#b9c9da;
  box-shadow:none;
  font:800 9px/1 var(--font-ui);
  letter-spacing:.025em;
  white-space:nowrap;
}
#debugBar button:hover{
  color:#eff9ff;
  background:rgba(255,255,255,.075);
  border-color:rgba(160,205,235,.13);
}
#debugBar .debugWeaponButton{
  padding:0 5px;
  color:#9eafc2;
}
#debugBar .debugWeaponButton.active{
  color:#ecfbff!important;
  border-color:rgba(97,232,255,.34)!important;
  background:rgba(42,133,163,.24)!important;
  box-shadow:inset 0 0 12px var(--ui-focus-fill)!important;
}
#debugBar #debugForceHot.active,
#debugBar #debugCriticalVisual.active{
  border-color:rgba(255,89,101,.48)!important;
  background:rgba(128,30,43,.32)!important;
  color:#ffc0c6!important;
}
#debugBar #debugBotIgnore.active,
#debugBar #telemetryRecordToggle.active,
#debugBar #telemetryBotTraceToggle.active{
  border-color:color-mix(in srgb,var(--color-success) 42%,transparent)!important;
  background:rgba(45,112,77,.30)!important;
  color:#baffd5!important;
}

#debugBar #debugVisionMode.active{
  border-color:var(--ui-focus-bright)!important;
  background:rgba(42,133,163,.24)!important;
  color:#d5f8ff!important;
}

/* Debug-only vision simulation. One shared target list keeps every mode aligned;
   the debug bar stays unfiltered so the tester can always identify the mode. */
body.game-ui[data-debug-vision="grayscale"]{--debug-vision-filter:grayscale(1)}
body.game-ui[data-debug-vision="protanopia"]{--debug-vision-filter:url(#debugVisionProtanopia)}
body.game-ui[data-debug-vision="deuteranopia"]{--debug-vision-filter:url(#debugVisionDeuteranopia)}
body.game-ui[data-debug-vision="tritanopia"]{--debug-vision-filter:url(#debugVisionTritanopia)}
body.game-ui[data-debug-vision] #game,
body.game-ui[data-debug-vision] #topLeftHud,
body.game-ui[data-debug-vision] #hudEvent,
body.game-ui[data-debug-vision] #rightHud,
body.game-ui[data-debug-vision] #gameControls,
body.game-ui[data-debug-vision] #gameMeta,
body.game-ui[data-debug-vision] #gameTelemetry,
body.game-ui[data-debug-vision] .gameModal{filter:var(--debug-vision-filter)}
@media (max-width:760px){
  .gameMeta,.gameTelemetry{font-size:9px}
  /* Below 460px, intro telemetry keeps its established 9px readout. */
  body.intro-ui .gameTelemetry{font-size:9px}
  .gameControls{left:8px;gap:5px}
  .gameControlButton{width:44px;height:44px;min-width:44px}
  .debugBar{
    /* On narrow screens the complete tool strip occupies its own row above
       the controls; all groups remain reachable by horizontal scrolling. */
    left:8px;
    right:8px;
    bottom:calc(var(--hud-edge-gap) * 2 + var(--hud-dock-offset) + 52px);
    gap:3px;
    padding:6px;
  }
  .debugBarHeader{padding:2px 6px 2px 0}
  .debugBarLabel{font-size:9px}
  #debugBar .debugGroup{gap:3px;padding:3px 5px}
  #debugBar button{height:24px;padding:0 5px;font-size:8px}
  #debugBar .debugStepValue{width:34px;height:24px;flex-basis:34px;font-size:8px}
  #debugBar .debugStepButton{width:24px;font-size:13px!important}
}

@media (max-width:1100px){
  .debugBar{max-height:min(162px,28vh)}
}
@media (min-width:761px) and (max-width:819px){
  .debugBar{right:8px}
}


/* HUD polish pass: balanced spacing and tighter vertical rhythm. */
#levelBox{
  position:relative;
  display:flex;
  align-items:center;
  width:max-content;
  max-width:calc(100vw - 2 * var(--hud-edge-gap));
  gap:var(--hud-panel-pad);
  padding:var(--hud-panel-pad);
}
/* Compact weapon HUD; shield levels are rendered on the actor. Mines follow HP/ammo bars. */
#weaponStatusRow{
  display:flex;
  align-items:stretch;
  gap:0;
  padding:0;
  overflow:hidden;
}
#weaponBox{
  --weapon-hud-accent:var(--color-progress);
  box-sizing:border-box;
  width:154px;
  min-width:0;
  padding:9px 10px;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
}
.weaponHudHeader{
  height:18px;
  width:100%;
  display:flex;
  align-items:center;
  justify-content:flex-start;
  gap:6px;
}
.weaponBranchIcon{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  flex:0 0 auto;
  color:#74e9f4;
}
.weaponBranchIcon svg{display:block;width:100%;height:100%}
.weaponHudBranchIcon{width:17px;height:17px}
#weaponBox.isRiftWeapon .weaponHudBranchIcon{display:none}
#weaponStatusRow.isRiftWeapon{
  border-color:color-mix(in srgb,var(--weapon-hud-accent) 72%,rgba(255,255,255,.18));
  box-shadow:0 0 0 1px color-mix(in srgb,var(--weapon-hud-accent) 34%,transparent),0 10px 24px rgba(0,0,0,.32),0 0 18px color-mix(in srgb,var(--weapon-hud-accent) 26%,transparent);
}
#weaponHudName{
  min-width:0;
  max-width:122px;
  overflow:hidden;
  white-space:nowrap;
  text-overflow:ellipsis;
  color:var(--ui-hud-value-ink);
  font-size:11.5px;
  line-height:1;
  font-weight:500;
  letter-spacing:.055em;
  text-align:left;
}
#weaponBox.isRiftWeapon #weaponHudName{color:var(--weapon-hud-accent)}
#weaponHudCanvas{
  display:block;
  width:120px;
  height:38px;
  margin-top:4px;
  pointer-events:none;
}
.levelBadge{
  width:56px;
  height:56px;
  flex:0 0 56px;
  align-self:center;
  border-radius:13px;
  margin-right:8px;
}
.levelMeta{
  flex:0 1 auto;
  display:flex;
  flex-direction:column;
  justify-content:center;
  min-width:145px;
  padding:0;
}
.hudIdentityRow{
  display:flex;
  align-items:center;
  min-width:0;
  min-height:18px;
}
.playerNameHud{
  margin:0;
  overflow:hidden;
  white-space:nowrap;
  text-overflow:ellipsis;
  color:var(--color-text-strong);
  font-size:15px!important;
  line-height:1.05;
  font-weight:900!important;
  letter-spacing:.015em;
  text-shadow:0 0 10px color-mix(in srgb,var(--playerColor,#4CC9F0) 28%,transparent);
}
#xpMeter{
  height:8px;
  margin-top:8px;
  overflow:hidden;
  border-radius:999px;
  background:rgba(255,255,255,.075);
}
@container gamehud (min-width:721px){
  /* Leave space for the leaderboard even with the longest allowed name. */
  #levelBox{max-width:calc(100vw - var(--ui-board-width) - 3 * var(--hud-edge-gap))}
}
@container gamehud (max-width:720px){
  #levelBox{min-width:min(260px,calc(100vw - 2 * var(--hud-edge-gap)))}
  .levelBadge{width:52px;height:52px;flex-basis:52px}
  .levelMeta{min-width:0}
}

#start{
  position:fixed;
  inset:0;
  z-index:40;
  display:grid;
  place-items:center;
  align-items:center;
  justify-content:center;
  padding:24px;
  isolation:isolate;
  overflow:hidden;
  background:transparent!important;
  backdrop-filter:none!important;
  -webkit-backdrop-filter:none!important;
}
.simpleStartCard::before{
  content:"";
  position:absolute;
  inset:-14px;
  z-index:-1;
  border-radius:26px;
  background:radial-gradient(circle at 50% -10%,rgba(90,224,255,.10),transparent 42%), radial-gradient(circle at 100% 100%,rgba(255,94,157,.08),transparent 32%);
  pointer-events:none;
}

/* Compact intro positioning is defined once below, in the intro-only rules. */
@media(max-width:760px){
  #start{padding:10px;overflow:auto;place-items:start center}
}


/* Intro spectator: the live game remains visible, but redundant gameplay HUD
   stays hidden until the player actually starts the match. */
body.intro-ui #topLeftHud,body.intro-ui #rightHud,body.booting #topLeftHud,body.booting #rightHud{
  display:none!important;
}


/* Leaderboard header with current connected/participating roster size */
.boardHeader{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  margin:0 0 4px;
  padding:0 4px 8px;
  border-bottom:1px solid var(--ui-panel-divider);
}
.boardHeaderLabel{
  color:var(--ui-panel-heading-ink);
  font-size:var(--ui-panel-heading-size);
  font-weight:900;
  letter-spacing:var(--ui-panel-heading-tracking);
}
#boardPlayerCount{
  color:var(--ui-hud-value-ink);
  font-size:12px;
  font-weight:900;
  letter-spacing:.02em;
}
.boardHeading{min-width:0;display:flex;flex-direction:column;gap:3px}
.boardModeLabel{font:900 12px/1.25 var(--font-ui);letter-spacing:.025em;color:#f3f7ff}
.boardModeLabel[hidden]{display:none}
.boardTimer{font:900 20px/1.2 var(--font-ui);letter-spacing:-.03em;color:#f3f7ff;white-space:nowrap}
.boardTimer[hidden]{display:none}
#board[data-private="true"] .boardHeaderLabel{font-size:9.5px;letter-spacing:.055em}
#board[data-private="true"] #boardPlayerCount{display:none}



/* Gameplay panels avoid backdrop blur over the continuously redrawn canvas. */
body:not(.intro-ui) #levelBox,body:not(.intro-ui) #weaponStatusRow,body:not(.intro-ui) #board{
  backdrop-filter:none!important;
  -webkit-backdrop-filter:none!important;
}


/* Intro identity panel occupies the live HUD's upper-left slot. */


body.intro-ui #start .startCenterWrap{
  position:absolute;
  inset:0;
  z-index:2;
  display:block;
  padding:0;
  pointer-events:none;
}

body.intro-ui #start .simpleStartCard{
  position:absolute;
  inset:0;
  z-index:2;
  isolation:isolate;
  width:100%;
  height:100%;
  max-width:none;
  max-height:none;
  padding:0;
  margin:0;
  overflow:visible;
  background:transparent;
  border:0;
  box-shadow:none;
  backdrop-filter:none;
  -webkit-backdrop-filter:none;
  pointer-events:none;
}

body.intro-ui #start .simpleStartMain{
  position:absolute;
  inset:0;
  z-index:2;
  display:block;
}


/* Intro spectator cursor and hit areas. */
body.intro-ui,
body.intro-ui #start,
body.intro-ui #game{
  cursor:default!important;
}
body.intro-ui.intro-spectator-hint-visible,
body.intro-ui.intro-spectator-hint-visible #start,
body.intro-ui.intro-spectator-hint-visible #game{
  cursor:none!important;
}


#introSpectatorHint{
  position:fixed;
  left:0;
  top:0;
  z-index:9999;
  display:none;
  align-items:center;
  justify-content:center;
  min-height:34px;
  padding:0 13px;
  border:0;
  border-radius:var(--ui-radius-sm);
  background:var(--color-accent-cyan) linear-gradient(90deg,var(--color-accent-cyan),var(--color-accent-violet));
  color:var(--color-control-ink);
  font:900 11px/1 var(--font-ui);
  letter-spacing:.055em;
  text-transform:uppercase;
  pointer-events:none;
  white-space:nowrap;
  transform:translate3d(-100px,-100px,0);
  contain:layout paint style;
}
body.intro-ui #introSpectatorHint{will-change:transform}

@media(pointer:coarse){
  body.intro-ui #start{cursor:auto!important;}
  #introSpectatorHint{display:none!important;}
}

/* Shared player color swatch (HUD and identity dialogs). */
.playerColorBadgeVisual{
  --playerColor:#4CC9F0;
  width:56px;
  height:56px;
  border-radius:14px;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:24px;
  font-weight:950;
  color:#06101a;
  background:
    linear-gradient(145deg,rgba(255,255,255,.52),rgba(255,255,255,.08) 38%,transparent 39%),
    var(--playerColor);
  border:2px solid color-mix(in srgb,var(--playerColor) 78%,white);
  box-shadow:
    0 0 24px color-mix(in srgb,var(--playerColor) 34%,transparent),
    inset 0 0 16px rgba(255,255,255,.13);
}


/* Intro game-mode selector. One delegated click handler controls only selection
   state and the primary action; the unavailable network modes run no game code. */
body.intro-ui #start .gameModeSelector{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:6px;
  width:100%;
}
body.intro-ui #start .gameModeButton{
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;
  appearance:none;
  -webkit-appearance:none;
  min-width:0;
  min-height:92px;
  padding:10px 9px;
  border:1px solid var(--ui-border-strong);
  border-radius:9px;
  background:var(--ui-surface-soft);
  box-shadow:none;
  color:rgba(196,214,231,.68);
  font:900 var(--ui-action-font-size)/1.05 var(--font-ui);
  letter-spacing:.045em;
  text-align:center;
  text-transform:uppercase;
  white-space:normal;
  cursor:pointer;
  transition:background-color .15s ease,color .15s ease,box-shadow .15s ease;
}
body.intro-ui #start .gameModeGlyph{display:grid;place-items:center;width:44px;height:36px;color:#86dbea}
body.intro-ui #start .gameModeGlyph svg{display:block;width:44px;height:36px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
body.intro-ui #start .gameModeButton.is-selected .gameModeGlyph{color:#d5faff}
body.intro-ui #start .gameModeButton:hover{
  background:var(--ui-selection-hover);
  color:#dcecf9;
}
body.intro-ui #start .gameModeButton.is-selected{
  background:var(--ui-selection-bg);
  outline:1px solid var(--ui-selection-border);
  outline-offset:0;
  box-shadow:0 0 18px var(--ui-focus-glow),inset 0 0 18px var(--ui-focus-fill);
  color:var(--ui-selection-ink);
}
body.intro-ui #start .gameModeButton.is-selected:hover{
  background:var(--ui-selection-bg);
}
/* One lightweight intro status line; counts come from the live server, not the bot demo. */
body.intro-ui #start .multiplayerPopulation{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  justify-content:center;
  gap:4px 6px;
  min-height:25px;
  padding:5px 8px;
  border:1px solid rgba(132,183,219,.20);
  border-radius:7px;
  background:rgba(7,17,29,.63);
  color:#b9d4e9;
  font:800 11px/1.35 var(--font-ui);
  letter-spacing:.025em;
  text-align:center;
  font-variant-numeric:tabular-nums;
}
body.intro-ui #start .multiplayerPopulationDot{
  position:relative;
  flex:0 0 6px;
  height:6px;
  border-radius:50%;
  background:#65e9b4;
  box-shadow:0 0 6px rgba(101,233,180,.55);
}
body.intro-ui #start .multiplayerPopulation:not(.is-pending):not(.is-unavailable):not(.is-full) .multiplayerPopulationDot::after{
  content:"";
  position:absolute;
  inset:-4px;
  border:1px solid rgba(101,233,180,.65);
  border-radius:50%;
  animation:zemarisOnlinePulse 2.2s ease-out infinite;
  pointer-events:none;
}
@keyframes zemarisOnlinePulse{
  0%{transform:scale(.55);opacity:.75}
  75%,100%{transform:scale(1.45);opacity:0}
}
@media (prefers-reduced-motion:reduce){
  body.intro-ui #start .multiplayerPopulationDot::after{animation:none!important;opacity:0}
}
body.intro-ui #start .multiplayerPopulation.is-pending .multiplayerPopulationDot,
body.intro-ui #start .multiplayerPopulation.is-unavailable .multiplayerPopulationDot{
  background:#8299ad;
  box-shadow:none;
}
body.intro-ui #start .multiplayerPopulation.is-full{
  border-color:rgba(255,105,127,.30);
  color:#ffd5dd;
}
body.intro-ui #start .multiplayerPopulation.is-full .multiplayerPopulationDot{background:#ff687e;box-shadow:none}
body.intro-ui #start .multiplayerPopulationNotice{display:inline-flex;align-items:center;gap:.35em;margin-left:-2px;color:#ff94a4}
body.intro-ui #start .multiplayerPopulationNotice::before{content:"·";color:currentColor}
body.intro-ui #start .multiplayerPopulationSeats:empty,
body.intro-ui #start .multiplayerPopulationNotice:empty{display:none}

/* Intro TOP 5 shares the gameplay HUD row/column styling above: scoreline,
   scorePos, scoreName, scoreValue, scoresEntries and boardStatsLegend. */
body.intro-ui #introRecords{
  position:absolute;top:var(--hud-edge-gap);right:var(--hud-edge-gap);z-index:3;
  width:249.6px;max-height:min(78dvh,710px);overflow-y:auto;
  padding:13px;pointer-events:auto;
  color:#e4f2ff;font-family:var(--font-ui);cursor:auto!important;
  backdrop-filter:none;-webkit-backdrop-filter:none;
}
.introRecordsHeader{display:flex;justify-content:space-between;align-items:center;gap:10px;padding:3px 2px 11px;border-bottom:1px solid var(--ui-panel-divider);color:var(--ui-panel-heading-ink);font:900 var(--ui-panel-heading-size)/1.2 var(--font-ui);letter-spacing:var(--ui-panel-heading-tracking)}
.introRecordsEmblem{color:#ffd36f}
.introRecordsEmblem svg{display:block;width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linejoin:round}
body.intro-ui #introRecords button{cursor:pointer!important}
.introRecordsGroup{margin-top:14px}
.introRecordsGroup + .introRecordsGroup{margin-top:18px;padding-top:14px;border-top:1px solid var(--ui-panel-divider)}
.introRecordsLabel{display:flex;align-items:center;padding:0 6px;color:#e8f2ff;font:850 11px/1.3 var(--font-ui);letter-spacing:.055em}
.introRecordList{list-style:none;margin:0;padding:0}
.introRecordList .introRecordEmpty{min-height:35px;padding:9px 7px;color:#829ab1;font:650 11px/1.3 var(--font-ui)}
@media(max-width:1050px){body.intro-ui #introRecords{width:212.8px}}
@media(max-width:820px){body.intro-ui #introRecords{top:auto;bottom:72px;right:10px;width:200px;max-height:min(48dvh,360px);padding:10px}}
/* On constrained viewports show one complete ranking at a time. */
.introRecordsSwitch{display:none}
@media(max-width:820px){
  .introRecordsSwitch{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:6px;margin-top:10px}
  .introRecordsSwitch button{min-width:0;min-height:36px;padding:6px 8px;border:1px solid var(--ui-border-strong);border-radius:7px;background:rgba(255,255,255,.035);color:#9fb7ca;font:850 11px/1.2 var(--font-ui);cursor:pointer}
  .introRecordsSwitch button[aria-selected="true"]{background:var(--ui-selection-bg);color:var(--ui-selection-ink);border-color:var(--ui-selection-border)}
  #introRecords[data-active-group="single"] .introRecordsGroup[data-record-group="multi"],
  #introRecords[data-active-group="multi"] .introRecordsGroup[data-record-group="single"]{display:none}
  .introRecordsGroup,.introRecordsGroup + .introRecordsGroup{margin-top:10px;padding-top:0;border-top:0}
}
@media(max-width:580px){
  body.intro-ui #introRecords{bottom:60px;right:8px;width:min(214.4px,calc(100vw - 16px));max-height:min(45dvh,350px);padding:12px}
  .introRecordsLabel{display:none}
}
body.intro-ui #start .gameModeDetails{
  margin:1px 2px 0;
  padding:0;
  border:0;
  background:transparent;
  color:#96abc2;
  font:500 12px/1.5 var(--font-ui);
  text-align:center;
}

/* Intro setup now contains only mode selection and the primary start action.
   Player identity is finalized in the shared first-spawn panel. */
body.intro-ui #start .simpleStartSetup{
  position:absolute;
  z-index:2;
  min-width:0;
  left:var(--hud-edge-gap);
  top:var(--hud-edge-gap);
  width:min(370px,calc(100vw - var(--hud-edge-gap) * 2));
  box-sizing:border-box;
  display:grid;
  gap:20px;
  padding:16px;
  pointer-events:auto;
  cursor:default;
}
body.intro-ui #start .gameModeBlock{display:grid;gap:12px;width:100%;margin:0!important}
body.intro-ui #start .gameModeDetails:empty{display:none!important}
body.intro-ui #start .simpleStartCard .simplePlay{
  position:relative;
  z-index:2;
  display:block!important;
  transform:none;
  text-transform:none;
  width:100%!important;
  min-height:62px!important;
  height:62px!important;
  box-sizing:border-box!important;
  margin:0!important;
  border-radius:10px!important;
  font-size:18px!important;
  font-weight:950!important;
  font-family:var(--font-ui);
  line-height:1;
  letter-spacing:.075em!important;
  cursor:pointer!important;
  box-shadow:0 0 0 1px rgba(255,255,255,.08),0 14px 36px rgba(86,204,255,.24)!important;
}


/* Public gameplay guide link, rendered only on the intro screen. */

body.intro-ui #start .simplePlay:disabled{
  cursor:not-allowed!important;
  opacity:.38;
  filter:saturate(.25);
  box-shadow:none!important;
}
body.intro-ui #start .simplePlay:disabled::before{opacity:0!important}

#returnMenuCancel,.gameControlButton{
  background-color:var(--ui-surface-soft)!important;
  background-image:none!important;
  transition:background-color .15s ease!important;
}
#returnMenuCancel:hover,.gameControlButton:hover,
#returnMenuCancel:active,.gameControlButton:active{
  background-color:rgba(97,232,255,.085)!important;
}

.primaryAction:focus-visible,.secondary:focus-visible,.dangerAction:focus-visible,.gameControlButton:focus-visible,
body.intro-ui #start .gameModeButton:focus-visible{
  outline:2px solid var(--ui-focus-outline);
  outline-offset:2px;
}


.debugAuthDialog{max-width:440px}
.debugAuthForm{margin-top:var(--ui-modal-section-gap)}
.debugAuthStatus{min-height:18px;margin:0;color:rgba(237,247,255,.7);font-size:12px}
.debugAuthActions{margin-top:var(--ui-space-small)}



/* Keep the intro out of the first paint until startup has decided whether a
   valid multiplayer session should be resumed directly. */
body.booting #start{visibility:hidden!important}

/* Modals over the intro demo own the real cursor, including Private Match.
   Canvas/spectator hint cursor hiding must never leak into interactive dialogs. */
body.intro-ui .gameModal.open,body.intro-ui .gameModal.open .gameModalDialog,body.intro-ui .chatPanel{cursor:default!important}
body.intro-ui .gameModal.open button,body.intro-ui .gameModal.open select,body.intro-ui .chatPanel button{cursor:pointer!important}
body.intro-ui .gameModal.open input,body.intro-ui .chatPanel input{cursor:text!important}

/* The first-spawn/respawn picker is UI, not the aiming surface. Keep the native
   cursor visible just like the intro setup panel; interactive controls retain
   their pointer/text cursors. */
.weaponBranchHeading{margin-bottom:16px}
/* All entry dialogs share the same compact identity geometry. */
#introIdentitySetup{width:100%;max-width:100%;margin:0;min-width:0}
.weaponBranchModal,.weaponBranchDialog{cursor:default!important}
.weaponBranchModal button,.weaponBranchModal .weaponBranchOption,.weaponBranchModal .playerColorChoice{cursor:pointer!important}
.weaponBranchModal input{cursor:text!important}

/* Weapon picker shares the modal shell; only its size, padding and overlay
   stacking remain specific to the first-spawn / respawn flow. */
.weaponBranchModal{z-index:88;background:rgba(1,4,10,.58)}
.weaponBranchDialog,.privateMatchDialog{--ui-modal-width:var(--ui-modal-width-lg)}
.weaponBranchOptions{
  width:100%;
  box-sizing:border-box;
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:10px;
}
.weaponBranchOption{
  min-width:0;
  min-height:139px!important;
  padding:15px 12px!important;
  display:flex!important;
  flex-direction:column;
  align-items:center!important;
  justify-content:flex-start!important;
  gap:9px;
  text-align:center!important;
  border:1px solid rgba(150,195,230,.12)!important;
  background:rgba(255,255,255,.025)!important;
  color:#d9e7f2!important;
  box-shadow:none!important;
}
.weaponBranchOptionIcon{width:34px;height:34px;color:#7feaf4}
.weaponBranchOptionCopy{display:flex;min-width:0;flex-direction:column;align-items:center;gap:5px}
.weaponBranchOption strong{font:900 calc(13px * var(--ui-text-scale))/1.2 var(--font-ui);letter-spacing:.035em}
.weaponBranchOptionCopy span{max-width:100%;color:#a9bdd0;font:600 calc(11px * var(--ui-text-scale))/1.42 var(--font-ui)}
.weaponBranchOption:hover{background:rgba(97,232,255,.05)!important;border-color:rgba(97,232,255,.20)!important}
.weaponBranchOption.active{background:rgba(97,232,255,.085)!important;border-color:rgba(97,232,255,.48)!important;color:#f5fdff!important}
.weaponBranchOption.active .weaponBranchOptionCopy span{color:#d3e6f5}
#playerNameRefresh[hidden]{display:none!important}
.multiplayerJoinStatus{
  min-height:18px;
  margin:12px 0 -4px;
  color:#8fa9bd;
  font:800 10px/1.4 var(--font-ui);
  letter-spacing:.035em;
  text-align:center;
}
.multiplayerJoinStatus:empty{display:none}
.weaponBranchSpawnRow{
  width:100%;
  display:flex;
  justify-content:center;
  gap:10px;
  margin-top:var(--ui-modal-group-gap);
}
.weaponBranchBack{min-width:120px}
.weaponBranchBack[hidden]{display:none!important}
.weaponBranchSpawn{
  width:auto;
  min-width:190px;
  padding:0 30px!important;
}
@media (max-width:760px){
  .weaponBranchOptions{grid-template-columns:repeat(2,minmax(0,1fr))}
  .weaponBranchOption{min-height:130px!important}
}
@media (max-width:430px){
  .weaponBranchOption{min-height:130px!important;padding:12px 9px!important}
  .weaponBranchOptionCopy span{font-size:calc(11px * var(--ui-text-scale))}
  .weaponBranchSpawn{min-width:170px}
}

#debugBar .debugBranchButton.active{
  color:#eaffff!important;
  border-color:rgba(97,232,255,.62)!important;
  background:var(--ui-selection-bg)!important;
}

@media (max-width:720px){
  .weaponHelpBranchNav{display:grid;grid-template-columns:repeat(3,minmax(0,1fr))}
}

@media (max-width:760px){
  .weaponHelpFamilyRow{grid-template-columns:1fr;gap:7px}
  .weaponHelpFamilyLabel{flex-direction:row;justify-content:space-between;align-items:baseline;gap:8px}
  .weaponHelpVariants{gap:10px}
  .weaponHelpVariant{padding:12px}
  .weaponHelpVariantName{font-size:calc(12px * var(--ui-text-scale))}
}
@media (max-width:520px){
  .weaponHelpVariants{grid-template-columns:1fr}
}


/* Visible semantic intro copy without a separate SEO-only page. */
body.intro-ui #start .startSeoIntro{
  display:grid;
  gap:7px;
  margin:0 0 7px;
}
body.intro-ui #start .startSeoIntro h1{
  margin:0;
  color:#eaf5ff;
  font:950 21px/1.15 var(--font-ui);
  letter-spacing:.08em;
}
body.intro-ui #start .startSeoIntro p{
  margin:0;
  color:#96abc2;
  font:600 calc(12px * var(--ui-text-scale))/1.48 var(--font-ui);
  letter-spacing:.01em;
}

/* Safe-spawn status uses the same cyan/violet HUD colors. Indeterminate because
   a safe location can require any number of retries; no fake percentages. */
.spawnLoading{position:fixed;inset:0;z-index:94;display:none;align-items:center;justify-content:center;padding:20px;background:rgba(2,7,16,.84);pointer-events:auto}
.spawnLoading.open{display:flex}
.spawnLoadingPanel{width:min(410px,calc(100vw - 40px));padding:23px 25px 22px;display:flex;flex-direction:column;gap:13px;text-align:center;font-family:var(--font-ui);letter-spacing:.07em}
.spawnLoadingPanel strong{font-size:17px;font-weight:950;color:#e8faff}
.spawnLoadingPanel #spawnLoadingMessage{font-size:12px;font-weight:850;color:var(--color-accent-cyan)}
.spawnLoadingPanel small{font-size:9px;font-weight:700;color:#819db1}
.spawnLoadingTrack{height:9px;border:1px solid rgba(115,206,244,.23);border-radius:9px;background:rgba(17,42,65,.88);overflow:hidden;position:relative}
.spawnLoadingTrack span{position:absolute;inset:0 auto 0 -38%;width:38%;border-radius:9px;background:linear-gradient(90deg,var(--color-accent-violet),var(--color-accent-cyan));box-shadow:0 0 15px rgba(81,210,255,.44);animation:spawnLoadingTravel 1.45s ease-in-out infinite}
@keyframes spawnLoadingTravel{to{left:105%}}
@media (prefers-reduced-motion:reduce){.spawnLoadingTrack span{animation:none;left:31%;width:38%}}

/* Private Match reuses the existing gameplay modal, action buttons and inputs. */
.privateMatchDialog{display:flex;flex-direction:column;padding:0!important;overflow:hidden}
.privateMatchDialog>.gameModalHeader{position:relative;flex:0 0 auto;margin:0!important;padding:var(--ui-modal-padding) var(--ui-modal-padding) 14px}
.privateMatchScroll{min-height:0;overflow-y:auto;overscroll-behavior:contain;padding:0 var(--ui-modal-padding) var(--ui-modal-padding);flex:0 1 auto}
@media(max-width:520px){.privateMatchDialog>.gameModalHeader{padding:var(--ui-modal-padding-narrow) var(--ui-modal-padding-narrow) 12px}.privateMatchScroll{padding:0 var(--ui-modal-padding-narrow) var(--ui-modal-padding-narrow)}}
.privateMatchDialog:has(#privateLobby:not([hidden])){--ui-modal-width:var(--ui-modal-width-xl)}
.privateClose{flex:0 0 auto}
.privateMatchSection{display:grid;gap:var(--ui-modal-group-gap);margin-top:0}
.privateMatchSection[hidden]{display:none}
.privateWideButton{width:100%}
.privateMatchActions{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--ui-space-small);min-width:0}
.privateMatchActions .uiDialogAction{min-width:0;padding-inline:9px!important}
@media(max-width:420px){
  .privateMatchActions,.privateJoinForm{grid-template-columns:minmax(0,1fr)}
}
.privateJoinForm{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:var(--ui-space-small)}
.privateSectionDivider{display:flex;align-items:center;gap:12px;padding:4px 0;color:var(--ui-text-description);font:850 calc(12px * var(--ui-text-scale))/1.35 var(--font-ui);letter-spacing:.055em}
.privateSectionDivider::before,.privateSectionDivider::after{content:"";height:1px;flex:1;background:var(--ui-modal-border)}
.privateJoinForm input{text-transform:uppercase;letter-spacing:.10em}
.privateJoinForm button{white-space:nowrap}
/* One shared identity design in intro and lobby. The remaining grid space
   separates the identity half and the quarter-width room code naturally. */
.privateLobbyTop{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--ui-modal-group-gap);align-items:start}
.privateLobbyIdentity{grid-column:1 / span 2}
.privateLobbyCodeRow{grid-column:4}
.privateLobbyCodeRow .privateCode{font-weight:900;letter-spacing:.12em;cursor:text}
.privateLobbyIdentity .uiIdentityInputWrap,.privateLobbyCodeRow .uiIdentityInputWrap{width:100%}
.privateLobbyDivider{width:100%;height:0;margin:0;border:0;border-top:1px solid var(--ui-panel-divider)}
@media(max-width:650px){
  .privateLobbyTop{grid-template-columns:minmax(0,1fr);row-gap:var(--ui-modal-group-gap)}
  .privateLobbyIdentity,.privateLobbyCodeRow{grid-column:1}
}
/* Host: settings + players. Guest: match rules + the same live player roster. */
.privateLobbyConfiguration{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px;align-items:start}
.privateLobbyInfo{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));align-content:start;column-gap:12px;row-gap:14px;min-width:0;color:var(--ui-text-description);font:800 calc(12px * var(--ui-text-scale))/1.4 var(--font-ui)}
/* Full-width game mode; two-column settings, including kill limit and friendly fire.
   The mode summary is moved by the existing controller and spans both columns. */
.privateLobbyInfo>*{grid-column:1/-1}
.privateLobbyInfo>label[for="privateCapacity"],.privateLobbyInfo>label[for="privateDuration"]{grid-column:auto}
.privateLobbyInfo>#privateKillLimitRow,.privateLobbyInfo>#privateHillLimitRow{grid-column:1}
.privateLobbyInfo>#privateTeamProtectionRow{grid-column:2}
.privateLobbyInfo>.uiIdentityLabel{margin-bottom:3px}
.privateLobbyInfo[hidden]{display:none}
.privateLobbyExplanation[hidden]{display:none}
.privateLobbyInfo label[hidden]{display:none}
.privateLobbyInfo select{width:100%;max-width:100%}
.privateLobbyExplanation,.privateLobbyPlayers{display:flex;flex-direction:column;gap:11px}
/* The guest rules heading sits above the card like the players heading. */
.privateLobbyRulesPanel,.privateResultTeam{min-width:0;padding:13px;border:1px solid var(--ui-modal-border);border-radius:var(--ui-radius-sm);background:var(--ui-surface-soft)}
.privateLobbyRulesPanel{display:flex;flex-direction:column;gap:11px;width:100%}
.privateLobbyPlayers{min-width:0}

.privateModeSummary>strong{font:900 calc(14px * var(--ui-text-scale))/1.3 var(--font-ui);color:var(--ui-text-title)}
.privateLobbyConfiguration.is-host .privateModeSummary{font-weight:600;padding:0 0 var(--ui-space-small);border-bottom:1px solid var(--ui-modal-border)}
.privateLobbyConfiguration.is-host .privateModeSummary>strong{display:none}
.privateLobbyExplanation p{margin:0}
.privateLobbyRules{display:grid;width:100%;gap:var(--ui-space-small);padding-top:10px;border-top:1px solid var(--ui-modal-border)}
.privateLobbyRules>div{display:flex;justify-content:space-between;align-items:baseline;gap:12px;font:700 calc(12px * var(--ui-text-scale))/1.5 var(--font-ui)}
.privateLobbyRules>div[hidden]{display:none}
.privateLobbyRules span{color:var(--ui-text-description)}
.privateLobbyRules strong{color:var(--ui-text-title);font-weight:850;text-align:right}
@media(max-width:560px){.privateLobbyConfiguration{grid-template-columns:minmax(0,1fr)}.privateLobbyInfo{column-gap:10px}}
.privateLobbyHead{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:5px 10px;font:850 calc(12px * var(--ui-text-scale))/1.35 var(--font-ui);letter-spacing:.055em;color:var(--ui-form-label-ink)}
.privateLobbyHead span{color:var(--ui-text-description);font:800 calc(11px * var(--ui-text-scale))/1.35 var(--font-ui);letter-spacing:0}
.privateReadyButton{display:inline-flex!important;align-items:center;justify-content:center;gap:10px;text-align:center}
.privateReadyButton .privateReadyBadge{width:10px;height:10px;flex:0 0 10px;border-radius:999px;background:#8195aa;box-shadow:0 0 0 1px rgba(129,149,170,.35)}
.privateReadyButton .privateReadyLabel{min-width:0}
.privateReadyButton[data-state=ready]{border-color:rgba(101,233,180,.40)!important;background:rgba(13,63,49,.55)!important;color:#dcfff1!important;box-shadow:0 0 0 1px rgba(101,233,180,.14) inset}
.privateReadyButton[data-state=ready] .privateReadyBadge{background:#65e9b4;box-shadow:0 0 0 1px rgba(101,233,180,.35),0 0 10px rgba(101,233,180,.38)}
.privateReadyButton[data-state=blocked]{border-color:rgba(255,111,141,.28)!important;background:rgba(52,20,29,.55)!important;color:#ffd9e2!important}
.privateReadyButton[data-state=blocked] .privateReadyBadge{background:#ff687e;box-shadow:0 0 0 1px rgba(255,104,126,.34)}
.privateReadyButton[data-state=waiting]{border-color:rgba(133,171,204,.28)!important;background:rgba(14,28,43,.62)!important;color:#d6ebfb!important}
.privateReadyButton[data-state=waiting] .privateReadyBadge{background:#9ed5ff;box-shadow:0 0 0 1px rgba(158,213,255,.34)}
.privatePlayersList{display:grid;gap:3px;max-height:300px;min-width:0;overflow-y:auto}
.privatePlayersList[hidden],.privateUnassignedHeading[hidden]{display:none}
.privateUnassignedHeading{color:var(--ui-text-description);font:800 10px/1.3 var(--font-ui);letter-spacing:.04em}
.privateRosterPanel{min-width:0;padding:8px;border:1px solid var(--ui-modal-border);border-radius:var(--ui-radius-sm);background:var(--ui-surface-soft)}
.privateLobbyPlayerRow{grid-template-columns:28px minmax(0,1fr) auto;gap:9px;min-height:39px;padding:4px 5px}
.privateLobbyPlayerRow.has-kick{grid-template-columns:28px minmax(0,1fr) auto auto}
.privatePlayerKick{min-height:29px!important;padding:4px 8px!important;font-size:10px!important;white-space:nowrap}
.privateLobbyPlayerRow .privatePlayerDot{width:28px;height:28px;border-radius:var(--ui-radius-sm)}
/* Team choice belongs to the player, not the host settings. */
.privateWaitingInfo{margin:0;padding:11px 13px;border:1px solid rgba(100,210,240,.3);border-radius:var(--ui-radius-sm);background:rgba(40,110,144,.13);color:#d2eefa;font:800 11px/1.6 var(--font-ui)}
.privateWaitingInfo[hidden],.privateRematchWaiting[hidden],#privateReturnLobby[hidden]{display:none!important}
.privateRematchWaiting{grid-column:1/-1;margin:0;align-self:center;text-align:center;color:var(--ui-text-description);font:850 12px/1.5 var(--font-ui)}
.privateTeamBlock{display:grid;gap:10px;min-width:0}
.privateTeamBlock[hidden]{display:none}
.privateRosterTeam{display:grid;gap:7px;min-width:0}
.privateRosterTeam-blue{--team-color:var(--actor-team-blue)}
.privateRosterTeam-red{--team-color:var(--actor-team-red)}
.privateRosterTeamHead,.privateRosterTeamTitle{display:flex;align-items:center;gap:7px;min-width:0}
.privateRosterTeamHead{justify-content:space-between;color:var(--ui-form-label-ink)}
.privateRosterTeamTitle{color:var(--team-color);font:850 12px/1.35 var(--font-ui)}
.privateRosterTeamHead small{color:var(--ui-text-description);font:700 10px/1.3 var(--font-ui);white-space:nowrap}
.privateRosterTeam .privateRosterPanel{display:grid;gap:7px}
.privateRosterTeam .privateTeamChoice{justify-self:end}
.privateTeamChoice{flex:none;min-width:92px;min-height:32px!important;padding:7px 9px!important;font:800 10px/1.1 var(--font-ui)!important;letter-spacing:.02em}
.privateTeamChoice[hidden]{display:none}
.privateTeamChoice.active{border-color:var(--ui-focus-outline-strong);background:var(--ui-focus-fill);box-shadow:inset 0 0 0 1px var(--ui-focus-glow)}
.privateTeamSwatch{width:14px;height:14px;border-radius:4px;flex:none;background:var(--team-color)}
.privatePlayerDot{width:12px;height:12px;border-radius:4px;background:var(--playerColor);box-shadow:0 0 8px color-mix(in srgb,var(--playerColor) 40%,transparent);flex:0 0 auto}
.privateRosterTeam .privatePlayersList{max-height:none;overflow:visible}
.privatePlayerName{min-width:0;flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--ui-text-field);font:700 calc(12px * var(--ui-text-scale))/1.4 var(--font-ui)}
.privatePlayerState{color:var(--ui-text-description);font-size:calc(11px * var(--ui-text-scale));letter-spacing:0}
.privatePlayerState.is-ready{color:var(--ui-form-success-ink)}
.privatePlayerState.is-away{color:var(--ui-status-warning-ink)}
.privatePhaseNote{text-align:center;margin:0!important;line-height:1.5}
#privateStart:disabled{opacity:.5;cursor:not-allowed}
.privateRematchHint{margin:0;color:var(--ui-text-description);text-align:center;font:600 11px/1.45 var(--font-ui)}
.privateResultRank{font:900 12px/1.2 var(--font-ui);color:var(--ui-text-title);min-width:20px;flex:0 0 20px}
#privateResults[hidden]{display:none}

/* Private results reuse the existing lobby rows and status typography. */
.privateResultSummary{margin:0!important;text-align:center}
.privateResultHeader,.privateResultPlayer{display:grid;grid-template-columns:minmax(0,1fr) 43px 43px 43px;column-gap:8px;align-items:center}
.privateResultHeader{padding:0 10px;color:var(--ui-form-label-ink);font:850 calc(11px * var(--ui-text-scale))/1.4 var(--font-ui);text-align:right}
.privateResultHeader span:first-child{text-align:left}
.privateResultPlayer{padding:8px 10px;min-height:42px;gap:9px;border:1px solid var(--ui-modal-border);border-radius:var(--ui-radius-sm);background:var(--ui-surface-soft)}
.privateResultPlayer.is-local{border-color:var(--ui-border-strong)}
.privateResultIdentity{display:flex;min-width:0;align-items:center;gap:7px}
.privateResultIdentity .privatePlayerDot{flex:0 0 9px;width:9px;height:9px}
.privateResultValue{text-align:right;font:800 calc(11px * var(--ui-text-scale))/1.4 var(--font-ui);color:var(--ui-text-title);font-variant-numeric:tabular-nums}
.privateResultPlayer.is-winner .privateResultRank{color:var(--ui-form-success-ink)}
.privateResultPlayer.is-left{opacity:.7}
.privateResultPlayer.is-left .privatePlayerName{text-decoration:line-through}
@media(max-width:520px){.privateResultHeader,.privateResultPlayer{grid-template-columns:minmax(0,1fr) 36px 36px 36px;column-gap:5px}.privateResultHeader{padding-inline:7px;font-size:10px}.privateResultPlayer{padding-inline:7px}.privateResultIdentity{gap:5px}.privateResultRank{flex-basis:16px;min-width:16px}}
/* Team results keep both sides separate; player rows retain the shared result layout. */
.privateResultTeam{display:grid;gap:6px;padding:8px}
.privateResultTeam-blue{border-left:3px solid var(--actor-team-blue)}
.privateResultTeam-red{border-left:3px solid var(--actor-team-red)}
.privateResultTeamHeading{display:flex;align-items:center;flex-wrap:wrap;gap:var(--ui-space-small);padding:3px 4px 5px;font:850 calc(12px * var(--ui-text-scale))/1.35 var(--font-ui);color:var(--ui-text-title)}
.privateResultTeamHeading>span:last-child{margin-left:auto;color:var(--ui-text-description);font-variant-numeric:tabular-nums}
.privateResultTeamWinner{color:var(--ui-form-success-ink);font-size:10px}
.privateResultTeam .privateResultPlayer{min-width:0}


/* Static wall help gallery; the sprites are only loaded on tab opening. */
.wallHelpList{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.wallHelpItem{display:flex;align-items:flex-start;gap:12px}
.wallHelpPreview{width:88px;height:88px;flex:0 0 88px;border-radius:8px}
.wallHelpItem strong{display:block;margin:4px 0 7px}
.wallHelpItem p{margin:0}
@media(max-width:650px){.wallHelpList{grid-template-columns:1fr}}

@media (max-height:520px){
  .gameModal.open,.weaponBranchModal.open{align-items:flex-start}
}



@media(max-width:620px){
  .debugBar{left:8px;right:8px;bottom:calc(var(--hud-edge-gap) * 2 + 63px)}
}

/* Shared identity validation: no extra modal and no layout shift in HUD. */
.uiNameNotice{margin:0;color:#a8b8c9;font-size:11px;font-weight:600;line-height:1.45}
.uiNameNotice:empty{display:none}
.uiNameNotice.is-error{color:var(--ui-form-error-ink)}

/* Shared modal rhythm; feedback form remains the spacing reference. */
.privateMatchDialog .privateBranchBlock{display:grid;gap:var(--ui-field-label-gap)}
.privateBranchBlock .uiIdentityLabel{display:flex;flex-wrap:wrap;align-items:baseline;gap:6px 12px}
.privateBranchBlock .uiIdentityLabel small{color:var(--ui-text-description);font:600 11px/1.5 var(--font-ui);text-transform:none;letter-spacing:0}
.privateBranchOptions button:disabled{cursor:not-allowed!important;opacity:.58}
.privateModeDescription{margin:0!important;color:var(--ui-text-description);font-size:calc(11px * var(--ui-text-scale));font-weight:500;line-height:1.4}
.privateLobbyInfo>#privateModeSummary{margin-top:-8px}
#privateModeControl .uiFormSelect{margin-bottom:0}
.privatePhaseNote.is-waiting{color:var(--ui-status-warning-ink)}
#privateStart[hidden]{display:none!important}
.privateMatchActions:has(#privateStart[hidden]),.privateMatchActions:has(#privateReturnLobby[hidden]){grid-template-columns:minmax(0,1fr)}
body.intro-ui #start .startSeoIntro .introTestNotice{font-size:calc(11px * var(--ui-text-scale));font-weight:750;color:#91b6cb;letter-spacing:.025em}
/* Visually connect the RIFT heading to its card gallery while keeping a readable gap above. */
#gameHelpPanelRift .lootHelpHeading{margin-top:20px;margin-bottom:12px}



/* Keep both footers readable on narrow intro/game viewports. */
@media(max-width:460px){
  .gameMeta>.gameMetaAuthor,.gameMeta>.gameMetaSep{display:none}
  .gameTelemetry{right:8px;gap:4px;font-size:8px}
}


.gameLore{max-width:680px;margin:0 auto;padding:5px 3px 18px;color:#b9cce0;font:500 calc(13px * var(--ui-text-scale))/1.8 var(--font-ui)}
.gameLore p{margin:0 0 15px}
.gameLoreHeader{padding:12px 0 22px;margin-bottom:25px;border-bottom:1px solid rgba(97,232,255,.2)}
.gameLoreEyebrow{color:#6db4c5;font:850 calc(10px * var(--ui-text-scale))/1.2 var(--font-ui);letter-spacing:.17em}
.gameLoreHeader h2{margin:10px 0 5px;color:#f0fbff;font:900 calc(27px * var(--ui-text-scale))/1.15 var(--font-ui);letter-spacing:.09em}
.gameLoreHeader h3{margin:0 0 20px;color:#78dce9;font:900 calc(16px * var(--ui-text-scale))/1.3 var(--font-ui);letter-spacing:.1em}
.gameLore .gameLoreSignal{margin:12px 0 24px;padding:15px 18px;border-left:3px solid var(--color-focus-cyan);background:rgba(97,232,255,.055);color:#c6faff;font-weight:900;letter-spacing:.045em}
.gameLoreUnit{margin:26px 0 18px;color:#bff9ff;font:900 calc(18px * var(--ui-text-scale))/1.25 var(--font-ui);letter-spacing:.1em}
.gameLore .gameLoreFinal{margin-top:23px;color:#e7f9ff;font-weight:900;font-size:calc(15px * var(--ui-text-scale))}
/* All weapon previews use one reusable styled frame. */
.weaponHelpVariant .riftWeaponPreview{margin:8px 0 12px;min-height:70px}
.weaponHelpVariant .riftWeaponPreview canvas{margin:0 auto}
@media(max-width:720px){
  .gameHelpTabs{gap:0;flex-basis:132px;padding:9px 6px}
  .gameHelpTabList{gap:12px;overflow:visible;padding:0}
  .gameHelpTabList .gameHelpTab{min-width:0;padding:9px 8px!important;font-size:calc(10.5px * var(--ui-text-scale))!important}
  .gameHelpNavLabel{padding-left:6px;font-size:calc(9px * var(--ui-text-scale))}
}
@media(max-width:410px){
  .gameHelpTabs{flex-basis:108px;padding:8px 5px}
  .gameHelpTabList .gameHelpTab{padding:8px 6px!important}
  .gameLoreHeader h2{font-size:calc(23px * var(--ui-text-scale))}
}

/* Chat reuses the shared .panel surface, border, radius and shadow. */
.chatPanel{position:fixed;right:var(--hud-edge-gap);bottom:calc(var(--hud-edge-gap) * 2 + var(--hud-dock-offset));width:var(--ui-board-width);max-width:calc(100vw - 2 * var(--hud-edge-gap));z-index:43;display:none;overflow:hidden;pointer-events:auto;color:var(--ui-text,#e8f0fa)}
body.intro-ui .chatPanel,body.game-ui .chatPanel{display:block}
.chatPanel[hidden]{display:none!important}
.chatToggle{display:flex;align-items:center;gap:8px;width:100%;min-height:38px;text-align:left;padding:8px 12px;border:0;background:transparent;color:inherit;font:800 11px/1.2 var(--font-ui);letter-spacing:.06em;cursor:pointer}
.chatChevron{margin-left:auto}.chatPanel.is-expanded .chatChevron{transform:rotate(180deg)}
#chatUnread:not([hidden]){padding:2px 6px;border-radius:12px;background:var(--ui-surface);color:var(--ui-ink);font-size:10px}
.chatBody{padding:0 10px 10px}.chatBody[hidden],.chatForm[hidden]{display:none!important}
.chatMessages{max-height:154px;min-height:44px;overflow-y:auto;overscroll-behavior:contain;overflow-wrap:anywhere;font:500 12px/1.35 var(--font-ui)}
/* A two-row message keeps long names readable, without making names controls. */
.chatLine{min-width:0;padding:3px 0 4px}
.chatLineHeader{display:flex;align-items:baseline;gap:5px;min-width:0;line-height:1.25}
.chatAuthor{min-width:0;flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--ui-accent,#76d8ee);font-weight:800}
.chatTime{flex:none;color:var(--ui-text-description);font-size:10px;font-variant-numeric:tabular-nums}
.chatLineActions{flex:none;min-width:20px;min-height:20px;padding:0 3px;border:0;background:transparent;color:var(--ui-text-description);font:800 15px/1 var(--font-ui);cursor:pointer}
.chatLine.is-selected .chatLineActions{color:var(--ui-accent,#76d8ee)}
.chatLineText{white-space:pre-wrap;overflow-wrap:anywhere;line-height:1.3}
.chatStatus{margin:5px 0 0;color:var(--ui-form-label-ink);font:750 10px/1.4 var(--font-ui)}
.chatStatus:empty{display:none}
#chatRestore:not([hidden]){margin-top:7px;font-size:10px}#chatRestore[hidden]{display:none}.chatForm{display:flex;flex-wrap:wrap;gap:6px;margin-top:8px}.chatForm label{width:100%;font-size:11px;font-weight:750}.chatForm input{flex:1;min-width:100px;height:36px!important}.chatForm button{padding:7px 10px;font-size:11px}
/* The private-room chat is a sibling of the modal, not part of its settings. */
body:has(#privateMatchModal.open) .chatPanel{z-index:91}
body:has(#privateMatchModal.open) .chatPanel:not(.is-private){display:none}
@media(min-width:1200px){body:has(#privateMatchModal.open) .privateMatchDialog{margin-right:200px;max-width:calc(100vw - 390px)}}
@media(max-width:820px){body.intro-ui:not(:has(#privateMatchModal.open)) .chatPanel{top:var(--hud-edge-gap);bottom:auto}}
@media(max-width:680px){body:has(#privateMatchModal.open) .chatPanel.is-private{bottom:8px;max-height:46vh}.chatPanel{right:8px;bottom:calc(var(--hud-edge-gap) * 2 + var(--hud-dock-offset) + var(--hud-control-clearance));max-width:calc(100vw - 16px)}}


/* Private join lives with the main intro action and uses the standard field. */
#introPrivateJoin[hidden],#introPrivateDivider[hidden]{display:none!important}
body.intro-ui #start .introIdentitySetup,
body.intro-ui #start .introPrivateJoin,
body.intro-ui #start .introSetupDivider{
  justify-self:start;
  width:calc(100% + 2px);
  min-width:0;
  margin-left:-2px;
  text-align:left;
}
body.intro-ui #start .introIdentitySetup .uiIdentityLabel,
body.intro-ui #start .introPrivateJoin .uiIdentityLabel{justify-self:start;text-align:left}
.introSetupDivider{
  display:flex;
  align-items:center;
  gap:12px;
  color:var(--ui-text-description);
  font:800 11px/1.2 var(--font-ui);
  letter-spacing:.14em;
  text-transform:uppercase;
}
.introSetupDivider::before,.introSetupDivider::after{
  content:"";
  flex:1 1 auto;
  height:1px;
  background:var(--ui-panel-divider);
}
.introSetupDivider span{flex:0 0 auto}
.introPrivateJoin{width:100%;min-width:0}
.introPrivateJoin .privateJoinForm{grid-template-columns:minmax(0,1fr) auto}
.introPrivateJoin .privateJoinForm .uiDialogAction{min-width:0;padding-inline:12px!important}
@media(max-width:420px){.introPrivateJoin .privateJoinForm .uiDialogAction{font-size:11px!important}}