/* =========================================================
   SIFIRQUEST v0.6.0 — REALM ×3 TRIWAVE LAGOON
   Mobile-responsive-first add-on. Twinwood v0.5.23 remains
   the reference baseline and is intentionally left intact.
   ========================================================= */

.triwave-shell{
  --tri-aqua:#62e7ff;
  --tri-cyan:#20c8ef;
  --tri-blue:#1978d8;
  --tri-deep:#06192c;
  --tri-navy:#0b173a;
  --tri-pearl:#f8fbff;
  --tri-gold:#ffd96c;
  --tri-coral:#ff8f72;
  --tri-green:#4ce1b2;
}
.triwave-shell .container{position:relative}
.triwave-shell .topbar>.row{align-items:flex-start;justify-content:flex-end;margin-left:auto}
.triwave-shell .topbar>.row>.pill:last-child{display:none!important}
.tri-topstats{display:flex;gap:8px;align-items:center;justify-content:flex-end;flex-wrap:wrap}
.tri-topstats .tri-stat{min-width:112px;justify-content:center;background:rgba(7,32,58,.72);border-color:rgba(117,231,255,.28);box-shadow:0 7px 22px rgba(2,15,32,.22)}

/* ---------- Intro ---------- */
.triwave-hero{
  position:relative;min-height:650px;border-radius:34px;overflow:hidden;isolation:isolate;
  border:1px solid rgba(121,230,255,.30);
  background:
    linear-gradient(90deg,rgba(4,27,45,.88) 0%,rgba(4,31,46,.60) 48%,rgba(4,26,43,.12) 78%),
    url('../images/triwave-lagoon-bg.webp?v=0.6.0') center/cover no-repeat;
  box-shadow:inset 0 0 80px rgba(17,197,230,.08),0 20px 60px rgba(0,0,0,.22)
}
.tri-intro-copy{position:absolute;left:6%;top:18%;z-index:4;max-width:620px}
.tri-intro-copy h1{font-size:clamp(54px,6vw,86px);line-height:.98;margin:12px 0 22px;letter-spacing:-.02em;text-shadow:0 4px 20px rgba(0,14,28,.32)}
.tri-intro-copy p{font-size:21px;line-height:1.55;max-width:650px;color:#effcff;text-shadow:0 2px 12px rgba(0,20,34,.5)}
.tri-intro-avatar{position:absolute;z-index:4;right:7%;bottom:-2%;width:340px;height:560px;display:flex;align-items:flex-end;justify-content:center}
.tri-intro-avatar .player-sprite{width:300px;height:520px}
.tri-intro-avatar .player-sprite img{object-fit:contain;object-position:center bottom}
.tri-intro-avatar .avatar-nameplate{position:absolute;bottom:26px}
.tri-ambient{position:absolute;inset:0;pointer-events:none;z-index:2;overflow:hidden}
.tri-ambient.bubbles:before,.tri-map-ambient.bubbles:before{
  content:'';position:absolute;inset:-15% 0;
  background:
    radial-gradient(circle at 12% 88%,rgba(255,255,255,.75) 0 3px,transparent 4px),
    radial-gradient(circle at 24% 64%,rgba(126,240,255,.65) 0 5px,transparent 6px),
    radial-gradient(circle at 42% 78%,rgba(255,255,255,.56) 0 4px,transparent 5px),
    radial-gradient(circle at 68% 72%,rgba(117,231,255,.65) 0 6px,transparent 7px),
    radial-gradient(circle at 84% 90%,rgba(255,255,255,.70) 0 3px,transparent 4px),
    radial-gradient(circle at 91% 58%,rgba(117,231,255,.55) 0 5px,transparent 6px);
  opacity:.7;animation:triBubbleDrift 11s linear infinite
}
.tri-ambient.shimmer:after{content:'';position:absolute;inset:-10%;background:linear-gradient(112deg,transparent 32%,rgba(219,251,255,.10) 42%,rgba(255,255,255,.18) 46%,transparent 57%);transform:translateX(-35%);animation:triShimmer 8s ease-in-out infinite}
@keyframes triBubbleDrift{0%{transform:translateY(8%)}100%{transform:translateY(-18%)}}
@keyframes triShimmer{0%,15%{transform:translateX(-45%)}70%,100%{transform:translateX(55%)}}

/* ---------- Quest Map ---------- */
.tri-map{position:relative;min-height:610px;border-radius:32px;overflow:hidden;isolation:isolate;border:1px solid rgba(93,224,255,.25);background:#0b5263}
.tri-map-bg{position:absolute;inset:0;z-index:0;background:
  linear-gradient(180deg,rgba(3,25,45,.18),rgba(3,28,40,.18) 48%,rgba(3,35,40,.42)),
  url('../images/triwave-lagoon-bg.webp?v=0.6.0') 50% 54%/cover no-repeat;filter:saturate(1.08) contrast(1.02)}
.tri-map-ambient{position:absolute;inset:0;z-index:1;pointer-events:none;overflow:hidden}
.tri-map-ambient.light:after{content:'';position:absolute;width:48%;height:140%;top:-25%;left:30%;background:linear-gradient(105deg,transparent 25%,rgba(175,246,255,.12),transparent 67%);animation:triMapRay 8s ease-in-out infinite alternate}
@keyframes triMapRay{to{transform:translateX(70%) skewX(-6deg)}}
.tri-map .tri-map-player{position:absolute;z-index:3;left:2.5%;bottom:-4%;width:150px;height:240px}
.tri-route{position:absolute;z-index:4;left:7%;right:6%;top:33%;display:grid;grid-template-columns:1fr 78px 1fr 78px 1fr 78px 1.08fr;align-items:center;gap:8px}
.tri-node{position:relative;min-height:205px;padding:22px 16px;border-radius:26px;border:1px solid rgba(126,240,255,.44);background:linear-gradient(180deg,rgba(4,49,60,.90),rgba(3,29,45,.93));color:white;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:9px;text-align:center;box-shadow:0 12px 30px rgba(0,16,31,.22);transition:transform .2s ease,border-color .2s ease,filter .2s ease}
.tri-node:hover:not(.locked){transform:translateY(-5px);border-color:var(--tri-gold)}
.tri-node.done{border-color:rgba(119,245,194,.76);box-shadow:inset 0 0 28px rgba(51,221,183,.10),0 12px 30px rgba(0,16,31,.22)}
.tri-node.locked{filter:saturate(.45) brightness(.72);cursor:not-allowed}
.tri-node.boss{background:linear-gradient(180deg,rgba(62,26,89,.92),rgba(18,21,57,.96));border-color:rgba(195,130,255,.50)}
.tri-node .node-icon{font-size:44px;line-height:1}
.tri-node strong{font-family:'Baloo 2',sans-serif;font-size:21px;line-height:1.12}
.tri-node small{font-family:'Nunito',sans-serif;font-size:14px;color:#d8f6ff;line-height:1.25}
.tri-node .node-count{position:absolute;right:12px;top:12px;min-width:32px;height:32px;border-radius:999px;background:linear-gradient(180deg,#ffe78f,#ffc94f);color:#102743;font-weight:900;display:grid;place-items:center;box-shadow:0 4px 0 rgba(182,119,11,.48)}
.tri-route-line{height:9px;border-radius:999px;background:rgba(88,173,193,.25);box-shadow:inset 0 0 0 1px rgba(141,235,255,.12)}
.tri-route-line.lit{background:linear-gradient(90deg,#54eab8,#b9f88e,#ffe176);box-shadow:0 0 18px rgba(91,234,191,.38)}
.tri-map-actions{margin-top:18px}

/* ---------- Shared gameplay stage ---------- */
.tri-game-stage,.tri-boss-stage{position:relative;min-height:680px;border-radius:30px;overflow:hidden;isolation:isolate;border:1px solid rgba(112,228,255,.26);background:#082f42}
.tri-stage-bg{position:absolute;inset:0;z-index:0;background-position:center;background-size:cover;background-repeat:no-repeat}
.tri-stage-bg:after{content:'';position:absolute;inset:0;background:linear-gradient(180deg,rgba(4,30,48,.15),rgba(4,32,46,.28) 55%,rgba(2,24,36,.60))}
.tri-stage-bg.pearl{background-image:url('../images/triwave-pearl-cove.webp?v=0.6.0')}
.tri-stage-bg.current{background-image:url('../images/triwave-current-channel.webp?v=0.6.0')}
.tri-stage-bg.beacon{background-image:url('../images/triwave-beacon-chamber.webp?v=0.6.0')}
.tri-stage-bg.vortex{background-image:url('../images/triwave-vortex-arena.webp?v=0.6.0')}
.tri-stage-indicator{position:absolute;z-index:6;left:50%;top:22px;transform:translateX(-50%);min-width:280px;padding:10px 18px;border-radius:20px;background:rgba(3,28,43,.76);backdrop-filter:blur(7px);border:1px solid rgba(133,236,255,.25);text-align:center}
.tri-stage-indicator>span{display:block;font-size:12px;letter-spacing:.16em;font-weight:900;color:#7feaff;margin-bottom:7px}
.tri-pearl-count,.tri-wave-count,.tri-charge-count{display:flex;gap:8px;justify-content:center}
.tri-pearl-count i,.tri-wave-count i,.tri-charge-count i{display:block;width:22px;height:12px;border-radius:999px;background:rgba(145,218,229,.22);border:1px solid rgba(160,240,255,.20);transition:.25s}
.tri-pearl-count i{width:17px;height:17px;border-radius:50%}
.tri-wave-count i{border-radius:50% 8px 50% 8px;transform:rotate(-10deg)}
.tri-charge-count i.done,.tri-wave-count i.done,.tri-pearl-count i.done{background:linear-gradient(90deg,#54efc1,#87ecff,#ffe678);border-color:#d9ffff;box-shadow:0 0 15px rgba(113,237,255,.55)}
.tri-question-card{position:absolute;z-index:7;left:25%;right:3%;bottom:18px;border-radius:26px;padding:22px 24px;background:rgba(2,25,38,.91);border:1px solid rgba(112,227,255,.28);box-shadow:0 16px 38px rgba(0,14,29,.28)}
.tri-question-card h2{margin:6px 0 10px;font-size:clamp(25px,2.5vw,38px);line-height:1.08}
.tri-equation{font-family:'Baloo 2',sans-serif;font-weight:800;font-size:clamp(34px,4vw,54px);line-height:1;text-align:center;color:white;text-shadow:0 0 16px rgba(99,225,255,.18);margin:6px 0 14px}
.tri-answer-grid{grid-template-columns:repeat(4,1fr)}
.tri-answer-grid .answer-core{min-height:78px}
.tri-hero-dock{position:absolute;z-index:6;left:3%;bottom:10px;width:20%;height:355px;display:flex;align-items:flex-end;justify-content:center;border-radius:28px;background:linear-gradient(180deg,rgba(4,38,49,.08),rgba(3,23,35,.50))}
.tri-hero-dock .player-sprite{width:170px;height:320px}
.tri-hero-dock .player-sprite img{object-fit:contain;object-position:center bottom}
.tri-ambient.caustics:after{content:'';position:absolute;inset:-30%;background:repeating-radial-gradient(ellipse at 30% 20%,rgba(173,248,255,.08) 0 4px,transparent 7px 32px);opacity:.45;animation:triCaustic 14s linear infinite}
@keyframes triCaustic{to{transform:translate(8%,5%) rotate(2deg)}}

/* ---------- Quest 1: Pearl Rescue ---------- */
.pearl-zone{position:absolute;z-index:5;left:25%;right:5%;top:18%;display:grid;grid-template-columns:repeat(4,1fr);gap:16px;align-items:center}
.pearl-pod{position:relative;min-height:190px;border-radius:50% 50% 44% 44%;display:grid;place-items:center;background:radial-gradient(circle at 46% 37%,rgba(255,255,255,.88),rgba(189,240,255,.38) 28%,rgba(91,165,215,.18) 55%,rgba(3,37,54,.56) 72%);border:1px solid rgba(221,252,255,.52);box-shadow:inset 0 0 35px rgba(255,255,255,.20),0 0 25px rgba(117,233,255,.18);transition:.55s ease}
.pearl-pod:before{content:'';position:absolute;inset:11% 18%;border-radius:50%;border:2px solid rgba(255,255,255,.20);animation:pearlPulse 2.4s ease-in-out infinite}
@keyframes pearlPulse{50%{transform:scale(1.08);opacity:.45}}
.pearl-creature{font-size:58px;filter:drop-shadow(0 7px 14px rgba(0,34,52,.42));transition:.55s ease}
.pearl-lock{position:absolute;bottom:20px;width:18px;height:18px;transform:rotate(45deg);background:#ad82ff;box-shadow:0 0 14px #b99aff}
.pearl-pod.burst{filter:brightness(1.7);box-shadow:0 0 70px rgba(255,243,157,.8),inset 0 0 50px rgba(255,255,255,.55);transform:scale(1.04)}
.pearl-pod.freed{background:rgba(0,75,87,.22);border-color:rgba(103,231,193,.35);box-shadow:none}
.pearl-pod.freed:before,.pearl-pod.freed .pearl-lock{opacity:0}
.pearl-pod.freed .pearl-creature{transform:translateY(-12px) scale(1.12);filter:drop-shadow(0 0 16px rgba(109,244,213,.65))}

/* ---------- Quest 2: Current Rider ---------- */
.tri-current-flow{position:absolute;z-index:2;left:-20%;right:-20%;top:22%;height:30%;background:repeating-linear-gradient(170deg,transparent 0 52px,rgba(127,243,255,.08) 54px 58px,transparent 61px 105px);animation:currentFlow 3.5s linear infinite}
@keyframes currentFlow{to{transform:translateX(12%)}}
.current-hero{position:absolute;z-index:7;left:4%;bottom:13%;width:170px;height:300px}
.current-hero .player-sprite{width:160px;height:290px}
.current-question{left:22%;right:4%;top:16%;bottom:auto;padding:16px 22px}
.current-question h2{font-size:26px;margin-bottom:2px}
.current-question .tri-equation{margin:2px 0;font-size:44px}
.current-lanes{position:absolute;z-index:6;left:23%;right:4%;bottom:9%;display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
.current-lane{position:relative;min-height:230px;border:1px solid rgba(131,233,255,.38);border-radius:30px;background:linear-gradient(180deg,rgba(19,91,132,.72),rgba(4,42,67,.88));color:white;overflow:hidden;box-shadow:inset 0 0 34px rgba(70,199,232,.08),0 12px 30px rgba(0,17,34,.26);transition:.25s ease}
.current-lane strong{display:block;font:800 42px/1 'Baloo 2',sans-serif;position:relative;z-index:3}
.current-lane span{display:block;margin-top:8px;font:800 11px/1 'Nunito',sans-serif;letter-spacing:.12em;color:#a6edff;position:relative;z-index:3}
.current-lane .wave-tail{position:absolute;left:-10%;right:-10%;bottom:18%;height:70px;border-radius:50%;background:linear-gradient(90deg,transparent,rgba(95,233,255,.42),rgba(255,255,255,.42),transparent);filter:blur(1px);animation:laneWater 2.2s linear infinite}
@keyframes laneWater{0%{transform:translateX(-18%) scaleY(.7)}50%{transform:translateX(8%) scaleY(1.05)}100%{transform:translateX(20%) scaleY(.7)}}
.current-lane.correct,.current-lane.current-live{border-color:#b8fff0;background:linear-gradient(180deg,rgba(57,214,180,.86),rgba(19,115,141,.9));box-shadow:0 0 35px rgba(86,241,210,.48)}
.current-lane.current-blocked{border-color:#ff7b7b;background:rgba(128,30,52,.78)}

/* ---------- Quest 3: Beacon ---------- */
.beacon-field{position:absolute;z-index:5;right:7%;top:15%;width:48%;height:350px;display:flex;align-items:flex-end;justify-content:center;gap:32px;filter:drop-shadow(0 0 24px rgba(88,229,255,.25))}
.beacon-tower{position:relative;width:100px;height:210px;border-radius:45px 45px 16px 16px;background:linear-gradient(180deg,rgba(244,253,255,.88),rgba(86,219,255,.62) 46%,rgba(255,213,90,.72) 82%,rgba(20,70,88,.65));border:2px solid rgba(237,255,255,.68);box-shadow:inset 0 0 26px rgba(255,255,255,.34),0 0 28px rgba(95,229,255,.26);transform-origin:50% 100%;animation:beaconIdle 2.8s ease-in-out infinite}
.beacon-tower.b2{height:260px;animation-delay:.25s}.beacon-tower.b3{animation-delay:.5s}
.beacon-tower i{position:absolute;left:50%;top:22px;width:28px;height:28px;border-radius:50%;transform:translateX(-50%);background:white;box-shadow:0 0 22px white,0 0 48px #72eaff}
.beacon-tower b{position:absolute;left:20%;right:20%;bottom:18px;height:8px;border-radius:999px;background:#ffe27b;box-shadow:0 0 18px #ffe27b}
@keyframes beaconIdle{50%{transform:translateY(-5px);filter:brightness(1.15)}}
.beacon-core{position:absolute;left:50%;top:42%;transform:translate(-50%,-50%);width:110px;height:110px;border-radius:50%;display:grid;place-items:center;background:radial-gradient(circle,#fff 0 10%,#6af1ff 22%,#2d75c8 48%,rgba(24,43,88,.45) 70%);border:3px solid rgba(223,254,255,.75);font:800 34px/1 'Baloo 2';box-shadow:0 0 40px rgba(92,233,255,.65)}
.beacon-field.charging{filter:brightness(1.5) drop-shadow(0 0 40px rgba(255,230,111,.75))}
.beacon-field.complete .beacon-core{background:radial-gradient(circle,#fff 0 13%,#ffe777 26%,#73efff 45%,#3c93d9 68%);box-shadow:0 0 55px #fff,0 0 90px rgba(255,224,102,.75)}
.beacon-meter{position:absolute;z-index:6;right:13%;top:61%;width:36%;display:grid;grid-template-columns:repeat(4,1fr);gap:8px}
.beacon-meter i{height:11px;border-radius:999px;background:rgba(129,207,218,.22);border:1px solid rgba(161,233,242,.18)}
.beacon-meter i.on{background:linear-gradient(90deg,#54e9bb,#74e8ff,#ffe372);box-shadow:0 0 16px rgba(109,238,216,.52)}
.beacon-hero{left:3%;width:22%;height:390px}
.beacon-question{left:27%;right:4%;bottom:18px}
.tri-ambient.beacon-pulse:after{content:'';position:absolute;width:45%;height:60%;right:10%;top:8%;border-radius:50%;background:radial-gradient(circle,rgba(255,235,132,.14),rgba(111,235,255,.08) 32%,transparent 65%);animation:beaconAura 2.6s ease-in-out infinite}
@keyframes beaconAura{50%{transform:scale(1.12);opacity:.6}}

/* ---------- Boss ---------- */
.tri-boss-stage{min-height:700px;background:#11163f;border-color:rgba(169,124,255,.30)}
.tri-boss-stage .tri-stage-bg:after{background:linear-gradient(180deg,rgba(8,14,53,.30),rgba(9,18,57,.46) 55%,rgba(4,16,34,.72))}
.vortex-spin{position:absolute;z-index:2;right:5%;top:8%;width:50%;aspect-ratio:1;border-radius:50%;background:repeating-radial-gradient(circle,transparent 0 34px,rgba(96,223,255,.07) 36px 43px,transparent 45px 66px);animation:vortexRotate 16s linear infinite}
@keyframes vortexRotate{to{transform:rotate(360deg)}}
.tri-boss-hud{position:absolute;z-index:7;left:3%;right:3%;top:18px;display:flex;justify-content:space-between;align-items:flex-start}
.tri-boss-hud>div{width:48%;font-family:'Nunito',sans-serif}.tri-boss-hud>div>span{font-size:18px}.tri-boss-hud small{display:block;margin-top:6px}
.tri-boss-hud .hp-bar{height:18px;margin-top:4px;border-radius:999px;background:#2d214f;border:2px solid rgba(255,255,255,.18);overflow:hidden}
.tri-boss-hud .hp-bar i{display:block;height:100%;background:linear-gradient(90deg,#ff778e,#ff9b67,#ffd06c);transition:width .35s ease}
.tri-battlefield{position:absolute;z-index:5;left:0;right:0;top:18%;bottom:27%}
.tri-battle-player{position:absolute;left:6%;bottom:0;width:230px;height:390px}
.tri-battle-player .player-sprite{width:220px;height:380px}
.trivortex{position:absolute;right:9%;bottom:10%;width:470px;height:330px;display:flex;align-items:center;justify-content:center;gap:14px;transition:.25s;filter:drop-shadow(0 0 30px rgba(127,100,255,.28))}
.vortex-head{width:126px;height:160px;border-radius:54% 54% 45% 45%;display:grid;place-items:center;font-size:58px;color:#ffe26b;background:radial-gradient(circle at 50% 25%,rgba(154,116,255,.42),rgba(31,34,91,.96) 66%);border:4px solid rgba(128,102,222,.55);box-shadow:inset 0 0 30px rgba(89,225,255,.08),0 0 25px rgba(151,105,255,.18)}
.vortex-head.h2{transform:translateY(-36px) scale(1.07)}
.vortex-core{position:absolute;left:50%;top:41%;transform:translate(-50%,-50%) rotate(45deg);width:36px;height:36px;background:#b182ff;box-shadow:0 0 30px #9f78ff}
.vortex-name{position:absolute;bottom:-5px;padding:8px 24px;border-radius:999px;background:rgba(8,29,52,.85);font-weight:900;letter-spacing:.08em;color:#bdf6ff}
.trivortex.hit{filter:brightness(1.8) drop-shadow(0 0 45px rgba(255,222,104,.75));transform:translateX(7px)}
.trivortex.counter{transform:translateX(-42px) scale(1.06)}
.trivortex.purifying{filter:brightness(2.1) saturate(.4);animation:triPurify .65s ease-in-out infinite alternate}
@keyframes triPurify{to{transform:scale(1.05);filter:brightness(2.6) saturate(.25)}}
.trivortex.freed .vortex-head{font-size:0;background:linear-gradient(180deg,#7de7ff,#52c2e8);border-color:#d9fdff;box-shadow:0 0 30px rgba(111,237,255,.46)}
.trivortex.freed .vortex-head:before{content:'🐬';font-size:78px;filter:drop-shadow(0 5px 10px rgba(0,35,58,.35))}
.trivortex.freed .vortex-core{background:#ffdf75;box-shadow:0 0 34px #ffe889}
.tri-impact{position:absolute;right:23%;top:35%;width:70px;height:70px;border-radius:50%;opacity:0;background:radial-gradient(circle,#fff,#ffe873 23%,rgba(111,235,255,.45) 49%,transparent 72%)}
.tri-impact.boom{opacity:1;animation:triImpact .55s ease-out}
@keyframes triImpact{from{transform:scale(.3)}to{transform:scale(2.1);opacity:0}}
.tri-boss-question{position:absolute;z-index:8;left:16%;right:5%;bottom:18px;padding:18px 22px;border-radius:28px;background:rgba(3,13,37,.91);border:1px solid rgba(151,112,242,.40);transition:.4s}
.tri-boss-question.fade-out{opacity:0;transform:translateY(18px)}
.tri-boss-question .tri-equation{margin:0 0 10px}
.tri-phase-transition div{background:linear-gradient(180deg,#124f79,#132653)!important}

.tri-result-card{border-color:rgba(104,226,255,.28)}
.tri-coverage-result{margin:18px 0;padding:14px 16px;border-radius:18px;background:rgba(39,194,218,.08);border:1px solid rgba(100,226,255,.18)}

/* ---------- Responsive: Tablet ---------- */
@media(max-width:1050px){
  .tri-route{left:4%;right:4%;grid-template-columns:1fr 42px 1fr 42px 1fr 42px 1fr}
  .tri-node{min-height:190px;padding:18px 12px}.tri-node strong{font-size:18px}.tri-node small{font-size:12px}
  .tri-intro-copy{max-width:54%}.tri-intro-avatar{right:2%;width:310px}.tri-intro-avatar .player-sprite{width:260px}
  .trivortex{right:2%;width:420px}.vortex-head{width:112px}.tri-battle-player{left:2%}
}

/* ---------- Responsive: Mobile portrait ---------- */
@media(max-width:720px){
  .triwave-shell .topbar{align-items:flex-start!important;gap:8px!important}
  .triwave-shell .topbar>.row{margin-left:8px!important;max-width:130px!important}
  .tri-topstats{flex-direction:column!important;align-items:stretch!important;gap:5px!important}
  .tri-topstats .tri-stat{min-width:118px!important;padding:6px 9px!important;font-size:12px!important;line-height:1!important}
  .triwave-shell~.sound-fab,.triwave-shell .sound-fab,.triwave-shell body .sound-fab{display:none!important}
  body:has(.triwave-shell) .sound-fab{display:none!important}

  .triwave-hero{min-height:730px;border-radius:26px;background-position:52% center}
  .tri-intro-copy{left:6%;right:6%;top:7%;max-width:none}
  .tri-intro-copy h1{font-size:52px;margin:8px 0 16px;max-width:90%}
  .tri-intro-copy p{font-size:18px;line-height:1.45;margin-bottom:18px;max-width:92%}
  .tri-intro-copy .realm-actions{width:58%;display:flex;flex-direction:column;gap:12px}
  .tri-intro-copy .realm-actions .btn{width:100%;min-height:64px}
  .tri-intro-avatar{right:-10%;bottom:-4%;width:58%;height:390px;opacity:.98}
  .tri-intro-avatar .player-sprite{width:240px;height:390px}
  .tri-intro-avatar .avatar-nameplate{display:none}

  .tri-map{min-height:920px;border-radius:26px;background-position:center}
  .tri-map-bg{background-position:52% center}
  .tri-map .tri-map-player{left:-2%;bottom:-1%;width:105px;height:175px}
  .tri-route{left:4%;right:4%;top:4%;bottom:6%;display:flex;flex-direction:column;justify-content:flex-start;gap:8px;overflow:hidden}
  .tri-node{width:100%;min-height:172px;flex:0 0 172px;border-radius:25px;padding:14px 18px}
  .tri-node .node-icon{font-size:36px}.tri-node strong{font-size:21px}.tri-node small{font-size:14px}
  .tri-route-line{width:10px;height:18px;flex:0 0 18px}
  .tri-map-actions{gap:10px}.tri-map-actions .btn{flex:1;min-width:0}

  .tri-game-stage,.tri-boss-stage{min-height:790px;border-radius:26px}
  .tri-stage-indicator{top:12px;min-width:220px;padding:8px 12px}
  .tri-hero-dock{left:3%;bottom:4%;width:30%;height:265px;border-radius:24px}
  .tri-hero-dock .player-sprite{width:120px;height:245px}
  .tri-question-card{left:33%;right:3%;bottom:16px;padding:16px 14px;border-radius:22px}
  .tri-question-card h2{font-size:22px;line-height:1.08;margin:4px 0 7px}
  .tri-equation{font-size:34px;margin:3px 0 10px}
  .tri-answer-grid{grid-template-columns:repeat(2,1fr);gap:10px}
  .tri-answer-grid .answer-core{min-height:68px;font-size:28px}

  .pearl-zone{left:4%;right:4%;top:14%;grid-template-columns:repeat(2,1fr);gap:10px}
  .pearl-pod{min-height:150px;border-radius:42px}.pearl-creature{font-size:47px}.pearl-lock{bottom:14px;width:14px;height:14px}
  .tri-pearl-stage .tri-question-card{left:31%;bottom:12px}
  .tri-pearl-stage .tri-hero-dock{bottom:10px}

  .current-question{left:4%;right:4%;top:13%;bottom:auto;padding:12px 14px}
  .current-question h2{font-size:20px}.current-question .tri-equation{font-size:36px}
  .current-hero{left:2%;bottom:4%;width:105px;height:205px}.current-hero .player-sprite{width:105px;height:200px}
  .current-lanes{left:23%;right:3%;bottom:3%;grid-template-columns:repeat(2,1fr);gap:10px}
  .current-lane{min-height:138px;border-radius:24px}.current-lane strong{font-size:34px}.current-lane span{font-size:10px}

  .beacon-field{right:4%;top:12%;width:92%;height:330px;gap:18px}
  .beacon-tower{width:70px;height:170px}.beacon-tower.b2{height:205px}
  .beacon-core{width:86px;height:86px;font-size:28px}
  .beacon-meter{right:8%;top:51%;width:84%;gap:5px}
  .beacon-hero{left:2%;bottom:2%;width:29%;height:260px}.beacon-hero .player-sprite{width:122px;height:245px}
  .beacon-question{left:31%;right:3%;bottom:12px}

  .tri-boss-stage{min-height:850px}
  .tri-boss-hud{left:4%;right:4%;top:10px}.tri-boss-hud>div{width:62%}.tri-boss-hud .phase-badge{font-size:16px;padding:16px 17px}
  .tri-battlefield{top:19%;bottom:35%}
  .tri-battle-player{left:2%;bottom:0;width:135px;height:280px}.tri-battle-player .player-sprite{width:130px;height:270px}
  .trivortex{right:0;bottom:13%;width:300px;height:245px;gap:5px}
  .vortex-head{width:82px;height:120px;font-size:42px;border-width:3px}.vortex-head.h2{transform:translateY(-24px) scale(1.04)}
  .vortex-core{width:28px;height:28px}.vortex-name{font-size:12px;bottom:5px;padding:6px 14px}
  .trivortex.freed .vortex-head:before{font-size:58px}
  .tri-boss-question{left:4%;right:4%;bottom:12px;padding:14px;border-radius:24px}
  .tri-boss-question .tri-equation{font-size:38px}
  .tri-boss-question .boss-answers{grid-template-columns:repeat(2,1fr);gap:10px}
  .tri-boss-question .boss-answers .answer-core{min-height:70px;font-size:27px}
  .tri-boss-question .boss-challenge-label{text-align:center;margin-top:8px}
}

@media(max-width:430px){
  .triwave-hero{min-height:700px}
  .tri-intro-copy h1{font-size:47px}.tri-intro-copy p{font-size:17px}.tri-intro-copy .realm-actions{width:65%}
  .tri-map{min-height:890px}.tri-node{min-height:164px;flex-basis:164px}
  .tri-game-stage{min-height:770px}
  .tri-stage-indicator{min-width:205px}
  .tri-question-card{left:32%}.tri-question-card h2{font-size:20px}.tri-equation{font-size:31px}
  .pearl-zone{top:13%}.pearl-pod{min-height:142px}.pearl-creature{font-size:43px}
  .current-question{top:12%}.current-lanes{left:25%}
  .beacon-field{top:11%;height:310px}.beacon-meter{top:49%}
  .tri-boss-stage{min-height:820px}.trivortex{width:280px}.tri-battle-player{width:120px}.tri-battle-player .player-sprite{width:118px}
}

/* No whole-screen shake/flicker: localized effects only. */
.triwave-shell,.triwave-shell .screen,.triwave-shell .container,.tri-game-stage,.tri-boss-stage{animation-name:none!important}
.tri-profile-card{border-color:rgba(98,212,255,.32)!important;background:linear-gradient(180deg,rgba(23,75,108,.26),rgba(9,29,61,.78))!important}

/* =========================================================
   v0.6.6-nombi-ui-fixes
   - match Twinwood intro button styling in Triwave
   - keep Triwave avatar size consistent with Twinwood
   - make Triwave map cards fit in mobile window like Twinwood
   ========================================================= */

/* Match Twinwood avatar scale */
.tri-intro-avatar{
  right:7%!important;
  bottom:0!important;
  width:min(310px,90%)!important;
  min-height:410px!important;
  height:auto!important;
}
.tri-intro-avatar .player-sprite{
  width:255px!important;
  height:400px!important;
}
.tri-map .tri-map-player{
  width:125px!important;
  height:190px!important;
  left:2%!important;
  bottom:14px!important;
}

/* Triwave intro buttons = Twinwood buttons */
.triwave-hero .realm-actions{
  display:flex!important;
  align-items:center!important;
  gap:16px!important;
  flex-wrap:wrap!important;
  margin-top:18px!important;
  position:relative!important;
  z-index:8!important;
}
.triwave-hero #enterTri,
.triwave-hero #backTriNexus,
.triwave-hero .btn-nexus-link{
  position:relative!important;
  overflow:hidden!important;
  border-radius:22px!important;
  min-height:64px!important;
  padding:16px 26px!important;
  font-weight:900!important;
  letter-spacing:.2px!important;
}
.triwave-hero #enterTri::before,
.triwave-hero #backTriNexus::before,
.triwave-hero .btn-nexus-link::before{
  content:"";
  position:absolute;
  left:10px;
  right:10px;
  top:4px;
  height:42%;
  border-radius:999px;
  pointer-events:none;
}
.triwave-hero #enterTri{
  background:linear-gradient(180deg,#ffef95 0%,#ffe06a 42%,#ffd247 43%,#f5bf28 100%)!important;
  color:#3b2700!important;
  border:1px solid rgba(136,91,0,.24)!important;
  box-shadow:
    0 9px 0 #bb8310,
    0 15px 24px rgba(172,118,13,.28),
    inset 0 2px 0 rgba(255,255,255,.62),
    inset 0 -4px 0 rgba(142,90,0,.16)!important;
}
.triwave-hero #enterTri::before{
  background:linear-gradient(180deg,rgba(255,255,255,.65),rgba(255,255,255,.08));
}
.triwave-hero #enterTri:hover{transform:translateY(-2px)!important}
.triwave-hero #enterTri:active{
  transform:translateY(4px)!important;
  box-shadow:
    0 5px 0 #bb8310,
    0 9px 14px rgba(172,118,13,.20),
    inset 0 2px 0 rgba(255,255,255,.54),
    inset 0 -3px 0 rgba(142,90,0,.14)!important;
}
.triwave-hero #backTriNexus,
.triwave-hero .btn-nexus-link{
  background:linear-gradient(180deg,#183760 0%,#143155 45%,#112a49 46%,#0d223d 100%)!important;
  color:#f7fbff!important;
  border:1px solid rgba(161,210,255,.26)!important;
  box-shadow:
    0 9px 0 #09182f,
    0 15px 24px rgba(4,13,28,.30),
    inset 0 2px 0 rgba(255,255,255,.14),
    inset 0 -4px 0 rgba(0,0,0,.18)!important;
}
.triwave-hero #backTriNexus::before,
.triwave-hero .btn-nexus-link::before{
  background:linear-gradient(180deg,rgba(255,255,255,.20),rgba(255,255,255,.03));
}
.triwave-hero #backTriNexus:hover,
.triwave-hero .btn-nexus-link:hover{transform:translateY(-2px)!important}
.triwave-hero #backTriNexus:active,
.triwave-hero .btn-nexus-link:active{
  transform:translateY(4px)!important;
  box-shadow:
    0 5px 0 #09182f,
    0 9px 14px rgba(4,13,28,.20),
    inset 0 2px 0 rgba(255,255,255,.10),
    inset 0 -3px 0 rgba(0,0,0,.16)!important;
}

/* Mobile = follow Twinwood behaviour */
@media(max-width:720px){
  .triwave-hero{
    min-height:620px!important;
    padding:20px 18px 20px!important;
    background-position:52% center!important;
  }
  .tri-intro-copy{
    left:6%!important;
    right:6%!important;
    top:7%!important;
    max-width:none!important;
  }
  .tri-intro-copy h1{font-size:47px!important;margin:4px 0 12px!important;max-width:90%!important}
  .tri-intro-copy p{font-size:15px!important;line-height:1.5!important;margin:0 0 12px!important;max-width:92%!important}
  .tri-intro-copy .realm-actions{
    flex-direction:column!important;
    align-items:flex-start!important;
    gap:10px!important;
    width:100%!important;
    margin-top:14px!important;
  }
  .tri-intro-copy .realm-actions .btn{
    width:auto!important;
    min-width:210px!important;
  }
  .tri-intro-avatar{
    width:170px!important;
    min-height:auto!important;
    height:260px!important;
    right:0!important;
    bottom:0!important;
    opacity:.52!important;
  }
  .tri-intro-avatar .player-sprite{
    width:170px!important;
    height:260px!important;
  }
  .tri-intro-avatar .avatar-nameplate{display:none!important}

  .tri-map{
    min-height:780px!important;
    padding-bottom:72px!important;
    border-radius:26px!important;
  }
  .tri-map .tri-map-player{display:none!important}
  .tri-route{
    grid-template-columns:1fr!important;
    inset:25px 12% 48px!important;
    overflow:auto!important;
    align-content:start!important;
    display:grid!important;
    gap:8px!important;
    top:auto!important;
    left:auto!important;
    right:auto!important;
    bottom:auto!important;
  }
  .tri-route-line{
    width:8px!important;
    height:30px!important;
    justify-self:center!important;
  }
  .tri-node{
    min-height:120px!important;
    width:auto!important;
    flex:none!important;
    border-radius:25px!important;
    padding:18px 12px!important;
  }
  .tri-node strong{font-size:19px!important}
  .tri-node small{font-size:12px!important}
  .tri-map-actions{margin-top:20px!important;gap:10px!important}
  .tri-map-actions .btn{flex:1!important;min-width:0!important}
}

@media(max-width:430px){
  .tri-intro-copy h1{font-size:44px!important}
  .tri-intro-copy p{font-size:15px!important}
  .tri-intro-copy .realm-actions .btn{min-width:190px!important}
  .tri-map{min-height:760px!important}
}

/* =========================================================
   v0.6.7-triwave-quest-layout-lock
   - remove Nombi from Triwave Quest Map
   - quest pages: viewport-safe single-view layout
   - plain blue dual-tone stage + floating bubbles
   - larger avatar, smaller cleaner question card
   ========================================================= */

/* 1) Triwave Quest Map: no map avatar */
.tri-map .tri-map-player{display:none!important}

/* 2) Shared Quest Stage layout */
.tri-game-stage{
  min-height:clamp(540px,calc(100dvh - 205px),620px)!important;
  background:linear-gradient(180deg,#143a67 0%,#0c2244 100%)!important;
  border-radius:28px!important;
}
.tri-stage-bg,
.tri-stage-bg.pearl,
.tri-stage-bg.current,
.tri-stage-bg.beacon{
  inset:0!important;
  background-image:none!important;
  background:
    radial-gradient(circle at 20% 18%,rgba(123,215,255,.18),transparent 22%),
    radial-gradient(circle at 80% 22%,rgba(80,180,255,.14),transparent 20%),
    linear-gradient(180deg,#173f70 0%,#0f2b55 52%,#0b2144 100%)!important;
}
.tri-stage-bg:after{
  content:'';
  position:absolute;
  inset:0;
  background:
    linear-gradient(180deg,rgba(255,255,255,.05),transparent 20%,transparent 80%,rgba(0,0,0,.08)),
    linear-gradient(180deg,rgba(2,10,25,.04),rgba(2,10,25,.12));
}
.tri-ambient.caustics:after{display:none!important}
.tri-ambient.bubbles:before{
  opacity:.78!important;
  animation:triBubbleDrift 13s linear infinite!important;
}
.tri-game-stage::before,
.tri-game-stage::after{
  content:'';
  position:absolute;
  inset:auto;
  border-radius:50%;
  pointer-events:none;
  z-index:1;
  opacity:.26;
}
.tri-game-stage::before{
  width:220px;height:220px;left:4%;bottom:-60px;
  background:radial-gradient(circle,rgba(109,215,255,.32) 0,rgba(109,215,255,.10) 45%,transparent 70%);
}
.tri-game-stage::after{
  width:180px;height:180px;right:7%;top:62px;
  background:radial-gradient(circle,rgba(146,235,255,.24) 0,rgba(146,235,255,.08) 40%,transparent 68%);
}
.tri-stage-indicator{
  top:14px!important;
  min-width:250px!important;
  padding:8px 16px!important;
  background:rgba(8,26,50,.72)!important;
}
.tri-stage-indicator>span{margin-bottom:5px!important}

/* 3) Avatar dock bigger and cleaner */
.tri-hero-dock{
  left:18px!important;
  bottom:18px!important;
  width:190px!important;
  height:265px!important;
  background:linear-gradient(180deg,rgba(255,255,255,.04),rgba(255,255,255,.02))!important;
  border:1px solid rgba(150,229,255,.16)!important;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.03)!important;
}
.tri-hero-dock .player-sprite{
  width:170px!important;
  height:245px!important;
}
.beacon-hero{width:200px!important;height:275px!important;left:18px!important;bottom:18px!important}
.beacon-hero .player-sprite{width:176px!important;height:252px!important}
.current-hero{
  left:18px!important;
  bottom:16px!important;
  width:145px!important;
  height:245px!important;
}
.current-hero .player-sprite{width:136px!important;height:228px!important}

/* 4) Question card smaller, clearer, inside one-view */
.tri-question-card{
  left:220px!important;
  right:18px!important;
  bottom:18px!important;
  padding:14px 18px!important;
  border-radius:22px!important;
  background:rgba(4,20,41,.86)!important;
  backdrop-filter:blur(8px)!important;
  box-shadow:0 10px 26px rgba(0,11,24,.22)!important;
}
.tri-question-card .eyebrow{font-size:12px!important;letter-spacing:.16em!important}
.tri-question-card h2{
  margin:4px 0 8px!important;
  font-size:clamp(20px,2vw,30px)!important;
  line-height:1.16!important;
}
.tri-equation{
  margin:4px 0 10px!important;
  font-size:clamp(28px,3.3vw,44px)!important;
}
.tri-answer-grid{gap:10px!important}
.tri-answer-grid .answer-core{
  min-height:60px!important;
  font-size:28px!important;
}

/* Pearl quest arrangement */
.pearl-zone{
  left:230px!important;
  right:18px!important;
  top:88px!important;
  grid-template-columns:repeat(4,1fr)!important;
  gap:12px!important;
}
.pearl-pod{min-height:145px!important}
.pearl-creature{font-size:52px!important}
.tri-pearl-stage .tri-question-card{left:230px!important;bottom:18px!important}

/* Current quest arrangement */
.current-question{
  left:180px!important;
  right:18px!important;
  top:86px!important;
  bottom:auto!important;
}
.current-question h2{font-size:clamp(19px,1.7vw,26px)!important}
.current-question .tri-equation{font-size:clamp(28px,3.1vw,42px)!important}
.current-lanes{
  left:180px!important;
  right:18px!important;
  bottom:18px!important;
  gap:10px!important;
}
.current-lane{min-height:110px!important;border-radius:22px!important}
.current-lane strong{font-size:32px!important}

/* Beacon quest arrangement */
.beacon-field{
  right:20px!important;
  top:78px!important;
  width:50%!important;
  height:230px!important;
  gap:20px!important;
}
.beacon-meter{right:22px!important;top:315px!important;width:46%!important}
.beacon-question{
  left:240px!important;
  right:18px!important;
  bottom:18px!important;
}

/* 5) Mobile single-view */
@media(max-width:720px){
  .tri-game-stage{
    min-height:calc(100dvh - 150px)!important;
    max-height:calc(100dvh - 150px)!important;
    border-radius:24px!important;
  }
  .tri-stage-indicator{
    top:10px!important;
    min-width:200px!important;
    padding:7px 12px!important;
  }
  .tri-hero-dock,
  .beacon-hero{
    left:10px!important;
    bottom:10px!important;
    width:118px!important;
    height:190px!important;
    border-radius:18px!important;
  }
  .tri-hero-dock .player-sprite,
  .beacon-hero .player-sprite{
    width:112px!important;
    height:165px!important;
  }
  .current-hero{
    left:10px!important;
    bottom:10px!important;
    width:96px!important;
    height:175px!important;
  }
  .current-hero .player-sprite{width:94px!important;height:160px!important}
  .tri-question-card,
  .tri-pearl-stage .tri-question-card,
  .beacon-question{
    left:136px!important;
    right:10px!important;
    bottom:10px!important;
    padding:10px 12px!important;
    border-radius:18px!important;
  }
  .tri-question-card h2{font-size:18px!important;line-height:1.18!important;margin:2px 0 5px!important}
  .tri-equation{font-size:28px!important;margin:2px 0 8px!important}
  .tri-answer-grid{grid-template-columns:repeat(2,1fr)!important;gap:8px!important}
  .tri-answer-grid .answer-core{min-height:52px!important;font-size:24px!important}

  .pearl-zone{
    left:136px!important;
    right:10px!important;
    top:82px!important;
    grid-template-columns:repeat(2,1fr)!important;
    gap:8px!important;
  }
  .pearl-pod{min-height:95px!important}
  .pearl-creature{font-size:34px!important}

  .current-question{
    left:136px!important;
    right:10px!important;
    top:80px!important;
  }
  .current-lanes{
    left:136px!important;
    right:10px!important;
    bottom:10px!important;
    grid-template-columns:repeat(2,1fr)!important;
    gap:8px!important;
  }
  .current-lane{min-height:86px!important}
  .current-lane strong{font-size:25px!important}
  .current-lane span{font-size:9px!important}

  .beacon-field{
    right:10px!important;
    top:76px!important;
    width:calc(100% - 146px)!important;
    height:175px!important;
    gap:10px!important;
  }
  .beacon-tower{width:44px!important;height:110px!important}
  .beacon-tower.b2{height:132px!important}
  .beacon-core{width:54px!important;height:54px!important;font-size:18px!important}
  .beacon-meter{right:10px!important;top:250px!important;width:calc(100% - 146px)!important}
}

@media(max-width:430px){
  .tri-game-stage{min-height:calc(100dvh - 138px)!important;max-height:calc(100dvh - 138px)!important}
  .tri-stage-indicator{min-width:186px!important}
  .tri-hero-dock,.beacon-hero{width:104px!important;height:180px!important}
  .tri-hero-dock .player-sprite,.beacon-hero .player-sprite{width:100px!important;height:154px!important}
  .current-hero{width:88px!important;height:164px!important}.current-hero .player-sprite{width:84px!important;height:148px!important}
  .tri-question-card,.tri-pearl-stage .tri-question-card,.beacon-question,.current-question{left:120px!important;right:8px!important}
  .pearl-zone{left:120px!important;right:8px!important;gap:7px!important}
  .current-lanes{left:120px!important;right:8px!important}
  .beacon-field{width:calc(100% - 128px)!important;right:8px!important}
  .beacon-meter{width:calc(100% - 128px)!important;right:8px!important}
}


/* =========================================================
   v0.6.10-quest-tune
   - restore locked intro/map behaviour
   - tune quest page hierarchy and color
   - bigger hero, smaller question/answers, stronger quest heading
   ========================================================= */

/* stronger quest heading / purpose */
.tri-mission-top .mission-heading strong{font-size:clamp(28px,2.35vw,38px)!important;line-height:1.02!important}
.tri-mission-top .mission-heading small{font-size:clamp(15px,1.18vw,20px)!important;line-height:1.2!important;color:#ddf4ff!important;opacity:.98!important}
.tri-mission-top .eyebrow{font-size:14px!important;letter-spacing:.15em!important}
.tri-mission-top .mission-progress>span{font-size:clamp(22px,2vw,32px)!important}
.tri-mission-top .mini-xp{font-size:15px!important;color:#d7eeff!important}

/* more dynamic stage tone */
.tri-game-stage{
  min-height:clamp(540px,calc(100dvh - 205px),620px)!important;
  background:linear-gradient(140deg,#16355f 0%,#142b52 30%,#1a4a61 70%,#2a3364 100%)!important;
}
.tri-stage-bg,.tri-stage-bg.pearl,.tri-stage-bg.current,.tri-stage-bg.beacon{
  background-image:none!important;
  background:
    radial-gradient(circle at 16% 14%,rgba(116,233,255,.24),transparent 20%),
    radial-gradient(circle at 80% 18%,rgba(166,124,255,.18),transparent 18%),
    radial-gradient(circle at 70% 78%,rgba(255,181,111,.12),transparent 18%),
    linear-gradient(180deg,#244f7a 0%,#204364 28%,#1b5067 62%,#182f52 100%)!important;
}
.tri-stage-bg:after{
  background:
    radial-gradient(circle at 50% 0%,rgba(255,255,255,.06),transparent 30%),
    linear-gradient(180deg,rgba(255,255,255,.04),transparent 18%,transparent 82%,rgba(0,0,0,.09)),
    linear-gradient(180deg,rgba(4,12,26,.03),rgba(4,12,26,.14));
}
.tri-game-stage::before{
  width:250px;height:250px;left:3%;bottom:-75px;opacity:.30;
  background:radial-gradient(circle,rgba(84,226,255,.26) 0,rgba(84,226,255,.09) 46%,transparent 72%);
}
.tri-game-stage::after{
  width:210px;height:210px;right:6%;top:54px;opacity:.22;
  background:radial-gradient(circle,rgba(187,124,255,.20) 0,rgba(187,124,255,.08) 42%,transparent 70%);
}

/* bigger Nombi */
.tri-hero-dock{left:18px!important;bottom:18px!important;width:208px!important;height:282px!important}
.tri-hero-dock .player-sprite{width:188px!important;height:262px!important}
.beacon-hero{width:212px!important;height:286px!important;left:18px!important;bottom:18px!important}
.beacon-hero .player-sprite{width:190px!important;height:266px!important}
.current-hero{left:18px!important;bottom:16px!important;width:154px!important;height:254px!important}
.current-hero .player-sprite{width:146px!important;height:236px!important}

/* question card smaller & cleaner */
.tri-question-card{
  left:238px!important;
  right:18px!important;
  bottom:18px!important;
  padding:12px 16px!important;
  border-radius:24px!important;
  background:linear-gradient(135deg,rgba(3,19,41,.92),rgba(9,39,66,.88))!important;
  border:1px solid rgba(127,224,255,.22)!important;
  box-shadow:0 12px 28px rgba(0,10,22,.22)!important;
}
.tri-question-card .eyebrow{font-size:11px!important;letter-spacing:.16em!important}
.tri-question-card h2{margin:3px 0 6px!important;font-size:clamp(17px,1.7vw,24px)!important;line-height:1.14!important}
.tri-equation{margin:2px 0 8px!important;font-size:clamp(24px,2.7vw,38px)!important;line-height:1.02!important}
.tri-answer-grid{gap:8px!important}
.tri-answer-grid .answer-core{min-height:54px!important;font-size:24px!important;border-radius:18px!important}

/* pearl layout */
.pearl-zone{left:238px!important;right:18px!important;top:84px!important;gap:12px!important}
.pearl-pod{min-height:142px!important}
.pearl-creature{font-size:50px!important}
.tri-pearl-stage .tri-question-card{left:238px!important;bottom:18px!important}

/* current layout */
.current-question{left:188px!important;right:18px!important;top:84px!important;padding:12px 16px!important}
.current-question h2{font-size:clamp(17px,1.55vw,23px)!important}
.current-question .tri-equation{font-size:clamp(24px,2.5vw,36px)!important}
.current-lanes{left:188px!important;right:18px!important;bottom:18px!important;gap:10px!important}
.current-lane{min-height:102px!important;border-radius:20px!important}
.current-lane strong{font-size:28px!important}
.current-lane span{font-size:10px!important}

/* beacon layout */
.beacon-field{right:20px!important;top:74px!important;width:49%!important;height:224px!important}
.beacon-meter{right:22px!important;top:304px!important;width:46%!important}
.beacon-question{left:248px!important;right:18px!important;bottom:18px!important}

@media(max-width:720px){
  .tri-mission-top .mission-heading strong{font-size:26px!important}
  .tri-mission-top .mission-heading small{font-size:16px!important}
  .tri-game-stage{min-height:calc(100dvh - 150px)!important;max-height:calc(100dvh - 150px)!important}
  .tri-hero-dock,.beacon-hero{left:10px!important;bottom:10px!important;width:126px!important;height:202px!important}
  .tri-hero-dock .player-sprite,.beacon-hero .player-sprite{width:120px!important;height:176px!important}
  .current-hero{left:10px!important;bottom:10px!important;width:104px!important;height:184px!important}
  .current-hero .player-sprite{width:100px!important;height:168px!important}
  .tri-question-card,.tri-pearl-stage .tri-question-card,.beacon-question{left:144px!important;right:10px!important;bottom:10px!important;padding:10px 12px!important}
  .tri-question-card h2{font-size:17px!important;line-height:1.15!important;margin:2px 0 4px!important}
  .tri-equation{font-size:25px!important;margin:2px 0 7px!important}
  .tri-answer-grid{gap:7px!important}
  .tri-answer-grid .answer-core{min-height:48px!important;font-size:22px!important}
  .pearl-zone{left:144px!important;right:10px!important;top:78px!important;gap:8px!important}
  .pearl-pod{min-height:92px!important}.pearl-creature{font-size:33px!important}
  .current-question{left:144px!important;right:10px!important;top:76px!important}
  .current-lanes{left:144px!important;right:10px!important;bottom:10px!important;gap:8px!important}
  .current-lane{min-height:82px!important}.current-lane strong{font-size:23px!important}
  .beacon-field{right:10px!important;top:74px!important;width:calc(100% - 154px)!important;height:170px!important}
  .beacon-meter{right:10px!important;top:244px!important;width:calc(100% - 154px)!important}
}

@media(max-width:430px){
  .tri-game-stage{min-height:calc(100dvh - 138px)!important;max-height:calc(100dvh - 138px)!important}
  .tri-mission-top .mission-heading strong{font-size:24px!important}
  .tri-mission-top .mission-heading small{font-size:15px!important}
  .tri-hero-dock,.beacon-hero{width:112px!important;height:188px!important}
  .tri-hero-dock .player-sprite,.beacon-hero .player-sprite{width:106px!important;height:162px!important}
  .current-hero{width:92px!important;height:170px!important}.current-hero .player-sprite{width:88px!important;height:154px!important}
  .tri-question-card,.tri-pearl-stage .tri-question-card,.beacon-question,.current-question{left:128px!important;right:8px!important}
  .pearl-zone{left:128px!important;right:8px!important;top:76px!important}
  .current-lanes{left:128px!important;right:8px!important}
  .beacon-field{width:calc(100% - 136px)!important;right:8px!important}
  .beacon-meter{width:calc(100% - 136px)!important;right:8px!important}
}

/* =========================================================
   v0.6.11 — Twinwood intro parity + normalized Nombi runtime
   ========================================================= */

/* Realm ×3 intro: use the exact Twinwood structure/scale/position.
   Only the realm artwork/theme is different. */
.twinwood-hero.triwave-hero.triwave-twinwood-lock{
  min-height:600px!important;
  position:relative!important;
  overflow:hidden!important;
  border-radius:30px!important;
  border:1px solid rgba(121,230,255,.30)!important;
  box-shadow:var(--shadow)!important;
  display:grid!important;
  grid-template-columns:1.15fr .85fr!important;
  align-items:center!important;
  padding:clamp(26px,5vw,58px)!important;
  isolation:isolate!important;
  background:
    linear-gradient(90deg,rgba(4,27,45,.88) 0%,rgba(4,31,46,.60) 48%,rgba(4,26,43,.12) 78%),
    url('../images/triwave-lagoon-bg.webp?v=0.6.11') center/cover no-repeat!important;
}
.twinwood-hero.triwave-hero.triwave-twinwood-lock .realm-copy{
  position:relative!important;
  z-index:4!important;
  max-width:590px!important;
}
.twinwood-hero.triwave-hero.triwave-twinwood-lock .realm-copy h1{
  font:800 clamp(42px,6vw,70px) "Baloo 2"!important;
  line-height:.95!important;
  margin:8px 0 14px!important;
  letter-spacing:normal!important;
}
.twinwood-hero.triwave-hero.triwave-twinwood-lock .realm-copy p{
  font-size:18px!important;
  line-height:1.55!important;
  color:#e5f7f5!important;
  margin-bottom:0!important;
  max-width:590px!important;
}
.twinwood-hero.triwave-hero.triwave-twinwood-lock .realm-avatar{
  position:relative!important;
  z-index:4!important;
  align-self:end!important;
  justify-self:center!important;
  right:auto!important;
  bottom:auto!important;
  width:min(310px,90%)!important;
  min-height:410px!important;
  height:auto!important;
  opacity:1!important;
  display:grid!important;
  place-items:end center!important;
}
.twinwood-hero.triwave-hero.triwave-twinwood-lock .realm-avatar .player-sprite.hero-pose{
  width:255px!important;
  height:400px!important;
}
.twinwood-hero.triwave-hero.triwave-twinwood-lock .realm-avatar .avatar-nameplate{
  bottom:15px!important;
}

/* Normalized action frames: same visual scale across IDLE / RUN / CAST / HIT. */
.player-sprite[data-avatar-id="nombi"][data-sprite-mode="animated"] .player-frame{
  width:100%!important;
  height:100%!important;
  object-fit:contain!important;
  object-position:center bottom!important;
  transform:none!important;
}

/* Quest hero = normal readable gameplay scale. */
.tri-hero-dock{
  left:18px!important;
  bottom:18px!important;
  width:230px!important;
  height:305px!important;
}
.tri-hero-dock .player-sprite{
  width:215px!important;
  height:288px!important;
}
.beacon-hero{
  left:18px!important;
  bottom:18px!important;
  width:230px!important;
  height:305px!important;
}
.beacon-hero .player-sprite{
  width:215px!important;
  height:288px!important;
}
.current-hero{
  left:18px!important;
  bottom:16px!important;
  width:180px!important;
  height:285px!important;
}
.current-hero .player-sprite{
  width:170px!important;
  height:270px!important;
}

/* Keep question clear of the larger hero. */
.tri-question-card,
.tri-pearl-stage .tri-question-card{
  left:258px!important;
}
.pearl-zone{left:258px!important}
.beacon-question{left:258px!important}
.current-question,.current-lanes{left:205px!important}

@media(max-width:900px){
  .twinwood-hero.triwave-hero.triwave-twinwood-lock{
    grid-template-columns:1fr!important;
    min-height:760px!important;
  }
  .twinwood-hero.triwave-hero.triwave-twinwood-lock .realm-avatar{
    position:absolute!important;
    right:0!important;
    bottom:0!important;
    opacity:.6!important;
    width:220px!important;
    min-height:0!important;
  }
}

@media(max-width:720px){
  .twinwood-hero.triwave-hero.triwave-twinwood-lock{
    min-height:710px!important;
    padding:22px 18px!important;
  }
  .twinwood-hero.triwave-hero.triwave-twinwood-lock .realm-copy h1{font-size:44px!important}
  .twinwood-hero.triwave-hero.triwave-twinwood-lock .realm-copy p{font-size:15px!important}
  .twinwood-hero.triwave-hero.triwave-twinwood-lock .realm-avatar{
    width:170px!important;
    opacity:.45!important;
  }
  .twinwood-hero.triwave-hero.triwave-twinwood-lock .realm-avatar .player-sprite.hero-pose{
    width:170px!important;
    height:265px!important;
  }

  .tri-hero-dock,.beacon-hero{
    left:10px!important;
    bottom:10px!important;
    width:142px!important;
    height:220px!important;
  }
  .tri-hero-dock .player-sprite,.beacon-hero .player-sprite{
    width:136px!important;
    height:205px!important;
  }
  .current-hero{
    left:10px!important;
    bottom:10px!important;
    width:116px!important;
    height:205px!important;
  }
  .current-hero .player-sprite{width:110px!important;height:190px!important}
  .tri-question-card,.tri-pearl-stage .tri-question-card,.beacon-question{left:158px!important}
  .pearl-zone{left:158px!important}
  .current-question,.current-lanes{left:132px!important}
}

@media(max-width:430px){
  .tri-hero-dock,.beacon-hero{width:126px!important;height:205px!important}
  .tri-hero-dock .player-sprite,.beacon-hero .player-sprite{width:120px!important;height:190px!important}
  .current-hero{width:104px!important;height:190px!important}.current-hero .player-sprite{width:98px!important;height:176px!important}
  .tri-question-card,.tri-pearl-stage .tri-question-card,.beacon-question{left:140px!important}
  .pearl-zone{left:140px!important}
  .current-question,.current-lanes{left:118px!important}
}

/* =========================================================
   v0.6.12-current-rider-ui-lock
   Quest 2 follows Quest 1 sizing/hierarchy exactly:
   - same Nombi dock + sprite scale
   - same question card dimensions/type scale
   - same 4 answer button dimensions
   ========================================================= */

.current-routes{
  position:absolute;
  z-index:5;
  left:258px;
  right:18px;
  top:84px;
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:12px;
  align-items:stretch;
}
.current-route{
  position:relative;
  min-height:142px;
  border-radius:28px;
  border:1px solid rgba(129,232,255,.34);
  background:
    linear-gradient(180deg,rgba(43,128,166,.48),rgba(7,48,78,.72)),
    radial-gradient(circle at 50% 16%,rgba(170,244,255,.18),transparent 36%);
  box-shadow:inset 0 0 30px rgba(71,204,239,.08),0 12px 26px rgba(0,15,29,.18);
  overflow:hidden;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:9px;
  color:#dffbff;
}
.current-route::before,
.current-route::after{
  content:'';
  position:absolute;
  left:-20%;
  width:140%;
  height:24px;
  border-radius:50%;
  background:linear-gradient(90deg,transparent,rgba(118,235,255,.28),rgba(255,255,255,.22),rgba(118,235,255,.28),transparent);
  filter:blur(.3px);
  animation:currentRouteFlow 2.7s linear infinite;
}
.current-route::before{bottom:31px}
.current-route::after{bottom:61px;animation-delay:-1.25s;opacity:.7}
.current-route .current-arrow{
  position:relative;
  z-index:2;
  font-style:normal;
  font-size:34px;
  line-height:1;
  color:#83efff;
  text-shadow:0 0 18px rgba(91,227,255,.45);
  animation:currentArrowPulse 1.6s ease-in-out infinite;
}
.current-route>span{
  position:relative;
  z-index:2;
  font:900 12px/1 'Nunito',sans-serif;
  letter-spacing:.16em;
  color:#d8faff;
}
.current-route.current-live{
  border-color:#a6ffe9;
  background:linear-gradient(180deg,rgba(55,203,183,.55),rgba(10,83,105,.82));
  box-shadow:0 0 32px rgba(85,239,214,.32),inset 0 0 28px rgba(101,247,222,.12);
}
.current-route.current-blocked{
  border-color:#ff8c9b;
  background:linear-gradient(180deg,rgba(132,47,78,.64),rgba(64,23,48,.82));
}
@keyframes currentRouteFlow{
  from{transform:translateX(-5%)}
  to{transform:translateX(9%)}
}
@keyframes currentArrowPulse{
  0%,100%{transform:translateX(-3px);opacity:.75}
  50%{transform:translateX(5px);opacity:1}
}

/* Quest 2 deliberately inherits Quest 1's locked sizing. */
.current-hero-dock{
  left:18px!important;
  bottom:18px!important;
  width:230px!important;
  height:305px!important;
}
.current-hero-dock .player-sprite{
  width:215px!important;
  height:288px!important;
}
.current-question-card{
  left:258px!important;
  right:18px!important;
  bottom:18px!important;
  top:auto!important;
}

@media(max-width:720px){
  .current-routes{
    left:158px;
    right:10px;
    top:78px;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:8px;
  }
  .current-route{min-height:92px;border-radius:20px;gap:4px}
  .current-route .current-arrow{font-size:25px}
  .current-route>span{font-size:9px}
  .current-hero-dock{
    left:10px!important;
    bottom:10px!important;
    width:142px!important;
    height:220px!important;
  }
  .current-hero-dock .player-sprite{
    width:136px!important;
    height:205px!important;
  }
  .current-question-card{
    left:158px!important;
    right:10px!important;
    bottom:10px!important;
  }
}

@media(max-width:430px){
  .current-routes{left:140px;right:8px;top:76px;gap:7px}
  .current-route{min-height:86px}
  .current-hero-dock{width:126px!important;height:205px!important}
  .current-hero-dock .player-sprite{width:120px!important;height:190px!important}
  .current-question-card{left:140px!important;right:8px!important}
}


/* =========================================================
   v0.6.14-boss-exact-cast
   Boss only. Quest 1 + Quest 2 remain locked.
   ========================================================= */
.tri-boss-stage{
  height:clamp(520px,calc(100dvh - 190px),610px)!important;
  min-height:0!important;
  max-height:610px!important;
}
.tri-boss-hud{top:14px!important;left:3%!important;right:3%!important}
.tri-battlefield{top:17%!important;bottom:29%!important}
.tri-battle-player{left:5%!important;bottom:0!important;width:205px!important;height:340px!important}
.tri-battle-player .player-sprite{width:205px!important;height:340px!important}
.trivortex{right:6%!important;bottom:8%!important;width:430px!important;height:300px!important}
.tri-boss-question{
  left:17%!important;
  right:4%!important;
  bottom:12px!important;
  padding:12px 16px 14px!important;
  border-radius:24px!important;
}
.tri-boss-question .tri-equation{font-size:clamp(30px,3.2vw,44px)!important;margin:0 0 7px!important}
.tri-boss-question .boss-answers{gap:9px!important;margin:5px 0 0!important}
.tri-boss-question .boss-answers .answer-core{min-height:58px!important;font-size:28px!important}
.tri-boss-question .boss-challenge-label{font-size:11px!important;margin-top:6px!important}
.tri-cast-hidden{visibility:hidden!important}
.tri-boss-cast-overlay{
  position:fixed;
  z-index:120;
  object-fit:fill;
  object-position:0 0;
  pointer-events:none;
  user-select:none;
  filter:drop-shadow(0 0 9px rgba(255,183,61,.18));
}
.trivortex.attack-hit{animation:triBossExactImpact .42s ease-out}
@keyframes triBossExactImpact{
  0%{transform:translateX(0) scale(1);filter:brightness(1)}
  32%{transform:translateX(12px) scale(1.035);filter:brightness(2) drop-shadow(0 0 52px rgba(255,229,105,.9))}
  100%{transform:translateX(0) scale(1);filter:brightness(1)}
}
@media(max-width:1050px){
  .tri-boss-stage{height:clamp(500px,calc(100dvh - 180px),590px)!important;max-height:590px!important}
  .tri-battlefield{top:18%!important;bottom:31%!important}
  .tri-battle-player{left:3%!important;width:180px!important;height:305px!important}
  .tri-battle-player .player-sprite{width:180px!important;height:305px!important}
  .trivortex{right:2%!important;width:370px!important;height:270px!important}
  .tri-boss-question{left:14%!important}
}
@media(max-width:720px){
  .tri-boss-stage{
    height:calc(100dvh - 150px)!important;
    min-height:0!important;
    max-height:calc(100dvh - 150px)!important;
    border-radius:24px!important;
  }
  .tri-boss-hud{top:9px!important;left:3%!important;right:3%!important}
  .tri-boss-hud>div{width:58%!important}
  .tri-battlefield{top:17%!important;bottom:35%!important}
  .tri-battle-player{left:1%!important;width:125px!important;height:230px!important}
  .tri-battle-player .player-sprite{width:125px!important;height:230px!important}
  .trivortex{right:-1%!important;bottom:10%!important;width:285px!important;height:225px!important}
  .vortex-head{width:78px!important;height:112px!important;font-size:40px!important}
  .vortex-head.h2{transform:translateY(-22px) scale(1.04)!important}
  .vortex-name{bottom:4px!important}
  .tri-boss-question{left:3%!important;right:3%!important;bottom:8px!important;padding:10px 11px 11px!important;border-radius:20px!important}
  .tri-boss-question .tri-equation{font-size:30px!important;margin-bottom:6px!important}
  .tri-boss-question .boss-answers{grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:7px!important}
  .tri-boss-question .boss-answers .answer-core{min-height:50px!important;font-size:23px!important;border-radius:16px!important}
  .tri-boss-question .boss-challenge-label{font-size:10px!important;margin-top:5px!important}
}
@media(max-width:430px){
  .tri-boss-stage{height:calc(100dvh - 138px)!important;max-height:calc(100dvh - 138px)!important}
  .tri-battle-player{width:112px!important;height:205px!important}.tri-battle-player .player-sprite{width:112px!important;height:205px!important}
  .trivortex{width:255px!important;height:205px!important}
  .vortex-head{width:70px!important;height:102px!important;font-size:36px!important}
}


/* v0.6.18 — Trilight Beacon heal movement only. Locked layout sizes unchanged. */
.tri-beacon-mover{position:fixed;z-index:1200;pointer-events:none;will-change:transform,left,top;overflow:visible}
.tri-beacon-mover>img{display:block;width:100%;height:100%;object-fit:contain;object-position:center bottom;filter:drop-shadow(0 10px 12px rgba(0,18,42,.28))}
.tri-beacon-heal-overlay{position:fixed;z-index:1210;pointer-events:none;object-fit:contain;object-position:left top;max-width:none!important;max-height:none!important;filter:drop-shadow(0 0 10px rgba(95,235,255,.24))}
.player-sprite.tri-beacon-source-hidden{visibility:hidden!important}
.beacon-tower.b2.heal-impact{filter:brightness(1.35) drop-shadow(0 0 24px rgba(114,247,255,.85)) drop-shadow(0 0 42px rgba(255,239,139,.42));transition:filter .18s ease}


/* v0.6.19 — Trilight Beacon 5Q + fixed-size heal cast */
.beacon-meter.beacon-meter-five{grid-template-columns:repeat(5,1fr)!important}
.tri-beacon-heal-overlay.beam-only{clip-path:inset(0 0 0 24%);-webkit-clip-path:inset(0 0 0 24%)}


/* =========================================================
   v0.7.0-rc1 — Task #8 Quest 3 Shared Avatar Engine plumbing
   Approved v0.6.23 UI geometry remains authoritative.
   ========================================================= */
.tri-beacon-shared-engine{position:relative!important}
.tri-beacon-avatar-layer{position:absolute!important;inset:0!important;z-index:8!important;pointer-events:none!important;overflow:visible!important}
.tri-beacon-avatar-layer canvas{pointer-events:none!important;display:block!important}
.tri-beacon-engine-home{z-index:6!important;background:linear-gradient(180deg,rgba(104,199,233,.08),rgba(13,42,70,.15))!important;border:1px solid rgba(147,226,255,.16)!important}
.tri-beacon-home-marker{position:absolute!important;left:50%!important;bottom:21px!important;width:2px!important;height:2px!important;transform:translateX(-50%)!important;opacity:0!important;pointer-events:none!important}
.answer-core.tri-engine-lock{opacity:.72;cursor:wait}
@media(max-width:720px){.tri-beacon-home-marker{bottom:17px!important}}
@media(max-width:430px){.tri-beacon-home-marker{bottom:15px!important}}


/* =========================================================
   v0.7.0-rc2 — Task #8.1 Quest 3 Home Platform
   - REMOVE tall transparent avatar card for Quest 3 only.
   - Shared Avatar Engine sizing/cast geometry is untouched.
   - Home registration point is the TOP-CENTER of the platform.
   - Same single Phaser sprite + teleport cast flow retained.
   ========================================================= */

.tri-beacon-home-platform{
  position:absolute!important;
  z-index:6!important;
  left:28px!important;
  bottom:8px!important;
  width:172px!important;
  height:34px!important;
  border-radius:50%!important;
  pointer-events:none!important;
  overflow:visible!important;
  background:
    radial-gradient(ellipse at center,
      rgba(116,239,255,.34) 0%,
      rgba(70,198,225,.20) 34%,
      rgba(16,71,103,.18) 58%,
      rgba(5,30,54,0) 76%)!important;
  border:1px solid rgba(137,234,255,.24)!important;
  box-shadow:
    0 0 18px rgba(90,226,255,.18),
    inset 0 0 14px rgba(204,251,255,.08)!important;
  transform:none!important;
}

.tri-beacon-home-platform::before{
  content:''!important;
  position:absolute!important;
  left:18%!important;
  right:18%!important;
  top:5px!important;
  height:5px!important;
  border-radius:999px!important;
  background:linear-gradient(90deg,
    transparent,
    rgba(108,239,255,.72),
    rgba(238,255,255,.92),
    rgba(108,239,255,.72),
    transparent)!important;
  box-shadow:0 0 12px rgba(103,235,255,.50)!important;
}

.tri-beacon-platform-glow{
  position:absolute!important;
  inset:-18px -12px -10px!important;
  border-radius:50%!important;
  background:radial-gradient(ellipse at center,
    rgba(84,228,255,.13),
    rgba(84,228,255,.035) 44%,
    transparent 70%)!important;
  animation:triBeaconHomePulse 2.6s ease-in-out infinite!important;
}

@keyframes triBeaconHomePulse{
  50%{transform:scale(1.07);opacity:.72}
}

/* The engine resolves an Element by its centre.
   This 2x2 marker therefore defines the character's FOOT/GROUND registration
   exactly at the platform's upper centre line. */
.tri-beacon-home-marker{
  position:absolute!important;
  left:50%!important;
  top:0!important;
  bottom:auto!important;
  width:2px!important;
  height:2px!important;
  transform:translate(-50%,-50%)!important;
  opacity:0!important;
  pointer-events:none!important;
}

/* Explicitly neutralise the old Quest 3 card/dock geometry. */
.tri-beacon-stage .tri-beacon-engine-home,
.tri-beacon-stage .beacon-hero.tri-beacon-engine-home{
  display:none!important;
}

/* Keep the Phaser canvas above the platform and below no cast artwork.
   The same sprite is used for IDLE and TELEPORT CAST. */
.tri-beacon-avatar-layer{
  z-index:8!important;
  overflow:visible!important;
}

/* Mobile: keep the same foot-anchor concept with a smaller visual platform.
   The engine sprite size itself is NOT changed here. */
@media(max-width:720px){
  .tri-beacon-home-platform{
    left:14px!important;
    bottom:7px!important;
    width:128px!important;
    height:26px!important;
  }
  .tri-beacon-home-platform::before{
    left:19%!important;
    right:19%!important;
    top:4px!important;
    height:4px!important;
  }
  .tri-beacon-home-marker{
    top:0!important;
    bottom:auto!important;
  }
}

@media(max-width:430px){
  .tri-beacon-home-platform{
    left:10px!important;
    bottom:6px!important;
    width:112px!important;
    height:23px!important;
  }
}


/* =========================================================
   v0.7.0-rc4 — Task #8.3 MINIMAL FIX
   Baseline: RC2. Do NOT inherit RC3 geometry.
   1) Keep the engine home anchor at the exact RC2 global point.
   2) Move ONLY the visual platform right so Nombi stands over its centre.
   3) No avatar sizing / cast geometry / beam changes.
   ========================================================= */

/* RC2 visual dimensions retained; only X is corrected. */
.tri-beacon-home-platform{
  left:113px!important;
  bottom:8px!important;
  width:172px!important;
  height:34px!important;
}

/* IMPORTANT: this is the original RC2 engine anchor in stage CSS space:
   RC2 platform left 28 + half width 86 = X 114,
   RC2 bottom 8 + platform height 34 = Y 42 from bottom.
   Keeping this point means Nombi returns to exactly the same approved home. */
.tri-beacon-home-marker{
  position:absolute!important;
  left:114px!important;
  bottom:42px!important;
  top:auto!important;
  width:2px!important;
  height:2px!important;
  transform:translate(-50%,50%)!important;
  opacity:0!important;
  pointer-events:none!important;
}

@media(max-width:720px){
  /* Preserve RC2 mobile engine anchor: 14 + 64 = 78; 7 + 26 = 33. */
  .tri-beacon-home-platform{
    left:72px!important;
    bottom:7px!important;
    width:128px!important;
    height:26px!important;
  }
  .tri-beacon-home-marker{
    left:78px!important;
    bottom:33px!important;
    top:auto!important;
  }
}

@media(max-width:430px){
  /* Preserve RC2 narrow-mobile engine anchor: 10 + 56 = 66; 6 + 23 = 29. */
  .tri-beacon-home-platform{
    left:60px!important;
    bottom:6px!important;
    width:112px!important;
    height:23px!important;
  }
  .tri-beacon-home-marker{
    left:66px!important;
    bottom:29px!important;
    top:auto!important;
  }
}


/* =========================================================
   v0.7.1-rc1 — Task #10 Quest 3 DOM→Phaser anchor migration
   UI geometry from approved RC4 remains unchanged.
   Nombi HOME no longer uses the legacy hidden marker; the
   actual platform DOM top-center is the responsive source of truth.
   ========================================================= */
.tri-beacon-home-marker{display:none!important}
.tri-beacon-home-platform[data-avatar-anchor="trilightHome"]{pointer-events:none!important}

/* =========================================================
   v0.7.1-rc2 — Task #10.2 Q3 persistent engine + responsive avatar band
   Fixes observed in production candidate RC1:
   - no Q3 DOM/Phaser rebuild between questions (JS)
   - HOME platform is centred in the available non-question area
   - mobile Phaser canvas gets a dedicated 12:7 avatar band, so DOM anchors
     and the logical 1200x700 stage describe the SAME visible region
   - mobile HOME and CAST live inside that band; no sprite clipping
   - no avatar x/y or scale is hardcoded here
   ========================================================= */

.tri-beacon-avatar-band{
  position:absolute!important;
  inset:0!important;
  z-index:6!important;
  pointer-events:none!important;
  overflow:visible!important;
}
.tri-beacon-avatar-band .tri-beacon-avatar-layer{
  position:absolute!important;
  inset:0!important;
  z-index:8!important;
  pointer-events:none!important;
  overflow:visible!important;
}
.tri-beacon-avatar-band .tri-beacon-avatar-layer canvas{
  display:block!important;
  pointer-events:none!important;
}

/* Desktop: question begins around x=258px. Centre the 172px platform in the
   free left column instead of pushing it into the question card. */
.tri-beacon-stage .tri-beacon-home-platform{
  left:43px!important;
  bottom:8px!important;
  width:172px!important;
  height:34px!important;
  transform:none!important;
}

/* The persistent Phaser instance must remain visible while the question DOM
   changes. Prevent accidental transition/animation on the engine host. */
.tri-beacon-avatar-band,
.tri-beacon-avatar-layer,
.tri-beacon-avatar-layer canvas{
  transition:none!important;
  animation:none!important;
}

@media(max-width:720px){
  /* Q3 gets a deliberate portrait composition. Beacon + avatar occupy the
     upper/middle area; question card owns the bottom area. */
  .tri-beacon-stage{
    min-height:calc(100dvh - 138px)!important;
    max-height:calc(100dvh - 138px)!important;
  }

  .tri-beacon-stage .tri-stage-indicator{
    top:18px!important;
    left:50%!important;
    right:auto!important;
    transform:translateX(-50%)!important;
    width:min(310px,64vw)!important;
  }

  /* Put the beacons toward the right side, leaving a clean HOME/cast lane
     at the left. Both the beacon core and HOME platform stay inside the
     12:7 avatar band below. */
  .tri-beacon-stage .beacon-field{
    top:92px!important;
    right:12px!important;
    left:auto!important;
    width:66%!important;
    height:250px!important;
    gap:10px!important;
    transform:none!important;
  }
  .tri-beacon-stage .beacon-meter{
    top:346px!important;
    right:12px!important;
    left:auto!important;
    width:66%!important;
    transform:none!important;
  }

  /* Critical mobile fix: do NOT let a 12:7 Phaser canvas FIT inside the
     entire tall portrait stage. Give it an explicit 12:7 responsive band.
     This removes the old vertical letterbox mismatch that pushed HOME out of
     canvas coordinates and clipped CAST_HEAL at the left edge. */
  .tri-beacon-stage .tri-beacon-avatar-band{
    inset:auto!important;
    left:0!important;
    top:104px!important;
    width:100%!important;
    height:auto!important;
    aspect-ratio:12 / 7!important;
    overflow:visible!important;
  }

  .tri-beacon-stage .tri-beacon-home-platform{
    left:24px!important;
    bottom:0!important;
    width:128px!important;
    height:26px!important;
    transform:none!important;
  }

  /* Question card is a separate lower zone; it cannot overlap HOME anymore. */
  .tri-beacon-stage .beacon-question{
    left:12px!important;
    right:12px!important;
    bottom:10px!important;
    width:auto!important;
    padding:12px 14px!important;
  }
  .tri-beacon-stage .beacon-question .tri-equation{
    font-size:28px!important;
    margin:3px 0 10px!important;
  }
  .tri-beacon-stage .beacon-question .tri-answer-grid{
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
    gap:8px!important;
  }
  .tri-beacon-stage .beacon-question .answer-core{
    min-height:56px!important;
    font-size:24px!important;
  }
}

@media(max-width:430px){
  .tri-beacon-stage .tri-stage-indicator{
    width:min(300px,70vw)!important;
  }
  .tri-beacon-stage .beacon-field{
    top:88px!important;
    right:8px!important;
    width:68%!important;
    height:232px!important;
    gap:7px!important;
  }
  .tri-beacon-stage .beacon-meter{
    top:322px!important;
    right:8px!important;
    width:68%!important;
  }
  .tri-beacon-stage .tri-beacon-avatar-band{
    top:98px!important;
  }
  .tri-beacon-stage .tri-beacon-home-platform{
    left:16px!important;
    bottom:0!important;
    width:112px!important;
    height:23px!important;
  }
  .tri-beacon-stage .beacon-question{
    left:8px!important;
    right:8px!important;
    bottom:8px!important;
    padding:10px!important;
  }
  .tri-beacon-stage .beacon-question .tri-equation{font-size:26px!important}
  .tri-beacon-stage .beacon-question .answer-core{min-height:52px!important;font-size:22px!important}
}

/* =========================================================
   v0.7.1-rc3 — Task #10.3 MOBILE PLAYFIELD CONTRACT
   Desktop geometry is intentionally unchanged.

   Root cause fixed here:
   RC2 put the visual beacon target outside the same containing block used by
   the 12:7 Phaser canvas on portrait screens.  DOM→canvas conversion could
   therefore resolve a target in a different visual coordinate space, which
   produced a detached HOME platform and an off-screen / clipped CAST_HEAL.

   RC3 mobile rule:
   - one .tri-beacon-playfield owns beacon + meter + HOME + Phaser canvas
   - playfield itself is exactly 12:7
   - every anchor used by the engine is therefore measured inside the same
     visible rectangle as the Phaser canvas
   - question card is outside/below the playfield
   - no Nombi scale, raw frame, beam length, FPS or cast profile is changed
   ========================================================= */

/* On desktop this wrapper must be transparent to layout so the approved RC2
   desktop placement stays exactly as-is. */
.tri-beacon-playfield{display:contents}

@media(max-width:720px){
  .tri-beacon-stage{
    min-height:calc(100dvh - 138px)!important;
    max-height:calc(100dvh - 138px)!important;
    overflow:hidden!important;
  }

  /* One authoritative coordinate surface for all gameplay anchors. */
  .tri-beacon-stage .tri-beacon-playfield{
    display:block!important;
    position:absolute!important;
    z-index:4!important;
    left:10px!important;
    right:10px!important;
    top:92px!important;
    width:auto!important;
    height:auto!important;
    aspect-ratio:12 / 7!important;
    overflow:visible!important;
    pointer-events:none!important;
  }

  /* Canvas fills the exact playfield.  No second portrait/tall containing
     block and therefore no mobile letterbox coordinate mismatch. */
  .tri-beacon-stage .tri-beacon-avatar-band{
    position:absolute!important;
    inset:0!important;
    width:100%!important;
    height:100%!important;
    aspect-ratio:auto!important;
    overflow:visible!important;
    z-index:8!important;
  }
  .tri-beacon-stage .tri-beacon-avatar-layer{
    position:absolute!important;
    inset:0!important;
    width:100%!important;
    height:100%!important;
    overflow:visible!important;
  }
  .tri-beacon-stage .tri-beacon-avatar-layer canvas{
    display:block!important;
    margin:0!important;
    max-width:none!important;
    max-height:none!important;
  }

  /* Visual target lives in the RIGHT lane of the same 12:7 playfield. */
  .tri-beacon-stage .beacon-field{
    position:absolute!important;
    z-index:5!important;
    top:5%!important;
    right:3%!important;
    left:auto!important;
    width:61%!important;
    height:66%!important;
    gap:clamp(5px,1.4vw,10px)!important;
    transform:none!important;
  }
  .tri-beacon-stage .beacon-meter{
    position:absolute!important;
    z-index:5!important;
    top:73%!important;
    right:3%!important;
    left:auto!important;
    width:61%!important;
    transform:none!important;
  }

  /* HOME owns the LEFT lane.  Platform is centred in that lane and, because
     it is a child of the same playfield, top-centre is a true Phaser anchor. */
  .tri-beacon-stage .tri-beacon-home-platform{
    position:absolute!important;
    z-index:6!important;
    left:20%!important;
    right:auto!important;
    bottom:8%!important;
    width:clamp(104px,27vw,132px)!important;
    height:clamp(22px,5.8vw,27px)!important;
    transform:translateX(-50%)!important;
  }

  /* Question owns a separate lower area and never shares geometry with the
     avatar/playfield. */
  .tri-beacon-stage .beacon-question{
    left:10px!important;
    right:10px!important;
    bottom:10px!important;
    width:auto!important;
    padding:11px 12px!important;
    z-index:9!important;
  }
  .tri-beacon-stage .beacon-question .tri-equation{
    font-size:27px!important;
    line-height:1.08!important;
    margin:2px 0 9px!important;
  }
  .tri-beacon-stage .beacon-question .tri-answer-grid{
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
    gap:8px!important;
  }
  .tri-beacon-stage .beacon-question .answer-core{
    min-height:54px!important;
    font-size:23px!important;
  }
}

@media(max-width:430px){
  .tri-beacon-stage .tri-beacon-playfield{
    left:8px!important;
    right:8px!important;
    top:86px!important;
  }
  .tri-beacon-stage .beacon-field{right:2%!important;width:62%!important}
  .tri-beacon-stage .beacon-meter{right:2%!important;width:62%!important}
  .tri-beacon-stage .tri-beacon-home-platform{
    left:19%!important;
    width:clamp(96px,28vw,112px)!important;
    height:23px!important;
    bottom:7%!important;
  }
  .tri-beacon-stage .beacon-question{
    left:8px!important;
    right:8px!important;
    bottom:8px!important;
    padding:10px!important;
  }
  .tri-beacon-stage .beacon-question .tri-equation{font-size:25px!important}
  .tri-beacon-stage .beacon-question .answer-core{min-height:50px!important;font-size:22px!important}
}

/* =========================================================
   v0.7.1-rc4 — Task #10.4 MOBILE FLOW-LAYOUT CONTRACT
   Purpose: eliminate the remaining mobile geometry ambiguity.

   IMPORTANT:
   - Desktop remains untouched.
   - Mobile no longer positions the Q3 playfield/question with top/bottom
     offsets against a tall stage.
   - Stage becomes a normal 3-row flow: indicator -> 12:7 playfield -> question.
   - The Phaser parent, HOME platform, beacon target and meter are all children
     of the exact same 12:7 playfield.
   - Full baked CAST_HEAL is unchanged; the middle beacon is deliberately kept
     far enough right that its target-aware required avatar anchor stays visible.
   ========================================================= */

.sq-rc4-proof{
  position:fixed;right:6px;bottom:6px;z-index:99999;
  padding:3px 7px;border-radius:999px;
  background:rgba(9,26,54,.84);border:1px solid rgba(111,240,255,.6);
  color:#7cf1ff;font:700 10px/1.1 system-ui,sans-serif;letter-spacing:.08em;
  pointer-events:none
}

@media (min-width:721px){.sq-rc4-proof{display:none}}

@media (max-width:720px){
  html body #app .tri-beacon-stage{
    display:grid!important;
    grid-template-columns:minmax(0,1fr)!important;
    grid-template-rows:auto auto auto!important;
    align-content:start!important;
    gap:10px!important;
    box-sizing:border-box!important;
    min-height:0!important;
    max-height:none!important;
    height:auto!important;
    padding:12px 10px 10px!important;
    overflow:hidden!important;
  }

  /* Background/ambient remain stage-wide and do not participate in grid. */
  html body #app .tri-beacon-stage > .tri-stage-bg,
  html body #app .tri-beacon-stage > .tri-ambient{
    position:absolute!important;
    inset:0!important;
  }

  html body #app .tri-beacon-stage > .tri-stage-indicator{
    position:relative!important;
    inset:auto!important;
    top:auto!important;right:auto!important;bottom:auto!important;left:auto!important;
    transform:none!important;
    z-index:12!important;
    grid-row:1!important;
    justify-self:center!important;
    width:min(300px,78vw)!important;
    margin:0!important;
  }

  html body #app .tri-beacon-stage > .tri-beacon-playfield{
    display:block!important;
    position:relative!important;
    inset:auto!important;
    top:auto!important;right:auto!important;bottom:auto!important;left:auto!important;
    transform:none!important;
    z-index:5!important;
    grid-row:2!important;
    justify-self:stretch!important;
    width:100%!important;
    height:auto!important;
    aspect-ratio:12 / 7!important;
    margin:0!important;
    overflow:hidden!important;
    pointer-events:none!important;
  }

  /* Phaser's exact responsive parent. */
  html body #app .tri-beacon-playfield > .tri-beacon-avatar-band,
  html body #app .tri-beacon-playfield .tri-beacon-avatar-layer{
    position:absolute!important;
    inset:0!important;
    width:100%!important;
    height:100%!important;
    top:0!important;right:0!important;bottom:0!important;left:0!important;
    transform:none!important;
    margin:0!important;
    overflow:visible!important;
  }
  html body #app .tri-beacon-playfield .tri-beacon-avatar-layer canvas{
    display:block!important;
    margin:0!important;
    max-width:none!important;
    max-height:none!important;
  }

  /* Right-side target lane. Middle core centre resolves at ~75% of playfield,
     leaving enough stage distance for the calibrated full-length heal beam. */
  html body #app .tri-beacon-playfield > .beacon-field{
    position:absolute!important;
    z-index:5!important;
    top:3%!important;
    right:0!important;
    bottom:auto!important;
    left:auto!important;
    width:50%!important;
    height:68%!important;
    gap:clamp(4px,1vw,8px)!important;
    transform:none!important;
    margin:0!important;
  }
  html body #app .tri-beacon-playfield > .beacon-meter{
    position:absolute!important;
    z-index:5!important;
    top:74%!important;
    right:0!important;
    bottom:auto!important;
    left:auto!important;
    width:50%!important;
    transform:none!important;
    margin:0!important;
  }

  /* True HOME lane.  Feet anchor = actual top-center of this platform. */
  html body #app .tri-beacon-playfield .tri-beacon-home-platform{
    position:absolute!important;
    z-index:6!important;
    left:22%!important;
    right:auto!important;
    top:auto!important;
    bottom:8%!important;
    width:clamp(100px,27vw,124px)!important;
    height:23px!important;
    transform:translateX(-50%)!important;
    margin:0!important;
  }

  /* Question is a normal third grid row. It cannot overlap HOME/cast geometry. */
  html body #app .tri-beacon-stage > .beacon-question{
    position:relative!important;
    inset:auto!important;
    top:auto!important;right:auto!important;bottom:auto!important;left:auto!important;
    transform:none!important;
    z-index:10!important;
    grid-row:3!important;
    width:100%!important;
    margin:0!important;
    box-sizing:border-box!important;
    padding:10px 12px!important;
  }
  html body #app .tri-beacon-stage > .beacon-question .tri-equation{
    font-size:26px!important;
    line-height:1.05!important;
    margin:2px 0 8px!important;
  }
  html body #app .tri-beacon-stage > .beacon-question .tri-answer-grid{
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
    gap:8px!important;
  }
  html body #app .tri-beacon-stage > .beacon-question .answer-core{
    min-height:50px!important;
    font-size:22px!important;
  }
}

@media (max-width:430px){
  html body #app .tri-beacon-stage{padding-inline:8px!important;gap:8px!important}
  html body #app .tri-beacon-stage > .tri-stage-indicator{width:min(292px,80vw)!important}
  html body #app .tri-beacon-playfield .tri-beacon-home-platform{
    left:22%!important;width:96px!important;height:22px!important;bottom:8%!important
  }
  html body #app .tri-beacon-stage > .beacon-question{padding:9px 10px!important}
  html body #app .tri-beacon-stage > .beacon-question .tri-equation{font-size:25px!important}
  html body #app .tri-beacon-stage > .beacon-question .answer-core{min-height:48px!important;font-size:21px!important}
}


/* =========================================================
   v0.7.1-rc6.1 — Task #10.6.1 DESKTOP HOME LIFT + RC6 TRUE FEET ANCHOR
   - RC4 mobile flow layout stays locked.
   - RC5 placeholder is removed: only the real Phaser Nombi may render.
   - HOME is resolved from a dedicated DOM feet point, not the platform box.
   - Desktop feet point is deliberately on the lower visual surface to correct
     the observed RC5 floating gap without changing Nombi scale or raw frames.
   - Mobile keeps the approved RC5 1.24x Nombi visual scale and current layout.
   ========================================================= */
.tri-beacon-home-feet-anchor{
  position:absolute!important;
  left:50%!important;
  top:80%!important; /* RC6.2 desktop-only: lift feet ~4px more vs RC6.1; ~9.5px total vs RC6 */
  width:2px!important;
  height:2px!important;
  transform:translate(-50%,-50%)!important;
  opacity:0!important;
  pointer-events:none!important;
  z-index:20!important;
}

/* No boot placeholder / no avatar cross-fade. The progressive engine creates
   the actual IDLE sprite after locomotion is decoded. */
.tri-beacon-avatar-layer,
.tri-beacon-avatar-layer canvas{
  opacity:1!important;
  transition:none!important;
  animation:none!important;
}

@media(max-width:720px){
  /* Mobile RC4/RC5 HOME looked vertically correct; use the glowing upper
     platform surface instead of the desktop correction point. */
  .tri-beacon-home-feet-anchor{
    top:16%!important;
  }
}

@media(max-width:430px){
  .tri-beacon-home-feet-anchor{top:16%!important}
}


/* =========================================================
   v0.7.1 Task #11 RC2 — QUEST 1 TRI-PEARL ADAPTIVE 3-PROFILE CAST_ATTACK
   RC6.2 Q3 styles above are untouched.
   DOM owns the HOME dock + pod target geometry; Phaser owns one Nombi sprite.
   ========================================================= */
.tri-pearl-stage.tri-pearl-shared-engine .tri-pearl-avatar-layer{
  position:absolute!important;
  inset:0!important;
  z-index:8!important;
  pointer-events:none!important;
  overflow:hidden!important;
  border-radius:inherit!important;
}
.tri-pearl-stage.tri-pearl-shared-engine .tri-pearl-avatar-layer canvas{
  display:block!important;
  width:100%!important;
  height:100%!important;
  pointer-events:none!important;
  opacity:1!important;
  transition:none!important;
  animation:none!important;
}
.tri-pearl-stage.tri-pearl-shared-engine .tri-pearl-home-dock{
  z-index:6!important;
}
.tri-pearl-home-feet-anchor{
  position:absolute!important;
  left:50%!important;
  bottom:2px!important;
  width:2px!important;
  height:2px!important;
  transform:translate(-50%,50%)!important;
  opacity:0!important;
  pointer-events:none!important;
  z-index:20!important;
}
.tri-pearl-stage.tri-pearl-shared-engine .pearl-zone{z-index:5!important}
.tri-pearl-stage.tri-pearl-shared-engine .tri-question-card{z-index:7!important}
.tri-pearl-stage.tri-pearl-shared-engine .tri-engine-lock{cursor:wait!important;opacity:.74!important}
@media(max-width:720px){
  .tri-pearl-home-feet-anchor{bottom:2px!important}
}


/* =========================================================
   v0.7.1 Task #11 RC3 — Q1 MOBILE GEOMETRY + REALM INTRO PARITY
   1) Q1 mobile: one 12:7 gameplay playfield owns Phaser + HOME + Pearl Pods.
      This prevents the 1200x700 Phaser canvas being stretched into a portrait
      stage (the cause of the tall/warped IDLE and CAST_ATTACK Nombi).
   2) Triwave intro mobile: copy Twinwood's approved copy/button placement.
   3) Realm entry: same background URL for intro/map + visible press/loading state.
   Desktop Q1 geometry and locked Q3 RC6.2 behaviour are not changed.
   ========================================================= */

/* Same physical image + same cache key on intro and quest map. */
.twinwood-hero.triwave-hero.triwave-twinwood-lock{
  background:
    linear-gradient(90deg,rgba(4,27,45,.88) 0%,rgba(4,31,46,.60) 48%,rgba(4,26,43,.12) 78%),
    url('../images/triwave-lagoon-bg.webp?v=0711-task11-rc3') center/cover no-repeat!important;
}
.tri-map-bg{
  background:
    linear-gradient(180deg,rgba(3,25,45,.18),rgba(3,28,40,.18) 48%,rgba(3,35,40,.42)),
    url('../images/triwave-lagoon-bg.webp?v=0711-task11-rc3') 50% 54%/cover no-repeat!important;
}

.triwave-twinwood-lock #enter.tri-pressing,
.triwave-twinwood-lock #enter.tri-enter-loading{
  transform:translateY(4px)!important;
  filter:brightness(.97)!important;
  box-shadow:0 5px 0 #bb8310,0 9px 14px rgba(172,118,13,.20),inset 0 2px 0 rgba(255,255,255,.54),inset 0 -3px 0 rgba(142,90,0,.14)!important;
}
.triwave-twinwood-lock #enter.tri-enter-loading{cursor:progress!important}

/* Desktop stays exactly on the RC2 absolute-position contract. */
.tri-pearl-playfield{display:contents}

@media(max-width:720px){
  /* Twinwood-approved mobile realm intro geometry. */
  html body #app .twinwood-hero.triwave-hero.triwave-twinwood-lock{
    min-height:620px!important;
    padding:20px 18px 20px!important;
    align-items:start!important;
  }
  html body #app .triwave-twinwood-lock .realm-copy{
    max-width:none!important;
    margin-top:0!important;
    padding-top:14px!important;
    align-self:start!important;
    position:relative!important;
    z-index:9!important;
  }
  html body #app .triwave-twinwood-lock .realm-copy .eyebrow{
    margin-top:10px!important;
    margin-bottom:8px!important;
  }
  html body #app .triwave-twinwood-lock .realm-copy h1{
    font-size:44px!important;
    margin:0 0 16px!important;
    max-width:92%!important;
  }
  html body #app .triwave-twinwood-lock .realm-copy p{
    font-size:15px!important;
    line-height:1.55!important;
    margin:0 0 12px!important;
    max-width:92%!important;
  }
  html body #app .triwave-twinwood-lock .realm-actions{
    display:flex!important;
    flex-direction:column!important;
    align-items:flex-start!important;
    gap:14px!important;
    width:100%!important;
    margin-top:14px!important;
    position:relative!important;
    z-index:20!important;
  }
  html body #app .triwave-twinwood-lock #enter,
  html body #app .triwave-twinwood-lock #backNexus{
    min-height:56px!important;
    padding:13px 22px!important;
    min-width:210px!important;
    max-width:270px!important;
    font-size:15px!important;
    border-radius:18px!important;
    pointer-events:auto!important;
  }
  html body #app .triwave-twinwood-lock .realm-avatar{
    position:absolute!important;
    right:0!important;
    bottom:0!important;
    width:160px!important;
    min-height:0!important;
    height:auto!important;
    opacity:.52!important;
    z-index:4!important;
  }
  html body #app .triwave-twinwood-lock .realm-avatar .player-sprite.hero-pose{
    width:160px!important;
    height:250px!important;
  }

  /* Q1 is now a normal flow: indicator -> 12:7 gameplay -> question.
     Only mobile changes. Desktop .tri-pearl-playfield is display:contents. */
  html body #app .tri-pearl-stage.tri-pearl-shared-engine{
    display:grid!important;
    grid-template-columns:minmax(0,1fr)!important;
    grid-template-rows:auto auto auto!important;
    align-content:start!important;
    gap:8px!important;
    box-sizing:border-box!important;
    min-height:0!important;
    max-height:none!important;
    height:auto!important;
    padding:10px 8px 8px!important;
    overflow:hidden!important;
  }
  html body #app .tri-pearl-stage > .tri-stage-bg,
  html body #app .tri-pearl-stage > .tri-ambient{
    position:absolute!important;
    inset:0!important;
  }
  html body #app .tri-pearl-stage > .tri-stage-indicator{
    position:relative!important;
    inset:auto!important;
    top:auto!important;right:auto!important;bottom:auto!important;left:auto!important;
    transform:none!important;
    grid-row:1!important;
    justify-self:center!important;
    width:min(300px,78vw)!important;
    margin:0!important;
    z-index:12!important;
  }
  html body #app .tri-pearl-stage > .tri-pearl-playfield{
    display:block!important;
    position:relative!important;
    inset:auto!important;
    width:100%!important;
    height:auto!important;
    aspect-ratio:12 / 7!important;
    grid-row:2!important;
    margin:0!important;
    overflow:hidden!important;
    z-index:5!important;
  }
  html body #app .tri-pearl-playfield > .tri-pearl-avatar-layer{
    position:absolute!important;
    inset:0!important;
    width:100%!important;
    height:100%!important;
    overflow:hidden!important;
    z-index:8!important;
  }
  html body #app .tri-pearl-playfield > .tri-pearl-avatar-layer canvas{
    display:block!important;
    width:100%!important;
    height:100%!important;
    max-width:none!important;
    max-height:none!important;
    margin:0!important;
  }
  /* HOME lane: enough room for the approved 1.24x mobile Nombi. */
  html body #app .tri-pearl-playfield > .tri-pearl-home-dock{
    position:absolute!important;
    left:1.5%!important;
    right:auto!important;
    top:auto!important;
    bottom:4%!important;
    width:35%!important;
    height:78%!important;
    border-radius:22px!important;
    margin:0!important;
    z-index:6!important;
  }
  html body #app .tri-pearl-playfield .tri-pearl-home-feet-anchor{
    left:50%!important;
    bottom:3px!important;
  }
  /* Four target pods stay in a clean right-side 2x2 grid inside the SAME
     coordinate surface used by Phaser. */
  html body #app .tri-pearl-playfield > .pearl-zone{
    position:absolute!important;
    left:auto!important;
    right:1%!important;
    top:2%!important;
    bottom:2%!important;
    width:60%!important;
    height:auto!important;
    display:grid!important;
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
    grid-template-rows:repeat(2,minmax(0,1fr))!important;
    gap:7px!important;
    margin:0!important;
    z-index:5!important;
  }
  html body #app .tri-pearl-playfield .pearl-pod{
    min-height:0!important;
    height:auto!important;
    width:auto!important;
    border-radius:38px!important;
  }
  html body #app .tri-pearl-playfield .pearl-creature{font-size:38px!important}
  html body #app .tri-pearl-playfield .pearl-lock{bottom:10px!important;width:13px!important;height:13px!important}

  /* Question is outside the Phaser playfield, so IDLE/CAST can never overlap it. */
  html body #app .tri-pearl-stage > .tri-question-card{
    position:relative!important;
    inset:auto!important;
    top:auto!important;right:auto!important;bottom:auto!important;left:auto!important;
    grid-row:3!important;
    width:100%!important;
    margin:0!important;
    box-sizing:border-box!important;
    padding:10px 12px!important;
    z-index:10!important;
  }
  html body #app .tri-pearl-stage > .tri-question-card h2{
    font-size:18px!important;
    line-height:1.15!important;
    margin:2px 0 4px!important;
  }
  html body #app .tri-pearl-stage > .tri-question-card .tri-equation{
    font-size:26px!important;
    line-height:1.05!important;
    margin:2px 0 8px!important;
  }
  html body #app .tri-pearl-stage > .tri-question-card .tri-answer-grid{
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
    gap:8px!important;
  }
  html body #app .tri-pearl-stage > .tri-question-card .answer-core{
    min-height:50px!important;
    font-size:22px!important;
  }
}

@media(max-width:430px){
  html body #app .tri-pearl-stage.tri-pearl-shared-engine{padding-inline:7px!important;gap:7px!important}
  html body #app .tri-pearl-stage > .tri-stage-indicator{width:min(292px,80vw)!important}
  html body #app .tri-pearl-playfield > .tri-pearl-home-dock{left:1%!important;width:35%!important;height:78%!important;bottom:4%!important}
  html body #app .tri-pearl-playfield > .pearl-zone{right:0!important;width:61%!important;gap:6px!important}
  html body #app .tri-pearl-playfield .pearl-creature{font-size:34px!important}
  html body #app .tri-pearl-stage > .tri-question-card{padding:9px 10px!important}
  html body #app .tri-pearl-stage > .tri-question-card h2{font-size:17px!important}
  html body #app .tri-pearl-stage > .tri-question-card .tri-equation{font-size:25px!important}
  html body #app .tri-pearl-stage > .tri-question-card .answer-core{min-height:48px!important;font-size:21px!important}
}


/* =========================================================
   v0.7.1 Task #11 RC4 — TRI-PEARL RESCUE HOME PLATFORM + CAST_HEAL
   Scope lock:
   - REMOVE the old transparent Nombi dock visual on BOTH desktop and mobile.
   - Keep the existing dock only as an invisible responsive HOME lane.
   - Nombi feet attach to the top-centre of the visible HOME platform.
   - Correct answer uses Shared Avatar Engine CAST_HEAL / adaptive baked heal
     profile (FULL F5 -> COMPACT F7 when constrained).
   - Q1 mobile 12:7 playfield, question UI, pod layout and Q3 RC6.2 are untouched.
   ========================================================= */

/* Invisible HOME lane: layout remains a responsive DOM anchor owner, but the
   tall translucent card is completely removed. */
html body #app .tri-pearl-stage.tri-pearl-shared-engine .tri-pearl-home-dock{
  background:transparent!important;
  border:0!important;
  box-shadow:none!important;
  border-radius:0!important;
  overflow:visible!important;
  pointer-events:none!important;
}

/* Same visual language as locked Trilight HOME platform. */
.tri-pearl-home-platform{
  position:absolute!important;
  left:50%!important;
  bottom:8px!important;
  width:172px!important;
  height:34px!important;
  transform:translateX(-50%)!important;
  border-radius:50%!important;
  pointer-events:none!important;
  overflow:visible!important;
  background:radial-gradient(ellipse at center,
    rgba(116,239,255,.34) 0%,
    rgba(70,198,225,.20) 34%,
    rgba(16,71,103,.18) 58%,
    rgba(5,30,54,0) 76%)!important;
  border:1px solid rgba(137,234,255,.24)!important;
  box-shadow:0 0 18px rgba(90,226,255,.18),inset 0 0 14px rgba(204,251,255,.08)!important;
  z-index:6!important;
}
.tri-pearl-home-platform::before{
  content:''!important;
  position:absolute!important;
  left:18%!important;
  right:18%!important;
  top:5px!important;
  height:5px!important;
  border-radius:999px!important;
  background:linear-gradient(90deg,transparent,rgba(108,239,255,.72),rgba(238,255,255,.92),rgba(108,239,255,.72),transparent)!important;
  box-shadow:0 0 12px rgba(103,235,255,.50)!important;
}
.tri-pearl-platform-glow{
  position:absolute!important;
  inset:-18px -12px -10px!important;
  border-radius:50%!important;
  background:radial-gradient(ellipse at center,rgba(84,228,255,.13),rgba(84,228,255,.035) 44%,transparent 70%)!important;
  animation:triPearlHomePulse 2.6s ease-in-out infinite!important;
}
@keyframes triPearlHomePulse{50%{transform:scale(1.07);opacity:.72}}

/* Engine resolves this element's centre as the feet point. Exactly top-centre
   of the platform = stable HOME registration for IDLE and return. */
html body #app .tri-pearl-home-platform .tri-pearl-home-feet-anchor{
  position:absolute!important;
  left:50%!important;
  top:0!important;
  right:auto!important;
  bottom:auto!important;
  width:2px!important;
  height:2px!important;
  transform:translate(-50%,-50%)!important;
  opacity:0!important;
  pointer-events:none!important;
}

/* Rescue response only; no geometry changes. */
.tri-pearl-playfield .pearl-pod.healing{
  filter:brightness(1.12) saturate(1.05)!important;
}

@media(max-width:720px){
  /* Keep the approved RC3 left HOME lane but use only the platform within it. */
  html body #app .tri-pearl-playfield > .tri-pearl-home-dock{
    background:transparent!important;
    border:0!important;
    box-shadow:none!important;
  }
  html body #app .tri-pearl-playfield .tri-pearl-home-platform{
    left:50%!important;
    bottom:7%!important;
    width:clamp(100px,27vw,124px)!important;
    height:23px!important;
    transform:translateX(-50%)!important;
  }
}
@media(max-width:430px){
  html body #app .tri-pearl-playfield .tri-pearl-home-platform{
    width:96px!important;
    height:22px!important;
    bottom:7%!important;
  }
}


/* =========================================================
   Task #11 RC5 — Q1 HEAL CAST GEOMETRY FIX ONLY
   Invisible rescue target is owned by DOM. Desktop aims at pod center.
   Mobile aims at upper pod core so the same-size Nombi + native baked beam
   remains fully inside the 12:7 playfield, including bottom-row Pearl Pods.
   No Q1 visual layout is changed by this marker.
   ========================================================= */
.tri-pearl-heal-target{
  position:absolute!important;
  left:50%!important;
  top:50%!important;
  width:2px!important;
  height:2px!important;
  transform:translate(-50%,-50%)!important;
  opacity:0!important;
  pointer-events:none!important;
  z-index:30!important;
}
@media(max-width:720px){
  .tri-pearl-heal-target{top:20%!important}
}
.sq-rc5-proof{position:fixed;right:10px;bottom:8px;z-index:9999;padding:3px 8px;border:1px solid rgba(123,239,255,.55);border-radius:999px;background:rgba(4,30,51,.76);color:#8fefff;font:800 11px/1.2 'Nunito',sans-serif;letter-spacing:.08em;pointer-events:none}

/* =========================================================
   Task #11 RC6 — Q1 MOBILE HEAL TARGET ROW FIX ONLY
   Root cause of RC5 mobile rejection:
   - every mobile pod used top:20% as the invisible HEAL target.
   - this is valid for the BOTTOM row, where a higher target keeps the cast
     anchor below the 12:7 playfield ceiling.
   - but on the TOP row it moves the target too high; at mobile scale 1.24,
     even native CLOSE F4 projects the CAST_HEAL body above the playfield,
     so all profiles correctly fail geometry validation.

   Final mobile target contract:
   - top row (pods 0/1): target = visual pod CENTER (50%).
   - bottom row (pods 2/3): target = upper core (20%).
   Desktop remains exactly 50% for all pods.
   No avatar scale, HOME, pod layout, question UI, beam artwork, FPS,
   endpoint data, profile order or Q3 behaviour is changed.
   ========================================================= */
@media(max-width:720px){
  html body #app .tri-pearl-playfield .pearl-pod[data-pod="0"] .tri-pearl-heal-target,
  html body #app .tri-pearl-playfield .pearl-pod[data-pod="1"] .tri-pearl-heal-target{
    top:50%!important;
  }
  html body #app .tri-pearl-playfield .pearl-pod[data-pod="2"] .tri-pearl-heal-target,
  html body #app .tri-pearl-playfield .pearl-pod[data-pod="3"] .tri-pearl-heal-target{
    top:20%!important;
  }
}
.sq-rc6-proof{position:fixed;right:10px;bottom:8px;z-index:10000;padding:3px 8px;border:1px solid rgba(123,239,255,.55);border-radius:999px;background:rgba(4,30,51,.76);color:#8fefff;font:800 11px/1.2 'Nunito',sans-serif;letter-spacing:.08em;pointer-events:none}

/* Task #11 RC7 proof badge only; Q1 visual geometry remains RC6. */
.sq-rc7-proof{position:fixed;right:10px;bottom:8px;z-index:10001;padding:3px 8px;border:1px solid rgba(123,239,255,.55);border-radius:999px;background:rgba(4,30,51,.76);color:#8fefff;font:800 11px/1.2 'Nunito',sans-serif;letter-spacing:.08em;pointer-events:none}

/* =========================================================
   Task #13 RC1 — Trivortex mobile compact cast only
   Desktop Boss, Q1 RC7, Q2 current config, Q3 RC6.2 untouched.
   ========================================================= */
.sq-t13-rc1-proof{position:fixed;right:10px;bottom:8px;z-index:10002;padding:3px 8px;border:1px solid rgba(196,156,255,.62);border-radius:999px;background:rgba(24,12,58,.78);color:#d7baff;font:800 11px/1.2 'Nunito',sans-serif;letter-spacing:.08em;pointer-events:none}
@media(max-width:720px){
  .tri-boss-cast-overlay.tri-boss-cast-mobile-compact{max-width:none!important;max-height:none!important;object-fit:fill!important}
}


/* ============================================================
   TASK #14 RC1 — Realm x3 Quest Map mobile centering
   UI-only. No gameplay/quest/boss behaviour changes.
   Goal: every quest node + connector shares one exact center axis
   inside the Triwave main map card.
   ============================================================ */
@media (max-width:720px){
  html body #app .tri-map{
    position:relative!important;
  }

  html body #app .tri-map .tri-route{
    /* The route owns the whole inner width; cards choose a common width
       and are centered from one parent axis instead of inheriting old offsets. */
    position:absolute!important;
    top:25px!important;
    bottom:48px!important;
    left:0!important;
    right:0!important;
    width:100%!important;
    transform:none!important;
    padding:0 18px 14px!important;
    box-sizing:border-box!important;

    display:grid!important;
    grid-template-columns:minmax(0,1fr)!important;
    justify-items:center!important;
    align-content:start!important;
    gap:8px!important;
    overflow-y:auto!important;
    overflow-x:hidden!important;
    scrollbar-width:none;
  }

  html body #app .tri-map .tri-route::-webkit-scrollbar{
    width:0!important;
    height:0!important;
  }

  html body #app .tri-map .tri-node{
    /* Keep one identical card width for Q1, Q2, Q3 and Boss. */
    width:min(82%, 310px)!important;
    max-width:310px!important;
    min-width:0!important;
    margin-left:auto!important;
    margin-right:auto!important;
    justify-self:center!important;
    box-sizing:border-box!important;
  }

  html body #app .tri-map .tri-route-line{
    /* Connector is locked to the same exact center axis as the cards. */
    width:8px!important;
    height:30px!important;
    margin:0 auto!important;
    justify-self:center!important;
    align-self:center!important;
  }
}

@media (max-width:430px){
  html body #app .tri-map .tri-route{
    padding-left:14px!important;
    padding-right:14px!important;
  }
  html body #app .tri-map .tri-node{
    width:min(84%, 300px)!important;
  }
}


/* ============================================================
   Task #16.4 RC3 — exact fixes only

   Q3 DESKTOP AVATAR CLIP ROOT CAUSE:
   The shared-engine IDLE ground registration is sourceX 198 with runtime
   scale ~0.84337 => ~167 logical px required to the LEFT of the feet anchor.
   Previous HOME center was ~129px, so part of the source canvas was outside
   Phaser camera x=0. Moving only 13px could not fix it.
   New HOME center = 88 + 86 = 174px, keeping the complete avatar/wand inside
   the camera without changing Nombi scale, atlas, registration or cast geometry.

   Q1 FISH:
   Do not use platform-dependent emoji glyphs. Use the local Noto/Android-style
   tropical-fish PNG so desktop and mobile render the SAME fish artwork.
   ============================================================ */
@media (min-width:721px){
  html body #app .tri-beacon-stage .tri-beacon-avatar-band .tri-beacon-home-platform{
    left:88px!important;
  }
}

/* Real image, not a Unicode glyph. Existing freed/healing transforms remain. */
html body #app .tri-pearl-stage .pearl-creature{
  display:block!important;
  width:72px!important;
  height:auto!important;
  max-width:none!important;
  object-fit:contain!important;
  font-size:0!important;
  line-height:0!important;
  filter:drop-shadow(0 7px 14px rgba(0,34,52,.42))!important;
}
@media (max-width:720px){
  html body #app .tri-pearl-stage .pearl-creature{
    width:52px!important;
  }
}
@media (max-width:430px){
  html body #app .tri-pearl-stage .pearl-creature{
    width:48px!important;
  }
}


/* ============================================================
   Task #16.4 RC4 — requested visual corrections only

   A) Q3 desktop Nombi:
      RC3 shift was still insufficient in the real Hostinger layout.
      Move the HOME lane materially farther right (+80px vs RC3) so the
      left wand/glow has an unmistakable safety lane inside the Phaser view.
      Cast target/profile/scale/atlas remain unchanged.

   B) Q1 Pearl Rescue:
      Keep the now-correct fish artwork, reduce its size, and make the pod
      visually read as a containment cage before rescue.
   ============================================================ */

@media (min-width:721px){
  html body #app .tri-beacon-stage .tri-beacon-avatar-band .tri-beacon-home-platform{
    left:168px!important;
  }
}

/* Smaller trapped creature */
html body #app .tri-pearl-stage .pearl-creature{
  width:54px!important;
  height:auto!important;
  z-index:3!important;
  position:relative!important;
  filter:drop-shadow(0 5px 9px rgba(0,26,48,.46))!important;
}

/* Energy cage around each still-locked fish.  .pearl-shell already exists in
   every pod, so this adds no gameplay markup or new target geometry. */
html body #app .tri-pearl-stage .pearl-shell{
  display:block!important;
  position:absolute!important;
  z-index:4!important;
  left:50%!important;
  top:50%!important;
  width:82px!important;
  height:76px!important;
  transform:translate(-50%,-50%)!important;
  border:2px solid rgba(143,225,255,.78)!important;
  border-radius:42% 42% 36% 36%!important;
  background:
    repeating-linear-gradient(90deg,
      transparent 0 13px,
      rgba(129,214,255,.58) 13px 16px,
      transparent 16px 29px)!important;
  box-shadow:
    0 0 14px rgba(94,215,255,.48),
    inset 0 0 16px rgba(121,95,255,.20)!important;
  opacity:.92!important;
  pointer-events:none!important;
  transition:.4s ease!important;
}
html body #app .tri-pearl-stage .pearl-shell::before,
html body #app .tri-pearl-stage .pearl-shell::after{
  content:''!important;
  position:absolute!important;
  left:8px!important;
  right:8px!important;
  height:2px!important;
  border-radius:999px!important;
  background:linear-gradient(90deg,transparent,#b9f5ff 20%,#aa7cff 50%,#b9f5ff 80%,transparent)!important;
  box-shadow:0 0 8px rgba(150,218,255,.78)!important;
}
html body #app .tri-pearl-stage .pearl-shell::before{top:21px!important}
html body #app .tri-pearl-stage .pearl-shell::after{bottom:21px!important}

/* Locked pod gets a subtle danger tint so the rescue objective is obvious. */
html body #app .tri-pearl-stage .pearl-pod:not(.freed){
  box-shadow:
    inset 0 0 35px rgba(255,255,255,.18),
    inset 0 -18px 36px rgba(137,86,255,.11),
    0 0 25px rgba(117,233,255,.18)!important;
}
html body #app .tri-pearl-stage .pearl-pod:not(.freed) .pearl-lock{
  z-index:6!important;
  width:19px!important;
  height:19px!important;
  background:#ae72ff!important;
  box-shadow:0 0 8px #d7b5ff,0 0 18px #9868ff!important;
}

/* Rescue removes the cage + lock and lets the fish visibly float free. */
html body #app .tri-pearl-stage .pearl-pod.freed .pearl-shell{
  opacity:0!important;
  transform:translate(-50%,-50%) scale(1.18)!important;
}
html body #app .tri-pearl-stage .pearl-pod.freed .pearl-creature{
  transform:translateY(-10px) scale(1.10)!important;
  filter:drop-shadow(0 0 14px rgba(109,244,213,.68))!important;
}

@media (max-width:720px){
  html body #app .tri-pearl-stage .pearl-creature{width:42px!important}
  html body #app .tri-pearl-stage .pearl-shell{width:64px!important;height:60px!important}
  html body #app .tri-pearl-stage .pearl-shell::before{top:17px!important}
  html body #app .tri-pearl-stage .pearl-shell::after{bottom:17px!important}
}
@media (max-width:430px){
  html body #app .tri-pearl-stage .pearl-creature{width:38px!important}
  html body #app .tri-pearl-stage .pearl-shell{width:58px!important;height:54px!important}
}


/* ============================================================
   Task #16.5 RC5 — Q3 HOME/IDLE = Q1 PEARL RESCUE CONTRACT
   No more Beacon-specific X nudging.

   Desktop only:
   - same .tri-hero-dock geometry as Pearl Rescue
   - same 172x34 platform centered inside dock
   - same top-center feet anchor
   - same full-stage Phaser layer behavior
   Mobile Q3 layout remains under its existing responsive rules.
   ============================================================ */
@media (min-width:721px){
  /* Kill every previous Beacon HOME X experiment. */
  html body #app .tri-beacon-stage .tri-beacon-home-dock{
    position:absolute!important;
    z-index:6!important;
    left:18px!important;
    right:auto!important;
    top:auto!important;
    bottom:18px!important;
    width:208px!important;
    height:282px!important;
    display:flex!important;
    align-items:flex-end!important;
    justify-content:center!important;
    border-radius:0!important;
    background:transparent!important;
    border:0!important;
    box-shadow:none!important;
    overflow:visible!important;
    pointer-events:none!important;
  }

  /* EXACT Pearl Rescue platform geometry. */
  html body #app .tri-beacon-stage .tri-beacon-home-dock .tri-beacon-home-platform{
    position:absolute!important;
    left:50%!important;
    right:auto!important;
    top:auto!important;
    bottom:8px!important;
    width:172px!important;
    height:34px!important;
    transform:translateX(-50%)!important;
    margin:0!important;
  }

  /* EXACT Pearl Rescue feet contract: top-center of platform. */
  html body #app .tri-beacon-stage .tri-beacon-home-platform .tri-beacon-home-feet-anchor{
    position:absolute!important;
    left:50%!important;
    top:0!important;
    right:auto!important;
    bottom:auto!important;
    width:2px!important;
    height:2px!important;
    transform:translate(-50%,-50%)!important;
    opacity:0!important;
    pointer-events:none!important;
  }

  /* Same full gameplay surface behavior as Q1 avatar layer. */
  html body #app .tri-beacon-stage .tri-beacon-avatar-band{
    position:absolute!important;
    inset:0!important;
    width:100%!important;
    height:100%!important;
    overflow:visible!important;
    pointer-events:none!important;
  }
  html body #app .tri-beacon-stage .tri-beacon-avatar-layer{
    position:absolute!important;
    inset:0!important;
    width:100%!important;
    height:100%!important;
    z-index:8!important;
    pointer-events:none!important;
    overflow:hidden!important;
    border-radius:inherit!important;
  }
  html body #app .tri-beacon-stage .tri-beacon-avatar-layer canvas{
    display:block!important;
    width:100%!important;
    height:100%!important;
    margin:0!important;
    max-width:none!important;
    max-height:none!important;
    pointer-events:none!important;
    opacity:1!important;
    transition:none!important;
    animation:none!important;
  }
}


/* ============================================================
   Task #16.6 RC6 — REMOVE BEACON HOME CARD ONLY
   Everything else from RC5 stays locked.
   Important: this file has a NEW filename to force browser cache refresh.
   ============================================================ */
html body #app .tri-beacon-stage .tri-beacon-home-dock{
  background:none!important;
  background-color:transparent!important;
  background-image:none!important;
  border:0!important;
  outline:0!important;
  box-shadow:none!important;
  border-radius:0!important;
  backdrop-filter:none!important;
  -webkit-backdrop-filter:none!important;
}