/* ==========================================================================
   Jogos de educação ambiental — Penso, Logo Destino
   Gerado a partir de jogos_pld.html. Estilos escopados em .jogos para não
   colidirem com o tema IMA (ima-tema.css / mapa.css): as variáveis ficam no
   container e as classes card/btn/active/chip/chips/num/topbar viraram j-*.
   ========================================================================== */

.jogos{
    --bg:#e9f3e6; --bg2:#dcefdd;
    --ink:#17332a; --ink-soft:#3d5a4d;
    --paper:#fbf8ef; --line:#cfe3cf;
    --blue:#1f86c9; --green:#2fa24e; --sun:#f6c445;
    --papel:#1e6fd9; --plastico:#e23b3b; --vidro:#2fa84f;
    --metal:#e8ad0e; --organico:#8b5e34; --rejeito:#78848f; --reversa:#f08a24;
    --radius:22px; --shadow:0 10px 24px rgba(23,51,42,.14);
    --display:"Fredoka",ui-rounded,"SF Pro Rounded","Segoe UI",system-ui,sans-serif;
    --body:"Nunito",ui-rounded,"Segoe UI",system-ui,sans-serif;
  }
  .jogos *{box-sizing:border-box}
  .jogos{overflow-x:hidden}
  .jogos{
    font-family:var(--body); color:var(--ink);
    background:
      radial-gradient(120% 80% at 15% -10%, #f4fbf1 0%, transparent 55%),
      radial-gradient(100% 70% at 110% 0%, #eaf7f7 0%, transparent 50%),
      linear-gradient(180deg,var(--bg),var(--bg2));
    min-height:100vh; -webkit-font-smoothing:antialiased;
  }
  .wrap{max-width:900px;margin:0 auto;padding:14px clamp(22px,7vw,52px) 42px;position:relative;z-index:1}
  /* respiro decorativo nas laterais (telas maiores) */
  .jogos::before,.jogos::after{content:"";position:fixed;top:0;bottom:0;width:64px;pointer-events:none;z-index:0;
    opacity:.35;background-repeat:repeat-y;background-position:center;background-size:40px 60px;
    background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='40' height='60' viewBox='0 0 40 60'><g fill='none' stroke='%232fa24e' stroke-width='2' stroke-linecap='round' opacity='.5'><path d='M20 6 C20 22 8 24 8 24 C8 24 12 12 20 6 Z' fill='%232fa24e' fill-opacity='.18'/><path d='M20 30 C20 46 32 48 32 48 C32 48 28 36 20 30 Z' fill='%232fa24e' fill-opacity='.18'/></g></svg>")}
  .jogos::before{left:0} .jogos::after{right:0;transform:scaleX(-1)}
  @media(max-width:820px){ .jogos::before,.jogos::after{display:none} }

  /* Top bar */
  .j-topbar{
    display:flex;align-items:center;gap:10px;
    padding:10px 14px;border-radius:var(--radius);
    background:var(--paper);box-shadow:var(--shadow);
    position:sticky;top:12px;z-index:20;
  }
  .brand{display:flex;align-items:center;gap:10px;font-family:var(--display);font-weight:700}
  .logo{
    width:40px;height:40px;border-radius:50%;background:var(--blue);
    display:grid;place-items:center;color:#fff;font-size:22px;flex:none;
    box-shadow:inset 0 -3px 0 rgba(0,0,0,.15);
  }
  .brand small{display:block;font-family:var(--body);font-weight:700;color:var(--ink-soft);font-size:11px;letter-spacing:.03em}
  .brand b{font-size:17px;line-height:1;color:var(--ink)}
  .spacer{flex:1}
  .pill{
    display:inline-flex;align-items:center;gap:6px;font-weight:800;
    background:#fff;border:2px solid var(--line);color:var(--ink);
    padding:7px 12px;border-radius:999px;font-size:14px;
  }
  .iconbtn{
    border:2px solid var(--line);background:#fff;border-radius:999px;
    width:42px;height:42px;font-size:18px;cursor:pointer;color:var(--ink);
    display:grid;place-items:center;transition:transform .1s, background .15s;
  }
  .iconbtn:hover{background:#f0f8ee}
  .iconbtn:active{transform:scale(.92)}
  .backbtn{
    border:2px solid var(--line);background:#fff;border-radius:999px;
    padding:8px 14px;font-weight:800;cursor:pointer;color:var(--ink);font-size:14px;
    display:inline-flex;gap:6px;align-items:center;
  }
  .backbtn:hover{background:#f0f8ee}

  /* Screens */
  .screen{display:none;animation:pop .28s ease}
  .screen.j-on{display:block}
  @keyframes pop{from{opacity:0;transform:translateY(8px) scale(.99)}to{opacity:1;transform:none}}

  /* Home hero */
  .hero{
    margin:18px 0 6px;padding:26px 24px;border-radius:26px;color:#fff;
    background:linear-gradient(135deg,#2fa24e,#1f86c9);
    box-shadow:var(--shadow);position:relative;overflow:hidden;
  }
  .hero .rec{position:absolute;right:-20px;top:-24px;font-size:150px;opacity:.14;transform:rotate(-12deg)}
  .hero h1{font-family:var(--display);font-weight:700;margin:0 0 6px;font-size:clamp(28px,6vw,40px);line-height:1.02}
  .hero p{margin:0;max-width:52ch;font-weight:600;opacity:.95;font-size:15px}
  .tag{display:inline-block;background:rgba(255,255,255,.22);padding:4px 12px;border-radius:999px;font-weight:800;font-size:12px;letter-spacing:.04em;margin-bottom:12px}

  .grid-cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:16px;margin-top:20px}
  .j-card{
    text-align:left;cursor:pointer;border:none;
    background:var(--paper);border-radius:var(--radius);
    padding:20px;box-shadow:var(--shadow);
    display:flex;gap:14px;align-items:flex-start;
    transition:transform .12s ease, box-shadow .12s ease;
    border:2px solid transparent;
  }
  .j-card:hover{transform:translateY(-4px);box-shadow:0 16px 30px rgba(23,51,42,.2)}
  .j-card:focus-visible{outline:none;border-color:var(--blue)}
  .j-card .ic{width:56px;height:56px;border-radius:16px;display:grid;place-items:center;font-size:30px;flex:none;color:#fff;box-shadow:inset 0 -4px 0 rgba(0,0,0,.15)}
  .j-card h3{font-family:var(--display);margin:2px 0 4px;font-size:20px}
  .j-card p{margin:0;color:var(--ink-soft);font-weight:600;font-size:13.5px;line-height:1.4}

  .home-foot{margin-top:22px;padding:16px 18px;border-radius:var(--radius);background:#fff;border:2px dashed var(--line);color:var(--ink-soft);font-weight:600;font-size:13.5px}
  .home-foot b{color:var(--green)}

  /* Generic panel */
  .panel{background:var(--paper);border-radius:26px;box-shadow:var(--shadow);padding:22px;margin-top:16px}
  .panel h2{font-family:var(--display);margin:0 0 4px;font-size:24px}
  .panel .sub{color:var(--ink-soft);font-weight:600;margin:0 0 14px;font-size:14px}

  .statrow{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:14px}
  .stat{background:#fff;border:2px solid var(--line);border-radius:14px;padding:8px 14px;font-weight:800;font-size:14px}
  .bar{height:12px;border-radius:999px;background:#e5efe3;overflow:hidden;margin-bottom:16px}
  .bar > i{display:block;height:100%;width:0;background:linear-gradient(90deg,var(--green),var(--blue));transition:width .35s ease}

  /* Sorting game */
  .itemcard{
    background:#fff;border:2px solid var(--line);border-radius:20px;
    padding:22px;text-align:center;margin-bottom:16px;position:relative;
  }
  .itemcard .emoji{font-size:74px;line-height:1;display:block}
  .itemcard .name{font-family:var(--display);font-size:22px;margin-top:8px}
  .shake{animation:shake .4s}
  @keyframes shake{0%,100%{transform:translateX(0)}20%{transform:translateX(-9px)}40%{transform:translateX(9px)}60%{transform:translateX(-6px)}80%{transform:translateX(6px)}}
  .pop-ok{animation:popok .4s}
  @keyframes popok{0%{transform:scale(1)}45%{transform:scale(1.06)}100%{transform:scale(1)}}

  .bins{display:grid;grid-template-columns:repeat(auto-fit,minmax(120px,1fr));gap:12px}
  .bin{
    border:none;cursor:pointer;color:#fff;border-radius:18px;padding:14px 8px;
    display:flex;flex-direction:column;align-items:center;gap:4px;
    font-family:var(--display);font-weight:600;font-size:15px;
    box-shadow:inset 0 -6px 0 rgba(0,0,0,.18);transition:transform .1s}
  .bin:hover{transform:translateY(-3px)}
  .bin:active{transform:translateY(0) scale(.97)}
  .bin:focus-visible{outline:3px solid var(--ink);outline-offset:2px}
  .bin .be{font-size:30px}
  .bin small{font-weight:700;font-family:var(--body);font-size:11px;opacity:.9}
  .bin.correct{animation:popok .4s;box-shadow:0 0 0 4px #fff, 0 0 0 8px currentColor}
  .bin.reveal{outline:4px dashed #fff;outline-offset:-8px}

  .feedback{min-height:26px;text-align:center;font-weight:800;margin-top:10px;font-size:15px}
  .feedback.ok{color:var(--green)}
  .feedback.no{color:var(--plastico)}

  /* Memory game */
  .memgrid{display:grid;grid-template-columns:repeat(4,1fr);gap:10px}
  @media(max-width:520px){.memgrid{gap:8px}}
  .mcard{aspect-ratio:3/4;border:none;background:none;cursor:pointer;perspective:600px}
  .mcard .inner{position:relative;width:100%;height:100%;transition:transform .35s;transform-style:preserve-3d}
  .mcard.flip .inner,.mcard.done .inner{transform:rotateY(180deg)}
  .mface{position:absolute;inset:0;border-radius:16px;display:grid;place-items:center;backface-visibility:hidden;box-shadow:inset 0 -5px 0 rgba(0,0,0,.15)}
  .mfront{background:linear-gradient(135deg,#2fa24e,#1f86c9);color:#fff;font-size:26px}
  .mback{background:#fff;border:2px solid var(--line);transform:rotateY(180deg);font-size:min(9vw,34px)}
  .mcard.done .mback{opacity:.5}
  .memhist{margin-top:16px;background:#fff;border:2px solid var(--line);border-radius:16px;padding:12px 14px;text-align:left;max-width:360px;margin-left:auto;margin-right:auto}
  .memhist>b{font-family:var(--display);font-size:15px}
  .memhist ul{list-style:none;margin:8px 0 0;padding:0}
  .memhist li{display:flex;justify-content:space-between;gap:8px;font-weight:800;font-size:13px;padding:5px 0;border-top:1px solid var(--line)}
  .memhist li span:first-child{color:var(--green)}
  .memhist .muted{color:var(--ink-soft);font-weight:600;font-size:13px;margin-top:6px}

  /* Rodapé institucional */
  .sitefoot{margin-top:18px;text-align:center;color:var(--ink-soft);font-weight:700;font-size:12.5px;line-height:1.75;
    border-top:1px solid var(--line);padding-top:16px}
  .sitefoot b{color:var(--ink);font-family:var(--display);font-size:14px}

  /* Quiz */
  .q{font-family:var(--display);font-size:20px;margin:0 0 14px;line-height:1.25}
  .opts{display:grid;gap:10px}
  .opt{
    text-align:left;border:2px solid var(--line);background:#fff;border-radius:16px;
    padding:14px 16px;font-weight:700;font-size:15px;cursor:pointer;color:var(--ink);
    transition:transform .08s, border-color .15s, background .15s}
  .opt:hover{border-color:var(--blue);background:#f2f9ff}
  .opt:active{transform:scale(.99)}
  .opt.ok{border-color:var(--green);background:#e9f8ec}
  .opt.no{border-color:var(--plastico);background:#fdeeee}
  .opt:disabled{cursor:default}
  .explain{margin-top:12px;padding:12px 14px;border-radius:14px;background:#f1f8f0;border:1px solid var(--line);font-weight:600;font-size:14px;color:var(--ink-soft)}

  /* Result */
  .result{text-align:center;padding:14px 6px}
  .result .big{font-size:64px}
  .result h2{font-family:var(--display);margin:6px 0 2px;font-size:26px}
  .result p{color:var(--ink-soft);font-weight:700;margin:0 0 16px}
  .j-btn{
    border:none;cursor:pointer;font-family:var(--display);font-weight:600;font-size:16px;
    padding:13px 22px;border-radius:999px;color:#fff;background:var(--green);
    box-shadow:inset 0 -5px 0 rgba(0,0,0,.18);transition:transform .1s}
  .j-btn:hover{filter:brightness(1.03)}
  .j-btn:active{transform:scale(.97)}
  .j-btn.blue{background:var(--blue)}
  .j-btn.ghost{background:#fff;color:var(--ink);border:2px solid var(--line);box-shadow:none}
  .btnrow{display:flex;gap:10px;justify-content:center;flex-wrap:wrap;margin-top:6px}

  .jogos canvas#confetti{position:fixed;inset:0;pointer-events:none;z-index:60}

  .credit{text-align:center;color:var(--ink-soft);font-weight:700;font-size:12px;margin-top:26px;opacity:.85}

  /* ===== Crie seu Coletor ===== */
  .substep{display:none;animation:pop .26s ease}
  .substep.j-on{display:block}
  .stepper{display:flex;gap:8px;margin:2px 0 6px;flex-wrap:wrap}
  .stepper .st{flex:1;min-width:110px;display:flex;align-items:center;gap:8px;background:#fff;
    border:2px solid var(--line);border-radius:14px;padding:9px 12px;font-weight:800;font-size:13px;color:var(--ink-soft)}
  .stepper .st .j-num{width:22px;height:22px;border-radius:50%;background:#e5efe3;color:var(--ink-soft);
    display:grid;place-items:center;font-family:var(--display);font-size:13px;flex:none}
  .stepper .st.j-on{border-color:var(--green);color:var(--ink)}
  .stepper .st.j-on .j-num{background:var(--green);color:#fff}
  .stepper .st.done .j-num{background:var(--blue);color:#fff}
  .cats{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:12px}
  .cat{cursor:pointer;border:3px solid transparent;border-radius:18px;padding:14px;color:#fff;text-align:left;
    box-shadow:inset 0 -6px 0 rgba(0,0,0,.18);transition:transform .1s;font-family:var(--display)}
  .cat:hover{transform:translateY(-3px)} .cat:active{transform:scale(.98)}
  .cat.sel{outline:4px solid var(--ink);outline-offset:2px}
  .cat .ce{font-size:26px}
  .cat b{display:block;font-size:16px;margin-top:2px}
  .cat small{font-family:var(--body);font-weight:700;font-size:12px;opacity:.92}
  .studio{display:grid;grid-template-columns:minmax(220px,1fr) 1.1fr;gap:18px}
  @media(max-width:640px){.studio{grid-template-columns:1fr}}
  .stage{background:#fff;border:2px solid var(--line);border-radius:20px;padding:16px}
  .binwrap{position:relative;display:grid;place-items:center;min-height:250px}
  .stage svg{width:min(60vw,220px);height:auto;display:block}
  .nameTag{margin-top:6px;text-align:center;font-family:var(--display);font-size:18px;background:#fff;
    border:2px solid var(--line);border-radius:999px;padding:4px 16px;display:inline-block}
  .stickers{position:absolute;inset:0;pointer-events:none}
  .stickers span{position:absolute;font-size:26px;filter:drop-shadow(0 2px 3px rgba(0,0,0,.2))}
  .controls label{display:block;font-weight:800;margin:14px 0 6px;font-size:14px}
  .controls input[type=text]{width:100%;border:2px solid var(--line);border-radius:14px;padding:12px 14px;
    font-family:var(--body);font-weight:700;font-size:16px;color:var(--ink)}
  .controls input:focus{outline:none;border-color:var(--blue)}
  .j-chips{display:flex;gap:8px;flex-wrap:wrap}
  .j-chip{border:2px solid var(--line);background:#fff;border-radius:12px;padding:9px 13px;font-weight:800;
    font-size:14px;cursor:pointer;color:var(--ink);transition:transform .08s}
  .j-chip:hover{background:#f0f8ee} .j-chip:active{transform:scale(.97)}
  .j-chip.on{border-color:var(--green);background:#e9f8ec}
  .ficha{background:#fff;border:2px solid var(--line);border-radius:20px;padding:20px}
  .ficha .head{display:flex;gap:16px;align-items:center;border-bottom:2px dashed var(--line);padding-bottom:14px;margin-bottom:14px}
  .ficha .head svg{width:110px;height:auto;flex:none}
  .ficha .head h3{font-family:var(--display);margin:0;font-size:24px}
  .ficha .head .meta{font-weight:800;font-size:14px;margin-top:4px}
  .ficha .cols{display:grid;grid-template-columns:1fr 1fr;gap:14px}
  @media(max-width:560px){.ficha .cols{grid-template-columns:1fr}}
  .box{border:2px solid var(--line);border-radius:14px;padding:12px 14px}
  .box h4{font-family:var(--display);margin:0 0 8px;font-size:16px}
  .box.can h4{color:var(--green)} .box.no h4{color:#e23b3b}
  .box ul{margin:0;padding-left:2px;list-style:none}
  .box li{font-weight:700;font-size:14px;padding:3px 0;display:flex;gap:8px;align-items:center}
  .mat{margin-top:14px}
  .steps{margin:14px 0 0;padding-left:20px}
  .steps li{font-weight:700;font-size:14.5px;padding:4px 0;line-height:1.35}
  .note{margin-top:14px;background:#f1f8f0;border:1px solid var(--line);border-radius:12px;padding:12px 14px;
    font-weight:700;font-size:13.5px;color:var(--ink-soft)}
  .swatch{display:inline-block;width:16px;height:16px;border-radius:5px;border:2px solid rgba(0,0,0,.15);vertical-align:-3px;margin-right:4px}
  .gal{display:grid;grid-template-columns:repeat(auto-fill,minmax(120px,1fr));gap:14px}
  .gcard{background:#fff;border:2px solid var(--line);border-radius:16px;padding:10px;text-align:center}
  .gcard svg{width:90px;height:auto}
  .gcard .gn{font-family:var(--display);font-size:14px;margin-top:4px}
  .empty{background:#fff;border:2px dashed var(--line);border-radius:16px;padding:26px;text-align:center;color:var(--ink-soft);font-weight:700}

  /* ===== Composteira Virtual ===== */
  .cpinfo{background:#f1f8f0;border:1.5px solid var(--line);border-radius:16px;padding:14px 16px;margin-bottom:14px}
  .cpinfo p{margin:0;font-weight:600;font-size:13.5px;color:var(--ink-soft);line-height:1.45}
  .cpinfo p b{color:var(--ink)}
  .cpinfo .more{display:none;margin-top:10px;border-top:1px dashed var(--line);padding-top:10px}
  .cpinfo.open .more{display:block}
  .cpinfo .toggle{margin-top:8px;border:none;background:none;color:var(--green);font-weight:800;font-size:13px;
    cursor:pointer;font-family:var(--body);padding:0}
  .cpmeters{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:12px}
  .gamebar{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:12px}

  .composter{position:relative;max-width:min(360px,92%);margin:0 auto 8px}
  .composter .lid{height:24px;margin:0 8px;border-radius:12px 12px 5px 5px;position:relative;z-index:3;
    background:linear-gradient(180deg,#9a6338,#75492a);box-shadow:inset 0 -5px 0 rgba(0,0,0,.22),0 3px 6px rgba(0,0,0,.25)}
  .composter .lid::after{content:"";position:absolute;left:50%;top:-9px;transform:translateX(-50%);
    width:52px;height:12px;border-radius:8px;background:#75492a;box-shadow:inset 0 -3px 0 rgba(0,0,0,.28)}
  .composter .body{position:relative;height:206px;margin-top:-3px;border-radius:8px 8px 18px 18px;overflow:hidden;
    background:repeating-linear-gradient(90deg,#835331 0 30px,#744627 30px 33px);
    box-shadow:inset 0 0 0 6px #5c3a20, inset 0 -10px 14px rgba(0,0,0,.25), 0 8px 16px rgba(0,0,0,.22)}
  .composter .window{position:absolute;left:18px;right:18px;top:16px;bottom:18px;border-radius:9px;overflow:hidden;
    background:linear-gradient(180deg,#efe7d4,#e8dcc2);box-shadow:inset 0 5px 12px rgba(0,0,0,.2)}
  .composter .base{position:absolute;left:0;right:0;bottom:0;height:12%;opacity:.85;
    background:repeating-linear-gradient(85deg,#c39235 0 8px,#b07f22 8px 16px)}
  .pile{position:absolute;left:0;right:0;bottom:0;height:12%;border-radius:45% 45% 0 0 / 26px 26px 0 0;
    background:linear-gradient(180deg,#7d5c31 0%,#5f4726 55%,#4a3820 100%);
    box-shadow:inset 0 6px 8px rgba(255,255,255,.12);transition:height .45s ease, background .9s ease}
  .pile::before{content:"";position:absolute;left:8%;right:8%;top:-3px;height:7px;border-radius:50%;
    background:rgba(255,255,255,.16)}
  .cpEmoji{position:absolute;left:6px;right:6px;bottom:12%;display:flex;justify-content:center;flex-wrap:wrap;
    gap:0 2px;pointer-events:none;transition:bottom .45s ease}
  .cpEmoji span{font-size:21px;line-height:1;filter:drop-shadow(0 1px 1px rgba(0,0,0,.3))}
  .cpWorms{position:absolute;left:0;right:0;bottom:5%;text-align:center;font-size:20px;letter-spacing:6px;
    opacity:0;transition:opacity .5s}
  .sprout{position:absolute;left:50%;bottom:8%;transform:translateX(-50%) scale(0);font-size:56px;z-index:2;
    transition:transform .7s cubic-bezier(.2,1.5,.4,1);transform-origin:bottom center}
  .composter .tap{position:absolute;left:50%;bottom:-3px;transform:translateX(-50%);width:16px;height:16px;z-index:4;
    background:#5a5a5a;border-radius:0 0 6px 6px;box-shadow:inset 0 -3px 0 rgba(0,0,0,.3)}
  .composter .tap::before{content:"";position:absolute;left:50%;top:-6px;transform:translateX(-50%);
    width:24px;height:7px;border-radius:4px;background:#6a6a6a}
  .composter .caption{text-align:center;font-weight:800;font-size:12px;color:var(--ink-soft);margin-top:8px}
  .tray{display:grid;grid-template-columns:repeat(auto-fit,minmax(82px,1fr));gap:10px;margin-top:14px}
  .trayitem{border:2px solid var(--line);background:#fff;border-radius:14px;padding:11px 5px;cursor:pointer;
    text-align:center;font-weight:800;font-size:11.5px;color:var(--ink);transition:transform .1s,border-color .15s;line-height:1.15}
  .trayitem .te{font-size:30px;display:block;margin-bottom:3px}
  .trayitem:hover{border-color:var(--green)}
  .trayitem:active{transform:scale(.95)}
  .trayitem:disabled{opacity:.35;cursor:default}
  .trayitem.bad{border-color:#e23b3b;background:#fdeeee;animation:shake .4s}
  .cpmeters{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:12px}

  /* ===== Quanto tempo pra decompor ===== */
  .scale{height:18px;border-radius:999px;position:relative;margin:16px 0 6px;
    background:linear-gradient(90deg,#8fd18f,#f6c445 35%,#f08a24 60%,#e23b3b 80%,#6b4a8a);box-shadow:inset 0 1px 3px rgba(0,0,0,.15)}
  .scale .pin{position:absolute;top:-6px;bottom:-6px;width:5px;background:#17332a;border-radius:3px;left:0;
    box-shadow:0 0 0 3px #fff;transition:left .7s ease}
  .scale .pinlbl{position:absolute;top:-30px;transform:translateX(-50%);background:#17332a;color:#fff;
    font-weight:800;font-size:11px;padding:3px 8px;border-radius:8px;white-space:nowrap;left:0;transition:left .7s ease}
  .scaleleg{display:flex;justify-content:space-between;font-size:10.5px;font-weight:800;color:var(--ink-soft);margin-top:2px}

  /* ===== Caminhão da Coleta (cidade) ===== */
  .dvroute{display:flex;align-items:center;gap:10px;margin:-2px 0 12px;font-weight:800;font-size:13px;color:var(--ink-soft)}
  .dvroute .bar{flex:1;margin:0}
  .dvscene{position:relative;height:clamp(250px,42vh,300px);border-radius:18px;overflow:hidden;
    border:2px solid var(--line);background:linear-gradient(180deg,#9fd5f1 0%,#c6e7f5 42%,#e6f3ee 74%)}
  .dvsun{position:absolute;top:16px;right:20px;width:42px;height:42px;border-radius:50%;z-index:1;
    background:radial-gradient(circle at 40% 38%,#fff6c4,#ffd65a);box-shadow:0 0 0 9px rgba(255,232,140,.32),0 0 34px #ffe38a}
  .dvcloud{position:absolute;left:110%;width:96px;height:45px;z-index:1;opacity:.95;
    background:url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20width%3D%27120%27%20height%3D%2756%27%20viewBox%3D%270%200%20120%2056%27%3E%3Cg%20fill%3D%27%23ffffff%27%3E%3Cellipse%20cx%3D%2738%27%20cy%3D%2736%27%20rx%3D%2728%27%20ry%3D%2717%27%2F%3E%3Cellipse%20cx%3D%2766%27%20cy%3D%2726%27%20rx%3D%2726%27%20ry%3D%2721%27%2F%3E%3Cellipse%20cx%3D%2790%27%20cy%3D%2737%27%20rx%3D%2721%27%20ry%3D%2714%27%2F%3E%3Crect%20x%3D%2716%27%20y%3D%2734%27%20width%3D%2792%27%20height%3D%2718%27%20rx%3D%279%27%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E") no-repeat center/contain;animation:dvcloud linear infinite}
  .dvhills{position:absolute;left:0;right:0;bottom:76px;height:90px;z-index:1;
    background:url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20width%3D%27720%27%20height%3D%2790%27%20viewBox%3D%270%200%20720%2090%27%3E%3Cpath%20d%3D%27M0%2C90%20L0%2C44%20C70%2C14%20140%2C10%20210%2C32%20C280%2C54%20330%2C16%20400%2C18%20C470%2C20%20520%2C50%20590%2C40%20C650%2C32%20690%2C30%20720%2C44%20L720%2C90%20Z%27%20fill%3D%27%23cde6d0%27%2F%3E%3Cpath%20d%3D%27M0%2C90%20L0%2C62%20C60%2C46%20110%2C40%20170%2C54%20C230%2C68%20290%2C44%20360%2C46%20C430%2C48%20480%2C70%20550%2C62%20C620%2C54%20680%2C52%20720%2C62%20L720%2C90%20Z%27%20fill%3D%27%23b6d9bd%27%2F%3E%3C%2Fsvg%3E") repeat-x;background-size:720px 90px;animation:dvhills 72s linear infinite}
  .dvfar{position:absolute;left:0;right:0;bottom:76px;height:120px;z-index:1;
    background:url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20width%3D%27480%27%20height%3D%27120%27%20viewBox%3D%270%200%20480%20120%27%3E%3Cg%20fill%3D%27%23b9cbdb%27%3E%3Crect%20x%3D%272%27%20y%3D%2713%27%20width%3D%2742%27%20height%3D%27107%27%20rx%3D%272%27%2F%3E%3Crect%20x%3D%2751%27%20y%3D%2712%27%20width%3D%2733%27%20height%3D%27108%27%20rx%3D%272%27%2F%3E%3Crect%20x%3D%2789%27%20y%3D%2734%27%20width%3D%2742%27%20height%3D%2786%27%20rx%3D%272%27%2F%3E%3Crect%20x%3D%27109.0%27%20y%3D%2720%27%20width%3D%272%27%20height%3D%2714%27%2F%3E%3Crect%20x%3D%27135%27%20y%3D%2722%27%20width%3D%2747%27%20height%3D%2798%27%20rx%3D%272%27%2F%3E%3Crect%20x%3D%27188%27%20y%3D%2771%27%20width%3D%2747%27%20height%3D%2749%27%20rx%3D%272%27%2F%3E%3Crect%20x%3D%27194%27%20y%3D%2763%27%20width%3D%2735%27%20height%3D%278%27%20rx%3D%272%27%2F%3E%3Crect%20x%3D%27239%27%20y%3D%2742%27%20width%3D%2734%27%20height%3D%2778%27%20rx%3D%272%27%2F%3E%3Crect%20x%3D%27282%27%20y%3D%2747%27%20width%3D%2742%27%20height%3D%2773%27%20rx%3D%272%27%2F%3E%3Crect%20x%3D%27335%27%20y%3D%2762%27%20width%3D%2728%27%20height%3D%2758%27%20rx%3D%272%27%2F%3E%3Crect%20x%3D%27341%27%20y%3D%2754%27%20width%3D%2716%27%20height%3D%278%27%20rx%3D%272%27%2F%3E%3Crect%20x%3D%27375%27%20y%3D%2740%27%20width%3D%2730%27%20height%3D%2780%27%20rx%3D%272%27%2F%3E%3Crect%20x%3D%27389.0%27%20y%3D%2726%27%20width%3D%272%27%20height%3D%2714%27%2F%3E%3Crect%20x%3D%27381%27%20y%3D%2732%27%20width%3D%2718%27%20height%3D%278%27%20rx%3D%272%27%2F%3E%3Crect%20x%3D%27413%27%20y%3D%2764%27%20width%3D%2728%27%20height%3D%2756%27%20rx%3D%272%27%2F%3E%3Crect%20x%3D%27419%27%20y%3D%2756%27%20width%3D%2716%27%20height%3D%278%27%20rx%3D%272%27%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E") repeat-x;background-size:480px 120px;animation:dvfar 22s linear infinite}
  .dvnear{position:absolute;left:0;right:0;bottom:76px;height:160px;z-index:2;
    background:url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20width%3D%27540%27%20height%3D%27160%27%20viewBox%3D%270%200%20540%20160%27%3E%3Crect%20x%3D%274%27%20y%3D%2732%27%20width%3D%2764%27%20height%3D%27128%27%20rx%3D%273%27%20fill%3D%27%2386c5ae%27%2F%3E%3Crect%20x%3D%272%27%20y%3D%2732%27%20width%3D%2768%27%20height%3D%277%27%20rx%3D%272%27%20fill%3D%27%236da18e%27%2F%3E%3Crect%20x%3D%2744%27%20y%3D%2718%27%20width%3D%2716%27%20height%3D%2711%27%20rx%3D%272%27%20fill%3D%27%239aa7b3%27%2F%3E%3Crect%20x%3D%2746%27%20y%3D%2729%27%20width%3D%272%27%20height%3D%273%27%20fill%3D%27%237d8994%27%2F%3E%3Crect%20x%3D%2756%27%20y%3D%2729%27%20width%3D%272%27%20height%3D%273%27%20fill%3D%27%237d8994%27%2F%3E%3Crect%20x%3D%2713.2%27%20y%3D%2746%27%20width%3D%279%27%20height%3D%2711%27%20rx%3D%271.5%27%20fill%3D%27%23f4e2b0%27%2F%3E%3Crect%20x%3D%2731.5%27%20y%3D%2746%27%20width%3D%279%27%20height%3D%2711%27%20rx%3D%271.5%27%20fill%3D%27%23fdf5da%27%2F%3E%3Crect%20x%3D%2749.8%27%20y%3D%2746%27%20width%3D%279%27%20height%3D%2711%27%20rx%3D%271.5%27%20fill%3D%27%23fdf5da%27%2F%3E%3Crect%20x%3D%2713.2%27%20y%3D%2765%27%20width%3D%279%27%20height%3D%2711%27%20rx%3D%271.5%27%20fill%3D%27%23fdf5da%27%2F%3E%3Crect%20x%3D%2731.5%27%20y%3D%2765%27%20width%3D%279%27%20height%3D%2711%27%20rx%3D%271.5%27%20fill%3D%27%23f4e2b0%27%2F%3E%3Crect%20x%3D%2749.8%27%20y%3D%2765%27%20width%3D%279%27%20height%3D%2711%27%20rx%3D%271.5%27%20fill%3D%27%23fdf5da%27%2F%3E%3Crect%20x%3D%2713.2%27%20y%3D%2784%27%20width%3D%279%27%20height%3D%2711%27%20rx%3D%271.5%27%20fill%3D%27%23fdf5da%27%2F%3E%3Crect%20x%3D%2731.5%27%20y%3D%2784%27%20width%3D%279%27%20height%3D%2711%27%20rx%3D%271.5%27%20fill%3D%27%23fdf5da%27%2F%3E%3Crect%20x%3D%2749.8%27%20y%3D%2784%27%20width%3D%279%27%20height%3D%2711%27%20rx%3D%271.5%27%20fill%3D%27%23f4e2b0%27%2F%3E%3Crect%20x%3D%2713.2%27%20y%3D%27103%27%20width%3D%279%27%20height%3D%2711%27%20rx%3D%271.5%27%20fill%3D%27%23fdf5da%27%2F%3E%3Crect%20x%3D%2731.5%27%20y%3D%27103%27%20width%3D%279%27%20height%3D%2711%27%20rx%3D%271.5%27%20fill%3D%27%23fdf5da%27%2F%3E%3Crect%20x%3D%2749.8%27%20y%3D%27103%27%20width%3D%279%27%20height%3D%2711%27%20rx%3D%271.5%27%20fill%3D%27%23fdf5da%27%2F%3E%3Crect%20x%3D%2729.0%27%20y%3D%27138%27%20width%3D%2714%27%20height%3D%2722%27%20rx%3D%272%27%20fill%3D%27%23537a6b%27%2F%3E%3Crect%20x%3D%2726.0%27%20y%3D%27135%27%20width%3D%2720%27%20height%3D%274%27%20rx%3D%271.5%27%20fill%3D%27%23649382%27%2F%3E%3Crect%20x%3D%2782%27%20y%3D%27134%27%20width%3D%275%27%20height%3D%2726%27%20fill%3D%27%237a5a3a%27%2F%3E%3Ccircle%20cx%3D%2784.5%27%20cy%3D%27122%27%20r%3D%2715%27%20fill%3D%27%235fa56f%27%2F%3E%3Ccircle%20cx%3D%2780%27%20cy%3D%27117%27%20r%3D%278%27%20fill%3D%27%2378bb86%27%2F%3E%3Crect%20x%3D%27102%27%20y%3D%2764%27%20width%3D%2778%27%20height%3D%2796%27%20rx%3D%273%27%20fill%3D%27%23efc988%27%2F%3E%3Crect%20x%3D%27100%27%20y%3D%2764%27%20width%3D%2782%27%20height%3D%277%27%20rx%3D%272%27%20fill%3D%27%23c3a46f%27%2F%3E%3Crect%20x%3D%27110.4%27%20y%3D%2778%27%20width%3D%279%27%20height%3D%2711%27%20rx%3D%271.5%27%20fill%3D%27%23f4e2b0%27%2F%3E%3Crect%20x%3D%27127.8%27%20y%3D%2778%27%20width%3D%279%27%20height%3D%2711%27%20rx%3D%271.5%27%20fill%3D%27%23fdf5da%27%2F%3E%3Crect%20x%3D%27145.2%27%20y%3D%2778%27%20width%3D%279%27%20height%3D%2711%27%20rx%3D%271.5%27%20fill%3D%27%23fdf5da%27%2F%3E%3Crect%20x%3D%27162.6%27%20y%3D%2778%27%20width%3D%279%27%20height%3D%2711%27%20rx%3D%271.5%27%20fill%3D%27%23fdf5da%27%2F%3E%3Crect%20x%3D%27110.4%27%20y%3D%2797%27%20width%3D%279%27%20height%3D%2711%27%20rx%3D%271.5%27%20fill%3D%27%23fdf5da%27%2F%3E%3Crect%20x%3D%27127.8%27%20y%3D%2797%27%20width%3D%279%27%20height%3D%2711%27%20rx%3D%271.5%27%20fill%3D%27%23f4e2b0%27%2F%3E%3Crect%20x%3D%27145.2%27%20y%3D%2797%27%20width%3D%279%27%20height%3D%2711%27%20rx%3D%271.5%27%20fill%3D%27%23fdf5da%27%2F%3E%3Crect%20x%3D%27162.6%27%20y%3D%2797%27%20width%3D%279%27%20height%3D%2711%27%20rx%3D%271.5%27%20fill%3D%27%23fdf5da%27%2F%3E%3Crect%20x%3D%27102.0%27%20y%3D%27130%27%20width%3D%279.1%27%20height%3D%279%27%20fill%3D%27%23e25b4f%27%2F%3E%3Ccircle%20cx%3D%27106.3%27%20cy%3D%27139%27%20r%3D%274.3%27%20fill%3D%27%23e25b4f%27%2F%3E%3Crect%20x%3D%27110.7%27%20y%3D%27130%27%20width%3D%279.1%27%20height%3D%279%27%20fill%3D%27%23ffffff%27%2F%3E%3Ccircle%20cx%3D%27115.0%27%20cy%3D%27139%27%20r%3D%274.3%27%20fill%3D%27%23ffffff%27%2F%3E%3Crect%20x%3D%27119.3%27%20y%3D%27130%27%20width%3D%279.1%27%20height%3D%279%27%20fill%3D%27%23e25b4f%27%2F%3E%3Ccircle%20cx%3D%27123.7%27%20cy%3D%27139%27%20r%3D%274.3%27%20fill%3D%27%23e25b4f%27%2F%3E%3Crect%20x%3D%27128.0%27%20y%3D%27130%27%20width%3D%279.1%27%20height%3D%279%27%20fill%3D%27%23ffffff%27%2F%3E%3Ccircle%20cx%3D%27132.3%27%20cy%3D%27139%27%20r%3D%274.3%27%20fill%3D%27%23ffffff%27%2F%3E%3Crect%20x%3D%27136.7%27%20y%3D%27130%27%20width%3D%279.1%27%20height%3D%279%27%20fill%3D%27%23e25b4f%27%2F%3E%3Ccircle%20cx%3D%27141.0%27%20cy%3D%27139%27%20r%3D%274.3%27%20fill%3D%27%23e25b4f%27%2F%3E%3Crect%20x%3D%27145.3%27%20y%3D%27130%27%20width%3D%279.1%27%20height%3D%279%27%20fill%3D%27%23ffffff%27%2F%3E%3Ccircle%20cx%3D%27149.7%27%20cy%3D%27139%27%20r%3D%274.3%27%20fill%3D%27%23ffffff%27%2F%3E%3Crect%20x%3D%27154.0%27%20y%3D%27130%27%20width%3D%279.1%27%20height%3D%279%27%20fill%3D%27%23e25b4f%27%2F%3E%3Ccircle%20cx%3D%27158.3%27%20cy%3D%27139%27%20r%3D%274.3%27%20fill%3D%27%23e25b4f%27%2F%3E%3Crect%20x%3D%27162.7%27%20y%3D%27130%27%20width%3D%279.1%27%20height%3D%279%27%20fill%3D%27%23ffffff%27%2F%3E%3Ccircle%20cx%3D%27167.0%27%20cy%3D%27139%27%20r%3D%274.3%27%20fill%3D%27%23ffffff%27%2F%3E%3Crect%20x%3D%27171.3%27%20y%3D%27130%27%20width%3D%279.1%27%20height%3D%279%27%20fill%3D%27%23e25b4f%27%2F%3E%3Ccircle%20cx%3D%27175.7%27%20cy%3D%27139%27%20r%3D%274.3%27%20fill%3D%27%23e25b4f%27%2F%3E%3Crect%20x%3D%27107%27%20y%3D%27145%27%20width%3D%2752%27%20height%3D%2715%27%20rx%3D%272%27%20fill%3D%27%23d6edf4%27%2F%3E%3Crect%20x%3D%27111%27%20y%3D%27147%27%20width%3D%273%27%20height%3D%2711%27%20fill%3D%27%23fff%27%20opacity%3D%27.7%27%2F%3E%3Crect%20x%3D%27163%27%20y%3D%27141%27%20width%3D%2712%27%20height%3D%2719%27%20rx%3D%271.5%27%20fill%3D%27%238f7851%27%2F%3E%3Crect%20x%3D%27189%27%20y%3D%2798%27%20width%3D%273%27%20height%3D%2762%27%20fill%3D%27%235d6872%27%2F%3E%3Cpath%20d%3D%27M190.5%2C98%20Q190.5%2C92%20183%2C92%27%20stroke%3D%27%235d6872%27%20stroke-width%3D%273%27%20fill%3D%27none%27%2F%3E%3Crect%20x%3D%27177%27%20y%3D%2792%27%20width%3D%279%27%20height%3D%275%27%20rx%3D%272%27%20fill%3D%27%23f7e3a0%27%2F%3E%3Crect%20x%3D%27196%27%20y%3D%2724%27%20width%3D%2758%27%20height%3D%27136%27%20rx%3D%273%27%20fill%3D%27%2386b3d9%27%2F%3E%3Crect%20x%3D%27194%27%20y%3D%2724%27%20width%3D%2762%27%20height%3D%277%27%20rx%3D%272%27%20fill%3D%27%236d92b1%27%2F%3E%3Crect%20x%3D%27224.0%27%20y%3D%274%27%20width%3D%272%27%20height%3D%2720%27%20fill%3D%27%237d8994%27%2F%3E%3Ccircle%20cx%3D%27225.0%27%20cy%3D%273%27%20r%3D%272.5%27%20fill%3D%27%23e36a5a%27%2F%3E%3Crect%20x%3D%27203.8%27%20y%3D%2738%27%20width%3D%279%27%20height%3D%2711%27%20rx%3D%271.5%27%20fill%3D%27%23f4e2b0%27%2F%3E%3Crect%20x%3D%27220.5%27%20y%3D%2738%27%20width%3D%279%27%20height%3D%2711%27%20rx%3D%271.5%27%20fill%3D%27%23fdf5da%27%2F%3E%3Crect%20x%3D%27237.2%27%20y%3D%2738%27%20width%3D%279%27%20height%3D%2711%27%20rx%3D%271.5%27%20fill%3D%27%23fdf5da%27%2F%3E%3Crect%20x%3D%27203.8%27%20y%3D%2757%27%20width%3D%279%27%20height%3D%2711%27%20rx%3D%271.5%27%20fill%3D%27%23fdf5da%27%2F%3E%3Crect%20x%3D%27220.5%27%20y%3D%2757%27%20width%3D%279%27%20height%3D%2711%27%20rx%3D%271.5%27%20fill%3D%27%23f4e2b0%27%2F%3E%3Crect%20x%3D%27237.2%27%20y%3D%2757%27%20width%3D%279%27%20height%3D%2711%27%20rx%3D%271.5%27%20fill%3D%27%23fdf5da%27%2F%3E%3Crect%20x%3D%27203.8%27%20y%3D%2776%27%20width%3D%279%27%20height%3D%2711%27%20rx%3D%271.5%27%20fill%3D%27%23fdf5da%27%2F%3E%3Crect%20x%3D%27220.5%27%20y%3D%2776%27%20width%3D%279%27%20height%3D%2711%27%20rx%3D%271.5%27%20fill%3D%27%23fdf5da%27%2F%3E%3Crect%20x%3D%27237.2%27%20y%3D%2776%27%20width%3D%279%27%20height%3D%2711%27%20rx%3D%271.5%27%20fill%3D%27%23f4e2b0%27%2F%3E%3Crect%20x%3D%27203.8%27%20y%3D%2795%27%20width%3D%279%27%20height%3D%2711%27%20rx%3D%271.5%27%20fill%3D%27%23fdf5da%27%2F%3E%3Crect%20x%3D%27220.5%27%20y%3D%2795%27%20width%3D%279%27%20height%3D%2711%27%20rx%3D%271.5%27%20fill%3D%27%23fdf5da%27%2F%3E%3Crect%20x%3D%27237.2%27%20y%3D%2795%27%20width%3D%279%27%20height%3D%2711%27%20rx%3D%271.5%27%20fill%3D%27%23fdf5da%27%2F%3E%3Crect%20x%3D%27218.0%27%20y%3D%27138%27%20width%3D%2714%27%20height%3D%2722%27%20rx%3D%272%27%20fill%3D%27%23536e86%27%2F%3E%3Crect%20x%3D%27215.0%27%20y%3D%27135%27%20width%3D%2720%27%20height%3D%274%27%20rx%3D%271.5%27%20fill%3D%27%236486a2%27%2F%3E%3Crect%20x%3D%27260%27%20y%3D%2748%27%20width%3D%2784%27%20height%3D%27112%27%20rx%3D%273%27%20fill%3D%27%23e6a99b%27%2F%3E%3Crect%20x%3D%27258%27%20y%3D%2748%27%20width%3D%2788%27%20height%3D%277%27%20rx%3D%272%27%20fill%3D%27%23bc8a7f%27%2F%3E%3Crect%20x%3D%27268%27%20y%3D%2740%27%20width%3D%2714%27%20height%3D%278%27%20rx%3D%271.5%27%20fill%3D%27%23b8c2cb%27%2F%3E%3Crect%20x%3D%27269.6%27%20y%3D%2762%27%20width%3D%279%27%20height%3D%2711%27%20rx%3D%271.5%27%20fill%3D%27%23f4e2b0%27%2F%3E%3Crect%20x%3D%27288.2%27%20y%3D%2762%27%20width%3D%279%27%20height%3D%2711%27%20rx%3D%271.5%27%20fill%3D%27%23fdf5da%27%2F%3E%3Crect%20x%3D%27306.8%27%20y%3D%2762%27%20width%3D%279%27%20height%3D%2711%27%20rx%3D%271.5%27%20fill%3D%27%23fdf5da%27%2F%3E%3Crect%20x%3D%27325.4%27%20y%3D%2762%27%20width%3D%279%27%20height%3D%2711%27%20rx%3D%271.5%27%20fill%3D%27%23fdf5da%27%2F%3E%3Crect%20x%3D%27269.6%27%20y%3D%2781%27%20width%3D%279%27%20height%3D%2711%27%20rx%3D%271.5%27%20fill%3D%27%23fdf5da%27%2F%3E%3Crect%20x%3D%27288.2%27%20y%3D%2781%27%20width%3D%279%27%20height%3D%2711%27%20rx%3D%271.5%27%20fill%3D%27%23f4e2b0%27%2F%3E%3Crect%20x%3D%27306.8%27%20y%3D%2781%27%20width%3D%279%27%20height%3D%2711%27%20rx%3D%271.5%27%20fill%3D%27%23fdf5da%27%2F%3E%3Crect%20x%3D%27325.4%27%20y%3D%2781%27%20width%3D%279%27%20height%3D%2711%27%20rx%3D%271.5%27%20fill%3D%27%23fdf5da%27%2F%3E%3Crect%20x%3D%27269.6%27%20y%3D%27100%27%20width%3D%279%27%20height%3D%2711%27%20rx%3D%271.5%27%20fill%3D%27%23fdf5da%27%2F%3E%3Crect%20x%3D%27288.2%27%20y%3D%27100%27%20width%3D%279%27%20height%3D%2711%27%20rx%3D%271.5%27%20fill%3D%27%23fdf5da%27%2F%3E%3Crect%20x%3D%27306.8%27%20y%3D%27100%27%20width%3D%279%27%20height%3D%2711%27%20rx%3D%271.5%27%20fill%3D%27%23f4e2b0%27%2F%3E%3Crect%20x%3D%27325.4%27%20y%3D%27100%27%20width%3D%279%27%20height%3D%2711%27%20rx%3D%271.5%27%20fill%3D%27%23fdf5da%27%2F%3E%3Crect%20x%3D%27260.0%27%20y%3D%27130%27%20width%3D%278.8%27%20height%3D%279%27%20fill%3D%27%233f9e5c%27%2F%3E%3Ccircle%20cx%3D%27264.2%27%20cy%3D%27139%27%20r%3D%274.2%27%20fill%3D%27%233f9e5c%27%2F%3E%3Crect%20x%3D%27268.4%27%20y%3D%27130%27%20width%3D%278.8%27%20height%3D%279%27%20fill%3D%27%23ffffff%27%2F%3E%3Ccircle%20cx%3D%27272.6%27%20cy%3D%27139%27%20r%3D%274.2%27%20fill%3D%27%23ffffff%27%2F%3E%3Crect%20x%3D%27276.8%27%20y%3D%27130%27%20width%3D%278.8%27%20height%3D%279%27%20fill%3D%27%233f9e5c%27%2F%3E%3Ccircle%20cx%3D%27281.0%27%20cy%3D%27139%27%20r%3D%274.2%27%20fill%3D%27%233f9e5c%27%2F%3E%3Crect%20x%3D%27285.2%27%20y%3D%27130%27%20width%3D%278.8%27%20height%3D%279%27%20fill%3D%27%23ffffff%27%2F%3E%3Ccircle%20cx%3D%27289.4%27%20cy%3D%27139%27%20r%3D%274.2%27%20fill%3D%27%23ffffff%27%2F%3E%3Crect%20x%3D%27293.6%27%20y%3D%27130%27%20width%3D%278.8%27%20height%3D%279%27%20fill%3D%27%233f9e5c%27%2F%3E%3Ccircle%20cx%3D%27297.8%27%20cy%3D%27139%27%20r%3D%274.2%27%20fill%3D%27%233f9e5c%27%2F%3E%3Crect%20x%3D%27302.0%27%20y%3D%27130%27%20width%3D%278.8%27%20height%3D%279%27%20fill%3D%27%23ffffff%27%2F%3E%3Ccircle%20cx%3D%27306.2%27%20cy%3D%27139%27%20r%3D%274.2%27%20fill%3D%27%23ffffff%27%2F%3E%3Crect%20x%3D%27310.4%27%20y%3D%27130%27%20width%3D%278.8%27%20height%3D%279%27%20fill%3D%27%233f9e5c%27%2F%3E%3Ccircle%20cx%3D%27314.6%27%20cy%3D%27139%27%20r%3D%274.2%27%20fill%3D%27%233f9e5c%27%2F%3E%3Crect%20x%3D%27318.8%27%20y%3D%27130%27%20width%3D%278.8%27%20height%3D%279%27%20fill%3D%27%23ffffff%27%2F%3E%3Ccircle%20cx%3D%27323.0%27%20cy%3D%27139%27%20r%3D%274.2%27%20fill%3D%27%23ffffff%27%2F%3E%3Crect%20x%3D%27327.2%27%20y%3D%27130%27%20width%3D%278.8%27%20height%3D%279%27%20fill%3D%27%233f9e5c%27%2F%3E%3Ccircle%20cx%3D%27331.4%27%20cy%3D%27139%27%20r%3D%274.2%27%20fill%3D%27%233f9e5c%27%2F%3E%3Crect%20x%3D%27335.6%27%20y%3D%27130%27%20width%3D%278.8%27%20height%3D%279%27%20fill%3D%27%23ffffff%27%2F%3E%3Ccircle%20cx%3D%27339.8%27%20cy%3D%27139%27%20r%3D%274.2%27%20fill%3D%27%23ffffff%27%2F%3E%3Crect%20x%3D%27265%27%20y%3D%27145%27%20width%3D%2758%27%20height%3D%2715%27%20rx%3D%272%27%20fill%3D%27%23d6edf4%27%2F%3E%3Crect%20x%3D%27269%27%20y%3D%27147%27%20width%3D%273%27%20height%3D%2711%27%20fill%3D%27%23fff%27%20opacity%3D%27.7%27%2F%3E%3Crect%20x%3D%27327%27%20y%3D%27141%27%20width%3D%2712%27%20height%3D%2719%27%20rx%3D%271.5%27%20fill%3D%27%238a655d%27%2F%3E%3Crect%20x%3D%27360%27%20y%3D%27134%27%20width%3D%275%27%20height%3D%2726%27%20fill%3D%27%237a5a3a%27%2F%3E%3Ccircle%20cx%3D%27362.5%27%20cy%3D%27122%27%20r%3D%2715%27%20fill%3D%27%235fa56f%27%2F%3E%3Ccircle%20cx%3D%27358%27%20cy%3D%27117%27%20r%3D%278%27%20fill%3D%27%2378bb86%27%2F%3E%3Crect%20x%3D%27380%27%20y%3D%2722%27%20width%3D%2762%27%20height%3D%27138%27%20rx%3D%273%27%20fill%3D%27%23aab4db%27%2F%3E%3Crect%20x%3D%27378%27%20y%3D%2722%27%20width%3D%2766%27%20height%3D%277%27%20rx%3D%272%27%20fill%3D%27%238b93b3%27%2F%3E%3Crect%20x%3D%27418%27%20y%3D%278%27%20width%3D%2716%27%20height%3D%2711%27%20rx%3D%272%27%20fill%3D%27%239aa7b3%27%2F%3E%3Crect%20x%3D%27420%27%20y%3D%2719%27%20width%3D%272%27%20height%3D%273%27%20fill%3D%27%237d8994%27%2F%3E%3Crect%20x%3D%27430%27%20y%3D%2719%27%20width%3D%272%27%20height%3D%273%27%20fill%3D%27%237d8994%27%2F%3E%3Crect%20x%3D%27388.8%27%20y%3D%2736%27%20width%3D%279%27%20height%3D%2711%27%20rx%3D%271.5%27%20fill%3D%27%23f4e2b0%27%2F%3E%3Crect%20x%3D%27406.5%27%20y%3D%2736%27%20width%3D%279%27%20height%3D%2711%27%20rx%3D%271.5%27%20fill%3D%27%23fdf5da%27%2F%3E%3Crect%20x%3D%27424.2%27%20y%3D%2736%27%20width%3D%279%27%20height%3D%2711%27%20rx%3D%271.5%27%20fill%3D%27%23fdf5da%27%2F%3E%3Crect%20x%3D%27388.8%27%20y%3D%2755%27%20width%3D%279%27%20height%3D%2711%27%20rx%3D%271.5%27%20fill%3D%27%23fdf5da%27%2F%3E%3Crect%20x%3D%27406.5%27%20y%3D%2755%27%20width%3D%279%27%20height%3D%2711%27%20rx%3D%271.5%27%20fill%3D%27%23f4e2b0%27%2F%3E%3Crect%20x%3D%27424.2%27%20y%3D%2755%27%20width%3D%279%27%20height%3D%2711%27%20rx%3D%271.5%27%20fill%3D%27%23fdf5da%27%2F%3E%3Crect%20x%3D%27388.8%27%20y%3D%2774%27%20width%3D%279%27%20height%3D%2711%27%20rx%3D%271.5%27%20fill%3D%27%23fdf5da%27%2F%3E%3Crect%20x%3D%27406.5%27%20y%3D%2774%27%20width%3D%279%27%20height%3D%2711%27%20rx%3D%271.5%27%20fill%3D%27%23fdf5da%27%2F%3E%3Crect%20x%3D%27424.2%27%20y%3D%2774%27%20width%3D%279%27%20height%3D%2711%27%20rx%3D%271.5%27%20fill%3D%27%23f4e2b0%27%2F%3E%3Crect%20x%3D%27388.8%27%20y%3D%2793%27%20width%3D%279%27%20height%3D%2711%27%20rx%3D%271.5%27%20fill%3D%27%23fdf5da%27%2F%3E%3Crect%20x%3D%27406.5%27%20y%3D%2793%27%20width%3D%279%27%20height%3D%2711%27%20rx%3D%271.5%27%20fill%3D%27%23fdf5da%27%2F%3E%3Crect%20x%3D%27424.2%27%20y%3D%2793%27%20width%3D%279%27%20height%3D%2711%27%20rx%3D%271.5%27%20fill%3D%27%23fdf5da%27%2F%3E%3Crect%20x%3D%27388.8%27%20y%3D%27112%27%20width%3D%279%27%20height%3D%2711%27%20rx%3D%271.5%27%20fill%3D%27%23fdf5da%27%2F%3E%3Crect%20x%3D%27406.5%27%20y%3D%27112%27%20width%3D%279%27%20height%3D%2711%27%20rx%3D%271.5%27%20fill%3D%27%23fdf5da%27%2F%3E%3Crect%20x%3D%27424.2%27%20y%3D%27112%27%20width%3D%279%27%20height%3D%2711%27%20rx%3D%271.5%27%20fill%3D%27%23fdf5da%27%2F%3E%3Crect%20x%3D%27404.0%27%20y%3D%27138%27%20width%3D%2714%27%20height%3D%2722%27%20rx%3D%272%27%20fill%3D%27%23696f87%27%2F%3E%3Crect%20x%3D%27401.0%27%20y%3D%27135%27%20width%3D%2720%27%20height%3D%274%27%20rx%3D%271.5%27%20fill%3D%27%237f87a4%27%2F%3E%3Crect%20x%3D%27448%27%20y%3D%2770%27%20width%3D%2786%27%20height%3D%2790%27%20rx%3D%273%27%20fill%3D%27%2396c99d%27%2F%3E%3Crect%20x%3D%27446%27%20y%3D%2770%27%20width%3D%2790%27%20height%3D%277%27%20rx%3D%272%27%20fill%3D%27%237aa480%27%2F%3E%3Crect%20x%3D%27458.0%27%20y%3D%2784%27%20width%3D%279%27%20height%3D%2711%27%20rx%3D%271.5%27%20fill%3D%27%23f4e2b0%27%2F%3E%3Crect%20x%3D%27477.0%27%20y%3D%2784%27%20width%3D%279%27%20height%3D%2711%27%20rx%3D%271.5%27%20fill%3D%27%23fdf5da%27%2F%3E%3Crect%20x%3D%27496.0%27%20y%3D%2784%27%20width%3D%279%27%20height%3D%2711%27%20rx%3D%271.5%27%20fill%3D%27%23fdf5da%27%2F%3E%3Crect%20x%3D%27515.0%27%20y%3D%2784%27%20width%3D%279%27%20height%3D%2711%27%20rx%3D%271.5%27%20fill%3D%27%23fdf5da%27%2F%3E%3Crect%20x%3D%27458.0%27%20y%3D%27103%27%20width%3D%279%27%20height%3D%2711%27%20rx%3D%271.5%27%20fill%3D%27%23fdf5da%27%2F%3E%3Crect%20x%3D%27477.0%27%20y%3D%27103%27%20width%3D%279%27%20height%3D%2711%27%20rx%3D%271.5%27%20fill%3D%27%23f4e2b0%27%2F%3E%3Crect%20x%3D%27496.0%27%20y%3D%27103%27%20width%3D%279%27%20height%3D%2711%27%20rx%3D%271.5%27%20fill%3D%27%23fdf5da%27%2F%3E%3Crect%20x%3D%27515.0%27%20y%3D%27103%27%20width%3D%279%27%20height%3D%2711%27%20rx%3D%271.5%27%20fill%3D%27%23fdf5da%27%2F%3E%3Crect%20x%3D%27448.0%27%20y%3D%27130%27%20width%3D%279.0%27%20height%3D%279%27%20fill%3D%27%231f86c9%27%2F%3E%3Ccircle%20cx%3D%27452.3%27%20cy%3D%27139%27%20r%3D%274.3%27%20fill%3D%27%231f86c9%27%2F%3E%3Crect%20x%3D%27456.6%27%20y%3D%27130%27%20width%3D%279.0%27%20height%3D%279%27%20fill%3D%27%23ffffff%27%2F%3E%3Ccircle%20cx%3D%27460.9%27%20cy%3D%27139%27%20r%3D%274.3%27%20fill%3D%27%23ffffff%27%2F%3E%3Crect%20x%3D%27465.2%27%20y%3D%27130%27%20width%3D%279.0%27%20height%3D%279%27%20fill%3D%27%231f86c9%27%2F%3E%3Ccircle%20cx%3D%27469.5%27%20cy%3D%27139%27%20r%3D%274.3%27%20fill%3D%27%231f86c9%27%2F%3E%3Crect%20x%3D%27473.8%27%20y%3D%27130%27%20width%3D%279.0%27%20height%3D%279%27%20fill%3D%27%23ffffff%27%2F%3E%3Ccircle%20cx%3D%27478.1%27%20cy%3D%27139%27%20r%3D%274.3%27%20fill%3D%27%23ffffff%27%2F%3E%3Crect%20x%3D%27482.4%27%20y%3D%27130%27%20width%3D%279.0%27%20height%3D%279%27%20fill%3D%27%231f86c9%27%2F%3E%3Ccircle%20cx%3D%27486.7%27%20cy%3D%27139%27%20r%3D%274.3%27%20fill%3D%27%231f86c9%27%2F%3E%3Crect%20x%3D%27491.0%27%20y%3D%27130%27%20width%3D%279.0%27%20height%3D%279%27%20fill%3D%27%23ffffff%27%2F%3E%3Ccircle%20cx%3D%27495.3%27%20cy%3D%27139%27%20r%3D%274.3%27%20fill%3D%27%23ffffff%27%2F%3E%3Crect%20x%3D%27499.6%27%20y%3D%27130%27%20width%3D%279.0%27%20height%3D%279%27%20fill%3D%27%231f86c9%27%2F%3E%3Ccircle%20cx%3D%27503.9%27%20cy%3D%27139%27%20r%3D%274.3%27%20fill%3D%27%231f86c9%27%2F%3E%3Crect%20x%3D%27508.2%27%20y%3D%27130%27%20width%3D%279.0%27%20height%3D%279%27%20fill%3D%27%23ffffff%27%2F%3E%3Ccircle%20cx%3D%27512.5%27%20cy%3D%27139%27%20r%3D%274.3%27%20fill%3D%27%23ffffff%27%2F%3E%3Crect%20x%3D%27516.8%27%20y%3D%27130%27%20width%3D%279.0%27%20height%3D%279%27%20fill%3D%27%231f86c9%27%2F%3E%3Ccircle%20cx%3D%27521.1%27%20cy%3D%27139%27%20r%3D%274.3%27%20fill%3D%27%231f86c9%27%2F%3E%3Crect%20x%3D%27525.4%27%20y%3D%27130%27%20width%3D%279.0%27%20height%3D%279%27%20fill%3D%27%23ffffff%27%2F%3E%3Ccircle%20cx%3D%27529.7%27%20cy%3D%27139%27%20r%3D%274.3%27%20fill%3D%27%23ffffff%27%2F%3E%3Crect%20x%3D%27453%27%20y%3D%27145%27%20width%3D%2760%27%20height%3D%2715%27%20rx%3D%272%27%20fill%3D%27%23d6edf4%27%2F%3E%3Crect%20x%3D%27457%27%20y%3D%27147%27%20width%3D%273%27%20height%3D%2711%27%20fill%3D%27%23fff%27%20opacity%3D%27.7%27%2F%3E%3Crect%20x%3D%27517%27%20y%3D%27141%27%20width%3D%2712%27%20height%3D%2719%27%20rx%3D%271.5%27%20fill%3D%27%235a785e%27%2F%3E%3C%2Fsvg%3E") repeat-x;background-size:540px 160px;animation:dvnear 9s linear infinite}
  .dvwalk{position:absolute;left:0;right:0;bottom:56px;height:20px;z-index:2;
    background:repeating-linear-gradient(90deg,#ece4cf 0 34px,#d9cfb6 34px 36px);
    box-shadow:inset 0 3px 0 #f7f2e4,inset 0 -5px 0 #b9ae93;animation:dvwalk .4s linear infinite}
  .dvroad{position:absolute;left:0;right:0;bottom:0;height:56px;z-index:2;
    background:linear-gradient(180deg,#5d6763,#515a56)}
  .dvroad::after{content:"";position:absolute;left:0;right:0;bottom:6px;height:2px;background:rgba(255,255,255,.16)}
  .dvlane{position:absolute;left:0;right:0;top:25px;height:5px;border-radius:3px;
    background:repeating-linear-gradient(90deg,#f3e6ae 0 28px,transparent 28px 54px);animation:dvlane .6s linear infinite}
  .dvtruck{position:absolute;left:6px;bottom:0;width:min(72%,330px);z-index:4}
  .dvtruck svg{display:block;width:100%;height:auto;overflow:visible;transform-origin:50% 90%;
    animation:dvbob .5s ease-in-out infinite;transition:rotate .25s ease}
  .dvtruck .wheel{transform-box:fill-box;transform-origin:center;animation:dvspin .66s linear infinite}
  .dvtruck .lid{transform-box:fill-box;transform-origin:0% 100%;transition:transform .2s ease}
  .dvtruck .lid.open{transform:rotate(-32deg)}
  .dvtruck .comp.flash{animation:dvflash .28s ease-in-out 4}
  .dvtruck .beacon{animation:dvbeacon .9s ease-in-out infinite}
  .dvtruck .beaconglow{animation:dvbeaconglow .9s ease-in-out infinite}
  .dvtruck .brake{transition:fill .2s}
  .dvtruck .brakeglow{transition:opacity .2s}
  .dvtruck .puff{transform-box:fill-box;transform-origin:center;opacity:0;animation:dvpuff 1.2s ease-out infinite}
  .dvtruck .p2{animation-delay:.4s} .dvtruck .p3{animation-delay:.8s}
  .dvscene.paused .dvhills,.dvscene.paused .dvfar,.dvscene.paused .dvnear,.dvscene.paused .dvwalk,
  .dvscene.paused .dvlane,.dvscene.paused .dvtruck .wheel,.dvscene.paused .dvtruck svg{animation-play-state:paused}
  .dvscene.paused .dvtruck svg{rotate:.8deg}
  .dvscene.paused .dvtruck .brake{fill:#ff4a3d}
  .dvscene.paused .dvtruck .brakeglow{opacity:.55}
  .dvscene.paused .dvtruck .puffs{opacity:.45}
  .dvres{position:absolute;left:110%;bottom:68px;z-index:5;pointer-events:none;
    font-size:clamp(34px,10vw,44px);line-height:1}
  .dvres .dvglyph{display:inline-block;filter:drop-shadow(0 3px 2px rgba(0,0,0,.25))}
  .dvres::before{content:"";position:absolute;left:12%;right:12%;bottom:-3px;height:7px;border-radius:50%;
    background:rgba(0,0,0,.2);z-index:-1}
  .dvres.wait .dvglyph{animation:dvresbob .7s ease-in-out infinite}
  .dvbubble{position:absolute;top:-34px;left:50%;transform:translateX(-50%);background:#fff;
    border:2px solid var(--line);border-radius:12px;padding:2px 10px;font-family:var(--display);
    font-weight:700;font-size:14px;color:var(--ink);white-space:nowrap;box-shadow:0 3px 6px rgba(0,0,0,.15)}
  .dvbubble::after{content:"";position:absolute;bottom:-8px;left:var(--tail,50%);transform:translateX(-50%);
    border:6px solid transparent;border-top-color:#fff}
  .dvplus{position:absolute;z-index:7;font-family:var(--display);font-weight:700;font-size:20px;color:#2fa24e;
    text-shadow:0 2px 0 #fff,0 0 6px #fff;pointer-events:none;animation:dvplus .9s ease-out forwards}
  .dvbins{display:grid;grid-template-columns:repeat(4,1fr);gap:6px;margin-top:12px}
  .dvbin{position:relative;border:none;border-radius:6px 6px 12px 12px;color:#fff;cursor:pointer;
    font-family:var(--display);font-weight:600;font-size:13px;padding:12px 3px 12px;
    box-shadow:inset 0 -7px 0 rgba(0,0,0,.22);display:flex;flex-direction:column;align-items:center;gap:3px;
    line-height:1.05;transition:transform .08s}
  .dvbin::before{content:"";position:absolute;top:-5px;left:16%;right:16%;height:7px;
    border-radius:4px 4px 0 0;background:rgba(0,0,0,.22)}
  .dvbin .bi{font-size:21px;filter:drop-shadow(0 1px 1px rgba(0,0,0,.25))}
  .dvbin:active{transform:translateY(2px)}
  .dvbin.glow{animation:dvglow 1s ease-in-out infinite}
  .dvbin.hit{animation:popok .4s} .dvbin.miss{animation:shake .4s}
  .dvbin.reveal{outline:3px dashed #fff;outline-offset:-7px}

  @keyframes dvspin{to{transform:rotate(360deg)}}
  @keyframes dvbob{0%,100%{transform:translateY(0)}50%{transform:translateY(-1.5px)}}
  @keyframes dvresbob{0%,100%{transform:translateY(0)}50%{transform:translateY(-5px)}}
  @keyframes dvlane{to{background-position-x:-54px}}
  @keyframes dvwalk{to{background-position-x:-36px}}
  @keyframes dvnear{to{background-position-x:-540px}}
  @keyframes dvfar{to{background-position-x:-480px}}
  @keyframes dvhills{to{background-position-x:-720px}}
  @keyframes dvcloud{from{left:110%}to{left:-40%}}
  @keyframes dvflash{50%{opacity:.35}}
  @keyframes dvbeacon{50%{fill:#ffd166}}
  @keyframes dvbeaconglow{0%,100%{opacity:0}50%{opacity:.45}}
  @keyframes dvpuff{0%{opacity:.75;transform:translate(0,0) scale(.5)}100%{opacity:0;transform:translate(-22px,-18px) scale(1.7)}}
  @keyframes dvplus{0%{opacity:0;transform:translate(-50%,0) scale(.7)}20%{opacity:1;transform:translate(-50%,-6px) scale(1.1)}100%{opacity:0;transform:translate(-50%,-38px) scale(1)}}
  @keyframes dvglow{0%,100%{box-shadow:inset 0 -7px 0 rgba(0,0,0,.22),0 0 0 0 rgba(255,255,255,0)}
    50%{box-shadow:inset 0 -7px 0 rgba(0,0,0,.22),0 0 0 4px rgba(255,255,255,.75)}}
  .tkhud .stat{min-width:auto}

  @media print{
    .jogos{background:#fff}
    .j-topbar,.credit,.btnrow,.no-print,.stepper{display:none!important}
    .wrap{max-width:none;padding:0}
    .panel{box-shadow:none;padding:0;margin:0}
    #coletor .panel > h2, #coletor .panel > .sub{display:none}
    .ficha{border:none}
  }
  @media (prefers-reduced-motion: reduce){
    .jogos *{animation:none!important;transition:none!important}
  }