@font-face {
  font-family: 'Nunito';
  src: url('../fonts/Nunito.ttf') format('truetype');
  font-weight: 200 1000;
}

:root {
  --brown: #4a2a12;
  --brown-soft: #7a5a40;
  --dark: #7a4a24;
  --light: #f0d9b5;
  --ok: #2bb24c;
  --ok-dark: #1a7a31;
  --almost: #ff9f1c;
  --almost-dark: #c47300;
  --gold: #f4c300;
  --r-blue: #0085c7; --r-yellow: #f4c300; --r-black: #222; --r-green: #009f3d; --r-red: #df0024;
}

* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; overflow: hidden; background: #fff7e6; }
body { display: flex; align-items: center; justify-content: center; font-family: 'Nunito', system-ui, sans-serif; user-select: none; }
button { font: inherit; cursor: pointer; border: 0; padding: 0; background: none; color: inherit; }

/* 16:9 stage, letterboxed, everything sized in cqw */
#stage {
  width: min(100vw, 177.78vh); aspect-ratio: 16 / 9;
  position: relative; overflow: visible; container-type: inline-size; z-index: 0;
  background: linear-gradient(#8fd3fb 0%, #d6f0ff 50%, #fff7e6 58%);
}
/* Sky continued into the letterbox bands (the floor already overflows the
   stage sideways), so the scene fills any window shape. The stage height is
   56.25cqw: horizon stops at 50% and 58% = 28.125cqw and 32.625cqw. */
#stage::before {
  content: ''; position: absolute; z-index: -1; left: -100vw; right: -100vw; top: -100vh;
  height: calc(100vh + 32.625cqw);
  background: linear-gradient(#8fd3fb 100vh, #d6f0ff calc(100vh + 28.125cqw), #fff7e6 calc(100vh + 32.625cqw));
}
#stage.cover::before {
  height: calc(100vh + 41.625cqw);
  background: linear-gradient(#8fd3fb 100vh, #d6f0ff calc(100vh + 37.125cqw), #fff7e6 calc(100vh + 41.625cqw));
}
.floor {
  position: absolute; left: -150%; right: -150%; top: 52%; height: 110%;
  transform-origin: top center; transform: perspective(40cqw) rotateX(58deg);
  background-color: var(--light);
  background-image: conic-gradient(var(--dark) 25%, transparent 0 50%, var(--dark) 0 75%, transparent 0);
  background-size: 14cqw 14cqw;
  background-position: 110cqw 0; /* keeps the squares where they were before the floor widened */
}
.horizon { position: absolute; left: -100vw; right: -100vw; top: 50%; height: 4%; background: linear-gradient(transparent, rgba(255,255,255,.7), transparent); }

/* rings */
.rings { position: absolute; top: 3%; left: 50%; transform: translateX(-50%); display: flex; gap: .5cqw; background: rgba(255,255,255,.6); padding: .6cqw 1.2cqw; border-radius: 3cqw; z-index: 2; }
.ring { width: 3.6cqw; height: 3.6cqw; border-radius: 50%; border: .5cqw solid; opacity: .2; transition: opacity .3s; }
.ring.on { opacity: 1; }
.ring.pop { animation: ringpop .7s ease-out; }
.c0 { border-color: var(--r-blue); } .c1 { border-color: var(--r-yellow); } .c2 { border-color: var(--r-black); } .c3 { border-color: var(--r-green); } .c4 { border-color: var(--r-red); }
.bg0 { background: var(--r-blue); } .bg1 { background: var(--r-yellow); } .bg2 { background: var(--r-black); } .bg3 { background: var(--r-green); } .bg4 { background: var(--r-red); }

/* question capsule */
.q { position: absolute; left: 8%; right: 8%; top: 13%; min-height: 9cqw; line-height: 1.1; background: #fff; border-radius: 3cqw; padding: 1.4cqw 3cqw; text-align: center; color: var(--brown); box-shadow: 0 .6cqw 0 var(--dark); z-index: 2; display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 0 1cqw; }
.q:empty { display: none; }
.q .small { font-size: 2.3cqw; font-weight: 600; color: var(--brown-soft); }
.q .kw { font-size: 4cqw; font-weight: 900; color: var(--brown); letter-spacing: .1cqw; }
.q .kw.alt { color: var(--r-blue); }

#content { position: absolute; inset: 0; z-index: 2; pointer-events: none; }
#content > * { pointer-events: auto; }

/* generic white card */
.card { background: #fff; border-radius: 2.5cqw; padding: 1cqw; box-shadow: 0 .8cqw 0 rgba(74,42,18,.35); position: relative; display: flex; flex-direction: column; align-items: center; color: var(--brown); transition: transform .3s, opacity .3s, box-shadow .3s; }
button.card:not(.good):not(.dim):not(.pick):hover { transform: translateY(-.6cqw) rotate(0) !important; }
.card .lbl { font-size: 3cqw; font-weight: 900; letter-spacing: .15cqw; padding-top: .8cqw; text-align: center; line-height: 1; }
.card .lbl small { display: block; font-size: 1.6cqw; font-weight: 700; color: var(--brown-soft); letter-spacing: 0; margin-top: .4cqw; }
.pic { width: 100%; flex: 1; min-height: 0; border-radius: 1.8cqw; overflow: hidden; position: relative; display: flex; align-items: center; justify-content: center; background: #fdf6ea; }
.pic img.photo { width: 100%; height: 100%; object-fit: cover; }
.pic img.piece { height: 85%; }
.pic .icon { height: 62%; }
.ph { width: 100%; height: 100%; background: linear-gradient(#e3e9f0, #b9c6d6); display: flex; align-items: center; justify-content: center; position: relative; }
.ph svg { width: 45%; height: 60%; fill: #7f90a6; }
.ph i { position: absolute; top: 5%; left: 0; right: 0; text-align: center; font-style: normal; font-size: 1.3cqw; color: #33475e; font-family: monospace; }
.flag { position: absolute; right: .8cqw; bottom: .8cqw; width: 7cqw; height: 4.7cqw; border-radius: .5cqw; box-shadow: 0 0 0 .3cqw #fff, 0 .3cqw .8cqw rgba(0,0,0,.3); }
.flag-in { background: linear-gradient(#ff9933 33.3%, #fff 0 66.6%, #138808 0); }
.flag-in::after { content: ''; position: absolute; left: 50%; top: 50%; width: 1.4cqw; height: 1.4cqw; transform: translate(-50%,-50%); border-radius: 50%; border: .25cqw solid #000080; }
.flag-es { background: linear-gradient(#c60b1e 25%, #ffc400 0 75%, #c60b1e 0); }
.flag-no { background: linear-gradient(90deg, transparent 31.8%, #00205b 0 40.9%, transparent 0), linear-gradient(transparent 43.75%, #00205b 0 56.25%, transparent 0), linear-gradient(90deg, transparent 27.3%, #fff 0 45.5%, transparent 0), linear-gradient(transparent 37.5%, #fff 0 62.5%, transparent 0), #ba0c2f; }
.win-flag { transform: scale(0) rotate(-20deg); transition: transform .5s cubic-bezier(.3,1.6,.5,1) .5s; }
.card.good .win-flag { transform: scale(1) rotate(-6deg); }
.flag-ru { background: linear-gradient(#fff 33.3%, #0039a6 0 66.6%, #d52b1e 0); }

/* drawn art */
.art-board { width: 70%; aspect-ratio: 1; border: .6cqw solid var(--brown); border-radius: .6cqw; background-color: var(--light); background-image: conic-gradient(var(--dark) 25%, transparent 0 50%, var(--dark) 0 75%, transparent 0); background-size: 50% 50%; }
.art-pieces { display: flex; align-items: flex-end; justify-content: center; height: 60%; width: 100%; }
.art-pieces img { height: 100%; max-width: 34%; margin: 0 -.4cqw; }
.art-pieces img:nth-child(2) { height: 80%; }

/* layouts per screen type */
.row { position: absolute; left: 8%; right: 8%; top: 33%; display: grid; gap: 3cqw; align-items: center; }
.photos .card { height: 26cqw; transform: rotate(-2deg); }
.photos .card:nth-child(2) { transform: rotate(1.5deg); }
.photos .card:nth-child(3) { transform: rotate(-1deg); }
.photos.n2 { left: 10%; right: 10%; gap: 5cqw; }

.thumbs { left: 25%; right: 25%; gap: 6cqw; }
.thumbs .card { height: 25cqw; justify-content: center; }
.thumbs .card .icon { height: 14cqw; margin-bottom: .5cqw; }

.reveal { left: 5%; right: 5%; perspective: 80cqw; }
.flip { height: 26cqw; position: relative; transform-style: preserve-3d; transition: transform .6s ease-in-out; cursor: pointer; }
.flip.extra { height: 19cqw; }
.flip.shown { transform: rotateY(180deg); cursor: default; }
.flip .face { position: absolute; inset: 0; backface-visibility: hidden; }
.flip .back { border-radius: 2.5cqw; display: flex; align-items: center; justify-content: center; font-size: 10cqw; font-weight: 900; color: #fff; box-shadow: 0 .8cqw 0 rgba(74,42,18,.35); }
.flip:not(.shown):hover .back { transform: translateY(-.6cqw); }
.flip .front { transform: rotateY(180deg); }
/* backface-visibility doesn't reliably hide a face's positioned children
   (number, EXTRA tag) in Firefox, so swap the faces' visibility mid-flip. */
.flip .back { visibility: visible; transition: visibility 0s .3s; }
.flip .front { visibility: hidden; transition: visibility 0s .3s; }
.flip.shown .back { visibility: hidden; }
.flip.shown .front { visibility: visible; }
.flip.extra .front { box-shadow: inset 0 0 0 .6cqw var(--gold), 0 .8cqw 0 rgba(74,42,18,.35); }
.face .num { position: absolute; top: -2.5cqw; left: -1.5cqw; width: 5.5cqw; height: 5.5cqw; border-radius: 50%; background: var(--brown); color: #fff; font-size: 3cqw; font-weight: 900; display: flex; align-items: center; justify-content: center; z-index: 3; }
.face .tag { position: absolute; top: -2.8cqw; right: -1.5cqw; background: var(--gold); color: var(--brown); font-weight: 900; font-size: 2.2cqw; padding: .5cqw 1.5cqw; border-radius: 2cqw; transform: rotate(8deg); z-index: 3; }
.extra-back { background: linear-gradient(135deg, #f4c300, #e8a400); border: .5cqw dashed #fff; }

/* Rulebook (normas) */
.rules { position: absolute; left: 15%; right: 15%; top: 31%; bottom: 4%; display: grid; grid-template-rows: repeat(5, 1fr); gap: 1cqw; }
.rule { position: relative; cursor: pointer; }
.rule .cover, .rule .front { position: absolute; inset: 0; border-radius: 1.6cqw; box-shadow: 0 .5cqw 0 rgba(74,42,18,.35); }
.rule .cover { display: flex; align-items: center; justify-content: center; gap: 2cqw; color: #fff; font-size: 4.4cqw; font-weight: 900; transition: transform .3s, opacity .3s .25s; }
.rule:not(.shown):hover .cover { transform: translateY(-.4cqw); }
.rule .front { background: #fff; display: flex; align-items: center; gap: 1.5cqw; padding: 0 2cqw; clip-path: inset(0 100% 0 0); transition: clip-path .6s ease-out; }
.rule.shown { cursor: default; }
.rule.shown .cover { opacity: 0; }
.rule.shown .front { clip-path: inset(0 0 0 0); }
.rule .n { flex: none; width: 4.2cqw; height: 4.2cqw; border-radius: 50%; border-width: .55cqw; border-style: solid; display: flex; align-items: center; justify-content: center; font-size: 2.4cqw; font-weight: 900; color: var(--brown); }
.rule .pic { overflow: visible; background: transparent; flex: none; width: 13cqw; height: 100%; display: flex; align-items: center; justify-content: center; }
.rule .txt { display: flex; align-items: baseline; flex-wrap: wrap; column-gap: 1cqw; line-height: 1.1; }
.rule .txt .small { font-size: 2cqw; font-weight: 600; color: var(--brown-soft); }
.rule .txt .kw { font-size: 3.3cqw; font-weight: 900; color: var(--brown); letter-spacing: .1cqw; }
.rule .icon { height: 5.5cqw; }
.rule.shown .icon { animation: shake .5s ease-in-out .6s 3; }
@keyframes shake { 0%, 100% { transform: rotate(0); } 25% { transform: rotate(-10deg) translateY(-.3cqw); } 75% { transform: rotate(10deg) translateY(.3cqw); } }
.art-moves, .art-first, .art-draw, .art-mate { display: flex; align-items: center; justify-content: center; gap: .6cqw; height: 100%; }
.art-moves img, .art-first img, .art-draw img, .art-mate img { height: 4.6cqw; }
.art-first img.black, .art-draw img.black, .art-mate img.black { filter: invert(1); }
.art-draw span { font-size: 3.5cqw; font-weight: 900; color: var(--r-blue); }
.rule.shown .mv-wR { animation: slide-x 1.2s ease-in-out .6s 2; }
.rule.shown .mv-wN { animation: hop-l 1.2s ease-in-out .6s 2; }
.rule.shown .mv-wB { animation: slide-d 1.2s ease-in-out .6s 2; }
.rule.shown .go { animation: step-up 1s ease-out .6s 2; }
.rule.shown .art-draw .left { animation: lean-r 1s ease-in-out .6s 2; }
.rule.shown .art-draw .right { animation: lean-l 1s ease-in-out .6s 2; }
.rule.shown .hunter { animation: chase 1.2s ease-in-out .6s 2; }
.rule.shown .caught { animation: topple 1.2s ease-in-out .6s 2; transform-origin: 50% 100%; }
@keyframes chase { 0%, 100% { transform: none; } 50% { transform: translateX(1.2cqw); } }
@keyframes topple { 0%, 40%, 100% { transform: none; } 65% { transform: rotate(25deg); } }
@keyframes slide-x { 0%, 100% { transform: none; } 50% { transform: translateX(1cqw); } }
@keyframes hop-l { 0%, 100% { transform: none; } 30% { transform: translateY(-1cqw); } 60% { transform: translate(.8cqw, -1cqw); } }
@keyframes slide-d { 0%, 100% { transform: none; } 50% { transform: translate(.8cqw, -.8cqw); } }
@keyframes step-up { 0%, 100% { transform: none; } 50% { transform: translateY(-1cqw); } }
@keyframes lean-r { 0%, 100% { transform: none; } 50% { transform: rotate(12deg); } }
@keyframes lean-l { 0%, 100% { transform: none; } 50% { transform: rotate(-12deg); } }

.scatter { position: absolute; inset: 0; perspective: 80cqw; }
.scatter .slot { position: absolute; width: 19%; height: 24cqw; }
.scatter .flip { height: 100%; }
.scatter .card .lbl { font-size: 1.9cqw; letter-spacing: .05cqw; }
.favs { left: 5%; right: 5%; top: 36%; gap: 1.6cqw; }
.favs .card { height: 21cqw; }
.favs .card .pic { background: transparent; }
.favs .card .lbl { font-size: 2.3cqw; letter-spacing: .05cqw; }

/* answer states */
.card.good { transform: rotate(0) !important; box-shadow: inset 0 0 0 .7cqw var(--ok), 0 0 3cqw var(--ok); z-index: 3; }
.card.dim { opacity: .35; transform: scale(.9) !important; }
.card.wrong { animation: shake .5s ease-in-out; box-shadow: inset 0 0 0 .7cqw var(--almost), 0 .8cqw 0 rgba(74,42,18,.35); }
.card.pick { transform: none !important; box-shadow: inset 0 0 0 .7cqw var(--r-red), 0 0 3cqw var(--r-red); z-index: 3; }
.locked { pointer-events: none; }

.badge { position: absolute; left: 50%; bottom: 2.5%; text-align: center; transform: translateX(-50%) scale(0); transform-origin: 50% 100%; background: var(--ok); color: #fff; font-weight: 900; font-size: 3.4cqw; line-height: 1.1; padding: .7cqw 4cqw; border-radius: 4cqw; box-shadow: 0 .6cqw 0 var(--ok-dark); z-index: 4; white-space: nowrap; transition: transform .3s cubic-bezier(.3,1.6,.5,1); pointer-events: none; }
.badge.show { transform: translateX(-50%) scale(1); }
.badge.try { background: var(--almost); box-shadow: 0 .6cqw 0 var(--almost-dark); }
.badge.try small { font-size: 2.4cqw; font-weight: 700; }
.badge .note { display: block; font-size: 1.7cqw; font-weight: 700; text-align: center; margin-top: .2cqw; opacity: .95; }

.surprise { position: absolute; right: 3%; top: 37%; width: 16%; padding: 1cqw; text-align: center; z-index: 4; transform: translateX(150%) rotate(3deg); opacity: 0; transition: transform .6s cubic-bezier(.3,1.4,.5,1), opacity .3s; }
.surprise.show { transform: translateX(0) rotate(3deg); opacity: 1; }
.surprise .icons .icon { height: 3.4cqw; margin: 0 .2cqw; }
.surprise.photo { width: 14%; height: 17cqw; right: 3%; top: 38%; padding: .8cqw; box-shadow: inset 0 0 0 .6cqw var(--gold), 0 .8cqw 0 rgba(74,42,18,.35); }
.surprise.photo .lbl { font-size: 1.7cqw; letter-spacing: .05cqw; }
.surprise b { display: block; font-size: 1.7cqw; color: var(--r-blue); line-height: 1.1; margin: .5cqw 0; }
.surprise p { margin: 0; font-size: 1.25cqw; font-weight: 700; }

.bubble { position: absolute; left: 50%; bottom: 5%; transform: translateX(-50%) scale(0); background: #fff; border: .4cqw solid var(--r-red); border-radius: 3cqw; padding: 1cqw 3cqw; font-size: 2.6cqw; font-weight: 800; color: var(--brown); white-space: nowrap; z-index: 4; transition: transform .3s cubic-bezier(.3,1.6,.5,1); }
.bubble.show { transform: translateX(-50%) scale(1); }

/* next + corner buttons */
.next { position: absolute; right: 3%; bottom: 5%; width: 9cqw; height: 9cqw; border-radius: 50%; background: var(--ok); color: #fff; font-size: 5cqw; font-weight: 900; display: flex; align-items: center; justify-content: center; box-shadow: 0 .6cqw 0 var(--ok-dark); z-index: 5; }
.next:disabled { background: #c9c9c9; box-shadow: 0 .6cqw 0 #999; cursor: default; }
.next:not(:disabled) { animation: bounce .8s ease-in-out infinite; }
.next.hidden { display: none; }
.corner { position: absolute; left: 1.2%; top: 2.5%; width: 4.5cqw; height: 4.5cqw; border-radius: 50%; background: rgba(255,255,255,.7); font-size: 2.6cqw; color: var(--brown); z-index: 5; }

/* start screen */
.start { position: absolute; left: 0; right: 0; top: 0; bottom: 30%; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2cqw; }
.start h1 { margin: 0; font-size: 6cqw; font-weight: 1000; color: var(--r-blue); letter-spacing: .3cqw; line-height: 1.05; text-align: center; }
.start h1 .lb { color: var(--dark); }
.start h1 .lw { color: var(--light); -webkit-text-stroke: .35cqw var(--dark); paint-order: stroke fill; }
.start h1 small { display: inline-block; font-size: 3cqw; color: var(--r-blue); letter-spacing: .1cqw; margin-top: 1.5cqw; background: #fff; padding: .4cqw 2.5cqw; border-radius: 3cqw; text-shadow: none; }
.start .hero { display: flex; align-items: flex-end; height: 12cqw; }
.start .hero img { height: 100%; } .start .hero img:nth-child(odd) { height: 80%; }
.play { font-size: 4.2cqw; font-weight: 1000; color: #fff; background: var(--ok); padding: 1.1cqw 5cqw; border-radius: 5cqw; box-shadow: 0 1cqw 0 var(--ok-dark); animation: bounce 1s ease-in-out infinite; letter-spacing: .2cqw; }

/* podium */
.podium-title { position: absolute; top: 12%; left: 0; right: 0; text-align: center; font-size: 5.5cqw; font-weight: 1000; color: var(--brown); text-shadow: 0 .4cqw 0 #fff; }
.pod { position: absolute; left: 39%; right: 25%; bottom: 0; height: 56%; display: grid; grid-template-columns: 1fr 1.15fr 1fr; align-items: end; gap: .6cqw; }
.pod > div { position: relative; display: flex; flex-direction: column; align-items: center; }
.step { width: 100%; background: #fff; border-radius: 1.5cqw 1.5cqw 0 0; display: flex; justify-content: center; font-size: 6cqw; font-weight: 1000; color: var(--brown); box-shadow: inset 0 -1cqw 0 rgba(0,0,0,.08); }
.s1 { height: 22cqw; } .s2 { height: 15cqw; } .s3 { height: 11cqw; }
.who { width: 13cqw; height: 13cqw; border-radius: 50%; overflow: hidden; border: .8cqw solid var(--gold); margin-bottom: -1cqw; z-index: 1; background: #fff; }
.who img.photo { width: 100%; height: 100%; object-fit: cover; display: block; }
.who .ph i { font-size: 1.1cqw; }
.side { height: 8cqw; margin-bottom: .5cqw; }
.medal { position: absolute; right: -1cqw; top: 7cqw; animation: swing 1.6s ease-in-out infinite alternate; z-index: 2; line-height: 1; }
.learned { position: absolute; left: 2%; top: 26%; bottom: 3%; width: 33%; padding: 1.4cqw 1.6cqw 1.4cqw 1.2cqw; justify-content: center; z-index: 3; transform: rotate(-1.5deg); align-items: stretch; }
.learned h2 { margin: 0 0 .8cqw; text-align: center; font-size: 2.2cqw; color: var(--r-blue); letter-spacing: .1cqw; }
.learned ul { margin: 0; padding-left: 2.2cqw; }
.learned li .cap { color: var(--r-blue); font-weight: 900; }
.learned li { font-size: 1.25cqw; margin-bottom: .4cqw; font-weight: 700; line-height: 1.2; }
.btns { position: absolute; right: 2.5%; top: 30%; width: 19%; display: flex; flex-direction: column; gap: 2cqw; }
.btns button { padding: 1.4cqw; border-radius: 2.5cqw; font-size: 2.2cqw; white-space: nowrap; font-weight: 1000; color: #fff; }
.btn-again { background: var(--r-blue); box-shadow: 0 .6cqw 0 #005a87; }
.btn-print { background: var(--r-green); box-shadow: 0 .6cqw 0 #006b29; }

/* confetti */
#fx { position: absolute; inset: 0; pointer-events: none; z-index: 6; overflow: hidden; }
.conf { position: absolute; top: -4%; width: 1.2cqw; height: 2cqw; border-radius: .3cqw; animation: fall linear forwards; }

@keyframes ringpop { 0% { transform: scale(1); } 50% { transform: scale(1.6); } 100% { transform: scale(1); } }
@keyframes bounce { 50% { transform: translateY(-1cqw); } }
@keyframes shake { 0%,100% { transform: translateX(0); } 20% { transform: translateX(-1.2cqw) rotate(-3deg); } 40% { transform: translateX(1.2cqw) rotate(2deg); } 60% { transform: translateX(-.8cqw); } 80% { transform: translateX(.8cqw); } }
@keyframes fall { to { transform: translateY(60cqw) rotate(720deg); } }
/* medal */
.medal .icon { width: 6cqw; display: block; }
@keyframes swing { from { transform: rotate(-10deg); } to { transform: rotate(10deg); } }

/* print: only the cheat sheet */
@media print {
  @page { margin: 2cm; }
  html, body { height: auto; overflow: visible; background: #fff; display: block; }
  #stage { width: auto; aspect-ratio: auto; overflow: visible; background: none; container-type: normal; }
  #stage > *:not(#content), #content > *:not(.learned) { display: none !important; }
  #stage::before { display: none; }
  #content { position: static; }
  .learned { position: static; width: auto; transform: none; box-shadow: none; padding: 0; }
  .learned h2 { font-size: 28pt; color: #000; }
  .learned h2::after { content: ' · CÉSAR · AJEDREZ'; }
  .learned li { font-size: 18pt; margin-bottom: 10pt; color: #000; }
}

/* cover: lower floor (≈3 rows of board) so the title sits on clear sky */
#stage.cover { background: linear-gradient(#8fd3fb 0%, #d6f0ff 66%, #fff7e6 74%); }
#stage.cover .floor { top: 71%; background-size: 17cqw 17cqw; }
#stage.cover .horizon { top: 69%; }