:root{--tir23-bg1:#090b14;--tir23-bg2:#12172b;--tir23-gold:#d7bf7c;--tir23-gold2:#f0ddb0;--tir23-white:#f5f5f5;--tir23-text:#d6d6d6;--tir23-radius:24px;--tir23-transition:.4s ease;--tir23-max:900px;}
*{margin:0;padding:0;box-sizing:border-box;}

.tir23Background{position:fixed;inset:0;pointer-events:none;overflow:hidden;z-index:-1;}
.tir23Glow{position:absolute;width:700px;height:700px;left:50%;top:15%;transform:translateX(-50%);background:radial-gradient(circle,rgba(183,152,86,.12),transparent 70%);filter:blur(60px);}
.tir23Stars{position:absolute;inset:0;background-image:radial-gradient(#ffffff88 1px,transparent 1px),radial-gradient(#d9c18a55 1px,transparent 1px);background-size:160px 160px,220px 220px;background-position:0 0,60px 80px;opacity:.35;}
.tir23Fog{position:absolute;inset:-20%;background:radial-gradient(circle at 20% 30%,rgba(255,255,255,.04),transparent 40%),radial-gradient(circle at 80% 70%,rgba(255,255,255,.03),transparent 40%);filter:blur(80px);animation:tir23FogMove 35s linear infinite alternate;}

@keyframes tir23FogMove{
from{transform:translateX(-3%);}
to{transform:translateX(3%);}
}

.tir23-section{width:100%;min-height:auto;display:flex;justify-content:center;align-items:center;padding:0px;}
.tir23-container{width:min(100%,var(--tir23-max));min-height:auto;text-align:center;position:relative;}
.tir23-title{font-size:clamp(2rem,4vw,3.5rem);font-weight:300;letter-spacing:3px;color:var(--tir23-gold2);margin-bottom:30px;text-shadow:0 0 20px rgba(240,221,176,.2);}
.btntir{display:inline-flex!important;align-items:center;justify-content:center;}
#tir23CrystalArea{display:none;opacity:0;transition:opacity 1s ease;}
#tir23CrystalArea.tir23Show{display:flex;opacity:1;}

.tir23IntroScreen{display:flex;flex-direction:column;align-items:center;animation:tir23IntroAppear 1.5s ease;}

.tir23IntroImage{display:block;   width: 100%;   max-width: 400px;  height: auto;border-radius:12px;border:2px solid #d8b247;margin:0 auto 15px;filter:drop-shadow(0 0 30px rgba(230,200,120,.5));}

.tir23IntroText{font-size:1.15rem;line-height:1.8;color:#ddd;margin-bottom:15px;}

.tir23StartButton{}

.tir23IntroScreen.tir23Exit{opacity:0;transform:scale(.9);pointer-events:none;transition:1s;}

@keyframes tir23IntroAppear{
from{opacity:0;transform:translateY(30px);}
to{opacity:1;transform:translateY(0);}
}

.tir23Intro{max-width:650px;margin:auto auto 40px;}
.tir23Intro p{font-size:clamp(1rem,2vw,1.2rem);line-height:1.8;}
.tir23IntroL1{font-size:clamp(1.25rem,2.5vw,1.7rem);color:#fff;margin-bottom:12px;}
.tir23IntroL2{color:#d8d8d8;margin-bottom:6px;}
.tir23IntroL3{color:#b9b9b9;}

.tir23-crystal-area{display:none;justify-content:center;align-items:center;width:100%;max-width:100%;min-width:0;margin:30px auto 40px;min-height:360px;}
.tir23-crystal-area.tir23Show{display:flex;}

.tir23Result{margin-top:15px;opacity:0;visibility:hidden;transition:.8s;}
.tir23SymbolName{font-size:clamp(1.8rem,3vw,2.6rem);color:var(--tir23-gold2);margin-bottom:20px;letter-spacing:2px;}
.tir23SymbolMeaning{max-width:700px;margin:auto;font-size:1.1rem;line-height:1.9;color:#ddd;}

.tir23Visible{opacity:1!important;visibility:visible!important;}
.tir23Hidden{display:none!important;}

@media(max-width:768px){
#tir23StartButton {margin-bottom:40px !important;}
.tir23-section{padding:20px;}
.tir23-container{width:100%;max-width:100%;min-width:0;overflow:hidden;}
.tir23-crystal-area,#tir23CrystalArea{width:100%;max-width:100%;min-width:0;}
.tir23-crystal-area{min-height:300px;margin:20px auto 30px;}
.tir23SymbolMeaning{font-size:1rem;line-height:1.8;}
img{max-width:100%;height:auto;}
}

@media(max-width:480px){
.tir23-title{letter-spacing:1px;}
.tir23Intro p{line-height:1.6;}
}

.tir23-crystal{position:relative;width:clamp(230px,34vw,340px);height:clamp(230px,34vw,340px);display:flex;justify-content:center;align-items:center;animation:tir23crystalFloat 8s ease-in-out infinite;}
.tir23-crystal.tir23Invoke{animation:tir23crystalFloat 2.5s ease-in-out infinite;}

.tir23Halo{position:absolute;width:115%;height:115%;border-radius:50%;background:radial-gradient(circle,rgba(255,245,210,.18) 0%,rgba(214,180,95,.12) 35%,transparent 72%);filter:blur(18px);animation:tir23HaloPulse 6s ease-in-out infinite;z-index:1;}
.tir23-crystal.tir23Invoke .tir23Halo{animation-duration:1.5s;}

.tir23Glass{position:absolute;inset:0;border-radius:50%;background:radial-gradient(circle at 30% 28%,rgba(255,255,255,.45),rgba(255,255,255,.12) 22%,rgba(255,255,255,.04) 45%,rgba(70,90,150,.10) 100%);border:2px solid rgba(255,255,255,.18);box-shadow:inset 0 0 40px rgba(255,255,255,.15),inset 0 -20px 50px rgba(80,120,220,.08),0 0 40px rgba(190,170,110,.18),0 0 80px rgba(90,120,255,.08);backdrop-filter:blur(5px);overflow:hidden;z-index:5;}

.tir23Reflection{position:absolute;border-radius:50%;pointer-events:none;z-index:30;}

.tir23Reflection1{width:70px;height:140px;left:18%;top:11%;background:linear-gradient(to bottom,rgba(255,255,255,.60),rgba(255,255,255,0));filter:blur(6px);opacity:.7;transform:rotate(-18deg);animation:tir23ReflectionMove1 9s ease-in-out infinite;}

.tir23Reflection2{width:36px;height:70px;right:23%;top:24%;background:linear-gradient(to bottom,rgba(255,255,255,.38),rgba(255,255,255,0));filter:blur(5px);opacity:.55;animation:tir23ReflectionMove2 7s ease-in-out infinite;}

.tir23Mist{position:absolute;inset:0;width:100%;height:100%;border-radius:50%;overflow:hidden;pointer-events:none;z-index:10;background:radial-gradient(circle at 50% 50%,rgba(255,255,255,.18),rgba(180,200,255,.08) 45%,rgba(80,100,160,.15) 75%,rgba(20,30,60,.35) 100%);filter:blur(8px);opacity:.85;animation:tir23MistMove 12s ease-in-out infinite alternate;}

.tir23Mist span{position:absolute;border-radius:50%;background:rgba(255,255,255,.09);transition:background 1.5s ease,box-shadow 1.5s ease;filter:blur(18px);mix-blend-mode:screen;animation:tir23MistMove linear infinite;}

.tir23-crystal.tir23Invoke .tir23Mist span{animation-duration:5s;}

.tir23Mist span:nth-child(1){width:120px;height:70px;left:-10%;top:15%;animation-duration:14s;}
.tir23Mist span:nth-child(2){width:140px;height:80px;right:-15%;top:42%;animation-duration:18s;animation-direction:reverse;}
.tir23Mist span:nth-child(3){width:90px;height:90px;left:35%;bottom:-12%;animation-duration:12s;}
.tir23Mist span:nth-child(4){width:110px;height:60px;left:28%;top:12%;animation-duration:17s;}
.tir23Mist span:nth-child(5){width:100px;height:75px;right:5%;bottom:18%;animation-duration:16s;}

.tir23Mist::before{content:"";position:absolute;inset:-40%;background:radial-gradient(circle,rgba(255,255,255,.35),transparent 45%);animation:tir23MistCloud 8s linear infinite;}

.tir23Mist::after{content:"";position:absolute;inset:0;border-radius:50%;background:radial-gradient(circle,transparent 45%,rgba(255,255,255,.18) 75%,rgba(255,220,160,.35) 100%);}

.tir23Particles{position:absolute;inset:0;border-radius:50%;overflow:hidden;z-index:20;}

.tir23Particles span{position:absolute;width:4px;height:4px;background:#fff8dc;border-radius:50%;box-shadow:0 0 10px #fff,0 0 18px #f6d783;animation:tir23Particle 6s linear infinite;}

.tir23-crystal.tir23Invoke .tir23Particles span{animation-duration:2s;}

.tir23Particles span:nth-child(1){top:75%;left:25%;animation-delay:0s;}
.tir23Particles span:nth-child(2){top:82%;left:65%;animation-delay:1s;}
.tir23Particles span:nth-child(3){top:68%;left:48%;animation-delay:2s;}
.tir23Particles span:nth-child(4){top:85%;left:40%;animation-delay:3s;}
.tir23Particles span:nth-child(5){top:73%;left:75%;animation-delay:4s;}
.tir23Particles span:nth-child(6){top:90%;left:55%;animation-delay:5s;}
.tir23Particles span:nth-child(7){top:80%;left:18%;animation-delay:2.8s;}
.tir23Particles span:nth-child(8){top:88%;left:82%;animation-delay:1.8s;}

.tir23SymbolContainer{position:absolute;inset:0;display:flex;justify-content:center;align-items:center;z-index:3;pointer-events:none;}

.tir23SymbolImage{width:140px;height:auto;opacity:0;transform:scale(.65);filter:blur(18px) drop-shadow(0 0 12px rgba(255,235,180,.5)) drop-shadow(0 0 28px rgba(255,215,120,.35));transition:opacity 1s ease,transform 1s ease,filter 1s ease;image-rendering:auto;}

.tir23SymbolImage.tir23Reveal{opacity:1;transform:scale(1);filter:blur(0) drop-shadow(0 0 25px rgba(255,235,170,.45));}

.tir23crystal.tir23Fade .tir23Glass{opacity:0;transform:scale(1.08);transition:1.2s;}
.tir23crystal.tir23Fade .tir23Reflection{opacity:0;transition:1s;}
.tir23crystal.tir23Fade .tir23Mist{opacity:0;transition:1.2s;}
.tir23crystal.tir23Fade .tir23Particles{opacity:0;transition:1s;}
.tir23crystal.tir23Fade .tir23Halo{opacity:.15;filter:blur(45px);transition:1.2s;}

@keyframes tir23crystalFloat{
0%,100%{transform:translateY(0) scale(1);}
50%{transform:translateY(-10px) scale(1.02);}
}

@keyframes tir23HaloPulse{
0%,100%{transform:scale(1);opacity:.6;}
50%{transform:scale(1.08);opacity:1;}
}

@keyframes tir23ReflectionMove1{
0%,100%{transform:translateX(0) rotate(-18deg);}
50%{transform:translateX(8px) rotate(-12deg);}
}

@keyframes tir23ReflectionMove2{
0%,100%{transform:translateY(0);}
50%{transform:translateY(-8px);}
}

@keyframes tir23MistMove{
0%{transform:translate(0,0) rotate(0deg);}
50%{transform:translate(12px,-10px) rotate(180deg);}
100%{transform:translate(-10px,8px) rotate(360deg);}
}

@keyframes tir23MistCloud{
0%{transform:translate(-20%,-10%) rotate(0deg);}
50%{transform:translate(15%,10%) rotate(180deg);}
100%{transform:translate(-20%,-10%) rotate(360deg);}
}

@keyframes tir23Particle{
0%{transform:translateY(0) scale(.4);opacity:0;}
15%{opacity:1;}
100%{transform:translateY(-180px) scale(1);opacity:0;}
}

.tir23-crystal.tir23Searching .tir23Mist span{background:rgba(255,60,40,.22);box-shadow:0 0 20px rgba(255,50,30,.35),0 0 50px rgba(255,0,0,.25);}
.tir23-crystal.tir23Searching .tir23Mist{filter:blur(12px) saturate(1.8);}
.tir23-crystal.tir23RevealGlow .tir23Mist span{background:rgba(255,210,90,.25);box-shadow:0 0 20px rgba(255,220,120,.45),0 0 50px rgba(255,180,60,.35);}

.tir23Flash{position:absolute;inset:-20%;border-radius:50%;background:radial-gradient(circle,rgba(255,255,220,.95),rgba(255,220,130,.5) 25%,transparent 70%);opacity:0;transform:scale(.2);pointer-events:none;z-index:25;}
.tir23Flash.tir23FlashActive{animation:tir23FlashReveal .9s ease-out;}

@keyframes tir23FlashReveal{
0%{opacity:0;transform:scale(.2);}
20%{opacity:1;transform:scale(.8);}
50%{opacity:.9;transform:scale(1.2);}
100%{opacity:0;transform:scale(1.5);}
}

.tir23Result{position:relative;width:min(680px,90vw);margin:70px auto 40px;padding:45px 40px;border-radius:32px;background:linear-gradient(145deg,rgba(255,255,255,.12),rgba(255,255,255,.035));border:1px solid rgba(220,190,120,.35);box-shadow:0 30px 80px rgba(0,0,0,.55),inset 0 0 40px rgba(255,255,255,.05);backdrop-filter:blur(15px);overflow:hidden;opacity:0;visibility:hidden;transition:opacity .8s ease,transform .8s ease;}

.tir23Result.tir23Visible{opacity:1;visibility:visible;transform:translateY(0) scale(1);}

.tir23ResultGlow{position:absolute;inset:-50%;background:radial-gradient(circle,rgba(255,220,150,.25),transparent 55%);animation:tir23GlowRotate 15s linear infinite;pointer-events:none;}
@keyframes tir23GlowRotate{from{transform:rotate(0deg);}to{transform:rotate(360deg);}}

.tir23SymbolTop{display:block;text-align:center;font-size:.85rem;letter-spacing:5px;color:#d9bd7a;opacity:.85;margin-bottom:20px;}

#tir23SymbolName{position:relative;text-align:center;margin:0;font-size:clamp(1.6rem,5vw,3rem);font-weight:600;letter-spacing:4px;text-transform:uppercase;color:#f5dfaa;text-shadow:0 0 20px rgba(255,220,140,.45);}

.tir23Separator{text-align:center;margin:20px 0;font-size:1.4rem;letter-spacing:12px;color:#d9bd7a;}

.tir23DefinitionBox{position:relative;padding:25px 10px;text-align:center;}
#tir23SymbolMeaning{font-size:1.15rem;line-height:1.9;color:rgba(255,255,255,.88);margin:0;}

.tir23MessageBox{margin-top:35px;padding:25px;border-radius:20px;background:rgba(255,220,150,.07);border-left:3px solid #d9bd7a;text-align:center;}
.tir23MessageBox span{display:block;font-size:.75rem;letter-spacing:4px;text-transform:uppercase;color:#d9bd7a;margin-bottom:15px;}
#tir23SymbolMessage{font-size:1.1rem;font-style:italic;color:#f1dca5;margin:0;}

@media(max-width:768px){
.tir23Result{width:100%;max-width:100%;padding:25px 20px;margin:40px auto 30px;}
.tir23SymbolTop{margin-bottom:10px;}
#tir23SymbolName{font-size:clamp(1.5rem,5vw,2.3rem);letter-spacing:2px;}
.tir23Separator{margin:12px 0;font-size:1.1rem;letter-spacing:8px;}
.tir23DefinitionBox{padding:10px;}
#tir23SymbolMeaning{font-size:1rem;line-height:1.6;}
.tir23MessageBox{margin-top:20px;padding:15px;}
.tir23ResultGlow{display:none;}
}

.tir23crystalStand{position:relative;width:min(430px,90vw);margin:0 auto 70px;display:flex;justify-content:center;align-items:center;flex-direction:column;}

.tir23crystalStand::before{content:"";position:absolute;bottom:5px;width:300px;height:70px;background:radial-gradient(ellipse,rgba(231,190,95,.55),transparent 70%);filter:blur(18px);animation:tir23StandLight 5s ease-in-out infinite;z-index:-2;}

@keyframes tir23StandLight{0%,100%{opacity:.45;transform:scale(.85);}50%{opacity:1;transform:scale(1.1);}}

.tir23Stand{position:relative;margin:-38px auto 0;width:270px;height:85px;border-radius:50% 50% 35% 35%;background:linear-gradient(180deg,#e2c477 0%,#b78a3b 35%,#704719 75%,#39240d 100%);box-shadow:0 25px 45px rgba(0,0,0,.65),inset 0 8px 12px rgba(255,255,255,.35),inset 0 -15px 25px rgba(0,0,0,.45);z-index:0;}
.tir23Stand::after{content:"";position:absolute;left:15%;right:15%;bottom:12px;height:12px;border-radius:50%;background:rgba(255,220,130,.25);filter:blur(5px);}

.tir23StandRing{position:absolute;top:-25px;left:50%;transform:translateX(-50%);width:310px;height:75px;border-radius:50%;border:7px solid #d9b45e;background:radial-gradient(ellipse,transparent 45%,rgba(255,220,140,.35));box-shadow:0 0 25px rgba(230,190,100,.65),inset 0 5px 10px rgba(255,255,255,.45);}
.tir23StandRing::before{content:"";position:absolute;top:8px;left:20%;width:60%;height:8px;border-radius:50%;background:rgba(255,255,255,.45);filter:blur(3px);}

.tir23Runes{position:absolute;bottom:6px;left:0;right:0;text-align:center;font-size:18px;letter-spacing:3px;color:rgba(255,230,150,.75);text-shadow:0 0 12px rgba(255,220,120,.6);}

@media(max-width:600px){
.tir23crystalStand{width:100%;max-width:260px;}
.tir23Stand{width:210px;height:65px;}
.tir23StandRing{width:240px;height:60px;border-width:5px;}
.tir23Runes{font-size:14px;letter-spacing:6px;}
}

.btntir{display:inline-flex!important;align-items:center;justify-content:center;}
.tir23IntroScreen{display:flex;flex-direction:column;align-items:center;animation:tir23IntroAppear 1.5s ease;}
.tir23IntroImage{display:block;border-radius:12px;border:2px solid #d8b247;margin:0 auto 30px;filter:drop-shadow(0 0 30px rgba(230,200,120,.5));}
.tir23IntroText{font-size:1rem;line-height:1.2;color:#ddd;margin-bottom:10px;}
.tir23StartButton{padding:15px 45px;border-radius:50px;border:none;cursor:pointer;font-size:1.1rem;font-weight:bold;background:linear-gradient(135deg,#d7bf7c,#f5e5b0);box-shadow:0 0 30px rgba(230,200,120,.4);}
.tir23IntroScreen.tir23Exit{opacity:0;transform:scale(.9);pointer-events:none;transition:1s;}
@keyframes tir23IntroAppear{from{opacity:0;transform:translateY(30px);}to{opacity:1;transform:translateY(0);}}

.tir23Intro{max-width:650px;margin:0 auto 40px;}
.tir23Intro p{line-height:1.8;font-size:clamp(1rem,2vw,1.2rem);}
.tir23IntroL1{font-size:clamp(1.25rem,2.5vw,1.7rem);color:#fff;margin-bottom:12px;}
.tir23IntroL2{color:#d8d8d8;margin-bottom:6px;}
.tir23IntroL3{color:#b9b9b9;}

.tir23-crystal-area{display:flex;justify-content:center;align-items:center;margin:30px auto 40px;min-height:360px;}
#tir23CrystalArea{display:none;opacity:0;transition:opacity 1s ease;}
#tir23CrystalArea.tir23Show{display:flex;opacity:1;}

.tir23Loading{margin-top:15px;font-style:italic;color:#d7bf7c;opacity:0;visibility:hidden;height:0;overflow:hidden;transition:.5s;}
.tir23Loading.tir23Visible{opacity:1;visibility:visible;height:28px;}

.tir23Visible{opacity:1!important;visibility:visible!important;}
.tir23Hidden{display:none!important;}

@media(max-width:768px){
.tir23-section{padding:25px 18px;}
.tir23-container{width:100%;max-width:100%;min-width:0;overflow:hidden;}
.tir23-crystal-area,#tir23CrystalArea{width:100%;max-width:100%;min-width:0;}
.tir23-crystal{width:min(65vw,260px);height:min(65vw,260px);}
.tir23SymbolMeaning{font-size:1rem;line-height:1.7;}
img{max-width:100%;height:auto;}
}

@media(max-width:480px){
.tir23-title{letter-spacing:1px;}
.tir23Intro p{line-height:1.6;}
}

#tir23Button{
display:none;
}
.tir23Result{    position:relative;    width:min(680px,90vw);    margin:70px auto 40px;    padding:45px 40px;    border-radius:32px;    background:linear-gradient(145deg,rgba(255,255,255,.12),rgba(255,255,255,.035));    border:1px solid rgba(220,190,120,.35);    box-shadow:0 30px 80px rgba(0,0,0,.55),inset 0 0 40px rgba(255,255,255,.05);    backdrop-filter:blur(15px);    overflow:hidden;    opacity:0;    visibility:hidden;    transform:translateY(40px) scale(.96);    filter:blur(10px);    transition:        opacity 1.4s ease,        transform 1.4s cubic-bezier(.22,.8,.2,1),        filter 1.4s ease;}

.tir23Result.tir23Visible{    opacity:1;    visibility:visible;    transform:translateY(0) scale(1);    filter:blur(0);}

#tir23SymbolName,#tir23SymbolMeaning,.tir23MessageBox{    opacity:0;    transform:translateY(18px);    filter:blur(8px);    transition:        opacity .9s ease,        transform .9s ease,        filter .9s ease;}

.tir23Result.tir23Visible #tir23SymbolName{    opacity:1;    transform:translateY(0);    filter:blur(0);    transition-delay:.45s;}

.tir23Result.tir23Visible #tir23SymbolMeaning{    opacity:1;    transform:translateY(0);    filter:blur(0);    transition-delay:.85s;}

.tir23Result.tir23Visible .tir23MessageBox{    opacity:1;    transform:translateY(0);    filter:blur(0);    transition-delay:1.25s;}

/* ===== TEST RESPONSIVE MOBILE ===== */
@media (max-width: 768px) {

    .tir23-container{
        width:100%;
        max-width:100%;
        min-width:0;
        overflow:hidden;
    }

    .tir23-crystal-area,
    #tir23CrystalArea{
        width:100%;
        max-width:100%;
        min-width:0;
    }

    .tir23-crystal{
        width:min(65vw,260px) !important;
        height:min(65vw,260px) !important;
    }

    .tir23crystalStand{
        width:100% !important;
        max-width:260px;
    }

    .tir23Stand{
        width:75% !important;
        max-width:200px;
    }

    .tir23StandRing{
        width:90% !important;
        max-width:230px;
    }

    .tir23Result{
        width:100%;
        max-width:100%;
        padding:20px;
    }

    img{
        max-width:100%;
        height:auto;
    }

}