/* =========================================================================
   AANGAN · DEV MODE (58-devmode.js) — the reporting skin
   Deliberately plain and un-Aangan: this is scaffolding for the owner and
   his testers, not part of the house. It must never be mistaken for the
   game's own UI in a screenshot, and it must sit above every overlay.
   ========================================================================= */
.devfab{position:fixed;right:10px;bottom:calc(10px + env(safe-area-inset-bottom,0px));z-index:9000;
  display:flex;align-items:center;gap:7px;padding:8px 12px;border-radius:999px;
  background:rgba(18,18,20,.92);color:#f2f2f2;font:600 12px/1 system-ui,sans-serif;
  border:1px solid rgba(255,255,255,.22);box-shadow:0 4px 14px rgba(0,0,0,.45);
  cursor:pointer;user-select:none;-webkit-user-select:none;touch-action:manipulation}
.devdot{width:9px;height:9px;border-radius:50%;background:#777;flex:0 0 9px}
.devdot.on{background:#37d67a;box-shadow:0 0 8px #37d67a}
/* naming mode is a THIRD state of the same dot — marigold, so a glance at the
   fab tells you whether the next long-press files a bug or names a thing */
.devdot.on.name{background:#f2b13d;box-shadow:0 0 8px #f2b13d}
.devcount{background:#d0342c;border-radius:999px;padding:1px 6px;font-size:11px}

.devsheet{position:fixed;inset:0;z-index:9001;background:rgba(0,0,0,.55);
  display:flex;align-items:flex-end;justify-content:center;padding:0}
.devcard{width:min(560px,100%);max-height:86vh;overflow:auto;background:#17181b;color:#eee;
  border-radius:14px 14px 0 0;padding:14px 14px calc(14px + env(safe-area-inset-bottom,0px));
  font:14px/1.45 system-ui,sans-serif;box-shadow:0 -8px 30px rgba(0,0,0,.5)}
.devhead{display:flex;align-items:center;justify-content:space-between;margin-bottom:8px;font-size:15px}
.devx{background:none;border:0;color:#bbb;font-size:18px;padding:4px 8px;cursor:pointer}
.devmeta{font-size:11px;color:#8d9199;margin-bottom:8px;word-break:break-word}
.devquote{background:#202227;border-left:3px solid #f2b13d;padding:7px 9px;border-radius:4px;
  font-size:13px;margin-bottom:8px;word-break:break-word}
.devkey{font:11px/1.3 ui-monospace,monospace;color:#f2b13d;margin-bottom:8px;word-break:break-all}
.devlbl{display:block;font-size:11px;color:#8d9199;margin:8px 0 3px}
.deven{background:#202227;padding:6px 8px;border-radius:4px;font-size:12.5px;color:#cfd3d8}
.devchips{display:flex;flex-wrap:wrap;gap:6px;margin:10px 0 8px}
.devchip{background:#202227;border:1px solid #33363d;color:#cfd3d8;border-radius:999px;
  padding:6px 11px;font-size:12px;cursor:pointer}
.devchip.on{background:#f2b13d;border-color:#f2b13d;color:#221a08;font-weight:700}
.devnote,.devfix{width:100%;background:#202227;border:1px solid #33363d;color:#eee;border-radius:6px;
  padding:8px;font:13px/1.4 system-ui,sans-serif;resize:vertical}
.devrow{display:flex;align-items:center;gap:10px;margin:9px 0 4px}
.devshot{background:#202227;border:1px dashed #4a4e57;color:#cfd3d8;border-radius:6px;
  padding:8px 11px;font-size:12.5px;cursor:pointer}
.devshotname{font-size:11px;color:#37d67a}
.devshotname.err{color:#ff6b6b}
.devacts{display:flex;gap:8px;justify-content:flex-end;margin-top:12px}
.devbtn{background:#f2b13d;color:#221a08;border:0;border-radius:7px;padding:10px 16px;
  font:700 13px system-ui,sans-serif;cursor:pointer}
.devbtn:disabled{opacity:.45;cursor:not-allowed}
.devbtn.ghost{background:#202227;color:#cfd3d8;border:1px solid #33363d}
.devlist{max-height:44vh;overflow:auto;margin:4px 0}
.devitem{border-bottom:1px solid #26282d;padding:8px 2px;display:grid;gap:2px}
.devitem b{font-size:12.5px;color:#f2b13d}
.devitem span{font-size:11px;color:#8d9199}
.devitem i{font-size:12.5px;color:#cfd3d8;font-style:normal}
.devitem em{font-size:11px;color:#37d67a;font-style:normal}
@media (prefers-reduced-motion: reduce){.devfab,.devcard{transition:none}}

/* THE REPORT BUTTON, ON EVERY SCREEN (owner 2026-08-12, "at least for the
   initial days").

   A THIN TAB ON THE LEFT EDGE, AND EVERY NUMBER HERE WAS MEASURED. The first
   two attempts were wrong and the harness caught both:
     · bottom-left "measured clear" — but that probe never reached a dealt
       hand (it ran scenes in sequence, so the rules overlay was up and the
       game never started). From a fresh page it sits on #hand, i.e. on the
       player's own cards.
     · mid-left, as a 44px circle, clips `seat t1` at 390 AND 360.
   Then all seven fixed positions were tested against courtyard, shop,
   profile, rules and live 4- and 6-seat tables at both widths: NOT ONE was
   clean. This app is too dense for a floating circle.

   An edge tab is, because it lives in the margin every layout already
   leaves. Widths were then walked up until one broke: 26, 30, 34 and 38 are
   all clear; 44 clips a seat at 360. So 38x64 — the largest tappable tab
   this app has room for. Below the 44px square the audit asks for, and that
   is the honest trade: a wider target would cover a seat, and edge-anchored
   controls are the one case where a narrow target is still easy to hit
   because the screen edge stops your thumb for you. */
#bugFab{position:fixed;left:0;top:50%;transform:translateY(-50%);
  z-index:8999;width:38px;height:64px;border-radius:0 13px 13px 0;
  display:flex;align-items:center;justify-content:center;
  background:rgba(32,20,10,.58);border:1px solid rgba(255,235,200,.30);border-left:0;
  box-shadow:0 3px 10px rgba(0,0,0,.32);cursor:pointer;padding:0 3px 0 0;
  -webkit-tap-highlight-color:transparent;touch-action:manipulation;
  transition:background .15s, transform .15s}
#bugFab svg{width:20px;height:20px;fill:none;stroke:rgba(255,238,208,.9);
  stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
#bugFab svg path:nth-child(2){fill:rgba(255,238,208,.14)}
#bugFab:active{transform:translateY(-50%) scale(.94);background:rgba(32,20,10,.85)}
@media (prefers-reduced-motion: reduce){#bugFab{transition:none}}
/* THE KODI BOARD PUTS A SEAT NAME AT THE MIDDLE OF ITS LEFT EDGE (2026-09-10),
   which is exactly where this tab is pinned — they overlapped by half the chip
   the moment the chips moved off the play field and into the mat band. The tab
   is free to sit anywhere down that edge; the chip is not, because it marks
   which side of the board that player is sitting on. So the tab moves.
   Scoped with :has() to the Kodi table only (chit.css already relies on :has()
   for this same element), so every other screen keeps the tab where it was. */
body:has(#kdFrame) #bugFab{top:76%}
body:has(#kdFrame) #bugFab:active{transform:translateY(-50%) scale(.94)}