@charset "utf-8";
/* CSS Document */

:root{--bg-color:#f5f5f5;--text-color:#333;--game-bg:#e0e0e0;--tile-bg:#2c3e50;--tile-text:#ecf0f1;--tile-border:#34495e;--button-bg:#2c3e50;--button-hover:#34495e;--border-color:#bdc3c7;--modal-bg:#ffffff;--gap-color:#f5f5f5;}
[data-theme="dark"]{--bg-color:#1a1a2e;--text-color:#ecf0f1;--game-bg:#2d3436;--tile-bg:#ecf0f1;--tile-text:#2c3e50;--tile-border:#b2bec3;--button-bg:#ecf0f1;--button-hover:#dfe6e9;--border-color:#636e72;--modal-bg:#2c3e50;--gap-color:#2d3436;}
*{margin:0;padding:0;box-sizing:border-box;}
html,body{width:100%;height:100%;font-family:'Segoe UI',Tahoma,Geneva,Verdana,sans-serif;background-color:var(--bg-color);color:var(--text-color);line-height:1.5;}
body{display:flex;flex-direction:column;min-height:100vh;}
.theme-switch{position:fixed;top:10px;right:10px;background:var(--button-bg);color:var(--tile-text);border:none;padding:10px 15px;border-radius:6px;cursor:pointer;font-size:14px;font-weight:bold;min-width:120px;z-index:1000;box-shadow:0 2px 10px rgba(0,0,0,0.2);}
.theme-switch:hover{background:var(--button-hover);}
.container{width:95%;margin:0 auto;padding:20px 15px 15px;flex:1;display:flex;flex-direction:column;}
header{text-align:center;margin-bottom:25px;}
h1{font-size:28px;margin-bottom:10px;margin-top:10px;}
header p{font-size:16px;color:#666;}
.setup-section{background:var(--modal-bg);padding:20px;border-radius:12px;box-shadow:0 3px 15px rgba(0,0,0,0.1);margin-bottom:20px;border:1px solid var(--border-color);max-width:500px;margin-left:auto;margin-right:auto;}
.captcha-container{display:flex;flex-direction:column;gap:10px;margin-bottom:20px;}
.captcha-row{display:flex;gap:10px;align-items:center;}
.captcha-code{font-family:'Courier New',monospace;font-size:24px;font-weight:bold;padding:12px;background:linear-gradient(45deg,var(--button-bg),var(--button-hover));color:var(--tile-text);border-radius:6px;text-align:center;min-height:50px;display:flex;align-items:center;justify-content:center;flex:1;}
.captcha-input{padding:12px;border:2px solid var(--border-color);border-radius:6px;font-size:16px;background:var(--bg-color);color:var(--text-color);flex:1;}
.captcha-refresh{color:var(--button-bg);text-decoration:none;font-size:14px;cursor:pointer;text-align:center;padding:5px;}
.captcha-refresh:hover{text-decoration:underline;}
#playerName{width:100%;padding:12px;margin-bottom:20px;border:2px solid var(--border-color);border-radius:6px;font-size:16px;background:var(--bg-color);color:var(--text-color);}
button{padding:12px 20px;font-size:16px;background-color:var(--button-bg);color:var(--tile-text);border:none;border-radius:8px;cursor:pointer;font-weight:bold;transition:background-color 0.2s;}
button:hover:not(:disabled){background-color:var(--button-hover);}
button:disabled{opacity:0.5;cursor:not-allowed;}
.game-section{display:none;flex-direction:column;flex:1;}
.game-controls{display:flex;justify-content:center;gap:15px;margin-bottom:20px;}
.game-stats{display:flex;justify-content:space-around;margin-bottom:20px;font-size:16px;text-align:center;}
.game-board-container{display:flex;justify-content:center;align-items:center;margin-bottom:20px;min-height:350px;}
#gameCanvas{background-color:var(--game-bg);border-radius:12px;box-shadow:0 5px 20px rgba(0,0,0,0.1);cursor:pointer;}
#gameCanvas.disabled{cursor:not-allowed;opacity:0.7;}
footer{margin-top:auto;padding:20px 0;text-align:center;border-top:2px solid var(--border-color);width:100%;background:var(--bg-color);}
.footer-content{font-size:16px;color:var(--text-color);line-height:1.8;}
.footer-content a{color:var(--button-bg);text-decoration:none;font-weight:500;}
.footer-content a:hover{text-decoration:underline;}
.footer-separator{margin:0 5px;color:var(--border-color);}
.modal{display:none;position:fixed;top:0;left:0;width:100%;height:100%;background-color:rgba(0,0,0,0.9);z-index:2000;align-items:center;justify-content:center;padding:20px;}
.modal-content{background-color:var(--modal-bg);padding:30px;border-radius:15px;max-width:500px;width:100%;text-align:center;}
.modal-buttons{display:flex;gap:10px;justify-content:center;margin-top:20px;flex-wrap:wrap;}
@media (max-width:600px){.container{padding:15px 10px 10px;width:100%;max-width:100%;}h1{font-size:24px;margin-top:20px;}header p{font-size:14px;}.theme-switch{top:5px;right:5px;font-size:12px;padding:8px 12px;min-width:100px;}.captcha-row{flex-direction:column;}.captcha-code,.captcha-input{width:100%;}.captcha-code{font-size:20px;min-height:45px;}.game-controls{flex-direction:column;align-items:center;}.game-stats{font-size:14px;}.game-board-container{min-height:300px;}#gameCanvas{width:95vw!important;height:95vw!important;max-width:400px;max-height:400px;}.footer-content{font-size:14px;}.footer-separator{margin:0 3px;}.modal-buttons{flex-direction:column;align-items:center;}.modal-buttons button{width:100%;max-width:250px;}}
@media (min-width:601px){.container{width:70%;max-width:800px;}#gameCanvas{width:350px!important;height:350px!important;}.setup-section{width:100%;}}