/* 萌兵冲冲冲(runner/stage.php): Q 萌糖果风, 粗描边圆角按钮 + 描边大字。类名统一 rn- 前缀(站点模板有 .hp / .hero, 避免撞名)。尺寸用舞台容器单位 cqh / cqw */
.rn-stage{--pink:#ff5fa2;--yellow:#ffd23f;--sky:#3fc1ff;--mint:#3fe0a8;--grape:#9b6bff;--ink:#3a2142;--paper:#fffaf2;
  --font:"Baloo 2","Arial Rounded MT Bold","PingFang SC","Hiragino Sans GB","Microsoft YaHei",system-ui,sans-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:#bfe7ff;color:var(--ink);
  font:600 14px/1.4 var(--font);user-select:none;-webkit-user-select:none}
.rn-stage *{box-sizing:border-box}
.rn-stage [hidden]{display:none!important}
html.game-full,html.game-full body{overflow:hidden}
html.game-full .rn-stage{position:fixed;inset:0;z-index:50;width:100vw;height:100dvh;aspect-ratio:auto;border-radius:0}
.rn-stage button{font:inherit;color:inherit;cursor:pointer}
.rn-stage :focus-visible{outline:3px solid var(--sky);outline-offset:3px}
.rn-gl,.rn-fx{position:absolute;inset:0;width:100%;height:100%;display:block}
.rn-gl{touch-action:none}
.rn-fx{pointer-events:none;z-index:2}
.rn-stage[data-state=play] .rn-gl{cursor:ew-resize}
.rn-pop{color:#fff;paint-order:stroke fill;-webkit-text-stroke:.16em var(--ink);text-shadow:0 .12em 0 var(--ink)}

/* ---------- 顶栏 ---------- */
.rn-top{position:absolute;left:0;right:0;top:0;z-index:6;display:flex;align-items:center;justify-content:space-between;height:7.5cqh;min-height:40px;padding:0 2cqw}
.rn-back,.rn-tools button{display:inline-flex;align-items:center;gap:.3em;height:max(30px,5cqh);padding:0 .9em;border:3px solid var(--ink);border-radius:999px;background:#fff;color:var(--ink);text-decoration:none;font-size:max(12px,1.8cqh);font-weight:800;box-shadow:0 3px 0 var(--ink);transition:transform .12s}
.rn-back:hover,.rn-tools button:hover{transform:translateY(-2px)}
.rn-back:active,.rn-tools button:active{transform:translateY(2px);box-shadow:0 1px 0 var(--ink)}
.rn-back svg{width:1.1em;height:1.1em;fill:none;stroke:currentColor;stroke-width:3;stroke-linecap:round;stroke-linejoin:round}
.rn-tools{display:flex;gap:.6cqw}
.rn-tools button svg{display:block}
.rn-brand{position:absolute;left:50%;transform:translateX(-50%);text-align:center;line-height:1}
.rn-brand small{display:block;font-size:max(9px,1.2cqh);letter-spacing:.3em;color:#fff;-webkit-text-stroke:3px var(--ink);paint-order:stroke fill}
.rn-brand b{font-size:max(18px,3.6cqh);font-weight:900;letter-spacing:.08em;color:var(--yellow);-webkit-text-stroke:.18em var(--ink);paint-order:stroke fill;text-shadow:0 .1em 0 var(--ink)}
.rn-stage[data-state=play] .rn-brand,.rn-stage[data-state=play] .rn-back{display:none}

/* ---------- HUD ---------- */
.rn-hud{position:absolute;inset:0;z-index:3;pointer-events:none}
.rn-prog{position:absolute;left:50%;top:1.6cqh;transform:translateX(-50%);display:flex;align-items:center;gap:1cqw;width:min(60cqw,520px)}
.rn-prog b{white-space:nowrap;font-size:max(12px,2cqh);color:#fff;-webkit-text-stroke:.2em var(--ink);paint-order:stroke fill}
.rn-prog__bar{position:relative;flex:1;height:max(12px,2.2cqh);border:3px solid var(--ink);border-radius:999px;background:#fff;overflow:visible}
.rn-prog__bar i{position:absolute;left:0;top:0;bottom:0;width:0;border-radius:999px;background:repeating-linear-gradient(-45deg,var(--mint) 0 8px,#7ff0c6 8px 16px)}
.rn-prog__bar em{position:absolute;right:-.4em;top:50%;transform:translateY(-55%);font-style:normal;font-size:max(16px,3cqh)}
.rn-stats{position:absolute;right:2cqw;top:9cqh;display:flex;flex-direction:column;align-items:flex-end;gap:.6cqh;font-size:max(13px,2.3cqh)}
.rn-stats span{padding:.15em .7em;border:3px solid var(--ink);border-radius:999px;background:#fff}
.rn-boss{position:absolute;left:50%;top:7cqh;transform:translateX(-50%);width:min(56cqw,520px);text-align:center}
.rn-boss b{display:block;font-size:max(14px,2.6cqh);color:#ffe36b;-webkit-text-stroke:.2em var(--ink);paint-order:stroke fill}
.rn-boss span{display:block;height:max(14px,2.6cqh);border:3px solid var(--ink);border-radius:999px;background:#fff;overflow:hidden}
.rn-boss i{display:block;height:100%;width:100%;background:linear-gradient(#ff7f9f,#ff3d6e);transition:width .15s}
.rn-weapon{position:absolute;left:2cqw;top:9cqh;padding:.35em .9em;border:3px solid var(--ink);border-radius:14px;background:#fff;font-size:max(12px,2cqh);box-shadow:0 3px 0 var(--ink)}
.rn-weapon b{color:var(--pink)}
.rn-weapon small{display:block;font-size:.75em;color:#7a6383}
.rn-team{position:absolute;left:2cqw;bottom:2.5cqh;display:flex;gap:.7cqw;margin:0;padding:0;list-style:none}
.rn-team li{width:max(54px,8.4cqh);padding:.3em .3em .4em;border:3px solid var(--ink);border-radius:14px;background:#fff;text-align:center;font-size:max(10px,1.5cqh);line-height:1.15;box-shadow:0 3px 0 var(--ink)}
.rn-team li.is-dead{opacity:.35;filter:grayscale(1)}
.rn-team li.is-lead{background:#fff4c2}
.rn-team .rn-face{display:grid;place-items:center;width:max(26px,4.2cqh);height:max(26px,4.2cqh);margin:0 auto .2em;border:2px solid var(--ink);border-radius:50%;color:#fff;font-weight:900;font-size:1.3em}
.rn-team .rn-hpbar{display:block;height:5px;margin-top:.2em;border-radius:3px;background:#eee;overflow:hidden}
.rn-team .rn-hpbar i{display:block;height:100%;background:var(--mint)}
.rn-team .rn-star{color:#ffb400;letter-spacing:-.1em}
.rn-ult{position:absolute;right:2.5cqw;bottom:3cqh;width:max(76px,13cqh);height:max(76px,13cqh);border:4px solid var(--ink);border-radius:50%;background:#fff;pointer-events:auto;overflow:hidden;display:grid;place-content:center;text-align:center;box-shadow:0 5px 0 var(--ink)}
.rn-ult i{position:absolute;left:0;right:0;bottom:0;height:0;background:linear-gradient(var(--yellow),#ff9f1c);z-index:0}
.rn-ult b,.rn-ult small{position:relative;z-index:1}
.rn-ult b{font-size:max(12px,2cqh);font-weight:900}
.rn-ult small{font-size:max(9px,1.3cqh);opacity:.7}
.rn-ult:not(:disabled){animation:rn-bounce .9s ease-in-out infinite}
.rn-ult:disabled{cursor:default}
@keyframes rn-bounce{50%{transform:translateY(-6px) scale(1.04)}}

.rn-banner{position:absolute;left:50%;top:22cqh;z-index:7;transform:translateX(-50%);margin:0;padding:.3em 1.2em;border:4px solid var(--ink);border-radius:999px;background:var(--yellow);font-size:max(16px,3.4cqh);font-weight:900;white-space:nowrap;box-shadow:0 5px 0 var(--ink);animation:rn-pop .35s cubic-bezier(.3,1.6,.5,1)}
.rn-toast{position:absolute;left:50%;bottom:8cqh;z-index:9;transform:translateX(-50%);margin:0;padding:.5em 1.2em;border:3px solid var(--ink);border-radius:14px;background:#fff;font-size:max(13px,2cqh)}
@keyframes rn-pop{from{transform:translateX(-50%) scale(.3)}}

/* ---------- 卡片 / 按钮 ---------- */
.rn-card{width:min(92cqw,440px);padding:2.4em 2em 1.8em;border:4px solid var(--ink);border-radius:26px;background:var(--paper);text-align:center;box-shadow:0 8px 0 var(--ink)}
.rn-card h2{margin:.1em 0 .4em;font-size:max(22px,4.4cqh);font-weight:900;color:var(--pink);-webkit-text-stroke:.12em var(--ink);paint-order:stroke fill}
.rn-card p{margin:.4em 0 1em;color:#5e4566}
.rn-card small{letter-spacing:.2em;color:#9a7fa3}
.rn-go{display:block;width:100%;margin:.6em 0 0;padding:.65em 1em;border:4px solid var(--ink);border-radius:18px;background:var(--mint);font-size:max(16px,2.6cqh)!important;font-weight:900!important;box-shadow:0 5px 0 var(--ink);transition:transform .12s}
.rn-go:hover{transform:translateY(-2px)}
.rn-go:active{transform:translateY(3px);box-shadow:0 2px 0 var(--ink)}
.rn-go:disabled{background:#ddd;cursor:not-allowed}
.rn-link{display:block;width:100%;margin:.5em 0 0;padding:.45em;border:0;background:none;color:#7a6383;text-decoration:underline;text-underline-offset:3px}
.rn-pausebox,.rn-end,.rn-pick{position:absolute;inset:0;z-index:8;display:grid;place-items:center;background:#3a214280;backdrop-filter:blur(3px)}
.rn-end__stars{font-size:max(30px,6cqh);letter-spacing:.1em;color:#ffb400;-webkit-text-stroke:2px var(--ink)}
.rn-end__stars .off{color:#ddd}

/* ---------- 三选一 ---------- */
.rn-pick{align-content:center;gap:3cqh}
.rn-pick h2{margin:0;font-size:max(22px,4.6cqh);font-weight:900;color:#fff;-webkit-text-stroke:.16em var(--ink);paint-order:stroke fill;text-align:center}
.rn-pick__cards{display:flex;flex-wrap:wrap;justify-content:center;gap:2cqw;padding:0 2cqw}
.rn-pick__cards button{width:min(28cqw,220px);min-width:150px;padding:1.4em 1em;border:4px solid var(--ink);border-radius:22px;background:#fff;box-shadow:0 6px 0 var(--ink);animation:rn-in .4s cubic-bezier(.3,1.5,.5,1) backwards;transition:transform .12s}
.rn-pick__cards button:nth-child(2){animation-delay:.08s}.rn-pick__cards button:nth-child(3){animation-delay:.16s}
.rn-pick__cards button:hover{transform:translateY(-6px) rotate(-1deg);background:#fff7d6}
.rn-pick__cards i{display:block;font-style:normal;font-size:max(34px,6cqh)}
.rn-pick__cards b{display:block;margin:.3em 0;font-size:max(16px,2.6cqh);color:var(--pink)}
.rn-pick__cards small{color:#5e4566;font-size:max(12px,1.8cqh)}
.rn-pick__cards kbd{display:inline-block;margin-top:.6em;padding:0 .5em;border:2px solid #c9b6cf;border-radius:6px;font:inherit;font-size:.8em;color:#9a7fa3}
@keyframes rn-in{from{opacity:0;transform:translateY(40px) scale(.8)}}

/* ---------- 主菜单 ---------- */
.rn-menu{position:absolute;inset:0;z-index:5;display:flex;flex-direction:column;padding:9cqh 3cqw 2.5cqh;background:linear-gradient(90deg,#fffaf2f0 0,#fffaf2e6 52%,#fffaf200 72%)}
.rn-menu__head{position:relative;width:min(58cqw,640px)}
.rn-menu__head h1{margin:0;font-size:max(30px,7cqh);font-weight:900;line-height:1;color:var(--yellow);-webkit-text-stroke:.14em var(--ink);paint-order:stroke fill;text-shadow:0 .08em 0 var(--ink)}
.rn-menu__head p{margin:.5em 0 0;color:#5e4566}
.rn-purse{position:absolute;right:0;top:.3em;padding:.2em .8em;border:3px solid var(--ink);border-radius:999px;background:#fff;font-size:max(14px,2.4cqh);font-weight:900}
.rn-tabs{display:flex;gap:.6cqw;margin:2cqh 0 1.5cqh;width:min(58cqw,640px)}
.rn-tabs button{flex:1;padding:.45em .3em;border:3px solid var(--ink);border-radius:14px;background:#fff;font-weight:800;font-size:max(12px,1.9cqh);box-shadow:0 3px 0 var(--ink)}
.rn-tabs button[aria-selected=true]{background:var(--pink);color:#fff}
.rn-pane{flex:1;min-height:0;width:min(58cqw,640px);overflow-y:auto;padding:.3em .3em 1em;scrollbar-width:thin}
.rn-note{margin:0 0 .8em;font-size:max(11px,1.7cqh);color:#7a6383}
.rn-chapters{display:flex;flex-direction:column;gap:1.4cqh}
.rn-chap{padding:.7em .9em;border:3px solid var(--ink);border-radius:18px;background:#fff;box-shadow:0 4px 0 var(--ink)}
.rn-chap header{display:flex;align-items:baseline;gap:.6em;margin-bottom:.5em}
.rn-chap header b{font-size:max(15px,2.5cqh);font-weight:900}
.rn-chap header small{font-size:.75em;letter-spacing:.2em;color:#9a7fa3}
.rn-chap.is-locked{opacity:.55}
.rn-stages{display:grid;grid-template-columns:repeat(6,1fr);gap:.5em}
.rn-stages button{position:relative;aspect-ratio:1;border:3px solid var(--ink);border-radius:14px;background:var(--sky);color:#fff;font-weight:900;font-size:max(14px,2.6cqh);-webkit-text-stroke:2px var(--ink);paint-order:stroke fill;box-shadow:0 3px 0 var(--ink)}
.rn-stages button.is-boss{background:var(--pink)}
.rn-stages button:disabled{background:#e4dbe6;color:#b5a6ba;-webkit-text-stroke:0;cursor:not-allowed;box-shadow:none}
.rn-stages button small{position:absolute;left:0;right:0;bottom:2px;font-size:.5em;letter-spacing:-.05em;color:#ffcf2e;-webkit-text-stroke:1px var(--ink)}
.rn-stages button.is-next{animation:rn-bounce 1.2s ease-in-out infinite;background:var(--mint)}
.rn-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:1.2cqh 1cqw}
.rn-item{display:flex;flex-direction:column;gap:.25em;padding:.7em .8em;border:3px solid var(--ink);border-radius:16px;background:#fff;box-shadow:0 3px 0 var(--ink)}
.rn-item.is-on{background:#fff4c2}
.rn-item header{display:flex;align-items:center;gap:.5em}
.rn-item header .rn-face{flex:none;display:grid;place-items:center;width:2.2em;height:2.2em;border:2px solid var(--ink);border-radius:50%;color:#fff;font-weight:900}
.rn-item header b{font-size:max(13px,2cqh);line-height:1.15}
.rn-item header small{display:block;font-size:.72em;color:#9a7fa3}
.rn-item p{margin:0;font-size:max(11px,1.6cqh);color:#5e4566}
.rn-item .rn-lv{color:var(--pink);font-weight:900}
.rn-item .rn-row{display:flex;gap:.4em;margin-top:auto;padding-top:.3em}
.rn-item .rn-row button{flex:1;padding:.35em .4em;border:3px solid var(--ink);border-radius:12px;background:var(--yellow);font-weight:800;font-size:max(11px,1.6cqh)}
.rn-item .rn-row button.rn-pickme{background:var(--sky);color:#fff}
.rn-item .rn-row button:disabled{background:#eee;color:#aaa;border-color:#ccc;cursor:not-allowed}

/* ---------- 玩法 ---------- */
.rn-help{width:min(92vw,640px);max-height:86vh;padding:1.6em 1.8em;border:4px solid var(--ink);border-radius:24px;background:var(--paper);color:var(--ink);font:600 14px/1.55 var(--font);box-shadow:0 8px 0 var(--ink)}
.rn-help::backdrop{background:#3a214288}
.rn-help h2{margin:0 0 .5em;color:var(--pink);font-weight:900}
.rn-help ul{margin:0;padding-left:1.2em}
.rn-help li{margin:.35em 0}
.rn-help b{color:#d6337a}
.rn-fine{font-size:12px;color:#9a7fa3}

/* 竖屏 / 窄屏: 菜单占满, 队伍条缩小 */
@container (max-aspect-ratio: 1/1){
  .rn-menu{background:#fffaf2f2}
  .rn-menu__head,.rn-tabs,.rn-pane{width:100%}
  .rn-team li{width:max(44px,6cqh);font-size:9px}
  .rn-prog{width:70cqw;top:9cqh}
  .rn-weapon,.rn-stats{top:14cqh}
}
@media (prefers-reduced-motion:reduce){.rn-ult:not(:disabled),.rn-stages button.is-next,.rn-banner,.rn-pick__cards button{animation:none}}