/* Conisbrough Castle - Ruffle game player, fullscreen button + iOS instructions */

.cbg-game-wrap {
  position: relative;
  width: 100%;
  max-width: var(--cbg-game-w, 800px);
  margin: 0 auto 8px;
  background: #111;
  border-radius: 6px;
  overflow: hidden;
  aspect-ratio: var(--cbg-game-w, 800) / var(--cbg-game-h, 550);
  box-shadow: 0 3px 14px rgba(0, 0, 0, .28);
}
.cbg-game-stage { position: absolute; inset: 0; }
.cbg-game-stage ruffle-player,
.cbg-game-stage > * { width: 100% !important; height: 100% !important; }

/* Poster / play button (shown until user clicks Play) */
.cbg-poster {
  position: absolute; inset: 0; cursor: pointer; border: 0; padding: 0; width: 100%; height: 100%;
  background-size: cover; background-position: center; background-color: #1a1a1a;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
}
.cbg-poster::before { content: ""; position: absolute; inset: 0; background: rgba(0,0,0,.34); }
.cbg-play {
  position: relative; width: 92px; height: 92px; border-radius: 50%;
  background: #e11b0e; display: flex; align-items: center; justify-content: center;
  box-shadow: 0 4px 20px rgba(0,0,0,.5); transition: transform .2s, background .2s;
}
.cbg-poster:hover .cbg-play { transform: scale(1.08); background: #c41609; }
.cbg-play svg { width: 40px; height: 40px; margin-left: 6px; fill: #fff; }
.cbg-poster-label {
  position: relative; margin-top: 14px; text-align: center; color: #fff;
  font: 600 15px/1.2 "Open Sans", system-ui, sans-serif; text-shadow: 0 1px 4px rgba(0,0,0,.8);
}

/* Loading state */
.cbg-loading { position: absolute; inset: 0; display: none; align-items: center; justify-content: center; color: #f4ecdd; font: 600 15px "Open Sans", sans-serif; letter-spacing: .1em; }
.cbg-game-wrap.is-loading .cbg-loading { display: flex; }

/* Fullscreen button (top-right) */
.cbg-fs-btn {
  position: absolute; top: 8px; right: 8px; z-index: 2147483000; width: 42px; height: 42px;
  border: 0; border-radius: 8px; cursor: pointer; padding: 8px;
  background: rgba(0, 0, 0, .5); color: #fff; display: flex; align-items: center; justify-content: center;
  transition: background .2s; -webkit-tap-highlight-color: transparent;
}
.cbg-fs-btn:hover { background: rgba(0, 0, 0, .72); }
.cbg-fs-btn svg { width: 100%; height: 100%; }
.cbg-fs-btn .fs-compress { display: none; }
.cbg-game-wrap:fullscreen { max-width: none; width: 100vw; height: 100vh; aspect-ratio: auto; border-radius: 0; display: flex; align-items: center; justify-content: center; }
.cbg-game-wrap:-webkit-full-screen { max-width: none; width: 100vw; height: 100vh; border-radius: 0; }
.cbg-game-wrap:fullscreen .cbg-game-stage { position: relative; width: 100%; height: 100%; max-width: 100vw; }
.cbg-game-wrap:fullscreen .cbg-fs-btn .fs-expand { display: none; }
.cbg-game-wrap:fullscreen .cbg-fs-btn .fs-compress { display: block; }
.cbg-game-wrap.cbg-is-fs .cbg-fs-btn .fs-expand { display: none; }
.cbg-game-wrap.cbg-is-fs .cbg-fs-btn .fs-compress { display: block; }

/* ===== iOS "Add to Home Screen" fullscreen instructions ===== */
.cbg-ios-fs { position: fixed; inset: 0; z-index: 5000; display: none; background: rgba(10, 8, 7, .93); color: #f4ecdd; }
.cbg-ios-fs.open { display: flex; align-items: center; justify-content: center; padding: 20px; }
.cbg-ios-card {
  position: relative; max-width: 380px; width: 100%; background: #201a18; border: 1px solid #4a3b36;
  border-radius: 16px; padding: 24px 22px 26px; text-align: center; box-shadow: 0 10px 40px rgba(0,0,0,.6);
  font-family: "Open Sans", system-ui, sans-serif;
}
.cbg-ios-card h2 { margin: 6px 0 4px; font-size: 1.25em; color: #fff; }
.cbg-ios-card p.sub { margin: 0 0 18px; font-size: .9em; color: #c9bcb4; }
.cbg-ios-step { display: flex; align-items: center; gap: 14px; text-align: left; margin: 0 0 14px; font-size: .95em; }
.cbg-ios-step .num { flex: 0 0 30px; width: 30px; height: 30px; border-radius: 50%; background: #7a1f1a; color: #fff; display: flex; align-items: center; justify-content: center; font-weight: 700; }
.cbg-ios-step .ico { flex: 0 0 34px; width: 34px; height: 34px; display: flex; align-items: center; justify-content: center; }
.cbg-ios-step .ico svg { width: 28px; height: 28px; }
.cbg-ios-step .ico.share svg { animation: cbg-pulse 1.6s ease-in-out infinite; }
.cbg-ios-step .ico.add svg { animation: cbg-pulse 1.6s ease-in-out infinite .3s; }
.cbg-ios-step .ico.phone svg { width: 26px; height: 26px; animation: cbg-pulse 1.6s ease-in-out infinite .6s; }
.cbg-ios-close { position: absolute; top: 8px; right: 12px; background: transparent; border: 0; color: #c9bcb4; font-size: 30px; line-height: 1; cursor: pointer; }
.cbg-ios-close:hover { color: #ec6b64; }
@keyframes cbg-pulse { 0%,100% { transform: scale(1); opacity: .85; } 50% { transform: scale(1.22); opacity: 1; } }

/* Animated bouncing arrow pointing at Safari's share bar (bottom on iPhone) */
.cbg-ios-arrow { position: absolute; left: 50%; bottom: 8px; transform: translateX(-50%); width: 46px; height: 46px; color: #ec6b64; animation: cbg-bounce 1.2s ease-in-out infinite; pointer-events: none; }
.cbg-ios-arrow svg { width: 100%; height: 100%; filter: drop-shadow(0 2px 6px rgba(0,0,0,.6)); }
.cbg-ios-fs.arrow-top .cbg-ios-arrow { bottom: auto; top: 8px; transform: translateX(-50%) rotate(180deg); }
@keyframes cbg-bounce { 0%,100% { transform: translateX(-50%) translateY(0); } 50% { transform: translateX(-50%) translateY(10px); } }
.cbg-ios-fs.arrow-top .cbg-ios-arrow { animation: cbg-bounce-top 1.2s ease-in-out infinite; }
@keyframes cbg-bounce-top { 0%,100% { transform: translateX(-50%) rotate(180deg) translateY(0); } 50% { transform: translateX(-50%) rotate(180deg) translateY(10px); } }

/* ===== Star rating widget (card) ===== */
.cbg-rate { max-width: 400px; margin: 20px auto 10px; text-align: center; background: #faf6f0; border: 1px solid #e6ddd3; border-radius: 12px; padding: 18px 22px 16px; box-shadow: 0 2px 10px rgba(0,0,0,.06); }
.cbg-rate-title { color: #7a1f1a; margin: 12px 0 0; font-size: 0.98em; font-weight: 600; }
.cbg-rate-stars { position: relative; display: inline-block; font-size: 38px; line-height: 1; height: 38px; }
.cbg-rate-base { color: #d8d0c4; letter-spacing: 5px; }
.cbg-rate-fill { position: absolute; top: 0; left: 0; width: 0; overflow: hidden; white-space: nowrap; color: #f5a623; letter-spacing: 5px; pointer-events: none; transition: width .12s ease; }
.cbg-rate-hit { position: absolute; inset: 0; display: flex; }
.cbg-rate-hit button { flex: 1 1 20%; background: transparent; border: 0; padding: 0; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.cbg-rate-stars:focus { outline: 2px solid #7a1f1a; outline-offset: 4px; border-radius: 4px; }
.cbg-rate-summary { font-size: 0.95em; color: #555; margin: 9px 0 0; min-height: 1.2em; }
.cbg-rate-thanks { color: #2e7d32; font-weight: 600; }

/* ===== Pre-roll video ad (desktop, fits the game canvas) ===== */
.cbg-ad { position: absolute; inset: 0; z-index: 2147483001; background: #000; overflow: hidden; }
.cbg-ad-video { width: 100%; height: 100%; object-fit: cover; display: block; background: #000; }
.cbg-ad-skip { position: absolute; top: 10px; right: 10px; z-index: 2; background: rgba(0,0,0,.62); color: #fff; font: 600 14px/1 "Open Sans", system-ui, sans-serif; padding: 10px 15px; border-radius: 22px; min-width: 96px; text-align: center; box-sizing: border-box; user-select: none; }
.cbg-ad-skip.ready { cursor: pointer; background: rgba(0,0,0,.82); }
.cbg-ad-skip.ready:hover { background: #e11b0e; }
.cbg-ad-skip span { margin-left: 5px; font-size: 1.35em; line-height: 0; vertical-align: middle; }
.cbg-ad-cta { position: absolute; bottom: 16px; left: 50%; transform: translateX(-50%); z-index: 2; background: #e11b0e; font: 700 17px/1 "Open Sans", system-ui, sans-serif; padding: 15px 30px; border-radius: 28px; box-shadow: 0 4px 18px rgba(0,0,0,.55); white-space: nowrap; display: inline-flex; align-items: center; gap: 9px; transition: transform .15s ease, background .15s ease; }
/* Beat the theme's .entry-content a rules (which would otherwise recolour + underline the link) */
.cbg-ad-cta, .cbg-ad-cta:link, .cbg-ad-cta:visited, .cbg-ad-cta:hover, .cbg-ad-cta:focus { color: #fff !important; text-decoration: none !important; }
.cbg-ad-cta span { font-size: 1.4em; line-height: 0; vertical-align: middle; }
.cbg-ad-cta:hover, .cbg-ad-cta:focus { transform: translateX(-50%) scale(1.05); background: #c41609; }