/* 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);
  line-height:1;
}
#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}
@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: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;
  }
}
@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;
  }
}