/* ════════════════════════════════════════════════════════════════════
 * BUILD 159 · 两页的台面(骰宝「台面 | 三点难围」· 轮盘「台面 | 赛道」)让人看得出有第二页
 *   老板:「有两页的游戏,我怕客户看不到有两页可以下注」→ 左右滑翻页 + 页码点 + 第一次进来演示一次。
 *   翻页逻辑在 arcade.js 的 ARCADE.pager()。
 * ════════════════════════════════════════════════════════════════════ */

/* 在台面上横着滑:浏览器自己的横竖拖动 / 双击放大在这一块让给我们(台面本来就不滚动) */
#app .pgarea{touch-action:none}
#app .rlwrap .rlright{position:relative}
#app .pgarea.pgdrag .sbspot:active,#app .pgarea.pgdrag .rls:active{transform:none}

/* 页码点:台面底边、台面和筹码栏中间那条缝里,● 是现在这一页 */
#app .pgdots{position:absolute;left:50%;bottom:-6px;z-index:6;display:flex;align-items:center;gap:6px;height:6px;transform:translateX(-50%);pointer-events:none}
#app .pgdots.hide{display:none}
#app .pgdots i{display:block;width:6px;height:6px;border-radius:99px;background:rgba(235,240,255,.38);box-shadow:0 0 0 1px rgba(0,0,0,.45);transition:width .25s ease,background .25s ease}
#app .pgdots i.on{width:22px;background:linear-gradient(90deg,#ffe38a,#d4a437);box-shadow:0 0 0 1px rgba(90,60,6,.7),0 0 9px rgba(255,209,102,.6)}

/* 第一次演示 ①:右边缘滑进来一条「下一页」再退回去 */
#app .pgpeekbox{position:absolute;inset:0;z-index:16;overflow:hidden;pointer-events:none;border-radius:14px}
#app .pgpeek{position:absolute;top:0;right:0;bottom:0;width:13%;min-width:58px;display:flex;align-items:center;justify-content:center;gap:3px;transform:translateX(105%);
  border-left:2px solid rgba(255,209,102,.85);background:linear-gradient(90deg,rgba(46,34,8,.95),rgba(20,15,5,.97));box-shadow:-12px 0 26px rgba(0,0,0,.6)}
#app .pgpeek b{writing-mode:vertical-rl;text-orientation:upright;font-family:var(--display);font-weight:800;font-size:13px;letter-spacing:.16em;color:#ffd166;text-shadow:0 0 10px rgba(255,209,102,.45)}
#app .pgpeek i{font-style:normal;font-family:var(--num);font-weight:800;font-size:20px;line-height:1;color:#ffd166}

/* 第一次演示 ②:顶栏切换钮下面的气泡(不挡手指:点哪儿都照样点得到,点一下就收) */
#app .pgtip{position:absolute;z-index:40;width:max-content;max-width:min(300px,72%);padding:9px 13px 10px;border-radius:12px;pointer-events:none;
  background:linear-gradient(180deg,#fff4c8,#ffd166);color:#2a1a04;box-shadow:0 12px 28px rgba(0,0,0,.55),0 0 0 1px rgba(120,80,10,.55);
  opacity:0;transform:translateY(-6px);transition:opacity .25s ease,transform .25s ease}
#app .pgtip.on{opacity:1;transform:none}
#app .pgtip::before{content:"";position:absolute;top:-6px;left:var(--ax,50%);width:12px;height:12px;margin-left:-6px;background:#fff4c8;transform:rotate(45deg);
  box-shadow:-1px -1px 0 rgba(120,80,10,.45)}
#app .pgtip b{position:relative;display:block;font-family:var(--display);font-weight:800;font-size:12.5px;line-height:1.3}
#app .pgtip span{position:relative;display:block;margin-top:2px;font-family:var(--display);font-weight:600;font-size:10.5px;line-height:1.35;color:#5a3d08}
#app .pgtip .pgswipe{position:relative;display:flex;align-items:center;gap:6px;margin-top:6px;font-style:normal;font-family:var(--display);font-weight:700;font-size:10px;line-height:1;color:#6a4a0c}
#app .pgtip .pgswipe svg{width:28px;height:15px;flex:0 0 auto;animation:pgswipe 1.3s ease-in-out infinite}
@keyframes pgswipe{0%,100%{transform:translateX(5px)}50%{transform:translateX(-5px)}}

@media (prefers-reduced-motion:reduce){#app .pgtip .pgswipe svg{animation:none}#app .pgdots i,#app .pgtip{transition:none}}