/* A self-contained pixel adventure inside the existing soft-blue story. */
.student-era {align-items:center;min-height:100svh;padding-top:110px;padding-bottom:96px;pointer-events:auto;}
/* Childhood keeps drifting through the site; it steps back while the player
   needs to read a gate or reach a control. */
body.student-era-in-view #childhood-fall {opacity:.035;transition:opacity .5s ease;}
.student-era-inner {position:relative;width:min(1120px,100%);margin:auto;}
.student-era .kicker {margin-bottom:15px;}
.student-era h2 {margin:0;color:#34566f;font:500 clamp(30px,5vw,60px)/1.15 var(--sans);letter-spacing:-.035em;}
.student-era-subtitle {margin:13px 0 27px;color:#66859a;font:400 clamp(14px,1.7vw,18px)/1.8 var(--sans);}
.student-game {position:relative;height:clamp(410px,63svh,650px);overflow:hidden;isolation:isolate;outline:none;touch-action:pan-y;
  border:1px solid rgba(255,255,255,.83);border-radius:32px;
  background:linear-gradient(180deg,#bde0f8,#ebf5fa 58%,#d9eecb 58%,#b4d4b6);
  box-shadow:0 26px 70px rgba(78,125,158,.2),inset 0 1px 0 #fff;
}
.student-game:focus-visible {outline:3px solid #80b3d8;outline-offset:5px;}
.student-game canvas {display:block;width:100%;height:100%;image-rendering:pixelated;}
.student-game-hud {position:absolute;z-index:3;top:16px;left:18px;right:18px;display:flex;justify-content:space-between;gap:8px;
  color:#486d86;font:600 11px/1.4 var(--display);letter-spacing:.09em;text-shadow:0 1px 1px #fffc;pointer-events:none;}
.student-game-hud span {padding:8px 11px;border:1px solid #fffd;border-radius:99px;background:#f8fdffb3;backdrop-filter:blur(12px);}
.student-game-progress {position:absolute;z-index:3;top:60px;left:20px;right:20px;height:4px;overflow:hidden;border-radius:99px;background:#fff8;pointer-events:none;}
.student-game-progress span {display:block;width:0;height:100%;border-radius:inherit;background:linear-gradient(90deg,#83bded,#f6d98c);transition:width .2s linear;}
.student-game-layer {position:absolute;inset:0;z-index:5;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:24px;text-align:center;}
.student-game-layer[hidden] {display:none;}
.student-game-start {background:linear-gradient(150deg,rgba(217,239,250,.87),rgba(245,251,251,.64) 60%,rgba(255,241,211,.62));backdrop-filter:blur(12px);}
.student-game-eyebrow {font:600 10px/1.5 var(--display);letter-spacing:.18em;color:#6388a5;}
.student-game-start h3 {margin:20px 0 12px;color:#416a8a;font:600 clamp(27px,4vw,49px)/1.38 var(--sans);letter-spacing:.015em;}
.student-game-start p {max-width:390px;margin:0 0 25px;color:#587789;font:400 15px/1.7 var(--sans);}
.student-game-layer button {min-height:48px;padding:11px 23px;border:1px solid #fffe;border-radius:999px;background:linear-gradient(150deg,#8fbeeb,#b4d9ed);
  box-shadow:0 11px 26px #679ac44d,inset 0 1px 0 #fffb;color:#1f506e;cursor:pointer;font:600 14px/1.5 var(--sans);
  transition:transform .24s ease,box-shadow .24s ease;}
.student-game-layer button:hover {transform:translateY(-2px);box-shadow:0 16px 32px #679ac466,inset 0 1px 0 #fffb;}
.student-game-layer button:focus-visible,.student-game-controls button:focus-visible {outline:3px solid #407aa3;outline-offset:3px;}
.student-game-layer button span {margin-left:14px;}
.student-game-start small {margin-top:15px;color:#6a8da0;font:400 11px var(--display);}
.student-achievement {justify-content:flex-start;padding:10px 18px 8px;background:rgba(24,45,67,.69);overflow:hidden;}
.student-projection-beam {position:absolute;inset:0;z-index:0;pointer-events:none;
  background:linear-gradient(180deg,rgba(252,248,219,.03) 0%,rgba(245,245,214,.24) 43%,rgba(255,247,199,.68) 88%,rgba(255,234,170,.88) 100%);
  clip-path:polygon(2% 5%,98% 5%,53% 100%,47% 100%);filter:blur(2px);mix-blend-mode:screen;}
.student-achievement:not([hidden]) .student-projection-beam {animation:student-beam-on .9s ease-out both;}
@keyframes student-beam-on {from{opacity:0;clip-path:polygon(49% 100%,51% 100%,51% 100%,49% 100%)}to{opacity:1;clip-path:polygon(2% 5%,98% 5%,53% 100%,47% 100%)}}
.student-projector {position:absolute;z-index:1;left:50%;bottom:11px;width:94px;height:21px;transform:translateX(-50%);
  border:2px solid #fff2d5;border-radius:50%;background:radial-gradient(ellipse,#fffbed 1%,#f4d99b 38%,#617c87 72%);
  box-shadow:0 0 18px 7px #fff1bf99,0 8px 18px #0c2d4c66;}
.student-projector span {position:absolute;left:50%;bottom:9px;width:22px;height:15px;transform:translateX(-50%);border-radius:50%;background:#fff8d5;filter:blur(3px);}
.student-achievement-content {position:relative;z-index:2;width:min(760px,100%);height:100%;max-height:100%;overflow:auto;scrollbar-width:none;
  display:flex;flex-direction:column;align-items:center;justify-content:flex-start;padding:10px 10px 30px;}
.student-achievement-content::-webkit-scrollbar {display:none;}
.student-achievement:not([hidden]) .student-achievement-content {animation:student-achievement-arrive .8s .16s cubic-bezier(.19,.78,.23,1) both;}
@keyframes student-achievement-arrive {from{opacity:0;transform:translateY(30px) scale(.95);filter:brightness(1.6);}to{opacity:1;transform:none;filter:none;}}
.student-achievement-heading {width:min(610px,100%);display:flex;align-items:center;justify-content:space-between;gap:10px;color:#fff1c8;font:600 10px var(--display);letter-spacing:.1em;text-shadow:0 1px 9px #304b6d;}
.student-achievement .student-game-eyebrow {color:#fff1c8;}
.student-achievement h3 {margin:5px 0 1px;color:#ffe8a8;text-shadow:0 2px 12px #3e4e62;font:600 clamp(22px,4vw,32px)/1.35 var(--sans);}
.student-achievement #student-school-name {margin:0 0 6px;color:#f4f8f3;font:500 13px/1.5 var(--sans);letter-spacing:.08em;}
.student-achievement-art {position:relative;display:flex;flex:0 0 auto;align-items:center;justify-content:center;width:min(640px,85%);height:min(30svh,230px);min-height:142px;margin:0 auto 7px;}
#student-real-photo {display:block;max-width:100%;max-height:100%;width:auto;height:auto;object-fit:contain;border:3px solid #fff8e7;
  box-shadow:0 0 0 1px #ffe3a9,0 0 24px 7px #fff3d0b3,0 20px 52px #132f4f99;}
#student-stage-portrait {display:none;position:absolute;right:-22px;bottom:-10px;width:69px;height:92px;
  background-size:400% 200%;background-position:0 0;background-repeat:no-repeat;image-rendering:pixelated;filter:drop-shadow(0 5px 8px #102c4399);}
#student-achievement-line {margin:3px 0 9px;color:#fff8e8;text-shadow:0 2px 8px #263d5b;font:400 13px/1.5 var(--sans);}
.student-achievement-content button {min-height:39px;padding:7px 20px;background:#fff7dfdd;color:#395872;box-shadow:0 5px 19px #1b334966;}
.student-door-prompt {justify-content:flex-end;padding-bottom:38px;background:linear-gradient(to top,rgba(222,241,250,.92),rgba(230,245,251,.1) 55%,transparent 78%);}
.student-door-prompt h3 {margin:10px 0 13px;color:#3f6784;text-shadow:0 1px 8px #fffd;font:500 clamp(24px,4vw,40px)/1.4 var(--sans);}
.student-finale {overflow:auto;overscroll-behavior:contain;background:radial-gradient(circle at 50% 45%,#fff8dfed,#d1e9f3eb 60%,#a8d1e9ed);backdrop-filter:blur(10px);}
.student-future-portrait {display:block;width:clamp(83px,13svh,123px);height:clamp(112px,18svh,164px);margin:7px auto 0;
  background:url('student-era/characters/stage-4.png') 0 0/400% 200% no-repeat;image-rendering:pixelated;filter:drop-shadow(0 10px 18px #719fc766);}
.student-finale h3 {margin:8px 0 12px;color:#8d7848;font:600 clamp(29px,5vw,52px)/1.4 var(--sans);letter-spacing:.045em;text-shadow:0 1px 0 #fff,2px 3px 0 #dce9e5;
  animation:student-finale-title .7s steps(9,end) both;}
@keyframes student-finale-title {from{opacity:0;clip-path:inset(0 100% 0 0);}to{opacity:1;clip-path:inset(0 0 0 0);}}
.student-finale p {margin:0 0 25px;color:#58738a;font:400 15px/1.9 var(--sans);}
.student-finale-actions {display:flex;justify-content:center;flex-wrap:wrap;gap:10px;}
.student-finale-actions button:last-child {background:rgba(255,255,255,.76);}
.student-game-controls {display:flex;justify-content:center;align-items:center;flex-wrap:wrap;gap:9px;margin:18px 0 0;}
.student-game-controls button {min-height:48px;border:1px solid rgba(255,255,255,.88);border-radius:99px;cursor:pointer;
  color:#4c7189;background:rgba(250,254,255,.63);backdrop-filter:blur(16px);box-shadow:0 8px 23px rgba(91,137,167,.11);}
.student-game-controls .student-forward {min-width:165px;min-height:64px;padding:13px 24px;background:linear-gradient(135deg,#9dc9ed,#d2e8f2);
  color:#2e5d79;font:600 17px var(--sans);touch-action:none;user-select:none;-webkit-user-select:none;box-shadow:0 11px 30px #83b2d054;}
.student-forward span {margin-left:15px;font-size:21px;}
.student-forward.is-held {transform:translateY(2px) scale(.98);box-shadow:inset 0 4px 12px #709dbc55;}
.student-game-secondary {padding:10px 15px;font:500 12px var(--sans);}
.student-game-status {min-height:22px;margin:12px 2px 0;color:#648298;text-align:center;font:400 12px/1.6 var(--sans);}
.student-era-inner:fullscreen {box-sizing:border-box;width:100%;height:100dvh;max-width:none;padding:calc(16px + env(safe-area-inset-top)) 18px calc(12px + env(safe-area-inset-bottom));
  display:flex;flex-direction:column;overflow:auto;background:linear-gradient(145deg,#d7ebf7,#f0f8fa);}
.student-era-inner:fullscreen .kicker {margin-bottom:7px;}
.student-era-inner:fullscreen h2 {font-size:clamp(22px,4vh,36px);}
.student-era-inner:fullscreen .student-era-subtitle {margin:2px 0 8px;font-size:12px;}
.student-era-inner:fullscreen .student-game {flex:1;min-height:270px;height:auto;}
.student-era-inner:fullscreen .student-game-controls {margin-top:9px;}
.student-era-inner:fullscreen .student-game-status {margin-top:5px;}
@media(orientation:landscape) and (max-height:520px) {
  .student-era-inner:fullscreen .student-era-subtitle {display:none;}
  .student-era-inner:fullscreen .student-game {min-height:220px;}
  .student-era-inner:fullscreen .student-game-controls {display:flex;flex-wrap:nowrap;}
  .student-era-inner:fullscreen .student-game-controls .student-forward {grid-column:auto;min-height:50px;width:auto;}
}
@media(max-width:767px) {
  .student-era {padding:88px 14px 70px;}
  .student-era .kicker {font-size:9px;}
  .student-era h2 {font-size:clamp(30px,8vw,40px);}
  .student-era-subtitle {font-size:13px;margin-bottom:19px;}
  .student-game {height:min(62svh,540px);min-height:390px;border-radius:25px;}
  .student-game-hud {top:11px;left:10px;right:10px;font-size:9px;}
  .student-game-hud span {padding:6px 8px;}
  .student-game-progress {top:47px;left:11px;right:11px;}
  .student-game-layer {padding:15px;}
  .student-game-start h3 {font-size:28px;}
  .student-game-start p {font-size:13px;}
  .student-achievement-content {padding:4px 2px 25px;}
  .student-achievement-art {width:88%;height:min(27svh,170px);min-height:125px;}
  #student-stage-portrait {right:-12px;width:54px;height:72px;}
  .student-game-controls {display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px;}
  .student-game-controls .student-forward {grid-column:1/-1;min-height:70px;width:100%;}
  .student-game-secondary {padding:9px 4px;font-size:11px;}
}
@media(prefers-reduced-motion:reduce) {
  .student-game-layer button,.student-game-progress span,body.student-era-in-view #childhood-fall {transition:none;}
  .student-achievement:not([hidden]) .student-achievement-content,.student-achievement:not([hidden]) .student-projection-beam {animation:none;}
  .student-finale h3 {animation:none;}
}