/* 星汉台球(billiards/stage.php)。整屏 3D, 界面都浮在画面上、无边框(同越南牌戏 10-31 的统一风格: 字 + 金色细节, 不画框);
   类名统一 bl- 前缀(站点模板有 .hp / .hero, 避免撞名)。尺寸用舞台容器单位 cqh / cqw */
.bl-stage{--gold:#e7c983;--gold2:#b8954f;--ink:#f3ecdc;--muted:#b9b2a2;--serif:"Noto Serif",Cambria,"Times New Roman","Noto Serif SC","Songti SC",serif;
  position:relative;width:min(100%,calc((100vh - 100px)*16/9));aspect-ratio:16/9;margin:0 auto;overflow:hidden;border-radius:18px;container-type:size;background:#0b0807;color:var(--ink);
  font:14px/1.45 system-ui,"Segoe UI","Microsoft YaHei",sans-serif;color-scheme:dark;user-select:none;-webkit-user-select:none}
.bl-stage *{box-sizing:border-box}
.bl-stage [hidden]{display:none!important}
html.game-full,html.game-full body{overflow:hidden}
html.game-full .bl-stage{position:fixed;inset:0;z-index:50;width:100vw;height:100dvh;aspect-ratio:auto;border-radius:0}
.bl-stage button{font:inherit;color:inherit;cursor:pointer}
.bl-stage :focus-visible{outline:2px solid var(--gold);outline-offset:3px}
.bl-gl{position:absolute;inset:0;width:100%;height:100%;display:block;touch-action:none}
.bl-stage.is-aiming .bl-gl{cursor:crosshair}

/* ---------- 顶栏: 无边框, 悬停变金 + 底下渐隐金线, 按钮之间小点 ---------- */
.bl-top{position:absolute;left:0;right:0;top:0;z-index:5;display:flex;align-items:center;justify-content:space-between;height:8cqh;padding:0 2.4cqw;background:linear-gradient(#0b0807e0,transparent)}
.bl-back{display:inline-flex;align-items:center;gap:.3em;color:var(--muted);text-decoration:none;font-size:max(12px,1.8cqh);letter-spacing:.06em;transition:color .2s}
.bl-back svg{width:1.1em;height:1.1em;fill:none;stroke:currentColor;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round;transition:transform .2s}
.bl-back:hover{color:var(--gold)}.bl-back:hover svg{transform:translateX(-3px)}
.bl-brand{position:absolute;left:50%;transform:translateX(-50%);text-align:center;line-height:1.1}
.bl-brand small{display:block;font-size:max(9px,1.2cqh);letter-spacing:.42em;color:var(--muted)}
.bl-brand b{font:700 max(16px,3cqh) var(--serif);letter-spacing:.2em;background:linear-gradient(#fff6d8,var(--gold) 60%,var(--gold2));-webkit-background-clip:text;background-clip:text;color:transparent}
.bl-tools{display:flex;align-items:center;gap:.2cqw}
.bl-tools button{position:relative;display:inline-flex;align-items:center;gap:.35em;padding:.45em .8em;border:0;background:none;color:var(--muted);font-size:max(12px,1.75cqh);letter-spacing:.08em;transition:color .2s}
.bl-tools button span{color:var(--ink)}
.bl-tools button::after{content:"";position:absolute;left:30%;right:30%;bottom:.1em;height:1px;background:linear-gradient(90deg,transparent,var(--gold),transparent);opacity:0;transition:opacity .2s,left .2s,right .2s}
.bl-tools button:hover{color:var(--gold)}.bl-tools button:hover::after{opacity:1;left:12%;right:12%}
.bl-tools button+button::before{content:"";position:absolute;left:-.12cqw;top:50%;width:3px;height:3px;margin-top:-1.5px;border-radius:50%;background:#e7c98355}

/* ---------- 比分条: 左你 / 中间轮到谁 / 右电脑; 各自那一类的 7 颗小球(进了的变暗) ---------- */
.bl-score{position:absolute;left:50%;top:8.5cqh;z-index:4;display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:2.4cqw;width:min(92cqw,120cqh);transform:translateX(-50%);pointer-events:none}
.bl-side{display:grid;grid-template-columns:auto 1fr;grid-template-areas:"name balls" "group balls";align-items:center;column-gap:1.2cqw;padding:.8cqh 1.2cqw;border-radius:1.6cqh;transition:background .3s,box-shadow .3s;text-shadow:0 1px 3px #000}
.bl-side.is-foe{grid-template-columns:1fr auto;grid-template-areas:"balls name" "balls group";text-align:right}
.bl-side b{grid-area:name;font:600 2.3cqh var(--serif);color:var(--ink)}
.bl-side .bl-group{grid-area:group;font-size:1.5cqh;color:var(--muted);white-space:nowrap}
.bl-side em{position:absolute;font-style:normal;display:none}
.bl-balls{grid-area:balls;display:flex;gap:.35cqw;flex-wrap:wrap}
.bl-side.is-foe .bl-balls{justify-content:flex-end}
.bl-side.is-turn{background:linear-gradient(90deg,#e7c98326,transparent);box-shadow:inset 3px 0 0 var(--gold)}
.bl-side.is-foe.is-turn{background:linear-gradient(270deg,#e7c98326,transparent);box-shadow:inset -3px 0 0 var(--gold)}
.bl-side.is-turn b{color:var(--gold)}
.bl-turn{margin:0;padding:.5cqh 1.4cqw;border-radius:999px;background:#0009;font:600 1.8cqh var(--serif);letter-spacing:.1em;color:var(--gold);white-space:nowrap}
.bl-turn:empty{display:none}
.bl-ball{--c:#888;display:grid;place-items:center;width:2.8cqh;height:2.8cqh;border-radius:50%;font:800 1.25cqh/1 system-ui,sans-serif;font-style:normal;color:#111;
  background:radial-gradient(circle at 50% 50%,#fbf8f0 0 34%,transparent 35%),radial-gradient(circle at 35% 30%,#fff8,transparent 45%),var(--c);box-shadow:inset 0 -2px 3px #0006,0 1px 3px #000a}
.bl-ball.is-stripe{background:radial-gradient(circle at 50% 50%,#fbf8f0 0 34%,transparent 35%),radial-gradient(circle at 35% 30%,#fff8,transparent 45%),linear-gradient(#f7f3e8 22%,var(--c) 22% 78%,#f7f3e8 78%)}
.bl-ball.is-gone{opacity:.22;filter:grayscale(1)}

/* ---------- 提示 / 播报 ---------- */
.bl-banner{position:absolute;left:50%;top:40%;z-index:6;margin:0;padding:1.4cqh 3cqw;transform:translate(-50%,-50%);border-radius:999px;background:radial-gradient(ellipse at 50% 50%,#0b0807e6,#0b0807b0);
  font:700 3.2cqh var(--serif);letter-spacing:.1em;color:var(--ink);text-align:center;white-space:nowrap;text-shadow:0 2px 8px #000;animation:bl-pop .3s ease-out;pointer-events:none}
.bl-banner.is-good{color:var(--gold)}.bl-banner.is-foul{color:#ff9a8a}
@keyframes bl-pop{from{opacity:0;transform:translate(-50%,-40%) scale(.9)}}
.bl-tip{position:absolute;left:50%;bottom:2.2cqh;z-index:4;margin:0;max-width:70cqw;transform:translateX(-50%);font-size:max(12px,1.7cqh);color:var(--muted);text-align:center;text-shadow:0 1px 4px #000;pointer-events:none}

/* ---------- 瞄准时的控件: 杆法母球(左下) / 力度条(右) / 微调(下中) ---------- */
.bl-spin,.bl-spin-label,.bl-power,.bl-nudge{opacity:0;pointer-events:none;transition:opacity .25s}
.bl-stage.is-aiming :is(.bl-spin,.bl-spin-label,.bl-power,.bl-nudge){opacity:1;pointer-events:auto}
.bl-spin{position:absolute;left:3cqw;bottom:7cqh;z-index:5;width:13cqh;height:13cqh;border-radius:50%;cursor:crosshair;touch-action:none;
  background:radial-gradient(circle at 35% 30%,#fff,#f1ece0 45%,#c9c2b2 80%,#8d877a);box-shadow:0 0 0 .5cqh #0006,0 1cqh 3cqh #000a}
.bl-spin::before,.bl-spin::after{content:"";position:absolute;background:#0002}.bl-spin::before{left:50%;top:12%;bottom:12%;width:1px}.bl-spin::after{top:50%;left:12%;right:12%;height:1px}
.bl-spin i{position:absolute;left:50%;top:50%;width:2.6cqh;height:2.6cqh;margin:-1.3cqh 0 0 -1.3cqh;border-radius:50%;background:radial-gradient(circle,#d4252a 0 45%,#7a0f12);box-shadow:0 0 0 2px #fff,0 2px 6px #000a}
.bl-spin-label{position:absolute;left:3cqw;bottom:3.6cqh;z-index:5;width:13cqh;text-align:center;font-size:1.5cqh;letter-spacing:.12em;color:var(--muted)}
.bl-power{position:absolute;right:2.6cqw;top:50%;z-index:5;display:flex;flex-direction:column;align-items:center;gap:1.4cqh;width:9cqh;height:50cqh;padding:2cqh 0 1.6cqh;transform:translateY(-46%);cursor:ns-resize;touch-action:none;
  background:linear-gradient(90deg,transparent,#0b0807b3 30%,#0b0807b3 70%,transparent)} /* 能量槽(11-01 第三版): 背后一道暗色渐隐底, 在亮台面上也看得清 */
.bl-power span{font-size:1.3cqh;letter-spacing:.45em;color:var(--gold);text-shadow:0 1px 3px #000}
/* 槽: 直角, 2.2cqh 宽, 深色玻璃底 + 两侧细金线; 填充从下往上: 青绿 → 金 → 橙红(力度越大越热), 顶端一道亮边; 左边细刻度每 10%、25 / 50 / 75 长一点 */
.bl-power i{--p:0%;position:relative;flex:1;width:2.2cqh;
  background:linear-gradient(0deg,#3fd1a2,#e7c983 50%,#ff8a3c 85%,#ff5a3c) 0 100%/100% var(--p) no-repeat,linear-gradient(90deg,#ffffff08,#ffffff14 50%,#ffffff08),#06040380;
  box-shadow:inset 1px 0 #e7c98355,inset -1px 0 #e7c98355,inset 0 1px #e7c98333,inset 0 -1px #e7c98333,0 0 0 1px #0008}
.bl-power i::before{content:"";position:absolute;right:calc(100% + .6cqh);top:0;bottom:0;width:.8cqh;
  background:repeating-linear-gradient(0deg,#e7c98370 0 1px,transparent 1px 10%),linear-gradient(0deg,transparent calc(25% - .5px),#e7c983 calc(25% - .5px) calc(25% + .5px),transparent calc(25% + .5px) calc(50% - .5px),#e7c983 calc(50% - .5px) calc(50% + .5px),transparent calc(50% + .5px) calc(75% - .5px),#e7c983 calc(75% - .5px) calc(75% + .5px),transparent calc(75% + .5px)) -0.8cqh 0/1.6cqh 100% no-repeat}
/* 当前力度: 一根细短横线(比槽宽一截, 中间白、两头渐隐, 带光) */
.bl-power i::after{content:"";position:absolute;left:50%;top:calc(100% - var(--p));width:5cqh;height:2px;margin:-1px 0 0 -2.5cqh;
  background:linear-gradient(90deg,transparent,#fff6d8 25%,#fff 50%,#fff6d8 75%,transparent);box-shadow:0 0 10px #ffe7a8,0 0 3px #fff}
.bl-power b{font:700 3.2cqh/1 var(--serif);color:var(--ink);font-variant-numeric:tabular-nums;text-shadow:0 2px 6px #000}
.bl-power b::after{content:"%";margin-left:2px;font-size:.45em;color:var(--muted)}
/* 按住右键蓄力: 槽亮起来; 满了横线和数字呼吸 */
.bl-stage.is-charging .bl-power i{box-shadow:inset 1px 0 #e7c983aa,inset -1px 0 #e7c983aa,inset 0 1px #e7c98366,inset 0 -1px #e7c98366,0 0 3cqh #e7c98344}
.bl-stage.is-charging .bl-power b{color:var(--gold)}
.bl-stage.is-full .bl-power i::after{animation:bl-full .45s ease-in-out infinite alternate}
.bl-stage.is-full .bl-power b{color:#ff9a6a}
@keyframes bl-full{to{box-shadow:0 0 18px #ff9a5a,0 0 4px #fff;width:6.4cqh;margin-left:-3.2cqh}}
.bl-nudge{position:absolute;left:50%;bottom:6cqh;z-index:5;display:flex;align-items:center;gap:1cqw;transform:translateX(-50%)}
.bl-nudge span{font-size:1.4cqh;letter-spacing:.3em;color:var(--muted);transition:color .2s}
.bl-stage.is-fine .bl-nudge span{color:var(--gold);text-shadow:0 0 8px #e7c98388} /* 按住左键 = 微调中 */
.bl-nudge button{width:5cqh;height:5cqh;border:0;border-radius:50%;background:#0008;color:var(--ink);font-size:1.8cqh;transition:color .2s,background .2s}
.bl-nudge button:hover{color:var(--gold);background:#000b}

/* ---------- 开局 / 结束卡: 半透明暗幕 + 居中的一张卡(同越南牌戏的弹窗: 深绿径向底、细金边、金色渐变标题) ---------- */
.bl-menu,.bl-end{position:absolute;inset:0;z-index:8;display:grid;place-items:center;padding:4cqh;background:radial-gradient(circle,#0003,#000a)}
.bl-menu-card,.bl-help{width:min(440px,92%);padding:30px 34px 26px;border:1px solid #e7c98338;border-radius:20px;text-align:center;color:var(--ink);
  background:radial-gradient(120% 70% at 50% 0,#14382c 0,#08201a 50%,#040f0c 100%);box-shadow:0 30px 90px #000d,inset 0 1px #ffffff12;animation:bl-rise .45s ease-out}
@keyframes bl-rise{from{opacity:0;transform:translateY(16px)}}
.bl-menu-card small,.bl-help>small{display:block;font-size:10.5px;letter-spacing:.42em;color:#a9bdb4}
.bl-menu-card h1,.bl-menu-card h2,.bl-help h2{margin:.25em 0 .4em;font:700 30px/1.2 var(--serif);letter-spacing:.12em;background:linear-gradient(#fff6d8,var(--gold) 60%,var(--gold2));-webkit-background-clip:text;background-clip:text;color:transparent}
.bl-menu-card h2{font-size:26px;letter-spacing:.06em}
.bl-menu-card p{margin:0 0 18px;color:#d9d2c0;font-size:14px}
.bl-menu-card p b{color:var(--gold)}
.bl-menu-ball{width:64px;height:64px;margin:0 auto 10px;filter:drop-shadow(0 8px 18px #000c)}
.bl-menu-ball svg{width:100%;height:100%}
.bl-levels{display:flex;justify-content:center;gap:2px;margin-bottom:20px}
.bl-levels button{position:relative;padding:6px 16px;border:0;background:none;color:#a9bdb4;font-size:14px;letter-spacing:.12em}
.bl-levels button+button::before{content:"";position:absolute;left:-1px;top:50%;width:3px;height:3px;margin-top:-1.5px;border-radius:50%;background:#e7c98355}
.bl-levels button[aria-pressed=true]{color:var(--gold);text-shadow:0 0 10px #e7c98366}
.bl-levels button[aria-pressed=true]::after{content:"";position:absolute;left:25%;right:25%;bottom:0;height:1px;background:linear-gradient(90deg,transparent,var(--gold),transparent)}
.bl-go{display:block;width:100%;padding:12px 20px;border:0;border-radius:999px;background:linear-gradient(180deg,#f6e2a6,#c49a4c);color:#2b1d07!important;font-weight:700;font-size:15px;letter-spacing:.12em;box-shadow:0 6px 18px #c49a4c44,inset 0 1px #fff8;transition:filter .15s}
.bl-go:hover{filter:brightness(1.06)}
.bl-link{display:block;width:100%;margin-top:6px;padding:8px;border:0;background:none;color:#a9bdb4;font-size:13px;letter-spacing:.08em}
.bl-link:hover{color:var(--gold)}
.bl-wins{margin-top:14px;letter-spacing:.2em!important}
.bl-end .bl-end-k{letter-spacing:.5em}
.bl-end.is-win .bl-menu-card{box-shadow:0 30px 90px #000d,0 0 60px #e7c98333,inset 0 1px #ffffff12}

/* ---------- 玩法说明 ---------- */
.bl-help{width:min(560px,92vw);max-height:86vh;overflow:auto;text-align:left;scrollbar-width:thin;scrollbar-color:#e7c98344 transparent}
.bl-help::backdrop{background:radial-gradient(circle,#0008,#000c);backdrop-filter:blur(3px)}
.bl-help>small,.bl-help h2{text-align:center}
.bl-help h3{margin:1em 0 .3em;font:600 15px var(--serif);color:var(--gold)}
.bl-help ul{margin:.2em 0;padding-left:1.2em}
.bl-help li{font-size:13.5px;line-height:1.75;color:#d9d2c0}
.bl-help li b{color:var(--ink)}
.bl-fine{margin:14px 0 16px;font-size:12px;color:#7f948b;text-align:center}

@media (prefers-reduced-motion:reduce){.bl-stage *{animation:none!important;transition:none!important}}
/* 手机竖屏: 舞台按宽度, 控件挪一挪 */
@media (orientation:portrait) and (max-width:820px){
  .bl-stage{aspect-ratio:9/16;width:100%}
  html.game-full .bl-stage{aspect-ratio:auto}
  .bl-brand{display:none}
  .bl-score{top:8cqh;gap:1cqw;width:96cqw}
  .bl-side{padding:.6cqh 1.6cqw}
  .bl-ball{width:2.2cqh;height:2.2cqh;font-size:1cqh}
  .bl-spin{width:9cqh;height:9cqh;bottom:9cqh}.bl-spin-label{width:9cqh;bottom:6cqh}
  .bl-power{height:34cqh;width:8cqw}
  .bl-banner{font-size:2.4cqh;white-space:normal;max-width:90cqw}
  .bl-tip{max-width:92cqw;bottom:2cqh}
}
/* 自由球摆位: 只留「放好了」(主要给触屏), 杆法 / 力度 / 微调先藏起来 */
.bl-place{position:absolute;left:50%;bottom:6cqh;z-index:6;transform:translateX(-50%);padding:1cqh 3.4cqw;border:0;border-radius:999px;background:linear-gradient(180deg,#f6e2a6,#c49a4c);color:#2b1d07!important;font-weight:700;font-size:max(13px,1.8cqh);letter-spacing:.12em;box-shadow:0 6px 18px #c49a4c55,inset 0 1px #fff8}
.bl-stage.is-placing :is(.bl-spin,.bl-spin-label,.bl-power,.bl-nudge){opacity:0;pointer-events:none}
.bl-stage.is-placing .bl-gl{cursor:move}

.bl-menu-err{min-height:1.2em;margin:0 0 10px;color:#ff9c8a;font-size:13px}
.bl-box[hidden]{display:none}
.bl-box{z-index:30}