:root {
  --ball-x: 50vw; --ball-y: 80vh; --ball-size: clamp(104px, 28vw, 158px);
  --safe-top: env(safe-area-inset-top, 0px); --safe-bottom: env(safe-area-inset-bottom, 0px);
  --navy: #071a46; --blue: #124cb5; --sky: #28b7ef; --orange: #ff7417; --gold: #ffd84d;
}
* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { width: 100%; height: 100%; margin: 0; overflow: hidden; overscroll-behavior: none; touch-action: none; user-select: none; background: var(--navy); font-family: ui-rounded, "SF Pro Rounded", system-ui, sans-serif; }
body { position: fixed; inset: 0; }
button { font: inherit; }
.game, .court { width: 100vw; height: 100svh; min-height: 100%; }
.game { position: relative; overflow: hidden; color: white; background: linear-gradient(180deg, #061a48 0%, #0d398b 28%, #117bc2 47%, #e98b25 48%, #bd4e14 100%); }
.arena { position: absolute; inset: 0; overflow: hidden; pointer-events: none; }
.arena-glow { position: absolute; inset: 0; background: radial-gradient(ellipse at 50% 22%, rgba(53,207,255,.62), transparent 36%), radial-gradient(ellipse at 50% 100%, rgba(255,204,77,.22), transparent 48%); }
.lights { position: absolute; left: 50%; top: calc(var(--safe-top) - 2vh); width: min(92vw, 650px); height: 18vh; transform: translateX(-50%); background: radial-gradient(circle at 9% 10%, #fff 0 4px, transparent 6px), radial-gradient(circle at 27% 5%, #fff 0 5px, transparent 7px), radial-gradient(circle at 50% 4%, #fff 0 5px, transparent 7px), radial-gradient(circle at 73% 5%, #fff 0 5px, transparent 7px), radial-gradient(circle at 91% 10%, #fff 0 4px, transparent 6px); filter: drop-shadow(0 0 10px #aaf0ff); opacity: .9; }
.crowd { position: absolute; left: -4vw; width: 108vw; height: 8vh; background: radial-gradient(circle, #ffd166 0 4px, transparent 5px), radial-gradient(circle, #ff6b6b 0 4px, transparent 5px), radial-gradient(circle, #53d8fb 0 4px, transparent 5px), linear-gradient(180deg, #102861, #07132f); background-size: 70px 40px, 70px 40px, 70px 40px, 100% 100%; background-position: 0 4px, 22px 20px, 45px 6px, 0 0; border-block: 3px solid rgba(255,255,255,.1); }
.crowd-one { top: 27vh; } .crowd-two { top: 34vh; opacity: .85; transform: scaleX(-1); }
.game-header { position: absolute; z-index: 20; top: calc(var(--safe-top) + 12px); left: 16px; right: 16px; display: flex; align-items: center; justify-content: space-between; }
.brand { display: flex; align-items: center; gap: 8px; font-size: clamp(18px, 5vw, 26px); line-height: 1; font-weight: 950; letter-spacing: -.7px; text-shadow: 0 3px 0 #071a46, 0 5px 12px rgba(0,0,0,.35); }
.brand strong { color: var(--gold); }
.brand-ball { display: grid; place-items: center; width: 34px; height: 34px; color: var(--orange); border: 3px solid #fff; border-radius: 50%; background: var(--orange); box-shadow: inset -6px -6px #cc3e08, 0 3px 0 #071a46; }
.progress-card { display: flex; align-items: center; gap: 5px; min-width: 82px; padding: 7px 12px; border: 2px solid rgba(255,255,255,.7); border-radius: 999px; background: rgba(5,24,70,.76); box-shadow: 0 6px 15px rgba(0,0,0,.24), inset 0 1px rgba(255,255,255,.15); font-size: 17px; font-weight: 900; }
.progress-star { color: var(--gold); font-size: 23px; filter: drop-shadow(0 2px 0 #a56400); } .progress-divider { opacity: .45; }
.mode-picker { position: absolute; z-index: 20; top: calc(var(--safe-top) + 61px); left: 50%; display: flex; gap: 8px; transform: translateX(-50%); padding: 5px; border-radius: 19px; background: rgba(4,18,55,.72); box-shadow: 0 8px 22px rgba(0,0,0,.28); backdrop-filter: blur(10px); }
.mode-button { min-width: 108px; height: 48px; padding: 5px 13px; border: 2px solid transparent; border-radius: 15px; color: rgba(255,255,255,.68); background: transparent; display: flex; align-items: center; justify-content: center; gap: 7px; font-size: 14px; font-weight: 850; cursor: pointer; }
.mode-button.active { color: #09205a; border-color: #fff; background: linear-gradient(180deg, #fff, #d9f4ff); box-shadow: 0 4px 0 #8acbe5; }
.mode-icon { color: inherit; font-size: 12px; font-weight: 1000; }
.learning-card { position: absolute; z-index: 16; top: calc(var(--safe-top) + 120px); left: 50%; transform: translateX(-50%); width: min(88vw, 440px); height: 78px; display: grid; grid-template-columns: 1fr auto; grid-template-rows: auto auto; align-items: center; padding: 10px 16px 10px 20px; border: 2px solid rgba(255,255,255,.7); border-radius: 22px; background: linear-gradient(135deg, rgba(7,26,70,.9), rgba(17,74,171,.86)); box-shadow: 0 9px 24px rgba(0,0,0,.28), inset 0 1px rgba(255,255,255,.18); backdrop-filter: blur(10px); }
.learning-label { align-self: end; color: #82e6ff; font-size: 11px; font-weight: 1000; letter-spacing: 1.4px; }
.learning-value { grid-column: 2; grid-row: 1 / 3; min-width: 60px; text-align: center; color: var(--gold); font-size: clamp(44px, 12vw, 62px); line-height: .85; font-weight: 1000; text-shadow: 0 4px 0 #a55a05; }
.learning-prompt { align-self: start; overflow: hidden; max-width: 260px; padding:0 1px 7px; color: white; font-size: clamp(15px, 4vw, 19px); font-weight: 850; line-height:1.35; white-space: nowrap; text-overflow: ellipsis; }
.prompt-focus { position:relative; display:inline-block; padding:1px 7px 4px; border-radius:9px; color:#10265a; background:var(--gold); box-shadow:0 2px 0 #c98200; line-height:1.2; vertical-align:baseline; }
.prompt-focus::after { content:""; position:absolute; left:8%; right:8%; bottom:-5px; height:3px; border-radius:99px; background:#82e6ff; transform:scaleX(0); transform-origin:left; }
.learning-card.lesson-refresh .learning-value { animation:lessonValuePop .7s cubic-bezier(.2,1.35,.35,1) both, lessonValueGlow 1.05s ease-out both; }
.learning-card.lesson-refresh .learning-prompt { animation:lessonPhraseRise .62s cubic-bezier(.22,.8,.3,1) .08s both; }
.learning-card.lesson-refresh .prompt-focus { animation:lessonWordBounce .72s cubic-bezier(.18,1.3,.3,1) .2s both; }
.learning-card.lesson-refresh .prompt-focus::after { animation:lessonUnderline .55s ease-out .42s both; }
@keyframes lessonValuePop {
  0% { opacity:.25; transform:translateY(8px) scale(.72) rotate(-3deg); }
  62% { opacity:1; transform:translateY(-2px) scale(1.08) rotate(1deg); }
  100% { opacity:1; transform:translateY(0) scale(1) rotate(0); }
}
@keyframes lessonPhraseRise {
  0% { opacity:0; transform:translateY(9px); }
  100% { opacity:1; transform:translateY(0); }
}
@keyframes lessonValueGlow {
  0%,18% { color:#fff5a8; filter:drop-shadow(0 0 14px rgba(255,216,77,.95)); }
  100% { color:var(--gold); filter:drop-shadow(0 0 0 rgba(255,216,77,0)); }
}
@keyframes lessonWordBounce {
  0% { opacity:.25; transform:scale(.72) rotate(-2deg); }
  65% { opacity:1; transform:scale(1.09) rotate(1deg); }
  100% { opacity:1; transform:scale(1) rotate(0); }
}
@keyframes lessonUnderline { from { transform:scaleX(0); } to { transform:scaleX(1); } }
.court { position: absolute; inset: 0; overflow: hidden; }
.backboard { position: absolute; z-index: 6; left: 50%; top: calc(var(--safe-top) + 220px); width: clamp(190px, 52vw, 285px); height: clamp(126px, 34vw, 182px); transform: translateX(-50%); border: clamp(7px, 1.8vw, 10px) solid #10214f; border-radius: 18px; background: linear-gradient(135deg, rgba(255,255,255,.98), rgba(207,241,255,.92)); box-shadow: 0 14px 0 #071a46, 0 22px 32px rgba(0,0,0,.38), inset 0 0 0 3px rgba(255,255,255,.8); transition: filter .2s, transform .2s; }
.backboard-shine { position: absolute; inset: 0; border-radius: 9px; background: linear-gradient(120deg, rgba(255,255,255,.75), transparent 35%); }
.backboard.celebrate { filter: drop-shadow(0 0 25px #ffd84d); transform: translateX(-50%) scale(1.04); }
.inner-square { position: absolute; left: 50%; bottom: 20%; width: 36%; height: 40%; transform: translateX(-50%); border: 6px solid #ff5c24; border-bottom: 0; border-radius: 8px 8px 0 0; }
.rim { position: absolute; z-index: 7; left: 50%; bottom: 12%; width: 60%; height: 29px; transform: translateX(-50%); border: 9px solid #f23824; border-top-width: 7px; border-radius: 50%; background: rgba(255,70,30,.08); box-shadow: 0 5px 0 #9e1b16; }
.net { position: absolute; z-index: 5; left: 50%; bottom: -44%; width: 49%; height: 59%; transform: translateX(-50%); filter: drop-shadow(0 5px 3px rgba(0,0,0,.2)); }
.net::before, .net::after { content:""; position:absolute; inset:0; background: linear-gradient(65deg, transparent 46%, #fff 48% 52%, transparent 54%), linear-gradient(115deg, transparent 46%, #fff 48% 52%, transparent 54%); background-size: 31px 29px; }
.net span { position:absolute; inset-block: 0; width:5px; border-radius:99px; background:#fff; }
.net span:nth-child(1){left:4%;transform:rotate(7deg)} .net span:nth-child(2){left:27%;transform:rotate(3deg)} .net span:nth-child(3){left:50%} .net span:nth-child(4){right:27%;transform:rotate(-3deg)} .net span:nth-child(5){right:4%;transform:rotate(-7deg)}
.floor { position: absolute; left: -20vw; right: -20vw; bottom: calc(var(--safe-bottom) - 9vh); height: 50vh; border-radius: 50% 50% 0 0 / 18% 18% 0 0; background: radial-gradient(ellipse at 50% 12%, transparent 0 28%, rgba(255,255,255,.8) 29% 30%, transparent 31%), linear-gradient(90deg, transparent 49.4%, rgba(255,255,255,.7) 49.6% 50.4%, transparent 50.6%), repeating-linear-gradient(90deg, rgba(130,48,7,.16) 0 3px, transparent 3px 46px), linear-gradient(180deg, #ffbe3d, #e67216 58%, #ad3d0c); box-shadow: inset 0 15px rgba(255,255,255,.18); }
.court-logo { position:absolute; left:50%; top:23%; width:min(48vw,220px); transform:translate(-50%,-50%); color:rgba(7,26,70,.18); font-family:ui-rounded,"SF Pro Rounded",system-ui,sans-serif; font-size:clamp(124px,38vw,210px); line-height:.82; font-weight:1000; letter-spacing:-.055em; text-align:center; text-shadow:0 3px 0 rgba(255,238,186,.1); white-space:nowrap; }
.court-logo.wide { font-size:clamp(84px,26vw,142px); letter-spacing:-.075em; }
.court-logo.basket-glow { animation:courtLessonReward 1.55s ease-out both; }
.ball { position:absolute; z-index:12; left:var(--ball-x); top:var(--ball-y); width:var(--ball-size); aspect-ratio:1; padding:0; border:0; border-radius:50%; transform:translate(-50%,-50%); background:radial-gradient(circle at 29% 20%, #ffd39d 0 5%, transparent 11%), radial-gradient(circle at 70% 78%, rgba(107,29,7,.48), transparent 35%), linear-gradient(145deg,#ff9c32,#f05a0d 55%,#a92d08); box-shadow:inset -13px -17px rgba(86,22,5,.2), inset 7px 8px rgba(255,231,196,.15), 0 16px 0 rgba(126,44,8,.17), 0 22px 25px rgba(70,19,5,.32); cursor:grab; touch-action:none; transition:transform .12s; }
.ball:active { transform:translate(-50%,-50%) scale(1.06); }
.ball.scored { animation:scoreDrop .72s cubic-bezier(.2,1,.35,1) forwards; }
.pebble-texture { position:absolute; inset:5%; border-radius:50%; background-image:radial-gradient(circle,rgba(107,30,7,.32) 0 1.2px,transparent 1.4px),radial-gradient(circle,rgba(255,232,200,.25) 0 1px,transparent 1.3px); background-position:0 0,5px 6px; background-size:10px 10px; opacity:.62; }
.ball-line { position:absolute; border:clamp(5px,1.4vw,8px) solid #431503; pointer-events:none; opacity:.94; }
.line-vertical { top:4%; bottom:4%; left:50%; width:0; border-block:0; border-right:0; }
.line-horizontal { left:4%; right:4%; top:50%; height:0; border-inline:0; border-bottom:0; }
.arc { top:-3%; bottom:-3%; width:65%; border-block-color:transparent; } .arc-left{left:-21%;border-left:0;border-radius:0 100% 100% 0}.arc-right{right:-21%;border-right:0;border-radius:100% 0 0 100%}
.ball-shine { position:absolute; left:22%; top:16%; width:18%; height:10%; border-radius:99px; background:rgba(255,247,237,.8); transform:rotate(-25deg); }
.ball-value { position:absolute; z-index:2; left:50%; top:50%; transform:translate(-50%,-50%); display:grid; place-items:center; min-width:47%; height:47%; padding:4px; border:4px solid rgba(255,255,255,.88); border-radius:50%; color:#fff; background:rgba(94,28,5,.72); box-shadow:0 4px 0 rgba(56,12,0,.5); font-size:clamp(30px,9vw,55px); line-height:1; font-weight:1000; text-shadow:0 3px 0 #421000; }
.burst { position:absolute; z-index:25; left:50%; top:42%; pointer-events:none; }.burst span{position:absolute;color:var(--piece-color);font-size:22px;filter:drop-shadow(0 2px 0 rgba(0,0,0,.25));animation:confetti .85s ease-out forwards}
.reward-message { position:absolute; z-index:30; left:50%; top:42%; transform:translate(-50%,-50%) scale(.3) rotate(-8deg); display:flex; flex-direction:column; align-items:center; opacity:0; pointer-events:none; color:#fff; text-align:center; text-shadow:0 5px 0 #10225a,0 9px 20px rgba(0,0,0,.5); }.reward-message strong{color:var(--gold);font-size:clamp(42px,13vw,72px);font-weight:1000;white-space:nowrap}.reward-message>span:not(.reward-trophy){font-size:clamp(55px,18vw,100px);font-weight:1000}.reward-message small{font-size:22px;font-weight:900}.reward-message.show{animation:rewardPop .95s cubic-bezier(.2,1.4,.3,1) forwards}.reward-trophy{font-size:70px;color:var(--gold);filter:drop-shadow(0 5px 0 #b06400)}
@keyframes scoreDrop { 0%{transform:translate(-50%,-50%) scale(1)} 45%{transform:translate(-50%,-20%) scale(.78) rotate(10deg)} 100%{transform:translate(-50%,65%) scale(.42) rotate(28deg);opacity:0} }
@keyframes confetti { from{transform:translate(0,0) scale(.3) rotate(0);opacity:1} to{transform:translate(var(--x),var(--y)) scale(1.1) rotate(var(--spin));opacity:0} }
@keyframes rewardPop { 0%{opacity:0;transform:translate(-50%,-50%) scale(.25) rotate(-8deg)} 35%,72%{opacity:1;transform:translate(-50%,-50%) scale(1) rotate(0)} 100%{opacity:0;transform:translate(-50%,-60%) scale(1.12)} }
@keyframes courtLessonReward { 0%,100%{color:rgba(7,26,70,.18);filter:none;transform:translate(-50%,-50%) scale(1)} 12%,74%{color:rgba(255,249,201,.92);filter:drop-shadow(0 0 24px rgba(255,216,77,.96));text-shadow:0 4px 0 rgba(120,48,8,.22);transform:translate(-50%,-50%) scale(1.08)} }
@media (max-height: 680px) { .mode-picker{top:calc(var(--safe-top) + 52px)} .learning-card{top:calc(var(--safe-top) + 108px);height:66px}.backboard{top:calc(var(--safe-top) + 188px);width:190px;height:126px}.crowd-one{top:24vh}.crowd-two{top:31vh}:root{--ball-size:104px} }
@media (min-width: 700px) { :root{--ball-size:168px}.backboard{top:calc(var(--safe-top) + 230px)}.learning-card{top:calc(var(--safe-top) + 132px)}.mode-picker{top:calc(var(--safe-top) + 68px)} }
@media (prefers-reduced-motion: reduce) { .ball,.backboard{transition:none} }
.reward-message { top: 51%; }

/* Calm-play layer: the arena stays polished but saves peak energy for rewards. */
.game { background: linear-gradient(180deg, #091c48 0%, #123b82 30%, #267eb2 47%, #d98932 48%, #bc571e 100%); }
.arena-glow { opacity: .58; }
.lights { opacity: .48; filter: drop-shadow(0 0 6px rgba(170,240,255,.7)); }
.crowd { opacity: .58; filter: saturate(.72); }
.crowd-two { opacity: .42; }
.learning-card { border-color: rgba(255,255,255,.52); box-shadow: 0 7px 19px rgba(0,0,0,.22), inset 0 1px rgba(255,255,255,.14); }
.floor { filter: saturate(.9); }
.backboard.celebrate { filter: drop-shadow(0 0 18px rgba(255,216,77,.88)); }
.reward-message strong { text-shadow: 0 4px 0 #10225a, 0 7px 16px rgba(0,0,0,.42); }
.parent-button { position:relative; z-index:22; flex:0 0 auto; min-width:92px; min-height:44px; display:flex; align-items:center; justify-content:center; gap:6px; padding:8px 12px; border:1px solid rgba(255,255,255,.28); border-radius:999px; color:rgba(255,255,255,.76); background:rgba(7,26,70,.62); box-shadow:0 3px 10px rgba(0,0,0,.15); font-size:11px; font-weight:850; cursor:pointer; backdrop-filter:blur(8px); }
.parent-button span { font-size:12px; filter:grayscale(1); opacity:.78; }
.parent-sheet[hidden], .parent-panel[hidden] { display:none; }
.parent-sheet { position:fixed; z-index:100; inset:0; display:grid; place-items:center; padding:24px; background:rgba(3,12,35,.78); backdrop-filter:blur(12px); touch-action:auto; }
.parent-panel { position:relative; width:min(100%,420px); max-height:calc(100svh - 32px); overflow:auto; padding:28px 24px 24px; border:2px solid rgba(255,255,255,.62); border-radius:26px; color:#10265a; background:linear-gradient(180deg,#fff,#e9f8ff); box-shadow:0 24px 70px rgba(0,0,0,.42); text-align:center; }
.parent-panel h2 { margin:2px 0 8px; font-size:30px; }.parent-panel p{line-height:1.45}.parent-eyebrow{margin:0;color:#16709c;font-size:11px;font-weight:1000;letter-spacing:1.5px}.parent-question{margin:18px 0 14px;font-size:34px;font-weight:1000}.parent-status{min-height:22px;margin:12px 0 0;color:#b43e20;font-weight:800}
.parent-close { position:absolute; top:10px; right:12px; width:42px; height:42px; border:0; border-radius:50%; color:#17346d; background:#d8eff9; font-size:28px; line-height:1; cursor:pointer; }
.parent-options { display:grid; grid-template-columns:repeat(3,1fr); gap:10px; }.parent-options button{min-height:58px;border:2px solid #a9d8eb;border-radius:16px;color:#10265a;background:#fff;font-size:24px;font-weight:1000;box-shadow:0 4px 0 #8bbdd1;cursor:pointer}
.parent-links { display:grid; gap:12px; margin-top:20px; }.parent-links a{display:grid;place-items:center;min-height:54px;border-radius:16px;color:#fff;background:#164fa9;font-weight:900;text-decoration:none;box-shadow:0 5px 0 #0b3477}

/* Release layout: a bounded stage keeps every control clear on phones and tablets. */
.sr-only { position:absolute!important; width:1px!important; height:1px!important; padding:0!important; margin:-1px!important; overflow:hidden!important; clip:rect(0,0,0,0)!important; white-space:nowrap!important; border:0!important; }
.parent-button { min-height:44px; min-width:96px; }
.settings { display:grid; gap:10px; margin:18px 0; text-align:left; }
.settings label { display:flex; align-items:center; justify-content:space-between; gap:16px; min-height:66px; padding:10px 12px; border:1px solid #b8dce9; border-radius:14px; background:#fff; font-weight:850; }
.setting-copy { display:grid; gap:3px; min-width:0; }.setting-copy strong{font-size:15px}.setting-copy small,.parent-action small{color:#52708b;font-size:11px;font-weight:650;line-height:1.35}
.setting-select { align-items:flex-start!important; flex-direction:column; gap:9px!important; }.setting-select select{width:100%;max-width:none!important}
.settings input { width:28px; height:28px; accent-color:#1454ad; }
.settings select { min-height:38px; max-width:170px; border:1px solid #8ebfd2; border-radius:10px; color:#10265a; background:#fff; font:inherit; font-size:14px; }
.parent-actions { display:grid; gap:14px; }
.parent-action { display:grid; gap:7px; text-align:left; }.parent-action button{width:100%}.parent-action small{padding-inline:6px}
.parent-actions button { min-height:50px; border:0; border-radius:14px; color:#fff; background:#164fa9; font-weight:900; box-shadow:0 4px 0 #0b3477; }
.parent-actions .secondary { color:#16366d; background:#d9eef7; box-shadow:0 4px 0 #9fc8d8; }
.ball:focus-visible, .mode-button:focus-visible, .parent-button:focus-visible, .parent-panel button:focus-visible, .parent-panel a:focus-visible, .parent-panel select:focus-visible { outline:4px solid #fff; outline-offset:3px; }

@media (max-width: 360px) {
  .game-header { left:10px; right:10px; }
  .brand { font-size:17px; gap:5px; }
  .brand-ball { width:30px; height:30px; }
  .progress-card { min-width:72px; padding:6px 9px; }
  .mode-button { min-width:96px; height:46px; padding-inline:9px; }
  .learning-card { width:calc(100vw - 24px); padding-left:15px; }
  .learning-prompt { max-width:205px; }
  .parent-button { min-width:88px; padding-inline:10px; }
}

@media (orientation: landscape) and (max-height: 520px) {
  :root { --ball-size:clamp(82px,19vh,104px); }
  .game-header { top:calc(var(--safe-top) + 8px); left:12px; right:12px; }
  .brand { font-size:17px; }
  .brand-ball { width:29px; height:29px; }
  .progress-card { padding:5px 9px; font-size:14px; }
  .mode-picker { top:calc(var(--safe-top) + 7px); }
  .mode-button { min-width:92px; height:40px; padding:4px 9px; }
  .learning-card { top:calc(var(--safe-top) + 56px); left:14px; transform:none; width:205px; height:62px; padding:8px 11px; border-radius:17px; }
  .learning-value { min-width:44px; font-size:38px; }
  .learning-prompt { max-width:125px; font-size:13px; }
  .learning-label { font-size:9px; }
  .backboard { top:calc(var(--safe-top) + 60px); left:61%; width:160px; height:105px; border-width:6px; }
  .floor { height:58vh; bottom:-17vh; }
  .crowd-one { top:34%; } .crowd-two { top:47%; }
  .parent-button { min-width:88px; min-height:40px; padding:6px 10px; }
  .reward-message { left:61%; top:54%; }
}

body.calm-motion *, body.calm-motion *::before, body.calm-motion *::after { animation-duration:.001ms!important; animation-iteration-count:1!important; transition-duration:.001ms!important; scroll-behavior:auto!important; }
body.calm-motion .court-logo.basket-glow { animation:none!important; color:rgba(255,249,201,.92); filter:drop-shadow(0 0 20px rgba(255,216,77,.86)); text-shadow:0 4px 0 rgba(120,48,8,.22); }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration:.001ms!important; animation-iteration-count:1!important; transition-duration:.001ms!important; scroll-behavior:auto!important; }
  .court-logo.basket-glow { animation:none!important; color:rgba(255,249,201,.92); filter:drop-shadow(0 0 20px rgba(255,216,77,.86)); text-shadow:0 4px 0 rgba(120,48,8,.22); }
  .learning-card.lesson-refresh .learning-value { animation:lessonReducedValue .72s ease-out both!important; }
  .learning-card.lesson-refresh .prompt-focus { animation:lessonReducedWord .72s ease-out .1s both!important; }
  .learning-card.lesson-refresh .prompt-focus::after { animation:lessonUnderline .55s ease-out .18s both!important; }
}
@keyframes lessonReducedValue {
  0% { color:#fff; filter:drop-shadow(0 0 13px rgba(255,216,77,.95)); }
  100% { color:var(--gold); filter:none; }
}
@keyframes lessonReducedWord {
  0% { color:#fff; background:#1ab7e8; box-shadow:0 0 0 4px rgba(130,230,255,.38); }
  100% { color:#10265a; background:var(--gold); box-shadow:0 2px 0 #c98200; }
}