.hd-debrief{--hd-accent:#c6ef8b;--hd-line:#b7dc7a45;position:fixed;inset:0;width:100vw;max-width:none;height:100dvh;max-height:none;margin:0;padding:0;border:0;color:#edf3e9;background:#080f0d;overflow:hidden;overscroll-behavior:contain}
.hd-debrief::backdrop{background:#050b09}.hd-debrief[data-outcome=defeat]{--hd-accent:#f0a092;--hd-line:#e89b7545}
.hd-shell{height:100%;display:grid;grid-template-rows:58px minmax(0,1fr)76px;padding:0 clamp(18px,4vw,64px);background:linear-gradient(100deg,#09100cc7,#09100def 68%),url('../assets/haff-war/haff-dam-battle-backdrop-v1.png') center/cover}
.hd-header{display:flex;align-items:center;justify-content:space-between;gap:16px;color:#a7b7a8;border-bottom:1px solid var(--hd-line);font:12px monospace;letter-spacing:2px}
.hd-body{display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);gap:5%;min-height:0}
.hd-hero{position:relative;min-height:0;isolation:isolate;overflow:hidden}
.hd-portrait{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center 15%;filter:saturate(.45) contrast(1.12);opacity:.6;mask-image:linear-gradient(0deg,transparent,#000 25%,#0008 70%,transparent);animation:hd-portrait-in 1.3s cubic-bezier(.16,1,.3,1) both}
.hd-hero:after{content:'';position:absolute;inset:0;z-index:-1;background:repeating-linear-gradient(150deg,transparent 0 76px,var(--hd-line) 77px 78px,transparent 79px 130px)}
.hd-stamp{position:absolute;top:9%;right:10%;width:78px;height:78px;display:grid;place-items:center;font-size:40px;color:var(--hd-accent);border:1px solid var(--hd-accent);transform:rotate(-9deg);box-shadow:0 0 35px var(--hd-line);animation:hd-stamp-in .75s .25s cubic-bezier(.16,1,.3,1) both}
.hd-hero-copy{position:absolute;left:0;right:0;top:28%;text-shadow:0 4px 30px #000;animation:hd-copy-in .85s .2s cubic-bezier(.16,1,.3,1) both}
.hd-eyebrow{font:12px monospace;color:var(--hd-accent);letter-spacing:4px;margin-bottom:12px}.hd-title{font-size:clamp(40px,5.7vw,86px);font-weight:950;letter-spacing:-2px;line-height:1.05}.hd-verdict{font-size:13px;color:#bdccbe;margin-top:22px;letter-spacing:2px}
.hd-leader{position:absolute;bottom:7%;left:0;display:grid;gap:6px;border-left:3px solid var(--hd-accent);padding:4px 20px;animation:hd-row-in .65s .8s both}.hd-leader small{font:11px monospace;color:var(--hd-accent);letter-spacing:2px}.hd-leader strong{font-size:30px}.hd-leader span{font-size:13px;color:#b5c6b6}
.hd-details{align-self:center;max-height:100%;overflow:auto;scrollbar-width:thin;padding:20px 0;display:grid;gap:22px;min-width:0}.hd-details h3{font-size:13px;font-weight:600;letter-spacing:2px;color:#b2c2b1;margin-bottom:12px}
.hd-metrics{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;border-bottom:1px solid var(--hd-line);padding-bottom:20px;animation:hd-row-in .7s .55s both}.hd-metric span{font-size:12px;color:#9cad9d;display:block}.hd-metric strong{display:block;font:600 36px/1.3 monospace;color:#e9f3dd;font-variant-numeric:tabular-nums;margin-top:6px}
.hd-team{animation:hd-row-in .7s .7s both}.hd-roster{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}.hd-unit{display:flex;align-items:center;gap:9px;min-width:0;border-bottom:1px solid #afc2a822;padding:7px 0}.hd-unit img{width:32px;height:39px;object-fit:cover;object-position:50% 15%}.hd-unit>div{min-width:0;flex:1}.hd-unit strong{display:block;font-size:13px}.hd-unit small{font-size:10px;color:#a7b9aa;white-space:nowrap}.hd-unit-state{font-size:10px;color:#bbdf9c}.hd-unit[data-alive=false] .hd-unit-state{color:#d3958a}
.hd-rewards{padding:18px 20px;background:linear-gradient(100deg,#bce28a14,transparent);border-left:2px solid var(--hd-accent);animation:hd-row-in .8s .95s both}.hd-total{display:flex;align-items:baseline;flex-wrap:wrap;gap:10px}.hd-total strong{font:600 clamp(24px,3vw,40px)/1.2 monospace;color:var(--hd-accent);font-variant-numeric:tabular-nums}.hd-total span{font-size:12px;color:#bac9b7}.hd-breakdown{font-size:10px;color:#93a58f;line-height:1.8;margin-top:8px}.hd-delivery{font-size:12px;line-height:1.7;color:#c6d2be;margin-top:8px}.hd-loss{font-size:12px;color:#f0a092;margin-top:8px}
.hd-footer{margin:0;padding:0;display:flex;align-items:center;justify-content:flex-end;gap:18px;border-top:1px solid var(--hd-line)}.hd-footer button{min-height:44px;padding:9px 24px}.hd-skip{background:transparent;border:0;color:#a6b7a4;font-size:12px}.hd-continue{background:var(--hd-accent);border-color:var(--hd-accent);color:#111b10;font-size:15px;font-weight:750;min-width:170px}
.hd-ready *{animation:none!important}.hd-ready .hd-portrait{transform:none}.hd-ready .hd-copy-in{opacity:1}
.hd-damage-roster{display:grid;gap:2px}.hd-damage-unit{min-width:0}.hd-damage-info{flex:1;min-width:0}.hd-damage-label{display:flex;justify-content:space-between;align-items:baseline;gap:8px;flex-wrap:wrap}.hd-damage-label small{font-variant-numeric:tabular-nums}.hd-damage-track{height:7px;margin-top:5px;background:#ffffff0c;overflow:hidden;border-radius:2px}.hd-damage-fill{height:100%;background:#57c7b3}.hd-damage-unit:first-child .hd-damage-fill{background:#edbb65}
@keyframes hd-portrait-in{from{opacity:0;transform:translateX(-50px) scale(1.15)}to{opacity:.6;transform:none}}
@keyframes hd-stamp-in{from{opacity:0;transform:rotate(15deg) scale(1.9)}to{opacity:1;transform:rotate(-9deg) scale(1)}}
@keyframes hd-copy-in{from{opacity:0;transform:translateX(-40px);filter:blur(6px)}to{opacity:1;transform:none;filter:none}}
@keyframes hd-row-in{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}
@media(max-width:760px){.hd-shell{grid-template-rows:44px minmax(0,1fr)62px;padding:0 18px}.hd-header{font-size:9px;letter-spacing:0}.hd-body{grid-template-columns:1fr;grid-template-rows:180px minmax(0,1fr);gap:0}.hd-hero-copy{top:25%}.hd-title{font-size:46px}.hd-eyebrow{font-size:9px;margin-bottom:8px;letter-spacing:2px}.hd-verdict{font-size:10px;margin-top:12px;letter-spacing:1px}.hd-stamp{width:48px;height:48px;right:4%;top:16%;font-size:28px}.hd-portrait{left:36%;width:64%;object-position:50% 22%}.hd-leader{bottom:5%;right:0;left:auto;border:0;padding:0;gap:2px;text-align:right}.hd-leader small{font-size:8px;letter-spacing:0}.hd-leader strong{font-size:17px}.hd-leader span{font-size:9px}.hd-details{align-self:stretch;padding:10px 0;gap:14px}.hd-metrics{gap:8px;padding-bottom:10px}.hd-metric strong{font-size:27px}.hd-details h3{font-size:11px;margin-bottom:7px}.hd-roster{gap:3px 10px}.hd-unit{gap:5px;padding:5px 0}.hd-unit img{width:24px;height:30px}.hd-unit strong{font-size:11px}.hd-unit small{font-size:9px}.hd-unit-state{display:none}.hd-rewards{padding:12px}.hd-total strong{font-size:27px}.hd-total span{font-size:10px}.hd-delivery{font-size:10px}.hd-footer{gap:8px}.hd-footer button{padding:8px 12px;min-height:40px}.hd-continue{min-width:140px}}
@media(max-height:620px) and (min-width:761px){.hd-shell{grid-template-rows:42px minmax(0,1fr)56px}.hd-details{gap:12px;padding:10px 0}.hd-metrics{padding-bottom:10px}.hd-rewards{padding:10px 14px}.hd-title{font-size:55px}}
@media(prefers-reduced-motion:reduce){.hd-debrief *{animation:none!important}}
@media(max-width:760px) and (max-height:740px){.hd-body{grid-template-rows:116px minmax(0,1fr)}.hd-hero-copy{top:18%}.hd-title{font-size:40px}.hd-verdict{display:none}.hd-leader small{font-size:7px}.hd-leader strong{font-size:15px}.hd-leader span{font-size:8px}.hd-details{gap:10px;padding:8px 0}.hd-unit{padding:4px 0}}