/* Northstar fun card refresh: visual only, no behavior changes. */
:root{--navy:#082c6a;--blue:#129cf3;--gold:#ffc928;--teal:#28c6c8;--cream:#f4faff;--ink:#082c6a;--shadow:5px 5px 0 #082c6a}
body{background:radial-gradient(circle at 9% 8%,#fff7ca 0 3px,transparent 4px),radial-gradient(circle at 90% 16%,#bceeff 0 4px,transparent 5px),linear-gradient(135deg,#eaf8ff,#fffaf0);font-family:Nunito,Arial,sans-serif;color:var(--ink)}
h1,h2,h3,.button,.subject strong,.brand{font-family:Fredoka,"Arial Rounded MT Bold",Nunito,Arial,sans-serif;letter-spacing:.01em}
header{background:#fff;border-bottom:3px solid var(--navy);box-shadow:0 4px 0 var(--gold);padding-top:15px;padding-bottom:15px}
.panel{border:3px solid var(--navy);border-radius:23px;box-shadow:7px 7px 0 var(--blue);padding:25px;background:#fff}
.panel>.eyebrow{display:inline-block;background:#e5f8f8;color:#082c6a;border:2px solid #082c6a;border-radius:999px;padding:4px 9px;letter-spacing:.06em}
.card{border:2px solid var(--navy);border-radius:19px;box-shadow:4px 4px 0 var(--navy);background:#fff}
.button{border:2px solid var(--navy);border-radius:13px;box-shadow:3px 3px 0 var(--navy);transition:transform .15s ease,box-shadow .15s ease}
.button:hover{transform:translate(2px,2px);box-shadow:1px 1px 0 var(--navy)}
.button.secondary{background:#fff;color:#082c6a}.button.gold{background:var(--gold)}
.grid{gap:17px}.grid .subject{min-height:188px;border:3px solid var(--navy);border-top:3px solid var(--navy);box-shadow:5px 5px 0 var(--navy);padding:19px;position:relative;overflow:hidden}
.grid .subject:after{content:'✦';position:absolute;right:13px;top:10px;font-size:22px;color:#082c6a}
.grid .subject:nth-child(1){background:#dff5f5;transform:rotate(-.6deg)}
.grid .subject:nth-child(2){background:#e5eeff;transform:rotate(.7deg)}
.grid .subject:nth-child(3){background:#fff1b5;transform:rotate(-.35deg)}
.grid .subject:nth-child(4){background:#eee4fb;transform:rotate(.55deg)}
.grid .subject:nth-child(5){background:#ffe7df;transform:rotate(-.25deg)}
.grid .subject:hover{transform:translateY(-3px) rotate(0);box-shadow:7px 8px 0 var(--navy)}
.grid .subject:before{width:43px;height:43px;border:2px solid var(--navy);box-shadow:2px 2px 0 var(--navy);background-color:#fff!important}
.teacher:before{background:#fff0a9;border:2px solid var(--navy);box-shadow:3px 3px 0 var(--navy)}
.bubble{border:2px solid var(--navy);border-radius:17px;box-shadow:4px 4px 0 var(--navy);background:#fff}
.eyebrow{font-family:Nunito,Arial,sans-serif;font-weight:900;color:#082c6a}
.progress{height:13px;border:2px solid var(--navy);border-radius:999px;background:#fff}.progress span{background:var(--gold)}
input,textarea,select{border:2px solid #082c6a;border-radius:12px;background:#fff}
.reading-current,.daily-headspace-card,.headspace-status{border:2px solid var(--navy)!important;box-shadow:3px 3px 0 var(--navy)}
footer{border-top:3px solid var(--navy);border-image:none;background:#082c6a}
@media(max-width:700px){.panel{padding:20px;box-shadow:4px 4px 0 var(--blue)}.grid .subject{min-height:150px;transform:none!important}.card{box-shadow:3px 3px 0 var(--navy)}}
@media(prefers-reduced-motion:reduce){.button,.grid .subject{transition:none!important}}

/* Mason's official Northstar teacher: futuristic dragon explorer. */
.teacher img{content:url("assets/onyx-teacher.webp");width:min(230px,100%);max-height:270px;object-fit:contain;filter:drop-shadow(0 8px 0 #082c6a22)}
.teacher:before{inset:34px 12px auto;height:202px;background:#dff5f5}
@media(max-width:700px){.teacher img{width:min(220px,72vw);margin:0 auto}.teacher:before{inset:26px 25% auto;height:180px}}

/* Onyx communicates through short, calm mission dialogue. */
.teacher .bubble{position:relative;margin-top:8px;padding-top:28px;background:#fff;border:3px solid #082c6a;color:#082c6a;font-family:Nunito,Arial,sans-serif;line-height:1.42}
.teacher .bubble:before{content:'ONYX';position:absolute;top:-12px;left:14px;padding:4px 9px;background:#ffc928;border:2px solid #082c6a;border-radius:999px;color:#082c6a;font-family:Fredoka,"Arial Rounded MT Bold",Arial,sans-serif;font-size:12px;letter-spacing:.08em;box-shadow:2px 2px 0 #082c6a}
.teacher .bubble:after{content:'';position:absolute;top:-10px;right:24px;width:17px;height:17px;background:#fff;border-top:3px solid #082c6a;border-left:3px solid #082c6a;transform:rotate(45deg)}