:root { --leaf: #2E9E62; --leaf-soft: #E3F4EA; }
.chips-float { position: absolute; inset: 0; pointer-events: none; z-index: 0; }
.chip { position: absolute; padding: 6px 12px; border-radius: 999px; font-size: 15px; font-weight: 500; color: #fff; background: rgba(255, 255, 255, .12); border: 1px solid rgba(255, 255, 255, .22); animation: floaty 7s ease-in-out infinite; }
.chip:nth-child(2) { animation-duration: 9s; animation-delay: -3s; }
.chip:nth-child(3) { animation-duration: 8s; animation-delay: -5s; }
@keyframes floaty { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-14px); } }

.preview { position: relative; overflow: hidden; border-radius: 14px; height: 120px; }
.preview.rush { background: linear-gradient(180deg, #F5F9FE, #E4EFFB); }
.preview.rush .chip { animation: fallPreview 4.5s linear infinite; }
.preview.rush .chip:nth-child(2) { animation-delay: -1.5s; }
.preview.rush .chip:nth-child(3) { animation-delay: -3s; }
.preview.rush .line { position: absolute; left: 12px; right: 12px; bottom: 18px; border-top: 2px dashed rgba(255, 167, 38, .7); }
@keyframes fallPreview { 0% { transform: translateY(-34px); opacity: 0; } 12% { opacity: 1; } 80% { opacity: 1; } 100% { transform: translateY(96px); opacity: 0; } }
.preview.match { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; padding: 16px 22px; background: var(--c3-soft); perspective: 600px; }
.preview.match i { display: block; border-radius: 6px; background: var(--surface); border: 1px solid var(--blue-line); animation: flipPreview 3.6s ease-in-out infinite; }
.preview.match i.n { background: var(--navy); border-color: var(--navy); }
.preview.match i.g { background: var(--gold); border-color: var(--gold); }
.preview.match i:nth-child(2n) { animation-delay: -1.2s; }
.preview.match i:nth-child(3n) { animation-delay: -2.4s; }
@keyframes flipPreview { 0%, 35% { transform: rotateY(0); } 55%, 100% { transform: rotateY(180deg); } }
.preview.arena { background: var(--gold-soft); display: flex; align-items: center; justify-content: center; gap: 16px; font-family: var(--font-serif); font-style: italic; color: var(--ink-3); }
.preview.arena i { display: block; width: 36px; height: 36px; border-radius: 50%; background: var(--navy); animation: bob 2.4s ease-in-out infinite; }
.preview.arena i.g { background: var(--gold); animation-delay: -1.2s; }
@keyframes bob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-8px); } }

.arena { background: radial-gradient(600px 260px at 50% 0%, rgba(255, 255, 255, .9), transparent 70%), linear-gradient(180deg, #F5F9FE 0%, #E3EEFA 100%); border: 1.5px solid var(--blue-line); box-shadow: var(--shadow); border-radius: 22px; }
.arena .line { border-top-color: var(--orange); }
.arena .line-lbl { color: var(--c1-ink); font-weight: 700; }
.arena .stars { position: absolute; inset: 0; background-image: radial-gradient(rgba(21, 101, 192, .16) 1px, transparent 1.5px), radial-gradient(rgba(21, 101, 192, .1) 1px, transparent 1.5px); background-size: 90px 90px, 140px 140px; background-position: 10px 20px, 50px 70px; opacity: .6; pointer-events: none; }
.fall { background: #fff; border-color: var(--blue-line); border-radius: 999px; color: var(--navy); font-weight: 600; box-shadow: 0 8px 18px -10px rgba(13, 71, 161, .55); }
.fall.active { background: var(--grad-cta); border-color: #EF6C00; color: var(--ink); box-shadow: 0 0 0 4px rgba(255, 167, 38, .3), 0 10px 24px -8px rgba(245, 124, 0, .6); }
.fall.hit { animation: pop .38s ease forwards; }
.fall.missed { animation: shake .45s ease forwards; }
@keyframes pop { 0% { transform: translateY(var(--y, 0)) scale(1); } 45% { transform: translateY(var(--y, 0)) scale(1.18); } 100% { transform: translateY(var(--y, 0)) scale(.5); opacity: 0; } }
@keyframes shake { 0%, 100% { transform: translateY(var(--y, 0)) translateX(0); opacity: 1; } 20% { transform: translateY(var(--y, 0)) translateX(-8px); } 40% { transform: translateY(var(--y, 0)) translateX(8px); } 60% { transform: translateY(var(--y, 0)) translateX(-6px); } 80% { transform: translateY(var(--y, 0)) translateX(6px); opacity: .5; } }
.arena .overlay { background: rgba(255, 255, 255, .94); color: var(--ink); backdrop-filter: blur(3px); }
.arena .overlay h2 { color: var(--navy); }
.arena .overlay p { color: var(--ink-2); }
.arena .overlay a { color: var(--navy-2); }
.spark { position: absolute; width: 8px; height: 8px; border-radius: 50%; background: var(--orange-2); pointer-events: none; animation: spark .6s ease-out forwards; }
@keyframes spark { 0% { transform: translate(0, 0) scale(1); opacity: 1; } 100% { transform: translate(var(--dx), var(--dy)) scale(.2); opacity: 0; } }
.bump { animation: bump .35s ease; }
@keyframes bump { 0% { transform: scale(1); } 40% { transform: scale(1.25); color: var(--gold); } 100% { transform: scale(1); } }
.lives i { transition: transform .3s, background .3s; }
.lives i.off { animation: lifeLost .5s ease; }
@keyframes lifeLost { 0% { transform: scale(1.4); background: var(--red); } 100% { transform: scale(1); } }
.flame { display: inline-flex; align-items: center; gap: 4px; color: var(--coral); font-weight: 600; font-size: 16px; animation: flicker 1s ease-in-out infinite; }
@keyframes flicker { 0%, 100% { transform: scale(1); opacity: 1; } 50% { transform: scale(1.12); opacity: .85; } }
.timebar { height: 6px; border-radius: 999px; background: #E1EAF5; overflow: hidden; margin-top: 8px; }
.timebar i { display: block; height: 100%; background: linear-gradient(90deg, var(--orange-2), var(--orange)); transition: width .25s linear; }
.opt.right { animation: bump .35s ease; }
.opt.wrong { animation: shakeSmall .35s ease; }
@keyframes shakeSmall { 0%, 100% { transform: translateX(0); } 25% { transform: translateX(-5px); } 75% { transform: translateX(5px); } }

.board { perspective: 1000px; }
.face { border-radius: 14px; }
.face.back { border: 1.5px solid var(--blue-line) !important; background: radial-gradient(120% 90% at 50% 8%, rgba(255, 255, 255, .85) 0%, rgba(255, 255, 255, 0) 55%), linear-gradient(150deg, #EAF3FD 0%, #CFE3F8 100%); box-shadow: 0 4px 10px -6px rgba(13, 71, 161, .45); transition: transform .15s; }
.cardx:not(.up):not(.done):hover .face.back { transform: rotateY(180deg) scale(1.03); }
.cardx.done .in { animation: matchPop .5s ease; }
.cardx.done .face.front { border-color: var(--leaf); background: var(--leaf-soft); box-shadow: 0 0 0 3px rgba(61, 154, 92, .18); }
@keyframes matchPop { 0% { transform: rotateY(180deg) scale(1); } 50% { transform: rotateY(180deg) scale(1.08); } 100% { transform: rotateY(180deg) scale(1); } }
.confetti { position: absolute; inset: 0; pointer-events: none; overflow: hidden; z-index: 3; }
.confetti span { position: absolute; top: -12px; width: 9px; height: 14px; border-radius: 2px; animation: confetti 1.8s ease-in forwards; }
@keyframes confetti { 0% { transform: translateY(0) rotate(0); opacity: 1; } 100% { transform: translateY(420px) rotate(540deg); opacity: 0; } }
.board .overlay { border-radius: 22px; }

@media (prefers-reduced-motion: reduce) {
  .chip, .preview i, .preview .chip, .preview.arena i, .flame, .fall.hit, .fall.missed, .spark, .confetti span { animation: none !important; }
}
@media (max-width: 860px) { .chips-float { display: none; } }

@media (max-width: 720px) {
  .nums button { width: 44px; height: 44px; font-size: 16.5px; }
  .tf .sw button { padding: 12px 18px; font-size: 16.5px; }
  .opt { padding: 14px 16px; }
  .short input { padding: 14px; font-size: 28px; }
  .term-list button { padding: 11px 0; }
  .modes button { padding: 11px 0; }
  .trow { padding: 14px 16px; }
  .term { padding: 2px 0 3px; }
  .fall { font-size: 16.5px; padding: 9px 14px; max-width: calc(100% - 20px); white-space: normal; text-align: center; line-height: 1.25; }
  .preview { height: 104px; }

  body .nums button { width: 44px; height: 44px; }
  body .modes button { padding: 12px 0; }
  body .tf .sw button { padding: 13px 18px; }
  body .short input { padding: 14px; }
  body .term-list button { padding: 12px 0; }
  body .opt { min-height: 48px; }
  body .top .exit, body .fb a, body .side a.small, body .exam-top .exit { display: inline-block; padding: 10px 0; }
  body .ph-footer nav a, body .crumb a, body .qhead a, body .section-head a,
  body p > a.small, body .side .small a, body .chapter-block .head a { display: inline-block; padding: 10px 0; }
  body .list .tfoot button { padding-block: 13px; }
  body .search input { padding: 6px 0; }
}