/* ==========================================================================
   STICK ARENA RESKIN — MAP LAB (editor) + ARMORY
   Scope: #screen-editor and #screen-armory only.
   Loads after styles.css / sa-core.css: equal-specificity rules here win.
   Uses sa-core tokens (--sa-*) exclusively; no :root redefinitions.
   CRITICAL: .editor-canvas dimensions are never touched — only the frame
   around it (.editor-stage-wrap). The 3-column .editor-layout grid is kept.
   ========================================================================== */

/* --- Section plates: dark SA steel with frame, compact & centered --------- */
#screen-editor,
#screen-armory {
  max-width: 1180px;
  margin: 0 auto;
  padding: 18px 18px 22px;
  border: var(--sa-frame);
  border-radius: var(--sa-radius);
  background: linear-gradient(180deg, var(--sa-steel-600) 0%, var(--sa-steel-700) 55%, var(--sa-steel-800) 100%);
  box-shadow: var(--sa-bevel-panel), 0 3px 8px rgba(0, 0, 0, 0.4);
}

/* --- Section headings on the dark plate ------------------------------------ */
#screen-editor .section-heading,
#screen-armory .section-heading { margin-bottom: 18px; }

#screen-editor .eyebrow,
#screen-armory .eyebrow {
  color: var(--sa-gold);
  font-family: var(--sa-pixel);
  font-size: 9px;
  font-weight: 400;
  letter-spacing: 0.16em;
  text-shadow: 0 1px 0 rgba(0, 0, 0, 0.6);
}

#screen-editor .section-heading h1,
#screen-armory .section-heading h1 {
  color: #f2f6fb;
  font-family: var(--sa-chunky);
  font-weight: 800;
  text-shadow: 0 2px 0 rgba(0, 0, 0, 0.55);
}

#screen-editor .section-heading > div > p:last-child,
#screen-armory .section-heading > div > p:last-child {
  color: var(--sa-steel-200);
}

/* --- Field labels + muted copy inside steel panels ------------------------- */
#screen-editor .field-label {
  color: var(--sa-steel-200);
  font-family: var(--sa-pixel);
  font-size: 8px;
  font-weight: 400;
  letter-spacing: 0.12em;
}

#screen-editor .muted-copy,
#screen-armory .muted-copy { color: var(--sa-steel-300); }

/* --- Selects (hazard / decor / theme / template): dark well detail -------- */
#screen-editor .select-input {
  width: 100%;
  font-family: var(--sa-chunky);
  font-weight: 700;
  font-size: 12px;
  color: #dce8f4;
}

/* ==========================================================================
   TOOL GRID — square 3D steel buttons
   ========================================================================== */
#screen-editor .editor-tool-grid { gap: 6px; }

#screen-editor .editor-tool-grid button {
  min-height: 60px;
  border: 2px solid var(--sa-btn-border);
  border-radius: 7px;
  background: linear-gradient(180deg, var(--sa-steel-400) 0%, var(--sa-steel-500) 55%, var(--sa-steel-600) 100%);
  box-shadow:
    inset 0 2px 0 rgba(255, 255, 255, 0.24),
    inset 0 -3px 0 rgba(0, 0, 0, 0.32),
    0 2px 0 rgba(0, 0, 0, 0.42);
  color: var(--sa-steel-100);
  font-family: var(--sa-pixel);
  font-size: 8px;
  font-weight: 400;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  text-shadow: 0 1px 1px rgba(0, 0, 0, 0.6);
  cursor: pointer;
  transition: filter 80ms ease, transform 60ms ease, box-shadow 60ms ease;
}

#screen-editor .editor-tool-grid button b {
  color: #ffffff;
  font-size: 20px;
  line-height: 1;
  text-shadow: 0 2px 2px rgba(0, 0, 0, 0.65);
}

#screen-editor .editor-tool-grid button:hover {
  background: linear-gradient(180deg, var(--sa-steel-300) 0%, var(--sa-steel-400) 55%, var(--sa-steel-500) 100%);
  filter: brightness(1.1);
}

/* Active tool: pressed-in light face with gold border. */
#screen-editor .editor-tool-grid button.active {
  border-color: var(--sa-gold-dark);
  background: linear-gradient(180deg, var(--sa-btn-hi) 0%, var(--sa-btn-mid) 55%, var(--sa-btn-lo) 100%);
  box-shadow:
    inset 0 2px 4px rgba(30, 45, 62, 0.45),
    inset 0 -1px 0 rgba(255, 255, 255, 0.4),
    0 0 0 2px rgba(255, 210, 63, 0.4);
  color: var(--sa-btn-ink);
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.55);
  transform: translateY(1px);
}

#screen-editor .editor-tool-grid button.active b {
  color: var(--sa-btn-ink);
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.6);
}

/* ==========================================================================
   STAGE — dark well frame around the canvas (canvas size untouched)
   ========================================================================== */
#screen-editor .editor-stage-wrap {
  border: 3px solid var(--sa-well-line);
  border-radius: var(--sa-radius);
  background: var(--sa-well-deep);
  box-shadow:
    inset 0 3px 10px rgba(0, 0, 0, 0.7),
    inset 0 -1px 0 rgba(255, 255, 255, 0.06),
    0 1px 0 rgba(255, 255, 255, 0.14),
    0 3px 8px rgba(0, 0, 0, 0.4);
}

#screen-editor .editor-stage-hint {
  padding: 5px 8px;
  border: 1px solid rgba(126, 166, 212, 0.25);
  border-radius: 4px;
  background: rgba(11, 15, 22, 0.85);
  color: #9fc6e4;
  font-family: var(--sa-pixel);
  font-size: 8px;
  letter-spacing: 0.05em;
}

/* ==========================================================================
   INSPECTOR — validation well, saved-map rows
   ========================================================================== */

/* Validation: dark inset well, pixel status colors (ok green / warn yellow /
   error red). */
#screen-editor .editor-validation {
  margin-top: 14px;
  padding: 10px 12px;
  border: 2px solid var(--sa-well-line);
  border-radius: 5px;
  background: var(--sa-well);
  box-shadow: var(--sa-bevel-well);
  font-family: var(--sa-pixel);
  font-size: 9px;
}

#screen-editor .editor-validation.valid { border-color: #2c4a22; }
#screen-editor .editor-validation.valid strong {
  color: var(--sa-chat-green);
  text-shadow: 0 1px 0 rgba(0, 0, 0, 0.7);
}
#screen-editor .editor-validation.valid span { color: var(--sa-chat-dim); }

#screen-editor .editor-validation.invalid { border-color: #5a2318; }
#screen-editor .editor-validation.invalid strong {
  color: var(--sa-chat-red);
  text-shadow: 0 1px 0 rgba(0, 0, 0, 0.7);
}
#screen-editor .editor-validation ul { margin: 7px 0 0; padding-left: 16px; }
#screen-editor .editor-validation li { color: var(--sa-chat-sys); line-height: 1.5; }

/* Saved maps heading: chunky title + gold pixel counter chip. */
#screen-editor .saved-map-heading h3 {
  color: #f2f6fb;
  font-family: var(--sa-chunky);
  font-weight: 800;
  font-size: 14px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  text-shadow: 0 1px 0 rgba(0, 0, 0, 0.55);
}

#screen-editor .saved-map-heading span {
  min-width: 22px;
  padding: 3px 6px;
  border: 1px solid var(--sa-gold-outline);
  border-radius: 4px;
  background: linear-gradient(180deg, var(--sa-gold-hi), var(--sa-gold) 55%, var(--sa-gold-dark));
  color: #3a2c04;
  font-family: var(--sa-pixel);
  font-size: 8px;
  text-align: center;
}

/* Saved-map rows: steel 3D rows with hover. */
#screen-editor .saved-map-row {
  margin-bottom: 6px;
  padding: 8px 10px;
  border: 2px solid var(--sa-btn-border);
  border-radius: 6px;
  background: linear-gradient(180deg, var(--sa-steel-500) 0%, var(--sa-steel-600) 60%, var(--sa-steel-700) 100%);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.18),
    inset 0 -2px 0 rgba(0, 0, 0, 0.26);
  transition: filter 80ms ease;
}

#screen-editor .saved-map-row:hover { filter: brightness(1.12); }

#screen-editor .saved-map-row strong {
  color: #eef4fa;
  font-family: var(--sa-chunky);
  font-weight: 800;
  font-size: 12px;
  text-shadow: 0 1px 1px rgba(0, 0, 0, 0.6);
}

#screen-editor .saved-map-row small {
  color: var(--sa-chat-dim);
  font-family: var(--sa-pixel);
  font-size: 7px;
  letter-spacing: 0.04em;
}

#screen-editor .saved-map-empty {
  color: var(--sa-steel-300);
  font-family: var(--sa-pixel);
  font-size: 8px;
}

/* Danger icon button (delete saved map) matches the SA danger look. */
#screen-editor .icon-button.danger {
  border: 2px solid #3d1109;
  border-radius: 7px;
  background: linear-gradient(180deg, #f6b8ae 0%, #d96a58 55%, #a83f30 100%);
  color: #2c0c05;
  box-shadow:
    inset 0 2px 0 rgba(255, 255, 255, 0.6),
    inset 0 -3px 0 rgba(90, 25, 14, 0.5),
    0 2px 0 rgba(0, 0, 0, 0.4);
}

/* Action hierarchy note: Play local / Publish stay .button-primary (gold),
   Save map / Host online stay .button-secondary (light steel) — both inherit
   the chunky 3D look from sa-core .button. */
#screen-editor .editor-primary-actions .button,
#screen-editor .editor-inspector > .button-full {
  font-size: 13px;
}

/* ==========================================================================
   ARMORY — weapon cards as dark steel display cases
   ========================================================================== */
#screen-armory .weapon-grid { gap: 14px; }

#screen-armory .weapon-card {
  overflow: hidden;
  padding: 16px;
  border: var(--sa-frame);
  border-radius: var(--sa-radius);
  background: linear-gradient(180deg, var(--sa-steel-600) 0%, var(--sa-steel-700) 55%, var(--sa-steel-800) 100%);
  box-shadow: var(--sa-bevel-panel), 0 3px 8px rgba(0, 0, 0, 0.4);
}

/* Super gun: gold-rimmed case. */
#screen-armory .weapon-card.super {
  border-color: var(--sa-gold-dark);
  box-shadow:
    var(--sa-bevel-panel),
    0 0 0 1px rgba(255, 210, 63, 0.35),
    0 3px 10px rgba(0, 0, 0, 0.5);
}

/* Preview: weapon art floats over a dark radial vitrine. */
#screen-armory .weapon-card canvas {
  background: radial-gradient(ellipse at 50% 42%, #2c3a4d 0%, var(--sa-well) 62%, var(--sa-well-deep) 100%);
  border-bottom: 2px solid var(--sa-well-line);
  box-shadow: inset 0 3px 10px rgba(0, 0, 0, 0.65);
}

/* Name: chunky; tier/category badge: pixel. */
#screen-armory .weapon-card-heading strong {
  color: #f2f6fb;
  font-family: var(--sa-chunky);
  font-weight: 800;
  font-size: 16px;
  text-shadow: 0 1px 0 rgba(0, 0, 0, 0.55);
}

#screen-armory .weapon-card-heading span {
  color: var(--sa-steel-300);
  font-family: var(--sa-pixel);
  font-size: 8px;
  font-weight: 400;
  letter-spacing: 0.1em;
  text-shadow: 0 1px 0 rgba(0, 0, 0, 0.6);
}

#screen-armory .weapon-card.super .weapon-card-heading span {
  color: var(--sa-gold);
  text-shadow:
    1px 1px 0 var(--sa-gold-outline),
    0 2px 2px rgba(0, 0, 0, 0.6);
}

#screen-armory .weapon-card p {
  color: var(--sa-steel-200);
  font-size: 11px;
  line-height: 1.45;
}

/* Stat bars: dark well track, steel-blue fill (gold on super guns). */
#screen-armory .weapon-stat span {
  color: var(--sa-steel-300);
  font-family: var(--sa-pixel);
  font-size: 8px;
  font-weight: 400;
  letter-spacing: 0.06em;
}

#screen-armory .weapon-stat i {
  height: 8px;
  border: 1px solid var(--sa-well-line);
  border-radius: 4px;
  background: var(--sa-well-deep);
  box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.65);
}

#screen-armory .weapon-stat b {
  background: linear-gradient(180deg, var(--sa-bar-hi) 0%, var(--sa-bar-lo) 100%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.4);
}

#screen-armory .weapon-card.super .weapon-stat b {
  background: linear-gradient(180deg, var(--sa-gold-hi) 0%, var(--sa-gold) 55%, var(--sa-gold-dark) 100%);
}

/* Ammo line: gold pixel readout. */
#screen-armory .weapon-ammo {
  color: var(--sa-gold);
  font-family: var(--sa-pixel);
  font-size: 9px;
  letter-spacing: 0.06em;
  text-shadow: 0 1px 0 rgba(0, 0, 0, 0.65);
}