:root{
    --stone-900:#120d09;
    --stone-800:#1a1410;
    --stone-700:#2b2118;
    --stone-600:#3d2f22;
    --sandstone:#c9a876;
    --sandstone-lt:#e8c896;
    --gold:#d4af37;
    --gold-bright:#f4d35e;
    --gold-dim:#8a6d24;
    --lapis:#1e3a5f;
    --turquoise:#2e8b7d;
    --torch:#ff8c42;
    --torch-lt:#ffb347;
    --shadow-deep:#07050300;
    --papyrus:#f0e4c8;
    --ease-heavy: cubic-bezier(.22,.61,.16,1);
  }

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

  html{ scroll-behavior:smooth; background:var(--stone-900); }

  body{
    background:var(--stone-900);
    color:var(--papyrus);
    font-family:'Cormorant Garamond', serif;
    overflow-x:hidden;
    width:100%;
  }

  ::selection{ background:var(--gold-dim); color:var(--papyrus); }

  h1,h2,.display{
    font-family:'Cinzel', serif;
    letter-spacing:.04em;
  }

  a, button, input{ font-family:inherit; }

  /* Focus visibility (accessibility floor) */
  a:focus-visible, button:focus-visible, input:focus-visible{
    outline:2px solid var(--gold-bright);
    outline-offset:3px;
    border-radius:4px;
  }

  /* ============================================================
     SHARED — noise / grain filter (cheap stone texture)
  ============================================================ */
  .grain{
    position:absolute; inset:0;
    background:transparent;
    opacity:.05;
    mix-blend-mode:overlay;
    pointer-events:none;
  }

  /* ============================================================
     GLOBAL DUST LAYER
  ============================================================ */
  #dustLayer{
    position:fixed; inset:0;
    pointer-events:none;
    z-index:40;
    overflow:hidden;
  }
  .mote{
    position:absolute;
    bottom:-4%;
    width:3px; height:3px;
    border-radius:50%;
    background:radial-gradient(circle, rgba(244,211,94,.9), rgba(244,211,94,0) 70%);
    opacity:0;
    animation-name: floatUp;
    animation-timing-function: linear;
    animation-iteration-count: infinite;
  }
  @keyframes floatUp{
    0%   { transform:translate(0,0); opacity:0; }
    8%   { opacity:.75; }
    92%  { opacity:.4; }
    100% { transform:translate(var(--drift,20px), -110vh); opacity:0; }
  }

  /* ============================================================
     ENTRANCE SECTION
  ============================================================ */
  .entrance{
    position:relative;
    width:100%;
    min-height:100vh;
    overflow:hidden;
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:flex-end;
    isolation:isolate;
  }

  .sky{
    position:absolute; inset:0;
    background:
      radial-gradient(ellipse 90% 70% at 50% 8%, #f4d9a0 0%, #e8ad5f 22%, #c97a45 42%, #7a4a3a 62%, var(--stone-800) 82%),
      linear-gradient(to bottom, transparent 0%, var(--stone-900) 100%);
    z-index:0;
  }

  .sun-disc{
    position:absolute;
    top:9%; left:50%;
    width:min(22vw, 240px); height:min(22vw,240px);
    transform:translateX(-50%);
    border-radius:50%;
    background:radial-gradient(circle, #fff6da 0%, #ffdf8a 35%, #ffb347 62%, rgba(255,140,66,0) 75%);
    box-shadow:0 0 90px 40px rgba(255,183,71,.35);
    z-index:1;
    animation: sunBreathe 8s ease-in-out infinite;
  }
  @keyframes sunBreathe{
    0%,100%{ opacity:.85; transform:translateX(-50%) scale(1); }
    50%    { opacity:1;   transform:translateX(-50%) scale(1.035); }
  }

  .godrays{
    position:absolute;
    top:-15%; left:50%;
    width:150%; height:120%;
    transform:translateX(-50%);
    background: conic-gradient(from 0deg,
      transparent 0deg, rgba(255,214,150,.22) 4deg, transparent 9deg,
      transparent 26deg, rgba(255,214,150,.16) 31deg, transparent 36deg,
      transparent 52deg, rgba(255,214,150,.2) 56deg, transparent 62deg,
      transparent 80deg, rgba(255,214,150,.14) 85deg, transparent 90deg,
      transparent 108deg, rgba(255,214,150,.18) 113deg, transparent 118deg,
      transparent 300deg, rgba(255,214,150,.12) 306deg, transparent 312deg);
    -webkit-mask-image: radial-gradient(circle at 50% 18%, black 0%, black 30%, transparent 68%);
    mask-image: radial-gradient(circle at 50% 18%, black 0%, black 30%, transparent 68%);
    mix-blend-mode:screen;
    opacity:.55;
    z-index:1;
    animation: rayTurn 120s linear infinite;
    pointer-events:none;
  }
  @keyframes rayTurn{
    to{ transform:translateX(-50%) rotate(360deg); }
  }

  .fog{
    position:absolute;
    left:-15%;
    width:130%; height:34%;
    background:radial-gradient(ellipse at center, rgba(230,200,150,.14) 0%, rgba(230,200,150,0) 70%);
    filter:blur(6px);
    z-index:5;
    pointer-events:none;
  }
  .fog-back{ bottom:14%; opacity:.55; animation: fogDrift 34s ease-in-out infinite; }
  .fog-front{ bottom:0; height:22%; opacity:.8; animation: fogDrift 22s ease-in-out infinite reverse; }
  @keyframes fogDrift{
    0%,100%{ transform:translateX(-3%); }
    50%    { transform:translateX(3%); }
  }

  /* --- Obelisks (far background) --- */
  .obelisk{
    position:absolute;
    bottom:18%;
    width:min(5.5vw,64px);
    height:42%;
    background:linear-gradient(to right, var(--stone-700), var(--sandstone) 45%, var(--stone-700));
    clip-path:polygon(20% 100%, 80% 100%, 100% 8%, 50% 0%, 0% 8%);
    z-index:2;
    opacity:.85;
    box-shadow: inset 0 0 30px rgba(0,0,0,.5);
  }
  .obelisk::after{
    content:"";
    position:absolute; top:0; left:44%;
    width:12%; height:6%;
    background:radial-gradient(circle, #fff2c4, transparent 70%);
    opacity:.9;
  }
  .obelisk-left{ left:6%; }
  .obelisk-right{ right:6%; }

  /* --- Pylon towers (gate frame) --- */
  .pylon{
    position:absolute;
    bottom:0;
    width:min(17vw,196px);
    height:82%;
    background:
      linear-gradient(to bottom, var(--stone-700) 0%, var(--stone-800) 100%);
    z-index:3;
    box-shadow: inset -20px 0 40px rgba(0,0,0,.5), inset 20px 0 40px rgba(0,0,0,.5);
  }
  .pylon-left{  left:8%;  clip-path:polygon(0 100%, 100% 100%, 82% 0, 0 0); }
  .pylon-right{ right:8%; clip-path:polygon(0 100%, 100% 100%, 100% 0, 18% 0); }
 .pylon .hiero-panel{ position:absolute; inset:8% 12%; opacity:.5; }

  /* --- Pylon relief carvings: a readable narrative band, not texture noise --- */
  .pylon .pylon-relief{
    position:absolute;
    inset:10% 14% 14%;
    display:flex;
    flex-direction:column;
    justify-content:space-evenly;
    gap:6%;
  }
  .pylon .relief-row{
    display:block;
    height:9%;
    background:
      repeating-linear-gradient(90deg,
        rgba(212,175,55,.5) 0 8%,
        rgba(20,15,10,.35) 8% 14%,
        rgba(212,175,55,.32) 14% 20%,
        rgba(20,15,10,.35) 20% 26%);
    border-top:1px solid rgba(212,175,55,.25);
    border-bottom:1px solid rgba(0,0,0,.4);
    opacity:.8;
  }
  .pylon .relief-row:nth-child(2){ background-position:20% 0; opacity:.65; }
  .pylon .relief-row:nth-child(3){ background-position:40% 0; opacity:.7; }
  .pylon .relief-cartouche{
    display:block;
    width:56%;
    height:16%;
    margin:4% auto 0;
    border:2px solid rgba(212,175,55,.55);
    border-radius:50% / 22%;
    background:radial-gradient(ellipse at 50% 40%, rgba(212,175,55,.14), transparent 70%);
  }

  /* --- Architrave: the lintel that unites both pylons into one monument --- */
  .gate-architrave{
    position:absolute;
    bottom:68%; left:50%;
    transform:translateX(-50%);
    width:min(62vw,560px);
    height:6.5%;
    z-index:5;
    background:linear-gradient(to bottom, var(--sandstone-lt) 0%, var(--sandstone) 55%, var(--stone-700) 100%);
    box-shadow:0 6px 18px rgba(0,0,0,.5), inset 0 -6px 10px rgba(0,0,0,.35);
    border-radius:3px;
  }
  .architrave-sundisc{
    position:absolute; top:-58%; left:50%;
    transform:translateX(-50%);
    width:13%; aspect-ratio:1;
    border-radius:50%;
    background:radial-gradient(circle, #fff6da 0%, var(--gold-bright) 45%, var(--gold-dim) 80%);
    box-shadow:0 0 22px 6px rgba(244,211,94,.45);
  }
  .architrave-sundisc::before,
  .architrave-sundisc::after{
    content:"";
    position:absolute; top:48%; width:220%; height:14%;
    background:linear-gradient(90deg, transparent, var(--gold-dim) 30%, var(--gold-bright) 50%, var(--gold-dim) 70%, transparent);
  }
  .architrave-sundisc::before{ left:-210%; transform:translateY(-50%) rotate(4deg); }
  .architrave-sundisc::after{  left:110%;  transform:translateY(-50%) rotate(-4deg); }
  .architrave-band{
    position:absolute; inset:30% 6%;
    background:repeating-linear-gradient(90deg, rgba(43,33,24,.4) 0 3%, transparent 3% 6%);
    opacity:.7;
  }

  /* --- Distant skyline: implies a whole necropolis beyond this one temple --- */
  .skyline-silhouette{
    position:absolute;
    bottom:15%; left:-5%;
    width:110%; height:9%;
    background:var(--stone-900);
    opacity:.5;
    clip-path:polygon(
      0% 100%, 0% 60%, 4% 60%, 6% 30%, 9% 60%, 14% 60%, 14% 75%, 20% 75%,
      22% 40%, 24% 75%, 30% 75%, 30% 55%, 34% 55%, 36% 20%, 38% 55%, 44% 55%,
      44% 80%, 55% 80%, 57% 45%, 60% 80%, 70% 80%, 70% 60%, 74% 60%, 76% 25%,
      79% 60%, 84% 60%, 84% 75%, 92% 75%, 94% 45%, 96% 75%, 100% 75%, 100% 100%
    );
    z-index:1;
    pointer-events:none;
    filter:blur(.4px);
  }

  /* --- Ruin fragment: one specific broken monument, not generic scatter --- */
  .ruin-fragment{
    position:absolute;
    bottom:1%;
    width:min(6vw,58px);
    height:min(9vw,84px);
    background:linear-gradient(105deg, var(--stone-700) 0%, var(--sandstone) 50%, var(--stone-600) 100%);
    clip-path:polygon(10% 100%, 90% 100%, 100% 55%, 62% 0%, 30% 18%, 0% 62%);
    opacity:.85;
    z-index:2;
    box-shadow:inset 0 0 14px rgba(0,0,0,.5);
    filter:drop-shadow(0 6px 8px rgba(0,0,0,.4));
  }
  .ruin-fragment::after{
    content:"";
    position:absolute; bottom:-6%; left:-30%;
    width:160%; height:22%;
    background:radial-gradient(ellipse at center, rgba(201,168,118,.5), transparent 70%);
    border-radius:50%;
  }
  .ruin-fragment-left{ left:29%; transform:rotate(-8deg); }
  .ruin-fragment-right{ right:29%; transform:rotate(9deg) scaleX(-1); }

  /* --- Great Gate --- */
  .gate-wrap{
    position:absolute;
    bottom:0; left:50%;
    transform:translateX(-50%);
    width:min(54vw,500px);
    height:76%;
    perspective:1400px;
    z-index:4;
  }
  .gate-glow{
    position:absolute; inset:6%;
    background:radial-gradient(ellipse at 50% 40%, rgba(255,178,90,.9), rgba(255,140,60,.25) 55%, transparent 75%);
    filter:blur(4px);
    opacity:.9;
    z-index:0;
  }
  .door{
    position:absolute;
    top:0; width:50%; height:100%;
    background:
      linear-gradient(to bottom, var(--stone-600), var(--stone-800) 85%);
    background-size:100% 100%;
    box-shadow: inset 0 0 60px rgba(0,0,0,.6);
    transform-style:preserve-3d;
    transition:transform .1s linear;
  }
  .door::before{
    content:"";
    position:absolute; inset:6%;
    border:2px solid rgba(212,175,55,.35);
  }
  .door-left{ left:0; transform-origin:left center; transform:rotateY(-2deg); }
  .door-right{ right:0; transform-origin:right center; transform:rotateY(2deg); }

  /* --- Staircase --- */
  .stairs{
    position:absolute;
    bottom:0; left:50%;
    transform:translateX(-50%);
    width:min(56vw,520px);
    height:12%;
    z-index:3;
    background:repeating-linear-gradient(
      to top,
      var(--stone-700) 0, var(--stone-700) 8%,
      var(--stone-600) 8%, var(--stone-600) 9.5%
    );
    clip-path:polygon(0 100%, 100% 100%, 88% 0, 12% 0);
    box-shadow:0 -6px 24px rgba(0,0,0,.45);
  }

  /* --- Guardian statues --- */
  .statue{
    position:absolute;
    bottom:11%;
    width:min(8vw,84px);
    z-index:6;
    filter:drop-shadow(0 12px 14px rgba(0,0,0,.55));
  }
  .statue-left{ left:20%; }
  .statue-right{ right:20%; transform:scaleX(-1); }
  .statue svg{ width:100%; display:block; }

  /* --- Massive foreground columns --- */
  .column{
    position:absolute;
    bottom:0;
    width:min(7vw,72px);
    height:98%;
    z-index:7;
    background:
      repeating-linear-gradient(to right,
        var(--sandstone) 0 6%, var(--stone-600) 6% 9%),
      linear-gradient(to bottom, var(--sandstone-lt), var(--sandstone) 60%, var(--stone-700) 100%);
    background-blend-mode:multiply, normal;
    box-shadow: inset -10px 0 20px rgba(0,0,0,.5), inset 10px 0 16px rgba(255,220,170,.15);
  }
  .column::before{ /* capital */
    content:"";
    position:absolute; top:-3%; left:-22%;
    width:144%; height:8%;
    background:linear-gradient(to bottom, var(--gold-dim), var(--sandstone));
    border-radius:6px 6px 2px 2px;
    box-shadow:0 4px 10px rgba(0,0,0,.4);
  }
  .column::after{ /* base */
    content:"";
    position:absolute; bottom:0; left:-16%;
    width:132%; height:4%;
    background:var(--stone-700);
    border-radius:2px;
  }
  .column-left{ left:2%; }
  .column-right{ right:2%; }

  /* ============================================================
     TORCHES (shared component, used in entrance + corridor)
  ============================================================ */
  .torch{
    position:absolute;
    width:26px; height:70px;
    z-index:8;
  }
  .torch .sconce{
    position:absolute; bottom:0; left:50%; transform:translateX(-50%);
    width:14px; height:34px;
    background:linear-gradient(to bottom, var(--gold-dim), var(--stone-700));
    border-radius:2px;
    box-shadow:0 0 8px rgba(0,0,0,.5);
  }
  .torch .flame{
    position:absolute; bottom:28px; left:50%;
    transform:translateX(-50%);
    width:20px; height:34px;
    background:radial-gradient(circle at 50% 70%, var(--torch-lt) 0%, var(--torch) 45%, rgba(255,140,60,0) 75%);
    clip-path:path('M10 0 C15 8 20 16 16 24 C13 30 7 30 4 24 C0 16 5 8 10 0 Z');
    filter:blur(.3px);
    animation: flicker 2.6s ease-in-out infinite;
    transform-origin:bottom center;
  }
  .torch .glow{
    position:absolute; bottom:24px; left:50%;
    transform:translateX(-50%);
    width:90px; height:90px;
    background:radial-gradient(circle, rgba(255,171,90,.55), rgba(255,140,60,0) 70%);
    filter:blur(4px);
    animation: glowPulse 2.6s ease-in-out infinite;
    z-index:-1;
  }
  @keyframes flicker{
    0%,100%{ transform:translateX(-50%) scaleY(1) skewX(0deg); opacity:1; }
    20%    { transform:translateX(-50%) scaleY(1.08) skewX(-2deg); opacity:.95; }
    40%    { transform:translateX(-48%) scaleY(.94) skewX(2deg); opacity:1; }
    60%    { transform:translateX(-52%) scaleY(1.05) skewX(-1deg); opacity:.92; }
    80%    { transform:translateX(-50%) scaleY(.97) skewX(1deg); opacity:1; }
  }
  @keyframes glowPulse{
    0%,100%{ opacity:.65; transform:translateX(-50%) scale(1); }
    50%    { opacity:.9;  transform:translateX(-50%) scale(1.12); }
  }
  .torch-entrance-left{ left:14%; bottom:6%; }
  .torch-entrance-right{ right:14%; bottom:6%; }

  /* ============================================================
     HERO CONTENT
  ============================================================ */
  .hero-content{
    position:relative;
    z-index:20;
    display:flex;
    flex-direction:column;
    align-items:center;
    padding:0 20px 6vh;
    width:100%;
  }

  .title{
    font-size:clamp(2.1rem, 6.6vw, 5rem);
    font-weight:700;
    text-align:center;
    line-height:1.05;
    background:linear-gradient(180deg, #fff3d0 0%, var(--gold-bright) 35%, var(--gold) 60%, var(--gold-dim) 100%);
    -webkit-background-clip:text;
    background-clip:text;
    color:transparent;
    filter:drop-shadow(0 2px 1px rgba(0,0,0,.6)) drop-shadow(0 0 26px rgba(212,175,55,.35));
    position:relative;
    margin-bottom:.35em;
    opacity:0;
    animation: titleRise 1.4s var(--ease-heavy) forwards .3s;
  }
  .title::after{
    content:"";
    position:absolute; inset:0;
    background:linear-gradient(100deg, transparent 30%, rgba(255,255,255,.75) 45%, transparent 60%);
    background-size:250% 100%;
    background-position:150% 0;
    -webkit-background-clip:text;
    background-clip:text;
    color:transparent;
    mix-blend-mode:overlay;
    animation: titleShimmer 2.2s ease-out 1.6s 1;
  }
  .title small{
    display:block;
    font-family:'Cormorant Garamond', serif;
    font-style:italic;
    font-weight:500;
    font-size:.28em;
    letter-spacing:.5em;
    color:var(--sandstone-lt);
    -webkit-text-fill-color:var(--sandstone-lt);
    margin-top:.4em;
    text-transform:uppercase;
  }
  @keyframes titleRise{
    from{ opacity:0; transform:translateY(26px) scale(.97); }
    to  { opacity:1; transform:translateY(0) scale(1); }
  }
  @keyframes titleShimmer{
    to{ background-position:-50% 0; }
  }

  /* ============================================================
     ANKH SEARCH BAR
  ============================================================ */
  .ankh{
    position:relative;
    display:flex;
    flex-direction:column;
    align-items:center;
    opacity:0;
    transform:scale(.82);
    animation: ankhOpen 1s var(--ease-heavy) forwards 1.05s;
  }
  @keyframes ankhOpen{
    0%  { opacity:0; transform:scale(.78) translateY(10px); }
    60% { opacity:1; }
    100%{ opacity:1; transform:scale(1) translateY(0); }
  }

  .ankh-burst{
    position:absolute;
    top:18%; left:50%;
    width:10px; height:10px;
    transform:translate(-50%,-50%);
    border-radius:50%;
    background:radial-gradient(circle, #fff6da, rgba(255,246,218,0));
    animation: burst 1.1s ease-out forwards 1.15s;
    pointer-events:none;
    z-index:5;
  }
  @keyframes burst{
    0%  { opacity:.9; transform:translate(-50%,-50%) scale(1); }
    100%{ opacity:0;  transform:translate(-50%,-50%) scale(38); }
  }

  .ankh-loop-wrap{
    position:relative;
    width:clamp(170px, 24vw, 250px);
    height:clamp(128px, 18vw, 188px);
  }
  .ankh-loop-frame{
    position:absolute; inset:-6px;
    border-radius:50% 50% 46% 46% / 58% 58% 42% 42%;
    background:linear-gradient(160deg, var(--gold-bright), var(--gold) 45%, var(--gold-dim) 100%);
    box-shadow:0 0 0 2px rgba(0,0,0,.3), 0 8px 30px rgba(212,175,55,.25);
    z-index:0;
  }
  .ankh-input{
    position:absolute; inset:6px;
    border-radius:50% 50% 46% 46% / 58% 58% 42% 42%;
    border:none;
    background:radial-gradient(ellipse at 50% 35%, #241a11 0%, #150f0a 75%);
    color:var(--papyrus);
    text-align:center;
    font-family:'Cormorant Garamond', serif;
    font-style:italic;
    font-size:clamp(.95rem, 1.6vw, 1.15rem);
    padding:0 20% 8%;
    box-shadow:inset 0 0 24px rgba(0,0,0,.7), inset 0 0 0 1px rgba(212,175,55,.4);
    transition:box-shadow .5s var(--ease-heavy), background .5s;
    z-index:1;
  }
  .ankh-input::placeholder{ color:rgba(240,228,200,.5); }
  .ankh-input:hover{
    box-shadow:inset 0 0 30px rgba(0,0,0,.6), inset 0 0 0 1px rgba(244,211,94,.6), 0 0 26px rgba(244,211,94,.35);
  }
  .ankh-input:focus{
    outline:none;
    box-shadow:inset 0 0 34px rgba(0,0,0,.55), inset 0 0 0 2px var(--gold-bright), 0 0 46px rgba(244,211,94,.55);
    background:radial-gradient(ellipse at 50% 35%, #2c2013 0%, #170f09 75%);
  }

  .ankh-crossbar{
    width:clamp(190px, 27vw, 280px);
    height:22px;
    margin-top:-10px;
    border-radius:5px;
    background:linear-gradient(180deg, var(--gold-bright), var(--gold) 60%, var(--gold-dim));
    box-shadow:0 4px 14px rgba(0,0,0,.4), 0 0 18px rgba(212,175,55,.3);
    position:relative;
    z-index:2;
  }
  .ankh-crossbar::after{
    content:"";
    position:absolute; top:50%; left:50%;
    width:12px; height:12px;
    transform:translate(-50%,-50%) rotate(45deg);
    background:radial-gradient(circle, var(--turquoise), #17564c);
    box-shadow:0 0 10px rgba(46,139,125,.7);
  }
  .ankh-stem{
    width:clamp(34px,4.4vw,48px);
    height:clamp(60px,8vw,96px);
    margin-top:-2px;
    background:linear-gradient(180deg, var(--gold), var(--gold-dim));
    clip-path:polygon(18% 0, 82% 0, 100% 100%, 0% 100%);
    box-shadow:0 6px 16px rgba(0,0,0,.4);
    z-index:1;
  }

  .quick-tags{
    display:flex;
    gap:12px;
    flex-wrap:wrap;
    justify-content:center;
    margin-top:2.4em;
    opacity:0;
    animation: fadeUp .9s var(--ease-heavy) forwards 1.5s;
  }
  @keyframes fadeUp{
    from{ opacity:0; transform:translateY(10px); }
    to  { opacity:1; transform:translateY(0); }
  }
  .tag{
    font-family:'Cinzel', serif;
    font-size:.68rem;
    letter-spacing:.12em;
    text-transform:uppercase;
    color:var(--sandstone-lt);
    background:linear-gradient(180deg, rgba(61,47,34,.75), rgba(20,15,10,.8));
    border:1px solid rgba(212,175,55,.4);
    border-radius:4px;
    padding:.6em 1.3em;
    cursor:pointer;
    transition:all .35s var(--ease-heavy);
    position:relative;
    box-shadow:inset 0 0 10px rgba(0,0,0,.5), 0 3px 8px rgba(0,0,0,.35);
  }
  .tag::before, .tag::after{
    content:"";
    position:absolute; top:3px; width:3px; height:3px;
    border-radius:50%;
    background:rgba(212,175,55,.6);
  }
  .tag::before{ left:4px; }
  .tag::after{ right:4px; }
  .tag:hover, .tag:focus-visible{
    border-color:var(--gold-bright);
    color:var(--stone-900);
    background:linear-gradient(180deg, var(--gold-bright), var(--gold));
    box-shadow:0 0 18px rgba(244,211,94,.5);
    transform:translateY(-2px);
  }

  /* ============================================================
     SCROLL CUE
  ============================================================ */
  .scroll-cue{
    position:absolute;
    bottom:3.2vh; left:50%;
    transform:translateX(-50%);
    z-index:20;
    display:flex; flex-direction:column; align-items:center; gap:6px;
    font-family:'Cinzel',serif;
    font-size:.62rem;
    letter-spacing:.28em;
    text-transform:uppercase;
    color:var(--sandstone-lt);
    opacity:0;
    animation: fadeUp .9s var(--ease-heavy) forwards 2s;
  }
  .scroll-cue .chev{
    width:14px; height:14px;
    border-right:2px solid var(--gold);
    border-bottom:2px solid var(--gold);
    transform:rotate(45deg);
    animation: chevBob 1.8s ease-in-out infinite;
  }
  @keyframes chevBob{
    0%,100%{ transform:rotate(45deg) translate(0,0); opacity:.6; }
    50%    { transform:rotate(45deg) translate(4px,4px); opacity:1; }
  }


  /* ============================================================
     RESPONSIVE
  ============================================================ */
  @media (max-width:720px){
    .column, .obelisk, .skyline-silhouette, .ruin-fragment{ display:none; }
    .statue{ width:60px; }
    .pylon{ width:30vw; }
    .gate-wrap{ width:74vw; height:78%; }
    .gate-architrave{ width:80vw; }
    .hiero-wall{ width:16%; }
  }

  /* ============================================================
     REDUCED MOTION
  ============================================================ */
  @media (prefers-reduced-motion: reduce){
    *{ animation-duration:.01ms !important; animation-iteration-count:1 !important; transition-duration:.01ms !important; scroll-behavior:auto !important; }
    .mote{ display:none; }
  }

  /* ============================================================
     LEVEL 2 — LIBRARY SERVICES HALL  (new, additive only)
  ============================================================ */
  .hall{
    position:relative;
    width:100%;
    min-height:175vh;
    background:
      radial-gradient(ellipse 70% 45% at 50% 0%, rgba(255,183,90,.12), transparent 60%),
      linear-gradient(to bottom, #0a0705 0%, #150f0a 10%, #1a1410 48%, #150f0a 86%, #0a0705 100%);
    overflow:hidden;
    isolation:isolate;
  }

  .hall-side-wall{
    position:absolute; top:0; width:30%; height:58vh;
    background:
      linear-gradient(145deg, #71502d 0%, #4b3420 35%, #241910 75%, #120c08 100%);
    box-shadow:
      inset 0 0 45px rgba(0,0,0,.65),
      inset 0 0 12px rgba(255,220,160,.08);
    -webkit-mask-image:linear-gradient(to bottom, #000 0%, #000 62%, transparent 100%);
    mask-image:linear-gradient(to bottom, #000 0%, #000 62%, transparent 100%);
    z-index:4; pointer-events:none; overflow:hidden;
  }
  .hall-side-wall.left{
    left:0;
    border-right:2px solid rgba(244,211,94,.32);
  }
  .hall-side-wall.right{
    right:0;
    border-left:2px solid rgba(244,211,94,.32);
  }

  .hall-side-wall .wall-relief{
    top:12%;
    left:25%;
  }
  .hall-side-wall .wall-relief.second{
    top:38%;
    left:55%;
  }

  .hall-seam-fade{
    position:absolute; top:0; left:50%; transform:translateX(-50%);
    width:100%;
    height:42vh;
    background:
      radial-gradient(ellipse at 50% 0%, rgba(255,190,100,.14), transparent 45%),
      linear-gradient(to bottom, #0a0705 0%, rgba(10,7,5,.94) 30%, rgba(10,7,5,.6) 65%, transparent 100%);
    clip-path: polygon(31% 0, 69% 0, 100% 100%, 0 100%);
    z-index:6; pointer-events:none;
  }

  .hall-seam-fade::before,
  .hall-seam-fade::after{
    content:"";
    position:absolute;
    top:0;
    width:2px;
    height:100%;
    background:linear-gradient(to bottom, rgba(244,211,94,.5), rgba(244,211,94,.05) 70%, transparent);
    box-shadow:0 0 14px rgba(244,211,94,.25);
  }
  .hall-seam-fade::before{ left:31%; transform:skewX(-11deg); transform-origin:top; }
  .hall-seam-fade::after{ left:69%; transform:skewX(11deg); transform-origin:top; }

  .hall-entry-glow{
    position:absolute; top:0; left:50%; transform:translateX(-50%);
    width:120%; height:34vh;
    background:radial-gradient(ellipse at 50% 0%, rgba(255,190,110,.32), transparent 70%);
    z-index:1; pointer-events:none;
  }

  .hall-oculus{
    position:absolute; top:0; left:50%; transform:translateX(-50%);
    width:38vw; max-width:420px; height:58vh;
    background:linear-gradient(to bottom, rgba(255,214,150,.5), rgba(255,214,150,.08) 60%, transparent 100%);
    filter:blur(6px);
    mix-blend-mode:screen;
    z-index:2; pointer-events:none;
    animation:hallBeamPulse 6s ease-in-out infinite;
  }
  .hall-beam-side{
    position:absolute; top:0; width:10vw; max-width:110px; height:44vh;
    background:linear-gradient(to bottom, rgba(255,190,120,.26), transparent 100%);
    filter:blur(8px);
    mix-blend-mode:screen;
    z-index:2; pointer-events:none;
    animation:hallBeamPulse 7s ease-in-out infinite;
  }
  .hall-beam-left{ left:13%; animation-delay:.6s; }
  .hall-beam-right{ right:13%; animation-delay:1.2s; }
  @keyframes hallBeamPulse{
    0%,100%{ opacity:.5; }
    50%    { opacity:.82; }
  }

  .hall-floor{
    position:absolute; bottom:0; left:0; right:0; height:26%;
    background:
      repeating-linear-gradient(90deg, rgba(212,175,55,.05) 0 2px, transparent 2px 48px),
      repeating-linear-gradient(0deg, rgba(212,175,55,.04) 0 2px, transparent 2px 36px),
      linear-gradient(to top, var(--stone-800), transparent);
    z-index:1;
  }

  .hall-column{
    position:absolute; bottom:0;
    width:min(6.4vw,70px); height:92%;
    background:
      repeating-linear-gradient(to right, var(--sandstone) 0 6%, var(--stone-600) 6% 9%),
      linear-gradient(to bottom, var(--sandstone-lt), var(--sandstone) 55%, var(--stone-700) 100%);
    background-blend-mode:multiply, normal;
    box-shadow: inset -10px 0 20px rgba(0,0,0,.5), inset 10px 0 16px rgba(255,220,170,.12);
    z-index:3;
  }
  .hall-column::before{
    content:""; position:absolute; top:-3%; left:-24%; width:148%; height:7%;
    background:linear-gradient(to bottom, var(--gold-dim), var(--sandstone));
    border-radius:6px 6px 2px 2px;
    box-shadow:0 4px 10px rgba(0,0,0,.4);
  }
  .hall-column::after{
    content:""; position:absolute; bottom:0; left:-18%; width:136%; height:3.5%;
    background:var(--stone-700); border-radius:2px;
  }
  .hall-col-1{ left:3%; }
  .hall-col-2{ left:25%; height:78%; }
  .hall-col-3{ right:25%; height:78%; }
  .hall-col-4{ right:3%; }

  .hall-sentinel{
    position:absolute; bottom:24%;
    width:min(6vw,64px);
    z-index:5;
    filter:drop-shadow(0 10px 12px rgba(0,0,0,.55));
    opacity:.9;
  }
  .hall-sentinel svg{ width:100%; display:block; }
  .hall-sentinel.left{ left:10.5%; }
  .hall-sentinel.right{ right:10.5%; transform:scaleX(-1); }

  .hall .torch{ z-index:6; }

  /* --- Relic grid (the four interactive objects) --- */
  /* ============================================================
   LIBRARY SERVICES — CONTINUOUS INTERIOR
============================================================ */

.relic-grid{
    position:relative;
    z-index:10;

    max-width:1250px;
    margin:0 auto;

    /*
       The user has entered the temple.
       Services are now physically inside the hall.
    */
    padding:
        8vh
        5vw
        22vh;

    display:grid;

    grid-template-columns:repeat(4, 1fr);

    gap:clamp(22px, 3vw, 55px);

    align-items:end;

    /*
       Gives the four relics the feeling of
       standing deep inside the same hall.
    */
    min-height:110vh;
}
  @media (max-width:980px){ .relic-grid{ grid-template-columns:repeat(2,1fr); padding-top:26vh; row-gap:64px; } }
  @media (max-width:520px){ .relic-grid{ grid-template-columns:1fr; } }

  .relic-station{ position:relative; display:flex; flex-direction:column; align-items:center; text-align:center; }

  .relic-btn{
    position:relative;
    background:none; border:none; cursor:pointer;
    padding:0; width:100%;
    display:flex; flex-direction:column; align-items:center;
    color:inherit;
    -webkit-tap-highlight-color:transparent;
  }

  .relic-glow-ring{
    position:absolute;
    top:38%;
    left:50%;
    width:135%;
    padding-top:135%;
    transform:translate(-50%,-50%) scale(.8);
    border-radius:50%;
    
    background:
    radial-gradient(
      circle,
      rgba(244,211,94,.45),
      rgba(212,175,55,.18) 35%,
      transparent 70%
    );

    opacity:.15;

    animation:ancientPulse 4s infinite ease-in-out;

    transition:
      opacity .5s var(--ease-heavy),
      transform .5s var(--ease-heavy);

    z-index:-1;
    pointer-events:none;
}


.relic-btn:hover .relic-glow-ring,
.relic-btn:focus-visible .relic-glow-ring{
    opacity:1;
    transform:translate(-50%,-50%) scale(1.15);
}


@keyframes ancientPulse{
    0%,100%{
        opacity:.12;
        transform:translate(-50%,-50%) scale(.8);
    }

    50%{
        opacity:.35;
        transform:translate(-50%,-50%) scale(1);
    }
}

  .relic-figure{
  width:clamp(90px,10vw,130px);

  animation: relicFloat 5s ease-in-out infinite;

  transition:
    filter .5s var(--ease-heavy);

  filter:
    drop-shadow(0 15px 18px rgba(0,0,0,.65))
    drop-shadow(0 0 8px rgba(212,175,55,.25));

  position:relative;
  z-index:2;
}


.relic-btn:hover .relic-figure,
.relic-btn:focus-visible .relic-figure{

  filter:
    drop-shadow(0 15px 20px rgba(0,0,0,.6))
    drop-shadow(0 0 35px #f4d35e);
}


@keyframes relicFloat{
  0%,100%{
    translate:0 0;
  }

  50%{
    translate:0 -12px;
  }
}


/* Virtual Tour Portal */
.relic-station:nth-child(2) .relic-figure{
  animation:
    portalFloat 5s infinite ease-in-out;
}


@keyframes portalFloat{
  0%,100%{
    translate:0 0;
    rotate:0deg;
  }

  50%{
    translate:0 -12px;
    rotate:2deg;
  }
}

  .relic-pedestal{
    width:78%;
    height:18px;

    background:
    linear-gradient(
      to bottom,
      #c9a876,
      #7a5f3f 45%,
      #2b2118
    );

    border-radius:5px 5px 12px 12px;

    box-shadow:
    0 12px 20px rgba(0,0,0,.65),
    inset 0 2px 4px rgba(255,220,170,.4);

    margin-top:8px;

    position:relative;
}


.relic-pedestal::before{
    content:"𓂀";

    position:absolute;
    left:50%;
    top:-22px;

    transform:translateX(-50%);

    color:#d4af37;
    font-size:18px;
    opacity:.7;
}

  .relic-label{
    margin-top:14px;
    font-family:'Cinzel', serif;
    font-size:.72rem;
    letter-spacing:.14em;
    text-transform:uppercase;
    color:var(--sandstone-lt);
    border:1px solid rgba(212,175,55,.35);
    border-radius:999px;
    padding:.5em 1.1em;
    background:rgba(20,15,10,.5);
    transition:all .35s var(--ease-heavy);
  }
  .relic-btn:hover .relic-label,
  .relic-btn:focus-visible .relic-label{
    border-color:var(--gold-bright);
    color:var(--stone-900);
    background:linear-gradient(180deg, var(--gold-bright), var(--gold));
  }

  .relic-ping{
    position:absolute; top:38%; left:50%;
    width:20px; height:20px;
    margin:-10px 0 0 -10px;
    border-radius:50%;
    border:2px solid var(--gold-bright);
    opacity:.9;
    pointer-events:none;
    animation:pingOut .7s var(--ease-heavy) forwards;
  }
  @keyframes pingOut{ to{ width:180px; height:180px; margin:-90px 0 0 -90px; opacity:0; } }

  .relic-spark{
    position:absolute; width:4px; height:4px; border-radius:50%;
    background:radial-gradient(circle, var(--gold-bright), transparent 70%);
    pointer-events:none;
    animation:sparkUp .9s ease-out forwards;
  }
  @keyframes sparkUp{ to{ transform:translate(var(--sx,0), var(--sy,-40px)); opacity:0; } }

  /* individual relic art behaviour */
  .relic-guardian .idol-eye{ transition:fill .35s, filter .35s; fill:#2a1f14; }
  .relic-btn:hover .relic-guardian .idol-eye,
  .relic-btn:focus-visible .relic-guardian .idol-eye{ fill:var(--gold-bright); filter:drop-shadow(0 0 6px rgba(244,211,94,.9)); }
  .relic-guardian .idol-gem{ transition:filter .35s; }
  .relic-btn:hover .relic-guardian .idol-gem,
  .relic-btn:focus-visible .relic-guardian .idol-gem{ filter:drop-shadow(0 0 8px rgba(46,139,125,.9)); }

  .relic-mirror .portal-swirl{ transform-origin:50% 50%; animation:portalSpin 10s linear infinite; }
  .relic-mirror .portal-ripple{ opacity:0; transition:opacity .4s; }
  .relic-btn:hover .relic-mirror .portal-ripple,
  .relic-btn:focus-visible .relic-mirror .portal-ripple{ opacity:.85; animation:rippleOut 1.1s ease-out infinite; }
  @keyframes portalSpin{ to{ transform:rotate(360deg); } }
  @keyframes rippleOut{ 0%{ transform:scale(.7); opacity:.7; } 100%{ transform:scale(1.5); opacity:0; } }

  .relic-scroll .scroll-roll{ transition:transform .45s var(--ease-heavy); transform-origin:50% 100%; }
  .relic-btn:hover .relic-scroll .scroll-roll,
  .relic-btn:focus-visible .relic-scroll .scroll-roll{ transform:translateY(-4px) rotate(-3deg); }
  .relic-scroll .scroll-ribbon{ transition:transform .45s var(--ease-heavy); transform-origin:50% 50%; }
  .relic-btn:hover .relic-scroll .scroll-ribbon,
  .relic-btn:focus-visible .relic-scroll .scroll-ribbon{ transform:rotate(18deg) translateX(2px); }

  .relic-tablet .tablet-path{
    stroke-dasharray:220; stroke-dashoffset:220;
    transition:stroke-dashoffset 1s var(--ease-heavy), filter .4s;
  }
  .relic-btn:hover .relic-tablet .tablet-path,
  .relic-btn:focus-visible .relic-tablet .tablet-path{ stroke-dashoffset:0; filter:drop-shadow(0 0 5px rgba(244,211,94,.8)); }


  .hall-exit-line.visible{ animation:fadeUp 1.2s var(--ease-heavy) forwards; }

  @media (max-width:720px){
    .hall-column{ display:none; }
    .hall-sentinel{ width:44px; }
  }

  /* ============================================================
     LEVEL 3 — HALL OF STORIES  (new, additive only)
  ============================================================ */
  .stories{
    position:relative;
    width:100%;
    min-height:230vh;
    background:
      radial-gradient(ellipse 65% 40% at 50% 4%, rgba(180,140,255,.08), transparent 60%),
      radial-gradient(ellipse 80% 50% at 50% 100%, rgba(46,139,125,.1), transparent 65%),
      linear-gradient(to bottom, #0a0705 0%, #120d0a 12%, #170f0b 46%, #120d0a 80%, #0a0705 100%);
    overflow:hidden;
    isolation:isolate;
  }

  .stories-entry-glow{
    position:absolute; top:0; left:50%; transform:translateX(-50%);
    width:120%; height:30vh;
    background:radial-gradient(ellipse at 50% 0%, rgba(212,175,55,.22), transparent 70%);
    z-index:1; pointer-events:none;
  }

  .stories-floor{
    position:absolute; bottom:0; left:0; right:0; height:20%;
    background:
      repeating-linear-gradient(90deg, rgba(212,175,55,.04) 0 2px, transparent 2px 54px),
      repeating-linear-gradient(0deg, rgba(212,175,55,.035) 0 2px, transparent 2px 40px),
      linear-gradient(to top, var(--stone-800), transparent);
    z-index:1;
  }

  .stories-pilaster{
    position:absolute; top:0; bottom:22%;
    width:min(3.2vw,36px);
    background:linear-gradient(to bottom, var(--sandstone), var(--stone-700) 88%);
    opacity:.5;
    box-shadow:inset -6px 0 12px rgba(0,0,0,.6), inset 6px 0 10px rgba(255,220,170,.1);
    z-index:1;
  }

  .stories-heading{
    position:relative; z-index:6;
    text-align:center;
    padding:9vh 6vw 2vh;
  }
  .stories-heading h2{
    font-size:clamp(1.7rem, 4.4vw, 3.1rem);
    font-weight:700;
    background:linear-gradient(180deg, #fff3d0 0%, var(--gold-bright) 40%, var(--gold-dim) 100%);
    -webkit-background-clip:text; background-clip:text; color:transparent;
    filter:drop-shadow(0 2px 10px rgba(0,0,0,.6));
    letter-spacing:.06em;
  }
  .stories-heading p{
    margin-top:.6em;
    font-style:italic;
    color:var(--sandstone-lt);
    font-size:clamp(.9rem,1.6vw,1.15rem);
    opacity:.85;
  }

  /* --- Book grid: 13 premium stone pedestals --- */
  .book-grid{
    position:relative;
    z-index:10;

    max-width:1400px;
    margin:0 auto;

    padding:40px 20px 120px;

    display:grid;

    grid-template-columns:repeat(5,1fr);

    gap:70px 35px;

    justify-items:center;
}
  }
  @media (max-width:1080px){ .book-grid{ grid-template-columns:repeat(4,1fr); } }
  @media (max-width:820px){  .book-grid{ grid-template-columns:repeat(3,1fr); } }
  @media (max-width:560px){  .book-grid{ grid-template-columns:repeat(2,1fr); } }

  .book-btn{
    position:relative;
    background:none; border:none; cursor:pointer;
    padding:0; width:100%; max-width:150px;
    display:flex; flex-direction:column; align-items:center;
    color:inherit;
    -webkit-tap-highlight-color:transparent;
  }

  .book-glow-ring{
    position:absolute; top:34%; left:50%;
    width:150%; padding-top:150%;
    transform:translate(-50%,-50%) scale(.55);
    border-radius:50%;
    background:radial-gradient(circle, rgba(244,211,94,.4), rgba(46,139,125,.15) 55%, transparent 72%);
    opacity:0;
    transition:opacity .5s var(--ease-heavy), transform .5s var(--ease-heavy);
    z-index:-1;
    pointer-events:none;
  }
  .book-btn:hover .book-glow-ring,
  .book-btn:focus-visible .book-glow-ring{ opacity:1; transform:translate(-50%,-50%) scale(1); }

  .book-figure{
    width:clamp(62px,7.4vw,86px);
    animation:bookFloat 4.8s ease-in-out infinite;
    transition:filter .4s var(--ease-heavy), transform .4s var(--ease-heavy);
    filter:drop-shadow(0 10px 14px rgba(0,0,0,.55));
    transform-origin:center bottom;
  }
  .book-btn:hover .book-figure,
  .book-btn:focus-visible .book-figure{
    filter:drop-shadow(0 16px 24px rgba(0,0,0,.6)) drop-shadow(0 0 20px rgba(244,211,94,.6));
    transform:translateY(-5px) scale(1.16); /* zoom */
  }
  .book-btn:active .book-figure{ transform:translateY(1px) scale(1.02); transition-duration:.12s; }
  .book-btn.is-activated .book-figure{ filter:drop-shadow(0 0 26px rgba(244,211,94,.95)); }

  @keyframes bookFloat{ 0%,100%{ transform:translateY(0); } 50%{ transform:translateY(-7px); } }
  .book-station:nth-child(3n+2) .book-figure{ animation-duration:5.4s; animation-delay:.25s; }
  .book-station:nth-child(3n+3) .book-figure{ animation-duration:5.9s; animation-delay:.5s; }
  .book-station:nth-child(4n)   .book-figure{ animation-duration:4.4s; animation-delay:.75s; }

  .book-cover-shine{ opacity:.35; transition:opacity .4s; }
  .book-btn:hover .book-cover-shine,
  .book-btn:focus-visible .book-cover-shine{ opacity:.75; }

  .book-pedestal{
    width:66%; height:12px;
    background:linear-gradient(to bottom, var(--stone-600), var(--stone-800));
    border-radius:3px 3px 7px 7px;
    box-shadow:0 6px 12px rgba(0,0,0,.5), inset 0 1px 0 rgba(255,220,170,.18);
    margin-top:6px;
  }

  .book-title{
    margin-top:12px;
    font-family:'Cinzel', serif;
    font-size:.62rem;
    letter-spacing:.08em;
    text-transform:uppercase;
    color:var(--sandstone-lt);
    line-height:1.4;
  }
  .book-vol{
    display:block;
    font-family:'Cormorant Garamond', serif;
    font-style:italic;
    font-size:.66rem;
    color:var(--gold);
    letter-spacing:.14em;
    margin-top:2px;
  }

  .book-spark{ animation-name: sparkUp; } /* reuses existing @keyframes sparkUp from Level 2, unmodified */

  /* ---- Giant statue of Thoth ---- */
  .thoth-wrap{
    position:relative; z-index:5;
    display:flex; flex-direction:column; align-items:center;
    padding:4vh 6vw 10vh;
  }
  .thoth-aura{
    position:absolute; top:6%; left:50%; transform:translateX(-50%);
    width:min(48vw,460px); height:60%;
    background:radial-gradient(ellipse at 50% 40%, rgba(46,139,125,.32), rgba(212,175,55,.12) 55%, transparent 75%);
    filter:blur(10px);
    z-index:0;
    animation:thothAuraPulse 7s ease-in-out infinite;
  }
  @keyframes thothAuraPulse{
    0%,100%{ opacity:.7; transform:translateX(-50%) scale(1); }
    50%    { opacity:1;  transform:translateX(-50%) scale(1.05); }
  }
  .thoth-figure{
    position:relative; z-index:1;
    width:min(30vw,300px);
    filter:drop-shadow(0 20px 26px rgba(0,0,0,.65));
  }
  .thoth-figure .thoth-eye{ animation:thothBlinkGlow 5s ease-in-out infinite; }
  @keyframes thothBlinkGlow{
    0%,92%,100%{ opacity:1; }
    95%        { opacity:.35; }
  }
  .thoth-caption{
    position:relative; z-index:1;
    margin-top:1.4em;
    font-style:italic;
    font-size:clamp(.95rem,1.8vw,1.2rem);
    color:var(--sandstone-lt);
    text-align:center;
    text-shadow:0 2px 10px rgba(0,0,0,.7);
    max-width:min(70vw,480px);
  }
  .thoth-caption small{
    display:block;
    margin-top:.4em;
    font-family:'Cinzel', serif;
    font-style:normal;
    letter-spacing:.3em;
    font-size:.6em;
    text-transform:uppercase;
    color:var(--gold);
    opacity:.8;
  }

  /* ---- Corridor toward the Games Chamber ---- */
  .story-corridor{
    position:relative;
    width:100%;
    min-height:35vh;
    background:linear-gradient(to bottom, transparent 0%, #0d0906 30%, #060403 100%);
    overflow:hidden;
    perspective:900px;
    z-index:2;
}
  .story-corridor-fog{
    position:absolute; inset:0;
    background:radial-gradient(ellipse 55% 35% at 50% 25%, rgba(212,175,55,.1), transparent 70%);
    z-index:3; pointer-events:none;
  }
  .story-hiero-wall{
    position:absolute; top:0; bottom:0;
    width:22%;
    background-color:var(--stone-800);
    background-image:
      repeating-linear-gradient(0deg, rgba(212,175,55,.07) 0 2px, transparent 2px 34px),
      repeating-linear-gradient(90deg, rgba(212,175,55,.05) 0 2px, transparent 2px 46px);
    z-index:1; opacity:.85;
  }
  .story-hiero-wall.left{  left:0;  clip-path:polygon(0 0, 100% 0, 66% 100%, 0 100%); }
  .story-hiero-wall.right{ right:0; clip-path:polygon(0 0, 100% 0, 100% 100%, 34% 100%); }

  .story-pillars-row{ position:absolute; inset:0; z-index:4; pointer-events:none; }
  .story-p-col{
    position:absolute; top:0; width:48px; height:100%;
    background:linear-gradient(to bottom, var(--sandstone), var(--stone-700) 85%);
    box-shadow:inset -6px 0 14px rgba(0,0,0,.6), inset 6px 0 10px rgba(255,220,170,.1);
  }
  .story-p-col::before{
    content:""; position:absolute; top:0; left:-16%;
    width:132%; height:5%; background:var(--gold-dim);
  }

  .story-corridor-floor{
    position:absolute; bottom:0; left:50%; transform:translateX(-50%);
    width:92%; height:32%;
    background:
      repeating-linear-gradient(to top, rgba(0,0,0,0) 0 6%, rgba(0,0,0,.2) 6% 6.6%),
      linear-gradient(to top, var(--stone-700), var(--stone-800) 70%, transparent);
    clip-path:polygon(36% 100%, 64% 100%, 100% 0%, 0% 0%);
    z-index:2; opacity:.9;
  }

  .story-corridor-line{
    position:absolute; top:16%; left:50%; transform:translate(-50%,0);
    width:min(80vw,480px);
    text-align:center;
    font-style:italic;
    font-size:clamp(1rem,2.2vw,1.35rem);
    color:var(--sandstone-lt);
    z-index:10;
    opacity:0;
    text-shadow:0 2px 12px rgba(0,0,0,.7);
  }
  .story-corridor-line.visible{ animation:fadeUp 1.4s var(--ease-heavy) forwards; }

  @media (max-width:720px){
    .stories-pilaster{ display:none; }
    .thoth-figure{ width:min(46vw,220px); }
  }

  /* ============================================================
     LEVEL 4 — GAMES CHAMBER  (new, additive only)
  ============================================================ */
  .games-chamber{
    position:relative;
    width:100%;
    min-height:240vh;
    height:auto;
    background:
      radial-gradient(ellipse 70% 45% at 50% 2%, rgba(46,139,125,.14), transparent 62%),
      radial-gradient(ellipse 60% 40% at 20% 60%, rgba(212,175,55,.08), transparent 65%),
      radial-gradient(ellipse 60% 40% at 80% 40%, rgba(212,175,55,.08), transparent 65%),
      linear-gradient(to bottom, #07050300 0%, #100b08 8%, #1a1108 46%, #100b08 82%, #07050300 100%);
    overflow:hidden;
    isolation:isolate;
  }

  .chamber-entry-glow{
    position:absolute; top:0; left:50%; transform:translateX(-50%);
    width:120%; height:30vh;
    background:radial-gradient(ellipse at 50% 0%, rgba(46,139,125,.28), transparent 70%);
    z-index:1; pointer-events:none;
  }

  .chamber-floor{
    position:absolute; bottom:0; left:0; right:0; height:22%;
    background:
      repeating-linear-gradient(90deg, rgba(212,175,55,.045) 0 2px, transparent 2px 50px),
      repeating-linear-gradient(0deg, rgba(212,175,55,.035) 0 2px, transparent 2px 38px),
      linear-gradient(to top, var(--stone-800), transparent);
    z-index:1;
  }

  .chamber-column{
    position:absolute; bottom:0;
    width:min(6vw,66px); height:90%;
    background:
      repeating-linear-gradient(to right, var(--sandstone) 0 6%, var(--stone-600) 6% 9%),
      linear-gradient(to bottom, var(--sandstone-lt), var(--sandstone) 55%, var(--stone-700) 100%);
    background-blend-mode:multiply, normal;
    box-shadow: inset -10px 0 20px rgba(0,0,0,.5), inset 10px 0 16px rgba(255,220,170,.12);
    z-index:1; opacity:.9;
  }
  .chamber-column::before{
    content:""; position:absolute; top:-3%; left:-24%; width:148%; height:7%;
    background:linear-gradient(to bottom, var(--gold-dim), var(--sandstone));
    border-radius:6px 6px 2px 2px;
  }
  .chamber-column::after{
    content:""; position:absolute; bottom:0; left:-18%; width:136%; height:3.5%;
    background:var(--stone-700); border-radius:2px;
  }
  .chamber-col-left{ left:3%; }
  .chamber-col-right{ right:3%; }

  .chamber-heading{
    position:relative; z-index:6;
    text-align:center;
    padding:9vh 6vw 2vh;
  }
  .chamber-heading h2{
    font-size:clamp(1.7rem, 4.4vw, 3.1rem);
    font-weight:700;
    background:linear-gradient(180deg, #d7fff0 0%, var(--turquoise) 45%, var(--gold-dim) 100%);
    -webkit-background-clip:text; background-clip:text; color:transparent;
    filter:drop-shadow(0 2px 10px rgba(0,0,0,.6));
    letter-spacing:.06em;
  }
  .chamber-heading p{
    margin-top:.6em;
    font-style:italic;
    color:var(--sandstone-lt);
    font-size:clamp(.9rem,1.6vw,1.15rem);
    opacity:.85;
  }

  /* --- Portal grid: three giant magical portals --- */
  .portal-grid{
    position:relative; z-index:10;
    max-width:1100px; margin:0 auto;
    padding:4vh 6vw 18vh;
    display:grid;
    grid-template-columns:repeat(3, 1fr);
    gap:clamp(24px,4vw,64px);
    justify-items:center;
  }
  @media (max-width:900px){ .portal-grid{ grid-template-columns:1fr; row-gap:80px; } }

  .portal-btn{
    position:relative;
    background:none; border:none; cursor:pointer;
    padding:0; width:100%; max-width:280px;
    display:flex; flex-direction:column; align-items:center;
    color:inherit;
    -webkit-tap-highlight-color:transparent;
  }

  .portal-glow-ring{
    position:absolute; top:42%; left:50%;
    width:170%; padding-top:170%;
    transform:translate(-50%,-50%) scale(.62);
    border-radius:50%;
    background:radial-gradient(circle, rgba(46,139,125,.5), rgba(212,175,55,.18) 55%, transparent 74%);
    opacity:.55;
    transition:opacity .5s var(--ease-heavy), transform .5s var(--ease-heavy);
    z-index:-1;
    pointer-events:none;
    animation:portalGlowPulse 5s ease-in-out infinite;
  }
  @keyframes portalGlowPulse{
    0%,100%{ opacity:.5; }
    50%    { opacity:.75; }
  }
  .portal-btn:hover .portal-glow-ring,
  .portal-btn:focus-visible .portal-glow-ring{ opacity:1; transform:translate(-50%,-50%) scale(1); }

  .portal-figure{
    width:clamp(150px,17vw,220px);
    animation:portalFloat 5.2s ease-in-out infinite;
    transition:filter .45s var(--ease-heavy), transform .45s var(--ease-heavy);
    filter:drop-shadow(0 16px 22px rgba(0,0,0,.6));
  }
  .portal-btn:hover .portal-figure,
  .portal-btn:focus-visible .portal-figure{
    filter:drop-shadow(0 22px 30px rgba(0,0,0,.65)) drop-shadow(0 0 28px rgba(46,139,125,.85));
    transform:translateY(-6px) scale(1.06);
  }
  .portal-btn:active .portal-figure{ transform:translateY(1px) scale(1.01); transition-duration:.12s; }
  .portal-btn.is-activated .portal-figure{ filter:drop-shadow(0 0 40px rgba(244,211,94,.95)); }

  @keyframes portalFloat{ 0%,100%{ transform:translateY(0); } 50%{ transform:translateY(-10px); } }
  .portal-station:nth-child(2) .portal-figure{ animation-duration:5.8s; animation-delay:.3s; }
  .portal-station:nth-child(3) .portal-figure{ animation-duration:6.2s; animation-delay:.6s; }

  .portal-swirl-ring{ transform-origin:50% 50%; animation:portalRingSpin 14s linear infinite; }
  .portal-swirl-ring-rev{ transform-origin:50% 50%; animation:portalRingSpinRev 20s linear infinite; }
  @keyframes portalRingSpin{ to{ transform:rotate(360deg); } }
  @keyframes portalRingSpinRev{ to{ transform:rotate(-360deg); } }
  .portal-btn:hover .portal-swirl-ring,
  .portal-btn:focus-visible .portal-swirl-ring{ animation-duration:5s; }
  .portal-btn:hover .portal-swirl-ring-rev,
  .portal-btn:focus-visible .portal-swirl-ring-rev{ animation-duration:7s; }

  .portal-core{ animation:portalCorePulse 3.4s ease-in-out infinite; transform-origin:50% 50%; }
  @keyframes portalCorePulse{
    0%,100%{ opacity:.85; transform:scale(1); }
    50%    { opacity:1;   transform:scale(1.06); }
  }

  .portal-rune{ opacity:.6; transition:opacity .4s; }
  .portal-btn:hover .portal-rune,
  .portal-btn:focus-visible .portal-rune{ opacity:1; filter:drop-shadow(0 0 5px rgba(244,211,94,.9)); }

  .portal-pedestal{
    width:56%; height:16px;
    background:linear-gradient(to bottom, var(--stone-600), var(--stone-800));
    border-radius:4px 4px 9px 9px;
    box-shadow:0 8px 16px rgba(0,0,0,.5), inset 0 1px 0 rgba(255,220,170,.18);
    margin-top:10px;
  }

  .portal-label{
    margin-top:16px;
    font-family:'Cinzel', serif;
    font-size:.82rem;
    letter-spacing:.16em;
    text-transform:uppercase;
    color:var(--sandstone-lt);
    border:1px solid rgba(46,139,125,.5);
    border-radius:999px;
    padding:.55em 1.3em;
    background:rgba(14,20,18,.5);
    transition:all .35s var(--ease-heavy);
  }
  .portal-btn:hover .portal-label,
  .portal-btn:focus-visible .portal-label{
    border-color:var(--turquoise);
    color:var(--stone-900);
    background:linear-gradient(180deg, #bff4ea, var(--turquoise));
  }

  .portal-sound-placeholder{ display:none; } /* soft sound architecture placeholder — no audio wired yet */

  .portal-spark{
    position:absolute; width:4px; height:4px; border-radius:50%;
    background:radial-gradient(circle, #bff4ea, transparent 70%);
    pointer-events:none;
    animation:portalSparkUp 1.4s ease-out forwards;
  }
  @keyframes portalSparkUp{ to{ transform:translate(var(--sx,0), var(--sy,-60px)); opacity:0; } }

  /* --- Corridor toward the Student Hall --- */
  .chamber-corridor{
    position:relative;
    width:100%;
    min-height:35vh;
    background:linear-gradient(to bottom, transparent 0%, #0d0f0b 30%, #06080503 100%);
    overflow:hidden;
    perspective:900px;
    z-index:2;
}
  .chamber-corridor-fog{
    position:absolute; inset:0;
    background:radial-gradient(ellipse 55% 35% at 50% 25%, rgba(46,139,125,.14), transparent 70%);
    z-index:3; pointer-events:none;
  }
  .chamber-hiero-wall{
    position:absolute; top:0; bottom:0;
    width:22%;
    background-color:var(--stone-800);
    background-image:
      repeating-linear-gradient(0deg, rgba(46,139,125,.06) 0 2px, transparent 2px 34px),
      repeating-linear-gradient(90deg, rgba(212,175,55,.05) 0 2px, transparent 2px 46px);
    z-index:1; opacity:.85;
  }
  .chamber-hiero-wall.left{  left:0;  clip-path:polygon(0 0, 100% 0, 66% 100%, 0 100%); }
  .chamber-hiero-wall.right{ right:0; clip-path:polygon(0 0, 100% 0, 100% 100%, 34% 100%); }

  .chamber-pillars-row{ position:absolute; inset:0; z-index:4; pointer-events:none; }
  .chamber-p-col{
    position:absolute; top:0; width:48px; height:100%;
    background:linear-gradient(to bottom, var(--sandstone), var(--stone-700) 85%);
    box-shadow:inset -6px 0 14px rgba(0,0,0,.6), inset 6px 0 10px rgba(255,220,170,.1);
  }
  .chamber-p-col::before{
    content:""; position:absolute; top:0; left:-16%;
    width:132%; height:5%; background:var(--gold-dim);
  }

  .chamber-corridor-floor{
    position:absolute; bottom:0; left:50%; transform:translateX(-50%);
    width:92%; height:32%;
    background:
      repeating-linear-gradient(to top, rgba(0,0,0,0) 0 6%, rgba(0,0,0,.2) 6% 6.6%),
      linear-gradient(to top, var(--stone-700), var(--stone-800) 70%, transparent);
    clip-path:polygon(36% 100%, 64% 100%, 100% 0%, 0% 0%);
    z-index:2; opacity:.9;
  }

  .chamber-corridor-line{
    position:absolute; top:16%; left:50%; transform:translate(-50%,0);
    width:min(80vw,480px);
    text-align:center;
    font-style:italic;
    font-size:clamp(1rem,2.2vw,1.35rem);
    color:var(--sandstone-lt);
    z-index:10;
    opacity:0;
    text-shadow:0 2px 12px rgba(0,0,0,.7);
  }
  .chamber-corridor-line.visible{ animation:fadeUp 1.4s var(--ease-heavy) forwards; }

  @media (max-width:720px){
    .chamber-column{ display:none; }
  }

  /* ============================================================
     LEVEL 5 — STUDENT HALL  (new, additive only)
  ============================================================ */
  .student-hall{

    position:relative;

    padding:140px 0 180px;

    min-height:110vh;

    overflow:hidden;

}
  .student-entry-glow{
    position:absolute; top:0; left:50%; transform:translateX(-50%);
    width:120%; height:32vh;
    background:radial-gradient(ellipse at 50% 0%, rgba(212,175,55,.26), transparent 70%);
    z-index:1; pointer-events:none;
  }
  .student-floor{
    position:absolute; bottom:0; left:0; right:0; height:18%;
    background:
      repeating-linear-gradient(90deg, rgba(212,175,55,.04) 0 2px, transparent 2px 50px),
      linear-gradient(to top, var(--stone-800), transparent);
    z-index:1;
  }

  .student-heading{

    text-align:center;

    margin-bottom:90px;

}

.student-heading h2{

    margin-bottom:18px;

    font-size:58px;

}

.student-heading p{

    margin-top:15px;

    font-size:20px;

    opacity:.8;

}

  /* --- Decorative Egyptian frame + image placeholder --- */
  .student-frame-wrap{
    position:relative; z-index:6;
    display:flex; justify-content:center;
    padding:2vh 6vw 6vh;
  }
  .student-frame{
    position:relative;
    width:min(74vw,340px); aspect-ratio:3/4;
    padding:18px;
    background:linear-gradient(160deg, var(--gold-bright), var(--gold) 45%, var(--gold-dim) 100%);
    border-radius:14px;
    box-shadow:0 18px 44px rgba(0,0,0,.55), 0 0 0 2px rgba(0,0,0,.35), 0 0 40px rgba(212,175,55,.25);
  }
  .student-frame-inner{
    position:relative;
    width:100%; height:100%;
    border-radius:8px;
    background:radial-gradient(ellipse at 50% 38%, #2a1f14 0%, #150f0a 78%);
    border:2px solid rgba(212,175,55,.5);
    display:flex; align-items:center; justify-content:center;
    overflow:hidden;
  }
  .student-frame-corner{
    position:absolute; width:26px; height:26px;
    filter:drop-shadow(0 0 4px rgba(0,0,0,.6));
  }
  .student-frame-corner.tl{ top:6px;  left:6px; }
  .student-frame-corner.tr{ top:6px;  right:6px; transform:scaleX(-1); }
  .student-frame-corner.bl{ bottom:6px; left:6px; transform:scaleY(-1); }
  .student-frame-corner.br{ bottom:6px; right:6px; transform:scale(-1,-1); }

  .student-image-placeholder{ width:52%; opacity:.55; }
  .student-frame-caption{
    position:absolute; bottom:8%; left:0; right:0;
    text-align:center;
    font-family:'Cinzel', serif;
    font-size:.62rem;
    letter-spacing:.16em;
    text-transform:uppercase;
    color:rgba(232,200,150,.55);
  }

  .student-name-placeholder{
    position:relative; z-index:6;
    text-align:center;
    font-family:'Cinzel', serif;
    font-size:clamp(1rem,2vw,1.3rem);
    letter-spacing:.1em;
    color:var(--gold-bright);
    margin-top:-2vh;
    padding-bottom:2vh;
  }
  .student-name-placeholder small{
    display:block;
    margin-top:.3em;
    font-family:'Cormorant Garamond', serif;
    font-style:italic;
    font-weight:500;
    letter-spacing:.02em;
    color:var(--sandstone-lt);
    text-transform:none;
    font-size:.85em;
  }

  /* --- Statistic cards --- */
  .stat-grid{
    position:relative; z-index:6;
    max-width:900px; margin:0 auto;
    padding:2vh 6vw 14vh;
    display:grid;
    grid-template-columns:repeat(3, 1fr);
    gap:clamp(16px,3vw,32px);
  }
  @media (max-width:720px){ .stat-grid{ grid-template-columns:1fr; } }

  .stat-card{
    position:relative;
    padding:clamp(20px,3vw,32px) clamp(14px,2.4vw,22px);
    text-align:center;
    border-radius:14px;
    background:linear-gradient(180deg, rgba(61,47,34,.55), rgba(20,15,10,.7));
    border:1px solid rgba(212,175,55,.35);
    box-shadow:0 12px 26px rgba(0,0,0,.4), inset 0 1px 0 rgba(255,220,170,.08);
    opacity:0; transform:translateY(18px);
    transition:opacity .8s var(--ease-heavy), transform .8s var(--ease-heavy), box-shadow .4s;
  }
  .stat-card.visible{ opacity:1; transform:translateY(0); }
  .stat-card:hover{
    box-shadow:0 16px 34px rgba(0,0,0,.5), 0 0 24px rgba(212,175,55,.3), inset 0 1px 0 rgba(255,220,170,.12);
    border-color:var(--gold-bright);
  }
  .stat-icon{ width:clamp(30px,4vw,40px); margin:0 auto .6em; opacity:.85; }
  .stat-number{
    display:block;
    font-family:'Cinzel', serif;
    font-weight:700;
    font-size:clamp(1.7rem,4vw,2.5rem);
    background:linear-gradient(180deg, #fff3d0, var(--gold-bright));
    -webkit-background-clip:text; background-clip:text; color:transparent;
  }
  .stat-label{
    display:block; margin-top:.4em;
    font-family:'Cinzel', serif;
    font-size:.7rem; letter-spacing:.14em; text-transform:uppercase;
    color:var(--sandstone-lt);
  }

  /* ============================================================
   LEVEL 5 — TEMPLE EXIT
   FINAL DAWN / DESERT SCENE
   ============================================================ */

.temple-exit {
  position: relative;
  width: 100%;
  min-height: 210vh;
  overflow: hidden;
  isolation: isolate;

  background:
    linear-gradient(
      to bottom,
      #030304 0%,
      #080604 16%,
      #20140c 38%,
      #8b512b 62%,
      #d49a52 78%,
      #c58b45 100%
    );
}


/* ============================================================
   SKY
   ============================================================ */

.temple-exit .exit-sky {
  position: absolute;
  inset: 0;
  z-index: 0;

  background:
    radial-gradient(
      circle at 50% 67%,
      rgba(255, 197, 101, .75) 0%,
      rgba(239, 151, 69, .32) 14%,
      rgba(121, 66, 42, .18) 30%,
      transparent 54%
    ),
    linear-gradient(
      to bottom,
      #020205 0%,
      #08070d 22%,
      #28151b 43%,
      #7a3f28 65%,
      #d3914d 82%,
      #e4ae65 100%
    );

  transition:
    background 1s ease;
}


/* warm horizon */

.temple-exit .exit-sky::after {
  content: "";

  position: absolute;

  left: 50%;
  bottom: 22%;

  width: min(55vw, 700px);
  height: min(55vw, 700px);

  transform: translateX(-50%);

  border-radius: 50%;

  background:
    radial-gradient(
      circle,
      rgba(255, 224, 157, .95) 0%,
      rgba(255, 190, 92, .55) 22%,
      rgba(255, 153, 61, .22) 45%,
      transparent 72%
    );

  filter: blur(8px);

  opacity: .85;
}


/* ============================================================
   STARS
   ============================================================ */

.temple-exit .exit-sky::before {
  content: "";

  position: absolute;
  inset: 0;

  background-image:
    radial-gradient(circle at 12% 14%, rgba(255,255,255,.7) 0 1px, transparent 2px),
    radial-gradient(circle at 24% 22%, rgba(255,255,255,.5) 0 1px, transparent 2px),
    radial-gradient(circle at 39% 10%, rgba(255,255,255,.65) 0 1px, transparent 2px),
    radial-gradient(circle at 57% 18%, rgba(255,255,255,.55) 0 1px, transparent 2px),
    radial-gradient(circle at 72% 11%, rgba(255,255,255,.65) 0 1px, transparent 2px),
    radial-gradient(circle at 87% 24%, rgba(255,255,255,.45) 0 1px, transparent 2px),
    radial-gradient(circle at 94% 9%, rgba(255,255,255,.55) 0 1px, transparent 2px);

  opacity: .75;

  animation:
    exitStarsFade 12s ease forwards;
}

@keyframes exitStarsFade {

  0% {
    opacity: .8;
  }

  55% {
    opacity: .45;
  }

  100% {
    opacity: 0;
  }

}


/* ============================================================
   DISTANT MOUNTAINS
   ============================================================ */

.temple-exit::before {

  content: "";

  position: absolute;

  left: -10%;
  right: -10%;
  bottom: 37%;

  height: 25%;

  z-index: 1;

  background:
    linear-gradient(
      135deg,
      transparent 20%,
      #21130e 20%,
      #21130e 34%,
      transparent 34%
    ),
    linear-gradient(
      45deg,
      transparent 30%,
      #2b1810 30%,
      #2b1810 47%,
      transparent 47%
    );

  opacity: .8;

  transform: scaleX(1.2);
}


/* ============================================================
   TEMPLE GATE
   ============================================================ */

.temple-exit .exit-gate-wrap {

  position: absolute;

  left: 50%;
  top: 7%;

  width: min(62vw, 570px);
  height: min(76vh, 650px);

  transform:
    translateX(-50%);

  z-index: 5;

  perspective: 1500px;

  filter:
    drop-shadow(
      0 35px 50px
      rgba(0,0,0,.75)
    );
}


/* ============================================================
   GATE GLOW
   ============================================================ */

.temple-exit .exit-gate-glow {

  position: absolute;

  left: 50%;
  top: 20%;

  width: 58%;
  height: 62%;

  transform: translateX(-50%);

  background:
    radial-gradient(
      ellipse,
      rgba(255, 231, 167, .95) 0%,
      rgba(255, 185, 74, .65) 22%,
      rgba(218, 126, 41, .28) 48%,
      transparent 76%
    );

  filter: blur(16px);

  opacity: .35;

  z-index: 0;
}


/* ============================================================
   TEMPLE FRAME
   ============================================================ */

.temple-exit .exit-gate-wrap::before {

  content: "";

  position: absolute;

  left: 50%;
  top: 0;

  width: 100%;
  height: 100%;

  transform: translateX(-50%);

  background:
    linear-gradient(
      90deg,
      #24170d 0%,
      #6d4b25 9%,
      #9b7139 14%,
      #513619 19%,
      transparent 19%,
      transparent 81%,
      #513619 81%,
      #9b7139 86%,
      #6d4b25 91%,
      #24170d 100%
    );

  border:
    4px solid #9c753d;

  box-shadow:
    inset 0 0 40px rgba(0,0,0,.8),
    0 15px 35px rgba(0,0,0,.65);

  z-index: 1;

}


/* ============================================================
   TEMPLE CROWN
   ============================================================ */

.temple-exit .exit-gate-wrap::after {

  content: "𓂀";

  position: absolute;

  left: 50%;
  top: -42px;

  transform: translateX(-50%);

  width: 100px;
  height: 62px;

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

  background:
    linear-gradient(
      to bottom,
      #c69b50,
      #765126
    );

  border:
    3px solid #3c2814;

  color: #e8c56c;

  font-family: Georgia, serif;

  font-size: 38px;

  text-shadow:
    0 0 14px rgba(238,195,87,.45);

  z-index: 10;
}


/* ============================================================
   DOORS
   ============================================================ */

.temple-exit .exit-door {

  position: absolute;

  top: 8%;

  width: 42%;
  height: 84%;

  background:
    linear-gradient(
      90deg,
      #2b1b0d,
      #65451f 16%,
      #a0783b 45%,
      #745225 72%,
      #2b1b0d
    );

  border:
    3px solid #3c2813;

  box-shadow:
    inset 0 0 35px rgba(0,0,0,.75),
    inset 0 0 0 5px rgba(211,171,87,.08);

  transform-style: preserve-3d;

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


/* inner carving */

.temple-exit .exit-door::before {

  content: "";

  position: absolute;

  inset: 22px;

  border:
    2px solid rgba(205,166,83,.28);

  box-shadow:
    inset 0 0 0 5px rgba(205,166,83,.04);
}


/* hieroglyphic engraving */

.temple-exit .exit-door::after {

  content: "𓂀 𓋹 𓆣 𓇳";

  position: absolute;

  left: 50%;
  top: 48%;

  transform:
    translate(-50%,-50%)
    rotate(90deg);

  white-space: nowrap;

  color: rgba(65,43,19,.75);

  font-size: 24px;

  letter-spacing: 18px;
}


.temple-exit .exit-door-left {

  left: 9%;

  transform-origin: left center;

  transform:
    rotateY(0deg);
}


.temple-exit .exit-door-right {

  right: 9%;

  transform-origin: right center;

  transform:
    rotateY(0deg);
}


/* ============================================================
   DOOR LIGHT
   ============================================================ */

.temple-exit .exit-gate-wrap {

  --exit-door-open: 0deg;
}


/* ============================================================
   DESERT GROUND
   ============================================================ */

.temple-exit {

  --sand-1: #c68a43;
  --sand-2: #a96e35;
  --sand-3: #714522;
  --sand-shadow: #3b2413;
}


.temple-exit .exit-ground {

  position: absolute;

  left: -10%;
  right: -10%;
  bottom: 0;

  height: 58%;

  z-index: 3;

  transform:
    perspective(700px)
    rotateX(58deg);

  transform-origin: bottom;

  background:

    radial-gradient(
      ellipse at 50% 15%,
      rgba(255,212,128,.3),
      transparent 45%
    ),

    repeating-linear-gradient(
      172deg,
      rgba(91,53,26,.16) 0px,
      rgba(91,53,26,.16) 2px,
      transparent 2px,
      transparent 18px
    ),

    linear-gradient(
      to bottom,
      #b77839,
      #8b5629 45%,
      #4d2d18 100%
    );

  clip-path:
    polygon(
      35% 0,
      65% 0,
      100% 100%,
      0 100%
    );

  box-shadow:
    0 -20px 50px rgba(237,166,75,.18);
}


/* ============================================================
   SAND DUNES
   ============================================================ */

.temple-exit .exit-ground::before,
.temple-exit .exit-ground::after {

  content: "";

  position: absolute;

  left: -10%;
  width: 120%;

  border-radius: 50%;

  pointer-events: none;
}


.temple-exit .exit-ground::before {

  top: 8%;

  height: 90px;

  background:
    radial-gradient(
      ellipse,
      rgba(221,162,83,.55),
      rgba(168,104,49,.15) 55%,
      transparent 70%
    );

}


.temple-exit .exit-ground::after {

  bottom: 8%;

  height: 130px;

  background:
    radial-gradient(
      ellipse,
      rgba(42,24,12,.4),
      transparent 68%
    );
}


/* ============================================================
   SAND RIPPLE LINES
   ============================================================ */

.temple-exit .exit-ground {

  background-image:

    repeating-radial-gradient(
      ellipse at 50% 100%,
      transparent 0 20px,
      rgba(55,31,15,.18) 21px 23px,
      transparent 24px 46px
    ),

    linear-gradient(
      to bottom,
      #c28645,
      #8a5428 48%,
      #4a2b17
    );
}


/* ============================================================
   SNAKES
   ============================================================ */

.temple-exit::after {

  content: "";

  position: absolute;

  left: 18%;
  bottom: 13%;

  width: 100px;
  height: 5px;

  z-index: 7;

  border-radius: 50%;

  background:
    linear-gradient(
      90deg,
      transparent 0%,
      #2d1a0d 12%,
      #513019 30%,
      #25150b 50%,
      #5b351a 70%,
      #211209 88%,
      transparent 100%
    );

  box-shadow:
    0 0 0 1px rgba(195,145,65,.12);

  animation:
    exitSnakeMove 7s ease-in-out infinite;
}


@keyframes exitSnakeMove {

  0% {
    transform:
      translateX(-30px)
      translateY(0)
      rotate(-3deg);
  }

  25% {
    transform:
      translateX(45px)
      translateY(-4px)
      rotate(5deg);
  }

  50% {
    transform:
      translateX(100px)
      translateY(3px)
      rotate(-4deg);
  }

  75% {
    transform:
      translateX(145px)
      translateY(-3px)
      rotate(4deg);
  }

  100% {
    transform:
      translateX(210px)
      translateY(0)
      rotate(-2deg);
  }

}


/* ============================================================
   SECOND SNAKE
   ============================================================ */

.temple-exit .exit-farewell::before {

  content: "";

  position: absolute;

  left: 8%;
  bottom: 10%;

  width: 70px;
  height: 4px;

  border-radius: 50%;

  background:
    linear-gradient(
      90deg,
      transparent,
      #3a2110,
      #68401d,
      #2b170a,
      transparent
    );

  animation:
    exitSnakeSmall 9s ease-in-out infinite;
}


@keyframes exitSnakeSmall {

  0%,100% {
    transform: translateX(0);
  }

  50% {
    transform: translateX(180px);
  }

}


/* ============================================================
   DUST PARTICLES
   ============================================================ */

.temple-exit .exit-fade-overlay {

  position: absolute;

  inset: 0;

  z-index: 20;

  pointer-events: none;

  background:
    radial-gradient(
      ellipse at 50% 50%,
      transparent 35%,
      rgba(0,0,0,.72) 100%
    );

  opacity: .45;
}


/* ============================================================
   FAREWELL
   ============================================================ */

.temple-exit .exit-farewell {

  position: absolute;

  left: 50%;
  top: 58%;

  width: min(650px, 88%);

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

  z-index: 15;

  text-align: center;

  opacity: 0;

  transition:
    opacity 1s ease,
    transform 1s ease;

  text-shadow:
    0 3px 18px rgba(0,0,0,.85);
}


.temple-exit .exit-farewell.visible {

  opacity: 1;

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


.temple-exit .exit-farewell h2 {

  margin: 0;

  font-family:
    Georgia,
    serif;

  font-size:
    clamp(1.8rem,4vw,3rem);

  letter-spacing:
    .08em;

  color:
    #f0d18a;

  text-shadow:
    0 0 22px rgba(239,191,88,.25),
    0 3px 15px #000;
}


.temple-exit .exit-farewell p {

  color:
    #e1c998;

  font-size:
    clamp(.95rem,1.7vw,1.2rem);

  font-style:
    italic;

  line-height:
    1.7;
}


/* ============================================================
   RETURN BUTTON
   ============================================================ */

.temple-exit .back-home-btn {

  margin-top: 20px;

  padding: 12px 28px;

  border:
    1px solid #b18a4c;

  border-radius: 3px;

  background:
    linear-gradient(
      to bottom,
      #b78b45,
      #69471f
    );

  color:
    #f5dda1;

  font-family:
    Georgia,
    serif;

  letter-spacing:
    .08em;

  cursor:
    pointer;

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

  transition:
    .25s ease;
}


.temple-exit .back-home-btn:hover {

  transform:
    translateY(-3px);

  box-shadow:
    0 12px 30px rgba(0,0,0,.6);
}


/* ============================================================
   INFORMATION AREA
   ============================================================ */

.temple-exit .exit-footer {

  position: relative;

  z-index: 12;

  max-width: 1180px;

  margin:
    0 auto;

  padding:
    90px 6vw 70px;

  display:
    grid;

  grid-template-columns:
    repeat(4,1fr);

  gap:
    24px;
}


.temple-exit .exit-card {

  position: relative;

  padding:
    28px 22px;

  background:

    linear-gradient(
      145deg,
      rgba(83,58,28,.9),
      rgba(34,21,11,.96)
    );

  border:
    2px solid rgba(195,150,73,.45);

  border-radius:
    2px;

  box-shadow:

    inset 0 0 0 5px rgba(0,0,0,.18),

    inset 0 0 25px rgba(0,0,0,.4),

    0 18px 35px rgba(0,0,0,.55);
}


.temple-exit .exit-card::before {

  content: "𓋹";

  position: absolute;

  left: 50%;
  top: -17px;

  transform:
    translateX(-50%);

  width: 34px;
  height: 34px;

  display:
    flex;

  align-items:
    center;

  justify-content:
    center;

  background:
    #5c3e1e;

  border:
    1px solid #b48a45;

  color:
    #dfbc68;

  font-size:
    17px;
}


.temple-exit .exit-card h3 {

  margin:
    0 0 15px;

  padding-bottom:
    12px;

  border-bottom:
    1px solid rgba(208,166,86,.25);

  color:
    #e4c578;

  font-family:
    Georgia,
    serif;

  font-size:
    .9rem;

  letter-spacing:
    .12em;

  text-transform:
    uppercase;
}


.temple-exit .exit-card p,
.temple-exit .exit-card a {

  color:
    #d3bf91;

  font-size:
    .92rem;

  line-height:
    1.7;

  text-decoration:
    none;
}


.temple-exit .exit-card a:hover {

  color:
    #f0d27e;

}


/* ============================================================
   SOCIAL
   ============================================================ */

.temple-exit .social-row {

  display:
    flex;

  flex-wrap:
    wrap;

  gap:
    8px;
}


.temple-exit .social-pill {

  padding:
    7px 12px;

  border:
    1px solid rgba(203,163,79,.4);

  border-radius:
    2px;

  color:
    #d7c18c !important;

  font-size:
    .7rem !important;

  letter-spacing:
    .08em;
}


/* ============================================================
   SIGN OFF
   ============================================================ */

.temple-exit .exit-signoff {

  position:
    relative;

  z-index:
    12;

  margin:
    0;

  padding:
    0 6vw 70px;

  text-align:
    center;

  color:
    #a88a52;

  font-family:
    Georgia,
    serif;

  font-size:
    .72rem;

  letter-spacing:
    .3em;

  text-transform:
    uppercase;
}


/* ============================================================
   RESPONSIVE
   ============================================================ */

@media (max-width:900px){

  .temple-exit .exit-footer {

    grid-template-columns:
      repeat(2,1fr);

  }

  .temple-exit .exit-gate-wrap {

    width:
      min(78vw,500px);

  }

}


@media (max-width:560px){

  .temple-exit {

    min-height:
      230vh;

  }

  .temple-exit .exit-footer {

    grid-template-columns:
      1fr;

    padding:
      70px 7vw;

  }

  .temple-exit .exit-gate-wrap {

    width:
      90vw;

    height:
      60vh;

  }

  .temple-exit .exit-farewell {

    top:
      54%;

  }

}


/* ============================================================
   REDUCED MOTION
   ============================================================ */

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

  .temple-exit .exit-door {

    transition:
      none;

  }

  .temple-exit .exit-sky::before,
  .temple-exit::after,
  .temple-exit .exit-farewell::before {

    animation:
      none;

  }

}

آخر كود عندك

/* ============================================================
   ENTRANCE — Temple Action Tablets
============================================================ */

.temple-actions{
...
}
/* ============================================================
   ENTRANCE — Temple Action Tablets  (PATCH: premium relic redesign)
   Appended override block. Placed after the original .temple-actions
   rule (not shown in full in the uploaded file) so nothing unseen
   is deleted or rewritten — later source order takes precedence.
============================================================ */

.temple-actions{
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  gap:clamp(18px,2.6vw,34px);
  width:100%;
  max-width:920px;
  margin:2.4em auto 0;
  align-items:stretch;
}
@media (max-width:760px){
  .temple-actions{ grid-template-columns:1fr; max-width:420px; }
}

.temple-tablet{
  position:relative;
  cursor:pointer;
  border:none;
  -webkit-tap-highlight-color:transparent;
  display:flex;
  flex-direction:column;
  align-items:center;
  text-align:center;
  padding:2.2em 1.4em 1.8em;
  min-height:220px;
  color:inherit;
  font-family:inherit;

  background:
    radial-gradient(ellipse at 30% 15%, rgba(255,240,200,.10), transparent 55%),
    linear-gradient(155deg, var(--sandstone-lt) 0%, var(--sandstone) 42%, var(--stone-600) 100%);

  clip-path:polygon(
    3% 6%, 22% 0%, 78% 2%, 97% 8%,
    100% 30%, 98% 70%, 100% 92%,
    80% 100%, 24% 98%, 2% 94%,
    0% 68%, 3% 32%
  );

  box-shadow:
    0 0 0 3px var(--stone-800),
    0 0 0 5px rgba(212,175,55,.4),
    0 18px 34px rgba(0,0,0,.55),
    inset 0 0 40px rgba(0,0,0,.4),
    inset 0 2px 0 rgba(255,236,190,.25);

  transition:
    transform .5s var(--ease-heavy),
    box-shadow .5s var(--ease-heavy),
    filter .5s var(--ease-heavy);
  transform:translateY(0) scale(1);
  isolation:isolate;
  overflow:hidden;
}

.temple-tablet::before{
  content:"";
  position:absolute; inset:10px;
  border:1px solid rgba(212,175,55,.55);
  background-image:
    repeating-linear-gradient(0deg, rgba(43,33,24,.35) 0 2px, transparent 2px 22px),
    repeating-linear-gradient(90deg, rgba(43,33,24,.28) 0 2px, transparent 2px 22px);
  opacity:.5;
  mix-blend-mode:multiply;
  pointer-events:none;
  z-index:1;
}

.temple-tablet::after{
  content:"";
  position:absolute; inset:0;
  box-shadow:inset 0 0 0 1px rgba(244,211,94,0);
  border-radius:2px;
  pointer-events:none;
  z-index:5;
  transition:box-shadow .5s var(--ease-heavy);
}
.temple-tablet:hover::after,
.temple-tablet:focus-visible::after{
  box-shadow:inset 0 0 0 1px rgba(244,211,94,.9), inset 0 0 26px rgba(244,211,94,.25);
}

/* middle tablet receives slightly more light */
.temple-tablet:nth-child(2){
  background:
    radial-gradient(ellipse at 35% 12%, rgba(255,246,220,.22), transparent 60%),
    linear-gradient(155deg, var(--sandstone-lt) 0%, var(--sandstone) 40%, var(--stone-600) 100%);
  box-shadow:
    0 0 0 3px var(--stone-800),
    0 0 0 5px rgba(244,211,94,.55),
    0 20px 40px rgba(0,0,0,.55),
    inset 0 0 40px rgba(0,0,0,.35),
    inset 0 2px 0 rgba(255,246,220,.4),
    0 0 34px rgba(244,211,94,.18);
}

.temple-tablet:hover,
.temple-tablet:focus-visible{
  transform:translateY(-8px) scale(1.03);
  box-shadow:
    0 0 0 3px var(--stone-800),
    0 0 0 5px var(--gold-bright),
    0 26px 46px rgba(0,0,0,.6),
    inset 0 0 40px rgba(0,0,0,.3),
    inset 0 2px 0 rgba(255,246,220,.4),
    0 0 44px rgba(244,211,94,.35);
}
.temple-tablet:active{
  transform:translateY(-2px) scale(.98);
  transition-duration:.12s;
}

.temple-tablet-glow{
  position:absolute; inset:-20%;
  background:radial-gradient(circle at 50% 30%, rgba(46,139,125,.35), rgba(212,175,55,.15) 45%, transparent 72%);
  opacity:.3;
  transition:opacity .5s var(--ease-heavy);
  z-index:0;
  pointer-events:none;
  animation:tabletAura 5s ease-in-out infinite;
}
@keyframes tabletAura{
  0%,100%{ opacity:.25; }
  50%    { opacity:.5; }
}
.temple-tablet:hover .temple-tablet-glow,
.temple-tablet:focus-visible .temple-tablet-glow{ opacity:.85; }

.temple-tablet-sweep{
  position:absolute; inset:0;
  background:linear-gradient(100deg, transparent 30%, rgba(255,255,255,.35) 45%, transparent 60%);
  background-size:250% 100%;
  background-position:150% 0;
  mix-blend-mode:overlay;
  opacity:0;
  z-index:3;
  pointer-events:none;
  transition:opacity .3s;
}
.temple-tablet:hover .temple-tablet-sweep,
.temple-tablet:focus-visible .temple-tablet-sweep{
  opacity:1;
  animation:titleShimmer 1.4s ease-out; /* reuses existing @keyframes titleShimmer, unmodified */
}

.temple-tablet-icon{
  position:relative; z-index:4;
  display:flex; align-items:center; justify-content:center;
  width:56px; height:56px;
  margin-bottom:.5em;
  color:var(--gold);
  filter:drop-shadow(0 0 6px rgba(212,175,55,.4));
  transition:transform .5s var(--ease-heavy), color .5s, filter .5s;
}
.tablet-icon-svg{ width:100%; height:100%; }
.temple-tablet:hover .temple-tablet-icon,
.temple-tablet:focus-visible .temple-tablet-icon{
  color:var(--gold-bright);
  filter:drop-shadow(0 0 14px rgba(244,211,94,.85)) drop-shadow(0 0 22px rgba(46,139,125,.4));
  transform:rotate(3deg) scale(1.06);
}

.temple-tablet-title{
  position:relative; z-index:4;
  display:block;
  font-family:'Cinzel', serif;
  font-weight:700;
  font-size:clamp(.92rem,1.6vw,1.08rem);
  letter-spacing:.09em;
  color:var(--stone-900);
  text-shadow:
    0 1px 0 rgba(255,246,220,.5),
    0 -1px 1px rgba(0,0,0,.45);
  margin-bottom:.4em;
  transition:text-shadow .5s var(--ease-heavy);
}
.temple-tablet:hover .temple-tablet-title,
.temple-tablet:focus-visible .temple-tablet-title{
  text-shadow:
    0 1px 0 rgba(255,246,220,.7),
    0 -1px 1px rgba(0,0,0,.5),
    0 0 16px rgba(244,211,94,.35);
}

.temple-tablet-desc{
  position:relative; z-index:4;
  display:block;
  font-style:italic;
  font-size:.82rem;
  color:var(--stone-700);
  opacity:.85;
  max-width:22ch;
}

/* click ripple + gold flash — classes toggled by the small JS addition below */
.temple-tablet-ripple{
  position:absolute; top:50%; left:50%;
  width:16px; height:16px;
  margin:-8px 0 0 -8px;
  border-radius:50%;
  border:2px solid var(--gold-bright);
  opacity:.9;
  z-index:6;
  pointer-events:none;
  animation:templeRippleOut .7s var(--ease-heavy) forwards;
}
@keyframes templeRippleOut{
  to{ width:340px; height:340px; margin:-170px 0 0 -170px; opacity:0; }
}

.temple-tablet-flash{
  position:absolute; inset:0;
  background:radial-gradient(circle at 50% 40%, rgba(244,211,94,.55), transparent 70%);
  opacity:0;
  z-index:6;
  pointer-events:none;
  animation:templeFlash .5s ease-out forwards;
}
@keyframes templeFlash{
  0%{ opacity:.9; }
  100%{ opacity:0; }
}

.temple-tablet.is-clicked{
  transform:translateY(-2px) scale(.97);
}

.temple-spark{
  position:absolute; width:4px; height:4px; border-radius:50%;
  background:radial-gradient(circle, var(--gold-bright), transparent 70%);
  pointer-events:none;
  z-index:6;
  animation:sparkUp .9s ease-out forwards; /* reuses existing @keyframes sparkUp, unmodified */
}
.temple-spark.teal{
  background:radial-gradient(circle, #bff4ea, transparent 70%);
}

@media (prefers-reduced-motion: reduce){
  .temple-tablet,
  .temple-tablet-icon,
  .temple-tablet-glow{
    animation:none !important;
    transition:none !important;
  }
}

.temple-tablet-icon{
    width:90px;
    height:150px;
    display:flex;
    align-items:center;
    justify-content:center;
}

.temple-tablet-icon .tablet-icon-svg{
    width:90px;
    height:150px;
}

.temple-tablet{
    background:transparent;
    border:none;
}

.temple-tablet::before,
.temple-tablet::after{
    display:none;
}
.temple-tablet-icon .tablet-icon-svg{
    opacity:1;
    filter: drop-shadow(0 0 8px rgba(212,175,55,.35));
}

.temple-tablet-title,
.temple-tablet-desc{
    position:relative;
    z-index:5;
    color:#f3d98b;
    text-shadow:0 2px 5px #000;
}
/* توحيد شكل كل البرديات */
.temple-tablet-icon .tablet-icon-svg{
    opacity:0.9;
    filter: drop-shadow(0 0 10px rgba(212,175,55,.45));
}

/* إزالة أي خلفية بيضاء من الأيقونات */
.temple-tablet-icon{
    background:transparent !important;
}

/* تقوية البردية نفسها */
.scroll-parchment{
    opacity:1 !important;
}
.temple-tablet{
    background:transparent !important;
}
.temple-tablet{
    background:rgba(20,15,10,0.35) !important;
    border:1px solid rgba(212,175,55,0.35);
}
/* =========================
   Story Book Relics - Egyptian Artifact Style
========================= */

.book-grid{
    width:min(1500px,95%);
    margin:auto;

    display:flex;
    flex-wrap:wrap;

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

    gap:90px 120px;

    position:relative;

    padding:120px 0 160px;
}


.book-station{
    perspective:1000px;
}


/* الغلاف الخارجي */

.book-btn{

    position:relative;
    width:100%;
    height:280px;

    border:none;
    cursor:pointer;

    background:
    linear-gradient(
        145deg,
        #24170d,
        #0e0905
    );

    border-radius:22px;

    padding:20px;

    overflow:hidden;

    border:2px solid #d4af37;


    box-shadow:
    0 20px 45px rgba(0,0,0,.7),
    inset 0 0 35px rgba(212,175,55,.25);


    transition:
    transform .5s ease,
    box-shadow .5s ease;
}


/* الإطار الداخلي الفرعوني */

.book-btn::before{

    content:"";

    position:absolute;

    inset:10px;

    border-radius:16px;

    border:2px solid rgba(244,211,94,.55);


    background:

    linear-gradient(
    90deg,
    transparent,
    rgba(212,175,55,.15),
    transparent
    );


}


/* زخارف الزوايا */

.book-btn::after{

    content:"𓂀";

    position:absolute;

    top:12px;
    right:15px;

    color:#f4d35e;

    font-size:28px;

    opacity:.7;

    text-shadow:
    0 0 10px #d4af37;

}


/* حركة عند المرور */

.book-btn:hover{

    transform:
    translateY(-15px)
    rotateX(8deg);

    box-shadow:

    0 35px 70px rgba(212,175,55,.35),
    0 0 35px rgba(212,175,55,.4);

}



/* مكان الصورة */

.book-frame{

    position:relative;

    width:145px;
    height:180px;

    margin:auto;

    display:flex;

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

}


/* الصورة */

.book-cover{

    width:100%;
    height:100%;

    object-fit:cover;

    display:block;

    border-radius:10px;

    border:3px solid #d4af37;

    box-shadow:
        0 18px 30px rgba(0,0,0,.65),
        0 0 18px rgba(212,175,55,.35);

    animation:bookFloat 4s ease-in-out infinite;

    position:relative;
    z-index:2;

    transition:
        transform .35s ease,
        filter .35s ease,
        box-shadow .35s ease;
}
.book-frame{
    position:relative;
    overflow:hidden;
    border-radius:10px;
}

.book-overlay{
    position:absolute;
    inset:0;
    display:flex;
    flex-direction:column;
    justify-content:center;
    align-items:center;
    text-align:center;
    background:rgba(10,8,5,.82);
    backdrop-filter:blur(4px);
    border-radius:10px;
    border:2px solid #d4af37;
    opacity:0;
    transform:scale(.95);
    transition:.35s ease;
}

.book-btn:hover .book-overlay{
    opacity:1;
    transform:scale(1);
}

.book-overlay h3{
    color:#f3d37a;
    margin:0 0 8px;
    font-size:18px;
}

.book-overlay span{
    color:#fff;
    font-size:13px;
    letter-spacing:2px;
    text-transform:uppercase;
}

.book-btn:hover .book-cover{
    transform:scale(1.04);
    filter:brightness(1.12);
    box-shadow:
        0 20px 40px rgba(0,0,0,.75),
        0 0 28px rgba(244,211,94,.55);
}



/* رموز فرعونية جانبية */

.egypt-rune{

    position:absolute;

    width:20px;

    height:140px;

    top:20px;


    opacity:.7;

}


.left-rune{

    left:0;

    border-left:

    2px solid #d4af37;


}


.right-rune{

    right:0;

    border-right:

    2px solid #d4af37;

}


/* خطوط زخرفية صغيرة */

.left-rune::before,
.right-rune::before{

    content:"𓋹";

    position:absolute;

    color:#f4d35e;

    font-size:20px;

    top:40px;

}


/* اسم الرواية */

.book-title{

    display:block;

    margin-top:18px;

    color:#f4d35e;

    font-size:16px;

    font-weight:bold;


    text-shadow:

    0 3px 6px #000;


    position:relative;

    z-index:5;

}


/* حركة الكتاب */

@keyframes bookFloat{


0%,100%{

transform:translateY(0);

}


50%{

transform:translateY(-8px);

}


}


/* شعاع يمر على الغلاف */

.book-btn:hover .book-cover{

    filter:

    brightness(1.15);

}



/* لمعة أثرية */

.book-btn:hover::before{

    animation:

    artifactGlow 1.5s infinite alternate;

}


@keyframes artifactGlow{


from{

opacity:.4;

}


to{

opacity:1;

}


}


/* Responsive */

@media(max-width:900px){

.book-grid{

grid-template-columns:repeat(2,1fr);

}

}


@media(max-width:550px){

.book-grid{

grid-template-columns:1fr;

}

}
.book-frame{
    position:relative;
    overflow:hidden;
    border-radius:16px;

    display:flex;
    justify-content:center;
    align-items:center;
    width:100%;
    height:100%;
}

.book-overlay{
    position:absolute;
    inset:0;
    display:flex;
    flex-direction:column;
    justify-content:center;
    align-items:center;
    text-align:center;

    background:rgba(10,8,5,.82);
    backdrop-filter:blur(4px);

    border:2px solid #d4af37;
    box-shadow:
        inset 0 0 20px rgba(212,175,55,.25),
        0 0 25px rgba(212,175,55,.18);

    opacity:0;
    transform:scale(.92);
    transition:.35s ease;
}

.book-btn:hover .book-overlay{
    opacity:1;
    transform:scale(1);
}

.book-overlay h3{
    color:#f3d37a;
    font-size:20px;
    margin:0 0 10px;
    text-shadow:0 0 12px rgba(255,215,120,.4);
}

.book-overlay span{
    color:#eee;
    font-size:14px;
    letter-spacing:2px;
    text-transform:uppercase;
}
.book-grid{
    position:relative;
}

/* ==========================================
   PHARAONIC DISPLAY SHELVES
========================================== */

.book-grid::before,
.book-grid::after{

    content:"";

    position:absolute;

    left:5%;

    width:90%;

    height:45px;


    background:

    repeating-linear-gradient(
        90deg,
        rgba(255,220,140,.12) 0 4px,
        transparent 4px 45px
    ),

    linear-gradient(
        180deg,
        #c09a58,
        #76542e 45%,
        #2c1d10
    );


    border-radius:12px;


    border:

    2px solid rgba(212,175,55,.65);


    box-shadow:

    0 18px 35px rgba(0,0,0,.8),

    inset 0 3px 6px rgba(255,235,170,.3),

    inset 0 -8px 15px rgba(0,0,0,.65);


    z-index:2;

    pointer-events:none;

}


.book-grid::before{
    top:38%;
}


.book-grid::after{
    top:72%;
}
/* ==========================================
   BOOK REVEAL + NATURAL STAGGER LAYOUT
========================================== */

.book-station{
    opacity:0;
    animation:bookReveal .9s cubic-bezier(.22,.61,.36,1) forwards;
    transition:transform .35s ease;
}

/* اختلاف ارتفاعات الكتب */
.book-station:nth-child(1){ --offset:18px; animation-delay:.08s; }
.book-station:nth-child(2){ --offset:-10px; animation-delay:.16s; }
.book-station:nth-child(3){ --offset:26px; animation-delay:.24s; }
.book-station:nth-child(4){ --offset:-18px; animation-delay:.32s; }

.book-station:nth-child(5){ --offset:10px; animation-delay:.40s; }
.book-station:nth-child(6){ --offset:30px; animation-delay:.48s; }
.book-station:nth-child(7){ --offset:-12px; animation-delay:.56s; }
.book-station:nth-child(8){ --offset:20px; animation-delay:.64s; }

.book-station:nth-child(9){ --offset:-16px; animation-delay:.72s; }
.book-station:nth-child(10){ --offset:14px; animation-delay:.80s; }
.book-station:nth-child(11){ --offset:34px; animation-delay:.88s; }
.book-station:nth-child(12){ --offset:-8px; animation-delay:.96s; }

.book-station:nth-child(13){ --offset:22px; animation-delay:1.04s; }
.book-station:nth-child(14){ --offset:-20px; animation-delay:1.12s; }
.book-station:nth-child(15){ --offset:16px; animation-delay:1.20s; }

@keyframes bookReveal{
    from{
        opacity:0;
        transform:translateY(calc(var(--offset) + 80px)) scale(.85);
        filter:blur(8px);
    }

    to{
        opacity:1;
        transform:translateY(var(--offset)) scale(1);
        filter:blur(0);
    }
}

/* Hover */
.book-station:hover{
    transform:translateY(calc(var(--offset) - 18px)) scale(1.04);
}
/* ==========================================================
   PHASE 2 — HALL OF STORIES UPGRADE
==========================================================*/

.stories{

    position:relative;
    overflow:hidden;
    perspective:1800px;

    background:
    radial-gradient(circle at 50% 15%,
    rgba(255,220,120,.08),
    transparent 45%),

    linear-gradient(to bottom,
    #19120b 0%,
    #100b06 40%,
    #070504 100%);
}


/*-------------------*/
/* BIG BOOK SHELVES */
/*-------------------*/

.book-grid{

    position:relative;

    display:grid;

    grid-template-columns:
    repeat(auto-fit,minmax(180px,1fr));

    gap:65px 45px;

    padding:
    90px 80px
    160px;

    max-width:1600px;

    margin:auto;

    z-index:5;
}


/* الحجر */

.book-grid::before,
.book-grid::after{

    content:"";

    position:absolute;

    left:3%;
    width:94%;

    height:34px;

    border-radius:12px;

    background:

    linear-gradient(
    to bottom,
    #98825c,
    #6f5a3d,
    #4a3826);

    box-shadow:

    0 12px 35px rgba(0,0,0,.65),

    inset 0 2px 2px rgba(255,255,255,.08),

    inset 0 -3px 8px rgba(0,0,0,.45);
}

.book-grid::before{

    top:41%;
}

.book-grid::after{

    top:77%;
}


/*-------------------*/
/* BOOK STATION */
/*-------------------*/

.book-station{

    position:relative;

    display:flex;

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

    transform:
    translateY(var(--offset));

    transition:

    transform .45s ease,
    filter .45s ease;
}

.book-station:hover{

    transform:
    translateY(calc(var(--offset) - 20px))
    scale(1.05);
}


/*-------------------*/
/* PEDESTAL */
/*-------------------*/

.book-frame{

    position:relative;

    width:170px;
    height:235px;

    display:flex;

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

    padding:14px;

    border-radius:18px;

    background:

    linear-gradient(
    180deg,
    #5e4b31,
    #2f2418);

    border:

    2px solid rgba(212,175,55,.55);

    box-shadow:

    0 20px 35px rgba(0,0,0,.65),

    inset 0 1px 2px rgba(255,255,255,.08),

    inset 0 -4px 8px rgba(0,0,0,.45);
}


/*-------------------*/
/* BOOK */
/*-------------------*/

.book-cover{

    width:100%;
    height:100%;

    border-radius:12px;

    object-fit:cover;

    border:

    3px solid #d4af37;

    box-shadow:

    0 25px 40px rgba(0,0,0,.55),

    0 0 18px rgba(212,175,55,.35);

    transition:

    .4s;
}

.book-btn:hover .book-cover{

    transform:

    scale(1.06)

    rotateX(5deg);

    filter:

    brightness(1.18);

    box-shadow:

    0 35px 60px rgba(0,0,0,.7),

    0 0 28px rgba(255,215,120,.55);
}


/*-------------------*/
/* GOLD LIGHT */
/*-------------------*/

.book-frame::after{

    content:"";

    position:absolute;

    bottom:-18px;
    left:50%;

    width:85%;

    height:24px;

    transform:

    translateX(-50%);

    background:

    radial-gradient(

    rgba(255,210,100,.55),

    transparent 70%);

    filter:

    blur(12px);

    opacity:.7;
}


/*-------------------*/
/* THOTH */
/*-------------------*/

.thoth-wrap{

    margin-top:120px;

    transform:

    scale(1.3);

    position:relative;

    z-index:20;
}

.thoth-aura{

    width:340px;
    height:340px;

    position:absolute;

    left:50%;
    top:40%;

    transform:

    translate(-50%,-50%);

    border-radius:50%;

    background:

    radial-gradient(

    rgba(255,220,120,.28),

    transparent 70%);

    filter:blur(40px);

    animation:

    auraPulse 4s infinite;
}

@keyframes auraPulse{

0%,100%{

transform:

translate(-50%,-50%)

scale(1);
}

50%{

transform:

translate(-50%,-50%)

scale(1.15);
}
}


/*-------------------*/
/* LIGHT BEAM */
/*-------------------*/

.thoth-wrap::before{

content:"";

position:absolute;

top:-350px;

left:50%;

transform:

translateX(-50%);

width:180px;

height:500px;

background:

linear-gradient(

to bottom,

rgba(255,245,190,.45),

transparent);

filter:blur(20px);

pointer-events:none;
}
/* ==========================================
   CLEAN FINAL BOOK DISPLAY
========================================== */

.book-station{
    transform:none !important;
}


.book-frame{
    transform:none;
    transition:
    transform .35s ease,
    box-shadow .35s ease;
}


/* حركة اختيار هادئة */

.book-station:hover .book-frame{

    transform:
    translateY(-12px);

    box-shadow:
    0 25px 45px rgba(0,0,0,.75),
    0 0 20px rgba(212,175,55,.25);

}


.book-station:hover .book-cover{

    transform:
    translateY(-5px)
    scale(1.03);

}


/* اختلاف بسيط فقط */

.book-station:nth-child(3n){
    margin-top:-8px;
}

.book-station:nth-child(5n){
    margin-top:8px;
}


/* تقليل اللمعة */

.book-frame::after{
    opacity:.35;
}
/* ==========================================
   MUSEUM ARTIFACT BOOK WALL
========================================== */


/* تحويل المجموعة لوحدة عرض واحدة */

.book-grid{

    position:relative;

    padding-bottom:180px;

}


/* القاعدة الحجرية الممتدة تحت كل الكتب */

.book-grid::after{

    content:"";

    position:absolute;

    bottom:95px;

    left:6%;

    width:88%;

    height:28px;


    background:

    linear-gradient(
        180deg,
        #b08a4b,
        #6b5130,
        #302417
    );


    border-radius:8px;


    box-shadow:

    0 15px 30px rgba(0,0,0,.7),

    inset 0 2px 3px rgba(255,230,170,.35);


    z-index:0;

}


/* الأعمدة الصغيرة بين المعروضات */

.book-station::before{

    content:"";

    position:absolute;

    right:-18px;

    bottom:15px;

    width:2px;

    height:85%;


    background:

    linear-gradient(
    to bottom,
    transparent,
    rgba(212,175,55,.5),
    transparent
    );


    opacity:.5;

}



/* آخر كتاب لا يحتاج فاصل */

.book-station:last-child::before{

    display:none;

}



/* نخلي الحوامل متصلة بصرياً */

.book-frame{

    position:relative;

    z-index:2;

}


/* اختلاف بسيط كأنه عرض متحفي */

.book-station:nth-child(3n){

    transform:
    translateY(-10px);

}


.book-station:nth-child(5n){

    transform:
    translateY(8px);

}



/* إطار ذهبي خفيف حول القطع */

.book-frame{

    border-color:

    rgba(212,175,55,.65);


}


/* ضوء خلف المجموعة */

.book-grid::before{

    background:

    linear-gradient(
    180deg,
    rgba(255,230,180,.2),
    transparent
    ),

    linear-gradient(
    to bottom,
    #88704a,
    #514027,
    #2b2118
    );

}


/* عند اختيار كتاب */

.book-station:hover{

    z-index:20;

}


.book-station:hover .book-frame{

    transform:

    translateY(-14px)
    scale(1.04);

}
/* ==========================================
   MUSEUM DISPLAY SHELF FIX
========================================== */


/* نخلي الرفوف خلف المعروضات */

.book-grid::before,
.book-grid::after{

    z-index:0;

}


/* الكتب فوق الرف */

.book-station{

    position:relative;

    z-index:5;

}


/* الحامل نفسه يبقى جزء من المتحف */

.book-frame{

    position:relative;

    z-index:3;

}


/* قاعدة عرض واحدة تحت كل الكتب */

.book-grid::after{

    top:auto;

    bottom:75px;

    height:55px;

    left:4%;

    width:92%;

    background:

    linear-gradient(
        180deg,
        #b08a4b,
        #6b4b29,
        #25190e
    );


    border-radius:12px;


    box-shadow:

    0 20px 45px rgba(0,0,0,.8),

    inset 0 3px 5px rgba(255,230,150,.35);


}


/* رف خلفي علوي */

.book-grid::before{

    top:45%;

    height:32px;

    opacity:.8;

}



/* فواصل متحفية بين الكتب */

.book-station:not(:last-child)::after{

    content:"";

    position:absolute;

    right:-15px;

    bottom:25px;

    width:3px;

    height:120px;


    background:

    linear-gradient(
        transparent,
        #d4af37,
        transparent
    );


    opacity:.35;

}



/* توهج خفيف خلف المعروضات */

.book-grid{

    isolation:isolate;

}


.book-grid{

    background:

    radial-gradient(
        ellipse at center,
        rgba(212,175,55,.08),
        transparent 65%
    );

}


/* نخلي الحوامل متصلة بصريا */

.book-frame{

    margin-bottom:-10px;

}


/* اختلاف ارتفاع بسيط كمعروضات */

.book-station:nth-child(2n){

    transform:
    translateY(-8px);

}


.book-station:nth-child(5n){

    transform:
    translateY(12px);

}


/* hover كأن الزائر يختار قطعة */

.book-station:hover{

    z-index:20;

}


.book-station:hover .book-frame{

    transform:

    translateY(-15px)
    scale(1.04);

}
/* ==========================================
   GRAND MUSEUM BOOK GALLERY UPGRADE
========================================== */


/* تحسين المسافات بين القطع */

.book-grid{

    column-gap:55px;
    row-gap:85px;

}


/* نخلي كل كتاب كأنه قطعة منفصلة */

.book-frame{

    background:

    radial-gradient(
        ellipse at top,
        rgba(255,220,130,.12),
        transparent 55%
    ),

    linear-gradient(
        160deg,
        #4b3925,
        #1b120b
    );


    border:

    2px solid rgba(212,175,55,.65);


    box-shadow:

    0 25px 45px rgba(0,0,0,.75),

    inset 0 0 35px rgba(0,0,0,.85),

    0 0 18px rgba(212,175,55,.12);

}



/* زخرفة أثرية داخل الحامل */

.book-frame::before{

    content:"𓂀";

    position:absolute;

    top:8px;

    left:50%;

    transform:translateX(-50%);


    font-size:20px;

    color:rgba(244,211,94,.35);


    text-shadow:
    0 0 12px rgba(244,211,94,.5);


}



/* قاعدة تحت الكتاب */

.book-pedestal{

    height:18px;

    width:80%;


    background:

    linear-gradient(
        90deg,
        #2a1b10,
        #c39b55,
        #2a1b10
    );


    box-shadow:

    0 8px 20px rgba(0,0,0,.7),

    inset 0 2px 4px rgba(255,240,180,.3);

}



/* تحسين الغلاف */

.book-cover{

    border-radius:10px;


    box-shadow:

    0 20px 35px rgba(0,0,0,.8),

    0 0 22px rgba(244,211,94,.25);


}



/* رموز ذهبية صغيرة حول الكتب */

.book-station::before{

    content:"𓋹";

    position:absolute;

    top:-18px;


    font-size:22px;


    color:

    rgba(244,211,94,.45);


    filter:

    drop-shadow(
    0 0 8px rgba(244,211,94,.5)
    );

}



/* إضاءة متحفية مركزة */

.book-grid{

    background:

    radial-gradient(
        ellipse at 50% 20%,
        rgba(255,220,130,.18),
        transparent 35%
    ),

    radial-gradient(
        ellipse at center,
        rgba(46,139,125,.08),
        transparent 70%
    );

}



/* كشاف فوق الكتب */

.book-grid::before{

    background:

    linear-gradient(
        180deg,
        rgba(255,240,180,.5),
        transparent
    ),

    linear-gradient(
        to bottom,
        #8b7045,
        #49351f
    );


    filter:

    drop-shadow(
    0 0 20px rgba(255,220,130,.35)
    );

}



/* Hover هادي وفخم */

.book-station:hover .book-cover{

    transform:

    translateY(-8px)
    scale(1.05);


    filter:

    brightness(1.2);


}
/* ==========================================
   FIX BOOK LIGHTING
========================================== */

.book-grid::before,
.book-grid::after{

    filter:none;

}


.book-frame::after{

    opacity:.25;

}


.book-grid{

    background:

    radial-gradient(
        ellipse at 50% 10%,
        rgba(255,220,140,.08),
        transparent 45%
    );

}
/* ==========================================================
   LEVEL 5.5 — ANCIENT GAME CHAMBER UPGRADE
========================================================== */


/* توسيع منطقة الألعاب */

.games-chamber{

    min-height:140vh;

}



/* أرضية قاعة الألعاب */

.games-chamber::after{

    content:"";

    position:absolute;

    bottom:0;

    left:50%;

    transform:translateX(-50%);


    width:85%;

    height:35%;


    background:

    radial-gradient(
        ellipse,
        rgba(212,175,55,.12),
        transparent 65%
    );


    pointer-events:none;

}



/* كل بوابة تبقى قطعة أثرية */

.portal-btn{

    max-width:330px;

    padding:30px 20px 35px;


    background:

    linear-gradient(
        180deg,
        rgba(255,220,150,.08),
        rgba(0,0,0,.25)
    );


    border-radius:22px;


    border:

    1px solid rgba(212,175,55,.25);


    box-shadow:

    0 25px 50px rgba(0,0,0,.55),

    inset 0 0 30px rgba(212,175,55,.08);


    transition:
    transform .45s ease,
    box-shadow .45s ease;

}



/* منصة حجرية كبيرة */

.portal-pedestal{

    width:75%;

    height:28px;


    background:

    repeating-linear-gradient(
        90deg,
        rgba(255,220,150,.1) 0 3px,
        transparent 3px 25px
    ),

    linear-gradient(
        180deg,
        #a8864d,
        #4a3420
    );


    border-radius:8px;


    border:

    2px solid rgba(212,175,55,.55);


    box-shadow:

    0 15px 35px rgba(0,0,0,.7),

    inset 0 3px 4px rgba(255,240,180,.25);

}



/* إطار فرعوني حول البوابة */

.portal-btn::before{

    content:"𓂀";

    position:absolute;

    top:10px;

    left:50%;


    transform:translateX(-50%);


    color:

    rgba(244,211,94,.5);


    font-size:22px;


}



/* الإضاءة تكون خلف البوابة */

.portal-glow-ring{

    width:200%;

    padding-top:200%;


    background:

    radial-gradient(
        circle,
        rgba(46,139,125,.45),
        rgba(212,175,55,.15) 40%,
        transparent 70%
    );

}



/* البوابة نفسها */

.portal-figure{

    width:clamp(180px,20vw,260px);


    filter:

    drop-shadow(0 25px 35px rgba(0,0,0,.75));

}



/* Hover أقوى */

.portal-btn:hover{

    transform:

    translateY(-18px);


    box-shadow:

    0 35px 70px rgba(0,0,0,.75),

    0 0 35px rgba(212,175,55,.25);


}



/* اسم اللعبة */

.portal-label{

    margin-top:22px;


    padding:

    .7em 1.8em;


    background:

    rgba(10,8,5,.75);


    border-color:

    rgba(244,211,94,.5);


    box-shadow:

    0 5px 15px rgba(0,0,0,.5);

}



/* جسيمات ذهبية حول القاعة */

.games-chamber .portal-grid::before{

    content:"";

    position:absolute;

    inset:0;


    background:

    radial-gradient(circle at 20% 30%,
    rgba(255,220,120,.12),
    transparent 3%),


    radial-gradient(circle at 80% 40%,
    rgba(255,220,120,.12),
    transparent 3%),


    radial-gradient(circle at 50% 80%,
    rgba(46,139,125,.15),
    transparent 4%);


    pointer-events:none;

}
/* =====================================
   UNIQUE GAME PORTALS
===================================== */


.portal-station{
    perspective:900px;
}


/* main frame */

.game-icon-frame{
    fill:#15110c;
    stroke:#d4af37;
    stroke-width:4;
    filter:
    drop-shadow(0 0 15px rgba(212,175,55,.5));
}


/* symbols */

.game-symbol *{
    fill:none;
    stroke:#f4d35e;
    stroke-width:5;
    stroke-linecap:round;
    stroke-linejoin:round;
    filter:drop-shadow(0 0 8px #f4d35e);
}


/* =====================
 X AND O
===================== */


.portal-station.xo .game-icon-frame{
    fill:#1d2d2b;
    stroke:#d4af37;
}{

    fill:
    radial-gradient(circle,#2e8b7d,#071411);

}


.portal-station.xo .game-symbol *{

    stroke:#e8c896;

}


/* =====================
 MUMMY RUNNER
===================== */


.portal-station.runner
.game-icon-frame{

    fill:#24170d;
    stroke:#2e8b7d;

}


.portal-station.runner .game-symbol *{

    stroke:#2e8b7d;
    stroke-width:6;

}



/* =====================
 CHESS
===================== */


.portal-station.chess .game-symbol *{

    fill:#100d09;
    stroke:#f4d35e;

}


.portal-station.chess
.game-symbol path{

    stroke:white;

}



/* Hover */

.portal-btn:hover .game-icon-frame{

transform:
scale(1.08);

filter:
drop-shadow(0 0 25px #d4af37);

}


.portal-btn:hover .game-symbol{

animation:
symbolPulse 1s infinite alternate;

}



@keyframes symbolPulse{

from{
opacity:.7;
}

to{
opacity:1;
}

}
.games-chamber{

background:

linear-gradient(
rgba(10,8,5,.65),
rgba(10,8,5,.85)
),

url("assets/images/egypt-games-bg.jpg");

background-size:cover;
background-position:center;

}


.games-chamber::before{

content:"";

position:absolute;
inset:0;

background:

radial-gradient(
circle at center,
rgba(212,175,55,.15),
transparent 60%
);

pointer-events:none;

}
.student-photo{
    width:260px;
    height:340px;

    margin:auto;

    overflow:hidden;

    border-radius:18px;

    border:4px solid #d4af37;

    background:#120d08;

    box-shadow:
        0 0 35px rgba(212,175,55,.35),
        inset 0 0 25px rgba(212,175,55,.18);

    position:relative;
}

.student-photo img{

    width:100%;
    height:100%;

    object-fit:cover;

    display:block;

    transition:.5s;
}

.student-photo:hover img{

    transform:scale(1.05);

}
.student-photo::before,
.student-photo::after{

content:"";

position:absolute;

width:35px;
height:35px;

border:4px solid #f4d35e;

pointer-events:none;

}

.student-photo::before{

top:12px;
left:12px;

border-right:none;
border-bottom:none;

}

.student-photo::after{

right:12px;
bottom:12px;

border-left:none;
border-top:none;

}
.student-photo{

animation:goldGlow 4s ease-in-out infinite;

}

@keyframes goldGlow{

0%,100%{

box-shadow:
0 0 30px rgba(212,175,55,.25);

}

50%{

box-shadow:
0 0 60px rgba(212,175,55,.7);

}

}
.student-frame-inner{
    position:relative;
    overflow:hidden;
}

.student-photo{
    width:100%;
    height:100%;
    object-fit:cover;
    display:block;
    border-radius:10px;
}

.student-card.first{
    position:relative;
}

.student-crown{

position:absolute;

top:-28px;
left:50%;
transform:translateX(-50%);

width:62px;
height:62px;

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

font-size:42px;

background:radial-gradient(circle,#f7d96c,#d4af37);

border:3px solid #fff3b3;
border-radius:50%;

box-shadow:
0 0 18px rgba(212,175,55,.8),
0 0 40px rgba(212,175,55,.35);

filter:drop-shadow(0 0 20px gold);

animation:crownFloat 2s ease-in-out infinite;

z-index:20;

}
.student-podium{

    display:flex;

    justify-content:center;

    align-items:flex-end;

    gap:65px;

    margin-top:50px;

    margin-bottom:100px;

    flex-wrap:wrap;

}

.student-card{

    text-align:center;

    padding:25px;

    border-radius:22px;

    background:linear-gradient(
    180deg,
    #3c2b18,
    #1b120b
    );

    border:2px solid rgba(212,175,55,.35);

    box-shadow:

    0 18px 45px rgba(0,0,0,.5),

    0 0 25px rgba(212,175,55,.12);

    transition:.45s;

}

.student-card:hover{

    transform:translateY(-15px);

    box-shadow:

    0 25px 55px rgba(0,0,0,.65),

    0 0 35px rgba(212,175,55,.35);

}

.student-card .student-frame{

    width:230px;
    height:315px;

    position:relative;

    overflow:hidden;

    border:2px solid rgba(212,175,55,.25);

    border-radius:20px;

    background:#111;

    box-shadow:
    0 12px 35px rgba(0,0,0,.45);

    perspective:1200px;

    cursor:pointer;

}
.student-card .student-frame::before{

content:"";

position:absolute;
inset:0;

background:
linear-gradient(
135deg,
rgba(255,255,255,.35),
transparent 35%,
transparent 65%,
rgba(255,255,255,.15)
);

opacity:1;

transition:.7s;

z-index:3;

}
.student-card:hover img{

transform:
scale(1.08)
rotateY(8deg);

filter:
brightness(1);

}

.student-card:hover .student-frame::before{

opacity:0;

}
.student-card .student-frame::after{

content:"";

position:absolute;

top:-120%;
left:-70%;

width:40%;
height:320%;

background:

linear-gradient(
90deg,
transparent,
rgba(255,255,255,.35),
transparent
);

transform:rotate(18deg);

transition:1s;

}

.student-card:hover .student-frame::after{

left:170%;

}

.student-card img{
    width:100%;
    height:100%;
    object-fit:cover;
}

.student-card.first{
    transform:translateY(-35px) scale(1.1);
    z-index:3;
}

.student-card.first .student-frame{

    width:270px;

    height:370px;

}

.student-card.second,
.student-card.third{
    opacity:.88;
}
.student-card.first{
    transform:translateY(-35px) scale(1.1);
    z-index:3;
}

.student-card.second{
    transform:translateY(-45px);
}

.student-card.third{
    transform:translateY(18px);
}

.student-card.second .student-frame{

    width:220px;

    height:310px;

}

.student-card.third .student-frame{

    width:200px;

    height:285px;

}


.student-card h2,
.student-card h3{

    color:#e8c86d;

    margin-top:20px;

    margin-bottom:10px;

    font-family:"Cinzel",serif;

}

.student-card span{

    display:block;

    margin-top:10px;

    color:#d9c8a3;

    font-style:italic;

}

@keyframes crownFloat{

0%,100%{
transform:translateY(0);
}

50%{
transform:translateY(-10px);
}

}
/* ==========================================================
   PATCH: STATISTICS SECTION — SANDSTONE TABLET UPGRADE
   Pure override layer. Original .stat-grid / .stat-card /
   .stat-icon / .stat-number / .stat-label rules, spacing,
   and the visible/hover reveal transition are all left intact.
========================================================== */

#statGrid.stat-grid{ align-items:end; } /* lets the raised middle tablet read as taller, no gap/column change */

/* stacking context so decorative layers can sit behind existing content */
.stat-card.stat-card--relic{ isolation:isolate; overflow:visible; }

/* keep original background/border as base, layer tablet look on top */
.stat-card.stat-card--relic{
  background:
    radial-gradient(ellipse at 30% 10%, rgba(255,240,200,.14), transparent 55%),
    linear-gradient(160deg, var(--sandstone-lt) 0%, var(--sandstone) 45%, var(--stone-600) 100%);
  border-color:rgba(212,175,55,.4);
  box-shadow:
    0 0 0 3px var(--stone-800),
    0 0 0 5px rgba(212,175,55,.35),
    0 26px 50px rgba(0,0,0,.6),
    inset 0 0 46px rgba(0,0,0,.4),
    inset 0 2px 0 rgba(255,236,190,.25);
}
.stat-card.stat-card--relic:hover{
  box-shadow:
    0 0 0 3px var(--stone-800),
    0 0 0 5px var(--gold-bright),
    0 32px 60px rgba(0,0,0,.65),
    inset 0 0 46px rgba(0,0,0,.35),
    inset 0 2px 0 rgba(255,246,220,.35),
    0 0 34px rgba(244,211,94,.28);
  border-color:var(--gold-bright);
}

/* visual hierarchy — cosmetic transform only, no spacing/grid change */
.stat-card.stat-card--relic.visible{ transform:translateY(-4px); }
.stat-card.stat-card--relic.stat-card--tall.visible{ transform:translateY(-22px) scale(1.05); }
.stat-card.stat-card--relic.visible:hover{ transform:translateY(-16px); }
.stat-card.stat-card--relic.stat-card--tall.visible:hover{ transform:translateY(-34px) scale(1.06); }

/* carved stone striations */
.stat-card-texture{
  position:absolute; inset:10px;
  border:1px solid rgba(212,175,55,.5);
  background-image:
    repeating-linear-gradient(0deg, rgba(43,33,24,.32) 0 2px, transparent 2px 20px),
    repeating-linear-gradient(90deg, rgba(43,33,24,.24) 0 2px, transparent 2px 20px);
  opacity:.45;
  mix-blend-mode:multiply;
  pointer-events:none;
  z-index:0;
  border-radius:inherit;
}

/* warm ambient glow, breathing like the entrance torch-glow */
.stat-card-glow{
  position:absolute; inset:-18%;
  background:radial-gradient(ellipse at 50% 30%, rgba(255,183,90,.28), rgba(212,175,55,.1) 45%, transparent 72%);
  opacity:.35;
  z-index:-1;
  pointer-events:none;
  animation:statGlowPulse 5s ease-in-out infinite;
}
@keyframes statGlowPulse{ 0%,100%{ opacity:.3; } 50%{ opacity:.6; } }
.stat-card.stat-card--relic:hover .stat-card-glow{ opacity:.9; }

/* carved hieroglyph watermark, unique per tablet via JS-injected content */
.stat-hieroglyph{

    position:absolute;

    top:18px;
    left:50%;

    transform:translateX(-50%);

    width:58px;
    height:58px;

    opacity:.14;

    color:#3d2b18;

    filter:none;

    z-index:0;

    pointer-events:none;

}

/* torches — positioning only; visuals/animation come from your existing .torch rules */
.stat-torch{ top:-14%; z-index:1; transform:scale(.78); transition:transform .5s var(--ease-heavy); }
.stat-torch-left{ left:-6%; }
.stat-torch-right{ right:-6%; }
.stat-card.stat-card--relic:hover .stat-torch{ transform:scale(.9); }

/* stone plinth beneath each tablet */
.stat-pedestal{
  position:absolute; bottom:-14px; left:50%;
  transform:translateX(-50%);
  width:70%; height:14px;
  border-radius:4px 4px 10px 10px;
  background:linear-gradient(to bottom, var(--stone-600), var(--stone-800));
  box-shadow:0 10px 18px rgba(0,0,0,.55), inset 0 1px 0 rgba(255,220,170,.2);
  z-index:0;
}

/* lift existing icon/number/label above the new decorative layers — no spacing/size change */
.stat-card.stat-card--relic .stat-icon,
.stat-card.stat-card--relic .stat-number,
.stat-card.stat-card--relic .stat-label{
  position:relative;
  z-index:2;
}

/* gold medallion ring around the original icon — box-shadow only, no width/margin/padding change */
.stat-card.stat-card--relic .stat-icon{
  border-radius:50%;
  box-shadow:
    0 0 0 8px rgba(20,15,10,.4),
    0 0 0 10px rgba(212,175,55,.55),
    0 8px 14px rgba(0,0,0,.4);
  transition:box-shadow .5s var(--ease-heavy), transform .5s var(--ease-heavy);
}
.stat-card.stat-card--relic:hover .stat-icon{
  transform:rotate(4deg) scale(1.06);
  box-shadow:
    0 0 0 8px rgba(20,15,10,.4),
    0 0 0 10px var(--gold-bright),
    0 0 20px rgba(244,211,94,.5);
}

/* numbers read as chiselled into stone — same gradient fill, added engraved shadow */
.stat-card.stat-card--relic .stat-number{
  text-shadow:
    0 1px 0 rgba(255,236,190,.4),
    0 -1px 1px rgba(0,0,0,.6),
    0 2px 6px rgba(0,0,0,.35);
}
.stat-card.stat-card--relic:hover .stat-number{
  text-shadow:
    0 1px 0 rgba(255,246,220,.6),
    0 -1px 1px rgba(0,0,0,.65),
    0 0 14px rgba(244,211,94,.5);
}
.stat-card.stat-card--relic .stat-label{
  text-shadow:0 1px 0 rgba(0,0,0,.5);
}

/* localized floating dust */
.stat-dust{ position:absolute; inset:0; overflow:hidden; pointer-events:none; z-index:0; border-radius:inherit; }
.stat-dust-mote{
  position:absolute; bottom:-6%;
  width:2.4px; height:2.4px; border-radius:50%;
  background:radial-gradient(circle, rgba(244,211,94,.9), rgba(244,211,94,0) 70%);
  opacity:0;
  animation-name:statDustFloat;
  animation-timing-function:linear;
  animation-iteration-count:infinite;
}
@keyframes statDustFloat{
  0%  { transform:translate(0,0); opacity:0; }
  10% { opacity:.7; }
  88% { opacity:.3; }
  100%{ transform:translate(var(--sdrift,10px), -125%); opacity:0; }
}

@media (max-width:720px){
  #statGrid.stat-grid{ align-items:stretch; }
  .stat-card.stat-card--relic.stat-card--tall.visible{ transform:translateY(0) scale(1); }
  .stat-card.stat-card--relic.stat-card--tall.visible:hover{ transform:translateY(-12px); }
  .stat-torch{ display:none; }
}

@media (prefers-reduced-motion: reduce){
  .stat-card-glow, .stat-dust-mote{ animation:none !important; }
}

/* ==========================================
   STAT CARDS - TEMPLE RELIC FINAL FIX
========================================== */


/* إزالة إحساس الورقة البيضاء القديمة */
.stat-card--relic{
    background:
    radial-gradient(
        ellipse at top,
        rgba(255,220,130,.25),
        transparent 45%
    ),
    linear-gradient(
        160deg,
        #b9965a,
        #80613b 55%,
        #4b3624
    ) !important;

    border:none !important;

    padding-top:75px;
}


/* طبقة حجر داخلية */
.stat-card--relic::after{

    content:"";

    position:absolute;

    inset:8px;

    border-radius:inherit;

    border:2px solid rgba(212,175,55,.35);

    box-shadow:

    inset 0 0 35px rgba(0,0,0,.6);

    pointer-events:none;

}


/* نزول الأيقونات + مسافة بينهم */
.stat-card--relic .stat-icon{

    margin-top:25px !important;

    margin-bottom:35px !important;

}


/* تحويل الأيقونة من شكل مفرغ لشكل أثر حجري */
.stat-card--relic .stat-icon svg{

    width:58px;
    height:58px;

    fill:#4a2f18;
    stroke:#4a2f18;
    stroke-width:1.5;

    filter:
    drop-shadow(0 1px 0 rgba(255,230,170,.45));

}


/* خلفية ذهبية محفورة حول الأيقونة */
.stat-card--relic .stat-icon{

    background:

    radial-gradient(
        circle,
        rgba(244,211,94,.8),
        rgba(80,55,25,.8)
    );


    padding:15px;


    border-radius:50%;


    box-shadow:

    inset 0 0 12px rgba(0,0,0,.8),

    0 0 0 5px rgba(212,175,55,.35),

    0 10px 20px rgba(0,0,0,.6);


    animation:
    relicFloat 4s ease-in-out infinite;

}


/* حركة أثرية */
@keyframes relicFloat{

0%,100%{

transform:
translateY(0)
rotate(0deg);

}

50%{

transform:
translateY(-10px)
rotate(3deg);

}

}


/* فصل الرقم عن الأيقونة */
.stat-number{

margin-top:25px !important;

}


/* فصل الكروت عن بعض */
.stat-grid{

column-gap:70px !important;

}


/* توهج عند المرور */
.stat-card--relic:hover .stat-icon{

filter:
drop-shadow(0 0 18px #d4af37);

}
/* SAFE TEMPLE POLISH */

.stat-card--relic{
    background:
    radial-gradient(
        ellipse at top,
        rgba(255,220,130,.18),
        transparent 40%
    ),
    linear-gradient(
        160deg,
        var(--sandstone-lt),
        var(--sandstone),
        var(--stone-600)
    ) !important;
}


/* نزول الأيقونة فقط */
.stat-card--relic .stat-icon{
    transform:translateY(25px);
}


/* مسافة بين الأيقونة والرقم */
.stat-card--relic .stat-number{
    margin-top:45px !important;
}


/* الأيقونة تبقى قطعة أثرية */
.stat-card--relic .stat-icon{

    width:92px;
    height:92px;

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

    margin:30px auto 35px;

    padding:0;

    border-radius:50%;

    background:
    radial-gradient(circle at 35% 30%,
    #f6d76c,
    #b98a2c 60%,
    #5c3d1c 100%);

    border:3px solid rgba(212,175,55,.8);

    box-shadow:
    0 0 28px rgba(212,175,55,.35),
    inset 0 0 20px rgba(255,235,180,.35),
    inset 0 -12px 18px rgba(0,0,0,.45);

    animation:relicFloat 4s ease-in-out infinite;

}


@keyframes artifactFloat{

    0%,100%{
        transform:translateY(25px);
    }

    50%{
        transform:translateY(15px);
    }

}
/* REMOVE ORIGINAL WHITE CARD LAYER */

#statGrid .stat-card,
#statGrid .stat-card--relic {

    background-color: transparent !important;

}


/* Build stone surface on the actual card */

#statGrid .stat-card--relic {

    background:
    linear-gradient(
        145deg,
        #c5a46b,
        #80613f 50%,
        #4a3523
    ) !important;

    border: 2px solid rgba(212,175,55,.45) !important;

    box-shadow:
    inset 0 0 35px rgba(0,0,0,.55),
    0 20px 45px rgba(0,0,0,.6) !important;

}


/* Disable old white pseudo layers */

#statGrid .stat-card::before,
#statGrid .stat-card::after {

    background: transparent !important;

}
/* ==========================================
   EXIT FOOTER - ANCIENT TEMPLE ICONS
========================================== */

.social-pill{
    position:relative;
    display:flex;
    align-items:center;
    justify-content:center;

    width:70px;
    height:70px;

    border-radius:14px;

    background:
    linear-gradient(
        145deg,
        #d1b06a,
        #80613b 45%,
        #3b2818
    );

    border:2px solid #d4af37;

    color:#f9df8a !important;

    font-weight:bold;
    text-decoration:none;

    overflow:hidden;
    z-index:1;

    box-shadow:
    inset 0 0 20px rgba(0,0,0,.8),
    0 8px 25px rgba(0,0,0,.6),
    0 0 15px rgba(212,175,55,.3);

    transition:.5s ease;

}


.social-pill::before{

    content:"𓂀";

    position:absolute;

    font-size:45px;

    color:rgba(40,25,10,.25);

    z-index:-1;

}


.social-pill:hover{

    transform:
    translateY(-10px)
    scale(1.12)
    rotate(-4deg);


    box-shadow:
    inset 0 0 25px rgba(255,220,120,.4),
    0 0 35px rgba(212,175,55,.8);

}

/* خلي كارت النهاية نفسه فخم */
.exit-card{


background:

linear-gradient(
145deg,
rgba(181,145,80,.25),
rgba(20,15,10,.7)
);


border:

1px solid rgba(212,175,55,.25);


box-shadow:

inset 0 0 25px rgba(0,0,0,.5);


transition:.5s;


}



.exit-card:hover{


transform:
translateY(-8px);


box-shadow:

0 0 30px rgba(212,175,55,.25),

inset 0 0 35px rgba(0,0,0,.6);


}



/* النص الأخير */
.exit-signoff{


font-size:1.1rem;

color:#eacb73;


text-shadow:

0 0 15px rgba(212,175,55,.5);


animation:

signGlow 4s ease-in-out infinite;

}



@keyframes signGlow{

0%,100%{

opacity:.7;

}


50%{

opacity:1;

}

}
footer,
.temple-footer,
.end-section{
    opacity:1 !important;
    visibility:visible !important;
}
.guardian-animated {
  animation: guardianFloat 4s ease-in-out infinite;
  transform-origin:center bottom;
  transform-box:fill-box;
}

.thoth-eye {
  animation: eyeGlow 1.8s infinite alternate;
}

.gold-shine {
  animation: goldPulse 3s infinite alternate;
}

.staff-glow {
  animation: staffMove 2.5s ease-in-out infinite;
  transform-origin:50% 50%;
  transform-box:fill-box;
}

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

@keyframes eyeGlow {
  from { opacity:.4; filter:drop-shadow(0 0 2px #2e8b7d); }
  to { opacity:1; filter:drop-shadow(0 0 10px #2e8b7d); }
}

@keyframes goldPulse {
  from { filter:drop-shadow(0 0 2px #d4af37); }
  to { filter:drop-shadow(0 0 12px #f4d35e); }
}

@keyframes staffMove {
  0%,100% { transform:rotate(0deg); }
  50% { transform:rotate(2deg); }
}
.exit-fade-overlay{
    display:none !important;
}

.exit-sky{
    display:none !important;
}
.exit-fade-overlay,
[class*="overlay"],
[id*="overlay"]{
    display:none !important;
}
.horus-btn{

position:fixed;
top:28px;
right:28px;

width:90px;
height:70px;

background:none;
border:none;
cursor:pointer;
z-index:9999;

transition:.35s;

}

.horus-eye{

width:100%;
height:100%;

overflow:visible;

}

.eye-outline{

fill:#caa24a;

stroke:#6d4d12;

stroke-width:2;

transition:.4s;

}

.iris{

fill:#80621f;

transition:.4s;

}

.pupil{

fill:#1d1508;

transition:.4s;

}

.tail{

fill:none;
stroke:#6d4d12;
stroke-width:2;

}

.energy{

stroke:#2ce6d4;
stroke-width:2;
opacity:0;

transition:.4s;

stroke-linecap:round;

}

.energy2{

opacity:0;

}

.horus-btn.playing .iris{

fill:#30d9d0;

}

.horus-btn.playing .pupil{

fill:white;

}

.horus-btn.playing .eye-outline{

filter:
drop-shadow(0 0 8px gold)
drop-shadow(0 0 16px #ffdf70);

}

.horus-btn.playing .energy{

opacity:1;

animation:energyMove .7s linear infinite;

}

.horus-btn.playing{

animation:eyePulse 2s infinite;

}

@keyframes eyePulse{

0%,100%{

transform:scale(1);

}

50%{

transform:scale(1.08);

}

}

@keyframes energyMove{

0%{

stroke-dasharray:0 18;

}

100%{

stroke-dasharray:18 0;

}

}

.horus-btn:hover{

transform:scale(1.08);

}
.music-btn{
position:fixed;
top:20px;
right:20px;

display:flex;
align-items:center;
gap:10px;

padding:12px 20px;

background:linear-gradient(180deg,#d9b15d,#8d6415);
border:2px solid #f4d57b;

border-radius:50px;

color:#fff6d5;
font-family:'Cinzel',serif;
font-weight:700;
font-size:15px;

cursor:pointer;

box-shadow:
0 0 15px rgba(212,175,55,.4),
0 0 40px rgba(212,175,55,.15);

transition:.35s;

z-index:9999;
}

.music-btn:hover{
transform:translateY(-3px) scale(1.05);
box-shadow:
0 0 25px rgba(212,175,55,.6);
}

.music-icon{
font-size:26px;
}
/* ============================================================
   CONTINUOUS TEMPLE JOURNEY
   Reduce dead space between major halls
============================================================ */

.corridor {
    min-height: 45vh;
}

.hall {
    min-height: 145vh;
}

.stories {
    min-height: 185vh;
}

.games-chamber {
    min-height: 155vh;
}

.student-hall {
    min-height: 95vh;
}

.temple-exit {
    min-height: 130vh;
}
/* ============================================================
   TEMPLE WORLD FLOW — TEST 01
   Connect halls visually without changing their heights
============================================================ */

/* 1. Give every hall a visible threshold at its bottom.
   This is NOT a new corridor and does not add page height. */

.hall,
.stories,
.games-chamber,
.student-hall {
    position: relative;
}


/* 2. A physical stone threshold between rooms */

.hall::after,
.stories::after,
.games-chamber::after,
.student-hall::after {
    content: "";
    position: absolute;
    left: 7%;
    right: 7%;
    bottom: 0;

    height: 42px;

    background:
        linear-gradient(
            to bottom,
            #8f713f 0%,
            #5b4328 35%,
            #2b2118 100%
        );

    border-top: 2px solid rgba(244,211,94,.35);

    box-shadow:
        0 -8px 20px rgba(0,0,0,.35),
        inset 0 3px 4px rgba(255,230,170,.15),
        0 12px 28px rgba(0,0,0,.65);

    z-index: 20;
    pointer-events: none;
}


/* 3. Gold path line.
   It visually tells the eye: "keep going". */

.hall::before,
.stories::before,
.games-chamber::before,
.student-hall::before {
    content: "";

    position: absolute;
    left: 50%;
    bottom: 0;

    width: 2px;
    height: 120px;

    transform: translateX(-50%);

    background:
        linear-gradient(
            to bottom,
            transparent,
            rgba(244,211,94,.18),
            rgba(244,211,94,.65)
        );

    box-shadow:
        0 0 14px rgba(244,211,94,.22);

    z-index: 21;
    pointer-events: none;
}


/* 4. Don't let the next section begin as a hard black cut.
   Only its FIRST 90px receive a subtle architectural glow. */

.stories {
    background-color: #0a0705;
}

.games-chamber {
    background-color: #070503;
}

.student-hall {
    background-color: #100b07;
}

.stories-entry-glow,
.chamber-entry-glow,
.student-entry-glow {
    height: 90px;
    opacity: .55;
}


/* 5. The actual transition is created by the existing
   entry glow + threshold, not by adding another section. */

.hall + .stories,
.stories + .games-chamber,
.games-chamber + .student-hall,
.student-hall + .temple-exit {
    position: relative;
}


/* 6. Slightly reveal the next area before the previous one
   completely disappears. */

.hall + .stories::after,
.stories + .games-chamber::after,
.games-chamber + .student-hall::after,
.student-hall + .temple-exit::after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;

    height: 70px;

    background:
        linear-gradient(
            to bottom,
            rgba(212,175,55,.08),
            transparent
        );

    pointer-events: none;
    z-index: 4;
}
/* =========================================================
   TEST — TIGHTEN GAMES CHAMBER END
   Does not change section height
========================================================= */

.games-chamber .portal-grid {
    padding-bottom: 4vh;
}
/* ============================================================
   TEMPLE DESCENT
   Entrance → Descending Stair → Library Services Hall
============================================================ */

.corridor {
    position: relative;
    min-height: 80vh;
    overflow: hidden;
    perspective: 1200px;
}


/* Remove old flat floor */

.corridor-floor {
    display: none !important;
}


/* ============================================================
   DESCENT WORLD
============================================================ */

.temple-descent {
    position: absolute;

    left: 50%;
    bottom: 0;

    transform: translateX(-50%);

    width: 100%;
    height: 100%;

    z-index: 6;

    perspective: 1200px;
}


/* ============================================================
   SIDE TEMPLE WALLS
============================================================ */

.descent-wall {
    position: absolute;

    bottom: 0;

    width: 30%;
    height: 99%;

    background:
        linear-gradient(
            145deg,
            #71502d 0%,
            #4b3420 35%,
            #241910 75%,
            #120c08 100%
        );

    border-top: 2px solid rgba(244,211,94,.38);

    box-shadow:
        inset 0 0 45px rgba(0,0,0,.65),
        inset 0 0 12px rgba(255,220,160,.08),
        0 0 30px rgba(0,0,0,.45);
}


/* Left */

.descent-wall-left {
    left: 0;

    clip-path: polygon(
        0 0,
        100% 16%,
        100% 100%,
        0 100%
    );
}


/* Right */

.descent-wall-right {
    right: 0;

    clip-path: polygon(
        0 16%,
        100% 0,
        100% 100%,
        0 100%
    );
}


/* Hieroglyphs */

.wall-relief {
    position: absolute;

    top: 30%;
    left: 25%;

    color: rgba(244,211,94,.28);

    font-family: serif;

    font-size: clamp(1.2rem, 2.5vw, 2rem);

    letter-spacing: .35em;

    writing-mode: vertical-rl;

    text-shadow:
        0 0 10px rgba(212,175,55,.15);
}

.wall-relief.second {
    top: 55%;
    left: 55%;

    opacity: .6;
}


/* ============================================================
   BIG DESCENDING STAIR
============================================================ */

.descent-stairs {

    position: absolute;

    left: 50%;
    bottom: 24%;

    transform: translateX(-50%);

    width: 64%;
    height: 60%;

    z-index: 8;

    display: flex;

    flex-direction: column;

    justify-content: flex-end;

    align-items: center;

}


/* Every stair */

.step {

    position: relative;

    flex-shrink: 0;

    height: 7.5%;

    background:
        linear-gradient(
            to bottom,
            #9b7743 0%,
            #6c4d2b 22%,
            #3b291b 65%,
            #21170f 100%
        );

    border-top:
        2px solid rgba(244,211,94,.42);

    box-shadow:
        0 -2px 5px rgba(255,220,150,.08),
        0 8px 15px rgba(0,0,0,.65);

}


/* Perspective */

.step-1  { width:100%; }
.step-2  { width:94%; }
.step-3  { width:88%; }
.step-4  { width:82%; }
.step-5  { width:76%; }
.step-6  { width:70%; }
.step-7  { width:64%; }
.step-8  { width:58%; }
.step-9  { width:52%; }
.step-10 { width:46%; }
.step-11 { width:40%; }
.step-12 { width:34%; }


/* Golden edges */

.descent-stairs::before,
.descent-stairs::after {

    content: "";

    position: absolute;

    bottom: 0;

    width: 5px;
    height: 100%;

    background:
        linear-gradient(
            to top,
            #f4d35e,
            rgba(244,211,94,.15)
        );

    box-shadow:
        0 0 18px rgba(244,211,94,.25);

    z-index: 20;
}

.descent-stairs::before {
    left: 0;
}

.descent-stairs::after {
    right: 0;
}


/* ============================================================
   TORCHES
============================================================ */

.descent-torch {

    position: absolute;

    width: 14px;
    height: 42px;

    bottom: 43%;

    background:
        linear-gradient(
            to bottom,
            #ffb14e,
            #c87825 25%,
            #3b2918 26%,
            #17100a 100%
        );

    border-radius: 8px 8px 3px 3px;

    box-shadow:
        0 0 15px rgba(255,145,55,.7),
        0 0 40px rgba(255,145,55,.25);

    z-index: 30;
}

.descent-torch.left {
    left: 17%;
}

.descent-torch.right {
    right: 17%;
}


/* ============================================================
   NEXT HALL — LARGE PHARAONIC ENTRANCE
============================================================ */

.next-hall-gate {

    position: absolute;

    left: 50%;
    bottom: 0;

    transform: translateX(-50%);

    width: 62%;
    height: 62%;

    z-index: 25;

}


/* Massive gate pillars */

.gate-pillar {

    position: absolute;

    bottom: 0;

    width: 15%;

    height: 100%;

    background:
        repeating-linear-gradient(
            to right,
            #c49a59 0 8%,
            #806036 8% 13%,
            #d4ad6b 13% 18%
        );

    box-shadow:
        inset -10px 0 18px rgba(0,0,0,.5),
        inset 8px 0 12px rgba(255,230,180,.15);
}

.gate-pillar-left {
    left: 0;
}

.gate-pillar-right {
    right: 0;
}


/* Pillar capitals */

.gate-pillar::before {

    content: "";

    position: absolute;

    top: -3%;

    left: -20%;

    width: 140%;
    height: 8%;

    background:
        linear-gradient(
            to bottom,
            #f0cf7b,
            #9c7539
        );

    border-radius: 4px;

    box-shadow:
        0 4px 12px rgba(0,0,0,.6);
}


/* ============================================================
   GATE TOP
============================================================ */

.gate-top {

    position: absolute;

    top: -4%;
    left: 7%;

    width: 86%;
    height: 18%;

    background:
        linear-gradient(
            to bottom,
            #d6b36b,
            #806034 45%,
            #3a2818
        );

    clip-path:
        polygon(
            5% 100%,
            10% 30%,
            25% 0,
            75% 0,
            90% 30%,
            95% 100%
        );

    border-bottom:
        3px solid rgba(244,211,94,.55);

    box-shadow:
        0 0 30px rgba(212,175,55,.15);
}

.gate-top span {

    position: absolute;

    left: 50%;
    top: 15%;

    transform: translateX(-50%);

    color: #f4d35e;

    font-size: clamp(1.5rem, 3vw, 2.5rem);

    text-shadow:
        0 0 14px rgba(244,211,94,.7);
}


/* ============================================================
   DARK GATE OPENING
============================================================ */

.gate-opening {

    position: absolute;

    left: 15%;
    right: 15%;

    bottom: 0;

    height: 84%;

    overflow: hidden;

    background:
        radial-gradient(
            ellipse at 50% 45%,
            rgba(255,190,100,.38),
            rgba(212,175,55,.08) 38%,
            #080604 75%
        );

    border:
        2px solid rgba(212,175,55,.45);

    box-shadow:
        inset 0 0 55px rgba(0,0,0,.85),
        0 0 35px rgba(212,175,55,.16);
}


/* Light coming from the next hall */

.gate-light {

    position: absolute;

    left: 50%;
    top: 20%;

    transform: translateX(-50%);

    width: 75%;
    height: 70%;

    background:
        radial-gradient(
            ellipse,
            rgba(255,220,150,.35),
            rgba(212,175,55,.08) 45%,
            transparent 75%
        );

    filter: blur(12px);

    animation:
        templeGateGlow 4s ease-in-out infinite;
}

@keyframes templeGateGlow {

    0%,100% {
        opacity: .55;
        transform: translateX(-50%) scale(.95);
    }

    50% {
        opacity: .9;
        transform: translateX(-50%) scale(1.05);
    }

}


/* ============================================================
   GATE TEXT
============================================================ */

.gate-title {

    position: absolute;

    left: 50%;
    top: 48%;

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

    width: 90%;

    text-align: center;

    font-family: 'Cinzel', serif;

    font-size: clamp(.85rem, 1.8vw, 1.3rem);

    letter-spacing: .18em;

    color: #f4d35e;

    text-shadow:
        0 0 12px rgba(244,211,94,.45);

    z-index: 5;
}

.gate-subtitle {

    position: absolute;

    left: 50%;
    top: 59%;

    transform: translateX(-50%);

    width: 90%;

    text-align: center;

    font-family: 'Cormorant Garamond', serif;

    font-style: italic;

    font-size: clamp(1rem, 1.8vw, 1.4rem);

    color: #d8bb83;

    opacity: .8;

    z-index: 5;
}


/* ============================================================
   DARKEN OLD CORRIDOR CENTER
============================================================ */

.corridor::after {

    content: "";

    position: absolute;

    left: 50%;
    bottom: 0;

    transform: translateX(-50%);

    width: 55%;
    height: 85%;

    background:
        radial-gradient(
            ellipse at 50% 70%,
            transparent 0%,
            rgba(0,0,0,.18) 55%,
            rgba(0,0,0,.65) 100%
        );

    z-index: 5;

    pointer-events: none;
}


/* Keep the stair above the atmosphere */

.temple-descent,
.next-hall-gate {
    isolation: isolate;
}


/* ============================================================
   MOBILE
============================================================ */

@media (max-width:720px) {

    .corridor {
        min-height: 84vh;
    }

    .descent-wall {
        width: 27%;
    }

    .descent-stairs {
        width: 72%;
    }

    .next-hall-gate {
        width: 78%;
        height: 58%;
    }

    .gate-title {
        letter-spacing: .08em;
    }

    .descent-torch.left {
        left: 10%;
    }

    .descent-torch.right {
        right: 10%;
    }
}
/* ============================================================
   CONTINUOUS FLOOR — FROM GATE TO SERVICES
============================================================ */

/* ============================================================
   INNER TEMPLE CEILING
============================================================ */

.hall-entry-glow{
    height:42vh !important;

    background:
        radial-gradient(
            ellipse at 50% 5%,
            rgba(255,210,130,.42),
            rgba(212,175,55,.12) 38%,
            transparent 72%
        ) !important;
}


/* Golden ceiling beams */

.hall-beam-left,
.hall-beam-right{
    height:60vh !important;
    width:14vw !important;

    opacity:.75;
}


/* Strong central light */

.hall-oculus{
    height:70vh !important;

    width:42vw !important;

    opacity:.8;
}
/* ============================================================
   FOUR SERVICE SHRINES
============================================================ */

.relic-station{
    position:relative;

    padding:
        34px
        14px
        26px;

    min-height:360px;

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

    justify-content:flex-end;

    background:
        linear-gradient(
            to bottom,
            rgba(78,54,30,.28),
            rgba(18,12,8,.72)
        );

    border-top:
        1px solid rgba(212,175,55,.25);

    border-bottom:
        1px solid rgba(212,175,55,.18);

    box-shadow:
        inset 0 0 35px rgba(0,0,0,.45),
        0 15px 35px rgba(0,0,0,.35);

    clip-path:polygon(
        12% 0,
        88% 0,
        100% 8%,
        100% 100%,
        0 100%,
        0 8%
    );

    transition:
        transform .45s ease,
        background .45s ease;
}


/* Gold frame around every shrine */

.relic-station::before{

    content:"";

    position:absolute;

    inset:8px;

    border:
        1px solid rgba(212,175,55,.20);

    pointer-events:none;
}


/* Egyptian symbol above each shrine */

.relic-station::after{

    content:"𓂀";

    position:absolute;

    top:12px;
    left:50%;

    transform:translateX(-50%);

    color:
        rgba(244,211,94,.45);

    font-size:20px;

    text-shadow:
        0 0 12px rgba(244,211,94,.25);
}


.relic-station:hover{

    transform:
        translateY(-12px);

    background:
        linear-gradient(
            to bottom,
            rgba(112,78,38,.42),
            rgba(18,12,8,.78)
        );

    box-shadow:
        inset 0 0 35px rgba(212,175,55,.10),
        0 25px 50px rgba(0,0,0,.5),
        0 0 25px rgba(212,175,55,.12);
}
/* ============================================================
   HALL EXIT — NATURAL CONTINUATION
============================================================ */

.hall-exit{

    position:relative;

    z-index:12;

    height:42vh;

    margin-top:2vh;

    display:flex;

    align-items:center;

    justify-content:center;

    background:
        linear-gradient(
            to bottom,
            transparent,
            rgba(8,5,3,.7) 45%,
            #080503 100%
        );

    overflow:hidden;
}


/* Arch */

.hall-exit-arch{

    position:absolute;

    left:50%;
    top:8%;

    transform:translateX(-50%);

    width:min(34vw,420px);
    height:90%;

    background:
        linear-gradient(
            to bottom,
            #76552f,
            #2b1d12
        );

    clip-path:polygon(
        50% 0,
        92% 20%,
        92% 100%,
        8% 100%,
        8% 20%
    );

    opacity:.9;

    box-shadow:
        0 0 45px rgba(212,175,55,.12);
}


/* Dark opening */

.hall-exit-door{

    position:absolute;

    left:50%;
    bottom:0;

    transform:translateX(-50%);

    width:min(22vw,280px);
    height:72%;

    background:
        radial-gradient(
            ellipse at 50% 35%,
            rgba(255,190,100,.25),
            #070504 65%
        );

    border:
        2px solid rgba(212,175,55,.35);

    box-shadow:
        inset 0 0 40px rgba(0,0,0,.8),
        0 0 30px rgba(212,175,55,.1);

    z-index:3;
}


.hall-exit-door span{

    position:absolute;

    top:12%;

    left:50%;

    transform:translateX(-50%);

    color:#f4d35e;

    font-size:2rem;

    text-shadow:
        0 0 15px rgba(244,211,94,.7);
}


.hall-exit-line{

    position:absolute;

    bottom:7%;

    left:50%;

    transform:translateX(-50%);

    width:min(80vw,600px);

    text-align:center;

    font-family:'Cormorant Garamond', serif;

    font-style:italic;

    font-size:clamp(1rem,2vw,1.3rem);

    color:var(--sandstone-lt);

    opacity:.8;

    text-shadow:
        0 2px 10px #000;

    z-index:10;
}
/* ============================================================
   LIBRARY SERVICES HALL
   GRAND TEMPLE ENTRANCE
============================================================ */

.hall {
    position: relative;
    min-height: 175vh;
    overflow: hidden;
    isolation: isolate;
}


/* ------------------------------------------------------------
   DARK TEMPLE INTERIOR
------------------------------------------------------------ */

.hall {
    background:
        radial-gradient(
            ellipse at 50% 8%,
            rgba(212,175,55,.16),
            transparent 38%
        ),
        linear-gradient(
            to bottom,
            #120c08 0%,
            #1b120c 35%,
            #0c0805 100%
        );
}


/* ============================================================
   THE FLOOR — ONE CONTINUOUS FLOOR
============================================================ */

.hall-floor-main {
    position: absolute;

    left: 50%;
    top: 34vh;
    bottom: 0;

    transform: translateX(-50%);

    width: 82%;

    background:
        repeating-linear-gradient(
            to bottom,
            transparent 0 70px,
            rgba(212,175,55,.055) 71px,
            transparent 73px
        ),
        linear-gradient(
            to bottom,
            #49321e,
            #21160e 45%,
            #0c0805
        );

    clip-path:
        polygon(
            27% 0,
            73% 0,
            100% 100%,
            0 100%
        );

    z-index: 1;

    box-shadow:
        inset 0 25px 40px rgba(0,0,0,.45),
        inset 0 0 80px rgba(0,0,0,.7);
}


/* Central path coming directly from the gate */

.hall-floor-main::before {

    content: "";

    position: absolute;

    left: 50%;
    top: 0;
    bottom: 0;

    transform: translateX(-50%);

    width: 38%;

    background:
        linear-gradient(
            to bottom,
            rgba(244,211,94,.20),
            rgba(212,175,55,.08) 35%,
            transparent 85%
        );

    border-left:
        1px solid rgba(244,211,94,.12);

    border-right:
        1px solid rgba(244,211,94,.12);

    box-shadow:
        0 0 50px rgba(212,175,55,.06);
}
/* ============================================================
   LIBRARY SERVICES → HALL OF STORIES
   DESCENDING TEMPLE PASSAGE
============================================================ */

.hall {
    min-height: 158vh;
}

/* ------------------------------------------------------------
   STORIES HALL CONNECTION
------------------------------------------------------------ */

.stories {
    position: relative;
}

/* dark receiving entrance at top of next hall */

.stories::before {
    content: "";

    position: absolute;

    left: 50%;
    top: 0;

    transform: translateX(-50%);

    width: min(620px, 55vw);
    height: 19vh;

    background:
        radial-gradient(
            ellipse at 50% 0%,
            rgba(244,211,94,.22),
            rgba(212,175,55,.06) 45%,
            transparent 75%
        );

    border-left:
        5px solid rgba(212,175,55,.22);

    border-right:
        5px solid rgba(212,175,55,.22);

    clip-path:
        polygon(
            12% 0,
            88% 0,
            100% 100%,
            0 100%
        );

    pointer-events: none;

    z-index: 2;
}

/* ------------------------------------------------------------
   Responsive
------------------------------------------------------------ */

@media (max-width: 900px) {

    .hall {
        min-height: 150vh;
    }
}

@media (max-width: 600px) {

    .hall {
        min-height: 145vh;
    }
}
/* ============================================================
   SERVICES → STORIES CONTINUOUS TRANSITION
============================================================ */

.hall-transition {
    position: absolute;
    left: 50%;
    bottom: -1px;
    transform: translateX(-50%);

    width: 100%;
    height: 38vh;

    z-index: 20;
    pointer-events: none;
}

/* نفس أرضية القاعة — مفيش قطع */
.transition-floor {
    position: absolute;
    left: 50%;
    bottom: 0;
    transform: translateX(-50%);

    width: 72%;
    height: 100%;

    background:
        linear-gradient(
            to bottom,
            rgba(100,70,38,.05),
            rgba(45,30,18,.72)
        );

    clip-path:
        polygon(
            18% 0,
            82% 0,
            100% 100%,
            0 100%
        );

    box-shadow:
        inset 0 25px 35px rgba(212,175,55,.08);
}

/* المدخل */
.transition-entrance {
    position: absolute;

    left: 50%;
    bottom: 0;

    transform: translateX(-50%);

    width: 42%;
    height: 92%;

    background:
        linear-gradient(
            to bottom,
            rgba(100,70,38,.5),
            #120b07 32%,
            #050302
        );

    border-left: 6px solid #76542d;
    border-right: 6px solid #76542d;

    box-shadow:
        inset 0 0 35px rgba(0,0,0,.8),
        0 -10px 25px rgba(212,175,55,.08);
}

/* العتب / العارضة الفرعونية */
.transition-lintel {
    position: absolute;

    left: -8%;
    top: 0;

    width: 116%;
    height: 24%;

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

    color: #e8c76a;

    font-size: 28px;

    background:
        linear-gradient(
            to bottom,
            #b88943,
            #624523 55%,
            #2b1b10
        );

    border:
        2px solid rgba(244,211,94,.42);

    clip-path:
        polygon(
            5% 0,
            95% 0,
            100% 25%,
            95% 100%,
            5% 100%,
            0 25%
        );

    box-shadow:
        0 8px 20px rgba(0,0,0,.7);
}

/* فتحة المدخل */
.transition-opening {
    position: absolute;

    left: 50%;
    bottom: 0;

    transform: translateX(-50%);

    width: 74%;
    height: 76%;

    background:
        radial-gradient(
            ellipse at 50% 0%,
            rgba(244,211,94,.16),
            transparent 55%
        ),
        #050302;

    box-shadow:
        inset 0 0 30px rgba(0,0,0,.9);
}

/* الضوء اللي يربط بالمرحلة التالية */

/* ---------------------------------------------------------
   8. Responsive
--------------------------------------------------------- */

@media (max-width: 900px) {

    .hall .relic-grid {
        grid-template-columns: repeat(2, 1fr);
        padding-top: 48vh;
    }

    .hall::after {
        width: 65%;
    }

    .hall::before {
        width: 60%;
    }
}


@media (max-width: 600px) {

    .hall .relic-grid {
        grid-template-columns: 1fr;
        padding-top: 42vh;
    }

    .hall::after {
        width: 85%;
    }

    .hall::before {
        width: 78%;
    }
}
/* ==========================================================
   PATCH — LIBRARY SERVICES HALL: BIGGER + DISTINCT SERVICES
   + DEEPER "DESCENDING INTO THE TEMPLE" FEEL
   CSS-only. No HTML changes required — reuses existing
   elements already in the page (.hall, .relic-*).
========================================================== */

/* ---------- 1. Deeper entrance feel at the top of the Hall ---------- */
.hall{
  min-height:170vh;
}
.hall-oculus{
  height:66vh !important;
  width:44vw !important;
  max-width:480px !important;
  opacity:.85;
}
.hall-beam-left,
.hall-beam-right{
  height:52vh !important;
  width:13vw !important;
  max-width:130px !important;
}
.hall-entry-glow{
  height:40vh !important;
}
.hall-column{
  height:96% !important;
}

/* subtle floor line pulling the eye downward into the hall */

/* ---------- 2. Bigger, more prominent relic figures ---------- */
.relic-figure{
  width:clamp(150px,15vw,210px) !important;
}
.relic-station{
  min-height:340px;
}
.relic-pedestal{
  width:70%;
  height:20px;
}
.relic-label{
  font-size:.85rem !important;
  padding:.65em 1.4em !important;
}
.relic-glow-ring{
  width:180% !important;
  padding-top:180% !important;
}
.relic-grid{
  padding-top:14vh !important;
}

/* ---------- 3. Each relic gets its own colour identity ---------- */

/* Profile — warm gold */
.relic-btn[data-relic="profile"] .relic-glow-ring{
  background:radial-gradient(circle, rgba(244,211,94,.55), rgba(212,175,55,.2) 40%, transparent 72%) !important;
}
.relic-btn[data-relic="profile"] .relic-label{
  border-color:rgba(244,211,94,.55);
}
.relic-btn[data-relic="profile"]:hover .relic-label,
.relic-btn[data-relic="profile"]:focus-visible .relic-label{
  background:linear-gradient(180deg, var(--gold-bright), var(--gold));
}

/* Virtual Tour — turquoise */
.relic-btn[data-relic="tour"] .relic-glow-ring{
  background:radial-gradient(circle, rgba(46,139,125,.6), rgba(46,139,125,.2) 40%, transparent 72%) !important;
}
.relic-btn[data-relic="tour"] .relic-label{
  border-color:rgba(46,139,125,.6);
}
.relic-btn[data-relic="tour"]:hover .relic-label,
.relic-btn[data-relic="tour"]:focus-visible .relic-label{
  background:linear-gradient(180deg, #bff4ea, var(--turquoise));
  color:var(--stone-900);
}

/* Borrow — amber / torch */
.relic-btn[data-relic="borrow"] .relic-glow-ring{
  background:radial-gradient(circle, rgba(255,140,66,.55), rgba(212,175,55,.18) 40%, transparent 72%) !important;
}
.relic-btn[data-relic="borrow"] .relic-label{
  border-color:rgba(255,140,66,.55);
}
.relic-btn[data-relic="borrow"]:hover .relic-label,
.relic-btn[data-relic="borrow"]:focus-visible .relic-label{
  background:linear-gradient(180deg, var(--torch-lt), var(--torch));
  color:var(--stone-900);
}

/* Library Map — deep lapis blue */
.relic-btn[data-relic="map"] .relic-glow-ring{
  background:radial-gradient(circle, rgba(30,58,95,.65), rgba(46,139,125,.15) 40%, transparent 72%) !important;
}
.relic-btn[data-relic="map"] .relic-label{
  border-color:rgba(90,140,200,.55);
}
.relic-btn[data-relic="map"]:hover .relic-label,
.relic-btn[data-relic="map"]:focus-visible .relic-label{
  background:linear-gradient(180deg, #a9c8ee, var(--lapis));
  color:#fff;
}
.relic-btn[data-relic="map"] .relic-tablet rect{
  stroke:#5a8cc8;
}
.relic-btn[data-relic="map"] .relic-tablet .tablet-path{
  stroke:#7fb0ea;
}

@media (max-width:720px){
  .relic-figure{ width:clamp(120px,26vw,170px) !important; }
  .relic-station{ min-height:280px; }
  .hall-oculus{ width:70vw !important; }
}
/* ==========================================================================
   LIBRARY SERVICES HALL — ANCIENT ARTIFACT REDESIGN (FINAL PATCH)
   --------------------------------------------------------------------------
   HOW TO APPLY
   Paste this ENTIRE block at the very end of css/style.css (after
   everything that is already there). CSS cascade order means a later
   rule with equal specificity wins, so appending it last is what makes
   it override every earlier .relic-* rule already in the file.
 
   WHAT THIS DOES NOT TOUCH
   - No HTML changes. Same 4 stations, same buttons, same
     data-relic / data-link attributes, same <svg class="relic-figure ...">
     icons (Profile / Virtual Tour / Borrow / Library Map).
   - No new sections, corridors, staircases, or page-structure changes.
   - main.js keeps working untouched (click handlers, .relic-ping,
     .relic-spark, etc. are unaffected — this file only changes how
     things LOOK, not the markup they attach to).
   ========================================================================== */
 
/* ---------- 1. The hall wall segment: floor + atmosphere ---------- */
.relic-grid{
  position:relative;
  z-index:10;
  max-width:1300px;
  margin:0 auto;
  padding:16vh 5vw 16vh !important;
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:clamp(30px,4vw,64px);
  align-items:start;
  min-height:auto;
}
@media (max-width:980px){
  .relic-grid{ grid-template-columns:repeat(2,1fr); row-gap:100px; padding-top:13vh !important; }
}
@media (max-width:520px){
  .relic-grid{ grid-template-columns:1fr; }
}
 
/* Stone floor with engraved flagstones + warm torchlight pooling
   (fills the previously-empty lower area of the hall) */
.relic-grid::before{
  content:"";
  position:absolute;
  left:50%; bottom:-4vh;
  transform:translateX(-50%);
  width:106%;
  height:38vh;
  background:
    radial-gradient(ellipse 60% 55% at 50% 100%, rgba(255,170,90,.18), transparent 72%),
    repeating-linear-gradient(90deg, rgba(212,175,55,.05) 0 2px, transparent 2px 64px),
    repeating-linear-gradient(0deg, rgba(212,175,55,.045) 0 2px, transparent 2px 46px),
    linear-gradient(to top, var(--stone-800) 0%, rgba(26,20,16,.45) 55%, transparent 100%);
  z-index:-2;
  pointer-events:none;
}
 
/* Faint hieroglyph inlay running along the floor */
.relic-grid::after{
  content:"𓂀 𓋹 𓏏 𓆣 𓅓 𓂀 𓋹 𓏏 𓆣 𓅓 𓂀 𓋹";
  position:absolute;
  left:50%; bottom:2vh;
  transform:translateX(-50%);
  width:92%;
  text-align:center;
  letter-spacing:1.2em;
  font-size:clamp(.7rem,1.6vw,1.1rem);
  color:rgba(212,175,55,.16);
  white-space:nowrap;
  overflow:hidden;
  z-index:-1;
  pointer-events:none;
}
 
/* ---------- 2. Each station: a carved niche holding a hanging tablet ---------- */
.relic-station{
  position:relative;
  display:flex;
  flex-direction:column;
  align-items:center;
  text-align:center;
  padding:66px 10px 8px;
  min-height:auto;
  background:none;
  border:none;
  box-shadow:none;
  clip-path:none;
  transition:transform .5s var(--ease-heavy);
}
.relic-station:hover{ transform:translateY(-4px); background:none; box-shadow:none; }
 
/* Recessed stone alcove behind the tablet + a pool of floor light beneath it
   — this is the "physically embedded in the hall" architecture */
.relic-station::before{
  content:"";
  position:absolute;
  top:40px; left:8%;
  width:84%; height:calc(100% - 40px);
  background:
    radial-gradient(ellipse 70% 26% at 50% 100%, rgba(255,170,90,.16), transparent 72%),
    linear-gradient(160deg, rgba(96,70,42,.35) 0%, rgba(30,21,14,.55) 55%, rgba(12,8,5,.65) 100%);
  clip-path:polygon(14% 0%, 86% 0%, 100% 6%, 100% 100%, 0% 100%, 0% 6%);
  box-shadow:
    inset 0 0 40px rgba(0,0,0,.6),
    inset 0 2px 0 rgba(255,220,170,.08);
  border-left:1px solid rgba(212,175,55,.18);
  border-right:1px solid rgba(212,175,55,.18);
  z-index:0;
  pointer-events:none;
}
 
/* Gold bracket peg + chain the tablet visibly hangs from */
.relic-station::after{
  content:"";
  position:absolute;
  top:0; left:50%;
  transform:translateX(-50%);
  width:6px; height:46px;
  background:
    radial-gradient(circle at 50% 6px, var(--gold-bright) 3px, transparent 4px),
    repeating-linear-gradient(to bottom, var(--gold-dim) 0 3px, transparent 3px 9px);
  filter:drop-shadow(0 0 6px rgba(244,211,94,.45));
  z-index:1;
  pointer-events:none;
}
 
/* ---------- 3. The tablet itself (the actual clickable button) ---------- */
.relic-btn{
  position:relative;
  z-index:2;
  width:100%;
  margin-top:46px;   /* clears the chain above */
  padding:34px 16px 22px;
  border:none;
  cursor:pointer;
  color:inherit;
  -webkit-tap-highlight-color:transparent;
  display:flex;
  flex-direction:column;
  align-items:center;
 
  background:
    radial-gradient(ellipse at 30% 12%, rgba(255,240,205,.16), transparent 55%),
    linear-gradient(160deg, var(--sandstone-lt) 0%, var(--sandstone) 42%, var(--stone-600) 100%);
 
  clip-path:polygon(
    4% 4%, 20% 0%, 80% 0%, 96% 4%,
    100% 14%, 100% 88%, 96% 96%,
    80% 100%, 20% 100%, 4% 96%,
    0% 88%, 0% 14%
  );
 
  box-shadow:
    0 0 0 3px var(--stone-800),
    0 0 0 5px rgba(212,175,55,.45),
    0 24px 40px rgba(0,0,0,.55),
    inset 0 0 46px rgba(0,0,0,.4),
    inset 0 2px 0 rgba(255,236,190,.22);
 
  transition:transform .5s var(--ease-heavy), box-shadow .5s var(--ease-heavy);
  isolation:isolate;
  overflow:hidden;
}
 
.relic-btn:hover,
.relic-btn:focus-visible{
  transform:translateY(-6px);
  box-shadow:
    0 0 0 3px var(--stone-800),
    0 0 0 5px var(--gold-bright),
    0 30px 52px rgba(0,0,0,.6),
    inset 0 0 46px rgba(0,0,0,.32),
    inset 0 2px 0 rgba(255,246,220,.35),
    0 0 40px rgba(244,211,94,.3);
}
.relic-btn:active{ transform:translateY(-1px) scale(.98); transition-duration:.12s; }
 
/* Engraved border frame + fine stone striations */
.relic-btn::before{
  content:"";
  position:absolute; inset:9px;
  border:1px solid rgba(212,175,55,.5);
  background-image:
    repeating-linear-gradient(0deg, rgba(43,33,24,.32) 0 2px, transparent 2px 20px),
    repeating-linear-gradient(90deg, rgba(43,33,24,.24) 0 2px, transparent 2px 20px);
  opacity:.5;
  mix-blend-mode:multiply;
  pointer-events:none;
  z-index:1;
}
 
/* Small hieroglyph carved at the crown of the tablet */
.relic-btn::after{
  content:"𓋹";
  position:absolute; top:8px; left:50%;
  transform:translateX(-50%);
  font-size:15px;
  color:rgba(60,44,26,.55);
  text-shadow:0 1px 0 rgba(255,240,205,.4);
  z-index:2;
  pointer-events:none;
}
 
/* ---------- 4. Ambient aura behind the tablet (kept, restyled) ---------- */
.relic-glow-ring{
  position:absolute;
  top:46%; left:50%;
  width:150% !important;
  padding-top:150% !important;
  transform:translate(-50%,-50%) scale(.75);
  border-radius:50%;
  background:radial-gradient(circle, rgba(244,211,94,.4), rgba(212,175,55,.16) 40%, transparent 72%);
  opacity:.25;
  animation:ancientPulse 4s ease-in-out infinite; /* reuses existing keyframes, unmodified */
  transition:opacity .5s var(--ease-heavy), transform .5s var(--ease-heavy);
  z-index:0;
  pointer-events:none;
}
.relic-btn:hover .relic-glow-ring,
.relic-btn:focus-visible .relic-glow-ring{
  opacity:.9;
  transform:translate(-50%,-50%) scale(1.05);
}
/* Note: [data-relic="..."] .relic-glow-ring rules already in the file
   still apply on top of this and give each tablet its own accent tint
   (gold / turquoise / torch-amber / lapis) — left untouched. */
 
/* ---------- 5. The icon itself: same SVGs, now read as carved relief ---------- */
.relic-figure{
  position:relative;
  z-index:3;
  width:clamp(88px,9vw,120px) !important;
  margin-top:6px;
  animation:relicFloat 6s ease-in-out infinite; /* reuses existing keyframes, unmodified */
  filter:
    sepia(.55) saturate(1.3) hue-rotate(-8deg)
    drop-shadow(0 2px 0 rgba(255,236,190,.35))
    drop-shadow(0 -1px 1px rgba(0,0,0,.5))
    drop-shadow(0 10px 14px rgba(0,0,0,.45));
  transition:filter .5s var(--ease-heavy);
}
.relic-btn:hover .relic-figure,
.relic-btn:focus-visible .relic-figure{
  filter:
    sepia(.35) saturate(1.4) hue-rotate(-6deg)
    drop-shadow(0 2px 0 rgba(255,246,220,.5))
    drop-shadow(0 -1px 1px rgba(0,0,0,.55))
    drop-shadow(0 0 22px rgba(244,211,94,.75));
}
 
/* ---------- 6. Pedestal becomes a small engraved gold seal ---------- */
.relic-pedestal{
  position:relative;
  z-index:3;
  width:54px !important;
  height:54px !important;
  margin-top:10px;
  border-radius:50%;
  background:radial-gradient(circle at 35% 30%, var(--gold-bright), var(--gold-dim) 70%, var(--stone-700) 100%);
  border:2px solid rgba(20,15,10,.5);
  box-shadow:
    inset 0 0 10px rgba(0,0,0,.5),
    inset 0 2px 2px rgba(255,246,220,.4),
    0 6px 12px rgba(0,0,0,.5);
  display:flex; align-items:center; justify-content:center;
}
.relic-pedestal::before{
  content:"𓂀";
  position:relative;
  top:0; left:0; transform:none;
  color:var(--stone-900);
  font-size:22px;
  text-shadow:0 1px 0 rgba(255,246,220,.4);
  opacity:.75;
}
 
/* ---------- 7. Label becomes a small hanging engraved plaque ---------- */
.relic-label{
  position:relative;
  z-index:3;
  margin-top:12px;
  font-family:'Cinzel', serif;
  font-size:.7rem !important;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--sandstone-lt);
  border:1px solid rgba(212,175,55,.45);
  border-radius:4px;
  padding:.5em 1.1em !important;
  background:linear-gradient(180deg, rgba(61,47,34,.85), rgba(20,15,10,.9));
  box-shadow:
    inset 0 0 10px rgba(0,0,0,.5),
    inset 0 1px 0 rgba(255,220,170,.15),
    0 6px 14px rgba(0,0,0,.4);
  transition:all .35s var(--ease-heavy);
}
.relic-btn:hover .relic-label,
.relic-btn:focus-visible .relic-label{
  border-color:var(--gold-bright);
  color:var(--stone-900);
  background:linear-gradient(180deg, var(--gold-bright), var(--gold));
  box-shadow:
    inset 0 0 10px rgba(0,0,0,.15),
    0 8px 18px rgba(0,0,0,.4),
    0 0 20px rgba(244,211,94,.4);
}
 
/* ---------- 8. Mobile ---------- */
@media (max-width:720px){
  .relic-figure{ width:clamp(76px,20vw,110px) !important; }
  .relic-station{ padding-top:52px; }
  .relic-btn{ margin-top:36px; }
  .relic-pedestal{ width:44px !important; height:44px !important; }
}
 
@media (prefers-reduced-motion: reduce){
  .relic-figure, .relic-glow-ring{ animation:none !important; }
}
/* ==========================================================================
   LIBRARY SERVICES HALL — LOWER FLOOR & ENVIRONMENT (PATCH 2)
   --------------------------------------------------------------------------
   ONE small HTML step is required (nothing else changes):
   Find this already-existing, currently-commented-out line inside the
   Library Services Hall section (right after the relic-grid markup, your
   own comment even calls it "stone floor with engraved hieroglyphs"):

       <!--
            stone floor with engraved hieroglyphs
           <div class="hall-floor" aria-hidden="true"></div>
       -->

   Simply uncomment that ONE div so it becomes:

           <div class="hall-floor" aria-hidden="true"></div>

   It is aria-hidden, has no click handlers, and nothing in main.js
   references it — it's purely decorative, so this does not change
   functionality, structure, or add any new section/corridor.

   Then paste this whole CSS block at the very end of css/style.css
   (after the previous artifact-redesign patch), so it wins the cascade.
   ========================================================================== */

.hall-floor{
  position:absolute;
  left:0; right:0; bottom:0;
  height:64vh;
  z-index:1;
  pointer-events:none;
  overflow:hidden;

  background:
    /* torchlight pools balanced under the four existing hall columns */
    radial-gradient(ellipse 16% 12% at 3% 4%,  rgba(255,170,90,.22), transparent 72%),
    radial-gradient(ellipse 16% 12% at 25% 3%, rgba(255,170,90,.16), transparent 72%),
    radial-gradient(ellipse 16% 12% at 75% 3%, rgba(255,170,90,.16), transparent 72%),
    radial-gradient(ellipse 16% 12% at 97% 4%, rgba(255,170,90,.22), transparent 72%),

    /* soft gold light bridging the tablets above to the floor below */
    linear-gradient(to bottom, rgba(244,211,94,.10) 0%, transparent 32%),

    /* perspective lines converging upward toward the four tablets */
    repeating-conic-gradient(from 0deg at 50% 0%,
      rgba(212,175,55,.055) 0deg 1.1deg,
      transparent 1.1deg 7deg),

    /* engraved stone flag grid */
    repeating-linear-gradient(90deg, rgba(212,175,55,.045) 0 2px, transparent 2px 60px),
    repeating-linear-gradient(0deg, rgba(212,175,55,.04) 0 2px, transparent 2px 44px),

    /* base stone gradient, fading up into the hall's own background */
    linear-gradient(to top, var(--stone-800) 0%, #150f0a 55%, transparent 100%);
}

/* Horizontal Egyptian frieze band, a thin decorative strip near the top of the floor */
.hall-floor::before{
  content:"";
  position:absolute;
  left:4%; right:4%; top:16%;
  height:15px;
  background:repeating-linear-gradient(90deg,
    rgba(212,175,55,.35) 0 3%,
    rgba(20,15,10,.25) 3% 5%,
    rgba(212,175,55,.22) 5% 8%,
    rgba(20,15,10,.25) 8% 10%);
  border-top:1px solid rgba(212,175,55,.3);
  border-bottom:1px solid rgba(212,175,55,.3);
  opacity:.75;
  z-index:1;
}

/* Large, very subtle Eye of Horus engraved at the centre of the floor */
.hall-floor::after{
  content:"𓂀";
  position:absolute;
  top:36%; left:50%;
  transform:translate(-50%,-50%);
  font-size:min(28vw, 300px);
  line-height:1;
  color:rgba(212,175,55,.07);
  text-shadow:0 2px 0 rgba(255,236,190,.04), 0 -2px 6px rgba(0,0,0,.35);
  z-index:0;
}

/* Small carved stone plaques near the side walls, attached to the
   existing guardian statues rather than inventing new structures */
.hall-sentinel{ position:absolute; } /* ensure positioning context (harmless if already set) */
.hall-sentinel::after{
  content:"";
  position:absolute;
  top:32%;
  width:34px; height:52px;
  background:linear-gradient(160deg, rgba(96,70,42,.55), rgba(20,14,9,.75));
  border:1px solid rgba(212,175,55,.35);
  box-shadow:inset 0 0 10px rgba(0,0,0,.6), 0 6px 14px rgba(0,0,0,.4);
  opacity:.8;
  z-index:1;
}
.hall-sentinel.left::after{ left:-42px; }
.hall-sentinel.right::after{ right:-42px; }

@media (max-width:720px){
  .hall-floor{ height:48vh; }
  .hall-floor::after{ font-size:min(46vw,220px); }
  .hall-sentinel::after{ display:none; }
}

/* --------------------------------------------------------------------
   Small filter adjustment: the four relic-figure SVGs below now carry
   their own sandstone/bronze/gold tones directly (see the SVG-swap
   file), so ease off the earlier heavy sepia so those colors read
   correctly, while keeping the carved light/dark edge.
   -------------------------------------------------------------------- */
.relic-figure{
  filter:
    contrast(1.05) saturate(1.05)
    drop-shadow(0 2px 0 rgba(255,236,190,.3))
    drop-shadow(0 -1px 1px rgba(0,0,0,.5))
    drop-shadow(0 10px 14px rgba(0,0,0,.45)) !important;
}
.relic-btn:hover .relic-figure,
.relic-btn:focus-visible .relic-figure{
  filter:
    contrast(1.1) saturate(1.1)
    drop-shadow(0 2px 0 rgba(255,246,220,.4))
    drop-shadow(0 -1px 1px rgba(0,0,0,.55))
    drop-shadow(0 0 20px rgba(244,211,94,.7)) !important;
}
/* ==========================================================================
   LIBRARY SERVICES HALL — TABLET SURFACE RE-MATERIAL (PATCH 3)
   --------------------------------------------------------------------------
   CSS ONLY. No HTML, SVG, or JS changes — this touches only the visual
   background/border/shadow of .relic-btn (and its two existing pseudo-
   elements). The button's clip-path (cut-corner silhouette), size,
   position, data-relic/data-link, the four SVG icons, the glow-ring,
   pedestal, and label are all left exactly as they already are.

   Paste this at the very end of css/style.css, after every previous
   patch, so it wins the cascade on these specific properties.
   ========================================================================== */

.relic-btn{
  /* same silhouette as before — restated only so this rule fully applies */
  clip-path:polygon(
    4% 4%, 20% 0%, 80% 0%, 96% 4%,
    100% 14%, 100% 88%, 96% 96%,
    80% 100%, 20% 100%, 4% 96%,
    0% 88%, 0% 14%
  );

  /* dark carved sandstone / limestone, no white or beige-paper tone,
     with a warm torch-glow pooling where the icon sits */
  background:
    radial-gradient(ellipse 62% 42% at 50% 30%, rgba(244,197,94,.20), transparent 68%),
    radial-gradient(ellipse 90% 60% at 30% 0%, rgba(120,90,55,.35), transparent 70%),
    linear-gradient(165deg,
      #4a3826 0%,
      #362819 42%,
      #201509 78%,
      #140d07 100%);

  border:none;

  box-shadow:
    0 0 0 2px var(--stone-900),
    0 0 0 4px rgba(212,175,55,.4),
    0 22px 38px rgba(0,0,0,.6),
    inset 0 0 55px rgba(0,0,0,.6),
    inset 0 3px 0 rgba(255,224,170,.08),
    inset 0 -10px 22px rgba(0,0,0,.55);
}

.relic-btn:hover,
.relic-btn:focus-visible{
  box-shadow:
    0 0 0 2px var(--stone-900),
    0 0 0 4px var(--gold-bright),
    0 28px 48px rgba(0,0,0,.65),
    inset 0 0 55px rgba(0,0,0,.5),
    inset 0 3px 0 rgba(255,236,190,.14),
    inset 0 -10px 22px rgba(0,0,0,.5),
    0 0 34px rgba(244,211,94,.28);
}

/* Subtle carved-stone grain (organic, not a grid) + thin engraved
   antique-gold inner border */
.relic-btn::before{
  content:"";
  position:absolute; inset:9px;
  border:1px solid rgba(212,175,55,.45);
  box-shadow:
    inset 0 0 0 1px rgba(0,0,0,.35),
    inset 0 0 22px rgba(0,0,0,.4);
  background-image:
    radial-gradient(circle at 18% 22%, rgba(0,0,0,.25) 0 6px, transparent 7px),
    radial-gradient(circle at 76% 14%, rgba(0,0,0,.2) 0 5px, transparent 6px),
    radial-gradient(circle at 62% 68%, rgba(0,0,0,.22) 0 7px, transparent 8px),
    radial-gradient(circle at 30% 82%, rgba(0,0,0,.2) 0 5px, transparent 6px),
    radial-gradient(circle at 85% 55%, rgba(255,220,170,.05) 0 6px, transparent 7px),
    radial-gradient(circle at 12% 60%, rgba(255,220,170,.04) 0 5px, transparent 6px);
  opacity:.6;
  mix-blend-mode:multiply;
  pointer-events:none;
  z-index:1;
}

/* Small ornamental frieze band near the top, with hieroglyphs woven in —
   replaces the earlier single centered glyph */
.relic-btn::after{
  content:"𓉐 𓋹 𓊪 𓆣 𓊪 𓋹 𓉐";
  position:absolute;
  top:9px; left:12%; right:12%;
  text-align:center;
  font-size:9px;
  letter-spacing:.12em;
  line-height:1;
  color:rgba(212,175,55,.55);
  text-shadow:0 1px 0 rgba(0,0,0,.5);
  padding-bottom:5px;
  border-bottom:1px solid rgba(212,175,55,.3);
  white-space:nowrap;
  overflow:hidden;
  z-index:2;
  pointer-events:none;
}

@media (max-width:720px){
  .relic-btn::after{ font-size:7px; letter-spacing:.06em; }
}
/* ==========================================================================
   LIBRARY SERVICES HALL — RELIC TABLET DEEP-CARVE PATCH (FINAL)
   --------------------------------------------------------------------------
   CSS ONLY. Paste this ENTIRE block at the very end of css/style.css,
   after every earlier .relic-* patch, so the cascade lets it win.

   Touches ONLY existing elements/classes already in the page:
     .relic-station  .relic-btn  .relic-figure  .relic-pedestal
     .relic-label    .relic-glow-ring
   and the existing data-relic="profile|tour|borrow|map" attributes.

   No HTML changes. No new sections/corridors. No SVG swaps.
   No JS changes — main.js's click handlers, .relic-ping and
   .relic-spark bursts keep working exactly as before; this file only
   changes how the four tablets look and how they react to :hover /
   :focus-visible.

   Uses :has() for two purely-decorative effects (dimming the other
   three tablets on hover, and tinting each tablet's crest by service).
   :has() is supported in all current major browsers; on the rare older
   browser that lacks it, those two effects simply don't apply — nothing
   breaks.
   ========================================================================== */

/* ---------- 0. 3D stage for the cinematic hover ---------- */
.relic-station{
  perspective:1200px;
}

/* ---------- 1 + 5. The stone body itself ----------
   Deep carved outer frame, secondary recessed border, chipped/irregular
   edges (via clip-path), hairline cracks, uneven sandstone grain,
   light-catching bevels, and the torchlight sweep layer (kept dormant
   at rest, animated across the stone on hover in section 6/7 below). */
.relic-btn{
  position:relative;
  z-index:2;

  clip-path:polygon(
    3% 5%, 9% 2%, 21% 0%, 79% 0%, 91% 2%, 97% 5%,
    100% 12%, 99% 30%, 100% 50%, 99% 70%, 100% 88%,
    97% 95%, 91% 98%, 79% 100%, 21% 100%, 9% 98%, 3% 95%,
    0% 88%, 1% 70%, 0% 50%, 1% 30%, 0% 12%
  );

  background-image:
    /* torch pool behind the icon */
    radial-gradient(ellipse 60% 40% at 50% 30%, rgba(244,197,94,.22), transparent 70%),
    /* worn, darker corners */
    radial-gradient(ellipse 70% 55% at 12% 8%,  rgba(0,0,0,.35), transparent 55%),
    radial-gradient(ellipse 70% 55% at 88% 92%, rgba(0,0,0,.35), transparent 55%),
    /* hairline cracks */
    linear-gradient(72deg,  transparent 46.6%, rgba(15,10,6,.55) 47%, transparent 47.5%),
    linear-gradient(-64deg, transparent 61%,   rgba(15,10,6,.45) 61.6%, transparent 62.2%),
    linear-gradient(24deg,  transparent 78%,   rgba(15,10,6,.4)  78.6%, transparent 79.2%),
    /* carved depressions / grain */
    radial-gradient(circle at 22% 24%, rgba(0,0,0,.2)  0 3px, transparent 4px),
    radial-gradient(circle at 68% 16%, rgba(0,0,0,.16) 0 2px, transparent 3px),
    radial-gradient(circle at 78% 62%, rgba(0,0,0,.18) 0 3px, transparent 4px),
    radial-gradient(circle at 30% 78%, rgba(0,0,0,.16) 0 2px, transparent 3px),
    radial-gradient(circle at 90% 40%, rgba(255,236,190,.07) 0 3px, transparent 4px),
    radial-gradient(circle at 12% 55%, rgba(255,236,190,.05) 0 2px, transparent 3px),
    /* torchlight sweep — dormant, animated on hover */
    linear-gradient(100deg, transparent 42%, rgba(255,214,150,.5) 49%, transparent 56%),
    /* base sandstone */
    linear-gradient(165deg, #4a3826 0%, #362819 42%, #201509 78%, #140d07 100%);

  background-repeat:no-repeat;
  background-size:
    100% 100%,100% 100%,100% 100%,100% 100%,100% 100%,100% 100%,
    100% 100%,100% 100%,100% 100%,100% 100%,100% 100%,100% 100%,
    280% 280%, 100% 100%;
  background-position:
    0 0,0 0,0 0,0 0,0 0,0 0,0 0,0 0,0 0,0 0,0 0,0 0,
    -170% -60%, 0 0;

  border:none;
  box-shadow:
    0 0 0 2px var(--stone-900),
    0 0 0 4px rgba(212,175,55,.4),
    inset 0 0 0 9px rgba(0,0,0,.22),
    inset 0 0 0 10px rgba(212,175,55,.3),
    0 22px 38px rgba(0,0,0,.6),
    inset 0 0 55px rgba(0,0,0,.55),
    inset 0 3px 0 rgba(255,224,170,.08),
    inset 0 -10px 22px rgba(0,0,0,.5);

  transform-style:preserve-3d;
  transform:perspective(1000px) translateZ(0) rotateX(0deg) scale(1);

  transition:
    transform .6s cubic-bezier(.22,.61,.16,1),
    box-shadow .6s cubic-bezier(.22,.61,.16,1),
    background-position 1.3s cubic-bezier(.22,.61,.16,1),
    filter .6s var(--ease-heavy);
}

/* ---------- 2. Engraved hieroglyphs — narrow columns, left and right ----------
   Dark at rest, gold-brown relief, illuminate gradually on hover. */
.relic-btn::before,
.relic-btn::after{
  content:"𓂀 𓋹 𓏏 𓆣 𓅓";
  position:absolute;
  top:15%; bottom:15%;
  width:16px;
  z-index:3;
  pointer-events:none;

  writing-mode:vertical-rl;
  text-orientation:upright;
  letter-spacing:6px;
  font-size:11px;
  line-height:1;
  overflow:hidden;

  color:rgba(140,105,50,.55);
  text-shadow:0 1px 0 rgba(0,0,0,.45);
  opacity:.5;
  filter:brightness(.7);

  transition:
    opacity .6s var(--ease-heavy),
    color .6s var(--ease-heavy),
    filter .6s var(--ease-heavy);
}
.relic-btn::before{ left:9px; }
.relic-btn::after{ right:9px; transform:scaleX(-1); }

.relic-btn:hover::before, .relic-btn:hover::after,
.relic-btn:focus-visible::before, .relic-btn:focus-visible::after{
  opacity:1;
  color:rgba(244,211,94,.85);
  filter:brightness(1) drop-shadow(0 0 4px rgba(244,211,94,.55));
}

/* ---------- 3. Top ornament — winged/solar temple crest ----------
   Reuses the existing station-top anchor point (previously a plain
   chain peg) so the tablet still visibly hangs from the same spot. */
.relic-station::after{
  content:"";
  position:absolute;
  top:0; left:50%;
  transform:translateX(-50%) scale(1);
  width:68px; height:28px;
  z-index:4;
  pointer-events:none;

  background:
    radial-gradient(circle at 50% 55%, var(--gold-bright) 0 4px, rgba(212,175,55,.55) 5px 9px, transparent 10px),
    linear-gradient(88deg,  transparent 0%, rgba(212,175,55,.6) 20%, transparent 40%),
    linear-gradient(272deg, transparent 0%, rgba(212,175,55,.6) 20%, transparent 40%),
    radial-gradient(ellipse 60% 40% at 20% 60%, rgba(212,175,55,.35), transparent 70%),
    radial-gradient(ellipse 60% 40% at 80% 60%, rgba(212,175,55,.35), transparent 70%);

  opacity:.55;
  filter:drop-shadow(0 0 4px rgba(212,175,55,.3));
  transition:opacity .6s var(--ease-heavy), filter .6s var(--ease-heavy), transform .6s var(--ease-heavy);
}
.relic-station:hover::after,
.relic-station:focus-within::after{
  opacity:1;
  transform:translateX(-50%) scale(1.1);
  filter:drop-shadow(0 0 10px rgba(244,211,94,.7));
}

/* ---------- 4. Bottom ornament — carved band beneath the label ----------
   Extends the existing gold-seal pedestal with a wing-like relief band
   that visually ties the tablet down into the temple architecture. */
.relic-pedestal{ position:relative; overflow:visible; }
.relic-pedestal::after{
  content:"";
  position:absolute;
  top:50%; left:50%;
  transform:translate(-50%,-50%);
  width:110px; height:14px;
  z-index:-1;
  pointer-events:none;
  background:
    linear-gradient(90deg,  transparent, rgba(212,175,55,.5) 28%, transparent 46%),
    linear-gradient(270deg, transparent, rgba(212,175,55,.5) 28%, transparent 46%);
  opacity:.7;
}
.relic-btn:hover .relic-pedestal,
.relic-btn:focus-visible .relic-pedestal{
  animation:relicSealPulse 1.4s ease-in-out infinite;
}
@keyframes relicSealPulse{
  0%,100%{ box-shadow:inset 0 0 10px rgba(0,0,0,.5), inset 0 2px 2px rgba(255,246,220,.4), 0 6px 12px rgba(0,0,0,.5), 0 0 0 rgba(244,211,94,0); }
  50%{     box-shadow:inset 0 0 10px rgba(0,0,0,.5), inset 0 2px 2px rgba(255,246,220,.4), 0 6px 12px rgba(0,0,0,.5), 0 0 16px rgba(244,211,94,.75); }
}

/* ---------- 6. Cinematic hover: the tablet itself ---------- */
.relic-btn:hover,
.relic-btn:focus-visible{
  background-position:
    0 0,0 0,0 0,0 0,0 0,0 0,0 0,0 0,0 0,0 0,0 0,0 0,
    170% 60%, 0 0;
  box-shadow:
    0 0 0 2px var(--stone-900),
    0 0 0 4px var(--gold-bright),
    inset 0 0 0 9px rgba(0,0,0,.16),
    inset 0 0 0 10px rgba(244,211,94,.5),
    0 30px 54px rgba(0,0,0,.65),
    inset 0 0 55px rgba(0,0,0,.45),
    inset 0 3px 0 rgba(255,236,190,.18),
    inset 0 -10px 22px rgba(0,0,0,.45),
    0 0 46px rgba(244,211,94,.32);
  animation:relicResonance 2.2s ease-in-out infinite;
}
@keyframes relicResonance{
  0%,100%{ transform:perspective(1000px) translateZ(25px) rotateX(-1deg)   scale(1.025); }
  50%{     transform:perspective(1000px) translateZ(27px) rotateX(-1.4deg) scale(1.03);  }
}
.relic-btn:active{
  transform:perspective(1000px) translateZ(14px) rotateX(-.6deg) scale(1.01);
  animation:none;
  transition-duration:.12s;
}

/* the SVG artifact moves forward and gains a stronger relief shadow */
.relic-figure{
  transition:transform .5s var(--ease-heavy), filter .5s var(--ease-heavy);
}
.relic-btn:hover .relic-figure,
.relic-btn:focus-visible .relic-figure{
  transform:translateY(-4px) scale(1.045);
  filter:
    contrast(1.1) saturate(1.1)
    drop-shadow(0 2px 0 rgba(255,246,220,.45))
    drop-shadow(0 -1px 1px rgba(0,0,0,.55))
    drop-shadow(0 0 26px rgba(244,211,94,.8))
    drop-shadow(0 14px 16px rgba(0,0,0,.5));
}

/* soft golden aura + a few floating gold dust motes, riding the
   existing glow-ring so no new element is added */
.relic-glow-ring::before,
.relic-glow-ring::after{
  content:"";
  position:absolute; inset:0;
  pointer-events:none;
  opacity:0;
  background-image:
    radial-gradient(circle at 20% 30%, rgba(244,211,94,.9) 0 1.5px, transparent 2px),
    radial-gradient(circle at 65% 20%, rgba(244,211,94,.7) 0 1px,   transparent 2px),
    radial-gradient(circle at 40% 72%, rgba(244,211,94,.85) 0 1.5px, transparent 2px),
    radial-gradient(circle at 80% 64%, rgba(244,211,94,.6) 0 1px,   transparent 2px),
    radial-gradient(circle at 55% 46%, rgba(244,211,94,.75) 0 1px,  transparent 2px);
  animation:relicDustDrift 6s linear infinite;
  transition:opacity .6s var(--ease-heavy);
}
.relic-glow-ring::after{ animation-duration:8.5s; animation-direction:reverse; }
@keyframes relicDustDrift{
  0%{   transform:translateY(0)   scale(1);   }
  50%{  transform:translateY(-6%) scale(1.03); }
  100%{ transform:translateY(0)   scale(1);   }
}
.relic-btn:hover .relic-glow-ring::before, .relic-btn:hover .relic-glow-ring::after,
.relic-btn:focus-visible .relic-glow-ring::before, .relic-btn:focus-visible .relic-glow-ring::after{
  opacity:.85;
}

/* dim the other three tablets while one is awake */
.relic-grid:has(.relic-btn:hover) .relic-btn:not(:hover),
.relic-grid:has(.relic-btn:focus-visible) .relic-btn:not(:focus-visible){
  filter:brightness(.72) saturate(.85);
  transform:perspective(1000px) translateZ(0) rotateX(0deg) scale(.99);
}

/* ---------- 8. A different carved identity per service ----------
   Same four services, same temple design system — the hieroglyph set
   and the crest glow simply lean into what each hall actually is. */

/* Profile — guardian / human figure / ankh */
.relic-btn[data-relic="profile"]::before,
.relic-btn[data-relic="profile"]::after{ content:"𓀀 𓋹 𓀀 𓋹"; }

/* Virtual Tour — Eye of Horus / temple-eye / solar */
.relic-btn[data-relic="tour"]::before,
.relic-btn[data-relic="tour"]::after{ content:"𓂀 𓇳 𓂀 𓇳"; }

/* Borrow — papyrus / scroll / writing */
.relic-btn[data-relic="borrow"]::before,
.relic-btn[data-relic="borrow"]::after{ content:"𓏛 𓎡 𓏛 𓎡"; }

/* Library Map — pyramid / path / stars */
.relic-btn[data-relic="map"]::before,
.relic-btn[data-relic="map"]::after{ content:"𓉴 𓇼 𓉴 𓇼"; }

.relic-station:has(.relic-btn[data-relic="tour"]):hover::after,
.relic-station:has(.relic-btn[data-relic="tour"]):focus-within::after{
  filter:drop-shadow(0 0 10px rgba(46,139,125,.7));
}
.relic-station:has(.relic-btn[data-relic="borrow"]):hover::after,
.relic-station:has(.relic-btn[data-relic="borrow"]):focus-within::after{
  filter:drop-shadow(0 0 10px rgba(255,140,66,.7));
}
.relic-station:has(.relic-btn[data-relic="map"]):hover::after,
.relic-station:has(.relic-btn[data-relic="map"]):focus-within::after{
  filter:drop-shadow(0 0 10px rgba(90,140,200,.7));
}

/* ---------- Mobile ---------- */
@media (max-width:720px){
  .relic-btn::before, .relic-btn::after{ width:11px; font-size:9px; letter-spacing:4px; }
  .relic-station::after{ width:50px; height:20px; }
  .relic-pedestal::after{ width:80px; }
}

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion: reduce){
  .relic-btn, .relic-btn::before, .relic-btn::after,
  .relic-figure, .relic-pedestal, .relic-glow-ring::before, .relic-glow-ring::after,
  .relic-station::after{
    animation:none !important;
    transition:none !important;
  }
  .relic-btn:hover, .relic-btn:focus-visible{ transform:none; }
}
/* =========================================================
   LIBRARY SERVICES HALL — FINAL TEMPLE TABLET ENHANCEMENT
   ========================================================= */

/* 1. Make the four tablets feel intentionally staggered */
.relic-grid {
    align-items: center;
    perspective: 1400px;
}

/* Profile — HIGH */
.relic-station:nth-child(1) {
    transform: translateY(-32px);
}

/* Virtual Tour — LOW */
.relic-station:nth-child(2) {
    transform: translateY(28px);
}

/* Borrow — HIGH */
.relic-station:nth-child(3) {
    transform: translateY(-18px);
}

/* Library Map — LOW */
.relic-station:nth-child(4) {
    transform: translateY(35px);
}


/* =========================================================
   2. STONE TABLET — MORE CARVED / ANCIENT
   ========================================================= */

.relic-btn {
    position: relative;
    isolation: isolate;

    /* richer stone */
    background:
        radial-gradient(
            circle at 50% 35%,
            rgba(155, 119, 65, .22),
            transparent 38%
        ),
        linear-gradient(
            145deg,
            #3a2a1b 0%,
            #211710 42%,
            #120d09 100%
        );

    border: 1px solid rgba(181, 139, 55, .55);

    box-shadow:
        inset 0 0 0 2px rgba(92, 67, 31, .45),
        inset 0 0 35px rgba(0, 0, 0, .75),
        inset 0 8px 18px rgba(220, 176, 84, .08),
        0 18px 35px rgba(0, 0, 0, .55);

    transition:
        transform .65s cubic-bezier(.2,.8,.2,1),
        box-shadow .65s ease,
        border-color .5s ease;
}


/* =========================================================
   3. STONE CRACKS / CARVED LINES
   ========================================================= */

.relic-btn::before {
    content: "";
    position: absolute;
    inset: 12px;

    z-index: -1;
    pointer-events: none;

    opacity: .28;

    background:
        linear-gradient(
            118deg,
            transparent 0 24%,
            rgba(202,166,94,.35) 24.2%,
            transparent 24.8%
        ),
        linear-gradient(
            62deg,
            transparent 0 62%,
            rgba(202,166,94,.22) 62.3%,
            transparent 63%
        ),
        linear-gradient(
            175deg,
            transparent 0 44%,
            rgba(0,0,0,.5) 44.4%,
            transparent 45%
        );

    mix-blend-mode: screen;
}


/* =========================================================
   4. HIEROGLYPHIC DECORATION
   ========================================================= */

.relic-btn::after {
    content: "𓂀   𓆣   𓁹   𓂀";
    
    position: absolute;

    left: 12%;
    right: 12%;
    bottom: 14px;

    height: 20px;

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

    font-size: 11px;
    letter-spacing: 8px;

    color: rgba(207, 166, 66, .34);

    border-top: 1px solid rgba(189, 148, 52, .25);

    pointer-events: none;

    transition:
        color .5s ease,
        text-shadow .5s ease,
        letter-spacing .5s ease;
}


/* =========================================================
   5. INNER GOLD CARVING FRAME
   ========================================================= */

.relic-btn {
    outline: 1px solid rgba(211, 169, 70, .16);
    outline-offset: -8px;
}


/* =========================================================
   6. HOVER — NOT JUST SCALE
   ========================================================= */

.relic-station:hover .relic-btn {
    transform:
        translateY(-12px)
        rotateX(2deg)
        rotateY(-2deg)
        scale(1.025);

    border-color: rgba(226, 185, 83, .85);

    box-shadow:
        inset 0 0 0 2px rgba(176, 132, 47, .65),
        inset 0 0 45px rgba(0, 0, 0, .82),
        inset 0 10px 25px rgba(236, 195, 91, .13),
        0 25px 55px rgba(0, 0, 0, .75),
        0 0 28px rgba(193, 148, 47, .18);
}


/* Hieroglyphs react to hover */
.relic-station:hover .relic-btn::after {
    color: rgba(240, 202, 101, .85);

    text-shadow:
        0 0 8px rgba(224, 179, 65, .55),
        0 0 18px rgba(224, 179, 65, .25);

    letter-spacing: 11px;
}


/* =========================================================
   7. LIGHT SWEEP ACROSS THE STONE
   ========================================================= */

.relic-btn {
    overflow: hidden;
}

.relic-btn .relic-glow-ring {
    position: absolute;
    inset: -30%;

    pointer-events: none;

    background:
        linear-gradient(
            115deg,
            transparent 35%,
            rgba(255, 221, 133, .0) 43%,
            rgba(255, 221, 133, .18) 50%,
            rgba(255, 221, 133, .0) 57%,
            transparent 65%
        );

    transform: translateX(-70%) rotate(8deg);

    transition: transform 1.1s cubic-bezier(.2,.7,.2,1);
}

.relic-station:hover .relic-glow-ring {
    transform: translateX(70%) rotate(8deg);
}


/* =========================================================
   8. ICONS — GIVE THEM DEPTH
   ========================================================= */

.relic-figure {
    position: relative;

    filter:
        drop-shadow(0 5px 5px rgba(0,0,0,.75))
        drop-shadow(0 0 8px rgba(204,160,55,.12));

    transition:
        transform .7s cubic-bezier(.2,.8,.2,1),
        filter .6s ease;
}

.relic-station:hover .relic-figure {
    transform:
        translateY(-8px)
        scale(1.055);

    filter:
        drop-shadow(0 9px 8px rgba(0,0,0,.8))
        drop-shadow(0 0 18px rgba(224,181,70,.38));
}


/* =========================================================
   9. GOLD SEAL / BUTTON
   ========================================================= */

.relic-pedestal {
    transition:
        transform .5s ease,
        box-shadow .5s ease;
}

.relic-station:hover .relic-pedestal {
    transform: translateY(-4px) scale(1.08);

    box-shadow:
        0 0 12px rgba(218,174,61,.35),
        0 0 25px rgba(218,174,61,.18);
}


/* =========================================================
   10. GENTLE FLOATING TABLETS
   ========================================================= */

.relic-station .relic-btn {
    will-change: transform;
}

/* Profile */
.relic-station:nth-child(1) .relic-btn {
    animation: gentleFloat1 5.5s ease-in-out infinite;
}

/* Virtual Tour */
.relic-station:nth-child(2) .relic-btn {
    animation: gentleFloat2 6.2s ease-in-out infinite;
}

/* Borrow */
.relic-station:nth-child(3) .relic-btn {
    animation: gentleFloat3 5.8s ease-in-out infinite;
}

/* Library Map */
.relic-station:nth-child(4) .relic-btn {
    animation: gentleFloat4 6.5s ease-in-out infinite;
}


/* حركة Profile */
@keyframes gentleFloat1 {
    0%, 100% {
        transform: translateY(0) rotateZ(0deg);
    }

    50% {
        transform: translateY(-7px) rotateZ(-0.35deg);
    }
}


/* حركة Virtual Tour */
@keyframes gentleFloat2 {
    0%, 100% {
        transform: translateY(0) rotateZ(0deg);
    }

    50% {
        transform: translateY(6px) rotateZ(0.35deg);
    }
}


/* حركة Borrow */
@keyframes gentleFloat3 {
    0%, 100% {
        transform: translateY(0) rotateZ(0deg);
    }

    50% {
        transform: translateY(-5px) rotateZ(-0.25deg);
    }
}


/* حركة Library Map */
@keyframes gentleFloat4 {
    0%, 100% {
        transform: translateY(0) rotateZ(0deg);
    }

    50% {
        transform: translateY(7px) rotateZ(0.3deg);
    }
}


/* عند الوقوف بالماوس: ثبّت الحركة واعمل Hover effect */
.relic-station:hover .relic-btn {
    animation-play-state: paused;
}


/* =========================================================
   11. REDUCE MOTION ACCESSIBILITY
   ========================================================= */

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

    .relic-station .relic-btn {
        animation: none !important;
        transition: none !important;
    }

}
/* =========================================================
   LIBRARY SERVICES — LOWER TEMPLE FLOOR
   ========================================================= */

.hall-floor {
    position: relative;
    height: 520px;
    margin-top: -5px;
    overflow: hidden;

    background:
        /* central warm light */
        radial-gradient(
            ellipse at 50% 5%,
            rgba(212, 175, 55, 0.18) 0%,
            rgba(212, 175, 55, 0.07) 28%,
            transparent 65%
        ),

        /* side torch glow */
        radial-gradient(
            ellipse at 4% 45%,
            rgba(190, 120, 35, 0.18),
            transparent 24%
        ),

        radial-gradient(
            ellipse at 96% 45%,
            rgba(190, 120, 35, 0.18),
            transparent 24%
        ),

        /* stone base */
        linear-gradient(
            to bottom,
            #21150f 0%,
            #17100c 55%,
            #100a07 100%
        );

    border-top: 1px solid rgba(212, 175, 55, 0.22);
}


/* -----------------------------------------
   Stone floor perspective
   ----------------------------------------- */

.hall-floor::before {
    content: "";
    position: absolute;
    inset: 0;

    background:
        /* horizontal stone cuts */
        repeating-linear-gradient(
            to bottom,
            transparent 0,
            transparent 62px,
            rgba(180, 140, 65, 0.10) 63px,
            transparent 64px
        ),

        /* perspective lines */
        linear-gradient(
            77deg,
            transparent 49.7%,
            rgba(190, 150, 70, 0.09) 50%,
            transparent 50.3%
        ),
        linear-gradient(
            103deg,
            transparent 49.7%,
            rgba(190, 150, 70, 0.09) 50%,
            transparent 50.3%
        );

    opacity: 0.8;
    pointer-events: none;
}


/* -----------------------------------------
   Large engraved Eye of Horus
   ----------------------------------------- */

.floor-center-symbol {
    position: absolute;

    left: 50%;
    top: 48%;

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

    font-size: 150px;

    color: rgba(212, 175, 55, 0.045);

    text-shadow:
        0 0 25px rgba(212, 175, 55, 0.08);

    pointer-events: none;

    animation: floorSymbolGlow 7s ease-in-out infinite;
}

@keyframes floorSymbolGlow {

    0%,
    100% {
        opacity: 0.35;
        transform: translate(-50%, -50%) scale(1);
    }

    50% {
        opacity: 0.75;
        transform: translate(-50%, -50%) scale(1.05);
    }
}


/* -----------------------------------------
   Decorative Egyptian frieze
   ----------------------------------------- */

.floor-frieze {
    position: absolute;

    left: 8%;
    right: 8%;
    top: 90px;

    height: 48px;

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

    font-family: serif;
    font-size: 25px;
    letter-spacing: 18px;

    color: rgba(212, 175, 55, 0.32);

    border-top: 1px solid rgba(212, 175, 55, 0.18);
    border-bottom: 1px solid rgba(212, 175, 55, 0.18);

    background:
        linear-gradient(
            90deg,
            transparent,
            rgba(212, 175, 55, 0.06),
            transparent
        );

    text-shadow:
        0 0 8px rgba(212, 175, 55, 0.22);
}


/* -----------------------------------------
   Four small ceremonial bases
   ----------------------------------------- */

.floor-pillars {
    position: absolute;

    left: 8%;
    right: 8%;
    bottom: 95px;

    display: grid;
    grid-template-columns: repeat(4, 1fr);

    justify-items: center;
}

.floor-pillars span {
    position: relative;

    width: 90px;
    height: 34px;

    background:
        linear-gradient(
            to bottom,
            #a57a32,
            #4b3218 45%,
            #21150d
        );

    border: 1px solid rgba(212, 175, 55, 0.5);

    box-shadow:
        0 0 18px rgba(212, 175, 55, 0.12),
        inset 0 2px 4px rgba(255, 220, 130, 0.25);

    transform: perspective(300px) rotateX(15deg);
}

.floor-pillars span::before {
    content: "";

    position: absolute;

    left: -12px;
    right: -12px;
    bottom: -8px;

    height: 9px;

    background: #2b1b10;

    border: 1px solid rgba(212, 175, 55, 0.25);
}


/* -----------------------------------------
   Small engraved glyph line
   ----------------------------------------- */

.floor-glyphs {
    position: absolute;

    left: 12%;
    right: 12%;
    bottom: 32px;

    text-align: center;

    font-family: serif;
    font-size: 22px;
    letter-spacing: 14px;

    color: rgba(212, 175, 55, 0.17);

    white-space: nowrap;

    text-shadow:
        0 1px 2px #000,
        0 0 8px rgba(212, 175, 55, 0.08);

    animation: glyphBreath 8s ease-in-out infinite;
}

@keyframes glyphBreath {

    0%,
    100% {
        opacity: 0.45;
    }

    50% {
        opacity: 0.9;
    }
}


/* -----------------------------------------
   Golden light falling from the exhibits
   ----------------------------------------- */

.hall-floor::after {
    content: "";

    position: absolute;
    inset: 0;

    background:
        radial-gradient(
            ellipse at 20% 0%,
            rgba(212, 175, 55, 0.13),
            transparent 22%
        ),

        radial-gradient(
            ellipse at 40% 0%,
            rgba(212, 175, 55, 0.10),
            transparent 22%
        ),

        radial-gradient(
            ellipse at 60% 0%,
            rgba(212, 175, 55, 0.10),
            transparent 22%
        ),

        radial-gradient(
            ellipse at 80% 0%,
            rgba(212, 175, 55, 0.13),
            transparent 22%
        );

    pointer-events: none;

    animation: exhibitLight 6s ease-in-out infinite;
}

@keyframes exhibitLight {

    0%,
    100% {
        opacity: 0.55;
    }

    50% {
        opacity: 1;
    }
}
/* ============================================================
   CEREMONIAL THRESHOLD — LIBRARY SERVICES HALL → HALL OF STORIES
   Single unified implementation. Replaces the previous
   .hall-threshold block entirely (see CLEANUP section).
============================================================ */

.hall-threshold{
  position:relative;
  z-index:6;
  width:100%;
  height:56vh;
  min-height:420px;
  margin-top:-4vh;
  overflow:hidden;
  pointer-events:none;
}

/* ---------- Ceremonial floor ---------- */
.threshold-floor{
  position:absolute;
  left:50%; bottom:0;
  transform:translateX(-50%);
  width:92%; height:78%;
  background:
    repeating-linear-gradient(to top, rgba(0,0,0,0) 0 7%, rgba(0,0,0,.2) 7% 7.6%),
    linear-gradient(to top, var(--stone-700), var(--stone-800) 65%, transparent);
  clip-path:polygon(30% 100%, 70% 100%, 56% 0%, 44% 0%);
  opacity:.92;
}

/* central gold ceremonial axis, running toward the gate */
.threshold-floor::before{
  content:"";
  position:absolute; left:50%; top:0; bottom:0;
  transform:translateX(-50%);
  width:10%;
  background:linear-gradient(to top, rgba(244,211,94,.35), rgba(244,211,94,.05) 70%, transparent);
  animation:thresholdAxisShimmer 5s ease-in-out infinite;
}
@keyframes thresholdAxisShimmer{
  0%,100%{ opacity:.5; }
  50%    { opacity:.95; }
}

/* perspective stone-cut lines across the floor */
.threshold-floor::after{
  content:"";
  position:absolute; inset:0;
  background:
    repeating-linear-gradient(to top, transparent 0 9%, rgba(212,175,55,.07) 9% 9.6%),
    linear-gradient(76deg, transparent 49.6%, rgba(212,175,55,.06) 50%, transparent 50.4%),
    linear-gradient(104deg, transparent 49.6%, rgba(212,175,55,.06) 50%, transparent 50.4%);
  opacity:.8;
  pointer-events:none;
}

/* ---------- Hieroglyphic frieze on the floor ---------- */
.threshold-frieze{
  position:absolute;
  left:50%; top:14%;
  transform:translateX(-50%);
  width:70%;
  text-align:center;
  white-space:nowrap;
  overflow:hidden;
  font-family:serif;
  font-size:clamp(.9rem,1.6vw,1.3rem);
  letter-spacing:.5em;
  color:rgba(212,175,55,.28);
  text-shadow:0 1px 2px #000, 0 0 8px rgba(212,175,55,.15);
  animation:thresholdGlyphBreath 8s ease-in-out infinite;
  z-index:1;
}
@keyframes thresholdGlyphBreath{
  0%,100%{ opacity:.5; }
  50%    { opacity:.95; }
}

/* ---------- Central carved ceremonial seal ---------- */
.threshold-seal{
  position:absolute;
  left:50%; top:42%;
  transform:translate(-50%,-50%);
  width:clamp(90px,10vw,140px);
  z-index:2;
  filter:drop-shadow(0 10px 18px rgba(0,0,0,.6)) drop-shadow(0 0 16px rgba(212,175,55,.25));
  animation:thresholdSealPulse 6s ease-in-out infinite;
}
@keyframes thresholdSealPulse{
  0%,100%{ transform:translate(-50%,-50%) scale(1); }
  50%    { transform:translate(-50%,-50%) scale(1.04); }
}
.threshold-seal-svg{ width:100%; display:block; }
.threshold-seal-svg .seal-ring-outer{
  fill:none;
  stroke:var(--gold-dim);
  stroke-width:3;
  opacity:.7;
}
.threshold-seal-svg .seal-ring-inner{
  fill:rgba(20,15,10,.6);
  stroke:var(--gold);
  stroke-width:1.5;
  stroke-dasharray:2 6;
  animation:thresholdSealRotate 24s linear infinite;
  transform-origin:60px 60px;
}
@keyframes thresholdSealRotate{ to{ transform:rotate(360deg); } }
.threshold-seal-svg .seal-eye,
.threshold-seal-svg .seal-eye-tail,
.threshold-seal-svg .seal-ankh{
  fill:none;
  stroke:var(--gold-bright);
  stroke-width:2.4;
  stroke-linecap:round;
  stroke-linejoin:round;
}
.threshold-seal-svg .seal-eye{ fill:rgba(46,139,125,.12); }
.threshold-seal-svg .seal-eye-pupil{ fill:var(--turquoise); }

/* ---------- Pillars framing the doorway ---------- */
.threshold-pillar{
  position:absolute; bottom:0;
  width:min(9vw,90px); height:72%;
  background:
    repeating-linear-gradient(to right, var(--sandstone) 0 6%, var(--stone-600) 6% 9%),
    linear-gradient(to bottom, var(--sandstone-lt), var(--sandstone) 55%, var(--stone-700) 100%);
  box-shadow:inset -8px 0 16px rgba(0,0,0,.5), inset 8px 0 12px rgba(255,220,170,.12);
}
.threshold-pillar.left{ left:18%; }
.threshold-pillar.right{ right:18%; }
.threshold-pillar::before{
  content:"";
  position:absolute; inset:6% 12%;
  background:repeating-linear-gradient(0deg, rgba(43,33,24,.4) 0 10%, transparent 10% 20%);
  opacity:.6;
}
.threshold-pillar::after{ /* capital */
  content:"";
  position:absolute; top:-3%; left:-18%;
  width:136%; height:6%;
  background:linear-gradient(to bottom, var(--gold-dim), var(--sandstone));
  box-shadow:0 4px 10px rgba(0,0,0,.4);
}

/* ---------- Lintel ---------- */
.threshold-lintel{
  position:absolute; left:50%; top:22%;
  transform:translateX(-50%);
  width:min(50vw,440px); height:5.5%;
  background:linear-gradient(to bottom, var(--sandstone-lt), var(--sandstone) 55%, var(--stone-700));
  box-shadow:0 6px 16px rgba(0,0,0,.5);
}
.threshold-lintel::before{ /* engraved Eye of Horus above the entrance */
  content:"𓂀";
  position:absolute; top:-58%; left:50%;
  transform:translateX(-50%);
  font-size:clamp(20px,2.6vw,30px);
  color:var(--gold);
  opacity:.75;
  text-shadow:0 0 14px rgba(212,175,55,.4);
  transition:text-shadow .6s var(--ease-heavy);
}
.threshold-lintel::after{ /* engraved band detail */
  content:"";
  position:absolute; inset:30% 6%;
  background:repeating-linear-gradient(90deg, rgba(43,33,24,.4) 0 3%, transparent 3% 6%);
  opacity:.7;
}

/* ---------- Doorway opening + glow ---------- */
.threshold-opening{
  position:absolute; left:50%; top:27.5%; bottom:0;
  transform:translateX(-50%);
  width:min(30vw,280px);
  background:radial-gradient(ellipse at 50% 30%, rgba(255,190,110,.28), #0a0503 70%);
  border-left:2px solid rgba(212,175,55,.4);
  border-right:2px solid rgba(212,175,55,.4);
  box-shadow:inset 0 0 60px rgba(0,0,0,.85);
  overflow:hidden;
}
.threshold-light{
  position:absolute; inset:0;
  background:radial-gradient(ellipse at 50% 20%, rgba(255,210,140,.55), transparent 65%);
  animation:thresholdBreathe 6s ease-in-out infinite;
}
@keyframes thresholdBreathe{
  0%,100%{ opacity:.55; }
  50%    { opacity:.95; }
}

/* ---------- Dust particles inside the doorway ---------- */
.threshold-dust{
  position:absolute; inset:0;
  background-image:
    radial-gradient(circle at 30% 70%, rgba(244,211,94,.8) 0 1.5px, transparent 2px),
    radial-gradient(circle at 65% 40%, rgba(244,211,94,.6) 0 1px,   transparent 2px),
    radial-gradient(circle at 50% 85%, rgba(244,211,94,.7) 0 1.5px, transparent 2px),
    radial-gradient(circle at 20% 30%, rgba(244,211,94,.5) 0 1px,   transparent 2px),
    radial-gradient(circle at 80% 60%, rgba(244,211,94,.6) 0 1.5px, transparent 2px);
  animation:thresholdDustDrift 7s linear infinite;
}
@keyframes thresholdDustDrift{
  0%  { transform:translateY(0)    scale(1);   opacity:.7; }
  50% { transform:translateY(-8%)  scale(1.03); opacity:1;  }
  100%{ transform:translateY(0)    scale(1);   opacity:.7; }
}

/* ---------- Caption ---------- */
.threshold-caption{
  position:absolute; bottom:4%; left:50%;
  transform:translateX(-50%);
  width:min(80vw,420px);
  text-align:center;
  font-style:italic;
  font-size:clamp(.95rem,1.8vw,1.15rem);
  color:var(--sandstone-lt);
  text-shadow:0 2px 10px rgba(0,0,0,.7);
  opacity:.85;
}

/* ---------- Hover interaction (activates on hover anywhere in the hall) ---------- */
.hall:hover .threshold-light{ animation-duration:3.4s; }
.hall:hover .threshold-lintel::before{ text-shadow:0 0 20px rgba(244,211,94,.7); }
.hall:hover .threshold-seal{ filter:drop-shadow(0 10px 18px rgba(0,0,0,.6)) drop-shadow(0 0 26px rgba(244,211,94,.5)); }
.hall:hover .threshold-frieze{ color:rgba(244,211,94,.5); }

/* ---------- Responsive ---------- */
@media (max-width:720px){
  .hall-threshold{ height:40vh; min-height:320px; }
  .threshold-pillar{ width:14vw; }
  .threshold-pillar.left{ left:10%; }
  .threshold-pillar.right{ right:10%; }
  .threshold-lintel{ width:70vw; }
  .threshold-opening{ width:44vw; }
  .threshold-frieze{ width:88%; letter-spacing:.3em; font-size:.75rem; }
  .threshold-seal{ width:clamp(64px,16vw,90px); top:38%; }
}

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion: reduce){
  .threshold-floor::before,
  .threshold-frieze,
  .threshold-seal,
  .threshold-seal-svg .seal-ring-inner,
  .threshold-light,
  .threshold-dust{
    animation:none !important;
  }
}
/* ============================================================
   LIBRARY SERVICES HALL
   TEMPLE ARCHITECTURAL TRANSITION
   Relics → Ceremonial Floor → Final Gateway
============================================================ */

.hall-architecture{
    position:relative;
    width:100%;
    height:clamp(360px,42vh,560px);
    margin-top:clamp(20px,4vh,50px);
    overflow:hidden;
    pointer-events:none;
    z-index:4;
}


/* ============================================================
   STONE FLOOR
============================================================ */

.arch-floor{
    position:absolute;
    left:50%;
    bottom:-5%;
    transform:translateX(-50%);

    width:86%;
    height:78%;

    background:
        repeating-linear-gradient(
            to top,
            transparent 0 8%,
            rgba(212,175,55,.07) 8% 8.7%
        ),
        linear-gradient(
            to bottom,
            transparent 0%,
            rgba(43,33,24,.25) 15%,
            rgba(43,33,24,.8) 100%
        );

    clip-path:polygon(
        27% 100%,
        73% 100%,
        57% 0%,
        43% 0%
    );

    opacity:.6;
}


/* perspective lines */

.arch-floor::before{
    content:"";
    position:absolute;
    inset:0;

    background:
        linear-gradient(
            72deg,
            transparent 49.5%,
            rgba(212,175,55,.12) 50%,
            transparent 50.5%
        ),
        linear-gradient(
            108deg,
            transparent 49.5%,
            rgba(212,175,55,.12) 50%,
            transparent 50.5%
        );

    opacity:.7;
}


/* horizontal carved floor cuts */

.arch-floor::after{
    content:"";
    position:absolute;
    inset:0;

    background:
        repeating-linear-gradient(
            to top,
            transparent 0 11%,
            rgba(0,0,0,.35) 11% 11.8%
        );

    opacity:.6;
}


/* ============================================================
   CENTRAL GOLDEN AXIS
============================================================ */

.arch-axis{
    position:absolute;
    left:50%;
    top:4%;
    bottom:5%;

    width:clamp(2px,.35vw,5px);

    transform:translateX(-50%);

    background:
        linear-gradient(
            to bottom,
            transparent,
            rgba(212,175,55,.65) 25%,
            rgba(244,211,94,.9) 50%,
            rgba(212,175,55,.4) 75%,
            transparent
        );

    box-shadow:
        0 0 12px rgba(212,175,55,.25),
        0 0 30px rgba(212,175,55,.08);

    animation:archAxisGlow 5s ease-in-out infinite;
}

@keyframes archAxisGlow{

    0%,100%{
        opacity:.45;
    }

    50%{
        opacity:1;
    }

}


/* ============================================================
   SIDE CARVED WALLS
============================================================ */

.arch-wall{
    position:absolute;
    top:5%;
    bottom:3%;

    width:clamp(55px,8vw,110px);

    display:flex;
    flex-direction:column;
    justify-content:space-evenly;
    align-items:center;

    background:
        linear-gradient(
            to bottom,
            rgba(138,109,36,.22),
            rgba(43,33,24,.45)
        );

    border-top:
        2px solid rgba(212,175,55,.22);

    border-bottom:
        2px solid rgba(212,175,55,.12);

    box-shadow:
        inset 0 0 25px rgba(0,0,0,.5);
}

.arch-wall-left{
    left:3%;
}

.arch-wall-right{
    right:3%;
}

.arch-wall span{
    font-family:serif;

    font-size:clamp(
        20px,
        3vw,
        34px
    );

    color:rgba(212,175,55,.22);

    text-shadow:
        0 2px 3px #000;

    transition:
        transform .7s ease,
        color .7s ease,
        text-shadow .7s ease;
}


/* staggered hieroglyphs */

.arch-wall-left span:nth-child(1),
.arch-wall-left span:nth-child(3){
    transform:translateX(8px);
}

.arch-wall-right span:nth-child(2),
.arch-wall-right span:nth-child(4){
    transform:translateX(-8px);
}


/* ============================================================
   CENTRAL CARVED SEAL
============================================================ */

.arch-seal{
    position:absolute;

    left:50%;
    top:46%;

    width:clamp(
        90px,
        10vw,
        135px
    );

    aspect-ratio:1;

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

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

    border-radius:50%;

    background:
        radial-gradient(
            circle,
            #392d20 0%,
            #241b13 62%,
            #120e0a 100%
        );

    border:
        2px solid rgba(212,175,55,.5);

    box-shadow:
        inset 0 0 20px rgba(0,0,0,.8),
        0 10px 25px rgba(0,0,0,.65),
        0 0 20px rgba(212,175,55,.12);

    transition:
        transform .8s cubic-bezier(.16,1,.3,1),
        box-shadow .8s ease;
}


/* outer ring */

.arch-seal-ring{
    position:absolute;
    inset:9%;

    border:
        1px dashed rgba(212,175,55,.55);

    border-radius:50%;

    animation:
        archSealRotate 25s linear infinite;
}

@keyframes archSealRotate{

    to{
        transform:rotate(360deg);
    }

}


/* Eye */

.arch-seal-eye{
    position:relative;

    font-size:clamp(
        28px,
        4vw,
        46px
    );

    color:var(--gold-bright,#f4d35e);

    text-shadow:
        0 0 10px rgba(244,211,94,.25);

    z-index:2;
}


/* tiny glyph ring */

.arch-seal-glyphs{
    position:absolute;

    bottom:11%;

    font-size:clamp(
        7px,
        1vw,
        11px
    );

    letter-spacing:.35em;

    color:rgba(212,175,55,.35);
}


/* ============================================================
   SMALL CEREMONIAL STONES
============================================================ */

.arch-stone{
    position:absolute;

    width:clamp(
        35px,
        4vw,
        65px
    );

    height:clamp(
        18px,
        2vw,
        30px
    );

    background:
        linear-gradient(
            to bottom,
            var(--sandstone-lt,#b99b68),
            var(--stone-700,#493a2b)
        );

    clip-path:
        polygon(
            8% 0,
            92% 0,
            100% 75%,
            85% 100%,
            15% 100%,
            0 75%
        );

    box-shadow:
        0 8px 12px rgba(0,0,0,.5);
}


/* positions */

.arch-stone-1{
    left:24%;
    bottom:22%;
    transform:rotate(-4deg);
}

.arch-stone-2{
    left:31%;
    bottom:13%;
    transform:rotate(5deg);
}

.arch-stone-3{
    right:24%;
    bottom:22%;
    transform:rotate(4deg);
}

.arch-stone-4{
    right:31%;
    bottom:13%;
    transform:rotate(-5deg);
}


/* ============================================================
   INTERACTION
============================================================ */

.hall-architecture:hover .arch-seal{
    transform:
        translate(-50%,-50%)
        scale(1.08)
        rotate(-1deg);

    box-shadow:
        inset 0 0 20px rgba(0,0,0,.8),
        0 12px 30px rgba(0,0,0,.7),
        0 0 35px rgba(212,175,55,.28);
}

.hall-architecture:hover .arch-wall span{
    color:rgba(244,211,94,.5);

    text-shadow:
        0 0 12px rgba(244,211,94,.25),
        0 2px 3px #000;
}

.hall-architecture:hover .arch-wall-left span:nth-child(odd){
    transform:
        translateX(12px)
        translateY(-4px);
}

.hall-architecture:hover .arch-wall-right span:nth-child(even){
    transform:
        translateX(-12px)
        translateY(-4px);
}


/* ============================================================
   MAKE THE FOUR RELICS FEEL LIKE TEMPLE EXHIBITS
   They remain the same HTML / same buttons.
============================================================ */

.relic-grid .relic-station:nth-child(1){
    transform:translateY(-12px);
}

.relic-grid .relic-station:nth-child(2){
    transform:translateY(8px);
}

.relic-grid .relic-station:nth-child(3){
    transform:translateY(-6px);
}

.relic-grid .relic-station:nth-child(4){
    transform:translateY(12px);
}


/* ============================================================
   RESPONSIVE
============================================================ */

@media (max-width:720px){

    .hall-architecture{
        height:340px;
        margin-top:15px;
    }

    .arch-wall{
        width:42px;
    }

    .arch-wall-left{
        left:1%;
    }

    .arch-wall-right{
        right:1%;
    }

    .arch-wall span{
        font-size:20px;
    }

    .arch-floor{
        width:100%;
    }

    .arch-stone-1{
        left:18%;
    }

    .arch-stone-2{
        left:25%;
    }

    .arch-stone-3{
        right:18%;
    }

    .arch-stone-4{
        right:25%;
    }

}


/* ============================================================
   REDUCED MOTION
============================================================ */

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

    .arch-axis,
    .arch-seal-ring{
        animation:none;
    }

    .arch-wall span,
    .arch-seal{
        transition:none;
    }

}
/* =========================================================
   LIVING TEMPLE ARCHITECTURE
   Uses the existing Hall Architecture elements only
   ========================================================= */

/* ---------------------------------------------------------
   1. Central Eye / Seal — slow breathing movement
   --------------------------------------------------------- */

.hall-architecture .arch-seal {
    animation:
        templeSealFloat 5s ease-in-out infinite,
        templeSealGlow 4s ease-in-out infinite;
    transform-origin: center center;
    will-change: transform, filter;
}

/* Outer ring slowly breathes */
.hall-architecture .arch-seal-ring {
    animation: templeRingPulse 3.8s ease-in-out infinite;
    transform-origin: center center;
}

/* ---------------------------------------------------------
   2. Eye of Horus — subtle blink
   --------------------------------------------------------- */

.hall-architecture .arch-seal-eye {
    display: block;
    transform-origin: center center;

    animation:
        templeEyeBlink 6s ease-in-out infinite,
        templeEyeGlow 3s ease-in-out infinite;
}

/* ---------------------------------------------------------
   3. Central light axis — moving light
   --------------------------------------------------------- */

.hall-architecture .arch-axis {
    animation:
        templeAxisPulse 4s ease-in-out infinite,
        templeAxisMove 7s ease-in-out infinite;
}

/* ---------------------------------------------------------
   4. Floor — very subtle light movement
   --------------------------------------------------------- */

.hall-architecture .arch-floor {
    animation: templeFloorBreath 6s ease-in-out infinite;
}

/* ---------------------------------------------------------
   5. Existing hieroglyphs on the side walls
   --------------------------------------------------------- */

.hall-architecture .arch-wall span {
    display: inline-block;
    animation: templeGlyphGlow 5s ease-in-out infinite;
}

/* Don't make all glyphs blink at the same time */
.hall-architecture .arch-wall span:nth-child(1) {
    animation-delay: 0s;
}

.hall-architecture .arch-wall span:nth-child(2) {
    animation-delay: 1.2s;
}

.hall-architecture .arch-wall span:nth-child(3) {
    animation-delay: 2.4s;
}

.hall-architecture .arch-wall span:nth-child(4) {
    animation-delay: 3.6s;
}


/* =========================================================
   KEYFRAMES
   ========================================================= */

/* Central seal gently floats */
@keyframes templeSealFloat {

    0%,
    100% {
        transform: translateY(0) scale(1);
    }

    50% {
        transform: translateY(-7px) scale(1.015);
    }
}


/* Central seal glow breathes */
@keyframes templeSealGlow {

    0%,
    100% {
        filter:
            drop-shadow(0 0 5px rgba(212, 175, 55, .15));
    }

    50% {
        filter:
            drop-shadow(0 0 18px rgba(212, 175, 55, .42));
    }
}


/* Ring expands very slightly */
@keyframes templeRingPulse {

    0%,
    100% {
        transform: scale(1);
        opacity: .75;
    }

    50% {
        transform: scale(1.045);
        opacity: 1;
    }
}


/* ---------------------------------------------------------
   Eye blink
   --------------------------------------------------------- */

@keyframes templeEyeBlink {

    0%,
    41%,
    46%,
    100% {
        transform: scaleY(1);
        opacity: 1;
    }

    43% {
        transform: scaleY(.12);
        opacity: .35;
    }

    45% {
        transform: scaleY(.65);
        opacity: .8;
    }
}


/* Eye glow */
@keyframes templeEyeGlow {

    0%,
    100% {
        filter:
            drop-shadow(0 0 2px rgba(244, 211, 94, .15));
    }

    50% {
        filter:
            drop-shadow(0 0 10px rgba(244, 211, 94, .65));
    }
}


/* ---------------------------------------------------------
   Central vertical light
   --------------------------------------------------------- */

@keyframes templeAxisPulse {

    0%,
    100% {
        opacity: .25;
    }

    50% {
        opacity: .75;
    }
}


@keyframes templeAxisMove {

    0%,
    100% {
        transform: translateX(-50%) scaleY(.92);
    }

    50% {
        transform: translateX(-50%) scaleY(1.08);
    }
}


/* ---------------------------------------------------------
   Floor breathing
   --------------------------------------------------------- */

@keyframes templeFloorBreath {

    0%,
    100% {
        opacity: .72;
    }

    50% {
        opacity: .92;
    }
}


/* ---------------------------------------------------------
   Side hieroglyphs
   --------------------------------------------------------- */

@keyframes templeGlyphGlow {

    0%,
    100% {
        opacity: .25;
        filter:
            drop-shadow(0 0 0 rgba(212, 175, 55, 0));
    }

    50% {
        opacity: .65;
        filter:
            drop-shadow(0 0 7px rgba(212, 175, 55, .3));
    }
}


/* =========================================================
   REDUCED MOTION
   Respect accessibility settings
   ========================================================= */

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

    .hall-architecture .arch-seal,
    .hall-architecture .arch-seal-ring,
    .hall-architecture .arch-seal-eye,
    .hall-architecture .arch-axis,
    .hall-architecture .arch-floor,
    .hall-architecture .arch-wall span {
        animation: none !important;
    }
}
/
```css
/* =========================================================
   FINAL — CONNECTED TEMPLE EYE
   ONE STRUCTURE / ONE LIGHT / ONE EYE
   ========================================================= */

/* ---------- MAIN STRUCTURE ---------- */

.temple-eye-structure {
    position: absolute;
    left: 50%;
    top: 52%;
    width: min(620px, 70vw);
    height: 420px;

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

    pointer-events: none;
    z-index: 8;

    isolation: isolate;
}


/* =========================================================
   PYRAMID BODY
   ========================================================= */

.temple-pyramid {
    position: absolute;
    inset: 0;

    width: 100%;
    height: 100%;

    clip-path: polygon(
        50% 0%,
        100% 100%,
        0% 100%
    );

    background:
        /* stone blocks */
        repeating-linear-gradient(
            to bottom,
            transparent 0,
            transparent 41px,
            rgba(212,175,55,.16) 42px,
            rgba(212,175,55,.16) 43px
        ),

        /* stone surface */
        linear-gradient(
            90deg,
            #17100a 0%,
            #382817 20%,
            #604421 50%,
            #382817 80%,
            #17100a 100%
        );

    box-shadow:
        inset 0 -40px 60px rgba(0,0,0,.65),
        inset 0 0 45px rgba(0,0,0,.5),
        0 18px 35px rgba(0,0,0,.55);

    overflow: hidden;
}


/* =========================================================
   PYRAMID STONE EDGES
   ========================================================= */

.pyramid-line {
    position: absolute;

    left: 50%;

    height: 1px;

    transform: translateX(-50%);

    background:
        linear-gradient(
            90deg,
            transparent,
            rgba(212,175,55,.45),
            rgba(244,211,94,.7),
            rgba(212,175,55,.45),
            transparent
        );

    opacity: .42;

    pointer-events: none;
}

.pyramid-line.line-1 {
    top: 31%;
    width: 34%;
}

.pyramid-line.line-2 {
    top: 48%;
    width: 53%;
}

.pyramid-line.line-3 {
    top: 66%;
    width: 72%;
}


/* =========================================================
   CENTRAL TEMPLE AXIS
   ========================================================= */

.temple-pyramid::before {
    content: "";

    position: absolute;

    left: 50%;
    top: 0;

    width: 2px;
    height: 100%;

    transform: translateX(-50%);

    background:
        linear-gradient(
            to bottom,
            rgba(244,211,94,.55),
            rgba(212,175,55,.22) 55%,
            transparent 100%
        );

    opacity: .45;

    box-shadow:
        0 0 12px rgba(212,175,55,.18);
}


/* =========================================================
   CENTRAL LIGHT
   ========================================================= */

.temple-eye-structure::before {

    content: "";

    position: absolute;

    left: 50%;
    top: 4%;

    width: 260px;
    height: 330px;

    transform: translateX(-50%);

    background:
        radial-gradient(
            ellipse at center 20%,
            rgba(255,225,150,.20),
            rgba(212,175,55,.09) 38%,
            transparent 72%
        );

    filter: blur(10px);

    opacity: .65;

    pointer-events: none;

    z-index: 3;
}


/* =========================================================
   EYE OF HORUS
   ========================================================= */

.moving-eye {

    position: absolute;

    left: 50%;
    top: 31%;

    width: 105px;
    height: 68px;

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

    z-index: 10;

    pointer-events: none;
}


/* SVG itself */

.moving-eye svg {

    display: block;

    width: 100%;
    height: 100%;

    color: #d4af37;

    filter:
        drop-shadow(0 0 4px rgba(212,175,55,.5))
        drop-shadow(0 0 12px rgba(212,175,55,.18));

    opacity: .9;
}


/* =========================================================
   EYE CONNECTION — LIGHT GOES DOWN FROM THE EYE
   ========================================================= */

.moving-eye::after {

    content: "";

    position: absolute;

    left: 50%;
    top: 72%;

    width: 2px;
    height: 170px;

    transform: translateX(-50%);

    background:
        linear-gradient(
            to bottom,
            rgba(244,211,94,.5),
            rgba(212,175,55,.16),
            transparent
        );

    box-shadow:
        0 0 10px rgba(212,175,55,.25);

    opacity: .55;
}


/* =========================================================
   VERY SUBTLE EYE MOTION
   ========================================================= */

.moving-eye svg {
    animation: templeEyeBreath 4s ease-in-out infinite;
}

@keyframes templeEyeBreath {

    0%,
    100% {
        opacity: .78;
        filter:
            drop-shadow(0 0 4px rgba(212,175,55,.4))
            drop-shadow(0 0 10px rgba(212,175,55,.12));
    }

    50% {
        opacity: 1;
        filter:
            drop-shadow(0 0 7px rgba(244,211,94,.6))
            drop-shadow(0 0 15px rgba(212,175,55,.2));
    }
}


/* =========================================================
   EYE AWAKEN — ONLY WHEN CLASS EXISTS
   ========================================================= */

.moving-eye.eye-awakening svg,
.moving-eye.eye-awaken svg {

    animation:
        templeEyeAwaken .9s ease-out;
}

@keyframes templeEyeAwaken {

    0% {
        transform: scale(.94);
        filter:
            drop-shadow(0 0 3px rgba(212,175,55,.3));
    }

    45% {
        transform: scale(1.08);
        filter:
            drop-shadow(0 0 12px rgba(244,211,94,.8))
            drop-shadow(0 0 24px rgba(212,175,55,.35));
    }

    100% {
        transform: scale(1);
    }
}


/* =========================================================
   TEMPLE AURA
   ========================================================= */

.temple-eye-structure.temple-awake::after {

    content: "";

    position: absolute;

    left: 50%;
    top: 30%;

    width: 320px;
    height: 320px;

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

    border-radius: 50%;

    background:
        radial-gradient(
            circle,
            rgba(212,175,55,.08),
            transparent 68%
        );

    opacity: .7;

    pointer-events: none;

    z-index: 2;
}


/* =========================================================
   KEEP EVERYTHING CONNECTED
   ========================================================= */

.temple-eye-structure > * {
    box-sizing: border-box;
}


/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width: 700px) {

    .temple-eye-structure {
        width: 88vw;
        height: 340px;
    }

    .moving-eye {
        width: 82px;
        height: 54px;
    }

    .temple-eye-structure::before {
        width: 200px;
        height: 270px;
    }
}
```
```css
/* =========================================================
   REDUCE EMPTY SPACE BEFORE HALL ENTRANCE
   ========================================================= */

/* نقل الخدمات لأسفل/تقريبها من المدخل */
.hall .relic-grid {
    min-height: auto !important;
    height: auto !important;

    padding-top: 0 !important;
    padding-bottom: 0 !important;

    margin-bottom: 0 !important;
}


/* إلغاء أي فراغ ناتج عن ارتفاع الـ Hall */
.hall {
    min-height: auto !important;
    height: auto !important;
}


/* تقليل المسافة قبل المدخل */
.hall-threshold {
    margin-top: 10px !important;
}


/* لو فيه مساحة ناتجة عن الـ architecture */
.hall-architecture {
    margin: 0 !important;
    padding: 0 !important;
}


/* تقليل المسافة بين آخر صف خدمات والمدخل */
.hall .relic-grid + .hall-floor,
.hall .relic-grid + .hall-threshold {
    margin-top: 0 !important;
}
```
```css
/* =========================================================
   FINAL FIX
   SERVICES → ENTRANCE
   REMOVE EMPTY SPACE + REMOVE OLD TRIANGLE
   ========================================================= */

/* 1. REMOVE THE OLD TRIANGLE / ARCHITECTURE COMPLETELY */
.hall .hall-architecture {
    display: none !important;
    height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
}


/* 2. REMOVE THE OLD FLOOR THAT WAS CREATING A HUGE GAP */
.hall > .hall-floor {
    display: none !important;
    height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
}


/* 3. REMOVE THE EMPTY SPACE UNDER THE FOUR SERVICES */
.hall .relic-grid {
    padding-top: 16vh !important;
    padding-bottom: 0 !important;
    margin-bottom: 0 !important;

    min-height: 0 !important;
    height: auto !important;
}


/* 4. BRING THE REAL TEMPLE ENTRANCE DIRECTLY AFTER THE SERVICES */
.hall .hall-threshold {
    margin-top: 0 !important;

    height: 56vh !important;
    min-height: 420px !important;
}


/* 5. MAKE THE HALL ITSELF NOT FORCE A GIANT EMPTY AREA */
.hall {
    min-height: 0 !important;
}


/* 6. DESKTOP — SMALLER GAP */
@media (min-width: 901px) {

    .hall .relic-grid {
        padding-top: 10vh !important;
        padding-bottom: 0 !important;
    }

    .hall .hall-threshold {
        margin-top: -2vh !important;
    }
}


/* 7. MOBILE */
@media (max-width: 900px) {

    .hall .relic-grid {
        padding-bottom: 0 !important;
    }

    .hall .hall-threshold {
        margin-top: 0 !important;
    }
}
```css
/* ============================================================
   GU LIBRARY — CONNECTED TEMPLE RELICS
   FINAL PATCH
   ------------------------------------------------------------
   الهدف:
   1. تقليل الفراغ الضخم
   2. إزالة إحساس الـ 4 cards المنفصلة
   3. جعل الـ relics جزءاً من أرضية المعبد
   4. جعل كل أيقونة أعلى/أسفل من التي بجانبها
   5. ربط خلفية الـ relics بمدخل المعبد
   6. بدون مثلث / بدون هرم / بدون HTML جديد
============================================================ */


/* ============================================================
   1. HALL — SHORTER, NOT EMPTY
============================================================ */

.hall {
    min-height: 112vh !important;

    background:
        radial-gradient(
            ellipse 70% 45% at 50% 8%,
            rgba(212,175,55,.10),
            transparent 62%
        ),
        linear-gradient(
            to bottom,
            #120c08 0%,
            #17100b 32%,
            #21160e 58%,
            #0c0805 100%
        ) !important;
}


/* ============================================================
   2. CONNECT THE FLOOR TO THE ENTRANCE
============================================================ */

.hall-floor-main {
    top: 27vh !important;
    bottom: 0 !important;

    width: 92% !important;

    background:
        repeating-linear-gradient(
            to bottom,
            transparent 0 68px,
            rgba(212,175,55,.045) 69px,
            transparent 71px
        ),
        linear-gradient(
            to bottom,
            #49321e 0%,
            #302016 38%,
            #18100a 72%,
            #090604 100%
        ) !important;

    clip-path:
        polygon(
            18% 0%,
            82% 0%,
            100% 100%,
            0% 100%
        ) !important;

    box-shadow:
        inset 0 30px 45px rgba(0,0,0,.4),
        inset 0 0 90px rgba(0,0,0,.72) !important;
}


/* Central path from entrance to relics */

.hall-floor-main::before {
    width: 32% !important;

    background:
        linear-gradient(
            to bottom,
            rgba(244,211,94,.14),
            rgba(212,175,55,.06) 38%,
            transparent 88%
        ) !important;

    border-left:
        1px solid rgba(244,211,94,.08);

    border-right:
        1px solid rgba(244,211,94,.08);

    box-shadow:
        0 0 45px rgba(212,175,55,.045) !important;
}


/* ============================================================
   3. RELIC GRID — BECOMES PART OF THE TEMPLE FLOOR
============================================================ */

.relic-grid {

    position: relative !important;

    z-index: 10 !important;

    width: min(1180px, 92vw) !important;

    margin:
        0 auto !important;

    padding:
        29vh 2vw 9vh !important;

    display: grid !important;

    grid-template-columns:
        repeat(4, 1fr) !important;

    gap:
        2vw !important;

    align-items:
        end !important;

    min-height:
        0 !important;

    background:
        transparent !important;
}


/* ============================================================
   4. REMOVE THE "SEPARATE CARD BACKGROUND"
============================================================ */

.relic-grid::before {

    content: "";

    position: absolute;

    left: 50%;
    bottom: -5vh;

    transform:
        translateX(-50%);

    width: 110%;
    height: 55vh;

    background:
        radial-gradient(
            ellipse 75% 45% at 50% 100%,
            rgba(255,170,90,.10),
            transparent 68%
        ),
        linear-gradient(
            to bottom,
            transparent 0%,
            rgba(38,25,15,.18) 35%,
            rgba(18,12,8,.72) 100%
        );

    clip-path:
        polygon(
            15% 0,
            85% 0,
            100% 100%,
            0 100%
        );

    z-index:
        -1;

    pointer-events:
        none;
}


/* Remove the old decorative line of hieroglyphs */

.relic-grid::after {
    display: none !important;
}


/* ============================================================
   5. RELIC STATION — NO MORE BOX
============================================================ */

.relic-station {

    position: relative !important;

    display: flex !important;

    flex-direction: column !important;

    align-items: center !important;

    justify-content: flex-end !important;

    min-height: 330px !important;

    padding:
        0 10px 12px !important;

    background:
        transparent !important;

    border:
        none !important;

    box-shadow:
        none !important;

    clip-path:
        none !important;

    transition:
        transform .45s cubic-bezier(.22,.61,.16,1) !important;
}


/* ============================================================
   6. REMOVE THE INDIVIDUAL ALCOVE
   The temple floor should be continuous.
============================================================ */

.relic-station::before {

    display:
        none !important;
}


/* Remove the hanging chain look */

.relic-station::after {

    display:
        none !important;
}


/* ============================================================
   7. EACH RELIC GETS ITS OWN HEIGHT
   This creates the "one up / one down" rhythm.
============================================================ */

.relic-station:nth-child(1) {

    transform:
        translateY(18px) !important;
}

.relic-station:nth-child(2) {

    transform:
        translateY(-18px) !important;
}

.relic-station:nth-child(3) {

    transform:
        translateY(25px) !important;
}

.relic-station:nth-child(4) {

    transform:
        translateY(-12px) !important;
}


/* Hover keeps the stagger instead of destroying it */

.relic-station:nth-child(1):hover {
    transform:
        translateY(8px) !important;
}

.relic-station:nth-child(2):hover {
    transform:
        translateY(-28px) !important;
}

.relic-station:nth-child(3):hover {
    transform:
        translateY(15px) !important;
}

.relic-station:nth-child(4):hover {
    transform:
        translateY(-22px) !important;
}


/* ============================================================
   8. REMOVE THE GIANT LIGHT AURAS
   Keep only a small contact glow.
============================================================ */

.relic-glow-ring {

    width:
        135% !important;

    padding-top:
        135% !important;

    top:
        55% !important;

    opacity:
        .12 !important;

    background:
        radial-gradient(
            circle,
            rgba(212,175,55,.20),
            transparent 68%
        ) !important;

    filter:
        blur(5px);

    animation:
        none !important;
}


/* On hover only */

.relic-btn:hover .relic-glow-ring,
.relic-btn:focus-visible .relic-glow-ring {

    opacity:
        .35 !important;

    transform:
        translate(-50%,-50%) scale(1.02) !important;
}


/* ============================================================
   9. THE RELIC ITSELF
   It should look like an ancient object standing in the hall.
============================================================ */

.relic-btn {

    position:
        relative !important;

    width:
        100% !important;

    margin:
        0 !important;

    padding:
        18px 10px 16px !important;

    background:
        linear-gradient(
            160deg,
            #8f6d42 0%,
            #654a2b 45%,
            #302016 100%
        ) !important;

    border:
        1px solid rgba(212,175,55,.30) !important;

    clip-path:
        polygon(
            8% 3%,
            92% 3%,
            100% 12%,
            97% 91%,
            88% 98%,
            12% 98%,
            3% 91%,
            0 12%
        ) !important;

    box-shadow:
        0 14px 30px rgba(0,0,0,.55),
        inset 0 0 28px rgba(0,0,0,.38),
        inset 0 1px 0 rgba(255,230,180,.12) !important;

    transition:
        transform .45s ease,
        box-shadow .45s ease !important;
}


/* No individual bright card border */

.relic-btn::before {

    inset:
        7px !important;

    border:
        1px solid rgba(212,175,55,.18) !important;

    background:
        repeating-linear-gradient(
            0deg,
            rgba(30,20,12,.15) 0 2px,
            transparent 2px 24px
        ) !important;

    opacity:
        .45 !important;
}


/* ============================================================
   10. ICON SIZE
============================================================ */

.relic-figure {

    width:
        clamp(105px, 10vw, 145px) !important;

    margin:
        0 auto !important;

    filter:
        sepia(.35)
        saturate(1.15)
        drop-shadow(0 4px 5px rgba(0,0,0,.55))
        drop-shadow(0 0 5px rgba(212,175,55,.10)) !important;

    animation:
        relicTempleFloat 6s ease-in-out infinite !important;
}


/* Different floating timing */

.relic-station:nth-child(1) .relic-figure {
    animation-delay: -.5s !important;
}

.relic-station:nth-child(2) .relic-figure {
    animation-delay: -2.2s !important;
}

.relic-station:nth-child(3) .relic-figure {
    animation-delay: -3.8s !important;
}

.relic-station:nth-child(4) .relic-figure {
    animation-delay: -1.4s !important;
}


@keyframes relicTempleFloat {

    0%,100% {
        transform:
            translateY(0);
    }

    50% {
        transform:
            translateY(-5px);
    }
}


/* ============================================================
   11. SMALL CONTACT SHADOW
   Makes the object feel physically placed on the floor.
============================================================ */

.relic-btn::after {

    content:
        "";

    position:
        absolute;

    left:
        50%;

    bottom:
        8px;

    width:
        55%;

    height:
        12px;

    transform:
        translateX(-50%);

    border-radius:
        50%;

    background:
        radial-gradient(
            ellipse,
            rgba(0,0,0,.65),
            transparent 72%
        );

    opacity:
        .75;

    pointer-events:
        none;

    z-index:
        0;
}


/* ============================================================
   12. LABEL — CARVED INTO THE TEMPLE
============================================================ */

.relic-label {

    position:
        relative;

    z-index:
        5;

    margin-top:
        5px !important;

    padding:
        .35em .9em !important;

    background:
        transparent !important;

    border:
        1px solid rgba(212,175,55,.28) !important;

    color:
        rgba(240,228,200,.82) !important;

    box-shadow:
        inset 0 0 10px rgba(0,0,0,.35);

    text-shadow:
        0 1px 4px #000;
}


/* ============================================================
   13. ONE CONTINUOUS LIGHT FROM THE ENTRANCE
============================================================ */

.hall-entry-glow {

    height:
        48vh !important;

    width:
        100% !important;

    background:
        radial-gradient(
            ellipse 42% 70% at 50% 5%,
            rgba(255,218,145,.18),
            rgba(212,175,55,.08) 38%,
            transparent 72%
        ) !important;

    opacity:
        .75 !important;

    animation:
        none !important;
}


/* ============================================================
   14. CENTRAL LIGHT — THIN AND ARCHITECTURAL
   NOT A PYRAMID.
============================================================ */

.hall-oculus {

    width:
        18vw !important;

    max-width:
        220px !important;

    height:
        43vh !important;

    top:
        5vh !important;

    opacity:
        .22 !important;

    background:
        linear-gradient(
            to bottom,
            rgba(255,235,175,.24),
            rgba(244,211,94,.08) 48%,
            transparent 100%
        ) !important;

    filter:
        blur(8px) !important;

    clip-path:
        none !important;

    animation:
        none !important;
}


/* ============================================================
   15. CONNECT SIDE LIGHTS TO SAME COLOR
============================================================ */

.hall-beam-side {

    opacity:
        .28 !important;

    filter:
        blur(10px) !important;
}


/* ============================================================
   16. REMOVE ANY OLD PYRAMID / TRIANGLE STRUCTURE
============================================================ */

.temple-eye-structure,
.temple-pyramid,
.moving-eye,
.pyramid-line,
.temple-energy-particles {

    display:
        none !important;
}


/* ============================================================
   17. MAKE THE FOUR RELICS FEEL LIKE TEMPLE PATH MARKERS
============================================================ */

.relic-station::marker {
    display:
        none;
}


/* ============================================================
   18. DESKTOP
============================================================ */

@media (min-width: 1000px) {

    .hall {
        min-height:
            112vh !important;
    }

    .relic-grid {

        padding:
            30vh 2vw 8vh !important;

        gap:
            clamp(18px, 2.5vw, 40px) !important;
    }

    .relic-station {

        min-height:
            315px !important;
    }

}


/* ============================================================
   19. TABLET
============================================================ */

@media (max-width: 980px) {

    .hall {
        min-height:
            118vh !important;
    }

    .relic-grid {

        padding:
            25vh 5vw 8vh !important;

        grid-template-columns:
            repeat(2, 1fr) !important;

        gap:
            25px !important;
    }

    .relic-station:nth-child(1) {
        transform: translateY(12px) !important;
    }

    .relic-station:nth-child(2) {
        transform: translateY(-12px) !important;
    }

    .relic-station:nth-child(3) {
        transform: translateY(-10px) !important;
    }

    .relic-station:nth-child(4) {
        transform: translateY(12px) !important;
    }

}


/* ============================================================
   20. MOBILE
============================================================ */

@media (max-width: 600px) {

    .hall {
        min-height:
            125vh !important;
    }

    .relic-grid {

        padding:
            20vh 10vw 8vh !important;

        grid-template-columns:
            1fr !important;

        gap:
            35px !important;
    }

    .relic-station:nth-child(n) {

        transform:
            translateY(0) !important;
    }

    .relic-figure {

        width:
            125px !important;
    }

}
```css
/* ============================================================
   TEMPLE HALL — COMPOSITION FIX
   الهدف:
   - الأيقونات تدخل جوه تكوين المعبد
   - تقليل الفراغ الأسود
   - تكبير المدخل بصرياً
   - ربط الأرضية بالأيقونات
   - إزالة إحساس الـ cards المعلقة
============================================================ */


/* ============================================================
   1. HALL BACKGROUND
============================================================ */

.hall {
    position: relative !important;
    min-height: 108vh !important;

    background:
        radial-gradient(
            ellipse 55% 50% at 50% 58%,
            rgba(105,72,35,.16),
            transparent 72%
        ),
        linear-gradient(
            to bottom,
            #120c07 0%,
            #1b1109 32%,
            #160d08 62%,
            #0a0604 100%
        ) !important;
}


/* ============================================================
   2. RELIC AREA
   Bring the four services into the room.
============================================================ */

.hall .relic-grid {

    position: relative !important;

    width: min(1120px, 88vw) !important;

    margin: 0 auto !important;

    padding:
        13vh 1vw 7vh !important;

    min-height: 0 !important;

    display: grid !important;

    grid-template-columns:
        repeat(4, 1fr) !important;

    column-gap:
        clamp(24px, 3vw, 55px) !important;

    align-items:
        end !important;

    background:
        transparent !important;
}


/* ============================================================
   3. STAGGER THE FOUR SERVICES
============================================================ */

.hall .relic-station:nth-child(1) {
    transform:
        translateY(24px) !important;
}

.hall .relic-station:nth-child(2) {
    transform:
        translateY(-8px) !important;
}

.hall .relic-station:nth-child(3) {
    transform:
        translateY(18px) !important;
}

.hall .relic-station:nth-child(4) {
    transform:
        translateY(-16px) !important;
}


/* Hover without destroying the stagger */

.hall .relic-station:nth-child(1):hover {
    transform:
        translateY(14px) !important;
}

.hall .relic-station:nth-child(2):hover {
    transform:
        translateY(-18px) !important;
}

.hall .relic-station:nth-child(3):hover {
    transform:
        translateY(8px) !important;
}

.hall .relic-station:nth-child(4):hover {
    transform:
        translateY(-26px) !important;
}


/* ============================================================
   4. REMOVE THE CARD-LIKE FEEL
============================================================ */

.hall .relic-station {

    min-height:
        255px !important;

    padding:
        0 8px 8px !important;

    background:
        transparent !important;

    border:
        none !important;

    box-shadow:
        none !important;
}


/* ============================================================
   5. RELIC BUTTONS — DARK STONE
============================================================ */

.hall .relic-btn {

    background:
        linear-gradient(
            145deg,
            rgba(91,66,39,.92),
            rgba(48,32,20,.96) 58%,
            rgba(25,16,10,.98)
        ) !important;

    border:
        1px solid rgba(212,175,55,.22) !important;

    box-shadow:
        0 12px 28px rgba(0,0,0,.55),
        inset 0 0 24px rgba(0,0,0,.32) !important;
}


/* ============================================================
   6. CONNECTIVE TEMPLE GLOW
   One atmosphere behind all four stations.
============================================================ */

.hall .relic-grid::before {

    content: "";

    position: absolute;

    left: 50%;
    bottom: -5vh;

    width: 125%;
    height: 45vh;

    transform:
        translateX(-50%);

    background:
        radial-gradient(
            ellipse 60% 65% at 50% 80%,
            rgba(180,130,55,.12),
            rgba(95,63,30,.07) 40%,
            transparent 72%
        );

    pointer-events:
        none;

    z-index:
        -1;
}


/* ============================================================
   7. BRING THE FLOOR UP
============================================================ */

.hall .hall-floor-main {

    top:
        24vh !important;

    height:
        70vh !important;

    background:
        linear-gradient(
            to bottom,
            rgba(70,47,28,.50),
            rgba(37,24,15,.78) 45%,
            rgba(11,7,4,.98)
        ) !important;

    box-shadow:
        inset 0 25px 40px rgba(0,0,0,.35),
        inset 0 0 80px rgba(0,0,0,.65) !important;
}


/* ============================================================
   8. TEMPLE FLOOR PATH
============================================================ */

.hall .hall-floor-main::before {

    content:
        "";

    position:
        absolute;

    left:
        50%;

    top:
        0;

    width:
        28%;

    height:
        100%;

    transform:
        translateX(-50%);

    background:
        linear-gradient(
            to bottom,
            rgba(212,175,55,.08),
            rgba(212,175,55,.025) 55%,
            transparent
        );

    border-left:
        1px solid rgba(212,175,55,.07);

    border-right:
        1px solid rgba(212,175,55,.07);
}


/* ============================================================
   9. MAKE THE ENTRANCE WIDER
============================================================ */

.hall .hall-threshold {

    width:
        min(520px, 42vw) !important;

    min-height:
        470px !important;

    margin:
        0 auto !important;

    position:
        relative !important;

    z-index:
        20 !important;
}


/* ============================================================
   10. REMOVE THE HEAVY HORIZONTAL BAR FEEL
============================================================ */

.hall .hall-threshold::before {

    opacity:
        .45 !important;

    height:
        2px !important;

    box-shadow:
        0 0 12px rgba(212,175,55,.12) !important;
}


/* ============================================================
   11. ENTRANCE LIGHT
   Softer + wider so it belongs to the room.
============================================================ */

.hall .hall-entry-glow {

    width:
        145% !important;

    height:
        58vh !important;

    background:
        radial-gradient(
            ellipse 42% 65% at 50% 8%,
            rgba(255,220,150,.20),
            rgba(212,175,55,.08) 38%,
            transparent 74%
        ) !important;

    opacity:
        .78 !important;

    animation:
        none !important;
}


/* ============================================================
   12. CENTER THE EYE BETTER
============================================================ */

.hall .arch-seal-eye,
.hall .arch-seal-ring {

    transform:
        translate(-50%, -50%) !important;
}


/* ============================================================
   13. MAKE THE SIDE WALLS SUPPORT THE CENTER
============================================================ */

.hall .hall-side-wall {

    opacity:
        .82 !important;

    background:
        linear-gradient(
            to bottom,
            rgba(65,44,27,.55),
            rgba(25,16,10,.92)
        ) !important;
}


/* ============================================================
   14. COLUMNS — LESS BRIGHT
============================================================ */

.hall .hall-column {

    opacity:
        .82 !important;

    filter:
        drop-shadow(
            0 0 10px rgba(0,0,0,.55)
        ) !important;
}


/* ============================================================
   15. RELIC ICONS
   Slightly smaller = more architectural.
============================================================ */

.hall .relic-figure {

    width:
        clamp(92px, 8vw, 125px) !important;

    filter:
        drop-shadow(
            0 4px 5px rgba(0,0,0,.65)
        )
        drop-shadow(
            0 0 5px rgba(212,175,55,.12)
        ) !important;
}


/* ============================================================
   16. LABELS
   Less "button", more engraved plaque.
============================================================ */

.hall .relic-label {

    background:
        rgba(25,16,9,.50) !important;

    border:
        1px solid rgba(212,175,55,.20) !important;

    box-shadow:
        inset 0 0 8px rgba(0,0,0,.45) !important;
}


/* ============================================================
   17. REMOVE UNNECESSARY EXTRA GLOW
============================================================ */

.hall .relic-glow-ring {

    opacity:
        .08 !important;

    filter:
        blur(7px) !important;
}


/* ============================================================
   18. DESKTOP
============================================================ */

@media (min-width: 1100px) {

    .hall .relic-grid {

        padding-top:
            10vh !important;

        padding-bottom:
            5vh !important;
    }

    .hall .hall-threshold {

        width:
            min(560px, 38vw) !important;

        min-height:
            500px !important;
    }
}


/* ============================================================
   19. TABLET
============================================================ */

@media (max-width: 900px) {

    .hall .relic-grid {

        padding:
            10vh 4vw 6vh !important;

        grid-template-columns:
            repeat(2, 1fr) !important;
    }

    .hall .hall-threshold {

        width:
            70vw !important;

        min-height:
            420px !important;
    }
}


/* ============================================================
   20. MOBILE
============================================================ */

@media (max-width: 600px) {

    .hall .relic-grid {

        grid-template-columns:
            1fr !important;

        padding:
            8vh 10vw 5vh !important;
    }

    .hall .relic-station:nth-child(n) {

        transform:
            translateY(0) !important;
    }

    .hall .hall-threshold {

        width:
            86vw !important;

        min-height:
            380px !important;
    }
}
/* =========================================================
   TEMPLE RELIC CARDS — INTERACTIVE VERSION
   ========================================================= */

/* الحاوية */
.relic-grid {
    align-items: start !important;
}

/* ---------------------------------------------------------
   CARD BASE
--------------------------------------------------------- */

.relic-grid > * {
    position: relative;
    isolation: isolate;

    transform:
        translateY(var(--card-y, 0px))
        rotate(var(--card-rotate, 0deg));

    transition:
        transform 0.45s cubic-bezier(.2,.8,.2,1),
        filter 0.45s ease,
        box-shadow 0.45s ease;

    will-change: transform;
}


/* ---------------------------------------------------------
   DIFFERENT HEIGHTS
   الكروت مش كلها على خط واحد
--------------------------------------------------------- */

.relic-grid > *:nth-child(1) {
    --card-y: 25px;
    --card-rotate: -0.7deg;
}

.relic-grid > *:nth-child(2) {
    --card-y: -18px;
    --card-rotate: 0.5deg;
}

.relic-grid > *:nth-child(3) {
    --card-y: 32px;
    --card-rotate: -0.4deg;
}

.relic-grid > *:nth-child(4) {
    --card-y: -28px;
    --card-rotate: 0.8deg;
}

.relic-grid > *:nth-child(5) {
    --card-y: 15px;
}

.relic-grid > *:nth-child(6) {
    --card-y: -22px;
}


/* ---------------------------------------------------------
   ANCIENT FLOATING MOTION
--------------------------------------------------------- */

@keyframes relicFloat1 {
    0%,100% {
        transform:
            translateY(var(--card-y))
            rotate(var(--card-rotate));
    }

    50% {
        transform:
            translateY(calc(var(--card-y) - 7px))
            rotate(calc(var(--card-rotate) + .25deg));
    }
}

@keyframes relicFloat2 {
    0%,100% {
        transform:
            translateY(var(--card-y))
            rotate(var(--card-rotate));
    }

    50% {
        transform:
            translateY(calc(var(--card-y) + 8px))
            rotate(calc(var(--card-rotate) - .25deg));
    }
}

.relic-grid > *:nth-child(odd) {
    animation:
        relicFloat1 5.5s ease-in-out infinite;
}

.relic-grid > *:nth-child(even) {
    animation:
        relicFloat2 6.5s ease-in-out infinite;
}


/* ---------------------------------------------------------
   CARD ATMOSPHERE
--------------------------------------------------------- */

.relic-grid > *::before {
    content: "";

    position: absolute;
    inset: 1px;

    pointer-events: none;

    z-index: -1;

    background:
        radial-gradient(
            ellipse at 50% 15%,
            rgba(244,211,94,.12),
            transparent 48%
        );

    opacity: .55;

    transition:
        opacity .4s ease,
        transform .5s ease;
}


/* ---------------------------------------------------------
   GOLDEN EDGE
--------------------------------------------------------- */

.relic-grid > *::after {
    content: "";

    position: absolute;

    left: 10%;
    right: 10%;
    bottom: 5px;

    height: 1px;

    pointer-events: none;

    background:
        linear-gradient(
            90deg,
            transparent,
            rgba(212,175,55,.75),
            rgba(244,211,94,.95),
            rgba(212,175,55,.75),
            transparent
        );

    opacity: .35;

    box-shadow:
        0 0 8px rgba(212,175,55,.25);

    transition:
        opacity .4s ease,
        box-shadow .4s ease;
}


/* ---------------------------------------------------------
   HOVER — CARD AWAKENS
--------------------------------------------------------- */

.relic-grid > *:hover {

    z-index: 20;

    animation-play-state: paused;

    transform:
        translateY(calc(var(--card-y) - 10px))
        rotate(0deg)
        scale(1.035);

    filter:
        drop-shadow(0 12px 18px rgba(0,0,0,.55))
        drop-shadow(0 0 18px rgba(212,175,55,.22));
}


.relic-grid > *:hover::before {
    opacity: 1;

    transform:
        scale(1.05);
}


.relic-grid > *:hover::after {

    opacity: 1;

    box-shadow:
        0 0 8px rgba(212,175,55,.45),
        0 0 20px rgba(212,175,55,.18);
}


/* ---------------------------------------------------------
   GOLDEN SHIMMER
--------------------------------------------------------- */

.relic-grid > * {
    overflow: hidden;
}

.relic-grid > * .card-shimmer {
    position: absolute;

    top: -20%;
    left: -80%;

    width: 35%;
    height: 140%;

    pointer-events: none;

    background:
        linear-gradient(
            90deg,
            transparent,
            rgba(255,225,130,.18),
            rgba(255,240,180,.38),
            transparent
        );

    transform: skewX(-18deg);

    opacity: 0;

    z-index: 30;
}


.relic-grid > *:hover .card-shimmer {
    opacity: 1;

    animation:
        relicShimmer 1.1s ease-out;
}


@keyframes relicShimmer {

    0% {
        left: -80%;
    }

    100% {
        left: 150%;
    }

}


/* ---------------------------------------------------------
   ICON / RELIC INSIDE CARD
--------------------------------------------------------- */

.relic-grid > * img,
.relic-grid > * svg {

    transition:
        transform .45s cubic-bezier(.2,.8,.2,1),
        filter .45s ease;
}


.relic-grid > *:hover img,
.relic-grid > *:hover svg {

    transform:
        translateY(-5px)
        scale(1.04);

    filter:
        drop-shadow(0 0 5px rgba(244,211,94,.55))
        drop-shadow(0 0 15px rgba(212,175,55,.3));
}


/* ---------------------------------------------------------
   EYE / GOLDEN BUTTON
--------------------------------------------------------- */

.relic-grid > * button,
.relic-grid > * .portal,
.relic-grid > * .relic-button {

    transition:
        transform .35s ease,
        box-shadow .35s ease,
        background .35s ease;
}


.relic-grid > *:hover button,
.relic-grid > *:hover .portal,
.relic-grid > *:hover .relic-button {

    transform:
        translateY(-2px);

    box-shadow:
        0 0 8px rgba(212,175,55,.28),
        inset 0 0 10px rgba(244,211,94,.08);
}


/* ---------------------------------------------------------
   ANCIENT CORNER MARKS
--------------------------------------------------------- */

.relic-grid > * {
    --corner-color: rgba(212,175,55,.42);
}


/* top left */
.relic-grid > * {
    background-clip: padding-box;
}


/* ---------------------------------------------------------
   HOVER LIGHT
--------------------------------------------------------- */

.relic-grid > * {
    --mouse-x: 50%;
    --mouse-y: 50%;
}

.relic-grid > * .card-light {

    position: absolute;

    left: var(--mouse-x);
    top: var(--mouse-y);

    width: 140px;
    height: 140px;

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

    border-radius: 50%;

    pointer-events: none;

    background:
        radial-gradient(
            circle,
            rgba(244,211,94,.12),
            transparent 70%
        );

    opacity: 0;

    transition:
        opacity .25s ease;

    z-index: 2;
}

.relic-grid > *:hover .card-light {
    opacity: 1;
}


/* ---------------------------------------------------------
   MOBILE
--------------------------------------------------------- */

@media (max-width: 900px) {

    .relic-grid > *:nth-child(n) {
        --card-y: 0px;
        --card-rotate: 0deg;
    }

    .relic-grid > *:nth-child(odd),
    .relic-grid > *:nth-child(even) {
        animation:
            relicFloat1 6s ease-in-out infinite;
    }

}


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

    .relic-grid > * {
        animation: none !important;
        transition: none !important;
    }

}
/* =========================================================
   GU LIBRARY — LIVING TEMPLE RELICS
   FINAL CARD REDESIGN
   ---------------------------------------------------------
   Same HTML
   Same SVGs
   Same links
   New visual behavior only
========================================================= */

/* ---------------------------------------------------------
   1. STATIONS — different heights / positions
--------------------------------------------------------- */

.relic-grid .relic-station {
    position: relative;
    perspective: 1200px;
    z-index: 10;
}

/* اختلاف واضح لكن هادي بين البطاقات */
.relic-grid .relic-station:nth-child(1) {
    transform: translateY(-18px);
}

.relic-grid .relic-station:nth-child(2) {
    transform: translateY(8px);
}

.relic-grid .relic-station:nth-child(3) {
    transform: translateY(-8px);
}

.relic-grid .relic-station:nth-child(4) {
    transform: translateY(18px);
}


/* ---------------------------------------------------------
   2. THE ACTUAL TEMPLE TABLET
--------------------------------------------------------- */

.relic-btn {

    position: relative !important;

    width: min(100%, 270px) !important;
    min-height: 350px !important;

    padding: 28px 18px 20px !important;

    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: flex-start !important;

    cursor: pointer;

    color: inherit;

    overflow: hidden;

    transform-style: preserve-3d;

    transform:
        perspective(1100px)
        rotateX(var(--card-rx, 0deg))
        rotateY(var(--card-ry, 0deg))
        translateY(var(--card-lift, 0px))
        scale(var(--card-scale, 1));

    transition:
        transform .18s cubic-bezier(.2,.8,.2,1),
        box-shadow .4s ease,
        border-color .4s ease;

    /*
       Ancient stone plaque
    */
    background:

        /* warm light behind artifact */
        radial-gradient(
            ellipse at 50% 28%,
            rgba(244,211,94,.22),
            transparent 48%
        ),

        /* stone vertical cuts */
        repeating-linear-gradient(
            90deg,
            rgba(255,220,150,.035) 0 2px,
            transparent 2px 15px
        ),

        /* top stone light */
        linear-gradient(
            180deg,
            rgba(255,225,165,.12),
            transparent 20%
        ),

        /* deep sandstone */
        linear-gradient(
            145deg,
            #503b27 0%,
            #3a291b 38%,
            #24170d 72%,
            #120b06 100%
        ) !important;

    /*
       Ancient carved shape
    */
    clip-path: polygon(
        4% 5%,
        10% 2%,
        24% 0%,
        76% 0%,
        90% 2%,
        96% 5%,

        100% 12%,
        98% 30%,
        100% 50%,
        98% 70%,
        100% 88%,

        96% 95%,
        90% 98%,
        76% 100%,
        24% 100%,
        10% 98%,
        4% 95%,

        0% 88%,
        2% 70%,
        0% 50%,
        2% 30%,
        0% 12%
    ) !important;

    border: none !important;

    box-shadow:

        /* outer stone shadow */
        0 24px 45px rgba(0,0,0,.75),

        /* dark outer edge */
        0 0 0 2px #110a05,

        /* gold carved border */
        0 0 0 4px rgba(184,139,48,.45),

        /* internal stone depth */
        inset 0 0 45px rgba(0,0,0,.72),

        inset 0 3px 0 rgba(255,230,170,.10),

        inset 0 -18px 25px rgba(0,0,0,.45);

    will-change: transform;
}


/* ---------------------------------------------------------
   3. INNER CARVED BORDER
--------------------------------------------------------- */

.relic-btn::before {

    content: "";

    position: absolute;

    inset: 13px;

    border: 1px solid rgba(238,201,105,.45);

    box-shadow:

        inset 0 0 0 1px rgba(0,0,0,.45),

        inset 0 0 22px rgba(0,0,0,.4),

        0 0 8px rgba(212,175,55,.08);

    opacity: .85;

    pointer-events: none;

    z-index: 1;
}


/* ---------------------------------------------------------
   4. TOP PHARAONIC FRIEZE
--------------------------------------------------------- */

.relic-btn::after {

    content: "𓂀 𓋹 𓏏 𓆣 𓅓 𓂀";

    position: absolute;

    top: 13px;

    left: 18px;
    right: 18px;

    padding-bottom: 9px;

    text-align: center;

    font-family: serif;

    font-size: 10px;

    letter-spacing: .32em;

    color: rgba(244,211,94,.58);

    border-bottom:
        1px solid rgba(212,175,55,.25);

    text-shadow:
        0 0 6px rgba(244,211,94,.15);

    pointer-events: none;

    z-index: 5;

    transition:
        color .4s ease,
        text-shadow .4s ease,
        letter-spacing .5s ease;
}


/* ---------------------------------------------------------
   5. ICON AREA
--------------------------------------------------------- */

.relic-figure {

    position: relative;

    width: clamp(125px, 12vw, 155px) !important;

    height: auto;

    margin-top: 26px;

    z-index: 4;

    transform:
        translateZ(35px)
        translateY(0);

    transform-origin: center center;

    transition:
        transform .55s cubic-bezier(.16,1,.3,1),
        filter .45s ease;

    filter:
        drop-shadow(0 12px 12px rgba(0,0,0,.75))
        drop-shadow(0 0 10px rgba(212,175,55,.18));
}


/* ---------------------------------------------------------
   6. GOLDEN LIGHT BEHIND ICON
--------------------------------------------------------- */

.relic-glow-ring {

    position: absolute !important;

    top: 31% !important;

    left: 50% !important;

    width: 190% !important;
    height: 190% !important;

    padding: 0 !important;

    transform:
        translate(-50%,-50%)
        scale(.65) !important;

    border-radius: 50%;

    background:

        radial-gradient(
            circle,
            rgba(244,211,94,.26) 0%,
            rgba(212,175,55,.12) 28%,
            rgba(212,175,55,.035) 48%,
            transparent 70%
        ) !important;

    opacity: .5 !important;

    animation:
        relicAura 5s ease-in-out infinite;

    z-index: 2 !important;

    pointer-events: none;
}

@keyframes relicAura {

    0%,100% {
        opacity: .32;
        transform:
            translate(-50%,-50%)
            scale(.62);
    }

    50% {
        opacity: .62;
        transform:
            translate(-50%,-50%)
            scale(.76);
    }
}


/* ---------------------------------------------------------
   7. ARTIFACT FLOAT — ICON ONLY
--------------------------------------------------------- */

.relic-figure {
    animation:
        artifactBreathing 4.8s ease-in-out infinite;
}

@keyframes artifactBreathing {

    0%,100% {
        transform:
            translateZ(35px)
            translateY(0);
    }

    50% {
        transform:
            translateZ(35px)
            translateY(-7px);
    }
}


/* Different rhythm for each artifact */

.relic-station:nth-child(1) .relic-figure {
    animation-delay: -.8s;
}

.relic-station:nth-child(2) .relic-figure {
    animation-delay: -2.1s;
}

.relic-station:nth-child(3) .relic-figure {
    animation-delay: -3.4s;
}

.relic-station:nth-child(4) .relic-figure {
    animation-delay: -1.5s;
}


/* ---------------------------------------------------------
   8. HOVER — CARD COMES ALIVE
--------------------------------------------------------- */

.relic-btn:hover,
.relic-btn:focus-visible {

    --card-lift: -12px;
    --card-scale: 1.025;

    box-shadow:

        0 35px 55px rgba(0,0,0,.8),

        0 0 0 2px #120b06,

        0 0 0 4px rgba(244,211,94,.85),

        inset 0 0 40px rgba(0,0,0,.55),

        inset 0 3px 0 rgba(255,240,190,.15),

        0 0 45px rgba(244,211,94,.20);
}


/* Icon rises */

.relic-btn:hover .relic-figure,
.relic-btn:focus-visible .relic-figure {

    transform:
        translateZ(70px)
        translateY(-15px)
        scale(1.08);

    filter:

        drop-shadow(0 18px 15px rgba(0,0,0,.8))

        drop-shadow(
            0 0 18px
            rgba(244,211,94,.55)
        );
}


/* Frieze wakes up */

.relic-btn:hover::after,
.relic-btn:focus-visible::after {

    color: #f4d35e;

    letter-spacing: .42em;

    text-shadow:
        0 0 8px rgba(244,211,94,.55),
        0 0 20px rgba(212,175,55,.25);
}


/* ---------------------------------------------------------
   9. MOVING LIGHT ACROSS THE STONE
--------------------------------------------------------- */

.relic-btn {

    background-size:
        100% 100%,
        100% 100%,
        100% 100%,
        100% 100%,
        100% 100%,
        100% 100%,
        100% 100%,
        100% 100%;
}


/* separate light sweep using the existing inner layer */

.relic-btn .relic-glow-ring::after {

    content: "";

    position: absolute;

    top: -20%;
    bottom: -20%;

    left: -80%;

    width: 35%;

    background:
        linear-gradient(
            90deg,
            transparent,
            rgba(255,235,175,.28),
            transparent
        );

    transform: skewX(-18deg);

    opacity: 0;

    pointer-events: none;
}

.relic-btn:hover .relic-glow-ring::after {

    opacity: 1;

    animation:
        stoneLightSweep 1.5s ease-out forwards;
}

@keyframes stoneLightSweep {

    from {
        left: -70%;
    }

    to {
        left: 140%;
    }
}


/* ---------------------------------------------------------
   10. PEDESTAL
--------------------------------------------------------- */

.relic-pedestal {

    width: 68% !important;

    height: 17px !important;

    margin-top: 4px !important;

    position: relative;

    z-index: 6;

    background:

        linear-gradient(
            90deg,
            #2a1a0c,
            #d1a955 20%,
            #f0cd78 50%,
            #d1a955 80%,
            #2a1a0c
        ) !important;

    border-radius: 3px;

    box-shadow:

        0 9px 18px rgba(0,0,0,.75),

        inset 0 2px 3px rgba(255,240,180,.45),

        0 0 10px rgba(212,175,55,.15);

    transition:
        transform .45s ease,
        box-shadow .45s ease;
}

.relic-btn:hover .relic-pedestal {

    transform:
        translateZ(50px)
        scaleX(1.08);

    box-shadow:

        0 12px 22px rgba(0,0,0,.8),

        0 0 18px rgba(244,211,94,.4),

        inset 0 2px 3px rgba(255,240,180,.6);
}


/* ---------------------------------------------------------
   11. LABEL — CARVED BRASS PLAQUE
--------------------------------------------------------- */

.relic-label {

    position: relative;

    z-index: 8;

    margin-top: 13px !important;

    min-width: 125px;

    padding: 8px 16px !important;

    font-family: 'Cinzel', serif;

    font-size: .72rem !important;

    font-weight: 700;

    letter-spacing: .15em;

    text-transform: uppercase;

    color: #d8b86a !important;

    background:

        linear-gradient(
            180deg,
            rgba(75,53,30,.95),
            rgba(25,16,9,.98)
        ) !important;

    border:
        1px solid rgba(212,175,55,.55) !important;

    border-radius: 4px !important;

    box-shadow:

        inset 0 0 10px rgba(0,0,0,.7),

        0 5px 12px rgba(0,0,0,.6);

    transition:
        color .35s ease,
        background .35s ease,
        box-shadow .35s ease,
        transform .35s ease;
}

.relic-btn:hover .relic-label,
.relic-btn:focus-visible .relic-label {

    color: #201408 !important;

    background:
        linear-gradient(
            180deg,
            #f5d979,
            #b88624
        ) !important;

    box-shadow:

        0 0 15px rgba(244,211,94,.45),

        inset 0 1px 2px rgba(255,250,210,.65);

    transform:
        translateZ(60px)
        translateY(-3px);
}


/* ---------------------------------------------------------
   12. SERVICE-SPECIFIC IDENTITY
--------------------------------------------------------- */

/* PROFILE */

.relic-btn[data-relic="profile"] {

    --service-glow: rgba(244,211,94,.55);
}


/* VIRTUAL TOUR */

.relic-btn[data-relic="tour"] {

    --service-glow: rgba(46,139,125,.55);
}

.relic-btn[data-relic="tour"]:hover {

    box-shadow:
        0 35px 55px rgba(0,0,0,.8),
        0 0 0 4px rgba(46,139,125,.75),
        0 0 45px rgba(46,139,125,.25);
}


/* BORROW */

.relic-btn[data-relic="borrow"] {

    --service-glow: rgba(255,145,65,.55);
}

.relic-btn[data-relic="borrow"]:hover {

    box-shadow:
        0 35px 55px rgba(0,0,0,.8),
        0 0 0 4px rgba(255,145,65,.75),
        0 0 45px rgba(255,145,65,.22);
}


/* MAP */

.relic-btn[data-relic="map"] {

    --service-glow: rgba(90,140,200,.55);
}

.relic-btn[data-relic="map"]:hover {

    box-shadow:
        0 35px 55px rgba(0,0,0,.8),
        0 0 0 4px rgba(90,140,200,.75),
        0 0 45px rgba(90,140,200,.22);
}


/* ---------------------------------------------------------
   13. MOUSE ACTIVE STATE
--------------------------------------------------------- */

.relic-btn.is-mouse-active {

    --card-scale: 1.025;
}


/* ---------------------------------------------------------
   14. CLICK — ACTIVATION
--------------------------------------------------------- */

.relic-btn.is-activated {

    animation:
        relicActivation .65s cubic-bezier(.2,.8,.2,1) !important;
}

@keyframes relicActivation {

    0% {
        transform:
            perspective(1100px)
            scale(1);
    }

    35% {
        transform:
            perspective(1100px)
            scale(1.06);
    }

    70% {
        transform:
            perspective(1100px)
            scale(.985);
    }

    100% {
        transform:
            perspective(1100px)
            scale(1);
    }
}


/* ---------------------------------------------------------
   15. REMOVE OLD DEAD FLOAT
--------------------------------------------------------- */

.relic-station .relic-btn {

    animation: none !important;
}


/* ---------------------------------------------------------
   16. MOBILE
--------------------------------------------------------- */

@media (max-width: 720px) {

    .relic-grid .relic-station:nth-child(1),
    .relic-grid .relic-station:nth-child(2),
    .relic-grid .relic-station:nth-child(3),
    .relic-grid .relic-station:nth-child(4) {

        transform: none;
    }

    .relic-btn {

        width: min(100%, 310px) !important;

        min-height: 330px !important;
    }

    .relic-figure {

        width: 135px !important;
    }

}


/* ---------------------------------------------------------
   17. ACCESSIBILITY
--------------------------------------------------------- */

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

    .relic-btn,
    .relic-figure,
    .relic-glow-ring,
    .relic-label {

        animation: none !important;

        transition: none !important;
    }
}
/* أضف هذا قبل كل العناصر الخلفية */
.hall-architecture::before {
    content: "";
    position: absolute;
    inset: 0;
    background: 
        radial-gradient(
            ellipse at 50% 40%,
            rgba(43, 33, 24, 0.4) 0%,
            rgba(18, 13, 9, 0.7) 60%,
            rgba(18, 13, 9, 0.9) 100%
        );
    z-index: 1;
    pointer-events: none;
}

/* عدل الـ arch-floor ليكون أكثر اندماجاً */
.arch-floor {
    background:
        repeating-linear-gradient(
            to top,
            transparent 0 8%,
            rgba(212, 175, 55, 0.04) 8% 8.7%
        ),
        linear-gradient(
            to bottom,
            rgba(43, 33, 24, 0.3) 0%,
            rgba(18, 13, 9, 0.6) 50%,
            rgba(18, 13, 9, 0.9) 100%
        );
    opacity: 0.7; /* قلل الشفافية */
}
.arch-wall {
    background:
        linear-gradient(
            to bottom,
            rgba(138, 109, 36,.12),  /* قلل الكثافة */
            rgba(43, 33, 24, 3)
        );
    box-shadow:
        inset 0 0 25px rgba(0,0,0,0.5),
        inset 0 0 60px rgba(18,13,9,0.4); /* أضف ظل داخلي للدمج */
}
/* أضف هذا للـ hall نفسه */
.hall {
    position: relative;
    background:
        radial-gradient(
            ellipse at 50% 30%,
            rgba(61, 47, 34, 0.3) 0%,
            rgba(26, 20, 16, 0.5) 40%,
            var(--stone-900) 100%
        );
}
.arch-axis {
    background:
        linear-gradient(
            to bottom,
            transparent,
            rgba(212, 175, 55, 0.35) 25%,  /* قلل الكثافة */
            rgba(244, 211, 94, 0.5) 50%,   /* قلل الكثافة */
            rgba(212, 175, 55, 0.25) 75%,  /* قلل الكثافة */
            transparent
        );
    box-shadow:
        0 0 8px rgba(212, 175, 55, 0.15),  /* قلل الـ glow */
        0 0 20px rgba(212, 175, 55, 0.05);
}
.hall-architecture::after {
    content: "";
    position: absolute;
    inset: 0;
    background:
        linear-gradient(
            to bottom,
            transparent 0%,
            rgba(18, 13, 9, 0.2) 40%,
            rgba(18, 13, 9, 0.5) 100%
        );
    z-index: 2;
    pointer-events: none;
}
.arch-stone {
    background:
        linear-gradient(
            to bottom,
            rgba(201, 168, 118, 0.4),  /* أقل سطوعاً */
            rgba(43, 33, 24, 0.6)
        );
    box-shadow:
        0 8px 12px rgba(0,0,0,0.4),
        inset 0 0 10px rgba(18,13,9,0.5); /* للدمج */
}
/* =========================================================
   دمج بصري آمن جداً لقسم الخدمات (بدون تخريب الصفحة)
   ========================================================= */

/* 1. إضافة طبقة ظل ناعمة (Vignette) فوق القسم لربط الأطراف بالمركز */
.hall {
    position: relative;
}
.hall::before {
    content: "";
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    background: radial-gradient(circle at 50% 50%, transparent 40%, rgba(18, 13, 9, 0.6) 100%);
    pointer-events: none; /* يضمن عدم منع النقر على الأزرار */
    z-index: 0;
}

/* 2. جعل البطاقات تبدو "محفورة" في الحجر بدلاً من أن تكون ملصقة فوقه */
.relic-station {
    position: relative;
    z-index: 1; /* لضمان ظهورها فوق الطبقة السابقة */
    background-color: rgba(26, 20, 16, 0.5) !important; /* لون داكن شفاف يدمجها مع الخلفية */
    border: 1px solid rgba(212, 175, 55, 0.15) !important; /* حدود ذهبية خافتة جداً */
    box-shadow: inset 0 0 40px rgba(0, 0, 0, 0.6) !important; /* ظل داخلي يعطي إحساس العمق */
}

/* 3. تنعيم أي حواف حادة في الأرضية أو الجدران الجانبية */
.hall-floor, .hall-seam-fade {
    opacity: 0.7 !important;
}
/* =========================================================
   ENHANCED EGYPTIAN DECORATIONS & CARD STYLING
   ========================================================= */

/* 1. إضافة رموز هيروغليفية حول البطاقات */
.relic-grid {
    position: relative;
    padding: 40px 20px;
}

/* رموز على الجوانب */
.relic-grid::before {
    content: "𓂀  𓏏 𓆣 𓅓 𓂀  𓏏  𓅓";
    position: absolute;
    top: 15px;
    left: 50%;
    transform: translateX(-50%);
    font-size: 1.2rem;
    color: rgba(212, 175, 55, 0.4);
    letter-spacing: 8px;
    text-align: center;
    width: 90%;
    animation: hieroglyphGlow 4s ease-in-out infinite;
}

.relic-grid::after {
    content: "𓆓 𓏏 𓇋 𓂀 𓋹  𓆣 𓅓 𓂀 𓋹";
    position: absolute;
    bottom: 15px;
    left: 50%;
    transform: translateX(-50%);
    font-size: 1.2rem;
    color: rgba(212, 175, 55, 0.4);
    letter-spacing: 8px;
    text-align: center;
    width: 90%;
    animation: hieroglyphGlow 4s ease-in-out infinite reverse;
}

/* رموز على الجوانب الرأسية */
.hall-side-wall.left::before {
    content: "𓋹𓏏𓅓𓂀𓋹𓏏";
    position: absolute;
    top: 20%;
    left: 10px;
    writing-mode: vertical-rl;
    font-size: 1.5rem;
    color: rgba(212, 175, 55, 0.3);
    letter-spacing: 12px;
    animation: hieroglyphGlow 5s ease-in-out infinite;
}

.hall-side-wall.right::before {
    content: "𓆣𓏏𓋹𓅓𓆣𓋹";
    position: absolute;
    top: 20%;
    right: 10px;
    writing-mode: vertical-rl;
    font-size: 1.5rem;
    color: rgba(212, 175, 55, 0.3);
    letter-spacing: 12px;
    animation: hieroglyphGlow 5s ease-in-out infinite reverse;
}

@keyframes hieroglyphGlow {
    0%, 100% { opacity: 0.3; text-shadow: 0 0 5px rgba(212, 175, 55, 0.2); }
    50% { opacity: 0.6; text-shadow: 0 0 15px rgba(244, 211, 94, 0.5); }
}

/* 2. تحسين شكل البطاقات - تصميم أسطوري */
.relic-station {
    position: relative;
    transform: translateY(0);
    transition: all 0.5s cubic-bezier(0.22, 0.61, 0.16, 1);
}

/* تأثير عند الـ hover */
.relic-station:hover {
    transform: translateY(-12px) scale(1.02);
}

.relic-station:hover .relic-btn {
    box-shadow: 
        0 0 40px rgba(244, 211, 94, 0.4),
        0 0 80px rgba(212, 175, 55, 0.2),
        inset 0 0 60px rgba(244, 211, 94, 0.1);
    border-color: rgba(244, 211, 94, 0.6);
}

/* 3. إضافة إطار ذهبي متوهج حول كل بطاقة */
.relic-station::before {
    content: "";
    position: absolute;
    inset: -3px;
    border-radius: 20px;
    background: linear-gradient(135deg, 
        rgba(244, 211, 94, 0.6) 0%, 
        rgba(212, 175, 55, 0.3) 50%, 
        rgba(138, 109, 36, 0.6) 100%);
    z-index: -1;
    opacity: 0;
    transition: opacity 0.5s ease;
    filter: blur(8px);
}

.relic-station:hover::before {
    opacity: 1;
    animation: goldenPulse 2s ease-in-out infinite;
}

@keyframes goldenPulse {
    0%, 100% { 
        filter: blur(8px) brightness(1);
        transform: scale(1);
    }
    50% { 
        filter: blur(12px) brightness(1.3);
        transform: scale(1.02);
    }
}

/* 4. زوايا فرعونية مزخرفة */
.relic-station::after {
    content: "𓋹";
    position: absolute;
    top: 10px;
    right: 10px;
    font-size: 1.2rem;
    color: rgba(212, 175, 55, 0.5);
    opacity: 0;
    transition: opacity 0.3s ease;
}

.relic-station:hover::after {
    opacity: 1;
    animation: symbolRotate 3s linear infinite;
}

@keyframes symbolRotate {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

/* 5. تحسين الأيقونات داخل البطاقات */
.relic-figure {
    filter: drop-shadow(0 0 10px rgba(212, 175, 55, 0.3));
    transition: filter 0.5s ease;
}

.relic-station:hover .relic-figure {
    filter: drop-shadow(0 0 25px rgba(244, 211, 94, 0.6));
    animation: iconFloat 3s ease-in-out infinite;
}

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

/* 6. إضافة رموز إضافية حول كل أيقونة */
.relic-guardian::before {
    content: "";
    position: absolute;
    top: -10px;
    left: -10px;
    font-size: 1.5rem;
    color: rgba(212, 175, 55, 0.4);
    opacity: 0;
    transition: all 0.3s ease;
}

.relic-mirror::before {
    content: "";
    position: absolute;
    top: -10px;
    right: -10px;
    font-size: 1.5rem;
    color: rgba(212, 175, 55, 0.4);
    opacity: 0;
    transition: all 0.3s ease;
}

.relic-scroll::after {
    content: "";
    position: absolute;
    bottom: -10px;
    left: -10px;
    font-size: 1.5rem;
    color: rgba(212, 175, 55, 0.4);
    opacity: 0;
    transition: all 0.3s ease;
}

.relic-tablet::after {
    content: "";
    position: absolute;
    bottom: -10px;
    right: -10px;
    font-size: 1.5rem;
    color: rgba(212, 175, 55, 0.4);
    opacity: 0;
    transition: all 0.3s ease;
}

.relic-station:hover .relic-guardian::before,
.relic-station:hover .relic-mirror::before,
.relic-station:hover .relic-scroll::after,
.relic-station:hover .relic-tablet::after {
    opacity: 1;
    animation: symbolPulse 2s ease-in-out infinite;
}

@keyframes symbolPulse {
    0%, 100% { transform: scale(1); opacity: 0.4; }
    50% { transform: scale(1.3); opacity: 0.8; }
}

/* 7. تحسين الـ pedestal (القاعدة) */
.relic-pedestal {
    background: linear-gradient(180deg, 
        rgba(212, 175, 55, 0.2) 0%, 
        rgba(138, 109, 36, 0.4) 100%);
    border-top: 1px solid rgba(244, 211, 94, 0.3);
}

/* 8. إضافة خطوط زخرفية فوق وتحت البطاقات */
.relic-grid {
    border-top: 2px solid rgba(212, 175, 55, 0.2);
    border-bottom: 2px solid rgba(212, 175, 55, 0.2);
}

.relic-grid::before,
.relic-grid::after {
    background: linear-gradient(90deg, 
        transparent 0%, 
        rgba(212, 175, 55, 0.4) 20%, 
        rgba(244, 211, 94, 0.6) 50%, 
        rgba(212, 175, 55, 0.4) 80%, 
        transparent 100%);
}

/* 9. تأثير ضوئي عند الـ hover على النص */
.relic-label {
    position: relative;
    overflow: hidden;
}

.relic-label::before {
    content: "";
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, 
        transparent, 
        rgba(244, 211, 94, 0.4), 
        transparent);
    transition: left 0.5s ease;
}

.relic-station:hover .relic-label::before {
    left: 100%;
}

/* 10. إضافة عين حورس في الخلفية */
.hall {
    background-image: 
        radial-gradient(ellipse at 50% 30%, #2b2118 0%, #1a1410 60%, #120d09 100%),
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Ctext y='50' font-size='40' opacity='0.03'%3E𓁹%3C/text%3E%3C/svg%3E");
    background-blend-mode: overlay, overlay;
    background-size: cover, 200px 200px;
}

/* =========================================================
   Responsive - للموبايل
   ========================================================= */
@media (max-width: 900px) {
    .relic-grid::before,
    .relic-grid::after {
        font-size: 0.9rem;
        letter-spacing: 4px;
    }
    
    .hall-side-wall.left::before,
    .hall-side-wall.right::before {
        display: none;
    }
}
/* =========================================================
   ENHANCED EGYPTIAN DECORATIONS & CARD STYLING
   ========================================================= */

/* 1. إضافة رموز هيروغليفية حول البطاقات */
.relic-grid {
    position: relative;
    padding: 40px 20px;
}

/* رموز على الجوانب */
.relic-grid::before {
    content: "𓂀  𓏏 𓆣  𓂀    𓅓";
    position: absolute;
    top: 15px;
    left: 50%;
    transform: translateX(-50%);
    font-size: 1.2rem;
    color: rgba(212, 175, 55, 0.4);
    letter-spacing: 8px;
    text-align: center;
    width: 90%;
    animation: hieroglyphGlow 4s ease-in-out infinite;
}

.relic-grid::after {
    content: "𓆓 𓏏 𓇋 𓂀   𓆣  𓂀 𓋹";
    position: absolute;
    bottom: 15px;
    left: 50%;
    transform: translateX(-50%);
    font-size: 1.2rem;
    color: rgba(212, 175, 55, 0.4);
    letter-spacing: 8px;
    text-align: center;
    width: 90%;
    animation: hieroglyphGlow 4s ease-in-out infinite reverse;
}

/* رموز على الجوانب الرأسية */
.hall-side-wall.left::before {
    content: "𓋹𓏏𓅓𓋹𓏏";
    position: absolute;
    top: 20%;
    left: 10px;
    writing-mode: vertical-rl;
    font-size: 1.5rem;
    color: rgba(212, 175, 55, 0.3);
    letter-spacing: 12px;
    animation: hieroglyphGlow 5s ease-in-out infinite;
}

.hall-side-wall.right::before {
    content: "𓆣𓏏𓅓𓆣";
    position: absolute;
    top: 20%;
    right: 10px;
    writing-mode: vertical-rl;
    font-size: 1.5rem;
    color: rgba(212, 175, 55, 0.3);
    letter-spacing: 12px;
    animation: hieroglyphGlow 5s ease-in-out infinite reverse;
}

@keyframes hieroglyphGlow {
    0%, 100% { opacity: 0.3; text-shadow: 0 0 5px rgba(212, 175, 55, 0.2); }
    50% { opacity: 0.6; text-shadow: 0 0 15px rgba(244, 211, 94, 0.5); }
}

/* 2. تحسين شكل البطاقات - تصميم أسطوري */
.relic-station {
    position: relative;
    transform: translateY(0);
    transition: all 0.5s cubic-bezier(0.22, 0.61, 0.16, 1);
}

/* تأثير عند الـ hover */
.relic-station:hover {
    transform: translateY(-12px) scale(1.02);
}

.relic-station:hover .relic-btn {
    box-shadow: 
        0 0 40px rgba(244, 211, 94, 0.4),
        0 0 80px rgba(212, 175, 55, 0.2),
        inset 0 0 60px rgba(244, 211, 94, 0.1);
    border-color: rgba(244, 211, 94, 0.6);
}

/* 3. إضافة إطار ذهبي متوهج حول كل بطاقة */
.relic-station::before {
    content: "";
    position: absolute;
    inset: -3px;
    border-radius: 20px;
    background: linear-gradient(135deg, 
        rgba(244, 211, 94, 0.6) 0%, 
        rgba(212, 175, 55, 0.3) 50%, 
        rgba(138, 109, 36, 0.6) 100%);
    z-index: -1;
    opacity: 0;
    transition: opacity 0.5s ease;
    filter: blur(8px);
}

.relic-station:hover::before {
    opacity: 1;
    animation: goldenPulse 2s ease-in-out infinite;
}

@keyframes goldenPulse {
    0%, 100% { 
        filter: blur(8px) brightness(1);
        transform: scale(1);
    }
    50% { 
        filter: blur(12px) brightness(1.3);
        transform: scale(1.02);
    }
}

/* 4. زوايا فرعونية مزخرفة */
.relic-station::after {
    content: "𓋹";
    position: absolute;
    top: 10px;
    right: 10px;
    font-size: 1.2rem;
    color: rgba(212, 175, 55, 0.5);
    opacity: 0;
    transition: opacity 0.3s ease;
}

.relic-station:hover::after {
    opacity: 1;
    animation: symbolRotate 3s linear infinite;
}

@keyframes symbolRotate {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

/* 5. تحسين الأيقونات داخل البطاقات */
.relic-figure {
    filter: drop-shadow(0 0 10px rgba(212, 175, 55, 0.3));
    transition: filter 0.5s ease;
}

.relic-station:hover .relic-figure {
    filter: drop-shadow(0 0 25px rgba(244, 211, 94, 0.6));
    animation: iconFloat 3s ease-in-out infinite;
}

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

/* 6. إضافة رموز إضافية حول كل أيقونة */
.relic-guardian::before {
    content: "";
    position: absolute;
    top: -10px;
    left: -10px;
    font-size: 1.5rem;
    color: rgba(212, 175, 55, 0.4);
    opacity: 0;
    transition: all 0.3s ease;
}

.relic-mirror::before {
    content: "";
    position: absolute;
    top: -10px;
    right: -10px;
    font-size: 1.5rem;
    color: rgba(212, 175, 55, 0.4);
    opacity: 0;
    transition: all 0.3s ease;
}

.relic-scroll::after {
    content: "";
    position: absolute;
    bottom: -10px;
    left: -10px;
    font-size: 1.5rem;
    color: rgba(212, 175, 55, 0.4);
    opacity: 0;
    transition: all 0.3s ease;
}

.relic-tablet::after {
    content: "";
    position: absolute;
    bottom: -10px;
    right: -10px;
    font-size: 1.5rem;
    color: rgba(212, 175, 55, 0.4);
    opacity: 0;
    transition: all 0.3s ease;
}

.relic-station:hover .relic-guardian::before,
.relic-station:hover .relic-mirror::before,
.relic-station:hover .relic-scroll::after,
.relic-station:hover .relic-tablet::after {
    opacity: 1;
    animation: symbolPulse 2s ease-in-out infinite;
}

@keyframes symbolPulse {
    0%, 100% { transform: scale(1); opacity: 0.4; }
    50% { transform: scale(1.3); opacity: 0.8; }
}

/* 7. تحسين الـ pedestal (القاعدة) */
.relic-pedestal {
    background: linear-gradient(180deg, 
        rgba(212, 175, 55, 0.2) 0%, 
        rgba(138, 109, 36, 0.4) 100%);
    border-top: 1px solid rgba(244, 211, 94, 0.3);
}

/* 8. إضافة خطوط زخرفية فوق وتحت البطاقات */
.relic-grid {
    border-top: 2px solid rgba(212, 175, 55, 0.2);
    border-bottom: 2px solid rgba(212, 175, 55, 0.2);
}

.relic-grid::before,
.relic-grid::after {
    background: linear-gradient(90deg, 
        transparent 0%, 
        rgba(212, 175, 55, 0.4) 20%, 
        rgba(244, 211, 94, 0.6) 50%, 
        rgba(212, 175, 55, 0.4) 80%, 
        transparent 100%);
}

/* 9. تأثير ضوئي عند الـ hover على النص */
.relic-label {
    position: relative;
    overflow: hidden;
}

.relic-label::before {
    content: "";
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, 
        transparent, 
        rgba(244, 211, 94, 0.4), 
        transparent);
    transition: left 0.5s ease;
}

.relic-station:hover .relic-label::before {
    left: 100%;
}

/* 10. إضافة عين حورس في الخلفية */
.hall {
    background-image: 
        radial-gradient(ellipse at 50% 30%, #2b2118 0%, #1a1410 60%, #120d09 100%),
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Ctext y='50' font-size='40' opacity='0.03'%3E%3C/text%3E%3C/svg%3E");
    background-blend-mode: overlay, overlay;
    background-size: cover, 200px 200px;
}

/* =========================================================
   Responsive - للموبايل
   ========================================================= */
@media (max-width: 900px) {
    .relic-grid::before,
    .relic-grid::after {
        font-size: 0.9rem;
        letter-spacing: 4px;
    }
    
    .hall-side-wall.left::before,
    .hall-side-wall.right::before {
        display: none;
    }
}
/* =========================================================
إضافة رموز فرعونية على العمدان الموجودة - آمن 100%
========================================================= */

/* رموز على كل عمود - من غير ما نلمس الـ display أو الـ position */
.hall-col-1::before,
.hall-col-2::before,
.hall-col-3::before,
.hall-col-4::before {
    content: "";
    position: absolute;
    top: 25%;
    left: 50%;
    transform: translateX(-50%);
    font-size: 28px;
    color: rgba(212, 175, 55, 0.5);
    text-shadow: 0 0 10px rgba(212, 175, 55, 0.3);
    z-index: 10;
    animation: columnGlyphGlow 5s ease-in-out infinite;
    pointer-events: none;
}

.hall-col-1::after,
.hall-col-2::after,
.hall-col-3::after,
.hall-col-4::after {
    content: "𓏏";
    position: absolute;
    top: 55%;
    left: 50%;
    transform: translateX(-50%);
    font-size: 28px;
    color: rgba(212, 175, 55, 0.5);
    text-shadow: 0 0 10px rgba(212, 175, 55, 0.3);
    z-index: 10;
    animation: columnGlyphGlow 5s ease-in-out infinite;
    animation-delay: 2s;
    pointer-events: none;
}

@keyframes columnGlyphGlow {
    0%, 100% { 
        opacity: 0.4; 
        text-shadow: 0 0 5px rgba(212, 175, 55, 0.2); 
    }
    50% { 
        opacity: 0.8; 
        text-shadow: 0 0 15px rgba(244, 211, 94, 0.6); 
    }
}

/* رموز مختلفة لكل عمود */
.hall-col-2::before { content: "𓆣"; }
.hall-col-3::before { content: "𓅓"; }
.hall-col-4::before { content: "𓇳"; }

.hall-col-2::after { content: "𓋹"; }
.hall-col-3::after { content: "𓀀"; }
.hall-col-4::after { content: "𓊃"; }

/* توقيت مختلف لكل عمود */
.hall-col-1::before { animation-delay: 0s; }
.hall-col-1::after { animation-delay: 1s; }

.hall-col-2::before { animation-delay: 0.5s; }
.hall-col-2::after { animation-delay: 1.5s; }

.hall-col-3::before { animation-delay: 1s; }
.hall-col-3::after { animation-delay: 2s; }

.hall-col-4::before { animation-delay: 1.5s; }
.hall-col-4::after { animation-delay: 2.5s; }

/* للموبايل - تصغير الرموز */
@media (max-width: 720px) {
    .hall-column::before,
    .hall-column::after {
        font-size: 18px;
    }
}
/* =========================================================
   GU LIBRARY — KNOWLEDGE GUARDIAN
   Interactive Egyptian Character
========================================================= */

.knowledge-guardian {
    position: relative;
    width: min(330px, 25vw);
    min-width: 230px;
    height: 560px;

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

    isolation: isolate;

    perspective: 900px;

    user-select: none;
    pointer-events: auto;

    margin: 0 auto;

    z-index: 20;
}


/* =========================================================
   AURA
========================================================= */

.guardian-aura {
    position: absolute;

    width: 280px;
    height: 280px;

    left: 50%;
    top: 32%;

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

    border-radius: 50%;

    background:
        radial-gradient(
            circle,
            rgba(212,175,55,.13),
            rgba(212,175,55,.05) 35%,
            transparent 72%
        );

    filter: blur(10px);

    opacity: .55;

    animation:
        guardianAura 6s ease-in-out infinite;

    pointer-events: none;

    z-index: -2;
}


@keyframes guardianAura {

    0%,100% {
        transform:
            translate(-50%, -50%)
            scale(.94);

        opacity: .38;
    }

    50% {
        transform:
            translate(-50%, -50%)
            scale(1.08);

        opacity: .68;
    }

}


/* =========================================================
   GROUND
========================================================= */

.guardian-ground {

    position: absolute;

    bottom: 18px;

    left: 50%;

    width: 190px;
    height: 28px;

    transform:
        translateX(-50%);

    border-radius: 50%;

    background:
        radial-gradient(
            ellipse,
            rgba(0,0,0,.8),
            transparent 70%
        );

    filter: blur(4px);

    z-index: -1;
}


/* =========================================================
   SVG
========================================================= */

.guardian-svg {

    width: 100%;
    height: 100%;

    overflow: visible;

    transform-origin:
        50% 90%;

    animation:
        guardianBreathing 5.5s ease-in-out infinite;

    filter:
        drop-shadow(
            0 18px 20px rgba(0,0,0,.65)
        );

    transition:
        filter .5s ease,
        transform .4s ease;

    cursor: default;
}


@keyframes guardianBreathing {

    0%,100% {
        transform:
            translateY(0)
            scale(1);
    }

    50% {
        transform:
            translateY(-3px)
            scale(1.006);
    }

}


/* =========================================================
   CLOAK
========================================================= */

.guardian-cloak {

    transform-origin:
        150px 230px;

    animation:
        cloakBreath 6s ease-in-out infinite;
}


@keyframes cloakBreath {

    0%,100% {
        transform:
            scaleX(1);
    }

    50% {
        transform:
            scaleX(1.012);
    }

}


/* =========================================================
   HEAD
========================================================= */

.guardian-head {

    transform-origin:
        150px 150px;

    animation:
        guardianHeadIdle 7s ease-in-out infinite;

    transition:
        transform .25s ease-out;
}


@keyframes guardianHeadIdle {

    0%,100% {
        transform:
            rotate(0deg);
    }

    50% {
        transform:
            rotate(-.7deg);
    }

}


/* =========================================================
   EYES
========================================================= */

.guardian-eyes {

    transform-origin:
        150px 105px;

    transition:
        transform .15s ease-out;
}


/* Eye glow */

.guardian-eye-left,
.guardian-eye-right {

    filter:
        drop-shadow(
            0 0 5px rgba(244,211,94,.7)
        );

    animation:
        guardianEyeGlow 4s ease-in-out infinite;

}


@keyframes guardianEyeGlow {

    0%,100% {
        opacity: .65;
    }

    50% {
        opacity: 1;
    }

}


/* =========================================================
   URAEUS
========================================================= */

.guardian-uraeus {

    transform-origin:
        150px 75px;

    animation:
        uraeusMotion 5s ease-in-out infinite;
}


@keyframes uraeusMotion {

    0%,100% {
        transform:
            rotate(0deg);
    }

    50% {
        transform:
            rotate(2deg);
    }

}


/* =========================================================
   ARMS
========================================================= */

.guardian-arm-left {

    transform-origin:
        92px 220px;

    animation:
        leftArmIdle 6s ease-in-out infinite;
}


.guardian-arm-right {

    transform-origin:
        208px 220px;

    animation:
        rightArmIdle 6s ease-in-out infinite;
}


@keyframes leftArmIdle {

    0%,100% {
        transform:
            rotate(0deg);
    }

    50% {
        transform:
            rotate(-1deg);
    }

}


@keyframes rightArmIdle {

    0%,100% {
        transform:
            rotate(0deg);
    }

    50% {
        transform:
            rotate(1deg);
    }

}


/* =========================================================
   STAFF
========================================================= */

.guardian-staff {

    transform-origin:
        250px 455px;

    animation:
        staffIdle 5s ease-in-out infinite;
}


@keyframes staffIdle {

    0%,100% {
        transform:
            rotate(0deg);
    }

    50% {
        transform:
            rotate(.8deg);
    }

}


.staff-energy {

    animation:
        staffEnergy 3s ease-in-out infinite;
}


@keyframes staffEnergy {

    0%,100% {
        opacity: .08;
    }

    50% {
        opacity: .4;
    }

}


/* =========================================================
   CHEST SYMBOL
========================================================= */

.guardian-symbol {

    transform-origin:
        150px 270px;

    animation:
        symbolPulse 4s ease-in-out infinite;
}


@keyframes symbolPulse {

    0%,100% {
        opacity: .65;
    }

    50% {
        opacity: 1;
        filter:
            drop-shadow(
                0 0 8px rgba(244,211,94,.45)
            );
    }

}


/* =========================================================
   HIEROGLYPHS
========================================================= */

.guardian-hieroglyphs {

    font-family:
        "Times New Roman",
        serif;

    font-size: 23px;

    fill: #d4af37;

    opacity: .32;

    animation:
        hieroglyphFloat 6s ease-in-out infinite;
}


@keyframes hieroglyphFloat {

    0%,100% {
        transform:
            translateY(0);
        opacity: .22;
    }

    50% {
        transform:
            translateY(-7px);
        opacity: .48;
    }

}


/* =========================================================
   HOVER — GUARDIAN AWAKENS
========================================================= */

.knowledge-guardian:hover .guardian-svg {

    transform:
        translateY(-7px)
        scale(1.015);

    filter:
        drop-shadow(
            0 18px 20px rgba(0,0,0,.7)
        )
        drop-shadow(
            0 0 25px rgba(212,175,55,.22)
        );
}


.knowledge-guardian:hover .guardian-aura {

    opacity: .9;

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


@keyframes guardianAuraAwake {

    0%,100% {
        transform:
            translate(-50%,-50%)
            scale(.95);
    }

    50% {
        transform:
            translate(-50%,-50%)
            scale(1.18);
    }

}


.knowledge-guardian:hover
.guardian-eye-left,
.knowledge-guardian:hover
.guardian-eye-right {

    filter:
        drop-shadow(
            0 0 8px #f4d35e
        )
        drop-shadow(
            0 0 18px rgba(244,211,94,.55)
        );

    opacity: 1;
}


/* =========================================================
   INSCRIPTION
========================================================= */

.guardian-inscription {

    position: absolute;

    bottom: -5px;

    left: 50%;

    transform:
        translateX(-50%);

    width: 260px;

    display: flex;

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

    gap: 14px;

    font-family: 'Cinzel', serif;

    font-size: 10px;

    letter-spacing: .18em;

    color:
        rgba(212,175,55,.65);

    white-space: nowrap;

    opacity: .75;

    transition:
        opacity .4s ease,
        letter-spacing .4s ease;
}


.guardian-inscription span {

    font-size: 18px;

    color:
        rgba(244,211,94,.75);
}


.knowledge-guardian:hover
.guardian-inscription {

    opacity: 1;

    letter-spacing: .24em;
}


/* =========================================================
   REDUCED MOTION
========================================================= */

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

    .guardian-svg,
    .guardian-aura,
    .guardian-cloak,
    .guardian-head,
    .guardian-uraeus,
    .guardian-arm-left,
    .guardian-arm-right,
    .guardian-staff,
    .guardian-symbol,
    .guardian-hieroglyphs {

        animation: none !important;
    }

}


/* =========================================================
   RESPONSIVE
========================================================= */

@media (max-width: 900px) {

    .knowledge-guardian {

        width: 270px;
        height: 500px;

    }

}


@media (max-width: 600px) {

    .knowledge-guardian {

        width: 230px;
        height: 440px;

    }

    .guardian-inscription {

        font-size: 8px;
        width: 220px;

    }

}
```css
/* =========================================================
   KNOWLEDGE GUARDIAN
   Walking Patrol — Hands Behind Back
   ========================================================= */

/* الشخصية كلها هي اللي تتحرك */
.knowledge-guardian {
    --guardian-walk-x: 0px;

    transform: translate3d(
        var(--guardian-walk-x),
        0,
        0
    );

    transition:
        transform 3.8s cubic-bezier(.45, 0, .25, 1);

    will-change: transform;
}


/* =========================================================
   BODY WALK
   ========================================================= */

.knowledge-guardian.guardian-walking
.guardian-svg {

    animation:
        guardianWalkingBody
        2.8s
        ease-in-out
        infinite !important;
}


@keyframes guardianWalkingBody {

    0%,
    100% {
        transform:
            translateY(0)
            scale(1);
    }

    50% {
        transform:
            translateY(-3px)
            scale(1.004);
    }
}


/* =========================================================
   HANDS BEHIND THE BACK
   ========================================================= */

/*
   الذراع الشمال يدخل للداخل
   واليمين يدخل للداخل.
*/

.guardian-arm-left {

    transform-origin:
        92px 220px;

    transform:
        rotate(-20deg)
        translateX(8px);

    animation:
        guardianLeftArmWalk
        3.2s
        ease-in-out
        infinite !important;
}


.guardian-arm-right {

    transform-origin:
        208px 220px;

    transform:
        rotate(20deg)
        translateX(-8px);

    animation:
        guardianRightArmWalk
        3.2s
        ease-in-out
        infinite !important;
}


/* حركة صغيرة جدًا للإيدين أثناء المشي */

@keyframes guardianLeftArmWalk {

    0%,
    100% {
        transform:
            rotate(-20deg)
            translateX(8px);
    }

    50% {
        transform:
            rotate(-17deg)
            translateX(9px);
    }
}


@keyframes guardianRightArmWalk {

    0%,
    100% {
        transform:
            rotate(20deg)
            translateX(-8px);
    }

    50% {
        transform:
            rotate(17deg)
            translateX(-9px);
    }
}


/* =========================================================
   HEAD
   ========================================================= */

.knowledge-guardian.guardian-walking
.guardian-head {

    animation:
        guardianWalkingHead
        3.2s
        ease-in-out
        infinite !important;
}


@keyframes guardianWalkingHead {

    0%,
    100% {
        transform:
            rotate(0deg);
    }

    50% {
        transform:
            rotate(-0.6deg);
    }
}


/* =========================================================
   STAFF
   ========================================================= */

.knowledge-guardian.guardian-walking
.guardian-staff {

    animation:
        guardianWalkingStaff
        3.2s
        ease-in-out
        infinite !important;
}


@keyframes guardianWalkingStaff {

    0%,
    100% {
        transform:
            rotate(0deg);
    }

    50% {
        transform:
            rotate(0.7deg);
    }
}


/* =========================================================
   CLOAK
   ========================================================= */

.knowledge-guardian.guardian-walking
.guardian-cloak {

    animation:
        guardianWalkingCloak
        3.2s
        ease-in-out
        infinite !important;
}


@keyframes guardianWalkingCloak {

    0%,
    100% {
        transform:
            scaleX(1);
    }

    50% {
        transform:
            scaleX(1.008);
    }
}


/* =========================================================
   GROUND SHADOW
   ========================================================= */

.knowledge-guardian.guardian-walking
.guardian-ground {

    transform:
        translateX(-50%)
        scaleX(.94);

    transition:
        transform 1.5s ease;
}


/* =========================================================
   AURA
   ========================================================= */

.knowledge-guardian.guardian-walking
.guardian-aura {

    opacity: .65;

    animation:
        guardianAuraWalking
        4s
        ease-in-out
        infinite;
}


@keyframes guardianAuraWalking {

    0%,
    100% {
        transform:
            translate(-50%, -50%)
            scale(.96);
    }

    50% {
        transform:
            translate(-50%, -50%)
            scale(1.04);
    }
}


/* =========================================================
   STOP / IDLE
   ========================================================= */

.knowledge-guardian.guardian-idle
.guardian-svg {

    animation:
        guardianBreathing
        5.5s
        ease-in-out
        infinite !important;
}


/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width: 600px) {

    .knowledge-guardian {

        transition-duration:
            3s;
    }

}
```

وبعده حط ده في **ملف JavaScript** عندك:

```javascript

/* =========================================================
   THOTH — WALKING TEMPLE GUARDIAN
   ========================================================= */

.thoth-wrap {
    position: absolute;

    width: 220px;
    height: 360px;

    left: 50%;
    bottom: 7%;

    transform: translateX(-50%);

    z-index: 30;

    pointer-events: none;

    animation:
        thothWalk 16s ease-in-out infinite;
}


/* -----------------------------------------
   CHARACTER
----------------------------------------- */

.thoth-figure {

    width: 100%;
    height: 100%;

    overflow: visible;

    transform-origin:
        50% 90%;

    animation:
        thothBody 1.1s ease-in-out infinite;

}


/* -----------------------------------------
   WALKING MOVEMENT
----------------------------------------- */

@keyframes thothWalk {

    0% {
        left: 36%;
    }

    25% {
        left: 43%;
    }

    50% {
        left: 64%;
    }

    75% {
        left: 57%;
    }

    100% {
        left: 36%;
    }

}


/* -----------------------------------------
   NATURAL BODY MOVEMENT
----------------------------------------- */

@keyframes thothBody {

    0%,
    100% {

        transform:
            translateY(0)
            rotate(0deg);

    }

    25% {

        transform:
            translateY(-3px)
            rotate(-0.7deg);

    }

    50% {

        transform:
            translateY(0)
            rotate(0.4deg);

    }

    75% {

        transform:
            translateY(-3px)
            rotate(-0.5deg);

    }

}


/* -----------------------------------------
   LEGS — ACTUAL WALK
----------------------------------------- */

.thoth-leg-front {

    transform-origin: 138px 270px;

    animation:
        thothStepFront 1.1s ease-in-out infinite;

}


.thoth-leg-back {

    transform-origin: 82px 270px;

    animation:
        thothStepBack 1.1s ease-in-out infinite;

}


@keyframes thothStepFront {

    0%,
    100% {

        transform:
            rotate(9deg)
            translateY(0);

    }

    50% {

        transform:
            rotate(-9deg)
            translateY(-2px);

    }

}


@keyframes thothStepBack {

    0%,
    100% {

        transform:
            rotate(-9deg)
            translateY(-2px);

    }

    50% {

        transform:
            rotate(9deg)
            translateY(0);

    }

}


/* -----------------------------------------
   ARM BEHIND BACK
----------------------------------------- */

.thoth-arm-back {

    transform-origin:
        145px 185px;

    animation:
        thothBackArm 1.1s ease-in-out infinite;

}


@keyframes thothBackArm {

    0%,
    100% {
        transform: rotate(2deg);
    }

    50% {
        transform: rotate(-2deg);
    }

}


/* -----------------------------------------
   FRONT ARM
----------------------------------------- */

.thoth-arm-front {

    transform-origin:
        74px 185px;

    animation:
        thothFrontArm 1.1s ease-in-out infinite;

}


@keyframes thothFrontArm {

    0%,
    100% {
        transform: rotate(-2deg);
    }

    50% {
        transform: rotate(3deg);
    }

}


/* -----------------------------------------
   HEAD
----------------------------------------- */

.thoth-head {

    transform-origin:
        110px 125px;

    animation:
        thothHead 2.2s ease-in-out infinite;

}


@keyframes thothHead {

    0%,
    100% {
        transform: rotate(0deg);
    }

    50% {
        transform: rotate(1.2deg);
    }

}


/* -----------------------------------------
   EYE
----------------------------------------- */

.thoth-eye {

    animation:
        thothEye 4s ease-in-out infinite;

}


@keyframes thothEye {

    0%,
    85%,
    100% {
        opacity: .65;
    }

    90% {
        opacity: 1;
    }

}


/* -----------------------------------------
   SHADOW FOLLOWS CHARACTER
----------------------------------------- */

.thoth-shadow {

    position: absolute;

    left: 50%;
    bottom: 5px;

    width: 110px;
    height: 20px;

    transform:
        translateX(-50%);

    border-radius: 50%;

    background: rgba(0,0,0,.55);

    filter: blur(5px);

    animation:
        thothShadow 1.1s ease-in-out infinite;

}


@keyframes thothShadow {

    0%,
    100% {
        transform:
            translateX(-50%)
            scaleX(.9);
    }

    50% {
        transform:
            translateX(-50%)
            scaleX(1.08);
    }

}


/* -----------------------------------------
   IMPORTANT:
   Don't let old animation rules override it
----------------------------------------- */

.thoth-wrap,
.thoth-figure,
.thoth-body,
.thoth-head,
.thoth-arm-back,
.thoth-arm-front,
.thoth-leg-front,
.thoth-leg-back {

    will-change:
        transform,
        left;

}


/* -----------------------------------------
   MOBILE
----------------------------------------- */

@media (max-width: 700px) {

    .thoth-wrap {

        width: 170px;
        height: 280px;

        bottom: 8%;

        animation-duration: 14s;

    }

}
/* =========================================================
   KNOWLEDGE GUARDIAN — PATROL ENGINE
========================================================= */

#knowledgeGuardian {
    will-change: translate;
}
/* =========================================================
   GUARDIAN WALKING FLOOR
   Clean Egyptian Temple Style
========================================================= */

.guardian-walk-area {

    position: absolute;

    left: 0;
    right: 0;
    bottom: 0;

    height: 30%;

    overflow: hidden;

    pointer-events: none;

    z-index: 1;

}


/* =========================================================
   WALKING FLOOR
========================================================= */

.guardian-path {

    position: absolute;

    left: 0;
    right: 0;

    bottom: 8%;

    height: 105px;

    background:

        linear-gradient(
            180deg,
            rgba(25,17,9,.15),
            #2d210f 18%,
            #55401e 50%,
            #30210f 82%,
            rgba(20,13,7,.9)
        );

    border-top:
        2px solid rgba(183,143,60,.35);

    border-bottom:
        2px solid rgba(10,7,4,.8);

    box-shadow:

        inset 0 12px 18px rgba(0,0,0,.35),

        inset 0 -15px 25px rgba(0,0,0,.45),

        0 -8px 25px rgba(173,130,45,.07);

}


/* =========================================================
   FLOOR STONE LINES
========================================================= */

.guardian-path::before {

    content: "";

    position: absolute;

    inset: 0;

    background:

        repeating-linear-gradient(
            90deg,
            transparent 0,
            transparent 180px,
            rgba(8,5,3,.28) 181px,
            transparent 184px
        );

    opacity: .7;

}


/* =========================================================
   VERY SUBTLE GOLD EDGE
========================================================= */

.guardian-path::after {

    content: "";

    position: absolute;

    left: 4%;
    right: 4%;

    top: 12px;

    height: 2px;

    background:

        linear-gradient(
            90deg,
            transparent,
            rgba(212,175,55,.25),
            rgba(212,175,55,.4),
            rgba(212,175,55,.25),
            transparent
        );

}
/* =========================================================
   GUARDIAN WALKING FLOOR
   Clean Egyptian Temple Style
========================================================= */

.guardian-walk-area {

    position: absolute;

    left: 0;
    right: 0;
    bottom: 0;

    height: 30%;

    overflow: hidden;

    pointer-events: none;

    z-index: 1;

}


/* =========================================================
   WALKING FLOOR
========================================================= */

.guardian-path {

    position: absolute;

    left: 0;
    right: 0;

    bottom: 8%;

    height: 105px;

    background:

        linear-gradient(
            180deg,
            rgba(25,17,9,.15),
            #2d210f 18%,
            #55401e 50%,
            #30210f 82%,
            rgba(20,13,7,.9)
        );

    border-top:
        2px solid rgba(183,143,60,.35);

    border-bottom:
        2px solid rgba(10,7,4,.8);

    box-shadow:

        inset 0 12px 18px rgba(0,0,0,.35),

        inset 0 -15px 25px rgba(0,0,0,.45),

        0 -8px 25px rgba(173,130,45,.07);

}


/* =========================================================
   FLOOR STONE LINES
========================================================= */

.guardian-path::before {

    content: "";

    position: absolute;

    inset: 0;

    background:

        repeating-linear-gradient(
            90deg,
            transparent 0,
            transparent 180px,
            rgba(8,5,3,.28) 181px,
            transparent 184px
        );

    opacity: .7;

}


/* =========================================================
   VERY SUBTLE GOLD EDGE
========================================================= */

.guardian-path::after {

    content: "";

    position: absolute;

    left: 4%;
    right: 4%;

    top: 12px;

    height: 2px;

    background:

        linear-gradient(
            90deg,
            transparent,
            rgba(212,175,55,.25),
            rgba(212,175,55,.4),
            rgba(212,175,55,.25),
            transparent
        );

}
/* =========================================================
   HALL OF STORIES — THREE ROW GUARDIANS
   One guardian per shelf / row
========================================================= */

.book-grid {
    position: relative !important;
}

/* Guardian container */
.shelf-guardian {
    position: absolute;
    width: 72px;
    height: 105px;

    z-index: 30;
    pointer-events: none;

    transform-origin: center bottom;

    filter:
        drop-shadow(0 8px 7px rgba(0,0,0,.75))
        drop-shadow(0 0 8px rgba(212,175,55,.18));

    will-change: left, transform;
}

/* Small walking/breathing motion */
.shelf-guardian.walking {
    animation: shelfGuardianBob .55s ease-in-out infinite;
}

@keyframes shelfGuardianBob {
    0%,100% {
        margin-top: 0;
    }

    50% {
        margin-top: -4px;
    }
}

/* When approaching a book */
.shelf-guardian.approaching {
    animation:
        shelfGuardianBob .55s ease-in-out infinite;
}

/* Character SVG */
.shelf-guardian svg {
    width: 100%;
    height: 100%;
    display: block;
    overflow: visible;
}

/* Ground shadow */
.shelf-guardian .guardian-shadow {
    fill: rgba(0,0,0,.55);
}

/* Body */
.shelf-guardian .guardian-body {
    fill: #5d4527;
    stroke: #d4af37;
    stroke-width: 1.8;
}

/* Gold armor */
.shelf-guardian .guardian-gold {
    fill: #b98b2e;
    stroke: #f4d35e;
    stroke-width: 1.4;
}

/* Dark details */
.shelf-guardian .guardian-dark {
    fill: #17100a;
}

/* Face */
.shelf-guardian .guardian-face {
    fill: #9a7040;
    stroke: #d4af37;
    stroke-width: 1.2;
}

/* Eyes */
.shelf-guardian .guardian-eye {
    fill: #f4d35e;
}

/* Staff */
.shelf-guardian .guardian-staff {
    stroke: #d4af37;
    stroke-width: 3;
    stroke-linecap: round;
}

/* Different guardian personalities */

/* Guardian 1 — Crown */
.shelf-guardian.guardian-1 .guardian-crown {
    fill: #8f6b24;
    stroke: #f4d35e;
    stroke-width: 1.5;
}

/* Guardian 2 — Nemes */
.shelf-guardian.guardian-2 .guardian-headdress {
    fill: #25302b;
    stroke: #d4af37;
    stroke-width: 1.5;
}

/* Guardian 3 — Warrior */
.shelf-guardian.guardian-3 .guardian-headdress {
    fill: #392a1b;
    stroke: #d4af37;
    stroke-width: 1.5;
}

.shelf-guardian.guardian-3 .guardian-shield {
    fill: #70552e;
    stroke: #f4d35e;
    stroke-width: 1.5;
}

/* Walking direction */
.shelf-guardian.face-left {
    transform: scaleX(-1);
}

.shelf-guardian.face-right {
    transform: scaleX(1);
}

/* Slight golden reaction when guardian reaches book */
.shelf-guardian.at-book {
    filter:
        drop-shadow(0 8px 7px rgba(0,0,0,.75))
        drop-shadow(0 0 14px rgba(244,211,94,.45));
}

/* Mobile */
@media (max-width: 700px) {
    .shelf-guardian {
        width: 54px;
        height: 82px;
    }
}
/* =========================================================
   3 MINI EGYPTIAN SHELF GUARDIANS
========================================================= */

#bookGrid {
    position: relative !important;
    overflow: visible !important;
}

.mini-shelf-guardian {

    position: absolute;

    width: 58px;
    height: 92px;

    z-index: 100;

    pointer-events: none;

    transition:
        left .18s ease-out,
        transform .18s ease-out;

    filter:
        drop-shadow(0 6px 5px rgba(0,0,0,.8))
        drop-shadow(0 0 8px rgba(212,175,55,.25));

}

.guardian-body {

    position: relative;

    width: 100%;
    height: 100%;

}


/* HEAD */

.guardian-head {

    position: absolute;

    left: 50%;
    top: 5px;

    transform: translateX(-50%);

    width: 28px;
    height: 28px;

    border-radius: 50%;

    display: flex;

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

    font-size: 18px;

    color: #f4d35e;

    background:
        radial-gradient(
            circle,
            #9b703d 0%,
            #5a3b20 70%
        );

    border:
        2px solid #d4af37;

    z-index: 5;

}


/* CROWN */

.guardian-crown {

    position: absolute;

    left: 50%;
    top: 0;

    transform: translateX(-50%);

    width: 38px;
    height: 16px;

    background:
        linear-gradient(
            90deg,
            #8b6825,
            #f4d35e,
            #8b6825
        );

    clip-path:
        polygon(
            0 100%,
            8% 15%,
            28% 55%,
            50% 0,
            72% 55%,
            92% 15%,
            100% 100%
        );

    z-index: 6;

}


/* BODY */

.guardian-torso {

    position: absolute;

    left: 50%;
    top: 31px;

    transform: translateX(-50%);

    width: 31px;
    height: 42px;

    background:
        linear-gradient(
            90deg,
            #3a2817,
            #8b683d,
            #3a2817
        );

    border:
        2px solid #d4af37;

    clip-path:
        polygon(
            20% 0,
            80% 0,
            100% 100%,
            0 100%
        );

}


/* ARMS */

.guardian-arm {

    position: absolute;

    top: 35px;

    width: 8px;
    height: 34px;

    background: #8b6335;

    border: 1px solid #d4af37;

}

.guardian-arm.left {
    left: 7px;
    transform: rotate(12deg);
}

.guardian-arm.right {
    right: 7px;
    transform: rotate(-12deg);
}


/* LEGS */

.guardian-leg {

    position: absolute;

    top: 68px;

    width: 9px;
    height: 22px;

    background: #4a321c;

    border:
        1px solid #d4af37;

}

.guardian-leg.left {
    left: 19px;
}

.guardian-leg.right {
    right: 19px;
}


/* STAFF */

.guardian-staff {

    position: absolute;

    width: 3px;
    height: 62px;

    right: 2px;
    top: 29px;

    background:
        linear-gradient(
            #f4d35e,
            #8b6825
        );

}


/* =========================================================
   DIFFERENT GUARDIANS
========================================================= */


/* Guardian 1 */

.guardian-1 .guardian-head {

    background:
        radial-gradient(
            circle,
            #a87842,
            #5c3b1e
        );

}


/* Guardian 2 */

.guardian-2 .guardian-crown {

    width: 45px;
    height: 20px;

    background:
        linear-gradient(
            90deg,
            #183b3a,
            #d4af37,
            #183b3a
        );

}


.guardian-2 .guardian-torso {

    background:
        linear-gradient(
            90deg,
            #173b39,
            #8c7135,
            #173b39
        );

}


/* Guardian 3 */

.guardian-3 .guardian-crown {

    width: 34px;
    height: 22px;

    background:
        linear-gradient(
            #4b251d,
            #d4af37
        );

}


.guardian-3 .guardian-torso {

    background:
        linear-gradient(
            90deg,
            #301b15,
            #9b703d,
            #301b15
        );

}


/* HOVER / FOLLOW */

.mini-shelf-guardian.guardian-following {

    filter:
        drop-shadow(0 6px 5px rgba(0,0,0,.8))
        drop-shadow(
            0 0 16px
            rgba(244,211,94,.55)
        );

}


/* walking animation */

.mini-shelf-guardian:not(.guardian-following)
.guardian-leg.left {

    animation:
        guardianWalkLeft .45s
        ease-in-out infinite alternate;

}

.mini-shelf-guardian:not(.guardian-following)
.guardian-leg.right {

    animation:
        guardianWalkRight .45s
        ease-in-out infinite alternate;

}


@keyframes guardianWalkLeft {

    from {
        transform: rotate(8deg);
    }

    to {
        transform: rotate(-8deg);
    }

}


@keyframes guardianWalkRight {

    from {
        transform: rotate(-8deg);
    }

    to {
        transform: rotate(8deg);
    }

}


/* breathing */

.mini-shelf-guardian {
    animation:
        guardianFloat 2.2s
        ease-in-out infinite;
    transition:
        left .45s cubic-bezier(.22,.61,.36,1),
        transform .35s ease;
}

@keyframes guardianFloat {

    0%,100% {
        margin-top: 0;
    }

    50% {
        margin-top: -3px;
    }

}
/* =========================================================
   GU LIBRARY — GAMES CHAMBER
   TEMPLE GAME PORTALS — FINAL VERSION
   ========================================================= */

.games-chamber {
    position: relative;
    min-height: 1080px !important;
    overflow: hidden;
    isolation: isolate;

    background:
        radial-gradient(
            ellipse at 50% 38%,
            rgba(188, 151, 69, 0.11) 0%,
            rgba(53, 72, 61, 0.055) 25%,
            rgba(22, 16, 11, 0.78) 62%,
            #100b07 100%
        ) !important;
}


/* =========================================================
   LARGE GAME AREA
   ========================================================= */

.games-chamber .portal-grid {

    position: relative;

    width: min(1250px, 94vw);

    height: 860px;

    margin: 45px auto 0;

    z-index: 5;
}


/* =========================================================
   GAME POSITIONS
   WIDE INVERTED TRIANGLE
   ========================================================= */

/* LEFT GAME */

.games-chamber .portal-station:nth-child(1) {

    position: absolute;

    left: 2%;

    top: 4%;

    width: 310px;
    height: 310px;

    z-index: 5;
}


/* RIGHT GAME */

.games-chamber .portal-station:nth-child(2) {

    position: absolute;

    right: 2%;

    top: 4%;

    width: 310px;
    height: 310px;

    z-index: 5;
}


/* BOTTOM GAME */

.games-chamber .portal-station:nth-child(3) {

    position: absolute;

    left: 50%;

    top: 64%;

    width: 310px;
    height: 310px;

    transform: translateX(-50%);

    z-index: 5;
}


/* =========================================================
   BIG GAME BUTTON
   ========================================================= */

.games-chamber .portal-btn {

    position: relative;

    width: 295px;
    height: 295px;

    display: flex;

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

    border: none;
    outline: none;

    background: transparent;

    cursor: pointer;

    overflow: visible;

    transition:
        transform .45s cubic-bezier(.22,.61,.16,1),
        filter .45s ease;
}


/* =========================================================
   GAME PORTAL
   ========================================================= */

.games-chamber .portal-figure {

    width: 275px;
    height: 305px;

    overflow: visible;

    filter:
        drop-shadow(0 16px 16px rgba(0,0,0,.65));

    transition:
        transform .5s cubic-bezier(.22,.61,.16,1),
        filter .5s ease;
}


/* =========================================================
   MAIN PORTAL BODY
   ========================================================= */

.games-chamber .game-icon-frame {

    fill:
        linear-gradient(
            180deg,
            #463a29,
            #211a12
        );

    fill: rgba(47, 38, 27, .98);

    stroke: #b99b5b;

    stroke-width: 2.5;

    filter:
        drop-shadow(0 7px 8px rgba(0,0,0,.55));

    transition:
        fill .4s ease,
        stroke .4s ease,
        stroke-width .4s ease,
        filter .4s ease;
}


/* =========================================================
   INNER GAME SYMBOL
   ========================================================= */

.games-chamber .game-symbol {

    fill: none;

    stroke: #d5b66b;

    stroke-width: 3;

    stroke-linecap: round;
    stroke-linejoin: round;

    filter: none;

    transition:
        stroke .35s ease,
        stroke-width .35s ease,
        transform .35s ease;
}


/* =========================================================
   PORTAL LABEL
   ========================================================= */

.games-chamber .portal-label {

    position: absolute;

    left: 50%;

    bottom: -4px;

    transform: translateX(-50%);

    min-width: 190px;

    padding: 11px 20px;

    text-align: center;

    font-family: "Cinzel", serif;

    font-size: 13px;

    font-weight: 600;

    letter-spacing: .14em;

    color: #d9bd7c;

    background:
        linear-gradient(
            180deg,
            rgba(57,46,31,.98),
            rgba(22,17,11,.99)
        );

    border:
        1px solid rgba(183,151,83,.45);

    border-top:
        1px solid #c3a35f;

    box-shadow:
        0 8px 18px rgba(0,0,0,.5);

    white-space: nowrap;

    transition:
        color .35s ease,
        background .35s ease,
        border-color .35s ease,
        transform .35s ease,
        letter-spacing .35s ease;
}


/* =========================================================
   DECORATIVE GOLD LINE
   ========================================================= */

.games-chamber .portal-label::before,
.games-chamber .portal-label::after {

    content: "";

    position: absolute;

    top: 50%;

    width: 22px;
    height: 1px;

    background:
        linear-gradient(
            90deg,
            transparent,
            rgba(198,165,92,.7)
        );
}

.games-chamber .portal-label::before {
    right: 100%;
}

.games-chamber .portal-label::after {
    left: 100%;

    transform: rotate(180deg);
}


/* =========================================================
   GAME HOVER
   ========================================================= */

.games-chamber .portal-station:hover .portal-btn {

    transform:
        translateY(-14px)
        scale(1.055);

    filter:
        drop-shadow(0 15px 22px rgba(0,0,0,.65));
}


.games-chamber .portal-station:hover .portal-figure {

    transform: scale(1.045);

    filter:
        drop-shadow(0 20px 20px rgba(0,0,0,.75))
        drop-shadow(0 0 18px rgba(195,163,95,.24));
}


.games-chamber .portal-station:hover .game-icon-frame {

    fill:
        rgba(62, 50, 34, .99);

    stroke:
        #d9bd72;

    stroke-width:
        3.2;

    filter:
        drop-shadow(0 0 8px rgba(211,181,107,.28));
}


.games-chamber .portal-station:hover .game-symbol {

    stroke:
        #f0d695;

    stroke-width:
        3.4;
}


.games-chamber .portal-station:hover .portal-label {

    color:
        #f0d695;

    border-color:
        rgba(210,177,101,.72);

    letter-spacing:
        .18em;

    background:
        linear-gradient(
            180deg,
            rgba(67,54,36,.99),
            rgba(25,19,12,1)
        );

    transform:
        translateX(-50%)
        translateY(3px);
}

/* =========================================================
   TEMPLE FLOOR
   ========================================================= */

.games-chamber::after {

    content: "";

    position: absolute;

    left: 7%;
    right: 7%;

    bottom: 40px;

    height: 150px;

    background:
        repeating-linear-gradient(
            to bottom,
            transparent 0px,
            transparent 27px,
            rgba(184,151,81,.11) 28px,
            transparent 29px
        );

    opacity:
        .55;

    pointer-events:
        none;

    mask-image:
        linear-gradient(
            to bottom,
            transparent,
            black 20%,
            black 80%,
            transparent
        );
}


/* =========================================================
   REMOVE OLD NEON EFFECTS
   ========================================================= */

.games-chamber .portal-figure,
.games-chamber .game-icon-frame,
.games-chamber .game-symbol,
.games-chamber .portal-label {

    text-shadow:
        none !important;
}


/* =========================================================
   GAME COLORS
   ========================================================= */

.games-chamber
.portal-station:nth-child(1)
.game-icon-frame {

    stroke:
        #c2a25d;
}


.games-chamber
.portal-station:nth-child(2)
.game-icon-frame {

    stroke:
        #ad9257;
}


.games-chamber
.portal-station:nth-child(3)
.game-icon-frame {

    stroke:
        #d0ae62;
}


/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width: 800px) {

    .games-chamber {

        min-height:
            1150px !important;
    }

    .games-chamber .portal-grid {

        width:
            96vw;

        height:
            900px;
    }

    .games-chamber
    .portal-station {

        width:
            220px !important;

        height:
            220px !important;
    }

    .games-chamber
    .portal-station:nth-child(1) {

        left:
            -4%;

        top:
            2%;
    }

    .games-chamber
    .portal-station:nth-child(2) {

        right:
            -4%;

        top:
            2%;
    }

    .games-chamber
    .portal-station:nth-child(3) {

        top:
            65%;
    }

    .games-chamber .portal-btn {

        width:
            215px;

        height:
            215px;
    }

    .games-chamber .portal-figure {

        width:
            200px;

        height:
            225px;
    }

    .games-chamber .portal-grid::before {

        font-size:
            45px;
    }

    .games-chamber .portal-grid::after {

        width:
            90px;

        height:
            90px;
    }
}
/* =========================================================
   GAME PORTAL — CLEAN TEMPLE DESIGN
   ========================================================= */

.games-chamber .portal-btn {
    position: relative;

    width: 310px;
    height: 330px;

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

    background: transparent !important;
    border: none !important;
    box-shadow: none !important;

    overflow: visible;

    cursor: pointer;

    transform: none;

    transition:
        transform .55s cubic-bezier(.22,.61,.16,1);
}


/* =========================================================
   SINGLE TEMPLE ARCH
   ========================================================= */

.games-chamber .portal-btn::before {

    content: "";

    position: absolute;

    left: 50%;
    top: 50%;

    width: 245px;
    height: 285px;

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

    background:
        linear-gradient(
            180deg,
            rgba(62,49,30,.38),
            rgba(19,14,9,.18)
        );

    border:
        2px solid rgba(190,157,86,.72);

    border-bottom:
        1px solid rgba(190,157,86,.38);

    border-radius:
        125px 125px 8px 8px;

    box-shadow:
        0 20px 35px rgba(0,0,0,.55),
        inset 0 0 30px rgba(0,0,0,.45);

    z-index: 0;

    transition:
        transform .55s cubic-bezier(.22,.61,.16,1),
        border-color .4s ease,
        box-shadow .4s ease;
}


/* =========================================================
   INNER DARKNESS
   ========================================================= */

.games-chamber .portal-btn::after {

    content: "";

    position: absolute;

    left: 50%;
    top: 50%;

    width: 226px;
    height: 265px;

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

    background:
        radial-gradient(
            ellipse at center 38%,
            rgba(122,96,48,.13),
            rgba(8,6,4,.72) 72%
        );

    border-radius:
        113px 113px 5px 5px;

    box-shadow:
        inset 0 0 35px rgba(0,0,0,.8);

    z-index: 1;

    pointer-events: none;
}


/* =========================================================
   GAME ART
   ========================================================= */

.games-chamber .portal-figure {

    position: relative;

    z-index: 4;

    width: 270px;
    height: 300px;

    filter:
        drop-shadow(0 13px 15px rgba(0,0,0,.7));

    transition:
        transform .55s cubic-bezier(.22,.61,.16,1),
        filter .45s ease;
}


/* =========================================================
   REMOVE EXTRA HEAVY FRAME FROM SVG
   ========================================================= */

.games-chamber .game-icon-frame {

    fill:
        rgba(20,15,9,.38) !important;

    stroke:
        #d0ae64 !important;

    stroke-width:
        2.2 !important;

    filter:
        none !important;
}


.games-chamber .game-symbol {

    stroke:
        #e1c577 !important;

    stroke-width:
        2.8 !important;

    filter:
        none !important;
}


/* =========================================================
   GAME NAME
   ========================================================= */

.games-chamber .portal-label {

    z-index: 10;

    left: 50%;
    bottom: -5px;

    min-width: 175px;

    padding: 10px 24px;

    transform:
        translateX(-50%);

    color:
        #dfc486 !important;

    background:
        linear-gradient(
            180deg,
            #3c2e1c,
            #171008
        ) !important;

    border:
        1px solid rgba(205,170,93,.65) !important;

    border-radius:
        3px;

    box-shadow:
        0 8px 18px rgba(0,0,0,.55);

    font-family:
        "Cinzel",
        serif;

    font-size:
        13px;

    letter-spacing:
        .16em;

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


/* =========================================================
   SMALL TEMPLE BASE
   ========================================================= */

.games-chamber .portal-station::before {

    content: "";

    position: absolute;

    left: 50%;
    bottom: 22px;

    width: 285px;
    height: 4px;

    transform:
        translateX(-50%);

    background:
        linear-gradient(
            90deg,
            transparent,
            rgba(201,168,94,.65),
            transparent
        );

    opacity: .65;

    z-index: 7;

    pointer-events: none;
}


/* =========================================================
   HOVER
   ========================================================= */

.games-chamber .portal-station:hover .portal-btn {

    transform:
        translateY(-12px);
}


.games-chamber .portal-station:hover .portal-btn::before {

    border-color:
        rgba(232,202,126,.9);

    box-shadow:
        0 24px 38px rgba(0,0,0,.7),
        0 0 25px rgba(208,174,100,.08),
        inset 0 0 30px rgba(0,0,0,.4);
}


.games-chamber .portal-station:hover .portal-figure {

    transform:
        scale(1.035);

    filter:
        drop-shadow(0 20px 20px rgba(0,0,0,.78))
        drop-shadow(0 0 12px rgba(221,190,110,.18));
}


.games-chamber .portal-station:hover .game-icon-frame {

    stroke:
        #f0d78f !important;

    stroke-width:
        2.8 !important;
}


.games-chamber .portal-station:hover .game-symbol {

    stroke:
        #f5dda0 !important;

    stroke-width:
        3.2 !important;
}


.games-chamber .portal-station:hover .portal-label {

    transform:
        translateX(-50%)
        translateY(3px);

    color:
        #f1d99b !important;

    border-color:
        rgba(230,199,126,.85) !important;

    background:
        linear-gradient(
            180deg,
            #4a3922,
            #21160b
        ) !important;
}
.game-card {
    min-height: 280px;
    height: auto;
    overflow: visible;
}

.game-card h3 {
    white-space: normal;
    overflow: visible;
    text-overflow: unset;
    line-height: 1.3;
}
 /* =========================================================
    GAMES CHAMBER — REAL FIX
    No clipping / no forced height / free Eye movement
    ========================================================= */

.games-chamber {
    min-height: 0 !important;
    height: auto !important;
    max-height: none !important;

    overflow: visible !important;
}


/* GAME AREA */

.games-chamber .portal-grid {
    width: min(1250px, 94vw) !important;

    height: 700px !important;

    margin: 35px auto 0 !important;

    overflow: visible !important;
}


/* =========================================================
   KEEP EACH GAME FROM BEING CUT
   ========================================================= */

.games-chamber .portal-station {
    overflow: visible !important;
}

.games-chamber .portal-btn {
    overflow: visible !important;
}

.games-chamber .portal-figure {
    overflow: visible !important;

    max-width: none !important;
    max-height: none !important;
}


/* =========================================================
   GAME POSITIONS
   ========================================================= */

/* LEFT */

.games-chamber .portal-station:nth-child(1) {
    top: 0 !important;
    left: 3% !important;

    width: 310px !important;
    height: 330px !important;
}


/* RIGHT */

.games-chamber .portal-station:nth-child(2) {
    top: 0 !important;
    right: 3% !important;

    width: 310px !important;
    height: 330px !important;
}


/* BOTTOM */

.games-chamber .portal-station:nth-child(3) {
    top: 50% !important;
    left: 50% !important;

    width: 310px !important;
    height: 330px !important;

    transform: translateX(-50%) !important;
}


/* =========================================================
   DON'T CHANGE THE EYE
   ========================================================= */

.games-chamber .portal-grid::before,
.games-chamber .portal-grid::after {
    z-index: 3 !important;
}


/* =========================================================
   LABEL — DON'T LET IT GET CUT
   ========================================================= */

.games-chamber .portal-label {
    overflow: visible !important;
    z-index: 20 !important;
}


/* =========================================================
   GAME CARD — DON'T CUT CONTENT
   ========================================================= */

.games-chamber .game-card {
    overflow: visible !important;
}
/* =========================================================
   FIXED EGYPTIAN TEMPLE DECORATIONS
   NO ANIMATION — NO MOVEMENT
   ========================================================= */

.games-chamber {
    position: relative;
    isolation: isolate;
}


/* =========================================================
   SIDE HIEROGLYPHS
   ========================================================= */

.pharaoh-decoration {
    position: absolute;

    top: 270px;

    width: 90px;

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

    gap: 38px;

    opacity: .28;

    z-index: 1;

    pointer-events: none;
}


.pharaoh-left {
    left: 4%;
}


.pharaoh-right {
    right: 4%;
}


.hieroglyph {
    font-family: "Times New Roman", serif;

    font-size: 38px;

    color: #c8a85f;

    text-shadow:
        0 0 8px rgba(200,168,95,.18);
}


/* =========================================================
   FIXED TEMPLE SUN
   ========================================================= */

.temple-sun {
    position: absolute;

    left: 50%;
    top: 300px;

    width: 170px;
    height: 170px;

    transform: translateX(-50%);

    z-index: 1;

    pointer-events: none;

    opacity: .25;
}


.sun-disc {
    position: absolute;

    left: 50%;
    top: 50%;

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

    width: 74px;
    height: 74px;

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

    border: 1px solid rgba(205,170,93,.65);

    border-radius: 50%;

    color: #d1ae62;

    font-size: 48px;

    font-family: serif;

    background:
        radial-gradient(
            circle,
            rgba(190,157,86,.12),
            transparent 68%
        );

    box-shadow:
        0 0 25px rgba(190,157,86,.08),
        inset 0 0 20px rgba(190,157,86,.06);
}


.sun-rays {
    position: absolute;

    inset: 8px;

    border: 1px solid rgba(190,157,86,.22);

    border-radius: 50%;
}


/* =========================================================
   HIEROGLYPH STRIPS
   ========================================================= */

.hieroglyph-strip {
    position: absolute;

    left: 50%;

    transform: translateX(-50%);

    width: min(900px, 75vw);

    text-align: center;

    color: #b99750;

    font-family: serif;

    font-size: 20px;

    letter-spacing: 7px;

    opacity: .20;

    z-index: 1;

    pointer-events: none;

    white-space: nowrap;
}


.hieroglyph-strip-top {
    top: 190px;
}


.hieroglyph-strip-bottom {
    bottom: 100px;
}


/* =========================================================
   DECORATIVE GOLD LINES
   ========================================================= */

.games-chamber::before {
    content: "";

    position: absolute;

    left: 12%;
    right: 12%;

    top: 225px;

    height: 1px;

    background:
        linear-gradient(
            90deg,
            transparent,
            rgba(190,157,86,.35),
            transparent
        );

    z-index: 1;

    pointer-events: none;
}


/* =========================================================
   KEEP GAMES ABOVE DECORATIONS
   ========================================================= */

.games-chamber .portal-grid,
.games-chamber .portal-station,
.games-chamber .chamber-heading {
    position: relative;

    z-index: 5;
}
/* =========================================================
   GAMES CHAMBER — EGYPTIAN TEMPLE ATMOSPHERE
   STATIC DECORATION ONLY
   ========================================================= */

.games-chamber {
    position: relative;
    overflow: visible !important;
}


/* =========================================================
   DARK TEMPLE VIGNETTE
   ========================================================= */

.games-chamber {
    background:
        radial-gradient(
            ellipse at 50% 45%,
            rgba(192,158,86,.10) 0%,
            rgba(78,61,37,.06) 28%,
            rgba(18,13,8,.72) 65%,
            #0c0805 100%
        ) !important;
}


/* =========================================================
   TOP TEMPLE FRAME
   ========================================================= */

.games-chamber::before {
    content: "";

    position: absolute;

    left: 6%;
    right: 6%;

    top: 155px;

    height: 110px;

    border-top:
        1px solid rgba(201,168,94,.35);

    border-bottom:
        1px solid rgba(201,168,94,.14);

    background:
        repeating-linear-gradient(
            90deg,
            transparent 0,
            transparent 38px,
            rgba(201,168,94,.07) 39px,
            transparent 40px
        );

    opacity: .7;

    pointer-events: none;

    z-index: 1;
}


/* =========================================================
   SIDE TEMPLE BORDERS
   ========================================================= */

.games-chamber .pharaoh-left,
.games-chamber .pharaoh-right {
    top: 250px;

    width: 105px;

    gap: 42px;

    opacity: .32;
}


/* LEFT GOLD LINE */

.games-chamber .pharaoh-left::after {
    content: "";

    position: absolute;

    left: 50%;

    top: -45px;

    width: 1px;

    height: 470px;

    background:
        linear-gradient(
            to bottom,
            transparent,
            rgba(201,168,94,.35),
            transparent
        );

    transform: translateX(-50%);
}


/* RIGHT GOLD LINE */

.games-chamber .pharaoh-right::after {
    content: "";

    position: absolute;

    right: 50%;

    top: -45px;

    width: 1px;

    height: 470px;

    background:
        linear-gradient(
            to bottom,
            transparent,
            rgba(201,168,94,.35),
            transparent
        );

    transform: translateX(50%);
}


/* =========================================================
   HIEROGLYPHS
   ========================================================= */

.games-chamber .hieroglyph {
    font-size: 34px;

    color: #c5a45e;

    opacity: .75;

    text-shadow:
        0 0 10px rgba(197,164,94,.16);
}


/* =========================================================
   CENTRAL SUN EMBLEM
   ========================================================= */

.games-chamber .temple-sun {
    top: 235px;

    width: 150px;
    height: 150px;

    opacity: .18;
}


.games-chamber .sun-disc {
    width: 62px;
    height: 62px;

    font-size: 40px;

    border-color:
        rgba(207,174,98,.55);
}


/* =========================================================
   GEOMETRIC DIAMOND
   ========================================================= */

.games-chamber .temple-sun::before,
.games-chamber .temple-sun::after {

    content: "";

    position: absolute;

    left: 50%;
    top: 50%;

    width: 105px;
    height: 105px;

    transform:
        translate(-50%, -50%)
        rotate(45deg);

    border:
        1px solid rgba(201,168,94,.22);

    pointer-events: none;
}


.games-chamber .temple-sun::after {

    width: 128px;
    height: 128px;

    transform:
        translate(-50%, -50%)
        rotate(45deg);

    opacity: .55;
}


/* =========================================================
   DECORATIVE CORNERS
   ========================================================= */

.games-chamber .portal-grid::before {
    content: "𓇳";

    position: absolute;

    left: 50%;
    top: 48%;

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

    width: 74px;
    height: 74px;

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

    font-family: serif;

    font-size: 42px;

    color: #d0ad62;

    opacity: .55;

    border:
        1px solid rgba(202,169,94,.38);

    border-radius: 50%;

    background:
        radial-gradient(
            circle,
            rgba(202,169,94,.07),
            transparent 70%
        );

    z-index: 3;

    pointer-events: none;
}


.games-chamber .portal-grid::after {

    content: "";

    position: absolute;

    left: 50%;
    top: 48%;

    width: 108px;
    height: 108px;

    transform:
        translate(-50%, -50%)
        rotate(45deg);

    border:
        1px solid rgba(202,169,94,.23);

    z-index: 2;

    pointer-events: none;
}


/* =========================================================
   CONNECTION LINES BETWEEN GAMES
   ========================================================= */

.games-chamber .portal-station::after {

    content: "";

    position: absolute;

    left: 50%;

    width: 1px;

    height: 55px;

    background:
        linear-gradient(
            to bottom,
            rgba(201,168,94,.28),
            transparent
        );

    transform: translateX(-50%);

    pointer-events: none;

    z-index: 1;
}


/* =========================================================
   GAME BASE — TEMPLE PLINTH
   ========================================================= */

.games-chamber .portal-station::before {

    height: 5px;

    width: 300px;

    background:
        linear-gradient(
            90deg,
            transparent,
            rgba(211,178,100,.65),
            rgba(211,178,100,.22),
            transparent
        );

    box-shadow:
        0 3px 12px rgba(193,157,82,.08);
}


/* =========================================================
   SUBTLE FLOOR PATTERN
   ========================================================= */

.games-chamber::after {

    opacity: .42;

    background:
        repeating-linear-gradient(
            90deg,
            transparent 0,
            transparent 80px,
            rgba(190,155,82,.06) 81px,
            transparent 82px
        ),
        repeating-linear-gradient(
            to bottom,
            transparent 0,
            transparent 27px,
            rgba(184,151,81,.08) 28px,
            transparent 29px
        );
}


/* =========================================================
   KEEP ALL DECORATION BEHIND GAMES
   ========================================================= */

.games-chamber .portal-grid,
.games-chamber .portal-station,
.games-chamber .portal-btn,
.games-chamber .portal-label {
    z-index: 5;
}
/* =========================================================
   STRONG EGYPTIAN SYMBOLS
   GAMES CHAMBER
   ========================================================= */

.games-egypt-symbols {
    position: absolute;
    inset: 0;

    z-index: 2;

    pointer-events: none;
}


/* =========================================================
   BASE SYMBOL
   ========================================================= */

.egypt-symbol {
    position: absolute;

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

    font-family:
        "Times New Roman",
        serif;

    color: #d6b568;

    text-shadow:
        0 0 6px rgba(214,181,104,.55),
        0 0 18px rgba(214,181,104,.25);

    opacity: .9;

    filter:
        drop-shadow(0 5px 8px rgba(0,0,0,.7));
}


/* =========================================================
   LEFT SIDE
   ========================================================= */

.symbol-left-top {
    left: 9%;
    top: 270px;

    font-size: 72px;
}


.symbol-left-mid {
    left: 12%;
    top: 430px;

    font-size: 58px;
}


.symbol-left-bottom {
    left: 9%;
    top: 590px;

    font-size: 66px;
}


/* =========================================================
   RIGHT SIDE
   ========================================================= */

.symbol-right-top {
    right: 9%;
    top: 270px;

    font-size: 72px;
}


.symbol-right-mid {
    right: 12%;
    top: 430px;

    font-size: 62px;
}


.symbol-right-bottom {
    right: 9%;
    top: 590px;

    font-size: 66px;
}


/* =========================================================
   TOP CENTER SUN
   ========================================================= */

.symbol-center-top {
    left: 50%;
    top: 205px;

    transform:
        translateX(-50%);

    font-size: 58px;

    opacity: .95;
}


/* =========================================================
   GEOMETRIC SIDE DIAMONDS
   ========================================================= */

.egypt-diamond {
    position: absolute;

    width: 85px;
    height: 85px;

    border:
        2px solid rgba(210,176,99,.55);

    transform:
        rotate(45deg);

    box-shadow:
        0 0 15px rgba(210,176,99,.10);

    opacity: .8;
}


.diamond-left {
    left: 18%;
    top: 450px;
}


.diamond-right {
    right: 18%;
    top: 450px;
}


/* =========================================================
   INNER DIAMOND
   ========================================================= */

.egypt-diamond::before {
    content: "";

    position: absolute;

    inset: 13px;

    border:
        1px solid rgba(210,176,99,.55);
}


/* =========================================================
   CROSS TEMPLE LINES
   ========================================================= */

.egypt-diamond::after {
    content: "";

    position: absolute;

    left: 50%;
    top: -25px;

    width: 1px;
    height: 135px;

    background:
        linear-gradient(
            to bottom,
            transparent,
            rgba(210,176,99,.5),
            transparent
        );

    transform:
        translateX(-50%)
        rotate(-45deg);
}


/* =========================================================
   DECORATIVE HORIZONTAL SYMBOL LINE
   ========================================================= */

.games-egypt-symbols::before {
    content:
        "𓋹   𓆣   𓂀   𓇳   𓅃   𓂀   𓆣   𓋹";

    position: absolute;

    left: 50%;
    top: 165px;

    transform:
        translateX(-50%);

    width: 85%;

    text-align: center;

    font-family:
        "Times New Roman",
        serif;

    font-size: 25px;

    letter-spacing: 14px;

    color: #cba95f;

    opacity: .65;

    white-space: nowrap;

    text-shadow:
        0 0 8px rgba(203,169,95,.35);
}


/* =========================================================
   DECORATIVE LOWER LINE
   ========================================================= */

.games-egypt-symbols::after {
    content:
        "𓂀        𓋹        𓆣        𓇳        𓅃";

    position: absolute;

    left: 50%;
    bottom: 80px;

    transform:
        translateX(-50%);

    width: 80%;

    text-align: center;

    font-family:
        "Times New Roman",
        serif;

    font-size: 24px;

    letter-spacing: 12px;

    color: #cba95f;

    opacity: .55;

    white-space: nowrap;
}
/* =========================================================
   GAMES CHAMBER — ROYAL EGYPTIAN GAME PORTAL
   CARD / PORTAL REDESIGN
   ========================================================= */

.games-chamber .portal-btn {

    width: 310px;
    height: 330px;

    position: relative;

    background: transparent !important;

    border: none !important;

    overflow: visible !important;

    isolation: isolate;

    filter:
        drop-shadow(0 18px 20px rgba(0,0,0,.65));

    transition:
        transform .45s ease,
        filter .45s ease;
}


/* =========================================================
   MAIN STONE TABLET
   ========================================================= */

.games-chamber .portal-btn::before {

    content: "";

    position: absolute;

    left: 50%;
    top: 50%;

    width: 252px;
    height: 292px;

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

    background:

        linear-gradient(
            90deg,
            rgba(8,6,3,.35),
            transparent 12%,
            transparent 88%,
            rgba(8,6,3,.35)
        ),

        linear-gradient(
            180deg,
            #3d3020 0%,
            #292015 45%,
            #18110a 100%
        );

    border:
        2px solid #b99a59;

    border-radius:
        125px 125px 10px 10px;

    box-shadow:

        0 18px 30px rgba(0,0,0,.72),

        inset 0 0 0 5px rgba(12,9,5,.65),

        inset 0 0 0 7px rgba(187,153,82,.18),

        inset 0 0 30px rgba(0,0,0,.65);

    z-index: 0;

    transition:
        border-color .4s ease,
        box-shadow .4s ease,
        transform .4s ease;
}


/* =========================================================
   INNER TEMPLE PANEL
   ========================================================= */

.games-chamber .portal-btn::after {

    content: "";

    position: absolute;

    left: 50%;
    top: 50%;

    width: 222px;
    height: 264px;

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

    border-radius:
        111px 111px 5px 5px;

    background:

        radial-gradient(
            ellipse at 50% 30%,
            rgba(192,158,86,.10),
            transparent 48%
        ),

        linear-gradient(
            180deg,
            rgba(7,5,3,.35),
            rgba(4,3,2,.78)
        );

    border:
        1px solid rgba(198,164,91,.35);

    box-shadow:
        inset 0 0 35px rgba(0,0,0,.85);

    z-index: 1;

    pointer-events: none;
}


/* =========================================================
   DECORATIVE CORNER MARKS
   ========================================================= */

.games-chamber .portal-figure::before {

    content: "𓂀";

    position: absolute;

    left: 50%;
    top: 8px;

    transform:
        translateX(-50%);

    font-family: serif;

    font-size: 22px;

    color: #c9a75d;

    opacity: .65;

    text-shadow:
        0 0 8px rgba(201,167,93,.25);

    z-index: 8;

    pointer-events: none;
}


/* =========================================================
   GAME ART
   ========================================================= */

.games-chamber .portal-figure {

    position: relative;

    z-index: 5;

    width: 270px;
    height: 300px;

    filter:
        drop-shadow(0 10px 12px rgba(0,0,0,.7));

    transition:
        transform .45s ease,
        filter .45s ease;
}


/* =========================================================
   GAME SYMBOL — CARVED GOLD
   ========================================================= */

.games-chamber .game-symbol {

    stroke: #e1c577 !important;

    stroke-width: 3 !important;

    filter:
        drop-shadow(0 2px 2px rgba(0,0,0,.8));

    transition:
        stroke .35s ease,
        stroke-width .35s ease,
        filter .35s ease;
}


/* =========================================================
   GAME FRAME
   ========================================================= */

.games-chamber .game-icon-frame {

    fill:
        rgba(16,12,7,.55) !important;

    stroke:
        #c5a45e !important;

    stroke-width:
        2.2 !important;

    filter:
        drop-shadow(0 4px 5px rgba(0,0,0,.55)) !important;

    transition:
        stroke .35s ease,
        fill .35s ease,
        filter .35s ease;
}


/* =========================================================
   EGYPTIAN LABEL PLAQUE
   ========================================================= */

.games-chamber .portal-label {

    bottom: -7px;

    min-width: 180px;

    padding: 11px 28px;

    color: #e0c27e !important;

    font-family: "Cinzel", serif;

    font-size: 13px;

    font-weight: 600;

    letter-spacing: .17em;

    text-align: center;

    background:
        linear-gradient(
            180deg,
            #4a3922,
            #1b1209
        ) !important;

    border:
        1px solid #b89550 !important;

    border-radius: 2px;

    box-shadow:

        0 8px 16px rgba(0,0,0,.7),

        inset 0 1px 0 rgba(238,208,137,.18);

    z-index: 15;

    transition:
        transform .35s ease,
        border-color .35s ease,
        background .35s ease;
}


/* =========================================================
   PLAQUE SIDE ORNAMENTS
   ========================================================= */

.games-chamber .portal-label::before,
.games-chamber .portal-label::after {

    width: 16px;
    height: 16px;

    top: 50%;

    background: transparent;

    border:
        1px solid rgba(204,170,95,.65);

    transform:
        translateY(-50%)
        rotate(45deg);
}


.games-chamber .portal-label::before {
    right: calc(100% + 7px);
}


.games-chamber .portal-label::after {
    left: calc(100% + 7px);
}


/* =========================================================
   HOVER — STONE COMES ALIVE
   ========================================================= */

.games-chamber .portal-station:hover .portal-btn {

    transform:
        translateY(-9px);

    filter:
        drop-shadow(0 23px 25px rgba(0,0,0,.78));
}


.games-chamber .portal-station:hover .portal-btn::before {

    border-color:
        #d7b86d;

    box-shadow:

        0 22px 34px rgba(0,0,0,.8),

        inset 0 0 0 5px rgba(12,9,5,.55),

        inset 0 0 0 7px rgba(213,180,105,.24),

        inset 0 0 35px rgba(0,0,0,.6);
}


.games-chamber .portal-station:hover .portal-figure {

    transform:
        scale(1.025);

    filter:
        drop-shadow(0 13px 16px rgba(0,0,0,.8));
}


.games-chamber .portal-station:hover .game-icon-frame {

    stroke:
        #edd28d !important;

    filter:
        drop-shadow(0 0 7px rgba(218,184,102,.22)) !important;
}


.games-chamber .portal-station:hover .game-symbol {

    stroke:
        #f1d99b !important;
}


/* =========================================================
   HOVER LABEL
   ========================================================= */

.games-chamber .portal-station:hover .portal-label {

    transform:
        translateX(-50%)
        translateY(3px);

    border-color:
        #d7b86d !important;

    background:
        linear-gradient(
            180deg,
            #554126,
            #24170b
        ) !important;
}
/* =========================================================
   GU LIBRARY — GAMES CHAMBER
   FINAL GAME PORTAL LOOK
   DARK ANTIQUE STONE + EGYPTIAN ICONS
   ========================================================= */


/* =========================================================
   1 — DARK STONE PORTAL
   ========================================================= */

.games-chamber .portal-btn::before {

    background:
        linear-gradient(
            145deg,
            #3a3021 0%,
            #292116 38%,
            #17120c 72%,
            #0d0905 100%
        ) !important;

    border:
        2px solid #8e7546 !important;

    border-bottom:
        1px solid #6f5a36 !important;

    box-shadow:

        0 20px 35px rgba(0,0,0,.78),

        inset 0 0 0 4px rgba(8,6,3,.75),

        inset 0 0 0 6px rgba(159,130,72,.12),

        inset 0 0 35px rgba(0,0,0,.78);
}


/* =========================================================
   2 — DARK INNER PORTAL
   ========================================================= */

.games-chamber .portal-btn::after {

    background:

        radial-gradient(
            ellipse at 50% 28%,
            rgba(174,143,76,.08),
            transparent 45%
        ),

        linear-gradient(
            180deg,
            rgba(17,13,8,.38),
            rgba(4,3,2,.88)
        ) !important;

    box-shadow:
        inset 0 0 40px rgba(0,0,0,.92) !important;
}


/* =========================================================
   3 — GAME FRAME
   ========================================================= */

.games-chamber .game-icon-frame {

    fill:
        rgba(8,6,3,.22) !important;

    stroke:
        #987d49 !important;

    stroke-width:
        2.2 !important;

    filter:
        drop-shadow(
            0 3px 5px rgba(0,0,0,.85)
        ) !important;
}


/* =========================================================
   4 — GAME ICON
   ========================================================= */

.games-chamber .game-symbol {

    color:
        #b99b60 !important;

    stroke:
        #b99b60 !important;

    stroke-width:
        3.2 !important;

    stroke-linecap:
        round;

    stroke-linejoin:
        round;

    filter:
        drop-shadow(
            0 2px 2px rgba(0,0,0,.9)
        ) !important;
}


/* =========================================================
   5 — X & O
   ========================================================= */

.games-chamber .portal-xo .game-icon-frame {

    stroke:
        #907543 !important;
}

.games-chamber .portal-xo .game-symbol {

    color:
        #b69a5d !important;

    stroke:
        #b69a5d !important;
}


/* =========================================================
   6 — MUMMY RUNNER
   ========================================================= */

.games-chamber .portal-runner .game-icon-frame {

    stroke:
        #8b7040 !important;
}

.games-chamber .portal-runner .game-symbol {

    color:
        #c0a878 !important;

    stroke:
        #c0a878 !important;
}


/* =========================================================
   7 — CHESS
   ========================================================= */

.games-chamber .portal-chess .game-icon-frame {

    stroke:
        #80683d !important;
}

.games-chamber .portal-chess .game-symbol {

    color:
        #ad9054 !important;

    stroke:
        #ad9054 !important;
}


/* =========================================================
   8 — GAME LABEL
   ========================================================= */

.games-chamber .portal-label {

    color:
        #c2a66a !important;

    background:
        linear-gradient(
            180deg,
            #332819,
            #151008
        ) !important;

    border:
        1px solid rgba(151,124,70,.65) !important;

    box-shadow:
        0 7px 16px rgba(0,0,0,.7),

        inset 0 1px 0
        rgba(203,171,101,.08);

    letter-spacing:
        .15em;
}


/* =========================================================
   9 — GAME BASE
   ========================================================= */

.games-chamber .portal-station::before {

    background:
        linear-gradient(
            90deg,
            transparent,
            rgba(156,128,70,.65),
            transparent
        ) !important;

    opacity:
        .7;
}


/* =========================================================
   10 — HOVER
   ========================================================= */

.games-chamber .portal-station:hover .portal-btn {

    transform:
        translateY(-12px);
}


.games-chamber .portal-station:hover .portal-btn::before {

    border-color:
        #b29459 !important;

    box-shadow:

        0 25px 40px rgba(0,0,0,.82),

        0 0 22px rgba(178,148,83,.08),

        inset 0 0 0 4px rgba(7,5,3,.72),

        inset 0 0 35px rgba(0,0,0,.65);
}


.games-chamber .portal-station:hover .game-icon-frame {

    stroke:
        #c5a96b !important;

    stroke-width:
        2.7 !important;
}


.games-chamber .portal-station:hover .game-symbol {

    color:
        #d0b574 !important;

    stroke:
        #d0b574 !important;

    filter:
        drop-shadow(
            0 0 5px rgba(207,177,104,.18)
        ) !important;
}


.games-chamber .portal-station:hover .portal-label {

    color:
        #dec58d !important;

    border-color:
        rgba(203,170,99,.8) !important;

    background:
        linear-gradient(
            180deg,
            #44351f,
            #1d140a
        ) !important;
}


/* =========================================================
   11 — REMOVE NEON
   ========================================================= */

.games-chamber .portal-figure,
.games-chamber .game-icon-frame,
.games-chamber .game-symbol,
.games-chamber .portal-label {

    text-shadow:
        none !important;
}


/* =========================================================
   12 — KEEP ICONS CLEAR
   ========================================================= */

.games-chamber .portal-figure {

    width:
        280px !important;

    height:
        305px !important;

    filter:
        drop-shadow(
            0 13px 16px rgba(0,0,0,.78)
        ) !important;
}


/* =========================================================
   13 — MOBILE
   ========================================================= */

@media (max-width: 800px) {

    .games-chamber .portal-figure {

        width:
            200px !important;

        height:
            225px !important;
    }

    .games-chamber .game-symbol {

        stroke-width:
            3 !important;
    }
}
/* =========================================================
   GAMES CHAMBER — FINAL DARK STONE COLORS
   ONLY COLORS — NO POSITION CHANGES
   ========================================================= */

/* خلفية البوابة نفسها */
.games-chamber .portal-btn::before {
    background:
        linear-gradient(
            145deg,
            #403728 0%,
            #2b2419 38%,
            #19140d 72%,
            #0c0905 100%
        ) !important;

    border-color: #806a40 !important;

    box-shadow:
        0 20px 35px rgba(0,0,0,.78),
        inset 0 0 25px rgba(0,0,0,.75) !important;
}


/* داخل البوابة */
.games-chamber .portal-btn::after {
    background:
        radial-gradient(
            ellipse at 50% 30%,
            rgba(130,105,58,.10),
            transparent 48%
        ),
        linear-gradient(
            180deg,
            rgba(18,14,9,.35),
            rgba(4,3,2,.90)
        ) !important;

    box-shadow:
        inset 0 0 40px rgba(0,0,0,.95) !important;
}


/* الدائرة/الإطار اللي حوالين اللعبة */
.games-chamber .game-icon-frame {
    fill: rgba(8,6,3,.35) !important;
    stroke: #927848 !important;
    filter:
        drop-shadow(0 3px 5px rgba(0,0,0,.85)) !important;
}


/* الأيقونة نفسها */
.games-chamber .game-symbol {
    color: #b59a61 !important;
    stroke: #b59a61 !important;

    filter:
        drop-shadow(0 2px 3px rgba(0,0,0,.9)) !important;
}


/* X & O */
.games-chamber .portal-xo .game-icon-frame {
    stroke: #80683e !important;
}

.games-chamber .portal-xo .game-symbol {
    color: #b3975b !important;
    stroke: #b3975b !important;
}


/* Mummy Runner */
.games-chamber .portal-runner .game-icon-frame {
    stroke: #8b7549 !important;
}

.games-chamber .portal-runner .game-symbol {
    color: #bca778 !important;
    stroke: #bca778 !important;
}


/* Chess */
.games-chamber .portal-chess .game-icon-frame {
    stroke: #75603a !important;
}

.games-chamber .portal-chess .game-symbol {
    color: #a98b52 !important;
    stroke: #a98b52 !important;
}


/* أسماء الألعاب */
.games-chamber .portal-label {
    color: #c1a66b !important;

    background:
        linear-gradient(
            180deg,
            #35291a,
            #151008
        ) !important;

    border-color:
        rgba(145,118,66,.65) !important;
}


/* Hover فقط */
.games-chamber .portal-station:hover .game-icon-frame {
    stroke: #c3a66a !important;
}

.games-chamber .portal-station:hover .game-symbol {
    color: #d0b477 !important;
    stroke: #d0b477 !important;
}
/* =========================================================
   GAMES CHAMBER — MUTED ANTIQUE GOLD
   ONLY COLORS — NO SIZE / POSITION CHANGES
   ========================================================= */

/* الإطار الخارجي */
.games-chamber .game-icon-frame {
    stroke: #806b43 !important;
    fill: rgba(12, 9, 5, .30) !important;

    filter:
        drop-shadow(0 2px 4px rgba(0,0,0,.85)) !important;
}


/* الرموز نفسها */
.games-chamber .game-symbol {
    color: #9a8254 !important;
    stroke: #9a8254 !important;

    filter:
        drop-shadow(0 2px 2px rgba(0,0,0,.9)) !important;
}


/* =========================================================
   X & O
   ========================================================= */

.games-chamber .portal-xo .game-icon-frame {
    stroke: #79633d !important;
}

.games-chamber .portal-xo .game-symbol {
    color: #947b4d !important;
    stroke: #947b4d !important;
}


/* =========================================================
   MUMMY RUNNER
   ========================================================= */

.games-chamber .portal-runner .game-icon-frame {
    stroke: #806b45 !important;
}

.games-chamber .portal-runner .game-symbol {
    color: #9c875d !important;
    stroke: #9c875d !important;
}


/* =========================================================
   CHESS
   ========================================================= */

.games-chamber .portal-chess .game-icon-frame {
    stroke: #735d39 !important;
}

.games-chamber .portal-chess .game-symbol {
    color: #8f7548 !important;
    stroke: #8f7548 !important;
}


/* =========================================================
   HOVER — STILL SUBTLE
   ========================================================= */

.games-chamber .portal-station:hover .game-icon-frame {
    stroke: #a38b5a !important;
}

.games-chamber .portal-station:hover .game-symbol {
    color: #ad9563 !important;
    stroke: #ad9563 !important;

    filter:
        drop-shadow(0 0 3px rgba(163,137,82,.12)) !important;
}
/* =========================================================
   GAMES CHAMBER — FINAL SOFT ANTIQUE PALETTE
   COLORS ONLY — NO SIZE / POSITION CHANGES
   ========================================================= */

/* ---------------------------------------------------------
   1. PORTAL STONE
   --------------------------------------------------------- */

.games-chamber .portal-btn::before {
    background:
        linear-gradient(
            145deg,
            #332c21 0%,
            #272117 42%,
            #17130d 75%,
            #0c0906 100%
        ) !important;

    border-color: #65583e !important;

    box-shadow:
        0 20px 35px rgba(0,0,0,.78),
        inset 0 0 25px rgba(0,0,0,.78) !important;
}


/* ---------------------------------------------------------
   2. INNER PORTAL
   --------------------------------------------------------- */

.games-chamber .portal-btn::after {
    background:
        radial-gradient(
            ellipse at 50% 30%,
            rgba(116,96,59,.08),
            transparent 48%
        ),
        linear-gradient(
            180deg,
            rgba(16,13,9,.38),
            rgba(3,3,2,.92)
        ) !important;

    border-color:
        rgba(120,101,65,.24) !important;

    box-shadow:
        inset 0 0 40px rgba(0,0,0,.96) !important;
}


/* ---------------------------------------------------------
   3. GAME ICON CIRCLE
   --------------------------------------------------------- */

.games-chamber .game-icon-frame {
    fill:
        rgba(7,6,4,.42) !important;

    stroke:
        #75664a !important;

    stroke-width:
        2.2 !important;

    filter:
        drop-shadow(
            0 3px 5px rgba(0,0,0,.9)
        ) !important;
}


/* ---------------------------------------------------------
   4. GAME SYMBOL
   VERY SOFT ANTIQUE BEIGE
   --------------------------------------------------------- */

.games-chamber .game-symbol {
    fill: none !important;

    stroke:
        #a99772 !important;

    stroke-width:
        2.8 !important;

    stroke-linecap:
        round !important;

    stroke-linejoin:
        round !important;

    filter:
        drop-shadow(
            0 2px 2px rgba(0,0,0,.95)
        ) !important;
}


/* ---------------------------------------------------------
   5. X & O
   --------------------------------------------------------- */

.games-chamber .portal-xo .game-icon-frame {
    stroke:
        #756247 !important;
}

.games-chamber .portal-xo .game-symbol {
    stroke:
        #aa9978 !important;
}


/* ---------------------------------------------------------
   6. MUMMY RUNNER
   Slightly warmer stone tone
   --------------------------------------------------------- */

.games-chamber .portal-runner .game-icon-frame {
    stroke:
        #78684d !important;
}

.games-chamber .portal-runner .game-symbol {
    stroke:
        #b1a384 !important;
}


/* ---------------------------------------------------------
   7. CHESS
   Darkest / most muted
   --------------------------------------------------------- */

.games-chamber .portal-chess .game-icon-frame {
    stroke:
        #6c5c43 !important;
}

.games-chamber .portal-chess .game-symbol {
    stroke:
        #9f9172 !important;
}


/* ---------------------------------------------------------
   8. GAME NAME PLAQUE
   --------------------------------------------------------- */

.games-chamber .portal-label {
    color:
        #b5a47f !important;

    background:
        linear-gradient(
            180deg,
            #30271b,
            #14100a
        ) !important;

    border-color:
        rgba(117,99,65,.65) !important;

    box-shadow:
        0 8px 17px rgba(0,0,0,.72),
        inset 0 1px 0 rgba(180,158,111,.06) !important;
}


/* ---------------------------------------------------------
   9. BASE LINE
   --------------------------------------------------------- */

.games-chamber .portal-station::before {
    background:
        linear-gradient(
            90deg,
            transparent,
            rgba(117,98,63,.45),
            transparent
        ) !important;

    opacity:
        .55 !important;
}


/* ---------------------------------------------------------
   10. EGYPTIAN DECORATIONS
   MUTED — NOT BRIGHT GOLD
   --------------------------------------------------------- */

.games-chamber .hieroglyph,
.games-chamber .egypt-symbol {
    color:
        #8f8062 !important;

    text-shadow:
        0 0 5px rgba(120,105,75,.15) !important;
}


.games-chamber .hieroglyph-strip {
    color:
        #817354 !important;

    opacity:
        .32 !important;
}


.games-chamber .sun-disc {
    color:
        #96845f !important;

    border-color:
        rgba(135,116,76,.38) !important;
}


/* ---------------------------------------------------------
   11. CENTRAL EGYPTIAN SYMBOL
   --------------------------------------------------------- */

.games-chamber .portal-grid::before {
    color:
        #9b8961 !important;

    border-color:
        rgba(130,111,73,.30) !important;

    opacity:
        .42 !important;
}


.games-chamber .portal-grid::after {
    border-color:
        rgba(125,106,70,.18) !important;
}


/* ---------------------------------------------------------
   12. DECORATIVE LINES
   --------------------------------------------------------- */

.games-chamber::before {
    border-color:
        rgba(125,105,68,.22) !important;
}


.games-chamber .pharaoh-left::after,
.games-chamber .pharaoh-right::after {
    background:
        linear-gradient(
            to bottom,
            transparent,
            rgba(125,105,68,.22),
            transparent
        ) !important;
}


/* ---------------------------------------------------------
   13. HOVER
   STILL SOFT
   --------------------------------------------------------- */

.games-chamber .portal-station:hover .game-icon-frame {
    stroke:
        #b6a57f !important;

    filter:
        drop-shadow(
            0 0 5px rgba(160,140,95,.14)
        ) !important;
}


.games-chamber .portal-station:hover .game-symbol {
    stroke:
        #c0b18f !important;

    filter:
        drop-shadow(
            0 0 4px rgba(170,150,105,.12)
        ) !important;
}


.games-chamber .portal-station:hover .portal-label {
    color:
        #c0b18f !important;

    border-color:
        rgba(150,130,88,.55) !important;

    background:
        linear-gradient(
            180deg,
            #3a3020,
            #18120a
        ) !important;
}


/* ---------------------------------------------------------
   14. REMOVE GOLD GLOW COMPLETELY
   --------------------------------------------------------- */

.games-chamber .portal-figure,
.games-chamber .game-icon-frame,
.games-chamber .game-symbol,
.games-chamber .portal-label {
    text-shadow: none !important;
}
/* =========================================================
   GAMES CHAMBER — CALM RED GAME ICONS
   ICONS ONLY — NO CARD / BACKGROUND CHANGES
   ========================================================= */

/* الإطار حوالين الأيقونة — هادي ومحايد */
.games-chamber .game-icon-frame {
    stroke: #75604a !important;
}


/* =========================================================
   X & O — DEEP BURGUNDY
   ========================================================= */

.games-chamber .portal-xo .game-symbol {
    stroke: #9b4b46 !important;
    color: #9b4b46 !important;

    filter:
        drop-shadow(0 2px 2px rgba(0,0,0,.8)) !important;
}


/* =========================================================
   MUMMY RUNNER — MUTED TERRACOTTA RED
   ========================================================= */

.games-chamber .portal-runner .game-symbol {
    stroke: #a65c4e !important;
    color: #a65c4e !important;

    filter:
        drop-shadow(0 2px 2px rgba(0,0,0,.8)) !important;
}


/* =========================================================
   CHESS — DARK WINE RED
   ========================================================= */

.games-chamber .portal-chess .game-symbol {
    stroke: #86433f !important;
    color: #86433f !important;

    filter:
        drop-shadow(0 2px 2px rgba(0,0,0,.8)) !important;
}


/* =========================================================
   HOVER — SLIGHTLY BRIGHTER ONLY
   ========================================================= */

.games-chamber .portal-station:hover .portal-xo .game-symbol {
    stroke: #b7655e !important;
}

.games-chamber .portal-station:hover .portal-runner .game-symbol {
    stroke: #bd7464 !important;
}

.games-chamber .portal-station:hover .portal-chess .game-symbol {
    stroke: #a85b55 !important;
}
/* =========================================================
   REAL GAME ICONS
   ICON ONLY — CARD REMAINS UNCHANGED
   ========================================================= */

.games-chamber .real-game-icon {
    color: #9f4b48;
}


/* X & O */
.games-chamber .xo-icon {
    color: #984642;
}


/* Mummy Runner */
.games-chamber .mummy-icon {
    color: #a4574d;
}


/* Chess */
.games-chamber .chess-icon {
    color: #8d403e;
}


/* Soft hover */
.games-chamber .portal-station:hover .xo-icon {
    color: #ad5752;
}

.games-chamber .portal-station:hover .mummy-icon {
    color: #b7685c;
}

.games-chamber .portal-station:hover .chess-icon {
    color: #a34f4b;
}
/* =========================================================
   ONLY CHANGE GAME ICON COLOR
   SHAPE / SIZE / CARD / FRAME = UNCHANGED
   ========================================================= */

.games-chamber .game-symbol {
    stroke: #914642 !important;
    color: #914642 !important;
    filter: none !important;
}

/* X & O */
.games-chamber .portal-xo .game-symbol {
    stroke: #914642 !important;
}

/* Mummy Runner */
.games-chamber .portal-runner .game-symbol {
    stroke: #9b5149 !important;
}

/* Chess */
.games-chamber .portal-chess .game-symbol {
    stroke: #85403d !important;
}

/* Hover — نفس الأحمر، أفتح درجة بسيطة فقط */
.games-chamber .portal-station:hover .game-symbol {
    filter: none !important;
}

.games-chamber .portal-station:hover .portal-xo .game-symbol {
    stroke: #a9534e !important;
}

.games-chamber .portal-station:hover .portal-runner .game-symbol {
    stroke: #ad5c53 !important;
}

.games-chamber .portal-station:hover .portal-chess .game-symbol {
    stroke: #9b4945 !important;
}
/* =========================================================
   GAME ICON COLOR — FINAL
   ONLY THE ACTUAL ICON
   ========================================================= */

/* X & O */
.games-chamber .portal-xo .game-symbol path,
.games-chamber .portal-xo .game-symbol circle {
    stroke: #9a4542 !important;
    fill: none !important;
    filter: none !important;
}


/* MUMMY RUNNER */
.games-chamber .portal-runner .game-symbol path,
.games-chamber .portal-runner .game-symbol circle {
    stroke: #a6534b !important;
    fill: none !important;
    filter: none !important;
}


/* CHESS */
.games-chamber .portal-chess .game-symbol path {
    stroke: #8b3f3d !important;
    fill: none !important;
    filter: none !important;
}


/* احتياطي — يمنع أي قاعدة قديمة من إعادة الذهبي */
.games-chamber .game-symbol path,
.games-chamber .game-symbol circle,
.games-chamber .game-symbol ellipse {
    stroke-width: inherit !important;
}


/* ممنوع Glow ذهبي على الأيقونة */
.games-chamber .game-symbol {
    filter: none !important;
}


/* Hover لا يرجع اللون الذهبي */
.games-chamber .portal-station:hover .game-symbol path,
.games-chamber .portal-station:hover .game-symbol circle {
    filter: none !important;
}

.games-chamber .portal-station:hover .portal-xo .game-symbol path,
.games-chamber .portal-station:hover .portal-xo .game-symbol circle {
    stroke: #a6534f !important;
}

.games-chamber .portal-station:hover .portal-runner .game-symbol path,
.games-chamber .portal-station:hover .portal-runner .game-symbol circle {
    stroke: #b25d54 !important;
}

.games-chamber .portal-station:hover .portal-chess .game-symbol path {
    stroke: #984845 !important;
}
/* =========================================================
   GAMES CHAMBER
   FINAL GAME ICON COLORS ONLY
   NO CARD / NO FRAME / NO LABEL CHANGES
   ========================================================= */


/* ---------------------------------------------------------
   BASE ICON
   --------------------------------------------------------- */

.games-chamber .game-symbol {
    fill: none !important;

    stroke: #b97858 !important;

    stroke-width: 3.2 !important;

    stroke-linecap: round !important;
    stroke-linejoin: round !important;

    filter:
        drop-shadow(0 2px 3px rgba(0,0,0,.75)) !important;
}


/* ---------------------------------------------------------
   X & O
   MUTED TERRACOTTA / COPPER
   --------------------------------------------------------- */

.games-chamber .portal-xo .game-symbol {
    stroke: #b96f52 !important;

    filter:
        drop-shadow(0 2px 3px rgba(0,0,0,.75)) !important;
}


/* ---------------------------------------------------------
   MUMMY RUNNER
   WARM SAND / OLD PAPYRUS
   --------------------------------------------------------- */

.games-chamber .portal-runner .game-symbol {
    stroke: #c19a68 !important;

    filter:
        drop-shadow(0 2px 3px rgba(0,0,0,.75)) !important;
}


/* ---------------------------------------------------------
   CHESS
   MUTED EGYPTIAN TURQUOISE
   --------------------------------------------------------- */

.games-chamber .portal-chess .game-symbol {
    stroke: #78968c !important;

    filter:
        drop-shadow(0 2px 3px rgba(0,0,0,.75)) !important;
}


/* ---------------------------------------------------------
   HOVER
   KEEP THE SAME COLORS
   NO GOLD FLASH
   --------------------------------------------------------- */

.games-chamber .portal-station:hover .portal-xo .game-symbol {
    stroke: #c47a5a !important;
}

.games-chamber .portal-station:hover .portal-runner .game-symbol {
    stroke: #cdaa76 !important;
}

.games-chamber .portal-station:hover .portal-chess .game-symbol {
    stroke: #86a69b !important;
}
/* =========================================================
   GAMES HALL — FINAL VISUAL OVERRIDE
   Cyan + Ancient Gold / NO RED / NO WHITE GLOW
   Add this at the VERY END of your CSS
========================================================= */

/* ---------- GAME CARDS ---------- */

.games-chamber .game-card,
.games-chamber .portal-card,
.games-chamber .game-portal {
  position: relative;
  transform: translateY(0);
  transition:
    transform 0.55s cubic-bezier(.2,.8,.2,1),
    filter 0.55s ease,
    border-color 0.45s ease,
    box-shadow 0.55s ease;

  /* subtle idle movement */
  animation: gameCardFloat 5s ease-in-out infinite;

  will-change: transform, filter;
}

/* Don't let the 3 cards move together */
.games-chamber .game-card:nth-child(2),
.games-chamber .portal-card:nth-child(2),
.games-chamber .game-portal:nth-child(2) {
  animation-delay: -1.6s;
}

.games-chamber .game-card:nth-child(3),
.games-chamber .portal-card:nth-child(3),
.games-chamber .game-portal:nth-child(3) {
  animation-delay: -3.2s;
}


/* ---------- CARD HOVER ---------- */

.games-chamber .game-card:hover,
.games-chamber .portal-card:hover,
.games-chamber .game-portal:hover {
  transform: translateY(-12px) scale(1.025);

  filter:
    brightness(1.12)
    saturate(1.12);

  box-shadow:
    0 18px 45px rgba(0,0,0,.55),
    0 0 18px rgba(77, 225, 211, .18),
    inset 0 0 22px rgba(214, 179, 106, .06);

  z-index: 10;
}


/* =========================================================
   CARD BORDER — GOLD + CYAN
========================================================= */

.games-chamber .game-card::before,
.games-chamber .portal-card::before,
.games-chamber .game-portal::before {
  content: "";
  position: absolute;
  inset: -1px;
  border-radius: inherit;

  background:
    linear-gradient(
      135deg,
      rgba(214,179,106,.65),
      rgba(77,225,211,.35),
      rgba(214,179,106,.15),
      rgba(77,225,211,.45),
      rgba(214,179,106,.65)
    );

  opacity: .42;
  pointer-events: none;

  transition:
    opacity .5s ease,
    filter .5s ease;

  z-index: -1;
}

.games-chamber .game-card:hover::before,
.games-chamber .portal-card:hover::before,
.games-chamber .game-portal:hover::before {
  opacity: .9;
  filter: drop-shadow(0 0 8px rgba(77,225,211,.22));
}


/* =========================================================
   REMOVE THE UGLY RED FROM GAME ICONS
========================================================= */

/* common SVG containers */
.games-chamber .game-icon,
.games-chamber .portal-icon,
.games-chamber .game-symbol,
.games-chamber .portal-symbol {
  color: #63e6d7 !important;
}


/* SVG itself */
.games-chamber .game-icon svg,
.games-chamber .portal-icon svg,
.games-chamber .game-symbol svg,
.games-chamber .portal-symbol svg {
  color: #63e6d7 !important;

  filter:
    drop-shadow(0 0 5px rgba(99,230,215,.28))
    drop-shadow(0 0 12px rgba(99,230,215,.10));

  transition:
    transform .55s cubic-bezier(.2,.8,.2,1),
    filter .55s ease;
}


/* SVG paths / shapes */
.games-chamber .game-icon svg *,
.games-chamber .portal-icon svg *,
.games-chamber .game-symbol svg *,
.games-chamber .portal-symbol svg {
  stroke: #63e6d7 !important;
  fill: none !important;
}


/* If your icons are made with fill instead of stroke */
.games-chamber .game-icon svg path,
.games-chamber .portal-icon svg path {
  stroke: #63e6d7 !important;
}


/* ---------- ICON HOVER ---------- */

.games-chamber .game-card:hover .game-icon svg,
.games-chamber .portal-card:hover .portal-icon svg,
.games-chamber .game-portal:hover svg {
  transform: scale(1.08) rotate(-2deg);

  filter:
    drop-shadow(0 0 7px rgba(99,230,215,.55))
    drop-shadow(0 0 18px rgba(99,230,215,.22));
}


/* =========================================================
   INNER GOLD FRAME
========================================================= */

.games-chamber .game-card::after,
.games-chamber .portal-card::after,
.games-chamber .game-portal::after {
  content: "";
  position: absolute;

  inset: 10px;

  border: 1px solid rgba(214,179,106,.22);

  border-radius: inherit;

  pointer-events: none;

  transition:
    border-color .45s ease,
    box-shadow .45s ease;
}

.games-chamber .game-card:hover::after,
.games-chamber .portal-card:hover::after,
.games-chamber .game-portal:hover::after {
  border-color: rgba(99,230,215,.30);

  box-shadow:
    inset 0 0 14px rgba(99,230,215,.045);
}


/* =========================================================
   TITLE PLATE
========================================================= */

.games-chamber .game-title,
.games-chamber .portal-title,
.games-chamber .game-label {
  color: #d8bd78 !important;

  text-shadow:
    0 1px 0 rgba(0,0,0,.8),
    0 0 7px rgba(214,179,106,.12);

  transition:
    color .4s ease,
    letter-spacing .4s ease,
    text-shadow .4s ease;
}

.games-chamber .game-card:hover .game-title,
.games-chamber .portal-card:hover .portal-title,
.games-chamber .game-portal:hover .game-label {
  color: #f0d995 !important;

  letter-spacing: .12em;

  text-shadow:
    0 0 8px rgba(214,179,106,.28);
}


/* =========================================================
   GOLD CORNERS / DECORATIONS
========================================================= */

.games-chamber .game-card .corner,
.games-chamber .portal-card .corner,
.games-chamber .game-portal .corner {
  border-color: rgba(214,179,106,.65) !important;
}


/* =========================================================
   VERY IMPORTANT:
   REMOVE WHITE / RED GLOW
========================================================= */

.games-chamber .game-card *,
.games-chamber .portal-card *,
.games-chamber .game-portal * {
  /* prevent generic white glow from inherited effects */
}


/* kill common red shadow colors */
.games-chamber .game-icon,
.games-chamber .portal-icon {
  box-shadow:
    none !important;
}


/* =========================================================
   SMALL LIVING LIGHT INSIDE EACH CARD
========================================================= */

.games-chamber .game-card .icon-container,
.games-chamber .portal-card .icon-container,
.games-chamber .game-portal .icon-container {
  position: relative;
}

.games-chamber .game-card .icon-container::after,
.games-chamber .portal-card .icon-container::after,
.games-chamber .game-portal .icon-container::after {
  content: "";

  position: absolute;
  left: 50%;
  top: 50%;

  width: 65px;
  height: 65px;

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

  border-radius: 50%;

  background: rgba(99,230,215,.07);

  box-shadow:
    0 0 22px rgba(99,230,215,.08);

  opacity: .55;

  animation: iconBreath 3.5s ease-in-out infinite;

  pointer-events: none;
}


/* =========================================================
   ANIMATIONS
========================================================= */

@keyframes gameCardFloat {

  0%,
  100% {
    transform: translateY(0);
  }

  50% {
    transform: translateY(-5px);
  }
}


@keyframes iconBreath {

  0%,
  100% {
    opacity: .30;
    transform: translate(-50%, -50%) scale(.92);
  }

  50% {
    opacity: .65;
    transform: translate(-50%, -50%) scale(1.08);
  }
}


/* =========================================================
   ACCESSIBILITY
========================================================= */

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

  .games-chamber .game-card,
  .games-chamber .portal-card,
  .games-chamber .game-portal,
  .games-chamber .game-card .icon-container::after,
  .games-chamber .portal-card .icon-container::after,
  .games-chamber .game-portal .icon-container::after {
    animation: none !important;
  }
}
/* =========================================================
   GAMES CARDS — PURPLE / CYAN / GOLD
   Hover Motion + Animated Glow
   ========================================================= */

.games-chamber .game-card {
  position: relative;
  overflow: hidden;
  isolation: isolate;

  /* ألوان جديدة */
  background:
    radial-gradient(
      circle at 50% 0%,
      rgba(90, 220, 255, 0.16),
      transparent 45%
    ),
    linear-gradient(
      145deg,
      rgba(45, 20, 85, 0.96),
      rgba(20, 28, 65, 0.97)
    );

  border: 1px solid rgba(92, 225, 255, 0.48);

  box-shadow:
    0 10px 30px rgba(0, 0, 0, 0.35),
    inset 0 0 25px rgba(115, 55, 190, 0.12);

  transition:
    transform 0.45s cubic-bezier(.2,.8,.2,1),
    box-shadow 0.45s ease,
    border-color 0.45s ease;
}


/* ---------------------------------------------------------
   Moving light inside the card
   --------------------------------------------------------- */

.games-chamber .game-card::before {
  content: "";
  position: absolute;
  z-index: -1;

  width: 45%;
  height: 180%;

  top: -40%;
  left: -70%;

  background: linear-gradient(
    90deg,
    transparent,
    rgba(255, 255, 255, 0.16),
    rgba(80, 220, 255, 0.18),
    transparent
  );

  transform: rotate(18deg);

  transition:
    left 0.8s ease;
}


/* ---------------------------------------------------------
   Soft animated glow
   --------------------------------------------------------- */

.games-chamber .game-card::after {
  content: "";
  position: absolute;
  inset: -2px;

  pointer-events: none;

  border-radius: inherit;

  box-shadow:
    0 0 0 rgba(70, 220, 255, 0);

  opacity: 0;

  transition:
    opacity 0.45s ease,
    box-shadow 0.45s ease;
}


/* ---------------------------------------------------------
   HOVER — card movement
   --------------------------------------------------------- */

.games-chamber .game-card:hover {
  transform: translateY(-10px) scale(1.025);

  border-color: rgba(92, 225, 255, 0.9);

  box-shadow:
    0 18px 40px rgba(0, 0, 0, 0.48),
    0 0 25px rgba(80, 210, 255, 0.22),
    0 0 55px rgba(125, 65, 220, 0.16),
    inset 0 0 30px rgba(100, 50, 190, 0.18);
}


/* الضوء يعدّي داخل الكارت */

.games-chamber .game-card:hover::before {
  left: 125%;
}


/* Glow يظهر */

.games-chamber .game-card:hover::after {
  opacity: 1;

  box-shadow:
    0 0 18px rgba(80, 220, 255, 0.28),
    0 0 38px rgba(125, 65, 220, 0.18);
}


/* =========================================================
   GAME ICON
   ========================================================= */

.games-chamber .game-card .game-icon,
.games-chamber .game-card .icon {
  transition:
    transform 0.45s cubic-bezier(.2,.8,.2,1),
    filter 0.45s ease;
}

.games-chamber .game-card:hover .game-icon,
.games-chamber .game-card:hover .icon {
  transform: translateY(-5px) scale(1.08);

  filter:
    drop-shadow(0 0 8px rgba(70, 220, 255, 0.65))
    drop-shadow(0 0 18px rgba(130, 70, 220, 0.4));
}


/* =========================================================
   GAME TITLE
   ========================================================= */

.games-chamber .game-card h3,
.games-chamber .game-card .game-title {
  color: #dffaff;

  transition:
    color 0.35s ease,
    text-shadow 0.35s ease,
    transform 0.35s ease;
}

.games-chamber .game-card:hover h3,
.games-chamber .game-card:hover .game-title {
  color: #ffffff;

  text-shadow:
    0 0 8px rgba(80, 220, 255, 0.75),
    0 0 18px rgba(130, 70, 220, 0.5);

  transform: translateY(-2px);
}


/* =========================================================
   GOLD DETAILS
   ========================================================= */

.games-chamber .game-card .gold,
.games-chamber .game-card .game-number {
  color: #e8c76a;

  text-shadow:
    0 0 8px rgba(232, 199, 106, 0.35);
}


/* =========================================================
   SMALL IDLE FLOAT
   حركة خفيفة جدًا للكروت وهي واقفة
   ========================================================= */

.games-chamber .game-card {
  animation: gameCardFloat 5s ease-in-out infinite;
}

.games-chamber .game-card:nth-child(2) {
  animation-delay: -1.2s;
}

.games-chamber .game-card:nth-child(3) {
  animation-delay: -2.4s;
}

.games-chamber .game-card:nth-child(4) {
  animation-delay: -3.6s;
}


@keyframes gameCardFloat {

  0%,
  100% {
    transform: translateY(0);
  }

  50% {
    transform: translateY(-3px);
  }
}


/* لما تعمل Hover نوقف الـfloat
   عشان حركة الـhover تبقى نظيفة */

.games-chamber .game-card:hover {
  animation-play-state: paused;
}


/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width: 700px) {

  .games-chamber .game-card:hover {
    transform: translateY(-5px) scale(1.015);
  }

}
/* =========================================================
   GAMES CHAMBER — REMOVE RED COMPLETELY
   NEW THEME: ROYAL PURPLE + CYAN + GOLD
   ========================================================= */

/* الكارت نفسه */
.games-chamber .game-card {
  background:
    radial-gradient(
      circle at 50% 10%,
      rgba(80, 220, 255, 0.20),
      transparent 42%
    ),
    radial-gradient(
      circle at 100% 100%,
      rgba(120, 55, 210, 0.20),
      transparent 50%
    ),
    linear-gradient(
      135deg,
      #17112f 0%,
      #21144a 48%,
      #101d3d 100%
    ) !important;

  border: 1px solid rgba(80, 220, 255, 0.65) !important;

  box-shadow:
    0 12px 35px rgba(0, 0, 0, 0.55),
    0 0 18px rgba(80, 220, 255, 0.12),
    inset 0 0 25px rgba(120, 55, 210, 0.16) !important;

  transition:
    transform .45s cubic-bezier(.2,.8,.2,1),
    box-shadow .45s ease,
    border-color .45s ease !important;
}


/* ---------------------------------------------------------
   امسح أي Glow أحمر قديم
   --------------------------------------------------------- */

.games-chamber .game-card,
.games-chamber .game-card *,
.games-chamber .game-card::before,
.games-chamber .game-card::after {
  --red: transparent !important;
}


/* ---------------------------------------------------------
   طبقة الإضاءة المتحركة
   --------------------------------------------------------- */

.games-chamber .game-card::before {
  content: "";
  position: absolute;

  top: -60%;
  left: -100%;

  width: 45%;
  height: 220%;

  background: linear-gradient(
    90deg,
    transparent,
    rgba(255,255,255,.08),
    rgba(70,220,255,.30),
    rgba(160,90,255,.18),
    transparent
  ) !important;

  transform: rotate(20deg);

  transition: left .85s ease;

  pointer-events: none;
}


/* ---------------------------------------------------------
   Hover
   --------------------------------------------------------- */

.games-chamber .game-card:hover {

  transform:
    translateY(-9px)
    scale(1.025) !important;

  border-color:
    rgba(90,230,255,.95) !important;

  box-shadow:
    0 20px 45px rgba(0,0,0,.55),
    0 0 22px rgba(70,220,255,.30),
    0 0 50px rgba(130,70,230,.20),
    inset 0 0 30px rgba(100,60,210,.18) !important;
}


.games-chamber .game-card:hover::before {
  left: 130%;
}


/* ---------------------------------------------------------
   العناوين
   --------------------------------------------------------- */

.games-chamber .game-card h1,
.games-chamber .game-card h2,
.games-chamber .game-card h3,
.games-chamber .game-card h4,
.games-chamber .game-card .game-title {

  color: #e9fbff !important;

  text-shadow:
    0 0 8px rgba(70,220,255,.45),
    0 0 18px rgba(130,70,230,.25) !important;
}


/* ---------------------------------------------------------
   كل النصوص الثانوية
   --------------------------------------------------------- */

.games-chamber .game-card p,
.games-chamber .game-card span {

  color: rgba(220,245,255,.82) !important;
}


/* ---------------------------------------------------------
   الأيقونات
   --------------------------------------------------------- */

.games-chamber .game-card svg {

  filter:
    drop-shadow(0 0 7px rgba(70,220,255,.55))
    drop-shadow(0 0 15px rgba(130,70,230,.35));

  transition:
    transform .4s ease,
    filter .4s ease;
}


.games-chamber .game-card:hover svg {

  transform:
    translateY(-5px)
    scale(1.08);

  filter:
    drop-shadow(0 0 10px rgba(70,230,255,.85))
    drop-shadow(0 0 22px rgba(140,70,240,.55));
}


/* ---------------------------------------------------------
   أي خطوط داخلية
   --------------------------------------------------------- */

.games-chamber .game-card hr {

  border-color:
    rgba(80,220,255,.30) !important;
}


/* ---------------------------------------------------------
   لو عندك عناصر فيها background أحمر
   --------------------------------------------------------- */

.games-chamber .game-card .glow,
.games-chamber .game-card .energy,
.games-chamber .game-card .card-glow,
.games-chamber .game-card .card-light {

  background:
    radial-gradient(
      circle,
      rgba(70,220,255,.22),
      rgba(120,60,220,.10),
      transparent 70%
    ) !important;

  box-shadow:
    none !important;
}


/* ---------------------------------------------------------
   GOLD — لمسات فرعونية فقط
   --------------------------------------------------------- */

.games-chamber .game-card .gold,
.games-chamber .game-card .accent {

  color: #e7c86a !important;

  text-shadow:
    0 0 8px rgba(231,200,106,.35) !important;
}
/* =========================================================
   GAMES CHAMBER — NEW VISUAL STYLE
   PURPLE + CYAN + ANTIQUE GOLD
   REAL PORTAL CLASSES
   ========================================================= */


/* =========================================================
   1 — PORTAL STONE
   ========================================================= */

.games-chamber .portal-btn::before {

    background:
        radial-gradient(
            ellipse at 50% 15%,
            rgba(105, 75, 190, .18),
            transparent 45%
        ),

        linear-gradient(
            145deg,
            #211936 0%,
            #17152d 42%,
            #101827 72%,
            #090d17 100%
        ) !important;

    border-color:
        rgba(95, 211, 225, .65) !important;

    box-shadow:

        0 20px 35px rgba(0,0,0,.78),

        0 0 18px rgba(65, 210, 225, .10),

        inset 0 0 0 5px rgba(5,8,15,.75),

        inset 0 0 0 7px rgba(115,75,190,.12),

        inset 0 0 35px rgba(0,0,0,.78) !important;

    transition:
        border-color .45s ease,
        box-shadow .45s ease;
}


/* =========================================================
   2 — INNER PORTAL
   ========================================================= */

.games-chamber .portal-btn::after {

    background:

        radial-gradient(
            ellipse at 50% 25%,
            rgba(70, 215, 225, .09),
            transparent 42%
        ),

        radial-gradient(
            ellipse at 50% 80%,
            rgba(115, 65, 190, .10),
            transparent 50%
        ),

        linear-gradient(
            180deg,
            rgba(8,10,20,.42),
            rgba(3,5,10,.90)
        ) !important;

    border-color:
        rgba(91, 205, 220, .24) !important;

    box-shadow:
        inset 0 0 40px rgba(0,0,0,.94) !important;
}


/* =========================================================
   3 — GAME ICON FRAME
   ========================================================= */

.games-chamber .game-icon-frame {

    fill:
        rgba(7, 10, 18, .42) !important;

    stroke:
        #5dc5d0 !important;

    stroke-width:
        2.2 !important;

    filter:
        drop-shadow(
            0 3px 5px rgba(0,0,0,.9)
        ) !important;

    transition:
        stroke .4s ease,
        fill .4s ease,
        filter .4s ease,
        transform .4s ease;
}


/* =========================================================
   4 — GAME SYMBOL
   NO RED
   ========================================================= */

.games-chamber .game-symbol {

    color:
        #67ddd9 !important;

    stroke:
        #67ddd9 !important;

    stroke-width:
        3.2 !important;

    stroke-linecap:
        round !important;

    stroke-linejoin:
        round !important;

    filter:
        drop-shadow(
            0 0 5px rgba(70,220,220,.22)
        ) !important;

    transition:
        stroke .4s ease,
        color .4s ease,
        filter .4s ease,
        transform .4s ease;
}


/* =========================================================
   5 — FORCE SVG CHILDREN TO CYAN
   عشان الأحمر القديم ما يرجعش
   ========================================================= */

.games-chamber .game-symbol path,
.games-chamber .game-symbol circle,
.games-chamber .game-symbol ellipse,
.games-chamber .game-symbol line,
.games-chamber .game-symbol polyline,
.games-chamber .game-symbol polygon {

    stroke:
        #67ddd9 !important;

    fill:
        none !important;

    filter:
        none !important;
}


/* =========================================================
   6 — X & O
   ========================================================= */

.games-chamber .portal-xo .game-symbol,
.games-chamber .portal-xo .game-symbol path,
.games-chamber .portal-xo .game-symbol circle {

    stroke:
        #72e5df !important;
}


/* =========================================================
   7 — MUMMY RUNNER
   PURPLE-CYAN
   ========================================================= */

.games-chamber .portal-runner .game-symbol,
.games-chamber .portal-runner .game-symbol path,
.games-chamber .portal-runner .game-symbol circle {

    stroke:
        #8fc9df !important;
}


/* =========================================================
   8 — CHESS
   PURPLE
   ========================================================= */

.games-chamber .portal-chess .game-symbol,
.games-chamber .portal-chess .game-symbol path {

    stroke:
        #b18ce5 !important;
}


/* =========================================================
   9 — LABEL
   ========================================================= */

.games-chamber .portal-label {

    color:
        #d7c27e !important;

    background:
        linear-gradient(
            180deg,
            #302449,
            #141321
        ) !important;

    border-color:
        rgba(103, 210, 220, .55) !important;

    box-shadow:

        0 8px 17px rgba(0,0,0,.72),

        0 0 12px rgba(80,210,220,.07),

        inset 0 1px 0 rgba(220,205,130,.08) !important;

    transition:
        transform .4s ease,
        border-color .4s ease,
        box-shadow .4s ease,
        color .4s ease;
}


/* =========================================================
   10 — CARD / PORTAL MOTION
   حركة بسيطة للكارت نفسه
   ========================================================= */

.games-chamber .portal-station {

    transition:
        transform .5s cubic-bezier(.2,.8,.2,1),
        filter .5s ease;

    will-change:
        transform;
}


/* =========================================================
   11 — IDLE FLOAT
   حركة هادية جدًا
   ========================================================= */

.games-chamber .portal-station {

    animation:
        portalFloat 5s ease-in-out infinite;
}


.games-chamber .portal-station:nth-child(2) {

    animation-delay:
        -1.6s;
}


.games-chamber .portal-station:nth-child(3) {

    animation-delay:
        -3.2s;
}


/* =========================================================
   12 — HOVER
   الكارت يطلع لقدام
   ========================================================= */

.games-chamber .portal-station:hover {

    transform:
        translateY(-9px)
        scale(1.025);

    filter:
        drop-shadow(
            0 18px 25px rgba(0,0,0,.72)
        );

    z-index:
        20;
}


/* =========================================================
   13 — HOVER STONE
   ========================================================= */

.games-chamber .portal-station:hover .portal-btn {

    transform:
        translateY(-5px) !important;
}


.games-chamber .portal-station:hover .portal-btn::before {

    border-color:
        rgba(104, 229, 235, .95) !important;

    box-shadow:

        0 24px 40px rgba(0,0,0,.82),

        0 0 22px rgba(70,220,225,.22),

        0 0 40px rgba(125,75,215,.12),

        inset 0 0 0 5px rgba(5,8,15,.68),

        inset 0 0 35px rgba(0,0,0,.65) !important;
}


/* =========================================================
   14 — HOVER ICON
   ========================================================= */

.games-chamber .portal-station:hover .game-icon-frame {

    stroke:
        #8ce9e4 !important;

    filter:
        drop-shadow(
            0 0 8px rgba(80,225,225,.32)
        ) !important;
}


.games-chamber .portal-station:hover .game-symbol {

    filter:
        drop-shadow(
            0 0 8px rgba(80,225,225,.55)
        ) !important;

    transform:
        scale(1.05);
}


/* =========================================================
   15 — HOVER LABEL
   ========================================================= */

.games-chamber .portal-station:hover .portal-label {

    color:
        #f0d995 !important;

    border-color:
        rgba(105,225,230,.85) !important;

    box-shadow:

        0 9px 20px rgba(0,0,0,.78),

        0 0 14px rgba(70,215,220,.12),

        inset 0 1px 0 rgba(240,215,145,.12) !important;
}


/* =========================================================
   16 — ANIMATION
   ========================================================= */

@keyframes portalFloat {

    0%,
    100% {
        transform:
            translateY(0);
    }

    50% {
        transform:
            translateY(-4px);
    }
}


/* =========================================================
   17 — STOP FLOAT DURING HOVER
   ========================================================= */

.games-chamber .portal-station:hover {

    animation-play-state:
        paused;
}


/* =========================================================
   18 — NO RED FILTER
   ========================================================= */

.games-chamber .portal-xo .game-symbol,
.games-chamber .portal-runner .game-symbol,
.games-chamber .portal-chess .game-symbol {

    filter:
        drop-shadow(
            0 0 5px rgba(70,220,220,.20)
        ) !important;
}


/* =========================================================
   19 — RED COLOR OVERRIDES
   أقوى قواعد لإلغاء الأحمر القديم
   ========================================================= */

.games-chamber .portal-xo .game-symbol path,
.games-chamber .portal-xo .game-symbol circle,
.games-chamber .portal-runner .game-symbol path,
.games-chamber .portal-runner .game-symbol circle,
.games-chamber .portal-chess .game-symbol path {

    stroke:
        #67ddd9 !important;
}


/* =========================================================
   20 — ACCESSIBILITY
   ========================================================= */

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

    .games-chamber .portal-station {

        animation:
            none !important;
    }
}
/* =========================================================
   GAMES CHAMBER — BALANCED EGYPTIAN PALETTE
   Vivid Teal + Deep Purple + Antique Gold
   ========================================================= */

/* ---------------------------------------------------------
   GAME ICON FRAME
   --------------------------------------------------------- */

.games-chamber .game-icon-frame {
    stroke: #4fb8b2 !important;
    fill: rgba(12, 16, 25, .42) !important;

    filter:
        drop-shadow(0 3px 5px rgba(0,0,0,.8))
        drop-shadow(0 0 5px rgba(79,184,178,.12)) !important;

    transition:
        stroke .4s ease,
        filter .4s ease;
}


/* ---------------------------------------------------------
   MAIN GAME ICON
   --------------------------------------------------------- */

.games-chamber .game-symbol {
    stroke: #62d0c8 !important;
    color: #62d0c8 !important;

    filter:
        drop-shadow(0 2px 3px rgba(0,0,0,.75))
        drop-shadow(0 0 7px rgba(98,208,200,.20)) !important;

    transition:
        stroke .4s ease,
        filter .4s ease,
        transform .4s ease;
}


/* ---------------------------------------------------------
   X & O
   Teal واضح لكن مش Neon
   --------------------------------------------------------- */

.games-chamber .portal-xo .game-symbol,
.games-chamber .portal-xo .game-symbol path,
.games-chamber .portal-xo .game-symbol circle {
    stroke: #62d0c8 !important;
}


/* ---------------------------------------------------------
   MUMMY RUNNER
   Cyan / Turquoise أخف
   --------------------------------------------------------- */

.games-chamber .portal-runner .game-symbol,
.games-chamber .portal-runner .game-symbol path,
.games-chamber .portal-runner .game-symbol circle {
    stroke: #72c9c0 !important;
}


/* ---------------------------------------------------------
   CHESS
   Purple متوازن
   --------------------------------------------------------- */

.games-chamber .portal-chess .game-symbol,
.games-chamber .portal-chess .game-symbol path {
    stroke: #aa82d4 !important;
}


/* =========================================================
   PORTAL STONE
   ========================================================= */

.games-chamber .portal-btn::before {

    background:
        radial-gradient(
            ellipse at 50% 12%,
            rgba(110,70,180,.16),
            transparent 42%
        ),

        linear-gradient(
            145deg,
            #2b2140 0%,
            #201a31 42%,
            #141827 72%,
            #0c1019 100%
        ) !important;

    border-color:
        rgba(91,177,174,.65) !important;

    box-shadow:

        0 20px 35px rgba(0,0,0,.78),

        0 0 18px rgba(75,190,185,.10),

        inset 0 0 0 5px rgba(7,8,14,.72),

        inset 0 0 0 7px rgba(150,105,205,.10),

        inset 0 0 35px rgba(0,0,0,.78) !important;
}


/* =========================================================
   INNER PORTAL
   ========================================================= */

.games-chamber .portal-btn::after {

    background:

        radial-gradient(
            ellipse at 50% 25%,
            rgba(80,200,190,.08),
            transparent 42%
        ),

        radial-gradient(
            ellipse at 50% 80%,
            rgba(120,70,190,.10),
            transparent 50%
        ),

        linear-gradient(
            180deg,
            rgba(8,10,19,.40),
            rgba(3,5,10,.90)
        ) !important;

    border-color:
        rgba(85,170,165,.25) !important;
}


/* =========================================================
   LABEL — ANTIQUE GOLD
   ========================================================= */

.games-chamber .portal-label {

    color:
        #d2b875 !important;

    background:
        linear-gradient(
            180deg,
            #352b42,
            #17131d
        ) !important;

    border-color:
        rgba(190,155,85,.62) !important;

    box-shadow:

        0 8px 17px rgba(0,0,0,.72),

        0 0 8px rgba(190,155,85,.06),

        inset 0 1px 0 rgba(225,198,125,.10) !important;
}


/* =========================================================
   HOVER
   ========================================================= */

.games-chamber .portal-station:hover .game-icon-frame {

    stroke:
        #7be0d7 !important;

    filter:
        drop-shadow(0 0 7px rgba(90,210,200,.35)) !important;
}


.games-chamber .portal-station:hover .game-symbol {

    filter:
        drop-shadow(0 0 9px rgba(95,215,205,.40)) !important;

    transform:
        scale(1.055);
}


.games-chamber .portal-station:hover .portal-btn::before {

    border-color:
        rgba(105,215,207,.90) !important;

    box-shadow:

        0 24px 40px rgba(0,0,0,.82),

        0 0 20px rgba(75,200,190,.18),

        0 0 35px rgba(135,80,205,.12),

        inset 0 0 30px rgba(0,0,0,.68) !important;
}


.games-chamber .portal-station:hover .portal-label {

    color:
        #ebd18b !important;

    border-color:
        rgba(220,184,103,.82) !important;
}


/* =========================================================
   NO RED
   ========================================================= */

.games-chamber .game-symbol path,
.games-chamber .game-symbol circle,
.games-chamber .game-symbol ellipse,
.games-chamber .game-symbol line,
.games-chamber .game-symbol polyline {

    filter:
        none !important;
}
/* =========================================================
   GAMES CHAMBER — BIG CARD MOTION
   ========================================================= */

.games-chamber .game-card {
    position: relative;
    overflow: hidden;
    transform-style: preserve-3d;

    transition:
        transform .7s cubic-bezier(.16,1,.3,1),
        box-shadow .7s ease,
        border-color .5s ease;

    animation: bigCardFloat 4s ease-in-out infinite;
}


/* كل بطاقة لها حركة مختلفة */
.games-chamber .game-card:nth-child(1) {
    animation-delay: 0s;
}

.games-chamber .game-card:nth-child(2) {
    animation-delay: -1.3s;
}

.games-chamber .game-card:nth-child(3) {
    animation-delay: -2.6s;
}


/* =========================================================
   BIG IDLE FLOAT
   ========================================================= */

@keyframes bigCardFloat {

    0%,
    100% {
        transform:
            translateY(0)
            rotateZ(0deg);
    }

    25% {
        transform:
            translateY(-8px)
            rotateZ(-.8deg);
    }

    50% {
        transform:
            translateY(-14px)
            rotateZ(.8deg);
    }

    75% {
        transform:
            translateY(-6px)
            rotateZ(-.4deg);
    }
}


/* =========================================================
   BIG HOVER
   ========================================================= */

.games-chamber .game-card:hover {

    animation-play-state: paused;

    transform:
        translateY(-28px)
        scale(1.08)
        rotateX(6deg)
        rotateY(-5deg)
        rotateZ(-1deg);

    z-index: 50;

    border-color:
        rgba(214,179,106,.95) !important;

    box-shadow:

        0 35px 70px rgba(0,0,0,.75),

        0 0 25px rgba(214,179,106,.22),

        0 0 55px rgba(99,210,200,.12),

        inset 0 0 30px rgba(214,179,106,.08);
}


/* =========================================================
   MOVING LIGHT
   ========================================================= */

.games-chamber .game-card::before {

    content: "";

    position: absolute;

    width: 35%;
    height: 180%;

    top: -40%;
    left: -80%;

    background:
        linear-gradient(
            90deg,
            transparent,
            rgba(255,255,255,.05),
            rgba(214,179,106,.45),
            rgba(255,255,255,.12),
            transparent
        );

    transform: rotate(22deg);

    opacity: 0;

    pointer-events: none;

    transition:
        left 1s cubic-bezier(.2,.8,.2,1),
        opacity .3s ease;

    z-index: 20;
}


.games-chamber .game-card:hover::before {

    left: 140%;

    opacity: 1;
}


/* =========================================================
   ICON — BIG LIFT
   ========================================================= */

.games-chamber .game-card .game-icon,
.games-chamber .game-card .icon,
.games-chamber .game-card svg {

    transition:
        transform .7s cubic-bezier(.16,1,.3,1),
        filter .7s ease;
}


.games-chamber .game-card:hover .game-icon,
.games-chamber .game-card:hover .icon,
.games-chamber .game-card:hover svg {

    transform:
        translateY(-18px)
        scale(1.16)
        rotate(-5deg);

    filter:
        drop-shadow(0 8px 10px rgba(0,0,0,.7))
        drop-shadow(0 0 12px rgba(214,179,106,.28));
}


/* =========================================================
   TITLE — COMES FORWARD
   ========================================================= */

.games-chamber .game-card h3,
.games-chamber .game-card .game-title {

    transition:
        transform .6s cubic-bezier(.16,1,.3,1),
        letter-spacing .5s ease;
}


.games-chamber .game-card:hover h3,
.games-chamber .game-card:hover .game-title {

    transform:
        translateY(-8px)
        translateZ(20px);

    letter-spacing:
        .14em;
}


/* =========================================================
   INNER LIGHT
   ========================================================= */

.games-chamber .game-card::after {

    content: "";

    position: absolute;

    inset: 3px;

    border:
        1px solid rgba(214,179,106,.18);

    border-radius:
        inherit;

    box-shadow:
        inset 0 0 0 rgba(214,179,106,0);

    pointer-events: none;

    transition:
        border-color .6s ease,
        box-shadow .6s ease;
}


.games-chamber .game-card:hover::after {

    border-color:
        rgba(214,179,106,.7);

    box-shadow:
        inset 0 0 25px rgba(214,179,106,.08),
        0 0 20px rgba(214,179,106,.12);
}


/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width:700px) {

    .games-chamber .game-card:hover {

        transform:
            translateY(-15px)
            scale(1.035)
            rotateZ(-1deg);
    }

}
/* =========================================================
   GAMES CHAMBER — GAME LOGO TITLE
   ========================================================= */

.games-title-logo {
  position: relative;
  width: min(760px, 92%);
  margin: 0 auto 55px;
  min-height: 155px;

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

  isolation: isolate;
}

/* ---------- MAIN TITLE CORE ---------- */

.games-title-core {
  position: relative;
  z-index: 3;
  text-align: center;

  padding: 18px 70px 16px;

  background:
    linear-gradient(
      180deg,
      rgba(31, 24, 13, .72),
      rgba(9, 7, 4, .88)
    );

  border: 1px solid rgba(212, 175, 55, .55);

  clip-path: polygon(
    3% 0,
    97% 0,
    100% 12%,
    100% 88%,
    97% 100%,
    3% 100%,
    0 88%,
    0 12%
  );

  box-shadow:
    0 0 35px rgba(212,175,55,.12),
    inset 0 0 25px rgba(212,175,55,.06);
}

/* ---------- LITTLE HORUS ---------- */

.games-rune-top {
  position: absolute;
  top: -17px;
  left: 50%;
  transform: translateX(-50%);

  width: 38px;
  height: 30px;

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

  font-size: 22px;

  color: #f4d875;

  background: #0c0905;

  border-left: 1px solid rgba(212,175,55,.65);
  border-right: 1px solid rgba(212,175,55,.65);

  text-shadow:
    0 0 7px rgba(212,175,55,.8),
    0 0 18px rgba(212,175,55,.35);
}

/* ---------- GAMES ---------- */

.games-main-title {
  display: block;

  font-family:
    Georgia,
    'Times New Roman',
    serif;

  font-size: clamp(48px, 6vw, 78px);

  line-height: .82;

  font-weight: 900;

  letter-spacing: .16em;

  color: #f4d875;

  background:
    linear-gradient(
      180deg,
      #fff1a8 0%,
      #e7c75c 25%,
      #b98b25 58%,
      #f1d36b 78%,
      #8b651b 100%
    );

  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;

  filter:
    drop-shadow(0 2px 0 #5b4010)
    drop-shadow(0 5px 7px rgba(0,0,0,.75));

  position: relative;
}

/* ---------- CHAMBER ---------- */

.games-sub-title {
  display: block;

  margin-top: 8px;

  font-family:
    Georgia,
    'Times New Roman',
    serif;

  font-size: clamp(14px, 1.5vw, 19px);

  letter-spacing: .65em;

  padding-left: .65em;

  color: #c7a94e;

  text-shadow:
    0 1px 2px #000,
    0 0 8px rgba(212,175,55,.25);
}

/* ---------- DECORATIVE LINE ---------- */

.games-title-line {
  display: flex;
  align-items: center;
  justify-content: center;

  gap: 13px;

  margin: 12px auto 7px;

  width: 85%;
}

.games-title-line span {
  height: 1px;
  flex: 1;

  background:
    linear-gradient(
      90deg,
      transparent,
      rgba(212,175,55,.75)
    );
}

.games-title-line span:last-child {
  background:
    linear-gradient(
      90deg,
      rgba(212,175,55,.75),
      transparent
    );
}

.games-title-line b {
  font-size: 15px;
  font-weight: normal;

  color: #e3c45c;

  text-shadow:
    0 0 8px rgba(212,175,55,.65);
}

/* ---------- SUBTEXT ---------- */

.games-title-core p {
  margin: 0;

  font-size: 8px;

  letter-spacing: .34em;

  padding-left: .34em;

  color: rgba(210,185,112,.7);

  white-space: nowrap;
}

/* ---------- SIDE ORNAMENTS ---------- */

.games-title-ornament {
  position: absolute;

  top: 50%;

  transform: translateY(-50%);

  width: 80px;
  height: 90px;

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

  z-index: 1;

  color: #b9963c;

  opacity: .72;
}

.games-title-ornament span {
  font-size: 38px;

  text-shadow:
    0 0 10px rgba(212,175,55,.4);
}

.games-title-ornament::before,
.games-title-ornament::after {
  content: '';

  position: absolute;

  width: 34px;
  height: 1px;

  background:
    linear-gradient(
      90deg,
      transparent,
      rgba(212,175,55,.6)
    );
}

.games-title-ornament::before {
  top: 22px;
}

.games-title-ornament::after {
  bottom: 22px;
}

.games-title-ornament.left {
  left: 0;
}

.games-title-ornament.right {
  right: 0;
}

.games-title-ornament.right::before,
.games-title-ornament.right::after {
  transform: scaleX(-1);
}

/* ---------- SUBTLE LIGHT SWEEP ---------- */

.games-title-core::after {
  content: '';

  position: absolute;

  top: 0;
  left: -30%;

  width: 18%;
  height: 100%;

  background:
    linear-gradient(
      90deg,
      transparent,
      rgba(255,240,170,.16),
      transparent
    );

  transform: skewX(-18deg);

  animation: gamesLogoSweep 6s ease-in-out infinite;

  pointer-events: none;
}

@keyframes gamesLogoSweep {

  0%,
  65% {
    left: -30%;
    opacity: 0;
  }

  72% {
    opacity: 1;
  }

  90% {
    left: 115%;
    opacity: 0;
  }

  100% {
    left: 115%;
    opacity: 0;
  }
}

/* ---------- MOBILE ---------- */

@media (max-width: 700px) {

  .games-title-logo {
    width: 96%;
    margin-bottom: 40px;
    min-height: 125px;
  }

  .games-title-core {
    padding: 17px 35px 14px;
  }

  .games-main-title {
    font-size: 44px;
    letter-spacing: .11em;
  }

  .games-sub-title {
    font-size: 12px;
    letter-spacing: .42em;
  }

  .games-title-core p {
    font-size: 6px;
    letter-spacing: .2em;
  }

  .games-title-ornament {
    width: 45px;
  }

  .games-title-ornament span {
    font-size: 25px;
  }
}
/* =========================================================
   GAMES CHAMBER — HANGING HORUS EYE
   ========================================================= */

.games-chamber {
    position: relative;
}

/* الحبل */
.hanging-horus {
    position: absolute;
    top: -165px;
    left: 50%;
    width: 90px;
    height: 170px;
    transform: translateX(-50%);
    z-index: 20;
    pointer-events: none;
}

/* الحبل نفسه */
.hanging-horus .rope {
    position: absolute;
    top: 0;
    left: 50%;
    width: 4px;
    height: 115px;
    transform: translateX(-50%);

    background:
        repeating-linear-gradient(
            to bottom,
            #8c681f 0px,
            #d4af37 5px,
            #6e4d17 9px,
            #d4af37 13px
        );

    border-radius: 5px;

    box-shadow:
        0 0 5px rgba(212,175,55,.5),
        0 0 14px rgba(212,175,55,.2);
}

/* العقدة فوق العين */
.rope-knot {
    position: absolute;
    bottom: -5px;
    left: 50%;
    width: 12px;
    height: 12px;

    transform: translateX(-50%) rotate(45deg);

    background: #d4af37;
    border: 2px solid #f4d978;

    box-shadow:
        0 0 8px rgba(212,175,55,.7);
}

/* العين كاملة */
.horus-eye {
    position: absolute;
    left: 50%;
    top: 108px;

    width: 68px;
    height: 48px;

    transform: translateX(-50%);

    animation: horus-swing 5s ease-in-out infinite;
    transform-origin: top center;

    filter:
        drop-shadow(0 0 8px rgba(212,175,55,.7))
        drop-shadow(0 0 20px rgba(212,175,55,.25));
}

/* شكل العين */
.eye-shape {
    position: absolute;
    left: 8px;
    top: 8px;

    width: 52px;
    height: 30px;

    background:
        linear-gradient(
            135deg,
            #f9e7a5,
            #d4af37 45%,
            #8d681d
        );

    clip-path: polygon(
        0 50%,
        18% 20%,
        50% 8%,
        82% 20%,
        100% 50%,
        82% 80%,
        50% 92%,
        18% 80%
    );

    box-shadow:
        inset 0 0 8px rgba(0,0,0,.6);
}

/* البؤبؤ */
.eye-pupil {
    position: absolute;
    left: 50%;
    top: 50%;

    width: 13px;
    height: 13px;

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

    background: #120d06;
    border-radius: 50%;

    box-shadow:
        0 0 4px #000,
        0 0 8px rgba(255,215,90,.7);
}

/* الحاجب الفرعوني */
.eye-brow {
    position: absolute;
    left: 9px;
    top: 3px;

    width: 48px;
    height: 7px;

    border-top: 4px solid #d4af37;
    border-radius: 50%;
}

/* ذيل العين */
.eye-tail {
    position: absolute;

    right: -7px;
    top: 25px;

    width: 23px;
    height: 5px;

    background: #d4af37;

    transform:
        rotate(18deg)
        skewX(-25deg);

    transform-origin: left center;

    box-shadow:
        0 0 5px rgba(212,175,55,.6);
}

/* =========================================================
   حركة العين
   ========================================================= */

@keyframes horus-swing {

    0% {
        transform:
            translateX(-50%)
            rotate(-7deg);
    }

    25% {
        transform:
            translateX(-50%)
            translateX(10px)
            rotate(4deg);
    }

    50% {
        transform:
            translateX(-50%)
            translateX(16px)
            rotate(7deg);
    }

    75% {
        transform:
            translateX(-50%)
            translateX(-8px)
            rotate(-3deg);
    }

    100% {
        transform:
            translateX(-50%)
            rotate(-7deg);
    }
}
/* =========================================================
   GAMES CHAMBER — RESTORE BIG GAME TITLE
   ========================================================= */

.games-chamber h2 {
    position: relative;
    z-index: 10;

    display: block;
    width: fit-content;
    margin: 0 auto;

    text-align: center;
}

/* GAMES */
.games-chamber .games-main-title {
    display: block;

    font-family:
        Georgia,
        "Times New Roman",
        serif;

    font-size: clamp(58px, 7vw, 92px);

    line-height: .82;

    font-weight: 900;

    letter-spacing: .16em;

    color: #f4d875;

    background:
        linear-gradient(
            180deg,
            #fff1a8 0%,
            #e7c75c 25%,
            #b98b25 58%,
            #f1d36b 78%,
            #8b651b 100%
        );

    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;

    filter:
        drop-shadow(0 2px 0 #5b4010)
        drop-shadow(0 5px 7px rgba(0,0,0,.75));

    white-space: nowrap;
}

/* CHAMBER */
.games-chamber .games-sub-title {
    display: block;

    margin-top: 10px;

    font-family:
        Georgia,
        "Times New Roman",
        serif;

    font-size: clamp(15px, 1.6vw, 21px);

    letter-spacing: .65em;

    padding-left: .65em;

    color: #c7a94e;

    text-shadow:
        0 1px 2px #000,
        0 0 8px rgba(212,175,55,.25);
}
/* =========================================================
   GAMES CHAMBER — HANGING SERPENT
   ========================================================= */

.games-chamber {
    position: relative !important;
    overflow: visible !important;
}

/* جسم الثعبان */
.hanging-serpent {
    position: absolute !important;

    left: 50% !important;
    top: -145px !important;

    width: 90px;
    height: 200px;

    transform: translateX(-50%);

    z-index: 99999;

    pointer-events: none;

    display: block !important;
}

/* الحبل */
.serpent-rope {
    position: absolute;

    left: 50%;
    top: 0;

    width: 4px;
    height: 70px;

    transform: translateX(-50%);

    background:
        repeating-linear-gradient(
            to bottom,
            #6d4c17 0px,
            #d4af37 4px,
            #f0d36a 7px,
            #755218 10px
        );

    border-radius: 4px;

    box-shadow:
        0 0 6px rgba(212,175,55,.7),
        0 0 15px rgba(212,175,55,.3);
}

/* جسم الثعبان */
.serpent-body {
    position: absolute;

    left: 50%;
    top: 62px;

    width: 25px;
    height: 75px;

    transform: translateX(-50%);

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

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

.serpent-body span {
    width: 20px;
    height: 13px;

    margin: -1px 0;

    background:
        linear-gradient(
            90deg,
            #705018,
            #f0d36b,
            #9a721f
        );

    border: 1px solid #f7dc75;

    clip-path: polygon(
        50% 0,
        100% 50%,
        50% 100%,
        0 50%
    );

    box-shadow:
        0 0 5px rgba(212,175,55,.4);
}

/* رأس الثعبان */
.serpent-head {
    position: absolute;

    left: 50%;
    top: 125px;

    width: 52px;
    height: 45px;

    transform: translateX(-50%);

    background:
        linear-gradient(
            135deg,
            #ffe99a 0%,
            #d4af37 45%,
            #795517 100%
        );

    clip-path: polygon(
        50% 0,
        88% 20%,
        100% 55%,
        76% 100%,
        50% 78%,
        24% 100%,
        0 55%,
        12% 20%
    );

    filter:
        drop-shadow(0 0 8px rgba(212,175,55,.9))
        drop-shadow(0 0 20px rgba(212,175,55,.4));
}

/* العين */
.serpent-eye {
    position: absolute;

    top: 15px;

    width: 7px;
    height: 7px;

    border-radius: 50%;

    background: #080502;

    box-shadow:
        0 0 4px #fff0a0,
        0 0 8px rgba(255,210,70,.8);
}

.serpent-eye.left {
    left: 12px;
}

.serpent-eye.right {
    right: 12px;
}

/* اللسان */
.serpent-tongue {
    position: absolute;

    left: 50%;
    bottom: -11px;

    width: 18px;
    height: 12px;

    transform: translateX(-50%);

    border-bottom: 2px solid #9d261b;
}

.serpent-tongue::before,
.serpent-tongue::after {
    content: "";

    position: absolute;

    bottom: -4px;

    width: 8px;
    height: 7px;

    border-bottom: 2px solid #9d261b;
}

.serpent-tongue::before {
    left: 0;
    transform: rotate(-25deg);
}

.serpent-tongue::after {
    right: 0;
    transform: rotate(25deg);
}

/* حركة هادئة */
@keyframes serpentIdle {

    0%, 100% {
        transform:
            translateX(-50%)
            rotate(-3deg);
    }

    50% {
        transform:
            translateX(-50%)
            rotate(3deg);
    }
}

/* حركة عند اللعب */
.games-chamber.serpent-alert .hanging-serpent {
    animation: serpentReact .55s ease-in-out infinite alternate;
}

@keyframes serpentReact {

    from {
        transform:
            translateX(-50%)
            rotate(-10deg);
    }

    to {
        transform:
            translateX(-50%)
            translateX(16px)
            rotate(10deg);
    }
}
/* ============================================================
   GU LIBRARY — LIVING COBRA
   ============================================================ */

.games-chamber {
  position: relative !important;
  overflow: visible !important;
}

#living-cobra {
  position: absolute !important;

  inset: 0 !important;

  width: 100% !important;
  height: 100% !important;

  pointer-events: none !important;

  overflow: visible !important;

  z-index: 25 !important;
}

#living-cobra .cobra-svg {
  position: absolute;

  inset: 0;

  width: 100%;

  height: 100%;

  overflow: visible;
}

#living-cobra .cobra-body {
  fill: none;

  stroke: url(#cobraBodyGradient);

  stroke-width: 15;

  stroke-linecap: round;

  stroke-linejoin: round;

  filter: url(#cobraShadow);
}

#living-cobra .cobra-body-glow {
  fill: none;

  stroke: rgba(210,170,65,.15);

  stroke-width: 27;

  stroke-linecap: round;

  filter: url(#cobraGlow);
}

#living-cobra .cobra-head {
  filter: url(#cobraShadow);

  transform-origin: center;
}

#living-cobra .cobra-hood {
  fill: url(#cobraHoodGradient);

  stroke: #4a3009;

  stroke-width: 3;
}

#living-cobra .cobra-face {
  fill: url(#cobraHeadGradient);

  stroke: #4a3009;

  stroke-width: 3;
}

#living-cobra .cobra-eye {
  fill: #d7b84f;

  stroke: #241704;

  stroke-width: 4;
}

#living-cobra .cobra-pupil {
  fill: #050403;
}

#living-cobra .cobra-mouth {
  fill: none;

  stroke: #241603;

  stroke-width: 4;

  stroke-linecap: round;
}

#living-cobra .cobra-fangs {
  fill: #f4ecd5;

  stroke: #c8b98e;

  stroke-width: 1;
}

#living-cobra .cobra-tongue {
  fill: none;

  stroke: #a62c3b;

  stroke-width: 3;

  stroke-linecap: round;
}

.games-chamber .portal-grid,
.games-chamber .portal-card,
.games-chamber .portal,
.games-chamber .game-card {
  position: relative;

  z-index: 40;
}
/* ============================================================
   GU LIBRARY — COBRA V5
   PREMIUM EGYPTIAN COBRA
   ============================================================ */


/* ============================================================
   CONTAINER
   ============================================================ */

#living-cobra-v5 {

  position: absolute !important;

  inset: 0 !important;

  width: 100% !important;

  height: 100% !important;

  pointer-events: none !important;

  z-index: 30 !important;

  overflow: visible !important;

}


#living-cobra-v5 .cobra-svg-v5 {

  position: absolute !important;

  inset: 0 !important;

  width: 100% !important;

  height: 100% !important;

  overflow: visible !important;

  pointer-events: none !important;

}


/* ============================================================
   BODY
   ============================================================ */

#living-cobra-v5 .cobra-body-v5 {

  fill: none !important;

  stroke: url(#cobraBodyV5) !important;

  stroke-width: 34px !important;

  stroke-linecap: round !important;

  stroke-linejoin: round !important;

  filter:
    drop-shadow(
      0 4px 4px rgba(0,0,0,.82)
    )
    drop-shadow(
      0 0 3px rgba(210,176,70,.18)
    );

}


/* ============================================================
   BODY GLOW
   ============================================================ */

#living-cobra-v5 .cobra-body-glow-v5 {

  fill: none !important;

  stroke: #c6a33d !important;

  stroke-width: 48px !important;

  stroke-linecap: round !important;

  opacity: .07 !important;

  filter:
    url(#cobraGlowV5);

}


/* ============================================================
   BODY SCALES
   ============================================================ */

#living-cobra-v5 .cobra-body-scales-v5 {

  fill: none !important;

  stroke: rgba(235,211,126,.38) !important;

  stroke-width: 8px !important;

  stroke-linecap: round !important;

  stroke-dasharray:
    1.5 7 !important;

  opacity: .42 !important;

}


/* ============================================================
   BODY HIGHLIGHT
   ============================================================ */

#living-cobra-v5 .cobra-body-highlight-v5 {

  fill: none !important;

  stroke:
    rgba(255,237,157,.32) !important;

  stroke-width: 5px !important;

  stroke-linecap: round !important;

  opacity: .55 !important;

}


/* ============================================================
   NECK
   ============================================================ */

#living-cobra-v5 .cobra-neck-v5 {

  fill:
    url(#cobraBodyV5) !important;

  stroke:
    #1b1005 !important;

  stroke-width:
    4px !important;

  filter:
    drop-shadow(
      0 4px 4px rgba(0,0,0,.7)
    );

}


/* ============================================================
   HOOD
   ============================================================ */

#living-cobra-v5 .cobra-hood-v5 {

  fill:
    url(#cobraHoodV5) !important;

  stroke:
    #1c1105 !important;

  stroke-width:
    4px !important;

  filter:
    drop-shadow(
      0 6px 5px rgba(0,0,0,.72)
    );

}


/* ============================================================
   INNER HOOD
   ============================================================ */

#living-cobra-v5 .cobra-hood-inner-v5 {

  fill:
    url(#cobraHoodInnerV5) !important;

  opacity:
    .88 !important;

}


/* ============================================================
   HOOD OUTLINE
   ============================================================ */

#living-cobra-v5 .cobra-hood-outline-v5 {

  fill: none !important;

  stroke:
    rgba(241,215,123,.48) !important;

  stroke-width:
    2px !important;

  stroke-linecap:
    round !important;

  opacity:
    .7 !important;

}


/* ============================================================
   COBRA MARK
   ============================================================ */

#living-cobra-v5 .cobra-mark-left-v5,
#living-cobra-v5 .cobra-mark-right-v5 {

  fill: none !important;

  stroke:
    rgba(221,191,85,.78) !important;

  stroke-width:
    4px !important;

  stroke-linecap:
    round !important;

  opacity:
    .78 !important;

}


/* ============================================================
   FACE
   ============================================================ */

#living-cobra-v5 .cobra-face-v5 {

  fill:
    url(#cobraHeadV5) !important;

  stroke:
    #211304 !important;

  stroke-width:
    4px !important;

  filter:
    drop-shadow(
      0 3px 3px rgba(0,0,0,.72)
    );

}


/* ============================================================
   FOREHEAD
   ============================================================ */

#living-cobra-v5 .cobra-forehead-v5 {

  fill:
    rgba(255,232,132,.15) !important;

  stroke:
    rgba(65,45,12,.55) !important;

  stroke-width:
    2px !important;

}


/* ============================================================
   BROWS
   ============================================================ */

#living-cobra-v5 .cobra-brow-left-v5,
#living-cobra-v5 .cobra-brow-right-v5 {

  fill:
    #3a280c !important;

  opacity:
    .95 !important;

}


/* ============================================================
   EYES
   ============================================================ */

#living-cobra-v5 .cobra-eye-v5 {

  fill:
    url(#cobraEyeV5) !important;

  stroke:
    #160d03 !important;

  stroke-width:
    3px !important;

  filter:
    drop-shadow(
      0 0 4px rgba(238,208,76,.25)
    );

}


/* ============================================================
   PUPILS
   ============================================================ */

#living-cobra-v5 .cobra-pupil-v5 {

  fill:
    #050301 !important;

}


/* ============================================================
   EYE GLINT
   ============================================================ */

#living-cobra-v5 .cobra-eye-glint-v5 {

  fill:
    #fff3b0 !important;

  opacity:
    .9 !important;

}


/* ============================================================
   NOSE
   ============================================================ */

#living-cobra-v5 .cobra-nose-v5 {

  fill:
    #100903 !important;

}


/* ============================================================
   FACE SCALES
   ============================================================ */

#living-cobra-v5 .cobra-scale-line-v5 {

  fill: none !important;

  stroke:
    rgba(247,224,143,.55) !important;

  stroke-width:
    1.5px !important;

  stroke-linecap:
    round !important;

}


/* ============================================================
   HOOD SCALES
   ============================================================ */

#living-cobra-v5 .cobra-hood-scales-v5 {

  fill: none !important;

  stroke:
    rgba(226,196,91,.35) !important;

  stroke-width:
    2px !important;

  stroke-linecap:
    round !important;

}


/* ============================================================
   MOUTH
   ============================================================ */

#living-cobra-v5 .cobra-mouth-v5 {

  fill: none !important;

  stroke:
    #0c0602 !important;

  stroke-width:
    4px !important;

  stroke-linecap:
    round !important;

}


/* ============================================================
   LOWER MOUTH
   ============================================================ */

#living-cobra-v5 .cobra-mouth-lower-v5 {

  fill: none !important;

  stroke:
    rgba(244,215,133,.32) !important;

  stroke-width:
    2px !important;

  stroke-linecap:
    round !important;

}


/* ============================================================
   FANGS
   ============================================================ */

#living-cobra-v5 .cobra-fangs-v5 {

  fill: none !important;

  stroke:
    #f5e8b5 !important;

  stroke-width:
    4px !important;

  stroke-linecap:
    round !important;

  stroke-linejoin:
    round !important;

  filter:
    drop-shadow(
      0 1px 2px rgba(0,0,0,.85)
    );

}


/* ============================================================
   TONGUE
   ============================================================ */

#living-cobra-v5 .cobra-tongue-v5 {

  fill: none !important;

  stroke:
    #8d2637 !important;

  stroke-width:
    2.8px !important;

  stroke-linecap:
    round !important;

  filter:
    drop-shadow(
      0 0 2px rgba(130,25,40,.4)
    );

}


/* ============================================================
   HEAD
   ============================================================ */

#living-cobra-v5 .cobra-head-v5 {

  transform-box:
    fill-box !important;

  transform-origin:
    center !important;

}
/* ============================================================
   GU LIBRARY — STUDENT HALL V2
   ROYAL EGYPTIAN CEREMONY
   ============================================================ */

.student-hall {
  position: relative !important;
  isolation: isolate !important;
  overflow: hidden !important;

  background:
    radial-gradient(
      ellipse at 50% 36%,
      rgba(214,177,69,.16) 0%,
      rgba(120,83,25,.08) 24%,
      transparent 52%
    ),
    linear-gradient(
      180deg,
      #0c0805 0%,
      #191109 45%,
      #0b0704 100%
    ) !important;
}


/* ============================================================
   STONE WALL
   ============================================================ */

.student-hall::before {
  content: "";

  position: absolute;
  inset: 0;

  z-index: -10;
  pointer-events: none;

  opacity: .75;

  background:
    repeating-linear-gradient(
      0deg,
      transparent 0 72px,
      rgba(218,181,93,.035) 73px,
      transparent 75px
    ),
    repeating-linear-gradient(
      90deg,
      transparent 0 118px,
      rgba(218,181,93,.025) 119px,
      transparent 121px
    ),
    radial-gradient(
      circle at 20% 25%,
      rgba(255,220,130,.04),
      transparent 24%
    ),
    radial-gradient(
      circle at 80% 35%,
      rgba(255,220,130,.035),
      transparent 25%
    );
}


/* ============================================================
   INNER TEMPLE FRAME
   ============================================================ */

.student-hall::after {
  content: "";

  position: absolute;

  top: 26px;
  bottom: 26px;
  left: 24px;
  right: 24px;

  z-index: -9;

  border:
    1px solid rgba(211,172,65,.18);

  box-shadow:
    inset 0 0 80px rgba(0,0,0,.75),
    inset 0 0 25px rgba(213,176,69,.045);

  pointer-events: none;
}


/* ============================================================
   TEMPLE GATE BEHIND STUDENTS
   ============================================================ */

.student-hall .student-podium::before {
  content: "";

  position: absolute;

  left: 50%;
  top: 40%;

  width: min(600px, 72vw);
  height: min(650px, 70vw);

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

  border:
    7px solid rgba(118,82,28,.72);

  border-bottom: 0;

  border-radius:
    300px 300px 0 0;

  background:
    radial-gradient(
      ellipse at center 30%,
      rgba(226,191,87,.18),
      rgba(68,44,14,.10) 45%,
      rgba(0,0,0,.38) 75%,
      transparent 76%
    );

  box-shadow:
    0 0 0 12px rgba(31,20,8,.9),
    0 0 0 14px rgba(202,160,48,.12),
    inset 0 0 55px rgba(216,175,64,.08),
    0 0 80px rgba(213,174,65,.07);

  pointer-events: none;

  z-index: -4;
}


/* ============================================================
   GATE INNER GLOW
   ============================================================ */

.student-hall .student-podium::after {
  content: "";

  position: absolute;

  left: 50%;
  top: 39%;

  width: min(430px, 58vw);
  height: min(560px, 66vw);

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

  border-radius:
    220px 220px 0 0;

  background:
    radial-gradient(
      ellipse at 50% 35%,
      rgba(243,213,117,.13),
      transparent 67%
    );

  filter: blur(8px);

  pointer-events: none;

  z-index: -5;

  animation:
    hallLight 6s ease-in-out infinite;
}


/* ============================================================
   TITLE
   ============================================================ */

.student-hall .student-heading {
  position: relative !important;
  z-index: 20 !important;

  text-align: center;

  padding-top: 58px;
}


.student-hall .student-heading::before {
  content:
    "𓂀   𓋹   𓆣   𓇳   𓂀";

  display: block;

  margin-bottom: 12px;

  color: rgba(218,180,74,.48);

  font-size: 22px;

  letter-spacing: 10px;

  text-shadow:
    0 0 12px rgba(218,180,74,.25);
}


.student-hall .student-heading h2 {
  display: inline-block;

  position: relative;

  margin: 0;

  padding:
    12px 48px 18px;

  color: #e7c968;

  font-family:
    Georgia,
    "Times New Roman",
    serif;

  font-size:
    clamp(28px, 4vw, 48px);

  font-weight: 700;

  letter-spacing: 4px;

  text-transform: uppercase;

  text-shadow:
    0 2px 0 #3b250c,
    0 0 18px rgba(226,187,72,.24);
}


.student-hall .student-heading h2::before,
.student-hall .student-heading h2::after {
  content: "𓂀";

  position: absolute;

  top: 50%;

  transform: translateY(-50%);

  color: rgba(220,181,69,.45);

  font-size: 22px;
}


.student-hall .student-heading h2::before {
  left: 5px;
}


.student-hall .student-heading h2::after {
  right: 5px;
}


/* ============================================================
   GOLDEN TITLE LINE
   ============================================================ */

.student-hall .student-heading h2 {
  border-bottom:
    1px solid rgba(218,178,69,.45);
}


/* ============================================================
   ROYAL LIGHT BEHIND FIRST PLACE
   ============================================================ */

.student-hall .student-card.first::before {
  content: "";

  position: absolute;

  left: 50%;
  top: 45%;

  width: 360px;
  height: 360px;

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

  border-radius: 50%;

  background:
    radial-gradient(
      circle,
      rgba(240,207,105,.17),
      rgba(214,174,62,.07) 42%,
      transparent 70%
    );

  filter: blur(3px);

  z-index: -1;

  pointer-events: none;

  animation:
    royalPulse 5s ease-in-out infinite;
}


/* ============================================================
   STUDENT CARDS
   ============================================================ */

.student-hall .student-card {
  position: relative !important;

  background:
    linear-gradient(
      145deg,
      rgba(58,41,21,.96),
      rgba(19,13,8,.98)
    ) !important;

  border:
    1px solid rgba(201,160,58,.30) !important;

  box-shadow:
    0 18px 40px rgba(0,0,0,.65),
    inset 0 0 30px rgba(218,178,69,.035);

  backdrop-filter: blur(5px);

  transition:
    transform .4s ease,
    box-shadow .4s ease,
    border-color .4s ease;
}


.student-hall .student-card:hover {
  transform:
    translateY(-10px)
    scale(1.02);

  border-color:
    rgba(235,203,107,.65) !important;

  box-shadow:
    0 25px 50px rgba(0,0,0,.72),
    0 0 35px rgba(215,176,65,.10);
}


/* ============================================================
   FIRST PLACE
   ============================================================ */

.student-hall .student-card.first {
  z-index: 8;

  border:
    2px solid rgba(229,194,91,.62) !important;

  box-shadow:
    0 25px 60px rgba(0,0,0,.75),
    0 0 45px rgba(220,180,65,.14),
    inset 0 0 35px rgba(225,190,76,.07);
}


/* ============================================================
   ROYAL CORNERS
   ============================================================ */

.student-hall .student-card.first::after {
  content:
    "𓂀                         𓂀";

  position: absolute;

  left: 12px;
  right: 12px;
  top: 10px;

  color: rgba(229,194,91,.45);

  font-size: 14px;

  white-space: pre;

  pointer-events: none;
}


/* ============================================================
   PHOTO FRAME
   ============================================================ */

.student-hall .student-frame {
  position: relative;

  border:
    4px solid #a47b28 !important;

  outline:
    1px solid rgba(242,211,119,.55);

  box-shadow:
    0 0 0 5px rgba(32,21,9,.95),
    0 0 0 7px rgba(202,159,53,.17),
    0 12px 30px rgba(0,0,0,.65);
}


.student-hall .student-frame::before {
  content: "";

  position: absolute;

  inset: -9px;

  border:
    1px solid rgba(218,179,67,.24);

  pointer-events: none;
}


/* ============================================================
   IMAGE
   ============================================================ */

.student-hall .student-frame img {
  display: block;

  filter:
    saturate(.88)
    contrast(1.08);

  transition:
    transform .5s ease,
    filter .5s ease;
}


.student-hall .student-card:hover .student-frame img {
  transform: scale(1.035);

  filter:
    saturate(1)
    contrast(1.12);
}


/* ============================================================
   CROWN
   ============================================================ */

.student-hall .student-crown {
  z-index: 30 !important;

  filter:
    drop-shadow(0 4px 5px rgba(0,0,0,.8))
    drop-shadow(0 0 12px rgba(226,185,66,.45));

  animation:
    crownFloat 3.5s ease-in-out infinite;
}


/* ============================================================
   NAMES
   ============================================================ */

.student-hall .student-card h2,
.student-hall .student-card h3 {
  color:
    #e6c66b !important;

  text-shadow:
    0 2px 6px rgba(0,0,0,.85);
}


.student-hall .student-card p {
  color:
    rgba(224,202,148,.75) !important;

  letter-spacing:
    2px;

  text-transform:
    uppercase;
}


/* ============================================================
   STAT TABLETS
   ============================================================ */

.student-hall .stat-grid {
  position: relative;

  z-index: 10;

  margin-top: 48px;
}


.student-hall .stat-card {
  position: relative;

  background:
    linear-gradient(
      145deg,
      rgba(68,49,27,.96),
      rgba(24,16,9,.98)
    ) !important;

  border:
    1px solid rgba(211,171,63,.28) !important;

  box-shadow:
    0 14px 32px rgba(0,0,0,.6),
    inset 0 0 20px rgba(218,178,69,.04);

  overflow: hidden;

  transition:
    transform .35s ease,
    box-shadow .35s ease;
}


.student-hall .stat-card::before {
  content:
    "𓂀";

  position: absolute;

  left: 12px;
  top: 8px;

  color:
    rgba(218,178,69,.25);

  font-size:
    18px;
}


.student-hall .stat-card::after {
  content:
    "𓋹";

  position: absolute;

  right: 12px;
  bottom: 8px;

  color:
    rgba(218,178,69,.22);

  font-size:
    18px;
}


.student-hall .stat-card:hover {
  transform:
    translateY(-7px);

  box-shadow:
    0 20px 40px rgba(0,0,0,.7),
    0 0 28px rgba(216,177,65,.10);
}


/* ============================================================
   STAT NUMBERS
   ============================================================ */

.student-hall .stat-number {
  color:
    #e7c969 !important;

  text-shadow:
    0 0 12px rgba(218,178,69,.25);
}


.student-hall .stat-label {
  color:
    rgba(222,201,151,.72) !important;

  letter-spacing:
    2px;
}


/* ============================================================
   STAT ICONS
   ============================================================ */

.student-hall .stat-icon {
  filter:
    drop-shadow(0 0 6px rgba(217,177,62,.20));
}


/* ============================================================
   FLOOR
   ============================================================ */

.student-hall .student-floor {
  position: absolute !important;

  left: 0;
  right: 0;
  bottom: 0;

  height: 24%;

  z-index: -2;

  background:
    linear-gradient(
      180deg,
      transparent,
      rgba(0,0,0,.30) 30%,
      rgba(0,0,0,.82)
    );

  pointer-events: none;
}


.student-hall .student-floor::before {
  content: "";

  position: absolute;

  left: 8%;
  right: 8%;
  top: 28%;

  height: 1px;

  background:
    linear-gradient(
      90deg,
      transparent,
      rgba(216,178,69,.22),
      transparent
    );
}


/* ============================================================
   FLOOR TEMPLE LINES
   ============================================================ */

.student-hall .student-floor::after {
  content: "";

  position: absolute;

  left: 18%;
  right: 18%;
  bottom: 0;

  height: 100%;

  opacity: .18;

  background:
    repeating-linear-gradient(
      90deg,
      transparent 0 90px,
      rgba(211,171,63,.25) 91px,
      transparent 93px
    );

  transform:
    perspective(300px)
    rotateX(58deg);

  transform-origin:
    bottom center;
}


/* ============================================================
   GOLDEN DUST
   ============================================================ */

.student-hall .student-entry-glow {
  position: absolute;

  left: 50%;
  top: 40%;

  width: 500px;
  height: 500px;

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

  border-radius: 50%;

  background:
    radial-gradient(
      circle,
      rgba(231,197,102,.10),
      transparent 68%
    );

  filter:
    blur(4px);

  z-index: -6;

  pointer-events: none;

  animation:
    lightBreath 6s ease-in-out infinite;
}


/* ============================================================
   TEMPLE SIDE PILLARS
   ============================================================ */

.student-hall {
  --pillar-gold:
    rgba(183,139,47,.45);
}


.student-hall .student-heading {
  isolation: isolate;
}


.student-hall .student-heading::after {
  content:
    "𓏏 𓏏 𓏏 𓏏 𓏏 𓏏 𓏏 𓏏 𓏏 𓏏 𓏏 𓏏";

  position: absolute;

  left: 4%;
  right: 4%;
  bottom: -20px;

  height: 12px;

  overflow: hidden;

  color:
    rgba(205,166,59,.22);

  font-size: 14px;

  letter-spacing: 12px;

  white-space: nowrap;

  pointer-events: none;
}


/* ============================================================
   ANIMATIONS
   ============================================================ */

@keyframes royalPulse {

  0%,
  100% {
    opacity: .55;
    transform:
      translate(-50%, -50%)
      scale(.94);
  }

  50% {
    opacity: .95;
    transform:
      translate(-50%, -50%)
      scale(1.05);
  }

}


@keyframes hallLight {

  0%,
  100% {
    opacity: .45;
  }

  50% {
    opacity: .85;
  }

}


@keyframes lightBreath {

  0%,
  100% {
    opacity: .35;
    transform:
      translate(-50%, -50%)
      scale(.95);
  }

  50% {
    opacity: .8;
    transform:
      translate(-50%, -50%)
      scale(1.05);
  }

}


@keyframes crownFloat {

  0%,
  100% {
    transform:
      translateX(-50%)
      translateY(0);
  }

  50% {
    transform:
      translateX(-50%)
      translateY(-7px);
  }

}


/* ============================================================
   MOBILE
   ============================================================ */

@media (max-width: 800px) {

  .student-hall::after {
    left: 10px;
    right: 10px;
  }

  .student-hall .student-heading {
    padding-top: 42px;
  }

  .student-hall .student-heading h2 {
    padding-inline: 25px;

    font-size: 27px;

    letter-spacing: 2px;
  }

  .student-hall .student-heading::before {
    font-size: 17px;
    letter-spacing: 5px;
  }

  .student-hall .student-podium::before {
    width: 88vw;
    height: 88vw;
  }

}


/* ============================================================
   REDUCED MOTION
   ============================================================ */

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

  .student-hall *,
  .student-hall *::before,
  .student-hall *::after {
    animation: none !important;
    transition: none !important;
  }

}
/* ============================================================
   STUDENT HALL — ANCIENT WEATHERED TEMPLE WALL
   FINAL BACKGROUND UPGRADE
   ============================================================ */

.student-hall {
  position: relative !important;
  isolation: isolate !important;
  overflow: hidden !important;

  /* حجر قديم */
  background:
    /* إضاءة قديمة في منتصف الجدار */
    radial-gradient(
      ellipse at 50% 28%,
      rgba(190,153,75,.16) 0%,
      rgba(128,92,38,.10) 28%,
      transparent 62%
    ),

    /* اختلاف ألوان الحجر */
    radial-gradient(
      ellipse at 15% 65%,
      rgba(115,79,32,.18),
      transparent 42%
    ),

    radial-gradient(
      ellipse at 88% 52%,
      rgba(76,53,27,.22),
      transparent 45%
    ),

    /* قاعدة الحجر */
    linear-gradient(
      180deg,
      #2a2117 0%,
      #332718 25%,
      #292015 55%,
      #18120c 100%
    ) !important;
}


/* ============================================================
   OLD STONE BLOCKS
   ============================================================ */

.student-hall::before {
  content: "";

  position: absolute;
  inset: 0;

  z-index: -10;

  pointer-events: none;

  opacity: .9;

  background:

    /* خطوط أفقية بين الأحجار */
    repeating-linear-gradient(
      0deg,
      transparent 0px,
      transparent 86px,
      rgba(12,8,4,.38) 87px,
      rgba(12,8,4,.38) 90px,
      transparent 91px
    ),

    /* خطوط رأسية غير منتظمة */
    repeating-linear-gradient(
      90deg,
      transparent 0px,
      transparent 155px,
      rgba(20,13,7,.26) 156px,
      rgba(20,13,7,.26) 159px,
      transparent 160px
    ),

    /* طبقة لون الحجر */
    radial-gradient(
      ellipse at 30% 20%,
      rgba(215,181,105,.09),
      transparent 32%
    );
}


/* ============================================================
   WEATHERED WALL / OLD PLASTER
   ============================================================ */

.student-hall::after {
  content: "";

  position: absolute;
  inset: 0;

  z-index: -9;

  pointer-events: none;

  opacity: .65;

  background:

    /* بقع رطوبة / تآكل */
    radial-gradient(
      ellipse at 12% 30%,
      rgba(20,13,7,.45) 0%,
      transparent 16%
    ),

    radial-gradient(
      ellipse at 83% 18%,
      rgba(16,10,5,.40) 0%,
      transparent 15%
    ),

    radial-gradient(
      ellipse at 73% 73%,
      rgba(12,8,4,.38) 0%,
      transparent 20%
    ),

    radial-gradient(
      ellipse at 25% 82%,
      rgba(10,7,4,.35) 0%,
      transparent 18%
    ),

    /* تدرج غبار قديم */
    linear-gradient(
      115deg,
      transparent 0%,
      rgba(222,186,103,.035) 35%,
      transparent 55%,
      rgba(0,0,0,.18) 80%
    );
}


/* ============================================================
   OLD WALL INNER BORDER
   ============================================================ */

.student-hall {
  box-shadow:
    inset 0 0 100px rgba(0,0,0,.75),
    inset 0 0 25px rgba(218,178,75,.08);
}


/* ============================================================
   STONE TOP CORNICE
   ============================================================ */

.student-hall .student-heading {
  position: relative !important;

  /*
     رفع العنوان لأعلى
  */
  margin-top: -55px !important;

  padding-top: 30px !important;

  z-index: 30 !important;
}


/* ============================================================
   PHARAONIC WALL BAND
   ============================================================ */

.student-hall .student-heading::after {
  content:
    "𓂀 𓋹 𓆣 𓇳 𓂀 𓋹 𓆣 𓇳 𓂀 𓋹 𓆣";

  position: absolute;

  left: 7%;
  right: 7%;

  bottom: -28px;

  height: 18px;

  color:
    rgba(213,174,72,.25);

  font-size: 15px;

  letter-spacing: 13px;

  white-space: nowrap;

  overflow: hidden;

  text-align: center;

  border-top:
    1px solid rgba(202,161,57,.20);

  border-bottom:
    1px solid rgba(202,161,57,.12);

  padding-top: 4px;

  pointer-events: none;
}


/* ============================================================
   TITLE — HIGHER + EMBEDDED INTO WALL
   ============================================================ */

.student-hall .student-heading h2 {
  position: relative;

  margin-top: 0 !important;

  padding:
    12px 48px 16px !important;

  background:
    linear-gradient(
      180deg,
      rgba(63,45,25,.72),
      rgba(30,21,12,.58)
    );

  border-top:
    1px solid rgba(223,187,94,.24);

  border-bottom:
    1px solid rgba(223,187,94,.42);

  box-shadow:
    0 8px 25px rgba(0,0,0,.35),
    inset 0 1px 0 rgba(240,210,126,.08);

  text-shadow:
    0 2px 3px #090603,
    0 0 15px rgba(216,175,66,.20);
}


/* ============================================================
   CRACKS
   ============================================================ */

.student-hall .student-heading h2::before {
  content: "";

  position: absolute;

  left: -95px;
  top: 30px;

  width: 90px;
  height: 120px;

  background:
    linear-gradient(
      112deg,
      transparent 0 45%,
      rgba(15,9,4,.65) 46% 48%,
      transparent 49%
    ),
    linear-gradient(
      70deg,
      transparent 0 57%,
      rgba(15,9,4,.45) 58% 60%,
      transparent 61%
    );

  opacity: .65;

  transform: rotate(-8deg);

  pointer-events: none;
}


.student-hall .student-heading h2::after {
  content: "";

  position: absolute;

  right: -105px;
  top: 10px;

  width: 100px;
  height: 125px;

  background:
    linear-gradient(
      72deg,
      transparent 0 42%,
      rgba(12,8,4,.55) 43% 45%,
      transparent 46%
    ),
    linear-gradient(
      120deg,
      transparent 0 60%,
      rgba(12,8,4,.45) 61% 63%,
      transparent 64%
    );

  opacity: .55;

  transform: rotate(10deg);

  pointer-events: none;
}


/* ============================================================
   LEFT / RIGHT ANCIENT WALL PANELS
   ============================================================ */

.student-hall .student-podium {
  position: relative;
}


/* LEFT WALL */
.student-hall .student-podium > .student-card.second::before {
  content:
    "𓂀\A𓋹\A𓆣\A𓇳";

  white-space: pre;

  position: absolute;

  left: -145px;
  top: 20px;

  width: 95px;

  padding: 25px 10px;

  color:
    rgba(211,174,75,.20);

  font-size: 25px;

  line-height: 2;

  text-align: center;

  background:
    linear-gradient(
      90deg,
      rgba(27,18,9,.55),
      rgba(78,55,26,.25)
    );

  border-left:
    5px solid rgba(155,112,38,.38);

  border-right:
    1px solid rgba(205,165,59,.18);

  box-shadow:
    inset 0 0 20px rgba(0,0,0,.5);

  pointer-events: none;
}


/* RIGHT WALL */
.student-hall .student-podium > .student-card.third::after {
  content:
    "𓅃\A𓇳\A𓋹\A𓂀";

  white-space: pre;

  position: absolute;

  right: -145px;
  top: 20px;

  width: 95px;

  padding: 25px 10px;

  color:
    rgba(211,174,75,.20);

  font-size: 25px;

  line-height: 2;

  text-align: center;

  background:
    linear-gradient(
      270deg,
      rgba(27,18,9,.55),
      rgba(78,55,26,.25)
    );

  border-right:
    5px solid rgba(155,112,38,.38);

  border-left:
    1px solid rgba(205,165,59,.18);

  box-shadow:
    inset 0 0 20px rgba(0,0,0,.5);

  pointer-events: none;
}


/* ============================================================
   OLD STONE HORIZONTAL LAYERS
   ============================================================ */

.student-hall .student-floor::before {
  content: "";

  position: absolute;

  left: 0;
  right: 0;

  top: 15%;

  height: 70%;

  opacity: .35;

  background:
    repeating-linear-gradient(
      0deg,
      transparent 0 58px,
      rgba(9,6,3,.55) 59px,
      transparent 62px
    );

  pointer-events: none;
}


/* ============================================================
   WALL DUST
   ============================================================ */

.student-hall .student-entry-glow {
  background:
    radial-gradient(
      circle at 50% 50%,
      rgba(232,199,111,.10),
      transparent 65%
    );

  filter: blur(12px);

  opacity: .7;
}


/* ============================================================
   OLD GOLD LIGHT
   ============================================================ */

.student-hall .student-card.first {
  box-shadow:
    0 25px 55px rgba(0,0,0,.75),
    0 0 45px rgba(216,177,63,.10),
    inset 0 0 35px rgba(225,190,76,.055);
}


/* ============================================================
   MOBILE
   ============================================================ */

@media (max-width: 900px) {

  .student-hall .student-heading {
    margin-top: -25px !important;
  }

  .student-hall .student-podium > .student-card.second::before,
  .student-hall .student-podium > .student-card.third::after {
    display: none;
  }

}
/* ============================================================
   STUDENT HALL — FLOATING CELEBRATION
   ============================================================ */

/* ------------------------------------------------------------
   FLOAT
   ------------------------------------------------------------ */

.student-hall .student-card {
  animation:
    studentCardFloat 4.8s ease-in-out infinite !important;
}


/* المركز الأول يطفو أكثر قليلاً */
.student-hall .student-card.first {
  animation:
    studentCardFloatFirst 4.2s ease-in-out infinite !important;
}


/* ------------------------------------------------------------
   GOLDEN AURA
   نستخدم box-shadow فقط حتى لا نلمس الزخارف
   ------------------------------------------------------------ */

.student-hall .student-card {
  box-shadow:
    0 18px 35px rgba(0,0,0,.55),
    0 0 0 rgba(220,180,70,0);
}


.student-hall .student-card:hover {
  box-shadow:
    0 28px 55px rgba(0,0,0,.75),
    0 0 35px rgba(224,184,70,.22),
    0 0 70px rgba(224,184,70,.08);
}


/* ------------------------------------------------------------
   CENTER CARD — SPECIAL GOLDEN AURA
   ------------------------------------------------------------ */

.student-hall .student-card.first {
  box-shadow:
    0 20px 40px rgba(0,0,0,.65),
    0 0 22px rgba(220,180,70,.10);
}

.student-hall .student-card.first:hover {
  box-shadow:
    0 30px 65px rgba(0,0,0,.8),
    0 0 35px rgba(231,194,76,.25),
    0 0 80px rgba(231,194,76,.10);
}


/* ============================================================
   GOLDEN PARTICLES
   نعملها على stat / frame بدل card pseudo-elements
   ============================================================ */

.student-hall .student-frame {
  position: relative !important;
}


/* particle 1 */
.student-hall .student-frame::before {
  content: "✦";

  position: absolute;

  top: 8%;
  left: 8%;

  color: #e5c45e;

  font-size: 13px;

  opacity: .45;

  pointer-events: none;

  z-index: 30;

  animation:
    celebrationSpark1 2.8s ease-in-out infinite;
}


/* particle 2 */
.student-hall .student-frame::after {
  content: "✦";

  position: absolute;

  right: 9%;
  bottom: 12%;

  color: #f0d77a;

  font-size: 11px;

  opacity: .4;

  pointer-events: none;

  z-index: 30;

  animation:
    celebrationSpark2 3.4s ease-in-out infinite;
}


/* ============================================================
   FIRST PLACE — MORE PARTICLES
   ============================================================ */

.student-hall .student-card.first .student-frame::before {
  content: "✦   ˚   ✦";

  top: 7%;
  left: 8%;

  letter-spacing: 12px;

  font-size: 10px;

  opacity: .65;

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


.student-hall .student-card.first .student-frame::after {
  content: "✦  ˚  ✦";

  right: 8%;
  bottom: 8%;

  letter-spacing: 9px;

  font-size: 10px;

  opacity: .55;

  animation:
    celebrationGoldReverse 3s ease-in-out infinite;
}


/* ============================================================
   CROWN — FLOATING
   ============================================================ */

.student-hall .student-card.first .student-crown {

  animation:
    crownCelebration 2.8s ease-in-out infinite !important;

  filter:
    drop-shadow(0 4px 5px rgba(0,0,0,.8))
    drop-shadow(0 0 10px rgba(235,199,79,.35));
}


/* ============================================================
   ANIMATIONS
   ============================================================ */

@keyframes studentCardFloat {

  0%,
  100% {
    transform:
      translateY(0);
  }

  50% {
    transform:
      translateY(-7px);
  }

}


@keyframes studentCardFloatFirst {

  0%,
  100% {
    transform:
      translateY(0)
      scale(1);
  }

  50% {
    transform:
      translateY(-10px)
      scale(1.008);
  }

}


/* ============================================================
   SPARK 1
   ============================================================ */

@keyframes celebrationSpark1 {

  0% {
    transform:
      translate(0,0)
      scale(.6)
      rotate(0deg);

    opacity: 0;
  }

  30% {
    opacity: .8;
  }

  60% {
    transform:
      translate(-7px,-12px)
      scale(1.1)
      rotate(90deg);

    opacity: .9;
  }

  100% {
    transform:
      translate(-12px,-22px)
      scale(.3)
      rotate(180deg);

    opacity: 0;
  }

}


/* ============================================================
   SPARK 2
   ============================================================ */

@keyframes celebrationSpark2 {

  0% {
    transform:
      translate(0,0)
      scale(.5);

    opacity: 0;
  }

  35% {
    opacity: .8;
  }

  70% {
    transform:
      translate(10px,-16px)
      scale(1.15)
      rotate(90deg);

    opacity: .75;
  }

  100% {
    transform:
      translate(17px,-28px)
      scale(.2);

    opacity: 0;
  }

}


/* ============================================================
   GOLD PARTICLES
   ============================================================ */

@keyframes celebrationGold {

  0%,
  100% {
    transform:
      translateY(5px)
      scale(.7);

    opacity: .2;
  }

  50% {
    transform:
      translateY(-13px)
      scale(1.25);

    opacity: .9;
  }

}


@keyframes celebrationGoldReverse {

  0%,
  100% {
    transform:
      translateY(0)
      translateX(0)
      scale(.7);

    opacity: .15;
  }

  50% {
    transform:
      translateY(-16px)
      translateX(7px)
      scale(1.2);

    opacity: .85;
  }

}


/* ============================================================
   CROWN CELEBRATION
   ============================================================ */

@keyframes crownCelebration {

  0%,
  100% {
    transform:
      translateX(-50%)
      translateY(0)
      rotate(0deg)
      scale(1);
  }

  50% {
    transform:
      translateX(-50%)
      translateY(-9px)
      rotate(-2deg)
      scale(1.08);
  }

}


/* ============================================================
   HOVER — CELEBRATION GETS STRONGER
   ============================================================ */

.student-hall .student-card:hover
.student-frame::before {

  animation-duration:
    1.5s;

}


.student-hall .student-card:hover
.student-frame::after {

  animation-duration:
    1.8s;

}


/* ============================================================
   REDUCED MOTION
   ============================================================ */

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

  .student-hall .student-card,
  .student-hall .student-card.first .student-crown,
  .student-hall .student-frame::before,
  .student-hall .student-frame::after {

    animation: none !important;
  }

}
/* ============================================================
   STUDENT CARDS — IDLE FLOAT + PREMIUM HOVER
   ============================================================ */

.student-hall .student-card {
  position: relative !important;
  transform-style: preserve-3d !important;
  will-change: transform;

  /* طفو خفيف جدًا */
  animation: studentIdleFloat 5s ease-in-out infinite;

  transition:
    transform .45s cubic-bezier(.2,.8,.2,1),
    box-shadow .45s ease,
    filter .35s ease;
}


/* كل بطاقة بتتحرك بتوقيت مختلف */
.student-hall .student-card.second {
  animation-delay: -.8s;
}

.student-hall .student-card.first {
  animation-delay: -1.7s;
}

.student-hall .student-card.third {
  animation-delay: -2.5s;
}


/* ============================================================
   HOVER
   ============================================================ */

.student-hall .student-card:hover {

  /* توقف الطفو أثناء الـhover */
  animation-play-state: paused;

  transform:
    translateY(-18px)
    scale(1.045)
    rotateX(3deg)
    rotateY(0deg) !important;

  z-index: 100 !important;

  box-shadow:
    0 35px 65px rgba(0,0,0,.78),
    0 0 35px rgba(225,187,70,.24),
    0 0 80px rgba(225,187,70,.10);

  filter:
    brightness(1.06);
}


/* المركز الأول أقوى */
.student-hall .student-card.first:hover {

  transform:
    translateY(-22px)
    scale(1.055)
    rotateX(3deg) !important;

  box-shadow:
    0 40px 75px rgba(0,0,0,.82),
    0 0 45px rgba(231,194,76,.30),
    0 0 100px rgba(231,194,76,.12);
}


/* ============================================================
   IMAGE
   ============================================================ */

.student-hall .student-card .student-frame {
  transition:
    transform .55s cubic-bezier(.2,.8,.2,1),
    box-shadow .45s ease;
}


.student-hall .student-card:hover .student-frame {

  transform:
    translateZ(18px)
    scale(1.025);

  box-shadow:
    0 0 0 4px rgba(28,19,9,.95),
    0 0 0 6px rgba(215,174,64,.30),
    0 0 35px rgba(215,174,64,.22),
    0 18px 35px rgba(0,0,0,.65);
}


/* ============================================================
   IMAGE ZOOM
   ============================================================ */

.student-hall .student-card .student-frame img {

  transition:
    transform .65s cubic-bezier(.2,.8,.2,1),
    filter .5s ease;
}


.student-hall .student-card:hover
.student-frame img {

  transform:
    scale(1.07);

  filter:
    brightness(1.08)
    contrast(1.06)
    saturate(1.08);
}


/* ============================================================
   GOLDEN LIGHT
   ============================================================ */

.student-hall .student-card .student-frame {

  overflow: hidden;
}


.student-hall .student-card .student-frame::after {

  content: "";

  position: absolute;

  top: -100%;
  left: -70%;

  width: 35%;
  height: 300%;

  background:
    linear-gradient(
      90deg,
      transparent,
      rgba(255,224,139,.20),
      transparent
    );

  transform: rotate(25deg);

  opacity: 0;

  pointer-events: none;

  z-index: 20;
}


.student-hall .student-card:hover
.student-frame::after {

  left: 145%;

  opacity: 1;

  transition:
    left .85s ease,
    opacity .15s ease;
}


/* ============================================================
   NAME
   ============================================================ */

.student-hall .student-card h2,
.student-hall .student-card h3 {

  transition:
    transform .4s ease,
    text-shadow .4s ease;
}


.student-hall .student-card:hover h2,
.student-hall .student-card:hover h3 {

  transform:
    translateY(-4px);

  text-shadow:
    0 0 14px rgba(231,194,76,.35),
    0 3px 6px rgba(0,0,0,.85);
}


/* ============================================================
   PLACE
   ============================================================ */

.student-hall .student-card p {

  transition:
    letter-spacing .4s ease,
    opacity .4s ease,
    transform .4s ease;
}


.student-hall .student-card:hover p {

  letter-spacing:
    3px;

  transform:
    translateY(-2px);

  text-shadow:
    0 0 10px rgba(226,188,72,.3);
}


/* ============================================================
   CROWN
   ============================================================ */

.student-hall .student-card.first .student-crown {

  transition:
    transform .45s cubic-bezier(.2,.8,.2,1),
    filter .4s ease;
}


.student-hall .student-card.first:hover .student-crown {

  transform:
    translateX(-50%)
    translateY(-12px)
    scale(1.16)
    rotate(-4deg) !important;

  filter:
    drop-shadow(0 5px 5px rgba(0,0,0,.8))
    drop-shadow(0 0 20px rgba(239,204,92,.75));
}


/* ============================================================
   IDLE FLOAT
   ============================================================ */

@keyframes studentIdleFloat {

  0%,
  100% {
    transform:
      translateY(0);
  }

  50% {
    transform:
      translateY(-5px);
  }

}


/* ============================================================
   MOBILE
   ============================================================ */

@media (max-width: 700px) {

  .student-hall .student-card:hover {

    transform:
      translateY(-10px)
      scale(1.02) !important;
  }

}
/* ============================================================
   STUDENT HALL — CLEAR PORTRAITS
   KEEP GOLD FRAME / REMOVE GOLD WASH FROM FACES
   ============================================================ */


/* ============================================================
   IMAGE — MAKE FACES CLEAR
   ============================================================ */

.student-hall .student-card .student-frame img {
  position: relative !important;

  z-index: 2 !important;

  opacity: 1 !important;

  /*
    نرجع التفاصيل والـcontrast
  */
  filter:
    brightness(.86)
    contrast(1.18)
    saturate(.94) !important;

  transition:
    transform .65s cubic-bezier(.2,.8,.2,1),
    filter .45s ease !important;
}


/* ============================================================
   HOVER — CLEAR + SLIGHTLY BRIGHTER
   ============================================================ */

.student-hall .student-card:hover
.student-frame img {

  filter:
    brightness(.94)
    contrast(1.15)
    saturate(1.02) !important;

  transform:
    scale(1.045) !important;
}


/* ============================================================
   GOLD LIGHT SWEEP
   خلي الشعاع فوق الإطار لكن خفيف جدًا على الصورة
   ============================================================ */

.student-hall .student-card .student-frame::after {

  opacity: 0 !important;

  background:
    linear-gradient(
      90deg,
      transparent 0%,
      rgba(255,224,139,.08) 48%,
      transparent 100%
    ) !important;
}


.student-hall .student-card:hover
.student-frame::after {

  opacity: .65 !important;

  left: 145% !important;

  transition:
    left .85s ease,
    opacity .2s ease !important;
}


/* ============================================================
   IMAGE PROTECTION LAYER
   يمنع أي تأثير ذهبي خارجي من غسل الصورة
   ============================================================ */

.student-hall .student-frame {
  isolation: isolate !important;
}


/* ============================================================
   PREVENT BLENDING WITH GOLD DECORATIONS
   ============================================================ */

.student-hall .student-frame img {
  mix-blend-mode: normal !important;
}


/* ============================================================
   FACE AREA — NATURAL COLORS
   ============================================================ */

.student-hall .student-card.first
.student-frame img {

  filter:
    brightness(.84)
    contrast(1.20)
    saturate(.95) !important;
}


.student-hall .student-card.first:hover
.student-frame img {

  filter:
    brightness(.93)
    contrast(1.16)
    saturate(1.02) !important;
}


/* ============================================================
   IMAGE FRAME — GOLD STAYS OUTSIDE
   ============================================================ */

.student-hall .student-frame {
  box-shadow:
    0 0 0 4px rgba(32,22,10,.95),
    0 0 0 6px rgba(211,169,61,.35),
    0 10px 25px rgba(0,0,0,.65) !important;
}


/* ============================================================
   KEEP PHARAONIC DECORATIONS VISIBLE
   ============================================================ */

.student-hall .student-card::before,
.student-hall .student-card::after {
  pointer-events: none !important;
}
/* ============================================================
   STUDENT HALL — FINAL OVERFLOW FIX
   لا يغير تصميم الموقع أو الـ Temple
   ============================================================ */

/* 1 — امنع Student Hall من توسيع الصفحة */
.student-hall {
  position: relative;
  width: 100%;
  max-width: 100%;
  min-width: 0;
  overflow-x: clip;
  overflow-y: visible;
  box-sizing: border-box;
}

/* 2 — خلي كل العناصر داخله محسوبة صح */
.student-hall,
.student-hall *,
.student-hall *::before,
.student-hall *::after {
  box-sizing: border-box;
}

/* 3 — الـ Cards لا تتسبب في زيادة عرض الصفحة */
.student-hall .student-card {
  max-width: 100%;
  min-width: 0;
}

/* 4 — الـ Frame يحتفظ بكل التأثيرات داخله */
.student-hall .student-frame {
  position: relative;
  max-width: 100%;
  min-width: 0;
  overflow: hidden;
  isolation: isolate;
}

/* 5 — الصورة لا تكبر خارج الـFrame */
.student-hall .student-frame img {
  display: block;
  max-width: 100%;
}

/* 6 — الشعاع الذهبي ممنوع يخرج من الـFrame */
.student-hall .student-frame::after {
  max-width: none;
  pointer-events: none;
}

/* 7 — الـ3D Hover يفضل داخل مساحة الـHall */
.student-hall .student-card:hover,
.student-hall .student-card.first:hover {
  z-index: 100;
}

/* 8 — لا تسمح للـDecorations بتوسيع الصفحة */
.student-hall .student-card::before,
.student-hall .student-card::after {
  pointer-events: none;
}

/* ============================================================
   FINAL VIEWPORT PROTECTION
   مهم: لا نستخدم 100vw
   ============================================================ */

html {
  overflow-x: clip;
}

/* ============================================================
   MOBILE
   ============================================================ */

@media (max-width: 700px) {

  .student-hall {
    width: 100%;
    max-width: 100%;
  }

  .student-hall .student-card {
    max-width: 100%;
  }

}
/* ============================================================
   GU LIBRARY — RELIC SERVICES
   ALTERNATING TEMPLE DISPLAY
   ============================================================ */

.relic-grid {
  position: relative;
  z-index: 20;

  width: min(1180px, 90%);
  margin: 0 auto;

  display: grid;
  grid-template-columns: repeat(4, 1fr);

  gap: clamp(25px, 3.5vw, 55px);

  align-items: start;

  padding: 100px 0 150px;
}


/* ============================================================
   STATION
   ============================================================ */

.relic-station {
  position: relative;

  width: 100%;

  display: flex;
  justify-content: center;

  transition:
    transform .45s cubic-bezier(.16,1,.3,1);
}


/* طلوع / نزول */

.relic-station:nth-child(odd) {
  transform: translateY(-42px);
}

.relic-station:nth-child(even) {
  transform: translateY(42px);
}


/* حركة بسيطة للعنصر كله */

.relic-station:hover {
  transform: translateY(-50px);
}

.relic-station:nth-child(even):hover {
  transform: translateY(34px);
}


/* ============================================================
   CARD
   ============================================================ */

.relic-btn {
  position: relative;

  width: 100%;
  max-width: 245px;
  height: 330px;

  padding: 22px 16px 24px;

  border: 0;

  border-radius: 6px;

  cursor: pointer;

  overflow: visible;

  isolation: isolate;

  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;

  background:
    linear-gradient(
      135deg,
      rgba(77, 52, 25, .98) 0%,
      rgba(39, 27, 15, .98) 42%,
      rgba(67, 43, 19, .98) 100%
    );

  box-shadow:
    0 22px 35px rgba(0,0,0,.45),
    0 5px 0 rgba(12,8,4,.9);

  transition:
    transform .35s cubic-bezier(.16,1,.3,1),
    box-shadow .35s ease,
    filter .35s ease;

  will-change: transform;
}


/* ============================================================
   OUTER GOLD FRAME
   ============================================================ */

.relic-btn::before {
  content: "";

  position: absolute;
  inset: 0;

  border: 2px solid rgba(205,160,62,.72);

  border-radius: 6px;

  box-shadow:
    inset 0 0 0 4px rgba(27,18,9,.85),
    inset 0 0 0 5px rgba(231,190,88,.20);

  pointer-events: none;

  z-index: 8;
}


/* ============================================================
   INNER FRAME
   ============================================================ */

.relic-btn::after {
  content: "";

  position: absolute;

  inset: 12px;

  border: 1px solid rgba(221,178,77,.38);

  pointer-events: none;

  z-index: 7;
}


/* ============================================================
   TOP TEMPLE ORNAMENT
   ============================================================ */

.relic-btn > .relic-glow-ring {
  position: absolute;

  top: -17px;
  left: 50%;

  width: 76px;
  height: 34px;

  transform: translateX(-50%);

  border: 2px solid rgba(218,174,70,.72);

  border-bottom: 0;

  border-radius: 50% 50% 0 0;

  background:
    linear-gradient(
      180deg,
      rgba(125,87,28,.9),
      rgba(45,29,13,.95)
    );

  opacity: 1;

  box-shadow:
    0 -4px 12px rgba(211,164,53,.12);

  z-index: 10;

  transition:
    width .35s ease,
    box-shadow .35s ease;
}


/* ============================================================
   CENTER ORNAMENT
   ============================================================ */

.relic-btn > .relic-glow-ring::after {
  content: "𓂀";

  position: absolute;

  left: 50%;
  top: 50%;

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

  font-size: 16px;

  color: #f1cc68;

  text-shadow:
    0 0 8px rgba(241,204,104,.35);
}


/* ============================================================
   ART AREA
   ============================================================ */

.relic-figure {
  position: relative;

  z-index: 6;

  width: 155px;
  height: 185px;

  margin-bottom: 8px;

  display: block;

  transform: translateY(0) scale(1);

  filter:
    drop-shadow(0 12px 9px rgba(0,0,0,.45));

  transition:
    transform .4s cubic-bezier(.16,1,.3,1),
    filter .4s ease;
}


/* كل عنصر يطلع عند الـhover */

.relic-btn:hover .relic-figure {
  transform:
    translateY(-14px)
    scale(1.055);

  filter:
    drop-shadow(0 18px 14px rgba(0,0,0,.5))
    drop-shadow(0 0 10px rgba(220,174,65,.18));
}


/* ============================================================
   DIFFERENT OBJECT SIZES
   ============================================================ */

.relic-guardian {
  width: 145px;
}

.relic-mirror {
  width: 165px;
}

.relic-scroll {
  width: 165px;
}

.relic-tablet {
  width: 150px;
}


/* ============================================================
   GOLD FLOOR / PEDESTAL
   ============================================================ */

.relic-pedestal {
  position: absolute;

  left: 50%;
  bottom: 62px;

  width: 145px;
  height: 12px;

  transform: translateX(-50%);

  background:
    linear-gradient(
      90deg,
      transparent,
      rgba(216,174,68,.95) 20%,
      rgba(250,215,112,1) 50%,
      rgba(216,174,68,.95) 80%,
      transparent
    );

  box-shadow:
    0 5px 14px rgba(0,0,0,.55),
    0 0 13px rgba(220,174,65,.18);

  border-radius: 50%;

  z-index: 5;

  transition:
    width .35s ease,
    box-shadow .35s ease;
}


.relic-btn:hover .relic-pedestal {
  width: 165px;

  box-shadow:
    0 6px 16px rgba(0,0,0,.6),
    0 0 20px rgba(220,174,65,.28);
}


/* ============================================================
   LABEL
   ============================================================ */

.relic-label {
  position: relative;

  z-index: 10;

  min-width: 130px;

  margin-top: 12px;
  padding: 9px 16px;

  color: #f1d078;

  font-family:
    "Cinzel",
    Georgia,
    serif;

  font-size: 13px;
  font-weight: 700;

  letter-spacing: 2px;

  text-transform: uppercase;

  text-align: center;

  background:
    linear-gradient(
      90deg,
      transparent,
      rgba(20,13,7,.8),
      transparent
    );

  border-top: 1px solid rgba(218,174,70,.32);
  border-bottom: 1px solid rgba(218,174,70,.32);

  text-shadow:
    0 2px 4px rgba(0,0,0,.9);

  transition:
    color .3s ease,
    letter-spacing .3s ease,
    border-color .3s ease;
}


.relic-btn:hover .relic-label {
  color: #ffe49a;

  letter-spacing: 2.7px;

  border-color:
    rgba(244,211,94,.65);
}


/* ============================================================
   HOVER CARD
   ============================================================ */

.relic-btn:hover {
  transform: translateY(-10px);

  box-shadow:
    0 30px 45px rgba(0,0,0,.52),
    0 0 25px rgba(206,160,56,.12),
    0 5px 0 rgba(10,7,3,.95);
}


.relic-btn:hover > .relic-glow-ring {
  width: 88px;

  box-shadow:
    0 -5px 20px rgba(225,180,67,.22);
}


/* ============================================================
   SMALL DECORATIVE CORNERS
   ============================================================ */

.relic-btn {
  background-image:
    linear-gradient(
      135deg,
      rgba(255,220,130,.04) 0%,
      transparent 20%,
      transparent 80%,
      rgba(255,220,130,.035) 100%
    );
}


/* ============================================================
   REMOVE HEAVY CONTINUOUS ANIMATION
   ============================================================ */

.relic-btn,
.relic-figure,
.relic-glow-ring,
.relic-pedestal,
.relic-label {
  animation: none;
}


/* ============================================================
   TABLET
   ============================================================ */

@media (max-width: 1050px) {

  .relic-grid {
    grid-template-columns: repeat(2, 1fr);

    width: min(700px, 88%);

    gap: 70px 35px;
  }

  .relic-station:nth-child(odd),
  .relic-station:nth-child(even) {
    transform: none;
  }

  .relic-station:nth-child(3) {
    transform: translateY(-25px);
  }

  .relic-station:nth-child(4) {
    transform: translateY(25px);
  }
}


/* ============================================================
   MOBILE
   ============================================================ */

@media (max-width: 560px) {

  .relic-grid {
    grid-template-columns: 1fr;

    width: min(300px, 85%);

    gap: 35px;

    padding-top: 60px;
  }

  .relic-station:nth-child(n) {
    transform: none;
  }

  .relic-btn {
    max-width: 250px;
  }
}
/* ============================================================
   HALL OF STORIES — ROYAL PAPYRUS ARCHIVE
   BACKGROUND ONLY
   Does NOT change books / shelves / book-grid
   ============================================================ */

.stories {
  position: relative;
  isolation: isolate;
  overflow: hidden;

  background:
    /* warm center light */
    radial-gradient(
      ellipse 55% 42% at 50% 18%,
      rgba(196, 151, 66, .18) 0%,
      rgba(91, 64, 28, .10) 34%,
      transparent 70%
    ),

    /* side darkness */
    linear-gradient(
      90deg,
      rgba(8, 6, 4, .96) 0%,
      rgba(35, 25, 14, .92) 16%,
      rgba(61, 43, 23, .86) 50%,
      rgba(35, 25, 14, .92) 84%,
      rgba(8, 6, 4, .96) 100%
    ),

    /* stone base */
    linear-gradient(
      180deg,
      #241a10 0%,
      #3a2917 48%,
      #17110b 100%
    );

  color: #ead19a;
}


/* ============================================================
   ANCIENT STONE TEXTURE
   ============================================================ */

.stories::before {
  content: "";

  position: absolute;
  inset: 0;

  z-index: -5;

  opacity: .48;

  background:
    repeating-linear-gradient(
      0deg,
      transparent 0,
      transparent 74px,
      rgba(214, 177, 103, .035) 75px,
      transparent 76px
    ),
    repeating-linear-gradient(
      90deg,
      transparent 0,
      transparent 110px,
      rgba(0, 0, 0, .08) 111px,
      transparent 113px
    );

  pointer-events: none;
}


/* ============================================================
   GIANT HIEROGLYPHIC WALL
   ============================================================ */

.stories::after {
  content:
    "𓂀   𓋹   𓏏   𓆣   𓅓   𓇳   𓂀   𓋹   𓏏"
    "   𓆣   𓅓   𓇳   𓂀   𓋹   𓏏   𓆣";

  position: absolute;

  z-index: -4;

  left: 50%;
  top: 50%;

  width: 125%;

  transform:
    translate(-50%, -50%)
    rotate(-2deg);

  font-family: serif;

  font-size: clamp(55px, 8vw, 120px);

  line-height: 2.15;

  letter-spacing: 20px;

  text-align: center;

  color: rgba(213, 173, 93, .045);

  text-shadow:
    0 1px 0 rgba(255, 224, 147, .025),
    0 -1px 0 rgba(0, 0, 0, .3);

  pointer-events: none;

  user-select: none;
}


/* ============================================================
   TOP TEMPLE FRIEZE
   ============================================================ */

.stories .stories-heading {
  position: relative;
  z-index: 10;
}


/* gold line above heading */

.stories .stories-heading::before {
  content: "𓂀 𓋹 𓇳 𓋹 𓂀";

  display: block;

  margin: 0 auto 20px;

  width: fit-content;

  font-size: 22px;

  letter-spacing: 12px;

  color: rgba(225, 184, 82, .72);

  text-shadow:
    0 0 12px rgba(225, 184, 82, .16);
}


/* ============================================================
   TEMPLE SIDE PILASTERS
   ============================================================ */

.stories .stories-pilaster {
  z-index: -1;

  width: 72px !important;

  background:
    linear-gradient(
      90deg,
      #120d08 0%,
      #4b341c 22%,
      #8c6832 48%,
      #49321b 75%,
      #100b07 100%
    ) !important;

  border-left: 2px solid rgba(211, 169, 76, .28);
  border-right: 2px solid rgba(211, 169, 76, .28);

  box-shadow:
    inset 0 0 20px rgba(0, 0, 0, .55),
    0 0 30px rgba(0, 0, 0, .38);
}


/* pilaster inner decoration */

.stories .stories-pilaster::before {
  content: "𓂀\A𓋹\A𓆣\A𓇳\A𓂀";

  white-space: pre;

  position: absolute;

  inset: 50px 0;

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

  text-align: center;

  line-height: 2.3;

  font-size: 24px;

  color: rgba(224, 181, 79, .20);
}


/* ============================================================
   GOLDEN TEMPLE BEAM
   ============================================================ */

.stories-heading::after {
  content: "";

  position: absolute;

  left: 50%;
  bottom: -28px;

  width: min(760px, 75vw);
  height: 1px;

  transform: translateX(-50%);

  background:
    linear-gradient(
      90deg,
      transparent,
      rgba(212, 175, 55, .65),
      #e6c56b,
      rgba(212, 175, 55, .65),
      transparent
    );

  box-shadow:
    0 0 12px rgba(212, 175, 55, .12);
}


/* ============================================================
   BACKGROUND PAPYRUS SCROLLS
   ============================================================ */

.stories .book-grid::before,
.stories .book-grid::after {
  content: "𓂀 𓋹 𓏏 𓆣 𓅓";

  position: absolute;

  top: 8%;

  width: 190px;
  height: 520px;

  padding: 40px 20px;

  box-sizing: border-box;

  writing-mode: vertical-rl;

  text-align: center;

  font-size: 28px;

  letter-spacing: 12px;

  color: rgba(88, 61, 28, .34);

  background:
    linear-gradient(
      90deg,
      rgba(105, 74, 36, .12),
      rgba(218, 183, 111, .08),
      rgba(78, 52, 24, .14)
    );

  border: 1px solid rgba(190, 146, 68, .16);

  box-shadow:
    inset 0 0 30px rgba(0, 0, 0, .32),
    0 20px 35px rgba(0, 0, 0, .18);

  border-radius: 8px;

  z-index: -1;

  pointer-events: none;
}


.stories .book-grid::before {
  left: 3%;

  transform:
    rotate(-4deg);
}


.stories .book-grid::after {
  right: 3%;

  transform:
    rotate(4deg);
}


/* ============================================================
   SOFT SUNBEAM
   ============================================================ */

.stories-floor {
  z-index: -2 !important;
}


/* light from temple ceiling */

.stories-floor::before {
  content: "";

  position: absolute;

  left: 50%;
  top: -40%;

  width: 420px;
  height: 110%;

  transform:
    translateX(-50%)
    perspective(300px)
    rotateX(15deg);

  background:
    linear-gradient(
      180deg,
      rgba(238, 204, 119, .10),
      rgba(238, 204, 119, .035),
      transparent
    );

  clip-path: polygon(
    38% 0,
    62% 0,
    100% 100%,
    0 100%
  );

  pointer-events: none;
}


/* ============================================================
   FLOOR — STONE TEMPLE
   ============================================================ */

.stories-floor {
  background:
    linear-gradient(
      180deg,
      transparent 0%,
      rgba(8, 5, 3, .05) 35%,
      rgba(7, 5, 3, .75) 100%
    ) !important;

  box-shadow:
    inset 0 80px 100px rgba(0, 0, 0, .18);
}


/* ============================================================
   VIGNETTE
   ============================================================ */

.stories {
  box-shadow:
    inset 140px 0 150px rgba(0,0,0,.38),
    inset -140px 0 150px rgba(0,0,0,.38),
    inset 0 -180px 180px rgba(0,0,0,.42);
}


/* ============================================================
   MOBILE
   ============================================================ */

@media (max-width: 700px) {

  .stories .stories-pilaster {
    width: 42px !important;
  }

  .stories .book-grid::before,
  .stories .book-grid::after {
    width: 90px;
    height: 360px;

    font-size: 18px;
    letter-spacing: 7px;
  }

  .stories::after {
    font-size: 50px;
    letter-spacing: 8px;
  }
}
/* ============================================================
   GU LIBRARY — HALL OF STORIES
   ROYAL PHARAONIC MANUSCRIPT
   MATCHES THE CURRENT HTML EXACTLY
   ============================================================ */


/* ============================================================
   MAIN BOOK
   ============================================================ */

.stories-heading {
  position: relative;

  z-index: 30;

  width: min(1000px, 90vw);
  height: 405px;

  margin: 0 auto 80px;

  padding: 0;

  perspective: 1800px;

  transform-style: preserve-3d;

  isolation: isolate;

  overflow: visible;
}


/* ============================================================
   COVER / BACK OF BOOK
   ============================================================ */

.book-cover {
  position: absolute;

  inset: 0;

  z-index: -5;

  border-radius: 22px;

  background:
    linear-gradient(
      90deg,
      #171008 0%,
      #4a3014 6%,
      #765020 11%,
      #38230e 42%,
      #120b06 49.5%,
      #080402 50%,
      #120b06 50.5%,
      #38230e 58%,
      #765020 89%,
      #4a3014 94%,
      #171008 100%
    );

  border:
    2px solid rgba(195,151,67,.72);

  box-shadow:
    0 30px 48px rgba(0,0,0,.62),
    0 9px 0 #0d0704,
    inset 0 0 35px rgba(0,0,0,.68),
    inset 0 0 0 3px rgba(238,197,105,.09);
}


/* inner cover frame */

.book-cover::before {
  content: "";

  position: absolute;

  inset: 10px;

  border:
    1px solid rgba(221,179,83,.27);

  border-radius: 15px;

  box-shadow:
    inset 0 0 0 4px rgba(94,59,18,.10),
    inset 0 0 20px rgba(0,0,0,.28);
}


/* ============================================================
   REAL PAGES
   ============================================================ */

.book-page {
  position: absolute;

  top: 18px;
  bottom: 18px;

  width: calc(50% - 13px);

  overflow: hidden;

  box-sizing: border-box;

  border:
    1px solid rgba(91,57,17,.70);

  background:

    radial-gradient(
      ellipse at 20% 18%,
      rgba(255,238,181,.22),
      transparent 30%
    ),

    radial-gradient(
      ellipse at 80% 75%,
      rgba(100,62,18,.16),
      transparent 28%
    ),

    repeating-linear-gradient(
      0deg,
      rgba(83,51,14,.075) 0,
      rgba(83,51,14,.075) 1px,
      transparent 1px,
      transparent 6px
    ),

    repeating-linear-gradient(
      90deg,
      rgba(255,241,180,.055) 0,
      rgba(255,241,180,.055) 1px,
      transparent 1px,
      transparent 9px
    ),

    linear-gradient(
      145deg,
      #b88d4b 0%,
      #d9bc7a 24%,
      #e6cf96 52%,
      #d2b16c 76%,
      #a97a3c 100%
    );

  box-shadow:
    inset 0 0 25px rgba(73,42,10,.22);
}


/* ============================================================
   LEFT PAGE
   ============================================================ */

.book-page-left {

  left: 16px;

  border-radius:
    20px 4px 4px 20px;

  transform-origin: right center;

  transform:
    perspective(1700px)
    rotateY(7deg)
    rotateZ(-.35deg);

  box-shadow:
    10px 7px 0 rgba(88,55,16,.22),
    5px 4px 0 rgba(128,88,33,.18),
    inset -20px 0 25px rgba(70,40,9,.15),
    inset 0 0 28px rgba(70,40,9,.18);

  animation:
    leftManuscriptPage 9s ease-in-out infinite;
}


/* ============================================================
   RIGHT PAGE
   ============================================================ */

.book-page-right {

  right: 16px;

  border-radius:
    4px 20px 20px 4px;

  transform-origin: left center;

  transform:
    perspective(1700px)
    rotateY(-7deg)
    rotateZ(.35deg);

  box-shadow:
    -10px 7px 0 rgba(88,55,16,.22),
    -5px 4px 0 rgba(128,88,33,.18),
    inset 20px 0 25px rgba(70,40,9,.15),
    inset 0 0 28px rgba(70,40,9,.18);

  animation:
    rightManuscriptPage 9s ease-in-out infinite;
}


/* ============================================================
   PAGE INNER BORDER
   ============================================================ */

.book-page::before {
  content: "";

  position: absolute;

  inset: 12px;

  border:
    1px solid rgba(105,68,20,.36);

  border-radius: inherit;

  pointer-events: none;

  box-shadow:
    inset 0 0 0 4px rgba(255,230,158,.07);
}


/* ============================================================
   LEFT PAGE — HIEROGLYPHS
   ============================================================ */

.hieroglyphic-manuscript {
  position: absolute;

  left: 34px;
  right: 34px;

  top: 40px;
  bottom: 40px;

  z-index: 4;

  display: flex;

  flex-direction: column;

  justify-content: space-between;

  color:
    rgba(67,39,11,.60);

  font-family:
    Georgia,
    serif;

  font-size: 14px;

  line-height: 1;

  letter-spacing: 4px;

  text-align: center;

  text-shadow:
    0 1px 0 rgba(255,234,173,.30);

  opacity: .94;

  animation:
    manuscriptInk 9s ease-in-out infinite;
}


/* each manuscript line */

.glyph-line {
  position: relative;

  white-space: nowrap;

  transform-origin: center;
}


/* imperfect handwritten feeling */

.glyph-line:nth-child(1) {
  transform: rotate(-1deg);
}

.glyph-line:nth-child(2) {
  transform:
    translateX(4px)
    rotate(.6deg);
}

.glyph-line:nth-child(3) {
  transform:
    translateX(-3px)
    rotate(-.7deg);
}

.glyph-line:nth-child(4) {
  transform:
    translateX(5px)
    rotate(.8deg);
}

.glyph-line:nth-child(5) {
  transform:
    translateX(-4px)
    rotate(-.5deg);
}

.glyph-line:nth-child(6) {
  transform:
    translateX(3px)
    rotate(.6deg);
}

.glyph-line:nth-child(7) {
  transform:
    translateX(-2px)
    rotate(-.4deg);
}

.glyph-line:nth-child(8) {
  transform:
    translateX(4px)
    rotate(.7deg);
}


/* ============================================================
   ANCIENT SEAL — LEFT PAGE
   ============================================================ */

.ancient-seal {
  position: absolute;

  z-index: 6;

  left: 30px;
  bottom: 28px;

  width: 42px;
  height: 42px;

  display: flex;

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

  border-radius: 50%;

  color: #684719;

  font-family: serif;

  font-size: 19px;

  background:
    radial-gradient(
      circle,
      #e6ca87 0%,
      #c0964e 57%,
      #8d6227 100%
    );

  border:
    1px solid rgba(86,51,12,.70);

  box-shadow:
    inset 0 0 7px rgba(66,37,8,.25),
    0 3px 6px rgba(52,29,7,.22);

  transform:
    rotate(-8deg);
}


/* ============================================================
   VERTICAL GLYPHS
   ============================================================ */

.vertical-glyphs {
  position: absolute;

  right: 19px;
  top: 45px;

  color:
    rgba(70,42,11,.46);

  font-family: serif;

  font-size: 13px;

  line-height: 1.65;

  text-align: center;
}


/* ============================================================
   RIGHT PAGE DECORATIONS
   ============================================================ */

.title-page-glyph {
  position: absolute;

  z-index: 3;

  color:
    rgba(117,81,25,.38);

  font-family: serif;

  font-size: 28px;
}


.top-glyph {
  top: 27px;
  right: 31px;

  transform: rotate(4deg);
}


.bottom-glyph {
  left: 32px;
  bottom: 25px;

  transform: rotate(-4deg);
}


/* ============================================================
   MAIN TITLE
   IMPORTANT:
   h2 IS A DIRECT CHILD OF .stories-heading
   ============================================================ */

.stories-heading > h2 {

  position: absolute;

  z-index: 20;

  top: 102px;

  right: 7%;

  width: 42%;

  margin: 0;

  padding: 12px 10px 14px;

  box-sizing: border-box;

  color: #38220b;

  font-family:
    "Cinzel",
    Georgia,
    serif;

  font-size:
    clamp(29px, 3.7vw, 52px);

  font-weight: 900;

  line-height: 1;

  letter-spacing: 3px;

  text-align: center;

  text-transform: uppercase;

  text-shadow:
    0 1px 0 rgba(255,239,177,.72),
    0 2px 2px rgba(55,31,7,.25);

  background:
    linear-gradient(
      180deg,
      rgba(247,224,163,.20),
      rgba(172,126,49,.10)
    );

  border-top:
    1px solid rgba(102,65,18,.48);

  border-bottom:
    1px solid rgba(102,65,18,.48);
}


/* ============================================================
   TITLE ORNAMENT TOP
   ============================================================ */

.stories-heading > h2::before {

  content:
    "𓆄 𓇳 𓆄";

  display: block;

  margin-bottom: 10px;

  color: #89631f;

  font-family: serif;

  font-size: 17px;

  letter-spacing: 10px;
}


/* ============================================================
   TITLE ORNAMENT BOTTOM
   ============================================================ */

.stories-heading > h2::after {

  content:
    "𓂀   𓋹   𓂀";

  display: block;

  margin-top: 12px;

  color: #946b22;

  font-family: serif;

  font-size: 13px;

  letter-spacing: 7px;
}


/* ============================================================
   DESCRIPTION
   ============================================================ */

.stories-heading > p {

  position: absolute;

  z-index: 20;

  top: 228px;

  right: 8%;

  width: 40%;

  margin: 0;

  box-sizing: border-box;

  color: #614019;

  font-family:
    "Cormorant Garamond",
    Georgia,
    serif;

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

  font-weight: 600;

  line-height: 1.45;

  letter-spacing: .6px;

  text-align: center;

  text-shadow:
    0 1px 0 rgba(255,234,173,.50);
}


/* description glyph divider */

.stories-heading > p::before {

  content:
    "𓏏 𓆣 𓅓 𓋹 𓂀";

  display: block;

  margin-bottom: 9px;

  color: #87611e;

  font-family: serif;

  font-size: 12px;

  letter-spacing: 6px;

  opacity: .78;
}


/* description bottom line */

.stories-heading > p::after {

  content: "";

  display: block;

  width: 72%;

  height: 2px;

  margin: 15px auto 0;

  background:
    linear-gradient(
      90deg,
      transparent,
      #9a7028,
      #c5a050,
      #9a7028,
      transparent
    );

  opacity: .68;
}


/* ============================================================
   CENTER SPINE
   ============================================================ */

.book-spine {
  position: absolute;

  z-index: 15;

  left: 50%;

  top: 14px;
  bottom: 14px;

  width: 28px;

  transform:
    translateX(-50%);

  border-radius: 50%;

  background:
    linear-gradient(
      90deg,
      #4b2d0d,
      #9d6e27 20%,
      #edd08a 46%,
      #9a6b25 68%,
      #42260c
    );

  box-shadow:
    0 0 13px rgba(46,25,5,.40),
    inset 0 0 5px rgba(255,232,166,.55);

  pointer-events: none;
}


/* center highlight */

.spine-highlight {
  position: absolute;

  left: 50%;

  top: 4%;
  bottom: 4%;

  width: 2px;

  transform:
    translateX(-50%);

  background:
    linear-gradient(
      180deg,
      transparent,
      rgba(255,239,177,.72),
      rgba(91,53,13,.28),
      transparent
    );
}


/* center seal */

.spine-seal {
  position: absolute;

  left: 50%;
  top: 50%;

  width: 43px;
  height: 43px;

  display: flex;

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

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

  border-radius: 50%;

  color: #674718;

  font-family: serif;

  font-size: 18px;

  background:
    radial-gradient(
      circle,
      #ead28c,
      #ac7c32
    );

  border:
    1px solid #704b15;

  box-shadow:
    0 3px 7px rgba(0,0,0,.30),
    inset 0 0 7px rgba(78,44,8,.26);
}


/* ============================================================
   PAGE STACKS
   ============================================================ */

.page-edge {
  position: absolute;

  z-index: -1;

  top: 25px;
  bottom: 25px;

  width: calc(50% - 11px);

  background:
    linear-gradient(
      180deg,
      #9e753b,
      #bd9553
    );

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

  opacity: .72;
}


.page-edge-left-1 {
  left: 11px;

  border-radius:
    17px 3px 3px 17px;

  transform:
    rotate(-.8deg);
}

.page-edge-left-2 {
  left: 7px;

  border-radius:
    17px 3px 3px 17px;

  transform:
    rotate(-1.5deg);

  opacity: .42;
}


.page-edge-right-1 {
  right: 11px;

  border-radius:
    3px 17px 17px 3px;

  transform:
    rotate(.8deg);
}

.page-edge-right-2 {
  right: 7px;

  border-radius:
    3px 17px 17px 3px;

  transform:
    rotate(1.5deg);

  opacity: .42;
}


/* ============================================================
   PAGE MOVEMENT
   ============================================================ */

@keyframes leftManuscriptPage {

  0%,
  100% {
    transform:
      perspective(1700px)
      rotateY(7deg)
      rotateZ(-.35deg);
  }

  50% {
    transform:
      perspective(1700px)
      rotateY(9deg)
      rotateZ(-.60deg);
  }
}


@keyframes rightManuscriptPage {

  0%,
  100% {
    transform:
      perspective(1700px)
      rotateY(-7deg)
      rotateZ(.35deg);
  }

  50% {
    transform:
      perspective(1700px)
      rotateY(-9deg)
      rotateZ(.60deg);
  }
}


@keyframes manuscriptInk {

  0%,
  100% {
    transform:
      translateX(0)
      rotate(-.2deg);
  }

  50% {
    transform:
      translateX(1px)
      rotate(.15deg);
  }
}


/* ============================================================
   BOOK HOVER
   ============================================================ */

.stories-heading {
  transition:
    transform .4s cubic-bezier(.2,.8,.2,1);
}


.stories-heading:hover {
  transform:
    translateY(-6px);
}


/* ============================================================
   REDUCE MOTION
   ============================================================ */

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

  .book-page-left,
  .book-page-right,
  .hieroglyphic-manuscript {
    animation: none;
  }
}


/* ============================================================
   MOBILE
   ============================================================ */

@media (max-width: 760px) {

  .stories-heading {
    width: 96vw;

    height: 305px;
  }

  .book-page-left {
    left: 10px;
  }

  .book-page-right {
    right: 10px;
  }

  .hieroglyphic-manuscript {

    left: 16px;
    right: 16px;

    top: 35px;
    bottom: 28px;

    font-size: 9px;

    letter-spacing: 2px;
  }

  .vertical-glyphs {
    display: none;
  }

  .ancient-seal {
    width: 32px;
    height: 32px;

    font-size: 14px;

    left: 18px;
    bottom: 18px;
  }

  .stories-heading > h2 {

    top: 77px;

    right: 6%;

    width: 43%;

    font-size: 21px;

    letter-spacing: 1px;
  }

  .stories-heading > h2::before {
    font-size: 10px;
    letter-spacing: 4px;
  }

  .stories-heading > h2::after {
    font-size: 8px;
    letter-spacing: 3px;
  }

  .stories-heading > p {

    top: 160px;

    right: 7%;

    width: 41%;

    font-size: 10px;
  }

  .spine-seal {
    width: 34px;
    height: 34px;

    font-size: 14px;
  }
}
/* ============================================================
   HALL OF STORIES — PHARAONIC BACKGROUND ONLY
   ============================================================ */

/* الصفحة نفسها */
.stories-section,
.hall-of-stories,
#stories,
.stories-page {
    position: relative;
    isolation: isolate;

    background:
        /* وهج ذهبي خفيف من المنتصف */
        radial-gradient(
            circle at 50% 35%,
            rgba(214, 166, 72, 0.10) 0%,
            rgba(120, 82, 32, 0.05) 32%,
            transparent 68%
        ),

        /* إضاءة جانبية */
        linear-gradient(
            90deg,
            rgba(20, 13, 7, 0.88) 0%,
            rgba(67, 45, 22, 0.55) 18%,
            rgba(91, 63, 29, 0.38) 50%,
            rgba(67, 45, 22, 0.55) 82%,
            rgba(20, 13, 7, 0.88) 100%
        ),

        /* لون الحجر الأساسي */
        linear-gradient(
            180deg,
            #21170e 0%,
            #382718 38%,
            #2a1d12 72%,
            #17100a 100%
        );

    color: #ead9ad;
    overflow: hidden;
}


/* ============================================================
   طبقة الحجر
   ============================================================ */

.stories-section::before,
.hall-of-stories::before,
#stories::before,
.stories-page::before {
    content: "";
    position: absolute;
    inset: 0;

    z-index: -2;
    pointer-events: none;

    opacity: 0.42;

    background:
        /* تشققات/ملمس حجري */
        repeating-linear-gradient(
            0deg,
            rgba(255, 255, 255, 0.018) 0px,
            rgba(255, 255, 255, 0.018) 1px,
            transparent 1px,
            transparent 7px
        ),

        repeating-linear-gradient(
            90deg,
            rgba(0, 0, 0, 0.035) 0px,
            rgba(0, 0, 0, 0.035) 1px,
            transparent 1px,
            transparent 9px
        );

    mix-blend-mode: overlay;
}


/* ============================================================
   الهيروغليفية الكبيرة في الخلفية
   ============================================================ */

.stories-section::after,
.hall-of-stories::after,
#stories::after,
.stories-page::after {
    content:
        "𓂀 𓆣 𓅃 𓇯 𓉐 𓂀 𓆓 𓊹 𓏏 𓋹 𓂀 𓆣 𓅃";

    position: absolute;

    left: -5%;
    right: -5%;
    bottom: 2%;

    z-index: -1;
    pointer-events: none;

    white-space: nowrap;

    font-family:
        "Noto Sans Egyptian Hieroglyphs",
        "Segoe UI Historic",
        serif;

    font-size: clamp(70px, 8vw, 150px);
    line-height: 1;

    letter-spacing: 35px;

    color: rgba(220, 174, 76, 0.055);

    text-shadow:
        0 0 20px rgba(220, 174, 76, 0.08),
        0 0 50px rgba(220, 174, 76, 0.04);

    transform: rotate(-1deg);

    mask-image:
        linear-gradient(
            to bottom,
            transparent,
            black 25%,
            black 75%,
            transparent
        );

    -webkit-mask-image:
        linear-gradient(
            to bottom,
            transparent,
            black 25%,
            black 75%,
            transparent
        );
}


/* ============================================================
   زخرفة هيروغليفية إضافية حول الصفحة
   ============================================================ */

.stories-heading {
    position: relative;
}


/* خط ذهبي فوق العنوان */
.stories-heading::before {
    content: "";

    position: absolute;

    left: 8%;
    right: 8%;
    top: -28px;

    height: 1px;

    background:
        linear-gradient(
            90deg,
            transparent,
            rgba(215, 171, 77, 0.12),
            rgba(240, 201, 104, 0.85),
            rgba(215, 171, 77, 0.12),
            transparent
        );

    box-shadow:
        0 0 10px rgba(221, 174, 73, 0.25);
}


/* خط ذهبي تحت العنوان */
.stories-heading::after {
    content: "";

    position: absolute;

    left: 15%;
    right: 15%;
    bottom: -24px;

    height: 1px;

    background:
        linear-gradient(
            90deg,
            transparent,
            rgba(215, 171, 77, 0.15),
            rgba(240, 201, 104, 0.65),
            rgba(215, 171, 77, 0.15),
            transparent
        );

    box-shadow:
        0 0 12px rgba(221, 174, 73, 0.2);
}


/* ============================================================
   هالة إضاءة ذهبية خلف المحتوى
   ============================================================ */

.stories-heading {
    filter:
        drop-shadow(
            0 0 20px rgba(207, 163, 67, 0.08)
        );
}


/* ============================================================
   هيروغليفية جانبية
   ============================================================ */

.stories-heading .book-page-left::before,
.stories-heading .book-page-right::before {
    color: rgba(221, 177, 79, 0.20);
}


/* ============================================================
   تحسين لون النصوص الفرعونية الموجودة
   بدون تغيير حجمها
   ============================================================ */

.stories-heading h1,
.stories-heading h2,
.stories-heading .title {
    color: #ead29a;

    text-shadow:
        0 1px 0 rgba(0, 0, 0, 0.8),
        0 0 8px rgba(220, 174, 75, 0.22),
        0 0 20px rgba(220, 174, 75, 0.08);
}


/* ============================================================
   زخارف هيروغليفية عائمة
   ============================================================ */

.stories-heading .hieroglyphic-manuscript {
    color: #d8ae55;

    text-shadow:
        0 0 5px rgba(222, 175, 70, 0.55),
        0 0 14px rgba(222, 175, 70, 0.20),
        0 1px 2px rgba(0, 0, 0, 0.9);

    filter:
        drop-shadow(
            0 2px 3px rgba(0, 0, 0, 0.65)
        );
}


/* ============================================================
   توهج خفيف متحرك للهُيروغليفية
   ============================================================ */

@keyframes pharaohGlyphGlow {

    0% {
        filter:
            drop-shadow(
                0 0 3px rgba(222, 175, 70, 0.20)
            );
    }

    50% {
        filter:
            drop-shadow(
                0 0 9px rgba(222, 175, 70, 0.42)
            );
    }

    100% {
        filter:
            drop-shadow(
                0 0 3px rgba(222, 175, 70, 0.20)
            );
    }
}

.stories-heading .hieroglyphic-manuscript {
    animation:
        pharaohGlyphGlow 5s ease-in-out infinite;
}


/* ============================================================
   حواف الصفحة — إحساس جدار معبد
   ============================================================ */

.stories-section,
.hall-of-stories,
#stories,
.stories-page {

    box-shadow:
        inset 0 35px 55px rgba(0, 0, 0, 0.38),
        inset 0 -45px 70px rgba(0, 0, 0, 0.48),
        inset 35px 0 70px rgba(0, 0, 0, 0.30),
        inset -35px 0 70px rgba(0, 0, 0, 0.30);
}


/* ============================================================
   إطار فرعوني خفيف جدًا
   ============================================================ */

.stories-section {
    border-top:
        1px solid rgba(220, 176, 79, 0.18);

    border-bottom:
        1px solid rgba(220, 176, 79, 0.12);
}


/* ============================================================
   MOBILE
   ============================================================ */

@media (max-width: 768px) {

    .stories-section::after,
    .hall-of-stories::after,
    #stories::after,
    .stories-page::after {

        font-size: 70px;
        letter-spacing: 18px;
    }

    .stories-heading::before {
        left: 3%;
        right: 3%;
    }

    .stories-heading::after {
        left: 8%;
        right: 8%;
    }
}
/* ============================================================
   HIEROGLYPHIC MANUSCRIPT — TEXT / PARAGRAPH STYLE
   ============================================================ */

.hieroglyphic-manuscript {
    position: absolute;

    top: 95px;
    left: 38px;
    right: 38px;
    bottom: 85px;

    display: block;

    direction: ltr;
    text-align: left;

    overflow: hidden;

    font-family:
        "Noto Sans Egyptian Hieroglyphs",
        "Segoe UI Historic",
        serif;

    font-size: 23px;
    line-height: 1.65;

    letter-spacing: 2px;

    color: #4a2d13;

    text-shadow:
        0.4px 0.4px 0 rgba(70, 40, 15, 0.35);
}


/* كل سطر يتعامل كجزء من نفس النص */
.hieroglyphic-manuscript .glyph-line {
    display: inline;

    margin: 0;
    padding: 0;

    white-space: normal;

    font-size: inherit;
    line-height: inherit;
    letter-spacing: inherit;
}


/* مسافة صغيرة بين المقاطع فقط */
.hieroglyphic-manuscript .glyph-line::after {
    content: "   ";
}


/* ============================================================
   لمسة حبر قديم
   ============================================================ */

.hieroglyphic-manuscript {
    opacity: 0.92;

    filter:
        drop-shadow(
            0 1px 0 rgba(255, 225, 160, 0.18)
        );
}


/* ============================================================
   لو الصفحة صغيرة
   ============================================================ */

@media (max-width: 900px) {

    .hieroglyphic-manuscript {
        font-size: 19px;
        line-height: 1.55;

        left: 28px;
        right: 28px;
    }
}
 /* ============================================================
    HIEROGLYPHIC TEXT — STRONG INK / ANCIENT PAPYRUS
    ============================================================ */

.book-page-left .hieroglyphic-manuscript {
    color: #3a210d !important;

    opacity: 1 !important;

    text-shadow:
        0.6px 0.6px 0 #6b421b,
        -0.3px -0.3px 0 rgba(255, 232, 177, 0.35),
        0 1px 2px rgba(35, 18, 5, 0.35);

    filter:
        contrast(1.18)
        saturate(1.15);
}


/* كل الرموز نفسها */
.book-page-left .hieroglyphic-manuscript .glyph-line {
    color: #3a210d !important;

    opacity: 1 !important;

    font-weight: 600;

    text-shadow:
        0.6px 0.6px 0 #6b421b,
        0 1px 1px rgba(40, 20, 5, 0.35);
}


/* لمعة حبر خفيفة جدًا */
.book-page-left .hieroglyphic-manuscript .glyph-line::selection {
    background: rgba(170, 116, 42, 0.25);
}


/* لو فيه رموز داخلية أو spans */
.book-page-left .hieroglyphic-manuscript span {
    color: #3a210d !important;
    opacity: 1 !important;
}


/* تحسين وضوح الهيروغليفية على الخلفية */
.book-page-left .hieroglyphic-manuscript {
    -webkit-font-smoothing: antialiased;
    text-rendering: geometricPrecision;
}
/* ============================================================
   RIGHT PAGE — CLEAN PHARAONIC DECORATION
   ============================================================ */

.stories-heading .book-page-right .top-glyph {
    position: absolute;
    top: 28px;
    left: 50%;
    transform: translateX(-50%);

    z-index: 3;

    font-size: 34px;
    line-height: 1;

    color: rgba(107, 66, 27, 0.55);

    pointer-events: none;
}


.stories-heading .book-page-right .bottom-glyph {
    position: absolute;
    bottom: 28px;
    left: 50%;
    transform: translateX(-50%);

    z-index: 3;

    font-size: 27px;
    line-height: 1;

    color: rgba(107, 66, 27, 0.5);

    pointer-events: none;
}


/* 𓇳 الصغيرة — زخرفة وليس عنوان */
.stories-heading .book-page-right .title-crown {
    position: absolute;
    top: 38%;
    left: 50%;
    transform: translateX(-50%);

    z-index: 3;

    font-size: 20px;

    color: rgba(107, 66, 27, 0.4);

    pointer-events: none;
}


/* 𓆄 𓆄 𓆄 */
.stories-heading .book-page-right .title-decoration {
    position: absolute;
    top: 43%;
    left: 50%;
    transform: translateX(-50%);

    z-index: 3;

    white-space: nowrap;

    font-size: 17px;
    letter-spacing: 7px;

    color: rgba(107, 66, 27, 0.42);

    pointer-events: none;
}
/* ============================================================
   HALL OF STORIES — CENTER TITLE ON RIGHT PAGE
   ============================================================ */

.stories-heading {
    position: relative;
}

/* العنوان الموجود أصلًا */
.stories-heading > h2 {
    position: absolute !important;

    left: 75% !important;
    top: 50% !important;

    transform: translate(-50%, -65%) !important;

    width: 36% !important;

    margin: 0 !important;

    text-align: center !important;

    z-index: 50 !important;

    color: #4a2d13 !important;

    font-size: 34px !important;

    line-height: 1.2 !important;
}


/* الجملة الموجودة أصلًا */
.stories-heading > p {
    position: absolute !important;

    left: 75% !important;
    top: 50% !important;

    transform: translate(-50%, 45%) !important;

    width: 30% !important;

    margin: 0 !important;

    text-align: center !important;

    z-index: 50 !important;

    color: #654522 !important;

    font-family: Georgia, "Times New Roman", serif;

    font-size: 15px !important;

    line-height: 1.7 !important;

    font-style: italic;
}
/* ============================================================
   HALL OF STORIES — ANCIENT PHARAONIC BOOK
   PAPER + COVER + SPINE DETAILS
   ============================================================ */


/* ============================================================
   1. BOOK — DEPTH
   ============================================================ */

.stories-heading .book-cover {
    filter:
        drop-shadow(0 18px 25px rgba(0, 0, 0, 0.42))
        drop-shadow(0 3px 5px rgba(78, 47, 15, 0.25));
}


/* ============================================================
   2. PAGES — WARM ANCIENT PAPYRUS
   ============================================================ */

.stories-heading .book-page {
    background:
        radial-gradient(
            ellipse at 50% 45%,
            rgba(255, 239, 194, 0.95) 0%,
            rgba(225, 194, 133, 0.92) 58%,
            rgba(173, 137, 82, 0.95) 100%
        ) !important;

    box-shadow:
        inset 0 0 35px rgba(91, 55, 18, 0.25),
        inset 0 0 8px rgba(255, 238, 183, 0.55),
        0 4px 12px rgba(42, 24, 7, 0.28);
}


/* ============================================================
   3. OLD PAPER TEXTURE
   ============================================================ */

.stories-heading .book-page::after {
    content: "";

    position: absolute;

    inset: 10px;

    pointer-events: none;

    z-index: 1;

    opacity: 0.35;

    background:
        radial-gradient(
            circle at 15% 20%,
            rgba(112, 71, 25, 0.18) 0 1px,
            transparent 2px
        ),
        radial-gradient(
            circle at 75% 65%,
            rgba(112, 71, 25, 0.13) 0 1px,
            transparent 2px
        ),
        radial-gradient(
            circle at 35% 85%,
            rgba(112, 71, 25, 0.15) 0 1px,
            transparent 2px
        );

    background-size:
        95px 95px,
        130px 130px,
        160px 160px;

    mix-blend-mode: multiply;
}


/* ============================================================
   4. PAGE EDGES — OLD PAPER
   ============================================================ */

.stories-heading .page-edge {
    background:
        linear-gradient(
            90deg,
            #76542c,
            #d6b77b 18%,
            #a98652 50%,
            #e0c58d 82%,
            #70502b
        ) !important;

    box-shadow:
        0 2px 5px rgba(0, 0, 0, 0.25);
}


/* ============================================================
   5. PAGE FRAME
   ============================================================ */

.stories-heading .page-frame {
    position: absolute;

    inset: 15px;

    border:
        1px solid rgba(120, 78, 27, 0.45);

    box-shadow:
        inset 0 0 0 1px rgba(255, 231, 175, 0.35),
        inset 0 0 18px rgba(103, 63, 20, 0.15);

    pointer-events: none;

    z-index: 3;
}


/* ============================================================
   6. GOLDEN INNER BORDER
   ============================================================ */

.stories-heading .page-frame::before {
    content: "";

    position: absolute;

    inset: 7px;

    border:
        1px solid rgba(157, 111, 43, 0.25);

    pointer-events: none;
}


/* ============================================================
   7. BOOK SPINE
   ============================================================ */

.stories-heading .book-spine {
    background:
        linear-gradient(
            90deg,
            #3d2813 0%,
            #765321 18%,
            #b88b3d 38%,
            #5c3d18 58%,
            #9b702e 78%,
            #34200e 100%
        ) !important;

    box-shadow:
        inset 0 0 12px rgba(0, 0, 0, 0.55),
        0 0 10px rgba(0, 0, 0, 0.35);
}


/* ============================================================
   8. SPINE HIGHLIGHT
   ============================================================ */

.stories-heading .spine-highlight {
    background:
        linear-gradient(
            180deg,
            transparent,
            rgba(240, 201, 104, 0.7),
            transparent
        ) !important;

    opacity: 0.65;
}


/* ============================================================
   9. SPINE SEAL
   ============================================================ */

.stories-heading .spine-seal {
    color: #d4a94f !important;

    text-shadow:
        0 1px 0 #4c3013,
        0 0 8px rgba(226, 179, 73, 0.35);

    filter:
        drop-shadow(0 2px 2px rgba(0, 0, 0, 0.45));
}


/* ============================================================
   10. GOLDEN PAGE CORNERS
   ============================================================ */

.stories-heading .book-page-left::after,
.stories-heading .book-page-right::after {
    border-radius: 3px;

    box-shadow:
        inset 0 0 14px rgba(108, 66, 20, 0.18);
}


/* ============================================================
   11. MANUSCRIPT RED LINE
   ============================================================ */

.stories-heading .manuscript-red-line {
    background:
        linear-gradient(
            90deg,
            transparent,
            rgba(117, 45, 25, 0.75),
            rgba(150, 66, 29, 0.55),
            transparent
        ) !important;

    box-shadow:
        0 0 5px rgba(121, 48, 25, 0.22);
}


/* ============================================================
   12. ANCIENT SEAL
   ============================================================ */

.stories-heading .ancient-seal {
    color: #79501f !important;

    text-shadow:
        0 1px 0 rgba(255, 228, 166, 0.55),
        0 2px 4px rgba(49, 27, 7, 0.35);
}


/* ============================================================
   13. FOOTER HIEROGLYPHS
   ============================================================ */

.stories-heading .manuscript-footer {
    color: #76501f !important;

    opacity: 0.75;

    text-shadow:
        0 1px 0 rgba(255, 227, 166, 0.5);
}


/* ============================================================
   14. BOOK COVER — LEATHER / GOLD
   ============================================================ */

.stories-heading .book-cover {
    background:
        linear-gradient(
            135deg,
            #2c1a0b 0%,
            #65431c 20%,
            #8c6429 48%,
            #4c3014 72%,
            #241508 100%
        ) !important;

    box-shadow:
        inset 0 0 18px rgba(0, 0, 0, 0.65),
        inset 0 0 3px rgba(230, 188, 93, 0.55),
        0 15px 30px rgba(0, 0, 0, 0.45);
}


/* ============================================================
   15. GOLDEN COVER BORDER
   ============================================================ */

.stories-heading .book-cover::before {
    content: "";

    position: absolute;

    inset: 12px;

    border:
        1px solid rgba(220, 174, 75, 0.55);

    box-shadow:
        inset 0 0 0 1px rgba(79, 47, 14, 0.7);

    pointer-events: none;
}


/* ============================================================
   16. COVER CENTER ORNAMENT
   ============================================================ */

.stories-heading .book-cover::after {
    content: "𓂀  𓋹  𓇳  𓋹  𓂀";

    position: absolute;

    left: 50%;
    top: 50%;

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

    white-space: nowrap;

    font-size: 20px;

    letter-spacing: 4px;

    color: rgba(220, 174, 75, 0.62);

    text-shadow:
        0 1px 0 #2c1908,
        0 0 8px rgba(221, 174, 73, 0.22);

    pointer-events: none;
}


/* ============================================================
   17. SUBTLE GOLD LIGHT
   ============================================================ */

.stories-heading .book-cover {
    animation:
        ancientBookGlow 7s ease-in-out infinite;
}


@keyframes ancientBookGlow {

    0% {
        box-shadow:
            inset 0 0 18px rgba(0, 0, 0, 0.65),
            inset 0 0 3px rgba(230, 188, 93, 0.45),
            0 15px 30px rgba(0, 0, 0, 0.45);
    }

    50% {
        box-shadow:
            inset 0 0 18px rgba(0, 0, 0, 0.65),
            inset 0 0 5px rgba(230, 188, 93, 0.7),
            0 15px 30px rgba(0, 0, 0, 0.45);
    }

    100% {
        box-shadow:
            inset 0 0 18px rgba(0, 0, 0, 0.65),
            inset 0 0 3px rgba(230, 188, 93, 0.45),
            0 15px 30px rgba(0, 0, 0, 0.45);
    }
}
/* ============================================================
   PHARAONIC BOOK — REALISTIC 3D MOTION
   ============================================================ */

.stories-heading {
    perspective: 1800px;
    perspective-origin: 50% 50%;
}


/* ============================================================
   BOOK DEPTH
   ============================================================ */

.stories-heading .book-cover,
.stories-heading .book-page,
.stories-heading .book-spine,
.stories-heading .page-edge {
    transform-style: preserve-3d;
}


/* ============================================================
   BOOK COVER — LIVING LEATHER
   ============================================================ */

.stories-heading .book-cover {
    transform-origin: center center;

    will-change: transform;

    animation:
        bookBreathing 6s ease-in-out infinite;

    transition:
        filter 0.5s ease;
}


/* ============================================================
   SLOW BOOK BREATHING
   ============================================================ */

@keyframes bookBreathing {

    0% {
        transform:
            translateY(0)
            rotateX(0deg)
            rotateY(0deg);
    }

    25% {
        transform:
            translateY(-2px)
            rotateX(0.35deg)
            rotateY(-0.4deg);
    }

    50% {
        transform:
            translateY(0)
            rotateX(0deg)
            rotateY(0.4deg);
    }

    75% {
        transform:
            translateY(-1px)
            rotateX(-0.3deg)
            rotateY(-0.35deg);
    }

    100% {
        transform:
            translateY(0)
            rotateX(0deg)
            rotateY(0deg);
    }
}


/* ============================================================
   PAGES — DIFFERENT DEPTHS
   ============================================================ */

.stories-heading .book-page-left {
    transform:
        translateZ(4px)
        rotateY(0deg);

    animation:
        leftPageFloat 7s ease-in-out infinite;
}


.stories-heading .book-page-right {
    transform:
        translateZ(5px)
        rotateY(0deg);

    animation:
        rightPageFloat 7s ease-in-out infinite;
}


@keyframes leftPageFloat {

    0%,
    100% {
        transform:
            translateZ(4px)
            rotateY(0deg);
    }

    50% {
        transform:
            translateZ(8px)
            rotateY(-0.25deg);
    }
}


@keyframes rightPageFloat {

    0%,
    100% {
        transform:
            translateZ(5px)
            rotateY(0deg);
    }

    50% {
        transform:
            translateZ(9px)
            rotateY(0.25deg);
    }
}


/* ============================================================
   SPINE — HEAVY BOOK FEEL
   ============================================================ */

.stories-heading .book-spine {
    transform-origin: center center;

    animation:
        spineBreathing 6s ease-in-out infinite;
}


@keyframes spineBreathing {

    0%,
    100% {
        transform:
            translateZ(8px)
            scaleX(1);
    }

    50% {
        transform:
            translateZ(12px)
            scaleX(1.015);
    }
}


/* ============================================================
   PAGE EDGES — SMALL INDEPENDENT MOVEMENT
   ============================================================ */

.stories-heading .page-edge-left-1 {
    animation:
        edgeLeftOne 6s ease-in-out infinite;
}


.stories-heading .page-edge-left-2 {
    animation:
        edgeLeftTwo 7s ease-in-out infinite;
}


.stories-heading .page-edge-right-1 {
    animation:
        edgeRightOne 6.5s ease-in-out infinite;
}


.stories-heading .page-edge-right-2 {
    animation:
        edgeRightTwo 7.5s ease-in-out infinite;
}


@keyframes edgeLeftOne {

    0%,
    100% {
        transform: translateX(0);
    }

    50% {
        transform: translateX(-2px);
    }
}


@keyframes edgeLeftTwo {

    0%,
    100% {
        transform: translateX(0);
    }

    50% {
        transform: translateX(-3px);
    }
}


@keyframes edgeRightOne {

    0%,
    100% {
        transform: translateX(0);
    }

    50% {
        transform: translateX(2px);
    }
}


@keyframes edgeRightTwo {

    0%,
    100% {
        transform: translateX(0);
    }

    50% {
        transform: translateX(3px);
    }
}


/* ============================================================
   GOLDEN LIGHT MOVING OVER THE COVER
   ============================================================ */

.stories-heading .book-cover {
    overflow: hidden;
}


.stories-heading .book-cover::marker {
    display: none;
}


/* ============================================================
   BOOK SHADOW — CHANGES WITH MOTION
   ============================================================ */

.stories-heading .book-cover {
    filter:
        drop-shadow(
            0 22px 20px rgba(0, 0, 0, 0.38)
        )
        drop-shadow(
            0 4px 7px rgba(73, 43, 12, 0.25)
        );
}


/* ============================================================
   REALISTIC PAGE EDGE HIGHLIGHTS
   ============================================================ */

.stories-heading .book-page-left,
.stories-heading .book-page-right {

    box-shadow:
        inset 8px 0 15px rgba(74, 43, 12, 0.10),
        inset -8px 0 15px rgba(74, 43, 12, 0.10),
        inset 0 5px 12px rgba(255, 236, 185, 0.28),
        inset 0 -8px 15px rgba(82, 48, 13, 0.12),
        0 7px 12px rgba(0, 0, 0, 0.12);
}


/* ============================================================
   BOOK HOVER — BIG INTERACTION
   ============================================================ */

.stories-heading:hover .book-cover {

    filter:
        drop-shadow(
            0 28px 25px rgba(0, 0, 0, 0.48)
        )
        drop-shadow(
            0 0 15px rgba(218, 174, 76, 0.14)
        );
}


.stories-heading:hover .book-page-left {

    transform:
        translateZ(14px)
        rotateY(-0.8deg);
}


.stories-heading:hover .book-page-right {

    transform:
        translateZ(16px)
        rotateY(0.8deg);
}


.stories-heading:hover .book-spine {

    transform:
        translateZ(18px)
        scaleX(1.025);
}


/* ============================================================
   GOLDEN SYMBOLS REACT TO BOOK MOTION
   ============================================================ */

.stories-heading .manuscript-header,
.stories-heading .manuscript-footer,
.stories-heading .ancient-seal,
.stories-heading .spine-seal {

    transition:
        transform 0.6s ease,
        text-shadow 0.6s ease;
}


.stories-heading:hover .manuscript-header {
    transform: translateY(-2px);
}


.stories-heading:hover .manuscript-footer {
    transform: translateY(2px);
}


.stories-heading:hover .spine-seal {

    transform:
        scale(1.08)
        rotate(2deg);

    text-shadow:
        0 0 8px rgba(224, 177, 73, 0.5),
        0 0 18px rgba(224, 177, 73, 0.2);
}


/* ============================================================
   TITLE — SLIGHT DEPTH
   ============================================================ */

.stories-heading > h2 {

    transition:
        transform 0.6s ease,
        text-shadow 0.6s ease;
}


.stories-heading:hover > h2 {

    transform:
        translate(-50%, -65%)
        translateZ(20px);

    text-shadow:
        0 1px 0 rgba(255, 235, 190, 0.8),
        0 3px 7px rgba(55, 27, 5, 0.35),
        0 0 15px rgba(215, 169, 71, 0.18);
}


/* ============================================================
   ACCESSIBILITY
   ============================================================ */

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

    .stories-heading .book-cover,
    .stories-heading .book-page-left,
    .stories-heading .book-page-right,
    .stories-heading .book-spine,
    .stories-heading .page-edge-left-1,
    .stories-heading .page-edge-left-2,
    .stories-heading .page-edge-right-1,
    .stories-heading .page-edge-right-2 {

        animation: none !important;
        transition: none !important;
    }
}
/* ============================================================
   BOOK CLICK — REPLACE THE "FLY UP" EFFECT
   ============================================================ */

/* نوقف أي حركة رفع للكتاب */
.stories-heading .book-cover,
.stories-heading .book-page-left,
.stories-heading .book-page-right,
.stories-heading .book-spine {
    transform-origin: center center;
}


/* حركة ضغط بسيطة */
.stories-heading:active .book-cover {
    animation: bookPress 0.45s ease-out;
}


@keyframes bookPress {

    0% {
        transform:
            scale(1)
            rotateX(0deg)
            rotateY(0deg);
    }

    25% {
        transform:
            scale(0.985)
            rotateX(0deg)
            rotateY(-1deg);
    }

    55% {
        transform:
            scale(1.008)
            rotateX(0deg)
            rotateY(1deg);
    }

    100% {
        transform:
            scale(1)
            rotateX(0deg)
            rotateY(0deg);
    }
}


/* الصفحات تتحرك مع الضغط بدل ما تطير لفوق */
.stories-heading:active .book-page-left {
    animation: leftPagePress 0.45s ease-out;
}


.stories-heading:active .book-page-right {
    animation: rightPagePress 0.45s ease-out;
}


@keyframes leftPagePress {

    0% {
        transform:
            translateZ(4px)
            rotateY(0deg);
    }

    45% {
        transform:
            translateZ(11px)
            rotateY(-1.2deg);
    }

    100% {
        transform:
            translateZ(4px)
            rotateY(0deg);
    }
}


@keyframes rightPagePress {

    0% {
        transform:
            translateZ(5px)
            rotateY(0deg);
    }

    45% {
        transform:
            translateZ(12px)
            rotateY(1.2deg);
    }

    100% {
        transform:
            translateZ(5px)
            rotateY(0deg);
    }
}


/* الـspine يتحرك حركة صغيرة */
.stories-heading:active .book-spine {
    animation: spinePress 0.45s ease-out;
}


@keyframes spinePress {

    0% {
        transform:
            translateZ(8px)
            scaleX(1);
    }

    50% {
        transform:
            translateZ(14px)
            scaleX(1.02);
    }

    100% {
        transform:
            translateZ(8px)
            scaleX(1);
    }
}
/* ============================================================
   HALL OF STORIES — SIMPLE MYSTICAL HOVER
   ============================================================ */


/* ------------------------------------------------------------
   الكتاب ثابت تمامًا
   ------------------------------------------------------------ */

.stories-heading:hover .book-cover,
.stories-heading:hover .book-page-left,
.stories-heading:hover .book-page-right,
.stories-heading:hover .book-spine {
    transform: none !important;
    animation: none !important;
}


/* ============================================================
   إخفاء المحتوى الأصلي عند الـhover
   ============================================================ */

.stories-heading:hover
.book-page-left
.hieroglyphic-manuscript,

.stories-heading:hover
.book-page-left
.manuscript-header,

.stories-heading:hover
.book-page-left
.manuscript-red-line,

.stories-heading:hover
.book-page-left
.ancient-seal,

.stories-heading:hover
.book-page-left
.manuscript-footer,

.stories-heading:hover > h2,

.stories-heading:hover > p {
    opacity: 0 !important;

    filter: blur(8px);

    transition:
        opacity .5s ease,
        filter .5s ease;
}


/* ============================================================
   الضباب — هادئ ومش مبالغ فيه
   ============================================================ */

.book-page-left::after,
.book-page-right::after {
    content: "";

    position: absolute;
    inset: 0;

    z-index: 20;

    pointer-events: none;

    opacity: 0;

    background:
        radial-gradient(
            ellipse at center,
            rgba(230, 196, 125, .08),
            rgba(171, 129, 57, .12) 45%,
            transparent 75%
        );

    filter: blur(10px);

    transition: opacity .6s ease;
}


.stories-heading:hover .book-page-left::after,
.stories-heading:hover .book-page-right::after {
    opacity: 1;
}


/* ============================================================
   LEFT PAGE
   جملة هيروغليفية واحدة فقط
   ============================================================ */

.book-page-left .page-frame::after {

    content:
        "𓂀 𓋹 𓏏 𓂋 𓊹 𓎛 𓏏 𓏤 𓇳";

    position: absolute;

    left: 50%;
    top: 50%;

    transform:
        translate(-50%, -50%)
        scale(.88);

    width: 82%;

    text-align: center;

    z-index: 50;

    pointer-events: none;

    opacity: 0;

    color: #553414;

    font-family:
        "Segoe UI Historic",
        "Noto Sans Egyptian Hieroglyphs",
        serif;

    font-size: 27px;

    font-weight: 800;

    letter-spacing: 5px;

    line-height: 1.7;

    text-shadow:
        0 1px 0 rgba(255, 235, 191, .9),
        0 2px 3px rgba(58, 30, 7, .35),
        0 0 10px rgba(190, 143, 53, .2);

    transition:
        opacity .65s ease,
        transform .7s cubic-bezier(.2,.8,.2,1);
}


.stories-heading:hover
.book-page-left
.page-frame::after {

    opacity: 1;

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


/* ============================================================
   LEFT PAGE
   رموز هادئة حول الجملة
   ============================================================ */

.book-page-left .page-frame::before {

    content:
        "𓂀                 𓋹";

    position: absolute;

    left: 50%;
    top: 62%;

    transform: translateX(-50%);

    width: 80%;

    text-align: center;

    z-index: 51;

    pointer-events: none;

    opacity: 0;

    color: rgba(105, 69, 25, .65);

    font-family:
        "Segoe UI Historic",
        serif;

    font-size: 24px;

    letter-spacing: 16px;

    text-shadow:
        0 1px 0 rgba(255, 229, 173, .65);

    transition: opacity .65s ease;
}


.stories-heading:hover
.book-page-left
.page-frame::before {

    opacity: 1;
}


/* ============================================================
   RIGHT PAGE
   BEGIN READING
   ============================================================ */

.book-page-right .page-frame::after {

    content: "BEGIN READING";

    position: absolute;

    left: 50%;
    top: 50%;

    transform:
        translate(-50%, -50%)
        scale(.88);

    width: 88%;

    text-align: center;

    z-index: 50;

    pointer-events: none;

    opacity: 0;

    color: #553414;

    font-family:
        Georgia,
        "Times New Roman",
        serif;

    font-size: 31px;

    font-weight: 800;

    letter-spacing: 3px;

    line-height: 1.2;

    text-shadow:
        0 1px 0 rgba(255, 235, 191, .9),
        0 2px 3px rgba(58, 30, 7, .35),
        0 0 12px rgba(190, 143, 53, .22);

    transition:
        opacity .65s ease,
        transform .7s cubic-bezier(.2,.8,.2,1);
}


.stories-heading:hover
.book-page-right
.page-frame::after {

    opacity: 1;

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


/* ============================================================
   RIGHT PAGE
   رموز هادئة حول BEGIN READING
   ============================================================ */

.book-page-right .page-frame::before {

    content:
        "𓇳        𓂀        𓋹";

    position: absolute;

    left: 50%;
    top: 62%;

    transform: translateX(-50%);

    width: 85%;

    text-align: center;

    z-index: 51;

    pointer-events: none;

    opacity: 0;

    color: rgba(105, 69, 25, .65);

    font-family:
        "Segoe UI Historic",
        serif;

    font-size: 22px;

    letter-spacing: 7px;

    text-shadow:
        0 1px 0 rgba(255, 229, 173, .65);

    transition: opacity .65s ease;
}


.stories-heading:hover
.book-page-right
.page-frame::before {

    opacity: 1;
}


/* ============================================================
   هالة ذهبية خفيفة حول الكتاب
   ============================================================ */

.stories-heading:hover::before {

    content: "";

    position: absolute;

    left: 50%;
    top: 50%;

    width: 85%;
    height: 90%;

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

    border-radius: 50%;

    pointer-events: none;

    z-index: 1;

    background:
        radial-gradient(
            ellipse,
            rgba(215, 174, 87, .14),
            transparent 70%
        );

    filter: blur(25px);

    opacity: .8;
}
/* ============================================================
   LIBRARY ARCHITECTURE
   ============================================================ */

#bookGrid {
    position: relative;
}


/* ============================================================
   MAIN ARCHITECTURE LAYER
   ============================================================ */

.library-architecture {
    position: absolute;
    inset: 0;

    pointer-events: none;

    z-index: 0;

    overflow: visible;
}


/* ============================================================
   OBELISKS
   ============================================================ */

.library-obelisk {
    position: absolute;

    top: 25px;
    bottom: 170px;

    width: 90px;

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

    opacity: .9;
}


/* LEFT */

.library-obelisk-left {
    left: 2%;
}


/* RIGHT */

.library-obelisk-right {
    right: 2%;
}


/* ============================================================
   OBELISK CAP
   ============================================================ */

.obelisk-cap {

    width: 0;
    height: 0;

    border-left: 45px solid transparent;
    border-right: 45px solid transparent;
    border-bottom: 65px solid #806232;

    position: relative;

    color: #e0ba68;

    font-size: 25px;

    text-align: center;

    padding-top: 8px;

    filter:
        drop-shadow(0 4px 5px rgba(0,0,0,.6));
}


/* ============================================================
   OBELISK BODY
   ============================================================ */

.obelisk-body {

    width: 52px;
    flex: 1;

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

    padding-top: 25px;

    background:
        linear-gradient(
            90deg,
            #342615,
            #8a6b37 45%,
            #392917
        );

    border-left:
        1px solid rgba(230,190,105,.35);

    border-right:
        1px solid rgba(230,190,105,.25);

    box-shadow:
        inset 7px 0 10px rgba(255,220,140,.08),
        inset -8px 0 12px rgba(0,0,0,.55),
        0 0 25px rgba(0,0,0,.45);
}


.obelisk-body span {

    color: #d8ad57;

    font-size: 19px;

    margin: 18px 0;

    text-shadow:
        0 0 8px rgba(221,174,73,.25);
}


/* ============================================================
   OBELISK BASE
   ============================================================ */

.obelisk-base {

    width: 76px;
    height: 18px;

    background:
        linear-gradient(
            180deg,
            #9b783d,
            #4b351c
        );

    border-top:
        2px solid rgba(232,194,112,.45);

    box-shadow:
        0 7px 14px rgba(0,0,0,.55);
}


/* ============================================================
   SHELVES
   ============================================================ */

.library-shelf {

    position: absolute;

    left: 13%;
    right: 13%;

    height: 25px;

    background:
        linear-gradient(
            180deg,
            #b28a49 0%,
            #72532b 35%,
            #3c2917 100%
        );

    border-top:
        2px solid #d5aa5c;

    border-bottom:
        3px solid #24170c;

    box-shadow:
        0 8px 16px rgba(0,0,0,.65),
        0 0 14px rgba(201,156,69,.12);
}


/* ============================================================
   SHELVES — ALIGNED WITH GUARDIAN FEET
   ============================================================ */

.library-shelf {
    left: 11%;
    right: 11%;

    height: 24px;

    transform: translateY(-50%);

    z-index: 3;
}


/* الصف الأول */

.library-shelf.shelf-1 {
    top: 33.9%;
}


/* الصف الثاني */

.library-shelf.shelf-2 {
    top: 62.5%;
}


/* الصف الثالث */

.library-shelf.shelf-3 {
    top: 91%;
}


/* ============================================================
   GOLD DECORATION
   ============================================================ */

.shelf-gold-line {

    position: absolute;

    left: 7px;
    right: 7px;

    top: 5px;

    height: 2px;

    background:
        linear-gradient(
            90deg,
            transparent,
            #e1bb69,
            transparent
        );

    opacity: .75;
}


/* ============================================================
   SHELF HIEROGLYPHS
   ============================================================ */

.shelf-carving {

    position: absolute;

    left: 50%;
    top: 50%;

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

    color: #d8af5b;

    font-family:
        "Segoe UI Historic",
        serif;

    font-size: 13px;

    letter-spacing: 4px;

    text-shadow:
        0 1px 2px rgba(0,0,0,.8);
}


/* ============================================================
   PYRAMID FINALE
   ============================================================ */

.library-finale {

    position: absolute;

    left: 10%;
    right: 10%;

    bottom: 10px;

    height: 170px;

    overflow: hidden;

    background:
        radial-gradient(
            ellipse at center bottom,
            rgba(214,168,73,.16),
            transparent 65%
        );

    border-top:
        1px solid rgba(218,177,85,.18);
}


/* ============================================================
   PYRAMIDS
   ============================================================ */

.pyramid {

    position: absolute;

    bottom: -5px;

    clip-path:
        polygon(
            50% 0,
            100% 100%,
            0 100%
        );

    background:
        linear-gradient(
            135deg,
            #a27d42,
            #60451f 55%,
            #332311
        );

    box-shadow:
        inset 10px 0 15px rgba(255,213,127,.08),
        0 -4px 15px rgba(0,0,0,.4);
}


/* big pyramid */

.pyramid-back {

    width: 190px;
    height: 130px;

    left: 50%;

    transform: translateX(-50%);

    opacity: .45;
}


/* left pyramid */

.pyramid-left {

    width: 105px;
    height: 78px;

    left: 18%;

    opacity: .65;
}


/* right pyramid */

.pyramid-right {

    width: 120px;
    height: 88px;

    right: 17%;

    opacity: .6;
}


/* ============================================================
   FINALE SYMBOL
   ============================================================ */

.finale-inscription {

    position: absolute;

    left: 50%;
    bottom: 22px;

    transform: translateX(-50%);

    color: #e0b961;

    font-size: 34px;

    text-shadow:
        0 0 15px rgba(224,182,83,.35);
}


.finale-stars {

    position: absolute;

    top: 15px;
    left: 50%;

    transform: translateX(-50%);

    white-space: nowrap;

    color: rgba(222,181,94,.32);

    font-size: 15px;

    letter-spacing: 6px;
}


/* ============================================================
   KEEP REAL CONTENT ABOVE DECORATION
   ============================================================ */

#bookGrid > .book-station,
#bookGrid > .shelf-guardian {
    position: relative;

    z-index: 5;
}


/* ============================================================
   MOBILE
   ============================================================ */

@media (max-width: 900px) {

    .library-obelisk {
        width: 55px;
    }

    .library-obelisk-left {
        left: -5px;
    }

    .library-obelisk-right {
        right: -5px;
    }

    .library-shelf {
        left: 7%;
        right: 7%;
    }

    .library-finale {
        left: 5%;
        right: 5%;
    }
}
/* ============================================================
   PHARAONIC PYRAMID HORIZON — 3 PYRAMIDS ONLY
   ============================================================ */

.guardian-pyramid-horizon {
    position: absolute;
    left: -10%;
    right: -10%;
    bottom: 0;

    height: 500px;

    overflow: hidden;
    pointer-events: none;

    z-index: 2;

    background:
        radial-gradient(
            ellipse at 50% 72%,
            rgba(230, 190, 100, 0.18),
            transparent 60%
        );
}


/* ============================================================
   GOLDEN DESERT ATMOSPHERE
   ============================================================ */

.pyramid-atmosphere {
    position: absolute;
    inset: 0;

    background:
        radial-gradient(
            ellipse at 50% 65%,
            rgba(238, 204, 130, 0.16),
            transparent 48%
        ),
        linear-gradient(
            to top,
            rgba(8, 5, 3, 0.65),
            transparent 65%
        );

    z-index: 1;
}


/* ============================================================
   ALL PYRAMIDS
   ============================================================ */

.real-pyramid {
    position: absolute;

    bottom: 20px;

    clip-path:
        polygon(
            50% 0,
            100% 100%,
            0 100%
        );

    overflow: hidden;

    background:
        linear-gradient(
            115deg,
            #c6a46b 0%,
            #a27b45 32%,
            #79562e 65%,
            #452d15 100%
        );

    filter:
        drop-shadow(
            0 18px 25px rgba(0,0,0,.58)
        );
}


/* ============================================================
   1 — MAIN PYRAMID
   ============================================================ */

.pyramid-main {

    width: 700px;
    height: 500px;

    left: 50%;

    transform:
        translateX(-50%);

    z-index: 4;
}


/* ============================================================
   2 — LEFT PYRAMID
   ============================================================ */

.pyramid-left {

    width: 440px;
    height: 350px;

    left: 4%;

    bottom: 20px;

    z-index: 3;
}


/* ============================================================
   3 — RIGHT PYRAMID
   ============================================================ */

.pyramid-right {

    width: 455px;
    height: 360px;

    right: 4%;

    bottom: 20px;

    z-index: 3;
}


/* ============================================================
   PYRAMID LIGHT FACE
   ============================================================ */

.pyramid-face-light {

    position: absolute;

    left: 0;
    top: 0;

    width: 50%;
    height: 100%;

    background:
        linear-gradient(
            135deg,
            #d6b77d 0%,
            #b68c50 40%,
            #805d31 100%
        );

    clip-path:
        polygon(
            100% 0,
            100% 100%,
            0 100%
        );
}


/* ============================================================
   PYRAMID DARK FACE
   ============================================================ */

.pyramid-face-dark {

    position: absolute;

    right: 0;
    top: 0;

    width: 50%;
    height: 100%;

    background:
        linear-gradient(
            225deg,
            #95703e 0%,
            #6b4b27 45%,
            #39230f 100%
        );

    clip-path:
        polygon(
            0 0,
            100% 100%,
            0 100%
        );
}


/* ============================================================
   MASSIVE STONE BLOCKS
   ============================================================ */

.pyramid-blocks {

    position: absolute;
    inset: 0;

    background:

        repeating-linear-gradient(
            to bottom,
            transparent 0px,
            transparent 28px,
            rgba(45,27,11,.30) 29px,
            rgba(45,27,11,.30) 31px
        ),

        repeating-linear-gradient(
            90deg,
            transparent 0px,
            transparent 58px,
            rgba(255,226,164,.08) 59px,
            transparent 62px
        );

    opacity: .95;

    clip-path: inherit;
}


/* ============================================================
   EXTRA STONE DETAIL
   ============================================================ */

.real-pyramid::before {

    content: "";

    position: absolute;
    inset: 0;

    background:

        linear-gradient(
            118deg,
            transparent 25%,
            rgba(45,27,10,.18) 25.4%,
            transparent 26%
        ),

        linear-gradient(
            72deg,
            transparent 52%,
            rgba(255,225,161,.09) 52.4%,
            transparent 53%
        ),

        linear-gradient(
            145deg,
            transparent 68%,
            rgba(35,20,8,.20) 68.4%,
            transparent 69%
        );

    clip-path: inherit;
}


/* ============================================================
   ANCIENT STONE WEATHERING
   ============================================================ */

.real-pyramid::after {

    content: "";

    position: absolute;
    inset: 0;

    background:

        radial-gradient(
            ellipse at 32% 48%,
            rgba(50,30,12,.20),
            transparent 15%
        ),

        radial-gradient(
            ellipse at 68% 63%,
            rgba(35,20,8,.22),
            transparent 18%
        );

    clip-path: inherit;
}


/* ============================================================
   HIEROGLYPHIC SYMBOL BAND
   ============================================================ */

.pyramid-horizon {

    position: absolute;

    left: 50%;
    bottom: 390px;

    transform:
        translateX(-50%);

    z-index: 10;

    white-space: nowrap;

    font-family:
        "Noto Sans Egyptian Hieroglyphs",
        "Segoe UI Historic",
        serif;

    font-size: 24px;

    letter-spacing: 14px;

    color:
        rgba(238, 204, 123, .46);

    text-shadow:
        0 0 8px rgba(218, 174, 72, .28),
        0 2px 3px rgba(0,0,0,.7);

    opacity: .9;
}


/* ============================================================
   PHARAONIC SYMBOLS AROUND THE HORIZON
   ============================================================ */

.guardian-pyramid-horizon::before {

    content:
        "𓂀   𓋹   𓇳   𓆣   𓅃   𓊹   𓂀   𓋹";

    position: absolute;

    left: 50%;
    bottom: 55px;

    transform:
        translateX(-50%);

    z-index: 12;

    white-space: nowrap;

    font-family:
        "Noto Sans Egyptian Hieroglyphs",
        "Segoe UI Historic",
        serif;

    font-size: 27px;

    letter-spacing: 17px;

    color:
        rgba(222, 181, 88, .27);

    text-shadow:
        0 0 12px rgba(222,181,88,.25);

    opacity: .8;
}


/* ============================================================
   DESERT GROUND
   ============================================================ */

.guardian-pyramid-horizon::after {

    content: "";

    position: absolute;

    left: -5%;
    right: -5%;
    bottom: 0;

    height: 85px;

    z-index: 15;

    background:
        linear-gradient(
            to top,
            rgba(25,16,8,.92),
            rgba(76,51,25,.42),
            transparent
        );

    box-shadow:
        inset 0 18px 30px rgba(0,0,0,.25);
}


/* ============================================================
   GUARDIAN ALWAYS IN FRONT
   ============================================================ */

.guardian-walk-area,
.knowledge-guardian {

    position: relative;

    z-index: 30 !important;
}


/* ============================================================
   DESKTOP — BIG CINEMATIC VIEW
   ============================================================ */

@media (min-width: 1200px) {

    .guardian-pyramid-horizon {
        height: 540px;
    }

    .pyramid-main {
        width: 760px;
        height: 540px;
    }

    .pyramid-left {
        width: 475px;
        height: 375px;

        left: 1%;
    }

    .pyramid-right {
        width: 490px;
        height: 385px;

        right: 1%;
    }
}
/* ============================================================
   FINAL PYRAMID PEAK FIX
   إصلاح رأس الهرم الأوسط فقط
   ============================================================ */

.guardian-pyramid-horizon .pyramid-main {
    position: absolute !important;

    width: 760px !important;
    height: 540px !important;

    left: 50% !important;
    bottom: 20px !important;

    transform: translateX(-50%) !important;

    /* أهم نقطة */
    overflow: visible !important;

    clip-path: polygon(
        50% 0%,
        100% 100%,
        0% 100%
    ) !important;

    background:
        linear-gradient(
            115deg,
            #c6a46b 0%,
            #a27b45 32%,
            #79562e 65%,
            #452d15 100%
        ) !important;

    z-index: 4 !important;
}


/* ============================================================
   نصف الهرم الشمال
   ============================================================ */

.guardian-pyramid-horizon
.pyramid-main
.pyramid-face-light {

    position: absolute !important;

    top: 0 !important;
    left: 0 !important;

    width: 50% !important;
    height: 100% !important;

    clip-path: polygon(
        100% 0%,
        100% 100%,
        0% 100%
    ) !important;

    background:
        linear-gradient(
            135deg,
            #d8b87b 0%,
            #b88c50 45%,
            #805d32 100%
        ) !important;
}


/* ============================================================
   نصف الهرم اليمين
   ============================================================ */

.guardian-pyramid-horizon
.pyramid-main
.pyramid-face-dark {

    position: absolute !important;

    top: 0 !important;
    right: 0 !important;

    width: 50% !important;
    height: 100% !important;

    clip-path: polygon(
        0% 0%,
        100% 100%,
        0% 100%
    ) !important;

    background:
        linear-gradient(
            225deg,
            #9a7442 0%,
            #704e29 48%,
            #3d2612 100%
        ) !important;
}


/* ============================================================
   رأس الهرم — قطعة واحدة حقيقية فوق القمة
   ============================================================ */

.guardian-pyramid-horizon
.pyramid-main::after {

    content: "" !important;

    position: absolute !important;

    left: 50% !important;
    top: -1px !important;

    width: 0 !important;
    height: 0 !important;

    transform: translateX(-50%) !important;

    border-left: 7px solid transparent !important;
    border-right: 7px solid transparent !important;
    border-bottom: 13px solid #c6a46b !important;

    clip-path: none !important;

    display: block !important;

    z-index: 50 !important;

    pointer-events: none !important;
}


/* ============================================================
   منع أي طبقة من قص الرأس
   ============================================================ */

.guardian-pyramid-horizon {
    overflow: visible !important;
}


/* نخلي الهرم نفسه خلف الحراس */
.guardian-pyramid-horizon .pyramid-main {
    z-index: 4 !important;
}

.guardian-walk-area,
.knowledge-guardian {
    position: relative !important;
    z-index: 30 !important;
}
/* ============================================================
   REMOVE OLD PYRAMIDS UNDER THE SHELVES
   إزالة الأهرامات القديمة الموجودة أسفل الرفوف
   ============================================================ */

/* إخفاء منطقة الـ finale القديمة بالكامل */
.library-finale {
    display: none !important;
}

/* تأكيد إخفاء أي أهرامات قديمة بداخلها */
.library-finale .pyramid,
.library-finale .pyramid-back,
.library-finale .pyramid-left,
.library-finale .pyramid-right {
    display: none !important;
}
/* ============================================================
   KILL SHELF AREA GLOW — HARD OVERRIDE
   ============================================================ */

/* الرفوف نفسها */
#bookGrid .library-shelf {
    background: linear-gradient(
        180deg,
        #b28a49 0%,
        #72532b 35%,
        #3c2917 100%
    ) !important;

    box-shadow:
        0 8px 16px rgba(0,0,0,.65) !important;

    filter: none !important;
}

/* ممنوع أي pseudo-element يعمل إضاءة للرف */
#bookGrid .library-shelf::before,
#bookGrid .library-shelf::after {
    display: none !important;
    content: none !important;
    background: transparent !important;
    box-shadow: none !important;
    filter: none !important;
}

/* الخط الذهبي الموجود فوق الرف */
#bookGrid .shelf-gold-line {
    display: none !important;
}


/* ============================================================
   إزالة الهالات الخلفية فقط
   ============================================================ */

#bookGrid .guardian-pyramid-horizon {
    background: transparent !important;
}

#bookGrid .guardian-pyramid-horizon::before {
    display: none !important;
}

#bookGrid .pyramid-atmosphere {
    display: none !important;
}


/* ============================================================
   إزالة هالة النهاية القديمة
   ============================================================ */

#bookGrid .library-finale {
    background: transparent !important;
    box-shadow: none !important;
}


/* ============================================================
   IMPORTANT:
   منع أي عنصر معماري من عمل glow
   ============================================================ */

#bookGrid .library-architecture {
    filter: none !important;
    box-shadow: none !important;
}

#bookGrid .library-obelisk,
#bookGrid .obelisk-body,
#bookGrid .obelisk-base {
    filter: none !important;
}


/* ============================================================
   إزالة أي glow من حدود الرفوف
   ============================================================ */

#bookGrid .library-shelf {
    border-top-color: #d5aa5c !important;
    border-bottom-color: #24170c !important;
}
/* =========================================================
   PYRAMID LIGHT BEACON
   ثابت فوق الأهرامات + عمود نور رأسي
========================================================= */

.pyramid-light-beacon {
    position: absolute;

    /* مكان الكشاف فوق الأهرامات */
    left: 50%;
    top: 3%;

    width: 90px;
    height: 430px;

    transform: translateX(-50%);

    pointer-events: none;

    z-index: 8;
}


/* =========================================================
   مصدر الكشاف
========================================================= */

.beacon-source {
    position: absolute;

    top: 0;
    left: 50%;

    width: 26px;
    height: 26px;

    transform: translateX(-50%);

    border-radius: 50%;

    background:
        radial-gradient(
            circle,
            #fffbe0 0%,
            #f4d35e 30%,
            #d4af37 55%,
            transparent 75%
        );

    box-shadow:
        0 0 10px #f4d35e,
        0 0 25px rgba(244,211,94,.7),
        0 0 45px rgba(244,211,94,.35);

    animation: beaconBlink 2.8s ease-in-out infinite;
}


/* =========================================================
   عمود النور
========================================================= */

.beacon-column {
    position: absolute;

    top: 18px;
    left: 50%;

    width: 34px;
    height: 400px;

    transform: translateX(-50%);

    background:
        linear-gradient(
            to bottom,
            rgba(244,211,94,.55),
            rgba(244,211,94,.28) 35%,
            rgba(244,211,94,.14) 70%,
            transparent 100%
        );

    clip-path: polygon(
        30% 0%,
        70% 0%,
        100% 100%,
        0% 100%
    );

    filter:
        blur(5px)
        drop-shadow(0 0 12px rgba(244,211,94,.55));

    transform-origin: top center;

    animation: beaconColumnBlink 2.8s ease-in-out infinite;
}


/* =========================================================
   طبقة نور داخلية — تخلي العمود أوضح
========================================================= */

.pyramid-light-beacon::after {
    content: "";

    position: absolute;

    top: 18px;
    left: 50%;

    width: 8px;
    height: 390px;

    transform: translateX(-50%);

    background:
        linear-gradient(
            to bottom,
            rgba(255,250,200,.8),
            rgba(244,211,94,.35),
            transparent
        );

    filter: blur(3px);

    opacity: .7;

    animation: beaconCoreBlink 2.8s ease-in-out infinite;
}


/* =========================================================
   BLINK
========================================================= */

@keyframes beaconBlink {

    0%,
    100% {
        opacity: .65;
        transform: translateX(-50%) scale(.9);
    }

    50% {
        opacity: 1;
        transform: translateX(-50%) scale(1.15);
    }

}


@keyframes beaconColumnBlink {

    0%,
    100% {
        opacity: .38;
    }

    50% {
        opacity: .75;
    }

}


@keyframes beaconCoreBlink {

    0%,
    100% {
        opacity: .35;
    }

    50% {
        opacity: .85;
    }

}
/* =========================================================
   EGYPTIAN STAT ICONS — ANIMATED TEMPLE STYLE
   ========================================================= */

.stat-icon {
  width: 82px;
  height: 82px;
  overflow: visible;

  transform-origin: center;

  filter:
    drop-shadow(0 0 4px rgba(212, 175, 55, 0.18));

  animation: templeIconFloat 4.5s ease-in-out infinite;

  transition:
    transform 0.45s ease,
    filter 0.45s ease;
}


/* =========================================================
   VERY LIGHT IDLE MOVEMENT
   ========================================================= */

@keyframes templeIconFloat {

  0%,
  100% {
    transform: translateY(0);
  }

  50% {
    transform: translateY(-3px);
  }

}


/* =========================================================
   COMMON COLORS
   ========================================================= */

.stat-icon .icon-frame,
.stat-icon .icon-line,
.stat-icon .book-line,
.stat-icon .temple-line {

  fill: none;

  stroke: #8f7028;

  stroke-width: 1.5;

  stroke-linecap: round;
  stroke-linejoin: round;
}


.stat-icon .icon-gold,
.stat-icon .book-gold,
.stat-icon .temple-gold {

  fill: #d4af37;

}


.stat-icon .icon-stone,
.stat-icon .book-stone,
.stat-icon .temple-stone {

  fill: #c9a876;

}


/* =========================================================
   STUDENTS
   ========================================================= */

.stat-icon-students .icon-frame {

  fill: none;

  stroke: #9d7b32;

  stroke-width: 2;

}


.stat-icon-students .icon-gold {

  filter:
    drop-shadow(0 0 3px rgba(212, 175, 55, 0.35));

}


.stat-icon-students .icon-eye {

  fill: none;

  stroke: #d4af37;

  stroke-width: 1.5;

  animation:
    eyeGlow 3.5s ease-in-out infinite;

}


.stat-icon-students .icon-eye-dot {

  fill: #d4af37;

  animation:
    eyePulse 3.5s ease-in-out infinite;

}


@keyframes eyeGlow {

  0%,
  70%,
  100% {
    opacity: 0.8;
  }

  75%,
  85% {
    opacity: 1;
  }

}


@keyframes eyePulse {

  0%,
  70%,
  100% {
    opacity: 0.6;
  }

  78% {
    opacity: 1;
  }

}


.stat-icon-students .icon-line {

  stroke: #705522;

  stroke-width: 1.2;

}


/* =========================================================
   BOOKS
   ========================================================= */

.stat-icon-books .book-dark {

  fill: #705522;

}


.stat-icon-books .book-stone {

  fill: #a88b5d;

}


.stat-icon-books .book-front {

  fill: #d0b27e;

}


.stat-icon-books .book-gold {

  fill: #d4af37;

  filter:
    drop-shadow(0 0 2px rgba(212, 175, 55, 0.25));

}


.stat-icon-books .book-line {

  stroke: #674d20;

  stroke-width: 1.4;

}


.stat-icon-books .ankh {

  fill: none;

  stroke: #d4af37;

  stroke-width: 1.4;

  stroke-linecap: round;

  animation:
    ankhGlow 4s ease-in-out infinite;

}


@keyframes ankhGlow {

  0%,
  65%,
  100% {
    opacity: 0.55;
  }

  72%,
  82% {
    opacity: 1;
  }

}


/* =========================================================
   LIBRARY VISITS — TEMPLE
   ========================================================= */

.stat-icon-visits .visit-sun {

  fill: #d4af37;

  filter:
    drop-shadow(0 0 4px rgba(212, 175, 55, 0.4));

  transform-origin: 40px 12px;

  animation:
    sunPulse 4s ease-in-out infinite;

}


@keyframes sunPulse {

  0%,
  100% {
    transform: scale(1);
    opacity: 0.85;
  }

  50% {
    transform: scale(1.12);
    opacity: 1;
  }

}


.stat-icon-visits .temple-stone {

  fill: #b89b6b;

}


.stat-icon-visits .temple-door {

  fill: #35291f;

}


.stat-icon-visits .visit-eye {

  fill: none;

  stroke: #d4af37;

  stroke-width: 1.6;

  animation:
    horusGlow 4s ease-in-out infinite;

}


.stat-icon-visits .visit-eye-dot {

  fill: #d4af37;

}


@keyframes horusGlow {

  0%,
  65%,
  100% {
    opacity: 0.65;

    filter:
      drop-shadow(0 0 0 rgba(212, 175, 55, 0));
  }

  72%,
  82% {
    opacity: 1;

    filter:
      drop-shadow(0 0 5px rgba(212, 175, 55, 0.7));
  }

}


/* =========================================================
   HOVER — MORE ENERGY
   ========================================================= */

.stat-card:hover .stat-icon {

  animation: none;

  transform:
    translateY(-6px)
    scale(1.07);

  filter:
    drop-shadow(0 0 7px rgba(212, 175, 55, 0.45))
    drop-shadow(0 0 18px rgba(212, 175, 55, 0.14));

}


/* =========================================================
   HOVER GOLD
   ========================================================= */

.stat-card:hover
.stat-icon .icon-gold,

.stat-card:hover
.stat-icon .book-gold,

.stat-card:hover
.stat-icon .temple-gold {

  filter:
    drop-shadow(0 0 5px rgba(212, 175, 55, 0.7));

}


/* =========================================================
   HOVER EYE
   ========================================================= */

.stat-card:hover
.stat-icon-students .icon-eye,

.stat-card:hover
.stat-icon-visits .visit-eye {

  filter:
    drop-shadow(0 0 6px rgba(212, 175, 55, 0.8));

}


/* =========================================================
   REDUCE MOTION
   ========================================================= */

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

  .stat-icon,
  .stat-icon-students .icon-eye,
  .stat-icon-students .icon-eye-dot,
  .stat-icon-books .ankh,
  .stat-icon-visits .visit-sun,
  .stat-icon-visits .visit-eye {

    animation: none;

  }

  .stat-card:hover .stat-icon {

    transform: none;

  }

}
/* =========================================================
   END OF STUDENT HALL
   ========================================================= */

.student-hall {
  position: relative;
  overflow: hidden;
}


/* مساحة النهاية */

.hall-ending {
  position: relative;

  width: 100%;
  height: 260px;

  margin-top: 20px;

  overflow: hidden;

  background:
    linear-gradient(
      to bottom,
      transparent,
      rgba(20, 13, 7, 0.75) 35%,
      #0b0704 100%
    );

  pointer-events: none;
}


/* ضوء النهاية */

.hall-ending-light {
  position: absolute;

  left: 50%;
  bottom: -80px;

  width: 420px;
  height: 260px;

  transform: translateX(-50%);

  background:
    radial-gradient(
      ellipse,
      rgba(212, 175, 55, 0.20),
      rgba(212, 175, 55, 0.06) 40%,
      transparent 72%
    );

  filter: blur(10px);

  animation:
    endingLightPulse 5s ease-in-out infinite;
}


@keyframes endingLightPulse {

  0%,
  100% {
    opacity: .55;
    transform: translateX(-50%) scale(.94);
  }

  50% {
    opacity: 1;
    transform: translateX(-50%) scale(1.06);
  }

}


/* =========================================================
   DISTANT GATE
   ========================================================= */

.ending-gate {

  position: absolute;

  left: 50%;
  bottom: 20px;

  width: 90px;
  height: 125px;

  transform: translateX(-50%);

  border:
    4px solid #76582d;

  border-bottom:
    5px solid #d4af37;

  background: #080503;

  box-shadow:
    0 0 25px rgba(212,175,55,.15);

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

  opacity: .75;
}


/* البوابة نفسها */

.ending-gate::before {

  content: "";

  position: absolute;

  left: -12px;
  right: -12px;
  top: -10px;

  height: 14px;

  background:
    linear-gradient(
      to bottom,
      #b08b4c,
      #604720
    );

  border:
    1px solid rgba(212,175,55,.45);
}


/* الضوء داخل البوابة */

.ending-gate-light {

  position: absolute;

  inset: 8px;

  background:
    radial-gradient(
      ellipse at center,
      rgba(212,175,55,.18),
      transparent 65%
    );

  animation:
    gateGlow 4s ease-in-out infinite;
}


@keyframes gateGlow {

  0%,
  100% {
    opacity: .4;
  }

  50% {
    opacity: 1;
  }

}


.ending-gate span {

  position: relative;

  z-index: 2;

  font-size: 28px;

  color: #d4af37;

  text-shadow:
    0 0 12px rgba(212,175,55,.5);

  animation:
    eyeGlow 4s ease-in-out infinite;
}


/* =========================================================
   COLUMNS
   ========================================================= */

.ending-column {

  position: absolute;

  bottom: -10px;

  width: 55px;
  height: 220px;

  background:
    linear-gradient(
      90deg,
      #3b2a16,
      #9b7945 30%,
      #654a26 55%,
      #ad8a4f 80%,
      #382715
    );

  border:
    1px solid rgba(212,175,55,.25);

  box-shadow:
    inset 0 0 15px rgba(0,0,0,.4);
}


.ending-column::before {

  content: "";

  position: absolute;

  left: -8px;
  right: -8px;

  top: 0;

  height: 24px;

  background:
    linear-gradient(
      to bottom,
      #b08b4c,
      #5a421f
    );

  border-bottom:
    2px solid #d4af37;
}


.ending-column::after {

  content: "𓂀";

  position: absolute;

  left: 50%;
  top: 55px;

  transform: translateX(-50%);

  color:
    rgba(61,47,34,.5);

  font-size: 22px;
}


.ending-column-left {
  left: 14%;
}


.ending-column-right {
  right: 14%;
}


/* =========================================================
   DUST
   ========================================================= */

.ending-dust {

  position: absolute;

  width: 3px;
  height: 3px;

  border-radius: 50%;

  background: #d4af37;

  opacity: .3;

  box-shadow:
    0 0 7px rgba(212,175,55,.4);

  animation:
    endingDust 7s ease-in-out infinite;
}


.ending-dust-1 {
  left: 35%;
  bottom: 50px;
}


.ending-dust-2 {
  left: 62%;
  bottom: 90px;

  animation-delay: -3s;
}


.ending-dust-3 {
  left: 48%;
  bottom: 35px;

  animation-delay: -5s;
}


@keyframes endingDust {

  0%,
  100% {
    transform:
      translate(0,0);

    opacity: .12;
  }

  50% {
    transform:
      translate(15px,-35px);

    opacity: .5;
  }

}
/* =========================================
   FINAL BACKGROUND — BEFORE TEMPLE EXIT
   ========================================= */

.student-hall {
  position: relative;
  overflow: hidden;

  background:
    radial-gradient(
      ellipse at 50% 100%,
      rgba(212, 175, 55, 0.14) 0%,
      rgba(92, 64, 27, 0.10) 25%,
      transparent 58%
    ),
    linear-gradient(
      180deg,
      #17110b 0%,
      #120d08 55%,
      #090604 100%
    );
}


/* =========================================
   DISTANT EXIT GLOW
   ========================================= */

.student-hall::before {
  content: "";

  position: absolute;

  left: 50%;
  bottom: 0;

  width: 420px;
  height: 300px;

  transform: translateX(-50%);

  pointer-events: none;

  background:
    radial-gradient(
      ellipse at bottom,
      rgba(212,175,55,0.18),
      rgba(212,175,55,0.07) 35%,
      transparent 72%
    );

  filter: blur(8px);

  opacity: .75;

  animation:
    exitGlow 6s ease-in-out infinite;

  z-index: 0;
}


@keyframes exitGlow {

  0%,
  100% {
    opacity: .5;
    transform:
      translateX(-50%)
      scale(.94);
  }

  50% {
    opacity: .9;
    transform:
      translateX(-50%)
      scale(1.05);
  }

}


/* =========================================
   TEMPLE EXIT SILHOUETTE
   ========================================= */

.student-hall::after {

  content: "";

  position: absolute;

  left: 50%;
  bottom: 0;

  width: 145px;
  height: 175px;

  transform:
    translateX(-50%);

  pointer-events: none;

  opacity: .32;

  background:

    /* doorway */
    linear-gradient(
      90deg,
      transparent 22%,
      #080503 22%,
      #080503 78%,
      transparent 78%
    );

  border-top:
    5px solid rgba(150,110,48,.45);

  border-left:
    12px solid rgba(108,78,34,.35);

  border-right:
    12px solid rgba(108,78,34,.35);

  box-shadow:
    0 0 35px rgba(212,175,55,.08);

  z-index: 1;
}
/* =========================================
   FINAL BACKGROUND — BEFORE TEMPLE EXIT
   ========================================= */

.student-hall {
  position: relative;
  overflow: hidden;

  background:
    radial-gradient(
      ellipse at 50% 100%,
      rgba(212, 175, 55, 0.14) 0%,
      rgba(92, 64, 27, 0.10) 25%,
      transparent 58%
    ),
    linear-gradient(
      180deg,
      #17110b 0%,
      #120d08 55%,
      #090604 100%
    );
}


/* =========================================
   DISTANT EXIT GLOW
   ========================================= */

.student-hall::before {
  content: "";

  position: absolute;

  left: 50%;
  bottom: 0;

  width: 420px;
  height: 300px;

  transform: translateX(-50%);

  pointer-events: none;

  background:
    radial-gradient(
      ellipse at bottom,
      rgba(212,175,55,0.18),
      rgba(212,175,55,0.07) 35%,
      transparent 72%
    );

  filter: blur(8px);

  opacity: .75;

  animation:
    exitGlow 6s ease-in-out infinite;

  z-index: 0;
}


@keyframes exitGlow {

  0%,
  100% {
    opacity: .5;
    transform:
      translateX(-50%)
      scale(.94);
  }

  50% {
    opacity: .9;
    transform:
      translateX(-50%)
      scale(1.05);
  }

}


/* =========================================
   TEMPLE EXIT SILHOUETTE
   ========================================= */

.student-hall::after {

  content: "";

  position: absolute;

  left: 50%;
  bottom: 0;

  width: 145px;
  height: 175px;

  transform:
    translateX(-50%);

  pointer-events: none;

  opacity: .32;

  background:

    /* doorway */
    linear-gradient(
      90deg,
      transparent 22%,
      #080503 22%,
      #080503 78%,
      transparent 78%
    );

  border-top:
    5px solid rgba(150,110,48,.45);

  border-left:
    12px solid rgba(108,78,34,.35);

  border-right:
    12px solid rgba(108,78,34,.35);

  box-shadow:
    0 0 35px rgba(212,175,55,.08);

  z-index: 1;
}
/* ============================================================
   FINAL EXIT — GATE / FAREWELL / SERVICES SPACING
   ============================================================ */

.temple-exit .exit-gate-wrap{
    height:68vh;
    margin-bottom:10vh;
}

.temple-exit .exit-farewell{
    padding-top:3vh;
    padding-bottom:9vh;
}

.temple-exit .exit-footer{
    margin-top:4vh;
    padding-top:0;
}
/* ============================================================
   TEMPLE EXIT — CLEAN FINAL LAYOUT
   Fixes gate / farewell / services overlap
   ============================================================ */

/* ------------------------------------------------------------
   EXIT SECTION
------------------------------------------------------------ */

.temple-exit{
  position:relative;
  width:100%;
  min-height:180vh;

  overflow:hidden;
  isolation:isolate;

  /* keep normal document flow */
  display:block;
}


/* ------------------------------------------------------------
   GATE
   The gate stays in its own area
------------------------------------------------------------ */

.temple-exit .exit-gate-wrap{

  position:relative !important;

  left:auto !important;
  top:auto !important;

  transform:none !important;

  width:min(62vw,570px);
  height:min(76vh,650px);

  margin:0 auto;

  z-index:5;

  perspective:1500px;

  filter:
    drop-shadow(
      0 35px 50px
      rgba(0,0,0,.75)
    );
}


/* ------------------------------------------------------------
   FAREWELL
   Put it BELOW the gate
------------------------------------------------------------ */

.temple-exit .exit-farewell{

  position:relative !important;

  left:auto !important;
  top:auto !important;

  width:min(650px,88%);

  margin:0 auto;

  padding:
    5vh 20px
    8vh;

  transform:
    translateY(20px);

  z-index:15;

  text-align:center;

  opacity:0;

  transition:
    opacity 1s ease,
    transform 1s ease;
}


.temple-exit .exit-farewell.visible{

  opacity:1;

  transform:
    translateY(0);
}


/* ------------------------------------------------------------
   SERVICES
   IMPORTANT:
   They remain in NORMAL FLOW and go after farewell
------------------------------------------------------------ */

.temple-exit .exit-footer{

  position:relative !important;

  left:auto !important;
  bottom:auto !important;

  transform:none !important;

  width:min(1180px,88%);

  margin:
    2vh auto 0 !important;

  padding:
    0 0 8vh !important;

  display:grid !important;

  grid-template-columns:
    repeat(4,1fr);

  gap:24px;

  z-index:12;
}


/* ------------------------------------------------------------
   SERVICE CARDS
------------------------------------------------------------ */

.temple-exit .exit-card{

  position:relative;

  min-height:190px;

  box-sizing:border-box;

  padding:
    28px 22px;
}


/* ------------------------------------------------------------
   SIGN OFF
   Comes AFTER the service cards
------------------------------------------------------------ */

.temple-exit .exit-signoff{

  position:relative !important;

  left:auto !important;
  right:auto !important;
  bottom:auto !important;

  margin:0 !important;

  padding:
    0 20px 70px !important;

  z-index:13;

  text-align:center;
}


/* ============================================================
   EXTRA SPACE BETWEEN GATE AND SERVICES
   ============================================================ */

.temple-exit .exit-gate-wrap{
  margin-bottom:4vh;
}


/* ============================================================
   TABLET
============================================================ */

@media (max-width:900px){

  .temple-exit{
    min-height:190vh;
  }

  .temple-exit .exit-gate-wrap{
    width:min(78vw,500px);
  }

  .temple-exit .exit-footer{
    grid-template-columns:
      repeat(2,1fr);
  }

}


/* ============================================================
   MOBILE
============================================================ */

@media (max-width:560px){

  .temple-exit{
    min-height:auto;
  }

  .temple-exit .exit-gate-wrap{

    width:90vw;
    height:60vh;

    margin-bottom:5vh;
  }

  .temple-exit .exit-farewell{

    width:88%;

    padding:
      4vh 10px
      7vh;
  }

  .temple-exit .exit-footer{

    width:82%;

    grid-template-columns:
      1fr;

    gap:18px;
  }

}
/* ============================================================
   FINAL PAGE DESERT
   ONLY THE LOWER END OF TEMPLE EXIT
   DOES NOT MODIFY THE GATE
============================================================ */

.temple-exit{
  position:relative;
}


/* ============================================================
   DESERT AREA
============================================================ */

.temple-exit .exit-desert{

  position:absolute;

  left:0;
  right:0;
  bottom:0;

  height:42%;

  overflow:hidden;

  pointer-events:none;

  z-index:2;

  background:
    linear-gradient(
      to bottom,
      transparent 0%,
      rgba(48,28,13,.18) 18%,
      rgba(82,46,20,.55) 55%,
      #211208 100%
    );
}


/* ============================================================
   HORIZON LIGHT
============================================================ */

.temple-exit .desert-horizon{

  position:absolute;

  left:50%;
  top:-30px;

  width:75%;
  height:170px;

  transform:translateX(-50%);

  background:
    radial-gradient(
      ellipse,
      rgba(255,207,125,.35),
      rgba(214,137,55,.15) 38%,
      transparent 72%
    );

  filter:blur(12px);
}


/* ============================================================
   BACK SAND
============================================================ */

.temple-exit .sand-dune{

  position:absolute;

  left:-15%;

  width:130%;

  border-radius:50%;

  pointer-events:none;
}


.temple-exit .dune-back{

  top:10%;

  height:170px;

  background:
    radial-gradient(
      ellipse at 50% 100%,
      #6e401d,
      #432511 55%,
      transparent 73%
    );

  transform:rotate(-2deg);

  opacity:.85;
}


/* ============================================================
   MIDDLE SAND
============================================================ */

.temple-exit .dune-middle{

  top:28%;

  height:210px;

  background:
    radial-gradient(
      ellipse at 50% 100%,
      #9a5d2b,
      #663919 55%,
      transparent 74%
    );

  transform:rotate(2deg);
}


/* ============================================================
   FRONT SAND
============================================================ */

.temple-exit .dune-front{

  top:48%;

  height:300px;

  background:
    radial-gradient(
      ellipse at 50% 0%,
      #b97635,
      #8b5224 42%,
      #542f16 72%,
      #251309 100%
    );

  box-shadow:
    0 -20px 40px rgba(207,133,53,.14);

  transform:rotate(-1deg);
}


/* ============================================================
   SAND RIPPLE
============================================================ */

.temple-exit .sand-ripples{

  position:absolute;

  left:-10%;

  width:120%;

  height:130px;

  border-radius:50%;

  opacity:.35;

  background:
    repeating-radial-gradient(
      ellipse at 50% 100%,
      transparent 0 15px,
      rgba(43,22,10,.38) 16px 18px,
      transparent 19px 34px
    );
}


.temple-exit .ripple-1{
  top:50%;
  transform:rotate(-3deg);
}

.temple-exit .ripple-2{
  top:67%;
  transform:rotate(3deg);
  opacity:.27;
}

.temple-exit .ripple-3{
  top:82%;
  transform:rotate(-2deg);
  opacity:.2;
}


/* ============================================================
   CAMELS
============================================================ */

.temple-exit .exit-camel{

  position:absolute;

  width:150px;
  height:110px;

  opacity:.68;

  filter:
    drop-shadow(0 8px 7px rgba(0,0,0,.5));

  z-index:8;
}


/* BODY */

.temple-exit .camel-body{

  position:absolute;

  left:30px;
  top:44px;

  width:88px;
  height:38px;

  border-radius:50%;

  background:
    linear-gradient(
      to bottom,
      #2b180b,
      #100804
    );
}


/* HUMP */

.temple-exit .camel-hump{

  position:absolute;

  left:52px;
  top:25px;

  width:40px;
  height:38px;

  border-radius:50% 50% 20% 20%;

  background:#160b05;
}


/* NECK */

.temple-exit .camel-neck{

  position:absolute;

  left:105px;
  top:14px;

  width:18px;
  height:62px;

  background:#130904;

  border-radius:70% 40% 30% 50%;

  transform:rotate(-15deg);
}


/* HEAD */

.temple-exit .camel-head{

  position:absolute;

  left:115px;
  top:7px;

  width:31px;
  height:20px;

  background:#100704;

  border-radius:60% 45% 45% 40%;
}


/* LEGS */

.temple-exit .camel-leg{

  position:absolute;

  top:73px;

  width:7px;
  height:40px;

  border-radius:5px;

  background:#110804;

  transform-origin:top center;
}


.temple-exit .leg-1{
  left:40px;
}

.temple-exit .leg-2{
  left:60px;
}

.temple-exit .leg-3{
  left:90px;
}

.temple-exit .leg-4{
  left:108px;
}


/* ============================================================
   CAMEL MOVEMENT
============================================================ */

.temple-exit .camel-left{

  left:-180px;
  top:34%;

  transform:scale(.72);

  animation:
    camelAcross 24s linear infinite;
}


.temple-exit .camel-right{

  right:-180px;
  top:57%;

  transform:
    scale(.5)
    scaleX(-1);

  animation:
    camelAcrossReverse 29s linear infinite;
}


@keyframes camelAcross{

  from{
    left:-180px;
  }

  to{
    left:calc(100% + 180px);
  }

}


@keyframes camelAcrossReverse{

  from{
    right:-180px;
  }

  to{
    right:calc(100% + 180px);
  }

}


/* ============================================================
   ROCKS
============================================================ */

.temple-exit .desert-rock{

  position:absolute;

  display:block;

  background:
    linear-gradient(
      145deg,
      #4c2a14,
      #1d1007
    );

  border-radius:55% 40% 45% 35%;

  box-shadow:
    0 7px 8px rgba(0,0,0,.4);

  z-index:7;
}


.temple-exit .rock-1{
  width:34px;
  height:18px;

  left:14%;
  bottom:17%;
}

.temple-exit .rock-2{
  width:23px;
  height:13px;

  right:17%;
  bottom:30%;
}

.temple-exit .rock-3{
  width:40px;
  height:18px;

  left:72%;
  bottom:10%;
}


/* ============================================================
   KEEP ALL EXISTING CONTENT ABOVE THE DESERT
============================================================ */

.temple-exit .exit-gate-wrap{
  z-index:5;
}

.temple-exit .exit-farewell{
  z-index:15;
}

.temple-exit .exit-footer{
  z-index:16;
}

.temple-exit .exit-signoff{
  z-index:16;
}


/* ============================================================
   MOBILE
============================================================ */

@media(max-width:700px){

  .temple-exit .exit-desert{
    height:38%;
  }

  .temple-exit .camel-left{
    transform:scale(.5);
  }

  .temple-exit .camel-right{
    transform:
      scale(.38)
      scaleX(-1);
  }

}
/* ============================================================
   LIBRARY POLICIES — STACK LINKS
============================================================ */

.temple-exit .policy-links {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;
}

.temple-exit .policy-links a {
  display: block;
  width: 100%;
}
/* ============================================================
   POLICY LINKS — GOLDEN VISIBILITY
============================================================ */

.temple-exit .policy-links a {

  display: block;
  width: 100%;

  color: #e8c86f !important;

  text-decoration: none;

  font-weight: 600;

  transition:
    color .25s ease,
    text-shadow .25s ease,
    transform .25s ease;
}

.temple-exit .policy-links a:hover {

  color: #ffe7a3 !important;

  text-shadow:
    0 0 8px rgba(244,211,94,.45);

  transform: translateX(4px);
}
/* ============================================================
   LIBRARY POLICIES — RED LINKS
============================================================ */

.temple-exit .exit-footer .exit-card:first-child .policy-links a,
.temple-exit .exit-footer .exit-card:first-child .policy-links a:visited {

  color: #e53935 !important;

  -webkit-text-fill-color: #e53935 !important;

  text-decoration: none !important;

  opacity: 1 !important;

  font-weight: 600;
}


/* Hover */

.temple-exit .exit-footer .exit-card:first-child .policy-links a:hover {

  color: #ff6b61 !important;

  -webkit-text-fill-color: #ff6b61 !important;

  text-shadow:
    0 0 8px rgba(255, 60, 50, .45);

  transform: translateX(4px);
}
/* ============================================================
   TEMPLE EXIT — CONTACT LINKS
   ============================================================ */

.temple-exit .exit-card a[href^="mailto"],
.temple-exit .exit-card a[href^="tel"] {
  color: #e34a3f !important;
  font-weight: 600;
  text-decoration: none;
  text-shadow: 0 0 8px rgba(227, 74, 63, 0.18);
}

.temple-exit .exit-card a[href^="mailto"]:hover,
.temple-exit .exit-card a[href^="tel"]:hover {
  color: #ff6b5f !important;
  text-decoration: underline;
  text-shadow: 0 0 12px rgba(255, 107, 95, 0.35);
}
/* ============================================================
   TEMPLE EXIT — CLEAR SERVICE TEXT
   ============================================================ */

/* كل النصوص داخل كروت الخدمات */
.temple-exit .exit-card p,
.temple-exit .exit-card a {
  font-size: 1rem !important;
  font-weight: 700 !important;
  line-height: 1.9 !important;
  letter-spacing: .02em;
}

/* روابط الخدمات */
.temple-exit .exit-card a {
  color: #e34a3f !important;
  text-decoration: none;
  display: block;
}

/* تأثير بسيط عند المرور */
.temple-exit .exit-card a:hover {
  color: #ff7065 !important;
  text-decoration: underline;
}

/* عنوان كل خدمة */
.temple-exit .exit-card h3 {
  font-size: 1rem !important;
  font-weight: 800 !important;
  letter-spacing: .12em;
}

/* مواعيد العمل */
.temple-exit .exit-card p {
  color: #f0dfb5 !important;
}

/* الإيميل والتليفون */
.temple-exit .exit-card a[href^="mailto"],
.temple-exit .exit-card a[href^="tel"] {
  color: #e34a3f !important;
  font-weight: 800 !important;
}
/* ============================================================
   CONTACT — TIGHT SPACING
============================================================ */

.temple-exit .exit-card a[href^="mailto"],
.temple-exit .exit-card a[href^="tel"] {
  display: block;
  margin: 0 !important;
  padding: 0 !important;
  line-height: 1.45 !important;
}

/* مسافة بسيطة جدًا بين السطرين */
.temple-exit .exit-card a[href^="mailto"] {
  margin-bottom: 2px !important;
}
/* ============================================================
   CONTACT — SAME SPACING AS POLICY LINKS
============================================================ */

.temple-exit .exit-card p {
  margin: 0 !important;
  padding: 0 !important;
}

.temple-exit .exit-card p a[href^="mailto"],
.temple-exit .exit-card p a[href^="tel"] {
  display: inline !important;
  margin: 0 !important;
  padding: 0 !important;
  line-height: 1.7 !important;
}

/* إزالة أي مسافة بين السطرين */
.temple-exit .exit-card p a[href^="mailto"] + br {
  line-height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
}
/* ============================================================
   TEMPLE EXIT — PREMIUM SOCIAL MEDIA
============================================================ */

.temple-exit .social-row {
  display: flex;
  flex-direction: column;
  gap: 11px;
  margin-top: 5px;
}

/* ============================================================
   SOCIAL BUTTON
============================================================ */

.temple-exit .social-pill {
  position: relative;

  display: flex !important;
  align-items: center;
  gap: 13px;

  width: 100%;
  min-height: 52px;

  box-sizing: border-box;

  padding: 9px 14px !important;

  border: 1px solid rgba(212,175,55,.34) !important;
  border-radius: 6px !important;

  background:
    linear-gradient(
      135deg,
      rgba(91,63,29,.55),
      rgba(28,17,9,.88)
    );

  color: #ead7a5 !important;

  font-family: Georgia, serif;
  font-size: .86rem !important;
  font-weight: 700 !important;
  letter-spacing: .05em;

  text-decoration: none !important;

  overflow: hidden;

  box-shadow:
    inset 0 0 18px rgba(0,0,0,.35),
    0 5px 14px rgba(0,0,0,.32);

  transition:
    transform .35s cubic-bezier(.2,.8,.2,1),
    border-color .35s ease,
    box-shadow .35s ease;
}


/* ============================================================
   GOLD LIGHT SWEEP
============================================================ */

.temple-exit .social-pill::after {
  content: "";

  position: absolute;

  top: -30%;
  left: -80%;

  width: 55%;
  height: 160%;

  background:
    linear-gradient(
      105deg,
      transparent,
      rgba(255,236,170,.28),
      rgba(255,255,220,.42),
      transparent
    );

  transform: skewX(-18deg);

  transition: left .7s ease;

  pointer-events: none;
}

.temple-exit .social-pill:hover::after {
  left: 135%;
}


/* ============================================================
   ICON BASE
============================================================ */

.temple-exit .social-pill::before {
  display: flex;

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

  position: relative;

  width: 31px;
  height: 31px;

  flex-shrink: 0;

  border: 1px solid rgba(212,175,55,.55);
  border-radius: 50%;

  background:
    radial-gradient(
      circle at 35% 30%,
      rgba(255,229,145,.28),
      rgba(48,30,13,.95)
    );

  color: #f1d477;

  font-family: Arial, sans-serif;
  font-size: .8rem;
  font-weight: 900;

  box-shadow:
    inset 0 0 8px rgba(0,0,0,.7),
    0 0 9px rgba(212,175,55,.12);

  transition:
    transform .45s cubic-bezier(.2,.8,.2,1),
    border-color .35s ease,
    box-shadow .35s ease,
    color .35s ease;
}


/* ============================================================
   LINKEDIN — CONNECTION / ROTATION
============================================================ */

.temple-exit .social-pill[href*="linkedin"]::before {
  content: "in";
}

.temple-exit .social-pill[href*="linkedin"]:hover::before {
  transform:
    rotateY(360deg)
    scale(1.12);

  color: #ffe6a0;

  border-color: #e7c86a;

  box-shadow:
    0 0 16px rgba(231,200,106,.45);
}


/* ============================================================
   X — SPIN
============================================================ */

.temple-exit .social-pill[href*="x.com"]::before {
  content: "𝕏";

  font-size: 1rem;
}

.temple-exit .social-pill[href*="x.com"]:hover::before {
  transform:
    rotate(180deg)
    scale(1.15);

  color: #fff1c4;

  border-color: #f0d477;

  box-shadow:
    0 0 18px rgba(240,212,119,.5);
}


/* ============================================================
   FACEBOOK — LIFT
============================================================ */

.temple-exit .social-pill[href*="facebook"]::before {
  content: "f";

  font-size: 1rem;
}

.temple-exit .social-pill[href*="facebook"]:hover::before {
  transform:
    translateY(-4px)
    scale(1.15);

  color: #ffe7a2;

  border-color: #e8c96c;

  box-shadow:
    0 0 16px rgba(232,201,108,.45);
}


/* ============================================================
   BUTTON HOVER
============================================================ */

.temple-exit .social-pill:hover {
  transform: translateX(6px);

  color: #fff0bd !important;

  border-color: rgba(244,211,94,.75) !important;

  background:
    linear-gradient(
      135deg,
      rgba(111,78,35,.72),
      rgba(40,24,11,.95)
    );

  box-shadow:
    inset 0 0 20px rgba(212,175,55,.1),
    0 8px 20px rgba(0,0,0,.5),
    0 0 18px rgba(212,175,55,.12);
}


/* ============================================================
   SMALL GOLD PARTICLE EFFECT
============================================================ */

.temple-exit .social-pill:hover {
  animation: socialFloat .45s ease-out;
}

@keyframes socialFloat {

  0% {
    transform: translateX(0);
  }

  45% {
    transform: translateX(8px);
  }

  100% {
    transform: translateX(6px);
  }

}


/* ============================================================
   REMOVE ANY OLD RED SOCIAL COLORS
============================================================ */

.temple-exit .social-pill,
.temple-exit .social-pill::before {
  color: #ead7a5 !important;
}

.temple-exit .social-pill:hover,
.temple-exit .social-pill:hover::before {
  color: #fff0bd !important;
}
/* ============================================================
   SOCIAL TEXT — RESTORE ORIGINAL GOLD COLOR
============================================================ */

.temple-exit .social-pill {
  color: #ead7a5 !important;
}

.temple-exit .social-pill:hover {
  color: #fff0bd !important;
}

/* الأيقونات تفضل ذهبية */
.temple-exit .social-pill::before {
  color: #f1d477 !important;
}

.temple-exit .social-pill:hover::before {
  color: #fff1c4 !important;
}
/* ============================================================
   FINAL SOCIAL COLOR OVERRIDE
   ============================================================ */

section.temple-exit .exit-footer .social-row a.social-pill,
section.temple-exit .exit-footer .social-row a.social-pill:link,
section.temple-exit .exit-footer .social-row a.social-pill:visited {
    color: #d7c18c !important;
    -webkit-text-fill-color: #d7c18c !important;
    text-decoration: none !important;
}

/* عند الوقوف بالماوس */
section.temple-exit .exit-footer .social-row a.social-pill:hover,
section.temple-exit .exit-footer .social-row a.social-pill:focus {
    color: #f0d27e !important;
    -webkit-text-fill-color: #f0d27e !important;
    text-decoration: none !important;
}

/* الأيقونات */
section.temple-exit .exit-footer .social-row a.social-pill::before {
    color: #f1d477 !important;
    -webkit-text-fill-color: #f1d477 !important;
}
/* ============================================================
   TEMPLE EXIT — PHARAONIC SIGN OFF
============================================================ */

.temple-exit .exit-signoff {
  position: relative;
  z-index: 12;

  margin: 0;
  padding: 35px 20px 75px;

  text-align: center;

  color: #f0d27e;

  font-family:
    "Cinzel",
    "Times New Roman",
    serif;

  font-size: clamp(.9rem, 1.5vw, 1.15rem);

  font-weight: 700;

  letter-spacing: .28em;

  text-transform: uppercase;

  line-height: 1.8;

  text-shadow:
    0 0 6px rgba(240,210,126,.25),
    0 2px 8px rgba(0,0,0,.9);

  /* يمنع النص من الظهور صغير */
  opacity: 1;
}


/* الخط الفرعوني فوق العبارة */
.temple-exit .exit-signoff::before {
  content: "𓂀 𓋹 𓇳";

  display: block;

  margin-bottom: 14px;

  color: #d5ae58;

  font-family: Georgia, serif;

  font-size: 1.35rem;

  letter-spacing: .45em;

  text-shadow:
    0 0 10px rgba(212,175,55,.35);
}


/* زخرفة ذهبية تحت العبارة */
.temple-exit .exit-signoff::after {
  content: "𓆣  ───────  𓆣";

  display: block;

  margin-top: 12px;

  color: #9e793b;

  font-size: .7rem;

  letter-spacing: .18em;

  opacity: .9;
}


/* حركة إضاءة خفيفة */
@keyframes pharaohSignGlow {
  0%, 100% {
    text-shadow:
      0 0 6px rgba(240,210,126,.2),
      0 2px 8px rgba(0,0,0,.9);
  }

  50% {
    text-shadow:
      0 0 16px rgba(240,210,126,.45),
      0 2px 10px rgba(0,0,0,.95);
  }
}

.temple-exit .exit-signoff {
  animation: pharaohSignGlow 4s ease-in-out infinite;
}
/* ============================================================
   TEMPLE EXIT — HORIZONTAL TEMPLE LINTEL
============================================================ */

.temple-exit .exit-gate-wrap {
  position: absolute;
}


/* العارضة الممتدة فوق الباب */
.temple-exit .exit-gate-wrap {
  border-top: 22px solid #5b401f;

  box-shadow:
    0 -8px 0 #9b7139,
    0 -13px 0 rgba(36,23,13,.9),
    0 25px 35px rgba(0,0,0,.45);
}


/* طبقة ذهبية رفيعة على العارضة */
.temple-exit .exit-gate-wrap::before {
  border-top: 5px solid #a47b3d;
}


/* ============================================================
   EXTEND THE TEMPLE BEYOND THE DOOR
============================================================ */

.temple-exit .exit-gate-wrap::after {
  width: 100%;
}


/* ============================================================
   SIDE ENDS — تجعل العارضة تبدو ممتدة فعليًا
============================================================ */

.temple-exit .exit-gate-wrap {
  overflow: visible;
}

.temple-exit .exit-gate-wrap {
  filter:
    drop-shadow(0 35px 50px rgba(0,0,0,.75))
    drop-shadow(0 -3px 0 rgba(180,135,65,.25));
}
/* ============================================================
   TEMPLE EXIT — SIDE HIEROGLYPH WALLS
   Decorative only — does NOT touch the gate
============================================================ */

.temple-exit{
  position:relative;
}


/* ------------------------------------------------------------
   MAIN DECORATION CONTAINER
------------------------------------------------------------ */

.temple-exit .exit-hieroglyphs{
  position:absolute;
  inset:0;
  z-index:2;
  pointer-events:none;
}


/* ------------------------------------------------------------
   LEFT / RIGHT WALL
------------------------------------------------------------ */

.temple-exit .hieroglyph-wall{
  position:absolute;

  top:10%;
  width:clamp(110px, 13vw, 190px);
  height:48%;

  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:space-evenly;

  opacity:.72;

  background:
    linear-gradient(
      90deg,
      transparent,
      rgba(93,64,30,.10) 20%,
      rgba(173,127,57,.12) 50%,
      rgba(93,64,30,.10) 80%,
      transparent
    );

  border-top:
    1px solid rgba(198,153,72,.22);

  border-bottom:
    1px solid rgba(198,153,72,.18);
}


/* LEFT */

.temple-exit .hieroglyph-left{
  left:3%;
}


/* RIGHT */

.temple-exit .hieroglyph-right{
  right:3%;
}


/* ------------------------------------------------------------
   HIEROGLYPHS
------------------------------------------------------------ */

.temple-exit .glyph{
  position:relative;

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

  width:48px;
  height:48px;

  color:#c99b4c;

  font-family:
    "Segoe UI Historic",
    "Noto Sans Egyptian Hieroglyphs",
    serif;

  font-size:clamp(25px,3vw,38px);

  text-shadow:
    0 0 8px rgba(212,175,55,.12),
    0 2px 4px rgba(0,0,0,.8);

  opacity:.68;

  filter:
    drop-shadow(0 2px 3px rgba(0,0,0,.8));

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


/* Eye of Horus */

.temple-exit .glyph-eye{
  color:#dfb65c;

  font-size:clamp(30px,3.4vw,43px);

  opacity:.85;

  text-shadow:
    0 0 12px rgba(226,184,84,.25),
    0 2px 5px #000;
}


/* ------------------------------------------------------------
   DECORATIVE VERTICAL LINE
------------------------------------------------------------ */

.temple-exit .hieroglyph-line{
  position:absolute;

  top:4%;
  bottom:4%;

  width:1px;

  background:
    linear-gradient(
      to bottom,
      transparent,
      rgba(198,153,72,.45) 15%,
      rgba(198,153,72,.18) 50%,
      rgba(198,153,72,.45) 85%,
      transparent
    );

  box-shadow:
    0 0 8px rgba(212,175,55,.08);
}


/* little horizontal cuts */

.temple-exit .hieroglyph-line::before,
.temple-exit .hieroglyph-line::after{
  content:"";

  position:absolute;

  left:50%;

  width:34px;
  height:1px;

  transform:translateX(-50%);

  background:
    rgba(198,153,72,.35);
}

.temple-exit .hieroglyph-line::before{
  top:18%;
}

.temple-exit .hieroglyph-line::after{
  bottom:18%;
}


/* ------------------------------------------------------------
   SUBTLE LIFE
------------------------------------------------------------ */

.temple-exit .hieroglyph-wall .glyph:nth-child(odd){
  animation:
    glyphBreath 5s ease-in-out infinite;
}

.temple-exit .hieroglyph-wall .glyph:nth-child(even){
  animation:
    glyphBreath 6s ease-in-out infinite reverse;
}

@keyframes glyphBreath{

  0%,100%{
    opacity:.55;
    transform:scale(.96);
  }

  50%{
    opacity:.82;
    transform:scale(1);
  }

}


/* ------------------------------------------------------------
   KEEP THEM AWAY FROM THE GATE
------------------------------------------------------------ */

@media (max-width:900px){

  .temple-exit .hieroglyph-left{
    left:1%;
  }

  .temple-exit .hieroglyph-right{
    right:1%;
  }

  .temple-exit .hieroglyph-wall{
    width:95px;
  }

}


@media (max-width:600px){

  .temple-exit .hieroglyph-wall{
    display:none;
  }

}
/* ============================================================
   EXIT SIDE HIEROGLYPHS
   DECORATION ONLY — NEVER INTERACTS WITH PAGE LOGIC
============================================================ */

.temple-exit .exit-hieroglyphs {
  position: absolute;
  inset: 0;
  z-index: 1;

  pointer-events: none;
  user-select: none;

  overflow: hidden;
}


/* LEFT / RIGHT */

.temple-exit .exit-glyph-column {
  position: absolute;

  top: 13%;
  width: 130px;
  height: 45%;

  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-around;

  opacity: .55;

  pointer-events: none;
}


/* LEFT */

.temple-exit .exit-glyph-left {
  left: 4%;
}


/* RIGHT */

.temple-exit .exit-glyph-right {
  right: 4%;
}


/* SYMBOL */

.temple-exit .exit-glyph-column span {
  display: block;

  font-family:
    "Segoe UI Historic",
    "Noto Sans Egyptian Hieroglyphs",
    Georgia,
    serif;

  font-size: 34px;

  color: #b8904b;

  opacity: .7;

  text-shadow:
    0 2px 5px rgba(0,0,0,.9),
    0 0 10px rgba(212,175,55,.12);

  pointer-events: none;
}


/* EYE OF HORUS */

.temple-exit .exit-glyph-column span:first-child,
.temple-exit .exit-glyph-column span:last-child {

  font-size: 40px;

  color: #d0a653;

  opacity: .82;
}


/* SUBTLE BREATH */

.temple-exit .exit-glyph-column span:nth-child(odd) {
  animation: exitGlyphFloat 5s ease-in-out infinite;
}

.temple-exit .exit-glyph-column span:nth-child(even) {
  animation: exitGlyphFloat 6s ease-in-out infinite reverse;
}

@keyframes exitGlyphFloat {

  0%,100% {
    transform: translateY(0);
    opacity: .55;
  }

  50% {
    transform: translateY(-4px);
    opacity: .78;
  }

}


/* MOBILE */

@media (max-width: 800px) {

  .temple-exit .exit-glyph-column {
    width: 80px;
  }

  .temple-exit .exit-glyph-column span {
    font-size: 26px;
  }

  .temple-exit .exit-glyph-column span:first-child,
  .temple-exit .exit-glyph-column span:last-child {
    font-size: 31px;
  }

}

@media (max-width: 560px) {

  .temple-exit .exit-glyph-column {
    display: none;
  }

}
/* ============================================================
   TEMPLE EXIT — SIDE HIEROGLYPHS
   FINAL VERSION — DECORATION ONLY
============================================================ */

.temple-exit .exit-hieroglyphs {
  position: absolute;
  inset: 0;

  z-index: 3;

  pointer-events: none;
  user-select: none;

  overflow: hidden;
}


/* ============================================================
   GLYPH COLUMNS
============================================================ */

.temple-exit .exit-glyph-column {
  position: absolute;

  top: 12%;
  width: 150px;
  height: 48%;

  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;

  pointer-events: none;

  opacity: .82;
}


/* ============================================================
   LEFT COLUMN
============================================================ */

.temple-exit .exit-glyph-left {
  left: 4.5%;
}


/* ============================================================
   RIGHT COLUMN
============================================================ */

.temple-exit .exit-glyph-right {
  right: 4.5%;
}


/* ============================================================
   GLYPH SYMBOL
============================================================ */

.temple-exit .exit-glyph-column span {

  position: relative;

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

  width: 54px;
  height: 54px;

  font-family:
    "Segoe UI Historic",
    "Noto Sans Egyptian Hieroglyphs",
    Georgia,
    serif;

  font-size: 38px;
  line-height: 1;

  color: #c49a50;

  opacity: .72;

  text-shadow:
    0 2px 4px rgba(0,0,0,.95),
    0 0 7px rgba(212,175,55,.12);

  filter:
    drop-shadow(0 2px 2px rgba(0,0,0,.7));

  transform-origin: center;

  transition:
    opacity .35s ease,
    filter .35s ease;
}


/* ============================================================
   EYE OF HORUS — TOP / BOTTOM
============================================================ */

.temple-exit
.exit-glyph-column span:first-child,
.temple-exit
.exit-glyph-column span:last-child {

  font-size: 45px;

  color: #d5ad5b;

  opacity: .9;

  text-shadow:
    0 2px 5px rgba(0,0,0,.95),
    0 0 13px rgba(212,175,55,.2);
}


/* ============================================================
   STONE / GOLD FEEL
============================================================ */

.temple-exit .exit-glyph-column span::after {

  content: "";

  position: absolute;

  inset: 7px;

  border: 1px solid rgba(194,150,72,.08);

  opacity: .5;

  pointer-events: none;
}


/* ============================================================
   VERY SUBTLE LIFE
============================================================ */

.temple-exit
.exit-glyph-column span:nth-child(odd) {

  animation:
    templeGlyphBreath 6s ease-in-out infinite;
}


.temple-exit
.exit-glyph-column span:nth-child(even) {

  animation:
    templeGlyphBreath 7s ease-in-out infinite reverse;
}


@keyframes templeGlyphBreath {

  0%,
  100% {
    transform: translateY(0) scale(.98);
    opacity: .62;
  }

  50% {
    transform: translateY(-3px) scale(1);
    opacity: .82;
  }

}


/* ============================================================
   DECORATIVE VERTICAL LINE BEHIND EACH COLUMN
============================================================ */

.temple-exit .exit-glyph-left::before,
.temple-exit .exit-glyph-right::before {

  content: "";

  position: absolute;

  top: -8%;
  bottom: -8%;

  width: 1px;

  background:
    linear-gradient(
      to bottom,
      transparent,
      rgba(188,143,65,.28) 15%,
      rgba(188,143,65,.12) 50%,
      rgba(188,143,65,.28) 85%,
      transparent
    );

  box-shadow:
    0 0 8px rgba(212,175,55,.06);
}


/* LEFT LINE */

.temple-exit .exit-glyph-left::before {
  right: 8px;
}


/* RIGHT LINE */

.temple-exit .exit-glyph-right::before {
  left: 8px;
}


/* ============================================================
   SMALL GOLD MARKS ON THE LINE
============================================================ */

.temple-exit .exit-glyph-left::after,
.temple-exit .exit-glyph-right::after {

  content: "◆";

  position: absolute;

  top: 50%;

  transform: translateY(-50%);

  color: #9e783c;

  font-size: 9px;

  opacity: .6;
}


/* LEFT */

.temple-exit .exit-glyph-left::after {
  right: 4px;
}


/* RIGHT */

.temple-exit .exit-glyph-right::after {
  left: 4px;
}


/* ============================================================
   TABLET
============================================================ */

@media (max-width: 900px) {

  .temple-exit .exit-glyph-column {

    width: 105px;
    height: 46%;
  }

  .temple-exit .exit-glyph-left {
    left: 2%;
  }

  .temple-exit .exit-glyph-right {
    right: 2%;
  }

  .temple-exit .exit-glyph-column span {

    width: 45px;
    height: 45px;

    font-size: 31px;
  }

  .temple-exit
  .exit-glyph-column span:first-child,
  .temple-exit
  .exit-glyph-column span:last-child {

    font-size: 37px;
  }
}


/* ============================================================
   MOBILE
============================================================ */

@media (max-width: 560px) {

  .temple-exit .exit-glyph-column {

    display: none;
  }

}
/* ============================================================
   ENTRANCE HERO — NEW STRUCTURE
   Works with the updated entrance HTML
============================================================ */

.entrance-hero{
  position:absolute;
  inset:0;
  z-index:20;

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

  width:100%;
  height:100%;

  pointer-events:none;
}


/* ============================================================
   TITLE
============================================================ */

.entrance-hero .hero-title{
  position:absolute;

  top:11%;
  left:50%;
  transform:translateX(-50%);

  width:min(90%, 900px);

  text-align:center;

  pointer-events:none;

  opacity:0;
  animation:entranceTitleRise 1.2s var(--ease-heavy) forwards .25s;
}

.entrance-hero .hero-title h1{
  margin:0;

  font-family:'Cinzel', serif;
  font-size:clamp(2.4rem, 6vw, 5rem);
  font-weight:900;
  letter-spacing:.12em;
  line-height:1;

  background:
    linear-gradient(
      180deg,
      #fff4cf 0%,
      #f4d35e 35%,
      #d4af37 65%,
      #8a6d24 100%
    );

  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;

  filter:
    drop-shadow(0 3px 2px rgba(0,0,0,.75))
    drop-shadow(0 0 25px rgba(212,175,55,.35));
}

.entrance-hero .hero-title small{
  display:block;

  margin-top:12px;

  font-family:'Cormorant Garamond', serif;
  font-size:clamp(.9rem, 1.5vw, 1.2rem);
  font-style:italic;
  font-weight:500;

  letter-spacing:.28em;
  text-transform:uppercase;

  color:var(--sandstone-lt);

  text-shadow:
    0 2px 5px rgba(0,0,0,.8),
    0 0 12px rgba(212,175,55,.25);
}

@keyframes entranceTitleRise{
  from{
    opacity:0;
    transform:translate(-50%, 25px) scale(.96);
  }

  to{
    opacity:1;
    transform:translate(-50%, 0) scale(1);
  }
}


/* ============================================================
   SEARCH AREA
============================================================ */

.entrance-hero .hero-search{
  position:absolute;

  top:30%;
  left:50%;

  transform:translateX(-50%);

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

  width:min(90%, 420px);

  pointer-events:auto;
}


/* Keep the Ankh centered */
.entrance-hero .hero-search .ankh{
  margin:0;
}


/* ============================================================
   QUICK ACTIONS
============================================================ */

.entrance-hero .temple-actions{
  position:absolute;

  left:50%;
  bottom:8%;

  transform:translateX(-50%);

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

  gap:clamp(28px, 4vw, 70px);

  width:min(92%, 1100px);

  pointer-events:auto;

  z-index:25;
}


/* ============================================================
   TEMPLE TABLETS
============================================================ */

.entrance-hero .temple-tablet{
  position:relative;

  width:clamp(190px, 22vw, 270px);
  min-height:145px;

  padding:22px 18px 18px;

  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:flex-end;

  border:1px solid rgba(212,175,55,.45);
  border-radius:8px;

  background:
    linear-gradient(
      145deg,
      rgba(62,47,31,.96),
      rgba(28,20,13,.98)
    );

  color:var(--papyrus);

  cursor:pointer;

  overflow:hidden;

  box-shadow:
    inset 0 0 25px rgba(0,0,0,.7),
    0 12px 30px rgba(0,0,0,.55),
    0 0 0 1px rgba(255,220,150,.06);

  transition:
    transform .45s var(--ease-heavy),
    border-color .45s ease,
    box-shadow .45s ease,
    background .45s ease;
}


/* Egyptian decorative frame */
.entrance-hero .temple-tablet::before{
  content:"";

  position:absolute;
  inset:7px;

  border:1px solid rgba(212,175,55,.25);
  border-radius:5px;

  pointer-events:none;
}


/* Top ornament */
.entrance-hero .temple-tablet::after{
  content:"𓂀";

  position:absolute;

  top:7px;
  left:50%;

  transform:translateX(-50%);

  font-family:serif;
  font-size:18px;

  color:var(--gold-bright);

  text-shadow:
    0 0 8px rgba(244,211,94,.65);

  opacity:.8;
}


/* ============================================================
   TABLET ICON
============================================================ */

.entrance-hero .temple-tablet-icon{
  position:absolute;

  top:18px;
  left:50%;

  width:48px;
  height:72px;

  transform:translateX(-50%);

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

  opacity:.9;

  pointer-events:none;
}

.entrance-hero .tablet-icon-svg{
  width:100%;
  height:100%;

  overflow:visible;

  filter:
    drop-shadow(0 0 7px rgba(212,175,55,.22));
}


/* ============================================================
   TABLET TEXT
============================================================ */

.entrance-hero .temple-tablet-title{
  position:relative;
  z-index:2;

  margin-top:60px;

  font-family:'Cinzel', serif;

  font-size:clamp(.65rem, .8vw, .8rem);
  font-weight:700;

  letter-spacing:.12em;

  color:#f4d35e;

  text-align:center;

  text-shadow:
    0 2px 4px rgba(0,0,0,.8);
}

.entrance-hero .temple-tablet-desc{
  position:relative;
  z-index:2;

  margin-top:6px;

  max-width:210px;

  font-family:'Cormorant Garamond', serif;

  font-size:.82rem;

  line-height:1.25;

  color:rgba(240,228,200,.72);

  text-align:center;
}


/* ============================================================
   TABLET GLOW
============================================================ */

.entrance-hero .temple-tablet-glow{
  position:absolute;
  inset:-30%;

  background:
    radial-gradient(
      circle,
      rgba(244,211,94,.13) 0%,
      rgba(244,211,94,.05) 30%,
      transparent 68%
    );

  opacity:.5;

  transition:
    opacity .45s ease,
    transform .45s ease;

  pointer-events:none;
}


/* ============================================================
   TABLET SWEEP
============================================================ */

.entrance-hero .temple-tablet-sweep{
  position:absolute;

  top:-20%;
  left:-80%;

  width:45%;
  height:140%;

  background:
    linear-gradient(
      90deg,
      transparent,
      rgba(255,240,190,.25),
      transparent
    );

  transform:skewX(-18deg);

  transition:left .8s ease;

  pointer-events:none;
}


/* ============================================================
   HOVER
============================================================ */

.entrance-hero .temple-tablet:hover{
  transform:translateY(-9px) scale(1.025);

  border-color:rgba(244,211,94,.85);

  background:
    linear-gradient(
      145deg,
      rgba(78,59,36,.98),
      rgba(31,22,14,.99)
    );

  box-shadow:
    inset 0 0 30px rgba(0,0,0,.65),
    0 18px 40px rgba(0,0,0,.65),
    0 0 25px rgba(212,175,55,.18);
}

.entrance-hero .temple-tablet:hover .temple-tablet-glow{
  opacity:1;
  transform:scale(1.08);
}

.entrance-hero .temple-tablet:hover .temple-tablet-sweep{
  left:140%;
}


/* ============================================================
   ACTIVE / CLICK
============================================================ */

.entrance-hero .temple-tablet:active{
  transform:translateY(-3px) scale(.99);
}


/* ============================================================
   MOBILE
============================================================ */

@media (max-width:720px){

  .entrance-hero .hero-title{
    top:8%;
  }

  .entrance-hero .hero-title h1{
    font-size:clamp(2rem, 10vw, 3.2rem);
  }

  .entrance-hero .hero-title small{
    font-size:.72rem;
    letter-spacing:.16em;
  }

  .entrance-hero .hero-search{
    top:27%;
  }

  .entrance-hero .temple-actions{
    bottom:5%;

    gap:10px;

    width:96%;
  }

  .entrance-hero .temple-tablet{
    width:31%;
    min-height:125px;

    padding:
      18px
      8px
      12px;
  }

  .entrance-hero .temple-tablet-icon{
    width:34px;
    height:52px;

    top:14px;
  }

  .entrance-hero .temple-tablet-title{
    margin-top:42px;

    font-size:.48rem;
    letter-spacing:.06em;
  }

  .entrance-hero .temple-tablet-desc{
    font-size:.62rem;
  }

}


/* ============================================================
   VERY SMALL SCREENS
============================================================ */

@media (max-width:450px){

  .entrance-hero .temple-actions{
    gap:6px;
  }

  .entrance-hero .temple-tablet{
    min-height:112px;
  }

  .entrance-hero .temple-tablet-desc{
    display:none;
  }

  .entrance-hero .temple-tablet-title{
    margin-top:45px;
    font-size:.45rem;
  }

}
/* ============================================================
   REMOVE ENTRANCE OBELISKS & FOREGROUND COLUMNS
============================================================ */

/* Remove the two obelisks */
.entrance .obelisk,
.entrance .obelisk-left,
.entrance .obelisk-right {
  display: none !important;
}

/* Remove the two massive foreground columns */
.entrance .column,
.entrance .column-left,
.entrance .column-right {
  display: none !important;
}
/* ============================================================
   REMOVE SIDE WALLS / PYLONS
============================================================ */

.entrance .pylon,
.entrance .pylon-left,
.entrance .pylon-right {
  display: none !important;
}
/* ============================================================
   NIGHT TEMPLE — MOONLIGHT BACKGROUND
============================================================ */

/* Deep night sky */
.entrance .sky {
  background:
    radial-gradient(
      circle at 50% 22%,
      rgba(70, 91, 135, .45) 0%,
      rgba(28, 39, 68, .55) 28%,
      rgba(10, 17, 32, .88) 65%,
      #050912 100%
    ) !important;
}


/* Remove the old sun */
.entrance .sun-disc {
  background: transparent !important;
  box-shadow: none !important;
  opacity: 0 !important;
}


/* ============================================================
   MOON
============================================================ */

.entrance::before {
  content: "";

  position: absolute;

  top: 8%;
  left: 50%;

  width: clamp(70px, 8vw, 115px);
  height: clamp(70px, 8vw, 115px);

  transform: translateX(-50%);

  border-radius: 50%;

  background:
    radial-gradient(
      circle at 35% 30%,
      #fffde8 0%,
      #f5edc4 45%,
      #d9cfa4 75%,
      #aaa17c 100%
    );

  box-shadow:
    0 0 20px rgba(255, 248, 210, .7),
    0 0 55px rgba(210, 225, 255, .35),
    0 0 100px rgba(150, 180, 235, .18);

  z-index: 2;

  pointer-events: none;
}


/* Moon craters */
.entrance::after {
  content: "";

  position: absolute;

  top: calc(8% + 18px);
  left: calc(50% - 32px);

  width: clamp(70px, 8vw, 115px);
  height: clamp(70px, 8vw, 115px);

  transform: translateX(-50%);

  border-radius: 50%;

  background:
    radial-gradient(circle at 32% 35%,
      rgba(120,110,85,.18) 0 5%,
      transparent 6%),
    radial-gradient(circle at 65% 28%,
      rgba(120,110,85,.16) 0 7%,
      transparent 8%),
    radial-gradient(circle at 55% 65%,
      rgba(120,110,85,.14) 0 9%,
      transparent 10%),
    radial-gradient(circle at 25% 70%,
      rgba(120,110,85,.12) 0 5%,
      transparent 6%);

  opacity: .75;

  z-index: 3;

  pointer-events: none;
}


/* ============================================================
   NIGHT GOD RAYS
============================================================ */

.entrance .godrays {
  background:
    conic-gradient(
      from 270deg at 50% 20%,
      transparent 0deg,
      rgba(150, 175, 220, .06) 18deg,
      transparent 34deg,
      rgba(150, 175, 220, .045) 52deg,
      transparent 70deg,
      rgba(150, 175, 220, .055) 88deg,
      transparent 108deg,
      rgba(150, 175, 220, .04) 130deg,
      transparent 150deg
    ) !important;

  opacity: .8 !important;
}


/* ============================================================
   NIGHT HORIZON
============================================================ */

.entrance .skyline-silhouette {
  filter:
    brightness(.35)
    saturate(.65)
    contrast(1.15);

  opacity: .85;
}


/* ============================================================
   DARKER TEMPLE STRUCTURES
============================================================ */

.entrance .gate-wrap,
.entrance .gate-architrave {
  filter:
    brightness(.72)
    saturate(.75);
}


/* ============================================================
   BLUE MOONLIGHT OVER THE TEMPLE
============================================================ */

.entrance {
  background:
    linear-gradient(
      180deg,
      #050a16 0%,
      #0a1222 35%,
      #101827 65%,
      #080c14 100%
    ) !important;
}


/* ============================================================
   STARS
============================================================ */

.entrance {
  overflow: hidden;
}

.entrance .sky::before {
  content: "";

  position: absolute;
  inset: 0;

  background-image:
    radial-gradient(circle, rgba(255,255,235,.9) 0 1px, transparent 1.5px),
    radial-gradient(circle, rgba(210,225,255,.7) 0 1px, transparent 1.5px),
    radial-gradient(circle, rgba(255,255,255,.6) 0 1px, transparent 1.5px);

  background-size:
    140px 120px,
    210px 170px,
    280px 220px;

  background-position:
    20px 15px,
    80px 40px,
    130px 90px;

  opacity: .6;

  pointer-events: none;
}


/* ============================================================
   TORCHES STAND OUT AT NIGHT
============================================================ */

.entrance .torch .glow {
  opacity: 1;
  filter: blur(2px);
}

.entrance .torch .flame {
  filter:
    brightness(1.25)
    drop-shadow(0 0 8px rgba(255,190,70,.8));
}


/* ============================================================
   SOFT BLUE MOONLIGHT
============================================================ */

.entrance .fog {
  background:
    linear-gradient(
      180deg,
      rgba(120,145,190,.04),
      rgba(20,30,50,.15)
    ) !important;
}
/* ============================================================
   🌙 NIGHT TEMPLE — FINAL ENTRANCE BACKGROUND
   ============================================================ */

/* Night sky */
.entrance .sky {
  background:
    radial-gradient(
      ellipse 80% 55% at 50% 20%,
      #18294a 0%,
      #101c35 38%,
      #091222 68%,
      #040811 100%
    ) !important;
}

/* Remove the old daytime sun */
.entrance .sun-disc {
  display: none !important;
}

/* Remove daytime god rays */
.entrance .godrays {
  display: none !important;
}


/* ============================================================
   🌙 MOON — LEFT SIDE
   ============================================================ */

.entrance::before {
  content: "";
  position: absolute;

  /* LEFT SIDE */
  left: 9%;
  top: 11%;

  width: clamp(75px, 9vw, 125px);
  height: clamp(75px, 9vw, 125px);

  border-radius: 50%;

  background:
    radial-gradient(
      circle at 38% 35%,
      #fffef0 0%,
      #f8f1c7 45%,
      #e7d99b 72%,
      #c9b875 100%
    );

  box-shadow:
    0 0 18px rgba(255, 247, 205, .55),
    0 0 45px rgba(255, 238, 170, .28),
    0 0 90px rgba(255, 225, 130, .12);

  z-index: 2;
  pointer-events: none;
}


/* ============================================================
   🌑 SMALL MOON CRATERS
   ============================================================ */

.entrance::after {
  content: "";

  position: absolute;
  left: calc(9% + 20px);
  top: calc(11% + 23px);

  width: clamp(75px, 9vw, 125px);
  height: clamp(75px, 9vw, 125px);

  border-radius: 50%;

  background:
    radial-gradient(circle at 30% 38%,
      rgba(170,160,120,.18) 0 5%,
      transparent 6%),

    radial-gradient(circle at 63% 27%,
      rgba(170,160,120,.14) 0 7%,
      transparent 8%),

    radial-gradient(circle at 58% 67%,
      rgba(170,160,120,.16) 0 5%,
      transparent 6%),

    radial-gradient(circle at 25% 70%,
      rgba(170,160,120,.12) 0 4%,
      transparent 5%);

  z-index: 3;
  pointer-events: none;
}


/* ============================================================
   ✨ NIGHT ATMOSPHERE
   ============================================================ */

.entrance {
  background: #040811;
}

/* Darker fog for night */
.entrance .fog {
  background:
    radial-gradient(
      ellipse at center,
      rgba(120, 150, 190, .08) 0%,
      rgba(70, 100, 140, .035) 40%,
      transparent 72%
    ) !important;
}


/* ============================================================
   ⭐ STARS
   ============================================================ */

.entrance .skyline-silhouette::before {
  content: "";

  position: absolute;
  inset: -120vh -20vw;

  background-image:
    radial-gradient(circle, rgba(255,255,255,.8) 0 1px, transparent 1.5px),
    radial-gradient(circle, rgba(255,255,255,.5) 0 1px, transparent 1.5px),
    radial-gradient(circle, rgba(255,235,170,.7) 0 1px, transparent 1.5px);

  background-size:
    170px 190px,
    230px 250px,
    310px 280px;

  background-position:
    20px 40px,
    100px 20px,
    40px 130px;

  opacity: .38;

  pointer-events: none;
  z-index: -1;
}


/* ============================================================
   🏛️ MAKE TEMPLE ELEMENTS FIT NIGHT
   ============================================================ */

.entrance .pylon,
.entrance .gate-architrave,
.entrance .gate-wrap,
.entrance .stairs,
.entrance .statue {
  filter:
    brightness(.68)
    saturate(.82)
    drop-shadow(0 10px 20px rgba(0,0,0,.65));
}


/* Golden details stay visible at night */
.entrance .
/* ============================================================
   🏺 PHARAONIC ENTRANCE TITLE
   ============================================================ */

.hero-title {
  position: absolute;
  left: 50%;
  top: 8%;
  transform: translateX(-50%);

  width: max-content;
  text-align: center;

  z-index: 20;
}


/* GU LIBRARY */
.hero-title h1 {
  margin: 0;

  font-family: "Cinzel", serif;
  font-weight: 900;
  letter-spacing: .18em;

  font-size: clamp(32px, 4vw, 62px);

  color: #e8c978;

  text-shadow:
    0 2px 0 #6d4c18,
    0 0 12px rgba(232, 201, 120, .35),
    0 8px 25px rgba(0, 0, 0, .7);
}


/* ============================================================
   🏺 PHARAONIC SUBTITLE
   ============================================================ */

.hero-title small {
  display: block;

  margin-top: 12px;

  font-family: "Cinzel", serif;
  font-weight: 700;

  font-size: clamp(13px, 1.25vw, 20px);

  letter-spacing: .24em;
  text-transform: uppercase;

  color: #d7b85b;

  text-shadow:
    0 2px 3px rgba(0,0,0,.9),
    0 0 10px rgba(215,184,91,.25);

  position: relative;
}


/* Egyptian decorative lines */
.hero-title small::before,
.hero-title small::after {
  content: "";

  position: absolute;

  top: 50%;

  width: 55px;
  height: 1px;

  background:
    linear-gradient(
      90deg,
      transparent,
      #c9a94e,
      transparent
    );

  opacity: .8;
}

.hero-title small::before {
  right: calc(100% + 18px);
}

.hero-title small::after {
  left: calc(100% + 18px);
}
/* ============================================================
   PHARAONIC GU LIBRARY — ABOVE THE TEMPLE GATE
============================================================ */

.hero-title {
  position: absolute;

  left: 50%;
  top: 10%;

  transform: translateX(-50%);

  width: max-content;

  text-align: center;

  z-index: 30;

  pointer-events: none;
}

.hero-title h1 {
  margin: 0;

  font-family: "Cinzel", serif;
  font-weight: 900;

  font-size: clamp(34px, 4vw, 64px);

  letter-spacing: .12em;

  color: #e8c875;

  /* فرعوني / ذهبي */
  text-shadow:
    0 2px 0 #6b4812,
    0 4px 0 #3b280c,
    0 0 12px rgba(232, 200, 117, .45),
    0 0 30px rgba(190, 145, 45, .22);
}


/* زخرفة فرعونية فوق وتحت الاسم */

.hero-title h1::before {
  content: "𓂀";

  display: block;

  margin-bottom: 4px;

  font-size: .38em;

  color: #d4af37;

  text-shadow:
    0 0 10px rgba(212,175,55,.6);
}


.hero-title h1::after {
  content: "𓆣 𓋹 𓆣";

  display: block;

  margin-top: 5px;

  font-size: .25em;

  letter-spacing: .45em;

  color: #b99135;

  opacity: .9;
}
/* ============================================================
   ENTRANCE HERO
   الحاوية لا تتحكم في أماكن العناصر الداخلية
============================================================ */

.entrance-hero {
  position: absolute;
  inset: 0;

  width: 100%;
  height: 100%;

  pointer-events: none;

  z-index: 40;
}


/* ============================================================
   GU LIBRARY TITLE
   مستقل تماماً عن Search والـ Services
============================================================ */

.hero-title {
  position: absolute;

  left: 50%;
  top: 13%;

  transform: translateX(-50%);

  width: max-content;

  text-align: center;

  z-index: 60;

  pointer-events: none;
}

.hero-title h1 {
  margin: 0;

  font-family: "Cinzel", serif;

  font-size: clamp(32px, 3.5vw, 58px);
  font-weight: 900;

  letter-spacing: .16em;

  color: #e7c56d;

  text-shadow:
    0 2px 0 #6d4b16,
    0 4px 10px rgba(0,0,0,.85),
    0 0 20px rgba(212,175,55,.35);
}


/* ============================================================
   HIEROGLYPHIC GU LIBRARY
============================================================ */

.pharaoh-name {
  margin-top: 6px;

  font-size: clamp(20px, 2vw, 34px);

  line-height: 1;

  color: #d4af37;

  letter-spacing: .08em;

  text-shadow:
    0 2px 0 #62430f,
    0 0 10px rgba(212,175,55,.45);
}

.pharaoh-name::after {
  content: "𓋹 𓂀 𓋹";

  display: block;

  margin-top: 7px;

  font-size: .5em;

  color: #a77c22;

  letter-spacing: .3em;
}


/* ============================================================
   SEARCH
   مستقل — لا يتأثر بالعنوان
============================================================ */

.hero-search {
  position: absolute;

  left: 50%;

  /* خليه مكانه الخاص */
  top: 32%;

  transform: translateX(-50%);

  z-index: 55;

  pointer-events: auto;
}


/* ============================================================
   THREE SERVICES
   مستقل — لا يتأثر بالعنوان ولا بالـSearch
============================================================ */

.hero-services {
  position: absolute;

  left: 50%;

  /* مكان منفصل تماماً */
  top: 48%;

  transform: translateX(-50%);

  width: min(900px, 80vw);

  display: flex;

  justify-content: center;

  align-items: stretch;

  gap: 35px;

  z-index: 50;

  pointer-events: auto;
}
/* =========================================================
   GU LIBRARY — FINAL PHARAONIC TITLE
   ========================================================= */

.temple-library-title {
    position: absolute !important;

    /* نزلنا العنوان شوية */
    top: 6% !important;

    left: 50% !important;
    transform: translateX(-50%) !important;

    z-index: 50 !important;

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

    text-align: center;
    white-space: nowrap;

    pointer-events: none;
}


/* =========================================================
   GU LIBRARY
   ========================================================= */

.library-title-main {
    font-family:
        "Cinzel",
        "Trajan Pro",
        Georgia,
        "Times New Roman",
        serif !important;

    /* أصغر شوية من الموجود في الصورة */
    font-size: clamp(38px, 4vw, 54px) !important;

    font-weight: 600 !important;

    /* مسافة فخمة بين الحروف */
    letter-spacing: 0.13em !important;

    line-height: 1 !important;

    color: #d9b45d !important;

    /* شكل نقش ذهبي على حجر */
    text-shadow:
        0 1px 0 #f4d98c,
        0 2px 0 #8a6427,
        0 4px 5px rgba(0, 0, 0, 0.65),
        0 0 14px rgba(217, 180, 93, 0.22) !important;

    /* انحناءة بسيطة جدًا */
    transform:
        perspective(700px)
        rotateX(7deg) !important;
}


/* =========================================================
   HIEROGLYPHIC NAME
   ========================================================= */

.library-title-hieroglyphs {
    margin-top: 9px !important;

    font-family:
        "Noto Sans Egyptian Hieroglyphs",
        "Segoe UI Historic",
        serif !important;

    font-size: clamp(24px, 2.3vw, 32px) !important;

    letter-spacing: 0.06em !important;

    line-height: 1 !important;

    color: #cba653 !important;

    text-shadow:
        0 1px 0 #efd17d,
        0 3px 5px rgba(0, 0, 0, 0.65) !important;

    opacity: 0.96 !important;

    transform:
        perspective(700px)
        rotateX(4deg) !important;
}
/* =========================================================
   GU LIBRARY — PHARAONIC ARCH INSCRIPTION
   ========================================================= */

.temple-library-title {
    position: absolute !important;

    top: 7% !important;
    left: 50% !important;
    transform: translateX(-50%) !important;

    z-index: 50 !important;

    width: 520px;
    max-width: 72vw;

    text-align: center;

    pointer-events: none;
}


/* =========================================================
   CURVED GU LIBRARY
   ========================================================= */

.gu-library-logo {
    width: 100%;
    height: auto;

    display: block;

    overflow: visible;
}


/* الكلمة نفسها */

.gu-library-text {
    font-family:
        "Cinzel Decorative",
        "Cinzel",
        "Trajan Pro",
        Georgia,
        "Times New Roman",
        serif;

    font-size: 88px;

    font-weight: 700;

    letter-spacing: 8px;

    fill: #d9b45c;

    stroke: #8b6528;
    stroke-width: 1.5px;

    paint-order: stroke fill;

    filter:
        drop-shadow(0 4px 4px rgba(0,0,0,.65))
        drop-shadow(0 0 10px rgba(220,180,80,.20));
}


/* =========================================================
   HIEROGLYPHIC LINE
   ========================================================= */

.library-title-hieroglyphs {
    margin-top: -3px !important;

    font-family:
        "Noto Sans Egyptian Hieroglyphs",
        "Segoe UI Historic",
        serif !important;

    font-size: 31px !important;

    letter-spacing: 5px !important;

    line-height: 1 !important;

    color: #cda653 !important;

    text-shadow:
        0 2px 3px rgba(0,0,0,.7),
        0 0 8px rgba(220,180,80,.18) !important;
}


/* =========================================================
   RESPONSIVE
   ========================================================= */

@media (max-width: 700px) {

    .temple-library-title {
        top: 6% !important;
        width: 440px;
        max-width: 90vw;
    }

    .gu-library-text {
        font-size: 92px;
        letter-spacing: 6px;
    }

    .library-title-hieroglyphs {
        font-size: 25px !important;
        letter-spacing: 3px !important;
    }
}
/* ============================================================
   GU LIBRARY
   ENTRANCE GATE — EXIT GATE VISUAL STYLE
   CSS ONLY — DO NOT CHANGE HTML / JS
   ============================================================ */

/* ---------- Main Gate Frame ---------- */

#gateWrap {
    position: absolute !important;
    left: 50% !important;
    bottom: 0 !important;

    width: min(52vw, 760px) !important;
    height: 68vh !important;

    transform: translateX(-50%) !important;

    z-index: 20 !important;

    overflow: visible !important;

    background: transparent !important;

    filter:
        drop-shadow(0 25px 35px rgba(0, 0, 0, .65));
}


/* ---------- Top Temple Lintel ---------- */

#gateWrap::before {
    content: "";

    position: absolute;

    left: -8%;
    right: -8%;
    top: -24px;

    height: 24px;

    background:
        linear-gradient(
            to bottom,
            #9a7137 0%,
            #704d25 35%,
            #4c3218 70%,
            #2d1d0d 100%
        );

    border-top:
        2px solid rgba(220, 177, 76, .45);

    border-bottom:
        2px solid rgba(20, 12, 5, .9);

    box-shadow:
        0 -4px 12px rgba(212, 175, 55, .12),
        0 8px 18px rgba(0, 0, 0, .5);

    z-index: 5;

    pointer-events: none;
}


/* Golden upper line */

#gateWrap::after {
    content: "";

    position: absolute;

    left: -7%;
    right: -7%;

    top: -29px;

    height: 4px;

    background: #b58a43;

    box-shadow:
        0 0 8px rgba(212, 175, 55, .18);

    z-index: 6;

    pointer-events: none;
}


/* ============================================================
   GATE GLOW
   ============================================================ */

#gateWrap .gate-glow {

    position: absolute !important;

    left: 50% !important;
    top: 50% !important;

    width: 90% !important;
    height: 100% !important;

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

    background:
        radial-gradient(
            ellipse at center,
            rgba(212, 175, 55, .20) 0%,
            rgba(212, 175, 55, .09) 32%,
            rgba(212, 175, 55, .03) 55%,
            transparent 75%
        ) !important;

    filter: blur(12px);

    z-index: -1 !important;

    pointer-events: none;

    animation: entranceGateGlow 4s ease-in-out infinite;
}


@keyframes entranceGateGlow {

    0%,
    100% {
        opacity: .55;
        transform: translate(-50%, -50%) scale(.97);
    }

    50% {
        opacity: .95;
        transform: translate(-50%, -50%) scale(1.03);
    }
}


/* ============================================================
   LEFT / RIGHT DOORS
   ============================================================ */

#gateWrap .door {

    position: absolute !important;

    top: 0 !important;
    bottom: 0 !important;

    width: 50% !important;
    height: 100% !important;

    margin: 0 !important;

    box-sizing: border-box !important;

    background:
        linear-gradient(
            90deg,
            #24170b 0%,
            #463019 15%,
            #76572d 36%,
            #9a7339 50%,
            #76572d 64%,
            #463019 85%,
            #24170b 100%
        ) !important;

    border:
        3px solid #6c4c25 !important;

    box-shadow:
        inset 0 0 30px rgba(0, 0, 0, .75),
        inset 0 0 10px rgba(212, 175, 55, .18),
        0 8px 20px rgba(0, 0, 0, .35);

    overflow: hidden;

    transition:
        transform 1.35s cubic-bezier(.77, 0, .18, 1) !important;
}


/* ---------- Left ---------- */

#gateWrap .door-left {

    left: 0 !important;
    right: auto !important;

    transform-origin: left center !important;
}


/* ---------- Right ---------- */

#gateWrap .door-right {

    right: 0 !important;
    left: auto !important;

    transform-origin: right center !important;
}


/* ============================================================
   INNER RELIEF
   ============================================================ */

#gateWrap .door::before {

    content: "";

    position: absolute;

    inset: 5% 12%;

    border-left:
        2px solid rgba(220, 180, 91, .28);

    border-right:
        2px solid rgba(220, 180, 91, .28);

    background:
        repeating-linear-gradient(
            180deg,
            transparent 0,
            transparent 43px,
            rgba(27, 18, 9, .25) 44px,
            rgba(27, 18, 9, .25) 47px
        );

    box-shadow:
        inset 0 0 20px rgba(0, 0, 0, .28);

    pointer-events: none;
}


/* ============================================================
   HIEROGLYPHIC RELIEF
   ============================================================ */

#gateWrap .door::after {

    content: "𓂀   𓋹   𓆣   𓇳   𓅃";

    position: absolute;

    left: 50%;
    top: 50%;

    transform:
        translate(-50%, -50%)
        rotate(90deg);

    white-space: nowrap;

    font-family:
        "Segoe UI Historic",
        "Noto Sans Egyptian Hieroglyphs",
        serif;

    font-size: clamp(18px, 2vw, 30px);

    letter-spacing: 10px;

    color: rgba(37, 25, 12, .55);

    text-shadow:
        0 1px 0 rgba(255, 220, 140, .13);

    pointer-events: none;
}


/* ============================================================
   IMPORTANT:
   KEEP THE EXISTING OPENING LOGIC
   ============================================================ */

/*
   لو الـJS عندك بيضيف class="open" أو "opening"
   فالقواعد التالية تخلي التصميم الجديد يفتح
   بنفس البوابة الموجودة أصلًا.
*/

#gateWrap.open .door-left,
#gateWrap.opening .door-left {
    transform:
        perspective(1200px)
        rotateY(-105deg) !important;
}

#gateWrap.open .door-right,
#gateWrap.opening .door-right {
    transform:
        perspective(1200px)
        rotateY(105deg) !important;
}


/* ============================================================
   RESPONSIVE
   ============================================================ */

@media (max-width: 900px) {

    #gateWrap {
        width: 65vw !important;
        height: 60vh !important;
    }

}


@media (max-width: 600px) {

    #gateWrap {
        width: 78vw !important;
        height: 52vh !important;
    }

    #gateWrap .door::after {
        font-size: 16px;
        letter-spacing: 6px;
    }

}
/* ============================================================
   ENTRANCE GATE — SMALLER GATE / LARGER TEMPLE VIEW
   ============================================================ */

#gateWrap {
    width: min(38vw, 570px) !important;
    height: 56vh !important;

    bottom: 0 !important;

    transform: translateX(-50%) !important;
}


/* خلي الإطار العلوي متناسب مع الحجم الجديد */

#gateWrap::before {
    left: -10%;
    right: -10%;
}


/* الـ glow مايكبرش مع الباب زيادة عن اللازم */

#gateWrap .gate-glow {
    width: 105% !important;
    height: 110% !important;
}


/* ------------------------------------------------------------
   Desktop
   ------------------------------------------------------------ */

@media (min-width: 1200px) {

    #gateWrap {
        width: 34vw !important;
        max-width: 540px !important;
        height: 55vh !important;
    }

}


/* ------------------------------------------------------------
   Laptop
   ------------------------------------------------------------ */

@media (min-width: 769px) and (max-width: 1199px) {

    #gateWrap {
        width: 40vw !important;
        height: 55vh !important;
    }

}


/* ------------------------------------------------------------
   Tablet
   ------------------------------------------------------------ */

@media (max-width: 768px) {

    #gateWrap {
        width: 55vw !important;
        height: 50vh !important;
    }

}


/* ------------------------------------------------------------
   Mobile
   ------------------------------------------------------------ */

@media (max-width: 600px) {

    #gateWrap {
        width: 68vw !important;
        height: 46vh !important;
    }

}
/* إزالة العارضة والزخارف الموجودة فوق بوابة المعبد */
.gate-architrave,
.architrave-sundisc,
.architrave-band {
    display: none !important;
}
/* =========================================================
   REMOVE SIDE DECORATIONS ONLY
   الخدمات لن تتأثر
   ========================================================= */

/* التماثيل */
.entrance .statue-left,
.entrance .statue-right {
    display: none !important;
}

/* مشاعل المدخل */
.entrance .torch-entrance-left,
.entrance .torch-entrance-right {
    display: none !important;
}

/* بقايا/أنقاض الجانبين */
.entrance .ruin-fragment-left,
.entrance .ruin-fragment-right {
    display: none !important;
}

/* الأعمدة الجانبية الأمامية */
.entrance .column-left,
.entrance .column-right {
    display: none !important;
}

/* المسلات الجانبية */
.entrance .obelisk-left,
.entrance .obelisk-right {
    display: none !important;
}
/* ============================================================
   CLOSED SEARCH BOX
============================================================ */

.search-trigger{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:10px;

  width:220px;
  height:52px;

  border:1px solid rgba(212,175,55,.55);
  border-radius:6px;

  background:
    linear-gradient(
      180deg,
      rgba(61,47,34,.95),
      rgba(20,15,10,.98)
    );

  color:var(--sandstone-lt);

  font-family:'Cinzel', serif;
  font-size:.75rem;
  letter-spacing:.14em;
  text-transform:uppercase;

  cursor:pointer;

  box-shadow:
    inset 0 0 12px rgba(0,0,0,.6),
    0 4px 18px rgba(0,0,0,.35);

  transition:
    width .55s var(--ease-heavy),
    height .55s var(--ease-heavy),
    opacity .4s,
    transform .4s,
    box-shadow .4s;
}

.search-trigger:hover{
  border-color:var(--gold-bright);
  box-shadow:
    0 0 24px rgba(244,211,94,.25),
    inset 0 0 15px rgba(0,0,0,.7);

  transform:translateY(-2px);
}

.search-icon{
  font-size:1.5rem;
  line-height:1;
  color:var(--gold-bright);
}


/* ============================================================
   OPEN SEARCH
============================================================ */

.ankh-search{
  display:none;
  flex-direction:column;
  align-items:center;
}


/* عندما يفتح البحث */

.ankh.search-open .search-trigger{
  display:none;
}

.ankh.search-open .ankh-search{
  display:flex;
  animation:searchReveal .65s var(--ease-heavy) forwards;
}

@keyframes searchReveal{
  from{
    opacity:0;
    transform:scale(.75);
  }

  to{
    opacity:1;
    transform:scale(1);
  }
}


/* ============================================================
   SEARCH INPUT
============================================================ */

.ankh-input{
  cursor:text;
}

.ankh.search-open .ankh-input{
  cursor:text;
}


/* إخفاء burst القديم */

.ankh-burst{
  display:none !important;
}
/* ==========================================
   SEARCH BOX / ANKH TOGGLE
========================================== */

.search-trigger {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;

  width: 275px;
  height: 58px;

  margin: 0 auto;

  border: 1px solid rgba(212,175,55,.65);
  border-radius: 8px;

  background: linear-gradient(
    145deg,
    #3a2a1b,
    #15100c
  );

  color: #e8d3a0;

  font-family: 'Cinzel', serif;
  font-size: 15px;
  letter-spacing: 2px;

  cursor: pointer;

  box-shadow:
    0 8px 25px rgba(0,0,0,.45),
    inset 0 0 20px rgba(0,0,0,.5);

  transition: .35s ease;
}

.search-trigger:hover {
  border-color: #f4d35e;
  box-shadow:
    0 0 25px rgba(244,211,94,.25),
    inset 0 0 20px rgba(0,0,0,.55);

  transform: translateY(-2px);
}

.search-icon {
  font-size: 25px;
  color: #f4d35e;
}


/* مفتاح الحياة مخفي في البداية */

.ankh-open {
  display: none;
}


/* لما نفتح البحث */

.ankh.search-open .search-trigger {
  display: none;
}

.ankh.search-open .ankh-open {
  display: flex;
  flex-direction: column;
  align-items: center;
  animation: ankhOpen .5s ease forwards;
}

@keyframes ankhOpen {
  from {
    opacity: 0;
    transform: scale(.7);
  }

  to {
    opacity: 1;
    transform: scale(1);
  }
}
/* =========================================================
   QUICK ACTIONS — EMPTY SPACE ON THE RIGHT
========================================================= */

.entrance .temple-actions {
  position: absolute !important;

  /* المساحة الفاضية على اليمين */
  right: 4vw !important;

  /* منتصف الشاشة رأسيًا */
  top: 50% !important;

  left: auto !important;
  bottom: auto !important;

  transform: translateY(-50%) !important;

  width: 250px !important;

  display: flex !important;
  flex-direction: column !important;

  gap: 18px !important;

  z-index: 100 !important;
}


/* كل عنصر */
.entrance .temple-tablet {
  width: 250px !important;
  min-height: 105px !important;

  margin: 0 !important;

  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;

  padding: 15px !important;

  box-sizing: border-box;
}


/* عند تحريك الماوس */
.entrance .temple-tablet:hover {
  transform: translateX(-8px);
}


/* =========================================================
   SMALL DESKTOP
========================================================= */

@media (max-width: 1200px) {

  .entrance .temple-actions {
    right: 2vw !important;
    width: 210px !important;
  }

  .entrance .temple-tablet {
    width: 210px !important;
  }

}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 700px) {

  .entrance .temple-actions {
    right: 50% !important;
    top: auto !important;
    bottom: 4vh !important;

    transform: translateX(50%) !important;

    width: 94% !important;

    flex-direction: row !important;
    gap: 7px !important;
  }

  .entrance .temple-tablet {
    width: 33.33% !important;
    min-height: 75px !important;
    padding: 8px !important;
  }

}
/* =========================================================
   PHARAONIC QUICK ACTION ICONS
========================================================= */

.temple-action {
  position: relative;
  cursor: pointer;
  overflow: visible;
  -webkit-tap-highlight-color: transparent;
}

.action-symbol.pharaoh-icon {
  position: relative;
  width: 105px;
  height: 105px;

  display: grid;
  place-items: center;

  margin: 0 auto 18px;

  color: #d4af37;

  background:
    radial-gradient(
      circle at 50% 45%,
      rgba(212,175,55,.18),
      rgba(48,31,14,.9) 62%,
      rgba(16,11,7,.98)
    );

  border: 2px solid rgba(212,175,55,.72);

  box-shadow:
    inset 0 0 22px rgba(212,175,55,.13),
    0 8px 25px rgba(0,0,0,.45);

  transition:
    transform .4s cubic-bezier(.2,.8,.2,1),
    box-shadow .4s ease,
    border-color .4s ease;
}

/* إطار داخلي */
.pharaoh-icon::before {
  content: "";

  position: absolute;
  inset: 7px;

  border: 1px solid rgba(212,175,55,.35);

  pointer-events: none;
}

/* زخرفة هيروغليفية */
.pharaoh-icon::after {
  content: "𓋹 𓆣 𓂀";

  position: absolute;

  bottom: -15px;
  left: 0;
  width: 100%;

  text-align: center;

  font-family: serif;
  font-size: 10px;
  letter-spacing: 5px;

  color: rgba(212,175,55,.55);

  pointer-events: none;
}

/* الرمز الرئيسي */
.hieroglyph {
  position: relative;
  z-index: 5;

  font-family:
    "Noto Sans Egyptian Hieroglyphs",
    "Segoe UI Symbol",
    serif;

  font-size: 55px;
  line-height: 1;

  color: #e3c45f;

  text-shadow:
    0 0 6px rgba(255,220,100,.35),
    0 0 18px rgba(212,175,55,.25);

  transition:
    transform .45s ease,
    filter .45s ease;
}


/* =========================================================
   AI — EYE OF HORUS
========================================================= */

.ai-relic {
  border-radius: 50%;
}

.ai-relic .icon-orbit {
  position: absolute;
  inset: -10px;

  border: 1px dashed rgba(212,175,55,.35);

  border-radius: 50%;

  animation: pharaohOrbit 16s linear infinite;
}

.ai-relic .icon-orbit::before,
.ai-relic .icon-orbit::after {
  content: "";

  position: absolute;

  width: 7px;
  height: 7px;

  border-radius: 50%;

  background: #d4af37;

  box-shadow: 0 0 10px rgba(212,175,55,.7);
}

.ai-relic .icon-orbit::before {
  top: -4px;
  left: 50%;
}

.ai-relic .icon-orbit::after {
  bottom: -4px;
  right: 18%;
}

.ai-relic .icon-rays {
  position: absolute;
  inset: 18px;

  border: 1px solid rgba(212,175,55,.22);
  border-radius: 50%;
}


/* =========================================================
   COLLECTIONS — PAPYRUS
========================================================= */

.collection-relic {
  border-radius: 12px;
}

.collection-relic .hieroglyph {
  font-size: 58px;
}

.papyrus-roll {
  position: absolute;

  width: 68px;
  height: 50px;

  border: 2px solid rgba(212,175,55,.55);

  background:
    linear-gradient(
      90deg,
      rgba(212,175,55,.08),
      rgba(212,175,55,.18),
      rgba(212,175,55,.08)
    );

  transform: rotate(-4deg);

  box-shadow:
    5px 5px 0 rgba(100,65,15,.35),
    9px 9px 0 rgba(60,40,12,.25);
}

.papyrus-roll::before,
.papyrus-roll::after {
  content: "";

  position: absolute;

  width: 9px;
  height: 56px;

  top: -5px;

  border: 1px solid rgba(212,175,55,.6);

  border-radius: 50%;
}

.papyrus-roll::before {
  left: -7px;
}

.papyrus-roll::after {
  right: -7px;
}

.papyrus-lines {
  position: absolute;

  width: 45px;
  height: 30px;

  border-top: 1px solid rgba(212,175,55,.35);
  border-bottom: 1px solid rgba(212,175,55,.35);

  transform: translateY(1px);
}


/* =========================================================
   RESEARCH — SACRED GEOMETRY
========================================================= */

.research-relic {
  border-radius: 50% 50% 15px 15px;
}

.research-ring {
  position: absolute;

  inset: 18px;

  border: 1px solid rgba(212,175,55,.4);

  border-radius: 50%;

  transform: rotate(45deg);
}

.research-ring::before,
.research-ring::after {
  content: "";

  position: absolute;

  width: 9px;
  height: 9px;

  border: 1px solid #d4af37;

  background: #24180b;

  transform: rotate(45deg);
}

.research-ring::before {
  top: -6px;
  left: calc(50% - 5px);
}

.research-ring::after {
  bottom: -6px;
  left: calc(50% - 5px);
}

.research-cross {
  position: absolute;

  width: 35px;
  height: 35px;

  border: 1px solid rgba(212,175,55,.3);

  transform: rotate(45deg);
}

.research-cross::before,
.research-cross::after {
  content: "";

  position: absolute;

  background: rgba(212,175,55,.45);
}

.research-cross::before {
  width: 1px;
  height: 100%;
  left: 50%;
}

.research-cross::after {
  width: 100%;
  height: 1px;
  top: 50%;
}


/* =========================================================
   HOVER
========================================================= */

.temple-action:hover .pharaoh-icon {
  transform: translateY(-8px) scale(1.07);

  border-color: #f5d878;

  box-shadow:
    inset 0 0 30px rgba(212,175,55,.22),
    0 0 18px rgba(212,175,55,.3),
    0 0 45px rgba(212,175,55,.13),
    0 15px 35px rgba(0,0,0,.5);
}

.temple-action:hover .hieroglyph {
  transform: scale(1.13);

  filter:
    drop-shadow(0 0 8px rgba(255,220,100,.75))
    drop-shadow(0 0 18px rgba(212,175,55,.4));
}


/* =========================================================
   CLICK
========================================================= */

.temple-action.is-opening .pharaoh-icon {
  transform: scale(.9);

  box-shadow:
    0 0 40px rgba(212,175,55,.5);
}

@keyframes pharaohOrbit {
  from {
    transform: rotate(0deg);
  }

  to {
    transform: rotate(360deg);
  }
}


/* MOBILE */
@media (max-width: 700px) {

  .action-symbol.pharaoh-icon {
    width: 85px;
    height: 85px;
  }

  .hieroglyph {
    font-size: 45px;
  }
}
/* =========================================================
   PHARAONIC ARTIFACT ACTIONS
   ========================================================= */

/* ننزل المجموعة كلها */
.temple-actions {
    position: relative;
    z-index: 20;

    margin-top: 85px;

    display: flex;
    justify-content: center;
    align-items: flex-start;
    gap: clamp(45px, 7vw, 110px);
}


/* =========================================================
   إزالة الكروت البيضاء
   ========================================================= */

.temple-action {
    position: relative;

    width: 180px;
    min-height: 190px;

    padding: 0;

    background: transparent !important;
    background-color: transparent !important;

    border: 0 !important;
    outline: none !important;
    box-shadow: none !important;

    cursor: pointer;

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

    overflow: visible !important;

    color: #d4af37;

    transition:
        transform .45s cubic-bezier(.2,.8,.2,1);
}


/* =========================================================
   الأيقونة الأساسية
   ========================================================= */

.pharaoh-icon {
    position: relative;

    width: 125px;
    height: 125px;

    flex-shrink: 0;

    display: grid;
    place-items: center;

    color: #d4af37;

    background:
        radial-gradient(
            circle at 45% 38%,
            rgba(255,225,130,.25),
            rgba(82,57,25,.85) 42%,
            rgba(25,17,9,.98) 78%
        );

    border: 2px solid rgba(212,175,55,.85);

    box-shadow:
        0 0 0 4px rgba(212,175,55,.07),
        0 0 0 8px rgba(212,175,55,.025),
        inset 0 0 25px rgba(255,215,100,.12),
        0 12px 35px rgba(0,0,0,.55);

    transition:
        transform .5s cubic-bezier(.2,.8,.2,1),
        box-shadow .5s ease,
        border-color .5s ease,
        filter .5s ease;
}


/* =========================================================
   إطار أثري داخلي
   ========================================================= */

.pharaoh-icon::before {
    content: "";

    position: absolute;
    inset: 8px;

    border: 1px solid rgba(212,175,55,.45);

    box-shadow:
        inset 0 0 12px rgba(212,175,55,.08);

    pointer-events: none;
}


/* =========================================================
   زخارف صغيرة حول القطعة
   ========================================================= */

.pharaoh-icon::after {
    content: "𓋹 𓆣 𓂀";

    position: absolute;

    bottom: -22px;
    left: 0;

    width: 100%;

    text-align: center;

    font-family: serif;
    font-size: 11px;
    letter-spacing: 6px;

    color: rgba(212,175,55,.55);

    opacity: .75;

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


/* =========================================================
   الرمز
   ========================================================= */

.hieroglyph {
    position: relative;
    z-index: 10;

    color: #e8ca68;

    font-family:
        "Noto Sans Egyptian Hieroglyphs",
        "Segoe UI Symbol",
        serif;

    font-size: 62px;

    line-height: 1;

    text-shadow:
        0 0 5px rgba(255,220,100,.45),
        0 0 15px rgba(212,175,55,.3),
        0 0 30px rgba(212,175,55,.12);

    transition:
        transform .5s cubic-bezier(.2,.8,.2,1),
        filter .5s ease;
}


/* =========================================================
   الاسم — مخفي
   ========================================================= */

.action-label {
    position: absolute;

    left: 50%;
    bottom: calc(100% + 22px);

    transform:
        translateX(-50%)
        translateY(10px)
        scale(.85);

    width: max-content;
    max-width: 260px;

    padding: 12px 24px;

    opacity: 0;
    visibility: hidden;

    pointer-events: none;

    color: #f1d77b;

    font-family:
        Georgia,
        "Times New Roman",
        serif;

    font-size: 15px;
    letter-spacing: 2px;
    white-space: nowrap;

    background:
        linear-gradient(
            90deg,
            rgba(45,29,11,.96),
            rgba(86,59,21,.98),
            rgba(45,29,11,.96)
        );

    border: 1px solid rgba(212,175,55,.75);

    box-shadow:
        0 0 0 3px rgba(212,175,55,.05),
        0 8px 25px rgba(0,0,0,.5),
        inset 0 0 15px rgba(212,175,55,.08);

    transition:
        opacity .3s ease,
        visibility .3s ease,
        transform .35s cubic-bezier(.2,.8,.2,1);
}


/* طرف زخرفي للاسم */
.action-label::before,
.action-label::after {
    position: absolute;

    top: 50%;

    transform: translateY(-50%);

    color: #d4af37;

    font-size: 12px;
}

.action-label::before {
    content: "𓆩";
    left: 7px;
}

.action-label::after {
    content: "𓆪";
    right: 7px;
}


/* =========================================================
   ظهور الاسم عند الـHOVER
   ========================================================= */

.temple-action:hover .action-label,
.temple-action:focus-visible .action-label {
    opacity: 1;
    visibility: visible;

    transform:
        translateX(-50%)
        translateY(0)
        scale(1);
}


/* =========================================================
   الحركة الأساسية
   ========================================================= */

.temple-action:hover {
    transform: translateY(-8px);
}

.temple-action:hover .pharaoh-icon {
    transform: translateY(-5px) scale(1.08);

    border-color: #f4d978;

    filter:
        drop-shadow(0 0 12px rgba(212,175,55,.25));

    box-shadow:
        0 0 0 4px rgba(212,175,55,.1),
        0 0 0 9px rgba(212,175,55,.035),
        0 0 25px rgba(212,175,55,.35),
        0 18px 40px rgba(0,0,0,.6),
        inset 0 0 30px rgba(255,215,100,.18);
}

.temple-action:hover .hieroglyph {
    transform: scale(1.16);

    filter:
        drop-shadow(0 0 7px rgba(255,225,120,.8))
        drop-shadow(0 0 18px rgba(212,175,55,.4));
}

.temple-action:hover .pharaoh-icon::after {
    opacity: 1;

    transform: translateY(3px);
}


/* =========================================================
   AI — عين حورس
   ========================================================= */

.ai-relic {
    border-radius: 50%;
}


/* الشمس/الدائرة الخارجية */

.ai-relic .icon-orbit {
    position: absolute;

    inset: -14px;

    border: 1px dashed rgba(212,175,55,.38);

    border-radius: 50%;

    animation:
        pharaohOrbit 18s linear infinite;
}


/* نقاط الشمس */

.ai-relic .icon-orbit::before,
.ai-relic .icon-orbit::after {
    content: "";

    position: absolute;

    width: 8px;
    height: 8px;

    border-radius: 50%;

    background: #d4af37;

    box-shadow:
        0 0 10px rgba(212,175,55,.8);
}

.ai-relic .icon-orbit::before {
    top: -4px;
    left: 50%;
}

.ai-relic .icon-orbit::after {
    bottom: 9%;
    right: 4%;
}


/* =========================================================
   COLLECTION — بردية
   ========================================================= */

.collection-relic {
    border-radius: 14px 14px 18px 18px;
}

.collection-relic .hieroglyph {
    font-size: 64px;
}

.papyrus-roll {
    position: absolute;

    width: 76px;
    height: 54px;

    border: 2px solid rgba(212,175,55,.6);

    background:
        linear-gradient(
            135deg,
            rgba(240,210,140,.12),
            rgba(70,45,15,.2)
        );

    transform: rotate(-3deg);

    box-shadow:
        5px 5px 0 rgba(100,65,15,.35),
        9px 9px 0 rgba(50,30,10,.25);
}

.papyrus-roll::before,
.papyrus-roll::after {
    content: "";

    position: absolute;

    top: -5px;

    width: 10px;
    height: 64px;

    border: 1px solid rgba(212,175,55,.7);

    border-radius: 50%;
}

.papyrus-roll::before {
    left: -8px;
}

.papyrus-roll::after {
    right: -8px;
}

.papyrus-lines {
    position: absolute;

    width: 48px;
    height: 30px;

    border-top: 1px solid rgba(212,175,55,.35);
    border-bottom: 1px solid rgba(212,175,55,.35);
}


/* =========================================================
   RESEARCH — ختم المعرفة
   ========================================================= */

.research-relic {
    border-radius: 50% 50% 18px 18px;
}

.research-ring {
    position: absolute;

    inset: 18px;

    border: 1px solid rgba(212,175,55,.45);

    border-radius: 50%;

    transform: rotate(45deg);
}

.research-ring::before,
.research-ring::after {
    content: "";

    position: absolute;

    width: 9px;
    height: 9px;

    border: 1px solid #d4af37;

    background: #24180b;

    transform: rotate(45deg);
}

.research-ring::before {
    top: -6px;
    left: calc(50% - 5px);
}

.research-ring::after {
    bottom: -6px;
    left: calc(50% - 5px);
}

.research-cross {
    position: absolute;

    width: 38px;
    height: 38px;

    border: 1px solid rgba(212,175,55,.25);

    transform: rotate(45deg);
}


/* =========================================================
   CLICK
   ========================================================= */

.temple-action:active .pharaoh-icon {
    transform: scale(.93);
}


/* =========================================================
   ANIMATION
   ========================================================= */

@keyframes pharaohOrbit {

    from {
        transform: rotate(0deg);
    }

    to {
        transform: rotate(360deg);
    }

}


/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width: 800px) {

    .temple-actions {
        margin-top: 55px;

        gap: 25px;

        flex-wrap: wrap;
    }

    .temple-action {
        width: 145px;
    }

    .pharaoh-icon {
        width: 100px;
        height: 100px;
    }

    .hieroglyph {
        font-size: 50px;
    }

}
/* =========================================================
   TEMPLE MUSIC RELIC
   Fixed inside the first temple entrance
========================================================= */

.entrance {
    position: relative;
}


/* =========================================================
   MAIN BUTTON
========================================================= */

.music-btn {
    position: absolute !important;

    /* ناحية الشمال من باب المعبد */
    left: clamp(35px, 9vw, 150px) !important;

    /* مستوى قريب من منتصف الباب */
    top: 53% !important;

    transform: translateY(-50%) !important;

    width: 86px !important;
    height: 86px !important;

    padding: 0 !important;
    margin: 0 !important;

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

    background: transparent !important;
    border: 0 !important;

    color: #d4af37;

    cursor: pointer;

    z-index: 100 !important;

    overflow: visible !important;

    isolation: isolate;

    /* مهم: مفيش حركة للمكان */
    transition:
        filter .35s ease,
        opacity .35s ease !important;
}


/* =========================================================
   STONE / GOLD DISC
========================================================= */

.music-emblem {
    position: relative;

    width: 64px;
    height: 64px;

    display: grid;
    place-items: center;

    border-radius: 50%;

    background:
        radial-gradient(
            circle at 38% 32%,
            #b99345 0%,
            #60451e 28%,
            #24180d 67%,
            #0d0905 100%
        );

    border:
        2px solid rgba(212,175,55,.85);

    box-shadow:

        /* الذهب الداخلي */
        inset 0 0 12px rgba(255,215,100,.18),

        /* ظل القطعة */
        0 8px 20px rgba(0,0,0,.65),

        /* هالة ذهبية */
        0 0 16px rgba(212,175,55,.18);

    z-index: 5;

    transition:
        box-shadow .35s ease,
        border-color .35s ease,
        filter .35s ease;
}


/* إطار أثري داخلي */

.music-emblem::before {
    content: "";

    position: absolute;

    inset: 6px;

    border:
        1px solid rgba(212,175,55,.45);

    border-radius: 50%;

    box-shadow:
        inset 0 0 8px rgba(212,175,55,.12);
}


/* الرمز */

.music-icon {
    position: relative;

    z-index: 4;

    font-family:
        "Noto Sans Egyptian Hieroglyphs",
        "Segoe UI Symbol",
        serif;

    font-size: 31px;

    line-height: 1;

    color: #e6c65f;

    text-shadow:
        0 0 5px rgba(255,220,100,.55),
        0 0 14px rgba(212,175,55,.3);

    transition:
        filter .35s ease;
}


/* =========================================================
   OUTER ORBITS
========================================================= */

.music-orbit {
    position: absolute;

    border-radius: 50%;

    pointer-events: none;

    border: 1px solid rgba(212,175,55,.28);

    z-index: 1;
}


.orbit-one {
    width: 76px;
    height: 76px;

    border-style: dashed;

    transform: rotate(18deg);
}


.orbit-two {
    width: 92px;
    height: 54px;

    transform: rotate(-28deg);

    border-color:
        rgba(212,175,55,.18);
}


/* =========================================================
   SMALL GOLD MARKS
========================================================= */

.music-orbit::before,
.music-orbit::after {
    content: "";

    position: absolute;

    width: 5px;
    height: 5px;

    border-radius: 50%;

    background: #d4af37;

    box-shadow:
        0 0 7px rgba(212,175,55,.7);
}


.orbit-one::before {
    top: -3px;
    left: 50%;
}


.orbit-one::after {
    bottom: -3px;
    right: 12%;
}


.orbit-two::before {
    top: 12%;
    left: -3px;
}


.orbit-two::after {
    bottom: 12%;
    right: -3px;
}


/* =========================================================
   SOUND WAVES
========================================================= */

.music-waves {
    position: absolute;

    right: -4px;
    top: 50%;

    transform: translateY(-50%);

    display: flex;

    gap: 3px;

    height: 25px;

    align-items: center;

    z-index: 8;

    opacity: .75;
}


.music-waves i {
    display: block;

    width: 2px;

    height: 7px;

    border-radius: 4px;

    background: #d4af37;

    box-shadow:
        0 0 5px rgba(212,175,55,.45);

    transition:
        height .3s ease;
}


.music-waves i:nth-child(2) {
    height: 14px;
}


.music-waves i:nth-child(3) {
    height: 20px;
}


/* =========================================================
   HIDDEN LABEL
========================================================= */

.music-text {
    position: absolute;

    left: 78px;
    top: 50%;

    transform:
        translateY(-50%)
        translateX(-10px);

    width: max-content;

    padding: 9px 17px;

    opacity: 0;
    visibility: hidden;

    pointer-events: none;

    white-space: nowrap;

    color: #e8ca68;

    font-family:
        "Cinzel",
        Georgia,
        serif;

    font-size: 12px;

    letter-spacing: 1.5px;

    background:
        linear-gradient(
            90deg,
            rgba(28,18,8,.98),
            rgba(67,46,18,.98),
            rgba(28,18,8,.98)
        );

    border:
        1px solid rgba(212,175,55,.65);

    box-shadow:
        0 8px 22px rgba(0,0,0,.55),
        inset 0 0 12px rgba(212,175,55,.08);

    transition:
        opacity .3s ease,
        visibility .3s ease,
        transform .3s ease;

    z-index: 20;
}


/* زخارف الاسم */

.music-text::before {
    content: "𓋹";

    margin-right: 8px;

    color: #d4af37;
}


.music-text::after {
    content: "𓂀";

    margin-left: 8px;

    color: #d4af37;
}


/* =========================================================
   HOVER
========================================================= */

.music-btn:hover .music-emblem {
    border-color: #f2d573;

    box-shadow:
        inset 0 0 16px rgba(255,215,100,.25),
        0 0 20px rgba(212,175,55,.32),
        0 0 42px rgba(212,175,55,.12),
        0 10px 25px rgba(0,0,0,.7);

    filter: brightness(1.12);
}


.music-btn:hover .music-icon {
    filter:
        drop-shadow(0 0 6px rgba(255,220,100,.8))
        drop-shadow(0 0 14px rgba(212,175,55,.45));
}


.music-btn:hover .music-text {
    opacity: 1;
    visibility: visible;

    transform:
        translateY(-50%)
        translateX(0);
}


/* =========================================================
   PLAYING STATE
========================================================= */

.music-btn[aria-pressed="true"] .music-emblem {

    box-shadow:
        inset 0 0 18px rgba(255,215,100,.25),
        0 0 25px rgba(212,175,55,.4),
        0 0 55px rgba(212,175,55,.14);
}


.music-btn[aria-pressed="true"] .music-waves i {
    animation:
        musicWave .75s ease-in-out infinite alternate;
}


.music-btn[aria-pressed="true"] .music-waves i:nth-child(1) {
    animation-delay: -.2s;
}


.music-btn[aria-pressed="true"] .music-waves i:nth-child(2) {
    animation-delay: -.4s;
}


.music-btn[aria-pressed="true"] .music-waves i:nth-child(3) {
    animation-delay: -.1s;
}


@keyframes musicWave {

    from {
        height: 5px;
        opacity: .45;
    }

    to {
        height: 21px;
        opacity: 1;
    }

}


/* =========================================================
   CLICK
========================================================= */

.music-btn:active .music-emblem {
    filter: brightness(1.25);

    box-shadow:
        0 0 35px rgba(212,175,55,.5),
        inset 0 0 20px rgba(255,215,100,.25);
}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 900px) {

    .music-btn {
        left: 25px !important;
        top: 55% !important;
    }

}


@media (max-width: 600px) {

    .music-btn {
        left: 16px !important;
        top: 58% !important;

        width: 70px !important;
        height: 70px !important;
    }

    .music-emblem {
        width: 53px;
        height: 53px;
    }

    .music-icon {
        font-size: 25px;
    }

    .music-orbit.orbit-one {
        width: 64px;
        height: 64px;
    }

    .music-orbit.orbit-two {
        width: 75px;
        height: 45px;
    }

    .music-text {
        left: 65px;

        font-size: 10px;
    }

}
/* ==========================================
   TEMPLE GATE — FAST OPEN
========================================== */

#entrance {
  cursor: pointer;
  perspective: 1400px;
  -webkit-tap-highlight-color: transparent;
}

#doorLeft,
#doorRight {
  transform-style: preserve-3d;

  transition:
    transform 0.42s cubic-bezier(0.22, 0.8, 0.25, 1),
    filter 0.42s ease;

  will-change: transform;
}

/* الباب أثناء الفتح */

#entrance.gate-open #doorLeft {
  transform: rotateY(-82deg) !important;
}

#entrance.gate-open #doorRight {
  transform: rotateY(82deg) !important;
}

/* الإضاءة */

#entrance.gate-open .gate-glow {
  opacity: 0.2;
  transition: opacity 0.35s ease;
}
/* =========================================
   TEMPLE DOOR - OPEN ON SCROLL
========================================= */

#gateWrap .door {
    transition: transform 0.7s cubic-bezier(.22, 1, .36, 1);
    will-change: transform;
}

/* الباب الشمال يفتح للشمال */
#entrance.door-opening #doorLeft {
    transform: translateX(-100%);
}

/* الباب اليمين يفتح لليمين */
#entrance.door-opening #doorRight {
    transform: translateX(100%);
}
/* =========================================================
   GU LIBRARY — FINAL ENTRANCE DESIGN
   Version: Small Gate + Obelisks + Pyramids + Hall Stairs
========================================================= */


/* =========================================================
   1. ENTRANCE
========================================================= */

#entrance {
    position: relative !important;
    overflow: hidden !important;

    min-height: 760px !important;

    perspective: 1400px;
}


/* =========================================================
   2. SMALLER TEMPLE DOOR
========================================================= */

#gateWrap {

    width: min(48vw, 820px) !important;

    height: clamp(420px, 53vh, 540px) !important;

    max-width: 820px !important;
    max-height: 540px !important;

    left: 50%;

    z-index: 12 !important;

    transform-origin: center bottom;

    filter:
        drop-shadow(
            0 15px 30px rgba(0,0,0,.55)
        );
}


/* Door panels stay inside the smaller gate */

#doorLeft,
#doorRight {

    transform-style: preserve-3d;

    backface-visibility: hidden;

    will-change: transform;

}


/* =========================================================
   3. DOOR GOLD LIGHT
========================================================= */

#gateWrap .gate-glow {

    background:
        radial-gradient(
            ellipse at center,

            rgba(255,220,120,.25) 0%,

            rgba(212,175,55,.13) 32%,

            rgba(120,80,20,.06) 55%,

            transparent 72%
        ) !important;

    filter: blur(8px);

    opacity: .72;

    animation:
        templeDoorGlow 5s ease-in-out infinite;
}


@keyframes templeDoorGlow {

    0%,
    100% {
        opacity: .58;
    }

    50% {
        opacity: .82;
    }

}


/* =========================================================
   4. PYRAMIDS — LEFT BACKGROUND
========================================================= */

.pyramid-scene {

    position: absolute;

    left: 0;

    bottom: 15%;

    width: 48%;

    height: 42%;

    z-index: 2;

    pointer-events: none;

    opacity: .78;

}


/* Pyramid base shape */

.pyramid {

    position: absolute;

    bottom: 0;

    clip-path:
        polygon(
            50% 0%,
            100% 100%,
            0% 100%
        );

    background:
        linear-gradient(
            110deg,
            #090d14 0%,
            #1d1b18 48%,
            #302719 100%
        );

    filter:
        drop-shadow(
            0 10px 20px rgba(0,0,0,.55)
        );

}


/* Large pyramid */

.pyramid-large {

    left: 18%;

    width: 46%;

    height: 82%;

    z-index: 3;
}


/* Smaller pyramid */

.pyramid-small {

    left: 0;

    width: 34%;

    height: 58%;

    z-index: 4;
}


/* Back pyramid */

.pyramid-back {

    left: 52%;

    width: 32%;

    height: 50%;

    z-index: 2;

    opacity: .58;
}


/* Pyramid golden edge */

.pyramid::after {

    content: "";

    position: absolute;

    left: 50%;

    top: 0;

    width: 1px;

    height: 100%;

    background:
        linear-gradient(
            to bottom,
            rgba(212,175,55,.35),
            rgba(212,175,55,.04)
        );

    transform:
        rotate(28deg);

    transform-origin: top;

    opacity: .45;
}


/* =========================================================
   5. PYRAMID ATMOSPHERE
========================================================= */

.pyramid-scene::after {

    content: "";

    position: absolute;

    inset: 0;

    background:
        linear-gradient(
            90deg,
            rgba(0,0,0,.15),
            transparent 70%
        );

    pointer-events: none;
}


/* =========================================================
   6. BRING THE EXISTING OBELISKS BACK
========================================================= */

/*
   They were previously hidden by:

   .entrance .obelisk-left,
   .entrance .obelisk-right {
       display:none;
   }

   Override that here.
*/

.entrance .obelisk-left,
.entrance .obelisk-right {

    display: block !important;

    position: absolute !important;

    z-index: 9 !important;

    pointer-events: none;

}


/* Left obelisk */

.entrance .obelisk-left {

    left: 5% !important;

    bottom: 13% !important;

    width: clamp(55px, 7vw, 105px) !important;

    height: clamp(260px, 43vh, 470px) !important;

    opacity: .82;

}


/* Right obelisk */

.entrance .obelisk-right {

    right: 5% !important;

    bottom: 13% !important;

    width: clamp(55px, 7vw, 105px) !important;

    height: clamp(260px, 43vh, 470px) !important;

    opacity: .82;

}


/* =========================================================
   7. OBELISK GOLD LIGHT
========================================================= */

.entrance .obelisk-left,
.entrance .obelisk-right {

    filter:
        drop-shadow(
            0 0 12px rgba(212,175,55,.16)
        );
}


/* =========================================================
   8. KEEP SIDE DECORATIONS CLEAN
========================================================= */

.entrance .statue-left,
.entrance .statue-right,
.entrance .torch-entrance-left,
.entrance .torch-entrance-right,
.entrance .ruin-fragment-left,
.entrance .ruin-fragment-right,
.entrance .column-left,
.entrance .column-right {

    display: none !important;

}


/* =========================================================
   9. SERVICES HALL
========================================================= */

#hall {

    position: relative;

    overflow: hidden;

    min-height: 900px;

}


/* =========================================================
   10. STAIRS AT TOP OF SECOND PAGE
========================================================= */

.services-stairs {

    position: absolute;

    top: 0;

    left: 50%;

    transform: translateX(-50%);

    width: 100%;

    height: 230px;

    z-index: 4;

    pointer-events: none;

    background:
        linear-gradient(
            to bottom,

            #4b351f 0%,

            #352719 25%,

            #241b15 52%,

            #151515 78%,

            rgba(10,15,17,0) 100%
        );

}


/* =========================================================
   11. INDIVIDUAL STAIRS
========================================================= */

.services-stair {

    position: absolute;

    left: 50%;

    transform: translateX(-50%);

    height: 30px;

    background:
        linear-gradient(
            to bottom,

            #6b4b27,

            #3b2a1b 55%,

            #1d1712
        );

    border-top:
        1px solid rgba(212,175,55,.65);

    box-shadow:

        0 -4px 12px rgba(212,175,55,.08),

        inset 0 5px 8px rgba(255,220,130,.04),

        0 7px 12px rgba(0,0,0,.35);
}


/* Top — narrow */

.services-stair.stair-1 {

    top: 0;

    width: 30%;
}


/* */

.services-stair.stair-2 {

    top: 35px;

    width: 42%;
}


/* */

.services-stair.stair-3 {

    top: 70px;

    width: 54%;
}


/* */

.services-stair.stair-4 {

    top: 105px;

    width: 67%;
}


/* */

.services-stair.stair-5 {

    top: 140px;

    width: 82%;
}


/* Full-width bottom */

.services-stair.stair-6 {

    top: 175px;

    width: 100%;
}


/* =========================================================
   12. GOLDEN STAIR EDGES
========================================================= */

.services-stair::after {

    content: "";

    position: absolute;

    left: 4%;

    right: 4%;

    top: -1px;

    height: 1px;

    background:
        linear-gradient(
            90deg,

            transparent,

            rgba(212,175,55,.45) 20%,

            rgba(255,225,135,.75) 50%,

            rgba(212,175,55,.45) 80%,

            transparent
        );
}


/* =========================================================
   13. LIGHT BETWEEN TEMPLE + HALL
========================================================= */

.stairs-center-light {

    position: absolute;

    top: 0;

    left: 50%;

    transform: translateX(-50%);

    width: 28%;

    height: 180px;

    background:
        linear-gradient(
            to bottom,

            rgba(255,215,100,.22),

            rgba(212,175,55,.08),

            transparent
        );

    filter: blur(20px);

}


/* =========================================================
   14. SMOOTH TRANSITION TO SERVICES
========================================================= */

.stairs-bottom-fade {

    position: absolute;

    left: 0;

    right: 0;

    bottom: 0;

    height: 100px;

    background:
        linear-gradient(
            to bottom,

            transparent,

            rgba(15,18,19,.72),

            #0e1416
        );

}


/* =========================================================
   15. DESKTOP BALANCE
========================================================= */

@media (min-width: 1200px) {

    #gateWrap {

        width: 46vw !important;

        height: 520px !important;

    }

    .entrance .obelisk-left {

        left: 6% !important;

    }

    .entrance .obelisk-right {

        right: 6% !important;

    }

}


/* =========================================================
   16. TABLET
========================================================= */

@media (max-width: 900px) {

    #gateWrap {

        width: 58vw !important;

        height: 470px !important;

    }

    .entrance .obelisk-left {

        left: 2% !important;

        width: 65px !important;

        height: 330px !important;

    }

    .entrance .obelisk-right {

        right: 2% !important;

        width: 65px !important;

        height: 330px !important;

    }

    .pyramid-scene {

        width: 55%;

        opacity: .58;

    }

}


/* =========================================================
   17. MOBILE
========================================================= */

@media (max-width: 600px) {

    #entrance {

        min-height: 700px !important;

    }

    #gateWrap {

        width: 70vw !important;

        height: 400px !important;

    }

    .entrance .obelisk-left,
    .entrance .obelisk-right {

        width: 42px !important;

        height: 240px !important;

        opacity: .55;

    }

    .entrance .obelisk-left {

        left: 1% !important;

    }

    .entrance .obelisk-right {

        right: 1% !important;

    }

    .pyramid-scene {

        width: 65%;

        height: 35%;

        opacity: .42;

    }

    .services-stairs {

        height: 190px;

    }

    .services-stair {

        height: 25px;

    }

    .services-stair.stair-1 {
        top: 0;
    }

    .services-stair.stair-2 {
        top: 30px;
    }

    .services-stair.stair-3 {
        top: 60px;
    }

    .services-stair.stair-4 {
        top: 90px;
    }

    .services-stair.stair-5 {
        top: 120px;
    }

    .services-stair.stair-6 {
        top: 150px;
    }

}
/* =========================================================
   FINAL GATE SIZE
========================================================= */

#entrance #gateWrap {
    width: 38vw !important;
    height: 430px !important;

    max-width: 680px !important;
    max-height: 430px !important;

    left: 50% !important;
    bottom: 0 !important;

    transform: translateX(-50%) !important;

    z-index: 20 !important;
}


/* الباب نفسه */

#entrance #gateWrap .door {
    transform-origin: center center;
}


/* توهج بسيط جدًا */

#entrance #gateWrap .gate-glow {
    opacity: .45 !important;

    filter: blur(8px);

    background:
        radial-gradient(
            ellipse at center,
            rgba(212,175,55,.18),
            transparent 68%
        ) !important;
}
/* =========================================================
   SMALL OBELISKS
========================================================= */

#entrance .obelisk-left,
#entrance .obelisk-right {

    display: block !important;

    position: absolute !important;

    width: 48px !important;
    height: 250px !important;

    bottom: 10% !important;

    z-index: 12 !important;

    opacity: .58 !important;

    transform: none !important;

    filter:
        drop-shadow(
            0 0 10px rgba(212,175,55,.12)
        );
}


/* LEFT */

#entrance .obelisk-left {
    left: 17% !important;
}


/* RIGHT */

#entrance .obelisk-right {
    right: 17% !important;
}
/* =========================================================
   PYRAMIDS BACKGROUND
========================================================= */

#entrance .pyramids-bg {

    position: absolute;

    left: 0;
    bottom: 12%;

    width: 42%;
    height: 42%;

    z-index: 3;

    pointer-events: none;

    opacity: .65;
}


/* pyramid */

#entrance .pyramid-bg {

    position: absolute;

    bottom: 0;

    display: block;

    clip-path:
        polygon(
            50% 0,
            100% 100%,
            0 100%
        );

    background:
        linear-gradient(
            135deg,
            rgba(10,14,20,.95),
            rgba(28,25,20,.88)
        );

    filter:
        drop-shadow(
            0 5px 12px rgba(0,0,0,.5)
        );
}


/* الكبيرة */

#entrance .pyramid-bg-1 {

    left: 20%;

    width: 210px;
    height: 170px;

    z-index: 3;
}


/* الصغيرة */

#entrance .pyramid-bg-2 {

    left: 0;

    width: 130px;
    height: 105px;

    z-index: 4;

    opacity: .75;
}


/* الخلفية */

#entrance .pyramid-bg-3 {

    left: 48%;

    width: 145px;
    height: 115px;

    z-index: 2;

    opacity: .48;
}


/* إضاءة خفيفة جدًا على قمة الهرم */

#entrance .pyramid-bg::before {

    content: "";

    position: absolute;

    top: 0;
    left: 50%;

    width: 2px;
    height: 40%;

    transform: translateX(-50%);

    background:
        linear-gradient(
            to bottom,
            rgba(212,175,55,.35),
            transparent
        );

    opacity: .5;
}
/* =========================================================
   ENTRANCE BALANCE
========================================================= */

#entrance {
    position: relative !important;

    overflow: hidden !important;

    min-height: 760px !important;

    background:
        linear-gradient(
            180deg,
            #07101e 0%,
            #08101a 58%,
            #11100d 100%
        );
}


/* السماء فوق المعبد */

#entrance::before {

    content: "";

    position: absolute;

    inset: 0;

    z-index: 1;

    pointer-events: none;

    background:
        radial-gradient(
            circle at 50% 45%,
            rgba(212,175,55,.06),
            transparent 35%
        );
}
/* =========================================================
   FINAL CINEMATIC TEMPLE ENTRANCE
   Visual reference:
   small gate + realistic stairs + edge lights
   + seamless transition into services hall
========================================================= */


/* =========================================================
   ENTRANCE
========================================================= */

#entrance {
    position: relative !important;
    overflow: hidden !important;

    min-height: 760px !important;

    perspective: 1600px;

    background:
        linear-gradient(
            180deg,
            #07101d 0%,
            #08111d 48%,
            #11100d 76%,
            #101719 100%
        );
}


/* =========================================================
   SMALLER GATE
========================================================= */

#entrance #gateWrap {

    position: absolute !important;

    left: 50% !important;

    bottom: 168px !important;

    transform: translateX(-50%) !important;

    width: min(36vw, 650px) !important;

    height: 420px !important;

    max-width: 650px !important;

    max-height: 420px !important;

    z-index: 20 !important;

    transform-origin: center bottom;

    filter:
        drop-shadow(
            0 16px 28px rgba(0,0,0,.52)
        );
}


/* الباب */

#entrance #gateWrap .door {

    backface-visibility: hidden;

    transform-style: preserve-3d;

}


/* =========================================================
   GATE GLOW
========================================================= */

#entrance #gateWrap .gate-glow {

    position: absolute;

    inset: -40px -60px;

    z-index: -1;

    background:
        radial-gradient(
            ellipse at center,

            rgba(255,218,110,.24) 0%,

            rgba(212,175,55,.12) 28%,

            rgba(212,175,55,.045) 52%,

            transparent 72%
        );

    filter: blur(14px);

    opacity: .68;

    pointer-events: none;
}


/* =========================================================
   EXISTING PYLONS / SIDE ARCHITECTURE
   Keep them behind the door
========================================================= */

#entrance .pylon-left,
#entrance .pylon-right {

    z-index: 8 !important;

}


/* =========================================================
   REALISTIC STAIRS
========================================================= */

#entrance .stairs {

    position: absolute !important;

    left: 50% !important;

    bottom: 0 !important;

    transform: translateX(-50%) perspective(900px) !important;

    width: min(82vw, 1180px) !important;

    height: 245px !important;

    z-index: 14 !important;

    pointer-events: none;

    overflow: hidden;

    /*
       Dark stone base.
       Gold enters from the temple
       and disappears toward the next section.
    */

    background:

        linear-gradient(
            90deg,
            rgba(212,175,55,.02),
            rgba(212,175,55,.08) 20%,
            rgba(212,175,55,.12) 50%,
            rgba(212,175,55,.08) 80%,
            rgba(212,175,55,.02)
        ),

        linear-gradient(
            180deg,
            #49341f 0%,
            #30251b 35%,
            #1b1b18 70%,
            #101718 100%
        );

    /*
       Perspective:
       narrow at the door,
       wide toward the next page.
    */

    clip-path:
        polygon(
            34% 0%,
            66% 0%,
            100% 100%,
            0% 100%
        );

    box-shadow:
        0 -15px 35px rgba(0,0,0,.35),

        inset 0 15px 25px
        rgba(255,210,110,.06);
}


/* =========================================================
   STAIR TREADS
========================================================= */

#entrance .stairs::before {

    content: "";

    position: absolute;

    inset: 0;

    /*
       Horizontal stone joints.
    */

    background:

        linear-gradient(
            to bottom,

            transparent 0,

            transparent 9%,

            rgba(212,175,55,.50) 9.5%,
            rgba(30,22,15,.90) 10%,

            transparent 10.5%,

            transparent 22%,

            rgba(212,175,55,.40) 22.5%,
            rgba(30,22,15,.92) 23%,

            transparent 23.5%,

            transparent 35%,

            rgba(212,175,55,.34) 35.5%,
            rgba(30,22,15,.94) 36%,

            transparent 36.5%,

            transparent 49%,

            rgba(212,175,55,.29) 49.5%,
            rgba(25,20,15,.95) 50%,

            transparent 50.5%,

            transparent 63%,

            rgba(212,175,55,.23) 63.5%,
            rgba(20,19,17,.97) 64%,

            transparent 64.5%,

            transparent 77%,

            rgba(212,175,55,.18) 77.5%,
            rgba(17,18,17,.98) 78%,

            transparent 78.5%,

            transparent
        );

    opacity: .92;

}


/* =========================================================
   REALISTIC STAIR SIDE SHADOW
========================================================= */

#entrance .stairs::after {

    content: "";

    position: absolute;

    inset: 0;

    background:

        linear-gradient(
            90deg,

            rgba(0,0,0,.62) 0%,

            rgba(0,0,0,.08) 18%,

            transparent 30%,

            transparent 70%,

            rgba(0,0,0,.08) 82%,

            rgba(0,0,0,.62) 100%
        ),

        linear-gradient(
            to bottom,

            rgba(255,220,120,.13) 0%,

            transparent 25%,

            rgba(0,0,0,.12) 60%,

            rgba(8,14,15,.82) 100%
        );

    pointer-events: none;
}


/* =========================================================
   GOLD LIGHT STRIPS ON BOTH SIDES
========================================================= */

#entrance .stairs {

    border-left:
        2px solid rgba(212,175,55,.42);

    border-right:
        2px solid rgba(212,175,55,.42);

    box-shadow:

        -10px 0 22px
        rgba(212,175,55,.10),

        10px 0 22px
        rgba(212,175,55,.10),

        0 -18px 35px
        rgba(0,0,0,.45);
}


/* =========================================================
   LIGHT AT THE TOP OF THE STAIRS
   Makes the stairs physically connect to the door.
========================================================= */

#entrance .stairs {

    box-shadow:

        0 -25px 45px
        rgba(255,210,100,.10),

        -14px 0 28px
        rgba(212,175,55,.10),

        14px 0 28px
        rgba(212,175,55,.10),

        inset 0 18px 24px
        rgba(255,215,110,.07);
}


/* =========================================================
   GOLDEN SIDE GLOW
========================================================= */

#entrance .stairs {
    isolation: isolate;
}


/* =========================================================
   TEMPLE → SERVICES COLOR MERGE
========================================================= */

#entrance .stairs {

    -webkit-mask-image:
        linear-gradient(
            to bottom,
            #000 0%,
            #000 64%,
            rgba(0,0,0,.90) 74%,
            rgba(0,0,0,.50) 88%,
            transparent 100%
        );

    mask-image:
        linear-gradient(
            to bottom,
            #000 0%,
            #000 64%,
            rgba(0,0,0,.90) 74%,
            rgba(0,0,0,.50) 88%,
            transparent 100%
        );
}


/* =========================================================
   HALL TRANSITION
========================================================= */

#hall {

    position: relative;

    margin-top: -28px !important;

    background:
        linear-gradient(
            180deg,

            #15120f 0%,

            #131718 22%,

            #0e1517 55%,

            #0b1315 100%
        );

}


/* Seam hiding the border between both sections */

#hall .hall-seam-fade {

    position: absolute;

    top: -55px;

    left: 0;

    right: 0;

    height: 130px;

    z-index: 8;

    pointer-events: none;

    background:
        linear-gradient(
            to bottom,

            transparent 0%,

            rgba(19,20,18,.30) 28%,

            rgba(14,21,23,.75) 62%,

            #0e1517 100%
        );
}


/* =========================================================
   GOLDEN LIGHT SPILL INTO PAGE TWO
========================================================= */

#hall::before {

    content: "";

    position: absolute;

    top: -20px;

    left: 50%;

    transform: translateX(-50%);

    width: 58%;

    height: 150px;

    background:
        radial-gradient(
            ellipse at center top,

            rgba(212,175,55,.13),

            rgba(212,175,55,.045) 35%,

            transparent 72%
        );

    filter: blur(18px);

    pointer-events: none;

    z-index: 3;
}


/* =========================================================
   DESKTOP
========================================================= */

@media (min-width: 1200px) {

    #entrance #gateWrap {

        width: 34vw !important;

        height: 400px !important;

        bottom: 170px !important;
    }

    #entrance .stairs {

        width: min(80vw, 1200px) !important;

        height: 250px !important;
    }
}


/* =========================================================
   TABLET
========================================================= */

@media (max-width: 900px) {

    #entrance #gateWrap {

        width: 50vw !important;

        height: 370px !important;

        bottom: 145px !important;
    }

    #entrance .stairs {

        width: 100vw !important;

        height: 220px !important;

        clip-path:
            polygon(
                28% 0%,
                72% 0%,
                100% 100%,
                0% 100%
            );
    }
}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 600px) {

    #entrance {

        min-height: 690px !important;
    }

    #entrance #gateWrap {

        width: 68vw !important;

        height: 330px !important;

        bottom: 125px !important;
    }

    #entrance .stairs {

        height: 190px !important;

        clip-path:
            polygon(
                22% 0%,
                78% 0%,
                100% 100%,
                0% 100%
            );
    }

}
/* =========================================================
   GU LIBRARY — FINAL CINEMATIC ENTRANCE
   Reference:
   Small Temple Gate
   Realistic Descending Staircase
   Golden Edge Lighting
   Seamless Hall Transition
========================================================= */


/* =========================================================
   ENTRANCE BASE
========================================================= */

#entrance {
    position: relative !important;
    overflow: hidden !important;

    min-height: 760px !important;

    background:
        linear-gradient(
            180deg,
            #06101d 0%,
            #07101b 48%,
            #0b1115 72%,
            #11100d 100%
        );

    isolation: isolate;
}


/* =========================================================
   SMALL TEMPLE DOOR
========================================================= */

#entrance #gateWrap {

    position: absolute !important;

    left: 50% !important;

    /*
       الباب مرتفع عن السلم
       بحيث يظهر أسفله بوضوح
    */
    bottom: 205px !important;

    transform:
        translateX(-50%) !important;

    width: min(34vw, 620px) !important;

    height: 390px !important;

    max-width: 620px !important;
    max-height: 390px !important;

    z-index: 30 !important;

    transform-origin: center bottom;

    filter:
        drop-shadow(
            0 18px 28px rgba(0,0,0,.55)
        );
}


/* =========================================================
   DOOR PANELS
========================================================= */

#entrance #gateWrap .door {

    position: absolute;

    top: 0;

    height: 100%;

    transform-style: preserve-3d;

    backface-visibility: hidden;

}


/* =========================================================
   DOOR LIGHT
========================================================= */

#entrance #gateWrap .gate-glow {

    position: absolute;

    inset: -55px -70px;

    z-index: -1;

    pointer-events: none;

    background:
        radial-gradient(
            ellipse at center,

            rgba(255,220,125,.25) 0%,

            rgba(212,175,55,.13) 30%,

            rgba(212,175,55,.045) 52%,

            transparent 73%
        );

    filter: blur(18px);

    opacity: .65;
}


/* =========================================================
   THE STAIRCASE
========================================================= */

#entrance .stairs {

    display: block !important;

    visibility: visible !important;

    opacity: 1 !important;

    position: absolute !important;

    left: 50% !important;

    /*
       أهم نقطة:
       السلم يبدأ من تحت الباب مباشرة
    */
    bottom: 0 !important;

    transform:
        translateX(-50%) !important;

    width: min(86vw, 1250px) !important;

    height: 275px !important;

    z-index: 20 !important;

    pointer-events: none;

    overflow: hidden;

    /*
       الضيق فوق
       العريض تحت
    */
    clip-path:
        polygon(
            31% 0%,
            69% 0%,
            100% 100%,
            0% 100%
        );

    background:
        linear-gradient(
            180deg,

            #604525 0%,

            #4a351f 18%,

            #35291e 42%,

            #211e1a 68%,

            #111718 100%
        );

    border-left:
        2px solid rgba(212,175,55,.42);

    border-right:
        2px solid rgba(212,175,55,.42);

    box-shadow:

        0 -20px 45px
        rgba(0,0,0,.40),

        -15px 0 30px
        rgba(212,175,55,.07),

        15px 0 30px
        rgba(212,175,55,.07);
}


/* =========================================================
   REAL STAIR STEPS
========================================================= */

#entrance .stairs::before {

    content: "";

    position: absolute;

    inset: 0;

    background:

        /*
          step 1
        */
        linear-gradient(
            to bottom,
            transparent 0,
            transparent 8%,
            rgba(218,181,83,.65) 8.4%,
            rgba(38,27,17,.95) 9.4%,

            transparent 9.8%,

            /*
              step 2
            */
            transparent 20%,
            rgba(212,175,55,.58) 20.4%,
            rgba(38,28,19,.96) 21.5%,

            transparent 22%,

            /*
              step 3
            */
            transparent 32%,
            rgba(212,175,55,.52) 32.4%,
            rgba(35,27,19,.97) 33.6%,

            transparent 34%,

            /*
              step 4
            */
            transparent 44%,
            rgba(212,175,55,.45) 44.4%,
            rgba(31,26,20,.98) 45.7%,

            transparent 46%,

            /*
              step 5
            */
            transparent 56%,
            rgba(212,175,55,.38) 56.4%,
            rgba(28,25,21,.98) 57.8%,

            transparent 58%,

            /*
              step 6
            */
            transparent 68%,
            rgba(212,175,55,.31) 68.4%,
            rgba(24,23,21,.98) 69.8%,

            transparent 70%,

            /*
              step 7
            */
            transparent 80%,
            rgba(212,175,55,.23) 80.4%,
            rgba(20,22,21,.99) 81.8%,

            transparent 82%
        );

    opacity: .95;
}


/* =========================================================
   STEP DEPTH / SIDE SHADOW
========================================================= */

#entrance .stairs::after {

    content: "";

    position: absolute;

    inset: 0;

    background:

        /*
          left shadow
        */
        linear-gradient(
            90deg,

            rgba(0,0,0,.72) 0%,

            rgba(0,0,0,.28) 12%,

            transparent 25%,

            transparent 75%,

            rgba(0,0,0,.28) 88%,

            rgba(0,0,0,.72) 100%
        ),

        /*
          gold coming from door
        */
        radial-gradient(
            ellipse at 50% 0%,

            rgba(255,220,120,.18),

            rgba(212,175,55,.06) 30%,

            transparent 62%
        ),

        /*
          fade toward services
        */
        linear-gradient(
            to bottom,

            transparent 55%,

            rgba(12,18,19,.25) 72%,

            rgba(10,17,19,.88) 100%
        );

    pointer-events: none;
}


/* =========================================================
   GOLDEN EDGE LIGHTS
========================================================= */


/* left glowing edge */

#entrance .stairs {

    box-shadow:

        inset 18px 0 22px
        rgba(212,175,55,.07),

        inset -18px 0 22px
        rgba(212,175,55,.07),

        0 -20px 42px
        rgba(212,175,55,.08),

        -14px 0 25px
        rgba(212,175,55,.10),

        14px 0 25px
        rgba(212,175,55,.10);
}


/* =========================================================
   STAIR CENTER PATH
========================================================= */

#entrance .stairs {

    isolation: isolate;
}


#entrance .stairs-glow {

    position: absolute;

    left: 50%;

    top: 0;

    transform:
        translateX(-50%);

    width: 25%;

    height: 100%;

    background:
        linear-gradient(
            180deg,

            rgba(255,220,120,.16),

            rgba(212,175,55,.06) 40%,

            transparent 80%
        );

    filter: blur(15px);

    opacity: .75;

    pointer-events: none;

    z-index: 3;
}


/* =========================================================
   GOLD LINES ALONG THE SIDES
========================================================= */

#entrance .stairs::marker {
    display: none;
}


/* =========================================================
   CONNECT STAIR TO DOOR
========================================================= */

#entrance #gateWrap::after {

    content: "";

    position: absolute;

    left: 50%;

    bottom: -48px;

    transform:
        translateX(-50%);

    width: 34%;

    height: 70px;

    background:
        linear-gradient(
            to bottom,

            rgba(255,220,120,.20),

            rgba(212,175,55,.08),

            transparent
        );

    filter: blur(12px);

    pointer-events: none;
}


/* =========================================================
   MERGE INTO NEXT SECTION
========================================================= */

#hall {

    position: relative !important;

    margin-top: -1px !important;

    background:
        linear-gradient(
            180deg,

            #17120e 0%,

            #161512 12%,

            #12191a 38%,

            #0e1719 70%,

            #0b1315 100%
        );

    overflow: hidden;
}


/* =========================================================
   SOFT COLOR BRIDGE
========================================================= */

#hall::before {

    content: "";

    position: absolute;

    top: 0;

    left: 0;

    right: 0;

    height: 150px;

    z-index: 2;

    pointer-events: none;

    background:
        linear-gradient(
            to bottom,

            #17120e 0%,

            rgba(23,18,14,.75) 22%,

            rgba(18,23,22,.50) 55%,

            rgba(14,21,23,0) 100%
        );
}


/* =========================================================
   GOLD LIGHT SPILL FROM STAIRS
========================================================= */

#hall .hall-entry-glow {

    z-index: 4;

    opacity: .65;

    background:
        radial-gradient(
            ellipse at 50% 0%,

            rgba(212,175,55,.16),

            rgba(212,175,55,.05) 32%,

            transparent 68%
        );

    filter: blur(10px);
}


/* =========================================================
   DESKTOP
========================================================= */

@media (min-width: 1200px) {

    #entrance #gateWrap {

        width: 32vw !important;

        height: 380px !important;

        bottom: 215px !important;
    }

    #entrance .stairs {

        width: min(84vw, 1250px) !important;

        height: 285px !important;
    }
}


/* =========================================================
   TABLET
========================================================= */

@media (max-width: 900px) {

    #entrance #gateWrap {

        width: 48vw !important;

        height: 350px !important;

        bottom: 190px !important;
    }

    #entrance .stairs {

        width: 100vw !important;

        height: 250px !important;

        clip-path:
            polygon(
                27% 0%,
                73% 0%,
                100% 100%,
                0% 100%
            );
    }
}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 600px) {

    #entrance {

        min-height: 690px !important;
    }

    #entrance #gateWrap {

        width: 66vw !important;

        height: 315px !important;

        bottom: 170px !important;
    }

    #entrance .stairs {

        width: 100vw !important;

        height: 220px !important;

        clip-path:
            polygon(
                20% 0%,
                80% 0%,
                100% 100%,
                0% 100%
            );
    }
}
/* =========================================================
   GU LIBRARY — FINAL STAIRS
   Built for the existing entrance — no image/background
========================================================= */

#entrance .temple-stairs {
    position: absolute;
    left: 50%;
    bottom: 0;

    width: 100%;
    height: 270px;

    transform: translateX(-50%);

    z-index: 18;
    pointer-events: none;

    overflow: visible;
}


/* =========================================================
   ALL STEPS
========================================================= */

#entrance .stair-step {
    position: absolute;

    left: 50%;

    height: 24px;

    transform: translateX(-50%);

    box-sizing: border-box;

    background:
        linear-gradient(
            to bottom,
            #4a3520 0%,
            #30251c 42%,
            #1b1a18 100%
        );

    border-top: 1px solid rgba(212,175,55,.42);

    border-bottom: 1px solid rgba(0,0,0,.72);

    box-shadow:
        0 5px 9px rgba(0,0,0,.38),

        inset 0 1px 0
        rgba(255,220,130,.08);
}


/* gold front edge */

#entrance .stair-top {
    position: absolute;

    left: 0;
    right: 0;
    top: 0;

    height: 2px;

    background:
        linear-gradient(
            90deg,
            transparent,
            rgba(212,175,55,.40) 18%,
            rgba(238,202,105,.68) 50%,
            rgba(212,175,55,.40) 82%,
            transparent
        );

    box-shadow:
        0 0 6px rgba(212,175,55,.16);
}


/* =========================================================
   FIRST 3 STEPS
   Small and close to the door
========================================================= */

/*
   IMPORTANT:
   أول درجة مش لازقة في الباب.
*/

#entrance .stair-1 {
    bottom: 226px;
    width: 27%;
    height: 20px;
    z-index: 10;
}


#entrance .stair-2 {
    bottom: 201px;
    width: 30%;
    height: 21px;
    z-index: 9;
}


#entrance .stair-3 {
    bottom: 175px;
    width: 34%;
    height: 22px;
    z-index: 8;
}


/* =========================================================
   MIDDLE STAIRS
========================================================= */

#entrance .stair-4 {
    bottom: 148px;
    width: 42%;
    height: 23px;
    z-index: 7;
}


#entrance .stair-5 {
    bottom: 120px;
    width: 51%;
    height: 24px;
    z-index: 6;
}


#entrance .stair-6 {
    bottom: 91px;
    width: 61%;
    height: 24px;
    z-index: 5;
}


/* =========================================================
   LOWER STAIRS
========================================================= */

#entrance .stair-7 {
    bottom: 62px;
    width: 72%;
    height: 24px;
    z-index: 4;
}


#entrance .stair-8 {
    bottom: 33px;
    width: 83%;
    height: 24px;
    z-index: 3;
}


#entrance .stair-9 {
    bottom: 4px;
    width: 93%;
    height: 24px;
    z-index: 2;
}


/* =========================================================
   FINAL FLOOR / LAST STEP
========================================================= */

#entrance .stair-10 {
    bottom: -22px;
    width: 100%;
    height: 26px;
    z-index: 1;

    background:
        linear-gradient(
            to bottom,
            #3b2c20,
            #211d19 60%,
            #15191a
        );
}


/* =========================================================
   SIDE LIGHTS
========================================================= */

#entrance .stairs-light {
    position: absolute;

    bottom: 0;

    width: 2px;
    height: 235px;

    background:
        linear-gradient(
            to bottom,
            rgba(255,220,125,.55),
            rgba(212,175,55,.30) 50%,
            transparent
        );

    box-shadow:
        0 0 8px rgba(212,175,55,.20);

    opacity: .65;

    z-index: 20;
}


#entrance .stairs-light-left {
    left: 7%;
}


#entrance .stairs-light-right {
    right: 7%;
}


/* =========================================================
   SOFT GOLD LIGHT UNDER THE DOOR
========================================================= */

#entrance .temple-stairs::before {
    content: "";

    position: absolute;

    left: 50%;
    top: 0;

    width: 25%;
    height: 110px;

    transform: translateX(-50%);

    background:
        radial-gradient(
            ellipse at center top,
            rgba(255,218,120,.16),
            rgba(212,175,55,.06) 45%,
            transparent 75%
        );

    filter: blur(8px);

    pointer-events: none;

    z-index: 25;
}
/* =========================================================
   KEEP GATE STABLE
========================================================= */

#entrance #gateWrap {
    position: absolute !important;

    left: 50% !important;
    top: 145px !important;

    bottom: auto !important;

    transform: translateX(-50%) !important;

    width: min(34vw, 620px) !important;
    height: 390px !important;

    z-index: 40 !important;
}
/* ===== STAIR WIDTH ONLY ===== */

/* أول درجة = عرض الباب بالضبط */
#entrance .stair-1 {
    width: min(34vw, 620px);
}

/* توسع تدريجي */
#entrance .stair-2 {
    width: min(39vw, 710px);
}

#entrance .stair-3 {
    width: min(44vw, 800px);
}

#entrance .stair-4 {
    width: min(50vw, 900px);
}

#entrance .stair-5 {
    width: min(57vw, 1030px);
}

#entrance .stair-6 {
    width: min(65vw, 1170px);
}

#entrance .stair-7 {
    width: min(73vw, 1310px);
}

#entrance .stair-8 {
    width: min(81vw, 1460px);
}

#entrance .stair-9 {
    width: min(90vw, 1620px);
}

#entrance .stair-10 {
    width: 100%;
}
/* =========================================================
   GAME STYLE EGYPTIAN CLOUDS
   Designed for the existing GU Library entrance
========================================================= */

#entrance .game-clouds {
    position: absolute;
    inset: 0;

    overflow: hidden;

    pointer-events: none;

    z-index: 3;
}


/* ---------------------------------------------------------
   CLOUD BASE
--------------------------------------------------------- */

#entrance .game-cloud {
    position: absolute;

    display: block;

    width: 260px;
    height: 42px;

    border-radius: 50%;

    background:
        linear-gradient(
            to bottom,
            rgba(93, 105, 130, .20),
            rgba(28, 39, 61, .08)
        );

    filter: blur(1px);

    opacity: .45;
}


/* cloud soft upper shapes */

#entrance .game-cloud::before,
#entrance .game-cloud::after {
    content: "";

    position: absolute;

    bottom: 8px;

    border-radius: 50%;

    background:
        linear-gradient(
            to bottom,
            rgba(105, 116, 139, .20),
            rgba(30, 41, 63, .07)
        );
}


/* left puff */

#entrance .game-cloud::before {
    left: 30px;

    width: 95px;
    height: 48px;
}


/* right puff */

#entrance .game-cloud::after {
    right: 35px;

    width: 115px;
    height: 55px;
}


/* =========================================================
   CLOUD POSITIONS
========================================================= */

#entrance .cloud-1 {
    top: 17%;
    left: -280px;

    transform: scale(.85);

    animation:
        cloudMoveOne 75s linear infinite;
}


#entrance .cloud-2 {
    top: 29%;
    left: -360px;

    transform: scale(.65);

    opacity: .30;

    animation:
        cloudMoveTwo 95s linear infinite;
}


#entrance .cloud-3 {
    top: 12%;
    left: -420px;

    transform: scale(1.15);

    opacity: .25;

    animation:
        cloudMoveThree 115s linear infinite;
}


#entrance .cloud-4 {
    top: 40%;
    left: -300px;

    transform: scale(.55);

    opacity: .22;

    animation:
        cloudMoveFour 105s linear infinite;
}


/* =========================================================
   MOVEMENT
   Very slow = game atmosphere
========================================================= */

@keyframes cloudMoveOne {

    from {
        transform:
            translateX(0)
            scale(.85);
    }

    to {
        transform:
            translateX(calc(100vw + 600px))
            scale(.85);
    }
}


@keyframes cloudMoveTwo {

    from {
        transform:
            translateX(0)
            scale(.65);
    }

    to {
        transform:
            translateX(calc(100vw + 700px))
            scale(.65);
    }
}


@keyframes cloudMoveThree {

    from {
        transform:
            translateX(0)
            scale(1.15);
    }

    to {
        transform:
            translateX(calc(100vw + 800px))
            scale(1.15);
    }
}


@keyframes cloudMoveFour {

    from {
        transform:
            translateX(0)
            scale(.55);
    }

    to {
        transform:
            translateX(calc(100vw + 650px))
            scale(.55);
    }
}
/* =========================================================
   REDUCE STAR DENSITY
========================================================= */

#entrance #dustLayer {
    opacity: .28;
}
/* =========================================================
   SLOW MOON MOVEMENT
========================================================= */

#entrance .sun-disc {
    animation: moonFloat 18s ease-in-out infinite alternate;
    transform-origin: center;
}


@keyframes moonFloat {

    0% {
        transform:
            translate(0, 0);
    }

    100% {
        transform:
            translate(18px, 8px);
    }
}
/* =========================================================
   STARS — ENTRANCE ONLY
========================================================= */

#entrance {
    position: relative;
    overflow: hidden;
}

#entrance #dustLayer {
    position: absolute;

    inset: 0;

    width: 100%;
    height: 100%;

    overflow: hidden;

    pointer-events: none;

    z-index: 4;

    opacity: .55;
}

/* النجوم الصغيرة تكون هادية */
#entrance #dustLayer span,
#entrance #dustLayer i,
#entrance #dustLayer b {
    opacity: .55;
}
/* =========================================================
   GAME MOON
========================================================= */

#entrance .sun-disc {

    position: absolute;

    width: 105px;
    height: 105px;

    left: 8%;
    top: 5%;

    border-radius: 50%;

    z-index: 8;

    background:
        radial-gradient(
            circle at 38% 35%,
            #fffde7 0%,
            #fff8c7 35%,
            #eadb91 68%,
            #b89b4a 100%
        );

    box-shadow:
        0 0 12px rgba(255,245,190,.75),
        0 0 35px rgba(255,225,120,.35),
        0 0 75px rgba(255,210,90,.15);

    animation:
        moonFloat 18s ease-in-out infinite alternate;
}


/* حركة بسيطة للقمر */

@keyframes moonFloat {

    from {
        transform:
            translate3d(0, 0, 0);
    }

    to {
        transform:
            translate3d(22px, 9px, 0);
    }
}
/* =========================================================
   CINEMATIC GAME CLOUDS
========================================================= */

#entrance .game-clouds {

    position: absolute;

    inset: 0;

    overflow: hidden;

    pointer-events: none;

    z-index: 5;
}


/* cloud */

#entrance .game-cloud {

    position: absolute;

    width: 300px;
    height: 45px;

    border-radius: 50%;

    background:
        linear-gradient(
            to bottom,
            rgba(116,125,148,.42),
            rgba(62,72,96,.20)
        );

    opacity: .75;

    filter: blur(2px);

    box-shadow:
        0 5px 18px
        rgba(15,22,40,.20);
}


/* cloud puffs */

#entrance .game-cloud::before {

    content: "";

    position: absolute;

    width: 120px;
    height: 55px;

    left: 35px;
    bottom: 7px;

    border-radius: 50%;

    background:
        rgba(125,135,158,.35);
}


#entrance .game-cloud::after {

    content: "";

    position: absolute;

    width: 145px;
    height: 65px;

    right: 30px;
    bottom: 5px;

    border-radius: 50%;

    background:
        rgba(105,116,140,.30);
}


/* =========================================================
   CLOUD POSITIONS
========================================================= */

#entrance .cloud-1 {

    top: 14%;
    left: -320px;

    transform: scale(.8);

    animation:
        cloudGameMove1 80s linear infinite;
}


#entrance .cloud-2 {

    top: 26%;
    left: -400px;

    transform: scale(.58);

    opacity: .55;

    animation:
        cloudGameMove2 105s linear infinite;
}


#entrance .cloud-3 {

    top: 9%;
    left: -500px;

    transform: scale(1.05);

    opacity: .42;

    animation:
        cloudGameMove3 120s linear infinite;
}


#entrance .cloud-4 {

    top: 38%;
    left: -350px;

    transform: scale(.5);

    opacity: .40;

    animation:
        cloudGameMove4 110s linear infinite;
}


/* =========================================================
   CLOUD MOVEMENT
========================================================= */

@keyframes cloudGameMove1 {

    from {
        transform:
            translateX(0)
            scale(.8);
    }

    to {
        transform:
            translateX(calc(100vw + 700px))
            scale(.8);
    }
}


@keyframes cloudGameMove2 {

    from {
        transform:
            translateX(0)
            scale(.58);
    }

    to {
        transform:
            translateX(calc(100vw + 800px))
            scale(.58);
    }
}


@keyframes cloudGameMove3 {

    from {
        transform:
            translateX(0)
            scale(1.05);
    }

    to {
        transform:
            translateX(calc(100vw + 900px))
            scale(1.05);
    }
}


@keyframes cloudGameMove4 {

    from {
        transform:
            translateX(0)
            scale(.5);
    }

    to {
        transform:
            translateX(calc(100vw + 750px))
            scale(.5);
    }
}
/* =========================================================
   GU LIBRARY — GAME NIGHT SKY
   CSS ONLY
========================================================= */

#entrance {
    position: relative;
    overflow: hidden;
    background: #050b18;
}

/* ---------------------------------------------------------
   SKY
--------------------------------------------------------- */

#entrance .sky {
    position: absolute;
    inset: 0;
    z-index: 0;

    background:
        radial-gradient(
            circle at 50% 18%,
            rgba(28, 48, 82, .45),
            transparent 38%
        ),
        linear-gradient(
            to bottom,
            #07101f 0%,
            #09172b 45%,
            #050b16 100%
        );
}


/* ---------------------------------------------------------
   MOON
--------------------------------------------------------- */

#entrance .sun-disc {
    position: absolute;

    left: 7%;
    top: 5%;

    width: 108px;
    height: 108px;

    z-index: 8;

    border-radius: 50%;

    background:
        radial-gradient(
            circle at 35% 30%,
            #fffde8 0%,
            #fff6bd 32%,
            #e8cf78 68%,
            #b48b32 100%
        );

    box-shadow:
        0 0 12px rgba(255, 238, 157, .95),
        0 0 32px rgba(255, 218, 100, .55),
        0 0 70px rgba(255, 201, 70, .25);

    animation:
        moonMove 20s ease-in-out infinite alternate;
}

@keyframes moonMove {
    from {
        transform: translate(0, 0);
    }

    to {
        transform: translate(22px, 9px);
    }
}


/* ---------------------------------------------------------
   MOON CRATERS
--------------------------------------------------------- */

#entrance .sun-disc::before,
#entrance .sun-disc::after {
    content: "";

    position: absolute;

    border-radius: 50%;

    background: rgba(150, 119, 54, .16);
}

#entrance .sun-disc::before {
    width: 18px;
    height: 18px;

    left: 24px;
    top: 28px;

    box-shadow:
        35px 15px 0 rgba(150,119,54,.13),
        18px 45px 0 rgba(150,119,54,.12);
}

#entrance .sun-disc::after {
    width: 10px;
    height: 10px;

    left: 62px;
    top: 20px;

    box-shadow:
        -32px 43px 0 rgba(150,119,54,.11),
        12px 55px 0 rgba(150,119,54,.10);
}


/* ---------------------------------------------------------
   CLOUD SYSTEM
--------------------------------------------------------- */

#entrance .game-clouds {
    position: absolute;
    inset: 0;

    z-index: 5;

    overflow: hidden;

    pointer-events: none;
}

#entrance .game-cloud {
    position: absolute;

    width: 300px;
    height: 38px;

    border-radius: 50%;

    background:
        linear-gradient(
            to bottom,
            rgba(88, 105, 133, .28),
            rgba(48, 62, 88, .12)
        );

    opacity: .7;

    filter: blur(2px);
}


/* cloud bumps */

#entrance .game-cloud::before {
    content: "";

    position: absolute;

    width: 115px;
    height: 52px;

    left: 35px;
    bottom: 5px;

    border-radius: 50%;

    background:
        rgba(92, 108, 137, .24);
}

#entrance .game-cloud::after {
    content: "";

    position: absolute;

    width: 130px;
    height: 58px;

    right: 30px;
    bottom: 3px;

    border-radius: 50%;

    background:
        rgba(83, 100, 128, .21);
}


/* ---------------------------------------------------------
   CLOUD POSITIONS
--------------------------------------------------------- */

#entrance .cloud-1 {
    top: 16%;
    left: -330px;

    animation:
        cloudOne 90s linear infinite;
}

#entrance .cloud-2 {
    top: 31%;
    left: -450px;

    transform: scale(.65);

    opacity: .5;

    animation:
        cloudTwo 110s linear infinite;
}

#entrance .cloud-3 {
    top: 10%;
    left: -500px;

    transform: scale(1.15);

    opacity: .4;

    animation:
        cloudThree 130s linear infinite;
}

#entrance .cloud-4 {
    top: 42%;
    left: -350px;

    transform: scale(.55);

    opacity: .35;

    animation:
        cloudFour 120s linear infinite;
}


/* ---------------------------------------------------------
   CLOUD MOVEMENT
--------------------------------------------------------- */

@keyframes cloudOne {
    from {
        transform: translateX(0);
    }

    to {
        transform: translateX(calc(100vw + 700px));
    }
}

@keyframes cloudTwo {
    from {
        transform: translateX(0) scale(.65);
    }

    to {
        transform: translateX(calc(100vw + 800px)) scale(.65);
    }
}

@keyframes cloudThree {
    from {
        transform: translateX(0) scale(1.15);
    }

    to {
        transform: translateX(calc(100vw + 900px)) scale(1.15);
    }
}

@keyframes cloudFour {
    from {
        transform: translateX(0) scale(.55);
    }

    to {
        transform: translateX(calc(100vw + 750px)) scale(.55);
    }
}


/* ---------------------------------------------------------
   STARS — ONLY FIRST PAGE
--------------------------------------------------------- */

#entrance #dustLayer {
    position: absolute;

    inset: 0;

    width: 100%;
    height: 100%;

    z-index: 4;

    pointer-events: none;

    opacity: .38;
}


/* ---------------------------------------------------------
   PYRAMIDS — KEEP THEM BEHIND EVERYTHING
--------------------------------------------------------- */

#entrance .pyramids-bg {
    position: absolute;

    left: 0;
    right: 0;
    bottom: 0;

    z-index: 6;

    pointer-events: none;
}


/* make background pyramids subtle */

#entrance .pyramid-bg {
    opacity: .45;
    filter: brightness(.65);
}


/* ---------------------------------------------------------
   LAYER ORDER
--------------------------------------------------------- */

#entrance .sky {
    z-index: 0;
}

#entrance .godrays,
#entrance .fog {
    z-index: 2;
}

#entrance .game-clouds {
    z-index: 5;
}

#entrance #dustLayer {
    z-index: 7;
}

#entrance .pyramids-bg {
    z-index: 8;
}

/* الباب والسلم يفضلوا فوق الخلفية */
#entrance .gate-wrap,
#entrance .gate-architrave,
#entrance .temple-stairs,
#entrance .pylon,
#entrance .obelisk {
    position: absolute;
}
/* =========================================================
   GU LIBRARY
   GAME-STYLE EGYPTIAN NIGHT SKY
   CLEAN BACKGROUND
========================================================= */


/* =========================================================
   ENTRANCE
========================================================= */

.entrance {
    position: relative;
    min-height: 100vh;
    overflow: hidden;

    background: #050b16;
}


/* =========================================================
   SKY
========================================================= */

.entrance .sky {
    position: absolute;
    inset: 0;

    z-index: 0;

    background:
        linear-gradient(
            to bottom,
            #07101f 0%,
            #0a172a 42%,
            #07101d 72%,
            #030812 100%
        );
}


/* =========================================================
   MOON
========================================================= */

.entrance .moon {
    position: absolute;

    left: 6vw;
    top: 35px;

    width: 115px;
    height: 115px;

    z-index: 5;

    border-radius: 50%;

    background:
        radial-gradient(
            circle at 35% 30%,
            #fffde9 0%,
            #fff5b7 30%,
            #f0d36d 58%,
            #c69b3d 82%,
            #9a7024 100%
        );

    box-shadow:
        0 0 12px rgba(255, 244, 174, .95),
        0 0 30px rgba(255, 222, 111, .7),
        0 0 65px rgba(255, 207, 77, .35);

    animation: moonFloat 18s ease-in-out infinite alternate;
}


/* =========================================================
   MOON CRATERS
========================================================= */

.moon-crater {
    position: absolute;

    border-radius: 50%;

    background: rgba(150, 116, 45, .13);
}


.crater-1 {
    width: 18px;
    height: 18px;

    left: 23px;
    top: 28px;
}


.crater-2 {
    width: 13px;
    height: 13px;

    left: 62px;
    top: 20px;
}


.crater-3 {
    width: 22px;
    height: 22px;

    left: 54px;
    top: 63px;
}


/* =========================================================
   MOON MOVEMENT
========================================================= */

@keyframes moonFloat {

    0% {
        transform: translate(0, 0);
    }

    50% {
        transform: translate(12px, 5px);
    }

    100% {
        transform: translate(25px, 9px);
    }
}


/* =========================================================
   STARS
========================================================= */

.entrance .stars {
    position: absolute;
    inset: 0;

    z-index: 2;

    pointer-events: none;
}


/* individual stars */

.entrance .stars i {
    position: absolute;

    width: 2px;
    height: 2px;

    border-radius: 50%;

    background: #e8dca7;

    box-shadow:
        0 0 4px rgba(255, 232, 150, .6);

    opacity: .55;

    animation: starTwinkle 4s ease-in-out infinite;
}


/* positions */

.entrance .stars i:nth-child(1) {
    left: 14%;
    top: 13%;
}

.entrance .stars i:nth-child(2) {
    left: 24%;
    top: 22%;
}

.entrance .stars i:nth-child(3) {
    left: 38%;
    top: 11%;
}

.entrance .stars i:nth-child(4) {
    left: 52%;
    top: 19%;
}

.entrance .stars i:nth-child(5) {
    left: 64%;
    top: 9%;
}

.entrance .stars i:nth-child(6) {
    left: 74%;
    top: 24%;
}

.entrance .stars i:nth-child(7) {
    left: 86%;
    top: 15%;
}

.entrance .stars i:nth-child(8) {
    left: 92%;
    top: 35%;
}

.entrance .stars i:nth-child(9) {
    left: 31%;
    top: 36%;
}

.entrance .stars i:nth-child(10) {
    left: 46%;
    top: 30%;
}

.entrance .stars i:nth-child(11) {
    left: 59%;
    top: 39%;
}

.entrance .stars i:nth-child(12) {
    left: 80%;
    top: 42%;
}

.entrance .stars i:nth-child(13) {
    left: 10%;
    top: 43%;
}


@keyframes starTwinkle {

    0%,
    100% {
        opacity: .25;
        transform: scale(.8);
    }

    50% {
        opacity: .8;
        transform: scale(1.3);
    }
}


/* =========================================================
   CLOUDS
========================================================= */

.entrance .clouds {
    position: absolute;
    inset: 0;

    z-index: 3;

    overflow: hidden;

    pointer-events: none;
}


/* cloud */

.entrance .cloud {
    position: absolute;

    width: 270px;
    height: 32px;

    border-radius: 50%;

    background:
        radial-gradient(
            ellipse,
            rgba(104, 119, 146, .20),
            rgba(72, 87, 113, .08) 65%,
            transparent 100%
        );

    filter: blur(2px);

    opacity: .65;
}


/* cloud shapes */

.entrance .cloud::before,
.entrance .cloud::after {
    content: "";

    position: absolute;

    border-radius: 50%;

    background: rgba(91, 106, 133, .15);
}


.entrance .cloud::before {
    width: 110px;
    height: 48px;

    left: 30px;
    bottom: 3px;
}


.entrance .cloud::after {
    width: 125px;
    height: 52px;

    right: 25px;
    bottom: 2px;
}


/* cloud positions */

.cloud-1 {
    top: 14%;
    left: -320px;

    animation:
        cloudMove1 85s linear infinite;
}


.cloud-2 {
    top: 29%;
    left: -400px;

    transform: scale(.72);

    opacity: .45 !important;

    animation:
        cloudMove2 105s linear infinite;
}


.cloud-3 {
    top: 43%;
    left: -350px;

    transform: scale(.55);

    opacity: .35 !important;

    animation:
        cloudMove3 120s linear infinite;
}


/* cloud movement */

@keyframes cloudMove1 {

    from {
        transform: translateX(0);
    }

    to {
        transform: translateX(calc(100vw + 650px));
    }
}


@keyframes cloudMove2 {

    from {
        transform: translateX(0) scale(.72);
    }

    to {
        transform: translateX(calc(100vw + 700px)) scale(.72);
    }
}


@keyframes cloudMove3 {

    from {
        transform: translateX(0) scale(.55);
    }

    to {
        transform: translateX(calc(100vw + 650px)) scale(.55);
    }
}


/* =========================================================
   PYRAMIDS
========================================================= */

.entrance .pyramids-bg {
    position: absolute;

    left: 0;
    right: 0;
    bottom: 0;

    height: 32%;

    z-index: 4;

    pointer-events: none;
}


/* =========================================================
   KEEP PYRAMIDS DARK AND FAR AWAY
========================================================= */

.entrance .pyramid-bg {
    opacity: .35;
    filter: brightness(.45);
}


/* =========================================================
   IMPORTANT:
   BACKGROUND MUST STAY BEHIND TEMPLE
========================================================= */

.entrance .obelisk,
.entrance .pylon,
.entrance .gate-architrave,
.entrance .gate-wrap,
.entrance .stairs {
    z-index: 10;
}
/* =========================================================
   REMOVE OLD DARK MOON
========================================================= */

.entrance .sun-disc,
.entrance > .sun-disc,
#entrance .sun-disc {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    pointer-events: none !important;
}
/* =========================================================
   REMOVE OLD MOON COMPLETELY
========================================================= */

.sun-disc,
#entrance .sun-disc,
.entrance .sun-disc {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    width: 0 !important;
    height: 0 !important;
    background: none !important;
    box-shadow: none !important;
    pointer-events: none !important;
}


/* =========================================================
   ONLY USE THE NEW MOON
========================================================= */

#entrance .moon {
    position: absolute;
    left: 6vw;
    top: 35px;

    width: 115px;
    height: 115px;

    display: block;

    border-radius: 50%;

    background:
        radial-gradient(
            circle at 35% 30%,
            #fffde9 0%,
            #fff5b7 30%,
            #f0d36d 58%,
            #c69b3d 82%,
            #9a7024 100%
        );

    opacity: 1;

    z-index: 5;

    box-shadow:
        0 0 12px rgba(255, 244, 174, .95),
        0 0 30px rgba(255, 222, 111, .7),
        0 0 65px rgba(255, 207, 77, .35);

    animation: moonFloat 18s ease-in-out infinite alternate;
}


@keyframes moonFloat {

    0% {
        transform: translate(0, 0);
    }

    50% {
        transform: translate(12px, 5px);
    }

    100% {
        transform: translate(25px, 9px);
    }
}
/* =========================================================
   GU LIBRARY — FINAL NIGHT FIX
   DO NOT DELETE OLD CSS
   THIS OVERRIDES THE OLD DESIGN
========================================================= */


/* ---------- NIGHT SKY ---------- */

#entrance,
.entrance {
    position: relative !important;
    overflow: hidden !important;

    background:
        linear-gradient(
            180deg,
            #07101f 0%,
            #091529 40%,
            #07101d 70%,
            #040911 100%
        ) !important;
}


#entrance .sky,
.entrance .sky {
    position: absolute !important;
    inset: 0 !important;
    z-index: 0 !important;

    background:
        radial-gradient(
            ellipse 75% 50% at 50% 18%,
            rgba(31,52,88,.55),
            rgba(14,27,50,.55) 42%,
            rgba(5,12,24,.92) 78%,
            #030710 100%
        ) !important;
}


/* =========================================================
   DELETE OLD BLACK MOON
========================================================= */

.sun-disc,
#entrance .sun-disc,
.entrance .sun-disc {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;

    width: 0 !important;
    height: 0 !important;

    background: none !important;
    box-shadow: none !important;

    pointer-events: none !important;
}


/* =========================================================
   IMPORTANT:
   DISABLE THE SECOND MOON CREATED BY CSS
========================================================= */

#entrance::before,
#entrance::after,
.entrance::before,
.entrance::after {
    content: none !important;
    display: none !important;
}


/* =========================================================
   REAL MOON FROM YOUR HTML
========================================================= */

#entrance .moon,
.entrance .moon {
    position: absolute !important;

    left: 6vw !important;
    top: 35px !important;

    width: 115px !important;
    height: 115px !important;

    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;

    border-radius: 50% !important;

    z-index: 8 !important;

    background:
        radial-gradient(
            circle at 35% 30%,
            #fffef0 0%,
            #fff7ca 30%,
            #f0d87d 60%,
            #d1ad4d 82%,
            #a47b29 100%
        ) !important;

    box-shadow:
        0 0 14px rgba(255,245,190,.85),
        0 0 32px rgba(255,225,120,.42),
        0 0 70px rgba(255,210,100,.16) !important;

    animation: finalMoonMove 20s ease-in-out infinite alternate !important;
}


@keyframes finalMoonMove {

    from {
        transform: translate3d(0,0,0);
    }

    to {
        transform: translate3d(18px,7px,0);
    }
}


/* ---------- MOON CRATERS ---------- */

#entrance .moon-crater,
.entrance .moon-crater {
    position: absolute !important;

    border-radius: 50% !important;

    background: rgba(145,115,50,.14) !important;

    pointer-events: none !important;
}


#entrance .crater-1,
.entrance .crater-1 {
    width: 18px !important;
    height: 18px !important;

    left: 23px !important;
    top: 28px !important;
}


#entrance .crater-2,
.entrance .crater-2 {
    width: 13px !important;
    height: 13px !important;

    left: 62px !important;
    top: 20px !important;
}


#entrance .crater-3,
.entrance .crater-3 {
    width: 22px !important;
    height: 22px !important;

    left: 54px !important;
    top: 63px !important;
}


/* =========================================================
   REMOVE EXTRA STAR SYSTEMS
========================================================= */

#entrance .sky::before,
.entrance .sky::before,

#entrance .skyline-silhouette::before,
.entrance .skyline-silhouette::before {
    display: none !important;
    content: none !important;
}


/* =========================================================
   USE ONLY YOUR HTML STARS
========================================================= */

#entrance .stars,
.entrance .stars {
    position: absolute !important;

    inset: 0 !important;

    z-index: 6 !important;

    pointer-events: none !important;

    opacity: .42 !important;
}


#entrance .stars i,
.entrance .stars i {
    width: 2px !important;
    height: 2px !important;

    background: #e9dfb0 !important;

    box-shadow:
        0 0 3px rgba(255,235,160,.35) !important;

    opacity: .40 !important;

    animation: finalStarTwinkle 6s ease-in-out infinite !important;
}


@keyframes finalStarTwinkle {

    0%,
    100% {
        opacity: .25;
        transform: scale(.8);
    }

    50% {
        opacity: .55;
        transform: scale(1.1);
    }
}


/* =========================================================
   SOFT GAME CLOUDS
========================================================= */

#entrance .clouds,
.entrance .clouds {
    position: absolute !important;

    inset: 0 !important;

    z-index: 4 !important;

    overflow: hidden !important;

    pointer-events: none !important;
}


#entrance .cloud,
.entrance .cloud {
    position: absolute !important;

    width: 280px !important;
    height: 34px !important;

    border-radius: 50% !important;

    background:
        radial-gradient(
            ellipse,
            rgba(110,125,150,.15),
            rgba(70,85,110,.06) 65%,
            transparent 100%
        ) !important;

    filter: blur(2px) !important;

    opacity: .40 !important;
}


#entrance .cloud::before,
#entrance .cloud::after,
.entrance .cloud::before,
.entrance .cloud::after {
    content: "" !important;

    position: absolute !important;

    border-radius: 50% !important;

    background: rgba(105,120,145,.09) !important;
}


#entrance .cloud::before,
.entrance .cloud::before {
    width: 110px !important;
    height: 45px !important;

    left: 30px !important;
    bottom: 2px !important;
}


#entrance .cloud::after,
.entrance .cloud::after {
    width: 125px !important;
    height: 50px !important;

    right: 25px !important;
    bottom: 2px !important;
}


/* ---------- CLOUD POSITIONS ---------- */

#entrance .cloud-1,
.entrance .cloud-1 {
    top: 16% !important;
    left: -320px !important;

    animation: finalCloud1 95s linear infinite !important;
}


#entrance .cloud-2,
.entrance .cloud-2 {
    top: 29% !important;
    left: -420px !important;

    transform: scale(.7);

    opacity: .25 !important;

    animation: finalCloud2 115s linear infinite !important;
}


#entrance .cloud-3,
.entrance .cloud-3 {
    top: 42% !important;
    left: -350px !important;

    transform: scale(.55);

    opacity: .20 !important;

    animation: finalCloud3 125s linear infinite !important;
}


@keyframes finalCloud1 {

    from {
        transform: translateX(0);
    }

    to {
        transform: translateX(calc(100vw + 650px));
    }
}


@keyframes finalCloud2 {

    from {
        transform: translateX(0) scale(.7);
    }

    to {
        transform: translateX(calc(100vw + 750px)) scale(.7);
    }
}


@keyframes finalCloud3 {

    from {
        transform: translateX(0) scale(.55);
    }

    to {
        transform: translateX(calc(100vw + 700px)) scale(.55);
    }
}


/* =========================================================
   DARK NIGHT FOG
========================================================= */

#entrance .fog,
.entrance .fog {
    background:
        radial-gradient(
            ellipse at center,
            rgba(100,125,165,.04),
            rgba(40,55,80,.02) 45%,
            transparent 72%
        ) !important;
}
/* =========================================================
   GU LIBRARY — MOVING NIGHT SKY
   SOFT STARS + SLOW CLOUDS
   DO NOT DELETE OLD CSS
========================================================= */


/* =========================================================
   STARS
========================================================= */

#entrance .stars,
.entrance .stars {
    position: absolute !important;

    inset: 0 !important;

    z-index: 6 !important;

    pointer-events: none !important;

    opacity: .45 !important;
}


/* النجوم الصغيرة */

#entrance .stars i,
.entrance .stars i {
    position: absolute !important;

    width: 2px !important;
    height: 2px !important;

    border-radius: 50% !important;

    background: #fff4c4 !important;

    box-shadow:
        0 0 4px rgba(255,235,160,.55) !important;

    opacity: .35 !important;

    animation:
        nightStar 5s ease-in-out infinite !important;
}


/* اختلاف بسيط في توقيت النجوم */

#entrance .stars i:nth-child(2n),
.entrance .stars i:nth-child(2n) {
    animation-delay: 1.5s !important;
}

#entrance .stars i:nth-child(3n),
.entrance .stars i:nth-child(3n) {
    animation-delay: 3s !important;
}


@keyframes nightStar {

    0%,
    100% {
        opacity: .18;
        transform: scale(.75);
    }

    50% {
        opacity: .65;
        transform: scale(1.15);
    }
}


/* =========================================================
   CLOUD SKY
========================================================= */

#entrance .clouds,
.entrance .clouds {
    position: absolute !important;

    inset: 0 !important;

    z-index: 4 !important;

    overflow: hidden !important;

    pointer-events: none !important;
}


/* =========================================================
   CLOUD
========================================================= */

#entrance .cloud,
.entrance .cloud {
    position: absolute !important;

    width: 320px !important;
    height: 38px !important;

    border-radius: 50% !important;

    background:
        radial-gradient(
            ellipse at center,

            rgba(130,145,170,.18) 0%,

            rgba(90,105,135,.10) 45%,

            rgba(40,55,80,.03) 72%,

            transparent 100%
        ) !important;

    filter: blur(3px) !important;

    opacity: .45 !important;
}


/* cloud upper shapes */

#entrance .cloud::before,
#entrance .cloud::after,
.entrance .cloud::before,
.entrance .cloud::after {
    content: "" !important;

    position: absolute !important;

    border-radius: 50% !important;

    background:
        rgba(115,130,155,.12) !important;
}


#entrance .cloud::before,
.entrance .cloud::before {
    left: 35px;
    bottom: 2px;

    width: 120px;
    height: 52px;
}


#entrance .cloud::after,
.entrance .cloud::after {
    right: 30px;
    bottom: 0;

    width: 140px;
    height: 58px;
}


/* =========================================================
   CLOUD 1 — LARGE / FAR
========================================================= */

#entrance .cloud-1,
.entrance .cloud-1 {
    top: 15% !important;

    left: -380px !important;

    transform: scale(.9);

    opacity: .38 !important;

    animation:
        movingCloud1 100s linear infinite !important;
}


/* =========================================================
   CLOUD 2 — SMALLER
========================================================= */

#entrance .cloud-2,
.entrance .cloud-2 {
    top: 28% !important;

    left: -500px !important;

    transform: scale(.62);

    opacity: .26 !important;

    animation:
        movingCloud2 125s linear infinite !important;
}


/* =========================================================
   CLOUD 3 — VERY FAR
========================================================= */

#entrance .cloud-3,
.entrance .cloud-3 {
    top: 11% !important;

    left: -600px !important;

    transform: scale(1.15);

    opacity: .20 !important;

    animation:
        movingCloud3 145s linear infinite !important;
}


/* =========================================================
   CLOUD 4 — LOW / VERY SOFT
========================================================= */

#entrance .cloud-4,
.entrance .cloud-4 {
    top: 40% !important;

    left: -450px !important;

    transform: scale(.5);

    opacity: .16 !important;

    animation:
        movingCloud4 135s linear infinite !important;
}


/* =========================================================
   MOVEMENT
========================================================= */

@keyframes movingCloud1 {

    from {
        transform:
            translateX(0)
            scale(.9);
    }

    to {
        transform:
            translateX(calc(100vw + 800px))
            scale(.9);
    }
}


@keyframes movingCloud2 {

    from {
        transform:
            translateX(0)
            scale(.62);
    }

    to {
        transform:
            translateX(calc(100vw + 900px))
            scale(.62);
    }
}


@keyframes movingCloud3 {

    from {
        transform:
            translateX(0)
            scale(1.15);
    }

    to {
        transform:
            translateX(calc(100vw + 1000px))
            scale(1.15);
    }
}


@keyframes movingCloud4 {

    from {
        transform:
            translateX(0)
            scale(.5);
    }

    to {
        transform:
            translateX(calc(100vw + 850px))
            scale(.5);
    }
}


/* =========================================================
   KEEP THE TEMPLE CLEAR
========================================================= */

/*
   الغيوم والنجوم تفضل خلف المعبد
*/

#entrance .pyramids-bg {
    z-index: 8 !important;
}

#entrance .gate-wrap,
#entrance #gateWrap,
#entrance .temple-stairs,
#entrance .stairs,
#entrance .pylon,
#entrance .obelisk {
    z-index: 20 !important;
}
/* =========================================================
   GU LIBRARY — CINEMATIC MOVING NIGHT SKY
   ADD THIS AT THE VERY END OF style.css
========================================================= */


/* =========================================================
   SKY ATMOSPHERE
========================================================= */

#entrance,
.entrance {
    position: relative !important;
    overflow: hidden !important;
    isolation: isolate;
}


/* نخلي السماء هادئة وعميقة */

#entrance .sky,
.entrance .sky {
    background:
        radial-gradient(
            ellipse 75% 55% at 50% 20%,
            rgba(31, 51, 86, .72) 0%,
            rgba(16, 29, 53, .78) 38%,
            rgba(7, 15, 29, .94) 70%,
            #030811 100%
        ) !important;
}


/* =========================================================
   STARS — NEW CLEAN LAYER
========================================================= */

#entrance .sky::before,
.entrance .sky::before {

    content: "";

    position: absolute;

    inset: 0;

    pointer-events: none;

    z-index: 1;

    background-image:

        radial-gradient(
            circle,
            rgba(255, 247, 205, .95) 0 1px,
            transparent 1.8px
        ),

        radial-gradient(
            circle,
            rgba(210, 225, 255, .75) 0 1px,
            transparent 1.7px
        ),

        radial-gradient(
            circle,
            rgba(255, 255, 255, .65) 0 1px,
            transparent 1.8px
        );

    background-size:
        155px 145px,
        235px 205px,
        315px 275px;

    background-position:
        20px 10px,
        80px 45px,
        130px 100px;

    opacity: .38;

    animation:
        starsDrift 70s linear infinite;
}


@keyframes starsDrift {

    from {
        background-position:
            20px 10px,
            80px 45px,
            130px 100px;
    }

    to {
        background-position:
            80px 35px,
            140px 85px,
            210px 160px;
    }
}


/* =========================================================
   EXTRA STAR GLOW
========================================================= */

#entrance .sky::after,
.entrance .sky::after {

    content: "";

    position: absolute;

    inset: 0;

    pointer-events: none;

    z-index: 2;

    background:

        radial-gradient(
            circle at 18% 24%,
            rgba(255, 230, 150, .75) 0 1px,
            transparent 3px
        ),

        radial-gradient(
            circle at 42% 14%,
            rgba(255, 240, 180, .7) 0 1px,
            transparent 3px
        ),

        radial-gradient(
            circle at 72% 20%,
            rgba(255, 235, 160, .65) 0 1px,
            transparent 3px
        ),

        radial-gradient(
            circle at 88% 31%,
            rgba(255, 240, 180, .6) 0 1px,
            transparent 3px
        );

    animation:
        starPulse 5s ease-in-out infinite alternate;
}


@keyframes starPulse {

    from {
        opacity: .35;
    }

    to {
        opacity: .85;
    }
}


/* =========================================================
   CLOUD SYSTEM
========================================================= */

#entrance .clouds,
.entrance .clouds {

    position: absolute !important;

    inset: 0 !important;

    overflow: hidden !important;

    pointer-events: none !important;

    z-index: 5 !important;
}


/* =========================================================
   LARGE CINEMATIC CLOUD
========================================================= */

#entrance .cloud,
.entrance .cloud {

    position: absolute !important;

    width: 420px !important;

    height: 70px !important;

    border-radius: 50% !important;

    background:

        radial-gradient(
            ellipse at center,

            rgba(115, 132, 160, .34) 0%,

            rgba(80, 98, 130, .23) 38%,

            rgba(45, 61, 91, .12) 65%,

            transparent 100%
        ) !important;

    filter: blur(5px) !important;

    opacity: .65 !important;

    will-change: transform;
}


/* =========================================================
   CLOUD VOLUME
========================================================= */

#entrance .cloud::before,
#entrance .cloud::after,
.entrance .cloud::before,
.entrance .cloud::after {

    content: "";

    position: absolute;

    border-radius: 50%;

    background:
        radial-gradient(
            ellipse,
            rgba(130, 145, 170, .30),
            rgba(65, 82, 110, .12) 65%,
            transparent 100%
        );
}


#entrance .cloud::before,
.entrance .cloud::before {

    width: 190px;

    height: 85px;

    left: 35px;

    bottom: 10px;
}


#entrance .cloud::after,
.entrance .cloud::after {

    width: 230px;

    height: 105px;

    right: 20px;

    bottom: 5px;
}


/* =========================================================
   CLOUD 1 — BIG / CLOSE
========================================================= */

#entrance .cloud-1,
.entrance .cloud-1 {

    top: 12% !important;

    left: -500px !important;

    width: 500px !important;

    height: 85px !important;

    opacity: .72 !important;

    animation:
        cinematicCloud1 95s linear infinite !important;
}


/* =========================================================
   CLOUD 2 — MIDDLE
========================================================= */

#entrance .cloud-2,
.entrance .cloud-2 {

    top: 27% !important;

    left: -600px !important;

    transform: scale(.72);

    opacity: .48 !important;

    animation:
        cinematicCloud2 120s linear infinite !important;
}


/* =========================================================
   CLOUD 3 — FAR / HUGE
========================================================= */

#entrance .cloud-3,
.entrance .cloud-3 {

    top: 8% !important;

    left: -700px !important;

    transform: scale(1.25);

    opacity: .35 !important;

    animation:
        cinematicCloud3 145s linear infinite !important;
}


/* =========================================================
   CLOUD 4 — LOW
========================================================= */

#entrance .cloud-4,
.entrance .cloud-4 {

    top: 40% !important;

    left: -500px !important;

    transform: scale(.60);

    opacity: .28 !important;

    animation:
        cinematicCloud4 130s linear infinite !important;
}


/* =========================================================
   CLOUD MOVEMENT
========================================================= */

@keyframes cinematicCloud1 {

    0% {
        transform:
            translateX(0)
            scale(1);
    }

    100% {
        transform:
            translateX(calc(100vw + 1100px))
            scale(1);
    }
}


@keyframes cinematicCloud2 {

    0% {
        transform:
            translateX(0)
            scale(.72);
    }

    100% {
        transform:
            translateX(calc(100vw + 1200px))
            scale(.72);
    }
}


@keyframes cinematicCloud3 {

    0% {
        transform:
            translateX(0)
            scale(1.25);
    }

    100% {
        transform:
            translateX(calc(100vw + 1300px))
            scale(1.25);
    }
}


@keyframes cinematicCloud4 {

    0% {
        transform:
            translateX(0)
            scale(.60);
    }

    100% {
        transform:
            translateX(calc(100vw + 1100px))
            scale(.60);
    }
}


/* =========================================================
   MOON MUST STAY ABOVE CLOUDS
========================================================= */

#entrance .moon,
.entrance .moon {

    z-index: 10 !important;

}


/* =========================================================
   TEMPLE MUST STAY ABOVE SKY
========================================================= */

#entrance .pyramids-bg,
.entrance .pyramids-bg {

    z-index: 8 !important;

}


#entrance #gateWrap,
#entrance .gate-wrap,
#entrance .gate-architrave,
#entrance .temple-stairs,
#entrance .stairs,
#entrance .pylon,
#entrance .obelisk,
.entrance #gateWrap,
.entrance .gate-wrap,
.entrance .temple-stairs,
.entrance .stairs {

    z-index: 20 !important;

}


/* =========================================================
   REDUCE OLD STAR LAYERS
   حتى لا تتضاعف النجوم
========================================================= */

#entrance #dustLayer,
.entrance #dustLayer {

    opacity: .12 !important;

}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 600px) {

    #entrance .cloud,
    .entrance .cloud {

        width: 300px !important;

        height: 55px !important;
    }


    #entrance .cloud-1,
    .entrance .cloud-1 {

        width: 360px !important;
    }


    #entrance .cloud-3,
    .entrance .cloud-3 {

        transform: scale(.9);
    }

}
/* ============================================================
   🌙 MOVING CLOUDS + DENSE STARS
   ضيف الكود ده في آخر ملف CSS
============================================================ */


/* ------------------------------------------------------------
   SKY LAYERS
------------------------------------------------------------ */

.entrance .sky {
  position: relative;
  overflow: hidden;
}


/* ------------------------------------------------------------
   ☁️ LARGE CLEAR MOVING CLOUDS
------------------------------------------------------------ */

.entrance .sky::before {
  content: "";

  position: absolute;
  inset: -20% -30%;

  z-index: 1;
  pointer-events: none;

  background:

    /* Large cloud mass 1 */
    radial-gradient(
      ellipse 320px 95px at 12% 32%,
      rgba(135, 155, 190, .72) 0%,
      rgba(90, 115, 155, .58) 38%,
      rgba(45, 65, 100, .28) 65%,
      transparent 76%
    ),

    /* Large cloud mass 2 */
    radial-gradient(
      ellipse 420px 120px at 38% 20%,
      rgba(150, 170, 205, .68) 0%,
      rgba(95, 120, 160, .52) 38%,
      rgba(45, 65, 100, .25) 68%,
      transparent 78%
    ),

    /* Large cloud mass 3 */
    radial-gradient(
      ellipse 360px 105px at 68% 30%,
      rgba(140, 165, 205, .7) 0%,
      rgba(85, 110, 150, .5) 40%,
      rgba(35, 55, 90, .22) 68%,
      transparent 78%
    ),

    /* Large cloud mass 4 */
    radial-gradient(
      ellipse 500px 130px at 88% 17%,
      rgba(155, 175, 210, .7) 0%,
      rgba(90, 115, 155, .5) 40%,
      rgba(40, 60, 95, .22) 70%,
      transparent 80%
    ),

    /* Lower clouds */
    radial-gradient(
      ellipse 450px 100px at 25% 58%,
      rgba(100, 125, 165, .55),
      rgba(50, 70, 105, .3) 55%,
      transparent 78%
    ),

    radial-gradient(
      ellipse 500px 115px at 75% 55%,
      rgba(110, 135, 175, .55),
      rgba(50, 70, 105, .28) 55%,
      transparent 78%
    );

  background-size:
    150% 100%;

  opacity: .88;

  animation:
    cloudsDriftSlow 70s linear infinite;

  will-change: transform;
}


/* ------------------------------------------------------------
   ☁️ SECOND CLOUD LAYER
   أسرع شوية وتعطي إحساس بالعمق
------------------------------------------------------------ */

.entrance .sky::after {
  content: "";

  position: absolute;
  inset: -15% -40%;

  z-index: 2;
  pointer-events: none;

  background:

    radial-gradient(
      ellipse 230px 70px at 8% 45%,
      rgba(180, 195, 220, .6),
      rgba(90, 115, 155, .35) 55%,
      transparent 75%
    ),

    radial-gradient(
      ellipse 300px 80px at 30% 34%,
      rgba(175, 195, 225, .55),
      rgba(85, 110, 150, .3) 55%,
      transparent 75%
    ),

    radial-gradient(
      ellipse 260px 75px at 55% 48%,
      rgba(170, 190, 220, .58),
      rgba(80, 105, 145, .28) 55%,
      transparent 75%
    ),

    radial-gradient(
      ellipse 340px 90px at 82% 38%,
      rgba(180, 200, 230, .6),
      rgba(85, 110, 150, .3) 55%,
      transparent 76%
    );

  opacity: .75;

  animation:
    cloudsDriftFast 42s linear infinite;

  will-change: transform;
}


/* ------------------------------------------------------------
   ☁️ CLOUD MOVEMENT
------------------------------------------------------------ */

@keyframes cloudsDriftSlow {

  0% {
    transform: translateX(-8%);
  }

  50% {
    transform: translateX(8%);
  }

  100% {
    transform: translateX(-8%);
  }

}


@keyframes cloudsDriftFast {

  0% {
    transform: translateX(12%);
  }

  50% {
    transform: translateX(-12%);
  }

  100% {
    transform: translateX(12%);
  }

}


/* ------------------------------------------------------------
   ⭐ MANY STARS
------------------------------------------------------------ */

.entrance .skyline-silhouette::before {
  content: "";

  position: absolute;

  inset: -100vh -50vw;

  z-index: 5;

  pointer-events: none;

  background-image:

    /* Tiny stars */
    radial-gradient(
      circle,
      rgba(255,255,255,.95) 0 1px,
      transparent 1.5px
    ),

    /* Blue stars */
    radial-gradient(
      circle,
      rgba(190,215,255,.9) 0 1.2px,
      transparent 1.8px
    ),

    /* Golden stars */
    radial-gradient(
      circle,
      rgba(255,225,150,.9) 0 1px,
      transparent 1.7px
    ),

    /* Very tiny stars */
    radial-gradient(
      circle,
      rgba(255,255,255,.75) 0 .7px,
      transparent 1.2px
    );

  background-size:
    95px 85px,
    145px 125px,
    190px 165px,
    65px 70px;

  background-position:
    10px 20px,
    40px 60px,
    90px 30px,
    25px 100px;

  opacity: .8;

  animation:
    starsDrift 120s linear infinite,
    starsTwinkle 5s ease-in-out infinite alternate;

}


/* ------------------------------------------------------------
   ✨ STAR MOVEMENT
------------------------------------------------------------ */

@keyframes starsDrift {

  from {
    transform: translate3d(0, 0, 0);
  }

  to {
    transform: translate3d(-180px, 70px, 0);
  }

}


@keyframes starsTwinkle {

  0% {
    opacity: .55;
  }

  50% {
    opacity: .9;
  }

  100% {
    opacity: .65;
  }

}


/* ------------------------------------------------------------
   ✨ BRIGHTER BIG STARS
------------------------------------------------------------ */

.entrance .skyline-silhouette::after {
  content: "";

  position: absolute;

  inset: 0;

  z-index: 6;

  pointer-events: none;

  background:

    radial-gradient(
      circle at 18% 18%,
      rgba(255,255,255,1) 0 2px,
      rgba(190,215,255,.7) 3px,
      transparent 7px
    ),

    radial-gradient(
      circle at 37% 12%,
      rgba(255,230,170,1) 0 2px,
      rgba(255,220,150,.55) 3px,
      transparent 7px
    ),

    radial-gradient(
      circle at 61% 24%,
      rgba(255,255,255,1) 0 1.8px,
      rgba(190,215,255,.6) 3px,
      transparent 7px
    ),

    radial-gradient(
      circle at 79% 14%,
      rgba(255,255,255,1) 0 2px,
      rgba(200,220,255,.6) 3px,
      transparent 7px
    ),

    radial-gradient(
      circle at 91% 34%,
      rgba(255,225,160,1) 0 2px,
      rgba(255,220,150,.5) 3px,
      transparent 7px
    );

  opacity: .9;

  animation:
    bigStarsPulse 3.5s ease-in-out infinite alternate;

}


@keyframes bigStarsPulse {

  from {
    opacity: .55;
    transform: scale(.98);
  }

  to {
    opacity: 1;
    transform: scale(1.02);
  }

}


/* ------------------------------------------------------------
   🌙 KEEP MOON ABOVE CLOUDS
------------------------------------------------------------ */

.entrance::before {
  z-index: 10 !important;
}

.entrance::after {
  z-index: 11 !important;
}


/* ------------------------------------------------------------
   🏛️ KEEP TEMPLE ABOVE SKY EFFECTS
------------------------------------------------------------ */

.entrance .gate-wrap,
.entrance .gate-architrave,
.entrance .pylon,
.entrance .stairs,
.entrance .statue,
.entrance .hero-title {
  position: relative;
  z-index: 15;
}


/* ------------------------------------------------------------
   🌌 KEEP SKY EFFECTS BEHIND TEMPLE
------------------------------------------------------------ */

.entrance .sky {
  isolation: isolate;
}
/* ============================================================
   ☁️ CLEAR CLOUDS — RIGHT TO LEFT
============================================================ */

.entrance .sky {
  position: relative;
  overflow: hidden;
}


/* ------------------------------------------------------------
   CLOUD LAYER 1 — LARGE & CLEAR
------------------------------------------------------------ */

.entrance .sky::before {
  content: "";

  position: absolute;

  top: 8%;
  left: 0;

  width: 220%;
  height: 55%;

  z-index: 1;
  pointer-events: none;

  background:

    /* Cloud 1 */
    radial-gradient(
      ellipse 280px 75px at 8% 45%,
      rgba(170, 190, 220, .78) 0%,
      rgba(110, 135, 175, .65) 38%,
      rgba(65, 85, 120, .35) 65%,
      transparent 78%
    ),

    /* Cloud 2 */
    radial-gradient(
      ellipse 360px 90px at 28% 30%,
      rgba(180, 200, 230, .82) 0%,
      rgba(120, 145, 185, .62) 40%,
      rgba(60, 80, 115, .32) 68%,
      transparent 80%
    ),

    /* Cloud 3 */
    radial-gradient(
      ellipse 300px 80px at 50% 55%,
      rgba(155, 180, 215, .76) 0%,
      rgba(100, 125, 165, .58) 42%,
      rgba(55, 75, 110, .28) 68%,
      transparent 80%
    ),

    /* Cloud 4 */
    radial-gradient(
      ellipse 390px 95px at 73% 28%,
      rgba(175, 195, 225, .8) 0%,
      rgba(110, 135, 175, .6) 42%,
      rgba(55, 75, 110, .3) 70%,
      transparent 82%
    ),

    /* Cloud 5 */
    radial-gradient(
      ellipse 330px 85px at 94% 50%,
      rgba(165, 190, 220, .78) 0%,
      rgba(105, 130, 170, .55) 40%,
      rgba(50, 70, 105, .28) 68%,
      transparent 80%
    );

  opacity: .95;

  transform: translateX(0);

  animation: cloudsRightToLeft 45s linear infinite;

  will-change: transform;
}


/* ------------------------------------------------------------
   ☁️ CLOUD LAYER 2 — DIFFERENT SPEED
------------------------------------------------------------ */

.entrance .sky::after {
  content: "";

  position: absolute;

  top: 25%;
  left: 0;

  width: 240%;
  height: 45%;

  z-index: 2;
  pointer-events: none;

  background:

    radial-gradient(
      ellipse 240px 65px at 5% 45%,
      rgba(195, 210, 235, .7),
      rgba(115, 140, 180, .5) 45%,
      transparent 78%
    ),

    radial-gradient(
      ellipse 320px 75px at 25% 60%,
      rgba(185, 205, 230, .72),
      rgba(105, 130, 170, .48) 45%,
      transparent 78%
    ),

    radial-gradient(
      ellipse 280px 70px at 48% 35%,
      rgba(190, 210, 235, .68),
      rgba(105, 130, 170, .45) 45%,
      transparent 78%
    ),

    radial-gradient(
      ellipse 350px 80px at 70% 55%,
      rgba(180, 200, 230, .7),
      rgba(100, 125, 165, .45) 45%,
      transparent 80%
    ),

    radial-gradient(
      ellipse 280px 70px at 92% 30%,
      rgba(190, 210, 235, .7),
      rgba(105, 130, 170, .45) 45%,
      transparent 80%
    );

  opacity: .75;

  animation: cloudsRightToLeftSlow 70s linear infinite;

  will-change: transform;
}


/* ============================================================
   ☁️ RIGHT → LEFT
============================================================ */

@keyframes cloudsRightToLeft {

  0% {
    transform: translateX(0);
  }

  100% {
    transform: translateX(-55%);
  }

}


/* ============================================================
   ☁️ SECOND CLOUD LAYER
============================================================ */

@keyframes cloudsRightToLeftSlow {

  0% {
    transform: translateX(0);
  }

  100% {
    transform: translateX(-50%);
  }

}
/* ============================================================
   ☁️ VERY VISIBLE NIGHT CLOUDS
   RIGHT ➜ LEFT
============================================================ */

.entrance .sky {
  position: relative !important;
  overflow: hidden !important;
}


/* ============================================================
   ☁️ MAIN CLOUDS — BIG / DENSE / VISIBLE
============================================================ */

.entrance .sky::before {
  content: "";

  position: absolute !important;

  top: 5% !important;
  left: 0 !important;

  width: 260% !important;
  height: 65% !important;

  z-index: 4 !important;
  pointer-events: none !important;

  background:

    /* BIG CLOUD 1 */
    radial-gradient(
      ellipse 420px 130px at 8% 30%,
      rgba(225, 235, 250, .92) 0%,
      rgba(175, 195, 225, .88) 35%,
      rgba(115, 140, 180, .72) 60%,
      rgba(65, 85, 125, .35) 78%,
      transparent 90%
    ),

    /* BIG CLOUD 2 */
    radial-gradient(
      ellipse 520px 150px at 28% 55%,
      rgba(220, 232, 248, .9) 0%,
      rgba(170, 195, 225, .84) 35%,
      rgba(105, 135, 175, .68) 62%,
      rgba(55, 75, 115, .32) 80%,
      transparent 92%
    ),

    /* BIG CLOUD 3 */
    radial-gradient(
      ellipse 450px 125px at 50% 25%,
      rgba(230, 238, 250, .94) 0%,
      rgba(180, 200, 230, .86) 38%,
      rgba(110, 140, 180, .65) 63%,
      rgba(60, 80, 120, .3) 80%,
      transparent 92%
    ),

    /* BIG CLOUD 4 */
    radial-gradient(
      ellipse 560px 160px at 72% 50%,
      rgba(225, 235, 250, .92) 0%,
      rgba(175, 198, 230, .85) 35%,
      rgba(105, 135, 180, .68) 62%,
      rgba(55, 75, 115, .32) 82%,
      transparent 94%
    ),

    /* BIG CLOUD 5 */
    radial-gradient(
      ellipse 440px 130px at 94% 25%,
      rgba(230, 240, 252, .94) 0%,
      rgba(180, 200, 230, .86) 38%,
      rgba(110, 140, 180, .65) 65%,
      rgba(60, 80, 120, .3) 82%,
      transparent 94%
    );

  opacity: 1 !important;

  filter:
    drop-shadow(0 8px 18px rgba(0,0,0,.35));

  animation:
    cloudsMoveRightToLeft 48s linear infinite !important;

  will-change: transform;
}


/* ============================================================
   ☁️ SECOND ROW OF CLOUDS
============================================================ */

.entrance .sky::after {
  content: "";

  position: absolute !important;

  top: 32% !important;
  left: 0 !important;

  width: 280% !important;
  height: 55% !important;

  z-index: 5 !important;
  pointer-events: none !important;

  background:

    radial-gradient(
      ellipse 350px 110px at 5% 40%,
      rgba(210,225,245,.88),
      rgba(145,170,205,.75) 45%,
      rgba(80,105,145,.45) 70%,
      transparent 90%
    ),

    radial-gradient(
      ellipse 480px 130px at 25% 65%,
      rgba(225,235,250,.9),
      rgba(160,185,215,.76) 45%,
      rgba(85,110,150,.42) 72%,
      transparent 92%
    ),

    radial-gradient(
      ellipse 400px 120px at 48% 35%,
      rgba(215,230,248,.88),
      rgba(150,180,215,.72) 45%,
      rgba(75,100,140,.4) 72%,
      transparent 92%
    ),

    radial-gradient(
      ellipse 520px 145px at 70% 65%,
      rgba(225,235,250,.9),
      rgba(165,190,220,.75) 45%,
      rgba(85,110,150,.4) 72%,
      transparent 94%
    ),

    radial-gradient(
      ellipse 420px 120px at 92% 35%,
      rgba(220,232,248,.9),
      rgba(155,180,215,.72) 45%,
      rgba(80,105,145,.4) 72%,
      transparent 92%
    );

  opacity: .95 !important;

  animation:
    cloudsMoveRightToLeftSlow 75s linear infinite !important;

  will-change: transform;
}


/* ============================================================
   ☁️ CLOUD MOVEMENT
   RIGHT ➜ LEFT ➜ REAPPEAR RIGHT
============================================================ */

@keyframes cloudsMoveRightToLeft {

  0% {
    transform: translateX(35%);
  }

  100% {
    transform: translateX(-55%);
  }

}


@keyframes cloudsMoveRightToLeftSlow {

  0% {
    transform: translateX(30%);
  }

  100% {
    transform: translateX(-50%);
  }

}


/* ============================================================
   🌙 MOON ALWAYS ABOVE CLOUDS
============================================================ */

.entrance::before {
  z-index: 20 !important;
}

.entrance::after {
  z-index: 21 !important;
}


/* ============================================================
   🏛️ TEMPLE ALWAYS ABOVE CLOUDS
============================================================ */

.entrance .gate-wrap,
.entrance .gate-architrave,
.entrance .pylon,
.entrance .stairs,
.entrance .statue,
.entrance .hero-title {
  position: relative;
  z-index: 30 !important;
}
/* ============================================================
   🏺 PHARAONIC OBELISKS — REALISTIC NIGHT VERSION
============================================================ */

.entrance .pylon {
  /* الحجم والشكل */
  width: clamp(55px, 4.5vw, 85px) !important;
  height: clamp(250px, 38vh, 390px) !important;

  /* مسلة مصرية: عريضة من أسفل ورفيعة من أعلى */
  clip-path: polygon(
    30% 100%,
    70% 100%,
    62% 10%,
    50% 0%,
    38% 10%
  );

  /* حجر داكن مضاء بالقمر */
  background:
    linear-gradient(
      90deg,
      #17130f 0%,
      #3b3023 18%,
      #786348 38%,
      #403326 55%,
      #211b15 78%,
      #0e0d0b 100%
    ) !important;

  filter:
    brightness(.82)
    saturate(.72)
    drop-shadow(0 12px 18px rgba(0,0,0,.8))
    drop-shadow(0 0 5px rgba(220,180,90,.12));

  opacity: 1 !important;

  z-index: 8 !important;
}


/* ============================================================
   ✨ GOLDEN EDGE — حافة ذهبية خفيفة
============================================================ */

.entrance .pylon::before {
  content: "";

  position: absolute;
  inset: 0;

  background:
    linear-gradient(
      90deg,
      transparent 0%,
      transparent 35%,
      rgba(232,197,112,.35) 43%,
      rgba(255,220,130,.55) 50%,
      rgba(232,197,112,.18) 57%,
      transparent 68%,
      transparent 100%
    );

  opacity: .65;

  pointer-events: none;
}


/* ============================================================
   🔺 PYRAMIDION — قمة المسلة
============================================================ */

.entrance .pylon::after {
  content: "";

  position: absolute;

  left: 50%;
  top: 0;

  width: 34%;
  height: 13%;

  transform: translateX(-50%);

  clip-path: polygon(
    50% 0%,
    100% 100%,
    0% 100%
  );

  background:
    linear-gradient(
      135deg,
      #d6b766 0%,
      #80652e 35%,
      #3c2e18 70%,
      #17130d 100%
    );

  box-shadow:
    0 0 8px rgba(220,180,80,.22);

  z-index: 3;
}


/* ============================================================
   🏺 BASE — قاعدة المسلة
============================================================ */

.entrance .pylon {
  box-shadow:
    inset 8px 0 12px rgba(0,0,0,.45),
    inset -8px 0 12px rgba(0,0,0,.55),
    inset 0 -18px 20px rgba(0,0,0,.4),
    0 12px 22px rgba(0,0,0,.75);
}


/* ============================================================
   🌙 MOONLIGHT ON OBELISKS
============================================================ */

.entrance .pylon {
  background:
    linear-gradient(
      105deg,
      #11100d 0%,
      #292219 20%,
      #68543a 42%,
      #4a3a29 55%,
      #211b15 78%,
      #0c0c0b 100%
    ) !important;
}


/* ============================================================
   🏛️ MAKE THEM SIT PROPERLY BESIDE THE STAIRS
============================================================ */

/* لو المسلتين واخدين مساحة زيادة */
.entrance .pylon {
  transform-origin: bottom center;
}

/* المسلة اليسرى */
.entrance .pylon:first-of-type {
  transform: scaleX(1.08);
}

/* المسلة اليمنى */
.entrance .pylon:last-of-type {
  transform: scaleX(1.08);
}
/* ============================================================
   REMOVE OBELISKS
============================================================ */

.entrance .pylon {
  display: none !important;
}
/* إزالة العنصرين الجانبيين */
.entrance .pylon,
.entrance .statue {
  display: none !important;
}
/* ============================================================
   REMOVE SIDE OBELISKS
============================================================ */

.entrance .obelisk-left,
.entrance .obelisk-right {
  display: none !important;
}
/* ============================================================
   ❌ REMOVE THE TWO SIDE OBELISKS COMPLETELY
============================================================ */

div.obelisk.obelisk-left,
div.obelisk.obelisk-right {
  display: none !important;
  visibility: hidden !important;
  opacity: 0 !important;
  width: 0 !important;
  height: 0 !important;
  pointer-events: none !important;
}
/* ============================================================
   🏛️ PYRAMID PYLONS — FINAL OVERRIDE
   لا يغيّر مكان العمودين
============================================================ */

.entrance .pylon.pylon-left,
.entrance .pylon.pylon-right {
    width: 105px !important;
    height: 330px !important;

    background:
        linear-gradient(
            90deg,
            #120d08 0%,
            #392714 10%,
            #765126 25%,
            #a97932 42%,
            #65451f 58%,
            #332313 82%,
            #100b07 100%
        ) !important;

    border: 2px solid #8f692c !important;

    border-radius: 2px !important;

    box-shadow:
        inset 8px 0 12px rgba(255,220,140,.16),
        inset -12px 0 18px rgba(0,0,0,.65),
        0 15px 30px rgba(0,0,0,.8),
        0 0 15px rgba(212,175,55,.12) !important;

    overflow: visible !important;

    z-index: 30 !important;

    filter: none !important;
}


/* ============================================================
   🔺 رأس فرعوني مثلث
============================================================ */

.entrance .pylon.pylon-left::before,
.entrance .pylon.pylon-right::before {

    content: "" !important;

    position: absolute !important;

    top: -48px !important;
    left: -2px !important;

    width: 105px !important;
    height: 55px !important;

    background:
        linear-gradient(
            135deg,
            #5b401e 0%,
            #c49745 45%,
            #e2bd69 52%,
            #5b401e 100%
        ) !important;

    clip-path: polygon(
        0 100%,
        50% 0,
        100% 100%
    ) !important;

    border: none !important;

    box-shadow:
        0 5px 12px rgba(0,0,0,.7) !important;

    z-index: 40 !important;
}


/* ============================================================
   ✨ تاج ذهبي أسفل الرأس
============================================================ */

.entrance .pylon.pylon-left::after,
.entrance .pylon.pylon-right::after {

    content: "" !important;

    position: absolute !important;

    top: 2px !important;
    left: 8px !important;

    width: 89px !important;
    height: 4px !important;

    background:
        linear-gradient(
            90deg,
            #60451f,
            #f1d27a,
            #fff0aa,
            #c2933c,
            #60451f
        ) !important;

    box-shadow:
        0 0 8px rgba(240,204,105,.65) !important;

    z-index: 50 !important;
}


/* ============================================================
   🏺 لوحة الزخارف الفرعونية
============================================================ */

.entrance .pylon.pylon-left .pylon-relief,
.entrance .pylon.pylon-right .pylon-relief {

    position: absolute !important;

    top: 28px !important;
    left: 12px !important;
    right: 12px !important;
    bottom: 15px !important;

    display: block !important;

    background:
        linear-gradient(
            90deg,
            rgba(0,0,0,.38),
            rgba(180,130,55,.22),
            rgba(255,215,125,.10),
            rgba(0,0,0,.42)
        ) !important;

    border: 1px solid rgba(220,181,78,.65) !important;

    box-shadow:
        inset 0 0 15px rgba(0,0,0,.75),
        inset 0 0 4px rgba(255,220,130,.25) !important;

    z-index: 60 !important;
}


/* ============================================================
   🟨 الخطوط الذهبية داخل العمود
============================================================ */

.entrance .pylon .relief-row {

    position: absolute !important;

    left: 8px !important;
    right: 8px !important;

    height: 2px !important;

    display: block !important;

    background:
        linear-gradient(
            90deg,
            transparent,
            #b98a3d,
            #f1d47d,
            #b98a3d,
            transparent
        ) !important;

    box-shadow:
        0 0 5px rgba(230,190,80,.35) !important;
}

.entrance .pylon .relief-row:nth-child(1) {
    top: 22% !important;
}

.entrance .pylon .relief-row:nth-child(2) {
    top: 47% !important;
}

.entrance .pylon .relief-row:nth-child(3) {
    top: 72% !important;
}


/* ============================================================
   𓂀 CARTOUCHE — زخرفة مركزية
============================================================ */

.entrance .pylon .relief-cartouche {

    position: absolute !important;

    left: 50% !important;
    top: 30% !important;

    width: 35px !important;
    height: 90px !important;

    transform: translateX(-50%) !important;

    display: block !important;

    border: 2px solid #c69b45 !important;

    border-radius: 50% !important;

    background:
        radial-gradient(
            ellipse,
            rgba(211,168,71,.25),
            rgba(30,20,10,.55)
        ) !important;

    box-shadow:
        inset 0 0 8px rgba(0,0,0,.7),
        0 0 6px rgba(212,175,55,.2) !important;

    z-index: 70 !important;
}


/* Eye of Horus داخل الـCartouche */

.entrance .pylon .relief-cartouche::before {

    content: "𓂀" !important;

    position: absolute !important;

    left: 50% !important;
    top: 50% !important;

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

    color: #e1bd63 !important;

    font-size: 25px !important;

    text-shadow:
        0 0 7px rgba(230,190,80,.5),
        0 2px 4px rgba(0,0,0,.9) !important;
}


/* ============================================================
   🟨 حواف ذهبية طولية
============================================================ */

.entrance .pylon-relief::before,
.entrance .pylon-relief::after {

    content: "" !important;

    position: absolute !important;

    top: 5px !important;
    bottom: 5px !important;

    width: 2px !important;

    background:
        linear-gradient(
            180deg,
            transparent,
            #c99b42 15%,
            #f0d37a 50%,
            #c99b42 85%,
            transparent
        ) !important;

    box-shadow:
        0 0 5px rgba(230,190,80,.35) !important;
}

.entrance .pylon-relief::before {
    left: 7px !important;
}

.entrance .pylon-relief::after {
    right: 7px !important;
}


/* ============================================================
   🌙 فرق الإضاءة بين اليمين والشمال
============================================================ */

.entrance .pylon-left {
    box-shadow:
        inset 12px 0 18px rgba(255,225,150,.18),
        inset -12px 0 20px rgba(0,0,0,.7),
        8px 15px 30px rgba(0,0,0,.8),
        0 0 18px rgba(210,175,80,.12) !important;
}

.entrance .pylon-right {
    box-shadow:
        inset 8px 0 18px rgba(255,225,150,.10),
        inset -15px 0 22px rgba(0,0,0,.75),
        -8px 15px 30px rgba(0,0,0,.8),
        0 0 18px rgba(210,175,80,.12) !important;
}


/* ============================================================
   📱 MOBILE
============================================================ */

@media (max-width: 800px) {

    .entrance .pylon.pylon-left,
    .entrance .pylon.pylon-right {
        width: 70px !important;
        height: 250px !important;
    }

    .entrance .pylon.pylon-left::before,
    .entrance .pylon.pylon-right::before {
        width: 70px !important;
        height: 38px !important;
        top: -34px !important;
    }
}
/* ============================================================
   🏛️ GU LIBRARY — PHARAONIC PYLONS
   إنشاء الـPylons فعليًا + زخرفة فرعونية
============================================================ */

.entrance .pylon {
    position: absolute !important;

    top: 22% !important;

    width: 150px !important;
    height: 55% !important;

    box-sizing: border-box !important;

    z-index: 25 !important;

    overflow: visible !important;

    background:
        linear-gradient(
            90deg,
            #17110a 0%,
            #3b2915 9%,
            #765126 22%,
            #a87b38 38%,
            #6b4a22 52%,
            #392714 76%,
            #120c07 100%
        ) !important;

    border:
        2px solid rgba(190,148,65,.75) !important;

    box-shadow:
        inset 12px 0 18px rgba(255,220,140,.16),
        inset -16px 0 22px rgba(0,0,0,.65),
        0 18px 35px rgba(0,0,0,.8),
        0 0 22px rgba(212,175,55,.12) !important;
}


/* ============================================================
   📍 أماكن العمودين
============================================================ */

.entrance .pylon-left {
    left: 8% !important;
}

.entrance .pylon-right {
    right: 8% !important;
}


/* ============================================================
   🔺 التاج الفرعوني
============================================================ */

.entrance .pylon::before {
    content: "" !important;

    position: absolute !important;

    top: -65px !important;
    left: -2px !important;

    width: 150px !important;
    height: 68px !important;

    background:
        linear-gradient(
            135deg,
            #493117 0%,
            #9a6c2c 35%,
            #e1bb63 50%,
            #9a6c2c 65%,
            #493117 100%
        ) !important;

    clip-path: polygon(
        0 100%,
        50% 0,
        100% 100%
    ) !important;

    box-shadow:
        0 7px 14px rgba(0,0,0,.75) !important;

    z-index: 10 !important;
}


/* ============================================================
   ✨ الشريط الذهبي أسفل التاج
============================================================ */

.entrance .pylon::after {
    content: "" !important;

    position: absolute !important;

    top: -1px !important;
    left: 8px !important;

    width: 134px !important;
    height: 5px !important;

    background:
        linear-gradient(
            90deg,
            #6c4b1d,
            #d5ad55,
            #ffe7a0,
            #d5ad55,
            #6c4b1d
        ) !important;

    box-shadow:
        0 0 9px rgba(238,201,105,.65) !important;

    z-index: 20 !important;
}


/* ============================================================
   🏺 لوحة الزخرفة الداخلية
============================================================ */

.entrance .pylon-relief {
    position: absolute !important;

    top: 35px !important;
    left: 16px !important;
    right: 16px !important;
    bottom: 18px !important;

    display: block !important;

    border:
        1px solid rgba(218,181,78,.65) !important;

    background:
        linear-gradient(
            90deg,
            rgba(0,0,0,.40),
            rgba(142,100,38,.20),
            rgba(235,194,92,.08),
            rgba(0,0,0,.42)
        ) !important;

    box-shadow:
        inset 0 0 18px rgba(0,0,0,.75),
        inset 0 0 4px rgba(255,220,130,.2) !important;
}


/* ============================================================
   🟨 الخطوط الفرعونية الأفقية
============================================================ */

.entrance .pylon .relief-row {
    position: absolute !important;

    left: 10px !important;
    right: 10px !important;

    height: 2px !important;

    display: block !important;

    background:
        linear-gradient(
            90deg,
            transparent,
            #a97c32,
            #f0d078,
            #a97c32,
            transparent
        ) !important;

    box-shadow:
        0 0 6px rgba(230,190,80,.35) !important;
}

.entrance .pylon .relief-row:nth-child(1) {
    top: 22% !important;
}

.entrance .pylon .relief-row:nth-child(2) {
    top: 48% !important;
}

.entrance .pylon .relief-row:nth-child(3) {
    top: 74% !important;
}


/* ============================================================
   𓂀 الكارتوشة الفرعونية
============================================================ */

.entrance .pylon .relief-cartouche {
    position: absolute !important;

    left: 50% !important;
    top: 31% !important;

    width: 46px !important;
    height: 125px !important;

    transform: translateX(-50%) !important;

    display: block !important;

    border:
        2px solid #c79b46 !important;

    border-radius: 50% !important;

    background:
        radial-gradient(
            ellipse,
            rgba(193,148,59,.25),
            rgba(25,16,8,.65)
        ) !important;

    box-shadow:
        inset 0 0 12px rgba(0,0,0,.8),
        0 0 7px rgba(212,175,55,.2) !important;
}


/* ============================================================
   𓂀 عين حورس
============================================================ */

.entrance .pylon .relief-cartouche::before {
    content: "𓂀" !important;

    position: absolute !important;

    left: 50% !important;
    top: 50% !important;

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

    color: #e5c56b !important;

    font-size: 30px !important;

    text-shadow:
        0 0 8px rgba(238,202,105,.55),
        0 3px 5px rgba(0,0,0,.9) !important;
}


/* ============================================================
   🟨 حواف ذهبية داخلية
============================================================ */

.entrance .pylon-relief::before,
.entrance .pylon-relief::after {
    content: "" !important;

    position: absolute !important;

    top: 8px !important;
    bottom: 8px !important;

    width: 2px !important;

    background:
        linear-gradient(
            180deg,
            transparent,
            #bd9040 15%,
            #f2d67c 50%,
            #bd9040 85%,
            transparent
        ) !important;

    box-shadow:
        0 0 5px rgba(230,190,80,.3) !important;
}

.entrance .pylon-relief::before {
    left: 8px !important;
}

.entrance .pylon-relief::after {
    right: 8px !important;
}


/* ============================================================
   🌙 إضاءة القمر على العمودين
============================================================ */

.entrance .pylon-left {
    box-shadow:
        inset 15px 0 22px rgba(180,205,240,.12),
        inset -15px 0 22px rgba(0,0,0,.7),
        10px 18px 35px rgba(0,0,0,.8),
        0 0 20px rgba(212,175,55,.12) !important;
}

.entrance .pylon-right {
    box-shadow:
        inset 8px 0 20px rgba(180,205,240,.08),
        inset -18px 0 25px rgba(0,0,0,.75),
        -10px 18px 35px rgba(0,0,0,.8),
        0 0 20px rgba(212,175,55,.12) !important;
}


/* ============================================================
   📱 RESPONSIVE
============================================================ */

@media (max-width: 900px) {

    .entrance .pylon {
        width: 100px !important;
        height: 48% !important;
    }

    .entrance .pylon-left {
        left: 3% !important;
    }

    .entrance .pylon-right {
        right: 3% !important;
    }

    .entrance .pylon::before {
        width: 100px !important;
        height: 48px !important;
        top: -46px !important;
    }

    .entrance .pylon::after {
        width: 88px !important;
    }
}
/* =====================================================
   PYlONS TEST — FORCE VISIBLE
===================================================== */

.entrance .pylon {
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;

  position: absolute !important;

  width: 180px !important;
  height: 500px !important;

  bottom: 15% !important;

  z-index: 100 !important;

  background: linear-gradient(
    90deg,
    #17120d 0%,
    #665238 20%,
    #a08455 45%,
    #665238 70%,
    #17120d 100%
  ) !important;

  border: 4px solid #d4af37 !important;

  box-shadow:
    0 0 20px rgba(212,175,55,.5),
    inset 0 0 30px rgba(0,0,0,.8) !important;
}

.entrance .pylon-left {
  left: 5% !important;
  right: auto !important;
}

.entrance .pylon-right {
  right: 5% !important;
  left: auto !important;
}
/* =========================================================
   🏺 GRAND EGYPTIAN OBELISKS
   Grounded beside the temple stairs
========================================================= */

.entrance .obelisk {
  position: absolute !important;

  /* الحجم */
  width: clamp(58px, 5.8vw, 105px) !important;
  height: clamp(330px, 52vh, 560px) !important;

  /* مكانهم على الأرض */
  bottom: 4.5% !important;

  /* الشكل الأساسي */
  background:
    linear-gradient(
      90deg,
      #3a2b1b 0%,
      #72562d 10%,
      #b58a42 24%,
      #d6ad58 38%,
      #8d682f 58%,
      #513b22 82%,
      #261b12 100%
    ) !important;

  border-left:
    2px solid rgba(235, 195, 95, .65);

  border-right:
    2px solid rgba(80, 55, 25, .9);

  box-shadow:
    inset 8px 0 12px rgba(255, 220, 120, .16),
    inset -10px 0 15px rgba(0, 0, 0, .5),
    0 0 18px rgba(220, 170, 60, .18),
    0 15px 35px rgba(0, 0, 0, .75);

  z-index: 7 !important;

  overflow: visible;

  transform: none !important;
}


/* =========================================================
   LEFT POSITION
========================================================= */

.entrance .obelisk-left {
  left: 6.5% !important;
  right: auto !important;
}


/* =========================================================
   RIGHT POSITION
========================================================= */

.entrance .obelisk-right {
  right: 6.5% !important;
  left: auto !important;
}


/* =========================================================
   OBELISK TAPER
========================================================= */

.entrance .obelisk::before {
  content: "";

  position: absolute;

  left: 50%;
  top: -9%;

  width: 0;
  height: 0;

  transform: translateX(-50%);

  border-left:
    clamp(29px, 2.9vw, 52px) solid transparent;

  border-right:
    clamp(29px, 2.9vw, 52px) solid transparent;

  border-bottom:
    clamp(48px, 7vh, 75px) solid #b99145;

  filter:
    drop-shadow(0 0 5px rgba(245, 205, 100, .3));
}


/* =========================================================
   OBELISK CAP
========================================================= */

.entrance .obelisk::after {
  content: "";

  position: absolute;

  left: -12%;
  bottom: -5%;

  width: 124%;
  height: 7%;

  background:
    linear-gradient(
      180deg,
      #d6ad58 0%,
      #8e672f 35%,
      #4a351d 100%
    );

  border:
    1px solid rgba(232, 192, 91, .65);

  box-shadow:
    0 5px 12px rgba(0,0,0,.7),
    0 0 10px rgba(225,180,70,.18);
}


/* =========================================================
   PHARAONIC HORIZONTAL BANDS
========================================================= */

.entrance .obelisk {
  background-image:

    /* خطوط زخرفية */
    linear-gradient(
      180deg,
      transparent 0%,
      transparent 17%,
      rgba(239,202,112,.65) 17.3%,
      rgba(82,59,28,.5) 18%,
      transparent 18.6%,

      transparent 31%,
      rgba(239,202,112,.5) 31.3%,
      rgba(76,53,25,.45) 32%,
      transparent 32.6%,

      transparent 46%,
      rgba(239,202,112,.55) 46.3%,
      rgba(72,50,24,.5) 47%,
      transparent 47.6%,

      transparent 61%,
      rgba(239,202,112,.5) 61.3%,
      rgba(72,50,24,.5) 62%,
      transparent 62.6%,

      transparent 76%,
      rgba(239,202,112,.55) 76.3%,
      rgba(72,50,24,.5) 77%,
      transparent 77.6%
    ),

    /* الحجر */
    linear-gradient(
      90deg,
      #3a2b1b 0%,
      #72562d 10%,
      #b58a42 24%,
      #d6ad58 38%,
      #8d682f 58%,
      #513b22 82%,
      #261b12 100%
    ) !important;
}


/* =========================================================
   GOLDEN SIDE LIGHT
========================================================= */

.entrance .obelisk-left {
  filter:
    drop-shadow(
      12px 0 18px rgba(232, 183, 65, .24)
    )
    drop-shadow(
      0 12px 25px rgba(0,0,0,.75)
    );
}

.entrance .obelisk-right {
  filter:
    drop-shadow(
      -12px 0 18px rgba(232, 183, 65, .24)
    )
    drop-shadow(
      0 12px 25px rgba(0,0,0,.75)
    );
}


/* =========================================================
   PHARAONIC CARVED CENTER
========================================================= */

.entrance .obelisk-left::marker,
.entrance .obelisk-right::marker {
  display: none;
}


/* =========================================================
   BASE STONE / GROUND CONTACT
========================================================= */

.entrance .obelisk {
  clip-path: polygon(
    14% 0%,
    86% 0%,
    78% 100%,
    22% 100%
  );
}


/* قاعدة المسلة لا تدخل داخل الـclip-path */
.entrance .obelisk::after {
  clip-path: polygon(
    0 0,
    100% 0,
    100% 100%,
    0 100%
  );
}


/* =========================================================
   RESPONSIVE
========================================================= */

@media (max-width: 900px) {

  .entrance .obelisk {
    width: 62px !important;
    height: 330px !important;
    bottom: 5% !important;
  }

  .entrance .obelisk-left {
    left: 3% !important;
  }

  .entrance .obelisk-right {
    right: 3% !important;
  }

}


@media (max-width: 600px) {

  .entrance .obelisk {
    width: 45px !important;
    height: 250px !important;
  }

  .entrance .obelisk-left {
    left: 1.5% !important;
  }

  .entrance .obelisk-right {
    right: 1.5% !important;
  }

}
/* =========================================================
   🏺 OBELISKS — FINAL POSITION
   المسلتين فقط
========================================================= */

.entrance .obelisk {
  position: absolute !important;

  /* الحجم */
  width: 7.5vw !important;
  height: 48vh !important;

  /* نخلي القاعدة على الأرض */
  bottom: 0 !important;

  /* شكل حجري قوي */
  background:
    linear-gradient(
      90deg,
      #21170d 0%,
      #5b401c 15%,
      #a4772c 32%,
      #d0a64b 47%,
      #795521 62%,
      #b48735 80%,
      #2a1c0e 100%
    ) !important;

  border: 2px solid #8b6425 !important;

  /* رأس المسلة */
  clip-path: polygon(
    15% 100%,
    85% 100%,
    78% 12%,
    50% 0%,
    22% 12%
  ) !important;

  box-shadow:
    inset 10px 0 15px rgba(255,220,130,.22),
    inset -12px 0 18px rgba(0,0,0,.65),
    0 15px 30px rgba(0,0,0,.85) !important;

  filter:
    brightness(.85)
    contrast(1.15)
    saturate(.95) !important;

  z-index: 9 !important;

  pointer-events: none;
}


/* =========================================================
   📍 المسلة اليسرى — بجوار بداية السلم
========================================================= */

.entrance .obelisk-left {
  left: 6vw !important;
  right: auto !important;
}


/* =========================================================
   📍 المسلة اليمنى — بجوار بداية السلم
========================================================= */

.entrance .obelisk-right {
  right: 6vw !important;
  left: auto !important;
}


/* =========================================================
   🏺 زخارف هيروغليفية
========================================================= */

.entrance .obelisk::after {
  content:
    "𓂀\A"
    "𓅃\A"
    "𓆣\A"
    "𓋹\A"
    "𓏏\A"
    "𓁹\A"
    "𓅓\A"
    "𓂋";

  white-space: pre;

  position: absolute;

  top: 18%;
  left: 50%;

  transform: translateX(-50%);

  width: 60%;

  text-align: center;

  color: #e8c15c;

  font-family: serif;

  font-size: clamp(16px, 1.35vw, 25px);

  line-height: 1.55;

  text-shadow:
    0 1px 2px #120d07,
    0 0 6px rgba(255,205,80,.55);

  opacity: .95;

  z-index: 5;
}


/* =========================================================
   ✨ إضاءة ذهبية على الحافة
========================================================= */

.entrance .obelisk::before {
  content: "";

  position: absolute;

  top: 10%;
  bottom: 8%;
  left: 18%;

  width: 3px;

  background:
    linear-gradient(
      180deg,
      transparent,
      #f4d477 15%,
      #b98528 50%,
      #f4d477 85%,
      transparent
    );

  box-shadow:
    0 0 7px rgba(255,210,90,.75);

  opacity: .9;

  z-index: 6;
}


/* =========================================================
   🪨 قاعدة سميكة تمنع شكل "الطيران"
========================================================= */

.entrance .obelisk-left,
.entrance .obelisk-right {
  isolation: isolate;
}


/* قاعدة ذهبية/حجرية أسفل كل مسلة */
.entrance .obelisk-left {
  box-shadow:
    inset 10px 0 15px rgba(255,220,130,.2),
    inset -12px 0 18px rgba(0,0,0,.65),
    18px 12px 30px rgba(0,0,0,.8),
    0 0 18px rgba(214,165,55,.18);
}

.entrance .obelisk-right {
  box-shadow:
    inset 10px 0 15px rgba(255,220,130,.2),
    inset -12px 0 18px rgba(0,0,0,.65),
    -18px 12px 30px rgba(0,0,0,.8),
    0 0 18px rgba(214,165,55,.18);
}


/* =========================================================
   📱 MOBILE
========================================================= */

@media (max-width: 700px) {

  .entrance .obelisk {
    width: 18vw !important;
    height: 43vh !important;
  }

  .entrance .obelisk-left {
    left: 2vw !important;
  }

  .entrance .obelisk-right {
    right: 2vw !important;
  }

}
/* =========================================================
   FINAL OBELISKS
   تعديل المسلتين فقط — لا يلمس السلم أو البوابة
========================================================= */

.entrance .obelisk {
    position: absolute !important;

    width: 115px !important;
    height: 430px !important;

    bottom: 0 !important;

    margin: 0 !important;

    background:
        linear-gradient(
            90deg,
            #171008 0%,
            #4b3217 12%,
            #8b6327 28%,
            #c0943b 45%,
            #6d4b1d 62%,
            #a8782b 80%,
            #24170b 100%
        ) !important;

    border: 2px solid #8d6828 !important;

    clip-path: polygon(
        0% 100%,
        100% 100%,
        91% 9%,
        50% 0%,
        9% 9%
    ) !important;

    box-shadow:
        inset 14px 0 18px rgba(255,220,130,.22),
        inset -14px 0 22px rgba(0,0,0,.72),
        0 18px 35px rgba(0,0,0,.85) !important;

    filter:
        brightness(.82)
        contrast(1.2) !important;

    z-index: 12 !important;

    pointer-events: none !important;
}


/* =========================================================
   LEFT OBELISK
   ملاصقة للسلم من اليسار
========================================================= */

.entrance .obelisk-left {
    left: 5.5% !important;
    right: auto !important;
}


/* =========================================================
   RIGHT OBELISK
   ملاصقة للسلم من اليمين
========================================================= */

.entrance .obelisk-right {
    right: 5.5% !important;
    left: auto !important;
}


/* =========================================================
   HIEROGlyphs
========================================================= */

.entrance .obelisk::after {

    content:
        "𓂀\A"
        "𓋹\A"
        "𓅃\A"
        "𓆣\A"
        "𓏏\A"
        "𓁹\A"
        "𓅓\A"
        "𓂋";

    white-space: pre;

    position: absolute;

    top: 16%;
    left: 50%;

    transform: translateX(-50%);

    width: 70%;

    text-align: center;

    font-family: "Times New Roman", serif;

    font-size: 25px;

    line-height: 1.48;

    color: #e8c45e;

    text-shadow:
        0 1px 2px #160d04,
        0 0 5px rgba(255,205,80,.5);

    opacity: .95;

    z-index: 20;
}


/* =========================================================
   GOLDEN SIDE LIGHT
========================================================= */

.entrance .obelisk::before {

    content: "";

    position: absolute;

    top: 12%;
    bottom: 10%;

    left: 15%;

    width: 3px;

    background:
        linear-gradient(
            180deg,
            transparent 0%,
            #f5d477 15%,
            #d09b32 50%,
            #f5d477 85%,
            transparent 100%
        );

    box-shadow:
        0 0 7px rgba(255,210,90,.8),
        0 0 15px rgba(255,190,50,.35);

    z-index: 21;

    opacity: .9;
}


/* =========================================================
   OBELISK BASE
========================================================= */

.entrance .obelisk {
    border-bottom: 14px solid #2b1b0c !important;
}


/* =========================================================
   RESPONSIVE
========================================================= */

@media (max-width: 1000px) {

    .entrance .obelisk {
        width: 85px !important;
        height: 340px !important;
    }

    .entrance .obelisk-left {
        left: 3% !important;
    }

    .entrance .obelisk-right {
        right: 3% !important;
    }
}


@media (max-width: 650px) {

    .entrance .obelisk {
        width: 58px !important;
        height: 260px !important;
    }

    .entrance .obelisk-left {
        left: 1% !important;
    }

    .entrance .obelisk-right {
        right: 1% !important;
    }

    .entrance .obelisk::after {
        font-size: 16px;
    }
}
/* =========================================================
   FINAL OBELISKS ONLY
   المسلتين فقط — تثبيت على جانبي السلم
========================================================= */

.entrance .obelisk {
    position: absolute !important;

    /* الحجم */
    width: 105px !important;
    height: 500px !important;

    /* إنزال المسلة لأسفل حتى تلامس منطقة السلم */
    bottom: -245px !important;

    margin: 0 !important;

    z-index: 30 !important;

    pointer-events: none !important;

    /* جسم حجري ذهبي */
    background:
        linear-gradient(
            90deg,
            #171008 0%,
            #3b2814 10%,
            #795321 24%,
            #b9822e 40%,
            #d2a54b 50%,
            #8a6125 62%,
            #4c3217 82%,
            #171008 100%
        ) !important;

    border: 2px solid rgba(211,166,70,.8) !important;

    /* شكل المسلة */
    clip-path: polygon(
        18% 100%,
        82% 100%,
        76% 11%,
        50% 0%,
        24% 11%
    ) !important;

    box-shadow:
        inset 12px 0 18px rgba(255,225,145,.25),
        inset -14px 0 22px rgba(0,0,0,.72),
        0 18px 35px rgba(0,0,0,.9) !important;

    filter:
        brightness(.92)
        contrast(1.12) !important;
}


/* =========================================================
   LEFT — ملاصقة للجانب الأيسر من السلم
========================================================= */

.entrance .obelisk-left {
    left: 4.2% !important;
    right: auto !important;

    transform: translateX(0) !important;
}


/* =========================================================
   RIGHT — ملاصقة للجانب الأيمن من السلم
========================================================= */

.entrance .obelisk-right {
    right: 4.2% !important;
    left: auto !important;

    transform: translateX(0) !important;
}


/* =========================================================
   قاعدة المسلة — تجعلها واقفة على الأرض
========================================================= */

.entrance .obelisk-left::after,
.entrance .obelisk-right::after {

    content:
        "𓂀 𓋹 𓅃\A"
        "𓆣 𓏏 𓁹\A"
        "𓅓 𓂋 𓇋";

    white-space: pre;

    position: absolute !important;

    left: 50% !important;
    top: 23% !important;

    transform: translateX(-50%) !important;

    width: 70% !important;

    text-align: center !important;

    font-family: "Times New Roman", serif !important;

    font-size: 21px !important;

    line-height: 2.15 !important;

    color: #f0cf70 !important;

    text-shadow:
        0 1px 2px #100a04,
        0 0 5px rgba(255,210,90,.7) !important;

    opacity: .95 !important;

    z-index: 5 !important;
}


/* =========================================================
   إضاءة ذهبية جانبية
========================================================= */

.entrance .obelisk-left::before,
.entrance .obelisk-right::before {

    content: "" !important;

    position: absolute !important;

    top: 12% !important;
    bottom: 10% !important;

    width: 4px !important;

    background:
        linear-gradient(
            180deg,
            transparent,
            #f6d879 15%,
            #fff0a0 50%,
            #d39b31 80%,
            transparent
        ) !important;

    box-shadow:
        0 0 7px rgba(255,215,105,.9),
        0 0 18px rgba(255,190,55,.45) !important;

    z-index: 6 !important;
}


/* الضوء يكون ناحية السلم */

.entrance .obelisk-left::before {
    right: 14% !important;
    left: auto !important;
}

.entrance .obelisk-right::before {
    left: 14% !important;
    right: auto !important;
}


/* =========================================================
   خطوط زخرفية على المسلة
========================================================= */

.entrance .obelisk {
    background-image:

        linear-gradient(
            180deg,

            transparent 0%,
            transparent 17%,

            rgba(245,211,125,.65) 17.3%,
            rgba(60,40,15,.55) 18%,

            transparent 18.7%,
            transparent 36%,

            rgba(245,211,125,.55) 36.3%,
            rgba(60,40,15,.55) 37%,

            transparent 37.7%,
            transparent 55%,

            rgba(245,211,125,.55) 55.3%,
            rgba(60,40,15,.55) 56%,

            transparent 56.7%,
            transparent 74%,

            rgba(245,211,125,.55) 74.3%,
            rgba(60,40,15,.55) 75%,

            transparent 75.7%
        ),

        linear-gradient(
            90deg,
            #171008 0%,
            #3b2814 10%,
            #795321 24%,
            #b9822e 40%,
            #d2a54b 50%,
            #8a6125 62%,
            #4c3217 82%,
            #171008 100%
        ) !important;
}


/* =========================================================
   قاعدة واضحة أسفل المسلة
========================================================= */

.entrance .obelisk-left,
.entrance .obelisk-right {
    border-bottom: 18px solid #24170c !important;
}


/* =========================================================
   DESKTOP
========================================================= */

@media (min-width: 1200px) {

    .entrance .obelisk {
        width: 115px !important;
        height: 520px !important;
        bottom: -245px !important;
    }

    .entrance .obelisk-left {
        left: 4.3% !important;
    }

    .entrance .obelisk-right {
        right: 4.3% !important;
    }
}


/* =========================================================
   TABLET
========================================================= */

@media (max-width: 1199px) {

    .entrance .obelisk {
        width: 90px !important;
        height: 410px !important;
        bottom: -190px !important;
    }

    .entrance .obelisk-left {
        left: 3% !important;
    }

    .entrance .obelisk-right {
        right: 3% !important;
    }

    .entrance .obelisk::after {
        font-size: 17px !important;
    }
}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 700px) {

    .entrance .obelisk {
        width: 60px !important;
        height: 290px !important;
        bottom: -120px !important;
    }

    .entrance .obelisk-left {
        left: 1.5% !important;
    }

    .entrance .obelisk-right {
        right: 1.5% !important;
    }

    .entrance .obelisk::after {
        font-size: 12px !important;
        line-height: 1.8 !important;
    }
}
/* =========================================================
   🔥 FINAL FIX — OBELISKS ONLY
   إلغاء الـ TOP القديم وتثبيت المسلتين على الأرض
========================================================= */

.entrance .obelisk {
    position: absolute !important;

    /* مهم جدًا: إلغاء الـ top القديم */
    top: auto !important;

    /* الوقوف على أرضية المشهد */
    bottom: 0 !important;

    /* حجم المسلتين */
    width: 110px !important;
    height: 500px !important;

    margin: 0 !important;
    padding: 0 !important;

    transform: none !important;

    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;

    z-index: 30 !important;
    pointer-events: none !important;

    background:
        linear-gradient(
            90deg,
            #161008 0%,
            #3d2813 12%,
            #795322 27%,
            #b98432 40%,
            #d6aa52 50%,
            #9a6b27 63%,
            #573918 82%,
            #171008 100%
        ) !important;

    border: 2px solid #9d742e !important;

    clip-path: polygon(
        15% 100%,
        85% 100%,
        77% 12%,
        50% 0%,
        23% 12%
    ) !important;

    box-shadow:
        inset 13px 0 18px rgba(255,225,145,.25),
        inset -15px 0 22px rgba(0,0,0,.75),
        0 16px 30px rgba(0,0,0,.9) !important;
}


/* =========================================================
   LEFT
========================================================= */

.entrance .obelisk-left {
    top: auto !important;
    bottom: 0 !important;

    left: 4% !important;
    right: auto !important;

    transform: none !important;
}


/* =========================================================
   RIGHT
========================================================= */

.entrance .obelisk-right {
    top: auto !important;
    bottom: 0 !important;

    right: 4% !important;
    left: auto !important;

    transform: none !important;
}


/* =========================================================
   🏺 زخارف هيروغليفية
========================================================= */

.entrance .obelisk::after {
    content:
        "𓂀\A"
        "𓋹\A"
        "𓅃\A"
        "𓆣\A"
        "𓏏\A"
        "𓁹\A"
        "𓅓";

    white-space: pre !important;

    position: absolute !important;

    top: 20% !important;
    left: 50% !important;

    transform: translateX(-50%) !important;

    width: 70% !important;

    text-align: center !important;

    color: #f2d477 !important;

    font-family: serif !important;
    font-size: 22px !important;
    line-height: 1.75 !important;

    text-shadow:
        0 1px 3px #120b05,
        0 0 7px rgba(255,210,90,.6) !important;

    opacity: .95 !important;

    z-index: 50 !important;
}


/* =========================================================
   ✨ إضاءة ذهبية ناحية السلم
========================================================= */

.entrance .obelisk-left::before {
    content: "" !important;

    position: absolute !important;

    top: 12% !important;
    bottom: 10% !important;

    right: 13% !important;
    left: auto !important;

    width: 4px !important;

    background:
        linear-gradient(
            180deg,
            transparent,
            #f5d477 15%,
            #fff0a0 50%,
            #d09a32 80%,
            transparent
        ) !important;

    box-shadow:
        0 0 8px rgba(255,215,100,.9),
        0 0 18px rgba(255,190,50,.45) !important;

    z-index: 60 !important;
}


.entrance .obelisk-right::before {
    content: "" !important;

    position: absolute !important;

    top: 12% !important;
    bottom: 10% !important;

    left: 13% !important;
    right: auto !important;

    width: 4px !important;

    background:
        linear-gradient(
            180deg,
            transparent,
            #f5d477 15%,
            #fff0a0 50%,
            #d09a32 80%,
            transparent
        ) !important;

    box-shadow:
        0 0 8px rgba(255,215,100,.9),
        0 0 18px rgba(255,190,50,.45) !important;

    z-index: 60 !important;
}


/* =========================================================
   🟨 شرائط حجرية
========================================================= */

.entrance .obelisk {
    background-image:

        linear-gradient(
            180deg,

            transparent 0%,
            transparent 18%,
            rgba(246,210,115,.65) 18.5%,
            rgba(55,35,12,.6) 19%,
            transparent 19.7%,

            transparent 36%,
            rgba(246,210,115,.55) 36.5%,
            rgba(55,35,12,.6) 37%,
            transparent 37.7%,

            transparent 54%,
            rgba(246,210,115,.55) 54.5%,
            rgba(55,35,12,.6) 55%,
            transparent 55.7%,

            transparent 72%,
            rgba(246,210,115,.55) 72.5%,
            rgba(55,35,12,.6) 73%,
            transparent 73.7%
        ),

        linear-gradient(
            90deg,
            #161008 0%,
            #3d2813 12%,
            #795322 27%,
            #b98432 40%,
            #d6aa52 50%,
            #9a6b27 63%,
            #573918 82%,
            #171008 100%
        ) !important;
}


/* =========================================================
   📱 RESPONSIVE
========================================================= */

@media (max-width: 900px) {

    .entrance .obelisk {
        top: auto !important;
        bottom: 0 !important;

        width: 75px !important;
        height: 360px !important;
    }

    .entrance .obelisk-left {
        left: 2% !important;
    }

    .entrance .obelisk-right {
        right: 2% !important;
    }
}
/* =========================================================
   FINAL OBELISK FIX
   المسلتين فقط — لا يلمس السلم أو البوابة
========================================================= */

/* جسم المسلتين */
.entrance .obelisk.obelisk-left,
.entrance .obelisk.obelisk-right {

    position: absolute !important;

    width: 105px !important;
    height: 390px !important;

    bottom: 0 !important;

    margin: 0 !important;
    padding: 0 !important;

    box-sizing: border-box !important;

    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;

    overflow: visible !important;

    z-index: 30 !important;

    background:
        linear-gradient(
            90deg,
            #24170b 0%,
            #62451d 12%,
            #a97b32 28%,
            #d4ad55 43%,
            #9a6d29 58%,
            #67471d 78%,
            #211509 100%
        ) !important;

    border: 2px solid #b88a35 !important;

    clip-path: polygon(
        10% 100%,
        90% 100%,
        82% 12%,
        50% 0%,
        18% 12%
    ) !important;

    box-shadow:
        inset 14px 0 18px rgba(255,225,145,.22),
        inset -16px 0 22px rgba(0,0,0,.75),
        0 12px 25px rgba(0,0,0,.9) !important;

    filter:
        brightness(.95)
        contrast(1.1) !important;

    pointer-events: none !important;
}


/* =========================================================
   LEFT — ملاصقة للطرف الأيسر للسلم
========================================================= */

.entrance .obelisk.obelisk-left {

    left: 6.5% !important;
    right: auto !important;

}


/* =========================================================
   RIGHT — ملاصقة للطرف الأيمن للسلم
========================================================= */

.entrance .obelisk.obelisk-right {

    right: 6.5% !important;
    left: auto !important;

}


/* =========================================================
   تاج المسلة
========================================================= */

.entrance .obelisk.obelisk-left::before,
.entrance .obelisk.obelisk-right::before {

    content: "" !important;

    position: absolute !important;

    top: 13% !important;
    left: 50% !important;

    width: 3px !important;
    height: 72% !important;

    transform: translateX(-50%) !important;

    background:
        linear-gradient(
            180deg,
            transparent,
            #f6d77b 12%,
            #d29c35 50%,
            #f6d77b 88%,
            transparent
        ) !important;

    box-shadow:
        0 0 8px rgba(255,215,105,.8) !important;

    z-index: 5 !important;
}


/* =========================================================
   هيروغليفية واضحة على جسم المسلة
========================================================= */

.entrance .obelisk.obelisk-left::after,
.entrance .obelisk.obelisk-right::after {

    content:
        "𓂀\A"
        "𓋹\A"
        "𓅃\A"
        "𓆣\A"
        "𓏏\A"
        "𓁹\A"
        "𓅓";

    white-space: pre !important;

    position: absolute !important;

    top: 23% !important;
    left: 50% !important;

    transform: translateX(-50%) !important;

    width: 70% !important;

    text-align: center !important;

    font-family: "Times New Roman", serif !important;

    font-size: 22px !important;

    line-height: 1.45 !important;

    color: #f1ce69 !important;

    text-shadow:
        0 1px 2px #120b04,
        0 0 5px rgba(255,210,90,.65) !important;

    opacity: 1 !important;

    z-index: 6 !important;

    pointer-events: none !important;
}


/* =========================================================
   قاعدة المسلة — تثبيت بصري على الأرض
========================================================= */

.entrance .obelisk.obelisk-left,
.entrance .obelisk.obelisk-right {

    border-bottom: 18px solid #2b1b0b !important;

}


/* =========================================================
   إضاءة ذهبية باتجاه السلم
========================================================= */

.entrance .obelisk.obelisk-left {

    filter:
        drop-shadow(12px 0 18px rgba(235,190,70,.38))
        drop-shadow(0 15px 25px rgba(0,0,0,.9)) !important;
}

.entrance .obelisk.obelisk-right {

    filter:
        drop-shadow(-12px 0 18px rgba(235,190,70,.38))
        drop-shadow(0 15px 25px rgba(0,0,0,.9)) !important;
}


/* =========================================================
   خطوط حجرية عرضية
========================================================= */

.entrance .obelisk.obelisk-left,
.entrance .obelisk.obelisk-right {

    background-image:

        linear-gradient(
            180deg,
            transparent 0%,
            transparent 22%,
            rgba(245,210,120,.55) 22.5%,
            transparent 23%,

            transparent 43%,
            rgba(245,210,120,.45) 43.5%,
            transparent 44%,

            transparent 64%,
            rgba(245,210,120,.45) 64.5%,
            transparent 65%,

            transparent 82%,
            rgba(245,210,120,.55) 82.5%,
            transparent 83%
        ),

        linear-gradient(
            90deg,
            #24170b 0%,
            #62451d 12%,
            #a97b32 28%,
            #d4ad55 43%,
            #9a6d29 58%,
            #67471d 78%,
            #211509 100%
        ) !important;
}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 900px) {

    .entrance .obelisk.obelisk-left,
    .entrance .obelisk.obelisk-right {

        width: 75px !important;
        height: 300px !important;
    }

    .entrance .obelisk.obelisk-left {
        left: 3% !important;
    }

    .entrance .obelisk.obelisk-right {
        right: 3% !important;
    }

    .entrance .obelisk.obelisk-left::after,
    .entrance .obelisk.obelisk-right::after {

        font-size: 17px !important;
    }
}
/* =========================================================
   REMOVE FLOATING OBELISKS
   حذف المسلتين نهائيًا بدون التأثير على السلم أو البوابة
========================================================= */

.entrance .obelisk,
.entrance .obelisk-left,
.entrance .obelisk-right {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    pointer-events: none !important;
}
/* =========================================================
   REMOVE THE OLD FLOATING OBELISKS ONLY
========================================================= */

.entrance .obelisk,
.entrance .obelisk-left,
.entrance .obelisk-right,
.entrance > .obelisk,
.entrance > .obelisk-left,
.entrance > .obelisk-right {
    display: none !important;
}
/* =========================================================
   REMOVE FLOATING SIDE SHAPES ONLY
   حذف المسلتين/الأشكال الطايرة فقط
   مع الحفاظ على الـ OBELISKS الموجودة بجوار السلم
========================================================= */

.entrance .pylon {
    display: none !important;
}
/* =========================================================
   🏺 FINAL OBELISKS
   تكبير + زيادة العرض + نقوش فرعونية واضحة
   المسلتين فقط — لا تعديل على السلم أو البوابة
========================================================= */

.entrance .obelisk {
    position: absolute !important;

    /* الحجم الجديد */
    width: 150px !important;
    height: 520px !important;

    bottom: 0 !important;

    margin: 0 !important;

    /* حجر مصري فاخر */
    background:
        linear-gradient(
            90deg,
            #24170b 0%,
            #4e3518 10%,
            #8c6328 25%,
            #c39a48 40%,
            #d6ad5b 50%,
            #9a702f 63%,
            #68491f 82%,
            #24170b 100%
        ) !important;

    border: 2px solid rgba(204,164,75,.9) !important;

    /* شكل المسلة */
    clip-path: polygon(
        0% 100%,
        100% 100%,
        91% 10%,
        50% 0%,
        9% 10%
    ) !important;

    /* عمق وإضاءة */
    box-shadow:
        inset 18px 0 25px rgba(255,225,145,.22),
        inset 25px 0 35px rgba(255,190,70,.10),
        inset -20px 0 30px rgba(0,0,0,.72),
        0 18px 35px rgba(0,0,0,.9),
        0 0 22px rgba(218,170,65,.16) !important;

    filter:
        brightness(.88)
        contrast(1.15)
        saturate(.95) !important;

    z-index: 12 !important;

    pointer-events: none !important;
}


/* =========================================================
   📍 المسلة اليسرى
   نفس مكانها الحالي — لا تحريك
========================================================= */

.entrance .obelisk-left {
    left: 5.5% !important;
    right: auto !important;
}


/* =========================================================
   📍 المسلة اليمنى
   نفس مكانها الحالي — لا تحريك
========================================================= */

.entrance .obelisk-right {
    right: 5.5% !important;
    left: auto !important;
}


/* =========================================================
   𓂀 نقوش هيروغليفية واضحة
========================================================= */

.entrance .obelisk::after {

    content:
        "𓂀   𓋹\A"
        "𓅃   𓆣\A"
        "𓏏   𓂋\A"
        "𓁹   𓅓\A"
        "𓇳   𓊽\A"
        "𓆑   𓎛\A"
        "𓋹   𓂀";

    white-space: pre;

    position: absolute;

    top: 18%;
    left: 50%;

    transform: translateX(-50%);

    width: 70%;

    text-align: center;

    font-family:
        "Times New Roman",
        serif;

    font-size: 25px;

    font-weight: 700;

    line-height: 1.65;

    letter-spacing: 3px;

    color: rgba(241,207,112,.95);

    /* شكل النقش المحفور */
    text-shadow:
        0 2px 2px rgba(35,20,5,.95),
        0 -1px 1px rgba(255,225,145,.55),
        0 0 5px rgba(236,191,70,.35);

    opacity: .95;

    z-index: 20;
}


/* =========================================================
   ✨ شريط ضوء ذهبي على جانب المسلة
========================================================= */

.entrance .obelisk::before {

    content: "";

    position: absolute;

    top: 12%;
    bottom: 10%;

    left: 17%;

    width: 4px;

    background:
        linear-gradient(
            180deg,
            transparent,
            #f9df8a 12%,
            #d29b32 35%,
            #ffe59a 50%,
            #c58b29 70%,
            #f5d477 88%,
            transparent
        );

    box-shadow:
        0 0 7px rgba(255,218,105,.9),
        0 0 16px rgba(255,190,50,.45);

    opacity: .9;

    z-index: 21;
}


/* =========================================================
   🏺 تقسيمات حجرية فرعونية
========================================================= */

.entrance .obelisk {
    background-image:

        /* خطوط حجرية رفيعة */
        linear-gradient(
            180deg,
            transparent 0%,
            transparent 19%,
            rgba(255,220,130,.42) 19.3%,
            rgba(55,35,12,.35) 20%,
            transparent 20.5%,

            transparent 39%,
            rgba(255,220,130,.38) 39.3%,
            rgba(55,35,12,.35) 40%,
            transparent 40.5%,

            transparent 59%,
            rgba(255,220,130,.38) 59.3%,
            rgba(55,35,12,.35) 60%,
            transparent 60.5%,

            transparent 79%,
            rgba(255,220,130,.42) 79.3%,
            rgba(55,35,12,.35) 80%,
            transparent 80.5%
        ),

        /* الحجر */
        linear-gradient(
            90deg,
            #24170b 0%,
            #4e3518 10%,
            #8c6328 25%,
            #c39a48 40%,
            #d6ad5b 50%,
            #9a702f 63%,
            #68491f 82%,
            #24170b 100%
        ) !important;
}


/* =========================================================
   🪨 قاعدة ثقيلة — تمنع إحساس الطيران
========================================================= */

.entrance .obelisk {
    border-bottom: 18px solid #30200d !important;
}


/* =========================================================
   📱 تصغير للشاشات الصغيرة
========================================================= */

@media (max-width: 900px) {

    .entrance .obelisk {
        width: 105px !important;
        height: 390px !important;
    }

    .entrance .obelisk-left {
        left: 3% !important;
    }

    .entrance .obelisk-right {
        right: 3% !important;
    }

    .entrance .obelisk::after {
        font-size: 18px !important;
        line-height: 1.5 !important;
    }
}
/* =========================================================
   🔥 OBELISK OVERRIDE — FINAL
   المسلتين فقط
========================================================= */

.entrance .obelisk.obelisk-left,
.entrance .obelisk.obelisk-right {

    /* إجبار الحجم */
    width: 180px !important;
    height: 580px !important;

    /* إجبار الظهور */
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;

    position: absolute !important;

    bottom: 0 !important;

    margin: 0 !important;
    padding: 0 !important;

    /* الشكل */
    clip-path: polygon(
        0% 100%,
        100% 100%,
        88% 10%,
        50% 0%,
        12% 10%
    ) !important;

    background:
        linear-gradient(
            90deg,
            #1b1208 0%,
            #4a3217 10%,
            #8a6128 24%,
            #c49a46 40%,
            #e0bd68 50%,
            #a87930 63%,
            #65451d 82%,
            #1b1208 100%
        ) !important;

    border: 2px solid #c59a46 !important;

    box-shadow:
        inset 20px 0 30px rgba(255,225,145,.25),
        inset -25px 0 35px rgba(0,0,0,.75),
        0 20px 40px rgba(0,0,0,.95),
        0 0 25px rgba(224,181,70,.2) !important;

    filter:
        brightness(.95)
        contrast(1.15) !important;

    z-index: 20 !important;

    pointer-events: none !important;
}


/* =========================================================
   LEFT
========================================================= */

.entrance .obelisk.obelisk-left {
    left: 4% !important;
    right: auto !important;
}


/* =========================================================
   RIGHT
========================================================= */

.entrance .obelisk.obelisk-right {
    right: 4% !important;
    left: auto !important;
}


/* =========================================================
   𓂀 HIEROGlyphs
========================================================= */

.entrance .obelisk.obelisk-left::after,
.entrance .obelisk.obelisk-right::after {

    content:
        "𓂀 𓋹\A"
        "𓅃 𓆣\A"
        "𓏏 𓂋\A"
        "𓁹 𓅓\A"
        "𓇳 𓊽\A"
        "𓆑 𓎛\A"
        "𓋹 𓂀";

    white-space: pre !important;

    position: absolute !important;

    top: 18% !important;
    left: 50% !important;

    transform: translateX(-50%) !important;

    width: 75% !important;

    height: auto !important;

    display: block !important;

    text-align: center !important;

    font-family:
        "Times New Roman",
        serif !important;

    font-size: 27px !important;

    font-weight: bold !important;

    line-height: 1.65 !important;

    letter-spacing: 2px !important;

    color: #f3d477 !important;

    opacity: 1 !important;

    text-shadow:
        2px 2px 3px #241508,
        -1px -1px 1px rgba(255,235,160,.7),
        0 0 8px rgba(255,210,80,.5) !important;

    z-index: 100 !important;
}


/* =========================================================
   ✨ GOLDEN CARVED EDGE
========================================================= */

.entrance .obelisk.obelisk-left::before,
.entrance .obelisk.obelisk-right::before {

    content: "" !important;

    position: absolute !important;

    top: 12% !important;
    bottom: 8% !important;

    left: 16% !important;

    width: 5px !important;

    background:
        linear-gradient(
            180deg,
            transparent,
            #ffe99b 12%,
            #c8912e 35%,
            #ffe7a0 50%,
            #c8912e 70%,
            #ffe99b 88%,
            transparent
        ) !important;

    box-shadow:
        0 0 8px #f4cd69,
        0 0 18px rgba(255,190,50,.5) !important;

    opacity: 1 !important;

    z-index: 101 !important;
}


/* =========================================================
   🪨 STONE BLOCK DETAILS
========================================================= */

.entrance .obelisk.obelisk-left,
.entrance .obelisk.obelisk-right {

    background-image:

        linear-gradient(
            180deg,
            transparent 0%,
            transparent 20%,
            rgba(255,220,130,.55) 20.3%,
            rgba(45,28,10,.45) 21%,
            transparent 21.5%,

            transparent 40%,
            rgba(255,220,130,.45) 40.3%,
            rgba(45,28,10,.45) 41%,
            transparent 41.5%,

            transparent 60%,
            rgba(255,220,130,.45) 60.3%,
            rgba(45,28,10,.45) 61%,
            transparent 61.5%,

            transparent 80%,
            rgba(255,220,130,.5) 80.3%,
            rgba(45,28,10,.45) 81%,
            transparent 81.5%
        ),

        linear-gradient(
            90deg,
            #1b1208 0%,
            #4a3217 10%,
            #8a6128 24%,
            #c49a46 40%,
            #e0bd68 50%,
            #a87930 63%,
            #65451d 82%,
            #1b1208 100%
        ) !important;
}


/* =========================================================
   🪨 قاعدة ضخمة للمسلة
========================================================= */

.entrance .obelisk.obelisk-left,
.entrance .obelisk.obelisk-right {

    border-bottom: 22px solid #30200e !important;

    box-sizing: border-box !important;
}


/* =========================================================
   📱 MOBILE
========================================================= */

@media (max-width: 900px) {

    .entrance .obelisk.obelisk-left,
    .entrance .obelisk.obelisk-right {

        width: 115px !important;
        height: 430px !important;
    }

    .entrance .obelisk.obelisk-left {
        left: 2% !important;
    }

    .entrance .obelisk.obelisk-right {
        right: 2% !important;
    }

    .entrance .obelisk.obelisk-left::after,
    .entrance .obelisk.obelisk-right::after {

        font-size: 18px !important;
    }
}
/* =========================================================
   🏺 FINAL OBELISKS — OVERRIDE
   المسلتين الموجودتين في الـ HTML فقط
   ========================================================= */

/* الجسم الرئيسي */
.entrance .obelisk.obelisk-left,
.entrance .obelisk.obelisk-right {

    position: absolute !important;

    width: 125px !important;
    height: 520px !important;

    bottom: 0 !important;

    margin: 0 !important;

    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;

    z-index: 30 !important;

    pointer-events: none !important;

    /* شكل مسلة عريض وفخم */
    clip-path: polygon(
        13% 100%,
        87% 100%,
        82% 10%,
        50% 0%,
        18% 10%
    ) !important;

    /* حجر ذهبي داكن + تفاصيل حجرية */
    background:

        /* خطوط حجرية أفقية */
        linear-gradient(
            180deg,
            transparent 0%,
            transparent 15%,
            rgba(247,211,119,.65) 15.3%,
            rgba(75,50,20,.75) 15.8%,
            transparent 16.3%,

            transparent 31%,
            rgba(247,211,119,.55) 31.3%,
            rgba(70,45,18,.75) 31.8%,
            transparent 32.3%,

            transparent 48%,
            rgba(247,211,119,.55) 48.3%,
            rgba(65,42,17,.75) 48.8%,
            transparent 49.3%,

            transparent 65%,
            rgba(247,211,119,.5) 65.3%,
            rgba(60,40,16,.75) 65.8%,
            transparent 66.3%,

            transparent 82%,
            rgba(247,211,119,.45) 82.3%,
            rgba(55,37,15,.75) 82.8%,
            transparent 83.3%
        ),

        /* إضاءة الحجر */
        linear-gradient(
            90deg,
            #24170c 0%,
            #62451f 12%,
            #a97b31 27%,
            #d0a34d 42%,
            #e0bb67 50%,
            #9a6f2b 63%,
            #5b3e1a 82%,
            #21150a 100%
        ) !important;

    border: 2px solid rgba(202,157,65,.8) !important;

    box-shadow:
        inset 18px 0 25px rgba(255,224,140,.25),
        inset -20px 0 28px rgba(0,0,0,.75),
        0 18px 35px rgba(0,0,0,.9),
        0 0 22px rgba(218,170,62,.25) !important;

    filter:
        brightness(.95)
        contrast(1.12)
        saturate(1.05) !important;
}


/* =========================================================
   📍 مكان المسلة اليسرى
   ========================================================= */

.entrance .obelisk.obelisk-left {

    left: 7.5% !important;
    right: auto !important;

}


/* =========================================================
   📍 مكان المسلة اليمنى
   ========================================================= */

.entrance .obelisk.obelisk-right {

    right: 7.5% !important;
    left: auto !important;

}


/* =========================================================
   𓂀 زخارف هيروغليفية واضحة
   ========================================================= */

.entrance .obelisk.obelisk-left::after,
.entrance .obelisk.obelisk-right::after {

    content:
        "𓂀\A"
        "𓋹\A"
        "𓅃\A"
        "𓆣\A"
        "𓏏\A"
        "𓁹\A"
        "𓅓";

    white-space: pre !important;

    position: absolute !important;

    top: 17% !important;
    left: 50% !important;

    transform: translateX(-50%) !important;

    width: 55% !important;
    height: 65% !important;

    display: block !important;

    text-align: center !important;

    color: #f0ce72 !important;

    font-family:
        "Times New Roman",
        serif !important;

    font-size: 24px !important;

    font-weight: 600 !important;

    line-height: 1.65 !important;

    text-shadow:
        0 1px 2px #160d04,
        0 0 4px rgba(255,215,110,.65) !important;

    opacity: .95 !important;

    z-index: 50 !important;
}


/* =========================================================
   ✨ عمود إضاءة ذهبي على الجانب
   ========================================================= */

.entrance .obelisk.obelisk-left::before,
.entrance .obelisk.obelisk-right::before {

    content: "" !important;

    position: absolute !important;

    top: 12% !important;
    bottom: 10% !important;

    width: 4px !important;

    display: block !important;

    background:
        linear-gradient(
            180deg,
            transparent,
            #f7d87d 12%,
            #fff0aa 45%,
            #d09b35 70%,
            #f7d87d 88%,
            transparent
        ) !important;

    box-shadow:
        0 0 7px rgba(255,215,100,.9),
        0 0 18px rgba(255,190,55,.4) !important;

    opacity: .9 !important;

    z-index: 45 !important;
}


/* اليسار — الإضاءة ناحية السلم */
.entrance .obelisk.obelisk-left::before {
    right: 15% !important;
    left: auto !important;
}


/* اليمين — الإضاءة ناحية السلم */
.entrance .obelisk.obelisk-right::before {
    left: 15% !important;
    right: auto !important;
}


/* =========================================================
   🪨 قاعدة المسلة — تثبيت بصري على الأرض
   ========================================================= */

.entrance .obelisk.obelisk-left,
.entrance .obelisk.obelisk-right {

    border-bottom:
        16px solid #35220e !important;

}


/* =========================================================
   👑 تاج ذهبي واضح
   ========================================================= */

.entrance .obelisk.obelisk-left,
.entrance .obelisk.obelisk-right {

    overflow: visible !important;

}


/* =========================================================
   📱 RESPONSIVE
   ========================================================= */

@media (max-width: 1000px) {

    .entrance .obelisk.obelisk-left,
    .entrance .obelisk.obelisk-right {

        width: 95px !important;
        height: 400px !important;

    }

    .entrance .obelisk.obelisk-left {
        left: 4% !important;
    }

    .entrance .obelisk.obelisk-right {
        right: 4% !important;
    }

    .entrance .obelisk.obelisk-left::after,
    .entrance .obelisk.obelisk-right::after {

        font-size: 18px !important;
        line-height: 1.55 !important;

    }
}


@media (max-width: 650px) {

    .entrance .obelisk.obelisk-left,
    .entrance .obelisk.obelisk-right {

        width: 70px !important;
        height: 300px !important;

    }

    .entrance .obelisk.obelisk-left {
        left: 2% !important;
    }

    .entrance .obelisk.obelisk-right {
        right: 2% !important;
    }

    .entrance .obelisk.obelisk-left::after,
    .entrance .obelisk.obelisk-right::after {

        font-size: 14px !important;

    }
}
/* =========================================================
   🏺 FINAL OBELISK SIZE
   تكبير وعرض المسلتين الموجودتين فقط
========================================================= */

.entrance .obelisk {
    width: 155px !important;
    height: 540px !important;

    bottom: 0 !important;

    margin: 0 !important;

    /* جسم حجري عريض وفخم */
    background:
        linear-gradient(
            90deg,
            #171008 0%,
            #3d2812 10%,
            #765020 25%,
            #b58432 40%,
            #d1a54d 50%,
            #9b6d27 63%,
            #654419 80%,
            #211508 100%
        ) !important;

    border: 2px solid #9f762d !important;

    /* رأس المسلة */
    clip-path: polygon(
        0% 100%,
        100% 100%,
        91% 10%,
        50% 0%,
        9% 10%
    ) !important;

    box-shadow:
        inset 18px 0 25px rgba(255,220,130,.25),
        inset -20px 0 28px rgba(0,0,0,.72),
        0 20px 40px rgba(0,0,0,.9),
        0 0 22px rgba(214,165,55,.18) !important;

    filter:
        brightness(.9)
        contrast(1.15) !important;

    z-index: 12 !important;
}


/* =========================================================
   📍 أماكنهم — نحافظ على الجانبين
========================================================= */

.entrance .obelisk-left {
    left: 5.5% !important;
    right: auto !important;
}

.entrance .obelisk-right {
    right: 5.5% !important;
    left: auto !important;
}


/* =========================================================
   𓂀 نقوش هيروغليفية أكبر وواضحة
========================================================= */

.entrance .obelisk::after {

    content:
        "𓂀\A"
        "𓋹\A"
        "𓅃\A"
        "𓆣\A"
        "𓏏\A"
        "𓁹\A"
        "𓅓\A"
        "𓂋";

    white-space: pre !important;

    position: absolute !important;

    top: 17% !important;
    left: 50% !important;

    transform: translateX(-50%) !important;

    width: 65% !important;

    text-align: center !important;

    font-family: serif !important;
    font-size: 28px !important;
    line-height: 1.5 !important;

    color: #f0cc67 !important;

    text-shadow:
        0 1px 2px #100a04,
        0 0 5px rgba(255,210,90,.55) !important;

    opacity: .95 !important;

    z-index: 30 !important;
}


/* =========================================================
   ✨ إضاءة ذهبية طولية
========================================================= */

.entrance .obelisk::before {

    content: "" !important;

    position: absolute !important;

    top: 12% !important;
    bottom: 10% !important;

    left: 15% !important;

    width: 4px !important;

    background:
        linear-gradient(
            180deg,
            transparent,
            #f8dc82 12%,
            #c99532 50%,
            #f8dc82 88%,
            transparent
        ) !important;

    box-shadow:
        0 0 8px rgba(255,215,100,.8),
        0 0 18px rgba(255,190,50,.35) !important;

    opacity: .9 !important;

    z-index: 31 !important;
}


/* =========================================================
   🪨 قاعدة المسلة — تثبيت بصري على الأرض
========================================================= */

.entrance .obelisk {
    border-bottom: 18px solid #2a1a0b !important;
}


/* =========================================================
   📱 تصغير تدريجي للشاشات
========================================================= */

@media (max-width: 1000px) {

    .entrance .obelisk {
        width: 115px !important;
        height: 410px !important;
    }

    .entrance .obelisk-left {
        left: 3% !important;
    }

    .entrance .obelisk-right {
        right: 3% !important;
    }
}


@media (max-width: 650px) {

    .entrance .obelisk {
        width: 78px !important;
        height: 300px !important;
    }

    .entrance .obelisk-left {
        left: 1% !important;
    }

    .entrance .obelisk-right {
        right: 1% !important;
    }

    .entrance .obelisk::after {
        font-size: 18px !important;
    }
}
/* =========================================================
   🏺 FINAL OBELISKS — SAME SIZE / MUCH LARGER
   المسلتين فقط — لا تعديل على السلم أو البوابة
========================================================= */

/* نفس الشكل والمقاس للمسلتين */
.entrance .obelisk-left,
.entrance .obelisk-right {

    position: absolute !important;

    /* 🔥 تكبير واضح */
    width: 180px !important;
    min-width: 180px !important;
    max-width: 180px !important;

    height: 560px !important;
    min-height: 560px !important;
    max-height: 560px !important;

    bottom: 0 !important;
    top: auto !important;

    margin: 0 !important;
    padding: 0 !important;

    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;

    box-sizing: border-box !important;

    transform: none !important;
    scale: 1 !important;

    /* حجر مصري ضخم */
    background:
        linear-gradient(
            90deg,
            #171008 0%,
            #382512 8%,
            #68451d 20%,
            #a8792d 34%,
            #d1a34a 48%,
            #b48332 58%,
            #76501e 73%,
            #402914 88%,
            #171008 100%
        ) !important;

    border: 2px solid #9d742b !important;

    /* نفس الرأس بالضبط */
    clip-path: polygon(
        0% 100%,
        100% 100%,
        92% 10%,
        50% 0%,
        8% 10%
    ) !important;

    box-shadow:
        inset 20px 0 30px rgba(255,220,125,.28),
        inset -22px 0 32px rgba(0,0,0,.75),
        0 18px 35px rgba(0,0,0,.9),
        0 0 25px rgba(212,175,55,.2) !important;

    filter:
        brightness(.92)
        contrast(1.18)
        saturate(1.05) !important;

    z-index: 15 !important;

    pointer-events: none !important;
}


/* =========================================================
   📍 المسلة اليسرى
========================================================= */

.entrance .obelisk-left {

    left: 3.5% !important;
    right: auto !important;
}


/* =========================================================
   📍 المسلة اليمنى
========================================================= */

.entrance .obelisk-right {

    right: 3.5% !important;
    left: auto !important;
}


/* =========================================================
   𓂀𓋹𓅃 نقوش فرعونية كبيرة
========================================================= */

.entrance .obelisk-left::after,
.entrance .obelisk-right::after {

    content:
        "𓂀\A"
        "𓋹\A"
        "𓅃\A"
        "𓆣\A"
        "𓏏\A"
        "𓁹\A"
        "𓅓\A"
        "𓂋";

    white-space: pre !important;

    position: absolute !important;

    top: 15% !important;
    left: 50% !important;

    width: 60% !important;

    transform: translateX(-50%) !important;

    text-align: center !important;

    color: #f0cd70 !important;

    font-family:
        "Times New Roman",
        serif !important;

    font-size: 30px !important;
    line-height: 1.48 !important;

    text-shadow:
        0 2px 2px rgba(0,0,0,.95),
        0 0 5px rgba(255,210,100,.6) !important;

    opacity: .95 !important;

    z-index: 30 !important;
}


/* =========================================================
   ✨ خط ذهبي جانبي
========================================================= */

.entrance .obelisk-left::before,
.entrance .obelisk-right::before {

    content: "" !important;

    position: absolute !important;

    top: 12% !important;
    bottom: 10% !important;

    left: 15% !important;

    width: 4px !important;

    background:
        linear-gradient(
            180deg,
            transparent 0%,
            #f8df8b 12%,
            #d19b32 50%,
            #f8df8b 88%,
            transparent 100%
        ) !important;

    box-shadow:
        0 0 8px rgba(255,215,100,.9),
        0 0 18px rgba(255,190,50,.4) !important;

    opacity: .95 !important;

    z-index: 31 !important;
}


/* =========================================================
   🏛️ شرائط زخرفية أفقية
========================================================= */

.entrance .obelisk-left,
.entrance .obelisk-right {

    background-image:

        linear-gradient(
            180deg,

            transparent 0%,
            transparent 14%,

            rgba(255,220,125,.65) 14.3%,
            rgba(70,45,18,.45) 15%,

            transparent 15.7%,
            transparent 30%,

            rgba(255,220,125,.5) 30.3%,
            rgba(70,45,18,.45) 31%,

            transparent 31.7%,
            transparent 47%,

            rgba(255,220,125,.55) 47.3%,
            rgba(70,45,18,.45) 48%,

            transparent 48.7%,
            transparent 64%,

            rgba(255,220,125,.5) 64.3%,
            rgba(70,45,18,.45) 65%,

            transparent 65.7%,
            transparent 81%,

            rgba(255,220,125,.5) 81.3%,
            rgba(70,45,18,.45) 82%,

            transparent 82.7%
        ),

        linear-gradient(
            90deg,
            #171008 0%,
            #382512 8%,
            #68451d 20%,
            #a8792d 34%,
            #d1a34a 48%,
            #b48332 58%,
            #76501e 73%,
            #402914 88%,
            #171008 100%
        ) !important;
}


/* =========================================================
   🪨 قاعدة المسلة — تثبيت على الأرض
========================================================= */

.entrance .obelisk-left,
.entrance .obelisk-right {

    border-bottom: 22px solid #24170b !important;

    box-shadow:
        inset 20px 0 30px rgba(255,220,125,.25),
        inset -22px 0 32px rgba(0,0,0,.78),
        0 22px 40px rgba(0,0,0,.95),
        0 0 25px rgba(212,175,55,.18) !important;
}


/* =========================================================
   📱 فقط تصغير الحجم على الشاشات الصغيرة
========================================================= */

@media (max-width: 900px) {

    .entrance .obelisk-left,
    .entrance .obelisk-right {

        width: 115px !important;
        min-width: 115px !important;
        max-width: 115px !important;

        height: 400px !important;
        min-height: 400px !important;
        max-height: 400px !important;
    }

    .entrance .obelisk-left {
        left: 2% !important;
    }

    .entrance .obelisk-right {
        right: 2% !important;
    }
}
/* =========================================================
   🔥 GRAND PHARAONIC STAIR TORCHES
   مشاعل فخمة على جانبي السلم
========================================================= */

.entrance .stair-torch {
    position: absolute !important;

    bottom: 4.5% !important;

    width: 92px !important;
    height: 310px !important;

    z-index: 40 !important;

    pointer-events: none !important;

    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
}


/* =========================================================
   📍 POSITION
========================================================= */

.entrance .stair-torch-left {
    left: 7.5% !important;
}

.entrance .stair-torch-right {
    right: 7.5% !important;
}


/* =========================================================
   🏺 TORCH PILLAR
========================================================= */

.entrance .stair-torch .torch-pillar {

    position: absolute;

    left: 50%;
    bottom: 25px;

    transform: translateX(-50%);

    width: 48px;
    height: 175px;

    background:
        linear-gradient(
            90deg,
            #21150b 0%,
            #5b3d19 18%,
            #a8782c 38%,
            #d1a548 50%,
            #8a6124 66%,
            #432c13 85%,
            #160d06 100%
        );

    border:
        2px solid rgba(214,174,73,.75);

    box-shadow:
        inset 8px 0 12px rgba(255,220,120,.20),
        inset -8px 0 12px rgba(0,0,0,.65),
        0 8px 18px rgba(0,0,0,.8);

    overflow: hidden;
}


/* =========================================================
   ✨ GOLDEN CARVED LINE
========================================================= */

.entrance .stair-torch .torch-gold-line {

    position: absolute;

    top: 12px;
    bottom: 12px;

    left: 7px;

    width: 2px;

    background:
        linear-gradient(
            180deg,
            transparent,
            #f6d878 15%,
            #c89532 50%,
            #f6d878 85%,
            transparent
        );

    box-shadow:
        0 0 6px rgba(255,211,93,.65);
}


/* =========================================================
   𓂀 HIEROGLYPHS
========================================================= */

.entrance .stair-torch .torch-hieroglyphs {

    position: absolute;

    top: 25px;
    left: 50%;

    transform: translateX(-50%);

    text-align: center;

    font-family: serif;

    font-size: 20px;

    line-height: 1.7;

    color: #e6c260;

    text-shadow:
        0 1px 2px #120a04,
        0 0 6px rgba(240,190,70,.45);

    opacity: .9;
}


/* =========================================================
   🏺 TORCH BASE
========================================================= */

.entrance .stair-torch .torch-base {

    position: absolute;

    left: 50%;
    bottom: 0;

    transform: translateX(-50%);

    width: 76px;
    height: 28px;

    background:
        linear-gradient(
            180deg,
            #d0a34b,
            #69471b 35%,
            #29190b 100%
        );

    border:
        2px solid #a97b2d;

    box-shadow:
        0 7px 15px rgba(0,0,0,.8),
        0 0 10px rgba(218,169,54,.2);
}


/* =========================================================
   🔥 FIRE BOWL
========================================================= */

.entrance .stair-torch .torch-bowl {

    position: absolute;

    left: 50%;
    bottom: 188px;

    transform: translateX(-50%);

    width: 72px;
    height: 38px;

    border-radius: 50% 50% 38% 38%;

    background:
        linear-gradient(
            180deg,
            #e0b653,
            #82591e 50%,
            #301b09
        );

    border:
        2px solid #c69635;

    box-shadow:
        inset 0 -8px 12px rgba(0,0,0,.65),
        0 0 12px rgba(255,177,45,.3);
}


/* Bowl rim */

.entrance .stair-torch .bowl-rim {

    position: absolute;

    left: 50%;
    top: 5px;

    transform: translateX(-50%);

    width: 58px;
    height: 12px;

    border-radius: 50%;

    border:
        2px solid #f0c85e;

    background:
        radial-gradient(
            ellipse,
            #321707,
            #120904
        );

    box-shadow:
        0 0 8px rgba(255,173,39,.45);
}


/* =========================================================
   🌟 FIRE GLOW
========================================================= */

.entrance .stair-torch .bowl-glow {

    position: absolute;

    left: 50%;
    top: -28px;

    transform: translateX(-50%);

    width: 95px;
    height: 95px;

    border-radius: 50%;

    background:
        radial-gradient(
            circle,
            rgba(255,205,75,.48) 0%,
            rgba(255,146,25,.25) 30%,
            rgba(255,110,10,.10) 52%,
            transparent 72%
        );

    filter: blur(7px);

    animation:
        torchGlow 1.15s ease-in-out infinite alternate;
}


/* =========================================================
   🔥 MAIN FLAME
========================================================= */

.entrance .stair-torch .torch-flame {

    position: absolute;

    left: 50%;
    bottom: 213px;

    width: 52px;
    height: 82px;

    transform:
        translateX(-50%)
        rotate(-2deg);

    transform-origin: bottom center;

    z-index: 10;

    filter:
        drop-shadow(0 0 8px rgba(255,150,30,.85))
        drop-shadow(0 0 18px rgba(255,100,10,.45));

    animation:
        flameMove .75s ease-in-out infinite alternate;
}


/* =========================================================
   🔥 OUTER FLAME
========================================================= */

.entrance .stair-torch .flame-outer {

    position: absolute;

    left: 50%;
    bottom: 0;

    width: 48px;
    height: 75px;

    transform: translateX(-50%);

    background:
        linear-gradient(
            180deg,
            #fff1a1 0%,
            #ffc52f 22%,
            #ff7b13 58%,
            #d93408 100%
        );

    clip-path: polygon(
        50% 0%,
        67% 20%,
        62% 38%,
        83% 29%,
        76% 57%,
        100% 48%,
        84% 82%,
        67% 100%,
        32% 100%,
        15% 83%,
        0% 57%,
        22% 61%,
        18% 35%,
        37% 43%,
        32% 20%
    );

    animation:
        flameOuter .65s ease-in-out infinite alternate;
}


/* =========================================================
   🔥 INNER FLAME
========================================================= */

.entrance .stair-torch .flame-inner {

    position: absolute;

    left: 50%;
    bottom: 5px;

    width: 29px;
    height: 53px;

    transform: translateX(-50%);

    background:
        linear-gradient(
            180deg,
            #fffbd0,
            #ffe66a 35%,
            #ffad1e 75%,
            #ff6810
        );

    clip-path: polygon(
        50% 0%,
        72% 27%,
        62% 45%,
        87% 41%,
        73% 72%,
        50% 100%,
        27% 72%,
        13% 41%,
        38% 46%,
        28% 25%
    );

    animation:
        flameInner .48s ease-in-out infinite alternate;
}


/* =========================================================
   🔥 HOT CORE
========================================================= */

.entrance .stair-torch .flame-core {

    position: absolute;

    left: 50%;
    bottom: 7px;

    width: 14px;
    height: 30px;

    transform: translateX(-50%);

    background:
        linear-gradient(
            180deg,
            #ffffff,
            #fff6a0,
            #ffd12f
        );

    border-radius:
        50% 50% 45% 45%;

    filter: blur(.5px);

    animation:
        flameCore .35s ease-in-out infinite alternate;
}


/* =========================================================
   ✨ FLYING SPARKS
========================================================= */

.entrance .stair-torch .torch-spark {

    position: absolute;

    width: 4px;
    height: 4px;

    border-radius: 50%;

    background: #ffd95a;

    box-shadow:
        0 0 6px #ffae22,
        0 0 12px rgba(255,130,15,.7);

    opacity: 0;

    z-index: 30;
}


.entrance .stair-torch .spark-1 {
    left: 42%;
    bottom: 286px;

    animation:
        sparkOne 1.8s ease-out infinite;
}


.entrance .stair-torch .spark-2 {
    left: 60%;
    bottom: 270px;

    animation:
        sparkTwo 2.2s ease-out infinite .5s;
}


.entrance .stair-torch .spark-3 {
    left: 35%;
    bottom: 260px;

    animation:
        sparkThree 1.6s ease-out infinite 1s;
}


/* =========================================================
   🔥 ANIMATIONS
========================================================= */

@keyframes flameMove {

    0% {
        transform:
            translateX(-50%)
            rotate(-4deg)
            scaleX(.94)
            scaleY(.97);
    }

    45% {
        transform:
            translateX(-48%)
            rotate(3deg)
            scaleX(1.04)
            scaleY(1.04);
    }

    100% {
        transform:
            translateX(-52%)
            rotate(-3deg)
            scaleX(.92)
            scaleY(1.08);
    }
}


@keyframes flameOuter {

    0% {
        transform:
            translateX(-50%)
            scale(.94, .96)
            rotate(-2deg);
    }

    50% {
        transform:
            translateX(-48%)
            scale(1.05, 1.04)
            rotate(4deg);
    }

    100% {
        transform:
            translateX(-53%)
            scale(.92, 1.08)
            rotate(-4deg);
    }
}


@keyframes flameInner {

    0% {
        transform:
            translateX(-50%)
            scale(.9, .94)
            rotate(3deg);
    }

    100% {
        transform:
            translateX(-47%)
            scale(1.08, 1.06)
            rotate(-5deg);
    }
}


@keyframes flameCore {

    0% {
        opacity: .7;
        transform:
            translateX(-50%)
            scale(.85, .9);
    }

    100% {
        opacity: 1;
        transform:
            translateX(-50%)
            scale(1.08, 1.12);
    }
}


@keyframes torchGlow {

    0% {
        opacity: .55;
        transform:
            translateX(-50%)
            scale(.88);
    }

    100% {
        opacity: .95;
        transform:
            translateX(-50%)
            scale(1.15);
    }
}


@keyframes sparkOne {

    0% {
        opacity: 0;
        transform: translate(0, 0) scale(.4);
    }

    15% {
        opacity: 1;
    }

    100% {
        opacity: 0;
        transform: translate(-14px, -58px) scale(.1);
    }
}


@keyframes sparkTwo {

    0% {
        opacity: 0;
        transform: translate(0, 0) scale(.4);
    }

    15% {
        opacity: 1;
    }

    100% {
        opacity: 0;
        transform: translate(16px, -72px) scale(.1);
    }
}


@keyframes sparkThree {

    0% {
        opacity: 0;
        transform: translate(0, 0) scale(.4);
    }

    15% {
        opacity: 1;
    }

    100% {
        opacity: 0;
        transform: translate(-8px, -48px) scale(.1);
    }
}


/* =========================================================
   📱 RESPONSIVE
========================================================= */

@media (max-width: 900px) {

    .entrance .stair-torch {
        transform: scale(.78);
        transform-origin: bottom center;
    }

    .entrance .stair-torch-left {
        left: 3% !important;
    }

    .entrance .stair-torch-right {
        right: 3% !important;
    }
}


@media (max-width: 600px) {

    .entrance .stair-torch {
        transform: scale(.62);
    }

    .entrance .stair-torch-left {
        left: 0 !important;
    }

    .entrance .stair-torch-right {
        right: 0 !important;
    }
}
/* =========================================================
   🔥 FINAL TORCH POSITION
   المشاعل خارج السلم عند الأطراف
========================================================= */

.entrance .stair-torch {
    bottom: 4.5% !important;
    z-index: 40 !important;
}


/* المشعل الشمال — في المنطقة المحددة بالأحمر */
.entrance .stair-torch-left {
    left: 1% !important;
    right: auto !important;
}


/* المشعل اليمين — مقابل الشمال */
.entrance .stair-torch-right {
    right: 1% !important;
    left: auto !important;
}
/* =========================================================
   🔥 FINAL TORCH POSITION
   تعديل مكان الشعلة وقاعدتها فقط
========================================================= */

/* الشعلة اليسرى */
.entrance [class*="torch-left"] {
    position: absolute !important;

    /* مكانها: جنب السلم وليس فوقه */
    left: 6.5% !important;
    right: auto !important;

    /* تثبيت القاعدة على مستوى الأرض */
    bottom: 3% !important;

    /* حجم متناسق */
    width: 82px !important;
    height: 285px !important;

    margin: 0 !important;
    transform: none !important;

    z-index: 18 !important;

    /* تمنع أي تحريك أو دوران قديم */
    top: auto !important;
}


/* الشعلة اليمنى */
.entrance [class*="torch-right"] {
    position: absolute !important;

    right: 6.5% !important;
    left: auto !important;

    bottom: 3% !important;

    width: 82px !important;
    height: 285px !important;

    margin: 0 !important;
    transform: none !important;

    z-index: 18 !important;

    top: auto !important;
}


/* =========================================================
   🪨 قاعدة الشعلة — تلامس الأرض فعليًا
========================================================= */

.entrance [class*="torch-left"]::after,
.entrance [class*="torch-right"]::after {

    bottom: 0 !important;

    box-shadow:
        0 8px 14px rgba(0,0,0,.8),
        0 0 12px rgba(212,175,55,.22) !important;
}


/* =========================================================
   🔥 توهج النار بدون تغيير مكانها
========================================================= */

.entrance [class*="torch-left"]::before,
.entrance [class*="torch-right"]::before {

    filter:
        drop-shadow(0 0 8px rgba(255,170,35,.85))
        drop-shadow(0 0 20px rgba(255,120,10,.4)) !important;
}


/* =========================================================
   📱 الشاشات الصغيرة
========================================================= */

@media (max-width: 900px) {

    .entrance [class*="torch-left"] {
        left: 3% !important;
        bottom: 3% !important;
        width: 65px !important;
        height: 235px !important;
    }

    .entrance [class*="torch-right"] {
        right: 3% !important;
        bottom: 3% !important;
        width: 65px !important;
        height: 235px !important;
    }
}
/* =========================================================
   🔥 TORCH FLAME — FINAL
   اللهب ملاصق لقالب المشعل
========================================================= */

.entrance .torch {
    position: relative !important;
}


/* جسم اللهب الرئيسي */
.entrance .torch .torch-flame {
    position: absolute !important;

    /* أهم تعديل: اللهب يطلع من فوق القالب مباشرة */
    left: 50% !important;
    top: -58px !important;

    width: 48px !important;
    height: 70px !important;

    margin: 0 !important;

    transform:
        translateX(-50%)
        rotate(-2deg) !important;

    transform-origin: 50% 100% !important;

    /* شكل لهب مدبب بدل البيضاوي */
    clip-path: polygon(
        50% 0%,
        61% 19%,
        58% 32%,
        78% 22%,
        72% 45%,
        91% 39%,
        83% 66%,
        68% 84%,
        50% 100%,
        31% 86%,
        17% 67%,
        9% 48%,
        27% 54%,
        22% 32%,
        40% 43%,
        37% 20%
    ) !important;

    background:
        radial-gradient(
            ellipse at 50% 78%,
            #fffbe0 0%,
            #fff2a1 18%,
            #ffd12e 39%,
            #ff8a00 64%,
            #f04408 82%,
            #a91f08 100%
        ) !important;

    filter:
        drop-shadow(0 0 5px rgba(255,210,70,.95))
        drop-shadow(0 0 15px rgba(255,120,0,.65))
        drop-shadow(0 0 28px rgba(255,80,0,.25)) !important;

    z-index: 50 !important;

    animation:
        torch-flame-move .65s ease-in-out infinite alternate !important;
}


/* =========================================================
   🔥 قلب الشعلة — أبيض/أصفر
========================================================= */

.entrance .torch .torch-flame::before {
    content: "" !important;

    position: absolute !important;

    left: 50% !important;
    bottom: 5px !important;

    width: 20px !important;
    height: 43px !important;

    transform: translateX(-50%) !important;

    clip-path: polygon(
        50% 0%,
        68% 28%,
        61% 48%,
        78% 42%,
        70% 72%,
        50% 100%,
        30% 76%,
        22% 50%,
        39% 57%,
        33% 29%
    ) !important;

    background:
        linear-gradient(
            180deg,
            #fffef0 0%,
            #fffbd0 25%,
            #fff36b 58%,
            #ffb51b 100%
        ) !important;

    filter:
        drop-shadow(0 0 5px rgba(255,240,150,.9)) !important;

    animation:
        torch-core-move .4s ease-in-out infinite alternate !important;
}


/* =========================================================
   🔥 لسان نار جانبي
========================================================= */

.entrance .torch .torch-flame::after {
    content: "" !important;

    position: absolute !important;

    left: 4px !important;
    bottom: 8px !important;

    width: 17px !important;
    height: 42px !important;

    clip-path: polygon(
        55% 0%,
        70% 30%,
        100% 22%,
        78% 55%,
        82% 78%,
        55% 100%,
        28% 74%,
        5% 52%,
        32% 57%,
        23% 30%
    ) !important;

    background:
        linear-gradient(
            180deg,
            #ffd94a,
            #ff8510 55%,
            #ed3b08
        ) !important;

    transform-origin: 50% 100% !important;

    animation:
        torch-side-move .5s ease-in-out infinite alternate !important;
}


/* =========================================================
   🔥 حركة اللهب
========================================================= */

@keyframes torch-flame-move {

    0% {
        transform:
            translateX(-50%)
            rotate(-4deg)
            scaleX(.92)
            scaleY(.96);
    }

    50% {
        transform:
            translateX(-50%)
            rotate(3deg)
            scaleX(1.05)
            scaleY(1.08);
    }

    100% {
        transform:
            translateX(-50%)
            rotate(-2deg)
            scaleX(.96)
            scaleY(1.03);
    }
}


@keyframes torch-core-move {

    0% {
        transform:
            translateX(-50%)
            scale(.88, .94)
            rotate(-3deg);
    }

    100% {
        transform:
            translateX(-50%)
            scale(1.08, 1.05)
            rotate(3deg);
    }
}


@keyframes torch-side-move {

    0% {
        transform:
            rotate(-12deg)
            scale(.9, .95);
    }

    100% {
        transform:
            rotate(12deg)
            scale(1.08, 1.06);
    }
}


/* =========================================================
   🔥 اختلاف بسيط بين الشعلة اليمين والشمال
========================================================= */

.entrance .torch-right .torch-flame {
    animation-delay: -.22s !important;
}

.entrance .torch-right .torch-flame::before {
    animation-delay: -.12s !important;
}

.entrance .torch-right .torch-flame::after {
    animation-delay: -.27s !important;
}
/* =========================================================
   🏺 KEMET LIBRARY TITLE
========================================================= */

.library-title {
    position: relative !important;

    font-family: Georgia, "Times New Roman", serif !important;

    font-size: clamp(52px, 6vw, 92px) !important;

    font-weight: 700 !important;

    letter-spacing: .14em !important;

    text-align: center !important;

    color: #e8bd58 !important;

    text-shadow:
        0 2px 0 #6f4818,
        0 4px 8px rgba(0,0,0,.8),
        0 0 14px rgba(232,189,88,.28) !important;

    line-height: .95 !important;

    transform: none !important;

    z-index: 100 !important;
}


/* =========================================================
   ✨ استبدال الزخرفة الهيروغليفية
========================================================= */

.library-title::after {
    content: "KEMET" !important;

    display: block !important;

    margin-top: 16px !important;

    font-family:
        Georgia,
        "Times New Roman",
        serif !important;

    font-size: clamp(18px, 2vw, 30px) !important;

    font-weight: 500 !important;

    letter-spacing: .55em !important;

    text-indent: .55em !important;

    color: #d8ad4d !important;

    text-shadow:
        0 0 6px rgba(226,183,78,.45),
        0 2px 3px rgba(0,0,0,.8) !important;

    opacity: .95 !important;
}
/* =========================================================
   👑 KEMET — HEADER TITLE
   تعديل العنوان فقط
========================================================= */

.entrance .kemet-title {
    position: relative !important;

    display: block !important;

    width: 100% !important;

    margin: 0 auto !important;

    text-align: center !important;

    font-family:
        Georgia,
        "Times New Roman",
        serif !important;

    font-size: clamp(48px, 6vw, 88px) !important;

    font-weight: 700 !important;

    letter-spacing: .12em !important;

    line-height: 1 !important;

    color: #e7b94f !important;

    text-shadow:
        0 2px 0 #704817,
        0 4px 8px rgba(0,0,0,.9),
        0 0 18px rgba(231,185,79,.35) !important;

    transform: none !important;
}


/* الكلمة الفرعونية الجديدة */

.entrance .kemet-subtitle {
    display: block !important;

    margin-top: 10px !important;

    text-align: center !important;

    font-family:
        Georgia,
        "Times New Roman",
        serif !important;

    font-size: clamp(18px, 2vw, 28px) !important;

    font-weight: 600 !important;

    letter-spacing: .55em !important;

    text-indent: .55em !important;

    color: #d9ad4b !important;

    text-shadow:
        0 0 8px rgba(230,185,75,.5),
        0 2px 4px rgba(0,0,0,.8) !important;
}
/* =========================================================
   KEMET JOURNEY — ضبط العنوان داخل القوس
========================================================= */

.gu-library-text {
    overflow: visible !important;
}

.gu-library-text textPath {
    font-size: 1em !important;
    letter-spacing: 0.04em !important;
}
/* =========================================================
   👑 PHARAONIC TITLE — NO ARC
   عنوان مستقيم بدون أي قوس
========================================================= */

.pharaoh-title {
    position: relative !important;

    width: min(92%, 1150px) !important;
    min-height: 145px !important;

    margin: 0 auto !important;

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

    box-sizing: border-box !important;

    background:
        linear-gradient(
            180deg,
            rgba(39,25,12,.96),
            rgba(105,70,27,.92) 45%,
            rgba(42,27,13,.98)
        ) !important;

    border-top: 3px solid #d8ad4e !important;
    border-bottom: 3px solid #8c6327 !important;

    box-shadow:
        0 0 0 1px rgba(241,205,111,.35),
        inset 0 0 25px rgba(0,0,0,.65),
        0 8px 25px rgba(0,0,0,.65) !important;

    overflow: hidden !important;

    z-index: 100 !important;
}


/* =========================================================
   ✨ زخرفة داخلية للإطار
========================================================= */

.pharaoh-title::before {
    content: "" !important;

    position: absolute !important;

    inset: 10px !important;

    border: 1px solid rgba(220,180,75,.65) !important;

    box-shadow:
        inset 0 0 12px rgba(0,0,0,.65),
        0 0 8px rgba(220,175,65,.15) !important;

    pointer-events: none !important;
}


/* خط ذهبي مركزي أعلى وأسفل */

.pharaoh-title::after {
    content: "" !important;

    position: absolute !important;

    left: 14% !important;
    right: 14% !important;

    bottom: 15px !important;

    height: 2px !important;

    background:
        linear-gradient(
            90deg,
            transparent,
            #8c6224,
            #f1d27a,
            #fff0aa,
            #f1d27a,
            #8c6224,
            transparent
        ) !important;

    box-shadow:
        0 0 7px rgba(238,197,90,.5) !important;
}


/* =========================================================
   👑 منطقة العنوان
========================================================= */

.title-center {
    position: relative !important;

    z-index: 5 !important;

    text-align: center !important;

    width: 75% !important;

    padding: 18px 0 25px !important;
}


/* =========================================================
   𓂀 الهيروغليفية فوق الاسم
========================================================= */

.title-hieroglyphs {
    display: block !important;

    margin-bottom: 2px !important;

    color: #d7ad50 !important;

    font-family:
        "Segoe UI Symbol",
        "Noto Sans Egyptian Hieroglyphs",
        serif !important;

    font-size: 22px !important;

    letter-spacing: 13px !important;

    opacity: .8 !important;

    text-shadow:
        0 1px 2px #120b05,
        0 0 7px rgba(226,180,70,.35) !important;
}


/* =========================================================
   🏛️ الاسم الرئيسي
========================================================= */

.page-title {
    position: relative !important;

    display: block !important;

    width: 100% !important;

    margin: 0 !important;

    padding: 0 !important;

    color: #e7bd5d !important;

    font-family:
        Georgia,
        "Times New Roman",
        serif !important;

    font-size: clamp(42px, 5vw, 78px) !important;

    font-weight: 700 !important;

    line-height: .95 !important;

    letter-spacing: 5px !important;

    text-align: center !important;

    white-space: nowrap !important;

    transform: none !important;

    /* ممنوع أي تقويس */
    border-radius: 0 !important;

    text-shadow:
        0 2px 0 #6b481a,
        0 4px 7px rgba(0,0,0,.9),
        0 0 15px rgba(235,194,87,.25) !important;
}


/* =========================================================
   𓋹 زخارف تحت الاسم
========================================================= */

.title-subline {
    margin-top: 7px !important;

    color: #c79a3e !important;

    font-size: 18px !important;

    letter-spacing: 15px !important;

    opacity: .7 !important;

    text-shadow:
        0 0 6px rgba(220,175,70,.4) !important;
}


/* =========================================================
   🏺 الأعمدة الجانبية الصغيرة
========================================================= */

.title-side {
    position: absolute !important;

    top: 20px !important;
    bottom: 20px !important;

    width: 65px !important;

    display: flex !important;

    flex-direction: column !important;

    align-items: center !important;

    justify-content: space-around !important;

    color: #d5a844 !important;

    font-family:
        "Segoe UI Symbol",
        "Noto Sans Egyptian Hieroglyphs",
        serif !important;

    font-size: 28px !important;

    opacity: .85 !important;

    z-index: 8 !important;
}


/* العمود الشمال */

.title-side-left {
    left: 22px !important;

    border-left:
        3px solid rgba(205,163,65,.65) !important;

    border-right:
        1px solid rgba(205,163,65,.25) !important;
}


/* العمود اليمين */

.title-side-right {
    right: 22px !important;

    border-right:
        3px solid rgba(205,163,65,.65) !important;

    border-left:
        1px solid rgba(205,163,65,.25) !important;
}


/* =========================================================
   ✨ رؤوس الأعمدة
========================================================= */

.title-side::before,
.title-side::after {
    content: "◆" !important;

    position: absolute !important;

    left: 50% !important;

    transform: translateX(-50%) !important;

    color: #e7bd5d !important;

    font-size: 13px !important;

    text-shadow:
        0 0 6px rgba(238,195,85,.6) !important;
}

.title-side::before {
    top: -9px !important;
}

.title-side::after {
    bottom: -9px !important;
}


/* =========================================================
   📱 MOBILE
========================================================= */

@media (max-width: 700px) {

    .pharaoh-title {
        width: 100% !important;

        min-height: 115px !important;
    }

    .title-center {
        width: 80% !important;
    }

    .page-title {
        font-size: clamp(25px, 7vw, 48px) !important;

        letter-spacing: 2px !important;
    }

    .title-hieroglyphs {
        font-size: 15px !important;

        letter-spacing: 6px !important;
    }

    .title-subline {
        font-size: 12px !important;

        letter-spacing: 7px !important;
    }

    .title-side {
        width: 35px !important;

        font-size: 17px !important;
    }

    .title-side-left {
        left: 8px !important;
    }

    .title-side-right {
        right: 8px !important;
    }
}
/* =========================================================
   🏺 GU LIBRARY / KEMET JOURNEY
   GRAND PHARAONIC PAGE TITLE
========================================================= */

.entrance .temple-library-title {
    position: absolute !important;

    left: 50% !important;
    top: 2% !important;

    transform: translateX(-50%) !important;

    width: 470px !important;
    height: auto !important;

    margin: 0 !important;
    padding: 0 !important;

    z-index: 150 !important;

    pointer-events: none !important;
}


/* =========================================================
   TITLE FRAME
========================================================= */

.entrance .temple-library-title .pharaoh-title {

    position: relative !important;

    width: 100% !important;

    height: auto !important;
    min-height: 0 !important;

    margin: 0 !important;
    padding: 15px 0 18px !important;

    display: block !important;

    background: transparent !important;

    border: none !important;

    box-shadow: none !important;

    overflow: visible !important;
}


/* =========================================================
   GOLDEN ORNAMENT LINE
========================================================= */

.entrance .temple-library-title .pharaoh-title::before {

    content: "𓆣   𓂀   𓋹" !important;

    position: absolute !important;

    left: 50% !important;
    top: -5px !important;

    transform: translateX(-50%) !important;

    white-space: nowrap !important;

    font-family: serif !important;

    font-size: 15px !important;

    letter-spacing: 7px !important;

    color: #d7ad4b !important;

    text-shadow:
        0 1px 2px rgba(0,0,0,.95),
        0 0 8px rgba(237,195,82,.45) !important;

    opacity: .9 !important;
}


/* =========================================================
   LOWER GOLDEN FRAME
========================================================= */

.entrance .temple-library-title .pharaoh-title::after {

    content: "" !important;

    position: absolute !important;

    left: 8% !important;
    right: 8% !important;
    bottom: 0 !important;

    height: 2px !important;

    background:
        linear-gradient(
            90deg,
            transparent 0%,
            #8b6428 12%,
            #d5a943 25%,
            #f5d477 50%,
            #d5a943 75%,
            #8b6428 88%,
            transparent 100%
        ) !important;

    box-shadow:
        0 0 5px rgba(239,198,92,.45),
        0 2px 5px rgba(0,0,0,.8) !important;
}


/* =========================================================
   CENTER
========================================================= */

.entrance .temple-library-title .title-center {

    width: 100% !important;

    margin: 0 !important;
    padding: 0 !important;

    text-align: center !important;
}


/* القديمة تختفي */
.entrance .temple-library-title .title-hieroglyphs,
.entrance .temple-library-title .title-subline,
.entrance .temple-library-title .title-side {

    display: none !important;
}


/* =========================================================
   ✨ MAIN TITLE
========================================================= */

.entrance .temple-library-title .page-title {

    position: relative !important;

    display: block !important;

    width: 100% !important;

    margin: 0 !important;
    padding: 4px 0 !important;

    font-family:
        "Cinzel",
        Georgia,
        serif !important;

    font-size: 43px !important;

    font-weight: 700 !important;

    line-height: 1.05 !important;

    letter-spacing: 5px !important;

    white-space: nowrap !important;

    text-align: center !important;

    color: #e6bd59 !important;

    transform: none !important;

    /* عمق حجري + ذهب */
    text-shadow:
        0 2px 0 #6e4b1d,
        0 4px 4px rgba(0,0,0,.95),
        0 7px 12px rgba(0,0,0,.65),
        0 0 9px rgba(226,181,70,.35) !important;

    filter:
        drop-shadow(0 0 3px rgba(238,197,91,.2)) !important;
}


/* =========================================================
   ✨ لمعة ذهبية خفيفة على الكتابة
========================================================= */

.entrance .temple-library-title .page-title::after {

    content: attr(data-title);

    position: absolute;

    inset: 0;

    color: rgba(255,239,174,.18);

    transform: translateY(-1px);

    pointer-events: none;
}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 800px) {

    .entrance .temple-library-title {

        width: 90% !important;

        top: 2% !important;
    }

    .entrance .temple-library-title .page-title {

        font-size: 30px !important;

        letter-spacing: 3px !important;
    }

    .entrance .temple-library-title .pharaoh-title::before {

        font-size: 11px !important;

        letter-spacing: 4px !important;
    }
}
/* =========================================================
   🖱️ TITLE HOVER AREA
========================================================= */

.entrance .temple-library-title {
    pointer-events: auto !important;
    cursor: pointer !important;
}

.entrance .temple-library-title .page-title {
    pointer-events: none !important;
}
#mainMusicBtn {
    position: fixed !important;

    /* 👈 مكان الزرار */
    top: 390px !important;
    left: 155px !important;

    right: auto !important;
    bottom: auto !important;

    width: 82px !important;
    height: 82px !important;

    padding: 0 !important;
    margin: 0 !important;

    transform: none !important;

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

    border: 1px solid #d8ad43 !important;
    border-radius: 50% !important;

    background:
        radial-gradient(
            circle at 50% 45%,
            rgba(218,174,60,.30),
            rgba(65,45,18,.55) 45%,
            #070d18 75%
        ) !important;

    box-shadow:
        0 0 0 4px rgba(212,175,55,.10),
        0 0 18px rgba(212,175,55,.35),
        inset 0 0 15px rgba(0,0,0,.85) !important;

    color: #f2d477 !important;

    cursor: pointer !important;

    z-index: 99999 !important;

    overflow: visible !important;
}


/* الدائرة الداخلية */

#mainMusicBtn::before {
    content: "";

    position: absolute;

    inset: 7px;

    border-radius: 50%;

    border: 1px solid rgba(225,185,75,.5);

    box-shadow:
        inset 0 0 8px rgba(0,0,0,.8),
        0 0 8px rgba(220,175,55,.2);

    pointer-events: none;
}


/* الأيقونة */

#mainMusicBtn .music-icon {
    position: relative !important;

    width: 42px !important;
    height: 42px !important;

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

    border: 1px solid #e0b94f !important;
    border-radius: 50% !important;

    background:
        radial-gradient(
            circle,
            #85601f,
            #4d3515 60%,
            #211507
        ) !important;

    color: #f6d774 !important;

    font-size: 24px !important;

    line-height: 1 !important;

    text-shadow:
        0 0 7px rgba(255,215,100,.8),
        0 2px 3px #000 !important;

    box-shadow:
        inset 0 0 8px rgba(0,0,0,.8),
        0 0 10px rgba(230,190,70,.35) !important;

    z-index: 5 !important;
}


/* إلغاء الكلام نهائيًا */

#mainMusicBtn .music-text {
    display: none !important;
}


/* Hover */

#mainMusicBtn:hover {
    transform: scale(1.06) !important;

    border-color: #ffe49a !important;

    box-shadow:
        0 0 0 4px rgba(212,175,55,.14),
        0 0 28px rgba(235,190,65,.65),
        inset 0 0 15px rgba(0,0,0,.85) !important;
}


/* لما الموسيقى شغالة */

#mainMusicBtn.is-playing {
    border-color: #ffe08a !important;

    box-shadow:
        0 0 0 4px rgba(225,185,72,.18),
        0 0 28px rgba(240,195,65,.6),
        0 0 50px rgba(240,180,45,.15),
        inset 0 0 15px rgba(0,0,0,.8) !important;
}


/* حلقة التشغيل */

#mainMusicBtn.is-playing .music-icon::before {
    content: "";

    position: absolute;

    inset: -8px;

    border-radius: 50%;

    border: 1px solid rgba(241,203,86,.65);

    animation: musicPulse 1.5s ease-out infinite;
}


@keyframes musicPulse {
    0% {
        transform: scale(.7);
        opacity: .1;
    }

    50% {
        opacity: .8;
    }

    100% {
        transform: scale(1.18);
        opacity: 0;
    }
}


/* موبايل */

@media (max-width: 700px) {

    #mainMusicBtn {
        top: 280px !important;
        left: 70px !important;

        width: 68px !important;
        height: 68px !important;
    }

    #mainMusicBtn .music-icon {
        width: 35px !important;
        height: 35px !important;

        font-size: 20px !important;
    }
}
#mainMusicBtn.music-btn {
    position: absolute !important;

    /* الحركة */
     top: 300px !important;
    left: 100px !important;
    right: auto !important;

    /* مهم جدًا: مفيش transform قديم يعطّل المكان */
    transform: none !important;
}
#mainMusicBtn .music-label {
    position: absolute;
    top: calc(100% + 12px);
    left: 50%;
    transform: translateX(-50%);

    color: #e8c65c;
    font-family: Georgia, serif;
    font-size: 11px;
    letter-spacing: 3px;
    white-space: nowrap;

    text-shadow:
        0 0 6px rgba(232, 198, 92, .5),
        0 2px 3px rgba(0, 0, 0, .8);

    pointer-events: none;
}
/* =========================================================
   🏺 SEARCH — ROLLED PHARAONIC SCROLL
   الشكل فقط — لا يغير الـ HTML أو JavaScript
========================================================= */

.search-trigger {
    position: relative !important;

    width: 82px !important;
    height: 68px !important;

    margin: 0 !important;
    padding: 0 !important;

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

    overflow: hidden !important;

    border: 2px solid #b88732 !important;
    border-radius: 34px !important;

    background:
        linear-gradient(
            90deg,
            #70491e 0%,
            #c69a4c 10%,
            #e1bd72 18%,
            #b8893d 50%,
            #e1bd72 82%,
            #c69a4c 90%,
            #70491e 100%
        ) !important;

    color: #4b3215 !important;

    box-shadow:
        inset 0 4px 8px rgba(255,235,170,.35),
        inset 0 -5px 10px rgba(70,40,10,.45),
        0 8px 20px rgba(0,0,0,.5),
        0 0 18px rgba(212,175,55,.12) !important;

    cursor: pointer !important;

    /*
       المخطوطة تفرد نفسها
    */
    transition:
        width .65s cubic-bezier(.22,.8,.2,1),
        height .45s ease,
        border-radius .55s ease,
        box-shadow .45s ease,
        transform .45s ease !important;
}


/* =========================================================
   🏺 طرف المخطوطة اليسار
========================================================= */

.search-trigger::before {
    content: "";

    position: absolute;

    left: -8px;
    top: 50%;

    width: 25px;
    height: 76px;

    transform: translateY(-50%);

    border: 2px solid #8b6124;
    border-radius: 50%;

    background:
        linear-gradient(
            90deg,
            #5a3915,
            #b27d2d,
            #d7ad5d,
            #79501c
        );

    box-shadow:
        inset 3px 0 5px rgba(255,220,130,.3),
        3px 0 7px rgba(0,0,0,.35);

    z-index: 5;

    transition:
        left .6s ease,
        transform .6s ease;
}


/* =========================================================
   🏺 طرف المخطوطة اليمين
========================================================= */

.search-trigger::after {
    content: "";

    position: absolute;

    right: -8px;
    top: 50%;

    width: 25px;
    height: 76px;

    transform: translateY(-50%);

    border: 2px solid #8b6124;
    border-radius: 50%;

    background:
        linear-gradient(
            90deg,
            #79501c,
            #d7ad5d,
            #b27d2d,
            #5a3915
        );

    box-shadow:
        inset -3px 0 5px rgba(255,220,130,.3),
        -3px 0 7px rgba(0,0,0,.35);

    z-index: 5;

    transition:
        right .6s ease,
        transform .6s ease;
}


/* =========================================================
   🔍 أيقونة البحث
========================================================= */

.search-trigger .search-icon {
    position: relative;

    z-index: 10;

    margin: 0 !important;

    font-size: 26px !important;

    color: #f4d35e !important;

    text-shadow:
        0 0 6px rgba(244,211,94,.55);

    transition:
        opacity .25s ease,
        transform .45s ease;
}


/* =========================================================
   📜 لما الماوس يدخل — المخطوطة تفرد
========================================================= */

.search-trigger:hover,
.search-trigger:focus-visible {
    width: 345px !important;
    height: 68px !important;

    border-radius: 9px !important;

    transform: translateY(-3px) !important;

    background:
        linear-gradient(
            180deg,
            #d9b76b 0%,
            #c49a4c 18%,
            #b8893e 50%,
            #c9a254 82%,
            #a97830 100%
        ) !important;

    border-color: #e2bd63 !important;

    box-shadow:
        inset 0 4px 10px rgba(255,235,170,.35),
        inset 0 -6px 12px rgba(70,40,10,.35),
        0 12px 30px rgba(0,0,0,.55),
        0 0 25px rgba(212,175,55,.25) !important;
}


/* =========================================================
   📜 أطراف المخطوطة تتحرك للخارج
========================================================= */

.search-trigger:hover::before,
.search-trigger:focus-visible::before {
    left: -12px;

    transform:
        translateY(-50%)
        scaleY(.94);
}

.search-trigger:hover::after,
.search-trigger:focus-visible::after {
    right: -12px;

    transform:
        translateY(-50%)
        scaleY(.94);
}


/* =========================================================
   🔍 الأيقونة تتحرك لمكانها
========================================================= */

.search-trigger:hover .search-icon,
.search-trigger:focus-visible .search-icon {
    transform: translateX(-4px) scale(1.05);
}


/* =========================================================
   ✨ تفاصيل نقش قديم على المخطوطة
========================================================= */

.search-trigger {
    background-image:
        radial-gradient(
            ellipse at 20% 30%,
            rgba(255,235,170,.16),
            transparent 25%
        ),
        radial-gradient(
            ellipse at 80% 70%,
            rgba(80,45,10,.12),
            transparent 30%
        ),
        repeating-linear-gradient(
            0deg,
            rgba(80,45,10,.04) 0px,
            rgba(80,45,10,.04) 1px,
            transparent 1px,
            transparent 7px
        ),
        linear-gradient(
            180deg,
            #d9b76b,
            #b8893e
        ) !important;
}


/* =========================================================
   📱 MOBILE
========================================================= */

@media (max-width: 600px) {

    .search-trigger {
        width: 72px !important;
        height: 62px !important;

        border-radius: 31px !important;
    }

    .search-trigger:hover,
    .search-trigger:focus-visible {
        width: 300px !important;
        height: 62px !important;

        border-radius: 8px !important;
    }

    .search-trigger::before,
    .search-trigger::after {
        height: 70px;
    }

}
/* =========================================================
   🏺 PHARAONIC SCROLL SEARCH
   CLOSED SCROLL → OPEN SCROLL
   لا يغير JavaScript أو وظيفة الضغط
========================================================= */

.search-trigger {
    position: relative !important;

    width: 105px !important;
    height: 72px !important;

    padding: 0 !important;
    margin: 0 !important;

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

    overflow: visible !important;

    border: 0 !important;
    border-radius: 0 !important;

    cursor: pointer !important;

    color: #4b2d12 !important;

    background:
        linear-gradient(
            180deg,
            #d9bd7b 0%,
            #c49a4f 18%,
            #a97832 50%,
            #c49a4f 82%,
            #8d5d25 100%
        ) !important;

    box-shadow:
        inset 0 4px 8px rgba(255,235,175,.28),
        inset 0 -5px 10px rgba(70,35,8,.35),
        0 10px 18px rgba(0,0,0,.45) !important;

    transition:
        width .75s cubic-bezier(.2,.8,.2,1),
        height .55s ease,
        box-shadow .5s ease,
        transform .45s ease !important;
}


/* =========================================================
   📜 جسم البردية
========================================================= */

.search-trigger {
    background-image:
        radial-gradient(
            ellipse at 25% 35%,
            rgba(255,239,183,.28),
            transparent 30%
        ),
        radial-gradient(
            ellipse at 75% 70%,
            rgba(85,48,15,.18),
            transparent 32%
        ),
        repeating-linear-gradient(
            0deg,
            rgba(75,40,10,.035) 0,
            rgba(75,40,10,.035) 1px,
            transparent 1px,
            transparent 6px
        ),
        linear-gradient(
            180deg,
            #dfc17c,
            #b9863c
        ) !important;
}


/* =========================================================
   🌀 اللفة اليسرى
========================================================= */

.search-trigger::before {
    content: "";

    position: absolute;

    left: -13px;
    top: 50%;

    width: 30px;
    height: 82px;

    transform: translateY(-50%);

    border-radius: 50%;

    border: 2px solid #80521e;

    background:
        radial-gradient(
            ellipse at center,
            #3d220d 0 13%,
            #71451a 14% 27%,
            #b27b32 28% 43%,
            #d1a454 44% 60%,
            #82521f 61% 100%
        );

    box-shadow:
        inset 3px 0 7px rgba(255,220,130,.25),
        4px 0 8px rgba(0,0,0,.38);

    z-index: 20;

    transition:
        left .75s cubic-bezier(.2,.8,.2,1),
        transform .75s ease;
}


/* =========================================================
   🌀 اللفة اليمنى
========================================================= */

.search-trigger::after {
    content: "";

    position: absolute;

    right: -13px;
    top: 50%;

    width: 30px;
    height: 82px;

    transform: translateY(-50%);

    border-radius: 50%;

    border: 2px solid #80521e;

    background:
        radial-gradient(
            ellipse at center,
            #3d220d 0 13%,
            #71451a 14% 27%,
            #b27b32 28% 43%,
            #d1a454 44% 60%,
            #82521f 61% 100%
        );

    box-shadow:
        inset -3px 0 7px rgba(255,220,130,.25),
        -4px 0 8px rgba(0,0,0,.38);

    z-index: 20;

    transition:
        right .75s cubic-bezier(.2,.8,.2,1),
        transform .75s ease;
}


/* =========================================================
   🔍 المحتوى داخل المخطوطة
========================================================= */

.search-trigger .search-icon {
    position: relative;

    z-index: 30;

    font-size: 27px !important;

    color: #5b3714 !important;

    opacity: 0;

    transform: scale(.7);

    transition:
        opacity .35s ease .2s,
        transform .45s ease .2s;
}


/* النص الموجود أصلًا داخل الزر */

.search-trigger > span:not(.search-icon),
.search-trigger > *:not(.search-icon) {
    position: relative;

    z-index: 30;

    opacity: 0;

    transform: translateY(5px);

    color: #513014 !important;

    font-family:
        "Cinzel",
        Georgia,
        serif !important;

    font-size: 16px !important;

    font-weight: 600 !important;

    letter-spacing: 3px !important;

    text-shadow:
        0 1px 0 rgba(255,230,160,.35);

    transition:
        opacity .35s ease .18s,
        transform .45s ease .18s;
}


/* =========================================================
   🖱️ الاقتراب من المخطوطة
========================================================= */

.search-trigger:hover,
.search-trigger:focus-visible {

    width: 370px !important;
    height: 76px !important;

    transform: translateY(-4px) !important;

    border-radius: 3px !important;

    box-shadow:
        inset 0 5px 12px rgba(255,235,175,.35),
        inset 0 -7px 15px rgba(65,35,10,.28),
        0 16px 32px rgba(0,0,0,.55),
        0 0 25px rgba(212,175,55,.18) !important;
}


/* =========================================================
   🌀 اللفات تتحرك للخارج
========================================================= */

.search-trigger:hover::before,
.search-trigger:focus-visible::before {

    left: -19px;

    transform:
        translateY(-50%)
        rotate(-2deg)
        scaleY(.96);
}


.search-trigger:hover::after,
.search-trigger:focus-visible::after {

    right: -19px;

    transform:
        translateY(-50%)
        rotate(2deg)
        scaleY(.96);
}


/* =========================================================
   ✨ ظهور SEARCH THE LIBRARY
========================================================= */

.search-trigger:hover .search-icon,
.search-trigger:focus-visible .search-icon {

    opacity: 1;

    transform: scale(1);
}


.search-trigger:hover > span:not(.search-icon),
.search-trigger:focus-visible > span:not(.search-icon),
.search-trigger:hover > *:not(.search-icon),
.search-trigger:focus-visible > *:not(.search-icon) {

    opacity: 1;

    transform: translateY(0);
}


/* =========================================================
   🏺 نقش قديم على البردي
========================================================= */

.search-trigger:hover {

    background-image:
        radial-gradient(
            circle at 12% 30%,
            rgba(91,55,20,.13) 0 2px,
            transparent 3px
        ),
        radial-gradient(
            circle at 82% 65%,
            rgba(91,55,20,.11) 0 3px,
            transparent 4px
        ),
        radial-gradient(
            ellipse at 45% 45%,
            rgba(255,235,170,.15),
            transparent 45%
        ),
        repeating-linear-gradient(
            0deg,
            rgba(75,40,10,.035) 0,
            rgba(75,40,10,.035) 1px,
            transparent 1px,
            transparent 7px
        ),
        linear-gradient(
            180deg,
            #e0c27e,
            #c49a50
        ) !important;
}


/* =========================================================
   📱 MOBILE
========================================================= */

@media (max-width: 600px) {

    .search-trigger {

        width: 82px !important;
        height: 62px !important;
    }

    .search-trigger::before,
    .search-trigger::after {

        width: 25px;
        height: 72px;
    }

    .search-trigger:hover,
    .search-trigger:focus-visible {

        width: 310px !important;
        height: 66px !important;
    }

    .search-trigger > span:not(.search-icon),
    .search-trigger > *:not(.search-icon) {

        font-size: 13px !important;
        letter-spacing: 2px !important;
    }
}
/* إزالة النص الإرشادي أسفل المخطوطة فقط */
.ankh-search .search-hint,
.ankh-search .search-subtitle,
.ankh-search .search-description,
.ankh-search small {
    display: none !important;
}
#searchHelp {
    display: none !important;
}
/* =====================================================
   PHARAONIC SEARCH SYSTEM
   NEW VERSION
===================================================== */


/* =====================================================
   LEGACY CLEANUP
   إخفاء العناصر القديمة التي استخدمناها سابقاً
===================================================== */

.hero-search,
.search-trigger,
.ankh-open,
.search-scroll,
.pharaoh-search-old,
.old-search-box,
.old-search,
.library-search-box {
    display: none !important;
}


/* =====================================================
   MAIN WRAPPER
===================================================== */

.pharaoh-search-wrap {

    position: absolute;

    left: 50%;

    bottom: 115px;

    width: 250px;
    height: 190px;

    transform:
        translateX(-50%);

    z-index: 100;

    perspective: 900px;

    pointer-events: auto;
}


/* =====================================================
   GOLDEN AMBIENT LIGHT
===================================================== */

.chest-light {

    position: absolute;

    width: 240px;
    height: 150px;

    left: 50%;
    bottom: 20px;

    transform:
        translateX(-50%);

    background:

        radial-gradient(
            ellipse,
            rgba(255,194,61,.30),
            transparent 70%
        );

    filter: blur(18px);

    opacity: .45;

    transition:
        opacity .6s ease,
        transform .6s ease;

    pointer-events: none;
}


.pharaoh-search-wrap:hover .chest-light {

    opacity: .95;

    transform:
        translateX(-50%)
        scale(1.2);
}


/* =====================================================
   TREASURE CHEST
===================================================== */

.treasure-chest {

    position: absolute;

    width: 210px;
    height: 125px;

    left: 50%;
    bottom: 25px;

    transform:
        translateX(-50%)
        rotateX(4deg);

    transform-style: preserve-3d;

    cursor: pointer;

    transition:
        transform .45s
        cubic-bezier(.2,.8,.2,1);
}


.treasure-chest:hover {

    transform:
        translateX(-50%)
        translateY(-5px)
        rotateX(3deg)
        scale(1.025);
}


/* =====================================================
   CHEST BODY
===================================================== */

.chest-body {

    position: absolute;

    left: 0;
    right: 0;
    bottom: 0;

    height: 82px;

    border-radius:
        4px
        4px
        9px
        9px;

    background:

        repeating-linear-gradient(
            8deg,
            rgba(255,255,255,.035) 0px,
            rgba(255,255,255,.035) 2px,
            transparent 2px,
            transparent 9px
        ),

        linear-gradient(
            145deg,
            #4c2d12,
            #251507 35%,
            #5b3614 60%,
            #241306
        );

    border:
        3px solid #9d7226;

    box-shadow:

        inset 0 2px 0
        rgba(255,220,120,.35),

        inset 0 -10px 20px
        rgba(0,0,0,.65),

        0 15px 25px
        rgba(0,0,0,.7),

        0 0 0 1px
        rgba(255,205,80,.18);

    transform:
        translateZ(10px);
}


/* =====================================================
   CHEST INSIDE
===================================================== */

.chest-inside {

    position: absolute;

    left: 5px;
    right: 5px;

    top: 18px;

    height: 62px;

    background:

        radial-gradient(
            ellipse at center,
            #ffd66a 0%,
            #9b6415 25%,
            #301806 65%,
            #100904 100%
        );

    border-radius: 4px;

    overflow: visible;

    z-index: 1;
}


/* =====================================================
   INSIDE GLOW
===================================================== */

.inside-glow {

    position: absolute;

    left: 20%;
    right: 20%;

    top: 5px;

    height: 55px;

    background:

        radial-gradient(
            ellipse,
            rgba(255,214,105,.95),
            rgba(255,157,22,.3),
            transparent 70%
        );

    filter: blur(8px);

    opacity: 0;

    transition:
        opacity .6s ease;
}


.treasure-chest.open
.inside-glow {

    opacity: 1;
}


/* =====================================================
   CHEST LID
===================================================== */

.chest-lid {

    position: absolute;

    left: -3px;
    right: -3px;

    top: 10px;

    height: 55px;

    transform-origin:
        bottom center;

    transform-style:
        preserve-3d;

    z-index: 5;

    transition:
        transform .9s
        cubic-bezier(.16,.85,.25,1);
}


/* =====================================================
   LID FRONT
===================================================== */

.chest-lid::before {

    content: "";

    position: absolute;

    inset: 0;

    border-radius:
        8px
        8px
        3px
        3px;

    background:

        repeating-linear-gradient(
            8deg,
            rgba(255,255,255,.04) 0px,
            rgba(255,255,255,.04) 2px,
            transparent 2px,
            transparent 8px
        ),

        linear-gradient(
            145deg,
            #633b14,
            #2b1808,
            #704819
        );

    border:
        3px solid #b88931;

    box-shadow:

        inset 0 2px 0
        rgba(255,230,150,.4),

        inset 0 -8px 12px
        rgba(0,0,0,.5),

        0 8px 14px
        rgba(0,0,0,.65);
}


/* =====================================================
   LID DECORATION
===================================================== */

.lid-decoration {

    position: absolute;

    left: 0;
    right: 0;

    top: 50%;

    transform:
        translateY(-50%);

    display: flex;

    justify-content: center;

    gap: 27px;

    color:
        #e1b84f;

    font-size:
        19px;

    text-shadow:
        0 0 6px
        rgba(255,195,60,.45);

    z-index: 2;
}


/* =====================================================
   LID BORDER
===================================================== */

.lid-border {

    position: absolute;

    inset: 7px;

    border:
        1px solid
        rgba(225,184,79,.65);

    pointer-events:
        none;
}


/* =====================================================
   OPEN CHEST
===================================================== */

.treasure-chest.open
.chest-lid {

    transform:
        rotateX(-105deg)
        translateY(-4px);
}


/* =====================================================
   EYE OF HORUS
===================================================== */

.chest-symbol {

    position: absolute;

    left: 50%;
    top: 46%;

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

    width: 43px;
    height: 43px;

    border-radius:
        50%;

    border:
        3px solid
        #b98a2c;

    display: flex;

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

    color:
        #d6ad50;

    font-size:
        22px;

    background:

        radial-gradient(
            circle,
            #241507,
            #0e0803
        );

    box-shadow:

        inset 0 0 8px
        rgba(0,0,0,.8),

        0 0 5px
        rgba(218,171,62,.25);
}


/* =====================================================
   LOCK
===================================================== */

.chest-lock {

    position: absolute;

    left: 50%;
    top: 7px;

    transform:
        translateX(-50%);

    width: 15px;
    height: 20px;

    background:

        linear-gradient(
            90deg,
            #6b4411,
            #d7a83e,
            #714812
        );

    border-radius: 2px;

    z-index: 5;
}


/* =====================================================
   GOLD STUDS
===================================================== */

.stud {

    position: absolute;

    width: 7px;
    height: 7px;

    border-radius: 50%;

    background:

        radial-gradient(
            circle at 30% 25%,
            #fff1a5,
            #d5a83c 45%,
            #68430e
        );

    box-shadow:

        0 1px 3px #000,

        0 0 2px
        rgba(255,205,90,.4);
}


.s1 {
    top: 8px;
    left: 8px;
}

.s2 {
    top: 8px;
    right: 8px;
}

.s3 {
    bottom: 8px;
    left: 8px;
}

.s4 {
    bottom: 8px;
    right: 8px;
}

.s5 {
    top: 50%;
    left: 8px;
}

.s6 {
    top: 50%;
    right: 8px;
}

.s7 {
    top: 20px;
    left: 50%;
}

.s8 {
    bottom: 20px;
    left: 50%;
}


/* =====================================================
   DECORATIVE LINES
===================================================== */

.chest-line {

    position: absolute;

    height: 1px;

    left: 20px;
    right: 20px;

    background:

        linear-gradient(
            90deg,
            transparent,
            #bd8b2b,
            transparent
        );

    opacity: .5;
}


.line1 {
    top: 20px;
}

.line2 {
    bottom: 17px;
}


/* =====================================================
   CHEST LABEL
===================================================== */

.chest-label {

    position: absolute;

    left: 50%;
    bottom: 0;

    transform:
        translateX(-50%);

    color:
        #d6a83c;

    font-family:
        Georgia, serif;

    font-size:
        10px;

    letter-spacing:
        4px;

    white-space:
        nowrap;

    opacity:
        .75;

    text-shadow:
        0 0 8px
        rgba(214,168,60,.45);

    transition:
        opacity .4s ease;
}


.pharaoh-search-wrap:hover
.chest-label {

    opacity: 1;
}


/* =====================================================
   ANKH SEARCH OVERLAY
===================================================== */

.ankh-search-overlay {

    position: fixed;

    inset: 0;

    display: flex;

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

    background:
        rgba(5,3,1,.72);

    backdrop-filter:
        blur(5px);

    opacity: 0;

    visibility: hidden;

    pointer-events: none;

    z-index: 9999;

    transition:
        opacity .5s ease,
        visibility .5s ease;
}


.ankh-search-overlay.show {

    opacity: 1;

    visibility: visible;

    pointer-events: auto;
}


/* =====================================================
   ANKH
===================================================== */

.ankh-search {

    position: relative;

    width: 260px;
    height: 400px;

    transform:
        scale(.55)
        translateY(80px);

    opacity: 0;

    transition:
        transform .8s
        cubic-bezier(.16,.85,.25,1),
        opacity .5s ease;
}


.ankh-search-overlay.show
.ankh-search {

    transform:
        scale(1)
        translateY(0);

    opacity: 1;
}


/* =====================================================
   ANKH LOOP
===================================================== */

.ankh-loop {

    position: absolute;

    left: 50%;

    top: 10px;

    width: 150px;
    height: 150px;

    transform:
        translateX(-50%);

    border:
        10px solid
        #d6a83c;

    border-radius:
        50%;

    background:

        radial-gradient(
            circle,
            #3a2108,
            #120904
        );

    box-shadow:

        0 0 15px
        rgba(255,195,60,.6),

        inset 0 0 20px
        rgba(0,0,0,.8);
}


/* =====================================================
   ANKH EYE
===================================================== */

.ankh-eye {

    position: absolute;

    left: 50%;
    top: 50%;

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

    color:
        #f4cf62;

    font-size:
        45px;

    text-shadow:

        0 0 12px
        rgba(255,210,80,.8);
}


/* =====================================================
   ANKH CROSSBAR
===================================================== */

.ankh-crossbar {

    position: absolute;

    left: 50%;

    top: 150px;

    transform:
        translateX(-50%);

    width: 235px;
    height: 25px;

    border-radius:
        8px;

    background:

        linear-gradient(
            180deg,
            #f2d477,
            #a66c19,
            #d6a83c
        );

    box-shadow:

        0 0 12px
        rgba(255,190,55,.45);
}


/* =====================================================
   ANKH STEM
===================================================== */

.ankh-stem {

    position: absolute;

    left: 50%;

    top: 165px;

    transform:
        translateX(-50%);

    width: 38px;
    height: 220px;

    border-radius:
        8px;

    background:

        linear-gradient(
            90deg,
            #714813,
            #e2b849,
            #fff0a0,
            #b77a20,
            #68420f
        );

    box-shadow:

        0 0 14px
        rgba(255,193,55,.5);
}


/* =====================================================
   SEARCH BOX INSIDE ANKH
===================================================== */

.ankh-search-box {

    position: absolute;

    left: 50%;

    top: 115px;

    transform:
        translateX(-50%);

    width: 330px;

    display: flex;

    gap: 8px;

    padding: 8px;

    border:
        2px solid
        #c8942d;

    border-radius:
        8px;

    background:
        rgba(35,18,5,.95);

    box-shadow:

        0 0 25px
        rgba(255,190,50,.35);
}


/* =====================================================
   INPUT
===================================================== */

.ankh-search-box input {

    flex: 1;

    height: 42px;

    border: none;

    outline: none;

    border-radius:
        5px;

    padding:
        0 12px;

    background:
        #1a0d04;

    color:
        #f4d77a;

    font-size:
        14px;
}


.ankh-search-box input::placeholder {

    color:
        rgba(244,215,122,.55);
}


/* =====================================================
   SEARCH BUTTON
===================================================== */

.ankh-search-box button {

    width: 45px;

    border: none;

    border-radius:
        5px;

    cursor: pointer;

    background:

        linear-gradient(
            135deg,
            #fff0a2,
            #d6a633,
            #8b5d15
        );

    color:
        #241305;

    font-size:
        20px;

    transition:
        transform .25s ease,
        box-shadow .25s ease;
}


.ankh-search-box button:hover {

    transform:
        scale(1.08);

    box-shadow:

        0 0 15px
        rgba(255,195,60,.8);
}


/* =====================================================
   MOBILE
===================================================== */

@media (max-width:700px) {

    .pharaoh-search-wrap {

        bottom: 80px;

        transform:
            translateX(-50%)
            scale(.82);
    }


    .ankh-search {

        transform:
            scale(.75)
            translateY(60px);
    }


    .ankh-search-overlay.show
    .ankh-search {

        transform:
            scale(.75)
            translateY(0);
    }

}
/* =====================================================
   SEARCH CHEST → ANKH
===================================================== */

.hero-search {
    display: flex !important;
}

.hero-search .ankh-open {
    display: none;
}

.treasure-chest.open ~ .chest-label {
    opacity: 1;
}
/* =====================================================
   TREASURE CHEST → ANKH SEARCH
===================================================== */

.hero-search {
    display: none !important;
}

.hero-search.search-visible {
    display: flex !important;
}

.hero-search .ankh-open {
    display: none;
}

.hero-search.search-visible .ankh-open {
    display: flex;
}
 /* =====================================================
    FORCE ANKH SEARCH AFTER TREASURE CHEST
 ===================================================== */

#ankhForm {
    position: relative;
}

#ankhForm.ankh-visible {
    display: flex !important;
    opacity: 1 !important;
    visibility: visible !important;
}

#ankhForm.ankh-visible .ankh-open {
    display: flex !important;
    opacity: 1 !important;
    visibility: visible !important;
}
/* =========================================
   TEMPLE MUSIC BUTTON
========================================= */

#mainMusicBtn {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;

    cursor: pointer;

    transition:
        transform 0.25s ease,
        box-shadow 0.3s ease,
        filter 0.3s ease;
}

/* الأيقونة */
#mainMusicBtn .music-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    font-size: 24px;

    opacity: 0.55;

    transition:
        opacity 0.3s ease,
        transform 0.3s ease,
        filter 0.3s ease;
}

/* =========================================
   MUSIC ON
========================================= */

#mainMusicBtn.is-playing {
    filter: brightness(1.2);

    box-shadow:
        0 0 12px rgba(255, 190, 70, 0.45),
        0 0 25px rgba(255, 190, 70, 0.18);
}

#mainMusicBtn.is-playing .music-icon {
    opacity: 1;

    transform: scale(1.12);

    filter:
        drop-shadow(0 0 5px rgba(255, 210, 100, 0.9))
        drop-shadow(0 0 12px rgba(255, 170, 50, 0.5));

    animation: musicPulse 1.4s ease-in-out infinite;
}

/* =========================================
   MUSIC OFF
========================================= */

#mainMusicBtn:not(.is-playing) .music-icon {
    opacity: 0.45;

    filter: grayscale(0.5);

    animation: none;
}

/* =========================================
   PULSE
========================================= */

@keyframes musicPulse {

    0%,
    100% {
        transform: scale(1);
    }

    50% {
        transform: scale(1.15);
    }

}

/* الضغط */
#mainMusicBtn:active {
    transform: scale(0.94);
}
/* =========================================================
   PHARAONIC TEMPLE ACTIONS
========================================================= */

.temple-actions {
    position: relative;

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

    gap: 58px;

    width: 145px;

    margin: 0 auto;
}


/* =========================================================
   ACTION BUTTON
========================================================= */

.temple-action {
    position: relative;

    width: 132px;
    height: 132px;

    padding: 0;
    margin: 0;

    border: none;
    outline: none;

    background: transparent;

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

    cursor: pointer;

    color: #d4af37;
}


/* =========================================================
   ICON FRAME
========================================================= */

.action-symbol {
    position: relative;

    width: 116px;
    height: 116px;

    border: 2px solid rgba(212, 175, 55, .88);

    border-radius: 18px;

    background:
        radial-gradient(
            circle at 50% 45%,
            rgba(212, 175, 55, .13),
            rgba(8, 17, 31, .32) 65%,
            rgba(8, 17, 31, .7)
        );

    box-shadow:
        inset 0 0 20px rgba(212,175,55,.07),
        0 0 10px rgba(212,175,55,.06);

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

    overflow: visible;

    transition:
        transform .4s ease,
        border-color .4s ease,
        box-shadow .4s ease;
}


/* Inner ancient frame */

.action-symbol::before {
    content: "";

    position: absolute;

    inset: 8px;

    border: 1px solid rgba(212,175,55,.28);

    border-radius: 11px;

    pointer-events: none;
}


/* =========================================================
   HOVER ICON
========================================================= */

.temple-action:hover .action-symbol {
    transform: scale(1.035);

    border-color: #e9c65a;

    box-shadow:
        inset 0 0 25px rgba(212,175,55,.12),
        0 0 22px rgba(212,175,55,.20),
        0 0 45px rgba(212,175,55,.07);
}


/* =========================================================
   HIDE ORIGINAL HIEROGLYPHS
========================================================= */

.temple-action .hieroglyph {
    display: none;
}


/* =========================================================
   SERVICE NAME UNDER ICON
========================================================= */

.action-label {
    position: absolute;

    top: 124px;
    left: 50%;

    transform: translateX(-50%);

    width: 150px;

    color: #d4af37;

    font-family:
        "Cinzel",
        "Times New Roman",
        serif;

    font-size: 9px;

    font-weight: 600;

    letter-spacing: 1.6px;

    line-height: 1.3;

    text-align: center;

    white-space: nowrap;

    text-shadow:
        0 0 6px rgba(212,175,55,.18);

    opacity: 1;

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


/* Hide bottom name on hover */

.temple-action:hover .action-label {
    opacity: 0;

    transform:
        translateX(-50%)
        translateY(5px);
}


/* =========================================================
   LEFT SIDE SERVICE BAR
========================================================= */

.temple-action::after {
    content: attr(aria-label);

    position: absolute;

    top: 50%;
    left: -14px;

    transform:
        translate(-100%, -50%)
        scaleX(.7);

    transform-origin: right center;

    width: 125px;

    min-height: 34px;

    padding: 8px 13px;

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

    box-sizing: border-box;

    color: #f1d477;

    font-family:
        "Cinzel",
        "Times New Roman",
        serif;

    font-size: 9px;

    font-weight: 600;

    letter-spacing: 1.5px;

    text-align: center;

    white-space: nowrap;

    background:
        linear-gradient(
            90deg,
            rgba(80,56,10,.96),
            rgba(22,20,13,.94)
        );

    border-left: 2px solid #d4af37;

    border-top: 1px solid rgba(212,175,55,.45);

    border-bottom: 1px solid rgba(212,175,55,.45);

    box-shadow:
        0 0 12px rgba(212,175,55,.12),
        inset 0 0 12px rgba(212,175,55,.06);

    opacity: 0;

    pointer-events: none;

    transition:
        opacity .3s ease,
        transform .3s cubic-bezier(.22,.61,.36,1);
}


/* Small golden connector */

.temple-action::before {
    content: "";

    position: absolute;

    top: 50%;
    left: -7px;

    width: 18px;
    height: 1px;

    background: #d4af37;

    transform:
        translate(-100%, -50%)
        scaleX(0);

    transform-origin: right;

    box-shadow:
        0 0 6px rgba(212,175,55,.45);

    opacity: 0;

    transition:
        opacity .25s ease,
        transform .3s ease;
}


/* Show side label */

.temple-action:hover::after {
    opacity: 1;

    transform:
        translate(-100%, -50%)
        scaleX(1);
}


/* Show connector */

.temple-action:hover::before {
    opacity: 1;

    transform:
        translate(-100%, -50%)
        scaleX(1);
}


/* =========================================================
   1 — AI TOOLS
   EYE OF HORUS + ORBIT
========================================================= */

.action-ai .action-symbol {
    border-radius: 50%;
}


/* Eye of Horus */

.action-ai .action-symbol::after {
    content: "𓂀";

    position: absolute;

    left: 50%;
    top: 50%;

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

    color: #e0bc45;

    font-family:
        "Noto Sans Egyptian Hieroglyphs",
        "Segoe UI Symbol",
        sans-serif;

    font-size: 49px;

    line-height: 1;

    text-shadow:
        0 0 5px rgba(212,175,55,.55),
        0 0 14px rgba(212,175,55,.20);

    z-index: 5;
}


/* Main orbital ring */

.action-ai .icon-orbit {
    position: absolute;

    width: 77px;
    height: 77px;

    border: 1px solid rgba(212,175,55,.72);

    border-radius: 50%;

    z-index: 2;
}


/* Outer orbit */

.action-ai .icon-orbit::before {
    content: "";

    position: absolute;

    inset: -13px;

    border: 1px dashed rgba(212,175,55,.38);

    border-radius: 50%;

    transform: rotate(-20deg);
}


/* Orbiting gold point */

.action-ai .icon-orbit::after {
    content: "";

    position: absolute;

    width: 9px;
    height: 9px;

    top: -7px;
    right: -5px;

    border-radius: 50%;

    background: #e4bd38;

    box-shadow:
        0 0 8px rgba(228,189,56,.9);
}


/* Second point */

.action-ai .icon-rays {
    position: absolute;

    width: 8px;
    height: 8px;

    bottom: 9px;
    left: 50%;

    transform: translateX(-50%);

    border-radius: 50%;

    background: #e4bd38;

    box-shadow:
        0 0 8px rgba(228,189,56,.8);

    z-index: 4;
}


/* AI animation */

.temple-action.action-ai:hover .icon-orbit {
    animation: aiOrbitPulse 1.8s ease-in-out infinite;
}

@keyframes aiOrbitPulse {

    0%,
    100% {
        transform: scale(1);
    }

    50% {
        transform: scale(1.045);
    }

}


/* =========================================================
   2 — MY COLLECTIONS
   PAPYRUS / SCROLL
========================================================= */

.action-collections .action-symbol {
    border-radius: 17px;
}


/* Papyrus body */

.action-collections .action-symbol::after {
    content: "";

    position: absolute;

    width: 72px;
    height: 52px;

    left: 50%;
    top: 50%;

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

    border-top: 2px solid #d4af37;
    border-bottom: 2px solid #d4af37;

    background:
        linear-gradient(
            to bottom,
            transparent 20%,
            rgba(212,175,55,.38) 21%,
            rgba(212,175,55,.38) 23%,
            transparent 24%,
            transparent 47%,
            rgba(212,175,55,.30) 48%,
            rgba(212,175,55,.30) 50%,
            transparent 51%,
            transparent 74%,
            rgba(212,175,55,.25) 75%,
            rgba(212,175,55,.25) 77%,
            transparent 78%
        );

    z-index: 2;
}


/* Scroll rollers */

.action-collections .papyrus-roll::before,
.action-collections .papyrus-roll::after {
    content: "";

    position: absolute;

    top: 38px;

    width: 12px;
    height: 56px;

    border: 2px solid #d4af37;

    border-radius: 50%;

    z-index: 4;
}


.action-collections .papyrus-roll::before {
    left: 22px;
}


.action-collections .papyrus-roll::after {
    right: 22px;
}


/* Papyrus central decoration */

.action-collections .papyrus-lines {
    position: absolute;

    width: 32px;
    height: 15px;

    left: 50%;
    top: 76px;

    transform: translateX(-50%);

    border-top: 2px solid #d4af37;

    z-index: 6;
}


.action-collections .papyrus-lines::after {
    content: "𓋹";

    position: absolute;

    left: 50%;
    top: -17px;

    transform: translateX(-50%);

    color: #d4af37;

    font-size: 19px;

    text-shadow:
        0 0 5px rgba(212,175,55,.4);
}


/* =========================================================
   3 — RESEARCH GUIDES
   DOCUMENT + MAGNIFYING GLASS
========================================================= */

.action-research .action-symbol {
    border-radius: 17px;
}


/* Hide old research drawing */

.action-research .research-ring,
.action-research .research-cross {
    opacity: 0;
}


/* Document */

.action-research .action-symbol::after {
    content: "";

    position: absolute;

    width: 49px;
    height: 64px;

    left: 34px;
    top: 25px;

    border: 1.5px solid #d4af37;

    border-radius: 3px;

    background:
        linear-gradient(
            to bottom,
            transparent 16%,
            rgba(212,175,55,.42) 17%,
            rgba(212,175,55,.42) 18%,
            transparent 19%,
            transparent 32%,
            rgba(212,175,55,.32) 33%,
            rgba(212,175,55,.32) 34%,
            transparent 35%,
            transparent 48%,
            rgba(212,175,55,.28) 49%,
            rgba(212,175,55,.28) 50%,
            transparent 51%
        );

    z-index: 2;
}


/* Document corner */

.action-research .action-symbol::before {
    inset: 8px;

    border-color: rgba(212,175,55,.25);

    box-shadow: none;
}


/* Magnifying glass */

.action-research .research-cross {
    position: absolute;

    opacity: 1;

    width: 32px;
    height: 32px;

    left: 66px;
    top: 69px;

    transform: none;

    border: 2px solid #d4af37;

    border-radius: 50%;

    z-index: 8;
}


/* Glass handle */

.action-research .research-cross::after {
    content: "";

    position: absolute;

    width: 19px;
    height: 2px;

    left: 22px;
    top: 28px;

    background: #d4af37;

    transform: rotate(45deg);

    transform-origin: left center;
}


/* Glass shine */

.action-research .research-cross::before {
    content: "";

    position: absolute;

    width: 7px;
    height: 7px;

    left: 6px;
    top: 5px;

    border-top: 1px solid rgba(255,239,174,.8);
    border-left: 1px solid rgba(255,239,174,.8);

    border-radius: 50%;
}


/* =========================================================
   HOVER GLOW FOR EACH ICON
========================================================= */

.action-ai:hover .action-symbol::after {
    text-shadow:
        0 0 6px rgba(212,175,55,.8),
        0 0 18px rgba(212,175,55,.35);
}


.action-collections:hover .action-symbol::after {
    filter: drop-shadow(0 0 5px rgba(212,175,55,.45));
}


.action-research:hover .research-cross {
    filter:
        drop-shadow(0 0 5px rgba(212,175,55,.6));
}


/* =========================================================
   RESPONSIVE
========================================================= */

@media (max-width: 600px) {

    .temple-actions {
        gap: 54px;
    }

    .temple-action {
        width: 122px;
        height: 122px;
    }

    .action-symbol {
        width: 108px;
        height: 108px;
    }

    .action-label {
        top: 116px;
        font-size: 8px;
    }

    .temple-action::after {
        width: 110px;
        font-size: 8px;
        letter-spacing: 1.2px;
    }

}
/* =========================================================
   AI TOOLS
   Egyptian + Artificial Intelligence
========================================================= */

.action-ai .action-symbol {
    border-radius: 50%;
}


/* Inner AI circle */

.action-ai .action-symbol::after {
    content: "AI";

    position: absolute;

    left: 50%;
    top: 50%;

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

    width: 52px;
    height: 52px;

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

    border: 2px solid #d4af37;

    border-radius: 50%;

    color: #e8c75a;

    font-family:
        "Cinzel",
        Arial,
        sans-serif;

    font-size: 20px;
    font-weight: 700;

    letter-spacing: 1px;

    background:
        radial-gradient(
            circle,
            rgba(212,175,55,.16),
            rgba(8,17,31,.25)
        );

    text-shadow:
        0 0 6px rgba(212,175,55,.7);

    box-shadow:
        0 0 10px rgba(212,175,55,.2) inset,
        0 0 8px rgba(212,175,55,.2);

    z-index: 5;
}


/* AI circuit ring */

.action-ai .icon-orbit {
    position: absolute;

    width: 78px;
    height: 78px;

    border: 1px solid rgba(212,175,55,.75);

    border-radius: 50%;
}


/* Circuit branches */

.action-ai .icon-orbit::before {
    content: "";

    position: absolute;

    inset: -14px;

    border: 1px dashed rgba(212,175,55,.38);

    border-radius: 50%;
}


/* AI circuit nodes */

.action-ai .icon-orbit::after {
    content: "";

    position: absolute;

    width: 8px;
    height: 8px;

    top: -5px;
    left: 50%;

    transform: translateX(-50%);

    border-radius: 50%;

    background: #e7c044;

    box-shadow:
        0 0 7px rgba(231,192,68,.9),
        72px 35px 0 -1px #e7c044,
        -72px 35px 0 -1px #e7c044;
}


/* Four AI circuit lines */

.action-ai .icon-rays {
    position: absolute;

    width: 100px;
    height: 100px;

    left: 50%;
    top: 50%;

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

    pointer-events: none;
}


/* horizontal circuit */

.action-ai .icon-rays::before {
    content: "";

    position: absolute;

    width: 100px;
    height: 1px;

    left: 0;
    top: 50%;

    background:
        linear-gradient(
            90deg,
            transparent 0%,
            rgba(212,175,55,.45) 18%,
            #d4af37 18%,
            #d4af37 82%,
            rgba(212,175,55,.45) 82%,
            transparent 100%
        );
}


/* vertical circuit */

.action-ai .icon-rays::after {
    content: "";

    position: absolute;

    width: 1px;
    height: 100px;

    left: 50%;
    top: 0;

    background:
        linear-gradient(
            0deg,
            transparent 0%,
            rgba(212,175,55,.45) 18%,
            #d4af37 18%,
            #d4af37 82%,
            rgba(212,175,55,.45) 82%,
            transparent 100%
        );
}


/* AI hover */

.action-ai:hover .action-symbol {
    box-shadow:
        0 0 20px rgba(212,175,55,.28),
        inset 0 0 22px rgba(212,175,55,.12);
}

.action-ai:hover .icon-orbit {
    animation: aiPulse 1.8s ease-in-out infinite;
}

@keyframes aiPulse {

    0%, 100% {
        transform: scale(1);
    }

    50% {
        transform: scale(1.05);
    }

}


/* =========================================================
   MY COLLECTIONS
   BOOK COLLECTION / LIBRARY
========================================================= */

.action-collections .action-symbol {
    border-radius: 17px;
}


/* Remove old papyrus drawing */

.action-collections .action-symbol::after {
    content: "";

    position: absolute;

    width: 70px;
    height: 42px;

    left: 24px;
    top: 54px;

    border: 2px solid #d4af37;

    border-radius: 3px;

    background:
        linear-gradient(
            to bottom,
            transparent 22%,
            rgba(212,175,55,.35) 23%,
            rgba(212,175,55,.35) 25%,
            transparent 26%,
            transparent 48%,
            rgba(212,175,55,.30) 49%,
            rgba(212,175,55,.30) 51%,
            transparent 52%,
            transparent 74%,
            rgba(212,175,55,.25) 75%,
            rgba(212,175,55,.25) 77%,
            transparent 78%
        );

    box-shadow:
        0 -9px 0 -7px #d4af37;

    z-index: 3;
}


/* =========================================================
   BOOK 1
========================================================= */

.action-collections .papyrus-roll::before {
    content: "";

    position: absolute;

    width: 72px;
    height: 12px;

    left: 22px;
    top: 43px;

    border: 2px solid #d4af37;

    border-radius: 3px;

    background:
        linear-gradient(
            90deg,
            rgba(212,175,55,.25),
            transparent 25%,
            transparent 75%,
            rgba(212,175,55,.25)
        );

    transform: skewX(-7deg);

    z-index: 4;
}


/* =========================================================
   BOOK 2
========================================================= */

.action-collections .papyrus-roll::after {
    content: "";

    position: absolute;

    width: 76px;
    height: 13px;

    left: 20px;
    top: 82px;

    border: 2px solid #d4af37;

    border-radius: 3px;

    background:
        linear-gradient(
            90deg,
            rgba(212,175,55,.28),
            transparent 25%,
            transparent 75%,
            rgba(212,175,55,.28)
        );

    transform: skewX(6deg);

    z-index: 5;
}


/* =========================================================
   BOOK SPINE / CENTER
========================================================= */

.action-collections .papyrus-lines {
    position: absolute;

    left: 50%;
    top: 45px;

    transform: translateX(-50%);

    width: 8px;
    height: 60px;

    border-left: 1px solid rgba(212,175,55,.5);

    border-right: 1px solid rgba(212,175,55,.5);

    z-index: 7;
}


/* Bookmark */

.action-collections .papyrus-lines::after {
    content: "";

    position: absolute;

    left: 50%;
    top: 4px;

    transform: translateX(-50%);

    width: 12px;
    height: 27px;

    background: #d4af37;

    clip-path: polygon(
        0 0,
        100% 0,
        100% 100%,
        50% 72%,
        0 100%
    );

    box-shadow:
        0 0 6px rgba(212,175,55,.35);
}


/* =========================================================
   BOOK COLLECTION DECORATION
========================================================= */

.action-collections .action-symbol {
    box-shadow:
        inset 0 0 20px rgba(212,175,55,.06);
}


.action-collections:hover .action-symbol {
    box-shadow:
        inset 0 0 24px rgba(212,175,55,.12),
        0 0 22px rgba(212,175,55,.22);
}
/* =========================================================
   PHARAONIC QUICK ACTIONS — CLEAN ICON SYSTEM
========================================================= */

.temple-actions {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 34px;
    z-index: 30;
}


/* =========================================================
   ACTION BUTTON
========================================================= */

.temple-action {
    position: relative;

    width: 150px;
    min-height: 175px;

    padding: 0;
    border: 0;

    background: transparent;
    color: #d4af37;

    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;

    cursor: pointer;

    font-family: inherit;

    transition:
        transform .35s ease,
        filter .35s ease;
}


/* =========================================================
   ICON FRAME
========================================================= */

.action-symbol {
    position: relative;

    width: 132px;
    height: 132px;

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

    border: 1px solid rgba(212,175,55,.65);
    border-radius: 24px;

    background:
        radial-gradient(
            circle at 50% 45%,
            rgba(212,175,55,.16),
            rgba(18,13,5,.72) 65%
        );

    box-shadow:
        inset 0 0 18px rgba(212,175,55,.08),
        0 0 14px rgba(212,175,55,.10);

    overflow: visible;

    transition:
        border-color .35s ease,
        box-shadow .35s ease,
        transform .35s ease;
}


.action-symbol::before {
    content: "";

    position: absolute;
    inset: 8px;

    border: 1px solid rgba(212,175,55,.22);
    border-radius: 18px;

    pointer-events: none;
}


.action-symbol svg {
    width: 108px;
    height: 108px;

    overflow: visible;

    display: block;
}


/* =========================================================
   AI TOOLS
========================================================= */

.ai-relic {
    border-radius: 50%;
    width: 132px;
    height: 132px;
}


.ai-relic::before {
    border-radius: 50%;
}


/* Outer AI circle */

.ai-ring {
    fill: none;

    stroke: #d4af37;
    stroke-width: 1.4;

    opacity: .85;
}


/* Neural connections */

.ai-network {
    fill: none;

    stroke: #d4af37;
    stroke-width: 1.4;

    opacity: .72;

    stroke-linecap: round;
    stroke-linejoin: round;
}


/* Neural nodes */

.ai-node {
    fill: #f1cf68;

    stroke: #8c6a13;
    stroke-width: 1;

    filter:
        drop-shadow(0 0 4px rgba(212,175,55,.7));
}


/* AI center */

.ai-core {
    fill: rgba(212,175,55,.13);

    stroke: #e0bd48;
    stroke-width: 1.8;

    filter:
        drop-shadow(0 0 5px rgba(212,175,55,.35));
}


.ai-core-line {
    fill: none;

    stroke: #f0cf67;
    stroke-width: 2;

    stroke-linecap: round;
}


/* Circuit extensions */

.ai-circuit {
    fill: none;

    stroke: #b99327;
    stroke-width: 1.3;

    stroke-linecap: round;
    stroke-linejoin: round;

    opacity: .7;
}


/* =========================================================
   MY COLLECTIONS
========================================================= */

.collection-relic {
    border-radius: 22px;
}


/* Books */

.collection-book {
    fill: rgba(100,72,20,.22);

    stroke: #d4af37;
    stroke-width: 1.7;

    filter:
        drop-shadow(0 0 3px rgba(212,175,55,.18));
}


.back-book {
    fill: rgba(212,175,55,.07);
}


.middle-book {
    fill: rgba(212,175,55,.11);
}


.front-book {
    fill: rgba(212,175,55,.16);
}


/* Book details */

.book-detail,
.collection-line {
    fill: none;

    stroke: #d4af37;
    stroke-width: 1.4;

    stroke-linecap: round;

    opacity: .7;
}


/* Bookmark */

.collection-bookmark {
    fill: rgba(212,175,55,.22);

    stroke: #e2c45c;
    stroke-width: 1.5;

    filter:
        drop-shadow(0 0 4px rgba(212,175,55,.35));
}


/* Top decorative crown */

.collection-crown {
    fill: none;

    stroke: #d4af37;
    stroke-width: 1.5;

    stroke-linecap: round;
    stroke-linejoin: round;

    opacity: .8;
}


/* =========================================================
   RESEARCH GUIDES
   نخلي الأيقونة الحالية كما هي
========================================================= */

.research-relic {
    border-radius: 50%;
}


/* =========================================================
   LABEL UNDER ICON
========================================================= */

.action-label {
    position: relative;

    margin-top: 13px;

    color: #d4af37;

    font-size: 10px;
    font-weight: 600;

    letter-spacing: 1.8px;

    white-space: nowrap;

    text-shadow:
        0 0 5px rgba(212,175,55,.35);

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


/* =========================================================
   HOVER SIDE LABEL
========================================================= */

.action-side-label {
    position: absolute;

    left: -165px;
    top: 51px;

    width: 145px;

    padding: 10px 12px;

    box-sizing: border-box;

    color: #f2d36b;

    font-size: 9px;
    font-weight: 700;

    letter-spacing: 1.4px;

    text-align: right;

    opacity: 0;

    transform:
        translateX(18px);

    pointer-events: none;

    border-right: 2px solid #d4af37;

    background:
        linear-gradient(
            to right,
            transparent,
            rgba(212,175,55,.08)
        );

    text-shadow:
        0 0 7px rgba(212,175,55,.4);

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


/* Small gold line leading to icon */

.action-side-label::after {
    content: "";

    position: absolute;

    right: -32px;
    top: 50%;

    width: 30px;
    height: 1px;

    background: linear-gradient(
        to right,
        #d4af37,
        transparent
    );

    opacity: .8;
}


/* =========================================================
   HOVER
========================================================= */

.temple-action:hover {
    transform: translateX(4px);

    filter:
        drop-shadow(0 0 8px rgba(212,175,55,.18));
}


.temple-action:hover .action-symbol {
    transform: scale(1.035);

    border-color: #e4c65c;

    box-shadow:
        inset 0 0 22px rgba(212,175,55,.12),
        0 0 24px rgba(212,175,55,.20);
}


.temple-action:hover .action-label {
    opacity: 0;

    transform: translateY(-5px);
}


.temple-action:hover .action-side-label {
    opacity: 1;

    transform: translateX(0);
}


/* =========================================================
   AI ANIMATION
========================================================= */

.action-ai .ai-node {
    animation: aiNodePulse 2.8s ease-in-out infinite;
}

.action-ai .ai-node:nth-child(3) {
    animation-delay: .25s;
}

.action-ai .ai-node:nth-child(4) {
    animation-delay: .5s;
}

.action-ai .ai-node:nth-child(5) {
    animation-delay: .75s;
}

@keyframes aiNodePulse {

    0%,
    100% {
        opacity: .65;
    }

    50% {
        opacity: 1;
        filter:
            drop-shadow(0 0 7px rgba(212,175,55,.9));
    }

}


/* =========================================================
   COLLECTIONS SUBTLE GLOW
========================================================= */

.action-collections:hover .collection-bookmark {
    filter:
        drop-shadow(0 0 8px rgba(212,175,55,.7));
}


.action-collections:hover .collection-book {
    stroke: #ebcb61;
}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 700px) {

    .action-side-label {
        display: none;
    }

    .action-label {
        opacity: 1 !important;
        transform: none !important;
    }

    .temple-action {
        width: 145px;
    }

}
```css
/* =========================================================
   PHARAONIC TEMPLE SERVICES
   Ancient Gold Relic System
========================================================= */

.temple-actions {
    position: relative;

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

    gap: clamp(34px, 5vw, 76px);

    margin-top: 34px;
}


/* =========================================================
   SERVICE BUTTON
========================================================= */

.temple-action {
    position: relative;

    width: 150px;

    padding: 0;

    border: 0;
    background: transparent;

    color: inherit;

    cursor: pointer;

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

    isolation: isolate;
}


/* =========================================================
   MAIN RELIC
========================================================= */

.service-relic {
    position: relative;

    width: 126px;
    height: 126px;

    display: block;

    border-radius: 50%;

    border: 1px solid rgba(212, 175, 55, .78);

    background:
        radial-gradient(
            circle at 50% 48%,
            rgba(212, 175, 55, .20) 0%,
            rgba(212, 175, 55, .08) 36%,
            rgba(7, 17, 31, .92) 72%
        );

    box-shadow:
        inset 0 0 0 5px rgba(212,175,55,.025),
        inset 0 0 22px rgba(212,175,55,.10),
        0 0 22px rgba(212,175,55,.07);

    transition:
        transform .55s cubic-bezier(.2,.8,.2,1),
        box-shadow .55s ease,
        border-color .45s ease;
}


/* Inner engraved ring */

.service-relic::before {
    content: "";

    position: absolute;

    inset: 8px;

    border-radius: 50%;

    border: 1px solid rgba(212,175,55,.42);

    box-shadow:
        inset 0 0 14px rgba(212,175,55,.07);
}


/* Outer broken archaeological ring */

.service-relic::after {
    content: "";

    position: absolute;

    inset: -12px;

    border-radius: 50%;

    border: 1px dashed rgba(212,175,55,.24);

    transform: rotate(-14deg);

    pointer-events: none;
}


/* =========================================================
   HOVER RELIC
========================================================= */

.temple-action:hover .service-relic {
    transform:
        translateY(-7px)
        scale(1.035);

    border-color: #e7c85a;

    box-shadow:
        inset 0 0 0 5px rgba(212,175,55,.04),
        inset 0 0 28px rgba(212,175,55,.14),
        0 0 30px rgba(212,175,55,.18);
}


/* =========================================================
   ORBITS
========================================================= */

.relic-orbit {
    position: absolute;

    border-radius: 50%;

    pointer-events: none;
}

.orbit-1 {
    inset: -13px;

    border: 1px solid rgba(212,175,55,.14);

    border-left-color: rgba(212,175,55,.55);
    border-bottom-color: transparent;

    transform: rotate(28deg);
}

.orbit-2 {
    inset: -19px;

    border: 1px solid rgba(212,175,55,.08);

    border-top-color: rgba(212,175,55,.35);
    border-right-color: transparent;

    transform: rotate(-35deg);
}


/* =========================================================
   ORBIT STARS
========================================================= */

.relic-star {
    position: absolute;

    width: 6px;
    height: 6px;

    border-radius: 50%;

    background: #e5c34f;

    box-shadow:
        0 0 8px rgba(229,195,79,.8);

    z-index: 5;
}

.star-1 {
    top: -18px;
    right: 22px;
}

.star-2 {
    bottom: -18px;
    left: 28px;

    width: 5px;
    height: 5px;
}

.star-3 {
    top: 34px;
    left: -20px;

    width: 4px;
    height: 4px;

    opacity: .75;
}


/* =========================================================
   AI TOOLS
   Solar Disc + Neural Intelligence
========================================================= */

.ai-relic .solar-disc {
    position: absolute;

    width: 72px;
    height: 72px;

    left: 27px;
    top: 27px;

    border-radius: 50%;

    background:
        radial-gradient(
            circle,
            rgba(238,203,79,.30),
            rgba(212,175,55,.10) 48%,
            transparent 72%
        );

    border: 1px solid rgba(212,175,55,.65);

    box-shadow:
        0 0 16px rgba(212,175,55,.10);
}


/* Sun rays */

.ai-relic .solar-disc::before {
    content: "";

    position: absolute;

    inset: -8px;

    border-radius: 50%;

    border: 1px solid rgba(212,175,55,.16);

    border-top-color: rgba(212,175,55,.60);
}


/* AI brain */

.ai-symbol {
    position: absolute;

    width: 55px;
    height: 45px;

    left: 35px;
    top: 39px;

    z-index: 3;
}


/* Brain outline */

.ai-brain-outline {
    position: absolute;

    inset: 0;

    border: 2px solid #d8b844;

    border-radius:
        48% 52% 46% 54%
        / 58% 52% 48% 42%;

    background:
        radial-gradient(
            circle at 50% 50%,
            rgba(212,175,55,.16),
            transparent 67%
        );

    box-shadow:
        0 0 8px rgba(212,175,55,.12);
}

.ai-brain-outline::after {
    content: "";

    position: absolute;

    top: 4px;
    bottom: 4px;
    left: 50%;

    width: 1px;

    background: rgba(212,175,55,.55);
}


/* Circuit lines */

.ai-circuit {
    position: absolute;

    height: 1px;

    background: #d4af37;

    opacity: .75;

    transform-origin: left center;
}

.circuit-1 {
    width: 17px;
    left: 2px;
    top: 13px;
    transform: rotate(20deg);
}

.circuit-2 {
    width: 17px;
    right: 2px;
    top: 13px;
    transform: rotate(-20deg);
}

.circuit-3 {
    width: 15px;
    left: 3px;
    top: 30px;
    transform: rotate(-15deg);
}

.circuit-4 {
    width: 15px;
    right: 3px;
    top: 30px;
    transform: rotate(15deg);
}


/* Neural nodes */

.ai-node {
    position: absolute;

    width: 5px;
    height: 5px;

    border-radius: 50%;

    background: #e8c95b;

    box-shadow:
        0 0 7px rgba(232,201,91,.85);
}

.ai-node-1 {
    left: 0;
    top: 10px;
}

.ai-node-2 {
    right: 0;
    top: 10px;
}

.ai-node-3 {
    left: 0;
    top: 29px;
}

.ai-node-4 {
    right: 0;
    top: 29px;
}


/* Horus eye */

.ai-eye {
    position: absolute;

    left: 51px;
    bottom: 12px;

    color: #d9b944;

    font-size: 18px;

    opacity: .65;

    text-shadow:
        0 0 8px rgba(212,175,55,.35);
}


/* =========================================================
   MY COLLECTIONS
   Sacred Library Scrolls
========================================================= */

.collection-relic .collection-halo {
    position: absolute;

    width: 74px;
    height: 74px;

    left: 26px;
    top: 26px;

    border-radius: 50%;

    border: 1px solid rgba(212,175,55,.22);
}


/* Scroll / book layers */

.scroll-book {
    position: absolute;

    width: 62px;
    height: 22px;

    left: 32px;

    border: 1px solid #cba936;

    border-radius: 5px;

    background:
        linear-gradient(
            180deg,
            rgba(212,175,55,.18),
            rgba(50,34,10,.35)
        );

    box-shadow:
        inset 0 0 9px rgba(212,175,55,.07);
}

.scroll-back {
    top: 37px;

    transform: rotate(-7deg);

    opacity: .58;
}

.scroll-middle {
    top: 51px;

    transform: rotate(4deg);

    opacity: .76;
}

.scroll-front {
    top: 65px;

    transform: rotate(-2deg);

    height: 24px;
}


/* Scroll end caps */

.scroll-book::before,
.scroll-book::after {
    content: "";

    position: absolute;

    top: 2px;

    width: 6px;
    height: 16px;

    border: 1px solid rgba(212,175,55,.65);

    border-radius: 50%;
}

.scroll-book::before {
    left: -4px;
}

.scroll-book::after {
    right: -4px;
}


/* Bookmark */

.collection-bookmark {
    position: absolute;

    right: 27px;
    top: 31px;

    width: 17px;
    height: 40px;

    background:
        linear-gradient(
            180deg,
            #e5c653,
            #98721c
        );

    clip-path:
        polygon(
            0 0,
            100% 0,
            100% 100%,
            50% 76%,
            0 100%
        );

    filter:
        drop-shadow(0 0 6px rgba(212,175,55,.35));
}


/* Eye */

.collection-eye {
    position: absolute;

    left: 51px;
    top: 88px;

    font-size: 17px;

    color: #d4af37;

    opacity: .62;
}


/* Ankh */

.collection-ankh {
    position: absolute;

    right: 21px;
    bottom: 15px;

    font-size: 16px;

    color: #d4af37;

    opacity: .58;
}


/* =========================================================
   RESEARCH GUIDES
   Papyrus + Magnifying Glass
========================================================= */

.research-scroll {
    position: absolute;

    left: 33px;
    top: 28px;

    width: 58px;
    height: 68px;

    z-index: 2;
}


/* Scroll paper */

.scroll-paper {
    position: absolute;

    left: 7px;
    top: 5px;

    width: 45px;
    height: 57px;

    border: 1px solid #d2ae39;

    background:
        linear-gradient(
            90deg,
            rgba(212,175,55,.20),
            rgba(212,175,55,.06)
        );

    box-shadow:
        inset 6px 0 rgba(212,175,55,.06);

    transform: rotate(-5deg);
}


/* Scroll writing */

.scroll-paper span {
    display: block;

    width: 27px;

    height: 1px;

    margin-left: 11px;

    background: rgba(212,175,55,.48);
}

.scroll-paper span:nth-child(1) {
    margin-top: 17px;
}

.scroll-paper span:nth-child(2) {
    margin-top: 8px;
    width: 20px;
}

.scroll-paper span:nth-child(3) {
    margin-top: 8px;
}

.scroll-paper span:nth-child(4) {
    margin-top: 8px;
    width: 15px;
}


/* Scroll rollers */

.scroll-top,
.scroll-bottom {
    position: absolute;

    left: 0;

    width: 58px;
    height: 10px;

    border: 1px solid #d4af37;

    border-radius: 50%;

    background:
        linear-gradient(
            90deg,
            #806016,
            #d8b947,
            #806016
        );
}

.scroll-top {
    top: 0;
}

.scroll-bottom {
    bottom: 0;
}


/* Magnifier */

.research-magnifier {
    position: absolute;

    right: 15px;
    bottom: 18px;

    width: 39px;
    height: 39px;

    z-index: 5;
}

.magnifier-glass {
    position: absolute;

    width: 28px;
    height: 28px;

    left: 0;
    top: 0;

    border: 2px solid #d9b947;

    border-radius: 50%;

    background:
        radial-gradient(
            circle,
            rgba(212,175,55,.13),
            transparent 68%
        );

    box-shadow:
        0 0 9px rgba(212,175,55,.14);
}

.magnifier-handle {
    position: absolute;

    width: 17px;
    height: 2px;

    left: 24px;
    top: 28px;

    background: #d4af37;

    transform:
        rotate(48deg);

    transform-origin: left center;

    border-radius: 3px;
}


/* Research eye */

.research-eye {
    position: absolute;

    left: 50px;
    bottom: 14px;

    color: #d4af37;

    font-size: 16px;

    opacity: .58;
}


/* =========================================================
   LABEL
========================================================= */

.temple-action .action-label {
    position: relative;

    margin-top: 25px;

    color: #d9b947;

    font-family:
        Georgia,
        "Times New Roman",
        serif;

    font-size: 10px;

    letter-spacing: 2.2px;

    line-height: 1.4;

    text-align: center;

    white-space: nowrap;

    transition:
        opacity .25s ease,
        transform .4s ease;
}


/* =========================================================
   LEFT HOVER NAME BAR
========================================================= */

.temple-action::before {
    content: attr(aria-label);

    position: absolute;

    left: -17px;
    top: 63px;

    width: 0;
    height: 36px;

    padding: 0;

    display: flex;
    align-items: center;

    overflow: hidden;

    white-space: nowrap;

    color: #e7c75a;

    font-family:
        Georgia,
        "Times New Roman",
        serif;

    font-size: 10px;

    letter-spacing: 1.8px;

    background:
        linear-gradient(
            90deg,
            rgba(212,175,55,.17),
            rgba(6,15,29,.94)
        );

    border-top: 1px solid rgba(212,175,55,.75);
    border-bottom: 1px solid rgba(212,175,55,.75);

    opacity: 0;

    transform:
        translateX(-12px);

    transition:
        width .42s cubic-bezier(.2,.8,.2,1),
        opacity .25s ease,
        transform .42s cubic-bezier(.2,.8,.2,1);

    z-index: 20;
}


.temple-action:hover::before {
    width: 190px;

    padding:
        0 18px;

    opacity: 1;

    transform:
        translateX(-100%);
}


/* Hide bottom label */

.temple-action:hover .action-label {
    opacity: 0;

    transform:
        translateY(8px);
}


/* =========================================================
   SMALL LEFT GOLD MARK
========================================================= */

.temple-action::after {
    content: "";

    position: absolute;

    left: -22px;
    top: 63px;

    width: 5px;
    height: 5px;

    border-radius: 50%;

    background: #e3c253;

    box-shadow:
        0 0 9px rgba(227,194,83,.85);

    opacity: 0;

    transition:
        opacity .3s ease;
}

.temple-action:hover::after {
    opacity: 1;
}


/* =========================================================
   SUBTLE RELIC MOTION
========================================================= */

@keyframes relicOrbit {
    from {
        transform: rotate(0deg);
    }

    to {
        transform: rotate(360deg);
    }
}

@keyframes relicPulse {
    0%,
    100% {
        opacity: .45;
        transform: scale(.95);
    }

    50% {
        opacity: .9;
        transform: scale(1.08);
    }
}

.ai-relic .orbit-1 {
    animation:
        relicOrbit 18s linear infinite;
}

.collection-relic .orbit-2 {
    animation:
        relicOrbit 23s linear infinite reverse;
}

.research-relic .orbit-1 {
    animation:
        relicOrbit 20s linear infinite;
}

.relic-star {
    animation:
        relicPulse 3.5s ease-in-out infinite;
}

.star-2 {
    animation-delay: 1s;
}

.star-3 {
    animation-delay: 2s;
}


/* =========================================================
   REDUCE MOTION
========================================================= */

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

    .service-relic,
    .relic-orbit,
    .relic-star,
    .temple-action::before {
        animation: none !important;
        transition: none !important;
    }
}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 700px) {

    .temple-actions {
        gap: 18px;
    }

    .temple-action {
        width: 125px;
    }

    .service-relic {
        width: 105px;
        height: 105px;
    }

    .temple-action .action-label {
        font-size: 8px;
        letter-spacing: 1.4px;
    }

    .temple-action::before {
        display: none;
    }

    .temple-action:hover .action-label {
        opacity: 1;
        transform: none;
    }
}
```
```css
/* =========================================================
   SERVICE ICONS — SMALLER + MORE VISIBLE
========================================================= */

.temple-actions {
    gap: clamp(28px, 4vw, 58px);
    margin-top: 28px;
}


/* Main icon */

.service-relic {
    width: 104px;
    height: 104px;

    border: 1.5px solid rgba(226, 191, 70, .95);

    background:
        radial-gradient(
            circle at 50% 45%,
            rgba(224, 187, 61, .24) 0%,
            rgba(212, 175, 55, .10) 38%,
            rgba(5, 15, 29, .96) 74%
        );

    box-shadow:
        inset 0 0 0 4px rgba(236, 202, 86, .035),
        inset 0 0 20px rgba(220, 183, 58, .13),
        0 0 18px rgba(220, 183, 58, .12);
}


/* Inner ring */

.service-relic::before {
    inset: 7px;

    border-color:
        rgba(226, 191, 70, .62);

    box-shadow:
        inset 0 0 12px rgba(226, 191, 70, .10);
}


/* Outer archaeological ring */

.service-relic::after {
    inset: -10px;

    border-color:
        rgba(226, 191, 70, .30);
}


/* Hover */

.temple-action:hover .service-relic {
    transform:
        translateY(-5px)
        scale(1.035);

    border-color: #f2d36b;

    box-shadow:
        inset 0 0 0 4px rgba(236, 202, 86, .05),
        inset 0 0 24px rgba(226, 191, 70, .18),
        0 0 28px rgba(226, 191, 70, .24);
}


/* =========================================================
   ORBITS
========================================================= */

.orbit-1 {
    inset: -11px;

    border-color:
        rgba(226, 191, 70, .20);

    border-left-color:
        rgba(238, 204, 91, .72);
}

.orbit-2 {
    inset: -16px;

    border-color:
        rgba(226, 191, 70, .12);

    border-top-color:
        rgba(238, 204, 91, .50);
}


/* =========================================================
   STARS
========================================================= */

.relic-star {
    width: 5px;
    height: 5px;

    background: #f1d15d;

    box-shadow:
        0 0 9px rgba(241, 209, 93, .95);
}

.star-1 {
    top: -15px;
    right: 18px;
}

.star-2 {
    bottom: -15px;
    left: 24px;
}

.star-3 {
    top: 28px;
    left: -17px;
}


/* =========================================================
   AI TOOLS — resize
========================================================= */

.ai-relic .solar-disc {
    width: 60px;
    height: 60px;

    left: 22px;
    top: 22px;

    border-color:
        rgba(239, 204, 78, .90);

    background:
        radial-gradient(
            circle,
            rgba(238, 203, 79, .34),
            rgba(212, 175, 55, .13) 50%,
            transparent 74%
        );

    box-shadow:
        0 0 18px rgba(226, 191, 70, .16);
}


.ai-relic .solar-disc::before {
    inset: -7px;

    border-color:
        rgba(226, 191, 70, .25);

    border-top-color:
        rgba(239, 204, 78, .72);
}


.ai-symbol {
    width: 46px;
    height: 38px;

    left: 29px;
    top: 33px;
}


.ai-brain-outline {
    border-color:
        #e4c451;

    box-shadow:
        0 0 9px rgba(228, 196, 81, .16);
}


.ai-circuit {
    background:
        #e8c957;

    opacity: .9;
}


.ai-node {
    width: 4px;
    height: 4px;

    background:
        #f2d36b;

    box-shadow:
        0 0 7px rgba(242, 211, 107, .95);
}


.ai-eye {
    left: 42px;
    bottom: 9px;

    color:
        #e6c95a;

    font-size: 15px;

    opacity: .80;
}


/* =========================================================
   COLLECTIONS — resize
========================================================= */

.collection-relic .collection-halo {
    width: 62px;
    height: 62px;

    left: 21px;
    top: 21px;

    border-color:
        rgba(226, 191, 70, .32);
}


.scroll-book {
    width: 52px;
    height: 19px;

    left: 26px;

    border-color:
        #dfbe4e;

    background:
        linear-gradient(
            180deg,
            rgba(226, 191, 70, .22),
            rgba(55, 38, 11, .42)
        );

    box-shadow:
        inset 0 0 9px rgba(226, 191, 70, .10);
}


.scroll-back {
    top: 31px;
}

.scroll-middle {
    top: 43px;
}

.scroll-front {
    top: 55px;

    height: 21px;
}


.scroll-book::before,
.scroll-book::after {
    border-color:
        rgba(235, 199, 82, .80);
}


.collection-bookmark {
    right: 22px;
    top: 26px;

    width: 14px;
    height: 34px;

    background:
        linear-gradient(
            180deg,
            #f0cf59,
            #b78b24
        );

    filter:
        drop-shadow(0 0 7px rgba(226, 191, 70, .45));
}


.collection-eye {
    left: 42px;
    top: 73px;

    color:
        #e4c451;

    font-size: 15px;

    opacity: .78;
}


.collection-ankh {
    right: 17px;
    bottom: 11px;

    color:
        #e4c451;

    font-size: 14px;

    opacity: .72;
}


/* =========================================================
   RESEARCH — resize
========================================================= */

.research-scroll {
    left: 27px;
    top: 23px;

    width: 50px;
    height: 58px;
}


.scroll-paper {
    left: 6px;
    top: 4px;

    width: 39px;
    height: 48px;

    border-color:
        #e1bf50;

    background:
        linear-gradient(
            90deg,
            rgba(226, 191, 70, .22),
            rgba(226, 191, 70, .06)
        );
}


.scroll-paper span {
    width: 24px;

    margin-left: 9px;

    background:
        rgba(235, 201, 91, .62);
}


.scroll-paper span:nth-child(1) {
    margin-top: 14px;
}

.scroll-paper span:nth-child(2) {
    margin-top: 7px;
}

.scroll-paper span:nth-child(3) {
    margin-top: 7px;
}

.scroll-paper span:nth-child(4) {
    margin-top: 7px;
}


.scroll-top,
.scroll-bottom {
    width: 50px;
    height: 8px;

    border-color:
        #e4c451;

    background:
        linear-gradient(
            90deg,
            #8d6918,
            #e5c451,
            #8d6918
        );
}


.research-magnifier {
    right: 12px;
    bottom: 15px;

    width: 34px;
    height: 34px;
}


.magnifier-glass {
    width: 25px;
    height: 25px;

    border-color:
        #ebc958;

    box-shadow:
        0 0 10px rgba(235, 201, 88, .20);
}


.magnifier-handle {
    width: 15px;

    left: 21px;
    top: 25px;

    background:
        #ebc958;
}


.research-eye {
    left: 42px;
    bottom: 10px;

    color:
        #e4c451;

    font-size: 14px;

    opacity: .76;
}


/* =========================================================
   LABEL
========================================================= */

.temple-action .action-label {
    margin-top: 21px;

    color:
        #e7c85a;

    font-size: 9px;

    letter-spacing: 1.9px;

    text-shadow:
        0 0 8px rgba(226, 191, 70, .18);
}


/* =========================================================
   HOVER BAR
========================================================= */

.temple-action::before {
    top: 52px;
    left: -15px;

    height: 32px;

    color:
        #f0d26b;

    background:
        linear-gradient(
            90deg,
            rgba(226, 191, 70, .20),
            rgba(5, 15, 29, .96)
        );

    border-top-color:
        rgba(235, 201, 88, .85);

    border-bottom-color:
        rgba(235, 201, 88, .85);

    box-shadow:
        0 0 12px rgba(226, 191, 70, .06);
}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 700px) {

    .temple-actions {
        gap: 15px;
    }

    .temple-action {
        width: 110px;
    }

    .service-relic {
        width: 88px;
        height: 88px;
    }

    .temple-action .action-label {
        font-size: 7px;
        letter-spacing: 1.2px;
    }
}
```
/* =========================================================
   QUICK ACTIONS — FINAL OVERRIDE
   ضع هذا في آخر ملف CSS
========================================================= */

.temple-actions {
    position: absolute !important;

    /* تحريك المجموعة ناحية المنطقة المحددة بالأحمر */
    left: 72% !important;
    right: auto !important;

    /* مكانها الرأسي */
    top: 17% !important;

    width: 120px !important;

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

    gap: 28px !important;

    margin: 0 !important;
    padding: 0 !important;

    z-index: 100 !important;
}


/* كل زر */
.temple-action {
    position: relative !important;

    width: 100px !important;
    height: 100px !important;

    min-width: 100px !important;
    min-height: 100px !important;

    margin: 0 !important;
    padding: 0 !important;

    background: transparent !important;
    border: none !important;

    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}


/* تصغير الأيقونة فعليًا */
.temple-action .action-symbol {
    width: 100px !important;
    height: 100px !important;

    transform: scale(.72) !important;

    transform-origin: center center !important;
}


/* Hover */
.temple-action:hover .action-symbol {
    transform: scale(.78) !important;
}


/* الاسم يظل تحت الخدمة */
.temple-action .action-label {
    position: absolute !important;

    left: 50% !important;
    top: calc(100% + 3px) !important;

    transform: translateX(-50%) !important;

    width: 130px !important;

    text-align: center !important;

    opacity: 1 !important;

    pointer-events: none !important;
}


/* عند Hover الاسم اللي تحت يختفي */
.temple-action:hover .action-label {
    opacity: 0 !important;
}


/* =========================================================
   منع أي تحريك قديم للأيقونات
========================================================= */

.action-ai,
.action-collections,
.action-research {
    position: relative !important;
    left: 0 !important;
    right: auto !important;
    top: auto !important;
    bottom: auto !important;

    transform: none !important;
}


/* =========================================================
   RESPONSIVE
========================================================= */

@media (max-width: 900px) {

    .temple-actions {
        left: 70% !important;
        top: 18% !important;
        gap: 22px !important;
    }

    .temple-action {
        width: 90px !important;
        height: 90px !important;
        min-width: 90px !important;
        min-height: 90px !important;
    }

    .temple-action .action-symbol {
        width: 90px !important;
        height: 90px !important;
        transform: scale(.70) !important;
    }
}
/* =========================================================
   TEMPLE ACTIONS — FINAL POSITION
   ========================================================= */

/* الحاوية */
.temple-actions {
    position: absolute !important;

    /* المنطقة ناحية اليمين */
    top: 15% !important;
    right: 3% !important;
    left: auto !important;

    width: 125px !important;
    height: 390px !important;

    margin: 0 !important;
    padding: 0 !important;

    display: block !important;

    z-index: 200 !important;
}


/* =========================================================
   كل زر — نلغي أي positioning قديم
   ========================================================= */

.temple-action {
    position: absolute !important;

    width: 105px !important;
    height: 105px !important;

    min-width: 105px !important;
    min-height: 105px !important;

    margin: 0 !important;
    padding: 0 !important;

    left: 50% !important;
    transform: translateX(-50%) !important;

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

    background: transparent !important;
    border: none !important;
}


/* =========================================================
   أماكن الثلاث أيقونات
   ========================================================= */

/* AI TOOLS */
.temple-action.action-ai {
    top: 0 !important;
    left: 50% !important;

    transform: translateX(-50%) !important;
}


/* MY COLLECTIONS */
.temple-action.action-collections {
    top: 140px !important;
    left: 50% !important;

    transform: translateX(-50%) !important;
}


/* RESEARCH */
.temple-action.action-research {
    top: 280px !important;
    left: 50% !important;

    transform: translateX(-50%) !important;
}


/* =========================================================
   تصغير الأيقونات
   ========================================================= */

.temple-action .action-symbol {
    width: 105px !important;
    height: 105px !important;

    transform: scale(.78) !important;

    transform-origin: center center !important;
}


/* Hover */
.temple-action:hover .action-symbol {
    transform: scale(.84) !important;
}


/* =========================================================
   الاسم
   ========================================================= */

.temple-action .action-label {
    position: absolute !important;

    left: 50% !important;
    top: calc(100% + 2px) !important;

    width: 120px !important;

    transform: translateX(-50%) !important;

    opacity: 1 !important;

    white-space: nowrap;

    text-align: center;

    pointer-events: none;
}


/* عند مرور الماوس يختفي الاسم */
.temple-action:hover .action-label {
    opacity: 0 !important;
}


/* =========================================================
   منع أي transform قديم
   ========================================================= */

.action-ai,
.action-collections,
.action-research {
    rotate: none !important;
}


/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width: 700px) {

    .temple-actions {
        right: 1% !important;
        top: 18% !important;

        width: 105px !important;
        height: 330px !important;
    }

    .temple-action {
        width: 90px !important;
        height: 90px !important;

        min-width: 90px !important;
        min-height: 90px !important;
    }

    .temple-action.action-collections {
        top: 115px !important;
    }

    .temple-action.action-research {
        top: 230px !important;
    }

    .temple-action .action-symbol {
        width: 90px !important;
        height: 90px !important;

        transform: scale(.76) !important;
    }
}
/* =========================================================
   TEMPLE ACTIONS — FULL RESPONSIVE POSITIONING
   Desktop + Tablet + Mobile
========================================================= */

.temple-actions {
    position: absolute !important;

    /*
      الموضع الأساسي:
      فوق الشعلة اليمنى وبنفس النسبة تقريبًا
    */
    top: clamp(145px, 18vh, 190px) !important;
    right: clamp(18px, 8vw, 145px) !important;

    left: auto !important;
    bottom: auto !important;

    width: clamp(90px, 7vw, 125px) !important;

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

    gap: clamp(8px, 1.1vw, 18px) !important;

    margin: 0 !important;
    padding: 0 !important;

    z-index: 500 !important;

    transform: none !important;
}


/* =========================================================
   INDIVIDUAL BUTTON
========================================================= */

.temple-action {
    position: relative !important;

    width: clamp(86px, 6.8vw, 120px) !important;
    height: clamp(86px, 6.8vw, 120px) !important;

    min-width: 0 !important;
    min-height: 0 !important;

    margin: 0 !important;
    padding: 0 !important;

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

    background: transparent !important;
    border: none !important;

    transform: none !important;
}


/* =========================================================
   ICON
========================================================= */

.temple-action .action-symbol {
    width: 100% !important;
    height: 100% !important;

    transform: scale(.88) !important;
    transform-origin: center center !important;

    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}


/* Hover */
.temple-action:hover .action-symbol {
    transform: scale(.94) !important;
}


/* =========================================================
   LABEL
========================================================= */

.temple-action .action-label {
    position: absolute !important;

    top: 100% !important;
    left: 50% !important;

    transform: translateX(-50%) !important;

    width: max-content !important;
    max-width: 160px !important;

    margin-top: 2px !important;

    text-align: center !important;
    white-space: nowrap !important;

    font-size: clamp(7px, .65vw, 10px) !important;
    letter-spacing: clamp(1px, .12vw, 1.8px) !important;

    opacity: 1 !important;

    pointer-events: none !important;
}


/* الاسم يختفي عند المرور */
.temple-action:hover .action-label {
    opacity: 0 !important;
}


/* =========================================================
   ORDER
========================================================= */

.action-ai {
    order: 1 !important;
}

.action-collections {
    order: 2 !important;
}

.action-research {
    order: 3 !important;
}


/* =========================================================
   REMOVE OLD POSITIONING
========================================================= */

.temple-action.action-ai,
.temple-action.action-collections,
.temple-action.action-research {
    position: relative !important;

    top: auto !important;
    right: auto !important;
    bottom: auto !important;
    left: auto !important;

    transform: none !important;
}


/* =========================================================
   LARGE DESKTOP
   1400px+
========================================================= */

@media (min-width: 1400px) {

    .temple-actions {
        top: 175px !important;
        right: 7.5vw !important;
        gap: 18px !important;
    }

    .temple-action {
        width: 120px !important;
        height: 120px !important;
    }
}


/* =========================================================
   LAPTOP / NORMAL DESKTOP
   1000px — 1399px
========================================================= */

@media (min-width: 1000px) and (max-width: 1399px) {

    .temple-actions {
        top: 17vh !important;
        right: 5vw !important;
        gap: 14px !important;
    }

    .temple-action {
        width: 105px !important;
        height: 105px !important;
    }
}


/* =========================================================
   TABLET
   700px — 999px
========================================================= */

@media (min-width: 700px) and (max-width: 999px) {

    .temple-actions {
        top: 16vh !important;
        right: 3vw !important;
        width: 90px !important;
        gap: 10px !important;
    }

    .temple-action {
        width: 88px !important;
        height: 88px !important;
    }

    .temple-action .action-symbol {
        transform: scale(.86) !important;
    }

    .temple-action:hover .action-symbol {
        transform: scale(.91) !important;
    }
}


/* =========================================================
   MOBILE
   أقل من 700px
========================================================= */

@media (max-width: 699px) {

    .temple-actions {
        top: 13vh !important;
        right: 2vw !important;

        width: 70px !important;

        gap: 6px !important;
    }

    .temple-action {
        width: 68px !important;
        height: 68px !important;
    }

    .temple-action .action-symbol {
        transform: scale(.84) !important;
    }

    .temple-action:hover .action-symbol {
        transform: scale(.89) !important;
    }

    .temple-action .action-label {
        font-size: 7px !important;
        letter-spacing: 1px !important;

        max-width: 100px !important;
    }
}


/* =========================================================
   VERY SMALL PHONES
   أقل من 430px
========================================================= */

@media (max-width: 430px) {

    .temple-actions {
        top: 12vh !important;
        right: 8px !important;

        width: 58px !important;

        gap: 3px !important;
    }

    .temple-action {
        width: 58px !important;
        height: 58px !important;
    }

    .temple-action .action-symbol {
        transform: scale(.80) !important;
    }

    .temple-action .action-label {
        font-size: 6px !important;
        letter-spacing: .7px !important;
    }
}
/* =========================================================
   FINAL FIX — TEMPLE ACTIONS POSITION
   Position is now relative to ENTRANCE itself
========================================================= */

.entrance {
    position: relative !important;
}


/* مهم جدًا:
   نمنع entrance-hero من أن يكون
   containing block للأيقونات
*/
.entrance-hero {
    position: static !important;
}


/* =========================================================
   THREE SERVICE ICONS
========================================================= */

.temple-actions {
    position: absolute !important;

    top: 160px !important;
    right: 115px !important;

    left: auto !important;
    bottom: auto !important;

    width: 125px !important;
    height: auto !important;

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

    gap: 18px !important;

    margin: 0 !important;
    padding: 0 !important;

    z-index: 9999 !important;

    transform: none !important;
}


/* =========================================================
   ICON BUTTON
========================================================= */

.temple-action {
    position: relative !important;

    width: 110px !important;
    height: 110px !important;

    min-width: 110px !important;
    min-height: 110px !important;

    margin: 0 !important;
    padding: 0 !important;

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

    background: transparent !important;
    border: none !important;

    transform: none !important;
}


/* =========================================================
   ICON
========================================================= */

.temple-action .action-symbol {
    width: 110px !important;
    height: 110px !important;

    transform: scale(.90) !important;

    transform-origin: center !important;
}


/* =========================================================
   LABEL
========================================================= */

.temple-action .action-label {
    position: absolute !important;

    top: 108px !important;
    left: 50% !important;

    transform: translateX(-50%) !important;

    width: max-content !important;

    margin: 0 !important;

    font-size: 9px !important;
    letter-spacing: 1.5px !important;

    white-space: nowrap !important;

    opacity: 1 !important;

    pointer-events: none !important;
}


/* Hover */
.temple-action:hover .action-label {
    opacity: 0 !important;
}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 700px) {

    .temple-actions {
        top: 130px !important;
        right: 25px !important;

        width: 85px !important;

        gap: 8px !important;
    }

    .temple-action {
        width: 78px !important;
        height: 78px !important;

        min-width: 78px !important;
        min-height: 78px !important;
    }

    .temple-action .action-symbol {
        width: 78px !important;
        height: 78px !important;

        transform: scale(.88) !important;
    }

    .temple-action .action-label {
        top: 76px !important;
        font-size: 6px !important;
    }
}


/* =========================================================
   SMALL PHONE
========================================================= */

@media (max-width: 430px) {

    .temple-actions {
        top: 110px !important;
        right: 12px !important;

        gap: 5px !important;
    }

    .temple-action {
        width: 65px !important;
        height: 65px !important;

        min-width: 65px !important;
        min-height: 65px !important;
    }

    .temple-action .action-symbol {
        width: 65px !important;
        height: 65px !important;
    }

    .temple-action .action-label {
        top: 63px !important;
        font-size: 5px !important;
    }
}
/* ===== FINAL INDIVIDUAL ICON POSITION ===== */

.temple-actions .action-ai {
    position: relative;
    left: 20px;
    top: -15px;
}

.temple-actions .action-collections {
    position: relative;
    left: 0px;
    top: 0px;
}

.temple-actions .action-research {
    position: relative;
    left: 0px;
    top: 0px;
}
 /* =========================================
    FINAL — MOVE EACH ICON INDIVIDUALLY
    ========================================= */

.temple-actions .temple-action.action-ai {
    position: relative !important;
    left: 50px !important;
    top: -100px !important;
    transform: none !important;
}

.temple-actions .temple-action.action-collections {
    position: relative !important;
    left: 50px !important;
    top: -80px !important;
    transform: none !important;
}

.temple-actions .temple-action.action-research {
    position: relative !important;
    left: 50px !important;
    top: -50px !important;
    transform: none !important;
}
/* إخفاء اسم الخدمة الموجود تحت الأيقونة */
.temple-action > .action-label {
    display: none !important;
}
/* ===== FORCE SMALLER SERVICE ICONS ===== */

.temple-actions .pharaoh-icon {
    zoom: 0.78 !important;
}

/* منع الـ hover من إرجاع الحجم القديم */
.temple-actions .temple-action:hover .pharaoh-icon {
    zoom: 0.78 !important;
}
/* =========================================================
   SHRINK PHARAONIC ACTION ICONS
   يحافظ على التفاصيل والحركة والموقع
========================================================= */

.temple-action .action-symbol.pharaoh-icon {
    scale: 0.82 !important;
    transform-origin: center center !important;
}

/* يفضل الحجم ثابت حتى أثناء الـ hover */
.temple-action:hover .action-symbol.pharaoh-icon {
    scale: 0.82 !important;
}
/* =========================================================
   QUICK ACTIONS — FINAL ICON SIZE
   تصغير الأيقونات بدون تشويه التفاصيل
========================================================= */

.temple-action .action-symbol {
    transform: scale(0.82) !important;
    transform-origin: center center !important;
}

/* منع أي كود سابق من تكبير العنصر */
.temple-action .pharaoh-icon {
    transform: scale(0.82) !important;
    transform-origin: center center !important;
}


/* =========================================================
   تثبيت مساحة الأيقونة حتى لا تتحرك العناصر
========================================================= */

.temple-action {
    overflow: visible !important;
}

.temple-action .action-symbol {
    flex-shrink: 0 !important;
}


/* =========================================================
   كل أيقونة لها نفس الحجم البصري
========================================================= */

.temple-action.action-ai .action-symbol,
.temple-action.action-collections .action-symbol,
.temple-action.action-research .action-symbol {
    transform: scale(0.82) !important;
    transform-origin: center !important;
}
/* ===== FORCE ICON SIZE ===== */

.temple-actions .temple-action .action-symbol.pharaoh-icon {
    zoom: 0.75 !important;
}

/* تثبيت مكان الأيقونة وعدم تأثير التصغير على المسافات */
.temple-actions .temple-action {
    overflow: visible !important;
}

/* منع الـ hover من تغيير الحجم */
.temple-actions .temple-action:hover .action-symbol.pharaoh-icon {
    zoom: 0.75 !important;
}
/* =========================================
   RESTORE ORIGINAL PHARAONIC ICONS
   إلغاء تعديلات التصغير السابقة
========================================= */

.temple-actions .action-symbol.pharaoh-icon {
    zoom: 1 !important;
}

/* إلغاء أي إجبار للحجم */
.temple-actions .pharaoh-icon {
    width: initial !important;
    height: initial !important;
    min-width: initial !important;
    min-height: initial !important;
}

/* إلغاء التصغير */
.temple-actions .action-symbol.pharaoh-icon,
.temple-actions .ai-relic,
.temple-actions .collection-relic,
.temple-actions .research-relic {
    transform: none !important;
}
/* =========================================================
   NEW PHARAONIC QUICK ACTIONS
   Small / Elegant / Gold / Temple Entrance
========================================================= */

.temple-actions-v2 {
    position: absolute !important;

    /* المكان العام فوق الشعلة */
    right: 4.8% !important;
    top: 27% !important;

    width: 105px !important;

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

    gap: 24px !important;

    z-index: 80 !important;

    overflow: visible !important;
}


/* =========================================================
   BUTTON RESET
========================================================= */

.temple-actions-v2 .temple-action {
    position: relative !important;

    width: 82px !important;
    height: 82px !important;

    padding: 0 !important;
    margin: 0 !important;

    border: 0 !important;
    outline: none !important;

    background: transparent !important;

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

    cursor: pointer !important;

    overflow: visible !important;

    flex-shrink: 0 !important;
}


/* =========================================================
   ICON BASE
========================================================= */

.temple-actions-v2 .action-symbol-v2 {
    position: relative !important;

    width: 66px !important;
    height: 66px !important;

    border-radius: 50% !important;

    display: block !important;

    box-sizing: border-box !important;

    background:
        radial-gradient(
            circle at center,
            rgba(222,177,48,.16),
            rgba(11,22,42,.12) 55%,
            transparent 72%
        ) !important;

    border: 1px solid rgba(212,175,55,.85) !important;

    box-shadow:
        0 0 0 4px rgba(212,175,55,.06),
        0 0 0 7px rgba(212,175,55,.28),
        0 0 18px rgba(212,175,55,.18) !important;

    transition:
        transform .35s ease,
        box-shadow .35s ease,
        background .35s ease !important;
}


/* Inner Egyptian ring */

.temple-actions-v2 .action-symbol-v2::before {
    content: "" !important;

    position: absolute !important;

    inset: 7px !important;

    border-radius: 50% !important;

    border: 1px solid rgba(212,175,55,.62) !important;

    box-shadow:
        inset 0 0 12px rgba(212,175,55,.08) !important;
}


/* Outer dotted ring */

.temple-actions-v2 .action-symbol-v2::after {
    content: "𓂀" !important;

    position: absolute !important;

    bottom: -9px !important;

    left: 50% !important;

    transform: translateX(-50%) !important;

    font-size: 10px !important;

    color: #d4af37 !important;

    opacity: .9 !important;
}


/* =========================================================
   AI TOOLS
========================================================= */

.ai-eye {
    position: absolute !important;

    width: 30px !important;
    height: 18px !important;

    left: 50% !important;
    top: 50% !important;

    transform: translate(-50%, -50%) rotate(-2deg) !important;

    border: 2px solid #e4c65b !important;

    border-radius: 70% 15% 70% 15% !important;

    box-shadow:
        0 0 8px rgba(228,198,91,.25) !important;
}


.ai-eye-pupil {
    position: absolute !important;

    width: 7px !important;
    height: 7px !important;

    left: 50% !important;
    top: 50% !important;

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

    border-radius: 50% !important;

    background: #e9c95a !important;

    box-shadow:
        0 0 7px rgba(233,201,90,.65) !important;
}


.icon-ankh {
    position: absolute !important;

    left: 50% !important;
    bottom: 13px !important;

    transform: translateX(-50%) !important;

    color: #c99e2e !important;

    font-size: 11px !important;

    opacity: .85 !important;
}


.ai-spark {
    position: absolute !important;

    width: 4px !important;
    height: 4px !important;

    border-radius: 50% !important;

    background: #e8c75a !important;

    box-shadow: 0 0 6px #d4af37 !important;
}


.spark-a {
    top: 15px !important;
    right: 15px !important;
}


.spark-b {
    bottom: 16px !important;
    left: 14px !important;
}


/* =========================================================
   COLLECTIONS — ROYAL PAPYRUS
========================================================= */

.collection-symbol {
    background:
        radial-gradient(
            circle at center,
            rgba(180,135,30,.16),
            transparent 68%
        ) !important;
}


.scroll-paper {
    position: absolute !important;

    width: 34px !important;
    height: 25px !important;

    left: 50% !important;
    top: 50% !important;

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

    border: 1.5px solid #d8b84c !important;

    background:
        linear-gradient(
            to bottom,
            rgba(218,186,87,.12),
            rgba(218,186,87,.03)
        ) !important;

    box-shadow:
        inset 0 0 7px rgba(212,175,55,.12) !important;
}


.scroll-top,
.scroll-bottom {
    position: absolute !important;

    width: 9px !important;
    height: 29px !important;

    border: 1.5px solid #d4af37 !important;

    border-radius: 50% !important;

    top: -3px !important;
}


.scroll-top {
    left: -5px !important;
}


.scroll-bottom {
    right: -5px !important;
}


.scroll-line {
    position: absolute !important;

    left: 6px !important;
    right: 6px !important;

    height: 1px !important;

    background: rgba(212,175,55,.55) !important;
}


.line-1 {
    top: 7px !important;
}


.line-2 {
    top: 12px !important;
}


.line-3 {
    top: 17px !important;
}


.collection-gem {
    position: absolute !important;

    width: 5px !important;
    height: 5px !important;

    right: 10px !important;
    bottom: 10px !important;

    transform: rotate(45deg) !important;

    background: #d4af37 !important;

    box-shadow: 0 0 6px rgba(212,175,55,.6) !important;
}


/* =========================================================
   RESEARCH GUIDES — LAMP + MAGNIFIER
========================================================= */

.research-lamp {
    position: absolute !important;

    width: 22px !important;
    height: 29px !important;

    left: 27px !important;
    top: 20px !important;
}


.lamp-top {
    position: absolute !important;

    width: 26px !important;
    height: 6px !important;

    left: -2px !important;
    top: 0 !important;

    border: 1.5px solid #e2c258 !important;

    border-radius: 50% !important;
}


.lamp-body {
    position: absolute !important;

    width: 19px !important;
    height: 22px !important;

    left: 2px !important;
    top: 4px !important;

    border: 1.5px solid #d4af37 !important;

    border-top: none !important;

    background:
        linear-gradient(
            to bottom,
            rgba(212,175,55,.18),
            rgba(212,175,55,.04)
        ) !important;
}


.lamp-flame {
    position: absolute !important;

    width: 7px !important;
    height: 12px !important;

    left: 8px !important;
    top: 8px !important;

    background: #ffd75a !important;

    border-radius: 70% 30% 60% 40% !important;

    transform: rotate(45deg) !important;

    box-shadow:
        0 0 9px rgba(255,197,54,.75) !important;
}


.research-glass {
    position: absolute !important;

    width: 17px !important;
    height: 17px !important;

    right: 12px !important;
    bottom: 13px !important;

    border: 2px solid #e0bd4d !important;

    border-radius: 50% !important;

    background: rgba(212,175,55,.04) !important;
}


.research-glass span {
    position: absolute !important;

    width: 12px !important;
    height: 2px !important;

    right: -9px !important;
    bottom: -5px !important;

    transform: rotate(48deg) !important;

    background: #d4af37 !important;

    border-radius: 2px !important;
}


.research-glow {
    position: absolute !important;

    width: 30px !important;
    height: 30px !important;

    left: 18px !important;
    top: 17px !important;

    border-radius: 50% !important;

    background: rgba(255,193,49,.08) !important;

    filter: blur(7px) !important;

    pointer-events: none !important;
}


/* =========================================================
   LABEL UNDER ICON
========================================================= */

.temple-actions-v2 .action-label-v2 {
    position: absolute !important;

    top: 88px !important;
    left: 50% !important;

    transform: translateX(-50%) !important;

    white-space: nowrap !important;

    font-family: Georgia, serif !important;

    font-size: 8px !important;

    font-weight: 700 !important;

    letter-spacing: 1.4px !important;

    color: #d8b64b !important;

    text-shadow:
        0 0 7px rgba(212,175,55,.35) !important;

    transition:
        opacity .25s ease,
        transform .25s ease !important;
}


/* =========================================================
   SIDE LABEL ON HOVER
========================================================= */

.temple-actions-v2 .action-side-label {
    position: absolute !important;

    right: 88px !important;
    top: 50% !important;

    transform:
        translateY(-50%)
        translateX(12px) !important;

    opacity: 0 !important;

    pointer-events: none !important;

    white-space: nowrap !important;

    padding: 7px 13px !important;

    border: 1px solid rgba(212,175,55,.75) !important;

    background:
        linear-gradient(
            90deg,
            rgba(35,25,8,.96),
            rgba(16,25,42,.96)
        ) !important;

    color: #e4c65b !important;

    font-family: Georgia, serif !important;

    font-size: 8px !important;

    font-weight: 700 !important;

    letter-spacing: 1.2px !important;

    box-shadow:
        0 0 12px rgba(212,175,55,.18) !important;

    transition:
        opacity .3s ease,
        transform .3s ease !important;
}


/* little golden connector */

.temple-actions-v2 .action-side-label::after {
    content: "" !important;

    position: absolute !important;

    right: -14px !important;
    top: 50% !important;

    width: 13px !important;
    height: 1px !important;

    background: #d4af37 !important;

    box-shadow: 0 0 5px rgba(212,175,55,.5) !important;
}


/* =========================================================
   HOVER
========================================================= */

.temple-actions-v2 .temple-action:hover
.action-symbol-v2 {
    transform: translateY(-2px) !important;

    background:
        radial-gradient(
            circle at center,
            rgba(222,177,48,.23),
            rgba(11,22,42,.18) 58%,
            transparent 75%
        ) !important;

    box-shadow:
        0 0 0 4px rgba(212,175,55,.08),
        0 0 0 7px rgba(212,175,55,.38),
        0 0 25px rgba(212,175,55,.35) !important;
}


.temple-actions-v2 .temple-action:hover
.action-label-v2 {
    opacity: 0 !important;

    transform:
        translateX(-50%)
        translateY(4px) !important;
}


.temple-actions-v2 .temple-action:hover
.action-side-label {
    opacity: 1 !important;

    transform:
        translateY(-50%)
        translateX(0) !important;
}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 700px) {

    .temple-actions-v2 {
        right: 3% !important;
        top: 27% !important;

        width: 82px !important;

        gap: 18px !important;
    }

    .temple-actions-v2 .temple-action {
        width: 66px !important;
        height: 66px !important;
    }

    .temple-actions-v2 .action-symbol-v2 {
        width: 54px !important;
        height: 54px !important;
    }

    .temple-actions-v2 .action-label-v2 {
        top: 69px !important;
        font-size: 6px !important;
        letter-spacing: 1px !important;
    }

    .temple-actions-v2 .action-side-label {
        right: 72px !important;
        font-size: 6px !important;
        padding: 6px 9px !important;
    }

    .research-lamp {
        transform: scale(.82) !important;
        transform-origin: center !important;
    }
}
 /* =====================================================
    REMOVE ONLY THE OLD LARGE ICONS
    DO NOT HIDE .temple-actions
 ===================================================== */

/* الأيقونات القديمة */
.temple-actions .pharaoh-icon {
    display: none !important;
}

/* أي عناصر قديمة مرتبطة بالأيقونات */
.temple-actions .ai-relic,
.temple-actions .collection-relic,
.temple-actions .research-relic {
    display: none !important;
}

/* تأكيد إظهار التصميم الجديد */
.temple-actions-v2,
.temple-actions-v2 .temple-action,
.temple-actions-v2 .action-symbol-v2 {
    display: flex !important;
    visibility: visible !important;
    opacity: 1 !important;
}

/* الأيقونة نفسها تكون block وليس flex */
.temple-actions-v2 .action-symbol-v2 {
    display: block !important;
}
/* =========================================================
   FINAL POSITION — TEMPLE ACTIONS
   Move the 3 icons above the right torch
========================================================= */

.entrance-hero .temple-actions {
    position: absolute !important;

    /* الحركة الأفقية */
    right: 3.5vw !important;
    left: auto !important;

    /* الحركة الرأسية */
    top: 28% !important;
    bottom: auto !important;

    /* مهم: إلغاء أي transform قديم */
    transform: none !important;

    /* ترتيب الأيقونات */
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;

    /* المسافة بينهم */
    gap: 28px !important;

    z-index: 50 !important;
}
/* =========================================
   MOVE EACH TEMPLE ACTION INDIVIDUALLY
========================================= */

/* AI TOOLS */
.temple-actions .action-ai {
    position: relative !important;
    left: 50px;
    top: 0px;
}

/* MY COLLECTIONS */
.temple-actions .action-collections {
    position: relative !important;
    left: 0px;
    top: 0px;
}

/* RESEARCH GUIDES */
.temple-actions .action-research {
    position: relative !important;
    left: 0px;
    top: 0px;
}
/* =====================================================
   INDIVIDUAL POSITION — EACH BUTTON
   ===================================================== */

/* AI TOOLS */
.temple-actions .action-ai {
    transform: translate(40px, -40px) !important;
}

/* MY COLLECTIONS */
.temple-actions .action-collections {
    transform: translate(40px, -40px) !important;
}

/* RESEARCH GUIDES */
.temple-actions .action-research {
    transform: translate(40px, -40px) !important;
}
/* =========================================================
   FORCE INDIVIDUAL POSITION OF THE 3 BUTTONS
========================================================= */

/* AI TOOLS */
.temple-actions > .action-ai {
    position: relative !important;
    transform: translate3d(80px, -80px, 0) !important;
}

/* MY COLLECTIONS */
.temple-actions > .action-collections {
    position: relative !important;
    transform: translate3d(80px, -80px, 0) !important;
}

/* RESEARCH GUIDES */
.temple-actions > .action-research {
    position: relative !important;
    transform: translate3d(80px, -80px, 0) !important;
}
 /* =========================================
    FINAL — THREE ICONS SAME VERTICAL AXIS
    ========================================= */

.temple-actions {
    position: absolute !important;

    top: 28% !important;
    right: 3.5vw !important;

    left: auto !important;

    width: 90px !important;

    display: flex !important;
    flex-direction: column !important;

    align-items: center !important;

    /* المسافة بين الأيقونات */
    gap: 28px !important;

    margin: 0 !important;
    padding: 0 !important;

    transform: none !important;

    z-index: 9999 !important;
}


/* =========================================
   كل الأيقونات نفس المقاس ونفس المحور
   ========================================= */

.temple-actions > .temple-action {
    position: relative !important;

    width: 70px !important;
    height: 70px !important;

    min-width: 70px !important;
    min-height: 70px !important;

    margin: 0 !important;
    padding: 0 !important;

    left: auto !important;
    right: auto !important;
    top: auto !important;
    bottom: auto !important;

    transform: none !important;

    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}


/* =========================================
   الأيقونة نفسها
   ========================================= */

.temple-actions > .temple-action .action-symbol {
    width: 70px !important;
    height: 70px !important;

    transform: scale(.82) !important;

    transform-origin: center center !important;
}


/* =========================================
   منع أي تحريك فردي قديم
   ========================================= */

.temple-actions > .action-ai,
.temple-actions > .action-collections,
.temple-actions > .action-research {
    position: relative !important;

    left: auto !important;
    right: auto !important;
    top: auto !important;
    bottom: auto !important;

    transform: none !important;
}


/* =========================================
   HOVER
   ========================================= */

.temple-actions > .temple-action:hover .action-symbol {
    transform: scale(.88) !important;
}


/* =========================================
   LABEL
   ========================================= */

.temple-actions > .temple-action .action-label {
    position: absolute !important;

    top: 72px !important;
    left: 50% !important;

    transform: translateX(-50%) !important;

    margin: 0 !important;

    white-space: nowrap !important;

    text-align: center !important;
}


/* =========================================
   MOBILE
   ========================================= */

@media (max-width: 700px) {

    .temple-actions {
        right: 3% !important;
        top: 27% !important;

        width: 70px !important;

        gap: 20px !important;
    }

    .temple-actions > .temple-action {
        width: 58px !important;
        height: 58px !important;

        min-width: 58px !important;
        min-height: 58px !important;
    }

    .temple-actions > .temple-action .action-symbol {
        width: 58px !important;
        height: 58px !important;

        transform: scale(.82) !important;
    }
}
 /* =====================================================
    FINAL — INDIVIDUAL CONTROL FOR EACH ICON
    X = يمين / شمال
    Y = فوق / تحت
===================================================== */

.temple-actions > .temple-action {
    position: relative !important;

    /* منع أي تحريك قديم */
    left: auto !important;
    right: auto !important;
    top: auto !important;
    bottom: auto !important;

    transform: none !important;
}


/* =====================================================
   AI TOOLS
===================================================== */

.temple-actions > .action-ai {
    transform: translate(
        50px,   /* X — موجب = يمين / سالب = شمال */
        -100px    /* Y — موجب = تحت / سالب = فوق */
    ) !important;
}


/* =====================================================
   MY COLLECTIONS
===================================================== */

.temple-actions > .action-collections {
    transform: translate(
        0px,   /* X */
        0px    /* Y */
    ) !important;
}


/* =====================================================
   RESEARCH GUIDES
===================================================== */

.temple-actions > .action-research {
    transform: translate(
        0px,   /* X */
        0px    /* Y */
    ) !important;
}


/* =====================================================
   HOVER — لا يغير مكان الأيقونة
===================================================== */

.temple-actions > .action-ai:hover,
.temple-actions > .action-collections:hover,
.temple-actions > .action-research:hover {
    transform: inherit !important;
}
```css
/* =========================================================
   🔥 FINAL — INDIVIDUAL ICON MOVEMENT
   ضع هذا الكود في آخر ملف CSS حرفيًا
========================================================= */

/* الحاوية نفسها ثابتة */
.entrance .temple-actions {
    position: absolute !important;

    transform: none !important;

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

    gap: 28px !important;

    z-index: 99999 !important;
}


/* =========================================================
   RESET — كل زر مستقل
========================================================= */

.entrance .temple-actions > .temple-action {
    position: relative !important;

    left: 0 !important;
    right: auto !important;
    top: 0 !important;
    bottom: auto !important;

    margin: 0 !important;

    /* مهم جدًا */
    transform: translate3d(0, 0, 0) !important;
}


/* =========================================================
   🤖 AI TOOLS
========================================================= */

.entrance .temple-actions > .action-ai {
    transform: translate3d(
        65px,      /* ← X: يمين / شمال */
        -180px,      /* ← Y: فوق / تحت */
        0
    ) !important;
}


/* =========================================================
   📜 MY COLLECTIONS
========================================================= */

.entrance .temple-actions > .action-collections {
    transform: translate3d(
        95px,      /* ← X */
        -130px,      /* ← Y */
        0
    ) !important;
}


/* =========================================================
   🔎 RESEARCH GUIDES
========================================================= */

.entrance .temple-actions > .action-research {
    transform: translate3d(
        95px,      /* ← X */
        -110px,      /* ← Y */
        0
    ) !important;
}


/* =========================================================
   🚫 HOVER — لا يغيّر مكان الزر
========================================================= */

.entrance .temple-actions > .action-ai:hover {
    transform: translate3d(0px, 0px, 0) !important;
}

.entrance .temple-actions > .action-collections:hover {
    transform: translate3d(0px, 0px, 0) !important;
}

.entrance .temple-actions > .action-research:hover {
    transform: translate3d(0px, 0px, 0) !important;
}
```
/* =========================================================
   FINAL FIX — STABLE INDIVIDUAL ICON POSITIONS
   كل زر يتحرك لوحده بدون Jump عند Hover
========================================================= */


/* =========================================================
   الحاوية — ثابتة
========================================================= */

.entrance .temple-actions {
    position: absolute !important;

    transform: none !important;

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

    gap: 28px !important;

    z-index: 99999 !important;

    animation: none !important;
}


/* =========================================================
   كل زر — RESET كامل
========================================================= */

.entrance .temple-actions > .temple-action {
    position: relative !important;

    left: 0 !important;
    right: auto !important;

    top: 0 !important;
    bottom: auto !important;

    margin: 0 !important;

    /*
       مهم:
       نلغي transform تمامًا من الزر
       لأننا سنستخدم translate بدلًا منه
    */
    transform: none !important;

    transition: none !important;

    animation: none !important;

    will-change: auto !important;
}


/* =========================================================
   🤖 AI TOOLS
   X = 65px يمين
   Y = 180px فوق
========================================================= */

.entrance .temple-actions > .action-ai {
    translate: 65px -180px !important;
}


/* =========================================================
   📜 MY COLLECTIONS
   X = 95px يمين
   Y = 130px فوق
========================================================= */

.entrance .temple-actions > .action-collections {
    translate: 95px -130px !important;
}


/* =========================================================
   🔎 RESEARCH GUIDES
   X = 95px يمين
   Y = 110px فوق
========================================================= */

.entrance .temple-actions > .action-research {
    translate: 95px -110px !important;
}


/* =========================================================
   🚫 HOVER
   لا يغير مكان أي زر نهائيًا
========================================================= */

.entrance .temple-actions > .action-ai:hover,
.entrance .temple-actions > .action-collections:hover,
.entrance .temple-actions > .action-research:hover {
    transform: none !important;
    transition: none !important;
    animation: none !important;
}


/* =========================================================
   🔒 تثبيت الـ translate أثناء Hover
========================================================= */

.entrance .temple-actions > .action-ai:hover {
    translate: 65px -180px !important;
}

.entrance .temple-actions > .action-collections:hover {
    translate: 95px -130px !important;
}

.entrance .temple-actions > .action-research:hover {
    translate: 95px -110px !important;
}
/* =========================================================
   FORCE HIDE OLD PHARAONIC ICONS
   يترك التصميم الجديد temple-actions-v2 ظاهرًا
========================================================= */

/* إخفاء التصميم القديم */
.temple-actions > .temple-action .service-relic,
.temple-actions > .temple-action .pharaoh-icon,
.temple-actions > .temple-action .ai-relic,
.temple-actions > .temple-action .collection-relic,
.temple-actions > .temple-action .research-relic {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    pointer-events: none !important;
}

/* إخفاء كل العناصر التابعة للتصميم القديم */
.temple-actions .relic-orbit,
.temple-actions .relic-star,
.temple-actions .solar-disc,
.temple-actions .ai-symbol,
.temple-actions .ai-brain-outline,
.temple-actions .ai-circuit,
.temple-actions .ai-node,
.temple-actions .collection-halo,
.temple-actions .scroll-book,
.temple-actions .collection-bookmark,
.temple-actions .collection-eye,
.temple-actions .collection-ankh,
.temple-actions .research-scroll,
.temple-actions .research-magnifier,
.temple-actions .research-eye,
.temple-actions .magnifier-glass,
.temple-actions .magnifier-handle {
    display: none !important;
    visibility: hidden !important;
}

/* =========================================================
   DON'T HIDE THE NEW VERSION
========================================================= */

.temple-actions-v2,
.temple-actions-v2 .temple-action,
.temple-actions-v2 .action-symbol-v2,
.temple-actions-v2 .action-label-v2,
.temple-actions-v2 .action-side-label {
    display: flex !important;
    visibility: visible !important;
    opacity: 1 !important;
}

/* الأيقونة الجديدة نفسها */
.temple-actions-v2 .action-symbol-v2 {
    display: block !important;
}
/* =========================================================
   FINAL CLEANUP — REMOVE OLD HOVER SYSTEM
   ========================================================= */

/* 1. إخفاء الـ SIDE LABELS الجديدة افتراضيًا */
.temple-actions-v2 .action-side-label {
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;

    transform:
        translateY(-50%)
        translateX(12px) !important;
}


/* 2. إظهار الـ SIDE LABEL فقط عند Hover */
.temple-actions-v2 .temple-action:hover .action-side-label {
    opacity: 1 !important;
    visibility: visible !important;

    transform:
        translateY(-50%)
        translateX(0) !important;
}


/* =========================================================
   REMOVE OLD HOVER BAR COMPLETELY
   ========================================================= */

/* ده الشريط القديم اللي بيظهر عند Hover */
.temple-actions .temple-action::before {
    display: none !important;
    content: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
}


/* إزالة أي pseudo-element قديم ثاني */
.temple-actions .temple-action::after {
    display: none !important;
}


/* =========================================================
   REMOVE OLD LABELS
   ========================================================= */

/* الاسم القديم تحت الأيقونة */
.temple-actions:not(.temple-actions-v2) .action-label {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
}


/* أي Hover قديم */
.temple-actions:not(.temple-actions-v2) .temple-action:hover .action-label {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
}


/* =========================================================
   KEEP NEW V2 LABEL UNDER ICON
   ========================================================= */

.temple-actions-v2 .action-label-v2 {
    opacity: 1 !important;
    visibility: visible !important;
}


/* وعند Hover يختفي الاسم السفلي */
.temple-actions-v2 .temple-action:hover .action-label-v2 {
    opacity: 0 !important;
    visibility: hidden !important;
}


/* =========================================================
   REMOVE OLD PHARAONIC RELICS
   ========================================================= */

.temple-actions:not(.temple-actions-v2) .service-relic,
.temple-actions:not(.temple-actions-v2) .pharaoh-icon,
.temple-actions:not(.temple-actions-v2) .ai-relic,
.temple-actions:not(.temple-actions-v2) .collection-relic,
.temple-actions:not(.temple-actions-v2) .research-relic {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
}
/* =========================================================
   AI TOOLS — FINAL POSITION & HOVER FIX
   ========================================================= */

/* تثبيت زر AI نفسه */
.temple-actions-v2 > .action-ai {
    position: relative !important;

    left: auto !important;
    right: auto !important;
    top: auto !important;
    bottom: auto !important;

    transform: none !important;
    translate: none !important;

    margin: 0 !important;

    overflow: visible !important;
}


/* تثبيت أيقونة AI */
.temple-actions-v2 > .action-ai .action-symbol-v2 {
    position: relative !important;

    width: 66px !important;
    height: 66px !important;

    left: auto !important;
    right: auto !important;
    top: auto !important;
    bottom: auto !important;

    transform: none !important;
    translate: none !important;

    margin: 0 auto !important;

    overflow: visible !important;
}


/* =========================================================
   AI EYE — ضبطه في منتصف الأيقونة
========================================================= */

.temple-actions-v2 > .action-ai .ai-eye {
    width: 30px !important;
    height: 18px !important;

    left: 50% !important;
    top: 50% !important;

    transform:
        translate(-50%, -50%)
        rotate(-2deg) !important;
}


/* البؤبؤ */
.temple-actions-v2 > .action-ai .ai-eye-pupil {
    left: 50% !important;
    top: 50% !important;

    transform: translate(-50%, -50%) !important;
}


/* =========================================================
   AI ANKH
========================================================= */

.temple-actions-v2 > .action-ai .icon-ankh {
    left: 50% !important;
    bottom: 8px !important;

    transform: translateX(-50%) !important;
}


/* =========================================================
   AI SPARKS
========================================================= */

.temple-actions-v2 > .action-ai .spark-a {
    top: 13px !important;
    right: 13px !important;
}

.temple-actions-v2 > .action-ai .spark-b {
    bottom: 13px !important;
    left: 13px !important;
}


/* =========================================================
   AI LABEL UNDER ICON
========================================================= */

.temple-actions-v2 > .action-ai .action-label-v2 {
    position: absolute !important;

    top: 88px !important;
    left: 50% !important;

    transform: translateX(-50%) !important;

    margin: 0 !important;

    white-space: nowrap !important;

    opacity: 1 !important;
    visibility: visible !important;
}


/* =========================================================
   AI SIDE LABEL
   يكون ملاصق للأيقونة من الناحية اليسرى
========================================================= */

.temple-actions-v2 > .action-ai .action-side-label {
    position: absolute !important;

    right: calc(100% + 10px) !important;
    left: auto !important;

    top: 50% !important;

    transform:
        translateY(-50%)
        translateX(12px) !important;

    opacity: 0 !important;
    visibility: hidden !important;

    pointer-events: none !important;

    white-space: nowrap !important;

    z-index: 1000 !important;
}


/* =========================================================
   AI HOVER
========================================================= */

.temple-actions-v2 > .action-ai:hover {
    transform: none !important;
    translate: none !important;
}


/* الأيقونة لا تتحرك عند Hover */
.temple-actions-v2 > .action-ai:hover .action-symbol-v2 {
    transform: none !important;
    translate: none !important;
}


/* الاسم تحت الأيقونة يختفي */
.temple-actions-v2 > .action-ai:hover .action-label-v2 {
    opacity: 0 !important;
    visibility: hidden !important;

    transform:
        translateX(-50%)
        translateY(4px) !important;
}


/* الـSide Label يظهر ملاصقًا للأيقونة */
.temple-actions-v2 > .action-ai:hover .action-side-label {
    opacity: 1 !important;
    visibility: visible !important;

    transform:
        translateY(-50%)
        translateX(0) !important;
}


/* =========================================================
   CONNECTOR
========================================================= */

.temple-actions-v2 > .action-ai .action-side-label::after {
    right: -14px !important;
    top: 50% !important;

    width: 13px !important;
    height: 1px !important;

    transform: none !important;
}
/* =========================================================
   🔥 FINAL RESET — QUICK ACTIONS POSITION
   ضع هذا الكود في آخر ملف CSS حرفيًا
========================================================= */

/* الحاوية الرئيسية */
.entrance .temple-actions-v2 {
    position: absolute !important;

    top: 100px !important;
    right: 100px !important;
    left: auto !important;

    width: 90px !important;
    height: auto !important;

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

    gap: 28px !important;

    margin: 0 !important;
    padding: 0 !important;

    transform: none !important;
    translate: none !important;

    z-index: 9999 !important;
}


/* =========================================================
   🔒 RESET لكل زر
========================================================= */

.entrance .temple-actions-v2 > .temple-action {
    position: relative !important;

    width: 82px !important;
    height: 82px !important;

    min-width: 82px !important;
    min-height: 82px !important;

    margin: 0 !important;
    padding: 0 !important;

    top: auto !important;
    right: auto !important;
    bottom: auto !important;
    left: auto !important;

    transform: none !important;
    translate: none !important;

    rotate: none !important;

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

    flex-shrink: 0 !important;

    background: transparent !important;
    border: none !important;

    overflow: visible !important;
}


/* =========================================================
   🚫 إلغاء أي تحريك قديم للأزرار الثلاثة
========================================================= */

.entrance .temple-actions-v2 > .action-ai,
.entrance .temple-actions-v2 > .action-collections,
.entrance .temple-actions-v2 > .action-research {

    position: relative !important;

    top: auto !important;
    right: auto !important;
    bottom: auto !important;
    left: auto !important;

    transform: none !important;
    translate: none !important;
    rotate: none !important;

    margin: 0 !important;
}


/* =========================================================
   ICON
========================================================= */

.entrance .temple-actions-v2 .action-symbol-v2 {
    position: relative !important;

    width: 66px !important;
    height: 66px !important;

    transform: none !important;
    translate: none !important;

    margin: 0 !important;
}


/* =========================================================
   LABEL تحت الأيقونة
========================================================= */

.entrance .temple-actions-v2 .action-label-v2 {
    position: absolute !important;

    top: 88px !important;
    left: 50% !important;

    transform: translateX(-50%) !important;
    translate: none !important;

    white-space: nowrap !important;

    margin: 0 !important;
}


/* =========================================================
   SIDE LABEL
========================================================= */

.entrance .temple-actions-v2 .action-side-label {
    position: absolute !important;

    right: 88px !important;
    top: 50% !important;

    transform:
        translateY(-50%)
        translateX(12px) !important;

    translate: none !important;
}


/* =========================================================
   HOVER — ممنوع تحريك الزر نفسه
========================================================= */

.entrance .temple-actions-v2 > .temple-action:hover {
    transform: none !important;
    translate: none !important;
    top: auto !important;
    left: auto !important;
}


/* الـ hover يكبر الأيقونة فقط */
.entrance .temple-actions-v2 > .temple-action:hover
.action-symbol-v2 {
    transform: translateY(-2px) !important;
}


/* =========================================================
   📱 MOBILE
========================================================= */

@media (max-width: 700px) {

    .entrance .temple-actions-v2 {
        top: 130px !important;
        right: 25px !important;

        width: 70px !important;

        gap: 20px !important;
    }

    .entrance .temple-actions-v2 > .temple-action {
        width: 66px !important;
        height: 66px !important;

        min-width: 66px !important;
        min-height: 66px !important;
    }

    .entrance .temple-actions-v2 .action-symbol-v2 {
        width: 54px !important;
        height: 54px !important;
    }
}
/* =========================================================
   🔥 REAL HOVER EFFECT — FINAL OVERRIDE
   ========================================================= */

/* الزر */
.entrance .temple-actions-v2 > .temple-action {
    position: relative !important;
    overflow: visible !important;
}


/* =========================================================
   الأيقونة
   ========================================================= */

.entrance .temple-actions-v2
> .temple-action
> .action-symbol-v2 {

    position: relative !important;

    transform: translate3d(0,0,0) scale(1) !important;

    transition:
        transform .45s cubic-bezier(.2,.8,.2,1),
        box-shadow .45s ease,
        filter .45s ease !important;
}


/* =========================================================
   عند دخول الماوس
   ========================================================= */

.entrance .temple-actions-v2
> .temple-action:hover
> .action-symbol-v2 {

    transform:
        translate3d(0,-5px,0)
        scale(1.08) !important;

    filter:
        drop-shadow(0 0 9px rgba(212,175,55,.55)) !important;

    box-shadow:
        0 0 0 4px rgba(212,175,55,.12),
        0 0 0 8px rgba(212,175,55,.35),
        0 0 25px rgba(212,175,55,.45) !important;
}


/* =========================================================
   الشريط
   ========================================================= */

.entrance .temple-actions-v2
> .temple-action
> .action-side-label {

    position: absolute !important;

    right: 88px !important;
    top: 50% !important;

    /* الحالة المخفية */
    opacity: 0 !important;

    transform:
        translateY(-50%)
        translateX(30px) !important;

    transform-origin: right center !important;

    pointer-events: none !important;

    transition:
        opacity .35s ease,
        transform .45s cubic-bezier(.2,.8,.2,1) !important;
}


/* =========================================================
   الشريط يظهر
   ========================================================= */

.entrance .temple-actions-v2
> .temple-action:hover
> .action-side-label {

    opacity: 1 !important;

    transform:
        translateY(-50%)
        translateX(0) !important;
}


/* =========================================================
   الخط الذهبي الواصل
   ========================================================= */

.entrance .temple-actions-v2
> .temple-action
> .action-side-label::after {

    content: "" !important;

    position: absolute !important;

    right: -14px !important;
    top: 50% !important;

    width: 13px !important;
    height: 1px !important;

    background: #d4af37 !important;

    transform:
        translateY(-50%)
        scaleX(0) !important;

    transform-origin: left center !important;

    transition:
        transform .3s ease .15s !important;
}


/* الخط يظهر بعد بداية الشريط */
.entrance .temple-actions-v2
> .temple-action:hover
> .action-side-label::after {

    transform:
        translateY(-50%)
        scaleX(1) !important;
}


/* =========================================================
   الاسم الموجود تحت الأيقونة
   ========================================================= */

.entrance .temple-actions-v2
> .temple-action
> .action-label-v2 {

    transition:
        opacity .3s ease,
        transform .35s ease !important;
}


/* يختفي عند Hover */
.entrance .temple-actions-v2
> .temple-action:hover
> .action-label-v2 {

    opacity: 0 !important;

    transform:
        translateX(-50%)
        translateY(5px) !important;
}
/* =========================================================
   PHARAONIC SITE NAVIGATION
========================================================= */

.pharaoh-menu {
    position: fixed !important;

    top: 50% !important;
    right: 22px !important;

    transform: translateY(-50%) !important;

    z-index: 999999 !important;

    font-family: "Cinzel", Georgia, serif;
}


/* =========================================================
   MAIN BUTTON
========================================================= */

.pharaoh-menu-toggle {
    position: relative;

    width: 58px;
    height: 58px;

    border-radius: 50%;

    border: 1px solid rgba(212,175,55,.9);

    background:
        radial-gradient(
            circle,
            rgba(212,175,55,.22),
            rgba(8,18,34,.96)
        );

    color: #e5c65b;

    cursor: pointer;

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

    box-shadow:
        0 0 0 4px rgba(212,175,55,.05),
        0 0 18px rgba(212,175,55,.22);

    transition:
        transform .3s ease,
        box-shadow .3s ease,
        background .3s ease;
}


.pharaoh-menu-toggle span {
    font-size: 25px;

    text-shadow:
        0 0 8px rgba(212,175,55,.55);
}


.pharaoh-menu-toggle:hover {
    transform: scale(1.08);

    box-shadow:
        0 0 0 5px rgba(212,175,55,.08),
        0 0 28px rgba(212,175,55,.42);
}


/* =========================================================
   MENU PANEL
========================================================= */

.pharaoh-menu-panel {

    position: absolute;

    right: 72px;
    top: 50%;

    width: 235px;

    transform:
        translateY(-50%)
        translateX(18px)
        scale(.96);

    transform-origin: right center;

    padding: 16px 12px;

    background:
        linear-gradient(
            145deg,
            rgba(31,24,13,.98),
            rgba(8,18,34,.98)
        );

    border: 1px solid rgba(212,175,55,.7);

    box-shadow:
        0 0 0 3px rgba(212,175,55,.05),
        0 0 30px rgba(212,175,55,.16),
        inset 0 0 20px rgba(212,175,55,.04);

    opacity: 0;

    visibility: hidden;

    pointer-events: none;

    transition:
        opacity .28s ease,
        transform .28s ease,
        visibility .28s ease;
}


/* =========================================================
   OPEN STATE
========================================================= */

.pharaoh-menu.is-open .pharaoh-menu-panel {

    opacity: 1;

    visibility: visible;

    pointer-events: auto;

    transform:
        translateY(-50%)
        translateX(0)
        scale(1);
}


/* =========================================================
   TITLE
========================================================= */

.pharaoh-menu-title {

    text-align: center;

    color: #e4c65b;

    font-size: 10px;

    letter-spacing: 1.8px;

    padding: 4px 0 12px;

    border-bottom:
        1px solid rgba(212,175,55,.28);

    margin-bottom: 8px;

    text-shadow:
        0 0 8px rgba(212,175,55,.3);
}


.pharaoh-menu-title span {

    margin: 0 6px;

    font-size: 13px;
}


/* =========================================================
   MENU ITEM
========================================================= */

.pharaoh-menu-item {

    position: relative;

    display: flex;

    align-items: center;

    gap: 12px;

    width: 100%;

    min-height: 39px;

    padding: 7px 10px;

    box-sizing: border-box;

    color: #d8b64b;

    text-decoration: none;

    font-size: 8px;

    font-weight: 700;

    letter-spacing: 1.15px;

    border: 1px solid transparent;

    transition:
        color .22s ease,
        background .22s ease,
        border-color .22s ease,
        padding-left .22s ease,
        box-shadow .22s ease;
}


.pharaoh-menu-item:hover {

    color: #ffe58a;

    padding-left: 15px;

    background:
        linear-gradient(
            90deg,
            rgba(212,175,55,.13),
            transparent
        );

    border-color:
        rgba(212,175,55,.38);

    box-shadow:
        inset 3px 0 0 #d4af37,
        0 0 12px rgba(212,175,55,.08);
}


/* =========================================================
   ICON
========================================================= */

.menu-icon {

    width: 22px;

    text-align: center;

    flex-shrink: 0;

    color: #e1bf50;

    font-size: 17px;

    text-shadow:
        0 0 7px rgba(212,175,55,.35);

    transition:
        transform .25s ease;
}


.pharaoh-menu-item:hover .menu-icon {

    transform:
        scale(1.12)
        rotate(-4deg);
}


/* =========================================================
   DIVIDER
========================================================= */

.pharaoh-menu-divider {

    height: 1px;

    margin: 8px 8px;

    background:
        linear-gradient(
            90deg,
            transparent,
            rgba(212,175,55,.55),
            transparent
        );
}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 700px) {

    .pharaoh-menu {

        right: 12px;
    }


    .pharaoh-menu-toggle {

        width: 50px;
        height: 50px;
    }


    .pharaoh-menu-panel {

        right: 62px;

        width: 205px;
    }


    .pharaoh-menu-item {

        font-size: 7px;

        min-height: 36px;
    }
}


/* =========================================================
   REDUCED MOTION
========================================================= */

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

    .pharaoh-menu-panel,
    .pharaoh-menu-toggle,
    .pharaoh-menu-item,
    .menu-icon {

        transition: none !important;
    }
}
/* =========================================================
   PERFORMANCE BOOST — SAFE
   لا يغير التصميم أو أماكن العناصر
========================================================= */

/* منع المتصفح من إعادة حساب Layout بدون داعي */
img,
video {
    content-visibility: auto;
}

/* تحسين العناصر التي عليها Hover / Transform */
.temple-action,
.action-symbol-v2,
button,
a {
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
}

/* تحسين الحركة فقط أثناء التفاعل */
.temple-action:hover,
.temple-action:focus-visible {
    will-change: transform;
}

/* منع التحديد والحركات غير الضرورية للأيقونات */
.action-symbol-v2 {
    -webkit-user-select: none;
    user-select: none;
}

/* تحسين رسم العناصر التي تتحرك */
.temple-actions-v2 .action-symbol-v2 {
    transform: translateZ(0);
}

/* تقليل إعادة الرسم أثناء الـ hover */
.temple-actions-v2 .action-side-label,
.temple-actions-v2 .action-label-v2 {
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
}
/* =========================================================
   NOVA BOLT TEAM — EXPANDING COPYRIGHT BUTTON
========================================================= */

.team-copyright {
    position: relative !important;

    width: 46px !important;
    height: 46px !important;

    margin: -60px auto 0 !important;
    padding: 0 !important;

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

    box-sizing: border-box !important;

    overflow: hidden !important;

    background: rgba(24, 19, 12, 0.96) !important;

    border: 1px solid rgba(216, 184, 106, 0.75) !important;
    border-radius: 50% !important;

    color: #e2c477 !important;
    text-decoration: none !important;

    cursor: pointer !important;

    z-index: 9999 !important;

    transition:
        width 0.4s cubic-bezier(.22, 1, .36, 1),
        border-radius 0.4s ease,
        border-color 0.3s ease,
        box-shadow 0.3s ease !important;
}


/* =========================================================
   COPYRIGHT SYMBOL
========================================================= */

.team-copyright .copyright-symbol {
    flex-shrink: 0 !important;

    font-family: Georgia, "Times New Roman", serif !important;

    font-size: 25px !important;
    font-weight: 500 !important;

    line-height: 1 !important;

    color: #e2c477 !important;

    transition:
        transform 0.3s ease,
        margin 0.4s ease !important;
}


/* =========================================================
   TEAM NAME
========================================================= */

.team-copyright .team-name {
    max-width: 0 !important;

    margin-left: 0 !important;

    overflow: hidden !important;

    white-space: nowrap !important;

    opacity: 0 !important;

    color: #e4c77b !important;

    font-family: Georgia, "Times New Roman", serif !important;

    font-size: 12px !important;
    font-weight: 600 !important;

    letter-spacing: 1.5px !important;

    transition:
        max-width 0.4s cubic-bezier(.22, 1, .36, 1),
        margin-left 0.3s ease,
        opacity 0.2s ease !important;
}


/* =========================================================
   HOVER — TRANSFORM INTO BAR
========================================================= */

.team-copyright:hover {
    width: 190px !important;

    border-radius: 23px !important;

    border-color: #f0d58c !important;

    box-shadow:
        0 0 12px rgba(216, 184, 106, 0.25),
        0 0 25px rgba(216, 184, 106, 0.12),
        0 6px 18px rgba(0, 0, 0, 0.45) !important;
}


/* © stays on the left */

.team-copyright:hover .copyright-symbol {
    transform: scale(1.05) !important;

    margin-right: 3px !important;
}


/* Show team name INSIDE the bar */

.team-copyright:hover .team-name {
    max-width: 150px !important;

    margin-left: 8px !important;

    opacity: 1 !important;
}


/* =========================================================
   SUBTLE INNER BORDER
========================================================= */

.team-copyright::before {
    content: "" !important;

    position: absolute !important;

    inset: 4px !important;

    border: 1px solid rgba(216, 184, 106, 0.16) !important;

    border-radius: inherit !important;

    pointer-events: none !important;
}