:root{font-family:Inter,system-ui,Avenir,Helvetica,Arial,sans-serif;line-height:1.5;font-weight:400;color-scheme:dark;color:#ffffffde;background-color:#121212;font-synthesis:none;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}body{margin:0;min-width:320px;min-height:100vh}h1{font-size:3.2em;line-height:1.1}*{box-sizing:border-box}body{margin:0;font-family:Segoe UI,Roboto,sans-serif;background-color:#2c2c2c;color:#f0f0f0}.game-layout{display:grid;grid-template-areas:"header header" "opponent sidebar" "board sidebar" "me sidebar";grid-template-columns:1fr 300px;grid-template-rows:auto auto 1fr auto;gap:10px;justify-items:center}.game-header{grid-area:header;display:flex;justify-content:space-between;align-items:center;background:#3a3a3a;padding:10px 20px;border-radius:8px}.header-left{display:flex;gap:10px}.text-btn{background:transparent;border:1px solid #555;color:#ddd;padding:6px 12px;border-radius:4px;cursor:pointer;font-size:.9rem;font-weight:500;transition:all .2s}.text-btn:hover{background:#555;color:#fff;border-color:#777}.undo-btn{margin-left:10px;border-color:#777;color:#fff}.icon-btn{background:transparent;border:1px solid #555;color:#ddd;padding:5px 10px;border-radius:4px;cursor:pointer;transition:background .2s}.icon-btn:hover{background:#555}.brand-title{font-size:1.2rem;font-weight:700;color:#fff}.game-sidebar{grid-area:sidebar;height:100%;width:300px;background:#3a3a3a;border-radius:8px;padding:15px;display:flex;flex-direction:column}.player-strip{width:100%;max-width:480px;display:flex;justify-content:space-between;align-items:center;background:#ffffff0d;padding:5px 15px;border-radius:4px}.player-strip.opponent{grid-area:opponent}.player-strip.me{grid-area:me}.board-area{grid-area:board}.player-info{display:flex;align-items:center;gap:10px}.avatar{font-size:1.5rem}.name-box{display:flex;flex-direction:column}.name{font-weight:700;font-size:.9rem}.status{font-size:.75rem;color:#aaa}.captured-line{display:flex;min-height:30px;align-items:center;flex-wrap:wrap;height:auto}.captured-piece-sm{width:16px;height:16px;margin-left:1px;margin-right:1px}.captured-piece-sm img{width:100%;height:100%;object-fit:contain}.status-card-compact{background:#444;padding:10px;border-radius:4px;margin-bottom:10px;text-align:center;font-size:1.1rem;font-weight:700}.history-panel-compact{flex:1;display:flex;flex-direction:column;overflow:hidden}.history-panel-compact h3{margin:0 0 10px;font-size:1rem;color:#aaa;border-bottom:1px solid #555;padding-bottom:5px}.app-footer{margin-top:20px;font-size:.9rem;color:#888;opacity:.9;width:100%;text-align:center;border-top:1px solid #444;padding-top:15px;padding-bottom:15px}.creator-name{color:#5c7cfa;font-weight:500;text-decoration:none;transition:color .2s;border-bottom:1px dotted transparent}.creator-name:hover{color:#4263eb;border-bottom-color:#4263eb}.game-info-panel h1{font-weight:300;margin-bottom:20px;color:#fff;border-bottom:1px solid #555;padding-bottom:15px}.status-card{margin-bottom:20px;background:#444;padding:15px;border-radius:6px}.turn-indicator{font-size:1.2rem;margin-bottom:10px}.turn-indicator span{font-weight:700}.turn-indicator.w span{color:#ddd}.turn-indicator.b span{color:#aaa}.game-over-alert{color:#ff6b6b;font-weight:700;margin-top:10px;text-transform:uppercase}.controls{display:flex;flex-direction:column;gap:10px;width:100%}.mode-btn{background:#444;color:#fff;border:1px solid #666;padding:12px;font-size:1rem;border-radius:4px;cursor:pointer;transition:all .2s}.mode-btn:hover{background:#555;border-color:#888}.reset-btn{background:#5c7cfa;color:#fff;border:none;padding:12px 24px;font-size:1rem;border-radius:4px;cursor:pointer;transition:background .2s;width:100%}.reset-btn:hover{background:#4263eb}.board-container{position:relative;border:10px solid #5c3a21;border-radius:4px;box-shadow:0 10px 25px #00000080;background:#5c3a21}.board-grid{display:grid;grid-template-columns:repeat(8,60px);grid-template-rows:repeat(8,60px)}.coords{position:absolute;pointer-events:none;font-size:.75rem;color:#ebecd080}.coords.ranks{left:-20px;top:0;display:flex;flex-direction:column;height:100%;justify-content:space-around;padding:22px 0}.coords.files{bottom:-20px;left:0;display:flex;width:100%;justify-content:space-around;padding:0 22px}@media(max-width:600px){.board-grid{grid-template-columns:repeat(8,11vw);grid-template-rows:repeat(8,11vw)}}.captures-panel{background:#333;margin-bottom:20px;padding:10px;border-radius:4px;text-align:left}.capture-row{display:flex;align-items:center;margin-bottom:5px;font-size:.9rem;color:#aaa}.capture-label{display:inline-block;width:120px;font-weight:700;color:#ccc}.captured-pieces{display:flex;flex-wrap:wrap;align-items:center}.captured-piece-icon{width:28px;height:28px;margin-right:2px}.captured-piece-icon img{width:100%;height:100%;display:block}.history-list{flex:1;overflow-y:auto;font-family:Consolas,monospace;font-size:.95rem}.history-row{display:flex;padding:4px 0;border-bottom:1px solid #444}.history-row:nth-child(2n){background:#ffffff0d}.move-num{width:30px;color:#888;text-align:right;margin-right:10px}.move-white,.move-black{flex:1;color:#ddd}.menu-container{display:flex;flex-direction:column;justify-content:center;align-items:center;height:100%;animation:fadeIn .5s ease;min-height:80vh}@keyframes fadeIn{0%{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}.menu-title{font-size:3rem;margin-bottom:.5rem;background:linear-gradient(45deg,#fff,#888);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;font-weight:800}.menu-subtitle{font-size:1.2rem;color:#aaa;margin-bottom:3rem}.menu-options{display:flex;gap:20px;flex-wrap:wrap;justify-content:center}.menu-btn{display:flex;flex-direction:column;align-items:center;justify-content:center;width:200px;height:150px;border:none;border-radius:12px;cursor:pointer;transition:all .3s cubic-bezier(.25,.8,.25,1);font-size:1.1rem;font-weight:600;box-shadow:0 4px 6px #0000004d}.menu-btn:hover{transform:translateY(-5px);box-shadow:0 10px 15px #0006}.menu-btn.primary{background:linear-gradient(135deg,#5c7cfa,#4263eb);color:#fff}.menu-btn.primary:hover{background:linear-gradient(135deg,#748ffc,#5c7cfa)}.menu-btn.secondary{background:linear-gradient(135deg,#37b24d,#2f9e44);color:#fff}.menu-btn.secondary:hover{background:linear-gradient(135deg,#51cf66,#40c057)}.menu-btn .icon{font-size:3rem;margin-bottom:10px}.menu-back-btn{background:transparent;color:#888;border:1px solid #555;padding:8px;font-size:.9rem;border-radius:4px;cursor:pointer;margin-top:5px;width:100%}.menu-back-btn:hover{background:#444;color:#ddd}.menu-options.vertical{flex-direction:column;width:100%;align-items:center}.level-btn{width:280px;height:60px;flex-direction:row;justify-content:space-between;padding:0 20px;margin-bottom:15px;background:#444;color:#fff;font-size:1rem}.level-btn:hover{background:#555}.level-name{font-weight:700}.level-stars{color:gold;font-size:1.2rem}@media(max-width:900px){.game-layout{grid-template-areas:"header" "opponent" "board" "me" "sidebar";grid-template-columns:1fr;grid-template-rows:auto auto auto auto 1fr;padding:5px;height:auto;gap:5px}.game-header{margin-bottom:5px;padding:5px 10px}.brand-title{font-size:1rem}.game-sidebar{height:auto;min-height:200px}.player-strip{max-width:100%;width:100%;min-height:60px}.board-grid{grid-template-columns:repeat(8,11.5vw);grid-template-rows:repeat(8,11.5vw)}.captured-piece-sm{width:20px;height:20px;margin:1px}.captured-line{height:44px;min-height:44px;flex-wrap:wrap;max-width:200px;overflow:hidden;align-content:flex-start}}.modal-overlay{position:fixed;top:0;left:0;width:100vw;height:100vh;background:#000000b3;display:flex;justify-content:center;align-items:center;z-index:1000;animation:fadeIn .3s ease}.modal-content{background:#3a3a3a;padding:30px;border-radius:12px;text-align:center;box-shadow:0 10px 30px #00000080;max-width:90%;width:400px;border:1px solid #555;animation:slideUp .3s ease}.modal-title{margin-top:0;color:#fff;font-size:2rem;margin-bottom:10px}.modal-message{color:#ddd;font-size:1.2rem;margin-bottom:30px}.modal-actions{display:flex;justify-content:center;gap:15px}.modal-btn{padding:10px 20px;border-radius:6px;border:none;font-size:1rem;font-weight:700;cursor:pointer;transition:transform .1s}.modal-btn:active{transform:scale(.95)}.modal-btn.primary{background:#5c7cfa;color:#fff}.modal-btn.secondary{background:transparent;border:1px solid #666;color:#ccc}