/* Retro UI test: square frames, crisp gauges and illustrated reward cards. */
:root{--retro-edge:#8aa0b6;--retro-ink:#071018;--retro-paper:#f1e9d4}
html,body,button,input{font-family:'Galmuri11','NeoDunggeunmo','Malgun Gothic','Apple SD Gothic Neo',system-ui,sans-serif}
html,body{letter-spacing:.015em}
button{font-weight:750}
#game .hudbox,#game .objective,#game .member,#game .dash,#game .bossbar,
#game .skillSlot,.modalcard,.choice,.statusPanel,.statusCard,.statusClose,
.menu-card,.mainbtn,.char-card,.char-detail,.codex-row,.codex-all-card,
.detail-skill,.evo-node,.equipBtn{border-radius:2px!important}
#game .hudbox,#game .objective,#game .member,#game .dash,#game .bossbar{
 border-width:2px!important;box-shadow:3px 3px 0 #050a13!important
}
#game .hud .bar,#game .hud .dashSeg,#game .hud .fill,#game .hud .dashSegFill{
 border-radius:0!important;box-shadow:none!important
}
#game .hud .bar,#game .hud .dashSeg{height:11px;border:2px solid #71839c!important;background:#172132}
#game .hud .fill,#game .hud .dashSegFill{
 background-image:repeating-linear-gradient(90deg,transparent 0,transparent 11px,#111b2b99 11px,#111b2b99 13px)!important;
 transition:width .08s steps(16,end)!important
}
#game .hud .fill{background-color:#54d696!important}
#game .hud .ultfill{background-color:#f7c753!important}
#game .hud .epfill{background-color:#65b7ef!important}
#game .hud .bossbar .fill{background-color:#e66b69!important}
#game .hud .dashSegFill{background-color:#70d6f3!important}
.modalcard{border:3px solid #9dafc1;background:#111d2e;box-shadow:8px 8px 0 #03070b;padding:20px;position:relative;isolation:isolate}
.modalcard:before{content:'';position:absolute;inset:5px;border:1px solid #425a75;pointer-events:none}
#modalTitle{margin-top:2px;color:#f3e8c6;text-shadow:2px 2px 0 #070d17;letter-spacing:.04em}
#modalSub{color:#b6cadd}
#modal .choices{gap:11px;align-items:stretch}
#modal .choice{border:3px solid var(--rar-edge,#75889c)!important;background:#172638!important;
 box-shadow:4px 4px 0 #050a13!important;overflow:hidden;min-height:187px;padding:11px!important;
 display:flex;flex-direction:column;text-align:left;transition:transform .1s steps(2,end),background .1s}
#modal .choice:hover:not(:disabled){transform:translate(-2px,-2px);box-shadow:6px 6px 0 #050a13!important;background:#203653!important}
#modal .choice:focus-visible{outline:3px solid #e9e1a6;outline-offset:3px}
#modal .choice:disabled{filter:grayscale(.55);opacity:.64;cursor:not-allowed}
#modal .choice.common{--rar-edge:#8c9cac;--rar-glow:#b9c9d7}
#modal .choice.rare{--rar-edge:#6ab8eb;--rar-glow:#a5dcff}
#modal .choice.epic{--rar-edge:#b58af1;--rar-glow:#dfbaff}
#modal .choice.legendary{--rar-edge:#e9bf5f;--rar-glow:#ffe4a1}
#modal .choice .retroCardTop{display:grid;grid-template-columns:72px minmax(0,1fr);align-items:center;gap:11px;
 min-height:83px;padding:5px 4px 11px;border-bottom:2px solid #46566c}
#modal .choice .retroIconFrame{width:72px;height:72px;display:grid;place-items:center;
 background:#0c1728;border:2px solid var(--rar-edge);box-shadow:inset 2px 2px 0 #31465f;flex:none}
#modal .choice .retroIconFrame canvas{width:64px;height:64px;display:block;image-rendering:pixelated}
#modal .choice .retroCardName{min-width:0;display:flex;flex-direction:column;gap:4px}
#modal .choice .retroCardName h3{font-size:16px;line-height:1.25;color:#fff4dd;margin:0;overflow-wrap:anywhere}
#modal .choice .retroCardName .rarity{position:static;border-radius:0!important;align-self:flex-start;
 color:#0d1825;background:var(--rar-glow);padding:3px 6px;font-size:10px;line-height:1.2}
#modal .choice .retroCardBody{padding:10px 4px 2px;display:flex;flex-direction:column;gap:6px;flex:1}
#modal .choice .retroCardBody p{margin:0;color:#d7e3e9;font-size:13px;line-height:1.5;overflow-wrap:anywhere}
#modal .choice .retroCardBody small{margin-top:auto;color:var(--rar-glow,#9bd5ff);font-size:11px;line-height:1.35}
#modal .choice.ghost{min-height:90px!important;background:#142b3b!important}
#modal .choice.ghost .retroCardTop{min-height:60px;grid-template-columns:48px 1fr}
#modal .choice.ghost .retroIconFrame{width:48px;height:48px}
#modal .choice.ghost .retroIconFrame canvas{width:42px;height:42px}
#modal.retroRewardOpen .choice:not(.ghost){animation:retroCardIn .52s steps(6,end) both;animation-delay:calc(var(--retro-index,0)*72ms)}
@keyframes retroCardIn{0%{opacity:0;transform:translateY(16px) scale(.88);filter:brightness(2.5)}35%{opacity:1;filter:brightness(1.8)}100%{opacity:1;transform:none;filter:none}}
.retroPixelBurst{position:absolute;inset:0;z-index:4;overflow:hidden;pointer-events:none}
.retroPixelBurst i{position:absolute;width:var(--px-size);height:var(--px-size);left:var(--px-x);top:var(--px-y);
 background:var(--px-color);box-shadow:2px 2px 0 #081421;opacity:0;
 animation:retroPixelIn .72s steps(6,end) forwards;animation-delay:var(--px-delay)}
@keyframes retroPixelIn{0%{opacity:0;transform:translate(var(--px-dx),var(--px-dy)) scale(2)}35%{opacity:1}75%{opacity:1;transform:translate(0,0) scale(1)}100%{opacity:0;transform:translate(0,0) scale(.25)}}
@media(max-width:700px){#modal .choices{grid-template-columns:repeat(2,minmax(0,1fr))!important}
 #modal .choice{min-height:160px;padding:7px!important}
 #modal .choice .retroCardTop{grid-template-columns:49px minmax(0,1fr);gap:6px;min-height:61px;padding:1px 0 6px}
 #modal .choice .retroIconFrame{width:49px;height:49px}
 #modal .choice .retroIconFrame canvas{width:44px;height:44px}
 #modal .choice .retroCardName h3{font-size:12px}
 #modal .choice .retroCardBody{padding:6px 0 0}
 #modal .choice .retroCardBody p{font-size:11px}
 #modal .choice .retroCardBody small{font-size:10px}
 .modalcard{padding:12px;max-height:95vh}}
@media(prefers-reduced-motion:reduce){#modal.retroRewardOpen .choice,.retroPixelBurst i{animation-duration:.01ms!important;animation-delay:0ms!important}}