/* ---------- Gacha v2 ---------- */
.gstatus { display: grid; grid-template-columns: repeat(5, 1fr); gap: 10px; margin-bottom: 14px; } .gst { display: flex; gap: 12px; align-items: center; padding: 12px 16px; background: #0d0907; border: 1px solid var(--line); color: var(--brass); } .gst small { display: block; font-family: var(--lab); letter-spacing: .12em; text-transform: uppercase; color: var(--mut); font-size: 11px; } .gst b { font-family: var(--mono); font-size: 18px; color: var(--brass-hi); }
.gtabs { display: flex; gap: 6px; margin-bottom: 18px; flex-wrap: wrap; border-bottom: 1px solid var(--line); } .gtab { padding: 11px 20px; background: none; border: 0; border-bottom: 3px solid transparent; font-family: var(--lab); letter-spacing: .14em; text-transform: uppercase; font-weight: 700; color: var(--mut); } .gtab.on { color: var(--brass-hi); border-bottom-color: var(--brass); background: rgba(201, 162, 74, .07); }
.pity.spark .bar i { background: linear-gradient(90deg, #ff5d73, #ffd36b, #fff); } .g-btns.small { margin-top: 6px; } .g-btns.small .btn { font-size: 12px; padding: 9px 14px; }
.ccard { transition: transform .15s ease-out; transform-style: preserve-3d; }
.ccard.holo::after { content: ''; position: absolute; inset: 0; pointer-events: none; mix-blend-mode: color-dodge; opacity: 0; transition: opacity .25s; background: radial-gradient(circle at var(--mx, 50%) var(--my, 50%), rgba(255, 255, 255, .55), transparent 38%), linear-gradient(115deg, transparent 20%, rgba(255, 60, 170, .35) 40%, rgba(60, 255, 255, .35) 60%, transparent 80%); } .ccard.holo:hover::after { opacity: .75; }
.cc-lv { position: absolute; left: 8px; top: 34px; background: #000a; color: var(--brass-hi); font-family: var(--mono); font-size: 10px; padding: 0 5px; }
.cine { position: fixed; inset: 0; width: 100%; height: 100%; }
.spot { position: fixed; inset: 0; z-index: 600; display: grid; place-items: center; background: radial-gradient(circle, color-mix(in srgb, var(--rc) 35%, #05030a), #05030a 75%); opacity: 0; transition: opacity .3s; text-align: center; cursor: pointer; } .spot.in { opacity: 1; }
.spot-in { position: relative; display: flex; flex-direction: column; align-items: center; gap: 10px; padding: 20px; animation: spotIn .8s cubic-bezier(.2, 1.4, .3, 1); } .spot-in h1 { font-size: clamp(36px, 6vw, 72px); font-style: italic; color: #fff; text-shadow: 0 0 40px var(--rc); margin: 0; } .spot-in p { color: var(--rc); font-family: var(--lab); letter-spacing: .3em; text-transform: uppercase; margin: 0; }
.spot-art { width: min(300px, 55vw); border: 3px solid var(--rc); box-shadow: 0 0 80px var(--rc), inset 0 0 40px #0008; overflow: hidden; clip-path: polygon(8% 0, 92% 0, 100% 6%, 100% 94%, 92% 100%, 8% 100%, 0 94%, 0 6%); } .spot-art svg { display: block; width: 100%; height: auto; }
.spot-badge { background: var(--rc); color: #111; font-family: var(--lab); font-weight: 800; letter-spacing: .3em; padding: 4px 22px; } .spot-stars { color: var(--rc); font-size: 26px; letter-spacing: 8px; animation: glow 1.4s infinite; } .spot-new { background: var(--ruby); color: #fff; padding: 3px 20px; font-family: var(--lab); font-weight: 800; letter-spacing: .3em; animation: zoomIn .5s .4s both; } .spot-dupe { color: var(--brass-hi); font-family: var(--mono); } .spot-feat { background: linear-gradient(90deg, #ff9d00, #ff2d55); padding: 3px 18px; font-weight: 800; letter-spacing: .2em; }
@keyframes spotIn { from { transform: scale(.3) rotate(-8deg); opacity: 0; filter: blur(12px); } }
.book-prog { display: grid; grid-template-columns: repeat(6, 1fr); gap: 8px; margin-bottom: 16px; } .bp { background: #0d0907; border: 1px solid var(--line); padding: 8px 10px; display: flex; flex-direction: column; gap: 5px; text-align: left; } .bp b { font-family: var(--lab); letter-spacing: .1em; color: var(--ec); } .bp.on { border-color: var(--ec); box-shadow: 0 0 14px color-mix(in srgb, var(--ec) 35%, transparent); } .bp small { font-family: var(--mono); }
.d-info { display: flex; flex-direction: column; gap: 12px; min-width: 280px; flex: 1; } .lore { font-style: italic; color: #d8cdb4; border-left: 3px solid var(--brass); padding-left: 12px; } .cons { display: flex; align-items: center; gap: 4px; font-size: 20px; color: #2a2218; } .cons i { font-style: normal; } .cons i.on { color: var(--brass-hi); text-shadow: 0 0 10px var(--brass); } .cons small { font-size: 12px; color: var(--mut); margin-left: 8px; } .stats-grid.sm { grid-template-columns: repeat(3, 1fr); } .stats-grid.sm .stat b { font-size: 14px; }
.team-grid { display: grid; grid-template-columns: 1fr 1.15fr; gap: 20px; } .slots { display: grid; grid-template-columns: repeat(5, 1fr); gap: 10px; margin: 14px 0; } .slot { display: flex; flex-direction: column; gap: 6px; align-items: center; min-height: 190px; border: 1px dashed var(--line); padding: 6px; } .slot.has { border-style: solid; border-color: var(--brass-lo); } .slot .ccard { width: 100%; } .slot b { font-family: var(--mono); font-size: 12px; color: var(--brass-hi); } .slot-add { width: 100%; height: 100%; min-height: 170px; background: none; border: 0; font-size: 40px; color: var(--brass); display: flex; flex-direction: column; align-items: center; justify-content: center; } .slot-add small { font-size: 11px; letter-spacing: .12em; text-transform: uppercase; }
.power-row { display: flex; justify-content: space-between; align-items: center; margin: 10px 0; } .syn { color: #9fe0ef; line-height: 1.7; } .wheel-el { margin-top: 12px; }
.tower-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 14px; } .tower-head h2 { margin: 0; font-style: italic; } .tower-head b { font-family: var(--mono); font-size: 22px; color: var(--brass-hi); } .energy { display: flex; align-items: center; gap: 5px; } .energy i { width: 16px; height: 24px; background: #231b13; clip-path: polygon(50% 0, 100% 40%, 60% 40%, 100% 100%, 0 55%, 45% 55%); } .energy i.on { background: #ffd36b; filter: drop-shadow(0 0 6px #ffd36b); }
.foes { display: flex; gap: 14px; justify-content: center; margin: 16px 0; flex-wrap: wrap; } .foe { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 12px; background: #0d0907; border: 1px solid var(--line); min-width: 130px; } .foe b { font-family: var(--lab); letter-spacing: .06em; text-align: center; } .foe em { font-style: normal; font-size: 12px; }
.battle-ov { background: radial-gradient(circle at 50% 30%, #2a0b12, #05030a 75%); display: flex; flex-direction: column; justify-content: center; align-items: center; } .battle { width: min(1000px, 96vw); display: flex; flex-direction: column; gap: 18px; padding: 20px; } .battle .side { display: flex; justify-content: center; gap: 14px; flex-wrap: wrap; } .vs { text-align: center; font-family: var(--disp); font-style: italic; font-size: 30px; color: var(--brass-hi); letter-spacing: .1em; }
.bu { position: relative; width: 120px; display: flex; flex-direction: column; align-items: center; gap: 4px; transition: transform .15s; } .bu span { display: block; width: 100%; } .bu.ally span { border: 2px solid var(--brass-lo); overflow: hidden; clip-path: polygon(10% 0, 90% 0, 100% 10%, 100% 90%, 90% 100%, 10% 100%, 0 90%, 0 10%); } .bu.ally span svg { display: block; width: 100%; height: auto; } .bu.foe.boss { width: 170px; } .bu small { font-family: var(--lab); letter-spacing: .08em; font-size: 12px; text-align: center; }
.bu .hp { width: 100%; height: 8px; background: #231b13; } .bu .hp i { display: block; height: 100%; width: 100%; background: linear-gradient(90deg, #58d68d, #f0d58a); transition: width .25s; } .bu.foe .hp i { background: linear-gradient(90deg, #ff5d73, #ff9d00); }
.bu.atk-h { transform: translateY(-40px) scale(1.12); z-index: 3; } .bu.atk-e { transform: translateY(40px) scale(1.12); z-index: 3; } .bu.hit { animation: shake .3s; filter: brightness(1.8) saturate(1.4); } .bu.dead { opacity: .25; filter: grayscale(1); }
.dmg { position: absolute; top: 20px; left: 50%; transform: translateX(-50%); font-style: normal; font-family: var(--mono); font-weight: 800; font-size: 22px; color: #fff; text-shadow: 0 2px 8px #000; animation: floatUp 0.9s forwards; pointer-events: none; z-index: 5; } .dmg.crit { color: #ffd36b; font-size: 30px; }
.battle-res { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; background: rgba(5, 3, 10, .78); animation: fadeIn .4s; } .battle-res h1 { font-size: clamp(50px, 9vw, 120px); font-style: italic; margin: 0; } .battle-res.win h1 { background: linear-gradient(180deg, #fff1bd, #c9a24a); -webkit-background-clip: text; background-clip: text; color: transparent; } .battle-res.lose h1 { color: #ff5d73; } .rw-line { display: flex; gap: 24px; font-size: 24px; flex-wrap: wrap; justify-content: center; } .rw-line b { font-family: var(--mono); color: var(--brass-hi); }
.shop-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 14px; } .shop-item { display: flex; flex-direction: column; gap: 10px; align-items: center; padding: 22px 14px; background: linear-gradient(180deg, #17120d, #0d0907); border: 1px solid var(--line); text-align: center; } .shop-item b { font-family: var(--lab); letter-spacing: .08em; font-size: 17px; } .cost { display: flex; gap: 6px; align-items: center; font-family: var(--mono); color: var(--brass-hi); font-size: 20px; }
.hist { display: grid; grid-template-columns: repeat(auto-fill, minmax(70px, 1fr)); gap: 8px; } .hi { position: relative; border: 2px solid var(--rc); overflow: hidden; } .hi span svg { display: block; width: 100%; height: auto; } .hi small { position: absolute; left: 0; bottom: 0; background: var(--rc); color: #111; font-weight: 800; padding: 0 5px; font-size: 10px; } .hi.r-UR { box-shadow: 0 0 14px var(--rc); }
@media (max-width: 980px) { .team-grid { grid-template-columns: 1fr; } .gstatus { grid-template-columns: repeat(2, 1fr); } .book-prog { grid-template-columns: repeat(3, 1fr); } .slots { grid-template-columns: repeat(3, 1fr); } }
.ticket .af, .ticket .durrow .af { background: none; }