/* =========================================================
   GWYF v3 · 样式（移动优先 / 桌面全尺寸自适应）
   ========================================================= */
:root{
  --bg:#0a0714; --panel:#181029; --panel2:#221639;
  --line:#33235a; --line2:#4a3080;
  --neon:#ff2e88; --gold:#ffc93c; --green:#2ce08a;
  --red:#ff4141; --blue:#4bc9ff; --txt:#efe8ff; --muted:#8d7fb5;
  --mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
  --r:14px;
  --pad: clamp(12px, 3.2vw, 26px);
  --gap: clamp(8px, 1.6vw, 14px);
  --hudh: clamp(50px, 8vh, 64px);
}
*{box-sizing:border-box; -webkit-tap-highlight-color:transparent}
html,body{margin:0;padding:0}
html{-webkit-text-size-adjust:100%}
body{
  background:
    radial-gradient(90vw 55vh at 10% -12%, #2a1140 0%, transparent 58%),
    radial-gradient(80vw 50vh at 96% -6%, #10304a 0%, transparent 54%),
    var(--bg);
  color:var(--txt);
  font-family:"PingFang SC","Hiragino Sans GB","Microsoft YaHei",system-ui,-apple-system,sans-serif;
  overflow:hidden;
  overscroll-behavior:none;
  font-size:clamp(13px, 1.05vw + 9px, 15px);
  line-height:1.5;
}
button{font-family:inherit;cursor:pointer;border:none;background:none;color:inherit;font-size:inherit}
input{font-family:inherit;font-size:inherit}
h1,h2,h3,p{margin:0}
.mono{font-family:var(--mono)}
.muted{color:var(--muted);font-size:.9em}
.center{text-align:center}
.hide{display:none !important}
.spacer{flex:1}
.row{display:flex;align-items:center}
.gap8{gap:8px} .gap10{gap:10px}
.wrap-row{flex-wrap:wrap;gap:10px}
#app{height:100dvh;height:100vh;display:flex;flex-direction:column}

/* ---------- 按钮 ---------- */
.btn{
  min-height:42px; padding:.6em 1.1em; border-radius:11px; font-weight:700;
  background:linear-gradient(180deg,#2b1d4a,#1d1435); border:1px solid var(--line);
  transition:transform .12s, border-color .12s, opacity .12s; white-space:nowrap;
  display:inline-flex; align-items:center; justify-content:center; gap:.4em;
}
.btn:hover:not(:disabled){border-color:#5a3f96}
.btn:active:not(:disabled){transform:scale(.97)}
.btn:disabled{opacity:.34;cursor:not-allowed}
.btn.primary{background:linear-gradient(180deg,#ff4d9d,#c9145f);border-color:#ff7ab5;color:#fff;box-shadow:0 8px 22px -12px #ff2e88}
.btn.green{background:linear-gradient(180deg,#38e896,#0f9a5c);border-color:#7ef7c2;color:#05230f}
.btn.gold{background:linear-gradient(180deg,#ffd45e,#d99414);border-color:#ffe08a;color:#2a1a00}
.btn.sm{min-height:36px;padding:.4em .8em;font-size:.88em;border-radius:9px}
.btn.wide{width:100%}
.btn.tiny-btn{min-height:34px;padding:.3em .8em;font-size:.82em;margin-top:6px}
.pill{display:inline-flex;align-items:center;gap:6px;padding:3px 9px;border-radius:99px;background:#241738;border:1px solid var(--line);font-size:.78em;font-family:var(--mono);color:#c9bde8;white-space:nowrap}
.eyebrow{font-family:var(--mono);font-size:.72em;letter-spacing:.14em;color:var(--muted);text-transform:uppercase}
.hk{display:block;font-size:.66em;letter-spacing:.14em;color:var(--muted);text-transform:uppercase}
.note{font-size:.82em;color:var(--muted);line-height:1.6;margin-top:12px}

/* ---------- HUD ---------- */
#hud{
  flex:0 0 auto; min-height:var(--hudh); display:flex; align-items:center;
  gap:var(--gap);
  padding-block:6px;
  padding-inline:max(var(--pad), calc((100vw - 1100px) / 2));
  padding-top:max(6px, env(safe-area-inset-top));
  background:linear-gradient(180deg,#1a1130,#130c25);
  border-bottom:1px solid var(--line);
  overflow:hidden;
}
.hitem{display:flex;flex-direction:column;justify-content:center;min-width:0;flex:0 1 auto}
.hitem.grow{flex:1 1 auto}
.hitem.grow2{flex:2 1 auto;min-width:56px;max-width:440px}
.hv{font-family:var(--mono);font-weight:700;font-size:clamp(13px,1.1vw + 8px,16px);line-height:1.15;white-space:nowrap}
.hv.big{color:var(--gold);font-size:clamp(15px,1.5vw + 9px,21px)}
.hv.tk{color:#ff9ad0}
#hTime{font-variant-numeric:tabular-nums}
#hTime.warn{color:var(--red)}
.qbar{height:7px;border-radius:7px;background:#0d0819;border:1px solid var(--line);overflow:hidden;margin-top:5px}
.qbar>i{display:block;height:100%;width:0;background:linear-gradient(90deg,#22b573,#2ce08a);transition:width .3s}
.qbar.over>i{background:linear-gradient(90deg,#ffc93c,#ff8a3c)}
.plist{display:flex;gap:4px;align-items:center;flex:0 1 auto;overflow:hidden}
.dot{width:clamp(20px,2.6vw,26px);height:clamp(20px,2.6vw,26px);border-radius:50%;display:grid;place-items:center;font-size:.72em;font-weight:800;color:#1a0b12;border:2px solid var(--bg);flex:0 0 auto}
.dot.off{opacity:.28}
.tag-btn{font-family:var(--mono);font-size:.78em;color:var(--muted);padding:5px 8px;border:1px solid var(--line);border-radius:8px;flex:0 0 auto}
.tag-btn:hover{color:var(--gold);border-color:var(--gold)}

/* ---------- 视图 ---------- */
#stage{flex:1 1 auto;position:relative;overflow:hidden}
.view{position:absolute;inset:0;overflow-y:auto;overflow-x:hidden;-webkit-overflow-scrolling:touch;display:none;padding:var(--pad);padding-bottom:max(var(--pad), env(safe-area-inset-bottom))}
.view.on{display:block}
.wrap{width:100%;max-width:1100px;margin:0 auto}
.wrap.narrow{max-width:520px}

/* ---------- 加入页 ---------- */
.hero{text-align:center;padding:clamp(10px,4vh,40px) 0 18px}
.logo{
  font-family:var(--mono);font-weight:800;line-height:.94;letter-spacing:-.02em;
  font-size:clamp(22px,6.4vw,48px);
  background:linear-gradient(180deg,#fff5c9,#ffc93c 46%,#ff2e88);
  -webkit-background-clip:text;background-clip:text;color:transparent;
}
.sub{font-size:.78em;letter-spacing:.28em;color:var(--muted);margin-top:10px;font-family:var(--mono)}
.card{background:var(--panel);border:1px solid var(--line);border-radius:var(--r)}
.pad{padding:clamp(14px,4vw,22px)}
.lb{display:block;font-size:.68em;letter-spacing:.14em;color:var(--muted);margin:0 0 6px;text-transform:uppercase}
.card input{
  width:100%;padding:.75em .85em;border-radius:10px;background:#0d0819;border:1px solid var(--line);
  color:var(--txt);outline:none;margin-bottom:14px;min-height:44px;
}
.card input:focus{border-color:var(--neon)}
.avrow{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:16px}
.av{width:34px;height:34px;border-radius:50%;border:2px solid transparent;transition:.12s;flex:0 0 auto}
.av.on{border-color:#fff;transform:scale(1.08)}
.code-in{text-align:center;letter-spacing:.4em;font-family:var(--mono);font-size:1.3em;margin-bottom:0;flex:1}
.code-in::placeholder{letter-spacing:.1em;font-size:.8em}

/* ---------- 大厅 ---------- */
.bigcode{font-family:var(--mono);font-size:clamp(34px,12vw,64px);font-weight:800;letter-spacing:.12em;color:var(--gold);line-height:1;margin:6px 0}
.seats{display:grid;grid-template-columns:repeat(auto-fill,minmax(140px,1fr));gap:8px;margin:18px 0}
.seat{background:var(--panel);border:1px solid var(--line);border-radius:12px;padding:10px;display:flex;align-items:center;gap:9px;min-height:52px}
.seat .av2{width:28px;height:28px;border-radius:50%;display:grid;place-items:center;font-size:.78em;font-weight:800;color:#1a0b12;flex:0 0 auto}
.seat b{font-size:.92em;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.seat.empty{opacity:.35;justify-content:center;border-style:dashed;font-size:.82em;color:var(--muted)}

/* ---------- 商店 ---------- */
.vhead{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;flex-wrap:wrap;margin-bottom:var(--gap)}
.vhead h2{font-size:clamp(17px,2.4vw,24px);margin:2px 0 3px}
.wallet{text-align:right;flex:0 0 auto}
.wallet b{display:block;font-family:var(--mono);font-size:clamp(20px,3vw,28px);color:#ff9ad0;line-height:1.1}
.shopgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,200px),1fr));gap:var(--gap)}
.sitem{background:var(--panel);border:1px solid var(--line);border-radius:var(--r);padding:12px;display:flex;flex-direction:column;gap:7px}
.sitem.sold{opacity:.32;pointer-events:none}
.sitem .nm{font-weight:800;display:flex;align-items:center;gap:7px;flex-wrap:wrap}
.sitem .ds{font-size:.85em;color:#b8aad8;line-height:1.55;flex:1}
.sitem .foot{display:flex;align-items:center;justify-content:space-between;gap:8px}
.sitem .price{font-family:var(--mono);color:var(--gold);font-weight:700;font-size:.9em}
.invbar{display:flex;gap:7px;flex-wrap:wrap;align-items:center;margin-top:16px;padding-top:14px;border-top:1px dashed var(--line)}
.chipbtn{display:inline-flex;align-items:center;gap:6px;padding:8px 11px;border-radius:10px;background:#1d1435;border:1px solid var(--line);font-size:.85em;min-height:38px}
.chipbtn:hover{border-color:var(--gold)}
.chipbtn span{color:var(--muted);font-size:.82em}

/* ---------- 赌场 / 机器 ---------- */
.gsec{margin-bottom:calc(var(--gap) + 4px)}
.gsec-h{display:flex;align-items:center;gap:8px;margin-bottom:7px}
.gsec-h svg{width:18px;height:18px;color:var(--gold);flex:0 0 auto}
.gsec-h b{font-size:.95em}
.gsec-h .tag{font-size:.66em;padding:2px 6px;border-radius:6px;font-family:var(--mono);letter-spacing:.06em}
.tag.low{background:#0d3a26;color:#4ff0a2}
.tag.mid{background:#3a320d;color:#ffd964}
.tag.high{background:#3d0f1a;color:#ff7a90}
/* 玩法卡片（一级） */
.ggrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,158px),1fr));gap:10px}
.gcard{
  position:relative;background:linear-gradient(160deg,#201538,#150e28);border:1px solid var(--line);
  border-radius:14px;padding:16px 14px;text-align:left;transition:.14s;
  display:flex;flex-direction:column;gap:5px;align-items:flex-start;min-height:104px;
}
.gcard:hover{border-color:#6b48b0;transform:translateY(-2px);box-shadow:0 12px 26px -16px #7b3bff}
.gcard:active{transform:scale(.985)}
.gcard .gico{color:var(--gold)}
.gcard .gico svg{width:26px;height:26px}
.gcard .gnm{font-weight:800;font-size:1.02em}
.gcard .gsub{font-size:.78em;color:var(--muted)}
.gcard.playing{border-color:var(--neon);background:#2a1230}
.gcard.playing .gnm{color:#ff9ad0}

/* 台子二级页 */
.ghead{display:flex;align-items:center;gap:12px;margin-bottom:12px}
.ghead-t{display:flex;align-items:center;gap:8px}
.ghead-t svg{width:18px;height:18px;color:var(--gold)}
.ghead-t b{font-size:1.02em}
.mgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,164px),1fr));gap:9px}
.mcard{
  position:relative;background:linear-gradient(160deg,#201538,#150e28);border:1px solid var(--line);
  border-radius:13px;padding:11px 12px;text-align:left;transition:.13s;
  display:flex;flex-direction:column;gap:7px;min-height:96px;
}
.mcard:hover{border-color:#6b48b0;transform:translateY(-1px)}
.mcard:active{transform:scale(.985)}
.mcard .mhead{display:flex;align-items:center;justify-content:space-between;gap:6px}
.mcard .mhead b{font-family:var(--mono);font-weight:800;font-size:.92em}
.mcard .mcnt{font-size:.7em;color:var(--muted);font-family:var(--mono)}
.mcard.busy .mcnt{color:var(--green)}
.mcard .mwho{display:flex;gap:3px;min-height:20px;align-items:center}
.mcard .mwho i{width:20px;height:20px;border-radius:50%;display:grid;place-items:center;font-size:.62em;font-weight:800;color:#1a0b12;font-style:normal;border:1.5px solid #0d0819}
.mcard .mwho i.more{background:#33235a;color:#c9bde8}
.mcard .mst{font-size:.72em;color:var(--muted);line-height:1.45;overflow:hidden;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}
.mcard.playing{border-color:var(--neon);background:#2a1230}
.mcard.playing .mhead b{color:#ff9ad0}
@keyframes blink{50%{opacity:.25}}
.logbox{margin-top:18px;padding-top:14px;border-top:1px dashed var(--line)}
.logline{display:flex;justify-content:space-between;gap:12px;font-size:.85em;padding:6px 0;border-bottom:1px solid #1e1633;color:#c3b7e0}
.logline b{font-family:var(--mono)}
.logline .w{color:#6dffb8} .logline .l{color:#ff8ba0}

/* ---------- 结算 ---------- */
.big{font-family:var(--mono);font-size:clamp(24px,6vw,52px);font-weight:800;line-height:1.08}
.reslist{display:grid;gap:8px;margin:18px auto;max-width:520px}
.resrow{display:flex;justify-content:space-between;gap:10px;padding:11px 14px;background:var(--panel);border:1px solid var(--line);border-radius:10px;font-size:.92em}
.resrow b{font-family:var(--mono)}

/* =========================================================
   赌桌面板
   ========================================================= */
#overlay{position:fixed;inset:0;background:rgba(5,3,10,.9);backdrop-filter:blur(8px);display:none;z-index:80}
#overlay.on{display:flex;align-items:center;justify-content:center}
.sheet{
  width:100%;max-width:min(760px,100%);
  max-height:100dvh;height:100dvh;
  background:linear-gradient(170deg,#1e1436,#120c22);
  display:flex;flex-direction:column;overflow:hidden;
}
@media (min-width:700px){
  .sheet{height:auto;max-height:94vh;border:1px solid var(--line2);border-radius:18px;box-shadow:0 30px 90px -30px #000}
}
.sheet-head{
  flex:0 0 auto;display:flex;align-items:center;justify-content:space-between;gap:10px;
  padding:12px var(--pad);padding-top:max(12px, env(safe-area-inset-top));
  border-bottom:1px solid rgba(255,255,255,.05);
}
.stitle{font-weight:800;display:flex;align-items:center;gap:8px;font-size:1.02em}
.stitle svg{width:19px;height:19px;color:var(--gold)}
.slim{font-family:var(--mono);font-size:.7em;color:var(--muted);margin-top:3px}
.xbtn{width:38px;height:38px;border-radius:10px;border:1px solid var(--line);color:var(--muted);font-size:1.1em;line-height:1;flex:0 0 auto}
.xbtn:hover{color:#fff;border-color:var(--line2)}
.sheet-body{flex:1 1 auto;overflow-y:auto;-webkit-overflow-scrolling:touch;padding:12px var(--pad);display:flex;flex-direction:column}
.sheet-foot{flex:0 0 auto;padding:10px var(--pad);padding-bottom:max(10px, env(safe-area-inset-bottom));border-top:1px solid rgba(255,255,255,.06);background:#150e28}

/* 同桌状态 */
.crowd{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:10px;min-height:24px}
.crowd .c{display:inline-flex;align-items:center;gap:6px;padding:4px 9px;border-radius:99px;background:#1d1435;border:1px solid var(--line);font-size:.78em;font-family:var(--mono)}
.crowd .c i{width:16px;height:16px;border-radius:50%;display:grid;place-items:center;font-size:.72em;font-weight:800;color:#1a0b12;font-style:normal}
.crowd .c em{font-style:normal;color:var(--muted)}

/* 舞台 */
.stagearea{position:relative;min-height:120px;flex:1 1 auto;display:flex;flex-direction:column;justify-content:center}
.wheelwrap{position:relative;width:min(300px,72vw);margin:6px auto 0;max-width:100%}
.wheelwrap svg{display:block;width:100%;height:auto;filter:drop-shadow(0 14px 34px rgba(0,0,0,.65))}
.wheelrot{transform-origin:50% 50%;transform:rotate(0deg)}
.pointer{position:absolute;top:-5px;left:50%;transform:translateX(-50%);width:0;height:0;border-left:9px solid transparent;border-right:9px solid transparent;border-top:17px solid var(--gold);filter:drop-shadow(0 2px 6px #000);z-index:2}

.dicestage{position:relative;display:flex;align-items:center;justify-content:center;gap:clamp(14px,5vw,30px);height:clamp(150px,26vh,200px);margin:4px 0}
.dice{
  --ds:clamp(48px,13vw,64px);
  width:var(--ds);height:var(--ds);position:relative;
  perspective:700px;perspective-origin:50% 50%;
}
.die{position:absolute;inset:0;transform-style:preserve-3d}
.face{
  position:absolute;left:0;top:0;width:var(--ds);height:var(--ds);border-radius:12%;
  background:linear-gradient(150deg,#fffdf6,#e8e0f5);
  box-shadow:inset 0 0 0 1px #d8cfe8, inset 0 -6px 12px rgba(0,0,0,.10);
  display:grid;grid-template-columns:repeat(3,1fr);grid-template-rows:repeat(3,1fr);padding:11%;
  backface-visibility:hidden;
}
.f1{transform:rotateY(0deg) translateZ(calc(var(--ds) / 2))}
.f6{transform:rotateY(180deg) translateZ(calc(var(--ds) / 2))}
.f2{transform:rotateY(90deg) translateZ(calc(var(--ds) / 2))}
.f5{transform:rotateY(-90deg) translateZ(calc(var(--ds) / 2))}
.f3{transform:rotateX(90deg) translateZ(calc(var(--ds) / 2))}
.f4{transform:rotateX(-90deg) translateZ(calc(var(--ds) / 2))}
.face i{width:52%;height:52%;border-radius:50%;background:radial-gradient(circle at 35% 30%,#5a3f96,#1c1030);align-self:center;justify-self:center;box-shadow:inset 0 0 2px #000}
.dsum{position:absolute;bottom:0;left:0;right:0;text-align:center;font-family:var(--mono);font-size:.82em;color:var(--muted)}

.handzone{position:relative}
.hlabel{display:flex;align-items:center;gap:8px;font-size:.74em;letter-spacing:.12em;color:var(--muted);margin:8px 0 6px}
.hlabel b{color:var(--gold);font-family:var(--mono);letter-spacing:0;font-size:1.15em}
.hand{display:flex;gap:6px;align-items:flex-end;min-height:clamp(66px,15vw,84px);flex-wrap:wrap}
.shoe{position:absolute;top:2px;right:2px;width:26px;height:36px;border-radius:5px;background:repeating-linear-gradient(135deg,#2b1a52,#2b1a52 4px,#3a2566 4px,#3a2566 8px);border:1px solid var(--line2);z-index:1}
.pcard{width:clamp(42px,11vw,56px);height:clamp(60px,16vw,80px);perspective:700px;flex:0 0 auto}
.pcard-in{position:relative;width:100%;height:100%;transform-style:preserve-3d;transition:transform .4s cubic-bezier(.3,.9,.3,1)}
.pcard.down .pcard-in{transform:rotateY(180deg)}
.pcard-face{
  position:absolute;inset:0;border-radius:7px;backface-visibility:hidden;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  font-family:var(--mono);font-weight:800;font-size:clamp(14px,3.6vw,18px);
  background:linear-gradient(160deg,#fdfbff,#ece4fa);color:#160a22;
  box-shadow:0 5px 12px rgba(0,0,0,.45), inset 0 0 0 1px #d9d0ea;
}
.pcard-face small{font-size:.78em;line-height:1;margin-top:1px}
.pcard-face.red{color:#c8102e}
.pcard-back{transform:rotateY(180deg);background:repeating-linear-gradient(45deg,#2b1a52,#2b1a52 5px,#3a2566 5px,#3a2566 10px);box-shadow:0 5px 12px rgba(0,0,0,.45), inset 0 0 0 1px var(--line2)}

.crashstage{position:relative;height:clamp(150px,26vh,200px);border-radius:13px;background:radial-gradient(circle at 28% 82%,#1b2a4a,#0b0817 72%);border:1px solid var(--line);overflow:hidden}
.crashmult{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-family:var(--mono);font-weight:800;font-size:clamp(34px,10vw,48px);color:var(--green);text-shadow:0 0 30px rgba(44,224,138,.45);font-variant-numeric:tabular-nums}
.crashmult.boom{color:var(--red);text-shadow:0 0 30px rgba(255,65,65,.5)}
.rkt{position:absolute;width:22px;height:22px}
.rkt svg{width:22px;height:22px;filter:drop-shadow(0 0 10px #6fd0ff)}

.lanes{display:grid;gap:6px}
.lane{position:relative;height:clamp(30px,6vh,38px);border-radius:9px;background:#120c22;border:1px solid var(--line);overflow:hidden;transition:.2s}
.lane.win{border-color:var(--gold);background:#241a08}
.duck{position:absolute;top:50%;transform:translate(-50%,-50%);width:24px;height:24px;border-radius:50%;background:#ffd45e;color:#2a1a00;display:grid;place-items:center;font:800 11px var(--mono);box-shadow:0 0 12px rgba(255,212,94,.45)}
.lane .od{position:absolute;right:9px;top:50%;transform:translateY(-50%);font-family:var(--mono);font-size:.76em;color:var(--muted)}

/* 下注区 */
.betrow{display:flex;align-items:center;gap:7px;flex-wrap:wrap}
.betrow input{
  width:clamp(84px,22vw,120px);padding:.5em .7em;border-radius:9px;background:#0d0819;color:var(--gold);
  border:1px solid var(--line);font-weight:700;text-align:right;font-family:var(--mono);outline:none;min-height:42px;
}
.betrow input:focus{border-color:var(--gold)}
.chip{padding:.42em .58em;border-radius:9px;background:#241738;border:1px solid var(--line);font-family:var(--mono);font-size:.8em;color:#c9bde8;min-height:42px;min-width:2.5em;text-align:center}
.chip:hover{border-color:var(--gold);color:#fff}
.picks{display:grid;gap:6px;margin-top:8px}
.picks.c4{grid-template-columns:repeat(4,1fr)}
.picks.c3{grid-template-columns:repeat(3,1fr)}
.picks.c5{grid-template-columns:repeat(5,1fr)}
.picks.c2{grid-template-columns:repeat(2,1fr)}
@media (max-width:420px){ .picks.c5{grid-template-columns:repeat(3,1fr)} }
.picks .btn{min-height:44px;font-size:.86em;padding:.4em .2em}
.numgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(38px,1fr));gap:4px;margin-top:8px}
.numgrid .btn{min-height:38px;padding:0;font-family:var(--mono);font-size:.82em;border-radius:7px}

.res{margin-top:10px;padding:10px 12px;border-radius:10px;font-size:.9em;text-align:center;
  min-height:42px;display:flex;align-items:center;justify-content:center;gap:8px;flex-wrap:wrap;
  background:#0f0a1c;border:1px solid var(--line);transition:.2s}
.res.win{background:#0b2e20;border-color:#1e7a52;color:#6dffb8}
.res.lose{background:#2e0b14;border-color:#7a1e33;color:#ff8ba0}
.payout{font-family:var(--mono);font-weight:800}

/* toast / 动画 */
#toast{
  position:fixed;left:50%;bottom:calc(20px + env(safe-area-inset-bottom));transform:translate(-50%,16px);
  z-index:200;background:#241738;border:1px solid var(--line2);color:#fff;padding:11px 18px;border-radius:12px;
  font-size:.9em;opacity:0;transition:.22s;pointer-events:none;max-width:88vw;text-align:center;
  box-shadow:0 18px 40px -18px #000;
}
#toast.on{opacity:1;transform:translate(-50%,0)}
.spin-dot{width:34px;height:34px;border-radius:50%;border:3px solid #33235a;border-top-color:var(--neon);margin:0 auto 14px;animation:sp .9s linear infinite}
@keyframes sp{to{transform:rotate(360deg)}}
@media (prefers-reduced-motion: reduce){ *{animation-duration:.01ms !important;transition-duration:.01ms !important} }


/* ---------- 窄屏 HUD 精简 ---------- */
@media (max-width:640px){
  #hud{gap:8px;padding-inline:10px}
  #roomTag{display:none}
  .hitem .hk{font-size:.58em;letter-spacing:.08em}
  .hv{font-size:12.5px}
  .hv.big{font-size:15px}
  .dot{width:18px;height:18px;font-size:.6em}
  .plist .dot:nth-child(n+5){display:none}
  .vhead .row{margin-left:auto}
  .wallet b{font-size:20px}
}
@media (max-width:380px){
  .hv.big{font-size:14px}
  .plist{display:none}
}
/* ---------- 超高/超宽窗口 ---------- */
@media (min-height:1000px) and (min-width:900px){
  .view{padding-top:calc(var(--pad) + 1vh)}
}


/* ---------- 龙塔 ---------- */
.tower{display:flex;flex-direction:column;gap:5px;width:min(420px,100%);margin:0 auto}
.trow{display:flex;gap:5px;align-items:center}
.trow .lvl{width:16px;text-align:right;font-family:var(--mono);font-size:.68em;color:var(--muted);flex:0 0 auto}
.trow .mult{width:46px;font-family:var(--mono);font-size:.72em;color:var(--gold);flex:0 0 auto}
.trow.cur .mult{color:#fff}
.tile{
  flex:1 1 0;min-width:0;aspect-ratio:1.45;border-radius:9px;border:1px solid var(--line);
  background:#221739;font-size:.9em;font-weight:800;color:#efe8ff;
  display:flex;align-items:center;justify-content:center;transition:.14s;
}
.tile.live{cursor:pointer;background:#2b1d4a;border-color:#6b48b0;box-shadow:0 0 0 1px #6b48b033}
.tile.live:hover{background:#3a2566;transform:translateY(-2px)}
.tile.safe{background:#0e3a26;border-color:#2a7a52;color:#6dffb8}
.tile.bomb{background:#3d0f1a;border-color:#8a2036;color:#ff8ba0}
.tile.dim{opacity:.5;border-color:#281c44;background:#1a1230}
@media (max-height:700px){ .trow .mult{width:40px;font-size:.68em} }

/* ---------- 同桌旁观 ---------- */
.watchgrid{flex:1 1 auto;display:flex;flex-direction:column;justify-content:center}
.watch-empty{text-align:center;color:var(--muted);font-size:.9em;padding:30px 10px;border:1px dashed var(--line);border-radius:12px}
.wgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,150px),1fr));gap:8px}
.wcard{background:#160f28;border:1px solid var(--line);border-radius:12px;padding:10px 11px;display:flex;flex-direction:column;gap:6px}
.wcard.live{border-color:#5a3f96;box-shadow:0 0 0 1px #5a3f9633}
.wcard .wtop{display:flex;align-items:center;gap:7px}
.wcard .wtop i{width:20px;height:20px;border-radius:50%;display:grid;place-items:center;font-size:.62em;font-weight:800;color:#1a0b12;font-style:normal;flex:0 0 auto}
.wcard .wtop b{font-size:.86em;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.wcard .wst{font-family:var(--mono);font-size:.8em;color:#c9bde8}
.wcard .wcards{display:flex;gap:3px;flex-wrap:wrap}
.wcard .wcards span{
  font-family:var(--mono);font-size:.68em;font-weight:800;padding:2px 5px;border-radius:4px;
  background:#f2ecff;color:#160a22;
}
.wcard .wcards span.r{color:#c8102e}
.wcard .wbar{height:4px;border-radius:4px;background:#0d0819;overflow:hidden}
.wcard .wbar i{display:block;height:100%;background:linear-gradient(90deg,#ffc93c,#ff8a3c);transition:width .3s}

/* =========================================================
   首页：开着的房间
   ========================================================= */
.roomsec{margin-top:20px}
.roomsec-head{
  display:flex;align-items:center;justify-content:space-between;
  font-size:.76em;letter-spacing:.08em;color:var(--muted);margin-bottom:8px;padding:0 3px;
}
.roomlist{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,148px),1fr));gap:8px}
.roomcard{
  position:relative;display:flex;flex-direction:column;gap:4px;align-items:flex-start;
  background:linear-gradient(160deg,#1b1230,#120c22);border:1px solid var(--line);
  border-radius:12px;padding:10px 12px;text-align:left;color:inherit;transition:.14s;
}
.roomcard:hover:not(:disabled){border-color:#6b48b0;transform:translateY(-1px);box-shadow:0 10px 22px -16px #7b3bff}
.roomcard:active:not(:disabled){transform:scale(.985)}
.roomcard .rc-top{display:flex;align-items:baseline;gap:8px;width:100%}
.roomcard .rc-top b{font-family:var(--mono);font-size:1.06em;letter-spacing:.08em;color:var(--gold)}
.roomcard .rc-top em{font-style:normal;font-size:.72em;color:var(--muted)}
.roomcard.playing .rc-top em{color:var(--green)}
.roomcard .rc-sub{font-size:.74em;color:var(--muted)}
.roomcard .rc-go{font-size:.74em;color:var(--neon);margin-top:1px}
.roomcard:disabled{opacity:.4;cursor:not-allowed}

/* =========================================================
   赌桌弹窗：余额 / 目标条
   弹窗背景全黑，HUD 看不见，所以这里必须再给一份
   ========================================================= */
.sheet-wallet{
  flex:0 0 auto;position:relative;
  display:flex;flex-wrap:wrap;align-items:flex-end;gap:4px 20px;
  padding:9px 14px 11px;
  background:linear-gradient(180deg,#1f1536,#150e28);
  border-bottom:1px solid var(--line);
}
.sw-main,.sw-cell{display:flex;flex-direction:column;gap:2px;line-height:1.1}
.sw-main .hk,.sw-cell .hk{font-size:.58em;letter-spacing:.12em;color:var(--muted);white-space:nowrap}
.sw-main b{font-family:var(--mono);font-size:1.34em;font-weight:800;color:var(--gold);letter-spacing:.02em}
.sw-cell b{font-family:var(--mono);font-size:.94em;color:#e8e0ff}
.sw-cell b.ok{color:var(--green)}
.sw-bar{position:absolute;left:0;right:0;bottom:0;height:3px;background:#0a0614}
.sw-bar i{display:block;height:100%;width:0;background:linear-gradient(90deg,#ffc93c,#ff8a3c);transition:width .35s ease}
.sw-bar i.over{background:linear-gradient(90deg,#2ce08a,#8bffc9)}
.sheet-wallet.done{background:linear-gradient(180deg,#17301f,#101d16)}
.sheet-wallet.done .sw-main b{color:#7dffc4}
@media (max-width:420px){
  .sheet-wallet{gap:3px 14px;padding:8px 12px 10px}
  .sw-main b{font-size:1.18em}
  .sw-cell b{font-size:.86em}
}

/* =========================================================
   坠机：飞行轨迹
   ========================================================= */
.ctrail{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;z-index:1}
.ctrail polyline{filter:drop-shadow(0 0 6px rgba(111,208,255,.55))}
.crashstage .crashmult,.crashstage .rkt{position:absolute;z-index:2}

/* =========================================================
   终局：抛硬币
   ========================================================= */
.flipwrap{
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  min-height:72vh;gap:4px;padding:8px var(--pad) 20px;
}
.flipbig{
  font-size:clamp(19px,4.6vw,30px);letter-spacing:.16em;color:#fff;
  text-shadow:0 0 34px rgba(255,46,136,.45);margin:2px 0 6px;text-align:center;
}
.coinstage{
  position:relative;width:min(340px,86vw);height:clamp(210px,32vh,290px);
  display:flex;align-items:flex-end;justify-content:center;
}
.coinfloor{
  position:absolute;left:50%;bottom:24px;transform:translateX(-50%);
  width:74%;height:56px;border-radius:50%;
  background:radial-gradient(ellipse at center,rgba(255,201,60,.15),transparent 68%);
}
.coin-shadow{
  position:absolute;left:50%;bottom:30px;width:92px;height:20px;border-radius:50%;
  background:radial-gradient(ellipse at center,rgba(0,0,0,.66),transparent 72%);
  transform:translateX(-50%);transform-origin:center center;
}
.coin3d{position:absolute;left:50%;bottom:52px;transform:translateX(-50%);perspective:900px}
.coin{position:relative;width:84px;height:84px;transform-style:preserve-3d}
.coin-face{
  position:absolute;inset:0;border-radius:50%;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:0;
  font-family:var(--mono);font-weight:800;letter-spacing:.05em;line-height:1.02;
  box-shadow:inset 0 0 0 3px rgba(255,255,255,.2),inset 0 -8px 16px rgba(0,0,0,.3),
             0 0 22px rgba(255,201,60,.22);
}
.coin-front{
  background:radial-gradient(circle at 34% 26%,#fff4c2,#ffc93c 44%,#b07a12 100%);
  color:#3a2300;
}
.coin-back{
  background:radial-gradient(circle at 34% 26%,#ffbed9,#ff2e88 44%,#8a0e44 100%);
  color:#2a0012;opacity:0;
}
.coin-face b{font-size:.6em}
.coin-face i{font-style:normal;font-size:.86em;opacity:.75;margin-top:1px}
.coinstage.thud{animation:cointhud .15s ease-out}
@keyframes cointhud{
  0%{transform:translateY(0)}
  45%{transform:translateY(3px)}
  100%{transform:translateY(0)}
}
.fliphint{min-height:1.5em;color:var(--muted);font-size:.9em;letter-spacing:.05em;text-align:center}


/* 首页 / 连接中：HUD 上的余额、配额、计时都是空的，留着像故障，干脆藏掉 */
body[data-view="join"] #hud,
body[data-view="connect"] #hud,
body[data-view="connecting"] #hud { display:none; }
body[data-view="join"] #stage { padding-top:0 }

/* 房间卡再宽一点，别挤成小方块 */
.roomlist{grid-template-columns:repeat(auto-fill,minmax(min(100%,168px),1fr))}

/* 崩盘瞬间，轨迹整体转红 */
.ctrail polyline.boom{stroke:#ff4160;filter:drop-shadow(0 0 9px rgba(255,65,96,.75))}


/* ---- 终局：放大硬币、去掉 HUD、加氛围光 ---- */
body[data-view="flip"] #hud { display:none }

.flipwrap { position:relative }
.flipwrap::before{
  content:''; position:absolute; inset:-10% -20%;
  background:radial-gradient(circle at 50% 46%, rgba(255,46,136,.13), transparent 60%);
  pointer-events:none;
}
.flipbig { font-size:clamp(15px,3.4vw,21px); letter-spacing:.26em; opacity:.9 }
.flipstake{
  font-family:var(--mono); font-size:clamp(11px,2.6vw,14px);
  letter-spacing:.08em; color:var(--muted); margin:-2px 0 6px;
}
.flipstake b { color:var(--gold); font-size:1.15em }

.coinstage{ height:clamp(250px,40vh,380px); --cs:clamp(104px,26vw,140px) }
.coin3d{ bottom:calc(var(--cs) * 0.62) }
.coin{ width:var(--cs); height:var(--cs); font-size:calc(var(--cs) / 9) }
.coin-face b{ font-size:.86em }
.coin-face i{ font-size:1.15em; margin-top:.08em }
.coin-shadow{ width:calc(var(--cs,100px) * 1.15); bottom:calc(var(--cs,100px) * 0.34) }
.coinfloor{ bottom:calc(var(--cs,100px) * 0.26) }

/* =========================================================
   房主调试面板（DEV=1 才出现）
   z-index 高于赌桌弹层，所以在任何页面都能操作
   ========================================================= */
#devFab{
  position:fixed; right:14px; bottom:calc(14px + env(safe-area-inset-bottom)); z-index:90;
  width:46px; height:46px; border-radius:50%; border:none; cursor:pointer;
  display:grid; place-items:center;
  background:linear-gradient(160deg,#7b3bff,#ff2e88);
  color:#fff; font-family:var(--mono); font-size:10.5px; font-weight:800; letter-spacing:.08em;
  box-shadow:0 10px 26px -10px #ff2e88, inset 0 0 0 1px #ffffff26;
  transition:transform .12s;
}
#devFab:hover{transform:translateY(-1px)}
#devFab:active{transform:scale(.94)}

#devPanel{
  position:fixed; right:14px; bottom:calc(70px + env(safe-area-inset-bottom)); z-index:91;
  width:min(332px, calc(100vw - 28px));
  max-height:min(72vh, 540px); overflow-y:auto; -webkit-overflow-scrolling:touch;
  background:linear-gradient(170deg,#251a3f,#160f28);
  border:1px solid #5c4199; border-radius:14px;
  box-shadow:0 28px 64px -24px #000, inset 0 0 0 1px #ffffff12;
  padding:10px 12px 12px;
}
.dv-head{display:flex;align-items:center;gap:8px;margin-bottom:6px}
.dv-head b{font-size:.9em;letter-spacing:.04em}
.dv-only{font-size:.64em;color:var(--muted);margin-left:auto;white-space:nowrap}
.dv-x{
  width:24px;height:24px;border-radius:7px;border:1px solid #3a2b5e;background:#221738;
  color:#c9bde8;font-size:.8em;line-height:1;cursor:pointer;flex:0 0 auto;
}
.dv-x:hover{border-color:#7b3bff;color:#fff}
.dv-sec{padding:8px 0;border-top:1px solid #2b2046}
.dv-sec:first-of-type{border-top:none;padding-top:2px}
.dv-line{display:flex;align-items:baseline;justify-content:space-between;font-size:.74em;color:var(--muted);margin-bottom:6px}
.dv-line b{font-family:var(--mono);color:var(--gold);font-size:1.12em;letter-spacing:.02em}
.dv-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:5px}
.dv-grid button{
  padding:8px 3px;border-radius:8px;border:1px solid #3a2b5e;background:#221738;
  color:#d8ccf5;font-size:.73em;font-family:var(--mono);cursor:pointer;transition:.12s;
  white-space:nowrap;
}
.dv-grid button:hover{border-color:#7b3bff;background:#2c1f4a;color:#fff}
.dv-grid button:active{transform:scale(.96)}
.dv-grid button.on{border-color:var(--gold);color:var(--gold);background:#33253f}
@media (max-width:420px){
  #devPanel{width:calc(100vw - 20px);right:10px;max-height:66vh}
  .dv-grid button{font-size:.7em;padding:9px 2px}
}

.dv-grid.g4{grid-template-columns:repeat(4,1fr)}

/* ¼ ½ 在等宽字体里字形偏小，单独放大一点 */
.chip[data-k="q"],.chip[data-k="h"]{font-size:.98em;padding:.36em .5em}

/* 手机上赌桌弹窗是全屏的，右下角的 DEV 会压住下注按钮。
   弹窗打开时把它挪到标题栏（✕ 左边），不占内容区。 */
@media (max-width:560px){
  #overlay.on ~ #devFab{
    top:max(9px,env(safe-area-inset-top));
    bottom:auto;
    right:52px;
    width:38px;height:38px;
    font-size:9px;
  }
  #overlay.on ~ #devPanel{ top:56px; bottom:auto; max-height:min(64vh,460px) }
}