/* Snake Duel v1.0.2 */
#sd-wrap{font-family:'Segoe UI',Arial,sans-serif;background:#0a1a0a;min-height:520px;padding:16px;color:#e0ffe0;box-sizing:border-box;user-select:none;text-align:center}

/* title */
.sd-title{font-size:2rem;font-weight:800;color:#4eff4e;letter-spacing:.08em;margin-bottom:16px;text-shadow:0 0 20px rgba(78,255,78,.5)}

/* setup */
.sd-setup-box{max-width:480px;margin:0 auto;display:flex;flex-direction:column;gap:18px;align-items:center}
.sd-setup-row{display:flex;align-items:center;gap:20px;justify-content:center;width:100%}
.sd-player-setup{display:flex;flex-direction:column;align-items:center;gap:6px;flex:1}
.sd-p-icon{font-size:2.4rem}
.sd-p-label{font-size:.75rem;color:#4a8a4a;text-transform:uppercase;letter-spacing:.1em;font-weight:600}
.sd-name-input{background:#0d2a0d;border:1px solid #2a6a2a;border-radius:8px;padding:8px 12px;color:#e0ffe0;font-size:.95rem;outline:none;text-align:center;width:100%;box-sizing:border-box}
.sd-name-input:focus{border-color:#4eff4e}
.sd-p-keys{font-size:.8rem;color:#2a6a2a;font-weight:700;letter-spacing:.05em}
.sd-vs{font-size:1.4rem;font-weight:900;color:#ff4e4e;text-shadow:0 0 10px rgba(255,78,78,.5)}
.sd-wins-row{display:flex;align-items:center;gap:10px;font-size:.88rem;color:#4a8a4a}
.sd-wins-row select{background:#0d2a0d;border:1px solid #2a6a2a;border-radius:6px;padding:5px 8px;color:#e0ffe0;font-size:.88rem;outline:none}

/* buttons */
.sd-btn{border:none;border-radius:12px;padding:12px 32px;font-size:1rem;font-weight:700;cursor:pointer;transition:filter .15s,transform .1s}
.sd-btn:hover{filter:brightness(1.2);transform:translateY(-2px)}
.sd-btn:active{transform:translateY(0)}
.sd-btn-primary{background:linear-gradient(135deg,#4eff4e,#1ab81a);color:#0a1a0a}

/* game scoreboard */
.sd-scoreboard{display:flex;align-items:center;justify-content:space-between;max-width:800px;margin:0 auto 8px;padding:8px 12px;background:#0d2a0d;border:1px solid #1a4a1a;border-radius:10px}
.sd-score{display:flex;align-items:center;gap:8px}
.sd-score-p1{flex-direction:row}
.sd-score-p2{flex-direction:row-reverse}
.sd-score-name{font-size:.85rem;font-weight:600;color:#a0d0a0}
.sd-score-pts{font-size:1.4rem;font-weight:900;min-width:32px}
.sd-score-p1 .sd-score-pts{color:#4eff4e}
.sd-score-p2 .sd-score-pts{color:#ff4e4e}
.sd-score-mid{font-size:.72rem;color:#2a6a2a;text-align:center}

/* canvas */
.sd-canvas-wrap{position:relative;max-width:800px;margin:0 auto;border:2px solid #1a4a1a;border-radius:8px;overflow:hidden;background:#061406}
#sd-canvas{display:block;width:100%;height:auto}
.sd-overlay{position:absolute;inset:0;background:rgba(0,10,0,.82);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px}
.sd-overlay-icon{font-size:3.5rem}
.sd-overlay-msg{font-size:1.2rem;font-weight:700;color:#e0ffe0}

/* touch d-pad */
.sd-touch-row{display:flex;justify-content:space-between;max-width:800px;margin:10px auto 0;gap:10px}
.sd-dpad{display:grid;grid-template-columns:repeat(3,44px);grid-template-rows:repeat(3,44px);gap:4px}
.sd-dpad-btn{background:#0d2a0d;border:1px solid #2a6a2a;border-radius:8px;color:#4eff4e;font-size:1rem;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:background .1s}
.sd-dpad-right .sd-dpad-btn{color:#ff4e4e;border-color:#6a1a1a;background:#2a0a0a}
.sd-dpad-btn:active{background:#1a4a1a;transform:scale(.92)}
.sd-dpad-right .sd-dpad-btn:active{background:#4a1a1a}
.sd-dpad-center{background:transparent}

/* final */
.sd-final-icon{font-size:4rem;margin-bottom:8px}
.sd-final-title{font-size:1.8rem;font-weight:900;color:#4eff4e;margin-bottom:8px}
.sd-final-score{font-size:1rem;color:#4a8a4a;margin-bottom:20px}