html, body {
overscroll-behavior-y: contain;
color: white;
font-family: sans-serif;
/* Background moved to container for z-index layering */
height: 100%; /* Ensure html and body take full height */
width: 100%; /* Ensure html and body take full width */
overflow: hidden; /* Prevent scrolling on the entire page */
scroll-behavior: auto; /* Disable smooth scrolling that might cause auto-scroll */
}
/* General interactive element styling for responsiveness and quick feel */
button,
a.game-over-button, /* Includes buttons like 'Back to Friends' */
.mode-switch-button,
.matchmaking-button,
.menu-action-button,
.challenge-button,
.oauth-button,
[type="submit"],
[type="button"],
[type="reset"] {
cursor: pointer;
-webkit-tap-highlight-color: transparent; /* Remove mobile tap highlight */
-webkit-touch-callout: none; /* Disable callout on long press on iOS */
-webkit-user-select: none; /* Safari/Chrome */
-moz-user-select: none; /* Firefox */
-ms-user-select: none; /* IE/Edge */
user-select: none; /* Standard */
}
/* Starry background */
#background-container {
background-color: #0a0a19;
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: -1;
overflow: hidden;
}
@keyframes animStar {
from {
transform: translateY(0px);
}
to {
transform: translateY(-2000px);
}
}
#stars {
width: 1px;
height: 1px;
background: transparent;
box-shadow: 698px 1669px #FFF, 1401px 114px #FFF, 107px 1845px #FFF, 1699px 1238px #FFF, 1539px 314px #FFF, 1904px 1782px #FFF, 146px 656px #FFF, 1853px 156px #FFF, 1827px 1184px #FFF, 34px 108px #FFF, 86px 873px #FFF, 1265px 1553px #FFF, 1234px 44px #FFF, 843px 1823px #FFF, 1310px 1863px #FFF, 381px 1332px #FFF, 1279px 244px #FFF, 1039px 1121px #FFF, 135px 832px #FFF, 1438px 1319px #FFF, 1126px 758px #FFF, 1508px 635px #FFF, 1033px 1475px #FFF, 1177px 1740px #FFF, 332px 1461px #FFF, 897px 1713px #FFF, 484px 921px #FFF, 966px 1231px #FFF, 252px 1756px #FFF, 1373px 1745px #FFF, 513px 1342px #FFF, 936px 1014px #FFF, 1843px 119px #FFF, 1729px 1399px #FFF, 1213px 43px #FFF, 1024px 1716px #FFF, 183px 1022px #FFF, 1000px 1854px #FFF, 396px 1582px #FFF, 1269px 1278px #FFF, 1477px 780px #FFF, 1928px 1236px #FFF, 1420px 1978px #FFF, 1730px 1139px #FFF, 1419px 1148px #FFF, 1353px 1105px #FFF, 1806px 1544px #FFF, 128px 439px #FFF, 1469px 933px #FFF, 1289px 402px #FFF, 240px 1083px #FFF, 1324px 748px #FFF, 1500px 1928px #FFF, 1286px 1655px #FFF, 1781px 1007px #FFF, 786px 1980px #FFF, 323px 1205px #FFF, 1563px 143px #FFF, 1245px 145px #FFF, 1157px 1463px #FFF, 144px 168px #FFF, 351px 1129px #FFF, 1017px 815px #FFF, 1281px 1779px #FFF, 1747px 1488px #FFF, 124px 38px #FFF, 1632px 1386px #FFF, 1301px 1941px #FFF, 1056px 1104px #FFF, 621px 1993px #FFF, 1404px 1012px #FFF, 1292px 1493px #FFF, 175px 1301px #FFF, 1693px 1494px #FFF, 1749px 1335px #FFF, 1588px 728px #FFF, 1408px 68px #FFF, 845px 380px #FFF, 1060px 1968px #FFF, 735px 632px #FFF, 1813px 311px #FFF, 503px 1581px #FFF, 1547px 1832px #FFF, 1667px 1260px #FFF, 1146px 112px #FFF, 1010px 100px #FFF, 893px 864px #FFF, 1155px 1749px #FFF, 1120px 1845px #FFF, 718px 493px #FFF, 1461px 816px #FFF, 66px 1933px #FFF, 1498px 1769px #FFF, 1601px 135px #FFF, 1032px 1310px #FFF, 1512px 117px #FFF, 1205px 1280px #FFF, 1402px 1787px #FFF, 1166px 1419px #FFF;
animation: animStar 50s linear infinite;
}
#stars:after {
content: ' ';
position: absolute;
top: 2000px;
width: 1px;
height: 1px;
background: transparent;
box-shadow: 698px 1669px #FFF, 1401px 114px #FFF, 107px 1845px #FFF, 1699px 1238px #FFF, 1539px 314px #FFF, 1904px 1782px #FFF, 146px 656px #FFF, 1853px 156px #FFF, 1827px 1184px #FFF, 34px 108px #FFF, 86px 873px #FFF, 1265px 1553px #FFF, 1234px 44px #FFF, 843px 1823px #FFF, 1310px 1863px #FFF, 381px 1332px #FFF, 1279px 244px #FFF, 1039px 1121px #FFF, 135px 832px #FFF, 1438px 1319px #FFF, 1126px 758px #FFF, 1508px 635px #FFF, 1033px 1475px #FFF, 1177px 1740px #FFF, 332px 1461px #FFF, 897px 1713px #FFF, 484px 921px #FFF, 966px 1231px #FFF, 252px 1756px #FFF, 1373px 1745px #FFF, 513px 1342px #FFF, 936px 1014px #FFF, 1843px 119px #FFF, 1729px 1399px #FFF, 1213px 43px #FFF, 1024px 1716px #FFF, 183px 1022px #FFF, 1000px 1854px #FFF, 396px 1582px #FFF, 1269px 1278px #FFF, 1477px 780px #FFF, 1928px 1236px #FFF, 1420px 1978px #FFF, 1730px 1139px #FFF, 1419px 1148px #FFF, 1353px 1105px #FFF, 1806px 1544px #FFF, 128px 439px #FFF, 1469px 933px #FFF, 1289px 402px #FFF, 240px 1083px #FFF, 1324px 748px #FFF, 1500px 1928px #FFF, 1286px 1655px #FFF, 1781px 1007px #FFF, 786px 1980px #FFF, 323px 1205px #FFF, 1563px 143px #FFF, 1245px 145px #FFF, 1157px 1463px #FFF, 144px 168px #FFF, 351px 1129px #FFF, 1017px 815px #FFF, 1281px 1779px #FFF, 1747px 1488px #FFF, 124px 38px #FFF, 1632px 1386px #FFF, 1301px 1941px #FFF, 1056px 1104px #FFF, 621px 1993px #FFF, 1404px 1012px #FFF, 1292px 1493px #FFF, 175px 1301px #FFF, 1693px 1494px #FFF, 1749px 1335px #FFF, 1588px 728px #FFF, 1408px 68px #FFF, 845px 380px #FFF, 1060px 1968px #FFF, 735px 632px #FFF, 1813px 311px #FFF, 503px 1581px #FFF, 1547px 1832px #FFF, 1667px 1260px #FFF, 1146px 112px #FFF, 1010px 100px #FFF, 893px 864px #FFF, 1155px 1749px #FFF, 1120px 1845px #FFF, 718px 493px #FFF, 1461px 816px #FFF, 66px 1933px #FFF, 1498px 1769px #FFF, 1601px 135px #FFF, 1032px 1310px #FFF, 1512px 117px #FFF, 1205px 1280px #FFF, 1402px 1787px #FFF, 1166px 1419px #FFF;
}
.hidden {
display: none !important;
}
/* Ensure menu button is always visible */
.square.frozen {
position: relative;
background-color: rgba(135, 206, 250, 0.6) !important; /* More visible sky blue tint */
box-shadow: inset 0 0 15px rgba(173, 216, 230, 0.8), 0 0 20px rgba(135, 206, 250, 0.4);
transition: all 0.3s ease-in-out;
animation: frozen-shimmer 2s ease-in-out infinite;
}
@keyframes frozen-shimmer {
0% {
box-shadow: inset 0 0 15px rgba(173, 216, 230, 0.8), 0 0 20px rgba(135, 206, 250, 0.4);
background-color: rgba(135, 206, 250, 0.6) !important;
}
50% {
box-shadow: inset 0 0 25px rgba(173, 216, 230, 1), 0 0 30px rgba(135, 206, 250, 0.6);
background-color: rgba(173, 216, 230, 0.7) !important;
}
100% {
box-shadow: inset 0 0 15px rgba(173, 216, 230, 0.8), 0 0 20px rgba(135, 206, 250, 0.4);
background-color: rgba(135, 206, 250, 0.6) !important;
}
}
.square.frozen::after {
content: '';
position: absolute;
top: -5%;
left: -5%;
width: 110%;
height: 110%;
background-size: contain;
background-position: center;
background-repeat: no-repeat;
opacity: 0.7;
pointer-events: none;
animation: crack-pulse 1.5s ease-in-out infinite;
}
@keyframes crack-pulse {
0% {
opacity: 0.5;
transform: scale(1);
}
50% {
opacity: 0.8;
transform: scale(1.05);
}
100% {
opacity: 0.5;
transform: scale(1);
}
}
.square.frozen.crack-1::after {
background-image: url("data:image/svg+xml,%3csvg width='100' height='100' viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg'%3e%3cg fill='none' stroke='white' stroke-width='1.5' stroke-opacity='0.6' stroke-linecap='round'%3e%3cpath d='M50 50 L 10 20'/%3e%3cpath d='M10 20 L 5 40'/%3e%3cpath d='M10 20 L 30 10'/%3e%3cpath d='M50 50 L 80 15'/%3e%3cpath d='M80 15 L 95 30'/%3e%3cpath d='M80 15 L 70 5'/%3e%3cpath d='M50 50 L 90 80'/%3e%3cpath d='M90 80 L 70 95'/%3e%3cpath d='M90 80 L 98 60'/%3e%3cpath d='M50 50 L 20 90'/%3e%3cpath d='M20 90 L 5 75'/%3e%3cpath d='M20 90 L 35 98'/%3e%3c/g%3e%3c/svg%3e");
}
.square.frozen.crack-2::after {
background-image: url("data:image/svg+xml,%3csvg width='100' height='100' viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg'%3e%3cg fill='none' stroke='white' stroke-width='1.5' stroke-opacity='0.6' stroke-linecap='round' transform='rotate(75 50 50)'%3e%3cpath d='M50 50 L 10 20'/%3e%3cpath d='M10 20 L 5 40'/%3e%3cpath d='M10 20 L 30 10'/%3e%3cpath d='M50 50 L 80 15'/%3e%3cpath d='M80 15 L 95 30'/%3e%3cpath d='M80 15 L 70 5'/%3e%3cpath d='M50 50 L 90 80'/%3e%3cpath d='M90 80 L 70 95'/%3e%3cpath d='M90 80 L 98 60'/%3e%3cpath d='M50 50 L 20 90'/%3e%3cpath d='M20 90 L 5 75'/%3e%3cpath d='M20 90 L 35 98'/%3e%3c/g%3e%3c/svg%3e");
}
.square.frozen.crack-3::after {
background-image: url("data:image/svg+xml,%3csvg width='100' height='100' viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg'%3e%3cg fill='none' stroke='white' stroke-width='1.5' stroke-opacity='0.6' stroke-linecap='round'%3e%3cpath d='M40 60 L 5 15'/%3e%3cpath d='M5 15 L 15 40'/%3e%3cpath d='M5 15 L 25 5'/%3e%3cpath d='M40 60 L 90 45'/%3e%3cpath d='M90 45 L 95 70'/%3e%3cpath d='M90 45 L 70 30'/%3e%3cpath d='M40 60 L 80 90'/%3e%3cpath d='M80 90 L 60 98'/%3e%3cpath d='M80 90 L 95 80'/%3e%3cpath d='M40 60 L 10 85'/%3e%3cpath d='M10 85 L 0 60'/%3e%3cpath d='M10 85 L 25 95'/%3e%3c/g%3e%3c/svg%3e");
}
.square.power-up-extra_life::before,
.square.power-up-fast_square::before,
.square.power-up-teleport::before,
.square.power-up-freeze_ai::before,
.square.power-up-slow_square::before {
content: '';
width: 90%;
height: 90%;
background-size: contain;
background-repeat: no-repeat;
background-position: center;
opacity: 0.8;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
animation: powerup-pulse 2s ease-in-out infinite;
z-index: 0;
pointer-events: none;
border-radius: 50%;
box-shadow: 0 0 15px rgba(255, 255, 255, 0.3);
}
@keyframes powerup-pulse {
0% {
transform: translate(-50%, -50%) scale(1);
opacity: 0.8;
}
50% {
transform: translate(-50%, -50%) scale(1.1);
opacity: 1;
}
100% {
transform: translate(-50%, -50%) scale(1);
opacity: 0.8;
}
}
.explosion {
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
pointer-events: none;
z-index: 10;
}
.explosion .particle {
position: absolute;
left: 50%;
top: 50%;
width: 8px;
height: 8px;
border-radius: 50%;
background-color: #FFD700;
animation: explode 2.5s ease-out forwards;
}
@keyframes explode {
0% {
transform: translate(-50%, -50%) scale(1);
opacity: 1;
}
100% {
transform: translate(calc(var(--x) - 50%), calc(var(--y) - 50%)) scale(0);
opacity: 0;
}
}
.square.power-up-extra_life::before {
background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3e%3cdefs%3e%3cradialGradient id='lifeGrad' cx='50%25' cy='30%25' r='70%25'%3e%3cstop offset='0%25' style='stop-color:%23FFD700;stop-opacity:1' /%3e%3cstop offset='50%25' style='stop-color:%23FF6B35;stop-opacity:1' /%3e%3cstop offset='100%25' style='stop-color:%23FF1744;stop-opacity:1' /%3e%3c/radialGradient%3e%3c/defs%3e%3ccircle cx='12' cy='12' r='10' fill='url(%23lifeGrad)' stroke='%23FFD700' stroke-width='2'/%3e%3cpath fill='white' d='M12 6l2 4h4l-3 3 1 4-4-2-4 2 1-4-3-3h4z'/%3e%3c/svg%3e");
background-color: rgba(255, 215, 0, 0.2);
}
.square.power-up-fast_square::before {
background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3e%3cdefs%3e%3cradialGradient id='speedGrad' cx='50%25' cy='30%25' r='70%25'%3e%3cstop offset='0%25' style='stop-color:%2300E676;stop-opacity:1' /%3e%3cstop offset='50%25' style='stop-color:%2300C853;stop-opacity:1' /%3e%3cstop offset='100%25' style='stop-color:%23388E3C;stop-opacity:1' /%3e%3c/radialGradient%3e%3c/defs%3e%3ccircle cx='12' cy='12' r='10' fill='url(%23speedGrad)' stroke='%2300E676' stroke-width='2'/%3e%3cpath fill='white' d='M8 12l4-4v3h8v2h-8v3z'/%3e%3c/svg%3e");
background-color: rgba(0, 230, 118, 0.2);
}
.square.power-up-teleport::before {
background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3e%3cdefs%3e%3cradialGradient id='teleGrad' cx='50%25' cy='30%25' r='70%25'%3e%3cstop offset='0%25' style='stop-color:%23E91E63;stop-opacity:1' /%3e%3cstop offset='50%25' style='stop-color:%23AD1457;stop-opacity:1' /%3e%3cstop offset='100%25' style='stop-color:%23880E4F;stop-opacity:1' /%3e%3c/radialGradient%3e%3c/defs%3e%3ccircle cx='12' cy='12' r='10' fill='url(%23teleGrad)' stroke='%23E91E63' stroke-width='2'/%3e%3cpath fill='white' d='M12 2l3 6-6 0z M12 22l-3-6 6 0z M2 12l6-3 0 6z M22 12l-6 3 0-6z'/%3e%3c/svg%3e");
background-color: rgba(233, 30, 99, 0.2);
}
.square.power-up-freeze_ai::before {
background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3e%3cdefs%3e%3cradialGradient id='freezeGrad' cx='50%25' cy='30%25' r='70%25'%3e%3cstop offset='0%25' style='stop-color:%2300BCD4;stop-opacity:1' /%3e%3cstop offset='50%25' style='stop-color:%230097A7;stop-opacity:1' /%3e%3cstop offset='100%25' style='stop-color:%23006064;stop-opacity:1' /%3e%3c/radialGradient%3e%3c/defs%3e%3ccircle cx='12' cy='12' r='10' fill='url(%23freezeGrad)' stroke='%2300BCD4' stroke-width='2'/%3e%3cpath fill='white' d='M12 2v4 M12 18v4 M4.93 4.93l2.83 2.83 M16.24 16.24l2.83 2.83 M2 12h4 M18 12h4 M4.93 19.07l2.83-2.83 M16.24 7.76l2.83-2.83' stroke='white' stroke-width='1.5' stroke-linecap='round'/%3e%3c/svg%3e");
background-color: rgba(0, 188, 212, 0.2);
}
.square.power-up-time_drain::before { /* Renamed from power-up-slow_square */
background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3e%3cdefs%3e%3cradialGradient id='guideTimeDrainGrad' cx='50%25' cy='30%25' r='70%25'%3e%3cstop offset='0%25' style='stop-color:%23FF9800;stop-opacity:1' /%3e%3cstop offset='50%25' style='stop-color:%23F57C00;stop-opacity:1' /%3e%3cstop offset='100%25' style='stop-color:%23E65100;stop-opacity:1' /%3e%3c/radialGradient%3e%3c/defs%3e%3ccircle cx='12' cy='12' r='10' fill='url(%23guideTimeDrainGrad)' stroke='%23FF9800' stroke-width='2'/%3e%3cpath fill='white' d='M12 6v6l4 2-1 2-5-3V6z'/%3e%3c/svg%3e");
background-color: rgba(255, 152, 0, 0.2);
}
.square.env-slow { background-color: rgba(255, 165, 0, 0.3) !important; }
.square.env-boost { background-color: rgba(0, 255, 0, 0.3) !important; }
.square.unstable {
position: relative;
background-color: rgba(255, 69, 0, 0.3) !important;
border: 2px solid rgba(255, 0, 0, 0.6);
}
.square.blinking {
animation: enhanced-pulse-warning 0.8s infinite;
}
@keyframes enhanced-pulse-warning {
0% {
box-shadow: inset 0 0 15px rgba(255, 0, 0, 0.3), 0 0 20px rgba(255, 69, 0, 0.4);
background-color: rgba(255, 69, 0, 0.3) !important;
border-color: rgba(255, 0, 0, 0.6);
}
25% {
box-shadow: inset 0 0 25px rgba(255, 0, 0, 0.6), 0 0 35px rgba(255, 69, 0, 0.7);
background-color: rgba(255, 0, 0, 0.5) !important;
border-color: rgba(255, 0, 0, 0.9);
}
50% {
box-shadow: inset 0 0 35px 10px rgba(255, 0, 0, 0.8), 0 0 50px rgba(255, 69, 0, 0.9);
background-color: rgba(255, 0, 0, 0.6) !important;
border-color: rgba(255, 255, 255, 0.8);
}
75% {
box-shadow: inset 0 0 25px rgba(255, 0, 0, 0.6), 0 0 35px rgba(255, 69, 0, 0.7);
background-color: rgba(255, 0, 0, 0.5) !important;
border-color: rgba(255, 0, 0, 0.9);
}
100% {
box-shadow: inset 0 0 15px rgba(255, 0, 0, 0.3), 0 0 20px rgba(255, 69, 0, 0.4);
background-color: rgba(255, 69, 0, 0.3) !important;
border-color: rgba(255, 0, 0, 0.6);
}
}
.unstable-countdown {
position: absolute;
bottom: 1px;
right: 1px;
background: linear-gradient(135deg, rgba(255, 0, 0, 0.9), rgba(139, 0, 0, 0.9));
color: white;
font-size: 0.6em; /* Much smaller font */
font-weight: bold;
padding: 1px 3px; /* Much smaller padding */
border-radius: 3px; /* Smaller border radius */
border: 1px solid rgba(255, 255, 255, 0.8); /* Thinner border */
z-index: 6;
min-width: 14px; /* Smaller minimum width */
text-align: center;
text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.9);
box-shadow: 0 0 5px rgba(255, 0, 0, 0.6), inset 0 0 2px rgba(255, 255, 255, 0.2);
animation: countdown-pulse 1s ease-in-out infinite;
}
@keyframes countdown-pulse {
0% {
transform: scale(1);
box-shadow: 0 0 10px rgba(255, 0, 0, 0.6), inset 0 0 5px rgba(255, 255, 255, 0.2);
}
50% {
transform: scale(1.1);
box-shadow: 0 0 20px rgba(255, 0, 0, 0.9), inset 0 0 8px rgba(255, 255, 255, 0.4);
}
100% {
transform: scale(1);
box-shadow: 0 0 10px rgba(255, 0, 0, 0.6), inset 0 0 5px rgba(255, 255, 255, 0.2);
}
}
.square.frozen.crack-4::after {
background-image: url("data:image/svg+xml,%3csvg width='100' height='100' viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg'%3e%3cg fill='none' stroke='white' stroke-width='1.5' stroke-opacity='0.6' stroke-linecap='round' transform='rotate(15 50 50)'%3e%3cpath d='M20 20 L 80 80'/%3e%3cpath d='M20 80 L 80 20'/%3e%3cpath d='M50 10 L 50 90'/%3e%3cpath d='M10 50 L 90 50'/%3e%3c/g%3e%3c/svg%3e");
}
.square.frozen.crack-5::after {
background-image: url("data:image/svg+xml,%3csvg width='100' height='100' viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg'%3e%3cg fill='none' stroke='white' stroke-width='1.5' stroke-opacity='0.6' stroke-linecap='round' transform='rotate(-15 50 50)'%3e%3cpath d='M50 50 L 50 5'/%3e%3cpath d='M50 5 L 40 15'/%3e%3cpath d='M50 5 L 60 15'/%3e%3cpath d='M50 50 L 5 40'/%3e%3cpath d='M5 40 L 15 30'/%3e%3cpath d='M5 40 L 15 50'/%3e%3cpath d='M50 50 L 95 60'/%3e%3cpath d='M95 60 L 85 50'/%3e%3cpath d='M95 60 L 85 70'/%3e%3cpath d='M50 50 L 50 95'/%3e%3cpath d='M50 95 L 40 85'/%3e%3cpath d='M50 95 L 60 85'/%3e%3c/g%3e%3c/svg%3e");
}
/* Styling for the new side power-up guide */
#nuts-guide-on-side {
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 320px;
max-height: 80vh;
overflow-y: auto;
background: rgba(10, 10, 25, 0.95);
border: 1px solid rgba(255, 255, 255, 0.3);
border-radius: 12px;
padding: 15px;
-webkit-backdrop-filter: blur(10px);
backdrop-filter: blur(10px);
box-shadow: 0 4px 15px rgba(0, 0, 0, 0.5);
z-index: 1500;
color: white;
}
#nuts-guide-on-side.hidden {
display: none;
}
#nuts-guide-on-side h4 {
margin-top: 0;
text-align: center;
border-bottom: 1px solid rgba(255,255,255,0.2);
padding-bottom: 10px;
margin-bottom: 15px;
font-size: 1.1em;
}
#nuts-guide-on-side ul {
list-style: none;
padding: 0;
margin: 0;
}
#nuts-guide-on-side li {
display: flex;
align-items: center;
margin-bottom: 8px;
font-size: 0.95em;
line-height: 1.3;
}
#nuts-guide-on-side li .guide-icon {
width: 24px;
height: 24px;
min-width: 24px; /* Prevent shrinking */
min-height: 24px; /* Prevent shrinking */
margin-right: 10px;
vertical-align: middle;
}
.color-swatch {
width: 24px; /* Larger swatch */
height: 24px; /* Larger swatch */
min-width: 24px; /* Prevent shrinking */
min-height: 24px; /* Prevent shrinking */
margin-right: 10px;
border: 1px solid rgba(255,255,255,0.5);
border-radius: 3px;
margin-left: 2px;
}
.color-swatch.slow { background-color: rgba(255, 165, 0, 0.3); }
.color-swatch.boost { background-color: rgba(0, 255, 0, 0.3); } /* Consistent with env-boost */
/* Mobile specific adjustments for side guide */
@media (max-width: 768px) {
#nuts-guide-on-side {
width: 320px;
max-width: calc(100vw - 40px);
padding: 10px;
max-height: 70vh;
}
#mode-explanation {
width: calc(100vw - 40px);
max-height: 70vh;
overflow-y: auto;
}
#nuts-guide-on-side h4 {
padding-bottom: 5px;
margin-bottom: 10px;
}
#nuts-guide-on-side li {
font-size: 0.9em;
margin-bottom: 6px;
}
#nuts-guide-on-side li .guide-icon,
.color-swatch {
width: 20px;
height: 20px;
min-width: 20px;
min-height: 20px;
margin-right: 8px;
}
}
/* Styles for new Google login button and divider */
.oauth-buttons { margin-bottom: 15px; }
.oauth-button {
background: rgba(255,255,255,0.1);
color: white;
border: 1px solid rgba(255,255,255,0.3);
padding: 12px;
border-radius: 8px;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
width: 100%;
font-size: 16px;
font-weight: bold;
transition: all 0.2s ease;
}
.oauth-button:hover {
background: rgba(255,255,255,0.2);
border-color: rgba(255,255,255,0.5);
}
.oauth-button img, .oauth-button .google-icon {
width: 20px;
height: 20px;
margin-right: 10px;
background-color: transparent; /* Ensure transparent background */
border: none; /* Remove any default border */
display: block; /* Ensure it respects width/height and acts as a block element */
vertical-align: middle; /* Center vertically with text */
}
.or-divider {
display: flex;
align-items: center;
text-align: center;
margin: 20px 0;
color: #ccc;
}
.or-divider::before,
.or-divider::after {
content: '';
flex: 1;
border-bottom: 1px solid #ccc;
}
.or-divider:not(:empty)::before { margin-right: .25em; }
.or-divider:not(:empty)::after { margin-left: .25em; }
/* Auth Modal Overlay */
#auth-modal-overlay {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.7);
-webkit-backdrop-filter: blur(10px);
backdrop-filter: blur(10px);
display: flex;
justify-content: center;
align-items: center;
z-index: 2000;
}
.auth-modal-content {
position: relative;
background: linear-gradient(135deg, rgba(20, 20, 40, 0.95), rgba(0, 0, 0, 0.95));
border: 1px solid rgba(255, 255, 255, 0.2);
border-radius: 20px;
padding: 40px;
box-shadow: 0 10px 40px rgba(0,0,0,0.5);
width: 90%;
max-width: 400px;
}
.auth-form h3 {
text-align: center;
margin-bottom: 25px;
font-size: 24px;
font-weight: 600;
color: #fff;
}
.close-auth-modal {
position: absolute;
top: 15px;
right: 15px;
background: transparent;
color: white;
border: 1px solid rgba(255, 255, 255, 0.3);
padding: 8px 12px;
border-radius: 6px;
cursor: pointer;
font-size: 16px;
transition: all 0.2s ease;
}
.close-auth-modal:hover {
background: rgba(255, 255, 255, 0.1);
}
.popup-close-button {
position: absolute;
top: 15px;
right: 15px;
background: transparent;
color: white;
border: 1px solid rgba(255, 255, 255, 0.3);
padding: 8px 12px;
border-radius: 6px;
cursor: pointer;
font-size: 16px;
transition: all 0.2s ease;
}
.popup-close-button:hover {
background: rgba(255, 255, 255, 0.1);
border-color: rgba(255, 255, 255, 0.5);
}
.auth-form input {
width: 100%;
padding: 12px;
margin-bottom: 15px;
background: rgba(255, 255, 255, 0.1);
border: 1px solid rgba(255, 255, 255, 0.2);
border-radius: 8px;
color: #fff;
font-size: 16px;
transition: all 0.2s ease;
}
.auth-form input::placeholder {
color: rgba(255, 255, 255, 0.6);
}
.auth-form input:focus {
outline: none;
border-color: rgba(255, 255, 255, 0.5);
background: rgba(255, 255, 255, 0.15);
}
.auth-form button[type="submit"] {
width: 100%;
padding: 12px;
background: rgba(255,255,255,0.1);
color: white;
border: 1px solid rgba(255,255,255,0.3);
border-radius: 8px;
font-size: 16px;
font-weight: bold;
cursor: pointer;
transition: all 0.2s ease;
}
.auth-form button[type="submit"]:hover {
background: rgba(255,255,255,0.2);
border-color: rgba(255,255,255,0.5);
}
.game-over-button {
padding: 12px 25px;
background: rgba(255,255,255,0.1);
color: white;
border: 1px solid rgba(255,255,255,0.3);
border-radius: 8px;
cursor: pointer;
font-size: 16px;
font-weight: bold;
transition: all 0.2s ease;
margin-top: 20px;
text-decoration: none;
display: inline-block;
}
.game-over-button:hover {
background: rgba(255,255,255,0.2);
border-color: rgba(255,255,255,0.5);
}
#new-game-restart-button {
background: linear-gradient(135deg, #2196F3, #1976D2);
border-color: rgba(33, 150, 243, 0.5);
box-shadow: 0 2px 8px rgba(33, 150, 243, 0.3);
}
#new-game-restart-button:hover {
background: linear-gradient(135deg, #1976D2, #1565C0);
transform: translateY(-1px);
box-shadow: 0 4px 12px rgba(33, 150, 243, 0.4);
}
/* Promotion buttons */
#promotion-choices {
display: flex;
gap: 15px;
}
.promotion-piece {
padding: 20px;
background: rgba(255,255,255,0.1);
color: white;
border: 1px solid rgba(255,255,255,0.3);
border-radius: 8px;
cursor: pointer;
font-size: 3em;
transition: all 0.2s ease;
width: 80px;
height: 80px;
display: flex;
align-items: center;
justify-content: center;
line-height: 1;
}
.promotion-piece:hover {
background: rgba(255,255,255,0.2);
border-color: rgba(255,255,255,0.5);
}
/* Back button styling */
#back-to-main-menu-button {
position: fixed;
top: 15px;
left: 15px;
z-index: 1000;
background: rgba(0, 0, 0, 0.8);
color: white;
border: 1px solid rgba(255, 255, 255, 0.3);
padding: 12px 16px;
border-radius: 8px;
cursor: pointer;
font-size: 14px;
font-weight: 500;
-webkit-backdrop-filter: blur(10px);
backdrop-filter: blur(10px);
transition: all 0.2s ease;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
}
#back-to-main-menu-button:hover {
background: rgba(0, 0, 0, 0.9);
border-color: rgba(255, 255, 255, 0.5);
transform: translateY(-1px);
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4);
}
#menu-toggle-button {
position: fixed;
top: 15px;
right: 15px;
z-index: 1000;
background: rgba(0, 0, 0, 0.8);
color: white;
border: 1px solid rgba(255, 255, 255, 0.3);
padding: 12px 16px;
border-radius: 8px;
cursor: pointer;
font-size: 18px;
font-weight: 500;
-webkit-backdrop-filter: blur(10px);
backdrop-filter: blur(10px);
transition: all 0.2s ease;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
}
#menu-toggle-button:hover {
background: rgba(0, 0, 0, 0.9);
border-color: rgba(255, 255, 255, 0.5);
transform: translateY(-1px);
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4);
}
#volume-toggle-button {
position: fixed;
top: 15px;
right: 80px; /* Positioned between highscores and menu */
z-index: 1000;
background: rgba(0, 0, 0, 0.8);
color: white;
border: 1px solid rgba(255, 255, 255, 0.3);
padding: 12px 16px;
border-radius: 8px;
cursor: pointer;
font-size: 18px;
font-weight: 500;
-webkit-backdrop-filter: blur(10px);
backdrop-filter: blur(10px);
transition: all 0.2s ease;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
}
#volume-toggle-button:hover {
background: rgba(0, 0, 0, 0.9);
border-color: rgba(255, 255, 255, 0.5);
transform: translateY(-1px);
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4);
}
#toggle-highscores-button { /* Highscores toggle button */
position: fixed;
top: 15px;
right: 140px; /* Shifted to make space for the volume button */
z-index: 1000;
background: rgba(0, 0, 0, 0.8);
color: white;
border: 1px solid rgba(255, 255, 255, 0.3);
padding: 12px 16px;
border-radius: 8px;
cursor: pointer;
font-size: 18px;
font-weight: 500;
-webkit-backdrop-filter: blur(10px);
backdrop-filter: blur(10px);
transition: all 0.2s ease;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
}
#toggle-highscores-button:hover {
background: rgba(0, 0, 0, 0.9);
border-color: rgba(255, 255, 255, 0.5);
transform: translateY(-1px);
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4);
}
/* Slide-out menu improvements */
#slide-out-menu {
position: fixed;
top: 0;
right: -350px; /* Start off-screen */
width: 350px; /* Consistent width */
height: 100vh;
background: linear-gradient(135deg, rgba(0, 0, 0, 0.95), rgba(20, 20, 40, 0.95));
-webkit-backdrop-filter: blur(20px);
backdrop-filter: blur(20px);
border-left: 1px solid rgba(255, 255, 255, 0.1);
transition: right 0.3s ease;
z-index: 9999; /* High z-index but below menu button */
overflow-y: auto;
box-shadow: -5px 0 20px rgba(0, 0, 0, 0.5);
}
#slide-out-menu.active {
right: 0;
}
#menu-close-button {
position: absolute;
top: 15px;
right: 15px;
background: transparent;
color: white;
border: 1px solid rgba(255, 255, 255, 0.3);
padding: 8px 12px;
border-radius: 6px;
cursor: pointer;
font-size: 16px;
transition: all 0.2s ease;
}
#menu-close-button:hover {
background: rgba(255, 255, 255, 0.1);
border-color: rgba(255, 255, 255, 0.5);
}
/* Add this to control the board and side controls container */
#board-and-side-controls {
position: relative;
display: flex;
justify-content: center; /* Center the chessboard */
align-items: center;
height: 100%; /* Take full height of game-display-area */
width: 100%;
padding: 10px; /* Some padding around the board */
box-sizing: border-box;
}
.menu-content {
padding: 60px 20px 20px;
width: 100%;
max-width: 100%;
box-sizing: border-box;
overflow: hidden;
}
/* Game info styling */
#game-info {
margin-bottom: 30px;
padding: 20px;
background: rgba(255, 255, 255, 0.05);
border-radius: 12px;
border: 1px solid rgba(255, 255, 255, 0.1);
}
#game-info h2 {
margin: 0 0 15px 0;
color: #fff;
font-size: 18px;
font-weight: 600;
}
/* Settings pane styling */
#settings-pane {
background: rgba(255, 255, 255, 0.05);
border-radius: 12px;
padding: 20px;
border: 1px solid rgba(255, 255, 255, 0.1);
}
#settings-pane h3 {
margin: 0 0 20px 0;
color: #fff;
font-size: 16px;
font-weight: 600;
border-bottom: 1px solid rgba(255, 255, 255, 0.1);
padding-bottom: 10px;
}
.setting-item {
margin-bottom: 20px;
}
.setting-item label {
display: block;
color: #fff;
font-size: 14px;
font-weight: 500;
margin-bottom: 8px;
}
.setting-item select,
.setting-item input[type="checkbox"] {
width: 100%;
padding: 10px;
background: rgba(255, 255, 255, 0.1);
border: 1px solid rgba(255, 255, 255, 0.2);
border-radius: 6px;
color: #fff;
font-size: 14px;
}
.setting-item select:focus {
outline: none;
border-color: rgba(255, 255, 255, 0.4);
background: rgba(255, 255, 255, 0.15);
}
#start-game-button {
width: 100%;
padding: 12px;
background: linear-gradient(135deg, #4CAF50, #45a049);
color: white;
border: none;
border-radius: 8px;
font-size: 16px;
font-weight: 600;
cursor: pointer;
transition: all 0.2s ease;
margin-top: 20px;
}
#start-game-button:hover {
background: linear-gradient(135deg, #45a049, #3d8b40);
transform: translateY(-1px);
box-shadow: 0 4px 12px rgba(76, 175, 80, 0.3);
}
/* Logo container and logo specific styles to ensure no black box */
.logo-container {
margin-bottom: 30px;
background: transparent !important;
border: none !important;
box-shadow: none !important;
}
.logo-container .logo,
.logo-container img,
img.logo {
display: block;
margin: 0 auto;
max-width: 200px;
max-height: 200px;
width: 200px;
height: 200px;
object-fit: contain;
/* Remove all box styling */
background: transparent !important;
background-color: transparent !important;
border: none !important;
box-shadow: none !important; /* Remove shadow/box effect */
outline: none !important;
image-rendering: auto;
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
}
/* Auth status positioning */
#auth-status {
display: flex;
flex-direction: column;
gap: 15px;
width: 100%;
align-items: center;
}
#auth-status p {
font-size: 1.2em;
margin-bottom: 0;
}
.auth-buttons-container {
display: flex;
gap: 10px;
justify-content: center;
width: 100%;
max-width: 100%;
box-sizing: border-box;
overflow: hidden;
}
.auth-button {
padding: 8px 20px;
background: rgba(255,255,255,0.1);
color: white;
border: 1px solid rgba(255,255,255,0.3);
border-radius: 8px;
cursor: pointer;
font-size: 14px;
font-weight: bold;
transition: all 0.2s ease;
width: 120px;
text-align: center;
}
.auth-button:hover {
background: rgba(255,255,255,0.2);
border-color: rgba(255,255,255,0.5);
}
/* Mobile optimizations */
@media (max-width: 768px) {
body {
overflow-x: hidden;
overflow-y: hidden !important; /* No scrolling on home screen */
scroll-behavior: auto;
}
.main-content {
display: flex; /* Use flexbox for main content */
flex-direction: column; /* Stack children vertically */
height: 100vh; /* Exact viewport height */
overflow: hidden; /* No scrolling */
padding-top: 25px; /* Just enough for header buttons */
padding-bottom: 5px; /* Minimal bottom padding */
box-sizing: border-box; /* Include padding in height calculation */
}
#slide-out-menu {
width: 100vw;
right: -100vw;
height: 100vh;
overflow-y: auto;
max-height: 100vh;
}
#back-to-main-menu-button,
#toggle-highscores-button {
top: 25px; /* Give more space from top on mobile */
padding: 8px 12px; /* Smaller buttons */
font-size: 14px; /* Smaller font size */
z-index: 1001; /* Ensure these are above the game-display-area content */
}
#menu-toggle-button,
#volume-toggle-button {
top: 25px; /* Give more space from top on mobile */
padding: 12px 16px; /* Keep menu and volume buttons same size */
font-size: 18px; /* Keep menu and volume buttons font same size */
z-index: 1001; /* Ensure these are above the game-display-area content */
}
#back-to-main-menu-button {
left: 10px;
}
#menu-toggle-button {
right: 10px !important;
}
#mute-button {
right: 65px;
}
.menu-content {
padding: 50px 15px 50px; /* More bottom padding to prevent cutoff */
width: 100%;
max-width: 100%;
box-sizing: border-box;
overflow: hidden;
}
.menu-action-button {
max-width: 180px; /* Even smaller on mobile */
font-size: 12px;
padding: 6px 8px;
}
#game-info,
#settings-pane {
padding: 15px;
}
#auth-status p {
margin: 0;
font-size: 16px;
}
/* Mobile logo adjustments */
.logo-container {
margin-bottom: 20px;
}
.logo-container .logo,
.logo-container img,
img.logo {
max-width: 160px;
max-height: 160px;
width: 160px;
height: 160px;
}
.piece {
font-size: var(--piece-font-size, 4vmin); /* Use dynamic size, with a smaller fallback */
}
/* Mobile game mode buttons */
.game-mode-selection {
padding: 0 10px 50px 10px;
gap: 15px;
margin-bottom: 50px;
}
.start-game-mode-button {
height: 60px;
}
.game-mode-content {
padding: 0 15px;
}
.game-mode-icon {
width: 35px;
height: 35px;
margin-right: 12px;
}
.game-mode-name {
font-size: 14px;
}
.game-mode-description {
font-size: 10px;
}
}
/* Nuts in-game display */
#nuts-ingame-display {
text-align: center;
margin-bottom: 15px;
color: white;
}
#nuts-ingame-round {
font-size: 2em;
font-weight: bold;
opacity: 0.8;
}
#nuts-round-timer-top {
font-size: 4em;
font-weight: bold;
line-height: 1;
}
/* Nuts mode switcher styling (Moved to side position, styles updated above) */
/* Difficulty switcher styling (Moved to side position, styles updated above) */
.mode-switch-button {
padding: 8px 16px;
background: transparent;
color: rgba(255, 255, 255, 0.7);
border: none;
border-radius: 6px;
cursor: pointer;
font-size: 14px;
font-weight: 500;
transition: all 0.2s ease;
}
.mode-switch-button:hover {
color: white;
background: rgba(255, 255, 255, 0.1);
}
.mode-switch-button.active {
background: linear-gradient(135deg, #2196F3, #1976D2);
color: white;
box-shadow: 0 2px 8px rgba(33, 150, 243, 0.3);
}
.mode-switch-button.active:hover {
background: linear-gradient(135deg, #1976D2, #1565C0);
transform: translateY(-1px);
box-shadow: 0 4px 12px rgba(33, 150, 243, 0.4);
}
#nuts-powerups-toggle {
display: flex;
align-items: center;
gap: 6px;
}
#nuts-powerups-toggle svg {
width: 14px;
height: 14px;
}
/* Mode explanation tooltip */
#mode-explanation {
position: fixed;
top: 115px;
left: 50%;
transform: translateX(-50%);
z-index: 999;
background: rgba(0, 0, 0, 0.9);
border: 1px solid rgba(255, 255, 255, 0.3);
border-radius: 8px;
padding: 15px;
-webkit-backdrop-filter: blur(10px);
backdrop-filter: blur(10px);
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4);
max-width: 300px;
text-align: center;
}
.explanation-content h4 {
margin: 0 0 10px 0;
color: #fff;
font-size: 16px;
}
.explanation-content #explanation-text {
margin: 0;
color: rgba(255, 255, 255, 0.9);
font-size: 14px;
line-height: 1.4;
}
/* Desktop/Game Layout Adjustments */
@media (min-width: 1200px) {
#slide-out-menu {
width: 350px; /* Keep same width as mobile menu initially */
right: -350px; /* Start off-screen */
position: fixed; /* Always fixed */
}
#slide-out-menu.active {
right: 0; /* Slide in */
}
.menu-content {
padding: 60px 20px 20px; /* Adjust padding if needed */
}
/* No margin-right for game-area-container on desktop; menu overlays */
#game-area-container {
margin-right: 0; /* Ensures it doesn't shift */
}
/* Show menu toggle button even on desktop */
#menu-toggle-button {
display: block !important;
}
/* Always show menu close button, as it's now a pop-out */
#menu-close-button {
display: block;
}
}
/* General layout adjustments for game area controls */
.game-display-area {
display: flex;
flex-direction: column;
align-items: center; /* Center items horizontally */
justify-content: center; /* Center items vertically within available space */
flex-grow: 1; /* Allow it to grow and fill available vertical space */
padding: 10px; /* Adjust padding for mobile view */
box-sizing: border-box;
gap: 15px; /* Space between blocks of controls */
/* Removed padding-top and height: 100% here as main-content now handles vertical sizing and padding */
/* Removed overflow-y: auto, scrolling is handled by .main-content */
}
/* Container for the board and related elements */
#game-board-container {
display: flex;
flex-direction: column;
align-items: center;
width: 100%;
flex-grow: 1; /* Allow it to take available space */
justify-content: center; /* Center board vertically within its container */
min-height: 1px; /* Required for flex-grow to work correctly in some browsers */
}
/* Container for board and graveyards/timers */
#board-and-graveyards {
display: flex;
flex-direction: row; /* Default: horizontal for desktop */
align-items: center; /* Center content vertically */
gap: 15px; /* Space between board and side panels */
width: 100%;
max-width: 900px; /* Max width for the entire board + side panels area */
justify-content: center;
}
#chessboard {
display: grid;
width: 65vmin; /* Default for all modes on desktop */
height: 65vmin; /* Default for all modes on desktop */
max-width: 560px; /* Default for all modes on desktop */
max-height: 560px; /* Default for all modes on desktop */
aspect-ratio: 1 / 1;
box-shadow: 0 5px 25px rgba(0,0,0,0.5);
border: 2px solid rgba(255,255,255,0.1);
order: 2; /* Default order, chessboard in the middle */
}
.side-panel {
display: flex;
flex-direction: column; /* Stack contents within side panel */
gap: 10px;
height: 65vmin; /* Match chessboard height */
max-height: 560px; /* Match chessboard max-height */
width: 80px; /* Default width for side panel */
justify-content: flex-start;
order: 1; /* Black side panel (left) */
}
.side-panel:last-of-type { /* White side panel (right) */
order: 3;
}
/* Responsive adjustments for mobile */
@media (max-width: 768px) {
#game-board-container {
/* Simplified mobile layout */
display: block; /* Use block instead of flex */
margin: 0 auto; /* Center the container */
padding: 0; /* Remove any padding */
text-align: center; /* Center the board horizontally */
width: 100%; /* Full width */
}
/* Mobile adjustments for game-display-area */
.game-display-area {
padding: 0; /* Zero padding for maximum space usage */
margin: 0 auto; /* Center the container */
/* Remove all flex properties that might cause spacing */
display: block; /* Use block instead of flex */
width: 100%; /* Full width */
text-align: center; /* Center all content */
}
#back-to-main-menu-button,
#toggle-highscores-button {
top: 5px; /* Minimal top spacing for mobile */
padding: 8px 12px; /* Smaller buttons */
font-size: 14px; /* Smaller font */
}
#menu-toggle-button,
#volume-toggle-button {
top: 5px; /* Minimal top spacing for mobile */
padding: 12px 16px !important; /* Keep menu and volume buttons same size */
font-size: 18px !important; /* Keep menu and volume buttons font same size */
}
#back-to-main-menu-button {
left: 10px;
}
#menu-toggle-button {
right: 10px !important;
}
#volume-toggle-button {
right: 65px; /* Positioned next to menu button */
}
#toggle-highscores-button {
right: 120px; /* Positioned next to volume button */
}
#board-and-graveyards {
/* Simplified mobile layout */
display: block; /* Use block instead of flex */
width: 100%; /* Full width container */
max-width: none; /* Allow board container to take full width */
margin: 0 auto; /* Center the container */
padding: 0; /* Remove any padding */
text-align: center; /* Center content */
}
#chessboard {
width: min(85vw, 60vh); /* Smaller board to fit with all elements */
height: min(85vw, 60vh); /* Keep square aspect ratio */
max-width: none; /* Remove max-width constraint */
max-height: 60vh; /* Ensure it fits with other elements */
display: inline-block; /* Allow centering with text-align */
margin: 0 auto; /* Center with auto margins */
position: relative;
left: -10px; /* Move board slightly left */
}
.side-panel {
width: 85vw; /* Match chessboard width */
max-width: none; /* Remove max-width */
height: auto; /* Height adapts to content */
min-height: 20px; /* Very minimal height for mobile */
max-height: 30px; /* Very limited height to save space */
margin: 2px auto; /* Center and minimal vertical spacing */
display: block; /* Block display */
text-align: center; /* Center content within panel */
}
.side-panel:last-of-type { /* White graveyard/timer (bottom) */
order: 3;
}
.graveyard {
flex-grow: 1;
flex-direction: column; /* Stack pieces vertically first */
flex-wrap: wrap; /* Allow wrapping to new columns when needed */
justify-content: flex-start;
align-items: center;
padding: 1px; /* Minimal padding */
max-height: 25px; /* Very limited graveyard height */
overflow: hidden; /* Hide overflow if too many pieces */
font-size: 10px; /* Even smaller piece symbols */
line-height: 1; /* Tight line spacing */
}
/* Blitz timers within side-panels for mobile: move above graveyards */
.side-panel .blitz-timer {
order: -1; /* Make timer appear above graveyard in its flex container */
}
/* Hide the bottom controls (player piece switcher) on mobile for non-Nuts modes */
/* It should now be controlled by JS directly based on game.game_type */
#bottom-controls-container {
flex-direction: column; /* Stack vertically on small screens */
gap: 5px; /* Minimal gap */
align-items: center; /* Center the switchers horizontally */
margin: 0; /* Remove margins */
padding: 2px 0; /* Minimal padding */
}
/* Optimize nuts mode display for mobile */
#nuts-ingame-display {
margin-bottom: 0; /* Remove margin completely */
margin-top: 0; /* Remove top margin too */
padding: 2px 0; /* Minimal padding */
font-size: 14px; /* Smaller font */
}
#nuts-ingame-round,
#nuts-round-timer-top,
#current-score-span {
font-size: 14px; /* Smaller fonts for mobile */
margin: 2px 0; /* Minimal margins */
}
/* Center and optimize difficulty switcher on mobile */
#difficulty-switcher {
margin: 0 auto; /* Center the switcher */
padding: 3px; /* Compact padding */
gap: 3px; /* Compact gap */
width: fit-content; /* Only take needed width */
display: flex; /* Ensure flex display */
justify-content: center; /* Center buttons */
}
}
.square {
display: flex;
justify-content: center;
align-items: center;
position: relative;
}
.square.light {
background: rgba(255, 255, 255, 0.1);
}
.square.dark {
background: rgba(0, 0, 0, 0.1);
}
.piece {
font-size: var(--piece-font-size, 5vmin);
text-shadow: 0 2px 4px rgba(0,0,0,0.5);
line-height: 1;
user-select: none;
cursor: pointer;
transition: text-shadow 0.2s ease-in-out;
}
.piece-white {
color: #89CFF0; /* Bright baby blue */
text-shadow: 0 0 8px rgba(137, 207, 240, 0.8), 0 2px 4px rgba(0,0,0,0.5);
}
.piece-black {
color: #FF8C00; /* Bright orange */
text-shadow: 0 0 8px rgba(255, 140, 0, 0.8), 0 2px 4px rgba(0,0,0,0.5);
}
.square.selected .piece-white {
text-shadow: 0 0 5px rgba(255, 255, 255, 0.8), 0 0 15px rgba(0, 191, 255, 0.9), 0 0 25px rgba(0, 115, 230, 0.9);
}
.square.selected .piece-black {
text-shadow: 0 0 5px rgba(255, 255, 255, 0.8), 0 0 15px rgba(255, 165, 0, 0.9), 0 0 25px rgba(255, 140, 0, 0.9);
}
/* Container for board and graveyards to keep them grouped */
#board-and-graveyards {
display: flex;
align-items: center; /* Vertically center graveyards with board */
gap: 15px; /* Space between board and graveyards */
}
.side-panel {
display: flex;
flex-direction: column;
gap: 10px;
height: 65vmin;
max-height: 560px; /* Match chessboard max-height */
justify-content: flex-start; /* Align items to the top */
width: 80px;
}
.graveyard {
flex-grow: 1; /* Graveyard takes available space */
display: flex;
flex-wrap: wrap;
align-content: flex-start;
gap: 2px;
padding: 5px;
background: transparent;
border: none;
overflow-y: auto; /* For many captured pieces */
}
.blitz-timer {
text-align: center;
font-size: 1.8em;
font-weight: bold;
color: white;
background: rgba(0,0,0,0.6);
padding: 8px 10px;
border-radius: 8px;
border: 1px solid rgba(255, 255, 255, 0.2);
}
/* Difficulty switcher styling (now above the board) */
#difficulty-switcher {
display: flex; /* Make it horizontal */
gap: 5px;
background: rgba(0, 0, 0, 0.8);
border: 1px solid rgba(255, 255, 255, 0.3);
border-radius: 8px;
padding: 5px;
-webkit-backdrop-filter: blur(10px);
backdrop-filter: blur(10px);
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
z-index: 1000;
margin-bottom: 15px; /* Space below difficulty switcher */
}
/* Bottom controls container (nuts mode and player piece) */
#bottom-controls-container {
display: flex;
flex-direction: row; /* Horizontal layout for these two blocks */
gap: 15px; /* Space between Nuts mode switcher and Player piece switcher */
margin-top: 15px; /* Space above bottom controls */
}
#nuts-mode-switcher {
display: flex;
flex-direction: row; /* Horizontal for itself */
gap: 5px;
background: rgba(0, 0, 0, 0.8);
border: 1px solid rgba(255, 255, 255, 0.3);
border-radius: 8px;
padding: 5px;
-webkit-backdrop-filter: blur(10px);
backdrop-filter: blur(10px);
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
z-index: 1000;
}
#player-piece-switcher {
display: flex;
flex-direction: row; /* Horizontal for itself */
gap: 10px;
background: rgba(0, 0, 0, 0.8);
border: 1px solid rgba(255, 255, 255, 0.3);
border-radius: 8px;
padding: 8px;
-webkit-backdrop-filter: blur(10px);
backdrop-filter: blur(10px);
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
z-index: 1000;
}
.mode-switch-button.player-piece-button {
font-size: 2.5em;
padding: 10px 15px;
min-width: 60px;
min-height: 60px;
}
/* Hide by default for JS to manage */
#difficulty-switcher.hidden,
#nuts-mode-switcher.hidden,
#player-piece-switcher.hidden,
#bottom-controls-container.hidden {
display: none;
}
/* Mode explanation tooltip repositioning */
#mode-explanation {
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
z-index: 1500;
background: rgba(0, 0, 0, 0.9);
border: 1px solid rgba(255, 255, 255, 0.3);
border-radius: 8px;
padding: 15px;
-webkit-backdrop-filter: blur(10px);
backdrop-filter: blur(10px);
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4);
max-width: 300px;
text-align: center;
}
/* Mobile specific adjustments for controls */
@media (max-width: 768px) {
.game-display-area {
padding: 10px;
gap: 10px;
}
#difficulty-switcher,
#nuts-mode-switcher,
#player-piece-switcher {
padding: 3px;
gap: 3px;
}
#bottom-controls-container {
flex-direction: column; /* Stack vertically on small screens */
gap: 10px;
align-items: center; /* Center the switchers horizontally */
}
.mode-switch-button {
padding: 6px 10px;
font-size: 12px;
}
.mode-switch-button.player-piece-button {
font-size: 2em;
padding: 8px 12px;
min-width: 50px;
min-height: 50px;
}
}
/* Animated game mode selection */
.game-mode-selection {
display: flex;
flex-direction: column;
gap: 25px;
padding: 0 30px;
max-width: 450px;
margin: 0 auto; /* Ensure proper centering */
width: calc(100% - 60px); /* Account for padding */
box-sizing: border-box;
justify-content: center;
align-items: center;
}
.start-game-mode-button {
position: relative;
display: flex;
align-items: center;
justify-content: center;
padding: 0;
background: transparent;
border: none;
border-radius: 20px;
color: white;
font-size: 18px;
font-weight: 600;
cursor: pointer;
transition: all 0.4s ease;
overflow: hidden;
height: 70px;
text-align: left;
width: 100%;
margin: 0 auto;
}
.start-game-mode-button::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: linear-gradient(135deg, rgba(255,255,255,0.1), rgba(255,255,255,0.05));
border: 2px solid rgba(255,255,255,0.2);
border-radius: 20px;
-webkit-backdrop-filter: blur(15px);
backdrop-filter: blur(15px);
transition: all 0.4s ease;
z-index: 1;
pointer-events: none; /* Added to ensure button underneath is clickable */
}
.start-game-mode-button::after {
content: '';
position: absolute;
top: -2px;
left: -2px;
right: -2px;
bottom: -2px;
background: linear-gradient(45deg, transparent, rgba(255,255,255,0.1), transparent);
border-radius: 22px;
opacity: 0;
animation: pulse-glow 3s ease-in-out infinite;
z-index: 0;
pointer-events: none; /* Added to ensure button underneath is clickable */
}
.start-game-mode-button:hover::before {
background: linear-gradient(135deg, rgba(255,255,255,0.2), rgba(255,255,255,0.1));
border-color: rgba(255,255,255,0.4);
transform: scale(1.02);
box-shadow: 0 10px 30px rgba(0,0,0,0.4);
}
.start-game-mode-button:hover::after {
opacity: 1;
animation: pulse-glow 1.5s ease-in-out infinite;
}
.game-mode-content {
position: relative;
display: flex;
align-items: center;
width: 100%;
padding: 0 25px;
z-index: 2;
}
.game-mode-icon {
width: 40px;
height: 40px;
margin-right: 20px;
filter: drop-shadow(0 2px 8px rgba(0,0,0,0.5));
animation: float-icon 4s ease-in-out infinite;
}
.game-mode-text {
flex: 1;
}
.game-mode-name {
font-size: 16px;
line-height: 1.2;
margin-bottom: 4px;
}
.game-mode-description {
font-size: 11px;
opacity: 0.8;
font-weight: 400;
}
@keyframes pulse-glow {
0% {
opacity: 0;
transform: scale(1);
}
50% {
opacity: 0.6;
transform: scale(1.05);
}
100% {
opacity: 0;
transform: scale(1);
}
}
@keyframes float-icon {
0% {
transform: translateY(0px) rotate(0deg);
}
25% {
transform: translateY(-3px) rotate(1deg);
}
50% {
transform: translateY(0px) rotate(0deg);
}
75% {
transform: translateY(-2px) rotate(-1deg);
}
100% {
transform: translateY(0px) rotate(0deg);
}
}
/* Specific game mode colors and effects */
.start-game-mode-button[data-game-type="standard"]::after {
background: linear-gradient(45deg, transparent, rgba(139, 69, 19, 0.3), transparent);
}
.start-game-mode-button[data-game-type="nuts"]::after {
background: linear-gradient(45deg, transparent, rgba(255, 215, 0, 0.4), transparent);
}
.start-game-mode-button[data-game-type="blitz"]::after {
background: linear-gradient(45deg, transparent, rgba(65, 105, 225, 0.4), transparent);
}
.start-game-mode-button[data-game-type="chess960"]::after {
background: linear-gradient(45deg, transparent, rgba(147, 112, 219, 0.4), transparent);
}
@media (max-width: 768px) {
.game-mode-selection {
padding: 0 15px;
gap: 20px;
margin-left: auto;
margin-right: auto;
width: 100%;
box-sizing: border-box;
}
.start-game-mode-button {
height: 70px;
}
.game-mode-content {
padding: 0 20px;
}
.game-mode-icon {
width: 40px;
height: 40px;
margin-right: 15px;
}
.game-mode-name {
font-size: 16px;
}
.game-mode-description {
font-size: 11px;
}
}
@media (max-width: 480px) {
.game-mode-selection {
padding: 0 10px;
gap: 15px;
margin-left: auto;
margin-right: auto;
width: 100%;
box-sizing: border-box;
}
.start-game-mode-button {
height: 60px;
}
.game-mode-content {
padding: 0 15px;
}
.game-mode-icon {
width: 35px;
height: 35px;
margin-right: 12px;
}
.game-mode-name {
font-size: 14px;
}
.game-mode-description {
font-size: 10px;
}
}
/* High Scores for Game Mode Display */
#game-mode-highscores {
margin-top: 20px;
width: 100%;
max-width: 400px; /* Adjust max-width as needed */
text-align: center;
background: rgba(10, 10, 25, 0.8);
border: 1px solid rgba(255, 255, 255, 0.2);
border-radius: 12px;
padding: 15px;
box-shadow: 0 4px 15px rgba(0,0,0,0.3);
-webkit-backdrop-filter: blur(5px);
backdrop-filter: blur(5px);
}
#game-mode-highscores h3 {
margin-top: 0;
margin-bottom: 15px;
font-size: 1.4em;
color: #FFD700; /* Gold color for title */
}
#game-mode-highscores .top-players-list {
list-style: none;
padding: 0;
margin: 0;
margin-bottom: 15px;
max-height: 300px;
overflow-y: auto;
padding-right: 8px;
}
/* Custom scrollbar for high scores list */
#game-mode-highscores .top-players-list::-webkit-scrollbar {
width: 6px;
}
#game-mode-highscores .top-players-list::-webkit-scrollbar-track {
background: rgba(255,255,255,0.1);
border-radius: 3px;
}
#game-mode-highscores .top-players-list::-webkit-scrollbar-thumb {
background: rgba(255,255,255,0.3);
border-radius: 3px;
}
#game-mode-highscores .top-players-list::-webkit-scrollbar-thumb:hover {
background: rgba(255,255,255,0.5);
}
#game-mode-highscores .top-players-list li {
display: flex;
justify-content: space-between;
align-items: center;
padding: 8px 10px;
background: rgba(255,255,255,0.05);
border-radius: 6px;
margin-bottom: 4px;
font-size: 1.05em;
}
#game-mode-highscores .top-players-list .player-rank {
font-weight: bold;
color: rgba(255,255,255,0.7);
margin-right: 8px;
}
#game-mode-highscores .top-players-list .player-name {
flex-grow: 1;
text-align: left;
}
#game-mode-highscores .top-players-list .player-score {
font-weight: bold;
color: #89CFF0; /* Baby blue for scores */
}
#current-user-personal-best {
margin-top: 15px;
border-top: 1px dashed rgba(255,255,255,0.2);
padding-top: 15px;
}
#current-user-personal-best h4 {
margin: 0 0 10px 0;
font-size: 1.1em;
color: #FF8C00; /* Orange for personal best title */
}
#current-user-personal-best #personal-best-score {
font-size: 1.2em;
font-weight: bold;
color: #89CFF0; /* Baby blue for personal best score */
}
/* High Scores for Game Mode Display (Now an overlay) */
#game-mode-highscores {
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
z-index: 110; /* Increased z-index to ensure it's above game-over-overlay (z-index: 100) */
width: 90%;
max-width: 450px;
max-height: 90vh; /* Limit height for smaller screens */
overflow-y: auto; /* Allow scrolling if content is too long */
text-align: center;
background: linear-gradient(135deg, rgba(20, 20, 40, 0.98), rgba(0, 0, 0, 0.98));
border: 1px solid rgba(255, 255, 255, 0.2);
border-radius: 15px;
padding: 25px;
box-shadow: 0 5px 25px rgba(0,0,0,0.5);
-webkit-backdrop-filter: blur(10px);
backdrop-filter: blur(10px);
opacity: 0; /* Hidden by default with opacity for fade effect */
visibility: hidden;
transition: opacity 0.3s ease, visibility 0.3s ease;
margin: 0 5%; /* Ensure margins on sides */
box-sizing: border-box;
}
#game-mode-highscores.active {
opacity: 1;
visibility: visible;
}
#game-mode-highscores h3 {
margin-top: 0;
margin-bottom: 15px;
font-size: 1.6em; /* Slightly larger title */
color: #FFD700; /* Gold color for title */
}
#game-mode-highscores .top-players-list {
list-style: none;
padding: 0;
margin: 0;
margin-bottom: 20px; /* More space below list */
max-height: 350px;
overflow-y: auto;
padding-right: 8px;
}
#game-mode-highscores .top-players-list li {
display: flex;
justify-content: space-between;
align-items: center;
padding: 10px 12px; /* Slightly larger padding */
background: rgba(255,255,255,0.08); /* Slightly more prominent background */
border-radius: 8px;
margin-bottom: 6px; /* More space between items */
font-size: 1.1em;
}
#game-mode-highscores .top-players-list .player-rank {
font-weight: bold;
color: rgba(255,255,255,0.7);
margin-right: 10px;
}
#game-mode-highscores .top-players-list .player-name {
flex-grow: 1;
text-align: left;
}
#game-mode-highscores .top-players-list .player-score {
font-weight: bold;
color: #89CFF0; /* Baby blue for scores */
}
#current-user-personal-best {
margin-top: 20px; /* More space above */
border-top: 1px dashed rgba(255,255,255,0.3); /* Darker dash */
padding-top: 20px;
}
#current-user-personal-best h4 {
margin: 0 0 10px 0;
font-size: 1.2em; /* Slightly larger */
color: #FF8C00; /* Orange for personal best title */
}
#current-user-personal-best #personal-best-score {
font-size: 1.3em; /* Slightly larger */
font-weight: bold;
color: #89CFF0; /* Baby blue for personal best score */
}
#toggle-highscores-button-from-popup {
margin-top: 25px; /* More space */
background: linear-gradient(135deg, #1E90FF, #4169E1); /* Distinct blue color */
border-color: rgba(30, 144, 255, 0.5);
box-shadow: 0 2px 8px rgba(30, 144, 255, 0.3);
}
#toggle-highscores-button-from-popup:hover {
background: linear-gradient(135deg, #4169E1, #1C86EE);
transform: translateY(-1px);
box-shadow: 0 4px 12px rgba(30, 144, 255, 0.4);
}
/* Responsive adjustments for high scores overlay */
@media (max-width: 768px) {
#game-mode-highscores {
width: 90vw;
max-width: 95vw; /* Prevent going off screen */
padding: 15px;
left: 50%;
right: auto;
margin: 0 2.5%; /* Ensure margins */
max-height: 85vh; /* More conservative height */
}
#game-mode-highscores h3 {
font-size: 1.4em;
margin-bottom: 12px;
}
#game-mode-highscores .top-players-list li {
font-size: 1em;
padding: 8px 10px;
}
#current-user-personal-best {
padding-top: 15px;
margin-top: 15px;
}
#current-user-personal-best h4 {
font-size: 1.1em;
}
#current-user-personal-best #personal-best-score {
font-size: 1.2em;
}
#mute-button {
right: 120px; /* Adjust position on mobile for new button */
}
#toggle-highscores-button {
right: 65px; /* Adjust position on mobile for new button */
}
}
/* Volume Controls Popup Styles */
#volume-controls-popup {
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
z-index: 200; /* Above highscores overlay */
width: 90%;
max-width: 350px;
background: linear-gradient(135deg, rgba(20, 20, 40, 0.98), rgba(0, 0, 0, 0.98));
border: 1px solid rgba(255, 255, 255, 0.2);
border-radius: 15px;
padding: 25px;
box-shadow: 0 5px 25px rgba(0,0,0,0.5);
-webkit-backdrop-filter: blur(10px);
backdrop-filter: blur(10px);
opacity: 0; /* Hidden by default with opacity for fade effect */
visibility: hidden;
transition: opacity 0.3s ease, visibility 0.3s ease;
}
#volume-controls-popup.active {
opacity: 1;
visibility: visible;
}
#volume-controls-popup h3 {
margin-top: 0;
margin-bottom: 20px;
font-size: 1.6em;
color: #FFD700;
text-align: center;
}
.volume-slider-container {
margin-bottom: 15px;
}
.volume-slider-container label {
display: block;
margin-bottom: 8px;
font-size: 1.1em;
color: rgba(255, 255, 255, 0.8);
}
.volume-slider-container input[type="range"] {
width: 100%;
-webkit-appearance: none;
height: 8px;
background: rgba(255, 255, 255, 0.2);
border-radius: 5px;
outline: none;
transition: background 0.2s ease;
}
.volume-slider-container input[type="range"]::-webkit-slider-thumb {
-webkit-appearance: none;
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
width: 20px;
height: 20px;
border-radius: 50%;
background: #1E90FF;
cursor: pointer;
box-shadow: 0 0 5px rgba(30, 144, 255, 0.5);
}
.volume-slider-container input[type="range"]::-moz-range-thumb {
width: 20px;
height: 20px;
border-radius: 50%;
background: #1E90FF;
cursor: pointer;
box-shadow: 0 0 5px rgba(30, 144, 255, 0.5);
}
/* In-game Chat Styles */
#chat-container {
position: fixed;
bottom: 20px;
right: 20px;
width: 300px;
max-width: 90vw;
background: rgba(10, 10, 25, 0.9);
border: 1px solid rgba(255, 255, 255, 0.2);
border-radius: 12px;
box-shadow: 0 4px 15px rgba(0,0,0,0.5);
z-index: 1100;
-webkit-backdrop-filter: blur(10px);
backdrop-filter: blur(10px);
color: white;
overflow: hidden;
transition: height 0.3s ease;
}
#chat-header {
padding: 10px 15px;
background: rgba(255,255,255,0.1);
cursor: pointer;
display: flex;
justify-content: space-between;
align-items: center;
font-weight: bold;
}
#chat-toggle-button {
font-size: 20px;
font-weight: bold;
}
#chat-body {
padding: 10px;
max-height: 250px;
display: flex;
flex-direction: column;
}
#chat-messages {
list-style: none;
padding: 0;
margin: 0;
overflow-y: auto;
flex-grow: 1;
height: 200px; /* fixed height for scroll */
margin-bottom: 10px;
}
#chat-messages li {
margin-bottom: 8px;
word-wrap: break-word;
}
#chat-messages .chat-username {
font-weight: bold;
color: #2196F3; /* A distinct color for usernames */
}
#chat-form {
display: flex;
gap: 5px;
}
#chat-input {
flex-grow: 1;
padding: 8px;
background: rgba(255, 255, 255, 0.1);
border: 1px solid rgba(255, 255, 255, 0.2);
border-radius: 6px;
color: #fff;
}
#chat-form button {
padding: 8px 12px;
background: #2196F3;
color: white;
border: none;
border-radius: 6px;
cursor: pointer;
}
#game-over-overlay, #promotion-overlay {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.7);
-webkit-backdrop-filter: blur(10px);
backdrop-filter: blur(10px);
display: flex;
justify-content: center;
align-items: center;
z-index: 100;
}
#game-over-message {
background: linear-gradient(135deg, rgba(20, 20, 40, 0.98), rgba(0, 0, 0, 0.98));
padding: 30px;
border-radius: 15px;
text-align: center;
box-shadow: 0 5px 25px rgba(0,0,0,0.5);
border: 1px solid rgba(255,255,255,0.2);
max-width: 90vw;
}
/* Styles for new slide-out menu content */
.menu-action-button {
display: block;
width: 100%;
max-width: 200px; /* Much smaller width */
padding: 8px 10px; /* Smaller padding */
margin: 0 auto 6px auto;
background: rgba(255,255,255,0.1);
color: white;
border: 1px solid rgba(255,255,255,0.3);
border-radius: 6px;
cursor: pointer;
font-size: 13px; /* Smaller font */
font-weight: bold;
text-align: center;
text-decoration: none;
transition: all 0.2s ease;
box-sizing: border-box;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}
.menu-action-button:hover {
background: rgba(255,255,255,0.2);
border-color: rgba(255,255,255,0.5);
}
#menu-auth-section p {
text-align: center;
margin-bottom: 15px;
font-size: 1.1em;
}
#menu-nav-section {
margin-top: 20px;
border-top: 1px solid rgba(255,255,255,0.1);
padding-top: 20px;
width: 100%;
max-width: 100%;
box-sizing: border-box;
overflow: hidden;
}
@media (max-width: 480px) {
#game-over-message {
padding: 20px;
width: 80vw;
}
#game-over-text {
font-size: 1.2em;
}
}
/* Friends Section in Slide-out Menu */
#menu-friends-section {
margin-top: 20px;
padding-top: 20px;
border-top: 1px solid rgba(255,255,255,0.1);
width: 100%;
max-width: 100%;
box-sizing: border-box;
overflow: hidden;
}
#menu-friends-section h4 {
margin: 0 0 15px 0;
font-size: 16px;
font-weight: 600;
color: white;
}
.add-friend-form-menu {
display: flex;
gap: 5px;
margin-bottom: 15px;
width: 100%;
max-width: 100%;
box-sizing: border-box;
}
.add-friend-form-menu input {
flex-grow: 1;
min-width: 0; /* Allow input to shrink */
padding: 8px;
background: rgba(255,255,255,0.1);
border: 1px solid rgba(255,255,255,0.2);
border-radius: 6px;
color: #fff;
font-size: 14px;
box-sizing: border-box;
}
.add-friend-form-menu button {
padding: 8px 12px;
background: #2196F3;
border: none;
color: white;
border-radius: 6px;
cursor: pointer;
font-size: 14px; /* Smaller font size */
font-weight: bold;
flex-shrink: 0; /* Don't shrink button */
white-space: nowrap;
}
#online-friends-list {
list-style: none;
padding: 0;
margin-bottom: 15px;
max-height: 200px;
overflow-y: auto;
}
.online-friend-item {
display: flex;
justify-content: space-between;
align-items: center;
padding: 8px 0;
width: 100%;
max-width: 100%;
box-sizing: border-box;
overflow: hidden;
}
.online-friend-item span:first-child {
flex-grow: 1;
min-width: 0;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
margin-right: 10px;
}
.status-indicator {
display: inline-block;
width: 8px;
height: 8px;
border-radius: 50%;
margin-right: 8px;
background-color: #6c757d;
}
.status-indicator.online {
background-color: #28a745;
}
.challenge-button {
padding: 4px 8px;
font-size: 12px;
background: transparent;
color: #4CAF50;
border: 1px solid #4CAF50;
border-radius: 4px;
cursor: pointer;
transition: all 0.2s ease;
flex-shrink: 0;
white-space: nowrap;
}
.challenge-button:hover {
background: #4CAF50;
color: white;
}
/* Matchmaking Modal */
#matchmaking-modal-overlay {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.7);
-webkit-backdrop-filter: blur(10px);
backdrop-filter: blur(10px);
display: flex;
justify-content: center;
align-items: center;
z-index: 2000;
}
.matchmaking-modal-content {
position: relative;
background: linear-gradient(135deg, rgba(20, 20, 40, 0.95), rgba(0, 0, 0, 0.95));
border: 1px solid rgba(255, 255, 255, 0.2);
border-radius: 20px;
padding: 30px;
box-shadow: 0 10px 40px rgba(0,0,0,0.5);
width: 90%;
max-width: 500px;
text-align: center;
}
.matchmaking-modal-content h3 {
margin-top: 0;
margin-bottom: 25px;
}
.matchmaking-options {
display: flex;
flex-direction: column;
gap: 15px;
}
.matchmaking-row {
display: flex;
gap: 10px;
justify-content: center;
}
.matchmaking-button {
flex: 1;
padding: 15px;
background: rgba(255,255,255,0.1);
border: 1px solid rgba(255,255,255,0.2);
color: white;
border-radius: 8px;
cursor: pointer;
font-size: 16px;
transition: all 0.2s ease;
}
.matchmaking-button:hover {
background: rgba(255,255,255,0.2);
}
.matchmaking-button.ranked {
border-color: #FFD700;
color: white; /* Changed from #FFD700 to white for readability */
}
.matchmaking-button.casual {
border-color: #2196F3;
color: white; /* Changed from #2196F3 to white for readability */
}
#cancel-matchmaking-button {
margin-top: 20px;
background-color: #f44336;
}