#chess-board{width:clamp(280px,80vw,400px);aspect-ratio:1/1;display:grid;grid-template-columns:repeat(8,1fr);border:3px solid #4a6fa5;border-radius:8px;overflow:hidden;margin:20px auto;background:#4a6fa5;box-shadow:0 4px 6px rgba(0,0,0,.1);position:relative;transition:transform .3s ease;transform-origin:center}#chess-board.rotated{transform:rotate(180deg)}#chess-board.rotated .square{transform:rotate(180deg)}.square{display:flex;align-items:center;justify-content:center;cursor:pointer;position:relative;font-size:40px;line-height:1;min-height:40px}.square *{line-height:1}.square.light{background:#f0d9b5}.square.dark{background:#b58863}.coordinate{font-size:clamp(4px,1vw,12px);line-height:1;position:absolute;bottom:2px;left:2px;color:rgba(0,0,0,.4);user-select:none;pointer-events:none}.white-piece{color:#fff;text-shadow:-1px -1px 0 #000,1px -1px 0 #000,-1px 1px 0 #000,1px 1px 0 #000,0 0 4px rgba(0,0,0,.5)}.black-piece{color:#2c3e50;text-shadow:-1px -1px 0 #ecf0f1,1px -1px 0 #ecf0f1,-1px 1px 0 #ecf0f1,1px 1px 0 #ecf0f1,0 0 4px rgba(255,255,255,.5)}.chess-piece{width:80%;height:auto;max-width:100%;max-height:100%;object-fit:contain;display:block;margin:auto;pointer-events:none}.square{position:relative}.square.valid-move:before,.square.valid-move-capture:after{z-index:10}.square:after{z-index:5}.square.selected,.square.highlight{outline-offset:-3px;z-index:2}.square.selected{outline:3px solid gold}.square.highlight{outline:3px solid #0f0}.square.valid-move:before{content:'';position:absolute;width:20px;height:20px;background:rgba(0,255,0,.3);border-radius:50%;pointer-events:none;top:50%;left:50%;transform:translate(-50%,-50%);z-index:3}.square.valid-move-capture:after{content:'';position:absolute;width:40px;height:40px;border:3px solid rgba(0,255,0,.3);border-radius:50%;pointer-events:none;top:50%;left:50%;transform:translate(-50%,-50%);z-index:3}.square:after{content:attr(data-coordinate);position:absolute;bottom:2px;right:4px;font-size:clamp(8px,1vw,10px);opacity:.6;font-weight:700;color:#333;text-shadow:none;pointer-events:none;z-index:1}.square.tip{outline:4px solid gold;outline-offset:-2px;z-index:5}#ctm-trainer-area{display:flex;flex-direction:column;align-items:center;width:100%;max-width:800px;margin:0 auto;padding:20px;background:#fff;border-radius:8px;box-shadow:0 4px 6px rgba(0,0,0,.1);overflow:visible}.trainer-button-group{max-width:560px;margin:20px auto 0 auto}.trainer-button-group button{background:#red;color:#fff;border:none;padding:12px 24px;border-radius:8px;cursor:pointer;font-weight:600;margin-top:10px;width:100%;transition:background .3s ease}.trainer-button-group button:hover{background:#ff2a2a}#game-status{width:560px;margin:0 auto 20px auto;padding:15px;background:#f8f9fa;border-radius:8px;display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;box-sizing:border-box}#board-controls{width:560px;margin:20px auto;display:flex;gap:10px;justify-content:center;flex-wrap:wrap;box-sizing:border-box}#feedback-message{width:560px;margin:10px auto;padding:12px;border-radius:8px;text-align:center;font-weight:600;min-height:20px;box-sizing:border-box}#exercise-progress{width:560px;margin:20px auto;text-align:center;box-sizing:border-box}#turn-indicator{display:flex;align-items:center;gap:15px}.turn-badge{padding:8px 16px;border-radius:20px;font-weight:700;text-transform:uppercase;font-size:14px}.turn-badge.white{background:#f0f0f0;color:#333;border:2px solid #333}.turn-badge.black{background:#333;color:#fff;border:2px solid #f0f0f0}#move-counter{font-weight:700;color:#4a6fa5;font-size:18px}#feedback-message.success{background:#d4edda;color:#155724;border:2px solid #c3e6cb}#feedback-message.error{background:#f8d7da;color:#721c24;border:2px solid #f5c6cb}#feedback-message.info{background:#d1ecf1;color:#0c5460;border:2px solid #bee5eb}.progress-bar{width:100%;height:10px;background:#e0e0e0;border-radius:5px;overflow:hidden;margin:10px 0}.progress-fill{height:100%;background:linear-gradient(90deg,#4a6fa5,#ffd966);transition:width .3s ease}.control-btn{padding:8px 16px;background:#fff;color:#4a6fa5;border:2px solid #4a6fa5;border-radius:8px;cursor:pointer;font-weight:600;transition:all .3s ease;min-width:120px}.control-btn:hover{background:#4a6fa5;color:#fff}.control-btn:active{transform:scale(.98)}#board-wrapper{display:flex;gap:20px;align-items:flex-start;justify-content:center;margin:0 auto;width:fit-content}#board-sidebar{display:flex;flex-direction:column;gap:10px;min-width:150px}#board-sidebar .control-btn{width:100%}#instruction-display{background:#f0f0f0;border-radius:4px;padding:8px;font-size:14px;line-height:1.4;color:#333;max-width:250px}#ctm-login-box,#ctm-register-box,#ctm-verification-box{background:#fff;border-radius:8px;box-shadow:0 4px 6px rgba(0,0,0,.1);padding:25px;margin:20px auto;max-width:560px;box-sizing:border-box}#ctm-login-box h3,#ctm-register-box h3,#ctm-verification-box h3{color:#4a6fa5;margin-bottom:20px;border-bottom:2px solid #4a6fa5;padding-bottom:10px}#ctm-login-box input,#ctm-register-box input,#ctm-verification-box input{width:100%;padding:12px;margin:8px 0;border:2px solid #e0e0e0;border-radius:8px;font-size:14px;box-sizing:border-box}#ctm-login-box input:focus,#ctm-register-box input:focus,#ctm-verification-box input:focus{outline:none;border-color:#4a6fa5}#ctm-login-box button,#ctm-register-box button,#ctm-verification-box button{background:#4a6fa5;color:#fff;border:none;padding:12px 24px;border-radius:8px;cursor:pointer;font-weight:600;margin-top:10px;width:100%;transition:background .3s ease}#ctm-login-box button:hover,#ctm-register-box button:hover,#ctm-verification-box button:hover{background:#6b8cae}#loginMessage,#registerMessage,#verifyMessage{margin-top:15px;padding:10px;border-radius:8px;font-weight:500;min-height:20px}@media (max-width:768px){#board-wrapper{flex-direction:column;align-items:center}#chess-board,#game-status,#feedback-message,#exercise-progress,#board-controls,#ctm-login-box,#ctm-register-box,#ctm-verification-box{width:420px}.square{font-size:36px;min-height:36px}#board-sidebar{flex-direction:row;flex-wrap:wrap;justify-content:center;min-width:auto}#board-sidebar .control-btn{width:auto;flex:1 1 auto}}@media (max-width:480px){#chess-board,#game-status,#feedback-message,#exercise-progress,#board-controls,#ctm-login-box,#ctm-register-box,#ctm-verification-box{width:240px}.square{font-size:25px;min-height:25px}.control-btn{min-width:100px;padding:6px 12px}.square:after{font-size:3px}.coordinate{font-size:3px}}