/* Sleep deprivation. Everything scoped under .sdp-*. */
.sdp-sc { position: relative; width: 100%; display: flex; flex-direction: column; align-items: center; gap: 10px; }

/* the drive */
.sdp-drive { flex: 1; align-items: stretch; }
.sdp-road { position: relative; flex: 1; min-height: 240px; width: 100%; overflow: hidden; border-radius: 0; background: #16301F; cursor: grab; }
.sdp-road canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
.sdp-car { position: absolute; left: 0; top: 0; width: 44px; height: 76px; object-fit: contain; pointer-events: none; filter: drop-shadow(0 8px 10px rgba(0, 0, 0, .5)); will-change: transform; }
.sdp-dash { position: absolute; left: 12px; top: 10px; display: flex; flex-direction: column; padding: 6px 12px; border-radius: 12px; background: rgba(10, 14, 26, .82); border: 1px solid var(--line); pointer-events: none; }
.sdp-dash b { font: 800 20px var(--mono); color: var(--gold); }
.sdp-dash span { font: 700 12.5px var(--sans); color: var(--dim); }
.sdp-black { position: absolute; inset: 0; background: #000; opacity: 0; pointer-events: none; transition: opacity .18s ease-in; }
.sdp-black.on { opacity: 1; transition: opacity .12s ease-in; }
.sdp-off { position: absolute; right: 12px; top: 12px; padding: 5px 11px; border-radius: 99px; background: var(--gold); color: #1A1430; font: 800 13px var(--sans); opacity: 0; transition: opacity .15s; pointer-events: none; }
.sdp-off.on { opacity: 1; }
.sdp-rumble { animation: sdp-rumble .45s linear; }
@keyframes sdp-rumble { 0%, 100% { transform: none; } 20% { transform: translateX(-5px); } 40% { transform: translateX(5px); } 60% { transform: translateX(-4px); } 80% { transform: translateX(3px); } }

/* the rat */
.sdp-lab { gap: 12px; max-width: 360px; margin: 0 auto; }
.sdp-brain { width: 100%; padding: 10px 12px 12px; border-radius: 16px; background: var(--surface); border: 1px solid var(--line); }
.sdp-bh { font: 700 12.5px var(--sans); color: var(--dim); margin-bottom: 8px; text-align: center; }
.sdp-patches { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.sdp-patch { position: relative; display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; padding: 10px 8px; border-radius: 14px; background: rgba(123, 92, 253, .12); border: 2px solid transparent; transition: background .25s, border-color .25s; justify-items: center; }
.sdp-patch i { width: 12px; height: 12px; border-radius: 50%; background: #4B3E8F; }
.sdp-patch i.f { animation: sdp-fire .35s ease-out; }
@keyframes sdp-fire { 0% { background: var(--violet-bright); box-shadow: 0 0 10px 3px rgba(169, 155, 255, .9); } 100% { background: #4B3E8F; box-shadow: none; } }
.sdp-patch b { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); padding: 2px 8px; border-radius: 99px; background: rgba(10, 12, 24, .92); white-space: nowrap; font: 800 12.5px var(--sans); color: var(--text); opacity: 0; transition: opacity .2s; }
.sdp-patch.sdp-quiet { background: rgba(10, 12, 24, .9); border-color: var(--line-strong); }
.sdp-patch.sdp-quiet i { background: #23243A; animation: none; }
.sdp-patch.sdp-quiet b, .sdp-patch.sdp-mark b { opacity: 1; }
.sdp-patch.sdp-mark b { color: var(--gold); }
.sdp-patch.sdp-mark { border-color: var(--gold); }
.sdp-cage { position: relative; width: 100%; height: 190px; border-radius: 16px; background: linear-gradient(#1A2136, #121829); border: 1px solid var(--line); overflow: hidden; }
.sdp-clock { position: absolute; left: 10px; top: 8px; font: 700 12.5px var(--sans); color: var(--dim); }
.sdp-clock b { color: var(--gold); }
.sdp-rat { position: absolute; left: 34px; bottom: -6px; height: 160px; width: auto; transform-origin: 50% 100%; }
.sdp-rat.sdp-up { animation: sdp-reach .7s ease-in-out; }
@keyframes sdp-reach { 0%, 100% { transform: none; } 45% { transform: translate(10px, -8px) rotate(4deg); } }
.sdp-ledge { position: absolute; left: 178px; top: 70px; width: 60px; height: 10px; border-radius: 5px; background: #6E6960; }
.sdp-pellet { position: absolute; left: 4px; top: -14px; width: 14px; height: 14px; border-radius: 4px; background: #FFF6E0; box-shadow: 0 0 8px rgba(252, 192, 80, .6); opacity: 0; }
.sdp-pellet.in { opacity: 1; animation: sdp-pin .3s ease-out; }
@keyframes sdp-pin { from { transform: translateY(-20px); opacity: 0; } }
.sdp-pellet.got { animation: sdp-got .4s ease-in forwards; }
@keyframes sdp-got { to { transform: translate(-60px, 30px) scale(.4); opacity: 0; } }
.sdp-pellet.drop { animation: sdp-drop .6s ease-in forwards; }
@keyframes sdp-drop { 30% { transform: translate(-10px, -4px) rotate(30deg); } to { transform: translate(-6px, 130px) rotate(120deg); opacity: .4; } }
.sdp-tally { position: absolute; right: 10px; bottom: 10px; display: flex; flex-direction: column; gap: 4px; align-items: flex-end; }
.sdp-tally span { padding: 3px 10px; border-radius: 99px; font: 800 12.5px var(--sans); }
.sdp-hit { background: rgba(63, 214, 154, .18); color: var(--mint); }
.sdp-miss { background: rgba(234, 227, 215, .12); color: var(--text); }

/* the alcohol test */
.sdp-bac { gap: 12px; max-width: 360px; margin: 0 auto; }
.sdp-night { --dark: 0; position: relative; width: 100%; padding: 10px 14px 8px; border-radius: 16px; background: linear-gradient(rgba(252, 192, 80, calc(.18 * (1 - var(--dark)))), rgba(18, 24, 41, 1)); border: 1px solid var(--line); }
.sdp-sky { position: relative; height: 34px; }
.sdp-sun, .sdp-moon { position: absolute; top: 4px; width: 24px; height: 24px; border-radius: 50%; }
.sdp-sun { left: 0; background: var(--gold); box-shadow: 0 0 14px rgba(252, 192, 80, .7); }
.sdp-moon { left: 50%; margin-left: -12px; background: transparent; box-shadow: inset -7px 3px 0 0 #D9D2EE; }
.sdp-track { position: relative; height: 44px; display: flex; align-items: center; cursor: pointer; }
.sdp-track::before { content: ''; position: absolute; left: 0; right: 0; height: 8px; border-radius: 4px; background: rgba(234, 227, 215, .14); }
.sdp-fill { position: absolute; left: 0; height: 8px; border-radius: 4px; background: var(--violet); width: 0; }
.sdp-knob { position: absolute; top: 50%; width: 44px; height: 44px; margin: -22px 0 0 -22px; border-radius: 50%; background: var(--gold); border: 3px solid #fff; box-shadow: 0 4px 14px rgba(0, 0, 0, .4); pointer-events: none; }
.sdp-knob::after { content: ''; position: absolute; left: 50%; top: 8px; width: 3px; height: 13px; margin-left: -1.5px; background: #1A1430; border-radius: 2px; }
.sdp-ends { display: flex; justify-content: space-between; font: 700 12.5px var(--sans); color: var(--dim); }
.sdp-meter { display: flex; align-items: center; gap: 18px; width: 100%; padding: 0 6px; }
.sdp-glass { position: relative; flex: none; width: 76px; height: 116px; border: 3px solid rgba(234, 227, 215, .55); border-top: 0; border-radius: 4px 4px 22px 22px; overflow: hidden; background: rgba(255, 255, 255, .04); }
.sdp-wine { position: absolute; left: 0; right: 0; bottom: 0; height: 0; background: linear-gradient(#C98C1B, #FCC050); transition: height .12s; }
.sdp-glass s { position: absolute; left: 0; right: 0; border-top: 2px dashed rgba(234, 227, 215, .6); text-decoration: none; }
.sdp-glass s em { position: absolute; left: 4px; top: -16px; font: 800 12px var(--sans); font-style: normal; color: var(--text); white-space: nowrap; }
.sdp-l5 { bottom: 45.5%; }
.sdp-l8 { bottom: 72.7%; }
.sdp-read { display: flex; flex-direction: column; gap: 1px; }
.sdp-read small { font: 700 12.5px var(--sans); color: var(--dim); }
.sdp-read b { font: 800 22px var(--sans); color: var(--text); margin-bottom: 6px; }
.sdp-read .sdp-pct { color: var(--gold); font-size: 30px; }
.sdp-note { font: 600 12.5px var(--sans); color: var(--faint); text-align: center; }

/* the night shift */
.sdp-track2 { display: block; width: 100%; max-width: 340px; height: auto; }
.sdp-tk { fill: #16301F; stroke: #2B2F3A; stroke-width: 24; }
.sdp-tkl { fill: none; stroke: rgba(234, 227, 215, .35); stroke-width: 1.5; stroke-dasharray: 6 8; }
.sdp-tcar, .sdp-rot { transition: transform .45s cubic-bezier(.3, .8, .3, 1); }
.sdp-tlab { fill: var(--dim); font: 800 11.5px var(--sans); letter-spacing: .06em; text-transform: uppercase; opacity: 0; transition: opacity .4s; }
.sdp-tlab.on { opacity: 1; }
.sdp-tcar rect { fill: #6F8CFF; transition: fill .3s; }
.sdp-tcar .sdp-tw { fill: #1A2136; }
.sdp-tcar.sdp-stop rect { fill: #A69F93; }
.sdp-tcar.sdp-stop .sdp-tw { fill: #1A2136; }
.sdp-tcap { font: 700 13px/1.3 var(--sans); color: var(--dim); text-align: center; }
.sdp-tcap b { color: var(--gold); }

/* the fix: two road signs over the road */
.sdp-signs { position: absolute; left: 10px; right: 10px; top: 14px; display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.sdp-sign { display: flex; flex-direction: column; align-items: flex-start; gap: 1px; min-height: 96px; padding: 8px 10px; border-radius: 10px; border: 3px solid #fff; color: #fff; text-align: left; box-shadow: 0 8px 18px rgba(0, 0, 0, .45); transition: opacity .3s, box-shadow .3s; }
.sdp-sign:disabled { cursor: default; }
.sdp-sign small { font: 800 12px var(--sans); letter-spacing: .04em; text-transform: uppercase; opacity: .85; }
.sdp-sign b { font: 800 18px/1.15 var(--sans); }
.sdp-sign span { font: 700 13px/1.25 var(--sans); }
.sdp-sign em { font: 800 12.5px/1.2 var(--sans); font-style: normal; margin-top: 3px; padding: 2px 6px; border-radius: 6px; background: rgba(10, 14, 26, .75); }
.sdp-sign em:empty { display: none; }
.sdp-rest { background: #1F4FA0; }
.sdp-keep { background: #1F6B3A; }
.sdp-sign.sdp-chosen { box-shadow: 0 0 0 3px var(--violet-bright), 0 8px 18px rgba(0, 0, 0, .45); }
.sdp-sign.sdp-best em { color: var(--gold); }

@media (max-height: 700px) {
  .sdp-cage { height: 150px; }
  .sdp-rat { height: 128px; }
  .sdp-ledge { top: 56px; left: 146px; }
  .sdp-patch { padding: 7px 6px; gap: 4px; }
  .sdp-glass { height: 96px; width: 66px; }
  .sdp-sky { height: 24px; }
  .sdp-sun, .sdp-moon { width: 18px; height: 18px; top: 2px; }
}