/* The game's own yes/no box (src/uiask.js), in the room's look (room.css):
   a night-navy shade over the screen, a window with the question on a title
   bar in the club's colour, the figures as solid rows and two chunky
   buttons. Solid colour only; works at 375 wide. */
.uiask {
  position: fixed; inset: 0; z-index: 9500; display: grid; place-items: center; padding: 16px;
  background: rgba(7, 13, 28, .84);
}
.uiask .box {
  width: min(460px, 100%); max-height: calc(100vh - 32px); max-height: calc(100dvh - 32px);
  display: flex; flex-direction: column; overflow: hidden;
  background: var(--win); color: #fff; border: 2px solid #fff; border-radius: 0; box-shadow: var(--frame), var(--drop);
}
.uiask h3 {
  margin: 0; padding: 9px 14px 7px; background: var(--tm); color: var(--on-tm); border-bottom: 3px solid var(--ink);
  box-shadow: inset 0 3px 0 0 var(--tm-hi), inset 0 -3px 0 0 var(--tm-dk);
  font-family: var(--disp); font-weight: 400; font-size: 30px; line-height: 1; letter-spacing: .5px;
  text-transform: uppercase; text-shadow: 2px 2px 0 var(--tm-sh); overflow-wrap: anywhere;
}
.uiask .tx { margin: 0; padding: 12px 14px 0; font: 800 15px/1.4 var(--sans); }
.uiask .rows { padding: 10px 11px 0; display: grid; gap: 4px; overflow-y: auto; }
.uiask .r {
  display: flex; justify-content: space-between; align-items: center; gap: 10px;
  margin: 3px; padding: 6px 10px; background: var(--card); color: var(--card-ink); box-shadow: var(--frame);
  font: 800 13px/1.3 var(--sans); --soft: var(--card-ink); --txt-2: var(--card-ink); --txt-3: var(--card-ink);
}
.uiask .r b { font-family: var(--disp); font-weight: 400; font-size: 24px; line-height: 1; white-space: nowrap; }
.uiask .r.bad { background: var(--bad); color: #fff; }
.uiask .r.good { background: var(--good); color: #fff; }
.uiask .r.gold { background: var(--gold); color: var(--ink); }
.uiask .a { display: flex; justify-content: flex-end; gap: 10px; padding: 14px; flex-wrap: wrap; }
.uiask .cbtn { background: #fff; color: var(--ink); }
.uiask .cbtn.red { background: var(--bad); color: #fff; box-shadow: inset 0 -4px 0 0 var(--red-dk); }
.uiask .cbtn.gold { background: var(--gold); color: var(--ink); }
.uiask .cbtn.tm { background: var(--tm); color: var(--on-tm); }
.uiask .cbtn.ink { background: var(--ink-2); color: #fff; }
.uiask .cbtn:hover { background: var(--gold); color: var(--ink); }
.uiask .cbtn:focus-visible { outline: none; box-shadow: inset 0 0 0 3px var(--gold); }
.uiask .cbtn.gold:focus-visible { box-shadow: inset 0 0 0 3px var(--ink); }
@media (max-width: 420px) {
  .uiask { padding: 12px; }
  .uiask h3 { font-size: 26px; }
  .uiask .a .cbtn { flex: 1 1 auto; justify-content: center; }
  .uiask .r b { font-size: 21px; }
}