*,:before,:after{box-sizing:border-box;margin:0;padding:0}body{color:#e0e0e0;background-color:#1a1a2e;min-height:100vh;font-family:JetBrains Mono,monospace}.main{flex-direction:column;align-items:center;min-height:100vh;padding:32px 16px 40vh;display:flex}.game-container{flex-direction:column;align-items:center;gap:28px;width:100%;max-width:560px;display:flex}.header{justify-content:space-between;align-items:center;width:100%;display:flex}.header-left{flex-direction:column;display:flex}.title{color:#fff;font-family:IBM Plex Mono,monospace;font-size:2rem;font-weight:700;line-height:1}.subtitle{color:#808090;white-space:nowrap;margin-top:2px;font-size:.75rem}.header-right{text-align:right}.status{color:#e0e0e0;min-height:2lh;font-size:.95rem;font-weight:600}.board-wrapper{aspect-ratio:1;touch-action:manipulation;border-radius:4px;width:min(100vw - 32px,560px);position:relative;overflow:hidden;box-shadow:0 4px 24px #00000080}.promo-overlay{z-index:10;background:#0009;justify-content:center;align-items:center;display:flex;position:absolute;inset:0}.promo-picker{background:#2a2a3e;border-radius:8px;gap:8px;padding:12px 16px;display:flex;box-shadow:0 4px 20px #00000080}.promo-piece{cursor:pointer;background:0 0;border:2px solid #3a3a4e;border-radius:8px;justify-content:center;align-items:center;width:64px;height:64px;font-size:2.5rem;transition:background .15s,border-color .15s;display:flex}.promo-piece:hover{background:#3a3a5e;border-color:#5a5a7e}.promo-piece:active{background:#4a4a6e;border-color:#6a6a8e}.controls{width:100%;max-width:560px}.controls-row{grid-template-columns:repeat(7,1fr);gap:6px;display:grid}.controls button{color:#e0e0e0;cursor:pointer;touch-action:manipulation;-webkit-tap-highlight-color:transparent;background:#2a2a3e;border:1px solid #3a3a4e;border-radius:6px;justify-content:center;align-items:center;padding:12px 0;font-family:inherit;font-size:1.6rem;transition:background .15s,border-color .15s;display:flex}.controls button:hover:not(:disabled){background:#3a3a5e;border-color:#5a5a7e}.controls button:active:not(:disabled){background:#4a4a6e;border-color:#6a6a8e}.controls button:disabled{opacity:.35;cursor:not-allowed}.controls .btn-share{background:#4a7c59;border-color:#5a9c69}.controls .btn-share:hover:not(:disabled){background:#5a9c69;border-color:#6abc79}.controls .btn-share:active:not(:disabled){background:#6abc79;border-color:#7adc89}@media (max-width:480px){.controls-row{grid-template-columns:repeat(12,1fr)}.controls-row button:nth-child(2){order:1;grid-column:span 3}.controls-row button:nth-child(3){order:2;grid-column:span 3}.controls-row button:nth-child(4){order:3;grid-column:span 3}.controls-row button:nth-child(5){order:4;grid-column:span 3}.controls-row button:first-child{order:10;grid-column:span 4}.controls-row button:nth-child(6){order:11;grid-column:span 4}.controls-row button:nth-child(7){order:12;grid-column:span 4}}.move-table{border:1px solid #3a3a4e;border-radius:6px;flex-direction:column-reverse;width:100%;max-height:200px;display:flex;overflow-y:auto}.move-table table{border-collapse:collapse;table-layout:fixed;width:100%;font-size:.85rem}.move-table th{color:#808090;text-align:left;background:#2a2a3e;border-bottom:1px solid #3a3a4e;padding:6px 10px;font-weight:500;position:sticky;top:0}.move-table td{border-bottom:1px solid #ffffff0d;padding:4px 10px}.move-table th:first-child,.move-table td:first-child{width:3em}.move-table .move-num{color:#606070}.pgn-wrapper{width:100%;position:relative}.pgn-input{color:#e0e0e0;resize:vertical;field-sizing:content;background:#2a2a3e;border:1px solid #3a3a4e;border-radius:6px;outline:none;width:100%;padding:10px;font-family:inherit;font-size:.85rem;transition:border-color .15s}.pgn-input:focus{border-color:#5a5a7e}.pgn-input::placeholder{color:#606070}.pgn-copy{color:#a0a0c0;cursor:pointer;background:#3a3a4e;border:none;border-radius:4px;padding:4px 10px;font-family:inherit;font-size:.75rem;transition:background .15s,color .15s;position:absolute;bottom:12px;right:14px}.pgn-copy:hover{color:#e0e0e0;background:#4a4a5e}.pgn-copy:active{color:#fff;background:#5a5a6e}.fen-row{align-items:center;gap:16px;width:100%;display:flex}.fen-label{color:#505060;word-break:break-all;border:1px solid #3a3a4e;border-radius:6px;flex:1;min-width:0;padding:8px 10px;font-size:.7rem}.fen-copy{color:#a0a0c0;cursor:pointer;background:#3a3a4e;border:none;border-radius:4px;flex-shrink:0;margin-right:14px;padding:4px 10px;font-family:inherit;font-size:.75rem;transition:background .15s,color .15s}.fen-copy:hover{color:#e0e0e0;background:#4a4a5e}.fen-copy:active{color:#fff;background:#5a5a6e}.fen-prefix{color:#4a7c59;font-weight:600}.toast{color:#fff;pointer-events:none;background:#3a3a5e;border-radius:8px;padding:10px 20px;font-size:.9rem;animation:2s ease-in-out fadeInOut;position:fixed;bottom:24px;left:50%;transform:translate(-50%)}.footer{justify-content:flex-end;width:100%;margin-top:24px;display:flex}.footer a{color:#606070;align-items:center;gap:6px;font-size:.8rem;text-decoration:none;transition:color .15s;display:inline-flex}.footer a:hover{color:#a0a0c0}.footer a:active{color:#e0e0e0}@keyframes fadeInOut{0%{opacity:0;transform:translate(-50%)translateY(10px)}15%{opacity:1;transform:translate(-50%)translateY(0)}85%{opacity:1;transform:translate(-50%)translateY(0)}to{opacity:0;transform:translate(-50%)translateY(-10px)}}