/* nullbyte/css/dogfight.css
 * TERMINAL MASTERS -- typing-fighter GHOST app styles.
 * Scoped under .df-app (the mounted body) so it never touches other apps.
 * Colors from GHOST theme vars (--amber/--cyan/--magenta/--fg-*/--bg-*).
 */

.df-app {
  height: 100%;                 /* seuraa nos-win-body:a (flex 1 1 auto) -> resize/fullscreen dynaaminen */
  display: flex; flex-direction: column;
  background: var(--bg, #0a0b0d);
  color: var(--fg, #c8cdd6);
  font-family: var(--font-mono, ui-monospace, monospace);
  overflow: hidden;
  margin: -14px;                /* kumoa nos-win-body:n 14px padding niin peli tayttaa reunaan */
  min-height: 0;
}

/* ---- menu ------------------------------------------------------------ */
.df-wrap {
  flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  gap: 18px; padding: 24px; text-align: center; overflow: auto;
}
.df-hero { margin-bottom: 6px; }
.df-logo {
  font-family: var(--font-display, var(--font-mono));
  font-size: 28px; letter-spacing: 6px; color: var(--amber, #ffb020);
  text-shadow: 0 0 22px rgba(255,176,32,.35);
}
.df-tag { font-size: 11px; letter-spacing: 2px; color: var(--fg-dim, #7d848f); margin-top: 6px; }

.df-menu { display: flex; flex-direction: column; gap: 10px; width: 100%; max-width: 340px; }
.df-mbtn {
  display: flex; flex-direction: column; align-items: flex-start; gap: 3px;
  padding: 14px 16px; cursor: pointer; text-align: left;
  background: var(--bg-panel, #12141a);
  border: 1px solid var(--border, #262b36);
  border-left: 2px solid var(--amber-dim, #a8741a);
  transition: border-color .12s, background .12s, transform .06s;
  font-family: var(--font-mono, monospace);
}
.df-mbtn:hover { border-left-color: var(--amber, #ffb020); background: var(--bg-soft, #171a22); }
.df-mbtn:active { transform: translateX(1px); }
.df-mbtn-t { font-size: 15px; letter-spacing: 2px; color: var(--amber, #ffb020); }
.df-mbtn-d { font-size: 10px; letter-spacing: 1px; color: var(--fg-dim, #7d848f); }

.df-challenge { border-left-color: var(--magenta, #d84f8c); }
.df-challenge:hover { border-left-color: var(--magenta, #d84f8c); }
.df-challenge .df-mbtn-t { color: var(--magenta, #d84f8c); }
.df-ranks { border-left-color: var(--cyan, #35c8d8); }
.df-ranks .df-mbtn-t { color: var(--cyan, #35c8d8); }

.df-stub { font-size: 12px; color: var(--fg-dim); line-height: 1.9; letter-spacing: 1px; }

/* ---- difficulty select ---------------------------------------------- */
.df-diffs { display: flex; flex-direction: column; gap: 8px; width: 100%; max-width: 340px; }
.df-diffbtn {
  display: flex; justify-content: space-between; align-items: center;
  padding: 12px 16px; cursor: pointer;
  background: var(--bg-panel, #12141a); border: 1px solid var(--border, #262b36);
  font-family: var(--font-mono, monospace);
}
.df-diffbtn:hover { border-color: var(--amber, #ffb020); }
.df-diff-l { font-size: 13px; letter-spacing: 2px; color: var(--fg, #c8cdd6); }
.df-diff-m { font-size: 10px; letter-spacing: 1px; color: var(--fg-faint, #4a4f59); }

/* ---- arena / HUD ---------------------------------------------------- */
.df-arena-wrap { flex: 1 1 auto; display: flex; flex-direction: column; overflow: hidden; min-height: 0; }
.df-hud {
  display: flex; align-items: stretch; gap: 12px;
  padding: 10px 14px; border-bottom: 1px solid var(--border, #262b36);
  background: var(--bg-panel, #12141a); flex-shrink: 0;
}
.df-fighter { flex: 1; }
.df-ftop { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 4px; }
.df-fname { font-size: 11px; letter-spacing: 2px; text-transform: uppercase; color: var(--fg-dim, #7d848f); }
.df-me .df-fname { color: var(--amber, #ffb020); }
.df-foe .df-fname { color: var(--magenta, #d84f8c); }
.df-fhp { font-size: 10px; color: var(--fg-faint, #4a4f59); letter-spacing: 1px; }
.df-hpbar {
  height: 13px; background: var(--bg-soft, #171a22);
  border: 1px solid var(--border, #262b36); position: relative; overflow: hidden;
}
.df-hpfill { position: absolute; inset: 0; right: auto; transition: width .35s cubic-bezier(.2,.7,.3,1); }
.df-me-fill  { background: linear-gradient(90deg, var(--amber-dim, #a8741a), var(--amber, #ffb020)); }
.df-foe-fill { background: linear-gradient(90deg, #7a2d52, var(--magenta, #d84f8c)); }
.df-hit { animation: df-hpflash .18s; }
@keyframes df-hpflash { 0%{filter:brightness(2.4)} 100%{filter:none} }
.df-vs { align-self: center; font-size: 10px; letter-spacing: 3px; color: var(--fg-faint, #4a4f59); }

.df-wavebar {
  display: flex; justify-content: space-between; align-items: center;
  padding: 5px 14px; font-size: 10px; letter-spacing: 2px;
  color: var(--fg-faint, #4a4f59); border-bottom: 1px solid var(--border, #262b36);
  background: var(--bg, #0a0b0d); flex-shrink: 0;
}
.df-combo { color: var(--amber, #ffb020); }

.df-arena {
  position: relative; flex: 1 1 auto; overflow: hidden; min-height: 0;
  background: radial-gradient(120% 80% at 50% -10%, rgba(255,176,32,.05), transparent 60%), var(--bg, #0a0b0d);
}
.df-word {
  position: absolute; font-size: 18px; letter-spacing: 1px;
  color: var(--fg, #c8cdd6); background: var(--bg-panel, #12141a);
  border: 1px solid var(--border, #262b36); border-left: 2px solid var(--cyan, #35c8d8);
  padding: 5px 11px; white-space: nowrap; will-change: top; user-select: none;
}
.df-word .df-done { color: var(--amber, #ffb020); }
.df-word .df-cur  { color: var(--bg, #0a0b0d); background: var(--amber, #ffb020); }
.df-word.df-active { border-left-color: var(--amber, #ffb020); box-shadow: 0 0 0 1px var(--amber-dim, #a8741a), 0 0 18px rgba(255,176,32,.25); }
.df-word.df-dying { animation: df-worddie .2s forwards; }
@keyframes df-worddie { 0%{transform:scale(1);opacity:1} 100%{transform:scale(1.35);opacity:0} }
.df-word.df-breach { border-left-color: var(--red, #e0524a); animation: df-wordbreach .3s forwards; }
@keyframes df-wordbreach { 0%{opacity:1} 100%{opacity:0;transform:translateY(8px)} }

.df-dmg {
  position: absolute; font-size: 15px; font-weight: bold;
  color: var(--amber, #ffb020); pointer-events: none;
  animation: df-dmgfloat .7s forwards; letter-spacing: 1px; transform: translateX(-50%);
}
.df-dmg-foe { color: var(--magenta, #d84f8c); }
@keyframes df-dmgfloat { 0%{opacity:1;transform:translate(-50%,0)} 100%{opacity:0;transform:translate(-50%,-34px)} }

.df-inputline {
  display: flex; align-items: center; gap: 10px;
  padding: 11px 14px; border-top: 1px solid var(--border, #262b36);
  background: var(--bg-panel, #12141a); flex-shrink: 0;
}
.df-prompt { color: var(--amber, #ffb020); font-size: 16px; }
.df-entry {
  flex: 1; background: transparent; border: none; outline: none;
  color: var(--fg, #c8cdd6); font-family: var(--font-mono, monospace);
  font-size: 16px; letter-spacing: 1px; caret-color: var(--amber, #ffb020);
}
.df-entry::placeholder { color: var(--fg-faint, #4a4f59); }

/* ---- end screen ----------------------------------------------------- */
.df-endverdict { font-size: 38px; letter-spacing: 8px; margin-bottom: 16px; }
.df-win  { color: var(--green, #4fd67a); text-shadow: 0 0 28px rgba(79,214,122,.4); }
.df-lose { color: var(--red, #e0524a); text-shadow: 0 0 28px rgba(224,82,74,.4); }
.df-endstats { display: flex; flex-direction: column; gap: 4px; margin-bottom: 8px; }
.df-statrow { font-size: 13px; color: var(--fg, #c8cdd6); letter-spacing: 1px; }
.df-statrow b { color: var(--amber, #ffb020); }

@media (max-width: 480px) {
  .df-logo { font-size: 22px; letter-spacing: 4px; }
  .df-word { font-size: 16px; }
}

/* ---- wave feedback ---------------------------------------------------- */
.df-waveflash { animation: df-waveflash .5s; }
@keyframes df-waveflash {
  0%   { color: var(--amber, #ffb020); text-shadow: 0 0 14px rgba(255,176,32,.9); }
  100% { color: var(--fg-faint, #4a4f59); text-shadow: none; }
}
.df-arenaflash::before {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(120% 60% at 50% 0%, rgba(255,176,32,.16), transparent 55%);
  animation: df-arenaflash .55s forwards; z-index: 2;
}
@keyframes df-arenaflash { 0%{opacity:1} 100%{opacity:0} }

/* ---- challenge board (PvP) ------------------------------------------- */
/* Uses GHOST theme vars so it matches the rest of the app. Centered narrow
 * column; label always ABOVE its input (never inline), full-width fields. */
.dfc-scroll {
  flex: 1 1 auto; min-height: 0; width: 100%;
  overflow-y: auto; display: flex; flex-direction: column; align-items: center;
  padding: 20px 0 30px; box-sizing: border-box;
}
.dfc-col {
  width: 100%; max-width: 360px; padding: 0 20px; box-sizing: border-box;
  display: flex; flex-direction: column; align-items: stretch; gap: 14px;
}
.dfc-title {
  text-align: center; font-family: var(--font-display, var(--font-mono));
  font-size: 30px; letter-spacing: 6px; color: var(--magenta, #d84f8c);
  text-shadow: 0 0 20px rgba(216,79,140,.4); margin: 4px 0 0;
}
.dfc-sub { text-align: center; font-size: 12px; letter-spacing: 1px; color: var(--fg-dim, #7d848f); margin-bottom: 2px; }

.dfc-field { display: flex; flex-direction: column; gap: 6px; }
.dfc-field label {
  font-size: 11px; letter-spacing: 2px; text-transform: uppercase;
  color: var(--fg-dim, #7d848f);
}
.dfc-field input, .dfc-field select {
  width: 100%; box-sizing: border-box;
  background: var(--bg-soft, #171a22); border: 1px solid var(--border, #262b36);
  color: var(--fg, #c8cdd6); padding: 11px 12px;
  font-family: var(--font-mono, monospace); font-size: 15px; letter-spacing: 1px;
  outline: none;
}
.dfc-field input:focus, .dfc-field select:focus {
  border-color: var(--cyan, #35c8d8); box-shadow: 0 0 0 1px var(--cyan, #35c8d8);
}
.dfc-field input::placeholder { color: var(--fg-faint, #4a4f59); }

.dfc-bet {
  border: 1px solid var(--border, #262b36); background: var(--bg-panel, #12141a);
  border-left: 2px solid var(--magenta, #d84f8c);
  padding: 14px; display: flex; flex-direction: column; gap: 12px;
}
.dfc-bet-h {
  text-align: center; font-size: 12px; letter-spacing: 3px;
  color: var(--magenta, #d84f8c);
}

.dfc-send {
  width: 100%; box-sizing: border-box; cursor: pointer; padding: 14px;
  background: var(--bg-panel, #12141a); border: 1px solid var(--magenta, #d84f8c);
  border-left: 2px solid var(--magenta, #d84f8c);
  color: var(--magenta, #d84f8c); font-family: var(--font-mono, monospace);
  font-size: 15px; letter-spacing: 3px;
  transition: background .12s, transform .06s;
}
.dfc-send:hover { background: var(--bg-soft, #171a22); }
.dfc-send:active { transform: translateY(1px); }

.dfc-msg { min-height: 16px; text-align: center; font-size: 12px; letter-spacing: 1px; color: var(--cyan, #35c8d8); }
.dfc-msg.dfc-err { color: var(--red, #e0524a); }

.dfc-lists { display: flex; flex-direction: column; gap: 14px; margin-top: 2px; }
.dfc-lh { text-align: center; font-size: 11px; letter-spacing: 3px; color: var(--fg-dim, #7d848f); margin-bottom: 6px; }
.dfc-empty { text-align: center; font-size: 12px; color: var(--fg-faint, #4a4f59); }
.dfc-row {
  border: 1px solid var(--border, #262b36); background: var(--bg-panel, #12141a);
  padding: 10px 12px; margin-bottom: 8px;
  display: flex; flex-direction: column; gap: 4px;
}
.dfc-who { font-size: 15px; letter-spacing: 1px; color: var(--fg, #c8cdd6); }
.dfc-meta { font-size: 12px; letter-spacing: 1px; color: var(--fg-dim, #7d848f); }
.dfc-acts { display: flex; gap: 8px; margin-top: 6px; }
.dfc-acc, .dfc-dec {
  flex: 1; padding: 9px; cursor: pointer; font-family: var(--font-mono, monospace);
  font-size: 12px; letter-spacing: 2px; border: 1px solid;
}
.dfc-acc { background: transparent; border-color: var(--cyan, #35c8d8); color: var(--cyan, #35c8d8); }
.dfc-acc:hover { background: var(--bg-soft, #171a22); }
.dfc-dec { background: transparent; border-color: var(--border, #262b36); color: var(--fg-dim, #7d848f); }

.dfc-back {
  width: 100%; box-sizing: border-box; cursor: pointer; padding: 14px; margin-top: 4px;
  background: transparent; border: 1px solid var(--amber-dim, #a8741a);
  border-left: 2px solid var(--amber, #ffb020);
  color: var(--amber, #ffb020); font-family: var(--font-mono, monospace);
  font-size: 14px; letter-spacing: 3px;
}
.dfc-back:hover { background: var(--bg-soft, #171a22); }

/* ---- sabotage (pre-match window + blur effect) ---------------------- */
.dfc-sabo {
  position: absolute; inset: 0; display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: 14px; padding: 20px;
  text-align: center; box-sizing: border-box;
}
.dfc-sabo-h {
  font-family: var(--font-display, var(--font-mono));
  font-size: 22px; letter-spacing: 5px; color: var(--magenta, #d84f8c);
  text-shadow: 0 0 18px rgba(216,79,140,.4);
}
.dfc-sabo-sub { font-size: 12px; letter-spacing: 1px; color: var(--fg-dim, #7d848f); }
.dfc-sabo-opts { display: flex; gap: 12px; flex-wrap: wrap; justify-content: center; }
.dfc-sabo-btn {
  display: flex; flex-direction: column; align-items: flex-start; gap: 3px;
  width: 150px; padding: 12px 14px; cursor: pointer; text-align: left;
  background: var(--bg-panel, #12141a); border: 1px solid var(--border, #262b36);
  border-left: 2px solid var(--magenta, #d84f8c);
  font-family: var(--font-mono, monospace); color: var(--fg, #c8cdd6);
}
.dfc-sabo-btn:hover { background: var(--bg-soft, #171a22); }
.dfc-sabo-btn:disabled { cursor: default; opacity: .6; }
.dfc-sabo-btn b { font-size: 14px; letter-spacing: 2px; color: var(--magenta, #d84f8c); }
.dfc-sabo-btn span { font-size: 10px; letter-spacing: .5px; color: var(--fg-dim, #7d848f); }
.dfc-sabo-btn em { font-size: 11px; font-style: normal; letter-spacing: 1px; color: var(--cyan, #35c8d8); }
.dfc-sabo-btn.dfc-sabo-on {
  border-color: var(--magenta, #d84f8c);
  box-shadow: 0 0 0 1px var(--magenta, #d84f8c), 0 0 16px rgba(216,79,140,.3);
}
.dfc-sabo-btn.dfc-sabo-on b::after { content: ' \2713'; }
.dfc-sabo-msg { min-height: 14px; font-size: 12px; letter-spacing: 1px; color: var(--cyan, #35c8d8); }
.dfc-sabo-go {
  padding: 13px 26px; cursor: pointer; font-family: var(--font-mono, monospace);
  font-size: 14px; letter-spacing: 3px; background: var(--bg-panel, #12141a);
  border: 1px solid var(--amber-dim, #a8741a); border-left: 2px solid var(--amber, #ffb020);
  color: var(--amber, #ffb020);
}
.dfc-sabo-go:hover { background: var(--bg-soft, #171a22); }

/* BLUR sabotage: fog a falling word ~2s. Not a whole-round blind. */
.df-word.df-blur { filter: blur(5px); transition: filter .25s; }

/* ==================================================================== */
/* 4v4 CREW WAR - party build / invites / lobby (dfp-) + team damage    */
/* panel (dft-). Reuses the dfc- column + GHOST theme vars so it matches */
/* the 1v1 challenge board.                                             */
/* ==================================================================== */

/* shared message line (create/join/build/invite feedback) */
.dfp-msg { min-height: 16px; text-align: center; font-size: 12px; letter-spacing: 1px; color: var(--cyan, #35c8d8); }
.dfp-msg.dfc-err { color: var(--red, #e0524a); }

/* ---- hub: incoming invites + create ---------------------------------- */
.dfp-invites { display: flex; flex-direction: column; }
.dfp-new { border-color: var(--cyan, #35c8d8); border-left-color: var(--cyan, #35c8d8); color: var(--cyan, #35c8d8); }
.dfp-new:hover { background: var(--bg-soft, #171a22); }

/* ---- captain build: roster slots ------------------------------------- */
.dfp-roster { display: flex; flex-direction: column; gap: 8px; margin: 2px 0; }
.dfp-slot {
  display: flex; justify-content: space-between; align-items: center;
  padding: 11px 13px; border: 1px solid var(--border, #262b36);
  background: var(--bg-panel, #12141a); border-left: 2px solid var(--border, #262b36);
}
.dfp-slot-h { font-size: 14px; letter-spacing: 1px; color: var(--fg, #c8cdd6); }
.dfp-slot-tag { font-size: 10px; letter-spacing: 2px; color: var(--fg-faint, #4a4f59); }
.dfp-slot-joined  { border-left-color: var(--green, #4fd67a); }
.dfp-slot-joined  .dfp-slot-tag { color: var(--green, #4fd67a); }
.dfp-slot-invited { border-left-color: var(--amber, #ffb020); }
.dfp-slot-invited .dfp-slot-tag { color: var(--amber, #ffb020); }
.dfp-slot-empty { opacity: .55; border-left-style: dashed; }
.dfp-slot-empty .dfp-slot-h { color: var(--fg-faint, #4a4f59); font-style: italic; }

/* seat 0 (captain) reads as joined but gets the cyan accent */
.dfp-slot-joined:first-child { border-left-color: var(--cyan, #35c8d8); }
.dfp-slot-joined:first-child .dfp-slot-tag { color: var(--cyan, #35c8d8); }

/* invite row: handle input + button side by side */
.dfp-invrow { display: flex; flex-direction: column; gap: 8px; }
.dfp-invrow .dfc-send { border-color: var(--cyan, #35c8d8); border-left-color: var(--cyan, #35c8d8); color: var(--cyan, #35c8d8); }

.dfp-challenge-box { display: flex; flex-direction: column; gap: 12px; }
.dfp-pc-in { display: flex; flex-direction: column; }

/* asymmetric-stake consent line in the join screen */
.dfp-asym {
  display: flex; align-items: flex-start; gap: 8px; cursor: pointer;
  font-size: 11px; letter-spacing: .5px; color: var(--fg-dim, #7d848f); line-height: 1.4;
}
.dfp-asym input { width: auto; margin-top: 2px; accent-color: var(--magenta, #d84f8c); }

.dfp-lobby-hint { line-height: 1.7; }

/* ---- in-fight team damage panel (weak-link visibility) --------------- */
.df-team-mode .df-arena { flex: 1 1 auto; }
.dft-panel {
  flex-shrink: 0; display: flex; gap: 1px;
  border-top: 1px solid var(--border, #262b36);
  background: var(--border, #262b36); max-height: 38%; overflow: hidden;
}
.dft-col {
  flex: 1; min-width: 0; padding: 7px 10px; overflow-y: auto;
  background: var(--bg-panel, #12141a);
  display: flex; flex-direction: column; gap: 4px;
}
.dft-mine { border-top: 2px solid var(--amber, #ffb020); }
.dft-foe  { border-top: 2px solid var(--magenta, #d84f8c); }
.dft-h {
  font-size: 9px; letter-spacing: 2px; text-transform: uppercase;
  color: var(--fg-dim, #7d848f); margin-bottom: 2px;
}
.dft-mine .dft-h { color: var(--amber, #ffb020); }
.dft-foe  .dft-h { color: var(--magenta, #d84f8c); }
.dft-row { display: flex; align-items: center; gap: 6px; font-size: 11px; }
.dft-name {
  flex: 0 0 33%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  letter-spacing: .5px; color: var(--fg-dim, #7d848f);
}
.dft-you .dft-name { color: var(--fg, #c8cdd6); font-weight: bold; }
.dft-bar {
  flex: 1 1 auto; height: 8px; background: var(--bg-soft, #171a22);
  border: 1px solid var(--border, #262b36); position: relative; overflow: hidden;
}
.dft-fill { position: absolute; inset: 0; right: auto; transition: width .4s ease; }
.dft-mine .dft-fill { background: linear-gradient(90deg, var(--amber-dim, #a8741a), var(--amber, #ffb020)); }
.dft-foe  .dft-fill { background: linear-gradient(90deg, #7a2d52, var(--magenta, #d84f8c)); }
.dft-dmg { flex: 0 0 auto; min-width: 30px; text-align: right; color: var(--fg, #c8cdd6); letter-spacing: .5px; }

@media (max-width: 480px) {
  .dft-panel { max-height: 44%; }
  .dft-name { flex-basis: 40%; }
}