/* Math Tower - css/geometry.css: the Geometry Tower screens (v8, js/geoui.js) inside #geo-layer: the lobby chip, the
   door flash, the welcome and concept cards, the Measurement Studio (blueprint canvas, ruler and protractor, tool
   switcher, answer pad) and the Animated Teacher. Uses the tokens and the .btn / .icon-btn components of style.css.
   Look: a frosted-glass blueprint table over the 3D tower, cyan lines, the game's own fonts and buttons. */

.geo-layer {
  --geo-ink: #06121f;
  --geo-navy: #0c2238;
  --geo-blue: #123552;
  --geo-cyan: #4dffea;
  --geo-cyan-d: #1bb8a8;
  --geo-glass: rgba(12, 34, 56, 0.72);
  --geo-glass-2: rgba(255, 255, 255, 0.1);
  --geo-line: rgba(77, 255, 234, 0.35);
  --geo-yellow: #ffd23f;
  --geo-green: #4dff88;
  --geo-red: #ff5a6e;
  position: fixed; inset: 0; z-index: 32; pointer-events: none; font-family: var(--font-body); color: #fff;
}
.geo-layer [hidden] { display: none !important; }

/* In the Geometry Tower the Math-Tower-only parts of the HUD rest (powers, skips). */
#ui-root.in-geo .chip-skip, #ui-root.in-geo .power-dock, #ui-root.in-geo .wand-rescue { display: none !important; }

/* ---------------- the flash (doors, the roof portal) ---------------- */
.geo-flash {
  position: absolute; inset: 0; pointer-events: auto; opacity: 0;
  background: radial-gradient(circle at 50% 55%, #ffffff 0%, #e8fffb 18%, var(--flash, #4dffea) 72%);
  transition: opacity 0.26s ease;
}
.geo-flash.is-in { opacity: 1; }
.geo-flash.is-out { opacity: 0; transition-duration: 0.42s; }

/* ---------------- the lobby chip ---------------- */
.geo-chip {
  position: absolute; left: 50%; top: calc(var(--safe-t) + 12px); transform: translateX(-50%);
  display: inline-flex; align-items: center; gap: 10px; padding: 6px 16px 6px 10px; max-width: calc(100vw - 32px);
  border: 1.5px solid var(--geo-line); border-radius: 999px; background: var(--geo-glass); color: #fff;
  -webkit-backdrop-filter: blur(14px) saturate(1.4); backdrop-filter: blur(14px) saturate(1.4);
  box-shadow: 0 8px 28px rgba(0, 10, 25, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.18);
  white-space: nowrap; animation: geo-pop-in 0.35s cubic-bezier(0.2, 1.35, 0.4, 1);
}
.geo-chip-icon { width: 26px; height: 26px; color: var(--geo-cyan); flex: none; }
.geo-chip-text { display: flex; flex-direction: column; line-height: 1.05; min-width: 0; }
.geo-chip-text b { font-family: var(--font-display); font-weight: 400; font-size: 15px; letter-spacing: 0.06em; color: var(--geo-cyan); }
.geo-chip-text span { font-size: 13px; font-weight: 600; opacity: 0.88; overflow: hidden; text-overflow: ellipsis; }
@media (max-width: 720px) {
  .geo-chip { top: auto; bottom: calc(var(--safe-b) + 150px); }
}

/* ---------------- cards (welcome, concept cards) ---------------- */
.geo-card-layer { position: absolute; inset: 0; display: grid; place-items: center; padding: calc(var(--safe-t) + 16px) 16px calc(var(--safe-b) + 16px); pointer-events: auto; }
.geo-scrim { position: absolute; inset: 0; background: rgba(4, 14, 26, 0.55); animation: fade-in 0.2s ease; }
.geo-card-layer.is-leaving { animation: fade-out 0.2s ease forwards; }
.geo-card {
  position: relative; width: min(460px, 100%); max-height: calc(100dvh - 32px); overflow: auto; padding: 22px 22px 18px;
  border: 1.5px solid var(--geo-line); border-radius: 26px; background: linear-gradient(160deg, rgba(18, 53, 82, 0.92), rgba(6, 18, 31, 0.94));
  -webkit-backdrop-filter: blur(18px); backdrop-filter: blur(18px);
  box-shadow: 0 24px 60px rgba(0, 8, 20, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.16);
  text-align: center; animation: geo-pop-in 0.32s cubic-bezier(0.2, 1.35, 0.4, 1); outline: none;
}
.geo-card h2 { margin: 6px 0 12px; font-family: var(--font-display); font-weight: 400; font-size: 30px; letter-spacing: 0.02em; color: var(--geo-cyan); }
.geo-card-art { display: inline-grid; place-items: center; width: 84px; height: 84px; border-radius: 24px; background: rgba(77, 255, 234, 0.12); border: 1.5px solid var(--geo-line); }
.geo-card-art .icon { width: 54px; height: 54px; color: var(--geo-cyan); }
.geo-list { list-style: none; margin: 0 0 16px; padding: 0; display: grid; gap: 9px; text-align: left; }
.geo-list li { display: flex; align-items: flex-start; gap: 10px; font-size: 16px; line-height: 1.3; }
.geo-list .icon { flex: none; width: 24px; height: 24px; color: var(--geo-cyan); margin-top: 1px; }
.geo-list b { color: #fff; }
.geo-go { width: 100%; justify-content: center; }

@keyframes geo-pop-in { from { transform: translateX(var(--tx, 0)) scale(0.86); opacity: 0; } to { transform: translateX(var(--tx, 0)) scale(1); opacity: 1; } }
.geo-chip { --tx: -50%; }
@media (prefers-reduced-motion: reduce) {
  .geo-chip, .geo-card { animation: none; }
}

/* ================= the Measurement Studio ================= */
.geo-studio-layer { position: absolute; inset: 0; display: grid; place-items: center; padding: calc(var(--safe-t) + 12px) calc(var(--safe-r) + 12px) calc(var(--safe-b) + 12px) calc(var(--safe-l) + 12px); pointer-events: auto; }
.geo-studio-layer.is-leaving { animation: fade-out 0.2s ease forwards; }
.geo-studio {
  position: relative; display: flex; flex-direction: column; width: min(1120px, 100%); height: min(720px, 100%); outline: none;
  border: 1.5px solid var(--geo-line); border-radius: 28px; overflow: hidden;
  background: linear-gradient(165deg, rgba(20, 58, 90, 0.86), rgba(6, 18, 31, 0.92));
  -webkit-backdrop-filter: blur(20px) saturate(1.3); backdrop-filter: blur(20px) saturate(1.3);
  box-shadow: 0 28px 70px rgba(0, 8, 20, 0.55), inset 0 1px 0 rgba(255, 255, 255, 0.16);
  animation: geo-rise 0.32s cubic-bezier(0.2, 1.2, 0.4, 1);
}
@keyframes geo-rise { from { transform: translateY(18px) scale(0.98); opacity: 0; } to { transform: none; opacity: 1; } }
.geo-studio.is-right { box-shadow: 0 0 0 3px var(--geo-green), 0 28px 70px rgba(0, 8, 20, 0.55); }
.geo-studio.is-wrong { box-shadow: 0 0 0 3px var(--geo-red), 0 28px 70px rgba(0, 8, 20, 0.55); }

.gs-head { flex: none; display: flex; align-items: center; gap: 10px; padding: 12px 14px 10px 18px; border-bottom: 1px solid rgba(77, 255, 234, 0.16); }
.gs-class { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-family: var(--font-display); font-size: 18px; letter-spacing: 0.02em; color: var(--geo-cyan); }
.gs-mode, .gs-streak {
  flex: none; display: inline-flex; align-items: center; gap: 6px; padding: 4px 11px 3px 8px; border-radius: 999px;
  font-family: var(--font-display); font-size: 13px; letter-spacing: 0.06em; white-space: nowrap;
}
.gs-mode { background: rgba(77, 255, 234, 0.14); color: var(--geo-cyan); border: 1px solid var(--geo-line); }
.is-gate .gs-mode { background: rgba(255, 210, 63, 0.16); color: var(--geo-yellow); border-color: rgba(255, 210, 63, 0.45); }
.gs-mode .icon, .gs-streak .icon { width: 16px; height: 16px; }
.gs-streak { background: rgba(255, 210, 63, 0.18); color: var(--geo-yellow); }
.gs-close {
  flex: none; display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; border: 1px solid rgba(255, 255, 255, 0.18);
  background: rgba(255, 255, 255, 0.08); color: #fff; cursor: pointer; transition: background 0.15s ease;
}
.gs-close:hover { background: rgba(255, 255, 255, 0.16); }
.gs-close .icon { width: 20px; height: 20px; }

.gs-body { flex: 1; min-height: 0; display: grid; grid-template-columns: minmax(0, 1fr) 320px; }
.gs-board { position: relative; min-height: 0; padding: 12px; }
.gs-canvas { display: block; width: 100%; height: 100%; touch-action: none; cursor: default; }
.gs-canvas.is-grabbing { cursor: grabbing !important; }

.gs-side { min-height: 0; overflow: auto; display: flex; flex-direction: column; gap: 12px; padding: 14px 16px 16px; border-left: 1px solid rgba(77, 255, 234, 0.14); }
.gs-q { margin: 0; font-size: 18px; line-height: 1.32; font-weight: 700; color: #fff; }

.gs-tools { display: flex; align-items: center; gap: 10px; }
.gs-switch { flex: 1; display: flex; padding: 3px; gap: 3px; border-radius: 16px; background: rgba(0, 0, 0, 0.25); border: 1px solid rgba(255, 255, 255, 0.1); }
.gs-tool {
  flex: 1; min-width: 0; display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-height: 42px; padding: 0 8px;
  border: 0; border-radius: 13px; background: transparent; color: rgba(255, 255, 255, 0.75); font-family: var(--font-body); font-weight: 700; font-size: 15px; cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease;
}
.gs-tool .icon { width: 22px; height: 22px; flex: none; }
.gs-tool small { font-size: 11px; opacity: 0.8; }
.gs-tool.is-on { background: rgba(77, 255, 234, 0.2); color: #fff; box-shadow: inset 0 0 0 1px var(--geo-line); }
.gs-tool.is-locked { color: rgba(255, 255, 255, 0.42); }
/* the two rotate buttons: one pill split in half */
.gs-rot { flex: none; display: flex; border-radius: 999px; overflow: hidden; border: 1px solid rgba(255, 255, 255, 0.18); background: rgba(255, 255, 255, 0.08); }
.gs-rot-btn { display: grid; place-items: center; width: 46px; height: 46px; border: 0; background: transparent; color: #fff; cursor: pointer; touch-action: none; transition: background 0.12s ease; }
.gs-rot-btn + .gs-rot-btn { border-left: 1px solid rgba(255, 255, 255, 0.16); }
.gs-rot-btn:hover { background: rgba(77, 255, 234, 0.16); }
.gs-rot-btn:active { background: rgba(77, 255, 234, 0.3); }
.gs-rot-btn .icon { width: 22px; height: 22px; }

.gs-answer { display: grid; gap: 10px; }
.gs-display {
  display: flex; align-items: baseline; justify-content: center; gap: 2px; min-height: 58px; padding: 6px 12px; border-radius: 16px;
  background: rgba(0, 0, 0, 0.32); border: 1.5px solid var(--geo-line); font-family: var(--font-display); font-size: 34px; color: #fff;
}
.gs-typed.is-empty::before { content: '?'; color: rgba(255, 255, 255, 0.3); }
.gs-unit { font-size: 22px; color: var(--geo-cyan); }
.gs-display.shake { animation: geo-shake 0.36s ease; }
@keyframes geo-shake { 20% { transform: translateX(-6px); } 40% { transform: translateX(6px); } 60% { transform: translateX(-4px); } 80% { transform: translateX(3px); } }
.gs-keys { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.gs-key {
  min-height: 48px; border-radius: 14px; border: 1px solid rgba(255, 255, 255, 0.14); background: rgba(255, 255, 255, 0.1); color: #fff;
  font-family: var(--font-display); font-size: 24px; cursor: pointer; transition: background 0.12s ease, transform 0.08s ease;
}
.gs-key:hover { background: rgba(255, 255, 255, 0.18); }
.gs-key:active { transform: scale(0.96); background: rgba(77, 255, 234, 0.26); }
.gs-key-back { display: grid; place-items: center; }
.gs-key-back .icon { width: 24px; height: 24px; }
.gs-choices { display: grid; gap: 8px; }
.gs-choice {
  display: flex; align-items: center; gap: 10px; min-height: 52px; padding: 0 14px; border-radius: 16px; border: 1.5px solid rgba(255, 255, 255, 0.16);
  background: rgba(255, 255, 255, 0.09); color: #fff; font-family: var(--font-display); font-size: 21px; text-align: left; cursor: pointer;
  transition: background 0.12s ease, border-color 0.12s ease;
}
.gs-choice:hover { background: rgba(77, 255, 234, 0.16); border-color: var(--geo-line); }
.gs-choice kbd { display: inline-grid; place-items: center; width: 26px; height: 26px; border-radius: 8px; background: rgba(0, 0, 0, 0.35); font: 700 14px var(--font-body); color: var(--geo-cyan); }
.gs-choice.is-right { background: rgba(77, 255, 136, 0.28); border-color: var(--geo-green); }
.gs-choice.is-wrong { background: rgba(255, 90, 110, 0.26); border-color: var(--geo-red); }

.gs-actions { display: flex; gap: 10px; align-items: stretch; margin-top: auto; }
.gs-actions .gs-ok { flex: 1; justify-content: center; }
.gs-show { flex: none; color: var(--ink); }
.gs-feedback { margin: 0; min-height: 22px; font-weight: 700; font-size: 16px; line-height: 1.3; }
.gs-feedback.is-good { color: var(--geo-green); }
.gs-feedback.is-bad { color: #ffb3bd; }
.gs-feedback.is-info { color: var(--geo-cyan); }
.is-teaching .gs-side { opacity: 0.55; pointer-events: none; }

/* little badges on the blueprint */
.gs-levelup, .gs-lock {
  position: absolute; left: 50%; transform: translateX(-50%); display: inline-flex; align-items: center; gap: 8px; padding: 7px 16px 6px 12px;
  border-radius: 999px; font-family: var(--font-display); font-size: 17px; letter-spacing: 0.03em; white-space: nowrap; pointer-events: none;
}
.gs-levelup { top: 20px; background: linear-gradient(90deg, #ffd23f, #ff9f1c); color: var(--ink); box-shadow: 0 8px 24px rgba(255, 159, 28, 0.35); }
.gs-lock { bottom: 20px; background: rgba(77, 255, 136, 0.92); color: #06301a; }
.gs-levelup .icon, .gs-lock .icon { width: 20px; height: 20px; }
.gs-levelup.pop, .gs-lock.pop, .gs-concept.pop, .gs-teacher.pop { animation: gs-pop 0.36s cubic-bezier(0.2, 1.4, 0.4, 1); }
@keyframes gs-pop { from { transform: translateX(-50%) scale(0.7); } to { transform: translateX(-50%) scale(1); } }

/* the first-time concept card */
.gs-concept {
  position: absolute; left: 50%; top: 20px; transform: translateX(-50%); width: min(460px, calc(100% - 40px)); display: flex; gap: 12px; align-items: center;
  padding: 12px 40px 12px 12px; border-radius: 22px; border: 1.5px solid var(--geo-line); background: rgba(6, 18, 31, 0.9);
  -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); box-shadow: 0 14px 40px rgba(0, 8, 20, 0.5); cursor: pointer;
}
.gs-concept-art { flex: none; width: 108px; height: 82px; border-radius: 14px; background: #123552; display: grid; place-items: center; }
.gs-art { width: 100%; height: 100%; }
.gs-concept-text b { display: flex; align-items: center; gap: 6px; font-family: var(--font-display); font-weight: 400; font-size: 18px; color: var(--geo-cyan); }
.gs-concept-text b .icon { width: 20px; height: 20px; }
.gs-concept-text p { margin: 4px 0 0; font-size: 15px; line-height: 1.3; }
.gs-concept-x { position: absolute; top: 8px; right: 8px; width: 28px; height: 28px; display: grid; place-items: center; border: 0; border-radius: 50%; background: rgba(255, 255, 255, 0.1); color: #fff; cursor: pointer; }
.gs-concept-x .icon { width: 16px; height: 16px; }
.ca-ruler { animation: ca-slide 2.4s ease-in-out infinite; }
.ca-turn { transform-origin: 14px 46px; animation: ca-turn 2.6s ease-in-out infinite; }
.ca-needle { transform-origin: 60px 74px; animation: ca-needle 2.6s ease-in-out infinite; }
.ca-diam { transform-origin: 60px 48px; animation: ca-spin 4s linear infinite; }
@keyframes ca-slide { 0%, 15% { transform: translate(30px, 16px); } 55%, 100% { transform: translate(0, 0); } }
@keyframes ca-turn { 0%, 15% { transform: rotate(0deg); } 55%, 100% { transform: rotate(-25deg); } }
@keyframes ca-needle { 0%, 10% { transform: rotate(-40deg); } 60%, 100% { transform: rotate(0deg); } }
@keyframes ca-spin { to { transform: rotate(360deg); } }

/* the Animated Teacher: an owl with a speech bubble */
.gs-teacher { position: absolute; left: 22px; bottom: 18px; display: flex; align-items: flex-end; gap: 6px; max-width: calc(100% - 44px); transform: none; }
.gs-teacher.pop { animation: gs-teacher-in 0.36s cubic-bezier(0.2, 1.4, 0.4, 1); }
@keyframes gs-teacher-in { from { transform: translateY(16px) scale(0.94); } to { transform: none; } }
.gs-owl { flex: none; width: 88px; height: 96px; animation: gs-bob 1.8s ease-in-out infinite; filter: drop-shadow(0 6px 10px rgba(0, 0, 0, 0.35)); }
.gs-owl-svg { width: 100%; height: 100%; }
@keyframes gs-bob { 50% { transform: translateY(-5px) rotate(-2deg); } }
.gs-bubble {
  position: relative; margin-bottom: 40px; padding: 12px 14px; border-radius: 18px 18px 18px 6px; background: #ffffff; color: var(--ink);
  box-shadow: 0 10px 28px rgba(0, 8, 20, 0.4); display: flex; flex-direction: column; gap: 8px; align-items: flex-start; max-width: 420px;
}
.gs-say { margin: 0; font-size: 17px; line-height: 1.32; font-weight: 700; }
.gs-gotit { align-self: flex-end; }

/* phones and narrow screens: the blueprint on top, the answer under it */
@media (max-width: 820px), (orientation: portrait) and (max-width: 1000px) {
  .geo-studio { height: 100%; border-radius: 22px; }
  .gs-body { display: flex; flex-direction: column; overflow: auto; }
  .gs-board { flex: none; height: min(56vw, 46dvh); padding: 8px; }
  .gs-side { border-left: 0; border-top: 1px solid rgba(77, 255, 234, 0.14); overflow: visible; padding: 12px 14px 14px; gap: 10px; }
  .gs-q { font-size: 16px; }
  .gs-key { min-height: 44px; font-size: 22px; }
  .gs-display { min-height: 50px; font-size: 30px; }
  .gs-owl { width: 64px; height: 70px; }
  .gs-bubble { margin-bottom: 24px; }
  /* the teacher stands just under the blueprint (over the dimmed answer pad), so the demo stays visible */
  .gs-teacher { top: calc(100% + 6px); bottom: auto; left: 10px; right: 10px; max-width: none; z-index: 3; }
  .gs-say { font-size: 15px; }
  .gs-concept-art { width: 84px; height: 64px; }
  .gs-class { font-size: 15px; }
}
@media (max-height: 520px) and (orientation: landscape) {
  .gs-side { gap: 8px; padding: 10px 12px; }
  .gs-key { min-height: 36px; font-size: 19px; }
  .gs-display { min-height: 42px; font-size: 26px; }
  .gs-q { font-size: 15px; }
}
@media (prefers-reduced-motion: reduce) {
  .geo-studio, .gs-owl, .ca-ruler, .ca-turn, .ca-needle, .ca-diam { animation: none; }
}