/* ASHEN SOULS — HUD & screens. Souls-authentic: thin beveled bars, EB Garamond, ash + ember. */

* { margin:0; padding:0; box-sizing:border-box; }
html,body { width:100%; height:100%; overflow:hidden; background:#000; }
body { font-family:'EB Garamond', Garamond, 'Times New Roman', serif; -webkit-user-select:none; user-select:none; -webkit-tap-highlight-color:transparent; }
#gl { position:fixed; inset:0; width:100%; height:100%; display:block; touch-action:none; }
#ui { position:fixed; inset:0; pointer-events:none; z-index:10; }
.hidden { display:none !important; }

/* ---------- overlays ---------- */
#vignette { position:absolute; inset:0; box-shadow:inset 0 0 18vmax rgba(0,0,0,.62), inset 0 0 6vmax rgba(0,0,0,.35); }
#dmgflash { position:absolute; inset:0; background:radial-gradient(ellipse at center, transparent 42%, rgba(140,10,0,.55) 100%); opacity:0; transition:opacity .09s; }
#healglow { position:absolute; inset:0; background:radial-gradient(ellipse at center, transparent 55%, rgba(255,140,50,.28) 100%); opacity:0; transition:opacity .25s; }
#lowhp { position:absolute; inset:0; background:radial-gradient(ellipse at center, transparent 50%, rgba(120,0,0,.42) 100%); opacity:0; }
.letterbox { position:absolute; left:0; right:0; height:0; background:#000; transition:height .9s cubic-bezier(.4,0,.2,1); z-index:40; }
#bar-top { top:0; } #bar-bottom { bottom:0; }
.cine .letterbox { height:11vh; }
#fader { position:absolute; inset:0; background:#000; opacity:1; transition:opacity .8s ease; z-index:60; pointer-events:none; }
#fader.white { background:#e8e6df; }

/* ---------- HUD ---------- */
#hud { position:absolute; inset:0; z-index:20; }
#hud-topleft { position:absolute; top:max(18px,2.6vh); left:max(20px,2.4vw); }
.bar { position:relative; border:1px solid #6f6a5c; background:rgba(8,8,10,.72); box-shadow:0 0 0 1px rgba(0,0,0,.85), inset 0 1px 2px rgba(0,0,0,.8); }
.bar.hp { width:min(34vw,430px); height:11px; }
.bar.hp::after { content:''; position:absolute; left:0; top:-4px; width:26%; height:1px; background:rgba(0,0,0,.55); }
#hp-fill { position:absolute; inset:1px auto 1px 1px; width:100%; background:linear-gradient(#c8543f,#8e2019 55%,#701510); transform-origin:left; }
#hp-ghost { position:absolute; inset:1px auto 1px 1px; width:100%; background:#d8c690; transform-origin:left; opacity:.85; }
.bar.st { width:min(30vw,380px); height:9px; margin-top:5px; }
#st-fill { position:absolute; inset:1px auto 1px 1px; width:100%; background:linear-gradient(#9cc05c,#5e7d33 60%,#46601f); transform-origin:left; }
.bar.st.exhausted #st-fill { animation:stflash .5s steps(2) 3; }
@keyframes stflash { 50% { filter:brightness(2.1); } }

#hud-botleft { position:absolute; left:max(20px,2.4vw); bottom:max(18px,3vh); display:grid; grid-template-columns:44px 44px; gap:6px; }
.slot { position:relative; width:44px; height:44px; border:1px solid #6f6a5c; background:rgba(10,10,12,.66); box-shadow:0 0 0 1px rgba(0,0,0,.85), inset 0 0 10px rgba(0,0,0,.6); color:#b9b3a1; }
.slot svg { position:absolute; inset:6px; width:32px; height:32px; }
.slot.dim { opacity:.42; }
#flask-count { position:absolute; right:2px; bottom:0; font-size:14px; color:#e8c879; text-shadow:0 0 4px #000, 0 1px 2px #000; }
.slot.empty svg { opacity:.3; filter:grayscale(1); }

#hud-botright { position:absolute; right:max(20px,2.4vw); bottom:max(18px,3vh); }
#souls-box { display:flex; align-items:center; gap:8px; padding:3px 12px 3px 8px; border:1px solid #6f6a5c; background:rgba(10,10,12,.66); box-shadow:0 0 0 1px rgba(0,0,0,.85); color:#cfc9b8; font-size:19px; letter-spacing:.06em; min-width:120px; justify-content:flex-end; }
#souls-ico { width:16px; height:16px; color:#9fb2d8; }
#souls-gain { color:#e8c879; font-size:15px; opacity:0; transition:opacity .3s, transform .8s; }

#boss-wrap { position:absolute; left:50%; transform:translateX(-50%); bottom:max(64px,9vh); width:min(62vw,780px); opacity:0; transition:opacity 1.1s ease; }
#boss-wrap.show { opacity:1; }
#boss-name { color:#ded8c6; font-size:clamp(15px,1.9vw,24px); letter-spacing:.34em; text-shadow:0 0 8px rgba(0,0,0,.9), 0 1px 2px #000; margin-bottom:4px; padding-left:2px; }
.bar.boss { width:100%; height:10px; }
#boss-fill { position:absolute; inset:1px auto 1px 1px; width:100%; background:linear-gradient(#c8543f,#8e2019 55%,#701510); transform-origin:left; transition:transform .12s ease-out; }
#boss-wrap.sweep .bar.boss { animation:bosssweep 1.15s ease-out; }
@keyframes bosssweep { 0% { clip-path:inset(0 100% 0 0); } 100% { clip-path:inset(0 0 0 0); } }

#reticle { position:absolute; width:10px; height:10px; margin:-5px 0 0 -5px; border-radius:50%; background:radial-gradient(circle,#fff 18%,rgba(255,255,255,.55) 45%,transparent 72%); box-shadow:0 0 6px rgba(255,255,255,.8); z-index:19; }
#reticle::after { content:''; position:absolute; left:50%; top:50%; width:2px; height:2px; margin:-1px; background:#fff; }

#prompt { position:absolute; left:50%; bottom:16vh; transform:translateX(-50%); color:#e6e0cf; font-size:clamp(16px,2vw,22px); letter-spacing:.12em; text-shadow:0 0 8px #000,0 1px 3px #000; padding:4px 18px; background:linear-gradient(90deg,transparent,rgba(0,0,0,.55) 18%,rgba(0,0,0,.55) 82%,transparent); white-space:nowrap; }
#prompt .key { color:#e8c879; border:1px solid #7a7460; padding:0 7px; margin:0 4px; font-size:.85em; background:rgba(0,0,0,.5); }
#sigil-caption { position:absolute; left:50%; bottom:23vh; transform:translateX(-50%); color:#9fc3d8; font-style:italic; font-size:clamp(14px,1.7vw,19px); letter-spacing:.1em; text-shadow:0 0 10px #000; white-space:nowrap; }

/* ---------- banners ---------- */
#banner { position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center; z-index:50; opacity:0; }
#banner-text { font-size:clamp(44px,9.5vw,130px); letter-spacing:.3em; text-indent:.3em; color:#9e1b12; text-shadow:0 0 26px rgba(160,20,8,.5), 0 0 4px rgba(0,0,0,.6); transform:scale(.96); font-weight:500; }
#banner.gold #banner-text { color:#c8a24a; text-shadow:0 0 30px rgba(200,150,50,.45), 0 0 4px rgba(0,0,0,.7); }
#banner.pale #banner-text { color:#d8d4c4; text-shadow:0 0 24px rgba(255,255,255,.25), 0 0 4px #000; font-size:clamp(30px,5vw,64px); letter-spacing:.42em; }
#banner-sub { margin-top:2.2vh; color:#b7b09c; font-size:clamp(14px,1.7vw,20px); letter-spacing:.5em; text-indent:.5em; opacity:0; transition:opacity 1.2s .8s; }
#banner.show-sub #banner-sub { opacity:1; }
#banner.show { animation:bannerin 2.6s ease forwards; }
#banner.show.fast { animation-duration:1.6s; }
@keyframes bannerin { 0% { opacity:0; transform:scale(1.04); } 18% { opacity:1; } 60% { transform:scale(1); } 100% { opacity:1; transform:scale(1); } }
#banner.fadeout { transition:opacity 1.4s ease; opacity:0 !important; }

/* ---------- title ---------- */
#title { position:absolute; inset:0; background:radial-gradient(ellipse at 50% 42%, #14141a 0%, #060607 70%); display:flex; align-items:center; justify-content:center; z-index:55; transition:opacity 1.4s ease; }
#title.away { opacity:0; pointer-events:none; }
#title-inner { text-align:center; }
#title-name { color:#d5cfbc; font-size:clamp(46px,9vw,120px); letter-spacing:.32em; text-indent:.32em; font-weight:500; text-shadow:0 0 34px rgba(255,140,50,.16), 0 0 3px rgba(0,0,0,.8); animation:titlebreathe 5.2s ease-in-out infinite; }
@keyframes titlebreathe { 0%,100% { text-shadow:0 0 34px rgba(255,140,50,.13), 0 0 3px rgba(0,0,0,.8); } 50% { text-shadow:0 0 46px rgba(255,140,50,.26), 0 0 3px rgba(0,0,0,.8); } }
#title-rule { width:min(46vw,460px); height:1px; margin:3.4vh auto; background:linear-gradient(90deg,transparent,#6f6a5c 22%,#6f6a5c 78%,transparent); }
#title-press { color:#a49d88; font-size:clamp(15px,1.9vw,22px); letter-spacing:.58em; text-indent:.58em; animation:pulse 2.4s ease-in-out infinite; }
@keyframes pulse { 0%,100% { opacity:.35; } 50% { opacity:1; } }
#title-hint { margin-top:6vh; color:#565148; font-size:clamp(11px,1.3vw,14px); letter-spacing:.24em; font-style:italic; }

/* ---------- pause ---------- */
#pause { position:absolute; inset:0; background:rgba(4,4,6,.82); display:flex; align-items:center; justify-content:center; z-index:54; pointer-events:auto; }
#pause-card { text-align:center; color:#c9c2ac; }
.pause-title { font-size:clamp(24px,3.4vw,40px); letter-spacing:.4em; text-indent:.4em; }
.pause-rule { width:220px; height:1px; margin:2.2vh auto; background:linear-gradient(90deg,transparent,#6f6a5c,transparent); }
.pause-sec { font-size:13px; letter-spacing:.5em; text-indent:.5em; color:#7d7663; margin:2vh 0 1.4vh; }
.pause-grid { display:grid; grid-template-columns:auto auto; gap:7px 26px; font-size:clamp(13px,1.5vw,17px); text-align:left; }
.pause-grid span:nth-child(odd) { color:#8d8672; text-align:right; letter-spacing:.06em; }
.pause-grid span:nth-child(even) { color:#cfc9b4; letter-spacing:.08em; }
#pause-resume { margin-top:3.2vh; color:#a49d88; animation:pulse 2.4s infinite; }

/* ---------- touch ---------- */
#touchui { position:absolute; inset:0; z-index:30; pointer-events:none; }
#stick-zone { position:absolute; left:0; bottom:0; width:42vw; height:52vh; pointer-events:auto; }
#stick-base { position:absolute; left:7vw; bottom:12vh; width:110px; height:110px; border-radius:50%; border:1px solid rgba(200,190,160,.4); background:rgba(20,20,24,.3); }
#stick-nub { position:absolute; left:50%; top:50%; width:46px; height:46px; margin:-23px; border-radius:50%; background:rgba(200,190,160,.32); border:1px solid rgba(220,210,180,.5); }
#look-zone { position:absolute; right:0; top:0; width:58vw; height:100vh; pointer-events:auto; }
.tbtn { position:absolute; width:62px; height:62px; border-radius:50%; border:1px solid rgba(200,190,160,.45); background:rgba(20,20,24,.42); color:#d5cfbc; display:flex; align-items:center; justify-content:center; font-size:13px; letter-spacing:.08em; pointer-events:auto; }
.tbtn:active { background:rgba(255,140,50,.3); }
#tb-atk { right:5vw; bottom:22vh; } #tb-hvy { right:15vw; bottom:13vh; } #tb-roll { right:5vw; bottom:9vh; width:70px; height:70px; }
#tb-est { right:24vw; bottom:8vh; } #tb-tgt { right:16vw; bottom:26vh; } #tb-act { right:27vw; bottom:19vh; }
#tb-blk { right:34vw; bottom:9vh; }
#tb-pause { right:3vw; top:max(10px,2.4vh); width:44px; height:44px; font-size:15px; }
#touch-note { position:absolute; top:12vh; left:50%; transform:translateX(-50%); color:#8d8672; font-size:13px; font-style:italic; letter-spacing:.1em; animation:pulse 3s 4 forwards; }

/* ---------- fatal ---------- */
#fatal { position:absolute; inset:0; background:#0a0a0c; color:#b7b09c; display:flex; align-items:center; justify-content:center; text-align:center; font-size:18px; letter-spacing:.12em; z-index:70; padding:8vw; }

/* ---------- responsive ---------- */
@media (max-width:760px) {
  .bar.hp { width:52vw; } .bar.st { width:46vw; }
  #hud-botleft { grid-template-columns:38px 38px; } .slot { width:38px; height:38px; }
  #boss-wrap { width:78vw; bottom:12vh; }
  #boss-name { letter-spacing:.18em; }
  #prompt { bottom:34vh; font-size:14px; }
  #title-name { font-size:clamp(30px,8.6vw,46px); letter-spacing:.18em; text-indent:.18em; }
  #title-press { font-size:14px; letter-spacing:.4em; text-indent:.4em; }
  #title-hint { font-size:10px; padding:0 9vw; }
  #sigil-caption { font-size:12px; white-space:normal; text-align:center; width:88vw; }
  .pause-grid { font-size:12px; }
}
@media (max-height:500px) {
  .bar.hp { height:9px; } .bar.st { height:7px; }
  #boss-wrap { bottom:8vh; }
}