@import url('https://fonts.googleapis.com/css2?family=Open+Sans:wght@400; 600&display=swap'); html,body {margin:0; padding:0; height:100%}body {font-family:'Open Sans',sans-serif; color:#fff; background-color:#093028; background-image:linear-gradient(to bottom,#093028,#237A57); background-repeat:no-repeat; background-size:cover; background-attachment:fixed}.tournament-container {display:flex; min-height:100vh}.combinations-panel {width:35%; padding:25px; background:rgba(0,0,0,0.5); backdrop-filter:blur(8px); overflow-y:auto; border-right:3px solid #0b5345; box-sizing:border-box}.slide {display:none}.combination-item {gap:1vh; margin-bottom:1vh}.slide.active {display:block}.combinations-panel h2 {text-align:center; margin-bottom:15px; border-bottom:2px solid #2ecc71; padding-bottom:10px; font-weight:600; letter-spacing:1px}.combination-list {list-style:none; padding:0; margin:0}.combo-img {width:240px; height:auto; flex-shrink:0; border-radius:8px; box-shadow:0 0 8px rgba(0,0,0,0.3)}.combo-text strong {font-size:1.7vh; display:block; margin-bottom:4px; color:#2ecc71}.combo-text p {font-size:1.45vh; line-height:1.25em; margin:0}.tournament-main {flex-grow:1; padding:30px; display:flex; flex-direction:column; justify-content:space-around; position:relative}.current-level,.timer-section,.next-levels {background:rgba(255,255,255,0.12); backdrop-filter:blur(6px); border-radius:12px; padding:70px; text-align:center; margin-bottom:20px; box-shadow:0 4px 16px rgba(0,0,0,0.3)}.current-level h2 {font-size:3em; margin-bottom:10px; letter-spacing:1px; font-weight:600}.blinds {margin-top:10px}.blinds span {font-size:1.5em; margin:0 15px; display:inline-block}#timerDisplay {font-size:8.5em; margin:20px 0 10px; font-weight:700; letter-spacing:2px}.control-groups {display:flex; flex-wrap:wrap; justify-content:center; gap:10px; margin-top:8px; gap:10px; margin-top:8px}.control-group {display:flex; flex-direction:column; align-items:center; gap:10px; background:rgba(255,255,255,0.1); backdrop-filter:blur(4px); border-radius:12px; padding:15px 20px; box-shadow:0 4px 16px rgba(0,0,0,0.3); min-width:200px}.buttons-row {display:flex; flex-direction:row; gap:1vh; flex-wrap:wrap; justify-content:center}.control-group button {flex:1; white-space:nowrap; background:rgba(255,255,255,0.15); backdrop-filter:blur(8px); border:1px solid rgba(255,255,255,0.25); color:#fff; font-weight:600; font-size:0.9em; text-transform:uppercase; letter-spacing:0.5px; border-radius:8px; cursor:pointer; min-width:130px; padding:10px 16px; transition:background 0.3s ease,transform 0.2s ease,border 0.3s ease,box-shadow 0.3s ease}.control-group button:hover {background:rgba(255,255,255,0.25); border:1px solid rgba(255,255,255,0.4); box-shadow:0 0 8px rgba(255,255,255,0.15); transform:scale(0.98)}.control-group button:active {transform:scale(0.95); box-shadow:none}.combination-item {display:flex; gap:15px; margin-bottom:20px; align-items:flex-start}.combo-img {max-height:6.5vh; width:auto; border-radius:8px; box-shadow:0 0 8px rgba(0,0,0,0.3); object-fit:contain}.combinations-panel {display:flex; flex-direction:column; height:100vh; overflow:hidden; padding-top:8px}.combinations-panel h2 {margin-top:0}.slider-container {flex:1} #prevLevelBtn:hover {background:rgba(155,89,182,0.2); border:1px solid rgba(155,89,182,0.4); box-shadow:0 0 8px rgba(155,89,182,0.5)}#nextLevelBtn:hover {background:rgba(39,174,96,0.2); border:1px solid rgba(39,174,96,0.4); box-shadow:0 0 8px rgba(39,174,96,0.5)}#startPauseBtn {background:rgba(39,174,96,0.25) !important; border:1px solid rgba(39,174,96,0.4) !important}#startPauseBtn:hover {background:rgba(39,174,96,0.35) !important; border:1px solid rgba(39,174,96,0.6) !important; box-shadow:0 0 8px rgba(39,174,96,0.5) !important}#endGameBtn:hover {background:rgba(192,57,43,0.2); border:1px solid rgba(192,57,43,0.4); box-shadow:0 0 8px rgba(192,57,43,0.5)}#musicToggleBtn {background:rgba(46,204,113,0.9); backdrop-filter:blur(8px); border:none; width:55px; height:55px; border-radius:50%; box-shadow:0 6px 16px rgba(0,0,0,0.4); cursor:pointer; color:white; font-size:1.3em; transition:transform 0.3s ease,box-shadow 0.3s ease}#expertToggleBtn {background:rgba(46,204,113,0.9); backdrop-filter:blur(8px); border:none; width:55px; height:55px; border-radius:50%; box-shadow:0 6px 16px rgba(0,0,0,0.4); cursor:pointer; color:white; font-size:1.3em; transition:transform 0.3s ease,box-shadow 0.3s ease}#musicToggleBtn:hover,#expertToggleBtn:hover {background:rgba(255,255,255,0.25)}#musicToggleBtn:active,#expertToggleBtn:active {transform:scale(0.95)}.next-levels h3 {font-size:2.0em; margin-bottom:10px; letter-spacing:1px}.next-levels ul {font-size:1.1em; padding:0; margin:0; list-style:none}.next-levels li {margin:8px 0; line-height:1.4em}@media (max-width:1800px) {.combinations-panel {position:fixed; top:0; left:-100%; width:80%; height:100%; overflow-y:auto; transition:left 0.3s ease; z-index:9999; border-right:none} .combinations-panel.open {left:0} .tournament-main {width:100%; margin-left:0; padding:20px} .hamburger-btn {display:block; position:fixed; top:20px; left:20px; z-index:10000; font-size:24px; cursor:pointer; background:transparent; color:#fff; border:none; outline:none} .current-level h2 {font-size:2.5em} #timerDisplay {font-size:5em} .next-levels h3 {font-size:1.8em}}@media (min-width:1800px) {.hamburger-btn {display:none}}@media (max-width:768px) {body {font-size:14px} .tournament-main {padding:15px; display:flex; flex-direction:column; justify-content:flex-start; gap:12px} .combinations-panel {padding:15px} .current-level,.next-levels {padding:2vw 4vw} .timer-section {padding:2px 2vw 2px} .current-level h2,.next-levels h3 {margin:0 0 6px} .current-level h2 {font-size:2em} .next-levels h3 {font-size:1.5em} .blinds {display:flex; flex-wrap:nowrap; justify-content:center; gap:8px} .blinds span {font-size:1em; margin:0; white-space:nowrap} #timerDisplay {font-size:4em; margin:2px 0} .control-groups {gap:8px; margin-top:6px} .control-group {gap:6px; padding:10px 14px} .buttons-row {flex-direction:column; align-items:stretch} .control-group button {min-width:100px; font-size:.8em; padding:8px 12px} .combination-item {flex-direction:column; align-items:center} .combo-img {width:100%; max-width:300px} .combo-text {text-align:center} .next-levels ul {font-size:.95em} .slider-buttons button {padding:8px 16px; font-size:.9em} #toggleMusicBtn {padding:8px 12px; bottom:10px; right:10px; font-size:.8em}}@media (max-width:480px) {.current-level h2 {font-size:1.6em} .blinds span {font-size:1em} #timerDisplay {font-size:3em} .combinations-panel h2,.next-levels h3 {font-size:1.4em} .control-group {padding:10px} .control-group button {font-size:0.75em; padding:6px 10px} .slider-buttons button {font-size:0.8em; padding:6px 12px} .next-levels ul {font-size:0.85em}}.tournament-main {height:100vh; padding:2vh; display:flex; flex-direction:column; justify-content:space-between; box-sizing:border-box} .current-level,.timer-section,.next-levels {flex-grow:1; padding:1vh 2vw; margin-bottom:1vh; display:flex; flex-direction:column; justify-content:center} .current-level h2 {font-size:5vh; margin-bottom:1vh} .blinds span {font-size:2.2vh} #timerDisplay {font-size:12vh} .next-levels h3 {font-size:3vh} .next-levels ul {font-size:2vh; line-height:2.5vh} .control-group button {font-size:1.8vh; padding:1vh 1.5vh; width:100%} #toggleMusicBtn {padding:1vh 1.5vh; font-size:1.5vh} @media (max-width:480px) {.current-level h2 {font-size:3.5vh} .blinds span {font-size:1.8vh} #timerDisplay {font-size:8vh} .next-levels h3 {font-size:2vh} .next-levels ul {font-size:1.5vh} .control-group button {font-size:1.4vh} }.slider-dots {display:flex; justify-content:center; gap:8px; margin-top:12px}.slider-dot {width:10px; height:10px; border-radius:50%; background:rgba(255,255,255,.35); cursor:pointer; transition:transform .2s,background .2s}.slider-dot:hover {transform:scale(1.2)}.slider-dot.active {background:#2ecc71; transform:scale(1.35)}@media (min-width:769px) {.tournament-main {height:100vh; padding:2vh; display:flex; flex-direction:column; justify-content:space-between; box-sizing:border-box} .current-level,.timer-section,.next-levels {flex-grow:1; padding:1vh 2vw; margin-bottom:1vh; display:flex; flex-direction:column; justify-content:center} .current-level h2 {font-size:5vh; margin-bottom:1vh} .blinds span {font-size:2.2vh} #timerDisplay {font-size:12vh} .next-levels h3 {font-size:3vh} .next-levels ul {font-size:2vh; line-height:2.5vh} .control-group button {font-size:1.8vh; padding:1vh 1.5vh; width:100%} #toggleMusicBtn {padding:1vh 1.5vh; font-size:1.5vh}}