/* JAQUE MATE TOONS R04.21 · Academia guiada, automática y responsive */
:root{--jmt-ink:#21113e;--jmt-purple:#7040c8;--jmt-cyan:#37e8ef;--jmt-yellow:#ffd62f;--jmt-coach-z:160}
html:has(body.jmt-coach-open),body.jmt-coach-open{overflow:hidden!important;overscroll-behavior:none}
/* Academia: el tablero ocupa el carril libre y se centra dentro de él.
   Así la composición no deja un bloque vacío bajo el tablero en vertical. */
body.jmt-academy-layout:not(.fight-mode) .game{
  grid-template-rows:auto minmax(0,1fr)!important;
  align-content:stretch!important;
  min-height:0;
}
body.jmt-academy-layout:not(.fight-mode) .board-area{
  align-self:stretch!important;
  align-items:center;
}
@media (orientation:landscape) and (max-height:760px){
  body.jmt-academy-layout:not(.fight-mode){--chrome:90px;--avail-w:calc(100vw - 20px)}
  body.jmt-academy-layout:not(.fight-mode) .game{
    width:var(--avail-w);
    max-width:100%;
    grid-template-columns:minmax(150px,1fr) auto minmax(150px,1fr)!important;
    grid-template-rows:minmax(0,1fr)!important;
    grid-template-areas:"top board bottom"!important;
    align-items:center!important;
    align-content:stretch!important;
    padding:4px 10px 8px;
  }
  body.jmt-academy-layout:not(.fight-mode) .board-area{grid-column:auto;align-self:center!important}
  body.jmt-academy-layout:not(.fight-mode) .card{width:auto;min-width:0;transform:none!important}
  body.jmt-academy-layout:not(.fight-mode) .card-body{flex-direction:column;text-align:center;gap:4px}
  body.jmt-academy-layout:not(.fight-mode) .caps{justify-content:center}
  body.jmt-academy-layout:not(.fight-mode) .turn-chip{position:static;display:inline-block;margin-top:4px}
}
.jmt-coach{position:fixed;inset:0;z-index:var(--jmt-coach-z);pointer-events:none;overflow:visible}.jmt-coach[hidden]{display:none!important}
.jmt-coach-shield{position:absolute;z-index:1;background:transparent;pointer-events:auto}.jmt-coach.interactive .jmt-coach-shield{pointer-events:none}
.jmt-coach-card{position:absolute;z-index:2;left:50%;translate:-50% 0;width:min(590px,calc(100vw - 18px));max-height:calc(100dvh - 24px);display:grid;grid-template-columns:clamp(72px,13vw,104px) minmax(0,1fr);gap:11px;align-items:center;padding:11px 13px 11px 9px;border:4px solid var(--jmt-ink);border-radius:23px 18px 27px 17px;background:linear-gradient(145deg,rgba(255,255,255,.99),rgba(225,248,255,.98));box-shadow:0 7px 0 var(--jmt-purple),0 11px 0 var(--jmt-ink),0 0 0 3px rgba(255,255,255,.65);color:var(--jmt-ink);pointer-events:auto;overflow:auto;overscroll-behavior:contain;isolation:isolate}
.jmt-coach-card:after{content:"";position:absolute;left:78px;width:18px;height:18px;background:#edfaff;border-left:4px solid var(--jmt-ink);border-bottom:4px solid var(--jmt-ink);transform:rotate(-45deg)}.jmt-coach-card.below:after{top:-12px;transform:rotate(135deg)}.jmt-coach-card.above:after{bottom:-12px}.jmt-coach-card.side-left,.jmt-coach-card.side-right{position:fixed;max-width:440px}.jmt-coach-card.side-left:after,.jmt-coach-card.side-right:after{display:none}
.jmt-coach-npc{position:relative;justify-self:center;align-self:center;width:min(100%,96px);aspect-ratio:1;background-repeat:no-repeat;background-size:contain;background-position:center bottom;filter:drop-shadow(3px 5px 0 rgba(33,17,62,.34));transform-origin:50% 90%}.jmt-coach-npc i{position:absolute;right:-4px;top:-3px;width:31px;height:25px;border:3px solid var(--jmt-ink);border-radius:50%;background:#fff;opacity:0;transform:scale(.72);transition:.14s}.jmt-coach-npc i:before{content:"•••";position:absolute;inset:0;display:grid;place-items:center;font:1000 12px/1 Nunito,system-ui;color:var(--jmt-purple);letter-spacing:1px}.jmt-coach.talking .jmt-coach-npc{animation:jmt-coach-talk .46s ease-in-out infinite alternate}.jmt-coach.talking .jmt-coach-npc i{opacity:1;transform:scale(1);animation:jmt-coach-dots .7s ease-in-out infinite alternate}
.jmt-coach-copy{min-width:0;align-self:stretch;display:flex;flex-direction:column;justify-content:center}.jmt-coach-top{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-bottom:3px}.jmt-coach-badge{display:inline-flex;align-items:center;min-height:23px;padding:2px 9px;border:2px solid var(--jmt-ink);border-radius:999px;background:var(--jmt-yellow);box-shadow:0 2px 0 var(--jmt-ink);font:400 clamp(.72rem,1.6vw,.92rem)/1 Bangers,Impact,sans-serif;letter-spacing:.055em}.jmt-coach.exam .jmt-coach-badge{background:#ff6e9f;color:#fff;text-shadow:1px 2px 0 var(--jmt-ink)}.jmt-coach-progress{font:1000 .72rem/1 Nunito,system-ui;color:var(--jmt-purple)}.jmt-coach h3{margin:2px 0 4px;font:400 clamp(1rem,2.3vw,1.38rem)/1 Bangers,Impact,sans-serif;letter-spacing:.035em;color:var(--jmt-purple)}.jmt-coach p{margin:0;font:900 clamp(.72rem,1.5vw,.91rem)/1.24 Nunito,system-ui;color:#33274b;text-wrap:pretty}
.jmt-coach-demo{margin-top:9px;display:grid;grid-template-columns:minmax(148px,210px) minmax(0,1fr);gap:9px;align-items:center}.jmt-demo-board{width:min(100%,210px);aspect-ratio:1;display:grid;grid-template-columns:repeat(5,1fr);border:3px solid var(--jmt-ink);border-radius:12px;overflow:hidden;box-shadow:0 4px 0 var(--jmt-ink);background:#fff}.jmt-demo-cell{position:relative;display:grid;place-items:center;min-width:0;aspect-ratio:1;background:#f4e8cc;border:1px solid rgba(33,17,62,.2)}.jmt-demo-cell:nth-child(odd){background:#79b5c8}.jmt-demo-cell.good{box-shadow:inset 0 0 0 4px #37e79c;background:#c9ffe7;animation:jmt-demo-good .8s ease-in-out infinite alternate}.jmt-demo-cell.bad{box-shadow:inset 0 0 0 4px #ff4f6f;background:#ffd8df}.jmt-demo-cell.capture{box-shadow:inset 0 0 0 4px #ffd21c;background:#fff4ad;animation:jmt-demo-good .8s ease-in-out infinite alternate}.jmt-demo-cell.block{box-shadow:inset 0 0 0 4px #ff8b24;background:#ffe0b7}.jmt-demo-cell small{position:absolute;z-index:5;right:1px;bottom:0;padding:1px 2px;border-radius:4px;background:var(--jmt-ink);color:#fff;font:1000 clamp(.38rem,1vw,.56rem)/1 Nunito,system-ui}.jmt-demo-piece{position:absolute;z-index:3;left:50%;top:50%;translate:-50% -50%;width:52%;aspect-ratio:1;background-image:var(--demo-piece);background-size:contain;background-position:center;background-repeat:no-repeat;filter:drop-shadow(1px 2px 0 rgba(33,17,62,.42));animation:jmt-demo-piece 1.15s ease-in-out infinite alternate}.jmt-demo-piece.enemy{outline:2px solid #ff4f6f;outline-offset:1px;border-radius:30%}.jmt-demo-brick{position:absolute;z-index:2;font:1000 clamp(.8rem,2.4vw,1.25rem)/1 Nunito,system-ui;color:#c84f22;text-shadow:0 2px 0 var(--jmt-ink)}.jmt-demo-legend{font:900 clamp(.58rem,1.25vw,.73rem)/1.27 Nunito,system-ui;color:#4d3b62;display:grid;gap:4px}.jmt-demo-legend b{color:#22b877}.jmt-demo-legend i{color:#ff405f;font-style:normal}.jmt-demo-legend em{color:#d56527;font-style:normal}
.jmt-coach-practice{margin-top:8px;padding:6px 9px;border:2px solid var(--jmt-ink);border-radius:11px;background:#fff5a8;box-shadow:0 3px 0 var(--jmt-ink);color:var(--jmt-ink);font:1000 clamp(.66rem,1.4vw,.8rem)/1.17 Nunito,system-ui;text-align:center}.jmt-coach:not(.interactive) .jmt-coach-practice:after{content:"  •••";letter-spacing:2px;animation:jmt-coach-dots .7s ease-in-out infinite alternate}.jmt-coach.correct .jmt-coach-practice{background:#caffdf;animation:jmt-coach-ok .28s ease-out both}.jmt-coach.wrong .jmt-coach-practice{background:#ffd8dc;border-color:#ff405f;animation:jmt-coach-wrong .22s ease-out both}.jmt-coach-actions{display:flex;align-items:center;justify-content:flex-end;gap:7px;flex-wrap:wrap;margin-top:9px}.jmt-coach-actions button{min-height:34px;padding:5px 10px;border:2px solid var(--jmt-ink);border-radius:12px;background:#fff;box-shadow:0 3px 0 var(--jmt-ink);font:1000 clamp(.62rem,1.25vw,.76rem)/1 Nunito,system-ui;color:var(--jmt-ink);cursor:pointer;touch-action:manipulation}.jmt-coach-actions button:active{translate:0 2px;box-shadow:0 1px 0 var(--jmt-ink)}.jmt-coach-skip{background:#dff7ff!important}.jmt-coach-never{background:#f1e6ff!important;color:#55318c!important}
.jmt-coach.interactive .jmt-coach-demo{display:none!important}.jmt-coach.interactive .jmt-coach-card{min-height:0;grid-template-columns:58px minmax(0,1fr);padding:8px 11px}.jmt-coach.interactive .jmt-coach-npc{width:54px}.jmt-coach.interactive .jmt-coach-actions{margin-top:6px}
body.jmt-coach-open .tutorial-hud,body.jmt-coach-open:not(.jmt-coach-interactive) .tutorial-guide{visibility:hidden!important}body.jmt-coach-interactive:not(.jmt-coach-exam) .tutorial-guide{visibility:visible!important}
body.jmt-coach-exam .tutorial-hud{visibility:hidden!important}body.jmt-coach-exam.jmt-help-0 .tutorial-guide,body.jmt-coach-exam.jmt-help-1 .tutorial-guide{visibility:hidden!important}body.jmt-coach-exam.jmt-help-2 .tutorial-guide,body.jmt-coach-exam.jmt-help-3 .tutorial-guide,body.jmt-coach-exam.jmt-help-4 .tutorial-guide{visibility:visible!important}body.jmt-coach-exam.jmt-help-2 #tutorial-route,body.jmt-coach-exam.jmt-help-2 .tutorial-target,body.jmt-coach-exam.jmt-help-2 .tutorial-hand{display:none!important}body.jmt-coach-exam.jmt-help-3 #tutorial-route[hidden],body.jmt-coach-exam.jmt-help-3 .tutorial-target[hidden],body.jmt-coach-exam.jmt-help-4 #tutorial-route[hidden],body.jmt-coach-exam.jmt-help-4 .tutorial-target[hidden],body.jmt-coach-exam.jmt-help-4 .tutorial-hand[hidden]{display:block!important}body.jmt-coach-exam.jmt-help-3 .tutorial-hand{display:none!important}
#tutorial-route-shadow{stroke:rgba(33,17,62,.72)!important;stroke-width:8!important}#tutorial-route-line{stroke:var(--jmt-cyan)!important;stroke-width:3.5!important;stroke-dasharray:11 9!important;filter:drop-shadow(2px 2px 0 rgba(33,17,62,.75))!important}.tutorial-origin{opacity:.68!important;box-shadow:0 0 0 2px #ff3fa4,0 0 9px 2px rgba(255,229,50,.62)!important}.tutorial-target{opacity:.78!important;border-width:2px!important;box-shadow:0 0 0 2px var(--jmt-ink),0 0 9px 2px rgba(48,255,229,.68)!important}.tutorial-target span{bottom:calc(100% + 6px)!important;padding:.22em .52em!important;border-width:2px!important;box-shadow:0 3px var(--jmt-ink)!important;font-size:clamp(.58rem,1.7vw,.82rem)!important}.tutorial-hand{content:url('./tutorial-hand-v2.png');z-index:4!important;max-width:clamp(52px,10vw,78px)!important;filter:drop-shadow(3px 4px 0 rgba(33,17,62,.34))!important;transform-origin:84% 16%!important}
@keyframes jmt-coach-talk{from{transform:translateY(0) rotate(-1deg)}to{transform:translateY(-3px) rotate(1deg)}}@keyframes jmt-coach-dots{from{translate:0 0}to{translate:0 -2px}}@keyframes jmt-coach-ok{from{transform:scale(.96)}to{transform:scale(1)}}@keyframes jmt-coach-wrong{0%,100%{transform:translateX(0)}30%{transform:translateX(-4px)}60%{transform:translateX(4px)}}@keyframes jmt-demo-good{to{filter:brightness(1.09)}}@keyframes jmt-demo-piece{to{transform:translateY(-3px) rotate(1deg)}}
@media (min-width:980px){.jmt-coach-card.side-left,.jmt-coach-card.side-right{grid-template-columns:82px minmax(0,1fr)}.jmt-coach-card.side-left .jmt-coach-npc,.jmt-coach-card.side-right .jmt-coach-npc{width:78px}}
@media (max-width:820px),(orientation:portrait) and (max-width:1024px){.jmt-coach-card{position:fixed!important;left:50vw!important;translate:-50% 0!important;width:calc(100vw - 12px)!important;max-width:620px!important;max-height:min(48dvh,410px)!important;grid-template-columns:60px minmax(0,1fr)!important;gap:8px!important;padding:8px 9px!important;border-width:3px!important;border-radius:17px!important;box-shadow:0 5px 0 var(--jmt-purple),0 8px 0 var(--jmt-ink)}.jmt-coach-card:after{display:none!important}.jmt-coach-npc{width:56px!important;align-self:start}.jmt-coach h3{font-size:clamp(.92rem,3.7vw,1.1rem);line-height:1.03}.jmt-coach p{font-size:clamp(.67rem,2.8vw,.8rem);line-height:1.18}.jmt-coach-demo{grid-template-columns:minmax(104px,138px) minmax(0,1fr);gap:7px;margin-top:7px}.jmt-demo-board{max-width:138px;border-width:2px;box-shadow:0 3px 0 var(--jmt-ink)}.jmt-demo-legend{font-size:.52rem;gap:2px}.jmt-coach-actions{display:grid;grid-template-columns:1fr 1fr;gap:5px;margin-top:7px}.jmt-coach-actions button{min-width:0;min-height:34px;padding:5px 4px;font-size:.6rem;white-space:normal}.jmt-coach.interactive .jmt-coach-card{grid-template-columns:38px minmax(0,1fr)!important;max-height:24dvh!important;gap:6px!important;padding:5px 7px!important}.jmt-coach.interactive .jmt-coach-npc{width:35px!important}.jmt-coach.interactive .jmt-coach-top{margin-bottom:0}.jmt-coach.interactive .jmt-coach-badge{min-height:18px;padding:1px 6px;font-size:.65rem}.jmt-coach.interactive .jmt-coach-progress{font-size:.62rem}.jmt-coach.interactive .jmt-coach-demo{display:none!important}.jmt-coach.interactive .jmt-coach-never{display:none!important}.jmt-coach.interactive h3{margin:0 0 2px;font-size:.82rem}.jmt-coach.interactive p{font-size:.6rem;line-height:1.1}.jmt-coach.interactive .jmt-coach-practice{margin-top:3px;padding:3px 6px;font-size:.61rem}.jmt-coach.interactive .jmt-coach-actions{display:flex;margin-top:3px}.jmt-coach.interactive .jmt-coach-actions button{min-height:27px;padding:3px 8px;font-size:.55rem}}
@media (max-width:390px),(max-height:680px) and (orientation:portrait){.jmt-coach-card{width:calc(100vw - 8px)!important;max-height:46dvh!important;grid-template-columns:48px minmax(0,1fr)!important;padding:6px!important}.jmt-coach-npc{width:44px!important}.jmt-coach h3{font-size:.87rem}.jmt-coach p{font-size:.63rem}.jmt-coach-demo{grid-template-columns:96px minmax(0,1fr)}.jmt-demo-board{max-width:96px}.jmt-coach-actions button{min-height:31px;font-size:.55rem}.tutorial-hand{max-width:50px!important}}
@media (prefers-reduced-motion:reduce){.jmt-coach-npc,.jmt-coach-npc i,.jmt-demo-piece,.jmt-demo-cell,.jmt-coach-practice{animation:none!important}}

/* Tutoriales en vertical: el marco exterior antes sumaba 12px al alto real
   del dispositivo. Eso creaba scroll y podía dejar el aviso fuera de vista.
   El tablero usa ahora sólo el espacio libre y la indicación vive arriba,
   sin esconder la primera fila. */
@media (orientation:portrait) and (max-width:600px){
  html:has(body.jmt-academy-layout),body.jmt-academy-layout{
    height:100dvh!important;
    overflow:hidden!important;
  }
  body.jmt-academy-layout:not(.fight-mode) #app{
    height:100dvh!important;
    min-height:0!important;
    padding:6px!important;
    overflow:hidden!important;
  }
  body.jmt-academy-layout:not(.fight-mode) .shell{
    height:100%!important;
    min-height:0!important;
    overflow:hidden!important;
  }
  body.jmt-academy-layout:not(.fight-mode) .game{
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
    grid-template-rows:48px minmax(0,1fr)!important;
    grid-template-areas:"top bottom" "board board"!important;
    gap:4px!important;
    padding:4px 5px 6px!important;
    align-content:stretch!important;
    min-height:0!important;
  }
  body.jmt-academy-layout:not(.fight-mode) .ticker{display:none!important}
  body.jmt-academy-layout:not(.fight-mode) .card{
    width:auto!important;
    min-width:0!important;
    min-height:48px!important;
    height:48px!important;
    padding:4px 6px!important;
  }
  body.jmt-academy-layout:not(.fight-mode) .board-area{
    align-self:stretch!important;
    align-items:center!important;
    min-height:0!important;
  }
  body.jmt-academy-layout:not(.fight-mode) .tutorial-hud{
    top:-50px!important;
    width:min(96%,440px)!important;
    max-width:calc(100% - 8px)!important;
    gap:6px!important;
    padding:5px 7px!important;
  }
  body.jmt-academy-layout:not(.fight-mode) .tutorial-step{width:29px!important}
  body.jmt-academy-layout:not(.fight-mode) .tutorial-hud b{font-size:clamp(.74rem,3.2vw,.92rem)!important}
  body.jmt-academy-layout:not(.fight-mode) .tutorial-hud p{font-size:clamp(.52rem,2.35vw,.64rem)!important}
}

@media (orientation:landscape) and (max-height:760px){
  html:has(body.jmt-academy-layout),body.jmt-academy-layout{
    height:100dvh!important;
    overflow:hidden!important;
  }
  body.jmt-academy-layout:not(.fight-mode) #app{
    height:100dvh!important;
    min-height:0!important;
    padding:10px!important;
    overflow:hidden!important;
  }
  body.jmt-academy-layout:not(.fight-mode) .shell{
    height:100%!important;
    min-height:0!important;
    overflow:hidden!important;
  }
  body.jmt-academy-layout:not(.fight-mode){--chrome:96px!important}
}

/* En móvil horizontal ancho, el aviso usa el carril del rival. De este modo
   quedan las ocho filas libres para tocar, en vez de tapar las filas 7 y 8. */
@media (orientation:landscape) and (min-width:720px) and (max-height:760px){
  body.jmt-academy-layout:not(.fight-mode) .card-top{visibility:hidden!important}
  body.jmt-academy-layout:not(.fight-mode) .tutorial-hud{
    left:-10px!important;
    top:50%!important;
    translate:-100% -50%!important;
    width:min(240px,27vw)!important;
    max-width:none!important;
    min-height:0!important;
    gap:6px!important;
    padding:7px 9px!important;
  }
  body.jmt-academy-layout:not(.fight-mode) .tutorial-hud b{font-size:clamp(.78rem,1.8vw,.98rem)!important}
  body.jmt-academy-layout:not(.fight-mode) .tutorial-hud p{font-size:clamp(.57rem,1.25vw,.7rem)!important}
}