/* Reward moment on /code — coins, treasure chests, the multiplier stamp, medal cards and the
   lesson-complete banner (web/static/js/rewards.js; plans/2026-09-15-programming-club-code-page.md §7).
   Page-scoped plain CSS loaded by code/lesson.html: no Tailwind rebuild. Overlays sit above
   everything and take no pointer events, except the chest picker while it is open. */

.cr-layer { position: fixed; inset: 0; z-index: 2147483001; pointer-events: none; }
.cr-canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
.cr-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* "Correct!" — gold, outlined, bouncing up and away. */
.cr-pop {
  position: absolute;
  transform: translate(-50%, -50%);
  font-family: "Sora", "Outfit", system-ui, sans-serif;
  font-size: 2.5rem;
  font-weight: 800;
  letter-spacing: .02em;
  white-space: nowrap;
  background: linear-gradient(180deg, #fffbe0 0%, #ffd23f 55%, #f59e0b 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  -webkit-text-stroke: 1.5px #8a5a00;
  filter: drop-shadow(0 3px 0 #6b3d00) drop-shadow(0 0 18px rgba(255, 196, 0, .65));
  animation: cr-pop-in 1.6s cubic-bezier(.2, 1.4, .4, 1) forwards;
}
.cr-pop--small { font-size: 1.6rem; }
@keyframes cr-pop-in {
  0%   { opacity: 0; transform: translate(-50%, -30%) scale(.3) rotate(-8deg); }
  18%  { opacity: 1; transform: translate(-50%, -50%) scale(1.2) rotate(3deg); }
  30%  { transform: translate(-50%, -50%) scale(1) rotate(0); }
  75%  { opacity: 1; transform: translate(-50%, -85%) scale(1); }
  100% { opacity: 0; transform: translate(-50%, -125%) scale(.9); }
}

/* The ×3! multiplier stamp: slams in, tilted, with a hot glow. */
.cr-stamp {
  position: absolute;
  transform: translate(-50%, -50%) rotate(-12deg);
  font-family: "Sora", "Outfit", system-ui, sans-serif;
  font-size: 4.4rem;
  font-weight: 900;
  color: #fff;
  white-space: nowrap;
  -webkit-text-stroke: 3px #b91c1c;
  text-shadow: 0 5px 0 #7f1d1d, 0 0 30px rgba(255, 80, 40, .85), 0 0 70px rgba(255, 200, 0, .6);
  animation: cr-stamp-in 1.8s cubic-bezier(.2, 1.6, .3, 1) forwards;
}
@keyframes cr-stamp-in {
  0%       { opacity: 0; transform: translate(-50%, -50%) scale(3.4) rotate(-26deg); }
  16%      { opacity: 1; transform: translate(-50%, -50%) scale(.88) rotate(-10deg); }
  24%      { transform: translate(-50%, -50%) scale(1.1) rotate(-13deg); }
  32%, 80% { opacity: 1; transform: translate(-50%, -50%) scale(1) rotate(-12deg); }
  100%     { opacity: 0; transform: translate(-50%, -75%) scale(1.1) rotate(-12deg); }
}

/* ---- Treasure chests ---- */
.cr-chests {
  position: fixed;
  inset: 0;
  z-index: 2147483000;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1.3rem;
  padding-inline: 16px;
  background: radial-gradient(ellipse at center, rgba(60, 32, 0, .6) 0%, rgba(2, 6, 23, .86) 72%);
  cursor: pointer;
  animation: cr-fade-in .22s ease-out both;
}
.cr-chests.is-leaving { animation: cr-fade-out .3s ease-in both; }
.cr-chests-title {
  font-family: "Sora", "Outfit", system-ui, sans-serif;
  font-size: clamp(1.6rem, 5vw, 2.3rem);
  font-weight: 800;
  color: #ffe27a;
  text-align: center;
  text-shadow: 0 3px 0 #6b3d00, 0 0 24px rgba(255, 190, 0, .6);
  animation: cr-title-bob 1.2s ease-in-out infinite;
}
.cr-chests-title.is-done { animation: cr-fade-out .25s ease-in forwards; }
.cr-chests-row { display: flex; gap: clamp(.7rem, 4vw, 2.6rem); }
.cr-chest {
  position: relative;
  width: clamp(88px, 18vw, 156px);
  aspect-ratio: 6 / 5;
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
  filter: drop-shadow(0 12px 18px rgba(0, 0, 0, .55));
  transition: scale .15s ease-out, filter .15s;
  animation: cr-chest-in .45s cubic-bezier(.2, 1.5, .4, 1) calc(var(--i) * .08s) both,
             cr-bob 1.6s ease-in-out calc(.5s + var(--i) * .22s) infinite;
}
.cr-chest:hover, .cr-chest:focus-visible {
  scale: 1.1;
  outline: none;
  filter: drop-shadow(0 0 22px rgba(255, 210, 60, .8));
}
.cr-chest svg { display: block; width: 100%; height: 100%; overflow: visible; }
.cr-chest .cr-lid { transform-box: view-box; transform-origin: 12px 50px; transition: transform .38s cubic-bezier(.2, 1.7, .4, 1); }
.cr-chest .cr-glow { opacity: 0; transition: opacity .25s; }
.cr-chest.is-picked { animation: cr-rattle .45s linear both; }
.cr-chest.is-open { animation: none; scale: 1.2; filter: drop-shadow(0 0 30px rgba(255, 200, 40, .9)); }
.cr-chest.is-open .cr-lid { transform: translate(-6px, -22px) rotate(-30deg); }
.cr-chest.is-open .cr-glow { opacity: 1; }
.cr-chest.is-open::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 40%;
  z-index: -1;
  width: 340%;
  aspect-ratio: 1;
  border-radius: 50%;
  background: repeating-conic-gradient(from 0deg, rgba(255, 220, 90, .42) 0deg 9deg, transparent 9deg 22deg);
  -webkit-mask: radial-gradient(circle, #000 18%, transparent 66%);
  mask: radial-gradient(circle, #000 18%, transparent 66%);
  transform: translate(-50%, -50%);
  animation: cr-spin 5s linear infinite;
}
.cr-chest.is-other { animation: cr-sink .35s ease-in forwards; pointer-events: none; }
.cr-chest-prize { min-height: 3.2rem; text-align: center; }
.cr-chest-coins {
  font-family: "Sora", "Outfit", system-ui, sans-serif;
  font-size: clamp(1.8rem, 6vw, 2.6rem);
  font-weight: 800;
  color: #fff1a6;
  -webkit-text-stroke: 1px #8a5a00;
  text-shadow: 0 3px 0 #6b3d00, 0 0 20px rgba(255, 200, 0, .75);
  animation: cr-pop-up .45s cubic-bezier(.2, 1.6, .4, 1) both;
}
.cr-chest-extra { margin-top: .2rem; font-size: 1rem; font-weight: 700; color: #fde68a; }

@keyframes cr-chest-in { from { opacity: 0; transform: translateY(46px) scale(.6); } }
@keyframes cr-bob      { 0%, 100% { translate: 0 0; } 50% { translate: 0 -7px; } }
@keyframes cr-rattle {
  0%, 100% { rotate: 0deg; scale: 1.06; }
  20% { rotate: -9deg; scale: 1.1; }
  40% { rotate: 8deg; scale: 1.12; }
  60% { rotate: -6deg; scale: 1.14; }
  80% { rotate: 5deg; scale: 1.16; }
}
@keyframes cr-spin     { to { transform: translate(-50%, -50%) rotate(1turn); } }
@keyframes cr-sink     { to { opacity: 0; translate: 0 30px; scale: .8; } }
@keyframes cr-fade-in  { from { opacity: 0; } }
@keyframes cr-fade-out { to { opacity: 0; } }
@keyframes cr-title-bob { 50% { transform: translateY(-4px) scale(1.03); } }
@keyframes cr-pop-up   { from { opacity: 0; transform: scale(.4); } }

/* ---- Medal card ---- */
.cr-medal {
  --cr-tier: #d97706;
  position: fixed;
  left: 50%;
  bottom: 7vh;
  z-index: 2147483002;
  display: flex;
  align-items: center;
  gap: 1rem;
  width: max-content;
  max-width: calc(100vw - 32px);
  padding: .9rem 1.3rem .9rem .9rem;
  overflow: hidden;
  border: 2px solid var(--cr-tier);
  border-radius: 1.1rem;
  background: linear-gradient(135deg, rgba(34, 22, 4, .97), rgba(15, 23, 42, .97));
  box-shadow: 0 18px 50px rgba(0, 0, 0, .55), 0 0 32px color-mix(in srgb, var(--cr-tier) 45%, transparent);
  color: #f8fafc;
  pointer-events: none;
  transform: translateX(-50%);
  animation: cr-medal-in .55s cubic-bezier(.2, 1.5, .4, 1) both;
}
.cr-medal::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(105deg, transparent 35%, rgba(255, 255, 255, .3) 50%, transparent 65%);
  transform: translateX(-100%);
  animation: cr-shine 1.1s ease-out .35s both;
}
.cr-medal.is-leaving { animation: cr-medal-out .34s ease-in both; }
.cr-medal--gold   { --cr-tier: #fbbf24; }
.cr-medal--silver { --cr-tier: #cbd5e1; }
.cr-medal--bronze { --cr-tier: #e08a3c; }
.cr-medal-badge { position: relative; flex: none; width: 64px; height: 78px; }
.cr-medal-ribbon { position: absolute; left: 0; top: 0; width: 64px; height: 40px; }
.cr-medal-ribbon path:first-child { fill: #dc2626; }
.cr-medal-ribbon path:last-child { fill: #2563eb; }
.cr-medal-disc {
  position: absolute;
  left: 5px;
  bottom: 0;
  display: grid;
  place-items: center;
  width: 54px;
  height: 54px;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #fff 0%, var(--cr-tier) 38%, color-mix(in srgb, var(--cr-tier) 50%, #000) 100%);
  box-shadow: inset 0 0 0 3px rgba(255, 255, 255, .35), 0 3px 10px rgba(0, 0, 0, .45);
  color: #3b2300;
}
.cr-medal-disc svg { width: 26px; height: 26px; }
.cr-medal-text { min-width: 0; }
.cr-medal-kicker { font-size: .72rem; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; color: var(--cr-tier); }
.cr-medal-title { font-family: "Sora", "Outfit", system-ui, sans-serif; font-size: 1.25rem; font-weight: 800; line-height: 1.2; }
.cr-medal-zh { font-size: .95rem; color: #e2e8f0; }
.cr-medal-desc { margin-top: .1rem; font-size: .86rem; color: #cbd5e1; }
.cr-medal-note { margin-top: .15rem; font-size: .72rem; color: #94a3b8; }
@keyframes cr-medal-in  { from { opacity: 0; transform: translate(-50%, 60px) scale(.8); } }
@keyframes cr-medal-out { to { opacity: 0; transform: translate(-50%, 30px) scale(.95); } }
@keyframes cr-shine     { to { transform: translateX(100%); } }

/* ---- Lesson complete, card shake, still card ---- */
.cr-banner {
  position: absolute;
  left: 50%;
  top: 30%;
  transform: translate(-50%, -50%);
  font-family: "Sora", "Outfit", system-ui, sans-serif;
  font-size: clamp(2rem, 7vw, 3.8rem);
  font-weight: 900;
  color: #fff3b0;
  white-space: nowrap;
  -webkit-text-stroke: 2px #8a5a00;
  text-shadow: 0 5px 0 #6b3d00, 0 0 44px rgba(255, 200, 0, .75);
  animation: cr-pop-in 2.2s cubic-bezier(.2, 1.4, .4, 1) forwards;
}
.code-task.cr-gold-flash { animation: cr-gold .95s ease-out; }
@keyframes cr-gold {
  0%   { border-color: rgba(251, 191, 36, .95); box-shadow: 0 0 0 0 rgba(251, 191, 36, 0); }
  40%  { box-shadow: 0 0 0 6px rgba(251, 191, 36, .35), 0 0 44px rgba(251, 191, 36, .35); }
  100% { box-shadow: 0 0 0 0 rgba(251, 191, 36, 0); }
}
.cr-shake { animation: cr-shake .4s cubic-bezier(.36, .07, .19, .97) both; }
@keyframes cr-shake {
  10%, 90% { translate: -1px 0; }
  20%, 80% { translate: 2px 0; }
  30%, 50%, 70% { translate: -3px 0; }
  40%, 60% { translate: 3px 0; }
}
.cr-still {
  position: fixed;
  left: 50%;
  bottom: 8vh;
  z-index: 2147483002;
  max-width: calc(100vw - 32px);
  padding: .7rem 1.1rem;
  border: 2px solid #fbbf24;
  border-radius: .9rem;
  background: #1e1a0c;
  color: #fde68a;
  font-size: 1rem;
  transform: translateX(-50%);
}

/* Sound toggle in the lesson header. */
.code-sound-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2rem;
  border: 1px solid rgba(250, 204, 21, .32);
  border-radius: .5rem;
  background: rgba(250, 204, 21, .1);
  color: #fde68a;
  cursor: pointer;
  transition: background .15s;
}
.code-sound-btn:hover { background: rgba(250, 204, 21, .2); }
.code-sound-btn:focus-visible { outline: none; box-shadow: 0 0 0 2px rgba(250, 204, 21, .6); }
.code-sound-btn svg { width: 17px; height: 17px; }
.code-sound-btn .icon-sound-off { display: none; }
.code-sound-btn[aria-pressed="false"] .icon-sound-on { display: none; }
.code-sound-btn[aria-pressed="false"] .icon-sound-off { display: block; }

@media (prefers-reduced-motion: reduce) {
  .cr-pop, .cr-stamp, .cr-chests, .cr-chest, .cr-medal, .cr-medal::after, .cr-banner,
  .code-task.cr-gold-flash, .cr-shake { animation: none !important; }
}

/* ▼▼ LIGHT THEME — GENERATED by scripts/build_light_theme.py from the rules above. Do not edit by hand: run the builder. Hand tuning goes in 36-theme-light.css. ▼▼ */
html[data-theme="light"] .cr-pop{background-image:linear-gradient(180deg, rgb(110 96 0) 0%, rgb(125 95 0) 55%, rgb(143 91 2) 100%);filter:drop-shadow(0 3px 0 rgb(107 61 0/0.5)) drop-shadow(0 0 18px rgb(255 196 0/0.325))}
html[data-theme="light"] .cr-stamp{color:rgb(51 63 82);text-shadow:0 5px 0 rgb(127 29 29/0.5), 0 0 30px rgb(255 80 40/0.425), 0 0 70px rgb(255 200 0/0.3)}
html[data-theme="light"] .cr-chests{background-image:radial-gradient(ellipse at center, rgb(249 246 243/0.6) 0%, rgb(250 251 252/0.86) 72%)}
html[data-theme="light"] .cr-chests-title{color:rgb(125 98 0);text-shadow:0 3px 0 rgb(107 61 0/0.5), 0 0 24px rgb(255 190 0/0.3)}
html[data-theme="light"] .cr-chest{filter:drop-shadow(0 12px 18px rgb(0 0 0/0.193))}
html[data-theme="light"] .cr-chest:hover,html[data-theme="light"] .cr-chest:focus-visible{filter:drop-shadow(0 0 22px rgb(255 210 60/0.4))}
html[data-theme="light"] .cr-chest.is-open{filter:drop-shadow(0 0 30px rgb(255 200 40/0.45))}
html[data-theme="light"] .cr-chest-coins{color:rgb(117 99 0);text-shadow:0 3px 0 rgb(107 61 0/0.5), 0 0 20px rgb(255 200 0/0.375)}
html[data-theme="light"] .cr-chest-extra{color:rgb(117 94 0)}
html[data-theme="light"] .cr-medal{background-image:linear-gradient(135deg, rgb(251 250 248/0.97), rgb(244 245 249/0.97));box-shadow:0 18px 50px rgb(0 0 0/0.193), 0 0 32px color-mix(in srgb, var(--cr-tier) 45%, transparent);color:rgb(38 66 94)}
html[data-theme="light"] .cr-medal::after{background-image:linear-gradient(105deg, transparent 35%, rgb(15 23 42/0.3) 50%, transparent 65%)}
html[data-theme="light"] .cr-medal-ribbon path:first-child{fill:rgb(174 24 24)}
html[data-theme="light"] .cr-medal-ribbon path:last-child{fill:rgb(12 64 178)}
html[data-theme="light"] .cr-medal-disc{background-image:radial-gradient(circle at 35% 30%, #fff 0%, var(--cr-tier) 38%, color-mix(in srgb, var(--cr-tier) 50%, rgb(255 255 255)) 100%);box-shadow:inset 0 0 0 3px rgb(15 23 42/0.175), 0 3px 10px rgb(0 0 0/0.158)}
html[data-theme="light"] .cr-medal-zh{color:rgb(44 63 88)}
html[data-theme="light"] .cr-medal-desc{color:rgb(48 65 85)}
html[data-theme="light"] .cr-medal-note{color:rgb(61 75 94)}
html[data-theme="light"] .cr-banner{color:rgb(117 99 0);text-shadow:0 5px 0 rgb(107 61 0/0.5), 0 0 44px rgb(255 200 0/0.375)}
html[data-theme="light"] .cr-still{background-color:rgb(251 250 247);color:rgb(117 94 0)}
html[data-theme="light"] .code-sound-btn{color:rgb(117 94 0)}
html[data-theme="light"] .code-sound-btn:focus-visible{box-shadow:0 0 0 2px rgb(250 204 21/0.3)}
/* ▲▲ LIGHT THEME END ▲▲ */