/* «ع السريع» — Baghdad edition styles (mod/assets/iq.css, loaded after the upstream styles).
   Upstream DOM nodes are HIDDEN, never removed: the game binds handlers to them by id. */

/* ---- things of the original studio that do not exist in this offline mod ---- */
#soonPill, #soonDlg, #storeWarn, #apkRow, #acX, #refHome, #refAcct, #refDlg, #refPop, #endAcct, #svCard, #clDlg, #acDelDlg,
#adSet, #anaSet, #anaCard, #iabBar, #followBox, #fbHome, #fbFloat, #endBeta,
#st_acct, #sp_acct, .privl, [data-soc] { display: none !important; }

/* ---------- yellow dust look (settings: الفلتر) ---------- */
html.iq-f-light #gl { filter: sepia(.22) saturate(1.12) hue-rotate(-6deg) contrast(1.04) brightness(1.02); }
html.iq-f-strong #gl { filter: sepia(.45) saturate(1.25) hue-rotate(-10deg) contrast(1.06) brightness(1.03); }
#iqDust { position: absolute; inset: 0; pointer-events: none; z-index: 2; mix-blend-mode: multiply; opacity: 0; transition: opacity .8s; }
html.iq-f-light #iqDust { opacity: .35; }
html.iq-f-strong #iqDust { opacity: .7; }
#iqDust { background: radial-gradient(ellipse at 50% 35%, rgba(226,186,110,.05), rgba(205,150,70,.35)); }
html.iq-ajaj #iqDust { opacity: 1 !important; background: radial-gradient(ellipse at 50% 40%, rgba(214,150,70,.35), rgba(180,110,40,.75)); }

/* ---------- our overlay layer ---------- */
#iqLayer { position: absolute; inset: 0; pointer-events: none; z-index: 30; font-family: Cairo, sans-serif; direction: rtl; }
#iqLayer > * { pointer-events: auto; }

/* HUD pills (checkpoint distance, convoy warning, rough road) */
.iq-pills { position: absolute; top: calc(env(safe-area-inset-top, 0px) + 150px); left: 50%; transform: translateX(-50%);
  display: flex; flex-direction: column; gap: 6px; align-items: center; pointer-events: none; }
.iq-pill { display: flex; gap: 8px; align-items: center; padding: 5px 12px; border-radius: 999px; font-weight: 800; font-size: 13px;
  background: rgba(11,12,16,.78); color: #fff; box-shadow: 0 2px 10px rgba(0,0,0,.35); white-space: nowrap; }
.iq-pill b { font-family: "Baloo Bhaijaan 2", Cairo, sans-serif; font-size: 15px; }
.iq-pill.warn { background: rgba(196, 64, 32, .92); }
.iq-pill.army { background: rgba(70, 82, 52, .95); }
.iq-pill.police { background: rgba(26, 64, 128, .95); }
.iq-pill.ratl { background: rgba(10,10,12,.95); border: 1px solid #ff3b2f; animation: iqBlink .5s steps(2) infinite; }
@keyframes iqBlink { 50% { border-color: #2f6bff; } }

/* rear-view mirror (shows a tailgater flashing) */
#iqMirror { position: absolute; top: calc(env(safe-area-inset-top, 0px) + 8px); left: 50%; transform: translateX(-50%);
  width: 132px; height: 38px; border-radius: 18px; background: linear-gradient(#2a2f38, #12151b); border: 3px solid #0a0b0e;
  box-shadow: 0 3px 10px rgba(0,0,0,.4); overflow: hidden; opacity: 0; transition: opacity .3s; pointer-events: none; }
#iqMirror.on { opacity: 1; }
#iqMirror i { position: absolute; top: 14px; width: 14px; height: 8px; border-radius: 50%; background: #fff6d8; box-shadow: 0 0 10px 6px rgba(255,246,216,.85); opacity: .25; }
#iqMirror i.l { left: 46px; } #iqMirror i.r { left: 72px; }
#iqMirror.flash i { opacity: 1; }
#iqMirror.ratl i.l { background: #ff3b2f; box-shadow: 0 0 12px 7px rgba(255,59,47,.9); }
#iqMirror.ratl i.r { background: #2f6bff; box-shadow: 0 0 12px 7px rgba(47,107,255,.9); }

/* dialogs (fasl, checkpoint stop, breakdown, protests…), in the game's own language: its
   .modal backdrop, its .mcard glass panel with the theme's paint on the top edge, Lalezar
   titles, its 3D .go button for the main choice and quiet outlined ones for the rest, prices
   as coin chips. (Abbas, 2026-10-16: "فدشي مال صدك استوديو وليس شخص عشوائي مسويها".) */
.iq-modal { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; padding: 20px; box-sizing: border-box;
  background: rgba(4, 6, 10, .72); -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px); z-index: 40; animation: iqIn .18s ease-out; }
@keyframes iqIn { from { opacity: 0; } }
.iq-card { --tone: var(--paint, #ffd21f); width: 100%; max-width: 340px; max-height: 88%; overflow: auto; box-sizing: border-box;
  background: rgba(12, 14, 20, .88); -webkit-backdrop-filter: blur(7px) saturate(1.2); backdrop-filter: blur(7px) saturate(1.2);
  color: var(--ink, #f4efe4); border-radius: 18px; padding: 16px 16px 14px;
  border: 1px solid rgba(255, 255, 255, .17); border-top: 3px solid var(--tone);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .08), 0 14px 36px rgba(0, 0, 0, .55); text-shadow: 0 1px 2px rgba(0, 0, 0, .5);
  animation: iqPop .22s cubic-bezier(.2, .9, .3, 1.2); }
@keyframes iqPop { from { transform: scale(.94) translateY(6px); opacity: 0; } }
.iq-card.tone-bad { --tone: var(--brake, #e6473b); }
.iq-card.tone-warn { --tone: var(--dusk, #ff8a4c); }
.iq-card h3 { margin: 2px 0 2px; font: 400 clamp(1.7rem, 7vw, 2.1rem)/1.15 Lalezar, Cairo, sans-serif; text-align: center; color: var(--tone); text-wrap: balance; }
.iq-card .iq-sub { text-align: center; color: var(--ink-dim, #a29d92); font: 700 .86rem/1.5 Cairo, sans-serif; margin: 0 0 10px; }
.iq-face { width: 84px; height: 84px; margin: 0 auto 6px; filter: drop-shadow(0 3px 6px rgba(0,0,0,.35)); }
.iq-art { width: 168px; margin: -4px auto 2px; filter: drop-shadow(0 4px 8px rgba(0, 0, 0, .4)); }
.iq-art svg, .iq-face svg, .iq-contact .av svg, .iq-call .av svg { width: 100%; height: auto; display: block; }
.iq-face svg, .iq-contact .av svg, .iq-call .av svg { height: 100%; }
.iq-art .iq-hazard { animation: iqHaz .9s steps(2) infinite; }
@keyframes iqHaz { 50% { opacity: 0; } }
.iq-art .iq-steam { animation: iqSteam 2.4s ease-in-out infinite; transform-origin: 100px 30px; }
@keyframes iqSteam { 50% { transform: translateY(-3px) scale(1.04); opacity: .8; } }
.iq-art .iq-flame { animation: iqFlame .5s ease-in-out infinite alternate; transform-box: fill-box; transform-origin: 50% 100%; }
@keyframes iqFlame { to { transform: scaleY(1.12) scaleX(.94); } }
@media (prefers-reduced-motion: reduce) { .iq-art *, .iq-card, .iq-modal { animation: none !important; } }
.iq-card .iq-lines { font: 600 .92rem/1.65 Cairo, sans-serif; color: var(--ink, #f4efe4); text-align: center; }
.iq-card .iq-lines p { margin: 4px 0; }
.iq-card .iq-lines b { color: #fff; }
.iq-card .iq-who { color: var(--paint, #ffd21f); font-weight: 800; }
.iq-card .iq-amount { display: flex; flex-direction: column; align-items: center; gap: 3px; margin: 10px 0 2px; }
.iq-card .iq-amount small { font: 700 .74rem/1.3 Cairo, sans-serif; color: var(--ink-dim, #a29d92); }
.iq-price { display: inline-flex; align-items: center; gap: .3em; direction: rtl; white-space: nowrap; padding: 3px 10px 3px 8px; border-radius: 999px;
  background: rgba(0, 0, 0, .32); border: 1px solid rgba(255, 255, 255, .14); font: 800 .82rem/1.3 "Changa", Cairo, sans-serif; color: var(--paint, #ffd21f); }
.iq-amount .iq-price { font-size: 1.25rem; padding: 4px 14px 4px 10px; background: rgba(var(--paint-rgb, 255, 210, 31), .1); border-color: rgba(var(--paint-rgb, 255, 210, 31), .45); }
.iq-price .gin { width: 1.1em; height: 1.1em; }
.iq-btns { display: grid; grid-template-columns: 1fr; gap: 8px; margin-top: 14px; }
.iq-btn { appearance: none; display: flex; align-items: center; justify-content: center; gap: 8px; min-height: 48px; box-sizing: border-box;
  padding: 8px 12px; border-radius: 12px; cursor: pointer; text-align: center; color: var(--ink, #f4efe4);
  background: rgba(255, 255, 255, .06); border: 1px solid rgba(255, 255, 255, .22); font-family: Cairo, sans-serif;
  transition: transform .08s, background .15s, border-color .15s; }
.iq-btn:hover { background: rgba(255, 255, 255, .1); border-color: rgba(255, 255, 255, .36); }
.iq-btn:active { transform: translateY(2px); }
.iq-btn:focus-visible { outline: 3px solid var(--ink, #f4efe4); outline-offset: 2px; }
.iq-btn .iq-bt { display: flex; flex-direction: column; align-items: center; min-width: 0; }
.iq-btn .iq-bt b { font: 800 .98rem/1.3 Cairo, sans-serif; }
.iq-btn .iq-bt small { font: 700 .7rem/1.35 Cairo, sans-serif; opacity: .75; }
.iq-btn > .gin { width: 1.5em; height: 1.5em; flex: none; }
/* the other choices are rows: icon, what it is, what it costs */
.iq-btn:not(.go) { justify-content: flex-start; min-height: 46px; padding: 7px 12px; }
.iq-btn:not(.go) .iq-bt { flex: 1; align-items: flex-start; text-align: right; }
.iq-btn:not(.go) > .iq-price { margin-inline-start: auto; }
/* the main choice: the game's own 3D button in the theme's paint */
.iq-btn.go { min-height: 56px; color: #1b1405; text-shadow: none; border: 2px solid var(--outline, #1b1d33);
  background: linear-gradient(180deg, var(--paint-hi, #ffe766), var(--paint, #ffd21f) 52%, var(--paint-lo, #ffc412));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .55), 0 4px 0 var(--paint-edge, #c98b00), 0 7px 12px rgba(0, 0, 0, .3); }
.iq-btn.go:active { transform: translateY(3px); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .55), 0 1px 0 var(--paint-edge, #c98b00); }
.iq-btn.go .iq-bt b { font: 800 1.2rem/1.25 var(--disp, Lalezar), Cairo, sans-serif; }
.iq-btn.go .iq-bt small { opacity: .8; }
.iq-btn.go .iq-price { background: rgba(27, 20, 5, .14); border-color: rgba(27, 20, 5, .25); color: #1b1405; }
/* the costly or risky way out: quiet, in the brake red */
.iq-btn.bad { color: #ffb3aa; border-color: rgba(230, 71, 59, .55); background: rgba(230, 71, 59, .08); }
.iq-btn.bad:hover { background: rgba(230, 71, 59, .16); border-color: rgba(230, 71, 59, .8); }
.iq-btn.bad .iq-price { color: #ffb3aa; }
/* the phone call: the wasta's blue */
.iq-btn.wasta { border-color: rgba(92, 140, 255, .55); background: rgba(92, 140, 255, .08); color: #cddcff; }
.iq-btn.wasta:hover { background: rgba(92, 140, 255, .16); }
.iq-btn:disabled { opacity: .45; pointer-events: none; }
.iq-steps { display: flex; gap: 4px; justify-content: center; margin: 6px 0 10px; }
.iq-steps i { width: 26px; height: 4px; border-radius: 3px; background: #3a3e49; }
.iq-steps i.on { background: #ffd21f; }

/* phone (واسطة) */
.iq-phone { width: min(86%, 320px); background: #0d0f14; border-radius: 34px; padding: 22px 16px 16px; border: 3px solid #2b2f3a;
  color: #f3f1ea; box-shadow: 0 14px 50px rgba(0,0,0,.6); }
.iq-phone h3 { text-align: center; margin: 0 0 10px; font: 800 18px Cairo, sans-serif; }
.iq-contact { display: flex; align-items: center; gap: 10px; padding: 10px; border-radius: 16px; background: #1b1e26; margin: 6px 0;
  cursor: pointer; border: 1px solid transparent; }
.iq-contact:hover { border-color: #3b5bd6; }
.iq-contact .av { width: 44px; height: 44px; flex: none; }
.iq-contact b { display: block; font-size: 14.5px; }
.iq-contact small { color: #a9a49a; font-size: 12px; }
.iq-contact[aria-disabled="true"] { opacity: .4; pointer-events: none; }
.iq-call { text-align: center; padding: 8px 0; }
.iq-call .av { width: 84px; height: 84px; margin: 6px auto 8px; }
.iq-call .st { color: #a9a49a; font-size: 13px; min-height: 18px; }
.iq-call .bubble { background: #1f8a4c; color: #fff; border-radius: 16px 16px 4px 16px; padding: 8px 12px; margin: 8px 0; text-align: right; font-size: 14px; }
.iq-call .bubble.me { background: #2a2e38; border-radius: 16px 16px 16px 4px; }

/* HUD buttons we add (wasta phone, cabin light) */
.iq-hudbtn { position: absolute; width: 46px; height: 46px; border-radius: 50%; border: 0; display: grid; place-items: center;
  background: rgba(11,12,16,.72); color: #fff; font-size: 22px; box-shadow: 0 2px 8px rgba(0,0,0,.35); cursor: pointer; }
.iq-hudbtn[hidden] { display: none; }
.iq-hudbtn.on { background: #ffd21f; color: #111; }
.iq-hudbtn.hot { animation: iqPulse 1s infinite; }
@keyframes iqPulse { 50% { box-shadow: 0 0 0 8px rgba(255,210,31,.35); } }

/* cabin light button: sits in the game's own HUD column, under its radio button */
.misbtn.iqcab { position: absolute; left: -46px; top: 98px; }
.misbtn.iqcab svg { width: 22px; height: 22px; display: block; }
.misbtn.iqcab.on { background: rgba(255, 210, 31, .38); border-color: #ffd21f; }
.misbtn.iqcab.hot { animation: iqPulse 1s infinite; }

/* cabin light on (night checkpoints) */
html.iq-cabin #iqLayer { box-shadow: inset 0 70px 90px -40px rgba(255, 214, 140, .5); }

/* end-screen outcome block */
.iq-outcome { direction: rtl; text-align: right; margin: 10px auto 4px; width: min(92%, 380px); border-radius: 16px; padding: 10px 12px; background: rgba(150, 34, 24, .25);
  border: 1px solid rgba(255, 90, 70, .45); color: #ffe9e2; font-size: 13.5px; line-height: 1.6; }
.iq-outcome b { color: #fff; }
.iq-outcome ol { margin: 6px 0 0; padding-inline-start: 18px; }

/* More car models since the Saipa joined. The game lays them out in a grid of 6 (3 on a
   phone), which left one alone on a second row: four to a row instead, the last row centred.
   (The garage's cars tab has its own grid and preview bay since upstream 2026-10-16.) */
html #setupScr #models.wrap, html #frScr #frModels.wrap { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; }
html #setupScr #models.wrap > .mdl, html #frScr #frModels.wrap > .mdl { flex: 0 0 calc((100% - 18px) / 4); min-width: 0; box-sizing: border-box; }

/* settings rows we add */
#iqSet h3 { margin: 14px 0 6px; }
#iqSetSnd h3 { margin: 14px 0 6px; }
/* the car's flash drive (Settings › الصوت) */
.iq-flash { margin: 8px 0 4px; }
.iq-flash-n { margin: 0 0 6px; font-weight: 700; }
.iq-flash-note { margin: 6px 0 0; font-size: 12.5px; line-height: 1.6; opacity: .75; }
.iq-flash .chip:disabled { opacity: .45; }

/* no emoji in the UI: a drawn padlock on locked paint swatches, a plain tick on done missions */
html .swatches .sw.lk::after {
  content: ""; background: center / 12px 14px no-repeat url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 14'%3E%3Cpath d='M3.5 6V4.2a2.5 2.5 0 0 1 5 0V6' fill='none' stroke='%23f1efe8' stroke-width='1.8'/%3E%3Crect x='1.5' y='6' width='9' height='7' rx='1.6' fill='%23f1efe8'/%3E%3Crect x='5.3' y='8.4' width='1.4' height='2.4' rx='.7' fill='%2335383f'/%3E%3C/svg%3E");
  filter: drop-shadow(0 1px 1px rgba(0,0,0,.7));
}
html .missions li.ok::after { content: "\2713"; font-family: Cairo, sans-serif; font-weight: 800; }

/* the garage card (ui.js installGarageCard): the last card of the modes' list, exactly like
   them; the game's «جديد» badge says «جاهز» when an upgrade is waiting */
#iqGarageCard { position: relative; }
#iqGarageCard .mnew[hidden] { display: none; }

/* the big «يلا نطلع» button (ui.js installYalla): upstream 2026-10-16 hides it with
   `.home.yh .ybox{display:none!important}`; this outranks it */
html #menu.home.yh #yallaBox:not([hidden]) { display: flex !important; }
/* (and gives it back its row: upstream's new `.home.yh{grid-template-rows:auto auto 1fr}` has
   no row for it, so it would stretch over the whole screen) */
html #menu.home.yh { grid-template-rows: auto auto auto 1fr !important; }

/* «المطور» (ui/dev.js): a chip beside «الإعدادات», and its dialog — the game's own dialog, the
   link rows laid out like a contact card: icon at the start, name and handle, start-aligned */
.home .topbar .iq-devchip { margin-inline-end: 6px; }
/* stacked like its neighbours (icon over the word), the game's rules are by id */
.home.yh .topbar #iqDevHome { display: inline-flex; flex-direction: column; align-items: center; justify-content: center; height: 48px !important; width: auto !important;
  min-width: 46px; padding: 3px 7px !important; gap: 2px !important; font: 800 .68rem/1.05 "Cairo", sans-serif !important; white-space: nowrap; border-radius: 13px; box-sizing: border-box; }
.home.yh .topbar #iqDevHome .gin { width: 1.2rem; height: 1.2rem; font-size: 1.2rem !important; line-height: 1; background-size: contain; background-repeat: no-repeat; background-position: center; }
.iq-dev .iq-card { max-width: 360px; }
.iq-dev .iq-btn:not(.iq-dev-close) { justify-content: flex-start; text-align: start; padding-inline: 12px; }
.iq-dev .iq-btn:not(.iq-dev-close) .iq-bt { align-items: flex-start; }
.iq-dev .iq-btn .gin { flex: none; width: 26px; height: 26px; background-size: contain; background-repeat: no-repeat; background-position: center; }
.iq-dev .iq-btn .iq-bt small { white-space: normal; text-align: start; }
.iq-dev .iq-btn small[dir], .iq-dev-user, .iq-dev-link { unicode-bidi: isolate; }
.iq-dev-tg { display: flex; flex-direction: column; align-items: center; gap: 6px; text-align: center; }
.iq-dev-qr { width: 200px; height: 200px; image-rendering: pixelated; border-radius: 12px; border: 3px solid var(--outline, #1b1d33);
  box-shadow: 0 0 0 3px rgba(255, 255, 255, .9), 0 8px 22px rgba(0, 0, 0, .4); background: #fff; }
.iq-dev-user { font: 800 1.2rem/1.3 "Roboto Condensed", Cairo, sans-serif; color: var(--ink, #f4efe4); letter-spacing: .02em; user-select: all; }
.iq-dev-link { font: 700 .82rem/1.3 Cairo, sans-serif; color: #7cc8ff; text-decoration: none; }
.iq-dev-link:hover { text-decoration: underline; }
.iq-dev-tg small { font: 600 .74rem/1.5 Cairo, sans-serif; color: var(--ink-dim, #a29d92); }
.iq-dev-note:empty { display: none; }
.iq-dev .iq-btn.iq-dev-close { justify-content: center; }
.iq-dev .iq-btn.iq-dev-close .iq-bt { align-items: center; }
.iq-dev-warn { margin: 2px 0 0; padding: 10px 12px; border-radius: 12px; border: 1px solid rgba(255, 210, 31, .45);
  background: rgba(255, 210, 31, .1); color: var(--ink, #f4efe4); font: 600 .8rem/1.6 Cairo, sans-serif; text-align: start; }
.iq-dev-warn b { color: var(--dusk, #ffb21c); }
.iq-dev-text { text-align: start; }
.iq-dev-text p { margin: 0 0 8px; font: 600 .84rem/1.75 Cairo, sans-serif; color: var(--ink, #f4efe4); }
.iq-dev-text p b { color: var(--paint, #ffd21f); font-weight: 800; }
.iq-dev-hint { display: block; margin-top: 4px; font: 600 .72rem/1.5 Cairo, sans-serif; color: var(--ink-dim, #a29d92); }