:root{
    --bg:#0f1724;
    --card:#0b1220;
    --muted:rgba(255,255,255,0.85);
    --accent1:#ffee52;
    --accent2:#ff7300;
    /* Credit to https://www.rapidtables.com/web/color/color-scheme.html for help*/
    --accent1-complement-old: #0011ad;
    --accent2-complement-old: #008cff;
    --accent1-triad1: #52FFCB;
    --accent1-triad2: #FF52C2;
    --accent1-complement: #8E52FF;
    --accent2-complement: #00A6FF;
    --glass: rgba(255,255,255,0.04);
    --primary: #FFFFFF;
}
html,body{height:100%;}
body{
    margin:0; padding:0; background: radial-gradient(1200px 600px at 10% 10%, rgba(125,211,252,0.06), transparent), radial-gradient(900px 400px at 90% 90%, rgba(255,107,107,0.04), transparent), var(--bg); font-family:Inter, ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial; color:white;
    -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale;
}
button {
    cursor: pointer;
}

main {
    padding: 10px;
}

a {
    cursor: pointer;
}

header{
    display:flex; align-items:center; justify-content:space-between; gap:16px; margin-bottom:24px;
}
h1{margin:0; font-size:2rem; letter-spacing:0.6px}
.subtitle{color:var(--muted); font-size:0.9rem}

.grid{
    display:grid; grid-template-columns:repeat(auto-fill,minmax(260px,1fr)); gap:20px;
    margin-bottom: 20px;
    min-height: 140px;
    padding: 2px 6px;
}

.card{
    background:linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0.01));
    border-radius:12px; padding:10px; border:1px solid rgba(255,255,255,0.04); box-shadow: 0 6px 18px rgba(2,6,23,0.6);
    transform-origin:center; transition:transform .28s cubic-bezier(.2,.9,.2,1), box-shadow .28s; position:relative; overflow:hidden;
    background-repeat: round;
    min-height: -webkit-fill-available;
    text-shadow: 2px 2px 2px black;
}

.card-header-line{
    display: grid;
    grid-template-columns: 1fr auto;
}

.open-full-link {
    text-align: right;
    font-size: 10px;
    cursor: pointer;
    color: #FFFFFF;
}

.card-red-team{
    background:linear-gradient(180deg, rgba(255,0,0,0.5), rgba(100,0,0,0.5));
    background-image: url("../background_images/red-team3.jpg");
    background-size: 100%;
    background-repeat: round;
}

.card-blue-team{
    background:linear-gradient(180deg, rgba(0,0,255,0.5), rgba(0,0,100,0.5));
    background-image: url("../background_images/galaxy-brain.jpeg");
    background-size: 100%;
    background-repeat: round;
}

.card-consults{
    background:linear-gradient(180deg, rgba(175,0,0,0.5), rgba(0,0,175,0.5));
    background-image: url("../background_images/consults.jpg");
    background-size: contain;
    background-repeat: round;
}

.card-ed-evening{
    background:linear-gradient(180deg, rgba(255, 217, 0, 0.5), rgba(255, 217, 0, 0.2));
    background-image: url("../background_images/evening.jpg");
    background-size: 200%;
    background-position-y: bottom;
    background-repeat: unset;
}

.card-night-float{
    background:linear-gradient(180deg, rgba(20,0,20,0.5), rgba(0,0,70,0.2));
    background-image: url("../background_images/night-float-3.jpg");
    background-size: 120%;
    background-repeat: round;
}

.card-day-float{
    background:linear-gradient(180deg, rgba(150, 235, 255, 0.658), rgba(150,255,150,0.5));
    background-image: url("../background_images/df2.jpg");
    background-size: 150%;
    background-repeat: round;
}

.card-nmicu{
    background:linear-gradient(180deg, rgba(225, 0, 255, 0.658), rgba(150,0,150,0.5));
    background-image: url("../background_images/nmicu.jpg");
    background-size: 100%;
    background-repeat: round;
}

.card-sec{
    background:linear-gradient(180deg, rgba(50, 255, 50, 0.658), rgba(25,175,25,0.5));
    background-image: url("../background_images/sec4.jpg");
    background-size: 100%;
    background-repeat: round;
}

.card-peds-neuro{
    background:linear-gradient(180deg, rgba(225, 0, 255, 0.658), rgba(150,0,150,0.5));
    background-image: url("../background_images/peds.jpg");
    background-size: 100%;
    background-repeat: round;
}

.card-jeopardy{
    background:linear-gradient(180deg, rgba(50, 255, 50, 0.658), rgba(25,175,25,0.5));
    background-image: url("../background_images/jeopardy.jpg");
    background-size: 400%;
    background-repeat: round;
}

.card-highland{
    background:linear-gradient(180deg, rgba(255, 218, 11, 0.76), rgba(184, 157, 2, 0.425));
    background-image: url("../background_images/highland.jpg");
    background-size: 100%;
    background-repeat: no-repeat;
    background-position-y: bottom;
    background-position-x: right;
}


.card:hover{ transform:translateY(-8px) scale(1.02); box-shadow:0 18px 46px rgba(2,6,23,0.7); }

.assignment{
    font-size:0.8rem; font-weight: 700; text-transform:uppercase; letter-spacing:1.4px; margin-bottom:8px
}

.stage{
    display:flex; gap:12px; align-items:center; background: linear-gradient(135deg, rgba(255,255,255,0.02), rgba(255,255,255,0.01)); padding:8px; border-radius:10px; border:0px solid rgba(255,255,255,0.03);
}

.portrait{
    width:64px; height:64px; flex:0 0 64px; border-radius:10px; overflow:hidden; border:2px solid rgba(255,255,255,0.06); box-shadow:inset 0 -8px 18px rgba(0,0,0,0.45);
    background:linear-gradient(135deg,var(--accent2),var(--accent1));
}
.portrait img{ width:100%; height:100%; object-fit:cover; display:block; }

.who{
    display:flex; flex-direction:column; gap:4px; min-width:0;
}
.name{font-weight:700; font-size:1.05rem; line-height:1;}
.role{font-size:0.82rem; color:var(--accent1)}


/* dramatic stage lights */
.card::before{
    content:''; position:absolute; inset:-40% -30% auto -30%; height:200px; background:radial-gradient(closest-side, rgba(125,211,252,0.08), transparent 35%);
    transform:rotate(-12deg); mix-blend-mode:screen; pointer-events:none;
}
.card::after{
    content:''; position:absolute; inset:auto -30% -40% -30%; height:200px; background:radial-gradient(closest-side, rgba(255,107,107,0.06), transparent 35%);
    transform:rotate(12deg); mix-blend-mode:screen; pointer-events:none;
}

/* spotlight glow when active */
.card.selected{ box-shadow:0 26px 80px rgba(0,0,0,0.85), 0 0 40px rgba(125,211,252,0.06); border:1px solid rgba(125,211,252,0.18); }

/* tiny ribbon */
.ribbon{ font-size:0.8rem; padding:4px 8px; background:linear-gradient(90deg,var(--accent1),var(--accent2)); color:#021022; border-radius:8px; font-weight:700; display:inline-block; vertical-align: middle; }

.ribbon-complementary{ font-size:0.8rem; padding:4px 8px; background:linear-gradient(90deg,var(--accent1-complement),var(--accent2-complement)); color:#FFFFFF; border-radius:8px; font-weight:700; display:inline-block; vertical-align: middle; }

/* small animation for name */
.name.celebrate{ animation: pop 700ms cubic-bezier(.2,.9,.2,1); }
@keyframes pop{ 0%{ transform:scale(.92);} 60%{ transform:scale(1.06);} 100%{ transform:scale(1);} }

/* responsive tweaks */
@media (max-width:520px){ .grid{ grid-template-columns:repeat(auto-fill,minmax(220px,1fr)); } .portrait{width:64px;height:64px} }

footer {
    padding: 10px;
}

.nav {
  overflow: hidden;
  background-color: #333;
  background: linear-gradient(90deg, #333, #222)
}

.nav a {
  float: left;
  display: block;
  color: #f2f2f2;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
  font-size: 17px;
  border-radius: 3px;
}

.nav a:hover {
  background-color: #ddd;
  color: black;
}

.nav a.nav-active {
  background-color: var(--accent1-complement);
  background: linear-gradient(90deg,var(--accent1-complement),var(--accent2-complement));
  color: white;
}

.nav .nav-icon {
  display: none;
}

@media screen and (max-width: 640px) {
  .nav a {display: none;}
  .nav a:first-child, .nav a.nav-active {display: block;}
  .nav a.nav-icon {
    float: right;
    display: block;
  }
}

@media screen and (max-width: 640px) {
  .nav.nav-responsive {position: relative;}
  .nav.nav-responsive .nav-icon {
    position: absolute;
    right: 0;
    top: 0;
  }
  .nav.nav-responsive a {
    float: none;
    display: block;
    text-align: left;
  }
}

.nav-menu {
    background: linear-gradient(90deg,var(--accent1),var(--accent2));
}

.all-residents-assigned-div {
    padding: 0 6px;
    color: #DDDDDD;
}