/* CaptiFi game kit 2.0.2: styles for CaptifiGame.mount(). No images, no web fonts.
   Every colour comes from the --cgk-* custom properties the script derives from the
   venue's accent, so nothing here names a brand colour. Flat vector throughout: one
   soft shadow under each object and nothing else shaded. */

.cgk {
  --cgk-font: "DM Sans", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  position: relative;
  box-sizing: border-box;
  width: 100%;
  max-width: 400px;
  margin: 0 auto;
  color: var(--cgk-ink);
  font-family: var(--cgk-font);
  font-size: 16px;
  line-height: 1.3;
  text-align: center;
  -webkit-user-select: none;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
  -webkit-touch-callout: none;
  touch-action: manipulation;
}
.cgk *, .cgk *::before, .cgk *::after { box-sizing: border-box; }
.cgk [hidden] { display: none !important; }
.cgk button { font-family: inherit; }
.cgk svg { display: block; overflow: visible; }
.cgk svg text { font-family: var(--cgk-font); }

.cgk-vh { position: absolute !important; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

/* Head: at least the speaker button's 36 px, so a head with a title or a line alone never lets the button hang over the art. */
.cgk-head { position: relative; padding: 0 44px; min-height: 36px; }
.cgk-title { margin: 0; font-size: 22px; font-weight: 700; line-height: 1.3; color: var(--cgk-ink); }
.cgk-sub { margin: 4px 0 0; font-size: 14px; font-weight: 400; line-height: 1.4; color: var(--cgk-ink); opacity: .75; }
/* No title and no line (the page prints the headline): a row the height of the speaker button, so it keeps its corner clear of the art. */
.cgk-head--bare { height: 36px; }
.cgk-mute {
  position: absolute; top: 0; right: 0; width: 36px; height: 36px;
  display: grid; place-items: center; padding: 0; border: 0; border-radius: 50%; cursor: pointer;
  color: var(--cgk-on-tint); background: var(--cgk-tint);
}
.cgk-mute svg { width: 18px; height: 18px; }
.cgk-mute[aria-pressed="true"] { color: var(--cgk-on-shade); background: var(--cgk-shade); }

/* A ring on every focus, hidden only for mouse focus where :focus-visible exists,
   so browsers without :focus-visible (Safari before 15.4) still show it. */
.cgk :focus { outline: 3px solid var(--cgk-accent); outline-offset: 3px; }
.cgk :focus:not(:focus-visible) { outline: none; }
.cgk-result:focus { outline: none; }

/* Art and foot */
.cgk-art { position: relative; width: 100%; margin: 10px auto 0; }
.cgk-foot { margin-top: 14px; }
.cgk-ctas { display: flex; flex-direction: column; gap: 10px; }
.cgk-hint { margin: 0; font-size: 14px; color: var(--cgk-ink); opacity: .75; }
.cgk-pick { padding: 12px 16px; border-radius: 12px; font-weight: 700; color: var(--cgk-on-tint); background: var(--cgk-tint); opacity: 1; }

/* The button: full width, flat, in the accent. */
.cgk-btn {
  -webkit-appearance: none; appearance: none; display: block; width: 100%; padding: 14px 16px; border: 0; border-radius: 12px; cursor: pointer;
  font: 700 16px/1.3 var(--cgk-font); color: var(--cgk-on-accent); background: var(--cgk-accent);
  -webkit-touch-callout: none; touch-action: manipulation;
}
.cgk-btn[disabled], .cgk-btn[aria-disabled="true"] { cursor: default; color: var(--cgk-on-mute); background: var(--cgk-mute); }
.cgk-btn--ghost { color: var(--cgk-on-tint); background: var(--cgk-tint); }

/* Result panel: the tint in place of the button. */
.cgk-res { padding: 16px; border-radius: 14px; background: var(--cgk-tint); }
.cgk-res-title { font-size: 22px; font-weight: 700; line-height: 1.2; color: var(--cgk-accent); }
.cgk-res--lose .cgk-res-title { color: var(--cgk-deep); }
.cgk-res-prize, .cgk-res-note { margin: 4px 0 0; font-size: 16px; font-weight: 500; line-height: 1.35; color: var(--cgk-ink); }
.cgk-res-err { margin: 10px 0 0; font-size: 15px; color: var(--cgk-ink); }

/* Prize icon helper */
.cgk-ic { display: block; width: 1em; height: 1em; fill: currentColor; }

/* ---------------- Wheel ---------------- */
.cgk-wheel { width: 100%; max-width: 352px; margin: 0 auto; cursor: pointer; filter: drop-shadow(0 10px 20px var(--cgk-shadow)); }

/* ---------------- Scratch card ---------------- */
.cgk-scratch { position: relative; width: 100%; max-width: 352px; margin: 0 auto; }
.cgk-ticket { width: 100%; filter: drop-shadow(0 10px 20px var(--cgk-shadow)); }
.cgk-foil { position: absolute; left: 0; top: 0; border-radius: 12px; touch-action: none; cursor: pointer; }

/* ---------------- Slot machine ---------------- */
.cgk-slot { width: 100%; max-width: 352px; margin: 0 auto; filter: drop-shadow(0 10px 20px var(--cgk-shadow)); }
.cgk-slot .cgk-reel { overflow: hidden; }
.cgk-plaque { cursor: pointer; }
.cgk-lever { cursor: grab; touch-action: none; }
.cgk-lever:active { cursor: grabbing; }

/* ---------------- Plinko ---------------- */
.cgk-plinko { width: 100%; max-width: 352px; margin: 0 auto; cursor: pointer; filter: drop-shadow(0 10px 20px var(--cgk-shadow)); }
.cgk-pk-ball.is-jiggle { animation: cgk-jiggle .16s linear infinite; }
.cgk[data-rm] .cgk-pk-ball.is-jiggle { animation: none; }
@keyframes cgk-jiggle { 0% { transform: translate(0, 0); } 25% { transform: translate(-1.5px, -1px); } 50% { transform: translate(1.2px, .5px); } 75% { transform: translate(-.8px, 1px); } 100% { transform: translate(0, 0); } }

/* ---------------- Pick a box ---------------- */
.cgk-boxes { position: relative; width: 100%; max-width: 352px; margin: 0 auto; }
/* The row is 46% of its width plus 64px: the boxes stand on the floor at the bottom and the room above holds
   the shuffle's jumps and, once a box is opened, its card with the lid sitting on top. Each box is a square a
   third of the row wide, whatever the row's height. */
.cgk-bx-row { position: relative; height: 0; padding-bottom: calc(46% + 64px); }
.cgk-bx-floor { position: absolute; left: 0; right: 0; bottom: 0; height: 12px; border-radius: 6px; background: var(--cgk-tint); }
.cgk-box {
  position: absolute; left: 0; bottom: 10px; width: 33.333%; height: 0; padding: 0 0 33.333%; border: 0; background: none; cursor: pointer; will-change: transform;
  border-radius: 12px; -webkit-appearance: none; appearance: none; color: inherit;
}
.cgk-box[disabled] { cursor: default; }
.cgk-bx-shake { position: absolute; left: 6%; right: 6%; top: 0; bottom: 0; transform-origin: 50% 95%; }
.cgk-bx-shake > svg { width: 100%; height: 100%; filter: drop-shadow(0 8px 16px var(--cgk-shadow)); }
.cgk-bx-card {
  position: absolute; left: 50%; bottom: 14%; width: 124%; margin-left: -62%; padding: 10px 8px; border-radius: 12px; opacity: 0;
  display: flex; flex-direction: column; align-items: center; gap: 4px; color: var(--cgk-deep); background: #ffffff;
  box-shadow: 0 8px 16px var(--cgk-shadow); font: 700 14px/1.2 var(--cgk-font); will-change: transform, opacity;
}
.cgk-bx-card .cgk-ic { width: 28px; height: 28px; color: var(--cgk-accent); }
.cgk-bx-card.is-lose .cgk-ic { color: var(--cgk-deep); }
.cgk-boxes.is-picking .cgk-box:not([disabled]):hover .cgk-bx-shake { transform: translateY(-4px); }

/* ---------------- Shake to win ---------------- */
.cgk-shake { position: relative; width: 100%; max-width: 352px; margin: 0 auto; }
.cgk-sh-stage { position: relative; }
.cgk-chest { width: 100%; filter: drop-shadow(0 10px 20px var(--cgk-shadow)); }
/* The chest's card is the box card at 70% of the stage: the script lifts it from this resting place (108 of
   the stage's 300 units up) until it clears the open lid. */
.cgk-sh-card {
  position: absolute; left: 50%; bottom: 36%; width: 70%; margin-left: -35%; padding: 10px 8px; border-radius: 12px; opacity: 0;
  display: flex; flex-direction: column; align-items: center; gap: 4px; color: var(--cgk-deep); background: #ffffff;
  box-shadow: 0 8px 16px var(--cgk-shadow); font: 700 14px/1.2 var(--cgk-font); will-change: transform, opacity;
}
.cgk-sh-card .cgk-ic { width: 28px; height: 28px; color: var(--cgk-accent); }
.cgk-sh-card.is-lose .cgk-ic { color: var(--cgk-deep); }
.cgk-meter { width: 82%; max-width: 300px; height: 12px; margin: 12px auto 0; border-radius: 999px; background: var(--cgk-tint); overflow: hidden; }
.cgk-meter i { display: block; height: 100%; border-radius: 999px; background: var(--cgk-accent); transform-origin: 0 50%; transform: scaleX(0); will-change: transform; }

@media (forced-colors: active) {
  .cgk-btn, .cgk-mute, .cgk-box { border: 2px solid ButtonText; }
}

/* Narrow phones (320 px wide screens) */
@media (max-width: 359px) {
  .cgk-head { padding: 0 40px; }
  .cgk-title { font-size: 20px; }
}