/* Combat screen */
#scr-combat { overflow: clip; } /* clip, not hidden: a hidden box can still be scrolled by focus/scrollIntoView and slide the top bar out */
.cb-bg { position: absolute; inset: 0; background-size: cover; background-position: center; }
.cb-bg[data-act="1"] { background-color: #12090f; background-image: radial-gradient(ellipse 70% 50% at 50% 92%, rgba(80,20,40,.6), transparent 70%), radial-gradient(ellipse at 20% 10%, rgba(40,90,60,.35), transparent 55%), radial-gradient(ellipse at 85% 20%, rgba(150,30,70,.3), transparent 50%), linear-gradient(180deg, #0f1712 0%, #1d0d16 55%, #0a0408 100%); }
.cb-bg[data-act="2"] { background-color: #0c0814; background-image: radial-gradient(ellipse 70% 50% at 50% 92%, rgba(60,30,100,.55), transparent 70%), radial-gradient(ellipse at 50% 0%, rgba(230,180,90,.25), transparent 55%), linear-gradient(180deg, #170f26 0%, #1f0b20 55%, #07040b 100%); }
.cb-bg[data-act="3"] { background-color: #12050a; background-image: radial-gradient(ellipse 70% 50% at 50% 92%, rgba(140,10,40,.55), transparent 70%), radial-gradient(ellipse at 50% 10%, rgba(255,60,90,.25), transparent 55%), linear-gradient(180deg, #2a0710 0%, #1a0510 55%, #070205 100%); }
.cb-bg[data-act="4"] { background-color: #0a0410; background-image: radial-gradient(ellipse 80% 60% at 50% 100%, rgba(255,45,149,.35), transparent 70%), radial-gradient(ellipse at 50% 0%, rgba(255,220,150,.25), transparent 50%), linear-gradient(180deg, #1a0a2a 0%, #12041c 60%, #050208 100%); }
.cb-bg.has-art { background-image: none; }
.cb-bg::after { content: ''; position: absolute; left: 0; right: 0; top: 700px; height: 380px; background: linear-gradient(180deg, transparent, rgba(0,0,0,.55) 40%, rgba(0,0,0,.85)); }
.cb-vignette { position: absolute; inset: 0; pointer-events: none; box-shadow: inset 0 0 220px rgba(0,0,0,.85); }
.cb-fx { position: absolute; inset: 0; pointer-events: none; z-index: 5; }
.cb-world { position: absolute; inset: 0; z-index: 6; }
.cb-ui { position: absolute; inset: 0; z-index: 20; pointer-events: none; }
.cb-ui > * { pointer-events: auto; }
.cb-arrow { position: absolute; inset: 0; pointer-events: none; z-index: 30; opacity: 0; transition: opacity .12s; }
.cb-arrow.on { opacity: 1; }
.cb-arrow .arrow-path { animation: dash .6s linear infinite; filter: drop-shadow(0 0 6px rgba(255,79,139,.9)); }
.cb-arrow.locked .arrow-path { stroke: #ffe1ee; }
@keyframes dash { to { stroke-dashoffset: -24; } }

/* creatures: anchored at feet (left/top = bottom-center) */
.creature { position: absolute; width: var(--w); height: var(--h); transform: translate(-50%, -100%); transition: left .5s var(--ease), top .5s var(--ease), opacity .6s, filter .6s; }
.cr-shadow { position: absolute; left: 10%; right: 10%; bottom: -18px; height: 36px; border-radius: 50%; background: radial-gradient(ellipse, rgba(0,0,0,.65), transparent 70%); }
.cr-sprite { position: absolute; inset: 0; display: flex; align-items: flex-end; justify-content: center; transform-origin: 50% 100%; animation: breathe 4.5s ease-in-out infinite; }
.is-enemy .cr-sprite { animation-duration: 3.8s; }
@keyframes breathe { 50% { transform: scaleY(1.012) scaleX(.995); } }
.cr-img { max-width: 100%; max-height: 100%; object-fit: contain; filter: drop-shadow(0 10px 18px rgba(0,0,0,.6)); }
.is-player .cr-img { transform: scaleX(1); }
/* animation strips (combat.js drawAnim): a canvas sized/positioned in JS over the drawn combat image */
.cr-anim { position: absolute; pointer-events: none; filter: drop-shadow(0 10px 18px rgba(0,0,0,.6)); }
.creature.animated .cr-sprite { animation: none; } /* the idle strip breathes on its own */
.creature.animated.hit .cr-sprite { animation: hit .35s ease; }
.cr-ph { width: 70%; height: 80%; border-radius: 40% 40% 10px 10px; display: flex; align-items: center; justify-content: center; font-family: var(--f-head); color: rgba(255,255,255,.6); background: linear-gradient(180deg, color-mix(in srgb, var(--cr-color) 60%, #000), #0b0610); border: 2px solid color-mix(in srgb, var(--cr-color) 70%, #fff 0%); }
.cr-hitbox { position: absolute; left: 12%; right: 12%; top: 8%; bottom: 0; cursor: default; }
.creature.hover .cr-sprite, .creature.targeted .cr-sprite { filter: drop-shadow(0 0 16px rgba(255,79,139,.85)) brightness(1.08); }
.creature.targeted::after { content: ''; position: absolute; left: 50%; bottom: -26px; transform: translateX(-50%); width: 70%; height: 30px; border-radius: 50%; border: 3px solid rgba(255,140,190,.9); box-shadow: 0 0 20px rgba(255,79,139,.8); animation: ring 1s infinite; }
@keyframes ring { 50% { transform: translateX(-50%) scale(1.06); opacity: .7; } }
.creature.hit .cr-sprite { animation: hit .35s ease; }
@keyframes hit { 20% { transform: translateX(14px) scale(1.02); filter: brightness(2) saturate(1.5) hue-rotate(-20deg); } 60% { transform: translateX(-6px); } }
.is-player.lunge .cr-sprite { animation: lungeR .35s var(--ease); }
.is-enemy.lunge .cr-sprite { animation: lungeL .35s var(--ease); }
@keyframes lungeL { 40% { transform: translateX(-60px) scale(1.04); } }
@keyframes lungeR { 40% { transform: translateX(60px) scale(1.04); } }
.creature.spawn { animation: spawnIn .6s var(--ease-out); }
@keyframes spawnIn { from { opacity: 0; transform: translate(-50%, -100%) scale(.7); } }
.creature.climaxed { opacity: 0; filter: brightness(3) saturate(2) hue-rotate(-20deg) blur(4px); transition: opacity 1s ease .15s, filter 1s; pointer-events: none; }
.creature.escaped { opacity: 0; transform: translate(-30%, -100%); transition: opacity .8s, transform .8s; pointer-events: none; }

.cr-name { position: absolute; left: 50%; bottom: -50px; transform: translateX(-50%); white-space: nowrap; font-family: var(--f-head); font-weight: 700; font-size: 19px; color: var(--text); text-shadow: 0 2px 4px #000; letter-spacing: .04em; }
.cr-barwrap { position: absolute; left: 50%; bottom: -82px; transform: translateX(-50%); width: 260px; display: flex; align-items: center; }
.cr-bar { position: relative; flex: 1; height: 24px; border-radius: 12px; background: #1a0a14; border: 2px solid #3a1426; box-shadow: inset 0 2px 6px rgba(0,0,0,.8), 0 2px 8px rgba(0,0,0,.6); overflow: hidden; }
.cr-bar-fill { position: absolute; left: 0; top: 0; bottom: 0; width: 0; background: linear-gradient(180deg, #ff9cc2, var(--rose) 45%, var(--rose-deep)); box-shadow: 0 0 12px rgba(255,79,139,.8); transition: width .35s var(--ease-out); z-index: 2; border-radius: 10px; }
.cr-bar-ghost { position: absolute; left: 0; top: 0; bottom: 0; width: 0; background: #fff3c8; transition: width .6s ease; z-index: 1; border-radius: 10px; }
.cr-bar.near .cr-bar-fill { animation: nearPulse .9s infinite; }
@keyframes nearPulse { 50% { filter: brightness(1.4); box-shadow: 0 0 22px rgba(255,45,149,1); } }
.cr-bar.heated { border-color: #ff7a3d; }
.cr-bar-text { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-family: var(--f-num); font-weight: 600; font-size: 17px; color: #fff; text-shadow: 0 1px 2px #000, 0 0 4px #000; z-index: 3; }
.cr-block { display: none; position: absolute; left: -26px; top: 50%; transform: translateY(-50%); width: 46px; height: 50px; align-items: center; justify-content: center; z-index: 4; }
.has-block .cr-block { display: flex; animation: blockIn .3s var(--ease-out); }
.has-block .cr-bar { border-color: var(--composure); box-shadow: 0 0 10px rgba(102,194,255,.7); }
.has-block .cr-bar-fill { background: linear-gradient(180deg, #bfe6ff, #5ba8e8 45%, #2a5f9a); box-shadow: 0 0 12px rgba(102,194,255,.8); }
@keyframes blockIn { from { transform: translateY(-50%) scale(.3); } }
.cr-block-ico { position: absolute; inset: 0; }
.cr-block-ico svg { width: 100%; height: 100%; }
.cr-block-ico:empty { background: radial-gradient(circle at 40% 30%, #dff3ff, #3a8fd6 60%, #10365e); clip-path: polygon(50% 0, 100% 18%, 92% 70%, 50% 100%, 8% 70%, 0 18%); }
.cr-block span { position: relative; font-family: var(--f-num); font-weight: 700; font-size: 20px; color: #fff; text-shadow: 0 1px 2px #000; }
.cr-powers { position: absolute; left: 50%; bottom: -126px; transform: translateX(-50%); width: 300px; display: flex; flex-wrap: wrap; gap: 4px; justify-content: center; }
.power { position: relative; width: 34px; height: 34px; border-radius: 50%; display: flex; align-items: center; justify-content: center; background: rgba(0,0,0,.55); border: 1px solid rgba(125,255,176,.5); }
.power.debuff { border-color: rgba(255,107,107,.6); }
.power-ico { width: 26px; height: 26px; display: flex; align-items: center; justify-content: center; font-family: var(--f-head); font-weight: 900; font-size: 16px; color: var(--buff); }
.power.debuff .power-ico { color: var(--debuff); }
.power-ico svg { width: 100%; height: 100%; }
.power-amt { position: absolute; right: -6px; bottom: -6px; font-family: var(--f-num); font-weight: 700; font-size: 15px; color: #fff; text-shadow: 0 0 3px #000, 0 1px 2px #000; }

.cr-intent { position: absolute; left: 50%; top: 10px; transform: translate(-50%, -100%); }
.intent { display: flex; align-items: center; gap: 4px; padding: 4px 10px; animation: intentBob 2.4s ease-in-out infinite; cursor: default; }
@keyframes intentBob { 50% { transform: translateY(-6px); } }
.intent-ico { width: 64px; height: 64px; display: flex; align-items: center; justify-content: center; font-family: var(--f-display); font-size: 36px; color: #ffb3c9; filter: drop-shadow(0 0 8px rgba(255,79,139,.6)); }
.intent-ico svg, .intent-sub svg { width: 100%; height: 100%; }
.intent-sub { width: 36px; height: 36px; }
.intent-num { font-family: var(--f-num); font-weight: 700; font-size: 32px; color: #fff; text-shadow: 0 2px 0 #4a0a26, 0 0 8px rgba(255,79,139,.9); }

/* Pip */
.pip-wrap { position: absolute; left: 650px; top: 600px; width: 120px; height: 130px; transform: translate(-50%, -100%) scale(0); transition: transform .45s var(--ease-out); z-index: 12; }
.pip-wrap.on { transform: translate(-50%, -100%) scale(1); }
.pip-wrap.bump .pip-sprite { animation: bump .45s var(--ease-out); }
.pip-wrap.lunge .pip-sprite { animation: lungeR .35s var(--ease); }
.pip-sprite { position: absolute; inset: 0; display: flex; align-items: flex-end; justify-content: center; animation: breathe 2.2s ease-in-out infinite; }
.pip-sprite img { max-width: 100%; max-height: 100%; }
.pip-ph { width: 80px; height: 90px; border-radius: 50% 50% 40% 40%; background: radial-gradient(circle at 40% 30%, #e7c6ff, #8a4dff 55%, #2a0a52); box-shadow: 0 0 20px rgba(138,77,255,.8); display: flex; align-items: center; justify-content: center; color: #fff; font-size: 30px; }
.pip-ph svg { width: 80%; height: 80%; }
.pip-hp { position: absolute; left: 50%; bottom: -30px; transform: translateX(-50%); min-width: 46px; padding: 2px 10px; border-radius: 12px; background: #1a0a24; border: 2px solid #8a4dff; font-family: var(--f-num); font-weight: 700; font-size: 18px; text-align: center; color: #e7c6ff; }

/* HUD */
.cb-energy { position: absolute; left: 70px; top: 790px; width: 150px; height: 150px; display: flex; flex-direction: column; align-items: center; justify-content: center; }
.energy-orb { width: 132px; height: 132px; border-radius: 50%; display: flex; align-items: center; justify-content: center; background: radial-gradient(circle at 38% 30%, #fff0c8 0%, #ffb35e 22%, var(--passion) 45%, #a3220a 78%, #3a0a02 100%); box-shadow: 0 0 0 4px #2a0c06, 0 0 0 7px var(--gold-deep), 0 0 40px rgba(255,122,61,.75), inset 0 -12px 24px rgba(0,0,0,.4); animation: orbGlow 2.6s ease-in-out infinite; }
@keyframes orbGlow { 50% { box-shadow: 0 0 0 4px #2a0c06, 0 0 0 7px var(--gold-deep), 0 0 60px rgba(255,122,61,.95), inset 0 -12px 24px rgba(0,0,0,.4); } }
.cb-energy.empty .energy-orb { filter: grayscale(.85) brightness(.55); animation: none; }
.cb-energy.bump .energy-orb { animation: bump .45s var(--ease-out); }
.energy-val { font-family: var(--f-num); font-weight: 700; font-size: 46px; color: #fff; text-shadow: 0 2px 0 #6a1604, 0 0 10px rgba(0,0,0,.5); }
.energy-label { margin-top: 6px; font-family: var(--f-head); font-size: 15px; letter-spacing: .2em; color: var(--gold); text-transform: uppercase; }
.cb-stars { position: absolute; left: 230px; top: 820px; display: flex; align-items: center; gap: 6px; padding: 6px 16px; border-radius: 30px; background: rgba(20,10,4,.85); border: 2px solid var(--gold); box-shadow: var(--glow-gold); }
.stars-ico { font-size: 32px; color: var(--gold); text-shadow: 0 0 10px rgba(232,193,112,.9); }
.stars-val { font-family: var(--f-num); font-weight: 700; font-size: 30px; color: var(--gold-hi); }
/* hero HUD badge (character.hud) — Ysolde's Aspect */
.cb-charhud { position: absolute; left: 44px; top: 722px; min-width: 200px; display: flex; align-items: center; justify-content: center; gap: 8px; padding: 6px 20px 6px 10px; border-radius: 30px; background: rgba(20,8,16,.88); border: 2px solid var(--rose); box-shadow: var(--glow-rose); font-family: var(--f-head); font-size: 20px; letter-spacing: .16em; text-transform: uppercase; color: #ffd6e8; transition: border-color .25s, box-shadow .25s, color .25s; }
.cb-charhud .charhud-ico svg { width: 34px; height: 34px; display: block; }
.cb-charhud.blade { border-color: #dfe3ff; color: #f2f4ff; box-shadow: 0 0 18px rgba(220,225,255,.65); }
.cb-charhud.dual { border-color: var(--gold); color: var(--gold-hi); box-shadow: var(--glow-gold); }
.cb-charhud.bump { animation: bump .45s var(--ease-out); }
/* Fenris's Moon badge (text built by SS.Wolf.hud in cards_wolf.js) */
.cb-charhud.wolf-moon, .cb-charhud.wolf-feral, .cb-charhud.wolf-eclipse { padding: 5px 22px 5px 8px; background: rgba(8,14,26,.9); border-color: #4fb8ff; color: #e6f4ff; box-shadow: 0 0 18px rgba(79,184,255,.5); }
.cb-charhud.wolf-feral { border-color: #eaf7ff; color: #ffffff; box-shadow: 0 0 26px rgba(160,220,255,.95), 0 0 60px rgba(79,184,255,.45); }
.cb-charhud.wolf-eclipse { border-color: #ff6b8e; color: #ffd6e2; box-shadow: 0 0 24px rgba(255,61,110,.7); }
.cb-pile { position: absolute; width: 96px; height: 96px; border-radius: 50%; display: flex; align-items: center; justify-content: center; background: radial-gradient(circle at 40% 35%, #3a1b40, #140814); border: 2px solid var(--line-strong); box-shadow: 0 6px 18px rgba(0,0,0,.6); cursor: pointer; transform: translate(-50%, -50%); transition: transform .15s; }
.cb-pile:hover { transform: translate(-50%, -50%) scale(1.08); box-shadow: var(--glow-gold); }
.cb-pile.draw { left: 90px; top: 990px; }
.cb-pile.discard { left: 1830px; top: 990px; }
.cb-pile.exhaust { left: 1830px; top: 875px; width: 70px; height: 70px; }
.pile-ico { width: 54px; height: 54px; color: var(--gold); }
.pile-ico svg { width: 100%; height: 100%; }
.pile-count { position: absolute; right: -8px; bottom: -6px; min-width: 34px; height: 34px; border-radius: 17px; background: #12060f; border: 2px solid var(--gold); display: flex; align-items: center; justify-content: center; font-family: var(--f-num); font-weight: 700; font-size: 19px; padding: 0 6px; }
.cb-end { position: absolute; left: 1620px; top: 820px; width: 230px; height: 74px; border-radius: 40px; font-family: var(--f-head); font-weight: 800; font-size: 25px; letter-spacing: .08em; text-transform: uppercase; color: #fff; cursor: pointer; border: 2px solid #ffc0d8; background: linear-gradient(180deg, #e0407a 0%, #8a1240 100%); box-shadow: 0 0 0 4px rgba(0,0,0,.45), 0 8px 24px rgba(0,0,0,.6), 0 0 26px rgba(255,79,139,.5); transition: transform .15s, filter .2s; text-shadow: 0 2px 2px rgba(0,0,0,.6); }
.cb-end:hover:not(:disabled) { transform: scale(1.05); filter: brightness(1.15); }
.cb-end:disabled { cursor: default; }
.cb-end.enemy-turn { background: linear-gradient(180deg, #3a2a40, #1e1224); border-color: #6a5a70; color: #b8a8bc; box-shadow: 0 0 0 4px rgba(0,0,0,.45); }
.cb-end.pulse { animation: endPulse 1.4s ease-in-out infinite; }
@keyframes endPulse { 50% { box-shadow: 0 0 0 4px rgba(0,0,0,.45), 0 0 50px rgba(255,79,139,1); transform: scale(1.04); } }
.cb-turn { position: absolute; left: 1735px; top: 900px; transform: translateX(-50%); font-family: var(--f-head); font-size: 16px; color: var(--text-faint); letter-spacing: .12em; }
.cb-hand { position: absolute; inset: 0; pointer-events: none; }
.cb-hand > .card { pointer-events: auto; }
.refuse { position: absolute; left: 50%; top: 610px; transform: translateX(-50%); font-family: var(--f-head); font-size: 28px; font-weight: 700; color: #ffb3c0; text-shadow: 0 2px 6px #000; animation: refuse 1.4s ease forwards; pointer-events: none; }
@keyframes refuse { 0% { opacity: 0; transform: translate(-50%, 10px); } 15% { opacity: 1; transform: translate(-50%, 0); } 80% { opacity: 1; } 100% { opacity: 0; transform: translate(-50%, -20px); } }

.float-num { position: absolute; transform: translate(-50%, -50%); font-family: var(--f-num); font-weight: 700; font-size: 54px; pointer-events: none; animation: floatUp 1.3s var(--ease-out) forwards; text-shadow: 0 3px 0 rgba(0,0,0,.7), 0 0 14px rgba(0,0,0,.6); white-space: nowrap; z-index: 40; }
.float-num.dmg { color: #ff8fbf; }
.float-num.dmg-player { color: #ff5d8f; }
.float-num.block { color: #9fd8ff; font-size: 40px; }
.float-num.heal { color: #8fffc4; font-size: 42px; }
.float-num.buff { color: var(--buff); font-size: 30px; font-family: var(--f-head); }
.float-num.debuff { color: #ffb08f; font-size: 30px; font-family: var(--f-head); }
.float-num.blocked { color: #b8d8ff; font-size: 30px; font-family: var(--f-head); }
.float-num.climax { font-family: var(--f-display); font-size: 70px; color: #ffe1ef; text-shadow: 0 0 24px #ff2d95, 0 0 60px #ff2d95; animation: climaxText 1.6s var(--ease-out) forwards; }
@keyframes floatUp { 0% { opacity: 0; transform: translate(-50%, -20%) scale(.6); } 15% { opacity: 1; transform: translate(-50%, -60%) scale(1.15); } 30% { transform: translate(-50%, -70%) scale(1); } 100% { opacity: 0; transform: translate(-50%, -190%); } }
@keyframes climaxText { 0% { opacity: 0; transform: translate(-50%, -50%) scale(.3); } 25% { opacity: 1; transform: translate(-50%, -60%) scale(1.3); } 100% { opacity: 0; transform: translate(-50%, -140%) scale(1); } }
.speech { position: absolute; left: 50%; top: 22%; transform: translate(-50%, -100%); max-width: 320px; padding: 12px 18px; background: #fff4f8; color: #3a0a1e; border-radius: 18px; font-family: var(--f-body); font-weight: 700; font-size: 20px; line-height: 1.2; box-shadow: 0 8px 20px rgba(0,0,0,.5); animation: speechIn .3s var(--ease-out); transition: opacity .35s; z-index: 50; text-align: center; }
.speech::after { content: ''; position: absolute; left: 50%; bottom: -12px; border: 8px solid transparent; border-top-color: #fff4f8; transform: translateX(-50%); }
.speech.out { opacity: 0; }
@keyframes speechIn { from { opacity: 0; transform: translate(-50%, -80%) scale(.8); } }

.is-enemy .speech { left: 8%; transform: translate(-90%, -100%); }
.is-enemy .speech::after { left: 88%; }
.is-player .speech { left: 92%; transform: translate(-10%, -100%); }
.is-player .speech::after { left: 12%; }

/* approved PNG UI art (assets/ui/*) */
.ui-art { width: 100%; height: 100%; object-fit: contain; display: block; pointer-events: none; }
.energy-orb.has-art { background-color: transparent; background-position: center; background-size: contain; background-repeat: no-repeat; box-shadow: none; animation: none; filter: drop-shadow(0 0 18px rgba(255,122,61,.7)); }
.cb-end.has-art { background-color: transparent; background-position: center; background-size: 100% 100%; background-repeat: no-repeat; border: none; box-shadow: none; }
.cb-end.has-art.enemy-turn { filter: grayscale(.8) brightness(.6); }
.cb-end.has-art.pulse { animation: endPulseArt 1.4s ease-in-out infinite; }
@keyframes endPulseArt { 50% { filter: drop-shadow(0 0 22px rgba(255,79,139,1)); transform: scale(1.04); } }
.cb-end.has-art span { font-size: 16px; letter-spacing: .05em; position: relative; top: -1px; }

/* Shaun 10-02: creatures stand at top:804px; name / Arousal bar / powers / intent stack ABOVE the head */
.cr-barwrap { bottom: auto; top: -44px; z-index: 5; }
.cr-name { bottom: auto; top: -78px; z-index: 5; }
.cr-powers { bottom: auto; top: -122px; height: auto; z-index: 5; }
.cr-intent { top: -128px; z-index: 6; }
.pip-wrap { top: 790px; }