:root{
  --scaleFactor: 1;
  --font: 'Comfortaa', Arial, sans-serif;
  --bg-deep: #091428;
  --axis: #FF9F1A;
  --axis-glow: #FFD700;
  --green: #219150;
  --green-light: #58D98B;
  --pink: #E84C9A;
  --red: #E74C3C;
  --red-light: #FF8A80;
  --callout: #3498DB;
  --slant: #4db8ff;
  --hyp: #2fe0d0;
  --teal: #1f8aa0;
  --text: #ffffff;
}

*{ box-sizing: border-box; }
html, body{ margin:0; padding:0; height:100%; background:#05101f; font-family:var(--font); }
html{ font-size: 100%; }

.responsive-container{
  width:100vw; height:100vh; display:flex; align-items:center; justify-content:center;
  background: radial-gradient(ellipse at 50% 30%, #142a4a 0%, #0b1d33 70%);
  overflow:hidden;
}
.responsive-wrapper{
  position:absolute; top:50%; left:50%;
  width:1920px; height:1080px;
  transform: translate(-50%, -50%) scale(var(--scaleFactor));
  transform-origin: center center;
}

.applet-root{
  width:100%; height:100%; position:relative; overflow:hidden;
  background: radial-gradient(ellipse at 50% 30%, #1a3a5c 0%, #0d2240 60%, #091428 100%);
  color:var(--text);
}

/* --------------------------- layout ------------------------------ */
.screen-layout{ width:100%; height:100%; display:flex; flex-direction:column; }
.screen-header{
  flex:0 0 11%; display:flex; align-items:center; justify-content:center; text-align:center;
  font-size:1.85rem; font-weight:700; color:#dbeeff;
  background: linear-gradient(180deg, rgba(30,72,120,.9), rgba(20,52,92,.5));
  border-bottom:2px solid rgba(120,180,235,.25); padding:0 60px; line-height:1.35;
}
.screen-main{ flex:1; display:flex; align-items:stretch; padding:20px 30px; min-height:0; }

/* Fixed 70 / 30 split: the grid lives in a stable 70% column so it never shifts
   horizontally when the right column's content changes. The right column stacks
   the MCQ/panel content above the navigation controls (buttons + instruction text),
   which used to live in a separate full-width footer bar. */
.grid-col{ flex:0 0 70%; max-width:70%; position:relative; display:flex; align-items:center; justify-content:center; min-width:0; }
.mcq-col{
  flex:0 0 30%; max-width:30%; display:flex; flex-direction:column;
  align-items:center; justify-content:center; gap:28px; padding-left:20px;
}
.mcq-col-content{ display:flex; align-items:center; justify-content:center; }
.mcq-col-footer{
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:18px;
  position:relative;
}
.screen-instruction{ font-size:1.3rem; font-weight:600; color:#cfe6ff; text-align:center; }

/* --------------------------- coordinate plane -------------------- */
.cp-wrap{ width:100%; height:100%; display:flex; align-items:center; justify-content:center; }
.cp-svg{ width:auto; height:100%; max-width:100%; }

.cp-grid{ stroke: rgba(150,185,225,.22); stroke-width:1; }
.cp-tick{ stroke: var(--axis); stroke-width:2.5; stroke-linecap:round; }
.cp-axis{
  stroke: var(--axis); stroke-width:5; stroke-linecap:round;
  filter: drop-shadow(0 0 4px rgba(255,159,26,.5));
}
.cp-axis--drawing{ animation: axisDraw .6s ease-out forwards; }
.cp-axis-label{ fill:#ffe9c2; font-family:var(--font); font-size:24px; font-weight:700; text-anchor:middle; }

/* axis index numbers — lighter + smaller so the bold point names read as primary */
.cp-num{ fill:#9fc0e0; font-family:var(--font); font-size:15px; font-weight:500; text-anchor:middle; }

/* named points — bigger, bold red dots like the source diagrams */
.cp-point{ fill:#e23b2e; stroke:#6e0f08; stroke-width:2.5; }
.cp-axis-dot{ fill: var(--axis); stroke:#fff; stroke-width:1.5; }
.cp-point--pulse{ animation: pointPulse 1s ease-in-out infinite, pointGlow 1.2s ease-in-out infinite; transform-box:fill-box; transform-origin:center; }
.cp-point-label{ fill:#f3f8ff; font-family:var(--font); font-size:20px; font-weight:800; }

.cp-axis-arrow{ fill: var(--axis); filter: drop-shadow(0 0 4px rgba(255,159,26,.5)); }
.cp-axis-arrow--fadein{ opacity:0; animation: arrowFadeIn .25s ease-out .55s forwards; }

/* --------------------------- MCQ panel ---------------------------- */
.mcq-panel{ display:flex; flex-direction:column; align-items:stretch; gap:18px; width:100%; }
.mcq-question{
  background: rgba(31,138,160,.32); border:2px solid rgba(74,196,220,.6); border-radius:16px;
  padding:18px 22px; font-size:1.5rem; font-weight:700; color:#dff7ff; text-align:center;
}
.mcq-options{ display:flex; flex-direction:row; flex-wrap:wrap; align-items:center; justify-content:center; gap:14px; width:100%; }
.mcq-chip{
  font-family:var(--font); font-size:1.5rem; font-weight:700; color:#06203a;
  padding:14px 22px; min-width:110px; border:none; border-radius:14px; cursor:pointer;
  background: linear-gradient(180deg, #2fbfd6, #1f8aa0); color:#05222a; box-shadow:0 5px 0 rgba(0,0,0,.25);
  transition: transform .12s, filter .12s;
}
.mcq-chip:hover{ transform:translateY(-2px); filter:brightness(1.06); }
.mcq-chip--correct{ background: linear-gradient(180deg, var(--green-light), var(--green)); color:#06280f; }
.mcq-chip--incorrect{ background: linear-gradient(180deg, var(--red-light), var(--red)); color:#3a0a06; animation: teeter .45s ease-in-out; }
.mcq-chip--dim{ opacity:.5; cursor:default; }
.mcq-chip:disabled{ cursor:default; }
.mcq-feedback{
  border-radius:16px; padding:18px 20px; font-size:1.3rem; font-weight:600; line-height:1.5;
  animation: calloutIn .3s ease-out; white-space:pre-line; text-align:center;
}
.mcq-feedback--correct{ background: rgba(88,217,139,.22); border:2px solid rgba(88,217,139,.55); color:#d8ffe6; }
.mcq-feedback--incorrect{ background: rgba(231,76,60,.22); border:2px solid rgba(231,76,60,.55); color:#ffe1de; }

/* sample-line selector buttons (screen 2) */
.line-btn-group{ display:flex; flex-direction:column; align-items:stretch; gap:26px; }
.line-btn-wrap{ position:relative; display:flex; }
.line-btn{
  font-family:var(--font); font-size:1.4rem; font-weight:700; color:#05222a;
  padding:14px 26px; width:100%; min-width:200px; border:none; border-radius:12px; cursor:pointer;
  background: linear-gradient(180deg, #9fd96b, #6fb83f); box-shadow:0 5px 0 rgba(0,0,0,.25);
  transition: transform .12s, filter .12s;
}
.line-btn:hover{ transform:translateY(-2px); filter:brightness(1.06); }
/* once a sample line has been opened, its button greys out to show it's been used */
.line-btn--active{
  background: linear-gradient(180deg, #9aa6ad, #6f7c83); color:#e9eef1;
  box-shadow:0 5px 0 rgba(0,0,0,.2); cursor:default; opacity:.85;
}
.line-btn--active:hover{ transform:none; filter:none; }

/* small distance read-out card under the sample lines (screens 3-6) */
.dist-card{
  background: rgba(226,236,248,.95); color:#10314f; border-radius:12px;
  padding:12px 18px; font-size:1.4rem; font-weight:700; text-align:center;
  box-shadow:0 5px 16px rgba(0,0,0,.3); animation: calloutIn .3s ease-out;
}
.dist-card .dist-card-calc{ display:block; margin-top:6px; color:#0a6b3a; font-size:1.5rem; }

/* --------------------------- ctas -------------------------------- */
.next-btn, .explore-again{
  padding:14px 44px; border:none; cursor:pointer;
  font-family:var(--font); font-size:1.5rem; font-weight:700; color:#06280f; border-radius:40px;
  background: linear-gradient(180deg, var(--green-light), var(--green)); box-shadow:0 6px 0 rgba(0,0,0,.3);
}
.next-btn:hover, .explore-again:hover{ filter:brightness(1.08); }

/* orange glow outline on every clickable button — pulses to cue "tap me" */
.line-btn:not(.line-btn--active),
.next-btn, .explore-again,
.mcq-chip:not(:disabled):not(.mcq-chip--dim),
.drag-tile:not(.drag-tile--used){
  outline:2px solid rgba(255,159,26,.85); outline-offset:2px;
  animation: orangeGlow 1.6s ease-in-out infinite;
}
/* clicked/used/locked = no glow */
.line-btn--active, .mcq-chip:disabled, .mcq-chip--dim, .drag-tile--used{
  outline:none; animation:none;
}

/* --------------------------- keyframes --------------------------- */
@keyframes orangeGlow{
  0%,100%{ box-shadow:0 0 0 rgba(255,159,26,0), 0 5px 0 rgba(0,0,0,.25); }
  50%{ box-shadow:0 0 22px rgba(255,159,26,.85), 0 0 6px rgba(255,159,26,.6), 0 5px 0 rgba(0,0,0,.25); }
}
@keyframes pulseGlow{ 0%,100%{ box-shadow:0 6px 0 rgba(0,0,0,.3), 0 0 0 rgba(88,217,139,0); } 50%{ box-shadow:0 6px 0 rgba(0,0,0,.3), 0 0 26px rgba(88,217,139,.7); } }
@keyframes pointPulse{ 0%,100%{ opacity:1; } 50%{ opacity:.45; } }
@keyframes pointGlow{
  0%,100%{ filter: drop-shadow(0 0 1px rgba(255,215,0,.6)); }
  50%{ filter: drop-shadow(0 0 9px rgba(255,215,0,1)) drop-shadow(0 0 16px rgba(255,200,0,.8)); }
}
@keyframes distPulse{ 0%,100%{ opacity:1; } 50%{ opacity:.5; } }
@keyframes calloutIn{ 0%{ opacity:0; transform:translateY(-8px) scale(.96); } 100%{ opacity:1; transform:translateY(0) scale(1); } }
@keyframes axisDraw{ to{ stroke-dashoffset:0; } }
@keyframes arrowFadeIn{ to{ opacity:1; } }
@keyframes teeter{
  0%,100%{ transform: translateX(0); }
  20%{ transform: translateX(-9px) rotate(-6deg); }
  40%{ transform: translateX(8px) rotate(5deg); }
  60%{ transform: translateX(-6px) rotate(-3deg); }
  80%{ transform: translateX(4px) rotate(2deg); }
}

/* --------------------------- callouts (shared) --------------------------- */
.callout-layer{ position:absolute; inset:0; pointer-events:none; }
.callout{
  position:absolute; max-width:300px; padding:14px 18px; pointer-events:none;
  background: rgba(31,138,160,.92); color:#eaffff; border-radius:16px;
  font-size:1.15rem; font-weight:600; line-height:1.4; text-align:center;
  box-shadow:0 8px 26px rgba(0,0,0,.35); border:2px solid rgba(74,196,220,.6);
  animation: calloutIn .35s ease-out;
}
.callout--top-right{ top:10%; right:0; }
.callout--bottom-right{ bottom:14%; right:0; }
.callout--top-left{ top:10%; left:0; }
.callout--bottom-left{ bottom:14%; left:0; }
.callout--wide{ max-width:420px; }

/* --------------------------- hand pointer (shared) --------------------------- */
.hand-pointer{
  position:absolute; right:-46px; top:50%; transform:translateY(-50%);
  width:64px; height:64px; pointer-events:none; z-index:5;
  filter: drop-shadow(0 4px 6px rgba(0,0,0,.5));
  animation: handBob 1s ease-in-out infinite;
}
@keyframes handBob{ 0%,100%{ transform:translateY(-50%) translateX(0); } 50%{ transform:translateY(-50%) translateX(-8px); } }

/* =================================================================
   applet5-specific: distance-between-two-points plane
   ================================================================= */

/* connector segments between points */
.dp-seg{ fill:none; stroke-linecap:round; }
.dp-seg--slant{ stroke: var(--slant); stroke-width:6; filter: drop-shadow(0 0 5px rgba(77,184,255,.6)); }
.dp-seg--leg{ stroke: var(--green-light); stroke-width:6; filter: drop-shadow(0 0 4px rgba(88,217,139,.6)); }
.dp-seg--leg-pink{ stroke: var(--pink); stroke-width:6; filter: drop-shadow(0 0 4px rgba(232,76,154,.6)); }
.dp-seg--hyp{ stroke: var(--hyp); stroke-width:7; filter: drop-shadow(0 0 6px rgba(47,224,208,.7)); }
.dp-seg--thin{ stroke: rgba(150,185,225,.55); stroke-width:2; stroke-dasharray:6 6; }
.dp-seg--pulse{ animation: distPulse 1.1s ease-in-out infinite; }
/* wrong = a wrong drag/drop was just made on this leg: flash red instead of the default green,
   since green-on-green pulsing (the default active-leg color) barely reads as an error. */
.dp-seg--wrong{ stroke: var(--red) !important; filter: drop-shadow(0 0 6px rgba(231,76,60,.7)) !important; animation: distPulse .5s ease-in-out 2; }
/* ghost = faint grey background outline (point/line not yet active) */
.dp-seg--ghost{ stroke: rgba(150,185,225,.30) !important; stroke-width:2.5 !important; filter:none !important; }
/* done = a leg whose distance has already been found: stays solid + its own color, just dimmed
   (unlike ghost, which fades everything to the same faint grey — this still reads as "that leg"). */
.dp-seg--done{ opacity:.45; filter:none !important; }

/* ghost points + labels: dim grey, sit in background */
.cp-point--ghost{ fill: rgba(150,175,205,.5); stroke: rgba(120,150,185,.6); stroke-width:1.5; }
.cp-point-label--ghost{ fill: rgba(170,195,225,.5); font-weight:700; }

/* right-angle square marker */
.dp-rightangle{ fill:none; stroke:#cfe0f0; stroke-width:2; }

/* leg labels / coordinate-difference tags */
.dp-leg-tag-bg{ fill:#e7edf4; stroke:#9fb3c8; stroke-width:1.5; }
.dp-leg-tag-bg--green{ fill: rgba(33,145,80,.92); stroke:#7ee0a6; }
.dp-leg-tag-bg--pink{ fill: rgba(157,35,98,.92); stroke:#f0a6cc; }
.dp-leg-tag-text{ fill:#10314f; font-family:var(--font); font-size:16px; font-weight:700; text-anchor:middle; }
.dp-leg-tag-text--light{ fill:#ffffff; }

/* plain leg-length number drawn next to a side (no card) */
.dp-leg-num{ fill:#d7ffe6; font-family:var(--font); font-size:20px; font-weight:800; text-anchor:middle; }
.dp-leg-num--slant{ fill:#bde6ff; }
.dp-leg-num--wrong{ fill: var(--red-light); }
.dp-leg-num--right{ fill: #ffb84d; }

/* pulsating "?" on a slant segment */
.dp-qmark{ fill:#ff5a7a; font-family:var(--font); font-size:30px; font-weight:800; text-anchor:middle; filter: drop-shadow(0 0 6px rgba(255,90,122,.7)); }
.dp-qmark--pulse{ animation: pointPulse 1s ease-in-out infinite; }

/* solved distance label that replaces a "?" */
.dp-dist-label{ fill:#bdffe0; font-family:var(--font); font-size:22px; font-weight:800; text-anchor:middle; animation: calloutIn .35s ease-out; }

/* highlighted axis coordinate values (pulsing on wrong answer) */
.cp-num--highlight{ fill:#ffd24a; font-weight:800; }
.cp-num--highlight-wrong{ fill: var(--red-light); font-weight:800; }
.cp-num--pulse{ animation: pointPulse .9s ease-in-out infinite; }

/* triangle fill highlight (screens 29-30) */
.dp-tri-fill{ fill: rgba(88,217,139,.16); stroke:none; }

/* tappable grid intersection hotspot (exploration) */
.dp-tap-dot{ fill: rgba(95,180,255,.0); }
.dp-tap-dot--pulse{ fill: rgba(95,180,255,.55); animation: distPulse 1.2s ease-in-out infinite; cursor:pointer; }

/* explore-point chosen markers */
.dp-explore-point{ fill: var(--pink); stroke:#9c2362; stroke-width:2.5; }

/* KaTeX radical distance label inside an SVG <foreignObject> (e.g. √29, √40) */
.dp-dist-fo{
  width:100%; height:100%; display:flex; align-items:center; justify-content:center;
  color:#bdffe0; font-weight:800; line-height:1; pointer-events:none;
  animation: calloutIn .35s ease-out;
}
.dp-dist-fo .katex{ font-size:1.45em; color:#bdffe0; }
.dp-dist-fo .katex .sqrt > .root{ color:#bdffe0; }

/* KaTeX formula tag card on the graph (e.g. the distance-formula card on screen 15) */
.dp-math-tag{
  width:100%; height:100%; display:flex; align-items:center; justify-content:center;
  color:#0a3a4a; font-weight:700; line-height:1; pointer-events:none; white-space:nowrap;
}
.dp-math-tag .katex{ font-size:.95em; color:#0a3a4a; }

/* KaTeX inside MCQ chips / feedback inherits the surrounding text color */
.mcq-chip .katex, .mcq-feedback .katex, .math-line .katex{ color:inherit; font-size:1.04em; }
.sqrt-wrapper{ display:inline-block; }

/* =================================================================
   drag-tile interaction (screens 18-22)
   ================================================================= */
.drag-area{ display:flex; flex-direction:column; gap:22px; width:100%; align-items:stretch; }
.drag-row{ display:flex; align-items:center; gap:14px; justify-content:space-between; }
.drag-row-label{ font-size:1.4rem; font-weight:700; color:#dceeff; }
.drag-slot{
  width:74px; height:74px; border-radius:12px; flex:0 0 auto;
  border:3px dashed rgba(255,177,74,.8); background: rgba(255,177,74,.10);
  display:flex; align-items:center; justify-content:center;
  font-size:2rem; font-weight:800; color:#ffd9a8;
}
.drag-slot--active{ animation: pulseGlow 1.4s ease-in-out infinite; }
.drag-slot--filled{
  border:3px solid var(--green); background: linear-gradient(180deg, var(--green-light), var(--green));
  color:#06280f;
}
.drag-slot--locked{ border-style:solid; }
.drag-tiles{ display:flex; gap:18px; justify-content:center; margin-top:6px; }
.drag-tile{
  width:70px; height:70px; border-radius:12px; cursor:grab;
  background: linear-gradient(180deg, #ffb14a, #ff8a1a); box-shadow:0 5px 0 rgba(0,0,0,.25);
  display:flex; align-items:center; justify-content:center;
  font-size:2rem; font-weight:800; color:#5a2c00; touch-action:none; user-select:none;
}
.drag-tile:active{ cursor:grabbing; }
.drag-tile--used{ opacity:.25; pointer-events:none; }
.drag-tile--teeter{ animation: teeter .45s ease-in-out; }
.drag-tile--dragging{ opacity:.85; }
.drag-instr{ font-size:1.25rem; font-weight:600; color:#cfe6ff; text-align:center; margin-top:4px; }

/* =================================================================
   formula / generalization side panels (screens 29-31)
   ================================================================= */
.formula-panel{ display:flex; flex-direction:column; gap:20px; width:100%; }
.formula-note{
  background: rgba(31,98,160,.30); border:2px solid rgba(74,150,220,.55); border-radius:16px;
  padding:16px 20px; color:#eaf4ff; font-size:1.35rem; font-weight:600; line-height:1.4; text-align:center;
  animation: calloutIn .3s ease-out;
}
.formula-card{
  background: rgba(31,138,160,.30); border:2px solid rgba(74,196,220,.55); border-radius:16px;
  padding:18px 20px; color:#eaffff; font-size:1.5rem; font-weight:600; line-height:1.5; text-align:center;
  white-space:pre-line; animation: calloutIn .3s ease-out;
}
.formula-card .formula-title{ display:block; font-size:1.5rem; font-weight:700; color:#bdeeff; margin-bottom:6px; }
.formula-card .formula-eq{ display:block; font-size:1.8rem; font-weight:800; color:#bdffe0; margin-top:6px; }
.formula-card--hchange .formula-eq{ color:#9fd2ff; }
.formula-card--vchange .formula-eq{ color:#9fe9b8; }

/* screen 16 exploration substitution chain — each "= ..." line stacks with a short pause between */
.explore-formula-card{ display:flex; flex-direction:column; align-items:center; gap:10px; }
.explore-eq-label{ display:block; font-size:1.3rem; font-weight:700; color:#9fd2ff; margin-top:4px; }
.explore-formula-card .formula-eq{ font-size:1.5rem; animation: calloutIn .3s ease-out; }
.explore-formula-card .formula-eq--answer{ color:#7CFFB2; font-size:1.9rem; }