/* ============================================================================
   The 3-D rooms (02, 03, 04, 05, 06, 07) in the Hypertectonica language.
   Their layouts stay; their panels become the glass windows, their title
   bars the deep pill, their buttons the pills. Scoped by room anchor.
   ========================================================================= */
body[data-theme]{font-family:'Poppins',system-ui,sans-serif}
/* the panels */
body[data-theme] .panel, body[data-theme] #bar, body[data-theme] #top, body[data-theme] #dock, body[data-theme] #cubes, body[data-theme] #linebar,
body[data-theme] #ask, body[data-theme] #score, body[data-theme] #side, body[data-theme] #pad, body[data-theme] #viewbar, body[data-theme] #bankPanel,
body[data-theme] #focusbar, body[data-theme] #story, body[data-theme] #write, body[data-theme] .msheet, body[data-theme] #msettings{
  background:linear-gradient(160deg, rgba(255,255,255,0.22), rgba(255,255,255,0.09)) !important;
  border:1px solid var(--glass-border) !important; border-radius:var(--radius) !important;
  backdrop-filter:blur(14px) !important; -webkit-backdrop-filter:blur(14px) !important;
  box-shadow:var(--shadow) !important; color:var(--ink) !important}
body[data-theme] .panel h1, body[data-theme] .panel h2, body[data-theme] .panel h3, body[data-theme] .panel .ttl, body[data-theme] #top .ttl, body[data-theme] #bar h1{color:var(--ink) !important;font-family:'Poppins',system-ui,sans-serif;font-weight:600;letter-spacing:.06em}
body[data-theme] .panel .sub, body[data-theme] .panel p, body[data-theme] .panel .why, body[data-theme] .panel small, body[data-theme] .panel .lbl, body[data-theme] .panel label{color:var(--ink-soft) !important}
body[data-theme] .panel .back, body[data-theme] .panel .home, body[data-theme] #top .home{display:inline-flex;align-items:center;min-height:36px;padding:0 12px;border-radius:10px;background:#fff !important;color:var(--deep) !important;font-weight:700;font-size:.78rem;text-decoration:none}
/* pills */
body[data-theme] .panel .btn, body[data-theme] .panel button, body[data-theme] .chip, body[data-theme] .pg, body[data-theme] #dock button, body[data-theme] #bar .btn, body[data-theme] .msheet .btn{
  border:1px solid var(--glass-border) !important; background:rgba(255,255,255,0.12) !important; color:#fff !important; border-radius:999px !important;
  font-family:'Poppins',system-ui,sans-serif !important; font-weight:500 !important; font-size:.66rem !important; letter-spacing:.1em; text-transform:uppercase; min-height:40px}
body[data-theme] .panel .btn.on, body[data-theme] .panel button[aria-pressed="true"], body[data-theme] .chip.on, body[data-theme] .pg.on, body[data-theme] .panel .btn.primary, body[data-theme] .panel .btn.go, body[data-theme] #send, body[data-theme] #race, body[data-theme] #run{
  background:#fff !important; color:var(--deep) !important; font-weight:600 !important}
body[data-theme] .panel input, body[data-theme] .panel select, body[data-theme] .panel textarea{
  background:rgba(255,255,255,0.14) !important; color:#fff !important; border:1px solid var(--glass-border) !important; border-radius:12px !important; font-family:'Poppins',system-ui,sans-serif; color-scheme:dark}
body[data-theme] .panel input::placeholder{color:rgba(255,255,255,.5)}
/* the mobile tab bar and pad in the language */
body[data-theme] #mtabs{background:linear-gradient(110deg, var(--deep) 0%, var(--field-b) 30%, var(--deep) 55%, var(--field-c) 80%, var(--deep) 100%) !important;border-top:1px solid var(--glass-border) !important}
body[data-theme] .mtab{color:rgba(255,255,255,.85) !important;font-family:'Poppins',system-ui,sans-serif !important;letter-spacing:.1em;text-transform:uppercase;font-size:.62rem !important;font-weight:600}
body[data-theme] .mtab.on{background:#fff !important;color:var(--deep) !important;border-radius:999px}
body[data-theme] #mpad, body[data-theme] #ppad{background:linear-gradient(110deg, var(--deep) 0%, var(--field-b) 60%, var(--deep) 100%) !important}
body[data-theme] #mpad button, body[data-theme] #ppad button{background:rgba(255,255,255,0.14) !important;border:1px solid var(--glass-border) !important;color:#fff !important;font-family:'Poppins',system-ui,sans-serif !important}
body[data-theme] #mpad .ok, body[data-theme] #ppad .ok{background:#fff !important;color:var(--deep) !important}
/* the sound pill */
body[data-theme] #sfx-toggle{background:rgba(255,255,255,0.14) !important;border:1px solid var(--glass-border) !important;color:#fff !important;font-family:'Poppins',system-ui,sans-serif !important;letter-spacing:.14em;text-transform:uppercase;font-size:.62rem !important;backdrop-filter:blur(9px)}
/* the paper stays paper */
body[data-theme] .paper{color:#1E1B2E}

/* buttons anywhere in a room, not only inside panels */
body[data-theme] button.btn, body[data-theme] .btn{background:rgba(0,0,0,.28) !important;color:#fff !important;border:1px solid var(--glass-border) !important;border-radius:999px !important}
body[data-theme] .btn.on, body[data-theme] .btn.primary, body[data-theme] .btn.go, body[data-theme] .btn[aria-pressed="true"]{background:#fff !important;color:var(--deep) !important}
/* Room 04: a part you have picked from the bank is unmistakable — lit white with a green edge and a tick */
body[data-theme] .part.used{background:#fff !important;color:var(--deep) !important;border:2px solid #7BF2A8 !important;box-shadow:0 0 0 3px rgba(123,242,168,.45),0 0 18px rgba(123,242,168,.5) !important;border-radius:14px !important;position:relative}
body[data-theme] .part.used .nm,body[data-theme] .part.used .st,body[data-theme] .part.used .st b{color:var(--deep) !important}
body[data-theme] .part.used::after{content:'\2713 ON THE JIG';position:absolute;right:10px;top:8px;font:700 .5rem 'Poppins',sans-serif;letter-spacing:.16em;color:#1E7F70;background:rgba(123,242,168,.35);border-radius:999px;padding:3px 8px}
body[data-theme] .part:not(.used):hover{border-color:#fff !important}
/* the same law for every room: whatever is chosen is white with the deep ink */
body[data-theme] .on,body[data-theme] .sel,body[data-theme] .picked,body[data-theme] [aria-pressed="true"],body[data-theme] .chip.on{background:#fff !important;color:var(--deep) !important;border-color:#fff !important}
body[data-theme] .on *,body[data-theme] .sel *,body[data-theme] .picked *,body[data-theme] [aria-pressed="true"] *{color:var(--deep) !important}