: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;
  --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; }
.screen-footer{
  flex:0 0 10%; display:flex; align-items:center; justify-content:center; gap:24px;
  background: linear-gradient(0deg, rgba(20,52,92,.6), rgba(20,52,92,0));
  padding:0 40px;
}
.screen-instruction{ font-size:1.4rem; font-weight:600; color:#cfe6ff; text-align:center; }

/* Fixed 75 / 25 split: the grid lives in a stable 75% column so it never shifts
   horizontally when the MCQ panel appears/disappears in the right 25%. */
.grid-col{ flex:0 0 75%; max-width:75%; position:relative; display:flex; align-items:center; justify-content:center; min-width:0; }
.mcq-col{ flex:0 0 25%; max-width:25%; display:flex; align-items:center; justify-content:center; padding-left:20px; }

/* --------------------------- 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-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; }
.cp-axis-label--y{ 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; }
/* tapped axis endpoint: small dot in the axis colour, marking the point on the line */
.cp-axis-dot{ fill: var(--axis); stroke:#fff; stroke-width:1.5; }
/* tap-expected dot: opacity pulse + yellow radiating glow */
.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-point-label--reveal{ animation: numPop .35s ease-out; }

/* tap cue (fingerTap.gif) anchored in SVG space next to an untapped hotspot */
.cp-hand-cue{ pointer-events:none; filter: drop-shadow(0 4px 6px rgba(0,0,0,.5)); animation: handCueBob 1s ease-in-out infinite; transform-box:fill-box; transform-origin:center; }
@keyframes handCueBob{ 0%,100%{ transform:translateY(0); } 50%{ transform:translateY(-6px); } }

/* --------------------------- room shapes --------------------------- */
.room-bed{ fill:#d7e8f2; stroke:#1a3a5c; stroke-width:2; }
.room-bed-headboard{ fill:#bcd2e0; stroke:#1a3a5c; stroke-width:2; }
.room-wardrobe{ fill:#b9824f; stroke:#5c3a1e; stroke-width:2; }
.room-wardrobe-trim{ stroke:#5c3a1e; stroke-width:1.5; opacity:.7; }
.room-knob{ fill:#3a2410; }
.room-pillow{ fill:#f4f8fc; stroke:#9bb3c6; stroke-width:1.5; }
.room-shape-label{ fill:#1a2c40; font-family:var(--font); font-size:18px; font-weight:700; text-anchor:middle; }
.room-decor{ fill:#7cb96f; stroke:#3f6e35; stroke-width:2; opacity:.85; }

/* furniture corner vertices: small dots + small labels, distinct from named points */
.room-corner-dot{ fill:#e23b2e; stroke:#fff; stroke-width:1.5; }
.room-corner-label{ fill:#cfe0f0; font-family:var(--font); font-size:14px; font-weight:700; }

/* door swing: dashed red dome arc + dashed red straight leaf + arrowhead */
.room-door{ stroke:#e23b2e; stroke-width:3; stroke-dasharray:8 6; fill:none; }
.room-door-leaf{ stroke:#e23b2e; stroke-width:2.5; stroke-dasharray:7 6; fill:none; }
.room-door-arrow{ fill:#e23b2e; stroke:none; }
.room-door--pulse{ animation: doorPulse 1.3s ease-in-out infinite; }
.room-door-label{ fill:#9a5a52; font-family:var(--font); font-size:19px; font-weight:700; text-anchor:middle; }

.room-axis-highlight{ stroke:#4db8ff; stroke-width:7; stroke-linecap:round; animation: distPulse 1s ease-in-out infinite; filter:drop-shadow(0 0 5px rgba(77,184,255,.6)); }

.room-measure{ stroke:var(--green-light); stroke-width:7; stroke-linecap:round; }
.room-measure--v{ stroke:var(--green-light); }
.room-measure--pulse{ animation: distPulse 1.1s ease-in-out infinite; filter:drop-shadow(0 0 5px rgba(88,217,139,.6)); }
.room-measure-label{ fill:#bdffd6; font-family:var(--font); font-size:18px; font-weight:700; text-anchor:middle; }
.room-measure-label--v{ text-anchor:start; }

/* --------------------------- MCQ panel ---------------------------- */
.mcq-panel{ display:flex; flex-direction:column; align-items:center; gap:18px; width:100%; }
.mcq-question{
  background: rgba(52,152,219,.25); border:2px solid rgba(82,178,235,.5); border-radius:16px;
  padding:18px 22px; font-size:1.55rem; font-weight:700; color:#dff1ff; text-align:center;
}
.mcq-options{ display:flex; flex-direction:column; align-items:center; gap:14px; width:100%; }
.mcq-chip{
  font-family:var(--font); font-size:1.5rem; font-weight:700; color:#06203a;
  padding:14px 16px; min-width:200px; border:none; border-radius:14px; cursor:pointer;
  background: linear-gradient(180deg, #ffb14a, #ff8a1a); 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; }
.mcq-chip--dim{ opacity:.5; cursor:default; }
.mcq-feedback{
  border-radius:16px; padding:18px 20px; font-size:1.4rem; font-weight:600; line-height:1.45;
  animation: calloutIn .3s ease-out;
}
.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; }

/* --------------------------- 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);
  animation: pulseGlow 1.8s ease-in-out infinite;
}
.next-btn:hover, .explore-again:hover{ filter:brightness(1.08); }

/* --------------------------- keyframes --------------------------- */
@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 doorPulse{ 0%,100%{ opacity:1; } 50%{ opacity:.4; } }
@keyframes numPop{ 0%{ opacity:.2; } 60%{ opacity:1; } 100%{ opacity:1; } }
@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; } }

/* --------------------------- 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(226,236,248,.96); color:#10314f; border-radius:16px;
  font-size:1.1rem; font-weight:600; line-height:1.35; text-align:center;
  box-shadow:0 8px 26px rgba(0,0,0,.35); border:2px solid rgba(140,180,225,.6);
  animation: calloutIn .35s ease-out;
}
.callout--top-right{ top:14%; right:0; }
.callout--bottom-right{ bottom:14%; right:0; }
.callout--top-left{ top:14%; left:0; }
.callout--bottom-left{ bottom:14%; left:0; }

/* --------------------------- 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); } }

/* =================================================================
   applet4-specific: 4-quadrant Cartesian plane
   ================================================================= */

/* --------------------------- axis arrows --------------------------- */
.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; }

/* --------------------------- quadrant shading/regions --------------------------- */
.cp-quadrant-region{ fill: transparent; stroke: none; transition: fill .2s; }
.cp-quadrant-region--shaded{ fill: rgba(88,217,139,.22); }
.cp-quadrant-region--pulse{ animation: quadrantPulse 1.2s ease-in-out infinite; cursor:pointer; }
.cp-quadrant-region--teeter{ fill: rgba(231,76,60,.28); }
@keyframes quadrantPulse{ 0%,100%{ fill: rgba(88,217,139,.30); } 50%{ fill: rgba(88,217,139,.10); } }

/* numbered badge (white circle, screens 3-6) */
.cp-qbadge-circle{ fill:#ffffff; stroke:#1a3a5c; stroke-width:2; filter: drop-shadow(0 2px 4px rgba(0,0,0,.35)); }
.cp-qbadge-num{ fill:#10314f; font-family:var(--font); font-size:24px; font-weight:800; text-anchor:middle; }

/* quadrant tag, outside the grid — shared across screens 8-19; default is plain white/gray */
.cp-qtag-bg{ fill:#e7edf4; stroke:#9fb3c8; stroke-width:1.5; }
.cp-qtag-text{ fill:#10314f; font-family:var(--font); font-size:15px; font-weight:700; text-anchor:middle; }
.cp-qtag--tappable{ animation: qtagPulse 1.2s ease-in-out infinite; cursor:pointer; }
.cp-qtag--tappable .cp-qtag-bg{ fill:#ffb14a; stroke:#fff; }
.cp-qtag--active .cp-qtag-bg{ fill:#7ec97f; stroke:#fff; filter: drop-shadow(0 0 8px rgba(126,201,127,.9)); }
.cp-qtag--teeter .cp-qtag-bg{ fill:#e74c3c; stroke:#fff; }
@keyframes qtagPulse{ 0%,100%{ opacity:1; } 50%{ opacity:.6; } }

/* anti-clockwise numbering arrows (screen 7) */
.cp-num-arrow{ stroke: var(--green-light); stroke-width:4; stroke-linecap:round; }
.cp-num-arrow-head{ fill: var(--green-light); }

/* sign-convention in-quadrant point labels P(x,y)/Q(-x,y)/R(-x,-y)/S(x,-y) */
.cp-sign-label{ fill:#ffd24a; font-family:var(--font); font-size:22px; font-weight:800; text-anchor:middle; }
.cp-sign-label--pulse{ animation: pointPulse 1.2s ease-in-out infinite; }
.cp-sign-label--teeter{ fill:#ff6b5e; }

/* --------------------------- draggable pointers --------------------------- */
.cp-drag-pointer{ stroke-width:3; cursor:grab; }
.cp-drag-pointer--green{ fill:var(--green-light); stroke:#1f8b53; filter: drop-shadow(0 0 6px rgba(88,217,139,.7)); }
.cp-drag-pointer--pink{ fill:var(--pink); stroke:#9c2362; filter: drop-shadow(0 0 6px rgba(232,76,154,.7)); }
.cp-drag-pointer--locked{ cursor:default; opacity:.95; }
.cp-drag-pointer--teeter{ animation: teeter .45s ease-in-out; }
/* pulse via radius + glow (NOT transform:scale — fill-box scaling collapses SVG circles to 0px) */
.cp-drag-pointer--pulse{ animation: dragPulseR 1.1s ease-in-out infinite, dragPulseGlow 1.1s ease-in-out infinite; }
@keyframes dragPulseR{ 0%,100%{ r:16px; } 50%{ r:21px; } }
@keyframes dragPulseGlow{
  0%,100%{ filter: drop-shadow(0 0 4px rgba(255,255,255,.5)); }
  50%{ filter: drop-shadow(0 0 12px rgba(255,255,255,.95)); }
}
@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); }
}

/* guide lines + "N units" labels, drag screens */
.cp-guide{ stroke: var(--green-light); stroke-width:6; stroke-linecap:round; filter: drop-shadow(0 0 4px rgba(88,217,139,.6)); }
.cp-guide-label{ fill:#d7ffe6; font-family:var(--font); font-size:17px; font-weight:700; text-anchor:middle; }
.cp-guide-label--v{ text-anchor:start; }

/* plotted point — reuses .cp-point/.cp-point--pulse base styles already defined above */
.cp-plot-point{ fill:var(--callout); stroke:#1a5a8a; }

/* --------------------------- independent practice list --------------------------- */
.practice-list{ display:flex; flex-direction:column; gap:14px; width:100%; align-items:stretch; }
.practice-chip{
  font-family:var(--font); font-size:1.3rem; font-weight:700; color:#06203a;
  padding:14px 16px; border:none; border-radius:12px; cursor:pointer;
  background: rgba(226,236,248,.92); box-shadow:0 4px 0 rgba(0,0,0,.25);
  transition: transform .12s, filter .12s;
}
.practice-chip:hover{ transform:translateY(-2px); filter:brightness(1.05); }
.practice-chip--selected{ background: linear-gradient(180deg, var(--green-light), var(--green)); color:#06280f; }
.practice-chip:disabled{ cursor:default; }

/* --------------------------- idle/closing screen (S30) --------------------------- */
.idle-screen{ width:100%; height:100%; display:flex; align-items:center; justify-content:center; }
.idle-text-card{
  font-family:var(--font); font-size:2.2rem; font-weight:700; color:var(--pink);
  text-align:center; max-width:1200px; padding:0 40px;
}