*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;font-family:Inter,Roboto,Arial,sans-serif;color:#0d2a63;background:#f7f7f7;min-height:100vh}.topbar{min-height:82px;background:#102b68;border-top:8px solid #dcefed;display:flex;align-items:center;padding:0 34px;gap:42px;box-shadow:0 8px 24px rgba(0,0,0,.12);position:sticky;top:0;z-index:50}.brand{display:flex;align-items:center;gap:12px;min-width:320px;color:white;font-weight:900;letter-spacing:1px;font-size:22px}.logo-ball{width:42px;height:42px;border-radius:50%;display:grid;place-items:center;background:linear-gradient(135deg,#fff,#d6d6d6);color:#050505;font-weight:900}.nav-links{display:flex;align-items:center;gap:44px;flex:1;height:74px}.nav-links a{height:100%;display:flex;align-items:center;color:#e8efff;text-decoration:none;font-size:24px;font-weight:600;position:relative;cursor:pointer;white-space:nowrap}.nav-links a.active:after,.nav-links a:hover:after{content:"";position:absolute;left:0;right:0;bottom:0;height:6px;background:#ff9f1c}.nav-actions{display:flex;align-items:center;gap:18px}.icon-btn{width:54px;height:54px;border-radius:50%;border:0;background:rgba(255,255,255,.2);color:white;display:grid;place-items:center;cursor:pointer}.admin-login-btn{border:1px solid rgba(255,255,255,.24);background:rgba(255,255,255,.12);color:white;border-radius:999px;padding:14px 20px;font-size:15px;font-weight:900;cursor:pointer;white-space:nowrap}.admin-login-btn.signed-in{background:linear-gradient(135deg,#009750,#006b46);border-color:transparent}.language-menu{position:absolute;right:26px;top:74px;background:white;color:#102b68;border-radius:16px;box-shadow:0 18px 40px rgba(0,0,0,.2);overflow:hidden;display:none;min-width:150px}.language-menu.open{display:block}.language-menu button{width:100%;background:white;color:#102b68;border:0;padding:14px 18px;text-align:left;font-size:16px;cursor:pointer;font-weight:800}.modal{position:fixed;inset:0;background:rgba(0,0,0,.52);display:grid;place-items:center;z-index:200;padding:24px}.modal.hidden{display:none}.modal-card{width:min(560px,100%);background:white;color:#102b68;border-radius:24px;padding:28px;box-shadow:0 28px 80px rgba(0,0,0,.28);position:relative}.modal-card h2{margin:0 0 10px;font-size:42px}.modal-card p{color:#53617e;font-weight:800;line-height:1.5}.modal-card input{width:100%;border:1px solid #dce2f0;border-radius:18px;padding:16px 20px;margin:12px 0 16px;font-size:16px;color:#102b68;outline:none}.admin-submit{width:100%;border:0;border-radius:14px;padding:14px;color:white;background:linear-gradient(135deg,#102b68,#009750);font-weight:900;cursor:pointer}.modal-close{position:absolute;right:20px;top:18px;border:0;background:transparent;font-size:34px;color:#102b68;cursor:pointer}.login-error{color:#d81e2d!important;min-height:20px}.search-card{max-height:82vh;overflow:auto}.global-search-results{display:grid;gap:10px;margin-top:14px}.search-result-item{border:1px solid #dce2f0;border-radius:14px;padding:14px;background:#f7f9ff;cursor:pointer}.search-result-item strong{display:block;color:#102b68;font-size:17px}.search-result-item span{display:block;color:#53617e;font-weight:800;margin-top:4px}.search-empty{color:#d81e2d;font-weight:900;padding:12px 0}.player-match-list{margin-top:12px;display:grid;gap:8px}.player-match-line{border:1px solid #dce2f0;border-radius:10px;padding:9px 10px;font-weight:800;font-size:14px}.win-line{background:#e9f8f1;border-color:#009750;color:#006b46}.loss-line{background:#fff0f1;border-color:#d81e2d;color:#a31422}.upcoming-line{background:#fff8e8;border-color:#ff9f1c;color:#8a5a00}.player-match-line small{display:block;margin-top:3px;font-weight:800}.page{max-width:1280px;margin:0 auto;padding:34px 28px 80px}.app-section{display:none}.app-section.active-section{display:block}.home-section{padding:30px 0 70px}.home-hero{min-height:520px;border-radius:34px;padding:54px;display:grid;grid-template-columns:1.2fr .8fr;gap:34px;align-items:center;background:radial-gradient(circle at top left,rgba(216,30,45,.35),transparent 34%),radial-gradient(circle at bottom right,rgba(0,151,80,.3),transparent 34%),linear-gradient(135deg,#102b68,#071844 70%);color:white;overflow:hidden;box-shadow:0 30px 80px rgba(16,43,104,.25)}.home-content h1{font-size:clamp(46px,7vw,86px);line-height:.92;margin:12px 0 20px;color:white;letter-spacing:-2px}.home-intro{font-size:20px;line-height:1.7;color:#dce8ff}.home-actions{display:flex;flex-wrap:wrap;gap:14px;margin-top:28px}.primary-link,.secondary-link{text-decoration:none;border-radius:999px;padding:16px 24px;font-weight:900}.primary-link{background:linear-gradient(135deg,#d81e2d,#009750);color:white}.secondary-link{background:rgba(255,255,255,.14);color:white;border:1px solid rgba(255,255,255,.24)}.live-tournament-widget{background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.18);border-radius:28px;padding:28px;backdrop-filter:blur(18px)}.widget-top{display:flex;align-items:center;gap:10px;color:#ffd166;font-weight:900;text-transform:uppercase;letter-spacing:1px;font-size:13px}.pulse-dot{width:12px;height:12px;border-radius:50%;background:#00ff88}.live-tournament-widget h2{font-size:34px;margin:20px 0 8px;color:white}.live-tournament-widget p{color:#dce8ff;font-weight:800}.mini-score-row,.mini-match{margin-top:16px;background:rgba(255,255,255,.12);border-radius:18px;padding:16px;display:grid;grid-template-columns:1fr auto 1fr;gap:18px;align-items:center;color:white;font-weight:900}.mini-score-row.single-date{display:flex;justify-content:center}.mini-match b{color:#ff9f1c;white-space:nowrap;min-width:72px;text-align:center}.slider-meta{margin-top:8px;color:#dce8ff;font-size:13px;font-weight:800;text-align:center}.home-stats{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;margin-top:24px}.home-stats div,.stat-card{background:white;border:1px solid #dce2f0;border-radius:22px;padding:24px;box-shadow:0 18px 42px rgba(16,43,104,.08);text-align:center}.home-stats strong{display:block;font-size:44px;color:#102b68}.home-stats span{display:block;margin-top:8px;color:#53617e;font-weight:900}.morocco-section{margin-top:26px;background:white;border:1px solid #dce2f0;border-radius:28px;padding:34px;display:grid;grid-template-columns:1fr .5fr;gap:30px;align-items:center;box-shadow:0 18px 42px rgba(16,43,104,.08)}.morocco-section h2{font-size:38px;margin:8px 0 12px}.floating-balls{display:flex;justify-content:center;gap:14px}.floating-balls span{width:76px;height:76px;border-radius:50%;background:radial-gradient(circle at 35% 30%,#fff,#d8dee9);color:#101010;display:grid;place-items:center;font-size:28px;font-weight:900}.page-title{font-size:48px;margin:0 0 26px;color:#102b68}.tournament-card{background:white;border:1px solid #d4d8e2;border-radius:22px;padding:28px;margin-bottom:28px;box-shadow:0 18px 42px rgba(16,43,104,.08);display:flex;justify-content:space-between;align-items:center;gap:20px}.tournament-card h2{margin:6px 0 8px;font-size:34px}.tournament-card p{margin:0;color:#53617e;font-weight:700}.tournament-actions{display:flex;flex-wrap:wrap;gap:12px;justify-content:flex-end}.tournament-actions button{border:0;background:linear-gradient(135deg,#102b68,#009750);color:white;padding:15px 22px;border-radius:999px;font-size:16px;font-weight:900;cursor:pointer;white-space:nowrap}.stage-header{display:flex;justify-content:space-between;align-items:end;gap:20px;margin:34px 0 20px;scroll-margin-top:110px}.stage-header h2{margin:5px 0 0;font-size:38px}.stage-header span{color:#53617e;font-weight:800}.eyebrow{color:#d81e2d;text-transform:uppercase;letter-spacing:2px;font-weight:900;font-size:13px}.groups-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:20px}.group-card{border-radius:22px;border:1px solid #dce2f0;overflow:hidden;background:white;box-shadow:0 14px 34px rgba(16,43,104,.08)}.group-head{padding:16px 18px;font-weight:900;display:flex;justify-content:space-between;background:#e8f4ee}.group-card:nth-child(even) .group-head{background:#fff4d8}.group-card:nth-child(3n) .group-head{background:#f4e2dc}.match-row{display:grid;grid-template-columns:70px 1fr 70px 1fr;gap:10px;align-items:center;padding:12px 16px;border-top:1px solid #edf0f7;font-weight:700;font-size:14px}.table-tag{color:#53617e;font-size:12px;font-weight:900}.score-pill{background:#102b68;color:white;border-radius:999px;padding:6px 10px;text-align:center;font-weight:900;white-space:nowrap}.group-ranking-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:20px;margin-bottom:34px}.group-ranking-card,.ranking-card{background:white;border:1px solid #dce2f0;border-radius:22px;overflow:hidden;box-shadow:0 14px 34px rgba(16,43,104,.08)}.group-ranking-card h3{margin:0;padding:16px 18px;background:#102b68;color:white;font-size:18px}table{width:100%;border-collapse:collapse}th,td{text-align:left;padding:18px;border-bottom:1px solid #edf0f7}th{color:#3c78ff;font-size:13px;text-transform:uppercase;letter-spacing:1.5px}td{font-weight:700}.knockout-board{display:grid;gap:28px}.round-header{display:flex;align-items:center;gap:18px;font-size:18px;font-weight:700;margin-bottom:8px}.round-arrow{font-size:24px}.ko-row{display:grid;grid-template-columns:54px minmax(0,1.45fr) 74px 74px minmax(0,1.45fr) 110px 100px 140px;align-items:center;min-height:56px;background:#223f80;color:#fff;font-size:18px;font-weight:500}.ko-row:nth-child(even){background:#202c76}.ko-row.finished{background:#154f3f}.ko-id{text-align:center;color:#dce8ff;background:rgba(255,255,255,.04);height:100%;display:grid;place-items:center;font-size:17px;font-weight:600}.ko-player{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:0 12px;min-width:0;color:#fff;font-weight:500;cursor:pointer}.ko-player-main{display:flex;align-items:center;gap:10px;min-width:0;flex:1}.ko-player-name{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.flag{width:24px;height:17px;background:#e60012;border:1px solid rgba(255,255,255,.8);display:inline-grid;place-items:center;color:#009750;font-size:12px;flex:0 0 auto}.ko-score{height:100%;display:grid;place-items:center;font-size:24px;font-weight:800;color:#fff}.winner-score{color:#ffb124!important;font-weight:900!important}.ko-time,.ko-table{padding:0 14px;text-align:right;white-space:nowrap;color:#fff;font-weight:500;font-size:17px}.inline-score-actions{display:flex;align-items:center;gap:4px;flex-shrink:0}.score-mini-btn{width:26px;height:26px;border:0;border-radius:7px;background:#fff;color:#102b68;font-size:17px;font-weight:900;line-height:1;cursor:pointer}.ko-side-actions{display:flex;flex-direction:column;gap:6px;padding:0 10px 0 0;align-items:stretch}.side-action-btn{border:0;border-radius:10px;padding:8px 10px;cursor:pointer;font-weight:900;background:#fff;color:#102b68;white-space:nowrap}.admin-tools{background:white;border:1px solid #dce2f0;border-radius:20px;padding:18px;margin:18px 0 26px;display:none;flex-wrap:wrap;gap:12px;align-items:center;box-shadow:0 14px 34px rgba(16,43,104,.07)}body.admin-authenticated .admin-tools,body.player-mode .admin-tools{display:flex}.admin-tools strong{margin-right:auto}.admin-tools button,.player-link-box button{border:0;border-radius:10px;padding:8px 12px;cursor:pointer;font-weight:900;background:white;color:#102b68}.admin-tools button.active-control{background:linear-gradient(135deg,#102b68,#009750);color:white}.player-link-box{background:#f7f9ff;border:1px solid #dce2f0;border-radius:18px;padding:16px;margin-bottom:22px;display:none}.player-link-box.show{display:block}.player-link-box input{width:100%;margin:10px 0;border:1px solid #dce2f0;border-radius:12px;padding:12px;color:#102b68}.player-view-header{display:none;background:white;border:1px solid #dce2f0;border-radius:22px;padding:24px;margin-bottom:22px;box-shadow:0 14px 34px rgba(16,43,104,.08)}body.player-link-view .topbar,body.player-link-view footer,body.player-link-view .page-title,body.player-link-view .tournament-card,body.player-link-view .admin-tools,body.player-link-view .player-link-box,body.player-link-view .groups-grid,body.player-link-view .stage-header{display:none!important}body.player-link-view .player-view-header{display:block}body.player-link-view .page{max-width:980px;padding-top:34px}body.player-link-view .round-header{display:none}.rank{display:inline-grid;place-items:center;width:34px;height:34px;border-radius:50%;background:#dfe7f5;color:#102b68;border:1px solid rgba(16,43,104,.14);font-weight:900;font-size:16px;line-height:1}.gold{background:#ffd166;color:#101010}.silver{background:#d8dee9;color:#101010}.bronze{background:#c08552;color:#101010}.ranking-mobile-cards{display:none}.ranking-mobile-card{background:white;border:1px solid #dce2f0;border-radius:18px;padding:16px;box-shadow:0 12px 28px rgba(16,43,104,.08)}.ranking-mobile-top{display:flex;align-items:center;gap:12px;margin-bottom:14px}.ranking-mobile-name{font-size:20px;font-weight:900;line-height:1.15}.ranking-mobile-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:10px}.ranking-mobile-stat{background:#f7f9ff;border:1px solid #edf0f7;border-radius:12px;padding:10px}.ranking-mobile-stat small{display:block;color:#53617e;font-weight:900;text-transform:uppercase;letter-spacing:.6px;font-size:11px}.ranking-mobile-stat strong{display:block;font-size:18px;margin-top:4px}footer{max-width:1280px;margin:0 auto;padding:35px 28px 60px;color:#53617e;display:flex;justify-content:space-between;gap:20px}footer strong{color:#102b68}.player-selected{background:#ff9f1c!important;color:#fff!important;border-radius:6px}.player-row-focus{outline:2px solid rgba(255,159,28,.55);outline-offset:-2px}@media(max-width:850px){.topbar{height:auto;display:grid;grid-template-columns:1fr;padding:14px 16px 0;gap:12px}.brand{min-width:0;width:100%;font-size:22px}.brand span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.nav-actions{width:100%;display:grid;grid-template-columns:1fr 54px 54px;gap:10px}.admin-login-btn{width:100%;padding:13px 14px;font-size:16px}.nav-links{order:3;width:calc(100% + 32px);margin-left:-16px;margin-right:-16px;height:auto;display:grid;grid-template-columns:repeat(3,1fr);gap:0;background:#102b68;border-top:1px solid rgba(255,255,255,.12)}.nav-links a{height:56px;justify-content:center;text-align:center;font-size:15px;padding:0 6px;white-space:normal}.page{padding:24px 18px 70px}.home-hero,.morocco-section,.home-stats,.groups-grid,.group-ranking-grid{grid-template-columns:1fr}.home-hero{padding:30px 24px;border-radius:26px;min-height:auto}.home-content h1{font-size:42px}.home-actions{flex-direction:column}.primary-link,.secondary-link{text-align:center;width:100%}.tournament-card,.stage-header{flex-direction:column;align-items:flex-start}.tournament-actions{width:100%;flex-direction:column}.tournament-actions button{width:100%;text-align:center}.match-row{grid-template-columns:1fr;gap:6px}.ko-row{grid-template-columns:44px 1fr 56px!important;grid-template-areas:"id playerA scoreA" "id playerB scoreB" "id meta meta" "id actions actions"!important;align-items:stretch!important;min-height:auto!important;font-size:15px}.ko-id{grid-area:id!important;min-height:132px!important}.ko-row>.ko-player:nth-child(2){grid-area:playerA!important}.ko-row>.ko-score:nth-child(3){grid-area:scoreA!important}.ko-row>.ko-score:nth-child(4){grid-area:scoreB!important}.ko-row>.ko-player:nth-child(5){grid-area:playerB!important}.ko-time{grid-area:meta!important;display:block!important;text-align:left!important;padding:8px 12px 2px 12px!important;font-size:14px!important;background:rgba(0,0,0,.08)!important}.ko-table{grid-area:meta!important;display:block!important;text-align:right!important;padding:8px 12px 2px 12px!important;font-size:14px!important;background:rgba(0,0,0,.08)!important}.ko-time:before{content:"Time: ";font-weight:900;color:#ff9f1c}.ko-table:before{content:"Table: ";font-weight:900;color:#ff9f1c}.ko-side-actions{grid-area:actions!important;flex-direction:row!important;flex-wrap:wrap!important;padding:8px 12px 12px!important;background:rgba(0,0,0,.08)!important}.ko-player{padding:10px 12px!important;min-height:48px!important}.ko-player-name{white-space:normal!important;overflow:visible!important;line-height:1.15!important}.score-mini-btn{width:24px!important;height:24px!important;font-size:16px!important}.ko-score{min-height:48px!important;font-size:24px!important}.ranking-table-view{display:none}.ranking-mobile-cards{display:grid;gap:14px}th,td{padding:15px;font-size:14px}}
/* ===== FINAL OVERRIDE v5: smaller score buttons + Score Link label layout ===== */
.inline-score-actions {
gap: 4px !important;
}
.score-mini-btn {
width: 24px !important;
height: 24px !important;
min-width: 24px !important;
min-height: 24px !important;
border-radius: 6px !important;
font-size: 16px !important;
line-height: 1 !important;
padding: 0 !important;
}
.ko-side-actions {
width: 106px !important;
max-width: 106px !important;
padding-right: 8px !important;
}
.side-action-btn {
font-size: 13px !important;
padding: 7px 8px !important;
border-radius: 8px !important;
min-height: 32px !important;
line-height: 1.1 !important;
}
@media (max-width: 850px) {
.score-mini-btn {
width: 22px !important;
height: 22px !important;
min-width: 22px !important;
min-height: 22px !important;
font-size: 15px !important;
}
.ko-side-actions {
width: auto !important;
max-width: none !important;
}
.side-action-btn {
font-size: 12px !important;
padding: 7px 9px !important;
}
}
/* ===== MCS v6 hard override ===== */
.score-mini-btn{
width:20px!important;
height:20px!important;
min-width:20px!important;
min-height:20px!important;
border-radius:5px!important;
font-size:14px!important;
padding:0!important;
line-height:1!important;
}
.inline-score-actions{gap:3px!important}
.side-action-btn{
font-size:12px!important;
padding:6px 7px!important;
min-height:28px!important;
border-radius:7px!important;
}
.ko-side-actions{
width:92px!important;
max-width:92px!important;
}
@media(max-width:850px){
.score-mini-btn{
width:20px!important;
height:20px!important;
min-width:20px!important;
min-height:20px!important;
font-size:14px!important;
}
.ko-side-actions{
width:auto!important;
max-width:none!important;
}
}
/* ===== MCS v7: compact score controls, center reset, score link alone ===== */
.ko-row{
grid-template-columns:54px minmax(0,1.4fr) 62px 58px 62px minmax(0,1.4fr) 100px 90px 96px!important;
}
.ko-center-reset{
height:100%;
display:grid;
place-items:center;
background:transparent!important;
}
.center-reset-btn{
border:0!important;
border-radius:7px!important;
background:#ffffff!important;
color:#102b68!important;
font-size:11px!important;
font-weight:900!important;
padding:5px 7px!important;
min-width:48px!important;
min-height:24px!important;
cursor:pointer!important;
line-height:1!important;
}
.score-mini-btn{
width:20px!important;
height:20px!important;
min-width:20px!important;
min-height:20px!important;
border-radius:5px!important;
font-size:14px!important;
padding:0!important;
line-height:1!important;
}
.inline-score-actions{
gap:3px!important;
}
.ko-side-actions{
width:96px!important;
max-width:96px!important;
padding-right:8px!important;
display:grid!important;
place-items:center!important;
}
.score-link-btn,
.side-action-btn{
font-size:11px!important;
padding:6px 7px!important;
min-height:26px!important;
border-radius:7px!important;
line-height:1.05!important;
width:88px!important;
max-width:88px!important;
white-space:normal!important;
text-align:center!important;
}
@media(max-width:850px){
.ko-row{
grid-template-columns:44px 1fr 42px 48px 42px!important;
grid-template-areas:
"id playerA scoreA reset scoreB"
"id playerB playerB playerB playerB"
"id meta meta meta meta"
"id actions actions actions actions"!important;
}
.ko-row>.ko-player:nth-child(2){grid-area:playerA!important}
.ko-row>.ko-score:nth-child(3){grid-area:scoreA!important}
.ko-center-reset{grid-area:reset!important}
.ko-row>.ko-score:nth-child(5){grid-area:scoreB!important}
.ko-row>.ko-player:nth-child(6){grid-area:playerB!important}
.center-reset-btn{
font-size:10px!important;
padding:4px 5px!important;
min-width:40px!important;
min-height:22px!important;
}
.score-mini-btn{
width:20px!important;
height:20px!important;
min-width:20px!important;
min-height:20px!important;
font-size:14px!important;
}
.ko-side-actions{
width:auto!important;
max-width:none!important;
justify-content:flex-start!important;
place-items:start!important;
}
.score-link-btn,
.side-action-btn{
width:auto!important;
max-width:none!important;
font-size:12px!important;
padding:7px 9px!important;
}
}
/* ===== MCS v8: player link must show only assigned match ===== */
body.player-link-view #groupRankingGrid,
body.player-link-view .group-ranking-grid,
body.player-link-view .group-ranking-card,
body.player-link-view #groupStageSection,
body.player-link-view #groupRankingSection,
body.player-link-view .groups-grid,
body.player-link-view .tournament-card,
body.player-link-view .page-title,
body.player-link-view .admin-tools,
body.player-link-view .player-link-box,
body.player-link-view footer,
body.player-link-view .topbar {
display: none !important;
}
body.player-link-view .round-block:not(:has(.ko-row)) {
display: none !important;
}
body.player-link-view .knockout-board {
gap: 0 !important;
}
body.player-link-view .ko-row {
margin-top: 0 !important;
}
body.player-link-view .tournament-details {
margin-top: 0 !important;
}
/* ===== MCS v9: Cuescore-style player score link screen ===== */
body.player-link-view{
background:#061b2b!important;
}
body.player-link-view .page{
max-width:none!important;
width:100%!important;
min-height:100vh!important;
padding:0!important;
margin:0!important;
}
body.player-link-view #tournamentDetails{
margin:0!important;
}
body.player-link-view .player-view-header,
body.player-link-view .round-header,
body.player-link-view .round-block:not(:has(.player-score-screen)){
display:none!important;
}
body.player-link-view .knockout-board{
display:block!important;
width:100%!important;
}
.player-score-screen{
min-height:100vh;
width:100%;
position:relative;
overflow:hidden;
color:white;
background:
radial-gradient(circle at 20% 15%, rgba(28, 130, 165, .22), transparent 34%),
radial-gradient(circle at 86% 45%, rgba(0, 151, 80, .16), transparent 36%),
linear-gradient(135deg,#09263a 0%,#071a2c 48%,#062436 100%);
display:flex;
flex-direction:column;
align-items:center;
justify-content:flex-start;
padding:34px 34px 26px;
}
.player-score-screen::before{
content:"";
position:absolute;
inset:0;
background:
linear-gradient(135deg, transparent 0 72%, rgba(255,255,255,.035) 72% 100%),
radial-gradient(circle at top left, rgba(255,255,255,.045), transparent 24%);
pointer-events:none;
}
.player-score-screen h1{
position:relative;
z-index:2;
margin:18px 0 20px;
color:#fff;
font-size:clamp(30px,4vw,56px);
letter-spacing:8px;
font-weight:900;
text-align:center;
text-shadow:0 3px 10px rgba(0,0,0,.45);
}
.player-score-brand{
position:absolute;
z-index:3;
right:32px;
top:30px;
display:grid;
grid-template-columns:auto auto;
gap:0 8px;
align-items:center;
font-weight:900;
letter-spacing:3px;
text-align:right;
}
.player-score-brand strong{
grid-column:1;
color:#fff;
font-size:18px;
}
.player-score-brand span{
grid-column:1;
color:#28b8c8;
font-size:18px;
}
.player-score-brand em{
grid-column:2;
grid-row:1 / 3;
width:46px;
height:46px;
border:3px solid rgba(255,255,255,.6);
border-radius:14px;
display:grid;
place-items:center;
font-style:normal;
color:#fff;
}
.player-score-layout{
position:relative;
z-index:2;
width:min(1500px,100%);
flex:1;
display:grid;
grid-template-columns:150px 1fr 280px 1fr 150px;
align-items:center;
gap:26px;
}
.edge-controls{
display:flex;
flex-direction:column;
gap:48px;
align-items:center;
justify-content:center;
}
.big-score-btn{
width:112px;
height:112px;
border:0;
border-radius:50%;
color:white;
font-size:78px;
line-height:1;
font-weight:300;
cursor:pointer;
box-shadow:0 18px 40px rgba(0,0,0,.35), inset 0 3px 10px rgba(255,255,255,.25);
}
.big-score-btn.plus{
background:linear-gradient(180deg,#33d7ff,#0274d9);
}
.big-score-btn.minus{
background:linear-gradient(180deg,#ff6069,#e01720);
}
.score-player{
display:flex;
flex-direction:column;
align-items:center;
justify-content:center;
min-width:0;
}
.portrait-frame{
width:185px;
height:185px;
position:relative;
display:grid;
place-items:center;
clip-path:polygon(25% 5%,75% 5%,100% 50%,75% 95%,25% 95%,0 50%);
background:linear-gradient(135deg,#295d73,#0b2336);
border:5px solid rgba(71,180,210,.55);
box-shadow:0 20px 45px rgba(0,0,0,.4);
}
.portrait-initials{
width:100%;
height:100%;
display:grid;
place-items:center;
color:#fff;
font-size:54px;
font-weight:900;
background:
radial-gradient(circle at 40% 30%,rgba(255,255,255,.16),transparent 30%),
linear-gradient(135deg,#1e5b70,#081b2d);
}
.morocco-badge{
position:absolute;
right:-24px;
bottom:30px;
width:78px;
height:54px;
background:#e60012;
border:2px solid rgba(255,255,255,.8);
color:#009750;
display:grid;
place-items:center;
font-size:28px;
z-index:3;
box-shadow:0 10px 25px rgba(0,0,0,.35);
}
.giant-score{
margin-top:24px;
font-size:clamp(84px,11vw,170px);
line-height:.86;
font-weight:900;
color:#fff;
text-shadow:0 8px 18px rgba(0,0,0,.5);
}
.giant-score.winner-score{
color:#ffb124!important;
}
.score-player-name{
margin-top:22px;
font-size:clamp(24px,2.5vw,42px);
font-weight:900;
text-align:center;
max-width:100%;
line-height:1.12;
text-shadow:0 3px 10px rgba(0,0,0,.45);
}
.center-match-info{
text-align:center;
align-self:center;
padding-top:80px;
}
.table-name{
color:#fff;
font-size:34px;
font-weight:900;
letter-spacing:2px;
margin-bottom:14px;
}
.race-text{
color:#b7c2cf;
font-size:26px;
font-weight:800;
}
.race-number{
color:#ffb124;
font-size:58px;
font-weight:900;
line-height:1.1;
}
.match-over{
margin-top:18px;
color:#00ff88;
font-size:16px;
font-weight:900;
letter-spacing:1px;
text-transform:uppercase;
}
.runout-controls{
margin-top:30px;
display:flex;
align-items:center;
justify-content:center;
gap:20px;
}
.runout-controls strong{
min-width:54px;
text-align:center;
font-size:54px;
line-height:1;
color:#fff;
font-weight:900;
}
.runout-btn{
width:54px;
height:54px;
border:0;
border-radius:50%;
color:white;
font-size:38px;
line-height:1;
font-weight:700;
cursor:pointer;
box-shadow:0 10px 24px rgba(0,0,0,.28), inset 0 2px 8px rgba(255,255,255,.25);
}
.minus-small{
background:linear-gradient(180deg,#ff5964,#e01720);
}
.plus-small{
background:linear-gradient(180deg,#33d7ff,#0274d9);
}
.runout-label{
margin-top:10px;
color:#aebac8;
font-size:24px;
font-weight:800;
}
.player-screen-reset{
position:absolute;
z-index:4;
left:50%;
bottom:28px;
transform:translateX(-50%);
border:1px solid rgba(255,255,255,.28);
background:rgba(255,255,255,.08);
color:#fff;
border-radius:999px;
padding:10px 18px;
font-weight:900;
cursor:pointer;
}
@media(max-width:900px){
.player-score-screen{
min-height:100vh;
padding:22px 14px 24px;
}
.player-score-screen h1{
font-size:24px;
letter-spacing:3px;
margin-top:58px;
}
.player-score-brand{
right:16px;
top:18px;
transform:scale(.72);
transform-origin:top right;
}
.player-score-layout{
grid-template-columns:64px 1fr 92px 1fr 64px;
gap:8px;
}
.big-score-btn{
width:58px;
height:58px;
font-size:42px;
}
.edge-controls{
gap:34px;
}
.portrait-frame{
width:90px;
height:90px;
}
.portrait-initials{
font-size:28px;
}
.morocco-badge{
width:42px;
height:29px;
font-size:16px;
right:-14px;
bottom:14px;
}
.giant-score{
margin-top:18px;
font-size:76px;
}
.score-player-name{
font-size:18px;
min-height:42px;
}
.center-match-info{
padding-top:80px;
}
.table-name{
font-size:18px;
}
.race-text{
font-size:15px;
}
.race-number{
font-size:36px;
}
.runout-controls{
gap:8px;
margin-top:14px;
}
.runout-controls strong{
font-size:32px;
min-width:32px;
}
.runout-btn{
width:34px;
height:34px;
font-size:24px;
}
.runout-label{
font-size:15px;
}
.player-screen-reset{
bottom:12px;
font-size:12px;
padding:8px 13px;
}
}
@media(max-width:560px){
.player-score-layout{
grid-template-columns:48px 1fr 74px 1fr 48px;
}
.big-score-btn{
width:44px;
height:44px;
font-size:32px;
}
.portrait-frame{
width:72px;
height:72px;
}
.giant-score{
font-size:58px;
}
.score-player-name{
font-size:15px;
}
.center-match-info{
padding-top:68px;
}
.table-name{
font-size:15px;
}
.race-number{
font-size:30px;
}
}
/* ===== MCS v10 blank-screen fix for player score link ===== */
body.player-link-view .round-block:has(.player-score-screen){
display:block!important;
}
body.player-link-view .matches-table:has(.player-score-screen){
display:block!important;
width:100%!important;
}
body.player-link-view .player-score-screen{
display:flex!important;
}
body.player-link-view #knockoutBoard,
body.player-link-view .knockout-board{
display:block!important;
width:100%!important;
}
body.player-link-view #tournamentDetails,
body.player-link-view .tournament-details{
display:block!important;
width:100%!important;
}
/* ===== MCS v11: runout + lag badges ===== */
.player-badges{display:inline-flex;align-items:center;gap:6px;margin-left:8px;flex-wrap:wrap}
.player-pill{min-width:28px;padding:3px 8px;border-radius:999px;border:1px solid rgba(255,255,255,.28);background:rgba(255,255,255,.08);color:#dce8ff;font-size:12px;line-height:1.2;font-weight:900;text-align:center}
.lag-pill{color:#eef3ff}.runout-pill{color:#ffd166}
.break-selector{margin-bottom:18px}.break-label{color:#b7c2cf;font-size:18px;font-weight:800;margin-bottom:10px}.break-buttons{display:flex;justify-content:center;gap:10px;flex-wrap:wrap}
.lag-btn{border:1px solid rgba(255,255,255,.28);background:rgba(255,255,255,.08);color:#fff;border-radius:999px;padding:10px 16px;font-size:15px;font-weight:900;cursor:pointer}
.lag-btn.active{background:linear-gradient(135deg,#ffbf30,#ff9f1c);color:#102b68;border-color:transparent}
.lag-indicator-inline{display:inline-grid;place-items:center;min-width:28px;height:28px;margin-left:10px;border-radius:999px;background:rgba(255,255,255,.14);border:1px solid rgba(255,255,255,.28);color:#ffd166;font-size:16px;font-weight:900;vertical-align:middle}
@media(max-width:850px){.player-badges{margin-left:6px;gap:4px}.player-pill{min-width:24px;padding:2px 6px;font-size:11px}.break-label{font-size:15px}.lag-btn{padding:8px 12px;font-size:13px}.lag-indicator-inline{min-width:24px;height:24px;font-size:14px}}
/* ===== MCS v12: admin match time/table editor ===== */
.schedule-modal{
position:fixed;
inset:0;
z-index:5000;
background:rgba(0,0,0,.58);
display:grid;
place-items:center;
padding:22px;
}
.schedule-card{
width:min(460px,100%);
background:#fff;
color:#102b68;
border-radius:22px;
padding:24px;
box-shadow:0 30px 90px rgba(0,0,0,.34);
position:relative;
}
.schedule-card h2{
margin:0 0 8px;
font-size:28px;
color:#102b68;
}
.schedule-card p{
margin:0 0 18px;
color:#53617e;
font-weight:900;
}
.schedule-card label{
display:block;
margin:14px 0 8px;
font-weight:900;
color:#102b68;
}
.schedule-card input,
.schedule-card select{
width:100%;
border:1px solid #dce2f0;
border-radius:14px;
padding:13px 14px;
font-size:16px;
font-weight:800;
color:#102b68;
outline:none;
background:#f8faff;
}
.schedule-actions{
display:flex;
gap:10px;
justify-content:flex-end;
margin-top:18px;
}
.schedule-save,
.schedule-cancel{
border:0;
border-radius:12px;
padding:11px 16px;
font-weight:900;
cursor:pointer;
}
.schedule-save{
background:linear-gradient(135deg,#102b68,#009750);
color:white;
}
.schedule-cancel{
background:#eef2fb;
color:#102b68;
}
.schedule-close{
position:absolute;
top:12px;
right:14px;
border:0;
background:transparent;
color:#102b68;
font-size:30px;
cursor:pointer;
}
.schedule-link-btn{
margin-top:5px;
font-size:10px!important;
}
.match-time-line{
color:#dce8ff;
font-size:18px;
font-weight:900;
margin:2px 0 14px;
letter-spacing:.5px;
}
@media(max-width:850px){
.schedule-card{
padding:22px;
}
.schedule-card h2{
font-size:23px;
}
.schedule-actions{
flex-direction:column;
}
.schedule-save,
.schedule-cancel{
width:100%;
}
.match-time-line{
font-size:14px;
margin-bottom:10px;
}
}
/* ===== MCS v13: broadcast live link ===== */
.broadcast-help{
display:block;
margin-top:7px;
color:#53617e;
font-size:12px;
font-weight:800;
}
.watch-live-btn{
display:inline-flex;
align-items:center;
justify-content:center;
gap:6px;
text-decoration:none;
border:0;
border-radius:999px;
padding:7px 10px;
min-height:28px;
background:linear-gradient(135deg,#d81e2d,#ff9f1c);
color:#fff!important;
font-size:11px;
font-weight:900;
line-height:1.05;
text-align:center;
box-shadow:0 8px 18px rgba(216,30,45,.22);
}
.watch-live-btn::before{
content:"▶";
font-size:9px;
}
.ko-side-actions .watch-live-btn{
width:88px;
max-width:88px;
white-space:normal;
}
.player-live-link{
margin-top:16px;
display:flex;
justify-content:center;
}
.player-live-link .watch-live-btn{
font-size:15px;
padding:11px 18px;
min-height:42px;
box-shadow:0 15px 36px rgba(216,30,45,.35);
}
@media(max-width:850px){
.ko-side-actions .watch-live-btn{
width:auto;
max-width:none;
font-size:12px;
padding:7px 10px;
}
.player-live-link .watch-live-btn{
font-size:13px;
padding:9px 14px;
min-height:36px;
}
}
/* ===== MCS v14: tighter action area and spacing ===== */
.ko-row{grid-template-columns:54px minmax(0,1.45fr) 74px 58px 74px minmax(0,1.45fr) 86px 108px 190px!important;}
.ko-time,.ko-table{font-size:14px!important;font-weight:700!important;letter-spacing:.2px!important;}
.ko-time{padding-right:8px!important;}
.ko-table{padding-right:14px!important;}
.ko-side-actions{width:auto!important;max-width:none!important;padding:0 14px 0 16px!important;display:flex!important;flex-direction:row!important;align-items:center!important;justify-content:flex-start!important;gap:12px!important;place-items:unset!important;}
.admin-action-row{display:flex!important;align-items:center!important;gap:8px!important;flex-wrap:nowrap!important;}
.ko-side-actions .watch-live-btn{margin-left:8px!important;width:82px!important;max-width:82px!important;min-height:26px!important;padding:6px 8px!important;font-size:10px!important;line-height:1.05!important;flex:0 0 auto!important;}
.side-action-btn,.score-link-btn,.schedule-link-btn{width:auto!important;max-width:none!important;min-width:78px!important;min-height:26px!important;padding:6px 9px!important;font-size:10px!important;line-height:1.05!important;border-radius:8px!important;white-space:nowrap!important;}
@media(max-width:850px){.ko-side-actions{padding:8px 12px 12px!important;flex-direction:row!important;flex-wrap:wrap!important;gap:8px!important;}.admin-action-row{flex-wrap:wrap!important;}.ko-side-actions .watch-live-btn{margin-left:0!important;width:auto!important;max-width:none!important;font-size:12px!important;padding:7px 10px!important;}.side-action-btn,.score-link-btn,.schedule-link-btn{min-width:auto!important;font-size:12px!important;padding:7px 9px!important;white-space:normal!important;}}
/* ===== MCS v15: scoreboard tab panels ===== */
.score-panel-hidden{
display:none!important;
}
.tournament-actions button.active-score-tab{
background:linear-gradient(135deg,#ff9f1c,#d81e2d)!important;
box-shadow:0 12px 28px rgba(255,159,28,.25);
transform:translateY(-1px);
}
.tournament-actions button{
transition:transform .18s ease, box-shadow .18s ease, background .18s ease;
}
/* ===== MCS v16: home live matches + real ranking preview ===== */
.home-ranking-preview{margin:26px 0 10px;}
.home-ranking-list{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;}
.home-ranking-item{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:14px 16px;border-radius:18px;background:#fff;box-shadow:0 14px 34px rgba(8,31,78,.08);border:1px solid rgba(21,55,127,.08);}
.home-ranking-left{display:flex;align-items:center;gap:12px;min-width:0;}
.home-ranking-left div{display:flex;flex-direction:column;min-width:0;}
.home-ranking-left strong{font-size:16px;color:#16377f;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.home-ranking-left small{color:#60708f;font-size:12px;font-weight:700;}
.home-ranking-right{font-weight:900;color:#ff9f1c;font-size:16px;min-width:44px;text-align:right;}
@media(max-width:850px){.home-ranking-list{grid-template-columns:1fr;}.home-ranking-item{padding:12px 14px;}.home-ranking-left strong{font-size:15px;white-space:normal;}}
/* ===== v17 fallback visibility for live matches / ranking ===== */
#sliderScore:empty,
#sliderPlayerB:empty{
display:none!important;
}
.home-ranking-list:empty::before{
content:"Ranking is loading...";
display:block;
padding:16px 18px;
border-radius:18px;
background:#fff;
color:#60708f;
font-weight:900;
border:1px solid rgba(21,55,127,.08);
}
/* ===== Breakzi v18 full futuristic redesign ===== */
:root{
--bz-bg:#06131d;
--bz-panel:rgba(255,255,255,.075);
--bz-panel-strong:rgba(255,255,255,.12);
--bz-navy:#081f35;
--bz-deep:#04101b;
--bz-green:#00c875;
--bz-emerald:#047a48;
--bz-cyan:#23d6ff;
--bz-gold:#ffd166;
--bz-text:#f8fbff;
--bz-muted:#9fb3c8;
--bz-line:rgba(255,255,255,.14);
}
body{
background:
radial-gradient(circle at 18% 8%, rgba(0,200,117,.18), transparent 28%),
radial-gradient(circle at 85% 18%, rgba(35,214,255,.13), transparent 30%),
linear-gradient(180deg,#06131d 0%, #071b2d 48%, #06131d 100%)!important;
color:var(--bz-text)!important;
}
.topbar{
background:rgba(4,16,27,.78)!important;
backdrop-filter:blur(22px);
border-top:0!important;
border-bottom:1px solid var(--bz-line);
box-shadow:0 20px 60px rgba(0,0,0,.28)!important;
}
.brand{
color:#fff!important;
letter-spacing:.5px!important;
}
.brand-logo{
width:126px;
max-height:48px;
object-fit:contain;
display:block;
filter:drop-shadow(0 10px 24px rgba(0,0,0,.28));
}
.brand .logo-ball{
background:linear-gradient(135deg,#fff,#d8fff0)!important;
color:#071b2d!important;
box-shadow:0 0 0 6px rgba(0,200,117,.12);
}
.nav-links a{
color:#dcecff!important;
font-size:18px!important;
font-weight:800!important;
}
.nav-links a.active:after,.nav-links a:hover:after{
height:4px!important;
background:linear-gradient(90deg,var(--bz-green),var(--bz-cyan))!important;
border-radius:999px;
}
.admin-login-btn,.icon-btn{
background:rgba(255,255,255,.10)!important;
border:1px solid rgba(255,255,255,.12)!important;
color:#fff!important;
box-shadow:inset 0 1px 0 rgba(255,255,255,.10);
}
.page{
max-width:1360px!important;
}
.home-section{
position:relative;
}
.home-hero{
min-height:680px!important;
background:
radial-gradient(circle at 18% 20%, rgba(0,200,117,.35), transparent 28%),
radial-gradient(circle at 78% 30%, rgba(35,214,255,.18), transparent 28%),
linear-gradient(135deg,#071b2d 0%, #0b2640 47%, #052016 100%)!important;
border:1px solid rgba(255,255,255,.12);
box-shadow:0 35px 100px rgba(0,0,0,.38), inset 0 1px 0 rgba(255,255,255,.12)!important;
}
.home-hero:before{
content:"";
position:absolute;
inset:auto 5% 8% auto;
width:380px;
height:380px;
background:linear-gradient(135deg,rgba(0,200,117,.18),rgba(35,214,255,.09));
clip-path:polygon(50% 0%,100% 25%,100% 75%,50% 100%,0 75%,0 25%);
filter:blur(.2px);
opacity:.65;
pointer-events:none;
}
.home-content h1{
font-size:clamp(58px,8vw,112px)!important;
letter-spacing:-4px!important;
background:linear-gradient(90deg,#fff 10%,#d8fff0 45%,#32e7a4 100%);
-webkit-background-clip:text;
background-clip:text;
color:transparent!important;
}
.home-intro{
color:#c7d7e8!important;
max-width:690px;
font-size:22px!important;
}
.eyebrow{
color:var(--bz-green)!important;
}
.primary-link{
background:linear-gradient(135deg,var(--bz-green),#0ea5a4)!important;
color:#04101b!important;
box-shadow:0 18px 40px rgba(0,200,117,.25);
}
.secondary-link{
background:rgba(255,255,255,.08)!important;
border:1px solid rgba(255,255,255,.18)!important;
color:#fff!important;
}
.live-tournament-widget{
background:rgba(255,255,255,.08)!important;
border:1px solid rgba(255,255,255,.16)!important;
box-shadow:0 28px 80px rgba(0,0,0,.24), inset 0 1px 0 rgba(255,255,255,.12);
}
.widget-top{
color:var(--bz-gold)!important;
}
.pulse-dot{
background:var(--bz-green)!important;
box-shadow:0 0 0 12px rgba(0,200,117,.12);
}
.mini-score-row,.mini-match{
background:rgba(255,255,255,.105)!important;
border:1px solid rgba(255,255,255,.08);
}
.mini-match b{
color:var(--bz-gold)!important;
}
.home-stats div,.stat-card,.morocco-section,.ranking-card,.group-card,.group-ranking-card,.tournament-card,.player-link-box,.admin-tools{
background:rgba(255,255,255,.07)!important;
border:1px solid rgba(255,255,255,.12)!important;
color:#fff!important;
box-shadow:0 22px 60px rgba(0,0,0,.22)!important;
backdrop-filter:blur(14px);
}
.home-stats strong,.morocco-section h2,.page-title,.section-title h2,.tournament-card h2,.stage-header h2{
color:#fff!important;
}
.home-stats span,.morocco-section p,.tournament-card p,.stage-header span,.section-title p{
color:#a9bed3!important;
}
.breakzi-feature-grid{
display:grid;
grid-template-columns:repeat(4,minmax(0,1fr));
gap:18px;
margin:28px 0 10px;
}
.breakzi-feature-card{
background:rgba(255,255,255,.07);
border:1px solid rgba(255,255,255,.12);
border-radius:24px;
padding:24px;
box-shadow:0 22px 60px rgba(0,0,0,.20);
backdrop-filter:blur(14px);
}
.breakzi-feature-card span{
display:inline-grid;
place-items:center;
width:42px;
height:42px;
border-radius:14px;
background:linear-gradient(135deg,var(--bz-green),var(--bz-cyan));
color:#04101b;
font-weight:1000;
}
.breakzi-feature-card h3{
color:#fff;
font-size:20px;
margin:18px 0 8px;
}
.breakzi-feature-card p{
color:#a9bed3;
margin:0;
line-height:1.55;
font-weight:700;
}
.home-ranking-preview .section-title h2{
color:#fff!important;
}
.home-ranking-preview .section-title p{
color:#a9bed3!important;
}
.home-ranking-item{
background:rgba(255,255,255,.07)!important;
border:1px solid rgba(255,255,255,.12)!important;
color:#fff!important;
backdrop-filter:blur(14px);
}
.home-ranking-left strong{
color:#fff!important;
}
.home-ranking-left small{
color:#a9bed3!important;
}
.home-ranking-right{
color:var(--bz-gold)!important;
}
.tournament-actions button{
background:rgba(255,255,255,.09)!important;
border:1px solid rgba(255,255,255,.14)!important;
}
.tournament-actions button.active-score-tab{
background:linear-gradient(135deg,var(--bz-green),#0ea5a4)!important;
color:#04101b!important;
}
.group-head{
background:rgba(0,200,117,.18)!important;
color:#fff!important;
}
.group-card:nth-child(even) .group-head,.group-card:nth-child(3n) .group-head{
background:rgba(35,214,255,.12)!important;
}
table th{
color:#5ff0b4!important;
}
table td{
color:#fff!important;
}
footer{
color:#a9bed3!important;
}
footer strong{
color:#fff!important;
}
@media(max-width:850px){
.brand-logo{
width:110px;
max-height:42px;
}
.nav-links{
background:rgba(4,16,27,.86)!important;
}
.home-hero{
min-height:auto!important;
}
.breakzi-feature-grid{
grid-template-columns:1fr;
}
.home-content h1{
font-size:54px!important;
}
}
/* ===== Breakzi v19 exact dashboard-style homepage ===== */
.breakzi-dashboard-home{
padding-top:18px!important;
}
.breakzi-hero-shell{
display:grid;
grid-template-columns:minmax(0,1.45fr) minmax(420px,.85fr);
gap:34px;
min-height:520px;
position:relative;
margin-bottom:18px;
}
.breakzi-hero-main{
position:relative;
min-height:520px;
border-radius:0;
padding:34px 40px 22px;
overflow:hidden;
background:
radial-gradient(circle at 78% 62%, rgba(255,255,255,.15), transparent 6%),
radial-gradient(circle at 80% 64%, rgba(35,214,255,.22), transparent 13%),
radial-gradient(circle at 72% 70%, rgba(0,200,117,.16), transparent 23%),
linear-gradient(115deg, rgba(7,24,43,.98) 0%, rgba(8,33,56,.88) 55%, rgba(4,21,34,.95) 100%);
}
.breakzi-hero-main::before{
content:"";
position:absolute;
inset:0;
background:
radial-gradient(circle at 75% 62%, #f6fbff 0 34px, transparent 36px),
linear-gradient(90deg, transparent 0 62%, rgba(10,25,40,.4) 62% 100%);
opacity:.78;
pointer-events:none;
}
.breakzi-hero-main::after{
content:"";
position:absolute;
right:10%;
bottom:10%;
width:520px;
height:280px;
background:
radial-gradient(circle, rgba(0,200,117,.8) 1px, transparent 2px),
radial-gradient(circle, rgba(35,214,255,.5) 1px, transparent 2px);
background-size:18px 18px, 26px 26px;
clip-path:ellipse(48% 33% at 54% 52%);
opacity:.14;
pointer-events:none;
}
.hero-pill{
position:relative;
z-index:2;
display:inline-flex;
align-items:center;
border:1px solid #00ee7a;
color:#00ee7a;
border-radius:999px;
padding:10px 18px;
font-weight:1000;
letter-spacing:.8px;
font-size:13px;
margin-bottom:28px;
background:rgba(0,238,122,.06);
}
.breakzi-hero-main h1{
position:relative;
z-index:2;
color:#fff!important;
font-size:clamp(52px,6vw,82px);
line-height:1.08;
letter-spacing:-2px;
margin:0 0 18px;
font-weight:1000;
text-shadow:0 10px 30px rgba(0,0,0,.38);
}
.hero-copy{
position:relative;
z-index:2;
color:#b8c6d7;
font-size:20px;
line-height:1.45;
margin:0 0 28px;
}
.hero-ctas{
position:relative;
z-index:2;
display:flex;
gap:22px;
margin-bottom:32px;
}
.hero-primary,.hero-secondary{
min-width:198px;
min-height:54px;
display:inline-flex;
align-items:center;
justify-content:center;
gap:14px;
border-radius:10px;
text-decoration:none;
font-weight:1000;
font-size:15px;
}
.hero-primary{
background:#14f97b;
color:#04101b;
box-shadow:0 18px 40px rgba(20,249,123,.22);
}
.hero-secondary{
background:rgba(255,255,255,.04);
color:#14f97b;
border:1px solid rgba(20,249,123,.7);
}
.hero-stats-strip{
position:relative;
z-index:2;
max-width:650px;
display:grid;
grid-template-columns:repeat(4,1fr);
border:1px solid rgba(255,255,255,.13);
border-radius:12px;
background:rgba(255,255,255,.05);
backdrop-filter:blur(12px);
}
.hero-stats-strip div{
display:grid;
grid-template-columns:42px auto;
grid-template-rows:auto auto;
align-items:center;
column-gap:10px;
padding:14px 18px;
border-right:1px solid rgba(255,255,255,.12);
}
.hero-stats-strip div:last-child{border-right:0}
.stat-icon{
grid-row:1/3;
color:#00ee7a;
font-size:28px;
}
.hero-stats-strip strong{
color:#fff;
font-size:20px;
line-height:1;
}
.hero-stats-strip small{
color:#afbdd0;
font-size:10px;
font-weight:900;
}
.breakzi-featured-card{
border-radius:28px;
padding:34px;
min-height:460px;
align-self:start;
background:linear-gradient(135deg,rgba(30,58,102,.9),rgba(6,47,55,.9));
border:1px solid rgba(255,255,255,.14);
box-shadow:0 30px 90px rgba(0,0,0,.28), inset 0 1px 0 rgba(255,255,255,.10);
}
.card-kicker{
display:flex;
align-items:center;
gap:12px;
color:#ffd166;
font-weight:1000;
letter-spacing:1px;
font-size:15px;
margin-bottom:34px;
}
.card-kicker span{
width:13px;
height:13px;
background:#00ee7a;
border-radius:50%;
box-shadow:0 0 24px rgba(0,238,122,.9);
}
.breakzi-featured-card h2{
color:#fff;
font-size:42px;
line-height:1.2;
margin:0 0 22px;
letter-spacing:1px;
}
.breakzi-featured-card p{
color:#dce8ff;
font-weight:900;
font-size:18px;
}
.featured-date{
margin:20px 0;
border-radius:18px;
background:rgba(255,255,255,.12);
color:#fff;
text-align:center;
padding:16px;
font-size:19px;
font-weight:1000;
}
.featured-match{
display:grid;
grid-template-columns:1fr auto 1fr;
align-items:center;
gap:18px;
border-radius:18px;
background:rgba(255,255,255,.10);
padding:18px 20px;
min-height:76px;
}
.featured-match strong{
color:#fff;
font-size:17px;
line-height:1.15;
}
.featured-match b{
color:#ffb21e;
font-size:22px;
white-space:nowrap;
}
.featured-meta{
color:#dce8ff;
text-align:center;
margin-top:14px;
font-weight:900;
}
.live-results-carousel{
display:grid;
grid-template-columns:170px 42px 1fr 42px;
gap:18px;
align-items:center;
border:1px solid rgba(255,255,255,.12);
border-radius:16px;
background:rgba(6,18,32,.78);
padding:16px 18px;
margin-bottom:16px;
}
.live-results-title{
border-right:1px solid rgba(255,255,255,.16);
padding-right:20px;
}
.live-results-title strong{
display:block;
color:#00ee7a;
font-weight:1000;
}
.live-results-title strong span{
display:inline-block;
width:11px;
height:11px;
border-radius:50%;
background:#00ee7a;
margin-right:8px;
}
.live-results-title small{
display:block;
margin-top:9px;
color:#afbdd0;
font-weight:700;
}
.carousel-arrow{
background:transparent;
border:0;
color:#fff;
font-size:42px;
}
.result-strip{
display:grid;
grid-template-columns:repeat(5,minmax(170px,1fr));
gap:14px;
overflow:hidden;
}
.mini-result-card{
border-radius:10px;
border:1px solid rgba(255,255,255,.12);
background:rgba(255,255,255,.06);
padding:12px 14px;
min-height:86px;
position:relative;
}
.mini-result-card::after{
content:"";
position:absolute;
left:0;
bottom:0;
width:58%;
height:3px;
background:linear-gradient(90deg,#00ee7a,#ffdf5d);
}
.mini-result-card small{
color:#a9bbcf;
font-size:11px;
font-weight:800;
}
.mini-result-names{
display:grid;
grid-template-columns:1fr auto 1fr;
gap:8px;
margin-top:10px;
align-items:center;
color:#fff;
font-weight:900;
}
.mini-result-names b{
color:#ffb21e;
}
.empty-mini{
grid-column:1/-1;
display:flex;
flex-direction:column;
justify-content:center;
}
.dashboard-bottom-grid{
display:grid;
grid-template-columns:1fr 1fr 1fr;
gap:18px;
}
.dashboard-panel{
background:rgba(255,255,255,.055)!important;
border:1px solid rgba(255,255,255,.12);
border-radius:18px;
padding:18px;
min-height:315px;
box-shadow:0 24px 70px rgba(0,0,0,.22);
}
.panel-head{
display:flex;
justify-content:space-between;
align-items:center;
padding-bottom:16px;
border-bottom:1px solid rgba(255,255,255,.10);
}
.panel-head h3{
margin:0;
color:#fff;
font-size:16px;
letter-spacing:.4px;
}
.panel-head h3 span{
color:#00ee7a;
margin-right:8px;
}
.panel-head a{
color:#cbd8ea;
text-decoration:none;
font-size:13px;
font-weight:800;
}
.panel-head.stacked{
display:block;
}
.panel-head.stacked small{
display:block;
color:#a9bbcf;
margin-top:6px;
}
.home-live-match-list{
display:grid;
gap:10px;
margin-top:14px;
}
.home-live-match-card{
border:1px solid rgba(255,255,255,.10);
border-radius:13px;
background:rgba(255,255,255,.045);
padding:12px 14px;
border-left:4px solid #00ee7a;
}
.live-match-top{
display:flex;
justify-content:space-between;
margin-bottom:10px;
}
.live-match-top small{
color:#a9bbcf;
font-weight:800;
}
.live-match-top em{
color:#00ee7a;
font-style:normal;
font-size:12px;
font-weight:1000;
}
.live-match-body{
display:grid;
grid-template-columns:1fr auto 34px;
align-items:center;
gap:12px;
}
.live-match-body strong{
display:block;
color:#fff;
margin:4px 0;
}
.live-match-score{
display:grid;
gap:4px;
}
.live-match-score b{
color:#ffb21e;
font-size:18px;
}
.camera-icon{
color:#00ee7a;
display:grid;
place-items:center;
background:rgba(0,238,122,.08);
border-radius:8px;
min-height:34px;
}
.home-empty-live{
color:#a9bbcf;
font-weight:900;
padding:18px;
border-radius:14px;
background:rgba(255,255,255,.045);
}
.dashboard-ranking-list{
display:grid!important;
gap:0!important;
margin-top:12px;
}
.dashboard-ranking-row{
display:grid;
grid-template-columns:1fr 40px 70px;
align-items:center;
gap:12px;
border-bottom:1px solid rgba(255,255,255,.10);
padding:12px 4px;
}
.dashboard-ranking-row div{
display:flex;
align-items:center;
gap:10px;
min-width:0;
}
.dashboard-ranking-row strong{
color:#fff;
white-space:nowrap;
overflow:hidden;
text-overflow:ellipsis;
}
.dashboard-ranking-row small{
color:#a9bbcf;
font-weight:900;
}
.dashboard-ranking-row b{
color:#ffb21e;
font-size:18px;
text-align:right;
}
.management-grid{
display:grid;
grid-template-columns:1fr 1fr;
gap:12px;
margin-top:16px;
}
.management-grid div{
min-height:118px;
border-radius:14px;
border:1px solid rgba(255,255,255,.10);
background:rgba(255,255,255,.045);
padding:16px;
}
.management-grid span{
color:#00ee7a;
font-size:26px;
}
.management-grid strong{
display:block;
color:#fff;
margin:12px 0 6px;
}
.management-grid small{
color:#a9bbcf;
line-height:1.35;
}
@media(max-width:1050px){
.breakzi-hero-shell,.dashboard-bottom-grid{
grid-template-columns:1fr;
}
.result-strip{
grid-template-columns:repeat(2,minmax(180px,1fr));
}
}
@media(max-width:700px){
.breakzi-hero-main{
padding:26px 20px;
min-height:auto;
}
.breakzi-hero-main h1{
font-size:38px;
}
.hero-ctas,.hero-stats-strip{
grid-template-columns:1fr;
display:grid;
}
.hero-stats-strip div{
border-right:0;
border-bottom:1px solid rgba(255,255,255,.10);
}
.breakzi-featured-card{
min-height:auto;
padding:24px;
}
.live-results-carousel{
grid-template-columns:1fr;
}
.live-results-title{
border-right:0;
border-bottom:1px solid rgba(255,255,255,.12);
padding:0 0 14px;
}
.carousel-arrow{
display:none;
}
.result-strip,.management-grid{
grid-template-columns:1fr;
}
}
/* ===== Breakzi v20: working tournament/player management ===== */
.management-grid button.management-tile,
.management-grid .management-tile{
border:1px solid rgba(255,255,255,.10);
background:rgba(255,255,255,.045);
color:inherit;
text-align:left;
cursor:pointer;
font-family:inherit;
transition:transform .18s ease,border-color .18s ease,background .18s ease,box-shadow .18s ease;
}
.management-grid button.management-tile:hover{
transform:translateY(-3px);
border-color:rgba(0,238,122,.5);
background:rgba(0,238,122,.075);
box-shadow:0 18px 40px rgba(0,0,0,.22);
}
.management-modal-card{
width:min(880px,100%);
max-height:88vh;
overflow:auto;
background:linear-gradient(135deg,#0a1c2d,#10283e)!important;
color:#fff!important;
border:1px solid rgba(255,255,255,.16);
}
.management-modal-card h2{
color:#fff!important;
font-size:34px;
margin:0 0 8px;
}
.management-modal-card p{
color:#a9bbcf!important;
}
.management-form-grid{
display:grid;
grid-template-columns:repeat(2,minmax(0,1fr));
gap:14px;
margin:18px 0;
}
.management-form-grid label,
.full-field{
display:flex;
flex-direction:column;
gap:8px;
color:#dce8ff;
font-weight:900;
}
.management-form-grid input,
.management-form-grid select,
.full-field textarea{
width:100%;
border:1px solid rgba(255,255,255,.14);
background:rgba(255,255,255,.08);
color:#fff;
border-radius:12px;
padding:13px 14px;
font-size:15px;
font-weight:800;
outline:none;
}
.management-form-grid input::placeholder,
.full-field textarea::placeholder{
color:#7188a2;
}
.full-field textarea{
min-height:96px;
resize:vertical;
}
.management-actions{
display:flex;
flex-wrap:wrap;
gap:12px;
justify-content:flex-end;
margin-top:18px;
}
.management-save,
.management-secondary{
border:0;
border-radius:12px;
padding:12px 18px;
font-weight:1000;
cursor:pointer;
}
.management-save{
background:linear-gradient(135deg,#00ee7a,#18c6c4);
color:#04101b;
}
.management-secondary{
background:rgba(255,255,255,.10);
color:#fff;
border:1px solid rgba(255,255,255,.14);
}
.management-status{
min-height:22px;
color:#00ee7a!important;
font-weight:900;
}
.management-status.error{
color:#ff5964!important;
}
.management-report-grid{
display:grid;
grid-template-columns:1fr 1fr;
gap:18px;
margin-top:20px;
}
.management-report-grid h3{
color:#fff;
margin:0 0 12px;
}
.management-list-item,
.management-empty{
border:1px solid rgba(255,255,255,.10);
background:rgba(255,255,255,.055);
border-radius:14px;
padding:13px 14px;
margin-bottom:10px;
}
.management-list-item strong{
display:block;
color:#fff;
}
.management-list-item small,
.management-empty{
color:#a9bbcf;
font-weight:800;
}
@media(max-width:760px){
.management-form-grid,
.management-report-grid{
grid-template-columns:1fr;
}
.management-actions{
flex-direction:column;
}
.management-save,
.management-secondary{
width:100%;
}
}
/* ===== Breakzi v21: player photos + random tournament draw ===== */
.player-photo-uploader{
display:flex;
align-items:center;
gap:16px;
margin:18px 0 22px;
padding:16px;
border:1px solid rgba(255,255,255,.12);
border-radius:18px;
background:rgba(255,255,255,.05);
}
.player-photo-preview{
width:86px;
height:86px;
border-radius:50%;
display:grid;
place-items:center;
overflow:hidden;
background:linear-gradient(135deg,rgba(0,238,122,.18),rgba(35,214,255,.12));
border:2px solid rgba(255,255,255,.18);
color:#a9bbcf;
font-weight:1000;
flex:0 0 auto;
}
.player-photo-preview img{
width:100%;
height:100%;
object-fit:cover;
}
.photo-input-label{
display:inline-flex;
align-items:center;
justify-content:center;
border-radius:12px;
padding:12px 16px;
background:linear-gradient(135deg,#00ee7a,#18c6c4);
color:#04101b!important;
font-weight:1000!important;
cursor:pointer;
}
.photo-input-label input{
display:none;
}
.player-photo-uploader small{
color:#a9bbcf;
font-weight:800;
}
.draw-builder{
margin-top:20px;
padding:18px;
border:1px solid rgba(255,255,255,.12);
border-radius:20px;
background:rgba(255,255,255,.045);
}
.draw-builder-head{
display:flex;
gap:16px;
align-items:flex-start;
justify-content:space-between;
margin-bottom:14px;
}
.draw-builder h3{
margin:0 0 6px;
color:#fff;
font-size:22px;
}
.draw-builder p{
margin:0;
color:#a9bbcf!important;
}
.draw-player-list{
max-height:220px;
overflow:auto;
display:grid;
grid-template-columns:repeat(2,minmax(0,1fr));
gap:10px;
margin:16px 0;
}
.draw-player-option{
display:grid!important;
grid-template-columns:22px 1fr;
gap:8px;
align-items:center;
padding:10px 12px;
border:1px solid rgba(255,255,255,.10);
border-radius:12px;
background:rgba(255,255,255,.045);
color:#fff!important;
cursor:pointer;
}
.draw-player-option input{
width:16px;
height:16px;
accent-color:#00ee7a;
}
.draw-player-option span{
font-weight:900;
}
.draw-player-option small{
grid-column:2;
color:#a9bbcf;
font-weight:800;
}
.draw-preview{
margin-top:16px;
}
.draw-preview h4{
color:#00ee7a;
margin:0 0 12px;
font-size:18px;
}
.draw-groups{
display:grid;
grid-template-columns:repeat(3,minmax(0,1fr));
gap:12px;
}
.draw-group,
.draw-matches div{
border:1px solid rgba(255,255,255,.10);
background:rgba(255,255,255,.045);
border-radius:13px;
padding:12px;
}
.draw-group strong,
.draw-matches b{
display:block;
color:#ffd166;
margin-bottom:8px;
}
.draw-group span,
.draw-matches span{
display:block;
color:#fff;
font-weight:800;
padding:4px 0;
}
.draw-matches{
display:grid;
grid-template-columns:repeat(2,minmax(0,1fr));
gap:10px;
}
.player-report-item{
display:grid!important;
grid-template-columns:44px 1fr;
gap:12px;
align-items:center;
}
.player-report-item img,
.tiny-avatar{
width:42px;
height:42px;
border-radius:50%;
object-fit:cover;
display:grid;
place-items:center;
background:rgba(0,238,122,.14);
color:#00ee7a;
font-weight:1000;
border:1px solid rgba(255,255,255,.16);
}
@media(max-width:760px){
.player-photo-uploader,
.draw-builder-head{
flex-direction:column;
align-items:flex-start;
}
.draw-player-list,
.draw-groups,
.draw-matches{
grid-template-columns:1fr;
}
}
/* ===== Breakzi v22: exact requested top/header + hero ===== */
:root{
--exact-bg:#020b17;
--exact-line:rgba(255,255,255,.13);
--exact-green:#00ff7a;
--exact-muted:#c5ccda;
}
body{
background:#020b17!important;
}
.topbar{
height:156px!important;
padding:0 45px!important;
background:linear-gradient(180deg,#020817 0%,#031126 100%)!important;
border-bottom:1px solid rgba(255,255,255,.18)!important;
box-shadow:none!important;
display:grid!important;
grid-template-columns:300px 1fr auto!important;
align-items:center!important;
column-gap:28px!important;
position:sticky!important;
top:0!important;
z-index:1000!important;
}
.exact-brand{
display:flex!important;
align-items:center!important;
justify-content:flex-start!important;
min-width:280px!important;
}
.exact-brand-logo{
width:278px!important;
height:auto!important;
max-height:86px!important;
object-fit:contain!important;
display:block!important;
filter:drop-shadow(0 14px 22px rgba(0,0,0,.28))!important;
}
.brand span,
.brand-logo{
display:none!important;
}
.nav-links{
justify-self:center!important;
display:flex!important;
align-items:center!important;
justify-content:center!important;
gap:58px!important;
background:transparent!important;
padding:0!important;
margin:0!important;
}
.nav-links a{
position:relative!important;
color:rgba(255,255,255,.76)!important;
font-size:21px!important;
font-weight:500!important;
text-decoration:none!important;
letter-spacing:-.25px!important;
padding:55px 0!important;
min-height:156px!important;
display:flex!important;
align-items:center!important;
}
.nav-links a.active,
.nav-links a:hover{
color:#fff!important;
}
.nav-links a.active::after{
content:""!important;
position:absolute!important;
left:50%!important;
transform:translateX(-50%)!important;
bottom:0!important;
width:64px!important;
height:6px!important;
border-radius:999px 999px 0 0!important;
background:var(--exact-green)!important;
box-shadow:0 0 18px rgba(0,255,122,.55)!important;
}
.nav-links a::after{
display:none!important;
}
.topbar-actions{
justify-self:end!important;
display:flex!important;
align-items:center!important;
gap:20px!important;
}
.admin-login-btn{
display:none!important;
}
.exact-search-box{
height:64px!important;
min-width:300px!important;
display:flex!important;
align-items:center!important;
gap:14px!important;
padding:0 24px!important;
border:1px solid rgba(255,255,255,.20)!important;
border-radius:999px!important;
background:rgba(255,255,255,.025)!important;
color:#fff!important;
}
.exact-search-box span{
font-size:28px!important;
color:#fff!important;
line-height:1!important;
}
.exact-search-box input{
border:0!important;
outline:0!important;
background:transparent!important;
color:#fff!important;
font-size:18px!important;
width:100%!important;
}
.exact-search-box input::placeholder{
color:rgba(255,255,255,.72)!important;
}
.icon-btn.exact-lang-btn{
width:auto!important;
min-width:132px!important;
height:64px!important;
border-radius:999px!important;
border:1px solid rgba(255,255,255,.20)!important;
background:rgba(255,255,255,.025)!important;
color:#fff!important;
font-size:18px!important;
gap:10px!important;
box-shadow:none!important;
}
.exact-profile-btn{
width:64px!important;
height:64px!important;
border-radius:50%!important;
border:1px solid rgba(255,255,255,.20)!important;
background:rgba(255,255,255,.025)!important;
color:#fff!important;
font-size:30px!important;
display:grid!important;
place-items:center!important;
cursor:pointer!important;
}
.page{
max-width:none!important;
width:100%!important;
margin:0!important;
padding:0!important;
}
.breakzi-exact-home{
display:block!important;
padding:0!important;
margin:0!important;
}
.exact-hero{
min-height:780px!important;
width:100%!important;
position:relative!important;
overflow:hidden!important;
background:
linear-gradient(90deg,rgba(2,8,18,.55) 0%,rgba(2,8,18,.30) 42%,rgba(2,8,18,.18) 100%),
url("breakzi-hero-bg.jpg") center center / cover no-repeat!important;
}
.exact-hero::before{
content:""!important;
position:absolute!important;
inset:0!important;
background:
radial-gradient(circle at 76% 70%, rgba(0,190,255,.12), transparent 20%),
radial-gradient(circle at 80% 80%, rgba(0,255,122,.10), transparent 28%),
linear-gradient(90deg,rgba(2,8,18,.35),transparent 68%)!important;
pointer-events:none!important;
}
.exact-hero-content{
position:relative!important;
z-index:2!important;
padding:108px 0 0 74px!important;
max-width:980px!important;
}
.exact-pill{
display:inline-flex!important;
align-items:center!important;
justify-content:center!important;
min-height:50px!important;
border:2px solid var(--exact-green)!important;
border-radius:999px!important;
color:var(--exact-green)!important;
padding:0 32px!important;
font-size:22px!important;
font-weight:1000!important;
letter-spacing:.5px!important;
background:rgba(0,255,122,.035)!important;
margin-bottom:62px!important;
}
.exact-hero h1{
color:#fff!important;
margin:0!important;
font-size:clamp(54px,6.5vw,98px)!important;
line-height:1.17!important;
letter-spacing:-2.5px!important;
font-weight:1000!important;
text-shadow:0 12px 32px rgba(0,0,0,.45)!important;
}
.exact-hero p{
margin:38px 0 0!important;
color:rgba(255,255,255,.74)!important;
font-size:27px!important;
line-height:1.42!important;
font-weight:400!important;
}
.exact-hero-actions{
display:flex!important;
align-items:center!important;
gap:38px!important;
margin-top:68px!important;
}
.exact-primary,
.exact-secondary{
min-height:84px!important;
border-radius:10px!important;
display:inline-flex!important;
align-items:center!important;
justify-content:center!important;
gap:24px!important;
text-decoration:none!important;
font-size:26px!important;
font-weight:900!important;
}
.exact-primary{
min-width:350px!important;
color:#020817!important;
background:var(--exact-green)!important;
box-shadow:0 20px 55px rgba(0,255,122,.25)!important;
}
.exact-primary span{
font-size:34px!important;
}
.exact-secondary{
min-width:420px!important;
color:var(--exact-green)!important;
border:2px solid var(--exact-green)!important;
background:rgba(0,0,0,.16)!important;
}
.exact-secondary span{
font-size:30px!important;
}
/* Keep the rest below the hero aligned like the dashboard */
.live-results-carousel,
.dashboard-bottom-grid{
max-width:calc(100% - 96px)!important;
margin-left:auto!important;
margin-right:auto!important;
}
.live-results-carousel{
margin-top:32px!important;
}
@media(max-width:1200px){
.topbar{
grid-template-columns:240px 1fr auto!important;
padding:0 24px!important;
}
.exact-brand-logo{
width:225px!important;
}
.nav-links{
gap:30px!important;
}
.exact-search-box{
min-width:220px!important;
}
}
@media(max-width:900px){
.topbar{
height:auto!important;
min-height:116px!important;
grid-template-columns:1fr auto!important;
grid-template-areas:
"brand actions"
"nav nav"!important;
row-gap:8px!important;
padding:16px 18px 0!important;
}
.exact-brand{grid-area:brand!important}
.topbar-actions{grid-area:actions!important}
.nav-links{
grid-area:nav!important;
width:100%!important;
justify-content:space-around!important;
gap:12px!important;
overflow:auto!important;
}
.nav-links a{
min-height:58px!important;
padding:18px 0!important;
font-size:16px!important;
}
.exact-search-box{
display:none!important;
}
.exact-brand-logo{
width:190px!important;
}
.exact-hero{
min-height:620px!important;
}
.exact-hero-content{
padding:64px 24px 0!important;
}
.exact-pill{
font-size:14px!important;
min-height:38px!important;
padding:0 16px!important;
margin-bottom:34px!important;
}
.exact-hero h1{
font-size:44px!important;
letter-spacing:-1px!important;
}
.exact-hero p{
font-size:19px!important;
}
.exact-hero-actions{
flex-direction:column!important;
align-items:flex-start!important;
gap:16px!important;
margin-top:36px!important;
}
.exact-primary,.exact-secondary{
min-width:min(100%,330px)!important;
min-height:58px!important;
font-size:18px!important;
}
.live-results-carousel,
.dashboard-bottom-grid{
max-width:calc(100% - 28px)!important;
}
}
/* ===== Breakzi v23: layout collision fix for header + hero ===== */
/* Reset the old responsive/header styles that were mixing elements together. */
.topbar{
height:112px!important;
min-height:112px!important;
width:100%!important;
box-sizing:border-box!important;
display:grid!important;
grid-template-columns:310px minmax(430px,1fr) 470px!important;
align-items:center!important;
gap:24px!important;
padding:0 42px!important;
background:linear-gradient(180deg,#020817 0%,#031126 100%)!important;
border-bottom:1px solid rgba(255,255,255,.16)!important;
position:sticky!important;
top:0!important;
z-index:9999!important;
overflow:visible!important;
}
.exact-brand{
min-width:0!important;
width:310px!important;
display:flex!important;
align-items:center!important;
justify-content:flex-start!important;
}
.exact-brand-logo{
width:250px!important;
max-width:250px!important;
max-height:72px!important;
object-fit:contain!important;
display:block!important;
}
/* Make navigation a single clean horizontal line. */
.nav-links{
display:flex!important;
align-items:center!important;
justify-content:center!important;
gap:48px!important;
width:100%!important;
height:112px!important;
padding:0!important;
margin:0!important;
overflow:visible!important;
background:transparent!important;
}
.nav-links a{
height:112px!important;
min-height:112px!important;
padding:0!important;
display:flex!important;
align-items:center!important;
justify-content:center!important;
color:rgba(255,255,255,.78)!important;
font-size:18px!important;
font-weight:600!important;
white-space:nowrap!important;
line-height:1!important;
}
.nav-links a.active::after{
bottom:0!important;
width:56px!important;
height:5px!important;
}
/* Keep search/language/profile on the right and never let them overlap nav. */
.topbar-actions{
width:470px!important;
display:flex!important;
align-items:center!important;
justify-content:flex-end!important;
gap:16px!important;
overflow:visible!important;
}
.exact-search-box{
width:245px!important;
min-width:245px!important;
max-width:245px!important;
height:52px!important;
padding:0 18px!important;
box-sizing:border-box!important;
}
.exact-search-box span{
font-size:22px!important;
}
.exact-search-box input{
font-size:16px!important;
}
.icon-btn.exact-lang-btn{
width:112px!important;
min-width:112px!important;
max-width:112px!important;
height:52px!important;
font-size:16px!important;
padding:0!important;
display:flex!important;
align-items:center!important;
justify-content:center!important;
}
.exact-profile-btn{
width:52px!important;
min-width:52px!important;
height:52px!important;
font-size:24px!important;
flex:0 0 52px!important;
}
/* The old admin button must not take hidden space in the nav. */
.admin-login-btn{
display:none!important;
}
/* Hero begins after the header, with a clear block layout. */
.breakzi-exact-home{
padding:0!important;
margin:0!important;
display:block!important;
width:100%!important;
overflow:hidden!important;
}
.exact-hero{
min-height:calc(100vh - 112px)!important;
height:auto!important;
display:block!important;
position:relative!important;
background:
linear-gradient(90deg,rgba(2,8,18,.48) 0%,rgba(2,8,18,.22) 48%,rgba(2,8,18,.12) 100%),
url("breakzi-hero-bg.jpg") center center / cover no-repeat!important;
border-bottom:1px solid rgba(255,255,255,.10)!important;
}
.exact-hero-content{
padding:72px 0 96px 74px!important;
max-width:980px!important;
box-sizing:border-box!important;
}
.exact-pill{
min-height:42px!important;
padding:0 24px!important;
font-size:18px!important;
margin-bottom:48px!important;
}
.exact-hero h1{
font-size:clamp(56px,5.7vw,86px)!important;
line-height:1.16!important;
letter-spacing:-2px!important;
}
.exact-hero p{
margin-top:30px!important;
font-size:24px!important;
line-height:1.38!important;
}
.exact-hero-actions{
margin-top:52px!important;
gap:28px!important;
}
.exact-primary,
.exact-secondary{
min-height:64px!important;
border-radius:9px!important;
font-size:21px!important;
}
.exact-primary{
min-width:285px!important;
}
.exact-secondary{
min-width:340px!important;
}
/* Sections below the hero should start below it, not on top of it. */
.live-results-carousel{
clear:both!important;
position:relative!important;
z-index:1!important;
margin-top:28px!important;
}
.dashboard-bottom-grid{
position:relative!important;
z-index:1!important;
}
/* Hide only the old home hero parts if any survived from earlier versions. */
.home-hero:not(.exact-hero),
.breakzi-hero-shell{
display:none!important;
}
/* Tablet */
@media(max-width:1180px){
.topbar{
grid-template-columns:250px 1fr 360px!important;
padding:0 24px!important;
gap:16px!important;
}
.exact-brand,
.exact-brand-logo{
width:220px!important;
max-width:220px!important;
}
.nav-links{
gap:26px!important;
}
.nav-links a{
font-size:16px!important;
}
.topbar-actions{
width:360px!important;
}
.exact-search-box{
width:190px!important;
min-width:190px!important;
max-width:190px!important;
}
}
/* Mobile: stack cleanly, no mixing. */
@media(max-width:860px){
.topbar{
height:auto!important;
min-height:126px!important;
grid-template-columns:1fr auto!important;
grid-template-areas:
"brand actions"
"nav nav"!important;
row-gap:0!important;
padding:14px 18px 0!important;
}
.exact-brand{
grid-area:brand!important;
width:auto!important;
}
.exact-brand-logo{
width:170px!important;
max-width:170px!important;
max-height:58px!important;
}
.topbar-actions{
grid-area:actions!important;
width:auto!important;
gap:10px!important;
}
.exact-search-box{
display:none!important;
}
.icon-btn.exact-lang-btn{
min-width:78px!important;
width:78px!important;
height:44px!important;
font-size:14px!important;
}
.exact-profile-btn{
width:44px!important;
min-width:44px!important;
height:44px!important;
font-size:20px!important;
}
.nav-links{
grid-area:nav!important;
height:58px!important;
min-height:58px!important;
justify-content:flex-start!important;
gap:28px!important;
overflow-x:auto!important;
padding:0 0 0 0!important;
scrollbar-width:none!important;
}
.nav-links::-webkit-scrollbar{
display:none!important;
}
.nav-links a{
height:58px!important;
min-height:58px!important;
font-size:15px!important;
flex:0 0 auto!important;
}
.nav-links a.active::after{
width:42px!important;
height:4px!important;
}
.exact-hero{
min-height:560px!important;
}
.exact-hero-content{
padding:54px 22px 70px!important;
}
.exact-pill{
min-height:34px!important;
font-size:13px!important;
padding:0 14px!important;
margin-bottom:30px!important;
}
.exact-hero h1{
font-size:40px!important;
line-height:1.12!important;
letter-spacing:-.7px!important;
}
.exact-hero p{
font-size:17px!important;
margin-top:22px!important;
}
.exact-hero-actions{
flex-direction:column!important;
align-items:flex-start!important;
margin-top:32px!important;
gap:14px!important;
}
.exact-primary,
.exact-secondary{
min-width:min(100%,320px)!important;
min-height:52px!important;
font-size:16px!important;
}
.live-results-carousel,
.dashboard-bottom-grid{
max-width:calc(100% - 26px)!important;
}
}
/* ===== Breakzi v24: REAL FIX - no doubled text background ===== */
/* Header: exact clean organization */
.topbar{
height:112px!important;
min-height:112px!important;
display:grid!important;
grid-template-columns:330px 1fr 470px!important;
grid-template-areas:"brand nav actions"!important;
align-items:center!important;
gap:28px!important;
padding:0 44px!important;
background:#020817!important;
border-bottom:1px solid rgba(255,255,255,.16)!important;
overflow:hidden!important;
}
.exact-brand,
.brand{
grid-area:brand!important;
width:330px!important;
min-width:330px!important;
display:flex!important;
align-items:center!important;
justify-content:flex-start!important;
}
.nav-links{
grid-area:nav!important;
width:100%!important;
height:112px!important;
min-height:112px!important;
display:flex!important;
align-items:center!important;
justify-content:center!important;
gap:56px!important;
overflow:visible!important;
background:transparent!important;
}
.topbar-actions{
grid-area:actions!important;
width:470px!important;
display:flex!important;
align-items:center!important;
justify-content:flex-end!important;
gap:16px!important;
}
.exact-brand-logo{
width:270px!important;
height:auto!important;
max-width:270px!important;
max-height:76px!important;
object-fit:contain!important;
display:block!important;
background:transparent!important;
}
.nav-links a{
height:112px!important;
min-height:112px!important;
padding:0!important;
display:flex!important;
align-items:center!important;
justify-content:center!important;
white-space:nowrap!important;
color:rgba(255,255,255,.76)!important;
font-size:18px!important;
font-weight:600!important;
}
.nav-links a.active{
color:#fff!important;
}
.nav-links a.active::after{
content:""!important;
display:block!important;
position:absolute!important;
left:50%!important;
bottom:0!important;
transform:translateX(-50%)!important;
width:60px!important;
height:5px!important;
background:#00ff7a!important;
border-radius:999px 999px 0 0!important;
}
.admin-login-btn{
display:none!important;
}
.exact-search-box{
width:245px!important;
min-width:245px!important;
height:52px!important;
display:flex!important;
align-items:center!important;
gap:12px!important;
border:1px solid rgba(255,255,255,.18)!important;
border-radius:999px!important;
background:rgba(255,255,255,.025)!important;
padding:0 18px!important;
box-sizing:border-box!important;
}
.exact-search-box input{
width:100%!important;
border:0!important;
outline:0!important;
background:transparent!important;
color:#fff!important;
font-size:16px!important;
}
.exact-search-box input::placeholder{
color:rgba(255,255,255,.72)!important;
}
.icon-btn.exact-lang-btn{
width:112px!important;
min-width:112px!important;
height:52px!important;
border-radius:999px!important;
border:1px solid rgba(255,255,255,.18)!important;
background:rgba(255,255,255,.025)!important;
color:#fff!important;
box-shadow:none!important;
}
.exact-profile-btn{
width:52px!important;
height:52px!important;
min-width:52px!important;
border-radius:50%!important;
border:1px solid rgba(255,255,255,.18)!important;
background:rgba(255,255,255,.025)!important;
color:#fff!important;
font-size:24px!important;
}
/* Home/hero: never use the previous screenshot crop, because it contained text. */
.exact-hero{
min-height:calc(100vh - 112px)!important;
width:100%!important;
display:block!important;
position:relative!important;
overflow:hidden!important;
background:
radial-gradient(circle at 78% 72%, rgba(255,255,255,.23) 0 0, transparent 135px),
radial-gradient(circle at 80% 75%, rgba(0,180,255,.22), transparent 280px),
radial-gradient(circle at 72% 70%, rgba(0,255,122,.13), transparent 360px),
linear-gradient(90deg,#020817 0%,#041329 44%,#061c32 100%)!important;
border-bottom:1px solid rgba(255,255,255,.10)!important;
}
/* Fake clean world map dots, without any text. */
.exact-hero::before{
content:""!important;
position:absolute!important;
inset:0!important;
background:
radial-gradient(circle, rgba(0,195,255,.38) 1.6px, transparent 2.2px);
background-size:18px 18px!important;
width:48%!important;
height:36%!important;
left:50%!important;
top:10%!important;
opacity:.36!important;
clip-path:polygon(5% 22%,18% 11%,38% 18%,55% 8%,79% 18%,96% 42%,80% 56%,90% 78%,65% 86%,45% 72%,26% 84%,9% 61%);
pointer-events:none!important;
}
/* Billiard table / cue / ball built from CSS only */
.exact-hero::after{
content:""!important;
position:absolute!important;
right:4%!important;
bottom:0!important;
width:56%!important;
height:42%!important;
background:
radial-gradient(circle at 72% 62%, #f8fbff 0 56px, #dfe8ef 57px 86px, transparent 88px),
radial-gradient(circle at 73% 63%, #8a1018 0 10px, transparent 11px),
linear-gradient(8deg, transparent 0 34%, rgba(255,255,255,.35) 34% 36%, transparent 36%),
linear-gradient(5deg, transparent 0 42%, rgba(14,23,33,.92) 42% 47%, transparent 47%),
radial-gradient(circle at 54% 42%, rgba(255,255,255,.20) 0 18px, transparent 22px),
radial-gradient(circle at 63% 36%, rgba(255,255,255,.16) 0 16px, transparent 20px),
radial-gradient(circle at 86% 33%, rgba(255,255,255,.18) 0 16px, transparent 20px),
linear-gradient(180deg, transparent 0%, rgba(0,165,190,.15) 100%)!important;
filter:drop-shadow(0 20px 60px rgba(0,0,0,.45));
opacity:.95!important;
pointer-events:none!important;
}
.exact-hero-content{
position:relative!important;
z-index:5!important;
padding:82px 0 96px 74px!important;
max-width:980px!important;
box-sizing:border-box!important;
}
.exact-pill{
position:relative!important;
z-index:6!important;
min-height:48px!important;
display:inline-flex!important;
align-items:center!important;
justify-content:center!important;
padding:0 30px!important;
border:2px solid #00ff7a!important;
border-radius:999px!important;
background:rgba(0,255,122,.045)!important;
color:#00ff7a!important;
font-size:20px!important;
font-weight:1000!important;
letter-spacing:.5px!important;
margin:0 0 56px!important;
opacity:1!important;
}
/* The real headline is the ONLY headline visible now. */
.exact-hero h1{
position:relative!important;
z-index:6!important;
color:#fff!important;
margin:0!important;
font-size:clamp(56px,5.9vw,92px)!important;
line-height:1.15!important;
letter-spacing:-2px!important;
font-weight:1000!important;
text-shadow:0 12px 36px rgba(0,0,0,.55)!important;
opacity:1!important;
}
.exact-hero p{
position:relative!important;
z-index:6!important;
margin:34px 0 0!important;
color:rgba(255,255,255,.74)!important;
font-size:25px!important;
line-height:1.42!important;
font-weight:400!important;
opacity:1!important;
}
.exact-hero-actions{
position:relative!important;
z-index:6!important;
display:flex!important;
align-items:center!important;
gap:32px!important;
margin-top:58px!important;
}
.exact-primary,
.exact-secondary{
min-height:68px!important;
border-radius:10px!important;
display:inline-flex!important;
align-items:center!important;
justify-content:center!important;
gap:20px!important;
text-decoration:none!important;
font-size:22px!important;
font-weight:900!important;
}
.exact-primary{
min-width:300px!important;
background:#00ff7a!important;
color:#020817!important;
}
.exact-secondary{
min-width:360px!important;
background:rgba(0,0,0,.10)!important;
border:2px solid #00ff7a!important;
color:#00ff7a!important;
}
/* Remove every ghost/old home layer if it exists */
.home-hero,
.breakzi-hero-shell,
.home-content,
.home-hero::before,
.home-hero::after{
display:none!important;
opacity:0!important;
visibility:hidden!important;
}
.exact-hero .home-hero,
.exact-hero .breakzi-hero-shell,
.exact-hero .home-content{
display:none!important;
}
/* Below hero spacing */
.live-results-carousel{
margin-top:30px!important;
}
/* Mobile */
@media(max-width:900px){
.topbar{
min-height:124px!important;
height:auto!important;
grid-template-columns:1fr auto!important;
grid-template-areas:"brand actions" "nav nav"!important;
padding:12px 18px 0!important;
gap:0 12px!important;
overflow:visible!important;
}
.exact-brand,.brand{
grid-area:brand!important;
width:auto!important;
min-width:0!important;
}
.exact-brand-logo{
width:170px!important;
max-width:170px!important;
}
.topbar-actions{
grid-area:actions!important;
width:auto!important;
gap:10px!important;
}
.exact-search-box{
display:none!important;
}
.nav-links{
grid-area:nav!important;
height:58px!important;
min-height:58px!important;
justify-content:flex-start!important;
gap:26px!important;
overflow-x:auto!important;
}
.nav-links a{
height:58px!important;
min-height:58px!important;
font-size:15px!important;
flex:0 0 auto!important;
}
.exact-hero{
min-height:560px!important;
}
.exact-hero::before{
left:40%!important;
width:70%!important;
opacity:.22!important;
}
.exact-hero::after{
width:100%!important;
height:36%!important;
right:-22%!important;
opacity:.5!important;
}
.exact-hero-content{
padding:54px 22px 70px!important;
}
.exact-pill{
min-height:34px!important;
padding:0 14px!important;
font-size:13px!important;
margin-bottom:30px!important;
}
.exact-hero h1{
font-size:40px!important;
line-height:1.13!important;
letter-spacing:-.8px!important;
}
.exact-hero p{
font-size:17px!important;
margin-top:22px!important;
}
.exact-hero-actions{
flex-direction:column!important;
align-items:flex-start!important;
gap:14px!important;
margin-top:32px!important;
}
.exact-primary,.exact-secondary{
min-width:min(100%,320px)!important;
min-height:54px!important;
font-size:16px!important;
}
}
/* ===== Breakzi v25: homepage cleanup + admin settings + better live results ===== */
/* Admin settings appears only when JS removes .hidden after admin login */
.admin-settings-btn{
min-height:42px!important;
border:1px solid rgba(0,255,122,.45)!important;
background:rgba(0,255,122,.09)!important;
color:#00ff7a!important;
border-radius:999px!important;
padding:0 16px!important;
font-size:13px!important;
font-weight:1000!important;
cursor:pointer!important;
white-space:nowrap!important;
}
.admin-settings-btn.hidden{
display:none!important;
}
/* Home should no longer show player ranking or tournament management panels. */
.home-live-only-grid{
grid-template-columns:1fr!important;
max-width:calc(100% - 96px)!important;
margin-left:auto!important;
margin-right:auto!important;
}
.home-live-wide-panel{
width:100%!important;
min-height:auto!important;
}
/* Dynamic sliding live results strip */
.live-results-carousel{
overflow:hidden!important;
}
.result-strip{
display:flex!important;
gap:16px!important;
width:max-content!important;
min-width:100%!important;
animation:breakziLiveSlide 28s linear infinite!important;
will-change:transform!important;
}
.result-strip:hover{
animation-play-state:paused!important;
}
@keyframes breakziLiveSlide{
0%{transform:translateX(0)}
100%{transform:translateX(-45%)}
}
.improved-mini-card{
width:250px!important;
min-width:250px!important;
flex:0 0 250px!important;
}
.improved-mini-result{
display:flex!important;
align-items:center!important;
justify-content:space-between!important;
gap:10px!important;
}
.improved-mini-result span{
min-width:0!important;
flex:1 1 0!important;
white-space:normal!important;
line-height:1.08!important;
}
.horizontal-score{
display:inline-flex!important;
align-items:center!important;
justify-content:center!important;
gap:7px!important;
color:#ffb21e!important;
font-size:20px!important;
font-weight:1000!important;
white-space:nowrap!important;
flex:0 0 auto!important;
}
.horizontal-score em{
font-style:normal!important;
color:#ffde5d!important;
}
/* Better live match cards with real Watch Live button */
.improved-live-body{
grid-template-columns:1fr auto auto!important;
align-items:center!important;
}
.live-match-names strong{
display:block!important;
color:#fff!important;
margin:3px 0!important;
}
.horizontal-live-score{
min-width:76px!important;
text-align:center!important;
}
.watch-live-home-btn{
display:inline-flex!important;
align-items:center!important;
justify-content:center!important;
min-height:36px!important;
padding:0 12px!important;
border-radius:999px!important;
background:linear-gradient(135deg,#ff5a2f,#ffb21e)!important;
color:#fff!important;
text-decoration:none!important;
font-size:12px!important;
line-height:1!important;
font-weight:1000!important;
box-shadow:0 10px 22px rgba(255,90,47,.25)!important;
white-space:nowrap!important;
}
.watch-live-home-btn::before{
content:"▶";
margin-right:6px;
font-size:9px;
}
.camera-icon{
display:none!important;
}
/* Make modal admin settings the place for tournament management */
.management-modal-card .management-report-grid{
margin-bottom:20px!important;
}
/* Mobile cleanup */
@media(max-width:850px){
.home-live-only-grid{
max-width:calc(100% - 26px)!important;
}
.result-strip{
animation-duration:22s!important;
}
.improved-mini-card{
width:220px!important;
min-width:220px!important;
}
.improved-live-body{
grid-template-columns:1fr!important;
gap:10px!important;
}
.horizontal-live-score{
text-align:left!important;
}
.watch-live-home-btn{
width:max-content!important;
}
.admin-settings-btn{
padding:0 10px!important;
font-size:11px!important;
min-height:36px!important;
}
}
/* ===== Breakzi v26: live matches slider inside hero blank space ===== */
.exact-hero{
overflow:hidden!important;
}
.hero-live-matches-widget{
position:absolute!important;
z-index:7!important;
right:64px!important;
top:50%!important;
transform:translateY(-44%)!important;
width:min(520px,34vw)!important;
min-height:390px!important;
border:1px solid rgba(255,255,255,.14)!important;
border-radius:28px!important;
background:linear-gradient(135deg,rgba(255,255,255,.08),rgba(255,255,255,.035))!important;
box-shadow:0 30px 90px rgba(0,0,0,.30), inset 0 1px 0 rgba(255,255,255,.12)!important;
backdrop-filter:blur(18px)!important;
padding:24px!important;
overflow:hidden!important;
}
.hero-live-head{
display:flex!important;
align-items:flex-start!important;
justify-content:space-between!important;
gap:18px!important;
padding-bottom:16px!important;
border-bottom:1px solid rgba(255,255,255,.12)!important;
margin-bottom:18px!important;
}
.hero-live-head strong{
display:flex!important;
align-items:center!important;
gap:10px!important;
color:#fff!important;
font-size:20px!important;
font-weight:1000!important;
letter-spacing:.3px!important;
}
.hero-live-head strong span{
width:12px!important;
height:12px!important;
border-radius:50%!important;
background:#00ff7a!important;
box-shadow:0 0 20px rgba(0,255,122,.7)!important;
}
.hero-live-head small{
display:block!important;
color:#b8c7da!important;
font-size:13px!important;
font-weight:800!important;
margin-top:6px!important;
}
.hero-live-head a{
color:#dce8ff!important;
text-decoration:none!important;
font-weight:900!important;
font-size:13px!important;
white-space:nowrap!important;
}
.hero-live-slider{
display:flex!important;
flex-direction:column!important;
gap:14px!important;
animation:heroLiveSlide 22s linear infinite!important;
will-change:transform!important;
}
.hero-live-matches-widget:hover .hero-live-slider{
animation-play-state:paused!important;
}
@keyframes heroLiveSlide{
0%{transform:translateY(0)}
100%{transform:translateY(-50%)}
}
.hero-live-card{
flex:0 0 auto!important;
border-radius:18px!important;
border:1px solid rgba(255,255,255,.12)!important;
background:rgba(255,255,255,.065)!important;
padding:16px 16px!important;
box-shadow:inset 4px 0 0 #00ff7a!important;
}
.hero-live-meta{
color:#a9bed3!important;
font-size:13px!important;
font-weight:900!important;
margin-bottom:12px!important;
}
.hero-live-main{
display:grid!important;
grid-template-columns:1fr auto 1fr!important;
align-items:center!important;
gap:14px!important;
}
.hero-live-main strong{
color:#fff!important;
font-size:18px!important;
line-height:1.15!important;
font-weight:1000!important;
}
.hero-live-main strong:last-child{
text-align:right!important;
}
.hero-live-main .horizontal-score{
font-size:23px!important;
}
.hero-watch-btn{
margin-top:14px!important;
width:max-content!important;
min-height:34px!important;
}
.hero-live-empty{
box-shadow:none!important;
}
.hero-live-empty strong{
display:block!important;
color:#fff!important;
margin-bottom:8px!important;
}
.hero-live-empty small{
color:#a9bed3!important;
font-weight:800!important;
}
/* Since live matches moved into hero, do not show the old lower live panel if any remains. */
.home-live-only-grid{
display:none!important;
}
/* On desktop, keep hero text from entering the slider area. */
.exact-hero-content{
max-width:calc(100% - 650px)!important;
}
/* Tablet / smaller desktop */
@media(max-width:1200px){
.hero-live-matches-widget{
right:32px!important;
width:390px!important;
}
.exact-hero-content{
max-width:calc(100% - 470px)!important;
}
.hero-live-main strong{
font-size:16px!important;
}
}
/* Mobile: slider goes under hero text, not overlapping it. */
@media(max-width:900px){
.exact-hero{
min-height:auto!important;
padding-bottom:32px!important;
}
.exact-hero-content{
max-width:100%!important;
padding-bottom:28px!important;
}
.hero-live-matches-widget{
position:relative!important;
right:auto!important;
top:auto!important;
transform:none!important;
width:calc(100% - 44px)!important;
min-height:310px!important;
margin:0 auto!important;
padding:18px!important;
}
.hero-live-head strong{
font-size:17px!important;
}
.hero-live-main{
grid-template-columns:1fr!important;
gap:8px!important;
}
.hero-live-main strong:last-child{
text-align:left!important;
}
.hero-live-main .horizontal-score{
justify-content:flex-start!important;
}
}
/* ===== Breakzi v27: mobile live slider anti-glitch fix ===== */
/* Desktop keeps the smooth vertical slider. */
.hero-live-slider{
transform:translateZ(0);
backface-visibility:hidden;
}
/* Mobile: disable vertical auto-animation and use stable horizontal swipe cards. */
@media(max-width:900px){
.hero-live-matches-widget{
overflow:hidden!important;
min-height:auto!important;
max-height:none!important;
}
.hero-live-slider{
animation:none!important;
display:flex!important;
flex-direction:row!important;
gap:14px!important;
overflow-x:auto!important;
overflow-y:hidden!important;
scroll-snap-type:x mandatory!important;
-webkit-overflow-scrolling:touch!important;
padding:2px 2px 12px!important;
transform:none!important;
will-change:auto!important;
scrollbar-width:none!important;
}
.hero-live-slider::-webkit-scrollbar{
display:none!important;
}
.hero-live-card{
flex:0 0 86%!important;
min-width:86%!important;
max-width:86%!important;
scroll-snap-align:start!important;
min-height:190px!important;
display:flex!important;
flex-direction:column!important;
justify-content:space-between!important;
}
.hero-live-empty{
min-height:150px!important;
}
.hero-live-main{
display:flex!important;
flex-direction:column!important;
align-items:flex-start!important;
gap:8px!important;
}
.hero-live-main strong{
width:100%!important;
font-size:17px!important;
line-height:1.15!important;
text-align:left!important;
overflow-wrap:anywhere!important;
}
.hero-live-main .horizontal-score{
font-size:24px!important;
justify-content:flex-start!important;
}
.hero-watch-btn{
margin-top:12px!important;
width:max-content!important;
}
}
/* Very small phones */
@media(max-width:480px){
.hero-live-card{
flex-basis:92%!important;
min-width:92%!important;
max-width:92%!important;
}
.hero-live-matches-widget{
width:calc(100% - 28px)!important;
padding:14px!important;
}
.hero-live-head{
gap:10px!important;
}
.hero-live-head strong{
font-size:15px!important;
}
.hero-live-head a{
font-size:12px!important;
}
}
/* ===== Breakzi v28: View all live matches modal + mobile live results swipe ===== */
.view-all-live-btn{
border:0!important;
background:transparent!important;
color:#dce8ff!important;
font-size:13px!important;
font-weight:900!important;
cursor:pointer!important;
padding:0!important;
text-decoration:none!important;
white-space:nowrap!important;
}
.view-all-live-btn:hover{
color:#00ff7a!important;
}
.all-live-modal-card{
width:min(920px,calc(100% - 28px))!important;
max-height:88vh!important;
overflow:auto!important;
background:linear-gradient(135deg,#071827,#10283e)!important;
border:1px solid rgba(255,255,255,.16)!important;
color:#fff!important;
}
.all-live-modal-head h2{
margin:0 0 8px!important;
color:#fff!important;
font-size:34px!important;
}
.all-live-modal-head p{
margin:0 0 20px!important;
color:#a9bed3!important;
font-weight:800!important;
}
.all-live-matches-content{
display:grid!important;
gap:12px!important;
}
.all-live-match-row{
display:grid!important;
grid-template-columns:1fr auto!important;
align-items:center!important;
gap:16px!important;
padding:16px!important;
border-radius:18px!important;
border:1px solid rgba(255,255,255,.12)!important;
background:rgba(255,255,255,.055)!important;
box-shadow:inset 4px 0 0 #00ff7a!important;
}
.all-live-match-info small{
display:block!important;
color:#a9bed3!important;
font-weight:900!important;
margin-bottom:10px!important;
}
.all-live-players{
display:grid!important;
grid-template-columns:minmax(0,1fr) auto minmax(0,1fr)!important;
align-items:center!important;
gap:16px!important;
}
.all-live-players strong{
color:#fff!important;
font-size:18px!important;
line-height:1.15!important;
}
.all-live-players strong:last-child{
text-align:right!important;
}
.all-live-watch-btn{
min-height:40px!important;
padding:0 16px!important;
}
/* On phones, Live Results should behave like the Live Matches slider: stable horizontal swipe, no auto animation. */
@media(max-width:900px){
.live-results-carousel{
overflow:hidden!important;
}
.live-results-carousel .result-strip{
animation:none!important;
display:flex!important;
flex-direction:row!important;
overflow-x:auto!important;
overflow-y:hidden!important;
scroll-snap-type:x mandatory!important;
-webkit-overflow-scrolling:touch!important;
width:100%!important;
min-width:0!important;
padding:4px 2px 12px!important;
transform:none!important;
will-change:auto!important;
scrollbar-width:none!important;
}
.live-results-carousel .result-strip::-webkit-scrollbar{
display:none!important;
}
.live-results-carousel .mini-result-card{
flex:0 0 86%!important;
min-width:86%!important;
max-width:86%!important;
scroll-snap-align:start!important;
min-height:120px!important;
}
.live-results-carousel .improved-mini-result{
display:grid!important;
grid-template-columns:1fr!important;
gap:8px!important;
align-items:flex-start!important;
}
.live-results-carousel .horizontal-score{
justify-content:flex-start!important;
font-size:24px!important;
}
.all-live-match-row{
grid-template-columns:1fr!important;
}
.all-live-players{
grid-template-columns:1fr!important;
gap:8px!important;
}
.all-live-players strong:last-child{
text-align:left!important;
}
.all-live-watch-btn{
width:max-content!important;
}
.all-live-modal-head h2{
font-size:26px!important;
}
}
@media(max-width:480px){
.live-results-carousel .mini-result-card{
flex-basis:92%!important;
min-width:92%!important;
max-width:92%!important;
}
}
/* ===== Breakzi v29: transparent logo, working nav, scoreboard tournament selector ===== */
/* Make sure the Breakzi logo has no box/background. */
.exact-brand,
.brand{
background:transparent!important;
}
.exact-brand-logo{
background:transparent!important;
object-fit:contain!important;
width:270px!important;
max-width:270px!important;
max-height:78px!important;
filter:drop-shadow(0 16px 26px rgba(0,0,0,.35))!important;
}
/* Header rebuilt: logo | nav | actions */
.topbar{
grid-template-columns:330px minmax(390px,1fr) 520px!important;
grid-template-areas:"brand nav actions"!important;
overflow:visible!important;
}
.nav-links{
grid-area:nav!important;
}
.topbar-actions{
grid-area:actions!important;
position:relative!important;
}
.exact-search-box{
cursor:pointer!important;
color:rgba(255,255,255,.78)!important;
text-align:left!important;
}
.exact-search-box strong{
color:rgba(255,255,255,.74)!important;
font-size:16px!important;
font-weight:500!important;
}
.exact-profile-btn{
display:grid!important;
place-items:center!important;
cursor:pointer!important;
}
.exact-profile-btn.signed-in{
border-color:rgba(0,255,122,.60)!important;
color:#00ff7a!important;
box-shadow:0 0 22px rgba(0,255,122,.14)!important;
}
.globe-mark{
font-size:22px!important;
line-height:1!important;
}
/* Admin settings stays in the topbar and only appears for authenticated admin. */
.admin-settings-btn{
display:inline-flex!important;
align-items:center!important;
justify-content:center!important;
}
.admin-settings-btn.hidden{
display:none!important;
}
/* Scoreboard tournament selector */
.scoreboard-tournament-selector{
margin:26px 0 28px!important;
padding:28px!important;
border:1px solid rgba(255,255,255,.14)!important;
border-radius:24px!important;
background:linear-gradient(135deg,rgba(255,255,255,.075),rgba(255,255,255,.035))!important;
box-shadow:0 24px 70px rgba(0,0,0,.22)!important;
}
.scoreboard-tournament-selector h2{
color:#fff!important;
font-size:34px!important;
margin:6px 0 18px!important;
}
.tournament-select-card{
width:min(520px,100%)!important;
display:flex!important;
flex-direction:column!important;
align-items:flex-start!important;
gap:8px!important;
padding:22px 24px!important;
border:1px solid rgba(0,255,122,.35)!important;
border-radius:18px!important;
background:linear-gradient(135deg,rgba(0,255,122,.16),rgba(255,255,255,.055))!important;
color:#fff!important;
cursor:pointer!important;
box-shadow:0 18px 45px rgba(0,255,122,.09)!important;
text-align:left!important;
}
.tournament-select-card strong{
font-size:23px!important;
font-weight:1000!important;
color:#fff!important;
}
.tournament-select-card span{
color:#a9bed3!important;
font-size:16px!important;
font-weight:900!important;
}
.tournament-select-card:hover{
transform:translateY(-2px)!important;
border-color:rgba(0,255,122,.70)!important;
}
.scoreboard-content-hidden{
display:none!important;
}
/* Hide any old Tournaments link if a cached copy remains. */
.nav-tournaments-link{
display:none!important;
}
/* Responsive header */
@media(max-width:1180px){
.topbar{
grid-template-columns:240px 1fr 360px!important;
}
.exact-brand-logo{
width:220px!important;
max-width:220px!important;
}
.topbar-actions{
width:360px!important;
}
.admin-settings-btn{
display:none!important;
}
}
@media(max-width:900px){
.topbar{
grid-template-columns:1fr auto!important;
grid-template-areas:"brand actions" "nav nav"!important;
}
.exact-brand-logo{
width:170px!important;
max-width:170px!important;
}
.topbar-actions{
width:auto!important;
}
.scoreboard-tournament-selector{
padding:20px!important;
}
.scoreboard-tournament-selector h2{
font-size:26px!important;
}
}
/* ===== Breakzi v30: true page separation + homogeneous design ===== */
/* Critical fix: only active page content is visible.
This prevents Home from overlapping Scoreboard or Rankings. */
main.page > .app-section{
display:none!important;
visibility:hidden!important;
opacity:0!important;
height:0!important;
min-height:0!important;
overflow:hidden!important;
pointer-events:none!important;
}
main.page > .app-section.active-section{
display:block!important;
visibility:visible!important;
opacity:1!important;
height:auto!important;
min-height:calc(100vh - 112px)!important;
overflow:visible!important;
pointer-events:auto!important;
}
/* Home is visible ONLY when it has active-section. */
.breakzi-exact-home:not(.active-section),
#home:not(.active-section){
display:none!important;
visibility:hidden!important;
opacity:0!important;
height:0!important;
overflow:hidden!important;
}
.breakzi-exact-home.active-section,
#home.active-section{
display:block!important;
visibility:visible!important;
opacity:1!important;
height:auto!important;
overflow:visible!important;
}
/* Inner page layout for Scoreboard and Rankings, matching Breakzi dark design. */
#scoreboard-page,
#ranking{
padding:42px 48px 80px!important;
background:
radial-gradient(circle at 12% 8%, rgba(0,255,122,.09), transparent 28%),
radial-gradient(circle at 84% 12%, rgba(35,214,255,.08), transparent 30%),
linear-gradient(180deg,#020817 0%,#061525 100%)!important;
color:#fff!important;
}
#scoreboard-page .page-title,
#ranking .section-title h2{
color:#fff!important;
font-size:clamp(36px,4vw,58px)!important;
letter-spacing:-1.4px!important;
margin:0 0 26px!important;
font-weight:1000!important;
}
#ranking .section-title{
margin-bottom:24px!important;
}
#ranking .section-title p{
color:#a9bed3!important;
font-weight:800!important;
}
/* Page cards with same glass style as home. */
.scoreboard-tournament-selector,
.tournament-card,
.tournament-details,
.ranking-card,
.group-card,
.group-ranking-card,
.admin-tools,
.player-link-box{
background:linear-gradient(135deg,rgba(255,255,255,.075),rgba(255,255,255,.035))!important;
border:1px solid rgba(255,255,255,.13)!important;
box-shadow:0 26px 80px rgba(0,0,0,.26), inset 0 1px 0 rgba(255,255,255,.08)!important;
backdrop-filter:blur(16px)!important;
}
.scoreboard-tournament-selector{
max-width:920px!important;
margin:8px 0 34px!important;
}
.scoreboard-tournament-selector .eyebrow,
.tournament-card .eyebrow,
.stage-header .eyebrow,
.section-title .eyebrow{
color:#00ff7a!important;
}
.scoreboard-tournament-selector h2,
.tournament-card h2,
.stage-header h2,
.group-card h3,
.group-ranking-card h3{
color:#fff!important;
}
.scoreboard-tournament-selector p,
.tournament-card p,
.stage-header span{
color:#a9bed3!important;
}
.tournament-select-card{
background:linear-gradient(135deg,rgba(0,255,122,.18),rgba(255,255,255,.06))!important;
border:1px solid rgba(0,255,122,.35)!important;
}
.tournament-select-card strong{
color:#fff!important;
}
.tournament-select-card span{
color:#a9bed3!important;
}
/* Scoreboard tab buttons homogeneous. */
.tournament-actions button{
background:rgba(255,255,255,.08)!important;
color:#fff!important;
border:1px solid rgba(255,255,255,.13)!important;
border-radius:999px!important;
}
.tournament-actions button.active-score-tab,
.tournament-actions button:hover{
background:linear-gradient(135deg,#00ff7a,#18c6c4)!important;
color:#020817!important;
border-color:transparent!important;
}
/* Tables in ranking/standings: cleaner dark version. */
.ranking-card table,
.group-ranking-card table{
background:transparent!important;
}
.ranking-card th,
.group-ranking-card th{
color:#00ff7a!important;
border-bottom:1px solid rgba(255,255,255,.12)!important;
}
.ranking-card td,
.group-ranking-card td{
color:#fff!important;
border-bottom:1px solid rgba(255,255,255,.08)!important;
}
.ranking-mobile-card{
background:linear-gradient(135deg,rgba(255,255,255,.075),rgba(255,255,255,.035))!important;
border:1px solid rgba(255,255,255,.13)!important;
color:#fff!important;
}
.ranking-mobile-name,
.ranking-mobile-stat strong{
color:#fff!important;
}
.ranking-mobile-stat small{
color:#a9bed3!important;
}
.ranking-mobile-stat{
background:rgba(255,255,255,.055)!important;
border:1px solid rgba(255,255,255,.08)!important;
}
/* Group stage match cards */
.group-head{
background:rgba(0,255,122,.14)!important;
color:#fff!important;
border-bottom:1px solid rgba(255,255,255,.10)!important;
}
.match-row{
border-top:1px solid rgba(255,255,255,.08)!important;
color:#fff!important;
}
.table-tag{
color:#a9bed3!important;
}
.score-pill{
background:rgba(0,255,122,.16)!important;
color:#ffd166!important;
border:1px solid rgba(0,255,122,.25)!important;
}
/* Knockout rows keep readable dark style. */
.ko-row{
border:1px solid rgba(255,255,255,.08)!important;
box-shadow:0 16px 34px rgba(0,0,0,.18)!important;
}
.stage-header{
scroll-margin-top:132px!important;
}
/* Active nav should always represent the current page. */
body.scoreboard-page-active .nav-links a[data-section="scoreboard-page"],
body.ranking-page-active .nav-links a[data-section="ranking"],
body.home-page-active .nav-links a[data-section="home"]{
color:#fff!important;
}
/* Scoreboard content hidden should still work after strict section styles. */
.scoreboard-content-hidden{
display:none!important;
}
/* Mobile page spacing */
@media(max-width:900px){
main.page > .app-section.active-section{
min-height:calc(100vh - 124px)!important;
}
#scoreboard-page,
#ranking{
padding:26px 16px 62px!important;
}
#scoreboard-page .page-title,
#ranking .section-title h2{
font-size:34px!important;
}
.tournament-card{
gap:18px!important;
}
.tournament-actions{
width:100%!important;
display:grid!important;
grid-template-columns:1fr!important;
}
.tournament-actions button{
width:100%!important;
}
}
/* ===== Breakzi v31: language flags + clearer sign-in icon ===== */
.icon-btn.exact-lang-btn{
gap:8px!important;
font-weight:900!important;
}
.lang-flag{
font-size:22px!important;
line-height:1!important;
display:inline-flex!important;
align-items:center!important;
}
.lang-arrow{
opacity:.75!important;
font-size:15px!important;
margin-left:2px!important;
}
.language-menu{
min-width:170px!important;
border:1px solid rgba(255,255,255,.14)!important;
background:#071827!important;
box-shadow:0 24px 70px rgba(0,0,0,.34)!important;
}
.language-menu button{
display:flex!important;
align-items:center!important;
gap:10px!important;
background:#071827!important;
color:#fff!important;
font-weight:900!important;
}
.language-menu button:hover{
background:rgba(0,255,122,.10)!important;
color:#00ff7a!important;
}
.language-menu button span{
font-size:21px!important;
}
/* Bigger, clearer admin sign-in icon */
.exact-profile-btn{
width:60px!important;
min-width:60px!important;
height:60px!important;
border-radius:50%!important;
display:grid!important;
place-items:center!important;
padding:0!important;
}
.exact-profile-btn svg{
width:31px!important;
height:31px!important;
fill:none!important;
stroke:currentColor!important;
stroke-width:2.5!important;
stroke-linecap:round!important;
stroke-linejoin:round!important;
}
.exact-profile-btn:hover{
color:#00ff7a!important;
border-color:rgba(0,255,122,.62)!important;
box-shadow:0 0 24px rgba(0,255,122,.16)!important;
}
.exact-profile-btn.signed-in{
color:#00ff7a!important;
border-color:rgba(0,255,122,.75)!important;
background:rgba(0,255,122,.10)!important;
box-shadow:0 0 28px rgba(0,255,122,.18)!important;
}
@media(max-width:900px){
.exact-profile-btn{
width:48px!important;
min-width:48px!important;
height:48px!important;
}
.exact-profile-btn svg{
width:26px!important;
height:26px!important;
}
.lang-flag{
font-size:19px!important;
}
}
/* ===== Breakzi v32: mobile knockout visual rebuild + tournament scroll ===== */
.tournament-select-card,
.scoreboard-tournament-content.tournament-card{
cursor:pointer!important;
}
.scoreboard-tournament-content.tournament-card:hover{
border-color:rgba(0,255,122,.35)!important;
}
/* Give anchor scroll a clean offset under sticky header */
#activeTournamentMenu,
#tournamentDetails,
#knockoutStageSection,
#groupStageSection,
#groupRankingSection{
scroll-margin-top:140px!important;
}
/* Desktop/tablet small refinements */
.ko-row{
transition:transform .18s ease, border-color .18s ease, box-shadow .18s ease!important;
}
.ko-row:hover{
border-color:rgba(0,255,122,.20)!important;
box-shadow:0 22px 48px rgba(0,0,0,.24)!important;
}
/* FULL MOBILE KNOCKOUT CARD DESIGN */
@media(max-width:760px){
#knockoutBoard{
display:grid!important;
gap:14px!important;
width:100%!important;
}
.knockout-board{
overflow:visible!important;
}
.ko-row{
display:grid!important;
grid-template-columns:44px 1fr auto!important;
grid-template-areas:
"id left leftscore"
"id right rightscore"
"meta meta meta"
"actions actions actions"!important;
gap:0!important;
align-items:stretch!important;
width:100%!important;
min-width:0!important;
padding:0!important;
margin:0 0 14px!important;
border-radius:18px!important;
overflow:hidden!important;
background:linear-gradient(135deg,rgba(0,255,122,.12),rgba(255,255,255,.045))!important;
border:1px solid rgba(255,255,255,.12)!important;
box-shadow:0 18px 42px rgba(0,0,0,.28)!important;
}
.ko-id{
grid-area:id!important;
width:44px!important;
min-width:44px!important;
height:100%!important;
display:flex!important;
align-items:center!important;
justify-content:center!important;
padding:0!important;
font-size:17px!important;
font-weight:1000!important;
color:#d9fff0!important;
background:rgba(0,0,0,.20)!important;
border-right:1px solid rgba(255,255,255,.08)!important;
}
.ko-player{
min-width:0!important;
padding:12px 10px!important;
display:flex!important;
align-items:center!important;
justify-content:flex-start!important;
gap:8px!important;
}
.ko-row .ko-player:nth-of-type(2){
grid-area:left!important;
}
.ko-row .ko-player:nth-of-type(6){
grid-area:right!important;
}
.ko-player-main{
display:flex!important;
align-items:center!important;
gap:8px!important;
min-width:0!important;
width:100%!important;
}
.ko-player-name{
display:block!important;
min-width:0!important;
max-width:100%!important;
white-space:normal!important;
overflow:visible!important;
text-overflow:clip!important;
color:#fff!important;
font-size:16px!important;
line-height:1.16!important;
font-weight:900!important;
overflow-wrap:anywhere!important;
}
.flag{
flex:0 0 auto!important;
width:24px!important;
height:17px!important;
display:inline-flex!important;
align-items:center!important;
justify-content:center!important;
font-size:12px!important;
line-height:1!important;
margin:0!important;
}
.player-badges{
flex:0 0 auto!important;
margin-left:2px!important;
gap:4px!important;
}
.player-pill{
min-width:24px!important;
height:24px!important;
padding:0 5px!important;
display:inline-flex!important;
align-items:center!important;
justify-content:center!important;
font-size:11px!important;
border-radius:999px!important;
}
.ko-score{
width:58px!important;
min-width:58px!important;
height:auto!important;
display:flex!important;
align-items:center!important;
justify-content:center!important;
padding:12px 6px!important;
font-size:29px!important;
font-weight:1000!important;
color:#fff!important;
background:rgba(0,0,0,.16)!important;
border-left:1px solid rgba(255,255,255,.08)!important;
}
.ko-row .ko-score:nth-of-type(3){
grid-area:leftscore!important;
}
.ko-row .ko-score:nth-of-type(5){
grid-area:rightscore!important;
}
.ko-score.winner-score,
.ko-score .winner-score{
color:#ffb21e!important;
}
.ko-center-reset{
grid-area:actions!important;
padding:8px 10px 0!important;
display:flex!important;
justify-content:center!important;
align-items:center!important;
background:rgba(0,0,0,.08)!important;
}
.center-reset-btn{
min-height:30px!important;
padding:0 12px!important;
border-radius:999px!important;
font-size:12px!important;
width:auto!important;
}
.ko-time,
.ko-table{
font-size:13px!important;
font-weight:900!important;
color:#dce8ff!important;
background:rgba(0,0,0,.10)!important;
}
.ko-time{
grid-area:meta!important;
padding:9px 10px 10px 58px!important;
display:block!important;
}
.ko-time::before{
content:"Time: ";
color:#ffb21e;
font-weight:1000;
}
.ko-table{
grid-area:meta!important;
justify-self:end!important;
align-self:center!important;
padding:9px 12px 10px!important;
display:block!important;
}
.ko-table::before{
content:"Table: ";
color:#ffb21e;
font-weight:1000;
}
.ko-side-actions{
grid-area:actions!important;
display:flex!important;
flex-direction:row!important;
flex-wrap:wrap!important;
align-items:center!important;
justify-content:center!important;
gap:8px!important;
padding:8px 10px 12px!important;
width:100%!important;
max-width:none!important;
background:rgba(0,0,0,.08)!important;
}
.admin-action-row{
display:flex!important;
gap:8px!important;
flex-wrap:wrap!important;
justify-content:center!important;
}
.side-action-btn,
.score-link-btn,
.schedule-link-btn{
min-height:32px!important;
padding:0 11px!important;
font-size:11px!important;
border-radius:999px!important;
white-space:nowrap!important;
}
.ko-side-actions .watch-live-btn{
min-height:32px!important;
width:auto!important;
max-width:none!important;
padding:0 11px!important;
font-size:11px!important;
border-radius:999px!important;
}
/* Score controls under players should not crush names */
.inline-score-actions{
margin-left:auto!important;
flex:0 0 auto!important;
display:flex!important;
gap:4px!important;
}
.score-mini-btn{
width:24px!important;
height:24px!important;
min-width:24px!important;
min-height:24px!important;
border-radius:7px!important;
font-size:15px!important;
}
/* Avoid any inherited desktop columns */
.ko-row > *{
min-width:0!important;
box-sizing:border-box!important;
}
}
/* Extra small phones */
@media(max-width:420px){
.ko-row{
grid-template-columns:38px 1fr 48px!important;
}
.ko-id{
width:38px!important;
min-width:38px!important;
font-size:15px!important;
}
.ko-player{
padding:11px 8px!important;
}
.ko-player-name{
font-size:14.5px!important;
}
.flag{
width:21px!important;
height:15px!important;
font-size:10px!important;
}
.ko-score{
width:48px!important;
min-width:48px!important;
font-size:25px!important;
}
.ko-time{
padding-left:48px!important;
}
}
/* ===== Breakzi v33: matches results slider + mobile admin/player-link fixes ===== */
/* Home carousel title is now MATCHES RESULTS */
.live-results-title strong{
letter-spacing:.4px!important;
}
/* Make all-match slider cards a little more readable */
.improved-mini-card{
width:270px!important;
min-width:270px!important;
}
.improved-mini-card small{
display:block!important;
min-height:30px!important;
line-height:1.2!important;
}
/* Player score link: remove unrelated selector/card/header sections completely */
body.player-link-view #scoreboardTournamentSelector,
body.player-link-view .scoreboard-tournament-content.tournament-card,
body.player-link-view .admin-tools,
body.player-link-view #playerLinkBox,
body.player-link-view #groupStageSection,
body.player-link-view #groupsGrid,
body.player-link-view #groupRankingSection,
body.player-link-view #groupRankingGrid,
body.player-link-view #knockoutStageSection{
display:none!important;
}
body.player-link-view #scoreboard-page{
padding:0!important;
background:#06131d!important;
}
body.player-link-view #tournamentDetails{
padding:0!important;
margin:0!important;
background:transparent!important;
border:0!important;
box-shadow:none!important;
}
body.player-link-view #knockoutBoard{
margin:0!important;
}
/* Mobile admin action buttons: no more overlapping */
@media(max-width:760px){
.ko-center-reset{
grid-area:reset!important;
display:flex!important;
justify-content:center!important;
padding:8px 10px 0!important;
background:rgba(0,0,0,.08)!important;
}
.ko-side-actions{
grid-area:actions!important;
display:grid!important;
grid-template-columns:1fr 1fr!important;
gap:8px!important;
padding:8px 10px 12px!important;
width:100%!important;
max-width:none!important;
background:rgba(0,0,0,.08)!important;
}
.ko-row{
grid-template-areas:
"id left leftscore"
"id right rightscore"
"meta meta meta"
"reset reset reset"
"actions actions actions"!important;
}
.center-reset-btn,
.side-action-btn,
.score-link-btn,
.schedule-link-btn,
.ko-side-actions .watch-live-btn{
width:100%!important;
min-height:36px!important;
height:36px!important;
padding:0 10px!important;
border-radius:10px!important;
font-size:11px!important;
line-height:1!important;
display:flex!important;
align-items:center!important;
justify-content:center!important;
white-space:nowrap!important;
margin:0!important;
}
.center-reset-btn{
width:auto!important;
min-width:104px!important;
}
.admin-action-row{
display:contents!important;
}
.ko-side-actions:empty{
display:none!important;
}
/* Give score mini controls a dedicated area so they don't hit names */
.ko-player{
display:grid!important;
grid-template-columns:minmax(0,1fr) auto!important;
gap:8px!important;
}
.ko-player-main{
min-width:0!important;
}
.inline-score-actions{
align-self:center!important;
margin-left:0!important;
}
}
/* Mobile live results: same stable horizontal swipe, with all matches */
@media(max-width:900px){
.live-results-title strong{
font-size:16px!important;
}
.live-results-carousel .mini-result-card{
flex:0 0 88%!important;
min-width:88%!important;
max-width:88%!important;
}
.improved-mini-card small{
min-height:auto!important;
}
}
/* ===== Breakzi v34: tournament click stop + mobile auto sliding results ===== */
/* Clicking PLAZA CLUB TOURNAMENT should stop here, where the 3 choice buttons are. */
#activeTournamentMenu,
.scoreboard-tournament-content.tournament-card{
scroll-margin-top:136px!important;
}
/* Keep the active tournament card from acting like a second scroll trigger. */
.scoreboard-tournament-content.tournament-card{
cursor:default!important;
}
/* MATCHES RESULTS should auto-slide on mobile too. */
@media(max-width:900px){
.live-results-carousel .result-strip{
animation:breakziMobileResultsSlide 30s linear infinite!important;
display:flex!important;
flex-direction:row!important;
overflow:visible!important;
width:max-content!important;
min-width:max-content!important;
transform:translateX(0);
will-change:transform!important;
}
.live-results-carousel .result-strip:hover{
animation-play-state:paused!important;
}
@keyframes breakziMobileResultsSlide{
0%{transform:translateX(0)}
100%{transform:translateX(-50%)}
}
.live-results-carousel .mini-result-card{
flex:0 0 260px!important;
min-width:260px!important;
max-width:260px!important;
scroll-snap-align:none!important;
}
}
@media(max-width:480px){
.live-results-carousel .mini-result-card{
flex-basis:236px!important;
min-width:236px!important;
max-width:236px!important;
}
.live-results-carousel .result-strip{
animation-duration:26s!important;
}
}
/* ===== Breakzi v35: JOIN US NOW player profile page ===== */
#join{
padding:28px 38px 70px!important;
background:
radial-gradient(circle at 78% 18%, rgba(0,255,190,.16), transparent 32%),
radial-gradient(circle at 14% 88%, rgba(0,255,122,.10), transparent 28%),
linear-gradient(135deg,#020817 0%,#071827 52%,#020817 100%)!important;
color:#fff!important;
}
.join-page-shell{
width:min(1440px,100%);
margin:0 auto;
display:grid;
grid-template-columns:minmax(0,1.04fr) minmax(420px,.96fr);
gap:34px;
min-height:calc(100vh - 170px);
align-items:stretch;
}
.join-form-card{
border:1px solid rgba(0,255,190,.32);
border-radius:28px;
background:linear-gradient(135deg,rgba(255,255,255,.075),rgba(255,255,255,.028));
box-shadow:0 34px 100px rgba(0,0,0,.38), inset 0 1px 0 rgba(255,255,255,.12), 0 0 40px rgba(0,255,190,.08);
backdrop-filter:blur(18px);
padding:42px 48px 34px;
}
.join-heading h1{
margin:0;
color:#fff;
font-size:clamp(42px,5vw,68px);
line-height:1;
letter-spacing:-1.5px;
font-weight:1000;
}
.join-heading h1 span{
color:#00f5bf;
text-shadow:0 0 30px rgba(0,245,191,.30);
}
.join-heading p{
color:#c0cee0;
font-size:18px;
line-height:1.45;
margin:14px 0 30px;
}
.join-profile-form{
display:grid;
gap:18px;
}
.join-two{
display:grid;
grid-template-columns:1fr 1fr;
gap:18px;
}
.join-profile-form label{
display:flex;
flex-direction:column;
gap:8px;
color:#eaf3ff;
font-weight:850;
}
.join-profile-form label span,
.join-mini-title{
color:#dbe9f9;
font-size:14px;
font-weight:850;
}
.join-profile-form input,
.join-profile-form select{
height:54px;
border-radius:10px;
border:1px solid rgba(255,255,255,.14);
background:rgba(0,0,0,.20);
color:#fff;
padding:0 16px;
font-size:15px;
outline:none;
font-weight:750;
}
.join-profile-form input:focus,
.join-profile-form select:focus{
border-color:rgba(0,255,190,.70);
box-shadow:0 0 0 4px rgba(0,255,190,.08);
}
.join-profile-form input::placeholder{
color:#6f839b;
}
.join-split-row{
display:grid;
grid-template-columns:.9fr 1.1fr;
gap:24px;
align-items:end;
}
.join-toggle-group{
display:grid;
grid-template-columns:1fr 1fr;
gap:10px;
margin-top:8px;
}
.join-radio{
height:50px;
flex-direction:row!important;
align-items:center;
justify-content:center;
border-radius:10px;
border:1px solid rgba(255,255,255,.14);
background:rgba(0,0,0,.18);
color:#fff!important;
cursor:pointer;
font-weight:900!important;
}
.join-radio input{
display:none;
}
.join-radio.active{
background:linear-gradient(135deg,rgba(0,255,122,.75),rgba(0,210,190,.68));
border-color:rgba(0,255,190,.7);
box-shadow:0 0 24px rgba(0,255,190,.18);
}
.join-birthdate{
display:grid;
grid-template-columns:1fr 1fr 1fr;
gap:10px;
margin-top:8px;
}
.join-upload-box{
display:grid;
grid-template-columns:70px 1fr auto;
gap:18px;
align-items:center;
border:1px dashed rgba(255,255,255,.28);
border-radius:16px;
padding:18px;
background:rgba(0,0,0,.14);
}
.join-photo-preview{
width:62px;
height:62px;
border-radius:50%;
display:grid;
place-items:center;
overflow:hidden;
color:#c8d6e9;
font-size:28px;
border:1px solid rgba(255,255,255,.22);
background:rgba(255,255,255,.07);
}
.join-photo-preview img{
width:100%;
height:100%;
object-fit:cover;
}
.join-upload-box strong{
display:block;
color:#fff;
font-size:16px;
}
.join-upload-box small{
display:block;
color:#8fa3ba;
margin-top:5px;
font-weight:750;
}
.join-upload-btn{
min-width:110px;
min-height:46px;
border-radius:10px;
border:1px solid #00f5bf;
display:flex!important;
align-items:center;
justify-content:center;
color:#fff!important;
cursor:pointer;
flex-direction:row!important;
}
.join-upload-btn input{
display:none;
}
.join-submit-btn{
min-height:64px;
border:0;
border-radius:12px;
background:linear-gradient(135deg,#00ff7a,#00d6c8);
color:#02101b;
font-size:17px;
font-weight:1000;
cursor:pointer;
display:flex;
align-items:center;
justify-content:center;
gap:18px;
box-shadow:0 22px 48px rgba(0,255,122,.22);
margin-top:8px;
}
.join-submit-btn span{
font-size:24px;
}
.join-profile-status{
min-height:24px;
color:#00ff7a;
text-align:center;
font-weight:900;
margin:0;
}
.join-profile-status.error{
color:#ff5964;
}
.join-visual-card{
position:relative;
overflow:hidden;
border-radius:28px;
min-height:720px;
background:
linear-gradient(180deg,rgba(2,8,23,.12),rgba(2,8,23,.72)),
url("breakzi-join-visual.jpg") center center / cover no-repeat,
radial-gradient(circle at 60% 40%, rgba(0,245,191,.22), transparent 30%),
linear-gradient(135deg,#061827,#020817);
box-shadow:0 34px 100px rgba(0,0,0,.38);
border:1px solid rgba(255,255,255,.10);
}
.join-brand-mark{
position:absolute;
top:48px;
left:50%;
transform:translateX(-50%);
display:flex;
flex-direction:column;
align-items:center;
gap:10px;
text-align:center;
text-shadow:0 0 26px rgba(0,0,0,.6);
}
.join-8ball{
width:88px;
height:88px;
display:grid;
place-items:center;
border-radius:28px;
border:2px solid #00f5bf;
color:#fff;
font-size:40px;
font-weight:1000;
box-shadow:0 0 36px rgba(0,245,191,.38);
}
.join-brand-mark strong{
font-size:28px;
letter-spacing:12px;
color:#fff;
margin-left:12px;
}
.join-brand-mark span{
color:#00f5bf;
letter-spacing:5px;
font-size:12px;
font-weight:1000;
}
@media(max-width:1050px){
.join-page-shell{
grid-template-columns:1fr;
}
.join-visual-card{
min-height:440px;
}
}
@media(max-width:700px){
#join{
padding:18px 14px 54px!important;
}
.join-form-card{
padding:26px 18px 24px;
border-radius:22px;
}
.join-two,
.join-split-row{
grid-template-columns:1fr;
}
.join-upload-box{
grid-template-columns:1fr;
text-align:center;
justify-items:center;
}
.join-upload-btn{
width:100%;
}
.join-birthdate{
grid-template-columns:1fr;
}
.join-visual-card{
min-height:360px;
}
}
/* ===== Breakzi v36: clearer join form validation ===== */
.join-profile-status{
line-height:1.35!important;
padding:0 8px!important;
}
.join-profile-status.error{
color:#ff5964!important;
text-shadow:none!important;
}
/* ===== Breakzi v38: join profile submit fix ===== */
.join-submit-btn:disabled,
.join-submit-btn.loading{
opacity:.78!important;
cursor:wait!important;
filter:saturate(.8)!important;
}
.join-profile-status{
min-height:30px!important;
word-break:break-word!important;
}
/* ===== Breakzi v39: real player account creation feedback ===== */
.join-profile-status{
font-size:15px!important;
font-weight:950!important;
}
.join-submit-btn.loading{
animation:breakziPulseBtn 1.2s ease-in-out infinite alternate;
}
@keyframes breakziPulseBtn{
from{box-shadow:0 18px 38px rgba(0,255,122,.18)}
to{box-shadow:0 24px 60px rgba(0,255,190,.35)}
}
/* ===== Breakzi v40: TIMER page ===== */
.timer-section{
width:min(1320px,calc(100% - 32px));
margin:28px auto 0;
}
.timer-page-shell{
display:grid;
grid-template-columns: minmax(300px,420px) minmax(0,1fr);
gap:24px;
align-items:stretch;
}
.timer-intro-card,
.timer-main-card{
position:relative;
overflow:hidden;
border-radius:30px;
border:1px solid rgba(115,177,255,.15);
background:linear-gradient(180deg,rgba(8,24,52,.95),rgba(4,16,36,.94));
box-shadow:0 30px 70px rgba(0,0,0,.34), inset 0 1px 0 rgba(255,255,255,.06);
}
.timer-intro-card{
padding:28px;
}
.timer-intro-card::before,
.timer-main-card::before{
content:"";
position:absolute;
inset:auto -20% -25% auto;
width:360px;
height:360px;
background:radial-gradient(circle,rgba(32,255,170,.2),rgba(32,255,170,0));
pointer-events:none;
}
.timer-brand-chip{
display:flex;
align-items:center;
gap:14px;
padding:14px 16px;
border-radius:20px;
background:rgba(10,28,58,.82);
border:1px solid rgba(86,148,255,.2);
margin-bottom:20px;
}
.timer-brand-chip img{
width:92px;
max-width:40%;
object-fit:contain;
}
.timer-brand-chip span{
display:block;
color:rgba(190,212,255,.72);
font-size:.82rem;
text-transform:uppercase;
letter-spacing:.12em;
}
.timer-brand-chip strong{
display:block;
font-size:1.02rem;
}
.timer-intro-card h1{
margin:0 0 14px;
font-size:clamp(2rem,4vw,3.45rem);
line-height:.95;
}
.timer-intro-card p{
margin:0;
color:rgba(214,226,252,.78);
line-height:1.75;
}
.timer-rules-grid{
display:grid;
grid-template-columns:repeat(3,minmax(0,1fr));
gap:12px;
margin-top:24px;
}
.timer-mini-rule{
padding:18px 12px;
text-align:center;
border-radius:20px;
background:rgba(8,22,48,.75);
border:1px solid rgba(86,148,255,.14);
}
.timer-mini-rule strong{
display:block;
margin-bottom:6px;
font-size:1.85rem;
color:var(--accent,#1aff9c);
}
.timer-mini-rule span{
display:block;
color:rgba(214,226,252,.75);
font-size:.9rem;
line-height:1.35;
}
.timer-main-card{
padding:28px;
}
.timer-card-top{
display:flex;
align-items:flex-start;
justify-content:space-between;
gap:16px;
margin-bottom:20px;
}
.timer-card-actions{display:flex;align-items:center;gap:12px;flex-wrap:wrap;justify-content:flex-end;}
.timer-fullscreen-btn,.timer-exit-fullscreen-btn{border:0;cursor:pointer;font:inherit;font-weight:900;}
.timer-fullscreen-btn{padding:12px 16px;border-radius:999px;background:linear-gradient(135deg,#21ff8d,#16d7d0);color:#061427;box-shadow:0 12px 26px rgba(20,228,185,.22);}
.timer-exit-fullscreen-btn{display:none;position:absolute;right:18px;top:18px;z-index:12;width:48px;height:48px;border-radius:50%;background:#fff;color:#061427;font-size:2rem;line-height:1;box-shadow:0 16px 40px rgba(0,0,0,.35);}
.timer-card-top h2{
margin:6px 0 0;
font-size:2rem;
}
.timer-status-pill{
padding:12px 16px;
border-radius:999px;
border:1px solid rgba(32,255,170,.35);
background:rgba(10,29,52,.84);
color:#dff9ff;
font-weight:800;
letter-spacing:.06em;
text-transform:uppercase;
white-space:nowrap;
}
.timer-layout-grid{
display:grid;
grid-template-columns:minmax(280px,420px) minmax(0,1fr);
gap:24px;
align-items:center;
}
.timer-display-panel{
display:flex;
flex-direction:column;
align-items:center;
justify-content:center;
gap:18px;
}
.timer-display-ring{
width:min(380px,100%);
aspect-ratio:1;
border-radius:50%;
display:flex;
flex-direction:column;
align-items:center;
justify-content:center;
border:2px solid rgba(32,255,170,.36);
background:
radial-gradient(circle at 50% 42%,rgba(18,240,162,.13),rgba(18,240,162,0) 52%),
radial-gradient(circle at 50% 50%,rgba(0,0,0,.18),rgba(0,0,0,.42)),
linear-gradient(180deg,rgba(7,20,44,.95),rgba(5,14,30,.96));
box-shadow:inset 0 0 0 12px rgba(255,255,255,.03),0 0 0 10px rgba(12,24,48,.65),0 28px 68px rgba(0,0,0,.45),0 0 50px rgba(32,255,170,.12);
}
.timer-display-ring.is-running{
box-shadow:inset 0 0 0 12px rgba(255,255,255,.03),0 0 0 10px rgba(12,24,48,.65),0 28px 68px rgba(0,0,0,.45),0 0 70px rgba(32,255,170,.28);
}
.timer-display-value{
font-size:clamp(4.7rem,9vw,7.2rem);
font-weight:900;
line-height:1;
letter-spacing:-.05em;
color:#fff;
}
.timer-display-ring small{
margin-top:10px;
color:rgba(207,219,248,.78);
letter-spacing:.34em;
font-size:.8rem;
}
.timer-subinfo{
min-height:24px;
color:rgba(214,226,252,.76);
text-align:center;
}
.timer-control-panel{
display:flex;
flex-direction:column;
gap:18px;
}
.timer-primary-controls{
display:grid;
grid-template-columns:repeat(2,minmax(0,1fr));
gap:14px;
}
.timer-cta,
.timer-ext-btn,
.timer-reset-all-btn{
border:0;
cursor:pointer;
font:inherit;
border-radius:20px;
transition:transform .16s ease,box-shadow .16s ease,opacity .16s ease,background .16s ease;
}
.timer-cta:hover,
.timer-ext-btn:hover,
.timer-reset-all-btn:hover{ transform:translateY(-1px); }
.timer-primary-btn{
min-height:72px;
font-size:1.25rem;
font-weight:900;
color:#03121f;
background:linear-gradient(135deg,#21ff8d,#16d7d0);
box-shadow:0 16px 36px rgba(20,228,185,.28);
}
.timer-secondary-btn{
min-height:72px;
font-size:1.2rem;
font-weight:800;
color:#edf5ff;
background:linear-gradient(180deg,rgba(28,53,94,.95),rgba(20,38,69,.96));
border:1px solid rgba(121,162,255,.25);
}
.timer-extensions-grid{
display:grid;
grid-template-columns:repeat(2,minmax(0,1fr));
gap:14px;
}
.timer-ext-btn{
min-height:84px;
background:linear-gradient(180deg,rgba(11,28,54,.96),rgba(9,22,44,.96));
border:1px solid rgba(32,255,170,.24);
color:#eff7ff;
font-size:1.15rem;
font-weight:900;
letter-spacing:.06em;
}
.timer-ext-btn.used,
.timer-ext-btn:disabled{
opacity:.45;
cursor:not-allowed;
transform:none;
box-shadow:none;
}
.timer-reset-all-btn{
min-height:70px;
color:#08131f;
background:linear-gradient(135deg,#ffd257,#ff9f1a);
font-size:1.15rem;
font-weight:900;
}
.timer-side-status-grid{
display:grid;
grid-template-columns:repeat(2,minmax(0,1fr));
gap:14px;
}
.timer-side-card{
padding:18px;
border-radius:20px;
background:rgba(10,25,50,.84);
border:1px solid rgba(86,148,255,.14);
}
.timer-side-card span{
display:inline-flex;
align-items:center;
justify-content:center;
width:38px;
height:38px;
border-radius:50%;
background:rgba(255,255,255,.05);
color:var(--accent,#1aff9c);
font-weight:900;
margin-bottom:12px;
}
.timer-side-card strong{
display:block;
font-size:1.02rem;
}
.timer-side-card small{
display:block;
margin-top:6px;
color:rgba(214,226,252,.7);
font-weight:800;
letter-spacing:.08em;
}
.timer-side-card.used{
border-color:rgba(255,173,70,.28);
}
.timer-side-card.used span{
color:#ffcb66;
}
.timer-status-pill.running{
border-color:rgba(32,255,170,.55);
box-shadow:0 0 0 8px rgba(32,255,170,.1);
}
.timer-status-pill.expired{
border-color:rgba(255,95,109,.45);
color:#fff1f1;
box-shadow:0 0 0 8px rgba(255,95,109,.09);
}
@media (max-width: 1024px){
.timer-page-shell,
.timer-layout-grid{ grid-template-columns:1fr; }
.timer-display-ring{ width:min(320px,90vw); }
}
@media (max-width: 720px){
.timer-section{ width:min(100%,calc(100% - 20px)); margin-top:20px; }
.timer-intro-card,
.timer-main-card{ padding:20px; border-radius:24px; }
.timer-rules-grid,
.timer-primary-controls,
.timer-extensions-grid,
.timer-side-status-grid{ grid-template-columns:1fr; }
.timer-card-top{ flex-direction:column; align-items:flex-start; }
.timer-card-top h2{ font-size:1.6rem; }
.timer-brand-chip img{ width:84px; }
.timer-display-value{ font-size:4.2rem; }
}
/* ===== Breakzi v41: timer sound status ===== */
.timer-subinfo{
display:flex!important;
flex-direction:column!important;
gap:8px!important;
align-items:center!important;
}
.timer-sound-status{
display:inline-flex!important;
align-items:center!important;
justify-content:center!important;
padding:8px 12px!important;
border-radius:999px!important;
background:rgba(0,255,122,.08)!important;
border:1px solid rgba(0,255,122,.18)!important;
color:#9fffd2!important;
font-size:12px!important;
font-weight:900!important;
letter-spacing:.03em!important;
}
/* ===== Breakzi v42: mobile sound unlock button ===== */
.timer-enable-sound-btn{
min-height:54px;
border:1px solid rgba(32,255,170,.35);
border-radius:18px;
background:rgba(32,255,170,.09);
color:#dfffee;
font:inherit;
font-weight:900;
cursor:pointer;
box-shadow:0 14px 30px rgba(0,0,0,.18);
}
.timer-enable-sound-btn.sound-enabled{
background:linear-gradient(135deg,rgba(32,255,170,.28),rgba(22,215,208,.16));
border-color:rgba(32,255,170,.65);
color:#fff;
}
.timer-enable-sound-btn:hover{
transform:translateY(-1px);
}
/* ===== Breakzi v43: player login + signup success feedback ===== */
.login-card{
width:min(520px,calc(100% - 28px))!important;
}
.login-tabs{
display:grid;
grid-template-columns:1fr 1fr;
gap:10px;
margin-bottom:18px;
padding:6px;
border-radius:18px;
background:rgba(255,255,255,.06);
border:1px solid rgba(255,255,255,.10);
}
.login-tab{
min-height:44px;
border:0;
border-radius:13px;
background:transparent;
color:#a9bed3;
font-weight:1000;
cursor:pointer;
}
.login-tab.active{
background:linear-gradient(135deg,#00ff7a,#00d6c8);
color:#02101b;
}
.login-panel{
display:none;
}
.login-panel.active{
display:block;
}
.login-panel input{
width:100%;
min-height:50px;
margin:8px 0;
border-radius:12px;
border:1px solid rgba(255,255,255,.14);
background:rgba(0,0,0,.18);
color:#fff;
padding:0 14px;
font-weight:800;
}
body.player-authenticated .exact-profile-btn{
color:#00ff7a!important;
border-color:rgba(0,255,122,.75)!important;
background:rgba(0,255,122,.10)!important;
}
.join-profile-status:not(.error){
color:#00ff7a!important;
}
/* ===== Breakzi v44: player login button reliability ===== */
#playerLoginSubmitBtn:disabled{
opacity:.72!important;
cursor:wait!important;
filter:saturate(.75)!important;
}
#playerLoginError{
min-height:24px!important;
line-height:1.35!important;
word-break:break-word!important;
}
/* ===== Breakzi v45: player login no-stuck feedback ===== */
#playerLoginError{
min-height:28px!important;
margin-top:12px!important;
font-size:14px!important;
line-height:1.35!important;
}
#playerLoginSubmitBtn:disabled{
opacity:.72!important;
cursor:wait!important;
filter:saturate(.75)!important;
}
/* ===== Breakzi v51 stable recovery ===== */
#breakziVersionBadge{
position:fixed;
right:10px;
bottom:10px;
z-index:999999;
padding:5px 8px;
border-radius:999px;
background:rgba(0,0,0,.55);
color:#90ffd0;
font:800 11px system-ui;
pointer-events:none;
opacity:.72;
}
.ko-score.winner-score{
color:#ffb21e!important;
text-shadow:0 0 18px rgba(255,178,30,.32)!important;
}
.ko-row.winner-a,
.ko-row.winner-b{
box-shadow:inset 4px 0 0 #00ff7a, 0 22px 48px rgba(0,0,0,.24)!important;
border-color:rgba(0,255,122,.20)!important;
}
.ko-player.winner-player .ko-player-name{
color:#fff!important;
font-weight:1000!important;
}
/* ===== Breakzi v52: player session menu ===== */
.exact-profile-btn.player-profile-icon{
overflow:hidden!important;
color:#02101b!important;
background:linear-gradient(135deg,#00ff7a,#00d6c8)!important;
border-color:rgba(0,255,122,.75)!important;
}
.exact-profile-btn.player-profile-icon img{
width:100%!important;
height:100%!important;
object-fit:cover!important;
border-radius:50%!important;
}
.exact-profile-btn.player-profile-icon span{
display:grid!important;
place-items:center!important;
width:100%!important;
height:100%!important;
font-size:24px!important;
font-weight:1000!important;
}
.player-menu{
position:absolute;
z-index:100000;
width:240px;
padding:10px;
border-radius:18px;
border:1px solid rgba(255,255,255,.14);
background:linear-gradient(135deg,#071827,#10283e);
box-shadow:0 24px 70px rgba(0,0,0,.38);
}
.player-menu.hidden{
display:none!important;
}
.player-menu button{
width:100%;
min-height:44px;
border:0;
border-radius:12px;
background:transparent;
color:#fff;
text-align:left;
padding:0 12px;
font-weight:900;
cursor:pointer;
}
.player-menu button:hover{
background:rgba(0,255,122,.12);
color:#00ff7a;
}
.player-modal-card{
width:min(720px,calc(100% - 28px))!important;
max-height:88vh!important;
overflow:auto!important;
}
.player-edit-photo-row{
display:flex;
align-items:center;
gap:16px;
margin:18px 0;
}
.edit-player-photo-preview{
width:82px;
height:82px;
border-radius:50%;
display:grid;
place-items:center;
overflow:hidden;
background:rgba(255,255,255,.07);
border:1px solid rgba(255,255,255,.18);
color:#fff;
font-size:34px;
}
.edit-player-photo-preview img{
width:100%;
height:100%;
object-fit:cover;
}
.edit-photo-btn{
min-height:42px;
padding:0 14px;
border-radius:999px;
display:inline-flex;
align-items:center;
justify-content:center;
border:1px solid rgba(0,255,122,.55);
color:#00ff7a;
font-weight:1000;
cursor:pointer;
}
.edit-photo-btn input{
display:none;
}
.player-edit-grid,
.challenge-form-grid{
display:grid;
grid-template-columns:1fr 1fr;
gap:14px;
margin:18px 0;
}
.player-edit-grid label,
.challenge-form-grid label{
display:flex;
flex-direction:column;
gap:7px;
color:#dbe9f9;
font-weight:900;
}
.player-edit-grid input,
.player-edit-grid select,
.challenge-form-grid input,
.challenge-form-grid select{
min-height:48px;
border-radius:12px;
border:1px solid rgba(255,255,255,.14);
background:rgba(0,0,0,.18);
color:#fff;
padding:0 13px;
font-weight:800;
}
#playerProfileStatus:not(.error),
#challengeStatus:not(.error){
color:#00ff7a!important;
}
@media(max-width:700px){
.player-edit-grid,
.challenge-form-grid{
grid-template-columns:1fr;
}
.player-menu{
right:10px!important;
width:min(260px,calc(100vw - 20px));
}
}
/* ===== Breakzi v53: fix player photo icon + player menu click ===== */
.player-menu{
position:fixed!important;
z-index:1000000!important;
}
.exact-profile-btn.player-profile-icon{
padding:0!important;
}
.exact-profile-btn.player-profile-icon img{
display:block!important;
}
/* ===== Breakzi v54: compact challenge modal + Arabic RTL ===== */
#challengeModal,
#playerProfileModal{
align-items:flex-start!important;
padding-top:92px!important;
overflow:auto!important;
}
#challengeModal .player-modal-card{
width:min(680px,calc(100% - 28px))!important;
max-height:calc(100vh - 118px)!important;
overflow:auto!important;
padding:24px!important;
margin-bottom:24px!important;
}
#challengeModal .modal-close,
#playerProfileModal .modal-close{
position:sticky!important;
top:0!important;
margin-left:auto!important;
z-index:5!important;
}
#challengeModal .challenge-form-grid{
grid-template-columns:1fr 1fr!important;
gap:12px!important;
margin:14px 0!important;
}
#challengeModal .challenge-form-grid input,
#challengeModal .challenge-form-grid select{
min-height:44px!important;
}
#challengeModal .admin-submit{
min-height:46px!important;
}
body.rtl-mode{
direction:rtl;
}
body.rtl-mode .topbar,
body.rtl-mode .timer-page-shell,
body.rtl-mode .join-page-shell{
direction:rtl;
}
body.rtl-mode input,
body.rtl-mode select,
body.rtl-mode textarea{
text-align:right;
}
body.rtl-mode .player-menu button,
body.rtl-mode .language-menu button{
text-align:right!important;
}
body.rtl-mode .ko-player-name,
body.rtl-mode .match-row span{
direction:rtl;
}
@media(max-width:700px){
#challengeModal,
#playerProfileModal{
padding-top:78px!important;
}
#challengeModal .player-modal-card{
max-height:calc(100vh - 94px)!important;
padding:18px!important;
}
#challengeModal .challenge-form-grid{
grid-template-columns:1fr!important;
}
}
/* ===== Breakzi v55: compact Edit Profile modal + better mobile spacing ===== */
#playerProfileModal{
align-items:flex-start!important;
padding-top:92px!important;
overflow:auto!important;
}
#playerProfileModal .player-modal-card{
width:min(680px,calc(100% - 28px))!important;
max-height:calc(100vh - 118px)!important;
overflow:auto!important;
padding:24px!important;
margin-bottom:24px!important;
}
#playerProfileModal .modal-close{
position:sticky!important;
top:0!important;
margin-left:auto!important;
z-index:8!important;
background:rgba(7,24,39,.92)!important;
backdrop-filter:blur(10px)!important;
}
#playerProfileModal .player-edit-photo-row{
margin:12px 0 16px!important;
}
#playerProfileModal .player-edit-grid{
grid-template-columns:1fr 1fr!important;
gap:12px!important;
margin:14px 0!important;
}
#playerProfileModal .player-edit-grid input,
#playerProfileModal .player-edit-grid select{
min-height:44px!important;
}
#playerProfileModal .admin-submit{
min-height:46px!important;
}
body.rtl-mode #playerProfileModal .modal-close{
margin-left:0!important;
margin-right:auto!important;
}
@media(max-width:700px){
#playerProfileModal{
padding-top:78px!important;
}
#playerProfileModal .player-modal-card{
max-height:calc(100vh - 94px)!important;
padding:18px!important;
}
#playerProfileModal .player-edit-grid{
grid-template-columns:1fr!important;
}
#playerProfileModal .player-edit-photo-row{
flex-direction:column!important;
text-align:center!important;
}
}
/* ===== Breakzi v56: top-right login button hard fix ===== */
#adminModal:not(.hidden),
#playerProfileModal:not(.hidden),
#challengeModal:not(.hidden){
display:flex!important;
}
#adminLoginBtn{
pointer-events:auto!important;
touch-action:manipulation!important;
cursor:pointer!important;
position:relative!important;
z-index:10010!important;
}
/* ===== Breakzi v57: login modal and live matches recovery ===== */
.disabled-live-btn{
opacity:.68!important;
cursor:not-allowed!important;
filter:saturate(.65)!important;
text-align:center!important;
pointer-events:none!important;
}
#adminModal:not(.hidden){
display:flex!important;
}
/* ===== Breakzi v58: login unstuck ===== */
#playerLoginSubmitBtn:disabled{
opacity:.72!important;
cursor:wait!important;
}
#playerLoginError.error{
color:#ff5964!important;
}
/* ===== Breakzi v59: auth login fixes ===== */
#adminSubmitBtn:disabled,
#playerLoginSubmitBtn:disabled{
opacity:.72!important;
cursor:wait!important;
}
#adminLoginError.error,
#playerLoginError.error{
color:#ff5964!important;
}
/* ===== Breakzi v60: mobile live links visibility ===== */
@media(max-width:900px){
.hero-live-card .watch-live-home-btn,
.home-live-match-card .watch-live-home-btn,
.all-live-watch-btn{
display:flex!important;
visibility:visible!important;
opacity:1!important;
width:100%!important;
min-height:40px!important;
align-items:center!important;
justify-content:center!important;
margin-top:10px!important;
font-size:12px!important;
position:relative!important;
z-index:3!important;
}
.disabled-live-btn{
opacity:.72!important;
display:flex!important;
}
.home-live-match-card,
.hero-live-card{
overflow:visible!important;
}
}
/* ===== Breakzi v61: Firebase Auth REST fallback ===== */
#adminLoginError.error,
#playerLoginError.error{
color:#ff5964!important;
}
/* ===== Breakzi v62: premium compact Edit Profile + Challenge modals ===== */
#playerProfileModal,
#challengeModal{
align-items:flex-start!important;
justify-content:center!important;
padding:74px 12px 18px!important;
overflow-y:auto!important;
background:rgba(1,7,18,.74)!important;
backdrop-filter:blur(14px)!important;
}
.breakzi-form-modal{
position:relative!important;
width:min(560px,calc(100vw - 24px))!important;
max-height:calc(100vh - 96px)!important;
overflow:hidden!important;
padding:0!important;
border-radius:24px!important;
border:1px solid rgba(0,255,166,.22)!important;
background:
radial-gradient(circle at 20% 0%,rgba(0,255,170,.15),transparent 34%),
radial-gradient(circle at 95% 15%,rgba(48,116,255,.14),transparent 32%),
linear-gradient(180deg,rgba(7,20,40,.98),rgba(4,12,26,.98))!important;
box-shadow:
0 28px 90px rgba(0,0,0,.52),
inset 0 1px 0 rgba(255,255,255,.08)!important;
}
.breakzi-form-modal::before{
content:"";
position:absolute;
inset:0;
pointer-events:none;
background:linear-gradient(135deg,rgba(255,255,255,.08),transparent 22%,transparent 72%,rgba(0,255,170,.05));
z-index:0;
}
.breakzi-form-modal > *{
position:relative;
z-index:1;
}
.breakzi-form-modal .modal-close{
position:absolute!important;
top:14px!important;
right:14px!important;
width:44px!important;
height:44px!important;
display:grid!important;
place-items:center!important;
padding:0!important;
margin:0!important;
border-radius:50%!important;
border:1px solid rgba(255,255,255,.18)!important;
background:rgba(4,14,28,.92)!important;
color:#fff!important;
font-size:26px!important;
font-weight:900!important;
line-height:1!important;
box-shadow:0 12px 34px rgba(0,0,0,.32)!important;
z-index:20!important;
cursor:pointer!important;
}
.breakzi-form-modal .modal-close:hover{
background:rgba(255,72,96,.20)!important;
border-color:rgba(255,95,120,.55)!important;
transform:scale(1.04)!important;
}
.breakzi-modal-head{
padding:22px 72px 16px 22px!important;
border-bottom:1px solid rgba(255,255,255,.09)!important;
background:linear-gradient(180deg,rgba(255,255,255,.045),rgba(255,255,255,.015))!important;
}
.breakzi-modal-head .modal-kicker{
display:inline-flex!important;
align-items:center!important;
min-height:24px!important;
padding:0 10px!important;
border-radius:999px!important;
background:rgba(0,255,122,.10)!important;
border:1px solid rgba(0,255,122,.20)!important;
color:#7cffc7!important;
font-size:11px!important;
font-weight:1000!important;
letter-spacing:.10em!important;
text-transform:uppercase!important;
}
.breakzi-modal-head h2{
margin:10px 0 6px!important;
font-size:clamp(1.35rem,3.8vw,2rem)!important;
line-height:1.05!important;
letter-spacing:-.04em!important;
}
.breakzi-modal-head p{
margin:0!important;
color:rgba(220,234,255,.70)!important;
font-size:13px!important;
line-height:1.45!important;
}
#playerProfileModal .player-edit-photo-row{
margin:0!important;
padding:16px 22px!important;
display:grid!important;
grid-template-columns:72px 1fr!important;
gap:14px!important;
align-items:center!important;
border-bottom:1px solid rgba(255,255,255,.075)!important;
}
#playerProfileModal .edit-player-photo-preview{
width:72px!important;
height:72px!important;
border-radius:20px!important;
font-size:30px!important;
background:
radial-gradient(circle at 30% 20%,rgba(0,255,170,.18),transparent 38%),
rgba(255,255,255,.06)!important;
border:1px solid rgba(0,255,170,.24)!important;
}
#playerProfileModal .edit-player-photo-preview img{
border-radius:20px!important;
}
#playerProfileModal .edit-photo-btn{
width:max-content!important;
min-height:38px!important;
padding:0 14px!important;
font-size:12px!important;
background:rgba(0,255,122,.09)!important;
border-color:rgba(0,255,122,.34)!important;
}
#playerProfileModal .player-edit-grid,
#challengeModal .challenge-form-grid{
padding:18px 22px 10px!important;
margin:0!important;
display:grid!important;
grid-template-columns:1fr 1fr!important;
gap:12px!important;
}
#playerProfileModal .player-edit-grid label,
#challengeModal .challenge-form-grid label{
gap:6px!important;
color:rgba(230,241,255,.88)!important;
font-size:12px!important;
font-weight:950!important;
letter-spacing:.01em!important;
}
#playerProfileModal .player-edit-grid label span,
#challengeModal .challenge-form-grid label span{
color:rgba(221,235,255,.78)!important;
}
#playerProfileModal .player-edit-grid input,
#playerProfileModal .player-edit-grid select,
#challengeModal .challenge-form-grid input,
#challengeModal .challenge-form-grid select{
min-height:42px!important;
border-radius:14px!important;
border:1px solid rgba(255,255,255,.12)!important;
background:rgba(1,8,19,.54)!important;
color:#fff!important;
padding:0 12px!important;
font-size:13px!important;
font-weight:850!important;
outline:none!important;
box-shadow:inset 0 1px 0 rgba(255,255,255,.04)!important;
}
#playerProfileModal .player-edit-grid input:focus,
#playerProfileModal .player-edit-grid select:focus,
#challengeModal .challenge-form-grid input:focus,
#challengeModal .challenge-form-grid select:focus{
border-color:rgba(0,255,166,.55)!important;
box-shadow:0 0 0 4px rgba(0,255,166,.08), inset 0 1px 0 rgba(255,255,255,.04)!important;
}
#savePlayerProfileBtn,
#saveChallengeBtn{
width:calc(100% - 44px)!important;
margin:8px 22px 6px!important;
min-height:46px!important;
border-radius:16px!important;
background:linear-gradient(135deg,#00ff7a,#00d6c8)!important;
color:#031421!important;
font-size:14px!important;
font-weight:1000!important;
box-shadow:0 14px 38px rgba(0,255,170,.22)!important;
}
#playerProfileStatus,
#challengeStatus{
min-height:24px!important;
margin:6px 22px 18px!important;
font-size:12px!important;
line-height:1.35!important;
}
#challengeModal .challenge-form-grid label:nth-child(5),
#challengeModal .challenge-form-grid label:nth-child(6){
grid-column:span 2!important;
}
body.rtl-mode .breakzi-form-modal .modal-close{
right:auto!important;
left:14px!important;
}
body.rtl-mode .breakzi-modal-head{
padding:22px 22px 16px 72px!important;
}
@media(max-width:700px){
#playerProfileModal,
#challengeModal{
padding:64px 10px 14px!important;
}
.breakzi-form-modal{
width:calc(100vw - 20px)!important;
max-height:calc(100vh - 78px)!important;
border-radius:22px!important;
}
.breakzi-modal-head{
padding:18px 64px 14px 18px!important;
}
.breakzi-form-modal .modal-close{
top:10px!important;
right:10px!important;
width:42px!important;
height:42px!important;
font-size:24px!important;
}
#playerProfileModal .player-edit-photo-row{
padding:14px 18px!important;
grid-template-columns:62px 1fr!important;
}
#playerProfileModal .edit-player-photo-preview{
width:62px!important;
height:62px!important;
border-radius:18px!important;
}
#playerProfileModal .player-edit-grid,
#challengeModal .challenge-form-grid{
padding:14px 18px 8px!important;
grid-template-columns:1fr!important;
gap:10px!important;
}
#challengeModal .challenge-form-grid label:nth-child(5),
#challengeModal .challenge-form-grid label:nth-child(6){
grid-column:auto!important;
}
#playerProfileModal .player-edit-grid input,
#playerProfileModal .player-edit-grid select,
#challengeModal .challenge-form-grid input,
#challengeModal .challenge-form-grid select{
min-height:40px!important;
font-size:13px!important;
}
#savePlayerProfileBtn,
#saveChallengeBtn{
width:calc(100% - 36px)!important;
margin:8px 18px 6px!important;
}
#playerProfileStatus,
#challengeStatus{
margin:6px 18px 14px!important;
}
body.rtl-mode .breakzi-modal-head{
padding:18px 18px 14px 64px!important;
}
body.rtl-mode .breakzi-form-modal .modal-close{
right:auto!important;
left:10px!important;
}
}
@media(max-height:720px){
#playerProfileModal,
#challengeModal{
padding-top:54px!important;
}
.breakzi-form-modal{
max-height:calc(100vh - 64px)!important;
}
.breakzi-modal-head{
padding-top:16px!important;
padding-bottom:12px!important;
}
#playerProfileModal .player-edit-photo-row{
padding-top:12px!important;
padding-bottom:12px!important;
}
#playerProfileModal .player-edit-grid,
#challengeModal .challenge-form-grid{
padding-top:12px!important;
gap:9px!important;
}
}
/* ===== Breakzi v63: truly compact practical mobile modals ===== */
/* Override older modal sizing completely */
#playerProfileModal,
#challengeModal{
position:fixed!important;
inset:0!important;
z-index:99999!important;
display:none!important;
align-items:flex-start!important;
justify-content:center!important;
padding:118px 18px 24px!important;
overflow:auto!important;
background:rgba(1,7,18,.78)!important;
backdrop-filter:blur(12px)!important;
}
#playerProfileModal:not(.hidden),
#challengeModal:not(.hidden){
display:flex!important;
}
/* Smaller real window */
#playerProfileModal .breakzi-form-modal,
#challengeModal .breakzi-form-modal,
#playerProfileModal .player-modal-card,
#challengeModal .player-modal-card{
width:min(460px,calc(100vw - 56px))!important;
max-width:460px!important;
max-height:min(560px,calc(100vh - 160px))!important;
overflow-y:auto!important;
overflow-x:hidden!important;
overscroll-behavior:contain!important;
padding:0!important;
margin:0 auto 22px!important;
border-radius:22px!important;
border:1px solid rgba(0,255,166,.32)!important;
background:
radial-gradient(circle at 20% 0%,rgba(0,255,170,.14),transparent 35%),
radial-gradient(circle at 100% 10%,rgba(32,114,255,.12),transparent 34%),
linear-gradient(180deg,rgba(7,20,40,.98),rgba(3,10,23,.98))!important;
box-shadow:0 24px 75px rgba(0,0,0,.58), inset 0 1px 0 rgba(255,255,255,.08)!important;
}
/* Big visible close button INSIDE the top-right of the card */
#playerProfileModal .modal-close,
#challengeModal .modal-close{
position:sticky!important;
top:10px!important;
float:right!important;
width:46px!important;
height:46px!important;
min-width:46px!important;
min-height:46px!important;
display:grid!important;
place-items:center!important;
margin:10px 10px -56px auto!important;
padding:0!important;
border-radius:50%!important;
border:1px solid rgba(255,255,255,.28)!important;
background:rgba(2,12,28,.96)!important;
color:#fff!important;
font-size:28px!important;
font-weight:1000!important;
line-height:1!important;
box-shadow:0 12px 34px rgba(0,0,0,.45)!important;
z-index:50!important;
cursor:pointer!important;
}
#playerProfileModal .modal-close:hover,
#challengeModal .modal-close:hover{
background:rgba(255,78,104,.28)!important;
border-color:rgba(255,104,130,.72)!important;
}
/* Compact header */
#playerProfileModal .breakzi-modal-head,
#challengeModal .breakzi-modal-head{
padding:18px 64px 14px 18px!important;
border-bottom:1px solid rgba(255,255,255,.08)!important;
}
#playerProfileModal .breakzi-modal-head .modal-kicker,
#challengeModal .breakzi-modal-head .modal-kicker{
min-height:22px!important;
padding:0 9px!important;
font-size:10px!important;
}
#playerProfileModal .breakzi-modal-head h2,
#challengeModal .breakzi-modal-head h2{
margin:8px 0 5px!important;
font-size:1.45rem!important;
line-height:1.05!important;
}
#playerProfileModal .breakzi-modal-head p,
#challengeModal .breakzi-modal-head p{
font-size:12px!important;
line-height:1.35!important;
}
/* Compact photo row */
#playerProfileModal .player-edit-photo-row{
padding:13px 18px!important;
grid-template-columns:58px 1fr!important;
gap:12px!important;
}
#playerProfileModal .edit-player-photo-preview{
width:58px!important;
height:58px!important;
border-radius:17px!important;
}
#playerProfileModal .edit-player-photo-preview img{
border-radius:17px!important;
}
#playerProfileModal .edit-photo-btn{
min-height:36px!important;
font-size:12px!important;
padding:0 12px!important;
}
/* Compact form fields */
#playerProfileModal .player-edit-grid,
#challengeModal .challenge-form-grid{
padding:13px 18px 8px!important;
gap:9px!important;
display:grid!important;
grid-template-columns:1fr 1fr!important;
}
#playerProfileModal .player-edit-grid label,
#challengeModal .challenge-form-grid label{
gap:5px!important;
font-size:11px!important;
line-height:1.2!important;
}
#playerProfileModal .player-edit-grid input,
#playerProfileModal .player-edit-grid select,
#challengeModal .challenge-form-grid input,
#challengeModal .challenge-form-grid select{
min-height:38px!important;
height:38px!important;
border-radius:13px!important;
padding:0 10px!important;
font-size:12px!important;
}
#challengeModal .challenge-form-grid label:nth-child(5),
#challengeModal .challenge-form-grid label:nth-child(6){
grid-column:span 2!important;
}
#savePlayerProfileBtn,
#saveChallengeBtn{
width:calc(100% - 36px)!important;
margin:8px 18px 4px!important;
min-height:42px!important;
height:42px!important;
border-radius:14px!important;
font-size:13px!important;
}
#playerProfileStatus,
#challengeStatus{
min-height:20px!important;
margin:5px 18px 14px!important;
font-size:11px!important;
}
/* Mobile: even more compact and lower than the header */
@media(max-width:700px){
#playerProfileModal,
#challengeModal{
padding:128px 16px 18px!important;
align-items:flex-start!important;
}
#playerProfileModal .breakzi-form-modal,
#challengeModal .breakzi-form-modal,
#playerProfileModal .player-modal-card,
#challengeModal .player-modal-card{
width:min(390px,calc(100vw - 54px))!important;
max-width:390px!important;
max-height:calc(100vh - 172px)!important;
border-radius:21px!important;
}
#playerProfileModal .modal-close,
#challengeModal .modal-close{
width:44px!important;
height:44px!important;
min-width:44px!important;
min-height:44px!important;
font-size:27px!important;
margin:9px 9px -54px auto!important;
}
#playerProfileModal .breakzi-modal-head,
#challengeModal .breakzi-modal-head{
padding:17px 62px 13px 17px!important;
}
#playerProfileModal .breakzi-modal-head h2,
#challengeModal .breakzi-modal-head h2{
font-size:1.28rem!important;
}
#playerProfileModal .player-edit-photo-row{
grid-template-columns:52px 1fr!important;
padding:12px 17px!important;
}
#playerProfileModal .edit-player-photo-preview{
width:52px!important;
height:52px!important;
}
#playerProfileModal .player-edit-grid,
#challengeModal .challenge-form-grid{
padding:12px 17px 7px!important;
gap:8px!important;
grid-template-columns:1fr!important;
}
#challengeModal .challenge-form-grid label:nth-child(5),
#challengeModal .challenge-form-grid label:nth-child(6){
grid-column:auto!important;
}
#playerProfileModal .player-edit-grid input,
#playerProfileModal .player-edit-grid select,
#challengeModal .challenge-form-grid input,
#challengeModal .challenge-form-grid select{
min-height:37px!important;
height:37px!important;
}
#savePlayerProfileBtn,
#saveChallengeBtn{
width:calc(100% - 34px)!important;
margin:8px 17px 4px!important;
min-height:41px!important;
height:41px!important;
}
}
/* Small-height phones: make windows shorter and easier to close */
@media(max-height:760px){
#playerProfileModal,
#challengeModal{
padding-top:112px!important;
}
#playerProfileModal .breakzi-form-modal,
#challengeModal .breakzi-form-modal,
#playerProfileModal .player-modal-card,
#challengeModal .player-modal-card{
max-height:calc(100vh - 145px)!important;
}
#playerProfileModal .breakzi-modal-head,
#challengeModal .breakzi-modal-head{
padding-top:14px!important;
padding-bottom:10px!important;
}
#playerProfileModal .player-edit-photo-row{
padding-top:10px!important;
padding-bottom:10px!important;
}
}
/* RTL close button handling */
body.rtl-mode #playerProfileModal .modal-close,
body.rtl-mode #challengeModal .modal-close{
float:left!important;
margin:10px auto -56px 10px!important;
}
body.rtl-mode #playerProfileModal .breakzi-modal-head,
body.rtl-mode #challengeModal .breakzi-modal-head{
padding:18px 18px 14px 64px!important;
}
/* ===== Breakzi v65 emergency stable ===== */
#adminModal:not(.hidden),
#playerProfileModal:not(.hidden),
#challengeModal:not(.hidden){
display:flex!important;
}
#adminLoginBtn{
pointer-events:auto!important;
touch-action:manipulation!important;
cursor:pointer!important;
}
/* ===== Breakzi v66: safe challenge system ===== */
.challenge-mode-switch{
grid-column:1 / -1;
display:grid;
grid-template-columns:1fr 1fr;
gap:8px;
}
.challenge-mode-switch button{
min-height:38px;
border-radius:999px;
border:1px solid rgba(255,255,255,.15);
background:rgba(255,255,255,.05);
color:#d7e7ff;
font-weight:900;
cursor:pointer;
}
.challenge-mode-switch button.active{
background:linear-gradient(135deg,#00ff7a,#00d6c8);
color:#031421;
border-color:transparent;
}
.challenge-history-list{padding:16px 18px 20px;display:grid;gap:10px}
.challenge-history-card{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:12px;border-radius:16px;background:rgba(255,255,255,.055);border:1px solid rgba(255,255,255,.10)}
.challenge-history-card small,.challenge-history-card em{display:block;color:#aac2da;font-size:11px;font-style:normal}
.challenge-history-card strong{display:block;color:#fff;margin:5px 0}
.challenge-history-card span{color:#ffb21e;margin:0 8px}
.challenge-history-card a,.challenge-link-box button{min-height:36px;padding:0 12px;border-radius:999px;display:inline-flex;align-items:center;justify-content:center;background:linear-gradient(135deg,#00ff7a,#00d6c8);color:#031421;font-weight:1000;text-decoration:none;border:0;cursor:pointer}
.challenge-history-empty{padding:20px;color:#cfe2f6;text-align:center}
.challenge-link-box{padding:18px;display:grid;gap:10px}
.challenge-link-box input{min-height:44px;border-radius:14px;border:1px solid rgba(255,255,255,.12);background:rgba(0,0,0,.22);color:#fff;padding:0 12px;font-weight:800}
.challenge-link-box button{width:100%}
.challenge-score-body{margin:0;min-height:100vh;background:radial-gradient(circle at 20% 0%,rgba(0,255,170,.14),transparent 34%),linear-gradient(135deg,#061727,#092b2d 60%,#03111f);color:#fff;font-family:system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;overflow:hidden}
.challenge-score-page{min-height:100vh;position:relative;padding:28px;display:grid;grid-template-rows:auto auto auto 1fr auto;gap:10px}
.challenge-score-brand{position:absolute;right:28px;top:22px;text-align:right;letter-spacing:.22em;font-weight:1000}
.challenge-score-brand span{display:block;color:#19e8d6;font-size:14px}
.challenge-score-page h1{text-align:center;margin:25px 0 0;font-size:clamp(2.4rem,7vw,5rem);letter-spacing:.18em;text-transform:uppercase;text-shadow:0 14px 36px rgba(0,0,0,.45)}
.challenge-date{text-align:center;color:#cfe2f6;font-size:1.1rem;font-weight:900}
.challenge-score-layout{display:grid;grid-template-columns:120px 1fr 230px 1fr 120px;align-items:center;gap:22px;min-height:65vh}
.challenge-player{text-align:center}
.challenge-avatar{width:135px;height:135px;margin:0 auto 18px;border-radius:34px;display:grid;place-items:center;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.14);color:#fff;font-size:48px;font-weight:1000;overflow:hidden}
.challenge-avatar img{width:100%;height:100%;object-fit:cover}
.challenge-score-num{font-size:clamp(5rem,12vw,9rem);font-weight:1000;line-height:.9}
.challenge-score-num.a{color:#ffb21e}
.challenge-player h2{font-size:clamp(1.5rem,3.6vw,2.5rem);margin:16px 0 0}
.challenge-center{text-align:center;display:grid;gap:8px;justify-items:center}
.challenge-center strong{color:#cfe2f6;font-size:1.2rem}
.challenge-center b{color:#ffb21e;font-size:4rem}
.challenge-center em{color:#00ff7a;font-style:normal;font-weight:1000}
.challenge-center button{min-height:42px;min-width:110px;border-radius:999px;border:1px solid rgba(255,255,255,.2);background:rgba(255,255,255,.08);color:#fff;font-weight:1000}
.challenge-big-btn{width:110px;height:110px;border-radius:50%;border:0;font-size:64px;font-weight:300;color:#fff;background:linear-gradient(180deg,#45e1ff,#008bdc);box-shadow:0 20px 45px rgba(0,0,0,.35)}
.challenge-big-btn.minus{background:linear-gradient(180deg,#ff5768,#e3263b);grid-column:1;grid-row:1;transform:translateY(130px)}
.challenge-big-btn.plus.right{grid-column:5}
.challenge-big-btn.minus.right{grid-column:5}
.challenge-winner-line{text-align:center;color:#00ff7a;font-weight:1000;font-size:1.3rem;min-height:30px}
@media(max-width:900px){
.challenge-score-page{padding:18px;overflow:auto}
.challenge-score-brand{position:static;text-align:center}
.challenge-score-page h1{font-size:2rem;letter-spacing:.12em}
.challenge-score-layout{grid-template-columns:1fr 1fr;gap:12px;min-height:auto}
.challenge-center{grid-column:1 / -1;order:-1}
.challenge-big-btn{width:68px;height:68px;font-size:42px;justify-self:center}
.challenge-big-btn.minus{transform:none}
.challenge-avatar{width:78px;height:78px;border-radius:22px;font-size:28px}
.challenge-score-num{font-size:5rem}
}
/* ===== Breakzi v69: final compact modals + manual opponent fix visuals ===== */
#playerProfileModal,
#challengeModal{
position:fixed!important;
inset:0!important;
z-index:999999!important;
display:none!important;
align-items:center!important;
justify-content:center!important;
padding:18px!important;
overflow:hidden!important;
background:rgba(1,7,18,.82)!important;
backdrop-filter:blur(14px)!important;
}
#playerProfileModal:not(.hidden),
#challengeModal:not(.hidden){
display:flex!important;
}
#playerProfileModal .modal-card,
#challengeModal .modal-card{
width:min(430px,calc(100vw - 52px))!important;
max-width:430px!important;
height:auto!important;
max-height:min(535px,calc(100vh - 150px))!important;
overflow-y:auto!important;
overflow-x:hidden!important;
border-radius:22px!important;
padding:0!important;
margin:0!important;
border:1px solid rgba(0,255,166,.35)!important;
box-shadow:0 28px 80px rgba(0,0,0,.65)!important;
overscroll-behavior:contain!important;
}
#playerProfileModal .modal-close,
#challengeModal .modal-close{
position:sticky!important;
top:8px!important;
float:right!important;
width:48px!important;
height:48px!important;
min-width:48px!important;
min-height:48px!important;
margin:8px 8px -56px auto!important;
border-radius:50%!important;
z-index:999!important;
display:grid!important;
place-items:center!important;
background:#061325!important;
color:#fff!important;
border:1px solid rgba(255,255,255,.32)!important;
font-size:30px!important;
font-weight:1000!important;
line-height:1!important;
box-shadow:0 12px 32px rgba(0,0,0,.55)!important;
cursor:pointer!important;
}
#playerProfileModal .breakzi-modal-head,
#challengeModal .breakzi-modal-head{
padding:16px 64px 12px 16px!important;
}
#playerProfileModal .breakzi-modal-head h2,
#challengeModal .breakzi-modal-head h2{
font-size:1.18rem!important;
line-height:1.08!important;
margin:7px 0 4px!important;
color:#eaf4ff!important;
}
#playerProfileModal .breakzi-modal-head p,
#challengeModal .breakzi-modal-head p{
font-size:11px!important;
line-height:1.3!important;
}
#playerProfileModal .player-edit-photo-row{
padding:10px 16px!important;
grid-template-columns:50px 1fr!important;
gap:10px!important;
}
#playerProfileModal .edit-player-photo-preview{
width:50px!important;
height:50px!important;
border-radius:16px!important;
}
#playerProfileModal .edit-photo-btn{
min-height:34px!important;
font-size:11px!important;
padding:0 12px!important;
}
#playerProfileModal .player-edit-grid,
#challengeModal .challenge-form-grid{
padding:10px 16px 8px!important;
gap:8px!important;
grid-template-columns:1fr!important;
}
#playerProfileModal .player-edit-grid label,
#challengeModal .challenge-form-grid label{
font-size:10.5px!important;
gap:4px!important;
}
#playerProfileModal .player-edit-grid input,
#playerProfileModal .player-edit-grid select,
#challengeModal .challenge-form-grid input,
#challengeModal .challenge-form-grid select{
height:36px!important;
min-height:36px!important;
border-radius:12px!important;
font-size:12px!important;
padding:0 10px!important;
}
#challengeModal .challenge-mode-switch{
grid-template-columns:1fr!important;
gap:7px!important;
}
#challengeModal .challenge-mode-switch button{
min-height:35px!important;
font-size:12px!important;
}
#savePlayerProfileBtn,
#saveChallengeBtn{
width:calc(100% - 32px)!important;
margin:7px 16px 4px!important;
min-height:39px!important;
height:39px!important;
border-radius:13px!important;
font-size:12px!important;
}
#playerProfileStatus,
#challengeStatus{
margin:4px 16px 12px!important;
font-size:11px!important;
min-height:18px!important;
}
@media(max-height:720px){
#playerProfileModal .modal-card,
#challengeModal .modal-card{
max-height:calc(100vh - 105px)!important;
}
}
@media(max-width:700px){
#playerProfileModal,
#challengeModal{
align-items:center!important;
padding:14px!important;
}
#playerProfileModal .modal-card,
#challengeModal .modal-card{
width:calc(100vw - 54px)!important;
max-height:calc(100vh - 150px)!important;
}
}
/* ===== Breakzi v73: player/admin menu position fix ===== */
#playerMenu,
#adminMenu,
.player-menu{
position:fixed!important;
z-index:1000002!important;
max-width:calc(100vw - 20px)!important;
width:min(270px,calc(100vw - 20px))!important;
transform:none!important;
margin:0!important;
}
#playerMenu.hidden,
#adminMenu.hidden,
.player-menu.hidden{
display:none!important;
}
#playerMenu button,
#adminMenu button,
.player-menu button{
min-height:46px!important;
white-space:normal!important;
}
@media(max-width:700px){
#playerMenu,
#adminMenu,
.player-menu{
width:min(285px,calc(100vw - 20px))!important;
border-radius:20px!important;
padding:10px!important;
}
}
/* ===== Breakzi v74: single opponent field + suggestions ===== */
#challengeBreakziOpponentLabel,
#challengeManualOpponentLabel{
display:none!important;
}
.challenge-smart-opponent-label{
position:relative!important;
grid-column:1 / -1!important;
}
#challengeOpponentInput{
width:100%!important;
}
.challenge-opponent-suggestions{
position:absolute;
left:0;
right:0;
top:calc(100% + 8px);
z-index:1000005;
display:grid;
gap:6px;
padding:8px;
border-radius:16px;
border:1px solid rgba(0,255,166,.22);
background:linear-gradient(180deg,rgba(6,20,38,.98),rgba(3,12,25,.98));
box-shadow:0 18px 42px rgba(0,0,0,.45);
max-height:220px;
overflow:auto;
}
.challenge-opponent-suggestions.hidden{
display:none!important;
}
.challenge-suggestion{
width:100%;
min-height:48px;
border:0;
border-radius:13px;
background:rgba(255,255,255,.055);
color:#fff;
display:flex;
align-items:center;
gap:10px;
padding:8px;
text-align:left;
cursor:pointer;
}
.challenge-suggestion:hover{
background:rgba(0,255,166,.12);
}
.challenge-suggestion-avatar{
width:34px;
height:34px;
border-radius:50%;
display:grid;
place-items:center;
background:rgba(0,255,166,.14);
border:1px solid rgba(0,255,166,.22);
overflow:hidden;
flex:0 0 auto;
font-weight:1000;
}
.challenge-suggestion-avatar img{
width:100%;
height:100%;
object-fit:cover;
}
.challenge-suggestion strong,
.challenge-suggestion small{
display:block;
}
.challenge-suggestion small{
color:#aac2da;
font-size:10px;
margin-top:2px;
}
.challenge-suggestion-empty{
color:#cfe2f6;
font-size:12px;
font-weight:800;
padding:10px;
text-align:center;
}
/* ===== Breakzi v75: manual toggle fix ===== */
#challengeOpponentMode button{
pointer-events:auto!important;
touch-action:manipulation!important;
cursor:pointer!important;
position:relative!important;
z-index:5!important;
}
#challengeOpponentMode button.active,
body.challenge-manual-mode #challengeOpponentMode button[data-mode="manual"],
body.challenge-breakzi-mode #challengeOpponentMode button[data-mode="breakzi"]{
background:linear-gradient(135deg,#00ff7a,#00d6c8)!important;
color:#031421!important;
border-color:transparent!important;
box-shadow:0 12px 30px rgba(0,255,166,.18)!important;
}
body.challenge-manual-mode #challengeOpponentMode button[data-mode="breakzi"],
body.challenge-breakzi-mode #challengeOpponentMode button[data-mode="manual"]{
background:rgba(255,255,255,.055)!important;
color:#d7e7ff!important;
border-color:rgba(255,255,255,.15)!important;
box-shadow:none!important;
}
/* ===== Breakzi v78: challenge score uses tournament player score interface ===== */
.tournament-style-challenge-score{
overflow:auto!important;
background:
radial-gradient(circle at 15% 0%,rgba(0,255,166,.12),transparent 34%),
linear-gradient(135deg,#061827,#082d2f 58%,#03111f)!important;
}
.challenge-player-score-shell{
min-height:100vh;
width:100%;
position:relative;
padding:clamp(18px,3vw,34px);
color:#fff;
font-family:system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
overflow:hidden;
}
.player-score-brand{
position:absolute;
top:24px;
right:28px;
display:flex;
align-items:flex-start;
gap:12px;
text-align:right;
z-index:2;
}
.player-score-brand strong{
display:block;
font-size:18px;
letter-spacing:.32em;
font-weight:1000;
}
.player-score-brand span{
display:block;
color:#19e8d6;
font-size:15px;
letter-spacing:.22em;
font-weight:1000;
}
.player-score-star{
width:46px;
height:46px;
border-radius:14px;
background:rgba(255,255,255,.08);
border:2px solid rgba(255,255,255,.45);
color:#fff;
font-size:18px;
}
.player-score-title{
margin:38px auto 4px;
text-align:center;
font-size:clamp(2.2rem,6vw,5.2rem);
letter-spacing:.20em;
text-transform:uppercase;
line-height:1.05;
text-shadow:0 16px 36px rgba(0,0,0,.42);
}
.challenge-score-date{
text-align:center;
color:#cbd9ec;
font-size:clamp(1rem,2.5vw,1.4rem);
font-weight:1000;
margin-bottom:clamp(18px,5vh,70px);
}
.player-score-arena{
display:grid;
grid-template-columns:minmax(220px,1fr) minmax(210px,280px) minmax(220px,1fr);
align-items:center;
gap:clamp(18px,3vw,48px);
max-width:1240px;
margin:0 auto;
}
.player-score-side{
position:relative;
display:grid;
justify-items:center;
text-align:center;
gap:12px;
min-height:520px;
}
.player-score-avatar{
width:clamp(90px,12vw,150px);
height:clamp(90px,12vw,150px);
border-radius:28px;
display:grid;
place-items:center;
overflow:hidden;
background:rgba(255,255,255,.08);
border:1px solid rgba(255,255,255,.16);
box-shadow:0 22px 50px rgba(0,0,0,.28);
}
.player-score-avatar img{
width:100%;
height:100%;
object-fit:cover;
}
.player-score-avatar span{
font-size:clamp(2.2rem,5vw,4rem);
font-weight:1000;
}
.player-score-number{
font-size:clamp(5.5rem,12vw,10rem);
line-height:.78;
font-weight:1000;
}
.player-score-number-a{
color:#ffb21e;
}
.player-score-number-b{
color:#fff;
}
.player-score-side h2{
font-size:clamp(1.35rem,3vw,2.8rem);
line-height:1.05;
margin:4px 0;
text-transform:uppercase;
max-width:420px;
}
.player-score-main-btn{
position:absolute;
width:clamp(66px,9vw,116px);
height:clamp(66px,9vw,116px);
border-radius:50%;
border:0;
color:#fff;
font-size:clamp(2.5rem,6vw,5rem);
line-height:1;
display:grid;
place-items:center;
box-shadow:0 20px 45px rgba(0,0,0,.35);
z-index:2;
}
.player-score-plus{
background:linear-gradient(180deg,#4ae3ff,#008fdf);
top:20%;
}
.player-score-minus{
background:linear-gradient(180deg,#ff5b6c,#e6293c);
top:44%;
}
.player-score-side-left .player-score-main-btn{
left:-8px;
}
.player-score-side-right .player-score-main-btn{
right:-8px;
}
.player-runout-control{
display:flex;
align-items:center;
justify-content:center;
gap:14px;
margin-top:12px;
}
.player-runout-control button{
width:48px;
height:48px;
border-radius:50%;
border:0;
color:#fff;
font-size:30px;
font-weight:1000;
}
.player-runout-control button:first-child{
background:linear-gradient(180deg,#ff5b6c,#e6293c);
}
.player-runout-control button:last-child{
background:linear-gradient(180deg,#4ae3ff,#008fdf);
}
.player-runout-control strong{
font-size:clamp(2rem,5vw,4rem);
line-height:1;
}
.player-runout-label{
color:#aebed2;
font-weight:1000;
font-size:1.3rem;
}
.player-score-center{
display:grid;
justify-items:center;
align-content:center;
gap:16px;
min-height:520px;
}
.who-breaks{
display:grid;
gap:8px;
justify-items:center;
color:#cbd9ec;
font-weight:1000;
text-align:center;
}
.who-breaks button{
min-width:128px;
min-height:40px;
border-radius:999px;
border:1px solid rgba(255,255,255,.25);
background:rgba(255,255,255,.08);
color:#fff;
font-weight:1000;
}
.who-breaks button.active{
background:#ffb21e;
color:#08202e;
border-color:transparent;
}
.challenge-score-table-card{
text-align:center;
display:grid;
gap:4px;
color:#fff;
text-transform:uppercase;
}
.challenge-score-table-card strong{
font-size:1.5rem;
letter-spacing:.14em;
}
.challenge-score-table-card span{
font-size:1.1rem;
color:#cbd9ec;
font-weight:1000;
}
.race-to-center{
text-align:center;
display:grid;
gap:2px;
}
.race-to-center small{
color:#cbd9ec;
font-size:1.25rem;
font-weight:1000;
}
.race-to-center b{
color:#ffb21e;
font-size:4.2rem;
line-height:.9;
}
.match-status{
color:#00ff7a;
font-weight:1000;
font-size:1.35rem;
text-align:center;
}
.player-score-reset{
min-width:110px;
min-height:42px;
border-radius:999px;
border:1px solid rgba(255,255,255,.22);
background:rgba(255,255,255,.08);
color:#fff;
font-weight:1000;
}
.challenge-winner-line{
margin:18px auto 0;
text-align:center;
color:#00ff7a;
font-weight:1000;
font-size:1.2rem;
}
@media(max-width:800px){
.challenge-player-score-shell{
min-height:100svh;
padding:18px 14px 90px;
overflow-x:hidden;
}
.player-score-brand{
position:static;
justify-content:flex-end;
margin-bottom:28px;
}
.player-score-brand strong{
font-size:13px;
}
.player-score-brand span{
font-size:12px;
}
.player-score-star{
width:42px;
height:42px;
}
.player-score-title{
margin:8px 0 4px;
font-size:1.92rem;
letter-spacing:.14em;
white-space:normal;
}
.challenge-score-date{
margin-bottom:26px;
}
.player-score-arena{
grid-template-columns:1fr 96px 1fr;
gap:6px;
align-items:start;
}
.player-score-side{
min-height:auto;
gap:8px;
padding-top:110px;
}
.player-score-center{
min-height:auto;
gap:10px;
padding-top:0;
}
.player-score-avatar{
width:74px;
height:74px;
border-radius:20px;
order:-1;
}
.player-score-number{
font-size:4.8rem;
}
.player-score-side h2{
font-size:1.1rem;
max-width:130px;
line-height:1.05;
}
.player-score-main-btn{
width:58px;
height:58px;
font-size:2.6rem;
position:absolute;
top:26px;
}
.player-score-minus{
top:100px;
}
.player-score-side-left .player-score-main-btn{
left:-4px;
}
.player-score-side-right .player-score-main-btn{
right:-4px;
}
.who-breaks{
font-size:.95rem;
margin-top:0;
}
.who-breaks button{
min-width:86px;
min-height:34px;
font-size:.82rem;
}
.challenge-score-table-card strong{
font-size:1.15rem;
}
.challenge-score-table-card span{
font-size:.88rem;
}
.race-to-center small{
font-size:1rem;
}
.race-to-center b{
font-size:3.2rem;
}
.match-status{
font-size:1rem;
}
.player-runout-control{
gap:8px;
margin-top:2px;
}
.player-runout-control button{
width:40px;
height:40px;
font-size:24px;
}
.player-runout-control strong{
font-size:2.4rem;
}
.player-runout-label{
font-size:.95rem;
}
.player-score-reset{
min-height:38px;
min-width:96px;
}
}
/* ===== Breakzi v80: live modal compact + challenge discipline + mobile score fix ===== */
#allLiveMatchesModal,
#liveMatchesModal,
#allLiveModal{
position:fixed!important;
inset:0!important;
z-index:1000004!important;
display:none!important;
align-items:center!important;
justify-content:center!important;
padding:18px!important;
background:rgba(1,7,18,.78)!important;
backdrop-filter:blur(12px)!important;
overflow:hidden!important;
}
#allLiveMatchesModal:not(.hidden),
#liveMatchesModal:not(.hidden),
#allLiveModal:not(.hidden){
display:flex!important;
}
#allLiveMatchesModal .modal-card,
#liveMatchesModal .modal-card,
#allLiveModal .modal-card,
#allLiveMatchesModal .all-live-card,
#liveMatchesModal .all-live-card,
#allLiveModal .all-live-card{
width:min(520px,calc(100vw - 42px))!important;
max-height:min(640px,calc(100vh - 120px))!important;
overflow-y:auto!important;
border-radius:24px!important;
margin:0!important;
}
#closeAllLiveMatchesBtn,
#closeLiveMatchesBtn,
.all-live-close,
.live-modal-close{
position:sticky!important;
top:8px!important;
float:right!important;
width:46px!important;
height:46px!important;
min-width:46px!important;
border-radius:50%!important;
display:grid!important;
place-items:center!important;
z-index:1000006!important;
background:#061325!important;
border:1px solid rgba(255,255,255,.35)!important;
color:#fff!important;
font-size:28px!important;
font-weight:1000!important;
margin:8px 8px -54px auto!important;
}
@media(max-width:700px){
#allLiveMatchesModal,
#liveMatchesModal,
#allLiveModal{
align-items:center!important;
padding:14px!important;
}
#allLiveMatchesModal .modal-card,
#liveMatchesModal .modal-card,
#allLiveModal .modal-card,
#allLiveMatchesModal .all-live-card,
#liveMatchesModal .all-live-card,
#allLiveModal .all-live-card{
width:calc(100vw - 44px)!important;
max-height:calc(100vh - 150px)!important;
}
}
#challengeDate,
#challengeTime{
display:none!important;
}
label:has(#challengeDate),
label:has(#challengeTime){
display:none!important;
}
#challengeDiscipline{
text-transform:none!important;
}
@media(max-width:800px){
.tournament-style-challenge-score{
overflow-y:auto!important;
overflow-x:hidden!important;
}
.challenge-player-score-shell{
min-height:100svh!important;
padding:16px 14px 110px!important;
overflow:visible!important;
}
.player-score-brand{
position:relative!important;
top:auto!important;
right:auto!important;
justify-content:flex-end!important;
margin-bottom:18px!important;
}
.player-score-title{
font-size:clamp(1.75rem,7vw,2.25rem)!important;
letter-spacing:.12em!important;
margin:10px 0 4px!important;
white-space:normal!important;
}
.challenge-score-date{
font-size:.92rem!important;
margin-bottom:18px!important;
letter-spacing:.05em!important;
}
.player-score-arena{
display:grid!important;
grid-template-columns:1fr 1fr!important;
grid-template-areas:
"center center"
"left right"!important;
gap:16px 10px!important;
align-items:start!important;
width:100%!important;
max-width:430px!important;
margin:0 auto!important;
}
.player-score-center{
grid-area:center!important;
min-height:auto!important;
padding:0!important;
gap:9px!important;
}
.player-score-side-left{grid-area:left!important;}
.player-score-side-right{grid-area:right!important;}
.player-score-side{
min-height:auto!important;
padding:0!important;
gap:7px!important;
display:grid!important;
grid-template-columns:1fr!important;
justify-items:center!important;
}
.player-score-avatar{
width:66px!important;
height:66px!important;
border-radius:18px!important;
order:1!important;
}
.player-score-number{
font-size:4.25rem!important;
line-height:.9!important;
order:2!important;
}
.player-score-side h2{
font-size:.98rem!important;
line-height:1.05!important;
max-width:150px!important;
order:3!important;
min-height:34px!important;
}
.player-score-main-btn{
position:static!important;
width:46px!important;
height:46px!important;
font-size:2rem!important;
order:0!important;
box-shadow:0 12px 24px rgba(0,0,0,.28)!important;
}
.player-score-plus{margin-bottom:4px!important;}
.player-score-minus{margin-bottom:4px!important;}
.player-runout-control{
order:4!important;
margin-top:2px!important;
gap:7px!important;
}
.player-runout-label{
order:5!important;
font-size:.82rem!important;
}
.player-runout-control button{
width:34px!important;
height:34px!important;
font-size:20px!important;
}
.player-runout-control strong{
font-size:2rem!important;
}
.who-breaks{
display:grid!important;
grid-template-columns:1fr 1fr!important;
gap:7px!important;
width:100%!important;
max-width:250px!important;
}
.who-breaks span{
grid-column:1 / -1!important;
line-height:1.05!important;
}
.who-breaks button{
min-width:0!important;
width:100%!important;
min-height:32px!important;
font-size:.78rem!important;
padding:0 8px!important;
}
.challenge-score-table-card strong{font-size:.9rem!important;}
.challenge-score-table-card span{
font-size:.72rem!important;
max-width:250px!important;
line-height:1.15!important;
}
.race-to-center small{font-size:.9rem!important;}
.race-to-center b{font-size:2.7rem!important;}
.match-status{font-size:.9rem!important;}
.player-score-reset{
min-height:36px!important;
min-width:94px!important;
font-size:.85rem!important;
}
}
/* ===== Breakzi v81: challenge stats + live modal cleanup ===== */
.challenge-history-card strong{
text-transform:uppercase!important;
}
.challenge-history-actions{
display:flex!important;
flex-direction:column!important;
gap:8px!important;
align-items:flex-end!important;
}
.challenge-history-stats-btn{
min-height:34px!important;
padding:0 14px!important;
border-radius:999px!important;
border:1px solid rgba(255,255,255,.20)!important;
background:rgba(255,255,255,.08)!important;
color:#fff!important;
font-weight:1000!important;
cursor:pointer!important;
}
.challenge-history-open-btn{
min-height:40px!important;
padding:0 18px!important;
border-radius:999px!important;
border:0!important;
background:linear-gradient(135deg,#00ff7a,#00d6c8)!important;
color:#031421!important;
font-weight:1000!important;
cursor:pointer!important;
}
.challenge-stats-content{
padding:18px!important;
}
.challenge-stats-grid{
display:grid!important;
grid-template-columns:1fr 1fr!important;
gap:12px!important;
}
.challenge-stats-player{
border:1px solid rgba(255,255,255,.12)!important;
border-radius:18px!important;
background:rgba(255,255,255,.055)!important;
padding:14px!important;
}
.challenge-stats-player strong{
display:block!important;
color:#fff!important;
font-size:.95rem!important;
margin-bottom:12px!important;
text-transform:uppercase!important;
}
.challenge-stats-player div{
display:flex!important;
justify-content:space-between!important;
gap:10px!important;
color:#cfe2f6!important;
margin:8px 0!important;
}
.challenge-stats-player b{
color:#ffb21e!important;
}
.challenge-stats-note{
margin-top:12px!important;
color:#aac2da!important;
font-size:12px!important;
line-height:1.35!important;
}
.lag-winner-badge{
display:none!important;
width:30px!important;
height:30px!important;
border-radius:50%!important;
background:rgba(255,255,255,.14)!important;
border:1px solid rgba(255,255,255,.25)!important;
color:#ffb21e!important;
font-weight:1000!important;
place-items:center!important;
margin-top:-4px!important;
}
.lag-winner-badge.show{
display:grid!important;
}
#allLiveMatchesModal .clean-watch-live-btn,
#liveMatchesModal .clean-watch-live-btn,
#allLiveModal .clean-watch-live-btn{
display:flex!important;
width:100%!important;
min-height:48px!important;
border-radius:999px!important;
align-items:center!important;
justify-content:center!important;
background:linear-gradient(135deg,#ff5a2f,#ffbe25)!important;
color:#fff!important;
font-weight:1000!important;
text-decoration:none!important;
margin-top:12px!important;
position:relative!important;
inset:auto!important;
transform:none!important;
}
#allLiveMatchesModal .home-live-match-card > .clean-watch-live-btn ~ .clean-watch-live-btn,
#liveMatchesModal .home-live-match-card > .clean-watch-live-btn ~ .clean-watch-live-btn,
#allLiveModal .home-live-match-card > .clean-watch-live-btn ~ .clean-watch-live-btn{
display:none!important;
}
#allLiveMatchesModal .home-live-match-card,
#liveMatchesModal .home-live-match-card,
#allLiveModal .home-live-match-card,
#allLiveMatchesModal .live-match-card,
#liveMatchesModal .live-match-card,
#allLiveModal .live-match-card{
background:rgba(255,255,255,.055)!important;
overflow:hidden!important;
}
@media(max-width:700px){
.challenge-history-card{
grid-template-columns:1fr!important;
align-items:stretch!important;
}
.challenge-history-actions{
flex-direction:row!important;
align-items:center!important;
justify-content:flex-end!important;
}
.challenge-stats-grid{
grid-template-columns:1fr!important;
}
}
/* ===== Breakzi v82: clean All Live Matches modal ===== */
#allLiveMatchesModal,#liveMatchesModal,#allLiveModal{
position:fixed!important; inset:0!important; z-index:1000004!important;
display:none!important; align-items:center!important; justify-content:center!important;
padding:18px!important; background:rgba(1,7,18,.78)!important;
backdrop-filter:blur(12px)!important; overflow:hidden!important;
}
#allLiveMatchesModal:not(.hidden),#liveMatchesModal:not(.hidden),#allLiveModal:not(.hidden){display:flex!important;}
.breakzi-all-live-clean-card{
width:min(560px,calc(100vw - 42px))!important;
max-height:min(680px,calc(100vh - 125px))!important;
overflow-y:auto!important; overflow-x:hidden!important;
border-radius:24px!important; border:1px solid rgba(255,255,255,.16)!important;
background:linear-gradient(180deg,rgba(11,31,50,.98),rgba(5,18,32,.98))!important;
box-shadow:0 28px 80px rgba(0,0,0,.58)!important;
padding:28px!important; margin:0!important;
}
.breakzi-all-live-clean-card h2{
color:#fff!important; font-size:clamp(1.8rem,7vw,2.6rem)!important;
margin:0 60px 12px 0!important; line-height:1.05!important;
}
.breakzi-all-live-clean-card p{
color:#c6d4e7!important; font-size:1.05rem!important; font-weight:800!important;
line-height:1.4!important; margin:0 0 18px!important;
}
.breakzi-all-live-clean-card .all-live-close{
position:sticky!important; top:0!important; float:right!important;
width:48px!important; height:48px!important; min-width:48px!important;
border-radius:50%!important; display:grid!important; place-items:center!important;
background:#061325!important; border:1px solid rgba(255,255,255,.38)!important;
color:#fff!important; font-size:30px!important; font-weight:1000!important;
z-index:10!important; margin:0 0 -54px auto!important;
}
.clean-all-live-list{display:grid!important; gap:16px!important;}
.clean-live-match-card{
position:relative!important; overflow:hidden!important; border-radius:22px!important;
border:1px solid rgba(255,255,255,.12)!important; background:rgba(255,255,255,.055)!important;
padding:18px!important; box-shadow:none!important;
}
.clean-live-match-card::before{
content:""!important; position:absolute!important; left:0!important; top:0!important; bottom:0!important;
width:6px!important; background:#00ff7a!important; border-radius:22px 0 0 22px!important;
}
.clean-live-meta{color:#aebed2!important; font-weight:1000!important; font-size:.95rem!important; margin-bottom:14px!important;}
.clean-live-player{color:#fff!important; font-size:1.28rem!important; font-weight:1000!important; line-height:1.15!important;}
.clean-live-score{color:#ffb21e!important; font-size:1.65rem!important; font-weight:1000!important; line-height:1.1!important; margin:9px 0!important; text-align:center!important;}
.clean-watch-live-btn{
display:flex!important; width:100%!important; min-height:48px!important; border-radius:999px!important;
align-items:center!important; justify-content:center!important;
background:linear-gradient(135deg,#ff5a2f,#ffbe25)!important; color:#fff!important;
font-weight:1000!important; text-decoration:none!important; border:0!important; margin-top:16px!important;
position:relative!important; inset:auto!important; transform:none!important; opacity:1!important;
}
#allLiveMatchesModal > .watch-live-home-btn,#liveMatchesModal > .watch-live-home-btn,#allLiveModal > .watch-live-home-btn,
#allLiveMatchesModal .breakzi-all-live-clean-card > .watch-live-home-btn,
#liveMatchesModal .breakzi-all-live-clean-card > .watch-live-home-btn,
#allLiveModal .breakzi-all-live-clean-card > .watch-live-home-btn,
#allLiveMatchesModal .clean-live-match-card .clean-watch-live-btn ~ .clean-watch-live-btn,
#liveMatchesModal .clean-live-match-card .clean-watch-live-btn ~ .clean-watch-live-btn,
#allLiveModal .clean-live-match-card .clean-watch-live-btn ~ .clean-watch-live-btn{
display:none!important;
}
@media(max-width:700px){
.breakzi-all-live-clean-card{width:calc(100vw - 44px)!important; max-height:calc(100vh - 150px)!important; padding:24px 18px!important;}
.clean-live-match-card{padding:16px 16px 16px 18px!important;}
.clean-live-player{font-size:1.12rem!important;}
.clean-live-score{font-size:1.45rem!important;}
}
/* ===== Breakzi v83: restore stable live matches section ===== */
/* Critical mobile fix: the live matches area must never trap vertical scrolling */
.live-matches-card,
.live-matches-section,
#liveMatchesSection,
.home-live-matches,
.live-results-strip,
.live-matches-slider,
.live-matches-track,
.live-results-track,
.matches-results-slider{
touch-action: pan-y !important;
overscroll-behavior: auto !important;
pointer-events: auto !important;
}
/* Disable horizontal carousel behavior that was blocking page scroll */
.live-matches-slider,
.live-matches-track,
.live-results-track,
.matches-results-slider,
.home-live-slider,
.home-live-track{
overflow-x: visible !important;
scroll-snap-type: none !important;
transform: none !important;
animation: none !important;
will-change: auto !important;
}
/* Return Live Matches cards to a simple stable stacked layout on phones */
@media(max-width:700px){
.live-matches-list,
.home-live-matches-list,
.live-matches-slider,
.live-matches-track,
.home-live-track{
display: grid !important;
grid-template-columns: 1fr !important;
gap: 12px !important;
overflow: visible !important;
max-height: none !important;
}
.home-live-match-card,
.live-match-card,
.all-live-match-card{
width: 100% !important;
min-width: 0 !important;
max-width: 100% !important;
transform: none !important;
scroll-snap-align: none !important;
margin: 0 !important;
}
.live-matches-card,
.live-matches-section,
#liveMatchesSection{
overflow: visible !important;
max-height: none !important;
}
}
/* Undo the orange ghost-button visual issue from previous rebuild attempts */
.home-live-match-card > .watch-live-home-btn:not(:last-child),
.live-match-card > .watch-live-home-btn:not(:last-child),
.all-live-match-card > .watch-live-home-btn:not(:last-child),
.home-live-match-card > .clean-watch-live-btn:not(:last-child),
.live-match-card > .clean-watch-live-btn:not(:last-child),
.all-live-match-card > .clean-watch-live-btn:not(:last-child){
display:none !important;
}
.home-live-match-card .watch-live-home-btn,
.live-match-card .watch-live-home-btn,
.all-live-match-card .watch-live-home-btn,
.home-live-match-card .clean-watch-live-btn,
.live-match-card .clean-watch-live-btn,
.all-live-match-card .clean-watch-live-btn{
position: relative !important;
inset: auto !important;
transform: none !important;
width: 100% !important;
margin-top: 12px !important;
min-height: 44px !important;
border-radius: 999px !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
}
/* If a modal opens, keep it usable but do not lock the website scroll forever */
body.all-live-modal-open,
html.all-live-modal-open{
overflow: auto !important;
position: static !important;
}
/* Restore All Live Matches modal to simple contained scroll if opened */
#allLiveMatchesModal,
#liveMatchesModal,
#allLiveModal{
overscroll-behavior: contain !important;
}
#allLiveMatchesModal .modal-card,
#liveMatchesModal .modal-card,
#allLiveModal .modal-card,
#allLiveMatchesModal .all-live-card,
#liveMatchesModal .all-live-card,
#allLiveModal .all-live-card,
.breakzi-all-live-clean-card{
max-height: calc(100vh - 150px) !important;
overflow-y: auto !important;
overflow-x: hidden !important;
}
/* ===== Breakzi v84: definitive All Live Matches button fix ===== */
/* Keep modal small/easy to close */
#allLiveMatchesModal{
position:fixed!important;
inset:0!important;
z-index:1000004!important;
align-items:center!important;
justify-content:center!important;
padding:18px!important;
background:rgba(1,7,18,.78)!important;
backdrop-filter:blur(12px)!important;
overflow:hidden!important;
}
#allLiveMatchesModal:not(.hidden){
display:flex!important;
}
#allLiveMatchesModal .modal-card,
#allLiveMatchesModal .all-live-card{
width:min(520px,calc(100vw - 42px))!important;
max-height:min(640px,calc(100vh - 130px))!important;
overflow-y:auto!important;
overflow-x:hidden!important;
border-radius:24px!important;
margin:0!important;
padding:24px!important;
background:linear-gradient(180deg,rgba(11,31,50,.98),rgba(5,18,32,.98))!important;
}
#closeAllLiveMatchesBtn,
#allLiveMatchesModal .all-live-close{
position:sticky!important;
top:0!important;
float:right!important;
width:48px!important;
height:48px!important;
min-width:48px!important;
border-radius:50%!important;
display:grid!important;
place-items:center!important;
z-index:20!important;
background:#061325!important;
border:1px solid rgba(255,255,255,.38)!important;
color:#fff!important;
font-size:30px!important;
font-weight:1000!important;
margin:0 0 -54px auto!important;
}
/* Original clean card style: dark card + exactly one orange button at bottom */
#allLiveMatchesContent{
display:grid!important;
gap:14px!important;
}
#allLiveMatchesContent .all-live-match-row{
position:relative!important;
display:grid!important;
grid-template-columns:1fr!important;
gap:12px!important;
overflow:hidden!important;
border-radius:20px!important;
border:1px solid rgba(255,255,255,.12)!important;
background:rgba(255,255,255,.055)!important;
padding:16px 16px 16px 20px!important;
box-shadow:none!important;
}
#allLiveMatchesContent .all-live-match-row::before{
content:""!important;
position:absolute!important;
left:0!important;
top:0!important;
bottom:0!important;
width:5px!important;
background:#00ff7a!important;
border-radius:20px 0 0 20px!important;
}
#allLiveMatchesContent .all-live-match-info{
position:relative!important;
z-index:1!important;
}
#allLiveMatchesContent .all-live-match-info small{
display:block!important;
color:#aebed2!important;
font-weight:1000!important;
font-size:.9rem!important;
margin-bottom:10px!important;
}
#allLiveMatchesContent .all-live-players{
display:grid!important;
gap:7px!important;
color:#fff!important;
font-weight:1000!important;
}
#allLiveMatchesContent .all-live-players strong{
color:#fff!important;
font-size:1.18rem!important;
line-height:1.15!important;
}
#allLiveMatchesContent .horizontal-score{
color:#ffb21e!important;
font-size:1.35rem!important;
font-weight:1000!important;
text-align:center!important;
line-height:1!important;
}
#allLiveMatchesContent .watch-live-home-btn,
#allLiveMatchesContent .all-live-watch-btn{
position:relative!important;
inset:auto!important;
transform:none!important;
z-index:1!important;
display:flex!important;
width:100%!important;
min-height:46px!important;
border-radius:999px!important;
align-items:center!important;
justify-content:center!important;
background:linear-gradient(135deg,#ff5a2f,#ffbe25)!important;
color:#fff!important;
font-weight:1000!important;
text-decoration:none!important;
border:0!important;
margin:0!important;
opacity:1!important;
box-shadow:0 12px 24px rgba(255,126,30,.18)!important;
}
/* Kill all ghost buttons outside a real row */
#allLiveMatchesModal > .watch-live-home-btn,
#allLiveMatchesModal > .all-live-watch-btn,
#allLiveMatchesModal .modal-card > .watch-live-home-btn,
#allLiveMatchesModal .modal-card > .all-live-watch-btn,
#allLiveMatchesModal .all-live-card > .watch-live-home-btn,
#allLiveMatchesModal .all-live-card > .all-live-watch-btn,
#allLiveMatchesContent > .watch-live-home-btn,
#allLiveMatchesContent > .all-live-watch-btn,
#allLiveMatchesContent .all-live-match-row .watch-live-home-btn ~ .watch-live-home-btn,
#allLiveMatchesContent .all-live-match-row .all-live-watch-btn ~ .all-live-watch-btn{
display:none!important;
}
/* Undo v82 clean classes if any cached markup remains */
#allLiveMatchesModal .breakzi-all-live-clean-card .clean-live-match-card{
background:rgba(255,255,255,.055)!important;
}
body.all-live-modal-open,
html.all-live-modal-open{
overflow:auto!important;
position:static!important;
}
@media(max-width:700px){
#allLiveMatchesModal{
padding:14px!important;
}
#allLiveMatchesModal .modal-card,
#allLiveMatchesModal .all-live-card{
width:calc(100vw - 44px)!important;
max-height:calc(100vh - 150px)!important;
padding:22px 18px!important;
}
#allLiveMatchesContent .all-live-match-row{
padding:15px 15px 15px 18px!important;
}
#allLiveMatchesContent .all-live-players strong{
font-size:1.08rem!important;
}
}
/* ===== Breakzi v85: Double KO tournament ===== */
.double-ko-hidden{
display:none!important;
}
.scoreboard-tournament-selector{
display:grid;
gap:16px;
}
.tournament-select-card.active-tournament-select{
border-color:rgba(0,255,166,.75)!important;
box-shadow:0 0 0 2px rgba(0,255,166,.15),0 18px 48px rgba(0,255,166,.12)!important;
}
.double-ko-select-card{
background:
radial-gradient(circle at 20% 0%,rgba(0,255,166,.18),transparent 42%),
linear-gradient(135deg,rgba(6,54,49,.92),rgba(11,28,51,.92))!important;
}
.double-ko-info-card{
grid-column:1/-1;
display:grid;
gap:8px;
padding:18px;
margin-bottom:12px;
border-radius:22px;
border:1px solid rgba(0,255,166,.28);
background:linear-gradient(135deg,rgba(0,255,166,.10),rgba(15,37,64,.72));
color:#d7e7ff;
}
.double-ko-info-card strong{
color:#fff;
font-size:1.15rem;
letter-spacing:.08em;
}
.double-ko-info-card span{
color:#aac2da;
font-weight:800;
}
#knockoutBoard .round-block{
min-width:min(100%,340px);
}
#knockoutBoard .round-header span:nth-child(2){
white-space:normal;
}
@media(max-width:700px){
.double-ko-info-card{
padding:14px;
border-radius:18px;
}
.double-ko-info-card strong{
font-size:.95rem;
}
.double-ko-info-card span{
font-size:.82rem;
}
}
/* ===== Breakzi v86: admin player picker + finished results slider ===== */
.players-link-btn{
background:linear-gradient(135deg,rgba(0,255,166,.18),rgba(0,214,200,.10))!important;
border-color:rgba(0,255,166,.34)!important;
}
.match-players-modal-card{
width:min(560px,calc(100vw - 34px))!important;
max-height:min(680px,calc(100vh - 120px))!important;
overflow-y:auto!important;
}
.match-players-modal-content{
padding:16px!important;
display:grid!important;
gap:14px!important;
}
.match-players-target{
padding:12px 14px!important;
border:1px solid rgba(0,255,166,.22)!important;
border-radius:16px!important;
background:rgba(0,255,166,.07)!important;
display:grid!important;
gap:4px!important;
}
.match-players-target strong{
color:#00ff9d!important;
letter-spacing:.12em!important;
}
.match-player-edit-card{
border:1px solid rgba(255,255,255,.12)!important;
border-radius:18px!important;
padding:14px!important;
background:rgba(255,255,255,.055)!important;
display:grid!important;
gap:8px!important;
}
.match-player-edit-card h3{
margin:0!important;
color:#fff!important;
}
.match-player-edit-card label{
color:#cfe2f6!important;
font-weight:900!important;
font-size:.86rem!important;
}
.match-player-edit-card select,
.match-player-edit-card input{
width:100%!important;
min-height:42px!important;
border-radius:13px!important;
border:1px solid rgba(255,255,255,.14)!important;
background:#061325!important;
color:#fff!important;
padding:0 12px!important;
font-weight:850!important;
}
.match-player-edit-card small{
color:#aac2da!important;
line-height:1.3!important;
}
.match-players-actions{
display:flex!important;
gap:10px!important;
justify-content:flex-end!important;
}
#saveMatchPlayersBtn{
min-height:42px!important;
padding:0 18px!important;
border-radius:999px!important;
border:0!important;
background:linear-gradient(135deg,#00ff7a,#00d6c8)!important;
color:#031421!important;
font-weight:1000!important;
}
#cancelMatchPlayersBtn{
min-height:42px!important;
padding:0 18px!important;
border-radius:999px!important;
border:1px solid rgba(255,255,255,.18)!important;
background:rgba(255,255,255,.07)!important;
color:#fff!important;
font-weight:1000!important;
}
.portrait-frame img{
width:100%!important;
height:100%!important;
object-fit:cover!important;
border-radius:inherit!important;
}
/* Finished results auto slider - continuous normal speed */
#homeLiveResultsStrip{
display:flex!important;
gap:14px!important;
overflow:hidden!important;
width:100%!important;
}
#homeLiveResultsStrip .mini-result-card{
flex:0 0 min(260px,78vw)!important;
}
#homeLiveResultsStrip:not(:has(.empty-mini)){
animation:breakziFinishedResultsMarquee 38s linear infinite!important;
width:max-content!important;
}
@keyframes breakziFinishedResultsMarquee{
from{transform:translateX(0)}
to{transform:translateX(-50%)}
}
@media(max-width:700px){
.match-players-modal-card{
max-height:calc(100vh - 145px)!important;
}
.match-players-actions{
flex-direction:column!important;
}
#saveMatchPlayersBtn,
#cancelMatchPlayersBtn{
width:100%!important;
}
#homeLiveResultsStrip:not(:has(.empty-mini)){
animation-duration:34s!important;
}
}
/* ===== Breakzi v87: desktop header no-overlap + slower finished results slider ===== */
/* Desktop header: stable grid so TIMER cannot overlap Search */
@media (min-width: 901px){
header,
.site-header,
.topbar,
.header,
.main-header,
.navbar{
overflow: visible !important;
}
.header-inner,
.nav-shell,
.topbar-inner,
.navbar-inner,
.main-header-inner{
display: grid !important;
grid-template-columns: minmax(210px, 310px) minmax(430px, auto) minmax(260px, 360px) auto auto auto !important;
align-items: center !important;
gap: clamp(14px, 1.5vw, 26px) !important;
width: 100% !important;
max-width: 100vw !important;
min-width: 0 !important;
}
.logo,
.brand,
.site-logo,
.header-logo{
min-width: 0 !important;
flex: 0 0 auto !important;
}
nav,
.nav,
.main-nav,
.desktop-nav{
display: flex !important;
align-items: center !important;
justify-content: flex-start !important;
gap: clamp(20px, 2.4vw, 46px) !important;
min-width: 0 !important;
white-space: nowrap !important;
flex-wrap: nowrap !important;
}
nav a,
nav button,
.nav a,
.nav button,
.main-nav a,
.main-nav button,
.desktop-nav a,
.desktop-nav button{
position: relative !important;
flex: 0 0 auto !important;
white-space: nowrap !important;
margin: 0 !important;
transform: none !important;
}
.search,
.search-box,
.header-search,
.search-wrapper,
.search-container{
width: min(330px, 20vw) !important;
min-width: 230px !important;
max-width: 360px !important;
flex: 0 1 auto !important;
margin: 0 !important;
position: relative !important;
transform: none !important;
left: auto !important;
right: auto !important;
}
.language-selector,
.language-switcher,
.lang-switch,
.lang-pill,
#languageSwitcher{
flex: 0 0 auto !important;
margin: 0 !important;
position: relative !important;
transform: none !important;
}
#adminSettingsBtn,
.admin-settings-btn,
.admin-settings,
.admin-link{
flex: 0 0 auto !important;
white-space: nowrap !important;
margin: 0 !important;
position: relative !important;
transform: none !important;
}
#adminLoginBtn,
.profile-button,
.login-icon,
.account-button{
flex: 0 0 auto !important;
margin: 0 !important;
position: relative !important;
transform: none !important;
}
}
/* Large desktop: give the nav enough air */
@media (min-width: 1200px){
.header-inner,
.nav-shell,
.topbar-inner,
.navbar-inner,
.main-header-inner{
grid-template-columns: minmax(250px, 340px) minmax(500px, auto) minmax(270px, 360px) auto auto auto !important;
}
nav,
.nav,
.main-nav,
.desktop-nav{
gap: clamp(28px, 2.6vw, 54px) !important;
}
}
/* Medium desktop / laptop: compact search and nav spacing */
@media (min-width: 901px) and (max-width: 1199px){
.header-inner,
.nav-shell,
.topbar-inner,
.navbar-inner,
.main-header-inner{
grid-template-columns: minmax(190px, 250px) minmax(390px, auto) minmax(190px, 250px) auto auto auto !important;
gap: 12px !important;
}
nav,
.nav,
.main-nav,
.desktop-nav{
gap: 24px !important;
}
.search,
.search-box,
.header-search,
.search-wrapper,
.search-container{
min-width: 180px !important;
width: 210px !important;
}
#adminSettingsBtn,
.admin-settings-btn,
.admin-settings,
.admin-link{
padding-inline: 14px !important;
font-size: .9rem !important;
}
}
/* Keep mobile header behavior untouched */
@media (max-width: 900px){
.header-inner,
.nav-shell,
.topbar-inner,
.navbar-inner,
.main-header-inner{
max-width: 100% !important;
}
}
/* Slow down Matches Results slider: desktop must feel calm, not rushed */
@media (min-width: 901px){
#homeLiveResultsStrip:not(:has(.empty-mini)){
animation-duration: 95s !important;
}
}
/* Slightly slower on tablets too */
@media (min-width: 701px) and (max-width: 900px){
#homeLiveResultsStrip:not(:has(.empty-mini)){
animation-duration: 70s !important;
}
}
/* Keep phone speed normal/slower but not too slow */
@media (max-width: 700px){
#homeLiveResultsStrip:not(:has(.empty-mini)){
animation-duration: 52s !important;
}
}
/* ===== Breakzi v91 stable rollback marker ===== */
#breakziVersionBadge{
z-index:10000000!important;
}
/* ===== Breakzi v92: DK player score link fixes ===== */
body.player-link-view .double-ko-info-card{
display:none!important;
}
/* ===== Breakzi v93: player-link and home names fix ===== */
/* Player score links must never show tournament info/prize cards */
body.player-link-view .double-ko-info-card,
.player-link-view .double-ko-info-card{
display:none!important;
}
/* Home result/live cards: keep resolved names readable */
.mini-result-card strong,
.home-live-match-card strong,
.all-live-match-row strong{
word-break: normal!important;
overflow-wrap: anywhere!important;
}
/* ===== Breakzi v94: score persistence and player link cleanup ===== */
body.player-link-view .double-ko-info-card,
.player-link-view .double-ko-info-card{
display:none!important;
}
/* ===== Breakzi v95: mobile manual swipe results + reset preservation ===== */
/* Home Matches Results: allow manual swipe on mobile */
@media(max-width:700px){
#homeLiveResultsStrip{
overflow-x:auto!important;
overflow-y:hidden!important;
-webkit-overflow-scrolling:touch!important;
scroll-snap-type:x proximity!important;
touch-action:pan-x pan-y!important;
overscroll-behavior-x:contain!important;
gap:14px!important;
padding-bottom:8px!important;
}
#homeLiveResultsStrip .mini-result-card{
scroll-snap-align:start!important;
flex:0 0 78vw!important;
}
/* hide scrollbar but keep swipe enabled */
#homeLiveResultsStrip::-webkit-scrollbar{
display:none!important;
}
#homeLiveResultsStrip{
scrollbar-width:none!important;
}
/* pause marquee while user swipes manually */
#homeLiveResultsStrip.manual-swiping{
animation-play-state:paused!important;
}
}
/* Desktop/tablet remains auto sliding, mobile is slower and swipe-friendly */
@media(max-width:700px){
#homeLiveResultsStrip:not(:has(.empty-mini)){
animation-duration:70s!important;
}
}
/* ===== Breakzi v96: DK buttons and zero score display ===== */
#breakziVersionBadge{
z-index:10000000!important;
}
/* ===== Breakzi v97: rankings + manual results slider ===== */
/* Rankings table/cards stay visible and readable */
#rankingBody tr,
.ranking-mobile-card{
opacity:1!important;
}
/* Home Matches Results: manual swipe left/right */
#homeLiveResultsStrip{
overflow-x:auto!important;
overflow-y:hidden!important;
-webkit-overflow-scrolling:touch!important;
scroll-snap-type:x proximity!important;
touch-action:pan-x pan-y!important;
overscroll-behavior-x:contain!important;
display:flex!important;
gap:14px!important;
padding-bottom:10px!important;
animation:none!important;
transform:none!important;
width:100%!important;
}
#homeLiveResultsStrip .mini-result-card{
flex:0 0 min(310px,82vw)!important;
scroll-snap-align:start!important;
}
#homeLiveResultsStrip::-webkit-scrollbar{
height:6px!important;
}
#homeLiveResultsStrip::-webkit-scrollbar-thumb{
background:rgba(0,255,166,.55)!important;
border-radius:999px!important;
}
@media(max-width:700px){
#homeLiveResultsStrip{
scrollbar-width:none!important;
}
#homeLiveResultsStrip::-webkit-scrollbar{
display:none!important;
}
#homeLiveResultsStrip .mini-result-card{
flex-basis:78vw!important;
}
}
/* ===== Breakzi v98: DK admin controls + realtime score link ===== */
.admin-authenticated [data-match^="DK"][data-action="players"],
.admin-authenticated [data-match^="DK"][data-action="score"],
.admin-authenticated [data-match^="DK"][data-action="runout"],
.admin-authenticated [data-match^="DK"][data-action="schedule"],
.admin-authenticated [data-match^="DK"][data-action="link"]{
opacity:1!important;
pointer-events:auto!important;
cursor:pointer!important;
}
[data-match^="DK"][data-action="players"]{
position:relative!important;
z-index:5!important;
}
/* ===== Breakzi v99: completely rebuilt mobile Matches Results ===== */
#homeLiveResultsStrip.mobile-results-v99{
display:flex!important;
gap:14px!important;
overflow-x:auto!important;
overflow-y:hidden!important;
-webkit-overflow-scrolling:touch!important;
scroll-snap-type:x mandatory!important;
touch-action:pan-x pan-y!important;
overscroll-behavior-x:contain!important;
padding:8px 4px 14px!important;
animation:none!important;
transform:none!important;
width:100%!important;
cursor:grab!important;
}
#homeLiveResultsStrip.mobile-results-v99:active{
cursor:grabbing!important;
}
#homeLiveResultsStrip.mobile-results-v99::-webkit-scrollbar{
height:7px!important;
}
#homeLiveResultsStrip.mobile-results-v99::-webkit-scrollbar-track{
background:rgba(255,255,255,.06)!important;
border-radius:999px!important;
}
#homeLiveResultsStrip.mobile-results-v99::-webkit-scrollbar-thumb{
background:linear-gradient(90deg,#00ff7a,#00d6c8)!important;
border-radius:999px!important;
}
.mobile-result-card-v99{
position:relative!important;
flex:0 0 min(330px,84vw)!important;
scroll-snap-align:center!important;
border-radius:24px!important;
border:1px solid rgba(255,255,255,.14)!important;
background:
radial-gradient(circle at top left,rgba(0,255,166,.18),transparent 38%),
linear-gradient(145deg,rgba(9,32,51,.96),rgba(6,18,33,.98))!important;
box-shadow:0 18px 46px rgba(0,0,0,.38)!important;
padding:16px!important;
min-height:190px!important;
overflow:hidden!important;
}
.mobile-result-card-v99::before{
content:""!important;
position:absolute!important;
left:0!important;
top:0!important;
bottom:0!important;
width:5px!important;
background:linear-gradient(180deg,#00ff7a,#f4e94d)!important;
}
.mobile-result-card-top{
display:flex!important;
align-items:center!important;
justify-content:space-between!important;
gap:10px!important;
margin-bottom:8px!important;
}
.mobile-result-card-top span{
color:#00ff9d!important;
font-weight:1000!important;
font-size:.82rem!important;
letter-spacing:.11em!important;
text-transform:uppercase!important;
}
.mobile-result-card-top em{
color:#9fb3c8!important;
font-style:normal!important;
font-weight:900!important;
font-size:.76rem!important;
}
.mobile-result-phase{
color:#b9c8d9!important;
font-weight:900!important;
font-size:.86rem!important;
line-height:1.25!important;
margin-bottom:16px!important;
}
.mobile-result-scoreboard{
display:grid!important;
grid-template-columns:1fr auto 1fr!important;
align-items:center!important;
gap:10px!important;
}
.mobile-result-player{
display:grid!important;
gap:8px!important;
min-width:0!important;
}
.mobile-result-player.right{
text-align:right!important;
}
.mobile-result-player strong{
color:#fff!important;
font-size:1.05rem!important;
line-height:1.08!important;
font-weight:1000!important;
overflow-wrap:anywhere!important;
}
.mobile-result-player b{
color:#ffb21e!important;
font-size:2.6rem!important;
line-height:.9!important;
font-weight:1000!important;
text-shadow:0 10px 28px rgba(255,178,30,.18)!important;
}
.mobile-result-versus{
width:32px!important;
height:32px!important;
border-radius:50%!important;
display:grid!important;
place-items:center!important;
background:rgba(255,255,255,.08)!important;
color:#d9e6f3!important;
font-weight:1000!important;
}
.mobile-result-empty-v99{
flex:1 0 100%!important;
border-radius:22px!important;
border:1px solid rgba(255,255,255,.12)!important;
padding:18px!important;
background:rgba(255,255,255,.05)!important;
color:#fff!important;
}
.mobile-result-empty-v99 small{
display:block!important;
color:#aab9cb!important;
margin-top:6px!important;
}
@media(max-width:760px){
#homeLiveResultsStrip.mobile-results-v99{
margin-inline:-4px!important;
padding-inline:4px!important;
scrollbar-width:none!important;
}
#homeLiveResultsStrip.mobile-results-v99::-webkit-scrollbar{
display:none!important;
}
.mobile-result-card-v99{
flex-basis:82vw!important;
min-height:180px!important;
}
}
@media(min-width:761px){
.mobile-result-card-v99{
flex-basis:330px!important;
}
}
/* ===== Breakzi v100: tournament selector visual names ===== */
.tournament-select-card strong em{
display:inline-block!important;
margin-left:.18em!important;
color:#00ff9d!important;
font-style:normal!important;
font-size:.82em!important;
letter-spacing:.03em!important;
}
.tournament-select-card strong{
line-height:1.12!important;
}
@media(max-width:700px){
.tournament-select-card strong em{
display:block!important;
margin-left:0!important;
margin-top:4px!important;
font-size:.78em!important;
}
}
/* ===== Breakzi v101: hard mobile swipe fix for Matches Results ===== */
/* The outer card must not trap touches */
.home-results-section,
.matches-results-section,
.home-matches-results,
#homeMatchesResults,
#homeLiveResultsCard{
overflow:visible!important;
touch-action:pan-y!important;
}
/* Real native horizontal scroller */
#homeLiveResultsStrip,
#homeLiveResultsStrip.mobile-results-v99,
#homeLiveResultsStrip.mobile-results-v101{
display:flex!important;
flex-direction:row!important;
flex-wrap:nowrap!important;
gap:14px!important;
width:100%!important;
max-width:100%!important;
overflow-x:auto!important;
overflow-y:hidden!important;
-webkit-overflow-scrolling:touch!important;
scroll-snap-type:x proximity!important;
scroll-behavior:auto!important;
touch-action:pan-x pan-y!important;
overscroll-behavior-x:contain!important;
overscroll-behavior-y:auto!important;
animation:none!important;
transform:none!important;
will-change:auto!important;
cursor:grab!important;
padding:8px 4px 14px!important;
user-select:none!important;
}
/* No pseudo layer should block swipe */
#homeLiveResultsStrip::before,
#homeLiveResultsStrip::after,
.matches-results-section::before,
.matches-results-section::after,
.home-results-section::before,
.home-results-section::after{
pointer-events:none!important;
}
/* Cards must be narrower than the viewport so there is real horizontal overflow */
#homeLiveResultsStrip .mobile-result-card-v99,
#homeLiveResultsStrip .mini-result-card,
#homeLiveResultsStrip .improved-mini-card{
flex:0 0 82vw!important;
min-width:82vw!important;
max-width:82vw!important;
scroll-snap-align:start!important;
pointer-events:auto!important;
}
/* Allow dragging/swiping on the card itself */
#homeLiveResultsStrip .mobile-result-card-v99,
#homeLiveResultsStrip .mobile-result-card-v99 *,
#homeLiveResultsStrip .mini-result-card,
#homeLiveResultsStrip .mini-result-card *{
touch-action:pan-x pan-y!important;
}
/* Hide mobile scrollbar but keep scroll working */
@media(max-width:760px){
#homeLiveResultsStrip,
#homeLiveResultsStrip.mobile-results-v99,
#homeLiveResultsStrip.mobile-results-v101{
scrollbar-width:none!important;
margin-inline:0!important;
padding-left:4px!important;
padding-right:18px!important;
}
#homeLiveResultsStrip::-webkit-scrollbar{
display:none!important;
}
#homeLiveResultsStrip .mobile-result-card-v99,
#homeLiveResultsStrip .mini-result-card,
#homeLiveResultsStrip .improved-mini-card{
flex-basis:82vw!important;
min-width:82vw!important;
max-width:82vw!important;
}
}
/* Desktop still can scroll manually with scrollbar */
@media(min-width:761px){
#homeLiveResultsStrip .mobile-result-card-v99,
#homeLiveResultsStrip .mini-result-card,
#homeLiveResultsStrip .improved-mini-card{
flex-basis:330px!important;
min-width:330px!important;
max-width:330px!important;
}
}
/* ===== Breakzi v102: force DK controls clickable ===== */
[data-match^="DK"][data-action]{
pointer-events:auto!important;
touch-action:manipulation!important;
position:relative!important;
z-index:50!important;
cursor:pointer!important;
opacity:1!important;
}
[data-match^="DK"][data-action="players"]{
background:linear-gradient(135deg,#00ff7a,#00d6c8)!important;
color:#031421!important;
border:0!important;
font-weight:1000!important;
}
.ko-row,
.admin-action-row,
.side-controls,
.runout-controls{
pointer-events:auto!important;
}
.ko-row::before,
.ko-row::after,
.admin-action-row::before,
.admin-action-row::after{
pointer-events:none!important;
}
/* ===== Breakzi v103 Double KO schema view ===== */
.dk-view-toggle{
display:flex;
gap:12px;
flex-wrap:wrap;
margin:16px 0 18px;
}
.dk-view-btn{
border:1px solid rgba(0,255,170,.35);
background:rgba(7,27,48,.9);
color:#dff7ff;
padding:12px 18px;
border-radius:999px;
font-weight:900;
cursor:pointer;
transition:.2s ease;
}
.dk-view-btn.active{
background:linear-gradient(135deg,#0dff80,#00d0c6);
color:#041522;
box-shadow:0 0 24px rgba(0,255,180,.18);
}
.dk-schema-wrap{
display:flex;
flex-direction:column;
gap:18px;
}
.dk-schema-readonly-note{
color:#9ec3d4;
font-size:.95rem;
margin-top:-4px;
}
.dk-schema-section{
border:1px solid rgba(120,170,200,.18);
border-radius:24px;
padding:18px;
background:linear-gradient(135deg,rgba(8,25,44,.88),rgba(11,37,62,.72));
box-shadow:0 12px 40px rgba(0,0,0,.18);
}
.dk-schema-section-head{
font-size:1.08rem;
font-weight:900;
letter-spacing:.03em;
text-transform:uppercase;
color:#f6fbff;
margin-bottom:14px;
}
.dk-schema-scroll{
overflow-x:auto;
overflow-y:hidden;
-webkit-overflow-scrolling:touch;
padding-bottom:6px;
}
.dk-schema-columns{
display:grid;
grid-auto-flow:column;
grid-auto-columns:minmax(220px, 240px);
gap:16px;
align-items:start;
min-width:max-content;
}
.dk-schema-finals-columns{
grid-auto-columns:minmax(260px, 300px);
}
.dk-schema-column{
border-radius:20px;
background:rgba(255,255,255,.035);
border:1px solid rgba(255,255,255,.06);
padding:14px;
}
.dk-schema-column-title{
color:#15ff93;
font-weight:900;
text-transform:uppercase;
letter-spacing:.04em;
margin-bottom:12px;
}
.dk-schema-column-body{
display:flex;
flex-direction:column;
gap:12px;
}
.dk-schema-match{
border-radius:16px;
padding:12px 12px 10px;
background:linear-gradient(180deg,rgba(255,255,255,.06),rgba(255,255,255,.03));
border:1px solid rgba(255,255,255,.08);
}
.dk-schema-match.finished{
border-color:rgba(0,255,160,.45);
box-shadow:inset 3px 0 0 rgba(0,255,160,.95);
}
.dk-schema-match.live{
border-color:rgba(255,180,0,.45);
box-shadow:inset 3px 0 0 rgba(255,180,0,.95);
}
.dk-schema-match-top{
display:flex;
justify-content:space-between;
gap:8px;
align-items:center;
margin-bottom:10px;
}
.dk-schema-match-top strong{
color:#fff;
font-size:.95rem;
}
.dk-schema-match-top span{
color:#9fbac9;
font-size:.78rem;
text-align:right;
}
.dk-schema-player-line{
display:flex;
justify-content:space-between;
gap:12px;
align-items:center;
padding:4px 0;
}
.dk-schema-player-name{
color:#f3f9ff;
font-weight:800;
line-height:1.2;
}
.dk-schema-score{
color:#ffbf2c;
font-size:1.12rem;
min-width:20px;
text-align:right;
}
@media (max-width: 768px){
.dk-view-toggle{
gap:10px;
}
.dk-view-btn{
flex:1 1 180px;
text-align:center;
font-size:.95rem;
padding:11px 14px;
}
.dk-schema-section{
padding:14px;
border-radius:20px;
}
.dk-schema-columns{
grid-auto-columns:minmax(190px, 210px);
gap:12px;
}
.dk-schema-finals-columns{
grid-auto-columns:minmax(210px, 230px);
}
}
/* ===== Breakzi v197: visually aligned Double KO bracket tree ===== */
.dk-schema-wrap-v197 .dk-schema-tree-columns{
gap:22px;
align-items:start;
}
.dk-schema-wrap-v197 .dk-schema-column{
min-width:238px;
}
.dk-schema-wrap-v197 .dk-schema-grid-body{
--dk-schema-row-height:74px;
display:grid;
grid-template-rows:repeat(var(--dk-schema-rows), var(--dk-schema-row-height));
gap:0;
align-items:center;
min-height:calc(var(--dk-schema-rows) * var(--dk-schema-row-height));
}
.dk-schema-wrap-v197 .dk-schema-match{
align-self:center;
position:relative;
}
.dk-schema-wrap-v197 .dk-schema-match::before{
content:"";
position:absolute;
left:-12px;
top:50%;
width:12px;
height:1px;
background:rgba(116,190,220,.26);
}
.dk-schema-wrap-v197 .dk-schema-column:first-child .dk-schema-match::before{
display:none;
}
.dk-schema-wrap-v197 .dk-schema-winners-columns .dk-schema-column:nth-child(2) .dk-schema-match,
.dk-schema-wrap-v197 .dk-schema-winners-columns .dk-schema-column:nth-child(3) .dk-schema-match,
.dk-schema-wrap-v197 .dk-schema-winners-columns .dk-schema-column:nth-child(4) .dk-schema-match,
.dk-schema-wrap-v197 .dk-schema-losers-columns .dk-schema-column:nth-child(3) .dk-schema-match,
.dk-schema-wrap-v197 .dk-schema-losers-columns .dk-schema-column:nth-child(5) .dk-schema-match,
.dk-schema-wrap-v197 .dk-schema-finals-columns .dk-schema-column:nth-child(2) .dk-schema-match{
box-shadow:0 0 0 1px rgba(21,255,147,.13), 0 12px 24px rgba(0,0,0,.16);
}
@media (max-width: 768px){
.dk-schema-wrap-v197 .dk-schema-tree-columns{
gap:14px;
}
.dk-schema-wrap-v197 .dk-schema-column{
min-width:210px;
}
.dk-schema-wrap-v197 .dk-schema-grid-body{
--dk-schema-row-height:70px;
}
}
/* ===== Breakzi v104 direct DK controls ===== */
[data-match^="DK"][data-action]{
pointer-events:auto!important;
touch-action:manipulation!important;
position:relative!important;
z-index:100!important;
opacity:1!important;
cursor:pointer!important;
-webkit-tap-highlight-color:rgba(0,255,166,.25)!important;
}
[data-match^="DK"][data-action="players"]{
background:linear-gradient(135deg,#00ff7a,#00d6c8)!important;
color:#041522!important;
border:0!important;
font-weight:1000!important;
}
.ko-row *{
pointer-events:auto;
}
.ko-row::before,
.ko-row::after,
.admin-action-row::before,
.admin-action-row::after,
.inline-score-actions::before,
.inline-score-actions::after{
pointer-events:none!important;
}
/* ===== v105 Independent DK Controls ===== */
[data-dk-score-button="1"],
[data-dk-players-button="1"]{
pointer-events:auto!important;
touch-action:manipulation!important;
position:relative!important;
z-index:999!important;
cursor:pointer!important;
opacity:1!important;
-webkit-tap-highlight-color:rgba(0,255,166,.25)!important;
}
[data-dk-players-button="1"]{
background:linear-gradient(135deg,#00ff7a,#00d6c8)!important;
color:#031421!important;
border:0!important;
font-weight:1000!important;
}
.dk105-modal{
align-items:center!important;
justify-content:center!important;
z-index:999999!important;
}
.dk105-card{
width:min(560px,calc(100vw - 28px));
max-height:calc(100vh - 100px);
overflow:auto;
border:1px solid rgba(0,255,166,.35);
border-radius:24px;
background:linear-gradient(145deg,#07172b,#0b2239);
color:#fff;
box-shadow:0 26px 80px rgba(0,0,0,.55);
padding:18px;
position:relative;
}
.dk105-close{
position:absolute;
top:12px;
right:12px;
width:46px;
height:46px;
border-radius:50%;
border:1px solid rgba(255,255,255,.18);
background:#081426;
color:#fff;
font-size:30px;
font-weight:1000;
}
.dk105-head span{
color:#00ff9d;
font-weight:1000;
letter-spacing:.12em;
}
.dk105-head h2{
margin:10px 0 6px;
font-size:1.7rem;
}
.dk105-head p{
color:#b6c8d9;
margin:0 0 14px;
font-weight:800;
}
.dk105-match-label{
display:grid;
gap:4px;
padding:12px;
border-radius:16px;
background:rgba(0,255,166,.08);
border:1px solid rgba(0,255,166,.18);
margin-bottom:12px;
}
.dk105-match-label strong{color:#00ff9d}
.dk105-player-box{
display:grid;
gap:8px;
padding:14px;
border-radius:18px;
background:rgba(255,255,255,.055);
margin-bottom:12px;
border:1px solid rgba(255,255,255,.10);
}
.dk105-player-box h3{margin:0}
.dk105-player-box label{
color:#cbd9e7;
font-weight:900;
font-size:.9rem;
}
.dk105-player-box select,
.dk105-player-box input{
min-height:44px;
border-radius:14px;
border:1px solid rgba(255,255,255,.15);
background:#061226;
color:#fff;
font-weight:900;
padding:0 12px;
}
.dk105-save{
width:100%;
min-height:48px;
border:0;
border-radius:16px;
background:linear-gradient(135deg,#00ff7a,#00d6c8);
color:#031421;
font-weight:1000;
font-size:1rem;
}
/* ===== Breakzi v106: labels + results slider like live matches ===== */
/* Bracket View button wording inherits existing style */
.dk-view-btn{
white-space:nowrap!important;
}
/* Matches Results: same sliding logic/feel as Live Matches */
#homeLiveResultsStrip.results-live-style-strip,
#homeLiveResultsStrip{
display:flex!important;
flex-direction:row!important;
flex-wrap:nowrap!important;
gap:14px!important;
width:100%!important;
max-width:100%!important;
overflow-x:auto!important;
overflow-y:hidden!important;
-webkit-overflow-scrolling:touch!important;
scroll-snap-type:x proximity!important;
touch-action:pan-x pan-y!important;
overscroll-behavior-x:contain!important;
animation:none!important;
transform:none!important;
padding:10px 4px 16px!important;
}
#homeLiveResultsStrip.results-live-style-strip::-webkit-scrollbar,
#homeLiveResultsStrip::-webkit-scrollbar{
height:6px!important;
}
#homeLiveResultsStrip.results-live-style-strip::-webkit-scrollbar-thumb,
#homeLiveResultsStrip::-webkit-scrollbar-thumb{
background:rgba(0,255,166,.55)!important;
border-radius:999px!important;
}
.result-live-style-card{
flex:0 0 min(430px,86vw)!important;
scroll-snap-align:start!important;
border-radius:24px!important;
border:1px solid rgba(255,255,255,.14)!important;
background:
radial-gradient(circle at top right,rgba(255,255,255,.10),transparent 36%),
linear-gradient(145deg,rgba(28,55,75,.92),rgba(15,37,57,.96))!important;
box-shadow:inset 5px 0 0 #00ff8a, 0 18px 44px rgba(0,0,0,.28)!important;
padding:18px!important;
min-height:155px!important;
display:flex!important;
flex-direction:column!important;
justify-content:center!important;
gap:12px!important;
}
.result-live-style-meta{
color:#b7c7d7!important;
font-weight:1000!important;
font-size:.9rem!important;
line-height:1.25!important;
text-transform:uppercase!important;
}
.result-live-style-names{
display:grid!important;
grid-template-columns:1fr auto 1fr!important;
align-items:center!important;
gap:14px!important;
}
.result-live-style-names strong{
color:#fff!important;
font-size:1.08rem!important;
line-height:1.08!important;
font-weight:1000!important;
overflow-wrap:anywhere!important;
}
.result-live-style-names strong:last-child{
text-align:right!important;
}
.result-live-style-names b{
color:#ffb21e!important;
font-size:1.7rem!important;
font-weight:1000!important;
white-space:nowrap!important;
}
@media(max-width:760px){
#homeLiveResultsStrip.results-live-style-strip,
#homeLiveResultsStrip{
scrollbar-width:none!important;
padding-left:4px!important;
padding-right:18px!important;
}
#homeLiveResultsStrip.results-live-style-strip::-webkit-scrollbar,
#homeLiveResultsStrip::-webkit-scrollbar{
display:none!important;
}
.result-live-style-card{
flex-basis:86vw!important;
min-width:86vw!important;
max-width:86vw!important;
min-height:150px!important;
}
.result-live-style-names{
grid-template-columns:1fr!important;
gap:7px!important;
}
.result-live-style-names strong:last-child{
text-align:left!important;
}
.result-live-style-names b{
font-size:2rem!important;
}
}
/* ===== Breakzi v107 realtime sync ===== */
#breakziVersionBadge{
z-index:10000000!important;
}
/* ===== Breakzi v108: home promo banner + professional footer ===== */
.home-promo-banner{
margin-top:28px;
display:grid;
grid-template-columns:1.05fr .95fr;
gap:24px;
min-height:420px;
border-radius:34px;
overflow:hidden;
position:relative;
background:
radial-gradient(circle at 14% 18%, rgba(0,245,191,.18), transparent 30%),
linear-gradient(135deg, rgba(2,8,23,.96), rgba(4,18,35,.9));
border:1px solid rgba(255,255,255,.09);
box-shadow:0 30px 80px rgba(2,8,23,.26);
}
.home-promo-copy{
padding:44px 42px;
display:flex;
flex-direction:column;
justify-content:center;
gap:16px;
}
.home-promo-kicker{
display:inline-flex;
width:max-content;
padding:8px 14px;
border-radius:999px;
background:rgba(0,245,191,.12);
color:#00f5bf;
border:1px solid rgba(0,245,191,.24);
font-size:12px;
font-weight:1000;
letter-spacing:2px;
}
.home-promo-copy h2{
margin:0;
color:#fff;
font-size:clamp(30px,3vw,54px);
line-height:.98;
letter-spacing:-1px;
max-width:12ch;
}
.home-promo-copy p{
margin:0;
color:#d7e6f5;
font-size:17px;
line-height:1.8;
max-width:60ch;
}
.home-promo-actions{
display:flex;
flex-wrap:wrap;
gap:14px;
margin-top:8px;
}
.home-promo-visual{
min-height:420px;
position:relative;
overflow:hidden;
border-left:1px solid rgba(255,255,255,.08);
background:
linear-gradient(180deg,rgba(2,8,23,.14),rgba(2,8,23,.68)),
url("breakzi-join-visual.jpg") center center / cover no-repeat,
radial-gradient(circle at 60% 40%, rgba(0,245,191,.24), transparent 30%),
linear-gradient(135deg,#061827,#020817);
}
.home-promo-brand{
position:absolute;
top:50%;
left:50%;
transform:translate(-50%,-50%);
display:flex;
flex-direction:column;
align-items:center;
text-align:center;
gap:12px;
text-shadow:0 0 30px rgba(0,0,0,.45);
}
.home-promo-ball{
width:94px;
height:94px;
display:grid;
place-items:center;
border-radius:30px;
border:2px solid #00f5bf;
color:#fff;
font-size:42px;
font-weight:1000;
box-shadow:0 0 34px rgba(0,245,191,.35);
background:rgba(2,8,23,.25);
backdrop-filter:blur(10px);
}
.home-promo-brand strong{
font-size:30px;
color:#fff;
letter-spacing:12px;
margin-left:12px;
}
.home-promo-brand span{
color:#00f5bf;
letter-spacing:4px;
font-size:12px;
font-weight:1000;
}
.breakzi-footer{
max-width:1280px;
margin:0 auto;
padding:24px 28px 70px;
}
.breakzi-footer-grid{
border-radius:28px;
border:1px solid rgba(255,255,255,.08);
background:
radial-gradient(circle at top right, rgba(0,245,191,.12), transparent 28%),
linear-gradient(135deg,#061827,#091f36 56%,#071a2d);
box-shadow:0 24px 64px rgba(2,8,23,.22);
padding:34px 32px;
display:grid;
grid-template-columns:1.35fr .8fr .8fr .7fr;
gap:28px;
color:#d9e7f6;
}
.footer-logo{
width:180px;
max-width:100%;
display:block;
margin-bottom:16px;
}
.footer-brand-col p{
margin:0;
color:#d0dfef;
line-height:1.8;
font-size:15px;
max-width:42ch;
}
.footer-pills{
display:flex;
flex-wrap:wrap;
gap:10px;
margin-top:18px;
}
.footer-pills span{
padding:8px 12px;
border-radius:999px;
background:rgba(255,255,255,.08);
border:1px solid rgba(255,255,255,.1);
color:#fff;
font-size:11px;
font-weight:1000;
letter-spacing:1px;
}
.footer-links-col,
.footer-meta-col{
display:flex;
flex-direction:column;
gap:10px;
}
.breakzi-footer h4{
margin:0 0 8px;
color:#00f5bf;
font-size:13px;
letter-spacing:1.6px;
text-transform:uppercase;
}
.footer-links-col a,
.footer-links-col span{
color:#d9e7f6;
text-decoration:none;
font-weight:800;
font-size:15px;
opacity:.96;
}
.footer-links-col a:hover{
color:#fff;
}
.footer-meta-col strong{
color:#fff;
font-size:22px;
margin-top:6px;
}
.footer-meta-col small{
color:#bfd0e0;
line-height:1.7;
font-weight:700;
}
@media (max-width:1050px){
.home-promo-banner{
grid-template-columns:1fr;
}
.home-promo-visual{
min-height:320px;
border-left:0;
border-top:1px solid rgba(255,255,255,.08);
}
.breakzi-footer-grid{
grid-template-columns:1fr 1fr;
}
}
@media (max-width:760px){
.home-promo-banner{
border-radius:26px;
margin-top:22px;
}
.home-promo-copy{
padding:28px 22px 8px;
}
.home-promo-copy h2{
max-width:none;
font-size:32px;
}
.home-promo-copy p{
font-size:15px;
line-height:1.7;
}
.home-promo-actions{
flex-direction:column;
}
.home-promo-actions a{
width:100%;
text-align:center;
}
.home-promo-visual{
min-height:250px;
}
.home-promo-ball{
width:72px;
height:72px;
font-size:32px;
border-radius:22px;
}
.home-promo-brand strong{
font-size:22px;
letter-spacing:8px;
margin-left:8px;
}
.home-promo-brand span{
font-size:10px;
letter-spacing:2.6px;
}
.breakzi-footer{
padding:12px 14px 60px;
}
.breakzi-footer-grid{
grid-template-columns:1fr;
padding:26px 20px;
border-radius:22px;
gap:22px;
}
.footer-logo{
width:150px;
}
}
/* ===== v109 true realtime player score sync ===== */
#breakziVersionBadge{z-index:10000000!important;}
/* ===== v110 player-link finished match confirmation popup ===== */
.match-finished-confirm-modal{
z-index:1000001!important;
align-items:center!important;
justify-content:center!important;
padding:18px!important;
background:rgba(2,8,23,.72)!important;
backdrop-filter:blur(12px)!important;
}
.match-finished-confirm-card{
width:min(560px,calc(100vw - 28px));
border-radius:28px;
border:1px solid rgba(0,255,166,.32);
background:
radial-gradient(circle at top right,rgba(0,255,166,.18),transparent 32%),
linear-gradient(145deg,#07182d,#0a2038);
box-shadow:0 28px 90px rgba(0,0,0,.58);
color:#fff;
padding:28px;
position:relative;
text-align:center;
}
.match-finished-close{
position:absolute;
top:14px;
right:14px;
width:44px;
height:44px;
border-radius:50%;
border:1px solid rgba(255,255,255,.18);
background:rgba(255,255,255,.06);
color:#fff;
font-size:30px;
font-weight:1000;
cursor:pointer;
}
.match-finished-icon{
width:76px;
height:76px;
border-radius:24px;
margin:6px auto 16px;
display:grid;
place-items:center;
background:linear-gradient(135deg,#00ff7a,#00d6c8);
color:#041522;
font-size:42px;
font-weight:1000;
box-shadow:0 18px 42px rgba(0,255,166,.24);
}
.match-finished-kicker{
color:#00ff9d;
font-weight:1000;
letter-spacing:.16em;
font-size:.82rem;
}
.match-finished-confirm-card h2{
margin:12px 0 8px;
font-size:clamp(28px,5vw,42px);
line-height:1;
}
.match-finished-confirm-card p{
color:#c8d8e8;
font-weight:800;
line-height:1.55;
margin:0 auto 18px;
max-width:42ch;
}
.match-finished-summary{
margin:18px 0 20px;
padding:16px;
border-radius:20px;
background:rgba(255,255,255,.065);
border:1px solid rgba(255,255,255,.10);
}
.finish-summary-score{
display:grid;
grid-template-columns:1fr auto 1fr;
gap:12px;
align-items:center;
}
.finish-summary-score strong{
color:#fff;
font-size:1rem;
line-height:1.1;
}
.finish-summary-score strong:first-child{
text-align:left;
}
.finish-summary-score strong:last-child{
text-align:right;
}
.finish-summary-score b{
color:#ffb21e;
font-size:1.8rem;
white-space:nowrap;
}
.match-finished-summary small{
display:block;
margin-top:10px;
color:#a8bdcf;
font-weight:900;
}
.match-finished-actions{
display:grid;
grid-template-columns:1fr 1fr;
gap:12px;
}
.match-finished-actions button{
min-height:52px;
border-radius:16px;
font-weight:1000;
cursor:pointer;
border:0;
}
.match-finished-primary{
background:linear-gradient(135deg,#00ff7a,#00d6c8);
color:#041522;
}
.match-finished-secondary{
background:rgba(255,255,255,.08);
border:1px solid rgba(255,255,255,.18)!important;
color:#fff;
}
@media(max-width:640px){
.match-finished-confirm-card{
padding:24px 18px;
border-radius:24px;
}
.finish-summary-score{
grid-template-columns:1fr;
text-align:center;
}
.finish-summary-score strong:first-child,
.finish-summary-score strong:last-child{
text-align:center;
}
.match-finished-actions{
grid-template-columns:1fr;
}
}
/* ===== v111 public token realtime ===== */
#breakziVersionBadge{z-index:10000000!important;}
/* ===== v113 clean hotfix ===== */
#breakziVersionBadge{z-index:10000000!important;}
#playerLinkBox.v113-score-link-box,
.player-link-box.v113-score-link-box,
.player-link-box.show{
display:block!important;
visibility:visible!important;
opacity:1!important;
}
#playerLinkInput, #generatedPlayerLink{
min-height:56px!important;
font-size:14px!important;
font-weight:800!important;
color:#061827!important;
background:#fff!important;
user-select:text!important;
-webkit-user-select:text!important;
}
#copyPlayerLinkBtn{
cursor:pointer!important;
pointer-events:auto!important;
}
/* ===== Breakzi v120 clean button behaviors ===== */
#playerLinkBox.v120-score-link-box input:not(#playerLinkInput){display:none!important;}
#playerLinkBox.v120-score-link-box #playerLinkInput{
display:block!important;
width:100%!important;
box-sizing:border-box!important;
}
.ko-player,.ko-player-name{cursor:default!important;}
.score-mini-btn,.big-score-btn,.runout-btn,.lag-btn,.center-reset-btn,.player-screen-reset{
touch-action:manipulation!important;
}
#breakziVersionBadge{z-index:10000000!important;}
/* ===== Breakzi v121 clean scroll and link fix ===== */
#playerLinkBox.v120-score-link-box input:not(#playerLinkInput){display:none!important;}
/* ===== Breakzi v123 copy link fix ===== */
#breakziVersionBadge{pointer-events:none;}
/* ===== Breakzi v124 participants, draw and open-link button ===== */
.player-link-actions-v124{display:flex;gap:10px;align-items:center;flex-wrap:wrap;margin-top:10px}
.player-link-actions-v124 button,#openPlayerLinkBtn{border:0;border-radius:12px;padding:12px 18px;font-weight:900;cursor:pointer;background:#fff;color:#071b44;box-shadow:0 8px 22px rgba(0,0,0,.18)}
#openPlayerLinkBtn{background:linear-gradient(135deg,#04f27b,#008cff);color:#00162d}
.participants-section-v124{margin:18px 0 24px;padding:22px;border:1px solid rgba(0,255,153,.26);border-radius:24px;background:linear-gradient(145deg,rgba(9,47,45,.92),rgba(9,18,34,.96));box-shadow:0 18px 45px rgba(0,0,0,.28)}
.participants-head-v124{display:flex;justify-content:space-between;gap:16px;align-items:flex-start;margin-bottom:16px}
.participants-head-v124 span{display:block;color:#00ff91;font-size:12px;font-weight:1000;letter-spacing:.12em;margin-bottom:6px}
.participants-head-v124 h3{font-size:28px;margin:0 0 6px;color:#fff}
.participants-head-v124 p,.participants-note-v124{margin:0;color:rgba(255,255,255,.76);font-weight:700;line-height:1.4}
.participants-actions-v124{display:flex;gap:10px;flex-wrap:wrap;justify-content:flex-end}
.participants-actions-v124 button{border:0;border-radius:14px;padding:12px 16px;font-weight:1000;cursor:pointer;background:#fff;color:#071b44}
.participants-actions-v124 #drawParticipantsV124{background:linear-gradient(135deg,#04f27b,#ffe45c);color:#02172c}
.participants-list-v124{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:10px;margin-top:12px}
.participant-chip-v124{display:flex;align-items:center;gap:9px;min-height:48px;padding:10px 12px;border-radius:16px;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.1);color:#fff;overflow:hidden}
.participant-chip-v124 strong{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.participant-chip-v124 small{color:#b9c7d9;white-space:nowrap}
.participant-number-v124{display:inline-flex!important;width:26px;height:26px;border-radius:999px;align-items:center;justify-content:center;margin:0!important;background:#00ff91;color:#042236;font-size:12px!important;font-weight:1000;letter-spacing:0!important;flex:0 0 auto}
.participant-chip-v124 button{border:0;border-radius:10px;padding:7px 9px;font-weight:900;cursor:pointer;background:rgba(255,255,255,.95);color:#061a3a;margin-left:auto}
.participant-chip-v124 button+button{margin-left:0;background:#ffedf0;color:#8a1020}
.participants-empty-v124{padding:16px;border:1px dashed rgba(255,255,255,.18);border-radius:16px;color:#b9c7d9;font-weight:800}
@media(max-width:720px){.participants-head-v124{display:block}.participants-actions-v124{justify-content:flex-start;margin-top:14px}.participants-head-v124 h3{font-size:24px}.participant-chip-v124{flex-wrap:wrap}.participant-chip-v124 button{margin-left:0}}
/* ===== Breakzi v126 clean player database editor ===== */
.participant-editor-v125{position:fixed;inset:0;z-index:99999;background:rgba(0,0,0,.64);display:flex;align-items:center;justify-content:center;padding:18px}
.participant-editor-v125.hidden{display:none!important}
.participant-editor-card-v125{width:min(560px,96vw);background:linear-gradient(145deg,#102c36,#08182b);border:1px solid rgba(0,255,153,.25);border-radius:24px;padding:22px;color:#fff;box-shadow:0 24px 70px rgba(0,0,0,.45);position:relative}
.participant-editor-card-v125 h2{margin:0 0 6px;font-size:26px}
.participant-editor-card-v125 p{margin:0 0 16px;color:#c7d6e5;font-weight:700;line-height:1.4}
.participant-editor-close-v125{position:absolute;right:14px;top:12px;border:0;border-radius:999px;width:34px;height:34px;font-size:24px;font-weight:900;background:rgba(255,255,255,.12);color:#fff;cursor:pointer}
.participant-editor-body-v125{display:grid;gap:10px}
.participant-editor-body-v125 label{font-weight:900;color:#eaf3ff}
.participant-editor-body-v125 select,.participant-editor-body-v125 input{width:100%;border:1px solid rgba(255,255,255,.2);border-radius:14px;background:#fff;color:#071b44;font-weight:800;padding:13px 14px;font-size:15px}
.participant-editor-actions-v125{display:flex;gap:10px;flex-wrap:wrap;margin-top:10px}
.participant-editor-actions-v125 button{border:0;border-radius:14px;padding:12px 18px;font-weight:1000;cursor:pointer;background:#fff;color:#071b44}
.participant-editor-actions-v125 #participantSaveV125{background:linear-gradient(135deg,#04f27b,#ffe45c);color:#061a28}
/* ===== Breakzi v126 clean spectators/player database ===== */
#playerLinkBox:not(.show){display:none!important;}
.participant-chip-v124 small{display:none!important;}
#participantClubV125{display:none!important;}
/* ===== Breakzi v127 verified player badges ===== */
.verified-player-badge-v127{
display:inline-flex;
align-items:center;
justify-content:center;
width:18px;
height:18px;
margin-left:6px;
border-radius:999px;
background:linear-gradient(135deg,#00ff88,#00a8ff);
color:#001b2a;
font-size:12px;
font-weight:900;
line-height:1;
vertical-align:middle;
box-shadow:0 0 12px rgba(0,255,150,.35);
}
.match-player-select option, #participantSelectV125 option, #challengeOpponentSelect option{font-weight:700;}
/* ===== Breakzi v128 verified profiles admin section ===== */
.verified-profiles-section-v128{
margin:22px 0;
padding:18px;
border:1px solid rgba(0,255,153,.35);
border-radius:22px;
background:linear-gradient(135deg,rgba(8,45,46,.9),rgba(9,20,34,.88));
box-shadow:0 20px 45px rgba(0,0,0,.25), inset 0 0 0 1px rgba(255,255,255,.04);
}
.verified-profiles-head-v128{display:flex;align-items:flex-start;justify-content:space-between;gap:14px;margin-bottom:14px}
.verified-profiles-head-v128 span{display:block;color:#00ff99;font-weight:900;font-size:12px;letter-spacing:.16em}
.verified-profiles-head-v128 h3{margin:4px 0;font-size:26px;color:#fff}
.verified-profiles-head-v128 p{margin:0;color:rgba(255,255,255,.72);font-weight:700}
.verified-profiles-head-v128>strong{min-width:44px;height:44px;display:grid;place-items:center;border-radius:999px;background:rgba(0,255,153,.14);border:1px solid rgba(0,255,153,.35);color:#00ff99;font-size:20px}
.verified-profiles-list-v128{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:12px}
.verified-profile-row-v128{display:flex;align-items:center;gap:12px;padding:12px;border-radius:18px;background:rgba(255,255,255,.055);border:1px solid rgba(255,255,255,.08)}
.verified-profile-avatar-v128{width:44px;height:44px;border-radius:999px;overflow:hidden;display:grid;place-items:center;background:linear-gradient(135deg,#00ff99,#0aa7ff);color:#001326;font-weight:1000;flex:0 0 auto}
.verified-profile-avatar-v128 img{width:100%;height:100%;object-fit:cover;display:block}
.verified-profile-info-v128{min-width:0;display:flex;flex-direction:column;gap:2px}
.verified-profile-info-v128 strong{color:#fff;font-size:15px;line-height:1.2}
.verified-profile-info-v128 small{color:rgba(255,255,255,.62);font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:230px}
.verified-profiles-empty-v128{padding:16px;border-radius:16px;background:rgba(255,255,255,.045);color:rgba(255,255,255,.7);font-weight:800;text-align:center}
@media(max-width:640px){.verified-profiles-section-v128{padding:14px;border-radius:18px}.verified-profiles-head-v128 h3{font-size:22px}.verified-profiles-list-v128{grid-template-columns:1fr}}
/* v129: remove Admin Settings button from the header to prevent desktop overlap. */
#adminSettingsBtn,
.admin-settings-btn {
display: none !important;
}
/* v178: legacy inline Score Link panel removed; popup is the only UI. */
.legacy-hidden-player-link, #playerLinkBox.legacy-hidden-player-link { display: none !important; visibility: hidden !important; height: 0 !important; min-height: 0 !important; padding: 0 !important; margin: 0 !important; border: 0 !important; overflow: hidden !important; }
/* ===== Breakzi v183: remove old score control section and verified player UI ===== */
.admin-tools,
#verifiedProfilesV128,
.verified-profiles-section-v128,
.verified-player-badge-v127{
display:none !important;
visibility:hidden !important;
}
/* ===== Breakzi v187: practical mobile/full-screen timer ===== */
body.timer-focus-mode{overflow:hidden;}
body.timer-focus-mode .site-header,
body.timer-focus-mode footer,
body.timer-focus-mode #breakziVersionBadge,
body.timer-focus-mode .timer-intro-card{display:none!important;}
body.timer-focus-mode .timer-section{position:fixed!important;inset:0!important;z-index:9999!important;width:100vw!important;height:100dvh!important;margin:0!important;padding:8px!important;background:radial-gradient(circle at top,rgba(0,255,153,.12),transparent 42%),#04101f!important;overflow:auto!important;}
body.timer-focus-mode .timer-page-shell{display:block!important;width:100%!important;height:100%!important;}
body.timer-focus-mode .timer-main-card{min-height:calc(100dvh - 16px)!important;display:flex!important;flex-direction:column!important;justify-content:center!important;border-radius:28px!important;padding:18px!important;overflow:auto!important;}
body.timer-focus-mode .timer-main-card::before{display:none!important;}
body.timer-focus-mode .timer-exit-fullscreen-btn{display:flex!important;align-items:center;justify-content:center;}
body.timer-focus-mode .timer-card-top{padding-right:58px;margin-bottom:12px!important;}
body.timer-focus-mode .timer-layout-grid{grid-template-columns:minmax(250px,48%) minmax(260px,1fr)!important;gap:16px!important;align-items:center!important;}
body.timer-focus-mode .timer-display-ring{width:min(46vh,390px)!important;max-width:100%!important;}
body.timer-focus-mode .timer-display-value{font-size:clamp(5rem,16vh,9rem)!important;}
body.timer-focus-mode .timer-control-panel{gap:12px!important;}
body.timer-focus-mode .timer-cta,body.timer-focus-mode .timer-ext-btn,body.timer-focus-mode .timer-reset-all-btn{min-height:58px!important;border-radius:18px!important;}
body.timer-focus-mode .timer-side-status-grid{display:none!important;}
@media (max-width:720px){
.timer-page-shell{display:block;}
.timer-intro-card{display:none;}
.timer-main-card{padding:14px!important;border-radius:22px!important;}
.timer-card-top{gap:10px;margin-bottom:10px;}
.timer-card-actions{width:100%;justify-content:space-between;}
.timer-status-pill{padding:9px 12px;font-size:.78rem;}
.timer-fullscreen-btn{padding:10px 13px;font-size:.86rem;}
.timer-layout-grid{gap:12px;}
.timer-display-ring{width:min(230px,66vw)!important;}
.timer-display-value{font-size:3.6rem!important;}
.timer-display-ring small{font-size:.62rem;margin-top:6px;}
.timer-subinfo{font-size:.82rem;line-height:1.25;}
.timer-control-panel{gap:10px;}
.timer-primary-controls,.timer-extensions-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:10px!important;}
.timer-cta,.timer-ext-btn,.timer-reset-all-btn{min-height:50px!important;border-radius:16px!important;font-size:.95rem!important;}
.timer-side-status-grid{display:none!important;}
body.timer-focus-mode .timer-section{padding:6px!important;}
body.timer-focus-mode .timer-main-card{min-height:calc(100dvh - 12px)!important;padding:12px!important;justify-content:flex-start!important;}
body.timer-focus-mode .timer-layout-grid{grid-template-columns:1fr!important;gap:10px!important;}
body.timer-focus-mode .timer-display-ring{width:min(42dvh,76vw)!important;}
body.timer-focus-mode .timer-display-value{font-size:clamp(4.4rem,16dvh,7.2rem)!important;}
body.timer-focus-mode .timer-primary-controls,
body.timer-focus-mode .timer-extensions-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important;}
body.timer-focus-mode .timer-reset-all-btn{min-height:48px!important;}
}
/* ===== Breakzi v189: Reset All visible in full-screen timer ===== */
.timer-fullscreen-reset-all-btn{
display:none;
border:0;
cursor:pointer;
font:inherit;
font-weight:1000;
letter-spacing:.02em;
}
body.timer-focus-mode .timer-fullscreen-reset-all-btn{
display:flex!important;
align-items:center!important;
justify-content:center!important;
position:absolute!important;
right:76px!important;
top:18px!important;
z-index:13!important;
min-height:48px!important;
padding:0 18px!important;
border-radius:999px!important;
color:#08131f!important;
background:linear-gradient(135deg,#ffd257,#ff9f1a)!important;
box-shadow:0 16px 40px rgba(0,0,0,.32)!important;
}
@media (max-width:720px){
body.timer-focus-mode .timer-fullscreen-reset-all-btn{
top:10px!important;
right:58px!important;
min-height:42px!important;
padding:0 12px!important;
font-size:.82rem!important;
}
body.timer-focus-mode .timer-exit-fullscreen-btn{
top:10px!important;
right:10px!important;
width:42px!important;
height:42px!important;
}
body.timer-focus-mode .timer-card-top{
padding-right:168px!important;
}
}
/* ===== Breakzi v190: timer NBA buzzer, TIME at 15, extension called audio ===== */
/* ===== Breakzi v198: real centered Double KO bracket tree ===== */
.dk-schema-wrap-v198 .dk-schema-tree-columns{
gap:28px;
align-items:start;
}
.dk-schema-wrap-v198 .dk-schema-column{
min-width:260px;
}
.dk-schema-wrap-v198 .dk-schema-grid-body{
position:relative;
display:block!important;
min-height:var(--dk-schema-height, 650px)!important;
height:var(--dk-schema-height, 650px)!important;
}
.dk-schema-wrap-v198 .dk-schema-match{
position:absolute!important;
left:0;
right:0;
top:var(--dk-top, 0px)!important;
margin:0!important;
}
.dk-schema-wrap-v198 .dk-schema-match::before{
content:"";
position:absolute;
left:-14px;
top:50%;
width:14px;
height:1px;
background:rgba(116,190,220,.30);
}
.dk-schema-wrap-v198 .dk-schema-column:first-child .dk-schema-match::before{
display:none;
}
.dk-schema-wrap-v198 .dk-schema-column:not(:first-child)::before{
content:"";
position:absolute;
left:-14px;
top:58px;
bottom:14px;
width:1px;
background:linear-gradient(180deg, transparent, rgba(116,190,220,.15), transparent);
pointer-events:none;
}
.dk-schema-wrap-v198 .dk-schema-column{
position:relative;
}
@media (max-width: 768px){
.dk-schema-wrap-v198 .dk-schema-tree-columns{
gap:16px;
}
.dk-schema-wrap-v198 .dk-schema-column{
min-width:220px;
}
}
/* ===== Breakzi v200: real centered bracket alignment ===== */
.dk-schema-wrap-v200 .dk-schema-tree-columns{
display:grid!important;
grid-auto-flow:column!important;
grid-auto-columns:minmax(265px,285px)!important;
gap:34px!important;
align-items:start!important;
min-width:max-content!important;
}
.dk-schema-wrap-v200 .dk-schema-column{
position:relative!important;
min-width:265px!important;
overflow:visible!important;
}
.dk-schema-wrap-v200 .dk-schema-grid-body{
position:relative!important;
display:block!important;
min-height:var(--dk-schema-height, 720px)!important;
height:var(--dk-schema-height, 720px)!important;
overflow:visible!important;
}
.dk-schema-wrap-v200 .dk-schema-match{
position:absolute!important;
left:0!important;
right:0!important;
top:var(--dk-top,0px)!important;
margin:0!important;
min-height:128px!important;
box-sizing:border-box!important;
}
.dk-schema-wrap-v200 .dk-schema-match::before{
content:"";
position:absolute;
left:-18px;
top:50%;
width:18px;
height:2px;
background:rgba(21,255,147,.38);
}
.dk-schema-wrap-v200 .dk-schema-column:first-child .dk-schema-match::before{display:none!important;}
.dk-schema-wrap-v200 .dk-schema-column:not(:first-child)::after{
content:"";
position:absolute;
left:-18px;
top:76px;
bottom:28px;
width:1px;
background:linear-gradient(180deg, transparent, rgba(21,255,147,.20), transparent);
pointer-events:none;
}
@media(max-width:768px){
.dk-schema-wrap-v200 .dk-schema-tree-columns{grid-auto-columns:minmax(230px,245px)!important;gap:20px!important;}
.dk-schema-wrap-v200 .dk-schema-column{min-width:230px!important;}
.dk-schema-wrap-v200 .dk-schema-match{min-height:122px!important;}
}
/* ===== Breakzi v200: force true bracket-tree vertical alignment ===== */
.dk-schema-wrap-v200 .dk-schema-tree-columns{
display:grid!important;
grid-auto-flow:column!important;
grid-auto-columns:minmax(280px,300px)!important;
gap:36px!important;
align-items:start!important;
}
.dk-schema-wrap-v200 .dk-schema-column{
position:relative!important;
min-width:280px!important;
overflow:visible!important;
}
.dk-schema-wrap-v200 .dk-schema-grid-body{
position:relative!important;
display:block!important;
min-height:var(--dk-schema-height, 980px)!important;
height:var(--dk-schema-height, 980px)!important;
overflow:visible!important;
}
.dk-schema-wrap-v200 .dk-schema-match{
position:absolute!important;
top:var(--dk-top, 0px)!important;
left:0!important;
right:0!important;
width:auto!important;
min-height:128px!important;
margin:0!important;
transform:none!important;
}
.dk-schema-wrap-v200 .dk-schema-column:not(:first-child) .dk-schema-match::before{
content:""!important;
position:absolute!important;
left:-22px!important;
top:50%!important;
width:22px!important;
height:2px!important;
background:rgba(21,255,147,.38)!important;
}
/* ===== Breakzi v201: complete replacement bracket renderer ===== */
.dk-tree-wrap-v201{display:flex;flex-direction:column;gap:22px;}
.dk-tree-wrap-v201 .dk-tree-section{
border:1px solid rgba(120,170,200,.18);
border-radius:24px;
padding:18px;
background:linear-gradient(135deg,rgba(8,25,44,.88),rgba(11,37,62,.72));
box-shadow:0 12px 40px rgba(0,0,0,.18);
}
.dk-tree-wrap-v201 .dk-tree-scroll{overflow:auto;-webkit-overflow-scrolling:touch;padding-bottom:10px;}
.dk-tree-wrap-v201 .dk-tree-grid{
--dk-tree-card-w:250px;
--dk-tree-card-h:118px;
--dk-tree-row-h:88px;
display:grid!important;
grid-template-columns:repeat(var(--dk-tree-cols), var(--dk-tree-card-w))!important;
grid-template-rows:46px repeat(var(--dk-tree-rows), var(--dk-tree-row-h))!important;
column-gap:34px!important;
row-gap:0!important;
align-items:center!important;
min-width:calc((var(--dk-tree-card-w) * var(--dk-tree-cols)) + (34px * (var(--dk-tree-cols) - 1)))!important;
padding:0 0 16px 0!important;
}
.dk-tree-wrap-v201 .dk-tree-col-title{
color:#15ff93;
font-weight:900;
text-transform:uppercase;
letter-spacing:.04em;
align-self:end;
padding:0 0 10px 0;
}
.dk-tree-wrap-v201 .dk-tree-card{
position:relative!important;
width:var(--dk-tree-card-w)!important;
min-height:var(--dk-tree-card-h)!important;
margin:0!important;
border-radius:16px;
padding:12px 12px 10px;
background:linear-gradient(180deg,rgba(255,255,255,.06),rgba(255,255,255,.03));
border:1px solid rgba(255,255,255,.08);
box-sizing:border-box;
align-self:center!important;
justify-self:stretch!important;
}
.dk-tree-wrap-v201 .dk-tree-card.finished{border-color:rgba(0,255,160,.45);box-shadow:inset 3px 0 0 rgba(0,255,160,.95);}
.dk-tree-wrap-v201 .dk-tree-card.live{border-color:rgba(255,180,0,.45);box-shadow:inset 3px 0 0 rgba(255,180,0,.95);}
.dk-tree-wrap-v201 .dk-tree-card:not([style*="grid-column:1"])::before{
content:"";
position:absolute;
left:-34px;
top:50%;
width:34px;
height:2px;
background:rgba(21,255,147,.35);
}
.dk-tree-wrap-v201 .dk-tree-card-top{display:flex;justify-content:space-between;gap:8px;align-items:center;margin-bottom:10px;}
.dk-tree-wrap-v201 .dk-tree-card-top strong{color:#fff;font-size:.95rem;}
.dk-tree-wrap-v201 .dk-tree-card-top span{color:#9fbac9;font-size:.78rem;text-align:right;}
.dk-tree-wrap-v201 .dk-tree-player-line{display:flex;justify-content:space-between;gap:12px;align-items:center;padding:4px 0;}
.dk-tree-wrap-v201 .dk-tree-player-line span{color:#f3f9ff;font-weight:800;line-height:1.2;}
.dk-tree-wrap-v201 .dk-tree-player-line b{color:#ffbf2c;font-size:1.12rem;min-width:20px;text-align:right;}
@media(max-width:768px){
.dk-tree-wrap-v201 .dk-tree-grid{--dk-tree-card-w:230px;--dk-tree-row-h:82px;column-gap:24px!important;min-width:calc((var(--dk-tree-card-w) * var(--dk-tree-cols)) + (24px * (var(--dk-tree-cols) - 1)))!important;}
.dk-tree-wrap-v201 .dk-tree-card{min-height:112px!important;}
.dk-tree-wrap-v201 .dk-tree-card:not([style*="grid-column:1"])::before{left:-24px;width:24px;}
}
/* ===== Breakzi v203: Bracket View cleanup + fullscreen overview ===== */
.dk-fullscreen-bracket-btn{
background:linear-gradient(135deg,#ffbf2c,#ff7a18)!important;
color:#061427!important;
border-color:rgba(255,191,44,.65)!important;
box-shadow:0 0 24px rgba(255,191,44,.18);
}
.dk-bracket-fullscreen-canvas{
display:flex;
flex-direction:column;
gap:22px;
transform-origin:top left;
}
.dk-tree-wrap-v201:fullscreen,
.dk-tree-wrap-v201.dk-bracket-fullscreen-active{
width:100vw!important;
height:100vh!important;
max-width:none!important;
max-height:none!important;
overflow:auto!important;
padding:14px!important;
margin:0!important;
background:#04111f!important;
box-sizing:border-box!important;
gap:10px!important;
}
.dk-tree-wrap-v201:fullscreen .dk-schema-readonly-note,
.dk-tree-wrap-v201.dk-bracket-fullscreen-active .dk-schema-readonly-note{
margin:0 0 8px!important;
font-size:.82rem!important;
color:#d8f6ff!important;
}
.dk-tree-wrap-v201:fullscreen .dk-bracket-fullscreen-canvas,
.dk-tree-wrap-v201.dk-bracket-fullscreen-active .dk-bracket-fullscreen-canvas{
display:grid!important;
grid-template-columns:max-content max-content max-content!important;
gap:10px!important;
transform:scale(var(--dk-overview-scale,1));
transform-origin:top left;
width:max-content!important;
}
.dk-tree-wrap-v201:fullscreen .dk-tree-section,
.dk-tree-wrap-v201.dk-bracket-fullscreen-active .dk-tree-section{
padding:8px!important;
border-radius:14px!important;
box-shadow:none!important;
background:linear-gradient(135deg,rgba(8,25,44,.96),rgba(11,37,62,.9))!important;
}
.dk-tree-wrap-v201:fullscreen .dk-schema-section-head,
.dk-tree-wrap-v201.dk-bracket-fullscreen-active .dk-schema-section-head{
font-size:.78rem!important;
margin-bottom:4px!important;
}
.dk-tree-wrap-v201:fullscreen .dk-tree-scroll,
.dk-tree-wrap-v201.dk-bracket-fullscreen-active .dk-tree-scroll{
overflow:visible!important;
padding-bottom:0!important;
}
.dk-tree-wrap-v201:fullscreen .dk-tree-grid,
.dk-tree-wrap-v201.dk-bracket-fullscreen-active .dk-tree-grid{
--dk-tree-card-w:148px!important;
--dk-tree-card-h:56px!important;
--dk-tree-row-h:37px!important;
grid-template-rows:24px repeat(var(--dk-tree-rows), var(--dk-tree-row-h))!important;
column-gap:10px!important;
min-width:calc((var(--dk-tree-card-w) * var(--dk-tree-cols)) + (10px * (var(--dk-tree-cols) - 1)))!important;
padding:0!important;
}
.dk-tree-wrap-v201:fullscreen .dk-tree-col-title,
.dk-tree-wrap-v201.dk-bracket-fullscreen-active .dk-tree-col-title{
font-size:.58rem!important;
padding:0 0 3px!important;
letter-spacing:.02em!important;
}
.dk-tree-wrap-v201:fullscreen .dk-tree-card,
.dk-tree-wrap-v201.dk-bracket-fullscreen-active .dk-tree-card{
min-height:var(--dk-tree-card-h)!important;
border-radius:9px!important;
padding:5px 6px!important;
}
.dk-tree-wrap-v201:fullscreen .dk-tree-card:not([style*="grid-column:1"])::before,
.dk-tree-wrap-v201.dk-bracket-fullscreen-active .dk-tree-card:not([style*="grid-column:1"])::before{
left:-10px!important;
width:10px!important;
}
.dk-tree-wrap-v201:fullscreen .dk-tree-card-top,
.dk-tree-wrap-v201.dk-bracket-fullscreen-active .dk-tree-card-top{
gap:4px!important;
margin-bottom:2px!important;
}
.dk-tree-wrap-v201:fullscreen .dk-tree-card-top strong,
.dk-tree-wrap-v201.dk-bracket-fullscreen-active .dk-tree-card-top strong{
font-size:.58rem!important;
}
.dk-tree-wrap-v201:fullscreen .dk-tree-card-top span,
.dk-tree-wrap-v201.dk-bracket-fullscreen-active .dk-tree-card-top span{
font-size:.48rem!important;
}
.dk-tree-wrap-v201:fullscreen .dk-tree-player-line,
.dk-tree-wrap-v201.dk-bracket-fullscreen-active .dk-tree-player-line{
gap:4px!important;
padding:1px 0!important;
}
.dk-tree-wrap-v201:fullscreen .dk-tree-player-line span,
.dk-tree-wrap-v201.dk-bracket-fullscreen-active .dk-tree-player-line span{
font-size:.54rem!important;
line-height:1.05!important;
white-space:nowrap!important;
overflow:hidden!important;
text-overflow:ellipsis!important;
}
.dk-tree-wrap-v201:fullscreen .dk-tree-player-line b,
.dk-tree-wrap-v201.dk-bracket-fullscreen-active .dk-tree-player-line b{
font-size:.6rem!important;
min-width:12px!important;
}
@media(max-width:768px){
.dk-tree-wrap-v201:fullscreen .dk-bracket-fullscreen-canvas,
.dk-tree-wrap-v201.dk-bracket-fullscreen-active .dk-bracket-fullscreen-canvas{
grid-template-columns:max-content max-content max-content!important;
gap:8px!important;
}
.dk-tree-wrap-v201:fullscreen .dk-tree-grid,
.dk-tree-wrap-v201.dk-bracket-fullscreen-active .dk-tree-grid{
--dk-tree-card-w:136px!important;
--dk-tree-row-h:35px!important;
column-gap:8px!important;
min-width:calc((var(--dk-tree-card-w) * var(--dk-tree-cols)) + (8px * (var(--dk-tree-cols) - 1)))!important;
}
.dk-tree-wrap-v201:fullscreen .dk-tree-card:not([style*="grid-column:1"])::before,
.dk-tree-wrap-v201.dk-bracket-fullscreen-active .dk-tree-card:not([style*="grid-column:1"])::before{
left:-8px!important;
width:8px!important;
}
}
/* ===== Breakzi v205: Bracket View score popup controls ===== */
.dk-tree-score-open{
border:0!important;
border-radius:999px!important;
padding:5px 9px!important;
background:linear-gradient(135deg,#15ff93,#00b7ff)!important;
color:#04111f!important;
font-size:.68rem!important;
font-weight:1000!important;
line-height:1!important;
cursor:pointer!important;
box-shadow:0 6px 16px rgba(0,0,0,.2)!important;
touch-action:manipulation!important;
white-space:nowrap!important;
}
.dk-tree-score-open:active{transform:scale(.96)}
.dk-bracket-score-modal-v205{
position:fixed!important;
inset:0!important;
z-index:999999!important;
display:grid!important;
place-items:center!important;
padding:18px!important;
background:rgba(2,9,20,.72)!important;
backdrop-filter:blur(8px)!important;
}
.dk-tree-wrap-v201:fullscreen .dk-bracket-score-modal-v205,
.dk-tree-wrap-v201.dk-bracket-fullscreen-active .dk-bracket-score-modal-v205{
position:absolute!important;
}
.dk-bracket-score-card-v205{
width:min(680px,100%)!important;
border-radius:28px!important;
border:1px solid rgba(255,255,255,.16)!important;
background:linear-gradient(145deg,#071a33,#0f3152 60%,#071a33)!important;
color:white!important;
box-shadow:0 28px 80px rgba(0,0,0,.45)!important;
padding:22px!important;
position:relative!important;
}
.dk-bracket-score-close-v205{
position:absolute!important;
right:16px!important;
top:12px!important;
width:40px!important;
height:40px!important;
border-radius:999px!important;
border:1px solid rgba(255,255,255,.2)!important;
background:rgba(255,255,255,.08)!important;
color:#fff!important;
font-size:30px!important;
line-height:34px!important;
cursor:pointer!important;
}
.dk-bracket-score-head-v205{display:flex!important;align-items:center!important;justify-content:space-between!important;gap:16px!important;margin:0 44px 18px 0!important;}
.dk-bracket-score-head-v205 strong{font-size:1.35rem!important;color:#fff!important;font-weight:1000!important;}
.dk-bracket-score-head-v205 span{color:#15ff93!important;font-weight:1000!important;text-transform:uppercase!important;letter-spacing:.04em!important;}
.dk-bracket-score-vs-v205{display:grid!important;grid-template-columns:1fr auto 1fr!important;gap:16px!important;align-items:stretch!important;}
.dk-bracket-score-vs-v205 section{
display:grid!important;
gap:12px!important;
place-items:center!important;
padding:18px!important;
border-radius:22px!important;
background:rgba(255,255,255,.07)!important;
border:1px solid rgba(255,255,255,.1)!important;
}
.dk-bracket-score-name-v205{min-height:42px!important;display:flex!important;align-items:center!important;text-align:center!important;font-weight:1000!important;color:#f5fbff!important;line-height:1.15!important;}
.dk-bracket-score-number-v205{font-size:clamp(48px,11vw,84px)!important;line-height:1!important;color:#ffbf2c!important;font-weight:1000!important;text-shadow:0 4px 22px rgba(255,191,44,.22)!important;}
.dk-bracket-score-btn-v205{
width:min(150px,100%)!important;
min-height:58px!important;
border:0!important;
border-radius:18px!important;
color:white!important;
font-size:2.2rem!important;
font-weight:1000!important;
cursor:pointer!important;
touch-action:manipulation!important;
}
.dk-bracket-score-btn-v205.plus{background:linear-gradient(135deg,#009750,#15ff93)!important;}
.dk-bracket-score-btn-v205.minus{background:linear-gradient(135deg,#d81e2d,#ff6b7a)!important;}
.dk-bracket-score-btn-v205:active{transform:scale(.97)}
.dk-bracket-score-divider-v205{align-self:center!important;color:#9fbac9!important;font-weight:1000!important;letter-spacing:.12em!important;}
.dk-bracket-score-reset-v205{
width:100%!important;
margin-top:16px!important;
border:1px solid rgba(255,255,255,.16)!important;
border-radius:16px!important;
padding:14px 18px!important;
background:rgba(255,255,255,.08)!important;
color:#fff!important;
font-weight:1000!important;
cursor:pointer!important;
}
@media(max-width:640px){
.dk-tree-score-open{font-size:.62rem!important;padding:5px 7px!important;}
.dk-bracket-score-modal-v205{padding:10px!important;}
.dk-bracket-score-card-v205{padding:18px 14px!important;border-radius:22px!important;}
.dk-bracket-score-vs-v205{grid-template-columns:1fr!important;gap:10px!important;}
.dk-bracket-score-divider-v205{display:none!important;}
.dk-bracket-score-vs-v205 section{padding:14px!important;}
.dk-bracket-score-btn-v205{min-height:52px!important;font-size:1.9rem!important;}
.dk-bracket-score-head-v205{display:block!important;margin:0 42px 14px 0!important;}
.dk-bracket-score-head-v205 span{display:block!important;margin-top:4px!important;}
}
/* v207 direct tournament links */
.share-tournament-link-v207{
border:0;
border-radius:16px;
padding:12px 16px;
background:linear-gradient(135deg,#09277d,#007a70);
color:#fff;
font-weight:900;
letter-spacing:.01em;
cursor:pointer;
box-shadow:0 10px 24px rgba(9,39,93,.18);
}
.share-tournament-link-v207:active{transform:translateY(1px)}
.copy-tournament-link-status-v207{
display:inline-flex;
align-items:center;
min-height:24px;
font-size:12px;
font-weight:800;
color:#50607f;
word-break:break-all;
}
@media(max-width:720px){
.share-tournament-link-v207{width:100%;}
.copy-tournament-link-status-v207{width:100%;}
}
/* ===== v212 schedule layout, French day display, no tournament copy button ===== */
.share-tournament-link-v207,
.copy-tournament-link-status-v207,
[data-copy-tournament-link-v207],
#copyTournamentLinkStatusV207{
display:none!important;
}
.ko-row{
grid-template-columns:74px minmax(190px,1.35fr) 66px 64px 66px minmax(190px,1.35fr) minmax(138px,auto) minmax(104px,auto) minmax(250px,auto)!important;
column-gap:0!important;
align-items:stretch!important;
}
.ko-time,
.ko-table{
display:flex!important;
align-items:center!important;
min-height:100%!important;
min-width:0!important;
padding:0 10px!important;
overflow:visible!important;
text-overflow:clip!important;
white-space:nowrap!important;
line-height:1.12!important;
font-size:13px!important;
font-weight:900!important;
}
.ko-time{
justify-content:flex-start!important;
word-spacing:-1px!important;
}
.ko-table{
justify-content:center!important;
}
.ko-side-actions{
min-width:250px!important;
padding:0 10px!important;
overflow:visible!important;
}
.admin-action-row{
flex-wrap:nowrap!important;
gap:8px!important;
}
.side-action-btn,
.score-link-btn,
.schedule-link-btn{
min-width:84px!important;
padding:7px 9px!important;
font-size:11px!important;
}
.schedule-link-btn{min-width:92px!important;}
@media(max-width:1150px){
.ko-row{
grid-template-columns:64px minmax(160px,1.15fr) 54px 56px 54px minmax(160px,1.15fr) minmax(120px,auto) 92px minmax(220px,auto)!important;
}
.ko-time,.ko-table{font-size:12px!important;padding:0 8px!important;}
.ko-side-actions{min-width:220px!important;}
.side-action-btn,.score-link-btn,.schedule-link-btn{min-width:74px!important;font-size:10px!important;padding:6px 7px!important;}
}
@media(max-width:850px){
.ko-row{
display:grid!important;
grid-template-columns:56px 1fr 44px 48px 44px 1fr!important;
grid-template-areas:
"id playerA scoreA reset scoreB playerB"
"time time time table table table"
"actions actions actions actions actions actions"!important;
}
.ko-id{grid-area:id!important;}
.ko-row>.ko-player:nth-child(2){grid-area:playerA!important;}
.ko-row>.ko-score:nth-child(3){grid-area:scoreA!important;}
.ko-center-reset{grid-area:reset!important;}
.ko-row>.ko-score:nth-child(5){grid-area:scoreB!important;}
.ko-row>.ko-player:nth-child(6){grid-area:playerB!important;}
.ko-time{
grid-area:time!important;
white-space:normal!important;
padding:9px 10px!important;
background:rgba(0,0,0,.10)!important;
}
.ko-table{
grid-area:table!important;
padding:9px 10px!important;
background:rgba(0,0,0,.10)!important;
justify-content:flex-end!important;
}
.ko-side-actions{
grid-area:actions!important;
width:100%!important;
min-width:0!important;
max-width:none!important;
justify-content:center!important;
padding:8px 10px 12px!important;
}
.admin-action-row{flex-wrap:wrap!important;justify-content:center!important;}
}
/* ===== v213 mobile scroll guard helpers ===== */
.players-link-btn[data-dk-players-button="1"]{touch-action:pan-y;}
.player-badges .runout-pill{white-space:nowrap;}
/* ===== Breakzi v214: bigger fullscreen bracket overview ===== */
.dk-tree-wrap-v201:fullscreen,
.dk-tree-wrap-v201.dk-bracket-fullscreen-active{
padding:8px!important;
overflow:auto!important;
}
.dk-tree-wrap-v201:fullscreen .dk-schema-readonly-note,
.dk-tree-wrap-v201.dk-bracket-fullscreen-active .dk-schema-readonly-note{
margin:0 0 6px!important;
font-size:.95rem!important;
}
.dk-tree-wrap-v201:fullscreen .dk-bracket-fullscreen-canvas,
.dk-tree-wrap-v201.dk-bracket-fullscreen-active .dk-bracket-fullscreen-canvas{
gap:8px!important;
}
.dk-tree-wrap-v201:fullscreen .dk-tree-section,
.dk-tree-wrap-v201.dk-bracket-fullscreen-active .dk-tree-section{
padding:9px!important;
min-height:calc(100vh - 58px)!important;
}
.dk-tree-wrap-v201:fullscreen .dk-schema-section-head,
.dk-tree-wrap-v201.dk-bracket-fullscreen-active .dk-schema-section-head{
font-size:.86rem!important;
margin-bottom:6px!important;
}
.dk-tree-wrap-v201:fullscreen .dk-tree-grid,
.dk-tree-wrap-v201.dk-bracket-fullscreen-active .dk-tree-grid{
--dk-tree-card-w:154px!important;
--dk-tree-card-h:70px!important;
--dk-tree-row-h:48px!important;
grid-template-rows:28px repeat(var(--dk-tree-rows), var(--dk-tree-row-h))!important;
column-gap:10px!important;
min-width:calc((var(--dk-tree-card-w) * var(--dk-tree-cols)) + (10px * (var(--dk-tree-cols) - 1)))!important;
}
.dk-tree-wrap-v201:fullscreen .dk-tree-col-title,
.dk-tree-wrap-v201.dk-bracket-fullscreen-active .dk-tree-col-title{
font-size:.66rem!important;
}
.dk-tree-wrap-v201:fullscreen .dk-tree-card,
.dk-tree-wrap-v201.dk-bracket-fullscreen-active .dk-tree-card{
min-height:var(--dk-tree-card-h)!important;
padding:7px 7px!important;
border-radius:10px!important;
}
.dk-tree-wrap-v201:fullscreen .dk-tree-card-top strong,
.dk-tree-wrap-v201.dk-bracket-fullscreen-active .dk-tree-card-top strong{
font-size:.68rem!important;
}
.dk-tree-wrap-v201:fullscreen .dk-tree-card-top span,
.dk-tree-wrap-v201.dk-bracket-fullscreen-active .dk-tree-card-top span{
font-size:.55rem!important;
line-height:1.05!important;
}
.dk-tree-wrap-v201:fullscreen .dk-tree-player-line,
.dk-tree-wrap-v201.dk-bracket-fullscreen-active .dk-tree-player-line{
padding:2px 0!important;
}
.dk-tree-wrap-v201:fullscreen .dk-tree-player-line span,
.dk-tree-wrap-v201.dk-bracket-fullscreen-active .dk-tree-player-line span{
font-size:.66rem!important;
line-height:1.12!important;
}
.dk-tree-wrap-v201:fullscreen .dk-tree-player-line b,
.dk-tree-wrap-v201.dk-bracket-fullscreen-active .dk-tree-player-line b{
font-size:.72rem!important;
}
.dk-tree-wrap-v201:fullscreen .dk-tree-score-open,
.dk-tree-wrap-v201.dk-bracket-fullscreen-active .dk-tree-score-open{
font-size:.62rem!important;
padding:5px 9px!important;
}
@media(min-width:1200px){
.dk-tree-wrap-v201:fullscreen .dk-tree-grid,
.dk-tree-wrap-v201.dk-bracket-fullscreen-active .dk-tree-grid{
--dk-tree-card-w:160px!important;
--dk-tree-card-h:74px!important;
--dk-tree-row-h:50px!important;
}
}
@media(max-width:768px){
.dk-tree-wrap-v201:fullscreen .dk-tree-section,
.dk-tree-wrap-v201.dk-bracket-fullscreen-active .dk-tree-section{
min-height:auto!important;
}
.dk-tree-wrap-v201:fullscreen .dk-tree-grid,
.dk-tree-wrap-v201.dk-bracket-fullscreen-active .dk-tree-grid{
--dk-tree-card-w:146px!important;
--dk-tree-card-h:66px!important;
--dk-tree-row-h:45px!important;
}
}
/* ===== v217 no visible version badge ===== */
#breakziVersionBadge{display:none!important;visibility:hidden!important;opacity:0!important;pointer-events:none!important;}
/* ===== v219 remove blank Double KO round headers ===== */
@media(max-width:850px){
#knockoutBoard,
.knockout-board{
width:100%!important;
max-width:100%!important;
overflow:visible!important;
}
.round-block{
width:100%!important;
max-width:100%!important;
}
.ko-row{
display:grid!important;
width:100%!important;
max-width:100%!important;
min-width:0!important;
grid-template-columns:54px minmax(0,1fr) 56px!important;
grid-template-areas:
"id playerA scoreA"
"id playerB scoreB"
"time time table"
"reset reset reset"
"actions actions actions"!important;
gap:0!important;
align-items:stretch!important;
margin:0 0 14px!important;
padding:0!important;
overflow:hidden!important;
border-radius:18px!important;
}
.ko-id{
grid-area:id!important;
width:54px!important;
min-width:54px!important;
height:auto!important;
min-height:112px!important;
padding:0 4px!important;
display:flex!important;
align-items:center!important;
justify-content:center!important;
text-align:center!important;
line-height:1.08!important;
}
.ko-row > .ko-player:nth-child(2){grid-area:playerA!important;}
.ko-row > .ko-score:nth-child(3){grid-area:scoreA!important;}
.ko-row > .ko-center-reset{grid-area:reset!important;}
.ko-row > .ko-score:nth-child(5){grid-area:scoreB!important;}
.ko-row > .ko-player:nth-child(6){grid-area:playerB!important;}
.ko-player{
width:100%!important;
max-width:100%!important;
min-width:0!important;
min-height:56px!important;
padding:10px 10px!important;
display:flex!important;
align-items:center!important;
justify-content:flex-start!important;
gap:8px!important;
overflow:hidden!important;
}
.ko-player-main{
display:flex!important;
align-items:center!important;
gap:8px!important;
min-width:0!important;
flex:1 1 auto!important;
width:auto!important;
max-width:100%!important;
}
.ko-player-name{
display:block!important;
min-width:0!important;
max-width:100%!important;
white-space:normal!important;
overflow:visible!important;
text-overflow:clip!important;
word-break:normal!important;
overflow-wrap:break-word!important;
hyphens:none!important;
font-size:18px!important;
line-height:1.12!important;
font-weight:1000!important;
}
.flag{
flex:0 0 25px!important;
width:25px!important;
min-width:25px!important;
height:18px!important;
}
.inline-score-actions{
flex:0 0 auto!important;
margin-left:6px!important;
display:flex!important;
gap:4px!important;
}
.score-mini-btn{
width:25px!important;
min-width:25px!important;
height:25px!important;
min-height:25px!important;
font-size:15px!important;
line-height:1!important;
}
.ko-score{
width:56px!important;
min-width:56px!important;
min-height:56px!important;
padding:0!important;
display:flex!important;
align-items:center!important;
justify-content:center!important;
font-size:28px!important;
font-weight:1000!important;
}
.ko-time,
.ko-table{
min-height:44px!important;
padding:10px 12px!important;
display:flex!important;
align-items:center!important;
white-space:normal!important;
overflow:visible!important;
text-overflow:clip!important;
font-size:14px!important;
line-height:1.15!important;
background:rgba(0,0,0,.10)!important;
}
.ko-time{
grid-area:time!important;
justify-content:flex-start!important;
}
.ko-table{
grid-area:table!important;
justify-content:flex-end!important;
text-align:right!important;
}
.ko-time::before{
content:"Time: "!important;
color:#ffb21e!important;
font-weight:1000!important;
margin-right:2px!important;
}
.ko-table::before{
content:"Table: "!important;
color:#ffb21e!important;
font-weight:1000!important;
margin-right:2px!important;
}
.ko-center-reset{
padding:8px 10px 0!important;
display:flex!important;
align-items:center!important;
justify-content:center!important;
background:rgba(0,0,0,.08)!important;
}
.ko-side-actions{
grid-area:actions!important;
width:100%!important;
min-width:0!important;
max-width:100%!important;
padding:8px 10px 12px!important;
display:flex!important;
align-items:center!important;
justify-content:center!important;
flex-wrap:wrap!important;
gap:8px!important;
background:rgba(0,0,0,.08)!important;
}
.admin-action-row{
width:100%!important;
display:flex!important;
flex-wrap:wrap!important;
justify-content:center!important;
gap:8px!important;
}
.side-action-btn,
.score-link-btn,
.schedule-link-btn,
.ko-side-actions .watch-live-btn{
min-width:0!important;
width:auto!important;
max-width:100%!important;
min-height:34px!important;
padding:7px 11px!important;
font-size:12px!important;
white-space:nowrap!important;
}
}
@media(max-width:430px){
.ko-row{
grid-template-columns:50px minmax(0,1fr) 50px!important;
grid-template-areas:
"id playerA scoreA"
"id playerB scoreB"
"time time time"
"table table table"
"reset reset reset"
"actions actions actions"!important;
}
.ko-id{
width:50px!important;
min-width:50px!important;
font-size:15px!important;
}
.ko-player{
min-height:58px!important;
padding:10px 8px!important;
}
.ko-player-name{
font-size:16px!important;
line-height:1.12!important;
}
.flag{
flex-basis:23px!important;
width:23px!important;
min-width:23px!important;
height:16px!important;
}
.inline-score-actions{
gap:3px!important;
margin-left:4px!important;
}
.score-mini-btn{
width:23px!important;
min-width:23px!important;
height:23px!important;
min-height:23px!important;
font-size:14px!important;
}
.ko-score{
width:50px!important;
min-width:50px!important;
min-height:58px!important;
font-size:25px!important;
}
.ko-table{
justify-content:flex-start!important;
text-align:left!important;
}
}
/* ===== v220 version badge number only ===== */
#breakziVersionBadge{
display:block!important;
visibility:visible!important;
opacity:.82!important;
pointer-events:none!important;
position:fixed!important;
right:10px!important;
bottom:10px!important;
z-index:10000000!important;
padding:5px 9px!important;
border-radius:999px!important;
background:rgba(0,0,0,.58)!important;
color:#90ffd0!important;
font:800 12px system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif!important;
line-height:1!important;
}
/* ===== v235 OBS live row sync ===== */
.ko-player,
.ko-player-name,
.dk-tree-player-line[data-player],
.dk-tree-player-line[data-player] span{
cursor:pointer!important;
}
.dk-tree-player-line.player-selected{
background:#ff9f1c!important;
color:#fff!important;
border-radius:7px!important;
box-shadow:0 0 0 2px rgba(255,159,28,.35)!important;
}
.dk-tree-card.player-row-focus{
outline:2px solid rgba(255,159,28,.85)!important;
outline-offset:2px!important;
}
.ko-player.player-selected .ko-player-name,
.dk-tree-player-line.player-selected span,
.dk-tree-player-line.player-selected b{
color:#fff!important;
}
/* ===== v224 OBS browser-source scoreboard overlay ===== */
body.obs-overlay-mode-v224{background:transparent!important;overflow:hidden!important;margin:0!important;}
body.obs-overlay-mode-v224 > :not(#breakziObsOverlayV224){display:none!important;}
#breakziObsOverlayV224{display:block!important;position:fixed!important;inset:0!important;background:transparent!important;z-index:2147483647!important;font-family:Inter,Roboto,Arial,sans-serif;color:#fff;pointer-events:none;}
.obs-scoreboard-v224{position:absolute;left:50%;bottom:42px;transform:translateX(-50%);width:min(1680px,92vw);height:138px;background:linear-gradient(180deg,rgba(31,31,33,.96),rgba(10,10,12,.96));border-top:4px solid #224bff;border-bottom:4px solid #224bff;box-shadow:0 0 0 1px rgba(255,255,255,.18),0 18px 44px rgba(0,0,0,.58);overflow:hidden;text-transform:uppercase;}
.obs-scoreboard-v224:before{content:"";position:absolute;left:0;right:0;top:4px;height:3px;background:linear-gradient(90deg,#204cff,#f225d7,#05ff8c,#204cff);opacity:.9;}
.obs-scoreboard-v224:after{content:"";position:absolute;left:10%;right:10%;bottom:31px;height:3px;background:linear-gradient(90deg,#204cff,#05ff8c,#f225d7,#204cff);opacity:.85;}
.obs-score-main-v224{height:92px;display:grid;grid-template-columns:minmax(0,1fr) 108px 128px 108px minmax(0,1fr);align-items:center;padding:16px 34px 4px;gap:18px;}
.obs-player-v224{min-width:0;display:flex;align-items:center;height:100%;}
.obs-player-left-v224{justify-content:flex-end;text-align:right;}.obs-player-right-v224{justify-content:flex-start;text-align:left;}
.obs-player-name-v224{font-size:28px;font-weight:1000;letter-spacing:.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;text-shadow:0 2px 8px rgba(0,0,0,.7);}
.obs-scorebox-v224{height:64px;display:grid;place-items:center;font-size:58px;line-height:1;font-weight:1000;background:rgba(255,255,255,.05);border-radius:10px;color:#fff;text-shadow:0 2px 8px rgba(0,0,0,.65);}
.obs-racebox-v224{height:64px;display:grid;place-items:center;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.16);border-radius:10px;}
.obs-racebox-v224 small{font-size:12px;letter-spacing:1.8px;color:#dfe8ff;font-weight:900;line-height:1;}.obs-racebox-v224 strong{font-size:40px;line-height:1;color:#fff;font-weight:1000;}
.obs-score-footer-v224{height:42px;display:flex;align-items:center;justify-content:center;gap:24px;padding:0 26px;font-size:18px;font-weight:1000;letter-spacing:.6px;color:#f5f7ff;}
.obs-score-footer-v224 span{white-space:nowrap;}.obs-score-footer-v224 span:not(:last-child)::after{content:"•";margin-left:24px;color:#fff;opacity:.9;}
.obs-winner-v224{color:#ffb124!important;text-shadow:0 0 18px rgba(255,177,36,.32);}
.obs-scoreboard-error-v224{height:95px;display:flex;align-items:center;justify-content:center;gap:24px;font-size:28px;font-weight:1000;}
.obs-link-btn-v224,.obs-tree-link-btn-v224{background:linear-gradient(135deg,#0df0a2,#0ba4ff)!important;color:#03152a!important;}
@media(max-width:900px){.obs-scoreboard-v224{width:96vw;height:116px;bottom:22px}.obs-score-main-v224{height:78px;grid-template-columns:minmax(0,1fr) 70px 82px 70px minmax(0,1fr);gap:8px;padding:12px 12px 2px}.obs-player-name-v224{font-size:18px}.obs-scorebox-v224{height:52px;font-size:42px}.obs-racebox-v224{height:52px}.obs-racebox-v224 strong{font-size:30px}.obs-score-footer-v224{height:34px;font-size:12px;gap:10px}.obs-score-footer-v224 span:not(:last-child)::after{margin-left:10px}}
/* ===== v225 OBS button popup fix ===== */
.obs-link-popup-backdrop-v225{position:fixed;inset:0;z-index:999999;background:rgba(0,8,18,.72);display:flex;align-items:center;justify-content:center;padding:20px;}
.obs-link-popup-v225{width:min(760px,94vw);background:linear-gradient(180deg,#102436,#071522);border:1px solid rgba(13,240,162,.38);border-radius:24px;box-shadow:0 24px 80px rgba(0,0,0,.55);padding:28px;color:#fff;position:relative;font-family:inherit;}
.obs-link-popup-v225 h3{margin:0 0 10px;font-size:30px;font-weight:1000;color:#fff;}
.obs-link-popup-v225 p{margin:0 0 18px;color:#c7d3df;font-size:16px;font-weight:800;line-height:1.4;}
.obs-link-popup-close-v225{position:absolute;top:14px;right:16px;border:0;background:transparent;color:#fff;font-size:34px;font-weight:900;cursor:pointer;line-height:1;}
.obs-link-popup-input-v225{width:100%;box-sizing:border-box;border:1px solid rgba(255,255,255,.18);background:#eef3f8;color:#071522;border-radius:14px;padding:14px 16px;font-size:16px;font-weight:900;outline:none;}
.obs-link-popup-actions-v225{display:flex;gap:14px;justify-content:flex-end;margin-top:18px;flex-wrap:wrap;}
.obs-link-copy-v225,.obs-link-open-v225{border:0;border-radius:14px;padding:13px 18px;font-size:16px;font-weight:1000;cursor:pointer;}
.obs-link-copy-v225{background:#0df0a2;color:#04151d;}.obs-link-open-v225{background:#ffffff;color:#092047;}
@media(max-width:640px){.obs-link-popup-v225{padding:22px}.obs-link-popup-v225 h3{font-size:24px}.obs-link-popup-actions-v225{justify-content:stretch}.obs-link-copy-v225,.obs-link-open-v225{width:100%;}}
/* ===== v250 ranking rank visibility fix ===== */
/* ===== v252 player history from rankings ===== */
@keyframes breakziScoreChangePopV240{
0%{transform:scale(1);filter:brightness(1);text-shadow:none;}
28%{transform:scale(1.34);filter:brightness(1.35);text-shadow:0 0 14px rgba(255,184,45,.95),0 0 26px rgba(0,238,122,.55);}
62%{transform:scale(.94);filter:brightness(1.12);}
100%{transform:scale(1);filter:brightness(1);text-shadow:none;}
}
.ko-score[data-score-side],
[data-tree-match] [data-bracket-score]{
display:inline-flex;
align-items:center;
justify-content:center;
transform-origin:center;
will-change:transform,filter,text-shadow;
}
.score-change-pop-v240,.score-change-pop-v241{
animation:breakziScoreChangePopV240 5s cubic-bezier(.22,1.12,.36,1) both!important;
color:#ffbf38!important;
}
@media (prefers-reduced-motion: reduce){
.score-change-pop-v240,.score-change-pop-v241{animation:none!important;}
}
/* ===== v243 mobile no-scroll score/reset guard ===== */
@media (max-width: 900px), (pointer: coarse){
html, body, #app, #scoreboard-page, #knockoutBoard, .double-ko-mobile-list-v218, .ko-row, .dk-mobile-match-card{
overflow-anchor: none !important;
}
body.breakzi-mobile-no-scroll-v243{
overscroll-behavior: none !important;
overflow-anchor: none !important;
}
}
/* ===== Breakzi v247: timer controls split around timer display ===== */
.timer-display-panel-v247{
width:100%;
max-width:460px;
margin:0 auto;
gap:16px!important;
}
.timer-display-panel-v247 .timer-primary-controls,
.timer-display-panel-v247 .timer-extensions-grid{
width:100%;
max-width:420px;
}
.timer-control-panel-v247{
max-width:420px;
margin:0 auto;
width:100%;
}
.timer-control-panel-v247 .timer-enable-sound-btn,
.timer-control-panel-v247 .timer-reset-all-btn{
width:100%;
}
body.timer-focus-mode .timer-layout-grid{
grid-template-columns:1fr!important;
max-width:760px!important;
margin:0 auto!important;
}
body.timer-focus-mode .timer-display-panel-v247{
max-width:680px!important;
gap:14px!important;
}
body.timer-focus-mode .timer-display-panel-v247 .timer-primary-controls,
body.timer-focus-mode .timer-display-panel-v247 .timer-extensions-grid{
max-width:560px!important;
}
body.timer-focus-mode .timer-control-panel-v247{
max-width:560px!important;
}
body.timer-focus-mode .timer-display-ring{
width:min(42vh,360px)!important;
}
body.timer-focus-mode .timer-display-value{
font-size:clamp(4.8rem,14vh,8rem)!important;
}
body.timer-focus-mode .timer-subinfo{
min-height:auto!important;
}
@media (max-width:720px){
.timer-display-panel-v247{gap:10px!important;}
.timer-display-panel-v247 .timer-primary-controls,
.timer-display-panel-v247 .timer-extensions-grid{max-width:100%;}
.timer-control-panel-v247{max-width:100%;}
.timer-display-panel-v247 .timer-cta,
.timer-display-panel-v247 .timer-ext-btn{min-height:50px!important;}
body.timer-focus-mode .timer-layout-grid{max-width:100%!important;gap:8px!important;}
body.timer-focus-mode .timer-display-panel-v247{gap:8px!important;}
body.timer-focus-mode .timer-display-ring{width:min(38dvh,70vw)!important;}
body.timer-focus-mode .timer-display-value{font-size:clamp(4rem,14dvh,6.6rem)!important;}
}
/* ===== Breakzi v248: make finished match live buttons clearly different ===== */
.watch-live-btn.finished-live-btn-v248,
.watch-live-home-btn.finished-live-btn-v248,
.all-live-watch-btn.finished-live-btn-v248,
.clean-watch-live-btn.finished-live-btn-v248{
background:linear-gradient(135deg,#374151,#111827)!important;
border:1px solid rgba(255,255,255,.18)!important;
color:#e5e7eb!important;
box-shadow:0 8px 18px rgba(0,0,0,.28)!important;
opacity:.92!important;
}
.watch-live-btn.finished-live-btn-v248::before,
.watch-live-home-btn.finished-live-btn-v248::before{
background:#9ca3af!important;
box-shadow:0 0 0 4px rgba(156,163,175,.18)!important;
}
.watch-live-btn.active-live-btn-v248,
.watch-live-home-btn.active-live-btn-v248{
box-shadow:0 10px 24px rgba(220,38,38,.26)!important;
}
.finished-live-label-v248{
background:#374151!important;
color:#f9fafb!important;
border-color:rgba(255,255,255,.16)!important;
}
.ko-row.finished .watch-live-btn.finished-live-btn-v248,
.home-live-match-card:has(.finished-live-btn-v248),
.hero-live-card:has(.finished-live-btn-v248),
.all-live-match-row:has(.finished-live-btn-v248){
filter:saturate(.9)!important;
}
/* ===== Breakzi v251: fullscreen bracket autofit any device ===== */
.dk-tree-wrap-v201:fullscreen,
.dk-tree-wrap-v201.dk-bracket-fullscreen-active{
overflow:hidden!important;
display:flex!important;
flex-direction:column!important;
align-items:stretch!important;
justify-content:flex-start!important;
padding:8px!important;
}
.dk-tree-wrap-v201:fullscreen .dk-bracket-fullscreen-canvas,
.dk-tree-wrap-v201.dk-bracket-fullscreen-active .dk-bracket-fullscreen-canvas{
transform:translate(var(--dk-overview-x,0px), var(--dk-overview-y,0px)) scale(var(--dk-overview-scale,1))!important;
transform-origin:top left!important;
width:max-content!important;
height:max-content!important;
max-width:none!important;
max-height:none!important;
margin:0!important;
will-change:transform!important;
}
.dk-tree-wrap-v201:fullscreen .dk-tree-section,
.dk-tree-wrap-v201.dk-bracket-fullscreen-active .dk-tree-section{
min-height:auto!important;
}
.dk-tree-wrap-v201:fullscreen .dk-schema-readonly-note,
.dk-tree-wrap-v201.dk-bracket-fullscreen-active .dk-schema-readonly-note{
flex:0 0 auto!important;
}
@media(max-width:900px){
.dk-tree-wrap-v201:fullscreen,
.dk-tree-wrap-v201.dk-bracket-fullscreen-active{
padding:5px!important;
}
}
/* ===== v252 player history from rankings ===== */
.ranking-player-link{background:transparent;border:0;color:inherit;font:inherit;font-weight:900;cursor:pointer;text-align:left;padding:0;text-decoration:none}
.ranking-player-link:hover{text-decoration:underline;color:#00e58f}
.ranking-details-btn{border:0;border-radius:999px;background:linear-gradient(135deg,#00e58f,#10b7ff);color:#001526;font-weight:900;padding:9px 14px;cursor:pointer;white-space:nowrap;box-shadow:0 8px 20px rgba(0,229,143,.16)}
.ranking-details-btn:hover{filter:brightness(1.06);transform:translateY(-1px)}
.player-history-section{max-width:1120px;margin:0 auto}
.player-history-header{background:linear-gradient(135deg,rgba(0,229,143,.14),rgba(16,183,255,.08));border:1px solid rgba(0,229,143,.24);border-radius:28px;padding:24px;margin-bottom:20px;display:grid;grid-template-columns:auto 1fr;gap:18px;align-items:start}
.player-history-back{border:1px solid rgba(255,255,255,.18);background:#102b68;color:white;border-radius:999px;padding:12px 16px;font-weight:900;cursor:pointer}
.player-history-header h2{margin:4px 0 8px;font-size:42px;color:#fff}
.player-history-summary{margin:0;color:#b7c8dc;font-weight:800}
.player-history-stats{display:grid;grid-template-columns:repeat(5,1fr);gap:12px;margin-bottom:18px}
.player-history-stats div{background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.12);border-radius:18px;padding:16px;text-align:center}
.player-history-stats small{display:block;text-transform:uppercase;letter-spacing:.8px;color:#9fb1c6;font-weight:900;font-size:11px}
.player-history-stats strong{display:block;margin-top:6px;color:#fff;font-size:24px}
.player-history-list{display:grid;gap:12px}
.player-history-match{display:grid;grid-template-columns:48px minmax(0,1fr) 120px;gap:14px;align-items:center;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.12);border-left:6px solid #b7c8dc;border-radius:18px;padding:14px;color:#fff}
.player-history-match.win{border-left-color:#00e58f;background:rgba(0,229,143,.10)}
.player-history-match.loss{border-left-color:#ff4661;background:rgba(255,70,97,.10)}
.player-history-match.upcoming{border-left-color:#ffd166;background:rgba(255,209,102,.10)}
.player-history-match-rank{width:38px;height:38px;border-radius:50%;display:grid;place-items:center;background:rgba(255,255,255,.14);font-weight:900;color:#fff}
.player-history-match-main strong{display:block;font-size:18px;line-height:1.2}
.player-history-match-main span{display:block;color:#b7c8dc;font-weight:800;margin-top:5px;font-size:13px}
.player-history-score{font-size:24px;font-weight:1000;text-align:center;color:#ffd166;white-space:nowrap}
.player-history-empty{border:1px dashed rgba(255,255,255,.22);border-radius:18px;padding:22px;color:#b7c8dc;font-weight:900;text-align:center}
@media(max-width:850px){.player-history-header{grid-template-columns:1fr}.player-history-stats{grid-template-columns:repeat(2,1fr)}.player-history-match{grid-template-columns:38px 1fr;gap:10px}.player-history-score{grid-column:2;text-align:left}.ranking-mobile-top{align-items:flex-start;flex-wrap:wrap}.ranking-mobile-top .ranking-details-btn{margin-left:46px}}
/* ===== v254 player photos in rankings and history ===== */
.player-avatar-v254{width:44px;height:44px;border-radius:50%;display:inline-grid;place-items:center;overflow:hidden;flex:0 0 auto;background:linear-gradient(135deg,#102b68,#00b979);border:2px solid rgba(255,255,255,.75);box-shadow:0 8px 20px rgba(16,43,104,.18);color:#fff;font-weight:1000;letter-spacing:.4px}
.player-avatar-v254 img{width:100%;height:100%;object-fit:cover;display:block}.player-avatar-v254 b{font-size:14px;color:#fff}.ranking-player-cell-v254{display:flex;align-items:center;gap:12px;min-width:210px}.ranking-avatar-v254{width:42px;height:42px}.home-ranking-avatar-v254{width:30px;height:30px;margin:0 8px}.dashboard-ranking-row-v254>div{display:flex;align-items:center;gap:6px}.ranking-mobile-top-v254{gap:10px}.ranking-mobile-top-v254 .ranking-avatar-v254{width:48px;height:48px}.player-history-header h2{display:flex;align-items:center;gap:14px}.player-history-title-avatar-v254{width:72px;height:72px;border-width:3px}.player-history-title-avatar-v254 b{font-size:22px}.player-history-match{grid-template-columns:48px 52px minmax(0,1fr) 120px}.player-history-opponent-avatar-v254{width:46px;height:46px;border-color:rgba(255,255,255,.45);box-shadow:none}.player-photo-replace-btn-v254{margin-left:auto;border:0;border-radius:999px;padding:9px 13px;background:linear-gradient(135deg,#00e58f,#10b7ff);color:#001526;font-weight:1000;font-size:12px;white-space:nowrap;cursor:pointer;box-shadow:0 8px 18px rgba(0,229,143,.16)}.player-photo-replace-btn-v254 input{display:none}.player-report-item-v254{grid-template-columns:auto minmax(0,1fr) auto;align-items:center}.player-report-item-v254 img,.player-report-item-v254 .tiny-avatar{width:46px!important;height:46px!important;border-radius:50%;object-fit:cover}.ranking-player-link{display:inline-flex;align-items:center;min-height:34px}
@media(max-width:850px){.ranking-player-cell-v254{min-width:0}.player-history-match{grid-template-columns:38px 44px 1fr;gap:10px}.player-history-score{grid-column:3;text-align:left}.player-history-title-avatar-v254{width:60px;height:60px}.player-report-item-v254{grid-template-columns:auto minmax(0,1fr);gap:10px}.player-photo-replace-btn-v254{grid-column:1 / -1;margin-left:0;text-align:center}.ranking-mobile-top .ranking-details-btn{margin-left:0}}
/* ===== v257 tournament creator all formats ===== */
.admin-menu{min-width:230px;background:linear-gradient(145deg,rgba(7,18,36,.98),rgba(10,38,54,.98));border:1px solid rgba(0,255,160,.38);box-shadow:0 18px 50px rgba(0,0,0,.38),0 0 0 1px rgba(255,255,255,.04) inset;border-radius:18px;padding:10px;z-index:9999}
.admin-menu button{width:100%;border:0;border-radius:13px;padding:13px 14px;margin:4px 0;text-align:left;font-weight:900;cursor:pointer;color:#fff;background:rgba(255,255,255,.08)}
.admin-menu button:hover{background:linear-gradient(135deg,#00f0a0,#08b9ff);color:#031226}
#adminManagementMenuBtn{background:linear-gradient(135deg,#00f0a0,#08b9ff)!important;color:#031226!important;text-align:center!important}
#adminLogoutMenuBtn{background:rgba(255,255,255,.08);color:#ffccd2}
#adminLogoutMenuBtn:hover{background:#ff4d64!important;color:#fff!important}
/* ===== v257 tournament creator and ranking filter ===== */
.ranking-filter-v257{margin:-10px 0 22px;display:flex;justify-content:flex-end}
.ranking-filter-v257 label{display:flex;align-items:center;gap:12px;color:#b9c7d8;font-weight:900}
.ranking-filter-v257 select{background:#071422;color:#fff;border:1px solid rgba(0,255,156,.35);border-radius:999px;padding:12px 18px;font-weight:900;outline:none;min-width:240px}
.creator-hero-v257{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;margin:10px 0 18px}
.creator-hero-v257 div{border:1px solid rgba(0,255,156,.24);background:linear-gradient(135deg,rgba(0,255,156,.12),rgba(24,198,255,.08));border-radius:18px;padding:16px}
.creator-hero-v257 strong{display:block;color:#00ff9c;text-transform:uppercase;letter-spacing:1px;font-size:12px;margin-bottom:6px}
.creator-hero-v257 span{display:block;color:#dce8ff;font-weight:800;line-height:1.35}
.management-form-grid-v257{grid-template-columns:repeat(3,minmax(0,1fr))}
.race-card-v257{border:1px solid rgba(0,255,156,.24);background:rgba(3,17,28,.55);border-radius:20px;padding:18px;margin:16px 0}
.race-card-head-v257 h3{margin:0;color:#fff}.race-card-head-v257 p{margin:6px 0 14px;color:#b9c7d8;font-weight:800}
.race-fields-v257{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
.race-fields-v257 label{display:flex;align-items:center;justify-content:space-between;gap:10px;border:1px solid rgba(255,255,255,.1);background:rgba(255,255,255,.05);border-radius:14px;padding:10px 12px;color:#fff;font-weight:900}
.race-fields-v257 input{width:76px;text-align:center;border:1px solid rgba(0,255,156,.35);background:#071422;color:#fff;border-radius:12px;padding:9px;font-weight:900}
.draw-player-list-v257{max-height:260px;overflow:auto}
.draw-player-option-v257 input:not(:checked)+span{opacity:.55}
.x-badge-v257{display:inline-block;margin-left:6px;color:#ffcf5a;font-style:normal;font-size:11px;font-weight:900;text-transform:uppercase}
.x-player-v257{color:#ffcf5a!important;font-weight:900!important}
.management-tournament-card-v257 span{display:block;margin-top:8px;color:#00d6ff;font-size:12px;font-weight:900}
@media(max-width:850px){.creator-hero-v257,.management-form-grid-v257,.race-fields-v257{grid-template-columns:1fr}.ranking-filter-v257{justify-content:stretch}.ranking-filter-v257 label{width:100%;align-items:stretch;flex-direction:column}.ranking-filter-v257 select{width:100%;min-width:0}}
/* ===== v258 create tournament menu and popup fit fix ===== */
#adminCreateTournamentMenuBtn.admin-menu-primary{
background:linear-gradient(135deg,#00ee7a,#10b8ff)!important;
color:#00121a!important;
font-weight:1000!important;
box-shadow:0 14px 30px rgba(0,238,122,.22)!important;
}
#adminCreateTournamentMenuBtn.admin-menu-primary:hover{
filter:brightness(1.08);
transform:translateY(-1px);
}
#managementModal.modal{
align-items:flex-start!important;
place-items:start center!important;
padding:18px 18px calc(18px + env(safe-area-inset-bottom,0px))!important;
overflow:auto!important;
}
#managementModal .management-modal-card{
width:min(940px,calc(100vw - 32px))!important;
max-height:calc(100dvh - 36px)!important;
margin:0 auto!important;
overflow-y:auto!important;
overscroll-behavior:contain;
border-radius:24px!important;
box-shadow:0 28px 90px rgba(0,0,0,.45)!important;
}
#managementModal .modal-close{
position:sticky!important;
top:0!important;
float:right;
z-index:5;
width:44px;
height:44px;
border-radius:50%;
background:rgba(255,255,255,.10)!important;
color:#fff!important;
display:grid;
place-items:center;
}
#managementModalContent{
clear:both;
padding-right:4px;
}
#managementModalContent h2{
padding-right:56px;
}
.creator-hero-v257{
grid-template-columns:repeat(2,minmax(0,1fr));
}
@media(max-width:900px){
#managementModal.modal{padding:10px!important;}
#managementModal .management-modal-card{width:calc(100vw - 20px)!important;max-height:calc(100dvh - 20px)!important;border-radius:18px!important;}
#managementModal .management-form-grid,
#managementModal .management-form-grid-v257,
#managementModal .creator-hero-v257,
#managementModal .management-report-grid{grid-template-columns:1fr!important;}
}
@media(max-width:520px){
#managementModal.modal{padding:6px!important;}
#managementModal .management-modal-card{width:calc(100vw - 12px)!important;max-height:calc(100dvh - 12px)!important;padding:18px!important;}
#managementModal .management-modal-card h2{font-size:28px!important;}
#managementModal .management-actions{display:grid!important;grid-template-columns:1fr!important;}
}
/* v268: keep the June 8-qualifier final phase compact and aligned like the original Plaza Double KO bracket. */
.dk-june-eight-final-phase-v268 .dk-tree-finals .dk-tree-grid{min-width:520px;}
.dk-june-eight-final-phase-v268 .dk-tree-card{min-height:78px;}
/* v303: drag/swap/swap-mode CSS removed completely. */
/* v269 June bracket final phase: show 8 qualifiers entering Global Quarter Finals and never display legacy middle-match cards. */
.dk-june-global-qf-v269{grid-template-columns:minmax(440px,1fr) minmax(440px,1fr) minmax(360px,.8fr)!important;align-items:stretch;}
.dk-june-global-qf-v269 .dk-tree-winners .dk-tree-grid{--dk-tree-cols:2!important;}
.dk-june-global-qf-v269 .dk-tree-losers .dk-tree-grid{--dk-tree-cols:2!important;}
.dk-june-global-qf-v269 .dk-tree-finals .dk-tree-grid{--dk-tree-cols:3!important;min-width:560px;}
.dk-june-global-qf-v269 .dk-tree-finals .dk-tree-col-title{font-size:11px;line-height:1.1;white-space:normal;}
.dk-june-global-qf-v269 .dk-tree-card[data-tree-match="DKJ35"],
.dk-june-global-qf-v269 .dk-tree-card[data-tree-match="DKJ36"],
.dk-june-global-qf-v269 .dk-tree-card[data-tree-match="DKJ37"],
.dk-june-global-qf-v269 .dk-tree-card[data-tree-match="DKJ46"],
.dk-june-global-qf-v269 .dk-tree-card[data-tree-match="DKJ47"],
.dk-june-global-qf-v269 .dk-tree-card[data-tree-match="DKJ48"],
.dk-june-global-qf-v269 .dk-tree-card[data-tree-match="DKJ49"],
.dk-june-global-qf-v269 .dk-tree-card[data-tree-match="DKJ50"]{display:none!important;}
@media(max-width:900px){.dk-june-global-qf-v269{grid-template-columns:1fr!important;}.dk-june-global-qf-v269 .dk-tree-finals .dk-tree-grid{min-width:520px;}}
/* ===== Breakzi v277: clean presentation fullscreen bracket =====
Fullscreen is for viewing only: no Score/OBS buttons, larger cards,
tighter layout, top-aligned full-screen fit, and clearer text. */
.dk-tree-wrap-v201:fullscreen,
.dk-tree-wrap-v201.dk-bracket-fullscreen-active{
background:radial-gradient(circle at 50% 0%, rgba(0,183,255,.20), transparent 35%), linear-gradient(135deg,#04101e 0%,#061d34 52%,#03101e 100%)!important;
padding:4px!important;
gap:2px!important;
overflow:hidden!important;
}
.dk-tree-wrap-v201:fullscreen .dk-schema-readonly-note,
.dk-tree-wrap-v201.dk-bracket-fullscreen-active .dk-schema-readonly-note{
margin:0 0 2px!important;
padding:2px 4px!important;
font-size:.62rem!important;
line-height:1!important;
opacity:.55!important;
height:auto!important;
}
.dk-tree-wrap-v201:fullscreen .dk-tree-score-open,
.dk-tree-wrap-v201.dk-bracket-fullscreen-active .dk-tree-score-open,
.dk-tree-wrap-v201:fullscreen .obs-tree-link-btn-v224,
.dk-tree-wrap-v201.dk-bracket-fullscreen-active .obs-tree-link-btn-v224{
display:none!important;
visibility:hidden!important;
pointer-events:none!important;
}
.dk-tree-wrap-v201:fullscreen .dk-bracket-fullscreen-canvas,
.dk-tree-wrap-v201.dk-bracket-fullscreen-active .dk-bracket-fullscreen-canvas{
grid-template-columns:max-content max-content max-content!important;
gap:6px!important;
align-items:stretch!important;
}
.dk-tree-wrap-v201:fullscreen .dk-tree-section,
.dk-tree-wrap-v201.dk-bracket-fullscreen-active .dk-tree-section{
padding:7px!important;
border-radius:10px!important;
border:1px solid rgba(0,229,255,.28)!important;
background:linear-gradient(145deg,rgba(6,27,48,.96),rgba(7,38,70,.86))!important;
box-shadow:inset 0 0 0 1px rgba(255,255,255,.04), 0 14px 38px rgba(0,0,0,.28)!important;
}
.dk-tree-wrap-v201:fullscreen .dk-schema-section-head,
.dk-tree-wrap-v201.dk-bracket-fullscreen-active .dk-schema-section-head{
font-size:.72rem!important;
line-height:1!important;
margin-bottom:4px!important;
letter-spacing:.02em!important;
color:#f4fbff!important;
text-shadow:0 1px 4px rgba(0,0,0,.55)!important;
}
.dk-tree-wrap-v201:fullscreen .dk-tree-scroll,
.dk-tree-wrap-v201.dk-bracket-fullscreen-active .dk-tree-scroll{
overflow:visible!important;
}
.dk-tree-wrap-v201:fullscreen .dk-tree-grid,
.dk-tree-wrap-v201.dk-bracket-fullscreen-active .dk-tree-grid{
--dk-tree-card-w:168px!important;
--dk-tree-card-h:74px!important;
--dk-tree-row-h:47px!important;
grid-template-rows:22px repeat(var(--dk-tree-rows), var(--dk-tree-row-h))!important;
column-gap:8px!important;
min-width:calc((var(--dk-tree-card-w) * var(--dk-tree-cols)) + (8px * (var(--dk-tree-cols) - 1)))!important;
padding:0!important;
}
.dk-tree-wrap-v201:fullscreen .dk-tree-col-title,
.dk-tree-wrap-v201.dk-bracket-fullscreen-active .dk-tree-col-title{
font-size:.62rem!important;
line-height:1!important;
padding:0 0 3px!important;
color:#16ffae!important;
text-shadow:0 0 8px rgba(0,255,166,.22)!important;
}
.dk-tree-wrap-v201:fullscreen .dk-tree-card,
.dk-tree-wrap-v201.dk-bracket-fullscreen-active .dk-tree-card{
min-height:var(--dk-tree-card-h)!important;
padding:6px 7px!important;
border-radius:9px!important;
background:linear-gradient(180deg,rgba(15,48,82,.94),rgba(7,24,45,.95))!important;
border:1px solid rgba(255,255,255,.14)!important;
box-shadow:0 8px 16px rgba(0,0,0,.22)!important;
}
.dk-tree-wrap-v201:fullscreen .dk-tree-card.finished,
.dk-tree-wrap-v201.dk-bracket-fullscreen-active .dk-tree-card.finished{
border-color:rgba(0,255,160,.70)!important;
box-shadow:inset 3px 0 0 rgba(0,255,160,.95),0 8px 16px rgba(0,0,0,.24)!important;
}
.dk-tree-wrap-v201:fullscreen .dk-tree-card.live,
.dk-tree-wrap-v201.dk-bracket-fullscreen-active .dk-tree-card.live{
border-color:rgba(255,190,45,.72)!important;
box-shadow:inset 3px 0 0 rgba(255,190,45,.98),0 8px 16px rgba(0,0,0,.24)!important;
}
.dk-tree-wrap-v201:fullscreen .dk-tree-card:not([style*="grid-column:1"])::before,
.dk-tree-wrap-v201.dk-bracket-fullscreen-active .dk-tree-card:not([style*="grid-column:1"])::before{
left:-8px!important;
width:8px!important;
height:2px!important;
background:rgba(22,255,174,.55)!important;
}
.dk-tree-wrap-v201:fullscreen .dk-tree-card-top,
.dk-tree-wrap-v201.dk-bracket-fullscreen-active .dk-tree-card-top{
margin-bottom:3px!important;
gap:4px!important;
}
.dk-tree-wrap-v201:fullscreen .dk-tree-card-top strong,
.dk-tree-wrap-v201.dk-bracket-fullscreen-active .dk-tree-card-top strong{
font-size:.64rem!important;
line-height:1.02!important;
color:#fff!important;
text-shadow:0 1px 4px rgba(0,0,0,.60)!important;
}
.dk-tree-wrap-v201:fullscreen .dk-tree-card-top span,
.dk-tree-wrap-v201.dk-bracket-fullscreen-active .dk-tree-card-top span{
font-size:.50rem!important;
line-height:1!important;
color:#bde7ff!important;
}
.dk-tree-wrap-v201:fullscreen .dk-tree-player-line,
.dk-tree-wrap-v201.dk-bracket-fullscreen-active .dk-tree-player-line{
padding:2px 0!important;
gap:5px!important;
}
.dk-tree-wrap-v201:fullscreen .dk-tree-player-line span,
.dk-tree-wrap-v201.dk-bracket-fullscreen-active .dk-tree-player-line span{
font-size:.68rem!important;
line-height:1.08!important;
font-weight:1000!important;
color:#ffffff!important;
text-shadow:0 1px 4px rgba(0,0,0,.65)!important;
white-space:nowrap!important;
overflow:hidden!important;
text-overflow:ellipsis!important;
}
.dk-tree-wrap-v201:fullscreen .dk-tree-player-line b,
.dk-tree-wrap-v201.dk-bracket-fullscreen-active .dk-tree-player-line b{
font-size:.76rem!important;
line-height:1!important;
min-width:14px!important;
color:#ffd24a!important;
text-shadow:0 1px 4px rgba(0,0,0,.55)!important;
}
@media(max-width:1400px){
.dk-tree-wrap-v201:fullscreen .dk-tree-grid,
.dk-tree-wrap-v201.dk-bracket-fullscreen-active .dk-tree-grid{
--dk-tree-card-w:158px!important;
--dk-tree-card-h:70px!important;
--dk-tree-row-h:44px!important;
column-gap:6px!important;
min-width:calc((var(--dk-tree-card-w) * var(--dk-tree-cols)) + (6px * (var(--dk-tree-cols) - 1)))!important;
}
.dk-tree-wrap-v201:fullscreen .dk-bracket-fullscreen-canvas,
.dk-tree-wrap-v201.dk-bracket-fullscreen-active .dk-bracket-fullscreen-canvas{gap:5px!important;}
}
/* ===== Breakzi v277: fullscreen bracket fills the full viewport =====
Fixes the bottom empty background band and the Final Phase / Global Quarter Finals overlap. */
.dk-tree-wrap-v201:fullscreen,
.dk-tree-wrap-v201.dk-bracket-fullscreen-active{
background:linear-gradient(145deg,#061a30 0%,#082542 45%,#061a30 100%)!important;
padding:3px!important;
overflow:hidden!important;
width:100vw!important;
height:100vh!important;
}
.dk-tree-wrap-v201:fullscreen .dk-schema-readonly-note,
.dk-tree-wrap-v201.dk-bracket-fullscreen-active .dk-schema-readonly-note{
margin:0!important;
padding:2px 4px 3px!important;
min-height:10px!important;
font-size:.58rem!important;
line-height:1!important;
color:rgba(221,248,255,.58)!important;
}
.dk-tree-wrap-v201:fullscreen .dk-bracket-fullscreen-canvas,
.dk-tree-wrap-v201.dk-bracket-fullscreen-active .dk-bracket-fullscreen-canvas{
display:grid!important;
grid-template-columns:max-content max-content max-content!important;
gap:4px!important;
align-items:stretch!important;
min-height:var(--dk-fullscreen-fill-height, calc(100vh - 16px))!important;
height:var(--dk-fullscreen-fill-height, calc(100vh - 16px))!important;
background:linear-gradient(145deg,#061a30 0%,#082542 45%,#061a30 100%)!important;
}
.dk-tree-wrap-v201:fullscreen .dk-tree-section,
.dk-tree-wrap-v201.dk-bracket-fullscreen-active .dk-tree-section{
min-height:var(--dk-fullscreen-fill-height, calc(100vh - 20px))!important;
height:var(--dk-fullscreen-fill-height, calc(100vh - 20px))!important;
padding:7px 8px!important;
display:flex!important;
flex-direction:column!important;
justify-content:flex-start!important;
background:linear-gradient(145deg,rgba(8,31,56,.98),rgba(8,44,80,.94))!important;
border:1px solid rgba(36,218,255,.38)!important;
box-shadow:inset 0 0 0 1px rgba(255,255,255,.05),0 0 24px rgba(0,180,255,.14)!important;
}
.dk-tree-wrap-v201:fullscreen .dk-schema-section-head,
.dk-tree-wrap-v201.dk-bracket-fullscreen-active .dk-schema-section-head{
flex:0 0 auto!important;
margin:0 0 8px!important;
padding:0 2px 2px!important;
font-size:.74rem!important;
line-height:1.05!important;
min-height:12px!important;
color:#ffffff!important;
white-space:nowrap!important;
}
.dk-tree-wrap-v201:fullscreen .dk-tree-scroll,
.dk-tree-wrap-v201.dk-bracket-fullscreen-active .dk-tree-scroll{
flex:1 1 auto!important;
height:100%!important;
min-height:0!important;
overflow:visible!important;
}
.dk-tree-wrap-v201:fullscreen .dk-tree-grid,
.dk-tree-wrap-v201.dk-bracket-fullscreen-active .dk-tree-grid{
--dk-tree-card-w:172px!important;
--dk-tree-card-h:76px!important;
--dk-tree-row-h:48px!important;
grid-template-rows:34px repeat(var(--dk-tree-rows), var(--dk-tree-row-h))!important;
height:var(--dk-fullscreen-grid-height, auto)!important;
min-height:var(--dk-fullscreen-grid-height, auto)!important;
column-gap:10px!important;
min-width:calc((var(--dk-tree-card-w) * var(--dk-tree-cols)) + (10px * (var(--dk-tree-cols) - 1)))!important;
}
.dk-tree-wrap-v201:fullscreen .dk-tree-finals .dk-tree-grid,
.dk-tree-wrap-v201.dk-bracket-fullscreen-active .dk-tree-finals .dk-tree-grid{
--dk-tree-card-w:178px!important;
column-gap:14px!important;
min-width:calc((var(--dk-tree-card-w) * var(--dk-tree-cols)) + (14px * (var(--dk-tree-cols) - 1)))!important;
}
.dk-tree-wrap-v201:fullscreen .dk-tree-col-title,
.dk-tree-wrap-v201.dk-bracket-fullscreen-active .dk-tree-col-title{
align-self:start!important;
padding:0 2px 8px!important;
font-size:.62rem!important;
line-height:1.12!important;
min-height:24px!important;
white-space:normal!important;
overflow:visible!important;
color:#18ff9c!important;
}
.dk-tree-wrap-v201:fullscreen .dk-tree-finals .dk-tree-col-title,
.dk-tree-wrap-v201.dk-bracket-fullscreen-active .dk-tree-finals .dk-tree-col-title{
font-size:.56rem!important;
letter-spacing:.01em!important;
}
.dk-tree-wrap-v201:fullscreen .dk-tree-card,
.dk-tree-wrap-v201.dk-bracket-fullscreen-active .dk-tree-card{
min-height:var(--dk-tree-card-h)!important;
padding:7px 8px!important;
border-radius:10px!important;
}
.dk-tree-wrap-v201:fullscreen .dk-tree-card-top strong,
.dk-tree-wrap-v201.dk-bracket-fullscreen-active .dk-tree-card-top strong{font-size:.66rem!important;}
.dk-tree-wrap-v201:fullscreen .dk-tree-card-top span,
.dk-tree-wrap-v201.dk-bracket-fullscreen-active .dk-tree-card-top span{font-size:.50rem!important;}
.dk-tree-wrap-v201:fullscreen .dk-tree-player-line span,
.dk-tree-wrap-v201.dk-bracket-fullscreen-active .dk-tree-player-line span{font-size:.68rem!important;}
.dk-tree-wrap-v201:fullscreen .dk-tree-player-line b,
.dk-tree-wrap-v201.dk-bracket-fullscreen-active .dk-tree-player-line b{font-size:.76rem!important;}
@media(max-width:1400px){
.dk-tree-wrap-v201:fullscreen .dk-tree-grid,
.dk-tree-wrap-v201.dk-bracket-fullscreen-active .dk-tree-grid{
--dk-tree-card-w:166px!important;
--dk-tree-card-h:72px!important;
--dk-tree-row-h:46px!important;
column-gap:8px!important;
min-width:calc((var(--dk-tree-card-w) * var(--dk-tree-cols)) + (8px * (var(--dk-tree-cols) - 1)))!important;
}
.dk-tree-wrap-v201:fullscreen .dk-tree-finals .dk-tree-grid,
.dk-tree-wrap-v201.dk-bracket-fullscreen-active .dk-tree-finals .dk-tree-grid{
--dk-tree-card-w:170px!important;
column-gap:10px!important;
min-width:calc((var(--dk-tree-card-w) * var(--dk-tree-cols)) + (10px * (var(--dk-tree-cols) - 1)))!important;
}
}
/* ===== Breakzi v277: bigger fullscreen bracket cards and better spacing ===== */
.dk-tree-wrap-v201:fullscreen .dk-bracket-fullscreen-canvas,
.dk-tree-wrap-v201.dk-bracket-fullscreen-active .dk-bracket-fullscreen-canvas{
gap:7px!important;
}
.dk-tree-wrap-v201:fullscreen .dk-tree-section,
.dk-tree-wrap-v201.dk-bracket-fullscreen-active .dk-tree-section{
padding:8px 9px!important;
}
.dk-tree-wrap-v201:fullscreen .dk-schema-section-head,
.dk-tree-wrap-v201.dk-bracket-fullscreen-active .dk-schema-section-head{
font-size:.82rem!important;
margin-bottom:9px!important;
letter-spacing:.01em!important;
}
.dk-tree-wrap-v201:fullscreen .dk-tree-grid,
.dk-tree-wrap-v201.dk-bracket-fullscreen-active .dk-tree-grid{
--dk-tree-card-w:184px!important;
grid-template-rows:32px repeat(var(--dk-tree-rows), var(--dk-tree-row-h))!important;
column-gap:14px!important;
min-width:calc((var(--dk-tree-card-w) * var(--dk-tree-cols)) + (14px * (var(--dk-tree-cols) - 1)))!important;
align-content:space-between!important;
}
.dk-tree-wrap-v201:fullscreen .dk-tree-finals .dk-tree-grid,
.dk-tree-wrap-v201.dk-bracket-fullscreen-active .dk-tree-finals .dk-tree-grid{
--dk-tree-card-w:188px!important;
column-gap:16px!important;
min-width:calc((var(--dk-tree-card-w) * var(--dk-tree-cols)) + (16px * (var(--dk-tree-cols) - 1)))!important;
}
.dk-tree-wrap-v201:fullscreen .dk-tree-card,
.dk-tree-wrap-v201.dk-bracket-fullscreen-active .dk-tree-card{
min-height:var(--dk-tree-card-h,90px)!important;
padding:8px 9px!important;
border-radius:12px!important;
border-width:1.5px!important;
}
.dk-tree-wrap-v201:fullscreen .dk-tree-card-top,
.dk-tree-wrap-v201.dk-bracket-fullscreen-active .dk-tree-card-top{
margin-bottom:5px!important;
}
.dk-tree-wrap-v201:fullscreen .dk-tree-card-top strong,
.dk-tree-wrap-v201.dk-bracket-fullscreen-active .dk-tree-card-top strong{
font-size:var(--dk-tree-font-top,.78rem)!important;
line-height:1.08!important;
}
.dk-tree-wrap-v201:fullscreen .dk-tree-card-top span,
.dk-tree-wrap-v201.dk-bracket-fullscreen-active .dk-tree-card-top span{
font-size:.58rem!important;
line-height:1.05!important;
}
.dk-tree-wrap-v201:fullscreen .dk-tree-player-line,
.dk-tree-wrap-v201.dk-bracket-fullscreen-active .dk-tree-player-line{
padding:3px 0!important;
gap:7px!important;
}
.dk-tree-wrap-v201:fullscreen .dk-tree-player-line span,
.dk-tree-wrap-v201.dk-bracket-fullscreen-active .dk-tree-player-line span{
font-size:var(--dk-tree-font-player,.88rem)!important;
line-height:1.12!important;
}
.dk-tree-wrap-v201:fullscreen .dk-tree-player-line b,
.dk-tree-wrap-v201.dk-bracket-fullscreen-active .dk-tree-player-line b{
font-size:var(--dk-tree-font-score,1rem)!important;
min-width:18px!important;
}
.dk-tree-wrap-v201:fullscreen .dk-tree-card:not([style*="grid-column:1"])::before,
.dk-tree-wrap-v201.dk-bracket-fullscreen-active .dk-tree-card:not([style*="grid-column:1"])::before{
left:-14px!important;
width:14px!important;
}
@media(max-width:1400px){
.dk-tree-wrap-v201:fullscreen .dk-tree-grid,
.dk-tree-wrap-v201.dk-bracket-fullscreen-active .dk-tree-grid{
--dk-tree-card-w:176px!important;
column-gap:12px!important;
min-width:calc((var(--dk-tree-card-w) * var(--dk-tree-cols)) + (12px * (var(--dk-tree-cols) - 1)))!important;
}
.dk-tree-wrap-v201:fullscreen .dk-tree-finals .dk-tree-grid,
.dk-tree-wrap-v201.dk-bracket-fullscreen-active .dk-tree-finals .dk-tree-grid{
--dk-tree-card-w:180px!important;
column-gap:14px!important;
min-width:calc((var(--dk-tree-card-w) * var(--dk-tree-cols)) + (14px * (var(--dk-tree-cols) - 1)))!important;
}
}
/* ===== Breakzi v277: responsive fullscreen bracket for phones, laptops, monitors and TV screens ===== */
.dk-tree-wrap-v201:fullscreen,
.dk-tree-wrap-v201.dk-bracket-fullscreen-active{
width:100vw!important;
height:100vh!important;
max-width:100vw!important;
max-height:100vh!important;
box-sizing:border-box!important;
background:radial-gradient(circle at 50% 8%,rgba(0,170,255,.20),transparent 35%),linear-gradient(145deg,#041222 0%,#082a4c 52%,#041222 100%)!important;
}
.dk-tree-wrap-v201:fullscreen .dk-tree-score-open,
.dk-tree-wrap-v201.dk-bracket-fullscreen-active .dk-tree-score-open,
.dk-tree-wrap-v201:fullscreen .obs-tree-link-btn-v224,
.dk-tree-wrap-v201.dk-bracket-fullscreen-active .obs-tree-link-btn-v224{
display:none!important;
visibility:hidden!important;
pointer-events:none!important;
}
.dk-tree-wrap-v201:fullscreen .dk-bracket-fullscreen-canvas,
.dk-tree-wrap-v201.dk-bracket-fullscreen-active .dk-bracket-fullscreen-canvas{
grid-template-columns:max-content max-content max-content!important;
gap:var(--dk-responsive-gap,12px)!important;
align-items:stretch!important;
}
.dk-tree-wrap-v201:fullscreen .dk-tree-grid,
.dk-tree-wrap-v201.dk-bracket-fullscreen-active .dk-tree-grid{
--dk-tree-card-w:var(--dk-responsive-card-w,184px);
grid-template-rows:clamp(24px,3vh,38px) repeat(var(--dk-tree-rows), var(--dk-tree-row-h))!important;
column-gap:clamp(8px,1.05vw,22px)!important;
min-width:calc((var(--dk-tree-card-w) * var(--dk-tree-cols)) + (clamp(8px,1.05vw,22px) * (var(--dk-tree-cols) - 1)))!important;
align-content:space-between!important;
}
.dk-tree-wrap-v201:fullscreen .dk-tree-card,
.dk-tree-wrap-v201.dk-bracket-fullscreen-active .dk-tree-card{
min-height:var(--dk-tree-card-h,86px)!important;
padding:clamp(6px,.75vh,11px) clamp(7px,.75vw,12px)!important;
}
.dk-tree-wrap-v201:fullscreen .dk-tree-col-title,
.dk-tree-wrap-v201.dk-bracket-fullscreen-active .dk-tree-col-title{
font-size:clamp(.52rem,.75vw,.92rem)!important;
line-height:1.08!important;
min-height:clamp(18px,3vh,34px)!important;
white-space:normal!important;
}
.dk-tree-wrap-v201:fullscreen .dk-tree-card-top strong,
.dk-tree-wrap-v201.dk-bracket-fullscreen-active .dk-tree-card-top strong{font-size:var(--dk-tree-font-top,.78rem)!important;}
.dk-tree-wrap-v201:fullscreen .dk-tree-player-line span,
.dk-tree-wrap-v201.dk-bracket-fullscreen-active .dk-tree-player-line span{font-size:var(--dk-tree-font-player,.88rem)!important;}
.dk-tree-wrap-v201:fullscreen .dk-tree-player-line b,
.dk-tree-wrap-v201.dk-bracket-fullscreen-active .dk-tree-player-line b{font-size:var(--dk-tree-font-score,1rem)!important;}
.dk-tree-wrap-v201:fullscreen .dk-tree-card:not([style*="grid-column:1"])::before,
.dk-tree-wrap-v201.dk-bracket-fullscreen-active .dk-tree-card:not([style*="grid-column:1"])::before{
left:calc(-1 * clamp(8px,1.05vw,22px))!important;
width:clamp(8px,1.05vw,22px)!important;
}
/* Large monitor / TV: bigger and cleaner. */
.dk-tree-wrap-v201.dk-fs-monitor-v278 .dk-schema-section-head,
.dk-tree-wrap-v201.dk-fs-tv-v278 .dk-schema-section-head{font-size:clamp(.95rem,1.05vw,1.45rem)!important;margin-bottom:clamp(10px,1.2vh,18px)!important;}
.dk-tree-wrap-v201.dk-fs-monitor-v278 .dk-tree-card,
.dk-tree-wrap-v201.dk-fs-tv-v278 .dk-tree-card{border-radius:clamp(12px,.9vw,20px)!important;box-shadow:0 12px 28px rgba(0,0,0,.27)!important;}
.dk-tree-wrap-v201.dk-fs-tv-v278 .dk-schema-readonly-note{font-size:clamp(.72rem,.65vw,1rem)!important;}
/* Phones, portrait tablets and narrow screens: stack sections and keep the bracket readable with vertical scrolling. */
.dk-tree-wrap-v201.dk-fs-mobile-stack-v278{
overflow:auto!important;
padding:6px!important;
-webkit-overflow-scrolling:touch!important;
}
.dk-tree-wrap-v201.dk-fs-mobile-stack-v278 .dk-schema-readonly-note{
position:sticky!important;
top:0!important;
z-index:5!important;
background:rgba(4,18,34,.86)!important;
backdrop-filter:blur(6px)!important;
font-size:.66rem!important;
padding:4px 6px!important;
}
.dk-tree-wrap-v201.dk-fs-mobile-stack-v278 .dk-bracket-fullscreen-canvas{
display:grid!important;
grid-template-columns:1fr!important;
width:100%!important;
max-width:100%!important;
height:auto!important;
min-height:0!important;
transform:none!important;
gap:10px!important;
margin:0!important;
}
.dk-tree-wrap-v201.dk-fs-mobile-stack-v278 .dk-tree-section{
width:var(--dk-mobile-section-w,calc(100vw - 14px))!important;
max-width:calc(100vw - 14px)!important;
height:auto!important;
min-height:auto!important;
padding:8px!important;
overflow:hidden!important;
}
.dk-tree-wrap-v201.dk-fs-mobile-stack-v278 .dk-tree-scroll{
overflow-x:auto!important;
overflow-y:visible!important;
padding-bottom:4px!important;
}
.dk-tree-wrap-v201.dk-fs-mobile-stack-v278 .dk-tree-grid{
min-width:calc((var(--dk-tree-card-w) * var(--dk-tree-cols)) + (8px * (var(--dk-tree-cols) - 1)))!important;
column-gap:8px!important;
grid-template-rows:24px repeat(var(--dk-tree-rows), var(--dk-tree-row-h))!important;
align-content:start!important;
}
.dk-tree-wrap-v201.dk-fs-mobile-stack-v278 .dk-tree-col-title{
font-size:.58rem!important;
min-height:22px!important;
}
.dk-tree-wrap-v201.dk-fs-mobile-stack-v278 .dk-tree-card{
min-height:var(--dk-tree-card-h,74px)!important;
padding:6px 7px!important;
border-radius:10px!important;
}
.dk-tree-wrap-v201.dk-fs-mobile-stack-v278 .dk-tree-card-top strong{font-size:var(--dk-tree-font-top,.64rem)!important;}
.dk-tree-wrap-v201.dk-fs-mobile-stack-v278 .dk-tree-card-top span{font-size:.48rem!important;}
.dk-tree-wrap-v201.dk-fs-mobile-stack-v278 .dk-tree-player-line span{font-size:var(--dk-tree-font-player,.76rem)!important;}
.dk-tree-wrap-v201.dk-fs-mobile-stack-v278 .dk-tree-player-line b{font-size:var(--dk-tree-font-score,.88rem)!important;}
/* ===== Breakzi v278: fullscreen bracket full player names ===== */
.dk-tree-wrap-v201:fullscreen .dk-tree-card,
.dk-tree-wrap-v201.dk-bracket-fullscreen-active .dk-tree-card{
overflow:visible!important;
}
.dk-tree-wrap-v201:fullscreen .dk-tree-player-line,
.dk-tree-wrap-v201.dk-bracket-fullscreen-active .dk-tree-player-line{
align-items:flex-start!important;
min-height:calc(var(--dk-tree-font-player,.88rem) * 1.45)!important;
gap:6px!important;
}
.dk-tree-wrap-v201:fullscreen .dk-tree-player-line span,
.dk-tree-wrap-v201.dk-bracket-fullscreen-active .dk-tree-player-line span{
display:block!important;
flex:1 1 auto!important;
min-width:0!important;
max-width:none!important;
white-space:normal!important;
overflow:visible!important;
text-overflow:clip!important;
overflow-wrap:normal!important;
word-break:normal!important;
hyphens:none!important;
line-height:1.06!important;
}
.dk-tree-wrap-v201:fullscreen .dk-tree-player-line b,
.dk-tree-wrap-v201.dk-bracket-fullscreen-active .dk-tree-player-line b{
flex:0 0 auto!important;
padding-top:1px!important;
}
.dk-tree-wrap-v201:fullscreen .dk-tree-grid,
.dk-tree-wrap-v201.dk-bracket-fullscreen-active .dk-tree-grid{
--dk-tree-card-w:var(--dk-responsive-card-w,208px)!important;
}
.dk-tree-wrap-v201.dk-fs-mobile-stack-v278 .dk-tree-player-line span{
white-space:normal!important;
overflow:visible!important;
text-overflow:clip!important;
overflow-wrap:normal!important;
word-break:normal!important;
}
.dk-tree-wrap-v201.dk-fs-mobile-stack-v278 .dk-tree-card{
overflow:visible!important;
}
/* ===== v308 futuristic animated draw ===== */
.breakzi-draw-v308{position:relative;overflow:hidden;margin-top:18px;padding:22px;border:1px solid rgba(0,255,179,.24);border-radius:24px;background:radial-gradient(circle at 10% 0%,rgba(0,255,179,.20),transparent 34%),radial-gradient(circle at 90% 20%,rgba(0,180,255,.16),transparent 32%),linear-gradient(135deg,rgba(5,21,38,.96),rgba(8,36,39,.92));box-shadow:0 24px 80px rgba(0,0,0,.34),inset 0 0 0 1px rgba(255,255,255,.04)}
.breakzi-draw-v308:before{content:"";position:absolute;inset:-40%;background:repeating-linear-gradient(90deg,transparent 0 42px,rgba(0,255,179,.04) 43px 44px);transform:rotate(-8deg);animation:breakziDrawGridV308 14s linear infinite;pointer-events:none}.breakzi-draw-v308>*{position:relative;z-index:1}@keyframes breakziDrawGridV308{from{background-position:0 0}to{background-position:180px 0}}
.draw-hero-v308{display:flex;align-items:center;justify-content:space-between;gap:20px;margin-bottom:20px}.draw-kicker-v308{display:inline-flex;padding:7px 12px;border-radius:999px;background:rgba(0,255,179,.12);color:#00ffb3;font-weight:900;text-transform:uppercase;letter-spacing:.08em;font-size:12px}.draw-hero-v308 h2{margin:12px 0 8px;color:#fff;font-size:clamp(26px,3vw,46px);line-height:.95;text-transform:uppercase}.draw-hero-v308 p{max-width:760px;color:#b9c7d8;font-weight:700}.draw-orb-v308{width:126px;height:126px;min-width:126px;border-radius:50%;display:grid;place-items:center;position:relative;background:radial-gradient(circle,rgba(0,255,179,.25),rgba(0,180,255,.10) 48%,rgba(0,0,0,.25));border:1px solid rgba(0,255,179,.45);box-shadow:0 0 42px rgba(0,255,179,.22)}.draw-orb-v308 span{position:absolute;inset:10px;border-radius:50%;border:2px dashed rgba(0,255,179,.6);animation:breakziSpinV308 5s linear infinite}.draw-orb-v308 b{font-size:34px;color:#fff}.draw-orb-v308 small{position:absolute;bottom:28px;color:#00ffb3;font-weight:900;text-transform:uppercase}@keyframes breakziSpinV308{to{transform:rotate(360deg)}}
.draw-grid-v308{display:grid;grid-template-columns:minmax(290px,420px) 1fr;gap:18px}.draw-panel-v308{border:1px solid rgba(255,255,255,.10);border-radius:20px;background:rgba(2,12,26,.62);backdrop-filter:blur(14px);box-shadow:inset 0 0 0 1px rgba(255,255,255,.03);padding:18px}.draw-panel-v308 h3{margin:0 0 8px;color:#fff;text-transform:uppercase}.draw-panel-v308 p,.draw-preview-head-v308 span{color:#aebed0;font-weight:700}.draw-input-panel-v308 textarea{width:100%;min-height:310px;resize:vertical;border-radius:16px;border:1px solid rgba(0,255,179,.24);background:rgba(0,8,18,.8);color:#fff;font-weight:800;line-height:1.55;padding:14px;outline:none}.draw-input-panel-v308 textarea:focus{border-color:#00ffb3;box-shadow:0 0 0 3px rgba(0,255,179,.12)}.draw-actions-v308{display:flex;flex-wrap:wrap;gap:10px;margin-top:14px}.draw-actions-v308 button{border:0;border-radius:999px;padding:12px 16px;font-weight:950;cursor:pointer}.draw-primary-v308{background:linear-gradient(135deg,#00ffb3,#00c8ff);color:#00131c;box-shadow:0 10px 30px rgba(0,255,179,.24)}.draw-apply-v308{background:linear-gradient(135deg,#ffb326,#ff6b00);color:#07111d}.draw-secondary-v308{background:rgba(255,255,255,.08);color:#fff;border:1px solid rgba(255,255,255,.12)!important}.draw-status-v308{display:block;min-height:22px;margin-top:12px;color:#00ffb3;font-weight:900}.draw-preview-head-v308{display:flex;align-items:flex-end;justify-content:space-between;gap:12px;margin-bottom:14px}.draw-machine-v308{display:grid;grid-template-columns:repeat(auto-fit,minmax(130px,1fr));gap:10px}.draw-slot-card-v308{min-height:92px;border-radius:16px;padding:11px;background:linear-gradient(145deg,rgba(15,48,78,.92),rgba(13,33,58,.92));border:1px solid rgba(0,255,179,.18);box-shadow:0 10px 26px rgba(0,0,0,.2);transform:translateY(0);transition:transform .2s ease,box-shadow .2s ease,border-color .2s ease}.draw-slot-card-v308 small{display:block;color:#00ffb3;font-weight:950}.draw-slot-card-v308 strong{display:block;color:#fff;margin:8px 0 4px;font-size:15px}.draw-slot-card-v308 span{color:#aebed0;font-size:12px;font-weight:900}.draw-machine-v308.is-rolling .draw-slot-card-v308{animation:breakziCardPulseV308 .32s ease-in-out infinite alternate;border-color:rgba(0,200,255,.65)}@keyframes breakziCardPulseV308{from{transform:translateY(0) scale(1);box-shadow:0 0 0 rgba(0,255,179,0)}to{transform:translateY(-4px) scale(1.02);box-shadow:0 0 22px rgba(0,255,179,.20)}}.draw-placeholder-v308{opacity:.62}.draw-match-preview-v308{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:10px;margin-top:18px}.draw-match-preview-v308 div{display:grid;grid-template-columns:auto 1fr auto 1fr;gap:9px;align-items:center;border-radius:14px;padding:10px;background:rgba(255,255,255,.055);border:1px solid rgba(255,255,255,.08)}.draw-match-preview-v308 b{color:#00ffb3}.draw-match-preview-v308 span{color:#fff;font-weight:900}.draw-match-preview-v308 em{color:#ffbd35;font-style:normal;font-weight:950;text-transform:uppercase}@media(max-width:900px){.draw-grid-v308{grid-template-columns:1fr}.draw-hero-v308{align-items:flex-start}.draw-orb-v308{width:96px;height:96px;min-width:96px}.draw-hero-v308 h2{font-size:28px}.breakzi-draw-v308{padding:16px}.draw-match-preview-v308 div{grid-template-columns:1fr}.draw-match-preview-v308 em{font-size:11px}}
/* ===== v309 independent public draw page ===== */
.breakzi-public-draw-section-v309{padding:40px 4vw 70px;background:radial-gradient(circle at 20% 0%,rgba(0,255,179,.12),transparent 32%),radial-gradient(circle at 82% 10%,rgba(0,166,255,.12),transparent 28%)}
.public-draw-shell-v309{max-width:1320px;margin:0 auto}.public-draw-hero-v309{position:relative;overflow:hidden;display:flex;align-items:center;justify-content:space-between;gap:24px;border:1px solid rgba(0,255,179,.26);border-radius:32px;padding:32px;background:linear-gradient(135deg,rgba(4,18,36,.96),rgba(5,47,47,.82));box-shadow:0 30px 100px rgba(0,0,0,.34),inset 0 0 0 1px rgba(255,255,255,.04)}
.public-draw-hero-v309:before{content:"";position:absolute;inset:-80px;background:repeating-linear-gradient(90deg,transparent 0 44px,rgba(0,255,179,.05) 45px 46px),repeating-linear-gradient(0deg,transparent 0 44px,rgba(0,191,255,.035) 45px 46px);animation:publicDrawGridV309 16s linear infinite;opacity:.9}.public-draw-hero-v309>*{position:relative;z-index:1}@keyframes publicDrawGridV309{from{transform:translate3d(0,0,0)}to{transform:translate3d(90px,45px,0)}}
.public-draw-hero-v309 h1{margin:6px 0 12px;font-size:clamp(38px,6vw,86px);line-height:.9;color:#fff;text-transform:uppercase;letter-spacing:-2px;text-shadow:0 0 34px rgba(0,255,179,.28)}.public-draw-hero-v309 p:not(.eyebrow){max-width:780px;color:#b9c8d7;font-weight:800;font-size:16px;line-height:1.65}.public-draw-orb-v309{width:150px;height:150px;min-width:150px;border-radius:50%;display:grid;place-items:center;align-content:center;position:relative;background:radial-gradient(circle,#00ffb3 0 12%,#00b8ff 14% 24%,rgba(0,255,179,.12) 42%,rgba(4,18,36,.75) 70%);box-shadow:0 0 70px rgba(0,255,179,.35),inset 0 0 30px rgba(255,255,255,.18)}.public-draw-orb-v309 span{position:absolute;inset:-10px;border-radius:50%;border:2px dashed rgba(255,255,255,.35);animation:publicDrawSpinV309 9s linear infinite}.public-draw-orb-v309 strong{font-size:46px;color:#001623}.public-draw-orb-v309 small{font-weight:950;text-transform:uppercase;color:#001623}@keyframes publicDrawSpinV309{to{transform:rotate(360deg)}}
.public-draw-grid-v309{display:grid;grid-template-columns:minmax(300px,430px) 1fr;gap:20px;margin-top:22px}.public-draw-panel-v309{border:1px solid rgba(255,255,255,.10);border-radius:26px;padding:22px;background:rgba(5,18,34,.78);box-shadow:0 22px 70px rgba(0,0,0,.26),inset 0 0 0 1px rgba(255,255,255,.03);backdrop-filter:blur(14px)}.public-draw-panel-v309 h2{margin:0 0 8px;color:#fff;text-transform:uppercase}.public-draw-panel-v309 p,.public-draw-stage-head-v309 span{color:#aebed0;font-weight:800}.public-draw-input-v309 textarea{width:100%;min-height:430px;resize:vertical;border-radius:20px;border:1px solid rgba(0,255,179,.26);background:rgba(0,8,18,.86);color:#fff;font-weight:850;line-height:1.6;padding:16px;outline:none}.public-draw-input-v309 textarea:focus{border-color:#00ffb3;box-shadow:0 0 0 4px rgba(0,255,179,.12)}.public-draw-actions-v309{display:flex;flex-wrap:wrap;gap:10px;margin-top:14px}.public-draw-actions-v309 button{border:0;border-radius:999px;padding:13px 17px;font-weight:950;cursor:pointer}.public-draw-primary-v309{background:linear-gradient(135deg,#00ffb3,#00c8ff);color:#00131c;box-shadow:0 12px 34px rgba(0,255,179,.26)}.public-draw-secondary-v309{background:rgba(255,255,255,.08);color:#fff;border:1px solid rgba(255,255,255,.12)!important}.public-draw-status-v309{display:block;min-height:23px;margin-top:12px;color:#00ffb3;font-weight:950}.public-draw-stage-head-v309{display:flex;align-items:flex-end;justify-content:space-between;gap:12px;margin-bottom:16px}.public-draw-machine-v309{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:14px;min-height:160px}.public-draw-card-v309{position:relative;overflow:hidden;border-radius:20px;padding:16px;background:linear-gradient(145deg,rgba(15,48,78,.94),rgba(13,33,58,.94));border:1px solid rgba(0,255,179,.20);box-shadow:0 12px 34px rgba(0,0,0,.22);transition:transform .22s ease,border-color .22s ease,box-shadow .22s ease}.public-draw-card-v309:before{content:"";position:absolute;inset:0;background:linear-gradient(115deg,transparent,rgba(255,255,255,.10),transparent);transform:translateX(-120%)}.public-draw-machine-v309.is-rolling .public-draw-card-v309{animation:publicDrawCardPulseV309 .34s ease-in-out infinite alternate;border-color:rgba(0,200,255,.68)}.public-draw-machine-v309.is-rolling .public-draw-card-v309:before{animation:publicDrawShineV309 .62s linear infinite}.public-draw-card-v309 small{display:block;color:#00ffb3;font-weight:950;text-transform:uppercase}.public-draw-card-v309 strong{display:block;color:#fff;margin:10px 0;font-size:18px}.public-draw-card-v309 em{display:inline-block;color:#ffbd35;font-style:normal;font-weight:950;letter-spacing:2px}.public-draw-empty-v309{grid-column:1/-1;border:1px dashed rgba(0,255,179,.24);border-radius:22px;padding:34px;color:#aebed0;font-weight:900;text-align:center}@keyframes publicDrawCardPulseV309{to{transform:translateY(-5px) scale(1.015);box-shadow:0 0 30px rgba(0,255,179,.20)}}@keyframes publicDrawShineV309{to{transform:translateX(120%)}}
.public-draw-pairs-v309{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:10px;margin-top:18px}.public-draw-pairs-v309 div{display:grid;grid-template-columns:auto 1fr auto 1fr;gap:9px;align-items:center;border-radius:16px;padding:12px;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.08)}.public-draw-pairs-v309 b{color:#00ffb3}.public-draw-pairs-v309 span{color:#fff;font-weight:900}.public-draw-pairs-v309 em{color:#ffbd35;font-style:normal;font-weight:950;text-transform:uppercase}@media(max-width:900px){.public-draw-hero-v309{align-items:flex-start;flex-direction:column}.public-draw-grid-v309{grid-template-columns:1fr}.public-draw-orb-v309{width:112px;height:112px;min-width:112px}.public-draw-input-v309 textarea{min-height:280px}.public-draw-pairs-v309 div{grid-template-columns:1fr}.public-draw-pairs-v309 em{font-size:11px}}
/* ===== v310 independent Wheel of Names style draw ===== */
.breakzi-public-draw-section-v310{padding:40px 4vw 70px;background:radial-gradient(circle at 16% 0%,rgba(0,255,179,.14),transparent 34%),radial-gradient(circle at 84% 6%,rgba(0,166,255,.16),transparent 30%),linear-gradient(180deg,#071423,#06111f)}
.public-draw-shell-v310{max-width:1440px;margin:0 auto}.public-draw-hero-v310{position:relative;overflow:hidden;display:flex;align-items:center;justify-content:space-between;gap:24px;border:1px solid rgba(0,255,179,.28);border-radius:34px;padding:32px;background:linear-gradient(135deg,rgba(4,18,36,.98),rgba(5,48,54,.84));box-shadow:0 30px 100px rgba(0,0,0,.34),inset 0 0 0 1px rgba(255,255,255,.04)}
.public-draw-hero-v310:before{content:"";position:absolute;inset:-90px;background:repeating-linear-gradient(90deg,transparent 0 46px,rgba(0,255,179,.055) 47px 48px),repeating-linear-gradient(0deg,transparent 0 46px,rgba(0,191,255,.04) 47px 48px);animation:publicDrawGridV310 16s linear infinite}.public-draw-hero-v310>*{position:relative;z-index:1}@keyframes publicDrawGridV310{to{transform:translate3d(94px,47px,0)}}
.public-draw-hero-v310 h1{margin:6px 0 12px;font-size:clamp(36px,5.8vw,82px);line-height:.92;color:#fff;text-transform:uppercase;letter-spacing:-2px;text-shadow:0 0 36px rgba(0,255,179,.28)}.public-draw-hero-v310 p:not(.eyebrow){max-width:850px;color:#b9c8d7;font-weight:850;font-size:16px;line-height:1.65}.public-draw-orb-v310{width:145px;height:145px;min-width:145px;border-radius:50%;display:grid;place-items:center;align-content:center;position:relative;background:radial-gradient(circle,#00ffb3 0 12%,#00b8ff 14% 24%,rgba(0,255,179,.12) 42%,rgba(4,18,36,.75) 70%);box-shadow:0 0 70px rgba(0,255,179,.36),inset 0 0 30px rgba(255,255,255,.18)}.public-draw-orb-v310 span{position:absolute;inset:-10px;border-radius:50%;border:2px dashed rgba(255,255,255,.35);animation:publicDrawSpinV310 9s linear infinite}.public-draw-orb-v310 strong{font-size:44px;color:#001623}.public-draw-orb-v310 small{font-weight:950;text-transform:uppercase;color:#001623}@keyframes publicDrawSpinV310{to{transform:rotate(360deg)}}
.public-draw-wheel-grid-v310{display:grid;grid-template-columns:minmax(300px,430px) minmax(420px,1fr);gap:22px;margin-top:22px}.public-draw-panel-v310{border:1px solid rgba(255,255,255,.10);border-radius:28px;padding:22px;background:rgba(5,18,34,.82);box-shadow:0 22px 70px rgba(0,0,0,.28),inset 0 0 0 1px rgba(255,255,255,.03);backdrop-filter:blur(14px)}.public-draw-panel-v310 h2{margin:0 0 8px;color:#fff;text-transform:uppercase}.public-draw-panel-v310 p,.public-draw-stage-head-v310 span{color:#aebed0;font-weight:800}.public-draw-input-v310 textarea{width:100%;min-height:450px;resize:vertical;border-radius:20px;border:1px solid rgba(0,255,179,.26);background:rgba(0,8,18,.86);color:#fff;font-weight:850;line-height:1.6;padding:16px;outline:none}.public-draw-input-v310 textarea:focus{border-color:#00ffb3;box-shadow:0 0 0 4px rgba(0,255,179,.12)}.public-draw-actions-v310{display:flex;flex-wrap:wrap;gap:10px;margin-top:14px}.public-draw-actions-v310 button{border:0;border-radius:999px;padding:13px 17px;font-weight:950;cursor:pointer}.public-draw-primary-v310{background:linear-gradient(135deg,#00ffb3,#00c8ff);color:#00131c;box-shadow:0 12px 34px rgba(0,255,179,.26)}.public-draw-secondary-v310{background:rgba(255,255,255,.08);color:#fff;border:1px solid rgba(255,255,255,.12)!important}.public-draw-status-v310{display:block;min-height:23px;margin-top:12px;color:#00ffb3;font-weight:950}.public-draw-stage-head-v310{display:flex;align-items:flex-end;justify-content:space-between;gap:12px;margin-bottom:16px}
.public-draw-wheel-stage-v310{display:flex;flex-direction:column;align-items:center;justify-content:flex-start;position:relative;overflow:hidden}.public-draw-wheel-stage-v310:before{content:"";position:absolute;inset:auto -20% -30% -20%;height:240px;background:radial-gradient(ellipse at center,rgba(0,255,179,.18),transparent 65%);pointer-events:none}.public-draw-wheel-wrap-v310{position:relative;width:min(76vw,560px);aspect-ratio:1;margin:12px auto 18px;filter:drop-shadow(0 25px 55px rgba(0,0,0,.46))}.public-draw-wheel-v310{position:absolute;inset:0;border-radius:50%;overflow:hidden;border:12px solid rgba(7,19,34,.95);box-shadow:0 0 0 2px rgba(0,255,179,.35),0 0 48px rgba(0,200,255,.24),inset 0 0 36px rgba(0,0,0,.35);will-change:transform}.public-draw-wheel-v310:after{content:"";position:absolute;inset:10%;border-radius:50%;background:radial-gradient(circle,transparent 62%,rgba(255,255,255,.16) 63%,transparent 64%);pointer-events:none}.public-draw-wheel-v310.is-spinning{box-shadow:0 0 0 2px rgba(0,255,179,.7),0 0 80px rgba(0,255,179,.34),inset 0 0 46px rgba(0,0,0,.36)}.public-draw-wheel-label-v310{position:absolute;left:50%;top:50%;width:50%;height:0;transform-origin:0 0;display:flex;justify-content:flex-end;align-items:center;padding-right:16px;color:#00131c;font-weight:950;text-transform:uppercase;font-size:clamp(9px,1.15vw,14px);text-shadow:0 1px rgba(255,255,255,.22);white-space:nowrap}.public-draw-wheel-label-v310 b{display:block;max-width:150px;overflow:hidden;text-overflow:ellipsis}.public-draw-wheel-core-v310{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:25%;aspect-ratio:1;border-radius:50%;display:grid;place-items:center;background:radial-gradient(circle,#fff 0 12%,#00ffb3 13% 48%,#071322 51% 100%);border:4px solid rgba(255,255,255,.92);box-shadow:0 0 34px rgba(0,255,179,.45),inset 0 0 20px rgba(0,0,0,.25);z-index:3}.public-draw-wheel-core-v310 span{font-weight:1000;color:#00131c;font-size:clamp(11px,1.8vw,22px)}.public-draw-pointer-v310{position:absolute;left:50%;top:-2px;transform:translateX(-50%);width:0;height:0;border-left:22px solid transparent;border-right:22px solid transparent;border-top:42px solid #ffbd35;filter:drop-shadow(0 5px 12px rgba(0,0,0,.45));z-index:5}.public-draw-pointer-v310:after{content:"";position:absolute;left:-10px;top:-38px;width:20px;height:20px;border-radius:50%;background:#fff}.public-draw-winner-v310{position:relative;z-index:1;min-height:56px;width:100%;border-radius:20px;padding:15px 18px;text-align:center;color:#fff;font-weight:1000;font-size:clamp(18px,2.4vw,34px);background:linear-gradient(135deg,rgba(0,255,179,.14),rgba(0,200,255,.11));border:1px solid rgba(0,255,179,.22);box-shadow:inset 0 0 0 1px rgba(255,255,255,.03)}
.public-draw-results-v310{display:grid;grid-template-columns:1fr 1fr;gap:22px;margin-top:22px}.public-draw-order-v310{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:10px;min-height:80px}.public-draw-order-chip-v310{border-radius:16px;padding:12px;background:linear-gradient(145deg,rgba(15,48,78,.94),rgba(13,33,58,.94));border:1px solid rgba(0,255,179,.18);box-shadow:0 12px 28px rgba(0,0,0,.2)}.public-draw-order-chip-v310 small{display:block;color:#00ffb3;font-weight:950}.public-draw-order-chip-v310 strong{display:block;color:#fff;margin-top:5px}.public-draw-pairs-v310{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:10px;min-height:80px}.public-draw-pairs-v310 div{display:grid;grid-template-columns:auto 1fr auto 1fr;gap:9px;align-items:center;border-radius:16px;padding:12px;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.08)}.public-draw-pairs-v310 b{color:#00ffb3}.public-draw-pairs-v310 span{color:#fff;font-weight:900}.public-draw-pairs-v310 em{color:#ffbd35;font-style:normal;font-weight:950;text-transform:uppercase}.public-draw-empty-v310{grid-column:1/-1;border:1px dashed rgba(0,255,179,.24);border-radius:22px;padding:24px;color:#aebed0;font-weight:900;text-align:center}
@media(max-width:1050px){.public-draw-wheel-grid-v310,.public-draw-results-v310{grid-template-columns:1fr}.public-draw-input-v310 textarea{min-height:280px}.public-draw-wheel-wrap-v310{width:min(92vw,520px)}}@media(max-width:720px){.public-draw-hero-v310{align-items:flex-start;flex-direction:column}.public-draw-orb-v310{width:112px;height:112px;min-width:112px}.public-draw-wheel-wrap-v310{width:min(88vw,390px)}.public-draw-pairs-v310 div{grid-template-columns:1fr}.public-draw-pairs-v310 em{font-size:11px}.public-draw-wheel-label-v310{font-size:8px;padding-right:8px}.public-draw-wheel-label-v310 b{max-width:84px}}
/* ===== v314 premium wheel draw: pointer-locked result, frozen landing, modern presentation ===== */
.public-draw-results-v310{grid-template-columns:1fr!important;max-width:1180px;margin-left:auto;margin-right:auto}
.public-draw-results-v310 .public-draw-panel-v310{background:linear-gradient(145deg,rgba(5,20,40,.92),rgba(4,35,44,.82))!important;border-color:rgba(0,255,179,.20)!important;box-shadow:0 28px 90px rgba(0,0,0,.34),0 0 42px rgba(0,255,179,.06),inset 0 0 0 1px rgba(255,255,255,.04)!important}
.public-draw-wheel-stage-v310{background:radial-gradient(circle at 50% 34%,rgba(0,255,179,.16),transparent 38%),linear-gradient(145deg,rgba(3,12,28,.96),rgba(5,29,43,.90))!important;border-color:rgba(0,255,179,.22)!important}
.public-draw-wheel-wrap-v310{width:min(78vw,640px)!important;filter:drop-shadow(0 32px 80px rgba(0,0,0,.62)) drop-shadow(0 0 44px rgba(0,255,179,.16))!important}
.public-draw-wheel-v310{border:14px solid rgba(2,10,22,.98)!important;box-shadow:0 0 0 3px rgba(0,255,179,.42),0 0 70px rgba(0,200,255,.22),inset 0 0 48px rgba(0,0,0,.42)!important}
.public-draw-wheel-v310:before{content:"";position:absolute;inset:0;border-radius:50%;background:radial-gradient(circle at 34% 28%,rgba(255,255,255,.35),transparent 18%),radial-gradient(circle,transparent 58%,rgba(0,0,0,.24) 100%);pointer-events:none;z-index:1}
.public-draw-wheel-v310.is-spinning{box-shadow:0 0 0 4px rgba(0,255,179,.80),0 0 110px rgba(0,255,179,.42),0 0 160px rgba(0,200,255,.20),inset 0 0 56px rgba(0,0,0,.44)!important}
.public-draw-wheel-label-v310{z-index:2;padding-right:22px!important;font-size:clamp(10px,1.25vw,16px)!important;letter-spacing:.2px}
.public-draw-wheel-label-v310 b{max-width:175px!important;color:#fff!important;background:linear-gradient(135deg,rgba(2,10,23,.78),rgba(2,26,37,.62));border:1px solid rgba(255,255,255,.22);border-radius:999px;padding:6px 10px;box-shadow:0 8px 22px rgba(0,0,0,.28);text-shadow:0 1px 3px rgba(0,0,0,.65)!important;backdrop-filter:blur(5px)}
.public-draw-pointer-v310{top:-8px!important;border-left-width:28px!important;border-right-width:28px!important;border-top:58px solid #ffbd35!important;filter:drop-shadow(0 9px 18px rgba(0,0,0,.55)) drop-shadow(0 0 18px rgba(255,189,53,.45))!important}
.public-draw-pointer-v310:after{left:-13px!important;top:-52px!important;width:26px!important;height:26px!important;box-shadow:0 0 18px rgba(255,255,255,.65)}
.public-draw-wheel-core-v310{background:radial-gradient(circle,#fff 0 10%,#00ffb3 11% 46%,#00c8ff 47% 58%,#071322 60% 100%)!important;box-shadow:0 0 42px rgba(0,255,179,.58),0 0 76px rgba(0,200,255,.20),inset 0 0 24px rgba(0,0,0,.30)!important}
.public-draw-winner-v310{background:linear-gradient(135deg,rgba(0,255,179,.18),rgba(0,200,255,.13),rgba(255,189,53,.10))!important;border-color:rgba(0,255,179,.34)!important;box-shadow:0 18px 60px rgba(0,0,0,.24),inset 0 0 0 1px rgba(255,255,255,.06)!important;letter-spacing:.3px}
.public-draw-order-v310{grid-template-columns:repeat(auto-fit,minmax(210px,1fr))!important;gap:14px!important}
.public-draw-order-chip-v310{position:relative;overflow:hidden;border-radius:22px!important;padding:16px 18px!important;background:linear-gradient(145deg,rgba(0,255,179,.13),rgba(0,200,255,.09) 40%,rgba(9,26,48,.96))!important;border:1px solid rgba(0,255,179,.24)!important;box-shadow:0 16px 38px rgba(0,0,0,.26),inset 0 0 0 1px rgba(255,255,255,.04)!important}
.public-draw-order-chip-v310:before{content:"";position:absolute;inset:-60% auto -60% -30%;width:45%;background:linear-gradient(90deg,transparent,rgba(255,255,255,.18),transparent);transform:rotate(12deg)}
.public-draw-order-chip-v310 small{font-size:15px!important;color:#00ffb3!important;text-shadow:0 0 14px rgba(0,255,179,.35)}
.public-draw-order-chip-v310 strong{font-size:18px!important;line-height:1.18;text-transform:uppercase;letter-spacing:.2px}
.public-draw-pairs-v310{display:none!important}
.public-draw-primary-v310{font-size:15px!important;padding:14px 24px!important;background:linear-gradient(135deg,#00ffb3,#00d8ff 56%,#ffbd35)!important;box-shadow:0 14px 42px rgba(0,255,179,.30),0 0 24px rgba(0,200,255,.16)!important}
@media(max-width:720px){.public-draw-wheel-wrap-v310{width:min(90vw,430px)!important}.public-draw-wheel-label-v310 b{max-width:92px!important;padding:4px 7px}.public-draw-order-v310{grid-template-columns:1fr!important}}
/* ===== v314 extra premium draw wheel polish ===== */
.public-draw-wheel-stage-v310{background:radial-gradient(circle at 50% 18%,rgba(0,255,179,.12),transparent 32%),linear-gradient(135deg,rgba(5,18,34,.96),rgba(2,10,23,.98))!important}
.public-draw-wheel-wrap-v310{width:min(78vw,610px)!important;filter:drop-shadow(0 30px 70px rgba(0,0,0,.55)) drop-shadow(0 0 42px rgba(0,255,179,.18))!important}
.public-draw-wheel-v310{border:16px solid rgba(1,7,18,.98)!important;box-shadow:0 0 0 3px rgba(0,255,179,.48),0 0 95px rgba(0,255,179,.28),0 0 145px rgba(0,200,255,.16),inset 0 0 54px rgba(0,0,0,.50)!important}
.public-draw-wheel-label-v310 b{background:linear-gradient(135deg,rgba(3,10,22,.88),rgba(6,31,48,.74))!important;border-color:rgba(255,255,255,.30)!important;box-shadow:0 10px 24px rgba(0,0,0,.32),inset 0 0 0 1px rgba(0,255,179,.08)!important}
.public-draw-pointer-v310{border-top-color:#ffd35a!important;filter:drop-shadow(0 10px 20px rgba(0,0,0,.62)) drop-shadow(0 0 22px rgba(255,211,90,.68))!important}
.public-draw-winner-v310{background:linear-gradient(135deg,rgba(0,255,179,.24),rgba(0,200,255,.16),rgba(255,211,90,.13))!important;border-color:rgba(0,255,179,.46)!important;text-shadow:0 4px 18px rgba(0,0,0,.42)!important}
.public-draw-order-chip-v310{background:linear-gradient(135deg,rgba(0,255,179,.14),rgba(0,200,255,.10),rgba(13,30,52,.90))!important;border-color:rgba(0,255,179,.28)!important}
/* ===== v317 compact admin MENU + mirrored second-player score controls ===== */
.ko-row{
grid-template-columns:74px minmax(190px,1.35fr) 66px 64px 66px minmax(190px,1.35fr) minmax(138px,auto) minmax(104px,auto) minmax(112px,auto)!important;
}
.ko-side-actions{
min-width:112px!important;
justify-content:center!important;
}
.admin-action-row-v317{
display:flex!important;
align-items:center!important;
justify-content:center!important;
width:100%!important;
}
.admin-menu-btn-v317{
min-width:82px!important;
padding:8px 14px!important;
border-radius:999px!important;
background:linear-gradient(135deg,#00ff8a,#00d4ff)!important;
color:#001827!important;
font-weight:1000!important;
letter-spacing:.4px!important;
box-shadow:0 0 18px rgba(0,255,170,.28)!important;
}
.ko-player-side-b{
justify-content:flex-start!important;
}
.ko-player-side-b .inline-score-actions-b{
order:-1!important;
margin-left:0!important;
margin-right:8px!important;
}
.ko-player-side-a .inline-score-actions-a{
margin-left:8px!important;
}
.breakzi-admin-menu-modal-v317{
position:fixed;
inset:0;
z-index:10040;
display:grid;
place-items:center;
padding:22px;
background:rgba(0,6,18,.72);
backdrop-filter:blur(14px);
}
.breakzi-admin-menu-card-v317{
width:min(430px,100%);
position:relative;
border:1px solid rgba(0,255,170,.35);
border-radius:26px;
padding:24px;
background:
radial-gradient(circle at 20% 0%,rgba(0,255,170,.18),transparent 34%),
linear-gradient(145deg,#061427,#0a2234 72%,#062a2d);
color:#fff;
box-shadow:0 30px 90px rgba(0,0,0,.55),0 0 45px rgba(0,255,170,.16);
}
.breakzi-admin-menu-close-v317{
position:absolute;right:16px;top:14px;
width:38px;height:38px;border-radius:50%;border:0;
background:rgba(255,255,255,.12);color:#fff;font-size:26px;font-weight:1000;cursor:pointer;
}
.breakzi-admin-menu-kicker-v317{
color:#00ff9d;
font-size:12px;
font-weight:1000;
letter-spacing:2px;
text-transform:uppercase;
margin-bottom:8px;
}
.breakzi-admin-menu-card-v317 h3{
margin:0;
font-size:30px;
line-height:1.05;
}
.breakzi-admin-menu-card-v317 p{
margin:10px 0 18px;
color:#b9c7d9;
font-weight:900;
}
.breakzi-admin-menu-grid-v317{
display:grid;
grid-template-columns:1fr 1fr;
gap:12px;
}
.breakzi-admin-menu-grid-v317 button{
border:1px solid rgba(0,255,170,.35);
border-radius:18px;
min-height:64px;
padding:12px;
background:linear-gradient(145deg,rgba(0,255,170,.16),rgba(0,212,255,.10));
color:#fff;
font-weight:1000;
cursor:pointer;
box-shadow:inset 0 1px 0 rgba(255,255,255,.10);
}
.breakzi-admin-menu-grid-v317 button:hover{
transform:translateY(-1px);
background:linear-gradient(145deg,rgba(0,255,170,.28),rgba(0,212,255,.18));
}
@media(max-width:1150px){
.ko-row{grid-template-columns:64px minmax(160px,1.15fr) 54px 56px 54px minmax(160px,1.15fr) minmax(120px,auto) 92px minmax(98px,auto)!important;}
.ko-side-actions{min-width:98px!important;}
}
@media(max-width:850px){
.ko-row{
grid-template-columns:54px minmax(0,1fr) 56px!important;
grid-template-areas:
"id playerA scoreA"
"id playerB scoreB"
"time time table"
"reset reset reset"
"actions actions actions"!important;
}
.ko-player-side-b .inline-score-actions-b{margin-right:6px!important;}
.admin-menu-btn-v317{min-height:34px!important;padding:8px 18px!important;font-size:13px!important;}
.breakzi-admin-menu-grid-v317{grid-template-columns:1fr;}
}
/* ===== v318 draw shuffle button + clickable wheel center + list-view player separator ===== */
.public-draw-actions-v310{
align-items:center!important;
gap:10px!important;
flex-wrap:wrap!important;
}
.public-draw-shuffle-v318{
display:inline-flex!important;
align-items:center!important;
gap:9px!important;
background:linear-gradient(135deg,#2f7dff,#00c8ff)!important;
color:#fff!important;
border:0!important;
box-shadow:0 12px 28px rgba(47,125,255,.24),0 0 18px rgba(0,200,255,.18)!important;
}
.shuffle-icon-v318{
width:22px;height:22px;border-radius:8px;
display:inline-grid;place-items:center;
font-size:20px;line-height:1;font-weight:1000;
transform:rotate(-8deg);
color:#fff;
text-shadow:0 2px 8px rgba(0,0,0,.35);
}
.public-draw-wheel-core-button-v318{
cursor:pointer!important;
border:4px solid rgba(255,255,255,.92)!important;
appearance:none!important;
transition:transform .16s ease, box-shadow .16s ease, filter .16s ease!important;
}
.public-draw-wheel-core-button-v318:hover{
transform:translate(-50%,-50%) scale(1.045)!important;
filter:brightness(1.08)!important;
}
.public-draw-wheel-core-button-v318:active{
transform:translate(-50%,-50%) scale(.97)!important;
}
.ko-center-reset{
position:relative!important;
display:flex!important;
align-items:center!important;
justify-content:center!important;
gap:7px!important;
min-height:100%!important;
background:linear-gradient(180deg,rgba(255,255,255,.05),rgba(255,255,255,.02))!important;
border-left:1px solid rgba(255,255,255,.10)!important;
border-right:1px solid rgba(255,255,255,.10)!important;
}
.ko-player-separator-v318{
width:40px!important;
height:28px!important;
border-radius:4px!important;
display:inline-grid!important;
place-items:center!important;
background:rgba(105,145,210,.45)!important;
color:#fff!important;
font-size:22px!important;
line-height:1!important;
font-weight:1000!important;
box-shadow:inset 0 0 0 1px rgba(255,255,255,.10),0 4px 10px rgba(0,0,0,.18)!important;
}
.ko-row{
box-shadow:inset 0 -1px 0 rgba(255,255,255,.08),inset 0 1px 0 rgba(0,0,0,.10)!important;
}
.ko-player-side-a{
border-right:1px solid rgba(255,255,255,.06)!important;
}
.ko-player-side-b{
border-left:1px solid rgba(255,255,255,.06)!important;
}
@media(max-width:720px){
.public-draw-shuffle-v318{width:100%!important;justify-content:center!important;}
.ko-player-separator-v318{width:34px!important;height:24px!important;font-size:18px!important;}
}
/* ===== v319 French tournament labels + premium two-tone Breakzi wheel ===== */
.public-draw-wheel-v310{background-color:#071322!important;}
.public-draw-wheel-label-v310 b{background:linear-gradient(135deg,rgba(0,0,0,.86),rgba(4,22,28,.88))!important;border:1px solid rgba(0,255,179,.44)!important;color:#ffffff!important;box-shadow:0 10px 26px rgba(0,0,0,.44),0 0 18px rgba(0,255,179,.12),inset 0 0 0 1px rgba(255,255,255,.06)!important;}
.public-draw-wheel-v310:before{background:radial-gradient(circle at 34% 28%,rgba(255,255,255,.24),transparent 17%),radial-gradient(circle at 50% 50%,transparent 52%,rgba(0,0,0,.34) 76%,rgba(0,255,179,.12) 100%)!important;}
.public-draw-wheel-v310:after{background:radial-gradient(circle,transparent 58%,rgba(0,255,179,.22) 59%,transparent 61%,transparent 70%,rgba(255,255,255,.12) 71%,transparent 72%)!important;}
.public-draw-wheel-core-v310{background:radial-gradient(circle,#ffffff 0 10%,#00ffb3 11% 51%,#071322 53% 100%)!important;border-color:rgba(255,255,255,.95)!important;box-shadow:0 0 50px rgba(0,255,179,.62),0 0 100px rgba(0,255,179,.18),inset 0 0 24px rgba(0,0,0,.38)!important;}
.public-draw-pointer-v310{border-top-color:#00ffb3!important;filter:drop-shadow(0 10px 20px rgba(0,0,0,.62)) drop-shadow(0 0 22px rgba(0,255,179,.72))!important;}
.public-draw-pointer-v310:after{box-shadow:0 0 18px rgba(0,255,179,.75)!important;}
.public-draw-winner-v310{background:linear-gradient(135deg,rgba(0,255,179,.20),rgba(4,12,24,.96) 62%,rgba(0,255,179,.10))!important;border-color:rgba(0,255,179,.48)!important;}
.public-draw-order-chip-v310{background:linear-gradient(135deg,rgba(0,255,179,.16),rgba(7,19,34,.96) 54%,rgba(2,9,18,.98))!important;border-color:rgba(0,255,179,.32)!important;}
.scoreboard-tournament-selector .tournament-select-card span{text-transform:none;}
/* ===== v320 remove highlighted box behind center V separator ===== */
.ko-player-separator-v318{
background:transparent!important;
border:0!important;
box-shadow:none!important;
width:auto!important;
height:auto!important;
min-width:18px!important;
padding:0!important;
color:#ffffff!important;
opacity:.95!important;
text-shadow:0 1px 3px rgba(0,0,0,.45)!important;
}
.ko-center-reset{
background:transparent!important;
border-left:0!important;
border-right:0!important;
box-shadow:none!important;
}
@media(max-width:720px){
.ko-player-separator-v318{
width:auto!important;
height:auto!important;
font-size:18px!important;
}
}
/* ===== Breakzi v321: professional login modal polish ===== */
#adminModal.modal{
background:radial-gradient(circle at 50% 0%,rgba(0,255,170,.18),rgba(2,8,19,.82) 42%,rgba(0,0,0,.78));
backdrop-filter:blur(14px);
}
#adminModal .login-card{
width:min(520px,calc(100vw - 28px))!important;
padding:0!important;
overflow:hidden!important;
border-radius:30px!important;
border:1px solid rgba(0,255,170,.34)!important;
background:linear-gradient(145deg,rgba(5,17,31,.98),rgba(6,30,42,.96) 52%,rgba(2,10,19,.98))!important;
color:#f5fffb!important;
box-shadow:0 38px 110px rgba(0,0,0,.58),0 0 0 1px rgba(255,255,255,.04) inset,0 0 65px rgba(0,255,170,.16)!important;
}
#adminModal .login-card:before{
content:"";
position:absolute;
inset:0;
pointer-events:none;
background:linear-gradient(rgba(0,255,170,.08) 1px,transparent 1px),linear-gradient(90deg,rgba(0,255,170,.07) 1px,transparent 1px);
background-size:38px 38px;
opacity:.23;
mask-image:linear-gradient(to bottom,#000,transparent 75%);
}
#adminModal .login-brand-panel{
position:relative;
display:flex;
align-items:center;
gap:14px;
padding:28px 30px 18px;
border-bottom:1px solid rgba(255,255,255,.08);
background:radial-gradient(circle at 18% 8%,rgba(0,255,170,.22),transparent 36%);
}
#adminModal .login-brand-orb{
width:52px;
height:52px;
border-radius:50%;
display:grid;
place-items:center;
color:#021016;
font-size:24px;
font-weight:1000;
background:linear-gradient(135deg,#00ff7a,#00d6c8);
box-shadow:0 0 30px rgba(0,255,170,.38),inset 0 0 0 4px rgba(255,255,255,.28);
}
#adminModal .login-brand-panel strong{
display:block;
color:#fff;
font-size:24px;
line-height:1.05;
letter-spacing:.2px;
}
#adminModal .login-brand-panel span{
display:block;
margin-top:5px;
color:#a9bed3;
font-size:13px;
font-weight:900;
}
#adminModal .login-tabs{
margin:22px 30px 18px!important;
padding:6px!important;
border-radius:18px!important;
background:rgba(255,255,255,.06)!important;
border:1px solid rgba(255,255,255,.10)!important;
}
#adminModal .login-tab{
min-height:46px!important;
border-radius:13px!important;
color:#b9cada!important;
font-size:14px!important;
letter-spacing:.2px;
transition:transform .18s ease,background .18s ease,color .18s ease;
}
#adminModal .login-tab:hover{transform:translateY(-1px);color:#fff!important;}
#adminModal .login-tab.active{
color:#021016!important;
background:linear-gradient(135deg,#00ff7a,#00d6c8)!important;
box-shadow:0 12px 30px rgba(0,255,170,.22)!important;
}
#adminModal .login-panel{
position:relative;
padding:0 30px 30px!important;
}
#adminModal .login-panel h2{
margin:0 0 8px!important;
color:#fff!important;
font-size:32px!important;
line-height:1.05!important;
letter-spacing:-.7px!important;
}
#adminModal .login-panel p:not(.login-error){
margin:0 0 18px!important;
color:#b7c7d6!important;
font-size:14px!important;
line-height:1.45!important;
font-weight:800!important;
}
#adminModal .login-panel input{
min-height:54px!important;
margin:10px 0!important;
border-radius:16px!important;
border:1px solid rgba(0,255,170,.22)!important;
background:rgba(2,8,19,.72)!important;
color:#fff!important;
box-shadow:inset 0 0 0 1px rgba(255,255,255,.03)!important;
}
#adminModal .login-panel input:focus{
border-color:rgba(0,255,170,.72)!important;
box-shadow:0 0 0 4px rgba(0,255,170,.12)!important;
}
#adminModal .admin-submit{
min-height:54px!important;
margin-top:12px!important;
border-radius:16px!important;
color:#021016!important;
font-size:15px!important;
letter-spacing:.3px!important;
background:linear-gradient(135deg,#00ff7a,#00d6c8)!important;
box-shadow:0 18px 42px rgba(0,255,170,.22)!important;
}
#adminModal .modal-close{
right:18px!important;
top:18px!important;
width:44px!important;
height:44px!important;
border-radius:50%!important;
color:#fff!important;
background:rgba(255,255,255,.08)!important;
border:1px solid rgba(255,255,255,.12)!important;
font-size:26px!important;
line-height:1!important;
z-index:5;
}
#adminModal .modal-close:hover{
background:rgba(255,255,255,.14)!important;
}
#adminModal .login-error{
min-height:22px!important;
margin:12px 0 0!important;
color:#ff6b7a!important;
font-size:13px!important;
font-weight:900!important;
}
@media(max-width:560px){
#adminModal .login-brand-panel{padding:24px 22px 16px;}
#adminModal .login-tabs{margin:18px 22px 16px!important;}
#adminModal .login-panel{padding:0 22px 24px!important;}
#adminModal .login-panel h2{font-size:28px!important;}
}
/* v322: show complete player names on the public draw wheel instead of truncating with ellipses. */
.public-draw-wheel-label-v310{
padding-right:12px!important;
font-size:clamp(7px,.82vw,11px)!important;
letter-spacing:.05px!important;
line-height:1.02!important;
}
.public-draw-wheel-label-v310 b{
max-width:220px!important;
min-width:74px!important;
white-space:normal!important;
overflow:visible!important;
text-overflow:clip!important;
text-align:center!important;
line-height:1.02!important;
padding:5px 8px!important;
display:inline-block!important;
word-break:normal!important;
overflow-wrap:normal!important;
}
.public-draw-wheel-label-v310.is-medium-name-v322 b{font-size:.88em!important;max-width:235px!important;}
.public-draw-wheel-label-v310.is-long-name-v322 b{font-size:.76em!important;max-width:250px!important;letter-spacing:-.15px!important;}
@media(max-width:720px){
.public-draw-wheel-label-v310{font-size:6.5px!important;padding-right:6px!important;}
.public-draw-wheel-label-v310 b{max-width:118px!important;min-width:52px!important;padding:3px 5px!important;line-height:1!important;}
.public-draw-wheel-label-v310.is-long-name-v322 b{font-size:.68em!important;max-width:128px!important;}
}
/* ===== v323: professional player score-link match layout polish ===== */
body.player-link-view .player-score-screen{
background:
radial-gradient(circle at 18% 22%, rgba(0,255,179,.16), transparent 30%),
radial-gradient(circle at 82% 28%, rgba(0,194,255,.13), transparent 32%),
linear-gradient(135deg,#061827 0%,#09263a 48%,#042821 100%)!important;
}
body.player-link-view .player-score-screen::before{
background:
linear-gradient(135deg, transparent 0 68%, rgba(0,255,179,.055) 68% 100%),
linear-gradient(90deg, rgba(255,255,255,.035) 1px, transparent 1px),
linear-gradient(0deg, rgba(255,255,255,.025) 1px, transparent 1px)!important;
background-size:auto, 72px 72px, 72px 72px!important;
opacity:.9!important;
}
body.player-link-view .player-score-screen h1{
margin-top:18px!important;
margin-bottom:42px!important;
max-width:95vw!important;
font-size:clamp(34px,4.2vw,62px)!important;
letter-spacing:10px!important;
line-height:1.04!important;
}
body.player-link-view .player-score-layout{
width:min(1560px,96vw)!important;
grid-template-columns:150px minmax(300px,1fr) minmax(260px,320px) minmax(300px,1fr) 150px!important;
gap:30px!important;
}
body.player-link-view .score-player{
position:relative!important;
min-height:560px!important;
padding:22px 20px 24px!important;
border:1px solid rgba(0,255,179,.18)!important;
border-radius:34px!important;
background:
radial-gradient(circle at 50% 7%, rgba(0,255,179,.14), transparent 32%),
linear-gradient(180deg, rgba(255,255,255,.055), rgba(255,255,255,.018))!important;
box-shadow:0 24px 70px rgba(0,0,0,.24), inset 0 1px 0 rgba(255,255,255,.08)!important;
}
body.player-link-view .portrait-frame{
width:190px!important;
height:190px!important;
margin-top:6px!important;
border:2px solid rgba(0,255,179,.45)!important;
background:linear-gradient(135deg, rgba(0,255,179,.2), rgba(6,19,34,.86))!important;
box-shadow:0 18px 55px rgba(0,0,0,.36), 0 0 42px rgba(0,255,179,.16)!important;
}
body.player-link-view .portrait-initials{
background:
radial-gradient(circle at 40% 30%,rgba(255,255,255,.18),transparent 30%),
linear-gradient(135deg,#113b4d,#071827)!important;
font-size:64px!important;
letter-spacing:.02em!important;
}
body.player-link-view .morocco-badge{
right:-18px!important;
bottom:30px!important;
width:62px!important;
height:44px!important;
border-radius:4px!important;
font-size:24px!important;
box-shadow:0 12px 26px rgba(0,0,0,.38)!important;
}
body.player-link-view .giant-score{
margin-top:26px!important;
font-size:clamp(100px,10.5vw,176px)!important;
line-height:.82!important;
text-shadow:0 10px 24px rgba(0,0,0,.52), 0 0 30px rgba(255,255,255,.08)!important;
}
body.player-link-view .score-player-name{
width:100%!important;
max-width:440px!important;
margin-top:26px!important;
padding:12px 20px!important;
border:1px solid rgba(0,255,179,.28)!important;
border-radius:22px!important;
background:linear-gradient(90deg, rgba(0,255,179,.13), rgba(0,194,255,.07))!important;
color:#fff!important;
font-size:clamp(24px,2.15vw,40px)!important;
line-height:1.04!important;
letter-spacing:.01em!important;
overflow-wrap:anywhere!important;
box-shadow:0 14px 30px rgba(0,0,0,.2)!important;
}
body.player-link-view .center-match-info{
align-self:stretch!important;
display:flex!important;
flex-direction:column!important;
align-items:center!important;
justify-content:center!important;
padding:22px 16px!important;
border:1px solid rgba(255,255,255,.10)!important;
border-radius:32px!important;
background:linear-gradient(180deg, rgba(255,255,255,.04), rgba(0,0,0,.10))!important;
}
body.player-link-view .break-selector{
margin-bottom:22px!important;
}
body.player-link-view .break-label{
color:#d8e7f3!important;
font-weight:900!important;
letter-spacing:.02em!important;
}
body.player-link-view .lag-btn{
border:1px solid rgba(0,255,179,.24)!important;
background:rgba(255,255,255,.07)!important;
color:#fff!important;
box-shadow:none!important;
}
body.player-link-view .lag-btn.active{
background:linear-gradient(90deg,#00ffb3,#00c2ff)!important;
color:#00131d!important;
}
body.player-link-view .table-name{
font-size:clamp(28px,2.8vw,42px)!important;
letter-spacing:2px!important;
}
body.player-link-view .match-time-line{
color:#dbe8f2!important;
font-weight:900!important;
font-size:18px!important;
margin-bottom:12px!important;
}
body.player-link-view .race-text{
color:#aebdca!important;
font-size:22px!important;
}
body.player-link-view .race-number{
color:#ffb124!important;
font-size:64px!important;
text-shadow:0 0 22px rgba(255,177,36,.16)!important;
}
body.player-link-view .edge-controls{
gap:56px!important;
}
body.player-link-view .big-score-btn{
width:118px!important;
height:118px!important;
font-size:80px!important;
transition:transform .14s ease, filter .14s ease!important;
}
body.player-link-view .big-score-btn:active,
body.player-link-view .runout-btn:active{
transform:scale(.94)!important;
}
body.player-link-view .runout-controls{
margin-top:24px!important;
}
body.player-link-view .runout-label{
color:#d9e4ee!important;
font-size:22px!important;
}
body.player-link-view .player-screen-reset{
right:32px!important;
left:auto!important;
transform:none!important;
bottom:28px!important;
background:rgba(255,255,255,.10)!important;
border-color:rgba(255,255,255,.32)!important;
}
@media(max-width:900px){
body.player-link-view .player-score-screen h1{font-size:25px!important;letter-spacing:4px!important;margin-top:64px!important;margin-bottom:20px!important;}
body.player-link-view .player-score-layout{grid-template-columns:58px 1fr 98px 1fr 58px!important;gap:8px!important;width:100%!important;}
body.player-link-view .score-player{min-height:420px!important;padding:12px 8px!important;border-radius:20px!important;}
body.player-link-view .portrait-frame{width:92px!important;height:92px!important;}
body.player-link-view .portrait-initials{font-size:30px!important;}
body.player-link-view .morocco-badge{width:36px!important;height:25px!important;font-size:14px!important;right:-10px!important;bottom:12px!important;}
body.player-link-view .giant-score{font-size:76px!important;margin-top:16px!important;}
body.player-link-view .score-player-name{font-size:16px!important;padding:8px 8px!important;border-radius:14px!important;}
body.player-link-view .center-match-info{padding:10px 6px!important;border-radius:18px!important;}
body.player-link-view .table-name{font-size:17px!important;}
body.player-link-view .race-number{font-size:34px!important;}
body.player-link-view .big-score-btn{width:54px!important;height:54px!important;font-size:38px!important;}
body.player-link-view .edge-controls{gap:36px!important;}
body.player-link-view .runout-label{font-size:14px!important;}
}
/* ===== v324: clean score-link center info and split tournament title/date ===== */
body.player-link-view .player-score-title-v324{
display:flex!important;
flex-direction:column!important;
align-items:center!important;
justify-content:center!important;
gap:8px!important;
}
body.player-link-view .player-score-title-v324 span{
display:block!important;
}
body.player-link-view .player-score-title-v324 small{
display:block!important;
color:#00ffb3!important;
font-size:clamp(17px,1.6vw,25px)!important;
letter-spacing:6px!important;
line-height:1!important;
text-shadow:0 0 20px rgba(0,255,179,.22)!important;
}
body.player-link-view .center-match-info{
border:none!important;
background:transparent!important;
box-shadow:none!important;
border-radius:0!important;
}
@media(max-width:900px){
body.player-link-view .player-score-title-v324 small{font-size:13px!important;letter-spacing:3px!important;}
}
/* ===== v325: current-break cue ball marker on player badge/portrait ===== */
body.player-link-view .portrait-frame .cueball-break-icon-v325{
position:absolute!important;
top:-28px!important;
left:50%!important;
transform:translateX(-50%)!important;
width:42px!important;
height:42px!important;
border-radius:999px!important;
z-index:8!important;
background:
radial-gradient(circle at 35% 30%, #ffffff 0 24%, #f7fbff 25% 56%, #dce8f2 57% 74%, #9fb8cc 75% 100%)!important;
border:3px solid rgba(255,255,255,.95)!important;
box-shadow:0 10px 24px rgba(0,0,0,.45), 0 0 0 6px rgba(0,255,179,.18), 0 0 34px rgba(0,255,179,.35)!important;
}
body.player-link-view .portrait-frame .cueball-break-icon-v325::after{
content:"BREAK";
position:absolute;
left:50%;
top:44px;
transform:translateX(-50%);
padding:4px 10px;
border-radius:999px;
background:rgba(0,255,179,.16);
border:1px solid rgba(0,255,179,.42);
color:#00ffb3;
font-size:10px;
font-weight:1000;
letter-spacing:1.4px;
text-shadow:none;
white-space:nowrap;
}
@media(max-width:900px){
body.player-link-view .portrait-frame .cueball-break-icon-v325{width:26px!important;height:26px!important;top:-16px!important;border-width:2px!important;}
body.player-link-view .portrait-frame .cueball-break-icon-v325::after{top:28px;font-size:8px;padding:2px 6px;letter-spacing:.8px;}
}
/* ===== v326: score validation toast, red correction button, cleaner cue ball marker ===== */
.match-finished-secondary{
background:linear-gradient(135deg,#ff3045,#b8142a)!important;
border:1px solid rgba(255,255,255,.16)!important;
color:#fff!important;
box-shadow:0 14px 34px rgba(255,48,69,.22)!important;
}
.match-finished-secondary:hover{
filter:brightness(1.08)!important;
transform:translateY(-1px);
}
.breakzi-score-validated-toast-v326{
position:fixed!important;
left:50%!important;
top:34px!important;
transform:translate(-50%,-18px) scale(.96)!important;
z-index:10000050!important;
display:flex!important;
align-items:center!important;
gap:12px!important;
min-width:min(420px,calc(100vw - 32px))!important;
justify-content:center!important;
padding:16px 22px!important;
border-radius:22px!important;
background:linear-gradient(135deg,rgba(0,255,179,.94),rgba(0,201,167,.96))!important;
color:#02131f!important;
border:1px solid rgba(255,255,255,.32)!important;
box-shadow:0 26px 80px rgba(0,0,0,.42),0 0 42px rgba(0,255,179,.36)!important;
opacity:0!important;
pointer-events:none!important;
transition:opacity .24s ease, transform .24s ease!important;
}
.breakzi-score-validated-toast-v326.show{
opacity:1!important;
transform:translate(-50%,0) scale(1)!important;
}
.breakzi-score-validated-toast-v326 strong{
font-size:clamp(16px,1.5vw,21px)!important;
font-weight:1000!important;
letter-spacing:.2px!important;
}
.breakzi-score-validated-icon-v326{
width:34px!important;
height:34px!important;
border-radius:12px!important;
display:grid!important;
place-items:center!important;
background:rgba(2,19,31,.16)!important;
color:#02131f!important;
font-size:25px!important;
font-weight:1000!important;
}
body.player-link-view .portrait-frame .cueball-break-icon-v325{
top:-14px!important;
right:-14px!important;
left:auto!important;
transform:none!important;
width:34px!important;
height:34px!important;
border-width:3px!important;
z-index:12!important;
box-shadow:0 8px 18px rgba(0,0,0,.42),0 0 0 4px rgba(0,255,179,.18),0 0 24px rgba(0,255,179,.34)!important;
}
body.player-link-view .portrait-frame .cueball-break-icon-v325::after{
display:none!important;
content:""!important;
}
@media(max-width:900px){
body.player-link-view .portrait-frame .cueball-break-icon-v325{
width:24px!important;
height:24px!important;
top:-9px!important;
right:-9px!important;
border-width:2px!important;
}
}
/* ===== v327: remove cue ball marker and show validated score as final black screen ===== */
body.player-link-view .portrait-frame .cueball-break-icon-v325{display:none!important;}
.breakzi-score-validated-final-v327{
position:fixed!important;
inset:0!important;
z-index:10000080!important;
display:grid!important;
place-items:center!important;
background:#000!important;
color:#fff!important;
opacity:0!important;
transition:opacity .28s ease!important;
}
.breakzi-score-validated-final-v327.show{opacity:1!important;}
.breakzi-score-validated-card-v327{
display:flex!important;
align-items:center!important;
justify-content:center!important;
gap:18px!important;
padding:28px 38px!important;
border-radius:28px!important;
background:linear-gradient(135deg,rgba(0,255,179,.14),rgba(0,0,0,.78))!important;
border:1px solid rgba(0,255,179,.35)!important;
box-shadow:0 30px 90px rgba(0,0,0,.8),0 0 50px rgba(0,255,179,.18)!important;
text-align:center!important;
}
.breakzi-score-validated-card-v327 strong{
font-size:clamp(28px,4vw,56px)!important;
font-weight:1000!important;
letter-spacing:.5px!important;
color:#fff!important;
text-shadow:0 6px 18px rgba(0,0,0,.55)!important;
}
.breakzi-score-validated-card-v327 .breakzi-score-validated-icon-v326{
width:66px!important;
height:66px!important;
border-radius:20px!important;
background:linear-gradient(135deg,#00ffb3,#00c9a7)!important;
color:#03111d!important;
font-size:44px!important;
}
@media(max-width:700px){
.breakzi-score-validated-card-v327{flex-direction:column!important;padding:26px 24px!important;margin:0 18px!important;}
}
/* ===== v329: forfeit / bye display support ===== */
.ko-score.forfeit-score-v329{color:#fff!important;background:rgba(255,255,255,.06);font-weight:1000;letter-spacing:.06em;}
.ko-row.finished .ko-score.forfeit-score-v329{color:#ffffff!important;text-shadow:0 0 10px rgba(255,255,255,.25);}
.score-player .giant-score.forfeit-score-v329{font-size:clamp(48px,6vw,92px)!important;color:#fff!important;}