@charset "UTF-8"; /* ================================================================ donutdice — shared terminal theme one accent color (--secondary), mono type, sharp edges, subtle motion The accent is a soft lilac. Everything that used to be red is a shade of it now: --secondary is the accent, --danger is a warmer lilac for failures, and --primary carries the same hue into the dark chrome. Nothing else in the tree hardcodes the accent, so this block is the whole palette. The one deliberate exception is --mine: a real red, for the tile that ends a round in mines and towers. The tiles carry no glyph at all, so colour is the whole signal, and the thing that just cost you the bet is the only red on the board. ================================================================ */ :root{ --bg:#000; --surface:#0a0a0a; --surface-light:#0f0f0f; --primary:#1e1a26; --primary-light:#262626; --primary-dark:#141414; --secondary:#b9a0f2; --blue:#0365e6; --brass:#c9975b; --success:#10b981; --danger:#cf93e0; --mine:#ff3b30; --accent:#8a8a8a; --text:#e6e6e6; --text-dim:#8a8a8a; --text-muted:#4d4d4d; --border:#1a1a1a; --border-hover:#2e2e2e; --shadow:none; --transition:all .15s ease; --font:'JetBrains Mono','Cascadia Code',Consolas,'Courier New',monospace; } *{margin:0;padding:0;box-sizing:border-box;font-family:var(--font)} /* the page black lives on , not : body's background would paint over anything at a negative z-index, which is where the ascii field sits */ html{background:var(--bg)} @media(min-width:1280px){html{zoom:1.25}} body{background:transparent;color:var(--text);min-height:100vh;overflow-x:hidden;padding-left:0;transition:padding .26s cubic-bezier(.4,0,.2,1);font-size:14px;line-height:1.5} body.sidebar-open{padding-left:210px} /* faint CRT scanlines over everything, purely decorative */ body::before{content:"";position:fixed;inset:0;z-index:2147483646;pointer-events:none;background:repeating-linear-gradient(to bottom,transparent 0 2px,rgba(0,0,0,.14) 2px 3px);opacity:.5} ::selection{background:var(--secondary);color:#000} img{filter:grayscale(1) contrast(1.05)} a{color:inherit} pre{font-family:var(--font)} button,input,select,textarea{font-family:var(--font);color:var(--text)} :focus{outline:none} :focus-visible{outline:1px dashed var(--secondary);outline-offset:3px} *{scrollbar-width:thin;scrollbar-color:var(--primary) transparent} ::-webkit-scrollbar{width:6px;height:6px} ::-webkit-scrollbar-track{background:transparent} ::-webkit-scrollbar-thumb{background:var(--primary);border-radius:0} ::-webkit-scrollbar-thumb:hover{background:var(--border-hover)} /* tabular numbers wherever figures tick */ .stat_value,.stat_card_value,.dice_number,.multiplier_display,.wallet_value,.wallet_irl,.balance_value, .wallet_balance_value,.wallet_modal_balance_value,.target_value,.slider_value,.time-value,.rakeback_amount, .hand_total,.game_pot,.summary_value,.last_win_value{font-variant-numeric:tabular-nums} /* ================= keyframes ================= */ @keyframes blink{0%,49%{opacity:1}50%,100%{opacity:0}} @keyframes boot{from{opacity:0}to{opacity:1}} @keyframes flicker{0%{opacity:1}25%{opacity:.55}50%{opacity:.9}75%{opacity:.45}100%{opacity:1}} @keyframes rot{to{transform:rotate(360deg)}} @keyframes rise{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:translateY(0)}} @keyframes modal_in{from{opacity:0;transform:scale(.985)}to{opacity:1;transform:scale(1)}} @keyframes tick_flash{0%{background:color-mix(in srgb,var(--secondary) 25%,transparent)}100%{background:transparent}} @keyframes ascii_glow{from{opacity:.92}to{opacity:1}} @keyframes ascii_pulse{0%,100%{opacity:1}50%{opacity:.85}} @keyframes float{to{opacity:0}} @keyframes spin{to{transform:rotate(360deg)}} /* motion off for those who ask */ @media (prefers-reduced-motion:reduce){ *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important} } /* ================================================================ icon glyphs — replaces font-awesome with terminal characters. works on markup and JS-generated alike. ================================================================ */ i[class^="fa"],i[class*=" fa"],.fas,.far,.fab,.fa-solid,.fa-regular{font-style:normal;font-family:var(--font);line-height:1} .fa-home::before{content:"⌂"} .fa-bomb::before{content:"*"} .fa-bullseye::before{content:"◎"} .fa-layer-group::before{content:"≡"} .fa-chess-rook::before{content:"#"} .fa-dice::before{content:"::"} .fa-dice-d20::before{content:"◇"} .fa-chart-line::before{content:"/"} .fa-circle-notch::before{content:"○"} .fa-clone::before{content:"▚"} .fa-trophy::before{content:"Ψ"} .fa-medal::before{content:"¤"} .fa-star::before{content:"★"} .fa-crown::before{content:"Ω"} .fa-bolt::before{content:"↯"} .fa-heart::before{content:"♥"} .fa-circle::before{content:"●"} .fa-gem::before{content:"◆"} .fa-coins::before{content:"¢"} .fa-wallet::before{content:"$"} .fa-bars::before{content:"≡"} .fa-times::before{content:"×"} .fa-circle-xmark::before{content:"×"} .fa-check::before{content:"✓"} .fa-copy::before{content:"+"} .fa-arrow-up::before{content:"↑"} .fa-arrow-down::before{content:"↓"} .fa-chevron-down::before{content:"▾"} .fa-chevron-left::before{content:"◂"} .fa-chevron-right::before{content:"▸"} .fa-exchange-alt::before{content:"⇄"} .fa-sign-in-alt::before{content:"→"} .fa-download::before{content:"↓"} .fa-sync::before{content:"↻"} .fa-redo::before{content:"↻"} .fa-history::before{content:"↺"} .fa-play::before{content:"▶"} .fa-stop::before{content:"■"} .fa-pause::before{content:"‖"} .fa-spinner::before{content:"|"} .fa-user::before{content:"@"} .fa-users::before{content:"&"} .fa-user-plus::before{content:"@+"} .fa-discord::before{content:"◈"} .fa-google::before{content:"G"} .fa-comments::before{content:"…"} .fa-comment-slash::before{content:"ø"} .fa-bullhorn::before{content:"!"} .fa-cog::before{content:"☼"} .fa-search::before{content:"?"} .fa-shield-alt::before,.fa-shield-halved::before{content:"◊"} .fa-skull::before{content:"☠"} .fa-fire::before{content:"^"} .fa-gift::before{content:"§"} .fa-lock::before{content:"▪"} .fa-ban::before{content:"Ø"} .fa-trash::before{content:"x"} .fa-edit::before{content:"✎"} .fa-eye::before{content:"◉"} .fa-filter::before{content:"∇"} .fa-list::before{content:"≡"} .fa-table::before{content:"#"} .fa-th::before{content:"#"} .fa-chart-bar::before{content:"▂▄▆"} .fa-chart-pie::before{content:"%"} .fa-percent::before,.fa-percentage::before{content:"%"} .fa-plus::before{content:"+"} .fa-exclamation::before{content:"!"} .fa-exclamation-triangle::before{content:"!"} .fa-clock::before{content:"◷"} .fa-calendar-check::before{content:"#"} .fa-money-bill-wave::before{content:"$"} .fa-hand-holding-dollar::before{content:"$"} .fa-hand-paper::before{content:"×"} .fa-hand-point-up::before{content:"↑"} .fa-award::before{content:"※"} .fa-box-open::before{content:"⊔"} .fa-broom::before{content:"%"} .fa-palette::before{content:"▓"} .fa-rocket::before{content:"▲"} .fa-server::before{content:"≡"} .fa-tags::before,.fa-ticket::before{content:"⌗"} .fa-id-card::before{content:"@"} .fa-link::before{content:"∞"} .fa-grip-vertical::before{content:"∷"} .fa-eraser::before{content:"×"} .fa-gamepad::before{content:"±"} .fa-spin{display:inline-block;animation:rot .8s steps(8) infinite} /* ================================================================ chrome: nav toggle, sidebar, logo, topbar, wallet ================================================================ */ .nav_toggle{position:fixed;top:20px;left:20px;z-index:1000;background:var(--surface);border:1px solid var(--border);color:var(--text-dim);font-size:16px;cursor:pointer;width:42px;height:42px;display:flex;align-items:center;justify-content:center;transition:var(--transition)} .nav_toggle:hover{border-color:var(--secondary);color:var(--secondary)} .nav_toggle:active{background:var(--surface-light)} /* the toggle glyph is a ">" that spins into a "<" when the sidebar opens */ .nav_toggle i{color:var(--secondary);display:inline-block;transition:transform .25s ease} .nav_toggle i::before{content:">"} body.sidebar-open .nav_toggle i{transform:rotate(180deg)} .sidebar{position:fixed;top:0;left:0;width:210px;height:100%;background:var(--surface);border-right:1px solid var(--border);z-index:900;transform:translateX(-100%);transition:transform .26s cubic-bezier(.4,0,.2,1);padding-top:0;overflow-y:auto} .sidebar::-webkit-scrollbar{display:none} .sidebar.active{transform:translateX(0)} .logo{text-align:center;margin-bottom:8px;padding:16px 14px 12px;position:relative;min-height:96px;display:flex;align-items:center;justify-content:center;flex-direction:column;gap:9px} .logo h1{display:none} .logo p{display:none} /* the pre fills the sidebar, so shrink it to the glyphs and centre that block — text-align alone would leave the art hugging the left edge */ .ascii_logo{font-family:var(--font);font-size:6.5px;line-height:1.15;color:var(--text);white-space:pre;text-shadow:none;text-align:left;width:fit-content;margin:0 auto} .ascii_logo .logo_red{color:var(--secondary)} .particle_container{display:none} .particle{display:none} .nav_section{padding:10px 18px;margin:18px 0 4px;font-size:10px;font-weight:500;color:var(--text-muted);text-transform:lowercase;letter-spacing:.28em} .nav_section::before{content:"// "} .nav_item{display:flex;align-items:center;gap:11px;padding:11px 18px;color:var(--text-dim);text-decoration:none;transition:color .12s ease,background .12s ease;border-left:1px solid transparent;margin:0;font-size:13px;position:relative} .nav_item::before{content:">";color:var(--secondary);opacity:0;width:0;overflow:hidden;transition:width .12s ease,opacity .12s ease} .nav_item:hover,.nav_item.active{color:var(--text);background:var(--surface-light);border-left-color:var(--secondary)} .nav_item:hover::before,.nav_item.active::before{opacity:1;width:1ch} .nav_item.active{color:var(--secondary)} .nav_item i{font-size:13px;width:20px;text-align:center;display:block;color:inherit} .nav_item:hover i{color:inherit} .nav_list{padding:8px 0} .nav_item.dragging{cursor:grabbing;opacity:.5} /* the bar spans the content area so the balance chip can sit dead-center in it; the strip itself must not eat clicks, so pointer-events comes back on children */ .topbar{position:fixed;top:16px;left:16px;right:16px;z-index:950;display:flex;gap:8px;align-items:stretch;justify-content:flex-end;pointer-events:none} body.sidebar-open .topbar{left:226px} .topbar>*{pointer-events:auto} .topbar_container{position:fixed;top:16px;right:16px;z-index:1000;display:flex;gap:8px;align-items:center} /* The chip is one figure and one mark. The mark is parked at the left edge and never moves; the figure is centred across the whole chip, so digits of different widths (and the fiat/coin swap) do not shunt the line sideways. Fixed width for the same reason. */ .wallet_box{position:absolute;left:0;right:0;top:0;margin:0 auto;background:var(--surface);border:1px solid var(--border);padding:9px 16px;height:54px;width:212px;display:flex;align-items:center;cursor:pointer;transition:var(--transition)} .wallet_box:hover{border-color:var(--secondary)} .wallet_icon{position:absolute;left:16px;top:50%;margin-top:-13px;width:26px;height:26px;flex:0 0 auto;color:var(--secondary);perspective:220px} .wallet_icon_face{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-size:23px;font-weight:700;line-height:1;transition:opacity .2s ease,transform .26s cubic-bezier(.3,.9,.3,1);backface-visibility:hidden} .wallet_icon_coin{opacity:0;transform:rotateY(-90deg)} .ltc_mark{width:26px;height:26px;display:block} /* Litecoin's published colours — its own blue disc, white Ł — rather than the chip's palette, so the badge is recognised as the coin at 26px instead of read as decoration. */ .ltc_mark_disc{fill:#345d9d} .ltc_mark_glyph{fill:#fff} .wallet_info{position:relative;width:100%} /* The balance is always in fiat. Both sets of digits are stacked in the same centred slot, so hovering slides the fiat out and the coin in while the mark flips from the fiat sign to the Litecoin badge — a second reading of the same figure, not a switch. */ .wallet_value{position:relative;height:1.25em;font-size:16px;font-weight:700;color:var(--text);line-height:1.25} .wallet_num{position:absolute;left:0;right:0;top:0;text-align:center;white-space:nowrap;transition:opacity .2s ease,transform .2s ease} .wallet_num_coin{opacity:0;transform:translateY(7px)} .wallet_irl{position:absolute;top:100%;left:0;right:0;margin-top:1px;font-size:9px;font-weight:500;color:var(--text-muted);letter-spacing:.14em;text-align:center;white-space:nowrap} /* hovering reads the same balance in the coin */ .wallet_box:hover .wallet_icon_fiat{opacity:0;transform:rotateY(90deg)} .wallet_box:hover .wallet_icon_coin{opacity:1;transform:rotateY(0)} .wallet_box:hover .wallet_num_fiat{opacity:0;transform:translateY(-7px)} .wallet_box:hover .wallet_num_coin{opacity:1;transform:translateY(0)} /* no quote at all: the coin is all there is, so do not offer a hover that shows a dash */ .wallet_box.no_price:hover .wallet_icon_fiat,.wallet_box.no_price:hover .wallet_num_fiat{opacity:0} .wallet_box.no_price:hover .wallet_icon_coin,.wallet_box.no_price:hover .wallet_num_coin{opacity:1;transform:none} /* signed out the figure is a placeholder zero, so mute it a shade */ .wallet_box.signed_out .wallet_value{color:var(--text-dim)} @media(prefers-reduced-motion:reduce){ .wallet_icon_face,.wallet_num{transition:opacity .12s linear} .wallet_box:hover .wallet_icon_fiat{transform:none} .wallet_box:hover .wallet_icon_coin{transform:none} .wallet_num_coin,.wallet_box:hover .wallet_num_fiat{transform:none} } .topbar_profile,.profile_box{display:flex;align-items:center;gap:10px;padding:9px 14px;height:54px;background:var(--surface);border:1px solid var(--border);cursor:pointer;transition:var(--transition)} .topbar_profile:hover,.profile_box:hover{border-color:var(--secondary)} .topbar_avatar{width:26px;height:26px;background:var(--surface-light);border:1px solid var(--border);display:flex;align-items:center;justify-content:center;font-size:13px;color:var(--text-dim);overflow:hidden} .topbar_avatar img{width:100%;height:100%;object-fit:cover} .topbar_user_info{display:flex;align-items:center;gap:6px} .topbar_username{font-size:12px;font-weight:500;color:var(--text)} .topbar_tag{background:transparent;border:1px solid var(--border-hover);color:var(--text-dim);font-size:8px;font-weight:500;padding:2px 5px;text-transform:lowercase;letter-spacing:.1em} .profile_name_area{display:flex;align-items:center;gap:6px} .profile_name_text{font-size:13px;font-weight:500} .profile_tag{font-size:9px;padding:2px 6px;border:1px solid var(--border-hover);color:var(--text-dim);text-transform:lowercase;letter-spacing:.1em} .profile_avatar_box{width:30px;height:30px;display:flex;align-items:center;justify-content:center;font-size:14px;overflow:hidden;background:var(--surface-light);border:1px solid var(--border);color:var(--text-dim)} .profile_avatar_box img{width:100%;height:100%;object-fit:cover} .name_icon{color:var(--secondary);font-size:13px;display:inline-flex;align-items:center;justify-content:center} /* ================================================================ layout + shared game shell ================================================================ */ main{padding:96px 24px 60px;max-width:1400px;margin:0 auto;position:relative;z-index:1} .game_container{display:grid;grid-template-columns:1fr;gap:20px} @media(min-width:1024px){.game_container{grid-template-columns:1fr 400px}} @media(max-width:1200px){body:not(.sidebar-open){padding-left:0}} @media(max-width:900px){body{padding-right:0!important;padding-left:0!important}} .controls_stack{display:flex;flex-direction:column;gap:20px;align-items:stretch} .controls_stack .game_controls:last-child{flex:1} .game_board,.game_controls{background:var(--surface);border:1px solid var(--border);padding:28px;position:relative} .game_board{min-height:600px} /* corner ticks on main panels — drawn via mask so background-color controls the tick color */ .game_board::after,.game_controls::after,.page_header::after,.profile_header::after,.create_panel::after,.feed_panel::after{content:"";position:absolute;inset:0;pointer-events:none;background-color:#4d4d4d;-webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='10'%3E%3Cpath d='M5 1V9M1 5H9' stroke='%23fff'/%3E%3C/svg%3E"),url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='10'%3E%3Cpath d='M5 1V9M1 5H9' stroke='%23fff'/%3E%3C/svg%3E"),url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='10'%3E%3Cpath d='M5 1V9M1 5H9' stroke='%23fff'/%3E%3C/svg%3E"),url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='10'%3E%3Cpath d='M5 1V9M1 5H9' stroke='%23fff'/%3E%3C/svg%3E");-webkit-mask-repeat:no-repeat;-webkit-mask-position:left 5px top 5px,right 5px top 5px,left 5px bottom 5px,right 5px bottom 5px;mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='10'%3E%3Cpath d='M5 1V9M1 5H9' stroke='%23fff'/%3E%3C/svg%3E"),url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='10'%3E%3Cpath d='M5 1V9M1 5H9' stroke='%23fff'/%3E%3C/svg%3E"),url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='10'%3E%3Cpath d='M5 1V9M1 5H9' stroke='%23fff'/%3E%3C/svg%3E"),url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='10'%3E%3Cpath d='M5 1V9M1 5H9' stroke='%23fff'/%3E%3C/svg%3E");mask-repeat:no-repeat;mask-position:left 5px top 5px,right 5px top 5px,left 5px bottom 5px,right 5px bottom 5px} /* corner tick flash on round result */ .corner_flash_win{--corner-flash:var(--secondary)} .corner_flash_lose{--corner-flash:var(--danger)} .corner_flash_win::after,.corner_flash_lose::after{animation:corner_flash 1s steps(1,end) both} @keyframes corner_flash{0%,33%,66%{background-color:var(--corner-flash)}17%,50%{background-color:#4d4d4d}83%,100%{background-color:#4d4d4d}} /* ================= shared results bar + win popup ================= */ .results_bar{position:absolute;top:10px;right:12px;display:flex;gap:6px;z-index:6;pointer-events:none} .results_chip{font-size:11px;line-height:1;padding:5px 9px;border:1px solid var(--border);background:var(--surface-light);color:var(--text-muted);font-variant-numeric:tabular-nums;animation:chip_in .25s cubic-bezier(.22,1,.36,1) both} .results_chip.rb_loss{color:var(--text-muted);border-color:var(--border)} .results_chip.rb_win{color:var(--success);border-color:rgba(16,185,129,.45)} .results_chip.rb_gold{color:var(--brass);border-color:rgba(201,151,91,.5)} @keyframes chip_in{from{opacity:0;transform:translateX(8px)}to{opacity:1;transform:translateX(0)}} .win_popup{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;z-index:10;pointer-events:none;opacity:0;transition:opacity .18s ease} .win_popup.show{opacity:1} .win_popup_box{pointer-events:auto;cursor:pointer;background:var(--bg);border:2px solid var(--success);padding:20px 44px;text-align:center;min-width:150px;transform:scale(.82);transition:transform .24s cubic-bezier(.34,1.56,.64,1);box-shadow:0 0 34px rgba(16,185,129,.14)} .win_popup.show .win_popup_box{transform:scale(1)} .win_popup_mult{font-size:30px;font-weight:700;color:var(--success);letter-spacing:1px;font-variant-numeric:tabular-nums} .win_popup_divider{height:1px;background:var(--border-hover);margin:12px 0} .win_popup_amount{font-size:14px;color:var(--text);font-variant-numeric:tabular-nums} .game_header{text-align:center;margin-bottom:28px} .game_header h1{font-size:28px;font-weight:700;margin-bottom:10px;text-transform:lowercase} .game_header p{color:var(--text-dim);font-size:13px} .ascii_highlight{font-family:var(--font);color:var(--secondary);text-shadow:none;animation:boot .45s steps(6) both} .ascii_highlight pre,pre.ascii_highlight,.ascii_hero,.game_header h1 pre{line-height:1.05!important} @media(max-width:640px){.game_header h1 pre{font-size:6px!important}.ascii_hero,pre.ascii_highlight{font-size:8px!important}} /* spaced game titles: clamp on narrow screens so long names never overflow */ .game_header h1.ascii_highlight,.create_header h1.ascii_highlight,.page_header h1.ascii_highlight{white-space:nowrap} @media(max-width:820px){.game_header h1.ascii_highlight,.create_header h1.ascii_highlight,.page_header h1.ascii_highlight{font-size:16px!important;letter-spacing:5px!important}} @media(max-width:480px){.game_header h1.ascii_highlight,.create_header h1.ascii_highlight,.page_header h1.ascii_highlight{font-size:12px!important;letter-spacing:3px!important}} .ascii_decor{font-family:var(--font);font-size:11px;color:var(--text-muted);white-space:pre} .ascii_banner{font-size:11px;text-align:center;white-space:pre;margin:16px 0;color:var(--text-muted)} .ascii_animated_border{position:relative} .ascii_animated_border::before{content:none} .control_group{margin-bottom:20px} .control_label{font-size:11px;color:var(--text-dim);margin-bottom:8px;display:block;text-transform:lowercase;letter-spacing:.14em} .control_label::before{content:"» ";color:var(--text-muted)} .control_input{width:100%;background:var(--bg);border:1px solid var(--border-hover);padding:12px 14px;color:var(--text);font-size:14px;transition:var(--transition)} .control_input:focus{border-color:var(--secondary)} .control_input::placeholder{color:var(--text-muted)} .game_button{width:100%;padding:14px;background:transparent;color:var(--secondary);border:1px solid var(--secondary);font-weight:500;cursor:pointer;transition:background .12s ease,color .12s ease;font-size:14px;display:flex;align-items:center;justify-content:center;gap:10px;text-transform:lowercase;letter-spacing:.06em} .game_controls .game_button+.game_button{margin-top:12px} .game_button:hover:not(:disabled){background:var(--secondary);color:#000} .game_button:active:not(:disabled){opacity:.85} .game_button:disabled{opacity:.35;cursor:not-allowed} .game_button.dimmed{opacity:.4;pointer-events:none;cursor:default} .game_button.dimmed:hover:not(:disabled){background:transparent;color:var(--secondary)} .game_button.secondary{color:var(--text-dim);border-color:var(--border-hover)} .game_button.secondary:hover:not(:disabled){background:transparent;border-color:var(--text-dim);color:var(--text)} .game_button.cashout{color:var(--text);border-color:var(--text)} .game_button.cashout:hover:not(:disabled){background:var(--text);color:#000} .game_stats{display:grid;grid-template-columns:repeat(2,1fr);gap:10px;margin-bottom:20px} .stat_item{background:var(--bg);border:1px solid var(--border);padding:14px;text-align:center} .stat_value{font-size:20px;font-weight:700;margin-bottom:4px} .stat_label{font-size:10px;color:var(--text-muted);text-transform:lowercase;letter-spacing:.18em} .stat_value.profit{color:var(--secondary)} .stat_value.loss{color:var(--danger)} .mult_value{color:var(--secondary);text-shadow:none;transition:color .15s ease} .mult_value.mult-default{color:var(--secondary)} .mult_value.mult-win{color:var(--secondary);animation:tick_flash .5s ease-out} .mult_value.mult-lose{color:var(--danger)} .game_info{background:transparent;border:1px solid var(--border);padding:18px;margin-top:20px} .game_info h3{font-size:11px;font-weight:500;margin-bottom:12px;color:var(--text-dim);letter-spacing:.22em;text-transform:lowercase;text-shadow:none;animation:none} .game_info h3::before{content:"// ";color:var(--text-muted)} .game_info p{font-size:12px;color:var(--text-dim);line-height:1.7;margin-bottom:6px;white-space:normal;opacity:1!important} .game_info p::before{content:"> ";color:var(--text-muted)} /* autobet */ .autobet_section{background:transparent;border:1px solid var(--border);padding:18px;margin-top:20px;margin-bottom:20px} .autobet_header{display:flex;justify-content:space-between;align-items:center;padding-bottom:14px;border-bottom:1px solid var(--border)} .autobet_header h4{font-size:11px;font-weight:500;text-transform:lowercase;letter-spacing:.22em;color:var(--text-dim)} .autobet_header h4::before{content:"// ";color:var(--text-muted)} .autobet_content{display:none;padding-top:16px} .autobet_content.active{display:block;animation:rise .18s ease-out} .autobet_grid{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-bottom:10px} .autobet_input_group{margin-bottom:12px} .autobet_input_group label{font-size:10px;color:var(--text-muted);display:block;margin-bottom:6px;text-transform:lowercase;letter-spacing:.12em} .autobet_input_group input,.autobet_input_group select{width:100%;background:var(--bg);border:1px solid var(--border-hover);padding:9px 10px;color:var(--text);font-size:12px;transition:var(--transition)} .autobet_input_group input:focus,.autobet_input_group select:focus{border-color:var(--secondary)} .autobet_input_group input:disabled{opacity:.35} input[type=number]::-webkit-inner-spin-button,input[type=number]::-webkit-outer-spin-button{-webkit-appearance:none;margin:0} input[type=number]{-moz-appearance:textfield} /* toggles (autobet + profile + admin share the pattern) */ .autobet_toggle,.toggle,.game_toggle,.toggle_switch{width:40px;height:20px;background:var(--bg);border:1px solid var(--border-hover);position:relative;cursor:pointer;transition:var(--transition);flex-shrink:0} .autobet_toggle.active,.toggle.active,.game_toggle.active,.toggle_switch.active{border-color:var(--secondary)} .autobet_toggle_handle,.toggle_handle{width:12px;height:12px;background:var(--text-muted);position:absolute;top:3px;left:3px;transition:left .15s ease,background .15s ease} .autobet_toggle.active .autobet_toggle_handle,.toggle.active .toggle_handle{left:23px;background:var(--secondary)} .game_toggle::after,.toggle_switch::after{content:"";position:absolute;width:12px;height:12px;background:var(--text-muted);top:3px;left:3px;transition:left .15s ease,background .15s ease} .game_toggle.active::after,.toggle_switch.active::after{left:23px;background:var(--secondary)} .toggle_switch{width:44px;height:22px} .toggle_switch::after{width:14px;height:14px} .toggle_switch.active::after{left:26px} /* result overlay */ .result_overlay{position:fixed;inset:0;background:rgba(0,0,0,.88);display:none;align-items:center;justify-content:center;z-index:9999} .result_overlay.active{display:flex} .result_content{background:var(--surface);border:1px solid var(--border-hover);padding:48px 64px;text-align:center;max-width:500px;animation:modal_in .18s ease-out} .result_content.win{border-color:var(--secondary)} .result_content.lose{border-color:var(--danger)} .result_icon{font-size:56px;margin-bottom:16px} .result_title{font-size:26px;font-weight:700;margin-bottom:12px;text-transform:lowercase} .result_title.win{color:var(--secondary)} .result_title.win::before{content:":: "} .result_title.win::after{content:" ::"} .result_title.lose{color:var(--danger)} .result_title.lose::before{content:":: "} .result_title.lose::after{content:" ::"} .result_amount{font-size:22px;font-weight:500;color:var(--text);margin-bottom:26px} .result_button{padding:12px 36px;background:transparent;color:var(--text);border:1px solid var(--border-hover);font-weight:500;cursor:pointer;font-size:14px;transition:var(--transition);text-transform:lowercase} .result_button:hover{border-color:var(--text);background:var(--text);color:#000} /* ================================================================ wallet modal — simple variant (dice/crash/cups/leaderboard/profile/mines/site) ================================================================ */ .wallet_modal{display:none;position:fixed;inset:0;background:rgba(0,0,0,.88);z-index:10000;align-items:center;justify-content:center} .wallet_modal.active{display:flex} .wallet_container{background:var(--surface);border:1px solid var(--border-hover);padding:28px;width:90%;max-width:420px;position:relative;animation:modal_in .18s ease-out} .wallet_close{position:absolute;top:14px;right:14px;background:none;border:none;color:var(--text-dim);font-size:16px;cursor:pointer;transition:var(--transition)} .wallet_close:hover{color:var(--text)} .wallet_title{font-size:14px;font-weight:500;margin-bottom:18px;text-align:center;text-transform:lowercase;letter-spacing:.22em;color:var(--text-dim)} .wallet_title::before{content:"[ "} .wallet_title::after{content:" ]"} .wallet_balance{text-align:center;margin-bottom:20px;padding:16px;background:var(--bg);border:1px solid var(--border)} .wallet_balance_label{font-size:10px;color:var(--text-muted);text-transform:lowercase;letter-spacing:.18em;margin-bottom:4px} .wallet_balance_value{font-size:24px;font-weight:700;color:var(--secondary)} .wallet_tabs{display:flex;gap:8px;margin-bottom:18px} .wallet_tab{flex:1;padding:10px;background:transparent;border:1px solid var(--border-hover);color:var(--text-dim);font-weight:500;cursor:pointer;transition:var(--transition);text-align:center;font-size:12px;text-transform:lowercase} .wallet_tab:hover{color:var(--text);border-color:var(--text-dim)} .wallet_tab.active{border-color:var(--secondary);color:var(--secondary)} .wallet_section{display:none} .wallet_section.active{display:block;animation:rise .15s ease-out} .wallet_input_group{margin-bottom:14px} .wallet_input_label{font-size:10px;color:var(--text-dim);margin-bottom:6px;display:block;text-transform:lowercase;letter-spacing:.14em} .wallet_input{width:100%;background:var(--bg);border:1px solid var(--border-hover);padding:11px 13px;color:var(--text);font-size:14px;transition:var(--transition)} .wallet_input:focus{border-color:var(--secondary)} .wallet_input.readonly{color:var(--text-dim);cursor:default} .wallet_copy_row{display:flex;gap:8px} .wallet_copy_row .wallet_input{flex:1} .wallet_copy_btn{background:transparent;border:1px solid var(--border-hover);padding:11px 15px;color:var(--text-dim);cursor:pointer;transition:var(--transition);display:flex;align-items:center;justify-content:center} .wallet_copy_btn:hover{border-color:var(--text);color:var(--text)} .wallet_copy_btn.copied{border-color:var(--secondary);color:var(--secondary)} .wallet_submit{width:100%;padding:12px;background:transparent;border:1px solid var(--secondary);color:var(--secondary);font-weight:500;font-size:13px;cursor:pointer;transition:var(--transition);margin-top:8px;text-transform:lowercase} .wallet_submit:hover{background:var(--secondary);color:#000} .wallet_submit:disabled{opacity:.35;cursor:not-allowed} .wallet_note{font-size:11px;color:var(--text-muted);text-align:center;margin-top:14px;line-height:1.6} /* wallet modal — overlay variant (keno/plinko/roulette/slots/towers/blackjack) */ .wallet_modal_overlay{position:fixed;inset:0;background:rgba(0,0,0,.88);z-index:2000;visibility:hidden;opacity:0;transition:opacity .15s ease,visibility .15s ease;display:flex;align-items:center;justify-content:center} .wallet_modal_overlay.active{visibility:visible;opacity:1} .wallet_modal_overlay .wallet_modal{display:block;position:static;background:var(--surface);border:1px solid var(--border-hover);width:90%;max-width:440px;transform:scale(.985);transition:transform .15s ease} .wallet_modal_overlay.active .wallet_modal{transform:scale(1)} .wallet_modal_header{padding:18px 20px;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid var(--border)} .wallet_modal_header h2{font-size:12px;font-weight:500;display:flex;align-items:center;gap:10px;text-transform:lowercase;letter-spacing:.22em;color:var(--text-dim)} .wallet_modal_header h2 i{color:var(--secondary)} .wallet_modal_close{background:none;border:none;color:var(--text-dim);font-size:16px;cursor:pointer;padding:6px;transition:var(--transition)} .wallet_modal_close:hover{color:var(--text)} .wallet_modal_balance{padding:22px;text-align:center;background:var(--bg);border-bottom:1px solid var(--border)} .wallet_modal_balance_label{font-size:10px;color:var(--text-muted);margin-bottom:8px;text-transform:lowercase;letter-spacing:.18em} .wallet_modal_balance_value{font-size:28px;font-weight:700;color:var(--secondary);margin-bottom:4px} .wallet_modal_balance_irl{font-size:12px;color:var(--text-dim)} .wallet_modal_tabs{display:flex;border-bottom:1px solid var(--border)} .wallet_modal_tab{flex:1;padding:13px;background:transparent;border:none;border-bottom:1px solid transparent;color:var(--text-dim);font-size:12px;cursor:pointer;transition:var(--transition);text-transform:lowercase} .wallet_modal_tab:hover{color:var(--text)} .wallet_modal_tab.active{color:var(--secondary);border-bottom-color:var(--secondary);margin-bottom:-1px} .wallet_modal_content{padding:20px} .wallet_tab_content{display:none} .wallet_tab_content.active{display:block;animation:rise .15s ease-out} .wallet_input_group label{display:block;font-size:10px;color:var(--text-dim);margin-bottom:8px;text-transform:lowercase;letter-spacing:.14em} .wallet_input_group input{width:100%;background:var(--bg);border:1px solid var(--border-hover);padding:11px 13px;color:var(--text);font-size:13px;transition:var(--transition)} .wallet_input_group input:focus{border-color:var(--secondary)} .wallet_quick_amounts{display:flex;gap:8px;margin-bottom:14px;flex-wrap:wrap} .wallet_quick_amount{padding:7px 13px;background:transparent;border:1px solid var(--border-hover);color:var(--text-dim);font-size:12px;cursor:pointer;transition:var(--transition)} .wallet_quick_amount:hover{border-color:var(--secondary);color:var(--secondary)} .wallet_info_box{background:var(--bg);border:1px solid var(--border);padding:13px;margin-bottom:14px} .wallet_info_row{display:flex;justify-content:space-between;align-items:center;padding:5px 0;font-size:12px} .wallet_info_row:not(:last-child){border-bottom:1px solid var(--border)} .wallet_info_label{color:var(--text-muted)} .wallet_info_value{color:var(--text)} .wallet_info_value.highlight{color:var(--secondary)} .wallet_pay_command{background:var(--bg);border:1px dashed var(--border-hover);padding:11px;font-size:12px;margin-bottom:14px;display:flex;align-items:center;justify-content:space-between;gap:10px} .wallet_pay_command code{flex:1;color:var(--secondary);font-family:var(--font)} .wallet_pay_command button{background:transparent;border:1px solid var(--border-hover);color:var(--text-dim);padding:7px 11px;cursor:pointer;white-space:nowrap;transition:var(--transition);font-size:11px} .wallet_pay_command button:hover{border-color:var(--text);color:var(--text)} .wallet_btn{width:100%;padding:12px;background:transparent;border:1px solid var(--secondary);color:var(--secondary);font-size:13px;font-weight:500;cursor:pointer;transition:var(--transition);text-transform:lowercase} .wallet_btn:hover{background:var(--secondary);color:#000} .wallet_btn:disabled{opacity:.35;cursor:not-allowed} .wallet_btn.withdraw_btn{border-color:var(--text-dim);color:var(--text-dim)} .wallet_btn.withdraw_btn:hover{background:transparent;border-color:var(--text);color:var(--text)} @media(max-width:500px){.topbar{top:auto;bottom:16px;right:16px;left:16px;justify-content:center}.wallet_box{position:static;margin:0;width:auto;height:auto}.topbar_profile{height:auto}.wallet_box,.topbar_profile{flex:1;justify-content:center}} /* ================================================================ chat ================================================================ */ .chat_messages{flex:1;overflow-y:auto;padding:14px;display:flex;flex-direction:column;gap:12px} .chat_messages::-webkit-scrollbar{width:4px} .chat_messages::-webkit-scrollbar-thumb{background:var(--primary)} .chat_message{display:flex;gap:10px;animation:rise .15s ease-out} .chat_avatar{width:28px;height:28px;flex-shrink:0;overflow:hidden;display:flex;align-items:center;justify-content:center;background:var(--surface-light);border:1px solid var(--border);color:var(--text-muted)} .chat_avatar img{width:100%;height:100%;object-fit:cover} .chat_avatar i{font-size:12px} .chat_content{flex:1;min-width:0} .chat_username{font-size:12px;font-weight:500;color:var(--secondary);margin-bottom:2px} .chat_text{font-size:12px;line-height:1.5;color:var(--text-dim);word-wrap:break-word} .chat_time{font-size:10px;color:var(--text-muted);margin-left:8px;font-weight:400} .chat_input_area{padding:14px;display:flex;gap:8px;border-top:1px solid var(--border)} .chat_input{flex:1;background:var(--bg);border:1px solid var(--border-hover);padding:10px 12px;color:var(--text);font-size:12px;transition:var(--transition)} .chat_input:focus{border-color:var(--secondary)} .chat_input::placeholder{color:var(--text-muted)} .chat_send{background:transparent;border:1px solid var(--border-hover);color:var(--text-dim);padding:10px 14px;cursor:pointer;transition:var(--transition)} .chat_send:hover{border-color:var(--secondary);color:var(--secondary)} .chat_send:disabled{opacity:.35;cursor:not-allowed} .chat_send i{font-size:11px} .chat_empty{text-align:center;padding:30px 16px;color:var(--text-muted)} .chat_empty i{font-size:20px;margin-bottom:10px;display:block} .chat_empty p{font-size:11px} /* ================================================================ dice ================================================================ */ .dice_display{margin:0 0 36px;background:var(--bg);border:1px solid var(--border);padding:52px;position:relative;overflow:hidden} .dice_display::before{content:"";position:absolute;inset:0;pointer-events:none;background:none} .dice_number{font-size:96px;font-weight:700;text-align:center;color:var(--text);transition:color .15s ease;text-shadow:none;white-space:pre;margin:0} /* ascii-art digits: ~18ch wide, clamp keeps it inside the display box on any viewport */ pre.dice_number:where(:not(.simple)){font-size:clamp(4px,1.6vw,15px);line-height:1.25;font-weight:400;color:var(--secondary);--dice-base:var(--secondary)} .dice_number.rolling{--dice-base:var(--text-dim)} .dice_number.win{--dice-base:var(--secondary)} .dice_number.lose{--dice-base:var(--danger)} /* flame effect: each row is one solid color, stepping slightly lighter toward the top where the glyphs thin out (waning like flame tips). static gradient — the movement comes from the character flicker in the dice interface (assets/games/dice.js), which is also weighted toward the top rows */ .dice_row{display:block} .dice_row:nth-child(1){color:color-mix(in srgb,var(--dice-base) 86%,#fff)} .dice_row:nth-child(2){color:color-mix(in srgb,var(--dice-base) 89%,#fff)} .dice_row:nth-child(3){color:color-mix(in srgb,var(--dice-base) 92%,#fff)} .dice_row:nth-child(4){color:color-mix(in srgb,var(--dice-base) 94%,#fff)} .dice_row:nth-child(5){color:color-mix(in srgb,var(--dice-base) 96%,#fff)} .dice_row:nth-child(6){color:color-mix(in srgb,var(--dice-base) 98%,#fff)} .dice_row:nth-child(7){color:var(--dice-base)} .dice_number.rolling{animation:flicker .25s steps(2) infinite;color:var(--text-dim)} .dice_number.win{color:var(--secondary)} .dice_number.lose{color:var(--danger)} /* "simple numbers" setting: hollow outlined digits (after win/lose so the transparent fill wins) */ .dice_number.simple{font-size:clamp(48px,12vw,96px);line-height:1.2;color:transparent;-webkit-text-stroke:2px var(--text)} .dice_number.simple.rolling{-webkit-text-stroke-color:var(--text-dim)} .dice_number.simple.win{-webkit-text-stroke-color:var(--secondary)} .dice_number.simple.lose{-webkit-text-stroke-color:var(--danger)} @keyframes roll{from{opacity:.4}to{opacity:1}} .target_display{text-align:center;margin-bottom:26px} .target_label{font-size:11px;color:var(--text-muted);margin-bottom:6px;text-transform:lowercase;letter-spacing:.22em} .target_value{font-size:28px;font-weight:700;color:var(--text)} .slider_container{margin-bottom:36px} .slider_display{display:flex;justify-content:space-between;margin-bottom:12px} .slider_label{font-size:11px;color:var(--text-muted);text-transform:lowercase;letter-spacing:.22em} .slider_value{font-size:15px;font-weight:700;color:var(--secondary)} .slider_track_wrap{position:relative;display:flex;align-items:center} /* dashed track: uniform dash mask over a two-tone base that flips color at the thumb. --split is the thumb position; the lit side is orange, the other side dim */ .slider_track{position:absolute;left:0;right:0;top:50%;transform:translateY(-50%);height:2px;pointer-events:none;--split:50%;--col-left:var(--border-hover);--col-right:var(--secondary);background:linear-gradient(to right,var(--col-left) 0 var(--split),var(--col-right) var(--split) 100%);-webkit-mask:repeating-linear-gradient(to right,#000 0 6px,transparent 6px 12px);mask:repeating-linear-gradient(to right,#000 0 6px,transparent 6px 12px)} .slider{-webkit-appearance:none;appearance:none;display:block;position:relative;width:100%;height:14px;margin:0;background:transparent;outline:none;cursor:pointer;touch-action:none;user-select:none;-webkit-user-drag:none} .slider::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:14px;height:14px;border-radius:0;background:var(--secondary);cursor:pointer;transition:transform .1s ease} .slider::-moz-range-track{height:2px;background:transparent;border:none} .slider::-moz-range-thumb{width:14px;height:14px;border-radius:0;background:var(--secondary);cursor:pointer;border:none;transition:transform .1s ease} .slider:hover::-webkit-slider-thumb{transform:scale(1.25)} .slider:hover::-moz-range-thumb{transform:scale(1.25)} .prediction_buttons{display:flex;gap:10px;margin-bottom:26px} .prediction_button{flex:1;padding:16px;background:transparent;border:1px solid var(--border-hover);cursor:pointer;transition:var(--transition);text-align:center;font-weight:500;font-size:14px;color:var(--text-dim);text-transform:lowercase} .prediction_button:hover{border-color:var(--text-dim);color:var(--text)} .prediction_buttons:has(.active) .prediction_button:not(.active){color:var(--text-muted);opacity:.7} .prediction_button.active{border-color:var(--secondary);color:var(--secondary);background:color-mix(in srgb,var(--secondary) 6%,transparent)} /* ================================================================ mines + towers ================================================================ */ .mines_grid{display:grid;grid-template-columns:repeat(5,1fr);gap:10px;max-width:500px;margin:0 auto 28px} .mine_tile{aspect-ratio:1;background:var(--bg);border:1px solid var(--border-hover);cursor:pointer;display:flex;align-items:center;justify-content:center;font-size:20px;position:relative;transition:border-color .12s ease,background .12s ease;color:var(--text-muted)} .mine_tile:hover:not(.revealed):not(.disabled){border-color:var(--secondary);background:color-mix(in srgb,var(--secondary) 5%,transparent)} .mine_tile.revealed{cursor:default} .mine_tile.revealed.safe{border-color:var(--secondary);color:var(--secondary);animation:tick_flash .45s ease-out} .mine_tile.revealed.safe i{color:var(--secondary)} .mine_tile.revealed.mine{border-color:var(--danger);color:var(--danger);animation:flicker .3s steps(2)} .mine_tile.revealed.mine i{color:var(--danger)} .mine_tile.disabled{cursor:not-allowed;opacity:.55} @keyframes revealSafe{from{opacity:.3}to{opacity:1}} @keyframes revealMine{from{opacity:.3}to{opacity:1}} .ascii_bomb,.ascii_gem{font-size:18px;line-height:1;display:flex;align-items:center;justify-content:center} .mines_selector{display:flex;gap:8px;flex-wrap:wrap} .mines_option,.difficulty_option,.selector_option{flex:1;min-width:56px;padding:11px;background:transparent;border:1px solid var(--border-hover);text-align:center;cursor:pointer;transition:var(--transition);color:var(--text-dim);font-size:13px} .mines_option:hover,.difficulty_option:hover,.selector_option:hover{border-color:var(--text-dim);color:var(--text)} .mines_option.active,.difficulty_option.active,.selector_option.active{border-color:var(--secondary);color:var(--secondary);background:color-mix(in srgb,var(--secondary) 6%,transparent)} .difficulty_selector{display:flex;gap:8px} .selector_row{display:flex;gap:8px} .tower{display:flex;flex-direction:column-reverse;gap:10px;max-width:400px;margin:0 auto} .tower_row{display:flex;gap:10px} .tower_tile{flex:1;padding:22px;background:var(--bg);border:1px solid var(--border);display:flex;align-items:center;justify-content:center;font-size:20px;min-height:72px;transition:border-color .12s ease,background .12s ease;color:var(--text-muted)} .tower_tile:not(.revealed):not(.disabled){cursor:pointer;border-color:var(--border-hover)} .tower_tile:not(.revealed):not(.disabled):hover{border-color:var(--secondary);background:color-mix(in srgb,var(--secondary) 5%,transparent)} .tower_tile.revealed.safe{cursor:default;border-color:var(--secondary);color:var(--secondary);animation:tick_flash .45s ease-out} .tower_tile.revealed.danger{cursor:default;border-color:var(--danger);color:var(--danger);animation:flicker .3s steps(2)} .tower_tile.disabled{cursor:not-allowed;pointer-events:none;opacity:.45} /* ================================================================ keno ================================================================ */ .keno_grid{display:grid;grid-template-columns:repeat(8,1fr);gap:10px;max-width:700px;margin:0 auto 28px} .keno_number{aspect-ratio:1;background:var(--bg);border:1px solid var(--border-hover);cursor:pointer;display:flex;align-items:center;justify-content:center;font-size:16px;font-weight:500;transition:border-color .12s ease,color .12s ease,background .12s ease;color:var(--text-dim)} .keno_number:hover:not(.disabled):not(.drawn.selected){border-color:var(--secondary);color:var(--text)} .keno_number.restoring{transition:border-color .6s ease,color .6s ease,background .6s ease} .keno_number.selected{border-color:var(--secondary);color:var(--secondary);background:color-mix(in srgb,var(--secondary) 8%,transparent)} .keno_number.drawn{border-color:var(--border);color:var(--text-muted);background:var(--surface-light);animation:draw .25s steps(3)} .keno_number.drawn.selected{border-color:var(--secondary);background:var(--secondary);color:#000;font-weight:700} @keyframes draw{from{opacity:.2}to{opacity:1}} .selection_count{text-align:center;margin-bottom:18px;font-size:13px;color:var(--text-dim)} .selection_count span{color:var(--secondary);font-weight:700} .keno_payouts{max-width:700px;margin:24px auto 0;border:1px solid var(--border);padding:14px 16px} .keno_payouts_title{font-size:11px;letter-spacing:.22em;text-transform:lowercase;color:var(--text-dim);margin-bottom:12px} .keno_payouts_grid{display:flex;flex-wrap:wrap;gap:8px;min-height:56px} .keno_payout_item{flex:1 1 90px;min-width:90px;border:1px solid var(--border);padding:8px 10px;text-align:center;background:var(--bg)} .keno_payout_hits{font-size:11px;color:var(--text-muted);margin-bottom:4px} .keno_payout_mult{font-size:14px;font-weight:700;color:var(--secondary)} .keno_payouts_empty{font-size:12px;color:var(--text-muted)} .keno_payout_item{transition:border-color .15s ease,background .15s ease} .keno_payout_item.hit_active{border-color:var(--secondary);background:color-mix(in srgb,var(--secondary) 8%,transparent)} .keno_payout_item.hit_active .keno_payout_hits{color:var(--secondary)} .keno_payout_placeholder{opacity:.45} .keno_payout_placeholder .keno_payout_mult{color:var(--text-muted)} /* ================================================================ slots ================================================================ */ .slots_machine{position:relative;padding:20px;background:var(--bg);border:1px solid var(--border);width:fit-content;margin:0 auto} .slots_grid{display:grid;grid-template-columns:repeat(5,1fr);grid-template-rows:repeat(3,1fr);gap:8px;position:relative} .slot_cell{width:70px;height:70px;background:var(--surface);border:1px solid var(--border-hover);display:flex;align-items:center;justify-content:center;font-size:24px;position:relative;overflow:hidden;color:var(--text-dim);transition:border-color .15s ease} .slot_cell i{transition:none} .slot_cell.winner{border-color:var(--secondary);animation:tick_flash .6s ease-out 2} .slot_cell.winner i{color:var(--secondary)} .slot_cell.highlight{border-color:var(--secondary)} .reel_strip{display:flex;flex-direction:column;align-items:center;justify-content:center;height:100%} .slot_cell.spinning .reel_strip{animation:reel_spin .12s linear infinite} @keyframes reel_spin{from{transform:translateY(-30%)}to{transform:translateY(30%)}} @keyframes winner_pulse{0%,100%{opacity:1}50%{opacity:.6}} .icon_gem{color:var(--secondary)} .icon_star{color:var(--text)} .icon_crown{color:var(--text)} .icon_bolt{color:var(--text-dim)} .icon_heart{color:var(--text-dim)} .icon_circle{color:var(--text-muted)} .spin_btn_container{margin-top:22px;width:100%} .spin_btn{width:100%;padding:16px;background:transparent;color:var(--secondary);border:1px solid var(--secondary);cursor:pointer;font-size:15px;font-weight:500;display:flex;align-items:center;justify-content:center;gap:10px;transition:background .12s ease,color .12s ease;text-transform:lowercase;letter-spacing:.06em} .spin_btn:hover:not(:disabled){background:var(--secondary);color:#000} .spin_btn:active:not(:disabled){opacity:.85} .spin_btn:disabled{opacity:.35;cursor:not-allowed} .spin_btn i{font-size:16px} .payout_table{overflow:hidden;border:1px solid var(--border);margin-top:20px} .patterns_header{padding:13px 15px;display:flex;align-items:center;justify-content:space-between;cursor:pointer;transition:var(--transition)} .patterns_header:hover{background:var(--surface-light)} .patterns_header h3{font-size:11px;font-weight:500;margin:0;display:flex;align-items:center;gap:8px;color:var(--text-dim);letter-spacing:.18em;text-transform:lowercase} .patterns_header i{font-size:11px;color:var(--text-muted);transition:transform .15s ease} .patterns_header.open i{transform:rotate(180deg)} .patterns_content{max-height:0;overflow:hidden;transition:max-height .25s ease} .patterns_content.open{max-height:600px} .patterns_inner{padding:0 15px 15px} .payout_row{display:flex;align-items:center;gap:10px;padding:6px 0;border-bottom:1px solid var(--border)} .payout_row:last-child{border-bottom:none} .payout_mult{font-size:13px;margin-left:auto;color:var(--secondary);font-weight:700} .pattern_visual{width:50px;height:30px;display:flex;align-items:center;justify-content:center} .mini_grid{display:grid;grid-template-columns:repeat(5,8px);grid-template-rows:repeat(3,8px);gap:2px} .mini_grid span{width:8px;height:8px;background:var(--primary)} .mini_grid span.on{background:var(--secondary)} .pattern_name{font-size:11px;color:var(--text-dim)} .last_win{padding:12px;margin-bottom:18px;text-align:center;background:var(--bg);border:1px solid var(--border)} .last_win_label{font-size:10px;color:var(--text-muted);margin-bottom:4px;text-transform:lowercase;letter-spacing:.18em} .last_win_value{font-size:16px;font-weight:700;color:var(--secondary)} .last_win_value.none{color:var(--text-muted)} /* ================================================================ crash ================================================================ */ .crash_graph{height:400px;position:relative;overflow:hidden;margin-bottom:26px;background:var(--bg);border:1px solid var(--border)} .crash_graph canvas{width:100%;height:100%;display:block} .multiplier_display{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);font-size:64px;font-weight:700;z-index:10;pointer-events:none;color:var(--text);text-shadow:none} .multiplier_display:where(:not(.simple)){font-size:clamp(4px,1.2vw,11px);line-height:1.25;font-weight:400;white-space:pre;--dice-base:var(--text)} .multiplier_display.cashed_out{color:var(--secondary);--dice-base:var(--secondary)} .multiplier_display.crashed{color:var(--danger);--dice-base:var(--danger);animation:flicker .35s steps(2)} .multiplier_display.simple{color:transparent;-webkit-text-stroke:2px var(--text)} .multiplier_display.simple.cashed_out{-webkit-text-stroke-color:var(--secondary)} .multiplier_display.simple.crashed{-webkit-text-stroke-color:var(--danger)} @keyframes crash{from{opacity:.4}to{opacity:1}} .crash_status{text-align:center;font-size:13px;margin-bottom:18px;color:var(--text-dim);text-transform:lowercase;letter-spacing:.14em} .crash_status.waiting{color:var(--text-dim)} .crash_status.flying{color:var(--secondary)} .crash_status.crashed{color:var(--danger)} .history_bar{display:flex;gap:6px;overflow:hidden;padding:12px;margin-bottom:18px;background:var(--bg);border:1px solid var(--border)} .history_item{flex:1;min-width:0;padding:8px 6px;text-align:center;font-size:12px;font-weight:500;border:1px solid var(--border);color:var(--text-dim);background:transparent} .history_item.placeholder{opacity:.3} .history_item.cashed_out{border-color:var(--secondary);color:var(--secondary)} .history_item.not_cashed_out{border-color:var(--border-hover);color:var(--text-muted)} .history_item.high{border-color:var(--secondary);color:var(--secondary)} .history_item.low{border-color:var(--border-hover);color:var(--text-muted)} .ascii_rocket{font-family:var(--font);font-size:32px;animation:none;color:var(--secondary)} .ascii_explosion{font-family:var(--font);font-size:40px;color:var(--danger);animation:flicker .3s steps(2)} @keyframes rocket_shake{0%,100%{transform:none}} @keyframes explode{from{opacity:.2}to{opacity:1}} /* ================================================================ roulette ================================================================ */ .wheel_container{position:relative;width:440px;height:440px;margin:0 auto 26px} .wheel_outer{position:absolute;width:100%;height:100%;border:1px solid var(--border-hover);border-radius:50%} .wheel_canvas{position:absolute;top:10px;left:10px;width:calc(100% - 20px);height:calc(100% - 20px)} .wheel_center{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:115px;height:115px;background:var(--bg);border:1px solid var(--border-hover);border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:22px;font-weight:700;z-index:10;color:var(--text)} .wheel_center span{transition:opacity 0.15s ease} .wheel_center #result_display{font-size:5px;line-height:1.25;font-weight:400;white-space:pre;text-align:center;--dice-base:#fff} .wheel_marker{position:absolute;top:-15px;left:50%;transform:translateX(-50%);z-index:15} .wheel_marker::before{content:"";display:block;width:0;height:0;border-left:8px solid transparent;border-right:8px solid transparent;border-top:14px solid var(--secondary)} .betting_section{width:100%;max-width:500px;margin:0 auto} .bet_row{display:flex;gap:10px;margin-bottom:10px} .bet_option{flex:1;padding:16px;background:transparent;border:1px solid var(--border-hover);cursor:pointer;text-align:center;font-size:14px;transition:var(--transition);color:var(--text-dim)} .bet_option:hover:not(.selected){border-color:var(--text-dim);color:var(--text)} .bet_option.bet_nudge{animation:bet_nudge .3s ease 2;border-color:var(--danger)!important} @keyframes bet_nudge{0%,100%{transform:translateX(0)}25%{transform:translateX(-5px)}75%{transform:translateX(5px)}} .bet_option.selected{border-color:var(--secondary);color:var(--secondary);background:color-mix(in srgb,var(--secondary) 6%,transparent)} .bet_option.color_black{color:var(--text-dim)} .bet_option.color_black.selected{border-color:var(--text);color:var(--text);background:color-mix(in srgb,#ffffff 5%,transparent)} .bet_option.color_accent .bet_label{color:var(--secondary)} .bet_option.color_blue .bet_label{color:#0365e6} .bet_option.color_blue.selected{border-color:#0365e6;color:#0365e6;background:color-mix(in srgb,#0365e6 8%,transparent)} .bet_option.color_red .bet_label{color:#ef4444} .bet_option.color_red.selected{border-color:#ef4444;color:#ef4444;background:color-mix(in srgb,#ef4444 8%,transparent)} .bet_label{font-size:15px;font-weight:700;margin-bottom:4px} .bet_mult{font-size:11px;color:var(--text-muted)} .bet_divider{text-align:center;font-size:10px;color:var(--text-muted);margin:18px 0 14px;display:flex;align-items:center;gap:12px;text-transform:lowercase;letter-spacing:.22em} .bet_divider::before,.bet_divider::after{content:"";flex:1;height:1px;background:var(--border)} .selected_bets{padding:13px;min-height:50px;display:flex;flex-wrap:wrap;gap:8px;align-items:center;background:var(--bg);border:1px solid var(--border)} .selected_bet_tag{padding:5px 11px;font-size:12px;display:flex;align-items:center;gap:6px;border:1px solid var(--secondary);color:var(--secondary)} .selected_bet_tag.black{border-color:var(--text-dim);color:var(--text)} .selected_bet_tag.parity{border-color:var(--text-dim);color:var(--text-dim)} .no_bets{font-size:12px;color:var(--text-muted)} /* ================================================================ plinko ================================================================ */ .plinko_container{position:relative;width:100%;max-width:650px;margin:0 auto;overflow:hidden;display:flex;flex-direction:column;background:var(--bg);border:1px solid var(--border)} #plinko_canvas{width:100%;flex:1;display:block} .multipliers_row{display:flex;justify-content:center;padding:0 4%;gap:4px;margin-bottom:8px} .multiplier_slot{flex:1;padding:7px 3px;font-size:10px;font-weight:500;text-align:center;position:relative;cursor:help;border:1px solid var(--border);color:var(--text-dim);background:var(--surface)} .multiplier_slot:hover{border-color:var(--text-dim);color:var(--text)} .multiplier_slot:first-child,.multiplier_slot:last-child{color:var(--secondary);border-color:var(--border-hover)} .multiplier_slot.hit{border-color:var(--secondary);color:var(--secondary);animation:tick_flash .5s ease-out} @keyframes mult_hit{from{opacity:.4}to{opacity:1}} .multiplier_slot .tooltip{position:absolute;bottom:100%;left:50%;transform:translateX(-50%);background:var(--surface);border:1px solid var(--border-hover);padding:5px 9px;font-size:10px;white-space:nowrap;pointer-events:none;z-index:100;opacity:0;transition:opacity .12s ease;color:var(--text)} .multiplier_slot:hover .tooltip{opacity:1} .ball_count_row{display:flex;gap:8px;margin-bottom:12px} .ball_count_btn{flex:1;padding:9px;background:transparent;border:1px solid var(--border-hover);font-size:12px;cursor:pointer;color:var(--text-dim);transition:var(--transition)} .ball_count_btn:hover{border-color:var(--text-dim);color:var(--text)} .ball_count_btn.active{border-color:var(--secondary);color:var(--secondary)} /* ================================================================ blackjack ================================================================ */ .table{padding:36px;margin-bottom:26px;background:var(--bg);border:1px solid var(--border)} .hand{margin-bottom:36px} .hand_label{font-size:11px;color:var(--text-muted);margin-bottom:10px;text-transform:lowercase;letter-spacing:.22em} .hand_label::before{content:"// "} .hand_total{font-size:20px;font-weight:700;margin-bottom:12px;color:var(--secondary)} .cards{display:flex;gap:10px;flex-wrap:wrap} .card{width:76px;height:108px;background:var(--surface);border:1px solid var(--border-hover);display:flex;flex-direction:column;align-items:center;justify-content:center;font-size:24px;position:relative;padding:8px;animation:deal .18s ease-out both;color:var(--text)} .card .card_value{font-size:22px;font-weight:700;margin-bottom:4px} .card .card_suit{font-size:26px} .card.red,.card .red{color:var(--secondary)} @keyframes deal{from{opacity:0;transform:translateY(-10px)}to{opacity:1;transform:translateY(0)}} /* ================================================================ cups ================================================================ */ .cups_container{display:grid;grid-template-columns:1fr;gap:20px} .create_panel,.feed_panel{background:var(--surface);border:1px solid var(--border);padding:28px;position:relative} .create_header h1{font-size:26px;font-weight:700;margin-bottom:8px;display:flex;align-items:center;gap:12px;text-transform:lowercase} .create_header p{font-size:13px;color:var(--text-dim);margin-bottom:22px} .create_button{width:100%;padding:14px;background:transparent;color:var(--secondary);border:1px solid var(--secondary);cursor:pointer;font-size:14px;font-weight:500;display:flex;align-items:center;justify-content:center;gap:8px;transition:background .12s ease,color .12s ease;text-transform:lowercase} .create_button:hover:not(:disabled){background:var(--secondary);color:#000} .create_button:disabled{opacity:.35;cursor:not-allowed} .feed_header{display:flex;align-items:center;justify-content:space-between;margin-bottom:22px} .feed_header h2{font-size:18px;font-weight:700;text-transform:lowercase} .feed_count{font-size:12px;color:var(--text-muted)} .games_feed{display:flex;flex-direction:column;gap:14px;max-height:800px;overflow-y:auto;padding-right:8px} .game_card{background:var(--bg);border:1px solid var(--border);padding:18px;cursor:pointer;min-height:200px;transition:border-color .12s ease} .game_card:hover{border-color:var(--secondary)} .game_card.full{cursor:not-allowed;opacity:.6} .game_card.playing{cursor:default;pointer-events:none;border-color:var(--border-hover)} .game_card_header{display:flex;justify-content:space-between;align-items:center;margin-bottom:14px} .game_id{font-size:11px;color:var(--text-muted)} .game_pot{font-size:18px;font-weight:700;color:var(--secondary)} .game_info_row{display:flex;align-items:center;gap:16px;margin-bottom:10px} .game_label{font-size:11px;color:var(--text-muted)} .game_value{font-size:13px;color:var(--text)} .game_arena{display:flex;flex-direction:column;align-items:center;gap:18px;padding:18px 0} .arena_players{display:flex;justify-content:center;gap:32px;align-items:flex-end} .arena_player{display:flex;flex-direction:column;align-items:center;gap:10px;transition:opacity .2s ease} .arena_player.dimmed{opacity:.3} .arena_player.winner{opacity:1} .arena_player.winner .arena_avatar{border-color:var(--secondary)} .arena_player.empty{opacity:.4} .arena_avatar{width:72px;height:72px;overflow:hidden;display:flex;align-items:center;justify-content:center;background:var(--surface-light);border:1px solid var(--border-hover);color:var(--text-muted);transition:border-color .15s ease} .arena_avatar img{width:100%;height:100%;object-fit:cover} .arena_avatar i{font-size:26px} .arena_light{width:12px;height:12px;background:var(--primary);transition:background .15s ease} .arena_light.active{background:var(--secondary)} .arena_light.spinning{background:var(--secondary);animation:blink .5s steps(1) infinite} @keyframes pulse{0%,100%{opacity:1}50%{opacity:.4}} .arena_status{text-align:center;font-size:12px;margin-top:8px;color:var(--text-dim)} .game_status{display:inline-block;padding:3px 10px;font-size:10px;border:1px solid var(--border-hover);color:var(--text-dim);text-transform:lowercase;letter-spacing:.1em} .game_status.waiting{border-color:var(--text-dim);color:var(--text-dim)} .game_status.playing{border-color:var(--secondary);color:var(--secondary)} .empty_state{text-align:center;padding:60px 20px;color:var(--text-muted)} .empty_state i{font-size:32px;margin-bottom:14px;display:block} .empty_state p{font-size:13px} /* ================================================================ leaderboard ================================================================ */ .page_header{background:var(--surface);border:1px solid var(--border);padding:36px;margin-bottom:20px;text-align:center;position:relative} .page_header h1{font-size:30px;font-weight:700;margin-bottom:10px;display:flex;align-items:center;justify-content:center;gap:14px;text-transform:lowercase} .page_header h1 i{color:var(--secondary)} .page_header p{font-size:13px;color:var(--text-dim)} .tabs{display:flex;gap:8px;margin-bottom:20px;background:var(--surface);border:1px solid var(--border);padding:8px} .tab{flex:1;padding:11px 20px;background:transparent;border:1px solid transparent;color:var(--text-dim);font-size:13px;cursor:pointer;transition:var(--transition);text-transform:lowercase;text-align:center} .tab:hover{color:var(--text)} .tab.active{border-color:var(--secondary);color:var(--secondary)} .tab_content{display:none} .tab_content.active{display:block;animation:rise .18s ease-out} .period_tabs{display:flex;gap:10px;margin-bottom:20px;justify-content:center} .period_tab{padding:10px 28px;background:transparent;border:1px solid var(--border-hover);color:var(--text-dim);font-size:13px;cursor:pointer;transition:var(--transition);text-transform:lowercase} .period_tab:hover{color:var(--text);border-color:var(--text-dim)} .period_tab.active{border-color:var(--secondary);color:var(--secondary)} .leaderboard_card{background:var(--surface);border:1px solid var(--border);overflow:hidden;margin-bottom:20px} .leaderboard_header{padding:20px 24px;border-bottom:1px solid var(--border)} .leaderboard_header h2{font-size:13px;font-weight:500;display:flex;align-items:center;gap:10px;color:var(--text-dim);text-transform:lowercase;letter-spacing:.18em} .leaderboard_header h2 i{color:var(--secondary)} .leaderboard_table{width:100%} .leaderboard_table_header{display:grid;grid-template-columns:80px 1fr 200px 180px;gap:20px;padding:14px 24px;font-size:10px;color:var(--text-muted);text-transform:lowercase;letter-spacing:.18em;border-bottom:1px solid var(--border)} .leaderboard_table_header div:nth-child(3),.leaderboard_table_header div:nth-child(4){text-align:center} .leaderboard_row{display:grid;grid-template-columns:80px 1fr 200px 180px;gap:20px;padding:16px 24px;align-items:center;border-bottom:1px solid var(--border);transition:background .12s ease} .leaderboard_row:hover{background:var(--surface-light)} .leaderboard_row:last-child{border-bottom:none} .leaderboard_row.top1{border-left:1px solid var(--secondary)} .leaderboard_row.top2,.leaderboard_row.top3{border-left:1px solid var(--border-hover)} .rank{font-size:18px;font-weight:700;text-align:center;display:flex;align-items:center;justify-content:center;gap:8px;color:var(--text-dim)} .rank_number{min-width:32px} .rank.top1{color:var(--secondary)} .rank.top2,.rank.top3{color:var(--text)} .rank_icon{font-size:18px} .player_info{display:flex;align-items:center;gap:12px} .player_avatar{width:36px;height:36px;display:flex;align-items:center;justify-content:center;font-size:15px;flex-shrink:0;background:var(--surface-light);border:1px solid var(--border);color:var(--text-muted);overflow:hidden} .player_avatar img{width:100%;height:100%;object-fit:cover} .player_name{font-size:14px;font-weight:500} .prize_column{display:flex;justify-content:center;align-items:center} .prize_badge{display:inline-flex;align-items:center;gap:8px;padding:6px 14px;font-size:12px;font-weight:500;border:1px solid var(--border-hover);color:var(--text-dim)} .prize_badge.gold{border-color:var(--secondary);color:var(--secondary)} .prize_badge.silver{border-color:var(--text-dim);color:var(--text)} .prize_badge.bronze{border-color:var(--border-hover);color:var(--text-dim)} /* ================================================================ profile ================================================================ */ .balance_profile{position:fixed;top:16px;right:16px;z-index:1000;background:var(--surface);border:1px solid var(--border);padding:9px 18px;display:flex;align-items:center;gap:16px;min-width:240px;cursor:pointer;transition:var(--transition)} .balance_profile:hover{border-color:var(--secondary)} .balance_amount{display:flex;flex-direction:column;gap:2px} .balance_label{font-size:9px;color:var(--text-muted);text-transform:lowercase;letter-spacing:.18em} .balance_value{font-size:14px;font-weight:700;color:var(--secondary)} .profile_username{font-size:13px;font-weight:500} .profile_avatar{width:30px;height:30px;display:flex;align-items:center;justify-content:center;font-size:13px;overflow:hidden;background:var(--surface-light);border:1px solid var(--border);color:var(--text-dim)} .profile_avatar img{width:100%;height:100%;object-fit:cover} .discord_icon{width:30px;height:30px;display:flex;align-items:center;justify-content:center;font-size:16px;background:var(--surface-light);border:1px solid var(--border);color:var(--text-dim)} .profile_header{background:var(--surface);border:1px solid var(--border);padding:36px;margin-bottom:20px;text-align:center;position:relative} .profile_header_avatar{width:96px;height:96px;margin:0 auto 18px;overflow:hidden;background:var(--surface-light);border:1px solid var(--border-hover)} .profile_header_avatar img{width:100%;height:100%;object-fit:cover} .profile_header h1{font-size:26px;font-weight:700;margin-bottom:8px} .profile_header p{font-size:13px;color:var(--text-dim)} .stats_grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:14px;margin-bottom:20px} .stat_card{background:var(--surface);border:1px solid var(--border);padding:22px;transition:border-color .12s ease} .stat_card:hover{border-color:var(--border-hover)} .stat_card_label{font-size:10px;color:var(--text-muted);margin-bottom:8px;text-transform:lowercase;letter-spacing:.18em} .stat_card_value{font-size:26px;font-weight:700;margin-bottom:4px} .stat_card_subtext{font-size:12px;color:var(--text-dim)} .history_table{overflow:hidden;background:var(--surface);border:1px solid var(--border)} .history_header{display:grid;grid-template-columns:1fr 1fr 1fr 1fr 1fr;gap:16px;padding:13px 22px;font-size:10px;color:var(--text-muted);text-transform:lowercase;letter-spacing:.16em;border-bottom:1px solid var(--border)} .history_row{display:grid;grid-template-columns:1fr 1fr 1fr 1fr 1fr;gap:16px;padding:14px 22px;align-items:center;border-bottom:1px solid var(--border);font-size:13px;transition:background .12s ease} .history_row:hover{background:var(--surface-light)} .history_row:last-child{border-bottom:none} .history_game{color:var(--text)} .history_result{padding:3px 10px;display:inline-block;font-size:11px;border:1px solid} .history_result.win{border-color:var(--secondary);color:var(--secondary)} .history_result.loss{border-color:var(--danger);color:var(--danger)} .settings_section{background:var(--surface);border:1px solid var(--border);padding:22px;margin-bottom:14px} .settings_section h3{font-size:12px;font-weight:500;margin-bottom:14px;color:var(--text-dim);text-transform:lowercase;letter-spacing:.2em} .settings_section h3::before{content:"// ";color:var(--text-muted)} .settings_row{display:flex;justify-content:space-between;align-items:center;padding:14px 0;border-bottom:1px solid var(--border)} .settings_row:last-child{border-bottom:none} .settings_label{font-size:13px} .settings_description{font-size:11px;color:var(--text-muted);margin-top:4px} .color_picker{display:flex;gap:8px;flex-wrap:wrap} .color_option{width:40px;height:40px;cursor:pointer;position:relative;border:1px solid var(--border-hover);transition:var(--transition)} .color_option:hover{border-color:var(--text-dim)} .color_option.active{border-color:var(--text)} .color_option.active::after{content:"✓";position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);font-size:16px;color:#000;mix-blend-mode:screen;color:#fff} .theme_presets{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:10px;margin-top:14px} .theme_preset{background:var(--bg);border:1px solid var(--border-hover);padding:16px;cursor:pointer;text-align:center;transition:var(--transition)} .theme_preset:hover{border-color:var(--text-dim)} .theme_preset.active{border-color:var(--secondary)} .theme_preset_name{font-size:12px;margin-bottom:8px;color:var(--text-dim);text-transform:lowercase} .theme_preset_colors{display:flex;gap:4px;justify-content:center} .theme_preset_color{width:20px;height:20px;border:1px solid var(--border)} input[type="color"]{width:56px;height:36px;cursor:pointer;background:var(--bg);border:1px solid var(--border-hover);padding:2px} .game_order_list{padding:8px;background:var(--bg);border:1px solid var(--border)} .game_order_item{background:var(--surface);border:1px solid var(--border);padding:13px;margin-bottom:8px;display:flex;align-items:center;gap:12px;cursor:grab;transition:var(--transition);font-size:13px} .game_order_item:last-child{margin-bottom:0} .game_order_item:hover{border-color:var(--border-hover)} .game_order_item.dragging{cursor:grabbing;opacity:.5;border-color:var(--secondary)} .game_order_item i{font-size:14px;color:var(--text-dim);width:20px;text-align:center} .game_order_drag{margin-left:auto;color:var(--text-muted)} .game_order_item.disabled{opacity:.45} .game_order_item.disabled span{text-decoration:line-through} .button_group{display:flex;gap:10px;margin-top:20px} .button{padding:11px 22px;cursor:pointer;font-size:13px;transition:var(--transition);background:transparent;text-transform:lowercase} .button_primary{border:1px solid var(--secondary);color:var(--secondary)} .button_primary:hover{background:var(--secondary);color:#000} .button_secondary{border:1px solid var(--border-hover);color:var(--text-dim)} .button_secondary:hover{border-color:var(--text);color:var(--text)} .profile_customize_grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:14px;margin-top:12px} .name_preview_card{background:var(--bg);border:1px solid var(--border);padding:16px} .name_preview_label{font-size:10px;color:var(--text-muted);margin-bottom:8px;text-transform:lowercase;letter-spacing:.18em} .name_preview_display{font-size:22px;display:flex;align-items:center;gap:10px;min-height:40px} .input_stack{display:flex;flex-direction:column;gap:8px} .input_row{display:flex;gap:12px;align-items:center} .input_row label{flex:0 0 120px;font-size:12px;color:var(--text-dim)} .input_row input[type="text"],.input_row select,.input_row input[type="number"]{flex:1;background:var(--bg);border:1px solid var(--border-hover);padding:9px;color:var(--text);font-size:13px} .input_row input[type="range"]{flex:1} .pill_group{display:flex;flex-wrap:wrap;gap:8px} .pill{padding:7px 12px;cursor:pointer;font-size:12px;background:transparent;border:1px solid var(--border-hover);color:var(--text-dim);transition:var(--transition)} .pill:hover{color:var(--text)} .pill.active{border-color:var(--secondary);color:var(--secondary)} .icon_picker{display:grid;grid-template-columns:repeat(auto-fit,minmax(80px,1fr));gap:8px} .icon_option{padding:10px;display:flex;align-items:center;justify-content:center;gap:8px;cursor:pointer;background:transparent;border:1px solid var(--border-hover);color:var(--text-dim);transition:var(--transition)} .icon_option i{font-size:15px} .icon_option:hover{color:var(--text)} .icon_option.active{border-color:var(--secondary);color:var(--secondary)} .referral_link_box{background:var(--bg);border:1px solid var(--border);padding:18px;display:flex;gap:14px;align-items:center;flex-wrap:wrap} .referral_link_input_wrapper{flex:1;display:flex;gap:8px;min-width:280px} .referral_link_input{flex:1;background:var(--surface);border:1px solid var(--border-hover);padding:11px 14px;color:var(--text);font-size:13px} .referral_link_input::placeholder{color:var(--text-muted)} .referral_copy_btn{background:transparent;border:1px solid var(--border-hover);color:var(--text-dim);padding:11px 15px;cursor:pointer;transition:var(--transition)} .referral_copy_btn:hover{border-color:var(--secondary);color:var(--secondary)} .referral_stats_grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:14px;margin-bottom:20px} .referral_table{overflow:hidden} .referral_user{display:flex;align-items:center;gap:10px} .referral_avatar{width:26px;height:26px;display:flex;align-items:center;justify-content:center;font-size:12px;background:var(--surface-light);border:1px solid var(--border);color:var(--text-muted)} .referral_status{padding:3px 10px;font-size:11px;border:1px solid} .referral_status.active{border-color:var(--secondary);color:var(--secondary)} .referral_status.inactive{border-color:var(--border-hover);color:var(--text-muted)} .role_card{background:var(--surface);border:1px solid var(--border);padding:22px;margin-bottom:20px;position:relative;overflow:hidden} .role_card.current{border-color:var(--secondary)} .role_header{display:flex;align-items:center;gap:16px;margin-bottom:14px} .role_icon{width:56px;height:56px;display:flex;align-items:center;justify-content:center;font-size:22px;background:var(--bg);border:1px solid var(--border-hover);color:var(--text-dim)} .role_icon.low-roller,.role_icon.gambler,.role_icon.high-roller,.role_icon.vip,.role_icon.true-high-stakes{color:var(--text-dim)} .role_icon.true-chud{color:var(--secondary);border-color:var(--secondary)} @keyframes chud_glow{0%,100%{opacity:1}50%{opacity:.8}} .role_info h4{font-size:16px;font-weight:700;margin-bottom:4px;text-transform:lowercase} .role_info p{font-size:12px;color:var(--text-dim)} .role_progress{height:8px;overflow:hidden;background:var(--bg);border:1px solid var(--border);margin-bottom:10px} .role_progress_bar{height:100%;background:var(--secondary);transition:width .4s ease} .role_progress_text{display:flex;justify-content:space-between;font-size:11px;color:var(--text-muted)} .role_perks{display:flex;flex-wrap:wrap;gap:8px;margin-top:14px} .role_perk{padding:5px 11px;font-size:11px;display:flex;align-items:center;gap:6px;border:1px solid var(--border-hover);color:var(--text-dim)} .role_perk i{color:var(--secondary)} .role_badge{position:absolute;top:14px;right:14px;padding:3px 10px;font-size:10px;border:1px solid var(--secondary);color:var(--secondary);text-transform:lowercase;letter-spacing:.12em} .rakeback_card{background:var(--surface);border:1px solid var(--border);padding:22px;margin-bottom:20px} .rakeback_header{display:flex;justify-content:space-between;align-items:center;margin-bottom:18px} .rakeback_amount{font-size:30px;font-weight:700;color:var(--secondary)} .rakeback_rate{font-size:12px;color:var(--text-dim)} .rakeback_rate span{color:var(--secondary)} .rakeback_stats{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-bottom:18px} .rakeback_stat{text-align:center;padding:14px;background:var(--bg);border:1px solid var(--border)} .rakeback_stat_value{font-size:17px;font-weight:700;margin-bottom:4px} .rakeback_stat_label{font-size:10px;color:var(--text-muted);text-transform:lowercase;letter-spacing:.14em} .rakeback_claim_btn{width:100%;padding:14px;font-size:14px;cursor:pointer;display:flex;align-items:center;justify-content:center;gap:10px;background:transparent;border:1px solid var(--secondary);color:var(--secondary);transition:var(--transition);text-transform:lowercase} .rakeback_claim_btn:hover{background:var(--secondary);color:#000} .rakeback_claim_btn:disabled{opacity:.35;cursor:not-allowed} .cases_grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:14px;margin-bottom:20px} .case_card{background:var(--surface);border:1px solid var(--border);padding:18px;text-align:center;cursor:pointer;position:relative;overflow:hidden;transition:var(--transition)} .case_card:hover{border-color:var(--text-dim)} .case_card.legendary{border-color:var(--border-hover)} .case_card.legendary:hover,.case_card.epic:hover,.case_card.rare:hover{border-color:var(--secondary)} .case_icon{font-size:32px;margin-bottom:12px;color:var(--text-dim)} .case_name{font-size:14px;font-weight:700;margin-bottom:4px;text-transform:lowercase} .case_desc{font-size:11px;color:var(--text-muted);margin-bottom:12px} .case_price{font-size:13px;color:var(--secondary);font-weight:700} .case_owned{position:absolute;top:8px;right:8px;padding:2px 8px;font-size:9px;border:1px solid var(--border-hover);color:var(--text-dim)} .daily_grid{display:grid;grid-template-columns:repeat(7,1fr);gap:8px;margin-bottom:20px} .daily_box{padding:14px 8px;text-align:center;background:var(--bg);border:1px solid var(--border)} .daily_box.claimed{border-color:var(--border-hover);opacity:.55} .daily_box.today{border-color:var(--secondary)} .daily_box.locked{opacity:.35} @keyframes pulse_border{0%,100%{border-color:var(--secondary)}50%{border-color:var(--border-hover)}} .daily_day{font-size:10px;color:var(--text-muted);margin-bottom:4px} .daily_reward{font-size:15px;font-weight:700;margin-bottom:4px} .daily_icon{font-size:16px;color:var(--text-dim)} .daily_box.claimed .daily_icon{color:var(--secondary)} .daily_box.today .daily_icon{color:var(--secondary)} .promo_input_wrapper{display:flex;gap:10px;margin-bottom:14px} .promo_input{flex:1;background:var(--bg);border:1px solid var(--border-hover);padding:12px 14px;color:var(--text);font-size:13px} .promo_input:focus{border-color:var(--secondary)} .promo_btn{padding:12px 22px;background:transparent;border:1px solid var(--secondary);color:var(--secondary);cursor:pointer;transition:var(--transition);text-transform:lowercase} .promo_btn:hover{background:var(--secondary);color:#000} .achievements_grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:10px} .achievement_item{background:var(--surface);border:1px solid var(--border);padding:14px;display:flex;align-items:center;gap:14px} .achievement_item.unlocked{border-color:var(--border-hover)} .achievement_item.locked{opacity:.45} .achievement_icon{width:40px;height:40px;display:flex;align-items:center;justify-content:center;font-size:17px;flex-shrink:0;background:var(--bg);border:1px solid var(--border-hover);color:var(--text-muted)} .achievement_item.unlocked .achievement_icon{color:var(--secondary);border-color:var(--secondary)} .achievement_info{flex:1} .achievement_name{font-size:13px;font-weight:500;margin-bottom:2px} .achievement_desc{font-size:11px;color:var(--text-muted)} .achievement_reward{font-size:11px;color:var(--secondary)} .analytics_chart{background:var(--surface);border:1px solid var(--border);padding:22px;margin-bottom:20px} .analytics_chart h4{font-size:12px;font-weight:500;margin-bottom:14px;display:flex;align-items:center;gap:8px;color:var(--text-dim);text-transform:lowercase;letter-spacing:.16em} .analytics_chart h4 i{color:var(--secondary)} .chart_container{height:200px;position:relative;display:flex;align-items:flex-end;gap:3px;padding:20px 0} .chart_bar{flex:1;cursor:pointer;position:relative;min-height:4px;background:var(--secondary);opacity:.75;transition:opacity .12s ease} .chart_bar:hover{opacity:1} .chart_bar.negative{background:var(--danger)} .chart_bar_tooltip{position:absolute;bottom:100%;left:50%;transform:translateX(-50%);background:var(--surface);border:1px solid var(--border-hover);padding:5px 9px;font-size:10px;white-space:nowrap;pointer-events:none;opacity:0;transition:opacity .12s ease;z-index:10} .chart_bar:hover .chart_bar_tooltip{opacity:1} .chart_labels{display:flex;justify-content:space-between;font-size:9px;color:var(--text-muted);margin-top:8px} .chart_legend{display:flex;gap:16px;margin-top:12px;font-size:11px;color:var(--text-dim)} .chart_legend_item{display:flex;align-items:center;gap:6px} .chart_legend_dot{width:8px;height:8px} .game_breakdown{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:10px;margin-bottom:20px} .game_stat_card{background:var(--surface);border:1px solid var(--border);padding:14px;text-align:center;transition:border-color .12s ease} .game_stat_card:hover{border-color:var(--border-hover)} .game_stat_icon{font-size:18px;margin-bottom:8px;color:var(--text-dim)} .game_stat_name{font-size:11px;color:var(--text-muted);margin-bottom:4px;text-transform:lowercase} .game_stat_value{font-size:16px;font-weight:700} .game_stat_sub{font-size:10px;color:var(--text-muted);margin-top:2px} .session_card{background:var(--surface);border:1px solid var(--border);padding:14px;margin-bottom:10px;display:flex;justify-content:space-between;align-items:center} .session_info{display:flex;align-items:center;gap:12px} .session_date{font-size:13px} .session_time{font-size:11px;color:var(--text-muted)} .session_stats{display:flex;gap:20px;text-align:right} .session_stat_label{font-size:9px;color:var(--text-muted);text-transform:lowercase;letter-spacing:.14em} .session_stat_value{font-size:13px;font-weight:500} .session_stat_value.positive{color:var(--secondary)} .session_stat_value.negative{color:var(--danger)} .streak_display{display:flex;gap:4px;margin-bottom:14px} .streak_box{width:28px;height:28px;display:flex;align-items:center;justify-content:center;font-size:11px;border:1px solid var(--border-hover);color:var(--text-muted)} .streak_box.win{border-color:var(--secondary);color:var(--secondary)} .streak_box.loss{border-color:var(--danger);color:var(--danger)} .heatmap_grid{display:grid;grid-template-columns:repeat(24,1fr);gap:2px;margin-bottom:8px} .heatmap_cell{aspect-ratio:1;background:var(--surface-light)} .heatmap_cell.low{background:color-mix(in srgb,var(--secondary) 18%,var(--bg))} .heatmap_cell.medium{background:color-mix(in srgb,var(--secondary) 42%,var(--bg))} .heatmap_cell.high{background:color-mix(in srgb,var(--secondary) 68%,var(--bg))} .heatmap_cell.very-high{background:var(--secondary)} .heatmap_labels{display:flex;justify-content:space-between;font-size:9px;color:var(--text-muted)} .filter_bar{display:flex;gap:8px;margin-bottom:14px;flex-wrap:wrap} .filter_btn{padding:7px 14px;font-size:11px;cursor:pointer;background:transparent;border:1px solid var(--border-hover);color:var(--text-dim);transition:var(--transition);text-transform:lowercase} .filter_btn:hover{color:var(--text)} .filter_btn.active{border-color:var(--secondary);color:var(--secondary)} .analytics_summary{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:14px;margin-bottom:20px} .summary_card{background:var(--surface);border:1px solid var(--border);padding:18px;position:relative;overflow:hidden} .summary_card::before{content:none} .summary_label{font-size:10px;color:var(--text-muted);margin-bottom:8px;text-transform:lowercase;letter-spacing:.16em} .summary_value{font-size:24px;font-weight:700} .summary_change{font-size:11px;margin-top:4px;display:flex;align-items:center;gap:4px} .summary_change.up{color:var(--secondary)} .summary_change.down{color:var(--danger)} /* ================================================================ landing (site.html / beta.html) ================================================================ */ .bg_canvas{position:fixed;top:0;left:0;width:100%;height:100%;z-index:0;pointer-events:none;opacity:.5} .loader{position:fixed;inset:0;background:var(--bg);display:flex;align-items:center;justify-content:center;z-index:9999;transition:opacity .3s ease} .loader.hidden{opacity:0;pointer-events:none} .spinner{width:28px;height:28px;border:1px solid var(--border-hover);border-top-color:var(--secondary);animation:rot .7s steps(8) infinite} .ascii_hero{font-family:var(--font);font-size:12px;text-align:center;white-space:pre;color:var(--secondary);animation:boot .5s steps(6) both} @keyframes hero_pulse{0%,100%{opacity:1}50%{opacity:.9}} .ascii_banner_scroll{overflow:hidden;white-space:nowrap;position:relative;padding:12px 0;margin:20px 0;border-top:1px solid var(--border);border-bottom:1px solid var(--border)} .ascii_banner_text{display:inline-block;font-size:11px;color:var(--text-muted);animation:scroll_text 30s linear infinite} @keyframes scroll_text{from{transform:translateX(0)}to{transform:translateX(-50%)}} .hero{text-align:center;max-width:800px;margin:0 auto 72px;position:relative;z-index:1} /* hero: the ascii sword, with the "dd" wordmark underneath */ .hero_sword_wrap{position:relative;display:inline-block;margin:0 auto 10px} .hero_sword{font-size:clamp(6px,1vw,9px);line-height:1.15;color:var(--text-muted);white-space:pre;text-align:left;margin:0} .ds_w{color:var(--text)} .ds_r{color:var(--secondary)} .ds_b{color:var(--blue)} .ds_t{color:var(--brass)} /* big "dd" wordmark — chars glitch in JS, bottoms bleed red */ .hero_logo_big{display:inline-block;font-size:clamp(4px,.85vw,8px);line-height:1.2;color:var(--text);white-space:pre;text-align:left;margin:20px auto 4px} .hero_logo_big .bl_r{color:var(--secondary)} .hero_logo_big .bl_m{color:color-mix(in srgb,var(--secondary) 55%,#fff)} .hero_slogan{font-size:14px;color:var(--secondary);letter-spacing:.14em;margin-bottom:48px;text-transform:lowercase} /* the sword's blade tip marks glow in the game-fail red */ .sword_tip{color:var(--danger)} /* faint static ascii sword in the page background */ .bg_sword{position:fixed;z-index:0;pointer-events:none;user-select:none;font-size:18px;line-height:1.15;color:var(--secondary);opacity:.045;white-space:pre;margin:0} .bg_sword_left{left:3%;top:6%;transform:rotate(-18deg)} /* duel-style game cards */ .originals_section{margin:64px 0 0;position:relative;z-index:1} .originals_header{font-size:11px;color:var(--text-muted);letter-spacing:.28em;margin-bottom:16px;text-transform:lowercase;text-align:left} .originals_divider{font-size:12px;color:var(--text-dim);letter-spacing:.16em;text-transform:lowercase;text-align:left;margin:26px 0 12px;display:flex;align-items:center;gap:8px} .originals_divider:first-of-type{margin-top:4px} .od_arrow{color:var(--secondary);font-weight:700} .od_edge{color:var(--text-muted);font-size:11px;letter-spacing:.12em} .game_cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(136px,1fr));gap:14px} .game_card{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:11px;aspect-ratio:3/4;background:var(--surface);border:1px solid var(--border);text-decoration:none;color:var(--text-dim);transition:border-color .12s ease,color .12s ease,transform .12s ease} .game_card_rtp{position:absolute;top:8px;left:8px;font-size:8px;letter-spacing:.08em;color:var(--secondary);border:1px solid color-mix(in srgb,var(--secondary) 40%,transparent);padding:2px 5px;text-transform:uppercase} .game_card:hover{border-color:var(--secondary);color:var(--text);transform:translateY(-3px)} .game_card_glyph{font-size:26px;color:var(--secondary)} .game_card_glyph i{font-style:normal} .game_card_name{font-size:13px;letter-spacing:.08em} .game_card_tag{font-size:9px;color:var(--text-muted);letter-spacing:.24em;text-transform:lowercase} /* mini-font ascii stat numbers */ body.p-site .stats_grid{grid-template-columns:repeat(auto-fit,minmax(170px,1fr))} .stat_num{min-height:56px;display:flex;align-items:center;justify-content:center} .mini_num{font-size:clamp(6px,1.3vw,9px);line-height:1.15;color:var(--secondary);white-space:pre;text-align:left;margin:0} .hero h2{font-size:32px;font-weight:700;line-height:1.3;margin-bottom:20px;text-transform:lowercase} .hero h2 span{color:var(--secondary)} .hero p{line-height:1.8;margin-bottom:36px;font-size:14px;max-width:600px;margin-left:auto;margin-right:auto;color:var(--text-dim)} .waitlist_badge{display:inline-block;padding:7px 14px;font-size:12px;margin-bottom:20px;border:1px solid var(--secondary);color:var(--secondary);text-transform:lowercase;letter-spacing:.1em} .stat_box{background:var(--surface);border:1px solid var(--border);padding:26px;text-align:center;position:relative;overflow:hidden;transition:border-color .12s ease} .stat_box:hover{border-color:var(--secondary)} .stat_num{font-size:28px;font-weight:700;margin-bottom:8px;color:var(--secondary);font-variant-numeric:tabular-nums} .stat_loading{display:inline-block;width:16px;height:16px;border:1px solid var(--border-hover);border-top-color:var(--secondary);animation:rot .7s steps(8) infinite} .feature_section{display:flex;flex-direction:column;gap:14px;margin:64px 0;position:relative;z-index:1} .feature_card{background:var(--surface);border:1px solid var(--border);padding:24px;display:flex;align-items:center;gap:20px;position:relative;overflow:hidden;transition:border-color .12s ease} .feature_card:hover{border-color:var(--secondary)} .feature_icon{width:56px;height:56px;display:flex;align-items:center;justify-content:center;background:var(--bg);border:1px solid var(--border-hover);flex-shrink:0;transition:var(--transition)} .feature_icon i{font-size:20px;color:var(--text-dim);transition:var(--transition)} .feature_card:hover .feature_icon{border-color:var(--secondary)} .feature_card:hover .feature_icon i{color:var(--secondary)} .feature_content h3{font-size:15px;font-weight:700;margin-bottom:6px;text-transform:lowercase} .feature_content p{line-height:1.7;font-size:13px;color:var(--text-dim)} .feature_card:hover{cursor:pointer} .waitlist_section{grid-column:1/-1;margin-top:36px} .waitlist_card{background:var(--surface);border:1px solid var(--border);padding:44px 36px;text-align:center;position:relative;overflow:hidden;max-width:700px;margin:0 auto} .waitlist_card::before{content:"";position:absolute;top:0;left:0;right:0;height:1px;background:var(--secondary)} .waitlist_card:hover{border-color:var(--border-hover)} .waitlist_card h3{font-size:24px;font-weight:700;margin-bottom:14px;text-transform:lowercase} .waitlist_card p{font-size:14px;line-height:1.7;margin-bottom:26px;max-width:600px;margin-left:auto;margin-right:auto;color:var(--text-dim)} .waitlist_bonus{padding:10px 18px;font-size:13px;margin-bottom:26px;display:inline-block;border:1px dashed var(--secondary);color:var(--secondary)} .waitlist_bonus i{margin-right:8px} .cta{text-align:center;margin-top:80px;position:relative;z-index:1} .btn{display:inline-flex;align-items:center;gap:10px;padding:14px 30px;background:transparent;color:var(--secondary);border:1px solid var(--secondary);cursor:pointer;font-size:14px;font-weight:500;position:relative;overflow:hidden;transition:background .12s ease,color .12s ease;text-transform:lowercase;letter-spacing:.06em;text-decoration:none} .btn::before{content:none} .btn:hover{background:var(--secondary);color:#000} .btn:active{opacity:.85} .btn i{font-size:15px} .btn_outline{color:var(--text-dim);border-color:var(--border-hover)} .btn_outline:hover{background:transparent;border-color:var(--text);color:var(--text)} .footer{text-align:center;margin-top:80px;padding-top:40px;border-top:1px solid var(--border);font-size:12px;color:var(--text-muted);position:relative;z-index:1} .divider{display:flex;align-items:center;margin:18px 0} .divider::before,.divider::after{content:"";flex:1;height:1px;background:var(--border)} .divider span{padding:0 14px;font-size:11px;color:var(--text-muted);text-transform:lowercase;letter-spacing:.18em} .discord_widget{width:100%;height:500px;overflow:hidden;border:1px solid var(--border)} .sidebar_header{padding:20px 24px;display:flex;align-items:center;justify-content:space-between;gap:12px;border-bottom:1px solid var(--border)} .sidebar_brand{color:var(--secondary);font-weight:700} .sidebar_close{background:none;border:none;color:var(--text-dim);font-size:16px;cursor:pointer;padding:6px;transition:var(--transition)} .sidebar_close:hover{color:var(--text)} /* auth + age modals */ .auth_modal,.age_modal{display:none;position:fixed;inset:0;background:rgba(0,0,0,.9);z-index:10000;align-items:center;justify-content:center} .auth_modal.active,.age_modal.active{display:flex} .age_modal{z-index:10001} .auth_container,.age_container{background:var(--surface);border:1px solid var(--border-hover);padding:36px;width:90%;max-width:480px;position:relative;animation:modal_in .18s ease-out} .age_container{text-align:center} .auth_close{position:absolute;top:16px;right:16px;background:none;border:none;color:var(--text-dim);font-size:18px;cursor:pointer;transition:var(--transition)} .auth_close:hover{color:var(--text)} .auth_title,.age_title{font-size:20px;font-weight:700;margin-bottom:16px;text-align:center;text-transform:lowercase} .auth_subtitle,.age_subtitle{margin-bottom:26px;text-align:center;color:var(--text-dim);font-size:13px;line-height:1.7} .auth_form{display:flex;flex-direction:column;gap:18px} .form_group{display:flex;flex-direction:column;gap:8px} .form_label{font-size:11px;color:var(--text-dim);text-transform:lowercase;letter-spacing:.14em} .form_input{background:var(--bg);border:1px solid var(--border-hover);padding:11px 14px;color:var(--text);font-size:14px;width:100%;transition:var(--transition)} .form_input:focus{border-color:var(--secondary)} .auth_button{padding:13px;background:transparent;border:1px solid var(--secondary);color:var(--secondary);cursor:pointer;font-size:14px;font-weight:500;transition:var(--transition);text-transform:lowercase} .auth_button:hover{background:var(--secondary);color:#000} .auth_switch{text-align:center;margin-top:18px;font-size:12px;color:var(--text-dim)} .auth_switch a{color:var(--secondary);text-decoration:none} .auth_switch a:hover{text-decoration:underline} .age_buttons{display:flex;gap:14px} .age_button{flex:1;padding:13px;cursor:pointer;font-size:14px;background:transparent;transition:var(--transition);text-transform:lowercase} .age_confirm{border:1px solid var(--secondary);color:var(--secondary)} .age_confirm:hover{background:var(--secondary);color:#000} .age_deny{border:1px solid var(--border-hover);color:var(--text-dim)} .age_deny:hover{border-color:var(--danger);color:var(--danger)} /* ================================================================ admin ================================================================ */ .admin_sidebar{width:260px;background:var(--surface);border-right:1px solid var(--border);padding:20px 0;display:flex;flex-direction:column;position:fixed;height:100vh;left:0;top:0;z-index:100} .admin_logo{padding:0 20px 20px;margin-bottom:16px;display:flex;align-items:center;gap:12px;border-bottom:1px solid var(--border)} .admin_logo h2{font-size:15px;font-weight:700;text-transform:lowercase} .admin_logo i{font-size:16px;color:var(--secondary)} .admin_nav{flex:1;overflow-y:auto} .admin_user{padding:18px 20px;display:flex;align-items:center;gap:12px;border-top:1px solid var(--border)} .admin_avatar{width:34px;height:34px;display:flex;align-items:center;justify-content:center;background:var(--surface-light);border:1px solid var(--border-hover);color:var(--text-dim)} .admin_info span{display:block;font-size:13px} .admin_info small{font-size:10px;color:var(--text-muted)} .main_content{flex:1;margin-left:260px;padding:28px;position:relative;z-index:1} .page_header_actions{display:flex;gap:10px} body.p-admin .page_header{display:flex;justify-content:space-between;align-items:center;text-align:left;background:transparent;border:none;padding:0 0 24px 0;margin-bottom:24px;border-bottom:1px solid var(--border)} body.p-admin .page_header::after{content:none} body.p-admin .page_header h1{font-size:20px;justify-content:flex-start;margin-bottom:0} body.p-admin .btn{padding:9px 16px;font-size:12px} .btn_primary{color:var(--secondary);border-color:var(--secondary)} .btn_primary:hover{background:var(--secondary);color:#000} .btn_danger{color:var(--danger);border-color:var(--danger)} .btn_danger:hover{background:var(--danger);color:#000} .btn_secondary{color:var(--text-dim);border-color:var(--border-hover)} .btn_secondary:hover{background:transparent;border-color:var(--text);color:var(--text)} body.p-admin .stats_grid{grid-template-columns:repeat(auto-fit,minmax(240px,1fr))} .stat_card_header{display:flex;justify-content:space-between;align-items:center;margin-bottom:14px} .stat_card_icon{width:40px;height:40px;display:flex;align-items:center;justify-content:center;font-size:16px;background:var(--bg);border:1px solid var(--border-hover);color:var(--secondary)} .stat_card_icon.blue,.stat_card_icon.green,.stat_card_icon.purple,.stat_card_icon.red,.stat_card_icon.orange{color:var(--secondary)} .stat_trend{font-size:11px;display:flex;align-items:center;gap:4px} .stat_trend.up{color:var(--secondary)} .stat_trend.down{color:var(--danger)} .panel{background:var(--surface);border:1px solid var(--border);margin-bottom:20px} .panel_header{padding:16px 20px;display:flex;justify-content:space-between;align-items:center;border-bottom:1px solid var(--border)} .panel_header h3{font-size:12px;font-weight:500;color:var(--text-dim);text-transform:lowercase;letter-spacing:.18em} .panel_header h3::before{content:"// ";color:var(--text-muted)} .panel_body{padding:20px} .search_bar{display:flex;gap:10px;margin-bottom:18px} .search_input{flex:1;background:var(--bg);border:1px solid var(--border-hover);padding:11px 14px;color:var(--text);font-size:13px;transition:var(--transition)} .search_input:focus{border-color:var(--secondary)} .search_input::placeholder{color:var(--text-muted)} .user_table{width:100%;border-collapse:collapse} .user_table th,.user_table td{padding:12px 14px;text-align:left;border-bottom:1px solid var(--border);font-size:13px} .user_table th{font-size:10px;color:var(--text-muted);text-transform:lowercase;letter-spacing:.16em;font-weight:500} .user_table tr:hover td{background:var(--surface-light)} .user_row{display:flex;align-items:center;gap:12px} .user_avatar{width:30px;height:30px;display:flex;align-items:center;justify-content:center;background:var(--surface-light);border:1px solid var(--border);overflow:hidden;font-size:13px;color:var(--text-muted)} .user_avatar img{width:100%;height:100%;object-fit:cover} .user_meta span{display:block;font-size:13px} .user_meta small{font-size:11px;color:var(--text-muted)} .status_badge,.role_badge_sm{padding:3px 9px;font-size:10px;border:1px solid;text-transform:lowercase;letter-spacing:.08em} .status_badge.online{border-color:var(--secondary);color:var(--secondary)} .status_badge.offline{border-color:var(--border-hover);color:var(--text-muted)} .status_badge.banned{border-color:var(--danger);color:var(--danger)} .status_badge.muted{border-color:var(--text-dim);color:var(--text-dim)} body.p-admin .role_badge{position:static;padding:3px 9px;font-size:10px;border:1px solid var(--border-hover);color:var(--text-dim)} body.p-admin .role_badge.admin{border-color:var(--secondary);color:var(--secondary)} body.p-admin .role_badge.mod{border-color:var(--text);color:var(--text)} body.p-admin .role_badge.vip{border-color:var(--text-dim);color:var(--text-dim)} .action_btns{display:flex;gap:6px} .action_btn{width:28px;height:28px;cursor:pointer;display:flex;align-items:center;justify-content:center;background:transparent;border:1px solid var(--border-hover);color:var(--text-dim);transition:var(--transition);font-size:11px} .action_btn:hover{border-color:var(--text);color:var(--text)} .action_btn.ban:hover{border-color:var(--danger);color:var(--danger)} .chat_log{max-height:400px;overflow-y:auto} .chat_message.flagged{border-left:1px solid var(--danger);padding-left:10px} .chat_header{display:flex;align-items:center;gap:10px;margin-bottom:4px} .chat_user{font-size:12px;font-weight:500;color:var(--secondary)} .chat_actions{display:flex;gap:6px;align-self:flex-start} .tab_nav{display:flex;gap:8px;margin-bottom:20px;padding-bottom:0;border-bottom:1px solid var(--border)} .tab_btn{padding:10px 18px;background:transparent;border:none;border-bottom:1px solid transparent;color:var(--text-dim);cursor:pointer;font-size:12px;transition:var(--transition);text-transform:lowercase} .tab_btn:hover{color:var(--text)} .tab_btn.active{color:var(--secondary);border-bottom-color:var(--secondary);margin-bottom:-1px} .setting_row{display:flex;justify-content:space-between;align-items:center;padding:14px 0;border-bottom:1px solid var(--border)} .setting_row:last-child{border-bottom:none} .setting_info h4{font-size:13px;margin-bottom:3px} .setting_info p{font-size:11px;color:var(--text-muted)} .promo_grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:14px} .promo_card{background:var(--bg);border:1px solid var(--border);padding:14px} .promo_header{display:flex;justify-content:space-between;align-items:center;margin-bottom:12px} .promo_code{font-size:14px;font-weight:700;color:var(--secondary)} .promo_status{padding:2px 8px;font-size:9px;border:1px solid;text-transform:lowercase} .promo_status.active{border-color:var(--secondary);color:var(--secondary)} .promo_status.expired{border-color:var(--border-hover);color:var(--text-muted)} .promo_stats{display:flex;gap:20px;margin-bottom:12px} .promo_stat{font-size:11px;color:var(--text-muted)} .promo_stat strong{color:var(--text);display:block;font-size:13px} .promo_actions{display:flex;gap:8px} .promo_actions .btn{padding:6px 12px;font-size:11px} .activity_log{max-height:500px;overflow-y:auto} .activity_item{display:flex;gap:14px;padding:13px 0;border-bottom:1px solid var(--border)} .activity_icon{width:34px;height:34px;display:flex;align-items:center;justify-content:center;flex-shrink:0;background:var(--bg);border:1px solid var(--border-hover);color:var(--text-dim);font-size:12px} .activity_icon.login,.activity_icon.wager,.activity_icon.deposit{color:var(--secondary)} .activity_icon.withdraw{color:var(--text-dim)} .activity_icon.admin{color:var(--danger)} .activity_content{flex:1} .activity_content h4{font-size:12px;margin-bottom:3px} .activity_content p{font-size:11px;color:var(--text-muted)} .activity_time{font-size:10px;color:var(--text-muted);white-space:nowrap} .page_content{display:none} .page_content.active{display:block;animation:rise .18s ease-out} .modal_overlay{position:fixed;inset:0;background:rgba(0,0,0,.88);display:none;align-items:center;justify-content:center;z-index:1000} .modal_overlay.active{display:flex} .modal{width:100%;max-width:500px;background:var(--surface);border:1px solid var(--border-hover);animation:modal_in .18s ease-out} .modal_header{padding:18px 20px;display:flex;justify-content:space-between;align-items:center;border-bottom:1px solid var(--border)} .modal_header h3{font-size:13px;font-weight:500;text-transform:lowercase;letter-spacing:.14em;color:var(--text-dim)} .modal_close{background:none;border:none;color:var(--text-dim);font-size:15px;cursor:pointer;transition:var(--transition)} .modal_close:hover{color:var(--text)} .modal_body{padding:20px} .form_group label{display:block;margin-bottom:6px;font-size:11px;color:var(--text-dim);text-transform:lowercase;letter-spacing:.12em} .form_select{width:100%;background:var(--bg);border:1px solid var(--border-hover);padding:11px;color:var(--text);font-size:13px;cursor:pointer} .modal_footer{padding:18px 20px;display:flex;justify-content:flex-end;gap:10px;border-top:1px solid var(--border)} .pagination{display:flex;justify-content:center;gap:5px;margin-top:18px} .page_btn{width:32px;height:32px;cursor:pointer;background:transparent;border:1px solid var(--border-hover);color:var(--text-dim);transition:var(--transition);font-size:12px} .page_btn.active,.page_btn:hover{border-color:var(--secondary);color:var(--secondary)} .quick_actions{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:10px;margin-top:14px} .quick_action{background:var(--bg);border:1px solid var(--border);padding:14px;text-align:center;cursor:pointer;transition:var(--transition);color:var(--text-dim)} .quick_action:hover{border-color:var(--secondary);color:var(--secondary)} .quick_action i{font-size:18px;margin-bottom:8px;display:block} .quick_action span{display:block;font-size:11px;text-transform:lowercase} @media(min-width:768px){main{padding:96px 40px 60px}}