/* The interactive tutorial (src/ui/tutorial.js) and its spotlight (src/ui/spotlight.js): the first-run choice, the
   practice badge, the veil with its holes and rings, the step card beside its target, the hint, the success flash and
   the ready screen. The game's own language: dark navy glass, cyan and gold accents, the HUD's display face. */
.tourStart{margin-top:.5rem}
.tourStart.nudge{animation:tourNudge 1.6s ease-in-out infinite}   /* a first visit: the tutorial's link breathes under Solo */
@keyframes tourNudge{0%,100%{box-shadow:0 0 0 .125rem var(--ki),0 0 .75rem rgba(122,208,255,.35)}50%{box-shadow:0 0 0 .125rem var(--gold),0 0 1rem rgba(255,201,74,.55)}}
/* the first-run choice, over the start screen after the Arena Select; the skip confirmation uses the same box */
.tutOv{position:fixed;inset:0;z-index:62;display:flex;align-items:center;justify-content:center;padding:1rem;background:rgba(4,6,14,.72);backdrop-filter:blur(3px);-webkit-backdrop-filter:blur(3px)}
.tutChoice{width:min(30rem,100%);padding:1.5rem 1.75rem 1.25rem;text-align:center;border-color:#4a5a8c;border-top-color:var(--gold);box-shadow:0 1rem 3rem rgba(0,0,0,.6)}
.tutChoice .tutEyebrow{display:block;font-family:var(--disp);font-size:.75rem;letter-spacing:.2em;text-transform:uppercase;color:var(--ki)}
.tutChoice h2{margin:.125rem 0 .625rem;font-family:var(--disp);font-weight:400;font-size:1.75rem;letter-spacing:.05em;text-transform:uppercase;color:var(--gold)}
.tutChoice p{margin:0 0 1rem;font-size:1rem;line-height:1.45;color:var(--fg)}
.tutBtns{display:flex;gap:.625rem;justify-content:center;flex-wrap:wrap}
.tutBtns button{min-width:9.5rem;padding:.75rem 1.1rem;font-size:.9375rem;text-transform:uppercase;letter-spacing:.06em}
.tutChoice .tutSub{display:block;margin-top:.75rem;font-size:.75rem;color:var(--dim);letter-spacing:.04em}
/* the practice badge in the round tracker while the practice run is on (#app.practice) */
.tutBadge{position:absolute;top:calc(var(--topH) - .4rem);left:50%;transform:translateX(-50%);z-index:6;padding:.2rem .7rem;font-family:var(--disp);font-size:.6875rem;letter-spacing:.2em;color:#0b0e1a;background:var(--gold);clip-path:polygon(.4rem 0,100% 0,calc(100% - .4rem) 100%,0 100%);pointer-events:none}
#app.dRecFight .tutBadge{left:calc(50% - 6.5rem)}   /* a recruitment practice: beside the top bar's clock ring, not on it (2026-10-15) */
/* the training area's bar (tutorial.js bar, after Main Play's Continue to Practice): in the clock's row, the online
   view pill's look; its button starts each fight, then continues to the next round, gold when that's what waits */
.practiceBar{display:flex;align-items:center;gap:.5rem;padding:.3125rem .375rem .3125rem .75rem;border-radius:1.25rem;font-family:var(--disp);font-size:.75rem;letter-spacing:.04em;color:#dfe6ff;white-space:nowrap}
.practiceBar .pbT{color:var(--gold);letter-spacing:.14em}
.practiceBar button{font:inherit;font-size:.6875rem;letter-spacing:.06em;padding:.25rem .75rem;border-radius:1rem;border:1px solid #6b5a1f;background:rgba(20,16,8,.88);color:var(--gold);cursor:pointer}
.practiceBar button:disabled{opacity:.5;cursor:default}
.practiceBar .pbGo{background:var(--gold);color:#0b0e1a;border-color:var(--gold)}
.practiceBar .pbGo.next{box-shadow:0 0 .75rem rgba(255,200,60,.55)}
.practiceBar .pbExit{color:#dfe6ff;border-color:#3a4a7a;background:rgba(11,14,26,.85)}
/* the spotlight: the veil (no pointer events: the taps go through to the game), its holes and their rings */
.spotLayer{position:fixed;inset:0;z-index:50;pointer-events:none}
.spotLayer .spotVeil{position:absolute;inset:0;width:100%;height:100%}
.spotLayer .spotDim{fill:rgba(3,4,10,.72)}
.spotRings{position:absolute;inset:0}
.spotRing{--ringC:var(--gold);position:fixed;border-radius:.625rem;border:.125rem solid var(--ringC);box-shadow:0 0 1.25rem .25rem rgba(255,201,74,.45),inset 0 0 1rem rgba(255,224,140,.25);animation:spotPulse 1.5s ease-in-out infinite;transition:left .2s,top .2s,width .2s,height .2s;transform-origin:50% 50%}
.spotRing.main{--ringC:#ffe08a}
/* the entrance (spotlight.js intro): three bright flashes, each popping the ring out towards the player by
   SPOT.popMin-popMax px a side (--sx, --sy, set per ring) and back, then the steady pulse */
.spotRing.intro{animation:spotIntro 1.35s ease-out,spotPulse 1.5s ease-in-out 1.35s infinite}
@keyframes spotIntro{
  0%,33%,66%,100%{transform:scale(1);border-color:var(--ringC);box-shadow:0 0 1rem .125rem rgba(255,201,74,.35),inset 0 0 .75rem rgba(255,224,140,.2)}
  11%,44%,77%{transform:scale(var(--sx,1.06),var(--sy,1.06));border-color:#fff;box-shadow:0 0 2.5rem .875rem rgba(255,214,110,.9),inset 0 0 1.5rem rgba(255,240,190,.65)}
}
@keyframes spotBlink{
  0%,33%,66%,100%{border-color:var(--ringC);box-shadow:0 0 1rem .125rem rgba(255,201,74,.35)}
  11%,44%,77%{border-color:#fff;box-shadow:0 0 2.5rem .875rem rgba(255,214,110,.9)}
}
@keyframes spotPulse{0%,100%{box-shadow:0 0 1rem .125rem rgba(255,201,74,.35),inset 0 0 .75rem rgba(255,224,140,.2)}50%{box-shadow:0 0 1.5rem .375rem rgba(255,201,74,.65),inset 0 0 1.25rem rgba(255,224,140,.4)}}
.spotArrow{position:fixed;z-index:51;transform:translate(-50%,-50%);font-size:1rem;color:var(--gold);text-shadow:0 0 .5rem rgba(255,201,74,.8);animation:spotNudge 1.2s ease-in-out infinite}
.spotArrow.below{animation-name:spotNudgeY}.spotArrow.above{animation-name:spotNudgeY}
@keyframes spotNudge{0%,100%{margin-left:0}50%{margin-left:.3rem}}
@keyframes spotNudgeY{0%,100%{margin-top:0}50%{margin-top:.3rem}}
/* the step card: beside its target, never over it */
.spotCard{position:fixed;z-index:52;padding:.75rem .9375rem .875rem;border-radius:.75rem;border-color:#3f4f84;border-top-color:var(--gold);box-shadow:0 .75rem 2rem rgba(0,0,0,.55);transition:left .25s,top .25s;pointer-events:auto}
.spotCard.in{animation:spotIn .25s ease-out}
@keyframes spotIn{from{opacity:0;transform:translateY(.375rem)}to{opacity:1;transform:none}}
.spotHead{display:flex;align-items:center;justify-content:space-between;gap:.5rem}
.spotStep{font-family:var(--disp);font-size:.6875rem;letter-spacing:.12em;color:var(--ki)}
.spotSkip{font:inherit;font-size:.6875rem;letter-spacing:.04em;color:var(--dim);background:none;border:0;padding:.125rem .25rem;cursor:pointer;text-decoration:underline;text-underline-offset:.15em}
.spotSkip:hover{color:var(--fg)}
.spotTitle{margin:.25rem 0 .25rem;font-family:var(--disp);font-weight:400;font-size:1.0625rem;letter-spacing:.06em;text-transform:uppercase;color:var(--gold)}
.spotText{margin:0 0 .375rem;font-size:.9375rem;line-height:1.4}
.spotHint{margin:0 0 .375rem;font-size:.8125rem;line-height:1.35;color:var(--dim)}
.spotNote{margin:0 0 .375rem;padding:.375rem .5rem;border-radius:.375rem;font-size:.8125rem;line-height:1.3;color:#ffd98a;background:rgba(255,201,74,.12);border:1px solid rgba(255,201,74,.35)}
.spotNote.in{animation:spotIn .2s ease-out}
.spotNote.good{color:#bff5cf;background:rgba(94,224,138,.12);border-color:rgba(94,224,138,.4)}   /* the last step's closing line, on the next card (tutorial.js complete) */
.spotBtns{display:flex;gap:.5rem;flex-wrap:wrap;margin:.25rem 0 .375rem}
.spotBtns button{font-size:.8125rem;padding:.5rem .875rem;text-transform:uppercase;letter-spacing:.05em}
.spotFoot{display:flex;align-items:center;justify-content:space-between;gap:.5rem;min-height:1rem}
.spotDots{display:flex;gap:.2rem;flex-wrap:wrap}
.spotDots i{width:.3125rem;height:.3125rem;border-radius:50%;background:#3a4a7a}
.spotDots i.done{background:#8a9ad0}.spotDots i.on{background:var(--gold);box-shadow:0 0 .375rem var(--gold)}
.spotKeys{font-size:.6875rem;color:var(--dim);white-space:nowrap}
/* the success flash over a target */
.spotFlash{position:fixed;z-index:53;display:flex;align-items:center;justify-content:center;border-radius:.625rem;font-family:var(--disp);font-size:2rem;color:#fff6d0;text-shadow:0 0 .75rem var(--gold);background:rgba(255,201,74,.35);box-shadow:0 0 2rem .5rem rgba(255,201,74,.5);pointer-events:none;animation:spotFlash .75s ease-out forwards}
@keyframes spotFlash{0%{opacity:0;transform:scale(.96)}20%{opacity:1;transform:scale(1.02)}100%{opacity:0;transform:scale(1)}}
/* the ready screen's recap */
.spotRecap{margin:0 0 .5rem;padding:0;list-style:none;font-size:.8125rem;line-height:1.5}
.spotRecap li::before{content:"✓ ";color:var(--good)}
/* phones: the card takes the width, the badge sits under the tracker */
@media (max-width:760px){
  .practiceBar{padding:.25rem .3rem .25rem .5rem;gap:.3rem;font-size:.625rem}.practiceBar .pbT{display:none}.practiceBar button{padding:.2rem .5rem;font-size:.625rem}
  .spotCard{padding:.625rem .75rem .75rem}
  .spotText{font-size:.875rem}
  .tutChoice{padding:1.25rem 1rem 1rem}
  .tutChoice h2{font-size:1.375rem}
}
@media (prefers-reduced-motion:reduce){
  .spotRing,.spotArrow,.tourStart.nudge{animation:none}
  .spotRing.intro{animation:spotBlink 1.35s ease-out}   /* the three flashes still, without the pop */
  .spotCard,.spotRing{transition:none}
  .spotCard.in,.spotNote.in{animation:none}
}
/* LEARN TO PLAY's picker (src/ui/learn.js): the four tutorials as cards over the start screen, a ✓ on the ones done,
   and from a new game's Play a "Don't show this again" beside Skip & play */
.learnOv{z-index:63}
.learnBox{position:relative;width:min(40rem,100%);max-height:calc(100dvh - 2rem);overflow-y:auto;padding:1.5rem 1.75rem 1.25rem;border-color:#4a5a8c;border-top-color:var(--gold);box-shadow:0 1rem 3rem rgba(0,0,0,.6)}
.learnBox .tutEyebrow{display:block;font-family:var(--disp);font-size:.75rem;letter-spacing:.2em;text-transform:uppercase;color:var(--ki)}
.learnBox h2{margin:.125rem 0 .375rem;font-family:var(--disp);font-weight:400;font-size:1.75rem;letter-spacing:.05em;text-transform:uppercase;color:var(--gold)}
.learnLead{margin:0 0 1rem;font-size:.9375rem;line-height:1.4;color:var(--fg)}
.learnX{position:absolute;top:.625rem;right:.625rem;width:2rem;height:2rem;padding:0;font-size:.875rem;line-height:1;border-radius:50%}
.learnGrid{display:grid;grid-template-columns:1fr 1fr;gap:.625rem}
.learnCard{display:flex;align-items:flex-start;gap:.75rem;margin:0;padding:.75rem .875rem;text-align:left;text-transform:none;letter-spacing:0;font-family:var(--body);color:var(--fg);background:linear-gradient(145deg,rgba(28,40,74,.92),rgba(14,20,40,.92));border:1px solid #3d568a;border-radius:.75rem;transition:border-color .15s,box-shadow .15s,transform .15s}
.learnCard:hover,.learnCard:focus-visible{border-color:var(--gold);box-shadow:0 0 1rem rgba(255,201,74,.3);transform:translateY(-1px)}
.learnCard .lcIc{flex:none;display:flex;align-items:center;justify-content:center;width:2.75rem;height:2.75rem;font-style:normal;font-size:1.75rem}
.learnCard .lcIc img{width:100%;height:100%;object-fit:contain}
.learnCard .lcTxt{display:flex;flex-direction:column;gap:.25rem;flex:1;min-width:0}
.learnCard .lcTxt b{font-family:var(--disp);font-size:1rem;letter-spacing:.05em;text-transform:uppercase;color:#ffe08a}
.learnCard .lcTxt small{font-size:.8125rem;line-height:1.35;color:#b9c3e0}
.learnCard .lcMeta{flex:none;display:flex;flex-direction:column;align-items:flex-end;gap:.375rem;font-size:.6875rem;color:var(--dim)}
.learnCard .lcMeta em{font-style:normal;white-space:nowrap}
.learnCard .lcMeta kbd{min-width:1.25rem;padding:.0625rem .3125rem;text-align:center;font-family:var(--disp);font-size:.6875rem;color:var(--dim);border:1px solid #3d568a;border-radius:.25rem}
.learnCard.done{border-color:rgba(94,224,138,.45)}
.learnCard .lcDone{color:#7fe3a2;font-weight:700}
.learnFoot{display:flex;align-items:center;justify-content:space-between;gap:.75rem;flex-wrap:wrap;margin-top:1rem}
.learnHide{display:flex;align-items:center;gap:.5rem;font-size:.875rem;color:var(--dim);cursor:pointer}
.learnHide input{width:1.0625rem;height:1.0625rem;margin:0;accent-color:var(--gold)}
.learnNote{font-size:.8125rem;color:var(--dim)}
.learnFoot .primary{min-width:10rem;padding:.75rem 1.1rem;font-size:.9375rem;text-transform:uppercase;letter-spacing:.06em}
@media (max-width:760px){
  .learnBox{padding:1.25rem 1rem 1rem}
  .learnBox h2{font-size:1.375rem;padding-right:2rem}
  .learnGrid{grid-template-columns:1fr}
  .learnCard .lcMeta kbd{display:none}
  .learnFoot{flex-direction:column-reverse;align-items:stretch}
  .learnFoot .primary{width:100%}
}
@media (prefers-reduced-motion:reduce){.learnCard{transition:none}.learnCard:hover,.learnCard:focus-visible{transform:none}}

/* a strategy challenge's result: the Battle Breakdown's facts (learn.js LEARN_CHALLENGE) */
.chFacts{margin:.25rem 0 .5rem;padding-left:1rem;font-size:.8125rem;line-height:1.35}.chFacts b{color:#fff}