/* =====================================================================
   game-ui2.css - ממשק משחק חדש (בהיר, בסגנון דף הבית): HUD, פס פעולות צדדי,
   דוק צ'אט, ארון פריטים כ"חדר הלבשה" וחנות כ"דוכן". מבנה, תנועה ואפקטים חדשים.
   ===================================================================== */
:root {
    --u-ink: #17315c; --u-soft: #4a6288;
    --u-sky: #2e9bff; --u-sky-d: #1565d8; --u-sky-300: #7fd0ff; --u-sky-100: #e3f5ff; --u-sky-50: #f3fbff;
    --u-violet: #7c4dff; --u-violet-d: #5b2bd1; --u-violet-300: #b9a2ff;
    --u-orange: #ff9a1f; --u-orange-d: #e8650c; --u-orange-300: #ffc65c;
    --u-green: #3ddc84; --u-green-d: #1fa65a; --u-pink: #ff5fa2; --u-pink-d: #c2347a; --u-yellow: #ffd93b;
    --u-font: 'Secular One', 'Rubik', system-ui, sans-serif;
    --u-ease: cubic-bezier(.2, 1.5, .4, 1);
}

/* ============================ HUD ============================ */
.hud {
    position: fixed; top: 16px; inset-inline-start: 16px; z-index: 900;
    display: flex; align-items: center; gap: 12px; padding: 8px 20px 8px 10px; direction: rtl;
    background: #fff; border: 4px solid #fff; border-radius: 999px;
    box-shadow: 0 6px 0 rgba(21, 101, 216, .35), 0 16px 30px rgba(11, 61, 145, .3);
    animation: uSlideDown .6s var(--u-ease) both;
}
.hud__avatar {
    width: 62px; height: 62px; border-radius: 50%; overflow: hidden; flex-shrink: 0;
    background: linear-gradient(180deg, #8fd6ff, #e3f5ff); border: 3px solid var(--u-sky-300); box-shadow: inset 0 -4px 8px rgba(21, 101, 216, .15);
}
.hud__avatar canvas { width: 100%; height: 100%; display: block; }
.hud__text { display: flex; flex-direction: column; gap: 3px; min-width: 96px; }
.hud__name { font: 400 1.1rem/1.1 var(--u-font); color: var(--u-ink); max-width: 150px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hud__coins { display: inline-flex; align-items: center; gap: 7px; width: fit-content; padding: 3px 12px 3px 8px; border-radius: 999px; background: #fff4cf; border: 2px solid var(--u-yellow); font: 400 1rem var(--u-font); color: #7a4300; }
.hud__coin, .sp-coins i, .wr-chip--coin i {
    display: inline-block; width: 18px; height: 18px; border-radius: 50%;
    background: radial-gradient(circle at 35% 30%, #fff6b8, var(--u-yellow) 50%, #e09a00); border: 2px solid #d98a00; box-sizing: border-box;
}
.hud__coins.bump { animation: uBump .45s var(--u-ease); }
@keyframes uBump { 0% { transform: scale(1); } 40% { transform: scale(1.25) rotate(-3deg); } 100% { transform: scale(1); } }
@keyframes uSlideDown { from { opacity: 0; transform: translateY(-30px); } to { opacity: 1; transform: none; } }

/* ======================== פס פעולות צדדי ======================== */
.action-rail {
    position: fixed; inset-inline-start: 16px; top: 50%; translate: 0 -50%; z-index: 900;
    display: flex; flex-direction: column; gap: 14px; padding: 12px 10px; direction: rtl;
    background: rgba(255, 255, 255, .55); border: 3px solid rgba(255, 255, 255, .9); border-radius: 36px;
    box-shadow: 0 10px 30px rgba(11, 61, 145, .25); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
}
.action-rail .toolbar-btn-base {
    --c1: #6cc4ff; --c2: var(--u-sky); --edge: var(--u-sky-d);
    position: relative !important; width: 62px !important; height: 62px !important; min-width: 62px !important; max-width: 62px !important; min-height: 62px !important; max-height: 62px !important;
    display: grid !important; place-items: center; padding: 0 !important; overflow: visible !important;
    font-size: 30px !important; line-height: 1 !important; color: #fff;
    background: linear-gradient(180deg, var(--c1), var(--c2)) !important; border: 0 !important; border-radius: 22px !important;
    box-shadow: 0 6px 0 var(--edge), 0 12px 18px rgba(11, 61, 145, .25), inset 0 2px 0 rgba(255, 255, 255, .55) !important;
    backdrop-filter: none !important; -webkit-backdrop-filter: none !important;
    transition: transform .2s var(--u-ease), box-shadow .2s !important;
    animation: uRailIn .5s var(--u-ease) both;
}
.action-rail .toolbar-btn-base:nth-child(1) { animation-delay: .1s; } .action-rail .toolbar-btn-base:nth-child(2) { animation-delay: .18s; }
.action-rail .toolbar-btn-base:nth-child(3) { animation-delay: .26s; } .action-rail .toolbar-btn-base:nth-child(4) { animation-delay: .34s; }
.action-rail .toolbar-btn-base:nth-child(5) { animation-delay: .42s; } .action-rail .toolbar-btn-base:nth-child(6) { animation-delay: .5s; }
@keyframes uRailIn { from { opacity: 0; transform: translateX(-40px) scale(.7); } to { opacity: 1; transform: none; } }
.action-rail .toolbar-btn-base::before { display: none !important; }
/* תווית שנפתחת הצידה */
.action-rail .toolbar-btn-base::after {
    content: attr(data-label) !important; display: block !important; position: absolute !important; inset: 50% auto auto 100% !important;
    width: auto !important; height: auto !important; transform: translate(-6px, -50%) scale(.85) !important; transform-origin: left center;
    margin-left: 12px; padding: 7px 14px; border-radius: 14px; white-space: nowrap; opacity: 0 !important; pointer-events: none;
    font: 400 1rem var(--u-font); color: var(--u-ink); background: #fff; box-shadow: 0 4px 0 rgba(21, 101, 216, .3), 0 10px 18px rgba(11, 61, 145, .2);
    transition: opacity .18s, transform .2s var(--u-ease);
}
.action-rail .toolbar-btn-base:hover, .action-rail .toolbar-btn-base:focus-visible { transform: translateX(8px) scale(1.1) rotate(-4deg) !important; filter: brightness(1.06); }
.action-rail .toolbar-btn-base:hover::after, .action-rail .toolbar-btn-base:focus-visible::after { opacity: 1 !important; transform: translate(0, -50%) scale(1) !important; }
.action-rail .toolbar-btn-base:active { transform: translateY(5px) scale(.96) !important; box-shadow: 0 1px 0 var(--edge) !important; }
.action-rail .toolbar-btn-base:focus-visible { outline: 4px solid var(--u-violet) !important; outline-offset: 3px; }
.action-rail .wardrobe-btn { --c1: #a98aff; --c2: var(--u-violet); --edge: var(--u-violet-d); }
.action-rail .shop-btn { --c1: #7cf0ae; --c2: var(--u-green); --edge: var(--u-green-d); }
.action-rail .redeem-code-btn { --c1: #ff9ac4; --c2: var(--u-pink); --edge: var(--u-pink-d); }
.action-rail .map-btn { --c1: #6cc4ff; --c2: var(--u-sky); --edge: var(--u-sky-d); }
.action-rail .settings-btn { --c1: #c5d2ea; --c2: #8aa0c4; --edge: #5f7699; }

/* ============================ דוק צ'אט ============================ */
.game-toolbar.chat-dock {
    position: fixed !important; left: 50% !important; right: auto !important; bottom: 20px !important; transform: translateX(-50%) !important;
    width: min(680px, calc(100vw - 150px)) !important; min-width: 0 !important; max-width: none !important; height: auto !important; padding: 10px 12px !important;
    background: #fff !important; border: 4px solid #fff !important; border-radius: 999px !important;
    box-shadow: 0 7px 0 rgba(21, 101, 216, .35), 0 20px 36px rgba(11, 61, 145, .3) !important;
    backdrop-filter: none !important; -webkit-backdrop-filter: none !important; animation: uDockIn .6s .15s var(--u-ease) both !important;
}
.game-toolbar.chat-dock:hover { transform: translateX(-50%) translateY(-3px) !important; background: #fff !important; }
@keyframes uDockIn { from { opacity: 0; transform: translateX(-50%) translateY(40px); } to { opacity: 1; transform: translateX(-50%); } }
.chat-dock .chat-container { display: flex; align-items: center; gap: 10px; flex-direction: row-reverse; width: 100%; }
.chat-dock .chat-input {
    flex: 1; height: 52px !important; padding: 0 20px !important; font: 500 1.05rem 'Rubik', sans-serif !important; color: var(--u-ink) !important;
    background: var(--u-sky-50) !important; border: 3px solid var(--u-sky-100) !important; border-radius: 999px !important; box-shadow: none !important;
    transition: border-color .2s, box-shadow .2s, background .2s;
}
.chat-dock .chat-input:focus { background: #fff !important; border-color: var(--u-sky) !important; box-shadow: 0 0 0 5px rgba(46, 155, 255, .2) !important; }
.chat-dock .toolbar-btn-base {
    width: 52px !important; height: 52px !important; min-width: 52px !important; max-width: 52px !important; min-height: 52px !important; max-height: 52px !important;
    border-radius: 50% !important; border: 0 !important; font-size: 24px !important; padding: 0 !important; margin: 0 !important;
    background: linear-gradient(180deg, #6cc4ff, var(--u-sky)) !important; box-shadow: 0 5px 0 var(--u-sky-d), inset 0 2px 0 rgba(255, 255, 255, .5) !important;
    transition: transform .15s var(--u-ease) !important;
}
.chat-dock .toolbar-btn-base::before, .chat-dock .toolbar-btn-base::after { display: none !important; }
.chat-dock .toolbar-btn-base:hover { transform: translateY(-3px) rotate(-6deg) scale(1.08) !important; }
.chat-dock .toolbar-btn-base:active { transform: translateY(4px) !important; box-shadow: none !important; }
.chat-dock .emoji-btn { background: linear-gradient(180deg, #ffe97a, #ffc61f) !important; box-shadow: 0 5px 0 #c99100, inset 0 2px 0 rgba(255, 255, 255, .5) !important; }
.chat-dock .chat-send-btn { background: linear-gradient(180deg, var(--u-orange-300), var(--u-orange)) !important; box-shadow: 0 5px 0 var(--u-orange-d), inset 0 2px 0 rgba(255, 255, 255, .5) !important; }
.chat-dock .chat-history-btn { background: linear-gradient(180deg, #a98aff, var(--u-violet)) !important; box-shadow: 0 5px 0 var(--u-violet-d), inset 0 2px 0 rgba(255, 255, 255, .5) !important; }

/* ====================== חלון "חדר הלבשה" (ארון) ====================== */
.wardrobe-popup { background: radial-gradient(circle at 50% 30%, rgba(46, 155, 255, .35), rgba(11, 40, 100, .65)) !important; backdrop-filter: blur(6px) !important; }
.wr {
    width: min(1120px, 95vw); height: min(690px, 92vh); display: flex; flex-direction: column; overflow: hidden;
    background: #fff; border: 5px solid #fff; border-radius: 38px;
    box-shadow: 0 12px 0 rgba(21, 101, 216, .4), 0 40px 80px rgba(11, 61, 145, .5);
    animation: uWindow .55s var(--u-ease);
}
@keyframes uWindow { from { opacity: 0; transform: translateY(50px) scale(.88) rotate(-1.5deg); } to { opacity: 1; transform: none; } }
.wr-head, .sp-head {
    position: relative; display: flex; align-items: center; gap: 16px; padding: 16px 24px; flex-shrink: 0;
    background: linear-gradient(180deg, #8f6bff, var(--u-violet)); box-shadow: 0 5px 0 var(--u-violet-d); z-index: 2;
    overflow: hidden;
}
.sp-head { background: linear-gradient(180deg, #62e9a0, var(--u-green)); box-shadow: 0 5px 0 var(--u-green-d); }
.wr-head::after, .sp-head::after {
    content: ''; position: absolute; inset-inline-end: 70px; top: -26px; width: 130px; height: 70px; opacity: .35;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 100'%3E%3Cpath fill='%23fff' d='M40 92a30 30 0 0 1-4-59 40 40 0 0 1 74-12 36 36 0 0 1 56 26 28 28 0 0 1-6 45z'/%3E%3C/svg%3E") center / contain no-repeat;
    animation: uDrift 9s ease-in-out infinite alternate;
}
@keyframes uDrift { from { transform: translateX(0); } to { transform: translateX(-40px); } }
.wr-title, .sp-title { display: flex; align-items: center; gap: 12px; }
.wr-head h2, .sp-head h2 { margin: 0; font: 400 1.7rem/1 var(--u-font); color: #fff; text-shadow: 0 3px 0 rgba(30, 10, 100, .45); }
.sp-head h2 { text-shadow: 0 3px 0 rgba(10, 80, 40, .45); }
.wr-title__icon, .sp-title__icon {
    width: 46px; height: 46px; border-radius: 16px; background: rgba(255, 255, 255, .25); border: 2px solid rgba(255, 255, 255, .6);
    -webkit-mask: none; position: relative; animation: uWobble 3.2s ease-in-out infinite;
}
.wr-title__icon::before { content: '\1F455'; position: absolute; inset: 0; display: grid; place-items: center; font-size: 26px; }
.sp-title__icon::before { content: '\1F6D2'; position: absolute; inset: 0; display: grid; place-items: center; font-size: 26px; }
@keyframes uWobble { 0%, 90%, 100% { transform: rotate(0); } 93% { transform: rotate(-10deg); } 96% { transform: rotate(10deg); } }
.wr-sub { margin: 0; color: rgba(255, 255, 255, .92); font-weight: 500; flex: 1; }
.wr-close, .sp-close {
    margin-inline-start: auto; width: 46px; height: 46px; flex-shrink: 0; border: 0; border-radius: 16px; cursor: pointer;
    font: 400 1.9rem/1 var(--u-font); color: #fff; background: linear-gradient(180deg, #ff9aa2, #ff4d57); box-shadow: 0 5px 0 #c01f2b;
    transition: transform .2s var(--u-ease);
}
.wr-close:hover, .sp-close:hover { transform: rotate(90deg) scale(1.1); }
.wr-close:active, .sp-close:active { transform: translateY(4px); box-shadow: none; }

.wr-body { flex: 1; min-height: 0; display: grid; grid-template-columns: 340px minmax(0, 1fr); }
/* במה */
.wr-stage {
    position: relative; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; gap: 10px; padding: 18px 16px 20px; overflow: hidden;
    background: linear-gradient(180deg, #7fd0ff 0%, #c4ecff 60%, #f3fbff 100%);
    border-inline-end: 4px solid var(--u-sky-100);
}
.wr-stage__cloud { position: absolute; width: 130px; height: 62px; opacity: .85; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 100'%3E%3Cpath fill='%23fff' d='M40 92a30 30 0 0 1-4-59 40 40 0 0 1 74-12 36 36 0 0 1 56 26 28 28 0 0 1-6 45z'/%3E%3C/svg%3E") center / contain no-repeat; }
.wr-stage__cloud--a { top: 28px; inset-inline-start: -30px; animation: uCloud 16s linear infinite; }
.wr-stage__cloud--b { top: 90px; inset-inline-end: -30px; width: 90px; opacity: .6; animation: uCloud 22s linear infinite reverse; }
@keyframes uCloud { from { transform: translateX(0); } to { transform: translateX(260px); } }
.wr-stage__spot { position: absolute; top: 0; left: 50%; width: 260px; height: 100%; translate: -50% 0; background: linear-gradient(180deg, rgba(255, 255, 255, .7), transparent 75%); clip-path: polygon(40% 0, 60% 0, 100% 100%, 0 100%); opacity: .7; }
.wr-stage .character-preview { position: relative; z-index: 2; margin-bottom: -6px; filter: drop-shadow(0 18px 14px rgba(11, 61, 145, .3)); animation: uFloat 4s ease-in-out infinite; background: none !important; border: 0 !important; }
.wr-stage .character-preview canvas { width: 100%; height: auto; }
@keyframes uFloat { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-10px); } }
.wr-stage__platform {
    position: absolute; bottom: 74px; left: 50%; translate: -50% 0; width: 230px; height: 46px; z-index: 1; border-radius: 50%;
    background: radial-gradient(ellipse at 50% 40%, #fff, #bfe4ff 70%); box-shadow: 0 10px 0 #8cc4f3, 0 22px 24px rgba(11, 61, 145, .3);
}
.wr-stats { position: relative; z-index: 3; display: flex; gap: 10px; }
.wr-chip { display: inline-flex; align-items: center; gap: 8px; padding: 7px 14px 7px 10px; border-radius: 999px; background: #fff; font: 400 1.05rem var(--u-font); color: var(--u-ink); box-shadow: 0 4px 0 rgba(21, 101, 216, .25); }
.wr-chip i { width: 18px; height: 18px; border-radius: 50%; display: inline-block; }
.wr-chip--gem i { background: linear-gradient(135deg, #9ef0ff, #5a8bff); border-radius: 5px; transform: rotate(45deg) scale(.85); }
.badges-preview { position: relative; z-index: 3; display: flex; gap: 6px; flex-wrap: wrap; justify-content: center; }
/* מדף */
.wr-shelf { display: flex; flex-direction: column; min-width: 0; min-height: 0; background: var(--u-sky-50); }
.wr-tabs, .sp-tabs {
    display: flex; gap: 10px; padding: 16px 20px 12px; overflow-x: auto; flex-shrink: 0; scrollbar-width: thin;
    background: #fff; border-bottom: 4px solid var(--u-sky-100);
}
.wr-tabs .category-tab, .sp-tabs .category-tab, .wr-tabs button, .sp-tabs button {
    flex-shrink: 0; padding: 9px 20px !important; border: 3px solid var(--u-sky-100) !important; border-radius: 999px !important;
    background: var(--u-sky-50) !important; color: var(--u-sky-d) !important; font: 400 1rem var(--u-font) !important; cursor: pointer; box-shadow: 0 4px 0 var(--u-sky-100) !important;
    transition: transform .15s var(--u-ease), background .2s, color .2s !important; text-shadow: none !important; white-space: nowrap;
}
.wr-tabs .category-tab:hover, .sp-tabs .category-tab:hover { transform: translateY(-3px); }
.wr-tabs .category-tab.active, .sp-tabs .category-tab.active {
    background: linear-gradient(180deg, #a98aff, var(--u-violet)) !important; color: #fff !important; border-color: var(--u-violet-d) !important; box-shadow: 0 4px 0 var(--u-violet-d) !important; transform: translateY(-2px);
}
.sp-tabs .category-tab.active { background: linear-gradient(180deg, #7cf0ae, var(--u-green)) !important; border-color: var(--u-green-d) !important; box-shadow: 0 4px 0 var(--u-green-d) !important; color: #063d1f !important; }
.wr-grid, .sp-grid {
    flex: 1; min-height: 0; overflow-y: auto; padding: 20px; display: grid; gap: 16px; align-content: start;
    grid-template-columns: repeat(auto-fill, minmax(138px, 1fr)); scrollbar-width: thin; scrollbar-color: var(--u-sky-300) transparent;
}
.wr-grid .item-card, .sp-grid .shop-item-card {
    position: relative; display: flex !important; flex-direction: column !important; align-items: center; gap: 8px; padding: 12px 10px 14px !important; margin: 0 !important;
    background: #fff !important; border: 3px solid var(--u-sky-100) !important; border-radius: 24px !important; color: var(--u-ink) !important;
    box-shadow: 0 6px 0 var(--u-sky-100) !important; cursor: pointer; transition: transform .22s var(--u-ease), box-shadow .22s, border-color .2s !important;
    animation: uCardIn .5s var(--u-ease) both; backdrop-filter: none !important;
}
.wr-grid .item-card:nth-child(1), .sp-grid .shop-item-card:nth-child(1) { animation-delay: .02s; } .wr-grid .item-card:nth-child(2), .sp-grid .shop-item-card:nth-child(2) { animation-delay: .06s; }
.wr-grid .item-card:nth-child(3), .sp-grid .shop-item-card:nth-child(3) { animation-delay: .1s; } .wr-grid .item-card:nth-child(4), .sp-grid .shop-item-card:nth-child(4) { animation-delay: .14s; }
.wr-grid .item-card:nth-child(5), .sp-grid .shop-item-card:nth-child(5) { animation-delay: .18s; } .wr-grid .item-card:nth-child(6), .sp-grid .shop-item-card:nth-child(6) { animation-delay: .22s; }
.wr-grid .item-card:nth-child(n+7), .sp-grid .shop-item-card:nth-child(n+7) { animation-delay: .26s; }
@keyframes uCardIn { from { opacity: 0; transform: translateY(22px) scale(.88); } to { opacity: 1; transform: none; } }
.wr-grid .item-card:hover, .sp-grid .shop-item-card:hover { transform: translateY(-7px) rotate(-1.5deg) !important; border-color: var(--u-sky-300) !important; box-shadow: 0 13px 0 var(--u-sky-300), 0 22px 26px rgba(11, 61, 145, .18) !important; }
.wr-grid .item-card:active { transform: translateY(1px) scale(.97) !important; }
.wr-grid .item-image, .sp-grid .item-image {
    width: 100% !important; height: 104px !important; object-fit: contain; border-radius: 18px !important; padding: 6px; box-sizing: border-box;
    background: radial-gradient(circle at 50% 40%, #fff, var(--u-sky-100)) !important; transition: transform .25s var(--u-ease);
}
.wr-grid .item-card:hover .item-image, .sp-grid .shop-item-card:hover .item-image { transform: scale(1.14) rotate(3deg); }
.wr-grid .item-name, .sp-grid .item-name { font: 400 1rem/1.25 var(--u-font) !important; color: var(--u-ink) !important; text-align: center; text-shadow: none !important; }
.item-badge { display: inline-block; padding: 2px 10px; border-radius: 999px; font-size: .72rem; font-weight: 700; }
.item-badge.premium { background: #efe8ff; color: var(--u-violet-d); border: 2px solid var(--u-violet-300); }
.item-badge.admin { background: #ffe3ee; color: var(--u-pink-d); border: 2px solid #ffb3d1; }
/* לבוש */
.wr-grid .item-card.equipped { border-color: var(--u-orange) !important; background: linear-gradient(180deg, #fffaf0, #fff) !important; box-shadow: 0 6px 0 var(--u-orange-d), 0 0 0 4px rgba(255, 154, 31, .25) !important; animation: uCardIn .5s var(--u-ease) both, uPulse 2.4s 1s ease-in-out infinite; }
.wr-grid .item-card.equipped::after {
    content: 'לבוש'; position: absolute; top: -10px; inset-inline-start: 12px; padding: 4px 12px; border-radius: 999px;
    font: 400 .85rem var(--u-font); color: #5a2a00; background: linear-gradient(180deg, var(--u-orange-300), var(--u-orange)); box-shadow: 0 3px 0 var(--u-orange-d); transform: rotate(-4deg);
}
@keyframes uPulse { 0%, 100% { box-shadow: 0 6px 0 var(--u-orange-d), 0 0 0 4px rgba(255, 154, 31, .25); } 50% { box-shadow: 0 6px 0 var(--u-orange-d), 0 0 0 9px rgba(255, 154, 31, .1); } }
.wr-grid .item-card.premium-only, .wr-grid .item-card.admin-only { opacity: .7; }
.wr-grid .item-card.premium-only::before, .wr-grid .item-card.admin-only::before {
    content: '\1F512'; position: absolute; top: 8px; inset-inline-end: 8px; z-index: 2; width: 30px; height: 30px; display: grid; place-items: center; border-radius: 50%; background: #fff; box-shadow: 0 3px 0 var(--u-sky-100);
}

/* ============================ חנות ============================ */
.shop-popup { background: radial-gradient(circle at 50% 30%, rgba(61, 220, 132, .3), rgba(11, 40, 100, .65)) !important; backdrop-filter: blur(6px) !important; }
.sp {
    width: min(1020px, 95vw); height: min(680px, 92vh); display: flex; flex-direction: column; overflow: hidden; background: #fff;
    border: 5px solid #fff; border-radius: 38px; box-shadow: 0 12px 0 rgba(21, 101, 216, .4), 0 40px 80px rgba(11, 61, 145, .5); animation: uWindow .55s var(--u-ease);
}
.sp-coins { margin-inline-start: auto; display: inline-flex; align-items: center; gap: 8px; padding: 8px 18px 8px 12px; border-radius: 999px; background: #fff; border: 0 !important; font: 400 1.2rem var(--u-font); color: #7a4300 !important; box-shadow: 0 4px 0 rgba(0, 0, 0, .18) !important; }
.sp-close { margin-inline-start: 0; }
.sp-body { flex: 1; min-height: 0; display: flex; flex-direction: column; background: var(--u-sky-50); }
.sp-note { margin: 16px 20px 0; padding: 12px 16px; border-radius: 16px; background: #fff4cf; color: #7a4300; font-weight: 600; }
.sp-grid { grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); }
.sp-grid .shop-item-card .item-image { height: 124px !important; }
.sp-grid .shop-item-price { display: inline-flex; align-items: center; gap: 6px; padding: 4px 14px; border-radius: 999px; background: #fff4cf; border: 2px solid var(--u-yellow); font: 400 1.1rem var(--u-font); color: #7a4300 !important; }
.sp-grid .shop-item-buy-btn {
    width: 100%; padding: 10px 8px !important; border: 0 !important; border-radius: 16px !important; cursor: pointer; font: 400 1.05rem var(--u-font) !important;
    color: #063d1f !important; background: linear-gradient(180deg, #7cf0ae, var(--u-green)) !important; box-shadow: 0 5px 0 var(--u-green-d), inset 0 2px 0 rgba(255, 255, 255, .5) !important;
    transition: transform .15s var(--u-ease), filter .2s !important; text-shadow: none !important;
}
.sp-grid .shop-item-buy-btn:hover:not(:disabled) { transform: translateY(-2px) scale(1.04); filter: brightness(1.06); }
.sp-grid .shop-item-buy-btn:active:not(:disabled) { transform: translateY(4px); box-shadow: none !important; }
.sp-grid .shop-item-buy-btn:disabled { background: var(--u-sky-100) !important; color: var(--u-soft) !important; box-shadow: 0 5px 0 #c6dcf0 !important; cursor: not-allowed; }
.sp-grid .shop-item-card.owned { opacity: .85; }
.sp-grid .shop-item-card.owned::after {
    content: 'בבעלותך'; position: absolute; top: -10px; inset-inline-start: 12px; padding: 4px 12px; border-radius: 999px; font: 400 .85rem var(--u-font);
    color: #063d1f; background: linear-gradient(180deg, #7cf0ae, var(--u-green)); box-shadow: 0 3px 0 var(--u-green-d); transform: rotate(-4deg);
}
.sp-grid .shop-item-card.limited::before {
    content: 'מוגבל'; position: absolute; top: 10px; inset-inline-end: -6px; padding: 3px 12px; font: 400 .8rem var(--u-font); color: #fff; background: var(--u-pink); border-radius: 8px 0 0 8px; box-shadow: 0 3px 0 var(--u-pink-d);
}

/* ========================= חלונות נוספים ========================= */
.map-popup, .redeem-code-popup, .chat-history-popup, .mini-game-popup { animation: uFade .25s ease; }
@keyframes uFade { from { opacity: 0; } to { opacity: 1; } }
.map-content, .redeem-code-content, .chat-history-content, .mini-game-content { animation: uWindow .5s var(--u-ease) !important; }

/* ========================= רספונסיביות ========================= */
@media (max-width: 860px) {
    .wr-body { grid-template-columns: 1fr; grid-template-rows: auto minmax(0, 1fr); }
    .wr-stage { flex-direction: row; justify-content: center; padding: 10px; border-inline-end: 0; border-bottom: 4px solid var(--u-sky-100); }
    .wr-stage .character-preview { width: 110px; }
    .wr-stage__platform, .wr-stage__spot, .wr-stage__cloud { display: none; }
    .wr-sub { display: none; }
    .game-toolbar.chat-dock { width: calc(100vw - 24px) !important; }
}
@media (max-width: 640px) {
    .hud { transform: scale(.88); transform-origin: top left; }
    .action-rail { inset-inline-start: 6px; padding: 8px 6px; gap: 10px; }
    .action-rail .toolbar-btn-base { width: 50px !important; min-width: 50px !important; max-width: 50px !important; height: 50px !important; min-height: 50px !important; max-height: 50px !important; font-size: 24px !important; border-radius: 18px !important; }
    .action-rail .toolbar-btn-base::after { display: none !important; }
    .game-toolbar.chat-dock { bottom: 10px !important; }
}
@media (prefers-reduced-motion: reduce) {
    .hud, .action-rail .toolbar-btn-base, .game-toolbar.chat-dock, .wr, .sp, .wr-grid .item-card, .sp-grid .shop-item-card,
    .wr-stage .character-preview, .wr-title__icon, .sp-title__icon, .wr-stage__cloud, .wr-head::after, .sp-head::after { animation: none !important; }
}


/* =====================================================================
   סבב 2: תוויות בצד הנכון, כרטיס אחד בהובר, בלי ריצוד, לשוניות בלי פס גלילה,
   ומבנה חדש למפה, מימוש קוד, כרטיס שחקן וחדר החלפות
   ===================================================================== */

/* ---- תוויות פס הפעולות נפתחות לכיוון מרכז המסך (שמאלה), לא החוצה ---- */
.action-rail .toolbar-btn-base::after {
    inset: 50% 100% auto auto !important;      /* right: 100% */
    margin-left: 0; margin-right: 14px;
    transform: translate(8px, -50%) scale(.85) !important; transform-origin: right center;
}
.action-rail .toolbar-btn-base:hover::after, .action-rail .toolbar-btn-base:focus-visible::after { transform: translate(0, -50%) scale(1) !important; opacity: 1 !important; }
.action-rail .toolbar-btn-base:hover, .action-rail .toolbar-btn-base:focus-visible { transform: translateX(-8px) scale(1.1) rotate(4deg) !important; }
@keyframes uRailIn { from { opacity: 0; transform: translateX(40px) scale(.7); } to { opacity: 1; transform: none; } }

/* ---- כרטיסי פריט: יחידה אחת. כל הכרטיס גדל בהובר, בלי תיבה פנימית ובלי תמונה שגדלה לבד ---- */
.wr-grid .item-card, .sp-grid .shop-item-card { animation: none !important; }
.wardrobe-popup.is-entering .wr-grid .item-card, .shop-popup.is-entering .sp-grid .shop-item-card { animation: uCardIn .45s var(--u-ease) both !important; }
.wr-grid .item-card:hover, .sp-grid .shop-item-card:hover {
    transform: translateY(-6px) scale(1.07) !important; border-color: var(--u-sky-300) !important;
    box-shadow: 0 12px 0 var(--u-sky-300), 0 24px 28px rgba(11, 61, 145, .2) !important; z-index: 3;
}
.wr-grid .item-card:hover .item-image, .sp-grid .shop-item-card:hover .item-image { transform: none !important; }
.wr-grid .item-image, .sp-grid .item-image {
    background: none !important; padding: 0 !important; border-radius: 0 !important; box-shadow: none !important; border: 0 !important;
    height: 112px !important; object-fit: contain; image-rendering: auto; filter: drop-shadow(0 6px 6px rgba(11, 61, 145, .18));
}
.sp-grid .shop-item-card .item-image { height: 128px !important; }
/* תגיות/קונטיינרים ריקים לא יוצרים "קופסאות" קטנות */
.item-badges:not(:has(.item-badge)), .item-card > div:empty, .shop-item-card > div:empty { display: none !important; }
.wr-grid .item-card.equipped { background: #fffaf0 !important; }
.wr-grid .item-card.equipped:hover { box-shadow: 0 12px 0 var(--u-orange-d), 0 0 0 5px rgba(255, 154, 31, .25), 0 24px 28px rgba(11, 61, 145, .2) !important; }

/* ---- הדמות בארון: חדה ובגודל סביר ---- */
.wr-stage .character-preview { width: 230px; max-width: 70%; }
.wr-stage .character-preview canvas { width: 100% !important; height: auto !important; image-rendering: auto; }

/* ---- לשוניות: בלי פס גלילה, עם טשטוש בקצוות וגלילה בגלגלת/גרירה ---- */
.wr-tabs, .sp-tabs {
    scrollbar-width: none; -ms-overflow-style: none; scroll-behavior: smooth;
    -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 22px, #000 calc(100% - 22px), transparent 100%);
    mask-image: linear-gradient(90deg, transparent 0, #000 22px, #000 calc(100% - 22px), transparent 100%);
}
.wr-tabs::-webkit-scrollbar, .sp-tabs::-webkit-scrollbar { display: none; }
.wr-tabs .category-tab, .sp-tabs .category-tab { user-select: none; }

/* פס גלילה של הרשימות: דק ויפה */
.wr-grid::-webkit-scrollbar, .sp-grid::-webkit-scrollbar, .map-zones-list::-webkit-scrollbar, .trade-my-items-grid::-webkit-scrollbar { width: 10px; }
.wr-grid::-webkit-scrollbar-track, .sp-grid::-webkit-scrollbar-track, .map-zones-list::-webkit-scrollbar-track, .trade-my-items-grid::-webkit-scrollbar-track { background: transparent; }
.wr-grid::-webkit-scrollbar-thumb, .sp-grid::-webkit-scrollbar-thumb, .map-zones-list::-webkit-scrollbar-thumb, .trade-my-items-grid::-webkit-scrollbar-thumb {
    background: linear-gradient(180deg, var(--u-sky-300), var(--u-sky)); border-radius: 999px; border: 3px solid var(--u-sky-50);
}

/* ============================ כרטיס שחקן ============================ */
.player-card-popup { background: radial-gradient(circle at 50% 30%, rgba(46, 155, 255, .3), rgba(11, 40, 100, .65)) !important; backdrop-filter: blur(6px) !important; animation: uFade .25s ease; }
.player-card-content {
    position: relative; width: min(380px, 92vw) !important; height: auto !important; padding: 0 !important; overflow: visible !important;
    background: #fff !important; border: 5px solid #fff !important; border-radius: 36px !important;
    box-shadow: 0 12px 0 rgba(21, 101, 216, .4), 0 36px 70px rgba(11, 61, 145, .5) !important; animation: uWindow .5s var(--u-ease) !important;
}
.player-card-header {
    position: relative; height: 120px; border-radius: 30px 30px 0 0; overflow: hidden; background: linear-gradient(135deg, #5cbcff, var(--u-violet)) !important; border: 0 !important;
    display: flex; align-items: flex-start; justify-content: space-between; padding: 14px 16px !important;
}
.player-card-header::before, .player-card-header::after {
    content: ''; position: absolute; width: 120px; height: 58px; opacity: .55;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 100'%3E%3Cpath fill='%23fff' d='M40 92a30 30 0 0 1-4-59 40 40 0 0 1 74-12 36 36 0 0 1 56 26 28 28 0 0 1-6 45z'/%3E%3C/svg%3E") center / contain no-repeat;
}
.player-card-header::before { top: 30px; inset-inline-start: 10px; animation: uDrift 8s ease-in-out infinite alternate; }
.player-card-header::after { top: 6px; inset-inline-end: 70px; width: 80px; animation: uDrift 11s ease-in-out infinite alternate-reverse; }
.player-card-title { position: relative; z-index: 1; margin: 0 !important; font: 400 1.2rem var(--u-font) !important; color: #fff !important; text-shadow: 0 2px 0 rgba(30, 10, 100, .4); }
.player-card-close {
    position: relative; z-index: 2; width: 40px !important; height: 40px !important; border: 0 !important; border-radius: 14px !important; cursor: pointer;
    font: 400 1.5rem/1 var(--u-font) !important; color: #fff !important; background: linear-gradient(180deg, #ff9aa2, #ff4d57) !important; box-shadow: 0 4px 0 #c01f2b !important; transition: transform .2s var(--u-ease);
}
.player-card-close:hover { transform: rotate(90deg) scale(1.1); }
.player-card-body { display: flex; flex-direction: column; align-items: center; gap: 10px; padding: 0 22px 24px !important; background: transparent !important; }
.player-card-character-container {
    width: 150px; height: 150px; margin-top: -78px !important; flex-shrink: 0; position: relative; z-index: 3;
    border-radius: 50%; padding: 0 !important; background: #fff !important; border: 6px solid #fff !important; box-shadow: 0 8px 0 var(--u-sky-300), 0 16px 24px rgba(11, 61, 145, .28) !important;
    animation: uFloat 4.5s ease-in-out infinite;
}
.player-card-character-container canvas { width: 100% !important; height: 100% !important; display: block; border-radius: 50%; image-rendering: auto; }
.player-card-info { text-align: center; display: flex; flex-direction: column; align-items: center; gap: 8px; }
.player-card-name { font: 400 1.7rem/1.1 var(--u-font) !important; color: var(--u-ink) !important; text-shadow: none !important; }
.player-card-badges { display: flex; gap: 8px; flex-wrap: wrap; justify-content: center; }
.player-card-badge { padding: 4px 14px; border-radius: 999px; font: 400 .9rem var(--u-font); border: 2px solid transparent; }
.player-card-badge.admin { background: #ffe3ee; color: var(--u-pink-d); border-color: #ffb3d1; }
.player-card-badge.operator { background: #e3efff; color: var(--u-sky-d); border-color: #b4d4ff; }
.player-card-badge.premium { background: #efe8ff; color: var(--u-violet-d); border-color: var(--u-violet-300); }
.player-card-days { padding: 6px 16px; border-radius: 999px; background: var(--u-sky-50); border: 2px solid var(--u-sky-100); color: var(--u-soft) !important; font-weight: 600; }
.player-card-actions { width: 100%; display: flex; gap: 10px; margin-top: 6px; }
.player-card-btn {
    flex: 1; padding: 13px 10px !important; border: 0 !important; border-radius: 18px !important; cursor: pointer; font: 400 1.1rem var(--u-font) !important; color: #fff !important;
    background: linear-gradient(180deg, #ffd27a, var(--u-orange)) !important; box-shadow: 0 5px 0 var(--u-orange-d), inset 0 2px 0 rgba(255, 255, 255, .5) !important; text-shadow: 0 1px 0 rgba(120, 50, 0, .35);
    transition: transform .15s var(--u-ease), filter .2s !important;
}
.player-card-btn:hover { transform: translateY(-3px) scale(1.03); filter: brightness(1.06); }
.player-card-btn:active { transform: translateY(4px); box-shadow: none !important; }

/* ============================ המפה ============================ */
.map-content {
    width: min(760px, 94vw) !important; max-height: 90vh; display: flex; flex-direction: column; overflow: hidden;
    background: linear-gradient(180deg, #8fd6ff 0%, #d6f3ff 38%, #f3fbff 100%) !important; border: 5px solid #fff !important; border-radius: 38px !important;
    box-shadow: 0 12px 0 rgba(21, 101, 216, .4), 0 40px 80px rgba(11, 61, 145, .5) !important;
}
.map-header { position: relative; display: flex; align-items: center; justify-content: space-between; padding: 16px 24px !important; background: linear-gradient(180deg, #62c1ff, var(--u-sky)) !important; border: 0 !important; box-shadow: 0 5px 0 var(--u-sky-d); z-index: 2; }
.map-header h2 { margin: 0 !important; font: 400 1.7rem var(--u-font) !important; color: #fff !important; text-shadow: 0 3px 0 rgba(10, 50, 130, .45) !important; }
.map-close { width: 46px !important; height: 46px !important; border: 0 !important; border-radius: 16px !important; font: 400 1.9rem/1 var(--u-font) !important; color: #fff !important; background: linear-gradient(180deg, #ff9aa2, #ff4d57) !important; box-shadow: 0 5px 0 #c01f2b !important; cursor: pointer; transition: transform .2s var(--u-ease); }
.map-close:hover { transform: rotate(90deg) scale(1.1); }
.map-sub { margin: 14px 24px 0; text-align: center; color: var(--u-soft); font-weight: 600; }
.map-body { padding: 16px 20px 22px !important; overflow: hidden; display: flex; min-height: 0; }
.map-zones-list { width: 100%; max-height: 62vh; overflow-y: auto; display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 16px; padding: 6px 6px 10px; }
.map-zone-item {
    position: relative; display: flex; flex-direction: column; gap: 8px; padding: 0 0 14px !important; overflow: hidden; cursor: pointer;
    background: #fff !important; border: 3px solid #fff !important; border-radius: 26px !important; color: var(--u-ink) !important;
    box-shadow: 0 6px 0 var(--u-sky-300), 0 16px 24px rgba(11, 61, 145, .18) !important; transition: transform .22s var(--u-ease), box-shadow .22s !important;
    animation: uCardIn .45s var(--u-ease) both;
}
.map-zone-item::before { content: ''; display: block; height: 74px; background: linear-gradient(180deg, #7fd0ff, #c9f0ff 70%, #9be7b0 70%, #62d98d); }
.map-zone-item:nth-child(3n+2)::before { background: linear-gradient(180deg, #ffb27a, #ffe1b3 70%, #ffd27a 70%, #ffb84d); }
.map-zone-item:nth-child(3n)::before { background: linear-gradient(180deg, #b9a2ff, #e6dcff 70%, #a98aff 70%, #7c4dff); }
.map-zone-item:hover { transform: translateY(-6px) scale(1.04) rotate(-.8deg) !important; box-shadow: 0 12px 0 var(--u-sky-300), 0 24px 30px rgba(11, 61, 145, .22) !important; }
.map-zone-info { padding: 0 14px; display: flex; flex-direction: column; gap: 4px; }
.map-zone-name { font: 400 1.25rem var(--u-font) !important; color: var(--u-ink) !important; text-shadow: none !important; }
.map-zone-access { font-size: .85rem; font-weight: 700; color: var(--u-soft) !important; }
.map-zone-stats { padding: 0 14px; display: flex; gap: 8px; }
.map-zone-player-count, .map-zone-admin-count { padding: 3px 12px; border-radius: 999px; font-weight: 700; font-size: .9rem; background: var(--u-sky-50); border: 2px solid var(--u-sky-100); color: var(--u-sky-d); }
.map-zone-admin-count { background: #ffe3ee; border-color: #ffb3d1; color: var(--u-pink-d); }

/* ========================= מימוש קוד ========================= */
.redeem-code-content {
    position: relative; width: min(500px, 94vw) !important; height: auto !important; padding: 0 !important; overflow: hidden;
    background: #fff !important; border: 5px solid #fff !important; border-radius: 38px !important;
    box-shadow: 0 12px 0 rgba(194, 52, 122, .45), 0 40px 80px rgba(11, 61, 145, .5) !important;
}
.redeem-code-header { position: relative; display: flex; align-items: center; justify-content: space-between; padding: 18px 24px !important; background: linear-gradient(180deg, #ff8fc0, var(--u-pink)) !important; border: 0 !important; box-shadow: 0 5px 0 var(--u-pink-d); overflow: hidden; }
.redeem-code-header::after { content: '\1F381'; position: absolute; inset-inline-end: 80px; top: 50%; translate: 0 -50%; font-size: 46px; opacity: .3; animation: giftTilt 3s ease-in-out infinite; }
@keyframes giftTilt { 0%, 100% { transform: rotate(-12deg); } 50% { transform: rotate(12deg) scale(1.1); } }
.redeem-code-header h2 { margin: 0 !important; font: 400 1.6rem var(--u-font) !important; color: #fff !important; text-shadow: 0 3px 0 rgba(120, 10, 70, .4) !important; position: relative; z-index: 1; }
.redeem-code-close { width: 46px !important; height: 46px !important; border: 0 !important; border-radius: 16px !important; font: 400 1.9rem/1 var(--u-font) !important; color: #fff !important; background: linear-gradient(180deg, #ff9aa2, #ff4d57) !important; box-shadow: 0 5px 0 #c01f2b !important; cursor: pointer; position: relative; z-index: 1; }
.redeem-code-body { padding: 28px 26px 26px !important; background: #fff9fc; }
.redeem-code-input-container { display: flex; flex-direction: column; gap: 14px; }
.redeem-code-input {
    width: 100%; height: 66px; padding: 0 18px !important; text-align: center; letter-spacing: 6px; font: 400 1.5rem var(--u-font) !important; color: var(--u-ink) !important; text-transform: uppercase;
    background: #fff !important; border: 4px dashed #ffb3d1 !important; border-radius: 22px !important; box-shadow: none !important; transition: border-color .2s, box-shadow .2s, transform .2s;
}
.redeem-code-input::placeholder { letter-spacing: 0; font-size: 1.05rem; color: #c9a3b6; }
.redeem-code-input:focus { outline: none; border-style: solid !important; border-color: var(--u-pink) !important; box-shadow: 0 0 0 6px rgba(255, 95, 162, .18) !important; transform: scale(1.02); }
.redeem-code-submit { width: 100%; padding: 15px !important; font: 400 1.3rem var(--u-font) !important; color: #fff !important; border: 0 !important; border-radius: 20px !important; cursor: pointer;
    background: linear-gradient(180deg, #ff8fc0, var(--u-pink)) !important; box-shadow: 0 6px 0 var(--u-pink-d), inset 0 2px 0 rgba(255, 255, 255, .5) !important; text-shadow: 0 2px 0 rgba(120, 10, 70, .4); transition: transform .15s var(--u-ease) !important; }
.redeem-code-submit:hover { transform: translateY(-3px) scale(1.02) !important; }
.redeem-code-submit:active { transform: translateY(5px) !important; box-shadow: none !important; }
.redeem-code-info { margin-top: 16px; text-align: center; color: var(--u-soft); font-weight: 500; }
.redeem-code-info p { margin: 0; }

/* ========================= חדר החלפות ========================= */
.trade-room-popup { background: radial-gradient(circle at 50% 30%, rgba(255, 154, 31, .3), rgba(11, 40, 100, .7)) !important; backdrop-filter: blur(6px) !important; }
.trade-room-card {
    width: min(1040px, 96vw) !important; max-height: 94vh !important; overflow: auto !important; padding: 0 0 18px !important;
    background: #fff !important; border: 5px solid #fff !important; border-radius: 38px !important; color: var(--u-ink) !important;
    box-shadow: 0 12px 0 rgba(232, 101, 12, .45), 0 40px 80px rgba(11, 61, 145, .5) !important; animation: uWindow .55s var(--u-ease) !important;
    scrollbar-width: thin;
}
.trade-room-header { display: flex; align-items: center; justify-content: space-between; padding: 16px 24px !important; background: linear-gradient(180deg, #ffc65c, var(--u-orange)) !important; box-shadow: 0 5px 0 var(--u-orange-d); border: 0 !important; position: sticky; top: 0; z-index: 4; }
.trade-room-title { font: 400 1.7rem var(--u-font) !important; color: #fff !important; text-shadow: 0 3px 0 rgba(130, 60, 0, .45) !important; }
.trade-room-close { width: 46px !important; height: 46px !important; border: 0 !important; border-radius: 16px !important; font: 400 1.9rem/1 var(--u-font) !important; color: #fff !important; background: linear-gradient(180deg, #ff9aa2, #ff4d57) !important; box-shadow: 0 5px 0 #c01f2b !important; cursor: pointer; transition: transform .2s var(--u-ease); }
.trade-room-close:hover { transform: rotate(90deg) scale(1.1); }
.trade-room-status { margin: 16px 24px 0; padding: 10px 18px; border-radius: 999px; text-align: center; font-weight: 700; background: #fff4cf; border: 2px solid var(--u-yellow); color: #7a4300 !important; }
.trade-offers-layout { display: grid !important; grid-template-columns: 1fr 1fr; gap: 18px; padding: 18px 24px 0; }
.trade-offer-column { padding: 14px !important; border-radius: 26px !important; background: var(--u-sky-50) !important; border: 3px solid var(--u-sky-100) !important; box-shadow: 0 5px 0 var(--u-sky-100); }
.trade-offer-column.me { background: #fffaf0 !important; border-color: #ffe0b0 !important; box-shadow: 0 5px 0 #ffe0b0; }
.trade-offer-title { font: 400 1.15rem var(--u-font) !important; color: var(--u-ink) !important; text-align: center; margin-bottom: 10px; }
.trade-offer-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.trade-slot { aspect-ratio: 1; border-radius: 18px !important; background: #fff !important; border: 3px dashed var(--u-sky-300) !important; display: grid; place-items: center; transition: transform .2s var(--u-ease), border-color .2s; }
.trade-slot.has-item { border-style: solid !important; border-color: var(--u-orange) !important; animation: uCardIn .35s var(--u-ease); }
.trade-slot img { max-width: 80%; max-height: 80%; object-fit: contain; }
.trade-chat-section, .trade-my-items-section { margin: 18px 24px 0; padding: 14px; border-radius: 26px; background: var(--u-sky-50); border: 3px solid var(--u-sky-100); }
.trade-chat-sides { display: grid; grid-template-columns: 76px 1fr 76px; gap: 12px; align-items: end; }
.trade-chat-side { text-align: center; }
.trade-chat-avatar { width: 64px; height: 64px; object-fit: cover; object-position: top; border-radius: 50%; background: linear-gradient(180deg, #8fd6ff, #e3f5ff); border: 3px solid #fff; box-shadow: 0 4px 0 var(--u-sky-300); }
.trade-chat-name { font: 400 .85rem var(--u-font); color: var(--u-ink) !important; margin-top: 4px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.trade-chat-messages { min-height: 96px; max-height: 150px; overflow-y: auto; display: flex; flex-direction: column; gap: 6px; padding: 8px; border-radius: 18px; background: #fff; border: 2px solid var(--u-sky-100); scrollbar-width: thin; }
.trade-chat-bubble { max-width: 80%; padding: 6px 14px; border-radius: 16px; background: var(--u-sky-100); color: var(--u-ink) !important; font-weight: 500; animation: uCardIn .25s var(--u-ease); }
.trade-chat-input-row { display: flex; gap: 10px; margin-top: 12px; }
.trade-chat-input { flex: 1; height: 46px; padding: 0 16px !important; border: 3px solid var(--u-sky-100) !important; border-radius: 999px !important; background: #fff !important; color: var(--u-ink) !important; font: 500 1rem 'Rubik', sans-serif; }
.trade-chat-input:focus { outline: none; border-color: var(--u-sky) !important; box-shadow: 0 0 0 4px rgba(46, 155, 255, .2); }
.trade-chat-send-btn { padding: 0 22px; border: 0 !important; border-radius: 999px !important; cursor: pointer; font: 400 1rem var(--u-font) !important; color: #fff !important; background: linear-gradient(180deg, #6cc4ff, var(--u-sky)) !important; box-shadow: 0 4px 0 var(--u-sky-d) !important; }
.trade-inventory-title { font: 400 1.1rem var(--u-font) !important; color: var(--u-ink) !important; margin-bottom: 10px; }
.trade-category-tabs { display: flex; gap: 8px; overflow-x: auto; padding-bottom: 8px; scrollbar-width: none; }
.trade-category-tabs::-webkit-scrollbar { display: none; }
.trade-category-tab { flex-shrink: 0; padding: 7px 16px !important; border-radius: 999px !important; border: 3px solid var(--u-sky-100) !important; background: #fff !important; color: var(--u-sky-d) !important; font: 400 .95rem var(--u-font) !important; cursor: pointer; }
.trade-category-tab.active { background: linear-gradient(180deg, #ffc65c, var(--u-orange)) !important; border-color: var(--u-orange-d) !important; color: #5a2a00 !important; }
.trade-my-items-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(104px, 1fr)); gap: 12px; max-height: 220px; overflow-y: auto; padding: 4px 4px 8px; }
.trade-item-card { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 10px 8px !important; border-radius: 20px !important; background: #fff !important; border: 3px solid var(--u-sky-100) !important; color: var(--u-ink) !important; cursor: pointer; box-shadow: 0 5px 0 var(--u-sky-100); transition: transform .2s var(--u-ease), box-shadow .2s, border-color .2s; }
.trade-item-card:hover { transform: translateY(-5px) scale(1.05); border-color: var(--u-sky-300) !important; box-shadow: 0 10px 0 var(--u-sky-300); }
.trade-item-card-image { width: 70px; height: 70px; object-fit: contain; background: none !important; }
.trade-item-card-name { font: 400 .85rem/1.2 var(--u-font) !important; color: var(--u-ink) !important; text-align: center; }
.trade-accept-btn, .trade-cancel-btn { padding: 12px 26px; border: 0; border-radius: 18px; cursor: pointer; font: 400 1.1rem var(--u-font); }
.trade-room-card .trade-accept-btn { background: linear-gradient(180deg, #7cf0ae, var(--u-green)) !important; color: #063d1f !important; box-shadow: 0 5px 0 var(--u-green-d) !important; position: static; transform: none; width: auto; height: auto; font-size: 1.1rem; }
.trade-room-card .trade-cancel-btn { background: linear-gradient(180deg, #fff, #e3ecfa) !important; color: var(--u-ink) !important; box-shadow: 0 5px 0 #a9bcd9 !important; }
@media (max-width: 760px) { .trade-offers-layout { grid-template-columns: 1fr; } }
@keyframes uFloat { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-6px); } }
.map-zone-item::before { content: '' !important; display: block !important; height: 74px !important; position: static !important; width: auto !important; border-radius: 0 !important; opacity: 1 !important; inset: auto !important; }
.map-zone-item:nth-child(3n+2)::before { background: linear-gradient(180deg, #ffb27a, #ffe1b3 70%, #ffd27a 70%, #ffb84d) !important; }
.map-zone-item:nth-child(3n)::before { background: linear-gradient(180deg, #b9a2ff, #e6dcff 70%, #a98aff 70%, #7c4dff) !important; }
.map-zone-item:nth-child(3n+1)::before { background: linear-gradient(180deg, #7fd0ff, #c9f0ff 70%, #9be7b0 70%, #62d98d) !important; }
.map-zone-stats, .map-zone-info { background: none !important; border: 0 !important; box-shadow: none !important; }
.map-zone-player-count { background: var(--u-sky-50) !important; border: 2px solid var(--u-sky-100) !important; color: var(--u-sky-d) !important; box-shadow: none !important; }

/* ===== ביצועים: בלי טשטוש רקע ופילטרים כבדים מעל קנבס שמתעדכן כל הזמן ===== */
.wardrobe-popup, .shop-popup, .map-popup, .redeem-code-popup, .chat-history-popup, .mini-game-popup,
.player-card-popup, .trade-room-popup, .custom-popup, .custom-popup:not(.settings-popup) {
    backdrop-filter: none !important; -webkit-backdrop-filter: none !important;
    background: rgba(11, 40, 100, .72) !important;
}
.wr-grid .item-image, .sp-grid .item-image, .wr-stage .character-preview, .wr-stage .character-preview canvas { filter: none !important; }
.wr-tabs, .sp-tabs { -webkit-mask-image: none !important; mask-image: none !important; }
.wr-stage__cloud, .wr-head::after, .sp-head::after, .player-card-header::before, .player-card-header::after,
.wr-title__icon, .sp-title__icon, .wr-grid .item-card.equipped { animation: none !important; }
.hud, .action-rail, .game-toolbar.chat-dock { backdrop-filter: none !important; -webkit-backdrop-filter: none !important; }

/* תצוגת הדמות בארון: קנבס רחב כדי שפריטים שחורגים מהגוף (בלון, חרב) לא ייחתכו */
.wr-stage .character-preview { width: 330px !important; max-width: 96% !important; margin-bottom: -30px; }

/* ================= כרטיס שחקן - עיצוב נקי חדש ================= */
.player-card-content { width: min(360px, 92vw) !important; border-radius: 34px !important; border: 0 !important; box-shadow: 0 10px 0 rgba(21, 101, 216, .35), 0 34px 70px rgba(11, 61, 145, .5) !important; overflow: hidden !important; }
.player-card-header { height: 132px !important; padding: 0 !important; border-radius: 0 !important; justify-content: center !important; align-items: center !important;
    background: radial-gradient(circle at 20% 20%, rgba(255, 255, 255, .35), transparent 45%), linear-gradient(135deg, #3aa7ff 0%, #7c4dff 100%) !important; }
.player-card-header::before, .player-card-header::after { display: none !important; }
.player-card-title { position: absolute; top: 14px; inset-inline-start: 0; inset-inline-end: 0; text-align: center; font: 400 1rem var(--u-font) !important; letter-spacing: .5px; opacity: .95; }
.player-card-close { position: absolute !important; top: 10px; inset-inline-end: 12px; width: 36px !important; height: 36px !important; border-radius: 12px !important; font-size: 1.3rem !important; }
.player-card-body { padding: 0 24px 26px !important; gap: 12px !important; }
.player-card-character-container {
    width: 132px !important; height: 132px !important; margin-top: -66px !important; padding: 5px !important; border: 0 !important; border-radius: 50% !important;
    background: conic-gradient(from 200deg, #ffd93b, #ff9a1f, #ff5fa2, #7c4dff, #2e9bff, #ffd93b) !important; box-shadow: 0 10px 22px rgba(11, 61, 145, .35) !important; animation: none !important;
}
.player-card-character-container canvas { width: 100% !important; height: 100% !important; border-radius: 50% !important; border: 4px solid #fff; box-sizing: border-box; background: #e3f5ff; }
.player-card-name { font: 400 1.8rem/1.15 var(--u-font) !important; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.player-card-days { background: transparent !important; border: 0 !important; padding: 0 !important; color: var(--u-soft) !important; font-weight: 600; }
.player-card-actions { margin-top: 4px; }
.player-card-btn { padding: 14px 10px !important; font-size: 1.15rem !important; }


/* =====================================================================
   סבב 3: קונספטים חדשים לגמרי
   היסטוריה = מגירת מסנג'ר | מיני משחק = מכונת ארקייד | החלפות = שולחן שוק | כרטיס שחקן = כרטיס אספנות
   ===================================================================== */

/* ---------- תיקוני ארון/חנות ---------- */
.wr-head::after, .sp-head::after { content: none !important; display: none !important; }   /* המלבן שליד ה-X */
.wr-sub { display: none; }
.wr-title__icon, .sp-title__icon { display: none; }
/* כל הלשוניות גלויות: עוטפות לשורות במקום גלילה */
.wr-tabs, .sp-tabs { flex-wrap: wrap !important; overflow: visible !important; row-gap: 10px; padding: 14px 20px 12px !important; }
/* אנימציית כניסה של כרטיסים: חוזרת בכל מעבר קטגוריה (לא בלבישה/קנייה) */
.wr-grid .item-card, .sp-grid .shop-item-card { animation: uCardIn .45s var(--u-ease) both !important; }
.wr-grid.no-anim .item-card, .sp-grid.no-anim .shop-item-card { animation: none !important; }
.wr-grid .item-card:nth-child(1), .sp-grid .shop-item-card:nth-child(1) { animation-delay: .0s !important; }
.wr-grid .item-card:nth-child(2), .sp-grid .shop-item-card:nth-child(2) { animation-delay: .04s !important; }
.wr-grid .item-card:nth-child(3), .sp-grid .shop-item-card:nth-child(3) { animation-delay: .08s !important; }
.wr-grid .item-card:nth-child(4), .sp-grid .shop-item-card:nth-child(4) { animation-delay: .12s !important; }
.wr-grid .item-card:nth-child(5), .sp-grid .shop-item-card:nth-child(5) { animation-delay: .16s !important; }
.wr-grid .item-card:nth-child(6), .sp-grid .shop-item-card:nth-child(6) { animation-delay: .2s !important; }
.wr-grid .item-card:nth-child(n+7), .sp-grid .shop-item-card:nth-child(n+7) { animation-delay: .24s !important; }
/* במה גדולה יותר */
.wr-body { grid-template-columns: 420px minmax(0, 1fr) !important; grid-template-rows: minmax(0, 1fr); }
.wr-stage .character-preview { width: 400px !important; max-width: 100% !important; margin-bottom: -48px !important; }
.wr-stage__platform { bottom: 70px !important; width: 270px !important; height: 52px !important; }
@media (max-width: 1000px) { .wr-body { grid-template-columns: 320px minmax(0, 1fr) !important; } .wr-stage .character-preview { width: 310px !important; } }
@media (max-width: 860px) { .wr-body { grid-template-columns: 1fr !important; grid-template-rows: auto minmax(0, 1fr) !important; } .wr-stage .character-preview { width: 150px !important; margin-bottom: 0 !important; } }

/* ============== היסטוריית צ'אט: מגירה צדדית ============== */
.chat-history-popup { display: flex; justify-content: flex-start; align-items: stretch; padding: 0 !important; background: rgba(11, 40, 100, .5) !important; animation: uFade .2s ease; }
.chat-history-popup.hidden { display: none !important; }
.ch-drawer {
    width: min(430px, 100vw); height: 100%; display: flex; flex-direction: column; background: #f3fbff; direction: rtl;
    border-radius: 0 40px 40px 0; box-shadow: 18px 0 60px rgba(11, 61, 145, .45); animation: uDrawer .45s var(--u-ease);
    position: relative; overflow: hidden;
}
@keyframes uDrawer { from { transform: translateX(-100%); } to { transform: none; } }
.ch-head {
    position: relative; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 26px 24px 22px; flex-shrink: 0; color: #fff;
    background: radial-gradient(circle at 85% -20%, rgba(255, 255, 255, .35), transparent 50%), linear-gradient(160deg, #2e9bff, #7c4dff);
}
.ch-head h2 { margin: 0; font: 400 1.7rem/1.1 var(--u-font); text-shadow: 0 3px 0 rgba(20, 20, 110, .35); }
.ch-head p { margin: 4px 0 0; opacity: .92; font-weight: 500; }
.ch-close { width: 44px; height: 44px; border: 0; border-radius: 50%; cursor: pointer; font: 400 1.8rem/1 var(--u-font); color: #fff; background: rgba(255, 255, 255, .22); transition: transform .2s var(--u-ease), background .2s; }
.ch-close:hover { transform: rotate(90deg); background: rgba(255, 77, 87, .9); }
.chat-history-list {
    flex: 1; min-height: 0; overflow-y: auto; display: flex; flex-direction: column; gap: 12px; padding: 20px 18px !important; background: transparent !important; border: 0 !important;
    scrollbar-width: thin; scrollbar-color: var(--u-sky-300) transparent;
}
.chat-history-item {
    position: relative; align-self: flex-start; max-width: 88%; padding: 10px 16px 8px !important; border-radius: 22px 22px 22px 6px !important;
    background: #fff !important; border: 0 !important; color: var(--u-ink) !important; box-shadow: 0 3px 0 var(--u-sky-100), 0 8px 14px rgba(11, 61, 145, .08) !important;
    animation: uMsg .35s var(--u-ease) both;
}
@keyframes uMsg { from { opacity: 0; transform: translateX(-24px) scale(.95); } to { opacity: 1; transform: none; } }
.chat-history-item.admin { background: linear-gradient(135deg, #efe8ff, #fff) !important; box-shadow: 0 3px 0 var(--u-violet-300), 0 8px 14px rgba(91, 43, 209, .12) !important; }
.chat-history-item.admin .history-username::after { content: 'צוות'; margin-inline-start: 8px; padding: 1px 9px; border-radius: 999px; font-size: .72rem; background: var(--u-violet); color: #fff; }
.history-username { font: 400 .98rem var(--u-font) !important; color: var(--u-sky-d) !important; }
.history-message { margin-top: 2px; font-weight: 500; line-height: 1.45; color: var(--u-ink) !important; overflow-wrap: anywhere; }
.history-time { margin-top: 4px; font-size: .74rem; color: #8aa0c4 !important; text-align: end; }
.ch-foot { padding: 14px 18px 20px; flex-shrink: 0; background: linear-gradient(180deg, transparent, #f3fbff 40%); }
.chat-history-refresh {
    width: 100%; padding: 14px; border: 0 !important; border-radius: 20px !important; cursor: pointer; font: 400 1.1rem var(--u-font) !important; color: #fff !important;
    background: linear-gradient(180deg, #6cc4ff, var(--u-sky)) !important; box-shadow: 0 5px 0 var(--u-sky-d) !important; transition: transform .15s var(--u-ease);
}
.chat-history-refresh:hover { transform: translateY(-2px); }
.chat-history-refresh:active { transform: translateY(4px); box-shadow: none !important; }

/* ============== מיני משחק: מכונת ארקייד ============== */
.mini-game-popup { background: radial-gradient(circle at 50% 20%, rgba(124, 77, 255, .5), rgba(11, 40, 100, .8)) !important; }
.mg {
    width: min(920px, 96vw); max-height: 94vh; display: flex; flex-direction: column; overflow: hidden; border-radius: 44px;
    background: linear-gradient(180deg, #ff7ab8, #7c4dff 60%, #2e9bff); padding: 14px 14px 18px;
    box-shadow: 0 14px 0 #4a23b8, 0 44px 80px rgba(11, 61, 145, .55); animation: uWindow .55s var(--u-ease);
}
.mg-top { position: relative; display: flex; align-items: center; justify-content: center; padding: 10px 56px 16px; }
.mg-top h2 { margin: 0; font: 400 clamp(1.5rem, 4vw, 2.2rem) var(--u-font); color: #fff; letter-spacing: 1px; text-shadow: 0 4px 0 rgba(40, 10, 120, .55); }
.mg-marquee { position: absolute; inset: 0 8px auto; display: flex; justify-content: space-between; pointer-events: none; }
.mg-marquee i { width: 12px; height: 12px; border-radius: 50%; background: #ffd93b; box-shadow: 0 0 10px #ffd93b; animation: uBulb 1.2s infinite; }
.mg-marquee i:nth-child(even) { animation-delay: .6s; }
@keyframes uBulb { 0%, 100% { opacity: 1; } 50% { opacity: .25; } }
.mg-close { position: absolute; inset-inline-end: 6px; top: 6px; width: 44px; height: 44px; border: 0; border-radius: 50%; cursor: pointer; font: 400 1.8rem/1 var(--u-font); color: #fff; background: rgba(255, 255, 255, .22); transition: transform .2s var(--u-ease), background .2s; }
.mg-close:hover { transform: rotate(90deg); background: rgba(255, 77, 87, .9); }
.mg-intro, .mg-stage { background: #fff; border-radius: 32px; padding: 24px; overflow: auto; }
.mg-steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.mg-step { text-align: center; padding: 18px 12px; border-radius: 24px; background: var(--u-sky-50); border: 3px solid var(--u-sky-100); box-shadow: 0 5px 0 var(--u-sky-100); animation: uCardIn .5s var(--u-ease) both; }
.mg-step:nth-child(2) { animation-delay: .1s; border-color: #e1d6ff; box-shadow: 0 5px 0 #e1d6ff; } .mg-step:nth-child(3) { animation-delay: .2s; border-color: #ffe0b0; box-shadow: 0 5px 0 #ffe0b0; }
.mg-step b { display: grid; place-items: center; width: 54px; height: 54px; margin: 0 auto 8px; border-radius: 50%; font: 400 1.7rem var(--u-font); color: #fff; background: linear-gradient(180deg, #6cc4ff, var(--u-sky)); box-shadow: 0 4px 0 var(--u-sky-d); }
.mg-step:nth-child(2) b { background: linear-gradient(180deg, #a98aff, var(--u-violet)); box-shadow: 0 4px 0 var(--u-violet-d); } .mg-step:nth-child(3) b { background: linear-gradient(180deg, var(--u-orange-300), var(--u-orange)); box-shadow: 0 4px 0 var(--u-orange-d); }
.mg-step h3 { margin: 0 0 4px; font: 400 1.2rem var(--u-font); color: var(--u-ink); }
.mg-step p { margin: 0; color: var(--u-soft); font-weight: 500; }
.mg-facts { display: flex; justify-content: center; gap: 10px; flex-wrap: wrap; margin: 18px 0; }
.mg-facts span { padding: 7px 18px; border-radius: 999px; background: #fff4cf; border: 2px solid var(--u-yellow); color: #7a4300; font: 400 1rem var(--u-font); }
.mg-play { display: block; width: min(340px, 100%); margin: 0 auto; padding: 18px !important; border: 0 !important; border-radius: 26px !important; cursor: pointer; font: 400 1.6rem var(--u-font) !important; color: #5a2a00 !important;
    background: linear-gradient(180deg, var(--u-orange-300), var(--u-orange)) !important; box-shadow: 0 8px 0 var(--u-orange-d), inset 0 3px 0 rgba(255, 255, 255, .55) !important; animation: ctaPulse2 1.8s ease-in-out infinite; transition: transform .15s var(--u-ease); }
.mg-play:hover { transform: translateY(-3px) scale(1.04); }
.mg-play:active { transform: translateY(6px); box-shadow: none !important; }
@keyframes ctaPulse2 { 0%, 100% { filter: brightness(1); } 50% { filter: brightness(1.1); } }
.mg-stage { display: flex; flex-direction: column; gap: 14px; }
.mg-score { display: flex !important; gap: 12px; justify-content: center; background: none !important; padding: 0 !important; border: 0 !important; }
.mg-score__cell { min-width: 150px; padding: 8px 20px; border-radius: 22px; text-align: center; background: linear-gradient(180deg, #5b2bd1, #3a1a9a); box-shadow: 0 5px 0 #26107a; }
.mg-score__cell--time { background: linear-gradient(180deg, #ff7ab8, #c2347a); box-shadow: 0 5px 0 #86204f; }
.mg-score .mini-game-board-line { font: 400 .9rem var(--u-font) !important; color: rgba(255, 255, 255, .85) !important; background: none !important; }
.mg-score .mini-game-board-value { font: 400 2.2rem/1.1 var(--u-font) !important; color: #fff !important; background: none !important; text-shadow: 0 3px 0 rgba(0, 0, 0, .3); }
.mini-game-arena-wrap { display: flex; flex-direction: column; gap: 12px; }
.mini-game-arena { border-radius: 26px !important; border: 4px solid var(--u-sky-100) !important; background: radial-gradient(circle, var(--u-sky-100) 2px, transparent 2.5px) 0 0 / 28px 28px, linear-gradient(180deg, #f3fbff, #dff3ff) !important; box-shadow: inset 0 6px 14px rgba(21, 101, 216, .12) !important; }
.mini-game-controls { display: flex; gap: 12px; justify-content: center; }
.mini-game-btn { padding: 13px 28px !important; border: 0 !important; border-radius: 18px !important; cursor: pointer; font: 400 1.15rem var(--u-font) !important; transition: transform .15s var(--u-ease); }
.mini-game-btn.primary { color: #063d1f !important; background: linear-gradient(180deg, #7cf0ae, var(--u-green)) !important; box-shadow: 0 5px 0 var(--u-green-d) !important; }
.mini-game-btn.secondary { color: var(--u-ink) !important; background: linear-gradient(180deg, #fff, #e3ecfa) !important; box-shadow: 0 5px 0 #a9bcd9 !important; }
.mini-game-btn:disabled { opacity: .55; cursor: not-allowed; }
.mini-game-btn:not(:disabled):hover { transform: translateY(-2px) scale(1.03); }
@media (max-width: 640px) { .mg-steps { grid-template-columns: 1fr; } }

/* ============== חדר החלפות: שולחן שוק ============== */
.trade-room-card {
    display: grid !important; grid-template-columns: minmax(0, 1fr) 340px; grid-template-areas: "head head" "status status" "offers chat" "items chat" "actions actions";
    gap: 16px 18px; padding: 0 0 18px !important; max-height: 94vh;
    background: repeating-linear-gradient(135deg, #fffdf6 0 22px, #fff7e6 22px 44px) !important;
}
.trade-room-header { grid-area: head; }
.trade-room-status { grid-area: status; margin: 0 24px !important; }
.trade-offers-layout { grid-area: offers; padding: 0 0 0 0 !important; margin-inline-start: 24px; position: relative; gap: 22px !important; }
.trade-offers-layout::after {
    content: '\21C4'; position: absolute; left: 50%; top: 50%; translate: -50% -50%; width: 52px; height: 52px; display: grid; place-items: center; border-radius: 50%; z-index: 2;
    font: 400 1.7rem var(--u-font); color: #fff; background: linear-gradient(180deg, #7cf0ae, var(--u-green)); box-shadow: 0 5px 0 var(--u-green-d), 0 0 0 5px #fff; animation: uSwap 2.4s ease-in-out infinite;
}
@keyframes uSwap { 0%, 100% { transform: rotate(0); } 50% { transform: rotate(180deg); } }
.trade-offer-column {
    position: relative; padding: 38px 14px 14px !important; border-radius: 0 0 26px 26px !important; border: 3px solid var(--u-sky-100) !important; border-top: 0 !important;
    background: #fff !important; box-shadow: 0 6px 0 var(--u-sky-100) !important;
}
.trade-offer-column::before {   /* גגון הדוכן */
    content: ''; position: absolute; inset: 0 -3px auto; height: 30px; border-radius: 20px 20px 0 0;
    background: repeating-linear-gradient(90deg, #ff5fa2 0 28px, #fff 28px 56px); box-shadow: 0 4px 0 rgba(0, 0, 0, .1);
}
.trade-offer-column.me::before { background: repeating-linear-gradient(90deg, var(--u-orange) 0 28px, #fff 28px 56px); }
.trade-offer-column.me { border-color: #ffe0b0 !important; box-shadow: 0 6px 0 #ffe0b0 !important; }
.trade-chat-section { grid-area: chat; margin: 0 24px 0 0 !important; display: flex; flex-direction: column; align-self: stretch; min-height: 0; }
.trade-chat-sides { display: flex !important; flex-direction: column-reverse; gap: 10px; flex: 1; min-height: 0; align-items: stretch !important; }
.trade-chat-side { display: flex; align-items: center; gap: 10px; text-align: start; }
.trade-chat-messages-wrap { flex: 1; min-height: 0; }
.trade-chat-messages { max-height: 280px !important; min-height: 160px !important; }
.trade-my-items-section { grid-area: items; margin: 0 0 0 0 !important; margin-inline-start: 24px !important; }
.trade-room-actions { grid-area: actions; display: flex; gap: 14px; justify-content: center; padding: 4px 24px 0; }
.trade-action-btn { padding: 15px 44px; border: 0; border-radius: 22px; cursor: pointer; font: 400 1.3rem var(--u-font); transition: transform .15s var(--u-ease); }
.trade-action-btn.accept { color: #063d1f; background: linear-gradient(180deg, #7cf0ae, var(--u-green)); box-shadow: 0 6px 0 var(--u-green-d), inset 0 2px 0 rgba(255, 255, 255, .5); }
.trade-action-btn.cancel { color: var(--u-ink); background: linear-gradient(180deg, #fff, #e3ecfa); box-shadow: 0 6px 0 #a9bcd9; }
.trade-action-btn:hover:not(:disabled) { transform: translateY(-3px) scale(1.03); }
.trade-action-btn:active { transform: translateY(5px); box-shadow: none; }
@media (max-width: 900px) {
    .trade-room-card { grid-template-columns: 1fr; grid-template-areas: "head" "status" "offers" "chat" "items" "actions"; }
    .trade-chat-section { margin: 0 24px !important; }
    .trade-offers-layout::after { display: none; }
}

/* ============== כרטיס שחקן: כרטיס אספנות עם דמות מלאה ============== */
.player-card-popup { background: radial-gradient(circle at 50% 35%, rgba(255, 217, 59, .28), rgba(11, 40, 100, .78)) !important; }
.pc.player-card-content {
    position: relative; width: min(350px, 92vw) !important; height: auto !important; padding: 18px 18px 20px !important; border: 0 !important; border-radius: 34px !important; overflow: hidden !important;
    display: flex; flex-direction: column; align-items: center; gap: 10px;
    background: linear-gradient(180deg, #7fd0ff 0%, #c9efff 52%, #fff8e0 100%) !important;
    box-shadow: 0 0 0 6px #fff, 0 0 0 11px #ffd93b, 0 22px 0 6px rgba(194, 120, 0, .5), 0 40px 80px rgba(11, 61, 145, .55) !important;
    animation: uCardFlip .65s var(--u-ease) !important; transform-style: preserve-3d;
}
@keyframes uCardFlip { from { opacity: 0; transform: perspective(900px) rotateY(-80deg) scale(.8); } to { opacity: 1; transform: none; } }
.pc-foil {   /* שכבת הולוגרמה זזה */
    position: absolute; inset: 0; pointer-events: none; z-index: 5; mix-blend-mode: soft-light; opacity: .75;
    background: linear-gradient(115deg, transparent 20%, rgba(255, 255, 255, .8) 38%, rgba(255, 150, 255, .5) 46%, rgba(120, 220, 255, .5) 54%, transparent 70%);
    background-size: 250% 100%; animation: uFoil 4.5s ease-in-out infinite;
}
@keyframes uFoil { 0% { background-position: 130% 0; } 100% { background-position: -80% 0; } }
.pc .player-card-close { position: absolute !important; top: 14px; inset-inline-end: 14px; z-index: 6; width: 38px !important; height: 38px !important; border-radius: 50% !important; }
.pc-top { width: 100%; display: flex; flex-direction: column; align-items: center; gap: 8px; padding-top: 4px; z-index: 2; }
.pc-label { padding: 5px 18px; border-radius: 999px; font: 400 .9rem var(--u-font); letter-spacing: 1px; color: #fff; background: linear-gradient(180deg, #a98aff, var(--u-violet)); box-shadow: 0 3px 0 var(--u-violet-d); }
.pc .player-card-badges { min-height: 0; }
.pc .player-card-character-container.pc-stage {
    position: relative; width: 100% !important; height: 330px !important; margin: 0 !important; padding: 0 !important; display: grid; place-items: end center;
    background: none !important; border: 0 !important; box-shadow: none !important; border-radius: 0 !important; animation: none !important;
}
.pc-spot { position: absolute; top: -10px; left: 50%; width: 220px; height: 100%; translate: -50% 0; background: linear-gradient(180deg, rgba(255, 255, 255, .85), transparent 80%); clip-path: polygon(38% 0, 62% 0, 100% 100%, 0 100%); opacity: .75; }
.pc-platform { position: absolute; bottom: 4px; left: 50%; translate: -50% 0; width: 230px; height: 40px; border-radius: 50%; background: radial-gradient(ellipse at 50% 40%, #fff, #b9e1ff 70%); box-shadow: 0 8px 0 #8cc4f3, 0 16px 20px rgba(11, 61, 145, .3); }
.pc .player-card-character-container canvas { position: relative; z-index: 2; width: 92% !important; height: auto !important; max-height: 100%; border: 0 !important; border-radius: 0 !important; background: none !important; margin-bottom: 8px; animation: uFloat 4s ease-in-out infinite; }
.pc-plate {
    position: relative; width: calc(100% + 8px); padding: 12px 18px 14px; z-index: 2; text-align: center;
    background: linear-gradient(180deg, #ff9a1f, #e8650c); border-radius: 18px; box-shadow: 0 6px 0 #b04a00, 0 14px 18px rgba(0, 0, 0, .2);
}
.pc-plate .player-card-name { font: 400 1.9rem/1.1 var(--u-font) !important; color: #fff !important; text-shadow: 0 3px 0 rgba(120, 40, 0, .5) !important; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pc-plate .player-card-days { margin-top: 4px; color: #ffe9c4 !important; font-weight: 600; background: none !important; border: 0 !important; padding: 0 !important; }
.pc .player-card-actions { width: 100%; z-index: 2; }
.pc .player-card-btn { width: 100%; }
/* מגירת ההיסטוריה נפתחת מצד ימין (התחלת הכיוון ב-RTL) */
.ch-drawer { border-radius: 40px 0 0 40px !important; box-shadow: -18px 0 60px rgba(11, 61, 145, .45) !important; }
@keyframes uDrawer { from { transform: translateX(100%); } to { transform: none; } }
.chat-history-item { border-radius: 22px 22px 6px 22px !important; align-self: flex-end !important; }
@keyframes uMsg { from { opacity: 0; transform: translateX(24px) scale(.95); } to { opacity: 1; transform: none; } }
.mg-intro { display: block !important; height: auto !important; max-height: none !important; }
.mg-intro .mini-game-instructions-content { display: none; }
.mg-steps { margin-bottom: 4px; }
.pc-plate { flex: 0 0 auto !important; height: auto !important; min-height: 0 !important; gap: 2px; }
.pc .player-card-name { padding: 0 !important; }
.pc .player-card-actions { flex: 0 0 auto; }
.pc .player-card-character-container.pc-stage { flex: 0 0 auto; }


/* =====================================================================
   סבב 4: כיכר החלפות מלאת מסך + איזור החלפות + כרטיס שחקן אינטראקטיבי
   ===================================================================== */

/* ---------------------- כיכר ההחלפות ---------------------- */
.trade-room-popup { padding: 0 !important; background: #8fd6ff !important; display: block !important; z-index: 2400; }
.trade-room-popup.hidden { display: none !important; }
.tz {
    position: relative; width: 100%; height: 100%; display: grid; grid-template-rows: auto minmax(0, 1fr) auto; overflow: hidden; direction: rtl;
    background: linear-gradient(180deg, #2e9bff 0%, #6cc4ff 34%, #bfe9ff 62%, #dff6ff 62.1%);
    animation: tzIn .5s var(--u-ease);
}
@keyframes tzIn { from { opacity: 0; transform: scale(1.04); } to { opacity: 1; transform: none; } }
.tz > *:not(.tz-sky) { position: relative; z-index: 2; }
.tz-sky { position: absolute !important; inset: 0; z-index: 0; overflow: hidden; pointer-events: none; }
.tz-cloud { position: absolute; width: 190px; height: 90px; opacity: .85; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 100'%3E%3Cpath fill='%23fff' d='M40 92a30 30 0 0 1-4-59 40 40 0 0 1 74-12 36 36 0 0 1 56 26 28 28 0 0 1-6 45z'/%3E%3C/svg%3E") center / contain no-repeat; animation: tzCloud 60s linear infinite; }
.tz-cloud--a { top: 12%; right: -200px; }
.tz-cloud--b { top: 30%; right: -200px; width: 130px; opacity: .6; animation-duration: 85s; animation-delay: -30s; }
.tz-cloud--c { top: 6%; right: -200px; width: 240px; opacity: .5; animation-duration: 110s; animation-delay: -60s; }
@keyframes tzCloud { to { transform: translateX(calc(-100vw - 420px)); } }
.tz-bunting { position: absolute; top: 0; left: 0; right: 0; display: flex; justify-content: space-around; height: 60px; padding-top: 4px; }
.tz-bunting::before { content: ''; position: absolute; top: 6px; left: 0; right: 0; height: 3px; background: rgba(255, 255, 255, .8); }
.tz-bunting i { width: 34px; height: 46px; margin-top: 6px; clip-path: polygon(0 0, 100% 0, 50% 100%); transform-origin: top center; animation: tzFlag 3s ease-in-out infinite; }
.tz-bunting i:nth-child(4n+1) { background: #ff5fa2; } .tz-bunting i:nth-child(4n+2) { background: #ffd93b; animation-delay: -.4s; } .tz-bunting i:nth-child(4n+3) { background: #3ddc84; animation-delay: -.8s; } .tz-bunting i:nth-child(4n) { background: #7c4dff; animation-delay: -1.2s; }
@keyframes tzFlag { 0%, 100% { transform: rotate(-4deg); } 50% { transform: rotate(4deg); } }
.tz-hills { position: absolute; left: -5%; right: -5%; bottom: 0; height: 40%; background:
    radial-gradient(ellipse 40% 100% at 18% 100%, #7fe39c 0 60%, transparent 61%),
    radial-gradient(ellipse 45% 85% at 78% 100%, #62d98d 0 60%, transparent 61%),
    linear-gradient(180deg, transparent 0, transparent 40%, #5fcf7f 40%); }

.tz-top { display: flex; align-items: center; gap: 18px; padding: 62px 26px 8px; }
.tz-title { display: flex; flex-direction: column; gap: 4px; align-items: flex-start; }
.tz-badge { padding: 4px 16px; border-radius: 999px; font: 400 .95rem var(--u-font); color: #5a2a00; background: linear-gradient(180deg, var(--u-orange-300), var(--u-orange)); box-shadow: 0 3px 0 var(--u-orange-d); }
.tz-title h2 { margin: 0; font: 400 clamp(1.5rem, 3.4vw, 2.4rem) var(--u-font); color: #fff; text-shadow: 0 4px 0 var(--u-sky-d), 0 10px 20px rgba(11, 61, 145, .35); }
.tz-status { margin-inline-start: auto !important; padding: 10px 22px !important; border-radius: 999px !important; background: #fff !important; border: 0 !important; color: var(--u-ink) !important; font-weight: 700 !important; box-shadow: 0 5px 0 rgba(21, 101, 216, .3) !important; }
.tz-close { position: static !important; width: 50px !important; height: 50px !important; flex-shrink: 0; }

.tz-arena { display: grid; grid-template-columns: minmax(180px, 1fr) minmax(300px, 1.35fr) minmax(180px, 1fr); gap: 14px; align-items: end; padding: 0 26px; min-height: 0; }
.tz-side { display: flex; flex-direction: column; align-items: center; gap: 8px; min-height: 0; }
.tz-seal {
    padding: 6px 20px; border-radius: 999px; font: 400 1rem var(--u-font); color: var(--u-soft); background: rgba(255, 255, 255, .85); border: 3px solid #fff;
    box-shadow: 0 4px 0 rgba(21, 101, 216, .22); transition: background .3s, color .3s, transform .3s var(--u-ease);
}
.tz-seal.is-ready { color: #063d1f; background: linear-gradient(180deg, #7cf0ae, var(--u-green)); transform: scale(1.12); animation: tzPop .5s var(--u-ease); }
.tz-seal.is-final { color: #5a2a00; background: linear-gradient(180deg, var(--u-orange-300), var(--u-orange)); transform: scale(1.18); }
@keyframes tzPop { 0% { transform: scale(.7); } 60% { transform: scale(1.25); } 100% { transform: scale(1.12); } }
.tz-stage { position: relative; width: min(100%, 300px); aspect-ratio: 1; display: grid; place-items: end center; }
.tz-glow { position: absolute; inset: 8% 8% 6%; border-radius: 50%; background: radial-gradient(circle, rgba(255, 255, 255, .85), transparent 68%); animation: tzGlow 3.4s ease-in-out infinite; }
@keyframes tzGlow { 0%, 100% { transform: scale(.9); opacity: .7; } 50% { transform: scale(1.06); opacity: 1; } }
.tz-char { position: relative; z-index: 2; width: 92%; height: auto; margin-bottom: 14px; animation: uFloat 4s ease-in-out infinite; transition: transform .4s var(--u-ease); }
.tz-side--partner .tz-char { transform: scaleX(1); }
.tz-pedestal { position: absolute; bottom: 0; left: 50%; translate: -50% 0; width: 78%; height: 40px; z-index: 1; border-radius: 50%; background: radial-gradient(ellipse at 50% 38%, #fff, #bfe3ff 72%); box-shadow: 0 8px 0 #8cc4f3, 0 16px 20px rgba(11, 61, 145, .3); }
.tz-nameplate { padding: 7px 24px; border-radius: 16px; background: linear-gradient(180deg, #fff, #e9f6ff); border: 3px solid #fff; box-shadow: 0 5px 0 rgba(21, 101, 216, .3); }
.tz-name { font: 400 1.25rem var(--u-font); color: var(--u-ink); display: block; max-width: 220px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tz-side--me .tz-nameplate { background: linear-gradient(180deg, #fff8e0, #ffe9b0); }

/* שולחן ההצעות */
.tz-table { position: relative; display: grid; grid-template-columns: 1fr 1fr; gap: 14px; align-self: center; padding: 18px; border-radius: 34px;
    background: linear-gradient(180deg, #d9a15d, #b97a3a); box-shadow: 0 10px 0 #8a5522, 0 26px 40px rgba(60, 30, 0, .35), inset 0 3px 0 rgba(255, 255, 255, .35); }
.tz-table::before { content: ''; position: absolute; inset: 8px; border-radius: 28px; border: 3px dashed rgba(255, 255, 255, .35); pointer-events: none; }
.tz .trade-offer-column { padding: 12px !important; border-radius: 24px !important; border: 0 !important; background: rgba(255, 255, 255, .9) !important; box-shadow: inset 0 4px 10px rgba(21, 101, 216, .15) !important; }
.tz .trade-offer-column::before { display: none !important; }
.tz .trade-offer-column.me { background: rgba(255, 250, 235, .95) !important; }
.tz .trade-offer-title { font: 400 1rem var(--u-font) !important; color: var(--u-ink) !important; text-align: center; margin-bottom: 8px; }
.tz .trade-offer-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.tz .trade-slot {
    position: relative; aspect-ratio: 1; display: grid; place-items: center; border-radius: 16px !important; font-size: 0 !important; color: transparent;
    background: var(--u-sky-50) !important; border: 3px dashed var(--u-sky-300) !important; transition: transform .2s var(--u-ease), border-color .2s;
}
.tz .trade-slot:not(.has-item)::after { content: '+'; font: 400 1.8rem var(--u-font); color: var(--u-sky-300); }
.tz .trade-slot.has-item { border: 3px solid var(--u-orange) !important; background: #fff !important; box-shadow: 0 4px 0 var(--u-orange-d); animation: tzDrop .55s var(--u-ease); }
.tz .trade-slot.has-item img { width: 82%; height: 82%; object-fit: contain; animation: uFloat 3s ease-in-out infinite; }
@keyframes tzDrop { 0% { transform: translateY(-40px) scale(.5); opacity: 0; } 70% { transform: translateY(4px) scale(1.1); opacity: 1; } 100% { transform: none; } }
.tz-orb { position: absolute; left: 50%; top: 50%; translate: -50% -50%; width: 66px; height: 66px; z-index: 5; display: grid; place-items: center; }
.tz-orb b { position: relative; z-index: 2; width: 54px; height: 54px; display: grid; place-items: center; border-radius: 50%; font: 400 1.8rem var(--u-font); color: #fff;
    background: linear-gradient(180deg, #6cc4ff, var(--u-sky)); box-shadow: 0 5px 0 var(--u-sky-d), 0 0 0 5px #fff; animation: uSwap 2.6s ease-in-out infinite; }
.tz-orb__ring { position: absolute; inset: -6px; border-radius: 50%; border: 3px solid rgba(255, 255, 255, .7); animation: tzRing 2.4s ease-out infinite; }
.tz-orb__ring--2 { animation-delay: 1.2s; }
@keyframes tzRing { from { transform: scale(.8); opacity: .9; } to { transform: scale(2.2); opacity: 0; } }
.tz[data-ready="both"] .tz-orb b { background: linear-gradient(180deg, #7cf0ae, var(--u-green)); box-shadow: 0 5px 0 var(--u-green-d), 0 0 0 5px #fff, 0 0 40px 10px rgba(61, 220, 132, .6); }
.tz[data-ready="both"] .tz-table { animation: tzGlowTable 1.2s ease-in-out infinite; }
@keyframes tzGlowTable { 0%, 100% { box-shadow: 0 10px 0 #8a5522, 0 26px 40px rgba(60, 30, 0, .35), 0 0 0 0 rgba(61, 220, 132, .0); } 50% { box-shadow: 0 10px 0 #8a5522, 0 26px 40px rgba(60, 30, 0, .35), 0 0 0 14px rgba(61, 220, 132, .35); } }

/* תחתית: תיק + שיחה + פעולות */
.tz-dock { display: grid; grid-template-columns: minmax(0, 1.7fr) minmax(0, 1fr) auto; gap: 16px; padding: 14px 24px 18px; background: #fff; border-radius: 34px 34px 0 0; box-shadow: 0 -10px 0 rgba(21, 101, 216, .18), 0 -20px 40px rgba(11, 61, 145, .2); }
.tz-dock .trade-inventory-title { margin: 0 0 8px !important; font: 400 1.05rem var(--u-font) !important; color: var(--u-ink) !important; }
.tz-dock .trade-inventory-title small { font: 500 .8rem 'Rubik', sans-serif; color: var(--u-soft); margin-inline-start: 6px; }
.tz-pack, .tz-talk { min-width: 0; display: flex; flex-direction: column; }
.tz .trade-category-tabs { display: flex; flex-wrap: wrap; gap: 6px; padding-bottom: 6px; overflow: visible !important; }
.tz .trade-category-tab { padding: 5px 14px !important; font-size: .88rem !important; }
.tz .trade-my-items-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(86px, 1fr)); gap: 10px; max-height: 148px !important; overflow-y: auto; padding: 4px; }
.tz .trade-item-card { padding: 8px 6px !important; border-radius: 18px !important; }
.tz .trade-item-card-image { width: 54px !important; height: 54px !important; }
.tz .trade-item-card.offered { border-color: var(--u-orange) !important; background: #fffaf0 !important; box-shadow: 0 5px 0 var(--u-orange-d) !important; opacity: .75; }
.tz .trade-item-card.non-swappable { opacity: .45; cursor: not-allowed; }
.tz .trade-chat-messages { flex: 1; min-height: 90px; max-height: 118px !important; overflow-y: auto; display: flex; flex-direction: column; gap: 6px; padding: 8px !important; border-radius: 18px; background: var(--u-sky-50) !important; border: 2px solid var(--u-sky-100) !important; }
.tz .trade-chat-bubble { padding: 5px 12px; border-radius: 14px; font-weight: 500; max-width: 90%; }
.tz .trade-chat-bubble.me { align-self: flex-start; background: #fff4cf; color: #5a3a00 !important; }
.tz .trade-chat-bubble.partner { align-self: flex-end; background: var(--u-sky-100); color: var(--u-ink) !important; }
.tz .trade-chat-bubble.system { align-self: center; background: transparent; color: var(--u-soft) !important; font-size: .85rem; text-align: center; }
.tz .trade-chat-input-row { display: flex; gap: 8px; margin-top: 8px; }
.tz .trade-chat-input { height: 42px !important; }
.tz-actions { display: flex; flex-direction: column; gap: 10px; justify-content: center; }
.tz .trade-action-btn { min-width: 190px; padding: 14px 20px; font-size: 1.15rem; }
.tz .trade-action-btn.accept.waiting { background: linear-gradient(180deg, var(--u-orange-300), var(--u-orange)); color: #5a2a00; box-shadow: 0 6px 0 var(--u-orange-d); animation: ctaPulse2 1.4s ease-in-out infinite; }
@media (max-width: 980px) {
    .tz { overflow-y: auto; grid-template-rows: auto auto auto; }
    .tz-arena { grid-template-columns: 1fr 1fr; }
    .tz-table { grid-column: 1 / -1; grid-row: 1; }
    .tz-dock { grid-template-columns: 1fr; }
    .tz-actions { flex-direction: row; }
}

/* ---------------------- איזור החלפות (הוב) ---------------------- */
.trade-hub-popup { position: fixed; inset: 0; z-index: 2300; display: grid; place-items: center; padding: 16px; background: rgba(11, 40, 100, .72); animation: uFade .2s ease; }
.trade-hub-popup.hidden { display: none !important; }
.th { position: relative; width: min(860px, 96vw); max-height: 92vh; display: flex; flex-direction: column; overflow: hidden; border-radius: 38px; border: 5px solid #fff;
    background: linear-gradient(180deg, #bfe9ff 0, #f3fbff 150px); box-shadow: 0 12px 0 rgba(21, 101, 216, .4), 0 40px 80px rgba(11, 61, 145, .5); animation: uWindow .5s var(--u-ease); }
.th-sky { position: absolute; inset: 0 0 auto; height: 170px; overflow: hidden; pointer-events: none; }
.th-sky .tz-cloud { animation-duration: 40s; }
.th-head { position: relative; display: flex; align-items: flex-start; justify-content: space-between; gap: 14px; padding: 22px 26px 12px; }
.th-head h2 { margin: 8px 0 4px; font: 400 clamp(1.5rem, 3.5vw, 2.2rem) var(--u-font); color: var(--u-ink); }
.th-head p { margin: 0; color: var(--u-soft); font-weight: 500; max-width: 52ch; }
.th-close { width: 46px; height: 46px; flex-shrink: 0; border: 0; border-radius: 16px; cursor: pointer; font: 400 1.9rem/1 var(--u-font); color: #fff; background: linear-gradient(180deg, #ff9aa2, #ff4d57); box-shadow: 0 5px 0 #c01f2b; transition: transform .2s var(--u-ease); }
.th-close:hover { transform: rotate(90deg) scale(1.1); }
.th-list { position: relative; flex: 1; min-height: 120px; overflow-y: auto; display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 14px; padding: 12px 26px 18px; scrollbar-width: thin; }
.th-card { display: flex; align-items: center; gap: 12px; padding: 12px; border-radius: 26px; background: #fff; border: 3px solid var(--u-sky-100); box-shadow: 0 6px 0 var(--u-sky-100); animation: uCardIn .45s var(--u-ease) both; transition: transform .2s var(--u-ease), box-shadow .2s, border-color .2s; }
.th-card:hover { transform: translateY(-5px) rotate(-.8deg); border-color: var(--u-sky-300); box-shadow: 0 11px 0 var(--u-sky-300); }
.th-card canvas { width: 76px; height: 76px; flex-shrink: 0; border-radius: 50%; border: 4px solid #fff; background: linear-gradient(180deg, #8fd6ff, #e3f5ff); box-shadow: 0 4px 0 var(--u-sky-300); }
.th-card__body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 6px; }
.th-card__name { font: 400 1.15rem var(--u-font); color: var(--u-ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.th-card__btn { padding: 8px 12px; border: 0; border-radius: 14px; cursor: pointer; font: 400 .95rem var(--u-font); color: #fff; background: linear-gradient(180deg, #7cf0ae, var(--u-green)); color: #063d1f; box-shadow: 0 4px 0 var(--u-green-d); transition: transform .15s var(--u-ease); }
.th-card__btn:hover { transform: translateY(-2px) scale(1.04); }
.th-card__btn:disabled { opacity: .6; cursor: default; transform: none; }
.th-empty { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 30px 26px; text-align: center; color: var(--u-soft); }
.th-empty b { font: 400 1.4rem var(--u-font); color: var(--u-ink); }
.th-empty.hidden { display: none; }
.th-tips { list-style: none; margin: 0; padding: 12px 26px 20px; display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 10px; background: #fff; border-top: 3px dashed var(--u-sky-100); }
.th-tips li { padding: 10px 14px; border-radius: 16px; background: var(--u-sky-50); color: var(--u-soft); font-weight: 500; }
.th-tips b { color: var(--u-sky-d); }
.action-rail .trade-zone-btn { --c1: #ffd27a; --c2: var(--u-orange); --edge: var(--u-orange-d); }

/* ---------------------- כרטיס שחקן: כרטיס אספנות חי ---------------------- */
.player-card-popup { background: radial-gradient(circle at 50% 38%, rgba(255, 217, 59, .35), rgba(11, 40, 100, .8)) !important; }
.pc.player-card-content {
    --rx: 0deg; --ry: 0deg; --mx: 50%;
    position: relative; width: min(390px, 94vw) !important; height: auto !important; padding: 24px 22px 20px !important; border: 0 !important; border-radius: 38px !important; overflow: hidden !important;
    display: flex; flex-direction: column; align-items: center; gap: 12px; isolation: isolate;
    background: transparent !important; box-shadow: 0 30px 70px rgba(11, 61, 145, .55), 0 0 0 0 transparent !important;
    transform: perspective(1000px) rotateX(var(--rx)) rotateY(var(--ry)); transition: transform .12s ease-out;
    animation: pcEnter .8s var(--u-ease) !important;
}
@keyframes pcEnter { 0% { opacity: 0; transform: perspective(1000px) rotateY(-90deg) scale(.6); } 60% { opacity: 1; transform: perspective(1000px) rotateY(12deg) scale(1.04); } 100% { transform: perspective(1000px) rotateY(0) scale(1); } }
.pc.player-card-content::before {     /* מסגרת קשת מסתובבת */
    content: ''; position: absolute; inset: -80%; z-index: -2;
    background: conic-gradient(from 0deg, #ff5fa2, #ffd93b, #3ddc84, #2e9bff, #7c4dff, #ff5fa2); animation: pcSpin 6s linear infinite;
}
.pc.player-card-content::after {      /* פנים הכרטיס */
    content: ''; position: absolute; inset: 7px; z-index: -1; border-radius: 32px;
    background: radial-gradient(circle at 50% 18%, #fff7d6, transparent 55%), linear-gradient(180deg, #62c1ff 0%, #b5e6ff 46%, #fff6e0 100%);
}
@keyframes pcSpin { to { transform: rotate(360deg); } }
.pc-foil { position: absolute; inset: 7px; border-radius: 32px; pointer-events: none; z-index: 6; mix-blend-mode: soft-light; opacity: .7;
    background: linear-gradient(115deg, transparent calc(var(--mx) - 28%), rgba(255, 255, 255, .85) calc(var(--mx) - 10%), rgba(255, 140, 255, .55) var(--mx), rgba(110, 230, 255, .55) calc(var(--mx) + 10%), transparent calc(var(--mx) + 30%)); }
.pc-shine { position: absolute; inset: 7px; border-radius: 32px; pointer-events: none; z-index: 5; background: linear-gradient(120deg, transparent 40%, rgba(255, 255, 255, .45) 50%, transparent 60%); background-size: 260% 100%; animation: uFoil 5s ease-in-out infinite; }
.pc .player-card-close { position: absolute !important; top: 16px; inset-inline-end: 16px; z-index: 8; width: 40px !important; height: 40px !important; border-radius: 50% !important; }
.pc-top { width: 100%; display: flex; flex-direction: column; align-items: center; gap: 8px; z-index: 3; }
.pc-rank { padding: 6px 20px; border-radius: 999px; font: 400 1rem var(--u-font); letter-spacing: .5px; color: #fff; background: linear-gradient(180deg, #a98aff, var(--u-violet)); box-shadow: 0 4px 0 var(--u-violet-d); animation: pcBob 3s ease-in-out infinite; }
@keyframes pcBob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-3px); } }
.pc .player-card-badges { display: flex; gap: 8px; flex-wrap: wrap; justify-content: center; min-height: 0; }
.pc .player-card-badge { padding: 4px 14px; border-radius: 999px; font: 400 .9rem var(--u-font); background: #fff; border: 2px solid var(--u-sky-100); box-shadow: 0 3px 0 rgba(21, 101, 216, .15); animation: tzPop .5s var(--u-ease) both; }
.pc .player-card-badge.admin { color: var(--u-pink-d); background: #ffe3ee; border-color: #ffb3d1; }
.pc .player-card-badge.operator { color: var(--u-sky-d); background: #e3efff; border-color: #b4d4ff; }
.pc .player-card-badge.premium { color: var(--u-violet-d); background: #efe8ff; border-color: var(--u-violet-300); }
.pc .player-card-character-container.pc-stage { position: relative; width: 100% !important; height: 320px !important; margin: 0 !important; padding: 0 !important; display: grid; place-items: end center; cursor: pointer; z-index: 3;
    background: none !important; border: 0 !important; border-radius: 0 !important; box-shadow: none !important; animation: none !important; }
.pc-ring { position: absolute; bottom: 0; left: 50%; translate: -50% 0; width: 270px; height: 270px; border-radius: 50%; border: 4px dashed rgba(255, 255, 255, .8); animation: pcSpin 18s linear infinite; opacity: .8; }
.pc-spot { position: absolute; top: -14px; left: 50%; width: 240px; height: 100%; translate: -50% 0; background: linear-gradient(180deg, rgba(255, 255, 255, .9), transparent 80%); clip-path: polygon(38% 0, 62% 0, 100% 100%, 0 100%); opacity: .7; }
.pc-platform { position: absolute; bottom: 2px; left: 50%; translate: -50% 0; width: 250px; height: 44px; border-radius: 50%; background: radial-gradient(ellipse at 50% 38%, #fff, #b9e1ff 72%); box-shadow: 0 9px 0 #8cc4f3, 0 18px 22px rgba(11, 61, 145, .3); }
.pc .player-card-character-container canvas { position: relative; z-index: 2; width: 94% !important; height: auto !important; max-height: 100%; border: 0 !important; border-radius: 0 !important; background: none !important; margin-bottom: 10px; animation: uFloat 4s ease-in-out infinite; transform-origin: 50% 90%; }
.pc-stage.is-jumping canvas { animation: pcJump .7s var(--u-ease); }
@keyframes pcJump { 0% { transform: translateY(0) scale(1, 1); } 25% { transform: translateY(0) scale(1.1, .88); } 55% { transform: translateY(-46px) scale(.92, 1.1) rotate(-4deg); } 80% { transform: translateY(0) scale(1.08, .92); } 100% { transform: none; } }
.pc-sparks { position: absolute; inset: 0; z-index: 4; pointer-events: none; }
.pc-sparks i { position: absolute; width: 14px; height: 14px; background: #ffd93b; clip-path: polygon(50% 0, 62% 38%, 100% 50%, 62% 62%, 50% 100%, 38% 62%, 0 50%, 38% 38%); animation: pcSpark .9s ease-out forwards; }
@keyframes pcSpark { from { transform: translate(0, 0) scale(.4) rotate(0); opacity: 1; } to { transform: translate(var(--dx), var(--dy)) scale(1.4) rotate(220deg); opacity: 0; } }
.pc-plate { position: relative; width: calc(100% + 6px); z-index: 3; padding: 12px 16px 12px; text-align: center; border-radius: 20px; flex: 0 0 auto;
    background: linear-gradient(180deg, #ff9a1f, #e8650c); box-shadow: 0 6px 0 #b04a00, 0 14px 18px rgba(0, 0, 0, .2); }
.pc .player-card-name { font: 400 2rem/1.1 var(--u-font) !important; color: #fff !important; text-shadow: 0 3px 0 rgba(120, 40, 0, .5) !important; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; padding: 0 !important; }
.pc-sub { display: flex; gap: 8px; justify-content: center; align-items: center; margin-top: 6px; flex-wrap: wrap; }
.pc-chip { padding: 3px 12px; border-radius: 999px; font: 400 .9rem var(--u-font); background: rgba(255, 255, 255, .92); color: #7a3a00; }
.pc-chip.hidden { display: none; }
.pc .player-card-days { color: #ffe9c4 !important; font-weight: 600; background: none !important; border: 0 !important; padding: 0 !important; }
.pc-stats { width: 100%; display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; z-index: 3; }
.pc-stat { padding: 8px 4px; text-align: center; border-radius: 18px; background: rgba(255, 255, 255, .88); box-shadow: 0 4px 0 rgba(21, 101, 216, .18); animation: uCardIn .5s var(--u-ease) both; }
.pc-stat:nth-child(2) { animation-delay: .08s; } .pc-stat:nth-child(3) { animation-delay: .16s; }
.pc-stat b { display: block; font: 400 1.6rem/1.1 var(--u-font); color: var(--u-sky-d); }
.pc-stat span { font-size: .78rem; font-weight: 700; color: var(--u-soft); }
.pc .player-card-actions { width: 100%; z-index: 3; margin: 0; }
.pc .player-card-btn { width: 100%; }
.pc-extra { width: 100%; display: flex; gap: 8px; z-index: 3; }
.pc-mini { flex: 1; padding: 9px 8px; border: 0; border-radius: 14px; cursor: pointer; font: 400 .95rem var(--u-font); color: var(--u-ink); background: rgba(255, 255, 255, .9); box-shadow: 0 4px 0 rgba(21, 101, 216, .22); transition: transform .15s var(--u-ease); }
.pc-mini:hover { transform: translateY(-2px) scale(1.04); }
.pc-mini:active { transform: translateY(3px); box-shadow: none; }
.pc-mini b { color: var(--u-pink-d); margin-inline-start: 4px; }
@media (max-width: 480px) { .pc .player-card-character-container.pc-stage { height: 250px !important; } }

/* קונפטי חגיגי בסיום החלפה */
.fx-confetti { position: fixed; top: -20px; z-index: 99999; width: 12px; height: 18px; border-radius: 3px; pointer-events: none; animation: fxFall linear forwards; }
@keyframes fxFall { to { transform: translate(var(--sx), 110vh) rotate(var(--rot)); opacity: .9; } }
/* כרטיס שחקן: נכנס גם למסכים נמוכים */
.pc .player-card-character-container.pc-stage { height: clamp(190px, 34vh, 320px) !important; }
.pc .player-card-name { font-size: clamp(1.5rem, 4.4vh, 2rem) !important; }
.pc.player-card-content { gap: 9px !important; padding-block: 18px 16px !important; }
.pc-ring { width: min(270px, 70%); height: auto; aspect-ratio: 1; }

/* ---------- הודעת עדכון גרסה ---------- */
.update-notice { position: fixed; top: 18px; left: 50%; translate: -50% 0; z-index: 100000; direction: rtl; animation: uNoticeIn .5s var(--u-ease); }
.update-notice.hidden { display: none; }
@keyframes uNoticeIn { from { opacity: 0; transform: translateY(-40px) scale(.9); } to { opacity: 1; transform: none; } }
.un-card { display: flex; align-items: center; gap: 16px; padding: 12px 26px 12px 14px; border-radius: 999px; background: #fff; border: 4px solid #fff;
    box-shadow: 0 6px 0 var(--u-orange-d), 0 22px 40px rgba(11, 61, 145, .4); }
.un-ring { width: 64px; height: 64px; border-radius: 50%; display: grid; place-items: center; flex-shrink: 0;
    background: conic-gradient(var(--u-orange) 0 100%); box-shadow: inset 0 0 0 6px #fff, 0 0 0 4px var(--u-orange-300); animation: unPulse 1s ease-in-out infinite; }
.un-ring b { font: 400 1.8rem var(--u-font); color: var(--u-orange-d); }
@keyframes unPulse { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.08); } }
.un-text h3 { margin: 0; font: 400 1.25rem var(--u-font); color: var(--u-ink); }
.un-text p { margin: 2px 0 0; color: var(--u-soft); font-weight: 600; max-width: 320px; }
.update-notice.is-now .un-ring { background: conic-gradient(var(--u-green) 0 100%); animation: none; }
.update-notice.is-now .un-ring b { color: var(--u-green-d); }

/* ===================== משחק הריצה בתלת מימד ===================== */
.mg--runner { width: min(980px, 96vw); }
.mg--runner .mg-intro { padding: 22px 26px 26px; text-align: center; }
.mg-lead { margin: 0 0 16px; font-size: 1.15rem; font-weight: 600; color: var(--u-ink); }
.mg-keys { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin-bottom: 14px; }
.mg-key { padding: 16px 12px; border-radius: 24px; background: var(--u-sky-50); border: 3px solid var(--u-sky-100); box-shadow: 0 5px 0 var(--u-sky-100); display: flex; flex-direction: column; gap: 10px; align-items: center; }
.mg-key:nth-child(2) { border-color: #e1d6ff; box-shadow: 0 5px 0 #e1d6ff; }
.mg-key:nth-child(3) { border-color: #ffe0b0; box-shadow: 0 5px 0 #ffe0b0; }
.mg-key b { font: 400 1.1rem var(--u-font); color: var(--u-ink); }
.keycap-row { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; justify-content: center; direction: ltr; }
.keycap-row em { font-style: normal; font-weight: 700; color: var(--u-soft); padding: 0 4px; }
kbd { min-width: 38px; height: 38px; padding: 0 10px; display: inline-grid; place-items: center; border-radius: 10px; font: 400 1.05rem var(--u-font); color: var(--u-ink);
    background: linear-gradient(180deg, #fff, #e3ecfa); border: 2px solid #b8c9e6; box-shadow: 0 4px 0 #a9bcd9; }

.mg--runner .mg-stage { padding: 12px; display: flex; flex-direction: column; gap: 10px; background: #fff; border-radius: 32px; }
.rn-hud { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; }
.rn-pill { display: inline-flex; align-items: center; gap: 8px; padding: 6px 18px; border-radius: 999px; font: 400 1.25rem var(--u-font); color: #fff; box-shadow: 0 4px 0 rgba(0, 0, 0, .18); }
.rn-pill--lives { background: linear-gradient(180deg, #ff8fb0, var(--u-pink)); text-shadow: 0 2px 0 rgba(120, 10, 70, .35); }
.rn-lives { letter-spacing: 3px; font-size: 1.3rem; }
.rn-pill--coins { background: linear-gradient(180deg, #ffd35e, #ff9a1f); color: #5a2a00; }
.rn-pill--dist { background: linear-gradient(180deg, #6cc4ff, var(--u-sky)); text-shadow: 0 2px 0 rgba(10, 50, 130, .4); }
.rn-pill b { font-weight: 400; }
.rn-coin-dot { width: 20px; height: 20px; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #fff6b8, #ffd93b 55%, #d98a00); border: 2px solid #d98a00; box-sizing: border-box; }
.rn-view { position: relative; width: 100%; aspect-ratio: 16 / 9; max-height: 58vh; border-radius: 26px; overflow: hidden; background: #8fd6ff; border: 4px solid var(--u-sky-100); outline: none; }
.rn-canvas { display: block; width: 100%; height: 100%; touch-action: none; }
.rn-loading { position: absolute; inset: 0; z-index: 3; display: grid; place-content: center; justify-items: center; gap: 10px; background: linear-gradient(180deg, #6cc4ff, #cdeeff); color: #fff; font: 400 1.3rem var(--u-font); }
.rn-loading.hidden { display: none; }
.rn-spinner { width: 46px; height: 46px; border-radius: 50%; border: 6px solid rgba(255, 255, 255, .4); border-top-color: #fff; animation: rnSpin .8s linear infinite; }
@keyframes rnSpin { to { transform: rotate(360deg); } }
.rn-center { position: absolute; inset: 0; z-index: 2; display: grid; place-items: center; pointer-events: none; font: 400 clamp(3rem, 12vw, 6rem) var(--u-font); color: #fff;
    text-shadow: 0 6px 0 var(--u-sky-d), 0 14px 30px rgba(11, 61, 145, .45); }
.rn-center[hidden] { display: none; }
.rn-pop { animation: rnPop .7s var(--u-ease); }
@keyframes rnPop { 0% { transform: scale(2.2); opacity: 0; } 40% { transform: scale(.9); opacity: 1; } 100% { transform: scale(1); opacity: 1; } }
.rn-result { position: absolute; inset: 0; z-index: 4; display: grid; place-content: center; justify-items: center; gap: 14px; background: rgba(11, 40, 100, .62); color: #fff; text-align: center; animation: uFade .25s ease; }
.rn-result.hidden { display: none; }
.rn-result h3 { margin: 0; font: 400 clamp(1.8rem, 5vw, 2.6rem) var(--u-font); text-shadow: 0 4px 0 rgba(10, 40, 120, .5); }
.rn-result__grid { display: flex; gap: 12px; flex-wrap: wrap; justify-content: center; }
.rn-result__grid > div { min-width: 120px; padding: 12px 16px; border-radius: 22px; background: #fff; color: var(--u-ink); box-shadow: 0 5px 0 rgba(0, 0, 0, .2); animation: uCardIn .5s var(--u-ease) both; }
.rn-result__grid > div:nth-child(2) { animation-delay: .1s; } .rn-result__grid > div:nth-child(3) { animation-delay: .2s; }
.rn-result__grid b { display: block; font: 400 2rem/1.1 var(--u-font); }
.rn-result__grid span { font-weight: 700; font-size: .85rem; color: var(--u-soft); }
.rn-res-award { background: linear-gradient(180deg, #ffe27a, #ffb12e) !important; }
.rn-res-award b { color: #7a3a00; }
@media (max-width: 700px) { .mg-keys { grid-template-columns: 1fr; } .rn-view { aspect-ratio: 4 / 3; } }
.mini-game-popup .mg-intro.hidden, .mini-game-popup .mg-stage.hidden { display: none !important; }
.mg--runner .mg-stage { display: flex !important; }
.mg--runner .mg-stage.hidden { display: none !important; }