/* История матчей (13.10.2026). Фон — «Туманный зал архивов» владельца. Холст 1600×900 (--vs). Рамки — как карточка рынка. */
.app > main:has(> .mh-screen) { padding:0; background:#02070d; }
.app.desktop > main:has(> .mh-screen) { height:calc(100vh - 86 * var(--u)); overflow:hidden; }
.mh-screen { width:100%; max-width:none; margin:0; color:#eaf4fb; }   /* общее section{max-width:1280px} */
.mh-screen :is(h1,p,ol,li) { margin:0; padding:0; list-style:none; }
.mh-desktop { height:100%; container:mhroot / size; }
.mh-scene { --vs:min(calc((100vw - 228 * var(--u)) / 1600),calc((100vh - 86 * var(--u)) / 900)); position:relative; display:flex; flex-direction:column; gap:calc(16 * var(--vs)); height:100%; padding:calc(30 * var(--vs)) calc(56 * var(--vs)) calc(24 * var(--vs)); background:#02070d url('/app/client/assets/ui/history/history-bg.jpg') 50% 50% / cover no-repeat; overflow:hidden; }
.mh-scene::before { content:""; position:absolute; inset:0; pointer-events:none; background:linear-gradient(90deg,#02070dcc 0%,#02070d80 55%,#02070d33 100%),linear-gradient(180deg,transparent 70%,#02070daa); }
.mh-scene > * { position:relative; }

/* шапка и сводка */
.mh-head { display:flex; align-items:flex-end; justify-content:space-between; gap:calc(24 * var(--vs)); }
.mh-heading { padding:calc(4 * var(--vs)) calc(16 * var(--vs)); border-left:2px solid #2fd8ff; text-shadow:0 2px 8px #000; }
.mh-heading p { color:#5fd0ff; font-size:calc(13 * var(--vs)); font-weight:800; letter-spacing:.22em; }
.mh-heading h1 { margin-top:calc(6 * var(--vs)) !important; font-size:calc(40 * var(--vs)); font-weight:900; letter-spacing:.04em; text-transform:uppercase; }
.mh-summary { display:flex; gap:calc(10 * var(--vs)); }
.mh-stat { --c:calc(10 * var(--vs)); display:flex; flex-direction:column; align-items:center; justify-content:center; min-width:calc(110 * var(--vs)); padding:calc(8 * var(--vs)) calc(14 * var(--vs)); clip-path:polygon(var(--c) 0,100% 0,100% calc(100% - var(--c)),calc(100% - var(--c)) 100%,0 100%,0 var(--c)); background:linear-gradient(180deg,rgba(10,26,36,.92),rgba(4,12,18,.94)); box-shadow:inset 0 0 0 1px #1f5d78,inset 0 2px 0 #2fd8ff55; }
.mh-stat b { font-size:calc(26 * var(--vs)); font-weight:900; line-height:1.1; }
.mh-stat small { color:#8fb0c2; font-size:calc(11 * var(--vs)); font-weight:750; letter-spacing:.12em; text-transform:uppercase; }
.mh-s-win b { color:#5ff0d8; text-shadow:0 0 calc(10 * var(--vs)) #2fe0c8; }
.mh-s-loss b { color:#ff7a86; text-shadow:0 0 calc(10 * var(--vs)) #ff4d5e; }
.mh-s-rate b { color:#7fe6ff; text-shadow:0 0 calc(10 * var(--vs)) #2fb2ff; }

/* фильтры */
.mh-filters { display:flex; flex-wrap:wrap; gap:calc(10 * var(--vs)); }
.mh-chip { --c:calc(9 * var(--vs)); position:relative; cursor:pointer; }
.mh-chip input { position:absolute; opacity:0; pointer-events:none; }
.mh-chip span { display:flex; align-items:center; gap:calc(10 * var(--vs)); height:calc(42 * var(--vs)); padding:0 calc(18 * var(--vs)); clip-path:polygon(var(--c) 0,100% 0,100% calc(100% - var(--c)),calc(100% - var(--c)) 100%,0 100%,0 var(--c)); background:linear-gradient(180deg,#0a1c28,#06111a); box-shadow:inset 0 0 0 1px #1d5a78; color:#9fbccc; font-size:calc(15 * var(--vs)); font-weight:800; letter-spacing:.08em; text-transform:uppercase; transition:color .15s,background .15s; }
.mh-chip em { font-style:normal; color:#5f8193; font-size:calc(13 * var(--vs)); }
.mh-chip:hover span { color:#fff; }
.mh-chip input:checked + span { background:linear-gradient(180deg,#0f3b58,#0a2436); box-shadow:inset 0 0 0 1px #2fd8ff,inset 0 0 calc(16 * var(--vs)) rgba(47,216,255,.3); color:#fff; text-shadow:0 0 10px rgba(79,214,255,.7); }
.mh-chip input:checked + span em { color:#7fe6ff; }
.mh-chip input:focus-visible + span { outline:1px solid #7fe6ff; outline-offset:2px; }
.mh-screen:has(input[data-mh-filter="QUICK"]:checked) .mh-entry:not([data-mode="QUICK"]),
.mh-screen:has(input[data-mh-filter="BOT"]:checked) .mh-entry:not([data-mode="BOT"]),
.mh-screen:has(input[data-mh-filter="PRACTICE"]:checked) .mh-entry:not([data-mode="PRACTICE"]),
.mh-screen:has(input[data-mh-filter="ARENA"]:checked) .mh-entry:not([data-mode="ARENA"]),
.mh-screen:has(input[data-mh-filter="CLAN_WAR"]:checked) .mh-entry:not([data-mode="CLAN_WAR"]),
.mh-screen:has(input[data-mh-filter="PVE"]:checked) .mh-entry:not([data-mode="PVE"]),
.mh-screen:has(input[data-mh-filter="OTHER"]:checked) .mh-entry:not([data-mode="OTHER"]) { display:none; }

/* список */
.mh-list { flex:1; min-height:0; display:flex; flex-direction:column; gap:calc(10 * var(--vs)); padding:calc(4 * var(--vs)) calc(10 * var(--vs)) calc(10 * var(--vs)) 0; overflow-y:auto; scrollbar-width:thin; scrollbar-color:#2f7fa0 transparent; }
.mh-win  { --ac:#2fe0c8; --ac2:#b0fff3; --acd:#07473f; }
.mh-loss { --ac:#ff4d5e; --ac2:#ffb8bf; --acd:#4a0d14; }
.mh-draw { --ac:#8fa1b3; --ac2:#dbe5ee; --acd:#26303a; }

.mh-entry { --c:calc(14 * var(--vs)); --g:calc(4 * var(--vs)); flex:none; position:relative; isolation:isolate; display:grid; grid-template-columns:calc(220 * var(--vs)) calc(220 * var(--vs)) calc(200 * var(--vs)) 1fr calc(180 * var(--vs)); align-items:center; gap:calc(18 * var(--vs)); min-height:calc(100 * var(--vs)); padding:calc(12 * var(--vs)) calc(22 * var(--vs)) calc(12 * var(--vs)) calc(30 * var(--vs)); }
.mh-entry > i { position:absolute; z-index:-1; pointer-events:none; }
.mh-l1 { inset:0; clip-path:polygon(var(--c) 0,100% 0,100% calc(100% - var(--c)),calc(100% - var(--c)) 100%,0 100%,0 var(--c)); background:linear-gradient(110deg,var(--ac2),var(--ac) 14%,color-mix(in srgb,var(--ac) 35%,#000) 45%,color-mix(in srgb,var(--ac) 35%,#000) 80%,var(--ac)); }
.mh-l2 { inset:1.5px; --k:calc(var(--c) - .6px); clip-path:polygon(var(--k) 0,100% 0,100% calc(100% - var(--k)),calc(100% - var(--k)) 100%,0 100%,0 var(--k)); background:#04070c; }
.mh-l3 { inset:var(--g); --k:calc(var(--c) - var(--g) * .41); clip-path:polygon(var(--k) 0,100% 0,100% calc(100% - var(--k)),calc(100% - var(--k)) 100%,0 100%,0 var(--k)); background:color-mix(in srgb,var(--ac) 26%,transparent); }
.mh-l4 { inset:calc(var(--g) + 1px); --k:calc(var(--c) - var(--g) * .41 - .4px); clip-path:polygon(var(--k) 0,100% 0,100% calc(100% - var(--k)),calc(100% - var(--k)) 100%,0 100%,0 var(--k));
  background:
    linear-gradient(var(--ac),var(--ac)) 0 0 / calc(5 * var(--vs)) 100% no-repeat,
    linear-gradient(90deg,color-mix(in srgb,var(--ac) 24%,transparent),transparent 30%),
    linear-gradient(115deg,transparent 30%,rgba(255,255,255,.035) 42%,transparent 54%),
    linear-gradient(180deg,rgba(8,16,24,.93),rgba(3,7,12,.96)); }
.mh-entry::before { content:""; position:absolute; z-index:1; left:-1px; top:-1px; width:calc(var(--c) + 3px); height:calc(var(--c) + 3px); pointer-events:none; background:linear-gradient(135deg,transparent calc(50% - 1.5px),var(--ac2) calc(50% - 1.5px),#fff 50%,var(--ac2) calc(50% + 1.5px),transparent calc(50% + 1.5px)); filter:drop-shadow(0 0 calc(4 * var(--vs)) var(--ac)); }

.mh-outcome { display:flex; flex-direction:column; gap:calc(4 * var(--vs)); }
.mh-outcome strong { color:var(--ac2); font-size:calc(26 * var(--vs)); font-weight:900; letter-spacing:.06em; text-transform:uppercase; text-shadow:0 0 calc(12 * var(--vs)) var(--ac); }
.mh-outcome small, .mh-when small, .mh-score small { color:#8fa9ba; font-size:calc(12.5 * var(--vs)); font-weight:750; letter-spacing:.1em; text-transform:uppercase; }
.mh-when { display:flex; flex-direction:column; gap:calc(4 * var(--vs)); }
.mh-when span { font-size:calc(17 * var(--vs)); font-weight:750; }
.mh-score { display:flex; flex-wrap:wrap; align-items:baseline; column-gap:calc(10 * var(--vs)); }
.mh-score b { font-size:calc(30 * var(--vs)); font-weight:900; line-height:1; }
.mh-score b:first-child { color:var(--ac2); }
.mh-score > i { color:#5f7e90; font-style:normal; font-size:calc(24 * var(--vs)); }
.mh-score small { flex-basis:100%; margin-top:calc(6 * var(--vs)); }

.mh-cards { display:flex; gap:calc(10 * var(--vs)); }
.mh-card { position:relative; width:calc(58 * var(--vs)); height:calc(80 * var(--vs)); }
.mh-card img { display:block; width:100%; height:100%; object-fit:cover; clip-path:polygon(calc(6 * var(--vs)) 0,100% 0,100% calc(100% - 6 * var(--vs)),calc(100% - 6 * var(--vs)) 100%,0 100%,0 calc(6 * var(--vs))); box-shadow:inset 0 0 0 1px #fff3; }
.mh-card i { position:absolute; left:15%; right:15%; bottom:calc(-7 * var(--vs)); height:calc(3 * var(--vs)); border-radius:2px; background:#5f6f7c; }
.mh-r-win img { filter:none; }
.mh-r-win i { background:#2fe0c8; box-shadow:0 0 calc(8 * var(--vs)) #2fe0c8; }
.mh-r-loss img { filter:grayscale(.65) brightness(.6); }
.mh-r-loss i { background:#ff4d5e; box-shadow:0 0 calc(6 * var(--vs)) #ff4d5e; }
.mh-r-draw img { filter:grayscale(.3) brightness(.8); }

.mh-screen button.mh-open { --c:calc(10 * var(--vs)); justify-self:end; width:100%; min-height:calc(48 * var(--vs)); border:0; clip-path:polygon(var(--c) 0,100% 0,100% calc(100% - var(--c)),calc(100% - var(--c)) 100%,0 100%,0 var(--c)); background:linear-gradient(180deg,color-mix(in srgb,var(--acd) 80%,#05070d),#05070d); box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--ac) 75%,transparent),inset 0 2px 0 color-mix(in srgb,var(--ac2) 40%,transparent); color:#eef6fb; font-size:calc(15 * var(--vs)); font-weight:850; letter-spacing:.1em; text-transform:uppercase; cursor:pointer; transition:filter .15s,box-shadow .15s; }
.mh-screen button.mh-open:hover { filter:brightness(1.2); box-shadow:inset 0 0 0 1px var(--ac2),inset 0 0 calc(14 * var(--vs)) color-mix(in srgb,var(--ac) 40%,transparent); }

.mh-empty { display:flex; flex-direction:column; align-items:flex-start; gap:calc(12 * var(--vs)); max-width:calc(720 * var(--vs)); padding:calc(28 * var(--vs)) calc(34 * var(--vs)); }
.mh-empty strong { font-size:calc(24 * var(--vs)); font-weight:900; text-transform:uppercase; }
.mh-empty p { color:#9fb6c6; font-size:calc(15 * var(--vs)); line-height:1.4; }
.mh-empty button.mh-open { width:calc(220 * var(--vs)); justify-self:auto; }

/* высокие окна: строка боя — в две линии, масштаб от ширины */
@container mhroot (aspect-ratio < 5/4) {
  .mh-desktop .mh-scene { --vs:calc(100cqw / 900); }
  .mh-desktop .mh-head { flex-direction:column; align-items:stretch; }
  .mh-desktop .mh-summary { flex-wrap:wrap; }
  .mh-desktop .mh-stat { flex:1; }
  .mh-desktop .mh-entry { grid-template-columns:1fr auto calc(170 * var(--vs)); grid-template-areas:"o s b" "w c c"; row-gap:calc(12 * var(--vs)); }
  .mh-desktop .mh-outcome { grid-area:o; } .mh-desktop .mh-score { grid-area:s; } .mh-desktop .mh-open { grid-area:b; }
  .mh-desktop .mh-when { grid-area:w; } .mh-desktop .mh-cards { grid-area:c; justify-content:flex-end; padding-bottom:calc(8 * var(--vs)); }
}

/* телефон */
.mh-mobile .mh-scene { --vs:1px; height:auto; min-height:100%; overflow:visible; padding:20px 12px 28px; background-size:auto 100%; background-position:30% 0; }
.mh-mobile .mh-head { flex-direction:column; align-items:stretch; gap:14px; }
.mh-mobile .mh-heading h1 { font-size:28px; }
.mh-mobile .mh-summary { display:grid; grid-template-columns:repeat(3,1fr); gap:8px; }
.mh-mobile .mh-stat { min-width:0; }
.mh-mobile .mh-s-total { display:none; }
.mh-mobile .mh-filters { flex-wrap:nowrap; overflow-x:auto; padding-bottom:4px; scrollbar-width:none; }
.mh-mobile .mh-chip { flex:none; }
.mh-mobile .mh-list { overflow:visible; padding:0; }
.mh-mobile .mh-entry { grid-template-columns:1fr auto; grid-template-areas:"o s" "w w" "c c" "b b"; row-gap:12px; padding:16px 16px 16px 22px; }
.mh-mobile .mh-outcome { grid-area:o; } .mh-mobile .mh-score { grid-area:s; justify-content:flex-end; } .mh-mobile .mh-score small { text-align:right; }
.mh-mobile .mh-when { grid-area:w; flex-direction:row; justify-content:space-between; align-items:baseline; }
.mh-mobile .mh-cards { grid-area:c; padding-bottom:8px; }
.mh-mobile .mh-card { width:56px; height:78px; }
.mh-mobile .mh-open { grid-area:b; }
.mh-mobile .mh-score small { white-space:nowrap; font-size:10.5px; letter-spacing:.06em; }

/* «Ваш призрак» (13.10.2026): итоги боёв, где колода игрока сражалась за него. */
.mh-entry.mh-ghost { --ac:#9fd8ff; --ac2:#cfe9ff; grid-template-columns:minmax(0,1.3fr) auto minmax(0,1.6fr); gap:calc(22 * var(--vs)); }
.mh-ghost-head strong { display:block; font-size:calc(20 * var(--vs)); font-weight:900; letter-spacing:.06em; text-transform:uppercase; color:#e6f4ff; }
.mh-ghost-head p { margin:calc(6 * var(--vs)) 0 0; color:#9fb6c6; font-size:calc(13 * var(--vs)); line-height:1.4; }
.mh-ghost-stats { display:flex; gap:calc(10 * var(--vs)); }
.mh-ghost-list { list-style:none; margin:0; padding:0; display:grid; gap:calc(6 * var(--vs)); }
.mh-ghost-list li { display:grid; grid-template-columns:calc(190 * var(--vs)) 1fr auto; align-items:center; gap:calc(10 * var(--vs)); padding:calc(6 * var(--vs)) calc(10 * var(--vs)); border-left:3px solid #6f8797; background:rgba(4,14,22,.55); font-size:calc(13 * var(--vs)); color:#cfe2ee; }
.mh-ghost-list li b { white-space:nowrap; font-weight:900; text-transform:uppercase; letter-spacing:.04em; }
.mh-ghost-list li span { min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.mh-ghost-list li small { color:#8aa3b4; }
.mh-ghost-list .mh-g-win { border-left-color:#3dff9a; } .mh-ghost-list .mh-g-win b { color:#3dff9a; }
.mh-ghost-list .mh-g-loss { border-left-color:#ff4d5e; } .mh-ghost-list .mh-g-loss b { color:#ff7a86; }
.mh-ghost-list .mh-g-none { grid-template-columns:1fr; color:#9fb6c6; }
@container mhroot (aspect-ratio < 5/4) { .mh-desktop .mh-entry.mh-ghost { grid-template-columns:1fr auto; grid-template-areas:none; } .mh-desktop .mh-ghost-list { grid-column:1 / -1; } }
.mh-mobile .mh-entry.mh-ghost { grid-template-columns:1fr; grid-template-areas:none; }
.mh-mobile .mh-ghost-head strong { font-size:18px; } .mh-mobile .mh-ghost-head p { font-size:13px; }
.mh-mobile .mh-ghost-stats { gap:8px; }
.mh-mobile .mh-ghost-list li { grid-template-columns:auto 1fr; font-size:13px; padding:6px 10px; gap:8px; }
.mh-mobile .mh-ghost-list li small { grid-column:1 / -1; font-size:12px; }
.mh-ghost-list li small em { font-style:normal; font-weight:800; color:#ffd36a; margin-right:calc(8 * var(--vs)); }
.mh-mobile .mh-ghost-list li small em { margin-right:8px; }
.mh-ghost-stats .mh-s-xp b { color:#ffd36a; }