.game-container-snake{position:relative;background:#1a1a2e;border-radius:12px;padding:8px;width:fit-content;margin:0 auto}
#snake-canvas{display:block;border-radius:8px;background:#16213e}
.snake-overlay{position:absolute;top:8px;left:8px;right:8px;bottom:8px;background:rgba(0,0,0,0.9);border-radius:8px;display:flex;align-items:center;justify-content:center;color:#fff;font-size:16px;font-weight:500;cursor:pointer;text-align:center;padding:20px}
.snake-overlay.hidden{display:none}
.snake-controls{display:none;margin-top:12px}
.control-row{display:flex;justify-content:center;gap:8px;margin-bottom:6px}
.control-row:last-child{margin-bottom:0}
.dir-btn{width:56px;height:52px;border:none;border-radius:10px;background:#f5f5f7;color:#1d1d1f;font-size:22px;cursor:pointer;transition:all 0.15s;-webkit-tap-highlight-color:transparent;border:2px solid #e5e5e5}
.dir-btn:active{background:#4ade80;color:#fff;border-color:#4ade80;transform:scale(0.95)}
.snake-score{background:#f5f5f7 !important;border:2px solid #e5e5e5}
.snake-score .score-label{color:#86868b !important}
.snake-score .score-value{color:#1d1d1f !important}
.speed-selector{display:flex;gap:6px}
.speed-btn{padding:8px 16px;border:none;border-radius:20px;cursor:pointer;font-size:13px;font-weight:500;background:#f5f5f7;color:#1d1d1f;transition:all 0.2s;-webkit-tap-highlight-color:transparent;border:2px solid #e5e5e5}
.speed-btn.active{background:#4ade80;color:#fff;border-color:#4ade80}
.game-links{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
.game-link-card{display:block;background:#f5f5f7;padding:24px 16px;border-radius:12px;text-align:center;text-decoration:none;transition:all 0.2s}
.game-link-card:hover{transform:translateY(-4px);box-shadow:0 8px 24px rgba(0,0,0,0.1)}
.game-link-card span{font-size:36px;display:block;margin-bottom:8px}
.game-link-card h4{font-size:15px;color:#1d1d1f;margin-bottom:4px}
.game-link-card p{font-size:12px;color:#86868b;margin:0}
@media(max-width:768px){
.game-section{padding:12px !important}
.game-header{flex-direction:row !important;justify-content:space-between;align-items:center;gap:10px;margin-bottom:10px !important}
.score-board{gap:8px}
.score-item{padding:8px 14px;min-width:auto}
.score-label{font-size:11px}
.score-value{font-size:18px}
.speed-selector{gap:6px}
.speed-btn{padding:10px 16px;font-size:14px;min-height:44px}
.game-container-snake{padding:6px;border-radius:10px}
#snake-canvas{width:calc(100vw - 48px) !important;height:calc(100vw - 48px) !important;max-width:340px !important;max-height:340px !important;border-radius:6px}
.snake-overlay{font-size:14px;padding:16px}
.snake-controls{display:flex;flex-direction:column;align-items:center;background:#f5f5f7;padding:14px;border-radius:12px}
.control-row{gap:10px;margin-bottom:8px}
.dir-btn{width:60px;height:54px;font-size:22px;border-radius:10px}
.tips-box{display:none}
.features{margin-top:16px !important}
.game-links{grid-template-columns:repeat(2,1fr);gap:10px}
.game-link-card{padding:16px 12px}
.game-link-card span{font-size:28px;margin-bottom:6px}
.game-link-card h4{font-size:13px}
.game-link-card p{font-size:11px}
}
@media(max-width:380px){
#snake-canvas{width:calc(100vw - 40px) !important;height:calc(100vw - 40px) !important;max-width:300px !important;max-height:300px !important}
.dir-btn{width:54px;height:50px;font-size:20px}
.score-item{padding:6px 12px}
.score-value{font-size:16px}
.speed-btn{padding:8px 14px;font-size:13px;min-height:40px}
}