/* 奔驰糊了 — Mahjong Ways 风麻将主题老虎机 */
:root{
  --gold:#ffd23a; --gold2:#ffb01f; --gold-deep:#8a5a08;
  --red:#d4222a; --green:#1e8e4e;
  --panel:#2a0d12; --panel2:#1a060a;
  --cell: clamp(40px, min(15.2vw, 7.8vh), 80px);
}
*{margin:0;padding:0;box-sizing:border-box;-webkit-tap-highlight-color:transparent;}
html,body{min-height:100%;font-family:"PingFang SC","Microsoft YaHei","Segoe UI",Arial,sans-serif;color:#fff;-webkit-user-select:none;user-select:none;}
body{
  background:
    radial-gradient(1100px 680px at 50% -10%, rgba(255,206,110,0.16), transparent 56%),
    radial-gradient(900px 620px at 50% 120%, rgba(120,16,24,0.42), transparent 60%),
    radial-gradient(130% 120% at 50% 46%, transparent 52%, rgba(0,0,0,0.62) 100%),
    linear-gradient(160deg,#34090f,#1c0608 56%,#0a0204);
  background-attachment:fixed; min-height:100dvh; padding-bottom:8px;
  overflow-x:hidden;
}

/* 顶栏 */
.mw-top{position:sticky;top:0;z-index:30;display:flex;align-items:center;gap:9px;
  padding:calc(env(safe-area-inset-top) + 10px) 12px 10px;
  background:linear-gradient(180deg,rgba(20,4,7,0.96),rgba(20,4,7,0.4) 80%,transparent);}
.mw-back{text-decoration:none;font-size:18px;color:#fff;background:rgba(0,0,0,0.4);
  border:1px solid var(--gold);width:38px;height:38px;border-radius:10px;display:flex;align-items:center;justify-content:center;}
.mw-title{font-size:20px;font-weight:900;letter-spacing:3px;
  background:linear-gradient(180deg,#fff4cf,var(--gold) 55%,#ff8f1f);-webkit-background-clip:text;background-clip:text;color:transparent;
  text-shadow:0 1px 0 rgba(0,0,0,0.2);}
.mw-sp{flex:1;}

/* WAYS 横幅 */
.mw-ways{position:relative;max-width:560px;margin:2px auto 2px;text-align:center;padding:3px 0 1px;}
.mw-ways .mwn{display:block;font-size:11px;letter-spacing:5px;font-weight:800;color:#ffe9a8;opacity:.85;}
.mw-ways b{display:inline-block;font-size:20px;font-weight:900;letter-spacing:4px;
  background:linear-gradient(180deg,#fff6d2,var(--gold) 55%,#ff8f1f);-webkit-background-clip:text;background-clip:text;color:transparent;
  text-shadow:0 2px 8px rgba(255,160,20,0.4);}

/* 倍数条 */
.mw-multibar{display:flex;justify-content:center;gap:8px;margin:3px auto 1px;}
.mw-mult{font-size:14px;font-weight:900;padding:4px 12px;border-radius:7px;color:#b6904a;
  background:linear-gradient(180deg,#241016,#160709);border:1px solid rgba(180,140,70,0.5);
  transform:scale(.94);transition:.2s;letter-spacing:.5px;}
.mw-mult.on{color:#5a0f06;background:linear-gradient(180deg,#fff0bf,#ffc83c);border-color:#fff3c4;
  transform:scale(1.1);box-shadow:0 0 16px rgba(255,200,60,0.85),inset 0 1px 0 rgba(255,255,255,0.7);}

/* 机台外框 — 鎏金属框 */
.mw-cab{position:relative;max-width:560px;margin:5px auto 0;padding:11px 12px 12px;
  background:linear-gradient(180deg,#2e0a10,#1a0509);border:0;border-radius:24px;
  box-shadow:
    inset 0 0 0 2px rgba(255,238,180,0.85),
    0 0 0 3px #5a3c07, 0 0 0 6px #d7ab44, 0 0 0 8px #8a5f10, 0 0 0 9px #4a3206,
    0 22px 56px rgba(0,0,0,0.72), inset 0 0 50px rgba(0,0,0,0.6);}
.mw-cab::before{content:"";position:absolute;inset:9px;border:1px solid rgba(255,214,120,0.3);border-radius:16px;pointer-events:none;
  box-shadow:inset 0 0 22px rgba(0,0,0,0.55);}
.mw-grid{position:relative;display:flex;gap:5px;justify-content:center;align-items:center;
  background:radial-gradient(120% 100% at 50% 0%,#1a140c,#0c0907 70%,#070504);border-radius:14px;padding:8px 8px;
  border:1px solid rgba(255,210,58,0.28);
  box-shadow:inset 0 0 44px rgba(0,0,0,0.92),inset 0 0 0 1px rgba(0,0,0,0.6);}
.reel{display:flex;flex-direction:column;justify-content:center;gap:5px;}
/* 顶/底渐隐遮罩 — 转轴纵深 */
.mw-grid::after{content:"";position:absolute;inset:0;border-radius:14px;pointer-events:none;z-index:3;
  background:linear-gradient(180deg,rgba(6,4,3,0.9),rgba(6,4,3,0) 13%,rgba(6,4,3,0) 87%,rgba(6,4,3,0.9));}
/* 旋转中的转轴 */
.reel-spin{position:relative;overflow:hidden;}
.reel-strip{display:flex;flex-direction:column;position:absolute;left:0;right:0;top:0;will-change:transform;}
.reel-strip.blurring{filter:blur(5px) brightness(1.05);}

/* 牌格 — 立体玉石/骨白麻将牌 */
.cell{width:var(--cell);height:var(--cell);border-radius:calc(var(--cell)*0.16);position:relative;
  display:flex;align-items:center;justify-content:center;
  background:linear-gradient(160deg,#fdfaf2 0%,#f3ecdc 46%,#e2d6bd 84%,#cdbf9f 100%);
  box-shadow:
    0 7px 11px rgba(0,0,0,0.55),
    0 2px 0 rgba(0,0,0,0.35),
    inset 0 3px 2px rgba(255,255,255,0.95),
    inset 3px 0 3px rgba(255,255,255,0.5),
    inset -3px 0 4px rgba(120,95,55,0.25),
    inset 0 -11px 14px rgba(120,95,55,0.32),
    inset 0 0 0 1px rgba(150,120,70,0.22);}
/* 顶部高光 + 底部牙座深边，模拟真实麻将牌厚度 */
.cell::before{content:"";position:absolute;left:6%;right:6%;bottom:5%;height:16%;border-radius:0 0 6px 6px;pointer-events:none;
  background:linear-gradient(180deg,rgba(120,95,55,0) ,rgba(110,86,46,0.28));}
.cell::after{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;
  background:linear-gradient(157deg,rgba(255,255,255,0.7),rgba(255,255,255,0) 38%);}
.cell .face{font-size:calc(var(--cell)*0.52);font-weight:900;line-height:1;position:relative;z-index:1;
  text-shadow:0 1px 0 rgba(255,255,255,0.85),0 2px 2px rgba(60,40,10,0.28);}
.cell .sub{position:absolute;top:6px;left:0;right:0;text-align:center;font-size:calc(var(--cell)*0.16);font-weight:800;opacity:.7;z-index:1;}
/* 牌面凹刻图形(筒/条/白板) */
.cell.pic .face{width:74%;height:74%;display:flex;align-items:center;justify-content:center;}
.cell .mjsvg{width:100%;height:100%;display:block;
  filter:drop-shadow(0 1px 0 rgba(255,255,255,0.7)) drop-shadow(0 1px 1px rgba(60,40,10,0.35));}
/* 金牌 — 真金箔 */
.cell.gold{background:linear-gradient(160deg,#fdedb2 0%,#f4cd62 44%,#d99e2c 78%,#a9750f 100%);
  box-shadow:
    0 7px 12px rgba(0,0,0,0.55),0 0 12px rgba(214,160,40,0.45),
    inset 0 3px 2px rgba(255,250,220,0.9),inset 0 -11px 14px rgba(110,66,4,0.5),
    inset 0 0 0 1px rgba(150,100,16,0.55);}
.cell.gold .mjsvg{filter:drop-shadow(0 1px 1px rgba(80,50,4,0.5));}
/* 百搭 龍 — 金框朱字 */
.cell.wild{background:linear-gradient(160deg,#fbe6a4 0%,#e8bb4e 46%,#bc8516 100%);
  box-shadow:0 7px 12px rgba(0,0,0,0.55),0 0 14px rgba(200,150,40,0.55),inset 0 3px 2px rgba(255,250,220,0.9),inset 0 -11px 14px rgba(110,66,4,0.55),inset 0 0 0 2px rgba(255,240,190,0.7);}
.cell.wild .face{color:#8a1410;text-shadow:0 1px 0 rgba(255,225,170,0.7),0 2px 2px rgba(60,8,4,0.35);}
/* 福 Scatter — 朱漆鎏金 */
.cell.scatter{background:radial-gradient(circle at 50% 34%,#ffe79a,#e23b2e 58%,#931310 100%);
  box-shadow:0 6px 12px rgba(0,0,0,0.5),0 0 24px rgba(226,59,46,0.8),inset 0 2px 2px rgba(255,255,255,0.5),inset 0 0 0 2px rgba(255,224,138,0.65);}
.cell.scatter .face{color:#ffe9a8;text-shadow:0 1px 2px rgba(80,8,6,0.8);}
.cell .tag{position:absolute;top:4px;left:0;right:0;text-align:center;font-size:calc(var(--cell)*0.12);font-weight:900;letter-spacing:1px;z-index:1;}
.cell.wild .tag{color:#9c1410;}.cell.scatter .tag{color:#ffe9a8;}

/* 动画 */
@keyframes drop{0%{transform:translateY(-130%);opacity:0;}70%{opacity:1;}100%{transform:translateY(0);opacity:1;}}
.cell.drop{animation:drop .32s cubic-bezier(.2,.7,.3,1.2) both;}
@keyframes winpulse{0%,100%{transform:scale(1);}50%{transform:scale(1.12);}}
.cell.win{animation:winpulse .42s ease infinite;z-index:2;box-shadow:0 0 0 3px var(--gold),0 0 20px rgba(255,210,58,0.95);}
@keyframes clear{0%{transform:scale(1);opacity:1;}100%{transform:scale(0);opacity:0;}}
.cell.clear{animation:clear .22s ease forwards;}

/* 金牌 WILD 绸带 */
.mw-ribbon{max-width:560px;margin:6px auto 0;position:relative;text-align:center;}
.mw-ribbon span{display:inline-block;padding:7px 26px;font-size:14px;font-weight:900;letter-spacing:.5px;color:#5a0f06;
  background:linear-gradient(180deg,#ffe9a0,#ffc23a 52%,#e0890f);border:2px solid #fff3c4;border-radius:8px;
  box-shadow:0 4px 10px rgba(0,0,0,0.45),inset 0 1px 0 #fff7d6;
  text-shadow:0 1px 0 rgba(255,255,255,0.4);}
.mw-ribbon::before,.mw-ribbon::after{content:"";position:absolute;top:50%;width:30px;height:14px;transform:translateY(-50%);
  background:linear-gradient(180deg,#e0890f,#a35a07);clip-path:polygon(0 0,100% 50%,0 100%,22% 50%);}
.mw-ribbon::before{left:max(8px,calc(50% - 150px));}
.mw-ribbon::after{right:max(8px,calc(50% - 150px));transform:translateY(-50%) scaleX(-1);}

/* 余额/下注/赢 胶囊 */
.mw-pills{max-width:560px;margin:6px auto 0;display:flex;gap:8px;padding:0 8px;}
.mw-pill{flex:1;display:flex;align-items:center;gap:8px;justify-content:center;
  background:linear-gradient(180deg,rgba(0,0,0,0.5),rgba(0,0,0,0.3));border:1px solid var(--gold-deep);
  border-radius:999px;padding:7px 6px;min-width:0;}
.mw-pill .pl{font-size:11px;color:#ffd9a8;white-space:nowrap;}
.mw-pill .pv{font-size:16px;font-weight:900;color:#fff;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.mw-pill .pv.gold{color:var(--gold);}
.mw-pill .pv.win{color:#7bf0a0;}

/* 控制行 */
.mw-controls{max-width:560px;margin:7px auto 0;display:flex;align-items:center;justify-content:center;gap:14px;padding:0 8px;}
.mw-mini{width:50px;height:50px;border-radius:50%;border:2px solid var(--gold-deep);background:rgba(0,0,0,0.4);
  color:var(--gold);cursor:pointer;display:flex;flex-direction:column;align-items:center;justify-content:center;line-height:1;}
.mw-mini span{font-size:18px;}.mw-mini small{font-size:9px;font-weight:800;margin-top:1px;}
.mw-mini.on{background:linear-gradient(180deg,#ffd23a,#e07a12);color:#5a0f06;border-color:#fff3c4;}
.mw-step{width:46px;height:46px;border-radius:50%;border:none;cursor:pointer;font-size:24px;font-weight:900;color:#5a0f06;
  background:radial-gradient(circle at 38% 30%,#fff7d6,#ffd23a 58%,#cf9512 100%);
  box-shadow:0 4px 8px rgba(0,0,0,0.45),inset 0 2px 2px rgba(255,255,255,0.8),inset 0 -3px 4px rgba(120,80,8,0.5);}
.mw-step:active{transform:scale(.93);}
.mw-spin{position:relative;width:92px;height:92px;border-radius:50%;border:none;cursor:pointer;
  background:radial-gradient(circle at 40% 30%,#a6f6c8,#27bd6e 44%,#0e8044 72%,#064f2b 100%);
  box-shadow:0 0 0 4px #6a4708,0 0 0 7px #e0b34a,0 0 0 9px #6a4708,
    0 10px 24px rgba(0,0,0,0.6),inset 0 4px 7px rgba(255,255,255,0.45),inset 0 -6px 10px rgba(0,40,18,0.6);transition:transform .1s;}
.mw-spin .arrow{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-size:44px;font-weight:900;color:#fff;text-shadow:0 2px 6px rgba(0,0,0,0.55);}
.mw-spin:active{transform:scale(0.94);}
.mw-spin:disabled{filter:saturate(.7) brightness(.9);}
.mw-spin.spinning .arrow{animation:spinrot .6s linear infinite;}
@keyframes spinrot{to{transform:rotate(360deg);}}
.mw-spin.free{background:radial-gradient(circle at 40% 30%,#fff3c4,#ffcb46 48%,#d9920f 100%);
  box-shadow:0 0 0 4px #0b5e34,0 0 0 7px #21b768,0 0 0 9px #0b5e34,0 10px 24px rgba(0,0,0,0.6),inset 0 4px 7px rgba(255,255,255,0.6),inset 0 -6px 10px rgba(120,70,4,0.5);}
.mw-spin.free .arrow{color:#5a0f06;}

/* 免费游戏提示 */
.mw-fs{max-width:560px;margin:5px auto 0;text-align:center;font-size:14px;font-weight:800;color:#ffe9a8;min-height:16px;}

/* 赔率 */
.mw-pay{max-width:560px;margin:7px auto 0;font-size:12px;color:#f0c9a0;line-height:1.7;text-align:center;padding:0 12px;}
.mw-pay b{color:var(--gold);}

/* 大奖闪屏 */
.mw-flash{position:fixed;inset:0;z-index:50;display:flex;align-items:center;justify-content:center;pointer-events:none;opacity:0;}
.mw-flash.show{animation:bigwin 1.8s ease forwards;}
.mw-flash .bw{font-size:46px;font-weight:900;text-align:center;
  background:linear-gradient(180deg,#fff6d2,var(--gold),#ff8f1f);-webkit-background-clip:text;background-clip:text;color:transparent;
  text-shadow:0 6px 24px rgba(255,160,20,0.7);}
@keyframes bigwin{0%{opacity:0;transform:scale(0.4);}20%{opacity:1;transform:scale(1.08);}80%{opacity:1;transform:scale(1);}100%{opacity:0;transform:scale(1);}}

/* 免费游戏入场 */
.mw-overlay{position:fixed;inset:0;z-index:45;display:flex;align-items:center;justify-content:center;background:rgba(10,2,4,0.8);backdrop-filter:blur(4px);}
.mw-overlay.hidden{display:none;}
.mw-panel{background:linear-gradient(160deg,#7a1620,#3a0a10);border:2px solid var(--gold);border-radius:18px;padding:26px 30px;text-align:center;box-shadow:0 14px 40px rgba(0,0,0,0.7);max-width:84vw;}
.mw-panel h2{font-size:26px;margin-bottom:8px;background:linear-gradient(90deg,#fff6d2,var(--gold),#ff8f1f);-webkit-background-clip:text;background-clip:text;color:transparent;}
.mw-panel p{color:#ffe1c4;margin-bottom:18px;font-size:15px;}
.mw-panel button{background:linear-gradient(90deg,#fff0bf,var(--gold));color:#7a1620;border:none;border-radius:999px;padding:11px 30px;font-size:17px;font-weight:900;}

/* ===== 移动端竖屏自适应：保证一屏不溢出 ===== */
@media (max-height:860px){
  .mw-ribbon{margin-top:7px;} .mw-fs{margin-top:6px;min-height:18px;}
  .mw-pills,.mw-pay{margin-top:7px;} .mw-controls{margin-top:7px;}
  .mw-pay{font-size:11px;line-height:1.65;}
}
@media (max-height:760px){
  .mw-top{padding:calc(env(safe-area-inset-top) + 6px) 12px 6px;}
  .mw-ways{margin:0 auto 2px;padding:2px 0 0;} .mw-ways b{font-size:17px;} .mw-ways .mwn{font-size:10px;letter-spacing:4px;}
  .mw-multibar{margin:2px auto;} .mw-mult{font-size:12px;padding:3px 9px;}
  .mw-cab{margin-top:4px;padding:11px 11px 12px;}
  .mw-ribbon{margin-top:5px;} .mw-ribbon span{padding:5px 16px !important;font-size:12px !important;}
  .mw-pills{margin-top:6px;} .mw-pill{padding:5px 6px;} .mw-pill .pv{font-size:15px;}
  .mw-controls{margin-top:6px;gap:11px;}
  .mw-spin{width:74px;height:74px;} .mw-spin .arrow{font-size:34px;}
  .mw-mini{width:46px;height:46px;} .mw-step{width:44px;height:44px;}
  .mw-pay{display:none;}
}