/* Общие улучшения: темы, уведомления, аватарки, магазин и мобильная навигация. */
:root {
  --ui-bg: #f6f5fb;
  --ui-surface: #ffffff;
  --ui-surface-2: #f0eef9;
  --ui-text: #1d1b2d;
  --ui-muted: #6f6b82;
  --ui-border: rgba(43, 36, 82, .12);
  --ui-primary: #6f57ff;
  --ui-primary-2: #9b54ff;
  --ui-shadow: 0 22px 60px rgba(38, 31, 77, .14);
}

html[data-theme="dark"] {
  color-scheme: dark;
  --ui-bg: #0f1020;
  --ui-surface: #181a2d;
  --ui-surface-2: #20233a;
  --ui-text: #f5f5fb;
  --ui-muted: #b2b5c8;
  --ui-border: rgba(255, 255, 255, .11);
  --ui-primary: #8c76ff;
  --ui-primary-2: #c26cff;
  --ui-shadow: 0 24px 70px rgba(0, 0, 0, .34);
}

body { transition: background-color .25s ease, color .25s ease; }
html[data-theme="dark"] body { background: var(--ui-bg) !important; color: var(--ui-text) !important; }
html[data-theme="dark"] .section,
html[data-theme="dark"] .section-soft,
html[data-theme="dark"] .account-section,
html[data-theme="dark"] .shop-section,
html[data-theme="dark"] .game-center,
html[data-theme="dark"] .icf-main,
html[data-theme="dark"] .coin-content,
html[data-theme="dark"] .checkout-section { background: var(--ui-bg) !important; color: var(--ui-text) !important; }
html[data-theme="dark"] .card,
html[data-theme="dark"] .shop-product,
html[data-theme="dark"] .service-product,
html[data-theme="dark"] .shop-account-bar,
html[data-theme="dark"] .shop-assurance article,
html[data-theme="dark"] .checkout-card,
html[data-theme="dark"] .order-summary,
html[data-theme="dark"] .account-sidebar,
html[data-theme="dark"] .account-summary-card,
html[data-theme="dark"] .character-card,
html[data-theme="dark"] .details-card,
html[data-theme="dark"] .profile-data-board,
html[data-theme="dark"] .audio-panel,
html[data-theme="dark"] .settings-panel,
html[data-theme="dark"] .exchange-panel,
html[data-theme="dark"] .modal-card,
html[data-theme="dark"] .auth-dialog,
html[data-theme="dark"] .coin-game,
html[data-theme="dark"] .icf-game,
html[data-theme="dark"] .game-soon,
html[data-theme="dark"] .game-card-featured,
html[data-theme="dark"] .inventory-card {
  background: var(--ui-surface) !important;
  color: var(--ui-text) !important;
  border-color: var(--ui-border) !important;
  box-shadow: var(--ui-shadow) !important;
}
html[data-theme="dark"] h1,
html[data-theme="dark"] h2,
html[data-theme="dark"] h3,
html[data-theme="dark"] h4,
html[data-theme="dark"] strong,
html[data-theme="dark"] label,
html[data-theme="dark"] .subheading,
html[data-theme="dark"] .shop-product-copy h3,
html[data-theme="dark"] .service-product-main h3,
html[data-theme="dark"] .shop-product-footer strong,
html[data-theme="dark"] .service-product-buy strong { color: var(--ui-text) !important; }
html[data-theme="dark"] p,
html[data-theme="dark"] small,
html[data-theme="dark"] .lead,
html[data-theme="dark"] .muted,
html[data-theme="dark"] .shop-product-copy p,
html[data-theme="dark"] .service-product-main p,
html[data-theme="dark"] .details-row span,
html[data-theme="dark"] .profile-data-item span { color: var(--ui-muted) !important; }
html[data-theme="dark"] .input,
html[data-theme="dark"] input,
html[data-theme="dark"] textarea,
html[data-theme="dark"] select,
html[data-theme="dark"] .service-current,
html[data-theme="dark"] .auth-form-side,
html[data-theme="dark"] .auth-tabs-modern {
  background: var(--ui-surface-2) !important;
  color: var(--ui-text) !important;
  border-color: var(--ui-border) !important;
}
html[data-theme="dark"] .btn-light { background: var(--ui-surface-2) !important; color: var(--ui-text) !important; border-color: var(--ui-border) !important; }
html[data-theme="dark"] .shop-product-art { background: linear-gradient(145deg, #292c48, #1c1e34) !important; }
html[data-theme="dark"] .shop-product-art::before { background: rgba(255,255,255,.05) !important; }
html[data-theme="dark"] .profile-data-item { background: var(--ui-surface-2) !important; border-color: var(--ui-border) !important; }
html[data-theme="dark"] .site-footer { background: #090a15 !important; }

/* Форум в главной навигации */
.nav .nav-forum-link { color: #fff; background: linear-gradient(135deg, rgba(111,87,255,.28), rgba(239,45,50,.2)); }
.nav .nav-forum-link:hover { background: linear-gradient(135deg, rgba(111,87,255,.48), rgba(239,45,50,.34)); }

/* Кнопка смены темы */
.theme-toggle {
  position: fixed; left: 18px; bottom: calc(18px + env(safe-area-inset-bottom)); z-index: 220;
  width: 52px; height: 52px; border: 1px solid var(--ui-border); border-radius: 50%;
  display: grid; place-items: center; background: var(--ui-surface); color: var(--ui-text);
  box-shadow: 0 14px 38px rgba(26,21,58,.22); cursor: pointer;
  transition: transform .2s ease, box-shadow .2s ease, background .2s ease;
}
.theme-toggle:hover { transform: translateY(-3px) rotate(8deg); box-shadow: 0 18px 46px rgba(26,21,58,.28); }
.theme-toggle svg { width: 23px; height: 23px; }

/* Аватарки */
.has-user-avatar { background-size: cover !important; background-position: center !important; color: transparent !important; text-shadow: none !important; }
.avatar-settings-card { grid-column: 1 / -1; display: grid; grid-template-columns: 96px minmax(0,1fr); gap: 20px; align-items: center; padding: 18px; border: 1px solid var(--ui-border); border-radius: 20px; background: var(--ui-surface-2); }
.avatar-settings-preview { width: 88px; height: 88px; border-radius: 24px; display: grid; place-items: center; overflow: hidden; background: linear-gradient(135deg, var(--ui-primary), var(--ui-primary-2)); color: #fff; font-size: 1.8rem; font-weight: 900; background-size: cover; background-position: center; }
.avatar-settings-copy { min-width: 0; }
.avatar-settings-copy strong { display: block; font-size: 1.05rem; }
.avatar-settings-copy small { display: block; margin-top: 4px; color: var(--ui-muted); }
.avatar-settings-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 13px; }
.avatar-file-input { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.avatar-upload-label { cursor: pointer; }

/* Колокольчик и панель уведомлений */
.notification-center { position: relative; display: none; }
.notification-center.authenticated { display: block; }
.notification-trigger {
  position: relative; width: 46px; height: 46px; border: 1px solid rgba(255,255,255,.13); border-radius: 14px;
  display: grid; place-items: center; background: rgba(255,255,255,.07); color: #fff; cursor: pointer;
  transition: background .2s ease, transform .2s ease;
}
.notification-trigger:hover { background: rgba(255,255,255,.14); transform: translateY(-1px); }
.notification-trigger svg { width: 21px; height: 21px; }
.notification-badge {
  position: absolute; right: -5px; top: -5px; min-width: 20px; height: 20px; padding: 0 5px; border-radius: 999px;
  display: none; align-items: center; justify-content: center; background: #ff3651; color: #fff; border: 2px solid #151521;
  font-size: .68rem; font-weight: 900;
}
.notification-badge.visible { display: flex; }
.notification-panel {
  position: absolute; right: 0; top: calc(100% + 12px); width: min(390px, calc(100vw - 24px)); max-height: min(620px, calc(100dvh - 100px));
  display: none; overflow: hidden; border: 1px solid var(--ui-border); border-radius: 22px; background: var(--ui-surface); color: var(--ui-text);
  box-shadow: var(--ui-shadow);
}
.notification-panel.open { display: flex; flex-direction: column; animation: notifyIn .2s ease both; }
@keyframes notifyIn { from { opacity:0; transform:translateY(-8px) scale(.98) } to { opacity:1; transform:none } }
.notification-panel-head { display:flex; align-items:center; justify-content:space-between; gap:12px; padding:17px 18px; border-bottom:1px solid var(--ui-border); }
.notification-panel-head strong { font-size:1.02rem; }
.notification-read-all { border:0; background:transparent; color:var(--ui-primary); font-size:.8rem; font-weight:800; cursor:pointer; }
.notification-list { overflow:auto; padding:8px; }
.notification-item { display:grid; grid-template-columns:42px minmax(0,1fr); gap:11px; padding:12px; border-radius:16px; color:var(--ui-text); transition:background .18s ease; }
.notification-item:hover { background:var(--ui-surface-2); }
.notification-item.unread { background:rgba(111,87,255,.09); }
.notification-icon { width:42px; height:42px; border-radius:14px; display:grid; place-items:center; background:linear-gradient(135deg,rgba(111,87,255,.18),rgba(239,45,50,.12)); color:var(--ui-primary); font-weight:900; }
.notification-copy { min-width:0; }
.notification-copy strong { display:block; font-size:.9rem; line-height:1.25; }
.notification-copy p { margin:4px 0 0; color:var(--ui-muted); font-size:.8rem; line-height:1.4; overflow-wrap:anywhere; }
.notification-copy time { display:block; margin-top:6px; color:var(--ui-muted); font-size:.7rem; }
.notification-empty { padding:34px 18px; text-align:center; color:var(--ui-muted); }

/* Срок ожидания игры */
.game-expiry { display:inline-flex; align-items:center; gap:6px; margin-top:6px; color:#e04a62 !important; font-size:.76rem; font-weight:800; }
.game-expiry::before { content:"◷"; }

/* Магазин: одна категория за раз */
.shop-section-nav { position: sticky; top: 94px; z-index: 20; display:grid !important; grid-template-columns:repeat(3,minmax(0,1fr)); gap:10px; padding:10px; margin:22px 0 34px !important; border:1px solid var(--ui-border); border-radius:20px; background:color-mix(in srgb, var(--ui-surface) 92%, transparent); backdrop-filter:blur(16px); box-shadow:0 12px 34px rgba(37,30,78,.1); }
.shop-section-nav a { min-height:54px; display:flex; align-items:center; justify-content:center; padding:10px 14px !important; border-radius:14px !important; color:var(--ui-muted) !important; font-weight:900 !important; text-align:center; transition:.2s ease; }
.shop-section-nav a.active { background:linear-gradient(135deg,var(--ui-primary),var(--ui-primary-2)); color:#fff !important; box-shadow:0 12px 25px rgba(111,87,255,.25); }
.shop-category-section { display:none; opacity:0; transform:translateY(10px); }
.shop-category-section.active { display:block; animation:shopCategoryIn .3s ease forwards; }
@keyframes shopCategoryIn { to { opacity:1; transform:none } }
.shop-category-section + .shop-category-section { margin-top:0 !important; }
.shop-category-intro { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:14px; margin-bottom:24px; }
.shop-category-tile { border:1px solid var(--ui-border); border-radius:20px; padding:18px; background:var(--ui-surface); box-shadow:0 12px 32px rgba(37,30,78,.08); }
.shop-category-tile strong { display:block; }
.shop-category-tile span { display:block; margin-top:4px; color:var(--ui-muted); font-size:.84rem; }

/* Более стабильные переносы текста */
.shop-product h3,.service-product h3,.vip-card h3,.audio-track-title,.notification-copy,.profile-data-item strong { overflow-wrap:anywhere; word-break:normal; }
.audio-track { grid-template-columns:minmax(180px,1fr) minmax(220px,420px) 42px !important; align-items:center; }
.audio-track-info,.audio-track-copy { min-width:0; }
.audio-track-title { display:block; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.audio-track audio { width:100%; min-width:0; }

@media (max-width: 980px) {
  .shop-section-nav { top:78px; }
  .notification-panel { position:fixed; top:76px; right:12px; }
  .audio-track { grid-template-columns:minmax(0,1fr) 42px !important; }
  .audio-track audio { grid-column:1 / -1; }
}

@media (max-width: 720px) {
  .theme-toggle { width:48px; height:48px; left:12px; bottom:calc(12px + env(safe-area-inset-bottom)); }
  .notification-trigger { width:42px; height:42px; }
  .account-trigger-copy { display:none !important; }
  .account-trigger { padding:0 !important; width:42px !important; min-width:42px !important; justify-content:center !important; }
  .account-chevron { display:none !important; }
  .notification-panel { left:10px; right:10px; width:auto; top:74px; max-height:calc(100dvh - 84px); }
  .shop-section-nav { grid-template-columns:1fr; position:relative; top:auto; }
  .shop-section-nav a { min-height:48px; }
  .shop-category-intro { grid-template-columns:1fr; }
  .avatar-settings-card { grid-template-columns:72px minmax(0,1fr); padding:14px; }
  .avatar-settings-preview { width:68px; height:68px; border-radius:19px; }
  html[data-theme="dark"] .auth-modal { background:var(--ui-bg) !important; }
  html[data-theme="dark"] .auth-form-side { background:var(--ui-surface) !important; }
}

@media (prefers-reduced-motion: reduce) {
  .theme-toggle,.notification-panel,.shop-category-section { animation:none !important; transition:none !important; }
}

/* Живой статус игр на странице игрового центра */
.game-live-badge {
  width: fit-content; display: inline-flex; align-items: center; gap: 8px; margin-bottom: 12px;
  padding: 7px 11px; border: 1px solid rgba(111,87,255,.17); border-radius: 999px;
  background: rgba(111,87,255,.09); color: var(--ui-primary); font-size: .74rem; font-weight: 900;
}
.game-live-badge i { width: 7px; height: 7px; border-radius: 50%; background: #36c988; box-shadow: 0 0 0 5px rgba(54,201,136,.12); animation: gameLivePulse 1.6s ease-in-out infinite; }
@keyframes gameLivePulse { 50% { transform: scale(.72); opacity: .65; } }
.icf-game-expiry { margin: 0 18px 12px; }

/* Светлая тема тоже получает единые контрастные поверхности. */
html[data-theme="light"] body { background: var(--ui-bg); color: var(--ui-text); }
html[data-theme="light"] .card,
html[data-theme="light"] .shop-product,
html[data-theme="light"] .service-product,
html[data-theme="light"] .vip-card,
html[data-theme="light"] .coin-game,
html[data-theme="light"] .icf-game,
html[data-theme="light"] .game-card-featured { color: var(--ui-text); }

@media (max-width: 720px) {
  .game-live-badge { margin-bottom: 9px; }
  .icf-game-expiry { margin: 0 14px 10px; }
}

@media (prefers-reduced-motion: reduce) {
  .game-live-badge i { animation: none !important; }
}

/* Кейсы магазина */
.shop-section-nav { grid-template-columns: repeat(4,minmax(0,1fr)); }
.case-shop-grid { display:grid; grid-template-columns:minmax(0,920px); justify-content:center; }
.case-shop-card { display:grid; grid-template-columns:minmax(260px,.85fr) minmax(0,1.15fr); gap:30px; align-items:center; padding:30px; overflow:hidden; }
.case-shop-art { position:relative; min-height:330px; display:grid; place-items:center; border-radius:26px; background:radial-gradient(circle at 50% 40%,rgba(124,89,255,.22),transparent 55%),linear-gradient(145deg,#f4f0ff,#fff4f7); overflow:hidden; }
.case-shop-art img { position:relative; z-index:2; width:min(360px,88%); max-height:280px; object-fit:contain; filter:drop-shadow(0 24px 28px rgba(55,37,113,.24)); animation:caseFloat 4s ease-in-out infinite; }
.case-shop-glow { position:absolute; width:230px; height:230px; border-radius:50%; background:linear-gradient(135deg,rgba(111,87,255,.34),rgba(255,70,119,.25)); filter:blur(28px); animation:caseGlow 3s ease-in-out infinite; }
.case-shop-copy h3 { margin:8px 0 10px; font-size:clamp(1.55rem,3vw,2.25rem); }
.case-shop-copy p { color:var(--ui-muted); line-height:1.65; }
.case-rarity-preview { display:flex; flex-wrap:wrap; gap:8px; margin:18px 0 22px; }
.case-rarity-preview span { padding:7px 10px; border-radius:999px; font-size:.74rem; font-weight:900; }
.case-result-card { display:grid; justify-items:center; text-align:center; gap:12px; }
.case-result-image { width:min(300px,100%); height:230px; display:grid; place-items:center; border-radius:24px; background:linear-gradient(145deg,#f6f3ff,#fff7f9); border:2px solid var(--ui-border); }
.case-result-image img { width:90%; height:90%; object-fit:contain; filter:drop-shadow(0 18px 18px rgba(40,31,84,.18)); }
.case-result-card h3 { margin:0; font-size:1.35rem; }
.case-result-card p { margin:0 0 6px; color:var(--ui-muted); }
html[data-theme="dark"] .case-shop-card,html[data-theme="dark"] .case-result-image { background:var(--ui-surface)!important; border-color:var(--ui-border)!important; }
html[data-theme="dark"] .case-shop-art { background:radial-gradient(circle at 50% 40%,rgba(138,111,255,.24),transparent 55%),linear-gradient(145deg,#252840,#191b2e); }
@keyframes caseFloat { 0%,100%{transform:translateY(0) rotate(-2deg)} 50%{transform:translateY(-12px) rotate(2deg)} }
@keyframes caseGlow { 0%,100%{transform:scale(.92);opacity:.72} 50%{transform:scale(1.08);opacity:1} }

/* Постраничный инвентарь со свайпом */
.inventory-pager { display:flex; align-items:center; justify-content:center; gap:14px; margin-top:24px; }
.inventory-page-button { width:48px; height:48px; border:1px solid var(--ui-border); border-radius:16px; display:grid; place-items:center; background:var(--ui-surface); color:var(--ui-text); font-size:1.35rem; font-weight:900; cursor:pointer; box-shadow:0 10px 28px rgba(41,33,85,.1); transition:.2s ease; }
.inventory-page-button:hover:not(:disabled) { transform:translateY(-2px); border-color:var(--ui-primary); color:var(--ui-primary); }
.inventory-page-button:disabled { opacity:.35; cursor:not-allowed; }
.inventory-page-state { min-width:120px; text-align:center; color:var(--ui-muted); font-weight:850; }
.inventory-swipe-hint { display:none; margin-top:10px; text-align:center; color:var(--ui-muted); font-size:.76rem; }
.inventory-grid.is-changing { opacity:.45; transform:translateX(8px); transition:.16s ease; }

/* В Coin две стороны визуально различаются */
.coin-side-card[data-side="heads"] { background:linear-gradient(145deg,#f5f1ff,#ffffff); }
.coin-side-card[data-side="tails"] { background:linear-gradient(145deg,#fff4e8,#ffffff); }
.coin-side-card[data-side="heads"] strong { color:#5d48c9; }
.coin-side-card[data-side="tails"] strong { color:#b85f13; }
.coin-side-card .coin-side-explain { color:var(--ui-muted); font-size:.72rem; font-weight:750; text-align:center; }
.coin-side-card img { border-radius:50%; }
.coin-side-option input:checked + .coin-side-card[data-side="heads"] { border-color:#725dff; box-shadow:0 0 0 5px rgba(114,93,255,.12); }
.coin-side-option input:checked + .coin-side-card[data-side="tails"] { border-color:#f19a3e; box-shadow:0 0 0 5px rgba(241,154,62,.13); background:#fff8ef; }
.coin-side-pill::before { content:"ОРЁЛ"; font-size:.62rem; letter-spacing:.06em; }
.coin-side-pill.tails::before { content:"РЕШКА"; }

@media (max-width:760px){
  .shop-section-nav { grid-template-columns:1fr 1fr; }
  .case-shop-card { grid-template-columns:1fr; padding:18px; gap:18px; }
  .case-shop-art { min-height:240px; }
  .case-shop-art img { max-height:210px; }
  .inventory-swipe-hint { display:block; }
}
@media (max-width:440px){ .shop-section-nav{grid-template-columns:1fr;} }