:root {
  color-scheme: dark;
  --ink: #f6f0d8;
  --muted: #b9c3b6;
  --paper: rgba(15, 34, 36, .94);
  --paper-solid: #142e30;
  --line: rgba(224, 200, 135, .28);
  --canvas: #163c3d;
  --canvas-deep: #0c2629;
  --teal: #668e70;
  --gold: #e6c580;
  --rose: #b87866;
  --blue: #88b9bf;
  --shadow: 0 20px 70px rgba(0, 13, 20, .38);
  --serif: Georgia, "Times New Roman", serif;
}

* { box-sizing: border-box; }
body { margin: 0; min-height: 100vh; color: var(--ink); background: #0c2629; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; }
button, input, textarea { font: inherit; }
button { cursor: pointer; }
button:disabled { cursor: wait; opacity: .6; }
h1, h2, p { margin: 0; }
svg { display: block; }
.hidden { display: none !important; }
.icon-library { position: absolute; width: 0; height: 0; overflow: hidden; }
button:focus-visible, input:focus-visible, textarea:focus-visible { outline: 3px solid #f6d892; outline-offset: 5px; }
button { -webkit-tap-highlight-color: transparent; }
.label { color: var(--gold); font-size: 10px; font-weight: 700; letter-spacing: .17em; line-height: 1.4; text-transform: uppercase; }

.login-view {
  display: grid;
  min-height: 100vh;
  min-height: 100dvh;
  place-items: center;
  padding: 28px;
  isolation: isolate;
  position: relative;
  background: #244c4b url('/assets/adventure/world-map.webp') center / cover;
}
.login-view::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(90deg, rgba(9, 28, 31, .55), rgba(9, 28, 31, .16), rgba(9, 28, 31, .45)), linear-gradient(0deg, rgba(6, 22, 25, .65), transparent 45%); }
.login-panel { width: min(440px, 100%); position: relative; border: 1px solid rgba(231, 204, 139, .5); border-radius: 20px 20px 5px 5px; padding: 38px 38px 30px; text-align: center; background: linear-gradient(145deg, rgba(23, 50, 50, .96), rgba(12, 33, 35, .96)); box-shadow: 0 35px 100px rgba(0, 17, 20, .48), inset 0 0 0 5px rgba(231, 204, 139, .04); backdrop-filter: blur(10px); }
.login-panel::after { content: "✦"; position: absolute; left: calc(50% - 15px); bottom: -14px; width: 30px; color: var(--gold); background: #142e30; font-size: 20px; }
.login-compass { width: 70px; height: 70px; margin: 0 auto 22px; color: var(--gold); }
.login-panel h1 { margin-top: 10px; color: #f1dca8; font-family: var(--serif); font-size: 70px; font-weight: 500; line-height: 1; letter-spacing: .09em; }
.login-intro { margin-top: 18px; color: #d0d9c9; font-family: var(--serif); font-size: 19px; line-height: 1.5; }
.login-form { display: grid; gap: 10px; margin-top: 32px; text-align: left; }
.login-form label { color: #c2cdbf; font-size: 12px; font-weight: 600; }
.login-form input { width: 100%; min-height: 50px; border: 1px solid rgba(217, 198, 147, .35); border-radius: 5px; padding: 0 14px; color: #fbf2da; background: #0e2528; }
.login-note { margin-top: 24px; color: #9baea3; font-size: 11px; line-height: 1.8; }
.primary-button, .hud-button, .zoom-button { min-height: 44px; border-radius: 5px; padding: 0 16px; font-size: 13px; font-weight: 650; }
.primary-button { border: 1px solid #f0d295; color: #283b32; background: linear-gradient(#e9cf95, #d3b271); box-shadow: 0 3px 0 rgba(34, 23, 9, .2), inset 0 1px rgba(255,255,255,.3); transition: filter 160ms ease, transform 160ms ease; }
.primary-button:hover:not(:disabled) { filter: brightness(1.12); transform: translateY(-1px); }
.login-form .primary-button { display: flex; justify-content: space-between; align-items: center; margin-top: 6px; min-height: 50px; }
.compact-button { width: 100%; min-height: 42px; margin-top: 16px; }
.hud-button, .zoom-button, .score-button { border: 1px solid var(--line); color: var(--ink); background: rgba(18, 44, 44, .94); pointer-events: auto; }
.hud-button:hover, .zoom-button:hover { border-color: var(--gold); background: #264b45; }
.logout-card-button { width: 100%; margin-top: 8px; min-height: 42px; color: #bbc6b8; background: transparent; }
.score-card .character-motion-button { width: 100%; margin-top: 8px; min-height: 44px; color: #bbc6b8; background: transparent; }

.atlas-view { --terrain-size: max(100%, 1040px); position: relative; min-height: 100vh; min-height: 100dvh; overflow: hidden; isolation: isolate; background: #173d40; }
/* Terrain follows the whole atlas and repeats at its natural aspect ratio. */
.atlas-view::before { content: ""; position: absolute; inset: 0; z-index: -2; pointer-events: none; background-color: #173d40; background-image: url('/assets/adventure/atlas-terrain-v2.webp'); background-position: center top; background-size: var(--terrain-size) auto; background-repeat: repeat-y; transition: filter 550ms ease; }
.atlas-view::after { content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none; background: linear-gradient(180deg, rgba(8, 33, 35, .54) 0, transparent 28%, transparent 69%, rgba(6, 30, 34, .72) 100%), radial-gradient(ellipse at center, transparent 45%, rgba(0, 26, 34, .27) 100%); }
.atlas-view[data-realm="physics"]::before { filter: saturate(1.08) hue-rotate(3deg); }
.atlas-view[data-realm="math"]::before { filter: hue-rotate(12deg); }
.atlas-view[data-realm="chemistry"]::before { filter: hue-rotate(-14deg); }
.atlas-view[data-realm="computer-science"]::before { filter: hue-rotate(19deg); }
.atlas-view[data-realm="mechanical-engineering"]::before, .atlas-view[data-realm="electrical-engineering"]::before { filter: sepia(.18); }
.atlas-view[data-depth="unit"] { --terrain-size: max(103%, 1070px); }
.atlas-view[data-depth="region"] { --terrain-size: max(106%, 1100px); }

.hud { position: fixed; top: 18px; left: 24px; right: 24px; z-index: 50; display: flex; align-items: center; justify-content: space-between; gap: 20px; min-height: 65px; padding: 10px 15px; border: 1px solid var(--line); border-radius: 8px; background: linear-gradient(110deg, rgba(14, 33, 36, .94), rgba(17, 42, 43, .87)); box-shadow: 0 8px 32px rgba(0, 18, 24, .22), inset 0 1px rgba(254, 240, 194, .06); backdrop-filter: blur(14px); pointer-events: none; }
.atlas-brand { display: flex; align-items: center; gap: 12px; flex-shrink: 0; }
.brand-compass { width: 39px; height: 39px; color: var(--gold); }
.atlas-brand strong { display: block; font-family: var(--serif); font-weight: 500; font-size: 30px; line-height: .98; letter-spacing: .08em; color: #f0dba5; }
.atlas-brand span { display: block; margin-top: 5px; color: #bec7b7; font-size: 8px; letter-spacing: .16em; text-transform: uppercase; }
#modeButton { margin-left: auto; }
.player-hud { display: flex; align-items: center; gap: 12px; pointer-events: auto; }
.player-menu-button { display:flex; align-items:center; gap:12px; min-height:46px; padding:0; border:0; border-radius:6px; color:inherit; background:transparent; text-align:left; font:inherit; cursor:pointer; }
.player-menu-button:hover .player-name-row strong { color:var(--gold); text-decoration:underline; text-underline-offset:3px; }
.player-menu-button:hover .player-portrait { border-color:var(--gold); }
.player-menu-button:focus-visible { outline:2px solid var(--gold); outline-offset:5px; }
.player-menu-button .player-info, .player-menu-button .xp-track { display:block; }
.player-portrait { display: grid; place-items: center; width: 46px; height: 46px; border: 1px solid rgba(220, 192, 122, .65); border-radius: 50%; overflow: hidden; background: #142e30; box-shadow: inset 0 0 0 3px rgba(225, 195, 126, .12); }
.player-portrait svg { width: 44px; height: 44px; }
.player-info { min-width: 150px; }
.player-name-row { display: flex; align-items: center; justify-content: space-between; gap: 14px; font-size: 13px; }
.player-name-row strong { max-width: 125px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 650; }
.level-label { color: var(--gold); font-size: 10px; white-space: nowrap; }
.xp-track { height: 5px; border-radius: 10px; background: #081d22; margin-top: 7px; overflow: hidden; border: 1px solid rgba(157, 195, 169, .12); }
.xp-fill { display: block; height: 100%; width: 0; background: linear-gradient(90deg, #749985, #dcd5a0); box-shadow: 0 0 8px #c5d996; transition: width 700ms ease; }
.xp-label { display: block; color: #aebdaf; font-size: 9px; letter-spacing: .025em; margin-top: 4px; }
.score-panel { position: relative; padding-left: 16px; border-left: 1px solid var(--line); }
.score-panel::after { content: ""; position: absolute; top: 100%; right: 0; width: 300px; height: 16px; }
.score-button { min-height: 44px; border: 0; padding: 0 8px; border-radius: 5px; color: #ead4a0; background: transparent; font-size: 15px; font-weight: 650; white-space: nowrap; }
.score-button::before { content: "✦"; font-size: 17px; margin-right: 7px; color: #d9bb74; }
.score-card { position: absolute; top: calc(100% + 18px); right: -2px; z-index: 5; width: 300px; border: 1px solid rgba(220, 192, 122, .45); border-radius: 8px; padding: 20px; background: #142e30; box-shadow: var(--shadow); opacity: 0; pointer-events: none; transform: translateY(-8px); transform-origin: top right; transition: opacity 180ms ease, transform 180ms ease; }
.score-panel.open .score-card { opacity: 1; pointer-events: auto; transform: translateY(0); }
.score-details { display: grid; gap: 12px; margin-top: 17px; }
.score-line { display: grid; grid-template-columns: 1fr auto; gap: 10px; color: #c2ccbc; font-size: 12px; }
.score-line strong { color: #e8d39f; }
.score-line.score-scope { padding-bottom:12px; border-bottom:1px solid var(--line); }

.map-heading { position: absolute; left: 30px; top: 108px; z-index: 6; max-width: 240px; padding: 16px 18px; border-left: 2px solid rgba(232, 206, 140, .7); background: linear-gradient(90deg, rgba(14, 40, 40, .83), rgba(14, 40, 40, .52) 80%, transparent); pointer-events: none; }
.map-heading h1 { margin-top: 6px; font-family: var(--serif); font-weight: 400; font-size: clamp(24px, 2.5vw, 34px); line-height: 1.08; color: #fff3ce; text-wrap: balance; }
.map-heading > p:last-child { margin-top: 9px; color: #ced9c7; font-size: 11px; line-height: 1.55; }
.world { position: absolute; inset: 0; }
.map-canvas, .leaderboard-view { position: absolute; }
.map-canvas { top: 86px; left: 0; right: 0; bottom: auto; height: var(--map-height, calc(100% - 170px)); overflow: visible; }
.map-path-layer { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; overflow: visible; }
.map-path { fill: none; stroke: rgba(245, 224, 168, .65); stroke-width: .4; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 1.3 1.5; filter: drop-shadow(0 1px 1px rgba(0, 35, 31, .85)); }
.map-canvas.zooming .map-node { animation: node-in 480ms cubic-bezier(.16, .7, .27, 1) both; }
.map-canvas.zooming .map-node:nth-child(2n) { animation-delay: 45ms; }
.map-canvas.zooming .map-node:nth-child(3n) { animation-delay: 90ms; }
.map-loading { display: grid; height: 100%; place-items: center; color: #f3e8c6; font-family: var(--serif); font-size: 25px; text-shadow: 0 2px 12px #0a2a2d; }

.map-node { position: absolute; display: flex; flex-direction: column; align-items: center; justify-content: flex-start; width: 132px; height: 156px; border: 0; border-radius: 55% 55% 8px 8px; padding: 0; color: var(--ink); background: transparent; transform: translate(-50%, -50%); }
.node-orb { display: grid; position: relative; flex-shrink: 0; width: 130px; height: 124px; place-items: center; border: 0; border-radius: 50%; background: transparent; transition: transform 220ms ease, filter 220ms ease; filter: drop-shadow(0 7px 5px rgba(13, 37, 31, .38)); }
.node-orb::before { content: ""; position: absolute; bottom: 7px; left: 16%; right: 16%; height: 24px; z-index: -1; border-radius: 50%; background: radial-gradient(ellipse, rgba(6, 43, 35, .55), transparent 70%); }
.node-orb::after { content: ""; position: absolute; inset: 8px; border: 1px solid #f8e7b0; border-radius: 50%; opacity: 0; transform: scale(.85); transition: opacity 200ms ease, transform 220ms ease; box-shadow: 0 0 20px rgba(232, 221, 151, .2); }
.node-orb > svg, .node-icon { width: 128px; height: 128px; position: relative; z-index: 1; }
.node-image { width: 128px; height: 128px; object-fit: contain; }
.node-icon-fallback { display: grid; place-items: center; }
.map-node:hover, .map-node:focus-visible { z-index: 15; outline: none; }
.map-node:hover .node-orb, .map-node:focus-visible .node-orb { transform: translateY(-5px) scale(1.1); filter: drop-shadow(0 9px 6px rgba(13, 37, 31, .4)) drop-shadow(0 0 13px rgba(243, 228, 153, .65)); }
.map-node:hover .node-orb::after, .map-node:focus-visible .node-orb::after { opacity: .75; transform: scale(1); }
.node-caption { display: block; width: max-content; max-width: 195px; position: relative; z-index: 2; padding: 5px 11px 6px; border-radius: 4px; text-align: center; color: #fff3cf; background: rgba(13, 43, 39, .77); border: 1px solid rgba(232, 220, 163, .26); box-shadow: 0 3px 8px rgba(2, 26, 28, .18); backdrop-filter: blur(4px); transition: border-color 180ms ease, background 180ms ease; }
.node-caption strong { display: block; font-family: var(--serif); font-size: 17px; font-weight: 500; line-height: 1.18; text-wrap: balance; }
.node-caption small { display: block; margin-top: 4px; font-size: 9px; line-height: 1.3; letter-spacing: .08em; color: #c2d0b8; text-transform: uppercase; }
.map-node:hover .node-caption, .map-node:focus-visible .node-caption { border-color: rgba(245, 221, 154, .85); background: rgba(18, 49, 39, .94); }
.node-field { width: 160px; height: 186px; }
.node-field .node-orb { width: 160px; height: 150px; }
.node-field .node-orb > svg, .node-field .node-image { width: 160px; height: 160px; }
.node-field .node-caption strong { font-size: 19px; }
.node-field .node-caption { max-width: 205px; }
.node-course .node-caption strong { font-size: 15px; }
.node-course .node-orb { width: 110px; height: 110px; }
.node-course .node-orb > svg { width: 120px; height: 120px; }
.node-region { width: 116px; height: 146px; }
.node-region .node-orb { width: 116px; height: 105px; }
.node-region .node-orb > svg { width: 114px; height: 114px; }
.node-region .node-caption { max-width: 175px; }
.node-region .node-caption strong { font-size: 14px; }
.node-area { width: 96px; height: 120px; }
.node-area .node-orb { width: 92px; height: 84px; }
.node-area .node-orb > svg { width: 90px; height: 90px; }
.node-area .node-caption { max-width: 170px; padding: 5px 8px; }
.node-area .node-caption strong { font-size: 13px; }
.node-area .node-caption small { font-size: 8px; }
.node-badge { position: absolute; right: 0; bottom: 1px; z-index: 3; min-width: 25px; border: 1px solid #dcc37d; border-radius: 50px; padding: 3px 6px; color: #e7d6a3; background: #173e3b; font-size: 10px; font-weight: 700; }
.map-node.is-complete .node-badge { background: #3e654c; }
.map-node.is-complete .node-caption { border-color: rgba(166, 217, 132, .7); }
.node-complete { position: absolute; top: 7px; right: 0; z-index: 4; display: grid; place-items: center; width: 24px; height: 24px; border: 1px solid #d9d69b; border-radius: 50%; color: #eef0c4; background: #436f48; box-shadow: 0 2px 8px rgba(5, 36, 32, .4); font-size: 13px; font-weight: 700; }
.map-node.is-visited:not(.is-complete) .node-caption::before { content: ""; position: absolute; top: -3px; left: calc(50% - 2px); width: 5px; height: 5px; border-radius: 50%; background: #edca79; box-shadow: 0 0 8px #edca79; }

.node-popover { position: absolute; left: 50%; top: calc(100% + 12px); z-index: 20; display: block; width: 265px; border: 1px solid rgba(222, 195, 129, .58); border-radius: 7px; padding: 18px; text-align: left; background: rgba(14, 35, 36, .97); box-shadow: var(--shadow); opacity: 0; pointer-events: none; transform: translateX(-50%) translateY(-7px); transform-origin: top center; transition: opacity 160ms ease, transform 160ms ease; }
.popover-up .node-popover { top: auto; bottom: calc(100% + 12px); transform: translateX(-50%) translateY(7px); transform-origin: bottom center; }
.popover-left .node-popover { left: auto; right: 0; transform: translateY(-7px); transform-origin: top right; }
.popover-right .node-popover { left: 0; transform: translateY(-7px); transform-origin: top left; }
.popover-up.popover-left .node-popover, .popover-up.popover-right .node-popover { transform: translateY(7px); }
.map-node:hover .node-popover, .map-node:focus-visible .node-popover { opacity: 1; transform: translateX(-50%) translateY(0); }
.map-node.popover-left:hover .node-popover, .map-node.popover-left:focus-visible .node-popover, .map-node.popover-right:hover .node-popover, .map-node.popover-right:focus-visible .node-popover { transform: translateY(0); }
.node-title { display: block; margin-top: 7px; font-family: var(--serif); font-size: 23px; font-weight: 400; line-height: 1.14; }
.node-summary { display: block; margin-top: 10px; color: #bfcebf; font-size: 12px; line-height: 1.55; }
.node-stats { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 14px; }
.node-stats span { border: 1px solid rgba(173, 199, 168, .2); border-radius: 4px; padding: 5px 7px; color: #cfdbbf; background: rgba(157, 186, 158, .1); font-size: 10px; font-weight: 500; }

.path-controls { position: fixed; left: 24px; bottom: 25px; z-index: 30; display: flex; align-items: center; max-width: min(900px, calc(100vw - 104px)); gap: 0; border: 1px solid rgba(224, 200, 135, .3); border-radius: 5px; background: rgba(12, 37, 38, .9); box-shadow: 0 4px 20px rgba(0,20,27,.2); overflow-x: auto; pointer-events: auto; backdrop-filter: blur(10px); scrollbar-width: thin; }
.crumb { position: relative; flex-shrink: 0; min-height: 43px; border: 0; padding: 0 14px; color: #b6c7b7; background: transparent; font-size: 10px; font-weight: 550; pointer-events: auto; white-space: nowrap; }
.crumb + .crumb::before { content: "›"; position: absolute; left: -2px; color: #729186; font-size: 17px; font-weight: 400; }
.crumb:hover { color: #ffe6aa; }
.crumb.active { color: #f2d796; background: rgba(220, 193, 132, .08); }
.adventure-guide { position: fixed; left: 50%; bottom: 79px; z-index: 3; display: flex; align-items: center; gap: 7px; color: #ebead0; font-size: 9px; letter-spacing: .025em; text-shadow: 0 1px 5px #0a2d32; transform: translateX(-50%); white-space: nowrap; pointer-events: none; }
.guide-diamond { color: #e0cb8e; font-size: 16px; }
.adventure-guide i { padding: 0 8px; color: #d9c793; font-style: normal; }
.map-legend { position: fixed; right: 94px; bottom: 38px; z-index: 3; display: flex; align-items: center; gap: 8px; color: #d6dfc6; font-size: 10px; text-shadow: 0 1px 5px #0a2d32; pointer-events: none; }
.legend-dot { width: 5px; height: 5px; border-radius: 50%; background: #b1cb83; box-shadow: 0 0 10px #b1cb83; }
.zoom-button { position: fixed; right: 24px; bottom: 22px; z-index: 35; display: grid; width: 48px; height: 48px; min-height: 48px; place-items: center; border: 1px solid rgba(232, 205, 144, .6); border-radius: 50%; padding: 0 0 4px; color: #f2dcaa; background: #153e3e; font-size: 30px; line-height: 1; box-shadow: 0 4px 20px rgba(0, 22, 30, .24), inset 0 0 0 3px rgba(219, 190, 122, .08); }

.detail-drawer { position: fixed; right: 24px; bottom: 86px; z-index: 25; width: min(440px, calc(100vw - 48px)); max-height: calc(100dvh - 170px); overflow-y: auto; border: 1px solid rgba(229, 203, 139, .55); border-radius: 9px; padding: 27px; background: linear-gradient(140deg, rgba(23, 48, 46, .98), rgba(13, 35, 37, .99)); box-shadow: var(--shadow); }
.close-button { position: absolute; top: 12px; right: 12px; display: grid; place-items: center; width: 38px; height: 38px; border: 1px solid rgba(196, 209, 178, .22); border-radius: 50%; padding: 0; color: #d6d9c3; background: rgba(11, 30, 33, .65); font-size: 25px; font-weight: 300; line-height: 1; transition: background 160ms ease; }
.close-button:hover { color: #fff0c1; background: #335344; }
.detail-drawer > .close-button { position: sticky; top: 0; right: auto; float: right; z-index: 1; margin: -15px -15px 0 8px; }
.detail-drawer h2 { margin-top: 9px; max-width: 330px; font-family: var(--serif); font-weight: 400; font-size: 29px; line-height: 1.14; }
.detail-prompt { margin-top: 13px; color: #c4cfbd; font-size: 13px; line-height: 1.55; }
.section-standing { display: flex; flex-direction: column; gap: 8px; width: 100%; margin-top: 17px; border: 1px solid rgba(229, 203, 139, .32); border-radius: 6px; padding: 14px 16px; text-align: left; color: #f0e7c4; background: linear-gradient(110deg, rgba(221, 188, 110, .1), rgba(110, 162, 139, .06)); }
.section-standing:hover, .section-standing:focus-visible { border-color: #e5cb8b; background-color: rgba(229, 203, 139, .09); }
.section-standing:focus-visible { outline: 2px solid #e5cb8b; outline-offset: 3px; }
.section-standing-label { color: #b1c6bb; font-size: 10px; }
.section-standing-stats { display: flex; flex-wrap: wrap; align-items: baseline; gap: 12px 24px; }
.section-standing-stats strong { font-family: var(--serif); font-size: 24px; font-weight: 500; }
.section-standing-summary { color: #b5c7b7; font-size: 11px; line-height: 1.5; }
.section-standing-link { display: flex; align-items: center; justify-content: space-between; color: #e5cb8b; font-size: 11px; }
.section-standing-link > span { font-size: 20px; line-height: 1; }
.detail-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 22px; }
.action-tile { position: relative; display: flex; align-items: center; flex-direction: column; min-height: 203px; border: 1px solid rgba(157, 199, 201, .35); border-radius: 6px; padding: 12px 10px 15px; text-align: center; background: radial-gradient(ellipse at 50% 0, rgba(132, 184, 192, .17), transparent 60%), #152f33; transition: transform 180ms ease, border-color 180ms ease, background 180ms ease; }
.action-tile:hover { transform: translateY(-3px); border-color: #b2d2cb; background: #1a3a3b; }
.action-tile .quest-character { width: 80px; height: 93px; margin-bottom: 10px; filter: drop-shadow(0 4px 8px rgba(0, 20, 28, .35)); }
.action-tile > span { display: block; color: #b1c6bb; font-size: 9px; font-weight: 650; letter-spacing: .1em; text-transform: uppercase; }
.action-tile strong { display: block; margin-top: 7px; color: #f0e7c4; font-family: var(--serif); font-weight: 500; font-size: 18px; line-height: 1.15; }
.action-tile small { display: block; margin-top: 7px; color: #97b1a7; font-size: 10px; }
.action-tile.challenge { border-color: rgba(222, 169, 117, .4); background: radial-gradient(ellipse at 50% 0, rgba(203, 134, 82, .16), transparent 60%), #29352f; }
.action-tile.challenge:hover { border-color: #e1c48a; background: #374236; }
.detail-feedback { margin-top: 17px; border-top: 1px solid rgba(206, 193, 141, .2); padding-top: 14px; color: #a6baa9; font-size: 11px; line-height: 1.55; }

.tutor-panel { position: fixed; inset: 0; height: 100vh; height: 100dvh; z-index: 55; display: flex; flex-direction: column; border: 0; border-radius: 0; background: linear-gradient(130deg, #132e30, #0f252a); box-shadow: var(--shadow); overflow: hidden; }
.tutor-header { position: relative; display: flex; align-items: center; flex-shrink: 0; gap: 22px; min-height: 110px; border-bottom: 1px solid var(--line); padding: 16px 64px 16px 26px; background: linear-gradient(95deg, rgba(100, 133, 108, .1), transparent); }
.tutor-character { display: grid; place-items: center; width: 70px; flex-shrink: 0; }
.tutor-character svg { width: 66px; height: 76px; }
.tutor-character .master-character { display: none; }
.oracle-room .tutor-character .master-character { display: block; }
.oracle-room .tutor-character .monster-character { display: none; }
.tutor-heading-copy { min-width: 0; }
.tutor-course-title { margin-top: 7px; color: #b3c3af; font-size: 11px; line-height: 1.4; }
.tutor-header h2 { margin-top: 5px; color: #f1e6c0; font-family: var(--serif); font-weight: 400; font-size: clamp(24px, 2.3vw, 33px); line-height: 1.1; }
.tutor-header .close-button { top: 21px; right: 19px; }
.encounter-banner { display: flex; align-items: center; flex-shrink: 0; gap: 15px; min-height: 68px; margin: 0; padding: 14px 28px; border-bottom: 1px solid rgba(202, 165, 109, .18); background: rgba(206, 166, 93, .06); }
.encounter-rune { color: #e2b575; font-size: 28px; }
.encounter-status { color: #ebd4a2; font-size: 12px; font-weight: 600; }
.encounter-instruction { margin-top: 5px; color: #afc0ae; font-size: 10px; }
.encounter-health { width: 160px; height: 7px; margin-left: auto; overflow: hidden; border: 1px solid rgba(213, 168, 102, .2); border-radius: 10px; background: #102324; }
.encounter-health span { display: block; width: 100%; height: 100%; background: linear-gradient(90deg, #9e725b, #d3b078); transition: width 650ms ease; }
.oracle-room .encounter-health { display: none; }
.oracle-room .encounter-banner { background: rgba(145, 184, 166, .07); }
.oracle-room .encounter-rune { color: #adcdb5; }
.oracle-visual { width: min(820px, calc(100% - 60px)); margin: 0 auto; padding: 28px 0 0; }
.oracle-lesson-block { display: grid; gap: 22px; }
.oracle-paragraph { color: #d9dfcb; font-family: var(--serif); font-size: 18px; line-height: 1.7; }
.oracle-equations { display: grid; gap: 12px; }
.oracle-equation { padding: 16px 20px; border: 1px solid rgba(180, 200, 163, .18); border-radius: 5px; color: #f0dfb4; background: rgba(6, 26, 31, .45); font-family: var(--serif); font-size: 21px; overflow-x: auto; }
.tutor-messages { display: grid; flex: 1 1 auto; min-height: 0; align-content: start; gap: 14px; overflow: auto; padding: 25px 28px; scrollbar-color: #607d6f #12282b; scrollbar-width: thin; }
.tutor-message { width: min(800px, 92%); border: 1px solid rgba(179, 195, 153, .23); border-radius: 7px; padding: 18px 21px; color: #e2e4d0; background: rgba(63, 87, 74, .21); font-size: 14px; line-height: 1.7; white-space: pre-wrap; overflow-wrap: anywhere; }
.tutor-message.student { justify-self: end; border-color: rgba(104, 170, 173, .29); background: rgba(54, 110, 116, .19); }
.tutor-message.oracle, .tutor-message.challenge { justify-self: start; }
.tutor-message.challenge { border-color: rgba(204, 161, 105, .28); background: rgba(176, 143, 89, .08); }
.tutor-message.system { justify-self: center; border-color: transparent; padding: 10px 15px; color: #b4c5ae; background: transparent; font-size: 12px; }
.tutor-message.success { border-color: #8ea965; color: #dcebba; background: rgba(136, 169, 95, .12); }
.tutor-form { display: grid; flex-shrink: 0; grid-template-columns: 1fr auto auto; align-items: end; gap: 12px; border-top: 1px solid var(--line); padding: 17px 22px; background: #122b2d; }
.tutor-input-stack { display: grid; min-width: 0; }
.tutor-form textarea, .drawing-canvas { width: 100%; border: 1px solid rgba(177, 199, 171, .33); border-radius: 5px; color: #e7e8d4; background: #0d2428; }
.tutor-form textarea { min-height: 75px; max-height: 170px; resize: vertical; padding: 13px; font-size: 13px; line-height: 1.5; }
.tutor-form textarea::placeholder { color: #819e94; }
.drawing-canvas { height: 118px; background: #f5ecd9; touch-action: none; }
.drawing-canvas.disabled { opacity: .62; }
.input-mode-button { align-self: end; min-height: 44px; border: 1px solid var(--line); background: transparent; }
.tutor-form button { min-width: 90px; }
.tutor-panel.oracle-room { overflow-y: auto; display: block; scrollbar-color: #607d6f #12282b; scrollbar-width: thin; }
.oracle-room .tutor-header { position: sticky; top: 0; z-index: 3; background: #173235; }
.oracle-room .tutor-messages { overflow: visible; width: min(880px, 100%); margin: 0 auto; padding-bottom: 28px; }
.oracle-room .tutor-message { width: 100%; color: #d9dfcb; font-family: var(--serif); font-size: 18px; line-height: 1.7; }
.oracle-room .tutor-message.student { font-size: 15px; }
.oracle-room .tutor-message.system { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; font-size: 12px; }
.oracle-room .tutor-form { position: sticky; bottom: 0; z-index: 3; margin-top: 10px; background: #163033; }
/* A lesson or battle owns the viewport until the player returns to the map. */
body:has(.tutor-panel:not(.hidden)) { overflow: hidden; }
.atlas-view:has(.tutor-panel:not(.hidden)) > :is(.hud, .world, .path-controls, .zoom-button) { visibility: hidden; }
.atlas-view:has(.tutor-panel:not(.hidden)) .map-heading, .atlas-view:has(.tutor-panel:not(.hidden)) .adventure-guide, .atlas-view:has(.tutor-panel:not(.hidden)) .map-legend { display: none; }
.atlas-view:has(.leaderboard-view:not(.hidden)) .map-heading, .atlas-view:has(.leaderboard-view:not(.hidden)) .adventure-guide, .atlas-view:has(.leaderboard-view:not(.hidden)) .map-legend { display: none; }

/* Rankings fill the viewport independently of the previous map height. */
.atlas-view:has(.leaderboard-view:not(.hidden)) { min-height: 100vh !important; min-height: 100dvh !important; }

.leaderboard-view { inset: 0; z-index: 10; display: grid; place-items: center; padding: 104px 24px 94px; background: rgba(7, 29, 33, .74); backdrop-filter: blur(7px); }
.leaderboard-panel { width: min(780px, 100%); max-height: calc(100vh - 210px); overflow: auto; border: 1px solid rgba(222, 195, 129, .46); border-radius: 8px; padding: 28px; background: linear-gradient(135deg, #193535, #122b2e); box-shadow: var(--shadow); }
.leaderboard-panel h2 { margin-top: 9px; font-family: var(--serif); font-size: 34px; font-weight: 400; }
.leaderboard-view.tutor-standings-overlay { position: fixed; inset: 0; z-index: 65; visibility: visible; padding: 24px; }
.tutor-standings-overlay .leaderboard-panel { position: relative; max-height: calc(100vh - 48px); max-height: calc(100dvh - 48px); overscroll-behavior: contain; }
.tutor-standings-overlay .leaderboard-panel > :is(.label, h2) { padding-right: 85px; }
.tutor-standings-overlay #closeStandingsButton { position: sticky; top: 0; float: right; z-index: 1; width: auto; padding: 0 10px; background: #193535; }
.standings-dialog-path { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 18px; }
.standings-dialog-path .crumb { position: static; transform: none; }
@media (max-width: 600px) {
 .leaderboard-view.tutor-standings-overlay { padding: 12px; }
 .tutor-standings-overlay .leaderboard-panel { padding: 20px 16px; max-height: calc(100dvh - 24px); }
 .tutor-standings-overlay .leaderboard-panel h2 { font-size: 27px; }
}
.leaderboard-list { display: grid; gap: 10px; margin-top: 24px; }
.leader-section-label { margin-top: 13px; color: #dbc388; font-size: 10px; font-weight: 650; letter-spacing: .13em; text-transform: uppercase; }
.leader-section-label:first-child { margin-top: 0; }
.leader-row { display: grid; grid-template-columns: 38px 1fr auto; align-items: center; gap: 12px; min-height: 60px; border: 1px solid rgba(183, 201, 161, .19); border-radius: 5px; padding: 10px 14px; color: #e1e3cc; background: rgba(128, 162, 135, .07); text-align: left; }
.leader-clickable { width: 100%; }
.leader-clickable:not(:disabled):hover, .leader-clickable:not(:disabled):focus-visible { border-color: #afbe84; background: rgba(128, 162, 135, .15); }
.leader-clickable:disabled { cursor: default; opacity: .7; }
.leader-scope-row { background: transparent; }
.leader-rank { color: #d0b981; font-family: var(--serif); font-size: 21px; font-weight: 400; }
.leader-name { display: block; font-size: 13px; font-weight: 600; }
.leader-meta { display: block; margin-top: 3px; color: #a6b7a4; font-size: 11px; }
.reward-toast { position: fixed; z-index: 60; top: 112px; left: 50%; display: flex; align-items: center; gap: 16px; max-width: calc(100vw - 40px); border: 1px solid #d8c585; border-radius: 7px; padding: 18px 24px; color: #efdfb6; background: linear-gradient(135deg, #2a4b3c, #153b37); box-shadow: var(--shadow), 0 0 35px rgba(190, 204, 130, .16); transform: translateX(-50%) translateY(-12px); opacity: 0; pointer-events: none; transition: transform 350ms ease, opacity 350ms ease; }
.reward-toast.visible { opacity: 1; transform: translateX(-50%) translateY(0); }
.reward-toast > span { font-size: 37px; color: #e8d396; }
.reward-toast strong { font-family: var(--serif); font-size: 23px; font-weight: 400; white-space: nowrap; }
.reward-toast p { margin-top: 5px; color: #c4d2b9; font-size: 11px; }

@keyframes node-in { from { opacity: 0; transform: translate(-50%, -46%) scale(.86); } to { opacity: 1; transform: translate(-50%, -50%) scale(1); } }

@media (min-width: 1800px) {
  .node-field { width: 180px; height: 218px; }
  .node-field .node-orb { width: 180px; height: 178px; }
  .node-field .node-orb > svg { width: 184px; height: 184px; }
  .node-field .node-caption strong { font-size: 23px; }
}

@media (max-width: 1080px) {
  .map-heading { max-width: 220px; padding: 12px 15px; }
  .map-heading h1 { font-size: 27px; }
  .map-legend { display: none; }
  .node-course .node-caption { max-width: 170px; }
  .node-course .node-caption strong { font-size: 14px; }
}

@media (max-width: 760px) {
  .hud { top: 12px; left: 12px; right: 12px; min-height: 64px; gap: 10px; padding: 9px 10px; }
  .atlas-brand { gap: 7px; }
  .brand-compass { width: 29px; height: 29px; }
  .atlas-brand strong { font-size: 24px; }
  .atlas-brand span { display: none; }
  .player-hud { gap: 8px; }
  .player-menu-button { gap:8px; }
  .player-portrait { width: 35px; height: 35px; }
  .player-portrait svg { width: 34px; height: 34px; }
  .player-info { min-width: 117px; }
  .player-name-row { gap: 8px; font-size: 11px; }
  .player-name-row strong { max-width: 69px; }
  .level-label { font-size: 8px; }
  .xp-label { font-size: 8px; }
  .score-panel { padding-left: 6px; }
  .score-button { padding: 0 2px; font-size: 11px; }
  .score-button::before { font-size: 13px; margin-right: 3px; }
  .score-card { top: calc(100% + 12px); width: min(300px, calc(100vw - 35px)); padding: 18px; }
  #modeButton { position: fixed; top: 90px; right: 12px; min-height: 38px; font-size: 11px; }
  .map-heading { top: 94px; left: 17px; max-width: min(290px, calc(100vw - 78px)); padding: 7px 12px; }
  .map-heading .label { font-size: 8px; }
  .map-heading h1 { margin-top: 4px; font-size: 25px; }
  .map-heading > p:last-child { margin-top: 5px; font-size: 10px; }
  .map-canvas { top: 145px; height: var(--map-height, calc(100% - 270px)); }
  .map-node { width: 96px; height: 123px; }
  .node-orb { width: 90px; height: 86px; }
  .node-orb > svg, .node-icon, .node-image { width: 94px; height: 94px; }
  .node-caption { max-width: 125px; padding: 5px 7px; }
  .node-caption strong { font-size: 13px; }
  .node-caption small { font-size: 7px; letter-spacing: .04em; }
  .node-field { width: 118px; height: 143px; }
  .node-field .node-orb { width: 112px; height: 103px; }
  .node-field .node-orb > svg, .node-field .node-image { width: 115px; height: 115px; }
  .node-field .node-caption { max-width: 138px; }
  .node-field .node-caption strong { font-size: 15px; }
  .node-course .node-orb { width: 82px; height: 81px; }
  .node-course .node-orb > svg { width: 90px; height: 90px; }
  .node-course .node-caption { max-width: 138px; }
  .node-course .node-caption strong { font-size: 11px; }
  .node-region { width: 90px; height: 125px; }
  .node-region .node-orb { width: 83px; height: 80px; }
  .node-region .node-orb > svg { width: 87px; height: 87px; }
  .node-region .node-caption { max-width: 140px; }
  .node-region .node-caption strong { font-size: 12px; }
  .node-area { width: 74px; height: 100px; }
  .node-area .node-orb { width: 70px; height: 65px; }
  .node-area .node-orb > svg { width: 74px; height: 74px; }
  .node-area .node-caption { max-width: 129px; }
  .node-area .node-caption strong { font-size: 11px; }
  .node-area .node-caption small { display: none; }
  .node-popover { width: 228px; padding: 14px; }
  .node-title { font-size: 21px; }
  .node-summary { font-size: 11px; }
  .node-badge { right: -3px; bottom: 0; min-width: 22px; padding: 3px 5px; font-size: 8px; }
  .path-controls { left: 12px; bottom: 51px; max-width: calc(100vw - 77px); }
  .crumb { min-height: 42px; max-width: 210px; overflow: hidden; text-overflow: ellipsis; padding: 0 12px; font-size: 9px; }
  .zoom-button { right: 12px; bottom: 50px; width: 43px; height: 43px; min-height: 43px; font-size: 26px; }
  .adventure-guide { bottom: 20px; max-width: calc(100vw - 25px); font-size: 8px; }
  .adventure-guide i { padding: 0 4px; }
  .detail-drawer { right: 12px; bottom: 104px; width: calc(100vw - 24px); max-height: calc(100dvh - 192px); overflow-y: auto; padding: 24px; }
  .detail-drawer h2 { font-size: 27px; }
  .detail-prompt { font-size: 12px; }
  .detail-grid { gap: 10px; margin-top: 18px; }
  .action-tile { min-height: 180px; }
  .action-tile .quest-character { width: 67px; height: 76px; }
  .action-tile strong { font-size: 17px; }
  .tutor-header { gap: 13px; min-height: 94px; padding: 14px 50px 14px 17px; }
  .tutor-character { width: 44px; }
  .tutor-character svg { width: 44px; height: 54px; }
  .tutor-header .label { font-size: 8px; }
  .tutor-course-title { font-size: 9px; margin-top: 5px; }
  .tutor-header h2 { font-size: 23px; }
  .tutor-header .close-button { width: 32px; height: 32px; top: 14px; right: 10px; }
  .encounter-banner { min-height: 59px; padding: 11px 17px; gap: 10px; }
  .encounter-rune { font-size: 23px; }
  .encounter-status { font-size: 10px; }
  .encounter-instruction { font-size: 9px; line-height: 1.4; }
  .encounter-health { width: 68px; flex-shrink: 0; }
  .tutor-messages { gap: 12px; padding: 17px; }
  .tutor-message { width: 96%; padding: 13px; font-size: 13px; line-height: 1.6; }
  .tutor-form { grid-template-columns: 1fr auto; gap: 9px; padding: 12px; }
  .tutor-input-stack { grid-column: 1 / -1; }
  .tutor-form textarea { min-height: 65px; font-size: 12px; }
  .tutor-form button { min-width: 80px; }
  .input-mode-button { justify-self: start; }
  .tutor-form .primary-button { justify-self: end; }
  .oracle-visual { width: calc(100% - 36px); padding-top: 21px; }
  .oracle-paragraph { font-size: 16px; line-height: 1.75; }
  .oracle-equation { font-size: 17px; padding: 12px; }
  .oracle-room .tutor-message { font-size: 16px; }
  .leaderboard-view { padding: 94px 12px 104px; }
  .leaderboard-panel { padding: 23px 17px; max-height: calc(100dvh - 210px); }
  .leaderboard-panel h2 { font-size: 28px; }
  .leader-row { grid-template-columns: 26px 1fr auto; gap: 8px; padding: 10px; }
  .leader-meta { font-size: 10px; }
  .reward-toast { top: 100px; padding: 14px 17px; gap: 12px; }
  .reward-toast strong { font-size: 21px; }
  .reward-toast p { font-size: 10px; }
}

@media (max-width: 390px) {
  .brand-compass { display: none; }
  .atlas-brand strong { font-size: 23px; }
  .player-portrait { width: 29px; height: 29px; }
  .player-portrait svg { width: 28px; height: 28px; }
  .player-info { min-width: 107px; }
  .detail-drawer { padding: 20px; }
  .action-tile strong { font-size: 15px; }
  .login-panel { padding: 30px 25px; }
  .login-panel h1 { font-size: 60px; }
  .adventure-guide { font-size: 7px; }
}

@media (max-height: 640px) and (min-width: 761px) {
  .hud { top: 10px; min-height: 58px; padding-top: 6px; padding-bottom: 6px; }
  .map-heading { top: 88px; padding-top: 10px; padding-bottom: 10px; }
  .map-heading h1 { font-size: 27px; }
  .node-field { width: 130px; height: 162px; }
  .node-field .node-orb { width: 130px; height: 125px; }
  .node-field .node-orb > svg { width: 135px; height: 135px; }
  .node-field .node-caption strong { font-size: 17px; }
  .tutor-header { min-height: 88px; padding-top: 9px; padding-bottom: 9px; }
  .tutor-character svg { width: 52px; height: 61px; }
  .encounter-banner { min-height: 55px; padding-top: 10px; padding-bottom: 10px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; }
}

/* Painted game landmarks share one transparent sprite sheet. */
.node-field .subject-landmark { display:block; position:relative; z-index:1; flex-shrink:0; width:160px; height:160px; background-image:url('/assets/adventure/subject-landmarks-v2.png'); background-size:300% 200%; background-position:var(--subject-x) var(--subject-y); background-repeat:no-repeat; }
@media (min-width:1800px) {
 .node-field .subject-landmark { width:184px; height:184px; }
}
@media (max-width:760px) {
 .node-field .subject-landmark { width:115px; height:115px; }
}
@media (max-height:640px) and (min-width:761px) {
 .node-field .subject-landmark { width:135px; height:135px; }
}
.landmark-sprite { display:block; flex-shrink:0; width:128px; height:128px; background-image:url('/assets/adventure/landmarks.webp'); background-size:300% 200%; background-position:var(--landmark-x) var(--landmark-y); background-repeat:no-repeat; }
.node-course { height:182px; }
.node-course .node-orb { width:144px; height:140px; }
.node-course .landmark-sprite { width:144px; height:144px; }
.node-unit { width:136px; height:172px; }
.node-unit .node-orb { width:132px; height:127px; }
.node-unit .landmark-sprite { width:132px; height:132px; }
.node-unit .node-caption { max-width:185px; }
.node-unit .node-caption strong { font-size:15px; }
.node-region .landmark-sprite { width:116px; height:116px; }
.node-area .landmark-sprite { width:96px; height:96px; }
.map-heading { max-width:340px; }
.map-heading h1 { display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:2; overflow:hidden; }
.map-heading > p:last-child { display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:2; overflow:hidden; }
.atlas-view[data-depth="fields"] .map-heading { max-width:240px; }
.atlas-view:has(.detail-drawer:not(.hidden)) .node-popover, .atlas-view:has(.tutor-panel:not(.hidden)) .node-popover { display:none; }
@media (max-width:760px) {
 .map-heading { max-width:min(290px, calc(100vw - 78px)); }
 .node-course { height:138px; }
 .node-course .node-orb { width:96px; height:92px; }
 .node-course .landmark-sprite { width:100px; height:100px; }
 .node-unit { width:106px; height:138px; }
 .node-unit .node-orb { width:98px; height:92px; }
 .node-unit .landmark-sprite { width:102px; height:102px; }
 .node-unit .node-caption { max-width:145px; }
 .node-unit .node-caption strong { font-size:12px; }
 .node-region .landmark-sprite { width:90px; height:90px; }
 .node-area .landmark-sprite { width:78px; height:78px; }
}

.score-card { visibility:hidden; }
.score-panel.open .score-card { visibility:visible; }
.tutor-panel.victory .monster-character { opacity:.5; filter:grayscale(.65); transform:scale(.94); }
.tutor-panel.victory .encounter-status { color:#c4e4a4; }
.reward-toast { visibility:hidden; }
.reward-toast.visible { visibility:visible; }

/* A topic's creatures roam one subject-themed hunting ground. */
.hunting-ground { --hunt-accent:#9dc9e0; --hunt-map:url('/assets/adventure/world-map.webp'); --hunt-map-size:260% 200%; --hunt-map-position:50% 0%; position:fixed; inset:99px 24px 84px; z-index:42; overflow-y:auto; isolation:isolate; border:1px solid rgba(225, 207, 157, .4); border-radius:9px; background-color:#123538; background-image:linear-gradient(180deg, rgba(7, 29, 34, .82), rgba(9, 34, 33, .32) 35%, rgba(7, 31, 34, .35) 70%, rgba(7, 27, 31, .88)), radial-gradient(ellipse at center, transparent 10%, rgba(5, 23, 29, .42)), var(--hunt-map); background-size:100% 100%, 100% 100%, var(--hunt-map-size); background-position:center, center, var(--hunt-map-position); background-repeat:no-repeat; box-shadow:var(--shadow); scrollbar-color:#6d9183 #173a3c; scrollbar-width:thin; }
.hunting-ground[data-realm="physics"] { --hunt-map:url('/assets/adventure/physics-realm.webp'); --hunt-map-size:cover; --hunt-map-position:center; }
.hunting-ground[data-realm="math"] { --hunt-accent:#b1d5a0; }
.hunting-ground[data-realm="chemistry"] { --hunt-accent:#dfb38b; }
.hunting-ground[data-realm="chemistry"] { --hunt-map-position:100% 0%; }
.hunting-ground[data-realm="computer-science"] { --hunt-accent:#edc984; }
.hunting-ground[data-realm="computer-science"] { --hunt-map-position:0% 100%; }
.hunting-ground[data-realm="mechanical-engineering"] { --hunt-accent:#91d3c7; }
.hunting-ground[data-realm="mechanical-engineering"] { --hunt-map-position:50% 100%; }
.hunting-ground[data-realm="electrical-engineering"] { --hunt-accent:#c9b0ea; }
.hunting-ground[data-realm="electrical-engineering"] { --hunt-map-position:100% 100%; }
.hunting-header { position:relative; display:flex; justify-content:space-between; align-items:flex-start; gap:25px; padding:26px 30px 17px; background:linear-gradient(180deg, rgba(11, 35, 38, .65), transparent); }
.hunting-header .label { color:var(--hunt-accent); }
.hunting-heading-copy { max-width:850px; }
.hunting-course { margin-top:6px; color:#c0cfc1; font-size:11px; }
.hunting-header h2 { margin-top:7px; color:#f3e9c9; font-family:var(--serif); font-size:clamp(28px, 2.3vw, 37px); font-weight:400; line-height:1.15; text-wrap:balance; }
.hunting-intro { margin-top:11px; color:#c5d4c2; font-size:12px; line-height:1.6; }
.hunting-header .hud-button { flex-shrink:0; font-size:11px; }
.hunting-trail-note { position:relative; display:flex; align-items:center; gap:10px; padding:11px 30px; border-top:1px solid rgba(220, 200, 148, .17); border-bottom:1px solid rgba(220, 200, 148, .17); color:#d2ddc9; font-size:10px; line-height:1.5; background:rgba(8, 30, 33, .43); }
.hunting-trail-note > span:first-child { color:var(--hunt-accent); font-size:22px; }
.hunting-trail-note > span:last-child { margin-left:auto; color:#c8d7be; }
.hunting-cards { position:relative; display:grid; grid-template-columns:repeat(4, minmax(0, 1fr)); gap:22px 14px; min-height:300px; max-width:1300px; margin:0 auto; padding:16px 36px 15px; }
.monster-choice { --tier-accent:#c3d59d; position:relative; display:flex; flex-direction:column; align-items:center; justify-content:flex-start; min-width:0; min-height:238px; border:1px solid transparent; border-radius:12px; padding:0 10px 11px; color:#e6edd0; text-align:center; background:transparent; transition:transform 180ms ease, background 180ms ease; }
.monster-choice.difficulty-standard { --tier-accent:#a7d3d6; }
.monster-choice.difficulty-hard { --tier-accent:#e4b785; }
.monster-choice.difficulty-legendary { --tier-accent:#d8b4eb; }
.monster-choice:hover:not(:disabled) { background:radial-gradient(ellipse at 50% 55%, rgba(230, 220, 150, .17), transparent 65%); transform:translateY(-4px); }
.monster-choice:focus-visible { outline:2px solid var(--tier-accent); outline-offset:1px; background:rgba(13, 46, 40, .3); }
.monster-choice:disabled { opacity:.75; }
.monster-stage { position:relative; display:grid; place-items:center; width:170px; height:164px; flex-shrink:0; }
.monster-stage::before { content:""; position:absolute; left:12%; right:12%; bottom:0; height:34px; border:1px solid rgba(194, 205, 143, .26); border-radius:50%; background:radial-gradient(ellipse, rgba(21, 42, 31, .75), rgba(170, 192, 118, .11)); box-shadow:0 0 22px rgba(186, 199, 126, .12); }
.monster-sprite { display:block; position:relative; width:170px; height:170px; flex-shrink:0; background-image:url('/assets/adventure/monster-host.png'); background-size:400% 200%; background-position:var(--monster-x) var(--monster-y); background-repeat:no-repeat; filter:drop-shadow(0 8px 7px rgba(0, 17, 28, .4)); }
.monster-choice.difficulty-easy .monster-sprite { width:145px; height:145px; }
.monster-choice.difficulty-legendary .monster-sprite { width:183px; height:183px; }
.monster-caption { position:relative; z-index:2; display:block; width:100%; max-width:245px; min-height:85px; padding:9px 11px 10px; border:1px solid rgba(204, 211, 160, .3); border-radius:6px; background:rgba(13, 36, 37, .9); box-shadow:0 4px 18px rgba(3, 25, 31, .23); backdrop-filter:blur(7px); }
.monster-caption > strong { display:block; color:#f4e7c1; font-family:var(--serif); font-size:19px; font-weight:400; line-height:1.2; text-wrap:balance; }
.monster-badges { display:flex; align-items:center; justify-content:center; gap:8px; margin-top:9px; }
.monster-tier { color:var(--tier-accent); font-size:9px; font-weight:600; letter-spacing:.08em; text-transform:uppercase; }
.monster-reward { border-left:1px solid rgba(200, 210, 158, .27); padding-left:8px; color:#f1d591; font-size:11px; font-weight:650; white-space:nowrap; }
.monster-caption small { display:block; margin-top:8px; color:#b4c7b0; font-size:10px; line-height:1.45; }
.monster-choice:hover:not(:disabled) .monster-caption, .monster-choice:focus-visible .monster-caption { border-color:var(--tier-accent); }
.hunting-feedback { position:relative; display:flex; align-items:center; justify-content:center; gap:12px; max-width:760px; margin:0 auto; padding:10px 25px; color:#e7d2a4; font-size:12px; text-align:center; line-height:1.6; }
.hunting-footer { position:relative; margin:0; padding:0 25px 25px; color:#bacdb6; font-size:10px; line-height:1.6; text-align:center; }
.tutor-panel.monster-selected .monster-character { display:none; }
.tutor-panel.monster-selected .tutor-character { width:88px; }
.tutor-panel.monster-selected .tutor-character .monster-sprite { width:94px; height:94px; }
.tutor-panel.victory .tutor-character .monster-sprite { opacity:.65; filter:grayscale(.55) drop-shadow(0 5px 5px rgba(0, 17, 28, .35)); }
.encounter-species { margin-top:6px; color:#e6ca8c; font-size:11px; line-height:1.4; }
.atlas-view:has(.hunting-ground:not(.hidden)) .map-heading, .atlas-view:has(.hunting-ground:not(.hidden)) .adventure-guide, .atlas-view:has(.hunting-ground:not(.hidden)) .map-legend { display:none; }
.atlas-view:has(.hunting-ground:not(.hidden)) .node-popover { display:none; }
@media (min-width:1800px) {
 .hunting-cards { padding-top:27px; gap:25px; }
 .monster-stage { width:195px; height:184px; }
 .monster-sprite { width:193px; height:193px; }
 .monster-choice.difficulty-easy .monster-sprite { width:168px; height:168px; }
 .monster-choice.difficulty-legendary .monster-sprite { width:210px; height:210px; }
}
@media (max-width:1000px) {
 .hunting-cards { padding-left:18px; padding-right:18px; gap:17px 8px; }
 .monster-stage { width:140px; height:138px; }
 .monster-sprite { width:145px; height:145px; }
 .monster-choice.difficulty-easy .monster-sprite { width:125px; height:125px; }
 .monster-choice.difficulty-legendary .monster-sprite { width:158px; height:158px; }
 .monster-caption { padding-left:8px; padding-right:8px; }
 .monster-caption > strong { font-size:17px; }
}
@media (max-width:760px) {
 .hunting-ground { inset:89px 12px 28px; }
 .hunting-header { flex-wrap:wrap; gap:14px; padding:23px 20px 17px; }
 .hunting-header h2 { font-size:28px; }
 .hunting-header .hud-button { min-height:40px; padding:0 12px; font-size:10px; }
 .hunting-intro { font-size:11px; }
 .hunting-trail-note { flex-wrap:wrap; gap:5px 9px; padding:10px 20px; font-size:9px; }
 .hunting-trail-note > span:last-child { flex-basis:100%; margin-left:26px; }
 .hunting-cards { grid-template-columns:repeat(2, minmax(0, 1fr)); padding:17px 12px 15px; gap:22px 6px; }
 .monster-choice { min-height:220px; padding:0 4px 5px; }
 .monster-stage { width:133px; height:136px; }
 .monster-sprite { width:143px; height:143px; }
 .monster-choice.difficulty-easy .monster-sprite { width:125px; height:125px; }
 .monster-choice.difficulty-legendary .monster-sprite { width:149px; height:149px; }
 .monster-caption { min-height:91px; padding:8px 6px; }
 .monster-caption > strong { font-size:16px; }
 .monster-caption small { font-size:9px; }
 .monster-tier { font-size:8px; letter-spacing:.03em; }
 .monster-reward { font-size:10px; padding-left:6px; }
 .monster-badges { gap:6px; }
 .hunting-footer { padding:0 20px 22px; font-size:9px; }
 .tutor-panel.monster-selected .tutor-character { width:55px; }
 .tutor-panel.monster-selected .tutor-character .monster-sprite { width:64px; height:64px; }
 .encounter-species { margin-top:5px; font-size:9px; }
}
@media (max-width:390px) {
 .monster-stage { width:117px; height:123px; }
 .monster-sprite { width:125px; height:125px; }
 .monster-choice.difficulty-easy .monster-sprite { width:112px; height:112px; }
 .monster-choice.difficulty-legendary .monster-sprite { width:132px; height:132px; }
 .monster-caption > strong { font-size:15px; }
}
@media (max-height:650px) and (max-width:760px) {
 .hunting-ground { inset:8px; z-index:55; }
 .hunting-header { padding:18px; }
 .hunting-header h2 { font-size:25px; }
 .hunting-header .hud-button { min-height:38px; }
}
.encounter-actions { display:flex; flex-shrink:0; align-items:center; gap:10px; padding:12px 28px; border-bottom:1px solid rgba(224, 200, 135, .19); background:rgba(4, 26, 30, .28); }
.encounter-count { flex:1; color:#b6c9b2; font-size:11px; line-height:1.5; }
.encounter-actions .hud-button { min-height:40px; font-size:11px; white-space:nowrap; }
#nextEncounterButton { border-color:rgba(225, 196, 131, .55); color:#eddaa9; background:#24483c; }
#nextEncounterButton:hover:not(:disabled) { background:#345741; border-color:#efd89b; }
.problem-card { white-space:normal; }
.encounter-problem-name { margin:0 0 12px; font-family:var(--serif); font-size:22px; font-weight:400; line-height:1.2; color:#efdcaa; }
.problem-prompt { margin:0; white-space:pre-wrap; }
.scientific-figure { margin:0; border:1px solid rgba(225, 207, 161, .55); border-radius:7px; padding:15px; background:#f6f1e6; color:#24443f; white-space:normal; overflow:hidden; }
.scientific-figure img { display:block; width:100%; height:auto; max-height:320px; object-fit:contain; background:#f6f1e6; }
.scientific-figure figcaption { margin-top:12px; padding-top:11px; border-top:1px solid rgba(58, 83, 72, .15); color:#425e56; font-size:12px; line-height:1.55; font-family:-apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; }
.problem-card .scientific-figure { margin-top:19px; }
.problem-card .scientific-figure img { max-height:240px; }
.oracle-lesson-block .scientific-figure { width:100%; }
@media (max-width:760px) {
 .encounter-actions { flex-wrap:wrap; gap:8px; padding:10px 16px; }
 .encounter-count { flex-basis:100%; font-size:10px; }
 .encounter-actions .hud-button { flex:1; padding:0 11px; min-height:38px; font-size:10px; }
 .scientific-figure { padding:9px; }
 .scientific-figure img { max-height:360px; }
 .scientific-figure figcaption { font-size:11px; margin-top:9px; padding-top:8px; }
 .encounter-problem-name { font-size:20px; margin-bottom:10px; }
}
@media (max-height:650px) and (max-width:760px) {
 .tutor-header { min-height:70px; padding-top:10px; padding-bottom:10px; }
 .tutor-header h2 { font-size:19px; }
 .tutor-character svg { height:42px; }
 .encounter-banner { min-height:47px; padding-top:8px; padding-bottom:8px; }
 .encounter-instruction { display:none; }
 .tutor-form { padding:8px 12px; }
 .tutor-form textarea { min-height:52px; }
 .detail-drawer { z-index:55; top:8px; bottom:8px; max-height:calc(100dvh - 16px); }
 .action-tile { min-height:140px; }
 .action-tile .quest-character { height:58px; }
 .reward-toast { top:16px; z-index:60; }
}

/* Learning evidence stays separate from the adventure's XP rewards. */
.map-heading .map-learning-summary { margin-top:9px; font-size:10px; line-height:1.45; color:#b9d2bb; }
.topic-learning-summary { margin-top:14px; padding:12px 14px; border:1px solid rgba(176,204,162,.25); border-radius:6px; background:rgba(92,130,93,.09); }
.topic-learning-summary strong, .tutor-learning-summary strong { color:#cddfba; font-size:12px; }
.topic-learning-summary p { margin-top:6px; color:#bdcdb7; font-size:11px; line-height:1.6; }
[data-mastery="demonstrated"] { color:#c8e3a7 !important; }
[data-mastery="building"] { color:#e8ca95 !important; }
[data-mastery="practicing"] { color:#b9d3d4 !important; }
.node-area .node-caption .node-mastery { font-size:8px; letter-spacing:.035em; }
.hunting-learning-summary { max-width:900px; margin:16px auto 0; padding:11px 16px; border:1px solid rgba(189,211,175,.22); border-radius:6px; background:rgba(10,32,33,.72); color:#c5d7be; font-size:12px; line-height:1.6; }
.practice-suggestion { display:inline-block; margin-top:7px; font-size:9px; color:#d3e6b7; letter-spacing:.03em; }
.monster-choice.is-recommended .monster-caption { border-color:rgba(190,213,155,.48); }
.tutor-workspace { flex:1 1 auto; min-height:0; overflow:auto; overscroll-behavior:contain; scrollbar-color:#607d6f #12282b; scrollbar-width:thin; }
.tutor-workspace .tutor-messages { overflow:visible; flex:none; min-height:0; }
.tutor-panel.oracle-room { display:flex; overflow:hidden; }
.oracle-room .tutor-header { position:relative; flex-shrink:0; min-height:72px; padding:10px 58px 10px 20px; gap:14px; }
.oracle-room .tutor-character { width:40px; }
.oracle-room .tutor-character svg { width:40px; height:52px; }
.oracle-room #tutorModeLabel { display:none; }
.oracle-room .tutor-course-title { margin-top:0; font-size:10px; }
.oracle-room .tutor-header h2 { margin-top:4px; font-size:23px; display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:2; overflow:hidden; }
.oracle-room .tutor-header .close-button { top:17px; }
.oracle-room .tutor-form { position:relative; bottom:auto; margin-top:0; }
.oracle-room .encounter-banner { display:none; }
.oracle-room .encounter-instruction { display:none; }
.oracle-room .encounter-actions { padding:6px 20px; min-height:42px; }
.oracle-room .encounter-actions .hud-button { min-height:30px; font-size:10px; }
.oracle-room .encounter-count { font-size:10px; }
.oracle-room .tutor-form { padding:8px 18px; gap:7px; }
.oracle-room .tutor-form textarea { min-height:54px; max-height:110px; padding:9px 11px; }
.oracle-room .tutor-form > button { min-height:40px; }
.oracle-room .tutor-response-modes .hud-button { min-height:28px; }
.oracle-room .oracle-visual { padding-top:22px; }
.oracle-room .tutor-message { font-family:inherit; font-size:14px; line-height:1.65; }
.oracle-room .tutor-message.student { font-size:13px; }
.master-step-heading h3 { margin-top:7px; font-family:var(--serif); font-size:26px; font-weight:400; line-height:1.2; color:#f3e7c1; }
.master-step-heading .label { font-size:9px; }
.master-objectives { margin:14px 0 19px; font-size:11px; color:#c1d0ba; }
.master-objectives summary { min-height:28px; cursor:pointer; color:#d2ddb9; }
.master-objectives ul { margin:5px 0 12px; padding-left:21px; line-height:1.65; }
.master-step .oracle-lesson-block { gap:16px; }
.master-step .oracle-paragraph { font-size:17px; line-height:1.65; white-space:pre-wrap; overflow-wrap:anywhere; }
.master-code { margin:0; padding:16px; border:1px solid rgba(161,196,179,.28); border-radius:6px; background:#0a242b; overflow:auto; font-size:13px; line-height:1.65; color:#d4e6c9; tab-size:2; }
.master-step .scientific-figure img { max-height:230px; }
.master-step .visual-figure img, .problem-card .visual-figure img, .problem-figure .visual-figure img { max-height:min(62vh,620px); }
.encounter-figure { width:100%; }
.master-checkpoint { margin-top:21px; padding:16px 18px; border:1px solid rgba(233,205,142,.4); border-radius:6px; background:rgba(191,158,93,.08); }
.master-checkpoint .label { font-size:9px; }
.master-checkpoint > p:nth-child(2) { margin-top:9px; color:#eee5c9; font-size:15px; line-height:1.7; white-space:pre-wrap; overflow-wrap:anywhere; }
.master-checkpoint small { display:block; margin-top:9px; color:#b6c8b7; font-size:10px; line-height:1.5; }
.lesson-complete { margin:19px 0 0; color:#cee0b4; font-size:14px; line-height:1.6; }
.master-controls { display:flex; flex-shrink:0; flex-wrap:wrap; align-items:center; gap:8px; padding:9px 22px; border-top:1px solid var(--line); background:#193333; }
.master-step-label { margin-right:auto; color:#bdcfb9; font-size:11px; }
.master-controls .hud-button { min-height:39px; border:1px solid rgba(171,197,159,.25); border-radius:5px; padding:0 13px; background:rgba(95,127,92,.1); font-size:11px; }
.oracle-room .master-controls { padding-top:6px; padding-bottom:6px; }
.oracle-room .master-controls .hud-button { min-height:34px; }
.master-controls .hud-button:disabled, .tutor-form button:disabled, .encounter-actions button:disabled { opacity:.5; cursor:default; }
.tutor-response-modes { grid-column:1 / -1; display:flex; gap:8px; align-items:center; }
.tutor-response-modes .hud-button { min-height:34px; min-width:0; padding:0 11px; border:1px solid rgba(190,207,173,.22); border-radius:5px; font-size:10px; background:transparent; color:#b9cbb8; }
.tutor-response-modes [aria-pressed="true"] { color:#f3e3b4; border-color:#b9bc83; background:rgba(159,156,92,.17); }
.tutor-learning-summary { width:min(800px,calc(100% - 56px)); margin:0 auto 22px; border-top:1px solid rgba(169,192,160,.2); padding-top:12px; color:#baceb7; font-size:11px; }
.tutor-learning-summary summary { display:flex; flex-wrap:wrap; justify-content:space-between; align-items:center; gap:8px; min-height:32px; cursor:pointer; }
.tutor-learning-summary summary span { color:#a8bea9; font-size:10px; }
.tutor-learning-summary p { margin-top:7px; line-height:1.7; }
.learning-feedback { white-space:normal; }
.learning-feedback p + p { margin-top:12px; }
.learning-feedback strong { display:block; color:#ead5a6; font-size:11px; margin-bottom:4px; }
.learning-feedback span { display:block; white-space:pre-wrap; }
.tutor-message.hint { color:#d2dfc4; background:rgba(108,149,111,.09); border-color:rgba(162,196,136,.35); }
.hint-heading { display:flex; justify-content:space-between; gap:12px; color:#d8e3b6; font-size:13px; }
.hint-heading span { color:#a9bca3; font-size:10px; }
.tutor-message.hint p { margin-top:9px; white-space:pre-wrap; }
.tutor-message.worked-solution { border-color:rgba(226,190,115,.55); background:rgba(154,124,60,.1); }
.worked-solution .hint-heading { color:#e7cf98; }

@media (max-width:760px) {
 .node-area .node-caption .node-mastery { display:block; font-size:7px; }
 .hunting-learning-summary { margin-top:12px; padding:10px 12px; font-size:11px; }
 .oracle-room .oracle-visual { width:calc(100% - 32px); padding-top:17px; }
 .master-step-heading h3 { font-size:23px; }
 .master-step .oracle-paragraph { font-size:16px; }
 .master-step .scientific-figure img { max-height:200px; }
 .master-step .visual-figure img, .problem-card .visual-figure img, .problem-figure .visual-figure img { max-height:min(58vh,480px); }
 .master-checkpoint { padding:13px; margin-top:17px; }
 .master-checkpoint > p:nth-child(2) { font-size:14px; }
 .master-controls { padding:8px 12px; gap:6px; }
 .master-step-label { font-size:10px; }
 .master-controls .hud-button { min-height:36px; padding:0 10px; font-size:10px; }
 .tutor-learning-summary { width:calc(100% - 34px); }
 .oracle-room .encounter-count { display:none; }
 .tutor-response-modes .hud-button { min-height:32px; }
}
@media (max-height:650px) {
 .tutor-panel, .tutor-panel.oracle-room { display:block; overflow-y:auto; overscroll-behavior:contain; }
 .tutor-workspace, .oracle-room .tutor-workspace { min-height:220px; overflow:visible; }
 .tutor-header .tutor-course-title, .oracle-room .tutor-character { display:none; }
 .tutor-header, .oracle-room .tutor-header { position:sticky; top:0; z-index:4; background:#173235; }
 .oracle-room .tutor-header { min-height:60px; }
 .oracle-room .encounter-banner { display:none; }
 .master-controls .hud-button { min-height:32px; }
 .master-controls { padding-top:6px; padding-bottom:6px; }
 .tutor-response-modes .hud-button { min-height:30px; }
 .oracle-room .tutor-form { gap:6px; }
 .oracle-room .tutor-form textarea { min-height:48px; }
}

/* Idle motion belongs to character artwork; controls and labels keep their positions. */
.character-idle {
  --idle-distance: 3px;
  --idle-strength: 1;
  transform-box: fill-box;
  transform-origin: 50% 88%;
  animation-duration: var(--idle-duration, 6s);
  animation-delay: var(--idle-phase, 0s);
  animation-timing-function: ease-in-out;
  animation-iteration-count: infinite;
  animation-fill-mode: both;
  pointer-events: none;
}
.idle-master { --idle-duration: 7.2s; --idle-phase: -1.8s; --idle-distance: 2px; animation-name: character-master; }
.idle-guard { --idle-duration: 5.7s; --idle-phase: -3.1s; animation-name: character-guard; }
.idle-float { --idle-duration: 5.8s; --idle-phase: -1.4s; --idle-distance: 5px; animation-name: character-float; transform-origin: 50% 50%; }
.idle-bounce { --idle-duration: 4.6s; --idle-phase: -2.9s; animation-name: character-bounce; transform-origin: 50% 93%; }
.idle-prowl { --idle-duration: 6.3s; --idle-phase: -4.2s; animation-name: character-prowl; }
.idle-flutter { --idle-duration: 3.8s; --idle-phase: -.8s; --idle-distance: 4px; animation-name: character-flutter; transform-origin: 50% 56%; }
.idle-heavy { --idle-duration: 7.8s; --idle-phase: -5.1s; animation-name: character-heavy; transform-origin: 50% 94%; }
.idle-skitter { --idle-duration: 5.4s; --idle-phase: -2.2s; animation-name: character-skitter; transform-origin: 50% 92%; }
.idle-dragon { --idle-duration: 6.8s; --idle-phase: -4.7s; animation-name: character-dragon; transform-origin: 50% 79%; }
.idle-titan { --idle-duration: 8.6s; --idle-phase: -3.5s; animation-name: character-titan; transform-origin: 50% 95%; }

/* Portraits breathe gently while the student reads or writes. */
.tutor-character .character-idle { --idle-distance: 1.2px; --idle-strength: .45; }
.tutor-panel.victory .tutor-character .character-idle { animation: none; }

/* The saved preference can pause characters without changing any game controls. */
:root[data-character-motion="paused"] .character-idle,
.character-motion-paused .character-idle,
.character-idle.hidden,
.hidden .character-idle { animation-play-state: paused; }

@keyframes character-master {
  0%, 100% { translate: 0 0; rotate: calc(-.45deg * var(--idle-strength)); scale: 1; }
  50% { translate: 0 calc(-.7 * var(--idle-distance)); rotate: calc(.45deg * var(--idle-strength)); scale: 1 calc(1 + .012 * var(--idle-strength)); }
}
@keyframes character-guard {
  0%, 100% { translate: 0 0; rotate: calc(-.6deg * var(--idle-strength)); scale: 1; }
  50% { translate: 0 calc(-.45 * var(--idle-distance)); rotate: calc(.6deg * var(--idle-strength)); scale: calc(1 + .012 * var(--idle-strength)) calc(1 + .018 * var(--idle-strength)); }
}
@keyframes character-float {
  0%, 100% { translate: calc(-.2 * var(--idle-distance)) 0; rotate: calc(-1deg * var(--idle-strength)); }
  50% { translate: calc(.2 * var(--idle-distance)) calc(-1 * var(--idle-distance)); rotate: calc(1deg * var(--idle-strength)); }
}
@keyframes character-bounce {
  0%, 100% { translate: 0 0; scale: calc(1 + .018 * var(--idle-strength)) calc(1 - .015 * var(--idle-strength)); }
  50% { translate: 0 calc(-.75 * var(--idle-distance)); scale: calc(1 - .01 * var(--idle-strength)) calc(1 + .02 * var(--idle-strength)); }
}
@keyframes character-prowl {
  0%, 100% { translate: calc(-.65 * var(--idle-distance)) 0; rotate: calc(-.6deg * var(--idle-strength)); }
  50% { translate: calc(.65 * var(--idle-distance)) calc(-.25 * var(--idle-distance)); rotate: calc(.6deg * var(--idle-strength)); }
}
@keyframes character-flutter {
  0%, 100% { translate: calc(-.2 * var(--idle-distance)) 0; rotate: calc(-1.3deg * var(--idle-strength)); scale: 1; }
  50% { translate: calc(.2 * var(--idle-distance)) calc(-.8 * var(--idle-distance)); rotate: calc(1.3deg * var(--idle-strength)); scale: calc(1 + .007 * var(--idle-strength)); }
}
@keyframes character-heavy {
  0%, 100% { translate: 0 0; scale: 1; rotate: calc(-.25deg * var(--idle-strength)); }
  50% { translate: 0 calc(.2 * var(--idle-distance)); scale: calc(1 + .01 * var(--idle-strength)) calc(1 - .006 * var(--idle-strength)); rotate: calc(.25deg * var(--idle-strength)); }
}
@keyframes character-skitter {
  0%, 100% { translate: 0 0; rotate: calc(-.6deg * var(--idle-strength)); }
  35% { translate: calc(.65 * var(--idle-distance)) calc(-.15 * var(--idle-distance)); rotate: calc(.6deg * var(--idle-strength)); }
  70% { translate: calc(-.4 * var(--idle-distance)) 0; rotate: calc(-.3deg * var(--idle-strength)); }
}
@keyframes character-dragon {
  0%, 100% { translate: 0 0; scale: 1; rotate: calc(-.45deg * var(--idle-strength)); }
  50% { translate: 0 calc(-.5 * var(--idle-distance)); scale: calc(1 + .008 * var(--idle-strength)) calc(1 + .014 * var(--idle-strength)); rotate: calc(.45deg * var(--idle-strength)); }
}
@keyframes character-titan {
  0%, 100% { translate: 0 0; scale: 1; }
  50% { translate: 0 calc(-.2 * var(--idle-distance)); scale: calc(1 + .006 * var(--idle-strength)) calc(1 + .01 * var(--idle-strength)); }
}
@media (prefers-reduced-motion: reduce) {
  .character-idle { animation: none !important; }
}
.account-tabs { display:flex; flex-wrap:wrap; gap:8px; margin-top:22px; }
.account-tabs button { min-height:40px; padding:8px 12px; border:1px solid var(--line); border-radius:5px; color:var(--ink); background:rgba(11,32,34,.7); }
.account-tabs button[aria-pressed="true"] { border-color:var(--gold); color:#f5deb0; background:#35524a; }
.account-field, .account-form { display:grid; gap:10px; }
.account-help { margin:0; color:#bbcabc; font-size:12px; line-height:1.6; }
.account-feedback { min-height:1.4em; color:#e9d79e; font-size:13px; line-height:1.6; }
.credits-button { min-width:115px; max-width:180px; padding:6px 10px; font-size:11px; line-height:1.5; }
.account-overlay { position:fixed; inset:0; z-index:150; overflow:auto; padding:35px 18px; background:rgba(5,23,27,.88); backdrop-filter:blur(8px); }
.account-card { position:relative; width:min(610px,100%); margin:auto; padding:34px; border:1px solid var(--gold); border-radius:12px; color:var(--ink); background:linear-gradient(135deg,#193535,#122b2e); box-shadow:var(--shadow); }
.account-card h2 { margin:8px 0 20px; font:400 32px var(--serif); }
.account-card h3 { margin:4px 0 8px; font-size:16px; }
.account-card p { margin:10px 0; line-height:1.6; }
.wallet-history { margin-top:16px; padding:12px 0; border-top:1px solid var(--line); }
.wallet-history summary { cursor:pointer; color:#e9d79e; font-size:13px; }
.wallet-activity { list-style:none; margin:14px 0 0; padding:0; }
.wallet-activity-entry { display:flex; align-items:start; justify-content:space-between; gap:14px; padding:10px 0; border-bottom:1px solid var(--line); font-size:12px; }
.wallet-activity-entry strong { display:block; font-weight:500; overflow-wrap:anywhere; }
.wallet-activity-entry small { display:block; margin-top:4px; color:#bbcabc; line-height:1.5; }
.wallet-activity-entry > span { flex-shrink:0; font-variant-numeric:tabular-nums; }
.credits-added { color:#b6d9ae; }
.credits-used { color:#e9d79e; }
.wallet-empty { font-size:12px; color:#bbcabc; }
.account-form { margin-top:24px; padding-top:20px; border-top:1px solid var(--line); text-align:left; }
.account-form label { font-size:12px; }
.account-form input { width:100%; min-height:44px; padding:10px 12px; border:1px solid var(--line); border-radius:5px; color:var(--ink); background:#0e2528; }
.account-form button { justify-self:start; }
.learning-notes-section { margin-top:24px; padding-top:20px; border-top:1px solid var(--line); text-align:left; }
.learning-notes-section h3 { margin:0 0 10px; }
.learning-preferences-form { margin-top:15px; padding-top:0; border:0; }
.learning-preferences-form textarea { width:100%; padding:12px; border:1px solid var(--line); border-radius:5px; background:#0e2528; color:var(--ink); font:inherit; font-size:13px; line-height:1.6; resize:vertical; min-height:100px; }
.learning-notes-list { margin:12px 0 0; padding:0; list-style:none; display:grid; gap:10px; }
.learning-note { display:flex; align-items:start; gap:12px; padding:12px; border:1px solid rgba(190,207,173,.2); border-radius:6px; background:rgba(4,26,30,.25); }
.learning-note > div { flex:1; min-width:0; }
.learning-note p { margin:5px 0 0; font-size:13px; line-height:1.6; overflow-wrap:anywhere; }
.learning-note-kind { color:#bac9af; font-size:11px; }
.learning-note .hud-button { min-height:34px; font-size:11px; flex-shrink:0; }
.learning-notes-empty { color:#bac9af; font-size:12px; line-height:1.6; }
.encounter-reward-info { flex-shrink:0; padding:9px 28px; background:#173035; border-bottom:1px solid rgba(224,200,135,.16); color:#d7d8b7; font-size:12px; line-height:1.6; }
.encounter-reward-info summary { cursor:pointer; }
.encounter-reward-info p { margin:9px 0 3px; max-width:900px; color:#bbcdc1; }
.encounter-reward-info.assisted-reward summary { color:#f0d094; }
@media (max-width:600px) { .encounter-reward-info { padding:8px 16px; font-size:11px; } .learning-note { flex-wrap:wrap; } }
.account-data-controls { display:grid; gap:12px; margin-top:24px; }
.account-data-controls a { display:flex; align-items:center; justify-content:center; text-decoration:none; }
.account-data-controls p,.credit-info { color:#bbcabc; font-size:12px; }
.account-danger { border-color:#926353; }
.account-danger button { border-color:#ba8672; }
.journal-entries { display:grid; gap:12px; margin-top:22px; }
.journal-entry { padding:14px; border:1px solid var(--line); border-radius:5px; }
.journal-entry p { margin:6px 0 0; font-size:12px; color:#bbcabc; }
.leader-self { border-color:var(--gold); }
.admin-card { width:min(1250px,100%); padding:34px; }
.admin-intro { max-width:850px; color:#bdcdbf; font-size:13px; }
.admin-overview { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:12px; margin:22px 0 30px; }
.admin-stat { display:grid; align-content:start; gap:9px; min-height:125px; padding:18px; border:1px solid var(--line); border-radius:8px; background:rgba(4,22,26,.35); }
.admin-stat > span,.admin-stat > small { font-size:11px; line-height:1.5; color:#bdcdbf; }
.admin-stat > strong { font:400 27px var(--serif); color:#f2ddac; font-variant-numeric:tabular-nums; overflow-wrap:anywhere; }
.admin-budget { grid-column:1/-1; padding:16px 18px; border:1px solid var(--line); border-radius:8px; }
.admin-budget > div:first-child { display:flex; justify-content:space-between; gap:15px; font-size:12px; }
.admin-budget p { margin:8px 0 0; font-size:11px; color:#bdcdbf; }
.admin-budget-track { height:7px; margin-top:12px; overflow:hidden; border-radius:4px; background:#092125; }
.admin-budget-track > span { display:block; height:100%; border-radius:inherit; background:linear-gradient(90deg,#90b29d,#edc471); }
.admin-workspace { display:grid; grid-template-columns:minmax(290px,.9fr) minmax(0,1.45fr); gap:28px; }
.admin-users { min-width:0; }
.admin-search { display:grid; gap:10px; margin:16px 0; }
.admin-search label { font-size:12px; color:#bdcdbf; }
.admin-search > div { display:flex; gap:8px; }
.admin-search input { width:100%; min-width:0; padding:10px 12px; border:1px solid var(--line); border-radius:5px; color:var(--ink); background:#0e2528; }
.admin-search button { flex-shrink:0; }
.admin-users-list { display:grid; gap:8px; max-height:720px; overflow:auto; padding:2px; }
.admin-user-row { display:grid; gap:12px; width:100%; padding:15px; border:1px solid var(--line); border-radius:7px; text-align:left; color:var(--ink); background:#153034; transition:background .15s,border-color .15s; }
.admin-user-row:hover,.admin-user-row:focus-visible { background:#244540; border-color:#bbaa71; }
.admin-user-row.selected { border-color:var(--gold); background:#2d4439; }
.admin-user-row > div:first-child { display:grid; gap:4px; }
.admin-user-row strong { font-size:14px; font-weight:500; overflow-wrap:anywhere; }
.admin-user-row span,.admin-user-row small { font-size:11px; line-height:1.5; color:#bdcdbf; overflow-wrap:anywhere; }
.admin-user-stats { display:grid; gap:3px; }
.admin-pagination { display:flex; align-items:center; justify-content:space-between; gap:8px; margin-top:16px; }
.admin-pagination span { font-size:11px; text-align:center; font-variant-numeric:tabular-nums; }
.admin-pagination button { min-width:75px; padding:8px 10px; }
.admin-pagination button:disabled,.admin-grant button:disabled { opacity:.45; cursor:wait; }
.admin-detail { min-width:0; padding:22px; border:1px solid var(--line); border-radius:9px; background:rgba(5,23,27,.25); }
.admin-detail h3 { font:400 26px var(--serif); color:#f2ddac; overflow-wrap:anywhere; }
.admin-detail h4 { margin:25px 0 15px; font-size:14px; font-weight:500; }
.admin-user-meta { font-size:11px; color:#bdcdbf; }
.admin-contact { margin:12px 0; font-size:12px; }
.admin-contact div { display:grid; grid-template-columns:90px minmax(0,1fr); gap:12px; margin-top:7px; }
.admin-contact dt { color:#bdcdbf; }
.admin-contact dd { margin:0; overflow-wrap:anywhere; }
.admin-detail-stats { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:10px; margin:20px 0; }
.admin-detail-stats > div { display:grid; gap:7px; padding:12px 10px; border:1px solid var(--line); border-radius:6px; }
.admin-detail-stats strong { font-size:17px; font-weight:500; color:#f2ddac; overflow-wrap:anywhere; }
.admin-detail-stats small { font-size:10px; color:#bdcdbf; line-height:1.5; }
.admin-progress details { padding:12px 0; border-top:1px solid var(--line); }
.admin-progress summary { display:flex; align-items:start; gap:10px; justify-content:space-between; cursor:pointer; font-size:12px; line-height:1.5; list-style:none; }
.admin-progress summary::before { content:'▸'; color:#d4bc7d; }
.admin-progress details[open] > summary::before { content:'▾'; }
.admin-progress summary > strong { font-weight:500; flex:1; }
.admin-progress summary > span { flex-shrink:0; margin-left:auto; color:#bdcdbf; font-size:10px; }
.admin-progress .admin-progress-unit { margin:12px 0 0 15px; padding-bottom:0; }
.admin-progress .admin-progress-chapter { margin:12px 0 0 15px; padding-bottom:0; }
.admin-section-list { list-style:none; margin:14px 0 0; padding:0; }
.admin-section-list li { display:grid; grid-template-columns:minmax(0,1fr) auto; gap:5px 12px; padding:12px 0; border-top:1px solid var(--line); font-size:11px; }
.admin-section-list strong { font-weight:500; overflow-wrap:anywhere; }
.admin-section-list span { color:#dfcc99; font-size:10px; }
.admin-section-list small { grid-column:1/-1; color:#bdcdbf; line-height:1.5; }
.admin-history-section { margin-top:18px; padding-top:16px; border-top:1px solid var(--line); }
.admin-history-section > summary { cursor:pointer; font-size:13px; color:#f2ddac; }
.admin-history { list-style:none; margin:12px 0 0; padding:0; }
.admin-history > li { display:flex; align-items:start; justify-content:space-between; gap:15px; padding:12px 0; border-bottom:1px solid var(--line); font-size:11px; }
.admin-history strong { display:block; margin-bottom:6px; font-size:12px; font-weight:500; overflow-wrap:anywhere; }
.admin-history small { display:block; font-size:10px; color:#bdcdbf; line-height:1.6; overflow-wrap:anywhere; }
.admin-history > li > span { flex-shrink:0; text-align:right; color:#dfcc99; }
.admin-grant h3 { font-size:23px; }
.admin-grant p { font-size:12px; color:#bdcdbf; }
.admin-grant .account-feedback { color:#e9d79e; }
.admin-empty { color:#bdcdbf; font-size:12px; }
@media(max-width:1000px) { .admin-overview { grid-template-columns:repeat(2,minmax(0,1fr)); } .admin-workspace { gap:20px; grid-template-columns:minmax(240px,.8fr) minmax(0,1.2fr); } .admin-detail { padding:18px; } }
@media(max-width:760px) { .admin-card { padding:30px 18px; } .admin-workspace { grid-template-columns:1fr; } .admin-users-list { max-height:320px; } .admin-stat { min-height:115px; padding:14px; } .admin-stat > strong { font-size:24px; } .admin-progress summary { flex-wrap:wrap; } .admin-progress summary > span { flex-basis:100%; margin-left:15px; } }
@media(max-width:430px) { .admin-detail-stats { grid-template-columns:1fr; } .admin-history > li { flex-wrap:wrap; } .admin-history > li > span { text-align:left; } .admin-budget > div:first-child { flex-wrap:wrap; } .admin-stat > strong { font-size:21px; } }
@media(max-width:760px) { .atlas-brand { display:none; } .player-hud { width:100%; justify-content:space-between; } .credits-button { max-width:130px; min-width:95px; padding:5px 7px; font-size:10px; } .account-card { padding:28px 20px; } }
@media(max-width:400px) { .player-portrait { display:none; } .credits-button { max-width:103px; min-width:80px; } .account-overlay { padding:14px 10px; } }


/* Player standings */
.score-panel { display:grid; grid-template-columns:auto auto; align-items:center; gap:8px; }
.score-button { min-width:65px; font-variant-numeric:tabular-nums; }
.score-button:hover { color:#fff0bc; background:rgba(230,197,128,.08); }
.standings-button { display:flex; align-items:center; gap:9px; min-height:46px; max-width:240px; padding:7px 11px; border:1px solid rgba(234,202,132,.66); border-radius:6px; color:#f6dda7; background:linear-gradient(125deg,rgba(125,91,37,.31),rgba(232,197,128,.09)); box-shadow:inset 0 1px rgba(253,232,183,.1),0 0 18px rgba(205,173,93,.07); text-align:left; transition:background 160ms ease,border-color 160ms ease; }
.standings-button:hover { border-color:#ffe1a1; background:linear-gradient(125deg,rgba(151,109,41,.43),rgba(232,197,128,.15)); }
.standings-crown { flex-shrink:0; width:26px; height:26px; color:#edc779; }
.standings-labels { display:grid; gap:4px; min-width:0; }
#hudWorldRank { font-size:12px; font-weight:750; font-variant-numeric:tabular-nums; white-space:nowrap; }
#hudScopeRank { display:block; max-width:175px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; color:#c7d2ba; font-size:10px; font-weight:500; }
.standings-arrow { margin-left:3px; color:#d0b777; font-size:20px; }
.leaderboard-standing:empty { display:none; }
.leaderboard-standing { margin-top:24px; }
.standing-hero { display:grid; grid-template-columns:115px minmax(0,1fr); gap:18px; padding:22px; border:1px solid rgba(239,204,127,.61); border-radius:9px; background:radial-gradient(ellipse at 0 0,rgba(207,158,69,.17),transparent 65%),linear-gradient(125deg,#2a4438,#163231); box-shadow:inset 0 1px rgba(246,217,148,.12); }
.standing-place { display:flex; flex-direction:column; align-items:center; justify-content:center; gap:5px; border-right:1px solid rgba(234,202,132,.28); padding-right:18px; color:#d4c298; text-align:center; }
.standing-place > span { font-size:10px; line-height:1.45; }
.standing-place > strong { display:block; color:#ffe0a1; font:400 clamp(34px,4vw,47px)/1.1 var(--serif); font-variant-numeric:tabular-nums; }
.standing-copy { align-self:center; min-width:0; }
.standing-copy > small { color:#e4c885; font-size:10px; font-weight:700; letter-spacing:.09em; text-transform:uppercase; }
.standing-copy h3 { margin:7px 0 8px; color:#f4e9c6; font:400 25px/1.15 var(--serif); overflow-wrap:anywhere; }
.standing-copy p { color:#c3d1ba; font-size:12px; line-height:1.65; }
.standing-rival { grid-column:1/-1; padding-top:15px; border-top:1px solid rgba(234,202,132,.2); }
.standing-rival p { color:#bfd0b9; font-size:11px; line-height:1.6; }
.standing-rival strong { display:block; margin:5px 0; color:#f1d399; font-size:16px; line-height:1.4; overflow-wrap:anywhere; }
.standing-rival span { color:#b8ccba; font-size:11px; line-height:1.6; }
.standing-neighbors { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:9px; margin-top:12px; }
.standing-neighbor { display:flex; flex-direction:column; gap:6px; min-width:0; padding:14px 12px; border:1px solid rgba(183,201,161,.22); border-radius:6px; background:rgba(7,25,29,.35); color:#bdcdb8; font-size:11px; line-height:1.4; }
.standing-neighbor small { color:#9eb4a7; font-size:9px; letter-spacing:.06em; text-transform:uppercase; }
.standing-neighbor strong { color:#f2dda9; font-size:13px; overflow-wrap:anywhere; }
.standing-neighbor > span { font-variant-numeric:tabular-nums; overflow-wrap:anywhere; }
.standing-neighbor.is-you { border-color:rgba(240,208,135,.65); background:rgba(223,184,102,.1); }
.standing-neighbor.is-you small { color:#e7cb89; }
.standing-scope-tabs { display:flex; flex-wrap:wrap; gap:6px; margin-top:13px; }
.standing-scope-tabs button { min-height:35px; border:1px solid rgba(218,193,130,.3); border-radius:4px; padding:7px 11px; color:#d6d9c0; background:rgba(7,25,29,.4); font-size:10px; text-align:left; }
.standing-scope-tabs button[aria-pressed="true"] { color:#ffe0a1; border-color:#c5ac72; background:rgba(212,177,103,.13); }
@media (max-width:1080px) {
 .atlas-brand { gap:8px; }
 .brand-compass { width:32px; height:32px; }
 .atlas-brand strong { font-size:26px; }
 .atlas-brand span { display:none; }
 .player-info { min-width:130px; }
 .player-name-row { gap:10px; font-size:12px; }
 .player-name-row strong { max-width:97px; }
 .credits-button { max-width:140px; }
 .score-panel { grid-template-columns:minmax(0,1fr); gap:1px; padding-left:12px; }
 .score-button { min-height:20px; padding:0 7px; font-size:12px; text-align:center; }
 .score-button::before { font-size:12px; margin-right:4px; }
 .standings-button { min-height:30px; max-width:180px; gap:6px; padding:4px 7px; }
 .standings-crown { width:18px; height:18px; }
 #hudWorldRank { font-size:11px; }
 #hudScopeRank { max-width:128px; font-size:9px; }
 .standings-labels { gap:2px; }
 .standings-arrow { font-size:15px; margin-left:0; }
}
@media (max-width:760px) {
 .player-info { min-width:107px; }
 .player-name-row { gap:7px; font-size:11px; }
 .player-name-row strong { max-width:68px; }
 .player-hud { gap:7px; }
 .score-panel { gap:1px; padding-left:7px; }
 .score-button { min-height:20px; font-size:11px; }
 .standings-button { min-height:29px; max-width:150px; padding:4px 6px; gap:4px; }
 .standings-crown { width:16px; height:16px; }
 #hudWorldRank { font-size:10px; }
 #hudScopeRank { max-width:106px; font-size:8px; }
 .standings-arrow { display:none; }
 .standing-hero { gap:13px; padding:17px 14px; grid-template-columns:85px minmax(0,1fr); }
 .standing-place { padding-right:13px; }
 .standing-place > strong { font-size:36px; }
 .standing-copy h3 { font-size:22px; }
 .standing-neighbors { gap:6px; }
 .standing-neighbor { padding:12px 8px; font-size:10px; }
 .standing-neighbor > strong { font-size:11px; }
 .standing-neighbor > small { font-size:8px; }
}
@media (max-width:400px) {
 .standings-crown { display:none; }
 .standings-button { max-width:122px; }
 .credits-button { font-size:9px; padding:5px 6px; }
 .standing-copy h3 { font-size:20px; }
 .standing-rival strong { font-size:14px; }
}
@media (max-height:640px) and (min-width:761px) {
 .leaderboard-view { padding-top:94px; padding-bottom:74px; }
 .leaderboard-panel { max-height:calc(100dvh - 168px); }
}

.standing-heading { margin:20px 0 10px; color:#dfc589; font-size:10px; font-weight:700; letter-spacing:.09em; text-transform:uppercase; }
.standing-note { margin-top:12px; color:#aebfaf; font-size:11px; line-height:1.7; }
.standing-empty { padding:17px; border:1px solid rgba(183,201,161,.22); border-radius:6px; color:#c3d1ba; background:rgba(7,25,29,.28); font-size:12px; line-height:1.7; }

/* Earned XP belongs to every landmark, including unexplored zero-score areas. */
.map-node { height:auto; }
.node-caption .node-earned-score { display:block; margin-top:5px; color:#f0d486; font-size:10px; line-height:1.3; font-weight:650; letter-spacing:.025em; white-space:nowrap; }
.node-caption .node-earned-score::before { content:"✦"; margin-right:4px; color:#dfbb69; }
.node-stats .node-score-stat { color:#f0d486; font-weight:650; }
@media (max-width:760px) {
 .node-caption .node-earned-score { display:block; margin-top:4px; font-size:9px; letter-spacing:0; }
}

/* Relative player levels are independent of curriculum tiers and rank tie breaks. */
.standing-copy .standing-player-level { display:flex; flex-wrap:wrap; align-items:center; gap:6px 12px; margin:0 0 8px; }
.standing-player-level strong { padding:4px 9px; border:1px solid rgba(240,208,135,.45); border-radius:4px; color:#ffe0a1; background:rgba(223,184,102,.09); font-size:13px; }
.standing-player-level span { color:#bdcdb8; font-size:11px; }

/* A player's percentile level travels beside their earned XP on every map. */
.node-caption .node-player-progress { display:flex; justify-content:center; align-items:baseline; flex-wrap:wrap; gap:0 8px; }
.node-caption .node-player-level { display:block; margin-top:5px; color:#c6dfad; font-size:10px; line-height:1.3; font-weight:650; white-space:nowrap; }
.node-caption .node-player-level[data-status="loading"], .node-caption .node-player-level[data-status="unavailable"] { color:#adc0ad; font-weight:500; }
.node-stats .node-level-stat { color:#c6dfad; font-weight:650; }
@media (max-width:760px) {
 .node-caption .node-player-progress { gap:0 6px; }
 .node-caption .node-player-level { margin-top:4px; font-size:9px; }
}

/* Private comments and the administrator report queue. */
.feedback-icon-button { display:grid; place-items:center; flex-shrink:0; width:44px; min-width:44px; height:44px; min-height:44px; padding:0; border-radius:50%; font:600 23px var(--serif); color:var(--gold); }
.feedback-overlay { z-index:220; padding:max(28px,env(safe-area-inset-top)) 18px 28px; }
.feedback-card { width:min(660px,100%); }
.feedback-context-summary { border-left:2px solid var(--gold); padding:10px 14px; background:rgba(6,27,30,.35); font-size:13px; overflow-wrap:anywhere; }
.feedback-card .close-button { min-width:44px; min-height:44px; }
.feedback-card textarea,.feedback-edit-form textarea { width:100%; min-height:120px; resize:vertical; padding:12px; border:1px solid var(--line); border-radius:5px; background:#0c2428; color:var(--ink); line-height:1.6; font:inherit; }
.feedback-card select,.feedback-reports-section select,.feedback-filter-form input { width:100%; min-height:44px; padding:10px 12px; border:1px solid var(--line); border-radius:5px; background:#0c2428; color:var(--ink); font:inherit; }
.feedback-card form { margin-top:18px; }
.feedback-reports-section { margin:24px 0; padding-top:22px; border-top:1px solid var(--line); }
.feedback-section-heading { display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:12px; margin-bottom:10px; }
.feedback-section-heading h3 { margin:0; }
.feedback-section-heading button,.feedback-reports-section button { min-height:44px; }
.feedback-filter-label { display:block; margin:16px 0 8px; font-size:12px; color:#bdcdbf; }
.feedback-report-list { display:grid; gap:10px; margin:12px 0; }
.feedback-report-row { display:grid; gap:8px; width:100%; padding:14px; border:1px solid var(--line); border-radius:8px; text-align:left; color:var(--ink); background:rgba(5,26,30,.35); overflow-wrap:anywhere; }
.feedback-report-row:hover,.feedback-report-row:focus-visible,.feedback-report-row.selected { border-color:var(--gold); background:rgba(54,81,66,.5); }
.feedback-report-meta { display:flex; align-items:center; flex-wrap:wrap; gap:8px; }
.feedback-report-meta small,.feedback-report-row small { color:#bdcdbf; font-size:11px; line-height:1.5; }
.feedback-report-excerpt { font-size:13px; line-height:1.5; }
.feedback-badge { display:inline-block; padding:3px 8px; border:1px solid rgba(218,192,126,.4); border-radius:20px; font-size:10px; color:#ebd79e; }
.feedback-badge.resolved { color:#b9dbb5; border-color:rgba(168,207,157,.45); }
.feedback-badge.urgent { background:rgba(153,70,38,.3); color:#ffd3aa; border-color:#b47748; }
.feedback-report-detail { min-width:0; margin-top:20px; padding:18px; border:1px solid var(--line); border-radius:8px; background:rgba(7,27,30,.3); }
.feedback-report-detail h4 { margin:0 0 14px; font:400 23px var(--serif); color:#efddac; overflow-wrap:anywhere; }
.feedback-edit-form { display:grid; gap:10px; margin:18px 0; }
.feedback-edit-form label { font-size:12px; }
.feedback-edit-form > button { justify-self:start; }
.feedback-checkbox { display:flex; align-items:center; gap:9px; min-height:44px; }
.feedback-checkbox input { width:18px; height:18px; accent-color:#cdb77a; }
.feedback-comment-copy,.feedback-admin-response p { white-space:pre-wrap; overflow-wrap:anywhere; font-size:13px; line-height:1.7; }
.feedback-admin-response { margin:18px 0; padding:14px; border-left:2px solid #a9c5a1; background:rgba(77,112,84,.16); font-size:13px; }
.feedback-original-context,.feedback-context-group { margin-top:16px; padding-top:12px; border-top:1px solid var(--line); }
.feedback-original-context > summary,.feedback-context-group > summary { min-height:44px; display:list-item; cursor:pointer; font-size:13px; color:#ead79f; }
.feedback-context-block { padding:8px 0; }
.feedback-context-block h5 { margin:0 0 7px; font-size:12px; color:#c2d3bc; }
.feedback-context-block p { margin:0; white-space:pre-wrap; overflow-wrap:anywhere; font-size:12px; line-height:1.7; }
.feedback-context-references { font-size:11px; color:#c2d3bc; margin:12px 0; }
.feedback-context-references > div { display:grid; grid-template-columns:65px minmax(0,1fr); gap:8px; margin:7px 0; }
.feedback-context-references dd { margin:0; overflow-wrap:anywhere; }
.feedback-filter-form { display:grid; grid-template-columns:140px 150px minmax(150px,1fr) auto; align-items:end; gap:12px; margin-top:16px; }
.feedback-filter-form label { display:grid; gap:7px; font-size:12px; }
.feedback-admin-workspace { display:grid; grid-template-columns:minmax(250px,.8fr) minmax(0,1.2fr); gap:24px; align-items:start; }
.feedback-admin-workspace .feedback-report-detail { margin-top:12px; }
.tutor-form .tutor-feedback-button { grid-column:1/-1; justify-self:end; min-width:44px; min-height:44px; padding:8px 12px; font-size:12px; }
@media(max-width:760px) { .feedback-filter-form { grid-template-columns:1fr 1fr; } .feedback-admin-workspace { grid-template-columns:1fr; gap:8px; } .feedback-card { padding:28px 20px; } }
@media(max-width:430px) { .feedback-overlay { padding:16px 10px; } .feedback-report-detail { padding:14px; } .feedback-card { padding:28px 16px; } .feedback-filter-form { grid-template-columns:1fr; } .feedback-icon-button { width:44px; min-width:44px; } }

.feedback-drawing { margin:16px 0; padding:12px; border:1px solid var(--line); border-radius:6px; background:#0d2428; }
.feedback-drawing figcaption { margin-bottom:10px; color:#c2d3bc; font-size:12px; }
.feedback-drawing img { display:block; width:auto; max-width:100%; height:auto; max-height:180px; background:#f4eedb; border:1px solid #d2c8ad; border-radius:4px; }
@media(max-width:600px) {
 .player-hud { display:grid; grid-template-columns:minmax(0,1fr) 44px minmax(0,1fr); gap:5px 8px; }
 .player-menu-button { grid-column:1; grid-row:1; min-width:0; }
 .player-info { min-width:0; flex:1; }
 .player-portrait { flex-shrink:0; }
 .feedback-icon-button { grid-column:2; grid-row:1; justify-self:center; }
 .score-panel { grid-column:3; grid-row:1; min-width:0; }
 .credits-button { grid-column:1/-1; width:100%; max-width:none; min-height:27px; padding:4px 8px; text-align:center; }
 .hud { min-height:98px; }
 .map-heading { top:130px; }
 .hunting-ground { top:130px; }
 .leaderboard-view { padding-top:132px; }
}

/* Account confirmation uses the same quiet entry screen as sign-in. */
.verification-panel, .password-reset-panel { width:min(480px,100%); }
.verification-panel h2, .password-reset-panel h2 { margin:8px 0 16px; font:400 34px var(--serif); color:#f1dca8; }
.verification-intro { color:#d0d9c9; font-size:14px; line-height:1.7; overflow-wrap:anywhere; }
.verification-intro strong { color:#f5deb0; }
.verification-panel .account-feedback { margin:14px 0; overflow-wrap:anywhere; }
.verification-code-form { margin-top:22px; }
.verification-code-form input { text-align:center; font-size:28px; font-variant-numeric:tabular-nums; letter-spacing:.35em; padding-left:calc(14px + .35em); }
.verification-link-button { width:100%; margin-top:12px; }
.verification-correction { margin-top:22px; text-align:left; padding-top:16px; border-top:1px solid var(--line); }
.verification-correction summary { cursor:pointer; color:#d9ceac; font-size:13px; }
.verification-correction .login-form { margin-top:16px; }
.verification-signout, #verificationBackButton { width:100%; margin-top:18px; }
.password-reset-panel > .hud-button { width:100%; min-height:44px; margin-top:12px; }
.password-reset-panel .account-feedback { overflow-wrap:anywhere; }
#emailVerificationStatus { color:#e9d79e; }
@media (max-width:480px) { .verification-view, .password-reset-view { padding:16px; } .verification-panel, .password-reset-panel { padding:28px 22px; } .verification-panel h2, .password-reset-panel h2 { font-size:30px; } }

/* New realms use their own four-landmark sheet and familiar atlas lighting. */
.node-field .additional-subject-landmark {
  background-image: url('/assets/adventure/additional-subject-landmarks.png');
  background-size: 200% 200%;
}
.atlas-view[data-realm="biology"]::before { filter: hue-rotate(-9deg) saturate(1.1); }
.atlas-view[data-realm="geology"]::before { filter: sepia(.35) hue-rotate(-12deg); }
.atlas-view[data-realm="economics"]::before { filter: sepia(.24) saturate(.9); }
.atlas-view[data-realm="business"]::before { filter: hue-rotate(27deg) saturate(.85); }
.node-course.is-planned .node-badge { color: #f5ddb0; background: #384735; }
.node-course.is-planned .node-caption small { color: #d9caa7; }

/* Course outlines remain useful places to visit before their lessons exist. */
.atlas-view:has(.planned-course-map) .world { position: relative; inset: auto; }
.atlas-view:has(.planned-course-map) { min-height: 100dvh !important; padding-top: 108px; }
.atlas-view:has(.planned-course-map) .map-heading {
  position: relative; top: auto; left: auto; width: min(752px, calc(100% - 48px));
  max-width: none; margin: 0 auto 24px;
}
.atlas-view:has(.planned-course-map) .map-heading h1 { display: block; overflow: visible; }
.map-canvas.planned-course-map {
  position: relative; top: auto; left: auto; right: auto; bottom: auto;
  width: min(800px, 100%); height: auto; margin: 0 auto 130px; padding: 0 24px;
}
.planned-course-overview {
  position: relative; padding: 32px; border: 1px solid rgba(230, 203, 141, .52);
  border-radius: 12px; background: linear-gradient(130deg, rgba(23, 47, 43, .97), rgba(11, 31, 36, .98));
  box-shadow: var(--shadow); color: #d5dfcc;
}
.planned-course-crest {
  display: grid; place-items: center; float: right; width: 76px; height: 76px; margin: 0 0 18px 24px;
  border: 1px solid rgba(217, 193, 135, .25); border-radius: 50%; background: rgba(5, 24, 28, .4);
}
.planned-course-crest .node-icon { width: 54px; height: 54px; }
.planned-course-overview h2 {
  margin: 9px 0 15px; color: #fff0c7; font: 400 clamp(25px, 3vw, 36px)/1.18 var(--serif);
  text-wrap: balance; overflow-wrap: anywhere;
}
.planned-course-description { font-size: 15px; line-height: 1.75; overflow-wrap: anywhere; }
.planned-course-status { display: flex; align-items: center; flex-wrap: wrap; gap: 12px; margin: 22px 0 13px; font-size: 12px; color: #c7d6bd; }
.planned-course-badge { padding: 6px 10px; border: 1px solid rgba(230, 200, 132, .4); border-radius: 5px; color: #edce8d; background: rgba(210, 173, 96, .1); }
.planned-course-message { font-size: 13px; line-height: 1.75; color: #b7c6b2; }
.planned-course-preparation { clear: both; margin: 25px 0; padding-top: 22px; border-top: 1px solid var(--line); }
.planned-course-preparation h3 { margin: 0 0 13px; color: #ecd69e; font: 400 22px/1.2 var(--serif); }
.planned-course-preparation ul { margin: 0 0 13px; padding-left: 20px; }
.planned-course-preparation li { padding: 4px 0; font-size: 14px; line-height: 1.55; overflow-wrap: anywhere; }
.planned-course-preparation p { margin-top: 10px; font-size: 12px; line-height: 1.7; color: #bdcdb7; }
.planned-course-back { min-height: 44px; padding: 11px 16px; white-space: normal; }
@media (max-width: 760px) {
  .atlas-view:has(.planned-course-map) { padding-top: 178px; }
  .atlas-view:has(.planned-course-map) .map-heading { width: calc(100% - 28px); margin-bottom: 20px; }
  .map-canvas.planned-course-map { margin-bottom: 135px; padding: 0 14px; }
  .planned-course-overview { padding: 23px 20px; }
  .planned-course-crest { width: 54px; height: 54px; margin-left: 12px; }
  .planned-course-crest .node-icon { width: 40px; height: 40px; }
  .planned-course-overview h2 { font-size: 27px; }
  .planned-course-description { font-size: 13px; }
  .planned-course-preparation li { font-size: 13px; }
  .planned-course-back { width: 100%; }
}

.atlas-view[data-depth="field"] .adventure-guide,
.atlas-view[data-depth="course"] .adventure-guide { display: none; }

@media (max-width: 760px) {
  .atlas-view[data-depth="fields"] .map-heading,
  .atlas-view[data-depth="field"] .map-heading { top: 178px; }
}

/* Keep earned progress in sight while one learning activity fills the screen. */
.learning-launch { pointer-events:auto; display:flex; align-items:center; justify-content:center; flex-wrap:wrap; gap:12px; margin-top:16px; }
.learning-launch p { max-width:520px; color:#b6c9b3; font-size:11px; line-height:1.6; }
.tutor-header, .oracle-room .tutor-header { padding-right:106px; }
.tutor-heading-copy { flex:1; }
.tutor-hud { flex:0 0 auto; display:grid; grid-template-columns:auto auto; gap:3px 12px; text-align:right; padding:0 0 0 20px; border:0; border-left:1px solid rgba(228,201,134,.25); border-radius:4px; background:transparent; font:inherit; cursor:pointer; }
.tutor-hud:hover { background:rgba(228,201,134,.06); }
.tutor-hud:focus-visible { outline:2px solid #f5d591; outline-offset:5px; }
.tutor-hud > strong { color:#f5d591; font-size:19px; }
.tutor-hud > span { color:#c7e0b4; font-size:13px; align-self:center; }
.tutor-hud > small { grid-column:1 / -1; color:#bacbbb; font-size:10px; }
.tutor-header .tutor-map-button, .oracle-room .tutor-header .tutor-map-button { width:72px; height:34px; top:50%; right:16px; transform:translateY(-50%); font-size:12px; color:#e9d7ac; }
.tutor-flow-bar { flex-shrink:0; display:flex; align-items:center; justify-content:space-between; gap:15px; padding:8px 24px; border-bottom:1px solid rgba(180,200,163,.15); background:rgba(8,28,30,.5); }
.tutor-flow-bar p { margin:0; color:#c3d6bb; font-size:11px; line-height:1.5; }
.tutor-hud.xp-earned > strong { animation:tutor-xp-earned 1.1s ease-out; }
@keyframes tutor-xp-earned { 0% { color:#fff3c1; text-shadow:0 0 16px rgba(255,224,144,.9); transform:scale(1.1); } 100% { color:#f5d591; text-shadow:none; transform:scale(1); } }
@media (max-width:760px) {
 .tutor-header, .oracle-room .tutor-header { padding-right:78px; padding-left:12px; gap:10px; }
 .tutor-header .tutor-character { display:none; }
 .tutor-header h2, .oracle-room .tutor-header h2 { font-size:18px; }
 .tutor-hud { padding-left:10px; gap:3px 7px; }
 .tutor-hud > strong { font-size:15px; }
 .tutor-hud > span { font-size:11px; }
 .tutor-hud > small { font-size:9px; }
 .tutor-header .tutor-map-button, .oracle-room .tutor-header .tutor-map-button { width:57px; right:10px; }
 .tutor-flow-bar { gap:10px; padding:7px 12px; }
 .tutor-flow-bar p { font-size:10px; }
}
@media (max-width:430px) {
 .tutor-header, .oracle-room .tutor-header { flex-wrap:wrap; padding-right:12px; padding-top:10px; padding-bottom:10px; }
 .tutor-heading-copy { flex:1 1 calc(100% - 65px); padding-right:64px; }
 .tutor-hud { width:100%; border-left:0; border-top:1px solid rgba(228,201,134,.2); padding:7px 0 0; display:flex; justify-content:flex-end; align-items:center; flex-wrap:wrap; gap:5px 12px; }
 .tutor-hud > small { font-size:9px; }
 .tutor-header .tutor-map-button, .oracle-room .tutor-header .tutor-map-button { top:12px; transform:none; }
}
@media (prefers-reduced-motion:reduce) { .tutor-hud.xp-earned > strong { animation:none; } }

/* Arrival opens the learning stage while its saved or suggested quest loads. */
.learning-opening .tutor-character,
.learning-opening .encounter-health,
.learning-opening .encounter-actions,
.learning-opening .encounter-reward-info,
.learning-opening .tutor-learning-summary,
.learning-opening .master-controls,
.learning-opening .tutor-form { display:none; }
.learning-opening .tutor-workspace { display:grid; place-items:center; }
.learning-opening .tutor-messages { flex:none; width:100%; }
.learning-opening .tutor-message.system { font-size:15px; text-align:center; }

/* A quiet learning stage: the problem owns the space, tools open on demand. */
.tutor-panel .tutor-header { min-height:70px; padding-top:9px; padding-bottom:9px; gap:14px; }
.tutor-panel .tutor-header h2 { font-size:clamp(18px,1.7vw,24px); line-height:1.25; }
.tutor-panel .tutor-character { flex:0 0 38px; width:38px; height:44px; }
.tutor-panel .tutor-character svg { width:38px; height:44px; }
.tutor-panel.monster-selected .tutor-character .monster-sprite { width:44px; height:44px; }
.tutor-panel .tutor-heading-copy { min-width:0; }
.tutor-panel #tutorModeLabel, .tutor-panel #encounterSpecies { display:none; }
.tutor-panel .tutor-course-title { margin-top:0; font-size:10px; }
.tutor-panel .tutor-hud { gap:2px 10px; }
.tutor-panel .tutor-hud > strong { font-size:17px; }
.tutor-panel .tutor-hud > span { font-size:11px; }
.tutor-panel .tutor-hud > small { font-size:9px; line-height:1.3; }
.tutor-panel:not(.oracle-room):not(.learning-opening) .tutor-flow-bar { position:absolute; width:1px; height:1px; padding:0; border:0; overflow:hidden; clip-path:inset(50%); white-space:nowrap; }
.tutor-panel .encounter-banner { min-height:0; display:block; margin:0 auto; max-width:1120px; padding:14px 32px 0; border:0; background:none; }
.tutor-panel .encounter-status { color:#a8c3b7; font-size:11px; font-weight:400; line-height:1.5; }
.tutor-panel .encounter-status:empty { display:none; }
.tutor-panel.oracle-room .encounter-banner { display:none; }
.tutor-panel:not(.oracle-room) .tutor-messages { width:min(1120px,100%); margin:0 auto; padding:36px 32px; gap:22px; }
.tutor-panel:not(.oracle-room) .tutor-message.problem-card { width:100%; padding:0; border:0; border-radius:0; background:none; }
.tutor-panel:not(.oracle-room) .encounter-problem-name { margin:0 0 18px; font:400 clamp(22px,2.4vw,30px)/1.25 var(--serif); color:#f0e3bd; }
.tutor-panel:not(.oracle-room) .problem-prompt { margin:0; font-size:clamp(18px,1.9vw,23px); line-height:1.75; color:#e5e7d7; }
.problem-card mjx-container[display="true"] { max-width:100%; overflow-x:auto; overflow-y:hidden; padding:6px 0; }
.tutor-composer { position:relative; z-index:3; display:grid; flex-shrink:0; grid-template-columns:minmax(0,1fr) auto auto; align-items:end; gap:6px 12px; padding:8px 32px 12px; background:#122b2d; border-top:1px solid var(--line); }
.tutor-composer-tools { position:relative; z-index:3; grid-column:2 / 4; grid-row:1; display:flex; align-items:center; justify-content:flex-end; gap:10px; }
.tutor-composer-tools .tutor-response-modes { flex-wrap:wrap; gap:6px; }
.tutor-composer-tools .tutor-response-modes .hud-button { min-height:30px; padding:0 10px; }
.tutor-tools { position:relative; margin-left:auto; flex:0 0 auto; font-size:11px; }
.tutor-tools > summary { cursor:pointer; min-height:32px; padding:7px 12px; border:1px solid var(--line); border-radius:5px; color:#c2d3bd; }
.tutor-tools > summary:focus-visible { outline:2px solid #e2c27e; outline-offset:3px; }
.tutor-tools-panel { position:absolute; right:0; bottom:calc(100% + 12px); width:min(400px,calc(100vw - 32px)); max-height:min(430px,65dvh); overflow:auto; padding:18px; border:1px solid rgba(204,199,145,.35); border-radius:8px; background:#193235; box-shadow:0 14px 48px rgba(0,0,0,.45); }
.tutor-tools-panel .encounter-actions { display:grid; grid-template-columns:1fr 1fr; gap:8px; padding:0; border:0; background:none; }
.tutor-tools-panel .encounter-count { grid-column:1/-1; margin:0 0 8px; color:#b6cbbb; font-size:11px; line-height:1.5; }
.tutor-tools-panel .encounter-actions .hud-button { min-height:36px; min-width:0; padding:7px 9px; font-size:11px; white-space:normal; }
.tutor-tools-panel .encounter-reward-info { margin:16px 0 0; padding:12px 0 0; border:0; border-top:1px solid var(--line); background:none; }
.tutor-tools-panel .encounter-reward-info summary { font-size:11px; line-height:1.6; }
.tutor-tools-panel .tutor-learning-summary { width:100%; margin:12px 0 0; padding-top:12px; }
.tutor-tools-panel .tutor-learning-summary summary { align-items:start; }
.tutor-composer-tools .tutor-feedback-button { flex:0 0 32px; min-width:32px; min-height:32px; width:32px; padding:0; border:1px solid var(--line); border-radius:50%; font-size:14px; }
.tutor-panel .tutor-form { display:contents; }
.tutor-panel .tutor-input-stack { min-width:0; grid-column:1; grid-row:1 / 3; }
.tutor-panel .tutor-form textarea { min-height:62px; max-height:130px; padding:10px 12px; font-size:14px; }
.tutor-input-feedback { margin:5px 0 0; color:#a8c3b7; font-size:11px; line-height:1.45; }
.tutor-input-feedback.is-error { color:#f6c3a2; }
.tutor-form textarea[aria-invalid="true"] { border-color:#f6c3a2; }
.tutor-panel .tutor-form > button { grid-column:2 / 4; grid-row:2; min-height:44px; justify-self:stretch; }
.learning-opening .tutor-composer { display:none; }
@media (max-width:760px) {
 .tutor-panel .tutor-header { padding-left:16px; gap:10px; }
 .tutor-panel .tutor-header h2 { font-size:18px; }
 .tutor-panel .tutor-character { display:none; }
 .tutor-panel .tutor-hud > strong { font-size:15px; }
 .tutor-panel:not(.oracle-room) .tutor-messages { padding:24px 20px; }
 .tutor-panel:not(.oracle-room) .encounter-problem-name { font-size:24px; }
 .tutor-panel:not(.oracle-room) .problem-prompt { font-size:19px; line-height:1.7; }
 .tutor-panel .encounter-banner { padding:10px 20px 0; }
 .tutor-composer { padding:8px 14px 10px; gap:6px 8px; }
 .tutor-panel .tutor-input-stack { grid-column:1 / -1; grid-row:1; }
 .tutor-composer-tools { position:static; grid-column:2; grid-row:2; gap:7px; }
 .tutor-tools { position:static; }
 .tutor-tools-panel { right:14px; bottom:calc(100% + 8px); width:min(400px,calc(100vw - 28px)); }
 .tutor-composer-tools .tutor-response-modes .hud-button { font-size:10px; padding:0 8px; }
 .tutor-tools > summary { padding:7px 9px; }
 .tutor-panel .tutor-form textarea { min-height:62px; font-size:13px; }
 .tutor-panel .tutor-form > button { grid-column:3; min-width:80px; padding:10px 12px; font-size:12px; }
}
@media (max-width:430px) {
 .tutor-panel .tutor-header { min-height:0; }
 .tutor-panel .tutor-hud { gap:4px 12px; padding-top:5px; }
 .tutor-panel:not(.oracle-room) .tutor-messages { padding:20px 18px; }
 .tutor-panel:not(.oracle-room) .encounter-problem-name { font-size:22px; }
 .tutor-panel:not(.oracle-room) .problem-prompt { font-size:18px; }
 .tutor-tools-panel { right:14px; padding:14px; }
}

/* A monster's reward stays beside the encounter while the problem keeps the stage. */
.tutor-panel .encounter-banner { display:flex; width:100%; align-items:center; justify-content:space-between; gap:12px 20px; }
.tutor-panel .encounter-status { flex:1 1 auto; min-width:0; }
.encounter-reward-banner { display:flex; flex:0 1 auto; align-items:center; gap:9px; margin-left:auto; max-width:440px; padding:8px 12px; border:1px solid rgba(232,196,115,.32); border-radius:6px; color:#f2d795; background:linear-gradient(110deg,rgba(194,156,65,.14),rgba(153,151,84,.04)); }
.encounter-reward-gem { flex-shrink:0; color:#efd393; font-size:21px; line-height:1; }
.encounter-reward-banner strong { flex-shrink:0; color:#ffe4aa; font-size:17px; font-weight:750; white-space:nowrap; }
.encounter-reward-banner > span:last-child { color:#cfceb0; font-size:10px; line-height:1.5; }
.encounter-reward-banner.assisted-reward { border-color:rgba(208,174,118,.5); }
.encounter-reward-banner.reward-earned { border-color:rgba(184,222,161,.5); background:rgba(143,184,102,.1); }
.encounter-reward-banner.reward-earned strong { color:#d5edb8; }
.learning-opening .encounter-reward-banner { display:none; }

/* New levels get their own stage while the next lesson or monster is prepared. */
.tutor-panel.is-celebrating, .tutor-panel.oracle-room.is-celebrating { display:flex; overflow:hidden; }
.tutor-panel.is-celebrating > :is(.tutor-workspace,.tutor-composer,.tutor-flow-bar,.master-controls) { display:none; }
.tutor-panel.is-celebrating .tutor-character { display:none; }
.tutor-panel.is-celebrating .tutor-header { position:relative; flex-shrink:0; }
.level-celebration { position:relative; display:flex; flex:1 1 auto; flex-direction:column; min-height:0; overflow:hidden; isolation:isolate; background:radial-gradient(ellipse at 50% 24%,rgba(186,161,80,.13),transparent 58%),radial-gradient(ellipse at 16% 76%,rgba(93,148,133,.1),transparent 48%),#102a2d; }
.level-celebration::before { content:""; position:absolute; inset:20px; z-index:-1; border:1px solid rgba(222,197,134,.09); border-radius:12px; pointer-events:none; }
.level-celebration-content { flex:1 1 auto; min-height:0; display:grid; align-content:safe center; gap:30px; overflow:auto; overscroll-behavior:contain; padding:32px 40px 30px; scrollbar-color:#607d6f #12282b; scrollbar-width:thin; }
.level-celebration-heading { width:min(760px,100%); justify-self:center; text-align:center; animation:level-reward-arrive 500ms ease-out both; }
.level-celebration-ornament { display:flex; align-items:center; justify-content:center; gap:16px; margin:0 auto 18px; color:#edcf8a; }
.level-celebration-ornament > span { width:80px; height:1px; background:linear-gradient(90deg,transparent,rgba(232,206,143,.45)); }
.level-celebration-ornament > span:last-child { transform:rotate(180deg); }
.level-celebration-ornament svg { width:48px; height:48px; }
.level-celebration-heading h2 { margin:11px 0 14px; color:#f5e6ba; font:400 clamp(30px,3.3vw,45px)/1.16 var(--serif); }
.level-celebration-heading .label { font-size:10px; letter-spacing:.18em; }
.level-celebration-summary { color:#c0d3bd; font-size:14px; line-height:1.7; }
.level-celebration-cards { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:15px; width:min(1100px,100%); justify-self:center; }
.level-celebration-cards:has(> :only-child) { grid-template-columns:minmax(0,380px); justify-content:center; }
.level-celebration-cards:has(> :nth-child(2):last-child) { grid-template-columns:repeat(2,minmax(0,350px)); justify-content:center; }
.level-trophy-card { --trophy-secondary:#91c6b5; position:relative; display:flex; align-items:center; gap:16px; min-width:0; min-height:162px; overflow:hidden; padding:20px; border:1px solid rgba(231,201,128,.36); border-radius:10px; color:#e9c881; background:radial-gradient(ellipse at 15% 28%,rgba(233,194,110,.13),transparent 70%),rgba(16,40,41,.86); box-shadow:0 9px 25px rgba(1,17,19,.2),inset 0 1px 0 rgba(241,221,169,.06); animation:level-reward-arrive 560ms ease-out both; }
.level-trophy-card::after { content:""; position:absolute; top:0; left:12%; width:76%; height:1px; background:linear-gradient(90deg,transparent,rgba(245,222,164,.65),transparent); animation:level-reward-shine 4.5s ease-in-out 800ms infinite; pointer-events:none; }
.level-trophy-card:nth-child(2) { animation-delay:65ms; }
.level-trophy-card:nth-child(3) { animation-delay:130ms; }
.level-trophy-card:nth-child(4) { animation-delay:195ms; }
.level-trophy-card:nth-child(5) { animation-delay:260ms; }
.level-trophy-card:nth-child(6) { animation-delay:325ms; }
.level-trophy-card.trophy-section { color:#d9c895; --trophy-secondary:#87b7a0; }
.level-trophy-card.trophy-chapter { color:#e7c080; --trophy-secondary:#8abbb3; }
.level-trophy-card.trophy-unit { color:#a6d5cb; --trophy-secondary:#729ca7; border-color:rgba(159,211,195,.36); background:radial-gradient(ellipse at 15% 28%,rgba(93,185,159,.13),transparent 70%),rgba(16,40,41,.86); }
.level-trophy-card.trophy-course { color:#efce82; --trophy-secondary:#a6c993; }
.level-trophy-card.trophy-subject { color:#f0cf91; --trophy-secondary:#a7b9d3; }
.level-trophy-card.trophy-world { color:#ffe19c; --trophy-secondary:#8bcec1; border-color:rgba(241,207,124,.6); background:radial-gradient(ellipse at 15% 28%,rgba(218,178,73,.2),transparent 75%),rgba(21,45,42,.9); }
.level-trophy-icon { display:block; flex:0 0 78px; width:78px; height:88px; overflow:visible; filter:drop-shadow(0 6px 9px rgba(1,15,16,.3)); }
.level-trophy-copy { flex:1 1 auto; min-width:0; }
.level-trophy-kind { display:block; margin:0 0 5px; color:#c5c7a5; font-size:9px; font-weight:700; line-height:1.4; letter-spacing:.14em; text-transform:uppercase; }
.level-trophy-name { display:block; margin:0 0 10px; color:#e5e7d1; font-size:13px; font-weight:550; line-height:1.45; overflow-wrap:anywhere; }
.level-trophy-number { display:block; margin:0; color:currentColor; font:400 25px/1.2 var(--serif); }
.level-trophy-copy p { margin:6px 0 0; color:#c8cfb2; font-size:11px; line-height:1.5; }
.level-celebration-footer { flex-shrink:0; display:flex; align-items:center; justify-content:center; gap:18px 28px; flex-wrap:wrap; padding:18px 28px max(18px,env(safe-area-inset-bottom)); border-top:1px solid rgba(225,202,143,.18); background:rgba(12,33,35,.95); }
.level-celebration-status { max-width:500px; color:#bacebc; font-size:12px; line-height:1.6; }
.level-celebration-actions { display:flex; flex-shrink:0; flex-wrap:wrap; align-items:center; justify-content:center; gap:10px; }
.level-celebration-actions > button { min-height:46px; }
.level-celebration-actions > .primary-button { min-width:190px; }
@keyframes level-reward-arrive { from { opacity:0; transform:translateY(10px); } to { opacity:1; transform:translateY(0); } }
@keyframes level-reward-shine { 0%,100% { opacity:.4; } 50% { opacity:1; } }
@media (max-width:1000px) {
 .level-celebration-cards { grid-template-columns:repeat(2,minmax(0,1fr)); max-width:800px; }
 .level-celebration-content { padding:26px 28px; gap:26px; }
}
@media (max-width:600px) {
 .tutor-panel .encounter-banner { flex-wrap:wrap; gap:7px 12px; }
 .encounter-reward-banner { padding:6px 9px; gap:7px; max-width:100%; }
 .encounter-reward-banner strong { font-size:15px; }
 .encounter-reward-banner > span:last-child { font-size:9px; }
 .encounter-reward-gem { font-size:18px; }
 .level-celebration-content { gap:22px; padding:24px 18px; }
 .level-celebration::before { inset:10px; }
 .level-celebration-ornament { margin-bottom:15px; }
 .level-celebration-ornament svg { width:38px; height:38px; }
 .level-celebration-ornament > span { width:55px; }
 .level-celebration-summary { font-size:12px; }
 .level-celebration-cards, .level-celebration-cards:has(> :nth-child(2):last-child) { grid-template-columns:1fr; gap:11px; max-width:400px; }
 .level-trophy-card { min-height:132px; padding:16px 20px; gap:20px; }
 .level-trophy-icon { flex-basis:66px; width:66px; height:75px; }
 .level-trophy-number { font-size:25px; }
 .level-celebration-footer { padding:12px 14px max(12px,env(safe-area-inset-bottom)); gap:9px; }
 .level-celebration-status { flex-basis:100%; text-align:center; font-size:11px; }
 .level-celebration-actions { width:100%; gap:8px; }
 .level-celebration-actions > button { flex:1 1 auto; min-height:44px; font-size:12px; padding:0 12px; }
 .level-celebration-actions > .primary-button { min-width:0; }
}
@media (max-height:650px) and (min-width:601px) {
 .level-celebration-content { padding-top:20px; padding-bottom:20px; gap:20px; }
 .level-celebration-ornament { display:none; }
 .level-celebration-heading h2 { font-size:30px; margin:7px 0 9px; }
 .level-trophy-card { min-height:135px; padding:14px 18px; }
 .level-trophy-icon { flex-basis:65px; width:65px; height:74px; }
 .level-celebration-footer { padding-top:12px; padding-bottom:12px; }
}
@media (min-width:1001px) and (max-height:760px) {
 .level-celebration-content { padding:20px 32px; gap:20px; }
 .level-celebration-ornament { margin-bottom:12px; }
 .level-celebration-ornament svg { width:36px; height:36px; }
 .level-celebration-heading h2 { font-size:36px; margin:8px 0 12px; }
 .level-trophy-card { min-height:148px; padding:18px 20px; }
}
@media (prefers-reduced-motion:reduce) {
 .level-celebration-heading,.level-trophy-card,.level-trophy-card::after { animation:none; }
}

/* A compact constellation follows a compound quest; its dossier opens on demand. */
.quest-ribbon { position:relative; z-index:4; flex-shrink:0; display:flex; align-items:center; gap:18px; padding:9px 28px; border-bottom:1px solid rgba(187,173,224,.23); background:linear-gradient(100deg,rgba(126,111,170,.18),rgba(92,145,141,.06) 65%,transparent); }
.quest-dossier { position:relative; min-width:0; flex:0 1 580px; }
.quest-dossier > summary { display:flex; align-items:center; gap:12px; list-style:none; cursor:pointer; border-radius:5px; }
.quest-dossier > summary::-webkit-details-marker { display:none; }
.quest-dossier > summary:focus-visible { outline:2px solid #d5c0ee; outline-offset:5px; }
.quest-compass { width:31px; height:31px; flex-shrink:0; color:#d3c0ea; filter:drop-shadow(0 0 8px rgba(167,143,218,.25)); }
.quest-ribbon-copy { min-width:0; flex:1; display:grid; gap:3px; }
.quest-ribbon-copy small { color:#b4bcd2; font-size:9px; letter-spacing:.09em; text-transform:uppercase; }
.quest-ribbon-copy strong { color:#f0e6cd; font:400 17px/1.25 var(--serif); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.quest-trail { display:flex; align-items:center; gap:12px; flex-shrink:0; }
.quest-trail-node { position:relative; display:grid; place-items:center; width:21px; height:21px; border:1px solid rgba(174,182,196,.4); border-radius:50%; color:#8da3a0; font-size:9px; background:#132d32; }
.quest-trail-node + .quest-trail-node::before { content:""; position:absolute; right:100%; width:13px; height:1px; background:rgba(176,184,197,.35); }
.quest-trail-node.is-current { color:#f4e4bc; border-color:#d8bd80; box-shadow:0 0 0 4px rgba(217,188,134,.07),0 0 15px rgba(217,188,134,.13); }
.quest-trail-node.is-complete { color:#cce4c7; border-color:#83b496; background:#24473e; }
.quest-dossier-toggle { flex-shrink:0; color:#c3b3d8; font-size:18px; transition:transform .2s; }
.quest-dossier[open] .quest-dossier-toggle { transform:rotate(180deg); }
.quest-objective { min-width:0; flex:1; margin:0; color:#b7cec2; font-size:11px; line-height:1.6; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.quest-dossier-panel { position:absolute; top:calc(100% + 17px); left:0; width:min(660px,calc(100vw - 56px)); max-height:min(62dvh,550px); overflow:auto; overscroll-behavior:contain; padding:24px; border:1px solid rgba(182,161,219,.38); border-radius:8px; background:linear-gradient(130deg,#20323d,#152e31); box-shadow:0 16px 60px rgba(0,0,0,.5); }
.quest-dossier-panel > p { color:#ccdad0; font-size:13px; line-height:1.8; white-space:pre-wrap; overflow-wrap:anywhere; }
.quest-dossier-panel > .label { margin-bottom:9px; color:#d0bae4; font-size:9px; }
.quest-dossier-panel > .quest-goal { margin-top:16px; padding-top:15px; border-top:1px solid rgba(182,161,219,.2); color:#e8ddba; }
.quest-dossier-panel h3 { margin:22px 0 11px; color:#dad1eb; font:400 18px/1.3 var(--serif); }
.quest-skills { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:9px; list-style:none; margin:0; padding:0; }
.quest-skill { display:grid; align-content:start; gap:5px; padding:12px; border:1px solid rgba(161,181,170,.2); border-radius:5px; background:rgba(77,112,101,.1); }
.quest-skill > span { font-size:9px; letter-spacing:.08em; text-transform:uppercase; color:#a8c7b0; }
.quest-skill > strong { font-size:12px; color:#e0e2ce; font-weight:500; line-height:1.5; }
.quest-skill > small { color:#a5bcba; font-size:10px; line-height:1.5; }
.quest-skill.is-stretch { border-color:rgba(188,156,220,.3); background:rgba(139,113,174,.08); }
.quest-skill.is-stretch > span { color:#d7b9ec; }
.quest-active:not(.quest-flow-notice) .tutor-flow-bar { position:absolute; width:1px; height:1px; padding:0; border:0; overflow:hidden; clip-path:inset(50%); white-space:nowrap; }
.tutor-panel.quest-active.quest-flow-notice .tutor-flow-bar { position:static; width:auto; height:auto; padding:8px 24px; clip-path:none; white-space:normal; }
.quest-oracle .tutor-workspace { background:radial-gradient(ellipse at 50% 0,rgba(159,134,202,.09),transparent 60%); }
.quest-oracle .master-character { color:#d3b9e6; filter:drop-shadow(0 0 7px rgba(180,150,228,.25)); }
.tutor-panel.is-celebrating > .quest-ribbon { display:none; }
.quest-completion-receipt { position:relative; display:grid; justify-items:center; gap:12px; width:min(720px,100%); justify-self:center; text-align:center; padding:26px 28px; border:1px solid rgba(185,166,220,.34); border-radius:12px; background:radial-gradient(ellipse at 50% 0,rgba(153,128,193,.14),transparent 72%); animation:level-reward-arrive 500ms ease-out both; }
.quest-victory-seal { position:relative; display:grid; place-items:center; width:90px; height:90px; border:1px solid rgba(190,159,232,.3); border-radius:50%; color:#d7bfeb; box-shadow:0 0 0 10px rgba(160,132,194,.04),0 0 36px rgba(160,132,194,.1); }
.quest-victory-seal > svg { width:72px; height:72px; }
.quest-victory-seal > span { position:absolute; right:-4px; bottom:0; display:grid; place-items:center; width:28px; height:28px; border:1px solid #8ab995; border-radius:50%; background:#23443b; color:#c9e8b9; }
.quest-completion-receipt h3 { color:#f0e5c3; font:400 26px/1.3 var(--serif); }
.quest-completion-receipt > p { max-width:560px; color:#c6d6c5; font-size:13px; line-height:1.7; white-space:pre-wrap; }
.quest-victory-connections { display:flex; align-items:center; justify-content:center; gap:10px; flex-wrap:wrap; margin-top:3px; }
.quest-victory-connections span { padding:6px 11px; border:1px solid rgba(179,168,207,.25); border-radius:30px; color:#d2c4e2; font-size:11px; }
.quest-victory-connections b { color:#bba2d5; font-size:10px; font-weight:400; }
.quest-celebration .level-celebration-heading { animation:none; }
.quest-celebration .level-celebration-ornament { display:none; }
.quest-celebration .level-celebration-heading h2 { margin-bottom:9px; }
.quest-celebration .level-celebration-content { gap:20px; }
.quest-celebration .level-celebration-cards:empty { display:none; }
@media (max-width:900px) {
 .quest-ribbon { padding:9px 20px; }
 .quest-dossier { flex:1; }
 .quest-objective { display:none; }
}
@media (max-width:600px) {
 .quest-ribbon { padding:8px 16px; }
 .quest-dossier > summary { gap:9px; }
 .quest-compass { width:26px; height:26px; }
 .quest-ribbon-copy strong { font-size:15px; }
 .quest-ribbon-copy small { font-size:8px; letter-spacing:.02em; }
 .quest-trail { gap:6px; }
 .quest-trail-node { width:16px; height:16px; font-size:8px; }
 .quest-trail-node + .quest-trail-node::before { width:7px; }
 .quest-dossier-panel { width:calc(100vw - 32px); max-height:55dvh; padding:18px; }
 .quest-skills { grid-template-columns:1fr; }
 .quest-completion-receipt { padding:21px 18px; }
 .quest-completion-receipt h3 { font-size:23px; }
 .quest-victory-seal { width:72px; height:72px; }
 .quest-victory-seal > svg { width:58px; height:58px; }
}
@media (max-height:650px) and (min-width:601px) {
 .quest-victory-seal { width:64px; height:64px; }
 .quest-victory-seal > svg { width:52px; height:52px; }
 .quest-completion-receipt { padding:18px; gap:9px; }
}
@media (prefers-reduced-motion:reduce) { .quest-completion-receipt { animation:none; } .quest-dossier-toggle { transition:none; } }

/* Optional voice controls stay scoped to the learning panel. */
.tkar-voice { flex:0 0 auto; padding:9px 32px; border-top:1px solid var(--line); background:#122b2d; }
.tkar-voice-controls { display:flex; align-items:center; flex-wrap:wrap; gap:7px 10px; }
.tkar-voice-choice { display:flex; align-items:center; gap:8px; color:var(--muted); font-size:11px; }
.tkar-voice-mode { min-height:36px; max-width:100%; padding:6px 28px 6px 10px; border:1px solid var(--line); border-radius:5px; color:var(--ink); background:#0e2528; font:inherit; font-size:12px; }
.tkar-voice .tkar-voice-button { min-height:36px; padding:0 12px; font-size:12px; }
.tkar-voice :is(button,select,input):focus-visible { outline:3px solid #f6d892; outline-offset:3px; }
.tkar-voice .tkar-voice-button[aria-pressed="true"] { border-color:var(--gold); background:#354d3c; }
.tkar-voice-captions-label { display:flex; align-items:center; gap:6px; min-height:36px; color:var(--muted); font-size:11px; }
.tkar-voice-captions-label input { width:16px; height:16px; accent-color:var(--gold); }
.tkar-voice-status { margin-top:6px; color:#b9cdbb; font-size:11px; line-height:1.5; }
.tkar-voice-captions { margin-top:8px; padding:8px 10px; border-left:2px solid var(--gold); color:var(--ink); font-size:13px; line-height:1.6; white-space:pre-wrap; overflow-wrap:anywhere; }
.tkar-voice [hidden] { display:none !important; }
.tkar-voice-history { width:min(1120px,100%); margin:0 auto; padding:0 32px 20px; }
.tkar-voice-history:empty { display:none; }
.tkar-voice-message { margin:14px 0; padding:14px 16px; border:1px solid var(--line); border-radius:8px; background:rgba(102,142,112,.07); }
.tkar-voice-message-label { margin-bottom:9px; color:var(--gold); font-size:11px; font-weight:650; }
.tkar-voice-transcript { color:var(--muted); line-height:1.65; font-size:14px; white-space:pre-wrap; overflow-wrap:anywhere; }
.tkar-voice-transcript:empty { display:none; }
.tkar-voice-segment { margin-top:10px; padding:10px 12px; border-left:2px solid transparent; transition:border-color 120ms ease,background 120ms ease; }
.tkar-voice-segment.is-speaking { border-left-color:var(--gold); background:rgba(230,197,128,.08); }
.tkar-voice-text { margin:8px 0; line-height:1.7; white-space:pre-wrap; overflow-wrap:anywhere; }
.tkar-voice-equation { max-width:100%; margin:12px 0; overflow-x:auto; overscroll-behavior-x:contain; }
.tkar-voice-steps { margin:8px 0; padding-left:24px; line-height:1.7; }
.tkar-voice-steps li { margin:6px 0; white-space:pre-wrap; overflow-wrap:anywhere; }
.tkar-voice-table-wrap { max-width:100%; overflow-x:auto; overscroll-behavior-x:contain; }
.tkar-voice-table { width:100%; border-collapse:collapse; font-size:13px; line-height:1.5; }
.tkar-voice-table :is(th,td) { padding:8px 10px; border:1px solid var(--line); text-align:left; overflow-wrap:anywhere; }
.tkar-voice-table th { color:var(--gold); background:rgba(230,197,128,.05); }
@media (max-width:700px) {
  .tkar-voice { padding:8px 14px; }
  .tkar-voice-controls { gap:7px; }
  .tkar-voice-choice { flex:1 0 100%; justify-content:space-between; }
  .tkar-voice-mode { flex:0 1 220px; min-height:44px; }
  .tkar-voice .tkar-voice-button { min-height:44px; }
  .tkar-voice-captions-label { min-height:44px; }
  .tkar-voice-history { padding:0 14px 14px; }
  .tkar-voice-message { padding:12px; }
  .tkar-voice-segment { padding:8px; }
}
@media (prefers-reduced-motion:reduce) { .tkar-voice-segment { transition:none; } }

.tkar-voice-mount { grid-column:1 / -1; grid-row:3; min-width:0; }
.tkar-voice-mount .tkar-voice { padding:7px 0 0; }
.tkar-voice-mount .tkar-voice-disclosure { color:var(--muted); font-size:10px; }