/* today screen styles — Today's Game (the Daily Rep) and the Court Math card (also used by Math IQ) */
.tdy-hud { margin: 0 0 10px; }
.tdy-hud .hud-box b { display: flex; align-items: center; justify-content: center; gap: 4px; }
.tdy-ic { width: 26px; height: 26px; display: inline-block; } .tdy-ic svg { width: 100%; height: 100%; display: block; }
.tdy-n { font-style: normal; }
.tdy-title { flex: 1; text-align: center; font-size: 1.35rem; font-weight: 900; text-shadow: 0 3px 0 var(--navy-deep); line-height: 1.1; }
.tdy-path .link { display: block; }
.tdy-path .stop { transition: transform 0.25s, background 0.25s; }
.tdy-path .stop .tdy-check { width: 30px; height: 30px; color: var(--navy-deep); }
.tdy-labels span { font-weight: 800; }
.tdy-labels .tdy-lbl-now { color: var(--yellow); font-weight: 900; }
html[data-grade="1"] .tdy-path .stop { width: 72px; height: 72px; font-size: 1.7rem; }
html[data-grade="1"] .tdy-labels { font-size: 0.95rem; }

/* the Court Math card */
.tdy-pic { margin: 0 0 10px; }
.tdy-court { box-shadow: inset 0 0 0 4px var(--wood-deep); max-height: 230px; }
html[data-grade="4"] .tdy-court { max-height: 200px; }
.tdy-pic .qc-pic { min-height: 0; margin: 0; } .tdy-pic .qc-pic svg { max-height: 120px; }
.tdy-ans .ab { word-break: normal; overflow-wrap: break-word; hyphens: none; }
.tdy-hint { margin: 8px auto 0; width: fit-content; max-width: 100%; background: var(--navy); color: var(--yellow); border-radius: var(--r-pill); padding: 5px 14px; font-size: 0.95rem; font-weight: 900; text-align: center; }
html[data-grade="1"] .tdy-hint { font-size: 1.1rem; }
.tdy-setup { margin: 0 0 6px; text-align: center; font-size: 1.1rem; line-height: 1.35; color: var(--ink-soft); font-weight: 800; text-wrap: balance; }
html[data-grade="1"] .tdy-setup { font-size: 1.3rem; color: var(--ink); }
.tdy-feed { margin: 14px auto 10px; width: fit-content; max-width: 100%; text-align: center; font-size: 1.2rem; font-weight: 900; color: var(--yellow);
  background: var(--navy-deep); border: 3px solid var(--navy-line); border-radius: var(--r-pill); padding: 8px 18px; visibility: hidden; }
.tdy-feed.on { visibility: visible; animation: tdyrise 0.3s; }
.tdy-why { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; box-shadow: 0 5px 0 var(--wood-deep); animation: tdyrise 0.35s cubic-bezier(.2,.9,.3,1.2); }
.tdy-why p { margin: 0; flex: 1 1 60%; font-weight: 800; }
.tdy-why-h { flex: 0 0 100%; font-size: 0.85rem; font-weight: 900; letter-spacing: 0.08em; color: var(--green-deep); text-transform: uppercase; }
.tdy-why .hm-speak { width: 52px; height: 52px; } .tdy-why .hm-speak svg { width: 30px; height: 30px; }
.tdy-next { margin-top: 4px; }
@keyframes tdyrise { from { opacity: 0; transform: translateY(12px); } }

/* the Scoreboard Show */
.tdy-show { background: var(--navy-deep); border: 3px solid var(--navy-line); border-radius: var(--r-lg); padding: 14px 14px 18px; }
.tdy-show-top { display: flex; justify-content: center; margin: 0 0 6px; }
.tdy-tag-dark { background: var(--navy-soft); color: var(--yellow); }
.tdy-show-title { margin: 2px 0 10px; text-align: center; font-size: 1.5rem; font-weight: 900; text-shadow: 0 3px 0 var(--navy-deep); }
.tdy-board { position: relative; padding: 18px 10px 16px; border-width: 8px; box-shadow: inset 0 0 0 3px var(--navy-soft), 0 0 30px rgba(255, 201, 60, 0.18); }
.tdy-board::before, .tdy-board::after { content: ""; position: absolute; top: 10px; width: 12px; height: 12px; border-radius: 50%; background: var(--red); box-shadow: 0 0 10px var(--red); }
.tdy-board::before { left: 12px; } .tdy-board::after { right: 12px; }
.tdy-digits { word-break: break-word; }
.tdy-digits .tallies { color: var(--yellow); vertical-align: middle; transform: scale(1.6); margin: 10px 20px; }
.board .tdy-digits.tdy-dg-m { font-size: 2.5rem; } .board .tdy-digits.tdy-dg-l { font-size: 1.8rem; }
html[data-grade="1"] .board .tdy-digits.tdy-dg-m { font-size: 2.9rem; } html[data-grade="1"] .board .tdy-digits.tdy-dg-l { font-size: 2.1rem; }
.tdy-flip { animation: tdyflip 0.45s cubic-bezier(.3,1.6,.5,1); }
/* never blank: the board flips in from dim, not invisible (8-year-old tester, round 5, caught it mid-flip on an empty board) */
@keyframes tdyflip { 0% { opacity: 0.35; transform: translateY(-14px) scale(0.85); } 100% { opacity: 1; transform: none; } }
.tdy-steps { margin: 4px 0 12px; }
.tdy-line { display: flex; align-items: center; gap: 12px; background: var(--paper); color: var(--ink); border-radius: var(--r-md); padding: 12px 14px; min-height: 76px; margin: 0 0 16px; box-shadow: 0 5px 0 var(--wood-deep); }
.tdy-line p { margin: 0; flex: 1; font-size: 1.2rem; line-height: 1.35; font-weight: 900; }
html[data-grade="1"] .tdy-line p { font-size: 1.35rem; }
.tdy-line .hm-speak { width: 52px; height: 52px; } .tdy-line .hm-speak svg { width: 30px; height: 30px; }
.tdy-go { min-height: calc(var(--tap) + 10px); font-size: 1.5rem; }

/* the day is won */
.tdy-flame { display: inline-flex; align-items: center; gap: 6px; margin: 4px auto 6px; padding: 6px 16px 6px 8px; border-radius: var(--r-pill); background: var(--navy); color: var(--chalk); }
.tdy-flame svg { width: 40px; height: 40px; animation: tdyflick 1.1s ease-in-out infinite alternate; }
.tdy-flame b { font-size: 2rem; font-weight: 900; color: var(--yellow); line-height: 1; }
.tdy-flame span { font-size: 0.95rem; font-weight: 900; }
@keyframes tdyflick { from { transform: scale(1) rotate(-3deg); } to { transform: scale(1.1) rotate(3deg); } }
/* a squeezed court card (ui.js fit → .qc-tight) shows a smaller court so all four answers stay on the screen (1st grader, round 10) */
.qc-tight .tdy-court { max-height: 150px; }
html[data-grade="4"] .qc-tight .tdy-court { max-height: 140px; }
.qc-tight .tdy-pic { margin-bottom: 6px; }

/* a right answer the server could not take yet: said on a card, with one button to save it (round 11) */
.tdy-retry { margin: 12px auto 0; padding: 12px; max-width: 420px; border-radius: var(--r-md); background: var(--paper); color: var(--ink); text-align: center; box-shadow: 0 4px 0 rgba(16,18,58,0.25); }
.tdy-retry p { margin: 0 0 10px; font-weight: 900; font-size: 1.05rem; line-height: 1.3; }