/* v0.80.0 title screen revamp (title.js). Full-window painted scenes, logo + pitch + one big Play button, six feature cards. */
body.m-title main{padding:0!important;max-width:none}
body.m-title .tsOld{display:none!important}
body.m-title header .brand,body.m-title #guSR,body.m-title .hud-top .lvl{display:none!important}
body.m-title header{background:transparent!important;border:0!important;box-shadow:none!important}
body.m-title{overflow:hidden}
body.m-title.ts-open header{visibility:hidden}

.tsx{position:fixed;inset:0;overflow:hidden;background:#07080a;color:#e9ebef;z-index:1}
.tsBg{position:absolute;inset:0}
.tsSlide{position:absolute;inset:0;width:100%;height:100%;opacity:0;transition:opacity 1.2s ease;transform-origin:65% 60%}
.tsSlide.on{opacity:1;animation:tsDrift 14s ease-out both}
@keyframes tsDrift{from{transform:scale(1.07)}to{transform:scale(1)}}
@media (prefers-reduced-motion:reduce){.tsSlide.on{animation:none}.tsF.on .tsBar{animation:none!important;width:100%}}
/* dark on the left for the logo, dark at the bottom for the cards */
.tsShade{position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(90deg,rgba(5,6,8,.94) 0%,rgba(5,6,8,.78) 30%,rgba(5,6,8,.15) 62%,rgba(5,6,8,0) 80%),
             linear-gradient(0deg,rgba(5,6,8,.96) 0%,rgba(5,6,8,.6) 22%,rgba(5,6,8,0) 42%),
             linear-gradient(180deg,rgba(5,6,8,.6) 0%,rgba(5,6,8,0) 14%)}

.tsMain{position:absolute;left:calc(48px*var(--z));top:calc(96px*var(--z));width:min(calc(600px*var(--z)),48vw);display:flex;flex-direction:column;align-items:flex-start;z-index:2}
.tsLogo{font:800 calc(92px*var(--z))/.9 var(--gu-title);letter-spacing:1px;color:#f2f3f5;text-transform:uppercase;text-shadow:0 4px 0 #000,0 0 40px rgba(0,0,0,.8);white-space:nowrap}
.tsLogo span{color:var(--gu-amber);margin-left:.18em}
.tsTag{margin-top:calc(10px*var(--z));font:700 calc(22px*var(--z))/1.1 var(--gu-display);letter-spacing:4px;text-transform:uppercase;color:var(--gu-amber2)}
.tsPitch{margin:calc(14px*var(--z)) 0 calc(26px*var(--z));font:500 calc(19px*var(--z))/1.4 var(--gu-body);color:#d7dae0;max-width:calc(520px*var(--z));text-shadow:0 1px 2px #000}
.tsPlay{min-height:calc(76px*var(--z))!important;min-width:calc(280px*var(--z));font-size:calc(34px*var(--z))!important;letter-spacing:3px!important;animation:tsPulse 2.4s ease-in-out infinite}
@keyframes tsPulse{0%,100%{filter:none}50%{filter:brightness(1.12) drop-shadow(0 0 calc(18px*var(--z)) rgba(255,138,31,.55))}}
.tsSub{display:flex;gap:calc(14px*var(--z));margin-top:calc(22px*var(--z));flex-wrap:wrap}
.tsSub .gbtn{min-height:calc(46px*var(--z));font-size:calc(16px*var(--z));padding:0 calc(20px*var(--z))}

/* the caption is only used on short screens (phones); on bigger screens the cards say it */
.tsCap{display:none}

.tsFeats{position:absolute;left:calc(48px*var(--z));right:calc(48px*var(--z));bottom:calc(30px*var(--z));display:grid;grid-template-columns:repeat(6,1fr);gap:calc(10px*var(--z));z-index:2}
.tsF{position:relative;text-align:left;cursor:pointer;border:1px solid rgba(255,255,255,.08);border-radius:calc(8px*var(--z));padding:calc(14px*var(--z)) calc(14px*var(--z)) calc(14px*var(--z));
  background:rgba(14,15,19,.72);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);color:#c9ccd3;overflow:hidden;transition:background .2s,border-color .2s,transform .2s}
.tsF b{display:block;font:800 calc(17px*var(--z))/1.1 var(--gu-display);letter-spacing:.6px;text-transform:uppercase;color:#fff;margin-bottom:calc(6px*var(--z))}
.tsF span{display:block;font:500 calc(14px*var(--z))/1.35 var(--gu-body);color:#aeb3bc}
.tsF:hover{border-color:rgba(255,255,255,.2)}
.tsF.on{background:rgba(28,22,14,.86);border-color:rgba(255,138,31,.6);transform:translateY(calc(-4px*var(--z)))}
.tsF.on b{color:var(--gu-amber2)}
.tsF.on span{color:#e2e4e8}
.tsBar{position:absolute;left:0;top:0;height:3px;width:0;background:var(--gu-amber)}
.tsF.on .tsBar{animation:tsFill 6.5s linear forwards}
@keyframes tsFill{from{width:0}to{width:100%}}

/* Play sheet: the career list (online login/slots + offline slots) */
.tsScrim{position:absolute;inset:0;background:rgba(0,0,0,.55);z-index:20;opacity:0;pointer-events:none;transition:opacity .2s}
.tsScrim.on{opacity:1;pointer-events:auto}
.tsSheet{position:absolute;top:0;right:0;bottom:0;width:min(calc(560px*var(--z)),92vw);z-index:21;display:flex;flex-direction:column;
  background:linear-gradient(180deg,#17181c,#0f1013);border-left:1px solid rgba(255,255,255,.08);box-shadow:-20px 0 60px rgba(0,0,0,.6);transform:translateX(105%);transition:transform .25s ease}
.tsSheet.on{transform:none}
.tsSh{display:flex;align-items:center;gap:10px;padding:calc(12px*var(--z)) calc(12px*var(--z)) calc(12px*var(--z)) calc(20px*var(--z));border-bottom:1px solid rgba(255,255,255,.07)}
.tsSh h2{margin:0;flex:1;font:800 calc(26px*var(--z))/1 var(--gu-title);letter-spacing:.6px;text-transform:uppercase;color:#fff}
.tsSb{flex:1;overflow:auto;padding:calc(14px*var(--z)) calc(16px*var(--z)) calc(30px*var(--z));-webkit-overflow-scrolling:touch}
.tsSb .tpanel{background:transparent;border:0;padding:0;backdrop-filter:none}
.tsSb .slotCard{margin-bottom:calc(10px*var(--z))}

/* landscape phones and short windows */
@media (max-height:620px){
  .tsMain{left:calc(22px*var(--z));top:calc(48px*var(--z));width:52vw}
  .tsLogo{font-size:clamp(34px,8.5vh,64px)}
  .tsTag{font-size:clamp(12px,3.4vh,18px);letter-spacing:3px;margin-top:6px}
  .tsPitch{font-size:clamp(12px,3.3vh,16px);margin:8px 0 12px;line-height:1.3}
  .tsPlay{min-height:clamp(44px,12vh,64px)!important;min-width:clamp(170px,30vw,260px);font-size:clamp(20px,6vh,30px)!important}
  .tsSub{margin-top:12px;gap:10px}
  .tsSub .gbtn{min-height:clamp(34px,9vh,44px);font-size:clamp(12px,3.4vh,15px);padding:0 14px}
  .tsFeats{left:12px;right:12px;bottom:22px;grid-template-columns:repeat(6,1fr);gap:5px}
  .tsF{padding:clamp(6px,2vh,10px) 6px;border-radius:6px;text-align:center}
  .tsF b{font-size:clamp(10px,2.9vh,13px);margin:0;letter-spacing:.2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .tsF span,.tsF.on span{display:none}
  .tsF.on{transform:translateY(-3px)}
  .tsCap{display:block;position:absolute;left:22px;right:40vw;bottom:calc(clamp(6px,2vh,10px)*2 + clamp(10px,2.9vh,13px) + 38px);z-index:2;pointer-events:none;text-shadow:0 1px 3px #000}
  .tsCap b{display:block;font:800 clamp(12px,3.6vh,16px)/1.1 var(--gu-display);text-transform:uppercase;letter-spacing:.6px;color:var(--gu-amber2)}
  .tsCap span{display:block;font:500 clamp(11px,3.2vh,14px)/1.3 var(--gu-body);color:#e2e4e8;margin-top:2px}
}
@media (max-height:620px) and (max-width:700px){ .tsMain{width:auto;right:22px} .tsFeats{display:none} }
/* portrait / narrow screens: stack it */
@media (max-width:900px) and (min-height:621px){
  .tsMain{left:20px;right:20px;width:auto;top:80px}
  .tsLogo{font-size:clamp(44px,13vw,80px)}
  .tsFeats{left:16px;right:16px;bottom:16px;grid-template-columns:repeat(2,1fr)}
  .tsF span{font-size:13px}
}