/* =========================================================
   RESPONSIVE.CSS
   PHONE + TABLET ONLY (desktop is not changed)
   ========================================================= */

/* =========================================================
   DESKTOP SAFETY: floating menu is NEVER visible on desktop.
   (responsive.js creates it on every screen size, so it must
   be hidden and size-limited here, outside any media query.)
   ========================================================= */

.nav-fab {
    display: none !important;
}

.nav-fab svg {
    width: 20px;
    height: 20px;
    max-width: 24px;
    max-height: 24px;
}

/* =========================================================
   GLOBAL PHONE + TABLET
   ========================================================= */

@media screen and (max-width: 900px) {

    html,
    body {
        width: 100%;
        min-width: 0;
        margin: 0;
        padding: 0;
        overflow-x: hidden;
        scroll-behavior: auto !important;
        overscroll-behavior-y: none;
    }


    /* =====================================================
       FLOATING MENU (blue arrow -> home / instagram / linkedin)
       Only shown on phone/tablet AND only while a page is open.
       ===================================================== */

    .nav-fab {
        display: none !important;
        position: fixed;
        right: 16px;
        bottom: calc(env(safe-area-inset-bottom, 0px) + 18px);
        z-index: 99999;
        flex-direction: column-reverse;
        align-items: center;
        gap: 10px;
    }

    body.page-open .nav-fab {
        display: flex !important;
    }

    .nav-fab__main,
    .nav-fab__item {
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 0;
        border: none;
        border-radius: 50%;
        color: #fff;
        cursor: pointer;
        text-decoration: none;
        -webkit-tap-highlight-color: transparent;
    }

    .nav-fab__main {
        width: 42px;
        height: 42px;
        background: #2f7bff;
        box-shadow: 0 4px 14px rgba(47, 123, 255, 0.55);
    }

    .nav-fab__main svg {
        width: 20px;
        height: 20px;
        display: block;
        transition: transform 0.25s ease;
    }

    .nav-fab.open .nav-fab__main svg {
        transform: rotate(180deg);
    }

    .nav-fab__item {
        width: 38px;
        height: 38px;
        opacity: 0;
        transform: translateY(12px) scale(0.6);
        pointer-events: none;
        transition: opacity 0.2s ease, transform 0.2s ease;
        box-shadow: 0 3px 10px rgba(0, 0, 0, 0.35);
    }

    .nav-fab__item svg {
        width: 19px;
        height: 19px;
        display: block;
    }

    .nav-fab.open .nav-fab__item {
        opacity: 1;
        transform: none;
        pointer-events: auto;
    }

    .nav-fab.open .nav-fab__item:nth-child(3) { transition-delay: 0.04s; }
    .nav-fab.open .nav-fab__item:nth-child(4) { transition-delay: 0.08s; }

    .nav-fab__item--home { background: #2f7bff; }
    .nav-fab__item--instagram { background: linear-gradient(45deg, #f9a03f, #e1306c, #833ab4); }
    .nav-fab__item--linkedin { background: #0a66c2; }

    /* bento is removed while a page is open: no accidental scroll back */
    body.page-open .img-wrapper {
        display: none !important;
    }


    /* =====================================================
       BENTO
       ===================================================== */

    .img-wrapper {
        width: 100vw;
        height: 100svh !important;
        min-height: 100svh;
        margin: 0;
        padding: 0;
        position: relative;
        overflow: hidden;
        background: #000;
    }

    .gallery--bento {
        width: 100vw;
        height: 100svh !important;
        min-height: 100svh;
        display: grid;
        margin: 0;
        padding: 5px;
        gap: 5px;
        box-sizing: border-box;
    }

    .gallery__item {
        width: 100% !important;
        height: 100% !important;
        min-width: 0;
        min-height: 0;
        overflow: hidden;
        position: relative !important;
        box-sizing: border-box;
        transform: none !important;
        cursor: pointer;
    }

    .gallery__item img {
        width: 100% !important;
        height: 100% !important;
        display: block;
        object-fit: cover;
        object-position: center;
    }

    /* prevent desktop fullscreen effect */
    .gallery__item.fullscreen,
    .gallery__item.active {
        position: relative !important;
        left: auto !important;
        top: auto !important;
        right: auto !important;
        bottom: auto !important;
        width: 100% !important;
        height: 100% !important;
        min-width: 0 !important;
        min-height: 0 !important;
        z-index: auto !important;
        inset: auto !important;
        transform: none !important;
        margin: 0 !important;
    }


    /* =====================================================
       CONTENT / PAGES
       ===================================================== */

    .content {
        display: none;
        width: 100%;
        max-width: 100vw;
        margin: 0;
        padding: 0;
        position: relative;
        box-sizing: border-box;
        overflow-x: hidden;
    }

    .content.active {
        display: block;
    }

    .content > section {
        display: none;
        width: 100%;
        max-width: 100vw;
        min-width: 0;
        min-height: 100svh;
        margin: 0;
        padding: 0;
        box-sizing: border-box;
    }

    .content > section.active {
        display: block;
    }


    /* =====================================================
       PAGE 1 - ABOUT
       ===================================================== */

    .page1 {
        width: 100%;
        max-width: 100vw;
        min-height: 100svh;
        box-sizing: border-box;
        overflow-x: hidden;
    }


    /* =====================================================
       PAGE 2 - PROJECTS
       JS sets card width, positions and viewport height.
       CSS must NOT force card width/height or it overlaps.
       ===================================================== */

    .page2 {
        width: 100%;
        max-width: 100vw;
        min-height: 100svh;
        padding: 25px 15px !important;
        box-sizing: border-box;
        overflow-x: hidden;
    }

    .page2 > h1 {
        margin: 0 0 8px 0;
        font-size: clamp(28px, 8vw, 42px);
        line-height: 1;
    }

    #instruction {
        margin: 10px 0 20px;
        font-size: 15px;
    }

    .project-viewport {
        width: 100% !important;
        max-width: 100% !important;
        height: auto;
        min-height: 65svh;
        margin: 0;
        overflow: hidden;
        position: relative;
        box-sizing: border-box;
    }

    .project-track {
        position: absolute !important;
        left: 0 !important;
        top: 0 !important;
        width: 100% !important;
        max-width: 100% !important;
        overflow: visible;
        box-sizing: border-box;
    }

    .project-card {
        box-sizing: border-box;
        position: absolute !important;
        overflow: hidden;
        border-radius: 5px;
        touch-action: none;
        user-select: none;
        -webkit-user-select: none;
        cursor: grab;
    }

    .project-card img {
        width: 100% !important;
        height: auto !important;
        aspect-ratio: 1 / 1;
        object-fit: cover;
        padding: 4px;
        box-sizing: border-box;
    }

    .project-card .info {
        margin-top: 7px;
        padding-left: 4px;
        padding-right: 4px;
        font-family: "VT323", monospace;
        overflow: hidden;
    }

    .project-card .info h1 {
        margin: 0 0 3px;
        font-size: clamp(18px, 5vw, 24px);
        line-height: 1;
    }

    .project-card .info p {
        font-size: 14px;
        line-height: 1.1;
    }

    .project-card .info a {
        font-size: 16px;
        margin-top: 3px;
    }


    /* =====================================================
       PAGE 3 - PONG
       ===================================================== */

    .page3 {
        width: 100%;
        height: 100svh;
        min-height: 100svh;
        position: relative;
        overflow: hidden;
        touch-action: none;
    }

    #pong {
        position: absolute;
        inset: 0;
        width: 100vw !important;
        height: 100svh !important;
        display: block;
        touch-action: none;
        user-select: none;
        -webkit-user-select: none;
    }


    /* =====================================================
       PAGE 4 / 5 / 8
       ===================================================== */

    .page4,
    .page5,
    .page8 {
        width: 100%;
        max-width: 100vw;
        min-height: 100svh;
        box-sizing: border-box;
        overflow-x: hidden;
    }


    /* =====================================================
       PAGE 6 - LEETCODE / CODEFORCES
       ===================================================== */

    .page6 {
        width: 100%;
        max-width: 100vw;
        min-height: 100svh;
        padding: 45px 15px !important;
        box-sizing: border-box;
        overflow-x: hidden;
    }

    .page6 > h1 {
        font-size: clamp(30px, 8vw, 45px);
        line-height: 1;
        margin-bottom: 30px;
    }

    .leetcode-card {
        width: 100% !important;
        max-width: 100% !important;
        min-height: 400px !important;
        margin-left: auto;
        margin-right: auto;
        border-radius: 18px;
        box-sizing: border-box;
    }

    .leetcode-overlay {
        padding: 22px !important;
    }

    .leetcode-overlay h3 {
        font-size: clamp(28px, 8vw, 40px);
    }

    .leetcode-overlay p {
        font-size: 14px;
        margin: 12px 0 22px;
    }

    .leetcode-stats {
        display: grid !important;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 18px;
        margin-bottom: 25px;
    }

    .leetcode-stats div {
        min-width: 0;
    }

    .leetcode-stats strong {
        font-size: 23px;
    }

    .leetcode-stats small {
        font-size: 9px;
    }


    /* =====================================================
       PAGE 7 - BOOKMARKS
       ===================================================== */

    .page7 {
        width: 100%;
        max-width: 100vw;
        min-height: 100svh;
        overflow: hidden;
        box-sizing: border-box;
    }

    .bodybox {
        width: 100%;
        height: 100svh;
        min-height: 100svh;
        margin: 0;
        padding: 70px 10px 25px;
        box-sizing: border-box;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .scroll {
        width: 92vw;
        max-width: 700px;
        margin: 0;
    }
}


/* =========================================================
   TABLET 601px - 900px
   ========================================================= */

@media screen and (min-width: 601px) and (max-width: 900px) {

    .gallery--bento {
        gap: 8px;
        padding: 8px;
    }

    .aboutme {
        width: 90%;
        box-sizing: border-box;
    }

    .page2 {
        padding: 35px 30px !important;
    }

    .page2 > h1 {
        font-size: clamp(36px, 6vw, 55px);
    }

    .project-viewport {
        min-height: 68svh;
    }

    .project-card .info h1 {
        font-size: 25px;
    }

    .project-card .info a {
        font-size: 19px;
    }

    .page6 {
        padding: 60px 5% !important;
    }

    .leetcode-card {
        min-height: 480px !important;
    }

    .leetcode-overlay {
        padding: 35px !important;
    }

    .leetcode-stats {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }

    .scroll {
        width: 88vw;
    }
}


/* =========================================================
   PHONE <= 600px
   ========================================================= */

@media screen and (max-width: 600px) {

    .img-wrapper,
    .gallery--bento {
        width: 100vw;
        height: 100svh !important;
        min-height: 100svh;
    }

    .gallery--bento {
        gap: 5px;
        padding: 5px;
    }

    /* projects */
    .page2 {
        padding: 20px 10px !important;
    }

    .page2 > h1 {
        font-size: 30px;
        margin-bottom: 5px;
    }

    #instruction {
        font-size: 14px;
        margin-bottom: 15px;
    }

    .project-viewport {
        min-height: 68svh;
    }

    .project-card img {
        padding: 3px;
    }

    .project-card .info {
        margin-top: 5px;
        padding-left: 3px;
    }

    .project-card .info h1 {
        font-size: 20px;
    }

    .project-card .info a {
        font-size: 16px;
    }

    /* about */
    .aboutme {
        width: 88%;
        min-height: 100svh;
        display: flex;
        flex-direction: column;
        align-items: center;
        padding: 40px 0;
    }

    .aboutme > h1 {
        width: 100%;
        text-align: left;
        margin-bottom: 25px;
    }

    #personal_img {
        width: 150px;
        height: 150px;
        margin-bottom: 20px;
    }

    .name {
        font-size: 32px;
        text-align: center;
    }

    .name_description {
        font-size: 17px;
        text-align: center;
        margin-bottom: 25px;
    }

    .about_text {
        width: 100%;
        font-size: 14px;
        line-height: 1.65;
        text-align: left;
    }

    .contact_me {
        width: 100%;
        justify-content: center;
        gap: 20px;
    }

    /* leetcode */
    .page6 {
        padding: 40px 10px !important;
    }

    .page6 > h1 {
        font-size: 32px;
        margin-bottom: 25px;
    }

    .leetcode-card {
        min-height: 400px !important;
        border-radius: 16px;
    }

    .leetcode-overlay {
        padding: 18px !important;
    }

    .leetcode-overlay h3 {
        font-size: 30px;
    }

    .leetcode-overlay p {
        font-size: 13px;
    }

    .leetcode-stats {
        gap: 14px;
    }

    .leetcode-stats strong {
        font-size: 21px;
    }

    /* bookmarks */
    .bodybox {
        padding-left: 8px;
        padding-right: 8px;
    }

    .scroll {
        width: 94vw;
    }

    .rod {
        height: 24px;
    }

    .rod::before,
    .rod::after {
        width: 24px;
        height: 24px;
    }

    .rod::before {
        left: -12px;
    }

    .rod::after {
        right: -12px;
    }

    .book-list {
        min-height: 60px;
        padding-right: 8px;
    }

    .book-list > span {
        width: 34px;
        font-size: 12px;
    }

    .book-list > span::after {
        margin-left: 7px;
    }

    .book-list a {
        font-size: 13px;
        padding: 12px 4px;
    }
}


/* =========================================================
   SMALL PHONE <= 400px
   ========================================================= */

@media screen and (max-width: 400px) {

    .gallery--bento {
        gap: 4px;
        padding: 4px;
    }

    .page2 {
        padding: 18px 8px !important;
    }

    .page2 > h1 {
        font-size: 27px;
    }

    .project-viewport {
        min-height: 67svh;
    }

    .project-card .info h1 {
        font-size: 18px;
    }

    .project-card .info a {
        font-size: 14px;
    }

    .aboutme {
        width: 90%;
    }

    #personal_img {
        width: 135px;
        height: 135px;
    }

    .name {
        font-size: 28px;
    }

    .name_description {
        font-size: 15px;
    }

    .about_text {
        font-size: 13px;
    }

    .contact_me {
        gap: 15px;
    }

    .page6 {
        padding: 35px 8px !important;
    }

    .page6 > h1 {
        font-size: 29px;
    }

    .leetcode-overlay {
        padding: 15px !important;
    }

    .leetcode-overlay h3 {
        font-size: 27px;
    }

    .leetcode-overlay p {
        font-size: 12px;
    }

    .leetcode-stats {
        gap: 12px;
    }

    .leetcode-stats strong {
        font-size: 19px;
    }

    .scroll {
        width: 94vw;
    }

    .book-list > span {
        width: 34px;
        font-size: 12px;
    }

    .book-list a {
        font-size: 13px;
        padding: 12px 4px;
    }
}


/* =========================================================
   LANDSCAPE PHONE
   ========================================================= */

@media screen and (max-width: 900px) and (orientation: landscape) {

    .img-wrapper,
    .gallery--bento {
        width: 100vw;
        height: 100svh !important;
        min-height: 100svh;
    }

    .project-viewport {
        min-height: 60svh;
    }

    .bodybox {
        height: 100svh;
        padding-top: 15px;
        padding-bottom: 15px;
    }
}


/* =========================================================
   TOUCH DEVICES
   ========================================================= */

@media (hover: none) and (pointer: coarse) {

    .gallery__item {
        cursor: pointer;
    }

    .book-list:hover {
        transform: none;
    }

    .leetcode-card:hover {
        transform: none;
    }

    .project-card {
        cursor: grab;
    }
}


/* =========================================================
   SCROLL CONTAINER
   While a page is open, .content is a full-screen scroll
   container. Scrolling no longer depends on html/body CSS
   or on desktop position/height/overflow rules.
   ========================================================= */

@media screen and (max-width: 900px) {

    html,
    body {
        height: auto !important;
        overflow-x: hidden !important;
        scroll-behavior: auto !important;
    }

    .content.active {
        display: block !important;
        position: fixed !important;
        inset: 0 !important;
        width: 100% !important;
        height: auto !important;
        max-width: none !important;
        margin: 0 !important;
        padding: 0 !important;
        overflow-x: hidden !important;
        overflow-y: auto !important;
        -webkit-overflow-scrolling: touch;
        overscroll-behavior-y: contain;
        scroll-behavior: auto !important;
        z-index: 100;
    }

    /* the open page grows with its content and scrolls inside .content */
    .content > section.active {
        display: block !important;
        position: relative !important;
        inset: auto !important;
        left: auto !important;
        top: auto !important;
        transform: none !important;
        opacity: 1 !important;
        visibility: visible !important;
        width: 100% !important;
        max-width: 100vw !important;
        height: auto !important;
        min-height: 100vh;
        min-height: 100dvh;
        overflow: visible !important;
    }

    /* one-screen pages (pong, bookmarks) */
    .content > section.page3.active,
    .content > section.page7.active {
        height: 100vh !important;
        height: 100dvh !important;
        overflow: hidden !important;
    }
}