/* Phone-only overrides. Keep the full desktop composition at 768px and above. */
@media (max-width: 767px) {
    :root { --phone-gutter: 16px; }
    html { scroll-padding-top: 88px; }
    .wrap { width: calc(100% - 2 * var(--phone-gutter)); }
    .site-header { padding-top: max(8px, env(safe-area-inset-top)); }
    .nav { min-height: 56px; padding: 5px 6px 5px 10px; }
    .nav-links { display: none; }
    .menu-toggle { display: inline-grid; place-items: center; flex-shrink: 0; }
    /* This is a true dropdown layer: it is removed from document flow so opening
       the menu never pushes the hero or game down. */
    .mobile-panel {
        position: absolute;
        z-index: 41;
        top: calc(max(8px, env(safe-area-inset-top)) + 64px);
        left: var(--phone-gutter);
        right: var(--phone-gutter);
        width: auto;
        margin: 0;
        max-height: calc(100svh - 88px);
        overflow-y: auto;
        overscroll-behavior: contain;
        box-shadow: 0 18px 40px rgba(0, 0, 0, .42);
    }
    .mobile-panel a { min-height: 44px; display: flex; align-items: center; }
    /* Reserve the first screen for the hero and game. Content can still grow on
       short screens or with enlarged text; nothing is clipped to a fixed height. */
    .intro-act {
        min-height: calc(100svh - 56px - max(8px, env(safe-area-inset-top)) - var(--phone-teaser-height, 224px) - 24px - max(16px, env(safe-area-inset-bottom)));
        justify-content: flex-end;
        padding: 36px 0 0;
    }
    .intro-lockup { padding-top: 12px; }
    .intro-title { font-size: clamp(30px, 9vw, 38px); line-height: 1.04; margin-bottom: 24px; }
    .intro-title .intro-tag { font-size: 11px; letter-spacing: .08em; margin-bottom: 16px; max-width: 32ch; }
    .intro-actions { gap: 8px; }
    .intro-actions .button { flex: 1 1 152px; gap: 8px; padding: 0 10px; font-size: 12px; min-height: 46px; white-space: nowrap; }
    .intro-actions .button svg { width: 18px; height: 18px; flex-shrink: 0; }
    .section { padding-top: 48px; scroll-margin-top: 88px; }
    .section-head { margin-bottom: 18px; }
    .section-head h2 { font-size: clamp(24px, 6.5vw, 28px); }
    .section-kicker { font-size: 10px; line-height: 1.7; margin-bottom: 8px; }
    .zone-anchor { font-size: 11px; margin-bottom: 6px; }
    .section-note { font-size: 15px; line-height: 1.55; margin-top: 12px; }
    .cx-teaser { margin-top: 24px; margin-bottom: max(16px, env(safe-area-inset-bottom)); padding: 22px 18px; min-height: 220px; gap: 18px; }
    .cx-teaser h2 { font-size: 28px; }
    .cx-teaser-copy p { font-size: 15px; line-height: 1.5; }
    .cx-play { width: 100%; min-height: 48px; justify-content: center; }
    .case, .case.flip { grid-template-columns: minmax(0,1fr); padding: 14px; gap: 14px; margin-bottom: 14px; border-radius: 18px; }
    .case::after { display: none; }
    .case::before { left: 14px; right: 14px; }
    .case-media { aspect-ratio: 16 / 9; min-width: 0; border-radius: 12px; }
    .case-media > svg { position: absolute; inset: 0; width: 100%; height: 100%; }
    .case h3 { font-size: 20px; line-height: 1.2; }
    .case-tagline { font-size: 10px; line-height: 1.6; margin-bottom: 6px; }
    .case p.desc { font-size: 14px; line-height: 1.5; margin-top: 6px; }
    .case .tag-list { margin-top: 10px; gap: 5px; }
    .case .tag { font-size: 11px; padding: 3px 8px; }
    .case-actions { gap: 8px; margin-top: 12px; flex-wrap: wrap; }
    .case-actions .button { min-height: 44px; flex: 1 1 125px; padding: 0 8px; font-size: 11px; }
    #work .case ~ .case { grid-template-columns: 88px minmax(0,1fr); gap: 6px 12px; }
    #work .case ~ .case > div:not(.case-media) { display: contents; }
    #work .case ~ .case .case-media { grid-column: 1; grid-row: 1 / span 3; align-self: start; aspect-ratio: 1; order: 0; }
    #work .case ~ .case :is(.case-tagline,h3,.desc) { grid-column: 2; margin: 0; }
    #work .case ~ .case :is(.tag-list,.case-actions) { grid-column: 1 / -1; }
    #work .case ~ .case h3 { font-size: 18px; }
    .timeline { gap: 10px; }
    .timeline-card { padding: 14px; grid-template-columns: 1fr; gap: 6px; }
    .timeline-card h3 { font-size: 17px; line-height: 1.35; }
    .timeline-card p { font-size: 14px; line-height: 1.5; }
    .timeline-date { font-size: 11px; }
    .skills-layout, .edu-grid { grid-template-columns: 1fr; gap: 10px; }
    .skill-group, .edu-card { padding: 14px; border-radius: 16px; }
    .skill-group h3, .edu-card h3 { font-size: 16px; line-height: 1.4; margin: 0; }
    .skill-tier { font-size: 10px; margin-left: auto; }
    .skill-chips { gap: 6px; padding-top: 12px; }
    .skill-chip { padding: 5px 8px; font-size: 12px; max-width: 100%; white-space: normal; }
    .mobile-disclosure { display: flex; align-items: center; gap: 8px; width: 100%; min-height: 44px; padding: 0; border: 0; background: none; color: inherit; font: inherit; text-align: left; cursor: pointer; user-select: none; -webkit-user-select: none; -webkit-tap-highlight-color: transparent; touch-action: manipulation; }
    #experience .timeline-card,
    #experience .timeline-card * { -webkit-tap-highlight-color: transparent; }
    #experience .timeline-card { cursor: pointer; }
    #experience .timeline-card .mobile-disclosure,
    #experience .timeline-card .mobile-disclosure * { user-select: none; -webkit-user-select: none; -webkit-touch-callout: none; }
    #education .edu-card,
    #education .edu-card * { -webkit-tap-highlight-color: transparent; }
    #education .edu-card { cursor: pointer; }
    #education .edu-card .mobile-disclosure,
    #education .edu-card .mobile-disclosure * { user-select: none; -webkit-user-select: none; -webkit-touch-callout: none; }
    .mobile-disclosure::after { content: '+'; margin-left: auto; color: var(--accent); font-size: 22px; }
    .mobile-disclosure[aria-expanded=true]::after { content: '−'; }
    .mobile-disclosure .ic { flex-shrink: 0; }
    .skill-disclosure {
        display: grid;
        grid-template-columns: 28px minmax(0, 1fr) 78px 16px;
        gap: 8px;
        min-height: 52px;
    }
    .skill-disclosure .ic { width: 28px; height: 28px; margin: 0; }
    .skill-disclosure .ic svg { width: 20px; height: 20px; }
    .skill-disclosure .skill-label { min-width: 0; font-size: 14px; line-height: 1.35; }
    .skill-disclosure .skill-tier { width: 78px; margin: 0; padding: 3px 4px; font-size: 9px; text-align: center; justify-self: center; }
    .skill-disclosure::after { width: 16px; margin: 0; text-align: center; }
    .mobile-disclosure-panel { overflow: hidden; }
    .mobile-disclosure-panel[hidden] { display: none; }
    .edu-card p, .cert-list li { font-size: 14px; line-height: 1.55; }
    /* More Projects becomes a compact, classic game shelf on phones. */
    #library .project-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
    #library .project-card {
        display: flex;
        flex-direction: column;
        min-width: 0;
        border-radius: 12px;
        cursor: pointer;
        overflow: hidden;
        transition: transform 180ms ease, border-color 180ms ease, opacity 220ms ease;
    }
    #library .project-card:nth-child(n+5) { display: none; }
    #library .project-card:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
    #library .project-media { width: 100%; aspect-ratio: 4 / 3; height: auto; margin: 0; border: 0; }
    #library .project-media img { width: 100%; height: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
    #library .project-media video, #library .project-media::before, #library .project-media::after { display: none !important; }
    #library .project-body { display: block; padding: 9px 10px 10px; min-width: 0; }
    #library h3 { overflow: hidden; font-size: 15px; line-height: 1.2; text-overflow: ellipsis; white-space: nowrap; }
    #library .project-body p, #library .project-body .tag-list, #library .project-body .text-link { display: none; }
    #library .mobile-project-category { display: block; margin-top: 4px; color: var(--warm-muted); font-size: 10px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; }
    .text-link { min-height: 44px; display: inline-flex; align-items: center; font-size: 13px; }
    .section-more { margin-top: 16px; }
    .section-more .button { width: 100%; min-height: 48px; }
    .poster-disclosure { border: 1px solid var(--line); border-radius: 16px; padding: 14px; background: var(--card-bg); }
    .poster-disclosure .hashira-embed { width: 100%; height: 1120px; margin-top: 12px; }
    .poster-disclosure a { margin-top: 8px; }
    .talk { width: calc(100% - 24px); max-height: calc(100svh - 24px); max-height: calc(100dvh - 24px); }
    .talk-inner { padding: 18px; }
    .talk-head h2 { font-size: 28px; }
    .talk-close { min-width: 44px; min-height: 44px; }
    .contact-layout { grid-template-columns: minmax(0,1fr); gap: 16px; }
    .contact-panel { padding: 14px; min-width: 0; }
    .contact-link { font-size: 14px; overflow-wrap: anywhere; min-height: 44px; }
    .contact-avatar { max-width: 72px; }
    .contact-panel :is(input,textarea,select) { font-size: 16px; min-width: 0; width: 100%; }
    .contact-panel button[type=submit] { width: 100%; }
    .runway-break { margin-top: 40px; }
    #contact { padding-top: 32px; }
    #contact .section-head { margin-bottom: 0; }
    #contact .section-head h2 { font-size: clamp(26px, 7.5vw, 30px); line-height: 1.1; }
    #contact .talk-link { margin-top: 16px; min-height: 44px; }
    .site-footer { margin-top: 24px; padding: 24px 0 max(24px, env(safe-area-inset-bottom)); }
    .footer-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px 16px; padding-bottom: 16px; }
    .footer-grid > :first-child { grid-column: 1 / -1; }
    .footer-grid p { max-width: none; margin-top: 8px; font-size: 14px; line-height: 1.5; }
    .footer-grid .footer-title { margin: 0 0 4px; }
    .footer-links { gap: 0; }
    .footer-links a { display: inline-flex; align-items: center; min-height: 44px; }
    .footer-inner { padding-top: 16px; padding-right: 52px; gap: 10px; font-size: 12px; line-height: 1.5; }
    .footer-inner .pixel-label { line-height: 1.8; }
    .to-top { bottom: max(16px,env(safe-area-inset-bottom)); }
    .sound-toggle { bottom: max(72px,calc(env(safe-area-inset-bottom) + 56px)); }
    :is(a,button,summary):focus-visible { outline: 2px solid var(--accent); outline-offset: 4px; }
    .reveal { opacity: 1; transform: none; transition: none; }
}
@media (min-width: 390px) and (max-width: 767px) { :root { --phone-gutter: 20px; } }
@media (max-width: 767px) and (prefers-reduced-motion: reduce) {
    .cx-orb, .cx-play-shine, .mobile-panel { animation: none !important; }
}