/* Churroman Games: the opening screens shown when a game page opens
   1) a loading screen: the Churroman wordmark, "GAMES", a churro loading bar and the tagline
   2) the game's cover: the game's character in action, the game name, and a blinking START! button
   Everything sits over the game screen, sized from its width (cqw), so it fits phones, tablets and computers. */

@font-face { font-family: "Grenze"; font-style: normal; font-weight: 800; font-display: block; src: url("/fonts/grenze-latin-800-normal.woff2") format("woff2"); }
@font-face { font-family: "Alegreya SC"; font-style: normal; font-weight: 700; font-display: swap; src: url("/fonts/alegreya-sc-latin-700-normal.woff2") format("woff2"); }
@font-face { font-family: "Barlow Condensed"; font-style: normal; font-weight: 600; font-display: swap; src: url("/fonts/barlow-condensed-latin-600-normal.woff2") format("woff2"); }

.ci {
  --cream: #FFF3DA; --ink: #3B1F14; --esp: #24130D; --gold: #F2C24A; --gold-dk: #B07E10; --red: #A62C24;
  position: absolute; inset: 0; z-index: 4; overflow: hidden; border-radius: 18px;
  container-type: size; contain: layout paint;
  -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; -webkit-tap-highlight-color: transparent;
  touch-action: manipulation; cursor: default;
}
body.fs .ci { border-radius: 0; }
.ci[hidden] { display: none; }
.ci * { box-sizing: border-box; }

/* while the opening screens are up, the game's own buttons wait (sound and full screen still work) */
body.intro-on .controls > :not(.middle) { pointer-events: none; opacity: .45; filter: saturate(.6); transition: opacity .3s, filter .3s; }
body.intro-on .controls .middle .exit-fs { pointer-events: none; }

/* ------------------------------------------------------------------ */
/* 1) loading screen                                                  */
/* ------------------------------------------------------------------ */
.ci-load {
  position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center;
  background: radial-gradient(120% 95% at 50% 42%, #6A3419 0%, #3A1D10 46%, #1E0F09 100%);
  color: var(--cream); z-index: 2;
}
.ci-load.out { animation: ci-iris .62s cubic-bezier(.6, 0, .4, 1) forwards; pointer-events: none; }
@keyframes ci-iris { from { clip-path: circle(75% at 50% 46%); } to { clip-path: circle(0% at 50% 46%); } }

/* slowly turning sunburst, on its own layer so it turns smoothly on phones */
.ci-rays {
  position: absolute; left: 50%; top: 46%; width: 160cqw; aspect-ratio: 1; margin: -80cqw 0 0 -80cqw; border-radius: 50%;
  background: repeating-conic-gradient(from 0deg, rgba(255, 214, 120, .10) 0deg 7deg, rgba(255, 214, 120, 0) 7deg 18deg);
  -webkit-mask: radial-gradient(closest-side, #000 18%, rgba(0, 0, 0, .55) 55%, transparent 100%);
          mask: radial-gradient(closest-side, #000 18%, rgba(0, 0, 0, .55) 55%, transparent 100%);
  will-change: transform; animation: ci-spin 40s linear infinite;
}
@keyframes ci-spin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }

/* little churro pattern drifting behind everything */
.ci-dots { position: absolute; inset: -10%; opacity: .07; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='64' height='64' viewBox='0 0 64 64'%3E%3Cg fill='none' stroke='%23F2C24A' stroke-width='5' stroke-linecap='round'%3E%3Cpath d='M10 22l16-12'/%3E%3Cpath d='M40 54l16-12'/%3E%3C/g%3E%3C/svg%3E"); background-size: 9cqw 9cqw; animation: ci-drift 18s linear infinite; }
@keyframes ci-drift { to { transform: translate(9cqw, 9cqw); } }

.ci-logo { position: relative; display: flex; flex-direction: column; align-items: center; }
.ci-wm { width: 58cqw; height: auto; display: block; filter: drop-shadow(0 .7cqw 0 rgba(0, 0, 0, .35));
  opacity: 0; transform: translateY(-30cqh) scale(.9); animation: ci-drop .8s cubic-bezier(.2, 1.5, .45, 1) .15s forwards; }
@keyframes ci-drop { to { opacity: 1; transform: none; } }

/* "GAMES": letters on a gentle arch, like the bottom of the wordmark, popping in one by one */
.ci-games { position: relative; display: flex; align-items: center; gap: 1.6cqw; margin-top: .4cqw; }
.ci-orn { width: 9cqw; height: auto; fill: var(--gold); opacity: 0; animation: ci-fade .5s ease-out 1.25s forwards; filter: drop-shadow(0 .3cqw 0 rgba(0, 0, 0, .35)); }
.ci-orn.flip { transform: scaleX(-1); }
.ci-arch { position: relative; display: block; white-space: nowrap; line-height: 1; font-family: "Grenze", "Alegreya SC", Georgia, serif; font-weight: 800; }
.ci-arch > span { display: inline-block; transform-origin: 50% 100%; }
.ci-games .ci-arch { font-size: 11.5cqw; letter-spacing: .4cqw; color: var(--gold);
  text-shadow: 0 .25cqw 0 #FFE9A6, 0 -.22cqw 0 #8A5A06, .3cqw 0 0 var(--esp), -.3cqw 0 0 var(--esp), 0 .3cqw 0 var(--esp), 0 -.3cqw 0 var(--esp),
               .22cqw .22cqw 0 var(--esp), -.22cqw .22cqw 0 var(--esp), .22cqw -.22cqw 0 var(--esp), -.22cqw -.22cqw 0 var(--esp), 0 1cqw 0 rgba(0, 0, 0, .35); }
.ci-games .ci-arch > span > i { display: inline-block; font-style: normal; opacity: 0; transform: translateY(4cqw) scale(.4);
  animation: ci-pop .5s cubic-bezier(.2, 1.7, .4, 1) forwards; animation-delay: calc(.85s + var(--i) * .09s); }
@keyframes ci-pop { to { opacity: 1; transform: none; } }
@keyframes ci-fade { to { opacity: 1; } }

/* sparkles around the logo */
.ci-spark { position: absolute; width: 3cqw; aspect-ratio: 1; background: #FFFBE6; opacity: 0;
  clip-path: polygon(50% 0, 60% 40%, 100% 50%, 60% 60%, 50% 100%, 40% 60%, 0 50%, 40% 40%);
  animation: ci-twinkle 1.6s ease-in-out infinite; animation-delay: var(--d, 0s); }
@keyframes ci-twinkle { 0%, 100% { opacity: 0; transform: scale(.2) rotate(0deg); } 50% { opacity: 1; transform: scale(1) rotate(45deg); } }

/* the churro loading bar */
.ci-bar { position: relative; width: 42cqw; height: 3.8cqw; margin-top: 3.6cqh; border-radius: 99px; overflow: hidden;
  background: rgba(0, 0, 0, .35); box-shadow: inset 0 .3cqw .5cqw rgba(0, 0, 0, .45), 0 0 0 .35cqw rgba(242, 194, 74, .35);
  opacity: 0; animation: ci-fade .4s ease-out .5s forwards; }
.ci-bar b { position: absolute; inset: 0; border-radius: 99px; clip-path: inset(0 98% 0 0 round 99px); transition: clip-path .35s ease-out;
  background: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 400 36' preserveAspectRatio='none'><defs><linearGradient id='g' x1='0' y1='0' x2='0' y2='1'><stop offset='0' stop-color='%23F7D58A'/><stop offset='.3' stop-color='%23E9A948'/><stop offset='.62' stop-color='%23C97A26'/><stop offset='1' stop-color='%238F4C14'/></linearGradient></defs><rect width='400' height='36' rx='18' fill='url(%23g)'/><g stroke='%237A3F12' stroke-width='2.2' stroke-linecap='round' opacity='.7' fill='none'><path d='M16 11H384'/><path d='M12 19H388'/><path d='M16 27H384'/></g><g stroke='%23FFE6A8' stroke-width='1.6' stroke-linecap='round' opacity='.75' fill='none'><path d='M18 8H382'/><path d='M14 16H386'/></g><rect x='246' y='20' width='3' height='2' rx='1' fill='%23fff' opacity='0.65'/><rect x='257' y='16' width='2' height='2' rx='1' fill='%23fff' opacity='0.95'/><rect x='255' y='23' width='2' height='2' rx='1' fill='%23fff' opacity='0.8'/><rect x='188' y='10' width='3' height='2' rx='1' fill='%23fff' opacity='0.95'/><rect x='228' y='5' width='2' height='2' rx='1' fill='%23fff' opacity='0.8'/><rect x='118' y='23' width='2' height='2' rx='1' fill='%23fff' opacity='0.95'/><rect x='297' y='6' width='3' height='2' rx='1' fill='%23fff' opacity='0.65'/><rect x='179' y='8' width='2' height='2' rx='1' fill='%23fff' opacity='0.95'/><rect x='302' y='24' width='2' height='2' rx='1' fill='%23fff' opacity='0.95'/><rect x='122' y='24' width='3' height='2' rx='1' fill='%23fff' opacity='0.65'/><rect x='247' y='9' width='3' height='2' rx='1' fill='%23fff' opacity='0.95'/><rect x='374' y='23' width='2' height='2' rx='1' fill='%23fff' opacity='0.95'/><rect x='148' y='8' width='2' height='2' rx='1' fill='%23fff' opacity='0.8'/><rect x='38' y='11' width='3' height='2' rx='1' fill='%23fff' opacity='0.65'/><rect x='15' y='19' width='2' height='2' rx='1' fill='%23fff' opacity='0.95'/><rect x='129' y='21' width='2' height='2' rx='1' fill='%23fff' opacity='0.65'/><rect x='131' y='15' width='3' height='2' rx='1' fill='%23fff' opacity='0.95'/><rect x='35' y='25' width='2' height='2' rx='1' fill='%23fff' opacity='0.65'/><rect x='147' y='13' width='3' height='2' rx='1' fill='%23fff' opacity='0.8'/><rect x='150' y='17' width='2' height='2' rx='1' fill='%23fff' opacity='0.8'/><rect x='31' y='9' width='2' height='2' rx='1' fill='%23fff' opacity='0.95'/><rect x='295' y='24' width='2' height='2' rx='1' fill='%23fff' opacity='0.8'/><rect x='205' y='23' width='2' height='2' rx='1' fill='%23fff' opacity='0.8'/><rect x='54' y='20' width='2' height='2' rx='1' fill='%23fff' opacity='0.8'/><rect x='28' y='24' width='2' height='2' rx='1' fill='%23fff' opacity='0.95'/><rect x='141' y='17' width='2' height='2' rx='1' fill='%23fff' opacity='0.8'/><rect x='117' y='19' width='2' height='2' rx='1' fill='%23fff' opacity='0.8'/><rect x='269' y='11' width='2' height='2' rx='1' fill='%23fff' opacity='0.65'/><rect x='69' y='19' width='2' height='2' rx='1' fill='%23fff' opacity='0.95'/><rect x='282' y='7' width='3' height='2' rx='1' fill='%23fff' opacity='0.65'/><rect x='358' y='6' width='3' height='2' rx='1' fill='%23fff' opacity='0.65'/><rect x='142' y='10' width='3' height='2' rx='1' fill='%23fff' opacity='0.8'/><rect x='68' y='25' width='3' height='2' rx='1' fill='%23fff' opacity='0.95'/><rect x='312' y='12' width='2' height='2' rx='1' fill='%23fff' opacity='0.95'/><rect x='379' y='16' width='2' height='2' rx='1' fill='%23fff' opacity='0.65'/><rect x='347' y='13' width='2' height='2' rx='1' fill='%23fff' opacity='0.8'/><rect x='153' y='6' width='2' height='2' rx='1' fill='%23fff' opacity='0.8'/><rect x='67' y='23' width='3' height='2' rx='1' fill='%23fff' opacity='0.95'/><rect x='377' y='14' width='2' height='2' rx='1' fill='%23fff' opacity='0.65'/><rect x='285' y='15' width='2' height='2' rx='1' fill='%23fff' opacity='0.8'/><rect x='164' y='8' width='2' height='2' rx='1' fill='%23fff' opacity='0.65'/><rect x='371' y='18' width='2' height='2' rx='1' fill='%23fff' opacity='0.8'/><rect x='81' y='15' width='3' height='2' rx='1' fill='%23fff' opacity='0.65'/><rect x='337' y='12' width='2' height='2' rx='1' fill='%23fff' opacity='0.65'/><rect x='233' y='6' width='2' height='2' rx='1' fill='%23fff' opacity='0.8'/><rect x='222' y='18' width='2' height='2' rx='1' fill='%23fff' opacity='0.8'/></svg>") center / 100% 100% no-repeat; }
/* the churro's rounded, ridged ends */
.ci-bar::after { content: ""; position: absolute; inset: 0; border-radius: 99px; pointer-events: none; box-shadow: inset .5cqw 0 .5cqw -.2cqw rgba(90, 40, 8, .55), inset -.5cqw 0 .5cqw -.2cqw rgba(90, 40, 8, .35); }
.ci-tag { position: relative; margin: 6.5cqh 0 0; text-align: center; padding: 0 4cqw;
  font-family: "Barlow Condensed", "Arial Narrow", system-ui, sans-serif; font-weight: 600; font-size: 4.1cqw; letter-spacing: .06em; line-height: 1.15; color: var(--cream);
  opacity: 0; transform: translateY(2cqw); animation: ci-up .6s ease-out 1.5s forwards; }
.ci-tag-x::before, .ci-tag-x::after { content: ""; display: inline-block; vertical-align: middle; width: 5cqw; height: .3cqw; margin: 0 1.8cqw; background: linear-gradient(90deg, transparent, var(--gold)); border-radius: 2px; }
.ci-tag-x::after { background: linear-gradient(90deg, var(--gold), transparent); }
.ci-since { display: block; margin-top: .8cqw; font-family: "Alegreya SC", Georgia, serif; font-weight: 700; font-size: 2.6cqw; letter-spacing: .14em; color: var(--gold); }
@keyframes ci-up { to { opacity: 1; transform: none; } }

/* ------------------------------------------------------------------ */
/* 2) the game's cover                                                */
/* ------------------------------------------------------------------ */
.ci-cover { position: absolute; inset: 0; z-index: 1; display: flex; flex-direction: column; align-items: center; justify-content: space-between; padding: 3.4cqh 3cqw 4.2cqh; pointer-events: none; }
.ci-cover::before, .ci-cover::after { content: ""; position: absolute; left: 0; right: 0; pointer-events: none; z-index: -1; }
.ci-cover::before { top: 0; height: 40%; background: linear-gradient(rgba(30, 14, 7, .58), rgba(30, 14, 7, 0)); }
.ci-cover::after { bottom: 0; height: 32%; background: linear-gradient(rgba(30, 14, 7, 0), rgba(30, 14, 7, .5)); }
.ci-head { display: flex; flex-direction: column; align-items: center; }
/* the small "CHURROMAN GAMES" logo: a tiny copy of the loading screen's logo (wordmark with the gold GAMES under it) */
.ci-kicker { display: flex; align-items: center; gap: 1.2cqw; opacity: 0; }
.ci-lock { display: flex; flex-direction: column; align-items: center; line-height: 1; }
.ci-lock img { height: 4.6cqw; width: auto; display: block; filter: drop-shadow(0 .25cqw 0 rgba(0, 0, 0, .45)); }
.ci-lock b { font-family: "Grenze", "Alegreya SC", Georgia, serif; font-weight: 800; font-size: 2.7cqw; line-height: 1; letter-spacing: .3cqw; margin: -.1cqw 0 0 .3cqw; color: var(--gold);
  text-shadow: 0 .07cqw 0 #FFE9A6, .1cqw 0 0 var(--esp), -.1cqw 0 0 var(--esp), 0 .1cqw 0 var(--esp), 0 -.1cqw 0 var(--esp),
               .07cqw .07cqw 0 var(--esp), -.07cqw .07cqw 0 var(--esp), .07cqw -.07cqw 0 var(--esp), -.07cqw -.07cqw 0 var(--esp), 0 .3cqw 0 rgba(0, 0, 0, .4); }
.ci-kicker svg { width: 5.4cqw; height: auto; fill: var(--gold); }
.ci-kicker svg.flip { transform: scaleX(-1); }
.ci-title { margin: -.2cqw 0 0; font-size: var(--ts, 10.5cqw); letter-spacing: .25cqw; color: var(--cream); opacity: 0;
  text-shadow: 0 .3cqw 0 #FFFFFF, .38cqw 0 0 var(--ink), -.38cqw 0 0 var(--ink), 0 .38cqw 0 var(--ink), 0 -.38cqw 0 var(--ink),
               .27cqw .27cqw 0 var(--ink), -.27cqw .27cqw 0 var(--ink), .27cqw -.27cqw 0 var(--ink), -.27cqw -.27cqw 0 var(--ink),
               0 .75cqw 0 var(--gold-dk), .3cqw .75cqw 0 var(--gold-dk), -.3cqw .75cqw 0 var(--gold-dk), 0 1.15cqw 0 var(--ink), 0 1.7cqw .6cqw rgba(0, 0, 0, .45); }
.ci-title .ci-gold { color: var(--gold); }
.ci-on .ci-kicker { animation: ci-fade .5s ease-out .15s forwards; }
.ci-on .ci-title { animation: ci-slam .7s cubic-bezier(.2, 1.6, .4, 1) .25s forwards; }
@keyframes ci-slam { 0% { opacity: 0; transform: scale(2.2) rotate(-4deg); } 60% { opacity: 1; } 100% { opacity: 1; transform: none; } }
.ci-wiggle { animation: ci-wig 3.2s ease-in-out 1.4s infinite; display: inline-block; }
@keyframes ci-wig { 0%, 86%, 100% { transform: none; } 89% { transform: rotate(-2.5deg) scale(1.03); } 93% { transform: rotate(2deg) scale(1.03); } 96% { transform: rotate(-1deg); } }

.ci-foot { display: flex; flex-direction: column; align-items: center; gap: 1.2cqw; pointer-events: auto; }
.ci-start {
  pointer-events: auto; position: relative; border: none; cursor: pointer; padding: 1.25cqw 7cqw 1.5cqw; border-radius: 99px;
  font-family: "Grenze", "Alegreya SC", Georgia, serif; font-weight: 800; font-size: 6.6cqw; line-height: 1; letter-spacing: .5cqw; color: var(--cream);
  background: linear-gradient(#D2483C, var(--red) 55%, #7F1F19);
  box-shadow: 0 0 0 .55cqw var(--gold), 0 0 0 1cqw var(--esp), 0 1.5cqw 0 1cqw var(--esp), 0 2.2cqw 2cqw rgba(0, 0, 0, .45), inset 0 .4cqw 0 rgba(255, 255, 255, .28);
  text-shadow: 0 .35cqw 0 rgba(0, 0, 0, .45);
  opacity: 0; transform: translateY(6cqw) scale(.7); -webkit-tap-highlight-color: transparent; touch-action: manipulation; outline: none;
}
.ci-on .ci-start { animation: ci-rise .55s cubic-bezier(.2, 1.6, .4, 1) .7s forwards, ci-pulse 1.1s ease-in-out 1.25s infinite; }
@keyframes ci-rise { to { opacity: 1; transform: none; } }
@keyframes ci-pulse { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.07); } }
/* the blinking word, arcade style */
.ci-start span { display: inline-block; }
.ci-on .ci-start span { animation: ci-blink 1.1s steps(1, end) 1.25s infinite; }
@keyframes ci-blink { 0%, 64% { opacity: 1; } 65%, 100% { opacity: .18; } }
.ci-start::after { content: ""; position: absolute; inset: -2.4cqw; border-radius: 99px; border: .5cqw solid rgba(255, 233, 166, .85); opacity: 0; }
.ci-on .ci-start::after { animation: ci-ring 1.1s ease-out 1.25s infinite; }
@keyframes ci-ring { 0% { opacity: .9; transform: scale(.85); } 100% { opacity: 0; transform: scale(1.18); } }
.ci-start:hover { filter: brightness(1.08); }
.ci-start:focus-visible { box-shadow: 0 0 0 .55cqw #fff, 0 0 0 1cqw var(--esp), 0 1.5cqw 0 1cqw var(--esp), 0 2.2cqw 2cqw rgba(0, 0, 0, .45); }
.ci-start:active { transform: translateY(1cqw) scale(.97) !important; animation-play-state: paused; }
.ci-hint { pointer-events: none; font-family: "Barlow Condensed", "Arial Narrow", system-ui, sans-serif; font-weight: 600; font-size: 2.3cqw; letter-spacing: .08em; color: var(--cream); opacity: 0; text-shadow: 0 .2cqw 0 rgba(0, 0, 0, .6); }
.ci-on .ci-hint { animation: ci-fade .5s ease-out 1.6s forwards; }

/* sound: phones and tablets only play sound after a tap */
.ci-sound { position: absolute; top: 2.4cqw; right: 2.4cqw; z-index: 3; display: flex; align-items: center; gap: .8cqw; border: none; cursor: pointer;
  padding: .9cqw 1.8cqw .9cqw 1.4cqw; border-radius: 99px; background: rgba(255, 243, 218, .94); color: var(--ink);
  font-family: "Barlow Condensed", "Arial Narrow", system-ui, sans-serif; font-weight: 600; font-size: 2.5cqw; letter-spacing: .04em;
  box-shadow: 0 .4cqw 0 var(--esp); pointer-events: auto; animation: ci-nudge 2.4s ease-in-out infinite; }
.ci-sound[hidden] { display: none; }
.ci-sound b { font-size: 3cqw; line-height: 1; }
@keyframes ci-nudge { 0%, 80%, 100% { transform: none; } 85% { transform: rotate(-4deg); } 90% { transform: rotate(4deg); } 95% { transform: rotate(-2deg); } }

/* leaving: the cover zooms past and the game's welcome card shows */
.ci.leaving .ci-cover { animation: ci-away .45s ease-in forwards; }
.ci.leaving { animation: ci-out .45s ease-in forwards; pointer-events: none; }
@keyframes ci-away { to { transform: scale(1.25); opacity: 0; } }
@keyframes ci-out { 0% { background: transparent; } 40% { background: rgba(255, 246, 225, .55); } 100% { background: transparent; opacity: 0; } }

@media (prefers-reduced-motion: reduce) {
  .ci-rays, .ci-dots, .ci-spark, .ci-sound, .ci-wiggle { animation: none; }
  .ci-on .ci-start, .ci-on .ci-start span, .ci-on .ci-start::after { animation: ci-rise .01s forwards; }
  .ci-wm, .ci-games .ci-arch > span > i, .ci-orn, .ci-tag, .ci-bar { animation-duration: .01s; animation-delay: 0s; }
  .ci-on .ci-title { animation: ci-fade .2s forwards; }
}