/* The toy car: in front of the panes (a held pane is z 5), the ramp just behind the car. car.js places, turns and drops it. */
.car{position:absolute;left:0;top:0;z-index:8;cursor:grab;touch-action:none;user-select:none;will-change:transform;filter:drop-shadow(0 2px 2px rgba(0,0,0,.75))}
.car.drag{cursor:grabbing}.car>img{position:absolute;pointer-events:none;user-select:none}.car>.cb{left:0;top:0;width:100%;height:auto}.car>.cw{will-change:transform}
/* the ramp: Firefly's plywood and cinder blocks (RP3) placed by car.js; an invisible polygon over it is the handle for dragging */
.ramp{position:absolute;left:0;top:0;z-index:7;overflow:visible;pointer-events:none}.ramp .rpg{pointer-events:all;cursor:grab;fill:transparent}.ramp.drag .rpg{cursor:grabbing}.ramp.off .rpg{pointer-events:none}
.rkit{position:absolute;inset:0;z-index:7;pointer-events:none;filter:drop-shadow(0 2px 2px rgba(0,0,0,.7))}.rkit>*{position:absolute}.rstk{background-repeat:no-repeat,repeat-y}.rdeck{background-position:center;background-repeat:no-repeat}.rpl{display:block}
.rkit{transition:opacity .35s,visibility 0s}.rkit.off{opacity:0;visibility:hidden;transition:opacity .35s,visibility 0s .35s}
/* its toggle: the window buttons' bezel, the 01 off the door as the thumbnail; after the windows, before the sound button */
.cartg{all:unset;box-sizing:border-box;order:8;cursor:pointer;position:relative;width:50px;height:32px;border-radius:4px;border:1px solid;border-color:#e4e9e5 #9aa29c #5f6862;background:#020403;box-shadow:inset 0 0 0 1px rgba(0,0,0,.6),0 1px 2px #000;transition:transform .08s}
.cartg i{display:block;width:100%;height:100%;box-sizing:border-box;border-radius:3px;border:1px solid #000;background:url(art/tg-car.webp?v=2) center/cover #020403;filter:brightness(.22) saturate(.35);box-shadow:inset 0 2px 5px rgba(0,0,0,.95);transition:filter .25s,box-shadow .25s}
.cartg::after{content:"";position:absolute;inset:1px;border-radius:2px;pointer-events:none;background:linear-gradient(rgba(255,255,255,.22),rgba(255,255,255,.04) 45%,transparent 50%);box-shadow:inset 0 0 0 1px rgba(0,0,0,.6)}
.cartg:hover i{filter:brightness(.42) saturate(.55)}.cartg:active{transform:translateY(1px)}.cartg:focus-visible{outline:2px solid var(--seep);outline-offset:2px}
.cartg.on{box-shadow:inset 0 0 0 1px rgba(0,0,0,.6),0 1px 2px #000,0 0 10px rgba(43,238,116,.35)}
.cartg.on i{filter:brightness(1.18) saturate(1.1);box-shadow:inset 0 0 6px rgba(150,255,200,.45),inset 0 0 14px rgba(43,238,116,.25)}.cartg.on:hover i{filter:brightness(1.32) saturate(1.15)}
.car{transition:opacity .35s,visibility 0s}.car.off{opacity:0;visibility:hidden;pointer-events:none;transition:opacity .35s,visibility 0s .35s}
/* the extra button widens the window buttons by 59px: keep the navbar sign centered in the gap (was 126px / 535px in sullivania.css) */
@media(min-width:701px) and (max-width:1600px){.navsign{left:calc(50vw - 156px)}.navsign img{height:min(58px,calc((100vw - 594px)/11.68))}}
/* the 01 button's flyout (hold / right-click / arrow down), dressed like the window buttons' #fly: four ramp choices + car sound on/off */
.cartg::before{content:"";position:absolute;right:2px;bottom:2px;z-index:2;width:0;height:0;border-left:4px solid transparent;border-right:4px solid transparent;border-top:5px solid #e4e9e5;filter:drop-shadow(0 0 1px #000) drop-shadow(0 0 1px #000);opacity:.85;pointer-events:none}
.cartg{touch-action:none}.cartg.held{outline:2px solid #d9b45a;outline-offset:2px}
#carfly{position:fixed;z-index:40;display:flex;flex-direction:column;gap:8px;padding:10px;border-radius:7px;background:linear-gradient(#0d100e,#050605);box-shadow:0 0 0 1px #000,inset 0 1px 0 rgba(201,208,203,.16),0 14px 30px rgba(0,0,0,.85)}
#carfly[hidden]{display:none}
#carfly .tg.fl{width:84px;height:53px}#carfly .tg.fl i{filter:brightness(.75) saturate(.8)}#carfly .tg.fl:hover i,#carfly .tg.fl:focus-visible i{filter:brightness(1.15) saturate(1.05)}
#carfly .tg.fl.cur{outline:2px solid #2bee74;outline-offset:2px}#carfly .tg.fl.cur i{filter:brightness(1.15) saturate(1.05)}
.carsnd{all:unset;box-sizing:border-box;cursor:pointer;position:relative;width:53px;height:53px;border-radius:4px;border:1px solid;border-color:#e4e9e5 #9aa29c #5f6862;background:#020403;box-shadow:inset 0 0 0 1px rgba(0,0,0,.6),0 1px 2px #000}
.carsnd i{display:grid;place-items:center;width:100%;height:100%;box-sizing:border-box;border-radius:3px;border:1px solid #000;box-shadow:inset 0 2px 5px rgba(0,0,0,.95);font:400 24px/1 Alegreya,serif;font-style:normal;color:#5f6862}
.carsnd::after{content:"";position:absolute;inset:1px;border-radius:2px;pointer-events:none;background:linear-gradient(rgba(255,255,255,.22),rgba(255,255,255,.04) 45%,transparent 50%)}
.carsnd:hover i{color:#9aa29c}.carsnd:focus-visible{outline:2px solid var(--seep);outline-offset:2px}
.carsnd.on{box-shadow:inset 0 0 0 1px rgba(0,0,0,.6),0 1px 2px #000,0 0 10px rgba(43,238,116,.35)}.carsnd.on i{color:#c8ffdc;text-shadow:0 0 6px rgba(43,238,116,.9),0 1px 1px #000}
.rkit.none,.ramp.none{display:none}
@media(max-width:700px){#carfly{display:none}}
.frow{display:flex;gap:8px}.frow+.frow{padding-top:8px;border-top:1px solid rgba(201,208,203,.12)}
.rfill{background-repeat:repeat}
.rplw{position:absolute;left:0;top:0;width:100%;overflow:hidden;pointer-events:none}
.rplw>.rpl{position:absolute;display:block}
.carlink{align-self:center;margin-left:6px;padding:6px 12px;border-radius:6px;border:1px solid rgba(201,208,203,.3);color:#e3ebe6;text-decoration:none;font:15px Alegreya,system-ui,sans-serif;white-space:nowrap}.carlink:hover{border-color:#2bee74;color:#dfffe9}