/* Deadly Fear v22.4.17 — Human Design / Visual Consistency Pass
   Purpose: make the live game feel intentionally art-directed instead of like a stack
   of unrelated concept mockups. This file deliberately overrides older polish layers. */

:root{
  --dfh-bg:#080b0f;
  --dfh-surface:#0f141a;
  --dfh-surface-2:#141a21;
  --dfh-surface-3:#192029;
  --dfh-border:#29313b;
  --dfh-border-strong:#3a4552;
  --dfh-text:#e8ecf1;
  --dfh-muted:#8a95a4;
  --dfh-muted-2:#657181;
  --dfh-accent:#d43a52;
  --dfh-accent-strong:#ef4961;
  --dfh-success:#4fc47a;
  --dfh-warning:#d7a849;
  --dfh-danger:#e25162;
  --dfh-radius:10px;
  --dfh-shadow:0 10px 28px rgba(0,0,0,.24);
  --dfh-shadow-soft:0 5px 18px rgba(0,0,0,.18);
  --dfh-font:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  --dfh-mono:"SFMono-Regular",Consolas,"Liberation Mono",Menlo,monospace;
}

/* --------------------------------------------------------------------------
   Foundation: one typography and spacing language
   -------------------------------------------------------------------------- */
html,body{background:var(--dfh-bg)!important}
body.df-shell,
body.df-command-shell-body{
  color:var(--dfh-text)!important;
  font-family:var(--dfh-font)!important;
  font-synthesis:none;
  text-rendering:optimizeLegibility;
}
body.df-shell *{font-family:inherit}
body.df-shell code,
body.df-shell pre,
body.df-shell kbd,
body.df-shell .df-page-kicker,
body.df-shell .crime-kicker,
body.df-shell .m210-k,
body.df-shell .df-job-kicker,
body.df-shell .heist-kicker,
body.df-shell .npc-kicker,
body.df-shell .section-eyebrow,
body.df-shell .df-login-kicker,
body.df-shell .df-register-kicker,
body.df-shell .df-dash-intro-kicker,
body.df-shell .df-qs-kicker{
  font-family:var(--dfh-mono)!important;
}

body.df-shell h1,
body.df-shell h2,
body.df-shell h3{
  color:var(--dfh-text)!important;
  letter-spacing:-.025em!important;
  text-shadow:none!important;
}
body.df-shell p{color:var(--dfh-muted);line-height:1.55}
body.df-shell a{transition:color .14s ease,border-color .14s ease,background-color .14s ease,opacity .14s ease!important}

/* Kill the most common "AI concept UI" tells: giant glow, floating hover, shiny gradients. */
body.df-shell :where(.df-card,.contract,.mission,.crime-card,.heist-card,.df-job-card,.npc-card,.load-card,.df-dash-card,.df-qs-step,.df-action-alert-card,.df-login-status-card,.df-register-feature,.df-register-perk){
  box-shadow:var(--dfh-shadow-soft)!important;
}
/* v22.4.76: redesigned action pages own hover depth/motion.
   Keep the older restrained hover only for legacy generic cards. */
body.df-shell :where(.df-card,.df-qs-step,.df-action-alert-card):hover{
  transform:none!important;
  box-shadow:var(--dfh-shadow-soft)!important;
}

/* --------------------------------------------------------------------------
   Shared command deck / menu
   -------------------------------------------------------------------------- */
.df-command-nav{
  background:#0b0f14!important;
  border-color:#202833!important;
  box-shadow:0 6px 22px rgba(0,0,0,.24)!important;
}
.df-command-nav::before,.df-command-nav::after{opacity:.18!important;filter:none!important}
.df-command-mark,
.df-command-trigger,
.df-command-icon-btn,
.df-mobile-menu-toggle{
  border-radius:8px!important;
  background:#10161d!important;
  border-color:#2a3440!important;
  box-shadow:none!important;
}
.df-command-trigger:hover,
.df-command-group.is-open>.df-command-trigger,
.df-command-home-link.active,
.df-command-group.has-active>.df-command-trigger{
  transform:none!important;
  background:#161d25!important;
  border-color:#465262!important;
  box-shadow:none!important;
}
.df-command-group.has-active>.df-command-trigger:after,
.df-command-home-link.active:after{
  box-shadow:none!important;
  height:2px!important;
}
.df-command-support-link{
  color:#e4bd76!important;
  background:#17140f!important;
  border-color:#554329!important;
  box-shadow:none!important;
}
.df-command-support-link::before,
.df-command-link[href="donate.php"]::before{display:none!important}
.df-command-support-link:hover,.df-command-support-link.active{
  transform:none!important;
  color:#f3d49a!important;
  background:#1d1811!important;
  border-color:#705936!important;
  box-shadow:none!important;
}
.df-command-support-link .support-heart,
.df-command-link[href="donate.php"] .df-command-link-icon{filter:none!important;text-shadow:none!important}
.df-command-dropdown{
  border-radius:10px!important;
  background:#0d1218!important;
  border-color:#34404d!important;
  box-shadow:0 18px 48px rgba(0,0,0,.46)!important;
}
.df-command-dropdown::before{opacity:.14!important}
.df-command-link{
  border-radius:8px!important;
  background:#10151c!important;
  border-color:#222b35!important;
  box-shadow:none!important;
}
.df-command-link:hover,.df-command-link.active{
  transform:none!important;
  background:#151c24!important;
  border-color:#3e4a58!important;
}
.df-command-link.active:before{box-shadow:none!important;width:2px!important}
.df-command-link-icon{
  border-radius:7px!important;
  background:#0c1117!important;
  border-color:#2a3440!important;
  box-shadow:none!important;
}
.df-command-trigger-badge,.df-command-icon-badge,.df-command-new-badge{box-shadow:none!important}
.df-quick-links-sheet{
  border-radius:12px!important;
  background:#0d1218!important;
  box-shadow:0 20px 56px rgba(0,0,0,.52)!important;
}
.df-quick-link-tile,.df-quick-pick-label{border-radius:8px!important;background:#10151b!important}

/* --------------------------------------------------------------------------
   Generic page heroes and sections
   -------------------------------------------------------------------------- */
:where(.crime-hero,.m210-hero,.df-job-hero,.heist-hero,.npc-hero,.df-dash-card,.df-quick-start,.df-next-steps,.df-action-alerts,.df-login-intro,.df-login-form-panel,.df-register-intro,.df-register-form-panel){
  border-radius:var(--dfh-radius)!important;
  box-shadow:var(--dfh-shadow)!important;
}
:where(.crime-hero,.m210-hero,.df-job-hero,.heist-hero,.npc-hero){
  border-color:#323c48!important;
}
:where(.crime-kicker,.m210-k,.df-job-kicker,.heist-kicker,.npc-kicker,.df-login-kicker,.df-register-kicker,.df-dash-intro-kicker,.df-qs-kicker){
  color:#aab4c1!important;
  font-size:10px!important;
  font-weight:700!important;
  letter-spacing:.08em!important;
  text-transform:none!important;
}

/* Keep backgrounds cinematic, but make the interface itself restrained. */
.crime-hero,
.df-job-hero,
.heist-hero,
.npc-hero{
  isolation:isolate;
}
.crime-hero::before,
.df-job-hero::before,
.heist-hero::before,
.npc-hero::before{
  opacity:.55!important;
}

/* Shared section/card surfaces */
:where(.m210-sec,.df-city-career-board,.heist-stage,.fight-result,.district-progress,.event-strip,.df-action-alerts,.df-quick-start,.df-next-steps){
  background:#0f141a!important;
  border-color:#2c3540!important;
  box-shadow:var(--dfh-shadow-soft)!important;
}

/* --------------------------------------------------------------------------
   Buttons: solid, readable, predictable
   -------------------------------------------------------------------------- */
/* v22.4.76 compatibility:
   The player-facing pages now provide their own action-button styles.
   Keep the registration submit treatment stable, but stop globally flattening every
   button/.btn across the game. */
body.df-shell .df-register-submit{
  border-radius:8px!important;
  box-shadow:none!important;
  text-shadow:none!important;
  transform:none!important;
  background:#b92c42!important;
  border-color:#d33a50!important;
  color:#fff!important;
}
body.df-shell .df-register-submit:hover{
  background:#c7354b!important;
  border-color:#e04a60!important;
  transform:none!important;
  filter:none!important;
}

/* --------------------------------------------------------------------------
   Dashboard: calmer hierarchy, less "promo card" styling
   -------------------------------------------------------------------------- */
/* v22.4.76 compatibility:
   Dashboard v22.4.52+ owns its cinematic command-center styling.
   The older global dashboard overrides are intentionally retired. */

/* --------------------------------------------------------------------------
   Crimes / Missions / Jobs / Heists
   -------------------------------------------------------------------------- */
/* v22.4.76 compatibility:
   Crimes, Missions, Jobs and Heists now have dedicated action interfaces.
   Do not globally flatten their cards, artwork, hover motion, lighting or buttons. */

/* --------------------------------------------------------------------------
   NPC Combat: keep the art, make the UI look authored rather than generated
   -------------------------------------------------------------------------- */
/* v22.4.76 compatibility:
   NPC Combat v22.4.51+ owns its arena lighting, target-card depth and action feedback.
   The older restraining overrides are intentionally retired. */

/* --------------------------------------------------------------------------
   Login / Register: look like a product, not a generated landing mockup
   -------------------------------------------------------------------------- */
.df-login-page,.df-register-page{font-family:var(--dfh-font)!important}
.df-login-intro,.df-register-intro{
  border-color:#303a45!important;
  box-shadow:var(--dfh-shadow)!important;
}
.df-login-form-panel,.df-register-form-panel{
  background:#0f141a!important;
  border-color:#303a45!important;
  box-shadow:var(--dfh-shadow)!important;
}
.df-login-intro h1,.df-register-intro h1{letter-spacing:-.045em!important;text-shadow:none!important}
.df-login-status-card,.df-register-feature,.df-register-perk{
  background:#0c1117!important;
  border-color:#2b3540!important;
  border-radius:8px!important;
  box-shadow:none!important;
}
.df-login-input-wrap,.df-register-input-wrap{border-radius:8px!important;background:#0b1016!important;box-shadow:none!important}
.df-login-app-card{border-radius:9px!important;background:#10151b!important;box-shadow:none!important}
.df-login-submit,.df-register-submit{min-height:48px!important;text-transform:none!important;letter-spacing:0!important;font-size:14px!important}

/* --------------------------------------------------------------------------
   Footer / utility polish
   -------------------------------------------------------------------------- */
.df-command-footer{color:#687485!important;border-color:#202832!important;background:#090d12!important}
.df-command-footer span:first-child{color:#aab3bf!important}

@media(max-width:900px){
  .df-dashboard-v22{padding:14px 10px 18px!important}
  .df-dash-intro{align-items:flex-start!important}
  .df-dash-grid{gap:10px!important}
  .df-command-nav{box-shadow:0 4px 16px rgba(0,0,0,.22)!important}
  .npc-hero-copy{padding:22px 18px 18px!important}
  .npc-combat-title-top{font-size:clamp(30px,9vw,48px)!important}
  .npc-combat-title-bottom{font-size:clamp(29px,8.5vw,46px)!important}
  .npc-live-zone{width:100%!important}
  .npc-nav-tiles{grid-template-columns:repeat(3,minmax(0,1fr))!important}
  .npc-nav-row{display:contents!important}
  .npc-nav-tiles a{min-width:0!important;width:auto!important}
}

@media(max-width:520px){
  .df-dash-intro h1{font-size:29px!important}
  .df-dash-intro p{font-size:12px!important}
  .df-dash-action-row{grid-template-columns:repeat(2,minmax(0,1fr))!important}
  .df-qs-grid{grid-template-columns:1fr 1fr!important}
  .npc-nav-tiles a{min-height:72px!important;padding:9px 5px!important}
  .npc-nav-tiles strong{font-size:10px!important}.npc-nav-tiles small{font-size:8px!important}
}

@media(prefers-reduced-motion:reduce){
  body.df-shell *,body.df-shell *::before,body.df-shell *::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;scroll-behavior:auto!important}
}


/* --------------------------------------------------------------------------
   v22.4.18 cleanup: sticky navigation clearance and quieter footer
   -------------------------------------------------------------------------- */
@media(max-width:900px){
  body.df-command-shell-body main.mcc-content-frame,
  body.df-command-shell-body main.df-dashboard-v22{
    margin-top:18px!important;
  }
  body.df-command-shell-body{scroll-padding-top:78px}
}
.df-command-footer{font-size:7px!important;letter-spacing:.04em!important;text-transform:none!important;color:#3f4855!important}


/* ==========================================================================
   v22.4.76 — Action UI Compatibility + Performance
   ========================================================================== */

/* Restore visible depth on the new action ribbons without changing the shared command deck. */
.df-final-action-ribbon,
.df-staff-action-ribbon,
.df-utility-ribbon,
.ops-command-strip>div,
.ach-command-strip>div,
.we-command-strip>div,
.ws-command-strip>div,
.bm-command-strip>div,
.sy-command-strip>div{
  box-shadow:0 10px 26px rgba(0,0,0,.18),inset 0 1px rgba(255,255,255,.025)!important;
}

/* Let the browser skip rendering deep off-screen lists until they approach the viewport. */
@supports (content-visibility:auto){
  body.df-shell :where(
    .crime-card,.heist-card,.npc-card,.mission,.contract,.ops-card,.ach-card,
    .mail-thread-card,.topic-row,.item,.card,.event,.history-day
  ){
    content-visibility:auto;
    contain-intrinsic-size:auto 180px;
  }
}

/* Mobile interactions should feel immediate without expensive hover simulations. */
@media(max-width:720px){
  body.df-shell :where(
    .crime-card,.heist-card,.npc-card,.mission,.contract,.ops-card,.ach-card,
    .mail-thread-card,.topic-row,.df-dash-card
  ):hover{
    transform:none!important;
  }
}

/* Hidden/background tabs do not need decorative animation work. */
html.df-page-hidden *,
html.df-page-hidden *::before,
html.df-page-hidden *::after{
  animation-play-state:paused!important;
}


/* ==========================================================================
   v22.4.79 — Global Action Feedback / Fast Navigation
   ========================================================================== */
.df-route-progress{
  position:fixed;
  left:0;
  top:0;
  z-index:2147482500;
  width:100%;
  height:3px;
  pointer-events:none;
  opacity:0;
  transform:scaleX(.04);
  transform-origin:left center;
  background:linear-gradient(90deg,#b92c42,#ef4961,#73b7ff);
  box-shadow:0 0 14px rgba(239,73,97,.28);
  transition:transform .28s ease,opacity .16s ease;
}
.df-route-progress.is-active{
  opacity:1;
  transform:scaleX(.72);
}
.df-route-progress.is-finishing{
  opacity:0;
  transform:scaleX(1);
  transition:transform .15s ease,opacity .24s ease .08s;
}

.df-network-state{
  position:fixed;
  left:50%;
  top:max(10px,env(safe-area-inset-top));
  z-index:2147482400;
  transform:translate(-50%,-18px);
  opacity:0;
  pointer-events:none;
  min-width:210px;
  max-width:calc(100vw - 24px);
  padding:8px 12px;
  border:1px solid #6c303d;
  border-radius:999px;
  background:rgba(31,12,18,.97);
  box-shadow:0 12px 30px rgba(0,0,0,.34);
  color:#ff9aaa;
  text-align:center;
  font:900 9px/1.25 var(--dfh-font);
  letter-spacing:.04em;
  transition:opacity .18s ease,transform .18s ease;
}
.df-network-state.is-visible{
  opacity:1;
  transform:translate(-50%,0);
}
.df-network-state.is-online{
  border-color:#315f44;
  background:rgba(13,34,23,.97);
  color:#87e7a8;
}

body.df-shell :where(
  a[href],button,.btn,.df-btn,.crime-btn,.heist-btn,.ops-btn,.npc-action,
  .mail-mini-btn,.forum-btn,.df-login-submit
){
  -webkit-tap-highlight-color:transparent;
}

body.df-shell .df-action-pressed{
  filter:brightness(1.08);
}

@media(max-width:720px){
  .df-route-progress{height:2px}
  .df-network-state{
    top:max(8px,env(safe-area-inset-top));
    min-width:190px;
    padding:7px 10px;
    font-size:7px;
  }
}

@media(prefers-reduced-motion:reduce){
  .df-route-progress,
  .df-network-state{transition:none!important}
}


/* ==========================================================================
   v22.4.80 — Quick Command Palette
   ========================================================================== */
.df-command-palette-backdrop{
  position:fixed;
  inset:0;
  z-index:2147482600;
  display:grid;
  place-items:start center;
  padding:clamp(72px,11vh,120px) 14px 24px;
  background:rgba(3,6,10,.72);
  backdrop-filter:blur(7px);
  opacity:0;
  pointer-events:none;
  transition:opacity .16s ease;
}
.df-command-palette-backdrop.is-open{
  opacity:1;
  pointer-events:auto;
}
.df-command-palette{
  width:min(650px,100%);
  overflow:hidden;
  border:1px solid #34404d;
  border-radius:14px;
  background:
    radial-gradient(circle at 20% 0,rgba(204,46,74,.11),transparent 34%),
    linear-gradient(180deg,#10161d,#090d12);
  box-shadow:0 28px 90px rgba(0,0,0,.62),0 0 0 1px rgba(255,255,255,.025) inset;
  transform:translateY(-12px) scale(.985);
  transition:transform .16s ease;
}
.df-command-palette-backdrop.is-open .df-command-palette{
  transform:translateY(0) scale(1);
}
.df-command-palette-head{
  display:flex;
  align-items:center;
  gap:10px;
  padding:12px;
  border-bottom:1px solid #28333f;
}
.df-command-palette-icon{
  display:grid;
  place-items:center;
  width:34px;
  height:34px;
  flex:0 0 auto;
  border:1px solid #34404d;
  border-radius:8px;
  background:#0b1016;
  color:#ef6a7e;
  font:900 16px/1 var(--dfh-font);
}
.df-command-palette-input{
  width:100%;
  min-width:0;
  height:38px;
  border:0!important;
  outline:0!important;
  background:transparent!important;
  box-shadow:none!important;
  color:#f3f6f9!important;
  font:800 14px/1.2 var(--dfh-font)!important;
}
.df-command-palette-input::placeholder{color:#718091!important}
.df-command-palette-key{
  flex:0 0 auto;
  padding:5px 7px;
  border:1px solid #303b47;
  border-radius:6px;
  background:#0a0f14;
  color:#7d8997;
  font:800 9px/1 var(--dfh-mono);
}
.df-command-palette-meta{
  display:flex;
  justify-content:space-between;
  gap:12px;
  padding:8px 12px;
  border-bottom:1px solid #1f2832;
  color:#6f7c8b;
  font:800 8px/1 var(--dfh-mono);
  letter-spacing:.05em;
  text-transform:uppercase;
}
.df-command-palette-list{
  max-height:min(56vh,490px);
  overflow:auto;
  overscroll-behavior:contain;
  padding:7px;
}
.df-command-palette-item{
  display:grid;
  grid-template-columns:36px minmax(0,1fr) auto;
  gap:10px;
  align-items:center;
  min-height:52px;
  padding:7px 9px;
  border:1px solid transparent;
  border-radius:9px;
  color:#dbe2e9;
  text-decoration:none!important;
  cursor:pointer;
}
.df-command-palette-item:hover,
.df-command-palette-item.is-active{
  border-color:#394754;
  background:#151c24;
  color:#fff;
}
.df-command-palette-item-icon{
  display:grid;
  place-items:center;
  width:34px;
  height:34px;
  border:1px solid #2b3743;
  border-radius:8px;
  background:#0b1117;
  color:#e6546b;
  font:900 12px/1 var(--dfh-font);
}
.df-command-palette-item strong{
  display:block;
  overflow:hidden;
  color:inherit!important;
  font:900 12px/1.2 var(--dfh-font)!important;
  text-overflow:ellipsis;
  white-space:nowrap;
}
.df-command-palette-item small{
  display:block;
  margin-top:4px;
  overflow:hidden;
  color:#748190!important;
  font:700 9px/1.25 var(--dfh-font)!important;
  text-overflow:ellipsis;
  white-space:nowrap;
}
.df-command-palette-item-tag{
  color:#6e7b8a;
  font:800 8px/1 var(--dfh-mono);
  text-transform:uppercase;
}
.df-command-palette-empty{
  padding:28px 16px;
  color:#73808e;
  text-align:center;
  font:800 11px/1.4 var(--dfh-font);
}
.df-command-palette-foot{
  display:flex;
  gap:14px;
  flex-wrap:wrap;
  padding:9px 12px 10px;
  border-top:1px solid #222c36;
  color:#667383;
  font:700 8px/1.2 var(--dfh-font);
}
.df-command-palette-foot kbd{
  margin-right:4px;
  padding:2px 5px;
  border:1px solid #303b47;
  border-radius:4px;
  background:#0b1016;
  color:#9ba7b4;
  font:800 8px/1 var(--dfh-mono);
}
.df-command-palette-launcher{
  position:fixed;
  right:max(12px,env(safe-area-inset-right));
  bottom:max(12px,calc(env(safe-area-inset-bottom) + 12px));
  z-index:11980;
  display:none;
  align-items:center;
  gap:7px;
  min-height:36px;
  padding:7px 10px;
  border:1px solid #313c48;
  border-radius:9px;
  background:rgba(10,15,21,.94);
  box-shadow:0 10px 28px rgba(0,0,0,.34);
  color:#b7c1cc;
  font:900 9px/1 var(--dfh-font);
  cursor:pointer;
}
.df-command-palette-launcher:hover{
  border-color:#4a5867;
  color:#fff;
}
.df-command-palette-launcher kbd{
  padding:2px 4px;
  border:1px solid #34404d;
  border-radius:4px;
  background:#0b1016;
  color:#7e8a98;
  font:800 8px/1 var(--dfh-mono);
}
@media(min-width:900px){
  .df-command-palette-launcher{display:flex}
}
@media(max-width:720px){
  .df-command-palette-backdrop{
    align-items:end;
    padding:12px 10px max(12px,env(safe-area-inset-bottom));
  }
  .df-command-palette{
    width:100%;
    border-radius:14px;
  }
  .df-command-palette-list{max-height:54vh}
  .df-command-palette-head{padding:10px}
  .df-command-palette-meta{display:none}
}
@media(prefers-reduced-motion:reduce){
  .df-command-palette-backdrop,
  .df-command-palette{transition:none!important}
}


/* ==========================================================================
   v22.4.81 — Smart Quick Nav: Favorites + Recent Destinations
   ========================================================================== */
.df-command-palette-section{
  padding:7px 7px 2px;
}
.df-command-palette-section-title{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  padding:4px 5px 6px;
  color:#6f7c8b;
  font:900 8px/1 var(--dfh-mono);
  letter-spacing:.08em;
  text-transform:uppercase;
}
.df-command-palette-section-title span:last-child{
  color:#4e5966;
  font-weight:800;
}
.df-command-palette-separator{
  height:1px;
  margin:5px 7px 7px;
  background:#1f2832;
}
.df-command-palette-item{
  position:relative;
}
.df-command-palette-pin{
  display:grid;
  place-items:center;
  width:28px;
  height:28px;
  margin-left:2px;
  border:1px solid transparent;
  border-radius:7px;
  background:transparent;
  color:#596574;
  font:900 15px/1 var(--dfh-font);
  cursor:pointer;
}
.df-command-palette-pin:hover{
  border-color:#394754;
  background:#0e141b;
  color:#b9c4cf;
}
.df-command-palette-pin.is-pinned{
  color:#e7bb62;
}
.df-command-palette-item-main{
  min-width:0;
}
.df-command-palette-item-right{
  display:flex;
  align-items:center;
  gap:5px;
}
.df-command-palette-badge{
  display:inline-flex;
  align-items:center;
  min-height:18px;
  padding:0 6px;
  border:1px solid #2a3541;
  border-radius:999px;
  background:#0b1016;
  color:#6d7a89;
  font:800 7px/1 var(--dfh-mono);
  letter-spacing:.04em;
  text-transform:uppercase;
}
.df-command-palette-badge.is-recent{
  border-color:#39404a;
  color:#8d98a5;
}
.df-command-palette-badge.is-pinned{
  border-color:#5a4930;
  color:#d8b66f;
}
@media(max-width:720px){
  .df-command-palette-pin{
    width:26px;
    height:26px;
  }
  .df-command-palette-badge{
    display:none;
  }
}


/* ==========================================================================
   v22.4.82 — Global Action Toasts
   ========================================================================== */
.df-toast-stack{
  position:fixed;
  right:max(12px,env(safe-area-inset-right));
  top:max(14px,calc(env(safe-area-inset-top) + 14px));
  z-index:2147482450;
  display:grid;
  gap:8px;
  width:min(360px,calc(100vw - 24px));
  pointer-events:none;
}
.df-toast{
  display:grid;
  grid-template-columns:34px minmax(0,1fr) 28px;
  gap:9px;
  align-items:start;
  padding:10px;
  border:1px solid #35414d;
  border-radius:11px;
  background:linear-gradient(180deg,rgba(16,22,29,.98),rgba(9,13,18,.98));
  box-shadow:0 18px 46px rgba(0,0,0,.44);
  color:#dfe6ed;
  opacity:0;
  transform:translateY(-8px) scale(.985);
  pointer-events:auto;
  transition:opacity .18s ease,transform .18s ease;
}
.df-toast.is-visible{
  opacity:1;
  transform:translateY(0) scale(1);
}
.df-toast.is-leaving{
  opacity:0;
  transform:translateY(-6px) scale(.985);
}
.df-toast-icon{
  display:grid;
  place-items:center;
  width:32px;
  height:32px;
  border:1px solid #3a4653;
  border-radius:8px;
  background:#0c1218;
  color:#9fb0c1;
  font:900 15px/1 var(--dfh-font);
}
.df-toast-copy{
  min-width:0;
  padding-top:1px;
}
.df-toast-copy strong{
  display:block;
  color:#f3f6f9!important;
  font:900 10px/1.2 var(--dfh-font)!important;
  letter-spacing:.02em;
}
.df-toast-copy p{
  margin:4px 0 0!important;
  color:#8996a5!important;
  font:700 9px/1.4 var(--dfh-font)!important;
}
.df-toast-close{
  display:grid;
  place-items:center;
  width:27px;
  height:27px;
  border:0;
  border-radius:7px;
  background:transparent;
  color:#667484;
  font:900 16px/1 var(--dfh-font);
  cursor:pointer;
}
.df-toast-close:hover{
  background:#161d25;
  color:#fff;
}
.df-toast[data-type="success"]{
  border-color:#2e6446;
}
.df-toast[data-type="success"] .df-toast-icon{
  border-color:#347953;
  background:#0d1d15;
  color:#63d58f;
}
.df-toast[data-type="error"]{
  border-color:#743746;
}
.df-toast[data-type="error"] .df-toast-icon{
  border-color:#884052;
  background:#211016;
  color:#ff7086;
}
.df-toast[data-type="warning"]{
  border-color:#6b5730;
}
.df-toast[data-type="warning"] .df-toast-icon{
  border-color:#7d6739;
  background:#201a0d;
  color:#e8c66e;
}
.df-toast[data-type="info"]{
  border-color:#35566f;
}
.df-toast[data-type="info"] .df-toast-icon{
  border-color:#3b6686;
  background:#0d1821;
  color:#78b9e8;
}
@media(max-width:720px){
  .df-toast-stack{
    top:auto;
    right:10px;
    bottom:max(76px,calc(env(safe-area-inset-bottom) + 76px));
    width:min(340px,calc(100vw - 20px));
  }
  .df-toast{
    grid-template-columns:30px minmax(0,1fr) 26px;
    padding:9px;
  }
  .df-toast-icon{
    width:28px;
    height:28px;
    font-size:13px;
  }
}
@media(prefers-reduced-motion:reduce){
  .df-toast{transition:none!important}
}


/* ==========================================================================
   v22.4.83 — Safe Action Lock / Duplicate Submit Protection
   ========================================================================== */
.df-submit-locked{
  position:relative;
  cursor:wait!important;
  opacity:.82!important;
  pointer-events:none!important;
}
.df-submit-locked::after{
  content:"";
  display:inline-block;
  width:11px;
  height:11px;
  margin-left:7px;
  vertical-align:-1px;
  border:2px solid currentColor;
  border-right-color:transparent;
  border-radius:50%;
  animation:dfSubmitSpin .7s linear infinite;
}
@keyframes dfSubmitSpin{to{transform:rotate(360deg)}}

.df-form-processing{
  cursor:progress;
}

.df-form-processing :where(input,select,textarea){
  transition:opacity .12s ease;
}

@media(prefers-reduced-motion:reduce){
  .df-submit-locked::after{
    animation-duration:1.4s;
  }
}


/* ==========================================================================
   v22.4.84 — Smart Navigation Prefetch
   ========================================================================== */
.df-prefetch-hint{
  position:fixed;
  left:-9999px;
  width:1px;
  height:1px;
  overflow:hidden;
}


/* ==========================================================================
   v22.4.85 — Performance Mode
   ========================================================================== */
html.df-performance-mode *,
html.df-performance-mode *::before,
html.df-performance-mode *::after{
  animation-duration:.001ms!important;
  animation-iteration-count:1!important;
  transition-duration:.001ms!important;
  scroll-behavior:auto!important;
}
html.df-performance-mode body.df-shell :where(
  .crime-hero,.heist-hero,.npc-hero,.df-dash-situation,.df-command-palette-backdrop,
  .df-pwa-ios-sheet,.df-pwa-installing-sheet,.df-pwa-installed-sheet
){
  backdrop-filter:none!important;
  -webkit-backdrop-filter:none!important;
}
html.df-performance-mode body.df-shell :where(
  .crime-card,.heist-card,.npc-card,.mission,.contract,.df-card,
  .df-dash-card,.ops-card,.ach-card,.mail-thread-card,.topic-row
){
  box-shadow:0 4px 12px rgba(0,0,0,.18)!important;
}
html.df-performance-mode .df-route-progress,
html.df-performance-mode .df-toast,
html.df-performance-mode .df-command-palette{
  box-shadow:none!important;
}

.df-performance-toggle{
  display:inline-flex;
  align-items:center;
  gap:6px;
  min-height:24px;
  padding:4px 7px;
  border:1px solid #303b47;
  border-radius:6px;
  background:#0b1016;
  color:#7e8b99;
  font:800 8px/1 var(--dfh-font);
  cursor:pointer;
}
.df-performance-toggle:hover{
  border-color:#465463;
  color:#dbe3eb;
}
.df-performance-toggle.is-on{
  border-color:#41624b;
  background:#0d1811;
  color:#86d99f;
}
.df-performance-toggle-dot{
  width:7px;
  height:7px;
  border-radius:50%;
  background:#65717f;
  box-shadow:0 0 0 2px rgba(101,113,127,.12);
}
.df-performance-toggle.is-on .df-performance-toggle-dot{
  background:#55c77b;
  box-shadow:0 0 0 2px rgba(85,199,123,.12);
}


/* ==========================================================================
   v22.4.86 — Accessibility + Touch Upgrade
   ========================================================================== */

body.df-shell :where(
  a[href],button,input,select,textarea,[tabindex]:not([tabindex="-1"])
):focus-visible{
  outline:2px solid #79b9f2!important;
  outline-offset:2px!important;
  box-shadow:0 0 0 4px rgba(121,185,242,.12)!important;
}

body.df-shell :where(
  .df-command-link,.df-command-trigger,.df-command-icon-btn,.df-mobile-menu-toggle,
  .df-btn,.btn,.crime-btn,.heist-btn,.npc-action,.ops-btn,
  .mail-mini-btn,.forum-btn,.df-login-submit
){
  touch-action:manipulation;
}

@media(max-width:720px){
  body.df-shell :where(
    .df-command-link,.df-command-trigger,.df-command-icon-btn,.df-mobile-menu-toggle,
    .df-btn,.btn,.crime-btn,.heist-btn,.npc-action,.ops-btn,
    .mail-mini-btn,.forum-btn,.df-login-submit
  ){
    min-height:44px;
  }

  body.df-shell :where(
    input:not([type="checkbox"]):not([type="radio"]),
    select,textarea
  ){
    min-height:44px;
    font-size:16px!important;
  }

  body.df-shell :where(
    input[type="checkbox"],input[type="radio"]
  ){
    min-width:20px;
    min-height:20px;
  }
}

.df-focus-target{
  scroll-margin-top:88px;
}



/* ==========================================================================
   v22.4.91 — Desktop 2D Combat Motion Fix
   Combat replay motion is functional feedback, not decorative animation.
   Keep it active even when optional Performance Mode is enabled.
   ========================================================================== */
html.df-performance-mode .arena-stage.player-attack .arena-scene-player,
html.df-performance-mode .arena-stage.player-attack .arena-scene-npc,
html.df-performance-mode .arena-stage.npc-attack .arena-scene-player,
html.df-performance-mode .arena-stage.npc-attack .arena-scene-npc{
  animation-duration:.66s!important;
  animation-iteration-count:1!important;
}
html.df-performance-mode .arena-stage.player-crit .arena-scene-player,
html.df-performance-mode .arena-stage.player-crit .arena-scene-npc,
html.df-performance-mode .arena-stage.npc-crit .arena-scene-player,
html.df-performance-mode .arena-stage.npc-crit .arena-scene-npc{
  animation-duration:.74s!important;
  animation-iteration-count:1!important;
}
html.df-performance-mode .arena-stage.player-miss .arena-scene-npc,
html.df-performance-mode .arena-stage.npc-miss .arena-scene-player{
  animation-duration:.58s!important;
  animation-iteration-count:1!important;
}
html.df-performance-mode .arena-stage.arena-victory .arena-scene-npc,
html.df-performance-mode .arena-stage.arena-defeat .arena-scene-player{
  animation-duration:.88s!important;
  animation-iteration-count:1!important;
}
html.df-performance-mode .arena-stage .arena-slash-fx{
  animation-duration:.52s!important;
  animation-iteration-count:1!important;
}
html.df-performance-mode .arena-stage .arena-damage-pop.is-showing{
  animation-duration:.86s!important;
  animation-iteration-count:1!important;
}
html.df-performance-mode .arena-stage.screen-shake{
  animation-duration:.26s!important;
  animation-iteration-count:1!important;
}
html.df-performance-mode .arena-scene-layer{
  transition-duration:.28s!important;
}