/* ==========================================================
   V31 — MOBILE APP LAYER
   Loaded after style.css. Desktop remains controlled by style.css.
   Goals: high contrast, no mission UI, no overlaps, fast opaque pages.
========================================================== */

body.mobile-mode{
  --m-bg:#f3f6fa;
  --m-surface:#ffffff;
  --m-surface-2:#edf2f7;
  --m-surface-3:#e4ebf2;
  --m-text:#132337;
  --m-muted:#50657a;
  --m-subtle:#6f8295;
  --m-border:#d8e1ea;
  --m-accent:#ff5f57;
  --m-accent-dark:#d63d43;
  --m-blue:#245f88;
  --m-focus:#0877c9;
  --m-top:78px;
  --m-bottom:82px;
  --m-rail:92px;
  --m-radius:18px;
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif !important;
  color:var(--m-text) !important;
  background:var(--m-bg) !important;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  font-synthesis:none;
  color-scheme:light;
}

body.mobile-mode.time-night{
  --m-bg:#07131f;
  --m-surface:#0f2032;
  --m-surface-2:#162b40;
  --m-surface-3:#1d354b;
  --m-text:#f1f7fd;
  --m-muted:#b7c8d8;
  --m-subtle:#93a9bd;
  --m-border:#2c465e;
  --m-accent:#ff7770;
  --m-accent-dark:#ec5c59;
  --m-blue:#8bdcff;
  --m-focus:#85dcff;
  color-scheme:dark;
}

body.mobile-mode *,
body.mobile-mode *::before,
body.mobile-mode *::after{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
body.mobile-mode button,
body.mobile-mode a,
body.mobile-mode input{font-family:inherit}
body.mobile-mode button,
body.mobile-mode a{touch-action:manipulation}
body.mobile-mode img{image-rendering:auto}

/* Mission/progress layer is desktop-only. */
body.mobile-mode .objective-card,
body.mobile-mode .completion-finale,
body.mobile-mode .toast-stack,
body.mobile-mode .section-sidebar,
body.mobile-mode .coordinate-hud,
body.mobile-mode .city-minimap,
body.mobile-mode .district-directory,
body.mobile-mode .explore-hint{display:none !important}

/* -------------------- Top app bar -------------------- */
body.mobile-mode .game-hud{
  position:fixed !important;
  z-index:100 !important;
  inset:0 0 auto 0 !important;
  height:calc(var(--m-top) + env(safe-area-inset-top)) !important;
  min-height:calc(var(--m-top) + env(safe-area-inset-top)) !important;
  padding:calc(10px + env(safe-area-inset-top)) calc(12px + env(safe-area-inset-right)) 10px calc(12px + env(safe-area-inset-left)) !important;
  display:flex !important;
  align-items:center !important;
  justify-content:space-between !important;
  gap:12px !important;
  background:var(--m-surface) !important;
  color:var(--m-text) !important;
  border-bottom:1px solid var(--m-border) !important;
  box-shadow:0 5px 18px rgba(12,31,52,.10) !important;
  backdrop-filter:none !important;
  -webkit-backdrop-filter:none !important;
  transform:none !important;
}
body.mobile-mode.time-night .game-hud{box-shadow:0 5px 18px rgba(0,0,0,.28) !important}
body.mobile-mode .hud-brand{display:flex !important;align-items:center !important;gap:10px !important;min-width:0 !important;pointer-events:none}
body.mobile-mode .hud-brand-mark{
  width:50px !important;height:50px !important;min-width:50px !important;
  display:grid !important;place-items:center !important;
  border-radius:15px !important;background:var(--m-surface-2) !important;
  border:1px solid var(--m-border) !important;color:var(--m-accent) !important;
  font-size:15px !important;font-weight:900 !important;box-shadow:none !important;
}
body.mobile-mode .hud-brand>div:last-child{min-width:0 !important}
body.mobile-mode .hud-brand strong{display:block !important;color:var(--m-text) !important;font-size:16px !important;line-height:1.12 !important;letter-spacing:.01em !important;white-space:nowrap !important;overflow:hidden !important;text-overflow:ellipsis !important}
body.mobile-mode .hud-brand span{display:block !important;margin-top:3px !important;color:var(--m-muted) !important;font-size:12px !important;line-height:1.15 !important;letter-spacing:.035em !important}
body.mobile-mode .hud-status,
body.mobile-mode .hud-actions{display:none !important}
body.mobile-mode .mobile-menu-toggle{
  display:grid !important;place-items:center !important;position:static !important;
  width:58px !important;height:58px !important;min-width:58px !important;min-height:58px !important;
  padding:0 !important;margin:0 !important;border-radius:17px !important;
  border:1px solid var(--m-border) !important;background:var(--m-surface-2) !important;color:var(--m-text) !important;
  box-shadow:none !important;transform:none !important;filter:none !important;backdrop-filter:none !important;
  pointer-events:auto !important;
}
body.mobile-mode .mobile-menu-toggle span{font-size:36px !important;line-height:.8 !important;color:inherit !important;transform:none !important}
body.mobile-mode .mobile-menu-toggle:active{background:var(--m-surface-3) !important}

/* -------------------- Permanent tool rail -------------------- */
body.mobile-mode .mobile-tool-rail{
  display:flex !important;flex-direction:column !important;
  position:fixed !important;z-index:96 !important;
  left:calc(7px + env(safe-area-inset-left)) !important;
  top:calc(var(--m-top) + env(safe-area-inset-top) + 8px) !important;
  bottom:calc(var(--m-bottom) + env(safe-area-inset-bottom) + 14px) !important;
  width:var(--m-rail) !important;
  gap:6px !important;padding:8px 6px !important;
  overflow-y:auto !important;overscroll-behavior:contain !important;scrollbar-width:none !important;
  border:1px solid var(--m-border) !important;border-radius:22px !important;
  background:var(--m-surface) !important;color:var(--m-text) !important;
  box-shadow:0 8px 24px rgba(13,34,56,.12) !important;
  backdrop-filter:none !important;-webkit-backdrop-filter:none !important;transform:none !important;
}
body.mobile-mode .mobile-tool-rail::-webkit-scrollbar{display:none}
body.mobile-mode .mobile-tool-rail-title{flex:0 0 auto !important;padding:3px 0 5px !important;text-align:center !important;color:var(--m-subtle) !important;font-size:11px !important;font-weight:900 !important;letter-spacing:.1em !important}
body.mobile-mode .mobile-tool-button{
  flex:0 0 auto !important;width:100% !important;min-height:69px !important;
  display:flex !important;flex-direction:column !important;align-items:center !important;justify-content:center !important;
  gap:3px !important;padding:7px 4px !important;
  border:1px solid var(--m-border) !important;border-radius:17px !important;
  background:var(--m-surface-2) !important;color:var(--m-text) !important;
  box-shadow:none !important;transform:none !important;filter:none !important;backdrop-filter:none !important;
}
body.mobile-mode .mobile-tool-button:active{background:var(--m-surface-3) !important}
body.mobile-mode .mobile-tool-icon{display:grid !important;place-items:center !important;width:38px !important;height:34px !important;color:var(--m-blue) !important;font-size:31px !important;line-height:1 !important}
body.mobile-mode .mobile-tool-button strong{color:var(--m-text) !important;font-size:13px !important;line-height:1.05 !important;font-weight:800 !important}
body.mobile-mode .mobile-tool-button small{color:var(--m-muted) !important;font-size:11px !important;line-height:1.05 !important;font-style:normal !important}

/* -------------------- Bottom quick nav -------------------- */
body.mobile-mode .mobile-landscape-dock{
  display:grid !important;grid-template-columns:repeat(4,minmax(0,1fr)) !important;
  position:fixed !important;z-index:98 !important;
  left:calc(7px + env(safe-area-inset-left)) !important;right:calc(7px + env(safe-area-inset-right)) !important;
  bottom:calc(7px + env(safe-area-inset-bottom)) !important;
  height:var(--m-bottom) !important;min-height:var(--m-bottom) !important;
  gap:5px !important;padding:6px !important;
  border:1px solid var(--m-border) !important;border-radius:22px !important;
  background:var(--m-surface) !important;color:var(--m-text) !important;
  box-shadow:0 8px 24px rgba(13,34,56,.13) !important;
  backdrop-filter:none !important;-webkit-backdrop-filter:none !important;transform:none !important;
}
body.mobile-mode .mobile-dock-item{
  min-width:0 !important;min-height:68px !important;padding:5px 3px !important;
  display:flex !important;flex-direction:column !important;align-items:center !important;justify-content:center !important;gap:5px !important;
  border:1px solid var(--m-border) !important;border-radius:16px !important;
  background:var(--m-surface-2) !important;color:var(--m-text) !important;
  box-shadow:none !important;transform:none !important;filter:none !important;
}
body.mobile-mode .mobile-dock-item span{font-size:27px !important;line-height:1 !important;color:inherit !important}
body.mobile-mode .mobile-dock-item strong{min-width:0 !important;color:inherit !important;font-size:12px !important;line-height:1.05 !important;font-weight:800 !important;white-space:nowrap !important;overflow:hidden !important;text-overflow:ellipsis !important}
body.mobile-mode .mobile-dock-quick{background:#183653 !important;color:#fff !important;border-color:#183653 !important}
body.mobile-mode.time-night .mobile-dock-quick{background:#24618b !important;color:#fff !important;border-color:#367aa8 !important}
body.mobile-mode .mobile-dock-resume{background:var(--m-accent) !important;color:#fff !important;border-color:var(--m-accent-dark) !important}

/* -------------------- Full-screen Explore menu -------------------- */
body.mobile-mode .mobile-menu-backdrop{display:none !important}
body.mobile-mode .mobile-menu-panel{
  position:fixed !important;z-index:600 !important;inset:0 !important;
  width:100vw !important;max-width:none !important;height:100dvh !important;max-height:none !important;
  display:grid !important;grid-template-rows:auto auto minmax(0,1fr) auto !important;
  border:0 !important;border-radius:0 !important;
  background:var(--m-bg) !important;color:var(--m-text) !important;
  box-shadow:none !important;filter:none !important;backdrop-filter:none !important;-webkit-backdrop-filter:none !important;
  opacity:0 !important;visibility:hidden !important;pointer-events:none !important;transform:none !important;transition:none !important;
}
body.mobile-mode .mobile-menu-panel.open{opacity:1 !important;visibility:visible !important;pointer-events:auto !important;transform:none !important}
body.mobile-mode .mobile-menu-header{
  display:flex !important;align-items:center !important;justify-content:space-between !important;gap:12px !important;
  min-height:82px !important;padding:calc(11px + env(safe-area-inset-top)) calc(14px + env(safe-area-inset-right)) 11px calc(14px + env(safe-area-inset-left)) !important;
  background:var(--m-surface) !important;color:var(--m-text) !important;border-bottom:1px solid var(--m-border) !important;
}
body.mobile-mode .mobile-menu-brand{display:flex !important;align-items:center !important;gap:11px !important;min-width:0 !important}
body.mobile-mode .mobile-menu-brand-mark{width:52px !important;height:52px !important;min-width:52px !important;display:grid !important;place-items:center !important;border-radius:16px !important;background:var(--m-surface-2) !important;color:var(--m-accent) !important;border:1px solid var(--m-border) !important;font-size:15px !important;font-weight:900 !important}
body.mobile-mode .mobile-menu-brand>div{min-width:0 !important}
body.mobile-mode .mobile-menu-brand small{display:block !important;color:var(--m-muted) !important;font-size:11px !important;line-height:1.1 !important;letter-spacing:.08em !important}
body.mobile-mode .mobile-menu-brand strong{display:block !important;margin-top:4px !important;color:var(--m-text) !important;font-size:25px !important;line-height:1 !important;letter-spacing:-.02em !important}
body.mobile-mode .mobile-menu-close,
body.mobile-mode .mobile-back-map{
  flex:0 0 auto !important;min-width:84px !important;height:52px !important;padding:0 13px !important;
  display:inline-flex !important;align-items:center !important;justify-content:center !important;gap:7px !important;
  border:1px solid var(--m-border) !important;border-radius:15px !important;
  background:var(--m-surface-2) !important;color:var(--m-text) !important;
  box-shadow:none !important;font-size:20px !important;font-weight:800 !important;letter-spacing:0 !important;
}
body.mobile-mode .mobile-menu-close strong,
body.mobile-mode .mobile-back-map span{color:inherit !important;font-size:14px !important;line-height:1 !important;font-weight:800 !important}
body.mobile-mode .mobile-menu-close:active,
body.mobile-mode .mobile-back-map:active{background:var(--m-surface-3) !important}
body.mobile-mode .mobile-menu-priority{display:grid !important;grid-template-columns:1fr 1fr !important;gap:10px !important;padding:12px 14px !important;background:var(--m-bg) !important}
body.mobile-mode .mobile-priority-card{
  min-width:0 !important;min-height:92px !important;padding:12px !important;
  display:grid !important;grid-template-columns:40px minmax(0,1fr) !important;gap:10px !important;align-items:center !important;
  border:1px solid var(--m-border) !important;border-radius:18px !important;background:var(--m-surface) !important;color:var(--m-text) !important;
  box-shadow:none !important;transform:none !important;
}
body.mobile-mode .mobile-priority-icon{font-size:28px !important;line-height:1 !important;color:var(--m-blue) !important}
body.mobile-mode .mobile-priority-card>span:last-child{min-width:0 !important}
body.mobile-mode .mobile-priority-card small{display:block !important;color:var(--m-subtle) !important;font-size:10px !important;font-weight:900 !important;letter-spacing:.07em !important}
body.mobile-mode .mobile-priority-card strong{display:block !important;margin-top:3px !important;color:var(--m-text) !important;font-size:17px !important;line-height:1.1 !important}
body.mobile-mode .mobile-priority-card em{display:block !important;margin-top:3px !important;color:var(--m-muted) !important;font-size:12px !important;line-height:1.2 !important;font-style:normal !important}
body.mobile-mode .mobile-priority-resume{background:var(--m-accent) !important;color:#fff !important;border-color:var(--m-accent-dark) !important}
body.mobile-mode .mobile-priority-resume .mobile-priority-icon,
body.mobile-mode .mobile-priority-resume small,
body.mobile-mode .mobile-priority-resume strong,
body.mobile-mode .mobile-priority-resume em{color:#fff !important}
body.mobile-mode .mobile-menu-tabs,
body.mobile-mode [data-mobile-menu-view="tools"]{display:none !important}
body.mobile-mode .mobile-menu-scroll{min-height:0 !important;padding:4px 14px 14px !important;overflow-y:auto !important;overflow-x:hidden !important;-webkit-overflow-scrolling:touch !important;overscroll-behavior:contain !important}
body.mobile-mode .mobile-menu-group-title{padding:8px 1px 10px !important}
body.mobile-mode .mobile-menu-group-title span{display:block !important;color:var(--m-subtle) !important;font-size:11px !important;font-weight:900 !important;letter-spacing:.08em !important}
body.mobile-mode .mobile-menu-group-title strong{display:block !important;margin-top:3px !important;color:var(--m-text) !important;font-size:15px !important;line-height:1.1 !important}
body.mobile-mode .mobile-menu-sections{display:grid !important;grid-template-columns:1fr !important;gap:9px !important}
body.mobile-mode .mobile-section-item{
  position:relative !important;min-width:0 !important;min-height:84px !important;padding:11px 42px 11px 11px !important;
  display:grid !important;grid-template-columns:54px minmax(0,1fr) !important;gap:11px !important;align-items:center !important;text-align:left !important;
  border:1px solid var(--m-border) !important;border-radius:18px !important;background:var(--m-surface) !important;color:var(--m-text) !important;
  box-shadow:none !important;transform:none !important;filter:none !important;
}
body.mobile-mode .mobile-section-item:active{background:var(--m-surface-2) !important}
body.mobile-mode .mobile-section-icon{width:54px !important;height:54px !important;display:grid !important;place-items:center !important;border-radius:16px !important;background:color-mix(in srgb,var(--district) 14%,var(--m-surface-2)) !important;color:var(--district) !important;font-size:27px !important;line-height:1 !important}
body.mobile-mode .mobile-section-rm{font-size:14px !important;font-weight:900 !important}
body.mobile-mode .mobile-section-copy{min-width:0 !important}
body.mobile-mode .mobile-section-copy strong{display:block !important;color:var(--m-text) !important;font-size:17px !important;line-height:1.12 !important;overflow-wrap:anywhere !important}
body.mobile-mode .mobile-section-copy small{display:block !important;margin-top:5px !important;color:var(--m-muted) !important;font-size:13px !important;line-height:1.25 !important;overflow-wrap:anywhere !important}
body.mobile-mode .mobile-section-index{position:absolute !important;right:12px !important;top:12px !important;color:var(--m-subtle) !important;font-size:11px !important;font-weight:900 !important}
body.mobile-mode .mobile-menu-footer{padding:10px calc(16px + env(safe-area-inset-right)) calc(12px + env(safe-area-inset-bottom)) calc(16px + env(safe-area-inset-left)) !important;background:var(--m-surface) !important;border-top:1px solid var(--m-border) !important;color:var(--m-muted) !important}
body.mobile-mode .mobile-menu-footer>small{display:block !important;color:var(--m-muted) !important;font-size:12px !important;line-height:1.35 !important}

/* -------------------- Full-screen content pages -------------------- */
body.mobile-mode .section-modal,
body.mobile-mode .recruiter-modal,
body.mobile-mode .command-palette{
  position:fixed !important;z-index:700 !important;inset:0 !important;padding:0 !important;
  background:var(--m-bg) !important;color:var(--m-text) !important;
  transition:none !important;animation:none !important;transform:none !important;filter:none !important;backdrop-filter:none !important;-webkit-backdrop-filter:none !important;
}
body.mobile-mode .section-backdrop,
body.mobile-mode .recruiter-backdrop,
body.mobile-mode .command-backdrop{display:none !important}
body.mobile-mode .section-panel,
body.mobile-mode .recruiter-panel,
body.mobile-mode .command-panel{
  width:100vw !important;height:100dvh !important;max-width:none !important;max-height:none !important;
  margin:0 !important;border:0 !important;border-radius:0 !important;
  background:var(--m-bg) !important;color:var(--m-text) !important;box-shadow:none !important;
  transform:none !important;transition:none !important;animation:none !important;filter:none !important;backdrop-filter:none !important;-webkit-backdrop-filter:none !important;
}
body.mobile-mode .section-panel{display:grid !important;grid-template-rows:auto minmax(0,1fr) auto !important}
body.mobile-mode .section-panel-header,
body.mobile-mode .recruiter-header,
body.mobile-mode .command-panel>header{
  position:relative !important;z-index:2 !important;
  display:grid !important;grid-template-columns:auto minmax(0,1fr) !important;align-items:center !important;gap:12px !important;
  min-height:86px !important;padding:calc(10px + env(safe-area-inset-top)) calc(14px + env(safe-area-inset-right)) 10px calc(14px + env(safe-area-inset-left)) !important;
  background:var(--m-surface) !important;color:var(--m-text) !important;border-bottom:1px solid var(--m-border) !important;box-shadow:none !important;
}
body.mobile-mode .section-panel-header>div,
body.mobile-mode .recruiter-header>div,
body.mobile-mode .command-panel>header>div{min-width:0 !important}
body.mobile-mode .section-close,
body.mobile-mode .recruiter-close,
body.mobile-mode .command-panel>header>button:last-child{display:none !important}
body.mobile-mode .section-panel-index,
body.mobile-mode .recruiter-eyebrow,
body.mobile-mode .command-panel>header span{display:block !important;color:var(--m-subtle) !important;font-size:11px !important;line-height:1.15 !important;font-weight:900 !important;letter-spacing:.08em !important}
body.mobile-mode .section-panel-header h2,
body.mobile-mode .recruiter-header h2,
body.mobile-mode .command-panel>header h2{
  max-width:100% !important;margin:4px 0 0 !important;color:var(--m-text) !important;
  font-size:clamp(22px,6.2vw,27px) !important;line-height:1.08 !important;letter-spacing:-.025em !important;
  white-space:normal !important;overflow:visible !important;text-overflow:clip !important;overflow-wrap:anywhere !important;
}
body.mobile-mode .section-panel-header p,
body.mobile-mode .recruiter-header p{display:block !important;max-width:100% !important;margin:4px 0 0 !important;color:var(--m-muted) !important;font-size:13px !important;line-height:1.25 !important;white-space:normal !important;overflow:visible !important;text-overflow:clip !important;overflow-wrap:anywhere !important}

body.mobile-mode .section-content,
body.mobile-mode .recruiter-scroll,
body.mobile-mode .command-results{
  min-height:0 !important;background:var(--m-bg) !important;color:var(--m-text) !important;
  overflow-y:auto !important;overflow-x:hidden !important;-webkit-overflow-scrolling:touch !important;overscroll-behavior:contain !important;
}
body.mobile-mode .section-content{padding:16px 16px 24px !important;font-size:16px !important;line-height:1.58 !important;contain:layout style !important}
body.mobile-mode .content-enter{animation:none !important;transform:none !important;opacity:1 !important}
body.mobile-mode .showcase-layout,
body.mobile-mode .education-record,
body.mobile-mode .skill-record,
body.mobile-mode .about-record,
body.mobile-mode .timeline-record,
body.mobile-mode .research-record{display:grid !important;grid-template-columns:1fr !important;gap:17px !important;min-width:0 !important;min-height:0 !important}
body.mobile-mode .showcase-copy,
body.mobile-mode .record-main,
body.mobile-mode .contact-inner{min-width:0 !important;color:var(--m-text) !important}
body.mobile-mode .showcase-media{
  position:relative !important;width:100% !important;height:clamp(210px,56vw,270px) !important;min-height:210px !important;
  overflow:hidden !important;border:1px solid var(--m-border) !important;border-radius:20px !important;
  background:var(--m-surface-2) !important;box-shadow:none !important;
}
body.mobile-mode .showcase-media img{width:100% !important;height:100% !important;min-height:0 !important;object-fit:cover !important;background:var(--m-surface-2) !important;transform:none !important;filter:none !important}
body.mobile-mode .media-label,
body.mobile-mode .media-tech-overlay{font-size:10px !important}
body.mobile-mode .content-kicker,
body.mobile-mode .record-company{color:var(--m-accent-dark) !important;font-size:11px !important;font-weight:900 !important;letter-spacing:.08em !important}
body.mobile-mode.time-night .content-kicker,
body.mobile-mode.time-night .record-company{color:#ff9892 !important}
body.mobile-mode .showcase-copy h3,
body.mobile-mode .record-main h3,
body.mobile-mode .contact-inner h3{margin:5px 0 10px !important;color:var(--m-text) !important;font-size:clamp(25px,7vw,31px) !important;line-height:1.08 !important;letter-spacing:-.03em !important;overflow-wrap:anywhere !important}
body.mobile-mode .content-description,
body.mobile-mode .record-points li,
body.mobile-mode .research-citation,
body.mobile-mode .contact-record p,
body.mobile-mode .about-record p,
body.mobile-mode .education-record p,
body.mobile-mode .skill-record p{color:var(--m-muted) !important;font-size:16px !important;line-height:1.62 !important;overflow-wrap:anywhere !important}
body.mobile-mode .record-points{gap:9px !important}
body.mobile-mode .record-points li::before{background:var(--m-accent) !important}
body.mobile-mode .content-meta{margin-top:15px !important;gap:0 !important}
body.mobile-mode .meta-row{min-width:0 !important;display:grid !important;grid-template-columns:92px minmax(0,1fr) !important;gap:11px !important;padding:11px 0 !important;border-top:1px solid var(--m-border) !important}
body.mobile-mode .meta-row span{color:var(--m-subtle) !important;font-size:11px !important;line-height:1.35 !important;font-weight:800 !important;overflow-wrap:anywhere !important}
body.mobile-mode .meta-row strong{min-width:0 !important;color:var(--m-text) !important;font-size:15px !important;line-height:1.42 !important;overflow-wrap:anywhere !important}
body.mobile-mode .tag-list,
body.mobile-mode .skill-list{display:flex !important;flex-wrap:wrap !important;gap:7px !important;margin-top:14px !important}
body.mobile-mode .tag-list span,
body.mobile-mode .skill-pill{max-width:100% !important;padding:8px 11px !important;border:1px solid var(--m-border) !important;border-radius:999px !important;background:var(--m-surface-2) !important;color:var(--m-text) !important;font-size:13px !important;line-height:1.15 !important;overflow-wrap:anywhere !important}
body.mobile-mode .used-in{border-color:var(--m-border) !important}
body.mobile-mode .used-in>span{color:var(--m-subtle) !important;font-size:11px !important}
body.mobile-mode .used-project{color:var(--m-text) !important;border-color:var(--m-border) !important;font-size:14px !important;line-height:1.4 !important}

/* Action buttons: one column on phones prevents all text collisions. */
body.mobile-mode .project-tool-actions{display:grid !important;grid-template-columns:1fr !important;gap:9px !important;margin-top:16px !important;align-items:stretch !important}
body.mobile-mode .project-tool-actions button,
body.mobile-mode .project-tech-button,
body.mobile-mode .archive-link,
body.mobile-mode .recruiter-actions a,
body.mobile-mode .recruiter-project-card button,
body.mobile-mode .recruiter-block-head button{
  width:100% !important;max-width:100% !important;min-width:0 !important;min-height:54px !important;
  display:flex !important;align-items:center !important;justify-content:center !important;
  margin:0 !important;padding:11px 13px !important;
  border:1px solid var(--m-border) !important;border-radius:14px !important;
  background:var(--m-surface-2) !important;color:var(--m-text) !important;
  box-shadow:none !important;font-size:13px !important;line-height:1.25 !important;font-weight:850 !important;letter-spacing:.02em !important;
  text-align:center !important;white-space:normal !important;overflow-wrap:anywhere !important;word-break:normal !important;
}
body.mobile-mode .archive-link,
body.mobile-mode .recruiter-actions .recruiter-primary{background:var(--m-accent) !important;color:#fff !important;border-color:var(--m-accent-dark) !important}
body.mobile-mode .project-tool-actions button:active,
body.mobile-mode .project-tech-button:active,
body.mobile-mode .recruiter-project-card button:active{background:var(--m-surface-3) !important}

body.mobile-mode .evidence-grid{display:grid !important;grid-template-columns:1fr !important;gap:9px !important;margin-top:15px !important}
body.mobile-mode .evidence-card{min-width:0 !important;min-height:82px !important;padding:13px !important;border:1px solid var(--m-border) !important;border-radius:17px !important;background:var(--m-surface) !important;color:var(--m-text) !important;box-shadow:none !important}
body.mobile-mode .evidence-card>span{font-size:24px !important;color:var(--m-blue) !important}
body.mobile-mode .evidence-card small{color:var(--m-subtle) !important;font-size:11px !important}
body.mobile-mode .evidence-card strong{color:var(--m-text) !important;font-size:15px !important;line-height:1.25 !important;overflow-wrap:anywhere !important}
body.mobile-mode .project-tool-panel{min-width:0 !important;padding:14px !important;border:1px solid var(--m-border) !important;border-radius:18px !important;background:var(--m-surface) !important;color:var(--m-text) !important;box-shadow:none !important}
body.mobile-mode .tool-panel-head{gap:10px !important;align-items:flex-start !important;min-width:0 !important}
body.mobile-mode .tool-panel-head strong{color:var(--m-text) !important;font-size:17px !important;line-height:1.2 !important;overflow-wrap:anywhere !important}
body.mobile-mode .tool-panel-head span,
body.mobile-mode .replay-state{color:var(--m-subtle) !important;font-size:10px !important}
body.mobile-mode .replay-track{grid-auto-columns:minmax(135px,74vw) !important;gap:8px !important;overflow-x:auto !important;scroll-snap-type:x proximity !important}
body.mobile-mode .replay-step,
body.mobile-mode .blueprint-node,
body.mobile-mode .demo-node{min-width:0 !important;background:var(--m-surface-2) !important;color:var(--m-text) !important;border-color:var(--m-border) !important}
body.mobile-mode .replay-step p,
body.mobile-mode .blueprint-node strong,
body.mobile-mode .demo-node{color:var(--m-text) !important;font-size:14px !important;line-height:1.35 !important;overflow-wrap:anywhere !important}
body.mobile-mode .blueprint-flow{display:flex !important;flex-direction:column !important;gap:7px !important;overflow:visible !important}
body.mobile-mode .blueprint-node{width:100% !important;max-width:none !important;min-height:0 !important}
body.mobile-mode .blueprint-arrow{align-self:center !important;transform:rotate(90deg) !important;color:var(--m-blue) !important}
body.mobile-mode .research-citation{padding:13px !important;border-left:3px solid var(--m-accent) !important;background:var(--m-surface) !important;color:var(--m-muted) !important;box-shadow:none !important}
body.mobile-mode .visual-card{min-height:210px !important;border:1px solid var(--m-border) !important;border-radius:20px !important;background:var(--m-surface-2) !important;color:var(--m-text) !important;box-shadow:none !important}
body.mobile-mode .visual-card-code{color:var(--m-accent-dark) !important;font-size:11px !important}
body.mobile-mode.time-night .visual-card-code{color:#ff9892 !important}
body.mobile-mode .visual-symbol{font-size:72px !important;color:transparent !important;-webkit-text-stroke:1px color-mix(in srgb,var(--m-text) 35%,transparent) !important}
body.mobile-mode .timeline-side{border:0 !important;border-bottom:1px solid var(--m-border) !important;padding:0 0 12px !important}
body.mobile-mode .timeline-year{color:var(--m-accent) !important;font-size:38px !important;line-height:1 !important}
body.mobile-mode .timeline-period,
body.mobile-mode .record-role{color:var(--m-muted) !important;font-size:14px !important}
body.mobile-mode .timeline-marker{display:none !important}
body.mobile-mode .research-file-number,
body.mobile-mode .contact-signal{width:90px !important;height:90px !important;background:var(--m-surface-2) !important;color:var(--m-accent) !important;border-color:var(--m-border) !important;box-shadow:none !important;font-size:28px !important}
body.mobile-mode .contact-value{color:var(--m-text) !important;font-size:19px !important;line-height:1.35 !important;overflow-wrap:anywhere !important;word-break:break-word !important}

/* Bottom navigation row never overlays content because it is its own grid row. */
body.mobile-mode .section-navigation{
  position:relative !important;z-index:2 !important;min-height:80px !important;
  display:grid !important;grid-template-columns:58px minmax(0,1fr) 58px !important;align-items:center !important;gap:9px !important;
  padding:8px calc(12px + env(safe-area-inset-right)) calc(8px + env(safe-area-inset-bottom)) calc(12px + env(safe-area-inset-left)) !important;
  background:var(--m-surface) !important;color:var(--m-text) !important;border-top:1px solid var(--m-border) !important;box-shadow:none !important;
}
body.mobile-mode .mobile-swipe-hint{display:none !important}
body.mobile-mode .section-nav-button{
  width:58px !important;height:58px !important;min-width:58px !important;min-height:58px !important;padding:0 !important;
  border:1px solid var(--m-border) !important;border-radius:17px !important;background:var(--m-surface-2) !important;color:var(--m-text) !important;
  box-shadow:none !important;font-size:0 !important;overflow:hidden !important;
}
body.mobile-mode .section-nav-button:first-child::before{content:"←" !important;font-size:27px !important;color:var(--m-text) !important}
body.mobile-mode .section-nav-button:last-child::before{content:"→" !important;font-size:27px !important;color:var(--m-text) !important}
body.mobile-mode .section-slider-area{min-width:0 !important}
body.mobile-mode .slider-meta{display:grid !important;grid-template-columns:1fr auto 1fr !important;color:var(--m-muted) !important;font-size:11px !important;line-height:1.1 !important}
body.mobile-mode .slider-meta span{color:inherit !important}
body.mobile-mode #sectionSlider{width:100% !important;height:28px !important;accent-color:var(--m-accent) !important}

/* -------------------- Recruiter -------------------- */
body.mobile-mode .recruiter-panel{display:grid !important;grid-template-rows:auto minmax(0,1fr) !important}
body.mobile-mode .recruiter-scroll{padding:15px 16px 26px !important;font-size:16px !important;contain:layout style !important}
body.mobile-mode .recruiter-hero,
body.mobile-mode .recruiter-block,
body.mobile-mode .recruiter-snapshot,
body.mobile-mode .recruiter-project-card,
body.mobile-mode .recruiter-value-grid article,
body.mobile-mode .recruiter-skill-groups div{
  min-width:0 !important;border:1px solid var(--m-border) !important;border-radius:17px !important;background:var(--m-surface) !important;color:var(--m-text) !important;box-shadow:none !important;
}
body.mobile-mode .recruiter-hero{display:grid !important;grid-template-columns:1fr !important;gap:14px !important;padding:15px !important}
body.mobile-mode .recruiter-hero-copy h3{color:var(--m-text) !important;font-size:27px !important;line-height:1.08 !important;overflow-wrap:anywhere !important}
body.mobile-mode .recruiter-hero-copy p,
body.mobile-mode .recruiter-section p,
body.mobile-mode .recruiter-project-card p,
body.mobile-mode .recruiter-record p,
body.mobile-mode .recruiter-value-grid p,
body.mobile-mode .recruiter-skill-groups p{color:var(--m-muted) !important;font-size:15px !important;line-height:1.55 !important;overflow-wrap:anywhere !important}
body.mobile-mode .recruiter-snapshot{padding:14px !important}
body.mobile-mode .recruiter-snapshot>span,
body.mobile-mode .recruiter-snapshot dt,
body.mobile-mode .recruiter-value-grid small,
body.mobile-mode .recruiter-skill-groups span{color:var(--m-subtle) !important;font-size:10px !important}
body.mobile-mode .recruiter-snapshot dd,
body.mobile-mode .recruiter-project-card strong,
body.mobile-mode .recruiter-value-grid strong{color:var(--m-text) !important;font-size:13px !important;line-height:1.4 !important;overflow-wrap:anywhere !important}
body.mobile-mode .recruiter-block{margin-top:12px !important;padding:14px !important}
body.mobile-mode .recruiter-block-head{display:flex !important;align-items:flex-start !important;justify-content:space-between !important;gap:10px !important;flex-wrap:wrap !important}
body.mobile-mode .recruiter-block-head h3{color:var(--m-text) !important;font-size:21px !important;line-height:1.15 !important;overflow-wrap:anywhere !important}
body.mobile-mode .recruiter-project-grid,
body.mobile-mode .recruiter-two-column,
body.mobile-mode .recruiter-value-grid,
body.mobile-mode .recruiter-skill-groups{display:grid !important;grid-template-columns:1fr !important;gap:10px !important}
body.mobile-mode .recruiter-project-card{overflow:hidden !important;content-visibility:auto !important;contain-intrinsic-size:260px !important}
body.mobile-mode .recruiter-project-card img{width:100% !important;height:180px !important;object-fit:cover !important;background:var(--m-surface-2) !important}
body.mobile-mode .recruiter-project-card>div:not(.recruiter-project-symbol){padding:13px !important}
body.mobile-mode .recruiter-project-card h4{color:var(--m-text) !important;font-size:20px !important;line-height:1.15 !important;overflow-wrap:anywhere !important}
body.mobile-mode .recruiter-record{border-color:var(--m-border) !important}
body.mobile-mode .recruiter-record strong{color:var(--m-text) !important;font-size:15px !important}
body.mobile-mode .recruiter-record span{color:var(--m-accent-dark) !important;font-size:11px !important}
body.mobile-mode.time-night .recruiter-record span{color:#ff9892 !important}
body.mobile-mode .recruiter-footer-cta{display:flex !important;flex-direction:column !important;align-items:flex-start !important;gap:12px !important;background:#17344f !important;color:#fff !important;border-radius:17px !important;padding:14px !important}
body.mobile-mode.time-night .recruiter-footer-cta{background:#1a4160 !important}
body.mobile-mode .recruiter-footer-cta strong,
body.mobile-mode .recruiter-footer-links a{color:#fff !important}
body.mobile-mode .recruiter-footer-links{display:flex !important;flex-wrap:wrap !important;gap:10px !important;justify-content:flex-start !important}

/* -------------------- Search -------------------- */
body.mobile-mode .command-panel{display:grid !important;grid-template-rows:auto auto auto minmax(0,1fr) !important}
body.mobile-mode .command-search{min-height:60px !important;margin:12px 14px 8px !important;padding:0 14px !important;display:flex !important;align-items:center !important;gap:10px !important;border:1px solid var(--m-border) !important;border-radius:15px !important;background:var(--m-surface) !important;color:var(--m-text) !important;box-shadow:none !important}
body.mobile-mode .command-search span{color:var(--m-blue) !important;font-size:22px !important}
body.mobile-mode .command-search input{min-width:0 !important;flex:1 !important;background:transparent !important;color:var(--m-text) !important;border:0 !important;outline:0 !important;font-size:17px !important}
body.mobile-mode .command-search input::placeholder{color:var(--m-subtle) !important;opacity:1 !important}
body.mobile-mode .command-search kbd{display:none !important}
body.mobile-mode .command-suggestions{display:flex !important;gap:7px !important;padding:0 14px 10px !important;overflow-x:auto !important;scrollbar-width:none !important}
body.mobile-mode .command-suggestions::-webkit-scrollbar{display:none}
body.mobile-mode .command-suggestions button{flex:0 0 auto !important;min-height:40px !important;padding:8px 11px !important;border:1px solid var(--m-border) !important;border-radius:999px !important;background:var(--m-surface-2) !important;color:var(--m-text) !important;font-size:11px !important;white-space:nowrap !important}
body.mobile-mode .command-results{padding:0 14px 22px !important}
body.mobile-mode .command-result{min-width:0 !important;min-height:80px !important;padding:12px !important;margin-bottom:8px !important;border:1px solid var(--m-border) !important;border-radius:15px !important;background:var(--m-surface) !important;color:var(--m-text) !important;box-shadow:none !important;content-visibility:auto !important;contain-intrinsic-size:84px !important}
body.mobile-mode .command-result strong{color:var(--m-text) !important;font-size:16px !important;line-height:1.25 !important;overflow-wrap:anywhere !important}
body.mobile-mode .command-result small,
body.mobile-mode .command-result em{color:var(--m-muted) !important;font-size:12px !important;line-height:1.35 !important;overflow-wrap:anywhere !important}
body.mobile-mode .command-result-icon{background:var(--m-surface-2) !important;color:var(--m-blue) !important}
body.mobile-mode .command-panel footer{display:none !important}

/* Hide persistent map controls while an opaque page is open. */
body.mobile-mode.modal-open .mobile-tool-rail,
body.mobile-mode.modal-open .mobile-landscape-dock,
body.mobile-mode.recruiter-open .mobile-tool-rail,
body.mobile-mode.recruiter-open .mobile-landscape-dock,
body.mobile-mode.command-open .mobile-tool-rail,
body.mobile-mode.command-open .mobile-landscape-dock,
body.mobile-mode.mobile-menu-open .mobile-tool-rail,
body.mobile-mode.mobile-menu-open .mobile-landscape-dock{display:none !important}

/* No costly glass/transition effects on opaque mobile pages. */
body.mobile-mode .mobile-menu-panel *,
body.mobile-mode .section-panel *,
body.mobile-mode .recruiter-panel *,
body.mobile-mode .command-panel *{
  backdrop-filter:none !important;
  -webkit-backdrop-filter:none !important;
  animation-duration:.001ms !important;
  animation-iteration-count:1 !important;
}
body.mobile-mode .mobile-menu-panel,
body.mobile-mode .section-panel,
body.mobile-mode .recruiter-panel,
body.mobile-mode .command-panel{filter:none !important}

/* Accessible keyboard/switch focus. */
body.mobile-mode button:focus-visible,
body.mobile-mode a:focus-visible,
body.mobile-mode input:focus-visible{outline:3px solid var(--m-focus) !important;outline-offset:3px !important}

/* Small phones: prevent metadata and action controls from crowding. */
@media (max-width:390px){
  body.mobile-mode{--m-rail:88px}
  body.mobile-mode .hud-brand strong{max-width:175px !important;font-size:15px !important}
  body.mobile-mode .hud-brand span{font-size:11px !important}
  body.mobile-mode .mobile-tool-icon{font-size:29px !important}
  body.mobile-mode .mobile-menu-priority{grid-template-columns:1fr !important}
  body.mobile-mode .meta-row{grid-template-columns:1fr !important;gap:4px !important}
  body.mobile-mode .showcase-media{height:220px !important}
}

/* Wider phones/tablets can use two-column content without squeezing text. */
@media (min-width:540px){
  body.mobile-mode .mobile-menu-sections{grid-template-columns:repeat(2,minmax(0,1fr)) !important}
  body.mobile-mode .project-tool-actions{grid-template-columns:repeat(2,minmax(0,1fr)) !important}
  body.mobile-mode .project-tool-actions .archive-link{grid-column:1/-1 !important}
  body.mobile-mode .evidence-grid{grid-template-columns:repeat(2,minmax(0,1fr)) !important}
  body.mobile-mode .recruiter-value-grid,
  body.mobile-mode .recruiter-skill-groups{grid-template-columns:repeat(2,minmax(0,1fr)) !important}
}

/* Short landscape screens: keep controls large and let vertical containers scroll. */
@media (orientation:landscape) and (max-height:520px){
  body.mobile-mode{--m-top:66px;--m-bottom:70px;--m-rail:88px}
  body.mobile-mode .hud-brand-mark{width:44px !important;height:44px !important;min-width:44px !important}
  body.mobile-mode .mobile-menu-toggle{width:50px !important;height:50px !important;min-width:50px !important;min-height:50px !important}
  body.mobile-mode .mobile-tool-button{min-height:62px !important}
  body.mobile-mode .mobile-tool-icon{font-size:27px !important}
  body.mobile-mode .mobile-dock-item{min-height:57px !important}
  body.mobile-mode .mobile-menu-priority{display:none !important}
  body.mobile-mode .mobile-menu-sections{grid-template-columns:repeat(4,minmax(0,1fr)) !important}
  body.mobile-mode .mobile-section-item{min-height:86px !important;padding-right:35px !important}
}

@media (prefers-reduced-motion:reduce){
  body.mobile-mode *,body.mobile-mode *::before,body.mobile-mode *::after{scroll-behavior:auto !important;transition:none !important;animation:none !important}
}

/* ==========================================================
   V24 — MOBILE CONTACT LAYOUT
========================================================== */
body.mobile-mode .contact-record{
  width:100% !important;
  min-height:0 !important;
  padding:12px 0 30px !important;
  display:flex !important;
  align-items:flex-start !important;
  justify-content:center !important;
  text-align:center !important;
}
body.mobile-mode .contact-inner{
  width:100% !important;
  max-width:680px !important;
  min-width:0 !important;
  margin:0 auto !important;
  padding:0 !important;
  display:flex !important;
  flex-direction:column !important;
  align-items:center !important;
}
body.mobile-mode .contact-signal{
  flex:0 0 auto !important;
  width:88px !important;
  height:88px !important;
  margin:0 0 18px !important;
  font-size:28px !important;
}
body.mobile-mode .contact-copy{
  width:100% !important;
  max-width:620px !important;
  min-width:0 !important;
  display:flex !important;
  flex-direction:column !important;
  align-items:center !important;
}
body.mobile-mode .contact-copy .content-kicker{
  margin:0 0 9px !important;
}
body.mobile-mode .contact-copy h3{
  margin:0 0 13px !important;
}
body.mobile-mode .contact-copy .content-description{
  width:100% !important;
  max-width:42rem !important;
  margin:0 auto 20px !important;
}
body.mobile-mode .contact-value{
  display:block !important;
  width:100% !important;
  max-width:100% !important;
  min-width:0 !important;
  margin:0 !important;
  padding:0 5px !important;
  box-sizing:border-box !important;
  color:var(--m-text) !important;
  font-size:clamp(18px,5.2vw,22px) !important;
  font-weight:800 !important;
  line-height:1.3 !important;
  overflow-wrap:anywhere !important;
  word-break:break-word !important;
}
body.mobile-mode .contact-actions{
  width:100% !important;
  min-width:0 !important;
  margin-top:22px !important;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
}
body.mobile-mode .contact-actions .contact-cta{
  width:100% !important;
  max-width:460px !important;
  min-width:0 !important;
  min-height:56px !important;
  margin:0 !important;
  padding:14px 18px !important;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  font-size:14px !important;
  line-height:1.2 !important;
  white-space:normal !important;
  overflow-wrap:anywhere !important;
}


/* ==========================================================
   V26 — MOBILE REAL VISUALS
========================================================== */
@media (max-width:900px), (pointer:coarse){
  body.mobile-mode .visual-card.education-visual,
  body.mobile-mode .visual-card.skills-visual,
  body.mobile-mode .visual-card.about-visual{
    min-height:260px !important;
    padding:0 !important;
    overflow:hidden !important;
  }
  body.mobile-mode .education-visual .visual-card-image{
    padding:42px 18px 18px !important;
    object-fit:contain !important;
  }
  body.mobile-mode .about-visual .visual-image-wrap.is-profile .visual-card-image{
    object-position:center 25% !important;
  }
  body.mobile-mode .skill-logo-grid{
    width:100% !important;
    min-height:260px !important;
    padding:14px !important;
    grid-template-columns:repeat(2,minmax(0,1fr)) !important;
    gap:10px !important;
  }
  body.mobile-mode .skill-logo-grid.count-1{grid-template-columns:1fr !important}
  body.mobile-mode .skill-logo-grid.count-2{grid-template-columns:repeat(2,minmax(0,1fr)) !important}
  body.mobile-mode .skill-logo-grid.count-3{grid-template-columns:repeat(2,minmax(0,1fr)) !important}
  body.mobile-mode .skill-logo-grid.count-3 .skill-logo-tile:last-child{grid-column:1/-1 !important;width:min(50%,180px) !important;justify-self:center !important}
  body.mobile-mode .skill-logo-grid.count-4{grid-template-columns:repeat(2,minmax(0,1fr)) !important}
  body.mobile-mode .skill-logo-tile{
    min-height:112px !important;
    padding:10px !important;
    gap:7px !important;
    border-radius:16px !important;
  }
  body.mobile-mode .skill-logo-media{height:70px !important}
  body.mobile-mode .skill-logo-tile figcaption{
    color:var(--m-text) !important;
    font-size:13px !important;
    line-height:1.15 !important;
    font-weight:800 !important;
  }
  body.mobile-mode .visual-card-code{
    top:12px !important;
    left:12px !important;
    padding:6px 8px !important;
    font-size:11px !important;
    background:var(--m-surface) !important;
    color:var(--m-accent-dark) !important;
    border:1px solid var(--m-border) !important;
  }
  body.mobile-mode.time-night .visual-card-code{color:#ff9892 !important}
}

@media (max-width:520px){
  body.mobile-mode .visual-card.education-visual,
  body.mobile-mode .visual-card.skills-visual,
  body.mobile-mode .visual-card.about-visual{min-height:230px !important}
  body.mobile-mode .skill-logo-grid{min-height:230px !important;padding:10px !important}
  body.mobile-mode .skill-logo-grid.count-3{grid-template-columns:repeat(2,minmax(0,1fr)) !important}
  body.mobile-mode .skill-logo-grid.count-3 .skill-logo-tile:last-child{grid-column:1/-1 !important;width:min(56%,170px) !important;justify-self:center !important}
  body.mobile-mode .skill-logo-tile{min-height:96px !important;padding:8px !important}
  body.mobile-mode .skill-logo-media{height:58px !important}
  body.mobile-mode .skill-logo-tile figcaption{font-size:12px !important}
}


/* ==========================================================
   V26 — MOBILE QA / READABILITY SAFETY
========================================================== */
body.mobile-mode .record-main,
body.mobile-mode .showcase-copy,
body.mobile-mode .contact-copy,
body.mobile-mode .meta-row>*,
body.mobile-mode .used-project{min-width:0 !important}
body.mobile-mode .record-main h3,
body.mobile-mode .showcase-copy h3,
body.mobile-mode .contact-copy h3,
body.mobile-mode .meta-row strong,
body.mobile-mode .used-project{overflow-wrap:anywhere !important;word-break:normal !important}
body.mobile-mode .archive-link,
body.mobile-mode .project-tool-actions button,
body.mobile-mode .section-nav-button{max-width:100% !important;white-space:normal !important}
body.mobile-mode .visual-card-image,
body.mobile-mode .skill-logo-media img{image-rendering:auto !important;filter:none !important;transform:none !important}

body.mobile-mode .showcase-media-fallback{background:var(--m-surface-2) !important;color:var(--m-text) !important}
body.mobile-mode .showcase-media-fallback span{font-size:11px !important}
body.mobile-mode .showcase-media-fallback strong{font-size:17px !important;line-height:1.25 !important}
body.mobile-mode .demo-stage.image-error{background:var(--m-surface-2) !important}

/* ==========================================================
   V28 — TRUE FULL-SCREEN MOBILE SECTIONS
   Mobile-only presentation layer. Desktop is intentionally untouched.
========================================================== */

@media (max-width:1024px), (pointer:coarse){
  body.mobile-mode{
    --m-section-pad-x:clamp(18px,4.8vw,30px);
    --m-section-pad-y:clamp(18px,4vw,28px);
    --m-section-title:clamp(28px,7.8vw,38px);
    --m-item-title:clamp(28px,8.3vw,40px);
    --m-body-size:clamp(17px,4.45vw,20px);
    --m-label-size:clamp(12px,3.15vw,14px);
    --m-button-size:clamp(15px,3.9vw,18px);
  }

  /* True viewport filling: no desktop modal sizing can leak through. */
  body.mobile-mode .section-modal,
  body.mobile-mode .section-panel{
    inset:0 !important;
    width:100% !important;
    min-width:100% !important;
    max-width:none !important;
    height:100vh !important;
    min-height:100vh !important;
    max-height:none !important;
    margin:0 !important;
    padding:0 !important;
    border:0 !important;
    border-radius:0 !important;
  }
  @supports (height:100dvh){
    body.mobile-mode .section-modal,
    body.mobile-mode .section-panel{height:100dvh !important;min-height:100dvh !important}
  }

  body.mobile-mode .section-panel{
    display:grid !important;
    grid-template-rows:auto minmax(0,1fr) auto !important;
    overflow:hidden !important;
    background:var(--m-bg) !important;
  }

  /* Bigger, cleaner app header. */
  body.mobile-mode .section-panel-header{
    width:100% !important;
    min-height:104px !important;
    padding:calc(14px + env(safe-area-inset-top)) calc(var(--m-section-pad-x) + env(safe-area-inset-right)) 14px calc(var(--m-section-pad-x) + env(safe-area-inset-left)) !important;
    display:grid !important;
    grid-template-columns:auto minmax(0,1fr) !important;
    align-items:center !important;
    gap:16px !important;
    background:var(--m-surface) !important;
    border-bottom:1px solid var(--m-border) !important;
  }
  body.mobile-mode .mobile-back-map{
    min-width:104px !important;
    height:62px !important;
    min-height:62px !important;
    padding:0 17px !important;
    gap:9px !important;
    border-radius:18px !important;
    font-size:27px !important;
  }
  body.mobile-mode .mobile-back-map span{
    font-size:17px !important;
    font-weight:850 !important;
  }
  body.mobile-mode .section-panel-index{
    font-size:var(--m-label-size) !important;
    line-height:1.15 !important;
    letter-spacing:.1em !important;
    color:var(--m-subtle) !important;
  }
  body.mobile-mode .section-panel-header h2{
    margin:5px 0 0 !important;
    max-width:100% !important;
    font-size:var(--m-section-title) !important;
    line-height:1.03 !important;
    letter-spacing:-.035em !important;
    white-space:normal !important;
    overflow:visible !important;
    text-overflow:clip !important;
    overflow-wrap:anywhere !important;
  }
  body.mobile-mode .section-panel-header p{
    display:block !important;
    margin:6px 0 0 !important;
    color:var(--m-muted) !important;
    font-size:clamp(14px,3.6vw,17px) !important;
    line-height:1.3 !important;
  }

  /* Content owns all available space and every record fills its width. */
  body.mobile-mode .section-content{
    width:100% !important;
    min-width:0 !important;
    min-height:0 !important;
    max-width:none !important;
    padding:var(--m-section-pad-y) calc(var(--m-section-pad-x) + env(safe-area-inset-right)) calc(34px + env(safe-area-inset-bottom)) calc(var(--m-section-pad-x) + env(safe-area-inset-left)) !important;
    overflow-y:auto !important;
    overflow-x:hidden !important;
    background:var(--m-bg) !important;
    font-size:var(--m-body-size) !important;
    line-height:1.62 !important;
    contain:none !important;
  }
  body.mobile-mode .section-content > *{
    width:100% !important;
    max-width:none !important;
    margin-left:0 !important;
    margin-right:0 !important;
  }

  body.mobile-mode .showcase-layout,
  body.mobile-mode .education-record,
  body.mobile-mode .skill-record,
  body.mobile-mode .about-record,
  body.mobile-mode .timeline-record,
  body.mobile-mode .research-record,
  body.mobile-mode .contact-record{
    width:100% !important;
    max-width:none !important;
    min-width:0 !important;
    min-height:0 !important;
    gap:22px !important;
  }

  /* Project/Featured media: large, readable and screen-filling. */
  body.mobile-mode .showcase-layout{display:flex !important;flex-direction:column !important}
  body.mobile-mode .showcase-media{
    order:0 !important;
    width:100% !important;
    height:clamp(280px,67vw,440px) !important;
    min-height:280px !important;
    max-height:none !important;
    border-radius:24px !important;
  }
  body.mobile-mode .showcase-media img{
    width:100% !important;
    height:100% !important;
    object-fit:cover !important;
    object-position:center !important;
  }
  body.mobile-mode .showcase-copy{order:1 !important;width:100% !important}
  body.mobile-mode .media-label{
    left:14px !important;bottom:14px !important;
    padding:7px 10px !important;
    border-radius:10px !important;
    font-size:12px !important;
  }
  body.mobile-mode .media-tech-overlay{
    top:14px !important;right:14px !important;
    font-size:11px !important;
  }

  /* Main content typography. */
  body.mobile-mode .content-kicker,
  body.mobile-mode .record-company{
    font-size:var(--m-label-size) !important;
    line-height:1.2 !important;
  }
  body.mobile-mode .showcase-copy h3,
  body.mobile-mode .record-main h3,
  body.mobile-mode .contact-inner h3{
    margin:7px 0 14px !important;
    font-size:var(--m-item-title) !important;
    line-height:1.04 !important;
    letter-spacing:-.035em !important;
  }
  body.mobile-mode .content-description,
  body.mobile-mode .record-points li,
  body.mobile-mode .research-citation,
  body.mobile-mode .contact-record p,
  body.mobile-mode .about-record p,
  body.mobile-mode .education-record p,
  body.mobile-mode .skill-record p{
    font-size:var(--m-body-size) !important;
    line-height:1.62 !important;
  }

  body.mobile-mode .meta-row{
    grid-template-columns:minmax(90px,27%) minmax(0,1fr) !important;
    gap:14px !important;
    padding:14px 0 !important;
  }
  body.mobile-mode .meta-row span{font-size:13px !important;line-height:1.35 !important}
  body.mobile-mode .meta-row strong{font-size:clamp(16px,4.1vw,19px) !important;line-height:1.42 !important}

  body.mobile-mode .tag-list,
  body.mobile-mode .skill-list{gap:9px !important;margin-top:18px !important}
  body.mobile-mode .tag-list span,
  body.mobile-mode .skill-pill{
    padding:10px 14px !important;
    font-size:clamp(14px,3.55vw,16px) !important;
  }

  /* Buttons are finger-sized and never crowd their text. */
  body.mobile-mode .project-tool-actions{
    grid-template-columns:1fr !important;
    gap:11px !important;
    margin-top:20px !important;
  }
  body.mobile-mode .project-tool-actions button,
  body.mobile-mode .project-tech-button,
  body.mobile-mode .archive-link,
  body.mobile-mode .contact-actions .contact-cta{
    min-height:62px !important;
    padding:14px 18px !important;
    border-radius:17px !important;
    font-size:var(--m-button-size) !important;
    line-height:1.25 !important;
  }

  body.mobile-mode .evidence-grid{grid-template-columns:1fr !important;gap:11px !important;margin-top:18px !important}
  body.mobile-mode .evidence-card{
    min-height:96px !important;
    padding:16px !important;
    border-radius:19px !important;
  }
  body.mobile-mode .evidence-card>span{font-size:31px !important}
  body.mobile-mode .evidence-card small{font-size:12px !important}
  body.mobile-mode .evidence-card strong{font-size:17px !important;line-height:1.3 !important}

  /* Project replay / blueprint panels. */
  body.mobile-mode .project-tool-panel{
    width:100% !important;
    margin-top:18px !important;
    padding:17px !important;
    border-radius:20px !important;
  }
  body.mobile-mode .tool-panel-head strong{font-size:20px !important}
  body.mobile-mode .tool-panel-head span,
  body.mobile-mode .replay-state{font-size:12px !important}
  body.mobile-mode .replay-track{grid-auto-columns:minmax(190px,82vw) !important;gap:11px !important}
  body.mobile-mode .replay-step,
  body.mobile-mode .blueprint-node,
  body.mobile-mode .demo-node{padding:14px !important;border-radius:16px !important}
  body.mobile-mode .replay-step p,
  body.mobile-mode .blueprint-node strong,
  body.mobile-mode .demo-node{font-size:16px !important;line-height:1.42 !important}

  /* Education / Skills / About visuals get a meaningful portion of the screen. */
  body.mobile-mode .visual-card.education-visual,
  body.mobile-mode .visual-card.skills-visual,
  body.mobile-mode .visual-card.about-visual{
    width:100% !important;
    min-height:clamp(300px,72vw,460px) !important;
    max-height:none !important;
    border-radius:24px !important;
  }
  body.mobile-mode .education-visual .visual-card-image{
    width:100% !important;
    height:100% !important;
    padding:54px 24px 24px !important;
    object-fit:contain !important;
  }
  body.mobile-mode .about-visual .visual-card-image{
    width:100% !important;
    height:100% !important;
    object-fit:cover !important;
    object-position:center 25% !important;
  }
  body.mobile-mode .visual-card-code{
    top:15px !important;left:15px !important;
    padding:8px 11px !important;
    border-radius:11px !important;
    font-size:13px !important;
  }

  body.mobile-mode .skill-logo-grid{
    width:100% !important;
    min-height:clamp(300px,72vw,460px) !important;
    padding:18px !important;
    gap:13px !important;
  }
  body.mobile-mode .skill-logo-tile{
    min-height:132px !important;
    padding:13px !important;
    border-radius:19px !important;
  }
  body.mobile-mode .skill-logo-media{height:86px !important}
  body.mobile-mode .skill-logo-tile figcaption{font-size:15px !important;line-height:1.2 !important}

  /* Experience / Research get larger visual anchors. */
  body.mobile-mode .timeline-year{font-size:clamp(50px,14vw,72px) !important}
  body.mobile-mode .timeline-period,
  body.mobile-mode .record-role{font-size:16px !important;line-height:1.35 !important}
  body.mobile-mode .record-points{gap:12px !important;margin-top:18px !important}
  body.mobile-mode .record-points li{padding-left:18px !important}

  body.mobile-mode .research-file-number{
    width:112px !important;height:112px !important;
    font-size:38px !important;
  }
  body.mobile-mode .research-citation{
    margin-top:18px !important;
    padding:17px !important;
    border-radius:0 16px 16px 0 !important;
  }

  /* Contact: balanced, large and impossible to overlap. */
  body.mobile-mode .contact-record{padding:16px 0 36px !important}
  body.mobile-mode .contact-inner{max-width:none !important;padding:0 !important}
  body.mobile-mode .contact-signal{
    width:116px !important;height:116px !important;
    margin-bottom:22px !important;
    font-size:38px !important;
  }
  body.mobile-mode .contact-copy{max-width:none !important}
  body.mobile-mode .contact-value{
    margin-top:6px !important;
    padding:0 !important;
    font-size:clamp(20px,5.4vw,25px) !important;
    line-height:1.38 !important;
  }
  body.mobile-mode .contact-actions{margin-top:28px !important}

  /* Larger bottom navigation, still a dedicated row so it never overlays content. */
  body.mobile-mode .section-navigation{
    min-height:96px !important;
    grid-template-columns:70px minmax(0,1fr) 70px !important;
    gap:12px !important;
    padding:10px calc(16px + env(safe-area-inset-right)) calc(10px + env(safe-area-inset-bottom)) calc(16px + env(safe-area-inset-left)) !important;
  }
  body.mobile-mode .section-nav-button{
    width:70px !important;height:70px !important;
    min-width:70px !important;min-height:70px !important;
    border-radius:20px !important;
  }
  body.mobile-mode .section-nav-button:first-child::before,
  body.mobile-mode .section-nav-button:last-child::before{font-size:33px !important}
  body.mobile-mode .slider-meta{font-size:13px !important;font-weight:800 !important}
  body.mobile-mode #sectionSlider{height:34px !important}

  /* Error state should also fill/read like an app page. */
  body.mobile-mode .mobile-render-error{
    width:100% !important;
    min-height:50vh !important;
    padding:28px !important;
    display:flex !important;
    flex-direction:column !important;
    justify-content:center !important;
    border-radius:22px !important;
    background:var(--m-surface) !important;
    color:var(--m-text) !important;
  }
  body.mobile-mode .mobile-render-error strong{font-size:24px !important}
  body.mobile-mode .mobile-render-error p{font-size:17px !important;color:var(--m-muted) !important}
}

/* Portrait phones: one generous column, large visual first. */
@media (max-width:539px) and (orientation:portrait){
  body.mobile-mode .section-panel-header{grid-template-columns:auto minmax(0,1fr) !important}
  body.mobile-mode .section-panel-header h2{font-size:clamp(27px,7.6vw,34px) !important}
  body.mobile-mode .section-panel-header p{font-size:14px !important}
  body.mobile-mode .showcase-media{height:clamp(275px,73vw,360px) !important}
  body.mobile-mode .meta-row{grid-template-columns:1fr !important;gap:5px !important}
  body.mobile-mode .meta-row span{font-size:12px !important}
  body.mobile-mode .visual-card.education-visual,
  body.mobile-mode .visual-card.skills-visual,
  body.mobile-mode .visual-card.about-visual{min-height:clamp(280px,78vw,360px) !important}
  body.mobile-mode .skill-logo-grid{min-height:clamp(280px,78vw,360px) !important}
  body.mobile-mode .skill-logo-tile{min-height:120px !important}
}

/* Landscape phones/tablets: use the width instead of stacking unnecessarily. */
@media (min-width:640px) and (orientation:landscape) and (max-height:760px){
  body.mobile-mode .section-panel-header{
    min-height:86px !important;
    padding-top:calc(9px + env(safe-area-inset-top)) !important;
    padding-bottom:9px !important;
  }
  body.mobile-mode .mobile-back-map{height:56px !important;min-height:56px !important}
  body.mobile-mode .section-panel-header h2{font-size:28px !important}
  body.mobile-mode .section-panel-header p{font-size:13px !important;margin-top:3px !important}
  body.mobile-mode .section-content{padding-top:16px !important;padding-bottom:20px !important}

  body.mobile-mode .showcase-layout,
  body.mobile-mode .education-record,
  body.mobile-mode .skill-record,
  body.mobile-mode .about-record{
    display:grid !important;
    grid-template-columns:minmax(0,.95fr) minmax(0,1.05fr) !important;
    gap:22px !important;
    align-items:start !important;
  }
  body.mobile-mode .showcase-media{
    height:min(62vh,430px) !important;
    min-height:300px !important;
    position:sticky !important;
    top:0 !important;
  }
  body.mobile-mode .visual-card.education-visual,
  body.mobile-mode .visual-card.skills-visual,
  body.mobile-mode .visual-card.about-visual{
    min-height:min(62vh,430px) !important;
    position:sticky !important;
    top:0 !important;
  }
  body.mobile-mode .skill-logo-grid{min-height:min(62vh,430px) !important}
  body.mobile-mode .evidence-grid{grid-template-columns:repeat(2,minmax(0,1fr)) !important}
  body.mobile-mode .project-tool-actions{grid-template-columns:repeat(2,minmax(0,1fr)) !important}
  body.mobile-mode .project-tool-actions .archive-link{grid-column:1/-1 !important}
  body.mobile-mode .section-navigation{min-height:82px !important;grid-template-columns:62px minmax(0,1fr) 62px !important}
  body.mobile-mode .section-nav-button{width:62px !important;height:62px !important;min-width:62px !important;min-height:62px !important}
}

/* Larger coarse-pointer tablets: use two columns where it genuinely helps. */
@media (min-width:700px) and (min-height:761px) and (pointer:coarse){
  body.mobile-mode .evidence-grid{grid-template-columns:repeat(2,minmax(0,1fr)) !important}
  body.mobile-mode .project-tool-actions{grid-template-columns:repeat(2,minmax(0,1fr)) !important}
  body.mobile-mode .project-tool-actions .archive-link{grid-column:1/-1 !important}
  body.mobile-mode .skill-logo-grid{grid-template-columns:repeat(2,minmax(0,1fr)) !important}
}


/* ==========================================================
   V31 — MOBILE MEDIA: LARGE FRAMES, NO CROPPING
========================================================== */
@media (max-width:1024px) and (pointer:coarse),
       (max-width:820px) {
  body.mobile-mode .showcase-media{
    width:100% !important;
    height:clamp(340px,92vw,540px) !important;
    min-height:340px !important;
    max-height:none !important;
    padding:10px !important;
    display:flex !important;
    align-items:center !important;
    justify-content:center !important;
    overflow:hidden !important;
    background:var(--m-surface-2) !important;
    border-radius:24px !important;
  }

  body.mobile-mode .showcase-media img{
    width:100% !important;
    height:100% !important;
    min-width:0 !important;
    min-height:0 !important;
    max-width:100% !important;
    max-height:100% !important;
    object-fit:contain !important;
    object-position:center !important;
    border-radius:16px !important;
    background:var(--m-surface-2) !important;
  }

  body.mobile-mode .visual-card.education-visual,
  body.mobile-mode .visual-card.about-visual{
    width:100% !important;
    min-height:clamp(360px,96vw,560px) !important;
    height:clamp(360px,96vw,560px) !important;
    max-height:none !important;
    padding:10px !important;
    overflow:hidden !important;
  }

  body.mobile-mode .education-visual .visual-card-image,
  body.mobile-mode .about-visual .visual-card-image{
    width:100% !important;
    height:100% !important;
    max-width:100% !important;
    max-height:100% !important;
    object-fit:contain !important;
    object-position:center !important;
    padding:44px 8px 8px !important;
    border-radius:16px !important;
    background:var(--m-surface-2) !important;
  }

  body.mobile-mode .about-visual .visual-image-wrap,
  body.mobile-mode .education-visual .visual-image-wrap{
    width:100% !important;
    height:100% !important;
    min-height:0 !important;
    display:flex !important;
    align-items:center !important;
    justify-content:center !important;
  }

  body.mobile-mode .recruiter-project-card img{
    height:clamp(260px,72vw,420px) !important;
    object-fit:contain !important;
    object-position:center !important;
    background:var(--m-surface-2) !important;
  }
}

@media (max-width:539px) and (orientation:portrait){
  body.mobile-mode .showcase-media{
    height:clamp(350px,98vw,500px) !important;
    min-height:350px !important;
  }
  body.mobile-mode .visual-card.education-visual,
  body.mobile-mode .visual-card.about-visual{
    height:clamp(370px,104vw,520px) !important;
    min-height:370px !important;
  }
}

@media (min-width:640px) and (orientation:landscape) and (max-height:760px){
  body.mobile-mode .showcase-media{
    height:min(76vh,560px) !important;
    min-height:340px !important;
  }
  body.mobile-mode .visual-card.education-visual,
  body.mobile-mode .visual-card.about-visual{
    height:min(76vh,560px) !important;
    min-height:340px !important;
  }
}


/* ==========================================================
   V31 — DIRECT MOBILE EXPLORE NAVIGATION
   Sections stay on-screen; the old three-dot menu is removed.
========================================================== */
body.mobile-mode{
  --m-top:82px;
  --m-bottom:116px;
  --m-rail:86px;
}

/* Retire the old menu pathway completely on mobile. */
body.mobile-mode .mobile-menu-toggle,
body.mobile-mode .mobile-menu-backdrop,
body.mobile-mode .mobile-menu-panel{display:none !important;}

/* Top bar: identity + two high-value actions. */
body.mobile-mode .game-hud{
  min-height:calc(var(--m-top) + env(safe-area-inset-top)) !important;
  height:calc(var(--m-top) + env(safe-area-inset-top)) !important;
  padding:calc(10px + env(safe-area-inset-top)) calc(10px + env(safe-area-inset-right)) 10px calc(10px + env(safe-area-inset-left)) !important;
  gap:8px !important;
}
body.mobile-mode .hud-brand{flex:1 1 auto !important;min-width:0 !important;gap:8px !important;}
body.mobile-mode .hud-brand-mark{
  width:46px !important;height:46px !important;min-width:46px !important;
  border-radius:14px !important;font-size:14px !important;
}
body.mobile-mode .hud-brand strong{
  font-size:clamp(14px,4vw,17px) !important;
  line-height:1.08 !important;
  white-space:nowrap !important;
}
body.mobile-mode .hud-brand span{
  margin-top:3px !important;
  font-size:clamp(9px,2.7vw,11px) !important;
  white-space:nowrap !important;
  overflow:hidden !important;
  text-overflow:ellipsis !important;
}
body.mobile-mode .mobile-primary-actions{
  flex:0 0 auto !important;
  display:flex !important;
  align-items:center !important;
  gap:6px !important;
  pointer-events:auto !important;
}
body.mobile-mode .mobile-primary-action{
  width:58px !important;height:58px !important;min-width:58px !important;min-height:58px !important;
  padding:5px 3px !important;
  display:flex !important;flex-direction:column !important;align-items:center !important;justify-content:center !important;gap:3px !important;
  border:1px solid var(--m-border) !important;border-radius:17px !important;
  background:var(--m-surface-2) !important;color:var(--m-text) !important;
  box-shadow:none !important;transform:none !important;text-decoration:none !important;
}
body.mobile-mode .mobile-primary-action span{font-size:24px !important;line-height:1 !important;color:inherit !important;}
body.mobile-mode .mobile-primary-action strong{font-size:10px !important;line-height:1 !important;font-weight:900 !important;color:inherit !important;}
body.mobile-mode .mobile-primary-quick{background:#183653 !important;border-color:#183653 !important;color:#fff !important;}
body.mobile-mode.time-night .mobile-primary-quick{background:#24618b !important;border-color:#367aa8 !important;color:#fff !important;}
body.mobile-mode .mobile-primary-resume{background:var(--m-accent) !important;border-color:var(--m-accent-dark) !important;color:#fff !important;}
body.mobile-mode .mobile-primary-action:active{transform:scale(.97) !important;}

/* Tool rail is slightly slimmer so more of the map remains visible. */
body.mobile-mode .mobile-tool-rail{
  left:calc(6px + env(safe-area-inset-left)) !important;
  top:calc(var(--m-top) + env(safe-area-inset-top) + 7px) !important;
  bottom:calc(var(--m-bottom) + env(safe-area-inset-bottom) + 10px) !important;
  width:var(--m-rail) !important;
  padding:7px 5px !important;gap:5px !important;
  border-radius:20px !important;
}
body.mobile-mode .mobile-tool-button{min-height:64px !important;border-radius:16px !important;padding:6px 3px !important;}
body.mobile-mode .mobile-tool-icon{width:35px !important;height:31px !important;font-size:28px !important;}
body.mobile-mode .mobile-tool-button strong{font-size:12px !important;}
body.mobile-mode .mobile-tool-button small{font-size:10px !important;}

/* Persistent bottom Explore navigator. */
body.mobile-mode .mobile-landscape-dock.mobile-explore-dock{
  display:grid !important;
  grid-template-columns:62px minmax(0,1fr) !important;
  align-items:stretch !important;
  position:fixed !important;z-index:98 !important;
  left:calc(6px + env(safe-area-inset-left)) !important;
  right:calc(6px + env(safe-area-inset-right)) !important;
  bottom:calc(6px + env(safe-area-inset-bottom)) !important;
  height:var(--m-bottom) !important;min-height:var(--m-bottom) !important;
  padding:6px !important;gap:6px !important;
  border:1px solid var(--m-border) !important;border-radius:22px !important;
  background:var(--m-surface) !important;color:var(--m-text) !important;
  box-shadow:0 8px 24px rgba(13,34,56,.14) !important;
  overflow:hidden !important;backdrop-filter:none !important;-webkit-backdrop-filter:none !important;
}
body.mobile-mode.time-night .mobile-landscape-dock.mobile-explore-dock{box-shadow:0 8px 26px rgba(0,0,0,.30) !important;}
body.mobile-mode .mobile-explore-heading{
  min-width:0 !important;
  display:flex !important;flex-direction:column !important;align-items:center !important;justify-content:center !important;
  gap:2px !important;border-radius:16px !important;
  background:var(--m-surface-2) !important;border:1px solid var(--m-border) !important;
  color:var(--m-text) !important;
}
body.mobile-mode .mobile-explore-heading strong{font-size:10px !important;line-height:1 !important;letter-spacing:.08em !important;color:var(--m-text) !important;writing-mode:vertical-rl !important;transform:rotate(180deg) !important;}
body.mobile-mode .mobile-explore-heading span{display:none !important;}
body.mobile-mode .mobile-explore-scroll{
  min-width:0 !important;height:100% !important;
  display:flex !important;align-items:stretch !important;gap:6px !important;
  overflow-x:auto !important;overflow-y:hidden !important;
  padding:0 1px 1px !important;
  scrollbar-width:none !important;-webkit-overflow-scrolling:touch !important;
  overscroll-behavior-x:contain !important;scroll-snap-type:x proximity !important;
}
body.mobile-mode .mobile-explore-scroll::-webkit-scrollbar{display:none !important;}
body.mobile-mode .mobile-explore-item{
  flex:0 0 82px !important;min-width:82px !important;height:100% !important;
  display:flex !important;flex-direction:column !important;align-items:center !important;justify-content:center !important;gap:7px !important;
  padding:7px 5px !important;
  border:1px solid var(--m-border) !important;border-radius:17px !important;
  background:var(--m-surface-2) !important;color:var(--m-text) !important;
  box-shadow:none !important;transform:none !important;scroll-snap-align:start !important;
}
body.mobile-mode .mobile-explore-item>span{
  width:43px !important;height:43px !important;display:grid !important;place-items:center !important;
  border-radius:14px !important;
  background:color-mix(in srgb,var(--district) 14%,var(--m-surface)) !important;
  color:var(--district) !important;font-size:25px !important;line-height:1 !important;font-weight:800 !important;
}
body.mobile-mode .mobile-explore-item .mobile-explore-rm{font-size:12px !important;font-weight:900 !important;}
body.mobile-mode .mobile-explore-item strong{
  width:100% !important;color:var(--m-text) !important;
  font-size:11px !important;line-height:1.05 !important;font-weight:850 !important;
  white-space:nowrap !important;overflow:hidden !important;text-overflow:ellipsis !important;text-align:center !important;
}
body.mobile-mode .mobile-explore-item:active{background:var(--m-surface-3) !important;transform:scale(.97) !important;}

/* Full-screen content should hide both persistent map navigation surfaces. */
body.mobile-mode.modal-open .mobile-primary-actions,
body.mobile-mode.recruiter-open .mobile-primary-actions,
body.mobile-mode.command-open .mobile-primary-actions,
body.mobile-mode.finale-open .mobile-primary-actions{display:none !important;}

/* Smaller phones: preserve readable actions without crowding the title. */
@media (max-width:390px){
  body.mobile-mode{--m-rail:80px;--m-bottom:108px;}
  body.mobile-mode .hud-brand-mark{width:42px !important;height:42px !important;min-width:42px !important;}
  body.mobile-mode .hud-brand strong{font-size:13px !important;}
  body.mobile-mode .hud-brand span{font-size:9px !important;}
  body.mobile-mode .mobile-primary-action{width:52px !important;height:52px !important;min-width:52px !important;min-height:52px !important;border-radius:15px !important;}
  body.mobile-mode .mobile-primary-action span{font-size:21px !important;}
  body.mobile-mode .mobile-primary-action strong{font-size:9px !important;}
  body.mobile-mode .mobile-explore-item{flex-basis:76px !important;min-width:76px !important;}
  body.mobile-mode .mobile-explore-item>span{width:39px !important;height:39px !important;font-size:22px !important;}
  body.mobile-mode .mobile-explore-item strong{font-size:10px !important;}
}

/* Landscape phones get a shallower dock, keeping more world visible. */
@media (orientation:landscape) and (max-height:620px){
  body.mobile-mode{--m-top:70px;--m-bottom:88px;--m-rail:80px;}
  body.mobile-mode .mobile-primary-action{width:50px !important;height:50px !important;min-width:50px !important;min-height:50px !important;}
  body.mobile-mode .mobile-explore-item{flex-basis:78px !important;min-width:78px !important;gap:4px !important;}
  body.mobile-mode .mobile-explore-item>span{width:36px !important;height:36px !important;font-size:21px !important;}
  body.mobile-mode .mobile-tool-button{min-height:56px !important;}
}


/* ==========================================================
   V32 — MOBILE SKILL VISUALS: FULL, LARGE, UNCROPPED
========================================================== */
@media (max-width:1024px) and (pointer:coarse), (max-width:820px){
  body.mobile-mode .visual-card.skills-visual{
    width:100% !important;
    height:auto !important;
    min-height:clamp(430px,112vw,620px) !important;
    max-height:none !important;
    padding:12px !important;
    overflow:visible !important;
  }
  body.mobile-mode .skill-logo-grid{
    width:100% !important;
    min-height:clamp(405px,106vw,590px) !important;
    height:auto !important;
    padding:14px !important;
    gap:14px !important;
    align-content:center !important;
    overflow:visible !important;
  }
  body.mobile-mode .skill-logo-grid.count-1{grid-template-columns:1fr !important}
  body.mobile-mode .skill-logo-grid.count-2{grid-template-columns:repeat(2,minmax(0,1fr)) !important}
  body.mobile-mode .skill-logo-grid.count-3{grid-template-columns:repeat(2,minmax(0,1fr)) !important}
  body.mobile-mode .skill-logo-grid.count-3 .skill-logo-tile:last-child{
    grid-column:1/-1 !important;
    width:min(72%,300px) !important;
    justify-self:center !important;
  }
  body.mobile-mode .skill-logo-grid.count-4{grid-template-columns:repeat(2,minmax(0,1fr)) !important}
  body.mobile-mode .skill-logo-tile{
    min-height:180px !important;
    height:auto !important;
    padding:12px !important;
    gap:8px !important;
    overflow:visible !important;
    border-radius:20px !important;
  }
  body.mobile-mode .skill-logo-media{
    width:100% !important;
    height:138px !important;
    min-height:138px !important;
    padding:10px !important;
    overflow:visible !important;
    display:flex !important;
    align-items:center !important;
    justify-content:center !important;
    background:var(--m-surface) !important;
    border-radius:15px !important;
  }
  body.mobile-mode .skill-logo-media img,
  body.mobile-mode .skill-logo-tile.is-photo .skill-logo-media img{
    display:block !important;
    width:auto !important;
    height:auto !important;
    min-width:0 !important;
    min-height:0 !important;
    max-width:92% !important;
    max-height:124px !important;
    object-fit:contain !important;
    object-position:center !important;
    transform:none !important;
    filter:none !important;
    clip-path:none !important;
  }
  body.mobile-mode .skill-logo-tile figcaption{
    font-size:16px !important;
    line-height:1.2 !important;
    font-weight:850 !important;
    min-height:20px !important;
  }
  /* With Scan removed the tools can breathe instead of scrolling through six tiny controls. */
  body.mobile-mode .mobile-tool-rail{gap:8px !important;padding:9px 6px !important}
  body.mobile-mode .mobile-tool-button{min-height:70px !important}
  body.mobile-mode .mobile-tool-icon{font-size:30px !important;width:38px !important;height:34px !important}
}

@media (max-width:430px) and (orientation:portrait){
  body.mobile-mode .visual-card.skills-visual{min-height:500px !important}
  body.mobile-mode .skill-logo-grid{min-height:475px !important;padding:12px !important;gap:12px !important}
  body.mobile-mode .skill-logo-tile{min-height:170px !important;padding:10px !important}
  body.mobile-mode .skill-logo-media{height:128px !important;min-height:128px !important}
  body.mobile-mode .skill-logo-media img,
  body.mobile-mode .skill-logo-tile.is-photo .skill-logo-media img{max-height:114px !important;max-width:94% !important}
}


/* ==========================================================
   V33 — interaction/performance polish
========================================================== */
body.mobile-mode .section-content,
body.mobile-mode .recruiter-scroll,
body.mobile-mode .command-results{
  overscroll-behavior:contain;
  -webkit-overflow-scrolling:touch;
}
body.mobile-mode .showcase-layout,
body.mobile-mode .timeline-record,
body.mobile-mode .education-record,
body.mobile-mode .skill-record,
body.mobile-mode .research-record,
body.mobile-mode .about-record,
body.mobile-mode .contact-record{
  contain:layout style;
}
body.mobile-mode .mobile-explore-dock{
  will-change:auto !important;
}