/* X100 game v1 - mobile-first; default = dark theme, body.light-theme = light. PC layout in x100-pc.v1.css */
.x1-page { width: 100%; }
body:not(.light-theme) .x1-page .cards { background: #1a1d29 !important; background-color: #1a1d29 !important; border-radius: 16px !important; box-shadow: none !important; }
body.light-theme .x1-page .cards { background: #ffffff !important; background-color: #ffffff !important; border-radius: 16px !important; box-shadow: 0 25px 65px rgb(224 221 240 / 45%) !important; }
.x1-content { padding: 12px 12px 16px; }
.x1-loading { display: flex; align-items: center; justify-content: center; min-height: 260px; }
.x1-spinner { width: 34px; height: 34px; border-radius: 50%; border: 3px solid rgba(128,128,160,.25); border-top-color: #f5b301; animation: x1spin .8s linear infinite; }
@keyframes x1spin { to { transform: rotate(360deg); } }

.x1-card { background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.06); border-radius: 16px; padding: 14px; margin-bottom: 12px; color: #e8ecf5; }
body.light-theme .x1-card { background: #f5f6fa; border-color: #e6e9f2; color: #1c1e2b; }

/* wheel (reference look): rounded tiles on a big arc, static gold rim + bulbs, gold pointer under the tiles */
.x1-card.x1-top { background: transparent !important; border: 0 !important; padding: 0 0 6px !important; box-shadow: none !important; }
.x1-stage { position: relative; overflow: hidden; height: 0; padding-bottom: 34%; }
.x1-wheelbox { position: absolute; left: -25%; width: 150%; top: 2%; }
.x1-wheel { display: block; width: 100%; height: auto; overflow: visible; }
.x1-tile { stroke: none; }
.x1-st1 { fill: #4a7cff; } .x1-st2 { fill: #f2c24f; } .x1-st3 { fill: #45b46a; }
.x1-st4 { fill: #6b2fe6; } .x1-st5 { fill: #f0894a; } .x1-st6 { fill: #ee4444; }
.x1-rim { fill: none; stroke: url(#x1gold); stroke-width: 12; }
.x1-rim2 { fill: none; stroke: #fff2b8; stroke-width: 2.5; opacity: .75; }
.x1-bulb { fill: url(#x1bulb); stroke: #b8830c; stroke-width: 1.2; }
.x1-bulb-hi { fill: #fff; opacity: .85; }
.x1-shadow { fill: none; stroke: #c9cce0; stroke-width: 10; opacity: .55; }
body:not(.light-theme) .x1-shadow { stroke: #000; opacity: .35; }
.x1-pointer { position: absolute; top: 45%; left: 50%; width: 10%; min-width: 46px; max-width: 96px; transform: translateX(-50%); z-index: 2; filter: drop-shadow(0 4px 6px rgba(120,80,0,.28)); }
.x1-pointer svg { width: 100%; height: auto; display: block; overflow: visible; }
.x1-beam { fill: url(#x1beam); }
.x1-ptr-body { fill: url(#x1pg); stroke: #b8770b; stroke-width: 1.5; stroke-linejoin: round; }
.x1-ptr-hi { fill: #fff; opacity: .28; }
.x1-ptr-ring { fill: none; stroke: #fff7d6; stroke-width: 4; }

/* timer */
.x1-timer { text-align: center; padding: 2px 0 2px; }
.x1-timer__lbl { font-size: 16px; font-weight: 600; opacity: .7; }
body.light-theme .x1-timer__lbl { color: #7f83a8; opacity: 1; }
.x1-timer__val { font-size: 42px; font-weight: 800; letter-spacing: 1px; line-height: 1.15; }
.x1-tx1 { color: #3b7dff; } .x1-tx2 { color: #f5c33b; } .x1-tx3 { color: #2fb86b; }
.x1-tx4 { color: #a78bfa; } .x1-tx5 { color: #f97b2c; } .x1-tx6 { color: #ef3f3f; }
.x1-hist { display: flex; gap: 6px; overflow-x: auto; padding: 10px 2px 2px; scrollbar-width: none; }
.x1-hist::-webkit-scrollbar { display: none; }
.x1-page .x1-hchip { flex: 0 0 auto; min-width: 44px; text-align: center; padding: 4px 8px; border-radius: 8px; font-size: 12px; font-weight: 700; color: #fff !important; -webkit-text-fill-color: #fff !important; }
.x1-page .x1-hchip.x1-bg2 { color: #fff !important; -webkit-text-fill-color: #fff !important; }
.x1-page .x1-cb.x1-bg2, .x1-page .x1-cb.x1-bg2 b, .x1-page .x1-cb.x1-bg2 small { color: #fff !important; -webkit-text-fill-color: #fff !important; }
.x1-bgn { background: #6b7280; }

/* bet panel */
.x1-lbl { font-size: 13px; font-weight: 600; opacity: .7; margin: 4px 0 8px; }
.x1-amt { display: flex; gap: 6px; align-items: stretch; margin-bottom: 14px; }
.x1-ab { flex: 0 0 auto; min-width: 46px; padding: 0 10px; height: 42px; border: 0; border-radius: 10px; background: #262b3d; color: #e8ecf5; font-weight: 700; font-size: 13px; cursor: pointer; }
.x1-ab:active { transform: scale(.97); }
body.light-theme .x1-ab { background: #eef0f7; color: #1c1e2b; }
.x1-in { flex: 1 1 auto; min-width: 0; height: 42px; border: 1px solid rgba(128,128,160,.25); border-radius: 10px; background: #12141d; color: #fff; text-align: center; font-size: 16px; font-weight: 700; outline: none; }
body.light-theme .x1-in { background: #fff; color: #1c1e2b; border-color: #dde0ea; }
.x1-in::-webkit-outer-spin-button, .x1-in::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.x1-in[type=number] { -moz-appearance: textfield; }
.x1-btns { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.x1-cb { position: relative; height: 54px; border: 0; border-radius: 12px; color: #fff; font-weight: 800; font-size: 18px; cursor: pointer; display: flex; flex-direction: column; align-items: center; justify-content: center; line-height: 1.1; box-shadow: 0 4px 12px rgba(0,0,0,.18); transition: transform .1s, opacity .2s; }
.x1-cb small { font-size: 11px; font-weight: 600; opacity: .95; }
.x1-cb:active { transform: scale(.97); }
.x1-cb.dis, .x1-cb:disabled { opacity: .45; cursor: default; box-shadow: none; }
.x1-bg1 { background: linear-gradient(90deg, #2c62e8, #3b82ff); }
.x1-bg2 { background: linear-gradient(90deg, #eab308, #f5c33b); }
.x1-bg3 { background: linear-gradient(90deg, #1f9d55, #2fb86b); }
.x1-bg4 { background: linear-gradient(90deg, #6d28d9, #8b5cf6); }
.x1-bg5 { background: linear-gradient(90deg, #ea580c, #f97b2c); }
.x1-bg6 { background: linear-gradient(90deg, #dc2626, #ef4444); }
.x1-note { margin-top: 10px; font-size: 12px; text-align: center; opacity: .6; }

/* bets list by color */
.x1-list { margin-bottom: 12px; }
.x1-row { background: rgba(255,255,255,.04); border-radius: 14px; margin-bottom: 8px; color: #e8ecf5; overflow: hidden; border: 1px solid rgba(255,255,255,.06); }
body.light-theme .x1-row { background: #f5f6fa; color: #1c1e2b; border-color: #e6e9f2; }
.x1-row.hit { border-color: #e8b923; }
.x1-row__head { display: flex; align-items: center; gap: 12px; padding: 12px 14px; cursor: pointer; user-select: none; }
.x1-sq { width: 34px; height: 34px; border-radius: 9px; flex: 0 0 auto; }
.x1-users { flex: 1 1 auto; font-weight: 700; font-size: 14px; opacity: .85; }
.x1-users i { margin-right: 4px; opacity: .7; }
.x1-sum { font-weight: 800; font-size: 15px; display: inline-flex; align-items: center; gap: 4px; }
.x1-coin { width: 16px; height: 16px; border-radius: 50%; }
.x1-chev { opacity: .5; transition: transform .2s; }
.x1-row.open .x1-chev { transform: rotate(180deg); }
.x1-row__body { border-top: 1px solid rgba(128,128,160,.15); padding: 6px 14px 10px; }
.x1-empty { font-size: 13px; opacity: .6; padding: 6px 0; }
.x1-bet { display: grid; grid-template-columns: 1fr auto auto; gap: 12px; padding: 6px 0; font-size: 13px; border-bottom: 1px dashed rgba(128,128,160,.12); }
.x1-bet:last-child { border-bottom: 0; }
.x1-bet__u { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.x1-page .x1-bet .win, .x1-page .x1-hrow__w.win { color: #2fb86b !important; -webkit-text-fill-color: #2fb86b !important; font-weight: 700; }
.x1-page .x1-bet .lose, .x1-page .x1-hrow__w.lose { color: #ef3f3f !important; -webkit-text-fill-color: #ef3f3f !important; }

/* left-menu icon (bundle: <div class="games-img x100">) */
.games-img.x100 { background: url("/assets/image/x100-icon.svg?ver=1") center / contain no-repeat !important; }