/* TamilEzhutthukal: the YoungReader look (landscape first, sky, glossy gradient buttons, wooden signposts, sound popup).
   Colours come from /theme.css; buttons and bars use var(--grad). Sizes are in --dvh / --dvw (1% of the screen's height / width): app.js sets them
   and lays an upright phone on its side (html.rot), like YoungReader. */

/* no caret, no text highlight, no grey tap flash (nothing here is typed into) */
html, body, div, p, span, h1, h2, h3, small, label, button, svg, b, img { -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; caret-color: transparent; }
* { -webkit-tap-highlight-color: transparent; }
button:focus { outline: none; }
button:focus-visible { outline: 2px solid var(--violet); outline-offset: 2px; }  /* keyboard users keep a focus ring */

html { --dvh: 1dvh; --dvw: 1vw; height: 100%; }
html.rot body { position: fixed; top: 0; left: var(--vhpx); width: var(--vwpx); height: var(--vhpx); transform: rotate(90deg); transform-origin: 0 0; overflow: hidden; }
body { touch-action: manipulation; margin: 0; min-height: 100%; font-weight: 600; overflow-x: hidden; color: #221c33; }
[hidden] { display: none !important; }
button { font: inherit; color: inherit; cursor: pointer; }
.tamil { font-family: 'Nirmala UI', 'Noto Sans Tamil', 'Latha', system-ui, sans-serif; }
.screen { position: relative; height: calc(var(--dvh) * 100); overflow: hidden; }

/* ------------------------------------------------------------------ the sky: the same on every page */
.sky { position: absolute; inset: 0; z-index: 0; overflow: hidden; background: linear-gradient(#7fcdff 0%, #bfe6ff 48%, #eefbe0 100%); }
.sun { position: absolute; top: -8%; left: 6%; width: calc(var(--dvh) * 30); height: calc(var(--dvh) * 30); border-radius: 50%; background: radial-gradient(circle, #fff6b8 0 38%, rgba(255, 238, 140, .55) 40%, transparent 70%); animation: glow 5s ease-in-out infinite; }
.cloud { position: absolute; width: calc(var(--dvh) * 24); height: calc(var(--dvh) * 8); border-radius: 999px; background: #fff; opacity: .92; animation: drift 70s linear infinite; }
.cloud::before, .cloud::after { content: ''; position: absolute; background: #fff; border-radius: 50%; }
.cloud::before { width: 42%; height: 150%; left: 14%; top: -70%; } .cloud::after { width: 32%; height: 120%; left: 52%; top: -45%; }
.c1 { top: 12%; left: -30%; } .c2 { top: 30%; left: -60%; animation-duration: 95s; animation-delay: -30s; transform: scale(.7); } .c3 { top: 6%; left: -10%; animation-duration: 120s; animation-delay: -70s; transform: scale(.55); }
.hill { position: absolute; bottom: -18%; border-radius: 50%; }
.h1 { left: -12%; width: 70%; height: 46%; background: #8fd36b; } .h2 { right: -16%; width: 80%; height: 38%; background: #6cc25a; }
@keyframes drift { to { margin-left: 150vw; } }
@keyframes glow { 50% { transform: scale(1.08); opacity: .85; } }

/* ------------------------------------------------------------------ buttons and chips */
.round { flex: none; width: calc(var(--dvh) * 10); height: calc(var(--dvh) * 10); min-width: 40px; min-height: 40px; border-radius: 50%; border: 0; background: var(--grad); color: #fff; display: grid; place-items: center; box-shadow: 0 3px 0 #1c1165; padding: 0; }
.round:active { transform: translateY(2px); box-shadow: 0 1px 0 #1c1165; }
.round svg { width: 55%; height: 55%; }
.chip { display: inline-flex; align-items: center; gap: 6px; padding: calc(var(--dvh) * 1) 14px; border-radius: 999px; background: #fff; border: 2px solid #ffd978; box-shadow: 0 3px 0 #e0b24a; font-size: calc(var(--dvh) * 5.2); font-weight: 900; color: #6b4a00; }
.chip svg { width: calc(var(--dvh) * 5.6); height: calc(var(--dvh) * 5.6); }
.start-btn { position: relative; overflow: hidden; border: 0; border-radius: 999px; padding: calc(var(--dvh) * 2.4) calc(var(--dvh) * 10); font-size: calc(var(--dvh) * 7); font-weight: 900; color: #fff; letter-spacing: .5px; background: var(--grad);
  box-shadow: 0 calc(var(--dvh) * 1.6) 0 #1c1165, 0 calc(var(--dvh) * 2.8) 16px rgba(28, 17, 101, .35), inset 0 2px 0 rgba(255, 255, 255, .35); animation: beat 1.6s ease-in-out infinite; }
.start-btn::after { content: ''; position: absolute; top: 0; left: -60%; width: 35%; height: 100%; background: linear-gradient(100deg, transparent, rgba(255, 255, 255, .55), transparent); transform: skewX(-18deg); animation: shine 3.2s ease-in-out infinite; }
.start-btn:active { transform: translateY(calc(var(--dvh) * 1.2)); animation: none; box-shadow: 0 calc(var(--dvh) * .3) 0 #1c1165, inset 0 2px 0 rgba(255, 255, 255, .35); }
.start-btn.calm { animation: none; }
@keyframes beat { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.06); } }
@keyframes shine { 0%, 60% { left: -60%; } 100% { left: 130%; } }

/* the glossy candy button: letters, the three games, the quiz answers */
.gbtn { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: calc(var(--dvh) * .6); padding: 4px; border: 0; border-radius: 20px; color: #fff; overflow: hidden;
  background: var(--grad); box-shadow: 0 calc(var(--dvh) * 1.5) 0 #1c1165, 0 calc(var(--dvh) * 2.6) 14px rgba(28, 17, 101, .32), inset 0 2px 0 rgba(255, 255, 255, .35); transition: transform .12s, box-shadow .12s; }
.gbtn::before { content: ''; position: absolute; left: 6%; right: 6%; top: 3%; height: 38%; border-radius: 20px 20px 60% 60%; background: linear-gradient(rgba(255, 255, 255, .42), rgba(255, 255, 255, 0)); pointer-events: none; }
.gbtn::after { content: ''; position: absolute; top: 0; left: -60%; width: 40%; height: 100%; background: linear-gradient(100deg, transparent, rgba(255, 255, 255, .5), transparent); transform: skewX(-18deg); animation: shine 4.5s ease-in-out infinite; pointer-events: none; }
.gbtn:nth-child(3n)::after { animation-delay: 1.2s; } .gbtn:nth-child(3n+1)::after { animation-delay: 2.4s; }
.gbtn:hover { transform: translateY(-3px); }
.gbtn:active { transform: translateY(calc(var(--dvh) * 1.2)); box-shadow: 0 calc(var(--dvh) * .3) 0 #1c1165, 0 4px 8px rgba(28, 17, 101, .3), inset 0 2px 0 rgba(255, 255, 255, .35); }
.gbtn.shake { animation: shake .4s; }
@keyframes shake { 20%, 60% { transform: translateX(-6px) rotate(-2deg); } 40%, 80% { transform: translateX(6px) rotate(2deg); } }

/* ------------------------------------------------------------------ the start page */
#start { color: #1c1165; }
.pick-music { position: absolute; top: calc(env(safe-area-inset-top) + 10px); left: 10px; z-index: 3; }
.start-inner { position: relative; z-index: 2; height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: calc(var(--dvh) * 2); padding: 0 16px; text-align: center; }
.logo { margin: 0; font-weight: 900; letter-spacing: .5px; background: var(--grad); -webkit-background-clip: text; background-clip: text; color: transparent; line-height: 1.25; }
.big-logo { font-size: calc(var(--dvh) * 15); filter: drop-shadow(0 3px 0 rgba(255, 255, 255, .85)); }
.tag2 { margin: 0; font-size: calc(var(--dvh) * 5); font-weight: 800; color: #1c1165; text-shadow: 0 2px 0 rgba(255, 255, 255, .8); }
.crowd { display: flex; align-items: flex-end; justify-content: center; gap: calc(var(--dvw) * 1.6); }
.bub { width: calc(var(--dvh) * 15); height: calc(var(--dvh) * 15); border-radius: 50%; display: grid; place-items: center; color: #fff; font-size: calc(var(--dvh) * 9); font-weight: 800; border: 3px solid #fff; text-shadow: 0 2px 0 rgba(0, 0, 0, .22);
  box-shadow: 0 calc(var(--dvh) * 1) 0 rgba(28, 17, 101, .35), inset 0 calc(var(--dvh) * 1.5) calc(var(--dvh) * 2) rgba(255, 255, 255, .4); animation: hop 1.2s ease-in-out infinite; }
.bub:nth-child(1) { background: #ff7ab8; } .bub:nth-child(2) { background: #ffb02e; animation-delay: .15s; } .bub:nth-child(3) { background: #4f8cff; animation-delay: .3s; }
.bub:nth-child(4) { background: #3fc79a; animation-delay: .45s; } .bub:nth-child(5) { background: #ff8a4d; animation-delay: .6s; } .bub:nth-child(6) { background: #9a6bff; animation-delay: .75s; }
@keyframes hop { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(calc(var(--dvh) * -3)); } }

/* ------------------------------------------------------------------ pages with a top bar */
.page { display: flex; flex-direction: column; padding: 0 calc(var(--dvw) * 2) calc(var(--dvh) * 3); color: #221c33; }
.topbar { position: relative; z-index: 2; flex: none; display: flex; align-items: center; gap: calc(var(--dvw) * 1.4); padding: calc(var(--dvh) * 2.5) 56px calc(var(--dvh) * 1.2) 0; }
.topbar .back-btn { margin-left: calc(var(--dvw) * 1.4); }
.title { flex: 1; margin: 0; font-size: calc(var(--dvh) * 6.2); font-weight: 900; color: #1c1165; text-shadow: 0 2px 0 rgba(255, 255, 255, .8); letter-spacing: .4px; white-space: nowrap; }
.tabs { flex: 1; display: flex; gap: calc(var(--dvw) * 1); min-width: 0; }
.tab { flex: 1; min-width: 0; height: calc(var(--dvh) * 10); min-height: 40px; border: 3px solid #fff; border-radius: 999px; background: rgba(255, 255, 255, .6); color: #1c1165; font-size: max(15px, calc(var(--dvh) * 5)); font-weight: 900; box-shadow: 0 3px 0 rgba(28, 17, 101, .25); }
.tab.on { background: var(--grad); color: #fff; box-shadow: 0 3px 0 #1c1165; }
.pbar { flex: 1; height: calc(var(--dvh) * 2.6); min-height: 9px; border-radius: 999px; background: rgba(255, 255, 255, .7); border: 2px solid #fff; overflow: hidden; }
.pbar i { display: block; height: 100%; width: 0; border-radius: 999px; background: var(--grad); transition: width .25s; }
.numchip { min-width: calc(var(--dvh) * 12); padding: 0 calc(var(--dvh) * 2.5); height: calc(var(--dvh) * 10); min-height: 40px; display: grid; place-items: center; border-radius: 999px; background: #fff; border: 3px solid #ffd978; box-shadow: 0 3px 0 #e0b24a; font-size: max(16px, calc(var(--dvh) * 5)); font-weight: 900; color: #6b4a00; }

.panel { position: relative; z-index: 1; flex: 1; min-height: 0; overflow: hidden; display: flex; flex-direction: column; justify-content: center; padding: calc(var(--dvh) * 2.5) calc(var(--dvw) * 3.5); border-radius: 26px;
  background: rgba(255, 255, 255, .68); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); border: 2px solid rgba(255, 255, 255, .9); box-shadow: 0 8px 24px rgba(28, 17, 101, .15); }
.pager { flex: 1; min-height: 0; display: flex; align-items: center; justify-content: center; gap: calc(var(--dvw) * 1.6); animation: slide .3s ease-out; }
@keyframes slide { from { opacity: 0; transform: translateX(24px); } }
.hint { margin: 0 0 calc(var(--dvh) * 1.5); text-align: center; font-size: calc(var(--dvh) * 4.4); font-weight: 800; color: #1c1165; }

/* the letters: --cols across and --rows down fill the panel, the glyph scales with the rows */
.grid { flex: 1; min-width: 0; height: 100%; display: grid; grid-template-columns: repeat(var(--cols, 6), minmax(0, 1fr)); grid-template-rows: repeat(var(--rows, 2), minmax(0, 1fr)); gap: calc(var(--dvh) * 3) calc(var(--dvw) * 1.2); padding-bottom: calc(var(--dvh) * 1.5); }
.ltr .g { position: relative; font-size: min(calc(var(--dvh) * 30 / var(--rows, 2)), calc(var(--dvw) * var(--wf, 42) / var(--cols, 6))); font-weight: 700; line-height: 1.1; text-shadow: 0 2px 0 rgba(0, 0, 0, .25); }
.ltr small { position: relative; font-size: max(10px, calc(var(--dvh) * 3)); font-weight: 800; opacity: .9; }

/* the three games on the menu page */
.games { height: 100%; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: calc(var(--dvw) * 2.4); align-items: center; padding-bottom: calc(var(--dvh) * 2); }
.game { height: min(100%, calc(var(--dvh) * 62)); gap: calc(var(--dvh) * 1.6); padding: calc(var(--dvh) * 2) 6px; }
.game .ico { position: relative; display: grid; place-items: center; width: calc(var(--dvh) * 24); height: calc(var(--dvh) * 24); border-radius: 50%; background: #fff; color: #3a2bd0; font-size: calc(var(--dvh) * 14); font-weight: 800; box-shadow: 0 3px 0 rgba(0, 0, 0, .18); }
.game b { position: relative; font-size: calc(var(--dvh) * 6.4); font-weight: 900; text-shadow: 0 2px 0 rgba(0, 0, 0, .3); }
.game small { position: relative; font-size: calc(var(--dvh) * 3.6); font-weight: 700; opacity: .92; text-align: center; padding: 0 6px; }

/* signposts: a wooden arrow board on a post */
.sign { flex: none; width: calc(var(--dvh) * 19); padding: 0; border: 0; background: none; display: flex; flex-direction: column; align-items: center; transform-origin: 50% 100%;
  filter: drop-shadow(0 2px 0 #5e3510) drop-shadow(0 5px 5px rgba(60, 35, 10, .3)); animation: sway 3s ease-in-out infinite alternate; }
.sign .board { width: 100%; height: calc(var(--dvh) * 11); display: grid; place-items: center; color: #fff; font-weight: 900; font-size: max(13px, calc(var(--dvh) * 4)); letter-spacing: .5px; text-shadow: 0 2px 0 rgba(94, 53, 16, .8);
  background: repeating-linear-gradient(#e3ab5e 0 7px, #d99a47 7px 9px, #e3ab5e 9px 15px); }
.sign.back .board { clip-path: polygon(100% 12%, 30% 12%, 30% 0, 0 50%, 30% 100%, 30% 88%, 100% 88%); padding-left: 22%; }
.sign .post { width: calc(var(--dvh) * 3.4); min-width: 12px; height: calc(var(--dvh) * 15); margin-top: -2px; border-radius: 3px 3px 0 0; background: linear-gradient(90deg, #8a561f, #c98b4a 45%, #8a561f); }
.sign:active { transform: scale(.94); }
@keyframes sway { from { transform: rotate(-2.5deg); } to { transform: rotate(2.5deg); } }

/* ------------------------------------------------------------------ the letter card (a popup) */
.pop { position: fixed; inset: 0; z-index: 150; display: grid; place-items: center; background: rgba(20, 10, 60, .45); }
.lc { position: relative; width: min(94%, calc(var(--dvh) * 190)); height: calc(var(--dvh) * 84); display: flex; align-items: center; gap: calc(var(--dvw) * 2); padding: 0 calc(var(--dvw) * 2); border-radius: 28px; background: #fff; box-shadow: 0 10px 0 rgba(28, 17, 101, .25), 0 14px 34px rgba(0, 0, 0, .4); animation: pop2 .35s ease-out; }
@keyframes pop2 { from { transform: scale(.8); opacity: 0; } }
.lc-x { position: absolute; top: calc(var(--dvh) * 2); right: calc(var(--dvh) * 2); }
.lc-left { flex: 1; min-width: 0; text-align: center; }
.lc-letter { font-size: calc(var(--dvh) * 44); font-weight: 700; line-height: 1.2; background: var(--grad); -webkit-background-clip: text; background-clip: text; color: transparent; }
.lc-letter.long { font-size: calc(var(--dvh) * 27); padding: calc(var(--dvh) * 3) 0; }   /* combined letters are two or three parts wide */
.lc-rom { margin-top: calc(var(--dvh) * -2); font-size: calc(var(--dvh) * 9); font-weight: 900; color: var(--violet); }
.lc-right { flex: 1.1; min-width: 0; text-align: center; display: flex; flex-direction: column; align-items: center; gap: calc(var(--dvh) * 1); }
.lc-pic { font-size: calc(var(--dvh) * 26); line-height: 1.1; }
.lc-word { font-size: calc(var(--dvh) * 9); font-weight: 800; color: #1c1165; line-height: 1.2; }
.lc-word em { font-style: normal; color: var(--violet); }
.lc-mean { font-size: calc(var(--dvh) * 4.6); font-weight: 800; color: #7a7390; }
.lc .start-btn { margin-top: calc(var(--dvh) * 1.5); font-size: calc(var(--dvh) * 5.4); padding: calc(var(--dvh) * 1.8) calc(var(--dvh) * 7); animation: none; }

/* ------------------------------------------------------------------ listen and pick, match */
.stage { position: relative; z-index: 1; flex: 1; min-height: 0; display: flex; align-items: stretch; gap: calc(var(--dvw) * 3); }
.qpic { position: relative; flex: 1; min-width: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: calc(var(--dvh) * 2); background: rgba(255, 255, 255, .85); border: calc(var(--dvh) * 1) solid #fff; border-radius: calc(var(--dvh) * 6); box-shadow: 0 calc(var(--dvh) * 1.6) 0 rgba(28, 17, 101, .18); }
.qpic .big { font-size: calc(var(--dvh) * 34); line-height: 1.1; animation: pop2 .4s ease-out; }
.qpic p { margin: 0; font-size: calc(var(--dvh) * 4.6); font-weight: 800; color: #7a7390; text-align: center; padding: 0 12px; }
.qspeak { display: inline-flex; align-items: center; gap: calc(var(--dvh) * 1.5); border: 0; border-radius: 999px; padding: calc(var(--dvh) * 1.6) calc(var(--dvh) * 5); background: var(--grad); color: #fff; font-size: calc(var(--dvh) * 5.2); font-weight: 900; box-shadow: 0 calc(var(--dvh) * 1) 0 #1c1165; }
.qspeak svg { width: calc(var(--dvh) * 6.5); height: calc(var(--dvh) * 6.5); } .qspeak:active { transform: translateY(calc(var(--dvh) * .6)); }
.qopts { flex: 1.2; min-width: 0; display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: 1fr 1fr; gap: calc(var(--dvh) * 3.5) calc(var(--dvw) * 2); padding-bottom: calc(var(--dvh) * 1.8); }
.qopt { font-size: calc(var(--dvh) * 20); font-weight: 700; line-height: 1.1; border: calc(var(--dvh) * .8) solid #fff; border-radius: calc(var(--dvh) * 4); text-shadow: 0 2px 0 rgba(0, 0, 0, .25); }
.qopt.miss { background: #c9c3dc; color: #7a7390; opacity: .6; animation: shake .35s; box-shadow: none; text-shadow: none; }
.qopt.miss::after, .qopt.miss::before { display: none; }
.qopt.right { background: linear-gradient(135deg, #3fc79a, #1f9a6e); }
.gift { position: absolute; left: 50%; top: 40%; z-index: 5; font-size: calc(var(--dvh) * 10); line-height: 1; pointer-events: none; animation: fly .9s ease-out forwards; }
@keyframes fly { from { transform: translate(-50%, -50%) scale(.6); opacity: 1; } to { transform: translate(-50%, calc(var(--dvh) * -30)) scale(1.4); opacity: 0; } }

.mrows { flex: 1; min-width: 0; display: grid; grid-template-rows: 1fr 1fr; gap: calc(var(--dvh) * 3.5); padding-bottom: calc(var(--dvh) * 1.8); }
.mrow { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: calc(var(--dvw) * 2); }
.mrow .gbtn { font-size: calc(var(--dvh) * 17); font-weight: 700; text-shadow: 0 2px 0 rgba(0, 0, 0, .25); }
.mrow.pics .gbtn { background: #fff; border: calc(var(--dvh) * .8) solid #fff; box-shadow: 0 calc(var(--dvh) * 1.5) 0 rgba(28, 17, 101, .3); color: #221c33; font-size: calc(var(--dvh) * 18); }
.mrow.pics .gbtn::before, .mrow.pics .gbtn::after { display: none; }
.gbtn.sel { outline: calc(var(--dvh) * 1) solid #ffc83d; outline-offset: 2px; transform: translateY(calc(var(--dvh) * -1)); }
.gbtn.done { background: linear-gradient(135deg, #3fc79a, #1f9a6e); box-shadow: 0 calc(var(--dvh) * 1.5) 0 #14684a; pointer-events: none; opacity: .8; }
.mrow.pics .gbtn.done { background: #d9f6e8; box-shadow: 0 calc(var(--dvh) * 1.5) 0 #1f9a6e; }

.pend { position: absolute; inset: 0; z-index: 10; display: grid; place-items: center; background: rgba(28, 17, 101, .55); }
.endcard { text-align: center; background: #fff; border-radius: 30px; padding: calc(var(--dvh) * 4) calc(var(--dvw) * 6); box-shadow: 0 10px 0 rgba(28, 17, 101, .25); animation: pop2 .5s ease-out; }
.endcard h2 { margin: 0; font-size: calc(var(--dvh) * 8); color: #1c1165; }
.endcard .big { margin: calc(var(--dvh) * 1) 0; font-size: calc(var(--dvh) * 17); font-weight: 900; color: #6b4a00; display: flex; align-items: center; justify-content: center; gap: .2em; }
.endcard .big svg { width: .9em; height: .9em; }
.endcard p { margin: 0 0 calc(var(--dvh) * 2); font-size: calc(var(--dvh) * 5); font-weight: 800; color: #7a7390; }
.endcard .start-btn { font-size: calc(var(--dvh) * 6); padding: calc(var(--dvh) * 2) calc(var(--dvh) * 7); animation: none; margin: 0 calc(var(--dvh) * 1); }
.endcard .start-btn.alt { background: #fff; color: #3a2bd0; border: 3px solid #3a2bd0; box-shadow: 0 calc(var(--dvh) * 1) 0 #c9c3dc; }
.endcard .start-btn.alt::after { display: none; }

.toast { position: absolute; z-index: 5; left: 50%; bottom: calc(var(--dvh) * 5); transform: translateX(-50%); max-width: 80%; padding: calc(var(--dvh) * 1.6) calc(var(--dvw) * 2.4); border-radius: 999px; background: var(--grad); color: #fff; font-weight: 800; font-size: calc(var(--dvh) * 4.4); text-align: center; box-shadow: 0 6px 18px rgba(28, 17, 101, .4); }

/* the sound popup (the speaker button) */
.sndpop { position: fixed; inset: 0; z-index: 200; display: grid; place-items: center; background: rgba(20, 10, 60, .4); }
.sndcard { background: #fff; border-radius: 20px; padding: 18px 28px 20px; box-shadow: 0 8px 30px rgba(0, 0, 0, .35); min-width: 260px; }
.sndcard h3 { margin: 0 0 6px; font-size: 24px; font-weight: 800; color: #1c1165; }
.snd-opt { display: flex; align-items: center; justify-content: space-between; width: 100%; gap: 40px; padding: 10px 0; background: none; border: 0; font-size: 22px; font-weight: 700; color: #1c1165; }
.sw { position: relative; flex: none; width: 64px; height: 34px; border-radius: 17px; background: #b9b4c7; transition: background .15s; }
.sw i { position: absolute; top: 3px; left: 3px; width: 28px; height: 28px; border-radius: 50%; background: #fff; box-shadow: 0 1px 4px rgba(0, 0, 0, .4); transition: left .15s; }
.sw.on { background: var(--grad); } .sw.on i { left: 33px; }
.sndcard .start-btn { margin-top: 12px; width: 100%; font-size: 24px; padding: 10px; animation: none; }

@media (prefers-reduced-motion: reduce) { * { animation: none !important; } }