/* Finance Circus's circus theme: ready card, sample, classroom, and instructions. */
@font-face {
  font-family: 'Nunito';
  src: url('fonts/nunito/Nunito.ttf') format('truetype');
  font-style: normal;
  font-weight: 200 1000;
  font-display: swap;
}
/* Keep the bold serif display titles and use Nunito for supporting copy. */
.ready-games .game-card.circle .game-copy,
.cards > a[data-game="finance-circle"],
body[data-game="finance-circle"] main,
body[data-game="finance-circle"] dialog,
body[data-game="finance-circle"] :is(main, dialog) button,
body[data-game="finance-circle"] .game-instructions p,
body[data-game="finance-circle"] dialog.has-game-instructions .game-instructions p {
  font-family: 'Nunito', Arial, sans-serif;
}
body[data-game="finance-circle"] button.game-instructions-reopen {
  font-family: 'Nunito', Arial, sans-serif;
  font-weight: 800;
}
.finance-circle-mascot { display: none; }
.ready-games .game-card.circle {
  --card-border: #d7af65; --card-bg: #fff2d8; --card-ink: #6b2130; --card-shadow: #7f2835;
}
.ready-games .game-card.circle .game-art,
.cards > a[data-game="finance-circle"] .art {
  background: linear-gradient(0deg, #2b162033, transparent 60%), url('finance-circle-tent.png?v=candy-bingo-20260913') center 58% / cover no-repeat;
}
.ready-games .game-card.circle .circle-card-mascot {
  position: absolute; top: 5px; left: 50%; width: auto; max-width: none; height: 180%; padding: 0;
  transform: translateX(-50%); filter: drop-shadow(0 4px 5px #24132270);
}
.ready-games .game-card.circle h2,
.cards > a[data-game="finance-circle"] h2 {
  font: 700 30px/1.15 Georgia, 'Times New Roman', serif; letter-spacing: -.5px;
}
.cards > a[data-game="finance-circle"] {
  background: #fff2d8; color: #6b2130; border: 2px solid #d7af65;
}
.cards > a[data-game="finance-circle"] strong { color: #6b2130; }
.cards > a[data-game="finance-circle"] .art { height: 185px; border-radius: 12px; }
.cards > a[data-game="finance-circle"] .art img {
  display: block; width: 100%; height: 100%; object-fit: contain; padding: 5px 8px 0;
}
body[data-game="finance-circle"].sample-games,
body[data-page="play"][data-game="finance-circle"]:not(.chase-active) {
  background: linear-gradient(180deg, #151e2bbb, #241823dd 75%, #241823), url('finance-circle-tent.png?v=candy-bingo-20260913') center top / cover no-repeat fixed;
  background-color: #241823; color: #fff2d8;
}
body[data-page="play"][data-game="finance-circle"] .controller,
body[data-game="finance-circle"].sample-games main { max-width: 800px; }
body[data-game="finance-circle"] .finance-circle-heading,
body[data-page="play"][data-game="finance-circle"]:not(.chase-active) .controller-title {
  position: relative; display: flex; flex-direction: column; align-items: flex-start; justify-content: center;
  min-height: 270px; padding: 28px 42% 28px 28px; margin: 24px 0 30px; text-align: left;
  border: 3px solid #d7af65; border-radius: 22px;
  background: radial-gradient(ellipse at 15% 20%, rgb(163 42 62 / 84%), rgb(97 27 43 / 88%) 80%),
    url('finance-circle-tent.png?v=candy-bingo-20260913') center 55% / cover no-repeat;
  box-shadow: inset 0 0 0 5px #611b2b, inset 0 0 0 6px #d7af6580, 0 7px 0 #291424;
}
body[data-page="play"][data-game="finance-circle"]:not(.chase-active) .controller-title > :is(.game-art,.ui-icon) { display: none; }
body[data-game="finance-circle"] .finance-circle-heading h1,
body[data-page="play"][data-game="finance-circle"]:not(.chase-active) .controller-title #game-title {
  font: 700 clamp(34px, 5vw, 52px)/1.05 Georgia, 'Times New Roman', serif;
  text-transform: uppercase; color: #ffe6ad; letter-spacing: .5px; text-shadow: 2px 3px 0 #351725;
  margin: 12px 0; overflow-wrap: normal;
}
body[data-game="finance-circle"] .finance-circle-heading p,
body[data-page="play"][data-game="finance-circle"] .controller-title :is(.eyebrow,#play-room) {
  color: #fff2d8; margin: 0; line-height: 1.5;
}
body[data-game="finance-circle"] .finance-circle-heading > p:not(.eyebrow) { font-size: 15px; }
body[data-game="finance-circle"] .finance-circle-mascot {
  display: block; position: absolute; right: 1%; bottom: 0; width: 40%; height: 110%;
  object-fit: contain; object-position: center bottom; filter: drop-shadow(0 5px 5px #28132166); pointer-events: none;
}
body[data-page="play"][data-game="finance-circle"]:not(.chase-active) .controller-bar > a {
  display: grid; place-items: center; width: 44px; height: 44px; padding: 0;
  background: #6b2130; color: #fff2d8; border: 2px solid #d7af65; border-radius: 50%; box-shadow: 0 3px 0 #291424;
}
body[data-page="play"][data-game="finance-circle"] .controller-bar > a i { color: #fff2d8; font-size: 22px; }
body[data-page="play"][data-game="finance-circle"]:not(.chase-active) .controller-bar > a:hover { background: #8e293b; }
body[data-game="finance-circle"] .finance-circle {
  position: relative; overflow: hidden; padding: 38px 24px 26px;
  background:
    radial-gradient(ellipse at 50% 45%, #58351f80 0%, #79502e40 38%, #79502e00 78%),
    #e7cea0 url('finance-circus-parchment.png?v=candy-bingo-20260913') center / cover no-repeat;
  color: #382231; border: 3px solid #d7af65; border-radius: 22px;
  box-shadow: 0 7px 0 #291424;
}
body[data-game="finance-circle"] .finance-circle::before {
  content: ''; position: absolute; inset: 0 0 auto; height: 16px; border-bottom: 3px solid #d7af65;
  background: repeating-linear-gradient(90deg, #a92c3f 0 32px, #fff2d8 32px 64px); pointer-events: none;
}
body[data-game="finance-circle"] .finance-circle > .eyebrow { color: #6b2130; letter-spacing: 2px; }
body[data-game="finance-circle"] .circle-stage { width: min(320px, 100%); margin: 30px auto 32px; isolation: isolate; }
body[data-game="finance-circle"] .circle-stage::before {
  content: ''; position: absolute; inset: -13px; z-index: -1; border: 7px dotted #f5ca6e;
  border-radius: 50%; background: #6b2130; box-shadow: 0 0 0 3px #d7af65, 0 8px 18px #29142438;
}
body[data-game="finance-circle"] .circle-stage[data-wheel-lights]::before { border-style:solid; border-color:#6b2130; }
body[data-game="finance-circle"] .circle-lights {
  position:absolute; inset:-13px; z-index:1; border-radius:50%; pointer-events:none;
}
body[data-game="finance-circle"] .circle-bulb {
  position:absolute; width:8px; height:8px; border-radius:50%; transform:translate(-50%,-50%);
  background:radial-gradient(circle at 35% 25%, #fff, #fff4ac 48%, #ffd25c 80%, #e9a72c);
  box-shadow:0 0 5px 2px #ffe291, 0 0 11px 3px #ffc54e99; opacity:1;
}
body[data-game="finance-circle"] .circle-bulb:nth-child(3n+1) { --idle-phase:0s; }
body[data-game="finance-circle"] .circle-bulb:nth-child(3n+2) { --idle-phase:-.8s; }
body[data-game="finance-circle"] .circle-bulb:nth-child(3n) { --idle-phase:-1.6s; }
body[data-game="finance-circle"] [data-wheel-lights="ready"] .circle-bulb {
  animation:circle-bulb-idle 2.4s ease-in-out infinite !important;
  animation-delay:var(--idle-phase) !important;
}
body[data-game="finance-circle"] [data-wheel-lights="spinning"] .circle-bulb {
  /* Requested game animation overrides the site's reduced-motion reset. */
  animation:circle-bulb-chase 1.8s linear infinite !important;
  animation-delay:calc(var(--bulb-index) * 37.5ms - 1.8s) !important;
}
body[data-game="finance-circle"] [data-wheel-lights="landing"] .circle-bulb {
  animation:circle-bulb-land 1.2s ease-out 1 !important;
}
@keyframes circle-bulb-chase {
  0%, 35%, 100% { opacity:.85; box-shadow:0 0 5px 1px #ffd577, 0 0 8px #ffc54e80; }
  12% { opacity:1; box-shadow:0 0 7px 3px #fff9d8, 0 0 18px 6px #ffbd49cc; }
}
@keyframes circle-bulb-idle {
  0%, 65%, 100% { opacity:.8; box-shadow:0 0 4px 1px #ffd577, 0 0 8px #ffc54e80; }
  30% { opacity:1; box-shadow:0 0 7px 3px #fff9d8, 0 0 15px 5px #ffbd49bb; }
}
@keyframes circle-bulb-land {
  0%, 100% { opacity:1; box-shadow:0 0 5px 2px #ffe291, 0 0 11px 3px #ffc54e99; }
  35% { opacity:1; box-shadow:0 0 9px 4px #fffce9, 0 0 23px 8px #ffbf49cc; }
}
body[data-game="finance-circle"] .prize-wheel {
  border-color: #d7af65; box-shadow: inset 0 0 0 2px #291424;
  background: conic-gradient(#ffe6ad 0deg 45deg, #a32a3e 45deg 90deg, #183748 90deg 135deg, #a32a3e 135deg 180deg, #ffe6ad 180deg 225deg, #a32a3e 225deg 270deg, #183748 270deg 315deg, #a32a3e 315deg 360deg);
}
body[data-game="finance-circle"] .prize-wheel span { color: #fff2d8; }
body[data-game="finance-circle"] .prize-wheel :is(.circle-slice-0,.circle-slice-4) { color: #382231; }
body[data-game="finance-circle"] .circle-pointer { top: -29px; color: #6b2130; filter: drop-shadow(0 2px 0 #ffe6ad); }
body[data-game="finance-circle"] .circle-hub {
  width: 30%; height: 30%; border: 0; background: transparent; box-shadow: none; pointer-events: none;
}
body[data-game="finance-circle"] .circle-hub-mascot {
  display: block; width: 100%; height: 100%; object-fit: contain; filter: drop-shadow(0 3px 2px #29142466);
}
body[data-game="finance-circle"] #spin-button,
body[data-game="finance-circle"] :is(#sample-next,#sample-again,.game-instructions-listen,.game-instructions-reopen),
.game-instructions-dialog[data-instructions-game="finance-circle"] form button {
  background: #8b2337; color: #fff2d8; border: 2px solid #c39751; border-radius: 999px;
  box-shadow: 0 4px 0 #4d1b2c; font-weight: 800;
}
body[data-game="finance-circle"] #spin-button:hover:not(:disabled),
body[data-game="finance-circle"] :is(#sample-next,#sample-again,.game-instructions-listen,.game-instructions-reopen):hover:not(:disabled),
.game-instructions-dialog[data-instructions-game="finance-circle"] form button:hover { background: #a32a3e; }
body[data-game="finance-circle"] #spin-result { color: #6b2130; }
body[data-game="finance-circle"] .circle-stats { padding: 12px 18px; background: #183748; color: #fff2d8; border: 2px solid #d7af65; border-radius: 14px; }
body[data-game="finance-circle"]:not(.chase-active) :is(.sample-question,.student-question) {
  background: #183748; color: #fff2d8; border: 2px solid #d7af65; border-top: 5px solid #d7af65;
  box-shadow: 0 5px 0 #291424; border-radius: 20px;
}
body[data-game="finance-circle"] :is(.sample-question,.student-question) :is(h2,.eyebrow) { color: #fff2d8; }
body[data-game="finance-circle"] .circle-answers button,
body[data-game="finance-circle"] .answer-grid button:nth-child(n):not(.correct-reveal):not(.incorrect-reveal) {
  background: #fff2d8; color: #382231; border: 2px solid #d7af65; border-bottom-width: 5px;
  border-radius: 16px; box-shadow: 0 3px 0 #291424;
}
body[data-game="finance-circle"] .circle-answers button:hover:not(:disabled),
body[data-game="finance-circle"] .answer-grid button:nth-child(n):hover:not(:disabled) { background: #ffe6ad; color: #382231; }
body[data-game="finance-circle"] :is(.circle-answers,.answer-grid) .answer-letter { background: #6b2130; color: #fff2d8; }
body[data-game="finance-circle"] :is(.circle-answers,.answer-grid) button.selected:nth-child(n) { border-color: #f1bf51; outline: 3px solid #f1bf51; outline-offset: 2px; }
body[data-game="finance-circle"] .sample-feedback,
body[data-page="play"][data-game="finance-circle"]:not(.chase-active) .round-status {
  background: #fff2d8; color: #382231; border: 2px solid #d7af65;
}
body[data-game="finance-circle"] .game-instructions {
  background: #fff2d8; color: #382231; border: 2px solid #d7af65; box-shadow: 0 5px 0 #291424;
}
body[data-game="finance-circle"] .game-instructions h2 { color: #6b2130; }
.game-instructions-dialog[data-instructions-game="finance-circle"] {
  background: #611b2b; color: #fff2d8; border: 3px solid #d7af65; box-shadow: 0 8px 0 #291424;
}
.game-instructions-dialog[data-instructions-game="finance-circle"]::backdrop { background: #1e1422db; }
.game-instructions-dialog[data-instructions-game="finance-circle"] > h2 { font-family: Georgia, 'Times New Roman', serif; color: #ffe6ad; }
body[data-game="finance-circle"] .game-instructions .game-instructions-header .game-instructions-close,
.game-instructions-dialog[data-instructions-game="finance-circle"] .game-instructions-close-bar .game-instructions-close {
  background: #fff2d8; color: #6b2130; border-color: #9c743b;
}
body[data-game="finance-circle"] :is(button,a):focus-visible { outline: 3px solid #f1bf51; outline-offset: 4px; }
@media (max-width: 540px) {
  body[data-game="finance-circle"] .finance-circle-heading,
  body[data-page="play"][data-game="finance-circle"]:not(.chase-active) .controller-title { min-height: 230px; padding: 22px 42% 22px 18px; }
  body[data-game="finance-circle"] .finance-circle-heading h1,
  body[data-page="play"][data-game="finance-circle"]:not(.chase-active) .controller-title #game-title { font-size: 30px; letter-spacing: 0; }
  body[data-game="finance-circle"] .finance-circle-mascot { height: 102%; }
  body[data-game="finance-circle"] .finance-circle { padding: 32px 22px 22px; }
}