/* Dr Drive KE · Phase 2 UI layer: fonts (OFL, self-hosted), icon buttons, time-of-day chips, menu transitions. Loaded after style.css. */
@font-face{font-family:"Bungee";font-style:normal;font-weight:400;font-display:swap;src:url(fonts/bungee-latin.woff2) format("woff2")}
@font-face{font-family:"Baloo 2";font-style:normal;font-weight:400 800;font-display:swap;src:url(fonts/baloo2-latin.woff2) format("woff2")}
html,body{font-family:"Baloo 2","Trebuchet MS","Segoe UI",Roboto,system-ui,sans-serif}
h1,h2,#endTitle,#countdown,.big,.level-card .lv,#cardTag,#toast,#endScore{font-family:"Bungee","Arial Black",Impact,sans-serif;font-weight:400;letter-spacing:.5px}
h1{font-style:normal;text-shadow:3px 3px 0 #c8102e,6px 6px 0 #006b3f,9px 9px 14px rgba(0,0,0,.45)}
h1 span{font-family:"Baloo 2",sans-serif;font-weight:800}
#endTitle,#countdown{font-style:normal}
.big small,#toast small{font-family:"Baloo 2",sans-serif;font-weight:800}
#objective,.pill b,.spd b{font-weight:800}
/* menu: frosted backdrop over the live 3D scene + staggered slide-in */
.screen{backdrop-filter:blur(1.5px);animation:p2fade .35s ease-out both}
.panel{animation:p2slide .5s cubic-bezier(.2,1.25,.35,1) both}
.panel>*{animation:p2rise .45s ease-out both}
.panel>*:nth-child(2){animation-delay:.05s}.panel>*:nth-child(3){animation-delay:.1s}.panel>*:nth-child(4){animation-delay:.15s}
.panel>*:nth-child(5){animation-delay:.2s}.panel>*:nth-child(6){animation-delay:.25s}.panel>*:nth-child(7){animation-delay:.3s}.panel>*:nth-child(8){animation-delay:.35s}
@keyframes p2fade{from{opacity:0}to{opacity:1}}
@keyframes p2slide{from{transform:translateY(40px) scale(.96);opacity:0}to{transform:none;opacity:1}}
@keyframes p2rise{from{transform:translateY(12px);opacity:0}to{transform:none;opacity:1}}
.big{position:relative;overflow:hidden}
.big::after{content:"";position:absolute;top:0;left:-60%;width:40%;height:100%;background:linear-gradient(100deg,transparent,rgba(255,255,255,.35),transparent);transform:skewX(-20deg);animation:p2shine 2.8s ease-in-out infinite 1s}
@keyframes p2shine{0%,70%{left:-60%}100%{left:130%}}
/* time-of-day chips */
.p2-tod{display:flex;gap:6px;justify-content:center;margin:0 0 8px;flex-wrap:wrap}
.p2-tod button{display:flex;align-items:center;gap:4px;padding:5px 10px 5px 8px;border-radius:999px;background:rgba(255,255,255,.08);border:1.5px solid rgba(255,255,255,.14);font-weight:700;font-size:clamp(11px,2.5vmin,13px);transition:background .2s,transform .15s,border-color .2s}
.p2-tod button .p2-ic{width:16px;height:16px}
.p2-tod button.on{background:linear-gradient(180deg,#ffd400,#f0a800);color:#111;border-color:#fff3a0;transform:translateY(-1px);box-shadow:0 3px 10px rgba(255,212,0,.35)}
.p2-tod button[data-tod=night].on{background:linear-gradient(180deg,#5b3fa8,#2b1d5e);color:#fff;border-color:#b48ff0;box-shadow:0 3px 12px rgba(180,143,240,.5)}
/* icon buttons in the HUD */
.p2-icbtn{display:flex!important;align-items:center;justify-content:center;gap:5px}
.p2-icbtn .p2-ic{width:clamp(16px,4.6vmin,22px);height:clamp(16px,4.6vmin,22px);flex:none}
.tbtn.p2-icbtn .p2-ic{width:20px;height:20px}
.p2-lbl{font-size:.82em;letter-spacing:.5px}
@media (max-height:420px){.sbtn .p2-lbl{display:none}.sbtn.p2-icbtn{padding:0 12px}}
/* end screen: star burst */
#stars i{position:relative}
#stars i.on{animation:p2star .7s cubic-bezier(.2,1.8,.4,1) both;text-shadow:0 3px 0 #a07800,0 0 18px rgba(255,212,0,.8)}
#stars i.on::after{content:"";position:absolute;left:50%;top:50%;width:1.6em;height:1.6em;margin:-.8em 0 0 -.8em;border-radius:50%;border:3px solid #ffd400;animation:p2ring .7s ease-out both;pointer-events:none}
@keyframes p2star{0%{transform:scale(0) rotate(-180deg)}60%{transform:scale(1.35) rotate(10deg)}100%{transform:none}}
@keyframes p2ring{from{transform:scale(.3);opacity:1}to{transform:scale(1.6);opacity:0}}
#card{animation-timing-function:cubic-bezier(.2,1.3,.4,1)}
@media (prefers-reduced-motion:reduce){.screen,.panel,.panel>*,.big::after,#stars i.on,#stars i.on::after{animation:none!important}}