/* Alphabet Trail trial overlay — intentionally scoped to one game. */
#s-abc-game[data-game="alphabet-trail"]{
  --je-ex-ink:#24376c;
  --je-ex-muted:#6b5d80;
  --je-ex-purple:#7654c7;
  --je-ex-yellow:#ffd34e;
  --je-ex-green:#2d8f42;
  --je-ex-danger:#c4452d;
  --je-ex-line:#ead9b8;
}
#s-abc-game[data-game="alphabet-trail"] #abcGameAudio,
#s-abc-game[data-game="alphabet-trail"] #abcMascotAudio{display:none!important}
#s-abc-game[data-game="alphabet-trail"] .abc-game-heading{border-color:var(--je-ex-yellow);background:#fffdf7}
#s-abc-game[data-game="alphabet-trail"] .abc-game-heading>button,
#s-abc-game[data-game="alphabet-trail"] .abc-hud-btn,
#s-abc-game[data-game="alphabet-trail"] .abc-scene-hint{
  min-width:48px;
  min-height:48px;
}
#s-abc-game[data-game="alphabet-trail"] .abc-game-heading>button:focus-visible,
#s-abc-game[data-game="alphabet-trail"] .abc-hud-btn:focus-visible,
#s-abc-game[data-game="alphabet-trail"] .abc-scene-hint:focus-visible,
#s-abc-game[data-game="alphabet-trail"] .je-answer-card:focus-visible{
  outline:4px solid #1f6fb2;
  outline-offset:3px;
}
#s-abc-game[data-game="alphabet-trail"] .je-answer-grid{
  width:min(100%,820px);
  margin-inline:auto;
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:clamp(8px,1.5vw,16px);
}
#s-abc-game[data-game="alphabet-trail"] .abc-trail-choices .je-answer-card{
  position:relative;
  width:100%;
  min-width:48px;
  height:clamp(76px,8vw,110px);
  min-height:76px;
  padding:8px;
  display:grid;
  grid-template-rows:1fr auto;
  place-items:center;
  overflow:visible;
  border:4px solid #fff;
  border-radius:22px;
  background:#fffdf7;
  color:var(--je-ex-ink);
  box-shadow:0 7px 0 #664bc0;
  font-family:var(--font-d);
  cursor:pointer;
}
#s-abc-game[data-game="alphabet-trail"] .je-answer-card__art{
  position:absolute;
  z-index:0;
  inset:50% auto auto 50%;
  width:116%;
  height:116%;
  transform:translate(-50%,-50%);
  object-fit:contain;
  filter:drop-shadow(0 7px 4px rgba(67,49,17,.2));
  pointer-events:none;
}
#s-abc-game[data-game="alphabet-trail"] .je-answer-card strong,
#s-abc-game[data-game="alphabet-trail"] .je-answer-card span{
  position:relative;
  z-index:1;
}
#s-abc-game[data-game="alphabet-trail"] .je-answer-card strong{
  align-self:end;
  font-size:clamp(2.2rem,5vw,4rem);
  font-weight:900;
  line-height:1;
  -webkit-text-stroke:.35px currentColor;
}
#s-abc-game[data-game="alphabet-trail"] .je-answer-card span{
  align-self:end;
  padding:2px 7px;
  border-radius:999px;
  background:rgba(255,255,255,.94);
  color:var(--je-ex-muted);
  font:900 clamp(.68rem,1.4vw,.9rem)/1.2 var(--font-b);
  white-space:nowrap;
}
#s-abc-game[data-game="alphabet-trail"] .je-answer-card[data-state="selected"]{border-color:var(--je-ex-ink);background:var(--je-ex-yellow)}
#s-abc-game[data-game="alphabet-trail"] .je-answer-card[data-state="correct"]{border-color:var(--je-ex-green);background:#e8f8de;box-shadow:0 7px 0 #1f6f34}
#s-abc-game[data-game="alphabet-trail"] .je-answer-card[data-state="incorrect"]{border-color:var(--je-ex-danger);background:#fff0ec;box-shadow:0 7px 0 #8f2e1d}
#s-abc-game[data-game="alphabet-trail"] .je-answer-card[data-state="hinted"]{outline:7px solid var(--je-ex-yellow);outline-offset:2px}
#s-abc-game[data-game="alphabet-trail"] .je-answer-card[data-state="disabled"]{opacity:.48;box-shadow:none}
#s-abc-game[data-game="alphabet-trail"] .abc-trail-stone span{
  font-weight:900;
  -webkit-text-stroke:.35px currentColor;
}
@media(max-width:760px){
  #s-abc-game[data-game="alphabet-trail"] .abc-hud-btn,
  #s-abc-game[data-game="alphabet-trail"] .abc-hud-btn.back,
  #s-abc-game[data-game="alphabet-trail"] .abc-game-heading>button{width:48px;height:48px}
  #s-abc-game[data-game="alphabet-trail"] .abc-game-heading{grid-template-columns:48px minmax(0,1fr)}
  #s-abc-game[data-game="alphabet-trail"] .abc-scene-hint{width:auto;height:48px;min-width:96px;min-height:48px}
  #s-abc-game[data-game="alphabet-trail"] .je-answer-grid{gap:8px}
  #s-abc-game[data-game="alphabet-trail"] .abc-trail-choices .je-answer-card{height:72px;min-height:72px;padding:4px}
  #s-abc-game[data-game="alphabet-trail"] .je-answer-card strong{font-size:clamp(1.7rem,8vw,2.4rem)}
  #s-abc-game[data-game="alphabet-trail"] .je-answer-card span{font-size:.62rem;padding:2px 4px}
}
@media(min-width:1025px){
  #s-abc-game[data-game="alphabet-trail"] .abc-trail-mascot{
    width:clamp(150px,15vw,230px);
    height:82%;
  }
  #s-abc-game[data-game="alphabet-trail"] .abc-trail-mascot img{
    width:100%;
    height:100%;
    object-fit:contain;
    object-position:left bottom;
  }
  #s-abc-game[data-game="alphabet-trail"] .abc-trail-mascot em{
    left:72%;
    top:7%;
    width:180px;
  }
}
@media(min-width:761px) and (max-width:1024px) and (orientation:portrait){
  #s-abc-game[data-game="alphabet-trail"] .abc-trail-path{
    align-items:center;
    padding-left:18%;
  }
  #s-abc-game[data-game="alphabet-trail"] .abc-trail-path::before{top:52%}
  #s-abc-game[data-game="alphabet-trail"] .abc-trail-mascot{
    bottom:2%;
    width:170px;
    aspect-ratio:235/420;
    background:url('../assets/img/abc-games/alphabet-trail/tiger-guide.png') bottom center/contain no-repeat;
  }
  #s-abc-game[data-game="alphabet-trail"] .abc-trail-mascot img{
    width:100%;
    height:100%;
    object-fit:contain;
  }
  #s-abc-game[data-game="alphabet-trail"] .abc-trail-mascot em{
    top:-78px;
    width:170px;
  }
  #s-abc-game[data-game="alphabet-trail"] .abc-trail-board>.abc-scene-hint{
    top:18px;
    right:18px;
    bottom:auto;
  }
}
/* Mobile quick win: keep the complete learning task inside one stable viewport. */
@media(max-width:760px){
  html body #s-abc-game.screen.active[data-game="alphabet-trail"]{
    height:100dvh!important;
    min-height:0!important;
    max-height:100dvh!important;
    overflow:hidden!important;
    animation:none!important;
  }
  #s-abc-game[data-game="alphabet-trail"] .abc-game-shell{
    height:calc(100dvh - 18px);
    min-height:0;
    grid-template-rows:auto auto minmax(0,1fr);
    overflow:hidden;
  }
  #s-abc-game[data-game="alphabet-trail"] .abc-game-stage{
    min-height:0;
    overflow:hidden;
    padding-bottom:2px;
  }
  #s-abc-game[data-game="alphabet-trail"] .abc-trail-board{
    width:calc(100% - 6px);
    height:100%;
    min-height:0;
    max-height:none;
    grid-template-rows:minmax(0,1fr) auto;
    gap:8px;
    padding:10px;
  }
  #s-abc-game[data-game="alphabet-trail"] .abc-mascot-strip{display:none}
  #s-abc-game[data-game="alphabet-trail"] .abc-trail-mascot{
    display:block;
    left:2px;
    bottom:-4px;
    width:72px;
    opacity:.96;
  }
  #s-abc-game[data-game="alphabet-trail"] .abc-trail-mascot em{display:none}
  #s-abc-game[data-game="alphabet-trail"] .abc-trail-stone.missing span{
    font-size:clamp(2.5rem,11vw,3.25rem);
    line-height:1;
    font-weight:800;
    color:#67471f;
    text-shadow:0 2px 0 rgba(255,255,255,.8);
  }
  #s-abc-game[data-game="alphabet-trail"] .abc-trail-choices .je-answer-card{
    height:84px;
    min-height:84px;
  }
  #s-abc-game[data-game="alphabet-trail"] .je-answer-card span{
    padding:2px 6px;
    color:#3d3153;
    font-size:1.125rem;
    line-height:1;
  }
}
@media(prefers-reduced-motion:reduce){
  #s-abc-game[data-game="alphabet-trail"] *,
  #s-abc-game[data-game="alphabet-trail"] *::before,
  #s-abc-game[data-game="alphabet-trail"] *::after{
    animation-duration:.01ms!important;
    animation-iteration-count:1!important;
    transition-duration:.01ms!important;
  }
}