/* =========================================================
   MAGIC FAMILIAR — mobile layout fixes
   Added after the original stylesheet so the fixes override
   the earlier responsive rules without changing desktop.
   ========================================================= */

@media (max-width: 640px){

    /* ---------- Ritual / orb ---------- */
    .orb-wrapper{
        width: 92vw;
        max-width: 390px;
        height: 370px;
        margin: 28px auto 0;
        position: relative;
        display: block;
    }

    #orbStand{
        position: absolute;
        left: 50%;
        /* The stand asset has transparent space at the bottom.
           This placement leaves about 8% of the visible stand height
           covered by the orb instead of letting the orb sink into it. */
        bottom: -12px;
        left: 0;
        right: 0;
        margin-left: auto;
        margin-right: auto;
        width: min(72vw, 250px);
        height: auto;
        z-index: 1;
    }

    #magicOrb{
        position: absolute;
        left: 0;
        right: 0;
        margin-left: auto;
        margin-right: auto;
        top: -24px;
        width: min(72vw, 250px);
        height: auto;
        z-index: 3;
    }

    /* Keep the summon control visually separated from the ritual. */
    .button-section{
        width: 100%;
        min-height: 116px;
        margin: -36px 0 18px;
        position: relative;
        z-index: 4;
    }

    #summonButton{
        top: 0;
        position: relative;
    }

    #summonButton img{
        width: min(90vw, 330px);
        height: auto;
    }

    /* ---------- Familiar card ---------- */
    .familiar-card{
        width: 94vw;
        max-width: 600px;
        margin: 19px auto 7px;
        padding: 20px 18px 32px;
        overflow: hidden;
        isolation: isolate;
    }

    .familiar-card::before{
        inset: 1px;
        transform: none;
        z-index: 0;
    }

    .card-frame{
        inset: 0;
        width: 100%;
        height: 100%;
        object-fit: fill;
        z-index: 1;
    }

    .card-content{
        position: relative;
        z-index: 5;
    }

    /* Larger familiar artwork on phones. */
    #familiarImage{
        width: min(76vw, 340px);
        height: min(76vw, 340px);
        max-width: 100%;
        object-fit: contain;
        margin: -6px auto 10px;
    }

    .card-info{
        width: 100%;
        margin-top: 0;
    }

    .meta-row{
        grid-template-columns: 1fr;
        row-gap: 3px;
    }

    /* ---------- Team message / girl ---------- */
    .community-section{
        width: 94vw;
        margin: 0 auto 48px;
        gap: 22px;
    }

    .team-message{
        grid-template-columns: 1fr;
    }

    .team-message-image-wrap{
        min-height: 0;
        height: auto;
        margin: 0;
        padding-top: 0;
        position: relative;
        z-index: 1;
    }

    .team-message-image{
        width: 112%;
        max-width: 620px;
        height: auto;
        transform: none;
        transform-origin: center bottom;
        margin: 0 auto;
    }

    .team-message-copy{
        padding: 0 4px 8px;
        transform: none;
        position: relative;
        z-index: 2;
    }

    /* ---------- Rules button ---------- */
    .rules-link{
        width: min(90vw, 330px);
        max-width: 100%;
        margin-top: 20px;
    }

    /* ---------- Social block ---------- */
    .social-section,
    body:has(#familiarCard.hidden) .social-section{
        margin-top: 28px;
        position: relative;
        z-index: 5;
    }

    .social-heading{
        width: 100%;
        gap: 7px;
        margin-bottom: 14px;
    }

    .social-heading .community-title{
        white-space: nowrap;
        font-size: 1.25rem;
        margin: 0;
    }

    .social-divider{
        width: clamp(38px, 15vw, 58px);
    }

    .social-links{
        width: 100%;
        gap: 8px;
        flex-wrap: nowrap;
    }

    .social-links img{
        width: 62px;
        height: auto;
    }

    /* ---------- Promotions / footer ---------- */
    .promotion-section{
        width: 100%;
        max-width: 100%;
    }

    .promotion-icons-row{
        gap: 16px;
    }

    .promotion-icon-link{
        width: 62px;
        height: 62px;
    }

    .site-copyright{
        padding: 18px 16px 24px;
    }
}

/* ---------- Mobile card text inset ---------- */
#familiarName{
    margin-left: 10px;
    width: calc(100% - 10px);
}

#familiarDescription{
    width: calc(100% - 20px);
    margin-left: 10px;
    margin-right: 10px;
}

/* ---------- Final mobile card text inset ---------- */
@media (max-width: 640px){
    .familiar-card .card-info{
        width: 100%;
        padding-left: 10px;
        padding-right: 10px;
        box-sizing: border-box;
    }

    .familiar-card #familiarName{
        margin-left: 0;
        width: 100%;
    }

    .familiar-card #familiarDescription{
        width: 100%;
        margin-left: 0;
        margin-right: 0;
    }
}


/* =========================================================
   TABLET / NARROW DESKTOP — 641px–900px
   Prevent the intermediate layout from mixing desktop and
   mobile positioning. The phone layout above 640px stays
   untouched.
   ========================================================= */
@media (min-width: 641px) and (max-width: 900px){

    /* ---------- Ritual ---------- */
    .orb-section{
        margin-top: -18px;
    }

    .orb-wrapper{
        width: min(92vw, 390px);
        height: 390px;
        margin: 28px auto 0;
        position: relative;
        display: block;
    }

    #magicOrb{
        position: absolute;
        left: 0;
        right: 0;
        margin-left: auto;
        margin-right: auto;
        top: -63px;
        width: 285px;
        height: 285px;
        /* Do not use translateX here: .orb-floating animation also
           writes transform and would cancel horizontal centering. */
        z-index: 3;
    }

    #orbStand{
        position: absolute;
        left: 50%;
        right: auto;
        margin: 0;
        bottom: 8px;
        width: 275px;
        height: auto;
        transform: translateX(-50%);
        z-index: 1;
    }

    /*
       The button now participates in normal vertical flow:
       stand -> gap -> button. This prevents it from sliding
       underneath the stand at intermediate widths.
    */
    .button-section{
        width: 100%;
        min-height: 116px;
        margin: -7px 0 17px;
        position: relative;
        z-index: 4;
        display: flex;
        justify-content: center;
        align-items: center;
    }

    #summonButton{
        position: relative;
        top: 0;
    }

    #summonButton img{
        width: min(90vw, 360px);
        height: auto;
    }

    /* ---------- Familiar card ---------- */
    .familiar-card{
        width: min(84vw, 600px);
        margin-top: 0;
    }

    /* ---------- Team message ---------- */
    .community-section{
        width: min(94vw, 760px);
        margin: 0 auto 65px;
        gap: 28px;
    }

    /*
       At tablet widths the two-column desktop composition becomes
       too narrow. Stack the illustration and copy so the rules
       button remains part of the text block.
    */
    .team-message{
        display: grid;
        grid-template-columns: 1fr;
        gap: 0;
        width: 100%;
    }

    .team-message-image-wrap{
        min-height: 0;
        height: auto;
        margin: 0;
        padding: 0;
        display: flex;
        justify-content: center;
        align-items: flex-end;
        position: relative;
        z-index: 1;
    }

    .team-message-image{
        width: min(82vw, 680px);
        max-width: 100%;
        height: auto;
        transform: none;
        margin: 0 auto;
        transform-origin: center bottom;
    }

    .team-message-copy{
        width: 100%;
        padding: 0 16px 10px;
        transform: none;
        position: relative;
        z-index: 2;
    }

    .community-title{
        font-size: 1.5rem;
    }

    .community-text{
        max-width: 700px;
        font-size: 1.08rem;
        line-height: 1.6;
        margin-left: auto;
        margin-right: auto;
    }

    .rules-link{
        width: min(78vw, 360px);
        max-width: 100%;
        margin: 22px auto 0;
    }

    /* ---------- Social block ---------- */
    .social-section,
    body:has(#familiarCard.hidden) .social-section{
        width: 100%;
        margin-top: 0;
        position: relative;
        z-index: 5;
    }

    .social-heading{
        width: 100%;
        gap: 12px;
        margin-bottom: 16px;
    }

    .social-heading .community-title{
        white-space: nowrap;
        margin: 0;
    }

    .social-divider{
        width: clamp(70px, 13vw, 110px);
    }

    .social-links{
        width: 100%;
        gap: 14px;
        flex-wrap: nowrap;
    }

    .social-links img{
        width: 68px;
        height: auto;
    }

    /* ---------- Promotions ---------- */
    .promotion-section{
        width: 100%;
        max-width: 760px;
    }

    .promotion-icons-row{
        gap: 18px;
    }

    .promotion-icon-link{
        width: 68px;
        height: 68px;
    }

    /* When the familiar card is hidden, don't pull the community
       section upward into the ritual/button area. */
    body:has(#familiarCard.hidden) .community-section{
        margin-top: 0;
    }

    body:has(#familiarCard.hidden) .button-section{
        margin-bottom: 34px;
    }
}

/* =========================================================
   TABLET CARD / COMMUNITY FINAL FIXES — 641px–900px
   ========================================================= */
@media (min-width: 641px) and (max-width: 900px){

    /* Keep the black card backing strictly inside the decorative frame. */
    .familiar-card{
        overflow: hidden;
        isolation: isolate;
        padding-top: 20px;
        padding-bottom: 32px;
    }

    .familiar-card::before{
        inset: 1px;
        transform: none;
        z-index: 0;
        clip-path: inset(0 round 0);
    }

    .card-frame{
        top: 0 !important;
        right: 0 !important;
        bottom: 0 !important;
        left: 0 !important;
        width: 100% !important;
        height: 100% !important;
        object-fit: fill !important;
        z-index: 1;
    }

    /* Familiar artwork: +50% from the previous 342px tablet size. */
    #familiarImage{
        width: 513px !important;
        height: 513px !important;
        max-width: 76vw;
        object-fit: contain;
        margin: -6px auto 10px;
    }

    /* Give the card enough breathing room before the team message. */
    .community-section{
        margin-top: 12px !important;
    }

    /* Never allow the team message to visually sit over the card. */
    .team-message{
        position: relative;
        z-index: 1;
    }

    .team-message-copy{
        position: relative;
        z-index: 2;
    }
}

/* =========================================================
   TABLET 641px–900px — FINAL SPACING TUNING
   ========================================================= */
@media (min-width: 641px) and (max-width: 900px){

    /* Raise the orb another 8px relative to the stand,
       while the whole ritual wrapper is 10px lower. */
    #magicOrb{
        top: -63px;
    }

    /* Reduce the visible stand -> summon-button gap by moving
       the whole button section upward in the vertical flow. */
    .button-section{
        margin-top: -42px;
    }

    /* Reduce the image -> information gap by 80%.
       The previous image bottom margin was 10px; use 2px. */
    #familiarImage{
        margin-bottom: 2px;
    }

    .familiar-card .card-info{
        margin-top: 0;
    }
}

/* =========================================================
   TABLET 641px–900px — ACTUAL GAP CORRECTION
   ========================================================= */
@media (min-width: 641px) and (max-width: 900px){

    /* Move the whole ritual upward by 8px. */
    .orb-section{
        margin-top: -26px !important;
    }

    /* The previous margin changes were applied to the wrong
       relationship. Control the real vertical gaps between the
       consecutive blocks instead. */

    /* summon button -> familiar card: halve the current gap */
    .button-section{
        margin-bottom: 8px !important;
    }

    .familiar-card{
        margin-top: 0 !important;
        margin-bottom: 7px !important;
    }

    /* familiar card -> girl: halve the actual combined gap
       (card bottom margin + community top margin). */
    .community-section{
        margin-top: 6px !important;
    }

    .team-message-image-wrap{
        margin-top: 0 !important;
        padding-top: 0 !important;
    }
}

/* =========================================================
   TABLET 641px–900px — SUMMON CONTROL POSITION
   ========================================================= */
@media (min-width: 641px) and (max-width: 900px){
    /* Lift the visible summon control closer to the orb. */
    .button-section{
        transform: translateY(-20px);
    }
}

/* =========================================================
   TABLET 641px–900px — ORB STATUS POSITION
   ========================================================= */
@media (min-width: 641px) and (max-width: 900px){
    /* Lift the summon/status text 10px without moving the orb or stand. */
    #orbStatus{
        transform: translateY(-10px);
    }
}

/* =========================================================
   FINAL RESPONSIVE LAYOUT
   Keep tablet/narrow-desktop content in normal document flow.
   The previous layout used negative margins/transforms to pull
   sections together; at intermediate widths those offsets made
   the social block overlap the rules button and/or illustration.
   ========================================================= */

html,
body{
    width:100%;
    max-width:100%;
    overflow-x:hidden;
}

#app{
    width:min(96vw, var(--content-width));
    max-width:100%;
}

/* ---------- Tablet / narrow desktop ---------- */
@media (min-width: 641px) and (max-width: 1024px){

    .community-section{
        width:min(94vw, 760px);
        margin:28px auto 70px !important;
        gap:0;
    }

    /* One column = predictable vertical flow.
       The illustration can no longer overlap the copy/social area. */
    .team-message{
        width:100%;
        display:flex;
        flex-direction:column;
        align-items:center;
        gap:0;
    }

    .team-message-image-wrap{
        width:100%;
        min-height:0 !important;
        height:auto;
        margin:0 !important;
        padding:0 !important;
        display:flex;
        justify-content:center;
        align-items:flex-end;
        position:relative;
        overflow:visible;
    }

    .team-message-image{
        display:block;
        width:min(78vw, 620px) !important;
        max-width:100% !important;
        height:auto;
        margin:0 auto !important;
        transform:none !important;
        transform-origin:center bottom;
    }

    .team-message-copy{
        width:100%;
        max-width:760px;
        margin:30px auto 0 !important;
        padding:0 16px 10px !important;
        display:flex;
        flex-direction:column;
        align-items:center;
        justify-content:flex-start;
        position:relative;
        transform:none !important;
    }

    .community-title{
        max-width:720px;
    }

    .community-text{
        max-width:700px;
    }

    .rules-link{
        width:min(78vw, 360px);
        max-width:100%;
        margin:22px auto 0 !important;
    }

    /* Never use the old negative pull-up on the social block. */
    .social-section,
    body:has(#familiarCard.hidden) .social-section{
        width:100%;
        margin:42px auto 0 !important;
        position:relative;
        z-index:5;
    }

    .social-heading{
        width:100%;
        margin-bottom:16px;
    }

    .promotion-section{
        width:100%;
        max-width:760px;
        margin:28px auto 0;
    }

    .promotion-icons-row{
        flex-wrap:nowrap;
        justify-content:center;
    }
}

/* ---------- Phones ---------- */
@media (max-width:640px){

    .community-section{
        width:94vw;
        margin:24px auto 52px !important;
        gap:0;
    }

    .team-message{
        display:flex;
        flex-direction:column;
        align-items:center;
    }

    .team-message-image-wrap{
        min-height:0 !important;
        height:auto;
        margin:0 !important;
        padding:0 !important;
    }

    .team-message-image{
        display:block;
        width:min(108vw, 620px) !important;
        max-width:none !important;
        height:auto;
        margin:0 auto !important;
        transform:none !important;
    }

    .team-message-copy{
        width:100%;
        margin:22px auto 0 !important;
        padding:0 8px 8px !important;
        transform:none !important;
    }

    .rules-link{
        margin:20px auto 0 !important;
    }

    .social-section,
    body:has(#familiarCard.hidden) .social-section{
        width:100%;
        margin:32px auto 0 !important;
        position:relative;
        z-index:5;
    }

    .promotion-section{
        width:100%;
        margin:24px auto 0;
    }
}


/* =========================================================
   INTERMEDIATE RESPONSIVE LAYOUT v2
   Three separate tablet/narrow-desktop ranges:
   641–720, 721–860 and 861–1024 px.
   These rules intentionally keep the community area in normal
   document flow so the illustration, rules button and social
   links cannot overlap.
   ========================================================= */

/* ---------- 641–720 px: compact tablet ---------- */
@media (min-width:641px) and (max-width:720px){
    .community-section{
        width:92vw;
        max-width:680px;
        margin:20px auto 58px !important;
        gap:0;
    }

    .team-message{
        display:flex;
        flex-direction:column;
        align-items:center;
        width:100%;
        gap:0;
    }

    .team-message-image-wrap{
        width:100%;
        min-height:0 !important;
        height:auto;
        margin:0 !important;
        padding:0 !important;
        display:flex;
        justify-content:center;
        align-items:flex-end;
        overflow:visible;
    }

    .team-message-image{
        width:min(84vw,560px) !important;
        max-width:100% !important;
        height:auto;
        margin:0 auto !important;
        transform:none !important;
    }

    .team-message-copy{
        width:100%;
        max-width:650px;
        margin:20px auto 0 !important;
        padding:0 18px 8px !important;
        transform:none !important;
        box-sizing:border-box;
    }

    .community-title{
        font-size:1.45rem;
        margin-bottom:12px;
    }

    .community-text{
        max-width:620px;
        font-size:1.08rem;
        line-height:1.55;
    }

    .rules-link{
        width:min(70vw,330px);
        margin:18px auto 0 !important;
    }

    .social-section,
    body:has(#familiarCard.hidden) .social-section{
        width:100%;
        margin:34px auto 0 !important;
    }

    .social-heading{
        gap:10px;
        margin-bottom:14px;
    }

    .social-divider{
        width:70px;
    }

    .social-links{
        gap:8px;
    }

    .social-links img,
    .promotion-icon-link{
        width:62px;
        height:auto;
    }

    .promotion-icon-link{
        height:62px;
    }
}

/* ---------- 721–860 px: medium tablet ---------- */
@media (min-width:721px) and (max-width:860px){
    .community-section{
        width:92vw;
        max-width:800px;
        margin:22px auto 62px !important;
        gap:0;
    }

    .team-message{
        display:flex;
        flex-direction:column;
        align-items:center;
        width:100%;
        gap:0;
    }

    .team-message-image-wrap{
        width:100%;
        min-height:0 !important;
        height:auto;
        margin:0 !important;
        padding:0 !important;
        display:flex;
        justify-content:center;
        align-items:flex-end;
        overflow:visible;
    }

    .team-message-image{
        width:min(78vw,610px) !important;
        max-width:100% !important;
        height:auto;
        margin:0 auto !important;
        transform:none !important;
    }

    .team-message-copy{
        width:min(94%,740px);
        margin:22px auto 0 !important;
        padding:0 20px 8px !important;
        transform:none !important;
        box-sizing:border-box;
    }

    .community-title{
        font-size:1.52rem;
        margin-bottom:13px;
    }

    .community-text{
        max-width:700px;
        font-size:1.13rem;
        line-height:1.6;
    }

    .rules-link{
        width:min(55vw,350px);
        margin:20px auto 0 !important;
    }

    .social-section,
    body:has(#familiarCard.hidden) .social-section{
        width:100%;
        margin:38px auto 0 !important;
    }

    .social-heading{
        gap:13px;
        margin-bottom:15px;
    }

    .social-divider{
        width:88px;
    }

    .social-links{
        gap:10px;
    }

    .social-links img,
    .promotion-icon-link{
        width:66px;
        height:auto;
    }

    .promotion-icon-link{
        height:66px;
    }
}

/* ---------- 861–1024 px: wide tablet / small laptop ---------- */
@media (min-width:861px) and (max-width:1024px){
    .community-section{
        width:94vw;
        max-width:960px;
        margin:24px auto 68px !important;
        gap:0;
    }

    .team-message{
        display:grid;
        grid-template-columns:minmax(0,1fr) minmax(320px,0.82fr);
        align-items:center;
        width:100%;
        gap:10px;
    }

    .team-message-image-wrap{
        width:100%;
        min-height:390px !important;
        height:auto;
        margin:0 !important;
        padding:0 !important;
        display:flex;
        justify-content:center;
        align-items:flex-end;
        overflow:visible;
    }

    .team-message-image{
        width:112% !important;
        max-width:620px !important;
        height:auto;
        margin:0 auto !important;
        transform:none !important;
    }

    .team-message-copy{
        width:100%;
        margin:0 !important;
        padding:0 18px 20px 0 !important;
        transform:none !important;
        box-sizing:border-box;
    }

    .community-title{
        font-size:1.48rem;
        margin-bottom:13px;
    }

    .community-text{
        max-width:500px;
        font-size:1.08rem;
        line-height:1.58;
    }

    .rules-link{
        width:min(36vw,320px);
        margin:20px auto 0 !important;
    }

    .social-section,
    body:has(#familiarCard.hidden) .social-section{
        width:100%;
        margin:34px auto 0 !important;
    }

    .social-heading{
        gap:15px;
        margin-bottom:15px;
    }

    .social-divider{
        width:100px;
    }

    .social-links{
        gap:12px;
    }

    .social-links img,
    .promotion-icon-link{
        width:70px;
        height:auto;
    }

    .promotion-icon-link{
        height:70px;
    }
}

/* 721–860 px: reduce space between contest rules and social links.
   Keep both sections in document flow to avoid overlaps. */
@media (min-width:721px) and (max-width:860px){
    .community-section,
    body:has(#familiarCard.hidden) .community-section{
        margin-bottom:12px !important;
    }
    .social-section,
    body:has(#familiarCard.hidden) .social-section{
        margin-top:12px !important;
    }
}

/* =========================================================
   v11 — restore the v3 girl positioning, keep v9 social gap
   The illustration stays in normal flow; only the wrappers are
   flattened so the rules button and social block remain adjacent.
   ========================================================= */
@media (max-width:1024px){
    .community-section{
        display:flex !important;
        flex-direction:column !important;
        align-items:center !important;
        gap:0 !important;
        position:relative;
    }

    /* Keep the girl's wrapper and image in normal document flow.
       Do NOT absolutely position the image. */
    .team-message,
    .team-message-copy{
        display:contents !important;
    }

    .team-message-image-wrap{
        order:0;
        width:100% !important;
        min-height:0 !important;
        height:auto !important;
        margin:0 !important;
        padding:0 !important;
        position:relative !important;
        z-index:1;
        display:flex !important;
        justify-content:center;
        align-items:flex-end;
        overflow:visible !important;
    }

    .team-message-image{
        position:relative !important;
        left:auto !important;
        bottom:auto !important;
        display:block !important;
        width:auto;
        height:auto;
        margin:0 auto !important;
        max-width:100% !important;
        transform:none !important;
        z-index:1;
        pointer-events:none;
    }

    .team-message-copy > .community-title{
        order:1;
        position:relative;
        z-index:3;
        width:min(94vw,900px);
        margin:0 auto 12px !important;
        box-sizing:border-box;
    }

    .team-message-copy > .community-text{
        order:2;
        position:relative;
        z-index:3;
        width:min(94vw,700px);
        margin:0 auto 8px !important;
        box-sizing:border-box;
    }

    .team-message-copy > .rules-link{
        order:3;
        position:relative;
        z-index:6;
        margin:14px auto 0 !important;
    }

    /* Same fixed gap as v9: rules button -> social block = 14px. */
    .social-section,
    body:has(#familiarCard.hidden) .social-section{
        order:4;
        position:relative !important;
        z-index:7;
        width:100% !important;
        margin:14px auto 0 !important;
        padding:0 !important;
        transform:none !important;
        box-sizing:border-box;
    }

    .social-heading{
        margin:0 auto 12px !important;
    }

    .social-links{
        margin:0 auto !important;
    }

    .promotion-section{
        order:5;
        position:relative;
        z-index:3;
        margin-top:22px !important;
    }
}

/* Keep v3's illustration sizing/placement per each range. */
@media (max-width:640px){
    .team-message-image{
        width:min(108vw,620px) !important;
        max-width:none !important;
    }
}

@media (min-width:641px) and (max-width:720px){
    .team-message-image{
        width:min(84vw,560px) !important;
        max-width:100% !important;
    }
}

@media (min-width:721px) and (max-width:860px){
    .team-message-image{
        width:min(78vw,610px) !important;
        max-width:100% !important;
    }
}

@media (min-width:861px) and (max-width:1024px){
    .team-message-image{
        width:112% !important;
        max-width:620px !important;
    }
}

/* =========================================================
   FIREFOX-ONLY DESKTOP FIX
   Keep every other browser exactly as in v11.
   Firefox is detected through its Gecko-only :-moz-any() selector.
   ========================================================= */
@supports selector(:-moz-any(*)) {
    @media (min-width:1025px){
        .social-section,
        body:has(#familiarCard.hidden) .social-section{
            margin-top:-145px !important;
            position:relative;
            z-index:5;
        }

        .social-heading{
            position:relative;
            z-index:6;
            margin-bottom:18px;
        }
    }
}