:root {
  --emg-bg: #0E1B42;
  --emg-surface: #16285C;
  --emg-card: #1A3058;
  --emg-card-raised: #1F3A66;
  --emg-border: rgba(120, 214, 200, .15);
  --emg-border-strong: rgba(120, 214, 200, .28);
  --emg-text: #F5F9FC;
  --emg-muted: #A8B6C9;
  --emg-accent: #F7BE28;
  --emg-accent-dark: #D9A31A;
  --emg-accent-2: #78D6C8;
  --emg-success: #35d18a;
  --emg-danger: #ff5f6d;
  --emg-warn: #fbbf54;
  --emg-radius: 24px;
  --emg-shadow: 0 24px 70px rgba(0, 0, 0, .32);
  --emg-font: "Poppins", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --emg-font-heading: "Fredoka", "Poppins", system-ui, sans-serif;
  --emg-navy: #16285C;
  --emg-dark: #0E1B42;
  --emg-teal: #128A80;
  --emg-light-teal: #78D6C8;
}
* { box-sizing: border-box; }
[hidden] { display: none !important; }
html { scroll-behavior: smooth; }
html, body {
  margin: 0; padding: 0; min-height: 100%; background-color: var(--emg-bg);
  background-image: radial-gradient(1000px 680px at 8% -15%, rgba(18, 138, 128, .27), transparent 66%), radial-gradient(850px 580px at 100% 5%, rgba(247, 190, 40, .12), transparent 65%);
  color: var(--emg-text); font-family: var(--emg-font); -webkit-font-smoothing: antialiased;
}
html, body.emg-play-page { min-height: 100%; height: 100%; }
body.emg-hub-page, body.emg-play-page { width: 100%; }
body::before { content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none; opacity: .12; background-image: radial-gradient(rgba(255,255,255,.6) .65px, transparent .65px); background-size: 28px 28px; }
a { color: var(--emg-accent-2); text-decoration: none; }
a:hover { text-decoration: underline; }
button, a { -webkit-tap-highlight-color: transparent; }
button:focus-visible, a:focus-visible { outline: 3px solid var(--emg-gold, var(--emg-accent)); outline-offset: 4px; }
.emg-shell {
  position: relative;
  max-width: none;
  width: 100%;
  box-sizing: border-box;
  margin: 0 auto;
  padding: 24px clamp(16px, 4vw, 56px) 48px;
}
.emg-top { display: flex; align-items: center; justify-content: space-between; gap: 20px; flex-wrap: wrap; margin-bottom: 38px; position: relative; z-index: 30; }
.emg-brand { display: flex; align-items: center; gap: 13px; }
.emg-brand h1 { margin: 0; font-size: 1.25rem; letter-spacing: -.035em; font-weight: 780; }
.emg-brand p { margin: 4px 0 0; color: var(--emg-muted); font-size: .82rem; }
.emg-brand-link { color: inherit; text-decoration: none !important; }
.emg-nav { display: flex; gap: 9px; flex-wrap: wrap; }
.emg-btn { min-height: 46px; display: inline-flex; align-items: center; justify-content: center; gap: 9px; border: 1px solid var(--emg-border); background: rgba(22,40,92, .8); color: var(--emg-text); padding: 11px 19px; border-radius: 13px; font: inherit; font-size: .9rem; font-weight: 700; cursor: pointer; transition: transform .18s ease, background .18s ease, border-color .18s ease, box-shadow .18s ease; text-decoration: none !important; }
.emg-btn:hover { transform: translateY(-2px); border-color: rgba(247,190,40,.55); background: #1F3A5C; box-shadow: 0 7px 18px rgba(0,0,0,.16); }
.emg-btn:active { transform: translateY(0); }
.emg-btn-primary { background: linear-gradient(135deg, var(--emg-accent), var(--emg-accent-dark)); border-color: rgba(255,225,127,.25); color: #fff; box-shadow: 0 8px 22px rgba(247,190,40,.22), inset 0 1px 0 rgba(255,255,255,.18); }
.emg-btn-primary:hover { background: linear-gradient(135deg, #FFD24A, #E0B020); box-shadow: 0 10px 28px rgba(247,190,40,.33); }
.emg-btn-ghost { background: transparent; }
.emg-btn-block { width: 100%; }
.emg-icon-btn span:first-child { font-size: 1.12rem; }
.emg-hero { position: relative; overflow: hidden; display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(260px, .65fr); align-items: center; background: linear-gradient(125deg, rgba(18,138,128,.32), rgba(22,40,92,.9) 70%); border: 1px solid rgba(120,214,200,.22); border-radius: 30px; padding: 48px 48px 44px; margin-bottom: 54px; box-shadow: var(--emg-shadow); }
.emg-hero::after { content: ""; position: absolute; width: 350px; height: 350px; border-radius: 50%; right: -120px; top: -170px; background: rgba(247,190,40,.1); filter: blur(10px); pointer-events: none; }
.emg-hero-content { position: relative; z-index: 1; }
.emg-hero h2 { margin: 3px 0 20px; font-size: clamp(2.1rem, 4.5vw, 3.5rem); line-height: 1.09; letter-spacing: -.055em; }
.emg-hero h2 span { color: #FFE9A0; }
.emg-hero p { margin: 0; color: #C5D0DE; max-width: 55ch; line-height: 1.75; font-size: 1rem; }
.emg-badge { display: inline-flex; align-items: center; gap: 8px; margin-bottom: 16px; padding: 7px 12px; border-radius: 999px; background: rgba(247,190,40,.1); border: 1px solid rgba(247,190,40,.13); color: #FFE9A0; font-size: .71rem; font-weight: 750; letter-spacing: .055em; text-transform: uppercase; }
.emg-live-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--emg-success); box-shadow: 0 0 0 4px rgba(53,209,138,.1); }
.emg-hero-actions { display: flex; flex-wrap: wrap; gap: 11px; margin-top: 28px; }
.emg-hero-art { min-height: 260px; display: grid; place-items: center; position: relative; z-index: 1; }
.emg-art-main { width: 190px; height: 196px; border: 1px solid rgba(255,225,127,.24); border-radius: 35px; display: flex; align-items: center; justify-content: center; flex-direction: column; transform: rotate(6deg); background: linear-gradient(145deg, rgba(247,190,40,.47), rgba(22,40,92,.92)); box-shadow: 0 30px 60px rgba(0,0,0,.3), inset 0 1px 0 rgba(255,255,255,.18); }
.emg-art-main > span { font-size: 3.2rem; margin-bottom: 13px; }
.emg-art-main strong { font-size: 1.55rem; letter-spacing: -.04em; }
.emg-art-main small { color: #E8D9A8; margin-top: 8px; font-size: .76rem; }
.emg-art-orbit { position: absolute; display: grid; place-items: center; width: 52px; height: 52px; border-radius: 17px; font-size: 1.4rem; font-weight: 800; border: 1px solid var(--emg-border-strong); box-shadow: 0 15px 25px rgba(0,0,0,.2); }
.emg-art-one { top: 16px; right: 20px; color: #74e6b1; background: #193d41; transform: rotate(13deg); }
.emg-art-two { left: 5px; bottom: 16px; color: #ffdd8c; background: #2A4060; transform: rotate(-14deg); }
.emg-section-heading { display: flex; justify-content: space-between; align-items: flex-end; gap: 20px; margin-bottom: 24px; }
.emg-section-heading .emg-badge { margin-bottom: 9px; }
.emg-section-heading h2 { font-size: 1.7rem; letter-spacing: -.035em; margin: 0; }
.emg-library-count { color: var(--emg-muted); font-size: .84rem; padding-bottom: 3px; }
.emg-library-count i { font-style: normal; margin: 0 5px; color: #7A8BA0; }
.emg-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 22px; }
.emg-card { position: relative; overflow: hidden; background: linear-gradient(155deg, rgba(26,48,88,.96), rgba(22,40,92,.98)); border: 1px solid var(--emg-border); border-radius: var(--emg-radius); padding: 25px; display: flex; flex-direction: column; justify-content: space-between; gap: 24px; box-shadow: 0 15px 35px rgba(0,0,0,.17); min-height: 335px; transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease; }
.emg-card::before { content: ""; height: 3px; position: absolute; inset: 0 22% auto; background: var(--emg-game-color, var(--emg-accent)); opacity: .75; border-radius: 0 0 4px 4px; }
.emg-card:hover { transform: translateY(-6px); border-color: rgba(247,190,40,.35); box-shadow: 0 25px 48px rgba(0,0,0,.28); }
.emg-card-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; }
.emg-card-icon { width: 64px; height: 64px; border-radius: 19px; display: grid; place-items: center; font-size: 1.85rem; background: color-mix(in srgb, var(--emg-game-color, var(--emg-accent)) 16%, transparent); border: 1px solid color-mix(in srgb, var(--emg-game-color, var(--emg-accent)) 24%, transparent); box-shadow: inset 0 1px 0 rgba(255,255,255,.05); }
.emg-card-tag { color: #9AABC0; background: rgba(255,255,255,.035); padding: 6px 9px; border-radius: 8px; font-size: .67rem; font-weight: 650; }
.emg-card h3 { margin: 0 0 10px; font-size: 1.35rem; letter-spacing: -.025em; }
.emg-card .tagline { color: var(--emg-muted); font-size: .9rem; margin: 0; line-height: 1.65; }
.emg-card .meta { font-size: .73rem; color: #93A4B8; }
.emg-card .meta span { color: var(--emg-game-color, var(--emg-accent)); font-size: .6rem; margin-right: 4px; }
.emg-card .actions { display: flex; gap: 9px; margin-top: 0; }
.emg-card .actions .emg-btn { min-height: 49px; }
.emg-footer { margin-top: 46px; padding-top: 24px; border-top: 1px solid var(--emg-border); color: #8A9BB0; font-size: .79rem; display: flex; justify-content: space-between; gap: 14px; flex-wrap: wrap; }
.emg-footer a { color: #C5D4E4; }
.emg-play-shell {
  max-width: none;
  width: 100%;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  padding-top: 25px;
  padding-bottom: 32px;
}
.emg-play-page .emg-shell.emg-play-shell { min-height: 100vh; }
.emg-play-page .emg-top { margin-bottom: 25px; }
.emg-play-page .emg-brand h1 { font-size: 1.28rem; }
.emg-play-page .emg-nav { gap: 7px; }
.emg-play-page .emg-nav .emg-btn { min-height: 42px; padding: 9px 13px; font-size: .8rem; }
.emg-play-page .emg-control-label { font-size: .78rem; }
.emg-play-bar { display: flex; align-items: center; justify-content: space-between; gap: 15px; flex-wrap: wrap; margin-bottom: 16px; }
.emg-stats { display: flex; gap: 10px; flex-wrap: wrap; }
.emg-stat { background: rgba(22,40,92,.78); border: 1px solid var(--emg-border); border-radius: 14px; padding: 9px 19px; min-width: 108px; text-align: left; box-shadow: inset 0 1px 0 rgba(255,255,255,.025); }
.emg-stat strong { display: block; font-size: 1.3rem; line-height: 1.2; font-variant-numeric: tabular-nums; letter-spacing: -.04em; }
.emg-stat span { display: block; margin-top: 5px; font-size: .64rem; color: var(--emg-muted); text-transform: uppercase; letter-spacing: .07em; font-weight: 650; }
.emg-stat strong .emg-unit { display: inline; margin: 0 0 0 2px; font-size: .9rem; text-transform: none; color: inherit; }
.emg-stat-timer.is-low { border-color: rgba(255,95,109,.5); background: rgba(255,95,109,.08); }
.emg-stat-timer.is-low strong { color: #ff9ca4; }
.emg-play-hint { color: #8A9BB0; font-size: .78rem; }
.emg-stage {
  isolation: isolate;
  background: radial-gradient(800px 320px at 50% -80px, rgba(18,138,128,.15), transparent 80%), linear-gradient(155deg, #16285C, #121F3A);
  border: 1px solid var(--emg-border-strong);
  border-radius: 27px;
  padding: 36px;
  flex: 1 1 auto;
  min-height: min(70vh, 720px);
  width: 100%;
  box-shadow: var(--emg-shadow), inset 0 1px 0 rgba(255,255,255,.045);
  position: relative;
}
.emg-stage:fullscreen { overflow: auto; border-radius: 0; padding: 40px max(30px, calc((100vw - 1000px) / 2)); display: flex; flex-direction: column; justify-content: center; background-color: #0F1A38; }
.emg-stage:fullscreen .emg-overlay { border-radius: 0; }
.emg-progress { height: 12px; background: rgba(14,27,66,.42); border: 1px solid rgba(255,255,255,.045); border-radius: 999px; overflow: hidden; margin: 0 0 36px; box-shadow: inset 0 2px 5px rgba(0,0,0,.17); }
.emg-progress > i { display: block; height: 100%; background: linear-gradient(90deg, var(--emg-accent), #FFE9A0, var(--emg-accent-2)); box-shadow: 0 0 18px rgba(247,190,40,.35); border-radius: inherit; width: 0%; transition: width .35s ease; }
.emg-question-wrap { max-width: 850px; margin: 15px auto 30px; text-align: center; }
.emg-question-kicker { margin-bottom: 14px; font-size: .69rem; color: #FFE9A0; text-transform: uppercase; letter-spacing: .12em; font-weight: 750; }
.emg-q { font-size: clamp(1.55rem, 3.6vw, 2.35rem); font-weight: 750; margin: 0; line-height: 1.3; letter-spacing: -.035em; }
.emg-choices { display: grid; grid-template-columns: 1fr 1fr; gap: 15px; max-width: 850px; margin: 0 auto; }
.emg-choice { position: relative; display: flex; align-items: center; gap: 14px; text-align: left; width: 100%; min-height: 72px; padding: 17px 55px 17px 20px; border-radius: 17px; border: 1px solid rgba(120,214,200,.19); background: rgba(26,48,88,.88); color: var(--emg-text); box-shadow: 0 5px 12px rgba(0,0,0,.1), inset 0 1px 0 rgba(255,255,255,.04); cursor: pointer; font: inherit; font-size: 1.08rem; font-weight: 650; line-height: 1.4; transition: transform .15s ease, border-color .15s ease, background .15s ease, box-shadow .15s ease; }
.emg-choice:hover:not(:disabled) { border-color: #F7BE28; background: #243A5C; transform: translateY(-2px); box-shadow: 0 8px 20px rgba(0,0,0,.17); }
.emg-choice:active:not(:disabled) { transform: translateY(0) scale(.99); }
.emg-choice:disabled { cursor: default; color: #93A4B8; }
.emg-choice-index { display: grid; place-items: center; width: 30px; height: 30px; flex: 0 0 30px; border-radius: 9px; background: rgba(120,214,200,.12); color: #F4D67D; font-size: .76rem; font-weight: 800; }
.emg-choice.correct { opacity: 1; color: #eafff3; border-color: var(--emg-success); background: rgba(33,153,103,.25); box-shadow: 0 0 0 2px rgba(53,209,138,.12), 0 0 28px rgba(53,209,138,.11); animation: emg-correct-pulse .5s ease; }
.emg-choice.correct .emg-choice-index { color: #b3f8d5; background: rgba(53,209,138,.17); }
.emg-choice.wrong { opacity: 1; color: #fff0f1; border-color: var(--emg-danger); background: rgba(201,64,83,.25); animation: emg-wrong-shake .4s ease; }
.emg-choice.wrong .emg-choice-index { color: #ffc4ca; background: rgba(255,95,109,.15); }
.emg-feedback-icon { position: absolute; right: 17px; top: 50%; transform: translateY(-50%); display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; font-size: 1.75rem; font-weight: 900; line-height: 1; animation: emg-feedback-in .27s cubic-bezier(.17,.89,.32,1.49); }
.correct .emg-feedback-icon { color: #7cffbc; background: rgba(53,209,138,.13); }
.wrong .emg-feedback-icon { color: #ff9ba5; background: rgba(255,95,109,.13); }
.emg-board-heading { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 10px; margin: -14px 0 24px; color: #E8EEF6; font-size: 1.05rem; font-weight: 700; }
.emg-board-heading strong { font-size: .77rem; color: #F4D67D; font-weight: 550; }
.emg-overlay { position: absolute; inset: 0; border-radius: inherit; background: rgba(14,27,66,.79); -webkit-backdrop-filter: blur(13px); backdrop-filter: blur(13px); display: flex; align-items: center; justify-content: center; padding: 26px; z-index: 20; overflow-y: auto; }
.emg-overlay-card { position: relative; overflow: hidden; background: linear-gradient(155deg, rgba(26,48,88,.98), rgba(14,27,66,.99)); border: 1px solid rgba(120,214,200,.25); border-radius: 28px; padding: 40px 40px 27px; text-align: center; max-width: 480px; width: 100%; box-shadow: 0 30px 90px rgba(0,0,0,.5), inset 0 1px 0 rgba(255,255,255,.1); animation: emg-overlay-in .35s ease; }
.emg-overlay-card::before { content: ""; position: absolute; height: 130px; width: 240px; top: -90px; left: calc(50% - 120px); background: #F7BE28; filter: blur(65px); opacity: .2; pointer-events: none; }
.emg-overlay-illustration { position: relative; display: grid; place-items: center; width: 78px; height: 78px; margin: 0 auto 20px; background: linear-gradient(140deg, rgba(247,190,40,.4), rgba(18,138,128,.17)); border: 1px solid rgba(120,214,200,.25); border-radius: 24px; color: #FFE9A0; font-size: 2.1rem; font-weight: 800; box-shadow: 0 10px 30px rgba(18,138,128,.2); transform: rotate(-5deg); }
.emg-overlay-kicker { color: #FFE9A0; text-transform: uppercase; letter-spacing: .13em; font-size: .67rem; font-weight: 800; margin-bottom: 11px; }
.emg-overlay-card h2 { position: relative; margin: 0 0 13px; font-size: clamp(2rem, 5vw, 2.6rem); letter-spacing: -.05em; line-height: 1.1; }
.emg-overlay-card p { color: #DCCFDC; margin: 0 auto 25px; max-width: 34ch; font-size: .96rem; line-height: 1.65; }
.emg-btn-start { position: relative; width: 100%; min-height: 61px; font-size: 1.08rem; border-radius: 16px; justify-content: space-between; padding: 15px 23px; box-shadow: 0 10px 25px rgba(247,190,40,.3), inset 0 1px 0 rgba(255,255,255,.2); }
.emg-btn-start > span:last-child { font-size: 1.4rem; font-weight: 400; }
.emg-overlay-tip { color: #8A9BB0; font-size: .68rem; margin-top: 18px; }
.emg-overlay-back { display: block; color: #E1CCDC; font-size: .84rem; margin: 20px 0 2px; font-weight: 650; }
.emg-result { display: flex; align-items: center; flex-direction: column; padding: 16px; margin: 0 0 22px; border: 1px solid rgba(247,190,40,.25); border-radius: 17px; background: rgba(247,190,40,.09); }
.emg-result strong { font-size: 2.25rem; line-height: 1.1; letter-spacing: -.04em; }
.emg-result span { margin-top: 6px; color: #A8B6C9; font-size: .67rem; font-weight: 650; letter-spacing: .09em; text-transform: uppercase; }
.emg-overlay.is-complete .emg-overlay-illustration { background: rgba(53,209,138,.14); color: #84efba; border-color: rgba(53,209,138,.27); }
.emg-overlay.is-complete .emg-overlay-kicker { color: #78dbab; }
.emg-overlay.is-complete .emg-result { border-color: rgba(53,209,138,.24); background: rgba(53,209,138,.07); }
.emg-overlay.is-timeout .emg-overlay-illustration { background: rgba(251,191,84,.12); color: #ffdb8e; border-color: rgba(251,191,84,.25); }
.emg-overlay.is-timeout .emg-overlay-kicker { color: #ffcf78; }
.emg-match { display: grid; grid-template-columns: 1fr 1fr; gap: 26px; }
.emg-col { display: flex; flex-direction: column; gap: 13px; }
.emg-col h4 { margin: 0 0 3px; color: #9AABC0; font-size: .72rem; text-transform: uppercase; letter-spacing: .11em; font-weight: 750; }
.emg-chip { position: relative; min-height: 60px; padding: 15px 40px 15px 19px; border-radius: 15px; border: 1px solid rgba(120,214,200,.19); background: rgba(26,48,88,.85); box-shadow: 0 4px 10px rgba(0,0,0,.1), inset 0 1px 0 rgba(255,255,255,.035); cursor: pointer; text-align: left; color: var(--emg-text); font: inherit; font-size: 1rem; font-weight: 600; line-height: 1.4; transition: border-color .18s, opacity .25s, transform .18s, background .18s, box-shadow .18s; }
.emg-chip:hover:not(.matched) { border-color: #F7BE28; background: #243A5C; transform: translateY(-2px); }
.emg-chip.selected { border-color: #FFE9A0; background: rgba(18,138,128,.27); box-shadow: 0 0 0 3px rgba(247,190,40,.16), 0 5px 20px rgba(0,0,0,.15); transform: translateY(-2px); }
.emg-chip.selected::after { content: "●"; color: #FFE9A0; position: absolute; right: 17px; top: 50%; transform: translateY(-50%); font-size: .85rem; }
.emg-chip.matched { opacity: .68; pointer-events: none; border-color: rgba(53,209,138,.4); background: rgba(34,132,91,.17); color: #ade9cd; transform: scale(.98); }
.emg-chip.matched::after { content: "✓"; position: absolute; right: 16px; top: 50%; transform: translateY(-50%); font-size: 1.35rem; font-weight: 800; color: #62e5a6; animation: emg-feedback-in .3s ease; }
.emg-chip.miss { border-color: var(--emg-danger); background: rgba(201,64,83,.23); animation: emg-wrong-shake .4s ease; }
.emg-chip.miss::after { content: "✕"; position: absolute; right: 16px; top: 50%; transform: translateY(-50%); font-size: 1.2rem; font-weight: 800; color: #ff929e; }
.emg-memory { display: grid; grid-template-columns: repeat(4, 1fr); gap: 17px; }
.emg-mem-card { min-height: 130px; aspect-ratio: 4/3; perspective: 1000px; cursor: pointer; border: none; background: transparent; padding: 0; border-radius: 18px; }
.emg-mem-inner { position: relative; width: 100%; height: 100%; transform-style: preserve-3d; transition: transform .5s cubic-bezier(.2,.7,.25,1); border-radius: 18px; box-shadow: 0 7px 16px rgba(0,0,0,.2); }
.emg-mem-card:hover:not(.matched) .emg-mem-inner { box-shadow: 0 11px 25px rgba(0,0,0,.27); }
.emg-mem-card.flipped .emg-mem-inner, .emg-mem-card.matched .emg-mem-inner { transform: rotateY(180deg); }
.emg-mem-face { position: absolute; inset: 0; -webkit-backface-visibility: hidden; backface-visibility: hidden; border-radius: 18px; display: grid; place-items: center; padding: 13px; text-align: center; border: 1px solid rgba(120,214,200,.2); font-weight: 750; font-size: clamp(.9rem, 2.2vw, 1.3rem); overflow-wrap: anywhere; line-height: 1.3; }
.emg-mem-back { background: radial-gradient(circle at 20% 15%, rgba(255,255,255,.13), transparent 60%), linear-gradient(145deg, #128A80, #1A3A6E); color: #FFF8E4; text-shadow: 0 2px 4px rgba(0,0,0,.15); }
.emg-mem-back::after { content: ""; position: absolute; inset: 8px; border: 1px solid rgba(255,255,255,.12); border-radius: 12px; pointer-events: none; }
.emg-mem-front { background: linear-gradient(150deg, #383047, #16285C); color: var(--emg-text); transform: rotateY(180deg); box-shadow: inset 0 1px 0 rgba(255,255,255,.08); }
.emg-mem-card.matched .emg-mem-front { border: 2px solid var(--emg-success); background: linear-gradient(150deg, rgba(32,144,99,.44), rgba(25,87,73,.45)); color: #d5ffea; animation: emg-match-glow .55s ease; }
.emg-mem-card.matched .emg-mem-front::after { content: "✓"; position: absolute; top: 8px; right: 10px; font-size: .9rem; color: #8ff1bd; }
.emg-mem-card.miss .emg-mem-front { border-color: var(--emg-danger); animation: emg-wrong-shake .4s ease; }
.emg-note { background: rgba(247,190,40,.1); border: 1px solid rgba(247,190,40,.3); border-radius: 14px; padding: 16px 18px; color: #fde68a; margin: 18px 0; }
.emg-create-list { margin: 0; padding-left: 18px; color: var(--emg-muted); line-height: 1.7; }
.emg-auth-shell { max-width: min(900px, 100%); margin-left: auto; margin-right: auto; }
.emg-panel { background: var(--emg-card); border: 1px solid var(--emg-border); border-radius: 20px; padding: 26px; margin: 20px 0; box-shadow: var(--emg-shadow); }
.emg-panel h2, .emg-panel h3 { margin-top: 0; }
.emg-auth-panel { max-width: 680px; margin: 36px auto; }
.emg-login-panel { max-width: 520px; }
.emg-access-card { max-width: min(900px, 100%); margin: 30px auto; padding: 36px; }
.emg-muted { color: var(--emg-muted); line-height: 1.55; }
.emg-alert { border: 1px solid var(--emg-border); border-radius: 14px; padding: 16px 18px; margin: 20px 0; line-height: 1.5; }
.emg-alert ul { margin: 8px 0 0; padding-left: 20px; }
.emg-alert-error { background: rgba(239,68,68,.1); border-color: rgba(239,68,68,.45); color: #fecaca; }
.emg-alert-success { background: rgba(34,197,94,.1); border-color: rgba(34,197,94,.45); color: #bbf7d0; }
.emg-alert-success p { margin: 8px 0; }
.emg-form { display: grid; gap: 18px; margin-top: 24px; }
.emg-form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.emg-field { display: grid; gap: 8px; min-width: 0; }
.emg-field label, .emg-field legend { font-size: .9rem; font-weight: 700; }
.emg-field label span { color: var(--emg-muted); font-weight: 400; }
.emg-field input[type="text"], .emg-field input[type="email"], .emg-field input[type="password"], .emg-field select, .emg-field textarea, .emg-share input { width: 100%; min-width: 0; border: 1px solid var(--emg-border); border-radius: 10px; padding: 12px 14px; background: var(--emg-surface); color: var(--emg-text); font: inherit; line-height: 1.45; }
.emg-field textarea { resize: vertical; font-family: ui-monospace, SFMono-Regular, Consolas, monospace; font-size: .9rem; }
.emg-field input:focus, .emg-field select:focus, .emg-field textarea:focus { outline: 2px solid var(--emg-gold-pale); outline-offset: 2px; }
.emg-field fieldset, fieldset.emg-field { padding: 0; margin: 0; border: 0; }
.emg-role-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.emg-role { display: flex; gap: 10px; align-items: flex-start; padding: 16px; border: 1px solid var(--emg-border); border-radius: 12px; background: var(--emg-surface); cursor: pointer; }
.emg-role:has(input:checked) { border-color: var(--emg-gold); background: rgba(247,190,40,.08); }
.emg-role input { margin-top: 4px; accent-color: var(--emg-accent); }
.emg-role span { display: grid; gap: 6px; }
.emg-role small { color: var(--emg-muted); line-height: 1.45; }
.emg-check { color: var(--emg-muted); font-size: .9rem; }
.emg-check input { accent-color: var(--emg-accent); margin-right: 6px; }
.emg-form-footer { color: var(--emg-muted); margin: 22px 0 0; text-align: center; }
.emg-note p { margin: 8px 0; }
.emg-share { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-top: 12px; }
.emg-share input { flex: 1 1 300px; color: #d1fae5; }
.emg-activity-list { list-style: none; padding: 0; margin: 0; }
.emg-activity-list li { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 14px 0; border-top: 1px solid var(--emg-border); }
@keyframes emg-correct-pulse { 0% { transform: scale(1); } 45% { transform: scale(1.025); } 100% { transform: scale(1); } }
@keyframes emg-wrong-shake { 0%,100% { transform: translateX(0); } 25% { transform: translateX(-6px); } 55% { transform: translateX(5px); } 80% { transform: translateX(-3px); } }
@keyframes emg-feedback-in { from { opacity: 0; transform: translateY(-50%) scale(.3); } to { opacity: 1; transform: translateY(-50%) scale(1); } }
@keyframes emg-overlay-in { from { opacity: 0; transform: translateY(12px) scale(.98); } to { opacity: 1; transform: translateY(0) scale(1); } }
@keyframes emg-match-glow { 0% { box-shadow: 0 0 0 rgba(53,209,138,0); } 45% { box-shadow: 0 0 25px rgba(53,209,138,.4); } 100% { box-shadow: 0 0 0 rgba(53,209,138,0); } }
@media (max-width: 900px) {
  .emg-hero { grid-template-columns: 1fr; padding: 35px; }
  .emg-hero-art { display: none; }
  .emg-play-hint { display: none; }
  .emg-stage { padding: 27px; }
  .emg-memory { gap: 12px; }
  .emg-mem-card { min-height: 115px; }
}
@media (max-width: 700px) {
  .emg-match { grid-template-columns: 1fr; gap: 20px; }
  .emg-form-row, .emg-role-grid { grid-template-columns: 1fr; }
  .emg-panel, .emg-access-card { padding: 20px; }
  .emg-activity-list li { align-items: flex-start; flex-direction: column; }
  .emg-play-page .emg-top { align-items: flex-start; }
  .emg-play-page .emg-brand { width: 100%; }
  .emg-play-page .emg-nav { width: 100%; }
  .emg-play-page .emg-nav .emg-btn { flex: 1 1 auto; }
  .emg-stage:fullscreen { padding: 24px; }
}
@media (max-width: 560px) {
  .emg-shell { padding: 18px clamp(12px, 4vw, 20px) 40px; }
  .emg-top { margin-bottom: 27px; }
  .emg-hero { padding: 28px 23px; margin-bottom: 37px; border-radius: 23px; }
  .emg-hero h2 { font-size: 2.25rem; }
  .emg-hero p { font-size: .91rem; }
  .emg-hero-actions .emg-btn { width: 100%; }
  .emg-section-heading { align-items: flex-start; flex-direction: column; gap: 13px; }
  .emg-grid { grid-template-columns: 1fr; gap: 17px; }
  .emg-card { min-height: 310px; }
  .emg-play-shell { padding: 16px clamp(10px, 3vw, 16px) 32px; min-height: 100svh; }
  .emg-play-page .emg-brand h1 { font-size: 1.12rem; }
  .emg-play-page .emg-brand p { max-width: 260px; }
  .emg-play-page .emg-nav .emg-btn { min-width: 48px; padding: 9px 11px; }
  .emg-play-page .emg-control-label { display: none; }
  .emg-stats { width: 100%; gap: 8px; }
  .emg-stat { flex: 1; min-width: 0; padding: 10px 12px; }
  .emg-stat strong { font-size: 1.2rem; }
  .emg-stat span { font-size: .58rem; }
  .emg-stage { min-height: min(65vh, 560px); padding: 20px 16px; border-radius: 22px; }
  .emg-progress { height: 11px; margin-bottom: 26px; }
  .emg-question-wrap { margin: 18px auto 26px; }
  .emg-q { font-size: 1.55rem; }
  .emg-choices { grid-template-columns: 1fr; gap: 11px; }
  .emg-choice { min-height: 60px; padding: 13px 49px 13px 14px; font-size: 1rem; border-radius: 14px; }
  .emg-overlay { padding: 15px; }
  .emg-overlay-card { padding: 29px 24px 23px; border-radius: 23px; }
  .emg-overlay-illustration { width: 65px; height: 65px; font-size: 1.8rem; border-radius: 20px; margin-bottom: 17px; }
  .emg-overlay-card h2 { font-size: 2rem; }
  .emg-overlay-card p { font-size: .89rem; }
  .emg-memory { grid-template-columns: repeat(3, 1fr); gap: 10px; }
  .emg-mem-card { min-height: 108px; aspect-ratio: 3/4; }
  .emg-mem-face { padding: 9px; font-size: clamp(.7rem, 3.5vw, 1rem); border-radius: 13px; }
  .emg-mem-inner { border-radius: 13px; }
  .emg-board-heading { margin-top: -7px; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}


/* Brand headings — Fredoka */
.emg-brand h1,
.emg-hero h2,
.emg-section-heading h2,
.emg-card h3,
.emg-q,
.emg-overlay h2,
.emg-auth-card h1,
.emg-create-head h1,
.emg-panel-title,
.emg-studio-title {
  font-family: var(--emg-font-heading);
}

/* v1.5.3 — EduMagnet navy/teal/gold identity (homepage-aligned). */
:root {
  --emg-purple: #1A3A6E; /* legacy alias → navy mid */
  --emg-purple-light: #1F4A7A;
  --emg-plum: #16285C;
  --emg-gold: #F7BE28;
  --emg-gold-pale: #FFE9A0;
  --emg-orange: #EE871E;
  --emg-teal: #128A80;
  --emg-light-teal: #78D6C8;
}
html, body {
  background-image: radial-gradient(1100px 750px at 8% -15%, rgba(18,138,128,.5), transparent 68%),
    radial-gradient(900px 650px at 100% 5%, rgba(247,190,40,.09), transparent 65%),
    linear-gradient(145deg, var(--emg-bg) 12%, var(--emg-plum) 100%);
  background-attachment: fixed;
}
.emg-logo-img { display: block; width: 68px; height: 60px; min-height: 60px; flex: 0 0 68px; object-fit: contain; filter: drop-shadow(0 6px 12px rgba(8,16,40,.32)); }
.emg-btn-primary { color: var(--emg-bg); border-color: rgba(255,225,127,.55); text-shadow: none; }
.emg-btn-primary:hover { color: var(--emg-bg); }
.emg-btn-primary:focus-visible { outline-color: var(--emg-gold-pale); }
.emg-btn-start { box-shadow: 0 10px 25px rgba(247,190,40,.18), inset 0 1px 0 rgba(255,255,255,.32); }
.emg-publish-bar .emg-btn span { color: var(--emg-bg); }
.emg-wheel-center { color: var(--emg-gold-pale); }
.emg-question-wrap .emg-question-kicker { color: var(--emg-gold-pale); }
.emg-mem-back { background: radial-gradient(circle at 20% 15%, rgba(255,225,127,.18), transparent 60%), linear-gradient(145deg,#128A80,#1A3A6E); }
.emg-footer { border-top-color: rgba(247,190,40,.2); }
@media (max-width: 560px) {
  .emg-logo-img { width: 58px; height: 52px; min-height: 52px; flex-basis: 58px; }
}

/* v1.3 — one content set, many polished ways to play. */
.emg-switcher { display: flex; align-items: center; gap: 18px; margin: -4px 0 20px; padding: 11px 13px 11px 18px; border: 1px solid var(--emg-border); border-radius: 18px; background: rgba(22,40,92,.7); box-shadow: 0 8px 22px rgba(0,0,0,.1); }
.emg-switcher > span { flex: 0 0 auto; display: grid; gap: 4px; }
.emg-switcher strong { font-size: .76rem; text-transform: uppercase; letter-spacing: .06em; color: #FFE9A0; }
.emg-switcher small { color: #8A9BB0; font-size: .64rem; }
.emg-switcher nav { display: flex; gap: 7px; flex: 1; justify-content: flex-end; flex-wrap: wrap; }
.emg-switch-link { display: inline-flex; align-items: center; gap: 7px; min-height: 39px; padding: 8px 11px; border: 1px solid transparent; border-radius: 10px; color: #B0BDD0; font-size: .74rem; font-weight: 700; text-decoration: none !important; transition: background .18s, border-color .18s, color .18s, transform .18s; }
.emg-switch-link:hover { background: #1F3A5C; border-color: var(--emg-border-strong); color: #fff; transform: translateY(-1px); }
.emg-switch-link.is-active { background: linear-gradient(135deg, rgba(247,190,40,.38), rgba(18,138,128,.3)); border-color: rgba(247,190,40,.5); color: #fff; box-shadow: inset 0 1px 0 rgba(255,255,255,.08); }
.emg-switch-link span { color: #FFE9A0; font-size: 1rem; }

/* Play page — large, clear template switcher for students */
.emg-play-page .emg-switcher,
.emg-switcher-play {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 16px;
  margin: 0 0 28px;
  padding: 22px 22px 20px;
  border: 2px solid rgba(247,190,40,.45);
  border-radius: 24px;
  background: linear-gradient(160deg, rgba(26,48,88,.98), rgba(18,138,128,.18) 120%);
  box-shadow: 0 16px 36px rgba(0,0,0,.22);
}
.emg-switcher-heading,
.emg-play-page .emg-switcher > span,
.emg-play-page .emg-switcher > .emg-switcher-heading {
  display: grid;
  gap: 6px;
  flex: none;
  width: 100%;
}
.emg-play-page .emg-switcher strong,
.emg-switcher-heading strong {
  font-family: Fredoka, Poppins, sans-serif;
  font-size: clamp(1.25rem, 3.2vw, 1.7rem);
  font-weight: 700;
  text-transform: none;
  letter-spacing: -.02em;
  color: #F7BE28;
  line-height: 1.2;
}
.emg-play-page .emg-switcher small,
.emg-switcher-heading small {
  display: block !important;
  color: #D5E0EE;
  font-size: clamp(.95rem, 2.2vw, 1.1rem);
  font-weight: 500;
  line-height: 1.35;
}
.emg-play-page .emg-switcher nav,
.emg-switcher-nav {
  display: grid !important;
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  gap: 12px;
  width: 100%;
  justify-content: stretch;
  flex-wrap: nowrap;
}
.emg-play-page .emg-switch-link {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 96px;
  padding: 16px 12px;
  border: 2px solid rgba(120,214,200,.35);
  border-radius: 18px;
  background: rgba(255,255,255,.06);
  color: #F4F7FB;
  font-family: Fredoka, Poppins, sans-serif;
  font-size: 1.05rem;
  font-weight: 700;
  text-align: center;
  line-height: 1.25;
  text-decoration: none !important;
  box-shadow: 0 6px 0 rgba(0,0,0,.18);
}
.emg-play-page .emg-switch-link span[aria-hidden="true"] {
  font-size: 1.85rem;
  color: #F7BE28;
  line-height: 1;
}
.emg-play-page .emg-switch-link:hover,
.emg-play-page .emg-switch-link:focus-visible {
  background: rgba(18,138,128,.28);
  border-color: #F7BE28;
  color: #fff;
  transform: translateY(-2px);
  outline: none;
}
.emg-play-page .emg-switch-link.is-active {
  background: linear-gradient(145deg, rgba(247,190,40,.55), rgba(18,138,128,.35));
  border-color: #F7BE28;
  color: #16285C;
  box-shadow: 0 8px 0 #D9A31A;
}
.emg-play-page .emg-switch-link.is-active span[aria-hidden="true"] {
  color: #16285C;
}
.emg-play-page .emg-switch-link.is-disabled {
  opacity: .42;
  filter: grayscale(.4);
  box-shadow: none;
  min-height: 88px;
}
.emg-play-page .emg-switch-reason {
  display: block;
  margin-top: 2px;
  font-size: .72rem;
  font-weight: 600;
  color: #9AABC0;
  line-height: 1.3;
  max-width: 14ch;
}
@media (max-width: 640px) {
  .emg-play-page .emg-switcher,
  .emg-switcher-play {
    padding: 18px 14px 16px;
    border-radius: 20px;
    margin-bottom: 20px;
  }
  .emg-play-page .emg-switcher nav,
  .emg-switcher-nav {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 10px;
  }
  .emg-play-page .emg-switch-link {
    min-height: 88px;
    font-size: .98rem;
    padding: 14px 10px;
  }
  .emg-play-page .emg-switch-link span[aria-hidden="true"] {
    font-size: 1.65rem;
  }
}

.emg-stage-help { margin: -14px 0 20px; color: var(--emg-muted); font-size: .82rem; }
.emg-stage-spin-wheel, .emg-stage-flashcards { background: radial-gradient(650px 360px at 50% 20%, rgba(18,138,128,.14), transparent 80%), linear-gradient(155deg, #16285C, #121F3A); }

/* Wheel */
.emg-wheel-layout { display: grid; grid-template-columns: minmax(300px, 450px) minmax(220px, 1fr); align-items: center; gap: clamp(30px, 5vw, 70px); max-width: 980px; margin: 0 auto; }
.emg-wheel-wrap { position: relative; width: 100%; aspect-ratio: 1; filter: drop-shadow(0 22px 28px rgba(0,0,0,.35)); }
.emg-wheel-wrap::before { content: ""; position: absolute; inset: 4%; border-radius: 50%; box-shadow: 0 0 70px rgba(18,138,128,.22); pointer-events: none; }
#emg-wheel { display: block; width: 100%; height: 100%; border-radius: 50%; }
.emg-wheel-pointer { position: absolute; z-index: 3; top: -24px; left: 50%; transform: translateX(-50%); color: #FFE9A0; font-size: 2.8rem; line-height: 1; filter: drop-shadow(0 4px 4px rgba(0,0,0,.5)); }
.emg-wheel-center { position: absolute; z-index: 4; left: 50%; top: 50%; transform: translate(-50%,-50%); width: 27%; aspect-ratio: 1; border-radius: 50%; display: flex; flex-direction: column; align-items: center; justify-content: center; color: #fff; background: linear-gradient(145deg, #1A3A6E, #0E1B42); border: 6px solid #F7BE28; cursor: pointer; box-shadow: 0 8px 28px rgba(0,0,0,.4), inset 0 2px 0 rgba(255,255,255,.1); transition: transform .2s, background .2s; }
.emg-wheel-center:hover:not(:disabled) { transform: translate(-50%,-50%) scale(1.07); background: linear-gradient(145deg, #128A80, #16285C); }
.emg-wheel-center:disabled { cursor: wait; }
.emg-wheel-center strong { font-size: clamp(.7rem, 2vw, 1.08rem); letter-spacing: .04em; }
.emg-wheel-center span { font-size: clamp(.48rem, 1.2vw, .68rem); color: #B0BDD0; margin-top: 4px; }
.emg-wheel-result { position: relative; padding: 30px 25px; background: linear-gradient(150deg, rgba(18,138,128,.68), rgba(22,40,92,.78)); border: 1px solid rgba(120,214,200,.25); border-radius: 23px; text-align: center; box-shadow: 0 14px 35px rgba(0,0,0,.2), inset 0 1px 0 rgba(255,255,255,.045); }
.emg-wheel-result::before { content: "✦"; display: grid; place-items: center; width: 55px; height: 55px; margin: 0 auto 18px; border-radius: 17px; background: rgba(238,135,30,.13); border: 1px solid rgba(238,135,30,.24); font-size: 1.65rem; color: #EE871E; }
.emg-result-label { display: block; margin-bottom: 12px; color: #FFE9A0; text-transform: uppercase; letter-spacing: .1em; font-size: .64rem; font-weight: 800; }
.emg-wheel-result strong { display: block; font-size: clamp(1.5rem, 3vw, 2.2rem); line-height: 1.2; letter-spacing: -.035em; overflow-wrap: anywhere; }
.emg-wheel-result p { margin: 15px 0 0; color: #A8B6C9; line-height: 1.65; font-size: .95rem; }
.emg-wheel-result.is-revealed { border-color: rgba(112,230,176,.5); animation: emg-reveal .5s ease; }
.emg-wheel-result.is-revealed::before { content: "✓"; color: #70e6b0; background: rgba(53,209,138,.13); border-color: rgba(53,209,138,.25); }

/* Group sort */
.emg-sort-pool { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; min-height: 67px; max-width: 1000px; margin: 0 auto 27px; padding: 13px; background: rgba(14,27,66,.22); border: 1px dashed rgba(120,214,200,.17); border-radius: 18px; }
.emg-sort-item { min-height: 51px; padding: 11px 18px; border-radius: 13px; border: 1px solid rgba(120,214,200,.24); background: linear-gradient(150deg,#243A58,#1A2E4A); box-shadow: 0 4px 12px rgba(0,0,0,.14), inset 0 1px 0 rgba(255,255,255,.06); font: inherit; font-size: .95rem; font-weight: 700; color: var(--emg-text); cursor: grab; transition: transform .18s, border-color .18s, box-shadow .18s, background .18s; }
.emg-sort-item:hover:not(:disabled) { transform: translateY(-3px); border-color: #78d9b0; box-shadow: 0 8px 20px rgba(0,0,0,.2); }
.emg-sort-item.selected { border-color: #FFE9A0; background: #1A5A68; box-shadow: 0 0 0 3px rgba(247,190,40,.2); }
.emg-sort-item.is-wrong { border-color: var(--emg-danger); animation: emg-wrong-shake .4s ease; }
.emg-sort-item.is-dragging { opacity: .4; }
.emg-sort-buckets { display: grid; grid-template-columns: repeat(var(--emg-group-count, 2), minmax(0,1fr)); gap: 20px; }
.emg-sort-bucket { min-height: 220px; padding: 17px; border-radius: 20px; border: 2px solid rgba(120,214,200,.18); background: linear-gradient(150deg, rgba(22,40,92,.82), rgba(22,40,92,.88)); transition: border-color .2s, background .2s, box-shadow .2s; }
.emg-sort-bucket.is-ready { border-color: rgba(115,213,175,.45); }
.emg-sort-bucket.is-over { border-color: #7ce6b8; background: rgba(48,151,111,.15); box-shadow: 0 0 0 4px rgba(53,209,138,.1); }
.emg-sort-bucket.is-correct { border-color: var(--emg-success); animation: emg-correct-pulse .5s ease; }
.emg-sort-bucket.is-wrong { border-color: var(--emg-danger); background: rgba(201,64,83,.12); animation: emg-wrong-shake .4s ease; }
.emg-sort-bucket-heading { display: flex; justify-content: space-between; align-items: center; gap: 10px; }
.emg-sort-group-name { flex: 1; min-height: 47px; padding: 11px 14px; border-radius: 12px; color: #dcfff0; background: rgba(53,209,138,.1); border: 1px solid rgba(83,210,158,.2); font: inherit; font-size: 1.07rem; font-weight: 800; cursor: pointer; text-align: left; }
.emg-sort-group-name:hover { background: rgba(53,209,138,.18); }
.emg-sort-count { color: #AEB4BC; font-size: .65rem; white-space: nowrap; }
.emg-sort-drop-hint { display: block; text-align: center; padding: 31px 10px 20px; color: #9D90A9; font-size: .72rem; }
.emg-sort-bucket:has(.emg-sort-item) .emg-sort-drop-hint { display: none; }
.emg-sort-placed { display: flex; flex-wrap: wrap; gap: 9px; margin-top: 14px; }
.emg-sort-item.is-placed { cursor: default; min-height: 42px; padding: 8px 12px; border-color: rgba(53,209,138,.3); background: rgba(53,142,101,.2); color: #c5f6df; font-size: .82rem; }
.emg-sort-item.is-placed::after { content: " ✓"; color: #6be6aa; }
.emg-sort-item:disabled { opacity: 1; }
.emg-sort-feedback { margin: 23px auto 0; max-width: 760px; min-height: 43px; display: grid; place-items: center; text-align: center; padding: 9px 15px; border-radius: 12px; color: #9AABC0; font-size: .85rem; font-weight: 650; }
.emg-sort-feedback.is-correct { color: #8ef1bd; background: rgba(53,209,138,.1); }
.emg-sort-feedback.is-wrong { color: #ffaab2; background: rgba(255,95,109,.1); }
.emg-sort-feedback.is-selected { color: #FFE9A0; background: rgba(247,190,40,.1); }

/* Flashcards */
.emg-flash-layout { max-width: 760px; margin: 0 auto; }
.emg-flash-meta { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 18px; color: #9AABC0; font-size: .75rem; }
.emg-flash-meta span:first-child { font-weight: 800; color: #FFE9A0; }
.emg-flashcard { display: block; width: 100%; height: 310px; padding: 0; border: none; background: transparent; perspective: 1400px; cursor: pointer; color: var(--emg-text); font: inherit; }
.emg-flash-inner { display: block; position: relative; width: 100%; height: 100%; transition: transform .55s cubic-bezier(.2,.75,.25,1); transform-style: preserve-3d; border-radius: 25px; box-shadow: 0 19px 40px rgba(0,0,0,.25); }
.emg-flashcard.is-flipped .emg-flash-inner { transform: rotateY(180deg); }
.emg-flashcard:hover .emg-flash-inner { box-shadow: 0 23px 45px rgba(0,0,0,.32), 0 0 40px rgba(247,190,40,.08); }
.emg-flash-face { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; flex-direction: column; padding: 35px; border-radius: 25px; backface-visibility: hidden; -webkit-backface-visibility: hidden; overflow: hidden; background: radial-gradient(450px 200px at 50% 0, rgba(247,190,40,.15), transparent), linear-gradient(145deg,#44314D,#16285C); border: 1px solid rgba(120,214,200,.26); }
.emg-flash-face::before { content: ""; position: absolute; inset: 13px; border: 1px solid rgba(255,255,255,.05); border-radius: 17px; pointer-events: none; }
.emg-flash-face small { color: #FFE9A0; font-size: .65rem; font-weight: 800; letter-spacing: .16em; margin-bottom: 24px; }
.emg-flash-face strong { font-size: clamp(1.6rem,4vw,2.65rem); line-height: 1.3; text-align: center; overflow-wrap: anywhere; letter-spacing: -.035em; }
.emg-flash-back { transform: rotateY(180deg); background: radial-gradient(450px 200px at 50% 0, rgba(120,214,200,.12), transparent), linear-gradient(145deg,#343944,#16285C); border-color: rgba(120,214,200,.25); }
.emg-flash-back small { color: #FFE9A0; }
.emg-flash-back strong { font-size: clamp(1.35rem,3.2vw,2.15rem); }
.emg-flip-hint { position: absolute; bottom: 22px; color: #8A9BB0; font-size: .71rem; }
.emg-flash-nav { display: flex; justify-content: space-between; gap: 12px; margin-top: 21px; }
.emg-flash-nav .emg-btn { min-height: 49px; }
.emg-flash-nav .emg-btn:disabled { opacity: .4; cursor: default; transform: none; }
.emg-study-actions { display: flex; align-items: center; justify-content: space-between; gap: 15px; margin-top: 22px; padding-top: 18px; border-top: 1px solid var(--emg-border); }
.emg-study-actions > span { color: #9AABC0; font-size: .82rem; }
.emg-study-actions > div { display: flex; gap: 10px; }
.emg-btn-know { color: #baf8d8; border-color: rgba(53,209,138,.28); background: rgba(53,209,138,.08); }
.emg-btn-know:hover, .emg-btn-know.is-marked { background: rgba(38,151,104,.35); border-color: var(--emg-success); }
.emg-btn-learning { color: #ffe1a7; border-color: rgba(251,191,84,.28); background: rgba(251,191,84,.07); }
.emg-btn-learning:hover, .emg-btn-learning.is-marked { background: rgba(181,125,29,.32); border-color: var(--emg-warn); }
.emg-stat-know strong { color: #78e9b1; }
.emg-stat-learning strong { color: #f8cd79; }
.emg-template-help { font-size: .8rem; line-height: 1.65; }
.emg-compatible-note { margin: 9px 0 0; color: #b6e4d2; font-size: .77rem; }
@keyframes emg-reveal { 0% { transform: translateY(6px) scale(.97); opacity: .6; } 60% { transform: translateY(0) scale(1.02); opacity: 1; } 100% { transform: scale(1); } }

@media (max-width: 900px) {
  .emg-switcher { align-items: flex-start; flex-direction: column; gap: 11px; }
  .emg-switcher nav { justify-content: flex-start; }
  .emg-wheel-layout { grid-template-columns: minmax(270px,400px) minmax(200px,1fr); gap: 28px; }
  .emg-wheel-result { padding: 23px 18px; }
}
@media (max-width: 700px) {
  .emg-wheel-layout { grid-template-columns: 1fr; gap: 36px; }
  .emg-wheel-wrap { max-width: 400px; margin: 15px auto 0; }
  .emg-wheel-result { max-width: 480px; width: 100%; margin: 0 auto; }
  .emg-sort-buckets { gap: 12px; }
  .emg-sort-bucket { padding: 12px; }
  .emg-sort-bucket-heading { flex-direction: column; align-items: stretch; }
  .emg-sort-count { text-align: right; }
  .emg-flash-meta { flex-direction: column; align-items: flex-start; gap: 7px; }
  .emg-study-actions { flex-direction: column; }
  .emg-study-actions > div { width: 100%; }
  .emg-study-actions .emg-btn { flex: 1; }
}
@media (max-width: 560px) {
  .emg-switcher { padding: 13px; border-radius: 15px; margin-bottom: 15px; }
  .emg-switcher small { display: none; }
  .emg-switcher nav { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); width: 100%; gap: 6px; }
  .emg-switch-link { justify-content: center; padding: 8px 6px; font-size: .67rem; }
  .emg-wheel-layout { margin-top: 26px; }
  .emg-wheel-wrap { max-width: 340px; }
  .emg-wheel-pointer { top: -22px; }
  .emg-wheel-result { padding: 22px 18px; }
  .emg-wheel-result::before { display: none; }
  .emg-wheel-result p { font-size: .86rem; }
  .emg-sort-pool { gap: 9px; padding: 10px; }
  .emg-sort-item { min-height: 46px; padding: 10px 13px; font-size: .84rem; }
  .emg-sort-buckets { grid-template-columns: 1fr; }
  .emg-sort-bucket { min-height: 0; }
  .emg-sort-bucket-heading { flex-direction: row; align-items: center; }
  .emg-sort-drop-hint { padding: 18px 10px 6px; }
  .emg-flashcard { height: 285px; }
  .emg-flash-face { padding: 27px; }
  .emg-flash-nav { gap: 8px; }
  .emg-flash-nav .emg-btn { padding: 10px; font-size: .76rem; }
  .emg-study-actions { gap: 12px; }
  .emg-study-actions .emg-btn { padding: 10px; font-size: .76rem; }
  .emg-stage-help { font-size: .75rem; }
}

/* Visual teacher card builder */
.emg-studio-panel,
.emg-builder-panel {
  max-width: none;
  width: 100%;
  margin: -26px 0 30px;
  position: relative;
  z-index: 2;
  background: linear-gradient(155deg,rgba(26,48,88,.98),rgba(14,27,66,.99));
  border-radius: 26px;
  padding: clamp(20px,3.5vw,40px);
}
.emg-builder-panel .emg-form { margin-top: 0; gap: 26px; }
.emg-builder-heading { display: flex; justify-content: space-between; align-items: center; gap: 20px; }
.emg-builder-heading .emg-badge { margin-bottom: 10px; }
.emg-builder-heading h3 { font-size: 1.75rem; letter-spacing: -.035em; margin: 0; }
.emg-builder-step { color: #9AABC0; font-size: .76rem; font-weight: 650; }
.emg-builder-guide { display: flex; align-items: flex-start; gap: 17px; padding: 18px 20px; border: 1px solid rgba(247,190,40,.17); border-radius: 17px; background: linear-gradient(135deg,rgba(18,138,128,.09),rgba(18,138,128,.1)); }
.emg-builder-guide > span { display: grid; place-items: center; flex: 0 0 41px; height: 41px; border-radius: 12px; color: #FFE9A0; background: rgba(247,190,40,.12); font-size: 1.35rem; }
.emg-builder-guide strong { font-size: .95rem; }
.emg-builder-guide p { margin: 6px 0 0; color: #B0BDD0; font-size: .83rem; line-height: 1.6; }
.emg-card-editor { display: grid; gap: 20px; }
.emg-editor-row { padding: 23px; border: 1px solid rgba(120,214,200,.22); border-radius: 22px; background: linear-gradient(145deg,rgba(26,48,88,.95),rgba(22,40,92,.96)); box-shadow: 0 9px 26px rgba(0,0,0,.14), inset 0 1px 0 rgba(255,255,255,.03); }
.emg-editor-row:focus-within { border-color: rgba(247,190,40,.45); }
.emg-editor-row-header { display: flex; justify-content: space-between; align-items: center; gap: 15px; margin-bottom: 21px; }
.emg-editor-row-title { display: flex; gap: 11px; align-items: center; }
.emg-editor-number { display: grid; place-items: center; width: 32px; height: 32px; border-radius: 10px; color: #FFE9A0; background: rgba(247,190,40,.16); font-size: .84rem; font-weight: 850; }
.emg-editor-row-title strong { font-size: .98rem; }
.emg-remove-card, .emg-remove-choice, .emg-remove-sort-item { border: none; background: transparent; color: #8A9BB0; cursor: pointer; font: inherit; font-size: .73rem; border-radius: 8px; padding: 8px; }
.emg-remove-card:hover, .emg-remove-choice:hover, .emg-remove-sort-item:hover { color: #ffacb4; background: rgba(255,95,109,.1); }
.emg-builder-input { display: grid; gap: 9px; min-width: 0; }
.emg-builder-input > span { font-size: .7rem; text-transform: uppercase; letter-spacing: .065em; color: #9AABC0; font-weight: 750; }
.emg-builder-input input { width: 100%; min-height: 54px; border: 1px solid rgba(120,214,200,.22); border-radius: 12px; background: #121F3A; color: var(--emg-text); padding: 14px 16px; font: inherit; font-size: .94rem; }
.emg-answer-heading { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 20px; margin-bottom: 11px; }
.emg-answer-heading strong { font-size: .8rem; }
.emg-answer-heading span { color: #8A9BB0; font-size: .7rem; }
.emg-answer-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 11px; }
.emg-answer-card { display: grid; grid-template-columns: auto minmax(0,1fr) auto; align-items: center; gap: 10px; padding: 8px 10px; min-height: 70px; background: #3D3049; border: 1px solid rgba(120,214,200,.23); border-radius: 14px; cursor: pointer; transition: border-color .18s, box-shadow .18s, background .18s, transform .18s; }
.emg-answer-card:hover { background: #4D3853; border-color: rgba(247,190,40,.6); transform: translateY(-1px); }
.emg-answer-card.is-correct { background: linear-gradient(145deg,rgba(27,126,87,.43),rgba(24,80,68,.43)); border-color: #45d793; box-shadow: 0 0 0 2px rgba(53,209,138,.1); }
.emg-answer-card input { min-width: 0; width: 100%; border: none; border-bottom: 1px solid rgba(120,214,200,.16); border-radius: 0; outline-offset: 1px; background: transparent; color: #F5F9FC; padding: 9px 3px; font: inherit; font-size: .92rem; cursor: text; }
.emg-answer-check { width: 32px; height: 32px; border-radius: 9px; border: 1px solid rgba(120,214,200,.3); color: transparent; background: rgba(14,27,66,.18); font: inherit; font-weight: 900; cursor: pointer; }
.emg-answer-card.is-correct .emg-answer-check { color: #b3f6d5; border-color: rgba(89,228,162,.5); background: rgba(53,209,138,.18); }
.emg-answer-feedback { margin: 14px 0 12px; color: #9AABC0; font-size: .76rem; font-weight: 650; }
.emg-answer-feedback.is-selected { color: #7eeab2; }
.emg-add-answer { min-height: 36px; padding: 6px 11px; color: #FFE9A0; background: transparent; font-size: .74rem; border-style: dashed; }
.emg-pair-inputs { display: grid; grid-template-columns: 1fr 42px 1fr; align-items: end; gap: 14px; }
.emg-pair-inputs .emg-builder-input input { min-height: 93px; font-size: 1rem; background: linear-gradient(150deg,#3A3048,#16285C); }
.emg-pair-inputs .emg-builder-input:last-child input { background: linear-gradient(150deg,#373042,#16285C); }
.emg-pair-join { display: grid; place-items: center; width: 40px; height: 40px; margin-bottom: 28px; border-radius: 50%; background: rgba(247,190,40,.15); color: #FFE9A0; font-size: 1.2rem; }
.emg-add-card { justify-self: center; border-style: dashed; padding: 13px 23px; min-height: 49px; color: #FFE9A0; background: rgba(247,190,40,.06); }
.emg-builder-error { padding: 15px 18px; border-radius: 13px; border: 1px solid rgba(255,95,109,.4); color: #ffc2c8; background: rgba(185,64,83,.15); font-size: .85rem; line-height: 1.5; }
.emg-builder-error.is-success { border-color: rgba(53,209,138,.4); color: #adf1cf; background: rgba(53,209,138,.1); }
.emg-import { border: 1px solid var(--emg-border); border-radius: 15px; padding: 0 18px; background: rgba(14,27,66,.28); }
.emg-import summary { cursor: pointer; padding: 17px 0; color: #B0BDD0; font-size: .8rem; font-weight: 700; }
.emg-import summary small { font-weight: 400; margin-left: 8px; color: #8A9BB0; }
.emg-import .emg-field { margin: 6px 0 20px; }
.emg-import textarea { width: 100%; padding: 13px; border: 1px solid var(--emg-border); border-radius: 11px; color: #E8EEF6; background: #25152F; font: .84rem/1.65 ui-monospace,SFMono-Regular,Consolas,monospace; resize: vertical; }
.emg-import-help { color: #8A9BB0; font-size: .76rem; line-height: 1.6; margin: 0; }
.emg-import .emg-btn { font-size: .77rem; margin-top: 4px; }
.emg-publish-bar { display: flex; justify-content: space-between; align-items: center; gap: 20px; padding-top: 24px; border-top: 1px solid var(--emg-border); }
.emg-publish-bar > div { display: grid; gap: 6px; }
.emg-publish-bar strong { font-size: .95rem; }
.emg-publish-bar span { color: #9AABC0; font-size: .77rem; }
.emg-publish-bar .emg-btn { min-height: 53px; padding: 13px 24px; }
.emg-publish-bar .emg-btn span { color: #fff; font-size: 1.1rem; }
.emg-sort-editor-help { margin: -4px 0 2px; color: #9AABC0; font-size: .8rem; }
.emg-group-editor-wrap { padding: 17px; border: 1px solid rgba(76,197,151,.18); border-radius: 16px; background: rgba(47,148,109,.055); }
.emg-group-editor-wrap > strong { display: block; font-size: .75rem; margin-bottom: 12px; color: #b6d9cc; }
.emg-group-editor { display: flex; gap: 12px; }
.emg-group-name-field { display: grid; gap: 8px; flex: 1; }
.emg-group-name-field > span { font-size: .65rem; text-transform: uppercase; letter-spacing: .05em; color: #8eb5a8; }
.emg-group-name-field input { width: 100%; min-height: 46px; padding: 10px 13px; border: 1px solid rgba(84,204,158,.24); background: #183a3c; border-radius: 11px; color: #ddfff2; font: inherit; font-size: .88rem; font-weight: 700; }
.emg-sort-items { display: grid; gap: 10px; }
.emg-sort-item-card { display: grid; grid-template-columns: 34px minmax(0,1fr) minmax(135px, .42fr) auto; align-items: center; gap: 11px; padding: 12px 14px; border: 1px solid var(--emg-border); border-radius: 14px; background: #3A3048; }
.emg-sort-item-number { display: grid; place-items: center; width: 28px; height: 28px; border-radius: 9px; background: rgba(120,214,200,.12); color: #D5C4DA; font-size: .72rem; font-weight: 800; }
.emg-sort-item-card input, .emg-group-select { min-width: 0; width: 100%; min-height: 43px; padding: 10px 12px; border: 1px solid rgba(120,214,200,.2); border-radius: 9px; color: #F5F9FC; background: #25152F; font: inherit; font-size: .86rem; }
.emg-group-select { color: #b7f3d8; background: #1b3b3b; border-color: rgba(72,193,144,.24); cursor: pointer; }
.emg-remove-sort-item { font-size: 1.1rem; }
@media (max-width: 800px) {
  .emg-builder-panel { margin-top: -30px; }
  .emg-builder-heading { align-items: flex-start; flex-direction: column; gap: 12px; }
  .emg-answer-grid { grid-template-columns: 1fr; }
  .emg-group-editor { flex-wrap: wrap; }
  .emg-group-name-field { flex: 1 1 180px; }
}
@media (max-width: 600px) {
  .emg-builder-panel { padding: 18px 14px; border-radius: 20px; }
  .emg-builder-heading h3 { font-size: 1.5rem; }
  .emg-builder-step { font-size: .65rem; }
  .emg-builder-guide { padding: 15px; }
  .emg-editor-row { padding: 16px 13px; }
  .emg-answer-heading { align-items: flex-start; flex-direction: column; gap: 5px; }
  .emg-pair-inputs { grid-template-columns: 1fr; }
  .emg-pair-join { transform: rotate(90deg); margin: 0 auto -5px; width: 30px; height: 30px; }
  .emg-pair-inputs .emg-builder-input input { min-height: 65px; }
  .emg-publish-bar { flex-direction: column; align-items: stretch; }
  .emg-publish-bar .emg-btn { width: 100%; }
  .emg-import summary small { display: block; margin: 5px 0 0; }
  .emg-sort-item-card { grid-template-columns: 29px minmax(0,1fr) auto; }
  .emg-sort-item-card .emg-group-select { grid-column: 2; }
  .emg-remove-sort-item { grid-column: 3; grid-row: 1 / span 2; }
}

/* Brand contrast refinements. */
.emg-overlay-card .emg-btn-primary { color: var(--emg-bg); }
.emg-switch-link.is-active { color: var(--emg-gold-pale); }
.emg-art-main > span { color: var(--emg-gold-pale); }

/* v1.5.0 — play pages fill the viewport; bigger, clearer questions and answers. */
body.emg-play-page { min-height: 100dvh; }
.emg-play-page .emg-shell.emg-play-shell {
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  padding-top: clamp(12px, 2vh, 22px);
  padding-bottom: clamp(12px, 2vh, 22px);
}
.emg-play-page .emg-top { margin-bottom: 16px; }
.emg-play-page .emg-switcher { margin-bottom: 14px; }
.emg-play-bar { margin-bottom: 14px; }
.emg-play-page .emg-stage {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: clamp(18px, 3vh, 34px) clamp(16px, 3vw, 40px);
}
.emg-play-page .emg-stage > .emg-progress { flex: 0 0 auto; }
.emg-play-page .emg-footer { margin-top: 18px; padding-top: 14px; }
.emg-question-wrap { margin: 0 auto 26px; }
.emg-play-page .emg-q { font-size: clamp(1.8rem, 3.4vw, 2.5rem); }
.emg-play-page .emg-choices { width: 100%; max-width: 1000px; gap: 18px; }
.emg-play-page .emg-choice {
  min-height: 96px;
  font-size: clamp(1.1rem, 1.6vw, 1.35rem);
  padding: 20px 62px 20px 24px;
}
.emg-play-page .emg-choice-index { width: 38px; height: 38px; flex-basis: 38px; font-size: .95rem; }
.emg-play-page .emg-match, .emg-play-page .emg-memory { flex: 1 1 auto; align-content: center; }
.emg-play-page .emg-stage-spin-wheel, .emg-play-page .emg-stage-flashcards { justify-content: center; }
@media (max-width: 560px) {
  .emg-play-page .emg-stage { min-height: 0; padding: 16px 12px; }
  .emg-play-page .emg-choice { min-height: 74px; padding: 14px 50px 14px 14px; font-size: 1.05rem; }
  .emg-play-page .emg-q { font-size: 1.7rem; }
}

/* v1.5.1 — Penguin Leap · hand-drawn arctic expedition (all original SVG/CSS). */
.emg-stage-penguin-leap {
  overflow: hidden;
  border-color: rgba(162, 213, 240, .32);
  background:
    radial-gradient(900px 380px at 80% -10%, rgba(79,216,232,.18), transparent 70%),
    radial-gradient(760px 420px at 8% 0%, rgba(18,138,128,.55), transparent 75%),
    linear-gradient(168deg, #14223F 0%, #1A2E4A 48%, #171C36 78%, #0E1B42 100%);
  justify-content: flex-start !important;
  box-shadow: 0 24px 70px rgba(0,0,0,.36), inset 0 1px 0 rgba(227,251,255,.18), inset 0 0 90px rgba(14,33,68,.24);
}
.emg-stage-penguin-leap > .emg-progress { display: none; }
.emg-penguin-sky { position: absolute; inset: 0; pointer-events: none; z-index: 0; overflow: hidden; border-radius: inherit; }
.emg-penguin-sky::before {
  content: ""; position: absolute; inset: 0; opacity: .58;
  background-image:
    radial-gradient(circle, rgba(255,255,255,.9) 0 1px, transparent 1.5px),
    radial-gradient(circle, rgba(255,225,127,.7) 0 1px, transparent 1.6px),
    radial-gradient(circle, rgba(162,231,255,.65) 0 .6px, transparent 1.2px);
  background-size: 137px 137px, 211px 211px, 71px 71px;
  background-position: 12px 24px, 80px 90px, 30px 53px;
}
.emg-penguin-aurora {
  position: absolute; height: 270px; width: 94%; border-radius: 48% 52% 45% 55%;
  filter: blur(35px); opacity: .3; mix-blend-mode: screen;
  -webkit-mask-image: linear-gradient(180deg, transparent, #000 35%, transparent 88%);
  mask-image: linear-gradient(180deg, transparent, #000 35%, transparent 88%);
}
.emg-penguin-aurora::before, .emg-penguin-aurora::after { content: ""; position: absolute; inset: 20px 5% 30px; border-radius: inherit; background: inherit; transform: translateY(20px) rotate(3deg); opacity: .6; }
.emg-penguin-aurora::after { transform: translateY(-24px) rotate(-3deg); opacity: .4; }
.emg-penguin-aurora-one { top: -138px; left: -24%; background: linear-gradient(90deg, transparent, #4FE7DF 32%, #9674DF 64%, #F7BE28); transform: rotate(-10deg); animation: emg-penguin-aurora-drift 16s ease-in-out infinite alternate; }
.emg-penguin-aurora-two { top: -135px; right: -28%; background: linear-gradient(90deg, #A5C8FF, #4FD8E8, transparent 90%); transform: rotate(13deg); opacity: .24; animation: emg-penguin-aurora-drift-two 19s ease-in-out infinite alternate; }
.emg-penguin-landscape { position: absolute; inset: 0; width: 100%; height: 100%; }
.emg-penguin-race { position: relative; z-index: 1; display: flex; flex-direction: column; gap: clamp(16px, 2.5vh, 26px); width: 100%; max-width: 1300px; margin: 0 auto; flex: 1 1 auto; }

/* Four sculpted ice corridors, with a unique expedition badge for each racer. */
.emg-penguin-lanes { display: grid; gap: clamp(8px, 1.3vh, 13px); }
.emg-penguin-lane { --emg-racer-accent: #A5C8FF; display: grid; grid-template-columns: 96px minmax(0,1fr); align-items: center; gap: 13px; }
.emg-penguin-lane-you { --emg-racer-accent: #4FD8E8; }
.emg-penguin-lane-pip { --emg-racer-accent: #EE871E; }
.emg-penguin-lane-luna { --emg-racer-accent: #A5C8FF; }
.emg-penguin-lane-rocko { --emg-racer-accent: #35D18A; }
.emg-penguin-lane-name { display: grid; justify-items: end; gap: 5px; text-align: right; }
.emg-penguin-lane-name strong { display: inline-flex; align-items: center; gap: 6px; font-size: .77rem; letter-spacing: .08em; color: #E8E2F5; }
.emg-penguin-lane-name strong::before { content: ""; width: 7px; height: 7px; border-radius: 2px; transform: rotate(45deg); background: var(--emg-racer-accent); box-shadow: 0 0 10px var(--emg-racer-accent), inset 0 1px 0 #fff8; }
.emg-penguin-lane-name small { color: #A5B5CF; font-size: .55rem; letter-spacing: .035em; }
.emg-penguin-lane.is-you .emg-penguin-lane-name strong { color: #9DF3FF; font-size: .85rem; }
.emg-penguin-lane.is-you .emg-penguin-lane-name small { color: #FFE9A0; }
.emg-penguin-track {
  position: relative; height: 68px; margin-right: 3px;
  border: 1px solid rgba(191,236,252,.48); border-radius: 21px 34px 26px 19px;
  background:
    linear-gradient(174deg, transparent 55%, rgba(255,255,255,.12) 56%, transparent 58%) 0 0 / 170px 100%,
    linear-gradient(6deg, transparent 63%, rgba(94,190,233,.15) 65%, transparent 68%) 50px 0 / 200px 100%,
    radial-gradient(ellipse at 17% -90%, rgba(255,255,255,.4), transparent 65%),
    linear-gradient(172deg, rgba(124,214,240,.25), rgba(57,121,173,.13) 45%, rgba(33,63,110,.33));
  box-shadow: inset 0 2px 0 rgba(227,251,255,.2), inset 0 -7px 12px rgba(5,35,79,.24), 0 6px 0 rgba(39,82,131,.24), 0 10px 18px rgba(3,13,38,.16);
}
.emg-penguin-track::before {
  content: ""; position: absolute; inset: 4px 8px auto 11px; height: 10px; pointer-events: none;
  border-top: 1px solid rgba(238,253,255,.38); border-radius: 50%;
  background: linear-gradient(90deg, rgba(255,255,255,.09), transparent 45%, rgba(255,255,255,.09));
}
.emg-penguin-track::after {
  content: ""; position: absolute; inset: auto 15% 8px 7%; height: 5px; border-radius: 50%; pointer-events: none;
  background: linear-gradient(90deg, transparent, rgba(107,216,248,.18), transparent);
}
.emg-penguin-lane.is-you .emg-penguin-track { border-color: rgba(135,238,251,.8); box-shadow: inset 0 2px 0 #E8FCFF48, inset 0 -7px 12px #05234F40, 0 6px 0 #27528340, 0 0 22px #4FD8E817; }
.emg-penguin-ice-crack { position: absolute; pointer-events: none; width: 25px; height: 30px; opacity: .3; clip-path: polygon(46% 0, 57% 25%, 85% 17%, 64% 39%, 80% 54%, 56% 53%, 52% 100%, 42% 64%, 12% 86%, 30% 51%, 0 39%, 39% 33%); background: linear-gradient(120deg, transparent 46%, #C6F4FF 48% 53%, transparent 55%); }
.emg-penguin-ice-crack-one { left: 31%; top: 21px; transform: rotate(17deg); }
.emg-penguin-ice-crack-two { left: 68%; top: 13px; transform: rotate(-29deg) scale(.7); }
.emg-penguin-track-fill {
  position: absolute; inset: 3px auto 3px 3px; width: 0%; max-width: calc(100% - 6px);
  border-radius: 18px 30px 22px 15px; overflow: hidden;
  background: linear-gradient(100deg, rgba(79,216,232,.04), color-mix(in srgb, var(--emg-racer-accent) 18%, transparent));
  border-right: 1px solid color-mix(in srgb, var(--emg-racer-accent) 50%, transparent);
  transition: width .55s cubic-bezier(.2,.7,.3,1);
}
.emg-penguin-track-fill::after { content: ""; position: absolute; top: 0; right: 0; width: 50px; height: 100%; background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--emg-racer-accent) 22%, transparent)); }
.emg-penguin-lane.is-you .emg-penguin-track-fill { background: linear-gradient(90deg, rgba(79,216,232,.09), rgba(79,216,232,.19), rgba(247,190,40,.18)); }
.emg-penguin-finish { position: absolute; right: 9px; bottom: 3px; width: 29px; height: 49px; z-index: 1; filter: drop-shadow(0 3px 3px #112C5399); opacity: .95; }
.emg-penguin-finish svg { display: block; width: 100%; height: 100%; }
.emg-penguin-racer {
  --emg-race-progress: 0;
  position: absolute; top: 50%; left: calc((100% - 89px) * var(--emg-race-progress));
  z-index: 3; width: 76px; height: 76px; margin-left: 4px;
  transform: translateY(-53%) rotate(-2deg);
  transition: left .55s cubic-bezier(.2,.7,.3,1);
  filter: drop-shadow(0 5px 3px rgba(3,18,41,.3));
}
.emg-penguin-lane-you .emg-penguin-racer { width: 84px; height: 84px; margin-left: -4px; filter: drop-shadow(0 5px 3px rgba(3,18,41,.3)) drop-shadow(0 0 7px rgba(79,216,232,.16)); }
.emg-penguin-svg { display: block; width: 100%; height: 100%; overflow: visible; }
.emg-penguin-motion { position: absolute; inset: 47% -5px 3%; opacity: 0; pointer-events: none; border-radius: 50%; border: 2px solid #D2F8FF; box-shadow: 0 0 10px #9BEFFF; }
.emg-penguin-motion::before, .emg-penguin-motion::after { content: "✦"; position: absolute; color: #FFE9A0; font-size: 19px; text-shadow: 0 0 10px #F7BE28; }
.emg-penguin-motion::before { right: 1px; top: -24px; }
.emg-penguin-motion::after { left: 0; bottom: -11px; color: #B4F4FF; font-size: 25px; }
.emg-penguin-racer.is-leaping { animation: emg-penguin-leap .65s cubic-bezier(.25,.65,.3,1); }
.emg-penguin-racer.is-leaping .emg-penguin-motion { animation: emg-penguin-spark-burst .65s ease-out; }
.emg-penguin-racer.is-slipping { animation: emg-penguin-slip .75s ease; }
.emg-penguin-racer.is-slipping .emg-penguin-motion { animation: emg-penguin-snow-puff .7s ease-out; border-style: dashed; border-color: #B6D9F1; box-shadow: none; }
@keyframes emg-penguin-leap {
  0% { transform: translateY(-53%) rotate(-2deg) scale(1); }
  32% { transform: translateY(-130%) rotate(-12deg) scale(1.025); }
  56% { transform: translateY(-122%) rotate(8deg) scale(1.035); }
  82% { transform: translateY(-46%) rotate(3deg) scale(1.03,.95); }
  100% { transform: translateY(-53%) rotate(-2deg) scale(1); }
}
@keyframes emg-penguin-slip {
  0%,100% { transform: translateY(-53%) rotate(-2deg); }
  18% { transform: translateY(-47%) rotate(-24deg) scale(1.03,.97); }
  42% { transform: translateY(-54%) rotate(20deg); }
  66% { transform: translateY(-47%) rotate(-13deg); }
  84% { transform: translateY(-51%) rotate(7deg); }
}
@keyframes emg-penguin-spark-burst { 0%,15% { opacity: 0; transform: scale(.4); } 52% { opacity: .9; } 100% { opacity: 0; transform: scale(1.45); } }
@keyframes emg-penguin-snow-puff { 0% { opacity: 0; transform: scale(.7); } 30% { opacity: .8; transform: scale(1.1) rotate(9deg); } 100% { opacity: 0; transform: translateY(5px) scale(1.3) rotate(22deg); } }
@keyframes emg-penguin-aurora-drift { to { transform: translateX(6%) translateY(12px) rotate(-5deg) scaleY(1.12); } }
@keyframes emg-penguin-aurora-drift-two { to { transform: translateX(-5%) translateY(8px) rotate(8deg) scaleY(1.15); } }

/* An expedition mission plaque, with dimensional gold trim and icy glass. */
.emg-penguin-board { position: relative; display: flex; flex-direction: column; gap: clamp(12px, 1.7vh, 18px); margin-top: auto; }
.emg-penguin-board::before { content: ""; position: absolute; z-index: -1; inset: 65px -25px -28px; border-radius: 50%; background: radial-gradient(ellipse, rgba(83,194,225,.13), transparent 70%); }
.emg-penguin-expression {
  position: relative; isolation: isolate; text-align: center; padding: 26px clamp(16px, 3vw, 30px) 13px;
  border-radius: 21px 21px 17px 17px;
  background: radial-gradient(ellipse at 50% 100%, rgba(83,212,238,.1), transparent 62%), linear-gradient(145deg, rgba(18,90,112,.89), rgba(14,27,66,.94) 67%, rgba(26,39,65,.9));
  border: 1px solid rgba(255,222,129,.64);
  box-shadow: 0 5px 0 #58324E, 0 12px 27px rgba(10,6,24,.32), inset 0 1px 0 rgba(255,248,204,.27), inset 0 0 0 5px rgba(13,23,50,.19);
  transition: border-color .18s, box-shadow .18s;
}
.emg-penguin-expression::before {
  content: "✦  MULTIPLICATION MISSION  ✦"; display: block; position: absolute; top: 0; left: 25px; right: 25px;
  color: #B9E9EF; font-weight: 700; letter-spacing: .19em; font-size: .54rem; line-height: 16px;
  border-bottom: 1px solid rgba(165,226,240,.12);
}
.emg-penguin-expression::after { content: ""; position: absolute; z-index: -1; inset: 5px; border: 1px solid rgba(210,232,249,.08); border-radius: 15px; pointer-events: none; }
.emg-penguin-expression > span {
  display: block; font-size: clamp(2.35rem, 4.5vw, 3.6rem); font-weight: 800; letter-spacing: .025em;
  line-height: 1.1; color: #FFE49A; text-shadow: 0 2px 0 #6D3E38, 0 5px 16px rgba(247,190,40,.18);
  font-variant-numeric: tabular-nums;
}
.emg-penguin-expression small { display: block; margin-top: 8px; color: #BBD4E5; font-size: .7rem; letter-spacing: .035em; }
.emg-penguin-expression.is-new > span { animation: emg-penguin-fact-in .35s ease-out; }
.emg-penguin-expression.is-correct { border-color: #7FEBB4; box-shadow: 0 5px 0 #245B56, 0 0 32px #35D18A26, inset 0 1px 0 #D6FFE740; animation: emg-penguin-board-win .55s ease; }
.emg-penguin-expression.is-wrong { border-color: #F1A1B3; box-shadow: 0 5px 0 #65314E, 0 0 26px #FF5F6D20, inset 0 1px 0 #FFD6DD30; animation: emg-wrong-shake .4s ease; }
@keyframes emg-penguin-fact-in { from { opacity: .2; transform: translateY(-5px) scale(.98); filter: blur(2px); } to { opacity: 1; transform: none; filter: none; } }
@keyframes emg-penguin-board-win { 50% { transform: translateY(-3px); } }

/* Floating, beveled glaciers with snow-capped glass surfaces and key crystals. */
.emg-penguin-floes { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: clamp(12px, 1.7vw, 24px); padding: 3px 4px 10px; }
.emg-penguin-floe {
  --emg-floe-tilt: -1deg;
  position: relative; isolation: isolate; min-height: 115px; cursor: pointer; padding: 17px 24px 15px;
  display: flex; align-items: center; justify-content: center;
  border-radius: 36% 64% 43% 57% / 43% 39% 61% 57%;
  border: 1.5px solid rgba(222,252,255,.92);
  background:
    linear-gradient(133deg, transparent 35%, rgba(239,254,255,.26) 36% 39%, transparent 40%) 0 0 / 100% 100%,
    radial-gradient(ellipse at 40% 0%, #FFFFFF 0%, rgba(230,252,255,.87) 20%, transparent 49%),
    radial-gradient(ellipse at 72% 95%, rgba(15,94,149,.45), transparent 53%),
    linear-gradient(164deg, #C6F5FA 0%, #7CD9EB 37%, #54B4D5 70%, #287BA9 100%);
  color: #082C50;
  box-shadow: 0 4px 0 #ACF0F9, 0 10px 0 #20638F, 0 14px 0 #103B67, 0 20px 19px rgba(2,16,49,.35), inset 0 3px 4px #FFFFFFD9, inset 0 -9px 12px #0D598850, inset 4px 0 9px #FFFFFF30;
  font: inherit; transform: rotate(var(--emg-floe-tilt));
  transition: transform .18s ease, box-shadow .18s ease, filter .18s ease;
}
.emg-penguin-floe-2 { --emg-floe-tilt: 1.1deg; border-radius: 58% 42% 55% 45% / 36% 56% 44% 64%; }
.emg-penguin-floe-3 { --emg-floe-tilt: -.7deg; border-radius: 45% 55% 36% 64% / 60% 42% 58% 40%; }
.emg-penguin-floe-4 { --emg-floe-tilt: 1.3deg; border-radius: 52% 48% 61% 39% / 40% 60% 40% 60%; }
.emg-penguin-floe::before {
  content: ""; position: absolute; z-index: -1; pointer-events: none; inset: 6px 9px auto; height: 29%; border-radius: 50%;
  border-top: 1px solid rgba(255,255,255,.8);
  background: radial-gradient(ellipse at 40% 0, rgba(255,255,255,.53), transparent 70%);
}
.emg-penguin-floe::after {
  content: ""; position: absolute; z-index: -1; pointer-events: none; bottom: -12px; left: 17%; right: 11%; height: 18px;
  background: linear-gradient(172deg, #56B7D4, #174B80); clip-path: polygon(0 0,100% 0,94% 39%,80% 31%,71% 100%,56% 54%,42% 83%,26% 43%,10% 54%);
  opacity: .8;
}
.emg-penguin-floe-glare { position: absolute; pointer-events: none; inset: 0; border-radius: inherit; overflow: hidden; }
.emg-penguin-floe-glare::before { content: ""; position: absolute; left: 11%; top: 20%; width: 5px; height: 37%; border-radius: 100%; background: linear-gradient(#FFFFFFA1, transparent); transform: rotate(27deg); }
.emg-penguin-floe-glare::after { content: ""; position: absolute; right: 16%; bottom: 12%; width: 40%; height: 20%; border-bottom: 2px solid #BAF3FF45; border-radius: 50%; transform: rotate(-13deg); }
.emg-penguin-floe strong { position: relative; font-size: clamp(2rem, 3.5vw, 2.8rem); font-weight: 800; letter-spacing: -.045em; text-shadow: 0 1px 0 #FFFFFFB0, 0 3px 5px #19618D30; font-variant-numeric: tabular-nums; }
.emg-penguin-floe-key {
  position: absolute; top: 9px; left: clamp(11px, 1.4vw, 20px); transform: rotate(-7deg);
  width: 31px; height: 36px; display: flex; flex-direction: column; align-items: center; justify-content: center;
  border-radius: 9px 9px 12px 12px; background: linear-gradient(145deg,#FFF0AD,#F7BE28 65%,#A57328); color: #38203D;
  box-shadow: 0 3px 0 #826044, 0 5px 7px #18578455, inset 0 1px 0 #fff9d4;
  border: 1px solid #fff0a9;
}
.emg-penguin-floe-key b { font-size: 1.03rem; line-height: 1; }
.emg-penguin-floe-key small { font-size: .39rem; font-weight: 800; letter-spacing: .08em; margin-top: 3px; opacity: .68; }
.emg-penguin-floe-sparkle { position: absolute; right: 15%; top: 13%; color: #F4FEFF; opacity: .85; font-size: 1.4rem; text-shadow: 0 0 9px #fff; transform: rotate(15deg); }
.emg-penguin-floe:hover:not(:disabled) { transform: translateY(-8px) rotate(var(--emg-floe-tilt)) scale(1.025); filter: brightness(1.045); box-shadow: 0 4px 0 #C9FBFF, 0 10px 0 #2A78A1, 0 14px 0 #164B78, 0 26px 24px rgba(2,16,49,.43), 0 0 0 4px #FFE9A038, 0 0 23px #7AE9F62E, inset 0 3px 4px #FFFFFFE0, inset 0 -9px 12px #0D598850; }
.emg-penguin-floe:active:not(:disabled) { transform: translateY(3px) rotate(var(--emg-floe-tilt)); box-shadow: 0 2px 0 #ACF0F9, 0 5px 0 #20638F, 0 8px 0 #103B67, 0 12px 12px #02103155, inset 0 3px 4px #FFFFFFC0; }
.emg-penguin-floe:disabled { cursor: default; }
.emg-penguin-floe.is-correct {
  border-color: #DAFFE5; filter: none;
  background: radial-gradient(ellipse at 40% 0, #F5FFF2 0%, #D1FFE399 25%, transparent 50%), linear-gradient(160deg,#C7FFDF,#63DDAD 52%,#269E75);
  box-shadow: 0 4px 0 #9DFFC3, 0 10px 0 #208C65, 0 14px 0 #175B52, 0 20px 24px #031D344D, 0 0 23px #35D18A40, inset 0 3px 4px #FFFFFFB0;
  color: #0A4C3F; animation: emg-penguin-floe-correct .55s ease;
}
.emg-penguin-floe.is-wrong {
  border-color: #FFDBE4;
  background: radial-gradient(ellipse at 40% 0, #FFF5F0 0%, #FFE4E488 25%, transparent 50%), linear-gradient(160deg,#FFD0D8,#F3899C 52%,#B24570);
  box-shadow: 0 4px 0 #FFB9C8, 0 10px 0 #B14A68, 0 14px 0 #733050, 0 20px 20px #310D2455, inset 0 3px 4px #FFFFFF90;
  color: #5C1642; animation: emg-wrong-shake .4s ease;
}
.emg-penguin-floe.is-correct .emg-penguin-floe-key { background: linear-gradient(145deg,#EEFFE4,#68D899); border-color: #E3FFE8; }
.emg-penguin-floe.is-wrong .emg-penguin-floe-key { background: linear-gradient(145deg,#FFE9B6,#FF96AB); border-color: #FFEBE9; }
@keyframes emg-penguin-floe-correct { 50% { transform: translateY(-11px) scale(1.025); } }
.emg-penguin-feedback { min-height: 40px; display: flex; align-items: center; justify-content: center; gap: 9px; padding: 8px 13px; text-align: center; color: #C6D3E7; font-size: .81rem; font-weight: 650; line-height: 1.45; }
.emg-penguin-feedback-badge { flex: 0 0 auto; display: grid; place-items: center; width: 25px; height: 25px; border-radius: 50%; color: #E8DABC; background: #3B36594D; border: 1px solid #EEFBFF21; font-size: .85rem; }
.emg-penguin-feedback.is-correct { color: #A8F7C9; }
.emg-penguin-feedback.is-correct .emg-penguin-feedback-badge { color: #FFF2A1; background: #35D18A2E; border-color: #7EF0AD70; box-shadow: 0 0 15px #35D18A26; animation: emg-penguin-spark-burst .6s ease; }
.emg-penguin-feedback.is-wrong { color: #FFC5D2; }
.emg-penguin-feedback.is-wrong .emg-penguin-feedback-badge { color: #C6ECFF; background: #54B4D52A; border-color: #B9E4FF50; }
.emg-stat-lives strong { color: #FF9CAC; letter-spacing: .12em; text-shadow: 0 0 10px #FF5F6D26; }

/* Difficulty picker inside the shared start/finish overlay. */
.emg-penguin-difficulty { display: grid; grid-template-columns: repeat(3,1fr); gap: 10px; margin: 0 0 22px; }
.emg-penguin-level { display: grid; gap: 5px; padding: 13px 8px; cursor: pointer; border-radius: 14px; border: 1px solid rgba(120,214,200,.25); background: rgba(22,40,92,.85); color: var(--emg-text); font: inherit; transition: border-color .18s, background .18s, transform .18s; }
.emg-penguin-level strong { font-size: .95rem; }
.emg-penguin-level span { font-size: .62rem; color: #9AABC0; line-height: 1.45; }
.emg-penguin-level:hover { transform: translateY(-2px); border-color: rgba(79,216,232,.5); }
.emg-penguin-level.is-selected { border-color: #4FD8E8; background: linear-gradient(150deg,rgba(79,216,232,.2),rgba(18,138,128,.4)); box-shadow: 0 0 0 2px rgba(79,216,232,.18); }
.emg-penguin-level.is-selected strong { color: #8FEAF5; }

@media (min-width: 1600px) {
  .emg-penguin-track { height: 76px; }
  .emg-penguin-racer { width: 84px; height: 84px; }
  .emg-penguin-lane-you .emg-penguin-racer { width: 90px; height: 90px; }
  .emg-penguin-floe { min-height: 125px; }
}
@media (max-width: 760px) {
  .emg-stage-penguin-leap { padding: 22px 12px 17px; }
  .emg-penguin-race { gap: 19px; }
  .emg-penguin-lanes { gap: 9px; }
  .emg-penguin-floes { grid-template-columns: repeat(2,minmax(0,1fr)); gap: 20px 13px; padding-inline: 2px; }
  .emg-penguin-floe { min-height: 92px; }
  .emg-penguin-floe strong { font-size: 2.1rem; }
  .emg-penguin-lane { grid-template-columns: 55px minmax(0,1fr); gap: 7px; }
  .emg-penguin-lane-name strong { font-size: .64rem; letter-spacing: .02em; }
  .emg-penguin-lane-name small { font-size: .46rem; max-width: 55px; }
  .emg-penguin-lane-name strong::before { width: 5px; height: 5px; }
  .emg-penguin-racer { width: 57px; height: 57px; margin-left: 4px; }
  .emg-penguin-lane-you .emg-penguin-racer { width: 64px; height: 64px; margin-left: -2px; }
  .emg-penguin-track { height: 49px; margin-right: 0; border-radius: 15px 23px 17px 13px; }
  .emg-penguin-finish { width: 24px; height: 41px; right: 7px; }
  .emg-penguin-expression { padding: 25px 12px 12px; }
  .emg-penguin-expression::before { left: 15px; right: 15px; font-size: .45rem; letter-spacing: .13em; }
  .emg-penguin-expression > span { font-size: 2.55rem; }
  .emg-penguin-expression small { font-size: .63rem; }
  .emg-penguin-feedback { font-size: .74rem; }
  .emg-penguin-difficulty { grid-template-columns: 1fr; }
  .emg-penguin-level { grid-template-columns: auto 1fr; align-items: center; text-align: left; padding: 10px 14px; }
  .emg-penguin-landscape { width: 170%; left: -35%; }
}
@media (max-width: 390px) {
  .emg-penguin-lane { grid-template-columns: 43px minmax(0,1fr); gap: 5px; }
  .emg-penguin-lane-name small { display: none; }
  .emg-penguin-lane-name strong { font-size: .57rem; }
  .emg-penguin-racer { width: 51px; height: 51px; }
  .emg-penguin-lane-you .emg-penguin-racer { width: 58px; height: 58px; }
  .emg-penguin-track { height: 45px; }
  .emg-penguin-floe-key { left: 11px; top: 6px; width: 27px; height: 32px; }
  .emg-penguin-floe strong { font-size: 1.9rem; }
}

/* The original bundled explorer welcomes players instead of a stock emoji. */
.emg-stage-penguin-leap .emg-overlay-card:has(.emg-overlay-illustration svg) { max-width: 540px; }
.emg-stage-penguin-leap .emg-overlay-illustration:has(.emg-penguin-overlay-art) { width: 120px; height: 103px; margin-bottom: 8px; border: 0; border-radius: 0; background: none; box-shadow: none; transform: none; overflow: visible; }
.emg-stage-penguin-leap .emg-overlay-illustration:has(.emg-penguin-overlay-art) > .emg-penguin-overlay-art { display: block; width: 100%; height: 100%; position: relative; }
.emg-penguin-overlay-art svg { width: 100%; height: 100%; filter: drop-shadow(0 8px 8px rgba(5,10,35,.5)); }
.emg-penguin-overlay-star { position: absolute; right: -4px; top: 5px; font-style: normal; font-size: 27px; color: #FFE9A0; text-shadow: 0 0 18px #F7BE28; }
.emg-penguin-overlay-snow { position: absolute; z-index: -1; width: 112px; height: 25px; bottom: 5px; left: 4px; border: 1px solid #B5E9F544; border-radius: 50%; background: radial-gradient(ellipse,#8AE1F429,transparent 70%); box-shadow: 0 10px 23px #06122C88; }


/* WAVE 0 / WIP (1.5.4) — Q33 explanation feedback region */
.emg-explain {
  margin: 18px auto 0;
  max-width: 850px;
  padding: 14px 18px;
  border-radius: 14px;
  border: 1px solid rgba(120, 214, 200, .28);
  background: rgba(18, 138, 128, .12);
  color: var(--emg-text);
  font-size: .92rem;
  line-height: 1.55;
}
.emg-explain[hidden] { display: none !important; }
.emg-explain::before {
  content: "Why";
  display: inline-block;
  margin-right: 10px;
  padding: 2px 8px;
  border-radius: 999px;
  background: rgba(247, 190, 40, .18);
  color: var(--emg-accent);
  font-size: .68rem;
  font-weight: 750;
  letter-spacing: .06em;
  text-transform: uppercase;
  vertical-align: middle;
}


/* WAVE 1 — Self-Correcting Deck + studio mixed cards */
.emg-deck-wrap { max-width: 850px; margin: 0 auto; }
.emg-deck-tip { color: var(--emg-muted); font-size: .84rem; margin: 0 0 18px; text-align: center; }
.emg-deck-tf { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; max-width: 520px; margin: 0 auto; }
.emg-deck-tf-btn { justify-content: center; min-height: 64px; font-size: 1.15rem; }
.emg-deck-input { display: grid; gap: 14px; max-width: 520px; margin: 18px auto 0; }
.emg-deck-submit { min-height: 48px; }
.emg-deck-multi .emg-choice.is-picked { border-color: var(--emg-accent); box-shadow: 0 0 0 3px rgba(247,190,40,.2); }
.emg-deck-lesson { text-align: center; padding: 28px 22px; border-radius: 22px; border: 1px solid var(--emg-border-strong); background: linear-gradient(155deg, rgba(18,138,128,.18), rgba(22,40,92,.9)); max-width: 640px; margin: 0 auto; }
.emg-deck-lesson-art { font-size: 2rem; margin-bottom: 10px; color: var(--emg-accent); }
.emg-deck-lesson h3 { font-family: var(--emg-font-heading); font-size: 1.7rem; margin: 0 0 12px; }
.emg-deck-lesson p { color: var(--emg-muted); line-height: 1.7; margin: 0 0 22px; }
.emg-mixed-card .emg-mixed-body { display: grid; gap: 12px; margin-top: 12px; }
.emg-mixed-choice-row { display: flex; gap: 10px; align-items: center; }
.emg-mixed-choice-row input[type="text"] { flex: 1; }
.emg-mixed-choice-row input[type="checkbox"] { width: 20px; height: 20px; }
.emg-sort-buckets { --emg-group-count: 2; }
@media (max-width: 720px) {
  .emg-deck-tf { grid-template-columns: 1fr; }
  .emg-sort-buckets { grid-template-columns: 1fr !important; }
}
@media (min-width: 721px) and (max-width: 980px) {
  .emg-sort-buckets[style*="--emg-group-count: 4"],
  .emg-sort-buckets[style*="--emg-group-count:4"] { grid-template-columns: 1fr 1fr; }
}


/* Magnet Zap (M04) */
.emg-stage-magnet-zap{background:linear-gradient(180deg,#0E1B42 0%,#16285C 55%,#123A3A 100%);color:#fff}
.emg-zap-layout{display:flex;flex-direction:column;gap:14px;padding:8px 4px 18px}
.emg-zap-board{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;min-height:320px}
.emg-zap-hole{appearance:none;border:0;background:transparent;padding:0;cursor:pointer;position:relative;min-height:140px;display:flex;align-items:flex-end;justify-content:center}
.emg-zap-well{width:86%;height:34px;border-radius:50%;background:#09152F;box-shadow:inset 0 8px 16px #0006}
.emg-zap-mole{position:absolute;bottom:22px;left:50%;transform:translateX(-50%) translateY(18px) scale(.92);opacity:0;transition:transform .18s,opacity .18s;display:flex;flex-direction:column;align-items:center;gap:6px;width:90%}
.emg-zap-mole svg{width:72px;height:80px}
.emg-zap-mole strong{font-family:Fredoka,sans-serif;font-size:13px;background:#fff;color:#16285C;padding:6px 10px;border-radius:8px;max-width:100%;line-height:1.25}
.emg-zap-hole.is-up .emg-zap-mole{opacity:1;transform:translateX(-50%) translateY(0) scale(1)}
.emg-zap-hole.is-correct .emg-zap-mole strong{background:#F7BE28}
.emg-zap-hole.is-wrong .emg-zap-mole{filter:grayscale(.2);opacity:.75}
.emg-stage-magnet-zap .emg-q{color:#fff}
.emg-stage-magnet-zap .emg-question-kicker{color:#78D6C8}

/* Rapid Sort (M21) */
.emg-rapid-layout{display:flex;flex-direction:column;align-items:center;gap:22px;padding:12px 0 20px}
.emg-rapid-card{min-width:min(420px,92%);min-height:88px;display:flex;align-items:center;justify-content:center;text-align:center;padding:18px 22px;border-radius:16px;background:#fff;border:2px solid #DCE5EC;font-family:Fredoka,sans-serif;font-size:clamp(20px,3vw,28px);color:#16285C;box-shadow:0 10px 0 #dcebe8}
.emg-rapid-card.is-fly{animation:emg-rapid-in .35s ease-out}
.emg-rapid-card.is-done{background:#E9F6F4;border-color:#78D6C8}
@keyframes emg-rapid-in{from{transform:translateY(-24px) scale(.96);opacity:0}to{transform:none;opacity:1}}
.emg-rapid-buckets{display:flex;flex-wrap:wrap;gap:12px;justify-content:center;width:100%}
.emg-rapid-bucket{appearance:none;border:2px solid #128A80;background:#E9F6F4;color:#0B7068;font-family:Fredoka,sans-serif;font-size:16px;font-weight:600;padding:16px 22px;border-radius:12px;cursor:pointer;min-width:120px}
.emg-rapid-bucket:hover,.emg-rapid-bucket:focus-visible{background:#128A80;color:#fff}

/* Deck extras */
.emg-deck-cloze-preview{font-size:18px;line-height:1.55;margin:0 0 12px;color:#16285C}
.emg-deck-order{display:flex;flex-direction:column;gap:12px}
.emg-deck-order-chosen{display:flex;flex-wrap:wrap;gap:8px;min-height:48px;padding:8px;border:1.5px dashed #B8DED8;border-radius:10px;background:#F1F6F9}
.emg-deck-order-pool{margin-top:4px}


/* Discovery Tiles (M08) */
.emg-disc-board{display:grid;grid-template-columns:repeat(auto-fill,minmax(148px,1fr));gap:14px;padding:8px 2px 18px}
.emg-disc-tile{appearance:none;border:0;background:transparent;padding:0;cursor:pointer;perspective:900px;min-height:168px}
.emg-disc-inner{position:relative;display:block;width:100%;height:168px;transform-style:preserve-3d;transition:transform .35s ease}
.emg-disc-tile.is-flipped .emg-disc-inner{transform:rotateY(180deg)}
.emg-disc-face{position:absolute;inset:0;backface-visibility:hidden;border-radius:16px;border:2px solid #DCE5EC;padding:14px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;text-align:center;box-shadow:0 10px 0 #dcebe8}
.emg-disc-front{background:#fff;color:#16285C}
.emg-disc-front svg{width:44px;height:44px}
.emg-disc-front strong{font-family:Fredoka,sans-serif;font-size:15px;line-height:1.25}
.emg-disc-front small{color:#7A8BA0;font-size:11px}
.emg-disc-back{background:linear-gradient(160deg,#128A80,#16285C);color:#fff;transform:rotateY(180deg);border-color:#0B7068}
.emg-disc-back small{opacity:.85;font-size:11px;letter-spacing:.04em;text-transform:uppercase}
.emg-disc-back strong{font-family:Fredoka,sans-serif;font-size:14px;line-height:1.35}
.emg-disc-tile:focus-visible{outline:3px solid #F7BE28;outline-offset:4px;border-radius:16px}
@media (max-width:360px){.emg-disc-board{grid-template-columns:1fr 1fr;gap:10px}.emg-disc-inner,.emg-disc-tile{min-height:150px}.emg-disc-inner{height:150px}}

/* Mystery Crates (M10) */
.emg-crate-board{display:grid;grid-template-columns:repeat(auto-fill,minmax(120px,1fr));gap:14px;padding:8px 2px 12px}
.emg-crate{appearance:none;border:2px solid #EE871E55;background:linear-gradient(180deg,#FFF7EC,#FFE1B5);border-radius:16px;padding:12px 8px;cursor:pointer;display:flex;flex-direction:column;align-items:center;gap:6px;min-height:120px;color:#16285C;font-family:Fredoka,sans-serif}
.emg-crate svg{width:72px;height:64px}
.emg-crate strong{font-size:13px}
.emg-crate.is-open,.emg-crate.is-solved{border-color:#128A80;background:#E9F6F4}
.emg-crate.is-solved{opacity:.85;cursor:default}
.emg-crate:focus-visible{outline:3px solid #F7BE28;outline-offset:3px}
.emg-crate-panel{margin:8px 0 16px;padding:16px;border-radius:16px;background:#fff;border:2px solid #DCE5EC;box-shadow:0 10px 0 #dcebe8}
.emg-crate-panel.is-miss{animation:emg-crate-shake .35s ease}
@keyframes emg-crate-shake{0%,100%{transform:translateX(0)}25%{transform:translateX(-6px)}75%{transform:translateX(6px)}}
.emg-crate-prompt{font-family:Fredoka,sans-serif;font-size:clamp(18px,3vw,22px);color:#16285C;margin-bottom:12px;line-height:1.35}
.emg-crate-choices{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.emg-crate-choice{appearance:none;border:2px solid #128A80;background:#E9F6F4;color:#0B7068;font-family:Fredoka,sans-serif;font-size:15px;font-weight:600;padding:14px 12px;border-radius:12px;cursor:pointer;min-height:48px;text-align:center}
.emg-crate-choice:hover,.emg-crate-choice:focus-visible{background:#128A80;color:#fff}
@media (max-width:360px){.emg-crate-choices{grid-template-columns:1fr}.emg-crate-board{grid-template-columns:1fr 1fr}}

/* Match Sweep (M11) — larger, clearer answer cards */
.emg-sweep-layout{display:flex;flex-direction:column;gap:22px;padding:10px 6px 22px;max-width:1100px;margin:0 auto;width:100%}
.emg-sweep-actions{display:flex;justify-content:center;margin-top:4px;min-height:56px}
.emg-sweep-next{min-width:min(280px,100%);min-height:56px;font-family:Fredoka,Poppins,sans-serif;font-size:1.15rem;font-weight:700;padding:14px 28px;border-radius:16px}
.emg-sweep-next[hidden]{display:none!important}
.emg-sweep-chip:disabled{opacity:.55;cursor:default;transform:none;pointer-events:none}
.emg-stage-match-sweep .emg-q{font-family:Fredoka,sans-serif;font-size:clamp(2.2rem,5vw,3.2rem);line-height:1.15;letter-spacing:-.03em;color:#fff;text-shadow:0 2px 12px rgba(0,0,0,.25)}
.emg-stage-match-sweep .emg-question-kicker{color:#78D6C8;font-size:.78rem;margin-bottom:10px}
.emg-sweep-board{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,280px),1fr));gap:16px}
.emg-sweep-chip{appearance:none;border:3px solid #128A80;background:#fff;color:#16285C;font-family:Fredoka,Poppins,sans-serif;font-size:clamp(1.05rem,2.2vw,1.35rem);font-weight:700;line-height:1.35;padding:22px 20px;border-radius:18px;cursor:pointer;min-height:108px;display:flex;align-items:center;justify-content:center;text-align:center;box-shadow:0 10px 0 #78D6C8;transition:transform .15s ease,background .15s,border-color .15s,box-shadow .15s}
.emg-sweep-chip:hover,.emg-sweep-chip:focus-visible{border-color:#F7BE28;background:#E9F6F4;transform:translateY(-2px);box-shadow:0 12px 0 #128A80;outline:none}
.emg-sweep-chip:active{transform:translateY(2px);box-shadow:0 6px 0 #78D6C8}
.emg-sweep-chip.is-correct{background:#F7BE28;border-color:#D9A31A;color:#16285C;box-shadow:0 10px 0 #D9A31A}
.emg-sweep-chip.is-miss{background:#ffecee;border-color:#ff5f6d;box-shadow:0 10px 0 #ffacb4;animation:emg-crate-shake .35s ease}
@media (max-width:640px){
  .emg-sweep-board{grid-template-columns:1fr;gap:14px}
  .emg-sweep-chip{min-height:96px;padding:20px 18px;font-size:1.12rem}
  .emg-stage-match-sweep .emg-q{font-size:clamp(1.85rem,8vw,2.4rem)}
}
@media (min-width:641px) and (max-width:900px){
  .emg-sweep-board{grid-template-columns:repeat(2,minmax(0,1fr))}
}

/* Science practice packs on hub */
.emg-science-packs { margin: 42px 0 18px; }
.emg-packs-intro { margin: -8px 0 18px; color: #9AABC0; font-size: .95rem; max-width: 52rem; }
.emg-pack-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 14px; }
.emg-pack-card { display: flex; align-items: center; gap: 12px; padding: 14px 16px; border-radius: 16px; border: 1px solid rgba(120,214,200,.22); background: linear-gradient(180deg, rgba(26,48,88,.92), rgba(22,40,92,.88)); text-decoration: none; color: #F4F7FB; box-shadow: 0 8px 18px rgba(0,0,0,.12); transition: transform .18s, border-color .18s, box-shadow .18s; }
.emg-pack-card:hover, .emg-pack-card:focus-visible { transform: translateY(-2px); border-color: #F7BE28; box-shadow: 0 12px 24px rgba(0,0,0,.16); outline: none; }
.emg-pack-icon { width: 42px; height: 42px; border-radius: 12px; display: grid; place-items: center; background: rgba(18,138,128,.22); border: 1px solid rgba(120,214,200,.28); font-size: 1.25rem; flex: 0 0 auto; }
.emg-pack-body { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1; }
.emg-pack-body strong { font-family: Fredoka, Poppins, sans-serif; font-size: 1rem; letter-spacing: -.02em; }
.emg-pack-body small { color: #9AABC0; font-size: .78rem; line-height: 1.35; }
.emg-pack-go { color: #F7BE28; font-weight: 700; font-size: .85rem; white-space: nowrap; }
@media (max-width: 640px) {
  .emg-pack-grid { grid-template-columns: 1fr; }
}

/* Template switcher — incompatible (disabled) */
.emg-switch-link.is-disabled,
.emg-studio-switch-btn.is-disabled {
  opacity: .45;
  cursor: not-allowed;
  pointer-events: none;
  filter: grayscale(.35);
  position: relative;
}
.emg-switch-reason {
  display: block;
  font-size: .58rem;
  font-weight: 600;
  color: #F7BE28;
  max-width: 140px;
  line-height: 1.25;
  margin-top: 2px;
}
.emg-studio-switcher { margin: 0 0 18px; background: rgba(22,40,92,.08); border-color: #DCE5EC; }
.emg-studio-switcher strong { color: #16285C; }
.emg-studio-switcher small { color: #5C6782; }
.emg-studio-switch-grid { display: flex; flex-wrap: wrap; gap: 7px; justify-content: flex-end; flex: 1; }
.emg-studio-switch-btn { appearance: none; background: #fff; border: 1px solid #DCE5EC; color: #16285C; cursor: pointer; }
.emg-studio-switch-btn.is-active { background: linear-gradient(135deg, rgba(247,190,40,.35), rgba(18,138,128,.22)); border-color: #F7BE28; }
.emg-play-page .emg-switch-link.is-disabled { pointer-events: auto; } /* allow title tooltip on play */
.emg-play-page .emg-switch-link.is-disabled { cursor: help; }

/* M13 Flash Recall */
.emg-recall-layout { display: flex; flex-direction: column; gap: 14px; padding: 8px 4px 18px; min-height: 280px; }
.emg-recall-belt { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; align-items: center; min-height: 160px; padding: 12px; border-radius: 18px; background: linear-gradient(180deg, #0E1B42, #16285C); border: 2px solid #128A8055; overflow: hidden; position: relative; }
.emg-recall-tile { display: flex; flex-direction: column; align-items: center; gap: 8px; background: #fff; border-radius: 14px; padding: 12px 14px; min-width: 110px; box-shadow: 0 8px 0 #0a1430; color: #16285C; }
.emg-recall-tile svg { width: 48px; height: 48px; }
.emg-recall-tile strong { font-family: Fredoka, sans-serif; font-size: 14px; text-align: center; line-height: 1.25; }
.emg-recall-chip { appearance: none; border: 2px solid #78D6C8; background: #fff; border-radius: 14px; padding: 10px 12px; min-width: 120px; cursor: pointer; display: flex; flex-direction: column; align-items: center; gap: 6px; color: #16285C; font-family: Fredoka, sans-serif; transform: translateX(120%) scale(.9); opacity: 0; transition: transform 4s linear, opacity .25s; box-shadow: 0 8px 0 #dcebe8; }
.emg-recall-chip.is-drift { transform: translateX(-120%) scale(1); opacity: 1; }
.emg-recall-chip svg { width: 40px; height: 40px; }
.emg-recall-chip strong { font-size: 13px; line-height: 1.25; text-align: center; }
.emg-recall-chip.is-correct { background: #F7BE28; border-color: #D9A31A; }
.emg-recall-chip.is-miss { background: #ffecee; border-color: #ff5f6d; }
.emg-recall-feedback { text-align: center; color: #5C6782; font-size: 14px; font-weight: 600; min-height: 1.4em; }
.emg-recall-layout.is-memorize .emg-recall-belt { background: linear-gradient(160deg, #128A80, #16285C); }

/* M14 Comet Catch */
.emg-comet-layout { display: flex; flex-direction: column; gap: 12px; padding: 8px 4px 18px; }
.emg-comet-sky { position: relative; min-height: 280px; border-radius: 18px; overflow: hidden; background: radial-gradient(ellipse at top, #1A3A6E, #0E1B42 70%); border: 2px solid #128A8055; }
.emg-comet { appearance: none; border: 0; background: transparent; position: absolute; left: 105%; top: calc(var(--emg-comet-lane, 1) * 28%); display: flex; align-items: center; gap: 8px; cursor: pointer; padding: 6px 10px; border-radius: 999px; color: #fff; font-family: Fredoka, sans-serif; transform: translateX(0); opacity: 0; transition: none; animation: none; }
.emg-comet.is-fly { animation: emg-comet-drift 4.6s linear forwards; animation-delay: var(--emg-comet-delay, 0s); }
@keyframes emg-comet-drift {
  0% { left: 105%; opacity: 0; transform: translateY(0) rotate(-6deg); }
  8% { opacity: 1; }
  100% { left: -25%; opacity: 1; transform: translateY(12px) rotate(4deg); }
}
.emg-comet svg { width: 72px; height: 40px; flex-shrink: 0; }
.emg-comet strong { background: #ffffffee; color: #16285C; padding: 8px 12px; border-radius: 10px; font-size: 14px; line-height: 1.25; max-width: 180px; text-align: center; box-shadow: 0 4px 0 #0a143055; }
.emg-comet.is-correct strong { background: #F7BE28; }
.emg-comet.is-miss strong { background: #ffecee; color: #a11; }
.emg-comet-feedback { text-align: center; color: #5C6782; font-size: 14px; font-weight: 600; min-height: 1.4em; }
@media (max-width: 360px) {
  .emg-comet-sky { min-height: 240px; }
  .emg-recall-chip { min-width: 96px; }
  .emg-switch-reason { max-width: 100%; }
}


/* —— Image matching (1.6.0) —— */
.emg-pair-image {
  margin-top: 14px;
  padding: 14px 16px;
  border-radius: 14px;
  border: 1px dashed rgba(120,214,200,.35);
  background: rgba(18,138,128,.08);
  display: grid;
  gap: 10px;
}
.emg-pair-image-label { font-size: .78rem; letter-spacing: .04em; text-transform: uppercase; color: #78D6C8; }
.emg-pair-image-tip { margin: 0; color: #9AABC0; font-size: .78rem; line-height: 1.45; }
.emg-pair-image-preview {
  min-height: 96px;
  border-radius: 12px;
  background: #121F3A;
  border: 1px solid rgba(120,214,200,.2);
  display: grid;
  place-items: center;
  overflow: hidden;
  position: relative;
}
.emg-pair-image-preview img {
  max-width: 100%;
  max-height: 140px;
  object-fit: contain;
  display: block;
}
.emg-pair-image-empty { color: #7A8BA3; font-size: .82rem; }
.emg-pair-image-actions { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.emg-pair-image.has-image { border-style: solid; border-color: rgba(247,190,40,.35); }

.emg-sweep-chip.has-image,
.emg-chip.has-image {
  flex-direction: column;
  gap: 10px;
  padding: 14px 12px;
  min-height: 140px;
}
.emg-sweep-chip-img,
.emg-chip-img {
  width: min(100%, 160px);
  height: 88px;
  object-fit: contain;
  border-radius: 10px;
  background: #E9F6F4;
}
.emg-sweep-chip-caption,
.emg-chip-caption {
  display: block;
  font-size: clamp(.9rem, 1.8vw, 1.1rem);
  line-height: 1.3;
}
.emg-mem-front.has-image {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 10px;
}
.emg-mem-img {
  width: 100%;
  max-height: 72px;
  object-fit: contain;
}
.emg-mem-caption {
  font-size: .78rem;
  line-height: 1.25;
  text-align: center;
}
@media (max-width: 640px) {
  .emg-sweep-chip.has-image { min-height: 128px; }
  .emg-sweep-chip-img { height: 72px; }
}