:root { --ease: cubic-bezier(.22,1,.36,1); --border: #ffffff12; --lavender:#b8a2ff; --green:#7eecac; --red:#fa858f; }
html { background:#0d0d14; color:#f1eff8; scroll-behavior:smooth; }
body { background:radial-gradient(ellipse at 70% 0%,#8062bd12,transparent 50%),#0d0d14; }
.sidebar { background:#101018ed; border-color:var(--border); }
.topbar { background:#101018aa; border-color:var(--border); backdrop-filter:blur(16px); }
.brand img { filter:drop-shadow(0 4px 12px #a18fff36); }
.nav a,.btn,select,.back,.result-card,.session-row,.catalog-table tr { transition:background .22s,border-color .22s,color .22s,box-shadow .22s,transform .3s var(--ease); }
.nav a { border-radius:12px; }
.nav a.active { background:linear-gradient(100deg,#a994ff21,#a994ff08); box-shadow:inset 2px 0 #baa1ff; }
.btn { border-radius:10px; min-height:42px; }
.btn:hover:not(:disabled),.btn:active:not(:disabled) { transform:none; }
.btn.primary { background:linear-gradient(135deg,#d1bfff,#b09aff); border-color:#c6b2ff; box-shadow:0 5px 20px #a284ff18,inset 0 1px #ffffff40; }
.btn.peach { background:linear-gradient(135deg,#f7d1bd,#e5ad98); box-shadow:0 5px 20px #efa88616,inset 0 1px #ffffff45; }
.btn.primary:hover { background:linear-gradient(135deg,#d1bfff,#b09aff);box-shadow:0 5px 20px #a284ff18,inset 0 1px #ffffff40; }
.btn.peach:hover { background:linear-gradient(135deg,#f7d1bd,#e5ad98);box-shadow:0 5px 20px #efa88616,inset 0 1px #ffffff45; }
.content { animation:page-in .38s var(--ease) both; }
.hero { border-radius:24px; padding:38px 40px; background:radial-gradient(ellipse at 90% 20%,#7550a938,transparent 60%),linear-gradient(130deg,#1a1724,#15131d); border-color:#d6bdff1c; box-shadow:inset 0 1px #ffffff05,0 20px 60px #00000015; }
.hero:before { content:''; position:absolute; pointer-events:none; width:280px;height:280px;right:-80px;top:-120px;border:1px solid #c1a0ff16;border-radius:50%;box-shadow:0 0 0 38px #b090f504,0 0 0 76px #b090f503; }
.hero h1 { font-weight:700; }
.hero-art { animation:art-in .8s var(--ease) both; }
.chip { border-radius:20px;padding:5px 10px;background:#ffffff04; }
.category-card { border-radius:20px; padding:28px; background:radial-gradient(ellipse at 100% 0%,#9670d019,transparent 70%),#17151f; border-color:#cfb4ff22; transition:transform .45s var(--ease),border-color .25s,box-shadow .35s; }
.category-card.peach { background:radial-gradient(ellipse at 100% 0%,#d6986f19,transparent 70%),#1a161a; border-color:#e4b8a020; }
.category-card:hover { transform:none;box-shadow:none; }
.category-card .card-art { transition:transform .6s var(--ease),opacity .4s; }
.category-card:hover .card-art { transform:none;opacity:.75; }
.mode-card,.stat,.session-row,.empty { border-radius:16px; }
.progress { background:#ffffff08;overflow:hidden; }
.progress span { background:linear-gradient(90deg,#8061c6,#c4adff);transition:width .6s var(--ease);box-shadow:0 0 18px #a18ce95c; }
.match-top { margin-top:24px; }
.match-top strong { display:flex;align-items:center;gap:9px;font-size:12px;font-weight:500;color:#aba3bd; }
.match-top strong:before { content:'';height:6px;width:6px;border-radius:50%;background:#bda9f7;box-shadow:0 0 12px #bda9f750; }
.match-grid { gap:18px;align-items:stretch; }
.vs { align-self:center;border:1px solid #ffffff15;border-radius:50%;width:36px;height:36px;display:grid;place-items:center;color:#958baf;background:#18151e;box-shadow:0 0 24px #9974d912; }
.player-card { border-radius:19px;background:linear-gradient(155deg,#1e1929,#17141d);border-color:#a18ac235;box-shadow:0 16px 45px #00000020;transition:border-color .32s,box-shadow .35s,background .35s,filter .4s,transform .4s var(--ease); }
.player-card.right { background:linear-gradient(155deg,#251c24,#1c151b);border-color:#d4a79730; }
.player-area { background:radial-gradient(ellipse at 50% 40%,#221a30,#09090f); }
.player-area video { border-radius:0; }
.player-caption { padding:21px 22px 22px; }
.player-caption .label { display:inline-flex;font-size:9px;letter-spacing:2px;color:#b49fd1; }
.player-card.right .label { color:#c39e93; }
.player-caption h2 { font-size:20px;line-height:1.32;min-height:53px;margin:9px 0 12px;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden; }
.file-info { opacity:.6;font-size:10px; }
.player-caption .btn { margin-top:18px;min-height:46px; }
.choice-badge { position:absolute;inset:auto 18px 48px;z-index:3;display:flex;align-items:center;justify-content:center;gap:8px;padding:11px;border:1px solid #7eecac66;background:#143426ed;color:#a7f8c5;border-radius:11px;font-size:13px;backdrop-filter:blur(14px);animation:badge-in .4s var(--ease) both;box-shadow:0 5px 25px #0006; }
.player-card.choice-winner { border-color:#7eecacb0;box-shadow:0 0 0 1px #7eecac24,0 0 45px #66d89728;background:linear-gradient(155deg,#1c342a,#17241f);transform:translateY(-3px); }
.player-card.choice-loser { border-color:#fa858f88;box-shadow:0 0 30px #fa858f14;background:linear-gradient(155deg,#352128,#26191f); }
.choice-loser .choice-badge { border-color:#fa858f66;background:#421e27ed;color:#ffb2b9; }
.choice-loser video { transition:filter .4s;filter:saturate(.25) brightness(.75); }
.choice-winner .btn:disabled { background:#86e9ad;border-color:#86e9ad;color:#163425;opacity:1; }
.choice-loser .btn:disabled { background:#583039;border-color:#8c4852;color:#efb0b6;opacity:1; }
.match-grid.is-exiting { animation:pair-out .36s ease-in both;pointer-events:none; }
.match-grid.is-entering .player-card:first-child { animation:candidate-left .4s var(--ease) both; }
.match-grid.is-entering .player-card:last-child { animation:candidate-right .4s var(--ease) both; }
.match-grid.is-entering .vs { animation:page-in .4s ease both; }
.bracket-panel { margin-top:34px; }
.bracket-tools { gap:16px;margin:22px 0 18px; }
.bracket-tools h2 { margin-top:3px; }
.bracket-scroll { padding:22px; max-height:650px;border-radius:20px;background:radial-gradient(ellipse at 50% 30%,#77588e0b,transparent 65%),#111019;border-color:#c3a4e71e;scrollbar-width:thin;scrollbar-color:#655171 #14101b; }
.bracket-canvas { position:relative;margin:auto; }
.bracket-connections { position:absolute;inset:0;pointer-events:none;overflow:visible; }
.bracket-connections path { fill:none;stroke:#51415f;stroke-width:1.3;stroke-linejoin:round;opacity:.6;transition:stroke .4s,opacity .4s; }
.bracket-connections path.advanced { stroke:#c1a2f2;opacity:.85; }
.branch-heading { position:absolute;top:0;text-align:center; }
.branch-heading strong { color:#bcadce;font-size:12px;font-weight:550; }
.branch-heading span { display:block;font-size:9px;color:#796887;margin-top:3px;letter-spacing:.4px; }
.branch-heading.center strong { color:#e8c38f; }
.bracket-match { border-radius:12px;border-color:#6c55774a;background:linear-gradient(150deg,#201929,#1b1522);overflow:hidden;transition:border-color .25s,box-shadow .25s; }
.bracket-match small { height:27px;align-items:center;padding:0 10px;background:#ffffff03;color:#8e7c9c;font-size:9px; }
.bracket-match small span { display:flex;align-items:center;gap:5px; }
.bracket-match small .icon { width:12px;height:12px;color:#e8c38f; }
.bracket-match.current { border-color:#c2a9ff;box-shadow:0 0 0 1px #b29af31c,0 0 25px #a28cf31c; }
.bracket-match.current small { color:#c4b1ea; }
.bracket-match.central-final { border-color:#b08e566e;background:linear-gradient(135deg,#30241e,#251e29);box-shadow:0 0 40px #f6c47b0b; }
.bracket-entry { height:54px;min-height:54px;padding:7px 8px;gap:8px;border-top-color:#ffffff08;color:#d1c6de;overflow:hidden;transition:background .22s,color .22s,opacity .22s; }
.bracket-entry:hover:not(:disabled) { background:#bda7ff12;color:#fff; }
.bracket-entry-title { display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden;min-width:0;flex:1;font-size:10px;line-height:1.35;overflow-wrap:anywhere; }
.entry-status { display:grid;place-items:center;width:12px;flex-shrink:0;opacity:.55; }
.entry-status .icon { width:12px;height:12px; }
.bracket-entry.winner { background:#66d8970a;color:#a8eac0; }
.bracket-entry.winner .entry-status { opacity:1;color:#8ae8ad; }
.bracket-entry.loser { color:#8f819c;text-decoration:none; }
.bracket-entry.loser .media-thumb { filter:saturate(.35);opacity:.5; }
.bracket-entry:disabled { color:#756681;background:#ffffff01; }
.media-thumb { display:grid;place-items:center;position:relative;overflow:hidden;width:63px;height:37px;border-radius:6px;flex-shrink:0;background:radial-gradient(ellipse at 30% 20%,#513b6d,#241c30);color:#ad8dce;border:1px solid #ffffff0b; }
.media-thumb>.icon { width:16px;height:16px;opacity:.5; }
.media-thumb img { position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity .4s; }
.media-thumb.has-image img { opacity:1; }
.media-thumb.has-image>.icon { opacity:0; }
.media-thumb.placeholder { background:#ffffff03;opacity:.45; }
.thumb { padding:0;overflow:hidden;width:76px;height:44px;border-radius:8px;border-color:#ffffff12; }
.thumb .media-thumb { width:100%;height:100%;border:0;border-radius:0; }
.video-name { gap:13px; }
.name-text .badge.warn { display:table;margin:4px 0; }
.bracket-note { display:flex;align-items:center;gap:6px;margin-top:12px!important; }
.bracket-note .icon { width:12px;height:12px; }
.single-round { display:grid;grid-template-columns:minmax(238px,1fr) 170px minmax(238px,1fr);gap:30px;align-items:start; }
.single-round h3 { font-size:12px;color:#af9bc4;text-align:center;margin-bottom:20px; }
.single-round .bracket-match { width:238px;margin:0 auto 18px; }
.single-round-center { display:grid;justify-items:center;text-align:center;gap:8px;padding-top:38px;color:#cab091;font-size:12px;position:sticky;top:40px; }
.single-round-center>.icon { width:32px;height:32px;opacity:.7; }
.single-round-center small { color:#796985;font-size:10px; }
.champion { position:relative;overflow:hidden;border-radius:22px;background:radial-gradient(ellipse at 10% 0%,#c6a66c15,transparent 70%),#1c1821;animation:champion-in .6s var(--ease) both; }
.champion .champion-thumb { float:right;width:180px;height:102px;margin-left:30px;border-radius:12px; }
.champion>div:nth-child(2) { flex:1; }
.result-grid { gap:12px; }
.result-card { border-radius:14px;background:linear-gradient(145deg,#201827,#18131f);padding:12px;display:flex;align-items:center;gap:12px;min-height:86px; }
.result-card .media-thumb { width:88px;height:55px;border-radius:8px; }
.result-card-copy { min-width:0; }
.result-card-copy strong { display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:3;overflow:hidden;font-weight:500;font-size:12px; }
.result-card .badge { margin-bottom:5px; }
.result-card:hover { transform:none;box-shadow:none; }
dialog[open] { animation:dialog-in .3s var(--ease) both;border-radius:20px;background:linear-gradient(140deg,#211a2c,#17131e);box-shadow:0 35px 110px #000a; }
dialog[open]::backdrop { animation:backdrop-in .3s ease both; }
#toast { border-radius:13px;transform:translate(-50%,8px);transition:opacity .25s,transform .35s var(--ease); }
#toast.visible { transform:translate(-50%,0); }
@keyframes page-in { from{opacity:0;transform:translateY(7px)}to{opacity:1;transform:translateY(0)} }
@keyframes art-in { from{opacity:0;transform:translateX(15px)}to{opacity:.9;transform:translateX(0)} }
@keyframes pair-out { from{opacity:1;filter:brightness(1);transform:scale(1)}to{opacity:0;filter:brightness(.35);transform:scale(.975) translateY(8px)} }
@keyframes candidate-left { from{opacity:0;transform:translateX(-20px) scale(.985)}to{opacity:1;transform:translateX(0) scale(1)} }
@keyframes candidate-right { from{opacity:0;transform:translateX(20px) scale(.985)}to{opacity:1;transform:translateX(0) scale(1)} }
@keyframes badge-in { from{opacity:0;transform:translateY(8px) scale(.96)}to{opacity:1;transform:translateY(0) scale(1)} }
@keyframes dialog-in { from{opacity:0;transform:translateY(12px) scale(.975)}to{opacity:1;transform:translateY(0) scale(1)} }
@keyframes backdrop-in { from{opacity:0}to{opacity:1} }
@keyframes champion-in { from{opacity:0;transform:translateY(15px) scale(.985)}to{opacity:1;transform:translateY(0) scale(1)} }
.resume-card { display:flex;align-items:center;gap:20px;padding:24px;border:1px solid #b49aff32;border-radius:18px;background:linear-gradient(120deg,#211a32,#17131f);margin:0 0 25px; }
.resume-icon { width:46px;height:46px;display:grid;place-items:center;flex-shrink:0;border-radius:13px;background:#b49aff12;color:#c5b2ef; }
.resume-copy { flex:1;min-width:0; }
.resume-copy h2 { font-size:18px;margin:4px 0;overflow-wrap:anywhere; }
.resume-copy .progress { margin-top:10px;max-width:320px; }
.save-indicator { display:block;font-size:10px;color:#9bbca9;margin-top:7px; }
[data-save-status][data-phase="saving"] { color:#b5a6ce; }
[data-save-status][data-phase="failed"] { color:#f6a0ad; }
[data-save-status][data-phase="recovery"] { color:#d8bb88; }
@media(max-width:800px){.resume-card{flex-wrap:wrap;gap:14px;padding:19px}.resume-copy{flex-basis:calc(100% - 64px)}.resume-card>.btn{margin-left:60px}.tournament-header .actions{gap:8px}}
@media(max-width:1100px){.player-caption{padding:16px}.player-caption h2{font-size:17px}.result-card .media-thumb{width:65px;height:42px}}
@media(max-width:800px){.match-grid{gap:16px}.vs{display:none}.hero{padding:28px}.category-card{padding:23px}.player-caption h2{min-height:0}.bracket-scroll{padding:16px;max-height:560px}.bracket-tools{flex-wrap:wrap}.champion .champion-thumb{width:112px;height:63px;margin-left:16px}.single-round{gap:20px;grid-template-columns:238px 120px 238px}}
@media(max-width:480px){.champion .champion-thumb{display:none}.player-card{border-radius:15px}.hero{border-radius:20px}.result-card .media-thumb{width:88px;height:55px}.choice-badge{inset:auto 12px 44px}}
/* About 70% of the desktop viewport area; the player owns the remaining space. */
dialog.video-preview { width:84vw;height:84vh;height:84dvh;max-width:calc(100vw - 24px);max-height:calc(100vh - 24px);max-height:calc(100dvh - 24px);padding:22px;overflow:hidden; }
dialog.video-preview[open] { display:flex;flex-direction:column;gap:16px; }
.preview-header { display:flex;align-items:flex-start;gap:18px;flex-shrink:0;min-width:0; }
.preview-header h2 { flex:1;min-width:0;margin:0;overflow-wrap:anywhere;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;line-height:1.35; }
.preview-close { flex-shrink:0;width:39px;padding:8px; }
.video-preview .dialog-player { flex:1 1 0;min-height:0;height:0;width:100%;max-height:none;margin:0;display:block;object-fit:contain;border-radius:12px; }
.preview-unavailable { flex:1;min-height:0;display:grid;place-items:center; }
.preview-details { flex-shrink:0;max-height:84px;overflow:auto;overscroll-behavior:contain; }
.preview-caption { white-space:pre-wrap;margin-top:8px;overflow-wrap:anywhere; }
.video-preview .dialog-actions { flex-shrink:0;margin:0; }
@media(max-width:800px){dialog.video-preview{width:calc(100vw - 24px);height:90vh;height:90dvh;padding:16px}dialog.video-preview[open]{gap:12px}.preview-header{gap:12px}.preview-header h2{font-size:18px}.preview-details{max-height:68px}}
@media(max-height:500px){dialog.video-preview{height:calc(100vh - 24px);height:calc(100dvh - 24px);padding:12px}dialog.video-preview[open]{gap:8px}.preview-header h2{font-size:16px;-webkit-line-clamp:1}.preview-close{width:33px;min-height:33px;padding:6px}.preview-details{max-height:36px}.video-preview .dialog-actions .btn{min-height:33px;padding:6px 10px}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*{animation:none!important;transition:none!important}}