html,body,#root{width:100%;min-height:100vh;margin:0;padding:0}*{box-sizing:border-box}body{overflow-x:hidden}.home-page{background-image:url(/images/home-background.png);background-position:50%;background-repeat:no-repeat;background-size:cover;justify-content:center;align-items:center;min-height:100vh;display:flex;position:relative}.home-page:before{content:"";background:#00000059;position:absolute;inset:0}.home-content{z-index:1;flex-direction:column;align-items:center;width:100%;max-width:1200px;padding:2rem;display:flex;position:relative}.title-wrapper{display:inline-block}.title-line{background:#fff;width:100%;height:10px;margin:1rem 0}.main-title{color:#fff;white-space:nowrap;letter-spacing:2px;width:fit-content;margin:0 auto;font-family:Copperplate,serif;font-size:6rem;line-height:1;display:block}.menu-option{color:#fff;cursor:pointer;margin:2rem 0;font-family:Copperplate,serif;font-size:1.8rem;transition:all .2s}.menu-option:hover{text-shadow:0 0 10px #fff9;transform:scale(1.05)}@media (width<=768px){.main-title{font-size:3.8rem}.title-line{height:6px}.menu-option{margin:1.5rem 0;font-size:1.3rem}}.new-match-page{background-image:url(/images/newmatch-background.png);background-position:50%;background-repeat:no-repeat;background-size:cover;justify-content:center;align-items:flex-start;min-height:100vh;display:flex;position:relative}.new-match-page:before{content:"";background:#00000059;position:absolute;inset:0}.new-match-content{z-index:1;color:#fff;width:100%;max-width:900px;padding:2rem;position:relative}.new-match-title{text-align:center;letter-spacing:2px;margin-bottom:2rem;font-family:Copperplate,serif;font-size:2rem}.top-section{justify-content:space-between;align-items:center;gap:3rem;margin-bottom:3rem;display:flex}.players-section{flex-direction:column;flex:1;gap:1rem;display:flex}.player-row{align-items:center;gap:1rem;display:flex}.player-input{color:#fff;background:#00000059;border:2px solid #ffffffb3;border-radius:10px;flex:1;padding:1rem;font-family:Copperplate,serif;font-size:1.2rem}.player-input::placeholder{color:#fff;opacity:1}.player-add-button{color:#fff;cursor:pointer;background:0 0;border:2px solid #fff;border-radius:50%;width:56px;height:56px;font-size:2rem}.start-match-section{flex-direction:column;align-items:center;min-width:180px;display:flex}.start-match-label{letter-spacing:2px;margin-bottom:1rem;font-family:Copperplate,serif;font-size:1rem}.start-match-button{color:#fff;cursor:pointer;background:#ffffff0d;border:2px solid #ffffffe6;border-radius:50%;width:110px;height:110px;font-size:2.5rem;box-shadow:0 0 20px #ffffff40}.race-to{flex-direction:column;flex:.35;gap:1rem;display:flex}.section-title{color:#fff;letter-spacing:2px;font-family:Copperplate,serif}.race-control{align-items:center;gap:1rem;display:flex}.race-value{color:#fff;font-family:Copperplate,serif;font-size:5rem;line-height:1}.race-buttons{flex-direction:column;gap:.3rem;display:flex}.race-button{color:#fff;cursor:pointer;background:0 0;border:none;padding:0;font-family:Copperplate,serif;font-size:2.5rem;line-height:1}.race-break-row{align-items:flex-start;gap:4rem;margin-bottom:6rem;display:flex}.break-format{flex-direction:column;flex:1;justify-content:flex-start;gap:1rem;display:flex}.break-options{align-items:center;gap:3rem;display:flex}.break-option{white-space:nowrap;color:#fff;opacity:.4;align-items:center;gap:.5rem;font-family:Copperplate,serif;font-size:2.5rem;transition:color .2s,opacity .2s,transform .2s;display:flex}.break-option.selected{color:#fff;opacity:1;text-shadow:0 0 8px #fffc,0 0 16px #fff9,0 0 24px #fff6;transform:scale(1.08)}.game-options-block{margin-bottom:4rem}.game-options-row{justify-content:flex-start;align-items:center;gap:3rem;margin-top:2rem;display:flex}.game-option-column{flex-direction:row;align-items:center;gap:1rem;display:flex}.game-option{white-space:nowrap;color:#fff;margin-right:.5rem;font-family:Copperplate,serif;font-size:1.2rem}.switch{width:56px;height:30px;display:inline-block;position:relative}.switch input{opacity:0;width:0;height:0}.slider{cursor:pointer;background:#ffffff40;border-radius:999px;transition:all .25s;position:absolute;inset:0}.slider:before{content:"";background:#fff;border-radius:50%;width:24px;height:24px;transition:all .25s;position:absolute;top:3px;left:3px}.switch input:checked+.slider{background:#22c55e}.switch input:checked+.slider:before{transform:translate(26px)}.app-options-block{margin-bottom:4rem}.app-options-row{align-items:center;gap:4rem;margin-top:2rem;display:flex}.app-option-column{flex-direction:row;align-items:center;gap:.8rem;display:flex}.app-option{color:#fff;justify-content:center;align-items:center;font-size:2rem;line-height:1;display:flex}.app-option-label{text-align:center;color:#fff;min-height:2.4rem;font-family:Copperplate,serif;font-size:.95rem;line-height:1.15}.player-selector-overlay{z-index:1000;background:#000c;justify-content:center;align-items:center;display:flex;position:fixed;inset:0}.player-selector-modal{color:#fff;background:#0f0f0ff2;border:1px solid #ffffff26;border-radius:12px;width:90%;max-width:600px;padding:2rem}.player-selector-title{text-align:center;margin-bottom:2rem;font-family:Copperplate,serif;font-size:1.5rem}.player-search-input{color:#fff;background:#ffffff14;border:1px solid #fff3;border-radius:8px;width:100%;margin-bottom:2rem;padding:1rem}.player-search-input::placeholder{color:#ffffff80}.new-player-button{text-align:center;cursor:pointer;color:#fff;margin-top:2rem;font-family:Copperplate,serif}.new-player-button:hover{opacity:.7}.match-screen{color:#fff;background:#000;width:100vw;height:100vh}.main-grid{grid-template-rows:80px 1fr auto 1fr;grid-template-columns:50% 18% 32%;gap:1.5rem;width:100%;height:100%;padding:2rem;display:grid}.top-actions{grid-area:1/1/auto/3;justify-content:flex-end;align-items:center;gap:1rem;display:flex}.icon-button{color:#fff;cursor:pointer;background:#ffffff14;border:none;border-radius:50%;width:56px;height:56px;font-size:1.5rem}.player-main{grid-area:1/1;align-items:center;display:flex}.player-avatar{z-index:2;border:4px solid #fff;border-radius:50%;width:clamp(80px,10cqw,180px);height:clamp(80px,10cqw,180px);overflow:hidden;box-shadow:0 0 25px #fff3}.active-player .player-avatar{border-color:#fffc;box-shadow:0 0 30px #fff6}.player-avatar img{object-fit:cover;width:100%;height:100%}.player-name-card{text-overflow:ellipsis;white-space:nowrap;letter-spacing:.08rem;background:#ffffff14;border:1px solid #ffffff1f;border-radius:0 18px 18px 0;width:min(100%,40cqw);max-width:100%;margin-left:-25px;padding:1.4rem 2rem 1.4rem 3rem;font-size:min(3.5cqw,3.5cqh);font-weight:600;overflow:hidden}.player-meta{grid-area:2/1;align-items:center;gap:1rem;width:calc(100% - 125px);margin-left:125px;display:flex}.player-meta-left{align-items:center;gap:1rem;display:flex}.player-meta-right{align-items:center;gap:1rem;margin-left:auto;display:flex}.player-flag{object-fit:cover;width:clamp(60px,8cqh,90px);height:auto}.status-button{color:#fff;cursor:pointer;background:#1f9d55;border:none;border-radius:8px;min-width:clamp(70px,10cqh,120px);height:clamp(42px,6cqh,70px);padding-inline:clamp(.8rem,2cqh,1.5rem);font-size:clamp(1.3rem,3cqh,2rem);font-weight:700}.player-score{grid-area:1/2/3;justify-content:center;align-items:center;width:100%;height:100%;padding-left:60px;font-family:Din Condensed,sans-serif;font-size:22rem;font-weight:550;line-height:.8;display:flex}.time-bar-container{box-sizing:border-box;background:#ffffff0d;border:4px solid #fffffffb;border-radius:14px;grid-area:3/1;justify-content:flex-end;width:calc(100% + -150px - 2rem);height:clamp(60px,6vw,95px);margin-left:calc(150px + 2rem);display:flex;position:relative;overflow:hidden}.time-bar{width:100%;height:calc(100%-20px);background:#24d34a;border-radius:10px;margin:3px;transition:width .9s linear,background-color .1s}.time-bar.waiting{background:#24d34a}.time-bar.warning{background:#ffd54a}.time-bar.danger{background:#ff4d4d}@keyframes borderPulse{0%{border-color:#fff6;box-shadow:0 0 #fff0}50%{border-color:#ffffff93;box-shadow:0 0 24px #fffc}to{border-color:#fff6;box-shadow:0 0 #fff0}}@keyframes borderPulseRed{0%{box-shadow:none;border-color:#ff4d4d59}50%{border-color:#ff4d4d;box-shadow:0 0 14px #ff4d4d80}to{box-shadow:none;border-color:#ff4d4d59}}@keyframes borderPulseGreen{0%{box-shadow:none;border-color:#24d34a59}50%{border-color:#24d34a;box-shadow:0 0 20px #24d34ab3}to{box-shadow:none;border-color:#24d34a59}}.time-bar-container.waiting,.shot-clock-container.waiting{animation:1s infinite borderPulse}.time-bar-container.danger,.shot-clock-container.danger{animation:1s infinite borderPulseRed}.shot-clock-container.warning{animation:1s infinite borderPulseYellow}@keyframes borderPulseYellow{0%{box-shadow:none;border-color:#ffd54a59}50%{border-color:#ffd54a;box-shadow:0 0 20px #ffd54ab3}to{box-shadow:none;border-color:#ffd54a59}}.race-container{white-space:nowrap;grid-area:3/2;justify-content:center;place-items:center;width:100%;height:100%;padding-left:60px;font-size:2rem;font-weight:400;display:flex;overflow:hidden}.race-number{font-size:3rem;font-weight:700}.shot-clock-container{border:3px solid #fff3;border-radius:20px;grid-area:2/3/5;justify-content:center;align-items:center;width:90%;display:flex;position:relative;overflow:hidden;box-shadow:0 0 30px #ffffff14;container-type:size}.shot-clock-container.extension{animation:1s infinite borderPulseGreen}.shot-clock-container.warning{border-color:#ffd54a;box-shadow:0 0 20px #ffd54a40}.shot-clock-container.danger{border-color:#ff4d4d;box-shadow:0 0 25px #ff4d4d59}.shot-clock{font-family:Din Condensed,sans-serif;font-size:min(80cqh,80cqw);font-weight:550;line-height:1}.shot-clock-status{color:#ffffffb3;letter-spacing:.15em;text-transform:uppercase;white-space:nowrap;font-size:.9rem;font-weight:500;position:absolute;top:2rem;left:50%;transform:translate(-50%)}.player-score span{font-size:70cqh;line-height:1}.player-blue{background-image:linear-gradient(#0006,#0006),url(/images/background_player1.png);background-position:50%;background-size:cover;grid-area:2/1;position:relative}.player-red{background-image:linear-gradient(#0006,#0006),url(/images/background_player2.png);background-position:50%;background-size:cover;grid-area:4/1;position:relative}.player-card{border-radius:24px;grid-template-rows:auto auto;row-gap:1rem;width:100%;min-height:220px;padding:2rem;transition:filter .3s,box-shadow .3s,border .3s;display:grid;overflow:hidden}.score-top{grid-area:2/2}.score-bottom{grid-area:4/2}.score-button{color:#fff;cursor:pointer;background:0 0;border:3px solid #ffffffe6;border-radius:50%;flex-shrink:0;justify-content:center;align-items:center;width:4rem;height:4rem;font-size:2rem;font-weight:600;line-height:1;display:flex}.active-player{filter:brightness(1.05);z-index:2;border:4px solid #fff;box-shadow:0 0 15px #fffc,0 0 40px #ffffff59}.inactive-player{filter:brightness(.75)}.modal-backdrop{z-index:9999;background:#000000a6;justify-content:center;align-items:center;display:flex;position:fixed;inset:0}.break-screen-page{border-radius:24px;width:85vw;height:85vh;overflow:hidden}.extension-available{color:#fff;background:#24d34a;border-color:#24d34a}.extension-used{color:#fff;background:#ff4d4d;border-color:#ff4d4d}.extension-label{z-index:50;color:#fff;letter-spacing:.35em;white-space:nowrap;pointer-events:none;opacity:0;text-shadow:0 0 12px #ffffffe6,0 0 24px #ffffff80;mix-blend-mode:screen;justify-content:center;align-items:center;font-size:3.2rem;font-weight:300;display:flex;position:absolute;inset:0}.extension-label.visible{opacity:1;opacity:1}.time-bar-container.waiting .extension-label.visible{text-shadow:0 0 12px #fffc}.break-screen-page{background:#000;width:100vw;height:100vh;position:relative;overflow:hidden}.player-side{cursor:pointer;width:50%;position:absolute;top:0;bottom:0;overflow:hidden}.player-side:after{content:"";pointer-events:none;background:radial-gradient(#0000 20%,#00000040 50%,#000000bf 100%);position:absolute;inset:0}.player-side-blue{left:0}.player-side-red{right:0}.player-photo{object-fit:cover;width:100%;height:100%}.player-overlay{position:absolute;inset:0}.player-overlay-blue{background:#0050ff99}.player-overlay-red{background:#ff00008c}.winner-side .player-photo{animation:1.2s forwards winnerSelect}@keyframes winnerSelect{0%{filter:brightness()}40%{filter:brightness(1.15)}to{filter:brightness(1.25)}}.winner-side:after{content:"";pointer-events:none;z-index:2;position:absolute;inset:0;box-shadow:inset 0 0 120px #ffffff14,0 0 80px #ffffff26}.loser-side{animation:1.5s forwards loserFade}@keyframes loserFade{0%{filter:brightness()}to{filter:brightness(.35)saturate(.6)}}.break-center-container{pointer-events:none;z-index:50;color:#fff;grid-template-rows:3fr 1fr;display:grid;position:absolute;inset:0}.break-line{opacity:.95;background:#fff;width:min(90vw,1100px);height:10px}.break-title{letter-spacing:.25rem;text-transform:uppercase;margin:2rem 0;font-family:Copperplate,serif;font-size:clamp(3rem,6vw,6rem);display:inline-block}.break-select-title{letter-spacing:.2rem;color:#fff;text-shadow:0 0 10px #fffc;text-transform:uppercase;justify-content:center;align-items:center;width:100%;height:100%;font-family:Copperplate,serif;font-size:5rem;display:flex}.break-instruction{text-align:center;margin-top:clamp(1rem,2vw,3rem);font-size:clamp(1rem,2vw,2.3rem);line-height:1.4}.break-play-circle{pointer-events:auto;cursor:pointer;border:3px solid #fffc;border-radius:50%;justify-content:center;align-items:center;width:clamp(140px,18vw,300px);height:clamp(140px,18vw,300px);margin-top:clamp(1rem,2vw,3rem);font-size:5.5rem;display:flex;position:relative;box-shadow:-15px 0 30px #0078ffcc,15px 0 30px #f00c}.break-play-circle span{pointer-events:none;font-size:clamp(4rem,6vw,10rem);position:relative;bottom:25px;left:20px}.break-scoreboard{box-sizing:border-box;grid-row:2;align-items:center;gap:clamp(1rem,3vw,5rem);width:100%;padding-left:8%;padding-right:8%;display:flex}.break-main-content{flex-direction:column;grid-row:1;justify-content:center;align-items:center;width:100%;height:100%;display:flex}.break-player-block{color:#fff;flex:1;min-width:0}.break-player-block.right{text-align:right}.break-score{font-size:clamp(4rem,8vw,8rem);font-weight:700}.break-race{text-align:center;opacity:.9;font-size:2rem}.break-player-name{font-size:clamp(1.2rem,2vw,2.3rem);font-weight:700}.break-player-nickname{margin-top:.4rem;font-size:1.3rem}@font-face{font-family:Copperplate;src:url(/fonts/OPTICopperplate.otf)format("opentype");font-weight:400;font-style:normal}:root{--pool-blue:#0f3b8c;--pool-red:#8c1010;--pool-white:#fff;--pool-black:#050505;--font-display:"Copperplate", serif}*{box-sizing:border-box;margin:0;padding:0}body{color:#fff;font-family:var(--font-display);background:#000}