/* BUILD 180:
 *  ① 戳戳乐(老板:「只有三种价格 1 块 5 块 和 10 块的,不用选筹码,你换其他方式」):筹码行换成三张咖啡店的价钱牌(每格 1 / 5 / 10),点哪张就按哪个价戳;
 *  ② 大厅首页(老板:「完整游戏玩法规则 这个拿走」「21Ace 的占比是最大的,第二是喝酒游戏,最小的是休闲游戏」):规则入口不放大厅了,三张大卡按 大 / 中 / 小 排;
 *  ③ 夜航:速度只剩一档(速度行拿掉,见 runway.js)。 */

/* ── ① 戳戳乐价钱牌 ── */
#app .tkprice{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;width:100%;max-width:440px;padding:2px 2px 0}
#app .tkpb{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:0;min-height:58px;padding:10px 6px 8px;border:2px solid #d9b47a;border-radius:8px 8px 16px 16px;
  background:linear-gradient(180deg,#fff8e6 0%,#f7e6c4 100%);color:#7a4a12;cursor:pointer;-webkit-tap-highlight-color:transparent;touch-action:manipulation;font:inherit;
  box-shadow:0 4px 10px rgba(0,0,0,.35),inset 0 1px 0 #fff;transition:transform .12s ease,box-shadow .12s ease,border-color .12s ease}
#app .tkpb::before{content:'';position:absolute;top:5px;left:50%;width:7px;height:7px;margin-left:-3.5px;border-radius:50%;background:#2a1a08;box-shadow:inset 0 1px 1px rgba(0,0,0,.6),0 0 0 2px #e9d2a4}   /* 挂牌的小孔 */
#app .tkpb i{font-style:normal;font-family:var(--toon2);font-size:10.5px;letter-spacing:.12em;color:#a0763a;margin-top:6px}
#app .tkpb b{font-family:var(--toon2);font-size:24px;line-height:1.05;color:#c8262c;letter-spacing:.02em;text-shadow:0 1px 0 #fff}
#app .tkpb s{position:absolute;left:8px;right:8px;bottom:5px;height:2px;border-bottom:2px dashed rgba(160,118,58,.35);text-decoration:none}
#app .tkpb.on{border-color:#f6d77a;background:linear-gradient(180deg,#fff2c2 0%,#f6d77a 100%);transform:translateY(-2px) rotate(-1.5deg);box-shadow:0 8px 18px rgba(0,0,0,.4),0 0 0 3px rgba(246,215,122,.35),inset 0 1px 0 #fff}
#app .tkpb.on b{color:#a5121a}
#app .tkpb.on::after{content:'✓';position:absolute;top:-8px;right:-6px;width:20px;height:20px;border-radius:50%;background:#c8262c;color:#fff;font-size:12px;line-height:20px;text-align:center;box-shadow:0 2px 6px rgba(0,0,0,.4)}
#app .tkpb:not(:disabled):active{transform:translateY(1px)}
#app .tkpb:disabled{opacity:.55;cursor:default}
#app .tkpb:disabled.on{opacity:1}
#app .tkprice+.tkbar{margin-top:8px}

/* ── ② 大厅首页:没有规则入口;三张卡 大 / 中 / 小 ── */
#app .lobby-home .lobrules{display:none}
@media(max-width:480px){
  #app .hc-ace .hcart{aspect-ratio:1.5/1}
  #app .hc-drink .hcart{aspect-ratio:2.3/1}
  #app .hc-free .hcart{aspect-ratio:3.2/1}
  #app .hc-ace .hctx b{font-size:22px}
  #app .hc-free .hctx{padding-top:18px}
  #app .hc-free .hctx b{font-size:17px}
  #app .hc-free .hctx i{font-size:11px}
  #app .hc-free .hcn{top:8px;right:8px;padding:4px 8px;font-size:11px}
}
@media(min-width:481px) and (max-width:899px){
  #app .hc-ace .hcart{aspect-ratio:1.7/1}
  #app .hc-drink .hcart{aspect-ratio:2.5/1}
  #app .hc-free .hcart{aspect-ratio:3.4/1}
}
@media(min-width:900px){
  #app .lobby-top .homecards{align-items:stretch}
  #app .hc-ace{flex:0 0 44%}
  #app .hc-drink{flex:0 0 calc(32% - 12px)}
  #app .hc-free{flex:0 0 calc(24% - 12px)}
  #app .hcard .hcart{aspect-ratio:auto;height:300px}
  #app .hc-ace .hctx b{font-size:30px}
  #app .hc-free .hctx{padding:60px 96px 16px 14px}
  #app .hc-free .hctx b{font-size:20px}
  #app .hc-free .hctx i{font-size:12px}
  #app .hc-free .hcgo{right:12px;bottom:14px;padding:8px 12px;font-size:12px}
}

/* ── ④ 列表页(点进某一款):卡片下面直接摆这一款的规则;列表卡的封面统一用大厅门上那张图 ── */
#app .lobrulesin{width:100%;max-width:560px;margin:18px auto 0;text-align:left}
#app .lobrulesin.hide{display:none}
#app .lobrulesin .lrhead{display:flex;align-items:center;justify-content:center;gap:10px;margin:0 0 12px;font:700 11px/1 var(--display);letter-spacing:.3em;color:var(--gold);text-transform:uppercase}
#app .lobrulesin .lrhead i{font-style:normal;font-size:8px;opacity:.7}
#app .lobrulesin .rfsec{margin-bottom:18px}
#app .lobrulesin .rfsec > h3{display:flex;align-items:center;gap:8px}
#app .lobrulesin .rfcard{margin-bottom:10px}
#app .lobrulesin .rfnote{margin-top:8px}
#app .sccard .thumb .ac3door,#app .sgcard .thumb .ac3door{aspect-ratio:4/3;height:auto}
#app .fgcard .thumb{display:block;margin-bottom:10px}
@media(min-width:700px){#app .lobrulesin{max-width:640px}}