:root { color-scheme: dark; --danger: 0; }
* { box-sizing: border-box; }
html, body { width: 100%; height: 100%; margin: 0; overflow: hidden; background: #050406; color: #eee6dc; font-family: Arial, Helvetica, sans-serif; }
canvas { display: block; width: 100%; height: 100%; touch-action: none; }
.film-grain, .vignette, .danger-flash { position: fixed; inset: 0; pointer-events: none; }
.film-grain { z-index: 5; opacity: .17; background-image: repeating-linear-gradient(0deg, transparent 0 3px, #f2d6c40b 4px, #0008 5px); mix-blend-mode: screen; animation: drift .23s steps(2,end) infinite; }
.vignette { z-index: 4; background: radial-gradient(ellipse 63% 59% at 50% 46%, transparent 30%, #04030466 68%, #000 100%); }
.danger-flash { z-index: 3; background: radial-gradient(ellipse at center, transparent 39%, #d3171938 100%); opacity: calc(var(--danger)*.9); transition: opacity .18s; }
#proximity-blackout { position: fixed; z-index: 9; inset: 0; pointer-events: none; background: #000; opacity: var(--proximity-black,0); transition: opacity .12s linear; }
#proximity-blackout.attack { opacity: 1; transition: opacity .06s linear; }
button { font: inherit; cursor: pointer; }
#bar { position: fixed; top: 15px; right: 20px; z-index: 8; display: flex; gap: 8px; }
#bar button, #touch button { padding: 10px 14px; background: #100c0dcf; border: 1px solid #765658; color: #eee3d9; border-radius: 4px; font-weight: 700; }
#bar button:hover, #touch button:hover { border-color: #f05d5d; background: #311216; }
#overlay { position: fixed; inset: 0; z-index: 10; display: grid; place-items: center; padding: 20px; background: radial-gradient(ellipse at 50% 38%, #481015db, #090708f7 51%, #030304 100%); }
#overlay[hidden] { display: none; }
.warning-card { position: relative; width: min(830px, 100%); min-height: 510px; padding: clamp(28px,5vw,56px); display: flex; flex-direction: column; align-items: center; justify-content: center; background: linear-gradient(145deg,#151011fa,#080809f9); border: 1px solid #5b2529; box-shadow: 0 0 0 7px #110708a0, 0 32px 120px #000, 0 0 100px #a5161820; text-align: center; }
.warning-card::before, .warning-card::after { content: ""; position: absolute; width: 54px; height: 54px; border-color: #b63d40; }
.warning-card::before { top: -1px; left: -1px; border-top: 3px solid; border-left: 3px solid; }
.warning-card::after { right: -1px; bottom: -1px; border-right: 3px solid; border-bottom: 3px solid; }
.eyebrow { margin: 0 0 27px; color: #e0706b; letter-spacing: .35em; font-size: 12px; font-weight: 800; }
h1 { margin: 0; font-family: Impact,"Arial Black",sans-serif; font-size: clamp(54px,10vw,108px); font-weight: 900; letter-spacing: .035em; line-height: .89; text-shadow: 4px 4px 0 #32090d, 0 0 35px #ae111855; }
h1 span { color: #df3534; }
.omen { margin: 27px 0 0; color: #f2d8cf; font-size: clamp(15px,2.2vw,22px); font-weight: 900; letter-spacing: .12em; }
#intro { min-height: 26px; margin: 15px 0 0; color: #db7371; font-size: 15px; font-weight: 800; letter-spacing: .19em; text-transform: uppercase; }
#play-field { position: relative; width: min(560px,100%); height: 138px; margin-top: 2px; }
#start { position: absolute; top: 50%; left: 50%; min-width: 218px; height: 54px; transform: translate(calc(-50% + var(--dodge-x,0px)),calc(-50% + var(--dodge-y,0px))); transition: transform .21s cubic-bezier(.2,.9,.2,1.3), background .15s, box-shadow .15s; background: #a91e25; color: #fff; border: 1px solid #ff8884; border-radius: 2px; font-size: 19px; font-weight: 900; letter-spacing: .24em; box-shadow: 0 0 24px #b11e2644; }
#start:hover { background: #cf2a31; box-shadow: 0 0 32px #dc2b3188; }
#start:focus-visible { outline: 3px solid #fff; outline-offset: 5px; }
#signal { position: fixed; z-index: 8; top: 41%; left: 0; width: 100%; text-align: center; color: #eee1d4; font: 900 clamp(24px,5vw,58px) Impact,"Arial Black",sans-serif; letter-spacing: .09em; text-shadow: 3px 3px #9c1a1d,0 0 30px #b00; opacity: 0; transform: scale(1.05); pointer-events: none; transition: opacity .18s,transform .5s; }
#signal.visible { opacity: .92; transform: scale(1); }
.expedition-hud { position: fixed; z-index: 6; top: 17px; left: 26px; max-width: 620px; padding: 10px 14px; border-left: 3px solid #bd3034; background: #0b0809b8; color: #eee1d6; font-size: 12px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; text-shadow: 0 2px 5px #000; }
#message { position: fixed; z-index: 6; bottom: 94px; left: 26px; right: 26px; color: #fff2e8; font-weight: 800; text-shadow: 0 2px 7px #000; font-size: 17px; }
#hands { position: fixed; z-index: 4; bottom: 0; left: 25%; right: 25%; height: 145px; pointer-events: none; --suit:#231b1b; --cuff:#725451; }
#hands>i { position: absolute; bottom: -32px; width: 70px; height: 135px; border: 3px solid #090809; border-top: 22px solid var(--cuff); border-radius: 23px; background: var(--suit); transform: rotate(-20deg); filter: brightness(.65); }
#hands>i:last-of-type { right: 0; transform: rotate(20deg); }
#skin-label { position: absolute; bottom: 12px; left: 30%; right: 30%; text-align: center; font-size: 10px; letter-spacing: .3em; color: #d9b9ad; }
#touch { position: fixed; z-index: 7; bottom: 15px; left: 18px; display: flex; gap: 7px; }
#touch button { min-width: 42px; touch-action: none; user-select: none; }
@keyframes drift { 50% { transform: translateY(2px); } }
@media(pointer:fine) { #touch { display: none; } #bar { opacity: 0; transition: opacity .18s; } #bar:hover, #bar:focus-within { opacity: 1; } }
@media(max-width:650px) { .warning-card { min-height: 430px; padding: 25px 20px; } .eyebrow { margin-bottom: 26px; } #play-field { height: 140px; } #bar { top: 10px; right: 10px; } #bar button { padding: 8px; font-size: 11px; } .expedition-hud { top: 55px; left: 10px; right: 10px; font-size: 10px; } #message { left: 12px; bottom: 66px; font-size: 13px; } #hands { left: 12%; right: 12%; } #touch { bottom: 9px; left: 9px; } #touch button { min-width: 37px; padding: 8px; } }
@media(prefers-reduced-motion:reduce) { .film-grain { animation: none; } #start { transition: none; } }