/* Pirateers — mp-lab co-op */
* { margin: 0; padding: 0; box-sizing: border-box; }
html, body { width: 100%; height: 100%; overflow: hidden; background: #0d2038; font-family: Georgia, 'Times New Roman', serif; color: #f0e2c0; }

/* ── Lobby ── */
#lobby-screen { position: fixed; inset: 0; display: flex; align-items: center; justify-content: center; background: radial-gradient(ellipse at 50% 30%, #1d4569 0%, #0d2038 70%); z-index: 30; }
.lobby-box { width: min(520px, 92vw); background: linear-gradient(#6b4a2b, #543a20); border: 4px solid #2e1f10; border-radius: 12px; box-shadow: 0 12px 40px rgba(0,0,0,.6), inset 0 0 0 2px #8a6a40; padding: 22px 26px; text-align: center; }
.game-title { font-size: 44px; letter-spacing: 4px; color: #ffd76a; text-shadow: 2px 3px 0 #2e1f10, 0 0 18px rgba(255,180,60,.35); }
.tagline { font-size: 13px; color: #e8d5ac; margin: 6px 0 14px; font-style: italic; }
.room-row { display: flex; gap: 8px; align-items: center; justify-content: center; margin-bottom: 12px; }
.room-row span { font-weight: bold; color: #ffd76a; }
#room-code-input { width: 110px; text-align: center; font-size: 20px; font-weight: bold; letter-spacing: 3px; background: #f0e2c0; color: #3a2810; border: 2px solid #2e1f10; border-radius: 6px; padding: 4px; }
button { font-family: inherit; cursor: pointer; }
#btn-copy-link { background: #3d6b8f; color: #fff; border: 2px solid #1d3b53; border-radius: 6px; padding: 6px 10px; font-size: 13px; }
#btn-copy-link:hover { background: #4d80a8; }
#lobby-slots { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin: 10px 0; }
.slot { display: flex; justify-content: space-between; padding: 8px 12px; background: rgba(0,0,0,.25); border: 2px solid #2e1f10; border-radius: 6px; opacity: .55; }
.slot.occupied { opacity: 1; }
.slot.ready { border-color: #7fce6a; box-shadow: 0 0 8px rgba(110,220,90,.35); }
.slot-name { font-weight: bold; }
.slot-name.p1 { color: #6ab4ff; } .slot-name.p2 { color: #ffb45e; } .slot-name.p3 { color: #7fce6a; } .slot-name.p4 { color: #e07fd8; }
.slot-status { font-size: 13px; }
#btn-ready { width: 100%; padding: 12px; font-size: 22px; font-weight: bold; letter-spacing: 2px; background: linear-gradient(#a33530, #7c2420); color: #ffe9c8; border: 3px solid #3d0f0d; border-radius: 8px; text-shadow: 1px 2px 0 #3d0f0d; margin-top: 4px; }
#btn-ready:hover:not(:disabled) { background: linear-gradient(#c04540, #953028); }
#btn-ready:disabled { opacity: .5; cursor: default; }
#btn-ready.is-ready { background: linear-gradient(#4d8a3d, #35672a); border-color: #1c3a14; }
#lobby-status-text { margin-top: 10px; font-size: 13px; min-height: 18px; }
#connection-status { font-size: 12px; margin-top: 4px; }
#connection-status.connected { color: #7fce6a; }
#connection-status.disconnected { color: #ff7a6a; }
.how-to { margin-top: 14px; font-size: 12px; line-height: 1.6; color: #d9c49a; background: rgba(0,0,0,.22); border-radius: 8px; padding: 10px; }

/* ── Game ── */
#game-wrapper { position: fixed; inset: 0; display: none; align-items: center; justify-content: center; background: #081625; }
#game-wrapper.active { display: flex; }
#game-canvas { background: #2a63a8; image-rendering: pixelated; max-width: 100vw; max-height: 100vh; }

#countdown-overlay { position: absolute; inset: 0; display: none; align-items: center; justify-content: center; background: rgba(6,16,28,.55); z-index: 20; }
#countdown-overlay.active { display: flex; }
#countdown-number { font-size: 120px; font-weight: bold; color: #ffd76a; text-shadow: 3px 5px 0 #2e1f10; }

#disconnected-overlay { position: absolute; inset: 0; display: none; align-items: center; justify-content: center; background: rgba(6,16,28,.8); z-index: 25; }
#disconnected-overlay.active { display: flex; }
.overlay-box { background: linear-gradient(#6b4a2b, #543a20); border: 4px solid #2e1f10; border-radius: 12px; padding: 26px 34px; text-align: center; }
.overlay-box h2 { color: #ffd76a; margin-bottom: 10px; }
.overlay-box p { margin-bottom: 16px; font-size: 14px; }
.overlay-box button { display: block; width: 100%; margin-top: 8px; padding: 10px; font-size: 16px; background: #a33530; color: #ffe9c8; border: 2px solid #3d0f0d; border-radius: 6px; }

#rotate-overlay { position: fixed; inset: 0; display: none; align-items: center; justify-content: center; text-align: center; background: #0d2038; color: #ffd76a; font-size: 26px; line-height: 1.5; z-index: 40; }
#rotate-overlay span { font-size: 15px; color: #e8d5ac; }
@media (orientation: portrait) and (pointer: coarse) { #rotate-overlay.enabled { display: flex; } }

#mute-btn, #fullscreen-btn { position: absolute; top: 8px; width: 38px; height: 38px; font-size: 18px; background: rgba(20,35,55,.75); color: #f0e2c0; border: 2px solid rgba(240,226,192,.35); border-radius: 8px; z-index: 15; }
#mute-btn { right: 54px; }
#fullscreen-btn { right: 8px; }

/* touch */
#touch-controls { display: none; position: absolute; inset: 0; z-index: 10; pointer-events: none; }
body.touch-mode #touch-controls { display: block; }
.joy-zone { position: absolute; bottom: 0; height: 62%; pointer-events: auto; }
#joy-left { left: 0; width: 44%; }
#fire-zone { right: 0; width: 44%; }
#joy-knob { position: absolute; width: 56px; height: 56px; border-radius: 50%; background: rgba(240,226,192,.28); border: 2px solid rgba(240,226,192,.5); display: none; transform: translate(-50%, -50%); }