:root {
  color-scheme: dark;
  --bg: #080a11;
  --panel: #111520;
  --panel-2: #171b29;
  --edge: rgba(224,232,255,.13);
  --edge-strong: rgba(224,232,255,.24);
  --ink: #f5f2e9;
  --muted: #a3a8ba;
  --faint: #686e82;
  --gold: #ffd36e;
  --cyan: #79e4ff;
  --green: #82e5a8;
  --red: #ff7488;
  --violet: #ad87ff;
  --serif: "Palatino Linotype", Palatino, Georgia, serif;
  --sans: ui-rounded, "SF Pro Rounded", "Segoe UI", system-ui, sans-serif;
}

* { box-sizing: border-box; }
html { min-width: 320px; background: var(--bg); }
body {
  margin: 0; min-height: 100vh; color: var(--ink); font-family: var(--sans);
  background:
    radial-gradient(54% 40% at 11% 0%, rgba(54,107,157,.19), transparent 70%),
    radial-gradient(46% 38% at 92% 12%, rgba(118,67,150,.16), transparent 70%),
    linear-gradient(145deg,#11141f,#070910 68%);
}
body::before { content: ""; position: fixed; inset: 0; pointer-events: none; opacity: .18; background-image: linear-gradient(rgba(255,255,255,.025) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.018) 1px,transparent 1px); background-size: 36px 36px; mask-image: linear-gradient(black,transparent 78%); }
button, a { font: inherit; -webkit-tap-highlight-color: transparent; }
button { color: inherit; }
button:focus-visible, a:focus-visible { outline: 3px solid var(--cyan); outline-offset: 3px; }

.app-shell { position: relative; width: min(1580px,100%); margin: 0 auto; padding: 24px clamp(12px,2.3vw,36px) 56px; }
.app-header { display: flex; align-items: center; gap: 18px; }
.back-link { display: grid; place-items: center; flex: 0 0 42px; height: 42px; color: var(--muted); text-decoration: none; border: 1px solid var(--edge); border-radius: 50%; background: rgba(255,255,255,.035); font-size: 23px; transition: .16s; }
.back-link:hover { color: var(--cyan); border-color: rgba(121,228,255,.42); transform: translateX(-3px); }
.title-block { flex: 1; min-width: 0; }
.eyebrow { color: #b3abc8; font-size: 8px; font-weight: 900; letter-spacing: .19em; text-transform: uppercase; }
.title-block h1 { margin: 3px 0 2px; font: 800 clamp(29px,3.5vw,48px)/1 var(--serif); }
.title-block h1 i { color: var(--cyan); font-weight: 500; }
.title-block p { max-width: 760px; margin: 0; color: var(--muted); font-size: 11px; line-height: 1.5; }
.session-stats { display: grid; grid-template-columns: repeat(3,78px); gap: 6px; }
.session-stats div { padding: 9px 6px; text-align: center; border: 1px solid var(--edge); border-radius: 11px; background: rgba(12,15,24,.75); }
.session-stats strong, .session-stats span { display: block; }
.session-stats strong { font: 800 19px/1 var(--serif); }
.session-stats span { margin-top: 4px; color: var(--faint); font-size: 6px; font-weight: 900; letter-spacing: .11em; }
.session-stats div:nth-child(2) strong { color: var(--gold); }
.session-stats div:nth-child(3) strong { color: var(--cyan); }

.design-rule { display: grid; grid-template-columns: 34px auto 1fr; align-items: center; gap: 11px; margin: 18px 0 11px; padding: 10px 13px; border: 1px solid rgba(121,228,255,.22); border-radius: 14px; background: linear-gradient(90deg,rgba(44,120,145,.11),rgba(15,18,28,.76)); }
.rule-glyph { display: grid; place-items: center; width: 30px; height: 30px; color: var(--cyan); border: 1px solid rgba(121,228,255,.3); border-radius: 8px; }
.design-rule div:nth-child(2) span, .design-rule div:nth-child(2) strong { display: block; }
.design-rule div:nth-child(2) span { color: var(--cyan); font-size: 6px; font-weight: 900; letter-spacing: .15em; }
.design-rule div:nth-child(2) strong { margin-top: 2px; font: 700 12px var(--serif); }
.design-rule p { margin: 0; color: var(--muted); font-size: 8px; text-align: right; }

.variant-tabs { display: flex; gap: 7px; padding: 4px; overflow-x: auto; scrollbar-width: thin; border: 1px solid var(--edge); border-radius: 14px; background: #0a0d15; }
.variant-tab { display: grid; grid-template-columns: 27px 1fr; column-gap: 8px; flex: 1 0 175px; min-width: 0; padding: 8px 9px; color: var(--muted); text-align: left; border: 1px solid transparent; border-radius: 10px; background: transparent; cursor: pointer; }
.variant-tab > span { grid-row: 1 / 3; display: grid; place-items: center; width: 27px; height: 27px; color: var(--faint); border: 1px solid var(--edge); border-radius: 8px; font-size: 7px; font-weight: 900; }
.variant-tab strong { font: 700 10px var(--serif); white-space: nowrap; }
.variant-tab small { color: var(--faint); font-size: 6px; white-space: nowrap; }
.variant-tab:hover { color: var(--ink); background: rgba(255,255,255,.03); }
.variant-tab.active { color: #211a0b; border-color: color-mix(in srgb,var(--variant-color) 65%,white 14%); background: linear-gradient(#e9eff5,color-mix(in srgb,var(--variant-color) 74%,#aeb5c0)); }
.variant-tab.active > span { color: #1f2932; border-color: rgba(25,34,43,.28); }
.variant-tab.active small { color: rgba(28,35,45,.66); }

.adjustment-bar { display: grid; grid-template-columns: auto repeat(3,minmax(190px,1fr)) auto; align-items: end; gap: 8px; margin: 10px 0; padding: 10px; border: 1px solid var(--edge); border-radius: 14px; background: rgba(15,18,28,.8); }
.adjustment-label { padding: 0 4px 4px; }
.adjustment-label span, .adjustment-label strong { display: block; }
.adjustment-label strong { margin-top: 2px; font: 700 10px var(--serif); }
.adjustment-bar fieldset { min-width: 0; margin: 0; padding: 0; border: 0; }
.adjustment-bar legend { margin: 0 0 4px 2px; color: var(--faint); font-size: 6px; font-weight: 900; letter-spacing: .1em; text-transform: uppercase; }
.segmented { display: flex; min-width: 0; padding: 3px; border: 1px solid var(--edge); border-radius: 9px; background: #090c13; }
.segmented button { flex: 1; min-width: 0; padding: 6px 5px; color: var(--faint); white-space: nowrap; border: 0; border-radius: 6px; background: transparent; cursor: pointer; font-size: 6px; font-weight: 900; }
.segmented button:hover { color: var(--muted); }
.segmented button.active { color: #122027; background: var(--cyan); }
.adjust-note { display: block; margin-top: 5px; padding: 0 2px; color: var(--muted); font-size: 7.5px; line-height: 1.4; }
.reset-button { padding: 9px 10px; color: var(--muted); border: 1px solid var(--edge); border-radius: 9px; background: rgba(255,255,255,.03); cursor: pointer; font-size: 7px; font-weight: 900; }
.reset-button:hover { color: var(--cyan); border-color: rgba(121,228,255,.35); }

.workbench { display: grid; grid-template-columns: minmax(0,1fr) 340px; gap: 11px; align-items: start; }
.map-stage, .node-inspector, .comparison-board { border: 1px solid var(--edge); background: rgba(15,18,28,.92); box-shadow: 0 20px 50px rgba(0,0,0,.3),inset 0 1px rgba(255,255,255,.035); }
.map-stage { min-width: 0; overflow: hidden; border-radius: 19px; }
.stage-header { display: flex; justify-content: space-between; gap: 18px; min-height: 80px; padding: 14px 16px; border-bottom: 1px solid var(--edge); }
.stage-header h2 { margin: 2px 0 2px; font: 700 23px/1.1 var(--serif); }
.stage-header p { max-width: 790px; margin: 0; color: var(--muted); font-size: 8px; line-height: 1.5; }
.stage-verdict { align-self: center; max-width: 205px; padding-right: 10px; text-align: right; border-right: 2px solid var(--map-color,var(--cyan)); }
.stage-verdict span, .stage-verdict strong { display: block; }
.stage-verdict span { color: var(--map-color,var(--cyan)); font-size: 6px; font-weight: 900; letter-spacing: .13em; }
.stage-verdict strong { margin-top: 3px; color: var(--muted); font: 700 9px/1.3 var(--serif); }
.map-scroll { min-height: 620px; overflow: auto; scrollbar-color: color-mix(in srgb,var(--map-color,var(--cyan)) 38%,#303544) #090c13; }
.map-canvas { position: relative; width: 1000px; min-width: 1000px; height: 600px; margin: 0 auto; overflow: hidden; isolation: isolate; background: radial-gradient(circle at 50% 50%,color-mix(in srgb,var(--map-color,var(--cyan)) 10%,transparent),transparent 35%),linear-gradient(rgba(5,8,14,.64),rgba(7,9,15,.89)),url("../../web2/assets/themes/ironkeep-hall.jpg") center/cover; }
.map-canvas[data-biome="verdant"] { background-image: radial-gradient(circle at 50% 50%,rgba(104,225,155,.11),transparent 36%),linear-gradient(rgba(7,14,13,.6),rgba(5,10,9,.9)),url("../../web2/assets/themes/verdant-reliquary.jpg"); }
.map-canvas[data-biome="aether"] { background-image: radial-gradient(circle at 50% 50%,rgba(111,211,255,.12),transparent 36%),linear-gradient(rgba(7,12,20,.58),rgba(5,8,14,.9)),url("../../web2/assets/themes/aether-bloom.jpg"); }
.map-canvas[data-biome="codex"] { background-image: radial-gradient(circle at 50% 50%,rgba(176,124,255,.12),transparent 36%),linear-gradient(rgba(14,8,25,.58),rgba(7,5,13,.9)),url("../../web2/assets/themes/illuminated-codex.jpg"); }
.map-canvas::after { content: attr(data-watermark); position: absolute; right: 16px; bottom: 12px; z-index: 0; color: rgba(255,255,255,.07); font: 700 18px var(--serif); letter-spacing: .16em; }
.map-canvas::before { content: ""; position: absolute; inset: 0; z-index: 5; pointer-events: none; opacity: 0; background: radial-gradient(circle at 50% 50%,color-mix(in srgb,var(--map-color) 18%,transparent),transparent 48%); transition: opacity .18s; }
.map-canvas.resolving::before { opacity: 1; animation: resolve-flash .5s ease; }
@keyframes resolve-flash { 50% { background-color: rgba(255,255,255,.055); } }
.route-lines { position: absolute; inset: 0; z-index: 0; width: 1000px; height: 600px; pointer-events: none; }
.route-edge { fill: none; stroke: #4b5367; stroke-width: 4; stroke-linecap: round; stroke-dasharray: 8 11; opacity: .58; transition: opacity .2s,stroke .2s; }
.route-edge.cleared { stroke: var(--map-color); opacity: .9; filter: drop-shadow(0 0 4px color-mix(in srgb,var(--map-color) 35%,transparent)); }
.route-edge.available { stroke: color-mix(in srgb,var(--map-color) 74%,white 12%); opacity: .84; animation: edge-march 1.2s linear infinite; }
.route-edge.fogged { opacity: .1; filter: blur(2px); }
.route-edge.hidden-edge { opacity: .025; }
.route-edge.gone { opacity: 0; }
@keyframes edge-march { to { stroke-dashoffset: -38; } }
.route-node { --node-color: var(--map-color); position: absolute; left: calc(var(--x)*1%); top: calc(var(--y)*1%); z-index: 2; display: grid; grid-template-columns: 43px 1fr; grid-template-rows: auto 1fr auto; gap: 0 7px; width: 126px; height: 94px; padding: 8px; transform: translate(-50%,-50%); color: var(--muted); text-align: left; border: 1px solid #303649; border-radius: 13px; background: #141925; box-shadow: 0 7px 18px rgba(0,0,0,.46),inset 0 1px rgba(255,255,255,.04); cursor: pointer; overflow: hidden; transition: opacity .22s,filter .22s,transform .15s,border-color .15s; }
.route-node:hover:not(.deep-fog):not(.bypassed) { z-index: 3; transform: translate(-50%,-53%); color: var(--ink); border-color: color-mix(in srgb,var(--node-color) 55%,white 8%); }
.route-node img { grid-row: 1 / 4; display: block; align-self: center; width: 43px; height: 43px; object-fit: contain; border: 1px solid color-mix(in srgb,var(--node-color) 28%,#32394c); border-radius: 9px; background: #090c14; }
.route-node span, .route-node strong, .route-node small { display: block; min-width: 0; }
.route-node > span { color: var(--node-color); font-size: 6px; font-weight: 900; letter-spacing: .09em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.route-node strong { align-self: center; font: 700 10px/1.1 var(--serif); }
.route-node small { color: var(--faint); font-size: 6px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.route-node.current { color: var(--ink); border-color: var(--gold); box-shadow: 0 0 0 2px rgba(255,211,110,.19),0 8px 25px rgba(0,0,0,.5); }
.route-node.current::after { content: "YOU"; position: absolute; top: 4px; right: 5px; padding: 2px 4px; color: #251b08; border-radius: 4px; background: var(--gold); font-size: 5px; font-weight: 900; }
.route-node.available { color: var(--ink); border-color: color-mix(in srgb,var(--node-color) 58%,transparent); animation: node-ready 1.7s ease-in-out infinite; }
@keyframes node-ready { 50% { box-shadow: 0 0 20px color-mix(in srgb,var(--node-color) 19%,transparent); } }
.route-node.cleared img { filter: saturate(.75); }
.route-node.cleared::after { content: "✓"; position: absolute; top: 4px; right: 5px; display: grid; place-items: center; width: 14px; height: 14px; color: #211907; border-radius: 50%; background: var(--gold); font-size: 7px; font-weight: 900; }
.route-node.bonus-node { --node-color: var(--gold); background: linear-gradient(145deg,#1e1d25,#151824); }
.route-node.bonus-node > span::before { content: "✦ "; }
.route-node.near-fog { opacity: .34; filter: blur(1.8px) grayscale(.6); pointer-events: none; }
.route-node.deep-fog { opacity: .16; filter: blur(5px) grayscale(1); pointer-events: none; }
.route-node.near-fog strong, .route-node.deep-fog strong { color: transparent; text-shadow: 0 0 7px rgba(255,255,255,.5); }
.route-node.bypassed { opacity: .13; filter: grayscale(1); pointer-events: none; }
.route-node.bypassed::before { content: "BYPASSED"; position: absolute; inset: 0; z-index: 2; display: grid; place-items: center; color: #8b91a2; background: rgba(9,11,17,.62); font-size: 6px; font-weight: 900; letter-spacing: .1em; transform: rotate(-10deg); }
.map-footer { display: flex; align-items: center; gap: 13px; padding: 9px 13px; color: var(--faint); border-top: 1px solid var(--edge); font-size: 6px; font-weight: 900; white-space: nowrap; overflow-x: auto; }
.map-footer > span:first-child { margin-right: auto; color: var(--muted); }
.map-footer i { display: inline-block; width: 7px; height: 7px; margin-right: 4px; border: 1px solid #555c70; border-radius: 50%; }
.map-footer i.current { border-color: var(--gold); background: var(--gold); }
.map-footer i.available { border-color: var(--cyan); box-shadow: 0 0 5px var(--cyan); }
.map-footer i.bonus { border-color: var(--gold); }
.map-footer i.fogged { filter: blur(2px); background: #73798b; }

.node-inspector { position: sticky; top: 11px; min-height: 552px; overflow: hidden; border-radius: 19px; }
.inspector-empty { display: grid; place-items: center; min-height: 552px; padding: 30px; text-align: center; }
.empty-glyph { display: grid; place-items: center; width: 70px; height: 70px; margin: 0 auto 13px; color: var(--faint); border: 1px dashed var(--edge-strong); border-radius: 17px; font-size: 25px; }
.inspector-empty h3 { margin: 5px 0 7px; font: 700 20px var(--serif); }
.inspector-empty p { margin: 0; color: var(--muted); font-size: 8px; line-height: 1.55; }
.inspector-content { padding: 15px; }
.inspector-topline { display: flex; justify-content: space-between; gap: 8px; align-items: center; }
.inspector-topline span { color: var(--node-color); font-size: 6px; font-weight: 900; letter-spacing: .13em; }
.inspector-topline i { padding: 4px 6px; color: var(--faint); border: 1px solid var(--edge); border-radius: 99px; font-style: normal; font-size: 6px; font-weight: 900; }
.inspector-content h3 { margin: 5px 0 10px; font: 700 24px/1.05 var(--serif); }
.node-art { display: grid; grid-template-columns: 92px 1fr; gap: 10px; padding: 10px; border: 1px solid color-mix(in srgb,var(--node-color) 26%,var(--edge)); border-radius: 13px; background: color-mix(in srgb,var(--node-color) 5%,#0d1018); }
.node-art img { display: block; width: 92px; height: 92px; object-fit: contain; border: 1px solid #343a4c; border-radius: 10px; background: #090c14; }
.node-art div { align-self: center; }
.node-art span, .node-art strong, .node-art small { display: block; }
.node-art span { color: var(--node-color); font-size: 6px; font-weight: 900; letter-spacing: .1em; }
.node-art strong { margin: 4px 0; font: 700 12px var(--serif); }
.node-art small { color: var(--muted); font-size: 7px; line-height: 1.4; }
.blind-card { margin: 9px 0; padding: 10px; border: 1px solid var(--edge); border-radius: 10px; background: rgba(255,255,255,.024); }
.blind-card header { display: flex; justify-content: space-between; gap: 8px; }
.blind-card header span { color: var(--red); font-size: 6px; font-weight: 900; letter-spacing: .12em; }
.blind-card header strong { font: 700 11px var(--serif); }
.blind-card p { margin: 6px 0 0; color: var(--muted); font-size: 8px; line-height: 1.45; }
.blind-facts { display: grid; grid-template-columns: repeat(3,1fr); gap: 5px; margin-top: 8px; }
.blind-facts div { padding: 7px 4px; text-align: center; border: 1px solid var(--edge); border-radius: 8px; background: #0d1018; }
.blind-facts span, .blind-facts strong { display: block; }
.blind-facts span { color: var(--faint); font-size: 5px; font-weight: 900; }
.blind-facts strong { margin-top: 3px; font: 700 9px var(--serif); }
.forward-note { padding: 9px 10px; color: var(--muted); border-left: 2px solid var(--green); background: rgba(130,229,168,.035); font-size: 7px; line-height: 1.5; }
.forward-note strong { color: var(--green); }
.node-action { width: 100%; margin-top: 10px; padding: 11px; color: #152227; border: 1px solid #b9f4ff; border-radius: 10px; background: linear-gradient(#b9f4ff,#68cfe8); cursor: pointer; font-size: 8px; font-weight: 900; }
.node-action:hover:not(:disabled) { filter: brightness(1.08); }
.node-action:disabled { color: #707587; border-color: #343a49; background: #1a1f2b; cursor: default; }
.reward-note { margin-top: 8px; color: var(--gold); font-size: 7px; line-height: 1.4; }

.comparison-board { margin-top: 11px; padding: 15px; border-radius: 19px; }
.comparison-board > header { display: flex; justify-content: space-between; align-items: end; gap: 22px; margin-bottom: 11px; }
.comparison-board h2 { margin: 3px 0 0; font: 700 21px var(--serif); }
.comparison-board > header p { margin: 0; color: var(--muted); font-size: 7px; }
.comparison-grid { display: grid; grid-template-columns: repeat(6,minmax(0,1fr)); gap: 7px; }
.comparison-card { min-height: 118px; padding: 10px; color: var(--muted); text-align: left; border: 1px solid #2c3241; border-radius: 11px; background: #111520; cursor: pointer; }
.comparison-card:hover, .comparison-card.active { color: var(--ink); border-color: var(--card-color); background: color-mix(in srgb,var(--card-color) 6%,#111520); }
.comparison-card span, .comparison-card strong, .comparison-card small { display: block; }
.comparison-card span { color: var(--card-color); font-size: 6px; font-weight: 900; letter-spacing: .11em; }
.comparison-card strong { margin: 4px 0; font: 700 11px var(--serif); }
.comparison-card small { font-size: 7px; line-height: 1.45; }
.comparison-card b { display: inline-block; margin-top: 8px; color: var(--faint); font-size: 6px; }
.toast { position: fixed; left: 50%; bottom: 22px; z-index: 20; width: max-content; max-width: calc(100% - 24px); padding: 9px 14px; transform: translate(-50%,18px); color: #172126; border: 1px solid #c8f6ff; border-radius: 99px; background: linear-gradient(#c6f6ff,#6ed1e8); opacity: 0; pointer-events: none; transition: .2s; text-align: center; font-size: 8px; font-weight: 900; }
.toast.show { opacity: 1; transform: translate(-50%,0); }

@media (max-width: 1180px) {
  .adjustment-bar { grid-template-columns: repeat(3,1fr) auto; }
  .adjustment-label { grid-column: 1 / -1; }
  .workbench { grid-template-columns: 1fr; }
  .node-inspector { position: static; min-height: 0; }
  .inspector-empty { min-height: 250px; }
  .inspector-content { display: grid; grid-template-columns: minmax(270px,.8fr) minmax(330px,1.2fr); gap: 9px 12px; }
  .inspector-topline, .inspector-content h3 { grid-column: 1 / -1; }
  .node-art { grid-row: span 3; }
  .blind-card { margin: 0; }
  .comparison-grid { grid-template-columns: repeat(3,1fr); }
}

@media (max-width: 760px) {
  .app-header { align-items: flex-start; }
  .session-stats { grid-template-columns: repeat(3,58px); }
  .session-stats div { padding: 8px 3px; }
  .design-rule { grid-template-columns: 32px 1fr; }
  .design-rule p { grid-column: 1 / -1; text-align: left; }
  .adjustment-bar { grid-template-columns: 1fr; }
  .adjustment-label { grid-column: auto; }
  .stage-verdict { display: none; }
  .map-scroll { min-height: 610px; }
  .comparison-board > header { display: block; }
  .comparison-board > header p { margin-top: 5px; }
}

@media (max-width: 540px) {
  .app-shell { padding-top: 14px; }
  .app-header { display: grid; grid-template-columns: 40px 1fr; }
  .back-link { width: 40px; height: 40px; }
  .session-stats { grid-column: 1 / -1; width: 100%; grid-template-columns: repeat(3,1fr); }
  .title-block h1 { font-size: 30px; }
  .variant-tab { flex-basis: 164px; }
  .stage-header { min-height: 0; padding: 13px; }
  .stage-header h2 { font-size: 21px; }
  .map-canvas { margin: 0; }
  .inspector-content { display: block; }
  .node-art, .blind-card, .forward-note { margin: 9px 0; }
  .comparison-grid { grid-template-columns: repeat(2,1fr); }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}