.snake-wrapper{display:flex;flex-wrap:wrap;gap:20px;margin-bottom:30px}.snake-main-panel{display:flex;gap:15px;background:#181c24;padding:20px;border-radius:10px;box-shadow:0 10px 25px rgba(0,0,0,0.3);border:1px solid #2a313e}.snake-board-container{position:relative;width:400px;height:400px}#map1{box-sizing:content-box;width:400px;height:400px;position:relative;background:#0d1117;border-radius:6px;box-shadow:inset 0 0 15px rgba(0,0,0,0.8);border:2px solid #30363d;overflow:hidden;text-align:center}#overlay{position:absolute;top:0;left:0;width:400px;height:400px;background:rgba(13,17,23,.85);z-index:100}#map-msg{position:absolute;top:35%;left:0;width:100%;line-height:1.4;display:block;font-size:20px;color:#e9ecef;z-index:101;text-align:center;font-weight:bold}.btn-snake-start{display:inline-block;margin-top:15px;padding:10px 24px;font-size:16px;font-weight:bold;text-transform:uppercase;letter-spacing:1px}.snake,.wall{width:10px;height:10px;position:absolute;z-index:99;display:block;white-space:nowrap;overflow:hidden}.snake{background:#2ea44f;border-radius:2px;box-shadow:0 0 4px #2ea44f}.wall{background:#8b949e;border-radius:1px}#cherry{display:none;width:10px;height:10px;position:absolute;background:#f85149;border-radius:50%;box-shadow:0 0 6px #f85149;z-index:98}.snake-sidebar-panel{display:flex;flex-direction:column;width:150px;gap:12px}.snake-box{background:#21262d;border:1px solid #30363d;border-radius:6px;padding:12px;text-align:center}.snake-box h3{margin:0 0 10px 0;font-size:13px;color:#8b949e;text-transform:uppercase;letter-spacing:1px;border-bottom:1px solid #30363d;padding-bottom:4px}.snake-stats-box{display:flex;flex-direction:column;gap:8px;text-align:left}.stat-item{display:flex;flex-direction:column}.stat-label{font-size:11px;color:#8b949e;text-transform:uppercase}.stat-value{font-size:18px;font-weight:bold;color:#58a6ff;font-family:monospace,monospace}.snake-controls-btns{display:flex;flex-direction:column;gap:8px;margin-top:auto}.snake-controls-btns .btn{width:100%;font-size:11px;padding:6px 0}.snake-mini-top-panel{flex:1;min-width:240px;display:flex;flex-direction:column;gap:15px}.snake-mini-table{margin-bottom:8px}.mini-top-footer{text-align:right}.snake-guide-box{background:#f8f9fa;border:1px solid #e9ecef;border-radius:6px;padding:12px 15px}.snake-guide-box h4{margin:0 0 10px 0;font-size:14px;color:#333}.snake-guide-box ul{margin:0;padding:0;list-style:none}.snake-guide-box li{font-size:12px;color:#555;margin-bottom:6px;line-height:1.4}.snake-guide-box kbd{background-color:#eee;border:1px solid #ccc;border-radius:3px;box-shadow:0 1px 0 rgba(0,0,0,0.2);color:#333;display:inline-block;font-size:11px;font-weight:bold;padding:1px 5px;white-space:nowrap}.snake-guest-alert{margin-top:15px;margin-bottom:20px}.snake-top-table th{background:#272d36;color:#58a6ff}.snake-top-table td img{vertical-align:middle;margin-right:4px}@media(prefers-color-scheme:dark){.snake-top-table th{background:#272d36 !important;color:#58a6ff !important;border-bottom:2px solid #343b44 !important}.snake-top-table td{border-top:1px solid #2c343e !important;color:#c9d1d9}.snake-top-table.table-striped tbody tr:nth-child(odd) td{background-color:#1e242c !important}.snake-top-table.table-striped tbody tr:nth-child(even) td{background-color:#222831 !important}.snake-top-table.table-hover tbody tr:hover td{background-color:#2c343e !important}.snake-mini-table th{background:#21262d !important;color:#8b949e !important;border-bottom:1px solid #30363d !important}.snake-mini-table td{border-top:1px solid #21262d !important;color:#c9d1d9}.snake-guide-box{background:#1e242c !important;border-color:#343b44 !important}.snake-guide-box h4{color:#58a6ff !important}.snake-guide-box li{color:#c9d1d9 !important}.snake-guide-box kbd{background-color:#2c343e !important;border-color:#3d4551 !important;color:#58a6ff !important;box-shadow:0 1px 0 rgba(0,0,0,.4) !important}}@media(max-width:768px){.snake-wrapper{flex-direction:column}.snake-main-panel{flex-direction:column;align-items:center}.snake-sidebar-panel{width:400px;flex-direction:row;flex-wrap:wrap}.snake-box{flex:1;min-width:130px}.snake-controls-btns{width:100%;flex-direction:row}}.snake-dpad{display:flex;flex-direction:column;align-items:center;gap:5px;margin-top:10px}.dpad-row{display:flex;gap:5px;justify-content:center}.dpad-btn{width:44px;height:44px;font-size:18px;font-weight:bold;padding:0;display:flex;align-items:center;justify-content:center;background:#21262d;color:#58a6ff;border:1px solid #30363d;border-radius:6px;user-select:none;touch-action:manipulation}.dpad-btn:active{background:#30363d;color:#fff}