/* The advert-measurement question (consent.js): a small dark card with a strip of danfo tape, at the foot of the screen.
   Used by the app and by the public pages, so it relies only on the tokens both define (--paper, --gold, --text, --mute,
   --line, --danfo, --body, --display). Never over a game: hidden while a table (.app) is on screen. */
.pgc{position:fixed;z-index:50;box-sizing:border-box;
  left:max(12px,env(safe-area-inset-left,0px));right:max(12px,env(safe-area-inset-right,0px));bottom:max(12px,env(safe-area-inset-bottom,0px));
  max-height:40vh;max-height:40dvh;overflow:auto;overscroll-behavior:contain;
  display:flex;flex-direction:column;gap:10px;padding:12px 12px 12px 14px;border-radius:16px;
  background:#10201a;border:1px solid var(--line);color:var(--text);box-shadow:0 14px 40px rgba(0,0,0,.5),0 2px 0 rgba(0,0,0,.35);
  font:13.5px/1.4 var(--body);text-align:left;
  transition:opacity .2s ease,transform .2s ease}
.pgc::before{content:'';position:absolute;top:-1px;left:18px;width:58px;height:8px;border-radius:0 0 3px 3px;
  background:repeating-linear-gradient(-45deg,var(--danfo) 0 7px,#141414 7px 14px)}
.pgc.pgc-in,.pgc.pgc-out{opacity:0;transform:translateY(12px)}
.pgc.pgc-out{pointer-events:none}


.pgc-txt{margin:0}
.pgc-h{margin:0 2px 0 0;font:400 13.5px/1 var(--display);letter-spacing:.02em;color:var(--paper)}   /* a run-in heading: one line saved */
.pgc-short{display:none}
.pgc-link{color:var(--gold);text-decoration:underline;text-underline-offset:3px;font-weight:600;
  display:inline-block;padding:11px 6px;margin:-11px -6px;border-radius:8px}
.pgc-link:focus-visible{outline:2px solid var(--gold);outline-offset:-2px}

/* two buttons, same size, same look: saying no is as easy as saying yes */
.pgc-btns{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.pgc-btn{min-height:44px;padding:8px 12px;border-radius:12px;cursor:pointer;
  border:1.5px solid rgba(251,244,226,.5);background:rgba(255,255,255,.08);color:var(--paper);
  font:700 15px/1.1 var(--body);letter-spacing:.01em;-webkit-tap-highlight-color:transparent}
.pgc-btn:active{transform:translateY(1px)}
.pgc-btn:focus-visible{outline:3px solid var(--gold);outline-offset:2px}
@media (hover:hover){.pgc-btn:hover{background:rgba(255,255,255,.16);border-color:var(--paper)}.pgc-link:hover{color:#ffd45e}}

/* wide screens: a card in the bottom-left corner */
@media (min-width:600px){
  .pgc{right:auto;left:max(24px,env(safe-area-inset-left,0px));bottom:max(24px,env(safe-area-inset-bottom,0px));width:400px}
}
/* short screens (a phone on its side): one line of words with the buttons beside it, at the top, where the page's big buttons are
   not (Play now sits at the foot of a short screen); the page moves down to make room, so nothing starts out under it */
@media (max-height:500px){
  .pgc{left:max(12px,env(safe-area-inset-left,0px));right:max(12px,env(safe-area-inset-right,0px));width:auto;max-width:760px;
    top:max(8px,env(safe-area-inset-top,0px));bottom:auto;flex-direction:row;align-items:center;gap:12px;padding:8px 8px 8px 14px;border-radius:14px}
  .pgc::before{left:14px;width:44px;height:6px}
  .pgc-txt{flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-size:13.5px;padding:2px 0}
  .pgc-h,.pgc-long{display:none}
  .pgc-short{display:inline}
  .pgc-link{padding:4px 4px;margin:-4px 0 -4px -2px}
  .pgc-btns{flex:none;grid-template-columns:auto auto;gap:8px}
  .pgc-btn{min-height:44px;min-width:104px;font-size:14px}
  .pgc.pgc-in,.pgc.pgc-out{transform:translateY(-12px)}
  .pgc::before{top:auto;bottom:-1px;border-radius:3px 3px 0 0}
}
@media (max-height:500px) and (min-width:820px){.pgc{left:50%;right:auto;width:760px;transform:translateX(-50%)}.pgc.pgc-in,.pgc.pgc-out{transform:translate(-50%,-12px)}}

/* room under the page so nothing stays stuck behind the card; none of this on a game table, where the card stays out of the way */
html.pgc-open body:not(:has(> .app:not([hidden]))):not(:has(> .overlay:not([hidden]))){padding-bottom:calc(var(--pgc-h,0px) + 24px)}
@media (max-height:500px){
  /* (not on the welcome poster: its top is only the wordmark, so the card may sit over it and Play now stays where it is) */
  html.pgc-open body:not(:has(> .app:not([hidden]))):not(:has(> .overlay:not([hidden]))){padding-bottom:0}
  html.pgc-open body:not(:has(> .app:not([hidden]))):not(:has(> .overlay:not([hidden]))):not(:has(.screen-welcome:not([hidden]))){padding-top:calc(var(--pgc-h,0px) + 12px)}
}
body:has(> .app:not([hidden])) > .pgc,body:has(> .overlay:not([hidden])) > .pgc{display:none}   /* a table, or a sheet (choose a mode, rules) */

/* the privacy page: "Your choice right now: On. Change" */
.consent-now{margin:14px 0 0;padding:12px 14px;border-radius:12px;background:rgba(0,0,0,.2);border:1px dashed rgba(255,198,26,.45)}
.consent-now b{color:var(--paper)}
.consent-change{font:inherit;font-weight:700;color:var(--gold);background:none;border:0;cursor:pointer;text-decoration:underline;text-underline-offset:3px;
  padding:10px 6px;margin:-10px -6px -10px 0;border-radius:8px}
.consent-change[hidden]{display:none}
@media (hover:hover){.consent-change:hover{color:#ffd45e}}
.consent-change:focus-visible{outline:3px solid var(--gold);outline-offset:0}
@media (prefers-reduced-motion:reduce){.pgc{transition:none}.pgc.pgc-in,.pgc.pgc-out{transform:none}}
@media (prefers-reduced-motion:reduce) and (max-height:500px) and (min-width:820px){.pgc.pgc-in,.pgc.pgc-out{transform:translateX(-50%)}}