.lvl120mage-landing{
  position:fixed;
  inset:0;
  z-index:2147483647;
  display:flex;
  align-items:center;
  justify-content:center;
  overflow:hidden;
  background:#F9FAFA;
  user-select:none;
  -webkit-user-select:none;
  -webkit-tap-highlight-color:transparent;
}
.lvl120mage-landing[hidden]{display:none}

.lvl120mage-wordmark{
  position:absolute;
  top:var(--wordmark-top,20px);
  left:var(--wordmark-left,20px);
  z-index:3;
  width:clamp(84px,7vw,108px);
  margin:0;
  pointer-events:none;
}
.lvl120mage-wordmark img{display:block;width:100%;height:auto}

/* Paint the complete scene behind a veil, then reveal it as one composition. */
.lvl120mage-landing::before{
  content:"";
  position:absolute;
  inset:0;
  z-index:4;
  background:#F9FAFA;
  opacity:1;
  pointer-events:none;
  will-change:opacity;
  transition:opacity .85s cubic-bezier(.22,.61,.36,1);
}
.lvl120mage-landing.is-scene-ready::before{opacity:0}

.lvl120mage-landing-stage{
  position:relative;
  flex:0 0 auto;
  width:max(100vw,calc(100vh * 16 / 9));
  aspect-ratio:16/9;
  transform-origin:0 0;
  pointer-events:none;
}
.lvl120mage-landing.is-scene-ready .lvl120mage-landing-stage{pointer-events:auto}

.lvl120mage-landing-scene{
  position:absolute;
  inset:0;
  z-index:0;
  display:block;
  width:100%;
  height:100%;
  object-fit:cover;
  pointer-events:none;
  -webkit-user-drag:none;
}

/* Independent artwork layer, positioned from the master and kept in frame on narrow screens. */
.lvl120mage-landing-game{
  position:absolute;
  left:84.08203125%;
  top:68.2638889%;
  width:19.55078125%;
  height:auto;
  z-index:1;
  display:block;
  pointer-events:none;
  -webkit-user-drag:none;
}

.lvl120mage-landing-particles{
  position:absolute;
  inset:0;
  z-index:2;
  width:100%;
  height:100%;
  pointer-events:none;
  display:block;
}

/* The artwork already contains the CRT. This transparent plane follows its glass. */
.lvl120mage-landing-screen{
  position:absolute;
  left:0;
  top:0;
  width:400px;
  height:320px;
  transform-origin:0 0;
  z-index:3;
  margin:0;
  padding:0;
  border:0;
  border-radius:26px;
  overflow:hidden;
  cursor:default;
  appearance:none;
  -webkit-appearance:none;
  background:transparent;
  color:#303c66;
  font-family:"Courier New",monospace;
  text-align:center;
  -webkit-tap-highlight-color:transparent;
  opacity:0;
  transition:opacity .3s ease;
  isolation:isolate;
}
.lvl120mage-landing.is-scene-ready .lvl120mage-landing-screen{opacity:1}
.lvl120mage-crt-content{
  position:absolute;
  inset:0;
  display:flex;
  align-items:center;
  flex-direction:column;
  padding-top:19px;
  box-sizing:border-box;
  transition:opacity .42s ease,filter .42s ease;
  filter:drop-shadow(0 0 1px rgba(89,132,229,.28));
}
.lvl120mage-crt-avatar{
  display:block;
  width:144px;
  height:144px;
  flex:none;
  border:0;
  border-radius:50%;
  padding:0;
  background:#000;
  object-fit:cover;
  image-rendering:pixelated;
  box-shadow:0 0 12px rgba(99,147,255,.15);
  pointer-events:none;
}
.lvl120mage-crt-password{
  display:flex;
  align-items:center;
  flex:none;
  width:280px;
  height:38px;
  margin-top:18px;
  padding:0 12px;
  box-sizing:border-box;
  border:2px solid #62759f;
  border-radius:3px;
  background:rgba(244,249,255,.35);
  box-shadow:inset 1px 1px 0 rgba(255,255,255,.9),1px 1px 0 rgba(64,87,136,.18);
}
.lvl120mage-crt-lock{width:17px;height:21px;flex:none;margin-right:24px}
.lvl120mage-crt-input{
  display:block;
  flex:1;
  min-width:0;
  width:100%;
  height:100%;
  margin:0;
  padding:0;
  border:0;
  border-radius:0;
  outline:none;
  appearance:none;
  -webkit-appearance:none;
  background:transparent;
  color:#303c66;
  -webkit-text-fill-color:#303c66;
  font:24px/1 "Courier New",monospace;
  letter-spacing:3px;
  caret-color:#6079aa;
  user-select:text;
  -webkit-user-select:text;
}
.lvl120mage-crt-input:disabled{opacity:1}
.lvl120mage-crt-password:focus-within{border-color:#344f89;box-shadow:0 0 0 1px #8ca6d2}
.lvl120mage-crt-login:focus-visible{outline:3px solid #5d79bb;outline-offset:4px}
.lvl120mage-crt-login:disabled{opacity:1;cursor:default}
.lvl120mage-crt-login{
  display:flex;
  align-items:center;
  justify-content:center;
  flex:none;
  width:232px;
  height:48px;
  margin-top:16px;
  box-sizing:border-box;
  border:2px solid #50628c;
  border-radius:2px;
  background:linear-gradient(180deg,#f3f4ff 0%,#d7dff9 90%);
  box-shadow:inset 3px 3px 0 #fff,inset -3px -3px 0 #a2afd3,3px 4px 0 #66789c;
  color:#202940;
  font-family:"Courier New",monospace;
  cursor:pointer;
  appearance:none;
  -webkit-appearance:none;
  padding:0;
  font-size:25px;
  line-height:1;
  letter-spacing:-1px;
  text-shadow:0 0 2px rgba(88,125,207,.35);
  transition:box-shadow .14s ease,background .14s ease;
}
@media (hover:hover){
  .lvl120mage-crt-login:hover:not(:disabled){background:linear-gradient(#fff,#e7edff);box-shadow:inset 3px 3px 0 #fff,inset -3px -3px 0 #a2afd3,3px 4px 0 #66789c,0 0 12px #bcd5ff}
}
/* Very faint glass glow and scanlines; neither layer darkens on activation. */
.lvl120mage-landing-screen::before,.lvl120mage-landing-screen::after{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
}
.lvl120mage-landing-screen::before{
  background:radial-gradient(ellipse at 50% 42%,rgba(218,236,255,.03) 28%,rgba(139,182,255,.12) 100%);
  box-shadow:inset 0 0 22px rgba(118,177,255,.14);
  animation:lvl120mage-phosphor 5s ease-in-out infinite;
}
.lvl120mage-landing-screen::after{
  background:repeating-linear-gradient(0deg,transparent 0,transparent 2px,rgba(71,112,184,.085) 2px,rgba(71,112,184,.085) 3px);
  opacity:.45;
}
/* Clear enlarged phosphor lines and particles before the camera enters the glass. */
.lvl120mage-landing-particles{opacity:1;transition:opacity .2s ease}
.lvl120mage-landing-screen::before,.lvl120mage-landing-screen::after{transition:opacity .2s ease}
.lvl120mage-landing.is-booting .lvl120mage-landing-particles,
.lvl120mage-landing.is-booting .lvl120mage-landing-screen::before,
.lvl120mage-landing.is-booting .lvl120mage-landing-screen::after{animation:none;opacity:0}
.lvl120mage-landing.is-booting .lvl120mage-crt-login{box-shadow:inset 2px 2px 0 #a2afd3,inset -2px -2px 0 #fff,1px 1px 0 #66789c}
.lvl120mage-landing.is-entering .lvl120mage-crt-content{opacity:0;filter:blur(2px);transition-delay:.12s}
.lvl120mage-landing.is-booting .lvl120mage-landing-stage{will-change:transform}
.lvl120mage-landing.is-entering .lvl120mage-landing-stage{transition:transform 1.35s cubic-bezier(.55,.02,.16,1)}
.lvl120mage-landing::after{
  content:"";
  position:absolute;
  inset:0;
  z-index:5;
  background:#F9FAFA;
  opacity:0;
  pointer-events:none;
  transition:opacity .52s ease;
}
.lvl120mage-landing.is-covering::after{opacity:1}
.lvl120mage-landing.is-revealing{opacity:0;transition:opacity .48s ease}
@keyframes lvl120mage-phosphor{0%,100%{opacity:.55}50%{opacity:.9}}
/* Keep the entrance reachable when a portrait viewport crops the wide scene. */
@media (max-aspect-ratio:4/3){
  .lvl120mage-landing-stage{position:absolute;left:clamp(calc(100% - 100vh * 16 / 9),calc(50% - 100vh * 16 / 9 * var(--screen-focus-x,.76)),0px)}
}
@media (prefers-reduced-motion:reduce){
  .lvl120mage-landing::before{transition-duration:.18s}
  .lvl120mage-landing-screen::before{animation:none}
  .lvl120mage-landing.is-entering .lvl120mage-landing-stage{transition:none}
  .lvl120mage-landing.is-entering .lvl120mage-crt-content{transition:opacity .12s;filter:none}
  .lvl120mage-landing::after,.lvl120mage-landing.is-revealing{transition-duration:.18s}
}

/* A short, local rejection cue instead of a native validation popup. */
.lvl120mage-crt-password.is-rejected{animation:lvl120mage-reject .32s ease;border-color:#936575}
@keyframes lvl120mage-reject{
  0%,100%{transform:translateX(0)}
  20%,60%{transform:translateX(-5px)}
  40%,80%{transform:translateX(5px)}
}
@media (prefers-reduced-motion:reduce){
  .lvl120mage-crt-password.is-rejected{animation:none}
}

/* Outlined P22 Sting numerals stay centered above the entrance's white veil. */
.lvl120mage-entrance-counter{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);z-index:6;color:#101016;pointer-events:none;opacity:0;transition:opacity .16s ease}
.lvl120mage-entrance-counter[hidden]{display:none}
.lvl120mage-entrance-counter svg{display:block;width:52px;height:18px}
.lvl120mage-landing.is-covering .lvl120mage-entrance-counter{opacity:1}

.lvl120mage-counter-gain{position:absolute;left:calc(50% + 17px);top:0;opacity:0;font:500 8px/1 "Syne",sans-serif}
.lvl120mage-entrance-counter.is-leveling .lvl120mage-counter-gain{animation:lvl120mage-level-gain .44s ease-out infinite}
.lvl120mage-entrance-counter[data-value="120"] svg{animation:lvl120mage-level-up .42s ease-out both}
@keyframes lvl120mage-level-gain{0%{opacity:0;transform:translateY(4px)}25%{opacity:.55}100%{opacity:0;transform:translateY(-9px)}}
@keyframes lvl120mage-level-up{0%,100%{transform:none}35%{transform:translateY(-2px) scale(1.08)}}
@media(prefers-reduced-motion:reduce){.lvl120mage-counter-gain{display:none}.lvl120mage-entrance-counter[data-value="120"] svg{animation:none}}