/* ============================================================
   99 Nachten in het Bos - UI in Roblox-stijl
   ============================================================ */

* { margin:0; padding:0; box-sizing:border-box; }

html, body {
  width:100%; height:100%; overflow:hidden; background:#0b1220;
  font-family: "Helvetica Neue", "Segoe UI", Arial, sans-serif;
  -webkit-font-smoothing:antialiased;
  user-select:none; -webkit-user-select:none;
  color:#fff;
  touch-action:none;
}

canvas#game { position:fixed; inset:0; width:100%; height:100%; display:block; }

.hidden { display:none !important; }

/* ---------- knoppen ---------- */
.btn {
  display:block; width:100%; padding:14px 22px; margin:8px 0;
  font-size:22px; font-weight:800; letter-spacing:.5px;
  color:#fff; border:none; border-radius:10px; cursor:pointer;
  box-shadow:0 4px 0 rgba(0,0,0,.35), inset 0 -3px 0 rgba(0,0,0,.18);
  transition:transform .06s ease, filter .12s ease;
}
.btn:hover { filter:brightness(1.1); }
.btn:active { transform:translateY(3px); box-shadow:0 1px 0 rgba(0,0,0,.35), inset 0 -2px 0 rgba(0,0,0,.18); }
.btn-green { background:linear-gradient(#3ec93e,#1f9e28); }
.btn-blue  { background:linear-gradient(#3fb6ff,#0f7fd4); }

.mini-btn {
  padding:9px 14px; margin:4px; font-size:14px; font-weight:700;
  color:#e8eefc; background:rgba(255,255,255,.10);
  border:1px solid rgba(255,255,255,.22); border-radius:8px; cursor:pointer;
}
.mini-btn:hover { background:rgba(255,255,255,.2); }
.mini-btn.wide { display:block; width:100%; margin:6px 0; padding:11px; }

/* ============================================================
   LAADSCHERM
   ============================================================ */
#loader {
  position:fixed; inset:0; z-index:200;
  background:radial-gradient(ellipse at 50% 35%, #1d3a5c 0%, #0b1220 70%);
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:18px;
}
.loader-logo {
  width:104px; height:104px; border-radius:22px;
  background:linear-gradient(145deg,#ff9f2e,#e2591b);
  display:flex; align-items:center; justify-content:center;
  font-size:46px; font-weight:900; color:#fff;
  box-shadow:0 10px 30px rgba(255,120,20,.35);
  animation:spinny 2.4s ease-in-out infinite;
}
@keyframes spinny {
  0%,100% { transform:rotate(-8deg) scale(1); }
  50%     { transform:rotate(8deg) scale(1.06); }
}
.loader-title { font-size:26px; font-weight:900; letter-spacing:3px; color:#dceaff; }
.loader-bar { width:280px; height:12px; background:rgba(255,255,255,.12); border-radius:99px; overflow:hidden; }
#loader-fill { height:100%; width:0%; background:linear-gradient(90deg,#5ad2ff,#2f8fe0); transition:width .25s ease; }
.loader-tip { font-size:14px; color:#8fa6c6; }

/* ============================================================
   STARTMENU
   ============================================================ */
#menu { position:fixed; inset:0; z-index:150; display:flex; align-items:center; justify-content:center; }
.menu-bg {
  position:absolute; inset:0;
  background:linear-gradient(180deg, rgba(6,12,24,.55), rgba(6,12,24,.88));
  backdrop-filter:blur(2px);
}
.menu-card {
  position:relative; width:min(440px, 92vw); max-height:94vh; overflow:auto;
  background:rgba(16,24,42,.94); border:1px solid rgba(120,170,255,.22);
  border-radius:16px; padding:26px 26px 18px; text-align:center;
  box-shadow:0 24px 70px rgba(0,0,0,.6);
}
.menu-logo { margin-bottom:6px; }
.menu-99 {
  display:inline-block; font-size:64px; font-weight:900; line-height:1;
  background:linear-gradient(180deg,#ffd257,#ff8a1f);
  -webkit-background-clip:text; background-clip:text; color:transparent;
  text-shadow:0 4px 0 rgba(0,0,0,.25);
}
.menu-sub { display:block; font-size:20px; font-weight:900; letter-spacing:2.5px; color:#cfe2ff; margin-top:2px; }
.menu-tagline { font-size:13px; color:#8fa6c6; margin:10px 0 18px; }
.menu-row { margin:6px 0; }
.menu-label { font-size:12px; font-weight:700; color:#7f95b5; text-transform:uppercase; letter-spacing:1.5px; margin:16px 0 6px; }
.menu-diff { display:flex; gap:6px; }
.diff-btn, .qual-btn {
  flex:1; padding:9px 4px; font-size:13px; font-weight:700; cursor:pointer; color:#c3d4ee;
  background:rgba(255,255,255,.07); border:1px solid rgba(255,255,255,.16); border-radius:8px;
}
.diff-btn.selected, .qual-btn.selected {
  background:linear-gradient(#3fb6ff,#0f7fd4); color:#fff; border-color:#7fd0ff;
}
.menu-foot { margin-top:16px; border-top:1px solid rgba(255,255,255,.1); padding-top:12px; }

/* ============================================================
   OVERLAYS (uitleg, winkel, pauze, game over)
   ============================================================ */
.overlay {
  position:fixed; inset:0; z-index:160;
  display:flex; align-items:center; justify-content:center;
  background:rgba(6,12,24,.72);
}
.panel {
  width:min(560px, 92vw); max-height:92vh; overflow:auto;
  background:rgba(16,24,42,.97); border:1px solid rgba(120,170,255,.22);
  border-radius:16px; padding:24px; text-align:center;
  box-shadow:0 24px 70px rgba(0,0,0,.6);
}
.panel-title { font-size:26px; font-weight:900; color:#ffd257; margin-bottom:14px; }
.help-grid { display:flex; gap:18px; text-align:left; margin-bottom:16px; flex-wrap:wrap; }
.help-col { flex:1; min-width:200px; }
.help-col h3 { font-size:15px; color:#7fd0ff; margin-bottom:8px; text-transform:uppercase; letter-spacing:1px; }
.help-col ul { list-style:none; }
.help-col li { font-size:14px; color:#d3e0f2; padding:4px 0; line-height:1.4; }
.help-col b { color:#fff; }
.go-text { font-size:16px; color:#d3e0f2; line-height:1.5; margin-bottom:16px; }

/* winkel */
.shop-panel { width:min(640px,94vw); }
.shop-coins { font-size:16px; color:#ffd257; margin-bottom:14px; font-weight:700; }
.shop-item {
  display:flex; align-items:center; gap:12px; text-align:left;
  background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.12);
  border-radius:10px; padding:10px 12px; margin-bottom:8px;
}
.shop-ico { font-size:30px; width:44px; text-align:center; }
.shop-info { flex:1; }
.shop-name { font-size:16px; font-weight:800; color:#fff; }
.shop-desc { font-size:12px; color:#9fb3d0; margin-top:2px; }
.shop-lvl { font-size:11px; color:#7fd0ff; margin-top:3px; font-weight:700; }
.shop-buy {
  padding:10px 16px; font-size:15px; font-weight:800; color:#fff; cursor:pointer;
  background:linear-gradient(#3ec93e,#1f9e28); border:none; border-radius:8px;
  box-shadow:0 3px 0 rgba(0,0,0,.3); white-space:nowrap;
}
.shop-buy:active { transform:translateY(2px); box-shadow:none; }
.shop-buy.cant { background:linear-gradient(#6b7280,#4b5563); cursor:not-allowed; }
.shop-buy.maxed { background:linear-gradient(#c9a227,#9a7b12); cursor:default; }

/* dood */
#dead { background:rgba(90,0,0,.55); flex-direction:column; z-index:170; }
.dead-oof {
  font-size:96px; font-weight:900; color:#fff; text-shadow:0 8px 0 rgba(0,0,0,.4);
  animation:oofpop .5s cubic-bezier(.2,1.6,.4,1);
}
@keyframes oofpop { from { transform:scale(.2) rotate(-14deg); opacity:0; } to { transform:scale(1) rotate(-4deg); opacity:1; } }
.dead-sub { font-size:18px; color:#ffd8d8; margin-top:8px; }

/* ============================================================
   HUD
   ============================================================ */
#hud { position:fixed; inset:0; z-index:100; pointer-events:none; }

/* --- chat linksboven --- */
#chat {
  position:absolute; left:12px; top:12px; width:min(320px, 40vw);
  background:rgba(0,0,0,.42); border-radius:8px; overflow:hidden;
  font-size:13px; line-height:1.35;
}
#chat-head {
  padding:4px 10px; font-size:11px; font-weight:800; letter-spacing:1px;
  color:#b9c9e0; background:rgba(0,0,0,.35); text-transform:uppercase;
}
#chat-log { padding:6px 10px 8px; max-height:130px; overflow:hidden; }
.chat-line { padding:1px 0; color:#e9f0fb; text-shadow:0 1px 2px rgba(0,0,0,.8); word-wrap:break-word; }
.chat-line .who { font-weight:800; }
.chat-line.sys { color:#ffd257; font-style:italic; }
.chat-line.warn { color:#ff8a8a; font-weight:700; }

/* --- spelerslijst rechtsboven --- */
#players {
  position:absolute; right:12px; top:12px; width:290px;
  background:rgba(0,0,0,.42); border-radius:8px; overflow:hidden; font-size:12px;
}
.pl-head, .pl-row { display:flex; align-items:center; gap:2px; padding:4px 8px; }
.pl-head { background:rgba(0,0,0,.35); font-weight:800; color:#b9c9e0; font-size:10px; text-transform:uppercase; letter-spacing:.4px; }
.pl-row { border-top:1px solid rgba(255,255,255,.07); }
.pl-row.me { background:rgba(80,170,255,.18); }
.pl-name { flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.pl-stat { width:52px; text-align:center; flex:none; }
.pl-row .pl-name { font-weight:700; text-shadow:0 1px 2px rgba(0,0,0,.7); }
.pl-dot { display:inline-block; width:8px; height:8px; border-radius:2px; margin-right:6px; vertical-align:middle; }

/* --- nachtteller bovenaan --- */
#topbar { position:absolute; left:50%; top:10px; transform:translateX(-50%); text-align:center; }
#night-count {
  font-size:26px; font-weight:900; letter-spacing:2px; color:#fff;
  text-shadow:0 3px 0 rgba(0,0,0,.5), 0 0 22px rgba(90,160,255,.5);
}
#night-count .of { font-size:15px; color:#a8c4e8; }
#phase-wrap {
  position:relative; width:220px; height:18px; margin:5px auto 0;
  background:rgba(0,0,0,.45); border-radius:99px; overflow:hidden;
}
#phase-fill { height:100%; width:0%; background:linear-gradient(90deg,#ffd257,#ff9f2e); transition:background .8s linear; }
#phase-text {
  position:absolute; inset:0; display:flex; align-items:center; justify-content:center;
  font-size:11px; font-weight:800; letter-spacing:1.5px; text-transform:uppercase;
  text-shadow:0 1px 2px rgba(0,0,0,.9);
}
#phase-wrap.night #phase-fill { background:linear-gradient(90deg,#6f7dff,#3b3fa0); }

/* --- kampstatus linksonder --- */
#campstat {
  position:absolute; left:12px; bottom:14px;
  background:rgba(0,0,0,.42); border-radius:10px; padding:8px 10px; min-width:190px;
}
.cs-row { display:flex; align-items:center; gap:7px; margin:3px 0; font-size:13px; font-weight:700; }
.cs-ico { font-size:16px; }
.cs-bar { flex:1; height:11px; background:rgba(0,0,0,.5); border-radius:99px; overflow:hidden; }
#fire-fill { height:100%; width:100%; background:linear-gradient(90deg,#ffcf3e,#ff6a1f); transition:width .2s linear; }
.cs-val { width:38px; text-align:right; font-size:12px; color:#ffd9a0; }
#kids-row { gap:4px; flex-wrap:wrap; }
.kid-chip {
  display:flex; align-items:center; gap:4px; font-size:11px; font-weight:700;
  background:rgba(255,255,255,.1); border-radius:6px; padding:3px 6px;
}
.kid-chip.hungry { background:rgba(255,160,40,.28); }
.kid-chip.down   { background:rgba(255,60,60,.32); }
.kid-chip.zoek   { background:rgba(120,140,255,.28); }
.kid-note { font-size:10px; font-weight:700; opacity:.75; }
.kid-hp { width:26px; height:5px; background:rgba(0,0,0,.5); border-radius:99px; overflow:hidden; }
.kid-hp i { display:block; height:100%; background:#5ee05e; }

/* --- prompt --- */
#prompt {
  position:absolute; left:50%; top:58%; transform:translateX(-50%);
  display:flex; align-items:center; gap:8px;
  background:rgba(0,0,0,.6); border-radius:10px; padding:8px 14px;
  font-size:15px; font-weight:700; white-space:nowrap;
}
#prompt .key {
  display:inline-flex; align-items:center; justify-content:center;
  min-width:26px; height:26px; padding:0 6px; border-radius:6px;
  background:#fff; color:#111; font-weight:900; font-size:14px;
}

/* --- toasts --- */
#toasts { position:absolute; right:14px; top:50%; transform:translateY(-50%); display:flex; flex-direction:column; gap:6px; align-items:flex-end; }
.toast {
  background:rgba(0,0,0,.6); border-left:4px solid #ffd257; border-radius:6px;
  padding:7px 12px; font-size:14px; font-weight:800; color:#fff;
  animation:toastin .25s ease, toastout .4s ease 1.8s forwards;
  text-shadow:0 1px 2px rgba(0,0,0,.8);
}
.toast.good { border-color:#5ee05e; }
.toast.bad  { border-color:#ff5a5a; }
.toast.coin { border-color:#ffd257; }
@keyframes toastin  { from { opacity:0; transform:translateX(40px); } }
@keyframes toastout { to   { opacity:0; transform:translateX(40px); } }

/* --- onderbalk: leven + rugzak --- */
#bottom { position:absolute; left:50%; bottom:14px; transform:translateX(-50%); text-align:center; }
#health-wrap {
  position:relative; width:220px; height:20px; margin:0 auto 8px;
  background:rgba(0,0,0,.5); border-radius:99px; overflow:hidden;
  border:2px solid rgba(255,255,255,.25);
}
#health-fill { height:100%; width:100%; background:linear-gradient(90deg,#3ee03e,#1fbb1f); transition:width .15s linear; }
#health-text {
  position:absolute; inset:0; display:flex; align-items:center; justify-content:center;
  font-size:12px; font-weight:900; text-shadow:0 1px 2px rgba(0,0,0,.9);
}
#hotbar { display:flex; gap:6px; justify-content:center; }
.slot {
  position:relative; width:58px; height:58px; border-radius:8px;
  background:rgba(0,0,0,.45); border:2px solid rgba(255,255,255,.28);
  display:flex; align-items:center; justify-content:center; font-size:26px;
  pointer-events:auto; cursor:pointer;
}
.slot.sel { background:rgba(255,255,255,.9); border-color:#fff; box-shadow:0 0 14px rgba(255,255,255,.5); }
.slot.empty { opacity:.32; }
.slot .num { position:absolute; top:1px; left:4px; font-size:10px; font-weight:900; color:#cfe0f5; }
.slot.sel .num { color:#333; }
.slot .cnt {
  position:absolute; bottom:1px; right:4px; font-size:12px; font-weight:900;
  color:#fff; text-shadow:0 1px 2px rgba(0,0,0,.9);
}
.slot.sel .cnt { color:#111; text-shadow:none; }

/* --- overig --- */
#crosshair {
  position:absolute; left:50%; top:50%; width:6px; height:6px; margin:-3px 0 0 -3px;
  border-radius:50%; background:rgba(255,255,255,.75); box-shadow:0 0 4px rgba(0,0,0,.8);
}
#hint {
  position:absolute; left:50%; bottom:120px; transform:translateX(-50%);
  background:rgba(0,0,0,.6); padding:8px 18px; border-radius:10px;
  font-size:15px; font-weight:800; color:#dfeaff;
}
#vignette {
  position:absolute; inset:0; pointer-events:none; opacity:0;
  background:radial-gradient(ellipse at center, rgba(255,0,0,0) 40%, rgba(190,0,0,.85) 100%);
  transition:opacity .25s ease;
}
/* Aankondiging van het nachttype. Kort in beeld, groot genoeg om zonder
   lezen te snappen wat voor nacht het wordt. */
#nacht-banner {
  position:absolute; left:50%; top:22%; transform:translateX(-50%);
  display:flex; flex-direction:column; align-items:center; gap:2px;
  background:rgba(10,8,24,.82); border:3px solid currentColor;
  border-radius:16px; padding:14px 32px; pointer-events:none;
  text-shadow:0 2px 8px rgba(0,0,0,.9); opacity:0;
}
#nacht-banner .nb-ico { font-size:40px; line-height:1; }
#nacht-banner .nb-naam { font-size:26px; font-weight:900; letter-spacing:1px; }
#nacht-banner .nb-tekst { font-size:14px; font-weight:700; color:#e8eaf2; opacity:.9; }
#nacht-banner.weg { animation:nbin 4s ease forwards; }
@keyframes nbin {
  0% { opacity:0; transform:translateX(-50%) translateY(-14px) scale(.94); }
  12% { opacity:1; transform:translateX(-50%) translateY(0) scale(1); }
  78% { opacity:1; }
  100% { opacity:0; transform:translateX(-50%) translateY(-8px); }
}

/* Het hert komt eraan. Donkerder en trager dan de schade-flits, zodat het
   als dreiging leest en niet als "je bent net geraakt". */
#dreiging {
  position:absolute; inset:0; pointer-events:none; opacity:0;
  background:radial-gradient(ellipse at center, rgba(0,0,0,0) 32%, rgba(40,0,10,.95) 100%);
  transition:opacity .4s ease;
}
#dreiging.dichtbij { animation:hartslag 1.1s ease-in-out infinite; }
@keyframes hartslag { 0%,100% { filter:brightness(1); } 45% { filter:brightness(1.5); } }
#dark-warn {
  position:absolute; left:50%; top:66%; transform:translateX(-50%);
  background:rgba(20,0,40,.7); border:2px solid rgba(150,120,255,.5);
  padding:8px 16px; border-radius:10px; font-size:16px; font-weight:800;
  animation:pulsew 1s ease-in-out infinite;
}
@keyframes pulsew { 50% { transform:translateX(-50%) scale(1.06); } }
#fps {
  position:absolute; right:12px; bottom:10px; font-size:11px;
  color:rgba(255,255,255,.45); font-family:monospace;
}

/* Wat doodgaan kostte. Zonder dit lijkt het verlies willekeurig, en dan
   leert Finn er niets van. */
.dead-kosten {
  margin-top:10px; font-size:15px; font-weight:800; color:#ffc9c9;
  background:rgba(0,0,0,.45); padding:8px 18px; border-radius:10px;
}

/* De hert-waarschuwing in het uitlegscherm: dit is het belangrijkste dat
   een nieuwe speler moet weten, dus het staat apart en valt op. */
.help-hert {
  text-align:left; font-size:14px; line-height:1.5; color:#ffe0b8;
  background:rgba(120,40,20,.35); border:2px solid rgba(255,160,90,.45);
  border-radius:10px; padding:12px 14px; margin-bottom:14px;
}