/* ============================================================
   Полка с дисками — интерфейс коллекции игр
   ============================================================ */
#shelf { position: fixed; inset: 0; z-index: 42; display: grid; place-items: center; background: rgba(1, 4, 14, .66); backdrop-filter: blur(3px); }
#shelf[hidden] { display: none; }
#shelf.in { animation: shFade .25s ease-out both; }
#shelf.out { animation: shFade .25s ease-in reverse both; }
@keyframes shFade { from { opacity: 0; } }
#shelf .shIn {
  position: relative; width: min(1180px, calc(100vw - 32px)); height: min(740px, calc(100vh - 32px));
  display: grid; grid-template-columns: 300px 1fr; overflow: hidden; border-radius: 18px; border: 2px solid #fff;
  background:
    radial-gradient(120% 90% at 100% 0%, rgba(88, 240, 255, .07), transparent 55%),
    radial-gradient(100% 80% at 0% 100%, rgba(255, 91, 214, .07), transparent 60%),
    linear-gradient(180deg, rgba(18, 30, 78, .98), rgba(6, 11, 34, .98));
  box-shadow: -3px 2px 0 rgba(88,240,255,.75), 3px 3px 0 rgba(255,91,214,.65), 0 30px 90px rgba(0,0,0,.7);
}
#shelf.in .shIn { animation: shPop .34s cubic-bezier(.2, 1.3, .4, 1) both; }
@keyframes shPop { from { transform: scale(.95) translateY(10px); opacity: 0; } }

/* левая колонка: заголовок, текст Y, жанры-разделители */
.shSide { display: flex; flex-direction: column; min-height: 0; padding: 26px 18px 18px 24px; border-right: 1px solid rgba(90, 115, 190, .35);
  background: linear-gradient(90deg, rgba(4, 8, 26, .35), transparent); }
#shelfTitle { margin: 0; font: italic 900 30px/1.05 'Exo 2', 'ZH Sans', 'HE Sans'; color: #fff; text-shadow: -2px 1px 0 rgba(88,240,255,.75), 2px 2px 0 rgba(255,91,214,.65); }
.shDone { margin: 8px 0 0; font: 8px/1.4 'Pixel', 'ZH Pixel', 'HE Pixel'; color: #ffd84d; letter-spacing: .04em; }
.shText { margin: 14px 0 16px; font: 400 13.5px/1.55 'Exo 2', 'ZH Sans', 'HE Sans'; color: #aab8e2; }
#shelf .shIn { overflow: clip; }
.shGenres { display: flex; flex-direction: column; gap: 5px; overflow-y: auto; min-height: 0; margin-right: -8px; padding-right: 8px; scrollbar-width: thin; scrollbar-color: #2a3a78 transparent; }
.shGenres button { position: relative; display: grid; grid-template-columns: 26px 1fr auto; align-items: center; gap: 11px; text-align: start;
  padding: 8px 10px 8px 12px; border-radius: 10px; border: 1px solid transparent; color: #b6c2ea; background: transparent; transition: background .15s, color .15s; }
.shGenres button::before { content: ''; position: absolute; left: 0; top: 9px; bottom: 9px; width: 3px; border-radius: 2px; background: var(--c); opacity: .35; transition: opacity .15s, box-shadow .15s; }
.shGenres .em { width: 22px; height: 22px; fill: none; stroke: var(--c); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; opacity: .85; }
.shGenres .nm { font: 600 13.5px/1.25 'Exo 2', 'ZH Sans', 'HE Sans'; }
.shGenres .ct { font: 7px/1 'Pixel', 'ZH Pixel', 'HE Pixel'; color: #6f7cae; padding: 5px 6px; border-radius: 6px; background: rgba(10, 20, 58, .7); }
.shGenres button:hover { background: rgba(255, 255, 255, .04); color: #fff; }
.shGenres button.on { background: linear-gradient(90deg, color-mix(in srgb, var(--c) 22%, transparent), transparent 85%); color: #fff; border-color: color-mix(in srgb, var(--c) 45%, transparent); }
.shGenres button.on::before { opacity: 1; box-shadow: 0 0 10px var(--c); }
.shGenres button.on .em { opacity: 1; filter: drop-shadow(0 0 4px var(--c)); }
.shGenres button.on .ct { color: #fff; background: color-mix(in srgb, var(--c) 40%, #0a143a); }
.shGenres button:focus-visible { outline: 2px solid #58f0ff; outline-offset: 1px; }

/* правая часть: текущий жанр, поиск, коробки */
.shMain { display: flex; flex-direction: column; min-width: 0; min-height: 0; }
.shHead { display: flex; align-items: center; gap: 16px; padding: 22px 24px 16px 28px; }
.shNow { flex: 1; min-width: 0; display: flex; align-items: center; gap: 12px; }
.shNow .em { flex: none; width: 34px; height: 34px; fill: none; stroke: var(--c); stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; filter: drop-shadow(0 0 6px var(--c)); }
.shNow b { font: italic 800 21px/1.15 'Exo 2', 'ZH Sans', 'HE Sans'; color: #fff; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.shNow span { flex: none; font: 7px/1 'Pixel', 'ZH Pixel', 'HE Pixel'; color: #8e9ccc; }
.shFind input { width: 190px; height: 34px; padding: 0 12px; border-radius: 9px; border: 1px solid rgba(90, 115, 190, .55); background: rgba(4, 9, 30, .7);
  color: #fff; font: 500 14px/1 'Exo 2', 'ZH Sans', 'HE Sans'; outline: none; transition: border-color .15s, box-shadow .15s; }
.shFind input::placeholder { color: #5f6d9c; }
.shFind input:focus { border-color: #58f0ff; box-shadow: 0 0 0 3px rgba(88, 240, 255, .15); }
.shClose { flex: none; font: 8px/1 'Pixel', 'ZH Pixel', 'HE Pixel'; color: #8e9ccc; padding: 10px 4px 10px 8px; }
.shClose:hover, .shClose:focus-visible { color: #fff; outline: none; }
.shGrid { flex: 1; min-height: 0; overflow-y: auto; display: grid; grid-template-columns: repeat(auto-fill, minmax(148px, 1fr)); align-content: start;
  gap: 26px 22px; padding: 10px 44px 34px 28px; scrollbar-width: thin; scrollbar-color: #2a3a78 transparent;
  -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 12px, #000 calc(100% - 34px), transparent); mask-image: linear-gradient(180deg, transparent 0, #000 12px, #000 calc(100% - 34px), transparent); }
.shNone { grid-column: 1 / -1; font: 500 15px/1.5 'Exo 2', 'ZH Sans', 'HE Sans'; color: #6f7cae; }

/* коробка с диском (jewel case) */
.cd { position: relative; aspect-ratio: 142 / 125; outline: none; cursor: default; }
.shGrid.anim .cd { animation: cdIn .42s cubic-bezier(.2, 1.25, .4, 1) both; animation-delay: var(--d); }
@keyframes cdIn { from { opacity: 0; transform: translateY(16px) scale(.97); } }
.cd .disc { position: absolute; top: 5%; right: 4%; width: 86%; aspect-ratio: 1; border-radius: 50%; transition: transform .45s cubic-bezier(.2, 1, .3, 1);
  background:   /* отверстие — настоящее (маска), вокруг него прозрачное кольцо-ступица и тонкий бортик, дальше — радужная запись */
    radial-gradient(circle, transparent 0 8.6%, rgba(255, 255, 255, .55) 8.6% 9.6%, rgba(205, 214, 232, .38) 9.6% 15.4%, rgba(120, 130, 150, .9) 15.4% 16.2%, #e6e9f1 16.2% 20.5%, rgba(150, 160, 180, .8) 20.5% 21.1%, transparent 21.1%),
    conic-gradient(from var(--a), #d9dde8, #9fe8ff, #f5b8ff, #fff4b0, #b5ffd8, #d9dde8, #a8b8ff, #ffc6e8, #d9dde8);
  -webkit-mask: radial-gradient(circle, transparent 0 8.6%, #000 9%); mask: radial-gradient(circle, transparent 0 8.6%, #000 9%);
  filter: drop-shadow(0 4px 10px rgba(0, 0, 0, .45));
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .5); }
.cd .case { position: absolute; inset: 0; border-radius: 4px; overflow: hidden; transition: transform .3s cubic-bezier(.2, 1.2, .4, 1), box-shadow .3s;
  box-shadow: 0 10px 22px rgba(0, 0, 0, .55), 0 0 0 1px rgba(255, 255, 255, .22) inset; background: #0b1030; }
.cd:hover .case, .cd:focus-visible .case { transform: translate(-10%, -4px) rotate(-1.5deg); box-shadow: 0 16px 30px rgba(0, 0, 0, .6), 0 0 0 1px rgba(255, 255, 255, .35) inset, 0 0 24px color-mix(in srgb, var(--c) 35%, transparent); }
.cd:hover, .cd:focus-visible { z-index: 3; }
.cd:hover .disc, .cd:focus-visible .disc { transform: translateX(54%) rotate(140deg); }   /* диск выезжает так, что видно отверстие */
.cd:focus-visible .case { outline: 2px solid #58f0ff; outline-offset: 2px; }
.cd .art { position: absolute; inset: 0; }
.cd .art::after { content: ''; position: absolute; inset: 0; background: radial-gradient(120% 100% at 30% 20%, transparent 40%, rgba(2, 4, 16, .55)), linear-gradient(180deg, transparent 45%, rgba(2, 4, 16, .78)); }
.cd .wm { position: absolute; right: -8%; bottom: 8%; width: 62%; height: 62%; fill: none; stroke: rgba(255, 255, 255, .2); stroke-width: 1.2; stroke-linecap: round; stroke-linejoin: round; transform: rotate(-8deg); }
.cd .lbl { position: absolute; left: 12%; top: 0; right: 0; padding: 6px 8px 5px; font: 6px/1 'Pixel', 'ZH Pixel', 'HE Pixel'; color: #fff; letter-spacing: .06em; text-transform: uppercase;
  background: rgba(2, 4, 16, .55); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cd .ttl { position: absolute; left: 14%; right: 8%; bottom: 9%; font: italic 800 14px/1.12 'Exo 2', 'ZH Sans', 'HE Sans'; color: #fff; text-shadow: 0 2px 6px rgba(0, 0, 0, .8), -1px 1px 0 rgba(88,240,255,.35);
  display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden; overflow-wrap: anywhere; }
.cd .hinge { position: absolute; left: 0; top: 0; bottom: 0; width: 11%; background: repeating-linear-gradient(90deg, rgba(255,255,255,.28) 0 1px, rgba(255,255,255,.06) 1px 3px), linear-gradient(90deg, rgba(10, 14, 36, .85), rgba(30, 38, 80, .6));
  box-shadow: 1px 0 0 rgba(255, 255, 255, .25); }
.cd .glare { position: absolute; inset: 0; background: linear-gradient(115deg, transparent 30%, rgba(255, 255, 255, .16) 38%, transparent 46%, transparent 70%, rgba(255, 255, 255, .06) 76%, transparent 84%); pointer-events: none; }

/* узоры обложек — выбираются по названию игры, цвет — от жанра */
.m-rays { background: repeating-conic-gradient(from var(--a) at var(--px) 115%, color-mix(in srgb, var(--c) 90%, #fff) 0 6deg, color-mix(in srgb, var(--c) 45%, #050818) 6deg 12deg); }
.m-grid { background:
    radial-gradient(circle at 50% 50%, color-mix(in srgb, var(--c) 80%, #fff) 0 17%, transparent 17.5%),
    linear-gradient(180deg, #070a24 0 30%, color-mix(in srgb, var(--c) 55%, #070a24) 52%, transparent 52%),
    repeating-linear-gradient(90deg, color-mix(in srgb, var(--c) 70%, #fff) 0 1px, transparent 1px 16px),
    repeating-linear-gradient(0deg, color-mix(in srgb, var(--c) 70%, #fff) 0 1px, transparent 1px 11px),
    #0a0c26; }
.m-rings { background: repeating-radial-gradient(circle at var(--px) var(--py), color-mix(in srgb, var(--c) 85%, #fff) 0 5px, color-mix(in srgb, var(--c) 40%, #050818) 5px 13px); }
.m-stripes { background: repeating-linear-gradient(var(--a), color-mix(in srgb, var(--c) 90%, #fff) 0 9px, color-mix(in srgb, var(--c) 50%, #050818) 9px 22px); }
.m-dots { background: radial-gradient(circle, rgba(255, 255, 255, .42) 1.3px, transparent 1.9px) 0 0 / 9px 9px, linear-gradient(var(--a), color-mix(in srgb, var(--c) 95%, #fff), color-mix(in srgb, var(--c) 35%, #050818)); }
.m-peaks { background:
    linear-gradient(135deg, color-mix(in srgb, var(--c) 35%, #050818) 25%, transparent 25%) -18px 60% / 36px 36px repeat-x,
    linear-gradient(225deg, color-mix(in srgb, var(--c) 35%, #050818) 25%, transparent 25%) -18px 60% / 36px 36px repeat-x,
    linear-gradient(180deg, color-mix(in srgb, var(--c) 95%, #fff) 0 58%, color-mix(in srgb, var(--c) 35%, #050818) 58%); }
.m-waves { background: repeating-radial-gradient(circle at 50% 135%, color-mix(in srgb, var(--c) 88%, #fff) 0 7px, color-mix(in srgb, var(--c) 45%, #050818) 7px 15px); }

@media (max-width: 820px) {
  #shelf .shIn { grid-template-columns: 1fr; grid-template-rows: auto 1fr; }
  .shSide { min-width: 0; border-right: 0; border-bottom: 1px solid rgba(90, 115, 190, .35); padding: 18px 16px 10px; }
  #shelf .shIn { grid-template-columns: minmax(0, 1fr); }
  .shText { display: none; }
  .shGenres { flex-direction: row; overflow-x: auto; overflow-y: hidden; }
  .shGenres button { flex: none; }
  .shFind input { width: 130px; }
}
@media (prefers-reduced-motion: reduce) {
  #shelf.in .shIn, .shGrid.anim .cd { animation: none; }
  .cd .disc, .cd .case { transition: none; }
}

/* ---------- иврит: полка справа налево ---------- */
[dir="rtl"] .shSide { padding: 26px 24px 18px 18px; border-right: 0; border-left: 1px solid rgba(90, 115, 190, .35); background: linear-gradient(270deg, rgba(4, 8, 26, .35), transparent); }
[dir="rtl"] .shGenres { margin-right: 0; padding-right: 0; margin-left: -8px; padding-left: 8px; }
[dir="rtl"] .shGenres button { padding: 8px 12px 8px 10px; }
[dir="rtl"] .shGenres button::before { left: auto; right: 0; }
@media (max-width: 820px) { [dir="rtl"] .shSide { border-left: 0; } }