:root {
  color-scheme: dark;
  --gold-1: #fff0aa;
  --gold-2: #e8c851;
  --gold-3: #ae830d;
  --ink: #090b10;
  --panel: rgba(10, 12, 18, .88);
  font-family: "PingFang SC", "Microsoft YaHei", system-ui, sans-serif;
}

* { box-sizing: border-box; }

html, body { min-height: 100%; }

body {
  margin: 0;
  min-height: 100svh;
  overflow-x: hidden;
  background: #06080d;
  color: #e5e2db;
}

button, input { font: inherit; }

button { -webkit-tap-highlight-color: transparent; }

.scene, .scene::before, .scene::after {
  position: fixed;
  inset: 0;
  pointer-events: none;
}

.scene {
  overflow: hidden;
  background:
    radial-gradient(circle at 41% 40%, rgba(120, 96, 45, .055), transparent 28%),
    radial-gradient(circle at 84% 18%, rgba(75, 69, 60, .04), transparent 33%),
    linear-gradient(140deg, #0a0d14 0%, #080a10 54%, #05070b 100%);
}

.scene::before {
  content: "";
  opacity: .36;
  background:
    repeating-linear-gradient(118deg, transparent 0 36px, rgba(255, 226, 124, .018) 38px 39px, transparent 42px 86px),
    radial-gradient(ellipse at 50% 115%, rgba(219, 162, 27, .2), transparent 48%);
}

.scene::after {
  content: "";
  box-shadow: inset 0 0 180px 70px rgba(0, 0, 0, .74);
}

.orb { position: absolute; border-radius: 50%; filter: blur(70px); opacity: .2; }
.orb-a { width: 280px; height: 280px; top: 9%; left: 7%; background: #b38325; }
.orb-b { width: 340px; height: 260px; right: -15%; bottom: -4%; background: #31445d; }

.beam {
  position: absolute;
  width: 560px;
  height: 900px;
  left: 50%;
  top: -40%;
  transform: translateX(-50%) rotate(16deg);
  background: linear-gradient(90deg, transparent 28%, rgba(241, 205, 112, .035), transparent 72%);
}

.grain {
  position: absolute;
  inset: 0;
  opacity: .07;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160' viewBox='0 0 160 160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.78' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.35'/%3E%3C/svg%3E");
}

.spark { position: absolute; width: 2px; height: 2px; border-radius: 50%; background: #ffe997; box-shadow: 0 0 8px 2px #c69a30; animation: twinkle 3.4s ease-in-out infinite; }
.s1 { top: 22%; left: 20%; }.s2 { top: 29%; right: 18%; animation-delay: .7s }.s3 { top: 57%; left: 12%; animation-delay: 1.3s }
.s4 { bottom: 17%; right: 23%; animation-delay: 2s }.s5 { bottom: 31%; left: 30%; animation-delay: 2.6s }.s6 { top: 15%; right: 34%; animation-delay: 1.8s }

.page-shell {
  position: relative;
  z-index: 1;
  width: min(100%, 520px);
  min-height: 100svh;
  margin: 0 auto;
  padding: clamp(54px, 11svh, 95px) 16px 32px;
}

.brand { text-align: center; height: 76px; }
.crown { display: block; width: 54px; height: 40px; margin: 0 auto -2px; filter: drop-shadow(0 6px 10px rgba(212, 164, 44, .28)); }
.brand h1 { margin: 0; font-size: 27px; line-height: 1; font-weight: 800; letter-spacing: 1px; color: rgba(245, 243, 236, .96); text-shadow: 0 2px 11px rgba(244, 218, 139, .08); }
.brand p { margin: 7px 0 0; font: 10px/1.2 Georgia, serif; letter-spacing: 3px; color: rgba(205, 201, 193, .42); }

.auth-card {
  margin-top: -1px;
  border: 1px solid rgba(171, 171, 171, .17);
  border-radius: 22px;
  overflow: hidden;
  background: var(--panel);
  box-shadow: 0 26px 80px rgba(0, 0, 0, .58), 0 0 50px rgba(194, 145, 30, .06);
  backdrop-filter: blur(18px);
}

.card-top {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  min-height: 66px;
  padding: 0 14px;
  border-bottom: 1px solid rgba(227, 211, 174, .09);
  background:
    linear-gradient(95deg, rgba(236, 198, 95, .07), transparent 43%, rgba(236, 198, 95, .05)),
    rgba(20, 19, 19, .82);
}

.card-top span { color: rgba(219, 215, 206, .56); font: 10px/1.2 Georgia, serif; letter-spacing: .4px; }
.card-top span:last-child { text-align: right; letter-spacing: 1.5px; }
.card-top h2 { margin: 0; color: #f0d075; font-size: 22px; line-height: 1; letter-spacing: 3px; text-shadow: 0 0 14px rgba(234, 190, 69, .2); }

.form { padding: 21px 22px 21px; }

.field {
  display: flex;
  align-items: center;
  height: 52px;
  margin-bottom: 13px;
  padding: 0 14px;
  border: 1px solid rgba(255, 255, 255, .1);
  border-radius: 14px;
  background: rgba(18, 20, 27, .9);
  transition: border-color .2s ease, box-shadow .2s ease, transform .2s ease;
}

.field:focus-within { border-color: rgba(236, 201, 91, .55); box-shadow: 0 0 0 3px rgba(235, 194, 54, .08); transform: translateY(-1px); }
.field span { flex: 0 0 62px; color: rgba(222, 220, 216, .63); font-size: 14px; }
.field input { width: 100%; min-width: 0; border: 0; outline: 0; color: #f2f0eb; background: transparent; font-size: 14px; }
.field input::placeholder { color: rgba(210, 210, 215, .33); }

.remember { position: relative; display: inline-flex; align-items: center; gap: 6px; margin: 1px 0 17px; color: rgba(219, 216, 207, .58); font-size: 12px; cursor: pointer; }
.remember input { position: absolute; opacity: 0; }
.checkmark { display: grid; place-items: center; width: 16px; height: 16px; border-radius: 3px; background: linear-gradient(135deg, #ffe595, #c59a2a); color: #241b08; font-size: 12px; font-weight: 900; box-shadow: 0 0 12px rgba(239, 194, 65, .13); }
.remember input:not(:checked) + .checkmark { background: transparent; border: 1px solid rgba(255,255,255,.24); color: transparent; }

.primary {
  width: 100%;
  min-height: 50px;
  border: 0;
  border-radius: 999px;
  color: #171307;
  font-weight: 800;
  letter-spacing: 2px;
  cursor: pointer;
  background: linear-gradient(110deg, #f6d977 0%, #ffea91 35%, #dab22d 72%, #e5c136 100%);
  box-shadow: 0 8px 22px rgba(197, 146, 16, .2), inset 0 1px rgba(255,255,255,.45);
  transition: transform .18s ease, filter .18s ease;
}
.primary:hover { filter: brightness(1.05); transform: translateY(-1px); }
.primary:active { transform: translateY(1px) scale(.995); }

.foot-actions { display: flex; align-items: center; justify-content: flex-start; gap: 5px; margin-top: 2px; min-height: 28px; }
.text-button, .ghost-button { border: 0; background: none; color: rgba(201, 198, 192, .39); cursor: pointer; padding: 4px 0; font-size: 12px; }
.text-button strong { font-weight: 400; color: rgba(217, 207, 182, .48); }
.ghost-button { color: rgba(225, 211, 174, .5); }
.text-button:hover, .ghost-button:hover { color: #e5cd86; }

.token { margin-top: 12px; text-align: center; color: rgba(204, 199, 193, .38); font: 9px/1.2 Georgia, serif; letter-spacing: 3px; }
.demo-note { margin: 15px 0 0; text-align: center; color: rgba(209, 204, 190, .34); font-size: 10px; letter-spacing: .6px; }

.modal[hidden] { display: none; }
.modal { position: fixed; z-index: 20; inset: 0; display: grid; place-items: center; padding: 24px; background: rgba(0,0,0,.68); backdrop-filter: blur(10px); animation: fadeIn .18s ease; }
.modal-card { position: relative; width: min(100%, 380px); padding: 34px 28px 28px; border: 1px solid rgba(232, 200, 112, .25); border-radius: 22px; text-align: center; background: linear-gradient(145deg, rgba(29,29,30,.98), rgba(9,11,16,.98)); box-shadow: 0 24px 80px rgba(0,0,0,.7); }
.modal-card h2 { margin: 8px 0 12px; color: #e8ca73; font-size: 21px; letter-spacing: 2px; }
.modal-card p { margin: 0 0 24px; color: rgba(235,231,221,.63); font-size: 13px; line-height: 1.8; }
.mini-crown { color: #ebc85d; font-size: 24px; text-shadow: 0 0 16px rgba(235,200,93,.4); }
.close { position: absolute; top: 11px; right: 14px; width: 32px; height: 32px; border: 0; background: none; color: rgba(255,255,255,.48); font-size: 27px; cursor: pointer; }
.small { min-height: 44px; }
.register-dialog{width:min(420px,calc(100% - 32px));padding:25px;border:1px solid #6b5a31;border-radius:18px;color:#eee;background:#12141b}.register-dialog::backdrop{background:#000b}.register-dialog h2{margin:0;color:#e9cd79}.register-dialog p{color:#9a9ca2;font-size:12px}.register-dialog label{display:flex;flex-direction:column;gap:6px;margin-top:14px;color:#d4d1c8}.register-dialog input{padding:12px;border:1px solid #393a40;border-radius:9px;color:#fff;background:#1b1d25}.register-actions{display:flex;gap:10px;margin-top:20px}.register-actions button{flex:1;padding:11px;border:0;border-radius:20px;color:#15120a;background:#eac85c;cursor:pointer}.register-actions button:first-child{color:#ddd;background:#34373f}

/* Logged-in mobile homepage */
.home-view[hidden] { display: none; }
.is-home { background: #f3f5f8; color: #202938; overflow: hidden; }
.is-home .login-view { display: none; }
.home-view {
  position: relative;
  z-index: 5;
  width: 100%;
  height: 100svh;
  overflow: auto;
  background: #f4f6f8;
  color: #273142;
  scrollbar-width: none;
}
.home-view::-webkit-scrollbar { display: none; }

.home-header {
  position: sticky;
  top: 0;
  z-index: 12;
  display: flex;
  align-items: center;
  height: 56px;
  padding: 0 8px 0 12px;
  background: rgba(255,255,255,.97);
  box-shadow: 0 2px 10px rgba(40,63,90,.08);
}
.home-logo { width: 75px; height: 56px; margin-right: 14px; text-align: center; background: linear-gradient(145deg,#fff,#f6f5ec); }
.logo-mark { display: block; width: 44px; height: 34px; margin: 0 auto; filter: drop-shadow(0 2px 2px rgba(138,103,25,.25)); }
.logo-small { display: block; margin-top: -3px; color: #181818; font-size: 11px; font-weight: 800; }
.home-brand-copy { display: flex; flex-direction: column; gap: 1px; }
.home-brand-copy strong { color: #196fd1; font-size: 27px; line-height: 29px; letter-spacing: 1px; }
.home-brand-copy span { font-size: 21px; font-weight: 700; letter-spacing: 4px; }
.header-actions { display: flex; gap: 10px; margin-left: auto; }
.header-actions button {
  min-width: 130px;
  height: 48px;
  border: 1px solid rgba(50,138,245,.3);
  border-radius: 25px;
  color: #fff;
  background: linear-gradient(#75c9ff,#1f83ed);
  box-shadow: inset 0 2px rgba(255,255,255,.55), 0 3px 10px rgba(30,124,223,.3);
  font-size: 20px;
  font-weight: 800;
  cursor: pointer;
}
.header-actions button span { margin-right: 5px; font-size: 15px; }
.header-actions button:last-child { min-width: 100px; }

.promo-banner {
  position: relative;
  height: 300px;
  margin: 0 20px 13px;
  overflow: hidden;
  border-radius: 20px;
  background: #fff;
}
.promo-banner img { width: 100%; height: 100%; object-fit: cover; display: block; }
.promo-banner::before { content: ""; position: absolute; z-index: 1; inset: 0 auto 0 0; width: 51%; background: #fff; border-radius: 0 55% 55% 0; }
.promo-copy { position: absolute; z-index: 2; left: 20px; top: 22px; color: #07090c; text-shadow: 5px 5px rgba(117,168,58,.55); }
.promo-copy strong { display: block; font-size: 185px; line-height: 1.08; letter-spacing: 7px; font-weight: 950; transform: scaleX(.95); transform-origin: left; }
.promo-copy span { display: block; width: 355px; margin: 5px 0 0 4px; padding-bottom: 8px; border-bottom: 3px solid #111; font-size: 40px; line-height: 1; font-weight: 950; letter-spacing: 2px; }

.announcement { display: flex; align-items: center; height: 40px; padding: 0 30px; background: #fff; border-bottom: 1px solid #e6eaf0; color: #555; font-size: 13px; }
.announcement[hidden] { display: none; }
.announcement > span { margin-right: 5px; color: #1686e8; }
.announcement p { margin: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.account-panel { display: flex; align-items: center; min-height: 116px; margin-top: 12px; padding: 10px 20px; background: #fff; box-shadow: 0 2px 8px rgba(80,105,135,.05); }
.account-main { display: flex; align-items: center; min-width: 66%; }
.avatar { display: grid; place-items: center; width: 74px; height: 74px; border-radius: 50%; background: linear-gradient(145deg,#00b5bd,#20a6b5); font-size: 41px; }
.account-copy { display: flex; flex-direction: column; gap: 7px; margin-left: 14px; }
.account-copy strong { font-size: 25px; color: #202735; }
.account-copy span { color: #246ed2; font-size: 25px; font-weight: 800; }
.refresh { width: 34px; height: 34px; margin: 29px 0 0 12px; border: 0; border-radius: 50%; color: #8aa3c4; background: #edf3f9; font-size: 26px; line-height: 1; cursor: pointer; }

.quick-actions { display: grid; grid-template-columns: repeat(4, 1fr); flex: 1; gap: 0; }
.quick-actions button { border: 0; background: none; color: #5c6574; cursor: pointer; }
.quick-actions button b { display: block; margin-top: 4px; font-size: 21px; }
.quick-icon { display: grid; place-items: center; width: 58px; height: 52px; margin: 0 auto; border-radius: 16px; background: linear-gradient(145deg,#eef7ff,#cbe2ff); font-size: 34px; filter: drop-shadow(0 3px 3px rgba(70,120,210,.18)); }

.home-content { padding: 14px 16px 125px; }
.activity-heading { display: flex; align-items: center; justify-content: space-between; width: 100%; min-height: 72px; padding: 10px 18px; border: 1px solid #e5e9ef; border-radius: 16px; text-align: left; background: #fff; color: #273142; cursor: pointer; }
.activity-heading span { display: flex; flex-direction: column; gap: 3px; }
.activity-heading strong { font-size: 21px; }
.activity-heading small { color: #8793a8; font-size: 13px; }
.activity-heading > b { color: #438ce9; }
.activity-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 12px; margin: 10px 0; }
.activity-grid[hidden] { display: none; }
.activity-grid button { min-height: 72px; border: 1px solid #e5e9ef; border-radius: 14px; background: #fff; color: #3c485b; font-size: 27px; cursor: pointer; }
.activity-grid span { display: block; margin-top: 4px; font-size: 14px; }

.provider-card { position: relative; display: flex; align-items: center; width: 480px; min-height: 100px; margin: 10px 0 18px; padding: 12px 18px; border: 0; border-radius: 17px; text-align: left; background: #fff; box-shadow: 0 2px 9px rgba(69,89,115,.09); color: #273142; cursor: pointer; }
.provider-logo { display: grid; place-items: center; width: 74px; height: 74px; margin-right: 17px; border-radius: 17px; color: #fff; background: #020202; font: 900 27px/1 Arial; }
.provider-card > span:nth-child(2) { display: flex; flex-direction: column; gap: 8px; }
.provider-card strong { font-size: 24px; }
.provider-card small { color: #7c8796; font-size: 19px; }
.provider-card small b { color: #2a6fe3; font-size: 25px; }
.provider-card em { position: absolute; top: 0; right: 0; padding: 7px 8px; border-radius: 0 17px 0 14px; color: #fff; background: #ff7839; font-style: normal; font-weight: 800; }

.game-hall { margin: 0 -16px; border-top: 2px solid #d7e9ff; background: #f8fbff; }
.hall-head { display: grid; grid-template-columns: 1.2fr .65fr .65fr; align-items: center; min-height: 92px; padding: 10px 20px; border-left: 5px solid #428ff5; background: #eef6ff; }
.hall-title { display: flex; align-items: center; gap: 15px; }
.hall-title > span:last-child { display: flex; flex-direction: column; gap: 2px; }
.hall-title strong { font-size: 23px; }
.hall-title small { color: #637081; font-size: 17px; }
.ball28 { display: grid; place-items: center; width: 60px; height: 60px; border-radius: 50%; color: #ff8d22; background: radial-gradient(circle,#fff 35%,#ffde69 36% 54%,#ff7f43 55% 68%,#aa5dce 69%); font-size: 20px; font-weight: 950; }
.next-round { justify-self: center; display: flex; flex-direction: column; align-items: center; padding: 7px 16px; border: 1px solid #d2d9e5; border-radius: 13px; background: #fff; }
.next-round span { font-size: 16px; font-weight: 700; }
.next-round b { color: #4285ed; font-size: 24px; letter-spacing: 4px; }
.open-badge { justify-self: end; padding: 8px 16px; border: 1px solid #bfeeca; border-radius: 22px; color: #279a57; background: #edfff2; font-size: 19px; font-weight: 800; }
.result-row { display: grid; grid-template-columns: 1fr auto .7fr; align-items: center; min-height: 64px; padding: 8px 28px; border: 1px solid #e5e9ef; border-radius: 14px; background: #fff; }
.result-row > strong { font-size: 22px; }
.result-balls { display: flex; align-items: center; gap: 8px; }
.result-balls b { display: grid; place-items: center; min-width: 36px; height: 36px; border-radius: 8px; color: #fff; background: linear-gradient(#62b2ff,#2c82e7); font-size: 21px; }
.result-balls b:last-child { background: linear-gradient(#4dc6ed,#07a7d6); }
.result-balls i { color: #8995a3; font-style: normal; }
.result-row > span { justify-self: end; padding: 8px 17px; border-radius: 9px; color: #fff; background: linear-gradient(#5aa8ff,#287fe9); font-size: 21px; font-weight: 800; }
.game-hall h2 { margin: 10px 0 8px; text-align: center; color: #86a1c6; font-size: 22px; letter-spacing: 5px; }
.room-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; padding: 0 16px 16px; }
.room-grid button { display: flex; align-items: center; min-height: 103px; padding: 10px 16px; border: 1px solid #e4e8ee; border-radius: 14px; background: #fff; color: #273142; cursor: pointer; }
.room-grid button > span:nth-child(2) { display: flex; flex-direction: column; align-items: flex-start; gap: 7px; margin-left: 16px; }
.room-grid strong { font-size: 21px; }
.room-grid small { padding: 4px 12px; border-radius: 18px; color: #4386e5; background: #edf4ff; font-size: 18px; }
.room-grid em { margin-left: auto; color: #ff6048; font-style: normal; }

.bottom-nav { position: fixed; left: 0; right: 0; bottom: 0; z-index: 15; display: grid; grid-template-columns: repeat(5,1fr); height: 113px; background: rgba(255,255,255,.96); box-shadow: 0 -6px 18px rgba(55,80,112,.09); }
.bottom-nav button { position: relative; border: 0; background: none; color: #8f98a5; cursor: pointer; }
.bottom-nav button span { display: block; color: #aec3f6; font-size: 51px; line-height: 54px; text-shadow: 0 4px 7px rgba(50,101,190,.15); }
.bottom-nav button b { display: block; font-size: 20px; }
.bottom-nav button.active { color: #1678df; }
.bottom-nav button.active span { color: #54b8f6; }
.bottom-nav .center-nav span { display: grid; place-items: center; width: 90px; height: 90px; margin: -34px auto 0; border: 5px solid #dce8ff; border-radius: 50%; background: #fff; box-shadow: 0 0 20px rgba(56,123,233,.28); font-size: 43px; }
.bottom-nav .center-nav b { margin-top: 5px; }

.is-home.theme-night .home-view { filter: saturate(.85) brightness(.86); }

/* Local replicas of the observed account pages */
#localLayer[hidden] { display:none; }
#localLayer { position:fixed; z-index:16; inset:0; color:#282f38; background:#f3f3f3; }
.local-scroll { height:100%; overflow:auto; padding-bottom:125px; }
.local-header { position:sticky; z-index:3; top:0; display:flex; align-items:center; justify-content:center; height:48px; background:#fff; font-size:18px; }
.local-header button { position:absolute; top:0; height:100%; border:0; background:none; color:#327fe0; cursor:pointer; }
.local-back { left:24px; font-size:30px; }.local-right { right:32px; font-size:20px; }
.local-balance { position:relative; display:flex; flex-direction:column; gap:22px; min-height:194px; margin:20px; padding:38px; border-radius:24px; color:white; background:linear-gradient(105deg,#7bbcff,#087ddd); box-shadow:0 10px 26px #75b7f25c; }
.local-balance span { font-size:24px; }.local-balance strong { font-size:44px; }.local-balance small { position:absolute; right:7%; bottom:40px; font-size:17px; line-height:2; }
.local-quick,.mine-records { display:grid; grid-template-columns:repeat(3,1fr); gap:20px; margin:45px 20px; }
.local-quick button,.mine-records button { display:flex; flex-direction:column; align-items:center; justify-content:center; gap:12px; min-height:150px; border:0; border-radius:16px; color:#252c36; background:white; font-size:23px; cursor:pointer; }
.local-quick img,.mine-records img { width:65px; height:65px; object-fit:contain; }
.local-two { display:flex; gap:16px; margin:0 20px; }.local-two button { flex:1; min-height:46px; border:1px solid #d5dae2; border-radius:12px; color:#687485; background:white; cursor:pointer; }.local-two button:last-child,.local-submit { color:white; background:linear-gradient(100deg,#7bbcff,#0781e1); border:0; }
.local-pg { width:25%; min-width:180px; margin:25px 20px; padding:25px; text-align:center; border-radius:10px; background:#fff; font-size:22px; font-weight:700; }.local-pg small { display:block; margin-top:15px; color:#9ba8b9; font-size:16px; }
.local-nav { position:fixed; z-index:4; bottom:0; left:0; right:0; display:grid; grid-template-columns:repeat(5,1fr); height:110px; background:#fff; box-shadow:0 -3px 18px #abbad125; }.local-nav button { display:flex; align-items:center; justify-content:center; flex-direction:column; gap:3px; border:0; background:none; color:#98a1b0; font-size:19px; cursor:pointer; }.local-nav button.active { color:#1678df; font-weight:700; }.local-nav img { width:50px; height:50px; object-fit:contain; }.local-nav button:nth-child(3) img { width:84px; height:84px; margin-top:-35px; border-radius:50%; background:#fff; box-shadow:0 0 18px #88b4ed88; }
.mine-user { display:flex; align-items:center; gap:20px; padding:24px 28px 12px; background:linear-gradient(#e8f4ff,#f6fbff); }.mine-avatar { display:grid; place-items:center; width:95px; height:95px; border-radius:50%; background:#0ca8bb; font-size:52px; }.mine-user b { display:block; font-size:28px; }.mine-user small { display:block; margin-top:15px; font-size:20px; color:#8292a3; }
.mine-balance { display:flex; align-items:center; gap:25px; margin:0 24px; padding:20px; border-radius:16px; background:white; color:#77879b; font-size:21px; }.mine-balance b { color:#222; font-size:25px; }.mine-balance div { margin-left:auto; }.mine-balance button { padding:8px 20px; border:0; border-radius:22px; color:#2875dc; background:#e9f2ff; cursor:pointer; }.mine-balance div button:first-child { color:#fff; background:#438bef; }
.mine-records { grid-template-columns:repeat(4,1fr); gap:0; margin:16px 0; background:white; }.mine-records button { border-radius:0; min-height:145px; font-size:19px; }.mine-records img { width:64px; height:64px; }
.mine-list { margin:16px 24px; overflow:hidden; border-radius:18px; background:white; }.mine-list button { display:flex; align-items:center; gap:16px; width:100%; min-height:70px; padding:10px 24px; border:0; border-bottom:1px solid #eee; background:white; font-size:22px; text-align:left; cursor:pointer; }.mine-list i { display:grid; place-items:center; width:40px; height:40px; border-radius:10px; color:white; font-style:normal; }.mine-list span { margin-left:auto; color:#a8afb8; }.logout { display:block; width:calc(100% - 48px); margin:20px 24px; padding:14px; border:0; border-radius:12px; color:#e55; background:#fff; cursor:pointer; }
.amount-card { margin:24px 20px; padding:25px; border-radius:16px; background:white; font-size:23px; }.amount-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:16px; margin:24px 0; }.amount-grid button { min-height:75px; border:1px solid transparent; border-radius:12px; background:#f7f8fa; color:#333; font-size:23px; cursor:pointer; }.amount-grid button.selected { border-color:#438aef; color:#2876dc; background:#eef6ff; }.amount-input { display:flex; align-items:center; gap:12px; padding:20px 24px; border:1px solid #edf0f4; border-radius:12px; background:#f7f8fa; }.amount-input input { width:100%; border:0; outline:0; background:transparent; color:#333; font-size:22px; }.amount-input button,.binding button { border:0; background:none; color:#3184ed; white-space:nowrap; cursor:pointer; }.binding { color:#9aa5b3; font-size:16px; }.local-submit { display:block; width:calc(100% - 40px); margin:20px; min-height:48px; border-radius:25px; font-weight:700; cursor:pointer; }
.electronic { display:flex; gap:24px; margin:14px 20px; }.electronic aside { display:flex; flex-direction:column; align-items:center; gap:10px; width:20%; padding:25px 10px; border-radius:14px; color:white; background:#2863dc; }.electronic aside img { width:80px; }.games { flex:1; min-width:0; }.game-tabs { display:grid; grid-template-columns:repeat(4,1fr); background:white; }.game-tabs button { min-height:80px; border:0; border-bottom:4px solid transparent; background:white; color:#8994a4; font-size:22px; cursor:pointer; }.game-tabs button.selected { color:#2863dc; border-bottom-color:#2863dc; }.game-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:16px; }.game-grid[hidden] { display:none; }.game-grid button { min-height:180px; padding:18px; border:1px solid #edf0f4; border-radius:12px; background:#f8f9fb; font-size:20px; cursor:pointer; }.game-grid img { display:block; width:100px; height:100px; object-fit:contain; margin:0 auto 10px; border-radius:18px; }.empty-page { padding:110px 20px; text-align:center; color:#a3adba; }
.room-status { display:grid; grid-template-columns:1fr 1fr; margin:12px 20px; padding:22px; border-radius:20px; color:#fff; text-align:center; background:linear-gradient(100deg,#1383ef,#65b7ff); }.room-status div { display:flex; flex-direction:column; align-items:center; gap:10px; font-size:22px; }.room-status div+div { border-left:1px solid #ffffff40; }.room-status strong { font-size:26px; }.room-status span { padding:8px 18px; border-radius:20px; background:#146bc0; }.room-result { margin:0 20px; padding:18px; border-radius:16px; background:#fff; color:#8895a6; }.room-chat { padding:24px; }.room-chat b { color:#e74852; }.room-chat p { padding:20px; border-left:4px solid #f04855; border-radius:16px; background:#fff; }.room-toolbar { position:fixed; right:20px; top:35%; display:flex; flex-direction:column; gap:12px; }.room-toolbar button { width:64px; height:64px; border:0; border-radius:50%; background:#20a35a; color:white; font-weight:bold; cursor:pointer; }.room-toolbar button+button { background:#ef7010; }.room-controls { position:fixed; bottom:0; left:0; right:0; display:flex; gap:10px; padding:14px 20px; background:#fff; }.room-controls button { padding:14px 24px; border:0; border-radius:12px; color:#fff; background:#ff8b00; cursor:pointer; }.room-controls button:last-child { background:#b6bdc7; }.room-controls input { flex:1; min-width:0; padding:10px; border:0; border-radius:12px; background:#f4f6f8; }
.pg-mask { position:fixed; z-index:18; inset:0; display:grid; place-items:center; padding:20px; background:#0008; }.pg-dialog { position:relative; width:min(520px,100%); padding:28px; border-radius:20px; color:#273142; background:#fff; box-shadow:0 15px 55px #0004; }.pg-dialog h2 { margin:0 32px 10px 0; font-size:22px; }.pg-dialog p { color:#8794a5; font-size:15px; }.pg-dialog button { border:0; background:none; color:#2e80e5; cursor:pointer; }.pg-close { position:absolute; right:16px; top:12px; font-size:28px; }.pg-wallet,.pg-amount { display:flex; align-items:center; gap:12px; padding:16px; margin:14px 0; border-radius:12px; background:#f3f7fc; }.pg-wallet span { margin-left:auto; color:#9ba7b6; }.pg-amount input { flex:1; min-width:0; border:0; outline:0; background:transparent; color:#263140; font-size:18px; }.pg-buttons { display:flex; gap:12px; margin-top:24px; }.pg-buttons button { flex:1; padding:13px; border:1px solid #d4e2f4; border-radius:22px; }.pg-buttons button:last-child { color:#fff; background:#2588e7; }
.bet-mask { position:fixed; z-index:18; inset:0; display:flex; align-items:end; background:#000a; }.bet-sheet { position:relative; width:100%; height:min(510px,75vh); display:flex; flex-direction:column; overflow:hidden; border-radius:30px 30px 0 0; background:#fff; color:#333; }.bet-close { position:absolute; z-index:1; top:5px; right:15px; border:0; color:#999; background:none; font-size:28px; cursor:pointer; }.bet-main { display:flex; flex:1; min-height:0; }.bet-tabs { display:flex; flex-direction:column; width:16%; min-width:105px; background:#f7f8fa; }.bet-tabs button { flex:1; border:0; border-left:6px solid transparent; background:none; color:#444; font-size:24px; text-align:left; cursor:pointer; }.bet-tabs button.selected { border-left-color:#ff9000; background:#fff; }.bet-content { flex:1; min-width:0; overflow:auto; padding:12px 16px; text-align:center; }.bet-content h2 { margin:0; padding:6px; border-bottom:1px solid #eee; font-size:28px; }.bet-content p { margin:12px; color:#fa8d00; font-size:19px; }.bet-content>small { color:#8a98a8; }.bet-options { display:grid; grid-template-columns:repeat(2,1fr); gap:8px; margin-top:12px; }.bet-options button { display:flex; align-items:center; justify-content:center; flex-direction:column; min-height:68px; border:1px solid transparent; border-radius:12px; background:#f5f7fa; color:#333; font-size:24px; cursor:pointer; }.bet-options button.selected { border-color:#ff9a10; color:#ef8700; background:#fff6e7; }.bet-options button small { display:block; color:#7b8ba0; font-size:17px; }.bet-bottom { display:flex; gap:10px; padding:14px 16px; border-top:1px solid #eee; }.bet-bottom input { flex:1; min-width:0; padding:12px; border:1px solid #edf0f4; border-radius:12px; color:#333; background:#f7f8fa; font-size:18px; }.bet-bottom button { min-width:80px; border:0; border-radius:14px; color:#fff; background:#2385ef; font-size:19px; font-weight:700; cursor:pointer; }.bet-bottom button:nth-of-type(2) { background:#ff9800; }.bet-bottom button:nth-of-type(3) { background:#666; }
@media(max-width:719px) { .bet-tabs { min-width:80px; }.bet-tabs button { font-size:16px; }.bet-content h2 { font-size:20px; }.bet-options button { min-height:55px; font-size:18px; }.bet-bottom { gap:5px; padding:8px; }.bet-bottom button { min-width:48px; font-size:14px; }.bet-bottom input { font-size:14px; } }
@media(max-width:719px) { .local-nav { height:78px; }.local-nav img { width:35px; height:35px; }.local-nav button { font-size:13px; }.local-nav button:nth-child(3) img { width:62px; height:62px; margin-top:-22px; }.local-balance { margin:12px; min-height:150px; padding:24px; }.local-balance strong { font-size:32px; }.local-balance span { font-size:18px; }.local-balance small { font-size:12px; }.local-quick { margin:20px 12px; gap:8px; }.local-quick button { min-height:110px; font-size:16px; }.local-quick img { width:45px; height:45px; }.mine-records button { font-size:13px; min-height:100px; }.mine-records img { width:44px; height:44px; }.mine-balance { font-size:14px; gap:8px; margin:0 10px; }.mine-balance b { font-size:17px; }.mine-balance button { padding:7px; }.electronic { gap:8px; margin:10px; }.electronic aside { width:23%; }.electronic aside img { width:50px; }.game-grid { grid-template-columns:repeat(2,1fr); gap:6px; }.game-grid button { min-height:120px; font-size:14px; }.game-grid img { width:70px; height:70px; }.game-tabs button { min-height:55px; font-size:15px; } }

@media (max-width: 719px) {
  .home-header { height: 52px; }
  .home-logo { width: 52px; height: 52px; margin-right: 8px; }
  .home-brand-copy strong { font-size: 18px; line-height: 20px; }
  .home-brand-copy span { font-size: 12px; letter-spacing: 2px; }
  .header-actions { gap: 5px; }
  .header-actions button { min-width: auto; height: 38px; padding: 0 12px; font-size: 14px; }
  .promo-banner { height: 38svh; margin: 0 8px 8px; }
  .promo-copy strong { font-size: clamp(58px, 18vw, 100px); }
  .promo-copy span { font-size: clamp(20px, 6vw, 34px); }
  .account-panel { flex-direction: column; align-items: stretch; gap: 14px; }
  .account-main { min-width: 100%; }
  .quick-actions { gap: 4px; }
  .quick-actions button b { font-size: 15px; }
  .quick-icon { width: 46px; height: 43px; font-size: 27px; }
  .provider-card { width: 100%; }
  .hall-head { grid-template-columns: 1fr; gap: 10px; }
  .next-round, .open-badge { justify-self: start; }
  .result-row { grid-template-columns: 1fr; gap: 10px; }
  .result-row > span { justify-self: start; }
  .room-grid { grid-template-columns: 1fr; }
  .bottom-nav { height: 78px; }
  .bottom-nav button span { font-size: 31px; line-height: 34px; }
  .bottom-nav button b { font-size: 14px; }
  .bottom-nav .center-nav span { width: 66px; height: 66px; margin-top: -23px; font-size: 31px; }
}

@keyframes fadeIn { from { opacity: 0 } }
@keyframes twinkle { 0%,100% { opacity: .12; transform: scale(.6) } 50% { opacity: .75; transform: scale(1.4) } }

@media (max-width: 400px) {
  .page-shell { padding-inline: 12px; }
  .form { padding-inline: 18px; }
  .card-top { padding-inline: 12px; }
  .card-top h2 { font-size: 20px; }
}

@media (min-width: 720px) {
  .page-shell { width: 100%; max-width: none; padding: 0; }
  .brand {
    position: absolute;
    top: 19.55svh;
    left: 63.45%;
    width: 230px;
    height: 100px;
    transform: translateX(-50%);
  }
  .brand .crown { width: 54px; height: 40px; margin-bottom: 2px; }
  .brand h1 { font-size: 29px; letter-spacing: .5px; }
  .brand p { margin-top: 6px; font-size: 12px; letter-spacing: 1px; }
  .auth-card {
    position: absolute;
    top: 25.64svh;
    left: 14px;
    width: 420px;
    margin: 0;
    border-radius: 22px;
    box-shadow: 0 28px 70px rgba(0, 0, 0, .72), 0 14px 50px rgba(186, 132, 17, .075);
  }
  .card-top { min-height: 64px; }
  .form { padding: 21px 22px 20px; }
  .field { height: 50px; margin-bottom: 15px; }
  .remember { margin: 1px 0 19px; }
  .primary { min-height: 49px; }
  .foot-actions { margin-top: -1px; }
  .token { margin-top: 18px; }
  .demo-note { display: none; }
  .orb, .spark { display: none; }
}

@media (min-width: 720px) and (max-height: 520px) {
  .page-shell { transform-origin: top left; }
  .brand { top: 12svh; }
  .auth-card { top: 10svh; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}

.room-event{padding:10px 12px;margin:10px 0;border-radius:8px;background:#fff;color:#4e5865}.room-event b{font-size:12px;color:#b38938}.room-event p{margin:5px 0}.room-event small{color:#8a8f99}

.room-toolbar .room-check{background:#7848be}.record-tabs{display:flex;justify-content:space-around;background:white;border-bottom:1px solid #e6edf4}.record-tabs button{flex:1;padding:14px 8px;border:0;border-bottom:3px solid transparent;background:white;color:#7b8897}.record-tabs button.selected{color:#2389ed;border-bottom-color:#2389ed}.bet-record-list{padding:12px 15px}.bet-record-list.empty-page{padding:100px 20px}.bet-record-card{background:#fff;border-radius:12px;margin-bottom:12px;padding:16px;color:#374452}.bet-record-top{font-weight:700;color:#2781d8}.bet-record-time{font-size:12px;color:#a3acb7;margin:7px 0 12px}.bet-record-pick,.bet-record-draw,.bet-record-state{padding:9px 0;border-top:1px solid #eef1f5}.bet-record-state{color:#e18927}

.stats-mask{position:fixed;z-index:30;inset:0;background:#0008;display:flex;align-items:center;justify-content:center}.stats-dialog{width:min(500px,92vw);max-height:80vh;display:flex;flex-direction:column;background:#fff;border-radius:16px;overflow:hidden}.stats-dialog header{display:flex;align-items:center;justify-content:space-between;padding:15px;color:#283844}.stats-dialog header button,.stats-dialog footer button{border:0;background:none;color:#2383e3}.stats-tabs{display:flex;border-bottom:1px solid #eef1f4}.stats-tabs button{flex:1;border:0;border-bottom:3px solid transparent;padding:10px;background:#fff;color:#778697}.stats-tabs button.selected{color:#2383e3;border-color:#2383e3}.stats-list{overflow:auto;padding:10px;display:grid;grid-template-columns:repeat(2,1fr);gap:8px}.stats-row{padding:12px;border-radius:8px;background:#f4f7fa;color:#526171;font-size:13px}.stats-dialog footer{display:flex;justify-content:space-between;padding:12px;color:#8795a1;font-size:12px}

.room-result-wrap{margin:0 20px;border-radius:16px;background:#fff;overflow:hidden}.room-result-wrap .room-result{display:flex;width:100%;align-items:center;justify-content:space-between;gap:10px;margin:0;border:0;text-align:left;cursor:pointer}.history-chevron{font-size:20px;color:#8d9aaa}.room-history{padding:0 18px 10px;color:#8895a6}.room-history[hidden]{display:none}.room-history-row{padding:10px 0;border-top:1px solid #edf1f5;font-size:14px}

/* Canadian 28 room: fixed result panel and independently scrolling conversation. */
.local-scroll.room-layout{height:100dvh;min-height:0;padding-bottom:0;display:flex;flex-direction:column;overflow:hidden;background:#f3f4f6}.room-layout .local-header{position:relative;flex:none;height:46px;font-size:16px}.room-layout .room-status{flex:none;margin:12px 20px 8px;padding:15px;border-radius:20px;box-shadow:0 8px 18px #1682dc35}.room-layout .room-status div{gap:6px;font-size:20px}.room-layout .room-status strong{font-size:25px}.room-layout .room-status span{padding:5px 20px}.room-layout .room-result-wrap{flex:none;position:relative;z-index:2}.room-layout .room-result{padding:12px 17px;color:#92a0b3}.room-layout #roomResult,.room-history-row{display:flex;align-items:center;gap:8px;flex-wrap:wrap}.draw-period{color:#8b9cb2;margin-right:8px}.draw-ball{display:inline-grid;place-items:center;flex:none;width:32px;height:32px;border-radius:50%;background:#7a20a7;color:white;font-weight:700}.draw-total{background:#118b57}.draw-operator,.draw-label{color:#8b9cb2}.draw-label{font-weight:600}.room-history{max-height:40vh;overflow:auto}.room-history-row{padding:8px 0;font-size:14px}.room-layout .room-chat{min-height:0;flex:1;overflow:auto;padding:12px 20px 12px}.room-layout .room-chat>div:first-child{font-size:12px;color:#8b98a4}.room-layout .room-chat>div:first-child p{padding:8px 12px;margin:6px 0;border-radius:8px;font-size:12px}.room-layout .room-event{padding:8px 12px;margin:8px 65px 8px 0}.room-layout .room-event p{padding:8px;margin:4px 0;border:0;background:#f5f7fa;font-size:14px}.room-layout .room-toolbar{position:fixed;z-index:4;right:20px;top:32%;gap:10px}.room-layout .room-toolbar button{width:58px;height:58px;border-radius:50%}.room-bottom-tools{flex:none;text-align:center;background:#f3f4f6;padding:8px}.room-bottom-tools button{border:1px solid #c3d8f8;border-radius:22px;background:#fff;color:#337ee5;padding:7px 18px;font-weight:600}.room-layout .room-controls{position:relative;flex:none;bottom:auto;padding:10px 20px;gap:8px}.room-layout .room-controls button{background:#268df4;border-radius:12px;padding:10px 22px}.room-layout .room-controls button:last-child{background:#85b8ed}.room-layout .room-controls input{background:#f5f7fa}.room-layout .room-controls input::placeholder{color:#a9b5c2}@media(max-width:600px){.room-layout .room-status{margin:8px 10px;padding:12px}.room-layout .room-status div{font-size:14px}.room-layout .room-status strong{font-size:19px}.room-layout .room-result-wrap{margin:0 10px}.room-layout .room-result{padding:10px}.draw-ball{width:25px;height:25px;font-size:12px}.room-layout #roomResult,.room-history-row{gap:4px;font-size:12px}.draw-period{margin-right:3px}.room-layout .room-chat{padding:8px 10px}.room-layout .room-toolbar{right:10px}.room-layout .room-toolbar button{width:46px;height:46px;font-size:12px}.room-layout .room-controls{padding:8px 10px}.room-layout .room-controls button{padding:10px 14px}.room-layout .room-event{margin-right:45px}}

/* Login layout matched to the observed mobile reference. */
@media (max-width:719px){
  .is-login .page-shell{padding:12.5svh 16px 32px;}
  .is-login .form{padding:21px 22px 21px;}
  .is-login .field{height:50px;}
  .is-login .card-top span{visibility:hidden;}
  .is-login .demo-note,.is-login .orb,.is-login .spark{display:none;}
}

.home-logo img{width:100%;height:100%;object-fit:contain}.quick-icon img,.provider-logo img,.ball28 img{width:100%;height:100%;object-fit:contain}.bottom-nav button span img{width:100%;height:100%;object-fit:contain}.promo-banner:has(img[src*="home-reference"])::before{display:none}
@media(max-width:719px){
.home-header{height:44px;padding:0 10px}.home-logo{width:38px;height:34px;margin-right:8px}.home-brand-copy strong{font-size:14px;line-height:17px}.home-brand-copy span{font-size:10px;letter-spacing:1px}.header-actions button{height:25px;padding:0 8px;font-size:10px}.header-actions button:last-child{min-width:0}.header-actions button span{font-size:10px;margin-right:2px}.promo-banner{height:150px;margin:6px 10px 8px;border-radius:10px}.promo-banner img{object-fit:cover}.announcement{height:40px;padding:0 15px;font-size:11px}.account-panel{flex-direction:row;align-items:center;gap:0;min-height:58px;margin-top:5px;padding:5px 10px}.account-main{min-width:0;flex:1}.account-main .avatar{width:36px;height:36px;font-size:22px;flex:none}.account-copy{gap:2px;margin-left:8px;min-width:0}.account-copy strong{font-size:12px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.account-copy span{font-size:12px}.refresh{width:16px;height:16px;margin:15px 0 0 4px;font-size:14px;flex:none}.quick-actions{flex:0 0 160px;gap:0}.quick-actions button{padding:0}.quick-actions button b{font-size:11px;margin-top:0}.quick-icon{width:28px;height:28px;border-radius:0;background:none;filter:none}.home-content{padding:4px 10px 100px}.activity-heading{min-height:48px;padding:5px 8px;border:0;border-left:3px solid #438cf0;border-radius:0;background:#eef5fd}.activity-heading strong{font-size:14px;color:#2f7ce6}.activity-heading small{font-size:9px}.activity-heading>b{font-size:11px}.provider-card{width:182px;min-height:54px;margin:8px 0 12px;padding:6px 8px;border-radius:8px}.provider-logo{width:36px;height:36px;margin-right:8px;border-radius:7px}.provider-card>span:nth-child(2){gap:2px}.provider-card strong{font-size:13px}.provider-card small,.provider-card small b{font-size:10px}.provider-card em{font-size:10px;padding:2px}.game-hall{margin:0 -10px}.hall-head{grid-template-columns:1fr auto auto;gap:4px;min-height:48px;padding:5px 10px;border-left-width:3px}.hall-title{gap:6px;min-width:0}.hall-title strong{font-size:12px}.hall-title small{font-size:9px}.ball28{width:32px;height:32px;background:none;flex:none}.next-round{justify-self:center;padding:2px 6px;border-radius:6px}.next-round span{font-size:8px;white-space:nowrap}.next-round b{font-size:12px;letter-spacing:1px}.open-badge{justify-self:end;padding:3px 7px;font-size:9px}.result-row{grid-template-columns:1fr auto auto;gap:4px;min-height:31px;padding:3px 10px;border-radius:7px}.result-row>strong{font-size:10px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.result-balls{gap:3px}.result-balls b{min-width:18px;height:18px;border-radius:4px;font-size:10px}.result-balls i{font-size:10px}.result-row>span{justify-self:end;padding:3px 8px;font-size:11px}.game-hall h2{margin:5px 0;font-size:10px;letter-spacing:2px}.room-grid{grid-template-columns:1fr 1fr;gap:6px;padding:0 8px 8px}.room-grid button{min-height:55px;padding:4px 6px;border-radius:6px;min-width:0}.room-grid button>span:nth-child(2){margin-left:6px;gap:3px;min-width:0}.room-grid strong{font-size:11px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:110px}.room-grid small{font-size:9px;padding:2px 6px}.room-grid em{font-size:10px}.bottom-nav{height:54px}.bottom-nav button span{width:24px;height:24px;line-height:24px;margin:auto}.bottom-nav button b{font-size:10px}.bottom-nav .center-nav span{width:46px;height:46px;margin-top:-16px;border-width:3px;padding:5px}.bottom-nav .center-nav b{margin-top:1px}
}

.activity-heading .activity-count{margin-left:auto;margin-right:auto;padding:1px 6px;border-radius:8px;background:#e6f1ff;color:#4287df;font-size:10px}.activity-heading .activity-open{display:flex;align-items:center;gap:5px;padding:3px 4px 3px 8px;border-radius:20px;background:#fff;color:#4789da;font-size:11px}.activity-heading .activity-open i{display:grid;place-items:center;width:20px;height:20px;border-radius:50%;background:#418be8;color:#fff;font-style:normal}.activity-grid button img{display:block;width:32px;height:32px;object-fit:contain;margin:0 auto}.activity-grid button span{font-size:11px;font-weight:600}.activity-grid{max-width:280px;gap:6px}.activity-grid button{min-height:74px;border-radius:9px}

@media(max-width:719px){.bet-sheet{height:min(506px,75vh);border-radius:14px 14px 0 0}.bet-tabs{width:104px;min-width:104px;justify-content:flex-start}.bet-tabs button{flex:none;height:52px;border-left-width:3px;padding:0 6px;font-size:15px;color:#555}.bet-tabs button.selected{background:#fff}.bet-content{padding:4px 8px}.bet-content h2{font-size:18px;padding:2px 0 8px}.bet-content p{font-size:12px;margin:6px 0}.bet-options{gap:4px;margin-top:8px}.bet-options button{min-height:40px;border-radius:5px;font-size:15px;line-height:18px}.bet-options button small{font-size:12px;line-height:13px}.bet-options button.selected{border:2px solid #2888f4;background:#e9f3ff;color:#2586e9}.bet-bottom{padding:8px;gap:5px}.bet-bottom input{font-size:12px;padding:8px;border-radius:7px}.bet-bottom button{min-width:50px;height:34px;border-radius:8px}.bet-close{top:2px;right:8px;font-size:20px}.room-layout .room-status{border-radius:10px;padding:8px;margin:6px 10px 5px}.room-layout .room-status strong{font-size:14px}.room-layout .room-status span{font-size:12px;padding:3px 14px}.room-layout .room-status div{gap:3px}.room-layout .room-result-wrap{border-radius:10px}.room-layout .room-result{padding:7px 9px}.room-layout .draw-ball{width:20px;height:20px}.room-layout .draw-total{background:#f32629}.room-layout #roomResult{flex-wrap:nowrap}.room-layout .room-toolbar button{width:36px;height:36px}.room-layout .room-toolbar{right:8px;gap:7px}.room-layout .room-controls button{border-radius:8px;padding:8px 14px}.room-bottom-tools button{font-size:11px;padding:4px 12px}}

.transfer-filter{background:#fff;padding:8px 12px}.transfer-filter>div{display:flex;gap:8px}.transfer-filter>div+div{border-top:1px solid #eef0f3;margin-top:8px;padding-top:8px}.transfer-filter button{flex:1;height:34px;border:1px solid #edf0f4;border-radius:5px;color:#8392a2;background:#f7f8fa;font-size:13px;font-weight:600}.transfer-filter button.selected{background:linear-gradient(110deg,#70b8fa,#1389e6);border-color:#66a9f2;color:white;box-shadow:0 2px 5px #378cda35}.transfer-empty{text-align:center;color:#9aa8b6;padding-top:85px;font-size:13px}.transfer-empty span{display:inline-grid;place-items:center;width:52px;height:58px;font-size:38px;font-weight:bold;color:#d8dfe5;text-shadow:0 3px #fff}.transfer-empty p{margin-top:14px}

/* Mine and sound settings: compact mobile proportions. */
.mine-list button{color:#394354}.mine-header .mine-brand{position:absolute;left:14px;display:flex;align-items:center;gap:6px;color:#2884e8;text-align:left}.mine-brand img{width:33px;height:30px;object-fit:contain}.mine-brand span{display:flex;flex-direction:column;line-height:15px}.mine-brand b{font-size:13px}.mine-brand small{font-size:10px;color:#333}.sound-settings{margin:14px 28px 0;border-radius:8px;background:#fff;overflow:hidden}.sound-row{display:flex;justify-content:space-between;align-items:center;padding:12px 16px;color:#333;font-size:14px}.sound-row small{display:block;margin-top:7px;color:#a6abb0;font-size:12px}.sound-switch{width:44px;height:26px;padding:2px;border:0;border-radius:20px;background:#c7cdd4;cursor:pointer}.sound-switch i{display:block;width:22px;height:22px;background:#fff;border-radius:50%;box-shadow:0 1px 3px #0003}.sound-switch[aria-checked=true]{background:#238bf5}.sound-switch[aria-checked=true] i{transform:translateX(18px)}.sound-hint{margin:12px 24px;color:#9ba4ad;font-size:12px}
@media(max-width:719px){.mine-layout .local-header{height:44px;font-size:16px}.mine-user{gap:12px;padding:12px 15px 8px}.mine-avatar{width:48px;height:48px;font-size:27px}.mine-user b{font-size:15px}.mine-user small{font-size:10px;margin-top:5px}.mine-balance{padding:8px 10px;margin:0 10px;gap:8px;border-radius:8px;font-size:11px}.mine-balance b{font-size:14px}.mine-balance button{padding:4px 8px;font-size:10px}.mine-records{margin:8px 0}.mine-records button{min-height:74px;gap:4px;font-size:10px}.mine-records img{width:36px;height:36px}.mine-list{margin:8px 12px;border-radius:10px}.mine-list button{min-height:40px;padding:6px 12px;gap:10px;font-size:12px}.mine-list i{width:21px;height:21px;border-radius:5px;font-size:13px}.logout{width:calc(100% - 24px);margin:10px 12px;padding:10px;font-size:13px;font-weight:600}.mine-layout .local-nav{height:54px}.mine-layout .local-nav img{width:24px;height:24px}.mine-layout .local-nav button{font-size:10px}.mine-layout .local-nav button:nth-child(3) img{width:46px;height:46px;margin-top:-16px}}

.points-list{padding:12px 10px}.points-card{padding:10px 12px;margin-bottom:10px;background:#fff;border-radius:6px;box-shadow:0 3px 14px #00000008}.points-card>div{display:flex;justify-content:space-between;gap:12px;color:#6e7c88;font-size:12px;margin:6px 0}.points-card>div:first-child{font-size:16px;color:#333;margin:0 0 12px}.points-card>div span:last-child{color:#333;text-align:right;overflow-wrap:anywhere}.points-card>div:first-child span:last-child{font-size:12px;color:#7a8793}.points-mask{position:fixed;z-index:20;inset:0;background:#000a;display:flex;align-items:flex-end}.points-sheet{width:100%;padding:16px;border-radius:16px 16px 0 0;background:#fff}.points-sheet header{display:flex;justify-content:space-between;align-items:center;padding-bottom:14px;border-bottom:1px solid #eee;font-size:15px}.points-sheet header button{border:0;background:none;color:#8291a0;font-size:22px}.points-sheet>div{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin-top:16px}.points-sheet>div button{min-height:44px;border:1px solid #edf0f3;border-radius:5px;background:#f7f8fa;color:#4e5d6b;font-size:12px}.points-sheet>div button.selected{color:#fff;background:linear-gradient(110deg,#70b8fa,#1389e6)}

.balance-reload{position:absolute;right:18px;top:18px;border:0;background:none;color:white;font-size:19px;cursor:pointer}.local-submit:disabled{opacity:.5;cursor:default}.transfer-wallets{display:flex;align-items:center;gap:12px;margin:15px 10px}.transfer-wallets span,.transfer-wallets button{flex:1;border:0;border-radius:3px;background:white;padding:10px;text-align:center;color:#4b5562}.transfer-wallets b{font-size:25px;color:#2889e9}.transfer-form{margin:12px 10px;color:#333;font-size:12px}.transfer-form .amount-input{margin-top:12px;background:#fff}.transfer-form p{color:#8f9aa6}.transfer-form p strong{color:#ed5363}.wallet-picker{width:100%;height:308px;border-radius:16px 16px 0 0;background:white}.wallet-picker header{display:flex;justify-content:space-between;padding:12px 16px}.wallet-picker header button{border:0;background:none;color:#308ce9}.wallet-picker>div{margin:100px 16px 0;padding:12px;border-block:1px solid #eee;text-align:center;color:#333}
@media(max-width:719px){.finance-layout .local-header{height:44px;font-size:16px}.finance-layout .local-right{right:15px;font-size:12px}.finance-layout .local-back{left:16px;font-size:24px}.finance-layout .local-balance{min-height:98px;gap:8px;margin:14px 10px 12px;padding:20px 18px;border-radius:13px}.finance-layout .local-balance span{font-size:12px}.finance-layout .local-balance strong{font-size:22px}.finance-layout .local-balance small{right:18px;bottom:18px;font-size:10px;line-height:1.7}.finance-layout .local-quick{gap:10px;margin:24px 0}.finance-layout .local-quick button{min-height:80px;gap:5px;border-radius:7px;font-size:12px}.finance-layout .local-quick img{width:32px;height:32px}.finance-layout .local-two{margin:0 10px;gap:8px}.finance-layout .local-two button{min-height:44px;border-radius:6px;font-size:14px}.finance-layout .local-pg{width:90px;min-width:0;margin:14px 10px;padding:14px 5px;border-radius:4px;font-size:12px}.finance-layout .local-pg small{font-size:10px;margin-top:4px}.finance-layout .local-nav{height:54px}.finance-layout .local-nav img{width:24px;height:24px}.finance-layout .local-nav button{font-size:10px}.finance-layout .local-nav button:nth-child(3) img{width:46px;height:46px;margin-top:-16px}.finance-layout .amount-card{margin:12px 10px;padding:14px;border-radius:8px;font-size:12px}.finance-layout .amount-grid{gap:8px;margin:12px 0}.finance-layout .amount-grid button{min-height:39px;border-radius:5px;font-size:12px}.finance-layout .amount-grid button.selected{background:#2862e9;color:white}.finance-layout .amount-input{padding:11px 12px;gap:8px;border-radius:5px;font-size:12px}.finance-layout .amount-input input{font-size:12px}.finance-layout .binding{font-size:12px}.finance-layout .local-submit{width:calc(100% - 20px);margin:12px 10px;min-height:44px;font-size:15px}}

.pg-refresh{border:0;background:none;color:#9ba8b9;cursor:pointer}.finance-layout .pg-refresh{font-size:10px;margin-top:4px}#localToast{position:fixed;z-index:25;left:50%;bottom:16%;transform:translateX(-50%);padding:10px 20px;border-radius:6px;background:#333d;color:white;font-size:13px}#localToast[hidden]{display:none}

.finance-layout .binding{display:flex;justify-content:space-between;align-items:center;margin:12px 10px;padding:12px;border-radius:5px;background:#f8fafc;color:#909ca8}.finance-layout .binding span::first-letter{color:#e4a44f}.finance-layout .binding button{font-size:12px}.binding-options,.binding-fields{margin:15px 10px;padding:14px;border-radius:7px;background:white;color:#333;font-size:12px}.binding-options>div{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-top:12px}.binding-options button{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;min-height:86px;border:1px solid transparent;border-radius:5px;background:#f7f8fa;color:#555;font-size:12px}.binding-options button.selected{border:2px solid #4487ef;color:#2782e9;background:#eaf2ff}.binding-options i{font-style:normal;font-size:20px;color:#86939f}.binding-options .selected i{color:#238bf5}.binding-fields label{display:block;margin-bottom:16px}.binding-fields label input{display:block;width:100%;height:44px;margin-top:8px;padding:10px;border:1px solid #eef1f4;border-radius:5px;background:#f7f8fa;font-size:12px}.binding-fields em{color:#ed5163;font-style:normal}.binding-fields small{color:#9ba6b0}.binding-upload{display:flex;flex-direction:column;color:#9ba6b0;font-size:24px}.binding-upload small{font-size:11px}.binding-fields .local-submit{width:100%;margin:16px 0 0}

/* Keep desktop navigation images within the same icon boxes as the source. */
@media(min-width:720px){.bottom-nav button span{width:50px;height:50px;margin:0 auto;line-height:50px}.bottom-nav button span img{display:block;width:100%;height:100%;object-fit:contain}.bottom-nav .center-nav span{width:90px;height:90px;margin:-34px auto 0;padding:5px}.home-content{padding:12px 20px 125px}.activity-heading{min-height:98px;margin:0 -20px;width:calc(100% + 40px);padding:12px 20px;border:0;border-left:5px solid #3780f5;border-radius:0;background:#eef5fd}.activity-heading strong{font-size:28px;color:#2e76e8}.activity-heading small{font-size:18px;color:#778899}.activity-heading .activity-count{font-size:16px}.activity-heading .activity-open{padding:5px 7px 5px 16px;font-size:18px}.activity-heading .activity-open i{width:40px;height:40px;font-size:18px}.provider-card{width:50%;min-height:100px;margin:20px 0 18px}.activity-grid{max-width:75%;gap:12px;margin:16px 0}.activity-grid button{min-height:150px}.activity-grid button img{width:54px;height:54px}.activity-grid button span{font-size:21px}}

.account-main .avatar{overflow:hidden}.account-main .avatar img{width:100%;height:100%;object-fit:cover}.announcement span img{width:100%;height:100%;object-fit:contain}.announcement span{display:inline-flex;width:16px;height:16px;flex:none}.refresh img{width:100%;height:100%;object-fit:contain}

.notice-tabs{display:grid;grid-template-columns:repeat(3,1fr);height:48px;background:#fff}.notice-tabs button{border:0;background:white;color:#778494;font-size:13px}.notice-tabs button.selected{color:#226be2;font-weight:bold}.notice-tabs button.selected::after{content:"";display:block;width:30px;height:2px;margin:12px auto -14px;background:#238bf5}.notice-snapshot{margin:8px 12px;color:#9aa6b2;font-size:10px}.notice-card,.notice-game{display:block;width:calc(100% - 24px);margin:12px;border:0;border-radius:8px;background:#fff;text-align:left;color:#303841;box-shadow:0 3px 12px #00000008;cursor:pointer}.notice-card{padding:14px}.notice-card>div{display:flex;justify-content:space-between;gap:10px;font-size:14px}.notice-card time,.notice-detail time{font-size:12px;color:#9ba9b8}.notice-card p{display:-webkit-box;overflow:hidden;-webkit-box-orient:vertical;-webkit-line-clamp:2;margin:10px 0 0;white-space:pre-line;color:#758493;font-size:12px;line-height:1.6}.notice-game{padding:16px;font-size:13px}.notice-message,.notice-detail{margin:12px;padding:16px;border-radius:8px;background:#fff;color:#718090;font-size:13px;line-height:1.7}.notice-detail b,.notice-detail time{display:block}.notice-detail b{font-size:17px;color:#333}.notice-detail p{white-space:pre-line}.notice-detail small{color:#9ba9b8}

.home-theme-mask{position:fixed;z-index:40;inset:0;display:flex;align-items:flex-end;background:#000a}.home-theme-sheet{width:100%;padding:16px;border-radius:16px 16px 0 0;background:#fff;color:#333}.home-theme-sheet h2{text-align:center;font-size:16px;margin:0 0 12px}.home-theme-sheet>button{display:flex;align-items:center;gap:14px;width:100%;height:58px;margin:7px 0;padding:7px 12px;border:1px solid #eee;border-radius:9px;background:#f7f8fa;color:#333;text-align:left}.home-theme-sheet>button.selected{border-color:#3986ec;background:#edf4ff;color:#2472e1}.home-theme-sheet button span{display:flex;flex:1;flex-direction:column}.home-theme-sheet button b{font-size:13px}.home-theme-sheet button small{font-size:10px;color:#8997a4}.theme-swatch{width:35px;height:35px;border-radius:6px;background:linear-gradient(90deg,#e9f5ff 50%,#fff 50%)}.theme-swatch.night{background:linear-gradient(90deg,#26354b 50%,#101b2e 50%)}.theme-swatch.orange{background:linear-gradient(90deg,#fff3e8 50%,#fff 50%)}.theme-swatch.gold{background:linear-gradient(90deg,#e5bd34 50%,#111 50%)}.theme-swatch.purple{background:linear-gradient(90deg,#b779ef 50%,#241139 50%)}.theme-swatch.temple{background:linear-gradient(90deg,#7132e8 50%,#090b26 50%)}.home-theme-sheet .theme-cancel{justify-content:center;text-align:center;color:#718192}.is-home[data-home-theme=orange]{background:#fff6ec}.is-home[data-home-theme=orange] .home-view,.is-home[data-home-theme=orange] .home-content{background:#fff5e9}.is-home[data-home-theme=orange] .activity-heading,.is-home[data-home-theme=orange] .hall-head{background:#fff0d8}.is-home[data-home-theme=orange] .bottom-nav{background:#fff5ed}.is-home:is([data-home-theme=night],[data-home-theme=gold],[data-home-theme=purple],[data-home-theme=temple]){background:var(--dark-base);color:#f5f6ff}.is-home[data-home-theme=night]{--dark-base:#0e172a;--dark-card:#1b293c;--dark-panel:#2c3c50;--dark-line:#31435a}.is-home[data-home-theme=gold]{--dark-base:#090909;--dark-card:#151515;--dark-panel:#1e1e1e;--dark-line:#4b4025}.is-home[data-home-theme=purple]{--dark-base:#10051f;--dark-card:#1b0d30;--dark-panel:#271640;--dark-line:#49315c}.is-home[data-home-theme=temple]{--dark-base:#06091f;--dark-card:#080c29;--dark-panel:#0c1031;--dark-line:#292b56}.is-home:is([data-home-theme=night],[data-home-theme=gold],[data-home-theme=purple],[data-home-theme=temple]) :is(.home-view,.home-content,.game-hall){background:var(--dark-base)}.is-home:is([data-home-theme=night],[data-home-theme=gold],[data-home-theme=purple],[data-home-theme=temple]) :is(.home-header,.announcement,.account-panel,.provider-card,.room-grid button,.bottom-nav,.result-row,.next-round){background:var(--dark-card);color:#eef3ff;border-color:var(--dark-line)}.is-home:is([data-home-theme=night],[data-home-theme=gold],[data-home-theme=purple],[data-home-theme=temple]) :is(.activity-heading,.hall-head){background:var(--dark-panel);border-color:var(--dark-line)}.is-home:is([data-home-theme=night],[data-home-theme=gold],[data-home-theme=purple],[data-home-theme=temple]) :is(.home-brand-copy span,.account-copy strong,.quick-actions b,.hall-title strong,.room-grid strong,.result-row>strong){color:#edf4ff}

.promotion-card{margin:10px;padding:14px;border-radius:8px;background:white;color:#333;font-size:13px}.promotion-card p{color:#8794a2;font-size:12px;line-height:1.6}.promotion-link{display:flex;gap:6px;margin-top:10px}.promotion-link input{flex:1;min-width:0;padding:10px;border:1px solid #eef1f4;border-radius:6px;background:#f7f8fa;font-size:12px}.promotion-link button{border:0;border-radius:7px;padding:0 15px;background:#2867e8;color:#fff}.promotion-action{display:block;width:calc(100% - 20px);height:44px;margin:10px;border:0;border-radius:24px;background:#327cf3;color:white;font-weight:bold}.promotion-action.secondary{border:1px solid #d7dfe9;background:white;color:#7a8793}.promotion-action:disabled,.promotion-link button:disabled{opacity:.5}

.group-layout{height:100dvh;display:flex;flex-direction:column;overflow:hidden;padding:0!important;background:#f4f4f4}.group-layout .local-header{flex:none}.group-chat-feed{flex:1;overflow:auto;padding:12px 15px 90px}.group-empty{text-align:center;color:#a5aeb8;font-size:12px}.group-message{margin:12px 0;max-width:80%}.group-message.own{margin-left:auto;text-align:right}.group-message small{display:block;color:#96a4b5;font-size:10px}.group-message p{display:inline-block;margin:5px 0;padding:10px 14px;border-radius:10px;background:white;color:#34414f;font-size:13px;white-space:pre-wrap;overflow-wrap:anywhere}.group-message.own p{background:#d8ebff}.group-tools{position:fixed;right:8px;top:36%;display:flex;flex-direction:column;gap:4px}.group-tools button{width:36px;height:36px;border:0;border-radius:10px;background:#f1ad13;color:white;font-size:11px;box-shadow:0 3px 8px #0002}.group-tools button:nth-child(2){background:#28a6df}.group-tools button:nth-child(3){background:#8b5ae7}.group-tools button:nth-child(4){background:#7b899d}.group-cinema{position:fixed;right:10px;bottom:55px;width:50px;height:60px;border:0;border-radius:12px;background:#251453;color:#fff;font-size:11px}.group-compose{display:flex;align-items:center;gap:8px;flex:none;padding:8px 10px;background:white}.group-compose button{border:0;border-radius:20px;background:#f5f7fa;color:#8294a6;padding:7px}.group-compose input{flex:1;min-width:0;padding:9px;border:0;border-radius:20px;background:#f6f8fb;font-size:12px}.group-compose button:disabled{opacity:.5}.group-emoji-panel{position:fixed;bottom:50px;left:10px;display:grid;grid-template-columns:repeat(4,1fr);gap:4px;padding:8px;border-radius:8px;background:white;box-shadow:0 4px 18px #0002}.group-emoji-panel button{border:0;background:#f6f8fa;font-size:20px}.group-game-sheet{width:100%;height:min(506px,70vh);padding:16px;background:white;border-radius:16px 16px 0 0}.group-game-sheet header{display:flex;justify-content:space-between;align-items:center;border-bottom:1px solid #eee;padding-bottom:16px}.group-game-sheet header button{border:0;background:none;font-size:22px;color:#aaa}.group-game-sheet>div{display:flex;gap:20px;margin-top:15px}.group-game-sheet>div button{display:flex;align-items:center;flex-direction:column;gap:6px;width:100px;border:0;background:none;color:#333;font-size:12px}.group-game-sheet img{width:44px;height:44px;object-fit:contain}

.room-follow{display:inline-block;margin-left:8px;padding:5px 12px;border:1px solid #8bb7f6;border-radius:18px;background:#e8f1ff;color:#2474e9;font-size:12px;cursor:pointer}

/* Room conversation: one compact bubble per recorded wager. */
.room-layout .room-chat{padding:10px 20px;background:#f3f4f6}.room-layout .room-event{display:flex;align-items:flex-start;gap:12px;margin:14px 60px 14px 0;padding:0;border:0;border-radius:0;background:transparent;color:#333}.room-event-avatar{width:64px;height:64px;flex:none;object-fit:cover;border:4px solid #dce6ee;border-radius:50%;background:#fff}.room-event-content{min-width:0}.room-event-meta{display:flex;align-items:center;gap:10px;margin-bottom:5px}.room-event-name{color:#555;font-size:20px;line-height:1.2}.room-event-time{padding:2px 10px;border-radius:20px;background:#e9edf0;color:#98a8b8;font-size:14px;line-height:1.2}.room-event-main{display:flex;align-items:center;gap:12px}.room-event-bubble{display:inline-block;max-width:100%;padding:13px 20px;border-radius:22px;background:white;color:#333;font-size:22px;line-height:1.25;box-shadow:0 3px 8px #00000009;white-space:pre-wrap;overflow-wrap:anywhere}.room-event-main .room-follow{margin:0;padding:8px 16px;border:1px solid #81b2ff;border-radius:22px;background:#e8f1ff;color:#2677ec;font-size:17px;font-weight:600;white-space:nowrap}.room-layout .room-chat>div:first-child{font-size:inherit;color:inherit}@media(max-width:719px){.room-layout .room-chat{padding:6px 10px}.room-layout .room-event{gap:8px;margin:10px 45px 10px 0}.room-event-avatar{width:36px;height:36px;border-width:3px}.room-event-meta{gap:5px;margin-bottom:3px}.room-event-name{font-size:11px}.room-event-time{padding:2px 6px;font-size:9px}.room-event-main{gap:6px}.room-event-bubble{padding:8px 10px;border-radius:12px;font-size:13px}.room-event-main .room-follow{padding:5px 8px;font-size:10px}}

.room-layout .room-chat{scrollbar-width:none}.room-layout .room-chat::-webkit-scrollbar{display:none}
/* Customer service landing and conversation */
.service-layout{background:#f4f6f9;padding:0 0 125px}.service-header{height:68px;display:flex;align-items:center;gap:10px;padding:9px 20px;background:#fff;border-bottom:1px solid #edf1f7}.service-header img{width:42px;height:42px;object-fit:contain}.service-header span{display:flex;flex-direction:column}.service-header span b{font-size:16px;color:#213656}.service-header span small{font-size:10px;color:#a0aabd}.service-header strong{margin-left:auto;color:#213656;font-size:18px}.service-card{display:flex;align-items:center;width:calc(100% - 24px);margin:14px 12px;padding:18px;border:0;border-radius:12px;background:linear-gradient(115deg,#fff,#edf5ff);box-shadow:0 4px 18px #bdd1e144;text-align:left;color:#243c61}.service-card>img{width:54px;height:54px;object-fit:contain;margin-right:14px}.service-card span{display:flex;flex-direction:column;gap:6px}.service-card b{font-size:17px}.service-card small{color:#8da0bb;font-size:12px}.service-card i{margin-left:auto;color:#92a5c1;font-style:normal;font-size:26px}.service-faq{margin:14px 12px;border-radius:12px;background:white;overflow:hidden}.service-faq h2{margin:0;padding:14px 16px;color:#253958;font-size:15px;border-bottom:1px solid #f1f4f7}.service-faq details{border-bottom:1px solid #edf0f5}.service-faq summary{list-style:none;position:relative;padding:14px 38px 14px 16px;color:#38465e;font-size:14px;cursor:pointer}.service-faq summary::-webkit-details-marker{display:none}.service-faq summary:after{content:'⌄';position:absolute;right:16px;color:#9baabe}.service-faq details[open] summary:after{content:'⌃'}.service-faq details p{margin:0;padding:0 16px 16px;color:#758399;font-size:13px;line-height:1.7;white-space:pre-wrap}.support-chat-layout{height:100dvh!important;display:flex;flex-direction:column;overflow:hidden;padding:0!important;background:#f2f4f7}.support-chat-layout .local-header{position:relative;flex:none;height:48px}.support-chat-feed{min-height:0;flex:1;overflow:auto;padding:16px 14px}.support-chat-message{display:flex;align-items:flex-start;gap:8px;margin:0 0 16px}.support-chat-message.own{flex-direction:row-reverse}.support-chat-message>div{max-width:75%}.support-chat-avatar{width:36px;height:36px;object-fit:cover;border-radius:50%;background:white}.support-chat-message small{display:block;margin-bottom:5px;color:#97a5b9;font-size:10px}.support-chat-message.own small{text-align:right}.support-chat-bubble{display:inline-block;padding:10px 13px;border-radius:4px 12px 12px;background:white;color:#34435d;font-size:14px;line-height:1.5;white-space:pre-wrap;overflow-wrap:anywhere}.support-chat-message.own .support-chat-bubble{background:#dcecff;border-radius:12px 4px 12px 12px}.support-chat-bubble img{display:block;max-width:min(220px,60vw);max-height:260px}.support-compose{display:flex;align-items:center;gap:8px;padding:10px;background:white;flex:none}.support-compose input[type=text],.support-compose #supportMessage{flex:1;min-width:0;padding:10px 13px;border:0;border-radius:22px;background:#f2f5f9;font-size:14px}.support-compose button,.support-image{border:0;background:#edf4ff;color:#337bdf;border-radius:18px;padding:8px 12px;font-size:13px;cursor:pointer}.support-compose button:disabled{color:#aab8c9;background:#f5f6f8}.support-image input{position:absolute;width:1px;height:1px;opacity:0}@media(max-width:719px){.service-layout .local-nav{height:54px}.service-layout .local-nav img{width:24px;height:24px}.service-layout .local-nav button{font-size:10px}.service-layout .local-nav button:nth-child(3) img{width:46px;height:46px;margin-top:-16px}.service-header{height:54px;padding:6px 12px}.service-header img{width:34px;height:34px}.service-header span b{font-size:14px}.service-header strong{font-size:15px}}
/* Registration form */
.register-dialog{width:min(420px,calc(100% - 24px));max-height:calc(100dvh - 16px);overflow:auto;padding:16px 20px 18px;border:1px solid #303039;border-radius:18px;background:#090b10;color:#f1f0ed}.register-dialog h2{margin:0 0 14px;color:#f3f0e9;font-size:15px}.register-dialog label{display:flex;flex-direction:row;align-items:center;gap:0;height:50px;margin-top:14px;padding:0 13px;border:1px solid #2d2f39;border-radius:14px;background:#12141c;color:#ece9e0;font-size:14px}.register-dialog label span{white-space:nowrap}.register-dialog label input{width:100%;min-width:0;padding:0;border:0;outline:0;background:transparent;color:white;font-size:14px}.register-dialog label input::placeholder{color:#5f6574}.captcha-refresh{display:block;width:160px;height:52px;padding:0;margin:14px 0 0;border:0;background:#f7f8ff;cursor:pointer}.captcha-refresh img{width:160px;height:52px;display:block}.register-dialog #registerError{min-height:0;margin:3px 0;color:#ff7a79}.register-actions{margin-top:8px}.register-actions button{width:100%;min-height:48px;background:linear-gradient(100deg,#f6e094,#cfa91d);color:#1d1704;font-weight:700;letter-spacing:6px;box-shadow:0 6px 20px #cead5355}.register-footer button{padding:7px 0;border:0;background:none;color:#8e909a;font-size:12px;cursor:pointer}
/* Keep typed chat text legible on the light composer background. */
.support-compose #supportMessage,.group-compose #groupMessage{color:#25364c;caret-color:#25364c;-webkit-text-fill-color:#25364c}.support-compose #supportMessage::placeholder,.group-compose #groupMessage::placeholder{color:#8b99ad;-webkit-text-fill-color:#8b99ad;opacity:1}
/* Frontend pages use light inputs; login and registration retain their dark styling. */
#localLayer{color-scheme:light}
#localLayer input:not([type=checkbox]):not([type=radio]),#localLayer textarea,#localLayer select{color:#26354a;caret-color:#26354a;-webkit-text-fill-color:#26354a}
#localLayer input:not([type=checkbox]):not([type=radio])::placeholder,#localLayer textarea::placeholder{color:#8492a4;-webkit-text-fill-color:#8492a4;opacity:1}
#localLayer input:disabled,#localLayer textarea:disabled,#localLayer select:disabled{color:#8390a0;-webkit-text-fill-color:#8390a0}
#localLayer input:-webkit-autofill,#localLayer textarea:-webkit-autofill{-webkit-text-fill-color:#26354a}

/* Only the authenticated member’s own room events align to the right. */
.room-layout .room-chat{padding-right:clamp(48px,12.8vw,96px)}
.room-layout .room-event.own{margin-left:60px;margin-right:0;justify-content:flex-end}.room-event.own .room-event-meta,.room-event.own .room-event-main{justify-content:flex-end}.room-event.own .room-event-bubble{background:linear-gradient(145deg,#1d4ed8,#2563eb 45%,#3b82f6);color:#fff;font-weight:500;border:none;box-shadow:0 2px 8px #2563eb38}.room-event.own .room-event-content{max-width:calc(100% - 76px)}@media(max-width:719px){.room-layout .room-event.own{margin-left:45px;margin-right:0}.room-event.own .room-event-content{max-width:calc(100% - 44px)}}

/* Service route: measured against the source at a 390 px viewport. */
.service-header{position:relative}
.service-header strong{position:absolute;left:50%;transform:translateX(-50%);margin:0}
.service-card{background:#fff}
.service-faq[hidden]{display:none}
@media(max-width:719px){
 .service-layout{background:#f4f4f4}
 .service-header{height:46px}
 .service-header strong{font-size:18px;color:#303133}
 .service-card{margin:12px;width:calc(100% - 24px);min-height:81px;padding:10px;gap:16px;border:1px solid #f1f3f5}
 .service-card>img{width:42px;height:42px;margin:0 8px;flex:none}
 .service-card span{gap:4px}
 .service-card b{font-size:17px;color:#303133}
 .service-card small{font-size:12.5px;color:#87939c}
}
/* Keep a launched PG game in the current page, above the game library. */
.pg-inline-game{position:fixed;inset:0;width:100vw;max-width:none;height:100dvh;max-height:none;margin:0;padding:0;border:0;border-radius:0;background:#10121b;color:#fff;overflow:hidden}
.pg-inline-game[open]{display:flex;flex-direction:column}
.pg-inline-game::backdrop{background:#10121b}
.pg-inline-game>header{display:flex;align-items:center;justify-content:space-between;gap:12px;flex:none;min-height:46px;padding:8px max(12px,env(safe-area-inset-right)) 8px max(12px,env(safe-area-inset-left));padding-top:max(8px,env(safe-area-inset-top));background:#1d2130;color:#fff}
.pg-inline-game>header strong{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:14px}
.pg-inline-close{border:1px solid #68728a;background:#30394c;color:#fff;border-radius:16px;padding:6px 13px;white-space:nowrap;font-size:12px;cursor:pointer}
.pg-inline-frame{display:block;width:100%;flex:1;min-height:0;border:0;background:#10121b}
.pg-inline-loading{margin:0;position:absolute;top:48%;left:0;width:100%;text-align:center;color:#c9d1e1;font-size:14px;pointer-events:none}
.pg-inline-game [hidden]{display:none!important}