* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
html, body {
  width: 100%;
  margin: 0;
  overflow-x: hidden;
}
.btntir {
  display: inline-flex !important;
  justify-content: center;
  align-items: center;
}
.ORTIR-container {
  padding: 0 !important;
}
.ORACLES-TIRAGES {
    width: 100% !important;
    
}
.intro-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}

#tir33_welcome {
    position: relative;
    z-index: 20;

    width: 100%;

    display: flex;
    align-items: center;
    justify-content: center;

    padding: 0px;

    opacity: 1;
    visibility: visible;
    transform: translateY(0);

    transition:
        opacity .7s ease,
        transform .7s ease;
}

#tir33_welcome.tir33_welcome_hidden {
    opacity: 0;
    transform: translateY(-20px);
    pointer-events: none;
}

#tir33_app.tir33_app_visible {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;

    transition:
        opacity 800ms ease,
        visibility 0s linear 0s;
}	
	
.tir33IntroImage {
    display: block;
    width: 95%;
    max-width: 650px;
    height: auto;
    max-height: 400px;
    margin: 0 auto;
    object-fit: cover;
    border: 1px solid #d8b247;
    border-radius: 12px;
}

.intro33-subtitle {
  max-width: 470px;
  margin: 28px auto 42px;
  font-size: 15px;
  line-height: 1.75; 
}	

#tir33_app {
    position: relative;
    overflow: visible;
    width: 100%;
    max-width: none;

    display: none;
}

#tir33_app.tir33_app_visible {
    display: block;

    animation: tir33_app_fade .8s ease forwards;
}

@keyframes tir33_app_fade {

    from {
        opacity: 0;
        transform: translateY(15px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }

}

.tir33_ambient {

    position: fixed;
    inset: 0;

    pointer-events: none;

    z-index: 0;
}

.tir33_ambient::before {

    content: "";

    position: absolute;

    width: min(900px, 120vw);
    height: min(900px, 120vw);

    left: 50%;
    top: 42%;

    transform: translate(-50%, -50%);

    border-radius: 50%;
   
}

.tir33_ambient::after {

    content: "";

    position: absolute;
    inset: 0;

  
}

#tir33_screen {

    position: relative;
    z-index: 2;



    display: flex;
    flex-direction: column;
    align-items: center;

    padding:
0px;
}

#tir33_intro {

    width: min(720px, 100%);

    text-align: center;   

    transition:
        opacity .8s ease,
        transform .8s ease;
}

#tir33_intro.tir33_intro_hidden {

    opacity: 0;

    transform:
        translateY(-20px)
        scale(.97);

    pointer-events: none;
}

#tir33_title {

    font-size:
        clamp(26px, 4vw, 42px);

    font-weight: normal;

    letter-spacing:
        clamp(.10em, 1vw, .20em);

    text-transform: uppercase;

    color: #e5dcc8;

    margin-bottom: 20px;
}

#tir33_subtitle {

    font-size:
        clamp(14px, 1.7vw, 18px);

    line-height: 1.8;
 margin: 0px <strong>impo</strong>rtant;
    color:
        rgba(238,233,220,.66);
}
#tir33_subtitle p { margin-bottom: 0px!important;}

#tir33_oracle {

    position: relative;

    width: min(900px, 100%);

    display: flex;
    flex-direction: column;
    align-items: center;
}

#tir33_circle {

    position: absolute;

    width:
        min(500px, 80vw);

    aspect-ratio: 1;

    top: 20px;

    border-radius: 50%;

    border:
        1px solid
        rgba(214,184,106,.15);

    box-shadow:

        0 0 50px
        rgba(203,170,87,.04),

        inset 0 0 50px
        rgba(203,170,87,.025);

    transform:
        rotateX(70deg);

    transition:
        opacity .8s ease,
        transform 1.2s ease;
}

#tir33_circle::before {

    content: "";

    position: absolute;

    inset: 35px;

    border-radius: 50%;

    border:
        1px solid
        rgba(214,184,106,.08);
}

#tir33_circle::after {

    content: "";

    position: absolute;

    inset: 80px;

    border-radius: 50%;

    border:
        1px solid
        rgba(214,184,106,.05);
}

#tir33_circle.tir33_circle_active {

    animation:
        tir33_circle_pulse
        2.5s
        ease-in-out
        infinite;
}

@keyframes tir33_circle_pulse {

    0%,
    100% {

        opacity: .45;

        transform:
            rotateX(70deg)
            scale(.96);
    }

    50% {

        opacity: 1;

        transform:
            rotateX(70deg)
            scale(1.04);
    }
}

#tir33_dice_area {

    position: relative;

    z-index: 2;

    width: 100%;

    min-height:
        clamp(230px, 35vh, 330px);

    display: flex;

    justify-content: center;

    align-items: center;

    gap:
        clamp(35px, 9vw, 100px);

    perspective: 900px;
}

.tir33_die {

    position: relative;

    width:
        clamp(90px, 13vw, 125px);

    aspect-ratio: 1;

    transform-style: preserve-3d;

    transition:
        transform 1.8s
        cubic-bezier(.15,.75,.2,1);
}

.tir33_die_surface {

    position: absolute;

    inset: 0;

    border-radius: 20px;

    background:
        linear-gradient(
            145deg,
            #eee8d8 0%,
            #cfc6b0 42%,
            #9c927d 100%
        );

    border:
        1px solid
        rgba(255,255,255,.42);

    box-shadow:

        inset
        5px
        5px
        15px
        rgba(255,255,255,.24),

        inset
        -7px
        -7px
        18px
        rgba(0,0,0,.25),

        0
        22px
        40px
        rgba(0,0,0,.45);

    backface-visibility: hidden;
}

.tir33_face_front {
    transform:
        translateZ(
            calc(clamp(90px,13vw,125px) / 2)
        );
}

.tir33_face_back {
    transform:
        rotateY(180deg)
        translateZ(
            calc(clamp(90px,13vw,125px) / 2)
        );
}

.tir33_face_right {
    transform:
        rotateY(90deg)
        translateZ(
            calc(clamp(90px,13vw,125px) / 2)
        );
}

.tir33_face_left {
    transform:
        rotateY(-90deg)
        translateZ(
            calc(clamp(90px,13vw,125px) / 2)
        );
}

.tir33_face_top {
    transform:
        rotateX(90deg)
        translateZ(
            calc(clamp(90px,13vw,125px) / 2)
        );
}

.tir33_face_bottom {
    transform:
        rotateX(-90deg)
        translateZ(
            calc(clamp(90px,13vw,125px) / 2)
        );
}

.tir33_die_syllable {

    position: absolute;

    inset: 0;

    display: flex;

    align-items: center;
    justify-content: center;

    color: #27251f;

    font-size:
        clamp(24px, 4vw, 38px);

    letter-spacing: .08em;

    text-shadow:
        1px 1px 1px
        rgba(255,255,255,.35);
}

.tir33_die::after {

    content: "";

    position: absolute;

    inset: -12px;

    border-radius: 28px;

    background:
        radial-gradient(
            circle,
            rgba(214,181,100,.22),
            transparent 70%
        );

    opacity: 0;

    filter: blur(8px);

    pointer-events: none;

    transition:
        opacity .8s ease;
}

.tir33_die.tir33_die_revealed::after {

    opacity: 1;
}

#tir33_status {

    position: relative;

    z-index: 3;

    margin-top: 5px;

    min-height: 25px;

    text-align: center;

    font-size: 12px;

    letter-spacing: .18em;

    text-transform: uppercase;

    color:
        rgba(238,233,220,.38);

    transition:
        opacity .5s ease;
}

.tir33_button_hidden {
    opacity: 0 !important;
    visibility: hidden;
    pointer-events: none;
    transform: translateY(10px);
}

#tir33_roll_button {

    position: relative;

    z-index: 5;

    margin-top: 35px;

    min-width: 230px;

    padding: 16px 30px;

    border:
        1px solid
        rgba(211,178,99,.45);

    border-radius: 100px;

    background:
        linear-gradient(
            180deg,
            rgba(211,178,99,.10),
            rgba(211,178,99,.025)
        );

    color: #e1d6bd;

    font-family: inherit;

    font-size: 14px;

    letter-spacing: .18em;

    text-transform: uppercase;

    cursor: pointer;

    transition:
        background .3s ease,
        border-color .3s ease,
        transform .3s ease,
        opacity .4s ease;
}

#tir33_roll_button:hover {

    background:
        rgba(211,178,99,.15);

    border-color:
        rgba(211,178,99,.75);

    transform:
        translateY(-2px);
}

#tir33_roll_button:active {

    transform:
        translateY(1px);
}

#tir33_roll_button:disabled {

    opacity: .35;

    cursor: default;

    transform: none;
}

#tir33_result {

    position: absolute;

    z-index: 10;

    width: min(850px, 94%);  

    left: 50%;
    top: 0px;                

    transform:
        translate(-50%, 30px)
        scale(.97);

    padding: 10px;

    border: 1px solid
        rgba(213,181,105,.25);

    border-radius: 22px;

    background:
        rgba(20, 18, 14, .55);

    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);

    box-shadow:
        0 25px 80px
        rgba(0,0,0,.45),

        inset 0 1px 0
        rgba(255,255,255,.05);

    text-align: center;

    opacity: 0;

    visibility: hidden;

    pointer-events: none;

    transition:
        opacity .8s ease,
        transform .9s cubic-bezier(.2,.8,.2,1),
        visibility 0s linear .9s;
}


#tir33_result.tir33_result_visible {

    opacity: 1;

    visibility: visible;

    transform:
        translate(-50%, 0)
        scale(1);

    pointer-events: auto;

    transition:
        opacity .8s ease,
        transform .9s cubic-bezier(.2,.8,.2,1),
        visibility 0s linear 0s;
}

#tir33_result_code {

    font-size: 24x;

    letter-spacing: .30em;

    text-transform: uppercase;

    color:
        rgba(226,210,173,.40);

    margin-bottom: 15px;
}

#tir33_result_name {

    font-size:
        clamp(27px, 4vw, 42px);

    line-height: 1.25;

    font-weight: normal;

    color: #e8ddc5;

    margin-bottom: 28px;

    text-shadow:
        0 0 35px
        rgba(211,176,91,.12);
}

#tir33_result_separator {

    width: 55px;

    height: 1px;

    margin:
        0 auto
        28px;

    background:
        rgba(211,178,99,.30);
}

.tir33_result_block {


    margin-bottom: 15px;
}

.tir33_result_block:last-child {

    margin-bottom: 0;
}

.tir33_result_heading {

    margin-bottom: 8px;

    font-size: 11px;

    letter-spacing: .24em;

    text-transform: uppercase;

    color:
        rgba(224,207,170,.43);
}

.tir33_result_text {

    font-size:
        clamp(15px, 1.8vw, 18px);
	
margin-bottom: 5px!important;
	
    line-height: 1.75;

    color:
        rgba(239,234,220,.78);
}

#tir33_result_tendency{display:inline-flex;margin-top:4px;padding:9px 17px;border:1px solid #d6b86a38;border-radius:100px;color:#e5d6b5aa;font:10px Arial,sans-serif;letter-spacing:.17em;text-transform:uppercase}
#tir33_result_keyword{display:block;margin-top:14px;color:#d7bd7e;font-size:14px;letter-spacing:.08em}

@media (max-width: 780px) {


	.intro-content {
        padding-bottom: 80px !important;
    }

   }

@media (max-width: 600px) {

    #tir33_screen {

        padding:
            35px
            14px
            45px;
    }

    #tir33_intro {

        margin-bottom: 20px;
    }

    #tir33_dice_area {

        min-height: 240px;

        gap: 28px;
    }

    #tir33_circle {

        width: 270px;
    }

    #tir33_result {

        margin-top: 0px;

        border-radius: 17px;
    }

    #tir33_roll_button {

        margin-top: 22px;

        min-width: 205px;

        padding:
            14px 23px;
    }

    #tir33_oracle {
        padding-bottom: 200px !important;
    }
	
    .tir33_result_text {

        line-height: 1.65;
    }
	
	.intro-content {
        padding-bottom: 80px !important;
    }
}

@media (max-width: 380px) {

    #tir33_dice_area {

        gap: 20px;
    }

    #tir33_circle {

        width: 220px;
    }

    #tir33_result {

        padding: 24px 19px;
    }
}

@media (prefers-reduced-motion: reduce) {

    *,
    *::before,
    *::after {

        animation-duration: .01ms !important;

        animation-iteration-count: 1 !important;

        transition-duration: .01ms !important;
    }
}