/* What the app adds on top of the website's stylesheet. */

/* phones with a notch or home indicator: keep the header and keypad clear */
#mast{padding-top:calc(11px + env(safe-area-inset-top))}
.shell{padding-bottom:env(safe-area-inset-bottom);border-left:none;border-right:none}
.modal .sheet{margin-top:env(safe-area-inset-top)}
html,body{overscroll-behavior:none}
button,.slot,.key{-webkit-user-select:none;user-select:none}
.txt{-webkit-touch-callout:none}

#casesBtn{--ic:var(--mint)}
#solvedCount{font-variant-numeric:tabular-nums;color:var(--dim);letter-spacing:.08em}

/* the second line of each tab is that section's progress, not its rules */
.modeBtn span{font-variant-numeric:tabular-nums}
.modeBtn.complete b::after{content:" \2713";color:var(--mint)}

#caseNav{display:flex;align-items:center;gap:6px;margin-top:8px}
#cPrev,#cNext{
  flex:none;width:40px;height:38px;border:1px solid var(--edge);border-radius:4px;
  background:var(--panel);color:var(--dim);font-size:18px;line-height:1;
}
#cPrev:disabled,#cNext:disabled{opacity:.35;cursor:default}
#cPick{
  flex:1;height:38px;border:1px solid var(--edge);border-radius:4px;background:var(--panel);
  font-family:var(--mono);font-size:12px;letter-spacing:.06em;color:var(--dim);
}
#cPick .car{color:var(--faint);margin-left:2px}
#cPick .st{margin-left:6px}
#cPick .st.won{color:var(--mint)}
#cPick .st.lost{color:var(--coral)}

/* ---------- case picker ---------- */
.pickSum{text-align:center;font-size:12px;letter-spacing:.06em;color:var(--dim)}
#cList{display:grid;grid-template-columns:repeat(6,1fr);gap:6px}
.cChip{
  aspect-ratio:1/1;border:1px solid var(--edge);border-radius:4px;background:var(--ground);
  font-family:var(--mono);font-size:12px;color:var(--dim);font-variant-numeric:tabular-nums;
  display:flex;align-items:center;justify-content:center;padding:0;
}
.cChip.won{border-color:color-mix(in srgb,var(--mint) 45%,transparent);color:var(--mint)}
.cChip.lost{border-color:color-mix(in srgb,var(--coral) 40%,transparent);color:var(--coral)}
.cChip.on{border-color:var(--accent);color:var(--ink);background:var(--tint);font-weight:600;
  box-shadow:inset 0 0 0 1px var(--accent)}
.cChip.next{border-style:dashed;border-color:var(--accent);color:var(--ink)}
.cChip:disabled{opacity:.28;cursor:default;border-style:dotted}

/* ---------- after a case ---------- */
#after{display:flex;flex-direction:column;gap:8px;max-width:460px;margin:12px auto 0}
#after[hidden]{display:none}
#nextCase{
  width:100%;background:var(--accent);color:var(--onAccent);border:1px solid var(--accent);border-radius:3px;
  padding:14px 0;font-family:var(--cond);font-weight:700;letter-spacing:.09em;font-size:14px;
}
#nextCase[hidden]{display:none}
#replay{
  width:100%;border:1px solid var(--edge);border-radius:3px;background:var(--panel);color:var(--dim);
  padding:11px 0;font-family:var(--cond);font-weight:700;letter-spacing:.08em;font-size:12.5px;
}

/* ---------- add to home screen (web only) ---------- */
#installBar{
  display:flex;align-items:center;gap:10px;padding:9px 12px 9px 16px;
  border-bottom:1px solid var(--edge);background:color-mix(in srgb,var(--mint) 9%,var(--panel));
  font-size:11.5px;line-height:1.45;color:var(--dim);
}
#installBar[hidden]{display:none}
#installBar b{color:var(--ink);font-weight:600}
#installMsg{flex:1}
#installBtn{
  flex:none;background:var(--mint);color:var(--onAccent);border-radius:3px;
  padding:7px 12px;font-family:var(--cond);font-weight:700;letter-spacing:.08em;font-size:12px;
}
#installBtn[hidden]{display:none}
#installX{flex:none;width:28px;height:28px;font-size:18px;color:var(--faint)}