/* ==========================================================================
   SWISS DESIGN BRAND IDENTITY SYSTEM - CORE STYLESHEET
   ========================================================================== */

:root {
  /* Chromatic Scale (Strict Master Bauhaus Palette) */
  --color-cobalt: #0041ff; /* Ecelon Cobalt Blue */
  --color-cobalt-dark: #002ebf;
  --color-beige: #ebebeb; /* Master Grey background */
  --color-beige-dark: #d2d2d2;
  --color-black: #000000; /* Pure Geometric Black */
  --color-white: #ffffff;
  --color-orange: #ff3d00; /* Vermillion Accent Orange */
  --color-grey-ui: #f5f5f5;
  --color-grey-border: #d0d0d0;
  --color-grey-text: #666666;

  /* Winamp display green phosphor screen glow default */
  --screen-glow: #00FF66;

  /* Typography variables */
  --font-body: "Inter", "Plus Jakarta Sans", sans-serif;
  --font-display: "Space Grotesk", sans-serif;
  --font-mono: "JetBrains Mono", monospace;

  /* Dynamic lighting variables - updated by index.js */
  --shadow-x: 8px;
  --shadow-y: 12px;
  --shadow-blur: 25px;
  --shadow-intensity: 0.08;
  --shadow-color: rgba(0, 0, 0, var(--shadow-intensity));

  /* Layout scale variables */
  --transition-speed: 0.6s;
  --transition-easing: cubic-bezier(0.23, 1, 0.32, 1);

  /* Winamp theme variables defaults (Day/Bauhaus Theme) */
  
  /* Aim Lab Theme defaults (Day / Light) */
  --aim-bg: #ffffff;
  --aim-grid-major: rgba(0, 65, 255, 0.08);
  --aim-grid-minor: rgba(0, 65, 255, 0.03);
  --aim-hud-bg: #ebebeb;
  --aim-hud-border: #111111;
  --aim-text: #000000;
  --aim-text-dim: #666666;
  --aim-accent: #0041ff;

  /* Business Card Back default variables (Day/Light Theme) */
  --bcard-back-bg: #ffffff;
  --bcard-back-text: #000000;
  --bcard-back-emblem: #ff3d00;
  --bcard-back-tag-bg: rgba(0, 0, 0, 0.04);
  --bcard-back-tag-border: rgba(0, 0, 0, 0.12);
  --bcard-back-divider-color: rgba(0, 0, 0, 0.12);
  --bcard-back-footer-opacity: 0.5;

}

/* Reset & Base System */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  user-select: none;
}

html,
body {
  font-family: var(--font-body);
  background-color: var(--color-beige);
  color: var(--color-black);
  overflow: hidden;
  height: 100vh;
  width: 100vw;
}

/* ─── Scrollbar UX Best Practice System ───────────────────── */
html[data-theme="dark"],
[data-theme="dark"] {
  color-scheme: dark;
}

html[data-theme="light"],
[data-theme="light"] {
  color-scheme: light;
}

::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}

::-webkit-scrollbar-track {
  background: transparent;
}

::-webkit-scrollbar-thumb {
  background: rgba(0, 0, 0, 0.2);
  border-radius: 4px;
  border: 2px solid transparent;
  background-clip: padding-box;
  transition: background 0.2s ease;
}

::-webkit-scrollbar-thumb:hover {
  background: rgba(0, 0, 0, 0.4);
}

::-webkit-scrollbar-corner {
  background: transparent;
}

* {
  scrollbar-width: thin;
  scrollbar-color: rgba(0, 0, 0, 0.2) transparent;
}

[data-theme="dark"] ::-webkit-scrollbar-track {
  background: transparent;
}

[data-theme="dark"] ::-webkit-scrollbar-thumb {
  background: #30363d;
  border: 2px solid transparent;
  border-radius: 4px;
  background-clip: padding-box;
}

[data-theme="dark"] ::-webkit-scrollbar-thumb:hover {
  background: #58a6ff;
}

[data-theme="dark"] {
  scrollbar-color: #30363d transparent;
}

/* Boot / Loading Sequence Overlay */
#boot-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background: var(--color-beige);
  z-index: 999999;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: opacity 0.6s cubic-bezier(0.16, 1, 0.3, 1), visibility 0.6s ease;
}

#boot-overlay.fade-out {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

.boot-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  gap: 0.75rem;
}

.boot-symbol-wrapper {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  margin-bottom: 0.5rem;
}

.boot-symbol {
  width: 24px;
  height: 24px;
  background: #0041ff;
}

.boot-symbol-accent {
  width: 24px;
  height: 10px;
  background: #ff3d00;
}

.boot-title {
  font-family: var(--font-display);
  font-size: 2.75rem;
  font-weight: 800;
  letter-spacing: -0.02em;
  color: #000000;
  margin: 0;
  line-height: 1;
}

.boot-subtitle {
  font-family: var(--font-display);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.2em;
  color: #555555;
  margin: 0;
  text-transform: uppercase;
}

.boot-divider {
  width: 120px;
  height: 1.5px;
  background: #000000;
  margin: 0.5rem 0;
}

.boot-meta {
  font-family: var(--font-mono);
  font-size: 0.7rem;
  color: #777777;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.boot-meta-dot {
  color: #ff3d00;
}

.noise-svg {
  position: absolute;
  width: 0;
  height: 0;
  pointer-events: none;
}

/* App Container Layout */
.app-container {
  display: grid;
  grid-template-columns: 340px 1fr;
  height: 100vh;
  width: 100vw;
  position: relative;
  overflow: hidden;
}

/* ==========================================================================
   SIDEBAR - CONTROL CENTER (SWISS GRID & TYPOGRAPHY)
   ========================================================================== */

.sidebar-brand {
  background-color: var(--color-white);
  border-right: 1.5px solid var(--color-black);
  display: flex;
  flex-direction: column;
  height: 100vh;
  overflow-y: auto;
  padding: 2.5rem 2rem;
  z-index: 10;
  position: relative;
}

.sidebar-header {
  margin-bottom: 2rem;
}

.logo-group {
  display: flex;
  align-items: center;
  gap: 0.8rem;
  margin-bottom: 0.5rem;
}

.brand-symbol {
  width: 20px;
  height: 20px;
  background-color: var(--color-cobalt);
  border-radius: 0;
  position: relative;
}

.brand-symbol::after {
  content: "";
  position: absolute;
  top: 4px;
  left: 4px;
  width: 12px;
  height: 12px;
  background-color: var(--color-orange);
}

.logo-group .brand-title,
.brand-title {
  font-family: var(--font-display);
  font-size: 1.8rem;
  font-weight: 700;
  letter-spacing: -1.5px;
  color: var(--color-black);
}

.brand-subtitle {
  font-family: var(--font-display);
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--color-grey-text);
}

/* Technical Spec Grid (Swiss Metric Card System) */
.brand-specs-section {
  margin-bottom: 1rem;
}

.spec-card {
  background-color: var(--color-white);
  border: 1.5px solid var(--color-black);
  padding: 0.65rem 0.75rem;
  box-shadow: 2px 2px 0px rgba(0, 0, 0, 1);
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
  transition: background-color 0.3s ease, border-color 0.3s ease;
}

.spec-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  font-family: var(--font-display);
  font-size: 0.62rem;
  font-weight: 600;
}

.spec-item-label {
  color: var(--color-grey-text);
  font-size: 0.58rem;
  letter-spacing: 0.4px;
  text-transform: uppercase;
  flex-shrink: 0;
}

.spec-item-badge {
  font-family: var(--font-mono);
  font-size: 0.52rem;
  font-weight: 700;
  color: var(--color-black);
  background-color: rgba(0, 0, 0, 0.05);
  border: 1px solid rgba(0, 0, 0, 0.15);
  padding: 1px 5px;
  border-radius: 2px;
  letter-spacing: 0.3px;
}

.spec-tags {
  display: flex;
  gap: 0.25rem;
}

.spec-tag {
  font-family: var(--font-mono);
  font-size: 0.5rem;
  font-weight: 700;
  color: var(--color-cobalt);
  background-color: rgba(0, 65, 255, 0.08);
  border: 1px solid var(--color-cobalt);
  padding: 1px 4px;
  border-radius: 2px;
}

.spec-swatches {
  display: flex;
  align-items: center;
  gap: 0.35rem;
}

.swatch {
  width: 13px;
  height: 13px;
  border-radius: 2px;
  border: 1px solid rgba(0, 0, 0, 0.3);
  transition: transform 0.15s ease, box-shadow 0.15s ease;
  cursor: help;
}

.swatch:hover {
  transform: scale(1.3);
  box-shadow: 0 0 6px rgba(0, 0, 0, 0.3);
}

.swatch-cobalt { background-color: #002FA7; }
.swatch-orange { background-color: #FF4400; }
.swatch-black { background-color: #111111; }
.swatch-beige { background-color: #F2F0EB; }

/* Workspace Control Sections */
.control-section {
  margin-bottom: 2rem;
}

.control-section h2 {
  font-family: var(--font-display);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  margin-bottom: 1rem;
  color: var(--color-black);
  position: relative;
  display: flex;
  align-items: center;
}

.control-section h2::after {
  content: "";
  flex-grow: 1;
  height: 1px;
  background-color: var(--color-grey-border);
  margin-left: 0.8rem;
}

/* Standard Button Groups */
.btn-group {
  display: flex;
  gap: 0.5rem;
}

/* Unified Sidebar Control Buttons (Grid, Grain, Presets & Lighting) */
.control-btn,
.preset-btn {
  background-color: var(--color-white);
  border: 1.5px solid var(--color-black);
  font-family: var(--font-display);
  font-weight: 600;
  cursor: pointer;
  display: flex;
  align-items: center;
  box-shadow: 1px 1px 0px rgba(0, 0, 0, 1);
  transition: all 0.15s ease !important;
  color: var(--color-black);
  box-sizing: border-box;
  border-radius: 0;
  min-width: 0;
}

.control-btn {
  flex: 1;
  padding: 0.75rem 1rem;
  font-size: 0.7rem;
  letter-spacing: 0.5px;
  justify-content: space-between;
}

.preset-btn {
  padding: 0.5rem 0.45rem;
  font-size: 0.62rem;
  letter-spacing: 0.2px;
  justify-content: flex-start;
  gap: 0.35rem;
  text-align: left;
  min-width: 0;
  width: 100%;
}

.control-btn:hover,
.preset-btn:hover {
  background-color: var(--color-beige);
  color: var(--color-black);
  border-color: var(--color-black);
}

.control-btn.active,
.control-btn.active:hover,
.preset-btn.active,
.preset-btn.active:hover {
  background-color: var(--color-black) !important;
  color: var(--color-white) !important;
  border-color: var(--color-black) !important;
  box-shadow: none !important;
  transform: translate(1px, 1px) !important;
}

.status-indicator {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background-color: var(--color-grey-border);
}

.control-btn.active .status-indicator {
  background-color: var(--color-orange);
}

/* Presets Grid Layout - Swiss 2-Column Grid */
.presets-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.4rem;
  width: 100%;
}

.preset-num {
  font-family: var(--font-mono);
  font-size: 0.58rem;
  font-weight: 700;
  color: var(--color-orange);
  flex-shrink: 0;
}

.preset-btn.active .preset-num,
.preset-btn.active:hover .preset-num {
  color: var(--color-orange);
}

.preset-name {
  font-family: var(--font-display);
  font-size: 0.61rem;
  font-weight: 600;
  letter-spacing: 0.1px;
  line-height: 1.2;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  min-width: 0;
  flex: 1;
}

input[type="range"] {
  -webkit-appearance: none;
  width: 100%;
  height: 3px;
  background: var(--color-grey-border);
  outline: none;
  margin: 10px 0;
}

input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 12px;
  height: 12px;
  background: var(--color-black);
  border-radius: 50%;
  cursor: pointer;
  transition: transform 0.1s ease;
}

input[type="range"]::-webkit-slider-thumb:hover {
  transform: scale(1.3);
  background: var(--color-cobalt);
}

/* Selection Inspector Details */
.selection-details {
  border-top: 1.5px dashed var(--color-grey-border);
  padding-top: 1.5rem;
  margin-top: auto;
}

.no-selection-msg {
  font-size: 0.68rem;
  line-height: 1.5;
  color: var(--color-grey-text);
  font-style: italic;
}

.selection-controls {
  animation: fadeIn 0.3s ease;
}

.selection-controls.hidden {
  display: none;
}

.active-asset-type {
  font-size: 0.75rem;
  font-weight: 700;
  margin-bottom: 1rem;
  text-transform: uppercase;
  color: var(--color-cobalt);
}

.font-small {
  margin-top: 1.2rem;
}

.control-btn-small {
  flex: 1;
  background-color: var(--color-white);
  border: 1px solid var(--color-black);
  padding: 0.5rem 0.75rem;
  font-family: var(--font-display);
  font-size: 0.62rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s ease;
  color: var(--color-black);
}

.control-btn-small:hover {
  background-color: var(--color-black);
  color: var(--color-white);
}

/* ==========================================================================
   ECELON FM RADIO PLAYER
   ========================================================================== */
/* ==========================================================================
   ECELON FM RADIO PLAYER (REDESIGNED SWISS WIDGET)
   ========================================================================== */
/* Bevel System Styles */
.bevel-raised {
  border-width: 2px;
  border-style: solid;
  border-color: #BEBEBE #1A1A1A #1A1A1A #BEBEBE !important;
}

.bevel-raised-thin {
  border-width: 1px;
  border-style: solid;
  border-color: #BEBEBE #1A1A1A #1A1A1A #BEBEBE !important;
}

/* Geometric Art Block Interactive Sandbox */
.geometric-art-block {
  position: relative;
  overflow: hidden;
  background-color: rgba(0, 0, 0, 0.03);
  border: 1px dashed rgba(0, 0, 0, 0.2);
  border-radius: 2px;
}

.cobalt-circle,
.orange-stripe {
  position: absolute;
  transition: box-shadow 0.15s ease, filter 0.15s ease;
  user-select: none;
  -webkit-user-select: none;
  touch-action: none;
  z-index: 2;
}

.cobalt-circle {
  background-color: var(--color-cobalt);
  border-radius: 50%;
  box-shadow: 1px 1px 3px rgba(0, 0, 0, 0.2);
}

.orange-stripe {
  background-color: var(--color-orange);
  border-radius: 1px;
  box-shadow: 1px 1px 3px rgba(0, 0, 0, 0.2);
}

.cobalt-circle:hover,
.orange-stripe:hover {
  filter: brightness(1.2);
  box-shadow: 0 3px 8px rgba(0, 0, 0, 0.3);
}

.brand-logo-svg {
  width: 10px;
  height: 10px;
  fill: #FFB13B;
  stroke: none;
}

.title-controls {
  display: flex;
  gap: 1px;
}

.window-ctrl-btn {
  width: 9px;
  height: 9px;
  background-color: #636363;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #000000;
  font-family: 'Share Tech Mono', monospace;
  font-size: 7px;
  line-height: 1;
  cursor: pointer;
  border-radius: 0;
}

.window-ctrl-btn:active {
  border-color: #1A1A1A #BEBEBE #BEBEBE #1A1A1A;
}

.lcd-top-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 18px;
  width: 100%;
}

.lcd-bottom-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 16px;
  width: 100%;
  margin-top: 1px;
}

.visualizer-wrapper {
  width: 76px;
  height: 16px;
  background-color: #000000;
  flex-shrink: 0;
  display: flex;
  align-items: flex-end;
}

.lcd-info-stack {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 3px;
  flex: 1;
  overflow: hidden;
}

.status-leds {
  display: flex;
  gap: 1px;
  flex-shrink: 0;
  align-items: center;
  margin-right: 2px;
}

.marquee-container {
  width: 100%;
  overflow: hidden;
  white-space: nowrap;
}

.marquee-text {
  display: inline-block;
  font-size: 8px;
  font-family: 'Share Tech Mono', monospace;
  color: var(--screen-glow);
  text-shadow: 0 0 1px var(--screen-glow);
  padding-left: 100%;
  animation: song-scroll 16s linear infinite;
  line-height: 1;
}

@keyframes song-scroll {
  from { transform: translateX(0); }
  to { transform: translateX(-100%); }
}

/* Section 3: Right Side Faceplate Sliders */
.faceplate-sliders {
  width: 104px;
  height: 52px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 4px;
  padding: 2px 4px;
  flex-shrink: 0;
}

.playback-row {
  display: flex;
  gap: 2px;
  width: 100%;
  justify-content: space-between;
}

.action-btn {
  background-color: #636363;
  border-radius: 0;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 24px;
  margin: 0;
  padding: 0;
  flex-shrink: 0;
}

.btn-prev { width: 39px; }
.btn-play { width: 45px; }
.btn-pause { width: 45px; }
.btn-stop { width: 45px; }
.btn-next { width: 39px; }
.btn-eject { width: 40px; }

.action-btn svg {
  width: 16px;
  height: 12px;
  fill: #1A1A1A;
  color: #1A1A1A;
}

.action-btn:active {
  border-color: #1A1A1A #BEBEBE #BEBEBE #1A1A1A !important;
}

/* Volume/Balance Slider styling */
.sliders-panel {
  display: flex;
  flex-direction: column;
  gap: 3px;
  padding: 0 2px;
}

.slider-row {
  display: flex;
  align-items: center;
  gap: 4px;
}

.slider-label {
  font-family: 'Share Tech Mono', monospace;
  font-size: 8px;
  color: #00A000;
  width: 24px;
  text-transform: uppercase;
  line-height: 1;
}

/* Section 6: Toggle Buttons */
.toggle-row {
  display: flex;
  justify-content: space-between;
  width: 100%;
}

.toggle-group {
  display: flex;
  gap: 2px;
}

.toggle-btn {
  background-color: #636363;
  width: 56px;
  height: 16px;
  font-family: 'Share Tech Mono', monospace;
  font-size: 9px;
  color: #1A1A1A;
  border-radius: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  cursor: pointer;
  font-weight: 700;
  flex-shrink: 0;
}

.toggle-led {
  width: 7px;
  height: 7px;
  background-color: #003300;
  border: 1px solid #1A1A1A;
  border-radius: 0;
  flex-shrink: 0;
}

.toggle-btn.active {
  border-color: #1A1A1A #BEBEBE #BEBEBE #1A1A1A !important;
}

.toggle-btn.active .toggle-led {
  background-color: #00FF00;
}

/* ==========================================================================
   MINI GAME - BREAKOUT
   ========================================================================== */
.mini-game-section {
  margin-bottom: 2rem;
  display: flex;
  flex-direction: column;
}

.game-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 0.6rem;
}

.game-label {
  font-family: var(--font-display);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 1px;
}

.game-score {
  font-family: var(--font-display);
  font-size: 0.65rem;
  font-weight: 700;
  color: var(--color-cobalt);
}

.aim-timer {
  font-family: var(--font-display);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 1px;
  color: var(--color-orange);
}

.aim-score {
  font-family: var(--font-display);
  font-size: 0.65rem;
  font-weight: 700;
  color: var(--color-cobalt);
}

/* Height tracks the canvas' own coordinate height (see the height attribute on
   #breakout-canvas) so the play field is not squashed vertically. */
.game-container {
  position: relative;
  border: 1.5px solid var(--color-black);
  width: 100%;
  height: 240px;
  background-color: var(--color-white);
  box-shadow: 2px 2px 0px rgba(0, 0, 0, 1);
  overflow: hidden;
}

#breakout-canvas {
  display: block;
  width: 100%;
  height: 100%;
  background-color: var(--color-white);
}

/* ━━━━━━━━━━━━━━━━━━━━━━━
   TACTICAL BLUEPRINT HUD GAME STYLE
   ━━━━━━━━━━━━━━━━━━━━━━━ */
.aimlab-hud-container {
  position: relative;
  width: 100%;
  height: 420px;
  background-color: #09101A;
  border: 1.5px solid var(--color-black);
  box-shadow: 2px 2px 0px rgba(0, 0, 0, 1);
  overflow: hidden;
  user-select: none;
  touch-action: none;
}

#aimlab-bg-canvas,
#aimlab-game-canvas {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: block;
}

#aimlab-bg-canvas {
  z-index: 1;
}

#aimlab-game-canvas {
  z-index: 2;
  cursor: crosshair;
}

/* Scan line animation */
.aimlab-scan-line {
  position: absolute;
  left: 0;
  width: 100%;
  height: 2px;
  background: rgba(30, 180, 255, 0.06);
  z-index: 3;
  pointer-events: none;
  animation: aimlab-scan-anim 4s linear infinite;
}

@keyframes aimlab-scan-anim {
  0% { top: 0%; }
  100% { top: 100%; }
}

/* HUD Top overlay */
#aimlab-hud-top {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 40px;
  background: var(--aim-hud-bg);
  border-bottom: 1px solid var(--aim-hud-border);
  z-index: 4;
  padding: 0 10px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  pointer-events: none;
  font-family: var(--font-display);
  box-sizing: border-box;
}

#aimlab-hud-top .hud-left {
  font-size: 8px;
  font-weight: 700;
  color: var(--aim-text-dim);
  letter-spacing: 0.15em;
  white-space: nowrap;
}

#aimlab-hud-top .hud-center {
  display: flex;
  flex-direction: column;
  align-items: center;
}

#aimlab-hud-top .combo-val {
  font-size: 14px;
  font-weight: 700;
  color: #FFD700;
  line-height: 1;
}

#aimlab-hud-top .combo-lbl {
  font-size: 6px;
  color: var(--aim-text-dim);
}

#aimlab-hud-top .combo-badge {
  position: absolute;
  top: 4px;
  transform: translateX(18px);
  background: #FFD700;
  color: #000000;
  font-size: 7px;
  font-weight: 700;
  padding: 0px 3px;
  border-radius: 1px;
  animation: aimlab-badge-pulse 1s ease-in-out infinite alternate;
}

@keyframes aimlab-badge-pulse {
  0% { transform: translateX(18px) scale(0.95); }
  100% { transform: translateX(18px) scale(1.05); }
}

#aimlab-hud-top .hud-right {
  display: flex;
  align-items: center;
  gap: 8px;
}

#aimlab-timer {
  font-size: 14px;
  font-weight: 700;
  color: var(--aim-text);
}

#aimlab-timer.aimlab-timer-warning {
  color: #FFD700;
}

#aimlab-timer.aimlab-timer-critical {
  color: #FF2222;
  animation: aimlab-timer-pulse 0.5s ease-in-out infinite alternate;
}

@keyframes aimlab-timer-pulse {
  0% { transform: scale(0.95); opacity: 0.8; }
  100% { transform: scale(1.05); opacity: 1; }
}

#aimlab-score-display {
  font-size: 12px;
  font-weight: 700;
  color: var(--aim-text);
}

#aimlab-score-display .dim-txt {
  font-size: 8px;
  color: var(--aim-text-dim);
  font-weight: 400;
}

/* HUD Bottom overlay */
#aimlab-hud-bottom {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 20px;
  background: var(--aim-hud-bg);
  border-top: 1px solid var(--aim-hud-border);
  z-index: 4;
  padding: 0 10px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  pointer-events: none;
  font-family: var(--font-display);
  box-sizing: border-box;
}

#aimlab-hud-bottom .hud-stat {
  font-size: 7px;
}

#aimlab-hud-bottom .stat-lbl {
  color: var(--aim-text-dim);
}

#aimlab-hud-bottom .stat-val {
  color: var(--aim-accent);
  font-weight: 700;
}

/* Difficulty Pips on the right edge */
#aimlab-pips {
  position: absolute;
  right: 6px;
  top: 50%;
  transform: translateY(-50%);
  display: flex;
  flex-direction: column;
  gap: 3px;
  z-index: 4;
  pointer-events: none;
}

#aimlab-pips .pip {
  width: 4px;
  height: 12px;
  background-color: var(--aim-grid-major);
  transition: background-color 0.2s ease;
}

#aimlab-pips .pip.active {
  background-color: var(--aim-accent);
  box-shadow: 0 0 4px var(--aim-accent);
}

/* Effects layer for floating text */
#aimlab-effects-layer {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 3;
  pointer-events: none;
  overflow: hidden;
}

.aimlab-score-popup {
  position: absolute;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 11px;
  pointer-events: none;
  animation: aimlab-popup-float 0.7s cubic-bezier(0.25, 1, 0.5, 1) forwards;
}

@keyframes aimlab-popup-float {
  0% { transform: translateY(0); opacity: 0; }
  15% { opacity: 1; }
  100% { transform: translateY(-30px); opacity: 0; }
}

#aimlab-end-screen {
  background: var(--aim-bg);
  cursor: default;
  display: flex;
  flex-direction: column;
}

.end-content {
  text-align: center;
  width: 90%;
  max-width: 250px;
}

.end-title {
  font-size: 9px;
  font-weight: 700;
  color: var(--aim-text-dim);
  letter-spacing: 0.25em;
  margin-bottom: 8px;
}

.end-score {
  font-size: 40px;
  font-weight: 700;
  color: var(--aim-text);
  margin-bottom: 12px;
  font-family: var(--font-display);
  line-height: 1;
}

.end-divider {
  height: 1px;
  background: var(--aim-hud-border);
  opacity: 0.25;
  margin: 10px 0;
  width: 100%;
}

.end-stats-row {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px 6px;
  text-align: center;
  margin: 10px 0;
}

.end-stats-row .lbl {
  font-size: 7px;
  color: var(--aim-text-dim);
  letter-spacing: 0.05em;
}

.end-stats-row .val {
  font-size: 11px;
  font-weight: 700;
  color: var(--aim-accent);
}

.end-options {
  display: flex;
  gap: 8px;
  justify-content: center;
  margin-top: 14px;
}

.aimlab-btn {
  background-color: var(--color-white);
  border: 1.5px solid var(--color-black);
  color: var(--color-black);
  font-family: var(--font-display);
  font-size: 0.65rem;
  font-weight: 600;
  letter-spacing: 0.5px;
  padding: 6px 14px;
  cursor: pointer;
  box-shadow: 1px 1px 0px rgba(0, 0, 0, 1);
  transition: all 0.15s ease;
  box-sizing: border-box;
}

.aimlab-btn:hover {
  background-color: var(--color-beige);
  color: var(--color-black);
  border-color: var(--color-black);
  box-shadow: 1px 1px 0px rgba(0, 0, 0, 1);
}

.aimlab-btn:active {
  background-color: var(--color-black) !important;
  color: var(--color-white) !important;
  box-shadow: none !important;
  transform: translate(1px, 1px);
}

.game-overlay {
  position: absolute;
  z-index: 5;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: var(--color-white);
  color: var(--color-black);
  opacity: 0.96;
  display: flex;
  justify-content: center;
  align-items: center;
  font-family: var(--font-display);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 1px;
  cursor: pointer;
  transition: all 0.2s ease;
}

.game-overlay:hover {
  opacity: 0.88;
  color: var(--color-cobalt);
}

/* Developer signature footer */
.developer-credit {
  margin-top: 2rem;
  font-size: 0.6rem;
  letter-spacing: 1.5px;
  font-weight: 700;
  color: var(--color-grey-border);
}

/* ==========================================================================
   WORKBENCH CANVAS & ART DIRECTION
   ========================================================================== */

.workbench-container {
  position: relative;
  background-color: var(--color-beige);
  background-image:
    radial-gradient(
      circle at 50% 50%,
      rgba(255, 255, 255, var(--glow-opacity, 0.45)) 0%,
      rgba(255, 255, 255, 0) 100%
    ),
    url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)' opacity='0.035'/%3E%3C/svg%3E");
  overflow: hidden;
  height: 100vh;
  display: flex;
  flex-direction: column;
}

.workbench-viewport {
  flex-grow: 1;
  position: relative;
  width: 100%;
  overflow: hidden;
}

/* Swiss Blueprint Lines (Toggleable repeating notebook grid) */
.blueprint-grid {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.4s ease;
  z-index: 0;
  background-size: 35px 35px;
  background-image:
    linear-gradient(to right, rgba(0, 47, 167, 0.08) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(0, 47, 167, 0.08) 1px, transparent 1px);
}

.blueprint-grid.visible {
  opacity: 1; /* Subtle grid lines showing at full pattern opacity */
}

/* Architectural Watermark Details */
.canvas-watermark {
  position: absolute;
  top: 5%;
  left: 5%;
  font-family: var(--font-display);
  color: var(--color-black);
  opacity: 0.05;
  pointer-events: none;
  z-index: 0;
}

.watermark-large {
  font-size: 8rem;
  font-weight: 700;
  letter-spacing: -6px;
  line-height: 0.9;
}

.watermark-medium {
  font-size: 1rem;
  font-weight: 500;
  letter-spacing: 8px;
  margin-top: 0.5rem;
}

.watermark-grid-spec {
  font-size: 0.7rem;
  letter-spacing: 2px;
  margin-top: 0.2rem;
}

/* The Main Interactive Board */
.workbench {
  width: 2400px;
  height: 1600px;
  position: absolute;
  left: 50%;
  top: 50%;
  z-index: 2;
  overflow: hidden;
  transform-origin: center center;
  /* Disable transition during panning, enable dynamically for button transitions */
  transition: none;
}

.workbench.zoom-transition {
  transition: transform 0.4s var(--transition-easing);
}

/* ==========================================================================
   BRAND ASSETS (MOCKUPS) STYLING
   ========================================================================== */

.brand-asset {
  position: absolute;
  transform-origin: center center;
  transition: box-shadow 0.3s ease;
  z-index: 2; /* Always render cards above background grids and watermark */
  border-radius: 2px;

  /* Prevent blurring/pixelation during scaling and transforms */
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  transform-style: preserve-3d;
  -webkit-transform-style: preserve-3d;
  -webkit-font-smoothing: subpixel-antialiased;
  image-rendering: -webkit-optimize-contrast;
}

/* Applying Multiple Layered Soft Shadows for Photorealistic Mockup look */
.brand-asset {
  box-shadow:
    calc(var(--shadow-x) * 0.2) calc(var(--shadow-y) * 0.2)
      calc(var(--shadow-blur) * 0.2)
      rgba(
        var(--shadow-color-rgb, 10, 8, 5),
        calc(var(--shadow-intensity) * 1.5)
      ),
    calc(var(--shadow-x) * 0.6) calc(var(--shadow-y) * 0.6)
      calc(var(--shadow-blur) * 0.6)
      rgba(
        var(--shadow-color-rgb, 10, 8, 5),
        calc(var(--shadow-intensity) * 1.1)
      ),
    calc(var(--shadow-x)) calc(var(--shadow-y)) calc(var(--shadow-blur))
      rgba(var(--shadow-color-rgb, 10, 8, 5), var(--shadow-intensity));
}

/* Selected state highlight */
.brand-asset.selected {
  outline: 2px solid var(--color-cobalt);
  outline-offset: 4px;
}

/* Smooth layout transitions */
.brand-asset.layout-transition {
  transition:
    left var(--transition-speed) var(--transition-easing),
    top var(--transition-speed) var(--transition-easing),
    transform var(--transition-speed) var(--transition-easing),
    box-shadow 0.3s ease;
}

/* ==========================================================================
   CARD EXPAND / COLLAPSE (Double-Click Zoom)
   Uses FLIP technique for performant expand/collapse animations.
   ========================================================================== */

/* Dark backdrop overlay behind expanded card */
.expand-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0);
  z-index: 150000;
  cursor: pointer;
  pointer-events: none;
  transition:
    background 0.45s cubic-bezier(0.23, 1, 0.32, 1),
    backdrop-filter 0.45s cubic-bezier(0.23, 1, 0.32, 1);
  backdrop-filter: blur(0px);
  -webkit-backdrop-filter: blur(0px);
}

.expand-overlay.active {
  background: rgba(0, 0, 0, 0.72);
  pointer-events: auto;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}

/* Expanded card state */
.brand-asset.expanded {
  position: fixed !important;
  z-index: 160000 !important;
  cursor: default;
  outline: none !important;
  outline-offset: 0 !important;
  will-change: transform, left, top, width, height;
  transition: none !important;
}

/* Collapsing animation state (transitioning back to original) */
.brand-asset.collapsing {
  position: fixed !important;
  z-index: 160000 !important;
  pointer-events: none;
  will-change: transform, left, top, width, height;
  transition: none !important;
}

.brand-asset.expanded::before,
.brand-asset.collapsing::before {
  border-color: transparent !important;
}

/* Paper Grain Texture Layer inside Assets */
.paper-grain-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  mix-blend-mode: overlay;
  opacity: 0;
  transition: opacity 0.4s ease;
  z-index: 99;
  border-radius: 2px;
}

.paper-grain-overlay.active {
  opacity: 0.12;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)'/%3E%3C/svg%3E");
}

/* Asset Contents Base */
.asset-content {
  width: 100%;
  height: 100%;
  position: relative;
  overflow: hidden;
  border-radius: 2px;
}

/* --- 1. POSTER MOCKUP (A3 format) --- */
.poster-asset {
  width: 350px;
  height: 530px;
}

.poster-asset .asset-content {
  background-color: var(--color-cobalt);
  color: var(--color-white);
  padding: 1.8rem 1.6rem;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  border: 1.5px solid var(--color-black);
  box-shadow: 3px 3px 0px rgba(0, 0, 0, 1);
}

.poster-grid-bg {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-image:
    linear-gradient(rgba(255, 255, 255, 0.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.05) 1px, transparent 1px);
  background-size: 25px 25px;
  pointer-events: none;
}

.poster-header {
  display: flex;
  justify-content: space-between;
  font-family: var(--font-display);
  font-size: 0.65rem;
  font-weight: 500;
  letter-spacing: 2.5px;
  opacity: 0.9;
}

.poster-title-block {
  margin-top: 1.5rem;
  position: relative;
}

.poster-title-block h2 {
  font-family: var(--font-display);
  font-size: 4.8rem;
  font-weight: 700;
  letter-spacing: -4px;
  line-height: 0.8;
  margin: 0;
}

.accent-orange-block {
  width: 48px;
  height: 8px;
  background-color: var(--color-orange);
  margin-top: 0.6rem;
}

.poster-typography-body {
  margin: auto 0 1.5rem 0;
}

.poster-typography-body h3 {
  font-family: var(--font-display);
  font-size: 2.2rem;
  font-weight: 700;
  line-height: 1;
  letter-spacing: -1px;
  margin-bottom: 0.8rem;
}

.poster-typography-body p {
  font-size: 0.72rem;
  line-height: 1.5;
  font-weight: 400;
  opacity: 0.8;
}

.poster-footer {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  border-top: 1px solid rgba(255, 255, 255, 0.25);
  padding-top: 1rem;
}

.coord-block {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
  font-size: 0.58rem;
  letter-spacing: 1px;
  opacity: 0.75;
}

.logo-stamp {
  width: 32px;
  height: 32px;
  border: 1px solid var(--color-white);
  padding: 3px;
}

.stamp-inner {
  width: 100%;
  height: 100%;
  background-color: var(--color-orange);
}

/* --- 2. STATIONERY LETTERHEAD (A4 format) --- */
.letterhead-asset {
  width: 400px;
  height: 625px;
}

.letterhead-asset .asset-content {
  background-color: var(--color-white);
  color: var(--color-black);
  padding: 2.8rem 2.6rem;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  border: 1.5px solid var(--color-black);
  box-shadow: 3px 3px 0px rgba(0, 0, 0, 1);
}

.letterhead-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  border-bottom: 1.5px solid var(--color-black);
  padding-bottom: 1.2rem;
}

.header-logo {
  display: flex;
  align-items: center;
  gap: 0.6rem;
}

.square-symbol {
  width: 14px;
  height: 14px;
  background-color: var(--color-cobalt);
}

.logo-text {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.1rem;
  letter-spacing: -0.5px;
}

.header-meta {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  font-size: 0.55rem;
  font-weight: 700;
  letter-spacing: 1px;
  gap: 0.15rem;
  color: var(--color-grey-text);
}

.letterhead-body {
  margin: 1.2rem 0;
  display: flex;
  flex-direction: column;
  gap: 0.8rem;
}

.letter-date {
  font-size: 0.68rem;
  font-weight: 700;
  color: var(--color-grey-text);
}

.letter-recipient {
  font-size: 0.72rem;
  line-height: 1.4;
}

.letter-subject {
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.2px;
  border-bottom: 1px solid var(--color-grey-border);
  padding-bottom: 0.5rem;
}

.letter-text {
  font-size: 0.68rem;
  line-height: 1.5;
  color: var(--color-black);
  opacity: 0.85;
}

.letter-text p {
  margin-bottom: 0.5rem;
}

.letter-sign {
  margin-top: 1rem;
  font-weight: 600;
}

.letter-sign small {
  color: var(--color-grey-text);
  font-weight: 400;
}

.letterhead-footer {
  display: flex;
  justify-content: space-between;
  border-top: 1px solid var(--color-grey-border);
  padding-top: 1rem;
  font-size: 0.55rem;
  font-weight: 600;
  color: var(--color-grey-text);
  letter-spacing: 0.5px;
}

/* --- 3. BROCHURE SPREAD MOCKUP --- */
.brochure-asset {
  width: 440px;
  height: 295px;
}

.brochure-asset .asset-content {
  background-color: var(--color-white);
  border: 1.5px solid var(--color-black);
  display: grid;
  grid-template-columns: 1fr 1fr;
  /* The row was content-sized, so a page grew taller than the card and the
     excess was silently clipped by overflow:hidden. Pinning it to the track
     keeps both pages exactly the height of the spread. */
  grid-template-rows: minmax(0, 1fr);
  box-shadow: 3px 3px 0px rgba(0, 0, 0, 1), inset 1px 0px 4px rgba(0, 0, 0, 0.15); /* Crease shadow + border shadow */
}

/* Center crease overlay */
.brochure-asset .asset-content::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 0;
  width: 2px;
  height: 100%;
  background: linear-gradient(
    to right,
    rgba(0, 0, 0, 0.1) 0%,
    rgba(0, 0, 0, 0) 50%,
    rgba(0, 0, 0, 0.1) 100%
  );
  z-index: 10;
}

.brochure-page {
  padding: 1.1rem 1.4rem;
  position: relative;
  display: flex;
  flex-direction: column;
  /* Was space-between, which spread the entries across a box taller than the
     card and pushed the last one past its bottom edge. They stack from the top
     now, so what fits is what shows. */
  justify-content: flex-start;
  /* Without this a flex item's min-content size lets the column grow past the
     grid track it sits in. */
  min-height: 0;
  overflow: hidden;
}

/* The decorative block is the last flex item, so once the column stopped
   overflowing, the default flex-shrink squashed its 50px down to a sliver. */
.brochure-page .geometric-art-block {
  flex-shrink: 0;
}

.left-page {
  background-color: var(--color-white);
  border-right: 1px solid rgba(0, 0, 0, 0.06);
}

.right-page {
  background-color: var(--color-grey-ui);
}

.brochure-grid-bg {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-image: radial-gradient(
    var(--color-grey-border) 1px,
    transparent 1px
  );
  background-size: 12px 12px;
  opacity: 0.4;
  pointer-events: none;
}

.page-num {
  font-family: var(--font-display);
  font-size: 0.62rem;
  font-weight: 700;
  opacity: 0.7;
}

.brand-monogram {
  font-family: var(--font-display);
  font-size: 3rem;
  font-weight: 700;
  letter-spacing: -2px;
  color: var(--color-cobalt);
  line-height: 1;
}

.color-swatch-display {
  display: flex;
  gap: 0.25rem;
  margin: 1rem 0;
}

.swatch {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  border: 1px solid rgba(0, 0, 0, 0.08);
}

.swatch-label {
  display: none;
}

.cobalt-swatch {
  background-color: var(--color-cobalt);
}
.orange-swatch {
  background-color: var(--color-orange);
}
.beige-swatch {
  background-color: var(--color-beige);
}

.editorial-snippet h3 {
  font-family: var(--font-display);
  font-size: 0.58rem;
  letter-spacing: 1px;
  margin-bottom: 0.25rem;
}

.editorial-snippet p {
  font-size: 0.55rem;
  line-height: 1.4;
  color: var(--color-grey-text);
  margin: 0;
}

.right-page-header h3 {
  font-family: var(--font-display);
  font-size: 0.9rem;
  font-weight: 700;
  letter-spacing: -0.2px;
}

.geometric-art-block {
  height: 90px;
  background-color: var(--color-white);
  border: 1.5px solid var(--color-black);
  position: relative;
  overflow: hidden;
  margin: 0.5rem 0 1rem 0;
}

.cobalt-circle {
  position: absolute;
  top: 15px;
  left: 15px;
  width: 60px;
  height: 60px;
  border-radius: 50%;
  background-color: var(--color-cobalt);
}

.orange-stripe {
  position: absolute;
  bottom: 0;
  right: 15px;
  width: 24px;
  height: 75px;
  background-color: var(--color-orange);
  transform: rotate(45deg);
}

.column-text p {
  font-size: 0.55rem;
  line-height: 1.4;
  color: var(--color-grey-text);
}

/* --- 4. BUSINESS CARD - FRONT --- */
.bcard-front-asset {
  width: 270px;
  height: 168px;
}

.bcard-front-asset .asset-content {
  background-color: var(--color-cobalt);
  color: var(--color-white);
  border: 1.5px solid var(--color-black);
  padding: 0.5rem 0.65rem;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  box-shadow: 3px 3px 0px rgba(0, 0, 0, 1);
}

.card-glow {
  position: absolute;
  top: -50%;
  left: -50%;
  width: 200%;
  height: 200%;
  background: radial-gradient(
    circle,
    rgba(255, 255, 255, 0.06) 0%,
    rgba(255, 255, 255, 0) 70%
  );
  pointer-events: none;
}

.card-interior {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  height: 100%;
}

.card-top {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

/* Debossed/Embossed look logo */
.embossed-symbol {
  width: 14px;
  height: 14px;
  background-color: var(--color-white);
  border-radius: 0;
  box-shadow:
    inset 1px 1px 1px rgba(0, 0, 0, 0.35),
    1px 1px 1px rgba(255, 255, 255, 0.2);
}

.card-logo-text {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 0.95rem;
  letter-spacing: -0.2px;
  text-shadow:
    -1px -1px 0px rgba(0, 0, 0, 0.25),
    1px 1px 0px rgba(255, 255, 255, 0.15);
}

.card-bottom {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
}

.embossed-tagline {
  font-size: 0.5rem;
  letter-spacing: 1.5px;
  opacity: 0.8;
  font-weight: 600;
}

.card-accent-dot {
  width: 8px;
  height: 8px;
  background-color: var(--color-orange);
}

/* Card middle section - role & contact */
.card-middle {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}

.card-divider {
  width: 28px;
  height: 1px;
  background-color: rgba(255, 255, 255, 0.35);
  margin-bottom: 0.15rem;
}

.card-role {
  font-family: var(--font-display);
  font-size: 0.48rem;
  font-weight: 600;
  letter-spacing: 1.2px;
  opacity: 0.75;
}

.card-contact {
  font-family: var(--font-mono);
  font-size: 0.48rem;
  font-weight: 500;
  opacity: 0.6;
  letter-spacing: 0.3px;
}

/* --- 4b. CONTACT FORM CARD --- */
.contact-card-interior {
  display: flex;
  flex-direction: column;
  height: 100%;
  gap: 0.3rem;
  position: relative;
  z-index: 1;
}

.contact-card-header {
  display: flex;
  align-items: center;
  gap: 0.4rem;
}

.contact-card-dot {
  width: 7px;
  height: 7px;
  background-color: var(--color-orange);
  flex-shrink: 0;
}

.contact-card-title {
  font-family: var(--font-display);
  font-size: 0.6rem;
  font-weight: 700;
  letter-spacing: 1.5px;
  color: rgba(255, 255, 255, 0.9);
}

.contact-form {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  flex: 1;
}

.contact-input {
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.2);
  color: #ffffff;
  font-family: var(--font-mono);
  font-size: 0.48rem;
  font-weight: 500;
  padding: 0.25rem 0.4rem;
  letter-spacing: 0.5px;
  outline: none;
  transition:
    border-color 0.2s ease,
    background-color 0.2s ease;
  -webkit-appearance: none;
  border-radius: 0;
}

.contact-input::placeholder {
  color: rgba(255, 255, 255, 0.4);
  letter-spacing: 1px;
}

.contact-input:focus {
  border-color: var(--color-orange);
  background: rgba(255, 255, 255, 0.15);
}

.contact-textarea {
  resize: none;
  flex: 1;
  min-height: 22px;
}

.form-error-msg {
  color: #ff3d00;
  font-family: var(--font-mono);
  font-size: 0.45rem;
  letter-spacing: 0.5px;
  min-height: 8px;
  line-height: 1;
  text-transform: uppercase;
}

.contact-submit {
  align-self: flex-end;
  background-color: rgba(255, 255, 255, 0.15);
  border: 1px solid rgba(255, 255, 255, 0.3);
  color: #ffffff;
  font-family: var(--font-display);
  font-size: 0.48rem;
  font-weight: 700;
  letter-spacing: 1.5px;
  padding: 0.2rem 0.6rem;
  cursor: pointer;
  transition: all 0.15s ease;
  -webkit-appearance: none;
  border-radius: 0;
}

.contact-submit:hover:not(:disabled) {
  background-color: var(--color-orange);
  border-color: var(--color-orange);
  transform: translateY(-1px);
}

.contact-submit:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

.contact-input.invalid {
  border-color: #ff3d00 !important;
  background: rgba(255, 61, 0, 0.08) !important;
}

.contact-input.valid {
  border-color: var(--color-cobalt) !important;
  background: rgba(0, 65, 255, 0.04) !important;
}
.bcard-back-asset {
  width: 260px;
  height: 150px;
}

.bcard-back-asset .asset-content {
  background-color: var(--bcard-back-bg);
  color: var(--bcard-back-text);
  border: 1.5px solid var(--color-black);
  padding: 0.75rem;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  box-shadow: 3px 3px 0px rgba(0, 0, 0, 1);
  overflow: hidden;
  height: 100%;
}

.bcard-back-interior {
  display: flex;
  height: 100%;
  gap: 0.6rem;
  align-items: center;
  justify-content: space-between;
}

.bcard-back-emblem {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  flex-shrink: 0;
  line-height: 0.8;
}

.emblem-text-large {
  font-family: var(--font-display);
  font-size: 2.2rem;
  font-weight: 800;
  color: var(--bcard-back-emblem);
  letter-spacing: -2px;
}

.emblem-text-sub {
  font-family: var(--font-display);
  font-size: 2.2rem;
  font-weight: 800;
  color: transparent;
  -webkit-text-stroke: 1px var(--bcard-back-text);
  letter-spacing: -2px;
}

.bcard-back-divider {
  width: 1px;
  height: 80%;
  background-color: var(--bcard-back-divider-color);
  flex-shrink: 0;
}

.bcard-back-details {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  height: 100%;
  flex: 1;
  text-align: left;
}

.details-section {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
}

.details-label {
  font-family: var(--font-mono);
  font-size: 0.42rem;
  font-weight: 700;
  color: var(--bcard-back-emblem);
  letter-spacing: 1px;
  margin-bottom: 0.1rem;
}

.details-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 0.15rem;
}

.details-item {
  font-family: var(--font-mono);
  font-size: 0.42rem;
  font-weight: 600;
  color: var(--bcard-back-text);
  background-color: var(--bcard-back-tag-bg);
  border: 1px solid var(--bcard-back-tag-border);
  padding: 0.08rem 0.25rem;
  letter-spacing: 0.3px;
}

.details-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-top: 1px solid var(--bcard-back-divider-color);
  padding-top: 0.2rem;
}

.bcard-footer-link {
  font-family: var(--font-mono);
  font-size: 0.42rem;
  font-weight: 500;
  color: var(--bcard-back-text);
  opacity: var(--bcard-back-footer-opacity);
  letter-spacing: 0.5px;
}

/* --- 6. PROCESS WORKFLOW CARD MOCKUP --- */
.envelope-asset {
  width: 360px;
  height: 190px;
}

.envelope-asset .asset-content {
  background-color: var(--color-white);
  border: 1.5px solid var(--color-black);
  padding: 0.8rem;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  box-shadow: 3px 3px 0px rgba(0, 0, 0, 1);
}

/* --- 6b. PROCESS WORKFLOW CARD --- */
.process-card {
  display: flex;
  flex-direction: column;
  height: 100%;
  gap: 0.6rem;
}

.process-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-bottom: 1.5px solid var(--color-black);
  padding-bottom: 0.4rem;
  margin-bottom: 0;
}

.process-brand {
  display: flex;
  align-items: center;
  gap: 0.4rem;
}

.process-square {
  width: 7px;
  height: 7px;
  background-color: var(--color-cobalt);
}

.process-label {
  font-family: var(--font-display);
  font-size: 0.58rem;
  font-weight: 800;
  letter-spacing: 1.5px;
  color: var(--color-black);
}

.process-ver {
  font-family: var(--font-mono);
  font-size: 0.45rem;
  font-weight: 600;
  color: var(--color-grey-text);
  letter-spacing: 0.5px;
}

.process-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0.4rem;
  flex: 1;
}

.process-node {
  background-color: var(--color-beige);
  border: 1px solid var(--color-grey-border);
  padding: 0.45rem;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  transition: all 0.2s ease;
}

.process-node:hover {
  border-color: var(--color-black);
  transform: translateY(-2px);
  box-shadow: 2px 2px 0px var(--color-black);
  background-color: var(--color-white);
}

.node-header {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  border-bottom: 1px solid var(--color-grey-border);
  padding-bottom: 0.25rem;
  margin-bottom: 0.25rem;
}

.node-num {
  font-family: var(--font-display);
  font-size: 0.8rem;
  font-weight: 900;
  color: var(--color-cobalt);
  line-height: 1;
}

.node-phase {
  font-family: var(--font-mono);
  font-size: 0.35rem;
  font-weight: 600;
  color: var(--color-grey-text);
}

.node-body {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
}

.node-title {
  font-family: var(--font-display);
  font-size: 0.48rem;
  font-weight: 800;
  letter-spacing: 0.5px;
  color: var(--color-black);
}

.node-desc {
  font-family: var(--font-body);
  font-size: 0.36rem;
  line-height: 1.3;
  color: var(--color-black);
  opacity: 0.8;
}

.node-footer {
  border-top: 1px dashed var(--color-grey-border);
  padding-top: 0.2rem;
  margin-top: 0.3rem;
}

.node-footer span {
  font-family: var(--font-mono);
  font-size: 0.33rem;
  font-weight: 500;
  color: var(--color-orange);
  display: block;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* ==========================================================================
   INTERACTION HUD & FOOTER STYLING
   ========================================================================== */

/* Visual Helper beneath canvas */
.canvas-footer-tip {
  position: absolute;
  bottom: 5.5rem;
  left: 50%;
  transform: translateX(-50%);
  background-color: rgba(17, 17, 17, 0.85);
  backdrop-filter: blur(10px);
  color: rgba(255, 255, 255, 0.9);
  padding: 0.5rem 1rem;
  border-radius: 50px;
  font-size: 0.68rem;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  z-index: 5;
  pointer-events: none;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
  letter-spacing: 0.2px;
  border: 1px solid rgba(255, 255, 255, 0.08);
}

.tip-icon-badge {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background-color: var(--color-cobalt);
  border: 1px solid rgba(255, 255, 255, 0.4);
  color: #ffffff;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  box-shadow: 0 0 8px rgba(0, 47, 167, 0.5);
  transition: background-color 0.3s ease;
}

body.theme-sunset .tip-icon-badge {
  background-color: var(--color-orange);
  box-shadow: 0 0 8px rgba(255, 68, 0, 0.5);
}

body.theme-moonlight .tip-icon-badge {
  background-color: #00a2ff;
  box-shadow: 0 0 8px rgba(0, 162, 255, 0.5);
}

/* Premium footer */
.app-footer {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  background-color: var(--color-white);
  border-top: 1.5px solid var(--color-black);
  height: 4.5rem;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  padding: 0 2rem;
  z-index: 10; /* Float on top of cards and grid background */
  font-size: 0.65rem;
  font-weight: 700;
  letter-spacing: 0.5px;
}

.footer-left {
  color: var(--color-grey-text);
}

.footer-center {
  text-align: center;
}

.branding-credits {
  display: flex;
  align-items: center;
  gap: 0.6rem;
}

.footer-right {
  display: flex;
  justify-content: flex-end;
  gap: 1.5rem;
}

.footer-link {
  color: var(--color-black);
  text-decoration: none;
  display: flex;
  align-items: center;
  gap: 0.3rem;
  transition: color 0.2s ease;
  position: relative;
  padding-bottom: 2px;
}

.footer-link::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  width: 0;
  height: 1px;
  background-color: var(--color-cobalt);
  transition: width 0.25s var(--transition-easing);
}

.footer-link:hover {
  color: var(--color-cobalt);
}

.footer-link:hover::after {
  width: 100%;
}

.link-arrow {
  transition: transform 0.2s var(--transition-easing);
}

.footer-link:hover .link-arrow {
  transform: translate(2px, -2px);
}

/* Animations */
@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(5px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Scrollbar Customization for Sidebar */
.sidebar-brand::-webkit-scrollbar {
  width: 4px;
}

.sidebar-brand::-webkit-scrollbar-track {
  background: var(--color-white);
}

.sidebar-brand::-webkit-scrollbar-thumb {
  background: var(--color-grey-border);
}

.sidebar-brand::-webkit-scrollbar-thumb:hover {
  background: var(--color-black);
}

/* Zoom Controls layout styling */
.zoom-controls {
  position: absolute;
  top: 1.5rem;
  right: 1.5rem;
  background-color: var(--color-white);
  border: 1.5px solid var(--color-black);
  display: flex;
  align-items: center;
  z-index: 10;
  height: 2.2rem;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.05);
}

.zoom-controls button {
  background: none;
  border: none;
  width: 2.2rem;
  height: 100%;
  font-family: var(--font-display);
  font-size: 0.9rem;
  font-weight: 700;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background-color 0.2s ease;
  color: var(--color-black);
}

.zoom-controls button:hover {
  background-color: var(--color-beige);
}

.zoom-controls button:active {
  background-color: var(--color-black);
  color: var(--color-white);
}

.zoom-controls button:first-child {
  border-right: 1px solid var(--color-black);
}

.zoom-controls button:last-child {
  border-left: 1.5px solid var(--color-black);
  font-size: 0.6rem;
  letter-spacing: 0.5px;
  width: auto;
  padding: 0 0.8rem;
}

#zoom-level {
  font-family: var(--font-display);
  font-size: 0.72rem;
  font-weight: 700;
  width: 3.2rem;
  text-align: center;
  border-right: 1px solid var(--color-black);
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Responsiveness adjustments */
@media (max-width: 1024px) {
  .app-container {
    grid-template-columns: 280px 1fr;
  }
  .sidebar-brand.terminal-theme {
    padding: 1.2rem 1rem;
  }
}

/* ==========================================================================
   BOOT / LOADING SEQUENCE OVERLAY
   ========================================================================== */
#boot-overlay {
  position: fixed;
  inset: 0;
  background-color: var(--color-beige);
  z-index: 100000;
  display: flex;
  justify-content: center;
  align-items: center;
  color: var(--color-black);
  transition:
    opacity 0.6s cubic-bezier(0.23, 1, 0.32, 1),
    visibility 0.6s cubic-bezier(0.23, 1, 0.32, 1);
  overflow: hidden;
}

#boot-overlay.fade-out {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

#boot-overlay.fade-out .boot-container {
  transform: translateY(-30px);
  opacity: 0;
  transition:
    transform 0.5s cubic-bezier(0.23, 1, 0.32, 1),
    opacity 0.5s ease;
}

.boot-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 2rem;
  position: relative;
}

.boot-symbol-wrapper {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 1.2rem;
  opacity: 0;
  transform: scale(0.8);
  animation: boot-symbol-pop 0.6s cubic-bezier(0.23, 1, 0.32, 1) forwards 0.1s;
}

.boot-symbol {
  width: 24px;
  height: 24px;
  background-color: var(--color-cobalt);
}

.boot-symbol-accent {
  width: 36px;
  height: 8px;
  background-color: var(--color-orange);
}

.boot-title-wrapper {
  overflow: hidden;
  margin-bottom: 0.4rem;
}

.boot-title {
  font-family: var(--font-display);
  font-size: 5rem;
  font-weight: 700;
  letter-spacing: -3px;
  line-height: 0.9;
  color: var(--color-black);
  transform: translateY(100%);
  animation: boot-title-reveal 0.8s cubic-bezier(0.16, 1, 0.3, 1) forwards 0.3s;
}

.boot-subtitle-wrapper {
  overflow: hidden;
  margin-bottom: 1.5rem;
}

.boot-subtitle {
  font-family: var(--font-display);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 6px;
  color: var(--color-grey-text);
  opacity: 0;
  transform: translateY(100%);
  animation: boot-subtitle-reveal 0.7s cubic-bezier(0.16, 1, 0.3, 1) forwards
    0.6s;
}

.boot-divider {
  width: 0;
  height: 1.5px;
  background-color: var(--color-black);
  margin-bottom: 1.2rem;
  animation: boot-divider-expand 0.7s cubic-bezier(0.23, 1, 0.32, 1) forwards
    0.9s;
}

.boot-meta {
  display: flex;
  align-items: center;
  gap: 0.8rem;
  font-family: var(--font-mono);
  font-size: 0.65rem;
  font-weight: 700;
  letter-spacing: 1.5px;
  color: var(--color-grey-text);
  opacity: 0;
  animation: boot-fade-in 0.5s ease forwards 1.3s;
}

.boot-meta-dot {
  color: var(--color-orange);
}

@keyframes boot-symbol-pop {
  to {
    opacity: 1;
    transform: scale(1);
  }
}

@keyframes boot-title-reveal {
  to {
    transform: translateY(0);
  }
}

@keyframes boot-subtitle-reveal {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes boot-divider-expand {
  to {
    width: 220px;
  }
}

@keyframes boot-fade-in {
  to {
    opacity: 1;
  }
}

/* ==========================================================================
   SIDEBAR STATUS PANEL & TICKER (SOL ALT)
   ========================================================================== */
.sidebar-status-panel {
  margin-top: auto;
  border-top: 1.5px solid var(--color-black);
  padding: 1rem 0 0 0;
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  font-family: var(--font-mono);
}

.status-indicator-header {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.status-dot-green {
  width: 7px;
  height: 7px;
  background-color: #4ade80;
  border-radius: 50%;
  box-shadow: 0 0 6px #4ade80;
  animation: status-pulse 1.8s infinite alternate;
}

@keyframes status-pulse {
  0% {
    opacity: 0.3;
    transform: scale(0.9);
  }
  100% {
    opacity: 1;
    transform: scale(1.1);
  }
}

.status-code {
  font-size: 0.65rem;
  font-weight: 700;
  color: var(--color-black);
  letter-spacing: 0.5px;
}

.status-marquee {
  overflow: hidden;
  white-space: nowrap;
  width: 100%;
  background-color: var(--color-grey-ui);
  border: 1px solid var(--color-black);
  height: 22px;
  display: flex;
  align-items: center;
  box-sizing: border-box;
}

.status-marquee-content {
  display: inline-block;
  font-size: 0.55rem;
  font-weight: 500;
  color: var(--color-grey-text);
  padding-left: 100%;
  animation: marquee-status 12s linear infinite;
  line-height: 1;
}

@keyframes marquee-status {
  0% {
    transform: translate3d(0, 0, 0);
  }
  100% {
    transform: translate3d(-100%, 0, 0);
  }
}

/* ==========================================================================
   SIDEBAR SECTION COLLAPSE (ACCORDION)
   ========================================================================== */
.control-section h2 {
  cursor: pointer;
  user-select: none;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.control-section h2::after {
  content: "▲";
  font-size: 0.5rem;
  transition: transform 0.3s cubic-bezier(0.23, 1, 0.32, 1);
  display: inline-block;
  margin-left: 0.5rem;
}

.control-section.collapsed h2::after {
  transform: rotate(180deg);
}

.sidebar-section-body {
  max-height: 800px;
  overflow: hidden;
  transition: max-height 0.4s cubic-bezier(0.23, 1, 0.32, 1);
}

.control-section.collapsed .sidebar-section-body {
  max-height: 0;
}

/* ==========================================================================
   HIDDEN DARK THEME OVERRIDES
   ========================================================================== */
body.dark-theme {
  --color-beige: #111111;
  --color-beige-dark: #222222;
  --color-black: #ffffff;
  --color-white: #1a1a1a;
  --color-grey-ui: #2a2a2a;
  --color-grey-border: #333333;
  --color-grey-text: #888888;
  
  /* Aim Lab Dark Theme */
  --aim-bg: #1a1a1a;
  --aim-grid-major: rgba(255, 255, 255, 0.08);
  --aim-grid-minor: rgba(255, 255, 255, 0.03);
  --aim-hud-bg: #111111;
  --aim-hud-border: #333333;
  --aim-text: #ffffff;
  --aim-text-dim: #888888;
  --aim-accent: #0041ff;
}

body.dark-theme .blueprint-grid {
  background-image:
    linear-gradient(to right, rgba(255, 255, 255, 0.04) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(255, 255, 255, 0.04) 1px, transparent 1px);
}

body.dark-theme .canvas-watermark {
  opacity: 0.03;
}

body.dark-theme .status-code {
  color: var(--color-black);
}

body.dark-theme .status-dot-green {
  background-color: #00ff00;
  box-shadow: 0 0 6px #00ff00;
}

/* ==========================================================================
   CARD RESIZE HANDLE & INSPECT FEEDBACK
   ========================================================================== */
.resize-handle {
  display: none !important;
}

.brand-asset.dragging {
  box-shadow: 20px 20px 40px rgba(0, 0, 0, 0.3) !important;
  transition: box-shadow 0.1s !important;
  z-index: 99999 !important; /* Ensure it is absolutely on top of everything during dragging */
}

/* Hover Highlight Ring on cards */
.brand-asset::before {
  content: "";
  position: absolute;
  inset: -3px;
  border: 1.5px solid transparent;
  pointer-events: none;
  transition: border-color 0.2s ease;
  z-index: 98;
  border-radius: 4px;
}

.brand-asset:hover::before {
  border-color: rgba(0, 65, 255, 0.3); /* Cobalt halo */
}

/* ==========================================================================
   CANVAS MINIMAP WIDGET
   ========================================================================== */
#minimap-container {
  position: absolute;
  right: 1.5rem;
  bottom: 5.5rem;
  width: 120px;
  height: 80px;
  background-color: var(--color-white);
  border: 1.5px solid var(--color-black);
  z-index: 10;
  box-shadow: 2px 2px 0px rgba(0, 0, 0, 1);
  overflow: hidden;
  pointer-events: none;
}

#minimap-viewport {
  position: absolute;
  border: 1px dashed var(--color-cobalt);
  background-color: rgba(0, 65, 255, 0.08);
  box-sizing: border-box;
}

.minimap-card {
  position: absolute;
  background-color: var(--color-black);
  opacity: 0.18;
}
/* ==========================================================================
   CUSTOM CONTEXT MENU
   ========================================================================== */
.context-menu {
  background-color: var(--color-white);
  border: 1.5px solid var(--color-black);
  box-shadow: 3px 3px 0px rgba(0, 0, 0, 1);
  padding: 0.3rem 0;
  width: 150px;
  font-family: var(--font-display);
  font-size: 0.65rem;
  font-weight: 700;
  box-sizing: border-box;
}

.menu-item {
  padding: 0.5rem 1rem;
  cursor: pointer;
  color: var(--color-black);
  transition: all 0.1s ease;
}

.menu-item:hover {
  background-color: var(--color-cobalt);
  color: var(--color-white);
}

.menu-divider {
  height: 1.5px;
  background-color: var(--color-black);
  margin: 0.2rem 0;
}

/* ==========================================================================
   SIDEBAR FLASH EFFECT
   ========================================================================== */
@keyframes sidebar-flash {
  0%,
  100% {
    background-color: var(--color-white);
  }
  50% {
    background-color: rgba(255, 61, 0, 0.4);
  }
}
/* ==========================================================================
   SIDEBAR SECTION COLLAPSE (ACCORDION)
   ========================================================================== */
.control-section h2 {
  cursor: pointer;
  user-select: none;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.control-section h2::after {
  content: "▲";
  font-size: 0.5rem;
  transition: transform 0.3s cubic-bezier(0.23, 1, 0.32, 1);
  display: inline-block;
  margin-left: 0.5rem;
}

.control-section.collapsed h2::after {
  transform: rotate(180deg);
}

.sidebar-section-body {
  max-height: 800px;
  overflow: hidden;
  transition: max-height 0.4s cubic-bezier(0.23, 1, 0.32, 1);
}

.control-section.collapsed .sidebar-section-body {
  max-height: 0;
}

/* ==========================================================================
   HIDDEN DARK THEME OVERRIDES
   ========================================================================== */
body.dark-theme {
  --color-beige: #111111;
  --color-beige-dark: #222222;
  --color-black: #ffffff;
  --color-white: #1a1a1a;
  --color-grey-ui: #2a2a2a;
  --color-grey-border: #333333;
  --color-grey-text: #888888;
}

body.dark-theme .blueprint-grid {
  background-image:
    linear-gradient(to right, rgba(255, 255, 255, 0.04) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(255, 255, 255, 0.04) 1px, transparent 1px);
}

body.dark-theme .canvas-watermark {
  opacity: 0.03;
}

body.dark-theme .status-code {
  color: var(--color-black);
}

body.dark-theme .status-dot-green {
  background-color: #00ff00;
  box-shadow: 0 0 6px #00ff00;
}

/* ==========================================================================
   CARD RESIZE HANDLE & INSPECT FEEDBACK
   ========================================================================== */
.resize-handle {
  display: none !important;
}

.brand-asset.dragging {
  cursor: var(--cursor-grabbing) !important;
  box-shadow: 20px 20px 40px rgba(0, 0, 0, 0.3) !important;
  transition: box-shadow 0.1s !important;
  z-index: 99999 !important; /* Ensure it is absolutely on top of everything during dragging */
}

/* Hover Highlight Ring on cards */
.brand-asset::before {
  content: "";
  position: absolute;
  inset: -3px;
  border: 1.5px solid transparent;
  pointer-events: none;
  transition: border-color 0.2s ease;
  z-index: 98;
  border-radius: 4px;
}

.brand-asset:hover::before {
  border-color: rgba(0, 65, 255, 0.3); /* Cobalt halo */
}

/* ==========================================================================
   CANVAS MINIMAP WIDGET
   ========================================================================== */
#minimap-container {
  position: absolute;
  right: 1.5rem;
  bottom: 5.5rem;
  width: 120px;
  height: 80px;
  background-color: var(--color-white);
  border: 1.5px solid var(--color-black);
  z-index: 10;
  box-shadow: 2px 2px 0px rgba(0, 0, 0, 1);
  overflow: hidden;
  pointer-events: none;
}

#minimap-viewport {
  position: absolute;
  border: 1px dashed var(--color-cobalt);
  background-color: rgba(0, 65, 255, 0.08);
  box-sizing: border-box;
}

.minimap-card {
  position: absolute;
  background-color: var(--color-black);
  opacity: 0.18;
}
/* ==========================================================================
   CUSTOM CONTEXT MENU
   ========================================================================== */
.context-menu {
  background-color: var(--color-white);
  border: 1.5px solid var(--color-black);
  box-shadow: 3px 3px 0px rgba(0, 0, 0, 1);
  padding: 0.3rem 0;
  width: 150px;
  font-family: var(--font-display);
  font-size: 0.65rem;
  font-weight: 700;
  box-sizing: border-box;
}

.menu-item {
  padding: 0.5rem 1rem;
  cursor: pointer;
  color: var(--color-black);
  transition: all 0.1s ease;
}

.menu-item:hover {
  background-color: var(--color-cobalt);
  color: var(--color-white);
}

.menu-divider {
  height: 1.5px;
  background-color: var(--color-black);
  margin: 0.2rem 0;
}

/* ==========================================================================
   SIDEBAR FLASH EFFECT
   ========================================================================== */
@keyframes sidebar-flash {
  0%,
  100% {
    background-color: var(--color-white);
  }
  50% {
    background-color: rgba(255, 61, 0, 0.4);
  }
}

.sidebar-brand.flash-effect {
  animation: sidebar-flash 0.15s ease 2;
}

/* ==========================================================================
   CELESTIAL LIGHTING THEMES (DAY, SUNSET, MOONLIGHT)
   ========================================================================== */

/* Enable smooth transitions across all theme-affected elements for an immersive fade */
body,
.sidebar-brand,
.workbench-container,
.blueprint-grid,
.canvas-watermark,
.brand-asset,
.control-section,
.status-panel,
.accordion-header,
.accordion-content,
h1,
h2,
h3,
p,
label,
span {
  transition:
    background-color 0.8s ease,
    background-image 0.8s ease,
    border-color 0.8s ease,
    color 0.8s ease,
    filter 0.8s ease,
    opacity 0.8s ease,
    text-shadow 0.8s ease,
    box-shadow 0.8s ease;
}

/* Sunset Theme Colors (Immersive full-screen warm gradient) */
body.theme-sunset {
  --color-white: #2e151a; /* Sidebar background */
  --color-beige: #231014; /* Canvas background */
  --color-beige-dark: #1b0c0f; /* Dark highlights */
  --color-black: #ffd3be; /* Primary text/border color */
  --color-grey-ui: #3d1d23; /* Form backgrounds */
  --color-grey-border: #69303b; /* UI borders */
  --color-grey-text: #cca491; /* Muted text */
  --color-cobalt: #ff4400; /* Focus highlights & symbols */
  --screen-glow: #ff4400;
  
  /* Aim Lab Sunset Theme */
  --aim-bg: #2e151a;
  --aim-grid-major: rgba(255, 68, 0, 0.15);
  --aim-grid-minor: rgba(255, 68, 0, 0.05);
  --aim-hud-bg: #231014;
  --aim-hud-border: #69303b;
  --aim-text: #ffd3be;
  --aim-text-dim: #cca491;
  --aim-accent: #ff4400;

  /* Winamp Sunset Theme Colors */

  /* Business Card Back variables (Sunset Theme) */
  --bcard-back-bg: #ffd3be;
  --bcard-back-text: #2e151a;
  --bcard-back-emblem: #ff4400;
  --bcard-back-tag-bg: rgba(255, 68, 0, 0.06);
  --bcard-back-tag-border: rgba(255, 68, 0, 0.2);
  --bcard-back-divider-color: rgba(46, 21, 26, 0.15);
  --bcard-back-footer-opacity: 0.6;
}

.theme-sunset .workbench-container {
  background-image:
    radial-gradient(
      circle at 50% 50%,
      rgba(240, 110, 50, calc(var(--glow-opacity, 0.45) * 0.62)) 0%,
      rgba(0, 0, 0, 0) 100%
    ),
    url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)' opacity='0.035'/%3E%3C/svg%3E") !important;
}

.theme-sunset .blueprint-grid {
  background-image:
    linear-gradient(to right, rgba(230, 90, 40, 0.08) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(230, 90, 40, 0.08) 1px, transparent 1px) !important;
}

.theme-sunset .canvas-watermark {
  opacity: 0.09 !important;
  text-shadow: 0 0 15px rgba(255, 68, 0, 0.2) !important;
}

.theme-sunset .brand-asset {
  filter: brightness(0.9) contrast(1.05) sepia(0.2) saturate(1.1);
}

/* Sunset: Force white text on cobalt-background cards (poster & business card front) */
.theme-sunset .poster-asset .asset-content {
  color: #fff5ee;
}

.theme-sunset .poster-asset .poster-header,
.theme-sunset .poster-asset .poster-title-block h2,
.theme-sunset .poster-asset .poster-typography-body h3,
.theme-sunset .poster-asset .poster-typography-body p,
.theme-sunset .poster-asset .coord-block span {
  color: #fff5ee !important;
}

.theme-sunset .bcard-front-asset .card-interior,
.theme-sunset .bcard-front-asset .card-logo-text,
.theme-sunset .bcard-front-asset .embossed-tagline,
.theme-sunset .bcard-front-asset .card-role,
.theme-sunset .bcard-front-asset .card-contact {
  color: #fff5ee !important;
}

.theme-sunset .bcard-front-asset .embossed-symbol {
  background-color: #fff5ee !important;
}

.theme-sunset .bcard-front-asset .card-divider {
  background-color: rgba(255, 245, 238, 0.35) !important;
}

/* Sunset: Letterhead & brochure text readability */
.theme-sunset .letterhead-asset .letter-text,
.theme-sunset .letterhead-asset .letter-recipient,
.theme-sunset .letterhead-asset .letter-subject,
.theme-sunset .letterhead-asset .letter-sign {
  color: #ffd3be !important;
}

.theme-sunset .brochure-asset .editorial-snippet h3 {
  color: #ffd3be !important;
}

/* Moonlight Theme Colors (Immersive full-screen midnight blue) */
body.theme-moonlight {
  --color-white: #080c14; /* Sidebar background */
  --color-beige: #05080d; /* Canvas background */
  --color-beige-dark: #030508; /* Dark highlights */
  --color-black: #d1e0ff; /* Primary text/border color */
  --color-grey-ui: #101726; /* Form backgrounds */
  --color-grey-border: #1d2b45; /* UI borders */
  --color-grey-text: #8fa8d6; /* Muted text */
  --color-cobalt: #00a2ff; /* Focus highlights & symbols */
  --screen-glow: #00a2ff;
  
  /* Aim Lab Moonlight Theme */
  --aim-bg: #080c14;
  --aim-grid-major: rgba(0, 162, 255, 0.15);
  --aim-grid-minor: rgba(0, 162, 255, 0.05);
  --aim-hud-bg: #05080d;
  --aim-hud-border: #1d2b45;
  --aim-text: #d1e0ff;
  --aim-text-dim: #8fa8d6;
  --aim-accent: #00a2ff;

  /* Winamp Moonlight Theme Colors */

  /* Business Card Back variables (Moonlight Theme) */
  --bcard-back-bg: #080c14;
  --bcard-back-text: #d1e0ff;
  --bcard-back-emblem: #00a2ff;
  --bcard-back-tag-bg: rgba(0, 162, 255, 0.08);
  --bcard-back-tag-border: rgba(0, 162, 255, 0.2);
  --bcard-back-divider-color: rgba(209, 224, 255, 0.15);
  --bcard-back-footer-opacity: 0.5;
}

.theme-moonlight .workbench-container {
  background-image:
    radial-gradient(
      circle at 50% 50%,
      rgba(0, 100, 255, calc(var(--glow-opacity, 0.45) * 0.4)) 0%,
      rgba(0, 0, 0, 0) 100%
    ),
    url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)' opacity='0.035'/%3E%3C/svg%3E") !important;
}

.theme-moonlight .blueprint-grid {
  background-image:
    linear-gradient(to right, rgba(0, 195, 255, 0.1) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(0, 195, 255, 0.1) 1px, transparent 1px) !important;
}

.theme-moonlight .canvas-watermark {
  opacity: 0.12 !important;
  text-shadow: 0 0 20px rgba(0, 100, 255, 0.3) !important;
}

.theme-moonlight .brand-asset {
  filter: brightness(0.82) contrast(0.98) saturate(0.82) sepia(0.08)
    hue-rotate(-15deg);
}

/* Moonlight: Force white text on cobalt-background cards (poster & business card front) */
.theme-moonlight .poster-asset .asset-content {
  color: #d1e0ff;
}

.theme-moonlight .poster-asset .poster-header,
.theme-moonlight .poster-asset .poster-title-block h2,
.theme-moonlight .poster-asset .poster-typography-body h3,
.theme-moonlight .poster-asset .poster-typography-body p,
.theme-moonlight .poster-asset .coord-block span {
  color: #d1e0ff !important;
}

.theme-moonlight .bcard-front-asset .card-interior,
.theme-moonlight .bcard-front-asset .card-logo-text,
.theme-moonlight .bcard-front-asset .embossed-tagline,
.theme-moonlight .bcard-front-asset .card-role,
.theme-moonlight .bcard-front-asset .card-contact {
  color: #d1e0ff !important;
}

.theme-moonlight .bcard-front-asset .embossed-symbol {
  background-color: #d1e0ff !important;
}

.theme-moonlight .bcard-front-asset .card-divider {
  background-color: rgba(209, 224, 255, 0.35) !important;
}

/* Moonlight: Letterhead & brochure text readability */
.theme-moonlight .letterhead-asset .letter-text,
.theme-moonlight .letterhead-asset .letter-recipient,
.theme-moonlight .letterhead-asset .letter-subject,
.theme-moonlight .letterhead-asset .letter-sign {
  color: #d1e0ff !important;
}

.theme-moonlight .brochure-asset .editorial-snippet h3 {
  color: #d1e0ff !important;
}

/* DAY / SUNSET / MOON deliberately carry no rules of their own. They used to
   restate .control-btn declaration for declaration, which changed nothing
   except that the restated `background-color: white` outranked
   `.control-btn:hover` further up the file — the three buttons had no hover at
   all. They now behave exactly like GRID and TEXTURE beside them. */

/* 2. Breakout Canvas Retro Vector Styling */
.breakout-wrapper {
  position: relative;
  overflow: hidden;
  border: 2px solid var(--color-black);
  background-color: #000000;
}
/* CRT Scanline scan emulation overlay */
.breakout-wrapper::after {
  content: " ";
  display: block;
  position: absolute;
  top: 0; left: 0; bottom: 0; right: 0;
  background: linear-gradient(rgba(18, 16, 16, 0) 50%, rgba(0, 0, 0, 0.25) 50%), linear-gradient(90deg, rgba(255, 0, 0, 0.06), rgba(0, 255, 0, 0.02), rgba(0, 0, 255, 0.06));
  z-index: 2;
  background-size: 100% 3px, 3px 100%;
  pointer-events: none;
}

/* 3. Dynamic Entrance Animations on cleared preloader */
.blueprint-grid {
  opacity: 0;
  transform: scale(1.05);
  transition: opacity 1.2s cubic-bezier(0.23, 1, 0.32, 1), transform 1.2s cubic-bezier(0.23, 1, 0.32, 1);
}
.blueprint-grid.visible {
  opacity: 1;
  transform: scale(1);
}

/* Cards flight entrance */
.brand-asset {
  opacity: 0;
  transition: opacity 0.8s cubic-bezier(0.23, 1, 0.32, 1), transform 0.8s cubic-bezier(0.23, 1, 0.32, 1), left 0.65s cubic-bezier(0.25, 1, 0.5, 1), top 0.65s cubic-bezier(0.25, 1, 0.5, 1), width 0.3s ease, height 0.3s ease;
}
.brand-asset.animated-in {
  opacity: 1;
}

/* 4. Humorous Game-Over Interactive Prompt Overlay (Swiss Geometric Design) */
.game-over-box {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 5px;
  background-color: #000000;
  border: 1.5px solid var(--color-black);
  padding: 8px 12px;
  width: 240px;
  box-sizing: border-box;
  z-index: 10;
  box-shadow: 4px 4px 0px rgba(0, 0, 0, 0.3);
}
.game-over-title {
  font-family: 'Share Tech Mono', monospace;
  font-size: 11px;
  font-weight: bold;
  color: #FF5500; /* Rich Vermillion orange */
  letter-spacing: 0.12em;
  text-transform: uppercase;
  text-align: center;
  border-bottom: 1.5px dashed rgba(255, 255, 255, 0.25);
  padding-bottom: 4px;
  margin-bottom: 2px;
}
.game-over-desc {
  font-family: 'Share Tech Mono', monospace;
  font-size: 9px;
  color: #DDDDDD; /* Light grey for high contrast readability */
  letter-spacing: 0.08em;
  text-transform: uppercase;
  text-align: center;
  margin-bottom: 4px;
  line-height: 1.25;
}
.game-over-options {
  display: flex;
  flex-direction: column;
  gap: 4px;
  width: 100%;
}
.game-mode-opt {
  font-family: 'Share Tech Mono', monospace;
  font-size: 9.5px;
  color: var(--color-white);
  background-color: transparent;
  border: 1px solid rgba(255, 255, 255, 0.25);
  padding: 4px 8px;
  cursor: pointer;
  transition: all 0.15s ease;
  text-transform: uppercase;
  text-align: left;
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  box-sizing: border-box;
  line-height: 1;
}
.game-mode-opt:hover {
  background-color: var(--color-white);
  color: var(--color-black);
  border-color: var(--color-white);
}
.game-mode-opt::after {
  content: "→";
  opacity: 0.7;
  font-size: 10px;
  transition: opacity 0.15s ease;
}
.game-mode-opt:hover::after {
  opacity: 1;
}

/* 5. Mode Reset Link inside Play Header */
.mode-reset-link {
  font-family: 'Share Tech Mono', monospace;
  font-size: 6px;
  color: #FF4400; /* Accent vermillion orange */
  cursor: pointer;
  text-decoration: underline;
  margin-right: 8px;
  font-weight: bold;
  user-select: none;
}
.mode-reset-link:hover {
  color: var(--color-black);
}

/* ==========================================================================
   MOBILE RESPONSIVENESS SYSTEM (GRID STACK)
   ========================================================================== */

/* 1. Mobile top header bar hidden by default */
.mobile-top-bar {
  display: none;
}
.sidebar-close-btn {
  display: none;
}

@media (max-width: 768px) {
  /* 2. Reset Layout to Flex Stack and Lock Document Scroll */
  html, body {
    height: 100vh !important;
    height: 100dvh !important;
    overflow: hidden !important;
  }
  .app-container {
    display: flex !important;
    flex-direction: column !important;
    height: 100vh !important;
    height: 100dvh !important;
    overflow: hidden !important;
  }

  /* 3. Mobile Header Bar Display */
  .mobile-top-bar {
    display: flex !important;
    justify-content: space-between;
    align-items: center;
    padding: 0 16px;
    background-color: var(--color-white);
    border-bottom: 1.5px solid var(--color-black);
    height: 52px;
    min-height: 52px;
    box-sizing: border-box;
    position: relative;
    z-index: 1000;
  }
  .mobile-logo-group {
    display: flex;
    align-items: center;
    gap: 8px;
  }
  .mobile-logo-group .brand-symbol {
    width: 14px;
    height: 14px;
    background-color: var(--color-cobalt);
  }
  .mobile-logo-text {
    font-family: var(--font-display);
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--color-black);
    letter-spacing: -0.5px;
  }
  .mobile-menu-toggle {
    font-family: var(--font-mono);
    font-size: 0.65rem;
    font-weight: 700;
    background-color: var(--color-white);
    border: 1px solid var(--color-black);
    padding: 5px 8px;
    color: var(--color-black);
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 5px;
    box-shadow: 1px 1px 0px rgba(0, 0, 0, 1);
  }
  .mobile-menu-toggle:active {
    box-shadow: none;
    transform: translate(1px, 1px);
  }
  .mobile-menu-toggle .status-indicator {
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background-color: #00FF66;
    display: inline-block;
  }

  /* 4. Collapsible Drawer Menu (Left Slide-in) */
  .sidebar-brand {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    bottom: 0 !important;
    width: 320px !important; /* Wider drawer to optimize touch layouts */
    max-width: 88vw !important;
    background-color: var(--color-white) !important;
    border-right: 1.5px solid var(--color-black) !important;
    border-bottom: none !important;
    z-index: 100000 !important;
    transform: translateX(-100%) !important;
    transition: transform 0.3s cubic-bezier(0.23, 1, 0.32, 1) !important;
    display: flex !important;
    flex-direction: column !important;
    overflow-y: auto !important;
    box-sizing: border-box !important;
    padding: 1.5rem 1rem !important; /* Refined paddings to maximize widget widths */
  }
  .sidebar-brand.open {
    transform: translateX(0) !important;
  }
  
  /* Sidebar Close Button */
  .sidebar-close-btn {
    display: flex !important;
    align-items: center;
    justify-content: center;
    background-color: var(--color-white) !important;
    border: 1.5px solid var(--color-black) !important;
    color: var(--color-black) !important;
    font-size: 16px !important;
    font-weight: bold !important;
    width: 28px !important;
    height: 28px !important;
    cursor: pointer;
    position: absolute;
    top: 1.2rem;
    right: 1.2rem;
    box-shadow: 1px 1px 0px rgba(0, 0, 0, 1);
    line-height: 1;
  }
  .sidebar-close-btn:active {
    box-shadow: none;
    transform: translate(1px, 1px);
  }

  /* 5. Editorial Card Grid Stack */
  .workbench-container {
    flex: 1 !important;
    height: calc(100vh - 52px) !important;
    height: calc(100dvh - 52px) !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    position: relative !important;
    background-color: var(--color-white) !important;
  }
  .workbench-viewport {
    width: 100% !important;
    height: auto !important;
    min-height: 100% !important;
    overflow-y: visible !important;
    overflow-x: hidden !important;
    position: relative !important;
  }
  .workbench {
    position: relative !important;
    left: auto !important;
    top: auto !important;
    width: 100% !important;
    height: auto !important;
    min-height: 100% !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 24px !important;
    padding: 24px 16px 180px 16px !important; /* Large padding-bottom to clear fixed footer */
    box-sizing: border-box !important;
    transform: none !important; /* Reset zoom scales */
  }

  /* 6. Dynamic Card Layout Resets */
  .brand-asset:not(.expanded):not(.collapsing) {
    position: relative !important;
    left: auto !important;
    top: auto !important;
    width: 100% !important;
    max-width: 350px !important;
    height: auto !important;
    min-height: unset !important;
    margin: 0 auto !important;
    transform: none !important;
    cursor: pointer !important; /* Visual cue for mobile single tap */
  }
  
  /* Retain specific aspect ratio proportions instead of hardcoded heights */
  .poster-asset:not(.expanded):not(.collapsing) { aspect-ratio: 350 / 530 !important; }
  .letterhead-asset:not(.expanded):not(.collapsing) { aspect-ratio: 350 / 490 !important; }
  .brochure-asset:not(.expanded):not(.collapsing) { aspect-ratio: 350 / 480 !important; }
  .bcard-front-asset:not(.expanded):not(.collapsing) { aspect-ratio: 350 / 200 !important; }
  .bcard-back-asset:not(.expanded):not(.collapsing) { aspect-ratio: 350 / 200 !important; }
  .envelope-asset:not(.expanded):not(.collapsing) { aspect-ratio: 350 / 200 !important; }

  /* 7. Interface Element Overrides */
  .zoom-controls,
  .blueprint-grid,
  .canvas-bg-text,
  .canvas-footer-tip,
  #minimap-container {
    display: none !important;
  }

  /* The floating capsule below is fixed, so without this the last card ends
     underneath it and those pixels can never be scrolled into view — measured
     at 111px of the process card on a 390x844 screen. */
  #workbench {
    padding-bottom: 130px;
  }

  /* 8. Premium Mobile Typographic Footer Stack (Floating Capsule Design) */
  .app-footer {
    position: fixed !important;
    bottom: 16px !important;
    left: 16px !important;
    width: calc(100% - 32px) !important;
    z-index: 10000 !important; /* Float on top of cards scroll */
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    height: auto !important;
    padding: 10px 14px !important; /* Extremely compact layout */
    gap: 6px !important;
    text-align: center !important;
    border: 1.5px solid var(--color-black) !important;
    border-radius: 4px !important;
    background-color: var(--color-white) !important;
    box-sizing: border-box !important;
    box-shadow: 4px 4px 0px rgba(0, 0, 0, 1) !important; /* Retro Bauhaus drop shadow */
  }
  .footer-left,
  .footer-center,
  .footer-right {
    width: 100% !important;
    display: flex !important;
    justify-content: center !important;
    text-align: center !important;
  }
  .branding-credits {
    flex-direction: column !important;
    gap: 6px !important;
    align-items: center !important;
  }
  .footer-right {
    gap: 20px !important;
  }

  /* Mobile Brochure Card Stacking & Scrollability */
  .brochure-asset .asset-content {
    grid-template-columns: 1fr !important;
  }
  .brochure-asset .asset-content::after {
    display: none !important;
  }
  .brochure-page.left-page {
    border-right: none !important;
    border-bottom: 1.5px dashed var(--color-grey-border) !important;
  }
  
  .brochure-asset.expanded {
    position: fixed !important;
    left: 16px !important;
    top: 50% !important;
    width: calc(100% - 32px) !important;
    height: 80vh !important;
    transform: translateY(-50%) !important;
  }
  .brochure-asset.expanded .asset-content {
    height: 100% !important;
    overflow-y: auto !important;
    box-shadow: 4px 4px 0px rgba(0, 0, 0, 1) !important;
  }

  /* Custom overrides for mobile layout */
  .layout-config-section {
    display: none !important;
  }
  .sidebar-header-top {
    padding-right: 40px !important;
  }

  /* Prevent expanded cards content from cutting off on mobile */
  .brand-asset.expanded .asset-content {
    overflow-y: auto !important;
  }

  /* Stationery Letterhead mobile optimizations */
  .letterhead-asset .asset-content {
    padding: 1.5rem 1.2rem !important;
  }
  .letterhead-body {
    margin: 0.6rem 0 !important;
    gap: 0.4rem !important;
  }
  .letter-text p {
    margin-bottom: 0.3rem !important;
  }
  .letter-sign {
    margin-top: 0.5rem !important;
  }
}

/* ==========================================================================
   CHROME WEB STORE BADGE & LINK STYLING
   ========================================================================== */
.chrome-store-link {
  display: inline-block;
  text-decoration: none;
  color: inherit;
  margin-top: 0.15rem;
  margin-bottom: 0.15rem;
}

.chrome-store-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  font-family: var(--font-mono, monospace);
  font-size: 0.52rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: var(--color-black, #111);
  background: rgba(0, 47, 167, 0.06);
  border: 1px solid var(--color-cobalt, #002fa7);
  padding: 0.18rem 0.45rem;
  border-radius: 3px;
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
}

.chrome-store-link:hover .chrome-store-badge {
  background: var(--color-cobalt, #002fa7);
  color: #ffffff;
  transform: translateY(-1px);
  box-shadow: 0 3px 6px rgba(0, 47, 167, 0.25);
}

.chrome-icon {
  flex-shrink: 0;
  transition: transform 0.2s ease;
}

.chrome-store-link:hover .chrome-icon {
  transform: rotate(30deg);
}

/* ==========================================================================
   LANGUAGE SWITCHER STYLING (TR / EN)
   ========================================================================== */
.sidebar-header-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 0.2rem;
}

.lang-switch-capsule {
  display: inline-flex;
  align-items: center;
  gap: 0.15rem;
  background-color: var(--color-white);
  border: 1px solid var(--color-black);
  padding: 2px 5px;
  font-family: var(--font-mono, monospace);
  font-size: 0.6rem;
  font-weight: 700;
  box-shadow: 1px 1px 0px rgba(0, 0, 0, 1);
}

.lang-btn {
  background: transparent;
  border: none;
  color: var(--color-grey-text);
  font-family: inherit;
  font-size: inherit;
  font-weight: 700;
  cursor: pointer;
  padding: 1px 3px;
  transition: all 0.2s ease;
  line-height: 1;
}

.lang-btn:hover {
  color: var(--color-cobalt);
}

.lang-btn.active {
  color: var(--color-black);
  background-color: rgba(0, 65, 255, 0.1);
}

.lang-sep {
  color: var(--color-grey-border);
  font-size: 0.65rem;
}

.mobile-lang-switch {
  margin-left: 0.4rem;
}

/* ==========================================================================
   BROCHURE LINK BADGE STYLING (UNIFORM MONO SWISS TAGS)
   ========================================================================== */
.brochure-link-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  font-family: var(--font-mono, monospace);
  font-size: 0.46rem;
  font-weight: 600;
  letter-spacing: 0.03em;
  color: var(--color-black, #000);
  background-color: var(--bcard-back-tag-bg, rgba(0, 0, 0, 0.04));
  border: 1px solid var(--bcard-back-tag-border, rgba(0, 0, 0, 0.15));
  padding: 0.12rem 0.4rem;
  border-radius: 2px;
  text-decoration: none;
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
  margin-top: 0.15rem;
  margin-bottom: 0.15rem;
  line-height: 1;
}

.brochure-link-badge:hover {
  background-color: var(--color-black, #000);
  color: var(--color-white, #fff);
  border-color: var(--color-black, #000);
  transform: translateY(-1px);
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.15);
}

.theme-sunset .brochure-link-badge {
  color: #ffd3be;
  background-color: rgba(255, 211, 190, 0.08);
  border-color: rgba(255, 211, 190, 0.25);
}

.theme-sunset .brochure-link-badge:hover {
  background-color: #ff4400;
  color: #ffffff;
  border-color: #ff4400;
}

.theme-moonlight .brochure-link-badge {
  color: #d1e0ff;
  background-color: rgba(0, 162, 255, 0.08);
  border-color: rgba(0, 162, 255, 0.25);
}

.theme-moonlight .brochure-link-badge:hover {
  background-color: #00a2ff;
  color: #ffffff;
  border-color: #00a2ff;
}

/* ==========================================================================
   SWISS LUDO (KIZMA BİRADER) OFFICE LOUNGE STYLES
   ========================================================================== */
.ludo-modal-overlay {
  position: fixed;
  inset: 0;
  z-index: 999999;
  background: rgba(0, 0, 0, 0.75);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1.5rem;
  overflow-y: auto;
}

.ludo-modal-card {
  position: relative;
  background: #ffffff;
  border: 2.5px solid #000000;
  box-shadow: 10px 10px 0px #000000;
  width: 100%;
  max-width: 480px;
  max-height: 90vh;
  overflow: visible;
  padding: 2.5rem 2rem;
  box-sizing: border-box;
  margin: auto;
  transition: max-width 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

/* --arena-vh is the vertical budget the board may spend. The card itself stays
   height:auto so it shrink-wraps the board instead of leaving dead space below
   it — the board grows, the card follows, nothing is padded out. */
.ludo-modal-card.is-expanded-arena {
  --arena-vh: 94vh;
  max-width: min(1440px, 96vw) !important;
  width: 100%;
  height: auto;
  max-height: 94vh;
  padding: 1.5rem !important;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.ludo-modal-card.is-expanded-arena .ludo-screen {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  min-height: 0;
}

/* True fullscreen: the browser paints the backdrop, so the card drops its
   floating-panel treatment and uses the whole surface. Raising --arena-vh is
   what actually makes the board bigger here. */
.ludo-modal-card:fullscreen {
  --arena-vh: 100vh;
  max-width: none !important;
  width: 100%;
  height: 100%;
  max-height: none;
  border: none;
  box-shadow: none;
  padding: 1.5rem !important;
  background: #ffffff;
}

.ludo-modal-close {
  position: absolute;
  top: 1.25rem;
  right: 1.25rem;
  background: #000000;
  color: #ffffff;
  border: 2px solid #000000;
  width: 32px;
  height: 32px;
  font-size: 1.1rem;
  font-weight: 800;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.15s ease;
  line-height: 1;
}

.ludo-modal-close:hover {
  background: #ff3d00;
  border-color: #ff3d00;
  transform: scale(1.08);
}

.ludo-brand {
  text-align: center;
  margin-bottom: 1.75rem;
}

.ludo-icon-badge {
  font-size: 2.75rem;
  margin-bottom: 0.5rem;
  line-height: 1;
}

.ludo-title {
  font-family: var(--font-display);
  font-size: 1.75rem;
  font-weight: 800;
  margin: 0;
  letter-spacing: 1.5px;
  line-height: 1.2;
}

.ludo-sub {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  color: #666666;
  font-weight: 700;
  margin-top: 0.35rem;
  letter-spacing: 0.5px;
}

.ludo-passcode-box {
  width: 100%;
  max-width: 380px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
  text-align: left;
}

.ludo-passcode-box label {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 1px;
  color: #000000;
  text-transform: uppercase;
}

.ludo-passcode-box input {
  width: 100%;
  box-sizing: border-box;
  padding: 0.85rem 1rem;
  font-family: var(--font-mono);
  font-size: 1.1rem;
  font-weight: 700;
  letter-spacing: 2px;
  border: 2px solid #000000;
  box-shadow: 3px 3px 0px #000000;
  outline: none;
  background: #ffffff;
  transition: all 0.15s ease;
}

.ludo-passcode-box input:focus {
  border-color: #0041ff;
  box-shadow: 4px 4px 0px #0041ff;
}

.ludo-unlock-btn {
  width: 100%;
  height: 48px;
  background: #000000 !important;
  color: #ffffff !important;
  border: 2px solid #000000 !important;
  box-shadow: 4px 4px 0px #0041ff !important;
  font-family: var(--font-display);
  font-size: 0.9rem;
  font-weight: 800;
  letter-spacing: 1px;
  text-transform: uppercase;
  cursor: pointer;
  margin-top: 0.5rem;
  transition: all 0.15s ease;
  display: flex;
  align-items: center;
  justify-content: center;
}

.ludo-unlock-btn:hover {
  background: #0041ff !important;
  color: #ffffff !important;
  box-shadow: 6px 6px 0px #000000 !important;
  transform: translate(-2px, -2px);
}

.ludo-unlock-btn:active {
  transform: translate(0, 0);
  box-shadow: 2px 2px 0px #000000 !important;
}

.ludo-error-msg {
  color: #ff3d00;
  font-family: var(--font-mono);
  font-size: 0.8rem;
  font-weight: 700;
  min-height: 1.2rem;
}

.ludo-footer-note {
  margin-top: 2rem;
  text-align: center;
  font-family: var(--font-mono);
  font-size: 0.7rem;
  color: #888;
}

.slot-claim-btn {
  width: 100%;
  height: 40px;
  background: #10b981 !important;
  color: #ffffff !important;
  border: 2px solid #000000 !important;
  box-shadow: 3px 3px 0px #000000 !important;
  font-family: var(--font-display);
  font-size: 0.82rem;
  font-weight: 800;
  cursor: pointer;
  transition: all 0.15s ease;
}

.slot-claim-btn:hover {
  background: #059669 !important;
  transform: translate(-1px, -1px);
  box-shadow: 4px 4px 0px #000000 !important;
}

/* Quiet on purpose. Leaving the table is the rare, destructive path; when it
   was a solid red block it out-shouted the button people actually needed. */
.slot-leave-btn {
  width: 100%;
  height: 30px;
  margin-top: 0.45rem;
  background: transparent !important;
  color: #6b7280 !important;
  border: 0 !important;
  box-shadow: none !important;
  font-family: var(--font-mono);
  font-size: 0.68rem;
  font-weight: 700;
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
  padding: 0;
}

.slot-leave-btn:hover {
  color: #ef4444 !important;
}

.slot-bot-toggle-btn {
  background: #ffffff;
  border: 1.5px solid #000000;
  font-family: var(--font-mono);
  font-size: 0.65rem;
  font-weight: 800;
  padding: 2px 6px;
  cursor: pointer;
}

.my-name-input {
  border-color: #0041ff !important;
  box-shadow: 2px 2px 0px #0041ff !important;
  background: #eff6ff !important;
}

/* ─── Ludo Arena Header & Nav ─────────────────────────────────────── */
.ludo-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-bottom: 1rem;
  margin-bottom: 1.25rem;
  border-bottom: 2.5px solid #000000;
  padding-right: 0 !important; /* Managed cleanly via flexbox actions */
  flex-wrap: wrap;
  gap: 0.75rem;
}

.ludo-header-left {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.ludo-badge {
  background: #000000;
  color: #ffffff;
  font-family: var(--font-display);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.5px;
  padding: 5px 10px;
  text-transform: uppercase;
}

.ludo-turn-pill {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 4px 12px;
  border: 2px solid #000000;
  font-family: var(--font-display);
  font-size: 0.82rem;
  font-weight: 700;
  letter-spacing: -0.01em;
  background: #ffffff;
  box-shadow: 3px 3px 0px #000000;
  transition: all 0.2s ease;
}

.ludo-turn-pill .turn-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #ff3d00;
  box-shadow: 0 0 6px rgba(255, 61, 0, 0.8);
  animation: pulseDot 1.5s infinite;
}

.ludo-turn-pill.p-red .turn-dot { background: #ff3d00; box-shadow: 0 0 6px rgba(255,61,0,0.8); }
.ludo-turn-pill.p-blue .turn-dot { background: #0041ff; box-shadow: 0 0 6px rgba(0,65,255,0.8); }
.ludo-turn-pill.p-green .turn-dot { background: #10b981; box-shadow: 0 0 6px rgba(16,185,129,0.8); }
.ludo-turn-pill.p-yellow .turn-dot { background: #f59e0b; box-shadow: 0 0 6px rgba(245,158,11,0.8); }

@keyframes pulseDot {
  0% { transform: scale(0.85); opacity: 0.7; }
  50% { transform: scale(1.3); opacity: 1; }
  100% { transform: scale(0.85); opacity: 0.7; }
}

.ludo-modal-card.is-expanded-arena > .ludo-modal-close {
  display: none !important;
}

.ludo-header-right,
.ludo-header-actions {
  display: flex !important;
  align-items: center !important;
  gap: 0.5rem !important;
  margin-right: 0 !important;
}

.ludo-header-btn,
.ludo-arena-btn {
  height: 32px !important;
  padding: 0 12px !important;
  font-family: var(--font-display) !important;
  font-size: 0.72rem !important;
  font-weight: 700 !important;
  letter-spacing: 0.5px !important;
  text-transform: uppercase !important;
  background: #ffffff !important;
  color: #000000 !important;
  border: 1.5px solid #000000 !important;
  box-shadow: 2px 2px 0px #000000 !important;
  cursor: pointer !important;
  transition: all 0.15s ease !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  white-space: nowrap !important;
  line-height: 1 !important;
}

.ludo-header-btn:hover,
.ludo-arena-btn:hover {
  background: #f4f4f6 !important;
  transform: translate(-1px, -1px) !important;
  box-shadow: 3px 3px 0px #000000 !important;
}

.ludo-header-btn-primary,
.ludo-arena-btn-primary {
  background: #000000 !important;
  color: #ffffff !important;
}

.ludo-header-btn-primary:hover,
.ludo-arena-btn-primary:hover {
  background: #0041ff !important;
  color: #ffffff !important;
}

.ludo-modal-close-inline {
  width: 32px !important;
  height: 32px !important;
  padding: 0 !important;
  background: #000000 !important;
  color: #ffffff !important;
  border: 1.5px solid #000000 !important;
  box-shadow: 2px 2px 0px #000000 !important;
  font-family: var(--font-display) !important;
  font-size: 1.1rem !important;
  font-weight: 800 !important;
  cursor: pointer !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  transition: all 0.15s ease !important;
  line-height: 1 !important;
}

.ludo-modal-close-inline:hover {
  background: #ff3d00 !important;
  border-color: #ff3d00 !important;
  color: #ffffff !important;
  transform: translate(-1px, -1px) !important;
  box-shadow: 3px 3px 0px #000000 !important;
}

/* ─── Ludo Arena Main Layout & Controls Panel ─────────────────────── */
/* The board is the subject of this screen, so it takes the free space and the
   control panel is the fixed column. It used to be the other way round, which
   left the dice panel wider than the game itself. */
.ludo-main-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 320px;
  gap: 1.25rem;
  align-items: stretch;
  flex: 1 1 auto;
  min-height: 0;
}

/* Centres the square board inside whatever rectangle is left over. */
.ludo-board-wrap {
  background: #3d2a18;
  padding: 10px;
  border: 2.5px solid #000000;
  box-shadow: 6px 6px 0px #000000;
  display: grid;
  place-items: center;
  min-width: 0;
  min-height: 0;
}

/* 15×15 token grid over a single SVG of the wooden Kızma Birader board.
   The art is the game; the cells are invisible seats for pawns. */
.ludo-board {
  display: grid !important;
  grid-template-columns: repeat(15, 1fr) !important;
  grid-template-rows: repeat(15, 1fr) !important;
  gap: 0;
  background: #c9a36e;
  border: 3px solid #2a1608;
  aspect-ratio: 1;
  width: min(100%, calc(var(--arena-vh, 94vh) - 150px));
  height: auto;
  max-width: 100%;
  position: relative;
  overflow: hidden;
}

.ludo-board-art {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
  pointer-events: none;
}

.l-cell {
  background: transparent;
  border: none;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: visible;
  position: relative;
  z-index: 1;
  box-sizing: border-box;
  padding: 0;
}

.ludo-rules-strip {
  border: 1.5px solid #000;
  background: #f7f1e8;
  padding: 0.7rem 0.8rem 0.75rem;
  margin-bottom: 0.15rem;
}

.ludo-rules-title {
  font-family: var(--font-display);
  font-size: 0.65rem;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  margin-bottom: 0.4rem;
  color: #111;
}

.ludo-rules-strip ul {
  margin: 0;
  padding-left: 1.05rem;
  display: flex;
  flex-direction: column;
  gap: 0.28rem;
}

.ludo-rules-strip li {
  font-family: var(--font-body);
  font-size: 0.68rem;
  font-weight: 600;
  line-height: 1.35;
  color: #333;
}

/* Single Unified Swiss Control Sidebar Card */
/* Now that the arena is height-bound, the panel scrolls internally instead of
   pushing the board out of view. */
.ludo-sidebar-dashboard {
  background: #ffffff;
  border: 2.5px solid #000000;
  box-shadow: 6px 6px 0px #000000;
  display: flex;
  flex-direction: column;
  overflow-y: auto;
  overflow-x: hidden;
  min-height: 0;
  scrollbar-width: thin;
}

.ludo-dice-hero {
  background: #f8f9fa;
  padding: 1.25rem;
  text-align: center;
  border-bottom: 2px solid #000000;
}

.ludo-event-ticker {
  background: #eff6ff;
  border-bottom: 2px solid #000000;
  padding: 0.75rem 1rem;
  font-family: var(--font-body);
  font-size: 0.82rem;
  font-weight: 600;
  color: #0041ff;
  text-align: center;
  min-height: 42px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.ludo-sidebar-leaderboard {
  padding: 1.25rem;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  background: #ffffff;
}

.leaderboard-header {
  font-family: var(--font-display);
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 1px;
  color: #555555;
  border-bottom: 1px solid #e5e5e5;
  padding-bottom: 0.4rem;
  text-transform: uppercase;
}

.ludo-players-list {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}

.ludo-player-pill {
  font-family: var(--font-body);
  font-size: 0.8rem;
  font-weight: 700;
  padding: 0.5rem 0.75rem;
  border: 1.5px solid #000;
  background: #f8f9fa;
  display: flex;
  align-items: center;
  justify-content: space-between;
  transition: all 0.2s ease;
  position: relative;
}

.ludo-player-pill.active {
  background: #000000;
  color: #ffffff;
  box-shadow: 3px 3px 0px #0041ff;
  border-color: #000000;
}

.ludo-player-pill .p-dot {
  font-size: 0.9rem;
  margin-right: 0.4rem;
}

.ludo-player-pill .p-name {
  flex-grow: 1;
}

.ludo-player-pill .p-score {
  font-size: 0.72rem;
  opacity: 0.9;
}

/* Seat status: bot, dropped connection, or your own seat. Set as a mono
   micro-label so the leaderboard reads as a data table, not a game HUD. */
.ludo-player-pill .p-tag {
  font-family: var(--font-mono);
  font-size: 0.55rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  padding: 0.15rem 0.3rem;
  margin-left: 0.4rem;
  border: 1px solid currentColor;
  line-height: 1;
  white-space: nowrap;
}

.ludo-player-pill .p-tag:empty {
  display: none;
}

.ludo-player-pill.is-me .p-tag {
  background: #0041ff;
  border-color: #0041ff;
  color: #ffffff;
}

.ludo-player-pill.is-bot {
  background: repeating-linear-gradient(
    -45deg,
    #f8f9fa,
    #f8f9fa 5px,
    #eef0f2 5px,
    #eef0f2 10px
  );
}

.ludo-player-pill.is-bot.active {
  background: #000000;
}

/* A disconnected seat is dimmed but never hidden — the table has to explain
   itself when a turn appears to stall. */
.ludo-player-pill.is-offline {
  opacity: 0.55;
  border-style: dashed;
}

.ludo-player-pill.is-offline .p-tag {
  background: #ff3d00;
  border-color: #ff3d00;
  color: #ffffff;
}

@media (prefers-reduced-motion: reduce) {
  .ludo-player-pill {
    transition: none;
  }
}

/* Quick Emotes Reactions Bar inside Leaderboard Card */
.ludo-emotes-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-top: 0.5rem;
  border-top: 1.5px dashed #e0e0e0;
}

.emote-btn {
  background: #ffffff;
  border: 1.5px solid #000000;
  border-radius: 6px;
  width: 34px;
  height: 34px;
  font-size: 1.1rem;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 2px 2px 0px #000000;
  transition: all 0.15s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.emote-btn:hover {
  transform: scale(1.18) translateY(-2px);
  box-shadow: 3px 3px 0px #0041ff;
  background: #eff6ff;
}

.emote-btn:active {
  transform: scale(0.95);
  box-shadow: none;
}

.ludo-fullscreen-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
}

.ludo-fullscreen-btn.is-active {
  background: #0041ff;
  color: #ffffff;
  border-color: #0041ff;
}

/* Below this the two columns cannot both be useful, so the board goes on top
   and the panel stacks beneath it at natural height. */
@media (max-width: 900px) {
  .ludo-main-layout {
    grid-template-columns: 1fr;
    grid-template-rows: auto auto;
  }

  .ludo-modal-card.is-expanded-arena {
    overflow-y: auto;
  }

  /* Stacked layout: the board takes the full column and the page scrolls,
     rather than being squeezed by a vertical budget it no longer shares. */
  .ludo-board {
    width: 100%;
  }

  .ludo-sidebar-dashboard {
    overflow: visible;
  }

  .ludo-fullscreen-btn .fs-label {
    display: none;
  }
}

/* ==========================================================================
   101 OKEY PLUS LOBBY & SLOT STYLES
   ========================================================================== */
.ludo-lobby-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1.25rem;
}

.ludo-slot-card {
  background: #ffffff;
  border: 2px solid #000;
  box-shadow: 4px 4px 0px #000;
  padding: 1.25rem;
  border-radius: 4px;
}

.p-slot-red { border-top: 6px solid #ff3d00; }
.p-slot-blue { border-top: 6px solid #0041ff; }
.p-slot-green { border-top: 6px solid #10b981; }
.p-slot-yellow { border-top: 6px solid #f59e0b; }

.slot-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 0.5rem;
}

.slot-badge {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  font-weight: 800;
}

.slot-type-select {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  font-weight: 800;
  padding: 2px 6px;
  border: 1.5px solid #000;
  background: #f8f9fa;
  cursor: pointer;
}

.slot-name-input {
  width: 100%;
  padding: 0.5rem 0.75rem;
  font-family: var(--font-mono);
  font-size: 0.9rem;
  font-weight: 700;
  border: 1.5px solid #000;
  box-shadow: 2px 2px 0px #000;
  outline: none;
  box-sizing: border-box;
}

/* The one thing a seated player is meant to press, so it looks like the primary
   action rather than a status read-out. */
.slot-ready-btn {
  width: 100%;
  height: 42px;
  font-family: var(--font-display);
  font-size: 0.82rem;
  font-weight: 800;
  letter-spacing: 0.5px;
  border: 2px solid #000;
  background: #0041ff;
  color: #ffffff;
  cursor: pointer;
  box-shadow: 3px 3px 0px #000;
  transition: transform 0.12s ease, box-shadow 0.12s ease, background 0.15s ease;
}

.slot-ready-btn:hover:not(:disabled) {
  transform: translate(-1px, -1px);
  box-shadow: 4px 4px 0px #000;
}

/* Pressed-in look once you are ready: same size and place, so confirming does
   not shift the card, but unmistakably "on". */
.slot-ready-btn.is-ready {
  background: #10b981;
  color: #ffffff;
  box-shadow: inset 2px 2px 0px rgba(0, 0, 0, 0.35);
  transform: translate(1px, 1px);
}

.slot-ready-btn.is-ready:hover {
  background: #059669;
  transform: translate(1px, 1px);
  box-shadow: inset 2px 2px 0px rgba(0, 0, 0, 0.35);
}

.slot-ready-hint {
  margin: 0.35rem 0 0;
  font-family: var(--font-mono);
  font-size: 0.62rem;
  line-height: 1.3;
  color: #6b7280;
  text-align: center;
}

/* Readiness badge carried by every card, seated or not. */
.slot-state {
  margin-left: auto;
  margin-right: 0.5rem;
  padding: 0.15rem 0.45rem;
  font-family: var(--font-mono);
  font-size: 0.6rem;
  font-weight: 800;
  letter-spacing: 0.5px;
  border: 1.5px solid currentColor;
  white-space: nowrap;
}

/* Host controls. Destructive, so they read as an outlined warning rather than a
   filled button competing with the seat's own actions. */
.slot-kick-btn {
  width: 100%;
  height: 34px;
  margin-top: 0.5rem;
  background: #fff !important;
  color: #b91c1c !important;
  border: 2px solid #b91c1c !important;
  box-shadow: 2px 2px 0 #b91c1c !important;
  font-family: var(--font-mono);
  font-size: 0.68rem;
  font-weight: 800;
  cursor: pointer;
}

.slot-kick-btn:hover {
  background: #b91c1c !important;
  color: #fff !important;
}

.pill-kick-btn {
  margin-left: 0.4rem;
  padding: 0 0.3rem;
  background: transparent;
  border: 1.5px solid #b91c1c;
  color: #b91c1c;
  font-size: 0.7rem;
  line-height: 1.4;
  cursor: pointer;
}

.pill-kick-btn:hover { background: #b91c1c; color: #fff; }
.pill-kick-btn[hidden] { display: none; }

.ludo-host-badge {
  display: inline-block;
  margin-left: 0.5rem;
  padding: 0.1rem 0.4rem;
  font-family: var(--font-mono);
  font-size: 0.6rem;
  font-weight: 800;
  letter-spacing: 0.5px;
  color: #7c3aed;
  background: #f5f3ff;
  border: 1.5px solid #7c3aed;
}

/* `display: inline-block` above outranks the user agent's [hidden] rule, so
   without this the badge stayed on screen for every player. */
.ludo-host-badge[hidden] { display: none; }

.slot-state.is-ready   { color: #0f7a52; background: #e8f5e9; }
.slot-state.is-waiting { color: #b45309; background: #fff7ed; }
.slot-state.is-bot     { color: #0041ff; background: #e3f2fd; }
.slot-state.is-empty   { color: #6b7280; background: #f3f4f6; }

.ludo-start-match-btn {
  height: 50px;
  background: #000000 !important;
  color: #ffffff !important;
  border: 2px solid #000000 !important;
  box-shadow: 4px 4px 0px #888888 !important;
  font-family: var(--font-display);
  font-size: 0.95rem;
  font-weight: 800;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  cursor: not-allowed;
  opacity: 0.55;
  transition: all 0.15s ease;
  width: 100%;
  max-width: 440px;
  margin: 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.ludo-start-match-btn.is-active-launch {
  opacity: 1 !important;
  cursor: pointer !important;
  box-shadow: 4px 4px 0px #10b981 !important;
}

.ludo-start-match-btn.is-active-launch:hover {
  background: #10b981 !important;
  color: #ffffff !important;
  box-shadow: 6px 6px 0px #000000 !important;
  transform: translate(-2px, -2px);
}

@media (max-width: 640px) {
  .ludo-lobby-grid {
    grid-template-columns: 1fr;
  }
}

/* ==========================================================================
   BOARD TOKEN RENDERING & PULSE ANIMATIONS
   ========================================================================== */
/* The full .board-token-icon rule lives with the pawn styles further down;
   only the shared, non-layout bits belong here. */
.board-token-icon {
  user-select: none;
}

/* Lift while a pawn travels. Kept modest and percentage-based so the piece
   reads as raised without leaving its square. */
.token-hopping {
  transform: translateY(-16%) scale(1.18) !important;
  z-index: 99 !important;
  transition: transform 0.15s cubic-bezier(0.175, 0.885, 0.32, 1.275) !important;
}

.token-hopping svg {
  filter:
    drop-shadow(0 0 1px rgba(20, 10, 4, 0.85))
    drop-shadow(0 4px 5px rgba(0, 0, 0, 0.35));
}

/* Header Action Buttons in Ludo Arena */
.ludo-header-btn {
  padding: 0.4rem 0.85rem;
  font-family: var(--font-mono);
  font-size: 0.72rem;
  font-weight: 800;
  border: 1.5px solid #000000;
  background: #ffffff;
  color: #000000;
  box-shadow: 2.5px 2.5px 0px #000000;
  cursor: pointer;
  transition: all 0.15s ease;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.ludo-header-btn:hover {
  background: #0041ff;
  color: #ffffff;
  box-shadow: 3.5px 3.5px 0px #000000;
  transform: translate(-1px, -1px);
}

.ludo-header-btn-primary {
  background: #000000;
  color: #ffffff;
  box-shadow: 2.5px 2.5px 0px #0041ff;
}

.ludo-header-btn-primary:hover {
  background: #0041ff;
  color: #ffffff;
  box-shadow: 3.5px 3.5px 0px #000000;
}

.ludo-roll-btn {
  width: 100%;
  height: 46px;
  background: #000000 !important;
  color: #ffffff !important;
  border: 2px solid #000000 !important;
  box-shadow: 4px 4px 0px #0041ff !important;
  font-family: var(--font-display);
  font-size: 0.9rem;
  font-weight: 800;
  letter-spacing: 1px;
  text-transform: uppercase;
  cursor: pointer;
  margin-top: 0.5rem;
  transition: all 0.15s ease;
  display: flex;
  align-items: center;
  justify-content: center;
}

.ludo-roll-btn:hover:not(:disabled) {
  background: #0041ff !important;
  color: #ffffff !important;
  box-shadow: 6px 6px 0px #000000 !important;
  transform: translate(-2px, -2px);
}

/* Press collapses the offset shadow so the button physically sinks into the
   page. Hover alone gave no confirmation that a click actually landed. */
.ludo-roll-btn:active:not(:disabled) {
  background: #0041ff !important;
  color: #ffffff !important;
  box-shadow: 0px 0px 0px #000000 !important;
  transform: translate(4px, 4px);
  transition-duration: 0.04s;
}

.ludo-roll-btn:focus-visible {
  outline: 3px solid #0041ff;
  outline-offset: 3px;
}

.ludo-roll-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
  box-shadow: 2px 2px 0px rgba(0, 0, 0, 0.35) !important;
}

@media (prefers-reduced-motion: reduce) {
  .ludo-roll-btn {
    transition: none;
  }
}

.ludo-dice-val {
  font-family: var(--font-display);
  font-size: 0.85rem;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: #111111;
  margin-top: 0.5rem;
  text-transform: uppercase;
}

/* ==========================================================================
   PURE 3D CSS CUBE DICE ENGINE — UX BEST PRACTICE
   ========================================================================== */

/* Scene: perspective container. No overflow, no transform, no filter on this! */
.dice-3d-scene {
  width: 100px;
  height: 100px;
  perspective: 600px;
  perspective-origin: 50% 42%;
  margin: 0.75rem auto 1rem auto;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Cube: the rotating element */
.dice-3d-cube {
  width: 56px;
  height: 56px;
  position: relative;
  transform-style: preserve-3d;
  transition: transform 0.85s cubic-bezier(0.22, 0.61, 0.36, 1);
  /* Start showing face-1 */
  transform: rotateX(0deg) rotateY(0deg);
}

/* Each face: positioned absolutely, transparent shell */
.cube-face {
  position: absolute;
  width: 56px;
  height: 56px;
  background: transparent;
  border: none;
  border-radius: 0;
  box-shadow: none;
  display: flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  padding: 0;
  /* DO NOT use backface-visibility: hidden — it causes faces to vanish mid-rotation */
}

/* Face inner: all visual styling here (border-radius, bg, shadows) */
.face-inner {
  width: 100%;
  height: 100%;
  background: linear-gradient(145deg, #ffffff 0%, #f5f3ee 100%);
  border-radius: 8px;
  border: 1.5px solid rgba(0,0,0,0.12);
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(3, 1fr);
  padding: 6px;
  box-sizing: border-box;
  box-shadow:
    inset 0 2px 4px rgba(255,255,255,0.95),
    inset 0 -2px 3px rgba(0,0,0,0.06),
    0 1px 3px rgba(0,0,0,0.1);
  place-items: center;
}

/* Face transforms — translateZ = half of cube width (56/2 = 28) */
.cube-face.face-1 { transform: rotateY(0deg)    translateZ(28px); }
.cube-face.face-2 { transform: rotateY(180deg)  translateZ(28px); }
.cube-face.face-3 { transform: rotateY(-90deg)  translateZ(28px); }
.cube-face.face-4 { transform: rotateY(90deg)   translateZ(28px); }
.cube-face.face-5 { transform: rotateX(-90deg)  translateZ(28px); }
.cube-face.face-6 { transform: rotateX(90deg)   translateZ(28px); }

/* --- Pips (Dots) --- */
.cube-face .pip {
  display: block;
  width: 10px;
  height: 10px;
  background: radial-gradient(circle at 35% 35%, #444 0%, #111 100%);
  border-radius: 50%;
  box-shadow:
    inset 0 -1px 1px rgba(255,255,255,0.15),
    0 1px 2px rgba(0,0,0,0.3);
  margin: 0;
}

/* Grid Pip Coordinates */
.pip.p1 { grid-area: 1 / 1; }
.pip.p2 { grid-area: 1 / 2; }
.pip.p3 { grid-area: 1 / 3; }
.pip.p4 { grid-area: 2 / 1; }
.pip.p5 { grid-area: 2 / 2; }
.pip.p6 { grid-area: 2 / 3; }
.pip.p7 { grid-area: 3 / 1; }
.pip.p8 { grid-area: 3 / 2; }
.pip.p9 { grid-area: 3 / 3; }

/* Face 1: Red Center Pip */
.cube-face.face-1 .pip.p5 {
  width: 13px;
  height: 13px;
  background: radial-gradient(circle at 35% 35%, #ff4438 0%, #c62828 100%);
  box-shadow:
    inset 0 -1px 2px rgba(255,255,255,0.2),
    0 1px 4px rgba(198,40,40,0.5);
}

/* --- Rolling Animation --- */
.dice-3d-scene.rolling .dice-3d-cube {
  transition: transform 0.85s cubic-bezier(0.22, 0.61, 0.36, 1);
}

/* --- Shadow under dice --- */
.dice-shadow {
  position: absolute;
  bottom: -12px;
  left: 50%;
  transform: translateX(-50%);
  width: 48px;
  height: 8px;
  background: rgba(0,0,0,0.18);
  border-radius: 50%;
  filter: blur(4px);
  transition: all 0.85s ease;
  pointer-events: none;
}

/* Floating Emote Reaction Bubble Animation */
.floating-emote-bubble {
  position: absolute;
  top: -24px;
  right: 12px;
  font-size: 1.8rem;
  pointer-events: none;
  z-index: 999;
  animation: floatEmote 1.8s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards;
  filter: drop-shadow(0 2px 5px rgba(0, 0, 0, 0.3));
}

@keyframes floatEmote {
  0% {
    transform: translateY(10px) scale(0.3);
    opacity: 0;
  }
  20% {
    transform: translateY(-8px) scale(1.3);
    opacity: 1;
  }
  75% {
    transform: translateY(-28px) scale(1.1);
    opacity: 1;
  }
  100% {
    transform: translateY(-45px) scale(0.7);
    opacity: 0;
  }
}

/* ==========================================================================
   10/10 COMMERCIAL LUDO ENGINE ENHANCEMENTS
   ========================================================================== */

/* 25-Second Turn Countdown Progress Bar */
.turn-timer-container {
  width: 100%;
  height: 6px;
  background: rgba(0, 0, 0, 0.1);
  border-radius: 3px;
  overflow: hidden;
  margin: 0.5rem 0 1rem 0;
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.2);
}

.turn-timer-bar {
  height: 100%;
  width: 100%;
  background: linear-gradient(90deg, #10b981, #f59e0b, #ef4444);
  background-size: 200% 100%;
  transform-origin: left center;
  transition: transform 25s linear;
}

.turn-timer-bar.is-active {
  transform: scaleX(0);
}

/* Quick Emote Reactions Bar */
.ludo-emotes-bar {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 8px 12px;
  background: #ffffff;
  border: 2px solid #000000;
  box-shadow: 4px 4px 0px #000000;
  border-radius: 8px;
  margin-top: 1rem;
}

.emote-btn {
  background: transparent;
  border: none;
  font-size: 1.3rem;
  cursor: pointer;
  padding: 4px 8px;
  border-radius: 6px;
  transition: transform 0.15s ease, background 0.15s ease;
}

.emote-btn:hover {
  transform: scale(1.35) rotate(-5deg);
  background: rgba(0, 0, 0, 0.06);
}

.emote-bubble {
  position: absolute;
  top: -28px;
  right: 10px;
  background: #000000;
  color: #ffffff;
  padding: 4px 10px;
  border-radius: 12px;
  font-size: 1.2rem;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3);
  animation: popEmote 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards, fadeOutEmote 0.5s ease 2s forwards;
  pointer-events: none;
  z-index: 100;
}

@keyframes popEmote {
  0% { transform: scale(0) translateY(10px); opacity: 0; }
  100% { transform: scale(1) translateY(0); opacity: 1; }
}

@keyframes fadeOutEmote {
  0% { opacity: 1; }
  100% { opacity: 0; transform: translateY(-15px); }
}

/* Step-by-Step Token Hop Animation */
.board-token-icon.is-stepping {
  animation: tokenStepHop 0.12s ease-in-out infinite alternate;
  z-index: 99 !important;
}

@keyframes tokenStepHop {
  0%   { transform: translateY(0)    scale(1.06); }
  100% { transform: translateY(-14%) scale(1.16); }
}

/* Tokens are laid over the cell rather than flowing inside it, so several
   pieces on one square overlap instead of pushing each other out of bounds. */
.board-token-icon {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
  transition: transform 0.15s ease;
  cursor: default;
  z-index: 10;
  animation: token-idle 2.4s ease-in-out infinite;
}

/* Sized as a share of the cell — never a pixel height, which is what used to
   make a 38px pawn overflow a ~30px square and get clipped at the head. */
.board-token-icon svg {
  width: 72%;
  height: 72%;
  display: block;
  overflow: visible;
  /* Dark rim, not a white halo — a bright halo washed pawns out to white
     and hid the fill colour on every nest. */
  filter:
    drop-shadow(0 0 1px rgba(20, 10, 4, 0.85))
    drop-shadow(0 1px 1.5px rgba(0, 0, 0, 0.35));
}

/* Nest colours are bright; pawns are the darker sibling so they stay
   readable on their own park, home stretch, and the cream track. */
.t-red    { --token-body: #CC0000; --token-shadow: #8B0000; }
.t-green  { --token-body: #006600; --token-shadow: #003D00; }
.t-blue   { --token-body: #0033CC; --token-shadow: #002299; }
.t-yellow { --token-body: #DAA520; --token-shadow: #8B6914; }

/* Motion is expressed in percentages of the token, not pixels, so the same
   animation stays inside the square on any board size. */
@keyframes token-idle {
  0%, 100% { transform: translateY(0); }
  50%       { transform: translateY(-4%); }
}

/* Playable token */
.token-movable {
  cursor: pointer;
  pointer-events: auto;
  z-index: 30;
  animation: token-bounce 0.5s ease-in-out infinite alternate;
}

/* The ring hugs the pawn instead of the cell, so it cannot bleed into
   neighbouring squares while it pulses. */
.token-movable::after {
  content: '';
  position: absolute;
  left: 50%;
  top: 50%;
  width: 84%;
  height: 84%;
  margin: 0;
  border-radius: 50%;
  border: 2px solid #F5C518;
  animation: ring-pulse 0.9s ease-in-out infinite;
  pointer-events: none;
}

.token-movable:hover,
.token-movable:focus-visible {
  transform: translateY(-8%) scale(1.1);
  z-index: 40;
}

/* Tokens are reachable by keyboard, so the focus ring has to be unmistakable
   against every board colour. */
.token-movable:focus-visible {
  outline: 3px solid #0041ff;
  outline-offset: 2px;
  border-radius: 50%;
}

@media (prefers-reduced-motion: reduce) {
  .board-token-icon,
  .token-movable,
  .token-movable::after {
    animation: none;
  }
  .token-hopping {
    transition: none !important;
  }
}

@keyframes token-bounce {
  from { transform: translateY(0)    scale(1);    }
  to   { transform: translateY(-9%)  scale(1.06); }
}

@keyframes ring-pulse {
  0%, 100% { opacity: 0.35; transform: translate(-50%, -50%) scale(0.9); }
  50%       { opacity: 1;    transform: translate(-50%, -50%) scale(1.06); }
}

/* Several pawns on one square fan out via offsets rather than `transform`,
   which the idle/bounce animations already own and would override. */
.l-cell[data-token-count="2"] .board-token-icon:nth-of-type(1) { left: -21%; }
.l-cell[data-token-count="2"] .board-token-icon:nth-of-type(2) { left: 21%; }

.l-cell[data-token-count="3"] .board-token-icon:nth-of-type(1) { left: -22%; }
.l-cell[data-token-count="3"] .board-token-icon:nth-of-type(2) { left: 0; }
.l-cell[data-token-count="3"] .board-token-icon:nth-of-type(3) { left: 22%; }

.l-cell[data-token-count="4"] .board-token-icon:nth-of-type(1) { left: -24%; top: -16%; }
.l-cell[data-token-count="4"] .board-token-icon:nth-of-type(2) { left: 24%;  top: -16%; }
.l-cell[data-token-count="4"] .board-token-icon:nth-of-type(3) { left: -24%; top: 16%; }
.l-cell[data-token-count="4"] .board-token-icon:nth-of-type(4) { left: 24%;  top: 16%; }

/* Pawns sharing a square are also shrunk, or a block just reads as one dark
   blob: at full 72% two pawns 32% apart still overlap by more than half. */
.l-cell[data-token-count="2"] .board-token-icon svg,
.l-cell[data-token-count="3"] .board-token-icon svg,
.l-cell[data-token-count="4"] .board-token-icon svg {
  width: 58%;
  height: 58%;
}

.turn-timer-bar.urgent {
  background: #ff3d00;
}

/* ── KVKK / GDPR MODAL GLASSMORPHISM & SPRING ANIMATIONS ── */
#kvkk-modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.65);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  z-index: 2147483640;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1rem;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.28s cubic-bezier(0.16, 1, 0.3, 1), visibility 0.28s ease;
}

#kvkk-modal-overlay.active {
  opacity: 1;
  visibility: visible;
}

#kvkk-modal-overlay .kvkk-modal-card {
  background: var(--surface, #ffffff);
  color: var(--text, #000000);
  border: 2px solid #000;
  border-radius: 8px;
  width: 100%;
  max-width: 640px;
  max-height: 85vh;
  display: flex;
  flex-direction: column;
  box-shadow: 8px 8px 0px #0041ff, 0 20px 40px rgba(0, 0, 0, 0.3);
  transform: scale(0.9) translateY(24px);
  opacity: 0;
  transition: transform 0.38s cubic-bezier(0.34, 1.56, 0.64, 1), opacity 0.28s ease;
}

#kvkk-modal-overlay.active .kvkk-modal-card {
  transform: scale(1) translateY(0);
  opacity: 1;
}

#kvkk-modal-overlay.closing {
  opacity: 0;
  visibility: hidden;
}

#kvkk-modal-overlay.closing .kvkk-modal-card {
  transform: scale(0.94) translateY(16px);
  opacity: 0;
}

/* ==========================================================================
   BROCHURE ENTRIES & CASE STUDY DIALOG
   ========================================================================== */

/* The entry is a block of copy with two controls on one row: the outbound link
   and the case study opener. They share a line rather than stacking so the
   opener costs the page no vertical space — an entry that grew taller would be
   an entry fewer on the spread. */
.project-entry {
  position: relative;
  margin-bottom: 0.45rem;
}

.project-entry-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.3rem;
}

.project-entry-desc {
  font-size: 0.5rem;
  margin-top: 0.2rem;
  color: var(--color-grey-text);
}

/* Collapsed, the spread is a 440px thumbnail whose type sets at 8px: it reads
   as an object to pick up, not as a document to operate. The opener keeps its
   place in the layout so the fill measurement matches the expanded card, but it
   is neither shown nor reachable until the card is open. */
.project-entry-open {
  /* Deliberately not positioned: its ::after hit layer has to resolve against
     .project-entry, not against the button. */
  visibility: hidden;
  pointer-events: none;
  font-family: var(--font-mono, monospace);
  font-size: 0.46rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  color: var(--color-cobalt);
  background: none;
  border: none;
  padding: 0.12rem 0;
  cursor: pointer;
  line-height: 1;
  transition: color 0.2s ease;
}

.project-entry-open:hover {
  color: var(--color-orange);
}

.brochure-asset.expanded .project-entry-open {
  visibility: visible;
  pointer-events: auto;
}

/* Expanded, the whole entry is the target — a 0.46rem line of type is not one.
   The outbound link sits above this layer on z-index 2. */
.brochure-asset.expanded .project-entry-open::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
}

.brochure-asset.expanded .project-entry:hover h3 {
  color: var(--color-cobalt);
}

.project-entry-open:focus-visible,
.brochure-link-badge:focus-visible {
  outline: 2px solid var(--color-cobalt);
  outline-offset: 2px;
}

/* Closes the page like a printed folio: the space beneath the last entry is a
   margin, not a gap where content stopped. */
.brochure-page-foot {
  margin-top: auto;
  padding-top: 0.4rem;
  border-top: 1px solid rgba(0, 0, 0, 0.12);
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  font-family: var(--font-mono, monospace);
  font-size: 0.4rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  color: var(--color-grey-text);
  flex-shrink: 0;
}

.theme-sunset .brochure-asset .project-entry-desc,
.theme-sunset .brochure-asset .brochure-page-foot {
  color: rgba(255, 211, 190, 0.75) !important;
}

.theme-sunset .brochure-asset .brochure-page-foot {
  border-top-color: rgba(255, 211, 190, 0.25) !important;
}

.theme-moonlight .brochure-asset .project-entry-desc,
.theme-moonlight .brochure-asset .brochure-page-foot {
  color: rgba(209, 224, 255, 0.75) !important;
}

.theme-moonlight .brochure-asset .brochure-page-foot {
  border-top-color: rgba(209, 224, 255, 0.25) !important;
}

.theme-sunset .brochure-asset .project-entry-open,
.theme-moonlight .brochure-asset .project-entry-open {
  color: #ffb400 !important;
}

/* ── Case study dialog ─────────────────────────────────────────────────── */

.case-study-overlay {
  position: fixed;
  inset: 0;
  z-index: 999998;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1.5rem;
  overflow-y: auto;
  background: rgba(0, 0, 0, 0);
  transition: background 0.25s ease;
}

.case-study-overlay.active {
  background: rgba(0, 0, 0, 0.78);
}

/* `display: flex` above outranks the user agent's [hidden] rule, which left the
   closed overlay transparent but still hit-testable — every click on the page
   landed on it instead of the page. */
.case-study-overlay[hidden] {
  display: none;
}

.case-study-dialog {
  position: relative;
  width: 100%;
  max-width: 560px;
  max-height: 88vh;
  overflow-y: auto;
  margin: auto;
  box-sizing: border-box;
  padding: 2.25rem 2rem 2rem;
  background: #ffffff;
  color: #000000;
  border: 2.5px solid #000000;
  box-shadow: 10px 10px 0px #000000;
  transform: translateY(12px);
  opacity: 0;
  transition:
    transform 0.25s cubic-bezier(0.16, 1, 0.3, 1),
    opacity 0.25s ease;
}

.case-study-overlay.active .case-study-dialog {
  transform: translateY(0);
  opacity: 1;
}

.case-close {
  position: absolute;
  top: 0.5rem;
  right: 0.5rem;
  width: 32px;
  height: 32px;
  font-size: 1.2rem;
  line-height: 1;
  background: none;
  border: 1px solid transparent;
  color: #000000;
  cursor: pointer;
}

.case-close:hover {
  border-color: #000000;
}

.case-close:focus-visible,
.case-visit:focus-visible {
  outline: 2px solid var(--color-cobalt);
  outline-offset: 2px;
}

.case-eyebrow {
  font-family: var(--font-mono, monospace);
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  color: var(--color-cobalt);
  margin: 0 0 0.4rem;
}

.case-title {
  font-family: var(--font-display);
  font-size: 1.75rem;
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.1;
  margin: 0 0 0.6rem;
}

.case-lede {
  font-size: 0.95rem;
  line-height: 1.5;
  color: #333333;
  margin: 0 0 1.5rem;
  padding-bottom: 1.25rem;
  border-bottom: 1.5px solid #000000;
}

.case-section {
  margin-bottom: 1.25rem;
}

.case-section-label {
  font-family: var(--font-mono, monospace);
  font-size: 0.58rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  color: var(--color-grey-text);
  margin: 0 0 0.3rem;
}

.case-section-body {
  font-size: 0.92rem;
  line-height: 1.55;
  margin: 0;
}

.case-stack {
  display: flex;
  flex-wrap: wrap;
  gap: 0.3rem;
  list-style: none;
  margin: 0;
  padding: 0;
}

.case-stack li {
  font-family: var(--font-mono, monospace);
  font-size: 0.68rem;
  font-weight: 600;
  padding: 0.2rem 0.45rem;
  border: 1px solid rgba(0, 0, 0, 0.2);
  background: rgba(0, 0, 0, 0.04);
}

.case-empty {
  font-size: 0.9rem;
  color: var(--color-grey-text);
  margin: 0 0 1.25rem;
}

.case-visit {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-family: var(--font-mono, monospace);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-decoration: none;
  color: #ffffff;
  background: #000000;
  border: 1.5px solid #000000;
  padding: 0.6rem 1rem;
  transition: all 0.2s ease;
}

.case-visit:hover {
  background: var(--color-cobalt);
  border-color: var(--color-cobalt);
}

@media (max-width: 768px) {
  .case-study-dialog {
    padding: 2rem 1.25rem 1.5rem;
    box-shadow: 6px 6px 0px #000000;
  }
  .case-title {
    font-size: 1.35rem;
  }
}

/* ── Case study: screens strip and image viewer ────────────────────────── */

/* A project with screens gets a wider sheet, so a landscape thumbnail and a
   half of the next one fit — the half is what says "there is more". */
.case-study-dialog.has-gallery {
  max-width: 720px;
}

.case-gallery {
  display: flex;
  gap: 0.75rem;
  margin: 0;
  padding: 0 0 0.5rem;
  list-style: none;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
}

.case-gallery li {
  flex: 0 0 auto;
  scroll-snap-align: start;
}

.case-shot {
  display: block;
  padding: 0;
  border: 0;
  background: none;
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: zoom-in;
}

.case-shot img {
  display: block;
  height: 190px;
  width: auto;
  max-width: 78vw;
  object-fit: contain;
  border: 1.5px solid #000000;
  box-shadow: 4px 4px 0px #000000;
  background: #f4f4f4;
}

.case-shot:focus-visible img {
  outline: 3px solid var(--color-cobalt);
  outline-offset: 2px;
}

.case-shot-caption {
  display: block;
  /* As wide as the image above it and no wider: a zero intrinsic width keeps
     the caption from stretching the card, min-width then stretches it back
     to the image. Without this a phone showed one screen and no hint of the
     next, because a 300px caption sat under a 240px thumbnail. */
  width: 0;
  /* …except under a portrait screen, where "as wide as the image" is a
     70px column that wraps a sentence into a dozen lines and makes the whole
     strip that tall. A floor keeps the caption readable and the strip short. */
  min-width: max(100%, 200px);
  margin-top: 0.55rem;
  font-family: var(--font-mono, monospace);
  font-size: 0.6rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  line-height: 1.4;
  color: var(--color-grey-text);
}

.case-gallery-note {
  margin: 0.5rem 0 0;
  font-size: 0.74rem;
  line-height: 1.45;
  color: var(--color-grey-text);
}

.case-lightbox {
  position: fixed;
  inset: 0;
  z-index: 999999;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 3rem 3.75rem;
  background: rgba(0, 0, 0, 0.92);
}

.case-lightbox[hidden] {
  display: none;
}

/* The body is a repaint target only; its children lay out as the viewer's. */
.case-lightbox-body {
  display: contents;
}

/* Read by screen readers on every page turn, seen by nobody. */
.case-lightbox-status {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

.case-lightbox figure {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.7rem;
  max-width: 100%;
  max-height: 100%;
  margin: 0;
}

.case-lightbox img {
  display: block;
  width: auto;
  height: auto;
  max-width: 92vw;
  max-height: 78vh;
  border: 2px solid #ffffff;
  background: #111111;
}

.case-lightbox figcaption {
  max-width: 72ch;
  font-family: var(--font-mono, monospace);
  font-size: 0.68rem;
  letter-spacing: 0.06em;
  line-height: 1.5;
  text-align: center;
  color: #ffffff;
}

.case-lightbox button {
  position: absolute;
  width: 40px;
  height: 40px;
  padding: 0;
  font-size: 1.3rem;
  line-height: 1;
  color: #000000;
  background: #ffffff;
  border: 2px solid #000000;
  cursor: pointer;
}

.case-lightbox button:hover {
  background: var(--color-cobalt);
  border-color: var(--color-cobalt);
  color: #ffffff;
}

.case-lightbox button:focus-visible {
  outline: 3px solid var(--color-cobalt);
  outline-offset: 2px;
}

.case-lightbox-close {
  top: 0.75rem;
  right: 0.75rem;
}

.case-lightbox-prev,
.case-lightbox-next {
  top: 50%;
  transform: translateY(-50%);
}

.case-lightbox-prev {
  left: 0.75rem;
}

.case-lightbox-next {
  right: 0.75rem;
}

@media (max-width: 768px) {
  .case-shot img {
    height: 150px;
  }
  .case-lightbox {
    padding: 3.5rem 0.5rem;
  }
  .case-lightbox img {
    max-width: 96vw;
    /* The buttons sit in the bottom padding on phones; leave room under the
       image for a three-line caption above them, or on a phone held sideways
       the caption ends up under the buttons. */
    max-height: min(70vh, calc(100vh - 12rem));
  }
  .case-lightbox-prev,
  .case-lightbox-next {
    top: auto;
    bottom: 0.75rem;
    transform: none;
  }
}

/* Cards are keyboard-reachable now, so focus has to be visible on them. The
   expanded state keeps its own `outline: none` — there it is the only thing on
   screen. */
.brand-asset:focus-visible {
  outline: 3px solid var(--color-cobalt);
  outline-offset: 4px;
}

/* The opener's hit layer is a positioned pseudo-element, so it would paint over
   an in-flow link and swallow its clicks. The outbound link is lifted above it. */
.project-entry .brochure-link-badge {
  position: relative;
  z-index: 3;
}

/* ==========================================================================
   COFFEE WHEEL — office draw for who makes the next round
   ========================================================================== */

.wheel-addrow {
  display: flex;
  gap: 0.4rem;
  margin-bottom: 0.5rem;
}

.wheel-input {
  flex: 1;
  min-width: 0;
  padding: 0.45rem 0.6rem;
  font-family: var(--font-mono);
  font-size: 0.72rem;
  font-weight: 700;
  color: var(--color-black);
  background: var(--color-white);
  border: 1.5px solid var(--color-black);
  outline: none;
}

.wheel-input:focus-visible {
  outline: 3px solid var(--color-cobalt);
  outline-offset: 1px;
}

.wheel-input:disabled {
  opacity: 0.5;
}

.wheel-add-btn {
  flex-shrink: 0;
  width: 32px;
  font-family: var(--font-display);
  font-size: 1rem;
  font-weight: 800;
  line-height: 1;
  color: var(--color-white);
  background: var(--color-black);
  border: 1.5px solid var(--color-black);
  cursor: pointer;
  transition: background 0.15s ease;
}

.wheel-add-btn:hover:not(:disabled) { background: var(--color-cobalt); }
.wheel-add-btn:disabled { opacity: 0.4; cursor: not-allowed; }

.wheel-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  margin-bottom: 0.5rem;
}

.wheel-count {
  font-family: var(--font-mono);
  font-size: 0.6rem;
  font-weight: 700;
  letter-spacing: 0.5px;
  color: var(--color-grey-text);
  font-variant-numeric: tabular-nums;
}

.wheel-clear-btn {
  font-family: var(--font-display);
  font-size: 0.58rem;
  font-weight: 700;
  letter-spacing: 1px;
  color: var(--color-grey-text);
  background: none;
  border: none;
  padding: 0.15rem 0.2rem;
  cursor: pointer;
  text-decoration: underline;
}

.wheel-clear-btn:hover:not(:disabled) { color: var(--color-orange); }
.wheel-clear-btn:disabled { opacity: 0.35; cursor: not-allowed; text-decoration: none; }

/* Chips double as the wheel's legend and as its accessible text copy. */
.wheel-roster {
  display: flex;
  flex-wrap: wrap;
  gap: 0.3rem;
  margin-bottom: 0.6rem;
}

.wheel-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  padding: 0.2rem 0.3rem 0.2rem 0.35rem;
  font-family: var(--font-mono);
  font-size: 0.62rem;
  font-weight: 700;
  color: var(--color-black);
  background: var(--color-white);
  border: 1.5px solid var(--color-black);
  max-width: 100%;
}

.wheel-chip-dot {
  width: 8px;
  height: 8px;
  flex-shrink: 0;
  border: 1px solid var(--color-black);
}

.wheel-chip-name {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.wheel-chip-x {
  flex-shrink: 0;
  padding: 0 0.15rem;
  font-size: 0.6rem;
  line-height: 1;
  color: var(--color-grey-text);
  background: none;
  border: none;
  cursor: pointer;
}

.wheel-chip-x:hover { color: var(--color-orange); }

.wheel-stage {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0.5rem 0 0.25rem;
}

#wheel-canvas {
  display: block;
  cursor: pointer;
}

/* Pointer sits at 12 o'clock, which is the angle the draw maths lands on. */
.wheel-pointer {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 0;
  height: 0;
  z-index: 2;
  border-left: 9px solid transparent;
  border-right: 9px solid transparent;
  border-top: 16px solid var(--color-orange);
  filter: drop-shadow(0 1px 0 #000);
}

.wheel-spin-btn {
  width: 100%;
  height: 38px;
  margin-top: 0.4rem;
  font-family: var(--font-display);
  font-size: 0.78rem;
  font-weight: 800;
  letter-spacing: 1px;
  color: var(--color-white);
  background: var(--color-black);
  border: 2px solid var(--color-black);
  box-shadow: 3px 3px 0px var(--color-cobalt);
  cursor: pointer;
  transition: transform 0.1s ease, box-shadow 0.1s ease, background 0.15s ease;
}

.wheel-spin-btn:hover:not(:disabled) {
  background: var(--color-cobalt);
  transform: translate(-1px, -1px);
  box-shadow: 4px 4px 0px var(--color-black);
}

.wheel-spin-btn:active:not(:disabled) {
  transform: translate(1px, 1px);
  box-shadow: 1px 1px 0px var(--color-cobalt);
}

.wheel-spin-btn:disabled {
  opacity: 0.4;
  cursor: not-allowed;
  box-shadow: none;
  transform: none;
}

.wheel-hint,
.wheel-historyline {
  margin: 0.45rem 0 0;
  font-family: var(--font-mono);
  font-size: 0.6rem;
  font-weight: 600;
  line-height: 1.45;
  color: var(--color-grey-text);
}

.wheel-hint:empty,
.wheel-historyline:empty,
.wheel-result:empty { display: none; }

.wheel-result {
  margin: 0.5rem 0 0;
  padding: 0.45rem 0.55rem;
  font-family: var(--font-display);
  font-size: 0.72rem;
  font-weight: 800;
  line-height: 1.35;
  letter-spacing: 0.3px;
  color: var(--color-black);
  border: 1.5px solid var(--color-black);
  background: var(--color-white);
  overflow-wrap: anywhere;
}

.wheel-result.is-win {
  color: var(--color-white);
  background: var(--color-cobalt);
  border-color: var(--color-cobalt);
  animation: wheelWin 0.35s ease both;
}

.wheel-result.is-warn {
  color: var(--color-orange);
  border-color: var(--color-orange);
}

@keyframes wheelWin {
  from { transform: scale(0.94); opacity: 0; }
  to   { transform: scale(1); opacity: 1; }
}

.wheel-toggle {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  margin-top: 0.6rem;
  font-family: var(--font-mono);
  font-size: 0.6rem;
  font-weight: 600;
  line-height: 1.35;
  color: var(--color-grey-text);
  cursor: pointer;
}

.wheel-toggle input {
  flex-shrink: 0;
  accent-color: var(--color-cobalt);
  cursor: pointer;
}

@media (prefers-reduced-motion: reduce) {
  .wheel-spin-btn,
  .wheel-add-btn { transition: none; }
  .wheel-result.is-win { animation: none; }
}

/* Dark theme */
[data-theme="dark"] .wheel-input,
[data-theme="dark"] .wheel-chip,
[data-theme="dark"] .wheel-result {
  color: #f0f4f8;
  background: #12161f;
  border-color: #30363d;
}

[data-theme="dark"] .wheel-add-btn,
[data-theme="dark"] .wheel-spin-btn {
  color: #ffffff;
  background: #0041ff;
  border-color: #30363d;
}

[data-theme="dark"] .wheel-chip-dot { border-color: #30363d; }

[data-theme="dark"] .wheel-result.is-win {
  background: #0041ff;
  border-color: #0041ff;
  color: #ffffff;
}

/* ==========================================================================
   SIDEBAR RAIL — work first, decoration second
   The rail used to spend 68% of its height on four games and a radio widget.
   These are the sections that replaced them.
   ========================================================================== */

.rail-section {
  margin-bottom: 1.75rem;
}

.rail-lede {
  font-family: var(--font-mono);
  font-size: 0.68rem;
  font-weight: 500;
  line-height: 1.55;
  color: var(--color-grey-text);
  margin: 0 0 0.75rem;
}

/* ─── Jump targets ─────────────────────────────────────────
   Each one opens a card that is otherwise only findable by dragging the
   canvas around. */
/* Same physics as .control-btn, which is what every other button in this rail
   uses: hover changes the fill, pressing pushes the button into its own
   shadow. Nothing lifts off the surface — a lift needs clearance the rail does
   not have, and it made these three overhang the column edge. */
.rail-jump {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  width: 100%;
  padding: 0.55rem 0.65rem;
  margin-bottom: 0.5rem;
  text-align: left;
  background: var(--color-white);
  border: 1.5px solid var(--color-black);
  box-shadow: 1px 1px 0px rgba(0, 0, 0, 1);
  cursor: pointer;
  transition: all 0.15s ease;
}

.rail-jump:hover {
  background: var(--color-beige);
  border-color: var(--color-black);
}

.rail-jump:active {
  box-shadow: none;
  transform: translate(1px, 1px);
}

.rail-jump-num {
  flex-shrink: 0;
  font-family: var(--font-mono);
  font-size: 0.58rem;
  font-weight: 700;
  letter-spacing: 0.5px;
  color: var(--color-cobalt);
}

.rail-jump-body {
  display: flex;
  flex-direction: column;
  gap: 0.1rem;
  min-width: 0;
  flex: 1;
}

.rail-jump-title {
  font-family: var(--font-display);
  font-size: 0.74rem;
  font-weight: 700;
  letter-spacing: 0.2px;
  color: var(--color-black);
}

.rail-jump-sub {
  font-family: var(--font-mono);
  font-size: 0.58rem;
  font-weight: 500;
  color: var(--color-grey-text);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.rail-jump-arrow {
  flex-shrink: 0;
  font-family: var(--font-mono);
  font-size: 0.8rem;
  font-weight: 700;
  color: var(--color-black);
  transition: transform 0.15s ease;
}

.rail-jump:hover .rail-jump-arrow,
.rail-cta:hover .rail-jump-arrow {
  transform: translateX(3px);
}

/* ─── Primary calls to action ──────────────────────────────── */
.rail-cta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  width: 100%;
  height: 40px;
  padding: 0 0.85rem;
  font-family: var(--font-display);
  font-size: 0.74rem;
  font-weight: 800;
  letter-spacing: 1px;
  color: var(--color-white);
  background: var(--color-cobalt);
  border: 2px solid var(--color-black);
  box-shadow: 3px 3px 0 var(--color-black);
  cursor: pointer;
  transition: transform 0.12s ease, box-shadow 0.12s ease, background 0.15s ease;
}

/* The two calls to action swap into each other's colour on hover rather than
   growing their shadow, so the button stays exactly where it was drawn. */
.rail-cta:hover {
  background: var(--color-black);
}

.rail-cta:active {
  transform: translate(3px, 3px);
  box-shadow: none;
}

.rail-cta-dark {
  background: var(--color-black);
  box-shadow: 3px 3px 0 var(--color-cobalt);
}

.rail-cta-dark:hover {
  background: var(--color-cobalt);
}

/* ─── Workbench controls ───────────────────────────────────── */
.rail-divider {
  height: 1.5px;
  background: var(--color-grey-border);
  margin: 0.85rem 0;
}

.rail-triad,
.rail-pair {
  display: flex;
  gap: 0.4rem;
  margin-bottom: 0.5rem;
}

.rail-triad .control-btn,
.rail-pair .control-btn {
  flex: 1;
  justify-content: center;
  height: 32px;
  font-size: 0.68rem;
  font-weight: 700;
}

.rail-reset {
  width: 100%;
  justify-content: center;
}

.rail-jump:focus-visible,
.rail-cta:focus-visible,
.arcade-card:focus-visible,
.arcade-close:focus-visible,
.arcade-back:focus-visible {
  outline: 3px solid var(--color-cobalt);
  outline-offset: 2px;
}

/* ==========================================================================
   OFFICE ARCADE — one door for every game
   ========================================================================== */

body.arcade-open {
  overflow: hidden;
}

.arcade-overlay {
  position: fixed;
  inset: 0;
  /* Same tier as the other full-screen overlays (Ludo 999999, case study
     999998). 9000 was not enough: the mobile drawer sits at 100000, so the
     arcade opened underneath the very menu that launched it. */
  z-index: 999990;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 2rem 1.5rem;
  background: rgba(0, 0, 0, 0.82);
  backdrop-filter: blur(3px);
  animation: arcadeFade 0.18s ease both;
}

.arcade-overlay[hidden] {
  display: none;
}

@keyframes arcadeFade {
  from { opacity: 0; }
  to   { opacity: 1; }
}

.arcade-shell {
  display: flex;
  flex-direction: column;
  width: min(1040px, 100%);
  max-height: 100%;
  background: var(--color-beige);
  border: 2px solid var(--color-black);
  box-shadow: 10px 10px 0 var(--color-cobalt);
  animation: arcadeRise 0.22s cubic-bezier(0.2, 0.9, 0.3, 1) both;
}

@keyframes arcadeRise {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: translateY(0); }
}

.arcade-topbar {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  flex-shrink: 0;
  padding: 0.85rem 1.1rem;
  background: var(--color-black);
  border-bottom: 2px solid var(--color-black);
}

.arcade-title {
  font-family: var(--font-display);
  font-size: 0.85rem;
  font-weight: 800;
  letter-spacing: 2px;
  color: var(--color-white);
}

.arcade-now {
  font-family: var(--font-mono);
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 1px;
  color: var(--color-cobalt);
  margin-left: auto;
  padding-right: 0.5rem;
}

.arcade-now:not(:empty)::before {
  content: "// ";
  opacity: 0.6;
}

.arcade-back,
.arcade-close {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  flex-shrink: 0;
  font-family: var(--font-display);
  font-size: 0.65rem;
  font-weight: 800;
  letter-spacing: 1px;
  color: var(--color-white);
  background: none;
  border: 1.5px solid rgba(255, 255, 255, 0.35);
  padding: 0.3rem 0.6rem;
  cursor: pointer;
  transition: background 0.15s ease, border-color 0.15s ease;
}

.arcade-back:hover,
.arcade-close:hover {
  background: var(--color-cobalt);
  border-color: var(--color-cobalt);
}

.arcade-back[hidden] {
  display: none;
}

.arcade-close {
  font-size: 0.8rem;
  line-height: 1;
  padding: 0.3rem 0.5rem;
}

/* ─── Picker ───────────────────────────────────────────────── */
.arcade-picker {
  padding: 1.5rem;
  overflow-y: auto;
}

.arcade-picker[hidden] {
  display: none;
}

.arcade-lede {
  max-width: 62ch;
  margin: 0 0 1.25rem;
  font-family: var(--font-mono);
  font-size: 0.72rem;
  font-weight: 500;
  line-height: 1.6;
  color: var(--color-grey-text);
}

.arcade-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 0.85rem;
}

.arcade-card {
  display: grid;
  grid-template-columns: auto 1fr;
  grid-template-rows: auto auto auto;
  gap: 0.15rem 0.7rem;
  align-items: start;
  padding: 1rem;
  text-align: left;
  background: var(--color-white);
  border: 2px solid var(--color-black);
  box-shadow: 4px 4px 0 var(--color-black);
  cursor: pointer;
  transition: transform 0.14s ease, box-shadow 0.14s ease;
}

.arcade-card:hover {
  transform: translate(-3px, -3px);
  box-shadow: 7px 7px 0 var(--color-cobalt);
}

.arcade-card:active {
  transform: translate(1px, 1px);
  box-shadow: 2px 2px 0 var(--color-cobalt);
}

.arcade-card-num {
  grid-column: 1;
  grid-row: 1;
  font-family: var(--font-mono);
  font-size: 0.6rem;
  font-weight: 700;
  color: var(--color-cobalt);
}

.arcade-card-icon {
  grid-column: 1;
  grid-row: 2 / span 2;
  font-size: 1.5rem;
  line-height: 1;
  align-self: center;
}

.arcade-card-name {
  grid-column: 2;
  grid-row: 1 / span 2;
  align-self: center;
  font-family: var(--font-display);
  font-size: 0.92rem;
  font-weight: 800;
  letter-spacing: 0.5px;
  color: var(--color-black);
}

.arcade-card-desc {
  grid-column: 2;
  grid-row: 3;
  font-family: var(--font-mono);
  font-size: 0.63rem;
  font-weight: 500;
  line-height: 1.5;
  color: var(--color-grey-text);
  margin-top: 0.2rem;
}

.arcade-card-tag {
  grid-column: 1 / -1;
  grid-row: 4;
  justify-self: start;
  margin-top: 0.7rem;
  padding: 0.15rem 0.45rem;
  font-family: var(--font-mono);
  font-size: 0.55rem;
  font-weight: 700;
  letter-spacing: 1px;
  color: var(--color-black);
  border: 1.5px solid var(--color-black);
}

/* ─── Stage ────────────────────────────────────────────────
   The panels hold the original game markup, moved verbatim. The wrapper
   styling those blocks brought with them from the sidebar is neutralised
   here so they sit as a single centred cabinet instead. */
.arcade-stage {
  padding: 1.5rem;
  overflow-y: auto;
}

.arcade-stage[hidden] {
  display: none;
}

.arcade-panel[hidden] {
  display: none;
}

.arcade-panel .control-section {
  margin: 0 auto;
  max-width: 960px;
}

/* Breakout is the exception: its canvas is a fixed 280-unit coordinate grid
   stretched to whatever width it gets, so every extra pixel of width flattens
   the bricks and turns the ball into an ellipse. It stays at the old cap until
   the play field is rebuilt from the canvas size. */
.arcade-panel[data-panel="breakout"] .control-section {
  max-width: 620px;
}

.arcade-panel .control-section > h2 {
  margin-bottom: 0.75rem;
}

.arcade-panel .sidebar-section-body {
  background: var(--color-white);
  border: 2px solid var(--color-black);
  box-shadow: 4px 4px 0 var(--color-black);
  padding: 1.1rem;
}

/* The wheel earns more room here than it ever had in the rail. */
.arcade-panel [data-panel="wheel"] .wheel-stage,
.arcade-panel .wheel-stage {
  padding: 0.85rem 0 0.4rem;
}

@media (prefers-reduced-motion: reduce) {
  .arcade-overlay,
  .arcade-shell { animation: none; }
  .rail-jump,
  .rail-cta,
  .arcade-card { transition: none; }
  .arcade-card:hover { transform: none; }
}

@media (max-width: 720px) {
  .arcade-overlay { padding: 0; }
  .arcade-shell {
    width: 100%;
    height: 100%;
    max-height: 100%;
    border: none;
    box-shadow: none;
  }
  .arcade-grid { grid-template-columns: 1fr; }
}

/* ─── Dark theme ───────────────────────────────────────────── */
[data-theme="dark"] .rail-jump,
[data-theme="dark"] .arcade-card,
[data-theme="dark"] .arcade-panel .sidebar-section-body {
  background: #12161f;
  border-color: #30363d;
  color: #f0f4f8;
}

[data-theme="dark"] .rail-jump:hover {
  background: #1e293b;
}

[data-theme="dark"] .rail-jump-title,
[data-theme="dark"] .arcade-card-name,
[data-theme="dark"] .rail-jump-arrow {
  color: #f0f4f8;
}

[data-theme="dark"] .arcade-shell {
  background: #090c10;
  border-color: #30363d;
}

[data-theme="dark"] .arcade-topbar {
  background: #12161f;
  border-bottom-color: #30363d;
}

[data-theme="dark"] .arcade-card-tag {
  color: #f0f4f8;
  border-color: #30363d;
}

[data-theme="dark"] .rail-divider {
  background: #30363d;
}

/* ── Skip link ──────────────────────────────────────────────────────────
   Hidden until focused, then a normal control in the page's own visual
   language. Not display:none — that would take it out of the tab order and
   defeat the point. */
.skip-link {
  position: fixed;
  top: 0.5rem;
  left: 0.5rem;
  z-index: 100000;
  transform: translateY(-200%);
  padding: 0.6rem 1rem;
  background: var(--color-white, #fff);
  color: var(--color-black, #000);
  border: 1.5px solid var(--color-black, #000);
  box-shadow: 3px 3px 0 var(--color-black, #000);
  font-family: var(--font-mono, monospace);
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  text-decoration: none;
}

.skip-link:focus,
.skip-link:focus-visible {
  transform: translateY(0);
}

@media (prefers-reduced-motion: no-preference) {
  .skip-link {
    transition: transform 0.15s ease;
  }
}

/* The workbench is a focus target only because the skip link sends focus
   there; it must never draw a focus ring of its own for pointer users. */
#main-content:focus {
  outline: none;
}

/* ── Touch target minimum ───────────────────────────────────────────────
   Measured on a 390x844 screen, the standalone controls came out well under
   the 24x24 CSS pixels WCAG 2.2 asks for: the language buttons at 18x12, the
   send button at 72x18, the case-study opener at 77x11. Rather than resize
   them and change how the cards look, each grows an invisible centred hit
   area. Layout and paint are untouched; only the region that answers a tap
   changes.

   ::before, not ::after — .footer-link::after is the cobalt underline that
   grows on hover and .project-entry-open::after is already spoken for too.
   Overwriting either turned a 1px rule into a 24px block of colour.

   Scoped to pointer: coarse so a mouse user's precise 18px button stays an
   18px button, and so the expanded areas never sit under a hover state.

   Two controls are deliberately absent. Links inside a sentence — the KVKK
   notice, the project URL badges — are exempt under WCAG's inline rule and
   padding them out would break the line box they sit in. The consent checkbox
   is a replaced element and renders no pseudo-element at all; its target is
   the full-sentence <label for> beside it, which is far larger than 24x24. */
@media (pointer: coarse) {
  .lang-btn,
  .contact-submit,
  .project-entry-open,
  .footer-link {
    position: relative;
  }

  .lang-btn::before,
  .contact-submit::before,
  .project-entry-open::before,
  .footer-link::before {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: max(100%, 24px);
    height: max(100%, 24px);
    transform: translate(-50%, -50%);
  }

  /* The two language buttons sit 8px apart, so a 24px box on each would leave
     their hit areas touching. Widening the capsule's own gap keeps real space
     between them. */
  .lang-switch-capsule {
    gap: 0.35rem;
  }

  /* The consent label is what a finger actually hits — the box itself is 10px
     and, being a replaced element, cannot grow a hit area the way the buttons
     above do. Padding the label rather than covering it keeps the KVKK link
     inside it clickable; an absolutely positioned overlay would swallow it. */
  .kvkk-checkbox-row label {
    display: flex;
    align-items: center;
    min-height: 24px;
  }
}

/* Brochure spread — turning the pages ---------------------------
   The spread fills by measurement, so how many entries it holds is not a
   constant; anything past the fold used to be dropped with no way to reach it.
   These sit in the right page's folio line and are always in the DOM, hidden
   when one spread holds everything, so the fill is measured against a foot
   that does not change height afterwards. */
.brochure-nav {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
}

.brochure-nav[hidden] { display: none; }

.brochure-turn {
  font: inherit;
  line-height: 1;
  padding: 0.1rem 0.28rem;
  background: transparent;
  border: 1px solid rgba(0, 0, 0, 0.25);
  color: inherit;
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease;
}

.brochure-turn:hover:not(:disabled) {
  background: var(--color-blue, #0041ff);
  border-color: var(--color-blue, #0041ff);
  color: #ffffff;
}

.brochure-turn:disabled {
  opacity: 0.3;
  cursor: default;
}

.brochure-turn:focus-visible {
  outline: 2px solid var(--color-blue, #0041ff);
  outline-offset: 1px;
}

.brochure-range {
  min-width: 4.5em;
  text-align: center;
}