.intro{background-color:#090807;background-image:linear-gradient(90deg,#080706 0 38%,#08070699 66%,#080706 100%),linear-gradient(145deg,transparent 30%,#4f160f33 31% 32%,transparent 33%),url('./assets/haven/interiors/grunge-wall.png')}
.intro:before{content:"";position:absolute;inset:0;background:radial-gradient(circle at 75% 28%,#a5371526,transparent 26%),linear-gradient(180deg,#20120a22,transparent 48%,#0008);pointer-events:none}
.touch{display:none;position:absolute;z-index:7;left:auto;right:max(14px,env(safe-area-inset-right));bottom:max(14px,env(safe-area-inset-bottom));width:156px;height:156px;padding:0;grid-template:repeat(3,48px)/repeat(3,48px);gap:6px;filter:drop-shadow(0 8px 18px #000b)}
.touch button{width:48px;height:48px;padding:0;border:1px solid #c8b7a977;background:#120d0dcc;color:#fff;border-radius:50%;font-size:18px;backdrop-filter:blur(5px);touch-action:none;user-select:none;-webkit-user-select:none}
.touch button:active,.touch button.is-held{background:#d8212ddd;border-color:#ff7b7b;transform:scale(.94)}
.touch-up{grid-column:2;grid-row:1}.touch-left{grid-column:1;grid-row:2}.touch-down{grid-column:2;grid-row:3}.touch-right{grid-column:3;grid-row:2}
.survivor-select{display:grid;grid-template-columns:repeat(4,1fr);gap:7px;width:min(580px,92%);margin-top:20px}
.survivor-select button{padding:8px 7px 10px;background:#100c0ddd;border:1px solid #533139;color:#eee;min-width:0;overflow:hidden}
.survivor-select button.selected{background:#821923;border-color:#ff5964;box-shadow:0 0 18px #d8212d55}
.survivor-select b,.survivor-select span{display:block}.survivor-select b{font:13px Archivo Black}.survivor-select span{font:7px IBM Plex Mono;color:#ad9d9e;margin-top:4px}
.survivor-portrait{width:68px;height:68px;margin:0 auto 7px!important;background-repeat:no-repeat;background-size:680px auto!important;background-position:0 -136px!important;image-rendering:pixelated;filter:drop-shadow(0 5px 5px #000b);transform:scale(1.08);transform-origin:center bottom}.portrait-jax{background-image:url('./assets/death-city/survivor.png')}.portrait-mara{background-image:url('./assets/death-city/female.png')}.portrait-rook{background-image:url('./assets/death-city/mafioso.png')}.portrait-ward{background-image:url('./assets/death-city/sniperkapten.png')}.survivor-select button.selected .survivor-portrait{filter:drop-shadow(0 5px 8px #ff6274aa) brightness(1.08)}
.brand img{display:block;width:48px;height:48px;object-fit:cover;object-position:center;border:1px solid #7a3039}
.logo-lockup img{display:block;width:min(170px,30vw);aspect-ratio:1;object-fit:cover;margin:10px auto 0;border:1px solid #6d3038}
body.game-active{overflow:hidden}
body.game-active header,body.game-active .intro,body.game-active .signal-strip,body.game-active .token-economy,body.game-active .records,body.game-active footer{display:none}
body.game-active main{height:100dvh}
body.game-active .game-frame{position:fixed;inset:0;z-index:100;width:100vw;height:100dvh;margin:0;border:0;display:grid;grid-template-rows:auto auto minmax(0,1fr) auto}
body.game-active .stage{aspect-ratio:auto;min-height:0}
body.game-active .bottom-hud{background:#090708}

/* REDHAVEN presentation pass */
header{border-bottom-color:#5d252c;box-shadow:0 10px 40px #0009}
.brand{transition:filter .25s ease,transform .25s ease}.brand:hover{filter:drop-shadow(0 0 14px #e02335aa);transform:translateY(-1px)}
.nav-play{padding:9px 13px;border:1px solid #8f3039;background:linear-gradient(135deg,#5d1019,#bd1e2b);color:#fff!important}
.intro{min-height:calc(100svh - 72px);grid-template-columns:minmax(0,1.08fr) minmax(330px,.72fr);gap:clamp(35px,7vw,110px);padding:clamp(55px,8vh,95px) 7vw;align-items:center;isolation:isolate}
.intro:before{animation:redhaven-pulse 7s ease-in-out infinite alternate}
.intro:after{background:linear-gradient(115deg,transparent 44%,#df253015 45% 47%,transparent 48%),repeating-linear-gradient(90deg,transparent 0 79px,#9e303008 80px),radial-gradient(circle at 77% 43%,#d8263338,transparent 30%);animation:grid-drift 15s linear infinite}
.intro-copy{max-width:760px;animation:intro-rise .8s cubic-bezier(.2,.8,.2,1) both}
.season-tag{display:inline-flex;align-items:center;gap:8px;margin:0 0 3px;padding:7px 10px;border:1px solid #673039;background:#12090ccf;color:#bfaeb0;font:8px IBM Plex Mono;letter-spacing:1.5px}.season-tag i{width:6px;height:6px;border-radius:50%;background:#4ee08a;box-shadow:0 0 12px #4ee08a}
.intro h1{filter:drop-shadow(0 16px 30px #000b)}.intro h1 em{position:relative}.intro h1 em:after{content:"";position:absolute;left:1%;right:0;bottom:-7px;height:4px;background:linear-gradient(90deg,#e22936,transparent);transform:skewX(-24deg)}
.lead{font-size:16px;max-width:660px}.feature-row span{transition:border-color .2s,background .2s,transform .2s}.feature-row span:hover{transform:translateY(-2px);border-color:#a63b45;background:#261015}
.hero-cta{display:inline-flex;align-items:center;gap:22px;margin-top:25px;padding:16px 20px;background:linear-gradient(135deg,#e02935,#8d111b);border:1px solid #ff6069;box-shadow:0 12px 40px #b5162342;color:#fff;text-decoration:none;clip-path:polygon(0 0,96% 0,100% 24%,100% 100%,4% 100%,0 76%);transition:transform .22s,filter .22s}.hero-cta:hover{transform:translateY(-3px);filter:brightness(1.15)}.hero-cta b{font:14px Archivo Black;letter-spacing:.4px}.hero-cta span{font:8px IBM Plex Mono;color:#ffd9d9}
.intro .hero-visual{display:grid;justify-self:end;width:min(470px,100%);padding:0;border:0;background:none;gap:16px;animation:emblem-enter 1s .12s cubic-bezier(.2,.8,.2,1) both}
.emblem-shell{position:relative;aspect-ratio:1;border:1px solid #7c343d;background:#15090d;overflow:hidden;clip-path:polygon(7% 0,100% 0,100% 93%,93% 100%,0 100%,0 7%);box-shadow:0 35px 90px #000d,0 0 70px #ad152535}
.emblem-shell:before{content:"";position:absolute;inset:-40%;z-index:2;background:linear-gradient(115deg,transparent 40%,#ffffff24 49%,transparent 57%);animation:emblem-shine 5.5s 1.5s ease-in-out infinite;pointer-events:none}.emblem-shell img{display:block;width:100%;height:100%;object-fit:cover;transition:transform .6s ease,filter .6s ease}.emblem-shell:hover img{transform:scale(1.035);filter:saturate(1.12) contrast(1.04)}
.objective-card{border:1px solid #573039;background:linear-gradient(135deg,#100a0ce8,#080708e8);padding:19px 22px;backdrop-filter:blur(10px)}.objective-card>p{margin:0 0 6px;color:#8b7d7f;font:8px IBM Plex Mono;letter-spacing:1.4px}.objective-card>strong{font:20px Archivo Black}.objective-card dl{margin:15px 0 0}.objective-card dl div{display:flex;gap:13px;padding:7px 0;border-top:1px solid #342125}.objective-card dt{color:#e32e3a;font:11px Archivo Black}.objective-card dd{margin:0;color:#a69799;font:9px IBM Plex Mono}
.signal-strip{height:44px;overflow:hidden;border-block:1px solid #6d2d36;background:#d51f2b;color:#fff;display:flex;align-items:center;box-shadow:0 12px 40px #0008}.signal-strip>div{display:flex;align-items:center;gap:28px;white-space:nowrap;min-width:max-content;animation:signal-run 24s linear infinite;font:10px Archivo Black;letter-spacing:1.4px}.signal-strip i{color:#3b080d;font-style:normal}
.game-frame{margin-top:74px;border-color:#813843;box-shadow:0 35px 100px #000,0 0 70px #8f162321;animation:panel-rise .8s .15s ease both}.game-topline{background:linear-gradient(90deg,#11090c,#080708)}.stage:after{content:"";position:absolute;inset:0;pointer-events:none;z-index:4;background:repeating-linear-gradient(180deg,transparent 0 3px,#00000008 4px);mix-blend-mode:multiply}
.survivor-select button{transition:transform .2s,border-color .2s,background .2s}.survivor-select button:hover{transform:translateY(-2px);border-color:#dc4550}.overlay>button{box-shadow:0 12px 35px #ba1a2740;transition:transform .2s,filter .2s}.overlay>button:hover{transform:translateY(-2px);filter:brightness(1.14)}
.records{padding:38px;border:1px solid #4d252d;background:linear-gradient(135deg,#110a0dcc,#080708);box-shadow:0 30px 80px #0009}.records ol{background:#080708aa}.records li{transition:background .2s,padding-left .2s}.records li:hover{background:#1a0d11;padding-left:21px}
body.game-active .signal-strip{display:none}

/* GTS utility flywheel */
.token-economy{width:min(1240px,92vw);margin:100px auto 10px;padding:clamp(26px,4vw,58px);border:1px solid #622d36;background:radial-gradient(circle at 50% 30%,#50111b2b,transparent 35%),linear-gradient(145deg,#11090ce8,#070607);box-shadow:0 35px 100px #000b;position:relative;overflow:hidden}
.token-economy:before{content:"";position:absolute;inset:0;background:linear-gradient(90deg,transparent 49.8%,#8b30300b 50%,transparent 50.2%),linear-gradient(0deg,transparent 49.8%,#8b30300b 50%,transparent 50.2%);background-size:70px 70px;pointer-events:none}
.token-heading{position:relative;z-index:2;display:grid;grid-template-columns:1fr .75fr;gap:60px;align-items:end;padding-bottom:38px;border-bottom:1px solid #3f2228}.token-heading h2{margin:8px 0 0;font:clamp(42px,6vw,78px)/.86 Archivo Black;letter-spacing:-3px}.token-heading h2 em{color:#df2633;font-style:normal}.token-heading>p{margin:0;color:#a59799;font:13px/1.75 Inter;max-width:520px}
.flywheel-layout{position:relative;z-index:2;display:grid;grid-template-columns:minmax(620px,1fr) 270px;gap:35px;align-items:center;padding:48px 0 38px}.flywheel-ring{height:590px;position:relative;border-radius:50%;background:radial-gradient(circle,#4d101b30 0 23%,transparent 24% 46%,#8c293333 46.3% 46.8%,transparent 47%);animation:flywheel-breathe 5s ease-in-out infinite}.flywheel-ring:before,.flywheel-ring:after{content:"";position:absolute;inset:15%;border:1px dashed #7b343e;border-radius:50%;animation:wheel-spin 34s linear infinite}.flywheel-ring:after{inset:25%;border-color:#9c263655;animation-direction:reverse;animation-duration:22s}
.flywheel-core{position:absolute;z-index:4;left:50%;top:50%;width:160px;transform:translate(-50%,-50%);text-align:center;padding:12px;background:#0c0709;border:1px solid #8a3641;box-shadow:0 0 55px #d01e3138}.flywheel-core img{display:block;width:100%;aspect-ratio:1;object-fit:cover}.flywheel-core b,.flywheel-core span{display:block}.flywheel-core b{margin-top:9px;font:22px Archivo Black;color:#fff}.flywheel-core span{font:7px IBM Plex Mono;color:#a99093;letter-spacing:1.7px}
.fly-node{position:absolute;z-index:5;width:195px;padding:15px;border:1px solid #65303a;background:#0d080aee;box-shadow:0 12px 35px #000b;transition:transform .25s,border-color .25s}.fly-node:hover{transform:translateY(-4px);border-color:#e43a47}.fly-node i{display:grid;width:28px;height:28px;place-items:center;background:#8c1722;color:#fff;font:9px Archivo Black;font-style:normal}.fly-node b,.fly-node span{display:block}.fly-node b{margin:10px 0 5px;font:13px Archivo Black}.fly-node span{color:#8f8183;font:8px/1.5 IBM Plex Mono}.node-run{left:4%;top:8%}.node-store{right:2%;top:12%}.node-buff{right:0;bottom:12%}.node-enter{left:39%;bottom:0}.node-win{left:0;bottom:18%}
.value-flow{border:1px solid #512932;background:#090708d9;padding:21px}.value-flow>p{margin:0 0 15px;color:#df3843;font:9px IBM Plex Mono;letter-spacing:2px}.value-flow>div{display:grid;gap:8px}.value-flow i{padding:12px;border:1px solid #43242a;background:#140b0e;color:#eee;font:11px Archivo Black;font-style:normal;text-align:center}.value-flow div span{text-align:center;color:#d92c38;font:18px Archivo Black}.value-flow small{display:block;margin-top:18px;color:#857779;font:8px/1.6 IBM Plex Mono}
.utility-table-wrap{position:relative;z-index:2;overflow-x:auto;border:1px solid #4a252c}.utility-table{width:100%;border-collapse:collapse;min-width:760px;background:#080708cc}.utility-table th{text-align:left;padding:13px 16px;background:#1a0c10;color:#a89295;font:8px IBM Plex Mono;letter-spacing:1.3px}.utility-table td{padding:16px;border-top:1px solid #352025;color:#9b8d8f;font:10px/1.5 IBM Plex Mono}.utility-table td+td{border-left:1px solid #2f1c21}.utility-table td b,.utility-table td span{display:block}.utility-table td b{color:#f2e8da;font:14px Archivo Black}.utility-table td span{margin-top:4px;color:#d62d39;font-size:8px}.utility-table strong{color:#55da89;font-weight:600}
@keyframes wheel-spin{to{transform:rotate(360deg)}}@keyframes flywheel-breathe{50%{filter:drop-shadow(0 0 24px #9e1c2930)}}
@keyframes intro-rise{from{opacity:0;transform:translateY(24px)}to{opacity:1;transform:none}}
@keyframes emblem-enter{from{opacity:0;transform:translateX(35px) scale(.96)}to{opacity:1;transform:none}}
@keyframes emblem-shine{0%,58%{transform:translateX(-55%) rotate(8deg)}80%,100%{transform:translateX(70%) rotate(8deg)}}
@keyframes redhaven-pulse{from{opacity:.72;transform:scale(1)}to{opacity:1;transform:scale(1.025)}}
@keyframes grid-drift{from{background-position:0 0,0 0,0 0}to{background-position:0 0,80px 0,0 0}}
@keyframes signal-run{to{transform:translateX(-50%)}}
@keyframes panel-rise{from{opacity:0;transform:translateY(25px)}to{opacity:1;transform:none}}
@media(max-width:760px){
  .stage{aspect-ratio:4/5}
  .touch{display:grid}
  .overlay:not(.hidden)~.touch{display:none}
  .bottom-hud{padding-bottom:max(13px,env(safe-area-inset-bottom))}
  .brand img{width:44px;height:44px}.logo-lockup img{width:112px}
  .intro{min-height:auto;grid-template-columns:1fr;padding:35px 18px 48px;gap:28px}.intro h1{font-size:52px}.lead{font-size:13px}.season-tag{margin-top:4px}.hero-cta{width:100%;justify-content:space-between}.intro .hero-visual{display:grid!important;width:min(290px,78vw);justify-self:center}.objective-card{display:none}.signal-strip{height:38px}.signal-strip>div{font-size:9px}.game-frame{margin-top:38px}.records{padding:22px}
  .token-economy{width:100%;margin:45px 0 0;padding:38px 18px;border-inline:0}.token-heading{grid-template-columns:1fr;gap:18px}.token-heading h2{font-size:43px}.token-heading>p{font-size:12px}.flywheel-layout{grid-template-columns:1fr;padding-top:30px}.flywheel-ring{height:auto;display:grid;gap:9px;background:none;animation:none}.flywheel-ring:before,.flywheel-ring:after{display:none}.flywheel-core{position:relative;left:auto;top:auto;transform:none;width:132px;margin:0 auto 10px}.fly-node{position:relative;inset:auto!important;width:100%;display:grid;grid-template-columns:34px 1fr;column-gap:10px;align-items:center}.fly-node i{grid-row:1/3}.fly-node b{margin:0}.value-flow{margin-top:8px}.value-flow>div{grid-template-columns:1fr auto 1fr auto 1fr}.value-flow>div i:nth-of-type(4){grid-column:1/-1}.value-flow>div span:last-child{display:none}.utility-table-wrap{margin-top:8px}
  footer span{display:block}
  .survivor-select{grid-template-columns:repeat(2,1fr);max-width:310px;margin-top:10px}.survivor-select button{padding:5px 6px 7px}.survivor-portrait{width:54px;height:54px;background-size:540px auto!important;background-position:0 -108px!important;margin-bottom:3px!important}.logo-lockup strong{font-size:39px}.overlay>p{margin:8px 8px 7px}
}
@media(prefers-reduced-motion:reduce){.intro:before,.intro:after,.intro-copy,.intro .hero-visual,.emblem-shell:before,.signal-strip>div,.game-frame,.flywheel-ring,.flywheel-ring:before,.flywheel-ring:after{animation:none!important}.brand,.hero-cta,.emblem-shell img{transition:none!important}}
