:root{
  --p1:#c0392b; --p1b:#8e2330;
  --p2:#8e2350; --p2b:#6a2465;
  --p3:#5b2a7a; --p3b:#3b2a7e;
  --p4:#233064; --p4b:#101a3a;
  --white:#ffffff;
  --dim:rgba(255,255,255,0.72);
  --dim2:rgba(255,255,255,0.5);
  --green:#3ecf8e;
  --gold:#e8c34c;
  --ink:#141a2e;
  --mono:'SFMono-Regular',Consolas,'Liberation Mono',Menlo,monospace;
  --sans:'Segoe UI',-apple-system,BlinkMacSystemFont,Helvetica,Arial,sans-serif;
}
*{box-sizing:border-box;margin:0;padding:0;}
html{font-size:17px;}
html,body{min-height:100%;width:100%;}
body{
  font-family:var(--sans);
  color:var(--white);
  /* NOT background-attachment:fixed — it clips/misrenders on long scrolling
     pages in some mobile browsers (and in full-page screenshot tools). A
     plain scrolling gradient covers the full content height reliably. */
  background:linear-gradient(180deg,#181033 0%, #101a3a 45%, #0a0d1a 100%);
}

.m-page{
  max-width:640px;
  margin:0 auto;
  padding:1.25rem 1rem 2.5rem;
  display:flex;flex-direction:column;
  gap:0.9rem;
}

/* ---------- header: brand, clock, date, rotation ---------- */
.m-header{
  padding:0.4rem 0.2rem 0.6rem;
}
.m-header-top{
  display:flex;align-items:center;justify-content:space-between;
  margin-bottom:0.7rem;
}
.m-brand{
  font-family:var(--mono);font-weight:800;font-size:1rem;
  letter-spacing:0.14em;text-transform:uppercase;color:var(--dim);
}

.p4-date{font-family:var(--mono);font-size:1.15rem;font-weight:800;color:var(--white);letter-spacing:0.02em;margin-bottom:0.6rem;}

.p4-rotation{display:flex;align-items:center;flex-wrap:wrap;gap:0.6rem;}
.p4-rotation .r-label{font-family:var(--mono);font-size:0.78rem;font-weight:800;letter-spacing:0.12em;text-transform:uppercase;color:var(--dim2);}
.p4-rotation .r-chips{display:flex;gap:0.4rem;}
.p4-rotation .r-chips span{
  width:2.1rem;height:2.1rem;border-radius:6px;
  background:var(--p1);
  display:flex;align-items:center;justify-content:center;
  font-family:var(--mono);font-size:1.05rem;font-weight:800;color:#fff;
}
.p4-rotation.late-start .r-label{color:var(--gold);}
.p4-late-flag{
  font-family:var(--mono);font-size:0.7rem;font-weight:800;letter-spacing:0.08em;
  text-transform:uppercase;color:var(--gold);
}

/* ---------- split-flap clock — same mechanic/markup as the TV, smaller ---------- */
.split-flap{display:flex;align-items:center;gap:0.4rem;}
.flap-group{display:flex;gap:0.22rem;}
.flap-colon{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:0.45rem;height:3rem;}
.flap-colon i{display:block;width:0.4rem;height:0.4rem;background:var(--white);border-radius:1.5px;}
.flap{position:relative;width:2.05rem;height:3rem;perspective:200px;border-radius:7px;box-shadow:0 2px 7px rgba(0,0,0,0.35);}
.flap-half,.flap-leaf{position:absolute;left:0;width:100%;height:50%;box-sizing:border-box;overflow:hidden;background:#1b2a54;display:flex;justify-content:center;}
.flap-half span,.flap-leaf span{position:absolute;left:0;right:0;height:3rem;display:flex;align-items:center;justify-content:center;font-family:'Nunito',var(--sans);font-weight:900;font-size:1.75rem;color:var(--white);line-height:1;}
.flap-top,.flap-leaf-top{top:0;border-radius:7px 7px 0 0;border:1px solid rgba(255,255,255,0.16);border-bottom:none;}
.flap-top{box-shadow:inset 0 -1px 0 rgba(0,0,0,0.55);}
.flap-top span,.flap-leaf-top span{top:0;}
.flap-bottom,.flap-leaf-bottom{bottom:0;border-radius:0 0 7px 7px;border:1px solid rgba(255,255,255,0.16);border-top:none;}
.flap-bottom span,.flap-leaf-bottom span{bottom:0;}
.flap::after{content:'';position:absolute;left:0.2rem;right:0.2rem;top:calc(50% - 0.5px);height:1px;background:rgba(0,0,0,0.45);z-index:2;pointer-events:none;}
.flap-leaf{backface-visibility:hidden;}
.flap-leaf-top{transform-origin:bottom center;}
.flap-leaf-bottom{transform-origin:top center;transform:rotateX(90deg);}
.flap.flipping .flap-leaf-top{animation:flapTopDown 0.3s ease-in forwards;}
.flap.flipping .flap-leaf-bottom{animation:flapBottomUp 0.3s ease-out 0.32s forwards;}
@keyframes flapTopDown{from{transform:rotateX(0deg);}to{transform:rotateX(-90deg);}}
@keyframes flapBottomUp{from{transform:rotateX(90deg);}to{transform:rotateX(0deg);}}

/* ---------- cards ---------- */
.m-card{
  background:rgba(255,255,255,0.055);
  border:1px solid rgba(255,255,255,0.09);
  border-left:3px solid rgba(255,255,255,0.25);
  border-radius:12px;
  padding:1.1rem 1.15rem 1.2rem;
}
.m-schedule-card{border-left-color:var(--p4);background:rgba(35,48,100,0.35);}
.m-accent-1{border-left-color:var(--p1);}
.m-accent-2{border-left-color:var(--p2);}
.m-accent-3{border-left-color:var(--p3);}

.cat{
  font-family:var(--mono);font-size:0.86rem;font-weight:800;
  letter-spacing:0.12em;text-transform:uppercase;color:var(--white);
  margin-bottom:0.7rem;
}

/* ---------- schedule rows (same classes/markup renderClassScheduleForDate builds) ---------- */
.p4-schedule{display:flex;flex-direction:column;}
.p4-row{display:flex;gap:0.7rem;padding:0.4rem 0;border-bottom:1px solid rgba(255,255,255,0.07);}
.p4-row:last-child{border-bottom:none;}
.p4-row .p4-t{flex:0 0 auto;width:6.4rem;font-family:var(--mono);font-size:0.85rem;font-weight:700;color:rgba(255,255,255,0.62);line-height:1.3;}
.p4-row.now{background:rgba(232,195,76,0.08);border-radius:8px;margin:0 -0.4rem;padding:0.4rem 0.4rem;}
.p4-row.now .p4-t{color:var(--green);}
.p4-row .p4-l{flex:1 1 auto;font-size:1rem;font-weight:700;line-height:1.3;}
.p4-row.now .p4-l{color:var(--gold);}

.p4-subrow{display:flex;gap:0.6rem;padding:0.1rem 0 0.1rem 1.5rem;}
.p4-subrow .p4-sub-label{flex:0 0 auto;width:4.2rem;font-family:var(--mono);font-size:0.76rem;font-weight:600;color:rgba(255,255,255,0.5);line-height:1.3;}
.p4-subrow .p4-sub-time{flex:1 1 auto;font-family:var(--mono);font-size:0.78rem;font-weight:600;color:rgba(255,255,255,0.75);line-height:1.3;}
.p4-row-empty{font-family:var(--mono);font-size:0.92rem;font-style:italic;color:var(--dim2);padding:0.5rem 0;}

.p4-tomorrow-row{display:flex;align-items:baseline;gap:0.6rem;margin-top:0.5rem;padding-top:0.6rem;border-top:1px solid rgba(255,255,255,0.14);}
.p4-tomorrow-label{font-family:var(--mono);font-size:0.72rem;font-weight:800;letter-spacing:0.1em;text-transform:uppercase;color:var(--dim2);}
.p4-tomorrow-letters{font-family:var(--mono);font-size:1rem;font-weight:800;color:var(--white);letter-spacing:0.06em;}

/* ---------- announcement mini-lists (same classes renderMiniList builds) ---------- */
.mini-list{display:flex;flex-direction:column;gap:0.55rem;}
.mini-row{display:flex;align-items:flex-start;gap:0.55rem;line-height:1.45;}
.mini-row .bullet{flex:0 0 auto;font-size:1.05rem;font-weight:700;color:rgba(255,255,255,0.5);line-height:1.4;}
.mini-row .bullet-text{flex:1 1 auto;font-weight:500;font-size:1rem;color:var(--dim);}
.mini-row .bullet-text a{color:inherit;text-decoration:underline;text-underline-offset:0.15em;}
.mini-row.highlight .bullet{color:var(--gold);}
.mini-row.highlight .bullet-text{color:var(--gold);}
.mini-row.empty .bullet-text{color:var(--dim2);font-style:italic;font-weight:400;}

.m-footer{
  text-align:center;
  font-family:var(--mono);font-size:0.72rem;color:var(--dim2);
  padding-top:0.5rem;
}

/* a little breathing room on wider phones/small tablets */
@media (min-width:480px){
  html{font-size:18px;}
}