/* ==========================================================================
   ROTA XP — Estilos Visuais e Interfaces Retrô-Modernas (Campus Mobile 15)
   Estética Pixel Art 16-bit com Usabilidade e Responsividade Mobile-First
   ========================================================================== */

:root {
  --bg-dark: #090d16;
  --bg-panel: #111827;
  --bg-card: #1f2937;
  --bg-card-hover: #374151;
  --border-color: #374151;
  --border-glow: #38bdf8;
  --text-main: #f8fafc;
  --text-muted: #94a3b8;
  --text-dim: #64748b;
  --accent-cyan: #38bdf8;
  --accent-blue: #3b82f6;
  --accent-purple: #a855f7;
  --accent-pink: #ec4899;
  --accent-green: #10b981;
  --accent-amber: #f59e0b;
  --accent-orange: #f97316;
  --font-retro: "Courier New", Courier, monospace, monospace;
  --font-ui: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --pixel-shadow: 0 4px 0 rgba(0, 0, 0, 0.4);
}

/* Reset Global */
* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
}

html, body {
  width: 100%;
  height: 100%;
  overflow: hidden;
  background-color: var(--bg-dark);
  color: var(--text-main);
  font-family: var(--font-ui);
  font-size: 15px;
  line-height: 1.5;
}

#app {
  position: relative;
  width: 100vw;
  height: 100vh;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

/* ==========================================================================
   CANVAS DO JOGO 2D
   ========================================================================== */
#canvas-container {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
}

#game-canvas {
  width: 100%;
  height: 100%;
  display: block;
  image-rendering: pixelated;
  image-rendering: crisp-edges;
}

/* ==========================================================================
   HUD SUPERIOR
   ========================================================================== */
.game-hud {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 10;
  pointer-events: none;
  display: flex;
  flex-direction: column;
  padding: 10px 14px;
  gap: 8px;
}

.hud-top-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  flex-wrap: wrap;
}

.hud-profile-card {
  pointer-events: auto;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 10px;
  background: rgba(17, 24, 39, 0.92);
  border: 2px solid var(--border-color);
  padding: 6px 12px;
  border-radius: 6px;
  backdrop-filter: blur(6px);
  box-shadow: var(--pixel-shadow);
  transition: border-color 0.2s, transform 0.1s;
}

.hud-profile-card:hover {
  border-color: var(--accent-cyan);
  transform: translateY(-1px);
}

.hud-avatar-box {
  width: 36px;
  height: 36px;
  background: #1e293b;
  border: 2px solid var(--accent-cyan);
  border-radius: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
}

.hud-profile-info {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.hud-char-name {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
}

.hud-badge {
  background: var(--accent-blue);
  color: white;
  font-size: 10px;
  padding: 1px 6px;
  border-radius: 3px;
  font-weight: 600;
  text-transform: uppercase;
}

.hud-bars {
  display: flex;
  gap: 8px;
}

.hud-bar-container {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 10px;
  color: var(--text-muted);
}

.hud-bar-track {
  width: 60px;
  height: 8px;
  background: #374151;
  border-radius: 4px;
  overflow: hidden;
}

.hud-bar-fill {
  height: 100%;
  transition: width 0.3s ease;
}

.energy-fill {
  background: linear-gradient(90deg, #f59e0b, #10b981);
}

.hud-calendar-card {
  pointer-events: auto;
  background: rgba(17, 24, 39, 0.92);
  border: 2px solid var(--border-color);
  padding: 6px 10px;
  border-radius: 6px;
  backdrop-filter: blur(6px);
  text-align: center;
  box-shadow: var(--pixel-shadow);
}

.hud-time-tag {
  font-weight: 700;
  font-size: 12px;
  color: var(--accent-amber);
}

.hud-time-sub {
  font-size: 10px;
  color: var(--text-muted);
}

.hud-actions-group {
  pointer-events: auto;
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}

/* Botões Estilo Pixel Art */
.pixel-btn {
  background: #1f2937;
  color: var(--text-main);
  border: 2px solid #4b5563;
  padding: 7px 12px;
  border-radius: 4px;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  box-shadow: var(--pixel-shadow);
  transition: all 0.15s ease;
}

.pixel-btn:hover {
  background: #374151;
  border-color: var(--accent-cyan);
  color: white;
  transform: translateY(-1px);
}

.pixel-btn:active {
  transform: translateY(2px);
  box-shadow: none;
}

.btn-highlight {
  background: linear-gradient(135deg, #0284c7, #2563eb);
  border-color: #38bdf8;
  color: white;
  animation: pulseHighlight 2.5s infinite;
}

@keyframes pulseHighlight {
  0%, 100% { box-shadow: 0 0 8px rgba(56, 189, 248, 0.5); }
  50% { box-shadow: 0 0 16px rgba(56, 189, 248, 0.8); }
}

.btn-primary {
  background: #2563eb;
  border-color: #60a5fa;
  color: white;
}

.btn-danger {
  background: #991b1b;
  border-color: #ef4444;
  color: white;
}

.btn-small {
  padding: 4px 8px;
  font-size: 11px;
}

.btn-sound {
  padding: 7px 9px;
}

/* Banner da Missão Ativa */
.hud-active-quest-banner {
  pointer-events: auto;
  cursor: pointer;
  max-width: 440px;
  background: rgba(17, 24, 39, 0.94);
  border-left: 4px solid var(--accent-amber);
  border-top: 1px solid var(--border-color);
  border-right: 1px solid var(--border-color);
  border-bottom: 1px solid var(--border-color);
  padding: 8px 12px;
  border-radius: 0 6px 6px 0;
  backdrop-filter: blur(6px);
  box-shadow: var(--pixel-shadow);
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.hud-active-quest-banner:hover {
  border-color: var(--accent-cyan);
}

.quest-banner-tag {
  font-size: 10px;
  font-weight: 700;
  color: var(--accent-amber);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.quest-banner-title {
  font-size: 13px;
  font-weight: 700;
  color: var(--text-main);
}

.quest-banner-desc {
  font-size: 11px;
  color: var(--text-muted);
}

.quest-banner-hint {
  font-size: 10px;
  color: var(--accent-cyan);
  margin-top: 2px;
}

/* ==========================================================================
   CONTROLES TOUCH MOBILE
   ========================================================================== */
.mobile-controls-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 15;
}

.joystick-zone {
  position: absolute;
  bottom: 24px;
  left: 20px;
  width: 120px;
  height: 120px;
  pointer-events: auto;
  touch-action: none;
  display: flex;
  align-items: center;
  justify-content: center;
}

.joystick-base {
  width: 90px;
  height: 90px;
  border-radius: 50%;
  background: rgba(30, 41, 59, 0.65);
  border: 3px solid rgba(148, 163, 184, 0.4);
  box-shadow: 0 0 12px rgba(0, 0, 0, 0.4);
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
}

.joystick-knob {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: radial-gradient(circle, #38bdf8, #0284c7);
  border: 2px solid white;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.5);
  position: absolute;
  will-change: transform;
}

.action-buttons-zone {
  position: absolute;
  bottom: 24px;
  right: 20px;
  display: flex;
  align-items: flex-end;
  gap: 12px;
  pointer-events: auto;
}

.pixel-touch-btn {
  width: 72px;
  height: 72px;
  border-radius: 50%;
  background: #1e293b;
  border: 3px solid #64748b;
  color: white;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.5);
  transition: transform 0.1s, background 0.1s, border-color 0.1s;
  touch-action: manipulation;
}

.btn-touch-action {
  width: 78px;
  height: 78px;
  background: radial-gradient(circle, #2563eb, #1d4ed8);
  border-color: #60a5fa;
}

.btn-touch-action.active,
.btn-touch-action:active {
  transform: scale(0.92);
  background: #1e40af;
}

.btn-touch-recalc {
  width: 60px;
  height: 60px;
  background: radial-gradient(circle, #d97706, #b45309);
  border-color: #fbbf24;
}

.touch-icon {
  font-size: 24px;
  line-height: 1;
}

.touch-label {
  font-size: 9px;
  font-weight: 800;
  letter-spacing: 0.5px;
  text-transform: uppercase;
}

/* ==========================================================================
   MODAIS RETRÔ E BACKDROP
   ========================================================================== */
.modal-backdrop {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.75);
  backdrop-filter: blur(4px);
  z-index: 50;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
  animation: fadeIn 0.2s ease-out;
}

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

.pixel-modal-window {
  background: var(--bg-panel);
  border: 3px solid var(--border-glow);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.8), 0 0 20px rgba(56, 189, 248, 0.25);
  border-radius: 8px;
  width: 100%;
  max-height: 92vh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  animation: modalScale 0.2s cubic-bezier(0.16, 1, 0.3, 1);
}

@keyframes modalScale {
  from { transform: scale(0.95); opacity: 0; }
  to { transform: scale(1); opacity: 1; }
}

.modal-wide {
  max-width: 900px;
}

.modal-medium {
  max-width: 600px;
}

.modal-header {
  padding: 14px 18px;
  background: #0f172a;
  border-bottom: 2px solid var(--border-color);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.modal-title-group {
  display: flex;
  align-items: center;
  gap: 10px;
}

.modal-header-icon {
  font-size: 28px;
}

.modal-title {
  font-size: 18px;
  font-weight: 800;
  letter-spacing: 0.5px;
  color: var(--text-main);
}

.modal-subtitle {
  font-size: 12px;
  color: var(--text-muted);
}

.btn-close {
  background: transparent;
  border-color: #64748b;
  font-size: 14px;
  padding: 4px 10px;
}

.modal-tabs-bar {
  display: flex;
  background: #0f172a;
  border-bottom: 2px solid var(--border-color);
  padding: 4px 12px 0 12px;
  gap: 4px;
  overflow-x: auto;
}

.modal-tab-btn {
  background: transparent;
  color: var(--text-muted);
  border: none;
  border-bottom: 3px solid transparent;
  padding: 8px 14px;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
}

.modal-tab-btn:hover {
  color: var(--text-main);
}

.modal-tab-btn.tab-active {
  color: var(--accent-cyan);
  border-bottom-color: var(--accent-cyan);
}

.modal-body-scrollable {
  padding: 18px;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 18px;
  flex: 1;
}

.modal-footer {
  padding: 12px 18px;
  background: #0f172a;
  border-top: 2px solid var(--border-color);
  display: flex;
  justify-content: flex-end;
  gap: 10px;
}

/* ==========================================================================
   DIÁLOGOS COM NPCS
   ========================================================================== */
.dialogue-backdrop {
  align-items: flex-end;
  padding-bottom: 24px;
}

.pixel-dialogue-box {
  width: 100%;
  max-width: 760px;
  background: rgba(17, 24, 39, 0.98);
  border: 3px solid var(--accent-cyan);
  border-radius: 8px;
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.9), 0 0 15px rgba(56, 189, 248, 0.3);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.dialogue-header {
  padding: 10px 14px;
  background: #0f172a;
  border-bottom: 1px solid var(--border-color);
  display: flex;
  align-items: center;
  gap: 12px;
}

.dialogue-avatar {
  width: 44px;
  height: 44px;
  border-radius: 6px;
  border: 2px solid;
  background: #1e293b;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 24px;
}

.dialogue-speaker-meta {
  flex: 1;
}

.speaker-name {
  font-size: 15px;
  font-weight: 800;
}

.speaker-role {
  font-size: 11px;
  color: var(--text-muted);
}

.dialogue-close-x {
  background: transparent;
  border: none;
  color: var(--text-muted);
  font-size: 22px;
  cursor: pointer;
  padding: 4px 8px;
}

.dialogue-body {
  padding: 16px 18px;
  min-height: 70px;
}

.dialogue-text {
  font-size: 14px;
  line-height: 1.6;
  color: #f1f5f9;
}

.dialogue-choices-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 0 18px 16px 18px;
}

.pixel-choice-btn {
  background: #1f2937;
  color: var(--text-main);
  border: 1px solid #4b5563;
  border-radius: 6px;
  padding: 10px 14px;
  text-align: left;
  font-size: 13px;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 8px;
  transition: all 0.15s ease;
}

.pixel-choice-btn:hover {
  background: #374151;
  border-color: var(--accent-cyan);
  transform: translateX(4px);
}

.choice-index {
  font-weight: 800;
  color: var(--accent-cyan);
}

.choice-text {
  flex: 1;
}

.choice-reward-badge {
  background: rgba(16, 185, 129, 0.15);
  color: var(--accent-green);
  border: 1px solid var(--accent-green);
  font-size: 10px;
  padding: 2px 6px;
  border-radius: 4px;
  font-weight: 700;
}

.choice-recalc-badge {
  background: rgba(245, 158, 11, 0.15);
  color: var(--accent-amber);
  border: 1px solid var(--accent-amber);
  font-size: 10px;
  padding: 2px 6px;
  border-radius: 4px;
  font-weight: 700;
}

.dialogue-footer-actions {
  display: flex;
  justify-content: flex-end;
  padding: 10px 18px 16px 18px;
}

/* ==========================================================================
   RECÁLCULO DE ROTA (FLAGSHIP FEATURE)
   ========================================================================== */
.recalc-section {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.section-label {
  font-size: 12px;
  font-weight: 800;
  color: var(--accent-cyan);
  letter-spacing: 0.5px;
}

.goals-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 8px;
}

.goal-card-btn {
  background: #1f2937;
  border: 2px solid #374151;
  padding: 10px 12px;
  border-radius: 6px;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 10px;
  text-align: left;
  transition: all 0.15s ease;
}

.goal-card-btn:hover {
  background: #374151;
  border-color: var(--accent-cyan);
}

.goal-card-btn.selected {
  background: #1e3a8a;
  border-color: var(--accent-cyan);
  box-shadow: 0 0 10px rgba(56, 189, 248, 0.3);
}

.goal-icon {
  font-size: 24px;
}

.goal-title {
  display: block;
  font-size: 13px;
  color: white;
}

.goal-desc {
  display: block;
  font-size: 11px;
  color: var(--text-muted);
}

.recalc-diagnosis-card {
  background: #172033;
  border: 2px solid #2563eb;
  border-radius: 6px;
  padding: 14px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.diagnosis-header {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
}

.diag-stage-badge {
  background: var(--accent-purple);
  color: white;
  font-size: 10px;
  padding: 2px 6px;
  border-radius: 3px;
  font-weight: 700;
}

.diag-content-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}

.diag-col-title {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  margin-bottom: 4px;
}

.text-success { color: var(--accent-green); }
.text-warning { color: var(--accent-amber); }

.diag-list {
  list-style: none;
  font-size: 12px;
  color: #e2e8f0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.routes-container {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.route-card {
  background: #1f2937;
  border: 2px solid #374151;
  border-radius: 6px;
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  transition: border-color 0.2s;
}

.route-card:hover {
  border-color: var(--accent-cyan);
}

.route-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 8px;
}

.route-title-box {
  display: flex;
  align-items: center;
  gap: 8px;
}

.route-badge-num {
  background: var(--accent-cyan);
  color: #0f172a;
  font-weight: 800;
  font-size: 11px;
  padding: 2px 6px;
  border-radius: 3px;
}

.route-name {
  font-size: 15px;
  font-weight: 800;
  color: var(--text-main);
}

.route-meta-tags {
  display: flex;
  gap: 6px;
}

.meta-tag {
  background: #374151;
  color: #cbd5e1;
  font-size: 10px;
  padding: 2px 6px;
  border-radius: 4px;
}

.tag-feasibility {
  border: 1px solid var(--accent-green);
  color: var(--accent-green);
}

.route-focus {
  font-size: 12px;
  color: #cbd5e1;
}

.route-advice-box {
  background: rgba(30, 41, 59, 0.7);
  border-left: 3px solid var(--accent-amber);
  padding: 8px 12px;
  font-size: 12px;
  display: flex;
  gap: 8px;
}

.route-steps-stepper {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 4px;
}

.stepper-title {
  font-size: 11px;
  font-weight: 700;
  color: var(--accent-cyan);
  text-transform: uppercase;
}

.stepper-step {
  display: flex;
  gap: 10px;
  background: #111827;
  padding: 10px 12px;
  border-radius: 4px;
  border: 1px solid #374151;
}

.step-num {
  width: 22px;
  height: 22px;
  background: var(--accent-blue);
  color: white;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  font-weight: 800;
  flex-shrink: 0;
}

.step-details {
  display: flex;
  flex-direction: column;
  gap: 3px;
  font-size: 12px;
}

.step-desc {
  color: var(--text-muted);
}

.step-action {
  color: var(--accent-green);
}

.step-disclaimer {
  color: var(--accent-amber);
  font-size: 10px;
  margin-top: 2px;
}

.route-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 6px;
  padding-top: 10px;
  border-top: 1px solid #374151;
}

.route-boosts {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}

.boost-label {
  font-size: 11px;
  color: var(--text-muted);
}

.attr-pill {
  background: #334155;
  color: #38bdf8;
  font-size: 10px;
  padding: 2px 6px;
  border-radius: 3px;
  font-weight: 600;
}

.recalc-regulatory-disclaimer {
  background: #18181b;
  border: 1px solid #52525b;
  border-radius: 6px;
  padding: 12px;
  display: flex;
  gap: 10px;
  font-size: 11px;
  color: #a1a1aa;
}

/* ==========================================================================
   MAPA DA MINHA JORNADA (REDE DE NÓS SVG)
   ========================================================================== */
.journey-graph-wrapper {
  background: #0f172a;
  border: 2px solid var(--border-color);
  border-radius: 8px;
  padding: 10px;
  width: 100%;
}

.journey-svg {
  width: 100%;
  height: auto;
  max-height: 380px;
}

.journey-edge {
  stroke: #475569;
  stroke-width: 2.5;
  stroke-dasharray: 4;
}

.edge-cross {
  stroke: var(--accent-purple);
}

.journey-edge-text {
  fill: #94a3b8;
  font-size: 10px;
  text-anchor: middle;
  font-weight: 600;
}

.journey-node-group {
  cursor: pointer;
  transition: transform 0.2s;
}

.journey-node-group:hover circle {
  stroke: var(--accent-cyan);
  stroke-width: 4;
}

.journey-node-circle {
  fill: #1e293b;
  stroke: #64748b;
  stroke-width: 3;
  transition: all 0.2s;
}

.journey-node-circle.node-explored {
  fill: #0c4a6e;
  stroke: #38bdf8;
}

.journey-node-icon {
  font-size: 22px;
  text-anchor: middle;
  dominant-baseline: central;
}

.journey-node-label {
  fill: #f8fafc;
  font-size: 11px;
  font-weight: 700;
  text-anchor: middle;
}

.journey-node-details-card {
  background: #1e293b;
  border: 2px solid #38bdf8;
  border-radius: 6px;
  padding: 14px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.node-details-header {
  display: flex;
  align-items: center;
  gap: 10px;
}

.node-card-icon {
  font-size: 28px;
}

.node-card-title {
  font-size: 15px;
  font-weight: 800;
}

.node-status-badge {
  font-size: 10px;
  padding: 2px 6px;
  border-radius: 3px;
  font-weight: 700;
}

.status-explored { background: #065f46; color: #34d399; }
.status-pending { background: #374151; color: #94a3b8; }

.node-card-desc {
  font-size: 12px;
  color: #cbd5e1;
}

.node-card-tip {
  font-size: 11px;
  background: #0f172a;
  border-left: 3px solid var(--accent-cyan);
  padding: 8px 10px;
  color: #94a3b8;
}

/* ==========================================================================
   PORTFÓLIO & PROJETOS
   ========================================================================== */
.portfolio-intro-box {
  background: #172554;
  border: 1px solid #3b82f6;
  border-radius: 6px;
  padding: 10px 14px;
  display: flex;
  gap: 10px;
  font-size: 12px;
}

.portfolio-cards-grid {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.portfolio-card {
  background: #1f2937;
  border: 2px solid #374151;
  border-radius: 6px;
  padding: 14px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.port-card-top {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
}

.port-card-title {
  font-size: 15px;
  font-weight: 800;
}

.port-card-context {
  font-size: 11px;
  color: var(--accent-cyan);
}

.port-card-date {
  font-size: 10px;
  color: var(--text-dim);
}

.port-card-desc {
  font-size: 12px;
  color: #cbd5e1;
}

.port-card-highlight {
  font-size: 12px;
  color: var(--accent-amber);
}

.port-card-skills {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}

.skill-tag {
  background: #374151;
  color: #93c5fd;
  font-size: 10px;
  padding: 2px 6px;
  border-radius: 3px;
}

/* ==========================================================================
   QUEST LOG
   ========================================================================== */
.quests-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.quest-item-card {
  background: #1f2937;
  border: 2px solid #374151;
  border-radius: 6px;
  padding: 12px 14px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.quest-item-card.status-active {
  border-color: var(--accent-amber);
  background: #282116;
}

.quest-item-card.status-completed {
  border-color: #059669;
  opacity: 0.85;
}

.quest-card-top {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.quest-title-box {
  display: flex;
  align-items: center;
  gap: 8px;
}

.quest-cat-badge {
  background: #374151;
  font-size: 9px;
  padding: 1px 5px;
  border-radius: 3px;
  text-transform: uppercase;
}

.quest-xp-tag {
  background: #047857;
  color: white;
  font-size: 11px;
  padding: 2px 6px;
  border-radius: 3px;
  font-weight: 700;
}

.quest-desc {
  font-size: 12px;
  color: #cbd5e1;
}

.quest-objective-box {
  font-size: 11px;
  background: #111827;
  padding: 6px 10px;
  border-radius: 4px;
  color: var(--accent-cyan);
}

.quest-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 11px;
  color: var(--text-muted);
}

.active-badge { color: var(--accent-amber); font-weight: 700; }
.completed-badge { color: var(--accent-green); font-weight: 700; }

/* ==========================================================================
   ATRIBUTOS & DIMENSÕES
   ========================================================================== */
.attrs-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 12px;
}

.attr-card {
  background: #1f2937;
  border: 1px solid #374151;
  border-radius: 6px;
  padding: 12px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.attr-card-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.attr-icon {
  font-size: 18px;
}

.attr-name {
  font-size: 13px;
}

.attr-val-badge {
  font-size: 11px;
  padding: 2px 6px;
  border-radius: 4px;
  font-weight: 800;
}

.attr-bar-track {
  width: 100%;
  height: 8px;
  background: #111827;
  border-radius: 4px;
  overflow: hidden;
}

.attr-bar-fill {
  height: 100%;
  border-radius: 4px;
  transition: width 0.4s ease;
}

.attr-card-desc {
  font-size: 11px;
  color: var(--text-muted);
}

/* ==========================================================================
   INVENTÁRIO & CONQUISTAS
   ========================================================================== */
.inventory-grid,
.achievements-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 12px;
}

.inventory-card {
  background: #1f2937;
  border: 2px solid #374151;
  border-radius: 6px;
  padding: 14px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.inv-card-top {
  display: flex;
  align-items: center;
  gap: 10px;
}

.inv-item-icon {
  font-size: 28px;
}

.inv-item-name {
  font-size: 13px;
  font-weight: 700;
}

.inv-category-tag {
  font-size: 9px;
  color: var(--accent-cyan);
  text-transform: uppercase;
}

.inv-item-desc {
  font-size: 11px;
  color: var(--text-muted);
}

.achievement-card {
  background: #1f2937;
  border: 2px solid #374151;
  border-radius: 6px;
  padding: 14px;
  display: flex;
  gap: 12px;
  align-items: center;
}

.achievement-card.ach-unlocked {
  border-color: var(--accent-amber);
  background: #1c1917;
}

.achievement-card.ach-locked {
  opacity: 0.55;
  filter: grayscale(0.8);
}

.ach-icon-box {
  width: 44px;
  height: 44px;
  background: #111827;
  border-radius: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 22px;
}

.ach-title {
  font-size: 12px;
  display: block;
}

.ach-desc {
  font-size: 11px;
  color: var(--text-muted);
}

.ach-status {
  font-size: 10px;
  font-weight: 700;
  color: var(--accent-green);
}

/* ==========================================================================
   TELA DE CRIAÇÃO E PRESET CAMPUS MOBILE
   ========================================================================== */
.creation-tab-pane {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.demo-highlight-card {
  background: linear-gradient(135deg, #1e1b4b, #172554);
  border: 2px solid var(--accent-cyan);
  border-radius: 8px;
  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.demo-badge {
  background: var(--accent-amber);
  color: #0f172a;
  font-size: 10px;
  font-weight: 900;
  padding: 3px 8px;
  border-radius: 3px;
  align-self: flex-start;
}

.demo-title {
  font-size: 18px;
  font-weight: 800;
  color: white;
}

.demo-desc {
  font-size: 13px;
  color: #e2e8f0;
  line-height: 1.5;
}

.demo-checklist {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin-top: 6px;
  font-size: 12px;
  color: var(--accent-green);
}

.form-group {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.form-label {
  font-size: 12px;
  font-weight: 700;
  color: var(--accent-cyan);
}

.pixel-input,
.pixel-select {
  background: #0f172a;
  border: 2px solid #4b5563;
  color: white;
  padding: 9px 12px;
  border-radius: 4px;
  font-size: 13px;
}

.pixel-input:focus,
.pixel-select:focus {
  outline: none;
  border-color: var(--accent-cyan);
}

.avatars-selection-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(110px, 1fr));
  gap: 10px;
}

.avatar-card-btn {
  background: #1f2937;
  border: 2px solid #374151;
  border-radius: 6px;
  padding: 12px;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
}

.avatar-card-btn:hover {
  border-color: var(--accent-cyan);
}

.avatar-card-btn.selected {
  background: #1e3a8a;
  border-color: var(--accent-cyan);
}

.avatar-big-icon {
  font-size: 26px;
}

.avatar-label {
  font-size: 11px;
  color: white;
  font-weight: 600;
}

.checkbox-group {
  display: flex;
  flex-direction: column;
  gap: 8px;
  font-size: 13px;
}

.checkbox-group label {
  display: flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
}

/* ==========================================================================
   CONFIGURAÇÕES E ACESSIBILIDADE
   ========================================================================== */
.settings-section {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding-bottom: 12px;
  border-bottom: 1px solid #374151;
}

.settings-section-title {
  font-size: 14px;
  font-weight: 700;
  color: var(--accent-cyan);
}

.setting-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
}

.setting-label {
  font-size: 13px;
}

.setting-desc {
  font-size: 12px;
  color: var(--text-muted);
}

.settings-btn-group {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

/* ==========================================================================
   TOAST NOTIFICATIONS
   ========================================================================== */
#toast-container {
  position: absolute;
  bottom: 20px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 100;
  pointer-events: none;
  display: flex;
  flex-direction: column;
  gap: 8px;
  align-items: center;
}

.pixel-toast {
  pointer-events: auto;
  background: rgba(17, 24, 39, 0.96);
  border: 2px solid var(--accent-cyan);
  padding: 8px 16px;
  border-radius: 6px;
  font-size: 12px;
  font-weight: 700;
  color: white;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.7);
  display: flex;
  align-items: center;
  gap: 8px;
  animation: toastIn 0.25s ease-out;
}

.toast-achievement {
  border-color: var(--accent-amber);
  background: #291e0a;
}

.toast-recalc {
  border-color: var(--accent-purple);
  background: #2e1065;
}

.toast-xp {
  border-color: var(--accent-green);
  background: #064e3b;
}

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

.toast-fade-out {
  animation: toastOut 0.35s ease-in forwards;
}

@keyframes toastOut {
  from { opacity: 1; transform: translateY(0); }
  to { opacity: 0; transform: translateY(-10px); }
}

/* ==========================================================================
   ESTILOS DE ACESSIBILIDADE
   ========================================================================== */
body.high-contrast {
  --bg-dark: #000000;
  --bg-panel: #0a0a0a;
  --bg-card: #141414;
  --border-color: #ffffff;
  --text-main: #ffffff;
  --text-muted: #e5e5e5;
  --accent-cyan: #00ffff;
  --accent-amber: #ffff00;
}

body.reduced-motion * {
  animation: none !important;
  transition: none !important;
}

/* ==========================================================================
   RESPONSIVIDADE E BREAKPOINTS (MOBILE FIRST)
   ========================================================================== */
@media (max-width: 640px) {
  .hud-actions-group .btn-text {
    display: none;
  }
  .hud-top-bar {
    gap: 4px;
  }
  .hud-profile-card {
    padding: 4px 8px;
  }
  .hud-bar-track {
    width: 44px;
  }
  .modal-backdrop {
    padding: 8px;
  }
  .pixel-modal-window {
    max-height: 96vh;
  }
  .diag-content-grid {
    grid-template-columns: 1fr;
  }
}

@media (min-width: 1024px) {
  /* Em desktops com teclado e mouse, esconde o overlay touch por padrão */
  .mobile-controls-overlay {
    opacity: 0.15;
    transition: opacity 0.2s;
  }
  .mobile-controls-overlay:hover {
    opacity: 1.0;
  }
}
/* Layout: a navegação ocupa sua própria faixa e o mundo fica centralizado. */
html { font-size: 15px; }
body { font-size: 1rem; background: radial-gradient(ellipse at top, #192a45, #090d16 75%); }
#app { width: min(100%, 1440px); height: 100dvh; margin-inline: auto; padding: 12px; gap: 12px; }
.game-hud { position: relative; padding: 0; order: -1; flex-shrink: 0; }
.hud-top-bar { justify-content: flex-start; flex-wrap: wrap; }
.hud-actions-group { flex: 1; justify-content: flex-end; gap: 6px; }
.hud-active-quest-banner { max-width: none; padding: 8px 14px; display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 14px; }
#canvas-container { position: relative; top: auto; left: auto; flex: 1; min-height: 0; border: 1px solid #334155; border-radius: 16px; overflow: hidden; box-shadow: 0 16px 48px #0006; }
.mobile-controls-overlay { top: auto; bottom: 12px; height: 145px; }
.pixel-btn { min-height: 42px; border-radius: 8px; }
button:focus-visible, [tabindex]:focus-visible, select:focus-visible, input:focus-visible { outline: 3px solid #fbbf24; outline-offset: 3px; }
.hud-avatar-box canvas { width: 32px; height: 32px; image-rendering: pixelated; }
[hidden] { display: none !important; }
.modal-backdrop { position: fixed; padding: max(12px, env(safe-area-inset-top)) max(12px, env(safe-area-inset-right)) max(12px, env(safe-area-inset-bottom)) max(12px, env(safe-area-inset-left)); }
.pixel-modal-window { max-height: calc(100dvh - 24px); border: 1px solid #4c7392; border-radius: 16px; }
.modal-header, .modal-footer, .modal-tabs-bar { flex-shrink: 0; }
.modal-body-scrollable { min-height: 0; overscroll-behavior: contain; }
.modal-title { font-size: 1.15rem; }
.modal-subtitle, .quest-desc, .setting-desc { font-size: .85rem; }
.modal-footer { flex-wrap: wrap; }
.pixel-input, .pixel-select { min-height: 44px; width: 100%; font-size: 1rem; user-select: text; }
input, textarea, .dialogue-text { user-select: text; }
.character-customizer { display: grid; grid-template-columns: 170px 1fr; gap: 20px; padding: 20px; background: linear-gradient(135deg, #163049, #1e203d); border: 1px solid #3a526f; border-radius: 12px; }
.character-preview { display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 8px; text-align: center; }
.character-preview canvas { width: 112px; height: 112px; image-rendering: pixelated; background: #0c192d; border-radius: 12px; }
.character-preview span { font-size: .8rem; color: #bbc8dc; }
.appearance-fields { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.appearance-fields label { display: flex; flex-direction: column; gap: 5px; }
.pixel-dialogue-box { max-height: calc(100dvh - 24px); overflow-y: auto; width: min(100%, 800px); }
.pixel-choice-btn { min-height: 48px; flex-wrap: wrap; }
.high-contrast { --text-muted: #e2e8f0; --border-color: #b3c7de; }
.reduced-motion *, .reduced-motion *::before, .reduced-motion *::after { animation: none !important; transition: none !important; }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation: none !important; transition: none !important; } }
@media (hover: hover) and (pointer: fine) { .joystick-zone { display: none; } .mobile-controls-overlay { opacity: 1; height: 90px; } .action-buttons-zone { bottom: 15px; } }
@media (max-width: 900px) { .hud-actions-group { flex-basis: 100%; justify-content: flex-start; flex-wrap: nowrap; overflow-x: auto; padding-bottom: 5px; } .hud-actions-group .pixel-btn { flex-shrink: 0; } .hud-calendar-card { margin-left: auto; } }
@media (max-width: 640px) {
 #app { padding: max(6px, env(safe-area-inset-top)) max(6px, env(safe-area-inset-right)) max(6px, env(safe-area-inset-bottom)) max(6px, env(safe-area-inset-left)); gap: 6px; }
 .hud-actions-group .btn-text { display: inline; } .hud-actions-group .pixel-btn { padding: 7px 10px; font-size: 11px; }
 .hud-badge { max-width: 130px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
 .hud-active-quest-banner { grid-template-columns: 1fr; gap: 2px; padding: 6px 10px; } .quest-banner-hint { display: none; }
 .quest-banner-desc { font-size: 11px; } .quest-banner-tag { display: none; }
 .modal-header, .modal-body-scrollable, .modal-footer { padding: 12px; }
 .modal-header-icon { display: none; } .modal-title-group { min-width: 0; } .btn-close { flex-shrink: 0; }
 .character-customizer { grid-template-columns: 1fr; padding: 12px; gap: 12px; } .character-preview { flex-direction: row; flex-wrap: wrap; } .character-preview canvas { width: 72px; height: 72px; }
 .appearance-fields { gap: 10px; } .form-label { font-size: .85rem; }
 .avatars-selection-grid { grid-template-columns: repeat(2, 1fr); }
 .joystick-zone { left: 4px; bottom: 10px; width: 105px; height: 105px; }
 .action-buttons-zone { right: 10px; bottom: 16px; gap: 8px; }
 .btn-touch-action { width: 66px; height: 66px; } .btn-touch-recalc { width: 52px; height: 52px; }
 .dialogue-choices-list { padding: 10px; } .choice-reward-badge { white-space: normal; }
}
@media (max-height: 500px) { .hud-active-quest-banner { display: none; } .game-hud { gap: 3px; } .hud-profile-card, .hud-calendar-card { padding-block: 2px; } .character-customizer { grid-template-columns: 120px 1fr; } }
.hud-story-strip { display: flex; justify-content: space-between; gap: 12px; padding: 4px 10px; color: #b5d6e8; font-size: .75rem; }
.life-eyebrow { font-size: .72rem; letter-spacing: .08em; color: #7dd3fc; font-weight: 700; }
.life-story { padding: 20px; border: 1px solid #3b536d; border-radius: 12px; background: linear-gradient(135deg,#152c40,#202038); }
.life-story h3 { margin: 8px 0 12px; font-size: 1.4rem; }
.life-story p, .life-card p, .life-result p { line-height: 1.7; margin-block: 10px; }
.life-stat-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 10px; margin-block: 20px; }
.life-stat-grid > div { background: #0f172aaa; border: 1px solid #334155; padding: 16px; display: flex; flex-direction: column; border-radius: 10px; }
.life-stat-grid strong { font-size: 1.7rem; color: #6ee7b7; }
.life-stat-grid span, .life-tip { font-size: .82rem; color: #b0c1d6; }
.life-card-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 12px; }
.life-card { padding: 16px; background: #1b293d; border: 1px solid #34475d; border-radius: 10px; }
.life-card h3 { font-size: 1rem; margin-bottom: 8px; }
.life-card small { color: #bdd0e6; }
.life-status { display: inline-block; padding: 3px 8px; border-radius: 5px; font-size: .75rem; background: #30415a; }
.status-free { color: #6ee7b7; } .status-teaching { color: #c4b5fd; } .status-busy { color: #fde68a; }
.life-time { display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:12px; }
.life-journal, .life-task-choices { display:flex; flex-direction:column; gap:12px; }
.life-task-prompt { font-size:1.1rem; line-height:1.7; }
.task-last-feedback { padding:12px; background:#123d3a; border-left:3px solid #6ee7b7; color:#c7f4e7; }
.life-result { padding:18px; border-radius:12px; background:#21354a; }
.result-success { border:1px solid #34d399; } .result-retry { border:1px solid #fbbf24; }
.task-feedback { padding-left:20px; line-height:1.7; } .task-feedback li { margin-bottom:10px; }
progress { width:100%; accent-color:#38bdf8; }
@media(max-width:640px) { .life-card-grid { grid-template-columns:1fr; } .life-story { padding:14px; } .life-stat-grid > div { padding:8px; } .life-stat-grid span { font-size:.7rem; } .hud-story-strip { font-size:10px; padding:2px 6px; } }
@media(max-height:500px) { .hud-story-strip { display:none; } }
#toast-container { width: min(90%, 520px); bottom: 110px; }
.pixel-toast { width: 100%; font-size: .8rem; pointer-events: none; }
@media (max-width: 640px) { #toast-container { bottom: 125px; } }
/* Jogabilidade e orientação no mundo */
.hud-menu-panel { position:absolute; right:0; top:58px; z-index:35; display:flex; flex-wrap:wrap; gap:8px; width:min(100%,480px); padding:14px; background:#101c2ff5; border:1px solid #55718e; border-radius:12px; box-shadow:0 14px 35px #0008; pointer-events:auto; }
.world-overlay { position:absolute; inset:0; z-index:5; pointer-events:none; }
.world-location { position:absolute; top:12px; left:14px; display:flex; flex-direction:column; gap:3px; padding:8px 12px; border:1px solid #455b76; background:#0d192ce8; border-radius:9px; max-width:calc(100% - 230px); }
.world-location-name { font-size:.82rem; font-weight:700; }.world-period { font-size:.7rem; color:#c0d1e8; }
.world-minimap-toggle { position:absolute; top:12px; right:14px; pointer-events:auto; color:#d8e4f6; background:#152238; border:1px solid #59718d; border-radius:8px; padding:7px 12px; font:600 .75rem system-ui; min-height:36px; cursor:pointer; }
.world-minimap { position:absolute; top:55px; right:14px; width:180px; height:144px; border:2px solid #49647f; border-radius:10px; box-shadow:0 5px 25px #0008; pointer-events:auto; image-rendering:pixelated; }
.world-guide { position:absolute; bottom:22px; left:50%; transform:translateX(-50%); width:min(50%,480px); display:flex; gap:10px; align-items:center; pointer-events:auto; padding:12px 16px; min-height:44px; border:1px solid #577e99; border-radius:10px; background:#10263ded; color:#e6f4ff; cursor:pointer; }
.world-guide-icon { color:#fcd34d;font-size:1.3rem; }.world-guide-text { flex:1;text-align:left;font-size:.8rem; }.world-guide-go { font-size:.7rem;color:#a8dffb;white-space:nowrap; }
.world-controls-hint { position:absolute; bottom:6px; left:14px; color:#c4d6e8; font-size:.65rem; text-shadow:0 1px 3px #000; }
.btn-touch-run { position:absolute; left:140px; bottom:36px; pointer-events:auto; width:52px; height:52px; font-size:21px; background:#12344a; border-color:#6abbd9; }
.btn-touch-run.active { background:#075985;transform:scale(.94); }
@media(hover:hover) and (pointer:fine) { .btn-touch-run { display:none; } }
@media(max-width:900px) { .hud-menu-panel { top:112px; } }
@media(max-width:640px) {
 .world-location { top:8px;left:8px;padding:6px 9px;max-width:calc(100% - 115px); }.world-location-name { font-size:.7rem; }
 .world-minimap-toggle { top:8px;right:8px;padding:5px 9px; }.world-minimap { top:52px;right:8px;width:100px;height:80px; }
 .world-guide { width:calc(100% - 24px);bottom:128px;padding:8px 10px; }.world-guide-go { font-size:.65rem; }
 .world-controls-hint { display:none; }.btn-touch-run { left:112px;bottom:33px;width:44px;height:44px; }
 .hud-story-strip { gap:6px; }.hud-story-strip span:last-child { max-width:50%;text-align:right; }
 .hud-menu-panel { top:100px; }.hud-active-quest-banner { padding-block:5px; }
}
@media(max-height:500px) { .world-minimap { display:none; }.world-minimap-toggle { display:none; }.world-guide { width:min(55%,420px);bottom:8px;padding:7px 10px; }.world-location { max-width:90%;padding:4px 8px; }.world-period { display:none; }.world-controls-hint { display:none; } }
/* A bancada aceita toque e teclado, sem tempo obrigatório. */
.workshop-window { max-width:620px; }.workshop-intro { color:#c3d3e6;line-height:1.65;font-size:.93rem; }
.workshop-stats,.workshop-legend { display:flex;justify-content:space-between;gap:8px;flex-wrap:wrap;font-size:.8rem;color:#c6d7ed; }
.workshop-legend { color:var(--workshop-color);font-weight:700; }
.workshop-grid { display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:9px;width:min(100%,380px);margin-inline:auto;padding:10px; }
.circuit-cell { position:relative;aspect-ratio:1;min-height:44px;background:#1e2d43;border:1px solid #536780;border-radius:10px;cursor:pointer;box-shadow:0 3px 0 #070f1d;--pipe-color:#8494ab; }
.circuit-cell:hover { background:#283d58;border-color:var(--workshop-color); }.circuit-cell.powered { --pipe-color:var(--workshop-color);background:#163749;box-shadow:0 0 18px color-mix(in srgb,var(--workshop-color) 20%,transparent); }
.circuit-cell:disabled { cursor:default;opacity:1; }.circuit-center { position:absolute;left:40%;top:40%;width:20%;height:20%;background:var(--pipe-color);z-index:2;border-radius:3px; }
.circuit-arm { position:absolute;background:var(--pipe-color); }.arm-0 { left:43%;top:0;width:14%;height:50%; }.arm-1 { left:50%;top:43%;width:50%;height:14%; }.arm-2 { left:43%;top:50%;width:14%;height:50%; }.arm-3 { left:0;top:43%;width:50%;height:14%; }
.circuit-source { border-left:4px solid #34d399; }.circuit-sink { border-right:4px solid #fbbf24; }.circuit-port { position:absolute;top:36%;z-index:3;font-size:1rem; }.port-in { left:-17px;color:#34d399; }.port-out { right:-17px;color:#fbbf24; }
.circuit-hint { outline:2px solid #fbbf24;outline-offset:2px; }.workshop-instruction { font-size:.78rem;color:#b7c9e1;line-height:1.6; }.workshop-victory { padding:14px;border:1px solid var(--workshop-color);border-radius:10px;background:#0d3b38; }.workshop-victory strong { color:#a7f3d0;font-size:1rem; }.workshop-victory p { color:#d1e6df;font-size:.85rem;line-height:1.6;margin-top:8px; }
@media(max-width:380px) { .workshop-grid { gap:7px;padding-inline:14px; }.workshop-stats { font-size:.7rem; } }
.hud-level-progress { width:100%;height:3px;border-radius:3px;background:#314158;overflow:hidden;margin-top:3px; }.hud-level-progress span { display:block;height:100%;background:#7dd3fc; }
body:has(.modal-backdrop) #toast-container { visibility:hidden; }