@font-face{ font-family: 'Segoe'; font-style: normal; font-weight: 400; src: url('font/Segoe.eot'); src: url('font/Segoe.eot')format('embedded-opentype'), url('font/Segoe.woff2')format('woff2'), url('font/Segoe.woff')format('woff'), url('font/Segoe.ttf')format('truetype'), url('font/Segoe.svg#Segoe') format('svg'); }
*{ margin: 0; padding: 0; box-sizing: border-box; font-family: 'Segoe'; }
body{ touch-action: pan-x pan-y pinch-zoom; background-color: #404040; color: #FFFFFF; padding: 20px; display: flex; flex-direction: column; align-items: center; }
.container{ max-width: 1200px; width: 100%; display: flex; flex-direction: column; align-items: center; }
header{ text-align: center; width: 100%; }
h1{ color: #f0e6d2; margin-bottom: 10px; font-size: 2.5rem; text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5); }
.subtitle{ color: #f0f8ff; font-size: 1.2rem; margin-bottom: 20px; }
.game-area{ display: flex; flex-wrap: wrap; justify-content: center; gap: 30px; width: 100%; }
.board-container{ display: flex; flex-direction: column; align-items: center; }
.board-wrapper{ display: flex; position: relative; align-items: center; background-color: #303030; }
.left-coordinates{ display: flex; flex-direction: column; justify-content: space-between; height: 500px; color: #f0e6d2; font-weight: bold; font-size: 18px; text-align: center; width: 34px; }
.right-coordinates{ display: flex; flex-direction: column; justify-content: space-between; height: 500px; color: #f0e6d2; font-weight: bold; font-size: 18px; text-align: center; width: 34px; transform: rotate(180deg); }
.coordinate-number{ height: 62.5px; display: flex; align-items: center; justify-content: center; }
.player-black{ transform: rotate(180deg); }
.player-black img{ transform: rotate(180deg); }
.see-player-black img{ transform: rotate(180deg); }
.clearfix{ clear: both; }
.top-coordinates{ display: flex; justify-content: space-between; width: 534px; background-color: #303030; color: #f0e6d2; font-weight: bold; font-size: 18px; padding: 5px 0; transform: rotate(180deg); position: relative; left: 35.5px; }
.bottom-coordinates{ display: flex; justify-content: space-between; width: 534px; background-color: #303030; color: #f0e6d2; font-weight: bold; font-size: 18px; padding: 5px 0; position: relative; right: 0px; }
.coordinate{ width: 66px; text-align: center; }
.opening-info{ clear: both; width: 570px; text-align: left; padding: 10px 35px; font-family: 'Segoe'; font-size: 1rem; font-weight: bold; }
.info-panel{ background-color: rgba(30, 30, 46, 0.8); border-radius: 10px; padding: 20px; width: 300px; box-shadow: 0 5px 15px rgba(0, 0, 0, 0.5); }
.status{ text-align: center; padding: 15px; margin-bottom: 20px; background-color: #2D2D44; border-radius: 8px; font-size: 1.3rem; font-weight: bold; min-height: 80px; display: flex; flex-direction: column; justify-content: center; }
.menu-switch{ display: flex; justify-content: center; margin-bottom: 20px; gap: 10px; }
.menu-switch-btn{ padding: 10px 20px; border: none; border-radius: 6px; background-color: #2D2D44; color: #F0E6D2; cursor: pointer; font-weight: bold; transition: all 0.3s ease; }
.menu-switch-btn:hover{ background-color: #3D3D54; }
.menu-switch-btn.active{ background-color: #4A752C; color: #FFFFFF; }
.help, .voice{ padding-top: 5px; }
.player-name-input input{ padding: 10px 15px; width: 220px; border-radius: 6px; border: 2px solid #555555; background-color: #2D2D44; color: white; text-align: center; font-size: 1rem; transition: all 0.3s ease; }
.player-name-input input:focus{ outline: none; border-color: #4CAF50; box-shadow: 0 0 5px rgba(76, 175, 80, 0.5); }
.player-name-input label{ display: block; margin-bottom: 8px; color: #C8B393; font-weight: bold; }
.select-game{ padding: 8px 15px; width: 220px; border-radius: 6px; border: 2px solid #555555; background-color: #2D2D44; color: white; text-align: center; font-size: 1rem; transition: all 0.3s ease; }
.select-game:focus{ outline: none; border-color: #4CAF50; box-shadow: 0 0 5px rgba(76, 175, 80, 0.5); }
.player-info{ display: flex; justify-content: space-between; margin-bottom: 15px; padding-bottom: 10px; border-bottom: 1px solid #444444; }
.account-avatar{ float: left; margin-top: 3px; margin-right: 3px; }
.player{ display: flex; flex-direction: column; align-items: center; width: 48%; }
.player-name{ font-size: 1rem; margin-bottom: 5px; }
.player-icon{ font-size: 24px; margin-bottom: 5px; }
.opponent-avatar-selected img{ width: 32px; height: 32px; background-color: transparent !important; border: 1 px solid #F0F8FF; border-radius: 4px; margin-right: 5px; }
.timer{ font-size: 1.5rem; font-weight: bold; padding: 5px 10px; background-color: #1A1A2E; border-radius: 5px; margin-top: 5px; min-width: 90px; text-align: center; border: 2px solid #333333; }
.timer.active{ border-color: #4CAF50; box-shadow: 0 0 10px rgba(76, 175, 80, 0.5); }
.timer.inactive{ opacity: 0.7; }
.timer.critical{ border-color: #FF4444; box-shadow: 0 0 10px rgba(255, 68, 68, 0.5); color: #FF4444; animation: pulse 1s infinite; }
.lastMove{ text-align: center; height: 35px; }
.captured-title{ text-align: center; margin-bottom: 3px; clear: both; }
.captured-pieces-white{ min-height: 85px; padding: 5px; border-radius: 5px; background-color: rgba(244, 244, 244, 0.8); margin: 10px 0; color: #000000; text-align: center; }
.captured-pieces-black{ min-height: 85px; padding: 5px; border-radius: 5px; background-color: rgba(244, 244, 244, 0.8); margin: 10px 0; color: #000000; text-align: center; }
.captured-list-container{ display: block; position: relative; left: 5%; width: 90%; clear: both; }
.captured-list img{ width: 30px; height: 30px; border: 0; margin: -5px; }
.controls{ display: flex; flex-direction: column; gap: 10px; }
.login-button{ background: #4A752C; color: white; padding: 12px 30px; font-size: 1.1rem; border: none; border-radius: 6px; cursor: pointer; transition: background-color 0.2s; display: block; margin: 20px auto 0; display: block; }
button{ padding: 12px; border: none; border-radius: 6px; background-color: #4A752C; color: #FFFFFF; font-weight: bold; cursor: pointer; transition: background-color 0.2s; font-size: 1rem; margin-top: 10px; }
button:hover{ background-color: #5A8A3C; }
button#newGameBtn{ background-color: #2C5AA0; }
button#newGameBtn:hover{ background-color: #3A6BC0; }
.menu-container{ width: 100%; background-color: rgba(30, 30, 46, 0.95); border-radius: 10px; padding: 20px; box-shadow: 0 5px 15px rgba(0, 0, 0, 0.5); }
.menu-section{ margin-bottom: 25px; }
.menu-section h3{ color: #c8b393; margin-bottom: 10px; text-align: center; }
.color-selection{ display: flex; justify-content: center; gap: 20px; margin-bottom: 10px; }
.color-option{ display: flex; align-items: center; cursor: pointer; }
.time-options{ display: flex; flex-direction: column; gap: 10px; max-width: 300px; margin: 0 auto; }
.time-option{ display: flex; align-items: center; cursor: pointer; }
.avatar-table{ position: relative; right: 15px; margin: 0 auto; border-collapse: collapse; }
.avatar-table td{ padding: 5px; text-align: center; }
.avatar-table img{ cursor: pointer; background-color: transparent !important; border: 2px solid #C0C0C0; border-radius: 4px; transition: all 0.2s; }
.avatar-table img:hover{ transform: scale(2); border-color: rgba(255, 255, 255, 0.4); }
.avatar-table img.selected{ border-color: aliceblue; box-shadow: 0 0 8px rgba(255, 255, 0, 0.8) !important; background-color: transparent !important; }
.opponent-info-display{ height: 50px; text-align: center; margin-bottom: 10px; color: #f0e6d2; font-style: italic; }
.start-ready-button{ background: #4A752C; color: white; padding: 12px 30px; font-size: 1.1rem; border: none; border-radius: 6px; cursor: pointer; transition: background-color 0.2s; display: block; margin: 20px auto 0; display: block; }
.start-button{ background: #4A752C; color: white; padding: 12px 30px; font-size: 1.1rem; border: none; border-radius: 6px; cursor: pointer; transition: background-color 0.2s; display: block; margin: 20px auto 0; display: none; }
.start-button:hover{ background-color: #5A8A3C; }
.file-input{ background: #4A752C; color: white; padding: 3px 8px; font-size: 0.8rem; border: none; border-radius: 3px; cursor: pointer; transition: background-color 0.2s; display: block; margin: 0 0 10px 0; }
.file-input:hover{ background-color: #5A8A3C; }
.exit-button{ background: #4A752C; color: white; padding: 6px 15px; font-size: 1.1rem; border: none; border-radius: 6px; cursor: pointer; transition: background-color 0.2s; display: block; margin: 20px auto 0; }
.exit-button:hover{ background-color: #5A8A3C; }
.computer-avatar{ width: 32px; height: 32px; vertical-align: middle; margin-right: 8px; border-radius: 4px; }
.pause-button-container{ display: flex; align-items: center; justify-content: center; order: 1; }
.board-pause-overlay{ position: relative; }
.board-pause-overlay::before{ content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.95); z-index: 100; border-radius: 3px;  }
.player-black-board-pause-overlay::before{ content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.95); z-index: 100; border-radius: 3px; }
.board-pause-overlay::after{ content: '⏸ PARTITA IN PAUSA ⏸'; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); color: white; font-size: 24px; font-weight: bold; text-align: center; z-index: 101; background: rgba(0, 0, 0, 0.7); padding: 15px 25px; border-radius: 10px; border: 2px solid #FFAA00; white-space: nowrap; letter-spacing: 2px; text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5); animation: pausePulse 1.5s ease-in-out infinite; }
.player-black-board-pause-overlay::after{ content: '⏸ PARTITA IN PAUSA ⏸'; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%) rotate(180deg); color: #FFFFFF; font-size: 24px; font-weight: bold; text-align: center; z-index: 101; background: rgba(0, 0, 0, 0.7); padding: 15px 25px; border-radius: 10px; border: 2px solid #FFAA00; white-space: nowrap; letter-spacing: 2px; text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5); animation: pausePulse 1.5s ease-in-out infinite; }
@keyframes pausePulse{ 0%{ opacity: 0.7; transform: translate(-50%, -50%) scale(1); }50%{ opacity: 1; transform: translate(-50%, -50%) scale(1.05); }100%{ opacity: 0.7; transform: translate(-50%, -50%) scale(1); } }
.warning-game{ position: fixed; bottom: 40px; right: 20px; width: 300px; background: rgba(30, 30, 46, 0.95); border: 1px solid #8B4513; border-radius: 5px; padding: 15px; color: #F0E6D2; box-shadow: 0 5px 15px rgba(0, 0, 0, 0.7); z-index: 9999; font-size: 14px; text-align: center; display: none; opacity: 0; transform: translateY(50px) scale(0.9); }
.chess-board{ touch-action: pan-x pan-y pinch-zoom; width: 500px; height: 500px; margin: 0 auto; position: relative; }
.board{ border: 1px solid #404040; box-sizing: content-box; background-color: #FFFFFF;}
.square{ float: left; touch-action: manipulation !important; -webkit-tap-highlight-color: transparent !important; position: relative; -webkit-touch-callout: none; -webkit-user-select: none; -khtml-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; }
.square img{ -webkit-touch-callout: none; }
.hide-piece-instant img{ opacity: 0; }
.hide-piece img { opacity: 0; transition: opacity 1s ease-in-out; }
.white{ background-color: #F0E6D2; }
.black{ background-color: #B2AB9B; }
.highlight1, .highlight2{ box-shadow: inset 0 0 3px 3px yellow; }
.notation{ cursor: default; font-family: 'Segoe'; font-size: 14px; position: absolute; } 
.alpha{ bottom: 1px; right: 3px; opacity: 0; }
.numeric{ top: 2px; left: 2px; opacity: 0; }
.square-selected{ background-color: rgba(240, 248, 255, 0.3) !important; box-shadow: inset 0 0 0 2px #ffd700 !important; }
.square-valid-move{ position: relative; }
.move-indicator{ position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 20%; height: 20%; background-color: rgba(255, 255, 255, 0.8); border: 0; border-radius: 50%; pointer-events: none; z-index: 10; }
.king-in-check{ animation: kingPulse 1.5s ease-in-out infinite; }
.king-in-checkmate{ animation: kingCheckmatePulse 1.5s ease-in-out infinite; }
@keyframes kingPulse{ 0%{ width: 100%; height: 100%; margin: 0; }50%{ width: 90%; height: 90%; margin: 5%; }100%{ width: 100%; height: 100%; margin: 0; } }
@keyframes kingCheckmatePulse{ 0%{ opacity: 1; }50%{ opacity: 0; }100%{ opacity: 1; } }
@supports(-webkit-touch-callout: none){ .square{ touch-action: manipulation !important; } }