/* Homepage title screen (from title-lab3.html: Console dim, Damage numbers logo, Rajdhani at 0.8 scale) */
.stage{--glow:#1e2829;--glow2:#1c2226;--scan:rgba(0,0,0,.16);--vig:rgba(0,0,0,.45);--hi:#f6f8f9;--heal:#4ade80;
  position:relative;min-height:860px;padding:28px 56px 40px;overflow:hidden;
  background:radial-gradient(ellipse 45% 60% at 68% 52%,var(--glow) 0%,var(--glow2) 45%,transparent 75%),linear-gradient(180deg,var(--sky1),var(--sky2))}
.stage::before{content:"";position:absolute;inset:0;pointer-events:none;z-index:3;
  background:repeating-linear-gradient(0deg,var(--scan) 0 1px,transparent 1px 3px),radial-gradient(ellipse at center,transparent 55%,var(--vig))}
.bottle{position:absolute;right:450px;top:40px;height:780px;width:auto;max-width:none;z-index:1;filter:drop-shadow(0 30px 60px rgba(0,0,0,.9)) brightness(.95) contrast(1.05);transform:rotate(4deg);animation:float 6s ease-in-out infinite}
.top{position:relative;z-index:4;display:flex;justify-content:space-between;font:600 11px var(--h);letter-spacing:.2em;color:var(--dim);text-transform:uppercase}
.top b{color:var(--acc);font-weight:600}
.left{position:relative;z-index:4;width:480px;margin-top:44px}

/* Damage numbers logo */
.logo{font:inherit;color:var(--ink)}
.lg-crit{position:relative;display:block;padding-top:72px;width:470px}
.lg-crit .w{display:block;font:400 64px/1 var(--logo);letter-spacing:.02em;white-space:nowrap;position:relative;z-index:1}
.lg-crit .w b{font-weight:400;color:var(--acc)}
.lg-crit em{position:absolute;left:var(--x);top:var(--y);z-index:2;font:400 var(--fs)/1 var(--logo);font-style:normal;white-space:nowrap;text-shadow:0 2px 0 #000,0 0 12px rgba(0,0,0,.9);pointer-events:none;opacity:0}
.lg-crit em.crit{color:var(--acc);animation:pcrit 1.5s cubic-bezier(.2,1,.3,1) forwards}
.lg-crit em.hit{color:var(--ink);animation:phit 1.1s ease-out forwards}
.lg-crit em.heal{color:var(--heal);animation:pheal 1.8s ease-out forwards}
.lg-crit em.status{color:var(--alt);font-family:var(--h);font-weight:700;letter-spacing:.14em;animation:pstat 1.9s cubic-bezier(.2,1,.3,1) forwards}
.lg-crit em.miss{color:var(--dim);font-style:italic;animation:pmiss 1s ease-out forwards}
.lg-crit em.still{opacity:1}
@keyframes pcrit{0%{opacity:0;transform:scale(2.2) rotate(var(--r))}10%{opacity:1;transform:scale(.9) rotate(var(--r))}14%{transform:translateX(-4px) scale(1.05) rotate(var(--r))}18%{transform:translateX(4px) rotate(var(--r))}22%{transform:rotate(var(--r))}70%{opacity:1}100%{opacity:0;transform:translateY(-30px) rotate(var(--r))}}
@keyframes phit{0%{opacity:0;transform:translate(0,10px) scale(.7)}15%{opacity:1;transform:translate(calc(var(--dx)*.3),-14px) scale(1.1)}100%{opacity:0;transform:translate(var(--dx),24px) scale(.9)}}
@keyframes pheal{0%{opacity:0;transform:translateY(12px)}20%{opacity:1}75%{opacity:1}100%{opacity:0;transform:translateY(-40px)}}
@keyframes pstat{0%{opacity:0;transform:translateY(8px);letter-spacing:.5em}18%{opacity:1;transform:none;letter-spacing:.14em}80%{opacity:1}100%{opacity:0;transform:translateY(-12px)}}
@keyframes pmiss{0%{opacity:0;transform:translateX(0)}20%{opacity:1}100%{opacity:0;transform:translateX(calc(var(--dx)*.8)) translateY(-10px)}}

.tag{font:500 16px var(--h);letter-spacing:.3em;color:var(--dim);text-transform:uppercase;margin:18px 0 40px 4px}
.menu{list-style:none;border-left:2px solid var(--line)}
.menu a{display:flex;align-items:center;gap:14px;padding:6px 18px;font:500 27px/1.1 var(--h);letter-spacing:.08em;text-transform:uppercase;color:var(--menu);position:relative;transition:padding .12s}
.menu a::before{content:"";width:0;height:0;border:9px solid transparent;border-left:14px solid var(--acc);border-right:0;opacity:0;margin-left:-6px}
.menu a:hover,.menu a:focus-visible,.menu a.on{color:var(--hi);background:linear-gradient(90deg,color-mix(in srgb,var(--acc) 28%,transparent),transparent 90%);outline:0;padding-left:26px}
.menu a:hover::before,.menu a:focus-visible::before,.menu a.on::before{opacity:1}
.menu a.on{border-left:3px solid var(--acc);margin-left:-2px}
.press{margin-top:42px;font:600 17.6px var(--h);letter-spacing:.3em;text-transform:uppercase;color:var(--acc);animation:blink 1.4s steps(2,jump-none) infinite}
@keyframes blink{50%{opacity:.15}}

/* Continue panel: the newest review, without its conclusions */
.cont{position:absolute;z-index:4;right:56px;bottom:60px;width:440px;background:var(--panel);border:1px solid var(--line);border-top:3px solid var(--r,var(--acc));padding:20px 24px 22px}
.cont h2,.lower h2{font:600 14.4px var(--h);letter-spacing:.3em;text-transform:uppercase;color:var(--acc)}
.cont .lab{display:inline-block;margin-left:10px;font:600 11.2px var(--h);letter-spacing:.2em;background:var(--acc);color:var(--on);padding:0 8px;text-transform:uppercase}
.cont h3{font:700 43px/1 var(--h);text-transform:uppercase;margin-top:6px}
.cont .meta{color:var(--dim);font-size:14px;letter-spacing:.06em;text-transform:uppercase}
.cont .rar{margin-top:10px;font-size:13px}
.cont .char{margin:10px 0 8px;font-weight:600;color:var(--ink)}
.cont .intro{font-size:14.5px;color:var(--soft);margin-bottom:16px}

.lower{position:relative;display:grid;grid-template-columns:1.9fr 1fr;gap:28px;padding:34px 56px 30px;border-top:1px solid var(--line)}
.lower h2{margin-bottom:14px}
.tier{align-self:start;background:var(--tile);border:1px solid var(--line);padding:18px 20px}
.tier h3{font:700 24px/1.05 var(--h);text-transform:uppercase;margin-bottom:10px}
.tier p{font-size:14.5px;color:var(--soft);margin-bottom:14px}

@media(max-width:900px){
 .stage{padding:20px 16px 30px;min-height:0}
 .bottle{height:420px;right:-30px;top:120px;opacity:.55}
 .left{width:100%;margin-top:24px}.logo{zoom:.7}
 .cont{position:relative;right:auto;bottom:auto;width:100%;margin-top:34px}
 .lower{grid-template-columns:1fr;padding:28px 16px}
 .top{font-size:12px}
}

/* Fresh site: hide the lower area until there are slots or a tier list to show */
.lower section:not(:has(.slot)){display:none}
.lower:not(:has(.slot,.tier)){display:none}