.learn-screen {
  box-sizing: border-box; width: min(904px, 100%); height: min(407px, calc(100dvh - 20px)); margin: auto; padding: 18px 70px 16px 34px;
  color: var(--bone); overflow: hidden auto;
  background: radial-gradient(circle at 78% 20%, rgba(164,81,28,.22), transparent 32%),
              linear-gradient(135deg, rgba(17,18,23,.98), rgba(34,24,20,.98));
}
@media (min-width: 1440px) and (min-height: 800px) {
  .learn-screen { width: min(1180px, 100%); height: min(600px, calc(100dvh - 20px)); }
}
@media (min-width: 1800px) and (min-height: 950px) {
  .learn-screen { width: min(1480px, 100%); height: min(740px, calc(100dvh - 20px)); }
}
.learn-header { margin: 0; }
.learn-header h1 { margin: 0; color: var(--gold); font: 1.8rem var(--font-display); letter-spacing: .08em; }
.learn-header p { margin: 3px 0 0; color: var(--ash); font: .88rem/1.25 var(--font-body); }
.learn-kicker { color: var(--amber); font: .62rem var(--font-chrome); letter-spacing: .18em; text-transform: uppercase; }
.learn-button, .glossary-practice {
  min-height: 44px; border: 1px solid rgba(227,180,94,.55); color: var(--bone);
  background: rgba(21,17,16,.88); font: .72rem var(--font-chrome); cursor: pointer;
}

.academy-screen { display: grid; grid-template-rows: 66px 1fr; gap: 9px; }
.academy-heading { display: grid; grid-template-columns: 290px 1fr auto; align-items: end; gap: 18px; }
.academy-heading > p { align-self: center; max-width: 360px; }
.academy-heading > strong { align-self: center; color: var(--gold); font: .68rem var(--font-chrome); white-space: nowrap; }
.academy-grid { display: grid; grid-template-columns: repeat(3, 1fr); grid-template-rows: repeat(2, 1fr); gap: 9px; min-height: 0; }
.academy-card {
  position: relative; display: grid; grid-template-columns: 34px 42px 1fr; gap: 7px; align-items: center;
  min-width: 0; padding: 10px 9px; border: 1px solid rgba(227,180,94,.34); border-radius: 7px;
  background: linear-gradient(125deg, rgba(79,46,28,.48), rgba(10,12,16,.72)); overflow: hidden;
}
.academy-card::after { content: ''; position: absolute; inset: auto 0 0; height: 2px; background: var(--gilt-dark); opacity: .7; }
.academy-card.completed { border-color: rgba(217,229,236,.72); box-shadow: inset 0 0 20px rgba(189,211,226,.07); }
.academy-card.planned { opacity: .53; filter: grayscale(.35); }
.academy-number { align-self: start; color: var(--amber); font: .7rem var(--font-display); }
.academy-icon { display: grid; place-items: center; width: 38px; height: 38px; border: 1px solid rgba(227,180,94,.55); border-radius: 50%; color: var(--gold); font-size: 1.2rem; }
.academy-card h2 { margin: 0 0 3px; color: var(--bone); font: .92rem var(--font-display); letter-spacing: .02em; }
.academy-card p { height: 29px; margin: 0 0 5px; color: var(--ash); font: .69rem/1.16 var(--font-body); overflow: hidden; }
.academy-card small { display: block; margin-bottom: 5px; color: var(--amber); font: .6rem var(--font-chrome); }
.academy-card button { min-width: 74px; min-height: 44px; padding: 4px 10px; border: 1px solid rgba(227,180,94,.5); color: #17120e; background: var(--gold); font: .68rem var(--font-chrome); cursor: pointer; }
.academy-card button:disabled { color: var(--ash); background: rgba(0,0,0,.25); cursor: default; }
.academy-complete-mark { position: absolute; top: 6px; right: 7px; color: #dce5eb; font: .58rem var(--font-chrome); }
.academy-next-step {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px;
  padding: 10px 14px; border: 1px solid rgba(227,180,94,.45);
  background: linear-gradient(90deg, rgba(227,180,94,.12), rgba(8,10,14,.55));
}
.academy-next-step p {
  margin: 0; max-width: 34rem; color: var(--bone);
  font: .78rem/1.3 var(--font-body);
}
.academy-next-step .learn-button { min-height: 44px; padding: 8px 16px; }

.glossary-redesign { display: grid; grid-template-rows: 62px 66px 1fr; gap: 6px; }
.glossary-heading { display: grid; grid-template-columns: 300px 1fr; align-items: end; gap: 20px; }
.glossary-heading > p { align-self: center; max-width: 430px; }
.glossary-toolbar { display: grid; grid-template-columns: 250px 1fr; gap: 12px; align-items: center; }
.glossary-search { display: grid; grid-template-columns: auto 1fr; align-items: center; gap: 7px; color: var(--ash); font: .66rem var(--font-chrome); }
.glossary-search input { min-width: 0; padding: 6px 8px; border: 1px solid rgba(227,180,94,.42); border-radius: 4px; color: var(--bone); background: rgba(0,0,0,.32); font: .72rem var(--font-chrome); }
.glossary-tabs { display: grid; grid-template-columns: repeat(5, 1fr); gap: 4px; }
.glossary-tabs button { min-height: 44px; padding: 3px; border: 1px solid rgba(227,180,94,.26); color: var(--ash); background: rgba(0,0,0,.18); font: .6rem/1.1 var(--font-chrome); cursor: pointer; }
.glossary-tabs button.active { color: #17120e; border-color: var(--gold); background: var(--gold); }
.glossary-browser { display: grid; grid-template-columns: 230px 1fr; min-height: 0; border: 1px solid rgba(227,180,94,.25); background: rgba(0,0,0,.18); }
.glossary-term-list { padding: 7px; overflow-y: auto; border-right: 1px solid rgba(227,180,94,.2); scrollbar-color: var(--gold) rgba(0,0,0,.25); }
.glossary-term-list button { display: flex; align-items: center; gap: 7px; width: 100%; padding: 7px 9px; border: 0; border-left: 2px solid transparent; color: var(--ash); background: transparent; text-align: left; cursor: pointer; }
.glossary-term-list button.active { border-left-color: var(--gold); color: var(--bone); background: rgba(227,180,94,.1); }
.glossary-term-list button span { color: var(--gold); }
.glossary-term-list button b { font: .72rem var(--font-chrome); }
.glossary-detail { position: relative; align-self: stretch; padding: 24px 30px; background: radial-gradient(circle at 85% 18%, rgba(173,91,37,.18), transparent 36%); }
.glossary-detail-section { color: var(--amber); font: .6rem var(--font-chrome); letter-spacing: .14em; text-transform: uppercase; }
.glossary-detail h2 { margin: 6px 0 10px; color: var(--gold); font: 1.55rem var(--font-display); }
.glossary-detail p { max-width: 440px; margin: 0; color: var(--bone); font: 1rem/1.4 var(--font-body); }
.glossary-practice { position: absolute; right: 22px; bottom: 18px; padding: 6px 12px; color: var(--gold); background: rgba(0,0,0,.32); }

.glossary-section h2 { margin: 10px 0 5px; color: var(--amber); font: .72rem var(--font-chrome); letter-spacing: .12em; text-transform: uppercase; }
.glossary-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 7px; }
.glossary-term { position: relative; padding: 7px 9px; border-left: 2px solid rgba(227,180,94,.48); background: rgba(255,255,255,.035); }
.glossary-term h3 { margin: 0 0 2px; color: var(--bone); font: .76rem var(--font-chrome); }
.glossary-term p { margin: 0; color: var(--ash); font: .74rem/1.2 var(--font-body); }
.glossary-glyph { float: left; width: 20px; height: 20px; margin: 0 7px 4px 0; font-size: .78rem; }
.app-info-btn { right: 72px; font-size: 21px; }
.app-info-btn:hover { transform: none; }
.app-info-btn[hidden] { display: none; }
.quick-glossary { max-height: 255px; overflow-y: auto; }
.quick-glossary .glossary-section h2 { margin-top: 0; }

.tutorial-battle-hud {
  position: fixed; z-index: 26; top: 8px; left: 146px; width: 250px; box-sizing: border-box;
  padding: 8px 10px; border: 2px solid transparent; border-radius: 8px;
  color: var(--bone); background: linear-gradient(rgba(10,12,16,.94), rgba(19,16,17,.94)) padding-box, var(--gilt-lit) border-box;
  box-shadow: 0 8px 24px rgba(0,0,0,.48);
}
.tutorial-battle-hud.complete { background: linear-gradient(rgba(10,14,17,.96), rgba(18,21,24,.96)) padding-box, var(--gilt-silver) border-box; }
.tutorial-battle-hud.touring { border-color: transparent; background: linear-gradient(rgba(10,12,16,.96), rgba(20,16,17,.96)) padding-box, var(--gilt-lit) border-box; }
.tutorial-hud-heading { display: flex; gap: 8px; align-items: center; }
.tutorial-hud-heading > span { display: grid; place-items: center; width: 28px; height: 28px; border: 1px solid var(--gold); border-radius: 50%; color: var(--gold); font: .64rem var(--font-display); }
.tutorial-hud-heading b { display: block; color: var(--gold); font: .76rem var(--font-display); }
.tutorial-hud-heading small { display: block; color: var(--ash); font: .56rem var(--font-chrome); text-transform: uppercase; }
.tutorial-battle-hud ul { display: grid; grid-template-columns: 1fr 1fr; gap: 3px 7px; margin: 6px 0 4px; padding: 0; list-style: none; }
.tutorial-battle-hud li { color: var(--ash); font: .6rem/1.15 var(--font-chrome); }
.tutorial-battle-hud li.done { color: #cfe4d5; }
.tutorial-hud-message { min-height: 25px; margin: 3px 0 6px; color: var(--bone); font: .68rem/1.2 var(--font-body); }
.tutorial-hud-actions { display: flex; gap: 4px; }
.tutorial-hud-actions button { flex: 1; min-width: 0; min-height: 44px; padding: 3px 5px; border: 1px solid rgba(227,180,94,.42); color: var(--ash); background: rgba(0,0,0,.28); font: .58rem var(--font-chrome); cursor: pointer; }
.tutorial-hud-actions button.next { color: #17120e; background: var(--gold); }
.tutorial-announcement-zone { position: fixed; z-index: 14; top: 8px; left: 4px; width: 130px; height: 118px; border-radius: 6px; pointer-events: none; background: rgba(15,12,13,.18); }
.tutorial-focus { outline: 3px solid var(--gold-bright) !important; outline-offset: 4px; box-shadow: 0 0 0 2px rgba(19,11,4,.9), 0 0 24px rgba(255,190,75,.9) !important; }

@media (max-width: 900px), (max-height: 430px) {
  .tutorial-battle-hud {
    left: max(8px, env(safe-area-inset-left));
    top: max(6px, env(safe-area-inset-top));
    width: min(280px, calc(100vw - 120px));
    max-height: min(42vh, 210px);
    overflow: auto;
    padding: 6px 8px;
  }
  .tutorial-hud-message { min-height: 0; margin: 2px 0 4px; font-size: .62rem; }
  .tutorial-hud-actions button { min-height: 40px; }
  .tutorial-battle-hud ul { display: none; }
}

@media (max-height: 430px) and (orientation: landscape) {
  .tutorial-battle-hud {
    left: max(8px, env(safe-area-inset-left));
    right: max(8px, env(safe-area-inset-right));
    top: auto;
    bottom: max(6px, env(safe-area-inset-bottom));
    width: auto;
    max-height: min(30vh, 118px);
    padding: 5px 10px;
    border-radius: 12px 12px 6px 6px;
  }
  .tutorial-hud-heading { gap: 6px; }
  .tutorial-hud-heading > span { width: 22px; height: 22px; font-size: .58rem; }
  .tutorial-hud-heading b { font-size: .68rem; }
  .tutorial-hud-heading small { font-size: .5rem; }
  .tutorial-hud-message { margin: 1px 0 3px; font-size: .58rem; line-height: 1.15; }
  .tutorial-hud-actions { gap: 3px; }
  .tutorial-hud-actions button { min-height: 34px; padding: 2px 4px; font-size: .54rem; }
}

@media (max-width: 940px), (max-height: 430px) {
  .learn-screen { padding: 14px 22px 12px; }
  .learn-header h1 { font-size: 1.35rem; }
  .learn-header p { font-size: .78rem; }
  .academy-screen { grid-template-rows: auto 1fr; }
  .academy-heading { grid-template-columns: minmax(0, 1fr) auto; gap: 10px; padding-right: 150px; }
  .academy-heading > p { display: none; }
  .academy-grid { gap: 7px; }
  .academy-card { padding: 8px 7px; }
  .glossary-redesign { grid-template-rows: auto auto 1fr; }
  .glossary-heading { grid-template-columns: minmax(0, 1fr); gap: 4px; }
  .glossary-heading > p { display: none; }
  .glossary-toolbar { grid-template-columns: minmax(0, 1fr); gap: 6px; }
  .glossary-browser { grid-template-columns: 170px minmax(0, 1fr); }
  .glossary-detail { padding: 12px 14px; }
  .glossary-detail p { font-size: .88rem; }
}

@media (max-width: 640px) {
  .academy-grid { grid-template-columns: repeat(2, 1fr); overflow-y: auto; }
  .glossary-browser { grid-template-columns: 120px minmax(0, 1fr); }
}


@media (prefers-reduced-motion: reduce) { .academy-card { transition: none; } }