: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-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; }
/* resolved points (e.g. D1/R1 once the door width is established) turn blue */
.cp-point--blue{ fill:#1f6fd6; stroke:#0d3a73; }
/* 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; }
.cp-point-label--pulse-coord{ fill:#ffd84d; animation: coordPulse 1s ease-in-out infinite; transform-box:fill-box; transform-origin:center; }
.cp-point-label--pulse-coord-b{ fill:#5ad1ff; }

/* --------------------------- 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; }
/* once attention moves to the bathroom door, fade the room door to gray so it doesn't compete */
.room-door--faded{ stroke:#7b8a99; opacity:.55; }
.room-door-leaf--faded{ stroke:#7b8a99; opacity:.55; }
.room-door-arrow--faded{ fill:#7b8a99; opacity:.55; }
.room-door-label--faded{ fill:#7b8a99; opacity:.7; }
.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; }
/* once attention has moved past this measurement, mute it to gray instead of active green */
.room-measure--faded{ stroke:#7b8a99; opacity:.55; }
.room-measure-label--faded{ fill:#9aa7b3; }

/* --------------------------- 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-chip--pulse{ animation: pulseGlow 1.8s ease-in-out infinite; }
.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 coordPulse{ 0%,100%{ opacity:1; transform:scale(1); } 50%{ opacity:.55; transform:scale(1.35); } }
@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); } }

/* --------------------------- callouts (shared) --------------------------- */
.callout-layer{ position:absolute; inset:0; pointer-events:none; }
.callout{
  position:absolute; max-width:430px; padding:18px 24px; pointer-events:none;
  background: rgba(226,236,248,.96); color:#10314f; border-radius:16px;
  font-size:1.45rem; font-weight:600; line-height:1.45; 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:14px; right:18px; }
.callout--bottom-right{ bottom:18px; right:18px; }
.callout--top-left{ top:14px; left:18px; }
.callout--bottom-left{ bottom:18px; left:18px; }

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