/* ================================================================
   BOYCANFLY.COM — MOBILE EXPERIENCE
   App-like layout with amber phosphor terminal aesthetic
   Applies at max-width: 768px
   ================================================================ */

@media (max-width: 768px) {

  /* ── ROOT & BASE ── */
  html { font-size: 14px; }
  body { -webkit-tap-highlight-color: transparent; }

  /* ── HIDE DESKTOP CURSOR ── */
  .c-dot, .c-ring { display: none; }
  * { cursor: default !important; }

  /* ── SITE WRAPPER ── */
  .site-wrapper { overflow-x: hidden; }

  /* ================================================================
     NAVBAR — App-style fixed header
     ================================================================ */
  #navbar {
    height: 56px;
    padding: 0 1rem !important;
    background: rgba(5,3,0,.97) !important;
    border-bottom: 1px solid rgba(255,120,0,.25) !important;
    backdrop-filter: blur(12px);
  }
  .nav-inner {
    height: 56px;
    max-width: 100%;
    padding: 0;
  }
  .nav-brand { font-size: .9rem; letter-spacing: .1em; }
  .nav-sigil { width: 28px; height: 28px; font-size: .7rem; }
  .nav-links, .nav-status { display: none !important; }
  .nav-hamburger {
    display: flex !important;
    align-items: center;
    justify-content: center;
    width: 40px; height: 40px;
    background: rgba(255,120,0,.08);
    border: 1px solid rgba(255,120,0,.25);
    border-radius: 4px;
  }

  /* Mobile nav drawer — full screen terminal overlay */
  .nav-drawer {
    position: fixed;
    top: 56px; left: 0; right: 0; bottom: 0;
    background: rgba(5,3,0,.98);
    z-index: 9998;
    display: flex;
    flex-direction: column;
    padding: 2rem 1.5rem;
    gap: 0;
    transform: translateX(100%);
    transition: transform .25s ease;
    border-top: 1px solid rgba(255,120,0,.2);
    overflow-y: auto;
  }
  .nav-drawer.open { transform: translateX(0); }

  .nav-drawer::before {
    content: '// NAVIGATION MENU';
    font-family: 'Space Mono', monospace;
    font-size: .85rem;
    letter-spacing: .2em;
    color: rgba(255,120,0,.4);
    margin-bottom: 1.5rem;
    padding-bottom: .75rem;
    border-bottom: 1px solid rgba(255,120,0,.12);
  }

  .nav-drawer a {
    font-family: 'Space Mono', monospace !important;
    font-size: 1.1rem !important;
    letter-spacing: .12em;
    color: rgba(255,150,0,.8) !important;
    padding: 1.1rem 0 !important;
    border-bottom: 1px solid rgba(255,120,0,.08);
    display: flex;
    align-items: center;
    gap: .75rem;
    text-decoration: none;
    transition: color .15s, padding-left .15s;
  }
  .nav-drawer a::before {
    content: '>';
    color: rgba(255,120,0,.4);
    font-size: .9rem;
    transition: color .15s;
  }
  .nav-drawer a:active {
    color: var(--orange) !important;
    padding-left: .5rem !important;
  }
  .nav-drawer a:active::before { color: var(--orange); }

  /* ================================================================
     HERO — Stacked, app-style
     ================================================================ */
  #hero {
    display: flex !important;
    flex-direction: column;
    min-height: 100svh;
    padding-top: 56px;
  }

  .hero-left {
    height: 42svh;
    min-height: 200px;
    position: relative;
    flex-shrink: 0;
  }

  .hero-astronaut {
    width: 60% !important;
    max-width: 220px !important;
    bottom: -30px !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
    z-index: 10;
  }

  .hero-right {
    flex: 1;
    padding: 3rem 1.25rem 6rem !important;
    background: #0a0800 !important;
    position: relative;
    z-index: 5;
    overflow: hidden;
  }

  /* Mobile overrides — desktop already handles ::before/::after scanlines/vignette */
  /* Terminal header line */
  .hero-right::before {
    content: '// PERSONNEL FILE: DESHLER_R';
    display: block;
    font-family: 'Space Mono', monospace;
    font-size: .85rem;
    letter-spacing: .08em;
    color: rgba(255,120,0,.4);
    margin-bottom: 1rem;
    /* Override the scanline background set by desktop */
    background: none !important;
  }

  .hero-counter { margin-bottom: .75rem; }
  .hero-counter-label, .hero-counter { font-size: .85rem !important; color: rgba(255,130,0,.6) !important; }
  .hero-counter-line { width: 40px; }

  .hero-title {
    font-size: clamp(2.2rem, 9vw, 3rem) !important;
    line-height: 1.05 !important;
    margin-bottom: .75rem !important;
  }

  .hero-role {
    font-size: .9rem !important;
    gap: .4rem !important;
    margin-bottom: .75rem !important;
    color: rgba(255,145,0,.85) !important;
  }
  .hero-role br { display: block; margin: .2rem 0; }

  .hero-desc {
    font-size: .95rem !important;
    line-height: 1.8 !important;
    margin-bottom: 1.25rem !important;
    color: rgba(255,150,0,.75) !important;
    font-family: 'Space Mono', monospace !important;
    letter-spacing: .03em !important;
  }

  /* CTA buttons — full width stacked */
  .hero-cta {
    flex-direction: column !important;
    gap: .6rem !important;
    margin-bottom: 1.5rem !important;
  }
  .hero-cta .btn-hud,
  .hero-cta .btn-ghost {
    width: 100%;
    text-align: center;
    justify-content: center;
    padding: .85rem 1rem !important;
    font-size: .8rem !important;
  }

  /* Telemetry panels — 2-col grid */
  .hero-telemetry {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: .5rem !important;
    padding-top: 1rem !important;
  }
  .telem-item {
    min-width: unset !important;
    padding: .6rem .75rem !important;
  }
  .telem-val { font-size: 1.3rem !important; }
  .telem-label { font-size: .85rem !important; letter-spacing: .06em !important; }

  /* Ticker */
  .hero-ticker { font-size: .85rem !important; }

  /* ================================================================
     SECTION COMMON — App card style
     ================================================================ */
  section {
    padding: 2.5rem 0 !important;
  }
  .content-wrap {
    padding: 0 1rem !important;
    max-width: 100% !important;
  }
  .label-tag {
    font-size: .85rem !important;
    letter-spacing: .08em !important;
  }
  .section-heading {
    font-size: clamp(1.8rem, 8vw, 2.4rem) !important;
    margin-bottom: 1.5rem !important;
  }

  /* ================================================================
     ABOUT — Stacked terminal panels
     ================================================================ */
  .about-grid {
    grid-template-columns: 1fr !important;
    gap: 0 !important;
  }

  .about-visual {
    min-height: 520px !important;
    height: 75svh !important;
    border-bottom: 1px solid rgba(255,120,0,.2);
  }

  /* Pin image to top so the planet surface is visible */
  .about-img-wrap {
    background-position: center top !important;
    background-size: cover !important;
  }

  /* Scan elements fill the taller container properly */
  .scan-line, .scan-glow { left: 0 !important; right: 0 !important; }
  .scan-data { top: .75rem !important; left: .75rem !important; }

  /* Scan alert — full size on mobile */
  .scan-alert {
    align-items: center !important;
  }
  .scan-alert-inner {
    width: 92% !important;
    max-width: 100% !important;
    padding: 1.8rem 1.5rem !important;
  }
  .scan-organism-img img {
    max-height: 160px !important;
    object-fit: cover !important;
    object-position: center 20% !important;
  }

  .about-content {
    padding: 1.5rem 1rem !important;
    background: #0a0800;
    border: 1px solid rgba(255,120,0,.15);
    border-top: none;
    position: relative;
  }
  .about-content::before {
    content: '// ENTITY PROFILE';
    display: block;
    font-family: 'Space Mono', monospace;
    font-size: .75rem;
    letter-spacing: .1em;
    color: rgba(255,120,0,.35);
    margin-bottom: 1rem;
  }

  .about-content p {
    font-size: 1rem !important;
    line-height: 1.8 !important;
    color: rgba(255,150,0,.7) !important;
    font-family: 'Space Mono', monospace !important;
    margin-bottom: 1rem !important;
  }

  /* HHG panel */
  .hhg-panel { padding: 1rem !important; margin-top: 1.25rem !important; }
  .hhg-dont  { font-size: 1.6rem !important; }
  .hhg-panic { font-size: 2rem !important; }
  .hhg-top   { font-size: .85rem !important; letter-spacing: .07em !important; margin-bottom: .6rem !important; }
  .hhg-bottom{ font-size: .82rem !important; letter-spacing: .06em !important; }

  /* ================================================================
     PARALLAX BANDS — Simplified on mobile
     ================================================================ */
  .parallax-band {
    height: 35svh !important;
    min-height: 160px;
  }
  .parallax-band-bg {
    transform: none !important; /* disable parallax on mobile */
    background-attachment: scroll !important;
  }
  .parallax-quote {
    font-size: clamp(.85rem, 3.5vw, 1.1rem) !important;
    padding: 0 1.5rem !important;
    text-align: center !important;
    letter-spacing: .08em !important;
  }

  /* ================================================================
     EXPERIENCE — Full terminal app
     ================================================================ */
  .exp-layout {
    grid-template-columns: 1fr !important;
    border: none !important;
    animation: none !important; /* reduce battery drain */
  }

  /* Tab nav — horizontal scroll chips */
  .exp-nav-panel {
    display: flex !important;
    flex-direction: row !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    border-right: none !important;
    border-bottom: 1px solid rgba(255,120,0,.2) !important;
    padding: 0 !important;
    gap: 0 !important;
    scrollbar-width: none;
    -ms-overflow-style: none;
    /* Keep the phosphor bg */
    background: #0a0800;
    position: sticky;
    top: 56px;
    z-index: 10;
  }
  .exp-nav-panel::-webkit-scrollbar { display: none; }

  /* Hide boot header and prompt on mobile — too cramped */
  .diag-boot,
  .diag-prompt-line,
  .diag-footer { display: none !important; }

  .exp-tab {
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: .2rem !important;
    padding: .65rem .85rem !important;
    min-width: 110px !important;
    border-left: none !important;
    border-bottom: 2px solid transparent !important;
    border-right: 1px solid rgba(255,120,0,.08) !important;
    flex-shrink: 0;
    white-space: nowrap;
  }
  .exp-tab.active {
    border-bottom-color: var(--orange) !important;
    border-left-color: transparent !important;
    background: rgba(255,90,0,.1) !important;
  }
  .exp-tab-year {
    font-size: .85rem !important;
    letter-spacing: .06em !important;
  }
  .exp-tab-company {
    font-size: .72rem !important;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100px;
  }
  .exp-tab-title { display: none !important; }

  /* Content panel — terminal card */
  .exp-content-panel {
    padding: 1.25rem 1rem !important;
    border: 1px solid rgba(255,120,0,.2) !important;
    border-top: none !important;
    animation: none !important;
  }
  .exp-content-panel::before,
  .exp-content-panel::after { animation: none !important; }

  .exp-header-row {
    gap: .75rem !important;
    margin-bottom: 1.25rem !important;
    padding-bottom: 1rem !important;
  }
  .exp-number { font-size: 2.2rem !important; }
  .exp-role-title { font-size: .95rem !important; letter-spacing: .06em !important; }
  .exp-company-tag { font-size: .82rem !important; letter-spacing: .08em !important; }
  .exp-date-tag { font-size: .85rem !important; }
  .exp-description {
    font-size: 1rem !important;
    line-height: 1.85 !important;
    margin-bottom: 1rem !important;
  }
  .exp-skills { gap: .35rem !important; }
  .skill-chip {
    font-size: .85rem !important;
    padding: .3rem .65rem !important;
    letter-spacing: .08em !important;
  }

  /* Education terminal */
  .edu-terminal { animation: none !important; }
  .edu-terminal-body { padding: 1.25rem 1rem !important; }
  .edu-terminal-header .diag-boot-line { font-size: .82rem !important; letter-spacing: .07em !important; }
  .edu-terminal-header { padding: .75rem 1rem .75rem !important; }

  /* ================================================================
     SKILLS — Terminal grid, 1 col
     ================================================================ */
  .skills-terminal { margin-bottom: 0 !important; }
  .skills-terminal-bar { padding: .5rem 1rem !important; flex-wrap: wrap; gap: .4rem; }
  .skills-bar-label { font-size: .85rem !important; }
  .skills-bar-clock { font-size: .78rem !important; }
  .skills-notify-bar { padding: .4rem 1rem !important; min-height: 1.8rem; }
  .skills-notify-text { font-size: .82rem !important; }

  .skills-grid {
    grid-template-columns: 1fr !important;
    animation: none !important;
    border-left: 1px solid rgba(255,120,0,.25) !important;
    border-right: 1px solid rgba(255,120,0,.25) !important;
  }
  .skills-grid::before { animation: none !important; }

  .skill-card {
    padding: 1.25rem 1rem !important;
    border-bottom: 1px solid rgba(255,120,0,.12) !important;
  }
  .skill-card-icon { font-size: 1.1rem !important; margin-bottom: .6rem !important; }
  .skill-card-title { font-size: .85rem !important; letter-spacing: .08em !important; margin-bottom: .5rem !important; }
  .skill-card-desc {
    font-size: 1rem !important;
    line-height: 1.8 !important;
    margin-bottom: .75rem !important;
  }

  .skill-bar-label { font-size: .68rem !important; }
  .skill-bar-label span:last-child { font-size: .68rem !important; }

  /* ================================================================
     CONTACT — Stacked terminal panels
     ================================================================ */
  .contact-grid {
    grid-template-columns: 1fr !important;
    gap: 1rem !important;
  }
  .contact-headline {
    font-size: clamp(2rem, 9vw, 3rem) !important;
    line-height: 1.05 !important;
  }
  .contact-links { gap: .6rem !important; }
  .contact-link-item {
    padding: .85rem .9rem !important;
  }
  .contact-link-label { font-size: .75rem !important; }
  .contact-link-url { font-size: .65rem !important; }
  .contact-hud-panel {
    padding: 1.25rem 1rem !important;
  }
  .hud-panel-header { font-size: .75rem !important; letter-spacing: .08em !important; }
  .hud-stat-val { font-size: 1.3rem !important; }
  .hud-stat-label { font-size: .75rem !important; }

  /* ================================================================
     FOOTER
     ================================================================ */
  #footer { padding: 1.5rem 0 !important; }
  .footer-inner {
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: .6rem !important;
  }
  .footer-brand { font-size: .72rem !important; }
  .footer-copy { font-size: .78rem !important; }
  .footer-links { gap: 1rem !important; font-size: 1.1rem !important; }

  /* ================================================================
     BOOT SCREEN — Compact mobile layout
     ================================================================ */
  .boot-inner {
    padding: 1.25rem 1rem !important;
    width: 96vw !important;
    max-height: 92svh !important;
    overflow-y: auto !important;
    box-sizing: border-box !important;
  }
  .boot-header { margin-bottom: 1rem !important; }
  .boot-logo-row {
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: .2rem !important;
  }
  .boot-corp {
    font-size: .78rem !important;
    letter-spacing: .08em !important;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%;
  }
  .boot-tagline {
    font-size: .68rem !important;
    letter-spacing: .06em !important;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%;
  }
  .boot-lines {
    min-height: 80px !important;
    max-height: none !important;
    overflow: visible !important;
    margin-bottom: .75rem !important;
    display: block !important;
  }
  .boot-line {
    font-size: .75rem !important;
    letter-spacing: .03em !important;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    line-height: 1.55 !important;
  }
  .boot-progress-wrap { margin-bottom: .75rem !important; }
  .boot-progress-label {
    font-size: .75rem !important;
    letter-spacing: .06em !important;
  }
  .boot-footer {
    font-size: .68rem !important;
    letter-spacing: .04em !important;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  /* ================================================================
     MOBILE BOTTOM NAV — App-style tab bar
     ================================================================ */
  .mobile-tab-bar {
    position: fixed;
    bottom: 0; left: 0; right: 0;
    height: 72px;
    background: rgba(5,3,0,.97);
    border-top: 1px solid rgba(255,120,0,.2);
    z-index: 9999;
    backdrop-filter: blur(12px);
  }
  .mobile-tab-bar a {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
    text-decoration: none;
    color: rgba(255,120,0,.45);
    transition: color .15s;
    -webkit-tap-highlight-color: transparent;
    font-family: 'Space Mono', monospace;
    font-size: 0.85rem;
    letter-spacing: .06em;
    text-transform: uppercase;
  }
  .mobile-tab-bar a i { font-size: 1.62rem; }
  .mobile-tab-bar a.active,
  .mobile-tab-bar a:active { color: var(--orange); }
  .mobile-tab-bar a.active i { color: var(--orange); }

  /* Distortion effect on active tab — matches desktop nav scramble */
  .mobile-tab-bar a.active {
    animation: mtab-glitch 3.5s steps(1) infinite;
  }
  .mobile-tab-bar a.active i {
    animation: mtab-icon-glitch 3.5s steps(1) infinite;
  }
  @keyframes mtab-glitch {
    0%,100%{ text-shadow:none; opacity:1; }
    8%  { text-shadow:-2px 0 rgba(255,0,60,.7), 2px 0 rgba(255,180,0,.7); opacity:.85; }
    9%  { text-shadow:none; opacity:1; }
    22% { text-shadow: 1px 0 rgba(255,0,60,.5),-1px 0 rgba(255,180,0,.5); opacity:.9; }
    23% { text-shadow:none; opacity:1; }
    61% { text-shadow:-1px 0 rgba(255,0,60,.4), 1px 0 rgba(255,180,0,.4); opacity:.8; }
    62% { text-shadow:none; opacity:1; }
  }
  @keyframes mtab-icon-glitch {
    0%,100%{ transform:translate(0,0); filter:none; }
    8%  { transform:translate(-1px,0); filter:brightness(1.4); }
    9%  { transform:translate(1px,0);  filter:none; }
    10% { transform:translate(0,0);    filter:none; }
    61% { transform:translate(0,-1px); filter:brightness(1.2); }
    62% { transform:translate(0,0);    filter:none; }
  }

  /* Status bar line above tab bar */
  .mobile-tab-bar::before {
    content: '';
    position: absolute;
    top: -1px; left: 0; right: 0;
    height: 1px;
    background: linear-gradient(to right,
      transparent,
      rgba(255,90,0,.6) 20%,
      rgba(255,90,0,.6) 80%,
      transparent
    );
  }

  /* Body padding for bottom tab bar */
  body { padding-bottom: 72px; }

  /* ── GALLERY — 2 col on mobile ── */
  .gallery-grid {
    grid-template-columns: repeat(2, 1fr) !important;
  }
  .gallery-terminal-bar {
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: .3rem !important;
    padding: .6rem 1rem !important;
  }
  .gallery-bar-label, .gallery-bar-count { font-size: .62rem !important; }
  .gallery-sector { font-size: .58rem !important; }
  .gallery-status { display: none !important; }
  .gallery-lightbox-inner {
    width: 95vw !important;
    max-width: 95vw !important;
    max-height: 90vh !important;
  }
  /* Mobile tab bar — 6 items */
  .mobile-tab-bar a   { font-size: 0.6rem !important; }
  .mobile-tab-bar a i { font-size: 1.45rem !important; }

}

/* Extra small — under 390px (small iPhones) */
@media (max-width: 390px) {
  .boot-inner {
    padding: 1rem .85rem !important;
    width: 98vw !important;
  }
  .boot-line { font-size: .7rem !important; }
  .boot-corp { font-size: .7rem !important; letter-spacing: .05em !important; }
  .boot-lines { max-height: 32svh !important; }
  .exp-tab { min-width: 90px !important; padding: .55rem .65rem !important; }
  .telem-val { font-size: 1.1rem !important; }
  .gallery-grid { grid-template-columns: repeat(2, 1fr) !important; }
}