/* ============================================================================
   HYPERTECTONICA — the interface language of MY DAY GLASS (BG Latitude), as
   built, taken from mdg-update-v67 (styles.css / mobile.css / app.js).
   Every page of the MPI Scholar Academy loads this file.        BUILD ht-1

   THE RULES, VERBATIM FROM THE SOURCE
   · A tone-on-tone FIELD: radial-gradient(120% 130% at 50% 8%, a 0%, b 58%, c 100%)
     with a wireframe 3-D wave plane behind it at 22% (app.js "wave").
   · GLASS windows over the field: rgba(255,255,255,.07), 1px rgba(255,255,255,.32),
     radius 22px, backdrop blur 9px, shadow 0 18px 50px deep-soft + 0 2px 10px.
     Stronger glass .12; popups 22%→9% gradient with blur 18; the gate card blur 24.
   · INK is white; soft ink is white at 72%. Hairlines white at 22%.
   · TYPE is Poppins. Eyebrows: 600, .76rem, letter-spacing .26em, uppercase, soft.
   · BUTTONS are pills (999px), uppercase, letter-spaced .1–.18em, small (.62–.72rem).
     The active/primary button is WHITE with the deep tone as its text.
   · The HEADER is a deep-tone pill with a slow drifting gradient and a sheen sweep;
     a white logo pill inside it.
   · CARDS carry their own colour as a 5–6px LEFT BORDER and a tint mixed from that
     colour into the glass (color-mix 45% / 20%). The current one wears a white ring.
   · 3-D CRYSTAL BLOCKS: a lid (translateZ) with an iridescent gradient, a front wall
     rotated -90°, tinted end caps — on a plane in 1000px perspective.
   · Phones: 44px targets, 16px inputs, the header condenses, one view at a time.
   · Reduced motion is respected everywhere.
   ========================================================================= */

/* ---------- tone-on-tone fields (MDG themes + the Academy's rooms) ---------- */
:root, body[data-theme="orange"]{
  --field-a:#F07F1A; --field-b:#C95E04; --field-c:#A34A03; --deep:#8A3D06; --deep-soft:rgba(90,42,5,0.35); --accent:#E8611C;
  --glass:rgba(255,255,255,0.07); --glass-strong:rgba(255,255,255,0.12); --glass-border:rgba(255,255,255,0.32); --hairline:rgba(255,255,255,0.22);
  --ink:#FFFFFF; --ink-soft:rgba(255,255,255,0.88);   /* MDG uses .72; the Academy's fields are hotter, so the soft ink is lifted to read on them */
  --card:#FFFFFF; --card-ink:#20160C; --card-soft:#8A7A6B; --card-line:#EDE4DA;
  --shadow:0 18px 50px rgba(60,25,0,0.28), 0 2px 10px rgba(60,25,0,0.15);
  --radius:22px;
}
body[data-theme="green"]{ --field-a:#2F9457; --field-b:#1E6E3D; --field-c:#155530; --deep:#0F4526; --deep-soft:rgba(8,48,25,0.35); --accent:#2E7D4F; --card-ink:#0E1F15; --card-soft:#6E8377; --card-line:#DFEAE2; --shadow:0 18px 50px rgba(0,40,18,0.3), 0 2px 10px rgba(0,40,18,0.16); }
body[data-theme="pink"]{ --field-a:#F06AA8; --field-b:#C6437E; --field-c:#9C2F60; --deep:#7E2450; --deep-soft:rgba(96,20,55,0.38); --accent:#E05590; --shadow:0 18px 50px rgba(90,15,50,0.3), 0 2px 10px rgba(90,15,50,0.16); }
body[data-theme="black"]{ --field-a:#4A4A52; --field-b:#2A2A30; --field-c:#161619; --deep:#0D0D10; --deep-soft:rgba(0,0,0,0.5); --accent:#3A3A42; --shadow:0 18px 50px rgba(0,0,0,0.5), 0 2px 10px rgba(0,0,0,0.3); }
body[data-theme="red"]{ --field-a:#E04848; --field-b:#B22B2B; --field-c:#8C1E1E; --deep:#701616; --deep-soft:rgba(90,10,10,0.4); --accent:#D63A3A; --shadow:0 18px 50px rgba(80,8,8,0.32), 0 2px 10px rgba(80,8,8,0.18); }
body[data-theme="blue"]{ --field-a:#3568E0; --field-b:#2247AC; --field-c:#183683; --deep:#122C6B; --deep-soft:rgba(10,26,66,0.38); --accent:#2456D6; --card-ink:#0D1530; --card-soft:#6F7A99; --card-line:#E0E5F2; --shadow:0 18px 50px rgba(5,20,70,0.3), 0 2px 10px rgba(5,20,70,0.16); }
/* the Academy's own tones, built the same way (a, b, c, deep) */
body[data-theme="purple"]{ --field-a:#8A63E8; --field-b:#6A45C4; --field-c:#4E2F9A; --deep:#3A1F7A; --deep-soft:rgba(40,16,90,0.4); --accent:#7C5CBF; --shadow:0 18px 50px rgba(30,10,80,0.32), 0 2px 10px rgba(30,10,80,0.16); }
body[data-theme="teal"]{ --field-a:#2FB7A8; --field-b:#1E8A80; --field-c:#15665F; --deep:#0F4D48; --deep-soft:rgba(8,55,50,0.38); --accent:#45B8AC; --shadow:0 18px 50px rgba(0,50,45,0.3), 0 2px 10px rgba(0,50,45,0.16); }
body[data-theme="tan"]{ --field-a:#C99A62; --field-b:#A5763F; --field-c:#7E572A; --deep:#5E3E19; --deep-soft:rgba(70,45,15,0.4); --accent:#B9895A; --shadow:0 18px 50px rgba(60,40,10,0.3), 0 2px 10px rgba(60,40,10,0.16); }
body[data-theme="brown"]{ --field-a:#B8703C; --field-b:#8F5127; --field-c:#6A3A1A; --deep:#4B2810; --deep-soft:rgba(60,30,10,0.4); --accent:#9C6234; --shadow:0 18px 50px rgba(50,25,5,0.32), 0 2px 10px rgba(50,25,5,0.16); }
body[data-theme="indigo"]{ --field-a:#5B4E9A; --field-b:#3E3472; --field-c:#2A2350; --deep:#1C1738; --deep-soft:rgba(20,15,50,0.45); --accent:#3A2E5C; --shadow:0 18px 50px rgba(15,10,45,0.4), 0 2px 10px rgba(15,10,45,0.2); }

/* ---------- the field ---------- */
body.ht{
  font-family:'Poppins',system-ui,sans-serif; font-weight:400; color:var(--ink);
  background:radial-gradient(120% 130% at 50% 8%, var(--field-a) 0%, var(--field-b) 58%, var(--field-c) 100%) fixed;
  transition:background .6s;
}
#wave3d{position:fixed; inset:0; z-index:0; pointer-events:none;}
/* a CSS stand-in for the wave plane where WebGL is not wanted: the same wireframe, flat */
.ht-plane{position:fixed; left:-15%; right:-15%; bottom:0; height:38vh; z-index:0; pointer-events:none;
  transform-origin:50% 100%; transform:perspective(1000px) rotateX(60deg);
  background-image:linear-gradient(rgba(255,255,255,0.22) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,0.22) 1px,transparent 1px);
  background-size:84px 84px;
  -webkit-mask-image:linear-gradient(to top,#000 45%,transparent); mask-image:linear-gradient(to top,#000 45%,transparent)}

/* ---------- type ---------- */
.eyebrow{font-weight:600; font-size:0.76rem; letter-spacing:0.26em; text-transform:uppercase; color:var(--ink-soft);}
.ht h1,.ht h2,.ht h3{font-family:'Poppins',system-ui,sans-serif;}
.ht .display{font-size:clamp(1.6rem,3vw,2.6rem); font-weight:800; text-transform:uppercase; line-height:1.14; letter-spacing:0.045em;
  background:linear-gradient(180deg,#FFFFFF 30%, rgba(255,255,255,0.72)); -webkit-background-clip:text; background-clip:text; color:transparent;
  filter:drop-shadow(0 3px 14px rgba(40,15,0,0.35));}

/* ---------- glass windows ---------- */
.pane{ background:var(--glass); border:1px solid var(--glass-border); border-radius:var(--radius);
  backdrop-filter:blur(9px); -webkit-backdrop-filter:blur(9px); box-shadow:var(--shadow);
  display:flex; flex-direction:column; min-height:0; overflow:hidden; position:relative; }
.pane-head{display:flex; align-items:center; padding:14px 22px 10px; gap:12px;}
.pane-head .eyebrow{flex:1;}
.pane.strong{background:var(--glass-strong);}
.pane.pop{ background:linear-gradient(160deg, rgba(255,255,255,0.22), rgba(255,255,255,0.09)); border-radius:20px;
  backdrop-filter:blur(18px); -webkit-backdrop-filter:blur(18px); box-shadow:0 30px 80px var(--deep-soft); }
.gate-card{ width:min(460px,92vw); padding:56px 48px; text-align:center; position:relative; z-index:2;
  background:var(--glass); border:1px solid var(--glass-border); border-radius:30px; backdrop-filter:blur(24px); -webkit-backdrop-filter:blur(24px); box-shadow:var(--shadow); }

/* ---------- the header: a deep-tone pill with a drifting field and a sheen ---------- */
header.bar{ display:flex; align-items:center; gap:14px; padding:10px 16px 10px 12px; border-radius:999px; box-shadow:var(--shadow);
  background:linear-gradient(110deg, var(--deep) 0%, var(--field-b) 30%, var(--deep) 55%, var(--field-c) 80%, var(--deep) 100%);
  background-size:240% 100%; animation:bar-drift 16s ease-in-out infinite alternate; position:relative; overflow:hidden; }
header.bar::after{ content:""; position:absolute; inset:0; pointer-events:none;
  background:linear-gradient(100deg, transparent 20%, rgba(255,255,255,0.14) 42%, rgba(190,220,255,0.1) 50%, transparent 68%);
  background-size:260% 100%; animation:bar-sheen 9s linear infinite; }
@keyframes bar-drift{from{background-position:0% 0;}to{background-position:100% 0;}}
@keyframes bar-sheen{from{background-position:200% 0;}to{background-position:-60% 0;}}
.logo-mark{ min-width:36px; padding:0 8px; height:36px; border-radius:10px; background:#fff; color:var(--deep);
  font-weight:700; font-size:0.82rem; display:flex; align-items:center; justify-content:center; letter-spacing:0.02em; }
header.bar h1{font-size:1rem; font-weight:600; letter-spacing:0.18em; text-transform:uppercase; margin:0;}
header.bar .clock{font-weight:600; font-size:1.35rem; margin-left:auto; letter-spacing:0.04em; padding-right:10px;}

/* ---------- buttons ---------- */
.icon-btn{ border:none; background:transparent; color:rgba(255,255,255,0.85); padding:10px 18px; border-radius:999px; cursor:pointer;
  font-family:inherit; font-weight:500; font-size:0.72rem; letter-spacing:0.1em; text-transform:uppercase;
  display:inline-flex; align-items:center; gap:8px; transition:all .2s; min-height:44px; }
.icon-btn:hover{background:rgba(255,255,255,0.12); color:#fff;}
.icon-btn.active,.icon-btn.primary{background:#fff; color:var(--deep);}
.icon-btn.glass{background:rgba(255,255,255,0.12); border:1px solid var(--glass-border);}
.win-btn{ width:26px; height:26px; border-radius:9px; border:1px solid var(--hairline); background:rgba(255,255,255,0.08);
  cursor:pointer; display:flex; align-items:center; justify-content:center; color:var(--ink-soft); transition:all .2s; flex-shrink:0; }
.win-btn:hover{border-color:#fff; color:#fff;}
.pill-input{ width:100%; padding:15px 20px; border-radius:999px; border:1px solid var(--glass-border); background:rgba(255,255,255,0.14);
  color:var(--ink); font-size:16px; outline:none; font-family:inherit; font-weight:300; transition:border-color .2s; }
.pill-input:focus{border-color:rgba(255,255,255,0.8);} .pill-input::placeholder{color:rgba(255,255,255,0.55);}
.beta-pill{ display:inline-block; font-size:0.55rem; letter-spacing:0.28em; font-weight:600; padding:6px 13px 5px; border-radius:999px;
  border:1px solid rgba(255,255,255,0.55); background:rgba(255,255,255,0.12); vertical-align:middle; }

/* ---------- cards that carry a colour (--hc) ---------- */
.q-card{ border-radius:15px; padding:12px 14px; position:relative;
  background:linear-gradient(155deg, color-mix(in srgb, var(--hc,#fff) 45%, rgba(255,255,255,0.08)), color-mix(in srgb, var(--hc,#fff) 20%, rgba(255,255,255,0.03)));
  border:1px solid var(--glass-border); border-left:6px solid var(--hc,#fff); color:var(--ink); }
.q-card .q-title{font-weight:600; font-size:0.95rem;} .q-card .q-time{font-size:0.74rem; color:var(--ink-soft); margin-top:2px;}
.q-card.q-current{box-shadow:0 0 0 2px rgba(255,255,255,0.85), 0 10px 30px rgba(255,255,255,0.25);}
.q-tag{position:absolute; right:12px; top:10px; font-weight:700; font-size:0.56rem; letter-spacing:0.2em; color:var(--ink-soft); text-transform:uppercase;}
.bank-mod{ position:relative; border-radius:13px; padding:8px 12px 8px 14px; background:rgba(255,255,255,0.07); border:1px solid var(--hairline);
  border-left:5px solid var(--hc,#fff); cursor:pointer; display:flex; align-items:center; gap:12px; transition:transform .15s, background .2s; color:var(--ink); text-decoration:none; }
.bank-mod:hover{transform:translateX(-4px); background:rgba(255,255,255,0.16);}
.bank-mod .b-ring{ width:33px; height:33px; border-radius:50%; background:#fff; color:var(--deep); display:flex; align-items:center; justify-content:center; flex-shrink:0; font-weight:700; font-size:.72rem; }
.bank-mod .b-name{font-size:0.95rem; font-weight:600;} .bank-mod .b-dur{font-size:0.74rem; color:var(--ink-soft); letter-spacing:0.14em; margin-top:1px; font-weight:600;}
.q-batt{height:5px; border-radius:99px; background:rgba(255,255,255,0.25); margin-top:8px; overflow:hidden;} .q-batt i{display:block; height:100%; border-radius:99px; background:#fff;}
.tk-dot{width:10px; height:10px; border-radius:50%; flex-shrink:0;} .tk-live{background:#7BF2A8; box-shadow:0 0 10px #7BF2A8; animation:tk-pulse 2.4s ease-in-out infinite;}
@keyframes tk-pulse{0%,100%{opacity:1;}50%{opacity:0.45;}}

/* ---------- 3-D crystal blocks on a plane ---------- */
.dl-stage{position:relative; perspective:1000px; perspective-origin:50% 0%;}
.dl-plane{position:absolute; inset:0; transform-style:preserve-3d; transform-origin:50% 60%;}
.dl-base{ position:absolute; inset:0; border-radius:16px; background:linear-gradient(180deg, rgba(255,255,255,0.09), rgba(255,255,255,0.02));
  border:1px solid var(--glass-border); box-shadow:0 36px 70px var(--deep-soft); }
.dl-mod{position:absolute; height:28px; transform-style:preserve-3d; user-select:none;}
.dl-mod .f{position:absolute; pointer-events:none;}
.dl-mod .f-top{ inset:0; transform:translateZ(16px);
  background:linear-gradient(120deg, rgba(216,230,255,0.62) 0%, rgba(236,216,255,0.5) 38%, rgba(198,246,255,0.58) 70%, rgba(244,222,255,0.52) 100%);
  border:1.5px solid rgba(255,255,255,0.9); border-top:3px solid var(--hc,#fff); border-left:6px solid var(--hc,#fff); border-radius:5px;
  font-weight:600; font-size:0.74rem; line-height:25px; padding:0 8px; white-space:nowrap; overflow:hidden; color:var(--deep); box-shadow:inset 0 0 12px rgba(255,255,255,0.55); }
.dl-mod .f-front{ left:0; right:0; top:100%; height:16px; transform-origin:top; transform:rotateX(-90deg);
  background:linear-gradient(90deg, rgba(224,214,255,0.5), rgba(200,236,255,0.42) 50%, rgba(240,214,250,0.48));
  border:1px solid rgba(255,255,255,0.75); border-top:none; border-radius:0 0 4px 4px; box-shadow:0 20px 30px var(--deep-soft), inset 0 -4px 10px rgba(150,130,255,0.28); }
.dl-mod .f-end{ top:0; width:16px; height:28px; background:linear-gradient(160deg, var(--hc,#fff), rgba(255,255,255,0.55)); border:1px solid rgba(255,255,255,0.85); box-shadow:inset 0 0 8px rgba(255,255,255,0.6); }
.dl-mod .f-end.l{left:0; transform-origin:left; transform:rotateY(-90deg);} .dl-mod .f-end.r{right:0; transform-origin:right; transform:rotateY(90deg); opacity:0.75;}

/* ---------- motion ---------- */
@media (prefers-reduced-motion: reduce){ header.bar,header.bar::after,.tk-live{animation:none;} }
/* ---------- phones (from mobile.css): posture ---------- */
@media (max-width:760px){
  input,select,textarea{font-size:16px !important;}
  .win-btn,.icon-btn{min-height:44px;}
  header.bar{flex-wrap:wrap; border-radius:20px; padding:7px 10px; gap:6px;}
  header.bar h1{font-size:0.74rem; letter-spacing:0.1em;}
  header.bar .clock{font-size:1rem;}
  .gate-card{padding:12px 14px 10px; border-radius:18px; width:100%;}
}
@media(max-width:900px){ .ht-plane{left:0;right:0} }