/* =============================
   css/scenes/belt.css
   ============================= */
/* ===== cena: esteiras (fase 1, jogo) ===== */
#scene-belt{background:repeating-linear-gradient(90deg,#0000 0 58px,#0000001a 58px 60px),linear-gradient(#cfd8dc 0 452px,#6b6f78 452px)}
#scene-belt::before{content:"";position:absolute;left:0;right:0;top:452px;height:6px;background:var(--k)}

#scene-belt .char.h{left:100px;top:225px;width:150px;height:225px;z-index:2}
#scene-belt .lane{inset:0;z-index:1;pointer-events:none}
.box{position:absolute;left:0;top:364px;width:34px;height:34px;background:#d9a05b;border:3px solid var(--k);border-radius:4px;box-shadow:3px 3px 0 var(--k)}
.box::before{content:"";position:absolute;left:50%;margin-left:-4px;top:0;bottom:0;width:8px;background:#f2cf8a}

#scene-belt .belt{top:396px;height:28px;width:142px;background:repeating-linear-gradient(90deg,#444 0 14px,#2b2b2b 14px 28px);border:4px solid var(--k)}
#scene-belt .belt::after{content:"";position:absolute;left:14px;right:14px;top:24px;height:32px;background:#555;border:4px solid var(--k)}
#scene-belt .belt.l{left:0;border-left:0;animation:beltL .5s linear infinite}
#scene-belt .belt.r{left:208px;border-right:0;animation:beltR .5s linear infinite}
@keyframes beltL{to{background-position:28px 0}}
@keyframes beltR{to{background-position:-28px 0}}
#scene-belt .zone{top:354px;width:72px;height:50px;border:3px dashed #fff;border-radius:10px;background:#3ecf5a55}
#scene-belt .zl{left:82px}
#scene-belt .zr{left:196px}

/* relógio de parede: marcando 21:00 */
#scene-belt .wclock{left:12px;top:12px;width:66px;height:66px;border-radius:50%;border:4px solid var(--k);box-shadow:3px 3px 0 var(--k);background:repeating-conic-gradient(var(--k) 0 3deg,#fff 3deg 30deg)}
#scene-belt .wclock::before{content:"";position:absolute;inset:5px;border-radius:50%;background:#fff}
#scene-belt .wclock i{position:absolute;left:50%;bottom:50%;background:var(--k);transform-origin:50% 100%;border-radius:2px}
#scene-belt .wclock .hh{width:4px;height:16px;margin-left:-2px;transform:rotate(270deg)}
#scene-belt .wclock .mh{width:3px;height:24px;margin-left:-1.5px}
#scene-belt .wclock .cd{width:8px;height:8px;margin-left:-4px;bottom:calc(50% - 4px);border-radius:50%}

#scene-belt .cal{right:12px;top:12px;width:66px;background:#fff;border:4px solid var(--k);border-radius:8px;box-shadow:3px 3px 0 var(--k);text-align:center;overflow:hidden}
#scene-belt .cal b{display:block;background:var(--r);color:#fff;font:900 11px "PDDText","Comic Sans MS",sans-serif;padding:2px 0;border-bottom:3px solid var(--k)}
#scene-belt .cal span{display:block;font:900 20px "PDDTitle",Impact,sans-serif;padding:4px 0}

#scene-belt .fat{left:90px;right:90px;top:12px}
#scene-belt .fat label{display:block;font:900 11px "PDDText","Comic Sans MS",sans-serif;text-align:center;margin-bottom:3px}
#scene-belt .fat em{font-style:normal}
#scene-belt .bar{height:24px;background:#fff;border:4px solid var(--k);border-radius:12px;overflow:hidden;box-shadow:3px 3px 0 var(--k)}
#scene-belt .fill{display:block;height:100%;width:0;background:linear-gradient(90deg,var(--g),var(--y) 55%,var(--r));background-size:162px 100%;transition:width .2s}
#scene-belt .goal{left:90px;right:90px;top:72px;text-align:center;font:900 13px "PDDText","Comic Sans MS",sans-serif;background:var(--y);border:3px solid var(--k);border-radius:10px;padding:2px 6px;box-shadow:3px 3px 0 var(--k)}

#scene-belt .hint{left:0;right:0;top:466px;text-align:center;font:700 12px "PDDText","Comic Sans MS",sans-serif;color:#fff;text-shadow:1px 1px 0 var(--k)}
#scene-belt .pbtn{top:494px;width:152px;height:104px;font-size:22px}
#scene-belt .pl{left:14px}
#scene-belt .pr{left:184px}

#scene-belt .msg{left:20px;right:20px;top:150px;text-align:center;z-index:5;font:900 30px "PDDTitle",Impact,sans-serif}
#scene-belt .msg.big{font-size:96px;color:var(--y);text-shadow:3px 0px 0 var(--k),-3px 0px 0 var(--k),0px 3px 0 var(--k),0px -3px 0 var(--k),3px 3px 0 var(--k),-3px -3px 0 var(--k),3px -3px 0 var(--k),-3px 3px 0 var(--k),5px 5px 0 var(--k)}
#scene-belt .msg.warn{background:var(--w);border:4px solid var(--k);border-radius:18px;box-shadow:6px 6px 0 var(--k);padding:14px;color:#d90429}
#scene-belt .msg small{display:block;font:700 14px "PDDText","Comic Sans MS",sans-serif;color:var(--k);margin-top:6px}