/* Итог учебного боя (11.10.2026). Рамки — фирменные tc-cut (tc-cut-frame.js, материал «Активной колоды»):
   табличка trtitle, баннер trreward, раунды ctsection, кнопки ctbtn. Единицы — холст 1600×900 (--vs). */
.app > main:has(> .tr-screen) { padding:0; background:#02070d; }
.app.desktop > main:has(> .tr-screen) { height:calc(100vh - 86 * var(--u)); overflow:hidden; }
.tr-screen { --tr-accent:#4fd6ff; --tr-glow:rgba(79,214,255,.55); width:100%; max-width:none; margin:0; color:#edf6ff; }
.tr-outcome-defeat { --tr-accent:#ff4d5e; --tr-glow:rgba(255,77,94,.6); }
.tr-outcome-draw, .tr-outcome-technical { --tr-accent:#f2b33d; --tr-glow:rgba(242,179,61,.55); }
.tr-screen :is(h1,h2,h3,p,dl,dd) { margin:0; }

.tr-desktop { height:100%; }
.tr-scene { --vs:min(calc((100vw - 228 * var(--u)) / 1600),calc((100vh - 86 * var(--u)) / 900)); position:relative; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:calc(14 * var(--vs)); height:100%; padding:calc(14 * var(--vs)) calc(24 * var(--vs)) calc(16 * var(--vs)); background:url('/app/client/assets/ui/tutorial-result/tr-bg.png') 50% 40% / cover no-repeat; overflow:hidden; }
.tr-scene::before { content:""; position:absolute; inset:0; pointer-events:none; background:radial-gradient(ellipse 62% 70% at 50% 58%,#02070d99,#02070d33 70%,transparent),linear-gradient(180deg,#02070d33,transparent 30%,#02070d66); }
.tr-scene > * { position:relative; }

/* общие правила рамок этого экрана: высота — по содержимому */
:is(.tr-title,.tr-reward,.tr-rounds) { position:relative; isolation:isolate; }
:is(.tr-title,.tr-reward,.tr-rounds) > .tc-cut-body { position:relative; inset:auto; }
:is(.tr-title,.tr-reward,.tr-rounds) > .tc-cut-glass { background:linear-gradient(180deg,rgba(8,22,31,.88),rgba(3,10,16,.92)); }

/* шапка */
.tr-head { display:flex; flex-direction:column; align-items:center; gap:calc(8 * var(--vs)); }
.tr-title { width:calc(820 * var(--vs)); filter:drop-shadow(0 0 calc(16 * var(--vs)) var(--tr-glow)); }
/* цвет таблички по итогу (владелец 22:06): победа — неоновая голубая (родной цвет рамки), поражение — красная, ничья — золотая.
   Материал тот же — кромка, пояс и детали перекрашиваются поворотом оттенка, белые блики остаются белыми. */
.tr-title::after { content:""; position:absolute; inset:-2px; z-index:4; pointer-events:none; clip-path:polygon(7% 0,93% 0,100% 50%,93% 100%,7% 100%,0 50%); background:transparent; mix-blend-mode:color; }
.tr-outcome-defeat .tr-title::after { background:#ff2d45; }
:is(.tr-outcome-draw,.tr-outcome-technical) .tr-title::after { background:#ffb020; }
.tr-outcome-defeat .tr-title > .tc-cut-rim, :is(.tr-outcome-draw,.tr-outcome-technical) .tr-title > .tc-cut-rim { filter:brightness(1.25) saturate(1.3); }
.tr-outcome-defeat .tr-kicker { color:#ff8a95; text-shadow:0 0 10px #ff4d5e88; }
:is(.tr-outcome-draw,.tr-outcome-technical) .tr-kicker { color:#ffd27a; text-shadow:0 0 10px #f2b33d88; }
/* Отступы таблички: металл 10 + накладки сверху/снизу по центру 15 ед. формы; хвосты «Д»/«Щ» выходят ниже строки —
   снизу запас больше, чтобы надпись нигде не наступала на рамку (замечание владельца 11.10, 23:51). */
.tr-title > .tc-cut-body { display:flex; flex-direction:column; align-items:center; padding:calc(24 * var(--vs)) 0 calc(35 * var(--vs)); }
.tr-title.tr-title-long h1 { font-size:calc(40 * var(--vs)); }
.tr-kicker { color:#7fe6ff; font-size:calc(14 * var(--vs)); font-weight:850; letter-spacing:.26em; text-shadow:0 0 10px #4fd6ff88; }
.tr-title h1 { color:#fff; font-size:calc(68 * var(--vs)); font-weight:900; line-height:1.02; letter-spacing:.05em; white-space:nowrap; text-shadow:0 0 16px var(--tr-glow),0 0 38px var(--tr-glow),0 3px 8px #000; }
.tr-outcome-defeat .tr-title h1 { color:#ffe3e6; }
.tr-score { display:grid; grid-template-columns:1fr auto 1fr; align-items:center; gap:calc(70 * var(--vs)); }
.tr-score > div { display:flex; flex-direction:column; align-items:center; min-width:calc(170 * var(--vs)); }
.tr-score small { color:#5fd0ff; font-size:calc(13 * var(--vs)); font-weight:850; letter-spacing:.14em; }
.tr-score b { color:#fff; font-size:calc(40 * var(--vs)); font-weight:850; line-height:1.1; text-shadow:0 2px 8px #000; }
.tr-score > i { width:1px; height:calc(46 * var(--vs)); background:linear-gradient(180deg,transparent,#5fd0ff,transparent); }
.tr-technical { color:#ffd4dd; font-size:calc(13 * var(--vs)); }

/* баннер награды: текст слева, карты — картинка в стекле справа (без выемок), левый край картинки уходит в темноту */
.tr-reward { width:calc(1000 * var(--vs)); }
.tr-reward > .tc-cut-body { display:flex; align-items:center; min-height:calc(122 * var(--vs)); padding:calc(16 * var(--vs)) calc(350 * var(--vs)) calc(16 * var(--vs)) calc(46 * var(--vs)); }
.tr-reward > .tc-cut-art img { left:auto; right:calc(8 * var(--vs)); width:auto; height:100%; max-width:none; object-fit:contain; }
.tr-reward > .tc-cut-art::after { background:linear-gradient(90deg,rgba(3,10,18,.96) 0%,rgba(3,10,18,.92) 60%,rgba(3,10,18,0) 74%); }
.tr-reward-claimed > .tc-cut-art img { filter:saturate(.5) brightness(.7); }
.tr-reward h2 { color:#fff; font-size:calc(27 * var(--vs)); font-weight:850; letter-spacing:.04em; text-shadow:0 2px 6px #000; }
.tr-reward h2 > span { color:#dfeaf3; }
.tr-reward p { margin-top:calc(6 * var(--vs)); color:#b9cede; font-size:calc(14 * var(--vs)); line-height:1.4; }
.tr-error { padding:8px 14px; border:1px solid #dc6071; background:#260e1ce6; color:#ffd4dd; font-size:14px; }

/* раунды: рамка раздела (ctsection) — заголовок в верхней полосе, ряды ниже */
.tr-rounds { width:calc(1360 * var(--vs)); flex:0 1 auto; min-height:0; display:flex; flex-direction:column; }
.tr-rounds > .tc-cut-body { display:flex; flex-direction:column; min-height:0; flex:0 1 auto; padding:calc(18 * var(--vs)) calc(28 * var(--vs)) calc(16 * var(--vs)) calc(30 * var(--vs)); }
.tr-rounds-title { height:calc(38 * var(--vs)); margin-bottom:calc(14 * var(--vs))!important; color:#7fe6ff; font-size:calc(16 * var(--vs)); font-weight:850; letter-spacing:.14em; text-shadow:0 0 10px #4fd6ff66; }
.tr-rounds-list { flex:1; min-height:0; overflow-y:auto; scrollbar-width:thin; scrollbar-color:#2b9fd6 transparent; }
.tr-round { display:grid; grid-template-columns:minmax(0,1fr) calc(170 * var(--vs)) minmax(0,1fr); align-items:center; padding:calc(7 * var(--vs)) 0; border-bottom:1px solid #16394a; }
.tr-round:last-child { border-bottom:0; }
.tr-side { display:flex; align-items:flex-end; gap:calc(14 * var(--vs)); min-width:0; position:relative; }
.tr-player { padding-top:calc(16 * var(--vs)); }
.tr-round-no { position:absolute; left:0; top:0; color:#fff; font-size:calc(12 * var(--vs)); font-weight:850; letter-spacing:.08em; }
.tr-thumb { flex:none; position:relative; width:calc(128 * var(--vs)); height:calc(68 * var(--vs)); border:2px solid var(--rc,#9db8c8); box-shadow:0 0 10px color-mix(in srgb,var(--rc,#9db8c8) 55%,transparent),inset 0 0 0 1px #000a; overflow:hidden; }
.tr-thumb img { display:block; width:100%; height:100%; object-fit:cover; object-position:50% 22%; }
.tr-side-body { flex:1; min-width:0; display:flex; flex-direction:column; gap:calc(3 * var(--vs)); }
.tr-who { color:#5fd0ff; font-size:calc(12 * var(--vs)); font-weight:850; letter-spacing:.1em; }
.tr-opponent .tr-who { align-self:flex-end; color:#ff4d5e; text-shadow:0 0 8px #ff4d5e66; }
/* «ВЫ» — синим, «СОПЕРНИК» — красным (владелец 22:06), в раундах и над счётом */
.tr-score-opponent small { color:#ff4d5e!important; text-shadow:0 0 8px #ff4d5e66; }
.tr-stats { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:calc(4 * var(--vs)); }
.tr-stats > div { display:flex; flex-direction:column; align-items:center; padding:calc(4 * var(--vs)) 0; background:linear-gradient(180deg,#0d2230e6,#06121ce6); border-top:1px solid #2a5a70; }
.tr-player .tr-stats > div:last-child { clip-path:polygon(0 0,88% 0,100% 100%,0 100%); }
.tr-opponent .tr-stats > div:first-child { clip-path:polygon(12% 0,100% 0,100% 100%,0 100%); }
.tr-stats dt { color:#8ea4b5; font-size:calc(9 * var(--vs)); letter-spacing:.06em; text-transform:uppercase; }
.tr-stats dd { color:#fff; font-size:calc(19 * var(--vs)); font-weight:850; line-height:1.15; }
.tr-vs { display:flex; flex-direction:column; align-items:center; line-height:1.1; }
.tr-vs b { color:#e9f8ff; font-size:calc(26 * var(--vs)); font-weight:900; letter-spacing:.04em; text-shadow:0 0 12px #39d7ff99; }
.tr-vs strong { font-size:calc(15 * var(--vs)); font-weight:900; letter-spacing:.04em; }
.tr-vs small { font-size:calc(11 * var(--vs)); font-weight:800; letter-spacing:.06em; }
.tr-win .tr-vs :is(strong,small) { color:#4fe3ff; text-shadow:0 0 10px #39d7ff88; }
.tr-loss .tr-vs :is(strong,small) { color:#ff4d5e; text-shadow:0 0 10px #ff4d5e88; }
.tr-loss .tr-vs b { text-shadow:0 0 12px #ff4d5e99; }
.tr-draw .tr-vs :is(strong,small) { color:#f2b33d; }

/* кнопки — как кнопки быстрого матча (ctbtn) */
.tr-actions { display:flex; justify-content:center; align-items:center; gap:calc(32 * var(--vs)); }
.tr-btn { position:relative; isolation:isolate; height:calc(60 * var(--vs)); min-height:0; margin:0; padding:0; border:0; border-radius:0; background:transparent; color:#e9fbff; font-weight:850; text-transform:uppercase; letter-spacing:.06em; cursor:pointer; }
.tr-btn .tc-cut-body { display:flex; justify-content:center; align-items:center; gap:calc(12 * var(--vs)); padding:0 calc(22 * var(--vs)); }
.tr-btn .tc-cut-glass { background:linear-gradient(180deg,#0b4154ed,#041722ef); }
.tr-btn:hover .tc-cut-glass { background:#0a5269; }
.tr-btn:hover .tc-cut-rim { filter:brightness(1.4); }
.tr-btn:focus-visible { outline:2px solid #b6fbff; outline-offset:4px; }
.tr-continue { width:calc(400 * var(--vs)); font-size:calc(22 * var(--vs)); filter:drop-shadow(0 0 calc(12 * var(--vs)) #00d9ff66); }
.tr-continue .tc-cut-body > span::after { content:" »"; color:#6ff0ff; }
.tr-secondary { width:calc(260 * var(--vs)); font-size:calc(14 * var(--vs)); }
.tr-secondary .tc-cut-glass { background:linear-gradient(180deg,#0a2533ed,#04121bef); }
.tr-cta-icon { width:calc(26 * var(--vs)); height:calc(26 * var(--vs)); object-fit:contain; }

/* телефон */
.tr-mobile .tr-scene { --vs:1px; justify-content:flex-start; gap:14px; height:auto; min-height:100%; padding:18px 12px 26px; background-position:50% 0; background-size:auto 640px; overflow:visible; }
.tr-mobile .tr-head { order:1; width:100%; } .tr-mobile .tr-reward { order:2; } .tr-mobile .tr-error { order:3; } .tr-mobile .tr-actions { order:4; } .tr-mobile .tr-rounds { order:5; }
.tr-mobile .tr-title { width:100%; }
.tr-mobile .tr-title h1 { font-size:34px; }
.tr-mobile .tr-title > .tc-cut-body { padding:21px 0 28px; }
.tr-mobile .tr-title.tr-title-long h1 { font-size:19px; }
.tr-mobile .tr-score { gap:24px; }
.tr-mobile .tr-score > div { min-width:110px; }
.tr-mobile .tr-score b { font-size:30px; }
.tr-mobile .tr-reward { width:100%; }
.tr-mobile .tr-reward > .tc-cut-body { min-height:150px; align-items:flex-start; padding:22px 18px 60px; }
.tr-mobile .tr-reward > .tc-cut-art img { width:100%; height:58%; top:auto; bottom:0; object-position:50% 45%; }
.tr-mobile .tr-reward > .tc-cut-art::after { background:linear-gradient(180deg,rgba(3,10,18,.98) 0%,rgba(3,10,18,.9) 42%,rgba(3,10,18,.2) 70%,rgba(3,10,18,0)); }
.tr-mobile .tr-reward h2 { font-size:20px; }
.tr-mobile .tr-rounds { width:100%; flex:none; }
.tr-mobile .tr-rounds > .tc-cut-body { padding:16px 16px 14px 18px; }
.tr-mobile .tr-rounds-title { height:26px; font-size:13px; margin-bottom:10px!important; }
.tr-mobile .tr-rounds-list { overflow:visible; }
.tr-mobile .tr-round { grid-template-columns:1fr; gap:6px; padding:10px 0; }
.tr-mobile .tr-side { align-items:center; gap:10px; }
.tr-mobile .tr-player { padding-top:18px; }
.tr-mobile .tr-thumb { width:84px; height:48px; }
.tr-mobile .tr-stats dd { font-size:16px; }
.tr-mobile .tr-vs { flex-direction:row; justify-content:center; gap:10px; }
.tr-mobile .tr-vs b { font-size:18px; }
.tr-mobile .tr-actions { width:100%; flex-direction:column; gap:12px; }
.tr-mobile .tr-btn { width:100%; height:56px; font-size:17px; }
.tr-mobile .tr-title::after { clip-path:polygon(13% 0,87% 0,100% 50%,87% 100%,13% 100%,0 50%); }

/* Итог обычных боёв (kind MATCH, владелец 11.10.2026): в баннере — опыт аккаунта, очки сезона, опыт карт. */
.tr-reward-noart > .tc-cut-body { padding-right:calc(46 * var(--vs)); }
.tr-reward-copy { display:flex; flex-direction:column; min-width:0; }
.tr-reward-stats { display:flex; flex-wrap:wrap; gap:calc(10 * var(--vs)) calc(34 * var(--vs)); margin:calc(10 * var(--vs)) 0 0; }
.tr-reward-stats > div { display:flex; align-items:baseline; gap:calc(8 * var(--vs)); }
.tr-reward-stats dd { margin:0; color:#5fd2ff; font-size:calc(30 * var(--vs)); font-weight:900; letter-spacing:.02em; text-shadow:0 0 calc(12 * var(--vs)) rgba(30,167,255,.55), 0 2px 4px #000; }
.tr-reward-stats .tr-stat-seasonPoints dd { color:#ffcf4a; text-shadow:0 0 calc(12 * var(--vs)) rgba(255,176,32,.5), 0 2px 4px #000; }
.tr-reward-stats .tr-stat-cardXp dd { color:#c69bff; text-shadow:0 0 calc(12 * var(--vs)) rgba(160,96,255,.5), 0 2px 4px #000; }
.tr-reward-stats dt { color:#b9cede; font-size:calc(13 * var(--vs)); font-weight:750; letter-spacing:.08em; white-space:nowrap; }
.tr-reward-pending p { color:#8fb6cc; }
.tr-reward-suppressed p, .tr-reward-error p { color:#ffd4dd; }
.tr-reward-retry { align-self:flex-start; margin-top:calc(10 * var(--vs)); padding:calc(8 * var(--vs)) calc(18 * var(--vs)); border:1px solid #1ea7ff; background:rgba(8,30,48,.85); color:#fff; font-weight:800; letter-spacing:.06em; cursor:pointer; }
.tr-mobile .tr-reward-noart > .tc-cut-body { min-height:0; padding:20px 18px; }
.tr-mobile .tr-reward-stats { flex-direction:column; gap:6px; }
.tr-mobile .tr-reward-stats dd { font-size:24px; }
.tr-mobile .tr-reward-stats dt { font-size:12px; }
.tr-reward-suppressed > .tc-cut-art img, .tr-reward-error > .tc-cut-art img { filter:saturate(.45) brightness(.65); }
/* Тренировка: наград нет — картинка приглушена, текст спокойный. */
.tr-reward-practice > .tc-cut-art img { filter:saturate(.35) brightness(.55); }
.tr-reward-practice h2 { color:#dfeaf3; }

/* Mutual rematch uses the existing metal/neon frame and keeps its controls outside the round list. */
.tr-rematch { position:relative; isolation:isolate; flex:none; width:calc(1000 * var(--vs)); }
.tr-rematch > .tc-cut-body { position:relative; inset:auto; display:grid; grid-template-columns:minmax(0,1fr) calc(360 * var(--vs)); align-items:center; gap:calc(16 * var(--vs)) calc(24 * var(--vs)); padding:calc(24 * var(--vs)) calc(32 * var(--vs)); }
.tr-rematch > .tc-cut-glass { background:linear-gradient(180deg,#0a2533f5,#031019f5); }
.tr-rematch h2 { grid-column:1 / -1; min-height:calc(28 * var(--vs)); color:#7fe6ff; font-size:calc(20 * var(--vs)); letter-spacing:.12em; }
.tr-rematch p { color:#edf6ff; font-size:max(14px,calc(17 * var(--vs))); line-height:1.45; overflow-wrap:anywhere; }
.tr-rematch-copy { display:flex; flex-direction:column; gap:calc(7 * var(--vs)); min-width:0; }
.tr-rematch p.tr-rematch-rules { color:#b4cbd9; font-size:max(12px,calc(14 * var(--vs))); }
.tr-rematch p.tr-rematch-error { color:#ffd1b0; }
.tr-rematch-controls { display:flex; flex-direction:column; align-items:stretch; gap:calc(10 * var(--vs)); }
.tr-rematch-clock { text-align:center; }
.tr-rematch-clock b { color:#83f0ff; font-variant-numeric:tabular-nums; }
.tr-rematch :is(.tr-rematch-accept,.tr-rematch-retry) { width:100%; font-size:calc(17 * var(--vs)); }
.tr-screen:has(.tr-rematch) .tr-scene > :is(.tr-head,.tr-reward,.tr-actions) { flex:none; }
.tr-screen:has(.tr-rematch) .tr-continue { font-size:calc(18 * var(--vs)); }