/* Standalone art direction: black cherry water, ivory type and restrained crimson controls. */
:root{color-scheme:dark;--bone:#eee5d6;--muted:#c0ada4;--red:#a92b35;--line:rgba(231,215,192,.22)}
*{box-sizing:border-box} [hidden]{display:none!important}
body.blood-page{margin:0;background:#170507;color:var(--bone);font-family:Arial,Helvetica,sans-serif;min-height:100svh;isolation:isolate;display:flex;flex-direction:column}
button,input,select{font:inherit}button,a,input,select{-webkit-tap-highlight-color:transparent}button,a{touch-action:manipulation}
button{cursor:pointer}button:disabled{cursor:wait;opacity:.65}a{color:inherit;text-decoration:none}
:focus-visible{outline:2px solid #f9dfac;outline-offset:5px}
.blood-shade,#blood-water{position:fixed;inset:0;width:100%;height:100%;pointer-events:none;z-index:-4}
#blood-water{z-index:-3;opacity:0;transition:opacity .8s}#blood-water.is-ready{opacity:1}
.blood-shade{z-index:-2;background:linear-gradient(180deg,rgba(6,2,3,.65) 0%,transparent 27%,transparent 43%,rgba(8,2,3,.28) 72%,rgba(7,2,3,.72) 100%),radial-gradient(ellipse at center,transparent 32%,rgba(8,1,2,.38) 100%)}
.blood-header{display:flex;align-items:center;justify-content:space-between;padding:28px 4vw;gap:18px}
.blood-monogram{display:flex;letter-spacing:-5px;font:27px Georgia,serif;width:45px;height:38px;align-items:center;border-bottom:1px solid var(--line)}
.blood-monogram span:last-child{transform:translateY(5px)}
.blood-header__label{text-transform:uppercase;letter-spacing:.3em;font-size:10px;margin-right:auto;margin-left:15px;color:var(--muted)}
.blood-controls{display:flex;gap:20px;margin-left:auto}.blood-controls button{background:none;border:0;padding:8px 0;color:#cdb8b1;font-size:10px;letter-spacing:.16em;min-height:36px}.blood-controls button:hover{color:#fff}
.blood-stage{display:flex;flex-direction:column;align-items:center;flex:1;min-height:0;padding:5px 24px 10px;text-align:center}
.blood-title{width:100%;pointer-events:none}.blood-eyebrow{display:flex;align-items:center;justify-content:center;gap:16px;font-size:9px;letter-spacing:.38em;text-transform:uppercase;color:#d1b6ad;margin:10px 0 20px}.blood-eyebrow span{height:1px;width:36px;background:#ad6560}
h1{margin:0;font-family:Georgia,'Times New Roman',serif;font-weight:normal;text-shadow:0 3px 22px #070000;line-height:.9}
.blood-title__world{display:block;font-size:20px;letter-spacing:.54em;margin-bottom:16px;padding-left:.54em}
.blood-title__tyrants{display:block;font-size:92px;letter-spacing:.065em;padding-left:.065em;color:#f1e9db}
.blood-tagline{font-size:9px;line-height:1.8;letter-spacing:.3em;margin:23px 0 0;color:#d5beb1}
.blood-space{flex:1;min-height:clamp(105px,15vh,210px)}
.blood-panel{width:min(540px,100%);text-align:center;background:radial-gradient(ellipse,rgba(13,3,4,.62),transparent 72%);padding:18px 8px 0}
.blood-panel h2,.blood-dialog h2{font:normal 26px/1.25 Georgia,serif;margin:0 0 10px;color:#f3eadb}
.blood-panel>p{color:var(--muted);font-size:12px;line-height:1.65;margin:0 0 20px}
.blood-field-label{display:block;text-align:left;font-size:9px;letter-spacing:.2em;color:#d5bcb0;margin-bottom:9px}
.blood-form-row{display:grid;grid-template-columns:1fr 1fr;gap:8px;text-align:left}
.blood-form-row input,.blood-form-row select{background:rgba(14,4,5,.86);border:1px solid #6b4340;color:#f2e6d5;border-radius:0;width:100%;min-width:0;height:50px;padding:0 14px;font-size:13px}.blood-form-row input::placeholder{color:#aa9990}
.blood-button{display:flex;align-items:center;justify-content:space-between;gap:18px;border:1px solid #b94a4a;background:linear-gradient(120deg,#731d26,#962831);color:#fff1df;min-height:50px;padding:14px 19px;font-size:10px;letter-spacing:.16em;box-shadow:inset 0 1px rgba(255,220,193,.1),0 5px 35px rgba(41,0,0,.5);transition:background .2s,box-shadow .2s}
.blood-button:hover{background:linear-gradient(120deg,#9a2631,#b6333c);box-shadow:0 0 22px #9f1c2433}.blood-button>span:last-child{font-size:20px;font-weight:normal}
/* Successful signup reveals at 1.5s, sweeps for 1.7s and ends with one fading flash. */
#wishlist-form .blood-button{position:relative;isolation:isolate;overflow:hidden}
#wishlist-form .blood-button>span{z-index:1;position:relative}
#wishlist-form .blood-button::before{content:"";position:absolute;inset:0;z-index:0;opacity:0;background:linear-gradient(115deg,#614216 0%,#b28330 24%,#fff0ab 47%,#d4ab53 65%,#805417 100%);background-size:220% 100%;pointer-events:none}
#wishlist-form .blood-button{height:50px;min-height:50px;padding:0 12px;justify-content:center;font-size:9px;letter-spacing:.09em}
#wishlist-form .blood-button>span:first-child{display:grid;place-items:center;white-space:nowrap}
#wishlist-form .blood-button>span:last-child{display:none}
#wishlist-form .blood-button.is-gilding{opacity:1;animation:wishlist-final-flash 1.7s linear forwards}
#wishlist-form .blood-button.is-gilding::before{opacity:1;animation:wishlist-sweep 1.7s linear forwards}
#wishlist-form .blood-button.is-gilding::after{content:"";position:absolute;z-index:3;top:-50%;bottom:-50%;width:12px;left:-18%;transform:skewX(-15deg);background:linear-gradient(90deg,transparent,#d89426,#fffbd5 50%,#ffdc71,transparent);box-shadow:0 0 12px 4px #ffd96ab0;animation:wishlist-gold-line 1.7s linear forwards;pointer-events:none}
#wishlist-form .blood-button .wishlist-old,#wishlist-form .blood-button .wishlist-new{grid-area:1/1;font:inherit}
#wishlist-form .blood-button .wishlist-old{animation:wishlist-erase 1.7s linear forwards}
#wishlist-form .blood-button .wishlist-new{color:#2d1b09;clip-path:polygon(0 0,0 0,0 100%,0 100%);animation:wishlist-sweep 1.7s linear forwards}
#wishlist-form .blood-button.is-sealed{opacity:1;cursor:default;border-color:#b99449;color:#2d1b09;background:linear-gradient(115deg,#9f752c,#f8df8e 48%,#bf913d);box-shadow:inset 0 1px #fff6cd}
#wishlist-form .blood-button.is-sealed::before{opacity:1;background-position:100% 0}
#wishlist-form .blood-button.is-sealed>span:last-child{visibility:hidden}
@keyframes wishlist-gold-reveal{0%{opacity:0;background-position:0% 0}9%{opacity:1;filter:brightness(2.8)}22%{opacity:.45;filter:brightness(1.1)}55%{opacity:.9;filter:brightness(1.3)}100%{opacity:1;background-position:100% 0;filter:brightness(1)}}
@keyframes wishlist-gold-border{0%{border-color:#b94a4a;color:#fff1df;box-shadow:0 0 0 #efc76800}10%{border-color:#fff7d2;box-shadow:0 0 46px 9px #efc76880}40%{color:#38220b;box-shadow:0 0 26px #efc76840}100%{border-color:#e0bb69;color:#2d1b09;box-shadow:inset 0 1px #fff6cd,0 0 28px #e9b34b35}}
@keyframes wishlist-sweep{0%{clip-path:polygon(0 0,0 0,0 100%,0 100%)}80%,100%{clip-path:polygon(0 0,110% 0,100% 100%,0 100%)}}
@keyframes wishlist-erase{0%{clip-path:polygon(0 0,100% 0,100% 100%,0 100%)}80%,100%{clip-path:polygon(110% 0,110% 0,100% 100%,100% 100%)}}
@keyframes wishlist-gold-line{0%{left:-18%;opacity:0}5%{opacity:1}80%{left:110%;opacity:1}85%,100%{left:115%;opacity:0}}
@keyframes wishlist-final-flash{0%,78%{filter:brightness(1);box-shadow:none}85%{filter:brightness(2.5);box-shadow:0 0 32px 6px #ffe09a90}100%{filter:brightness(1);box-shadow:none;border-color:#b99449}}
@media(prefers-reduced-motion:reduce){#wishlist-form .blood-button.is-gilding{animation:none;opacity:1;border-color:#e0bb69;color:#2d1b09;box-shadow:none}#wishlist-form .blood-button.is-gilding::before{animation:none;opacity:1;filter:none}#wishlist-form .blood-button.is-gilding::after{display:none}#wishlist-form .blood-button .wishlist-new{animation:none;clip-path:none}#wishlist-form .blood-button .wishlist-old{visibility:hidden}}
.blood-check{display:flex;gap:9px;text-align:left;align-items:flex-start;font-size:11px;line-height:1.55;margin:13px 0 0;color:#c8b7af}.blood-check input{width:15px;height:15px;margin:1px 0 0;accent-color:#a62f39;flex-shrink:0}
.blood-form-status{min-height:38px;color:#f1b7a8;font-size:12px;line-height:1.55;margin:10px 0}.blood-form-status.is-success{color:#efe1c7}
.blood-panel small{font-size:8px;letter-spacing:.17em;color:#bca49a}.blood-panel__links{display:flex;justify-content:space-between;gap:16px;margin-top:12px;font-size:9px;letter-spacing:.08em;color:#cdb8ad}
.blood-text-button{background:none;padding:0;color:inherit;font-size:inherit;letter-spacing:inherit;border:0;border-bottom:1px solid #795047}.blood-panel__links a:hover{color:white}
.blood-render-status{font-size:10px;color:#dbb6a9;margin:0;max-width:360px}
.blood-footer{padding:20px 4vw 18px;background:linear-gradient(transparent,#08030480)}
/* Content notices: always one row of equal cells; icon, glyph and text scale with the viewport. */
.blood-descriptors{--icon:clamp(26px,4.3vw,64.5px);padding:0;margin:0 auto 20px;max-width:1240px;display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:clamp(5px,1.4vw,26px);list-style:none}.blood-descriptors li{display:flex;align-items:center;justify-content:center;gap:clamp(4px,.7vw,11px);min-width:0}
.blood-descriptor-icon{border:1px solid #96746c;display:flex;align-items:center;justify-content:center;width:var(--icon);height:calc(var(--icon)*1.07);flex-shrink:0;color:#dac9b9;background:#18080b80}.blood-descriptor-icon svg{width:calc(var(--icon)*.63);height:calc(var(--icon)*.63)}.blood-descriptor-icon b{font:calc(var(--icon)*.535) Georgia,serif}.blood-descriptor-icon b span{font:calc(var(--icon)*.28) Arial,sans-serif}
.blood-descriptor-label{min-width:0;font-size:clamp(5px,.62vw,8px);letter-spacing:.13em;color:#ddc8b9}.blood-descriptor-label small{display:block;font-size:clamp(5px,.7vw,9px);letter-spacing:0;margin-top:5px;color:#9e8980}
@media(max-width:1100px){.blood-descriptors li{flex-direction:column;text-align:center}}
@media(max-width:600px){.blood-descriptor-label{letter-spacing:.06em}.blood-descriptor-label small{display:none}}
.blood-hp{position:absolute;left:-10000px;top:auto;width:1px;height:1px;overflow:hidden}
.blood-disabled-link{text-decoration:line-through;opacity:.55;cursor:not-allowed}
.blood-footer__meta{display:flex;justify-content:space-between;gap:16px;border-top:1px solid #78514d33;padding-top:15px;font-size:7px;line-height:1.7;letter-spacing:.11em;color:#a48a80}
.blood-dialog{background:#1b0a0d;color:var(--bone);border:1px solid #735047;padding:30px;max-width:min(480px,90vw)}.blood-dialog::backdrop{background:#050001cc}.blood-dialog p{font-size:13px;color:#cab4a9;line-height:1.8}.blood-dialog .blood-button{margin-top:25px;width:100%;justify-content:center}
@media(min-width:1600px){.blood-header{padding-top:36px}.blood-stage{padding-top:25px}.blood-panel h2{font-size:29px}}
@media(max-width:760px){.blood-header{padding:17px 20px}.blood-header__label{display:none}.blood-controls{gap:15px}.blood-controls button{font-size:8px}.blood-stage{padding:20px 20px 5px;min-height:730px}.blood-eyebrow{font-size:8px;letter-spacing:.2em}.blood-title__tyrants{font-size:clamp(50px,13.2vw,97px)}.blood-tagline{font-size:8px;letter-spacing:.15em;max-width:330px;margin:20px auto 0}.blood-space{min-height:190px}.blood-panel h2{font-size:25px}.blood-panel>p{font-size:11px}.blood-footer__meta{flex-direction:column;align-items:center;text-align:center}.blood-footer{padding:20px}.blood-form-row{grid-template-columns:1fr}.blood-button{justify-content:center;position:relative}.blood-button>span:last-child{position:absolute;right:15px}.blood-panel__links{font-size:8px;gap:8px}}
@media(prefers-reduced-motion:reduce){#blood-water,.blood-button{transition:none}}

/* Loader curtain (client/preload.ts): covers the page until the scene, sounds and music opening are ready.
   The keyframe fallback lifts it after 25 s even if scripts never run, so the wishlist stays reachable. */
.blood-loader{position:fixed;inset:0;z-index:50;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1.1rem;
  background:radial-gradient(ellipse at 50% 45%,#2a0306 0%,#120102 55%,#050001 100%);color:#c9a7a2;
  transition:opacity 1.1s ease,visibility 0s linear 1.1s;animation:blood-loader-failsafe 0s linear 25s forwards}
.blood-loader.is-done{opacity:0;visibility:hidden;pointer-events:none}
.blood-loader__ring{width:min(26vw,120px);height:min(26vw,120px);transform:rotate(-90deg);overflow:visible;
  filter:drop-shadow(0 0 10px rgba(150,0,12,.55))}
.blood-loader__track{fill:none;stroke:rgba(120,0,10,.22);stroke-width:5}
.blood-loader__progress{fill:none;stroke:#8f0010;stroke-width:5;stroke-linecap:round;stroke-dasharray:327;stroke-dashoffset:327;
  animation:blood-loader-pulse 1.6s ease-in-out infinite}
.blood-loader__label{margin:0;font-size:.78rem;letter-spacing:.32em;text-transform:uppercase;font-variant-numeric:tabular-nums}
@keyframes blood-loader-pulse{0%,100%{stroke:#7a000d}50%{stroke:#b3001a}}
@keyframes blood-loader-failsafe{to{opacity:0;visibility:hidden;pointer-events:none}}
body.is-loading .blood-header,body.is-loading .blood-stage,body.is-loading .blood-footer{visibility:hidden}
@media (prefers-reduced-motion:reduce){.blood-loader__progress{animation:none}.blood-loader{transition:opacity .3s ease,visibility 0s linear .3s}}
/* Same 25 s failsafe for the page content hidden while loading. */
body.is-loading .blood-header,body.is-loading .blood-stage,body.is-loading .blood-footer{animation:blood-content-failsafe 0s linear 25s forwards}
@keyframes blood-content-failsafe{to{visibility:visible}}

/* Desktop title in fixed px (2026-10-15). The former vw sizing (up to 164px) ignored browser zoom and
   pushed the content notices below the fold on 1920x1080. A fixed size scales 1:1 with zoom; only the
   vertical spacing adapts to short viewports so the page still fits without scrolling. */
@media(min-width:761px) and (max-width:1100px){.blood-title__tyrants{font-size:84px}.blood-title__world{font-size:17px}}
@media(min-width:761px) and (max-height:950px){.blood-title__world{margin-bottom:10px}
  .blood-eyebrow{margin:4px 0 14px}.blood-tagline{margin-top:16px}.blood-space{min-height:clamp(70px,11vh,170px)}}

/* Desktop first screen (2026-10-15): title at the top, the wishlist form at the bottom and the whole
   gap between them for the skull (the camera frames it there); content notices and footer sit below
   the fold. The header is a corner overlay so it does not steal height from that gap. */
@media(min-width:761px){
  .blood-header{position:absolute;top:0;left:0;right:0;z-index:2}
  .blood-stage{min-height:100svh;box-sizing:border-box;padding-top:56px;padding-bottom:24px}
}