/* ============================================================
   KÍVÁNSÁG (GACHA) — a Forthura wish.css portolása BOMW tokenekre.
   Vizuál/animáció-logika megtartva, csak a paletta/font/asset-
   hivatkozások lettek adaptálva (ld. WISH_SYSTEM_HANDOFF.md).
   Dead CSS (wish-left oldalpanel, felhő-fázis, banner karakter-
   címkék) nincs átportolva — nincs élő DOM, ami használná.
   ============================================================ */

#page-wish {
    position: fixed;
    /* --topbar-h: a topbar valós, futásidőben mért magassága (js/ui/
       kivansagZoom.js) — nem hardcode-olt érték, így pontosan a topbar
       alá illeszkedik, nincs rés és nincs átfedés sem.
       A topbar szándékosan zoomolatlan (landing.css), de #page-wish maga
       zoomolt (.auto-zoom-target) — a "zoom" CSS tulajdonság a saját
       top/left/right/bottom offsetjeit is felskálázza, ezért a mért
       magasságot vissza kell osztani a zoom-faktorral, különben a topbar
       alatt egyre nagyobb rés nyílik minél nagyobb a --auto-zoom. */
    top: calc(var(--topbar-h, 96px) / var(--auto-zoom, 1));
    left: 0;
    right: 0;
    bottom: 0;
    overflow: hidden;
}

/* ── Atmoszférikus háttér ─────────────────────────────────── */
.wish-bg {
    position: absolute;
    inset: 0;
    background:
        radial-gradient(ellipse 90% 55% at 50% 15%, rgba(76, 212, 255, 0.20) 0%, transparent 65%),
        radial-gradient(ellipse 60% 40% at 80% 80%, rgba(76, 212, 255, 0.10) 0%, transparent 60%),
        linear-gradient(180deg, var(--c-void) 0%, var(--c-panel) 100%);
    z-index: 0;
    pointer-events: none;
}
.wish-bg-stars { position: absolute; inset: 0; }
.wish-bg-star {
    position: absolute;
    background: var(--c-cyan);
    border-radius: 50%;
    animation: wish-twinkle 4s ease-in-out infinite;
}
@keyframes wish-twinkle {
    0%, 100% { transform: scale(1); }
    50%       { transform: scale(1.6); opacity: 1 !important; }
}

/* ── Fő layout ────────────────────────────────────────────── */
.wish-layout {
    position: relative;
    z-index: 1;
    height: 100%;
    display: flex;
    flex-direction: column;
}

/* ── Banner tabok ─────────────────────────────────────────── */
.wish-banner-tabs {
    display: flex;
    align-items: center;
    gap: 0;
    padding: 0 10px 0 16px;
    background: rgba(4, 2, 12, 0.72);
    border-bottom: 1px solid rgba(76, 212, 255, 0.25);
    flex-shrink: 0;
    backdrop-filter: blur(10px);
}

.wish-tabs-right {
    margin-left: auto;
    display: flex;
    align-items: center;
    gap: 6px;
    padding-left: 12px;
}
.wish-tabs-right .wish-curr-strip { display: flex; align-items: center; gap: 5px; }
.wish-tabs-right .wish-curr-item { padding: 4px 9px; font-size: 12px; }
.wish-tabs-right .wish-util-btn { width: 36px; height: 36px; }
.wish-tabs-right .wish-util-btn img { width: 20px; height: 20px; }

.wish-tab {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 20px 12px;
    background: none;
    border: none;
    border-bottom: 2px solid transparent;
    color: rgba(150, 195, 220, 0.45);
    cursor: pointer;
    transition: all var(--t-mid) var(--ease-premium);
    margin-bottom: -1px;
}
.wish-tab img { width: 28px; height: 28px; object-fit: contain; }
.wt-text { display: flex; flex-direction: column; gap: 1px; text-align: left; }
.wt-name { font-family: 'AOW', serif; font-size: 12.5px; font-weight: 700; }
.wt-sub  { font-size: 9.5px; opacity: 0.6; }
.wish-tab:hover { color: rgba(150, 220, 255, 0.8); }
.wish-tab.active {
    color: var(--c-cyan);
    border-bottom-color: var(--c-cyan);
    background: rgba(76, 212, 255, 0.1);
}

/* ── Tartalom terület ─────────────────────────────────────── */
.wish-content { flex: 1; display: flex; overflow: hidden; }
.wish-visual-area { flex: 1; position: relative; overflow: hidden; }

.wish-banner-canvas {
    inset: 0;
    overflow: hidden;
    background: linear-gradient(180deg, #06031a 0%, #0a0620 100%);
}
.wish-banner-canvas.hidden { display: none !important; }
.hidden { display: none !important; }

.wish-banner-canvas--rainbow {
    background: linear-gradient(180deg, #06031a 0%, #0a0620 100%);
}

/* Háttérkép — a wish-banner-shade rétegzi rá a sötétítést/olvashatóságot */
.wish-banner-bg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center top;
}

.wish-banner-shade {
    position: absolute;
    inset: 0;
    background:
        linear-gradient(to right, rgba(3, 1, 10, 0.82) 0%, rgba(3, 1, 10, 0.50) 20%, rgba(3, 1, 10, 0.12) 38%, transparent 55%),
        linear-gradient(to top,   rgba(3, 1, 10, 0.88) 0%, rgba(3, 1, 10, 0.30) 16%, transparent 28%);
    pointer-events: none;
}
.wish-banner-shade--rainbow {
    background:
        linear-gradient(to right, rgba(2, 0, 12, 0.80) 0%, rgba(2, 0, 12, 0.45) 18%, rgba(2, 0, 12, 0.10) 36%, transparent 52%),
        linear-gradient(to top,   rgba(2, 0, 12, 0.90) 0%, rgba(2, 0, 12, 0.55) 20%, rgba(2, 0, 12, 0.15) 35%, transparent 50%),
        linear-gradient(to bottom, rgba(2, 0, 12, 0.55) 0%, transparent 15%);
}

.wish-banner-canvas--skin {
    background: linear-gradient(180deg, #1a0630 0%, #0c0420 100%);
}

.wish-banner-shade--skin {
    background:
        linear-gradient(to right, rgba(20, 2, 40, 0.82) 0%, rgba(20, 2, 40, 0.48) 20%, rgba(20, 2, 40, 0.12) 38%, transparent 55%),
        linear-gradient(to top,   rgba(20, 2, 40, 0.88) 0%, rgba(20, 2, 40, 0.30) 16%, transparent 28%);
    pointer-events: none;
}

.wish-banner-essence-balance {
    position: absolute;
    bottom: 18px;
    left: 18px;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 14px 22px;
    border-radius: 24px;
    background: rgba(2, 1, 14, 0.82);
    backdrop-filter: blur(18px);
    box-shadow: 0 0 0 1px rgba(217, 179, 255, 0.28), 0 0 30px rgba(150, 80, 255, 0.18);
}
.wish-banner-essence-balance img { width: 28px; height: 28px; object-fit: contain; }
.wish-banner-essence-balance span { font-family: 'AOW', serif; font-size: 22px; color: var(--c-text); }
.wveb-label { font-size: 12px !important; font-family: 'Montserrat', sans-serif !important; color: rgba(217, 179, 255, 0.8) !important; letter-spacing: 0.05em; text-transform: uppercase; }

/* ═══════════════ SZIVÁRVÁNY BANNER — kiemelt hős-slotok ═══════ */
.wish-rainbow-featured {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    display: flex;
    gap: 28px;
    align-items: flex-end;
    z-index: 3;
}
.wish-crystal-slot {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 9px;
    animation: wcsFloat 3.8s ease-in-out calc(var(--i) * 0.45s) infinite;
}
@keyframes wcsFloat {
    0%, 100% { transform: translateY(0px); }
    50%       { transform: translateY(-10px); }
}
.wcs-wrap {
    position: relative;
    width: 240px;
    height: 254px;
    flex-shrink: 0;
    filter: drop-shadow(0 0 14px rgba(160, 215, 255, 0.50)) drop-shadow(0 0 28px rgba(120, 170, 255, 0.25));
    animation: wcsCrystalGlow 2.8s ease-in-out calc(var(--i) * 0.45s) infinite;
}
@keyframes wcsCrystalGlow {
    0%, 100% { filter: drop-shadow(0 0 14px rgba(160, 215, 255, 0.50)) drop-shadow(0 0 28px rgba(120, 170, 255, 0.25)); }
    50%       { filter: drop-shadow(0 0 26px rgba(200, 240, 255, 0.90)) drop-shadow(0 0 52px rgba(160, 210, 255, 0.55)); }
}
.wcs-avatar {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center 12%;
    -webkit-mask-image: url('../image/wish/wish_currency_img/Item_Rainbowdrop_Crystal.webp');
    mask-image: url('../image/wish/wish_currency_img/Item_Rainbowdrop_Crystal.webp');
    -webkit-mask-size: contain;
    mask-size: contain;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-position: center;
    mask-position: center;
    filter: brightness(1.10) saturate(1.25);
    z-index: 1;
}
.wcs-crystal {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: contain;
    z-index: 2;
    opacity: 0.68;
    pointer-events: none;
}
.wcs-name {
    font-family: 'AOW', serif;
    font-size: 13px;
    color: rgba(215, 238, 255, 0.92);
    letter-spacing: 0.1em;
    text-transform: uppercase;
    text-shadow: 0 0 14px rgba(160, 220, 255, 0.85), 0 1px 4px rgba(0, 0, 0, 0.95);
    white-space: nowrap;
}

/* Banner cím */
.wish-banner-title-area { position: absolute; top: 20px; left: 22px; }
.wish-banner-main-title { font-weight: 400; line-height: 1.05; margin-bottom: 6px; }
.wbt-pre {
    display: block;
    font-family: 'AOW', serif;
    font-size: 40px;
    color: rgba(200, 235, 255, 0.78);
    letter-spacing: 0.1em;
    text-shadow: 0 1px 6px rgba(0, 0, 0, 0.9);
    text-transform: uppercase;
}
.wbt-main {
    display: block;
    font-family: 'AOW', serif;
    font-size: 88px;
    color: var(--c-text);
    text-shadow:
        0 0 35px rgba(76, 212, 255, 0.55),
        0 0 70px rgba(76, 212, 255, 0.25),
        0 2px 12px rgba(0, 0, 0, 0.95);
    letter-spacing: 0.02em;
}
.wish-banner-subtitle {
    font-size: 20px;
    color: rgba(180, 215, 255, 0.55);
    letter-spacing: 0.06em;
    text-shadow: 0 1px 4px rgba(0, 0, 0, 0.8);
}

.wish-banner-rateup { position: absolute; bottom: 220px; left: 28px; max-width: 230px; }
.wish-rateup-badge {
    display: inline-flex;
    align-items: center;
    margin-bottom: 7px;
    font-family: 'AOW', serif;
    font-size: 16px;
    font-weight: 700;
    color: var(--c-gold);
    letter-spacing: 0.08em;
    text-shadow: 0 0 14px rgba(255, 210, 76, 0.55), 0 1px 4px rgba(0, 0, 0, 0.9);
}
.wish-rateup-badge::before {
    content: '●';
    font-size: 9px;
    color: var(--c-cyan);
    margin-right: 8px;
    text-shadow: 0 0 8px rgba(76, 212, 255, 0.7);
}
.wish-rateup-desc {
    font-size: 10.5px;
    color: rgba(150, 220, 255, 0.55);
    line-height: 1.5;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.8);
}

/* ═══════════════ WISH POINT KÖR ═══════════════════════════════ */
.wish-banner-points {
    position: absolute;
    bottom: 18px;
    left: 18px;
    display: flex;
    align-items: center;
    gap: 18px;
    background: rgba(2, 1, 14, 0.82);
    backdrop-filter: blur(18px);
    border-radius: 24px;
    padding: 14px 24px 14px 14px;
    box-shadow: 0 0 0 1px rgba(160, 210, 255, 0.22), 0 0 30px rgba(80, 130, 255, 0.18);
}
.wish-points-badge { position: relative; width: 108px; height: 108px; flex-shrink: 0; border-radius: 50%; }
.wish-points-badge::before {
    content: '';
    position: absolute; inset: -3px; border-radius: 50%;
    background: conic-gradient(from 0deg,
        rgba(200, 235, 255, 0.90), rgba(170, 200, 255, 0.55), rgba(180, 230, 255, 0.70),
        rgba(255, 210, 245, 0.65), rgba(190, 230, 255, 0.85), rgba(160, 210, 245, 0.60),
        rgba(230, 245, 255, 0.95), rgba(200, 235, 255, 0.90));
    animation: wptRingSpin 7s linear infinite;
    z-index: 0;
}
.wish-points-badge::after {
    content: '';
    position: absolute; inset: 3px; border-radius: 50%;
    background: radial-gradient(circle at 40% 35%, #0e0828 0%, #060320 55%, #030118 100%);
    z-index: 1;
    box-shadow: inset 0 0 20px rgba(60, 90, 200, 0.30);
}
@keyframes wptRingSpin { to { transform: rotate(360deg); } }

.wpt-fill-wrap { position: absolute; inset: 4px; border-radius: 50%; overflow: hidden; z-index: 2; }
.wpt-fill-liquid {
    position: absolute; bottom: 0; left: -8%;
    width: 116%; height: 0%;
    background: linear-gradient(180deg, rgba(195, 225, 255, 0.88) 0%, rgba(140, 185, 255, 0.80) 25%, rgba(90, 130, 235, 0.88) 55%, rgba(55, 80, 205, 0.95) 100%);
    transition: height 0.75s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.wpt-fill-liquid::before {
    content: ''; position: absolute; top: -9px; left: -15%;
    width: 130%; height: 18px;
    background: rgba(210, 235, 255, 0.55); border-radius: 50%;
    animation: wptWaveCrest 3s ease-in-out infinite;
}
@keyframes wptWaveCrest { 0%, 100% { transform: translateX(0) scaleY(1); } 50% { transform: translateX(8%) scaleY(1.5); } }
.wpt-fill-liquid::after {
    content: ''; position: absolute; inset: 0;
    background: linear-gradient(120deg, transparent 0%, rgba(255,255,255,0.22) 45%, rgba(200,230,255,0.35) 50%, transparent 55%);
    background-size: 200% 100%;
    animation: wptFillPearl 2.5s ease-in-out infinite;
}
@keyframes wptFillPearl { 0% { background-position: 140% 0; } 100% { background-position: -40% 0; } }

.wpt-spark-layer { position: absolute; inset: 4px; border-radius: 50%; overflow: hidden; z-index: 3; pointer-events: none; }
.wpt-spark {
    position: absolute; bottom: 5%; left: var(--x);
    width: var(--sz, 2px); height: var(--sz, 2px);
    border-radius: 50%;
    background: rgba(230, 245, 255, 0.95);
    box-shadow: 0 0 5px rgba(180, 220, 255, 0.9), 0 0 10px rgba(150, 200, 255, 0.5);
    animation: wptSparkRise var(--dur, 3s) ease-in var(--del, 0s) infinite;
}
@keyframes wptSparkRise {
    0%   { transform: translateY(0) scale(0.4); opacity: 0; }
    8%   { opacity: 1; transform: translateY(-8%) scale(1); }
    60%  { opacity: 0.75; }
    90%  { opacity: 0.2; }
    100% { transform: translateY(-90%) scale(0.3); opacity: 0; }
}
.wpt-spark:nth-child(odd)::after {
    content: '✦'; position: absolute; top: -6px; left: -5px;
    font-size: 10px; color: rgba(220, 240, 255, 0.7); line-height: 1;
    animation: wptDiamondTwinkle var(--dur, 3s) ease-in var(--del, 0s) infinite;
}
@keyframes wptDiamondTwinkle {
    0%, 100% { transform: scale(0) rotate(0deg); opacity: 0; }
    30%      { transform: scale(1) rotate(45deg); opacity: 0.8; }
    60%      { transform: scale(0.5) rotate(90deg); opacity: 0.4; }
}

.wpt-content { position: absolute; inset: 0; z-index: 4; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; }
.wpt-icon {
    width: 24px; height: 24px; object-fit: contain;
    filter: drop-shadow(0 0 8px rgba(180, 225, 255, 0.95)) drop-shadow(0 0 16px rgba(120, 180, 255, 0.60)) brightness(1.35);
    animation: wptIconFloat 3.2s ease-in-out infinite;
}
@keyframes wptIconFloat { 0%, 100% { transform: translateY(0) rotate(-6deg); } 50% { transform: translateY(-4px) rotate(6deg); } }
.wpt-label {
    font-family: 'AOW', serif;
    font-size: 6.5px; color: rgba(210, 235, 255, 0.68);
    letter-spacing: 0.08em; text-transform: uppercase; line-height: 1;
    text-shadow: 0 0 10px rgba(140, 200, 255, 0.6);
}
.wpt-val {
    font-family: 'AOW', serif;
    font-size: 28px; color: var(--c-text); line-height: 1;
    text-shadow: 0 0 14px rgba(180, 225, 255, 0.95), 0 0 30px rgba(120, 180, 255, 0.55);
}

.wish-points-info { display: flex; flex-direction: column; gap: 7px; min-width: 200px; }
.wish-points-desc { font-size: 10px; color: rgba(200, 228, 255, 0.58); line-height: 1.55; }
.wish-points-track {
    height: 10px; background: rgba(80, 120, 220, 0.10); border-radius: 5px; overflow: hidden;
    border: 1px solid rgba(150, 200, 255, 0.16); position: relative;
    box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.40);
}
.wish-points-track::after {
    content: ''; position: absolute; inset: 0;
    background: linear-gradient(90deg, transparent 0%, rgba(255,255,255,0.13) 50%, transparent 100%);
    background-size: 200% 100%;
    animation: wptTrackSweep 2.8s ease-in-out infinite;
}
@keyframes wptTrackSweep { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } }
.wish-points-fill {
    height: 100%; width: 0%; border-radius: 4px;
    background: linear-gradient(90deg, #5060b8 0%, #7090d8 18%, #a8c8f8 38%, #eaf6ff 52%, #c0dcf8 66%, #88aee8 82%, #6070c8 100%);
    background-size: 200% 100%;
    transition: width 0.65s cubic-bezier(0.34, 1.56, 0.64, 1);
    animation: wptBarPearl 3.5s ease-in-out infinite;
    box-shadow: 0 0 10px rgba(160, 210, 255, 0.55);
}
@keyframes wptBarPearl { 0% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } 100% { background-position: 0% 50%; } }
.wish-points-sub { font-size: 9.5px; color: rgba(180, 215, 255, 0.48); letter-spacing: 0.04em; }

/* ═══════════════ SZIVÁRVÁNY BANNER — SS/SSS pity gyűjtő ═══════ */
.wish-rainbow-pity {
    position: absolute;
    bottom: 18px;
    left: 18px;
    z-index: 4;
    display: flex;
    align-items: center;
    gap: 16px;
    background: rgba(2, 1, 14, 0.82);
    backdrop-filter: blur(18px);
    border-radius: 24px;
    padding: 12px 22px 12px 12px;
    box-shadow: 0 0 0 1px rgba(255, 210, 76, 0.25), 0 0 30px rgba(255, 180, 60, 0.16);
}
.wrp-badge {
    position: relative;
    width: 52px; height: 52px; flex-shrink: 0;
    border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    background: radial-gradient(circle at 50% 40%, rgba(255, 226, 150, 0.22), rgba(255, 180, 60, 0.06) 70%);
    box-shadow: 0 0 0 1px rgba(255, 210, 76, 0.45), 0 0 18px rgba(255, 190, 80, 0.35);
}
.wrp-icon { width: 26px; height: 26px; object-fit: contain; filter: drop-shadow(0 0 6px rgba(255, 210, 76, 0.6)); }
.wrp-count {
    position: absolute; bottom: -4px; right: -4px;
    min-width: 18px; height: 18px; padding: 0 4px;
    border-radius: 9px;
    background: linear-gradient(180deg, #ffe38a, #ffb84c);
    color: #2a1400;
    font-family: 'AOW', serif;
    font-size: 11px; font-weight: 700;
    display: flex; align-items: center; justify-content: center;
    box-shadow: 0 0 0 2px rgba(2, 1, 14, 0.9);
}
.wrp-info { display: flex; flex-direction: column; gap: 6px; min-width: 190px; }
.wrp-label {
    font-family: 'AOW', serif;
    font-size: 10.5px; font-weight: 700;
    color: var(--c-gold);
    letter-spacing: 0.08em;
    text-shadow: 0 0 10px rgba(255, 210, 76, 0.5);
}
.wrp-track {
    height: 8px; border-radius: 4px; overflow: hidden;
    background: rgba(255, 180, 60, 0.10);
    border: 1px solid rgba(255, 210, 76, 0.20);
    box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.40);
}
.wrp-fill {
    height: 100%; width: 0%; border-radius: 3px;
    background: linear-gradient(90deg, #b8681c 0%, #ffb84c 45%, #ffe38a 75%, #fff3c4 100%);
    transition: width 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
    box-shadow: 0 0 10px rgba(255, 190, 80, 0.55);
}
.wrp-fill.wrp-fill--ready {
    animation: wrpPulse 1.1s ease-in-out infinite;
}
@keyframes wrpPulse { 0%, 100% { filter: brightness(1); } 50% { filter: brightness(1.5); } }
.wrp-sub { font-size: 9.5px; color: rgba(255, 225, 180, 0.55); letter-spacing: 0.03em; }

/* ── Kívánság gombok ──────────────────────────────────────── */
.wish-banner-btns { position: absolute; bottom: 22px; right: 22px; display: flex; gap: 14px; z-index: 5; }
.wish-banner-btn {
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px;
    padding: 30px 60px 36px;
    border: none;
    cursor: pointer;
    transition: transform var(--t-fast), filter var(--t-fast);
    min-width: 280px;
    background-image: url('../image/wish/wish_button_1.png');
    background-size: 100% 100%;
    background-repeat: no-repeat;
    background-color: transparent;
}
.wish-banner-btn:hover:not(:disabled) {
    transform: translateY(-4px);
    filter: brightness(1.16);
}
.wish-banner-btn:active:not(:disabled) { transform: translateY(-1px) scale(0.97); filter: brightness(0.92); }
.wish-banner-btn:disabled { opacity: 0.35; cursor: default; transform: none; filter: none; }
.wish-banner-btn--10x {
    background-image: url('../image/wish/wish_button_2.png');
    background-size: 100% 100%;
    background-repeat: no-repeat;
    background-color: transparent;
}
.wbb-title {
    font-family: 'AOW', serif;
    font-size: 17px; color: #fff; letter-spacing: 0.08em;
    text-shadow: 0 1px 6px rgba(0, 0, 0, 0.8);
    text-transform: uppercase;
}
.wbb-cost { display: flex; align-items: center; gap: 8px; font-family: 'AOW', serif; font-size: 21px; color: #fff; text-shadow: 0 1px 6px rgba(0, 0, 0, 0.8); }
.wbb-cost img { width: 28px; height: 28px; object-fit: contain; filter: drop-shadow(0 0 5px rgba(255, 220, 100, 0.7)); }

/* ── Segédgombok + currency csík ──────────────────────────── */
.wish-util-btn {
    width: 44px; height: 44px;
    display: flex; align-items: center; justify-content: center;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(76, 212, 255, 0.25);
    border-radius: var(--radius-s);
    cursor: pointer;
    transition: all var(--t-mid);
}
.wish-util-btn img { width: 24px; height: 24px; object-fit: contain; }
.wish-util-btn:hover { background: rgba(76, 212, 255, 0.18); border-color: rgba(76, 212, 255, 0.5); }

.wish-curr-strip { display: flex; align-items: center; gap: 8px; }
.wish-curr-item {
    display: flex; align-items: center; gap: 6px;
    background: rgba(255, 255, 255, 0.035);
    border: 1px solid rgba(76, 212, 255, 0.2);
    border-radius: 18px;
    padding: 5px 12px;
    font-size: 13px;
    color: var(--c-cyan);
    font-weight: 600;
}
.wish-curr-item img { width: 20px; height: 20px; object-fit: contain; }

/* ── Oldalpanelek ──────────────────────────────────────────── */
.wish-panel-backdrop {
    display: none;
    position: fixed;
    inset: calc(var(--topbar-h, 96px) / var(--auto-zoom, 1)) 0 0 0;
    background: rgba(0, 0, 0, 0.4);
    z-index: var(--z-overlay);
}
.wish-panel-backdrop.open { display: block; }

.wish-side-panel {
    position: fixed;
    top: calc(var(--topbar-h, 96px) / var(--auto-zoom, 1));
    bottom: 0;
    width: 300px;
    background: rgba(8, 4, 20, 0.97);
    display: flex;
    flex-direction: column;
    z-index: 951;
    transition: transform var(--t-slow) var(--ease-premium);
    backdrop-filter: blur(14px);
    overflow: hidden;
}
.wish-side-panel--left { left: 0; border-right: 1px solid rgba(76, 212, 255, 0.22); transform: translateX(-100%); border-radius: 0 var(--radius-m) var(--radius-m) 0; }
.wish-side-panel--right { right: 0; border-left: 1px solid rgba(76, 212, 255, 0.22); transform: translateX(100%); border-radius: var(--radius-m) 0 0 var(--radius-m); }
.wish-side-panel.open { transform: translateX(0); }

.wish-side-head {
    display: flex; align-items: center; gap: 10px;
    padding: 13px 15px;
    background: rgba(76, 212, 255, 0.1);
    border-bottom: 1px solid rgba(76, 212, 255, 0.2);
    flex-shrink: 0;
}
.wish-side-head > img { width: 20px; height: 20px; object-fit: contain; }
.wish-side-head > span { flex: 1; font-family: 'AOW', serif; font-size: 12px; color: var(--c-cyan); letter-spacing: 0.03em; }
.wish-side-close {
    background: transparent; border: none;
    color: rgba(150, 195, 220, 0.5);
    font-size: 15px; cursor: pointer;
    padding: 2px 6px; border-radius: 4px;
    transition: color var(--t-fast);
}
.wish-side-close:hover { color: rgba(180, 230, 255, 0.9); }
.wish-side-body { overflow-y: auto; flex: 1; padding: 14px; }

.wish-rate-section-title {
    font-family: 'AOW', serif;
    font-size: 10px; letter-spacing: 0.05em;
    color: rgba(150, 220, 255, 0.55);
    text-transform: uppercase;
    margin-bottom: 8px;
}
.wish-rate-table { border: 1px solid rgba(76, 212, 255, 0.15); border-radius: var(--radius-s); overflow: hidden; margin-bottom: 10px; }
.wish-rate-head {
    background: rgba(76, 212, 255, 0.14);
    padding: 6px 12px;
    font-size: 9px; letter-spacing: 0.05em;
    color: rgba(150, 220, 255, 0.55);
    text-transform: uppercase;
}
.wish-rate-row {
    display: flex; justify-content: space-between; align-items: center;
    padding: 4px 12px;
    border-top: 1px solid rgba(76, 212, 255, 0.08);
    font-size: 11px;
    color: rgba(150, 195, 220, 0.8);
}
.wr-label { padding: 2px 7px; border-radius: 4px; font-size: 10.5px; font-weight: 600; }
.wr-feat-note { font-size: 9px; opacity: 0.7; font-style: normal; }

.wish-pieces-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; }
.wpi-row {
    display: flex; justify-content: space-between; align-items: center;
    font-size: 10.5px; color: rgba(150, 195, 220, 0.7);
    background: rgba(255, 255, 255, 0.02);
    border-radius: 5px; padding: 4px 8px;
}

/* ── Shop panel ────────────────────────────────────────────── */
.wish-shop-balance {
    display: flex; align-items: center; gap: 8px;
    background: rgba(255, 210, 76, 0.06);
    border: 1px solid rgba(255, 210, 76, 0.2);
    border-radius: 9px;
    padding: 10px 14px;
    margin-bottom: 14px;
    font-family: 'AOW', serif;
    font-size: 14px;
    color: var(--c-gold);
}
.wish-shop-balance > img { width: 22px; height: 22px; object-fit: contain; }
.wish-shop-balance-label { font-size: 10.5px; color: rgba(255, 210, 76, 0.55); font-weight: 400; margin-left: 2px; }

.wish-shop-section {
    background: rgba(255, 255, 255, 0.025);
    border: 1px solid rgba(76, 212, 255, 0.18);
    border-radius: var(--radius-m);
    padding: 13px;
    margin-bottom: 11px;
}
.wish-shop-section-head { display: flex; align-items: center; gap: 7px; font-family: 'AOW', serif; font-size: 10.5px; color: var(--c-cyan); margin-bottom: 9px; }
.wish-shop-section-head > img { width: 18px; height: 18px; object-fit: contain; }

.wish-shop-have { display: flex; align-items: center; gap: 5px; font-size: 10.5px; color: rgba(150, 195, 220, 0.5); margin-bottom: 10px; }
.wish-shop-have > img { width: 15px; height: 15px; object-fit: contain; }
.wish-shop-have strong { color: rgba(150, 220, 255, 0.85); }

.wish-shop-buys { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.wish-shop-buy-btn {
    display: flex; flex-direction: column; align-items: center; gap: 6px;
    padding: 10px 8px;
    background: rgba(76, 212, 255, 0.1);
    border: 1px solid rgba(76, 212, 255, 0.3);
    border-radius: 9px;
    cursor: pointer;
    transition: all var(--t-mid);
}
.wish-shop-buy-btn:hover:not(:disabled) { background: rgba(76, 212, 255, 0.22); border-color: rgba(150, 220, 255, 0.5); transform: translateY(-1px); }
.wish-shop-buy-btn:disabled { opacity: 0.3; cursor: default; }
.wsb-item { display: flex; align-items: center; gap: 5px; }
.wsb-item > img { width: 24px; height: 24px; object-fit: contain; }
.wsb-qty { font-family: 'AOW', serif; font-size: 13px; color: var(--c-cyan); }
.wsb-cost { display: flex; align-items: center; gap: 4px; font-size: 11px; color: var(--c-gold); }
.wsb-cost > img { width: 13px; height: 13px; object-fit: contain; }

.wish-shop-exchange-preview {
    display: flex; align-items: center; justify-content: center; gap: 10px;
    background: rgba(255, 255, 255, 0.022);
    border-radius: 8px; padding: 10px; margin-bottom: 8px;
}
.wsep-item { display: flex; flex-direction: column; align-items: center; gap: 4px; font-size: 10.5px; color: rgba(150, 195, 220, 0.65); }
.wsep-item > img { width: 28px; height: 28px; object-fit: contain; }
.wsep-arrow { font-size: 18px; color: rgba(76, 212, 255, 0.55); }
.wish-shop-exch-info { text-align: center; font-size: 11px; color: rgba(150, 195, 220, 0.5); margin-bottom: 8px; }
.wish-shop-exch-info strong { color: var(--c-cyan); }
.wish-exchange-full-btn {
    width: 100%; padding: 9px;
    background: rgba(76, 212, 255, 0.15);
    border: 1px solid rgba(76, 212, 255, 0.35);
    border-radius: 8px;
    color: var(--c-cyan);
    font-family: 'AOW', serif;
    font-size: 10.5px;
    cursor: pointer;
    transition: background var(--t-fast);
    white-space: nowrap;
    margin-top: 4px;
}
.wish-exchange-full-btn:hover:not(:disabled) { background: rgba(76, 212, 255, 0.28); }
.wish-exchange-full-btn:disabled { opacity: 0.3; cursor: default; }

/* ── Animációs overlay ─────────────────────────────────────── */
.wish-anim-overlay {
    display: none;
    position: fixed;
    inset: 0;
    z-index: var(--z-overlay);
    background: radial-gradient(ellipse at 50% 38%, rgba(30, 10, 60, 0.98) 0%, rgba(4, 2, 12, 0.99) 65%);
    flex-direction: column;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    padding-top: calc(var(--topbar-h, 96px) / var(--auto-zoom, 1));
    box-sizing: border-box;
}
.wish-anim-overlay.active { display: flex; }

.wish-anim-rays {
    position: absolute; inset: -100%;
    background: conic-gradient(from 0deg,
        transparent 0deg,   rgba(76, 212, 255, 0.07) 12deg,  transparent 22deg,
        transparent 46deg,  rgba(76, 212, 255, 0.05) 58deg,  transparent 68deg,
        transparent 92deg,  rgba(255, 107, 106, 0.06) 104deg, transparent 116deg,
        transparent 140deg, rgba(76, 212, 255, 0.05) 152deg,  transparent 162deg,
        transparent 186deg, rgba(76, 212, 255, 0.07) 198deg,  transparent 208deg,
        transparent 232deg, rgba(76, 212, 255, 0.05) 244deg,  transparent 254deg,
        transparent 278deg, rgba(255, 107, 106, 0.06) 290deg, transparent 302deg,
        transparent 326deg, rgba(76, 212, 255, 0.05) 338deg,  transparent 348deg,
        transparent 360deg);
    animation: wishRaysRot 12s linear infinite;
    pointer-events: none;
    z-index: 0;
}
@keyframes wishRaysRot { to { transform: rotate(360deg); } }

.wish-vortex {
    position: absolute; z-index: 3;
    width: 300px; height: 300px;
    border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    pointer-events: none;
    opacity: 0;
    transform: scale(0) rotate(-180deg);
    transition: opacity 0.55s ease, transform 0.7s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.wish-vortex.active { opacity: 1; transform: scale(1) rotate(0deg); }
.wish-vortex-inner {
    position: absolute; inset: 0; border-radius: 50%;
    background: conic-gradient(from 0deg,
        rgba(76, 212, 255, 0.92), rgba(76, 212, 255, 0.75), rgba(140, 190, 255, 0.88),
        rgba(60, 180, 255, 0.70), rgba(90, 160, 255, 0.92), rgba(76, 212, 255, 0.92));
    filter: blur(14px);
    animation: wishVortexSpin 1.1s linear infinite;
}
@keyframes wishVortexSpin { to { transform: rotate(360deg); } }
.wish-vortex-icon {
    position: relative; z-index: 5;
    width: 46%; height: 46%;
    object-fit: contain;
    filter: drop-shadow(0 0 18px rgba(255, 255, 255, 0.55));
    opacity: 0;
    transform: scale(0.6);
    transition: opacity 0.4s ease 0.15s, transform 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) 0.15s;
    pointer-events: none;
}
.wish-vortex.active .wish-vortex-icon.visible { opacity: 1; transform: scale(1); }
.wish-vortex-ring { position: absolute; border-radius: 50%; border: 2px solid rgba(150, 210, 255, 0.55); animation: wishVortexRing 0.85s ease-in-out infinite alternate; }
.wvr-1 { width: 320px; height: 320px; }
.wvr-2 { width: 390px; height: 390px; animation-delay: 0.28s; border-color: rgba(110, 170, 255, 0.38); }
.wvr-3 { width: 470px; height: 470px; animation-delay: 0.56s; border-color: rgba(90, 150, 255, 0.22); }
@keyframes wishVortexRing { from { opacity: 0.35; transform: scale(0.94); } to { opacity: 1; transform: scale(1.06); } }

.wish-vortex-particles { position: absolute; inset: 0; pointer-events: none; z-index: 4; overflow: visible; }
.wvp-spark { position: absolute; border-radius: 50%; pointer-events: none; transform: translate(-50%, -50%); animation: wvpSparkFly var(--dur, 0.8s) ease-out forwards; }
@keyframes wvpSparkFly {
    0%   { transform: translate(-50%, -50%) translate(0, 0) scale(1); opacity: 1; }
    100% { transform: translate(-50%, -50%) translate(var(--tx), var(--ty)) scale(0); opacity: 0; }
}
@keyframes wShockwave { 0% { width: 0; height: 0; opacity: 0.9; } 100% { width: 560px; height: 560px; opacity: 0; } }

.wish-rarity-flash { position: fixed; inset: 0; pointer-events: none; z-index: 800; opacity: 0; }
.wish-rarity-flash.wflash { animation: wFlash 0.55s ease-out forwards; }
@keyframes wFlash { 0% { opacity: 1; } 100% { opacity: 0; } }

.wish-reveal-hint {
    position: relative; z-index: 5; margin-top: 14px;
    font-family: 'AOW', serif; font-size: 12px; letter-spacing: 0.1em;
    color: rgba(170, 225, 255, 0.82); text-align: center;
    text-shadow: 0 0 14px rgba(76, 212, 255, 0.55);
    opacity: 0; transform: translateY(10px);
    transition: opacity 0.45s, transform 0.45s;
    pointer-events: none;
    animation: wHintPulse 2.2s ease-in-out infinite;
}
.wish-reveal-hint.visible { opacity: 1; transform: translateY(0); }
@keyframes wHintPulse { 0%, 100% { filter: brightness(1); } 50% { filter: brightness(1.6); } }

.wish-anim-revealall {
    position: relative; z-index: 5; margin-top: 8px;
    padding: 8px 30px;
    background: rgba(70, 40, 150, 0.32);
    border: 1px solid rgba(160, 130, 255, 0.32);
    border-radius: 7px;
    font-family: 'AOW', serif; font-size: 11px; letter-spacing: 0.05em;
    color: rgba(170, 225, 255, 0.72);
    cursor: pointer;
    opacity: 0; transform: translateY(10px);
    transition: opacity 0.4s, transform 0.4s, background var(--t-fast), border-color var(--t-fast);
}
.wish-anim-revealall.visible { opacity: 1; transform: translateY(0); }
.wish-anim-revealall:hover { background: rgba(100, 65, 210, 0.5); border-color: rgba(200, 170, 255, 0.55); }

.wish-anim-bg { position: absolute; inset: 0; pointer-events: none; overflow: hidden; }
.wanim-star { position: absolute; background: var(--c-cyan); border-radius: 50%; animation: wanim-twinkle 3s ease-in-out infinite; }
@keyframes wanim-twinkle { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.8); filter: brightness(2); } }

/* ── Kártyarács ────────────────────────────────────────────── */
.wish-cards-grid {
    position: relative; z-index: 2;
    display: none;
    flex-wrap: wrap;
    gap: 12px;
    justify-content: center; align-items: flex-start;
    max-width: 950px;
    padding: 8px;
}
.wish-cards-grid.visible { display: flex; }

.wc-card {
    width: 150px;
    position: relative;
    background: linear-gradient(165deg, rgba(12, 7, 30, 0.97) 0%, rgba(5, 3, 18, 0.99) 100%);
    border-radius: 13px;
    display: flex; flex-direction: column; align-items: center;
    padding: 2px 2px 10px;
    opacity: 0;
    transform: translateY(40px) scale(0.85);
    transition: opacity 0.35s ease, transform 0.42s cubic-bezier(0.34, 1.56, 0.64, 1);
    box-shadow: 0 0 22px 3px var(--rc, rgba(76, 212, 255, 0.45)), 0 8px 30px rgba(0, 0, 0, 0.75);
    cursor: pointer;
}
.wc-card.in:not(.revealed):hover {
    transform: translateY(-5px) scale(1.06) !important;
    box-shadow: 0 0 38px 10px var(--rc, rgba(76, 212, 255, 0.8)), 0 12px 40px rgba(0, 0, 0, 0.8) !important;
}
.wc-card.revealed { cursor: default; }

.wc-orb {
    position: absolute; inset: 0; z-index: 8;
    border-radius: 11px;
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    background: linear-gradient(165deg, rgba(10, 5, 28, 1) 0%, rgba(4, 2, 14, 1) 100%);
    overflow: hidden;
    transition: opacity 0.32s 0.05s ease-out, transform 0.42s 0.05s cubic-bezier(0.4, 0, 1, 1);
}
.wc-card.revealed .wc-orb { opacity: 0; transform: scale(3.2) rotate(12deg); pointer-events: none; }
.wc-orb-glow {
    position: absolute; inset: -24px; border-radius: 50%;
    background: radial-gradient(circle, var(--orb1, rgba(76, 212, 255, 0.7)) 0%, transparent 70%);
    filter: blur(22px);
    animation: wobGlow 1.6s ease-in-out infinite alternate;
}
@keyframes wobGlow { from { transform: scale(0.82); opacity: 0.65; } to { transform: scale(1.18); opacity: 1; } }
.wc-orb-core {
    position: relative; z-index: 2;
    width: 72px; height: 72px; border-radius: 50%;
    background: radial-gradient(circle at 38% 35%, var(--orb2, rgba(200, 235, 255, 0.9)) 0%, var(--orb1, rgba(76, 212, 255, 0.85)) 50%, rgba(8, 18, 48, 0.92) 100%);
    box-shadow: 0 0 24px 6px var(--orb1, rgba(76, 212, 255, 0.8)), inset 0 0 16px rgba(255, 255, 255, 0.22);
    animation: wobCore 1.25s ease-in-out infinite alternate;
}
@keyframes wobCore { from { transform: scale(0.90) rotate(-6deg); filter: brightness(0.88); } to { transform: scale(1.10) rotate(6deg); filter: brightness(1.22); } }
.wc-orb-ring { position: absolute; border-radius: 50%; border: 1.5px solid var(--orb1, rgba(180, 150, 255, 0.6)); pointer-events: none; }
.wor-1 { width: 96px; height: 96px; animation: wobRing 2.1s linear infinite; }
.wor-2 { width: 118px; height: 118px; animation: wobRing 2.9s linear infinite reverse; opacity: 0.6; }
.wor-3 { width: 142px; height: 142px; animation: wobRing 3.6s linear infinite; opacity: 0.35; }
@keyframes wobRing { from { transform: rotate(0deg) scaleX(1.32); } to { transform: rotate(360deg) scaleX(1.32); } }

.wc-card:not(.revealed):hover .wc-orb-core { filter: brightness(1.5) saturate(1.25) !important; }
.wc-card:not(.revealed):hover .wc-orb-glow { transform: scale(1.35) !important; }
.wc-card::before {
    content: '';
    position: absolute; inset: -2px; border-radius: 15px; z-index: -1;
    background: conic-gradient(from 0deg,
        rgba(170, 210, 255, 0.90), rgba(76, 212, 255, 0.42),
        rgba(190, 225, 255, 0.72), rgba(228, 245, 255, 0.58),
        rgba(158, 232, 255, 0.65), rgba(182, 214, 255, 0.88),
        rgba(170, 210, 255, 0.90));
    animation: wcBorderPulse 2.4s ease-in-out infinite alternate;
}
@keyframes wcBorderPulse { from { opacity: 0.65; filter: brightness(0.85); } to { opacity: 1.00; filter: brightness(1.45); } }
.wc-card.in { opacity: 1; transform: translateY(0) scale(1); animation: wcCardGlow 2.4s ease-in-out infinite alternate; }
@keyframes wcCardGlow {
    from { box-shadow: 0 0 12px 2px var(--rc, rgba(76, 212, 255, 0.40)), 0 6px 22px rgba(0, 0, 0, 0.72); }
    to   { box-shadow: 0 0 28px 7px var(--rc, rgba(76, 212, 255, 0.74)), 0 0 46px 10px rgba(185, 165, 255, 0.16), 0 8px 30px rgba(0, 0, 0, 0.75); }
}

.wc-inner { width: 146px; height: 170px; border-radius: 11px; overflow: hidden; position: relative; }
.wc-shimmer {
    position: absolute; inset: 0; z-index: 3; pointer-events: none;
    background: linear-gradient(125deg, transparent 0%, rgba(225, 235, 255, 0.11) 40%, rgba(255, 255, 255, 0.20) 50%, rgba(220, 232, 255, 0.11) 60%, transparent 100%);
    background-size: 250% 250%;
    animation: wcShimmer 3.4s ease-in-out infinite;
}
@keyframes wcShimmer { 0% { background-position: 200% 200%; } 50% { background-position: -60% -60%; } 100% { background-position: 200% 200%; } }

.wc-portrait { width: 100%; height: 100%; position: relative; }
.wc-char-img { width: 100%; height: 100%; object-fit: cover; object-position: top center; }
.wc-portrait::after {
    content: ''; position: absolute;
    bottom: 0; left: 0; right: 0; height: 52px;
    background: linear-gradient(transparent, rgba(5, 3, 18, 0.96));
}
.wc-puzzle { position: absolute; bottom: 6px; right: 6px; z-index: 4; width: 22px; height: 22px; filter: drop-shadow(0 0 5px rgba(0, 0, 0, 1)); }

.wc-icon-area { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; background: radial-gradient(ellipse at 50% 35%, rgba(76, 212, 255, 0.12) 0%, transparent 65%); }
.wc-icon {
    width: 82px; height: 82px; object-fit: contain;
    filter: drop-shadow(0 0 14px var(--rc, rgba(76, 212, 255, 0.85)));
    animation: wcIconPulse 1.8s ease-in-out infinite alternate;
}
@keyframes wcIconPulse { from { transform: scale(1); } to { transform: scale(1.08); filter: drop-shadow(0 0 22px var(--rc, rgba(180, 150, 255, 1))); } }

.wc-caption { width: 100%; padding: 7px 6px 0; display: flex; flex-direction: column; align-items: center; gap: 3px; }
.wc-name {
    font-family: 'AOW', serif;
    font-size: 11px; color: rgba(232, 222, 255, 0.95); text-align: center; line-height: 1.3;
    text-shadow: 0 0 10px rgba(165, 135, 255, 0.60);
}
.wc-rarity { font-size: 9px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; text-shadow: 0 0 8px currentColor; }

.wish-anim-ok {
    position: relative; z-index: 5;
    margin-top: 16px; padding: 13px 54px;
    background: linear-gradient(135deg, rgba(76, 212, 255, 0.48) 0%, rgba(20, 70, 150, 0.68) 100%);
    border: 1px solid rgba(150, 220, 255, 0.50);
    border-radius: 9px;
    font-family: 'AOW', serif;
    font-size: 14px; color: #a8ddff;
    cursor: pointer; opacity: 0; transform: translateY(14px);
    transition: opacity 0.35s ease, transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1), background var(--t-fast);
    letter-spacing: 0.05em;
    box-shadow: 0 0 20px rgba(76, 212, 255, 0.3);
}
.wish-anim-ok.visible { opacity: 1; transform: translateY(0); }
.wish-anim-ok:hover { background: linear-gradient(135deg, rgba(110, 200, 255, 0.68) 0%, rgba(30, 100, 190, 0.88) 100%); box-shadow: 0 0 32px rgba(110, 200, 255, 0.5); }

/* ── Toast ─────────────────────────────────────────────────── */
.wish-toast {
    position: fixed;
    bottom: 28px;
    left: 50%;
    transform: translateX(-50%) translateY(16px);
    background: rgba(20, 12, 40, 0.96);
    border: 1px solid rgba(76, 212, 255, 0.4);
    border-radius: 9px;
    padding: 10px 22px;
    color: var(--c-cyan);
    font-size: 13px;
    opacity: 0;
    transition: opacity 0.28s, transform 0.28s;
    pointer-events: none;
    z-index: 700;
    white-space: nowrap;
}
.wish-toast.visible { opacity: 1; transform: translateX(-50%) translateY(0); }

@media (max-width: 1100px) {
    .wbt-main { font-size: 60px; }
    .wbt-pre { font-size: 28px; }
    .wish-banner-points { flex-direction: column; align-items: flex-start; gap: 10px; padding: 12px; }
    .wish-points-info { min-width: 160px; }
}

/* ── Gacha Package tray (Bag/Kapszula/Orb) ────────────────────
   Fix pozíciójú, kis dokk a jobb-alsó sarokban — kiegészítő elem, nem
   takarja a hero artworköt/wish gombokat (ld. package spec 42. pont). */

.wish-package-tray {
    position: fixed;
    right: 22px;
    bottom: 196px;
    z-index: 400;
    display: none;
    flex-direction: row-reverse;
    gap: 10px;
    max-width: min(70vw, 640px);
    overflow-x: auto;
    padding: 4px;
}

.wish-package-tray.has-items { display: flex; }
.wish-package-tray.is-locked { pointer-events: none; opacity: 0.6; }

@property --wpkg-angle {
    syntax: '<angle>';
    inherits: false;
    initial-value: 0deg;
}

.wtray-icon-wrap {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    width: 60px;
    height: 60px;
    border-radius: var(--radius-m);
    border: 3px solid transparent;
    background:
        linear-gradient(rgba(7, 12, 20, 0.92), rgba(7, 12, 20, 0.92)) padding-box,
        conic-gradient(from var(--wpkg-angle), #ff3b6e, #ffb347, #fff58a, #6dffb3, #5ec8ff, #b18aff, #ff3b6e) border-box;
    cursor: grab;
    transition: transform var(--t-fast) ease, box-shadow var(--t-fast) ease;
    animation: wpkg-rainbow-spin 5s linear infinite;
}

@keyframes wpkg-rainbow-spin {
    to { --wpkg-angle: 360deg; }
}

.wtray-icon-wrap:hover {
    transform: translateY(-3px);
    box-shadow: 0 0 18px 3px rgba(255, 255, 255, 0.4), 0 6px 18px rgba(0, 0, 0, 0.5);
    animation-duration: 1.4s;
}

.wtray-icon-wrap.is-dragging { opacity: 0.35; cursor: grabbing; }

.wtray-icon-img {
    width: 68%;
    height: 68%;
    object-fit: contain;
    display: block;
}

.wtray-badge {
    position: absolute;
    bottom: -4px;
    right: -4px;
    padding: 1px 6px;
    border-radius: 999px;
    background: var(--c-gold);
    color: #241a04;
    font-family: "Montserrat", sans-serif;
    font-weight: 700;
    font-size: 0.62rem;
}

.wtray-tooltip {
    position: absolute;
    bottom: calc(100% + 10px);
    right: 0;
    width: 220px;
    padding: 10px 12px;
    border-radius: var(--radius-m);
    border: 1px solid rgba(255, 210, 76, 0.45);
    background: rgba(7, 12, 20, 0.97);
    opacity: 0;
    pointer-events: none;
    transform: translateY(6px);
    transition: opacity var(--t-fast) ease, transform var(--t-fast) ease;
}

.wtray-icon-wrap:hover .wtray-tooltip { opacity: 1; transform: translateY(0); }

.wtray-tooltip-name {
    color: var(--c-gold);
    font-family: "Montserrat", sans-serif;
    font-weight: 700;
    font-size: 0.76rem;
    margin-bottom: 4px;
}

.wtray-tooltip-desc {
    color: var(--c-text-dim);
    font-family: "Montserrat", sans-serif;
    font-size: 0.68rem;
    line-height: 1.35;
    margin-bottom: 6px;
}

.wtray-tooltip-effect {
    color: var(--c-text);
    font-family: "Montserrat", sans-serif;
    font-size: 0.66rem;
    padding: 3px 0;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
}

.wtray-tooltip-effect:first-of-type { border-top: none; }

/* ── Drop-zone highlight (wish-visual-area) ───────────────────── */

.wish-visual-area.wish-drop-active {
    outline: 2px dashed var(--c-gold);
    outline-offset: -8px;
    border-radius: var(--radius-l);
}

.wish-package-drop-hint {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 401;
    padding: 12px 26px;
    border-radius: var(--radius-m);
    background: rgba(7, 12, 20, 0.92);
    border: 1px solid var(--c-gold);
    color: var(--c-gold);
    font-family: "Montserrat", sans-serif;
    font-weight: 700;
    font-size: 0.9rem;
    letter-spacing: 0.4px;
    opacity: 0;
    pointer-events: none;
    transition: opacity var(--t-fast) ease;
}

.wish-package-drop-hint.visible { opacity: 1; }

/* ── Package opening animáció (flourish, egy közös impl., accent-szín
   típusonként — ld. spec 16. pont) ──────────────────────────────── */

.wish-package-opening {
    position: fixed;
    inset: 0;
    z-index: var(--z-overlay);
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(3, 5, 9, 0);
    transition: background var(--t-mid) ease;
    pointer-events: none;
}

.wish-package-opening.active { background: rgba(3, 5, 9, 0.55); }

.wpo-flash {
    position: absolute;
    inset: 0;
    background: radial-gradient(circle, rgba(255, 210, 76, 0.35), transparent 65%);
    opacity: 0;
}

.wish-package-opening.active .wpo-flash {
    opacity: 1;
    animation: wpoFlashPulse 1s ease-out forwards;
}

.wish-package-opening[data-type="capsule"] .wpo-flash {
    background: radial-gradient(circle, rgba(76, 212, 255, 0.35), transparent 65%);
}

.wish-package-opening[data-type="orb"] .wpo-flash {
    background: radial-gradient(circle, rgba(255, 107, 106, 0.35), transparent 65%);
}

.wpo-icon-wrap {
    width: 120px;
    height: 120px;
    transform: scale(0.4);
    opacity: 0;
    transition: transform 0.5s cubic-bezier(0.34, 1.56, 0.64, 1), opacity 0.35s ease;
}

.wish-package-opening.active .wpo-icon-wrap {
    transform: scale(1.15);
    opacity: 1;
    animation: wpoIconSettle 1s ease-out forwards;
}

.wpo-icon {
    width: 100%;
    height: 100%;
    object-fit: contain;
    filter: drop-shadow(0 0 24px rgba(255, 210, 76, 0.7));
}

.wpo-spark {
    position: fixed;
    border-radius: 50%;
    pointer-events: none;
    z-index: 900;
    animation: wvpSparkFly var(--dur) ease-out forwards;
}

@keyframes wpoFlashPulse {
    0% { opacity: 0; }
    35% { opacity: 1; }
    100% { opacity: 0; }
}

@keyframes wpoIconSettle {
    0% { transform: scale(0.4); opacity: 0; }
    55% { transform: scale(1.25); opacity: 1; }
    100% { transform: scale(1); opacity: 1; }
}

@media (max-width: 1100px) {
    .wish-package-tray { right: 12px; bottom: 186px; max-width: 80vw; }
    .wtray-icon-wrap { width: 50px; height: 50px; }
}