:root{
  --bg:#080b12; --panel:#111827e8; --panel2:#172033f0; --line:#7b6231; --gold:#e8c56a;
  --text:#f4ead2; --muted:#c7b991; --red:#d96565; --green:#76d787; --blue:#77a8ff; --purple:#b388ff;
}
*{box-sizing:border-box} body{margin:0;background:radial-gradient(circle at 50% 0%,#20293c,#07090f 55%,#030407);color:var(--text);font-family:system-ui,-apple-system,BlinkMacSystemFont,"Noto Sans KR",sans-serif;min-height:100vh;overflow-x:hidden}
button{font-family:inherit;border:1px solid #a98843;background:linear-gradient(#f0d277,#a86d23);color:#1b1206;font-weight:800;border-radius:12px;padding:11px 15px;cursor:pointer;box-shadow:0 4px 0 #4d3214,0 0 18px #0008;transition:.12s transform,.12s filter}button:hover{filter:brightness(1.08)}button:active{transform:translateY(3px);box-shadow:0 1px 0 #4d3214}button.secondary{background:linear-gradient(#8bb5ff,#2d5698);border-color:#96bdff;color:#07111f}button.ghost{background:#151b28;border:1px solid #4c5d7a;color:#dce8ff;box-shadow:none;padding:9px 12px}button.danger{border-color:#81474a;color:#ffc7c7}button:disabled{opacity:.45;cursor:not-allowed;filter:grayscale(.5)}
#app{max-width:1180px;margin:0 auto;min-height:100vh;display:flex;flex-direction:column;padding:12px}.topbar{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:10px 12px;border:1px solid #2a3651;border-radius:18px;background:#0c111ce8;box-shadow:0 0 30px #0008;position:sticky;top:8px;z-index:10;backdrop-filter:blur(8px)}.brand{font-size:24px;font-weight:900;letter-spacing:-.03em;color:var(--gold)}.subtitle{font-size:12px;color:var(--muted)}.top-actions{display:flex;gap:8px}.footer{font-size:12px;color:#998d74;display:flex;justify-content:space-between;padding:14px 4px;gap:10px;flex-wrap:wrap}.glass{background:linear-gradient(135deg,#111827ee,#0b0f18dd);border:1px solid #5c4b2c;border-radius:22px;box-shadow:0 15px 60px #000b, inset 0 0 0 1px #ffffff12}.title-screen{position:relative;margin-top:14px;height:calc(100vh - 132px);min-height:560px;overflow:hidden;border-radius:26px;border:1px solid #34415b;background:#111}.title-bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;image-rendering:auto;filter:saturate(1.05) contrast(1.05)}.title-panel{position:absolute;left:38px;bottom:38px;width:min(520px,calc(100% - 76px));padding:28px}.title-panel h1{font-size:54px;line-height:1;margin:0 0 12px;color:var(--gold);text-shadow:0 3px 0 #3a230a}.title-panel p{line-height:1.7;color:#f5e8c9;margin:0 0 24px}.button-row{display:flex;gap:12px;flex-wrap:wrap}.layout{display:grid;grid-template-columns:1.15fr .85fr;gap:14px;margin-top:14px}.card{border:1px solid #31405c;background:linear-gradient(180deg,#121927,#0c111a);border-radius:20px;padding:14px;box-shadow:0 12px 40px #0007}.card h2,.card h3{margin:0 0 10px;color:var(--gold)}.nav{display:flex;gap:8px;flex-wrap:wrap;margin:14px 0}.statline{display:grid;grid-template-columns:repeat(4,1fr);gap:8px}.pill{padding:9px 11px;border-radius:14px;background:#182235;border:1px solid #344563;color:#e9efff;font-size:13px}.scene{position:relative;min-height:450px;border-radius:20px;overflow:hidden;border:1px solid #3c4b66;background:#10151f}.scene-bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;filter:brightness(.74) saturate(1.08)}.scene::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,#0000,#07101dcc 72%,#03060add)}.battle-field{position:relative;z-index:1;height:500px;display:grid;grid-template-columns:1fr 1fr;align-items:end;padding:24px 34px 154px}.unit{display:flex;flex-direction:column;align-items:center;gap:8px}.unit.enemy{align-items:center}.unit-img{max-width:min(330px,42vw);max-height:230px;object-fit:contain;filter:drop-shadow(0 16px 18px #000c);border-radius:12px}.player-img{max-width:205px}.enemy-img{max-width:270px}.boss-img{max-width:360px}.nameplate{font-weight:900;background:#05070bcc;border:1px solid #6b5831;border-radius:999px;padding:7px 14px;color:#ffefbf;box-shadow:0 0 16px #000b}.hpbar{width:min(320px,38vw);height:18px;background:#260d12;border:1px solid #7e383c;border-radius:999px;overflow:hidden}.hpfill{height:100%;background:linear-gradient(90deg,#b52235,#ff6f77);transition:.35s width}.mpfill{height:100%;background:linear-gradient(90deg,#3f65cf,#8ab4ff);transition:.35s width}.battle-ui{position:absolute;z-index:2;left:18px;right:18px;bottom:16px;height:124px;display:grid;grid-template-columns:1fr auto;gap:10px;align-items:stretch}.log{background:#070a10e6;border:1px solid #4d5b75;border-radius:16px;padding:12px;height:104px;min-height:104px;max-height:104px;overflow-y:auto;overflow-x:hidden;line-height:1.55;color:#e9e2d1;overscroll-behavior:contain}.skills{display:grid;grid-template-columns:repeat(2,150px);gap:8px;height:104px;align-self:stretch}.skill-btn{padding:10px 8px;font-size:13px}.shake{animation:shake .25s linear}.flash{animation:flash .28s linear}.float-dmg{position:absolute;z-index:5;font-size:32px;font-weight:1000;color:#ffdad7;text-shadow:0 3px 0 #5d1010,0 0 16px #ff5454;animation:floatDmg .8s ease-out forwards;pointer-events:none}@keyframes floatDmg{from{opacity:0;transform:translateY(10px) scale(.7)}20%{opacity:1}to{opacity:0;transform:translateY(-54px) scale(1.1)}}@keyframes shake{0%,100%{transform:translateX(0)}25%{transform:translateX(-8px)}50%{transform:translateX(7px)}75%{transform:translateX(-4px)}}@keyframes flash{0%,100%{filter:drop-shadow(0 16px 18px #000c)}50%{filter:drop-shadow(0 0 28px #fff) brightness(1.7)}}.grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:10px}.asset-card{background:#101827;border:1px solid #33425d;border-radius:16px;padding:10px;display:flex;flex-direction:column;gap:8px;min-height:180px}.asset-card img{width:100%;height:92px;object-fit:contain;background:#05070a;border-radius:10px;border:1px solid #26334a}.asset-card .title{font-weight:900;color:#ffe3a1}.asset-card .desc{font-size:12px;color:#c8d0df;line-height:1.4}.slot-list{display:grid;grid-template-columns:repeat(5,1fr);gap:8px}.slot{min-height:112px;background:#101827;border:1px solid #3c4d69;border-radius:16px;padding:8px;text-align:center}.slot img{width:100%;height:54px;object-fit:contain}.slot b{display:block;color:#ffe39e;font-size:12px}.slot span{font-size:11px;color:#b9c3d5}.reward{border-color:#866b2b;background:linear-gradient(180deg,#211b0d,#111827)}.hub{position:relative;min-height:410px;border-radius:20px;overflow:hidden;border:1px solid #3c4b66}.hub img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;filter:brightness(.7)}.hub-content{position:relative;z-index:1;padding:22px;max-width:620px}.panel-title{display:flex;justify-content:space-between;align-items:center;gap:10px;margin-bottom:10px}.small{font-size:12px;color:#aeb8ca}.notice{border:1px solid #4b6447;background:#132415;border-radius:14px;padding:10px;color:#d6ffd8;line-height:1.5;margin:10px 0}.bosswarn{border-color:#7d3a45;background:#2a1015;color:#ffd1d5}.dex-img{width:100%;max-height:220px;object-fit:cover;border-radius:16px;border:1px solid #3d4a60;margin-bottom:10px}.progress{height:12px;background:#12141c;border-radius:999px;overflow:hidden;border:1px solid #3c4d69}.progress>div{height:100%;background:linear-gradient(90deg,#c99a3e,#ffe88a)}.modal{position:fixed;inset:0;background:#000b;display:flex;align-items:center;justify-content:center;padding:18px;z-index:50}.modal-card{max-width:720px;width:100%;padding:24px}.hidden{display:none!important}@media(max-width:900px){.layout{grid-template-columns:1fr}.scene{min-height:560px}.battle-ui{height:190px;grid-template-columns:1fr;align-items:stretch}.log{height:82px;min-height:82px;max-height:82px}.skills{grid-template-columns:repeat(2,1fr);height:96px}.skill-btn{width:100%;padding:8px 6px}.title-panel h1{font-size:40px}.battle-field{height:560px;padding:18px 12px 214px}.unit-img{max-width:44vw;max-height:190px}.boss-img{max-width:48vw}.hpbar{width:min(280px,42vw)}.slot-list{grid-template-columns:repeat(2,1fr)}.statline{grid-template-columns:repeat(2,1fr)}}

/* Synthesis altar fix */
.alter-note{font-size:12px;color:#c7b991}.altar-layout{display:grid;grid-template-columns:.92fr 1.08fr;gap:14px;margin-top:14px}.synthesis-preview{border:1px solid #725b2f;background:linear-gradient(180deg,#1b1720,#101827);border-radius:18px;padding:12px;margin:12px 0}.synthesis-preview h3{margin:0 0 10px;color:#ffe6a6}.compare{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-bottom:10px}.guide-steps{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin:8px 0 14px}.guide-steps div{background:#101827;border:1px solid #40516d;border-radius:14px;padding:9px;text-align:center;font-size:12px}.guide-steps b{display:inline-grid;place-items:center;width:22px;height:22px;border-radius:999px;background:#e8c56a;color:#1b1206;margin-right:4px}.part-heading{margin-top:16px!important;border-top:1px solid #30405b;padding-top:12px}.part-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:10px}.part-card{position:relative}.part-card.selected{border-color:#e8c56a;box-shadow:0 0 0 2px #e8c56a44,0 0 24px #e8c56a22}.part-card.equipped::before{content:"장착중";position:absolute;top:8px;right:8px;font-size:11px;background:#243b1f;color:#d9ffd3;border:1px solid #5d9860;border-radius:999px;padding:3px 7px}.part-card.locked{opacity:.56;filter:grayscale(.35)}.synthesis-actions{margin-top:12px}.guide-modal ol{line-height:1.8;padding-left:22px}.guide-modal li{margin:6px 0}.guide-modal h2{color:#e8c56a;margin-top:0}
@media(max-width:900px){.altar-layout{grid-template-columns:1fr}.compare{grid-template-columns:1fr}.guide-steps{grid-template-columns:repeat(2,1fr)}}

/* V.0.4 skill descriptions + Firebase save UI */
#versionLabel{color:var(--gold);font-weight:900;letter-spacing:.02em}.cloud-status{font-size:13px}.cloud-on{color:#b9ffd0}.cloud-off{color:#ffd89c}.skills{grid-template-columns:repeat(2,190px)}.skill-btn{display:flex;flex-direction:column;align-items:flex-start;gap:2px;text-align:left;line-height:1.25}.skill-btn b{font-size:13px}.skill-btn span{font-size:11px;opacity:.9}.skill-btn em{font-style:normal;font-size:10px;opacity:.75;color:#281802}.skill-btn.secondary em{color:#07111f}.guide-modal{max-height:86vh;overflow:auto}.guide-modal.wide{max-width:960px}.skill-guide-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:8px;margin:8px 0 14px}.skill-help{background:#101827;border:1px solid #40516d;border-radius:14px;padding:10px}.skill-help b{display:block;color:#ffe39e}.skill-help span{display:block;font-size:12px;color:#a9c8ff;margin:3px 0}.skill-help p{margin:0;color:#dfe6f5;font-size:12px;line-height:1.45}.skill-list{display:grid;gap:8px;margin:8px 0}.skill-card{display:grid;grid-template-columns:70px 1fr;gap:10px;background:#0d1421;border:1px solid #33425d;border-radius:14px;padding:8px;align-items:center}.skill-card img{width:70px;height:54px;object-fit:contain;background:#05070a;border-radius:10px}.skill-card b{color:#ffe3a1}.skill-card p{margin:3px 0;color:#d9e1ef;line-height:1.45;font-size:12px}.skill-card span{color:#aeb8ca;font-size:11px}.part-card .desc{min-height:94px}.top-actions{flex-wrap:wrap;justify-content:flex-end}
@media(max-width:900px){.skills{grid-template-columns:repeat(2,1fr)}.skill-btn em{display:none}.topbar{align-items:flex-start}.brand{font-size:20px}.top-actions button{padding:7px 9px;font-size:12px}}
/* keep battle log fixed while allowing richer skill descriptions */
.battle-ui{height:168px}.log{height:148px;min-height:148px;max-height:148px}.skills{height:148px}.battle-field{padding-bottom:204px}.skill-btn{overflow:hidden}.skill-btn em{display:block;max-height:30px;overflow:hidden}
@media(max-width:900px){.battle-ui{height:220px}.log{height:92px;min-height:92px;max-height:92px}.skills{height:116px}.battle-field{padding-bottom:244px}.skill-btn b{font-size:12px}.skill-btn span{font-size:10px}}

/* V.0.6 account login modal */
.auth-modal{max-width:520px}.auth-divider{display:flex;align-items:center;gap:10px;margin:14px 0;color:#aeb8ca;font-size:13px}.auth-divider::before,.auth-divider::after{content:"";height:1px;background:#3b4b68;flex:1}.auth-label{display:grid;gap:6px;margin:10px 0;color:#ffe3a1;font-weight:800}.auth-label input{width:100%;box-sizing:border-box;border:1px solid #40516d;background:#070a10;color:#eef4ff;border-radius:12px;padding:12px 13px;font-size:14px;outline:none}.auth-label input:focus{border-color:#e8c56a;box-shadow:0 0 0 3px #e8c56a22}.hidden{display:none!important}

/* V.0.8 dex detail + skill info buttons */
.skill-wrap{position:relative;min-width:190px;height:100%}.skill-wrap .skill-btn{width:100%;height:100%;padding-right:32px}.skill-info{position:absolute;right:6px;top:6px;width:22px;height:22px;border-radius:50%;padding:0;font-size:13px;font-weight:1000;line-height:1;background:#f4d06b;color:#211300;border:1px solid #fff1a8;box-shadow:0 2px 8px #0008;z-index:3}.skill-info:hover{transform:translateY(-1px);filter:brightness(1.08)}.dex-grid .dex-card{appearance:none;text-align:left;color:inherit;cursor:pointer;width:100%;font-family:inherit}.dex-card:hover{transform:translateY(-2px);border-color:#f0c85d;box-shadow:0 10px 24px #0007}.dex-detail{max-width:900px}.dex-detail-head{display:grid;grid-template-columns:220px 1fr;gap:16px;align-items:center}.dex-detail-head>img{width:100%;height:170px;object-fit:contain;background:#05070a;border:1px solid #374760;border-radius:16px}.dex-statline{margin-top:10px}.drop-list{display:grid;gap:10px;margin:10px 0}.drop-row{display:grid;grid-template-columns:78px 1fr 70px;gap:10px;align-items:center;background:#0d1421;border:1px solid #33425d;border-radius:16px;padding:10px}.drop-row img{width:78px;height:58px;object-fit:contain;background:#05070a;border-radius:10px}.drop-row b{display:block;color:#ffe3a1}.drop-row span{display:block;color:#a9c8ff;font-size:12px;margin:2px 0}.drop-row p{margin:0;color:#dfe6f5;font-size:12px;line-height:1.35}.drop-row strong{font-size:22px;color:#ffe88a;text-align:right}
@media(max-width:900px){.skill-wrap{min-width:0}.skill-wrap .skill-btn{padding-right:30px}.skill-info{width:21px;height:21px;font-size:12px}.dex-detail-head{grid-template-columns:1fr}.dex-detail-head>img{height:150px}.drop-row{grid-template-columns:58px 1fr 54px}.drop-row img{width:58px;height:48px}.drop-row strong{font-size:18px}.dex-statline{grid-template-columns:repeat(2,1fr)}}