/* Responsive layer for the portfolio.
   Desktop keeps the original 1280×800 game screens (scaled to fit the window).
   Phones and portrait tablets get html.m: the same screens reflowed into a
   scrolling column, with the pixel world kept as a cropped backdrop.
   Long content pages (profile, case studies) reflow with media queries. */

/* ---------- shared ---------- */
img, video { max-width: 100%; }
.site-music-btn:focus-visible, #dc-stage a:focus-visible, #dc-stage button:focus-visible { outline: 3px solid #E1E463; outline-offset: 3px; }

/* ---------- game screens on phones / portrait tablets ---------- */
html.m, html.m body { height: auto; min-height: 100%; overflow-x: hidden; overflow-y: auto; }
html.m #dc-stage { position: relative; left: auto; top: auto; width: 100%; height: auto; min-height: 100vh; min-height: 100svh; transform: none; }
html.m #dc-stage > div {
  width: 100% !important; height: auto !important; min-height: 100vh; min-height: 100svh;
  box-sizing: border-box; display: flex; flex-direction: column; align-items: center; justify-content: flex-start;
  gap: 28px; padding: 92px 16px calc(24vh + 40px); overflow: hidden;
}
/* the pixel world: cropped to the screen, ground anchored to the bottom */
html.m #dc-stage > div > svg:first-child, html.m #dc-stage > div > svg:first-of-type {
  position: absolute !important; left: 0; top: 0; width: 100% !important; height: 100% !important; z-index: 0;
}
html.m #dc-stage > div > *:not(svg) { position: relative !important; z-index: 1; }
/* HUD bar stays pinned to the top */
html.m #dc-stage > div > div[style*="top: 24px"] { position: absolute !important; left: 16px !important; right: 16px !important; top: 16px !important; width: auto !important; }
/* everything else flows in a column */
html.m #dc-stage > div > div[style*="position: absolute"]:not([style*="top: 24px"]),
html.m #dc-stage > div > section[style*="position: absolute"] {
  position: relative !important; left: auto !important; right: auto !important; top: auto !important; bottom: auto !important;
  margin: 0 !important; width: 100% !important; max-width: 560px;
}
/* music button: fixed bottom-right */
html.m #dc-stage .site-music-btn, html.m .site-music-btn { position: fixed !important; right: 16px !important; bottom: 16px !important; z-index: 60 !important; }
/* type scale */
html.m #dc-stage h1 { font-size: clamp(40px, 12vw, 72px) !important; -webkit-text-stroke-width: 6px !important; text-align: center; line-height: 1 !important; }
html.m #dc-stage h1 + * { text-align: center; }
html.m #dc-stage span[style*="font-size: 16px; line-height: 1"] { font-size: 11px !important; text-align: center; }

/* Start screen */
html.m .page-index #dc-stage > div { justify-content: center; gap: 36px; }
html.m .page-index .fs-name-en { font-size: clamp(64px, 26vw, 150px) !important; padding: 8px 12px 14px !important; -webkit-text-stroke-width: 7px !important; }
html.m .page-index .fs-name-ur { font-size: clamp(48px, 19vw, 110px) !important; -webkit-text-stroke-width: 4px !important; padding: 16px 12px 52px !important; margin: -16px 0 -48px !important; }
html.m .page-index p[style*="width: 460px"] { width: auto !important; max-width: 100%; }
/* the run to the sunrise plays on a layer scaled like the backdrop (start-mobile.js) */
html.m .page-index #dc-stage > div > .fs-m-layer { position: absolute !important; left: 0; top: 0; width: 1280px; height: 800px; transform-origin: 0 0; pointer-events: none; z-index: 2 !important; margin: 0 !important; }
html.fs-m-running.m .page-index #dc-stage button:not(.site-music-btn),
html.fs-m-running.m .page-index #dc-stage p[style*="width: 460px"] { visibility: hidden; }
html.m .page-index #dc-stage > div > .fs-loader { position: fixed !important; inset: 0 !important; left: 0 !important; top: 0 !important; width: 100% !important; height: 100% !important; max-width: none !important; margin: 0 !important; z-index: 100 !important; padding: 16px; box-sizing: border-box; }
html.m .page-index .fs-loader > span[style*="font-size: 96px"] { font-size: clamp(48px, 16vw, 96px) !important; }
html.m .page-index .fs-loader > div { width: min(320px, 80vw) !important; }
html.m .page-index #dc-stage > div > .fs-next { position: fixed !important; inset: 0 !important; width: 100% !important; height: 100% !important; max-width: none !important; margin: 0 !important; z-index: 101 !important; }

/* Level 1: crates become a 2×2 grid of tappable boxes; the walking sprites rest */
html.m .page-level-1 .px-root { cursor: auto !important; }
/* Samia runs in from the left to the middle of the ground, the ragdoll a step behind.
   --px-ground (set by level1-mobile.js) is the grass line, measured from the bottom. */
html.m .page-level-1 #dc-stage > div > div[class*="px-hero"],
html.m .page-level-1 #dc-stage > div > div[class*="px-cat"] {
  display: block !important; position: absolute !important; top: auto !important; right: auto !important;
  bottom: var(--px-ground, 160px) !important; transform: none !important; z-index: 3 !important; margin: 0 !important; width: auto !important;
}
html.m .page-level-1 #dc-stage > div > div[class*="px-hero"] { width: 60px !important; height: 100px !important; animation: pxRunInM 2.2s cubic-bezier(.2,.6,.35,1) .1s both !important; }
html.m .page-level-1 #dc-stage > div > div[class*="px-cat"] { width: 75px !important; height: 42px !important; animation: pxCatInM 3.4s cubic-bezier(.25,.55,.4,1) .1s both !important; }
@keyframes pxRunInM { from { left: -80px; } to { left: calc(50% - 30px); } }
@keyframes pxCatInM { 0%, 12% { left: -100px; } 100% { left: calc(50% - 112px); } }
@media (prefers-reduced-motion: reduce) {
  html.m .page-level-1 #dc-stage > div > div[class*="px-hero"] { animation: none !important; left: calc(50% - 30px); }
  html.m .page-level-1 #dc-stage > div > div[class*="px-cat"] { animation: none !important; left: calc(50% - 112px); }
}
html.m .page-level-1 #dc-stage > div > div[style*="bottom: 24px"]:not(.site-music-btn) { display: none !important; }
html.m .page-level-1 #dc-stage > div > div:has(> a[href="character.html"]) {
  display: grid !important; grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 28px 16px !important; justify-items: center;
}
html.m .page-level-1 #dc-stage > div > div:has(> a[href="character.html"]) { gap: 22px 12px !important; max-width: 320px !important; }
html.m .page-level-1 #dc-stage > div > div:has(> a[href="character.html"]) > a { gap: 12px !important; }
html.m .page-level-1 #dc-stage > div > div:has(> a[href="character.html"]) > a > span:first-child {
  width: 84px !important; height: 84px !important; border-width: 4px !important;
  box-shadow: inset 4px 4px 0 #FFD95C, inset -4px -4px 0 #D99A00, 4px 4px 0 #0B1426 !important;
}
html.m .page-level-1 #dc-stage > div > div:has(> a[href="character.html"]) > a > span:first-child > span { width: 6px !important; height: 6px !important; }
html.m .page-level-1 #dc-stage > div > div:has(> a[href="character.html"]) > a > span:first-child > span[style*="left: 10px"] { left: 6px !important; }
html.m .page-level-1 #dc-stage > div > div:has(> a[href="character.html"]) > a > span:first-child > span[style*="right: 10px"] { right: 6px !important; }
html.m .page-level-1 #dc-stage > div > div:has(> a[href="character.html"]) > a > span:first-child > span[style*="top: 10px"] { top: 6px !important; }
html.m .page-level-1 #dc-stage > div > div:has(> a[href="character.html"]) > a > span:first-child > span[style*="bottom: 10px"] { bottom: 6px !important; }
html.m .page-level-1 #dc-stage > div > div:has(> a[href="character.html"]) > a > span:first-child > svg { width: 40px !important; height: 40px !important; }

/* Project Quests list */
html.m .page-quests div[style*="grid-template-columns: repeat(2"] { grid-template-columns: 1fr !important; width: 100% !important; margin-left: 0 !important; max-width: 560px; }
html.m .page-quests a.pq-card { grid-column: auto !important; padding: 12px 14px !important; gap: 12px !important; }
html.m .page-quests a.pq-card > span:first-child { width: 48px !important; height: 48px !important; }

/* Password gate */
html.m .page-wise section { width: 100% !important; margin-left: 0 !important; }
html.m .page-wise section div[style*="display: flex; gap: 14px"] { flex-direction: column; }
html.m .page-wise section button { width: 100%; }

/* Resume: stack the two items */
html.m .page-resume #dc-stage > div > div[style*="justify-content: center; gap: 56px"] { flex-direction: column; align-items: center; gap: 28px !important; }
html.m .page-resume a.cv-item { width: 100% !important; max-width: 320px; }

/* Player 2 */
html.m .page-player-2 section { width: 100% !important; margin-left: 0 !important; }
html.m .page-player-2 section div[style*="grid-template-columns: repeat(2"] { grid-template-columns: 1fr !important; }
html.m .page-player-2 #dc-stage > div > div[style*="top: 512px"], html.m .page-player-2 #dc-stage > div > div[style*="top: 488px"] { display: none !important; }

/* ---------- long pages: profile, case studies, Wise ---------- */
@media (max-width: 900px) {
  body.fluid #dc-stage h1 { font-size: clamp(38px, 10vw, 72px) !important; -webkit-text-stroke-width: 6px !important; line-height: 1 !important; text-align: center; }
  body.fluid #dc-stage [style*="grid-template-columns: repeat(4"] { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
  body.fluid #dc-stage [style*="grid-template-columns: 380px"] { grid-template-columns: 1fr !important; }
  body.fluid #dc-stage [style*="padding: 36px 40px 40px"] { padding: 24px 20px 28px !important; }
  body.fluid #dc-stage [style*="padding: 32px 36px 36px"] { padding: 24px 20px 28px !important; }
  body.fluid #dc-stage section > div[style*="height: 56px"],
  body.fluid #dc-stage section > div[style*="height: 52px"] { height: auto !important; min-height: 48px; padding-top: 10px !important; padding-bottom: 10px !important; flex-wrap: wrap; }
  body.fluid #dc-stage main#qa-content { width: calc(100% - 32px) !important; padding-top: 88px !important; gap: 28px !important; }
}
@media (max-width: 600px) {
  body.fluid #dc-stage [style*="grid-template-columns: repeat("] { grid-template-columns: 1fr !important; }
  body.fluid #dc-stage [style*="font-size: 48px; line-height: 1"] { font-size: 40px !important; }
  body.fluid #dc-stage p[style*="font-size: 19px"] { font-size: 16px !important; }
  body.fluid #dc-stage [style*="padding: 32px 36px"] { padding: 22px 18px !important; }
  body.fluid #dc-stage div[style*="justify-content: space-between"][style*="gap: 24px"] { flex-direction: column; align-items: flex-start !important; }
}

/* Character profile: the board is a fixed-height canvas; let it grow on small screens */
@media (max-width: 1000px) {
  .page-character #dc-stage > div { height: auto !important; min-height: 100vh; display: flex; flex-direction: column; }
  .page-character #dc-stage > div > svg { height: 120px !important; }
  .page-character #dc-stage > div > div[style*="height: 1812px"] {
    position: relative !important; left: auto !important; right: auto !important; top: auto !important; height: auto !important;
    width: calc(100% - 32px) !important; margin: 84px auto 40px !important;
  }
  .page-character #dc-stage > div::after {
    content: ""; display: block; height: 120px; flex-shrink: 0;
    background: linear-gradient(#0B1426 0 6px, #FFFCF2 6px 10px, #E1E463 10px 30px, #0B1426 30px 36px, #FF5B22 36px);
  }
  .page-character #dc-stage div[style*="height: 459px"], .page-character #dc-stage div[style*="flex-direction: column; gap: 0;"] { height: auto !important; }
}
@media (max-width: 1000px) {
  .page-character #dc-stage [style*="grid-template-columns: 380px"] { grid-template-columns: minmax(0, 1fr) !important; }
  .page-character #dc-stage [style*="width: 1014px"], .page-character #dc-stage [style*="width: 287px"] { width: auto !important; }
  .page-character #dc-stage [style*="white-space: nowrap"] { white-space: normal !important; }
  .page-character #dc-stage section { max-width: 100%; }
  .page-character #dc-stage div[style*="flex-wrap: wrap"] { min-width: 0; }
}
@media (max-width: 600px) {
  .page-character #dc-stage [style*="grid-template-columns: 32px 150px"] { grid-template-columns: 28px minmax(0, 104px) minmax(0, 1fr) 34px !important; column-gap: 10px !important; }
  .page-character #dc-stage [style*="grid-template-columns: 32px 150px"] > span:nth-child(4n+2) { font-size: 8px !important; }
}
@media (max-width: 1100px) {
  .page-character #dc-stage [style*="width: 1004px"], .page-character #dc-stage [style*="width: 1013px"],
  .page-character #dc-stage [style*="width: 1015px"], .page-character #dc-stage [style*="width: 1023px"],
  .page-character #dc-stage [style*="width: 780px"] { width: auto !important; max-width: 100%; }
}
@media (max-width: 1000px) {
  .page-character #dc-stage img[src*="portrait"] {
    left: 0 !important; top: 0 !important; width: 100% !important; height: 100% !important;
    object-fit: cover !important; object-position: 50% 30% !important; object-view-box: none !important; transform: none !important;
  }
  .page-character #dc-stage div:has(> img[src*="portrait"]) { min-height: 0 !important; aspect-ratio: 1 / 1; max-height: 520px; }
  .page-character #dc-stage span[style*="font-size: 20px; color: #0B1426"] { overflow-wrap: anywhere; }
}

/* ---------- desktop: the game screen's backdrop fills the whole window ---------- */
html:not(.m) body.fixed #dc-stage > div { overflow: visible !important; }
html:not(.m) body.fixed #dc-stage > div > svg:first-of-type {
  left: var(--bx, 0) !important; top: var(--by, 0) !important;
  width: var(--bw, 1280px) !important; height: var(--bh, 800px) !important;
}
html:not(.m) body.fixed .fs-loader, html:not(.m) body.fixed .fs-next {
  left: var(--bx, 0) !important; top: var(--by, 0) !important;
  width: var(--bw, 1280px) !important; height: var(--bh, 800px) !important;
}

/* Touch screens: no double-tap zoom, so a quick second tap never blows the page up. */
html { touch-action: manipulation; -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
a, button { -webkit-tap-highlight-color: transparent; }

/* Level 1 on short phones (e.g. iPhone SE): tighter spacing so the boxes, Samia and
   the ground all fit on one screen. */
@media (max-height: 760px) {
  html.m .page-level-1 #dc-stage > div { padding-top: 70px !important; gap: 12px !important; }
  html.m .page-level-1 #dc-stage > div > div:has(> a[href="character.html"]) { gap: 12px 12px !important; }
  html.m .page-level-1 #dc-stage > div > div:has(> a[href="character.html"]) > a { gap: 8px !important; }
  html.m .page-level-1 #dc-stage > div > div:has(> a[href="character.html"]) > a > span:first-child { width: 66px !important; height: 66px !important; }
  html.m .page-level-1 #dc-stage > div > div:has(> a[href="character.html"]) > a > span:first-child > svg { width: 32px !important; height: 32px !important; }
  html.m .page-level-1 #dc-stage > div > div[class*="px-hero"] { transform: scale(.8) !important; transform-origin: 50% 100% !important; }
  html.m .page-level-1 #dc-stage > div > div[class*="px-cat"] { transform: scale(.8) !important; transform-origin: 50% 100% !important; }
}

/* The ragdoll takes longer than Samia to arrive, so keep her running legs going
   until she stops (level1-mobile.js tags her run and idle frames). */
html.m .page-level-1 #dc-stage g[data-cat-run] { display: inline !important; animation: pxCatLegs 3.5s steps(1, end) both; }
html.m .page-level-1 #dc-stage g[data-cat-idle] { display: inline !important; animation: pxCatStand 3.5s steps(1, end) both; }
@keyframes pxCatLegs { 0%, 99% { visibility: visible; } 100% { visibility: hidden; } }
@keyframes pxCatStand { 0%, 99% { visibility: hidden; } 100% { visibility: visible; } }
@media (prefers-reduced-motion: reduce) {
  html.m .page-level-1 #dc-stage g[data-cat-run] { animation: none; visibility: hidden; }
  html.m .page-level-1 #dc-stage g[data-cat-idle] { animation: none; visibility: visible; }
}

/* Safari and every iPhone browser can't draw the pixelate SVG filter (it renders the
   Urdu name invisible), so show the name without it there. */
html.webkit .fs-name-ur { filter: none !important; }