/* sfmenu — in-game menu mockups rendered from data/menus/*.json.
   Loaded only on pages using the sfmenu shortcode (see partials/head.html).
   Geometry comes inline from the shortcode as percentages of the menu rect;
   font sizes come as px fallback + cqw so text scales with the panel. */

.sf-menu-fig {
  --sf-accent: #E8873A;
  --sf-navy: #1A2130;
  --sf-muted: #8A8F9C;
  --sf-field: #CCD1E0;
  margin: 1rem 0 1.5rem;
}
.sf-menu-fig, .sf-menu-fig * { box-sizing: border-box; }

.sf-menu-fig figcaption {
  font-size: 0.78rem;
  color: rgba(255, 255, 255, 0.35);
  text-align: center;
  margin-top: 0.5rem;
  font-style: italic;
}

/* --- the in-game screen backdrop (stage mode) --- */
.sf-stage {
  position: relative;
  overflow: hidden;
  max-width: 720px;
  margin: 0 auto;
  border: 1px solid rgba(255, 128, 0, 0.15);
  border-radius: 8px;
  background: radial-gradient(120% 90% at 50% 20%, #232c3f 0%, #141924 55%, #0c0f16 100%);
}
.sf-stage .sf-menu { position: absolute; }

/* --- the menu window itself --- */
.sf-menu {
  position: relative;
  container-type: inline-size;
  color: #fff;
  font-family: Arial, Helvetica, sans-serif; /* ergoec stand-in */
  letter-spacing: 0.01em;
}
.sf-mode-panel .sf-menu { margin: 0 auto; }

/* --- items --- */
.sf-mi {
  position: absolute;
  display: flex;
  align-items: center;
  min-width: 0;
  min-height: 0;
  white-space: pre; /* menu text uses significant spacing, e.g. "+++  TITLE  +++" */
}
.sf-mi > span { white-space: pre; }
.sf-hidden { display: none; }

/* text alignment: --sf-ax is the engine textalignx anchor as % of item width */
.sf-al-left { justify-content: flex-start; padding-left: var(--sf-ax, 0%); }
.sf-al-center { justify-content: center; }
.sf-al-right { justify-content: flex-end; padding-right: calc(100% - var(--sf-ax, 100%)); }

.sf-shadow { text-shadow: 0.08em 0.08em 0.12em rgba(10, 10, 10, 0.65); }
.sf-playercolor { color: var(--sf-accent); }
.sf-blend-add { mix-blend-mode: screen; }

/* window styles: FILLED gets inline background-color; GRADIENT reproduces the
   engine's gradient bar from the item backcolor (--sf-bc) */
.sf-ws-gradient {
  background: linear-gradient(90deg, transparent 0%, var(--sf-bc, transparent) 18%, var(--sf-bc, transparent) 82%, transparent 100%);
}

/* fonts (substitutes: no .fontdat metrics exist outside the game assets) */
.sf-f-ocr_a { font-family: 'Roboto Mono', 'Courier New', monospace; letter-spacing: 0; }
.sf-f-anewhope { font-family: 'Oswald', 'Arial Narrow', Impact, sans-serif; font-weight: 500; text-transform: uppercase; letter-spacing: 0.05em; }
.sf-f-arialnb { font-family: 'Arial Narrow', Arial, sans-serif; font-weight: 700; font-stretch: condensed; }

/* --- hover: sfHoverShader/sfHoverFill/sfHoverBorder are pure CSS --- */
.sf-hov:hover {
  background-image: var(--sf-hbg);
  background-size: 100% 100%;
  background-color: var(--sf-hfill, transparent);
  box-shadow: inset 0 0 0 1px var(--sf-hbrd, transparent);
}
/* focus-colour text brightening on interactive items; !important because item
   colour arrives as an inline style */
.sf-mi-button:not(.sf-deco):hover,
.sf-mi-multi:hover, .sf-mi-yesno:hover, .sf-mi-combo:hover, .sf-mi-bind:hover {
  color: var(--sf-focus, #fff) !important;
}

/* --- widget internals --- */

/* edit fields */
.sf-field {
  flex: 1;
  align-self: center;
  height: 72%;
  min-width: 12%;
  margin-left: 0.4em;
  background: rgba(6, 9, 14, 0.75);
  border: 1px solid rgba(204, 209, 224, 0.25);
  border-radius: 2px;
  color: var(--sf-field);
}

/* sliders */
.sf-track {
  position: relative;
  flex: 1;
  height: 26%;
  margin: 0 0.5em;
  background: rgba(6, 9, 14, 0.8);
  border: 1px solid rgba(204, 209, 224, 0.2);
  border-radius: 999px;
}
.sf-thumb {
  position: absolute;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 0.55em;
  height: 0.55em;
  border-radius: 50%;
  background: var(--sf-accent);
  box-shadow: 0 0 0.25em rgba(232, 135, 59, 0.6);
}
.sf-sval { color: var(--sf-field); font-size: 0.85em; }

/* checkboxes */
.sf-cb {
  width: 0.95em;
  height: 0.95em;
  margin-left: 0.4em;
  flex: none;
  background: url('/img/menus/check_box.png') center / contain no-repeat;
}
.sf-cb.sf-on { background-image: url('/img/menus/check_box.png'), url('/img/menus/check_mark.png'); background-size: contain, 80%; background-position: center; background-repeat: no-repeat; }

/* multi / yesno / combo current value */
.sf-mval { color: var(--sf-field); margin-left: 0.45em; }
.sf-mi-multi .sf-mval::after, .sf-mi-combo .sf-mval::after { content: ' \25BE'; opacity: 0.55; font-size: 0.8em; }

/* key binds */
.sf-key { margin-left: auto; color: var(--sf-muted); letter-spacing: 0.2em; }

/* listboxes */
.sf-mi-listbox { display: block; }
.sf-list { position: absolute; inset: 0; overflow: hidden; }
.sf-row { position: relative; display: block; }
.sf-row.sf-sel { background: rgba(232, 135, 59, 0.22); }
.sf-col {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  color: var(--sf-field);
}

/* image-grid listboxes (model pickers) */
.sf-tiles { position: absolute; inset: 0; display: flex; flex-wrap: wrap; align-content: flex-start; overflow: hidden; }
.sf-tile {
  border: 1px solid rgba(204, 209, 224, 0.18);
  background:
    radial-gradient(60% 70% at 50% 42%, rgba(138, 143, 156, 0.35) 0%, rgba(138, 143, 156, 0.08) 70%, transparent 100%),
    rgba(6, 9, 14, 0.5);
}

/* ownerdraw stubs: drawn procedurally in the game, shown honestly here */
.sf-mi-ownerdraw, .sf-od-wrap { display: flex; }
.sf-od {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  border: 1px dashed rgba(138, 143, 156, 0.45);
  border-radius: 3px;
  color: var(--sf-muted);
  font-family: Arial, Helvetica, sans-serif;
  font-size: clamp(8px, 1.5cqw, 12px);
  white-space: normal;
  padding: 2%;
}

/* 3D model placeholder */
.sf-model {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.3em;
  color: var(--sf-muted);
  font-size: clamp(9px, 1.8cqw, 13px);
  background: radial-gradient(55% 65% at 50% 45%, rgba(138, 143, 156, 0.18) 0%, transparent 75%);
  white-space: normal;
  text-align: center;
}
.sf-model small { font-size: 0.8em; opacity: 0.7; }

/* SF_PROGRESS bars */
.sf-prog { position: absolute; inset: 12% 2%; background: rgba(6, 9, 14, 0.8); border: 1px solid rgba(204, 209, 224, 0.2); }
.sf-prog > span { display: block; height: 100%; background: var(--sf-accent); opacity: 0.85; }

/* secondary text (text2) */
.sf-t2 { position: absolute; top: 50%; transform: translateY(-50%); }