/* ============================================================
   ui.css — buttons, control bar, log, dialogs
   ============================================================ */

/* ---------------- menu buttons ---------------- */
.menu-btn{
  display:block;
  padding:7px 2px;
  background:transparent; border:none;
  color:#fff; cursor:pointer;
  font-family:var(--font-mono);
  font-size:clamp(0.92rem, 2.6vw, 1.28rem);
  letter-spacing:0.14em;
  text-align:left;
  text-shadow:0 0 12px rgba(255,255,255,0.75), 0 2px 6px #000;
  transition:text-shadow 0.22s ease, transform 0.1s ease, opacity 0.2s ease;
}
.menu-btn:hover{ text-shadow:0 0 22px rgba(255,255,255,1); opacity:0.92; }
.menu-btn:active{ transform:scale(0.97); }
.menu-btn.primary{ color:var(--amber); text-shadow:0 0 14px rgba(255,176,32,0.75), 0 2px 6px #000; }
.menu-btn.danger{ color:#ff9d94; text-shadow:0 0 12px rgba(224,57,43,0.6), 0 2px 6px #000; }
.menu-btn[disabled]{ opacity:0.3; cursor:not-allowed; text-shadow:none; }

.again-btn{
  padding:11px 26px;
  background:transparent;
  border:2px solid var(--panel-edge);
  color:var(--paper-dim);
  cursor:pointer;
  font-family:var(--font-mono);
  font-size:0.88rem; letter-spacing:0.08em;
  transition:border-color 0.2s ease, background 0.2s ease, color 0.2s ease;
}
.again-btn:hover{ border-color:var(--paper-dim); color:var(--paper); }
.again-btn.primary{ border-color:var(--amber-dim); color:var(--amber); }
.again-btn.primary:hover{ border-color:var(--amber); background:rgba(255,176,32,0.09); }

/* ---------------- in-game control bar ---------------- */
.controls{
  display:grid;
  grid-template-columns:repeat(5, 1fr);
  gap:6px;
  padding:8px 10px calc(8px + var(--safe-b));
  background:var(--panel);
  border-top:1px solid var(--panel-edge);
}
.ctrl-btn{
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:2px;
  min-height:48px;
  padding:8px 4px;
  background:var(--panel-2);
  border:1px solid var(--panel-edge);
  color:var(--paper);
  cursor:pointer;
  font-family:var(--font-mono);
  transition:background 0.16s ease, border-color 0.16s ease, color 0.16s ease;
  user-select:none; -webkit-user-select:none;
}
.ctrl-btn b{ font-size:0.72rem; letter-spacing:0.06em; font-weight:400; }
.ctrl-btn small{ font-size:0.58rem; opacity:0.7; letter-spacing:0.08em; }
.ctrl-btn:hover:not(:disabled){ border-color:var(--nv-dim); }
.ctrl-btn:disabled{ opacity:0.32; cursor:not-allowed; }

.ctrl-btn.door.active{
  background:var(--red-dim); border-color:var(--red); color:#ffe8e5;
}
.ctrl-btn.light.active{
  background:#5a4a14; border-color:var(--amber); color:#fff6d8;
}
.ctrl-btn.cams.active{
  background:var(--nv-dim); border-color:var(--nv); color:#eafff0;
}
/* hide the keyboard legend where there is no keyboard */
body.touch .ctrl-btn small{ display:none; }
@media (max-width:420px){
  .ctrl-btn b{ font-size:0.64rem; }
  .ctrl-btn{ min-height:44px; padding:6px 2px; }
}

.pause-btn{
  position:absolute; z-index:12;
  top:calc(8px + var(--safe-t)); left:calc(10px + var(--safe-l));
  width:44px; height:44px;      /* minimum comfortable touch target */
  display:grid; place-items:center;
  background:rgba(10,12,8,0.62);
  border:1px solid var(--panel-edge);
  color:var(--paper-dim);
  font-size:0.62rem; letter-spacing:1px;
  cursor:pointer; border-radius:4px;
}
.pause-btn:hover{ color:var(--nv); border-color:var(--nv-dim); }

/* ---------------- event log ---------------- */
.log-box{
  flex:0 0 auto;
  height:var(--log-h);
  overflow-y:auto;
  padding:7px 14px;
  background:#0a0b08;
  border-top:1px solid var(--panel-edge);
  font-size:0.73rem; line-height:1.5;
  color:var(--paper-dim);
  overscroll-behavior:contain;
}
.log-box .entry{ opacity:0; animation:fadeIn 0.3s ease forwards; }
.log-box .entry.warn{ color:#ff9d94; }
.log-box .entry.ok{ color:var(--nv); }
.log-box .entry.big{ color:var(--amber); letter-spacing:0.05em; }
@keyframes fadeIn{ to{ opacity:1; } }

@media (max-height:520px){
  :root{ --log-h:56px; }
  .log-box{ font-size:0.66rem; }
}

/* ---------------- overlays / dialogs ---------------- */
.overlay{
  position:absolute; inset:0; z-index:50;
  display:flex; align-items:center; justify-content:center;
  padding:20px;
}
.overlay-scrim{
  position:absolute; inset:0;
  background:rgba(2,3,2,0.86);
  backdrop-filter:blur(3px);
}

.dialog{
  position:relative; z-index:1;
  width:min(360px, 100%);
  max-height:min(86dvh, 640px);
  display:flex; flex-direction:column;
  padding:18px 20px 16px;
  background:#0b0d08;
  border:1px solid var(--panel-edge);
  box-shadow:0 20px 60px rgba(0,0,0,0.8);
}
.dialog.wide{ width:min(520px, 100%); }
.dialog h3{
  margin:0 0 14px;
  font-family:var(--font-mono);
  font-size:0.86rem; letter-spacing:0.18em;
  color:var(--nv);
}
.dialog h4{
  margin:18px 0 8px;
  font-size:0.76rem; letter-spacing:0.12em;
  color:var(--amber);
}
.dlg-body{
  display:flex; flex-direction:column; gap:10px;
  min-height:0;
}
.dlg-body.scrollable{ overflow-y:auto; padding-right:4px; }
.dlg-body p{ margin:0 0 8px; font-size:0.78rem; line-height:1.65; color:var(--paper-dim); }
.dlg-note{ font-size:0.72rem !important; color:#8c9682 !important; }
.dlg-actions{
  display:flex; gap:14px; justify-content:flex-end;
  flex-wrap:wrap; margin-top:12px;
}
.dlg-actions .menu-btn{ font-size:0.82rem; letter-spacing:0.1em; min-height:44px; padding:10px 6px; }

/* settings fields */
.field{ display:flex; flex-direction:column; gap:6px; font-size:0.76rem; color:var(--paper-dim); }
.field span{ display:flex; justify-content:space-between; gap:10px; }
.field b{ color:var(--nv); font-weight:400; }
.field.row{ flex-direction:row; align-items:center; justify-content:space-between; }

input[type=range]{
  -webkit-appearance:none; appearance:none;
  width:100%; height:22px; margin:2px 0;      /* 22px of grabbable track */
  background:transparent; cursor:pointer;
}
input[type=range]::-webkit-slider-runnable-track{ height:3px; background:#3b4136; }
input[type=range]::-moz-range-track{ height:3px; background:#3b4136; }
input[type=range]::-webkit-slider-thumb{
  -webkit-appearance:none; appearance:none;
  width:20px; height:20px; margin-top:-8px; border-radius:50%;
  background:var(--nv); border:none; cursor:pointer;
}
input[type=range]::-moz-range-thumb{
  width:20px; height:20px; border-radius:50%;
  background:var(--nv); border:none; cursor:pointer;
}
input[type=checkbox]{
  -webkit-appearance:none; appearance:none;
  width:52px; height:30px; margin:0;
  background:#2a2f26; border:1px solid var(--panel-edge);
  border-radius:15px; cursor:pointer; position:relative;
  transition:background 0.18s ease;
}
input[type=checkbox]::after{
  content:""; position:absolute; top:3px; left:3px;
  width:22px; height:22px; border-radius:50%;
  background:var(--paper-dim);
  transition:transform 0.18s ease, background 0.18s ease;
}
input[type=checkbox]:checked{ background:var(--nv-dim); border-color:var(--nv); }
input[type=checkbox]:checked::after{ transform:translateX(22px); background:var(--nv); }

/* night select grid */
/* Fixed three columns: six nights in an auto-fit grid landed as 5 + 1. */
.night-grid{ display:grid; grid-template-columns:repeat(3, 1fr); gap:8px; }
@media (max-width:380px){ .night-grid{ grid-template-columns:repeat(2, 1fr); } }
.night-cell{
  display:flex; flex-direction:column; align-items:center; gap:3px;
  padding:12px 6px;
  background:var(--panel-2);
  border:1px solid var(--panel-edge);
  color:var(--paper);
  font-family:var(--font-mono);
  cursor:pointer;
  transition:border-color 0.16s ease, background 0.16s ease;
}
.night-cell:hover:not(:disabled){ border-color:var(--nv); }
.night-cell .n{ font-family:var(--font-pixel); font-size:1.5rem; line-height:1; }
.night-cell .t{ font-size:0.6rem; letter-spacing:0.08em; color:var(--paper-dim); }
.night-cell{ min-height:64px; }
.night-cell.cleared{ border-color:var(--nv-dim); }
.night-cell.cleared .t{ color:var(--nv); }
.night-cell:disabled{ opacity:0.32; cursor:not-allowed; }

/* custom night */
.custom-grid{ display:flex; flex-direction:column; gap:14px; }
.custom-row{ display:flex; flex-direction:column; gap:4px; }
.custom-row .cr-top{ display:flex; justify-content:space-between; align-items:baseline; gap:10px; }
.custom-row .cr-name{ font-size:0.8rem; letter-spacing:0.06em; }
.custom-row .cr-val{ font-family:var(--font-pixel); font-size:1.3rem; color:var(--nv); }
.custom-row .cr-desc{ font-size:0.68rem; color:#8c9682; line-height:1.5; }

/* bestiary in the help dialog */
.bestiary{ display:flex; flex-direction:column; gap:12px; }
.beast{
  display:flex; gap:12px; align-items:flex-start;
  padding:10px;
  background:#0e110c;
  border-left:3px solid var(--panel-edge);
}
.beast .bname{ font-size:0.76rem; letter-spacing:0.1em; margin:0 0 4px; }
.beast .brule{ font-size:0.72rem !important; color:var(--paper-dim) !important; margin:0 !important; }
.beast.gunner{ border-left-color:var(--ent-gunner); }
.beast.gunner .bname{ color:var(--ent-gunner); }
.beast.shade{ border-left-color:var(--ent-shade); }
.beast.shade .bname{ color:var(--ent-shade); }
.beast.hollow{ border-left-color:var(--ent-hollow); }
.beast.hollow .bname{ color:var(--ent-hollow); }

/* key table in the help dialog */
table.keys{ width:100%; border-collapse:collapse; font-size:0.74rem; }
table.keys td{ padding:4px 0; color:var(--paper-dim); vertical-align:top; }
table.keys td:first-child{ width:110px; }
kbd{
  display:inline-block; min-width:20px;
  padding:1px 6px; margin-right:3px;
  background:var(--panel-2);
  border:1px solid var(--panel-edge); border-bottom-width:2px;
  border-radius:3px;
  font-family:var(--font-mono); font-size:0.7rem;
  color:var(--paper); text-align:center;
}

/* Portrait phones: give the office picture as much of the screen as we
   can by shrinking everything around it. */
@media (max-width:560px) and (orientation:portrait){
  :root{ --log-h:62px; }
  .log-box{ font-size:0.68rem; padding:6px 10px; }
  .controls{ gap:4px; padding:6px 6px calc(6px + var(--safe-b)); }
  .ctrl-btn{ min-height:42px; }
  .ctrl-btn b{ font-size:0.6rem; }
}

/* An action row that must stay reachable no matter how long the dialog
   body is. It sits outside .dlg-body, which is the element that scrolls. */
.dlg-actions.pinned{
  flex:0 0 auto;
  margin-top:10px;
  padding-top:10px;
  border-top:1px solid var(--panel-edge);
}


/* A locked night and a cleared night used to look identical apart from
   one word of 0.6rem text. */
.night-cell.cleared{
  border-color:var(--nv-dim);
  background:linear-gradient(to bottom, #101a12, var(--panel-2));
}
.night-cell.cleared .t{ color:var(--nv); }
.night-cell.cleared .n::after{
  content:"\2605";
  display:block; font-family:var(--font-mono);
  font-size:0.62rem; color:var(--amber); line-height:1;
}
.night-cell:disabled{
  opacity:0.4;
  border-style:dashed;
  background:#0c0d09;
}
.night-cell:disabled .n{ color:#5a6151; }

/* The custom-night presets read as stray labels next to the sliders. */
.dlg-actions .menu-btn.preset{
  border:1px solid var(--panel-edge);
  padding:6px 12px;
  font-size:0.74rem;
  color:var(--paper-dim);
  text-shadow:none;
}
.dlg-actions .menu-btn.preset:hover{ border-color:var(--nv); color:var(--nv); }