*{
    margin:0;
    padding:0;
    box-sizing:border-box;
}

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

#tir35Container{
    width:100%;
}

#tir35Container *{
    box-sizing:border-box;
}

.tir35Hidden{
    display:none!important;
}

.tir35Visible{
    display:block;
}

.tir35FadeIn{
    animation:tir30FadeIn .6s ease forwards;
}

.tir35FadeOut{
    animation:tir30FadeOut .6s ease forwards;
}

@keyframes tir30FadeIn{
    from{opacity:0;}
    to{opacity:1;}
}

@keyframes tir30FadeOut{
    from{opacity:1;}
    to{opacity:0;}
}

#tir35Intro{
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    gap:25px;
    width:100%;
    text-align:center;
}

#tir35IntroImage{
    width:90%;
    max-width:500px;
    overflow:hidden;
    border:2px solid rgba(214,180,106,.7);
    border-radius:18px;
    box-shadow:0 0 30px rgba(214,180,106,.25),0 15px 40px rgba(0,0,0,.45);
    line-height:0;
}

#tir35IntroImage img{
    display:block;
    width:100%;
    height:auto;
}

#tir35IntroContent{
    max-width:900px;
    margin:auto;
}

#tir35IntroTitre{
    margin:0 0 20px;
    font-size:clamp(2rem,4vw,3rem);
    font-weight:normal;
    color:#f0d88a;
}

#tir35IntroTexte{
    margin:0;
    line-height:1.5;
    font-size:1rem;
}

#tir35BtnStart{
    margin-top:30px;
}

.btntir{
    display:inline-flex!important;
    justify-content:center;
    align-items:center;
}

#tir35Game{
    width:100%;
    max-width:100%;
    overflow:hidden;
    text-align:center;
}

#tir35Selection{
    display:flex;
    justify-content:center;
    align-items:flex-start;
    gap:clamp(5px,1.5vw,20px);
    width:100%;
    margin:0;
}

.tir35Slot{
    flex:0 0 clamp(45px,10vw,82px);
    width:clamp(45px,10vw,82px);
    min-width:0;
    display:flex;
    flex-direction:column;
    align-items:center;
}

.tir35SlotTitle{
    width:100%;
    margin:0 0 5px;
    font-size:clamp(.68rem,1.5vw,1.05rem);
    font-weight:normal;
    color:#f0d88a;
    text-align:center;
    line-height:1.2;
}

.tir35SelectedCard{
    width:100%;
    height:auto;
    aspect-ratio:250/388;
    border:2px dashed rgba(255,255,255,.20);
    display:flex;
    align-items:center;
    justify-content:center;
    background:rgba(255,255,255,.04);
    transition:none;
    overflow:hidden;
    position:relative;
}

.tir35SelectedCard img{
    display:block;
    width:100%;
    height:100%;
    object-fit:contain;
    background:#16130d;
}

#tir35RibbonContainer{
    width:100%;
    overflow:hidden;
    margin:15px auto 25px;
    padding:35px 0 25px;
    display:block;
}

#tir35Ribbon{
    display:grid;
    grid-template-columns:repeat(21,1fr);
    width:100%;
    padding:0;
    row-gap:12px;
}

.tir35RibbonCard{
    position:relative;
    width:100%;
    aspect-ratio:250/388;
    margin-left:0;
    cursor:pointer;
    transition:transform .30s ease,margin-bottom .30s ease,filter .30s ease,opacity .30s ease,box-shadow .30s ease;
    user-select:none;
    z-index:1;
}

.tir35RibbonCard img{
    display:block;
    width:100%;
    height:100%;
    object-fit:contain;
    box-shadow:0 4px 10px rgba(0,0,0,.45);
    pointer-events:none;
}

.tir35RibbonCard:hover{
    transform:translateY(-18px);
    z-index:50;
    box-shadow:0 14px 28px rgba(0,0,0,.45);
}

.tir35RibbonCard.tir35Chosen{
    opacity:0;
    pointer-events:none;
    cursor:default;
    transform:none;
}

.tir35RibbonCard.tir35Chosen img{
    visibility:hidden;
}

#tir35Ribbon.tir35Locked{
    pointer-events:none;
}

#tir35Ribbon.tir35Locked .tir35RibbonCard{
    cursor:default;
    filter:grayscale(.55);
}

#tir35Ribbon.tir35Locked .tir35RibbonCard:hover{
    transform:none;
}

#tir35RibbonContainer.tir35RibbonHide{
    animation:tir30RibbonHide .8s ease forwards;
}

@keyframes tir30RibbonHide{
    0%{
        opacity:1;
        transform:translateY(0);
    }
    60%{opacity:.5;}
    100%{
        opacity:0;
        transform:translateY(20px);
        visibility:hidden;
        height:0;
        margin:0;
        padding:0;
    }
}

#tir35InfoBar{
    display:inline-block;
    width:auto;
    max-width:90%;
    margin:15px;
    padding:14px 18px;
    background:rgba(255,255,255,.05);
    border:1px solid rgba(216,199,155,.25);
    border-radius:8px;
    text-align:center;
}

#tir35InfoText{
    width:100%;
    max-width:100%;
    margin:0;
    overflow-wrap:break-word;
    font-size:1rem;
    line-height:1.5;
    color:#e6d7b2;
    transition:opacity .4s ease;
}

.tir35CardFlip{
    width:100%;
    height:100%;
    perspective:1000px;
}

.tir35CardInner{
    position:relative;
    width:100%;
    height:100%;
    transition:transform .8s;
    transform-style:preserve-3d;
}

.tir35CardFront,
.tir35CardBack{
    position:absolute;
    top:0;
    left:0;
    width:100%;
    height:100%;
    overflow:hidden;
    backface-visibility:hidden;
    -webkit-backface-visibility:hidden;
}

.tir35CardFront img,
.tir35CardBack img{
    display:block;
    width:100%;
    height:100%;
    object-fit:contain;
}

.tir35CardBack{
    transform:rotateY(180deg);
}

.tir35Flipped .tir35CardInner{
    transform:rotateY(180deg);
}

#tir35ReadingContent{
    display:flex;
    align-items:flex-start;
    justify-content:center;
    gap:clamp(25px,5vw,60px);
    width:100%;
    margin-top:30px;
}

#tir35ReadingCard{
    flex:0 0 auto;
    width:clamp(130px,18vw,180px);
    display:flex;
    flex-direction:column;
    align-items:center;
}

#tir35BigCardContainer{
    width:100%;
    padding:0;
    background:radial-gradient(circle,rgba(240,216,138,.35),rgba(240,216,138,0) 70%);
    border:1px solid rgba(216,199,155,.35);
    box-shadow:0 0 35px rgba(214,180,106,.25);
}

#tir35BigCardImage{
    display:block;
    width:100%;
    height:auto;
    box-shadow:0 10px 25px rgba(0,0,0,.55);
}

#tir35ReadingText{
    flex:1;
    max-width:700px;
}

#tir35CardHeader{
    text-align:center;
    margin:0 auto 28px;
    padding:0 15px;
}

#tir35CardNumber{
    font-size:.85rem;
    letter-spacing:.18em;
    text-transform:uppercase;
    opacity:.65;
    margin-bottom:8px;
}

#tir35CardName{
    margin:0;
    font-size:clamp(1.3rem,4vw,2rem);
    line-height:1.2;
    font-weight:600;
    letter-spacing:.04em;
}

#tir35CardOrientation{
    display:inline-block;
    margin-top:12px;
    padding:5px 12px;
    border:1px solid currentColor;
    border-radius:20px;
    font-size:.72rem;
    letter-spacing:.14em;
    text-transform:uppercase;
    opacity:.75;
}

#tir35CardOrientation:empty{
    display:none;
}

#tir35DefinitionBlock,
#tir35AnswerBlock{
    background:rgba(255,255,255,.05);
    border:1px solid rgba(216,199,155,.25);
    border-radius:14px;
    padding:15px;
    box-shadow:0 8px 25px rgba(0,0,0,.25);
}

#tir35AnswerBlock{
    margin-top:15px;
}

.tir35BlockTitle{
    margin:0;
    color:#f0d88a;
    font-size:1.25rem;
    font-weight:normal;
    letter-spacing:1px;
}

#tir35DefinitionText,
#tir35AnswerText{
    line-height:1.5;
    color:#e6d7b2;
    font-size:1rem;
}

.tir35Disabled{
    pointer-events:none;
}

.tir35Invisible{
    visibility:hidden;
}

.tir35Transparent{
    opacity:0;
}

.tir35Opaque{
    opacity:1;
}

@media(max-width:700px){

    #tir35Selection{
        width:100%;
        max-width:100%;
        gap:3px;
        padding:0 4px;
        margin-top:15px;
        overflow:hidden;
    }

    .tir35Slot{
        flex:1 1 0;
        width:auto;
        max-width:60px;
        min-width:0;
    }

    .tir35SelectedCard{
        width:100%;
        max-width:none;
        aspect-ratio:250/388;
    }

    .tir35SlotTitle{
        width:100%;
        font-size:.58rem;
        line-height:1;
        white-space:nowrap;
        letter-spacing:-.02em;
    }

    #tir35RibbonContainer{
        width:100%;
        overflow:hidden;
        padding:25px 0 20px;
    }

    #tir35Ribbon{
        display:grid;
        grid-template-columns:repeat(21,1fr);
        width:100%;
        row-gap:12px;
        padding:0;
    }

    .tir35RibbonCard{
        width:100%;
        margin-left:0;
        aspect-ratio:250/388;
        flex:none;
        cursor:pointer;
    }

    .tir35RibbonCard:hover{
        transform:translateY(-12px);
    }

    #tir35ReadingContent{
        flex-direction:column;
        align-items:center;
        gap:30px;
    }

    #tir35ReadingCard{
        width:180px;
    }

    #tir35ReadingText{
        width:100%;
        max-width:none;
    }

    #tir35DefinitionBlock,
    #tir35AnswerBlock{
        padding:18px;
        margin-bottom:70px;
    }

    #tir35BtnStart{
        margin-bottom:80px!important;
    }

    #tir35InfoBar{
        margin:15px auto 50px!important;
    }
}

@media(max-width:600px){

    #tir35CardHeader{
        margin-bottom:22px;
    }

    #tir35CardNumber{
        font-size:.75rem;
        letter-spacing:.14em;
    }

    #tir35CardName{
        font-size:1.7rem;
    }

    #tir35CardOrientation{
        font-size:.65rem;
        padding:4px 10px;
    }
}

@media(max-width:420px){

    #tir35Selection{
        gap:2px;
        padding:0 3px;
    }

    .tir35Slot{
        max-width:52px;
    }

    .tir35SlotTitle{
        font-size:.52rem;
        line-height:1;
        white-space:nowrap;
        letter-spacing:-.03em;
    }
}

@media(max-width:380px){

    #tir35Selection{
        gap:1px;
        padding:0 2px;
    }

    .tir35Slot{
        max-width:47px;
    }

    .tir35SlotTitle{
        font-size:.48rem;
        line-height:1;
        white-space:nowrap;
        letter-spacing:-.04em;
    }

    #tir35ReadingCard{
        width:140px;
    }
}