/* ARKIE 大逃杀 — 独立游戏页 */
:root{
  --bg:#050608;--bg2:#0a0c10;
  --panel:#0f1116;--panel2:#14171d;--panel3:#1a1e25;
  --line:#1a1e24;--line2:#252a33;
  --txt:#e8ecf1;--sub:#98a2ae;--dim:#5f6875;
  --acc:#1fb87d;--acc2:#3aa9d4;--gold:#c9963f;--red:#d95a5a;
  --mono:ui-monospace,'SF Mono',Monaco,Menlo,'Courier New',monospace;
  --sans:-apple-system,'PingFang SC','Microsoft YaHei','Heiti SC',sans-serif;
}
*{margin:0;padding:0;box-sizing:border-box}
html,body{height:100%}
body{
  background:radial-gradient(ellipse 120% 70% at 50% -10%,#0d1015 0%,var(--bg) 55%) fixed;
  color:var(--txt);font-family:var(--sans);font-size:14px;line-height:1.5;
  min-height:100vh;overflow-x:hidden;
}
.bg-grid{
  position:fixed;inset:0;z-index:0;pointer-events:none;
  background-image:linear-gradient(rgba(31,184,125,.026) 1px,transparent 1px),
                   linear-gradient(90deg,rgba(31,184,125,.026) 1px,transparent 1px);
  background-size:46px 46px;
  mask-image:radial-gradient(ellipse 100% 55% at 50% 0%,#000 30%,transparent 100%);
}
.bg-glow{
  position:fixed;top:-180px;left:50%;transform:translateX(-50%);
  width:520px;height:380px;z-index:0;pointer-events:none;
  background:radial-gradient(circle,rgba(201,150,63,.10) 0%,transparent 68%);
  filter:blur(40px);
}

/* 顶栏 */
.top{position:sticky;top:0;z-index:50;background:rgba(5,6,8,.85);backdrop-filter:blur(14px);
  border-bottom:1px solid var(--line);
  box-shadow:0 1px 0 rgba(255,255,255,.02) inset, 0 6px 24px -14px rgba(0,0,0,.8)}
.top-in{max-width:560px;margin:0 auto;padding:.7rem 1rem;display:flex;align-items:center;justify-content:space-between;gap:.8rem}
.brand{display:flex;align-items:center;gap:.55rem}
.brand-mark{
  width:32px;height:32px;border-radius:9px;flex-shrink:0;
  display:flex;align-items:center;justify-content:center;font-size:1rem;
  background:linear-gradient(135deg,rgba(201,150,63,.18),rgba(201,150,63,.05));
  border:1px solid rgba(201,150,63,.3);
  filter:drop-shadow(0 0 8px rgba(201,150,63,.28));
}
.brand{min-width:0;flex:1}
.brand>div{min-width:0}
.brand b{display:block;font-size:.92rem;font-weight:800;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
  background:linear-gradient(96deg,#e8ecf1 20%,var(--gold) 90%);
  -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
.brand i{display:block;font-family:var(--mono);font-size:.52rem;color:var(--dim);
  font-style:normal;letter-spacing:.16em;margin-top:.1rem;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.connect{
  padding:0 .85rem;height:32px;border-radius:8px;border:1px solid rgba(31,184,125,.35);
  background:linear-gradient(135deg,rgba(31,184,125,.14),rgba(58,169,212,.09));
  color:var(--acc);font-family:var(--sans);font-size:.72rem;font-weight:700;
  cursor:pointer;transition:.16s;white-space:nowrap;
  display:inline-flex;align-items:center;
}
.connect:hover{background:linear-gradient(135deg,rgba(31,184,125,.24),rgba(58,169,212,.14))}
.connect.connected{border-color:rgba(201,150,63,.45);color:var(--gold)}

main{position:relative;z-index:2;max-width:560px;margin:0 auto;padding:.9rem 1rem 2.5rem}

/* 卡片 */
.card{
  background:linear-gradient(180deg,rgba(255,255,255,.014) 0%,transparent 42%),var(--panel);
  border:1px solid var(--line2);border-radius:14px;padding:1rem;
  box-shadow:0 1px 0 rgba(255,255,255,.026) inset, 0 10px 30px -14px rgba(0,0,0,.72);
  margin-bottom:.8rem;
}

/* 奖池 */
.pot-card{
  background:linear-gradient(160deg,rgba(201,150,63,.09),rgba(201,150,63,.015) 60%),var(--panel);
  border-color:rgba(201,150,63,.26);
}
.pot-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:.5rem}
.ph-label{font-size:.68rem;color:var(--sub);letter-spacing:.04em}
.ph-live{display:flex;align-items:center;gap:.3rem;font-family:var(--mono);font-size:.6rem;color:var(--acc)}
.dot{width:6px;height:6px;border-radius:50%;background:var(--acc);
  box-shadow:0 0 0 0 rgba(31,184,125,.6);animation:pulse 2s infinite}
@keyframes pulse{0%{box-shadow:0 0 0 0 rgba(31,184,125,.5)}70%{box-shadow:0 0 0 7px rgba(31,184,125,0)}100%{box-shadow:0 0 0 0 rgba(31,184,125,0)}}
.pot-val{display:flex;align-items:baseline;gap:.45rem;margin-bottom:.75rem}
.pot-val b{font-size:1.85rem;font-weight:900;font-family:var(--mono);color:var(--gold);
  letter-spacing:-.02em;line-height:1}
.pot-val span{font-size:.72rem;color:var(--gold);opacity:.72;font-weight:600}
.pot-split{display:grid;grid-template-columns:repeat(3,1fr);gap:.45rem}
.pot-split>div{
  display:flex;align-items:center;justify-content:space-between;
  padding:.38rem .55rem;background:rgba(0,0,0,.26);border-radius:8px;
  border:1px solid rgba(201,150,63,.1);
}
.pot-split span{font-size:.62rem;color:var(--sub)}
.pot-split b{font-size:.7rem;color:var(--gold);font-family:var(--mono)}

/* 席位 */
.sec-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:.6rem}
.sec-head span{font-size:.7rem;color:var(--sub);letter-spacing:.03em}
.sec-head b{font-size:.7rem;color:var(--txt);font-family:var(--mono)}
.seats{display:grid;grid-template-columns:repeat(4,1fr);gap:.45rem}
.seat{
  display:flex;flex-direction:column;align-items:center;gap:.26rem;
  padding:.55rem .3rem;border-radius:10px;
  border:1px solid var(--line);background:var(--panel2);
  transition:.2s;
}
.seat-ico{
  width:26px;height:26px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  font-size:.62rem;font-weight:800;font-family:var(--mono);
}
.seat.filled .seat-ico{background:linear-gradient(135deg,var(--acc),var(--acc2));color:#04120c}
.seat.empty .seat-ico{background:var(--panel3);color:var(--dim);border:1px dashed var(--line2)}
.seat.me{border-color:var(--gold);box-shadow:0 0 0 2px rgba(201,150,63,.14)}
.seat.me .seat-ico{background:linear-gradient(135deg,var(--gold),#e0a94a);color:#20160a}
.seat.bot .seat-ico{background:linear-gradient(135deg,#3a4a5e,#2a3543);color:#8fa3b8}
.seat-addr{font-size:.52rem;font-family:var(--mono);color:var(--dim)}
.seat.empty .seat-addr{color:#3d4653}

/* 计时条 */
.timer-wrap{margin-top:.7rem}
.timer-bar{height:4px;background:var(--panel3);border-radius:2px;overflow:hidden;margin-bottom:.35rem}
.timer-fill{height:100%;background:linear-gradient(90deg,var(--acc),var(--gold));width:0;
  transition:width .9s linear;border-radius:2px}
.timer-txt{font-size:.6rem;color:var(--dim);font-family:var(--mono)}

/* 参战按钮 */
.btn-join{
  width:100%;padding:.95rem;border:none;border-radius:12px;margin-bottom:.8rem;
  background:linear-gradient(135deg,#c9963f 0%,#a87a2d 100%);
  color:#1a1206;font-family:var(--sans);font-size:.94rem;font-weight:900;letter-spacing:.02em;
  cursor:pointer;transition:.18s;
  box-shadow:0 4px 18px -6px rgba(201,150,63,.5), 0 1px 0 rgba(255,255,255,.14) inset;
}
.btn-join:hover:not(:disabled){box-shadow:0 6px 24px -6px rgba(201,150,63,.62), 0 1px 0 rgba(255,255,255,.16) inset;transform:translateY(-1px)}
.btn-join:active:not(:disabled){transform:translateY(0) scale(.995)}
.btn-join:disabled{opacity:.42;cursor:not-allowed;box-shadow:none}

/* 战况 */
.battle-card{border-color:rgba(201,150,63,.2)}
.battle-log{
  max-height:200px;overflow-y:auto;
  background:rgba(0,0,0,.32);border:1px solid var(--line);border-radius:10px;
  padding:.55rem .65rem;font-family:var(--mono);font-size:.6rem;line-height:1.7;
}
.bl{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;animation:fadeIn .3s}
@keyframes fadeIn{from{opacity:0;transform:translateX(-4px)}to{opacity:1;transform:none}}
.bl-normal{color:var(--sub)}
.bl-dead{color:var(--red)}
.bl-zone{color:#a06a2a}
.bl-win{color:var(--gold);font-weight:700}
.battle-result{margin-top:.7rem}
.br-title{font-size:.64rem;color:var(--dim);margin-bottom:.45rem}
.br-row{
  display:flex;justify-content:space-between;align-items:center;
  padding:.45rem .6rem;border-radius:9px;background:var(--panel2);
  margin-bottom:.35rem;font-size:.7rem;font-family:var(--mono);
  border:1px solid transparent;
}
.br-row b{color:var(--gold)}
.br-row.me{border-color:rgba(201,150,63,.42);background:rgba(201,150,63,.08)}

/* 规则 */
.rules{list-style:none;display:flex;flex-direction:column;gap:.42rem}
.rules li{font-size:.7rem;color:var(--sub);padding-left:.85rem;position:relative;line-height:1.5}
.rules li::before{content:'';position:absolute;left:0;top:.48rem;width:4px;height:4px;border-radius:50%;background:var(--gold);opacity:.7}
.rules b{color:var(--txt);font-weight:600}

/* 链接 */
.links{display:flex;align-items:center;justify-content:center;gap:.6rem;
  margin-top:1.1rem;font-size:.68rem}
.links a{color:var(--acc);text-decoration:none;transition:.15s}
.links a:hover{color:var(--gold)}
.links span{color:var(--dim)}

/* toast */
.toast{
  position:fixed;left:50%;top:50%;transform:translate(-50%,-50%) scale(.92);
  background:rgba(10,12,16,.97);border:1px solid var(--line2);border-radius:14px;
  padding:1.1rem 1.4rem;font-size:.9rem;font-weight:600;line-height:1.5;
  opacity:0;pointer-events:none;transition:.24s cubic-bezier(.2,.8,.2,1);
  z-index:200;max-width:86vw;min-width:min(260px,80vw);text-align:center;
  box-shadow:0 24px 60px -12px rgba(0,0,0,.86);
  white-space:pre-line;
}
.toast.on{opacity:1;transform:translate(-50%,-50%) scale(1)}
.toast.ok{border-color:rgba(31,184,125,.5);color:var(--acc)}
.toast.err{border-color:rgba(217,90,90,.5);color:var(--red)}

::-webkit-scrollbar{width:6px}
::-webkit-scrollbar-track{background:transparent}
::-webkit-scrollbar-thumb{background:var(--line2);border-radius:3px}

/* 窄屏：缩小品牌文字，避免换行 */
@media(max-width:420px){
  .brand-mark{width:28px;height:28px}
  .brand-mark svg{width:14px;height:14px}
  .brand b{font-size:.8rem}
  .brand i{font-size:.46rem;letter-spacing:.1em}
  .brand{gap:.42rem}
  .top-in{padding:.6rem .75rem;gap:.5rem}
  .connect{font-size:.66rem;padding:0 .6rem;height:30px}
  #sound-toggle{height:30px;font-size:.62rem;padding:0 .5rem}
}
/* 极窄屏：进一步缩小 */
@media(max-width:340px){
  .brand b{font-size:.72rem}
  .brand i{font-size:.42rem;letter-spacing:.06em}
  .brand-mark{width:25px;height:25px}
  .brand-mark svg{width:12px;height:12px}
  .top-in{padding:.5rem .6rem;gap:.35rem}
  .connect{font-size:.62rem;padding:0 .5rem;height:28px}
  .connect svg{width:12px;height:12px}
  #sound-toggle{padding:0 .4rem;height:28px}
}
  .seats{grid-template-columns:repeat(4,1fr);gap:.35rem}
  .seat-addr{font-size:.48rem}
  .pot-val b{font-size:1.6rem}
}

/* 诊断按钮 */
.diag{
  padding:0 .6rem;height:32px;border-radius:8px;
  border:1px solid var(--line2);background:var(--panel2);
  color:var(--sub);font-family:var(--mono);font-size:.66rem;
  cursor:pointer;transition:.16s;margin-right:.1rem;
}
.diag:hover{border-color:var(--gold);color:var(--gold)}

/* 按钮点击反馈（立即视觉响应） */
.btn-join:active:not(:disabled){
  transform:scale(.97);
  filter:brightness(1.15);
}
.btn-join.loading{
  position:relative;
  color:transparent !important;
  pointer-events:none;
}
.btn-join.loading::after{
  content:'';
  position:absolute;left:50%;top:50%;
  width:18px;height:18px;margin:-9px 0 0 -9px;
  border:2px solid rgba(0,0,0,.25);
  border-top-color:#1a1206;
  border-radius:50%;
  animation:btnspin .7s linear infinite;
}
@keyframes btnspin{to{transform:rotate(360deg)}}

/* ===== 中奖弹窗 ===== */
.win-modal{
  position:fixed;inset:0;z-index:300;
  display:none;align-items:center;justify-content:center;
  background:rgba(0,0,0,.82);backdrop-filter:blur(6px);
  padding:1.2rem;
}
.win-modal.on{display:flex;animation:wmFade .28s}

/* ===== 未中奖弹窗（冷色调，区别于中奖）===== */
.win-modal.lose .win-card{
  background:linear-gradient(170deg,rgba(90,120,170,.16),rgba(15,17,22,.98) 55%);
  border-color:rgba(120,150,200,.42);
  box-shadow:0 0 0 1px rgba(255,255,255,.04) inset,
             0 30px 70px -20px rgba(0,0,0,.9),
             0 0 60px -20px rgba(90,120,170,.45);
}
.win-modal.lose .win-title{
  background:linear-gradient(96deg,#e8ecf1 10%,#8fa8cc 90%);
  -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;
}
.win-modal.lose .win-medal{
  filter:grayscale(.15);
}
.win-modal.lose .win-rank{
  color:#9fb6d9;
  background:linear-gradient(96deg,#e8ecf1 10%,#7d9dc4 90%);
  -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;
}
.lose-stat{
  display:flex;gap:1.1rem;justify-content:center;
  margin:.55rem 0 .1rem;
  font-family:var(--mono);font-size:.78rem;color:var(--muted);
}
.lose-stat span{white-space:nowrap}
.win-modal.lose .win-btn{
  background:linear-gradient(135deg,#4a6fa5,#33507a);
  box-shadow:0 8px 22px -8px rgba(74,111,165,.8);
}
@keyframes wmFade{from{opacity:0}to{opacity:1}}
.win-card{
  width:100%;max-width:320px;
  background:linear-gradient(170deg,rgba(201,150,63,.14),rgba(15,17,22,.98) 55%);
  border:1px solid rgba(201,150,63,.45);
  border-radius:20px;padding:1.8rem 1.4rem 1.4rem;
  text-align:center;position:relative;
  box-shadow:0 0 0 1px rgba(255,255,255,.04) inset,
             0 30px 70px -20px rgba(0,0,0,.9),
             0 0 60px -20px rgba(201,150,63,.5);
  animation:wmPop .42s cubic-bezier(.2,1.3,.4,1);
}
@keyframes wmPop{from{transform:scale(.85) translateY(20px);opacity:0}to{transform:none;opacity:1}}
.win-medal{
  font-size:3.4rem;line-height:1;margin-bottom:.5rem;
  filter:drop-shadow(0 0 18px rgba(201,150,63,.75));
  animation:wmBounce 1.1s ease-in-out infinite;
}
@keyframes wmBounce{0%,100%{transform:translateY(0)}50%{transform:translateY(-7px)}}
.win-title{
  font-size:.74rem;color:var(--sub);letter-spacing:.12em;margin-bottom:.35rem;
}
.win-rank{
  font-size:1.5rem;font-weight:900;margin-bottom:.7rem;
  background:linear-gradient(96deg,#e8ecf1 10%,var(--gold) 90%);
  -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;
}
.win-amount{
  display:flex;align-items:baseline;justify-content:center;gap:.4rem;
  margin-bottom:.5rem;
}
.win-amount b{
  font-size:2.3rem;font-weight:900;font-family:var(--mono);
  color:var(--gold);letter-spacing:-.02em;
  text-shadow:0 0 24px rgba(201,150,63,.55);
}
.win-amount span{font-size:.8rem;color:var(--gold);opacity:.78;font-weight:600}
.win-sub{font-size:.66rem;color:var(--dim);margin-bottom:1.1rem}
.win-btn{
  width:100%;padding:.75rem;border:none;border-radius:11px;
  background:linear-gradient(135deg,#c9963f,#a87a2d);
  color:#1a1206;font-size:.88rem;font-weight:900;
  cursor:pointer;transition:.16s;
  box-shadow:0 4px 18px -6px rgba(201,150,63,.55);
}
.win-btn:active{transform:scale(.97)}
.win-btn:hover{filter:brightness(1.1)}

/* ===== 报名币种选择卡 ===== */
.pay-card { padding: 14px 16px 12px; }
.pay-card .sec-head { margin-bottom: 10px; }
.pay-card #pay-hint { font-size: 11px; font-weight: 500; opacity: .55; }

.pay-switch {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}
.pay-opt {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  padding: 12px 8px;
  border-radius: 14px;
  border: 1.5px solid var(--border, rgba(255,255,255,.14));
  background: color-mix(in srgb, var(--fg, #e8e8ee) 4%, transparent);
  cursor: pointer;
  transition: border-color .2s, background .2s, transform .12s, box-shadow .2s;
  font: inherit;
  color: var(--muted, #9aa0b5);
}
.pay-opt:hover { transform: translateY(-2px); border-color: color-mix(in srgb, var(--accent, #7c5cff) 55%, transparent); }
.pay-opt .pay-ico { font-size: 18px; line-height: 1; opacity: .85; }
.pay-opt .pay-name { font-size: 14px; font-weight: 800; letter-spacing: .4px; }
.pay-opt .pay-sub { font-size: 10px; font-weight: 500; opacity: .65; }
.pay-opt.active {
  color: #fff;
  border-color: transparent;
  background: linear-gradient(135deg, var(--accent, #7c5cff), var(--accent2, #4ad8c7));
  box-shadow: 0 6px 22px color-mix(in srgb, var(--accent, #7c5cff) 40%, transparent);
}
.pay-opt.active .pay-sub { opacity: .85; }

.pay-fee {
  margin-top: 10px;
  text-align: center;
  font-size: 12px;
  color: var(--muted, #9aa0b5);
}
.pay-fee b { color: var(--fg, #e8e8ee); font-weight: 700; }