/* trophies.css — 5.4: шкаф трофеев (trophies.js). Сцена витрины на главной и в профиле переключается на шкаф.
   Объём: двойная тонкая рамка, блики по краям, мягкая тень; ровная сетка (одинаковые подложки), тонкие полки со свечением,
   за шкафом — затемнение с размытием, края арта видны. Цвета — переменные .skin-wood (скинов больше нет, 5.4) */

/* плашка «Витрина N / M ⇄» / «🏆 Трофеи N ⇄» */
.tph-tg{ cursor:pointer; -webkit-tap-highlight-color:transparent; user-select:none; }
.tph-tg i{ font-style:normal; opacity:.6; margin-left:5px; font-size:11px; }
#main-tab .sc-label.tph-tg.is-tr, #profile-modal .pf-sc__label.tph-tg.is-tr{
  background:linear-gradient(180deg,#ffe37a,#e0a51c); color:#3a2600;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.7),0 0 0 1px rgba(120,70,0,.45),0 4px 10px rgba(0,0,0,.35); }
#profile-modal .pf-sc__stage.is-empty .pf-sc__label.tph-tg{ display:inline-flex; } /* 5.5: как у непустой (player-search.css) — inline-block ставил текст к верху плашки */

/* пока открыт шкаф — голуби витрины (и «+», замок, подсказка) скрыты; доход идёт как обычно */
#sc-stage.is-trophy > :not(#sc-label):not(#sc-shield):not(.tph-wrap),
#pf-sc-stage.is-trophy > :not(#pf-sc-label):not(#pf-sc-shield):not(.tph-wrap){ visibility:hidden; }
#profile-modal .pf-sc.is-trophy .pf-sc__hint{ visibility:hidden; }
/* рамка щита / страховки — про витрину: на полке её нет (сам щит виден на кнопке «🛡») */
#main-tab #sc-stage.is-trophy::before, #pf-sc-stage.is-trophy::before{ display:none !important; }

.tph-wrap{ position:absolute; z-index:2; left:min(8px, calc(50% - 160px)); right:min(8px, calc(50% - 160px)); top:2px; bottom:-14px; }
/* затемнение, размытие и виньетка прямо за шкафом */
.tph-bg{ position:absolute; inset:-34px -24px; pointer-events:none;
  background:radial-gradient(ellipse 70% 62% at 50% 50%,rgba(6,5,16,.62),rgba(6,5,16,.35) 60%,transparent 82%);
  -webkit-backdrop-filter:blur(3px); backdrop-filter:blur(3px);
  -webkit-mask:radial-gradient(ellipse 75% 68% at 50% 50%,#000 55%,transparent 85%); mask:radial-gradient(ellipse 75% 68% at 50% 50%,#000 55%,transparent 85%); }

/* ---- цвета шкафа ---- */
.skin-wood{ --bg:linear-gradient(180deg,#3b2817,#22160b); --rim:rgba(255,214,150,.30); --rim2:rgba(255,214,150,.10); --title:#ffd9a0; --sub:#d8b27a; --label:#ead7b4;
  --line:rgba(217,163,90,.85); --line2:#ffe0b0; --lglow:rgba(255,190,110,.35); }

/* ---- карточка ---- */
.troom{ position:absolute; inset:0; display:flex; flex-direction:column; gap:2px; padding:10px 10px 8px; border-radius:22px; overflow:hidden; isolation:isolate; box-sizing:border-box;
  background:var(--bg); color:#fff;
  box-shadow:inset 0 0 0 1px var(--rim),inset 0 1px 0 1px rgba(255,255,255,.06),0 22px 44px rgba(0,0,0,.55),0 6px 14px rgba(0,0,0,.35),var(--outer, 0 0 0 transparent); }
.troom::before{ content:''; position:absolute; inset:0; z-index:-1; pointer-events:none; border-radius:inherit;
  background:linear-gradient(180deg,rgba(255,255,255,.13),transparent 18%),linear-gradient(0deg,rgba(0,0,0,.28),transparent 22%),
    linear-gradient(90deg,rgba(255,255,255,.06),transparent 8%,transparent 92%,rgba(255,255,255,.06)),var(--sheen, none); }

.tph-top{ flex:none; display:flex; justify-content:space-between; align-items:center; gap:8px; padding:0 2px; }
.tph-like{ height:24px; display:inline-flex; align-items:center; gap:5px; padding:0 10px; border:0; border-radius:999px; font:inherit; font-size:12px; font-weight:800;
  color:#fff; background:rgba(0,0,0,.32); box-shadow:inset 0 0 0 1px rgba(255,255,255,.12); cursor:pointer; -webkit-tap-highlight-color:transparent; font-variant-numeric:tabular-nums; }
.tph-like.is-own{ cursor:default; }
.tph-like.is-on{ background:rgba(255,60,100,.22); box-shadow:inset 0 0 0 1px rgba(255,120,150,.55); }
.tph-like:active{ transform:scale(.95); }

.tph-pages{ flex:1 1 auto; min-height:0; display:flex; overflow-x:auto; overflow-y:hidden; scroll-snap-type:x mandatory; scrollbar-width:none; overscroll-behavior-x:contain; }
.tph-pages::-webkit-scrollbar{ display:none; }
.tph-page{ flex:0 0 100%; min-width:0; scroll-snap-align:start; display:flex; flex-direction:column; justify-content:space-evenly; }


/* ровная сетка: одинаковые ячейки и подложки */
.tph-row{ display:grid; align-items:end; padding:4px 0 10px; position:relative; }
.tph-row{ grid-template-columns:repeat(4, 1fr); }
.troom.is-guest .tph-row{ display:flex; justify-content:center; }
.troom.is-guest .tph-row > .tph-it{ width:25%; }
/* полка — тонкая линия с градиентом и свечением по центру */
.tph-row::after{ content:''; position:absolute; left:4%; right:4%; bottom:2px; height:1.5px; border-radius:2px;
  background:linear-gradient(90deg,transparent,var(--line) 30%,var(--line2, #fff) 50%,var(--line) 70%,transparent); }
.tph-row::before{ content:''; position:absolute; left:25%; right:25%; bottom:-6px; height:16px; pointer-events:none; background:radial-gradient(ellipse at 50% 30%,var(--lglow),transparent 70%); }

.tph-it{ display:flex; flex-direction:column; align-items:center; gap:4px; min-width:0; padding:0; border:0; background:none; color:inherit; font:inherit; cursor:pointer; -webkit-tap-highlight-color:transparent; }
.tph-it:active .tph-disc, .tph-it:active .tph-ped{ transform:scale(.93); }
/* страховка: круг / подставка не шире своей колонки (размер считает trophies.js → --s, тут — если экран совсем узкий) */
.tph-row .tph-disc, .tph-row .tph-ped{ max-width:calc(100% - 6px); max-height:none; aspect-ratio:1; height:auto; }
.tph-row .tph-disc img, .tph-row .tph-ped img{ max-width:100%; max-height:100%; }
.tph-disc{ width:calc(64px * var(--s, 1)); height:calc(64px * var(--s, 1)); border-radius:50%; display:grid; place-items:center; position:relative; transition:transform .12s;
  background:radial-gradient(circle at 50% 30%,rgba(255,255,255,.16),rgba(255,255,255,.03) 62%),rgba(0,0,0,.22);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.14),inset 0 -6px 10px rgba(0,0,0,.25),0 3px 6px rgba(0,0,0,.35); }
.tph-disc img{ width:calc(52px * var(--s, 1)); height:calc(52px * var(--s, 1)); object-fit:contain; filter:drop-shadow(0 2px 2px rgba(0,0,0,.45)); }
.tph-disc b{ font-size:calc(34px * var(--s, 1)); line-height:1; font-weight:400; filter:drop-shadow(0 2px 2px rgba(0,0,0,.45)); }
/* рамка значка — цвет его редкости (--rc, как у голубей) */
.tph-it[style*="--rc"] .tph-disc{ box-shadow:inset 0 0 0 2px var(--rc),inset 0 -6px 10px rgba(0,0,0,.25),0 3px 6px rgba(0,0,0,.35),0 0 10px color-mix(in srgb, var(--rc) 45%, transparent); }
/* пустое место (свой шкаф) — пунктир с «+», следующее под замком — с ценой */
.tph-it.empty .tph-disc{ background:rgba(0,0,0,.18); box-shadow:none; outline:1.5px dashed rgba(255,255,255,.28); outline-offset:-2px; }
.tph-it.empty .tph-disc b{ font-size:calc(28px * var(--s, 1)); font-weight:800; color:rgba(255,255,255,.6); filter:none; }
.tph-it.empty .tph-cap, .tph-it.lockc .tph-cap{ color:rgba(255,255,255,.45); }
.tph-it.lockc .tph-disc{ background:rgba(0,0,0,.28); }
.tph-it.lockc .tph-disc b{ font-size:calc(24px * var(--s, 1)); }
.tph-it.lockc .tph-cap span{ color:#ffd76a; font-weight:800; }
/* следующие закрытые — тусклее: открываются по очереди */
.tph-it.lockc.later .tph-disc{ opacity:.55; }
.tph-it.lockc.later .tph-disc b{ filter:grayscale(1); }
.tph-it.lockc.later .tph-cap span{ color:rgba(255,215,106,.5); }
/* голуби на полке — свечение цвета редкости (эксклюзивы — бирюзовые) */
.tph-ped{ width:calc(76px * var(--s, 1)); height:calc(76px * var(--s, 1)); display:grid; place-items:center; position:relative; transition:transform .12s; }
.tph-ped::before{ content:''; position:absolute; inset:4px; border-radius:50%; --g:var(--rc, #3fd1c0);
  background:radial-gradient(circle,color-mix(in srgb, var(--g) 42%, transparent),color-mix(in srgb, var(--g) 8%, transparent) 55%,transparent 70%); }
.tph-ped::after{ content:''; position:absolute; left:12%; right:12%; bottom:2px; height:8px; border-radius:50%; background:radial-gradient(ellipse,rgba(0,0,0,.5),transparent 70%); }
.tph-ped img{ position:relative; z-index:1; width:calc(74px * var(--s, 1)); height:calc(74px * var(--s, 1)); object-fit:contain; filter:drop-shadow(0 0 5px color-mix(in srgb, var(--rc, #3fd1c0) 75%, transparent)) drop-shadow(0 3px 3px rgba(0,0,0,.45)); }
/* значок со своей картинкой — без круга, как голубь: свечение цвета редкости и тень снизу */
.tph-ped.tph-art img{ width:calc(66px * var(--s, 1)); height:calc(66px * var(--s, 1)); }
.tph-it.art .tph-cap span{ color:var(--label); }

/* подпись — всегда две строки одной высоты: ряд не прыгает */
.tph-cap{ height:2.3em; max-width:100%; display:flex; flex-direction:column; align-items:center; font-size:9px; line-height:1.15; font-weight:700; color:var(--label); text-align:center; }
.tph-cap span{ max-width:100%; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; padding:0 2px; }
.tph-cap small{ font-size:9px; font-weight:800; color:var(--title); opacity:.85; }
.tph-it.x .tph-cap{ color:color-mix(in srgb, var(--rc, #3fd1c0) 55%, #fff); }
.tph-cnt{ font-size:10.5px; font-weight:800; color:var(--sub); font-variant-numeric:tabular-nums; }
.tph-none{ flex:1; display:grid; place-items:center; font-size:13px; font-weight:800; color:var(--sub); text-align:center; padding:0 12px; }

.tph-dots{ flex:none; display:flex; justify-content:center; gap:5px; padding-top:2px; }
.tph-dots i{ width:5px; height:5px; border-radius:3px; background:rgba(255,255,255,.25); transition:width .2s; }
.tph-dots i.on{ width:14px; background:var(--title); }

/* ❤ лайк профилю — в шапке чужого профиля, рядом с ✕ (оценка и витрины, и трофеев) */
.tph-plike{ flex:none; align-self:center; height:32px; display:inline-flex; align-items:center; gap:5px; padding:0 12px; margin-right:8px; border:0; border-radius:999px;
  font:inherit; font-size:14px; font-weight:900; color:#fff; background:rgba(255,255,255,.08); box-shadow:inset 0 0 0 1px rgba(255,255,255,.14);
  cursor:pointer; -webkit-tap-highlight-color:transparent; font-variant-numeric:tabular-nums; }
.tph-plike[hidden]{ display:none; }
.tph-plike.is-on{ background:rgba(255,60,100,.2); box-shadow:inset 0 0 0 1.5px rgba(255,120,150,.6); }
.tph-plike.is-own{ cursor:default; }
.tph-plike:active:not(.is-own){ transform:scale(.94); }
.tph-plike.pop{ animation:tphLike .5s cubic-bezier(.25,1.6,.45,1); }
@keyframes tphLike{ 0%{ transform:scale(1); } 40%{ transform:scale(1.22); } 100%{ transform:scale(1); } }

/* окошко «что это за значок» */
.tph-pop{ position:fixed; z-index:9000; box-sizing:border-box; padding:11px 13px; border-radius:16px; background:#1d2140; border:1px solid rgba(255,255,255,.15);
  box-shadow:0 14px 40px rgba(0,0,0,.6); color:#e6e9f7; font-size:12.5px; line-height:1.35; animation:trPopIn .14s ease-out; }
.tph-pop b{ display:block; font-size:14px; font-weight:900; color:#fff; margin-bottom:3px; }
.tph-pop b.x{ color:#5fe6d6; }
.tph-pop p{ margin:2px 0; color:#c9cde6; font-weight:700; }
.tph-pop small{ display:block; margin-top:5px; color:#8a90b3; font-weight:700; }
@keyframes trPopIn{ from{ opacity:0; transform:translateY(-4px); } to{ opacity:1; transform:none; } }

/* кнопки в окошке своего значка: заменить / убрать */
.tph-pop__btns{ display:flex; gap:6px; margin-top:9px; }
.tph-pop__btns button{ flex:1; height:32px; border:0; border-radius:10px; font:inherit; font-size:12.5px; font-weight:900; color:#fff; background:rgba(255,255,255,.1); cursor:pointer; }
.tph-pop__btns button[data-p="off"]{ color:#ffb4b4; background:rgba(255,90,90,.14); }
/* выбор: что поставить на место */
.tph-pick__grid{ display:grid; grid-template-columns:repeat(4, 1fr); gap:12px 4px; max-height:52vh; overflow-y:auto; padding:4px 0 2px; --label:#e6e9f7; --title:#ffd76a; }
.tph-pick .tph-it.is-on{ opacity:.55; }
.tph-pick__none{ margin:6px 0 2px; font-size:13px; font-weight:700; color:#aab1d6; line-height:1.4; }

/* окно значка / голубя с полки — на стилях окна голубя (modal.css: .pigeon-modal, .pm-*) */
.tph-bm .pm-stats{ grid-template-columns:repeat(auto-fit, minmax(0, 1fr)); }
.tph-bm .pm-stat-value{ font-size:15px; }
.tph-bm .pm-sub{ white-space:normal; line-height:1.35; }
.tph-bm-emoji{ font-size:96px; line-height:1; filter:drop-shadow(0 6px 10px rgba(0,0,0,.45)); }
.tph-bm-acts{ display:flex; gap:8px; }
.tph-bm-acts .pm-showcase{ flex:1 1 0; }
.tph-bm-acts .pm-showcase[data-m="off"]{ color:#ffb4b4; border-color:rgba(255,120,120,.4); background:rgba(255,90,90,.1); }

/* окно выбора «что поставить на полку» (классы .tph-skins остались от окна скинов) */
.tph-skins{ position:fixed; inset:0; z-index:9500; display:flex; align-items:center; justify-content:center; padding:16px; background:rgba(5,6,16,.62); animation:trPopIn .16s ease-out; }
.tph-skins__box{ position:relative; width:min(360px, 100%); box-sizing:border-box; padding:16px 14px 14px; border-radius:22px; background:#1d2140;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.12),0 20px 50px rgba(0,0,0,.6); color:#fff; }
.tph-skins__x{ position:absolute; right:10px; top:10px; width:30px; height:30px; border:0; border-radius:50%; background:rgba(255,255,255,.08); color:#cfd3ea; font-size:14px; cursor:pointer; }
.tph-skins__t{ display:block; font-size:17px; font-weight:900; }
.tph-skins__s{ margin:3px 0 12px; font-size:12.5px; font-weight:700; color:#9aa3c7; }

/* низкий экран: сцена ужалась — всё компактнее, подпись в одну строку */
.troom.is-tight{ padding:6px 8px 5px; gap:0; }
.troom.is-tight .tph-like{ height:20px; padding:0 8px; font-size:11px; }
.troom.is-tight .tph-row{ padding:3px 0 9px; }
.troom.is-tight .tph-cnt{ font-size:9.5px; }
.troom.is-tight .tph-it{ gap:3px; }
.troom.is-tight .tph-cap{ height:1.2em; flex-direction:row; gap:3px; justify-content:center; }
.troom.is-tight .tph-dots{ padding-top:0; }

@media (prefers-reduced-motion: reduce){ .tph-plike.pop, .tph-pop, .tph-skins{ animation:none; } }

/* 5.4: «⚑» — пожаловаться на ник (в строке под именем чужого профиля, nick.js → reportNick) */
.tph-preport{ margin-left: 8px; padding: 0 7px; height: 20px; border-radius: 7px; border: 1px solid rgba(255,255,255,.14); background: rgba(255,255,255,.06);
  color: var(--text-secondary, #a9adc9); font-size: 11px; line-height: 18px; vertical-align: 1px; cursor: pointer; }
.tph-preport[hidden]{ display: none; }

/* 5.4: значки под ником в профиле игрока — первые 8 значков с его полки трофеев (trophies.js → renderBadgeRow); тап — открыть трофеи */
.tph-brow{ display:flex; flex-wrap:wrap; gap:4px; margin:4px 0 3px; padding:0; border:0; background:none; cursor:pointer; -webkit-tap-highlight-color:transparent; }
.tph-brow[hidden]{ display:none; }
.tph-brow > span{ width:24px; height:24px; flex:none; display:inline-flex; align-items:center; justify-content:center; }
.tph-brow img{ width:24px; height:24px; object-fit:contain; filter:drop-shadow(0 1px 2px rgba(0,0,0,.45)); }
.tph-brow b{ font-size:15px; line-height:1; }
/* в карточке соседа — строкой под ником, помельче (player-search.js) */
#search-tab .nb-badges{ margin:0; gap:3px; flex-wrap:nowrap; overflow:hidden; cursor:inherit; }
#search-tab .nb-badges > span, #search-tab .nb-badges img{ width:18px; height:18px; }
