/* ===== Reset / basis ===== */
* { box-sizing: border-box; }
html, body { height:100%; margin:0; overflow:hidden; background:#0B1220; color:#F1F5F9; font-family:Inter, system-ui, Segoe UI, Roboto, Arial, sans-serif; }
.hidden{ display:none; }

/* ===== Auth / forms (blijft zoals je had) ===== */
.brand{ padding:10px 16px; background:#0b121f; color:#6CC51D; position:sticky; top:0; z-index:5; font-weight:800; letter-spacing:.5px; }
.auth-wrap{ padding:24px; max-width:520px; margin:24px auto; }
.card{ background:#0F172A; border-radius:16px; padding:16px; box-shadow:0 10px 30px rgba(0,0,0,.35); border:1px solid #1f2c44; }
.row{ display:flex; gap:10px; flex-wrap:wrap; }
input{ flex:1; min-width:100%; padding:12px 14px; border-radius:12px; border:1px solid #24324A; background:#0c1323; color:#e6eefb; }
.buttons{ margin-top:10px; }
button{ padding:12px 14px; border-radius:12px; border:none; background:#6CC51D; color:#0b121f; font-weight:700; cursor:pointer; }
button.outline{ background:transparent; border:1px solid #4CCB7E; color:#4CCB7E; }
button.small{ padding:8px 10px; border-radius:10px; font-size:13px; }
button:active{ transform:translateY(1px); }
.msg{ margin-top:8px; color:#FFD166; }
.hint{ opacity:.8; margin-top:8px; font-size:12px; }
.tabs{ display:flex; gap:8px; margin-bottom:12px; }
.tab{ flex:1; background:#0c1323; border:1px solid #1f2c44; color:#e6eefb; }
.tab.active{ background:#1a2842; border-color:#2a3b5c; }

/* ===== Game layout (fullscreen, geen blauwe balk) ===== */
#gameWrap{
  position:fixed;   /* fullscreen container */
  inset:0;
  width:100vw; height:100vh;
  overflow:hidden;
  z-index:0;
}
#stage{
  position:absolute; inset:0;
  background:transparent !important; /* canvas transparant, geen letterbox */
  display:flex; align-items:center; justify-content:center;
}
#stage canvas{ display:block; } /* voorkomt extra whitespace onder canvas */

/* ===== HUD ===== */
.hud{
  position:absolute; top:0; left:0; right:0; height:64px; z-index:20;
  display:flex; align-items:center; justify-content:space-between;
  padding:10px 14px;
  background:linear-gradient(180deg, rgba(10,16,28,.8), rgba(10,16,28,.2));
  backdrop-filter: blur(6px);
  border-bottom:1px solid rgba(255,255,255,.06);
}
.player-chip{ display:flex; align-items:center; gap:10px; }
.player-chip .avatar{
  width:36px; height:36px; border-radius:50%;
  background-image: url('public_assets/ui/avatar.png');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}
.player-chip .name{ font-weight:700; letter-spacing:.2px; text-shadow:0 2px 8px rgba(0,0,0,.4); }
.player-chip .stats{ font-size:12px; opacity:.85; }
.ui-btn{
  background:#19243a; color:#dfe8ff; border:1px solid rgba(255,255,255,.1);
  padding:8px 12px; border-radius:10px; cursor:pointer;
  box-shadow:0 1px 0 rgba(255,255,255,.06) inset, 0 8px 20px rgba(0,0,0,.25);
}
.ui-btn:hover{ filter:brightness(1.08); }
.ui-btn.danger{ background:#3a1922; color:#ffd9df; border-color:rgba(255,80,120,.3); }

/* ===== Toast ===== */
.toast{
  position:absolute; bottom:20px; left:50%; transform:translateX(-50%);
  background:rgba(0,0,0,.5); border:1px solid rgba(255,255,255,.15);
  padding:8px 12px; border-radius:10px; opacity:0; transition:opacity .25s;
  z-index:30;
}

/* ===== Modal (Options) ===== */
.modal{ position:absolute; inset:0; display:flex; align-items:center; justify-content:center; z-index:40; background:rgba(0,0,0,.4); }
.modal.hidden{ display:none; }
.modal-card{
  width:min(420px, 90vw);
  background:linear-gradient(180deg, #0f1830, #0c1428);
  border:1px solid rgba(255,255,255,.08);
  border-radius:14px; padding:16px; box-shadow:0 20px 40px rgba(0,0,0,.45);
}
.modal-card h3{ margin:0 0 12px 0; }
.modal-actions{ display:flex; gap:10px; }
.modal-close{ margin-top:12px; background:transparent; color:#dfe8ff; border:none; cursor:pointer; }

/* Backwards compat voor oude modals (#modal) */
#modal{ position:fixed; inset:0; z-index:100; display:flex; align-items:center; justify-content:center; }
#modal.hidden{ display:none; }
.modal-backdrop{ position:absolute; inset:0; background:rgba(0,0,0,.5); }
.modal-card h2{ margin:0 0 10px; }

/* ===== Debugbar (optioneel) ===== */
.debug{
  position:fixed; bottom:0; left:0; right:0;
  background:#09101c; color:#89b4ff; padding:6px 10px; font-size:12px;
  border-top:1px solid #1f2c44; z-index:120; max-height:35vh; overflow:auto;
}

/* ===== Virtuele Joystick ===== */
.joy{
  position:absolute; bottom:24px; left:24px;
  width:140px; height:140px; z-index:35;
  touch-action:none; user-select:none;
}
.joy-base, .joy-knob{
  position:absolute; left:50%; top:50%;
  transform:translate(-50%, -50%);   /* knob start exact in het midden */
  border-radius:50%;
}

/* Achtergrond achter de joystick (zoals je wilde) */
.joy-base{
  width:140px; height:140px;
  background:
    radial-gradient(circle at 50% 50%, rgba(255,255,255,.06) 0 40%, rgba(255,255,255,.02) 60%, transparent 61%),
    rgba(20,24,36,.55);
  border:1px solid rgba(255,255,255,.12);
  box-shadow:0 10px 25px rgba(0,0,0,.35);
  /* Wil je je sprite-sheet gebruiken i.p.v. gradient?
     Vervang bovenstaande background door:
     background-image:url('/public_assets/ui/style-e-large.png');
     background-size:1100px auto;
     background-position:-10px -10px;
  */
}

.joy-knob{
  width:68px; height:68px;
  background:
    radial-gradient(circle at 45% 40%, rgba(255,255,255,.18), rgba(255,255,255,.06) 55%, rgba(0,0,0,.25) 56%),
    rgba(30,34,48,.95);
  border:1px solid rgba(255,255,255,.18);
  box-shadow:0 8px 18px rgba(0,0,0,.45);
  pointer-events:none; /* alleen de base ontvangt input */
}

/* Kleinere schermen: joystick iets omhoog/inwaarts */
@media (max-width: 720px){
  .joy{ bottom:18px; left:18px; }
}

#sheetPicker{ background:rgba(255,255,255,.02); border:1px solid rgba(255,255,255,.08); border-radius:10px; }
#avatarPreview{ image-rendering: pixelated; }

/* ===== AUTH SCREEN (pretty) ===== */
:root{
  --bg:#0b1220; --panel:#0f1830; --line:rgba(255,255,255,.08);
  --text:#E6EEF9; --muted:#9fb3d9; --accent:#6CC51D; --accent2:#59ad18;
}

#authWrap{
  position:fixed; inset:0; display:grid; place-items:center;
  background:
    radial-gradient(1200px 800px at 10% 20%, #15304d 0%, transparent 60%),
    radial-gradient(1000px 700px at 90% 80%, #16263e 0%, transparent 60%),
    linear-gradient(180deg, #0c1527, #0a0f1e);
  color:var(--text); z-index:1000;
}
#authWrap::before{
  content:""; position:absolute; inset:0;
  background:
    repeating-linear-gradient(0deg, rgba(255,255,255,.045) 0 1px, transparent 1px 42px),
    repeating-linear-gradient(90deg, rgba(255,255,255,.045) 0 1px, transparent 1px 42px);
  opacity:.07; filter:blur(.3px); pointer-events:none;
}
#authWrap::after{
  content:""; position:absolute; inset:0;
  background:radial-gradient(1200px 420px at 50% 120%, rgba(0,0,0,.85), transparent 60%);
  pointer-events:none;
}

.auth-card{
  position:relative; width:min(520px,92vw); padding:20px 22px; border-radius:18px;
  background:linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.02));
  border:1px solid var(--line);
  box-shadow:0 40px 80px rgba(0,0,0,.55), 0 0 0 1px rgba(255,255,255,.02) inset;
}

.auth-brand{ display:flex; align-items:center; gap:12px; margin-bottom:12px; }
.auth-brand .logo{
  width:40px; height:40px; border-radius:10px;
  background-image: url('public_assets/ui/avatar.png');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}
.auth-title{ font:800 22px/1.1 system-ui,Segoe UI,Arial; letter-spacing:.3px; }
.small-note{ font-size:12px; opacity:.75; }

.auth-row{ display:flex; gap:10px; flex-wrap:wrap; }
.auth-input{
  flex:1 1 100%; min-width:100%;
  padding:12px 14px; border-radius:12px;
  border:1px solid #2a3b5c; background:#0c1323; color:#e6eefb;
  outline:none;
}
.auth-input:focus{ border-color:#3c5591; box-shadow:0 0 0 3px rgba(76,113,193,.25); }

.auth-actions{ margin-top:12px; display:flex; gap:10px; align-items:center; }
.btn{
  padding:12px 14px; border-radius:12px; border:1px solid rgba(255,255,255,.1);
  background:#1a2842; color:var(--text); font-weight:700; cursor:pointer;
  box-shadow:0 1px 0 rgba(255,255,255,.06) inset, 0 10px 24px rgba(0,0,0,.25);
}
.btn-primary{
  background:linear-gradient(180deg, var(--accent), var(--accent2));
  color:#0b121f; border-color:#74da1f;
  box-shadow:0 10px 26px rgba(108,197,29,.28);
}
.btn:active{ transform:translateY(1px); }

.auth-section{ margin-top:14px; padding-top:14px; border-top:1px dashed rgba(255,255,255,.09); }
.msg{ color:#FFD166; font-size:13px; min-height:1em; }

/* Zorg dat de game eronder niet interactief is wanneer auth zichtbaar is */
#authWrap:not(.hidden) ~ #gameWrap{ pointer-events:none; filter:blur(1px) saturate(.9); }