/* Small illustrated lessons, using the game's paper, ink and reward colours. */
#app .learning-progress{display:grid;justify-items:center;gap:9px;width:min(450px,100%);color:var(--brand-cream);text-align:center}
#app .learning-progress strong{font-size:13px;line-height:1.35;font-weight:900}
#app .learning-progress small{font-size:12px;color:var(--brand-ball)}
.learning-dots{display:flex;justify-content:center;gap:8px}
.learning-dots i{display:grid;place-items:center;width:27px;height:27px;border:2px solid var(--brand-ink);border-radius:45% 55% 48% 52%;background:#68838b;color:var(--brand-ink);font-size:12px;font-style:normal;font-weight:900;box-shadow:0 2px 0 var(--brand-ink)}
.learning-dots i[data-state="now"]{background:var(--brand-orange);transform:rotate(-7deg) scale(1.12);outline:2px solid var(--brand-cream);outline-offset:2px}
.learning-dots i[data-state="done"]{background:var(--brand-ball);font-size:15px}
#app #howto .howto-basics{grid-template-columns:1fr;width:min(450px,100%)}
#app #howto .howto-basics li{grid-template-columns:1fr;grid-template-rows:minmax(160px,30dvh) auto auto;padding:10px 10px 16px;gap:12px;border:3px solid var(--brand-ink);border-radius:24px 16px 24px 14px;background:#fff2da;box-shadow:0 5px 0 var(--brand-ink)}
#app #howto .tutorial-scene{grid-column:1;grid-row:1;height:100%;min-height:160px}
#app #howto .tutorial-copy{grid-column:1;grid-row:2;padding:0 10px;text-align:center}
#app #howto .tutorial-copy strong{color:var(--brand-ink);font-size:24px}
#app #howto .tutorial-copy p{font-size:15px;line-height:1.45;color:var(--brand-ink);font-weight:700;margin:0}
#app #howto .tutorial-copy p+p{margin-top:8px}
#app :is(#howto,#howto-tips) :is(h2,.tutorial-copy,.pro-tips li>div){text-align:center}
#app :is(#howto,#howto-tips) :is(h2,.tutorial-copy strong,.pro-tips li b){text-wrap:balance}
#app :is(#howto,#howto-tips) :is(.tutorial-copy p,.pro-tips li p){text-wrap:pretty}
#app #howto-tips .tips-header{display:grid;grid-template-columns:44px minmax(0,1fr) 44px;gap:8px}
#app #howto-tips .tips-header h2{grid-column:2;min-width:0}
#app #howto-tips #tips-page-counter{grid-column:3;justify-self:end}
#app #howto .tutorial-control{grid-column:1;grid-row:3;justify-self:stretch;padding:8px;margin:0 8px;color:var(--brand-ink);background:#e4f1d6;border:2px solid var(--brand-ink);font-size:13px}
#app #howto .tutorial-control kbd{color:var(--brand-ink);background:#fffaf0;border-color:#638878;font-weight:900;-webkit-text-stroke:0;text-shadow:none}
#app #howto .tutorial-keys kbd{display:inline-flex;align-items:center;justify-content:center;min-width:34px;height:34px;padding:0 6px;font-size:14px;line-height:1}
#app .screen.howto-screen{gap:18px}
#app #howto .howto-num{color:var(--brand-ink);background:var(--brand-ball);border:2px solid var(--brand-ink)}
#app .learning-browse{min-height:44px;padding:8px 12px;background:none;border:0;box-shadow:none;color:var(--brand-cream);font-size:13px;text-decoration:underline;text-underline-offset:4px;filter:none;transform:none}
#app .howto-screen .howto-actions{width:min(460px,100%);gap:10px}
#app .howto-screen .howto-actions :is(.menu-button,.primary){min-width:0;min-height:62px;height:62px;padding:14px 12px 20px;flex:1;font-size:13px}
#app .howto-screen[data-learning-mode="lesson"]{z-index:12;background:radial-gradient(ellipse at 50% 45%,#0B1A18cc 0,#0B1A18f2 70%);backdrop-filter:blur(8px)}
#app:has(.howto-screen[data-learning-mode="lesson"]:not([hidden])) :is(.touch-controls,.ego-hud,.header-actions,.contact-hint,.serve-meter){visibility:hidden}
@media(max-width:759px) and (orientation:portrait){
  #app .screen.howto-screen{justify-content:flex-start;padding:calc(70px + env(safe-area-inset-top)) 18px calc(16px + env(safe-area-inset-bottom));gap:12px;overflow-y:auto}
  #app #howto .howto-basics li{grid-template-rows:clamp(150px,28dvh,235px) auto auto}
  #app .screen.howto-screen h2{font-size:26px;margin:0}
  #app .tips-screen[data-learning-mode="lesson"] .tip-graphic{height:clamp(170px,30dvh,250px)}
}
@media(max-height:540px) and (orientation:landscape){
  #app .screen.howto-screen{padding:20px 28px;gap:12px;overflow-y:auto}
  #app #howto .howto-basics{width:min(660px,100%)}
  #app #howto .howto-basics li{grid-template-columns:minmax(190px,1fr) minmax(180px,1fr);grid-template-rows:auto auto}
  #app #howto .tutorial-scene{grid-column:1;grid-row:1/3;height:170px;min-height:0}
  #app #howto .tutorial-copy{grid-column:2;grid-row:1;align-self:center}
  #app #howto .tutorial-control{grid-column:2;grid-row:2}
}

/* Keep the whole course visible while each drill earns its own checkmark. */
#app :is(.learning-progress,.coach-course,.tutorial-finish-card) progress{appearance:none;display:block;width:100%;height:14px;border:2px solid var(--brand-ink);border-radius:999px;overflow:hidden;background:#c7d8d2;color:var(--brand-ball);accent-color:var(--brand-ball)}
#app :is(.learning-progress,.coach-course,.tutorial-finish-card) progress::-webkit-progress-bar{background:#c7d8d2;border-radius:999px}
#app :is(.learning-progress,.coach-course,.tutorial-finish-card) progress::-webkit-progress-value{background:var(--brand-ball);border-radius:999px}
#app :is(.learning-progress,.coach-course,.tutorial-finish-card) progress::-moz-progress-bar{background:var(--brand-ball);border-radius:999px}
#app #coach .coach-course{grid-column:1/-1;display:grid;grid-template-columns:minmax(0,1fr) auto;gap:6px 12px;width:100%;padding-top:8px;border-top:1px solid #fff2da44;font-size:12px;font-weight:800;color:var(--brand-cream)}
#app #coach .coach-course progress{grid-column:1/-1;height:12px}
#app #coach .coach-course b{color:var(--brand-ball)}
#app #coach-done{justify-content:safe center;padding:82px 18px 24px;gap:12px}
#app #coach-done .stars i{font-size:48px;-webkit-text-stroke:4px var(--brand-ink)}
#app #coach-done .tutorial-finish-card{display:grid;justify-items:center;gap:12px;width:min(510px,100%);padding:24px;border:3px solid var(--brand-ink);border-radius:26px 16px 28px 18px;background:#fff2da;box-shadow:0 7px 0 var(--brand-ink);color:var(--brand-ink);text-align:center;animation:tutorial-ready .4s ease-out both}
#app #coach-done .tutorial-finish-badge{padding:6px 10px;border:2px solid var(--brand-ink);border-radius:10px;background:var(--brand-ball);font-size:11px;font-weight:900;transform:rotate(-2deg)}
#app #coach-done h2{font-size:clamp(30px,5vw,42px);line-height:1.08;color:var(--brand-ink);-webkit-text-stroke:0;text-shadow:none;outline:none}
#app #coach-done p{font-size:16px;line-height:1.4;color:var(--brand-ink)}
#app #coach-done .tutorial-earned{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;width:100%;margin:0;padding:0;list-style:none;text-align:center}
#app #coach-done .tutorial-earned li{display:flex;align-items:center;justify-content:center;gap:8px;min-width:0;padding:8px 10px;border:2px solid var(--brand-ink);border-radius:10px;background:#e4f1d6;font-size:13px;font-weight:800}
#app #coach-done .tutorial-earned li:last-child{grid-column:1/-1}
#app #coach-done .tutorial-earned span{color:#265743;font-size:18px;line-height:1}
#app #coach-done .tutorial-next-hint{font-size:13px}
#app #coach-done #coach-play{width:100%;min-height:58px;height:auto;padding:14px 16px 18px;font-size:16px;line-height:1.3}
#app:has(#coach-done:not([hidden])) :is(.touch-controls,.ego-hud,.contact-hint,.serve-meter,.rally-label,.header-actions){visibility:hidden}
@keyframes tutorial-ready{from{opacity:0;transform:translateY(12px) scale(.97)}to{opacity:1;transform:none}}
@media(max-width:540px){#app #coach-done .tutorial-finish-card{padding:18px;gap:10px}#app #coach-done .stars i{font-size:40px}}
@media(max-height:540px) and (orientation:landscape){#app #coach-done{justify-content:flex-start;padding-top:20px}#app #coach-done .stars i{font-size:28px}#app #coach-done .tutorial-finish-card{width:min(620px,100%);padding:16px;gap:8px}#app #coach-done .tutorial-earned{grid-template-columns:repeat(5,minmax(0,1fr));gap:5px}#app #coach-done .tutorial-earned li{padding:6px;gap:4px;font-size:11px}#app #coach-done .tutorial-earned li:last-child{grid-column:auto}}
@media(prefers-reduced-motion:reduce){#app #coach-done .tutorial-finish-card{animation:none}}

/* Tutorial serve: bigger meter in the middle of the view; it lights up while pressing counts. */
#app[data-tutorial="true"] .serve-meter{bottom:clamp(120px,24vh,220px);width:min(460px,calc(100% - 48px));gap:10px}
#app[data-tutorial="true"] .serve-meter .serve-track{height:32px;border-width:3px}
#app[data-tutorial="true"] .serve-meter .serve-needle{top:-12px;bottom:-12px;width:10px}
#app[data-tutorial="true"] .serve-meter span{font-size:28px}
#app[data-tutorial="true"] .serve-meter[data-cue="wait"] span{color:var(--brand-cream)}
#app[data-tutorial="true"] .serve-meter[data-cue="go"] span{color:var(--serve-green);font-size:34px}
#app[data-tutorial="true"] .serve-meter[data-cue="late"] span{color:var(--serve-red-text,#ff8a8a)}
#app[data-tutorial="true"] .serve-meter[data-cue="go"] .serve-track{border-color:var(--serve-green);box-shadow:0 4px 0 #0B1A18}
@media(max-height:480px){
  #app[data-tutorial="true"] .serve-meter{bottom:calc(150px + env(safe-area-inset-bottom));width:min(380px,calc(100% - 48px))}
  #app[data-tutorial="true"] .serve-meter span{font-size:22px}
  #app[data-tutorial="true"] .serve-meter[data-cue="go"] span{font-size:26px}
}

/* Serve lesson: three short lines, read top to bottom, like the other cards. */
#app .howto-basics .serve-steps{display:grid;gap:4px}
#app .howto-basics .serve-steps p{margin:0}
#app .howto-basics .serve-steps b{font-weight:900;padding:0 2px}
#app .serve-steps .zone-green{box-shadow:inset 0 -.42em #3de476}#app .serve-steps .zone-gold{box-shadow:inset 0 -.42em #ffd23f}

/* Coach in the in-game callout style (like ASS!): no box, loud italic
   text with the dark comic outline, centred over the court. */
#app #coach,#app #coach[data-state="done"]{display:grid;grid-template-columns:1fr auto auto 1fr;align-items:center;gap:4px 18px;
  left:50%;width:min(640px,calc(100% - 32px));padding:0;background:none;border:0;border-radius:0;box-shadow:none;text-align:center}
#app #coach .coach-course,#app #coach .coach-face{display:none}
#app #coach .coach-text{position:relative;z-index:1;grid-column:1/-1;grid-row:1;text-align:center}
#app #coach .coach-text strong{font-size:clamp(32px,4.2vw,46px);line-height:1.12;letter-spacing:-1px;text-wrap:balance;
  -webkit-text-stroke:7px #0B1A18;paint-order:stroke fill;text-shadow:0 4px 0 #0008}
#app #coach[data-state="done"] .coach-text strong{font-size:clamp(32px,4.2vw,46px)}
#app #coach .coach-text>span{margin-top:8px;font-size:20px;line-height:1.4;font-weight:900;color:#fff;text-wrap:balance;
  -webkit-text-stroke:5px #0B1A18;paint-order:stroke fill;text-shadow:0 3px 0 #0008}
#app #coach .coach-goal{display:grid;justify-items:center;gap:8px;margin-top:12px}
#app #coach .coach-text small{display:block;margin:0;padding:0;background:none;font-size:clamp(30px,4vw,40px);line-height:1.2;font-weight:900;
  -webkit-text-stroke:5px #0B1A18;paint-order:stroke fill}
#app #coach .coach-goal>.coach-demo{grid-column:1;grid-row:2;justify-self:center;min-width:0;min-height:0;padding:0;filter:drop-shadow(0 3px 0 #0B1A18)}
#app #coach .coach-demo{gap:10px}
#app #coach .coach-demo kbd{min-width:32px;height:34px;padding:0 8px;border-color:#0B1A18;background:#fff2da;color:#0B1A18;font-size:16px;line-height:1;-webkit-text-stroke:0;text-shadow:none}
#app #coach .coach-demo kbd.wide{min-width:96px}
#app #howto .tutorial-keys,#app #coach .coach-demo .wasd{display:grid;grid-template-columns:repeat(3,minmax(34px,max-content));grid-template-areas:". forward ." "left back right";gap:4px;margin:0;line-height:1;-webkit-text-stroke:0;text-shadow:none}
#app :is(#howto .tutorial-keys,#coach .wasd)>kbd:nth-child(1){grid-area:forward}
#app :is(#howto .tutorial-keys,#coach .wasd)>kbd:nth-child(2){grid-area:left}
#app :is(#howto .tutorial-keys,#coach .wasd)>kbd:nth-child(3){grid-area:back}
#app :is(#howto .tutorial-keys,#coach .wasd)>kbd:nth-child(4){grid-area:right}
#app #coach .coach-demo .press,#app #coach .coach-demo .wasd kbd{animation:coach-key-press 2s ease-in-out infinite}
@keyframes coach-key-press{0%,55%,100%{transform:none;background:#fff2da}65%,85%{transform:translateY(2px);background:#ffd34a}}
#app #coach .coach-demo .mouse-click{width:30px;height:42px;border-color:#0B1A18;background:linear-gradient(90deg,#ffd34a 50%,transparent 50%) top/100% 45% no-repeat,#fff2da}
#app #coach .coach-demo .right-click{background:linear-gradient(90deg,transparent 50%,#ffd34a 50%) top/100% 45% no-repeat,#fff2da}
#app #coach .coach-demo .joy{background:#fff2da;border-color:#0B1A18}
#app #coach .coach-demo .pill-press{background:#fff2da;color:#0B1A18;border-color:#0B1A18}
#app #coach .coach-demo .control-or{margin:0;font:900 16px/1 var(--font-ui);color:#fff;-webkit-text-stroke:3px #0B1A18;paint-order:stroke fill;text-shadow:none}
#app #coach .coach-goal:has(.check){display:flex;align-items:center;justify-content:center;gap:12px}
#app #coach .coach-goal>.coach-demo:has(.check){flex:0 0 50px;width:50px;height:50px;border:3px solid #0B1A18;border-radius:14px 8px 14px 8px;background:#24533c;box-shadow:3px 4px 0 #0B1A18;filter:none;transform:rotate(-5deg)}
#app #coach .coach-goal .check{display:block;line-height:1;-webkit-text-stroke:0;transform:rotate(5deg)}
#app #coach .coach-goal .check svg{display:block;width:36px;height:36px}
#app #coach .coach-confetti{display:none;position:absolute;inset:0;z-index:0;pointer-events:none}
#app #coach[data-state="done"] .coach-confetti{display:block}
#app #coach .coach-confetti i{position:absolute;left:var(--x);top:12px;width:6px;height:10px;border:1px solid #0B1A18;border-radius:2px;background:#ffd34a;opacity:0;animation:coach-confetti 1.05s cubic-bezier(.12,.6,.32,1) var(--delay,0s) both}
#app #coach .coach-confetti i:nth-child(3n+2){background:#b7df8a}
#app #coach .coach-confetti i:nth-child(3n){background:#fff2da;width:5px;height:7px}
@keyframes coach-confetti{0%{opacity:0;transform:translate(-50%,-12px) rotate(0)}12%{opacity:1}65%{opacity:1}100%{opacity:0;transform:translate(var(--dx),var(--dy)) rotate(var(--spin))}}
@media(prefers-reduced-motion:reduce){#app #coach[data-state="done"] .coach-confetti{display:none}}
#app>.coach-skip{position:absolute;z-index:5;right:max(20px,env(safe-area-inset-right));bottom:max(16px,env(safe-area-inset-bottom));display:flex;align-items:center;justify-content:center;min-height:44px;padding:10px 18px;border:2px solid var(--brand-ink);border-radius:12px;background:#fff2da;box-shadow:0 3px 0 var(--brand-ink);color:var(--brand-ink);font-size:14px;font-weight:900;text-decoration:none;-webkit-text-stroke:0;pointer-events:auto}
#app>.coach-skip:hover{background:var(--brand-ball);color:var(--brand-ink)}
#app>.coach-skip:focus-visible{outline:3px solid var(--brand-orange);outline-offset:4px}
#app:not([data-tutorial="true"])>.coach-skip,#app:has(#coach[hidden])>.coach-skip{display:none}
@media(max-width:700px),(max-height:480px){
  #app #coach .coach-text strong,#app #coach[data-state="done"] .coach-text strong{font-size:28px;-webkit-text-stroke-width:6px}
  #app #coach .coach-text>span{font-size:16px;-webkit-text-stroke-width:4px}
  #app #coach .coach-text small{font-size:30px}
  #app #coach .coach-goal>.coach-demo:has(.check){flex-basis:44px;width:44px;height:44px;border-radius:12px}
  #app #coach .coach-goal .check svg{width:32px;height:32px}
}
/* In a lesson the screen title already names the skill. */
#app [data-learning-mode="lesson"] .howto-basics .tutorial-copy strong{display:none}
/* Return drill: the ball ring is thick and shrinks a step after every hit. */
#app .ball-readability[data-drill="true"]{border-width:4px;box-shadow:0 0 0 2px #0B1A18,inset 0 0 0 2px #0B1A18;transition:width .3s ease-out,height .3s ease-out}