/* Space Defenders (js/arcade/space.js). Every class starts with .sd- */

.sd-wrap { display: flex; flex-direction: column; gap: 8px; width: 100%; height: calc(100vh - 136px); height: calc(100dvh - 136px); min-height: 520px; max-height: 1080px; }

/* ---------- the top: wave, shields, score, best, and how far through the level ---------- */
.sd-hud { display: flex; flex-wrap: wrap; gap: 6px; justify-content: center; align-items: center; font: 700 13px/1 var(--font-ui); color: var(--muted); }
.sd-chip { display: inline-flex; align-items: center; gap: 5px; min-height: 30px; padding: 3px 10px; border-radius: 999px; background: var(--card); box-shadow: var(--shadow-soft); white-space: nowrap; }
.sd-chip b { color: var(--ink); font-size: 18px; font-weight: 800; }
.sd-chip small { font-size: 13px; margin-left: -4px; }
.sd-sep { width: 2px; height: 16px; margin: 0 3px; border-radius: 2px; background: var(--line); }
.sd-best.sd-beat { padding: 1px 6px; border-radius: 8px; background: #FFF1A8; box-shadow: 0 0 0 2px #FFD84D; }
.sd-shields { gap: 4px; }
.sd-shields i { display: block; width: 16px; height: 19px; border-radius: 50% 50% 50% 50% / 34% 34% 66% 66%; background: linear-gradient(160deg, #C9F4FF 0%, #6FD6F5 55%, #3FB6E0 100%); box-shadow: inset 0 -3px 0 rgba(20, 90, 140, 0.18), inset 0 2px 0 rgba(255, 255, 255, 0.7); transition: background 0.3s, transform 0.3s; }
.sd-shields i.sd-gone { background: #E9E4F4; box-shadow: inset 0 0 0 2px #D9D1EC; transform: scale(0.82); }
.sd-prog { display: flex; align-items: center; gap: 10px; flex: none; padding: 0 4px; }
.sd-wave { font: 700 13px/1 var(--font-ui); color: var(--muted); white-space: nowrap; }
.sd-wave b { font-size: 17px; font-weight: 800; color: var(--ink); }
.sd-bar { position: relative; flex: 1; height: 9px; border-radius: 99px; background: #EDE7F6; overflow: hidden; }
.sd-bar i { position: absolute; left: 0; top: 0; display: block; width: 0; height: 100%; border-radius: inherit; background: linear-gradient(90deg, #B79CFF, #FF9EC7); transition: width 0.45s ease; }
.sd-bar .sd-tick { width: 3px; margin-left: -1.5px; border-radius: 0; background: #fff; transition: none; }

/* ---------- the sky ---------- */
.sd-field {
  position: relative; flex: 1; min-height: 340px; border-radius: var(--radius); overflow: hidden; isolation: isolate; touch-action: manipulation;
  background:
    radial-gradient(120% 55% at 50% 112%, rgba(255, 158, 210, 0.42), transparent 62%),
    radial-gradient(70% 45% at 12% 18%, rgba(155, 93, 229, 0.38), transparent 70%),
    radial-gradient(60% 40% at 92% 46%, rgba(76, 201, 240, 0.18), transparent 70%),
    linear-gradient(180deg, #1C1948 0%, #2B2468 48%, #43328C 100%);
  box-shadow: var(--shadow-soft), inset 0 0 0 3px rgba(255, 255, 255, 0.07);
}
.sd-sky, .sd-sky > i { position: absolute; pointer-events: none; }
.sd-sky { inset: 0; }
.sd-stars {
  inset: 0;
  background-image:
    radial-gradient(circle at 12px 18px, rgba(255, 255, 255, 0.95) 0 1.2px, transparent 2px),
    radial-gradient(circle at 70px 64px, rgba(255, 238, 200, 0.85) 0 1px, transparent 1.8px),
    radial-gradient(circle at 40px 110px, rgba(205, 220, 255, 0.85) 0 1.5px, transparent 2.3px),
    radial-gradient(circle at 95px 22px, rgba(255, 255, 255, 0.6) 0 0.8px, transparent 1.5px),
    radial-gradient(circle at 150px 80px, rgba(255, 200, 235, 0.8) 0 1.1px, transparent 1.9px);
  background-size: 110px 130px, 150px 90px, 170px 150px, 90px 70px, 210px 170px;
}
.sd-tw { font-style: normal; line-height: 1; color: #FFF3B0; text-shadow: 0 0 6px rgba(255, 240, 170, 0.9); animation: sd-twinkle 2.4s ease-in-out infinite; }
.sd-tw:nth-of-type(3n) { color: #FFC8EC; text-shadow: 0 0 6px rgba(255, 190, 235, 0.9); }
.sd-tw:nth-of-type(3n + 1) { color: #C8E8FF; text-shadow: 0 0 6px rgba(190, 225, 255, 0.9); }
@keyframes sd-twinkle { 0%, 100% { opacity: 0.35; transform: scale(0.7) rotate(0); } 50% { opacity: 1; transform: scale(1.15) rotate(30deg); } }
.sd-planet { border-radius: 50%; }
.sd-p1 { right: -28px; top: 22px; width: 96px; height: 96px; background: radial-gradient(circle at 34% 30%, #F3E8FF 0 12%, #D3BBFF 48%, #A98AF0 100%); box-shadow: inset -12px -10px 0 rgba(60, 40, 120, 0.12); }
.sd-p1::before { content: ''; position: absolute; left: 22%; top: 52%; width: 18px; height: 12px; border-radius: 50%; background: rgba(200, 90, 80, 0.22); box-shadow: 26px -24px 0 -3px rgba(200, 90, 80, 0.18); }
.sd-p1::after { content: ''; position: absolute; left: -30%; top: 38%; width: 160%; height: 26%; border-radius: 50%; border: 5px solid rgba(255, 214, 240, 0.85); border-top-color: rgba(255, 214, 240, 0.35); transform: rotate(-16deg); }
.sd-p2 { left: 14px; top: 36%; width: 36px; height: 36px; background: radial-gradient(circle at 64% 62%, rgba(60, 140, 120, 0.25) 0 4px, transparent 5px), radial-gradient(circle at 34% 40%, rgba(60, 140, 120, 0.22) 0 6px, transparent 7px), radial-gradient(circle at 36% 30%, #E4FFF3, #9FE7CC 70%); box-shadow: 0 0 14px rgba(160, 240, 210, 0.35); }
.sd-p3 { left: 58%; top: 18px; width: 16px; height: 16px; background: radial-gradient(circle at 35% 30%, #FFE1F0, #FF9EC7); box-shadow: 0 0 10px rgba(255, 160, 210, 0.6); }
.sd-comet { left: -20%; top: 12%; width: 80px; height: 3px; border-radius: 3px; background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.95)); transform: rotate(14deg); opacity: 0; animation: sd-comet 9s linear 3s infinite; }
@keyframes sd-comet { 0%, 86% { opacity: 0; translate: 0 0; } 88% { opacity: 1; } 100% { opacity: 0; translate: 520px 130px; } }

/* the home planet, its little dome houses, and the shield over them */
.sd-ground { position: absolute; left: -15%; width: 130%; height: 220px; bottom: -164px; border-radius: 50%; z-index: 1; pointer-events: none;
  background: radial-gradient(circle at 30% 14%, rgba(80, 170, 140, 0.25) 0 9px, transparent 10px), radial-gradient(circle at 68% 10%, rgba(80, 170, 140, 0.22) 0 6px, transparent 7px), radial-gradient(circle at 80% 22%, rgba(80, 170, 140, 0.2) 0 11px, transparent 12px), linear-gradient(180deg, #D4F7E6 0%, #9FE3C9 40%, #7CD3B6 100%);
  box-shadow: inset 0 5px 0 rgba(255, 255, 255, 0.6), 0 -6px 24px rgba(160, 255, 220, 0.25); }
.sd-houses { position: absolute; inset: 0; z-index: 2; pointer-events: none; }
.sd-house { position: absolute; width: 34px; height: 20px; margin-left: -17px; border-radius: 17px 17px 3px 3px; box-shadow: inset 0 -3px 0 rgba(0, 0, 0, 0.1); }
.sd-house::before { content: ''; position: absolute; left: 50%; bottom: 0; width: 9px; height: 11px; margin-left: -4.5px; border-radius: 5px 5px 0 0; background: rgba(46, 42, 71, 0.55); }
.sd-house::after { content: ''; position: absolute; left: 6px; top: 6px; width: 5px; height: 5px; border-radius: 50%; background: #FFF6B8; box-shadow: 17px 0 0 #FFF6B8, 0 0 6px #FFF6B8; }
.sd-h1 { left: 12%; bottom: 33px; background: linear-gradient(180deg, #FFE0EE, #FFB8D6); }
.sd-h2 { left: 28%; bottom: 47px; background: linear-gradient(180deg, #FFF6CC, #FFE07A); }
.sd-h3 { left: 72%; bottom: 47px; background: linear-gradient(180deg, #E4DAFF, #C2B0FF); }
.sd-h4 { left: 88%; bottom: 33px; background: linear-gradient(180deg, #DDF4FF, #A8DCFF); }
.sd-shield { position: absolute; z-index: 2; pointer-events: none; border-radius: 50%; border: 3px solid rgba(150, 235, 255, 0.8);
  background: linear-gradient(180deg, rgba(150, 230, 255, 0.2), rgba(150, 230, 255, 0.05) 35%, transparent 60%);
  box-shadow: 0 -2px 16px rgba(130, 225, 255, 0.55), inset 0 6px 14px rgba(150, 235, 255, 0.35); transition: opacity 0.4s, border-color 0.4s; }
.sd-shield.sd-s2 { border-color: rgba(150, 235, 255, 0.55); opacity: 0.8; }
.sd-shield.sd-s1 { border-color: rgba(255, 170, 210, 0.6); box-shadow: 0 -2px 14px rgba(255, 150, 200, 0.45); opacity: 0.65; }
.sd-shield.sd-s0 { opacity: 0; }
.sd-shield.sd-flick { animation: sd-flick 0.45s; }
.sd-shield.sd-hit { animation: sd-hit 0.6s; }
@keyframes sd-flick { 0%, 100% { opacity: 1; } 20%, 60% { opacity: 0.15; border-color: #FF8FB8; } 40%, 80% { opacity: 1; border-color: #FFB3D1; } }
@keyframes sd-hit { 0% { opacity: 1; } 15% { border-color: #FF6F91; box-shadow: 0 -4px 30px rgba(255, 110, 150, 0.9); background-color: rgba(255, 140, 180, 0.3); } 100% { } }

/* ---------- the star cannon ---------- */
.sd-cannon { position: absolute; inset: 0; z-index: 4; pointer-events: none; }
.sd-cannon > i { position: absolute; left: 50%; }
.sd-barrel { width: 20px; margin-left: -10px; border-radius: 10px 10px 7px 7px; transform-origin: 50% 100%; background: linear-gradient(90deg, #A68AF5, #E9E1FF 45%, #B79CFF); box-shadow: inset 0 -8px 0 rgba(90, 60, 170, 0.15); }
.sd-barrel::before { content: ''; position: absolute; left: -4px; right: -4px; top: -3px; height: 10px; border-radius: 6px; background: linear-gradient(180deg, #FFC2DA, #FF8FB8); }
.sd-barrel::after { content: '★'; position: absolute; left: 50%; top: -19px; transform: translateX(-50%); font: 900 15px/1 var(--font-ui); color: #FFE066; text-shadow: 0 0 8px rgba(255, 224, 102, 0.9); }
.sd-body { bottom: 38px; width: 78px; height: 50px; margin-left: -39px; border-radius: 39px 39px 16px 16px;
  background: radial-gradient(circle at 22% 68%, rgba(255, 120, 165, 0.5) 0 6px, transparent 7px), radial-gradient(circle at 78% 68%, rgba(255, 120, 165, 0.5) 0 6px, transparent 7px), linear-gradient(180deg, #FFF3F8 0%, #FFC9DE 100%);
  box-shadow: inset 0 -6px 0 rgba(210, 90, 140, 0.2), 0 5px 0 rgba(30, 20, 70, 0.22); }
.sd-body::before { content: ''; position: absolute; left: 26px; top: 20px; width: 7px; height: 9px; border-radius: 50%; background: #2E2A47; box-shadow: 19px 0 0 #2E2A47; }
.sd-body::after { content: ''; position: absolute; left: 50%; top: 30px; width: 12px; height: 6px; margin-left: -6px; border: 2.5px solid #2E2A47; border-top: 0; border-radius: 0 0 10px 10px; transition: transform 0.2s; }
.sd-cannon.sd-recoil .sd-body { animation: sd-recoil 0.25s; }
.sd-cannon.sd-oops .sd-body { animation: sd-oops 0.45s; }
.sd-cannon.sd-oops .sd-body::after { transform: translateY(3px) rotate(180deg); }
@keyframes sd-recoil { 40% { transform: translateY(4px) scaleY(0.92); } }
@keyframes sd-oops { 20%, 60% { transform: translateX(-4px); } 40%, 80% { transform: translateX(4px); } }

/* ---------- the ships ---------- */
.sd-ships { position: absolute; inset: 0; z-index: 3; pointer-events: none; }
.sd-ship { position: absolute; left: 0; top: 0; will-change: transform; }
.sd-bob { animation: sd-warp 0.4s ease-out both, sd-bob 2.6s ease-in-out 0.4s infinite; }
@keyframes sd-warp { from { transform: scale(0.2); opacity: 0; filter: brightness(2); } to { transform: none; opacity: 1; filter: none; } }
@keyframes sd-bob { 0%, 100% { transform: translateY(0) rotate(-2deg); } 50% { transform: translateY(-4px) rotate(2deg); } }
.sd-ufo { position: relative; display: flex; flex-direction: column; align-items: center; font-size: clamp(21px, 5.6vw, 34px); transform: scale(0.86); opacity: 0.86; filter: saturate(0.8); transition: transform 0.3s, opacity 0.3s, filter 0.3s; }
.sd-ufo i { font-style: normal; }
.sd-ship.sd-target .sd-ufo { transform: none; opacity: 1; filter: none; }
.sd-dome { position: relative; z-index: 1; width: 2.2em; height: 1.5em; margin-bottom: -0.42em; border-radius: 1.1em 1.1em 0.3em 0.3em; overflow: hidden;
  background: radial-gradient(circle at 28% 24%, rgba(255, 255, 255, 0.95) 0 0.13em, transparent 0.17em), linear-gradient(180deg, rgba(225, 246, 255, 0.92), rgba(170, 220, 255, 0.6));
  box-shadow: inset 0 0 0 2px rgba(255, 255, 255, 0.75); }
.sd-alien { position: absolute; left: 50%; bottom: 0.3em; width: 1.3em; height: 1.05em; margin-left: -0.65em; border-radius: 50% 50% 44% 44%; background: var(--al); }
.sd-alien::before, .sd-alien::after { content: ''; position: absolute; top: -0.22em; width: 0.16em; height: 0.3em; border-radius: 0.1em; background: var(--al); }
.sd-alien::before { left: 0.25em; transform: rotate(-18deg); }
.sd-alien::after { right: 0.25em; transform: rotate(18deg); }
.sd-eye { position: absolute; top: 0.32em; width: 0.2em; height: 0.24em; border-radius: 50%; background: #2E2A47; }
.sd-eye:first-child { left: 0.3em; }
.sd-eye:nth-child(2) { right: 0.3em; }
.sd-mouth { position: absolute; left: 50%; top: 0.58em; width: 0.32em; height: 0.15em; margin-left: -0.16em; border: 0.08em solid #2E2A47; border-top: 0; border-radius: 0 0 0.3em 0.3em; }
.sd-saucer { position: relative; z-index: 2; display: grid; place-items: center; min-width: 5.4em; padding: 0.3em 0.75em 0.4em; border-radius: 999px;
  background: linear-gradient(180deg, var(--hi) 0%, var(--c) 58%, var(--lo) 100%);
  box-shadow: inset 0 -0.2em 0 rgba(0, 0, 0, 0.12), inset 0 0.08em 0 rgba(255, 255, 255, 0.7), 0 0.25em 0.6em rgba(10, 5, 40, 0.4); transition: box-shadow 0.3s; }
.sd-sum { display: flex; align-items: center; gap: 0.22em; font: 800 1em/1 var(--font-ui); color: #2E2A47; white-space: nowrap; }
.sd-q { display: inline-grid; place-items: center; min-width: 1.2em; height: 1.2em; padding: 0 0.12em; border-radius: 0.35em; background: rgba(255, 255, 255, 0.8); border: 2px dashed rgba(127, 68, 200, 0.6); color: #7F44C8; }
.sd-q.sd-fill { background: #FFE066; border: 2px solid #F2B705; color: #2E2A47; animation: pop 0.3s; }
.sd-q.sd-told { background: #fff; border: 2px solid #FF8FB8; color: #C93E7A; }
.sd-lights { position: relative; z-index: 3; display: flex; gap: 0.42em; margin-top: -0.3em; }
.sd-lights i { width: 0.32em; height: 0.32em; border-radius: 50%; background: #FFF6B0; box-shadow: 0 0 0.25em 0.08em rgba(255, 240, 150, 0.85); animation: sd-blink 1.4s ease-in-out infinite; }
.sd-lights i:nth-child(2n) { background: #FFD1EC; box-shadow: 0 0 0.25em 0.08em rgba(255, 190, 230, 0.85); animation-delay: 0.7s; }
@keyframes sd-blink { 50% { opacity: 0.35; } }
.sd-beam { position: absolute; z-index: 0; left: 50%; top: 88%; width: 4em; height: 2.4em; margin-left: -2em; clip-path: polygon(32% 0, 68% 0, 100% 100%, 0 100%);
  background: linear-gradient(180deg, rgba(255, 236, 140, 0.6), rgba(255, 236, 140, 0)); opacity: 0; transition: opacity 0.3s; }
.sd-ship.sd-target .sd-beam { opacity: 1; animation: sd-beam 1.3s ease-in-out infinite; }
@keyframes sd-beam { 50% { opacity: 0.55; } }
.sd-ship.sd-target .sd-saucer { box-shadow: inset 0 -0.2em 0 rgba(0, 0, 0, 0.12), inset 0 0.08em 0 rgba(255, 255, 255, 0.7), 0 0 0 3px #fff, 0 0 0 6px #FFD84D, 0 0 22px 8px rgba(255, 216, 77, 0.55); }
/* ship colours: saucer (light, middle, dark) and the little alien inside */
.sd-c0 { --hi: #F1EAFF; --c: #CDB8FF; --lo: #A98EF0; --al: #9EF0C8; }
.sd-c1 { --hi: #E2FBEF; --c: #A8EBCF; --lo: #74D0AB; --al: #FFB3D1; }
.sd-c2 { --hi: #E3FAFB; --c: #A6E9EC; --lo: #6CCDD3; --al: #C2B2FF; }
.sd-c3 { --hi: #FFE8F2; --c: #FFB8D6; --lo: #F08CB7; --al: #A6E8FF; }
.sd-c4 { --hi: #E3F4FF; --c: #A8DCFF; --lo: #77BCEF; --al: #FFE58A; }
.sd-c5 { --hi: #FFF9D6; --c: #FFE98A; --lo: #F0C84C; --al: #B9F3A6; }
/* zapped, wrong, landed */
.sd-ship.sd-zapped .sd-bob { animation: sd-boom 0.6s ease-in 0.12s forwards; }
@keyframes sd-boom { 0% { transform: none; filter: brightness(1); } 30% { transform: scale(1.18); filter: brightness(1.7) saturate(1.3); opacity: 1; } 100% { transform: scale(0.3); filter: brightness(2.6); opacity: 0; } }
.sd-ship.sd-nope .sd-ufo { animation: sd-nope 0.42s; }
@keyframes sd-nope { 20%, 60% { transform: translateX(-7px) rotate(-4deg); } 40%, 80% { transform: translateX(7px) rotate(4deg); } }
.sd-ship.sd-crash .sd-bob { animation: sd-crash 0.85s ease-in forwards; }
@keyframes sd-crash { 0% { transform: none; } 18% { transform: scale(1.12, 0.82) translateY(6px); filter: saturate(0.6); } 55% { transform: scale(1); opacity: 1; filter: grayscale(0.7); } 100% { transform: translateY(14px) scale(0.6); opacity: 0; filter: grayscale(1); } }

/* ---------- effects ---------- */
.sd-fx { position: absolute; inset: 0; z-index: 6; pointer-events: none; }
.sd-laser { position: absolute; width: 12px; border-radius: 6px; transform-origin: 50% 100%;
  background: radial-gradient(circle, #fff 0 1.5px, transparent 2.2px) 0 0 / 12px 13px, linear-gradient(0deg, #fff 0%, #FFF3A6 30%, #FFB3E6 72%, #C9B2FF 100%);
  box-shadow: 0 0 10px 3px rgba(255, 220, 250, 0.85), 0 0 24px 7px rgba(180, 150, 255, 0.5); animation: sd-laser 0.4s ease-out forwards; }
@keyframes sd-laser { 0% { clip-path: inset(100% 0 0 0 round 6px); opacity: 1; } 35% { clip-path: inset(0 0 0 0 round 6px); opacity: 1; } 100% { clip-path: inset(0 0 0 0 round 6px); opacity: 0; } }
.sd-burst { position: absolute; left: 0; top: 0; }
.sd-burst::before { content: ''; position: absolute; left: -14px; top: -14px; width: 28px; height: 28px; border-radius: 50%; border: 4px solid #FFF3A6; box-shadow: 0 0 12px #FFE066; animation: sd-ring 0.5s ease-out forwards; }
@keyframes sd-ring { to { transform: scale(4.2); opacity: 0; border-width: 1px; } }
.sd-spark { position: absolute; left: 0; top: 0; font: 900 22px/1 var(--font-ui); font-style: normal; transform: translate(-50%, -50%); animation: sd-spark 0.75s cubic-bezier(0.2, 0.7, 0.4, 1) forwards; }
.sd-sp0 { color: #FFE066; } .sd-sp1 { color: #FFB3D1; } .sd-sp2 { color: #A8F0D6; } .sd-sp3 { color: #C9B8FF; }
@keyframes sd-spark { 0% { transform: translate(-50%, -50%) scale(0.3); opacity: 1; } 70% { opacity: 1; } 100% { transform: translate(calc(-50% + var(--dx)), calc(-50% + var(--dy))) scale(1.1) rotate(140deg); opacity: 0; } }
.sd-pts { position: absolute; transform: translate(-50%, -50%); font: 900 26px/1 var(--font-ui); color: #FFE066; -webkit-text-stroke: 5px #4A2E8F; paint-order: stroke fill; white-space: nowrap; animation: sd-pts 0.95s ease-out forwards; }
@keyframes sd-pts { 0% { opacity: 0; translate: 0 10px; scale: 0.5; } 25% { opacity: 1; scale: 1.2; } 100% { opacity: 0; translate: 0 -40px; scale: 1; } }
.sd-dud { position: absolute; display: grid; place-items: center; width: 46px; height: 46px; margin: -23px 0 0 -23px; border-radius: 50%; background: rgba(255, 214, 228, 0.95); border: 3px solid #FF8FB8; font: 900 22px/1 var(--font-ui); color: #C93E7A; animation: sd-dud 0.75s ease-out forwards; }
@keyframes sd-dud { 0% { transform: scale(0.4); opacity: 0; } 25% { transform: scale(1.1) translateY(-10px); opacity: 1; } 60% { transform: translateY(-34px) rotate(-12deg); opacity: 1; } 100% { transform: translateY(-46px) scale(1.5); opacity: 0; } }
.sd-banner { position: absolute; inset: 0; z-index: 8; display: grid; place-content: center; gap: 6px; text-align: center; pointer-events: none; animation: sd-banner var(--d, 1.8s) ease-out both; }
.sd-banner b { font: 900 clamp(40px, 12vw, 64px)/1 var(--font-ui); color: #FFE066; -webkit-text-stroke: 7px #4A2E8F; paint-order: stroke fill; }
.sd-banner small { justify-self: center; padding: 5px 14px; border-radius: 999px; background: rgba(255, 255, 255, 0.92); font: 800 16px/1.2 var(--font-ui); color: var(--grape-d); }
@keyframes sd-banner { 0% { opacity: 0; transform: scale(0.4) rotate(-6deg); } 18% { opacity: 1; transform: scale(1.1) rotate(2deg); } 30% { transform: none; } 82% { opacity: 1; } 100% { opacity: 0; transform: translateY(-24px); } }
.sd-wrap.sd-over .sd-field { filter: saturate(0.55) brightness(0.9); transition: filter 0.6s; }
.sd-wrap.sd-saved .sd-shield { border-color: #FFE066; box-shadow: 0 -2px 26px rgba(255, 224, 102, 0.8); }

/* ---------- the message and the number buttons ---------- */
.sd-msg { min-height: 1.25em; margin: 0; text-align: center; font: 800 17px/1.25 var(--font-ui); color: var(--grape-d); flex: none; }
.sd-keys { display: grid; grid-template-columns: repeat(5, 1fr); gap: 8px; width: min(100%, 540px); margin: 0 auto 6px; flex: none; }
.sd-four .sd-keys { grid-template-columns: repeat(4, 1fr); gap: 10px; }
@media (max-width: 600px) { .sd-keys { margin-bottom: 50px; } } /* above the mute and feedback buttons in the corners */
.sd-key { min-height: 54px; border: 0; border-radius: 16px; background: var(--card); box-shadow: 0 5px 0 #D5C9F2; font: 800 clamp(24px, 7vw, 32px)/1 var(--font-ui); color: var(--ink); cursor: pointer; touch-action: manipulation; transition: opacity 0.2s, transform 0.08s, box-shadow 0.08s; }
.sd-n5 .sd-key { min-height: 66px; font-size: clamp(30px, 9vw, 40px); }
.sd-four .sd-key { min-height: 66px; font-size: clamp(26px, 8vw, 36px); }
.sd-key:active { transform: translateY(4px); box-shadow: 0 1px 0 #D5C9F2; }
.sd-keys.sd-idle .sd-key { opacity: 0.55; }
.sd-key.sd-right { animation: sd-key-right 0.4s; }
.sd-key.sd-wrong { animation: sd-key-wrong 0.42s; }
@keyframes sd-key-right { 45% { background: #FFF1A8; transform: scale(1.1); box-shadow: 0 5px 0 #F2C94C, 0 0 16px rgba(255, 216, 77, 0.8); } }
@keyframes sd-key-wrong { 0%, 100% { transform: none; } 20%, 60% { transform: translateX(-6px); background: #FFE0EA; } 40%, 80% { transform: translateX(6px); background: #FFE0EA; } }

@media (min-width: 600px) {
  .sd-chip { min-height: 36px; padding: 4px 14px; font-size: 15px; }
  .sd-chip b { font-size: 21px; }
  .sd-wave { font-size: 15px; }
  .sd-wave b { font-size: 20px; }
  .sd-msg { font-size: 19px; }
  .sd-key { min-height: 64px; }
}

/* Calm the big motion: no bobbing, warping, comets, shakes or flying sparks (style.css cuts every
   animation short under reduce, so the fades that carry news get their time back here). */
@media (prefers-reduced-motion: reduce) {
  .sd-comet { display: none; }
  .sd-ship.sd-zapped .sd-bob { animation: sd-fade 0.35s forwards !important; }
  .sd-ship.sd-crash .sd-bob { animation: sd-calm 0.85s forwards !important; filter: grayscale(0.8); }
  .sd-laser { animation: sd-fade 0.4s forwards !important; }
  .sd-pts, .sd-dud { animation: sd-calm 0.9s forwards !important; }
  .sd-banner { animation: sd-calm var(--d, 1.8s) both !important; }
  .sd-shield.sd-flick { animation: sd-flick 0.45s !important; }
  .sd-shield.sd-hit { animation: sd-hit 0.6s !important; }
}
@keyframes sd-fade { to { opacity: 0; } }
@keyframes sd-calm { 0%, 80% { opacity: 1; } 100% { opacity: 0; } }