/* Подробности матча (13.10.2026). Фон — «Туманный зал архивов» (как история). Холст 1600×900 (--vs). */
.app > main:has(> .md-screen) { padding:0; background:#02070d; }
.app.desktop > main:has(> .md-screen) { height:calc(100vh - 86 * var(--u)); overflow:hidden; }
.md-screen { width:100%; max-width:none; margin:0; color:#eaf4fb; }
.md-screen :is(h1,p) { margin:0; }
.md-desktop { height:100%; container:mdroot / size; }
.md-scene { --vs:min(calc((100vw - 228 * var(--u)) / 1600),calc((100vh - 86 * var(--u)) / 900)); position:relative; display:flex; flex-direction:column; gap:calc(14 * var(--vs)); height:100%; padding:calc(26 * var(--vs)) calc(56 * var(--vs)) calc(20 * var(--vs)); background:#02070d url('/app/client/assets/ui/history/history-bg.jpg') 50% 50% / cover no-repeat; overflow:hidden; }
.md-scene::before { content:""; position:absolute; inset:0; pointer-events:none; background:linear-gradient(90deg,#02070dcc 0%,#02070d88 55%,#02070d44 100%),linear-gradient(180deg,transparent 70%,#02070daa); }
.md-scene > * { position:relative; }
.md-win  { --ac:#2fe0c8; --ac2:#b0fff3; --acd:#07473f; }
.md-loss { --ac:#ff4d5e; --ac2:#ffb8bf; --acd:#4a0d14; }
.md-draw { --ac:#8fa1b3; --ac2:#dbe5ee; --acd:#26303a; }

/* премиальная рамка (как рынок/история) */
.md-banner, .md-scorebox, .md-round { --c:calc(16 * var(--vs)); --g:calc(4 * var(--vs)); position:relative; isolation:isolate; }
:is(.md-banner,.md-scorebox,.md-round) > i { position:absolute; z-index:-1; pointer-events:none; }
.md-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) 16%,color-mix(in srgb,var(--ac) 35%,#000) 45%,color-mix(in srgb,var(--ac) 35%,#000) 80%,var(--ac)); }
.md-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; }
.md-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); }
.md-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(90deg,transparent,color-mix(in srgb,var(--ac2) 80%,transparent) 20%,color-mix(in srgb,var(--ac2) 80%,transparent) 45%,transparent 65%) var(--c) 0 / 50% 1.5px no-repeat,
    radial-gradient(ellipse 60% 120% at 0 0,color-mix(in srgb,var(--ac) 18%,transparent),transparent 60%),
    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)); }
:is(.md-banner,.md-scorebox,.md-round)::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)); }
:is(.md-banner,.md-scorebox,.md-round)::after { content:""; position:absolute; z-index:1; right:-1px; bottom:-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)); }

/* верх: баннер итога + итоговое здоровье */
.md-top { display:grid; grid-template-columns:1fr calc(520 * var(--vs)); gap:calc(16 * var(--vs)); }
.md-banner { display:flex; flex-direction:column; justify-content:center; gap:calc(6 * var(--vs)); padding:calc(18 * var(--vs)) calc(30 * var(--vs)); }
.md-banner p { color:var(--ac2); opacity:.8; font-size:calc(12 * var(--vs)); font-weight:800; letter-spacing:.22em; }
.md-banner h1 { color:var(--ac2); font-size:calc(46 * var(--vs)); font-weight:900; letter-spacing:.06em; line-height:1.05; text-transform:uppercase; text-shadow:0 0 calc(16 * var(--vs)) var(--ac); }
.md-meta { color:#b9cad6; font-size:calc(15 * var(--vs)); font-weight:750; letter-spacing:.06em; }
.md-reason { color:#eaf4fb; font-size:calc(17 * var(--vs)); font-weight:750; }
.md-scorebox { display:flex; flex-direction:column; justify-content:center; gap:calc(8 * var(--vs)); padding:calc(16 * var(--vs)) calc(28 * var(--vs)); }
.md-final { display:flex; align-items:baseline; justify-content:center; gap:calc(14 * var(--vs)); }
.md-final b { font-size:calc(44 * var(--vs)); font-weight:900; line-height:1; }
.md-final b:first-child { color:var(--ac2); text-shadow:0 0 calc(12 * var(--vs)) var(--ac); }
.md-final i { color:#5f7e90; font-style:normal; font-size:calc(34 * var(--vs)); }
.md-hp { display:grid; grid-template-columns:calc(100 * var(--vs)) 1fr calc(34 * var(--vs)); align-items:center; gap:calc(12 * var(--vs)); }
.md-hp span { color:#8fa9ba; font-size:calc(12.5 * var(--vs)); font-weight:800; letter-spacing:.1em; text-transform:uppercase; }
.md-hp i { position:relative; height:calc(10 * var(--vs)); background:#ffffff10; box-shadow:inset 0 0 0 1px #ffffff14; overflow:hidden; }
.md-hp i b { display:block; height:100%; }
.md-hp i::after { content:""; position:absolute; inset:0; background:repeating-linear-gradient(90deg,transparent 0 calc(100% / 14 - 2px),#05070d calc(100% / 14 - 2px) calc(100% / 14)); }
.md-hp-player i b { background:linear-gradient(90deg,#0b6e62,#2fe0c8); box-shadow:0 0 calc(8 * var(--vs)) #2fe0c8; }
.md-hp-opponent i b { background:linear-gradient(90deg,#7a1622,#ff4d5e); box-shadow:0 0 calc(8 * var(--vs)) #ff4d5e; }
.md-hp strong { text-align:right; font-size:calc(17 * var(--vs)); font-weight:900; }

/* раунды */
.md-rounds { flex:1; min-height:0; display:flex; flex-direction:column; gap:calc(10 * var(--vs)); padding-right:calc(8 * var(--vs)); overflow-y:auto; scrollbar-width:thin; scrollbar-color:#2f7fa0 transparent; }
.md-round { flex:none; display:grid; grid-template-columns:1fr calc(250 * var(--vs)) 1fr; align-items:center; gap:calc(16 * var(--vs)); min-height:calc(118 * var(--vs)); padding:calc(10 * var(--vs)) calc(24 * var(--vs)); }
.md-side { display:flex; align-items:center; gap:calc(16 * var(--vs)); min-width:0; }
.md-opponent { flex-direction:row-reverse; text-align:right; }
.md-card { flex:none; width:calc(68 * var(--vs)); height:calc(94 * var(--vs)); clip-path:polygon(calc(7 * var(--vs)) 0,100% 0,100% calc(100% - 7 * var(--vs)),calc(100% - 7 * var(--vs)) 100%,0 100%,0 calc(7 * var(--vs))); background:#0a1822; box-shadow:inset 0 0 0 1.5px var(--rc,#8fa1b3); }
.md-card img { display:block; width:100%; height:100%; object-fit:cover; padding:1.5px; }
.md-card.rarity-common { --rc:#b9c7d6; } .md-card.rarity-rare { --rc:#2fb2ff; } .md-card.rarity-epic { --rc:#b65cff; } .md-card.rarity-legendary { --rc:#ffc23d; }
.md-info { display:flex; flex-direction:column; gap:calc(5 * var(--vs)); min-width:0; }
.md-info small { color:#7d98a8; font-size:calc(11.5 * var(--vs)); font-weight:800; letter-spacing:.14em; text-transform:uppercase; }
.md-info strong { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size:calc(18 * var(--vs)); font-weight:850; }
.md-stats { display:flex; flex-wrap:wrap; align-items:baseline; gap:calc(8 * var(--vs)) calc(14 * var(--vs)); color:#9fb6c6; font-size:calc(13.5 * var(--vs)); font-weight:750; }
.md-opponent .md-stats { justify-content:flex-end; }
.md-stats b { color:#eaf4fb; font-weight:900; }
.md-stats em { padding:calc(2 * var(--vs)) calc(8 * var(--vs)); font-style:normal; font-size:calc(11 * var(--vs)); font-weight:900; letter-spacing:.12em; text-transform:uppercase; color:#ffd77a; background:#3a2a0699; box-shadow:inset 0 0 0 1px #ffb21f99; }
.md-atk { font-size:calc(15 * var(--vs)); }
.md-atk b { font-size:calc(24 * var(--vs)); color:var(--ac2); }
.md-mid { display:flex; flex-direction:column; align-items:center; gap:calc(4 * var(--vs)); text-align:center; }
.md-mid > small { color:#7d98a8; font-size:calc(12 * var(--vs)); font-weight:850; letter-spacing:.2em; text-transform:uppercase; }
.md-mid > strong { color:var(--ac2); font-size:calc(19 * var(--vs)); font-weight:900; letter-spacing:.06em; text-transform:uppercase; text-shadow:0 0 calc(10 * var(--vs)) var(--ac); }
.md-dmg { color:#ff8a94; font-size:calc(22 * var(--vs)); font-weight:900; }
.md-win .md-dmg { color:#7ff3df; }
.md-dmg small { color:#9fb6c6; font-size:calc(12 * var(--vs)); font-weight:750; letter-spacing:.06em; }
.md-after { color:#9fb6c6; font-size:calc(13 * var(--vs)); font-weight:750; }
.md-after b { color:#eaf4fb; }

/* низ */
.md-foot { display:flex; align-items:center; gap:calc(12 * var(--vs)); }
.md-foot small { margin-left:auto; color:#5f7e90; font-size:calc(11.5 * var(--vs)); letter-spacing:.06em; }
.md-screen button.md-btn { --c:calc(10 * var(--vs)); min-width:calc(250 * var(--vs)); min-height:calc(50 * var(--vs)); padding:0 calc(24 * 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)); font-size:calc(15 * var(--vs)); font-weight:850; letter-spacing:.1em; text-transform:uppercase; cursor:pointer; transition:filter .15s; }
.md-screen button.md-back { background:linear-gradient(180deg,#0a1c28,#06111a); box-shadow:inset 0 0 0 1px #2a7aa0; color:#cfe6f2; }
.md-screen button.md-replay { background:linear-gradient(180deg,rgba(255,255,255,.22),transparent 46%,rgba(0,0,0,.25)),linear-gradient(180deg,#5fd8ff,#1d8fd0 45%,#0b3a5c); box-shadow:inset 0 2px 0 rgba(255,255,255,.5),inset 0 0 0 calc(4 * var(--vs)) rgba(0,0,0,.18),inset 0 0 0 calc(5 * var(--vs)) rgba(255,255,255,.25); color:#fff; text-shadow:0 1px 4px #0008; }
.md-screen button.md-btn:hover { filter:brightness(1.15); }

/* высокие окна */
@container mdroot (aspect-ratio < 5/4) {
  .md-desktop .md-scene { --vs:calc(100cqw / 900); overflow:auto; }
  .md-desktop .md-top { grid-template-columns:1fr; }
  .md-desktop .md-rounds { flex:none; overflow:visible; }
  .md-desktop .md-round { grid-template-columns:1fr 1fr; grid-template-areas:"m m" "p o"; row-gap:calc(10 * var(--vs)); padding:calc(14 * var(--vs)) calc(22 * var(--vs)); }
  .md-desktop .md-mid { grid-area:m; flex-direction:row; flex-wrap:wrap; justify-content:center; gap:calc(6 * var(--vs)) calc(16 * var(--vs)); }
  .md-desktop .md-player { grid-area:p; } .md-desktop .md-opponent { grid-area:o; }
}

/* телефон */
.md-mobile .md-scene { --vs:1px; height:auto; min-height:100%; overflow:visible; padding:18px 12px 26px; background-size:auto 100%; background-position:30% 0; }
.md-mobile .md-top { grid-template-columns:1fr; gap:12px; }
.md-mobile .md-banner { padding:16px 20px; }
.md-mobile .md-banner h1 { font-size:34px; }
.md-mobile .md-rounds { overflow:visible; padding:0; }
.md-mobile .md-round { grid-template-columns:1fr 1fr; grid-template-areas:"m m" "p o"; row-gap:10px; gap:10px; padding:14px 14px 14px 16px; }
.md-mobile .md-mid { grid-area:m; flex-direction:row; flex-wrap:wrap; justify-content:center; column-gap:12px; }
.md-mobile .md-player { grid-area:p; } .md-mobile .md-opponent { grid-area:o; }
.md-mobile .md-side { flex-direction:column; align-items:flex-start; gap:8px; }
.md-mobile .md-opponent { align-items:flex-end; }
.md-mobile .md-card { width:58px; height:80px; }
.md-mobile .md-info strong { white-space:normal; font-size:15px; }
.md-mobile .md-foot { flex-wrap:wrap; }
.md-mobile .md-foot .md-btn { flex:1 1 140px; min-width:0; }
.md-mobile .md-foot small { width:100%; margin:4px 0 0; text-align:center; }