.page-loader {
    position: fixed;
    inset: 0;
    background: #0d0e10;
    z-index: 999999;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: opacity 0.4s ease, visibility 0.4s ease;
}
.page-loader.hidden {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
}
.page-loader-spinner {
    width: 48px;
    height: 48px;
    border: 3px solid #1a1c20;
    border-top-color: #ff3838;
    border-radius: 50%;
    animation: spin 1s linear infinite;
}
*{box-sizing:border-box;margin:0;padding:0;}
html{height:100%;overflow:hidden;}
body {
    height: 100%;
    overflow: auto;
    color: #fff;
    font-family: 'Segoe UI', system-ui, -apple-system, sans-serif;
    display: flex;
    flex-direction: column;
    font-size: 15px;
    position: relative;
    background: linear-gradient(to bottom, #0f0f12a8 90%, #16171e 55%), url(../images/bg.webp) center top / cover no-repeat;
}

/* Fallback for browsers that don't support WebP */
@supports not (background-image: url("data:image/webp;base64,UklGRiQAAABXRUJQVlA4IBgAAAAwAQCdASoBAAEADsD+JaQAA3AAAAAA")) {
    body {
        background: linear-gradient(to bottom, #0f0f12a8 90%, #16171e 55%), url(../images/bg.png) center top / cover no-repeat;
    }
}
body::before {
  content: '';
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 90%;                    /* Controls how much of the image is visible */
  background: linear-gradient(to bottom, rgba(10, 10, 12, 0.25) 20%, #16171e 80%);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  z-index: -1;
  pointer-events: none;
}
body::after {
  /* content: ''; */
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: radial-gradient(circle at center, #900000d4 40%, rgba(10, 10, 12, 0.4) 80%);
  z-index: -1;
}
.navbar{display:flex;align-items:center;padding: 0 0px;height:64px;background: var(--main-background-color);border-bottom: 1px solid rgba(20,18,28,1);flex-shrink:0;padding-right: 20px;}
.nav-left{
    border-right: 1px solid #0d0d0f;
    height: 64px;
    display: flex;
    justify-content: space-evenly;
    width: 300px;
    background: var(--main-background-color);
}
.logo{display:flex;align-items:center;gap:10px;/* width: calc(300px - 32px); */position: relative;}
.logo-icon{width:26px;height:26px;background:#ff3838;clip-path:polygon(0% 0%,100% 50%,0% 100%);}
.logo-text{font-size:22px;font-weight:800;color:#fff;letter-spacing:0.5px;}
.logo-text span{color:#ff3838;}
.nav-center{display:flex;gap: 13px;margin-right:auto;margin-left: 13px;}
.nav-item{color: #dadada;text-decoration:none;font-weight:600;font-size:14px;padding: 10px 16px;border-radius:6px;transition:0.2s;display:flex;align-items: baseline;gap:6px;/* background: linear-gradient(180deg, #2b263700 0%, #211d2c6e 100%); *//* background: radial-gradient(93.03% 100% at 13.98% 90%, rgb(174 110 112 / 20%) 0%, rgb(163 92 93 / 7%) 100%); */background: linear-gradient(180deg, #2b2735 0%, #292532 45%, #26222f 100%);box-shadow: inset 0 1px rgba(255, 255, 255, .025), inset 0 -1px rgba(0, 0, 0, .35);}
.nav-item:hover{color:#fff;}
.nav-right{display:flex;align-items:center;gap:14px;}
.balance{font-weight:700;color:#fff;font-size:15px;display: none !important;}
.btn-login, #maint-login-btn{background: #c62828;padding:10px 20px;border-radius:6px;border:none;color:#fff;font-size:14px;font-weight:700;cursor:pointer;transition:0.2s;}
.user-profile{position:relative;display:flex;align-items:center;gap:8px;cursor:pointer;padding: 4px 4px 4px 4px;border-radius:6px;transition:background 0.15s ease;user-select:none;}
.user-profile:hover{background:rgba(255,255,255,0.03);}
.user-profile .dropdown-chevron{color:#666;transition:transform 0.2s ease,color 0.2s;flex-shrink:0;margin-left:-2px;}
.user-profile.open .dropdown-chevron{transform:rotate(180deg);color:#fff;}
.user-dropdown{position:absolute;top:calc(100% + 6px);right:0;background: var(--main-background-color);border: 1px solid #212326;border-radius:8px;padding:6px 0;min-width:170px;box-shadow:0 8px 32px rgba(0,0,0,0.5);z-index:1000;opacity:0;visibility:hidden;transform:translateY(-6px);transition:opacity 0.2s ease,transform 0.2s ease,visibility 0.2s;pointer-events:none;}
.user-profile.open .user-dropdown{opacity:1;visibility:visible;transform:translateY(0);pointer-events:auto;}
.dropdown-item{display:flex;align-items:center;gap:10px;padding:10px 16px;color:#aaa;text-decoration:none;font-size:13px;font-weight:600;transition:color 0.15s,background 0.15s;white-space:nowrap;}
.dropdown-item:hover{color:#fff;background:rgba(255,255,255,0.03);}
.dropdown-item svg{color:#666;transition:color 0.15s;flex-shrink:0;}
.dropdown-item:hover svg{color:#fff;}
.dropdown-divider{height:1px;background:#1a1c20;margin:6px 12px;}
.dropdown-danger{color:#e2564e;}
.dropdown-danger:hover{color:#ff3838;background:rgba(226,86,78,0.05);}
.dropdown-danger svg{color:#e2564e;}
.dropdown-danger:hover svg{color:#ff3838;}
.user-avatar{width:30px;height:30px;border-radius:50%;border: 2px solid #e2564e;object-fit:cover;}
.username{font-weight:600;font-size:13px;color:#fff;display: flex;align-items: center;}
.btn-logout{display:none !important;}
.main-container{display:flex;flex:1;overflow:hidden;}
.chat-panel{background: var(--main-background-color);border-right: 1px solid var(--main-border-color);width:300px;height:100%;display:flex;flex-direction:column;flex-shrink:0;}
.chat-messages{flex:1;overflow-y:auto;padding:3px 10px;display:flex;flex-direction:column;gap: 7px;}
.message-row{
        display:flex;
        gap: 8px;
        padding: 7px 7px;
        border-radius: 5px;
        align-items:flex-start;
        /* background:#141518; */
        background: linear-gradient(90deg, #20202d 0%, #1a1a25 100%);
      }
.message-row:hover{background: rgb(29 29 41);}
.msg-avatar{width: 30px;height: 30px;border-radius:50%;object-fit:cover;flex-shrink:0;}
.msg-content{flex:1;display:flex;flex-direction:column;gap:2px;min-width:0;}
.msg-header{display:flex;justify-content:space-between;align-items:center;gap:6px;}
.msg-header .username{font-weight:700;}
.msg-header .timestamp{font-size:10px;color:#666;flex-shrink:0;}
.msg-text{font-size:13px;color:#999;line-height:1.35;overflow-wrap:anywhere;}
.chat-input-area{padding:25px 10px;/* border-top: 1px solid #0d0d0f; *//* background: rgb(18 16 22); */flex-shrink:0;}
.input-wrapper{position:relative;background: linear-gradient(90deg, #20202d 0%, #1a1a25 100%);border-radius:6px;height: 50px;display:flex;align-items:center;border:1px solid #1a1c20;}
.input-wrapper input{flex:1;background:transparent;border:none;padding:0 46px 0 10px;color:#999;font-size:12px;outline:none;}
.icon-emoji{position:absolute;right:30px;font-size:12px;color:#555;cursor:pointer;}
.icon-send{position:absolute;right:8px;font-size:14px;color:#555;cursor:pointer;transition:0.2s;}
.icon-send:hover{color:#777;}
.content-wrapper {
    flex: 1;
    display: flex;
    flex-direction: column;
    overflow-y: auto;
    overflow-x: hidden;
    min-width: 0;
    position: relative;
}

.content-panel {
    flex: 0 0 auto;
    padding: 25px 30px;
    min-height: 89vh;
}
@media (min-width: 1200px) {
.jackpot-section{
    width: calc(100% - 210px);
}
}
.content-wrapper:has(.jackpot-section) 
.content-wrapper:has(.coinflip-section) 
.jackpot-section{color: #8c90a1;padding:0;opacity:1;transition:opacity 0.3s ease;}
.jackpot-section.jp-loading{opacity:0;}
.jp-top-bar{display:flex;justify-content:space-between;align-items:center;margin-bottom:16px;}
.jp-info{display:flex;flex-direction:column;gap:2px;}
.jp-id{font-size:15px;color: #8c90a1;}
.jp-id span{color:#fff;font-weight:700;}
.jp-hash{font-size:14px;font-family:monospace;}
.jp-actions{display:flex;align-items:center;gap:12px;}
.jp-limits{font-size:14px;}
.btn-jp-join{border:none;padding: 14px 22px;color:#fff;border-radius: 5px;font-weight:700;font-size:14px;cursor:pointer;transition:0.2s;}.btn-jp-join:hover{background:#d32f2f;}
.jp-carousel-wrapper{position:relative;overflow:hidden;display:flex;flex-direction:column;}
.jp-carousel-wrapper::before,.jp-carousel-wrapper::after{content:"";position:absolute;top:0;bottom:0;width:80px;z-index:5;pointer-events:none;}
.jp-pointer{position:absolute;top:0;left:50%;transform:translateX(-50%);width:0;height:0;border-left:10px solid transparent;border-right:10px solid transparent;border-top: 12px solid #c1bbbb;z-index:10;display:none;filter:drop-shadow(0 2px 4px rgba(0,0,0,0.5));}
.jp-avatar-strip{display:none;justify-content:center;align-items:center;gap:8px;min-height:130px;overflow:hidden;opacity:0;transition:opacity 0.3s;padding:9px 80px 9px;border: 1px solid var(--main-border-color);background: var(--main-background-color);border-radius: 5px;margin-bottom:16px;}
.jp-avatar-strip.active{display:flex;opacity:1;}
.jp-avatar-strip.rolling-active{justify-content:flex-start !important;}
.jp-av-item{display:flex;flex-direction:column;align-items:center;justify-content:center;width: 100px;height:110px;position:relative;flex-shrink:0;background: rgb(34 34 44);border-radius: 5px;transition:transform 0.2s;border-width: 1px 1px 1px;border-style:solid;border-color: var(--main-border-color);}
.jp-av-item::before{content:"";position:absolute;top:-1px;left:50%;transform:translateX(-50%);width:34px;height:2px;background:var(--user-color);border-radius:0 0 5px 5px;box-shadow:0 0 4px var(--user-color);}
.jp-av-item .jp-av-circle{width: 63px;height: 63px;border-radius:50%;border:1px solid;padding:2px;background:#0d0e10;overflow:hidden;transition:border-color 0.2s;box-shadow:0 0 10px rgba(0,0,0,0.3);border-color:var(--user-color);}
.jp-av-circle img{width:100%;height:100%;border-radius:50%;object-fit:cover;}
.jp-av-pct{font-size:11px;color:#888;margin-top:5px;text-align:center;font-weight:600;}
.jp-timer-overlay{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);z-index:8;text-align:center;pointer-events:none;background:rgba(19,21,31,0.9);border-radius:10px;padding:10px 24px;backdrop-filter:blur(4px);}
.jp-timer-overlay.hidden{display:none;}
.jp-timer-label{font-size:11px;color:#888;text-transform:uppercase;letter-spacing:1px;font-weight:600;}
.jp-timer-value{font-size:26px;font-weight:800;color:#fff;letter-spacing:1px;line-height:1.2;}
.jp-roll-strip-inner{display:flex;gap:4px;will-change:transform;margin-left:50%;white-space:nowrap;}
.jp-stats-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin-bottom:16px;}
.jp-stat-box{background: var(--main-background-color);border: 1px solid var(--main-border-color);border-radius: 5px;padding:18px 14px;text-align:center;transition:border-color 0.2s;}
.jp-stat-val{display:block;font-size:20px;font-weight:700;color:#fff;margin-bottom:4px;}
.jp-dollar{color: #e2564e;}
.jp-stat-label{display:block;font-size:9px;color: #8c90a1;text-transform:uppercase;letter-spacing:1.5px;font-weight:600;}
.jp-player-list{display:flex;flex-direction:column;gap:6px;}
.jp-player-row{background: var(--main-background-color);border-radius: 5px;padding:14px 18px;display:flex;align-items:center;justify-content:space-between;border: 1px solid var(--main-border-color);transition:0.2s;position:relative;}
.jp-player-row::before{content:"";position:absolute;left:-1px;top:50%;transform:translateY(-50%);width:2px;height:35px;background:var(--user-color);border-radius:5px;box-shadow:0 0 6px var(--user-color);}
.jp-player-items{display:flex;gap:6px;flex-wrap:wrap;max-width:60%;}
.jp-item-icon{width: 60px;height: 60px;border-radius:6px;border:1px solid transparent;display:flex;align-items:center;justify-content:center;position:relative;overflow:hidden;transition:transform 0.2s;flex-shrink:0;}
.jp-item-icon::before{content:'';position:absolute;width: 85%;height: 85%;background: radial-gradient(circle,var(--item-color)0%,transparent 70%);opacity: 0.10;filter: blur(10px);z-index:0;}
.jp-item-icon img{width:75%;height:75%;object-fit:contain;position:relative;z-index:1;}
.jp-right-wrapper{display:flex;align-items:center;gap:12px;justify-content:flex-end;flex-grow:1;}
.jp-price-block{display:flex;flex-direction:column;align-items:flex-end;min-width:60px;}
.jp-price{font-weight:700;font-size:18px;color:#fff;}
.jp-deposit-label{font-size:10px;color:#666;}
.hidden{
    display: none !important;
}
.jp-dashed-box {
    position: relative;
    min-width: 280px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 6px 16px;
    border-radius: 10px;
    background: rgba(20, 20, 30, 0.3);
    gap: 10px;
    height: 64px;
    box-sizing: border-box;
}

.jp-dashed-box::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: 5px;
    padding: 1px; /* дебелина на рамката */
    background: linear-gradient(to right, var(--user-color), transparent);
    -webkit-mask: 
        linear-gradient(#fff 0 0) content-box, 
        linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    pointer-events: none;
}

.jp-p-avatar{width:40px;height:40px;border-radius:50%;border:1px solid var(--user-color);object-fit:cover;flex-shrink:0;}
.jp-p-name{font-weight:600;font-size:13px;color:#fff;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100px;}
.jp-p-chance{padding:4px 12px;font-size:11px;font-weight:700;color:#fff;flex-shrink:0;}
.modal-overlay{position:fixed;top:0;left:0;width:100%;height:100%;background:rgba(0,0,0,0.88);display:none;align-items:center;justify-content:center;z-index:9999;backdrop-filter:blur(4px);}
.modal-container{animation:modalIn 0.2s ease-out;position:relative;background: var(--main-background-color);width: 850px;}
.modal-container::before{content:'';position:absolute;inset:0;background-image:radial-gradient(rgba(255,255,255,0.025)1px,transparent 1px);background-size:22px 22px;pointer-events:none;z-index:0;}
@keyframes modalIn{from{opacity:0;transform:scale(0.95);}
to{opacity:1;transform:scale(1);}
}
.modal-header{display:flex;justify-content:space-between;align-items:center;padding:0 28px;height:78px;border-bottom: 1px solid var(--main-border-color);position:relative;z-index:2;}
.modal-header .header-left{display:flex;align-items:center;gap:16px;}
.modal-header .modal-icon{width:32px;height:32px;background:#ff3838;border-radius:50%;display:flex;align-items:center;justify-content:center;flex-shrink:0;}
.modal-header .modal-icon svg{width:18px;height:18px;}
.modal-header h2{font-size:26px;font-weight:800;color:#fff;text-transform:none;letter-spacing:0.5px;margin:0;}
.modal-header .header-right{display:flex;flex-direction:column;align-items:flex-end;font-size:14px;color:#999;line-height:1.6;gap:2px;text-align:right;}
.modal-header .header-right strong, .inv-val{color:#fff;font-weight:700;}
#cf-create-inventory-total{color:white;}
.header-inventory-wrap{display:flex;align-items:center;gap:10px;}
.modal-header .refresh-btn{background:transparent;border:none;color:#888;cursor:pointer;padding:4px;transition:0.2s;display:flex;align-items:center;justify-content:center;}
.modal-header .refresh-btn:hover{color:#fff;}
.modal-body{padding:18px;display:grid;grid-template-columns:repeat(5,1fr);gap:10px;min-height:420px;max-height:50vh;overflow-y:auto;position:relative;z-index:1;}
.item-card{background:#141518;border:1px solid #1a1c20;border-radius:6px;height:160px;padding:14px 10px 10px;text-align:left;cursor:pointer;transition:0.15s;position:relative;overflow:hidden;display:flex;flex-direction:column;}
.item-card:hover{transform:translateY(-2px);border-color:#1a1c20;}
.item-card.selected{box-shadow:0 0 0 1px #4CAF50,0 0 12px rgba(76,175,80,0.2);}
.item-card .item-image{position:relative;height:78px;display:flex;align-items:center;justify-content:center;margin-bottom:8px;flex-shrink:0;}
.item-card .item-image::before{content:'';width:72px;height:72px;position:absolute;border-radius:50%;background:var(--item-color);filter:blur(45px);opacity:0.4;}
.item-card .item-image img{width:70px;position:relative;z-index:2;object-fit:contain;}
.item-card .item-name{font-size:13px;font-weight:600;color:#b0b8d0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.item-card .item-price{margin-top:auto;font-size:15px;font-weight:700;color:#fff;}
.item-card .item-price .dollar{color:#ff3838;font-size:13px;}
.modal-footer{display:flex;align-items:center;justify-content:space-between;padding:0 18px;height:78px;background: var(--main-background-color);border-top: 1px solid var(--main-border-color);position: relative;z-index:2;}
.footer-left{display:flex;align-items:center;gap:10px;}
.footer-item-box{height:44px;background:#141518;border:1px solid rgba(255,255,255,0.03);border-radius:6px;display:flex;align-items:center;gap:8px;padding:0 16px;font-size:13px;color:#888;font-weight:600;}
.footer-item-box strong{color:#fff;font-weight:700;}
.footer-item-box .dollar{color:#ff3838;font-weight:700;}
.btn-primary{height:46px;background:#c62828;border:none;padding:0 32px;color:#fff;border-radius:6px;font-weight:700;font-size:15px;cursor:pointer;transition:0.2s;text-transform:none;letter-spacing:0.5px;white-space:nowrap;}
.btn-primary:hover{background:#d32f2f;transform:translateY(-1px);}
.cf-side-picker{display:flex;gap:12px;margin:0;padding:0;}
.cf-side-option{width:52px;height:40px;border-radius:50%;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:0.15s;padding:0;min-width:0;position:relative;opacity:0.4;}
.cf-side-option:hover{border-color:rgba(255,255,255,0.05);}
.cf-side-option.selected{opacity:1;}
.cf-side-option.selected[data-side="red"]{box-shadow:0 0 12px rgba(255,56,56,0.3);}
.cf-side-option.selected[data-side="blue"]{box-shadow:0 0 20px 2px #4a8ec5;}
.cf-coin-red,.cf-coin-blue{width:100%;height:100%;border-radius:50%;position:relative;}
.cf-coin-blue{background:#4a8ec5;}
.footer-right{display:flex;align-items:center;gap:16px;min-width: 180px;}
.cf-join-coin-display{display:flex;align-items:center;gap:8px;padding:8px 16px;height:44px;}
.cf-coin-preview{width:70px;height:70px;border-radius:50%;position:relative;overflow:hidden;display:flex;align-items:center;justify-content:center;}
.cf-coin-preview.red{box-shadow:0 0 12px rgba(255,56,56,0.3);}
.cf-coin-preview.blue{box-shadow:0 0 12px rgba(74,142,197,0.3);}
.cf-coin-preview img{width:100%;height:100%;object-fit:cover;display:block;}
.target-value{font-size:13px;color:#888;font-weight:600;}
.target-value strong{color:#fff;}
.target-value .dollar{color:#ff3838;}
#modal-accept-offer .modal-container{max-width:480px;padding:32px;text-align:center;position:relative;}
#modal-accept-offer .close-btn{position:absolute;top:12px;right:16px;background:none;border:none;color:#555;font-size:20px;cursor:pointer;transition:0.2s;}
#modal-accept-offer .close-btn:hover{color:#fff;}
#modal-accept-offer h2{color:#fff;font-size:20px;font-weight:700;margin-bottom:8px;}
#accept-offer-link{
    display: inline-block;
    background: rgb(169 56 56);
    color: rgb(224, 224, 224);
    padding: 12px 28px;
    border-radius: 6px;
    text-decoration: none;
    font-weight: 700;
    font-size: 14px;
    transition: 0.2s;
}
#modal-accept-offer .status-text{color:#888;font-size:14px;margin-bottom:24px;}
#modal-accept-offer .spinner{border:4px solid #1a1c20;border-top:4px solid #ff3838;border-radius:50%;width:40px;height:40px;animation:spin 1s linear infinite;margin:0 auto 24px;}
#modal-accept-offer .offer-link{display:inline-block;background:#c62828;color:#fff;padding:12px 28px;border-radius:6px;text-decoration:none;font-weight:700;transition:0.2s;}
#modal-winner .modal-container{max-width:480px;padding:32px;text-align:center;position:relative;}
#modal-winner .close-btn{position:absolute;top:12px;right:16px;background:none;border:none;color:#555;font-size:20px;cursor:pointer;transition:0.2s;}
#modal-winner .close-btn:hover{color:#fff;}
#modal-winner h2{color:#e0b020;font-size:20px;font-weight:700;margin-bottom:8px;}
#modal-winner .winner-message{color:#fff;font-size:16px;margin-bottom:24px;}
#modal-winner .winner-waiting{color:#888;font-size:14px;margin-top:18px;}
#modal-winner .winner-link{display:inline-block;background:#c62828;color:#fff;padding:12px 28px;border-radius:6px;text-decoration:none;font-weight:700;transition:0.2s;}
#profile-modal .profile-modal-header{display:flex;justify-content:center;align-items:center;position:relative;padding:16px 24px;background:#141518;border-bottom:1px solid #1a1c20;}
#profile-modal .profile-modal-header h2{font-size:18px;font-weight:600;color:#fff;margin:0;letter-spacing:0.5px;}
#profile-modal .profile-close-icon:hover{color:#fff;}
#profile-modal .profile-modal-body{padding:20px 24px;}
#profile-modal .profile-top-row{display:flex;align-items:center;gap:20px;margin-bottom:20px;}
#profile-modal .profile-avatar-box{display:flex;flex-direction:column;align-items:center;gap:6px;flex-shrink:0;}
#profile-modal .profile-avatar-box img{width:72px;height:72px;border-radius:50%;border:2px solid #1a1c20;object-fit:cover;}
#profile-modal .profile-username{font-size:15px;font-weight:600;color:#fff;}
#profile-modal .profile-stats-box{flex:1;display:flex;gap:10px;}
#profile-modal .stat-item{flex:1;background:#0d0e10;border:1px solid #1a1c20;border-radius:8px;padding:12px;text-align:center;}
#profile-modal .stat-number{display:block;font-size:18px;font-weight:700;color:#fff;margin-bottom:4px;}
#profile-modal .stat-number .dollar-sign{color:#ff3838;}
#profile-modal .stat-number.profit-positive{color:#27ae60;}
#profile-modal .stat-number.profit-negative{color:#ff3838;}
#profile-modal .stat-label{font-size:10px;color:#666;text-transform:uppercase;letter-spacing:0.5px;}
#profile-modal .profile-section{margin-bottom:16px;}
#profile-modal .profile-section label{display:block;font-weight:600;font-size:12px;color:#fff;margin-bottom:6px;text-transform:uppercase;letter-spacing:0.5px;}
#profile-modal .section-subtext{font-size:12px;color:#888;margin-bottom:10px;}
#profile-modal .section-subtext a{color:#ff3838;}
#profile-modal .input-group{display:flex;gap:10px;}
#profile-modal .input-group input:focus{border-color:#1a1c20;}
#profile-modal .btn-save,#profile-modal .btn-claim{background:#c62828;border:none;padding:10px 22px;color:#fff;border-radius:6px;font-weight:600;font-size:13px;cursor:pointer;transition:0.2s;}
#profile-modal .no-history{text-align:center;color:#555;padding:24px !important;}
@keyframes spin{0%{transform:rotate(0deg);}
100%{transform:rotate(360deg);}
}
.new-row{animation:fadeIn 0.4s ease-out forwards;}
@keyframes fadeIn{0%{opacity:0;}
100%{opacity:1;}
}
::-webkit-scrollbar{width: 0px;}
::-webkit-scrollbar-track{background:#0d0e10;}
::-webkit-scrollbar-thumb{background:#1a1c20;border-radius:5px;}
.jp-winner-display{color:#fff;display:flex;flex-direction:column;align-items:center;}
.jp-winner-panel{display:none;background: var(--main-background-color);border: 1px solid var(--main-border-color);border-radius:10px;padding:20px 30px;margin-bottom:16px;min-height:130px;align-items:center;justify-content:center;color:#fff;opacity:0;transition:opacity 0.3s ease;}
.img-winner-now{
    width: 72px; height: 72px; border-radius: 50%; border: 4px solid #f1c40f; object-fit: cover; flex-shrink: 0;
}
.jp-winner-panel.active{display:flex;opacity:1;}
.jp-empty-state{color:#1a1c20;text-align:center;padding:40px 20px;font-size:13px;}
.jp-progress-container{position:relative;width:100%;height:40px;background: #111118;border-radius:6px;overflow:hidden;flex-shrink:0;margin-bottom:16px;}
.jp-progress-fill{height:100%;width:100%;background: #ac30308a;border-radius: 5px;transition:width 1s linear;will-change:width;position: relative;}
.jp-progress-container::before{
    content: "";
    position: absolute;
    inset: 0;
    background: repeating-linear-gradient(-45deg, transparent 0, transparent 8px, rgb(13 14 16) 9px, transparent 15px);
    pointer-events: none;
}
.spinner-circle {
    width: 140px;
    height: 140px;
    border-radius: 50%;
    border: 3px solid transparent;
    border-top-color: #ff3838;
    border-right-color: #ff3838;
    position: relative;
    animation: spin 2s linear infinite;
    box-shadow: 0 0 40px rgba(255,56,56,0.2), inset 0 0 40px rgba(255,56,56,0.05);
}

.spinner-circle::before {
    content: '';
    position: absolute;
    top: 8px;
    left: 8px;
    right: 8px;
    bottom: 8px;
    border-radius: 50%;
    border: 2px solid transparent;
    border-bottom-color: rgba(255,56,56,0.3);
    border-left-color: rgba(255,56,56,0.3);
    animation: spin-reverse 3s linear infinite;
}
@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

@keyframes spin-reverse {
    0% { transform: rotate(360deg); }
    100% { transform: rotate(0deg); }
}
.jp-progress-text{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);font-size: 19px;font-weight:800;color:#fff;letter-spacing:0.5px;z-index:2;pointer-events:none;}
#notify-container{position:fixed;bottom:20px;right:20px;z-index:99999;display:flex;flex-direction:column;gap:10px;pointer-events:none;}
.notify{position:relative;width:300px;background:#141518;border:1px solid #1a1c20;border-left:3px solid;border-radius:8px;padding:14px 16px 14px 14px;box-shadow:0 8px 24px rgba(0,0,0,0.6);display:flex;align-items:flex-start;gap:12px;overflow:hidden;opacity:0;transform:translateY(20px)scale(0.95);transition:all 0.3s cubic-bezier(0.21,0.97,0.45,1);}
.notify-show{opacity:1;transform:translateY(0)scale(1);}
.notify-hide{opacity:0;transform:translateY(10px)scale(0.95);}
.notify-success{border-left-color:#27ae60;}
.notify-info{border-left-color:#3498db;}
.notify-warning{border-left-color:#e0b020;}
.notify-content{flex:1;display:flex;flex-direction:column;gap:3px;min-width:0;}
.notify-title{font-weight:700;font-size:13px;color:#fff;}
.notify-message{color:#777;font-size:12px;line-height:1.4;}
.notify-close{background:none;border:none;color:#555;font-size:14px;cursor:pointer;padding:0;line-height:1;transition:color 0.2s;flex-shrink:0;margin-top:2px;}
.notify-close:hover{color:#fff;}
.notify-progress{position:absolute;bottom:0;left:0;right:0;height:2px;background:rgba(255,255,255,0.04);}
.notify-progress>div{height:100%;width:100%;transform-origin:left;}
.notify-success .notify-progress>div{background:#219a52;}
.notify-info .notify-progress>div{background:#3498db;}
.notify-warning .notify-progress>div{background:#f1c40f;}
@keyframes notifyProgress{from{transform:scaleX(1);}
to{transform:scaleX(0);}
}
.chat-user-menu{position:fixed;z-index:99999;display:none;align-items:center;justify-content:flex-start;gap:8px;background:#141518;border:1px solid #1a1c20;border-radius:6px;padding:6px 10px;box-shadow:0 4px 16px rgba(0,0,0,0.6);}
.chat-menu-btn{background:#1a1c20;border:none;border-radius:4px;padding:5px 12px;color:#aaa;font-size:12px;font-weight:600;cursor:pointer;transition:0.15s;white-space:nowrap;}
.chat-menu-btn:hover{background:#1a1c20;}
.chat-menu-profile{color:#fff;}
.chat-menu-action{color:#27ae60;}
.chat-menu-action:hover{background:rgba(39,174,96,0.1);}
.message-row.msg-system{background:rgba(255,56,56,0.06);border:1px solid rgba(255,56,56,0.15);border-radius:6px;cursor:default;}
.message-row.msg-system .username{color:#ff3838;font-weight:700;}
.message-row.msg-system .msg-text{color:#aaa;}
.history-panel{position: absolute;top: 25px;right:17px;width:210px;display:none;flex-direction:column;gap:12px;z-index:50;}
.jackpot-section .history-panel{display:flex;}
.hw-block{
    width: auto;
    min-width: 200px;
    background: linear-gradient(145deg, #191923 0%, #191923 100%);
    border-radius: 5px;
    padding: 16px;
    position: relative;
    border: 1px solid var(--main-border-color);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    backdrop-filter: none;
    animation: fadeIn 0.3s ease-out forwards;
    }
.hw-block-header{width:100%;display:flex;justify-content:space-between;align-items:center;margin-bottom:4px;}
.hw-label{font-size:10px;color:#666;text-transform:uppercase;letter-spacing:1px;font-weight:600;}
.hw-value{font-size:10px;color:#666;font-weight:600;}
.hw-avatar-wrap{width: 72px;height: 72px;border-radius: 50%;padding: 3px;background: linear-gradient(180deg, #f53c3133 70%, #e35551);box-shadow: 0 4px 15px rgba(0, 0, 0, 0.4);display: flex;align-items: center;justify-content: center;}
.hw-avatar{width: 68px;height: 68px;border-radius: 50%;object-fit: cover;background: #f0f0f0;}
.hw-username{font-size:13px;font-weight:600;color:#fff;text-align:center;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%;}
.hw-badge, .chat-role{background: #191923;color: #e2564e;font-size: 10px;font-weight: 700;letter-spacing: 0.5px;text-transform: uppercase;padding: 4px 12px;border-radius: 4px;/* box-shadow: 0 4px 15px #0c0d1382, inset 0 1px 0 #ffffff0f; */margin-top: 2px;position: relative;overflow: hidden;transform: translateZ(0);}
.chat-role{
    color: var(--color_role);
    padding: 2px 8px;
    margin-left: 9px;
}
.hw-badge::after {
    content: '';
    will-change: transform;
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgb(227 85 82 / 15%), transparent);
    animation: shimmer 10s infinite;
}
.hw-stats{width:100%;display:flex;flex-direction:column;gap:6px;margin-top:8px;padding-top:12px;border-top:1px solid #1a1c20;}
.hw-stat{display:flex;justify-content:space-between;align-items:center;font-size:12px;}
.hw-stat span:first-child{color:#888;}
.hw-stat-val{color: #e2564e;font-weight:700;}
.hw-empty{color: #8c90a1;text-align:center;padding:20px;font-size:12px;}

@keyframes shimmer {
    0% { transform: translateX(-100%); }
    100% { transform: translateX(300%); }
}

@keyframes flipInY{0%{transform:perspective(400px)rotate3d(0,1,0,90deg);transition-timing-function:ease-in;opacity:0;}
40%{transform:perspective(400px)rotate3d(0,1,0,-20deg);transition-timing-function:ease-in;}
60%{transform:perspective(400px)rotate3d(0,1,0,10deg);opacity:1;}
80%{transform:perspective(400px)rotate3d(0,1,0,-5deg);}
100%{transform:perspective(400px);}
}
.flip-avatar{animation:flipInY 0.8s ease-in forwards;backface-visibility:visible !important;}
.admin-section{padding:20px 0;color:#aaa;width:100%;max-width:1200px;margin:0 auto;}
.admin-header{display:flex;align-items:center;gap:12px;margin-bottom:28px;padding-bottom:16px;}
.admin-header h1{font-size:24px;font-weight:700;color:#fff;margin:0;}
.admin-role-badge{background:#ff383822;color:#ff3838;border:1px solid #ff383844;padding:4px 12px;border-radius:4px;font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:0.5px;}
.admin-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:20px;max-width:100%;width:100%;}
@media(max-width:800px){.admin-grid{grid-template-columns:1fr;}
}
.admin-card{background: #13131b91;border:1px solid #1a1c20;border-radius:12px;overflow:hidden;}
.admin-card-header{background: #13131bb5;padding:14px 18px;border-bottom:1px solid #1a1c20;}
.admin-card-header h2{font-size:14px;font-weight:700;color:#fff;margin:0;display:flex;align-items:center;gap:8px;}
.admin-card-body{padding:18px;display:flex;flex-direction:column;gap:14px;}
.admin-form-group{display:flex;flex-direction:column;gap:6px;}
.admin-form-group label{font-size:12px;font-weight:600;color:#888;text-transform:uppercase;letter-spacing:0.5px;}
.admin-form-group input[type="text"],.admin-form-group input[type="number"]{background:#0d0e10;border:1px solid #1a1c20;border-radius:6px;padding:10px 12px;color:#fff;font-size:13px;outline:none;transition:border-color 0.2s;}
.admin-form-group input:focus{border-color:#ff3838;}
.admin-form-group input::placeholder{color:#555;}
.admin-actions{display:flex;gap:10px;margin-top:4px;}
.btn-admin{padding:10px 18px;border-radius:6px;border:none;font-weight:700;font-size:13px;cursor:pointer;transition:0.2s;display:flex;align-items:center;gap:6px;}
.btn-admin:hover{transform:translateY(-1px);}
.btn-primary{background:#c62828;color:#fff;}
.btn-primary:hover{background:#d32f2f;}
.btn-secondary{background:#1a1c20;color:#aaa;border:1px solid #1a1c20;}
.btn-secondary:hover{background:#1a1c20;}
.btn-danger{background:#c62828;color:#fff;}
.btn-danger:hover{background:#d32f2f;}
.btn-warn{background:#c62828;color:#fff;}
.btn-warn:hover{background:#d32f2f;}
.btn-success{background:#c62828;color:#fff;}
.btn-success:hover{background:#d32f2f;}
.admin-status-row{display:flex;justify-content:space-between;align-items:center;padding:10px 0;border-bottom:1px solid #1a1c20;font-size:13px;}
.admin-status-row:last-child{border-bottom:none;}
.admin-status-row span:first-child{color:#888;}
.admin-value{color:#fff;font-weight:600;font-family:monospace;font-size:12px;}
.admin-toggle{position:relative;display:inline-block;width:44px;height:24px;}
.admin-toggle input{opacity:0;width:0;height:0;}
.toggle-slider{position:absolute;cursor:pointer;top:0;left:0;right:0;bottom:0;background:#1a1c20;border-radius:24px;transition:0.3s;border:1px solid #1a1c20;}
.toggle-slider:before{position:absolute;content:"";height:18px;width:18px;left:2px;bottom:2px;background:#6b7080;border-radius:50%;transition:0.3s;}
.admin-toggle input:checked+.toggle-slider:before{transform:translateX(20px);background:#ff3838;}
.admin-verify-result{background:#0d0e10;border:1px solid #1a1c20;border-radius:8px;padding:14px;margin-top:10px;font-size:13px;}
.pf-section{padding:20px 0;color:#aaa;max-width:600px;}
.pf-header{margin-bottom:24px;}
.pf-header h1{font-size: 27px;font-weight:700;color:#fff;margin:0 0 6px 0;}
.pf-header p{color:#888;font-size:14px;margin:0;}
.pf-card{background: var(--main-background-color);border: 1px solid var(--main-border-color);border-radius:12px;padding:24px;display:flex;flex-direction:column;gap:20px;margin-bottom: 20px;}
.pf-form{display:flex;flex-direction:column;gap:14px;}
.pf-input-group{display:flex;flex-direction:column;gap:6px;}
.pf-input-group label{font-size:12px;font-weight:600;color:#888;text-transform:uppercase;letter-spacing:0.5px;}
.pf-input-group input:focus{border-color: #7db993;}
.pf-input-group input::placeholder{color:#555;}
.btn-pf-verify{background:#c62828;border:none;padding:12px 24px;color:#fff;border-radius:6px;font-weight:700;font-size:14px;cursor:pointer;transition:0.2s;align-self:flex-start;margin-top:4px;}
.btn-pf-verify:hover{background:#d32f2f;transform:translateY(-1px);}
.pf-result{background: rgb(0 0 0 / 15%);border:1px solid #1a1c20;border-radius:8px;padding:16px;}
.pf-result-header{font-size:14px;font-weight:700;color:#fff;margin-bottom:10px;padding-bottom:10px;border-bottom:1px solid #1a1c20;}
.pf-success{color:#27ae60;font-weight:600;margin-bottom:10px;}
.pf-error{color:#ff3838;font-weight:600;}
.pf-loading{color:#888;}
.pf-detail-row{display:flex;justify-content:space-between;padding:6px 0;font-size:13px;border-bottom:1px solid #1a1c20;}
.pf-detail-row:last-child{border-bottom:none;}
.pf-detail-row span:first-child{color:#888;}
.pf-hash{font-family:monospace;font-size:11px;color:#777;word-break:break-all;max-width:200px;text-align:right;}
.pf-verification-box{margin-top:12px;padding:12px;border-radius:6px;font-size:13px;}
.pf-match{background:#27ae6022;border:1px solid #27ae6044;color:#27ae60;}
.pf-info{background:#0d0e10;border:1px solid #1a1c20;border-radius:8px;padding:16px;}
.pf-info h3{font-size:13px;font-weight:700;color:#fff;margin:0 0 10px 0;text-transform:uppercase;letter-spacing:0.5px;}
.pf-info ol{margin:0;padding-left:18px;color:#888;font-size:13px;line-height:1.6;}
.pf-info li{margin-bottom:6px;}
.pf-info strong{color:#aaa;}
.pf-info code{background:#1a1c20;padding:2px 6px;border-radius:4px;font-family:monospace;font-size:12px;color:#ff3838;}
.jp-item-more{display:none;width:52px;height:52px;border-radius:6px;background:#1a1c20;border:1px dashed #1a1c20;align-items:center;justify-content:center;font-size:13px;font-weight:700;color:#ff3838;flex-shrink:0;}
.cf-coin-img{width:22px;height:22px;border-radius:50%;object-fit:cover;}
.cf-coin-img-sm{width:16px;height:16px;border-radius:50%;object-fit:cover;}
.cf-coin-img-md{width:32px;height:32px;border-radius:50%;object-fit:cover;}
.cf-coin-img-lg{width:70px;height:70px;border-radius:50%;object-fit:cover;}
.cf-coin-img-xl{width:80px;height:80px;border-radius:50%;object-fit:cover;}
.cf-coin-img-xxl{width:100px;height:100px;border-radius:50%;object-fit:cover;}
.coinflip-section{color:#aaa;padding:0;width:100%;}
.cf-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:20px;}
.cf-header h1{font-size:24px;font-weight:700;color:#fff;margin:0;}
.btn-cf-create{background:#c62828;border:none;padding: 14px 22px;color:#fff;border-radius: 5px;font-weight:700;font-size:13px;cursor:pointer;transition:all 0.2s ease;}
.btn-cf-create:hover{background:#d32f2f;transform:translateY(-1px);}
.cf-games-list{display:flex;flex-direction:column;gap:10px;}
.cf-empty{color: #8c90a1;text-align:center;padding:50px;font-size:14px;}
.cf-game-row{background: var(--main-background-color);border: 1px solid var(--main-border-color);display:flex;align-items:center;border-radius: 5px;padding:14px 20px;gap:18px;transition:all 0.2s ease;position:relative;min-height:76px;}
.cf-row-avatars{display:flex;align-items:center;gap:10px;flex-shrink:0;}
.cf-avatar-wrap{width:48px;height:48px;border-radius:50%;background:#1a1c20;border:2px solid var(--side-color,#1a1c20);display:flex;align-items:center;justify-content:center;position:relative;flex-shrink:0;box-shadow:0 0 10px var(--side-color,transparent);transition:box-shadow 0.2s ease;}
.cf-avatar-wrap:hover{box-shadow:0 0 16px var(--side-color,transparent);}
.cf-avatar-wrap .cf-avatar{width:100%;height:100%;border-radius:50%;object-fit:cover;display:block;}
.cf-avatar-empty{width:48px;height:48px;border-radius:50%;background:#1a1c20;border:2px solid var(--side-color,#1a1c20);display:flex;align-items:center;justify-content:center;position:relative;flex-shrink:0;opacity:0.8;box-shadow:0 0 10px var(--side-color,transparent);}
.cf-avatar-empty::after{content:'?';font-size:16px;font-weight:700;color:var(--side-color,#555);opacity:0.4;}
.cf-vs-sep{font-size:11px;font-weight:800;color:#555;text-transform:uppercase;letter-spacing:1.5px;padding:0 6px;user-select:none;}
.cf-coin-badge{position:absolute;bottom:-9px;right:-14px;width:35px;height:35px;z-index:10;overflow:hidden;}
.cf-coin-badge img{width:100%;height:100%;object-fit:cover;display:block;}
.cf-row-items{display:flex;gap:8px;align-items:center;flex:1;min-width:0;overflow:hidden;padding:0 8px;}
.cf-item-box{display:flex;flex-direction:column;align-items:center;flex-shrink:0;}
.cf-item-box.hidden{display:none !important;}
.cf-item-icon{width: 73px;height: 73px;position:relative;/* border-radius:8px; *//* background:#1a1c20; *//* border:1px solid #1a1c20; */display:flex;align-items:center;justify-content:center;overflow:hidden;transition:transform 0.15s ease,border-color 0.15s ease;}
.cf-item-icon:hover{box-shadow: inset 0px 0px 20px 20px #100e16;}
.cf-item-icon::before{content:'';position:absolute;width:70%;height:70%;background:radial-gradient(circle,var(--item-color,#333)0%,transparent 70%);opacity:0.15;filter:blur(8px);z-index:0;}
.cf-item-icon img{width: 70%;height: 70%;object-fit:contain;position:relative;z-index:1;}
.cf-more{color:#777;font-size:13px;font-weight:700;margin-left:6px;flex-shrink:0;display:none;align-items:center;justify-content:center;height:64px;padding:0 14px;border-radius:8px;background:#1a1c20;border:1px solid #1a1c20;transition:all 0.2s ease;}
.cf-more:hover{border-color:#1a1c20;color:#999;}
.cf-row-right{display:flex;align-items:center;gap:16px;flex-shrink:0;margin-left:auto;}
.cf-total-value{color:#fff;font-size:17px;font-weight:700;white-space:nowrap;line-height:1.2;letter-spacing:0.3px;}
.cf-total-value .dollar{color:#ff3838;font-size:14px;margin-right:2px;}
.cf-row-actions{display:flex;align-items:center;gap:10px;}
.btn-cf-join{background:#c62828;color:#fff;border:none;padding:10px 20px;border-radius:8px;font-size:12px;font-weight:800;cursor:pointer;flex-shrink:0;letter-spacing:1px;line-height:1;transition:all 0.2s ease;white-space:nowrap;text-transform:uppercase;}
.btn-cf-join:hover{background:#d32f2f;transform:translateY(-1px);}
.btn-cf-view, .btn-cf-cancel{background: #303045;border:1px solid #1a1c20;padding:10px 18px;border-radius: 5px;color: #aaaaaa;font-size:13px;font-weight:600;cursor:pointer;flex-shrink:0;transition:all 0.2s ease;white-space:nowrap;}
.btn-cf-view:hover, .btn-cf-cancel:hover{/* border-color:#666; */color:#fff;}
.btn-cf-cancel{
    background: #262539;
}
.coinflip-section .cf-stats-panel{position:static;width:100%;display:flex;flex-direction:column;gap:8px;margin-bottom:16px;z-index:auto;}
.cf-stat-block{background: var(--main-background-color);border: 1px solid var(--main-border-color);border-radius: 5px;padding: 0px 7px;display: flex;/* flex-direction:column; */align-items: center;gap: 2px;backdrop-filter:blur(8px);box-shadow:0 8px 32px rgba(0,0,0,0.5);animation:fadeIn 0.3s ease-out forwards;width:100%;height: 43px;overflow: hidden;}
.cf-stat-block-header{display: flex;align-items:center;float: left;gap: 8px;}
.cf-stat-label{font-size: 11px;color: #8c90a1;text-transform:uppercase;letter-spacing:1px;font-weight:600;}
.cf-flip-history-row{width:100%;display:flex;flex-wrap: nowrap;gap: 1px;align-items:center;justify-content:flex-start;padding: 3px 0;overflow: hidden;white-space: nowrap;float: left;position: relative;}
.cf-flip-history-chip{width: 35px;height: 35px;border-radius:50%;object-fit:cover;flex-shrink:0;transition:transform 0.15s ease;cursor:pointer;background-size: cover;}
.cf-flip-history-chip:hover{transform: scale(1.10);}
.cf-coin-total-flips{font-size:11px;color: #8c90a1;text-align:left;margin-top:4px;padding-top:8px;border-top:1px solid #1a1c20;width:100%;}

@media(max-width:1200px){
    .content-panel:has(.coinflip-section){padding-right:32px;}
}
@media(max-width:900px){.cf-game-row{padding:12px 14px;gap:12px;}
.cf-avatar-wrap{width:40px;height:40px;}
.cf-avatar-empty{width:40px;height:40px;}
.cf-coin-badge{width:28px;height:28px;border-width:2px;}
.cf-item-icon{width:52px;height:52px;}
.cf-more{height:52px;font-size:12px;padding:0 10px;}
.cf-total-value{font-size:15px;}
.btn-cf-join{padding:8px 16px;font-size:12px;}
.btn-cf-view{padding:8px 14px;font-size:12px;}
}
@media(max-width:600px){.cf-game-row{padding:14px 16px;gap:12px;flex-direction:column;align-items:center;}
.cf-row-avatars{order:1;width:100%;justify-content:center;gap:14px;}
.cf-avatar-wrap{width:44px;height:44px;}
.cf-avatar-empty{width:34px;height:34px;}
.cf-row-items{order:2;width:100%;justify-content:center;padding:0;gap:8px;}
.cf-item-icon{width:52px;height:52px;}
.cf-more{height:52px;font-size:12px;padding:0 12px;display:flex;align-items:center;justify-content:center;}
.cf-row-right{order:3;width:100%;justify-content:center;margin-left:0;gap:12px;flex-wrap:wrap;}
.cf-total-value{font-size:15px;}
.btn-cf-join{padding:8px 16px;font-size:12px;}
.btn-cf-view{padding:8px 14px;font-size:12px;}
.cf-vs-sep{font-size:11px;padding:0 4px;}
}
#modal-coinflip-flip{align-items:center;justify-content:center;}
.cf-view-modal{position:relative;width: 690px;max-width: 690px;height: 650px;max-height: 650px;background: var(--main-background-color);border:1px solid #1a1c20;border-radius:16px;overflow:hidden;box-shadow:0 40px 120px rgba(0,0,0,.8);display:flex;flex-direction:column;animation:modalIn 0.2s ease-out;padding:0;}
.cf-view-close{position:absolute;top: 0px;right:16px;background:none;border:none;color:#666;font-size:20px;cursor:pointer;z-index:100;transition:color 0.2s;width:32px;height:32px;display:flex;align-items:center;justify-content:center;}
.cf-view-close:hover{color:#fff;}
.cf-view-top{display:flex;align-items:flex-start;justify-content:space-between;padding: 50px 75px 0;position:relative;margin-bottom: 10px;z-index:1;}
.cf-view-avatar-col{display:flex;flex-direction:column;align-items:center;gap:8px;flex:0 0 auto;z-index:2;}
.cf-view-avatar-wrap{position:relative;width:92px;height:92px;border-radius:50%;padding:3px;background:transparent;margin:0 auto;display:flex;align-items:center;justify-content:center;}
.cf-view-avatar-wrap::before{content:'';position:absolute;inset: 0px;border-radius:50%;border:2px solid var(--ring-color);opacity:0.4;}
#cf-flip-creator-wrap::before{border-color:var(--ring-color);}
#cf-flip-joiner-wrap::before{border-color:#5073d6;/* box-shadow:0 0 12px var(--ring-color),0 0 24px var(--ring-color); */}
.cf-view-avatar-inner{width:82px;height:82px;border-radius:50%;background:#0d0e10;overflow:hidden;position:relative;z-index:1;display:flex;align-items:center;justify-content:center;}
.cf-view-avatar-inner img{width:100%;height:100%;object-fit:cover;display:block;}
.cf-view-avatar-placeholder{color:#666;font-size:28px;font-weight:700;}
#cf-flip-joiner-wrap .cf-view-chip{left:-13px;right:0;}
.cf-view-chip{position:absolute;bottom:-2px;right:-13px;width:44px;height:44px;display:flex;align-items:center;justify-content:center;z-index:10;overflow:hidden;}
.cf-chip-coin{width:100%;height:100%;border-radius:50%;overflow:hidden;}
.cf-chip-coin img{width:100%;height:100%;object-fit:cover;display:block;}
.cf-chip-coin.waiting{opacity:0.85;}
.cf-view-chip-inner{width:16px;height:16px;border-radius:50%;border:2px dashed rgba(255,255,255,0.3);background:transparent;}
.cf-view-avatar-name{font-size:13px;font-weight:700;color:#999;text-align:center;text-transform:uppercase;letter-spacing:0.5px;}
.cf-view-center{position:absolute;left:50%;transform:translateX(-50%);top: 35px;display:flex;flex-direction:column;align-items:center;justify-content:center;width:120px;height:120px;}
.cf-center-text{position:relative;z-index:2;font-size:12px;font-weight:700;color:#fff;text-transform:uppercase;letter-spacing:2px;text-align:center;}
.cf-coin-wrap{position:relative;z-index:2;width:90px;height:90px;}
.cf-coin-animation{width:100%;height:100%;perspective:800px;position:relative;}
.cf-coin-animation .cf-coin{width:100%;height:100%;position:relative;transform-style:preserve-3d;}
.cf-coin-animation .cf-coin::before,.cf-coin-animation .cf-coin::after{content:'';position:absolute;width:100%;height:100%;border-radius:50%;backface-visibility:hidden;}
.cf-coin-animation .cf-coin::before{background-image:url('/images/cf-red.png');background-size:cover;background-position:center;transform:rotateY(0deg);}
.cf-coin-animation .cf-coin::after{background-image:url('/images/cf-blue.png');background-size:cover;background-position:center;transform:rotateY(180deg);}
.cf-coin-animation .cf-coin{transform:rotateY(0deg);}
.cf-coin-wrap.spinning-red .cf-coin{animation:cfCoinSpinRed 2.5s cubic-bezier(0.25,0.1,0.25,1)forwards;}
.cf-coin-wrap.spinning-blue .cf-coin{animation:cfCoinSpinBlue 2.5s cubic-bezier(0.25,0.1,0.25,1)forwards;}
.cf-coin-wrap.land-red .cf-coin{animation:cfCoinLandRed 0.6s ease-out forwards;}
.cf-coin-wrap.land-blue .cf-coin{animation:cfCoinLandBlue 0.6s ease-out forwards;}
@keyframes cfCoinSpinRed{0%{transform:rotateY(0deg);}
100%{transform:rotateY(3600deg);}
}
@keyframes cfCoinSpinBlue{0%{transform:rotateY(0deg);}
100%{transform:rotateY(3780deg);}
}
@keyframes cfCoinLandRed{0%{transform:rotateY(3600deg)scale(1.15);}
50%{transform:rotateY(3600deg)scale(0.95);}
100%{transform:rotateY(3600deg)scale(1);}
}
@keyframes cfCoinLandBlue{0%{transform:rotateY(3780deg)scale(1.15);}
50%{transform:rotateY(3780deg)scale(0.95);}
100%{transform:rotateY(3780deg)scale(1);}
}
.cf-view-players-info{display:flex;gap:24px;padding:0 34px;margin:20px 0;z-index:1;}
.cf-view-player-card{flex:1;height:56px;background: #1011147a;padding: 7px 12px;display:flex;align-items:center;position:relative;overflow:hidden;justify-content:space-between;}
.cf-view-player-stats{display:flex;align-items:center;justify-content:space-between;width:100%;padding:0 4px;}
.cf-view-player-stats.reverse{flex-direction:row-reverse;}
.cf-view-stat-money{padding:6px 14px;/* border-radius:6px; */font-weight:700;font-size:14px;white-space:nowrap;}
.cf-view-stat-text{color:#777;font-size:13px;font-weight:600;white-space:nowrap;}
.blue-money{background:var(--money-bg,#223747);color:var(--money-color,#4291d1);}
.cf-view-join-overlay{position:absolute;inset:0;align-items:center;justify-content:center;}
.cf-view-join-overlay .cf-view-join-btn{background:#c62828;color:#fff;border:none;padding:10px 20px;border-radius:8px;font-size:13px;font-weight:700;cursor:pointer;transition:all 0.2s ease;letter-spacing:0.5px;text-transform:uppercase;}
.cf-view-join-overlay .cf-view-join-btn:hover{background:#d32f2f;transform:translateY(-1px);box-shadow:0 4px 16px rgba(255,56,56,0.25);}
.cf-view-inventories{display:flex;gap:22px;padding:0 34px;flex:1;min-height:0;z-index:1;padding-bottom:20px;}
.cf-view-inventory{width:50%;min-height:0;/* border-radius:10px; */background: #1011147a;position:relative;overflow:hidden;/* padding:12px; */}
#cf-flip-joiner-items-box.cf-view-inventory::before{background:repeating-linear-gradient(45deg,transparent 0,transparent 8px,rgba(255,255,255,0.01)9px,transparent 15px);}
.cf-view-inventory::before{content:"";position:absolute;inset:0;background:repeating-linear-gradient(-45deg,transparent 0,transparent 8px,rgba(255,255,255,0.01)9px,transparent 15px);pointer-events:none;}
.cf-view-inventory>div{display:flex;flex-wrap:wrap;gap:10px;position:relative;z-index:1;height:100%;overflow-y:auto;overflow-x: hidden;gap:30px;align-items: center;justify-content: center;}
.cf-view-inventory .cf-flip-item-box .cf-item-icon::before{content:'';position:absolute;width:70%;height:70%;background:radial-gradient(circle,var(--item-color,#333)0%,transparent 70%);opacity:0.15;filter:blur(6px);z-index:0;top:7px;}
.cf-view-inventory .cf-view-item-price{position:absolute;bottom:2px;left:50%;transform:translateX(-50%);font-size:12px;font-weight:700;color:#fff;padding:3px 10px;text-align:center;white-space:nowrap;z-index:2;}
.cf-view-inventory .cf-view-item-price .dollar{color:#ff3838;}
/* ============================================
   COINFLIP VIEW MODAL — HOWLGG-STYLE INVENTORY GRID
   ============================================ */

/* 2-column grid */
.cf-view-inventory > div {
    display: grid !important;
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 10px !important;
    align-items: stretch !important;
    justify-content: stretch !important;
    align-content: start !important;
    padding: 10px !important;
}

/* Each item box — card style */
.cf-view-inventory .cf-flip-item-box {
    background: rgba(20, 20, 30, 0.4);
    border-radius: 8px;
    padding: 12px 8px 8px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 110px;
    position: relative;
    width: auto !important;
    flex: none !important;
    max-width: none !important;
    min-width: auto !important;
    margin: 0 !important;
    transition: background 0.2s;
}

.cf-view-inventory .cf-flip-item-box:hover {
    background: rgba(20, 20, 30, 0.6);
}

/* Icon with item-colored border */
.cf-view-inventory .cf-flip-item-box .cf-item-icon {
    width: 100%;
    height: 120px;
    max-width: none;
    max-height: none;
    aspect-ratio: auto;
    margin: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    /* border: 1px solid var(--item-color); */
    border-radius: 6px;
    /* background: rgba(0, 0, 0, 0.15); */
    flex-shrink: 0;
}

.cf-view-inventory .cf-flip-item-box .cf-item-icon img {
    width: 60%;
    height: 60%;
    margin-bottom: 25px;
    object-fit: contain;
    position: relative;
    z-index: 1;
}

/* Price at bottom of icon (under the item) */
.cf-view-inventory .cf-view-item-price {
    position: absolute;
    bottom: 4px;
    left: 50%;
    transform: translateX(-50%);
    top: auto;
    font-size: 12px;
    font-weight: 700;
    color: #fff;
    padding: 2px 8px;
    text-align: center;
    white-space: nowrap;
    z-index: 2;
    background: rgba(0, 0, 0, 0.4);
    border-radius: 4px;
}

.cf-view-bottom-status{text-align:center;font-size:13px;font-weight:600;color:#e0b020;margin:12px 34px;letter-spacing:0.5px;z-index:1;}
.cf-view-footer{text-align:center;padding:12px 34px;border-top:1px solid #1a1c20;z-index:1;flex-shrink:0;}
.cf-view-footer-row{margin-bottom:4px;font-family:monospace;line-height:1.5;font-size:11px;}
.cf-view-footer-label{color:#777;font-weight:600;text-transform:uppercase;letter-spacing:0.5px;margin-right:6px;font-family:'Segoe UI',system-ui,sans-serif;font-size:10px;}
.cf-view-footer-val{color:#aaa;word-break:break-all;}
.cf-view-verify{margin-top:6px;font-size:11px;color:#888;font-family:'Segoe UI',system-ui,sans-serif;}
.cf-view-verify a{color:#ff3838;text-decoration:none;font-weight:600;}
.cf-view-verify a:hover{text-decoration:underline;}
.mobile-toggle{display:none;background:none;border:none;color:#fff;font-size:22px;cursor:pointer;padding:8px 12px;border-radius:6px;transition:0.2s;flex-shrink:0;}
.mobile-toggle:hover{background:#1a1c20;}
.chat-toggle-btn{display:none;position:fixed;bottom: 2px;left: 4px;z-index:9999;width: 27px;height: 27px;border-radius:50%;background:#c62828;border:none;color:#fff;font-size:20px;cursor:pointer;box-shadow:0 4px 16px rgba(255,56,56,0.3);align-items:center;justify-content:center;transition:0.2s;}
.chat-toggle-btn:hover{transform:scale(1.05);}
.chat-toggle-btn.active{background:#1a1c20;}
.chat-backdrop{display:none;position:fixed;top:64px;left:0;right:0;bottom:0;background:rgba(0,0,0,0.6);z-index:150;}
.chat-backdrop.active{display:block;}
@media(max-width:1200px){.jackpot-section .history-panel,.history-panel{position:static !important;width:100% !important;display:flex !important;flex-direction:row !important;gap:12px;margin-top:16px;order:99;top:auto !important;right:auto !important;z-index:auto;}
.hw-block{flex:1;min-width:0;}
.content-panel:has(.jackpot-section){padding-right:32px;}
.coinflip-section .cf-stats-panel{position:static !important;width:100% !important;display:flex !important;flex-direction:row !important;gap:12px;margin-top:16px;order:99;top:auto !important;right:auto !important;z-index:auto;}
.cf-stat-block{flex:1;min-width:0;}
.content-panel:has(.coinflip-section){padding-right:32px;}
}
@media(max-width: 1000px){
    .nav-item {
        color: #888;
        font-weight: 600;
        font-size: 12px;
        padding: 8px 12px;
    }
    .nav-center{right:0;}

}
@media(max-width: 900px){.navbar{position:relative;justify-content: space-between;}
.logo-text{font-size:18px;}
.logo-icon{width:22px;height:22px;}
.mobile-toggle{display:flex;margin-left: auto;}
.nav-center{position:absolute;top: 64px;left:0;right:0;background:#141518;border-bottom:1px solid #1a1c20;flex-direction:column;margin-left:0;padding:8px 16px;gap:2px;max-height:0;opacity:0;overflow:hidden;pointer-events:none;z-index:1000;transition:max-height 0.3s ease,opacity 0.3s ease,padding 0.3s ease;}
.nav-center.open{max-height:260px;opacity:1;pointer-events:auto;padding:10px 16px;}
.nav-item{padding:10px 14px;width:100%;justify-content:flex-start;border-radius:6px;}
.nav-right{gap:8px;}
.balance{font-size:13px;}
.btn-login{padding:8px 14px;font-size:12px;}
.user-avatar{width:26px;height:26px;}
.username{font-size:12px;}
.btn-logout{padding:4px 10px;font-size:10px;}
.chat-panel{position:fixed;top: -2px;left:0;bottom:0;width:280px;z-index:200;transform:translateX(-100%);transition:transform 0.3s cubic-bezier(0.21,0.97,0.45,1);}
.chat-panel.open{transform:translateX(0);}
.chat-toggle-btn{display:flex;}
.content-panel{padding:16px;min-width:0;}
.content-wrapper:has(.jackpot-section) .content-panel{padding-right:16px;}
.jp-top-bar{flex-direction:column;align-items:flex-start;gap:10px;margin-bottom:12px;}
.jp-actions{width:100%;justify-content:space-between;flex-wrap:wrap;gap:8px;}
.jp-limits{font-size:12px;}
.btn-jp-join{padding:10px 18px;font-size:13px;}
.jp-hash{font-size:11px;word-break:break-all;}
.jp-stats-grid{grid-template-columns:repeat(2,1fr);gap:8px;margin-bottom:12px;}
.jp-stat-box{padding:14px 10px;}
.jp-stat-val{font-size:16px;}
.jp-stat-label{font-size:8px;}
.jp-progress-container{height:36px;margin-bottom:12px;}
.jp-progress-text{font-size:15px;}
.jp-player-row{flex-direction:row;align-items:center;gap:10px;padding:10px 12px;}
.jp-player-items{max-width:45%;width:auto;flex-wrap:nowrap;}
.jp-right-wrapper{width:auto;justify-content:flex-end;flex:1;gap:8px;}
.jp-price-block{min-width:50px;}
.jp-dashed-box{min-width:0;flex:1;height:52px;padding:6px 10px;gap:8px;max-width:200px;}
.jp-p-avatar{width:32px;height:32px;}
.jp-p-name{font-size:11px;max-width:60px;}
.jp-p-chance{font-size:10px;padding:3px 8px;}
.jp-price{font-size:14px;}
.jp-deposit-label{font-size:9px;}
.jp-item-icon{width:40px;height:40px;}
.jp-avatar-strip{min-height:100px;padding:8px 40px;gap:6px;}
.jp-av-item{width:72px;height:90px;}
.jp-av-item .jp-av-circle{width:42px;height:42px;}
.jp-av-pct{font-size:10px;}
.hw-block{padding:14px;}
.hw-avatar-wrap{width:60px;height:60px;}
.hw-avatar{width:54px;height:54px;}
.hw-username{font-size:12px;}
.hw-badge{font-size:9px;padding:3px 10px;}
.hw-stat{font-size:11px;}
.modal-container{width:95%;padding:0;max-height:90vh;overflow-y:auto;}
.modal-body{grid-template-columns:repeat(3,1fr);gap:8px;max-height:40vh;}
.item-card{height:140px;padding:10px;}
.item-card .item-image{height:60px;}
.item-card .item-image::before{width:56px;height:56px;}
.item-card .item-image img{width:60px;}
.item-card .item-name{font-size:12px;}
.item-card .item-type{font-size:11px;}
.item-card .item-price{font-size:14px;}
.modal-footer{flex-direction:column;gap:10px;align-items:stretch;height:auto;padding:12px;}
.footer-left{justify-content:center;}
.btn-primary{width:100%;text-align:center;}
.profile-modal-container{max-width:95%;}
.profile-top-row{flex-direction:column;align-items:center;text-align:center;gap:14px;}
.profile-stats-box{width:100%;}
.profile-history table{font-size:12px;}
.profile-history th,.profile-history td{padding:8px 10px;}
.admin-section{padding:10px 0;}
.admin-header{margin-bottom:20px;padding-bottom:12px;}
.admin-header h1{font-size:20px;}
.admin-grid{grid-template-columns:1fr;max-width:100%;}
.admin-card-header h2{font-size:13px;}
.admin-card-body{padding:14px;gap:12px;}
.admin-form-group input{padding:8px 10px;font-size:13px;}
.btn-admin{padding:8px 14px;font-size:12px;}
.admin-status-row{padding:8px 0;font-size:12px;}
.notify{width:calc(100vw - 40px);max-width:300px;}
.pf-section{max-width:100%;}
.pf-card{padding:18px;}
.pf-detail-row{flex-direction:column;gap:2px;padding:8px 0;}
.pf-hash{max-width:100%;text-align:left;}
.cf-game-row{padding:10px 12px;gap:10px;}
.cf-avatar-wrap{width:38px;height:38px;}
.cf-item-icon{width:32px;height:32px;}
.cf-more{height:32px;font-size:11px;padding:0 8px;}
.cf-total-value{font-size:14px;}
.btn-cf-join{padding:7px 14px;font-size:11px;}
.cf-flip-stage{flex-direction:column;gap:24px;}
.cf-flip-player{flex-direction:row;flex-wrap:wrap;justify-content:center;}
.cf-flip-player .cf-flip-items{max-width:100%;width:100%;order:3;}
.cf-view-modal{width:95vw;height:auto;max-height:90vh;padding:44px 18px 18px;}
.cf-view-top{padding:20px 20px 0;margin-bottom:40px;}
.cf-view-avatar-wrap{width:72px;height:72px;}
.cf-view-avatar-inner{width:64px;height:64px;}
.cf-view-chip{width: 40px;height: 40px;}
.cf-view-chip-inner{width:14px;height:14px;}
.cf-view-avatar-name{font-size:11px;}
.cf-coin-wrap{width:76px;height:76px;}
.cf-view-center{width:100px;height:100px;top:10px;}
.cf-view-center::before{width:84px;height:84px;}
.cf-center-text{font-size:11px;}
.cf-view-players-info{padding:0 16px;gap:12px;}
.cf-view-player-card{padding:10px;height:auto;min-height:48px;}
.cf-view-stat-money{font-size:12px;padding:6px 10px;}
.cf-view-inventories{padding:0 16px;gap:12px;}
.cf-view-inventory{padding:8px;}
.cf-view-inventory .cf-flip-item-box{width:64px;}
.cf-view-inventory .cf-flip-item-box .cf-item-icon{/* width: 65px; */height: 95px;}
.cf-view-inventory .cf-view-item-price{font-size:10px;padding:2px 6px;}
.cf-view-footer{padding:10px 16px;}
}
@media(max-width:600px){.jp-stats-grid{grid-template-columns:1fr 1fr;}
.jp-stat-box{padding:12px 8px;}
.jp-stat-val{font-size:15px;}
.jackpot-section .history-panel,.history-panel{flex-direction:column !important;}
.hw-block{width:100%;}
.modal-body{grid-template-columns:repeat(2,1fr);}
.item-card{height:130px;padding:8px;}
.item-card .item-image{height:50px;}
.item-card .item-image::before{width:48px;height:48px;filter:blur(14px);}
.item-card .item-image img{width:50px;}
.item-card .item-name{font-size:11px;}
.item-card .item-type{font-size:10px;}
.item-card .item-price{font-size:13px;}
.modal-header{height:60px;padding:0 16px;}
.modal-header h2{font-size:20px;}
.modal-header .header-right{font-size:12px;}
.modal-footer{padding:10px 12px;}
.footer-item-box{height:38px;padding:0 12px;font-size:12px;}
.btn-primary{height:40px;font-size:13px;}
.cf-side-picker{display:flex;gap:12px;margin:0;padding:0;}
.cf-side-option{width:56px;height:56px;border-radius:50%;border:1px solid #141518;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:0.15s;padding:0;min-width:0;position:relative;opacity:0.4;}
.cf-coin-red,.cf-coin-blue{width:24px;height:24px;}
.admin-card-body>div[style*="grid-template-columns:repeat(4"]{grid-template-columns:repeat(2,1fr)!important;}
.chat-messages{padding:3px 8px;}
.msg-avatar{width:32px;height:32px;}
.msg-header .username{font-size:12px;}
.msg-text{font-size:12px;}
.cf-game-row{padding:8px 10px;gap:8px;}
.cf-avatar-wrap{width:34px;height:34px;}
.cf-coin-badge{width:25px;height:25px;bottom:-11px;}
.cf-item-icon{width:28px;height:28px;}
.cf-more{height:28px;font-size:10px;padding:0 6px;}
.cf-total-value{font-size:13px;}
.btn-cf-join{padding:6px 12px;font-size:10px;}
.btn-cf-view{/* width:28px; *//* height:28px; */font-size: 11px;}
.cf-view-modal{padding:12px 12px 12px;}
.cf-view-top{padding:16px 0;margin-bottom:-9px;gap:80px;}
.cf-view-avatar-wrap{width:58px;height:58px;}
.cf-view-avatar-inner{width:52px;height:52px;}
.cf-view-avatar-wrap::before{inset:-2px;border-width:1px;}
.cf-view-chip{width:20px;height:20px;border-width:2px;}
.cf-view-chip-inner{width:10px;height:10px;border-width:1px;}
.cf-view-avatar-name{font-size:10px;}
.cf-coin-wrap{width:60px;height:60px;}
.cf-view-center{width:80px;height:80px;top:8px;}
.cf-view-center::before{width:68px;height:68px;border-width:3px;}
.cf-center-text{font-size:10px;letter-spacing:1px;}
.cf-view-players-info{flex-direction:column;gap:8px;padding:0 12px;}
.cf-view-inventories{flex-direction:column;gap:10px;padding:0 12px;min-height:120px;}
.cf-view-inventory{min-height: 80px;width:100%;}
.cf-view-footer{padding:8px 12px;}
.cf-view-footer-row{font-size:10px;}
}
@media(max-width:400px){.navbar{padding:0 10px;}
.logo-text{font-size:16px;}
.balance{display:none;}
.jp-stats-grid{grid-template-columns:1fr;}
.jp-stat-box{padding:12px 10px;display:flex;align-items:center;justify-content:space-between;text-align:left;gap:10px;}
.jp-stat-val{margin-bottom:0;}
.jp-stat-label{text-align:right;}
.jp-dashed-box{flex-direction:column;gap:6px;padding:10px;}
.jp-p-name{max-width:100%;}
.jp-p-chance{width:100%;text-align:center;}
.modal-body{grid-template-columns:1fr;}
.item-card{height:120px;}
.item-card .item-image{height:45px;}
.item-card .item-image::before{width:40px;height:40px;}
.item-card .item-image img{width:45px;}
.admin-card-body>div[style*="grid-template-columns:repeat(4"]{grid-template-columns:1fr !important;}
.chat-panel{width:100%;}
.jp-winner-panel>div{flex-direction:column !important;text-align:center;gap:14px !important;}
.jp-winner-panel img{width:56px !important;height:56px !important;}
#jp-verify-btn{width:100%;}
}
:root{--accent-red:#ff3838;--accent-red-hover:#d32f2f;--accent-red-glow:rgba(255,56,56,0.3);--bg-dark:#141518;--bg-card:#141518;--bg-card-hover:#141518;--border-subtle:#1a1c20;--main-background-color: linear-gradient(145deg, #1a1a24 0%, #191924 100%);--main-border-color: #11131e;}
.nav-item.active{color:#fff;background: radial-gradient(93.03% 100% at 13.98% 90%, rgb(174 110 112 / 9%) 0%, rgb(163 92 93 / 25%) 100%);}
.btn-login,.btn-jp-join,.btn-cf-create,.btn-cf-join,.btn-primary,.btn-admin.btn-primary,.btn-pf-verify,.btn-save,.btn-claim,#admin-mute-btn,.btn-resend-winnings{transition:all 0.2s ease;background: #a83737;}
.btn-login:hover,.btn-jp-join:hover,.btn-cf-create:hover,.btn-cf-join:hover,.btn-primary:hover,.btn-admin.btn-primary:hover,.btn-pf-verify:hover,.btn-save:hover,.btn-claim:hover,#admin-mute-btn:hover,.btn-resend-winnings:hover{box-shadow: 0 4px 20px rgba(198,40,40,0.4);}
.jp-dollar,.dollar,.item-card .item-price .dollar,.target-value .dollar,.footer-item-box .dollar,#profile-modal .stat-number .dollar-sign{color: #e2564e;font-weight: 700;}
.modal-header .modal-icon{background:#ff3838;}
.logo-icon{background: #c62828;}
.cf-side-option.selected[data-side="red"]{box-shadow: 0 0 20px 2px #e63427;}
.cf-coin-red{background:#ff3838;}
.cf-coin-preview.red{background:#ff3838;box-shadow:0 0 16px 2px #ff3838;}
.cf-coin-percent-fill.red{background: #fa5f5f;}
.cf-coin-percent-row .side-dot{width:25px;height:25px;border-radius:50%;background-size:cover;background-position:center;flex-shrink:0;}
.cf-coin-percent-row .side-dot.red{background-image:url('/images/cf-red.png');}
.cf-coin-percent-row .side-dot.blue{background-image:url('/images/cf-blue.png');}
.cf-coin-img-dim{opacity:0.85;}
.notify-error{border-left-color:#ff3838;}
.notify-error .notify-progress>div{background:#ff3838;}
.message-row.msg-system{background:rgba(255,56,56,0.08);border:1px solid rgba(255,56,56,0.2);}
.message-row.msg-system .username{color:#ff3838;}
.admin-toggle input:checked+.toggle-slider{background:#ff383822;border-color:#ff3838;}
.admin-toggle input:checked+.toggle-slider:before{background:#ff3838;}
.pf-mismatch{background:#ff383822;border:1px solid #ff383844;color:#ff3838;}
.pf-info code{color:#ff3838;}
.jp-item-more{color:#ff3838;}
.red-money{background:var(--money-bg,#3d1f1f);color:var(--money-color,#ff3838);}
#modal-coinflip-winner h2{color:#ff3838;}
#cf-winner-offer-link{background:#c62828;color:#fff;}
#cf-winner-offer-link:hover{background:#d32f2f;}
#modal-accept-offer .offer-link{background:#c62828;color:#fff;}
#modal-accept-offer .offer-link:hover{background:#d32f2f;}
#modal-winner .winner-link{background:#c62828;color:#fff;}
#modal-winner .winner-link:hover{background:#d32f2f;}
#deposit-error-set-url,#deposit-error-refresh,#deposit-error-back{background:#c62828;}
.jp-verify-btn{
    color: #f5f5f5;
    text-decoration-line: none;
    background: #a93838;
    padding: 6px 14px;
    opacity: 0.8;
    will-change: opacity;
    transition: opacity 0.3s ease;
}
.jp-verify-btn:hover{
    opacity: 1;
}
#profile-modal .btn-save,#profile-modal .btn-claim{background:#c62828;color:#fff;}
#profile-modal .btn-save:hover,#profile-modal .btn-claim:hover{background:#d32f2f;}
.btn-cf-info{border:1px solid #c62828;color:#c62828;}
.btn-cf-info:hover{background:rgba(198,40,40,0.1);border-color:#d32f2f;color:#d32f2f;}
*{transition-timing-function:cubic-bezier(0.4,0,0.2,1);}
.item-card:hover{border-color:rgba(255,255,255,0.05);}
.cf-game-row:hover{box-shadow:0 4px 20px rgba(0,0,0,0.3);}
.modal-container{box-shadow:0 10px 40px rgba(0,0,0,0.7);}
.modal-container .loading, .modal-container .empty, .modal-container .error{
    position:absolute;
    width: 100%;
    top: 25px;
    color: #666;
    text-align: center;
    padding: 20px;
}
#admin-badword-action{
       background: #353535;
       color: #aaa;
       border: 1px solid #1a1c20;
       padding: 10px 18px;
       border-radius: 6px;
       border: none;
       font-weight: 700;
       font-size: 13px;
       cursor: pointer;
       color: white;
       transition: 0.2s;
       display: flex;
       align-items: center;
       gap: 6px;
}
.cf-stat-block{box-shadow:0 8px 32px rgba(0,0,0,0.5);}
.cf-status-label{font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:0.5px;padding:8px 14px;border-radius:8px;white-space:nowrap;line-height:1;display:inline-flex;align-items:center;justify-content:center;height:36px;box-sizing:border-box;}
.cf-status-joining{background:rgba(224,176,32,0.12);border:1px solid rgba(224,176,32,0.25);color:#e0b020;box-shadow:0 0 12px rgba(224,176,32,0.08);}
.cf-status-flipping{background:rgba(255,56,56,0.12);border:1px solid rgba(255,56,56,0.25);color:#ff3838;}
.cf-coin-flip-container{width:120px;height:120px;perspective:800px;position:relative;z-index:2;}
.cf-coin-flipper{width:100%;height:100%;position:relative;transform-style:preserve-3d;}
.cf-coin-face{width:100%;height:100%;position:absolute;top:0;left:0;backface-visibility:hidden;-webkit-backface-visibility:hidden;border-radius:50%;overflow:hidden;}
.cf-coin-face.cf-coin-blue-face{z-index:2;transform:rotateY(0deg);}
.cf-coin-face.cf-coin-red-face{transform:rotateY(180deg);}
.cf-coin-face img{width:100%;height:100%;object-fit:cover;display:block;}
@keyframes spinToRed{0%{transform:rotateY(0deg)scale(1);}
85%{transform:rotateY(1980deg)scale(1);}
90%{transform:rotateY(1980deg)scale(1.15);}
95%{transform:rotateY(1980deg)scale(0.92);}
100%{transform:rotateY(1980deg)scale(1);}
}
@keyframes spinToBlue{0%{transform:rotateY(0deg)scale(1);}
85%{transform:rotateY(1800deg)scale(1);}
90%{transform:rotateY(1800deg)scale(1.15);}
95%{transform:rotateY(1800deg)scale(0.92);}
100%{transform:rotateY(1800deg)scale(1);}
}
.cf-coin-flipper.final-red{transform:rotateY(1980deg);}
.cf-coin-flipper.final-blue{transform:rotateY(1800deg);}
.cf-coin-flipper.anim-red{animation:spinToRed 3.5s cubic-bezier(0.25,0.1,0.25,1)forwards;}
.cf-coin-flipper.anim-blue{animation:spinToBlue 3.5s cubic-bezier(0.25,0.1,0.25,1)forwards;}
#cf-flip-creator-wrap::before{content:'';position:absolute;inset: 0px;border-radius:50%;border:2px solid var(--ring-color,#ff3838);opacity:0.4;}
#cf-flip-joiner-wrap::before{content:'';position:absolute;inset: 0px;border-radius:50%;border:2px solid var(--ring-color,#5073d6);/* box-shadow: 0 0 12px var(--ring-color,#5073d6),0 0 10px var(--ring-color,#5073d6); */opacity:0.4;}
.cf-coin-flip-scene {
    position: relative;
    width: var(--cf-coin-size, 120px);
    height: var(--cf-coin-size, 120px);
    perspective: 800px;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: center;
}
.cf-coin-flip-wrapper {
    position: absolute;
    inset: 0;
    transform-style: preserve-3d;
    will-change: transform;
}
.cf-coin-flip-coin {
    width: 100%;
    height: 100%;
    position: absolute;
    inset: 0;
    transform-style: preserve-3d;
    will-change: transform;
}
.cf-coin-flip-face {
    position: absolute;
    inset: 0;
    border-radius: 50%;
    overflow: hidden;
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
}
.cf-coin-flip-face img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.cf-coin-flip-heads {
    transform: translateZ(1px);
}
.cf-coin-flip-tails {
    transform: rotateX(180deg) translateZ(1px);
}
.cf-coin-flip-trail {
    position: absolute;
    inset: 0;
    border-radius: 50%;
    opacity: 0;
    pointer-events: none;
    filter: blur(8px);
    transform-style: preserve-3d;
}
.cf-coin-flip-trail-heads {
    /* transform: translateZ(1px); */
}
.cf-coin-flip-trail-tails {
    transform: rotateX(180deg) translateZ(1px);
}
.cf-coin-flip-trail img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0.3;
}
.cf-coin-speed-lines {
    position: absolute;
    inset: calc(var(--cf-speed-line-radius, 120px) * -0.67);
    pointer-events: none;
    opacity: 0;
    z-index: 0;
}
.cf-coin-speed-line {
    position: absolute;
    width: var(--cf-speed-line-width, 2px);
    height: var(--cf-speed-line-height, 40px);
    background: linear-gradient(to bottom, transparent, rgba(255,255,255,0.15), transparent);
    left: 50%;
    top: 50%;
    transform-origin: center center;
}

.cf-coin-particle {
    position: absolute;
    width: var(--cf-particle-size, 4px);
    height: var(--cf-particle-size, 4px);
    border-radius: 50%;
    left: 50%;
    top: 50%;
    opacity: 0;
}
.cf-winner-flash {
    position: absolute;
    inset: calc(var(--cf-flash-spread, 40px) * -1);
    background: radial-gradient(circle at 50% 50%, rgba(255,255,255,0.15) 0%, transparent 60%);
    opacity: 0;
    pointer-events: none;
    z-index: 5;
    transition: opacity 0.1s;
    border-radius: 50%;
}
#cf-coin-wrap, #cf-coin-animation, #cf-coin-img {
    display: none !important;
}
#cf-coin-flip-container {
    display: none !important;
}
#cf-coin-flip-rolling {
    display: none;
    position: relative;
    /* ===== SIZE VARIABLES — change these to resize the entire coinflip ===== */
    --cf-coin-size: 155px;           /* coin diameter */
    --cf-container-height: 129px;    /* total container height */
    --cf-speed-line-radius: 120px;   /* speed lines circle radius */
    --cf-particle-spread: 60px;      /* particle explosion spread */
             /* shadow width */
            /* shadow height */
    --cf-flash-spread: 40px;         /* winner flash spread */
    --cf-result-font: 28px;          /* result text font size */
    --cf-particle-size: 4px;         /* base particle size */
    --cf-speed-line-height: 45px;    /* speed line length */
    --cf-speed-line-width: 1px;      /* speed line thickness */
    /* ====================================================================== */
    width: var(--cf-coin-size);
    height: var(--cf-container-height);
    z-index: 2;
}
#cf-coin-flip-rolling.active {
    display: block;
}

/* ===== CLEAN COINFLIP ZOOM ANIMATION (flip2.html style) ===== */

@keyframes cfZoomToScreenRed {
    0% { transform: scale(1) rotateX(0deg); }
    30% { transform: scale(2.5) rotateX(540deg); filter: drop-shadow(0 0 30px rgba(226, 86, 78, 0.6)); }
    60% { transform: scale(2.5) rotateX(900deg); filter: drop-shadow(0 0 40px rgba(226, 86, 78, 0.8)); }
    100% { transform: scale(1) rotateX(1980deg); filter: drop-shadow(0 0 15px rgba(226, 86, 78, 0.4)); }
}

@keyframes cfZoomToScreenBlue {
    0% { transform: scale(1) rotateX(0deg); }
    30% { transform: scale(2.5) rotateX(540deg); filter: drop-shadow(0 0 30px rgba(74, 142, 197, 0.6)); }
    60% { transform: scale(2.5) rotateX(900deg); filter: drop-shadow(0 0 40px rgba(74, 142, 197, 0.8)); }
    100% { transform: scale(1) rotateX(1800deg); filter: drop-shadow(0 0 15px rgba(74, 142, 197, 0.4)); }
}

@keyframes cfParticleBurst {
    0% { transform: translate(0, 0) scale(1); opacity: 1; }
    100% { transform: translate(var(--px), var(--py)) scale(0); opacity: 0; }
}

/* Glow ring behind coin */
.cf-zoom-glow {
    position: absolute;
    inset: -30px;
    border-radius: 50%;
    pointer-events: none;
    z-index: -1;
    opacity: 0;
    transition: opacity 0.3s;
}
.cf-zoom-glow.red {
    background: radial-gradient(circle, rgba(226, 86, 78, 0.2) 0%, transparent 70%);
}
.cf-zoom-glow.blue {
    background: radial-gradient(circle, rgba(74, 142, 197, 0.2) 0%, transparent 70%);
}
.cf-zoom-glow.active {
    opacity: 1;
}

/* ===== COINFLIP ANIMATION KEYFRAMES & HELPERS ===== */

.cf-winner-flash.active {
    opacity: 1 !important;
}

/* Clickable game IDs in history */


/* Your Side labels */
.side-label {
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    padding: 2px 8px;
    border-radius: 4px;
    display: inline-block;
}

.side-label.side-red {
    color: #ff3838;
    background: rgba(226, 86, 78, 0.1);
    border: 1px solid rgba(226, 86, 78, 0.2);
}

.side-label.side-blue {
    color: #4a8ec5;
    background: rgba(74, 142, 197, 0.1);
    border: 1px solid rgba(74, 142, 197, 0.2);
}
.history-tabs {
    display: flex;
    gap: 6px;
    margin-bottom: 14px;
    padding: 0 2px;
}


.history-tab:hover {
    background: #1a1c20;
    color: #aaa;
    border-color: #1a1c20;
}

.history-tab.active {
    background: #ff3838;
    color: #fff;
    border-color: #ff3838;
    box-shadow: 0 4px 12px rgba(198, 40, 40, 0.2);
}

/* ===== PROFILE HISTORY TABLE ===== */

#profile-modal .profile-history table {
    margin-top: 0;
    width: 100%;
    border-collapse: collapse;
    font-size: 13px;
}
.profile-history-scroll::-webkit-scrollbar {
    width: 4px;
}

.profile-history-scroll::-webkit-scrollbar-track {
    background: #0d0e10;
}

.profile-history-scroll::-webkit-scrollbar-thumb {
    background: #1a1c20;
    border-radius: 4px;
}

/* ===== COIN IMAGES IN HISTORY ===== */

.history-coin-img {
    width: 22px;
    height: 22px;
    border-radius: 50%;
    object-fit: cover;
    display: inline-block;
    vertical-align: middle;
    box-shadow: 0 0 6px rgba(0, 0, 0, 0.3);
}

.history-coin-img.side-red {
    box-shadow: 0 0 8px rgba(198, 40, 40, 0.3);
}

.history-coin-img.side-blue {
    box-shadow: 0 0 8px rgba(74, 142, 197, 0.3);
}

/* ===== CLICKABLE GAME IDs ===== */
.cf-history-game-id:hover {
    color: #d32f2f;
}

/* ===== RESULT LABELS ===== */

.result-won {
    color: #2ecc71;
    font-weight: 700;
}

.result-lost {
    color: #888;
}

/* ===== CHANCE LABEL (jackpot) ===== */

.chance-label {
    color: #e0b020;
    font-size: 11px;
    margin-left: 4px;
}

/* ===== ROW HOVER ===== */

.history-row {
    transition: background 0.15s ease;
}

.history-row:hover {
    background: #141518;
}

/* ===== FAILED ROWS ===== */

.failed-row {
    background: rgba(198, 40, 40, 0.04);
}

.failed-reason {
    color: #ff3838;
    font-size: 12px;
}

/* ===== GAME BADGES ===== */

.game-badge {
    display: inline-block;
    padding: 2px 6px;
    border-radius: 4px;
    font-size: 10px;
    font-weight: 700;
    margin-right: 6px;
}

.game-badge.cf-badge {
    background: #4a8ec522;
    color: #4a8ec5;
}

.game-badge.jp-badge {
    background: #ff383822;
    color: #ff3838;
}

/* ===== RESEND BUTTON ===== */

.btn-resend-winnings {
    background: #ff3838;
    color: #fff;
    border: none;
    padding: 4px 10px;
    border-radius: 4px;
    cursor: pointer;
    font-size: 12px;
    font-weight: 600;
    transition: all 0.2s ease;
}

.btn-resend-winnings:hover {
    background: #d32f2f;
    transform: translateY(-1px);
}

/* ===== NO HISTORY ===== */

.no-history {
    text-align: center;
    color: #555;
    padding: 24px !important;
}

/* ===== JACKPOT VIEW MODAL (ended games) ===== */
#modal-jackpot-view{align-items:center;justify-content:center;}
.jp-view-close{position:absolute;top:12px;right:16px;background:none;border:none;color:#666;font-size:20px;cursor:pointer;z-index:100;transition:color 0.2s;width:32px;height:32px;display:flex;align-items:center;justify-content:center;}
.jp-view-close:hover{color:#fff;}
.jp-view-header-left{display:flex;align-items:center;gap:14px;}
.jp-view-icon{width:36px;height:36px;background:#ff3838;border-radius:50%;display:flex;align-items:center;justify-content:center;flex-shrink:0;}
.jp-view-title{font-size:20px;font-weight:800;color:#fff;margin:0;}
.jp-view-title span{color:#ff3838;}
.jp-view-status{font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:0.5px;padding:4px 10px;border-radius:4px;margin-top:4px;display:inline-block;}
.jp-view-status.ended{background:rgba(46,204,113,0.12);border:1px solid rgba(46,204,113,0.25);color:#2ecc71;}
.jp-view-header-right{display:flex;align-items:center;}
.jp-view-pot-box{display:flex;flex-direction:column;align-items:flex-end;gap:2px;}
.jp-view-pot-label{font-size:10px;color:#888;text-transform:uppercase;letter-spacing:0.5px;font-weight:600;}
.jp-view-pot-value{font-size:22px;font-weight:800;color:#fff;}
.jp-view-pot-value .dollar{color:#ff3838;font-size:16px;margin-right:2px;}
.jp-view-winner-section{padding: 10px 24px;background: rgb(0,0,0,22%);}
.jp-view-winner-card{display:flex;align-items:center;gap:16px;}
.jp-view-winner-card img{width:56px;height:56px;border-radius:10px;border:2px solid #f1c40f;object-fit:cover;flex-shrink:0;}
.jp-view-section-title{font-size:13px;font-weight:700;color:#fff;text-transform:uppercase;letter-spacing:0.5px;}
.jp-view-section-title span{color:#888;font-weight:600;}
.jp-view-section-subtitle{font-size:12px;color:#888;}
.jp-view-players-list{display:flex;flex-direction:column;gap:8px;}
.jp-view-player-row{display:flex;align-items:center;justify-content:space-between;background: #14151878;border: 1px solid #181b26;border-radius:10px;transition:0.15s;position:relative;padding: 10px 14px;}
.jp-view-player-row::before{content:"";position:absolute;left:-1px;top:50%;transform:translateY(-50%);width:2px;height:30px;background:var(--user-color);border-radius:5px;box-shadow:0 0 6px var(--user-color);}
.jp-view-player-row:hover{border-color:#1a1c20;}
.jp-view-player-left{display:flex;align-items:center;gap:12px;flex:1;min-width:0;}
.jp-view-player-avatar{width:40px;height:40px;border-radius:50%;border:2px solid var(--user-color);object-fit:cover;flex-shrink:0;}
.jp-view-player-info{display:flex;flex-direction:column;gap:2px;min-width:0;}
.jp-view-player-name{font-size:13px;font-weight:600;color:#fff;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.jp-view-player-items-preview{display:flex;align-items:center;gap:4px;flex-wrap:wrap;}
.jp-view-player-item-icon{width:32px;height:32px;border-radius:4px;background:#1a1c20;border:1px solid #1a1c20;display:flex;align-items:center;justify-content:center;overflow:hidden;}
.jp-view-player-item-icon img{width:80%;height:80%;object-fit:contain;}
.jp-view-player-more{font-size:10px;color:#888;font-weight:600;padding:2px 6px;background:#1a1c20;border-radius:4px;}
.jp-view-player-right{display:flex;align-items:center;gap:12px;flex-shrink:0;}
.jp-view-player-deposit{font-size:14px;font-weight:700;color:#fff;}
.jp-view-player-deposit .dollar{color:#ff3838;font-size:12px;}
.jp-view-player-chance{font-size:12px;font-weight:600;color:#888;background:#1a1c20;padding:4px 10px;border-radius:4px;}
.jp-view-footer-row{margin-bottom:6px;font-family:monospace;line-height:1.5;font-size:11px;display:flex;gap:8px;}
.jp-view-footer-row:last-child{margin-bottom:0;}
.jp-view-footer-label{color:#777;font-weight:600;text-transform:uppercase;letter-spacing:0.5px;font-family:'Segoe UI',system-ui,sans-serif;font-size:10px;flex-shrink:0;min-width:55px;}
.jp-view-footer-val{color:#aaa;word-break:break-all;}
.jp-view-verify{margin-top:10px;text-align:center;}
.jp-view-verify-btn{background:#1a1c20;border:1px solid #1a1c20;color:#aaa;padding:8px 18px;border-radius:6px;font-size:12px;font-weight:600;cursor:pointer;transition:0.2s;}
.jp-view-verify-btn:hover{background:#1a1c20;color:#fff;border-color:#1a1c20;}

.jp-view-verify-link:hover {
    color: #ff3838;
    text-decoration: underline;
}
@media(max-width:900px){.jp-view-modal{width:95vw;max-width:none;max-height:85vh;}.jp-view-header{padding:16px 20px;}.jp-view-winner-section{padding:16px 20px;}.jp-view-players-section{padding:12px 20px;}.jp-view-footer{padding:12px 20px;}.jp-view-winner-details{gap:8px;}.jp-view-player-row{padding:10px 12px;}.jp-view-player-avatar{width:36px;height:36px;}.jp-view-player-name{font-size:12px;}}
@media(max-width:600px){.jp-view-title{font-size:16px;}.jp-view-pot-value{font-size:18px;}.jp-view-winner-card img{width:48px;height:48px;}.jp-view-winner-name{font-size:14px;}.jp-view-winner-details{flex-direction:column;align-items:flex-start;gap:6px;}.jp-view-player-left{gap:8px;}.jp-view-player-right{flex-direction:column;align-items:flex-end;gap:4px;}.jp-view-footer-row{flex-direction:column;gap:2px;}}


/* ============================================================================
   PROVABLY FAIR PAGE STYLES
   ============================================================================ */

.pf-container {max-width: 900px;margin: 0 auto;}
.pf-header { text-align: center; margin-bottom: 40px; }
.pf-header .pf-subtitle { color: #ff3838; font-size: 14px; font-weight: 600; text-transform: uppercase; letter-spacing: 2px; }
.pf-section-title { font-size: 20px; font-weight: 700; color: #fff; margin-bottom: 16px; display: flex; align-items: center; gap: 10px; }
.pf-section-title .icon {width: 32px;height: 32px;background: #a83737;border-radius: 8px;display: flex;align-items: center;justify-content: center;font-size: 16px;}
.pf-explanation {color: #8c90a1;font-size: 14px;margin-bottom: 20px;}
.pf-explanation strong {color: #c8cddf;}
.pf-explanation code {background: #0d0e10;padding: 2px 8px;border-radius: 4px;font-family: 'Fira Code', monospace;font-size: 13px;color: #7db993;}
.pf-code-block { background: #0d0e10; border: 1px solid #1a1c20; border-radius: 12px; padding: 20px; margin: 16px 0; overflow-x: auto; }
.pf-code-block pre {font-family: 'Fira Code', monospace;font-size: 13px;line-height: 1.8;color: #668571;}
.pf-game-selector { display: flex; gap: 12px; margin-bottom: 20px; }
.pf-game-btn {flex: 1;padding: 14px 20px;background: rgb(0 0 0 / 15%);border: 2px solid #1a1c20;border-radius: 10px;color: #8c90a1;font-size: 14px;font-weight: 600;cursor: pointer;transition: all 0.2s;text-align: center;}
.pf-game-btn:hover { border-color: #ff3838; color: #aaa; }
.pf-game-btn.active {background: #a83737;border-color: #a83737;color: #fff;}
.pf-input-group { margin-bottom: 16px; }
.pf-input-group label {display: block;font-size: 13px;font-weight: 600;color: #c8cddf;margin-bottom: 6px;text-transform: uppercase;letter-spacing: 0.5px;}
.pf-input-group input {width: 100%;padding: 14px 16px;background: rgb(0 0 0 / 15%);border: 1px solid #1a1c20;border-radius: 10px;color: #fff;font-size: 14px;font-family: 'Fira Code', monospace;}
.pf-input-group input:focus {outline: none;border-color: #7db99357;}
.pf-verify-btn {width: 100%;padding: 16px;background: #a83737;border: none;border-radius: 10px;color: #fff;font-size: 15px;font-weight: 700;cursor: pointer;transition: all 0.2s;text-transform: uppercase;letter-spacing: 1px;margin-top: 8px;}
.pf-verify-btn:hover { transform: translateY(-1px); box-shadow: 0 8px 24px rgba(198, 40, 40, 0.3); }
.pf-verify-btn:disabled { opacity: 0.5; cursor: not-allowed; transform: none; }
.pf-result { display: none; margin-top: 24px; animation: fadeIn 0.4s ease; }
.pf-result.show { display: block; }
@keyframes fadeIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }
.pf-result-header { display: flex; align-items: center; gap: 10px; margin-bottom: 16px; }
.pf-result-status { padding: 6px 14px; border-radius: 20px; font-size: 12px; font-weight: 700; text-transform: uppercase; }
.pf-result-status.valid { background: rgba(46, 204, 113, 0.15); color: #2ecc71; }
.pf-result-status.invalid { background: rgba(198, 40, 40, 0.15); color: #ff3838; }
.pf-data-grid { display: grid; gap: 12px; }
.pf-data-row {display: flex;align-items: flex-start;padding: 14px 16px;background: rgb(0 0 0 / 15%);border-radius: 10px;border: 1px solid #1a1c20;}
.pf-data-label { min-width: 140px; font-size: 12px; font-weight: 600; color: #888; text-transform: uppercase; letter-spacing: 0.5px; padding-top: 2px; }
.pf-data-value { flex: 1; font-family: 'Fira Code', monospace; font-size: 13px; color: #aaa; word-break: break-all; }
.pf-data-value.hash {color: #e5c9c9;}
.pf-data-value.seed {color: #ff7474;}
.pf-data-value.ticket {color: #bdbc70;font-size: 15px;font-weight: 700;}
.pf-data-value.mod {color: #669b7c;}
.pf-info-box {background: rgb(51 60 40 / 22%);border: 1px solid rgb(84 190 76 / 20%);border-radius: 10px;padding: 16px;margin-top: 16px;}
.pf-info-box p {font-size: 13px;color: #77b264;margin: 0 0 8px 0;}
.pf-info-box p strong {color: #3ac460;}
.pf-info-box p:last-child { margin-bottom: 0; }
.pf-loading { text-align: center; padding: 40px; color: #888; display: none; }
.pf-loading::after { content: ''; display: inline-block; width: 20px; height: 20px; border: 2px solid #1a1c20; border-top-color: #ff3838; border-radius: 50%; animation: spin 0.8s linear infinite; margin-left: 10px; vertical-align: middle; }
@keyframes spin { to { transform: rotate(360deg); } }
.pf-error { background: rgba(198, 40, 40, 0.1); border: 1px solid rgba(198, 40, 40, 0.3); border-radius: 10px; padding: 16px; color: #ff3838; font-size: 14px; margin-top: 16px; display: none; }
.pf-error.show { display: block; }
.pf-random-org-box {background: rgb(0 0 0 / 15%);border: 1px solid #1a1c20;border-radius: 10px;padding: 16px;margin-top: 16px;}
.pf-random-org-box h4 { color: #fff; font-size: 14px; margin-bottom: 12px; }
.pf-random-org-box .pf-data-row { background: transparent; border: none; padding: 8px 0; }
.pf-random-org-box .pf-data-label { min-width: 160px; }
.pf-verify-link { display: inline-block; margin-top: 12px; color: #ff3838; text-decoration: none; font-weight: 600; font-size: 14px; }
.pf-verify-link:hover { color: #d32f2f; }
.pf-steps { list-style: none; counter-reset: step; }
.pf-steps li {position: relative;padding-left: 40px;margin-bottom: 16px;font-size: 14px;color: #8c90a1;}
.pf-steps li::before {counter-increment: step;content: counter(step);position: absolute;left: 0;top: 0;width: 26px;height: 26px;background: #a83737;border-radius: 50%;display: flex;align-items: center;justify-content: center;font-size: 12px;font-weight: 700;color: #fff;}
.pf-steps li strong {color: #c8cddf;}
.pf-textarea-copy { width: 100%; min-height: 120px; background: #0d0e10; border: 1px solid #1a1c20; border-radius: 8px; padding: 12px; color: #61afef; font-family: monospace; font-size: 12px; resize: vertical; }
.pf-textarea-copy:focus { outline: none; border-color: #ff3838; }

/* ============================================================================
   COPY BUTTONS FOR PROVABLY FAIR TEXTAREAS
   ============================================================================ */

.pf-copy-btn {
    background: #1a1c20;
    border: 1px solid #2a2b3a;
    color: #aaa;
    padding: 4px 12px;
    border-radius: 4px;
    font-size: 11px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
    font-family: 'Segoe UI', system-ui, sans-serif;
}
.pf-copy-btn:hover {
    background: #ff3838;
    border-color: #ff3838;
    color: #fff;
}
.pf-copy-btn.copied {
    background: #27ae60;
    border-color: #27ae60;
    color: #fff;
}
.pf-copy-btn.copied {
    background: #2ecc71 !important;
    color: #fff !important;
}
.pf-copy-btn.error {
    background: #e74c3c !important;
    color: #fff !important;
}

/* ============================================================================
   SVG ICON SYSTEM - Inline CSS Icons (No External Dependencies)
   ============================================================================ */

/* Base icon styles */
.nav-icon,
.admin-icon,
.icon-x,
.icon-menu,
.icon-gear,
.icon-error,
.icon-success,
.icon-refresh,
.icon-link,
.icon-back,
.icon-user,
.icon-x-small,
.icon-warn,
.icon-check,
.icon-info,
.icon-volume,
.refresh-icon,
.btn-icon {
    display: inline-block;
    width: 1em;
    height: 1em;
    vertical-align: middle;
    flex-shrink: 0;
}

/* Navigation Icons */
.nav-icon {
    width: 18px;
    height: 18px;
    stroke: currentColor;
    fill: none;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.nav-item .nav-icon {
    opacity: 0.7;
    transition: opacity 0.2s;
    color: #da4242;
}
.nav-item:hover .nav-icon,
.nav-item.active .nav-icon {
    opacity: 1;
}

/* Admin card icons */
.admin-icon {
    width: 16px;
    height: 16px;
    stroke: currentColor;
    fill: none;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

/* Close X icon */
.icon-x,
.icon-x-small {
    position: relative;
    width: 14px;
    height: 14px;
}
.icon-x::before,
.icon-x::after,
.icon-x-small::before,
.icon-x-small::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 100%;
    height: 2px;
    background: currentColor;
    border-radius: 1px;
}
.icon-x::before,
.icon-x-small::before {
    transform: translate(-50%, -50%) rotate(45deg);
}
.icon-x::after,
.icon-x-small::after {
    transform: translate(-50%, -50%) rotate(-45deg);
}
.icon-x-small {
    width: 10px;
    height: 10px;
}

/* Hamburger menu icon */
.icon-menu {
    position: relative;
    width: 18px;
    height: 14px;
}
.icon-menu::before,
.icon-menu::after {
    content: '';
    position: absolute;
    left: 0;
    width: 100%;
    height: 2px;
    background: currentColor;
    border-radius: 1px;
}
.icon-menu::before {
    top: 0;
    box-shadow: 0 6px 0 currentColor;
}
.icon-menu::after {
    bottom: 0;
}

/* Gear/Settings icon */
.icon-gear {
    position: relative;
    width: 16px;
    height: 16px;
    border: 2px solid currentColor;
    border-radius: 50%;
}
.icon-gear::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 6px;
    height: 6px;
    border: 2px solid rgb(180 61 61);
    border-radius: 50%;
    background: transparent;
}

/* Error icon (X in circle) */
.icon-error {
    position: relative;
    width: 14px;
    height: 14px;
    border: 2px solid #e2564e;
    border-radius: 50%;
}
.icon-error::before,
.icon-error::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 60%;
    height: 2px;
    background: #e2564e;
    border-radius: 1px;
}
.icon-error::before {
    transform: translate(-50%, -50%) rotate(45deg);
}
.icon-error::after {
    transform: translate(-50%, -50%) rotate(-45deg);
}

/* Success icon (checkmark) */
.icon-success {
    position: relative;
    width: 14px;
    height: 14px;
    border: 2px solid #2ecc71;
    border-radius: 50%;
}
.icon-success::after {
    content: '';
    position: absolute;
    top: 45%;
    left: 50%;
    width: 30%;
    height: 55%;
    border: solid #2ecc71;
    border-width: 0 2px 2px 0;
    transform: translate(-50%, -50%) rotate(45deg);
}

/* Refresh icon */
.icon-refresh {
    position: relative;
    width: 14px;
    height: 14px;
    border: 2px solid currentColor;
    border-left-color: transparent;
    border-radius: 50%;
    transform: rotate(-45deg);
}
.icon-refresh::after {
    content: '';
    position: absolute;
    top: -2px;
    right: -1px;
    width: 0;
    height: 0;
    border-left: 4px solid currentColor;
    border-top: 3px solid transparent;
    border-bottom: 3px solid transparent;
}

/* Link icon */
.icon-link {
    position: relative;
    width: 14px;
    height: 8px;
    border: 2px solid currentColor;
    border-radius: 4px;
    transform: rotate(-45deg);
}
.icon-link::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 4px;
    height: 4px;
    background: currentColor;
    border-radius: 50%;
}

/* Back arrow */
.icon-back {
    position: relative;
    width: 14px;
    height: 14px;
}
.icon-back::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 2px;
    width: 60%;
    height: 60%;
    border: solid currentColor;
    border-width: 0 0 2px 2px;
    transform: translateY(-50%) rotate(45deg);
}

/* User icon */
.icon-user {
    position: relative;
    width: 12px;
    height: 12px;
}
.icon-user::before {
    content: '';
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 5px;
    height: 5px;
    border: 1.5px solid currentColor;
    border-radius: 50%;
    background: transparent;
}
.icon-user::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 10px;
    height: 5px;
    border: 1.5px solid currentColor;
    border-radius: 5px 5px 0 0;
    background: transparent;
}

/* Warning icon */
.icon-warn {
    position: relative;
    width: 14px;
    height: 14px;
    border: 2px solid #f1c40f;
    border-radius: 50%;
}
.icon-warn::before {
    content: '';
    position: absolute;
    top: 25%;
    left: 50%;
    transform: translateX(-50%);
    width: 2px;
    height: 4px;
    background: #f1c40f;
    border-radius: 1px;
}
.icon-warn::after {
    content: '';
    position: absolute;
    bottom: 25%;
    left: 50%;
    transform: translateX(-50%);
    width: 2px;
    height: 2px;
    background: #f1c40f;
    border-radius: 50%;
}

/* Check icon (simple) */
.icon-check {
    position: relative;
    width: 14px;
    height: 14px;
}
.icon-check::after {
    content: '';
    position: absolute;
    top: 40%;
    left: 50%;
    width: 25%;
    height: 50%;
    border: solid #2ecc71;
    border-width: 0 2px 2px 0;
    transform: translate(-50%, -50%) rotate(45deg);
}

/* Info icon */
.icon-info {
    position: relative;
    width: 14px;
    height: 14px;
    border: 2px solid #3498db;
    border-radius: 50%;
}
.icon-info::before {
    content: '';
    position: absolute;
    top: 30%;
    left: 50%;
    transform: translateX(-50%);
    width: 2px;
    height: 2px;
    background: #3498db;
    border-radius: 50%;
}
.icon-info::after {
    content: '';
    position: absolute;
    bottom: 25%;
    left: 50%;
    transform: translateX(-50%);
    width: 2px;
    height: 4px;
    background: #3498db;
    border-radius: 1px;
}

/* Volume icon */
.icon-volume {
    position: relative;
    width: 14px;
    height: 14px;
}
.icon-volume::before {
    content: '';
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 6px;
    height: 8px;
    background: currentColor;
    border-radius: 1px;
    clip-path: polygon(0 30%, 100% 0, 100% 100%, 0 70%);
}
.icon-volume::after {
    content: '';
    position: absolute;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 6px;
    height: 6px;
    border: 2px solid currentColor;
    border-left: none;
    border-radius: 0 50% 50% 0;
}

/* Refresh button icon */
.refresh-icon {
    width: 16px;
    height: 16px;
    stroke: currentColor;
    fill: none;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

/* Button icons */
.btn-icon {
    width: 14px;
    height: 14px;
    stroke: currentColor;
    fill: none;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

/* Notify icon wrapper */
.notify-icon-wrap {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    font-size: 12px;
    font-weight: 700;
    color: #fff;
}
.notify-error .notify-icon-wrap { background: #e2564e; }
.notify-success .notify-icon-wrap { background: #2ecc71; }
.notify-info .notify-icon-wrap { background: #3498db; }
.notify-warning .notify-icon-wrap { background: #f1c40f; color: #000; }

/* Chat action buttons */
.chat-profile-btn,
.chat-mute-x {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 18px;
    height: 18px;
    border-radius: 4px;
    cursor: pointer;
    transition: all 0.15s;
    opacity: 0.6;
}
.chat-profile-btn:hover,
.chat-mute-x:hover {
    opacity: 1;
    background: rgba(255,255,255,0.05);
}

/* Status indicators using CSS instead of emojis */
.status-dot {
    display: inline-block;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    margin-right: 6px;
}
.status-dot.online { background: #2ecc71; box-shadow: 0 0 6px #2ecc71; }
.status-dot.offline { background: #e2564e; }
.status-dot.busy { background: #f1c40f; }

/* Admin card headers with icons */
.admin-card-header h2 {
    display: flex;
    align-items: center;
    gap: 8px;
}

/* Ensure icons don't break layout */
.nav-item,
.btn-admin,
.chat-menu-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

/* Mobile menu toggle icon sizing */
#menu-toggle .icon-menu,
#menu-toggle .icon-x {
    width: 20px;
    height: 16px;
}

/* Fix for notify content icons */
.notify-title .icon-error,
.notify-title .icon-success,
.notify-title .icon-warn,
.notify-title .icon-info {
    margin-right: 6px;
}
/* ============================================================================
   ADMIN PANEL EXTRAS (moved from inline styles)
   ============================================================================ */

.admin-card-full {
    grid-column: 1 / -1;
}

.admin-stats-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 16px;
}

.admin-stat-box {
    background: #1a1a21;
    padding: 16px;
    border-radius: 8px;
    text-align: center;
}

.admin-stat-val {
    font-weight: 700;
    font-size: 18px;
}

.admin-stat-val.red {
    color: #e2564e;
}

.admin-stat-val.green {
    color: #2ecc71;
}

.admin-stat-label {
    color: #666;
    font-size: 11px;
    margin-top: 6px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.admin-input-row {
    display: flex;
    gap: 8px;
}

#admin-mute-duration {
    flex: 1;
}

#admin-mute-unit {
    background: #1e1f2b;
    border: 1px solid #2a2b3a;
    color: #fff;
    padding: 10px 12px;
    border-radius: 6px;
    font-size: 14px;
}

#admin-muted-list {
    max-height: 300px;
    overflow-y: auto;
}

#admin-price-result {
    margin-top: 10px;
    font-size: 12px;
    color: #6b7080;
}

.admin-muted-loading,
.admin-muted-empty {
    color: #6b7080;
    text-align: center;
    padding: 20px;
}

.admin-muted-error {
    color: #e2564e;
    text-align: center;
    padding: 20px;
}

.admin-muted-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 13px;
}

.admin-muted-table thead tr {
    border-bottom: 1px solid #2a2b3a;
}

.admin-muted-th {
    text-align: left;
    padding: 8px;
    color: #888;
}

.admin-muted-th.action {
    text-align: right;
}

.admin-muted-row {
    border-bottom: 1px solid #1e1f2b;
}

.admin-muted-td {
    padding: 8px;
}

.admin-muted-td.user {
    color: #fff;
}

.admin-muted-td.user img {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    vertical-align: middle;
    margin-right: 8px;
}

.admin-muted-td.steamid {
    color: #888;
    font-family: monospace;
    font-size: 11px;
}

.admin-muted-td.duration {
    color: #f1c40f;
}

.admin-muted-td.reason {
    color: #c9cdd3;
}

.admin-muted-td.mutedby {
    color: #888;
}

.admin-muted-td.action {
    text-align: right;
}

.admin-unmute-btn {
    padding: 4px 12px;
    font-size: 12px;
}

/* ============================================================================
   ADMIN USER PROFILE MODAL
   ============================================================================ */

#admin-user-modal .modal-container {
    max-width: 420px;
    padding: 0;
    overflow: hidden;
}

#admin-user-modal .modal-header {
    padding: 20px 24px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

#admin-user-modal .modal-header h2 {
    margin: 0;
    font-size: 16px;
    color: #e0e0e0;
}

#admin-user-modal .modal-close-btn {
    background: none;
    border: none;
    color: #5a5a65;
    font-size: 18px;
    cursor: pointer;
    transition: color 0.2s;
}

#admin-user-modal .modal-close-btn:hover {
    color: #fff;
}

.admin-user-body {
    padding: 24px;
}

.admin-user-top {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-bottom: 20px;
}

#admin-user-avatar {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    border: 2px solid #c44a3a;
    object-fit: cover;
}

.admin-user-info {
    display: flex;
    flex-direction: column;
}

#admin-user-name {
    color: #e0e0e0;
    font-weight: 700;
    font-size: 15px;
}

#admin-user-steamid {
    color: #5a5a65;
    font-size: 12px;
    font-family: monospace;
    margin-top: 2px;
}

.admin-user-stats {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 10px;
    margin-bottom: 20px;
}

.admin-user-stat-box {
    background: #1e1e26;
    padding: 12px;
    border-radius: 8px;
    text-align: center;
    border: 1px solid var(--main-border-color);
}

.admin-user-stat-box .stat-val {
    color: #e0e0e0;
    font-weight: 700;
    font-size: 14px;
}

.admin-user-stat-box .stat-val .dollar {
    color: #c44a3a;
}

.admin-user-stat-box .stat-label {
    color: #5a5a65;
    font-size: 11px;
    margin-top: 4px;
}

.admin-user-mute-section {
    margin-bottom: 16px;
}

.admin-user-mute-section label,
.admin-user-reason-section label {
    display: block;
    color: #7a7a8a;
    font-size: 12px;
    margin-bottom: 6px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.admin-user-mute-row {
    display: flex;
    gap: 8px;
}

#admin-user-mute-duration {
    flex: 1;
    background: #1e1e26;
    border: 1px solid var(--main-border-color);
    color: #e0e0e0;
    padding: 10px 12px;
    border-radius: 6px;
    font-size: 14px;
    outline: none;
}

#admin-user-mute-duration:focus {
    border-color: #c44a3a;
}

#admin-user-mute-unit {
    background: #1e1e26;
    border: 1px solid var(--main-border-color);
    color: #e0e0e0;
    padding: 10px 12px;
    border-radius: 6px;
    font-size: 14px;
    outline: none;
}

#admin-user-mute-unit:focus {
    border-color: #c44a3a;
}

.admin-user-reason-section {
    margin-bottom: 20px;
}

#admin-user-mute-reason {
    width: 100%;
    background: #1e1e26;
    border: 1px solid var(--main-border-color);
    color: #e0e0e0;
    padding: 10px 12px;
    border-radius: 6px;
    font-size: 14px;
    box-sizing: border-box;
    outline: none;
}

#admin-user-mute-reason:focus {
    border-color: #c44a3a;
}

.admin-user-actions {
    display: flex;
    gap: 10px;
}

#admin-mute-btn,
#admin-unmute-btn {
    flex: 1;
    border: none;
    padding: 12px;
    border-radius: 6px;
    font-weight: 700;
    font-size: 13px;
    cursor: pointer;
    color: #e0e0e0;
    transition: all 0.2s ease;
}

#admin-mute-btn {
    background: #522a25;
}

#admin-mute-btn:hover {
    background: #d32f2f;
    transform: translateY(-1px);
}

#admin-unmute-btn {
    background: #244432;
}

#admin-unmute-btn:hover {
    background: #27ae60;
    transform: translateY(-1px);
}


/* ============================================================================
   PROFILE MODAL - EXACT 1:1 MATCH
   ============================================================================ */

#profile-modal .modal-container.profile-modal-container {
    max-width: 700px;
    width: 95%;
    padding: 0;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    background: var(--main-background-color);
    border: 1px solid #1e1e26;
    border-radius: 16px;
    box-shadow: 0 20px 60px rgba(0,0,0,0.6);
}

.profile-layout {
    display: flex;
    flex-direction: column;
    min-height: 0;
}

/* --- Main Content --- */
.profile-main {
    flex: 1;
    padding: 24px 28px 28px;
    display: flex;
    flex-direction: column;
    gap: 16px;
    overflow-y: hidden;
    max-height: 100vh;
}

/* User Info Header - avatar + name + joined */
.profile-user-header {
    display: flex;
    align-items: center;
    gap: 14px;
    padding-bottom: 4px;
}

.profile-header-avatar {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    border: 2px solid #1a1c20;
    overflow: hidden;
    background: #0d0e10;
    flex-shrink: 0;
}

.profile-header-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.profile-header-info {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.profile-header-info-top {
    display: flex;
    align-items: center;
    gap: 10px;
}

.profile-header-username {
    font-size: 16px;
    font-weight: 700;
    color: #e0e0e0;
}

.profile-header-badge {
    font-size: 10px;
    font-weight: 700;
    color: #ff3838;
    text-transform: uppercase;
    letter-spacing: 1px;
    padding: 3px 10px;
    border: 1px solid rgba(255,56,56,0.25);
    border-radius: 4px;
    background: rgba(255,56,56,0.08);
}

.profile-header-info-bottom {
    display: flex;
    align-items: center;
    gap: 6px;
}

.profile-header-label {
    font-size: 11px;
    color: #666;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.profile-header-date {
    font-size: 13px;
    color: #aaa;
    font-weight: 600;
}

/* Stats Row - NO ICONS */
.profile-stats-row {
    display: flex;
    gap: 12px;
    margin-bottom: 4px;
}

.profile-stat-card {
    flex: 1;
    background: rgb(0 0 0 / 20%);
    border: 1px solid var(--main-border-color);
    border-radius: 10px;
    padding: 20px 12px 16px;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    transition: border-color 0.2s;
}

.profile-stat-card:hover {
    border-color: #252530;
}

.profile-stat-value {
    font-size: 20px;
    font-weight: 700;
    color: #fff;
    letter-spacing: 0.3px;
}

.profile-stat-value.negative {
    color: #ff3838;
}

.profile-stat-value.positive {
    color: #27ae60;
}

.profile-stat-label {
    font-size: 10px;
    color: #666;
    text-transform: uppercase;
    letter-spacing: 1px;
    font-weight: 600;
}

/* Profile Sections (Trade URL / Referral) */
#profile-modal .profile-section {
    margin-bottom: 0;
}

#profile-modal .profile-section label {
    display: block;
    font-weight: 700;
    font-size: 11px;
    color: #e0e0e0;
    margin-bottom: 6px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

#profile-modal .section-subtext {
    font-size: 12px;
    color: #888;
    margin-bottom: 10px;
}

#profile-modal .section-subtext a {
    color: #ff3838;
    text-decoration: none;
    font-weight: 600;
}

#profile-modal .section-subtext a:hover {
    text-decoration: underline;
}

#profile-modal .input-group {
    display: flex;
    gap: 10px;
}

#profile-modal .input-group input {
    flex: 1;
    padding: 10px 14px;
    background: rgb(0 0 0 / 20%);
    border: 1px solid var(--main-border-color);
    border-radius: 6px;
    color: #aaa;
    font-size: 13px;
    outline: none;
    transition: border-color 0.2s;
}

#profile-modal .input-group input:focus {
    border-color: #ff3838;
}

#profile-modal .input-group input::placeholder {
    color: #555;
}

#profile-modal .btn-save,
#profile-modal .btn-claim {
    background: #b93f3f;
    border: none;
    padding: 10px 22px;
    color: #fff;
    border-radius: 6px;
    font-weight: 700;
    font-size: 13px;
    cursor: pointer;
    transition: all 0.2s ease;
    white-space: nowrap;
}
#profile-modal .cf-history-cancel{
    background: none;
    border: 0;
    padding: 0;
    color: #46b2f3;
    font-weight: 700;
    cursor: pointer;
}
#profile-modal .btn-save:hover,
#profile-modal .btn-claim:hover {
    background: #d32f2f;
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(198,40,40,0.25);
}

/* History Tabs */
#profile-modal .history-tabs {
    display: flex;
    gap: 6px;
    margin-bottom: 14px;
    padding: 0 2px;
}

#profile-modal .history-tab {
    background: rgb(0 0 0 / 50%);
    border: 1px solid var(--main-border-color);
    border-radius: 6px;
    padding: 8px 16px;
    color: #888;
    font-size: 12px;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.2s ease;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    font-family: 'Segoe UI', system-ui, sans-serif;
}

#profile-modal .history-tab:hover {
    background: #141518;
    color: #aaa;
    border-color: #252530;
}

#profile-modal .history-tab.active {
    background: #b93f3f;
    color: #fff;
    border-color: #c62828;
    box-shadow: 0 4px 12px rgba(198, 40, 40, 0.2);
}

#profile-modal .history-tab .tab-count {
    color: inherit;
    opacity: 0.8;
    margin-left: 2px;
}

/* History Table */
#profile-modal .profile-history-scroll {
    max-height: 370px;
    overflow-y: auto;
    border: 1px solid #1a1c20;
    background: rgb(0, 0, 0, 0.2);
}

#profile-modal .profile-history table {
    width: 100%;
    border-collapse: collapse;
    font-size: 13px;
    margin-top: 0;
}

#profile-modal .profile-history th {
    background: rgb(10 10 15);
    color: #888;
    padding: 10px 14px;
    text-align: left;
    border-bottom: 1px solid var(--main-border-color);
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    position: sticky;
    top: 0;
    z-index: 2;
}

#profile-modal .profile-history td {
    padding: 10px 14px;
    border-bottom: 1px solid #1a1c20;
    color: #999;
    vertical-align: middle;
    font-size: 13px;
}

#profile-modal .profile-history tr:last-child td {
    border-bottom: none;
}

/* Game ID links in history */
#profile-modal .cf-history-game-id {
    color: #ca4c4c;
    cursor: pointer;
    text-decoration: none;
    font-weight: 700;
    transition: color 0.15s ease;
}

#profile-modal .cf-history-game-id:hover {
    color: #d32f2f;
    text-decoration: underline;
}

/* Winner name + chance in history */
#profile-modal .history-winner-name {
    color: #fff;
    font-weight: 600;
}

#profile-modal .history-winner-chance {
    color: #e0b020;
    font-weight: 700;
    margin-left: 4px;
}

/* Result colors - WIN = green, LOST = red */
#profile-modal .result-won {
    color: #2ecc71;
    font-weight: 700;
}

#profile-modal .result-lost {
    color: #ff3838;
    font-weight: 700;
}

/* Close button */
#profile-modal .profile-close-icon {
    position: absolute;
    top: 16px;
    right: 20px;
    color: #555;
    font-size: 20px;
    cursor: pointer;
    transition: color 0.2s;
    z-index: 10;
    width: 28px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 4px;
}

#profile-modal .profile-close-icon:hover {
    color: #fff;
    background: rgba(255,255,255,0.05);
}

/* Scrollbar for main content */
.profile-main::-webkit-scrollbar {
    width: 4px;
}

.profile-main::-webkit-scrollbar-track {
    background: transparent;
}

.profile-main::-webkit-scrollbar-thumb {
    background: #1a1c20;
    border-radius: 4px;
}

#maintenance-overlay{
    position: fixed;
    top: 0px;
    left: 0px;
    width: 100%;
    height: 100%;
    z-index: 999999;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    color: rgb(255, 255, 255);
    font-family: sans-serif;
    text-align: center;
    padding: 20px;
    background: linear-gradient(to bottom, #0f0f12a8 75%, #0f0f12 100%), url(../images/bg.png) center top / cover no-repeat;
}
#maintenance-overlay p{
    color: #b2bbbf;
    font-size: 16px;
    max-width: 400px;
    line-height: 1.5;
    margin-bottom: 24px;
}
#maintenance-overlay h1{
    font-size: 32px;
    margin-bottom: 12px;
    font-weight: 700;
}
#maintenance-overlay::before {
    content: '';
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(to bottom, rgba(10, 10, 12, 0.25) 20%, rgb(15 15 18 / 81%) 80%);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    z-index: -1;
    pointer-events: none;
}
#maint-logout-btn{
    background: #a83737;
    color: #fff;
    border: none;
    padding: 12px 28px;
    border-radius: 6px;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    margin-top: 8px;
    display: inline-flex;
    align-items: center;
    gap: 8px;
}
/* Responsive */
@media(max-width: 768px) {
    .profile-main {
        padding: 20px 16px;
        max-height: 60vh;
        overflow: auto;
    }
    .profile-user-header {
        gap: 10px;
    }
    .profile-header-avatar {
        width: 48px;
        height: 48px;
    }
    .profile-header-username {
        font-size: 14px;
    }
    .profile-stats-row {
        gap: 8px;
    }
    .profile-stat-card {
        padding: 16px 8px 12px;
    }
    .profile-stat-value {
        font-size: 16px;
    }
}

@media(max-width: 480px) {
    .profile-stats-row {
        flex-direction: column;
    }
    #profile-modal .input-group {
        flex-direction: column;
    }
    #profile-modal .btn-save,
    #profile-modal .btn-claim {
        width: 100%;
    }
}
/* ============================================================================
   JACKPOT VIEW MODAL - EXACT 1:1 MATCH TO IMAGE 1
   ============================================================================ */

#modal-jackpot-view .jp-view-modal {
    max-width: 600px;
    width: 95%;
    background: var(--main-background-color);
    border: 1px solid #1e1e26;
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 20px 60px rgba(0,0,0,0.6);
    display: flex;
    flex-direction: column;
    position: relative;
    height: auto;
    max-height: 80vh;
    animation: modalIn 0.2s ease-out;
    padding: 0;
}

/* Close X - top right corner */
.jp-view-close {
    position: absolute;
    top: 16px;
    right: 20px;
    background: none;
    border: none;
    color: #555;
    font-size: 20px;
    cursor: pointer;
    transition: color 0.2s;
    width: 28px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 4px;
    z-index: 10;
    padding: 0;
}

.jp-view-close:hover {
    color: #fff;
}

/* Header */
.jp-view-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    padding: 20px 24px 16px;
    border-bottom: 1px solid #1a1c20;
    background: rgb(0,0,0,10%);
}

.jp-view-header-left {
    display: flex;
    align-items: flex-start;
    gap: 14px;
}

.jp-view-icon {
    width: 40px;
    height: 40px;
    background: #c62828;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    margin-top: 2px;
}

.jp-view-icon svg {
    width: 20px;
    height: 20px;
    stroke: #fff;
}

.jp-view-header-text {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.jp-view-title {
    font-size: 20px;
    font-weight: 700;
    color: #fff;
    margin: 0;
    letter-spacing: 0.3px;
}

.jp-view-title span {
    color: #ff3838;
}

.jp-view-status.ended {
    display: inline-block;
    background: rgba(46, 204, 113, 0.12);
    border: 1px solid rgba(46, 204, 113, 0.25);
    color: #2ecc71;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    padding: 4px 10px;
    border-radius: 4px;
    width: fit-content;
}

.jp-view-header-right {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 2px;
    padding-right: 40px;
}

.jp-view-pot-label {
    font-size: 10px;
    color: #666;
    text-transform: uppercase;
    letter-spacing: 1px;
    font-weight: 600;
}

.jp-view-pot-value {
    font-size: 22px;
    font-weight: 800;
    color: #fff;
    letter-spacing: 0.3px;
}

.jp-view-pot-value .dollar {
    color: #ff3838;
    font-size: 18px;
    margin-right: 2px;
}
.jp-view-winner-label {
    font-size: 11px;
    color: #888;
    text-transform: uppercase;
    letter-spacing: 1px;
    font-weight: 700;
    margin-bottom: 12px;
    display: flex;
    align-items: center;
    gap: 6px;
}

.jp-winner-trophy {
    font-size: 14px;
}
.jp-winner-trophy svg{
    fill: #b93c3c;
}
/* Winner row - flat, no border, no background box */
.jp-view-winner-row {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 0;
}

.jp-view-winner-row img {
    width: 56px;
    height: 56px;
    object-fit: cover;
    flex-shrink: 0;
    border-radius: 50%;
}

.jp-view-winner-info {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.jp-view-winner-name {
    font-size: 16px;
    font-weight: 700;
    color: #fff;
}

.jp-view-winner-details {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
}

/* Amount: WHITE with red dollar sign */
.jp-view-winner-amount {
    font-size: 15px;
    font-weight: 700;
    color: #fff;
}

.jp-view-winner-amount .dollar {
    color: #ff3838;
    font-size: 13px;
    margin-right: 1px;
}

.jp-view-winner-chance {
    font-size: 12px;
    font-weight: 700;
    color: #e0b020;
    background: rgba(224, 176, 32, 0.08);
    border: 1px solid rgba(224, 176, 32, 0.25);
    padding: 4px 10px;
    border-radius: 4px;
}

.jp-view-winner-ticket {
    font-size: 12px;
    color: #b8b8b8;
    font-family: monospace;
}

/* Players Section */
.jp-view-players-section {
    flex: 1;
    overflow-y: auto;
    padding: 0 24px 16px;
    min-height: 0;
}

.jp-view-section-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 12px;
    padding: 10px;
    border-bottom: 1px solid #1a1c20;
}

.jp-view-section-title {
    font-size: 13px;
    font-weight: 700;
    color: #fff;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.jp-view-section-title span {
    color: #888;
    font-weight: 600;
    margin-left: 2px;
}

.jp-view-section-subtitle {
    font-size: 12px;
    color: #666;
    font-weight: 600;
}

.jp-view-players-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.jp-view-player-row::before {
    content: "";
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 3px;
    height: 36px;
    background: var(--user-color, #ff3838);
    border-radius: 0 3px 3px 0;
}

.jp-view-player-left {
    display: flex;
    align-items: center;
    gap: 12px;
    flex: 1;
    min-width: 0;
}

.jp-view-player-avatar {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    border: 2px solid var(--user-color, #ff3838);
    object-fit: cover;
    flex-shrink: 0;
}

.jp-view-player-name {
    font-size: 14px;
    font-weight: 600;
    color: #fff;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.jp-view-player-items-preview {
    display: flex;
    align-items: center;
    gap: 4px;
    margin-left: 8px;
}

.jp-view-player-item-icon {
    width: 28px;
    height: 28px;
    border-radius: 4px;
    background: #1a1c20;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

.jp-view-player-item-icon img {
    width: 90%;
    height: 90%;
    object-fit: contain;
}

.jp-view-player-right {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-shrink: 0;
}

/* Player deposit: WHITE with red dollar sign */
.jp-view-player-deposit {
    font-size: 14px;
    font-weight: 700;
    color: #fff;
}

.jp-view-player-deposit .dollar {
    color: #ff3838;
    font-size: 12px;
    margin-right: 1px;
}

.jp-view-player-chance {
    font-size: 12px;
    font-weight: 700;
    color: #aaa;
    background: #1a1c20;
    padding: 4px 10px;
    border-radius: 4px;
    min-width: 50px;
    text-align: center;
}

/* Footer */
.jp-view-footer {
    padding: 16px 24px 20px;
    border-top: 1px solid #1a1c20;
    flex-shrink: 0;
    background: rgb(0,0,0,10%);
}

.jp-view-footer-row {
    display: flex;
    gap: 12px;
    margin-bottom: 8px;
    font-size: 12px;
    line-height: 1.5;
}

.jp-view-footer-row:last-child {
    margin-bottom: 0;
}

.jp-view-footer-label {
    color: #555;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    font-family: 'Segoe UI', system-ui, sans-serif;
    font-size: 11px;
    min-width: 55px;
    flex-shrink: 0;
}

.jp-view-footer-val {
    color: #aaa;
    word-break: break-all;
    font-family: monospace;
}

.jp-view-verify {
    margin-top: 14px;
    text-align: center;
}

.jp-view-verify-link {
    color: #ff3838;
    text-decoration: none;
    font-size: 13px;
    font-weight: 600;
    transition: color 0.2s;
}

.jp-view-verify-link:hover {
    color: #d32f2f;
    text-decoration: underline;
}

/* Responsive */
@media(max-width: 600px) {
    .jp-view-header {
        padding: 16px 16px 12px;
    }
    .jp-view-winner-section {
        padding: 0 16px 16px;
    }
    .jp-view-players-section {
        padding: 0 16px 12px;
    }
    .jp-view-footer {
        padding: 12px 16px 16px;
    }
    .jp-view-title {
        font-size: 16px;
    }
    .jp-view-pot-value {
        font-size: 18px;
    }
    .jp-view-winner-row img {
        width: 48px;
        height: 48px;
    }
    .jp-view-winner-name {
        font-size: 14px;
    }
    .jp-view-winner-details {
        gap: 8px;
    }
    .jp-view-player-row {
        padding: 8px 12px;
    }
    .jp-view-player-avatar {
        width: 32px;
        height: 32px;
    }
    .jp-view-player-right {
        flex-direction: column;
        align-items: flex-end;
        gap: 4px;
    }
    .jp-view-footer-row {
        flex-direction: column;
        gap: 2px;
    }
}

/* ============================================================================
 FOOTER
   ============================================================================ */

.site-footer {
    background: var(--main-background-color);
    border-top: 1px solid var(--main-border-color);
    padding: 26px 20px 6px;
    flex-shrink: 0;
    width: 100%;
    margin-top: 40px;
    position: static;
    bottom: 0;
    overflow: hidden;
}

.footer-inner {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 40px;
    max-width: 1400px;
    margin: 0 auto;
}

.modal-footer .footer-left {
    flex: 1;
    min-width: 280px;
    max-width: 420px;
}

.footer-brand {
    font-size: 18px;
    font-weight: 800;
    color: #fff;
    letter-spacing: 0.5px;
    margin-bottom: 16px;
}

.footer-brand span {
    color: #ff3838;
}

.footer-disclaimer {
    font-size: 12px;
    color: #666;
    line-height: 1.6;
    margin-bottom: 10px;
}

.footer-center {
    display: flex;
    gap: 60px;
    flex-shrink: 0;
}

.footer-col {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.footer-col-title {
    font-size: 11px;
    font-weight: 700;
    color: #ff3838;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    margin-bottom: 4px;
}

.footer-link {
    display: flex;
    align-items: center;
    gap: 8px;
    color: #888;
    text-decoration: none;
    font-size: 13px;
    font-weight: 500;
    transition: color 0.2s ease;
    padding: 2px 0;
}

.footer-link:hover {
    color: #fff;
}

.footer-link svg {
    color: #888;
    transition: color 0.2s ease;
    flex-shrink: 0;
}

.footer-link:hover svg {
    color: #fff;
}

.modal-footer .footer-right {
    display: flex;
    align-items:center;
    gap:16px;
}

.footer-badge {
    display: flex;
    align-items: center;
    gap: 12px;
}

.footer-badge-text {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.footer-badge-text span:first-child {
    font-size: 12px;
    font-weight: 600;
    color: #aaa;
}

.footer-badge-text span:last-child {
    font-size: 11px;
    color: #666;
}

.footer-bottom {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 11px;
    padding-top: 16px;
    border-top: 1px solid #1a1c20;
    max-width: 1400px;
    margin-left: auto;
    margin-right: auto;
}

.footer-bottom-left {
    display: flex;
    align-items: center;
    gap: 12px;
}

.footer-18 {
    font-size: 12px;
    font-weight: 700;
    color: #e2564e;
    border: 1px solid rgba(226, 86, 78, 0.3);
    padding: 3px 10px;
    border-radius: 4px;
    background: rgba(226, 86, 78, 0.05);
}

.footer-responsible {
    font-size: 11px;
    color: #555;
}

.footer-copyright {
    font-size: 11px;
    color: #444;
}

.footer-contact-text {
    color: #aaa;
    font-size: 13px;
    line-height: 1.5;
    margin: 0 0 10px;
}
.footer-socials {
    display: flex;
    gap: 10px;
}
.footer-social-link {
    color: #aaa;
    transition: color 0.2s;
}
.footer-social-link:hover {
    color: #fff;
}
@media (max-width: 1000px) {
    .site-footer {
        padding: 32px 24px 16px;
    }
    .footer-inner {
        flex-wrap: wrap;
        gap: 32px;
    }
    .footer-left {
        max-width: 100%;
        flex: 1 1 100%;
    }
    .footer-center {
        flex: 1;
        gap: 40px;
    }
    .footer-right {
        flex-direction: row;
        gap: 24px;
    }
}

@media (max-width: 700px) {
    .footer-inner {
        flex-direction: column;
        gap: 28px;
    }
    .footer-center {
        gap: 32px;
    }
    .footer-right {
        flex-direction: row;
        gap: 20px;
    }
    .footer-bottom {
        flex-direction: column;
        gap: 10px;
        align-items: flex-start;
    }
}

@media (max-width: 400px) {
    .footer-center {
        flex-direction: column;
        gap: 20px;
    }
    .footer-right {
        flex-direction: column;
    }
}

/* ============================================================================
   STATIC PAGES (TOS / FAQ)
   ============================================================================ */

.page-container {
    max-width: 900px;
    margin: 0 auto;
    padding: 40px 20px;
    color: #e0e0e0;
}

.page-title {
    font-size: 32px;
    font-weight: 800;
    margin-bottom: 30px;
    color: #fff;
    border-bottom: 2px solid #e2564e;
    padding-bottom: 15px;
}

.page-section {
    margin-bottom: 30px;
}

.page-section-title {
    font-size: 20px;
    font-weight: 700;
    margin-bottom: 12px;
    color: #fff;
}

.page-section-text {
    line-height: 1.7;
    color: #aaa;
    font-size: 15px;
}

.page-footer-meta {
    margin-top: 40px;
    padding-top: 20px;
    border-top: 1px solid #333;
    color: #666;
    font-size: 13px;
}

/* FAQ Cards */
.faq-card {
    margin-bottom: 20px;
    background: var(--main-background-color);
    border: 1px solid var(--main-border-color);
    border-radius: 8px;
    padding: 20px;
}

.faq-card-title {
    font-size: 17px;
    font-weight: 700;
    margin-bottom: 10px;
    color: #fff;
}

.faq-card-text {
    line-height: 1.7;
    color: #aaa;
    font-size: 14px;
}

/* Responsive */
@media (max-width: 900px) {
    .page-container {
        padding: 24px 16px;
    }
    .page-title {
        font-size: 26px;
        margin-bottom: 24px;
        padding-bottom: 12px;
    }
    .page-section-title {
        font-size: 18px;
    }
    .page-section-text {
        font-size: 14px;
    }
    .faq-card {
        padding: 16px;
    }
    .faq-card-title {
        font-size: 15px;
    }
    .faq-card-text {
        font-size: 13px;
    }
}

@media (max-width: 600px) {
    .page-title {
        font-size: 22px;
    }
    .page-section-title {
        font-size: 16px;
    }
}

/* ============================================================================
   PROVABLY FAIR — UTILITY CLASSES (no inline styles)
   ============================================================================ */

.pf-icon {
    width: 20px;
    height: 20px;
    vertical-align: middle;
    margin-right: 6px;
    position: relative;
    top: -1px;
    flex-shrink: 0;
}

.pf-icon-sm {
    width: 16px;
    height: 16px;
    vertical-align: middle;
    margin-right: 4px;
    position: relative;
    top: -1px;
    flex-shrink: 0;
}

.pf-hidden {
    display: none !important;
}


/* ============================================================================
   PROVABLY FAIR — DYNAMIC CONTENT CLASSES (no inline styles)
   ============================================================================ */

.pf-loading.show { display: block; }

#pf-random-org-box { display: none; }
#pf-random-org-box.show { display: block; }

.pf-copy-wrap-vertical {
    flex-direction: column;
    align-items: flex-start;
    margin-top: 12px;
}

.pf-copy-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    margin-bottom: 8px;
}

.pf-textarea {
    width: 100%;
    background: #0f0f13;
    border: 1px solid #2a2b3a;
    border-radius: 8px;
    padding: 12px;
    font-family: monospace;
    font-size: 12px;
    resize: vertical;
    outline: none;
}

.pf-textarea-json {
    min-height: 120px;
    color: #838383;
}

.pf-textarea-sig {
    min-height: 80px;
    color: #838383;
    word-break: break-all;
}

[data-steamid] {
    cursor: pointer;
}
.cf-flip-item-box {
    position: relative;
}

@media(max-width: 900px) {
    .cf-view-modal {
        padding: 24px 18px 18px;
        max-height: 92vh;
    }
    .cf-view-top {
        padding: 16px 16px 0;
        margin-bottom: 20px;
        gap: 0;
        justify-content: space-between;
    }
    /* shrink the rolling coin so it stops overlapping */
    #cf-coin-flip-rolling {
        --cf-coin-size: 120px;
        --cf-container-height: 120px;
        --cf-speed-line-radius: 90px;
        --cf-particle-spread: 50px;
        --cf-flash-spread: 30px;
        --cf-result-font: 20px;
    }
    .cf-view-center {
        width: 110px;
        height: 110px;
        top: 10px;
    }
    .cf-view-inventory .cf-flip-item-box .cf-item-icon {
        height: 85px;
    }
}

@media(max-width: 600px) {
    .cf-view-modal {
        padding: 41px 12px 12px;
        border-radius: 10px;
    }
    .cf-view-top {
        padding: 8px 8px 0;
        margin-bottom: 14px;
        /* remove the huge gap & negative margin that caused overlap */
        gap: 8px;
    }
    .cf-view-avatar-wrap {
        width: 54px;
        height: 54px;
        padding: 2px;
    }
    .cf-view-avatar-wrap::before {
        inset: -1px;
        border-width: 1px;
    }
    .cf-view-avatar-inner {
        width: 48px;
        height: 48px;
    }
    .cf-view-chip {
        width: 26px;
        height: 26px;
        bottom: -4px;
        right: -8px;
    }
    .cf-view-avatar-name {
        font-size: 10px;
        margin-top: 4px;
    }
    /* coin scales down to fit */
    #cf-coin-flip-rolling {
        --cf-coin-size: 100px;
        --cf-container-height: 84px;
        --cf-speed-line-radius: 70px;
        --cf-particle-spread: 36px;
        --cf-flash-spread: 24px;
        --cf-result-font: 16px;
        --cf-particle-size: 3px;
        --cf-speed-line-height: 32px;
        --cf-speed-line-width: 1px;
    }
    .cf-view-center {
        width: 100px;
        height: 100px;
        top: -18px;
    }
    .cf-center-text {
        font-size: 10px;
        letter-spacing: 0.5px;
    }
    .cf-view-players-info {
        margin: 8px 0;
        padding: 0 8px;
        gap: 6px;
    }
    .cf-view-player-card {
        min-height: 40px;
        padding: 6px 10px;
    }
    .cf-view-stat-money {
        font-size: 11px;
        padding: 4px 8px;
    }
    .cf-view-stat-text {
        font-size: 11px;
    }
    .cf-view-inventories {
        padding: 0 8px;
        gap: 8px;
        min-height: 250px;
    }
    .cf-view-inventory {
        border-radius: 6px;
    }
    .cf-view-inventory > div {
        gap: 6px;
        padding: 6px;
    }
    .cf-view-inventory .cf-flip-item-box {
        min-height: 80px;
        padding: 6px 4px 4px;
    }
    .cf-view-inventory .cf-flip-item-box .cf-item-icon {
        height: 68px;
    }
    .cf-view-inventory .cf-view-item-price {
        font-size: 9px;
        padding: 1px 5px;
    }
    .cf-view-bottom-status {
        margin: 8px;
        font-size: 11px;
    }
    .cf-view-footer {
        padding: 8px;
    }
    .cf-view-footer-row {
        margin-bottom: 4px;
        gap: 4px;
    }
}

/* tiny screens (iPhone SE, etc.) */
@media(max-width: 400px) {
    .cf-view-top {
        gap: 4px;
        padding: 4px 4px 0;
    }
    .cf-view-avatar-wrap {
        width: 48px;
        height: 48px;
    }
    .cf-view-avatar-inner {
        width: 42px;
        height: 42px;
    }
    .cf-view-chip {
        width: 22px;
        height: 22px;
        right: -6px;
    }
    #cf-coin-flip-rolling {
        --cf-coin-size: 72px;
        --cf-container-height: 72px;
        --cf-speed-line-radius: 60px;
    }
    .cf-view-center {
        width: 72px;
        height: 72px;
    }
    .cf-view-inventory .cf-flip-item-box .cf-item-icon {
        height: 58px;
    }
}


/* ===== CSP-SAFE MODAL CLASSES ===== */
.modal-sm { max-width: 480px; padding: 30px; text-align: center; position: relative; }
.modal-winner { max-width:480px; padding:40px 32px; text-align:center; position:relative; background:#13131a; border:1px solid #1e1e26; border-radius:20px; box-shadow:0 20px 60px rgba(0,0,0,0.6); }

.modal-close-abs { position: absolute; top: 12px; right: 15px; background: none; border: none; color: #3a3a45; font-size: 20px; cursor: pointer; transition: 0.2s; }
.modal-close-abs:hover { color: #e0e0e0; }
.modal-close-abs-alt { position:absolute; top:12px; right:16px; background:none; border:none; color:#555; font-size:20px; cursor:pointer; transition:0.2s; }
.modal-close-abs-alt:hover { color: #e0e0e0; }

.text-light { color: #e0e0e0; }
.text-muted { color: #6b6b7a; }
.text-white { color: #fff; }
.text-red { color: #c44a3a; }
.text-green { color: #2ecc71; }
.text-dark-muted { color: #b0b0c0; }

.fs-14 { font-size: 14px; }
.fs-15 { font-size: 15px; }
.fs-20 { font-size: 20px; }
.fs-22 { font-size: 22px; }
.fw-700 { font-weight: 700; }

.mb-4 { margin-bottom: 4px; }
.mb-6 { margin-bottom: 6px; }
.mb-8 { margin-bottom: 8px; }
.mb-20 { margin-bottom: 20px; }
.mb-24 { margin-bottom: 24px; }
.mt-10 { margin-top: 10px; }
.mt-18 { margin-top: 18px; }

.svg-red { color: #c44a3a; }

.btn-offer { display:inline-block; background:#c44a3a; color:#e0e0e0; padding:12px 28px; border-radius:8px; text-decoration:none; font-weight:700; transition:0.2s; }
.btn-offer:hover { background:#d64a3a; }
.btn-offer.fs-14 { font-size: 14px; }

.winner-trophy { width:72px; height:72px; background:#1e1e26; border:2px solid #252530; border-radius:50%; display:flex; align-items:center; justify-content:center; margin:0 auto 20px; font-size:32px; box-shadow:0 0 20px rgba(226,86,78,0.15); }

/* Deposit error classes */
.deposit-error-title { color: #e2564e; font-weight: bold; margin-bottom: 10px; }
.deposit-success-title { color: #2ecc71; font-weight: bold; margin-bottom: 10px; }
.deposit-info-text { color: #888; font-size: 13px; }
.btn-deposit-error { background: #e2564e; color: white; padding: 8px 16px; border: none; border-radius: 4px; cursor: pointer; font-weight: bold; }
.btn-deposit-error:hover { background: #c44a3a; }

/* Winner panel */
.winner-panel-inner { display: flex; align-items: center; gap: 20px; width: 100%; }
.modal-close-btn {
    position: absolute;
    right: 5px;
    top: 5px;
    background: unset;
    color: white;
    border: unset;
}
/* ── UNIFIED WINNER MODAL (Jackpot + Coinflip) ── */
.winner-modal {
    position: relative;
    max-width: 420px;
    width: 100%;
    padding: 40px 36px 36px;
    text-align: center;
    background: #1a1a24;
    border: 1px solid #2a2a35;
    border-radius: 16px;
    box-shadow: 0 20px 60px rgba(0,0,0,0.6);
    animation: winnerPop 0.35s cubic-bezier(0.34, 1.56, 0.64, 1);
}
@keyframes winnerPop {
    0%   { transform: scale(0.9); opacity: 0; }
    100% { transform: scale(1); opacity: 1; }
}
.winner-modal-close {
    position: absolute;
    top: 14px;
    right: 16px;
    background: none;
    border: none;
    color: #555;
    font-size: 18px;
    cursor: pointer;
    line-height: 1;
    transition: color 0.2s;
    padding: 4px;
}
.winner-modal-close:hover { color: #e0e0e0; }
.winner-modal-title {
    margin: 0 0 10px 0;
    font-size: 24px;
    font-weight: 700;
    color: #e2564e;
    letter-spacing: 0.3px;
}
.winner-modal-message {
    margin: 0 0 24px 0;
    color: #a0a0b0;
    font-size: 15px;
    line-height: 1.5;
}
.winner-modal-message strong {
    color: #e0e0e0;
    font-weight: 600;
}
.winner-modal-btn {
    display: inline-block;
    background: #e2564e;
    color: #fff;
    padding: 12px 28px;
    border-radius: 10px;
    text-decoration: none;
    font-weight: 700;
    font-size: 14px;
    letter-spacing: 0.2px;
    transition: all 0.2s ease;
    box-shadow: 0 4px 16px rgba(226, 86, 78, 0.3);
}
.winner-modal-btn:hover {
    background: #c9443d;
    transform: translateY(-1px);
    box-shadow: 0 6px 20px rgba(226, 86, 78, 0.4);
}
.winner-modal-waiting {
    color: #666;
    font-size: 13px;
    margin: 18px 0 0 0;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}
.winner-modal-waiting::before {
    content: "";
    width: 14px;
    height: 14px;
    border: 2px solid #333;
    border-top-color: #888;
    border-radius: 50%;
    animation: winnerSpin 0.8s linear infinite;
}
@keyframes winnerSpin {
    to { transform: rotate(360deg); }
}