.al-school-sheet {
  position: fixed; inset: 0; z-index: 9000;
  background: linear-gradient(180deg, #CDF3E1, #A6E5C8);
  opacity: 0;
  visibility: hidden;                      
  transition: opacity .35s cubic-bezier(0.65,0,0.35,1), visibility 0s linear .35s;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
  user-select: none; -webkit-user-select: none;
}
.al-school-sheet.is-open {
  opacity: 1; visibility: visible;
  transition: opacity .35s cubic-bezier(0.65,0,0.35,1), visibility 0s;
}
.al-school-frame {
  position: absolute; left: 50%; top: 50%;
  width: 1194px; height: 834px;
  transform: translate(-50%,-50%) scale(var(--app-scale,1));
  transform-origin: center center;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 26px;
}
.al-school-scene { display: flex; align-items: center; justify-content: center; gap: 34px; }
.al-school-tablet { width: 330px; height: 250px; display: block; }
.al-school-arrow  { width: 120px; height: 84px; display: block;
                    animation: al-school-nudge 1.6s cubic-bezier(0.65,0,0.35,1) infinite; }
@keyframes al-school-nudge { 0%,100% { transform: translateX(0); } 50% { transform: translateX(18px); } }
.al-school-mark   { width: 360px; height: auto; display: block; }
.al-school-mark svg { width: 100%; height: auto; display: block; }
.al-school-tile-ring { animation: al-school-ring 1.6s cubic-bezier(0.65,0,0.35,1) infinite; transform-origin: 50% 50%; }
@keyframes al-school-ring { 0%,100% { opacity: .55; } 50% { opacity: 1; } }
.al-school-sheet.is-busy .al-school-tablet,
.al-school-sheet.is-busy .al-school-arrow { opacity: .22; animation: none; }
.al-school-sheet.is-busy .al-school-mark  { animation: al-school-breathe 1.2s ease-in-out infinite; }
@keyframes al-school-breathe { 0%,100% { transform: scale(1); } 50% { transform: scale(1.04); } }
.al-school-sheet.is-shake .al-school-scene { animation: al-school-shake .5s cubic-bezier(0.65,0,0.35,1); }
@keyframes al-school-shake { 0%,100% { transform: translateX(0); } 20%,60% { transform: translateX(-14px); } 40%,80% { transform: translateX(14px); } }
.al-school-go { cursor: pointer; border-radius: 40px; padding: 18px 30px; transition: transform .16s cubic-bezier(.34,1.8,.5,1); }
.al-school-go:active { transform: scale(.97); }
.al-school-key {
  position: absolute; left: 22px; bottom: 22px; width: 64px; height: 64px;
  border: 0; padding: 12px; border-radius: 50%; cursor: pointer;
  background: rgba(255,255,255,.55);
  -webkit-tap-highlight-color: transparent;
}
.al-school-key svg { width: 100%; height: 100%; display: block; }
.al-school-key:active { transform: scale(.94); }
.al-school-head { width: 300px; }
.al-school-head svg { width: 100%; height: auto; display: block; }
.al-school-cards {
  display: flex; gap: 26px; padding: 14px 44px; max-width: 100%;
  overflow-x: auto; overflow-y: hidden; -webkit-overflow-scrolling: touch;
}
.al-school-card {
  position: relative; flex: 0 0 auto; width: 260px; height: 224px; overflow: hidden;
  border: 0; padding: 0; border-radius: 24px; cursor: pointer;
  background: #fff;
  box-shadow: 0 8px 22px rgba(90,50,10,.22);
  transition: transform .16s cubic-bezier(0.65,0,0.35,1);
  -webkit-tap-highlight-color: transparent;
}
.al-school-card:active { transform: scale(.97); }
.al-school-card.is-next { animation: al-school-next 1.8s cubic-bezier(.65,0,.35,1) infinite; }
@keyframes al-school-next { 0%,100% { box-shadow: 0 8px 22px rgba(90,50,10,.22), 0 0 0 0 rgba(235,181,64,0); }
                            50%     { box-shadow: 0 8px 22px rgba(90,50,10,.22), 0 0 0 9px rgba(235,181,64,.75); } }
.al-school-surf { position: absolute; inset: 0; background-size: cover; background-position: center; pointer-events: none; }
.al-school-card[data-look="animals"]   .al-school-surf { background: linear-gradient(#BFE6F5 0%, #BFE6F5 46%, #CFEAB8 46%, #BFE2A4 100%); }
.al-school-card[data-look="landmarks"] .al-school-surf { background: linear-gradient(#9FD4F0, #DDF1FB); }
.al-school-card[data-look="household"] .al-school-surf { background-image: url(../assets/images/household/word-cards/backgrounds/kitchen.webp); }
.al-school-card[data-look="town"]      .al-school-surf { background-image: linear-gradient(rgba(255,255,255,.5), rgba(255,255,255,.5)), url(../town-options/town-base-clean_web_v3.webp); }
.al-school-card[data-look="market"]    .al-school-surf { background-image: url(../assets/images/market/card-bg/fruit.webp); }
.al-school-card[data-look="months"]    .al-school-surf,
.al-school-card[data-look="days"]      .al-school-surf { background: linear-gradient(#CFEBDD, #E4F4EC); }
.al-school-card[data-look="numbers"]   .al-school-surf { background-image: url(../games/numbers/art/meadow.webp); }
.al-school-card[data-look="colors"]    .al-school-surf { background: radial-gradient(circle, #F6C9DC 0 22%, transparent 23%) 0 0 / 34px 34px, radial-gradient(circle, #BFE3F2 0 22%, transparent 23%) 17px 17px / 34px 34px, #FFF6E4; }
.al-school-card[data-look="mixed"]     .al-school-surf { background: linear-gradient(135deg, #FFE9B8, #FFD3C2 50%, #CFE8F7); }
.al-school-pics {
  position: absolute; left: 0; right: 0; top: 4%; height: 66%;
  display: flex; justify-content: center; align-items: center;
  pointer-events: none;
}
.al-school-pic {
  --s: 96px; width: var(--s); height: var(--s); margin: 0 calc(var(--s) * -.14); flex: none; display: block; position: relative;
  object-fit: contain; filter: drop-shadow(0 2px 1.5px rgba(0,0,0,.3));
}
.al-school-page {
  background: #fff; border-radius: 12%; overflow: hidden; display: flex; flex-direction: column; filter: none;
  box-shadow: 0 0 0 calc(var(--s) * .012) rgba(90,50,10,.25), 0 3px 5px rgba(0,0,0,.28);
}
.al-school-page .band { flex: 0 0 40%; background: #D8413A; color: #fff; display: grid; place-items: center;
                        font: 700 calc(var(--s) * .27)/1 var(--font-read); letter-spacing: .01em; }
.al-school-page.is-day .band { background: #2F7FD0; }
.al-school-page .grid { flex: 1; display: grid; grid-template-columns: repeat(7, 1fr); gap: 6%; padding: 8% 8% 9%; }
.al-school-page .grid i { border-radius: 24%; background: #EDE3D0; }
.al-school-num {
  width: calc(var(--s) * .7); margin: 0 calc(var(--s) * .03);
  color: #fff; font: 700 calc(var(--s) * .95)/1 var(--font-read); display: grid; place-items: center;
  -webkit-text-stroke: calc(var(--s) * .1) #5A3A1C; paint-order: stroke fill;
  filter: drop-shadow(0 calc(var(--s) * .04) 0 rgba(60,35,10,.45));
}
.al-school-blob {
  border-radius: 58% 42% 55% 45% / 48% 60% 40% 52%; background: var(--c); filter: none;
  box-shadow: 0 4px 9px rgba(0,0,0,.28), inset calc(var(--s) * .08) calc(var(--s) * .08) 0 rgba(255,255,255,.28), inset 0 0 0 2px rgba(0,0,0,.10);
}
.al-school-foot {
  position: absolute; left: 5%; right: 5%; bottom: 5%; height: 21%; border-radius: 99px; background: rgba(255,255,255,.94);
  display: flex; align-items: center; gap: 6%; padding: 0 6%; box-shadow: 0 2px 6px rgba(0,0,0,.14); pointer-events: none;
}
.al-school-flag { width: 40px; height: 28px; flex: none; object-fit: cover; border-radius: 6px; box-shadow: 0 2px 6px rgba(0,0,0,.25); }
.al-school-bar { flex: 1; position: relative; height: 100%; min-width: 0; }
.al-school-bar .al-prog { position: absolute; right: 0; top: 50%; transform: translateY(-50%) scale(.27); transform-origin: right center; }
.al-school-bar .al-prog-num { color: #5A3A1C; text-shadow: none; }
.al-school-bar .al-prog-glow, .al-school-bar .al-prog-beam { display: none; }
.al-school-bar .al-prog-spin { display: none; }
.al-school-bar .al-prog-ring { background: #FFC53D; }
.al-school-bar .al-prog-bar { z-index: 1; }
.al-school-bar .al-prog { transform: translateY(-50%) scale(.21); }
.al-school-stamp { position: absolute; right: 6%; top: 6%; width: 24%; aspect-ratio: 1; border-radius: 50%; background: #EBB540;
                   display: none; box-shadow: 0 3px 8px rgba(0,0,0,.3); pointer-events: none; }
.al-school-stamp svg { width: 100%; height: 100%; display: block; }
.al-school-stamp path { fill: none; stroke: #fff; stroke-width: 6; stroke-linecap: round; stroke-linejoin: round; }
.al-school-card.is-done .al-school-stamp { display: block; }
.al-school-ring { position: absolute; right: 14px; bottom: 12px; width: 52px; height: 52px; pointer-events: none; }
.al-school-ring .bg { fill: none; stroke: #EAD9B8; stroke-width: 6; }
.al-school-ring .fg { fill: none; stroke: #3DA6D4; stroke-width: 6; stroke-linecap: round;
                      transform: rotate(-90deg); transform-origin: 50% 50%;
                      transition: stroke-dashoffset .6s cubic-bezier(0.65,0,0.35,1); }
.al-school-card.is-done .al-school-ring .fg { stroke: #EBB540; }
.al-school-ring .check { fill: none; stroke: #EBB540; stroke-width: 6; stroke-linecap: round; stroke-linejoin: round; opacity: 0; }
.al-school-card.is-done .al-school-ring .check { opacity: 1; }
.al-school-card.is-late .al-school-ring .fg { stroke: #E8784A; }
.al-school-empty { width: 150px; height: 180px; display: block; }
.al-school-empty svg { width: 100%; height: 100%; display: block; }
.al-school-btn {
  position: absolute; left: 7.5%; top: 50%; transform: translate(-50%, -50%); width: 74px; height: 74px; z-index: 70;
  border: 0; padding: 0; border-radius: 20px; background: transparent; cursor: pointer;
  display: none;
  -webkit-tap-highlight-color: transparent;
}
.al-school-btn.is-on { display: block; }
body.al-show .al-school-btn { display: none; }
.al-school-btn, .al-school-btn.is-on { display: none !important; }   
.al-school-btn svg { width: 100%; height: 100%; display: block; filter: drop-shadow(0 4px 8px rgba(0,0,0,.25)); }
.al-school-btn:active { transform: translate(-50%, -50%) scale(.94); }
body.al-tab-instant #explore-stage,
body.al-tab-instant [id^="mode-"],
body.al-tab-instant .mode-overlay,
body.al-tab-instant .mode-svg { transition: none !important; }