/* Pretzel arcade */
.arc { padding-top: 22px; padding-bottom: 60px; --gold: #fbbf24; --win: #34d399; --lose: #f87171; --panel: rgba(21, 28, 54, .72); }
.arc button { font: inherit; color: inherit; }
.arc-boot { display: grid; place-items: center; min-height: 50vh; gap: 12px; }
.arc-spin { width: 44px; height: 44px; border-radius: 50%; border: 4px solid var(--line); border-top-color: var(--accent); animation: arcrot 0.9s linear infinite; }
@keyframes arcrot { to { transform: rotate(360deg); } }
.arc-gate { text-align: center; padding: 70px 10px; }
.arc-gate-ico { font-size: 72px; filter: drop-shadow(0 0 24px rgba(251, 191, 36, .5)); animation: arcfloat 3s ease-in-out infinite; }
@keyframes arcfloat { 50% { transform: translateY(-8px) rotate(4deg); } }

/* top bar */
.arc-top { display: grid; grid-template-columns: auto 1fr auto; gap: 18px; align-items: center; background: var(--panel); border: 1px solid var(--line); border-radius: 18px; padding: 14px 18px; margin-bottom: 16px; }
.arc-wallet { display: flex; align-items: center; gap: 12px; }
.arc-sym { font-size: 30px; }
.arc-wallet b { font-size: 28px; font-weight: 800; display: block; line-height: 1; transition: color .3s; }
.arc-wallet b.up { animation: arcup .8s; } .arc-wallet b.down { animation: arcdown .8s; }
@keyframes arcup { 0% { color: var(--win); transform: scale(1.15); } 100% { color: inherit; transform: none; } }
@keyframes arcdown { 0% { color: var(--lose); } 100% { color: inherit; } }
.arc-wallet small { color: var(--muted); }
.arc-level { min-width: 180px; }
.arc-lvl-top { display: flex; gap: 10px; align-items: baseline; flex-wrap: wrap; font-size: 14px; }
.arc-lvl-top b { color: var(--gold); } .arc-lvl-top span { color: var(--muted); } .arc-lvl-top small { margin-left: auto; color: var(--muted); }
.arc-bar { height: 8px; background: rgba(255,255,255,.08); border-radius: 99px; overflow: hidden; margin-top: 6px; }
.arc-bar i { display: block; height: 100%; background: linear-gradient(90deg, var(--accent), var(--gold)); border-radius: 99px; transition: width .6s; }
.arc-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.arc-chip { background: rgba(255,255,255,.06); border: 1px solid var(--line); border-radius: 99px; padding: 6px 14px; cursor: pointer; font-size: 13px; color: var(--text); text-decoration: none; transition: .15s; }
.arc-chip:hover:not(:disabled) { background: rgba(108,140,255,.2); border-color: var(--accent); text-decoration: none; }
.arc-chip:disabled { opacity: .45; cursor: default; }

/* layout */
.arc-grid { display: grid; grid-template-columns: 230px minmax(0, 1fr) 280px; gap: 16px; align-items: start; }
.arc-games, .arc-side section { background: var(--panel); border: 1px solid var(--line); border-radius: 18px; padding: 12px; }
.arc-group h5 { margin: 10px 8px 6px; color: var(--muted); font-size: 11px; letter-spacing: .1em; text-transform: uppercase; }
.arc-gbtn { display: flex; align-items: center; gap: 10px; width: 100%; background: transparent; border: 1px solid transparent; border-radius: 12px; padding: 8px 10px; cursor: pointer; text-align: left; position: relative; transition: .15s; }
.arc-gbtn:hover { background: rgba(108,140,255,.12); } .arc-gbtn.on { background: rgba(108,140,255,.22); border-color: var(--accent); }
.arc-gbtn .gi { font-size: 24px; width: 32px; text-align: center; } .arc-gbtn .gt { display: grid; line-height: 1.2; } .arc-gbtn small { color: var(--muted); font-size: 11.5px; }
.arc-gbtn .dot { display: none; position: absolute; right: 10px; width: 9px; height: 9px; border-radius: 50%; background: var(--gold); box-shadow: 0 0 10px var(--gold); }
.arc-gbtn .dot.ready { display: block; animation: arcpulse 1.4s infinite; } @keyframes arcpulse { 50% { transform: scale(1.5); opacity: .6; } }
.arc-stage { background: var(--panel); border: 1px solid var(--line); border-radius: 22px; padding: 24px; min-height: 520px; text-align: center; }
.arc-stage h2 { margin: 0 0 4px; font-size: 26px; } .arc-stage .sub { max-width: 560px; margin: 0 auto 18px; }
.arc-side { display: grid; gap: 14px; } .arc-side h4 { margin: 4px 6px 10px; font-size: 15px; }
.arc-feed-item { font-size: 13px; padding: 7px 8px; border-radius: 10px; background: rgba(255,255,255,.04); margin-bottom: 6px; animation: arcin .4s; } .arc-feed-item b { color: var(--gold); } .arc-feed-item small { color: var(--win); }
@keyframes arcin { from { opacity: 0; transform: translateY(-6px); } }
.arc-tabs { display: flex; gap: 4px; flex-wrap: wrap; margin-bottom: 8px; } .arc-tabs button { background: transparent; border: 1px solid var(--line); border-radius: 99px; padding: 3px 10px; font-size: 12px; cursor: pointer; color: var(--muted); } .arc-tabs button.on { background: var(--accent); color: #fff; border-color: var(--accent); }
.arc-lb-row { display: flex; align-items: center; gap: 8px; padding: 5px 6px; font-size: 13px; } .arc-lb-row .rk { width: 28px; color: var(--muted); } .arc-lb-row img { width: 22px; height: 22px; border-radius: 50%; } .arc-lb-row .nm { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; text-align: left; }
.arc-row { display: flex; justify-content: space-between; gap: 8px; padding: 5px 6px; font-size: 13px; } .arc-row span { color: var(--muted); }
.arc-foot { margin-top: 18px; color: var(--muted); font-size: 12.5px; text-align: center; }

/* shared controls */
.arc-bet { max-width: 420px; margin: 16px auto 8px; text-align: left; } .arc-bet label { font-size: 12px; color: var(--muted); }
.arc-bet-row { display: flex; align-items: center; gap: 8px; background: rgba(0,0,0,.25); border: 1px solid var(--line); border-radius: 12px; padding: 4px 12px; }
.arc-bet-row input, .arc-field input, .arc-btnrow select, .arc-stage input[type=number] { width: 100%; background: transparent; border: 0; color: var(--text); font: inherit; font-size: 18px; font-weight: 700; padding: 8px 0; outline: none; }
.arc-chips { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 8px; }
.arc-field { max-width: 420px; margin: 10px auto; text-align: left; } .arc-field input { background: rgba(0,0,0,.25); border: 1px solid var(--line); border-radius: 12px; padding: 10px 14px; } .arc-field label { font-size: 12px; color: var(--muted); }
.arc-btnrow { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; margin: 10px 0; } .arc-btnrow select { width: auto; background: rgba(0,0,0,.25); border: 1px solid var(--line); border-radius: 12px; padding: 8px 12px; font-size: 14px; }
.arc-play { background: linear-gradient(135deg, var(--accent), #8b5cf6); color: #fff; border: 0; border-radius: 14px; padding: 14px 34px; font-weight: 800; font-size: 17px; cursor: pointer; box-shadow: 0 8px 24px rgba(108,140,255,.35); transition: transform .12s, filter .12s; margin: 8px 0; }
.arc-play:hover:not(:disabled) { transform: translateY(-2px); filter: brightness(1.1); } .arc-play:active:not(:disabled) { transform: scale(.97); } .arc-play:disabled { opacity: .45; cursor: not-allowed; box-shadow: none; }
.arc-play.cash { background: linear-gradient(135deg, #10b981, #059669); box-shadow: 0 8px 24px rgba(16,185,129,.3); } .arc-play.lo { background: linear-gradient(135deg, #f43f5e, #be123c); box-shadow: 0 8px 24px rgba(244,63,94,.3); } .arc-play.small { padding: 8px 20px; font-size: 14px; }
.arc-toggles { display: flex; gap: 8px; justify-content: center; margin: 12px 0; } .arc-toggles.wrap { flex-wrap: wrap; }
.arc-toggle { background: rgba(255,255,255,.06); border: 1px solid var(--line); border-radius: 12px; padding: 9px 18px; cursor: pointer; } .arc-toggle.on { background: var(--accent); border-color: var(--accent); color: #fff; font-weight: 700; }
.arc-stats { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; margin: 10px 0; } .arc-stat { background: rgba(0,0,0,.22); border: 1px solid var(--line); border-radius: 12px; padding: 8px 16px; min-width: 110px; } .arc-stat small { display: block; color: var(--muted); font-size: 11px; } .arc-stat b { font-size: 16px; }
.arc-out { min-height: 62px; margin-top: 8px; }
.arc-banner { display: inline-flex; flex-direction: column; gap: 2px; padding: 12px 30px; border-radius: 16px; animation: arcpop .45s cubic-bezier(.2, 1.6, .4, 1); border: 1px solid; }
.arc-banner b { font-size: 20px; } .arc-banner span { color: var(--muted); }
.arc-banner.win { background: rgba(52,211,153,.15); border-color: var(--win); } .arc-banner.win b { color: var(--win); } .arc-banner.lose { background: rgba(248,113,113,.12); border-color: var(--lose); } .arc-banner.lose b { color: var(--lose); } .arc-banner.push { background: rgba(251,191,36,.12); border-color: var(--gold); }
@keyframes arcpop { from { transform: scale(.7); opacity: 0; } }
.arc-bignum { font-size: 64px; font-weight: 900; letter-spacing: -.02em; margin: 6px 0 10px; font-variant-numeric: tabular-nums; transition: color .2s; } .arc-bignum.win { color: var(--win); text-shadow: 0 0 30px rgba(52,211,153,.5); } .arc-bignum.lose { color: var(--lose); }
.arc-bignum.roulette.red { color: #ef4444; } .arc-bignum.roulette.black { color: #e5e7eb; } .arc-bignum.roulette.green { color: #22c55e; }
.arc-paytable { display: flex; gap: 6px; justify-content: center; flex-wrap: wrap; margin: 10px 0; } .arc-paytable span { background: rgba(0,0,0,.22); border: 1px solid var(--line); border-radius: 99px; padding: 3px 12px; font-size: 12.5px; color: var(--muted); }

/* dice */
.arc-dicebar { position: relative; height: 16px; background: rgba(248,113,113,.35); border-radius: 99px; margin: 8px auto 12px; max-width: 520px; } .arc-dicebar .zone { position: absolute; top: 0; bottom: 0; background: var(--win); opacity: .8; border-radius: 99px; transition: .15s; }
.arc-dicebar .marker { position: absolute; top: -6px; width: 6px; height: 28px; background: #fff; border-radius: 3px; left: 0; transition: left .5s cubic-bezier(.2, .9, .3, 1); box-shadow: 0 0 10px #fff; }
.arc-stage input[type=range] { width: min(520px, 100%); accent-color: var(--accent); }

/* coin */
.arc-coinwrap { perspective: 800px; height: 150px; display: grid; place-items: center; margin: 10px 0; }
.arc-coin { position: relative; width: 110px; height: 110px; transform-style: preserve-3d; transition: transform 1.2s cubic-bezier(.2, .8, .2, 1); }
.arc-coin .face { position: absolute; inset: 0; border-radius: 50%; display: grid; place-items: center; font-size: 52px; backface-visibility: hidden; background: radial-gradient(circle at 35% 30%, #fde68a, #d97706); border: 4px solid #b45309; box-shadow: inset 0 0 14px rgba(0,0,0,.3); } .arc-coin .back { transform: rotateY(180deg); background: radial-gradient(circle at 35% 30%, #e5e7eb, #6b7280); border-color: #4b5563; }

/* slots */
.arc-reels { display: flex; gap: 12px; justify-content: center; margin: 14px 0; } .arc-reel { width: 92px; height: 110px; display: grid; place-items: center; font-size: 56px; background: linear-gradient(#111827, #1f2937 50%, #111827); border: 3px solid #374151; border-radius: 16px; box-shadow: inset 0 0 18px rgba(0,0,0,.6); }
.arc-reel.spinning { filter: blur(1.5px); } .arc-reel.land { animation: arcbounce .3s; } @keyframes arcbounce { 40% { transform: translateY(8px); } }

/* wheel */
.arc-wheelwrap { position: relative; width: 300px; height: 300px; margin: 16px auto; } .arc-wheel { width: 100%; height: 100%; border-radius: 50%; border: 6px solid #1f2937; box-shadow: 0 0 40px rgba(108,140,255,.25); transition: transform 4s cubic-bezier(.1, .7, .1, 1); } .arc-pointer { position: absolute; top: -18px; left: 50%; transform: translateX(-50%); font-size: 32px; z-index: 2; color: var(--gold); filter: drop-shadow(0 2px 4px #000); }

/* plinko */
.arc-plinkowrap { display: grid; place-items: center; margin: 8px 0; } .arc-plinko { position: relative; width: 340px; height: 300px; }
.arc-plinko .peg { position: absolute; width: 6px; height: 6px; border-radius: 50%; background: #9aa6d6; } .arc-plinko .ball { position: absolute; width: 14px; height: 14px; border-radius: 50%; background: radial-gradient(circle at 30% 30%, #fecaca, #ef4444); box-shadow: 0 0 12px #ef4444; transition: left .19s ease-in-out, top .19s ease-in; z-index: 2; }
.arc-plinko .bucket { position: absolute; height: 26px; border-radius: 6px; font-size: 10.5px; font-weight: 700; display: grid; place-items: center; color: #0b1020; } .bucket.hot { background: #fbbf24; } .bucket.mid { background: #60a5fa; } .bucket.cold { background: #6b7280; color: #e5e7eb; } .bucket.hit { animation: arcpop .5s; outline: 3px solid #fff; z-index: 3; }

/* keno */
.arc-keno { display: grid; grid-template-columns: repeat(8, 1fr); gap: 6px; max-width: 460px; margin: 10px auto; } .kcell { background: rgba(255,255,255,.06); border: 1px solid var(--line); border-radius: 10px; padding: 9px 0; cursor: pointer; font-weight: 700; transition: .12s; }
.kcell.on { background: var(--accent); border-color: var(--accent); color: #fff; } .kcell.drawn { box-shadow: inset 0 0 0 2px var(--gold); animation: arcpop .35s; } .kcell.hit { background: var(--win); color: #052e1d; border-color: var(--win); }

/* scratch */
.arc-scratch { display: grid; grid-template-columns: repeat(3, 96px); gap: 10px; justify-content: center; margin: 14px 0; min-height: 96px; } .arc-scratch .tile { position: relative; width: 96px; height: 96px; border-radius: 16px; border: 2px solid var(--line); background: #111827; font-size: 44px; cursor: pointer; overflow: hidden; }
.arc-scratch .cover { position: absolute; inset: 0; display: grid; place-items: center; background: repeating-linear-gradient(45deg, #9ca3af, #9ca3af 6px, #d1d5db 6px, #d1d5db 12px); transition: opacity .35s, transform .35s; } .arc-scratch .tile.open .cover { opacity: 0; transform: scale(1.4); pointer-events: none; }

/* mines */
.arc-mines { display: grid; grid-template-columns: repeat(5, 62px); gap: 8px; justify-content: center; margin: 14px 0; } .arc-mines .tile { width: 62px; height: 62px; border-radius: 14px; border: 2px solid var(--line); background: rgba(108,140,255,.18); font-size: 28px; cursor: pointer; transition: .12s; }
.arc-mines .tile:hover:not(:disabled) { background: rgba(108,140,255,.4); transform: translateY(-2px); } .arc-mines .tile:disabled { cursor: default; } .arc-mines .tile.gem { background: rgba(52,211,153,.25); border-color: var(--win); animation: arcpop .3s; } .arc-mines .tile.mine { background: rgba(255,255,255,.06); } .arc-mines .tile.boom { background: rgba(248,113,113,.35); border-color: var(--lose); animation: arcshake .4s; }
@keyframes arcshake { 25% { transform: translateX(-5px); } 75% { transform: translateX(5px); } }

/* hi-lo */
.arc-card { width: 130px; height: 180px; margin: 10px auto; border-radius: 18px; background: #f9fafb; color: #111827; display: grid; place-items: center; font-size: 72px; font-weight: 900; box-shadow: 0 10px 30px rgba(0,0,0,.4); transition: transform .25s; } .arc-card.flip { transform: rotateY(90deg); } .arc-card.dead { background: #fecaca; }
.arc-hist { display: flex; gap: 6px; justify-content: center; min-height: 30px; } .arc-hist i { font-style: normal; background: rgba(255,255,255,.1); border-radius: 8px; padding: 2px 9px; font-weight: 700; }

/* tower */
.arc-tower { display: grid; gap: 6px; max-width: 360px; margin: 12px auto; } .arc-tower .floor { display: grid; grid-template-columns: 26px repeat(3, 1fr); gap: 6px; align-items: center; opacity: .55; } .arc-tower .floor.cur { opacity: 1; } .arc-tower .floor small { color: var(--muted); }
.arc-tower .door { background: rgba(108,140,255,.2); border: 2px solid var(--line); border-radius: 10px; padding: 7px 0; font-size: 20px; cursor: pointer; } .arc-tower .floor.cur .door:not(:disabled):hover { background: rgba(108,140,255,.45); transform: translateY(-2px); } .arc-tower .door:disabled { cursor: default; } .arc-tower .door.ok { background: rgba(52,211,153,.25); border-color: var(--win); } .arc-tower .door.trap { background: rgba(248,113,113,.35); border-color: var(--lose); }

/* daily spin + crates */
.arc-spinwheel { position: relative; width: 240px; height: 240px; margin: 20px auto; } .arc-spinwheel .pointer { position: absolute; top: -20px; left: 50%; transform: translateX(-50%); color: var(--gold); font-size: 30px; z-index: 2; }
.arc-spinwheel .disc { position: absolute; inset: 0; border-radius: 50%; background: conic-gradient(#6c8cff, #8b5cf6, #ec4899, #f59e0b, #34d399, #6c8cff); border: 6px solid #1f2937; } .arc-spinwheel .disc span { position: absolute; left: 50%; top: 50%; width: 0; height: 0; font-size: 11px; font-weight: 800; white-space: nowrap; transform-origin: 0 0; color: #fff; text-shadow: 0 1px 2px #000; }
.arc-spinwheel .disc span { margin-left: -14px; margin-top: 0; }
.arc-crates { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 12px; margin: 14px 0; } .arc-crate { background: rgba(0,0,0,.22); border: 1px solid var(--line); border-radius: 16px; padding: 14px; display: grid; gap: 6px; justify-items: center; }
.arc-crate-icon { font-size: 54px; } .arc-crate-icon.rare { filter: hue-rotate(200deg); } .arc-crate-icon.epic { filter: hue-rotate(260deg) saturate(1.5); } .arc-crate-icon.legendary { filter: hue-rotate(30deg) saturate(2) drop-shadow(0 0 12px gold); } .arc-crate-icon.shake { animation: arcshake .15s infinite; }
.arc-crate details { font-size: 12px; width: 100%; text-align: left; } .arc-reveal { display: inline-grid; gap: 4px; padding: 18px 40px; border: 2px solid; border-radius: 18px; animation: arcpop .5s cubic-bezier(.2, 1.6, .4, 1); } .arc-reveal b { font-size: 26px; }

/* toasts, confetti */
.arc-toasts { position: fixed; right: 18px; bottom: 18px; display: grid; gap: 8px; z-index: 60; } .arc-toast { background: #1b2342; border: 1px solid var(--line); border-radius: 12px; padding: 10px 16px; box-shadow: 0 10px 30px rgba(0,0,0,.4); animation: arcin .3s; transition: opacity .5s; } .arc-toast.out { opacity: 0; } .arc-toast.bad { border-color: var(--lose); } .arc-toast.gold { border-color: var(--gold); }
.arc-confetti { position: fixed; inset: 0; pointer-events: none; z-index: 70; }

@media (max-width: 1050px) { .arc-grid { grid-template-columns: 1fr; } .arc-games { display: flex; overflow-x: auto; gap: 6px; } .arc-group { display: flex; gap: 6px; } .arc-group h5 { display: none; } .arc-gbtn { width: auto; white-space: nowrap; } .arc-gbtn small { display: none; } .arc-top { grid-template-columns: 1fr; } }
@media (max-width: 560px) { .arc-stage { padding: 14px; } .arc-bignum { font-size: 46px; } .arc-mines { grid-template-columns: repeat(5, 54px); } .arc-mines .tile { width: 54px; height: 54px; } .arc-plinko { transform: scale(.9); transform-origin: top center; } }
@media (prefers-reduced-motion: reduce) { .arc *, .arc-toast { animation: none !important; transition: none !important; } }

/* crash + jackpot */
.arc-crashgraph { width: 100%; max-width: 560px; height: auto; background: rgba(0,0,0,.28); border: 1px solid var(--line); border-radius: 16px; margin: 6px auto; display: block; }
.arc-bignum.crash { font-size: 72px; } .arc-crashsub { margin: 0 auto 8px; }
.arc-crashctl { max-width: 460px; margin: 10px auto; }
.arc-hist { flex-wrap: wrap; } .arc-hist i.hi { color: var(--win); } .arc-hist i.lo { color: var(--lose); }
.arc-players { max-width: 560px; margin: 8px auto; display: grid; gap: 6px; text-align: left; }
.arc-prow { display: grid; grid-template-columns: 1fr auto auto; gap: 12px; align-items: center; background: rgba(255,255,255,.05); border: 1px solid var(--line); border-radius: 10px; padding: 7px 12px; font-size: 14px; }
.arc-prow.ok { border-color: var(--win); background: rgba(52,211,153,.1); } .arc-prow.bad { border-color: var(--lose); background: rgba(248,113,113,.08); } .arc-prow small { color: var(--muted); }
.arc-prow .arc-meter { grid-column: 1 / -1; height: 5px; background: rgba(255,255,255,.08); border-radius: 99px; overflow: hidden; } .arc-meter i { display: block; height: 100%; background: linear-gradient(90deg, var(--accent), var(--gold)); }