/**
 * ArenaScale v1.0 — progressive desktop density + uniform chrome scale.
 * Driven by body[data-arena-density] and --arena-ui-scale (ArenaScale.js).
 * Board squares stay on --board-size; only chrome adapts.
 */

body.chess-page {
  --arena-ui-scale: 1;
  --arena-chrome-gap: 12px;
  --arena-clock-fs: 1.05rem;
  --arena-meta-fs: 0.78rem;
  --arena-avatar: 32px;
  --arena-mini-bar-h: 40px;
  --arena-float-bar-h: 20px;
  --arena-rail-w: 280px;
}

/* Seamless chrome transitions (opacity/size — not layout thrash on board) */
body.chess-page .chess-hero-portrait,
body.chess-page .chess-mini-bar,
body.chess-page .chess-mini-nav a,
body.chess-page .chess-mini-word,
body.chess-page .btn-exit-game,
body.chess-page .user-meta-zone,
body.chess-page .chess-captures,
body.chess-page .chess-timer,
body.chess-page .chess-avatar,
body.chess-page .arena-float-bar,
body.chess-page .match-history-module,
body.chess-page .chess-controls-rail,
body.chess-page #controls-panel-module {
  transition:
    opacity 0.28s ease,
    max-width 0.32s ease,
    max-height 0.32s ease,
    padding 0.28s ease,
    margin 0.28s ease,
    font-size 0.28s ease,
    width 0.32s ease,
    transform 0.28s ease;
}

/* ── Uniform scale tokens ── */
body.chess-page .chess-timer {
  font-size: var(--arena-clock-fs) !important;
}

body.chess-page .user-info .user-name,
body.chess-page .user-meta-zone .user-name {
  font-size: var(--arena-meta-fs) !important;
}

body.chess-page .chess-avatar {
  width: var(--arena-avatar) !important;
  height: var(--arena-avatar) !important;
}

body.chess-page .chess-mini-bar {
  min-height: var(--arena-mini-bar-h) !important;
  height: auto !important;
}

body.chess-page .arena-float-bar,
body.chess-page .side-panel-header.arena-float-drag {
  min-height: var(--arena-float-bar-h) !important;
  font-size: calc(0.62rem * var(--arena-ui-scale)) !important;
}

body.chess-page .chess-main-row {
  gap: var(--arena-chrome-gap) !important;
}

/* Captures / seats track board width still; density may hide text */
body.chess-page .user-meta-zone {
  padding-top: calc(4px * var(--arena-ui-scale));
  padding-bottom: calc(4px * var(--arena-ui-scale));
}

/* ═══════════════ DENSITY LADDER ═══════════════ */

/* comfy — slight tighten */
body.chess-page[data-arena-density='comfy'] .chess-hero-portrait .hero-portrait-xp .xp-meter-label {
  display: none;
}

body.chess-page[data-arena-density='comfy'] .chess-mini-nav a {
  font-size: 0.72rem;
  padding-left: 0.35rem;
  padding-right: 0.35rem;
}

/* cozy — shrink portrait + nav labels */
body.chess-page[data-arena-density='cozy'] .chess-hero-portrait {
  width: 96px !important;
  min-width: 88px !important;
  flex-basis: 96px !important;
}

body.chess-page[data-arena-density='cozy'] .chess-hero-portrait .hero-portrait-title,
body.chess-page[data-arena-density='cozy'] .chess-hero-portrait .hero-portrait-elo {
  font-size: 0.65rem;
}

body.chess-page[data-arena-density='cozy'] .chess-hero-portrait .xp-meter-label,
body.chess-page[data-arena-density='cozy'] .chess-hero-portrait .hero-portrait-xp {
  display: none !important;
}

body.chess-page[data-arena-density='cozy'] .chess-mini-word .dim,
body.chess-page[data-arena-density='cozy'] .btn-exit-game {
  /* keep exit but shorter visual weight */
  font-size: 0.68rem;
}

body.chess-page[data-arena-density='cozy'] .chess-captures {
  font-size: 0.72rem;
  max-height: 1.4rem;
  overflow: hidden;
}

/* compact — free the board: hide hero portrait, slim chrome */
body.chess-page[data-arena-density='compact'] .chess-hero-portrait,
body.chess-page[data-arena-density='tight'] .chess-hero-portrait,
body.chess-page[data-arena-density='micro'] .chess-hero-portrait {
  opacity: 0 !important;
  max-width: 0 !important;
  width: 0 !important;
  min-width: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow: hidden !important;
  pointer-events: none !important;
  border: none !important;
  flex: 0 0 0 !important;
}

body.chess-page[data-arena-density='compact'] .chess-mini-nav a {
  font-size: 0;
  line-height: 1;
  padding: 0.25rem 0.4rem;
  letter-spacing: 0;
}
/* Keep emoji / first glyph readable — use title tooltips from markup */
body.chess-page[data-arena-density='compact'] .chess-mini-nav a::first-letter {
  font-size: 0.95rem;
}

body.chess-page[data-arena-density='compact'] .chess-mini-word {
  font-size: 0.72rem;
}

body.chess-page[data-arena-density='compact'] .btn-exit-game {
  font-size: 0;
  padding: 0.35rem 0.55rem;
}
body.chess-page[data-arena-density='compact'] .btn-exit-game::before {
  content: '✕';
  font-size: 0.85rem;
}

body.chess-page[data-arena-density='compact'] .chess-captures .cap-empty {
  display: none;
}

body.chess-page[data-arena-density='compact'] .user-meta-zone .status-dot {
  width: 6px;
  height: 6px;
}

/* tight — maximize board: hide LEGACY flex rail only.
   Floating compact dock (#controls-panel-module--float) must stay visible —
   it is already small and sits outside the flex row. */
body.chess-page[data-arena-density='tight']
  .chess-controls-rail:not(.controls-panel-module--float),
body.chess-page[data-arena-density='micro']
  .chess-controls-rail:not(.controls-panel-module--float) {
  opacity: 0 !important;
  max-width: 0 !important;
  width: 0 !important;
  min-width: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow: hidden !important;
  pointer-events: none !important;
  border: none !important;
  flex: 0 0 0 !important;
}

/* Explicit: keep float dock usable at all densities */
body.chess-page[data-arena-density]
  #controls-panel-module.controls-panel-module--float:not(.is-mode-hidden),
body.chess-page[data-arena-density]
  aside.chess-controls-rail.controls-panel-module--float:not(.is-mode-hidden) {
  opacity: 1 !important;
  max-width: 152px !important;
  width: 152px !important;
  min-width: 140px !important;
  max-height: min(70vh, 420px) !important;
  min-height: 0 !important;
  height: auto !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow: visible !important;
  pointer-events: auto !important;
  flex: none !important;
  position: fixed !important;
  z-index: 12450 !important;
  visibility: visible !important;
  display: block !important;
}

body.chess-page[data-arena-density='tight'] .chess-mini-word,
body.chess-page[data-arena-density='micro'] .chess-mini-word {
  display: none !important;
}

body.chess-page[data-arena-density='tight'] .chess-mini-nav a,
body.chess-page[data-arena-density='micro'] .chess-mini-nav a {
  font-size: 0;
  padding: 0.2rem 0.35rem;
}
body.chess-page[data-arena-density='tight'] .chess-mini-nav a::first-letter,
body.chess-page[data-arena-density='micro'] .chess-mini-nav a::first-letter {
  font-size: 0.9rem;
}

body.chess-page[data-arena-density='tight'] .chess-captures,
body.chess-page[data-arena-density='micro'] .chess-captures {
  display: none !important;
}

body.chess-page[data-arena-density='tight'] .user-meta-zone .user-info,
body.chess-page[data-arena-density='micro'] .user-meta-zone .user-info {
  gap: 0.25rem;
}

body.chess-page[data-arena-density='tight'] .user-meta-zone .user-name {
  max-width: 5.5rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Float moves: thinner in tight */
body.chess-page[data-arena-density='tight'] .arena-float-panel[data-float-id='moves'],
body.chess-page.arena-float-active[data-arena-density='tight']
  #match-history-module.arena-float-enabled {
  width: min(var(--arena-moves-w, 220px), 42vw) !important;
  max-width: 220px !important;
}

/* micro — board survival mode */
body.chess-page[data-arena-density='micro'] .arena-float-panel[data-float-id='moves'],
body.chess-page.arena-float-active[data-arena-density='micro']
  #match-history-module.arena-float-enabled,
body.chess-page[data-arena-density='micro'] aside.chess-match-rail:not(.arena-float-enabled) {
  opacity: 0.14 !important;
  /* Still present for drag/pin recovery — nearly ghosted, collapsible footprint */
  max-width: 48px !important;
  width: 48px !important;
  min-width: 48px !important;
  overflow: hidden !important;
}

body.chess-page[data-arena-density='micro']
  .arena-float-panel[data-float-id='moves']:hover,
body.chess-page[data-arena-density='micro']
  .arena-float-panel[data-float-id='moves'].is-dragging,
body.chess-page[data-arena-density='micro']
  .arena-float-panel[data-float-id='moves'].is-pinned {
  opacity: 1 !important;
  max-width: min(280px, 70vw) !important;
  width: var(--arena-moves-w, 240px) !important;
  min-width: 200px !important;
}

body.chess-page[data-arena-density='micro'] .user-meta-zone .user-name,
body.chess-page[data-arena-density='micro'] .user-meta-zone .chess-avatar,
body.chess-page[data-arena-density='micro'] .user-meta-zone .status-dot {
  display: none !important;
}

body.chess-page[data-arena-density='micro'] .user-meta-zone {
  min-height: 0 !important;
  padding: 2px 4px !important;
}

body.chess-page[data-arena-density='micro'] .chess-timer {
  font-size: max(0.85rem, calc(var(--arena-clock-fs) * 0.95)) !important;
  font-variant-numeric: tabular-nums;
}

body.chess-page[data-arena-density='micro'] .time-bar-container {
  height: 3px !important;
  min-height: 3px !important;
}

body.chess-page[data-arena-density='micro'] .chess-mini-bar {
  min-height: 32px !important;
  padding-top: 2px !important;
  padding-bottom: 2px !important;
}

body.chess-page[data-arena-density='micro'] .btn-exit-game {
  font-size: 0;
  padding: 0.25rem 0.4rem;
}
body.chess-page[data-arena-density='micro'] .btn-exit-game::before {
  content: '✕';
  font-size: 0.8rem;
}

/* Shadow wizard / heavy FX: soft-disable in dense windowed play */
body.chess-page[data-arena-density='tight'] .chess-shadow-wizard,
body.chess-page[data-arena-density='micro'] .chess-shadow-wizard {
  opacity: 0.25 !important;
}

body.chess-page[data-arena-density='micro'] .chess-shadow-wizard {
  display: none !important;
}

/* Windowed flag: slightly tighter stage padding */
body.chess-page.arena-windowed .chess-public-wrap,
body.chess-page.arena-windowed .chess-system-container {
  padding-left: 4px !important;
  padding-right: 4px !important;
}

body.chess-page.arena-windowed .chess-main-row {
  justify-content: center !important;
}

/* Float mode already reparents — density still applies to mini-bar + seats */
body.chess-page.arena-float-active[data-arena-density='micro']
  .arena-float-panel[data-float-id='board']
  .arena-float-title {
  letter-spacing: 0.06em;
  font-size: 0.6rem;
}

/* Prefers reduced motion: skip width transitions */
@media (prefers-reduced-motion: reduce) {
  body.chess-page .chess-hero-portrait,
  body.chess-page .chess-mini-bar,
  body.chess-page .match-history-module,
  body.chess-page .chess-controls-rail {
    transition: none !important;
  }
}

/* ═══════════════ NAV POP-OUT (ArenaChrome) ═══════════════ */

.chess-nav-pop-btn {
  display: none;
  appearance: none;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  width: 2.1rem;
  height: 2.1rem;
  margin-left: auto;
  border: 1px solid rgba(0, 255, 136, 0.4);
  border-radius: 6px;
  background: rgba(0, 20, 12, 0.85);
  color: #9fdfb0;
  font-size: 1.05rem;
  line-height: 1;
  cursor: pointer;
  z-index: 40;
}

.chess-nav-pop-btn:hover,
.chess-nav-pop-btn.is-on {
  background: rgba(0, 255, 136, 0.15);
  color: #fff;
  border-color: rgba(0, 255, 136, 0.65);
}

/* compact+ density → hide inline nav, show ☰ */
body.chess-page.arena-nav-pop .chess-mini-nav,
body.forge-world-page.arena-nav-pop .chess-mini-nav {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
  opacity: 0 !important;
  pointer-events: none !important;
}

body.chess-page.arena-nav-pop .chess-nav-pop-btn,
body.forge-world-page.arena-nav-pop .chess-nav-pop-btn {
  display: grid !important;
  place-items: center;
}

/* Undo icon-only first-letter hacks when nav is in pop mode */
body.chess-page.arena-nav-pop[data-arena-density='compact'] .chess-mini-nav a,
body.chess-page.arena-nav-pop[data-arena-density='tight'] .chess-mini-nav a,
body.chess-page.arena-nav-pop[data-arena-density='micro'] .chess-mini-nav a {
  font-size: inherit;
}

.chess-nav-pop {
  position: fixed;
  inset: 0;
  z-index: 12000;
  pointer-events: none;
}

.chess-nav-pop.is-open {
  pointer-events: auto;
}

.chess-nav-pop-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.55);
  opacity: 0;
  transition: opacity 0.22s ease;
}

.chess-nav-pop.is-open .chess-nav-pop-backdrop {
  opacity: 1;
}

.chess-nav-pop-panel {
  position: absolute;
  top: 0;
  right: 0;
  width: min(300px, 88vw);
  height: 100%;
  max-height: 100vh;
  display: flex;
  flex-direction: column;
  background: linear-gradient(180deg, #041a10 0%, #010805 100%);
  border-left: 1px solid rgba(0, 255, 136, 0.28);
  box-shadow: -12px 0 40px rgba(0, 0, 0, 0.55);
  transform: translateX(104%);
  transition: transform 0.28s cubic-bezier(0.22, 1, 0.36, 1);
  font-family: "Courier New", Courier, monospace;
  box-sizing: border-box;
}

.chess-nav-pop.is-open .chess-nav-pop-panel {
  transform: translateX(0);
}

.chess-nav-pop-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.75rem 0.85rem;
  border-bottom: 1px solid rgba(0, 255, 136, 0.2);
  flex: 0 0 auto;
}

.chess-nav-pop-title {
  color: #00ff88;
  letter-spacing: 0.16em;
  font-weight: 700;
  font-size: 0.78rem;
}

.chess-nav-pop-x {
  appearance: none;
  border: 1px solid rgba(0, 255, 136, 0.3);
  background: transparent;
  color: #9fdfb0;
  width: 2rem;
  height: 2rem;
  border-radius: 6px;
  cursor: pointer;
  font-size: 0.95rem;
}

.chess-nav-pop-x:hover {
  color: #fff;
  border-color: rgba(0, 255, 136, 0.55);
}

.chess-nav-pop-links {
  flex: 1 1 auto;
  overflow-y: auto;
  padding: 0.5rem 0.55rem;
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
}

.chess-nav-pop-link {
  display: block !important;
  color: #8fbf9c !important;
  text-decoration: none !important;
  font-size: 0.82rem !important;
  letter-spacing: 0.08em;
  padding: 0.65rem 0.75rem !important;
  border: 1px solid transparent !important;
  border-radius: 8px;
  font-weight: 700 !important;
}

.chess-nav-pop-link:hover {
  color: #00ff88 !important;
  background: rgba(0, 255, 136, 0.08);
  border-color: rgba(0, 255, 136, 0.28) !important;
}

.chess-nav-pop-link.is-here {
  color: #00ff88 !important;
  border-color: rgba(0, 255, 136, 0.4) !important;
  background: rgba(0, 255, 136, 0.1);
}

.chess-nav-pop-foot {
  flex: 0 0 auto;
  padding: 0.65rem 0.75rem 1rem;
  border-top: 1px solid rgba(0, 255, 136, 0.15);
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}

.chess-nav-pop-action {
  appearance: none;
  display: block;
  width: 100%;
  text-align: left;
  border: 1px solid rgba(0, 255, 136, 0.28);
  background: rgba(0, 0, 0, 0.35);
  color: #b8f0c8;
  border-radius: 8px;
  padding: 0.55rem 0.7rem;
  font-family: inherit;
  font-size: 0.72rem;
  letter-spacing: 0.06em;
  cursor: pointer;
  text-decoration: none;
  box-sizing: border-box;
}

.chess-nav-pop-action.is-link {
  color: #7fd9ff;
  border-color: rgba(80, 180, 255, 0.35);
}

.chess-nav-pop-action:hover {
  background: rgba(0, 255, 136, 0.12);
  color: #fff;
}

.chess-nav-pop-note {
  margin: 0;
  font-size: 0.65rem;
  color: #5a8a6a;
  letter-spacing: 0.04em;
  line-height: 1.35;
}

/* Soft fade while redirecting to mobile shell */
body.arena-mobile-handoff::after {
  content: '';
  position: fixed;
  inset: 0;
  z-index: 20000;
  background: rgba(0, 8, 4, 0.55);
  pointer-events: none;
  animation: arena-handoff-fade 0.35s ease forwards;
}

@keyframes arena-handoff-fade {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

@media (prefers-reduced-motion: reduce) {
  .chess-nav-pop-panel,
  .chess-nav-pop-backdrop {
    transition: none !important;
  }
}