/* ============================================================
   CasinoDrop Sidebar — /verify "console" layout
   ------------------------------------------------------------
   Three panes: picker, form, answer. The answer pane is sticky,
   so the inputs and the result are on screen together and the
   whole tool fits one laptop screen.

   Loaded after the parent's verifier.css. The controller is
   still the parent's app.js — this file only re-lays-out and
   re-skins the markup it emits, so hash routing, the bet strip,
   range scans, finders and the a11y wiring all keep working.
   ============================================================ */

/* ---------- Utilities ---------- */
/* `.pf-sr` lives in the parent's verifier.css — app.js emits it on the locked
   templates too, so it cannot live in this page-only stylesheet. */

.pf-skip{
  position:absolute;left:12px;top:-64px;z-index:120;
  padding:11px 18px;border-radius:0 0 var(--r) var(--r);
  background:var(--violet);color:#fff;font-weight:600;font-size:14px;
  text-decoration:none;transition:top .18s var(--ease);
}
.pf-skip:focus{top:0;color:#fff}

/* Every interactive part of the tool gets the same visible ring. */
.pf-cas:focus-visible,.pf-game:focus-visible,.pf-btn:focus-visible,
.pf-pick:focus-visible,.pf-copy:focus-visible,.pf-pill:focus-visible,
.pf-navbtn:focus-visible,.pf-stepbtn:focus-visible,.pf-mini:focus-visible,
.pf-faq summary:focus-visible,.pf-more a:focus-visible,.pf-row:focus-visible{
  outline:2px solid var(--cyan);outline-offset:2px;border-radius:var(--r-sm);
}
.pf-input:focus-visible,.pf-search input:focus-visible{
  outline:2px solid var(--cyan);outline-offset:1px;
}
#pf-app:focus,#pf-panel:focus,.pf-error:focus{outline:none}

/* ============================================================
   1. Title bar — replaces the old 334px hero
   ============================================================ */

/* Title bar + casino strip travel together as one sticky block, so the panes
   below can pin to a constant offset. Its height is measured into --pf-top-h by
   verify-console.js — the fallback below is only used for the first paint. */
.pf-top{
  position:sticky;top:var(--top-h);z-index:29;background:var(--bg-2);
  border-bottom:1px solid var(--line);
}
.pf-bar{border-bottom:1px solid var(--line)}
.pf-bar .wrap{
  display:flex;align-items:center;gap:8px 20px;flex-wrap:wrap;padding-block:13px;
}
.pf-bar h1{
  font-size:clamp(19px,1.9vw,23px);letter-spacing:-.02em;line-height:1.2;
  display:flex;align-items:center;gap:11px;margin:0;
}
.pf-bar h1 svg{width:20px;height:20px;flex:none;color:var(--cyan)}
.pf-bar__sub{
  font-size:13.5px;color:var(--dim);align-self:center;
  padding-left:20px;border-left:1px solid var(--line-2);
}
.pf-bar__sub b{color:var(--text-2);font-weight:600}

.pf-keys{display:flex;gap:14px;margin-left:auto;font-size:12px;color:var(--dim)}
.pf-keys span{display:inline-flex;align-items:center;gap:6px;white-space:nowrap}
.pf-keys kbd{
  font-family:var(--font-mono);font-size:11px;padding:2px 6px;border-radius:5px;
  background:var(--surface-2);border:1px solid var(--line-2);border-bottom-width:2px;color:var(--text-2);
}

/* ---------- Casino strip ---------- */

/* 23 casinos do not fit one row. Favourites pin to the front, the row shows as
   many as genuinely fit, and the remainder live in the "More casinos" menu —
   nothing is ever clipped off the edge with no way to reach it. */
.pf-casbar .wrap{display:flex;align-items:center;gap:14px;padding-block:9px}
.pf-casbar__l{
  flex:none;font-size:12px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--dim);font-weight:600;
}
.pf-casinos{
  /* the parent's .pf-casinos wraps — that is what made this three rows deep */
  display:flex;flex-wrap:nowrap;gap:6px;margin:0;flex:1;min-width:0;align-items:center;
}

.pf-casw{
  flex:none;display:flex;align-items:center;border-radius:999px;
  background:var(--surface);border:1px solid var(--line);transition:.14s;
}
.pf-casw[hidden]{display:none}
.pf-casw:hover{border-color:var(--line-2)}
.pf-casw.is-on{
  border-color:var(--accent);
  background:color-mix(in srgb,var(--accent) 14%,var(--surface));
}
.pf-casbar .pf-cas{
  display:flex;align-items:center;gap:7px;padding:7px 3px 7px 12px;
  background:none;border:0;border-radius:999px 0 0 999px;
  color:var(--muted);font-size:13px;font-weight:500;cursor:pointer;white-space:nowrap;
}
.pf-casbar .pf-cas::before{
  content:"";width:7px;height:7px;border-radius:50%;flex:none;
  background:var(--accent);opacity:.55;transition:opacity .14s;
}
.pf-casw:hover .pf-cas{color:var(--text)}
.pf-casbar .pf-cas.is-on{color:var(--text);font-weight:600;background:none}
.pf-casbar .pf-cas.is-on::before{opacity:1}
.pf-casbar .pf-cas__name{font-family:var(--font-body);font-size:13px;font-weight:inherit;color:inherit}
.pf-casbar .pf-cas.is-on .pf-cas__name{color:inherit}
.pf-casbar .pf-cas__n{
  padding:0;border:0;background:none;
  font-family:var(--font-mono);font-size:12px;font-weight:500;color:var(--dim);
}
.pf-casbar .pf-cas.is-on .pf-cas__n{color:var(--accent)}

/* Star: always present so it works on touch, but quiet until it means something. */
.pf-fav{
  flex:none;display:grid;place-items:center;padding:7px 10px 7px 4px;
  background:none;border:0;cursor:pointer;color:var(--dim);opacity:.45;transition:.14s;
}
.pf-fav svg{width:13px;height:13px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linejoin:round}
.pf-fav:hover{opacity:1;color:var(--gold)}
.pf-fav.is-fav{opacity:1;color:var(--gold)}
.pf-fav.is-fav svg{fill:currentColor}
.pf-casw.is-fav{border-color:color-mix(in srgb,var(--gold) 40%,transparent)}
.pf-casw.is-fav.is-on{border-color:var(--accent)}

/* --- "More casinos" --- */
.pf-morewrap{position:relative;flex:none}
.pf-morewrap[hidden]{display:none}
.pf-morebtn{
  display:flex;align-items:center;gap:7px;padding:7px 12px;border-radius:999px;
  background:var(--surface-2);border:1px dashed var(--line-2);color:var(--muted);
  font-size:12.5px;cursor:pointer;white-space:nowrap;transition:.14s;
}
.pf-morebtn:hover{color:var(--text);border-color:var(--cyan);border-style:solid}
.pf-morebtn b{
  font-family:var(--font-mono);font-size:12px;font-weight:600;color:var(--cyan);
}
.pf-morebtn svg{width:13px;height:13px;transition:transform .18s}
.pf-morewrap.is-open .pf-morebtn{color:var(--text);border-color:var(--cyan);border-style:solid}
.pf-morewrap.is-open .pf-morebtn svg{transform:rotate(180deg)}

.pf-morepop{
  position:absolute;right:0;top:calc(100% + 8px);z-index:60;
  width:min(420px,86vw);padding:6px;border-radius:14px;
  background:var(--surface);border:1px solid var(--line-2);box-shadow:var(--shadow);
}
.pf-morepop[hidden]{display:none}
.pf-morepop__h{
  display:flex;align-items:baseline;gap:9px;flex-wrap:wrap;padding:9px 10px 8px;
  font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:var(--dim);font-weight:600;
}
.pf-morepop__h span{letter-spacing:0;text-transform:none;font-weight:400;font-size:12px}
.pf-morepop__list{
  max-height:min(52vh,420px);overflow-y:auto;scrollbar-width:thin;
  display:grid;grid-template-columns:1fr 1fr;gap:2px;
}
.pf-morepop__list::-webkit-scrollbar{width:8px}
.pf-morepop__list::-webkit-scrollbar-thumb{background:var(--surface-3);border-radius:8px}

.pf-morerow{display:flex;align-items:center;border-radius:9px;transition:background .13s}
.pf-morerow:hover{background:var(--surface-2)}
.pf-morerow.is-on{background:color-mix(in srgb,var(--accent) 14%,transparent)}
.pf-morepick{
  flex:1;min-width:0;display:flex;align-items:center;gap:9px;padding:9px 4px 9px 10px;
  background:none;border:0;color:var(--text-2);font-size:13.5px;text-align:left;cursor:pointer;
}
.pf-morepick i{width:7px;height:7px;border-radius:50%;flex:none;background:var(--accent)}
.pf-morepick span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pf-morepick b{
  margin-left:auto;font-family:var(--font-mono);font-size:12px;font-weight:500;color:var(--dim);
}
.pf-morerow.is-on .pf-morepick{color:var(--text);font-weight:600}
.pf-morerow .pf-fav{padding:9px 10px 9px 4px}


/* ============================================================
   2. The three panes
   ============================================================ */

/* Both themes set `overflow-x:hidden` on <body>, which makes the used value of
   overflow-y `auto` — body becomes a scroll container, and every position:sticky
   inside it resolves against a box that never scrolls, so the panes just scroll
   away. `clip` does the same job (stop sideways overflow) without creating a
   scroll container. Scoped to this page, and if a browser is too old to know
   `clip` it simply falls back to the existing `hidden`: the panes stop sticking,
   nothing else changes. */
body.cd-verify{overflow-x:clip}

/* Everything fixed above the panes: the site top bar plus the title bar.
   verify-console.js measures the title bar into --pf-bar-h on load and resize. */
.pf-console{--pf-chrome:calc(var(--top-h) + var(--pf-top-h,124px))}

/* Logged in, WordPress pins a 32px admin bar over the top of the viewport, so a
   full-height pane runs 32px past the bottom of the screen. */
.admin-bar .pf-console{--pf-chrome:calc(var(--top-h) + var(--pf-top-h,124px) + 32px)}
@media(max-width:782px){
  .admin-bar .pf-console{--pf-chrome:calc(var(--top-h) + var(--pf-top-h,124px) + 46px)}
}

/* The parent sets `section.band{padding:clamp(46px,6vw,86px) 0}` — (0,1,1), so a
   bare `.pf-console` loses to it. Two classes settle it without an !important. */
.pf-app.pf-console{padding:0}

.pf-console > .wrap{
  max-width:none;padding:0;
  display:grid;grid-template-columns:264px minmax(0,1fr) 430px;align-items:start;
}
.pf-console > .wrap > *{min-width:0}

/* --- pane 1: picker --- */
.pf-console .pf-picker{
  position:sticky;top:var(--pf-chrome);height:calc(100vh - var(--pf-chrome));
  display:flex;flex-direction:column;padding:0;border:0;border-right:1px solid var(--line);
  border-radius:0;background:var(--bg-2);max-height:none;overflow:visible;
}

/* The "Game" bar only exists below 1024px (see the dropdown block). On desktop
   the wrapper dissolves, so the search box and the list stay direct flex
   children of the rail exactly as before. */
.pf-picker__toggle{display:none}
.pf-picker__menu{display:contents}

.pf-console .pf-search{margin:0;padding:11px 13px}
.pf-console .pf-search input{
  padding:9px 11px 9px 33px;border-radius:9px;background:var(--surface);
  border:1px solid var(--line);font-size:13.5px;
}
.pf-console .pf-search svg{left:24px;width:14px;height:14px}
.pf-console .pf-search kbd{
  position:absolute;right:24px;top:50%;transform:translateY(-50%);
  font-family:var(--font-mono);font-size:11px;padding:2px 6px;border-radius:5px;
  background:var(--surface-2);border:1px solid var(--line-2);color:var(--dim);pointer-events:none;
}
.pf-console .pf-search input:focus + kbd,
.pf-console .pf-search input:not(:placeholder-shown) + kbd{opacity:0}

.pf-console #pf-games{flex:1;overflow-y:auto;padding:0 9px 14px;scrollbar-width:thin}
.pf-console #pf-games::-webkit-scrollbar{width:8px}
.pf-console #pf-games::-webkit-scrollbar-thumb{background:var(--surface-3);border-radius:8px}

.pf-console .pf-cat{margin-bottom:2px}
.pf-console .pf-cat__h{
  font-size:12px;letter-spacing:.14em;padding:13px 6px 6px;
  position:sticky;top:0;background:var(--bg-2);z-index:1;
}
.pf-console .pf-game{
  padding:7px 9px;border-radius:8px;font-size:13.5px;gap:9px;cursor:pointer;
}
.pf-console .pf-game svg{width:15px;height:15px}
.pf-console .pf-game.is-on{box-shadow:none;background:color-mix(in srgb,var(--accent) 15%,transparent)}

/* --- pane 2: the form --- */
.pf-console .pf-main{padding:22px var(--pad) 60px;gap:16px}
.pf-console .pf-card{background:none;border:0;border-radius:0}

.pf-console .pf-head{padding:0}
.pf-console .pf-head__ico{width:40px;height:40px;border-radius:11px}
.pf-console .pf-head__ico svg{width:20px;height:20px}
.pf-console .pf-head h2{font-size:clamp(19px,1.9vw,21px)}
.pf-console .pf-head p{font-size:15px;line-height:1.65;color:var(--muted);max-width:70ch}
.pf-console .pf-chips{margin-top:13px}
.pf-console .pf-chip{background:var(--surface);border:1px solid var(--line)}

.pf-console .pf-form{
  margin-top:22px;padding:20px;background:var(--surface);
  border:1px solid var(--line);border-radius:var(--r-lg);
}
.pf-console .pf-fields{grid-template-columns:repeat(2,minmax(0,1fr));gap:15px 18px}
.pf-console .pf-f--2{grid-column:span 1}
.pf-console .pf-f--wide{grid-column:1/-1}
.pf-console .pf-f__hint{font-size:14px;line-height:1.6}
.pf-console .pf-input{font-size:14.5px}
.pf-console .pf-input::placeholder{color:var(--dim);opacity:.7}
.pf-console .pf-req{color:var(--pink)}

.pf-console .pf-commit{
  margin:16px 0 0;padding:14px 15px;border-radius:var(--r);
  background:var(--bg-2);border:1px dashed var(--line-2);
}
.pf-console .pf-commit .pf-f__label{display:flex;align-items:center;gap:9px;margin-bottom:4px}
.pf-opt{
  font-size:12px;font-weight:600;letter-spacing:.09em;text-transform:uppercase;
  padding:2px 7px;border-radius:999px;border:1px solid var(--line-2);color:var(--dim);
}
.pf-console .pf-commit .pf-f__hint{display:block;margin-bottom:11px;font-size:14px;line-height:1.6;max-width:78ch}
.pf-console .pf-commit .pf-input{width:100%}
.pf-commit__out{margin-top:11px;font-size:14px;line-height:1.6}
.pf-commit__out:empty{display:none}
.pf-commit__out.is-idle{color:var(--muted)}
.pf-commit__out.is-match{
  padding:11px 13px;border-radius:var(--r);color:var(--up);
  background:rgba(46,212,127,.09);border:1px solid rgba(46,212,127,.28);
}
.pf-commit__out.is-fail{
  padding:11px 13px;border-radius:var(--r);color:#FF9BAE;
  background:rgba(255,84,112,.08);border:1px solid rgba(255,84,112,.28);
}
.pf-commit__out.is-match b,.pf-commit__out.is-fail b{display:block;margin-bottom:4px}
.pf-commit__out.is-fail span{display:block;color:var(--text-2);font-size:12.5px}
.pf-commit__out code{
  display:block;margin:6px 0 9px;padding:7px 9px;border-radius:6px;
  background:rgba(0,0,0,.3);font-size:12px;line-height:1.5;
  color:var(--text-2);word-break:break-all;
}

.pf-console .pf-actions{margin-top:20px;gap:10px}
.pf-console .pf-btn{border-radius:10px;cursor:pointer}
.pf-console .pf-btn--go{padding:11px 22px;font-size:14.5px}
.pf-console .pf-btn--go[disabled]{opacity:.6;cursor:progress}
.pf-console .pf-btn--ghost,.pf-console .pf-btn--demo{
  padding:10px 15px;font-size:13.5px;background:var(--surface-2);
  border:1px solid var(--line-2);color:var(--muted);
}
.pf-console .pf-btn--ghost:hover,.pf-console .pf-btn--demo:hover{color:var(--text);border-color:var(--accent)}
.pf-console .pf-actions__note{font-size:14px;line-height:1.6}

.pf-console .pf-error{
  display:flex;gap:11px;align-items:flex-start;line-height:1.55;margin:14px 0 0;
}
.pf-console .pf-error svg{width:18px;height:18px;flex:none;margin-top:1px}

/* --- pane 3: the answer --- */
.pf-side{
  position:sticky;top:var(--pf-chrome);max-height:calc(100vh - var(--pf-chrome));
  overflow-y:auto;scrollbar-width:thin;
  border-left:1px solid var(--line);background:var(--bg-2);
}
.pf-side::-webkit-scrollbar{width:8px}
.pf-side::-webkit-scrollbar-thumb{background:var(--surface-3);border-radius:8px}
.pf-side__h{
  display:flex;align-items:center;gap:10px;padding:12px 18px;
  border-bottom:1px solid var(--line);position:sticky;top:0;background:var(--bg-2);z-index:2;
  font-size:12px;letter-spacing:.11em;text-transform:uppercase;color:var(--dim);font-weight:600;
}
.pf-side__h em{
  margin-left:auto;font-style:normal;letter-spacing:0;text-transform:none;
  font-size:12px;color:var(--up);font-weight:500;
}
.pf-console #pf-out-card{background:none;border:0;border-radius:0}

.pf-console #pf-out .pf-headline{padding:22px 18px 20px;border-radius:0}
.pf-console #pf-out .pf-headline__value{font-size:clamp(34px,3.6vw,46px);letter-spacing:-.03em}
.pf-console #pf-out .pf-headline__sub{font-size:13px}
.pf-console #pf-out .pf-stats,
.pf-console #pf-out .pf-track,
.pf-console #pf-out .pf-block,
.pf-console #pf-out .pf-grid5,
.pf-console #pf-out .pf-buckets,
.pf-console #pf-out .pf-keno,
.pf-console #pf-out .pf-cards,
.pf-console #pf-out .pf-lane,
.pf-console #pf-out .pf-gems,
.pf-console #pf-out .pf-hands,
.pf-console #pf-out .pf-progress{padding-left:18px;padding-right:18px}
.pf-console #pf-out .pf-wheel{margin-left:18px;margin-right:18px}
.pf-console #pf-out .pf-proof{margin:20px 18px 0;padding:15px}
.pf-console #pf-out .pf-proof__k{width:88px;color:var(--muted)}
.pf-console #pf-out .pf-panel{margin:14px 18px 0}
.pf-console #pf-out .pf-nav{margin-top:20px;padding:16px 18px 8px}
.pf-console #pf-out .pf-nav__row{gap:8px}
.pf-console #pf-out .pf-strip{order:3;width:100%;justify-content:flex-start;margin-top:4px}
.pf-console #pf-out .pf-navbtn{font-size:12.5px;padding:6px 12px}
.pf-console #pf-out .pf-input--sm{width:84px;font-size:12.5px}
.pf-console #pf-out .pf-ph{padding:40px 22px}
.pf-console #pf-out .pf-ph p{font-size:13.5px}
.pf-console #pf-out .pf-empty{padding:18px}
.pf-copy{cursor:pointer}
.pf-copy.is-fail{color:var(--down);border-color:rgba(255,92,122,.4)}

/* ============================================================
   3. How it works + FAQ (unchanged content, kept below the tool)
   ============================================================ */

/* Four steps, so lay them out 4 / 2 / 1 — auto-fit stranded the last card alone. */
.pf-explain__grid{
  margin:28px 0 0;gap:18px;grid-template-columns:repeat(4,minmax(0,1fr));
}
@media(max-width:1240px){.pf-explain__grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:640px){.pf-explain__grid{grid-template-columns:1fr}}

.pf-ex{padding:24px;border-radius:var(--r-xl)}
.pf-ex h3{font-size:16.5px;margin-bottom:10px}
.pf-ex p{font-size:16px;line-height:1.7}
.pf-ex b{color:var(--text)}

.pf-faq{margin-top:40px}
.pf-faq details{border-radius:var(--r-lg);transition:border-color .18s}
.pf-faq details:hover{border-color:var(--line-2)}
.pf-faq details[open]{border-color:color-mix(in srgb,var(--accent) 30%,transparent)}
.pf-faq summary{padding:16px 20px;font-size:15.5px;align-items:center}
.pf-faq summary::after{transition:transform .18s}
.pf-faq p{padding:0 20px 20px;font-size:16px;line-height:1.7;max-width:82ch}
.pf-faq b{color:var(--text)}

/* ============================================================
   4. Responsive
   ============================================================ */

/* Below 1340px the answer pane cannot hold its own column, so it drops under
   the form and stops being sticky. It takes the form's column only: the picker
   is still sticky here, and a sticky grid item is held inside the grid
   container, not its own row, so an answer spanning both columns slid under
   the rail as soon as the page scrolled (a 1330px viewport showed the games
   list sitting on top of the result). */
@media(max-width:1340px){
  .pf-console > .wrap{grid-template-columns:250px minmax(0,1fr)}
  .pf-side{
    grid-column:2;border-left:0;border-top:1px solid var(--line);
    position:static;max-height:none;
  }
  .pf-side__h{position:static}
  .pf-console #pf-out .pf-result{
    display:grid;grid-template-columns:repeat(auto-fit,minmax(340px,1fr));align-items:start;
  }
  .pf-console #pf-out .pf-headline{grid-column:1/-1}
  .pf-console #pf-out .pf-proof{grid-column:1/-1}
}

@media(max-width:1240px){
  .pf-keys{display:none}
}

/* Below 1024px nothing is sticky and everything stacks in one column. The games
   rail becomes a bar naming the current game; the search box and the list open
   beneath it as a dropdown, instead of a 280px box the page scrolled inside of. */
@media(max-width:1024px){
  .pf-console > .wrap{grid-template-columns:1fr}
  .pf-side{grid-column:1/-1}
  .pf-console .pf-picker{
    /* top:auto — the desktop rule's sticky offset would shift a relative box down by a whole header. */
    position:relative;top:auto;height:auto;display:block;
    border-right:0;border-bottom:1px solid var(--line);
  }
  .pf-picker__toggle{
    display:flex;align-items:center;gap:12px;width:100%;padding:11px var(--pad);
    background:none;border:0;color:var(--text);font:inherit;text-align:left;cursor:pointer;
  }
  .pf-picker__toggle:focus-visible{outline:2px solid var(--accent);outline-offset:-2px}
  .pf-picker__ico{
    width:34px;height:34px;padding:8px;box-sizing:border-box;border-radius:10px;flex:none;
    background:color-mix(in srgb,var(--accent) 15%,transparent);color:var(--accent);
  }
  .pf-picker__txt{display:flex;flex-direction:column;gap:1px;min-width:0}
  .pf-picker__lbl{
    font-size:11px;letter-spacing:.11em;text-transform:uppercase;color:var(--dim);font-weight:600;
  }
  .pf-picker__cur{
    font-weight:600;font-size:15px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
  }
  .pf-picker__chev{
    margin-left:auto;width:18px;height:18px;flex:none;color:var(--muted);transition:transform .15s;
  }
  .pf-picker.is-open .pf-picker__chev{transform:rotate(180deg)}
  .pf-picker__menu{
    display:none;position:absolute;left:0;right:0;top:100%;z-index:30;
    background:var(--bg-2);border:1px solid var(--line);border-top:0;
    border-radius:0 0 14px 14px;box-shadow:0 18px 40px rgba(0,0,0,.45);
  }
  .pf-picker.is-open .pf-picker__menu{display:flex;flex-direction:column}
  .pf-console .pf-search kbd{display:none}
  .pf-console #pf-games{max-height:min(56vh,440px)}
}

@media(max-width:900px){
  .pf-console > .wrap{grid-template-columns:1fr}
  .pf-console .pf-fields{grid-template-columns:1fr}
  .pf-console .pf-f--2,.pf-console .pf-f--wide{grid-column:auto}
  .pf-bar__sub{padding-left:0;border-left:0;width:100%}
}

@media(max-width:640px){
  .pf-console .pf-main{padding:18px 16px 40px}
  .pf-console #pf-out .pf-headline{padding:20px 16px}
  .pf-console #pf-out .pf-proof{margin:16px 16px 0}
  .pf-console #pf-out .pf-proof__k{width:80px}
  /* Thumb-sized targets for the mines grid on a phone. */
  .pf-pick{min-width:38px;min-height:38px}
}

@media(prefers-reduced-motion:reduce){
  .pf-skip,.pf-faq summary::after,.pf-progress__bar i{transition:none}
  html{scroll-behavior:auto}
}

/* app.js's generic commitment box is hidden on the bridged casinos that ship
   their own hashed-seed field (see verify-console.js); [hidden] loses to the
   .pf-commit display rule without this. */
.pf-commit[hidden]{display:none}

/* On a phone the "CASINO" label is 70px that a chip could use instead. */
/* Below a laptop the per-casino game count is the first thing worth dropping —
   it buys roughly a chip and a half of room in the row. */
@media(max-width:1100px){
  .pf-casbar .pf-cas__n{display:none}
}

@media(max-width:640px){
  .pf-casbar__l{display:none}
  .pf-casbar .wrap{gap:8px}
  .pf-morepop{right:auto;left:0;width:min(340px,92vw)}
  .pf-morepop__list{grid-template-columns:1fr}
}