/* SifirQuest Task #18 — Realm ×4 Crystal Canyon RC1
   Realm ×3 is the UI/layout authority. This sheet only supplies Realm4 identity
   and mechanics-specific internals. No background image file is required yet. */

.crystal-shell{--crystal-a:#b996ff;--crystal-b:#73e6ff;--crystal-gold:#ffe787}
.crystal-placeholder-bg,.crystal-map-bg,.quad-stage-bg{position:absolute;inset:0;z-index:0;background:
  radial-gradient(circle at 78% 26%,rgba(193,145,255,.28),transparent 30%),
  radial-gradient(circle at 28% 62%,rgba(83,221,255,.18),transparent 34%),
  linear-gradient(135deg,#15365a 0%,#244f6c 48%,#302b65 100%)}
.crystal-hero{background:linear-gradient(135deg,#183b5d,#253f68 48%,#382b6c)!important}
.crystal-hero .crystal-placeholder-bg{border-radius:inherit;overflow:hidden}
.crystal-map{background:#173e5d!important}
.crystal-map .crystal-map-bg{background:
  radial-gradient(circle at 82% 20%,rgba(221,185,255,.25),transparent 25%),
  linear-gradient(155deg,#174a68,#23556f 48%,#44326f)!important}
.crystal-shell .tri-node{border-color:rgba(196,160,255,.45);background:linear-gradient(180deg,rgba(22,57,78,.94),rgba(20,30,61,.95))}
.crystal-shell .tri-node.done{border-color:rgba(132,245,218,.72)}
.crystal-shell .tri-route-line.lit{background:linear-gradient(90deg,#77e9ff,#bb9cff,#ffe584)}
.crystal-shell .tri-stage-indicator{border-color:rgba(190,155,255,.34)}
.crystal-shell .tri-question-card{border-color:rgba(181,151,255,.30)}
.quad-progress{gap:7px!important}.quad-progress i{width:19px!important;height:11px!important}

/* ---- Q1 Crystal Rescue: proven Tri-Pearl outer layout, 6 smaller pods. ---- */
.quad-rescue-stage .quad-crystal-zone{grid-template-columns:repeat(3,minmax(0,1fr))!important;top:72px!important;bottom:190px!important;align-content:center!important;gap:10px!important}
.quad-rescue-stage .quad-crystal-pod{min-height:118px!important;border-radius:34px!important;background:radial-gradient(circle at 50% 38%,rgba(224,246,255,.34),rgba(107,142,214,.22) 42%,rgba(31,34,73,.48) 75%)!important;overflow:hidden}
.quad-crystal-target{position:absolute;left:50%;top:48%;width:3px;height:3px;transform:translate(-50%,-50%);opacity:0}
.quad-crystal-cage{position:relative;width:68px;height:78px;display:grid;place-items:center;filter:drop-shadow(0 0 14px rgba(162,121,255,.34))}
.quad-crystal-cage>span{font-size:45px;color:#baf3ff;text-shadow:0 0 18px #8bdaff,0 0 30px #b58cff;transition:.35s}
.quad-crystal-cage>i{position:absolute;left:50%;top:50%;width:4px;height:82px;border-radius:5px;background:linear-gradient(#86efff,#b793ff);box-shadow:0 0 9px #91eaff;transform-origin:center}
.quad-crystal-cage>i:nth-child(1){transform:translate(-50%,-50%) rotate(0deg)}.quad-crystal-cage>i:nth-child(2){transform:translate(-50%,-50%) rotate(60deg)}.quad-crystal-cage>i:nth-child(3){transform:translate(-50%,-50%) rotate(-60deg)}
.quad-crystal-lock{position:absolute;bottom:11px;color:#c184ff;font-size:20px;text-shadow:0 0 12px #b880ff}
.quad-crystal-pod.healing{filter:brightness(1.45);box-shadow:0 0 42px rgba(126,238,255,.6),inset 0 0 28px rgba(255,255,255,.25)!important}
.quad-crystal-pod.freed{background:rgba(25,78,94,.24)!important;border-color:rgba(111,239,210,.35)!important;box-shadow:none!important}
.quad-crystal-pod.freed .quad-crystal-cage>i,.quad-crystal-pod.freed .quad-crystal-lock{opacity:0}.quad-crystal-pod.freed .quad-crystal-cage>span{transform:scale(1.18);color:#9effd8}

/* ---- Q2 Prism Path RC4: same Nombi scale contract as other quests. ---- */
.quad-path-stage{position:relative}
/* Desktop/tablet: like approved Pearl Rescue, the Phaser canvas owns the full
   game stage. This restores the same apparent Nombi body size as the other
   quests instead of squeezing 1200×700 into a short strip. */
.quad-path-playfield{display:contents}
.quad-path-avatar-layer{position:absolute!important;inset:0!important;z-index:8!important;overflow:hidden!important;pointer-events:none!important;border-radius:inherit!important}
.quad-path-avatar-layer canvas{display:block!important;width:100%!important;height:100%!important;max-width:none!important;max-height:none!important;margin:0!important}
/* HOME uses the exact Pearl platform visual/feet registration. Only the Y lane
   is raised above the question card so Nombi can run across the stage cleanly. */
.quad-path-home{left:18px!important;right:auto!important;top:auto!important;bottom:198px!important;width:230px!important;height:150px!important;background:transparent!important;border:0!important;box-shadow:none!important;border-radius:0!important;overflow:visible!important;pointer-events:none!important;z-index:6!important}
.quad-path-home .quad-path-home-platform{left:50%!important;bottom:8px!important;width:172px!important;height:34px!important;transform:translateX(-50%)!important}
/* Four prism answer shrines. No extra translucent container/card around them. */
.quad-path-markers{position:absolute;z-index:6;left:29%;right:3%;top:86px;height:255px;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px;pointer-events:none}
.quad-path-lane{position:relative;min-width:0}
.quad-path-marker{position:absolute;left:5%;right:5%;top:0;height:94px;border-radius:23px;display:flex;flex-direction:column;align-items:center;justify-content:center;color:white;border:1px solid rgba(183,229,255,.46);background:linear-gradient(180deg,rgba(105,139,226,.80),rgba(54,51,124,.94));box-shadow:inset 0 0 22px rgba(212,244,255,.10),0 10px 25px rgba(4,14,38,.24);transition:.24s ease}
.quad-path-marker .quad-path-gem{position:absolute;top:-17px;left:50%;transform:translateX(-50%) rotate(45deg);width:31px;height:31px;border-radius:8px;display:grid;place-items:center;font-style:normal;font-size:0;background:linear-gradient(135deg,#fff5a6,#91efff 45%,#9576f7);border:1px solid rgba(255,255,255,.66);box-shadow:0 0 18px rgba(132,232,255,.58),0 0 28px rgba(174,119,255,.28)}
.quad-path-marker span{font-size:10px;letter-spacing:.15em;color:#a6efff;font-weight:900;margin-bottom:2px}.quad-path-marker b{font:800 28px/1 'Baloo 2',sans-serif}
.quad-path-guide{position:absolute;left:50%;top:98px;bottom:27px;width:2px;transform:translateX(-50%);background:linear-gradient(180deg,rgba(133,226,255,.28),rgba(133,226,255,.06));box-shadow:0 0 8px rgba(105,224,255,.12)}
.quad-path-target{position:absolute;left:50%;bottom:0;width:62px;height:15px;transform:translateX(-50%);border-radius:50%;background:radial-gradient(ellipse at center,rgba(120,239,255,.38),rgba(87,187,239,.13) 52%,transparent 72%);box-shadow:0 0 16px rgba(98,229,255,.22);opacity:1;pointer-events:none}
.quad-path-lane.moving .quad-path-marker{filter:brightness(1.08)}
.quad-path-lane.selected .quad-path-marker{border-color:#fff0a1;box-shadow:0 0 26px rgba(255,231,126,.42),inset 0 0 22px rgba(255,255,255,.10)}
.quad-path-lane.selected .quad-path-target{background:radial-gradient(ellipse at center,rgba(255,241,157,.65),rgba(112,238,255,.22) 50%,transparent 74%);box-shadow:0 0 24px rgba(255,230,123,.34)}
.quad-path-question{z-index:9!important}
.quad-path-question .tri-answer-grid{gap:10px!important}
.quad-path-question .answer-core{border-radius:20px!important;background:linear-gradient(180deg,#324f9e 0%,#223879 58%,#15275d 100%)!important;border:1px solid rgba(255,255,255,.12)!important;box-shadow:0 7px 0 #101a3b,0 10px 20px rgba(2,8,29,.20)!important}
.quad-path-question .answer-core.correct{background:linear-gradient(180deg,#bdfec2,#67e58b)!important;color:#072314!important;box-shadow:0 0 22px rgba(114,227,155,.38),0 7px 0 #246741!important}
.quad-path-question .answer-core.wrong{background:linear-gradient(180deg,#ffc0c9,#e05c73)!important;box-shadow:0 7px 0 #7c2740!important}

/* ---- Q3 Shard Gate: proven Trilight Beacon outer layout / HOME contract. ---- */
.quad-gate-field{position:absolute;z-index:5;right:8%;top:16%;width:42%;height:48%;display:grid;place-items:center}
.quad-gate-ring{position:absolute;width:250px;height:250px;border-radius:50%;border:15px solid rgba(171,152,255,.30);box-shadow:0 0 30px rgba(141,209,255,.22),inset 0 0 35px rgba(163,123,255,.25)}
.quad-gate-ring:before,.quad-gate-ring:after{content:'';position:absolute;inset:18px;border-radius:50%;border:2px solid rgba(142,241,255,.46)}.quad-gate-ring:after{inset:55px;border-color:rgba(255,230,130,.42)}
.quad-gate-core{position:relative;z-index:3;width:118px;height:118px;border-radius:28px;transform:rotate(45deg);display:grid;place-items:center;background:radial-gradient(circle,#d8f9ff,#8bdcff 35%,#8d78e7 72%);box-shadow:0 0 35px rgba(130,221,255,.72);font:900 30px/1 'Baloo 2',sans-serif;color:white;text-shadow:0 2px 8px #334;}
.quad-gate-core::first-line{transform:rotate(-45deg)}
.quad-gate-seals{position:absolute;left:50%;bottom:-28px;transform:translateX(-50%);width:min(420px,92%);display:grid;grid-template-columns:repeat(6,1fr);gap:7px}
.quad-gate-seal{height:12px;border-radius:999px;background:rgba(129,195,213,.22);border:1px solid rgba(160,238,255,.18)}.quad-gate-seal.on{background:linear-gradient(90deg,#71eaff,#b89cff,#ffe486);box-shadow:0 0 13px rgba(168,207,255,.48)}
.quad-gate-field.impact{filter:brightness(1.65);transform:scale(1.02)}

/* ---- Boss: reuse Trivortex responsive dimensions, but four crystal heads. ---- */
.crystagon{gap:7px!important}.crystagon .vortex-head{font-size:44px!important;width:86px!important;height:106px!important;border-radius:28px!important;background:linear-gradient(180deg,rgba(126,219,255,.95),rgba(130,89,219,.90))!important;color:#fff5a3!important;border-color:rgba(235,244,255,.68)!important;box-shadow:0 0 26px rgba(132,206,255,.38)!important}
.crystagon .vortex-core{position:absolute!important;width:92px!important;height:92px!important;left:50%!important;top:48%!important;transform:translate(-50%,-50%)!important;border-radius:28px!important;background:radial-gradient(circle,#fff7b5,#b79aff 50%,#704fc1)!important;color:white!important;font:900 27px/92px 'Baloo 2',sans-serif!important;text-align:center!important;z-index:5!important}
.crystagon .vortex-name{bottom:-3px!important}.crystagon.freed .vortex-head:before{content:'💎'!important;font-size:58px!important}.crystagon.freed .vortex-head{font-size:0!important;background:linear-gradient(180deg,#8ff6ff,#9be6d4)!important}.crystagon.freed .vortex-core{background:radial-gradient(circle,#fff7b5,#84e6ff)!important}

/* Tablet: same Realm3 breakpoint philosophy; only internal sizes clamp. */
@media (max-width:980px) and (min-width:721px){
  .quad-rescue-stage .quad-crystal-zone{left:220px!important;right:12px!important;gap:8px!important}.quad-rescue-stage .quad-crystal-pod{min-height:105px!important}
  .quad-path-home{left:14px!important;bottom:194px!important;width:220px!important}
  .quad-path-markers{left:28%;right:2%;top:88px;height:248px;gap:9px}.quad-path-marker{height:88px}.quad-path-marker b{font-size:25px!important}.quad-gate-ring{width:220px;height:220px}.crystagon .vortex-head{width:72px!important}
}

/* Mobile Android/iPhone: preserve Realm3's flow/card system. */
@media (max-width:720px){
  .quad-progress i{width:16px!important;height:10px!important}
  .quad-rescue-stage .quad-crystal-zone{grid-template-columns:repeat(3,minmax(0,1fr))!important;grid-template-rows:repeat(2,minmax(0,1fr))!important;top:4%!important;bottom:4%!important;gap:5px!important;align-content:stretch!important}
  .quad-rescue-stage .quad-crystal-pod{min-height:0!important;border-radius:20px!important}.quad-crystal-cage{width:45px;height:48px}.quad-crystal-cage>span{font-size:30px}.quad-crystal-cage>i{height:52px;width:3px}.quad-crystal-lock{bottom:5px;font-size:13px}

  .quad-path-stage{display:grid!important;grid-template-columns:minmax(0,1fr)!important;grid-template-rows:auto auto auto!important;align-content:start!important;gap:8px!important;height:auto!important;min-height:0!important;max-height:none!important;padding:10px 8px!important;overflow:hidden!important}
  .quad-path-stage>.quad-stage-bg{position:absolute!important;inset:0!important}
  .quad-path-stage>.tri-stage-indicator{position:relative!important;inset:auto!important;transform:none!important;grid-row:1!important;justify-self:center!important;width:min(292px,80vw)!important;margin:0!important}
  .quad-path-playfield{display:block!important;position:relative!important;inset:auto!important;grid-row:2!important;width:100%!important;height:auto!important;aspect-ratio:12/7!important;overflow:hidden!important;z-index:5!important}
  .quad-path-avatar-layer{position:absolute!important;inset:0!important;width:100%!important;height:100%!important;z-index:8!important}
  .quad-path-home{left:1.5%!important;right:auto!important;top:auto!important;bottom:4%!important;width:35%!important;height:78%!important}
  .quad-path-home .quad-path-home-platform{left:50%!important;bottom:7%!important;width:clamp(100px,27vw,124px)!important;height:23px!important;transform:translateX(-50%)!important}
  .quad-path-markers{left:35%!important;right:1%!important;top:7%!important;height:84%!important;gap:5px!important}.quad-path-marker{left:3%!important;right:3%!important;top:0!important;height:58px!important;border-radius:15px!important}.quad-path-marker span{font-size:8px!important}.quad-path-marker b{font-size:18px!important}.quad-path-marker .quad-path-gem{width:20px!important;height:20px!important;top:-10px!important;border-radius:5px!important}.quad-path-guide{top:61px!important;bottom:20px!important}.quad-path-target{width:34px!important;height:9px!important;bottom:3px!important}
  .quad-path-stage>.quad-path-question{position:relative!important;inset:auto!important;grid-row:3!important;width:100%!important;margin:0!important;padding:9px 10px!important}.quad-path-question h2{font-size:17px!important}.quad-path-question .tri-equation{font-size:25px!important}.quad-path-question .tri-answer-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:8px!important}.quad-path-question .answer-core{min-height:50px!important;font-size:21px!important}

  .quad-gate-field{top:3%!important;right:0!important;width:50%!important;height:68%!important}.quad-gate-ring{width:min(150px,38vw);height:min(150px,38vw);border-width:9px}.quad-gate-core{width:72px;height:72px;border-radius:19px;font-size:20px;line-height:72px}.quad-gate-seals{bottom:-14px;width:96%;gap:4px}.quad-gate-seal{height:8px}
  .crystagon .vortex-head{width:54px!important;height:76px!important;font-size:28px!important}.crystagon .vortex-core{width:62px!important;height:62px!important;border-radius:20px!important;font-size:20px!important;line-height:62px!important}
}
@media (max-width:430px){
  .quad-path-home{left:1%!important;width:35%!important;height:78%!important;bottom:4%!important}.quad-path-home .quad-path-home-platform{width:96px!important;height:22px!important;bottom:7%!important}
  .quad-path-markers{left:35%!important}.quad-path-marker{height:54px!important}.quad-path-marker b{font-size:17px!important}
  .quad-gate-ring{width:135px;height:135px}.quad-gate-core{width:66px;height:66px;line-height:66px}.crystagon .vortex-head{width:47px!important;height:68px!important}
}


/* ============================================================
   Task #18.5 RC5 — Realm4 visual identity + Prismhorn + loading UX
   RC4 Q1/Q2/Q3 mechanics remain unchanged.
   ============================================================ */

/* Locked Realm ×4 image as the card background for Intro + Quest Map. */
.crystal-hero,.crystal-map{isolation:isolate!important;background:#173e5d!important}
.crystal-hero .crystal-placeholder-bg,
.crystal-map .crystal-map-bg{
  background-image:
    linear-gradient(90deg,rgba(4,18,42,.78) 0%,rgba(7,24,51,.60) 35%,rgba(10,31,58,.24) 67%,rgba(7,20,45,.20) 100%),
    url('../images/realm4-crystal-canyon.webp?v=0740')!important;
  background-size:cover!important;
  background-position:center center!important;
  background-repeat:no-repeat!important;
  filter:none!important;
}
.crystal-map .crystal-map-bg{
  background-image:
    linear-gradient(180deg,rgba(4,17,39,.28),rgba(8,24,51,.38)),
    url('../images/realm4-crystal-canyon.webp?v=0740')!important;
  background-position:center center!important;
}
.crystal-hero .realm-copy,.crystal-hero .realm-avatar,.crystal-map .tri-map-ambient{position:relative;z-index:4}
/* RC9: restore Realm ×3 Quest Map positioning contract. The route MUST remain absolute. */
.crystal-map .tri-route{position:absolute!important;z-index:4!important}
.crystal-hero .realm-copy{text-shadow:0 2px 14px rgba(1,10,28,.65)}

/* Small animated crystal fragments live inside the card, never over UI controls. */
.quad-card-crystals{position:absolute;inset:0;z-index:2;pointer-events:none;overflow:hidden;border-radius:inherit}
.quad-card-crystals .qcf{position:absolute;display:block;font-style:normal;color:rgba(166,235,255,.70);font-size:18px;filter:drop-shadow(0 0 8px rgba(99,225,255,.55));opacity:.58;animation:quadCrystalDrift 6.8s ease-in-out infinite alternate}
.quad-card-crystals .qcf-1{left:9%;top:18%;font-size:13px;animation-delay:-1.2s}
.quad-card-crystals .qcf-2{left:23%;top:74%;font-size:20px;animation-delay:-3.4s;animation-duration:8.4s}
.quad-card-crystals .qcf-3{left:47%;top:14%;font-size:11px;animation-delay:-4.1s;animation-duration:7.4s}
.quad-card-crystals .qcf-4{left:65%;top:72%;font-size:15px;animation-delay:-.8s;animation-duration:9s}
.quad-card-crystals .qcf-5{left:82%;top:20%;font-size:19px;animation-delay:-5.2s;animation-duration:8.1s}
.quad-card-crystals .qcf-6{left:91%;top:62%;font-size:10px;animation-delay:-2.5s;animation-duration:6.2s}
.quad-card-crystals .qcf-7{left:35%;top:48%;font-size:9px;animation-delay:-6s;animation-duration:9.4s}
@keyframes quadCrystalDrift{0%{transform:translate3d(-3px,8px,0) rotate(0deg) scale(.86);opacity:.30}50%{opacity:.72}100%{transform:translate3d(9px,-18px,0) rotate(34deg) scale(1.10);opacity:.46}}

/* Task #18.6 RC6 — Realm ×4 boss uses a TRUE transparent Guardian sprite.
   No square/photo card. Battlefield contract follows the locked Realm ×3 boss:
   Nombi left, full-body Guardian right, question card below, one chest target. */
.prismhorn-boss-stage .quad-stage-bg{
  background:
    radial-gradient(circle at 76% 42%,rgba(126,70,214,.20),transparent 25%),
    radial-gradient(circle at 58% 62%,rgba(62,180,255,.08),transparent 28%),
    linear-gradient(135deg,#101735 0%,#17284d 46%,#241545 100%)!important;
}
.prismhorn-boss-ambient{position:absolute;inset:0;z-index:1;pointer-events:none;overflow:hidden}
.prismhorn-boss-ambient::before{content:'';position:absolute;right:3%;top:15%;width:42%;height:52%;border-radius:50%;background:radial-gradient(circle,rgba(161,86,255,.20),rgba(111,61,190,.08) 46%,transparent 72%);filter:blur(10px);animation:prismhornArenaPulse 2.5s ease-in-out infinite alternate}
.prismhorn-boss-ambient::after{content:'✦   ◆   ✧   ◆   ✦';position:absolute;right:5%;top:21%;width:38%;color:rgba(184,124,255,.42);font-size:19px;letter-spacing:1.55em;white-space:nowrap;animation:prismhornShardFloat 4.8s ease-in-out infinite alternate}
@keyframes prismhornArenaPulse{to{transform:scale(1.10);opacity:.64}}
@keyframes prismhornShardFloat{to{transform:translate(-10px,-14px) rotate(4deg);opacity:.72}}

.prismhorn-battlefield{overflow:visible!important}
.prismhorn-guardian{
  right:5%!important;bottom:0!important;width:430px!important;height:350px!important;
  display:block!important;overflow:visible!important;background:transparent!important;border:0!important;
  transform-origin:50% 88%!important;filter:drop-shadow(0 18px 18px rgba(0,10,30,.35)) drop-shadow(0 0 24px rgba(138,78,245,.30))!important;
  animation:prismhornIdle 2.9s ease-in-out infinite!important;
}
.prismhorn-guardian::before{content:'';position:absolute;z-index:-1;left:19%;right:8%;bottom:1%;height:34px;border-radius:50%;background:radial-gradient(ellipse,rgba(127,87,238,.30),rgba(75,50,159,.13) 48%,transparent 74%);filter:blur(4px)}
.prismhorn-guardian .prismhorn-image{
  position:absolute!important;inset:0!important;width:100%!important;height:100%!important;
  object-fit:contain!important;object-position:center bottom!important;border-radius:0!important;
  user-select:none!important;pointer-events:none!important;
  -webkit-mask-image:none!important;mask-image:none!important;
  transition:filter .28s ease,opacity .28s ease!important;
}
.prismhorn-aura{position:absolute;z-index:-1;left:14%;right:5%;top:8%;bottom:10%;border-radius:48%;background:radial-gradient(circle at 52% 54%,rgba(176,83,255,.18),rgba(102,54,190,.07) 52%,transparent 73%);filter:blur(8px);animation:prismhornAura 2.1s ease-in-out infinite alternate}
.prismhorn-target-core{position:absolute!important;left:47%!important;top:55%!important;width:12px!important;height:12px!important;border-radius:50%!important;opacity:0!important;pointer-events:none!important}
.prismhorn-guardian .vortex-name{z-index:4!important;left:50%!important;right:auto!important;bottom:-7px!important;transform:translateX(-50%)!important;white-space:nowrap!important;background:rgba(7,24,52,.82)!important;border:1px solid rgba(141,231,255,.18)!important}
@keyframes prismhornIdle{0%,100%{transform:translateY(0) scale(1)}50%{transform:translateY(-5px) scale(1.008)}}
@keyframes prismhornAura{to{transform:scale(1.08);opacity:.64}}

/* Phase escalation is VFX, not a different rectangular image. */
.prismhorn-phase-1 .prismhorn-image{filter:saturate(1.04) brightness(.98)}
.prismhorn-phase-2 .prismhorn-image{filter:saturate(1.16) contrast(1.06) brightness(1.02)}
.prismhorn-phase-2 .prismhorn-aura{background:radial-gradient(circle,rgba(187,77,255,.28),rgba(96,42,170,.10) 52%,transparent 74%);filter:blur(6px)}
.prismhorn-phase-3 .prismhorn-image{filter:saturate(1.28) contrast(1.10) brightness(1.04)}
.prismhorn-phase-3 .prismhorn-aura{background:radial-gradient(circle,rgba(230,72,255,.34),rgba(103,35,178,.13) 52%,transparent 74%);filter:blur(5px);animation-duration:.9s}
.prismhorn-phase-3::after{content:'◆';position:absolute;left:47%;top:53%;font-size:24px;color:#ff8cff;text-shadow:0 0 12px #d94cff,0 0 26px #7a24d9;animation:prismhornCoreBeat .7s ease-in-out infinite alternate}
@keyframes prismhornCoreBeat{to{transform:scale(1.22);filter:brightness(1.5)}}

.prismhorn-guardian.hit,.prismhorn-guardian.attack-hit{animation:prismhornHit .42s ease-out!important}
@keyframes prismhornHit{0%{transform:translateX(0) scale(1)}32%{transform:translateX(13px) scale(1.025);filter:brightness(1.8) drop-shadow(0 0 44px rgba(255,226,104,.74))}100%{transform:translateX(0) scale(1)}}
.prismhorn-guardian.counter{animation:prismhornCounter .88s ease-in-out!important}
@keyframes prismhornCounter{0%,100%{transform:translateX(0) scale(1)}38%{transform:translateX(-36px) scale(1.045)}62%{transform:translateX(-26px) scale(1.035)}}
.prismhorn-guardian.purifying{animation:prismhornPurify .62s ease-in-out infinite alternate!important}
@keyframes prismhornPurify{to{filter:brightness(1.8) saturate(.40) drop-shadow(0 0 50px rgba(255,246,187,.72));transform:scale(1.025)}}
.prismhorn-guardian.freed{animation:prismhornRestoredIdle 3.2s ease-in-out infinite!important;filter:drop-shadow(0 18px 18px rgba(0,10,30,.30)) drop-shadow(0 0 28px rgba(91,222,255,.38))!important}
.prismhorn-guardian.freed .prismhorn-image{filter:brightness(1.06) saturate(1.04)!important}
.prismhorn-guardian.freed .prismhorn-aura{background:radial-gradient(circle,rgba(88,229,255,.22),rgba(70,160,255,.08) 52%,transparent 74%)}
@keyframes prismhornRestoredIdle{0%,100%{transform:translateY(0)}50%{transform:translateY(-4px)}}
.prismhorn-impact{right:24%!important;top:42%!important}

@media(max-width:1050px){
  .prismhorn-guardian{right:2%!important;width:370px!important;height:305px!important}
  .prismhorn-target-core{left:47%!important;top:55%!important}
}
@media(max-width:720px){
  .prismhorn-boss-ambient::after{display:none}
  .prismhorn-guardian{right:-3%!important;bottom:6%!important;width:285px!important;height:235px!important}
  .prismhorn-guardian .vortex-name{font-size:10px!important;padding:6px 13px!important;bottom:-5px!important}
  .prismhorn-target-core{left:47%!important;top:55%!important}
  .prismhorn-impact{right:20%!important;top:43%!important}
}
@media(max-width:430px){
  .prismhorn-guardian{right:-5%!important;bottom:7%!important;width:255px!important;height:215px!important}
  .prismhorn-guardian .vortex-name{display:none!important}
}

/* Child-friendly loading feedback. It appears above the current screen and
   disappears automatically when the async operation/asset boot finishes. */
.sq-loading-overlay{position:fixed;inset:0;z-index:9998;display:grid;place-items:center;background:rgba(5,13,35,.70);backdrop-filter:blur(4px);opacity:0;transition:opacity .18s ease;pointer-events:all}
.sq-loading-overlay.show{opacity:1}
.sq-loading-card{min-width:210px;padding:22px 26px 20px;border-radius:24px;text-align:center;background:linear-gradient(180deg,rgba(15,45,82,.97),rgba(14,24,58,.98));border:1px solid rgba(151,225,255,.30);box-shadow:0 18px 50px rgba(2,8,29,.46),inset 0 0 28px rgba(116,223,255,.06);color:#fff}
.sq-loading-crystal{font-size:34px;color:#9df1ff;text-shadow:0 0 18px #7eeaff,0 0 30px #a77bff;animation:sqLoadCrystal 1.15s ease-in-out infinite alternate}
.sq-loading-typing{width:10ch;margin:8px auto 2px;overflow:hidden;white-space:nowrap;font:900 24px/1.2 'Baloo 2',sans-serif;letter-spacing:.08em;color:#fff4ad;border-right:2px solid rgba(255,244,173,.90);animation:sqLoadingType 1.35s steps(10,end) infinite alternate,sqCaret .55s steps(1,end) infinite}
.sq-loading-card small{display:block;margin-top:7px;font:700 12px/1.25 'Nunito',sans-serif;color:#cceeff}
@keyframes sqLoadingType{from{width:0}to{width:10ch}}
@keyframes sqCaret{50%{border-color:transparent}}
@keyframes sqLoadCrystal{from{transform:translateY(3px) rotate(-8deg) scale(.92)}to{transform:translateY(-4px) rotate(8deg) scale(1.08)}}

@media(max-width:980px) and (min-width:721px){
  .crystal-hero .crystal-placeholder-bg,.crystal-map .crystal-map-bg{background-position:54% center!important}
  .prismhorn-guardian{right:1%!important;width:min(390px,44vw)!important;height:300px!important}
}
@media(max-width:720px){
  /* Keep the exact Realm3 quest-map centering contract inherited from
     triwave-v0735.css; only background/floater visual treatment changes. */
  .crystal-map .crystal-map-bg{background-position:50% center!important}
  .crystal-hero .crystal-placeholder-bg{background-position:54% center!important}
  .quad-card-crystals .qcf{font-size:12px!important;opacity:.38!important}
  .quad-card-crystals .qcf-3,.quad-card-crystals .qcf-6,.quad-card-crystals .qcf-7{display:none}
  .prismhorn-guardian{right:-2%!important;bottom:7%!important;width:min(280px,62vw)!important;height:220px!important}
  .prismhorn-guardian .vortex-name{font-size:10px!important;padding:6px 13px!important}
  .sq-loading-card{min-width:min(220px,76vw);padding:20px 20px 18px;border-radius:22px}
  .sq-loading-typing{font-size:22px}
}
@media(max-width:430px){
  .crystal-hero .crystal-placeholder-bg,.crystal-map .crystal-map-bg{background-position:52% center!important}
  .prismhorn-guardian{right:-5%!important;width:min(250px,66vw)!important;height:205px!important}
}
@media(prefers-reduced-motion:reduce){.quad-card-crystals .qcf,.sq-loading-crystal,.sq-loading-typing{animation:none!important}.sq-loading-typing{width:auto!important;border-right:0!important}}


/* ============================================================
   Task #18.7 RC7 — Realm ×4 map alignment + richer crystals + proper Shard Gate
   ============================================================ */

/* More obvious crystal ambience inside intro and map cards. */
.crystal-hero::after,.crystal-map::after{content:'';position:absolute;inset:0;z-index:2;pointer-events:none;border-radius:inherit;background:linear-gradient(115deg,transparent 0 34%,rgba(210,244,255,.10) 46%,transparent 58%);mix-blend-mode:screen;opacity:.7;animation:crystalSweep 8s ease-in-out infinite}
@keyframes crystalSweep{0%,100%{transform:translateX(-18%) skewX(-8deg);opacity:.22}45%{opacity:.64}50%{transform:translateX(22%) skewX(-8deg);opacity:.14}}
.quad-card-crystals .qcf{position:absolute;display:grid;place-items:center;font-style:normal;color:rgba(191,241,255,.84);text-shadow:0 0 12px rgba(99,225,255,.68),0 0 22px rgba(162,118,255,.32);opacity:.72;animation:quadCrystalDrift 7.4s ease-in-out infinite alternate,quadCrystalTwinkle 1.9s ease-in-out infinite}
.quad-card-crystals .qcb,.quad-card-crystals .qshine{position:absolute;display:block;pointer-events:none}
.quad-card-crystals .qcb{width:86px;height:86px;clip-path:polygon(50% 0,78% 22%,100% 58%,52% 100%,10% 68%,0 30%);background:linear-gradient(140deg,rgba(255,255,255,.62),rgba(122,239,255,.32) 34%,rgba(178,127,255,.26) 66%,rgba(255,232,147,.16));filter:drop-shadow(0 0 18px rgba(120,228,255,.22));opacity:.52;animation:quadBigCrystalFloat 9.2s ease-in-out infinite alternate}
.quad-card-crystals .qcb-1{left:-1%;bottom:7%;transform:rotate(-16deg)}
.quad-card-crystals .qcb-2{right:4%;bottom:8%;width:110px;height:110px;transform:rotate(10deg);animation-duration:11s}
.quad-card-crystals .qcb-3{right:16%;top:10%;width:58px;height:58px;transform:rotate(22deg);animation-duration:8.6s;opacity:.42}
.quad-card-crystals .qshine{border-radius:50%;background:radial-gradient(circle,rgba(255,251,198,.66),rgba(146,238,255,.16) 45%,transparent 72%);filter:blur(1px);animation:quadShinePulse 2.3s ease-in-out infinite alternate}
.quad-card-crystals .qshine-1{left:15%;top:24%;width:24px;height:24px}
.quad-card-crystals .qshine-2{right:20%;top:36%;width:18px;height:18px;animation-duration:1.8s}
@keyframes quadCrystalTwinkle{0%,100%{filter:drop-shadow(0 0 8px rgba(99,225,255,.55));opacity:.52}50%{filter:drop-shadow(0 0 15px rgba(255,241,158,.55));opacity:.92}}
@keyframes quadBigCrystalFloat{0%{transform:translateY(0) rotate(-12deg)}100%{transform:translateY(-14px) rotate(-6deg)}}
@keyframes quadShinePulse{0%{transform:scale(.8);opacity:.38}100%{transform:scale(1.24);opacity:.92}}

/* Realm ×4 Quest Map layout: NO custom geometry.
   Exact Realm ×3 .tri-map/.tri-route/.tri-node desktop/tablet/mobile contract is inherited from triwave-v0735.css, including Task #14 mobile centering. */
/* Proper Shard Gate: crystal arch + portal + six side seals that light up one-by-one. */
.quad-gate-stage .tri-beacon-playfield{overflow:hidden!important}
.quad-gate-field{right:6%!important;top:10%!important;width:46%!important;height:58%!important;display:grid!important;place-items:center!important;filter:drop-shadow(0 10px 22px rgba(4,14,38,.22))}
.quad-gate-field::after{content:'';position:absolute;left:18%;right:18%;bottom:-3%;height:26px;border-radius:50%;background:radial-gradient(ellipse at center,rgba(109,234,255,.22),rgba(121,87,239,.08) 52%,transparent 74%);filter:blur(6px)}
.quad-gate-arch{position:relative;width:320px;height:286px;display:block;animation:quadGateIdle 3.4s ease-in-out infinite}
.quad-gate-column,.quad-gate-column-cap,.quad-gate-lintel,.quad-gate-crown{position:absolute;background:linear-gradient(180deg,rgba(153,221,255,.85),rgba(111,122,232,.74) 45%,rgba(62,55,145,.92));border:1px solid rgba(228,246,255,.56);box-shadow:inset 0 0 18px rgba(255,255,255,.12),0 0 22px rgba(128,214,255,.18)}
.quad-gate-column{bottom:34px;width:54px;height:166px;border-radius:18px 18px 12px 12px}
.quad-gate-column.left{left:38px}.quad-gate-column.right{right:38px}
.quad-gate-column-cap{top:60px;width:70px;height:26px;border-radius:12px}.quad-gate-column-cap.left{left:30px}.quad-gate-column-cap.right{right:30px}
.quad-gate-lintel{left:58px;right:58px;top:34px;height:40px;border-radius:16px;clip-path:polygon(8% 100%,0 35%,12% 0,88% 0,100% 35%,92% 100%)}
.quad-gate-crown{left:112px;right:112px;top:4px;height:44px;border-radius:18px;clip-path:polygon(50% 0,88% 32%,100% 100%,0 100%,12% 32%);background:linear-gradient(180deg,rgba(255,236,155,.72),rgba(121,233,255,.76) 36%,rgba(116,105,236,.92));box-shadow:0 0 22px rgba(255,230,137,.22),inset 0 0 18px rgba(255,255,255,.18)}
.quad-gate-portal{position:absolute;left:78px;right:78px;top:64px;bottom:34px;border-radius:110px 110px 26px 26px;background:radial-gradient(circle at 50% 42%,rgba(212,245,255,.92),rgba(114,219,255,.74) 22%,rgba(152,127,255,.66) 52%,rgba(77,56,155,.32) 76%,rgba(31,37,91,.12) 100%);border:2px solid rgba(165,239,255,.58);box-shadow:0 0 32px rgba(112,234,255,.34),inset 0 0 34px rgba(255,255,255,.18);overflow:hidden}
.quad-gate-portal::before{content:'';position:absolute;inset:12px;border-radius:92px 92px 18px 18px;border:1px solid rgba(255,247,203,.46);opacity:.62}
.quad-gate-portal::after{content:'';position:absolute;left:-16%;top:14%;width:62%;height:120%;background:linear-gradient(100deg,transparent 20%,rgba(255,255,255,.26),transparent 56%);transform:rotate(10deg);animation:quadGateSweep 2.9s linear infinite}
.quad-gate-portal-core{position:absolute;left:50%;top:46%;width:108px;height:108px;border-radius:26px;transform:translate(-50%,-50%) rotate(45deg);background:radial-gradient(circle,#ffffff,#b5f2ff 32%,#9c87ff 58%,rgba(91,71,182,.86) 84%);box-shadow:0 0 26px rgba(112,234,255,.44),0 0 38px rgba(186,141,255,.20)}
.quad-gate-runes{position:absolute;left:50%;top:50%;width:196px;height:196px;transform:translate(-50%,-50%);border-radius:50%;border:2px solid rgba(132,230,255,.24);box-shadow:inset 0 0 18px rgba(160,227,255,.08)}
.quad-gate-runes::before,.quad-gate-runes::after{content:'';position:absolute;inset:15px;border-radius:50%;border:1px solid rgba(255,233,139,.24)}.quad-gate-runes::after{inset:34px;border-color:rgba(177,145,255,.30)}
.quad-gate-core{position:absolute!important;left:50%!important;top:46%!important;transform:translate(-50%,-50%) rotate(-45deg)!important;z-index:4!important;width:108px!important;height:108px!important;display:grid!important;place-items:center!important;background:transparent!important;box-shadow:none!important;border-radius:0!important;font:900 30px/1 'Baloo 2',sans-serif!important;color:#fff;text-shadow:0 0 14px rgba(255,246,198,.62),0 0 22px rgba(117,226,255,.58)!important}
.quad-gate-seals{position:absolute;inset:0;z-index:5;pointer-events:none}
.quad-gate-seal{position:absolute;width:24px;height:38px;clip-path:polygon(50% 0,88% 28%,100% 58%,50% 100%,0 58%,12% 28%);background:linear-gradient(180deg,rgba(73,88,164,.68),rgba(49,45,100,.92));border:1px solid rgba(172,238,255,.26);box-shadow:inset 0 0 10px rgba(255,255,255,.08);opacity:.88}
.quad-gate-seal span{position:absolute;inset:4px;clip-path:inherit;background:radial-gradient(circle at 50% 35%,rgba(234,251,255,.18),rgba(103,184,255,.08) 44%,rgba(72,59,148,.10) 80%)}
.quad-gate-seal:nth-child(1){left:62px;top:170px}.quad-gate-seal:nth-child(2){left:72px;top:124px}.quad-gate-seal:nth-child(3){left:96px;top:82px}.quad-gate-seal:nth-child(4){right:96px;top:82px}.quad-gate-seal:nth-child(5){right:72px;top:124px}.quad-gate-seal:nth-child(6){right:62px;top:170px}
.quad-gate-seal.on,.quad-gate-seal.done{background:linear-gradient(180deg,#fff4b3,#8cecff 40%,#b38aff 74%);border-color:rgba(255,246,198,.78);box-shadow:0 0 18px rgba(255,236,143,.40),0 0 26px rgba(99,225,255,.34),inset 0 0 14px rgba(255,255,255,.28);animation:quadGateSealGlow 1.4s ease-in-out infinite alternate}
.quad-gate-shards{position:absolute;inset:0;pointer-events:none}.quad-gate-shards .s{position:absolute;width:18px;height:28px;clip-path:polygon(50% 0,86% 28%,100% 62%,50% 100%,0 62%,14% 28%);background:linear-gradient(180deg,rgba(255,246,189,.72),rgba(131,233,255,.54),rgba(172,133,255,.48));filter:drop-shadow(0 0 8px rgba(120,228,255,.34));opacity:.62;animation:quadGateShardFloat 3.6s ease-in-out infinite alternate}
.quad-gate-shards .s1{left:8px;top:78px}.quad-gate-shards .s2{left:20px;top:36px;width:14px;height:22px;animation-delay:-1.4s}.quad-gate-shards .s3{left:40px;bottom:50px;width:12px;height:18px;animation-delay:-2.8s}.quad-gate-shards .s4{right:8px;top:78px}.quad-gate-shards .s5{right:20px;top:36px;width:14px;height:22px;animation-delay:-1.1s}.quad-gate-shards .s6{right:40px;bottom:50px;width:12px;height:18px;animation-delay:-2.2s}.quad-gate-shards .s7{left:136px;top:-6px;width:12px;height:18px;animation-delay:-.6s}.quad-gate-shards .s8{right:136px;top:-6px;width:12px;height:18px;animation-delay:-1.8s}
.quad-gate-field.impact .quad-gate-arch{animation:quadGateImpact .42s ease-out!important}.quad-gate-field.impact .quad-gate-portal,.quad-gate-field.impact .quad-gate-portal-core{filter:brightness(1.32)}

.quad-gate-heal-target{position:absolute;left:50%;top:50%;width:8px;height:8px;transform:translate(-50%,-50%);opacity:0;pointer-events:none}
.quad-gate-field.healing .quad-gate-portal{filter:brightness(1.25) saturate(1.15);box-shadow:0 0 42px rgba(120,255,228,.48),inset 0 0 44px rgba(220,255,248,.30)}
.quad-gate-field.healing .quad-gate-portal-core{background:radial-gradient(circle,#ffffff,#c6fff0 32%,#74eacb 58%,rgba(80,156,194,.88) 84%);box-shadow:0 0 34px rgba(118,255,219,.56),0 0 48px rgba(104,223,255,.28)}
.quad-gate-field.restored .quad-gate-portal{background:radial-gradient(circle at 50% 42%,rgba(242,255,251,.98),rgba(113,246,208,.84) 24%,rgba(112,217,255,.72) 52%,rgba(113,99,232,.34) 78%,rgba(31,37,91,.10) 100%);box-shadow:0 0 48px rgba(112,255,218,.52),0 0 70px rgba(105,221,255,.24),inset 0 0 42px rgba(255,255,255,.28)}
.quad-gate-field.restored .quad-gate-crown,.quad-gate-field.restored .quad-gate-lintel,.quad-gate-field.restored .quad-gate-column{filter:brightness(1.20) saturate(1.12);box-shadow:inset 0 0 22px rgba(255,255,255,.18),0 0 28px rgba(111,238,220,.28)}
@keyframes quadGateIdle{0%,100%{transform:translateY(0)}50%{transform:translateY(-5px)}}
@keyframes quadGateSweep{0%{transform:translateX(-20%) rotate(10deg)}100%{transform:translateX(110%) rotate(10deg)}}
@keyframes quadGateSealGlow{0%{transform:scale(1);opacity:.84}100%{transform:scale(1.08);opacity:1}}
@keyframes quadGateImpact{0%{transform:scale(1)}40%{transform:scale(1.03);filter:brightness(1.4)}100%{transform:scale(1)}}
@keyframes quadGateShardFloat{0%{transform:translateY(4px)}100%{transform:translateY(-8px)}}
@media(max-width:980px){.quad-gate-field{right:4%!important;width:48%!important;height:60%!important}.quad-gate-arch{width:276px;height:248px}.quad-gate-column{width:48px;height:146px}.quad-gate-column.left{left:32px}.quad-gate-column.right{right:32px}.quad-gate-column-cap{width:60px}.quad-gate-portal{left:68px;right:68px;top:58px;bottom:34px}.quad-gate-portal-core,.quad-gate-core{width:92px!important;height:92px!important;font-size:24px!important}.quad-gate-runes{width:168px;height:168px}.quad-gate-seal:nth-child(1){left:52px;top:150px}.quad-gate-seal:nth-child(2){left:62px;top:112px}.quad-gate-seal:nth-child(3){left:82px;top:76px}.quad-gate-seal:nth-child(4){right:82px;top:76px}.quad-gate-seal:nth-child(5){right:62px;top:112px}.quad-gate-seal:nth-child(6){right:52px;top:150px}}
@media(max-width:720px){.quad-gate-field{top:4%!important;right:0!important;width:52%!important;height:68%!important}.quad-gate-arch{width:198px;height:188px}.quad-gate-column{bottom:18px;width:34px;height:112px;border-radius:12px}.quad-gate-column.left{left:24px}.quad-gate-column.right{right:24px}.quad-gate-column-cap{top:42px;width:44px;height:18px;left:auto}.quad-gate-column-cap.left{left:18px}.quad-gate-column-cap.right{right:18px}.quad-gate-lintel{left:38px;right:38px;top:22px;height:28px}.quad-gate-crown{left:72px;right:72px;top:0;height:32px}.quad-gate-portal{left:44px;right:44px;top:42px;bottom:18px;border-radius:70px 70px 16px 16px}.quad-gate-portal-core,.quad-gate-core{width:68px!important;height:68px!important;font-size:18px!important}.quad-gate-runes{width:120px;height:120px}.quad-gate-seal{width:16px;height:26px}.quad-gate-seal:nth-child(1){left:35px;top:114px}.quad-gate-seal:nth-child(2){left:42px;top:88px}.quad-gate-seal:nth-child(3){left:56px;top:62px}.quad-gate-seal:nth-child(4){right:56px;top:62px}.quad-gate-seal:nth-child(5){right:42px;top:88px}.quad-gate-seal:nth-child(6){right:35px;top:114px}.quad-gate-shards .s{display:none}}
@media(max-width:430px){.quad-gate-field{width:53%!important}.quad-gate-arch{width:176px;height:166px}.quad-gate-portal{left:38px;right:38px;top:39px;bottom:18px}.quad-gate-portal-core,.quad-gate-core{width:60px!important;height:60px!important;font-size:17px!important}.quad-gate-runes{width:106px;height:106px}.quad-gate-seal:nth-child(1){left:30px;top:102px}.quad-gate-seal:nth-child(2){left:36px;top:78px}.quad-gate-seal:nth-child(3){left:48px;top:56px}.quad-gate-seal:nth-child(4){right:48px;top:56px}.quad-gate-seal:nth-child(5){right:36px;top:78px}.quad-gate-seal:nth-child(6){right:30px;top:102px}}


/* Task #18.9 RC9 — Quest Map centering fix only.
   No custom card widths/coordinates: Realm ×3 triwave-v0735.css owns geometry. */
.crystal-map{overflow:hidden!important}
.crystal-map .tri-route{box-sizing:border-box!important}
.crystal-map .tri-node{min-width:0!important}
@media(max-width:720px){
  .crystal-map .tri-route{position:absolute!important}
}

/* Task #18.11 RC11 — Q1 mobile geometry restored to the RC2/Realm3-compatible 3×2 contract. */
@media(max-width:430px){.quad-rescue-stage .quad-crystal-zone{gap:4px!important}.quad-rescue-stage .quad-crystal-pod{border-radius:17px!important}.quad-crystal-cage{width:38px!important;height:44px!important}.quad-crystal-cage>span{font-size:27px!important}.quad-crystal-cage>i{height:47px!important}}