/* S10-B chessground drill styling. * * The chessground stock CSS (chessground.base.css + brown + cburnett) is * pulled from the CDN in drills.html.j2's . This file ONLY adds the * drill-specific feedback slot styling and the mount/fallback wrapper. */ .drill-card .cg-mount { margin: 0.25rem auto 0.6rem auto; width: 280px; max-width: 100%; /* chessground requires a square box; aspect-ratio keeps the board square * across phone widths without baking in pixel sizes. */ aspect-ratio: 1 / 1; /* Skeleton: an 8x8 checkerboard drawn in chessground's brown theme colors * (#b58863 dark, #f0d9b5 light). Visible until chessground populates * `.cg-board` with its own DOM/CSS, which covers this background. No * separate fallback SVG, no flash, no swap. JS-disabled users see this * skeleton + can still read the prompt + expand the engine-answer * reveal block. */ background: conic-gradient(#b58863 25%, #f0d9b5 0 50%, #b58863 0 75%, #f0d9b5 0) 0 0 / 25% 25%; border-radius: 2px; } .drill-card .cg-board { width: 100%; height: 100%; } .drill-card .cg-feedback { margin: 0.25rem 0 0.5rem 0; padding: 6px 10px; border-radius: 4px; font-size: 13px; font-weight: 600; transition: background-color 200ms ease, color 200ms ease; } .drill-card .cg-feedback.correct { background: #dcfce7; color: #14532d; border-left: 3px solid #16a34a; } .drill-card .cg-feedback.incorrect { background: #fee2e2; color: #7f1d1d; border-left: 3px solid #dc2626; } /* S10-C — cold-cache loading overlay for coach-link navigations. The 600ms * animation-delay means warm-cache hits (~50-200ms) navigate before the * overlay appears; cold-path hits (~10-25s) get an honest indicator. */ .coach-loading-overlay { position: fixed; inset: 0; background: rgba(255, 255, 255, 0.85); z-index: 9999; display: flex; align-items: center; justify-content: center; opacity: 0; animation: coach-overlay-fade-in 200ms ease-out 600ms forwards; } @keyframes coach-overlay-fade-in { to { opacity: 1; } } .coach-loading-card { background: white; border: 1px solid #e2e8f0; border-radius: 8px; padding: 1.5rem 2rem; max-width: 360px; text-align: center; box-shadow: 0 4px 24px rgba(0, 0, 0, 0.08); } .coach-loading-spinner { width: 32px; height: 32px; margin: 0 auto 1rem auto; border: 3px solid #eef2f6; border-top-color: #2c5d8f; border-radius: 50%; animation: coach-spinner 800ms linear infinite; } @keyframes coach-spinner { to { transform: rotate(360deg); } } .coach-loading-text { font-weight: 600; font-size: 14px; margin-bottom: 0.5rem; } .coach-loading-hint { color: #888; font-size: 12px; line-height: 1.4; }