/* ===================================================================
   characters.css — the easter-egg layer: walker NPC, vehicles, props,
   Benek the fetch dog, home base, touch-control UI (body.touch rules).
   Small-screen (@media max-width) rules live in mobile.css.
   =================================================================== */
  /* walkable character (drag / arrow keys, scrolls the page at the edges) */
  /* walker's home base (house + garage) — a wide-desktop flourish that fits the top-right pocket beside the terminal */
  #homebase{display:none;position:absolute;top:78px;right:84px;width:250px;aspect-ratio:393/442;z-index:94;pointer-events:none;
    filter:drop-shadow(0 10px 16px rgba(0,0,0,.45))}
  @media(min-width:1800px){ #homebase{display:block} }
  /* fetch dog (easter egg) — throw the ball, the Dalmatian fetches it back to your cursor */
  #dog{position:absolute;left:0;top:0;width:106px;height:93px;z-index:95;pointer-events:none;image-rendering:pixelated;
    background:url(dog-walk.png) no-repeat 0 0;filter:drop-shadow(0 3px 2px rgba(0,0,0,.4))}
  #dogcarry{position:absolute;left:0;top:0;width:55px;height:46px;z-index:95;pointer-events:none;display:none;image-rendering:pixelated;
    background:url(dog-carry-run.png) no-repeat 0 0;filter:drop-shadow(0 3px 2px rgba(0,0,0,.4))}
  #dogballsh{position:absolute;left:0;top:0;z-index:94;pointer-events:none;border-radius:50%;
    background:radial-gradient(ellipse at center,rgba(0,0,0,.40),rgba(0,0,0,0) 72%)}
  #dogball{position:absolute;left:0;top:0;width:26px;height:auto;z-index:96;cursor:grab;image-rendering:pixelated;transform-origin:50% 50%;will-change:transform;
    touch-action:none;-webkit-tap-highlight-color:transparent}
  #dogball:active{cursor:grabbing}
  #dogtag{position:absolute;left:0;top:0;z-index:96;transform:translate(-50%,-100%);pointer-events:none;
    font-family:ui-monospace,'Roboto Mono',Menlo,monospace;font-size:.56rem;font-weight:800;letter-spacing:.16em;text-transform:uppercase;
    color:#0f0e13;background:var(--lime);padding:2px 9px;border-radius:20px;white-space:nowrap;box-shadow:0 2px 7px rgba(0,0,0,.45);
    opacity:0;transition:opacity .3s var(--ease)}
  #dogtag.show{opacity:1}
  #dogtag::after{content:"";position:absolute;left:50%;top:100%;transform:translateX(-50%);border:4px solid transparent;border-top-color:var(--lime)}
  #walker{position:absolute;left:0;top:0;width:46px;height:73px;z-index:95;cursor:grab;touch-action:none}
  #walker:active{cursor:grabbing}
  #walker .wsprite{position:relative;z-index:1;width:100%;height:100%;background:url(onur-walk.png) no-repeat 0 0;background-size:184px 292px;
    image-rendering:auto;filter:drop-shadow(0 0 2px rgba(0,0,0,.6));will-change:transform}
  #walker.active .wsprite{filter:drop-shadow(0 0 7px rgba(214,255,63,.95)) drop-shadow(0 0 2px rgba(0,0,0,.6))}
  #walker .wshadow{position:absolute;left:50%;bottom:2px;z-index:0;width:32px;height:9px;border-radius:50%;
    background:rgba(0,0,0,.32);filter:blur(1.5px);transform:translateX(-50%);pointer-events:none}
  #walker::after{content:"click page to walk · tap me to jump";position:absolute;left:50%;top:-21px;transform:translateX(-50%);
    font-size:.56rem;font-weight:800;letter-spacing:.05em;text-transform:uppercase;color:var(--lime);white-space:nowrap;
    background:rgba(15,14,19,.92);padding:2px 8px;border-radius:6px;border:1px solid var(--line-2);
    opacity:0;transition:opacity .25s;pointer-events:none}
  #walker:hover::after,#walker.hint::after{opacity:1}
  #walker.walked::after{content:none}   /* once you've moved, the hint disappears */

  /* escort speech bubble — the guy narrates each section as he follows you down */
  .wbubble{position:absolute;left:50%;bottom:82px;transform:translate(-50%,6px);z-index:97;width:max-content;max-width:188px;text-align:center;
    background:rgba(15,14,19,.95);border:1.5px solid var(--lime);border-radius:9px;padding:7px 11px;
    font-family:ui-monospace,'Roboto Mono',Menlo,monospace;font-size:.62rem;font-weight:700;line-height:1.4;color:var(--ink);
    pointer-events:none;box-shadow:0 6px 20px rgba(0,0,0,.45),0 0 14px rgba(214,255,63,.18);
    opacity:0;transition:opacity .3s var(--ease),transform .3s var(--ease)}
  .wbubble.show{opacity:1;transform:translate(-50%,0)}
  .wbubble b{color:var(--lime)}
  .wbubble::before,.wbubble::after{content:"";position:absolute;left:50%;top:100%;border:6px solid transparent}
  .wbubble::after{transform:translateX(-50%);border-top-color:var(--lime)}
  .wbubble::before{transform:translateX(-50%) translateY(-1.6px);border-top-color:rgba(15,14,19,.95);z-index:1}
  @media(prefers-reduced-motion:reduce){.wbubble{transition:opacity .3s}}

  /* a word/tile the character is standing on pops forward in 3D */
  .plat-on{ transform:translateY(-3px) scale(1.03) !important; z-index:6 !important; position:relative;
    box-shadow:0 10px 22px rgba(0,0,0,.4), inset 0 0 0 1.5px var(--lime) !important;
    transition:transform .14s var(--ease), box-shadow .14s var(--ease) }
  /* the conveyor pops forward more — a raised, tilted 3D belt */
  .marquee.plat-on{ transform:perspective(600px) rotateX(6deg) translateY(-9px) scale(1.015) !important; z-index:6 !important;
    border-radius:12px; background:rgba(214,255,63,.06);
    box-shadow:0 20px 38px rgba(0,0,0,.55), 0 0 0 2px var(--lime) inset, 0 0 22px rgba(214,255,63,.25) !important }

  /* footsteps left while walking */
  .footstep{position:absolute;width:10px;height:6px;border-radius:50%;background:rgba(214,255,63,.5);
    box-shadow:0 0 7px rgba(214,255,63,.55);z-index:94;pointer-events:none;transform:translate(-50%,-50%);animation:fadestep 1.2s ease forwards}
  @keyframes fadestep{0%{opacity:.75}100%{opacity:0;transform:translate(-50%,-50%) scale(.5)}}

  /* character picker (choose your walker) */
  #charPick{position:fixed;left:16px;bottom:16px;z-index:96;display:flex;flex-direction:column;align-items:center;gap:6px;
    padding:9px 10px;background:rgba(15,14,19,.82);border:1px solid var(--line-2);border-radius:14px;backdrop-filter:blur(7px);
    box-shadow:0 10px 30px rgba(0,0,0,.4)}
  #charPick .cphead{font-size:.54rem;font-weight:800;letter-spacing:.16em;text-transform:uppercase;color:var(--muted)}
  #charPick .cprow{display:flex;gap:6px}
  .cpick{position:relative;width:46px;height:62px;padding:0;border:1.5px solid var(--line-2);border-radius:9px;background:rgba(255,255,255,.03);
    cursor:pointer;overflow:hidden;transition:transform .15s,border-color .15s,box-shadow .15s}
  .cpick:hover{transform:translateY(-2px);border-color:var(--faint)}
  .cpick.active{border-color:var(--lime);box-shadow:0 0 12px rgba(214,255,63,.45),inset 0 0 14px rgba(214,255,63,.1)}
  .cpick .cthumb{position:absolute;left:50%;top:5px;transform:translateX(-50%);width:42px;height:67px;
    background-repeat:no-repeat;background-position:0 0;background-size:168px 266px;image-rendering:auto}
  .cpick .cname{position:absolute;left:0;right:0;bottom:2px;text-align:center;font-size:.46rem;font-weight:800;
    letter-spacing:.05em;text-transform:uppercase;color:var(--faint);text-shadow:0 1px 2px #000}
  .cdriverow{display:flex;gap:4px;margin-top:3px}
  .cdrive{flex:1;background:rgba(214,255,63,.12);color:var(--lime);border:1px solid var(--line-2);
    border-radius:8px;font-weight:800;font-size:.56rem;letter-spacing:.12em;text-transform:uppercase;padding:6px 0;cursor:pointer;transition:background .15s}
  .cdrive:hover{background:rgba(214,255,63,.22)}
  .cdrive.on{background:var(--lime);color:#0f0e13}
  .cevo{width:28px;background:rgba(214,255,63,.08);color:var(--lime);border:1px solid var(--line-2);border-radius:8px;
    font-size:.7rem;cursor:pointer;transition:background .15s}
  .cevo:hover{background:rgba(214,255,63,.2)}
  .cevo.on{background:var(--lime);color:#0f0e13;box-shadow:0 0 10px rgba(214,255,63,.5)}
  /* drag-onto-page dock (ramps + obstacles) */
  .propdock{display:flex;flex-direction:column;align-items:center;gap:4px;margin-top:5px;padding-top:6px;border-top:1px solid var(--line-2)}
  .proprow{display:flex;flex-wrap:wrap;gap:5px;justify-content:center;max-width:160px}
  .dockprop{width:33px;height:38px;padding:0;border:1.5px dashed var(--line-2);border-radius:8px;background:rgba(214,255,63,.05);
    cursor:grab;touch-action:none;background-repeat:no-repeat;background-position:center;background-size:78% 78%;
    transition:transform .15s,border-color .15s}
  .dockprop[data-prop="ramp"]{background-image:url(ramp.png);background-size:58% 80%}
  .dockprop[data-prop="obstacle"]{background-size:84% 84%;image-rendering:pixelated}
  .dockprop:hover{transform:translateY(-2px);border-color:var(--lime)}
  .dockprop:active{cursor:grabbing}
  /* ---- mobile touch controls (only on touch, and only in "play" mode so the CTAs/footer stay tappable) ---- */
  #touchpad{display:none;-webkit-user-select:none;user-select:none;-webkit-touch-callout:none}
  body.touch.playing #touchpad{display:block}
  /* play/exit launcher FAB — always available on touch; toggles the control overlay */
  #tplay{display:none}
  body.touch #tplay{display:flex;position:fixed;right:14px;bottom:calc(14px + env(safe-area-inset-bottom,0px));z-index:99;
    width:48px;height:48px;border-radius:50%;font-size:1.25rem;box-shadow:0 6px 18px rgba(0,0,0,.42)}
  body.touch.playing #tplay{bottom:auto;top:calc(74px + env(safe-area-inset-top,0px))}
  body.touch:not(.playing) #charPick{display:none}   /* hide the dock too until the user starts playing */
  .tbtn{border:1.5px solid var(--line-2);background:rgba(15,14,19,.55);color:var(--lime);font-weight:800;
    letter-spacing:.03em;text-transform:uppercase;touch-action:none;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);
    cursor:pointer;-webkit-tap-highlight-color:transparent;display:flex;align-items:center;justify-content:center;text-align:center;
    -webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;-webkit-touch-callout:none}
  .tbtn:active{background:var(--lime);color:#0f0e13}
  /* steering — bottom-left */
  #tsteer{position:fixed;left:12px;bottom:calc(14px + env(safe-area-inset-bottom,0px));z-index:97;display:flex;gap:8px}
  .tarrow{width:60px;height:62px;border-radius:14px;font-size:1.25rem}
  /* reverse + gas + e-brake pedals — bottom-right */
  #tpedals{position:fixed;right:12px;bottom:calc(14px + env(safe-area-inset-bottom,0px));z-index:97;display:flex;flex-direction:column;gap:7px;align-items:stretch}
  .tpedalrow{display:flex;gap:8px}
  .tpedal{width:60px;height:72px;border-radius:14px;font-size:.5rem;line-height:1.15;padding:4px}
  .trev{height:34px;border-radius:12px;font-size:.52rem;border-color:rgba(91,130,255,.55);color:var(--blue)}
  .trev:active{background:var(--blue);color:#0f0e13}
  #tgas{color:#0f0e13;background:rgba(214,255,63,.85);border-color:var(--lime)}
  #tgas:active{background:#fff}
  #tbrake{color:var(--coral);border-color:rgba(255,90,71,.55)}
  #tbrake:active{background:var(--coral);color:#0f0e13}
  /* drive / exit — above the steering pad */
  #tdrive2{position:fixed;left:16px;bottom:calc(84px + env(safe-area-inset-bottom,0px));z-index:97;width:52px;height:52px;border-radius:50%;font-size:1.35rem}
  /* collapsible dock on touch */
  .dock-toggle{display:none}
  body.touch .dock-toggle{display:flex;align-items:center;justify-content:center;gap:6px;width:100%;background:none;border:none;
    color:var(--lime);font-weight:800;font-size:.56rem;letter-spacing:.12em;text-transform:uppercase;cursor:pointer;padding:3px 2px}
  body.touch #charPick.collapsed .cphead,
  body.touch #charPick.collapsed .cprow,
  body.touch #charPick.collapsed .cdriverow,
  body.touch #charPick.collapsed .propdock{display:none}
  body.touch .dockprop{width:46px;height:52px;background-size:80% 80%}   /* bigger touch targets */

  /* drivable vehicle (always parked on the page; click to drive) */
  #vehicle{position:absolute;left:0;top:0;width:108px;height:108px;z-index:95;display:none;pointer-events:none}
  #vehicle.show{display:block}
  #vehicle.parked{pointer-events:auto;cursor:pointer}
  #vehicle.parked::after{content:"drive me";position:absolute;left:50%;top:-12px;transform:translateX(-50%);
    font-size:.5rem;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:var(--lime);white-space:nowrap;
    background:rgba(15,14,19,.9);padding:2px 7px;border-radius:6px;border:1px solid var(--line-2);opacity:0;transition:opacity .2s;pointer-events:none;z-index:2}
  #vehicle.parked:hover::after{opacity:1}
  body.touch #vehicle.parked::after{opacity:1}   /* no hover on phones: keep the "drive me" hint visible while parked */
  #vehicle .vsprite{position:absolute;inset:0;background:no-repeat center/contain;image-rendering:auto;
    filter:drop-shadow(0 2px 2px rgba(0,0,0,.55));will-change:transform}
  #vehicle .vshadow{position:absolute;left:50%;top:54%;width:66px;height:35px;border-radius:50%;
    background:rgba(0,0,0,.32);filter:blur(3px);transform:translate(-50%,-50%);pointer-events:none}
  #vehicle.evo .vsprite{filter:drop-shadow(0 0 7px rgba(214,255,63,.6)) drop-shadow(0 2px 2px rgba(0,0,0,.6))}
  #vehicle.evo .vshadow{background:rgba(214,255,63,.2);filter:blur(5px)}
  /* ambulance emergency lightbar — glowing red/blue, alternating (only when the ambulance is active) */
  #vehicle .vlight{position:absolute;top:34%;width:7%;height:7%;border-radius:50%;display:none;pointer-events:none}
  #vehicle.amb .vlight{display:block;animation:emerglight .8s linear infinite}
  #vehicle.amb .vlight.blue{left:35%;background:#5b82ff;box-shadow:0 0 5px 2px rgba(91,130,255,.95),0 0 11px 5px rgba(91,130,255,.5)}
  #vehicle.amb .vlight.red{left:56%;background:#ff3b3b;box-shadow:0 0 5px 2px rgba(255,59,59,.95),0 0 11px 5px rgba(255,59,59,.5);animation-delay:.4s}
  @keyframes emerglight{0%,42%{opacity:1}48%,100%{opacity:.12}}
  /* launch ramps (drag to place, tap to rotate, drag to dock to remove) */
  .ramp{position:absolute;z-index:90;width:46px;height:58px;transform:translate(-50%,-50%);pointer-events:auto;cursor:grab;touch-action:none;
    background:url(ramp.png) no-repeat center/contain;image-rendering:auto;
    filter:drop-shadow(0 0 9px rgba(214,255,63,.3)) drop-shadow(0 5px 8px rgba(0,0,0,.45))}
  .ramp.dragging,.obstacle.dragging{cursor:grabbing;z-index:99;filter:drop-shadow(0 0 12px rgba(214,255,63,.6)) drop-shadow(0 8px 12px rgba(0,0,0,.5))}
  /* climbable obstacles (8-bit props you place; sprite set via --obs) */
  .obstacle{position:absolute;z-index:89;width:74px;height:60px;transform:translate(-50%,-100%);pointer-events:auto;cursor:grab;touch-action:none;
    background:var(--obs,none) no-repeat center bottom/contain;image-rendering:pixelated;
    filter:drop-shadow(0 5px 7px rgba(0,0,0,.5))}
  .dust{position:absolute;width:9px;height:9px;border-radius:50%;background:rgba(205,205,215,.5);z-index:93;pointer-events:none;
    transform:translate(-50%,-50%);animation:dustpuff .5s ease-out forwards}
  @keyframes dustpuff{0%{opacity:.6}100%{opacity:0;transform:translate(-50%,-50%) scale(2.3)}}
  .flame{position:absolute;z-index:94;pointer-events:none;background:no-repeat center/contain;image-rendering:pixelated;transform:translate(-50%,-50%);will-change:transform,opacity,left,top}
  .tiremark{position:absolute;width:9px;height:22px;z-index:88;pointer-events:none;
    background:url(tiremark.png) no-repeat center/100% 100%;image-rendering:pixelated;
    transform:translate(-50%,-50%);animation:tirefade 6s linear forwards}
  @keyframes tirefade{0%,55%{opacity:.62}100%{opacity:0}}