/* The 270 x 480 game preview (shared by the Studio and the sales website). Drawn by scenes.js. */
/* ================= the preview: a small 270 x 480 stream screen ================= */
.pv { position: relative; width: 270px; height: 480px; border-radius: 16px; overflow: hidden; color: #fff; font-family: Inter, 'Segoe UI', sans-serif; text-align: left; line-height: 1;
  background: radial-gradient(120% 70% at 50% 0%, var(--bg1), var(--bg2)); }
.pv::before { content: ''; position: absolute; inset: 0; pointer-events: none; background: radial-gradient(circle, rgba(255,255,255,.05) 1px, transparent 1.5px) 0 0/14px 14px; }
.pvLive { position: absolute; left: 8px; top: 8px; background: #e5203a; font: 800 7.5px/1 Inter, sans-serif; padding: 3.5px 5px; border-radius: 4px; }
.pvT { position: absolute; left: 6px; right: 6px; top: 21px; text-align: center; font: 400 25px/1 'Bebas Neue', Impact, sans-serif; letter-spacing: .5px; text-shadow: 0 0 12px var(--a); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pvS { position: absolute; left: 6px; right: 6px; top: 50px; text-align: center; font: 700 10px/1.1 Inter, sans-serif; color: #ffe98a; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pvA { position: absolute; left: 0; top: 70px; width: 270px; height: 296px; overflow: hidden; }
.pvG { position: absolute; left: 8px; right: 8px; top: 372px; height: 25px; border-radius: 99px; padding: 0 10px; font: 700 9.5px/25px Inter, sans-serif; color: #2a1a00; background: linear-gradient(90deg, #ffe98a, #ffc03a); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; box-shadow: 0 0 14px rgba(255,200,60,.5); }
.pvC { position: absolute; left: 8px; right: 8px; top: 404px; display: flex; flex-direction: column; gap: 4px; }
.pvC div { width: fit-content; max-width: 100%; font: 600 9.5px/1 Inter, sans-serif; background: rgba(0,0,0,.45); padding: 5px 8px; border-radius: 9px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pvC b { color: #7ad8ff; }

.pv .ab, .pv .dot, .pv .tag, .pv .fxn, .pv .hpb { position: absolute; }
.pv .em { display: inline-block; line-height: 1; font-family: 'Segoe UI Emoji', 'Apple Color Emoji', 'Noto Color Emoji', sans-serif; }
.pv .flg { border-radius: 5px; box-shadow: 0 0 0 2px rgba(255,255,255,.85), 0 4px 10px rgba(0,0,0,.45); }
.pv .dot { border-radius: 50%; display: flex; align-items: center; justify-content: center; font-weight: 800; color: #fff; box-shadow: inset 0 0 0 1.5px rgba(255,255,255,.75); text-shadow: 0 1px 2px rgba(0,0,0,.5); }
.pv .dot.a { background: var(--a); } .pv .dot.b { background: var(--b); } .pv .dot.gold { background: radial-gradient(circle at 35% 30%, #fff3a8, #f0b01a); color: #3a2a00; text-shadow: none; box-shadow: 0 0 12px rgba(255,216,77,.9), inset 0 0 0 2px #fff; }
.pv .tag { font: 700 8.5px/1 Inter, sans-serif; background: rgba(0,0,0,.55); padding: 3px 5px; border-radius: 6px; white-space: nowrap; text-shadow: 0 1px 2px rgba(0,0,0,.55); }
.pv .tag.ta { background: var(--a); } .pv .tag.tb { background: var(--b); } .pv .tag.tk { background: rgba(0,0,0,.72); } .pv .tag.tg { background: #ffd84d; color: #2a1a00; text-shadow: none; }
.pv .fxn { font: 900 11px/1 Inter, sans-serif; color: #ffe14d; text-shadow: 0 1px 0 #6a3a00, 0 0 8px rgba(0,0,0,.8); transform: rotate(-6deg); white-space: nowrap; }
.pv .hpb { height: 11px; border-radius: 6px; background: rgba(0,0,0,.55); overflow: hidden; box-shadow: 0 0 0 1.5px rgba(255,255,255,.55); }
.pv .hpb i { display: block; height: 100%; } .pv .hpb i.a { background: var(--a); } .pv .hpb i.b { background: var(--b); float: right; } .pv .hpb i.boss { background: linear-gradient(90deg, #ff3a3a, #ffb03a); }
.pv .tbar { position: absolute; left: 12px; right: 12px; top: 12px; height: 22px; border-radius: 99px; overflow: hidden; background: var(--b); box-shadow: 0 0 0 2px rgba(255,255,255,.7); }
.pv .tbar i { position: absolute; left: 0; top: 0; bottom: 0; background: var(--a); border-right: 2px solid #fff; }
.pv .tbar b { position: absolute; left: 9px; top: 0; font: 800 11px/22px Inter, sans-serif; text-shadow: 0 1px 2px rgba(0,0,0,.6); } .pv .tbar b.r { left: auto; right: 9px; }
.pv .rope { height: 5px; border-radius: 3px; background: repeating-linear-gradient(90deg, #d8b27c 0 6px, #8f6d42 6px 12px); }
.pv .midl { width: 0; border-left: 2px dashed rgba(255,255,255,.55); }
.pv .shot { width: 8px; height: 8px; border-radius: 50%; } .pv .shot.a { background: var(--a); box-shadow: 0 0 8px var(--a); } .pv .shot.b { background: var(--b); box-shadow: 0 0 8px var(--b); }
.pv .beam { width: 3px; height: 16px; border-radius: 2px; background: #fff8b0; box-shadow: 0 0 6px #ffd84d; }
.pv .wall { width: 6px; border-radius: 3px; background: repeating-linear-gradient(0deg, #c8b08a 0 10px, #7a6a50 10px 12px); }
.pv .cell { width: 27px; height: 27px; border-radius: 5px; display: flex; align-items: center; justify-content: center; }
.pv .cell.k0 { background: #ff4f6d; } .pv .cell.k1 { background: #33b5ff; } .pv .cell.k2 { background: #43e97b; } .pv .cell.k3 { background: #ffd84d; }
.pv .cell.w { background: #4a5cc0; box-shadow: inset 0 -3px rgba(0,0,0,.3); } .pv .cell.p { background: rgba(255,255,255,.07); } .pv .cell.c { background: rgba(255,255,255,.88); } .pv .cell.f { background: #6a4a2a; box-shadow: inset 0 0 0 1px rgba(0,0,0,.25); }
.pv .sq { width: 31px; height: 31px; font: 400 24px/31px 'Segoe UI Symbol', 'Arial Unicode MS', serif; text-align: center; color: #111; } .pv .sq.l { background: #f0d9b5; } .pv .sq.d { background: #b58863; }
.pv .blk { width: 80px; height: 22px; border-radius: 5px; box-shadow: inset 0 -4px rgba(0,0,0,.25), inset 0 0 0 1.5px rgba(255,255,255,.45); } .pv .blk.a { background: var(--a); } .pv .blk.b { background: var(--b); }
.pv .blk.gold, .pv .flr.gold, .pv .bld.gold, .pv .dmn.gold { background: linear-gradient(#fff0a0, #e8a80c); box-shadow: 0 0 12px rgba(255,216,77,.8), inset 0 0 0 1.5px #fff; color: #3a2a00; }
.pv .flr { width: 112px; height: 21px; border-radius: 4px; background: linear-gradient(#5266a8, #2c386a); font: 700 8.5px/21px Inter, sans-serif; text-align: center; box-shadow: inset 0 0 0 1.5px rgba(255,255,255,.28); }
.pv .ground { left: 0; right: 0; height: 12px; background: rgba(0,0,0,.5); }
.pv .ring { width: 160px; height: 160px; border-radius: 50%; padding: 10px; } .pv .ring > div { width: 100%; height: 100%; border-radius: 50%; background: var(--bg2); box-shadow: inset 0 0 30px rgba(255,255,255,.12); }
.pv .fin { width: 10px; background: repeating-conic-gradient(#fff 0 25%, #111 0 50%) 0 0/10px 10px; }
.pv .lane { left: 6px; right: 6px; height: 2px; background: rgba(255,255,255,.2); }
.pv .trail { width: 2px; background: linear-gradient(rgba(255,255,255,.6), transparent); }
.pv .peg { width: 7px; height: 7px; border-radius: 50%; background: rgba(255,255,255,.8); }
.pv .bin { width: 48px; height: 40px; border-radius: 0 0 9px 9px; border: 2px solid rgba(255,255,255,.55); border-top: none; font: 800 11px/36px Inter, sans-serif; text-align: center; } .pv .bin.gold { background: rgba(255,216,77,.3); color: #ffe14d; border-color: #ffd84d; }
.pv .zone { width: 246px; height: 246px; border-radius: 50%; border: 3px dashed rgba(255,255,255,.6); background: radial-gradient(circle, rgba(255,255,255,.13), transparent 70%); }
.pv .qbox { width: 242px; min-height: 58px; display: flex; align-items: center; justify-content: center; background: #fff; color: #151a2e; border-radius: 11px; padding: 8px 10px; font: 800 13px/1.25 Inter, sans-serif; text-align: center; box-shadow: 0 6px 16px rgba(0,0,0,.4); }
.pv .opt { width: 242px; height: 34px; border-radius: 9px; background: rgba(0,0,0,.5); overflow: hidden; display: flex; align-items: center; gap: 8px; padding: 0 9px; font: 700 11.5px/1 Inter, sans-serif; }
.pv .opt i { position: absolute; left: 0; top: 0; bottom: 0; background: var(--a); opacity: .6; } .pv .opt b { position: relative; background: #fff; color: #111; border-radius: 5px; padding: 4px 6px; } .pv .opt span { position: relative; flex: 1; } .pv .opt em { position: relative; font-style: normal; font-weight: 800; }
.pv .tmr { width: 40px; height: 40px; border-radius: 50%; border: 3px solid #ffd84d; font: 800 15px/34px Inter, sans-serif; text-align: center; background: rgba(0,0,0,.55); }
.pv .star { width: 2px; height: 2px; border-radius: 50%; background: #fff; }
.pv .skyline { left: 0; right: 0; height: 38px; background: linear-gradient(transparent, rgba(0,0,0,.65)); }
.pv .bld { width: 33px; border-radius: 4px 4px 0 0; background: repeating-linear-gradient(0deg, transparent 0 7px, rgba(0,0,0,.22) 7px 9px), linear-gradient(#6a7cc0, #3c4a86); }
.pv .water { left: 0; right: 0; bottom: 0; background: linear-gradient(rgba(90,200,255,.38), rgba(10,40,120,.65)); border-top: 2px solid rgba(255,255,255,.4); }
.pv .line { width: 1.5px; background: rgba(255,255,255,.75); }
.pv .spot { top: 0; width: 74px; height: 200px; background: linear-gradient(rgba(255,255,255,.3), transparent); clip-path: polygon(40% 0, 60% 0, 100% 100%, 0 100%); }
.pv .floor { left: 10px; right: 10px; height: 8px; border-radius: 4px; background: rgba(255,255,255,.4); }
.pv .vbar { width: 22px; height: 44px; border-radius: 5px; background: rgba(0,0,0,.5); display: flex; align-items: flex-end; overflow: hidden; } .pv .vbar i { display: block; width: 100%; background: var(--b); }
.pv .track { left: 6px; right: 6px; height: 4px; background: repeating-linear-gradient(90deg, rgba(255,255,255,.55) 0 8px, transparent 8px 14px); }
.pv .dmn { width: 14px; height: 40px; border-radius: 3px; background: #fff; box-shadow: inset 0 0 0 1.5px #223; transform-origin: bottom center; }
.pv .sky2 { left: 0; right: 0; top: 0; height: 50px; background: linear-gradient(#6ab8ff, #bfe4ff); }
.pv .lay { left: 0; right: 0; height: 41px; }
.pv .shaft { width: 34px; background: #120c0a; border-radius: 0 0 8px 8px; }