/* Besura · Minesweeper — the page. The 98 chrome comes from /98/kit/k98.css */
html,body{margin:0;height:100%;background:#0e7c7b}
body.bz{overflow:hidden;overscroll-behavior:none}
.bz-desk{bottom:var(--k98-bar);bottom:calc(var(--k98-bar) + env(safe-area-inset-bottom));display:flex;align-items:center;justify-content:center;padding-bottom:8px}
.bz-edge{position:fixed;inset:0;z-index:25;pointer-events:none;border:7px solid var(--edge,transparent);display:none}
.bz-edge.on{display:block}

/* ---------- the window ---------- */
.bz-win{max-height:100%;min-width:min(340px,100%)}
.bz-win .k98-title{margin:0;font-size:inherit}
.bz-body{display:flex;flex-direction:column;min-height:0;flex:1 1 auto;padding:6px 6px 3px}
.bz-top{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:6px 8px;margin-bottom:6px;flex:none}
.bz-face{min-width:0;width:48px;height:48px;padding:0;flex:none}
.bz-face:active{padding:2px 0 0 2px}
.bz-face svg{width:34px;height:34px}
.bz-face .f-oh,.bz-face .f-dead,.bz-face .f-won{display:none}
.bz-face.face-oh .f-smile{display:none}.bz-face.face-oh .f-oh{display:inline}
.bz-face.face-dead .f-eyes,.bz-face.face-dead .f-smile{display:none}.bz-face.face-dead .f-dead{display:inline}
.bz-face.face-won .f-eyes,.bz-face.face-won .f-smile{display:none}.bz-face.face-won .f-won{display:inline}
@media (pointer:fine) and (min-width:900px){.bz-face{width:40px;height:40px}.bz-face svg{width:28px;height:28px}}

/* ---------- the field ---------- */
.bz-field{flex:1 1 auto;min-height:0;min-width:0;overflow:auto;padding:3px;display:flex;background:#c3c3c3;-webkit-overflow-scrolling:touch;overscroll-behavior:contain}
.bz-grid{--cs:28px;margin:auto;display:grid;grid-template-columns:repeat(var(--cols,9),var(--cs));grid-auto-rows:var(--cs);
  touch-action:pan-x pan-y;user-select:none;-webkit-user-select:none;-webkit-touch-callout:none;flex:none}
.bz-grid:not(.ready){display:block;width:auto;flex:1 1 auto;min-width:0;max-width:36em;padding:12px 10px;margin:0;touch-action:auto;user-select:text;-webkit-user-select:text}
.bz-intro p{margin:0 0 .7em;line-height:1.4}
.bz-c{position:relative;width:var(--cs);height:var(--cs);display:grid;place-items:center;font-family:var(--k98-digits);font-size:calc(var(--cs) * .72);line-height:1;
  background:#c3c3c3;cursor:default;--bv:max(2px,calc(var(--cs) / 11))}
.bz-c.closed{box-shadow:inset calc(-1 * var(--bv)) calc(-1 * var(--bv)) #838383,inset var(--bv) var(--bv) #fff}
.bz-c.closed.press{box-shadow:inset 1px 1px #838383}
.bz-c.open{box-shadow:inset 1px 1px #8d8d8d}
.bz-c.open.n{cursor:pointer}
.bz-c svg{width:78%;height:78%;display:block}
.bz-c.boom{background:#f0281c}
.bz-c.tint{background:color-mix(in srgb,var(--dc) 26%,#c3c3c3)}
.bz-c .q{font-size:.95em;color:#0b0b0b}
.bz-c .note{font-size:.7em;color:#6f6f6f;font-weight:400}
.bz-c.heard .note{color:#2c2c2c}
.bz-c .pen{color:#4d4d4d;font-weight:400;font-style:italic;font-size:.82em;border-bottom:2px solid #7d7d7d;line-height:.95}
.bz-c.hinted{background:#e7dcb6}
.bz-c.sel{outline:2px dotted #0b1f78;outline-offset:-3px;z-index:1}
.bz-c.by{box-shadow:inset 1px 1px #8d8d8d,inset 0 -3px 0 var(--by)}
.bz-c.wrong::after{content:"";position:absolute;inset:18%;background:linear-gradient(45deg,transparent 44%,#e0180e 44% 56%,transparent 56%),linear-gradient(-45deg,transparent 44%,#e0180e 44% 56%,transparent 56%)}
.bz-c:focus-visible{outline:2px solid #0b1f78;outline-offset:-2px;z-index:2}
.bz-c.flash{animation:bz-flash .5s ease-out}
@keyframes bz-flash{0%{filter:brightness(1.35)}100%{filter:none}}
.bz-grid.zoomed{touch-action:pan-x pan-y}

/* ---------- rail (players) ---------- */
.bz-rail{display:flex;flex-wrap:wrap;gap:4px;margin:0 0 6px;flex:none}
.bz-rail:empty{display:none}
.bz-pl{display:inline-flex;align-items:center;gap:6px;padding:3px 8px;min-height:32px;font-size:.92em;background:#c3c3c3;
  box-shadow:inset -1px -1px #fff,inset 1px 1px #838383}
.bz-pl i{width:12px;height:12px;flex:none;background:var(--c);box-shadow:inset -1px -1px rgba(0,0,0,.35)}
.bz-pl b{font-variant-numeric:tabular-nums}
.bz-pl.turn{background:#0b1f78;color:#fff;box-shadow:none}
.bz-pl.out{color:#6f6f6f;text-decoration:line-through}
.bz-pl.me{font-weight:700}
.bz-pl .k98-btn{min-height:28px;min-width:0;padding:0 8px}

/* ---------- pencil + tools ---------- */
.bz-pencil{display:flex;align-items:center;gap:4px;flex-wrap:wrap;margin:6px 0 0;flex:none}
.bz-pencil[hidden]{display:none}
.bz-pencil span{margin-right:4px}
.bz-pencil .k98-btn{min-width:44px;padding:0 6px}
.bz-tools{display:flex;gap:4px;margin:6px 0 0;flex:none;flex-wrap:wrap}
.bz-tools:not(.any){display:none}
.bz-tool{flex:1 1 0;min-width:0;padding:0 8px}
.bz-tool[hidden]{display:none}
.bz-tool span{overflow:hidden;text-overflow:ellipsis}
.k98-status{flex:none}
/* the field alone decides how wide the window is */
.bz-win .k98-status,.bz-rail,.bz-tools,.bz-pencil{contain:inline-size}
#mode-cell{max-width:48%}
@media (max-width:559px){#mode-cell{display:none}}
.bz-big.word{font-family:var(--k98-font);font-size:2em}

/* ---------- phones and small windows: the window fills the screen ---------- */
@media (max-width:699px),(max-height:560px){
  .bz-desk{padding:0;padding-top:env(safe-area-inset-top)}
  .bz-win{position:absolute;inset:0;max-height:none;width:auto}
  .bz-field{padding:2px}
}
/* a landscape phone: the counters sit beside the menus, the taskbar steps aside while playing */
@media (max-height:500px){
  .bz-body{padding:3px}
  .bz-top{padding:2px 6px;margin-bottom:3px}
  .bz-face{width:44px;height:40px}.bz-face svg{width:30px;height:30px}
  .k98-led svg{width:12px;height:20px}
  .k98-status{display:none}
  body.bz-live .k98-taskbar{display:none}
  body.bz-live .bz-desk{bottom:0}
  .bz-win .k98-titlebar{min-height:32px}
  .k98-menubar .k98-menu{min-height:36px}
}
/* the counters and the tools side by side with the field when a phone lies down */
@media (max-height:500px) and (min-width:640px){
  .bz-body{display:grid;grid-template-columns:minmax(0,1fr) 164px;grid-template-rows:auto auto auto minmax(0,1fr);column-gap:6px;align-content:start}
  .bz-top{grid-column:2;grid-row:1;padding:3px;gap:2px;margin-bottom:4px}
  .bz-top .k98-led svg{width:11px;height:19px}
  .bz-rail{grid-column:1;grid-row:1}
  .bz-field{grid-column:1;grid-row:1 / span 4}
  .bz-rail:not(:empty)~.bz-field{grid-row:2 / span 3}
  .bz-tools{grid-column:2;grid-row:2;display:grid;grid-template-columns:1fr 1fr;margin:0;gap:3px;align-self:start}
  .bz-tool{padding:0 4px}
  .bz-tool svg{display:none}
  .bz-pencil{grid-column:2;grid-row:3;display:grid;grid-template-columns:repeat(3,1fr);gap:3px;align-self:start;margin-top:4px}
  .bz-pencil span{grid-column:1 / -1;margin:0}
  .bz-pencil .k98-btn{min-width:0}
}

/* ---------- dialogs ---------- */
.bz-setup{width:min(560px,100%)}
.bz-setup .k98-group{margin-top:14px}
.bz-choices{display:grid;grid-template-columns:1fr;gap:0 10px}
@media (min-width:560px){.bz-choices.three{grid-template-columns:repeat(3,1fr)}}
.bz-choices .k98-radio{align-items:flex-start;padding:6px 0}
.bz-choices .k98-radio i{margin-top:2px}
/* short screens: Begin always in reach, the small print steps aside */
@media (max-height:500px){
  .bz-setup .k98-row{position:sticky;bottom:-10px;background:var(--k98-face);margin:8px -12px -10px;padding:8px 12px 10px;box-shadow:0 -1px var(--k98-shade)}
  .bz-choices .k98-radio small{display:none}
  .bz-setup .k98-group{margin-top:10px;padding-top:10px;padding-bottom:4px}
  .bz-choices .k98-radio{padding:0}
}
/* phones: three choices side by side, the dot above the word, Begin always in reach */
@media (max-width:559px){
  .bz-setup .k98-group{padding:12px 6px 6px;margin-top:12px}
  .bz-choices.three{display:flex;justify-content:space-between;gap:4px}
  .bz-choices.three .k98-radio{flex-direction:column;align-items:center;text-align:center;gap:4px;padding:4px 2px;min-width:0;flex:1 1 auto}
  .bz-choices.three .k98-radio i{margin:0}
  .bz-choices.three .k98-radio small{display:none}
  .bz-setup .k98-row{position:sticky;bottom:-10px;background:var(--k98-face);margin:8px -12px -10px;padding:8px 12px 10px;box-shadow:0 -1px var(--k98-shade)}
  .bz-setup .k98-row .k98-btn{flex:1}
  .bz-sub{margin-left:0 !important}
}
.bz-sub{margin:4px 0 0 28px}
.bz-sub[hidden]{display:none}
.bz-names{display:grid;grid-template-columns:repeat(auto-fill,minmax(130px,1fr));gap:6px;margin-top:6px}
.bz-count{display:flex;align-items:center;gap:8px}
.bz-count .k98-btn{min-width:44px;padding:0}
.bz-count output{min-width:1.5em;text-align:center;font-weight:700}
.bz-online{display:grid;gap:8px}
.bz-online form{display:flex;gap:6px}
.bz-online .k98-field{flex:1}
.bz-note{min-height:1.3em;color:#8a2413;margin:4px 0 0}
.bz-more summary{cursor:pointer;min-height:var(--k98-ctl);display:flex;align-items:center;gap:6px}
.bz-more summary::before{content:"";border:5px solid transparent;border-left:6px solid currentColor;border-right:0}
.bz-more[open] summary::before{transform:rotate(90deg)}
.bz-big{font-family:var(--k98-digits);font-size:2.4em;line-height:1;margin:.1em 0 .25em}
.bz-table{width:100%;border-collapse:collapse;margin:6px 0;background:#fff;box-shadow:inset -1px -1px #fff,inset 1px 1px #838383}
.bz-table th,.bz-table td{text-align:left;padding:5px 8px;border-bottom:1px solid #dcdcdc;vertical-align:middle}
.bz-table th{font-weight:700;background:#e4e4e4}
.bz-table .n{text-align:right;font-variant-numeric:tabular-nums}
.bz-table i{display:inline-block;width:12px;height:12px;margin-right:6px;vertical-align:-1px}
.bz-table .k98-btn{min-width:44px;min-height:36px;padding:0 8px}
.bz-chords td:nth-child(2){font-weight:700;white-space:nowrap}
.bz-podium{display:flex;align-items:flex-end;justify-content:center;gap:6px;margin:10px 0 6px}
.bz-step{flex:1;max-width:150px;display:flex;flex-direction:column;align-items:center;gap:4px;text-align:center;min-width:0}
.bz-step .nm{font-weight:700;overflow-wrap:anywhere;display:flex;align-items:center;gap:5px}
.bz-step .nm i{width:12px;height:12px;flex:none;background:var(--c)}
.bz-step small{color:#3c3c3c}
.bz-step .blk{width:100%;display:grid;place-items:center;font-size:1.6em;font-weight:700;color:#fff;background:var(--c);text-shadow:1px 1px 0 #0b0b0b;
  box-shadow:inset -2px -2px rgba(0,0,0,.35),inset 2px 2px rgba(255,255,255,.45)}
.bz-step.p1 .blk{height:84px}.bz-step.p2 .blk{height:58px}.bz-step.p3 .blk{height:40px}
.bz-rest{margin:4px 0 0;padding-left:1.4em}
.bz-pass{text-align:center}
.bz-pass .who{font-size:2em;font-weight:700;margin:.1em 0;color:var(--c)}
.bz-pass .sw{height:10px;background:var(--c);margin:0 0 10px}
.bz-dialog-wide{width:min(620px,100%)}

/* the room lobby card, re-dressed for 98 */
.k98 .nsmr-lobby{--nsmr-ink:#0b0b0b;--nsmr-dim:#3c3c3c;--nsmr-gold:#0b1f78;--nsmr-card:transparent;background:none;border:0;box-shadow:none;padding:0;border-radius:0;color:var(--k98-ink)}
.k98 .nsmr-word{font-family:var(--k98-font);letter-spacing:.18em;color:#0b1f78;font-size:clamp(2.4rem,12vw,3.6rem)}
.k98 .nsmr-btn{font-family:var(--k98-font);font-weight:400;border-radius:0;border:0;color:var(--k98-ink);background:var(--k98-face);min-height:44px;padding:4px 16px;
  box-shadow:inset -1px -1px var(--k98-dark),inset 1px 1px var(--k98-lite),inset -2px -2px var(--k98-shade),inset 2px 2px var(--k98-hi)}
.k98 .nsmr-btn.ghost{background:var(--k98-face);color:var(--k98-ink)}
.k98 .nsmr-btn:not(.ghost){outline:1px solid var(--k98-dark);outline-offset:-1px;font-weight:700}
.k98 .nsmr-btn:disabled{color:var(--k98-shade)}
.k98 .nsmr-people li{border-radius:0;background:#fff;box-shadow:inset -1px -1px #fff,inset 1px 1px #838383}
.k98 .nsmr-people li i{border-radius:0}
.k98 .nsmr-people li small{border-radius:0;border-color:#838383;color:#3c3c3c}
.k98 .nsmr-status{background:#ffffe1;color:#0b0b0b;border-radius:0;box-shadow:inset -1px -1px #0b0b0b,inset 1px 1px #fff;font-family:var(--k98-font)}