:root { --ink: #231a4a; --gold: #ffc93c; --gold2: #ff9f1c; --blue: #3fa9ff; --panel: #2f2766; --panel2: #3b3280; --cream: #fff7e6; --red: #ff4d6d; --mint: #4fe3c1; --purple: #a46bff; }
* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { margin: 0; height: 100%; background: #171233; overflow: hidden; font-family: "Apple SD Gothic Neo", "Noto Sans KR", system-ui, sans-serif; color: var(--cream); user-select: none; -webkit-user-select: none; }
#app { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: min(100vw, 56.25vh); height: min(100vh, 177.78vw); width: min(100vw, 56.25dvh); height: min(100dvh, 177.78vw); overflow: hidden; background: #2b2257; container-type: size; }
#cv { position: absolute; inset: 0; width: 100%; height: 100%; touch-action: none; display: block; }
.hidden { display: none !important; }
#loading { position: absolute; inset: 0; display: grid; place-items: center; font-weight: 800; font-size: 5cqw; background: #2b2257; }
.hud-btn { position: absolute; left: 2.5cqw; top: 2.6cqh; width: 9cqw; height: 9cqw; border-radius: 2.2cqw; border: 0.6cqw solid #fff; background: linear-gradient(#5fb8ff, #2f7fe0); color: #fff; font-weight: 900; font-size: 3.4cqw; box-shadow: 0 0.8cqw 0 #1b4f9c; z-index: 5; cursor: pointer; }
#screen { position: absolute; inset: 0; z-index: 10; pointer-events: none; }
#screen > * { pointer-events: auto; }
button { font-family: inherit; cursor: pointer; }

/* banner + wave track */
#banner { position: absolute; left: 0; right: 0; top: 34cqh; height: 15cqh; background: linear-gradient(90deg, rgba(196,30,58,0.92), rgba(255,77,109,0.92)); display: flex; flex-direction: column; align-items: center; justify-content: center; z-index: 6; animation: slide 2.4s ease forwards; border-top: 0.6cqw solid #fff; border-bottom: 0.6cqw solid #fff; }
#banner .b-mark { position: absolute; left: 6cqw; top: 50%; transform: translateY(-50%); width: 13cqw; height: 13cqw; background: #fff; color: var(--red); clip-path: polygon(50% 0, 100% 100%, 0 100%); display: grid; place-items: center; padding-top: 3cqw; font-weight: 900; font-size: 7cqw; }
#banner .b-text { font-size: 8cqw; font-weight: 900; text-shadow: 0 0.6cqw 0 #7a0b22; }
#banner .b-sub { font-size: 3.4cqw; opacity: 0.9; }
@keyframes slide { 0% { transform: translateX(-100%); } 15%, 85% { transform: none; } 100% { transform: translateX(100%); } }
#track { position: absolute; left: 1.5cqw; top: 22cqh; width: 9cqw; z-index: 6; display: flex; flex-direction: column-reverse; align-items: center; gap: 1.2cqh; padding: 1cqh 0; background: rgba(20,14,50,0.55); border-radius: 3cqw; animation: fadeio 2.6s ease forwards; }
#track .d { width: 5cqw; height: 5cqw; transform: rotate(45deg); background: #fff; border: 0.5cqw solid #3a3176; display: grid; place-items: center; }
#track .d span { transform: rotate(-45deg); font-size: 2.6cqw; font-weight: 900; color: #3a3176; }
#track .d.done { background: var(--gold); }
#track .d.now { background: var(--gold); box-shadow: 0 0 2cqw #fff; }
#track .sk { width: 6.4cqw; height: 6.4cqw; border-radius: 1.6cqw; display: grid; place-items: center; font-size: 4cqw; }
#track .sk.elite { background: var(--purple); } #track .sk.boss { background: var(--red); }
#track .cap { font-size: 2.8cqw; font-weight: 900; color: var(--gold); }
@keyframes fadeio { 0% { opacity: 0; } 10%, 85% { opacity: 1; } 100% { opacity: 0; } }

/* overlays */
.dim { position: absolute; inset: 0; background: rgba(12,8,30,0.72); display: flex; flex-direction: column; align-items: center; padding-top: 14cqh; }
.title-plate { background: #120d2b; border: 0.6cqw solid #fff; padding: 1.6cqw 6cqw; font-size: 6cqw; font-weight: 900; box-shadow: 0 0 0 0.6cqw #4cf, 0 0 4cqw rgba(80,200,255,0.6); margin-bottom: 3cqh; }
.slots { display: flex; gap: 1.6cqw; margin-bottom: 2.4cqh; }
.slotrow { display: flex; gap: 0.6cqw; background: #120d2b; padding: 0.8cqw; border-radius: 1.6cqw; border: 0.4cqw solid #4a3f99; }
.slot { width: 6.6cqw; height: 6.6cqw; border-radius: 1cqw; background: #2c2560; position: relative; display: grid; place-items: center; }
.slot img { width: 86%; height: 86%; object-fit: contain; }
.slot b { position: absolute; right: 0.2cqw; top: -0.6cqw; font-size: 2.4cqw; color: #fff; text-shadow: 0 0 0.6cqw #000; }
.slot.w { background: #6b4b10; } .slot.p { background: #1d4f86; }
.cards { display: flex; gap: 2.4cqw; padding: 0 3cqw; width: 100%; justify-content: center; }
.card { flex: 1; max-width: 30cqw; min-height: 52cqh; border-radius: 2.4cqw; background: #1c1640; border: 0.8cqw solid #2b2257; position: relative; display: flex; flex-direction: column; align-items: center; padding: 0 0 2cqw; overflow: visible; transition: transform .12s; color: #fff; cursor: pointer; }
.card:active { transform: scale(0.96); }
.card .cname { width: 100%; text-align: center; font-weight: 900; font-size: 3.4cqw; padding: 1.6cqw 1cqw; border-radius: 1.6cqw 1.6cqw 0 0; background: #2a2154; min-height: 9cqh; display: grid; place-items: center; line-height: 1.15; }
.card .art { width: 100%; aspect-ratio: 1; display: grid; place-items: center; background: radial-gradient(circle, #fff3c4, #f9c86b); }
.card .art img { width: 70%; height: 70%; object-fit: contain; filter: drop-shadow(0 1cqw 0 rgba(0,0,0,0.25)); }
.card.passive .art { background: radial-gradient(circle, #d6f2ff, #6ec3ff); }
.card.weapon { border-color: #f2b33d; } .card.passive { border-color: #57b7ff; }
.card .pips { display: flex; gap: 0.8cqw; margin: 1.2cqw 0; }
.pip { width: 2.4cqw; height: 2.4cqw; transform: rotate(45deg); background: #555; border: 0.3cqw solid #222; }
.pip.on.gold { background: var(--gold); } .pip.on.red { background: var(--red); } .pip.on.purple { background: var(--purple); }
.card .desc { font-size: 3.1cqw; padding: 0 2cqw; line-height: 1.35; text-align: left; width: 100%; flex: 1; }
.card .elem { font-size: 2.6cqw; background: #120d2b; padding: 0.6cqw 2cqw; border-radius: 3cqw; margin-top: 1cqw; }
.card .ribbon { position: absolute; right: -1.2cqw; top: -2.4cqw; background: var(--red); font-size: 2.6cqw; font-weight: 900; padding: 0.4cqw 1.6cqw; border-radius: 1cqw; transform: rotate(6deg); }
.card.glow { border-color: #fff3a0; box-shadow: 0 0 3cqw #ffd84a, 0 0 7cqw #ff9f1c; animation: pulse 1s infinite alternate; }
.card.glow.redt { box-shadow: 0 0 3cqw #ff6b8a, 0 0 7cqw #ff2d55; }
.card.glow.purplet { box-shadow: 0 0 3cqw #c79bff, 0 0 7cqw #8d4dff; }
@keyframes pulse { to { transform: scale(1.03); } }
.hint { margin-top: 3cqh; font-size: 3.6cqw; font-weight: 700; text-align: center; }
.hint em { color: var(--mint); font-style: normal; }
.btn { border: 0; border-radius: 2.4cqw; padding: 2.2cqw 7cqw; font-size: 5cqw; font-weight: 900; color: #3a2400; background: linear-gradient(#ffe46b, #ffb21c); box-shadow: 0 1cqw 0 #b86b00, inset 0 0.5cqw 0 rgba(255,255,255,0.6); }
.btn.blue { color: #fff; background: linear-gradient(#6fc2ff, #2f7fe0); box-shadow: 0 1cqw 0 #1b4f9c; }
.btn.small { font-size: 3.4cqw; padding: 1.6cqw 4cqw; }
.btn:disabled { filter: grayscale(1) brightness(0.7); }
.row { display: flex; gap: 3cqw; align-items: center; justify-content: center; }

/* roulette */
.rou { width: 86cqw; background: #4b3f9a; border-radius: 3cqw; border: 0.8cqw solid #2b2257; padding: 7cqw 3cqw 3cqw; position: relative; margin-top: 4cqh; }
.rou .rt { position: absolute; left: 50%; top: -3cqw; transform: translateX(-50%); background: linear-gradient(#ffd75e, #ff9f1c); color: #3a2400; font-weight: 900; font-size: 4.6cqw; padding: 1.2cqw 6cqw; border-radius: 1.2cqw; white-space: nowrap; }
.rou .grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 1.4cqw; }
.rou .cell { aspect-ratio: 1; background: #f7d58b; border-radius: 1.4cqw; display: grid; place-items: center; border: 0.5cqw solid #b0812a; }
.rou .cell img { width: 78%; height: 78%; object-fit: contain; }
.rou .cell.lit { background: #fff6c8; box-shadow: 0 0 2.4cqw #fff, 0 0 4cqw #ffd84a; border-color: #fff; }
.rou .cell.won { background: #fff; box-shadow: 0 0 3cqw #ffef8a; border-color: var(--gold2); }
.rou .center { grid-column: 2 / 5; grid-row: 2 / 5; border-radius: 2cqw; background: radial-gradient(circle, #8f7dff, #4b2fb8); display: grid; place-items: center; overflow: hidden; }
.rou .center img { width: 82%; }
.rewards { width: 86cqw; display: flex; flex-direction: column; gap: 1.6cqh; margin-top: 3cqh; }
.rw { display: flex; align-items: center; gap: 3cqw; background: #2b2257; border: 0.6cqw solid #f2b33d; border-radius: 2cqw; padding: 1.6cqw 2.4cqw; }
.rw img { width: 13cqw; height: 13cqw; object-fit: contain; background: radial-gradient(circle, #fff3c4, #f9c86b); border-radius: 1.6cqw; }
.rw .t { font-weight: 900; font-size: 3.8cqw; } .rw .d { font-size: 3.2cqw; opacity: 0.9; }
.rw.glow { box-shadow: 0 0 3cqw #ffd84a; border-color: #fff3a0; }

/* result */
.result { width: 88cqw; background: #2b2563; border-radius: 3cqw; border: 0.8cqw solid #120d2b; margin-top: 0; padding: 12cqw 4cqw 4cqw; position: relative; text-align: center; }
.result .ribbon2 { position: absolute; left: 50%; top: -6cqw; transform: translateX(-50%); background: linear-gradient(#a58bff, #6a4cf0); border: 0.6cqw solid #fff; padding: 1.6cqw 8cqw; border-radius: 2cqw; font-size: 7cqw; font-weight: 900; white-space: nowrap; text-shadow: 0 0.6cqw 0 #2b1680; }
.result.win .ribbon2 { background: linear-gradient(#ffe46b, #ff9f1c); color: #3a2400; text-shadow: none; }
.result .face { position: absolute; left: 50%; top: -30cqw; transform: translateX(-50%); width: 34cqw; }
.result .big { font-size: 11cqw; font-weight: 900; color: #fff; background: #120d2b; width: 20cqw; height: 20cqw; margin: 1cqw auto; display: grid; place-items: center; clip-path: polygon(25% 0, 75% 0, 100% 50%, 75% 100%, 25% 100%, 0 50%); }
.result .line { display: flex; justify-content: space-between; background: #120d2b; padding: 2cqw 4cqw; border-radius: 1.4cqw; margin: 1.6cqw 0; font-weight: 800; font-size: 3.6cqw; }
.result .loot { display: flex; gap: 3cqw; justify-content: center; margin: 2cqw 0 4cqw; }
.result .loot div { background: radial-gradient(circle, #fff3c4, #f9c86b); border-radius: 1.6cqw; width: 15cqw; height: 15cqw; position: relative; display: grid; place-items: center; }
.result .loot img { width: 70%; } .result .loot span { position: absolute; bottom: 0; right: 1cqw; font-size: 2.8cqw; font-weight: 900; color: #3a2400; }

/* lobby */
.lobby { position: absolute; inset: 0; background: radial-gradient(circle at 50% 42%, #4aa8ff 0, #2e57c9 32%, #1b1e6b 62%, #120d2b 100%); display: flex; flex-direction: column; }
.lobby::before { content: ""; position: absolute; inset: 0; background: url(art/bg1.jpg?v=84d36ffe02) center/cover; opacity: 0.12; }
.topbar { position: relative; display: flex; align-items: center; gap: 2cqw; padding: 3cqw 3cqw 0; }
.prof { display: flex; align-items: center; gap: 1.6cqw; background: rgba(10,8,30,0.6); border-radius: 2cqw; padding: 1cqw 2cqw 1cqw 1cqw; }
.prof img { width: 11cqw; height: 11cqw; border-radius: 1.6cqw; background: #ffd27a; object-fit: cover; }
.prof .lv { font-weight: 900; font-size: 3.2cqw; }
.prof .xp { width: 18cqw; height: 1.6cqw; background: #222; border-radius: 1cqw; overflow: hidden; margin-top: 0.6cqw; } .prof .xp i { display: block; height: 100%; background: var(--mint); }
.cur { display: flex; gap: 1.4cqw; margin-left: auto; }
.cur div { background: rgba(10,8,30,0.6); border-radius: 3cqw; padding: 0.8cqw 2cqw 0.8cqw 1cqw; font-weight: 900; font-size: 3.2cqw; display: flex; align-items: center; gap: 0.8cqw; }
.cur img { width: 5cqw; height: 5cqw; }
.chap { position: relative; flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; }
.chap h2 { margin: 0; font-size: 7cqw; font-weight: 900; text-shadow: 0 0.6cqw 0 #120d2b; }
.chap .best { color: var(--gold); font-weight: 900; font-size: 4cqw; margin: 1cqw 0 2cqw; }
.chap .boss { width: 56cqw; height: 56cqw; object-fit: contain; filter: drop-shadow(0 2cqw 0 rgba(0,0,0,0.3)); animation: bob 2.4s ease-in-out infinite; }
.chap .lock { filter: grayscale(1) brightness(0.5); }
@keyframes bob { 50% { transform: translateY(-2cqw); } }
.chap .arrow { position: absolute; top: 45%; font-size: 8cqw; color: var(--gold); background: none; border: 0; text-shadow: 0 0.6cqw 0 #120d2b; }
.chap .arrow.l { left: 3cqw; } .chap .arrow.r { right: 3cqw; }
.milestones { display: flex; gap: 2cqw; margin-top: 2cqw; }
.ms { background: rgba(10,8,30,0.6); border-radius: 2cqw; padding: 1.2cqw 2.4cqw; font-size: 3cqw; font-weight: 800; display: flex; align-items: center; gap: 1cqw; border: 0.4cqw solid transparent; }
.ms img { width: 6cqw; } .ms.ready { border-color: var(--gold); box-shadow: 0 0 2cqw var(--gold); } .ms.done { opacity: 0.45; }
.startwrap { position: relative; display: flex; flex-direction: column; align-items: center; padding: 2cqw 0 3cqw; }
.start { font-size: 7cqw; padding: 2.4cqw 14cqw; line-height: 1; }
.start small { display: block; font-size: 3.6cqw; margin-top: 0.6cqw; }
.tabs { position: relative; display: flex; background: #120d2b; padding: 1.4cqw 1.4cqw calc(1.4cqw + env(safe-area-inset-bottom)); gap: 1.4cqw; }
.tab { flex: 1; background: #2b2563; border: 0; border-radius: 2cqw; color: #fff; padding: 1.6cqw 0 1cqw; font-weight: 900; font-size: 3.2cqw; display: flex; flex-direction: column; align-items: center; gap: 0.4cqw; }
.tab img { width: 9cqw; height: 9cqw; object-fit: contain; }
.tab.on { background: linear-gradient(#ffd75e, #ff9f1c); color: #3a2400; }
.panel { position: relative; flex: 1; overflow-y: auto; padding: 3cqw; display: flex; flex-direction: column; gap: 2cqw; }
.item { display: flex; align-items: center; gap: 3cqw; background: rgba(10,8,30,0.6); border-radius: 2.4cqw; padding: 2.4cqw; }
.item img { width: 18cqw; height: 18cqw; object-fit: contain; }
.item .grow { flex: 1; } .item .t { font-weight: 900; font-size: 4cqw; } .item .d { font-size: 3.2cqw; opacity: 0.85; margin-top: 0.6cqw; }
.item.sel { outline: 0.6cqw solid var(--gold); }
.toast { position: absolute; left: 50%; top: 18cqh; transform: translateX(-50%); background: rgba(10,8,30,0.9); padding: 2cqw 4cqw; border-radius: 2cqw; font-weight: 800; font-size: 3.6cqw; z-index: 30; animation: fadeio 1.8s forwards; white-space: nowrap; }
.pause { width: 74cqw; background: #2b2563; border-radius: 3cqw; padding: 5cqw; margin-top: 16cqh; display: flex; flex-direction: column; gap: 3cqw; text-align: center; }
.pause h3 { margin: 0 0 2cqw; font-size: 6cqw; }
/* equipment */
.gear-wrap { display: flex; align-items: center; justify-content: space-between; gap: 2cqw; }
.gcol { display: flex; flex-direction: column; gap: 2cqw; }
.gslot { width: 18cqw; height: 18cqw; border-radius: 2.4cqw; background: #120d2b; border: 0.7cqw solid #3a3270; position: relative; display: grid; place-items: center; padding: 0; }
.gslot img { width: 74%; height: 74%; object-fit: contain; }
.gslot b { position: absolute; bottom: 0.4cqw; right: 1cqw; font-size: 2.6cqw; color: #fff; text-shadow: 0 0 0.6cqw #000; }
.gplane { flex: 1; text-align: center; } .gplane img { width: 40cqw; filter: drop-shadow(0 2cqw 0 rgba(0,0,0,.3)); } .gplane .d { font-size: 3.2cqw; }
.inv { display: grid; grid-template-columns: repeat(5, 1fr); gap: 1.6cqw; } .inv .gslot { width: 100%; height: auto; aspect-ratio: 1; }
.qtag { padding: 0.2cqw 1.6cqw; border-radius: 1cqw; color: #120d2b; font-weight: 900; font-size: 3cqw; }
.gskill { font-weight: 800; font-size: 3.3cqw; } .gskill small { opacity: .7; }
/* talents */
.tgrid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 2cqw; }
.tcard { aspect-ratio: 0.72; border-radius: 2cqw; border: 0.6cqw solid #fff; position: relative; padding: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; color: #fff; }
.tcard img { width: 70%; height: 55%; object-fit: contain; } .tcard .nm { font-size: 2.4cqw; font-weight: 900; text-shadow: 0 0 0.6cqw #000; }
.tcard b { position: absolute; top: 0.6cqw; right: 1cqw; font-size: 2.6cqw; text-shadow: 0 0 0.6cqw #000; }
.tcard.back { background: none; border: 0; } .tcard.back img { width: 100%; height: 100%; }
.draws { display: flex; gap: 2cqw; } .dbox { flex: 1; background: rgba(10,8,30,0.6); border-radius: 2.4cqw; padding: 2cqw; display: flex; flex-direction: column; gap: 1.4cqw; align-items: center; text-align: center; font-size: 3cqw; }
.dbox .btn small { font-size: 2.8cqw; }
.flip { width: 46cqw; aspect-ratio: 0.72; position: relative; transform-style: preserve-3d; transition: transform .5s; }
.flip.long { animation: shake 1.2s; } .flip.on { transform: rotateY(180deg); }
.flip .fb, .flip .ff { position: absolute; inset: 0; backface-visibility: hidden; border-radius: 3cqw; display: flex; flex-direction: column; align-items: center; justify-content: center; }
.flip .fb img { width: 100%; height: 100%; } .flip .ff { transform: rotateY(180deg); border: 0.8cqw solid #fff; box-shadow: 0 0 6cqw var(--a); }
.flip .ff img { width: 70%; } .flip .nm { font-weight: 900; font-size: 5cqw; text-shadow: 0 0.4cqw 0 rgba(0,0,0,.4); } .flip .lvl { font-weight: 900; font-size: 4cqw; }
.flip.long.on .ff { animation: glowp 1s infinite alternate; }
@keyframes shake { 0%,100% { transform: none; } 20% { transform: rotate(-4deg) scale(1.05); } 40% { transform: rotate(4deg) scale(1.08); } 60% { transform: rotate(-3deg) scale(1.1); } 80% { transform: rotate(2deg) scale(1.05); } }
@keyframes glowp { to { box-shadow: 0 0 10cqw #c99bff, 0 0 18cqw #7a3df0; } }
/* milestones */
.hex { width: 13cqw; height: 13cqw; display: grid; place-items: center; font-weight: 900; font-size: 4.6cqw; background: #120d2b; clip-path: polygon(25% 0, 75% 0, 100% 50%, 75% 100%, 25% 100%, 0 50%); color: #8a83b8; }
.hex.ready { background: linear-gradient(#ffe46b, #ff9f1c); color: #3a2400; } .hex.done { background: #4fe3c1; color: #12302a; }
.conf { width: 80cqw; position: absolute; top: 10cqh; animation: bob 1s ease-in-out infinite; pointer-events: none; }
.rwi { width: 20cqw; height: 20cqw; background: radial-gradient(circle, #fff3c4, #f9c86b); border-radius: 2cqw; position: relative; display: grid; place-items: center; }
.rwi img { width: 70%; height: 70%; object-fit: contain; } .rwi b { position: absolute; bottom: 0.4cqw; right: 1.2cqw; color: #3a2400; font-size: 3cqw; }
/* boss warning band, jackpot, victory extras */
.band { position: absolute; left: 0; right: 0; top: 0; bottom: 0; z-index: 7; pointer-events: none; background: repeating-linear-gradient(-45deg, rgba(255,40,70,0.0) 0 6cqw, rgba(255,40,70,0.0) 6cqw 12cqw); animation: bandflash 2.6s ease forwards; }
.band span { position: absolute; top: 22cqh; left: 0; white-space: nowrap; font-weight: 900; font-size: 6cqw; color: #fff; background: rgba(220,20,50,0.9); padding: 1.4cqw 4cqw; border-top: 0.6cqw solid #ffd84a; border-bottom: 0.6cqw solid #ffd84a; animation: bandmove 2.6s linear forwards; }
@keyframes bandmove { from { transform: translateX(100cqw); } to { transform: translateX(-160cqw); } }
@keyframes bandflash { 0%, 100% { background-color: rgba(255,30,60,0); } 10%, 30%, 50%, 70% { background-color: rgba(255,30,60,0.28); } 20%, 40%, 60% { background-color: rgba(255,30,60,0.05); } }
.jackpot { font-size: 9cqw; font-weight: 900; color: #ffe46b; text-shadow: 0 0.8cqw 0 #b86b00, 0 0 4cqw #ffb21c; margin-bottom: 2cqh; animation: pulse .5s infinite alternate; }
.besttag { position: absolute; right: 3cqw; top: 3cqw; background: #ff4d6d; font-weight: 900; font-size: 3cqw; padding: 0.6cqw 2cqw; border-radius: 1cqw; transform: rotate(6deg); }
.result .big.gold { background: linear-gradient(#ffe46b, #ff4d6d); color: #3a0010; }
/* shop */
.crates { display: flex; gap: 2.4cqw; }
.crate { flex: 1; background: rgba(10,8,30,0.6); border-radius: 2.4cqw; padding: 2.4cqw; display: flex; flex-direction: column; align-items: center; gap: 1.4cqw; text-align: center; }
.crate .ped { width: 30cqw; height: 22cqw; display: grid; place-items: center; background: radial-gradient(ellipse at 50% 80%, #4b3f9a 0 40%, transparent 41%); }
.crate .ped img { width: 24cqw; } .crate .t { font-weight: 900; font-size: 3.8cqw; } .crate .d { font-size: 2.7cqw; opacity: .9; } .crate .btn { width: 100%; }
.skip { font-size: 3.2cqw; display: flex; gap: 1.6cqw; align-items: center; opacity: .85; }
.opening { position: relative; width: 70cqw; height: 70cqw; display: grid; place-items: center; }
.opening .hexped { position: absolute; bottom: 4cqw; width: 50cqw; height: 16cqw; background: linear-gradient(#6a5ad8, #2b2563); clip-path: polygon(15% 0, 85% 0, 100% 50%, 85% 100%, 15% 100%, 0 50%); }
.opening .cr { width: 40cqw; position: relative; animation: shake 0.9s; }
.opening .beam { position: absolute; bottom: 10cqw; width: 18cqw; height: 0; background: linear-gradient(transparent, var(--c)); filter: blur(1cqw); opacity: 0; transition: all .5s; }
.opening.open .beam { height: 120cqh; width: 40cqw; opacity: 0.9; } .opening.open .cr { transform: scale(1.15); filter: brightness(1.6) drop-shadow(0 0 4cqw var(--c)) !important; }
.loots { display: grid; grid-template-columns: repeat(5, 1fr); gap: 2cqw; padding: 0 5cqw; }
.loot1 { aspect-ratio: 1; background: #120d2b; border: 0.6cqw solid; border-radius: 2cqw; position: relative; display: grid; place-items: center; }
.loot1 img { width: 70%; height: 70%; object-fit: contain; } .loot1 span { position: absolute; bottom: -1.6cqw; font-size: 2.4cqw; font-weight: 900; color: #120d2b; padding: 0 1cqw; border-radius: 1cqw; }
.loots:has(.loot1:only-child) { grid-template-columns: 30cqw; justify-content: center; }
/* power */
.power { text-align: center; font-weight: 900; font-size: 4.2cqw; } .power b { color: #ffd84a; font-size: 6cqw; }
.ppop { position: absolute; left: 50%; top: 40cqh; transform: translateX(-50%); font-weight: 900; font-size: 9cqw; z-index: 40; pointer-events: none; animation: ppop 1.5s ease-out forwards; text-shadow: 0 0.6cqw 0 #120d2b; }
.ppop.up { color: #5dff8a; } .ppop.down { color: #ff4d6d; }
@keyframes ppop { 0% { opacity: 0; transform: translate(-50%, 4cqh) scale(.7); } 20% { opacity: 1; transform: translate(-50%, 0) scale(1.1); } 100% { opacity: 0; transform: translate(-50%, -8cqh); } }
.tabs .tab img { width: 8cqw; height: 8cqw; }
.gslot .bpc { position: absolute; top: 0.4cqw; left: 1cqw; font-size: 2.2cqw; font-style: normal; opacity: .8; }
.ring { position: relative; width: 36cqw; height: 36cqw; margin: 0 auto; }
.ring svg { width: 100%; height: 100%; transform: rotate(-90deg); }
.ring circle { fill: none; stroke-width: 8; } .ring .bg { stroke: #120d2b; } .ring .fg { stroke: #ffd84a; stroke-dasharray: 276; stroke-dashoffset: 0; stroke-linecap: round; transition: stroke-dashoffset .1s linear; }
.ring b { position: absolute; inset: 0; display: grid; place-items: center; font-size: 14cqw; font-weight: 900; }
.rx { position: absolute; right: 2cqw; top: 2cqw; width: 8cqw; height: 8cqw; border-radius: 50%; border: 0; background: #120d2b; color: #fff; font-weight: 900; font-size: 4cqw; }
#track .sk.squad { background: #ff9f1c; }
/* starter pack */
.spk { position: absolute; left: 3cqw; top: 2cqw; display: flex; flex-direction: column; align-items: center; background: linear-gradient(#ff8ac8, #b04ae0); color: #fff; border: 0.5cqw solid #fff3; border-radius: 3cqw; padding: 1.4cqw 2cqw; font-size: 2.8cqw; font-weight: 900; line-height: 1.15; box-shadow: 0 0.8cqw 0 #120d2b; }
.spk img { width: 10cqw; animation: bob 1.8s ease-in-out infinite; }
.spk i { position: absolute; top: -1.6cqw; right: -1.6cqw; background: #ff3d5a; border-radius: 50%; width: 5cqw; height: 5cqw; font-style: normal; display: grid; place-items: center; }
.spk.ready { box-shadow: 0 0 3cqw var(--gold), 0 0.8cqw 0 #120d2b; }
.rwi.sm { width: 14cqw; height: 14cqw; } .rwi.sm b { font-size: 2.4cqw; }
.adbar { position: relative; height: 5cqw; background: rgba(10,8,30,0.7); border-radius: 3cqw; overflow: hidden; }
.adbar i { position: absolute; inset: 0 auto 0 0; background: linear-gradient(90deg, #ffd84a, #ff9a3d); }
.adbar b { position: relative; display: block; text-align: center; line-height: 5cqw; font-size: 3cqw; }
.adv { background: #000d; gap: 4cqw; }
.adbox { position: relative; width: 80cqw; height: 120cqw; background: linear-gradient(#3b2a8f, #150f3a); border-radius: 3cqw; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2cqw; }
.adbox img { width: 40cqw; } .adtag { position: absolute; left: 2cqw; top: 2cqw; background: #ffd84a; color: #120d2b; font-weight: 900; padding: 0.4cqw 1.6cqw; border-radius: 1cqw; font-size: 3cqw; }
.spwrap { justify-content: center; padding: 0; background: rgba(8,5,25,0.92); }
.sp { position: relative; width: 100%; display: flex; flex-direction: column; align-items: center; gap: 2cqw; padding: 0 3cqw; box-sizing: border-box; }
.sphead { width: 100%; display: flex; align-items: center; justify-content: space-between; }
.sptitle { font-size: 8cqw; font-weight: 900; font-style: italic; color: #ffd84a; text-shadow: 0 0.6cqw 0 #120d2b, 0 0 3cqw #b04ae0; background: linear-gradient(90deg, #6a3df0cc, transparent); padding: 0.6cqw 6cqw 0.6cqw 2cqw; clip-path: polygon(0 0, 100% 0, 92% 100%, 0 100%); }
.spx { width: 9cqw; height: 9cqw; border-radius: 2cqw; border: 0.5cqw solid #fff; background: #e0405a; color: #fff; font-size: 5cqw; font-weight: 900; box-shadow: 0 0.6cqw 0 #120d2b; }
.spsub { align-self: flex-start; margin: -1.4cqw 0 0 2cqw; font-weight: 900; font-style: italic; font-size: 3.6cqw; }
.spbadge { position: absolute; right: 3cqw; top: 20cqw; z-index: 2; background: #e0405a; color: #fff; font-weight: 900; font-size: 3cqw; line-height: 1.15; text-align: center; padding: 1.2cqw 2.4cqw; transform: rotate(-6deg); border-radius: 1.6cqw; box-shadow: 0 0.6cqw 0 #120d2b; }
.spbadge b { color: #ffd84a; font-size: 5cqw; }
.spburst { width: 100%; height: 50cqw; display: grid; place-items: center; background: radial-gradient(circle, #b04ae0aa 0, #6a3df055 35%, transparent 65%), repeating-conic-gradient(from 0deg, #ffffff10 0 8deg, transparent 8deg 22deg); }
.spburst img { max-width: 52cqw; max-height: 46cqw; object-fit: contain; filter: drop-shadow(0 1.6cqw 0 rgba(0,0,0,0.35)); animation: bob 2.4s ease-in-out infinite; }
.spslogan { background: linear-gradient(90deg, transparent, #3b2a8f 12%, #3b2a8f 88%, transparent); padding: 1.2cqw 8cqw; font-weight: 900; font-size: 3.4cqw; text-align: center; }
.spdays { display: flex; gap: 1.6cqw; width: 100%; }
.spday { position: relative; flex: 1; background: #e9ecff; border-radius: 1.6cqw; overflow: hidden; border: 0.5cqw solid #5a6be0; }
.spday .dh { background: linear-gradient(#6f82ff, #4a5ce0); color: #fff; font-weight: 900; font-size: 3.2cqw; text-align: center; padding: 0.8cqw 0; }
.spday .dc { display: flex; justify-content: center; gap: 1cqw; padding: 1.6cqw 1cqw; }
.spday.rd { border-color: #ffd84a; box-shadow: 0 0 2.4cqw #ffd84a; }
.spday.got .dc { opacity: 0.4; } .spday .ok { position: absolute; inset: 5cqw 0 0 0; display: grid; place-items: center; font-style: normal; font-size: 9cqw; font-weight: 900; color: #3fbf5a; text-shadow: 0 0.4cqw 0 #fff; }
.spc { position: relative; width: 12cqw; height: 12cqw; border-radius: 1.4cqw; background: linear-gradient(#8a7cff, #5a48d8); display: grid; place-items: center; box-shadow: inset 0 0 0 0.4cqw #ffffff55; }
.spc > img { width: 80%; height: 80%; object-fit: contain; }
.spc .bdg { position: absolute; left: -0.6cqw; top: -0.6cqw; width: 5cqw; height: 5cqw; background: #fff; border-radius: 50%; padding: 0.4cqw; box-sizing: border-box; }
.spc b { position: absolute; right: 0.6cqw; bottom: 0.2cqw; font-size: 2.6cqw; font-weight: 900; color: #fff; text-shadow: 0 0 0.6cqw #000, 0 0 0.6cqw #000; }
.spbig { min-width: 46cqw; font-size: 5cqw; padding: 2cqw 4cqw; } .spbig small { font-size: 3.4cqw; opacity: 0.85; }
.sptabs2 { display: flex; gap: 2cqw; width: 100%; }
.sptabs2 button { flex: 1; position: relative; height: 15cqw; border-radius: 2cqw; border: 0.5cqw solid #fff3; background: linear-gradient(#6f82ff, #3b2a8f); display: flex; align-items: center; justify-content: center; color: #fff; font-weight: 900; font-size: 3cqw; }
.sptabs2 button img { position: absolute; right: 1cqw; top: 50%; transform: translateY(-50%); height: 12cqw; width: 12cqw; object-fit: contain; opacity: 0.95; }
.sptabs2 button span { position: relative; z-index: 1; margin-right: 8cqw; text-shadow: 0 0 0.8cqw #000; }
.sptabs2 button.on { background: linear-gradient(#ffd84a, #ff9a3d); border-color: #fff; color: #3a2400; } .sptabs2 button.on span { text-shadow: none; }
.sp .hint { opacity: 0.6; font-size: 3cqw; }
.ebox { flex: 1; background: rgba(10,8,30,0.55); border-radius: 2cqw; padding: 3cqw 1cqw; display: flex; flex-direction: column; align-items: center; gap: 1.6cqw; } .ebox b { font-size: 6cqw; }
/* original-style popup */
.popwrap { justify-content: center; padding: 0; }
.pop { width: 90cqw; max-height: 86cqh; display: flex; flex-direction: column; background: #3a3a52; border: 0.6cqw solid #1a1830; border-radius: 2.4cqw; box-shadow: 0 1.4cqw 0 rgba(0,0,0,0.45); overflow: hidden; }
.pophead { position: relative; flex: none; background: linear-gradient(#8f7cf0, #6a55d8); padding: 2.4cqw 12cqw; text-align: center; border-bottom: 0.6cqw solid #1a1830; }
.pophead b { font-size: 5.4cqw; font-weight: 900; color: #fff; text-shadow: 0 0.5cqw 0 #1a1830; }
.popx { position: absolute; right: 2cqw; top: 50%; transform: translateY(-50%); width: 8.4cqw; height: 8.4cqw; border-radius: 1.6cqw; border: 0.5cqw solid #fff; background: #e0405a; color: #fff; font-size: 4.4cqw; font-weight: 900; line-height: 1; box-shadow: 0 0.5cqw 0 #1a1830; }
.popbody { overflow-y: auto; padding: 3cqw; display: flex; flex-direction: column; gap: 2.4cqw; text-align: center; }
.pop.left .popbody { text-align: left; }
.dmgrow { display: flex; gap: 2.4cqw; background: #26253a; border: 0.5cqw solid #15142a; border-radius: 1.4cqw; padding: 1.4cqw; text-align: left; flex: none; }
.dmgic { width: 15cqw; height: 15cqw; flex: none; background: #f6e0a8; border-radius: 1cqw; display: grid; place-items: center; }
.dmgic img { width: 80%; height: 80%; object-fit: contain; }
.dmgr { flex: 1; display: flex; flex-direction: column; gap: 0.8cqw; min-width: 0; }
.dmgt { display: flex; justify-content: space-between; font-size: 3.4cqw; }
.dmgbar { position: relative; height: 4.2cqw; background: #15142a; border-radius: 0.6cqw; overflow: hidden; }
.dmgbar i { position: absolute; inset: 0 auto 0 0; background: #ffc928; } .dmgbar span { position: absolute; right: 1.4cqw; top: 50%; transform: translateY(-50%); font-weight: 900; font-size: 3cqw; }
/* level-up cards, matched to the original capture (card h ≈ 2.4 × w; name plate over the art; dark body) */
.cards { gap: 1.8cqw; padding: 0 2.4cqw; align-items: flex-start; }
.card { max-width: 31cqw; min-height: 0; height: 74cqw; border-radius: 2cqw; background: #25252d; border: 0.7cqw solid #121218; padding: 0; overflow: visible; box-shadow: 0 1cqw 0 rgba(0,0,0,0.35); }
.card.weapon, .card.passive { border-color: #121218; }
.card .hang { position: absolute; left: 50%; top: -1.2cqw; transform: translateX(-50%); width: 40%; height: 2.2cqw; background: #121218; border-radius: 1cqw 1cqw 0 0; }
.card .art { position: relative; width: 100%; height: 31cqw; aspect-ratio: auto; border-radius: 1.4cqw 1.4cqw 0 0; overflow: hidden;
  background: radial-gradient(circle at 50% 58%, #ffe9c4 0 30%, transparent 31%), repeating-linear-gradient(60deg, rgba(255,255,255,0.18) 0 2px, transparent 2px 14px), #f6c98f; }
.card.passive .art { background: radial-gradient(circle at 50% 58%, #c9f0ff 0 30%, transparent 31%), repeating-linear-gradient(60deg, rgba(255,255,255,0.2) 0 2px, transparent 2px 14px), #7fcbec; }
.card .art img { position: absolute; left: 50%; top: 58%; transform: translate(-50%, -50%); width: 62%; height: 62%; }
.card .cname { position: absolute; left: 6%; right: 6%; top: 1.6cqw; z-index: 1; width: auto; min-height: 0; padding: 1cqw 0.8cqw; border-radius: 1cqw; background: #2b2b33; color: #fff; font-size: 3cqw; line-height: 1.1; box-shadow: 0 0.4cqw 0 rgba(0,0,0,0.4); }
.card .pipbar { width: 100%; background: #17171d; display: flex; justify-content: center; padding: 0.4cqw 0; }
.card .pipbar .pips { margin: 0; }
.card .desc { font-size: 2.9cqw; font-weight: 800; padding: 1.6cqw 2cqw; line-height: 1.4; color: #fff; }
.card .desc em { font-style: normal; color: #5dff5d; }
.card .elem { position: absolute; bottom: 2cqw; left: 50%; transform: translateX(-50%); margin: 0; background: #33333d; border: 0.4cqw solid #121218; white-space: nowrap; }
.card .ribbon { right: -1cqw; top: -3.2cqw; transform: none; background: #e8343c; border: 0.4cqw solid #fff; font-style: italic; font-size: 2.8cqw; border-radius: 0.8cqw; z-index: 2; }
.slots { gap: 2cqw; } .slotrow { background: rgba(10,10,18,0.75); border-radius: 1.2cqw; padding: 0.8cqw; gap: 0.8cqw; }
.slot { background: #3a3a44; border-radius: 0.8cqw; }
.slot.lock { background: #2a2a33; flex-direction: column; } .slot.lock b { position: static; font-size: 1.9cqw; color: #cfd2e0; text-shadow: none; line-height: 1; } .slot.lock i { font-style: normal; font-size: 2.6cqw; line-height: 1; }

/* ---- art icons (ui sheet) instead of emoji / css-drawn symbols ---- */
img.ic { width: 1.25em !important; height: 1.25em !important; object-fit: contain; vertical-align: -0.28em; margin: 0; border: 0; background: none; flex: none; }
img.ic.big { width: 7cqw !important; height: 7cqw !important; vertical-align: middle; }
.hud-btn { background: none !important; border: 0 !important; box-shadow: none !important; padding: 0; }
.hud-btn img { width: 100%; height: 100%; object-fit: contain; filter: drop-shadow(0 0.5cqw 0 rgba(0,0,0,0.35)); }
.popx, .spx, .rx { background: none !important; border: 0 !important; box-shadow: none !important; padding: 0; }
.popx img.ic, .spx img.ic, .rx img.ic { width: 100% !important; height: 100% !important; vertical-align: top; }
.chap .arrow img.ic { width: 10cqw !important; height: 10cqw !important; }
#track .sk { background: none !important; } #track .sk img.ic { width: 100% !important; height: 100% !important; vertical-align: top; }
.cur .plus { position: relative; cursor: pointer; padding-right: 2.6cqw !important; }
.cur .plus img.plusb { position: absolute; right: -1.6cqw; bottom: -1.4cqw; width: 4.4cqw !important; height: 4.4cqw !important; }
.spday .ok img.ic { width: 10cqw !important; height: 10cqw !important; }
.gslot .bpc img.ic { width: 3cqw !important; height: 3cqw !important; vertical-align: -0.6cqw; }
.slot.lock img.ic { width: 3.6cqw !important; height: 3.6cqw !important; vertical-align: top; }
.band .ic { width: 1.1em; height: 1.1em; }

/* ---- slot bar, measured on the original: number top-left on the frame edge, gray cells, gold main-gun cell ---- */
.slot { background: linear-gradient(#5b5b68, #44444f); border: 0.3cqw solid #1a1a22; border-radius: 0.9cqw; overflow: visible; }
.slotrow .slot.w:first-child { background: linear-gradient(#ffd85a, #f0a81c); }
.slot.w, .slot.p { background: linear-gradient(#5b5b68, #44444f); }
.slot b { left: -0.4cqw; right: auto; top: -1.5cqw; font-size: 2.3cqw; font-weight: 900; color: #fff; text-shadow: -0.3cqw 0 #111, 0.3cqw 0 #111, 0 -0.3cqw #111, 0 0.3cqw #111; line-height: 1; }
.slot.lock { background: linear-gradient(#4a4a55, #383842); justify-content: center; gap: 0.2cqw; }
.slot.lock b { position: static; text-shadow: none; font-size: 1.8cqw; color: #e6e6ee; }

/* ---- card name plate: fixed height, text centred both ways (measured: plate ≈ 6.4cqw tall) ---- */
.card .cname { display: flex; align-items: center; justify-content: center; height: 6.4cqw; padding: 0 0.8cqw; line-height: 1; }

/* ---- star diamonds: bigger, wider gaps, gradient fill with dark outline like the original ---- */
.card .pipbar { padding: 1.1cqw 0; }
.card .pips, .pips { gap: 2.2cqw; }
.pip { width: 2.6cqw; height: 2.6cqw; background: linear-gradient(135deg, #8a8a96, #55555f); border: 0.35cqw solid #15151b; border-radius: 0.3cqw; }
.pip.on.gold { background: linear-gradient(135deg, #fff6a0, #ffd21c 55%, #e8a400); }
.pip.on.red { background: linear-gradient(135deg, #ffb0b8, #ff4d6d 55%, #c81e3c); }
.pip.on.purple { background: linear-gradient(135deg, #e6ccff, #a46bff 55%, #6a2fd8); }
.inv > .d { grid-column: 1 / -1; }