:root{
  --v320-gold:#d8ad4c;
  --v320-gold-bright:#f7dda0;
  --v320-ink:#020912;
  --v320-panel:rgba(2,10,17,.975);
  --v320-line:rgba(216,173,76,.68);
  --v320-muted:#a8b8c5;
}

html,body{width:100%;height:100%;margin:0;background:#000;color:#eef4fa}
body.realm-v320{overflow:hidden;font-family:"Segoe UI",Arial,sans-serif}
.realm-v320 *{box-sizing:border-box}
.realm-v320 a{text-decoration:none}
.v320-sr-only{position:absolute!important;width:1px!important;height:1px!important;padding:0!important;margin:-1px!important;overflow:hidden!important;clip:rect(0,0,0,0)!important;white-space:nowrap!important;border:0!important}

.v320-stage{
  position:absolute;
  left:50%;top:50%;
  width:min(100vw,166.6667vh);
  height:min(100vh,60vw);
  transform:translate(-50%,-50%);
  overflow:hidden;
  background:#01050a;
  box-shadow:0 0 80px rgba(0,0,0,.8);
  isolation:isolate;
}
.v320-art{position:absolute;inset:0;background-position:center;background-repeat:no-repeat;background-size:100% 100%;transition:opacity 1.5s ease;z-index:0}
.v320-art-day{background-image:url('realm-v400-day.jpg');opacity:1}
.v320-art-night{background-image:url('realm-v400-night.jpg');opacity:0}
.realm-v320[data-realm-phase="night"] .v320-art-day{opacity:0}
.realm-v320[data-realm-phase="night"] .v320-art-night{opacity:1}
.realm-v320[data-realm-phase="day"] .v320-art-day{opacity:1}
.realm-v320[data-realm-phase="day"] .v320-art-night{opacity:0}
.v320-stage:after{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;background:linear-gradient(180deg,rgba(0,0,0,.03),transparent 18%,transparent 76%,rgba(0,0,0,.18))}

/* Real overlay card replaces the baked panel while retaining the approved composition. */
.v320-side-card{
  position:absolute;z-index:20;
  right:1.50%;top:30.65%;
  width:20.80%;
  min-height:46.2%;
  padding:4.35% 1.45% 1.45%;
  border:1px solid var(--v320-line);
  border-radius:3px;
  background:linear-gradient(160deg,#03101a,#01070c);
  box-shadow:0 22px 60px rgba(0,0,0,.62),inset 0 0 0 4px rgba(188,143,54,.055);
  color:#e9d8a6;
  text-align:center;
}
.v320-side-card:before,.v320-side-card:after{content:"";position:absolute;left:5%;right:5%;height:1px;background:linear-gradient(90deg,transparent,#b68c37,transparent)}
.v320-side-card:before{top:1.6%}.v320-side-card:after{bottom:1.6%}
.v320-card-crest{position:absolute;left:50%;top:-7.4%;transform:translateX(-50%);display:grid;place-items:center;width:19%;aspect-ratio:1;border:2px solid #c99b3d;border-radius:50%;background:#07111a;color:#efc96f;font:700 clamp(18px,2.1vw,34px) Georgia,serif;box-shadow:0 0 18px rgba(213,169,70,.22)}
.v320-kicker{margin:0 0 4.2%;color:#c0a46d;text-transform:uppercase;letter-spacing:.15em;font-size:clamp(7px,.65vw,11px)}
.v320-side-card h1{margin:0;color:var(--v320-gold-bright);font:700 clamp(23px,2.45vw,43px) Georgia,serif;line-height:1.05}
.v320-motto{margin:3.2% 0 7.2%;color:#e0c98e;font:700 clamp(10px,.86vw,15px) Georgia,serif;line-height:1.45}
.v320-login-form{display:grid;gap:clamp(7px,.75vh,12px);text-align:left}
.v320-login-form label{display:block;color:#cbb883;font-size:clamp(8px,.68vw,12px)}
.v320-input{display:block;width:100%;margin-top:4px;padding:clamp(8px,1vh,12px) clamp(9px,.85vw,14px);border:1px solid rgba(196,157,74,.42);border-radius:3px;background:#020911;color:#f6e6bd;outline:none}
.v320-input:focus{border-color:#e1bd67;box-shadow:0 0 0 2px rgba(225,189,103,.12)}
.v320-enter{width:100%;padding:clamp(9px,1.1vh,13px) 8px;border:1px solid #d4ad52;border-radius:3px;background:linear-gradient(#183f64,#071c31);color:#f7d98f;font:700 clamp(12px,1.1vw,19px) Georgia,serif;letter-spacing:.08em;cursor:pointer;box-shadow:inset 0 0 0 3px rgba(2,8,14,.72)}
.v320-enter:hover{filter:brightness(1.16)}
.v320-login-error{display:block;min-height:1.1em;margin-top:4px;text-align:center;color:#ffaaa1;font-size:clamp(8px,.65vw,11px)}
.v320-realm-mini{display:flex;align-items:center;justify-content:space-between;gap:8px;margin:4.2% 0;padding:3.4% 2.5%;border-top:1px solid rgba(216,173,76,.18);border-bottom:1px solid rgba(216,173,76,.18);font-size:clamp(8px,.66vw,11px)}
.v320-realm-mini span{display:flex;align-items:center;gap:6px;color:#d0b774}.v320-realm-mini small{color:#8ba0ae}.v320-realm-mini i{width:8px;height:8px;border-radius:50%;background:#a54a4a;box-shadow:0 0 8px rgba(165,74,74,.6)}.v320-realm-mini.online i{background:#6fdd82;box-shadow:0 0 10px rgba(111,221,130,.85)}
.v320-mode-switch{display:grid;grid-template-columns:repeat(3,1fr);gap:4px}
.v320-mode-switch button{padding:clamp(7px,.85vh,10px) 2px;border:1px solid rgba(216,173,76,.30);border-radius:2px;background:rgba(4,17,29,.78);color:#96a6b1;font-size:clamp(8px,.67vw,11px);cursor:pointer}
.v320-mode-switch button:hover,.v320-mode-switch button.active{border-color:#d8b05a;color:#ffe0a0;background:rgba(25,48,67,.95);box-shadow:0 0 10px rgba(216,173,76,.12)}
.v320-card-links{display:flex;justify-content:space-between;gap:12px;margin-top:4.5%}.v320-card-links a{color:#9ec1d5;font-size:clamp(8px,.65vw,11px);border-bottom:1px solid rgba(158,193,213,.25)}

/* The day artwork has a narrower built-in card. Keep the live card beyond Lady Serenity's sign. */
.realm-v320[data-realm-phase="day"] .v320-side-card{right:1.85%;top:31.3%;width:14.1%;min-height:42.4%;padding:4.1% 1.0% 1.0%}
.realm-v320[data-realm-phase="day"] .v320-card-crest{width:21%;top:-7.2%}
.realm-v320[data-realm-phase="day"] .v320-side-card h1{font-size:clamp(17px,1.55vw,28px)}
.realm-v320[data-realm-phase="day"] .v320-kicker{font-size:clamp(6px,.48vw,9px);letter-spacing:.11em}
.realm-v320[data-realm-phase="day"] .v320-motto{font-size:clamp(8px,.6vw,11px);margin-bottom:5%}
.realm-v320[data-realm-phase="day"] .v320-login-form{gap:5px}
.realm-v320[data-realm-phase="day"] .v320-input{padding:7px 8px}
.realm-v320[data-realm-phase="day"] .v320-enter{padding:8px 4px;font-size:clamp(10px,.8vw,14px)}
.realm-v320[data-realm-phase="day"] .v320-realm-mini{margin:3% 0;padding:2.5% 1.5%}
.realm-v320[data-realm-phase="day"] .v320-mode-switch button{padding:6px 1px;font-size:clamp(6px,.5vw,9px)}
.realm-v320[data-realm-phase="day"] .v320-card-links{margin-top:3%}

/* Authenticated header covers the baked header and makes every item real. */
.v320-header{position:absolute;z-index:30;left:0;right:0;top:0;height:7.1%;display:flex;align-items:center;gap:2.2%;padding:0 1.35%;background:linear-gradient(180deg,rgba(1,8,15,.94),rgba(1,8,15,.79));border-bottom:1px solid rgba(216,173,76,.2);backdrop-filter:blur(8px)}
.v320-brand{display:flex;align-items:center;gap:.65vw;min-width:25%;color:#f1d592}.v320-brand .crest-svg{width:clamp(32px,3.4vw,56px);height:clamp(32px,3.4vw,56px)}.v320-brand strong{display:block;font:700 clamp(13px,1.45vw,24px) Georgia,serif}.v320-brand small{display:block;margin-top:2px;color:#b79b64;text-transform:uppercase;letter-spacing:.18em;font-size:clamp(6px,.55vw,9px)}
.v320-nav{display:flex;align-self:stretch;justify-content:center;flex:1}.v320-nav a{display:flex;align-items:center;gap:.4vw;padding:0 .9vw;color:#c7b67d;border-bottom:2px solid transparent;font-size:clamp(9px,.86vw,14px)}.v320-nav a:hover,.v320-nav a.active{color:#f3d27a;border-bottom-color:#d8ad4c;background:rgba(216,173,76,.05)}.v320-nav .icon{width:clamp(12px,1.2vw,19px);height:clamp(12px,1.2vw,19px)}
.v320-clock{min-width:9.8%;padding-left:1%;text-align:right;color:#e5c773}.v320-clock strong{display:block;font:700 clamp(10px,.9vw,15px) Georgia,serif}.v320-clock small{display:block;margin-top:2px;color:#b89552;font-size:clamp(7px,.62vw,10px)}
.v320-login-clock{position:absolute;z-index:15;right:0;top:0;width:10%;height:7%;padding:1.1% 1.35% 0;background:#01080f;text-align:right;color:#e4c36f}.v320-login-clock strong{display:block;font:700 clamp(10px,.9vw,15px) Georgia,serif}.v320-login-clock small{font-size:clamp(7px,.62vw,10px);color:#b6924e}

/* Live population bar covers the decorative numbers in the approved night artwork. */
.v320-status-bar{position:absolute;z-index:18;left:16.05%;bottom:4.35%;width:67.25%;height:8.15%;display:grid;grid-template-columns:repeat(6,1fr);border:1px solid rgba(216,173,76,.58);border-radius:3px;background:#020a11;box-shadow:0 12px 35px rgba(0,0,0,.48),inset 0 1px rgba(255,255,255,.025);overflow:hidden}
.v320-stat{display:flex;align-items:center;justify-content:center;gap:.55vw;padding:.5% .7%;border-left:1px solid rgba(216,173,76,.12)}.v320-stat:first-child{border-left:0}.v320-stat .icon{width:clamp(14px,1.7vw,28px);height:clamp(14px,1.7vw,28px);color:#d8ad4c}.v320-stat span{display:block;color:#a8b5bf;font-size:clamp(7px,.62vw,10px)}.v320-stat strong{display:block;margin-top:2px;color:#f0cf7b;font:700 clamp(13px,1.45vw,25px) Georgia,serif;white-space:nowrap}.v320-stat.uptime strong{font-size:clamp(11px,1.1vw,19px)}
.realm-v320[data-realm-phase="day"] .v320-status-bar{bottom:4.35%;background:#020a11}

/* Authenticated right-side card. */
.v320-home-card .v320-motto{margin-bottom:5%}.v320-user-name{margin:4% 0 7%;color:#fff1c0;font:700 clamp(13px,1.2vw,21px) Georgia,serif}.v320-home-actions{display:grid;gap:7px}.v320-home-actions a{display:flex;justify-content:space-between;align-items:center;padding:clamp(8px,.9vh,11px) 10px;border:1px solid rgba(216,173,76,.28);border-radius:3px;background:rgba(8,29,45,.72);color:#e7cf94;font-size:clamp(8px,.7vw,12px)}.v320-home-actions a:hover{border-color:#d6ac52;background:rgba(15,49,72,.92)}.v320-signout{margin-top:8%;display:inline-block;color:#9db9c9;font-size:clamp(8px,.65vw,11px);border-bottom:1px solid rgba(157,185,201,.3)}

/* Landmark signs are the navigation. The approved labels remain visible underneath. */
.v320-landmarks{position:absolute;inset:0;z-index:12;pointer-events:none}.v320-landmark{position:absolute;display:block;pointer-events:auto;border:1px solid transparent;border-radius:4px;outline:none}.v320-landmark:focus-visible,.v320-landmark:hover{border-color:rgba(246,210,123,.75);box-shadow:0 0 18px rgba(216,173,76,.28),inset 0 0 22px rgba(216,173,76,.08)}.v320-landmark span{position:absolute;left:50%;bottom:-2px;transform:translate(-50%,70%);min-width:max-content;padding:4px 7px;border:1px solid rgba(216,173,76,.45);border-radius:12px;background:rgba(2,10,17,.94);color:#f0d08a;font-size:clamp(7px,.58vw,10px);opacity:0;transition:.18s;white-space:nowrap}.v320-landmark:hover span,.v320-landmark:focus-visible span{opacity:1;transform:translate(-50%,45%)}

/* Night positions */
.realm-v320[data-realm-phase="night"] .lm-hall{left:6.2%;top:25.4%;width:11.1%;height:9.0%}
.realm-v320[data-realm-phase="night"] .lm-forest{left:3.0%;top:49.6%;width:9.4%;height:8.4%}
.realm-v320[data-realm-phase="night"] .lm-byte{left:18.4%;top:40.9%;width:10.4%;height:9.0%}
.realm-v320[data-realm-phase="night"] .lm-forge{left:33.7%;top:34.4%;width:10.0%;height:8.6%}
.realm-v320[data-realm-phase="night"] .lm-ledger{left:40.7%;top:51.2%;width:10.2%;height:9.3%}
.realm-v320[data-realm-phase="night"] .lm-court{left:52.6%;top:45.5%;width:10.6%;height:8.5%}
.realm-v320[data-realm-phase="night"] .lm-lux{left:61.2%;top:30.8%;width:11.7%;height:8.8%}
.realm-v320[data-realm-phase="night"] .lm-serenity{left:65.6%;top:50.6%;width:10.0%;height:8.5%}
.realm-v320[data-realm-phase="night"] .lm-mug{left:55.7%;top:64.8%;width:10.0%;height:8.6%}

/* Day positions */
.realm-v320[data-realm-phase="day"] .lm-hall{left:13.3%;top:19.9%;width:8.8%;height:9.5%}
.realm-v320[data-realm-phase="day"] .lm-forest{left:5.5%;top:44.8%;width:8.7%;height:7.6%}
.realm-v320[data-realm-phase="day"] .lm-byte{left:24.2%;top:32.7%;width:7.8%;height:7.3%}
.realm-v320[data-realm-phase="day"] .lm-forge{left:44.1%;top:21.1%;width:8.1%;height:8.5%}
.realm-v320[data-realm-phase="day"] .lm-ledger{left:40.3%;top:46.4%;width:10.0%;height:7.8%}
.realm-v320[data-realm-phase="day"] .lm-court{left:58.7%;top:34.3%;width:7.6%;height:7.8%}
.realm-v320[data-realm-phase="day"] .lm-lux{left:68.6%;top:23.7%;width:9.8%;height:8.0%}
.realm-v320[data-realm-phase="day"] .lm-serenity{left:73.7%;top:51.6%;width:10.1%;height:8.2%}
.realm-v320[data-realm-phase="day"] .lm-mug{left:59.0%;top:60.7%;width:9.0%;height:7.9%}

.v320-mobile-menu{display:none}

@media(max-width:900px){
  body.realm-v320{overflow:auto;background:#01050a}
  .v320-stage{position:relative;left:auto;top:auto;transform:none;width:100%;height:auto;min-height:100vh;background:#01050a;overflow:hidden}
  .v320-art{position:fixed;background-size:cover;background-position:center}
  .v320-header{position:fixed;height:64px;padding:0 12px}.v320-brand{min-width:auto}.v320-brand span{display:none}.v320-nav{display:none}.v320-clock{margin-left:auto;min-width:auto}
  .v320-side-card,.realm-v320[data-realm-phase="day"] .v320-side-card{position:relative;right:auto;top:auto;width:calc(100% - 28px);max-width:390px;min-height:0;margin:105px auto 135px;padding:48px 24px 24px}
  .v320-side-card h1,.realm-v320[data-realm-phase="day"] .v320-side-card h1{font-size:2.2rem}.v320-kicker,.realm-v320[data-realm-phase="day"] .v320-kicker{font-size:.62rem}.v320-motto,.realm-v320[data-realm-phase="day"] .v320-motto{font-size:.9rem}.v320-card-crest,.realm-v320[data-realm-phase="day"] .v320-card-crest{width:64px;top:-33px}
  .v320-status-bar{position:fixed;left:8px;right:8px;bottom:8px;width:auto;height:72px;grid-template-columns:repeat(3,1fr);z-index:50}.v320-stat:nth-child(n+4){display:none}.v320-stat span{font-size:.62rem}.v320-stat strong{font-size:1.15rem}
  .v320-landmarks{display:none}.v320-login-clock{display:none}
  .v320-mobile-menu{position:fixed;z-index:45;left:10px;bottom:88px;display:flex;gap:6px}.v320-mobile-menu a{padding:8px 10px;border:1px solid rgba(216,173,76,.45);border-radius:4px;background:rgba(2,10,17,.92);color:#e5c77c;font-size:.72rem}
}

@media(prefers-reduced-motion:reduce){.v320-art{transition:none}}



/* v4.0.0 — Clean Foundation. The approved scenery is never repainted by CSS. */
.v400-compact-card{padding-top:5.15%}
.v400-compact-card .v320-kicker{margin:0 0 7%;line-height:1.45}
.v400-compact-card .v320-user-name{margin:2% 0 7%}

/* Neptune's trident is a real PNG asset. There is no text fallback. */
.v320-card-crest{
  width:29%;top:-13.2%;aspect-ratio:1;overflow:visible;
  border:2px solid #efc65f;
  background:radial-gradient(circle at 50% 42%,#183348 0,#07131e 52%,#01070c 100%);
  box-shadow:0 0 28px rgba(236,188,75,.42),inset 0 0 20px rgba(46,125,162,.18);
}
.v320-card-crest img{
  position:absolute;left:50%;top:50%;width:150%;height:166%;
  transform:translate(-50%,-50%);object-fit:contain;
  filter:drop-shadow(0 9px 7px rgba(0,0,0,.88)) drop-shadow(0 0 9px rgba(245,194,68,.48));
}
.v320-brand .crest-svg{object-fit:contain;transform:scale(1.24);filter:drop-shadow(0 5px 4px rgba(0,0,0,.75)) drop-shadow(0 0 8px rgba(237,183,66,.38))}

/* Separate Highland guardians. Their patches align to the protected core scenes. */
.v400-highlander{
  position:absolute;z-index:10;pointer-events:none;user-select:none;-webkit-user-drag:none;
  object-fit:contain;transform:translateX(-50%);transform-origin:50% 100%;
  filter:drop-shadow(0 11px 8px rgba(0,0,0,.72));transition:opacity 1.1s ease;
}
.v400-highlander-day{left:51.2%;bottom:9.8%;width:14%;opacity:0}
.v400-highlander-night{left:51.1%;bottom:9.4%;width:12%;opacity:0;filter:brightness(.80) saturate(.82) contrast(1.14) drop-shadow(0 12px 9px rgba(0,0,0,.86))}
.realm-v320[data-realm-phase="day"] .v400-highlander-day{opacity:1}
.realm-v320[data-realm-phase="night"] .v400-highlander-night{opacity:1}

/* Forged trident crests mounted on the gate standards. */
.v400-standard{position:absolute;z-index:11;width:3.15%;height:auto;pointer-events:none;object-fit:contain;filter:drop-shadow(0 4px 3px rgba(0,0,0,.9)) drop-shadow(0 0 5px rgba(238,185,67,.36))}
.realm-v320[data-realm-phase="day"] .v400-standard.one{left:19.52%;top:72.25%}
.realm-v320[data-realm-phase="day"] .v400-standard.two{left:35.50%;top:72.55%}
.realm-v320[data-realm-phase="day"] .v400-standard.three{left:78.20%;top:72.45%}
.realm-v320[data-realm-phase="night"] .v400-standard.one{left:17.35%;top:72.0%}
.realm-v320[data-realm-phase="night"] .v400-standard.two{left:41.50%;top:72.5%}
.realm-v320[data-realm-phase="night"] .v400-standard.three{display:none}

/* Realistic layered dragon. Wings articulate independently from the long body. */
.v400-dragon{position:absolute;z-index:9;left:0;top:0;width:20%;aspect-ratio:285/175;opacity:0;pointer-events:none;will-change:transform,opacity;transform-origin:50% 50%}
.v400-dragon.is-flying{opacity:1}
.v400-dragon img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;user-select:none;-webkit-user-drag:none;filter:drop-shadow(0 8px 6px rgba(0,0,0,.48)) contrast(1.06) saturate(1.06)}
.v400-dragon-wing-back{transform-origin:69% 31%;animation:v400WingBack 2.35s cubic-bezier(.45,.02,.48,.99) infinite}
.v400-dragon-body{transform-origin:58% 54%;animation:v400DragonBody 4.7s ease-in-out infinite}
.v400-dragon-wing-front{transform-origin:61% 33%;animation:v400WingFront 2.35s cubic-bezier(.45,.02,.48,.99) infinite}
.realm-v320[data-realm-phase="night"] .v400-dragon img{filter:brightness(.58) saturate(.72) contrast(1.24) drop-shadow(0 9px 8px rgba(0,0,0,.84)) drop-shadow(0 0 5px rgba(139,173,219,.24))}
@keyframes v400WingFront{
  0%,100%{transform:rotate(-3deg) scaleY(1) skewX(0deg)}
  17%{transform:rotate(6deg) scaleY(.84) skewX(-2deg)}
  35%{transform:rotate(15deg) scaleY(.64) skewX(-5deg)}
  53%{transform:rotate(2deg) scaleY(.90) skewX(-1deg)}
  70%{transform:rotate(-12deg) scaleY(1.10) skewX(3deg)}
  86%{transform:rotate(-7deg) scaleY(1.04) skewX(1deg)}
}
@keyframes v400WingBack{
  0%,100%{transform:rotate(2deg) scaleY(.98) skewX(0deg)}
  17%{transform:rotate(-5deg) scaleY(.86) skewX(2deg)}
  35%{transform:rotate(-12deg) scaleY(.67) skewX(5deg)}
  53%{transform:rotate(0deg) scaleY(.91) skewX(1deg)}
  70%{transform:rotate(10deg) scaleY(1.08) skewX(-3deg)}
  86%{transform:rotate(6deg) scaleY(1.03) skewX(-1deg)}
}
@keyframes v400DragonBody{0%,100%{transform:translateY(0) rotate(-.4deg)}50%{transform:translateY(1.5%) rotate(.7deg)}}

/* No added laser exists in this stylesheet. Each approved scene contains exactly one beam. */

@media(max-width:900px){
  .v400-highlander,.v400-standard,.v400-dragon{display:none}
  .v320-card-crest,.realm-v320[data-realm-phase="day"] .v320-card-crest{width:86px;top:-49px}
  .v320-card-crest img{width:150%;height:165%}
  .v400-compact-card{padding-top:59px}
}
@media(prefers-reduced-motion:reduce){
  .v400-dragon{display:none}
  .v400-highlander{transition:none}
}

/* Day panel has a narrower baked frame, so explicitly size the live crest and padding. */
.realm-v320[data-realm-phase="day"] .v320-card-crest{width:30%;top:-13.5%}
.realm-v320[data-realm-phase="day"] .v400-compact-card{padding-top:5.4%}
@media(max-width:900px){
  .realm-v320[data-realm-phase="day"] .v320-card-crest{width:86px;top:-49px}
  .realm-v320[data-realm-phase="day"] .v400-compact-card{padding-top:59px}
}