/* ═══ GLASS 2.0 — neon-city glassmorphism layer (overrides base theme) ═══ */
    :root {
      --glass-bg: linear-gradient(150deg, rgba(96, 180, 255, .14), rgba(8, 24, 52, .52));
      --glass-bg-strong: linear-gradient(150deg, rgba(96, 180, 255, .20), rgba(6, 18, 42, .70));
      --glass-edge: rgba(150, 210, 255, .32);
      --glass-edge-hot: rgba(56, 225, 240, .65);
      --glass-blur: blur(18px) saturate(140%);
      --neon-cyan: #38E1F0;
      --neon-blue: #38BDF8;
      --neon-pink: #FB5A86;
    }

    #bg3d {
      position: fixed;
      inset: 0;
      z-index: 0;
      pointer-events: none;
    }

    .screen { position: relative; z-index: 1; }

    /* Auth family screens go translucent so the 3D scene glows through */
    #auth-screen, #signin-screen, #signup-screen, #teacher-screen,
    #join-screen, #pick-screen, #pic-screen, #prek-pet-screen {
      background: linear-gradient(165deg, rgba(10, 30, 62, .42), rgba(3, 10, 26, .68)) !important;
    }

    .auth-card, .auth-form-card, .diff-card {
      background: var(--glass-bg) !important;
      backdrop-filter: var(--glass-blur);
      -webkit-backdrop-filter: var(--glass-blur);
      border: 1px solid var(--glass-edge) !important;
      box-shadow: 0 24px 60px rgba(0, 8, 24, .55), inset 0 1px 0 rgba(255, 255, 255, .18), 0 0 42px rgba(56, 189, 248, .10);
      transform-style: preserve-3d;
    }

    .auth-card:hover, .auth-form-card:hover { border-color: var(--glass-edge-hot) !important; }

    .auth-input {
      background: rgba(8, 24, 52, .45) !important;
      backdrop-filter: blur(8px);
      border: 1px solid var(--glass-edge) !important;
    }

    .auth-input:focus {
      border-color: var(--neon-cyan) !important;
      box-shadow: 0 0 0 3px rgba(56, 225, 240, .18), 0 0 18px rgba(56, 225, 240, .25) !important;
    }

    .auth-submit-btn, .ws-confirm-btn {
      box-shadow: 0 10px 28px rgba(2, 132, 199, .45), 0 0 24px rgba(56, 189, 248, .35), inset 0 1px 0 rgba(255, 255, 255, .35);
    }

    /* HUD chips → floating glass pills */
    .coinbox, .savebox, .petbadge, .evobadge, #inside-bar {
      background: var(--glass-bg-strong) !important;
      backdrop-filter: var(--glass-blur);
      -webkit-backdrop-filter: var(--glass-blur);
      border: 1px solid var(--glass-edge) !important;
      box-shadow: 0 8px 24px rgba(0, 8, 24, .40), inset 0 1px 0 rgba(255, 255, 255, .14);
    }

    /* Dynamic island / top nav */
    .top-nav-bar, #dynamic-island {
      background: var(--glass-bg-strong) !important;
      backdrop-filter: var(--glass-blur);
      -webkit-backdrop-filter: var(--glass-blur);
      border: 1px solid var(--glass-edge) !important;
    }

    .top-nav-btn.active {
      box-shadow: 0 0 16px rgba(56, 225, 240, .40), inset 0 1px 0 rgba(255, 255, 255, .25);
    }

    /* Sheets, overlays, panels */
    .sheet, .city-map-card, .work-wrap, .reports-wrap {
      background: var(--glass-bg-strong) !important;
      backdrop-filter: var(--glass-blur);
      -webkit-backdrop-filter: var(--glass-blur);
      border: 1px solid var(--glass-edge) !important;
      box-shadow: 0 30px 80px rgba(0, 8, 24, .60), inset 0 1px 0 rgba(255, 255, 255, .16);
    }

    .tx-row {
      background: rgba(30, 70, 130, .28) !important;
      backdrop-filter: blur(10px);
      border: 1px solid rgba(150, 210, 255, .14) !important;
      transition: transform var(--dur-fast) var(--ease-out), border-color var(--dur-fast), box-shadow var(--dur-fast);
    }

    .tx-row:hover {
      transform: translateY(-2px) scale(1.01);
      border-color: var(--glass-edge-hot) !important;
      box-shadow: 0 10px 26px rgba(0, 8, 24, .45), 0 0 18px rgba(56, 225, 240, .18);
    }

    /* 3D tilt on primary cards */
    .species-card {
      transition: transform var(--dur) var(--ease-spring), box-shadow var(--dur), border-color var(--dur);
    }

    .species-card:hover {
      transform: perspective(700px) rotateX(4deg) translateY(-3px);
      box-shadow: 0 16px 38px rgba(0, 8, 24, .5), 0 0 22px rgba(56, 189, 248, .22);
    }

    /* ── Role picker (signup) ── */
    .role-seg { display: flex; gap: 8px; margin-bottom: 14px; }

    .role-seg button {
      flex: 1;
      padding: 12px 6px;
      border-radius: 14px;
      border: 1px solid var(--glass-edge);
      background: rgba(8, 24, 52, .40);
      color: var(--ink-muted);
      font-family: var(--display);
      font-weight: 700;
      font-size: 13px;
      cursor: pointer;
      backdrop-filter: blur(8px);
      transition: all var(--dur-fast) var(--ease-out);
    }

    .role-seg button .rs-ico { display: block; font-size: 20px; margin-bottom: 2px; }

    .role-seg button.sel {
      background: linear-gradient(150deg, rgba(56, 189, 248, .30), rgba(2, 132, 199, .25));
      color: var(--ink);
      border-color: var(--neon-cyan);
      box-shadow: 0 0 18px rgba(56, 225, 240, .30), inset 0 1px 0 rgba(255, 255, 255, .2);
    }

    /* ── Pet reaction bubble ── */
    #pet-react {
      position: fixed;
      left: 50%;
      bottom: 34%;
      transform: translateX(-50%) scale(0);
      z-index: 400;
      background: var(--glass-bg-strong);
      backdrop-filter: var(--glass-blur);
      border: 1px solid var(--glass-edge-hot);
      border-radius: 22px;
      padding: 10px 20px;
      display: flex;
      align-items: center;
      gap: 10px;
      font-family: var(--display);
      font-weight: 800;
      font-size: 16px;
      color: var(--ink);
      box-shadow: 0 14px 40px rgba(0, 8, 24, .5), 0 0 26px rgba(56, 225, 240, .30);
      pointer-events: none;
      opacity: 0;
    }

    #pet-react.show {
      animation: petReactPop 2.4s var(--ease-spring) forwards;
    }

    #pet-react .pr-emoji { font-size: 26px; }

    @keyframes petReactPop {
      0% { transform: translateX(-50%) scale(0) translateY(10px); opacity: 0; }
      12% { transform: translateX(-50%) scale(1.12) translateY(0); opacity: 1; }
      20% { transform: translateX(-50%) scale(1); opacity: 1; }
      80% { transform: translateX(-50%) scale(1) translateY(-6px); opacity: 1; }
      100% { transform: translateX(-50%) scale(.9) translateY(-22px); opacity: 0; }
    }

    /* ═══ TEACHER DASHBOARD — Apple/Tesla-inspired: light, minimal, precise ═══ */
    #teacher-screen {
      display: none; overflow-y: auto; padding: 0 0 90px;
      background: #f5f5f7;
      /* remap the game's dark-theme vars so every inline style inherits the light palette */
      --ink: #1d1d1f; --ink-muted: #6e6e73;
      --green: #34c759; --gold: #ff9500; --red: #ff3b30; --cyan: #0071e3;
      --glass-edge: rgba(0, 0, 0, .08); --glass-edge-hot: rgba(0, 0, 0, .16);
      font-family: -apple-system, BlinkMacSystemFont, 'SF Pro Display', 'Segoe UI', 'Inter', var(--body), sans-serif;
      color: #1d1d1f;
      -webkit-font-smoothing: antialiased;
    }
    #teacher-screen.active { display: block; }
    #teacher-screen::before { content: ''; position: fixed; inset: 0; background: #f5f5f7; z-index: -1; }

    .td-wrap { max-width: 860px; margin: 0 auto; padding: 0 22px; }

    /* Hero — big, quiet, Tesla-spec numbers */
    .td-hero { text-align: center; padding: 64px 10px 30px; }
    .td-hero-kicker { font-size: 12px; font-weight: 600; letter-spacing: 3px; color: #6e6e73; text-transform: uppercase; margin-bottom: 10px; }
    .td-hero-name { font-size: clamp(34px, 6vw, 56px); font-weight: 700; letter-spacing: -0.025em; color: #1d1d1f; margin: 0 0 6px; line-height: 1.05; }
    .td-hero-sub { font-size: 16px; color: #6e6e73; font-weight: 400; }
    .td-stats { display: flex; justify-content: center; gap: clamp(28px, 7vw, 72px); padding: 34px 0 8px; flex-wrap: wrap; }
    .td-stat { text-align: center; min-width: 90px; }
    .td-stat-num { font-size: clamp(30px, 4.6vw, 44px); font-weight: 300; letter-spacing: -0.02em; color: #1d1d1f; line-height: 1.1; font-variant-numeric: tabular-nums; }
    .td-stat-label { font-size: 11px; font-weight: 600; letter-spacing: 1.6px; text-transform: uppercase; color: #6e6e73; margin-top: 6px; }
    .td-code {
      display: inline-flex; align-items: center; gap: 10px; margin-top: 26px;
      font-size: 20px; font-weight: 600; letter-spacing: 6px; color: #1d1d1f;
      background: #fff; border: 1px solid rgba(0, 0, 0, .1); border-radius: 999px;
      padding: 10px 26px 10px 32px; cursor: pointer; transition: all .25s ease;
      box-shadow: 0 1px 2px rgba(0, 0, 0, .04);
    }
    .td-code:hover { box-shadow: 0 4px 16px rgba(0, 0, 0, .1); transform: translateY(-1px); }
    .td-code small { font-size: 10px; letter-spacing: 1.4px; color: #6e6e73; font-weight: 600; }
    .td-signout-link { position: absolute; top: 18px; right: 24px; background: none; border: none; color: #0071e3; font-size: 14px; font-weight: 500; cursor: pointer; font-family: inherit; padding: 8px; }
    .td-signout-link:hover { text-decoration: underline; }

    /* Segmented nav — frosted, sticky */
    .td-tabs {
      position: sticky; top: 0; z-index: 30;
      display: flex; gap: 2px; justify-content: center; flex-wrap: wrap;
      background: rgba(245, 245, 247, .78);
      backdrop-filter: saturate(180%) blur(20px);
      -webkit-backdrop-filter: saturate(180%) blur(20px);
      padding: 12px 8px; margin: 8px -22px 26px;
      border-bottom: 1px solid rgba(0, 0, 0, .07);
    }
    .td-tab {
      padding: 8px 18px; border-radius: 999px; border: none;
      background: transparent; color: #1d1d1f;
      font-family: inherit; font-weight: 500; font-size: 14px; letter-spacing: -0.01em;
      cursor: pointer; transition: all .2s ease;
    }
    .td-tab:hover { background: rgba(0, 0, 0, .05); }
    .td-tab.sel { background: #1d1d1f; color: #fff; }

    /* Cards */
    .td-panel {
      background: #fff; border: none; border-radius: 20px; padding: 28px clamp(18px, 4vw, 34px);
      box-shadow: 0 1px 2px rgba(0, 0, 0, .05), 0 8px 32px rgba(0, 0, 0, .06);
      color: #1d1d1f; font-family: inherit;
    }
    .td-panel h3 { font-size: 20px; font-weight: 600; letter-spacing: -0.02em; margin: 30px 0 12px; color: #1d1d1f; font-family: inherit; }
    .td-panel h3:first-child { margin-top: 0; }

    /* Rows — hairline list style */
    .td-row {
      display: flex; align-items: center; gap: 12px;
      background: transparent; border: none;
      border-bottom: 1px solid rgba(0, 0, 0, .07);
      border-radius: 0; padding: 13px 2px; margin-bottom: 0;
      transition: background .15s ease;
    }
    .td-row:last-of-type { border-bottom: none; }
    .td-row:hover { background: rgba(0, 0, 0, .02); border-color: rgba(0, 0, 0, .07); }

    /* Buttons */
    .td-btn {
      padding: 9px 20px; border-radius: 999px; border: none; cursor: pointer;
      font-family: inherit; font-weight: 500; font-size: 14px; letter-spacing: -0.01em;
      background: #0071e3; color: #fff; box-shadow: none;
      transition: all .2s ease;
    }
    .td-btn:hover { background: #0077ed; transform: scale(1.02); }
    .td-btn:active { transform: scale(.98); }
    .td-btn.danger { background: transparent; color: #ff3b30; padding: 9px 12px; }
    .td-btn.danger:hover { background: rgba(255, 59, 48, .08); }
    .td-btn.ghost { background: rgba(0, 0, 0, .05); color: #1d1d1f; border: none; }
    .td-btn.ghost:hover { background: rgba(0, 0, 0, .09); }

    /* Inputs */
    .td-input, .td-select, .td-textarea {
      background: #f5f5f7; border: 1px solid transparent;
      border-radius: 12px; padding: 11px 14px; color: #1d1d1f;
      font-family: inherit; font-size: 14px; outline: none; width: 100%;
      transition: all .2s ease;
    }
    .td-select option { background: #fff; color: #1d1d1f; }
    .td-input:focus, .td-textarea:focus, .td-select:focus { background: #fff; border-color: #0071e3; box-shadow: 0 0 0 4px rgba(0, 113, 227, .12); }
    .td-input::placeholder, .td-textarea::placeholder { color: #a1a1a6; }

    /* iOS toggle */
    .td-toggle { position: relative; width: 51px; height: 31px; flex-shrink: 0; cursor: pointer; }
    .td-toggle input { display: none; }
    .td-toggle .tk { position: absolute; inset: 0; border-radius: 999px; background: rgba(120, 120, 128, .32); border: none; transition: background .25s ease; }
    .td-toggle .tk::after {
      content: ''; position: absolute; top: 2px; left: 2px; width: 27px; height: 27px;
      border-radius: 50%; background: #fff; transition: left .25s cubic-bezier(.3, .9, .4, 1.2);
      box-shadow: 0 2px 6px rgba(0, 0, 0, .25);
    }
    .td-toggle input:checked + .tk { background: #34c759; border: none; }
    .td-toggle input:checked + .tk::after { left: 22px; background: #fff; box-shadow: 0 2px 6px rgba(0, 0, 0, .25); }

    /* Tutor-video manager */
    .td-vid-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 16px; margin: 6px 0 4px; }
    .td-vid-card { background: #f5f5f7; border-radius: 16px; overflow: hidden; transition: all .25s ease; }
    .td-vid-card:hover { transform: translateY(-2px); box-shadow: 0 10px 28px rgba(0, 0, 0, .12); }
    .td-vid-thumb { width: 100%; aspect-ratio: 16/9; object-fit: cover; display: block; background: #ddd; }
    .td-vid-body { padding: 12px 14px 14px; }
    .td-vid-title { font-size: 14px; font-weight: 600; letter-spacing: -0.01em; color: #1d1d1f; margin-bottom: 3px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    .td-vid-meta { font-size: 12px; color: #6e6e73; margin-bottom: 8px; }
    .td-struggle-chip { display: inline-block; font-size: 11.5px; font-weight: 600; color: #b25000; background: rgba(255, 149, 0, .14); border-radius: 999px; padding: 3px 10px; margin: 2px 4px 2px 0; }

    /* ═══ AI TUTOR (student work tab) ═══ */
    #tutor-slot { margin-top: 14px; }
    .tutor-panel { background: linear-gradient(160deg, rgba(124, 58, 237, .16), rgba(37, 99, 235, .14)); border: 1.5px solid rgba(147, 112, 240, .4); border-radius: 18px; padding: 14px; animation: cardUp .5s cubic-bezier(.22,1,.36,1); }
    .tutor-head { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; }
    .tutor-avatar { width: 42px; height: 42px; border-radius: 50%; background: linear-gradient(135deg, #7c3aed, #2563eb); display: flex; align-items: center; justify-content: center; font-size: 22px; flex: none; box-shadow: 0 4px 14px rgba(124, 58, 237, .45); animation: tutorBob 2.6s ease-in-out infinite; }
    @keyframes tutorBob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-4px); } }
    .tutor-name { font-family: var(--display); font-weight: 800; font-size: 14px; color: var(--ink); }
    .tutor-tag { font-size: 10px; font-weight: 800; letter-spacing: 1px; color: #a78bfa; text-transform: uppercase; }
    .tutor-msg { font-size: 13.5px; line-height: 1.5; color: var(--ink); margin-bottom: 10px; }
    .tutor-thinking i { display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: #a78bfa; margin-right: 4px; animation: tutorDot 1.2s ease-in-out infinite; }
    .tutor-thinking i:nth-child(2) { animation-delay: .2s; } .tutor-thinking i:nth-child(3) { animation-delay: .4s; }
    @keyframes tutorDot { 0%, 100% { transform: translateY(0); opacity: .5; } 50% { transform: translateY(-5px); opacity: 1; } }
    .tutor-video { width: 100%; aspect-ratio: 16/9; border: none; border-radius: 12px; background: #0b1c33; display: block; }
    .tutor-links { display: flex; gap: 8px; margin-top: 10px; flex-wrap: wrap; }
    .tutor-link { flex: 1; min-width: 130px; text-align: center; text-decoration: none; font-family: var(--display); font-weight: 800; font-size: 12.5px; padding: 10px 12px; border-radius: 12px; color: #fff; }
    .tutor-link.yt { background: linear-gradient(135deg, #ef4444, #b91c1c); }
    .tutor-link.khan { background: linear-gradient(135deg, #10b981, #047857); }
    .tutor-src { font-size: 11px; color: var(--ink-muted); margin-top: 8px; text-align: center; }
    .tutor-teacher-badge { display: inline-block; font-size: 10.5px; font-weight: 800; background: rgba(245, 158, 11, .2); color: #fbbf24; border-radius: 999px; padding: 3px 10px; margin-left: 6px; }

    /* ── DM overlay ── */
    #dm-overlay .sheet { max-height: 82vh; display: flex; flex-direction: column; }
    #dm-thread { flex: 1; overflow-y: auto; padding: 14px; display: flex; flex-direction: column; gap: 8px; min-height: 220px; }
    .dm-msg { max-width: 78%; padding: 9px 14px; border-radius: 16px; font-size: 14px; font-family: var(--body); line-height: 1.4; color: var(--ink); }
    .dm-msg.me { align-self: flex-end; background: linear-gradient(150deg, rgba(56, 189, 248, .40), rgba(2, 132, 199, .40)); border: 1px solid rgba(56, 225, 240, .35); border-bottom-right-radius: 4px; }
    .dm-msg.them { align-self: flex-start; background: rgba(30, 70, 130, .35); border: 1px solid rgba(150, 210, 255, .16); border-bottom-left-radius: 4px; }
    .dm-msg .dm-who { display: block; font-size: 10px; font-weight: 700; opacity: .65; margin-bottom: 2px; letter-spacing: .4px; }
    #dm-input-row { display: flex; gap: 8px; padding: 12px; border-top: 1px solid var(--glass-edge); }

    /* flights search */
    #flights-search {
      width: 100%; margin-bottom: 10px;
      background: rgba(8, 24, 52, .45); border: 1px solid var(--glass-edge);
      border-radius: 14px; padding: 11px 14px; color: var(--ink);
      font-family: var(--body); font-size: 14px; outline: none;
    }
    #flights-search:focus { border-color: var(--neon-cyan); box-shadow: 0 0 0 3px rgba(56, 225, 240, .15); }

    @media (prefers-reduced-motion: reduce) {
      #bg3d { display: none; }
      #pet-react.show { animation-duration: .8s; }
    }