/* ══════════════════════════════════════════════════════════════════════
   企鹅冲刺 Penguin Rush(BUILD 88)—— 冰道场景 + 胖企鹅 + 薄冰裂开;复用刮刮乐的 sctabs / scprices / scbar / scpt 样式
   ══════════════════════════════════════════════════════════════════════ */
#app #penguinview{display:flex;flex-direction:column;min-height:0}
#app .pgwrap{flex:1;min-height:0;overflow-y:auto;-webkit-overflow-scrolling:touch;display:flex;flex-direction:column;align-items:center;gap:10px;padding:10px 12px calc(16px + var(--safeb));
  background:var(--grain),radial-gradient(120% 70% at 50% -5%,rgba(212,175,55,.18),transparent 60%),radial-gradient(90% 90% at 50% 45%,#231f28 0%,#151218 55%,#09080c 100%);background-blend-mode:soft-light,normal,normal}
#app .pgwrap>*{position:relative;z-index:1;flex:0 0 auto}
#app .pgtabs{grid-template-columns:1fr}
#app .pgtitle{font-family:var(--toon);font-size:20px;letter-spacing:.06em;color:var(--gold2);text-shadow:0 2px 0 #2a1d05;padding:2px 0 0}
#app .pgcard .thumb{transform:none;border-radius:10px}

/* ── 场景:极光夜空 + 一排冰块 ── */
#app .pgscene{position:relative;width:min(96vw,420px);height:236px;border-radius:18px;overflow:hidden;border:1px solid rgba(212,175,55,.45);
  background:
    radial-gradient(60% 40% at 30% 0%,rgba(95,207,154,.22),transparent 70%),
    radial-gradient(50% 45% at 80% 8%,rgba(140,120,255,.22),transparent 70%),
    linear-gradient(180deg,#07111f 0%,#0b1f33 52%,#0d2a44 62%,#0a1f33 100%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.06),inset 0 0 0 1px rgba(0,0,0,.5),0 14px 30px rgba(0,0,0,.55)}
#app .pgsky{position:absolute;inset:0;pointer-events:none}
#app .pgsky i{position:absolute;top:-6px;width:4px;height:4px;border-radius:50%;background:#fff;opacity:.85;animation:pgsnow 5.5s linear infinite}
#app .pgsky i:nth-child(1){left:6%;animation-delay:0s;width:3px;height:3px}#app .pgsky i:nth-child(2){left:18%;animation-delay:-1.2s}
#app .pgsky i:nth-child(3){left:31%;animation-delay:-2.8s;width:2.5px;height:2.5px}#app .pgsky i:nth-child(4){left:44%;animation-delay:-4s}
#app .pgsky i:nth-child(5){left:57%;animation-delay:-.6s;width:3px;height:3px}#app .pgsky i:nth-child(6){left:70%;animation-delay:-3.3s}
#app .pgsky i:nth-child(7){left:83%;animation-delay:-1.9s;width:2.5px;height:2.5px}#app .pgsky i:nth-child(8){left:94%;animation-delay:-4.7s}
@keyframes pgsnow{0%{transform:translate(0,-6px)}50%{transform:translate(6px,120px)}100%{transform:translate(-4px,246px);opacity:.2}}
#app .pgroad{position:absolute;left:0;right:0;bottom:0;height:150px;overflow-x:auto;overflow-y:hidden;-webkit-overflow-scrolling:touch;scrollbar-width:none;
  background:linear-gradient(180deg,transparent 0,rgba(6,26,44,.6) 40%,#071a2c 100%)}
#app .pgroad::-webkit-scrollbar{display:none}
#app .pgtrack{position:relative;display:flex;align-items:flex-end;gap:7px;height:100%;padding:0 18px 14px;width:max-content}   /* BUILD 100:冰块缩小一号,一屏能看到 6–7 块,不用一直横滑 */
#app .lane{position:relative;flex:0 0 auto;width:58px;height:54px;display:grid;place-items:center}
#app .lane .pgice{position:absolute;inset:0;width:100%;height:100%;filter:drop-shadow(0 6px 5px rgba(0,0,0,.45));transition:filter .2s,transform .2s}
#app .lane .mult{position:relative;z-index:1;font-family:var(--num);font-weight:700;font-size:12px;color:#0b2a44;letter-spacing:.01em;margin-top:-5px}
#app .lane .no{position:absolute;top:-16px;left:50%;transform:translateX(-50%);font-family:var(--toon2);font-size:9px;color:rgba(255,255,255,.35);letter-spacing:.08em}
#app .lane.shore,#app .lane.goal{width:54px;height:66px;border-radius:12px 12px 6px 6px;background:linear-gradient(180deg,#f2f8fb,#b9d9ea 70%,#7fb4d0);box-shadow:inset 0 2px 0 #fff,0 8px 10px rgba(0,0,0,.4)}
#app .lane.shore .lbl,#app .lane.goal .lbl{font-family:var(--display);font-weight:700;font-size:10px;letter-spacing:.1em;color:#0b2a44}
#app .lane.goal{background:linear-gradient(180deg,#fff2b8,#e0bd4e 60%,#b8912f);box-shadow:inset 0 2px 0 #fff8dc,0 0 18px rgba(212,175,55,.35),0 8px 10px rgba(0,0,0,.4)}
#app .lane.goal .lbl{color:#2a1d05}
#app .lane.goal .flag{position:absolute;top:-30px;left:50%;width:3px;height:34px;background:#2a1d05;border-radius:2px}
#app .lane.goal .flag::after{content:"";position:absolute;left:3px;top:0;border-style:solid;border-width:8px 0 8px 22px;border-color:transparent transparent transparent #b21e30}
#app .lane.passed .pgice{filter:drop-shadow(0 6px 5px rgba(0,0,0,.45)) brightness(1.06)}
#app .lane.passed .mult{color:#1f8a4f}
#app .lane.passed::after{content:"✓";position:absolute;right:6px;top:2px;z-index:2;font-size:11px;font-weight:900;color:#1f8a4f}
#app .lane.here .pgice{transform:translateY(-3px)}
#app .lane.next .pgice{animation:pgnext 1.1s ease-in-out infinite alternate}
@keyframes pgnext{from{filter:drop-shadow(0 6px 5px rgba(0,0,0,.45))}to{filter:drop-shadow(0 6px 5px rgba(0,0,0,.45)) drop-shadow(0 0 10px rgba(243,221,142,.8))}}
#app .lane.next .mult{color:#8a6a1c}
/* 薄冰:结算后摊开的裂纹;踩破的那块 → 裂纹闪一下 → 碎片飞开 → 冰块沉没露出水洞 → 水花 */
#app .lane .cracks{position:absolute;inset:0;opacity:0;pointer-events:none;z-index:2;transition:opacity .3s}
#app .lane .cracks svg{width:100%;height:100%;display:block}
#app .lane.trap .cracks{opacity:.85}
#app .lane.trap:not(.boom) .pgice{filter:drop-shadow(0 6px 5px rgba(0,0,0,.45)) saturate(.6) brightness(1.08)}
#app .lane.trap:not(.boom) .mult{color:#7a3b3b;text-decoration:line-through;opacity:.7}
#app .lane .hole{position:absolute;left:8%;right:6%;top:14%;bottom:12%;border-radius:45% 50% 48% 52%;opacity:0;pointer-events:none;
  background:radial-gradient(60% 50% at 50% 40%,#0a2a44 0%,#071a2c 70%);box-shadow:inset 0 3px 8px rgba(0,0,0,.7),inset 0 -1px 0 rgba(160,220,255,.25)}
#app .lane .hole::after{content:"";position:absolute;inset:18% 12%;border-radius:50%;border:1.5px solid rgba(190,230,255,.55);opacity:0}
#app .lane.boom .hole{opacity:1;transition:opacity .25s .45s}
/* 沉下去之后水面上飘着那顶金毛线帽(可爱一点) */
#app .lane .hole::before{content:"";position:absolute;left:50%;top:38%;width:16px;height:9px;margin-left:-8px;border-radius:8px 8px 3px 3px;opacity:0;
  background:linear-gradient(180deg,#fff3c4,#e0bd4e 55%,#b8912f);box-shadow:0 -5px 0 -1.5px #fffaf0,inset 0 -2px 0 #fffaf0}
#app .lane.boom .hole::before{animation:pghat 1.8s ease-in-out 1.5s infinite alternate;opacity:1;transition:opacity .4s 1.5s}
@keyframes pghat{from{transform:translateY(0) rotate(-6deg)}to{transform:translateY(-2px) rotate(6deg)}}
#app .lane.boom .hole::after{animation:pgripple 1.1s ease-out .55s 2}
@keyframes pgripple{from{transform:scale(.3);opacity:.9}to{transform:scale(1.5);opacity:0}}
#app .lane.boom .cracks{opacity:1;animation:pgcrackflash .45s steps(2) both}
@keyframes pgcrackflash{0%{opacity:0}50%{opacity:1}100%{opacity:1}}
#app .lane.boom .pgice{animation:pgshatter .7s ease-in .3s both}
@keyframes pgshatter{0%{transform:none;opacity:1}40%{transform:translateY(2px) scale(1.02);opacity:1}100%{transform:translateY(40px) scale(.6) rotate(8deg);opacity:0}}
#app .lane.boom .mult,#app .lane.boom .cracks{animation:pgsink .5s ease-in .35s both}
@keyframes pgsink{to{transform:translateY(30px);opacity:0}}
#app .lane .shards{position:absolute;inset:0;pointer-events:none;z-index:6}
#app .lane .shards i{position:absolute;left:50%;top:50%;width:12px;height:9px;margin:-4px 0 0 -6px;opacity:0;
  background:linear-gradient(180deg,#eefaff,#9fd3f0);border:1px solid #5aa3c6;clip-path:polygon(0 30%,60% 0,100% 55%,40% 100%)}
#app .lane.boom .shards i{animation:pgshard .8s cubic-bezier(.2,.7,.4,1) .3s both}
#app .lane .shards i:nth-child(1){--sx:-46px;--sy:-40px;--r:120deg}#app .lane .shards i:nth-child(2){--sx:40px;--sy:-46px;--r:-90deg}
#app .lane .shards i:nth-child(3){--sx:-52px;--sy:-4px;--r:200deg}#app .lane .shards i:nth-child(4){--sx:54px;--sy:-10px;--r:-160deg}
#app .lane .shards i:nth-child(5){--sx:-24px;--sy:-54px;--r:60deg}#app .lane .shards i:nth-child(6){--sx:26px;--sy:-56px;--r:-40deg;width:8px;height:7px}
@keyframes pgshard{0%{transform:translate(0,0) rotate(0);opacity:1}100%{transform:translate(var(--sx),calc(var(--sy) + 60px)) rotate(var(--r));opacity:0}}
#app .lane .splash{position:absolute;inset:0;pointer-events:none;z-index:7}
#app .lane .splash i{position:absolute;left:50%;top:45%;width:6px;height:6px;border-radius:50%;margin:-3px 0 0 -3px;opacity:0;background:#dff3ff;box-shadow:0 0 0 1px rgba(90,163,198,.6)}
#app .lane.boom .splash i{animation:pgsplash .75s cubic-bezier(.2,.8,.4,1) .75s both}
#app .lane .splash i:nth-child(1){--px:-30px;--py:-48px}#app .lane .splash i:nth-child(2){--px:-12px;--py:-60px;width:8px;height:8px}
#app .lane .splash i:nth-child(3){--px:8px;--py:-64px}#app .lane .splash i:nth-child(4){--px:26px;--py:-50px;width:5px;height:5px}#app .lane .splash i:nth-child(5){--px:38px;--py:-32px}
@keyframes pgsplash{0%{transform:translate(0,0) scale(.6);opacity:1}60%{transform:translate(var(--px),var(--py)) scale(1);opacity:1}100%{transform:translate(var(--px),calc(var(--py) + 70px)) scale(.7);opacity:0}}
/* 企鹅:绝对定位在轨道上,left/bottom 跟着当前冰块;跳的时候走一段弧线 */
#app .penguin{position:absolute;left:54px;bottom:60px;width:56px;height:63px;margin-left:-28px;z-index:4;pointer-events:none;
  transition:left .38s cubic-bezier(.3,.8,.3,1),bottom .38s cubic-bezier(.3,.8,.3,1);filter:drop-shadow(0 6px 6px rgba(0,0,0,.5))}
#app .penguin .pgsvg{width:100%;height:100%;display:block;animation:pgidle 2.4s ease-in-out infinite}
@keyframes pgidle{0%,100%{transform:translateY(0) scale(1,1)}50%{transform:translateY(-2px) scale(1.02,.98)}}
#app .penguin.hopping .pgsvg{animation:pghop .38s cubic-bezier(.3,.8,.3,1) both}
@keyframes pghop{0%{transform:translateY(0) scale(1.05,.9)}40%{transform:translateY(-34px) scale(.96,1.08) rotate(6deg)}100%{transform:translateY(0) scale(1.06,.94)}}
#app .penguin.crash{z-index:3}
#app .penguin.crash .pgsvg{animation:pgcrash 1.1s cubic-bezier(.4,.1,.6,1) .35s both}
@keyframes pgcrash{0%{transform:translateY(0) rotate(0)}25%{transform:translateY(-10px) rotate(-8deg)}55%{transform:translateY(34px) rotate(10deg) scale(.95);opacity:1}100%{transform:translateY(78px) rotate(-6deg) scale(.7);opacity:0}}
#app .penguin.cheer .pgsvg{animation:pgcheer .5s ease-in-out 4 alternate}
@keyframes pgcheer{from{transform:translateY(0)}to{transform:translateY(-12px)}}
#app .pgscene.shake{animation:tshake .55s cubic-bezier(.36,.07,.19,.97) both}
/* 结果戳章(和刮刮乐同款) */
#app .pgstamp{position:absolute;z-index:6;left:50%;top:32%;transform:translate(-50%,-50%) rotate(-10deg) scale(.4);opacity:0;pointer-events:none;
  font-family:var(--toon);font-size:clamp(28px,9vw,44px);letter-spacing:.04em;padding:6px 18px;border:6px solid;border-radius:14px;white-space:nowrap;
  transition:transform .35s cubic-bezier(.2,1.4,.3,1),opacity .2s}
#app .pgstamp.on{opacity:1;transform:translate(-50%,-50%) rotate(-10deg) scale(1)}
#app .pgstamp.win{color:#3a2a05;border-color:#3a2a05;background:linear-gradient(180deg,#fff2b8,#d4af37);box-shadow:0 0 0 4px #fffbea,0 10px 24px rgba(0,0,0,.5)}
#app .pgstamp.lose{color:#fff;border-color:#5c0c16;background:linear-gradient(180deg,#e2556a,#8f1620);box-shadow:0 0 0 4px #fffbea,0 10px 24px rgba(0,0,0,.5)}
#app .pgstamp.push{color:#2a1d05;border-color:#2a1d05;background:linear-gradient(180deg,#fffbea,#cdbd8c);box-shadow:0 0 0 4px #fffbea,0 10px 24px rgba(0,0,0,.5)}
/* 状态行 */
#app .pgstat{display:flex;gap:14px;align-items:baseline;justify-content:center;font-family:var(--toon2);font-size:13px;color:var(--muted);letter-spacing:.03em;min-height:22px;text-align:center}
#app .pgstat b{font-family:var(--toon);font-size:22px;color:var(--gold2);text-shadow:0 2px 0 #3a2a05}
/* 跳的键在局中脉动一下 */
#app .scbtn.hopping{animation:pghopbtn 1.2s ease-in-out infinite alternate}
@keyframes pghopbtn{from{box-shadow:inset 0 1px 0 rgba(255,255,255,.6),inset 0 -2px 4px rgba(90,60,10,.35),0 0 0 2px #2a1d05,0 6px 0 #5c4310,0 12px 20px rgba(0,0,0,.5)}
  to{box-shadow:inset 0 1px 0 rgba(255,255,255,.6),inset 0 -2px 4px rgba(90,60,10,.35),0 0 0 2px #2a1d05,0 6px 0 #5c4310,0 0 26px rgba(243,221,142,.55),0 12px 20px rgba(0,0,0,.5)}}
/* 赔付表:22 档太多,排成小格子 */
#app .pgpt-g{display:grid;grid-template-columns:repeat(4,1fr);gap:4px;padding:8px 10px}
#app .pgpt-g .r{display:flex;flex-direction:column;align-items:center;gap:1px;padding:5px 2px;border-radius:8px;background:rgba(255,255,255,.03);border:1px solid rgba(255,255,255,.05)}
#app .pgpt-g .r i{font-style:normal;font-size:9px;color:var(--dim);font-family:var(--toon2);letter-spacing:.06em}
#app .pgpt-g .r b{font-family:var(--num);font-size:12px;color:var(--muted);font-weight:600}
#app .pgpt-g .r strong{font-family:var(--num);font-size:12.5px;color:var(--gold2);font-weight:700}
#app .pgpt-g .r.now{background:linear-gradient(180deg,rgba(212,175,55,.22),rgba(212,175,55,.08));border-color:var(--gold2)}
#app .pgpt-g .r.now i{color:var(--gold2)}
#app .pgpt-g .r.nxt{border-color:rgba(243,221,142,.45);border-style:dashed}
@media(max-height:700px){#app .pgscene{height:206px}#app .pgwrap{gap:7px}}