:root{--bg-color: #f0f2f5;--text-color: #333;--border-color: #ccc;--dot-color: #888;--card-bg: #ffffff;--button-bg: #007bff;--button-text: #fff;--button-hover-bg: #0056b3;--player1-color: #007bff;--player2-color: #dc3545;--player1-box-bg: rgba(0, 123, 255, .2);--player2-box-bg: rgba(220, 53, 69, .2);--line-hover-color: #a8d1ff;--modal-backdrop: rgba(0, 0, 0, .5);--shadow-color: rgba(0, 0, 0, .1);--input-bg: #f0f2f5;--input-border: #ccc}body.dark-theme{--bg-color: #1a1a1a;--text-color: #f0f2f5;--border-color: #444;--dot-color: #999;--card-bg: #2a2a2a;--button-bg: #0d6efd;--button-text: #fff;--button-hover-bg: #0b5ed7;--player1-color: #3b82f6;--player2-color: #ef4444;--player1-box-bg: rgba(59, 130, 246, .25);--player2-box-bg: rgba(239, 68, 68, .25);--line-hover-color: #3a5a8a;--modal-backdrop: rgba(0, 0, 0, .7);--shadow-color: rgba(0, 0, 0, .3);--input-bg: #333;--input-border: #555}*{box-sizing:border-box;margin:0;padding:0}body{font-family:Vazirmatn,sans-serif;background-color:var(--bg-color);color:var(--text-color);display:flex;justify-content:center;align-items:flex-start;min-height:100vh;padding:1rem;transition:background-color .3s,color .3s}#root{width:100%;display:flex;justify-content:center}.app-container{width:100%;max-width:500px;display:flex;flex-direction:column;gap:1.5rem;padding:1rem 0}.header{display:flex;justify-content:space-between;align-items:center;padding:0 .5rem}.header h1{font-size:1.8rem}.card{background-color:var(--card-bg);border-radius:12px;padding:1.5rem;box-shadow:0 4px 12px var(--shadow-color);transition:background-color .3s}.status-bar{display:flex;justify-content:space-around;align-items:center;font-weight:700;font-size:1.1rem;text-align:center;flex-wrap:wrap;gap:1rem}.score{display:flex;flex-direction:column;gap:.25rem;padding:.5rem 1rem;border-radius:8px;transition:transform .2s,box-shadow .2s}.score .timer{font-size:.8em;font-weight:400;opacity:.8}.game-timer{text-align:center;margin-top:1rem;font-weight:700;opacity:.9}.score.player1{color:var(--player1-color)}.score.player2{color:var(--player2-color)}.score.active{transform:scale(1.1);box-shadow:0 0 10px var(--shadow-color)}.game-board-container{display:flex;justify-content:center;align-items:center;padding:1rem;overflow:hidden}.game-board{position:relative;flex-shrink:0}.dot{position:absolute;background-color:var(--dot-color);border-radius:50%;z-index:2}.line{position:absolute;background-color:transparent;cursor:pointer;z-index:1;display:flex;justify-content:center;align-items:center}.line.h-line:not(.claimed):hover .fill{background-color:var(--line-hover-color);transform:scaleX(1)}.line.v-line:not(.claimed):hover .fill{background-color:var(--line-hover-color);transform:scaleY(1)}.line .fill{position:absolute;background-color:var(--border-color);transition:transform .3s ease,background-color .3s;transform-origin:center;border-radius:4px}.line.h-line .fill{width:100%;transform:scaleX(0)}.line.v-line .fill{height:100%;transform:scaleY(0)}.line.claimed.player1 .fill{background-color:var(--player1-color)}.line.claimed.player2 .fill{background-color:var(--player2-color)}.line.h-line.claimed .fill{transform:scaleX(1)}.line.v-line.claimed .fill{transform:scaleY(1)}.box{position:absolute;z-index:0;display:flex;justify-content:center;align-items:center;font-weight:700;transition:background-color .3s,transform .3s;transform:scale(0);border-radius:4px}.box.player1{background-color:var(--player1-box-bg);color:var(--player1-color);transform:scale(1)}.box.player2{background-color:var(--player2-box-bg);color:var(--player2-color);transform:scale(1)}.controls{display:flex;gap:1rem;justify-content:center}.btn{font-family:Vazirmatn,sans-serif;padding:.75rem 1.5rem;font-size:1rem;font-weight:700;border:none;border-radius:8px;cursor:pointer;background-color:var(--button-bg);color:var(--button-text);transition:background-color .2s,transform .2s;display:flex;align-items:center;gap:.5rem}.btn:hover{background-color:var(--button-hover-bg);transform:translateY(-2px)}.btn svg{width:20px;height:20px}.modal-backdrop{position:fixed;top:0;left:0;width:100%;height:100%;background-color:var(--modal-backdrop);display:flex;justify-content:center;align-items:center;z-index:100}.modal-content{background-color:var(--card-bg);padding:2rem;border-radius:12px;width:90%;max-width:400px;position:relative;box-shadow:0 8px 24px var(--shadow-color);max-height:90vh;overflow-y:auto}.modal-content h2{margin-bottom:1.5rem;text-align:center}.form-group{margin-bottom:1.5rem}.form-group label{display:block;font-weight:700;margin-bottom:.5rem}.form-group input[type=text]{width:100%;padding:.75rem;border-radius:8px;border:1px solid var(--input-border);background-color:var(--input-bg);color:var(--text-color);font-size:1rem;font-family:Vazirmatn,sans-serif}.form-group input[type=text]:disabled{opacity:.6;cursor:not-allowed}.radio-group{display:flex;gap:1rem;border:1px solid var(--border-color);border-radius:8px;padding:.25rem}.radio-group input{display:none}.radio-group label{flex:1;text-align:center;padding:.5rem;border-radius:6px;cursor:pointer;transition:background-color .2s,color .2s}.radio-group input:checked+label{background-color:var(--button-bg);color:var(--button-text)}.slider-group{display:flex;align-items:center;gap:1rem}.slider-group input[type=range]{flex:1}.slider-group span{font-weight:700;min-width:40px;text-align:center}.toggle-label{display:flex;align-items:center;gap:.75rem;cursor:pointer}.modal-actions{display:flex;justify-content:center;margin-top:2rem}.message-display{font-size:1.2rem;font-weight:700;min-height:2rem;text-align:center;color:var(--button-bg)}