/* combat-popups.css - Combat countdown, create game, room detail, lobby, waiting pill, my games */
/* Big countdown (<10s) */
.combat-countdown{display:none;position:fixed;top:0;left:0;right:0;bottom:0;z-index:56;background:rgba(13,14,18,0.85);text-align:center;align-items:center;justify-content:center;flex-direction:column}
.combat-countdown.visible{display:flex}
.combat-cd-num{font-size:110px;font-weight:800;color:#f6465d;font-family:'Fira Code',monospace;line-height:1;text-shadow:0 0 80px rgba(246,70,93,0.4);animation:cdPulse 1s ease infinite}
@keyframes cdPulse{0%,100%{transform:scale(1)}50%{transform:scale(1.05)}}
.combat-cd-label{font-size:15px;color:#5E6673;text-transform:uppercase;letter-spacing:2px;margin-top:10px}
.combat-go{font-size:84px;font-weight:800;color:#0ecb81;font-family:'Plus Jakarta Sans',sans-serif;text-shadow:0 0 80px rgba(14,203,129,0.5);animation:goFlash 0.5s ease}
@keyframes goFlash{0%{transform:scale(2);opacity:0}50%{transform:scale(1.1);opacity:1}100%{transform:scale(1)}}

/* Create Game button */
.combat-create-trigger{display:flex;align-items:center;gap:6px;font-size:13px;font-weight:700;color:#0a0b0e;background:#0ecb81;border:none;padding:8px 20px;border-radius:8px;cursor:pointer;transition:all 0.2s;text-transform:uppercase;letter-spacing:0.5px;margin-left:auto;white-space:nowrap;flex-shrink:0}
.combat-create-trigger:hover{background:#2dd695;transform:translateY(-1px);box-shadow:0 4px 16px rgba(14,203,129,0.25)}
.combat-create-trigger .plus{font-size:16px;font-weight:800;line-height:1}
/* Create Game popup */
.combat-create-overlay{position:fixed;top:0;left:0;right:0;bottom:0;z-index:60;display:none;align-items:center;justify-content:center;background:rgba(0,0,0,0.85);user-select:text;-webkit-user-select:text;padding:96px 0 48px}
.combat-create-overlay.visible{display:flex}
.combat-create-popup{width:680px;max-width:95%;max-height:100%;background:#0d0e12;border:1.5px solid rgba(14,203,129,0.25);border-radius:16px;overflow:hidden;display:flex;flex-direction:column;animation:jackpotIn 0.35s cubic-bezier(0.34,1.56,0.64,1);box-shadow:0 0 80px rgba(14,203,129,0.08),0 24px 48px rgba(0,0,0,0.7);position:relative}
.combat-create-topband{height:3px;background:linear-gradient(90deg,transparent,#0ecb81,#FCD535,#0ecb81,transparent);flex-shrink:0}
.combat-create-close{position:absolute;top:14px;right:16px;font-size:16px;color:#5E6673;cursor:pointer;z-index:2;transition:all 0.15s;line-height:1;width:32px;height:32px;display:flex;align-items:center;justify-content:center;border-radius:50%}
.combat-create-close:hover{color:#EAECEF;background:rgba(234,236,239,0.08)}
.combat-create-scroll{flex:1;overflow-y:auto;overflow-x:hidden;padding:20px 24px 8px;scrollbar-width:thin;scrollbar-color:#2B2F36 transparent}
.combat-create-scroll::-webkit-scrollbar{width:5px}
.combat-create-scroll::-webkit-scrollbar-thumb{background:#2B2F36;border-radius:3px}
.combat-create-head{font-size:22px;font-weight:800;color:#EAECEF;margin-bottom:4px}
.combat-create-sub{font-size:12px;color:#5E6673;margin-bottom:20px}
.combat-create-field{margin-bottom:16px}
.combat-create-label{font-size:11px;font-weight:600;color:#5E6673;text-transform:uppercase;letter-spacing:0.5px;margin-bottom:6px}
.combat-create-row{display:flex;gap:12px}
.combat-create-row .combat-create-field{flex:1;min-width:0}
@media(max-width:768px),((pointer:coarse) and (hover:none) and (max-width:1024px)){.combat-create-row{flex-direction:column;gap:0}}
.combat-create-tri-row{gap:8px}
.combat-create-tri-row .combat-create-dd-btn,.combat-create-tri-row .combat-create-input{padding:10px 8px;font-size:13px}
.combat-create-tri-row .combat-create-pair-wrap{position:relative}
.combat-create-input{width:100%;background:#111318;border:1px solid #2B2F36;border-radius:8px;padding:10px 12px;font-size:14px;color:#EAECEF;font-family:'Fira Code',monospace;outline:none;transition:border-color 0.15s;box-sizing:border-box}
.combat-create-input:focus{border-color:#0ecb81}
.combat-create-input::placeholder{color:#5E6673}
.combat-create-input.error{border-color:#f6465d}
.combat-create-error{font-size:11px;color:#f6465d;margin-top:4px;display:none}
.combat-create-error.show{display:block}
.combat-create-select{width:100%;background:#111318;border:1px solid #2B2F36;border-radius:8px;padding:10px 12px;font-size:14px;color:#EAECEF;font-family:'Fira Code',monospace;outline:none;transition:border-color 0.15s;appearance:none;-webkit-appearance:none;cursor:pointer;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%235E6673' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 12px center;box-sizing:border-box}
.combat-create-select:focus{border-color:#0ecb81}
.combat-create-toggle-row{display:flex;align-items:center;gap:0;background:#111318;border-radius:8px;padding:3px;border:1px solid #2B2F36}
.combat-create-toggle{flex:1;padding:6px 14px;border-radius:6px;background:transparent;border:none;font-size:12px;font-weight:600;color:#5E6673;text-align:center;cursor:pointer;transition:color 0.2s ease,background 0.3s ease;font-family:'Plus Jakarta Sans',sans-serif;letter-spacing:0.3px}
.combat-create-toggle:hover{color:#EAECEF}
.combat-create-toggle.active{color:#EAECEF;background:#1E2026}
.combat-create-icon-picker{display:grid;grid-template-columns:repeat(9,1fr);gap:6px}
.combat-create-icon-opt{aspect-ratio:1;border-radius:8px;background:#111318;border:1px solid #2B2F36;display:flex;align-items:center;justify-content:center;font-size:18px;cursor:pointer;transition:all 0.15s;overflow:hidden}
.combat-create-icon-opt:hover{border-color:#5E6673}
.combat-create-icon-opt.active{border-color:#FCD535;background:rgba(252,213,53,0.08)}
.combat-create-icon-opt.upload{font-size:22px;color:#5E6673;font-weight:300}
.combat-create-icon-opt.upload:hover{color:#FCD535;border-color:#FCD535}
.combat-create-icon-opt img{width:100%;height:100%;object-fit:cover;border-radius:6px}
.combat-create-banner-upload{aspect-ratio:3/1;border-radius:10px;overflow:hidden;cursor:pointer;position:relative;transition:all 0.15s}
.combat-create-banner-placeholder{width:100%;height:100%;border:2px dashed #2B2F36;border-radius:10px;display:flex;flex-direction:column;align-items:center;justify-content:center;transition:all 0.15s;box-sizing:border-box;background:#111318}
.combat-create-banner-upload:hover .combat-create-banner-placeholder{border-color:#5E6673}
.combat-create-banner-preview{width:100%;height:100%;position:relative;border-radius:10px;overflow:hidden}
.combat-create-banner-preview img{width:100%;height:100%;object-fit:cover;display:block}
.combat-create-banner-remove{position:absolute;top:8px;right:8px;width:24px;height:24px;border-radius:50%;background:rgba(0,0,0,0.7);color:#EAECEF;display:flex;align-items:center;justify-content:center;font-size:12px;cursor:pointer;transition:all 0.15s;z-index:2}
.combat-create-banner-remove:hover{background:rgba(246,70,93,0.8)}
.icon-crop-overlay{position:fixed;top:0;left:0;right:0;bottom:0;background:rgba(0,0,0,0.85);z-index:2000;display:none;align-items:center;justify-content:center;flex-direction:column;gap:16px}
.icon-crop-overlay.visible{display:flex}
.icon-crop-box{position:relative;background:repeating-conic-gradient(#1a1c22 0% 25%,#12141a 0% 50%) 0 0/16px 16px;touch-action:none;user-select:none;-webkit-user-select:none}
.icon-crop-box img{display:block;pointer-events:none;position:relative;z-index:0}
.icon-crop-shade{position:absolute;background:rgba(0,0,0,0.6);z-index:1;pointer-events:none}
.icon-crop-region{position:absolute;border:2px solid #FCD535;border-radius:2px;cursor:grab;touch-action:none;z-index:2;box-sizing:border-box}
.icon-crop-region:active{cursor:grabbing}
.icon-crop-region::after{content:'';position:absolute;inset:0;background:repeating-linear-gradient(0deg,transparent,transparent calc(33.33% - 0.5px),rgba(252,213,53,0.2) calc(33.33% - 0.5px),rgba(252,213,53,0.2) calc(33.33% + 0.5px),transparent calc(33.33% + 0.5px)),repeating-linear-gradient(90deg,transparent,transparent calc(33.33% - 0.5px),rgba(252,213,53,0.2) calc(33.33% - 0.5px),rgba(252,213,53,0.2) calc(33.33% + 0.5px),transparent calc(33.33% + 0.5px));pointer-events:none}
.icon-crop-handle{position:absolute;width:28px;height:28px;z-index:3;touch-action:none}
.icon-crop-handle::before{content:'';position:absolute;background:#FCD535;border-radius:1px}
.icon-crop-handle.tl{top:-4px;left:-4px;cursor:nw-resize}.icon-crop-handle.tl::before{top:4px;left:4px;width:16px;height:3px}.icon-crop-handle.tl::after{content:'';position:absolute;top:4px;left:4px;width:3px;height:16px;background:#FCD535;border-radius:1px}
.icon-crop-handle.tr{top:-4px;right:-4px;cursor:ne-resize}.icon-crop-handle.tr::before{top:4px;right:4px;width:16px;height:3px}.icon-crop-handle.tr::after{content:'';position:absolute;top:4px;right:4px;width:3px;height:16px;background:#FCD535;border-radius:1px}
.icon-crop-handle.bl{bottom:-4px;left:-4px;cursor:sw-resize}.icon-crop-handle.bl::before{bottom:4px;left:4px;width:16px;height:3px}.icon-crop-handle.bl::after{content:'';position:absolute;bottom:4px;left:4px;width:3px;height:16px;background:#FCD535;border-radius:1px}
.icon-crop-handle.br{bottom:-4px;right:-4px;cursor:se-resize}.icon-crop-handle.br::before{bottom:4px;right:4px;width:16px;height:3px}.icon-crop-handle.br::after{content:'';position:absolute;bottom:4px;right:4px;width:3px;height:16px;background:#FCD535;border-radius:1px}
.icon-crop-title{font-size:16px;font-weight:700;color:#EAECEF;letter-spacing:0.5px}
.icon-crop-hint{font-size:11px;color:#848E9C}
.icon-crop-btns{display:flex;gap:10px}
.icon-crop-btns button{padding:10px 28px;border-radius:8px;font-size:13px;font-weight:700;cursor:pointer;border:none;letter-spacing:0.5px;transition:all 0.15s}
.icon-crop-cancel{background:#1E2026;color:#EAECEF}
.icon-crop-cancel:hover{background:#2B2F36}
.icon-crop-confirm{background:#FCD535;color:#0a0b0e}
.icon-crop-confirm:hover{background:#e5c130}
.combat-create-dd-wrap{position:relative}
.combat-create-dd-btn{width:100%;background:#111318;border:1px solid #2B2F36;border-radius:8px;padding:10px 12px;font-size:14px;color:#EAECEF;font-family:'Fira Code',monospace;cursor:pointer;transition:border-color 0.15s;box-sizing:border-box;display:flex;align-items:center;justify-content:space-between}
.combat-create-dd-btn::after{content:'\25BE';color:#5E6673;margin-left:8px;flex-shrink:0}
.combat-create-dd-btn:hover{border-color:#5E6673}
.combat-create-dd-drop{display:none;position:absolute;top:100%;left:0;right:0;z-index:10;background:#111318;border:1px solid #2B2F36;border-radius:8px;padding:6px;margin-top:4px;max-height:220px;overflow-y:auto;box-shadow:0 8px 24px rgba(0,0,0,0.5);scrollbar-width:thin;scrollbar-color:#2B2F36 transparent}
.combat-create-dd-drop.open{display:block}
.combat-create-dd-item{padding:9px 10px;border-radius:6px;font-size:13px;color:#EAECEF;font-family:'Fira Code',monospace;cursor:pointer;transition:background 0.1s}
.combat-create-dd-item:hover{background:#1E2026}
.combat-create-dd-item.active{color:#0ecb81;background:rgba(14,203,129,0.08)}
.combat-create-pair-wrap{position:relative}
.combat-create-pair-btn{display:flex;align-items:center;justify-content:space-between}
.combat-create-pair-btn::after{content:'\25BE';color:#5E6673;margin-left:8px}
.combat-create-pair-drop{display:none;position:absolute;top:100%;left:0;right:0;z-index:10;background:#111318;border:1px solid #2B2F36;border-radius:8px;padding:8px;margin-top:4px;max-height:200px;overflow-y:auto;box-shadow:0 8px 24px rgba(0,0,0,0.5)}
.combat-create-pair-drop.open{display:block}
.combat-create-pair-list{display:flex;flex-direction:column;gap:2px}
.combat-create-pair-item{padding:8px 10px;border-radius:6px;font-size:13px;color:#EAECEF;font-family:'Fira Code',monospace;cursor:pointer;transition:background 0.1s}
.combat-create-pair-item:hover{background:#1E2026}
.combat-create-pair-item.active{color:#0ecb81;background:rgba(14,203,129,0.08)}
.combat-create-input-suffix{position:relative}
.combat-create-input-suffix .combat-create-input{padding-right:50px}
.combat-create-suffix{position:absolute;right:12px;top:50%;transform:translateY(-50%);font-size:12px;font-weight:700;color:#5E6673;pointer-events:none}
.combat-create-spinner{display:flex;align-items:center;gap:0;background:#111318;border:1px solid #2B2F36;border-radius:8px;overflow:hidden}
.combat-create-spinner .combat-create-input{border:none;border-radius:0;text-align:center;flex:1;-moz-appearance:textfield}
.combat-create-spinner .combat-create-input::-webkit-inner-spin-button,.combat-create-spinner .combat-create-input::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}
.combat-create-spin-btn{width:32px;height:42px;display:flex;align-items:center;justify-content:center;color:#5E6673;font-size:18px;font-weight:700;cursor:pointer;transition:all 0.15s;flex-shrink:0;user-select:none;background:transparent}
.combat-create-spin-btn:hover{color:#EAECEF;background:rgba(234,236,239,0.06)}
.combat-create-spin-btn:active{background:rgba(14,203,129,0.12);color:#0ecb81}
.combat-create-hint{font-size:11px;color:#5E6673;margin-top:4px}
.combat-create-usd{font-size:11px;color:#848E9C;margin-top:4px}
.combat-create-dt-wrap{display:flex;gap:6px;align-items:stretch;flex-wrap:wrap}
.combat-create-dt-col{display:flex;flex-direction:column;gap:4px;flex:1;min-width:0}
.combat-create-dt-col.date{flex:2}
.combat-create-dt-col.time{flex:1}
.combat-create-dt-label{font-size:10px;color:#5E6673;text-transform:uppercase;letter-spacing:0.5px}
.combat-create-dt-wheel{display:flex;flex-direction:column;align-items:center;background:#111318;border:1px solid #2B2F36;border-radius:8px;overflow:hidden}
.combat-create-dt-wheel .cg-dt-up,.combat-create-dt-wheel .cg-dt-down{width:100%;height:24px;display:flex;align-items:center;justify-content:center;color:#5E6673;cursor:pointer;transition:all 0.15s;font-size:14px;user-select:none}
.combat-create-dt-wheel .cg-dt-up:hover,.combat-create-dt-wheel .cg-dt-down:hover{color:#EAECEF;background:rgba(234,236,239,0.06)}
.combat-create-dt-val{font-size:14px;font-weight:600;color:#EAECEF;font-family:'Fira Code',monospace;padding:6px 4px;text-align:center;min-width:0}
.combat-create-footer{padding:16px 24px;background:#0d0e12;border-top:1px solid #1E2026;flex-shrink:0}
.combat-create-submit{width:100%;padding:12px;border-radius:8px;font-size:14px;font-weight:800;text-transform:uppercase;letter-spacing:1px;cursor:pointer;transition:all 0.2s;border:none;text-align:center}
.combat-create-submit.connect{color:#EAECEF;background:linear-gradient(135deg,#0ecb81,#0aa06a)}
.combat-create-submit.connect:hover{box-shadow:0 4px 20px rgba(14,203,129,0.4)}
.combat-create-submit.create{color:#0a0b0e;background:linear-gradient(135deg,#FCD535,#e5c130)}
.combat-create-submit.create:hover{box-shadow:0 4px 20px rgba(252,213,53,0.4)}
.combat-create-submit.disabled{color:#5E6673;background:#1E2026;cursor:not-allowed;opacity:0.6}

/* Room Detail popup overlay */
.combat-detail-overlay{position:fixed;top:0;left:0;right:0;bottom:0;z-index:60;display:none;align-items:center;justify-content:center;background:rgba(0,0,0,0.85);user-select:text;-webkit-user-select:text}
.combat-detail-overlay.visible{display:flex}
.combat-detail{width:680px;max-width:95%;max-height:85%;background:#0d0e12;border:1.5px solid rgba(246,70,93,0.25);border-radius:16px;overflow:hidden;display:flex;flex-direction:column;animation:jackpotIn 0.35s cubic-bezier(0.34,1.56,0.64,1);box-shadow:0 0 80px rgba(246,70,93,0.08),0 24px 48px rgba(0,0,0,0.7)}
.combat-detail-topband{height:3px;background:linear-gradient(90deg,transparent,#f6465d,#FCD535,#f6465d,transparent);flex-shrink:0}
.combat-detail-close{position:absolute;top:14px;right:16px;font-size:16px;color:#5E6673;cursor:pointer;z-index:2;transition:all 0.15s;line-height:1;width:32px;height:32px;display:flex;align-items:center;justify-content:center;border-radius:50%}
.combat-detail-close:hover{color:#EAECEF;background:rgba(234,236,239,0.08)}
.combat-detail-scroll{flex:1;overflow-y:auto;overflow-x:hidden;scrollbar-width:thin;scrollbar-color:#2B2F36 transparent}
.combat-detail-scroll::-webkit-scrollbar{width:5px}
.combat-detail-scroll::-webkit-scrollbar-thumb{background:#2B2F36;border-radius:3px}
.combat-detail-banner{width:100%;aspect-ratio:3/1;overflow:hidden;position:relative;display:none}
.combat-detail-banner.visible{display:block}
.combat-detail-banner img{width:100%;height:100%;object-fit:cover;display:block}
.combat-detail-banner::after{content:'';position:absolute;bottom:0;left:0;right:0;height:60%;background:linear-gradient(to top,#0d0e12,transparent);pointer-events:none}
.combat-detail-header{padding:20px 24px 16px;display:flex;gap:16px;align-items:center}
.combat-detail-icon{width:56px;height:56px;border-radius:14px;display:flex;align-items:center;justify-content:center;font-size:28px;flex-shrink:0}
.combat-detail-info{flex:1}
.combat-detail-name{font-size:22px;font-weight:800;color:#FCD535;font-family:'Plus Jakarta Sans',sans-serif;line-height:1.2}
.combat-detail-type{font-size:12px;color:#848E9C;margin-top:3px;text-transform:uppercase;letter-spacing:0.5px;display:flex;align-items:center}
.combat-detail-status{display:inline-block;font-size:11px;font-weight:700;padding:3px 10px;border-radius:4px;margin-top:8px}
.combat-detail-status.filling{color:#0ecb81;background:rgba(14,203,129,0.12);border:1px solid rgba(14,203,129,0.2)}
.combat-detail-status.starting{color:#FCD535;background:rgba(252,213,53,0.12);border:1px solid rgba(252,213,53,0.2);animation:livePulse 1.5s ease infinite}
.combat-detail-status.ended{color:#f6465d;background:rgba(246,70,93,0.12);border:1px solid rgba(246,70,93,0.2)}
.combat-detail-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;padding:0 24px 20px}
@media(max-width:768px),((pointer:coarse) and (hover:none) and (max-width:1024px)){.combat-detail-stats{grid-template-columns:repeat(2,1fr)}}
.combat-detail-stat{background:#111318;border:1px solid #1E2026;border-radius:10px;padding:14px;display:flex;flex-direction:column;gap:4px;position:relative;overflow:visible}
.combat-detail-stat:has(.combat-detail-rush-tooltip){z-index:1}
.combat-detail-stat:hover{z-index:2}
.combat-detail-stat-label{font-size:10px;color:#5E6673;text-transform:uppercase;letter-spacing:0.5px}
.combat-detail-stat-val{font-size:20px;font-weight:800;color:#EAECEF;font-family:'Fira Code',monospace}
.combat-detail-stat-val.green{color:#0ecb81}
.combat-detail-stat-val.gold{color:#FCD535}
.combat-detail-stat-val.red{color:#f6465d}
.combat-detail-divider{height:1px;margin:0 24px;background:linear-gradient(90deg,transparent,#2B2F36,transparent)}
.combat-detail-payout{padding:0 24px;max-height:0;overflow:hidden;transition:max-height 0.35s ease,padding 0.35s ease}
.combat-detail-payout.open{max-height:600px;padding:12px 24px 16px}
.combat-detail-payout-title{font-size:14px;font-weight:700;color:#EAECEF;margin-bottom:12px;display:flex;align-items:center;justify-content:space-between}
.combat-detail-payout-title span{font-size:12px;color:#5E6673;font-weight:500}
.combat-detail-prize-toggle{display:inline-flex;align-items:center;justify-content:center;cursor:pointer;opacity:0.7;transition:opacity 0.15s;margin-left:6px;vertical-align:middle;flex-shrink:0}
.combat-detail-prize-toggle:hover{opacity:1}
.combat-detail-prize-toggle svg{width:18px;height:18px;display:block}
.combat-detail-payout-table{width:100%;border-collapse:collapse}
.combat-detail-payout-table th{font-size:10px;color:#5E6673;text-transform:uppercase;letter-spacing:0.5px;padding:6px 10px;text-align:left;border-bottom:1px solid #1E2026;font-weight:600}
.combat-detail-payout-table th:last-child,.combat-detail-payout-table td:last-child{text-align:right}
.combat-detail-payout-table td{font-size:13px;padding:8px 10px;border-bottom:1px solid rgba(30,32,38,0.5);color:#EAECEF;font-family:'Fira Code',monospace}
.combat-detail-payout-table tr:last-child td{border-bottom:none}
.combat-detail-payout-table tr.payout-top td{color:#FCD535;font-weight:700}
.combat-detail-payout-table .payout-place{font-weight:600}
.combat-detail-payout-table .payout-pct{color:#0ecb81;font-weight:600}
.combat-detail-payout-table .payout-amt{color:#EAECEF;font-weight:700}
.combat-detail-payout-bar{height:4px;background:#1E2026;border-radius:2px;margin-top:2px;overflow:hidden}
.combat-detail-payout-bar-fill{height:100%;border-radius:2px;background:linear-gradient(90deg,#FCD535,#0ecb81)}
.combat-detail-section{padding:16px 24px}
.combat-detail-section.hidden-empty{display:none}
.combat-detail-section.slide-in{display:block;animation:detailSlideIn 0.3s ease}
@keyframes detailSlideIn{from{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:translateY(0)}}
.combat-detail-section-title{font-size:14px;font-weight:700;color:#EAECEF;margin-bottom:12px;display:flex;align-items:center;justify-content:space-between}
.combat-detail-section-title span{font-size:12px;color:#5E6673;font-weight:500}
.combat-detail-waiting-badge{position:absolute;top:8px;right:8px;font-size:9px;font-weight:800;color:#FCD535;background:rgba(252,213,53,0.12);border:1px solid rgba(252,213,53,0.2);padding:2px 6px;border-radius:4px;letter-spacing:0.5px;animation:livePulse 1.5s ease infinite}
.combat-detail-players-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:8px}
.combat-detail-rush-info{display:inline-flex;align-items:center;justify-content:center;width:16px;height:16px;border-radius:50%;border:1.5px solid #5E6673;font-size:10px;font-weight:700;color:#5E6673;cursor:help;margin-left:6px;vertical-align:middle;position:relative}
.combat-detail-rush-info:hover{border-color:#EAECEF;color:#EAECEF}
.combat-detail-rush-tooltip{display:none;position:absolute;bottom:calc(100% + 8px);right:0;background:#1E2026;border:1px solid #2B2F36;border-radius:6px;padding:8px 12px;font-size:11px;font-weight:500;color:#EAECEF;white-space:normal;min-width:180px;max-width:220px;z-index:100;box-shadow:0 4px 12px rgba(0,0,0,0.4)}
.combat-detail-rush-info:hover .combat-detail-rush-tooltip{display:block}
.combat-detail-prize-toggle:hover .combat-detail-rush-tooltip{display:block}
.combat-detail-player{display:flex;align-items:center;gap:10px;padding:10px 12px;background:#111318;border:1px solid #1E2026;border-radius:8px;transition:opacity 0.35s ease,transform 0.35s ease}
.combat-detail-player.player-fade-in{animation:playerIn 0.35s ease forwards}
.combat-detail-player.player-fade-out{opacity:0;transform:translateX(-12px);pointer-events:none}
@keyframes playerIn{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}
.combat-detail-player-av{width:28px;height:28px;border-radius:50%;flex-shrink:0;object-fit:cover}
.combat-detail-player-name{font-size:13px;font-weight:600;color:#EAECEF;flex:1}
.combat-detail-player-badge{font-size:10px;color:#5E6673;font-weight:500}
.combat-detail-join-bar{padding:16px 24px;background:#0d0e12;border-top:1px solid #1E2026;display:flex;align-items:center;justify-content:center;flex-shrink:0}
.combat-detail-join-btn{font-size:14px;font-weight:800;color:#EAECEF;background:linear-gradient(135deg,#0ecb81,#0aa06a);padding:12px 0;border-radius:8px;text-transform:uppercase;letter-spacing:1px;cursor:pointer;transition:all 0.2s;border:none;width:100%;text-align:center}
.combat-detail-join-btn:hover{transform:translateY(-1px);box-shadow:0 4px 20px rgba(14,203,129,0.4)}

/* Finished room results */
.combat-detail-results{display:none;padding:16px 24px}
.combat-detail-results.visible{display:block}
.combat-detail-winner-card{display:flex;align-items:center;gap:14px;padding:16px;background:linear-gradient(135deg,rgba(252,213,53,0.08),rgba(14,203,129,0.06));border:1px solid rgba(252,213,53,0.2);border-radius:12px;margin-bottom:16px}
.combat-detail-winner-icon{width:40px;height:40px;display:flex;align-items:center;justify-content:center;flex-shrink:0}
.combat-detail-winner-info{flex:1;min-width:0}
.combat-detail-winner-label{font-size:10px;font-weight:800;color:#FCD535;letter-spacing:1.5px;text-transform:uppercase;margin-bottom:4px}
.combat-detail-winner-name{font-size:14px;font-weight:700;color:#EAECEF;display:flex;align-items:center;gap:8px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.combat-detail-winner-name img{width:22px;height:22px;border-radius:50%;flex-shrink:0}
.combat-detail-winner-reward{font-size:16px;font-weight:800;color:#0ecb81;font-family:'Fira Code',monospace;margin-top:4px}
.combat-detail-results-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:12px}
.combat-detail-results-title{font-size:14px;font-weight:700;color:#EAECEF}
.combat-detail-results-count{font-size:11px;color:#5E6673;font-weight:500}
.combat-detail-results-more{text-align:center;padding:10px;font-size:12px;font-weight:600;color:#FCD535;cursor:pointer;border:1px solid rgba(252,213,53,0.15);border-radius:8px;margin-top:8px;transition:all 0.15s}
.combat-detail-results-more:hover{background:rgba(252,213,53,0.06);border-color:rgba(252,213,53,0.3)}
.combat-detail-results-list{max-height:240px;overflow-y:auto;scrollbar-width:thin;scrollbar-color:#2B2F36 transparent}
.combat-detail-results-list::-webkit-scrollbar{width:4px}
.combat-detail-results-list::-webkit-scrollbar-thumb{background:#2B2F36;border-radius:3px}
.combat-detail-result-row{display:flex;align-items:center;gap:8px;padding:8px 10px;background:#111318;border-radius:8px;margin-bottom:3px}
.combat-detail-result-row.is-you{background:rgba(252,213,53,0.06);border:1px solid rgba(252,213,53,0.15)}
.combat-detail-result-row.is-winner{background:rgba(14,203,129,0.06);border:1px solid rgba(14,203,129,0.15)}
.combat-detail-result-rank{font-size:12px;font-weight:700;color:#FCD535;width:28px;font-family:'Fira Code',monospace;flex-shrink:0}
.combat-detail-result-av{width:24px;height:24px;border-radius:50%;object-fit:cover;flex-shrink:0}
.combat-detail-result-name{flex:1;font-size:12px;color:#EAECEF;font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.combat-detail-result-reward{font-size:12px;font-weight:700;color:#848E9C;font-family:'Fira Code',monospace;flex-shrink:0}
.combat-detail-result-reward.positive{color:#0ecb81}
.combat-detail-result-reward.loser{color:#f6465d}

/* Share & Invite section */
.combat-detail-share{padding:0 24px 16px}
.combat-detail-share-btns{display:grid;grid-template-columns:1fr 1fr 1fr;gap:8px}
.combat-detail-share-btn{display:flex;align-items:center;justify-content:center;gap:6px;padding:10px 0;border-radius:8px;font-size:11px;font-weight:600;font-family:'Plus Jakarta Sans',sans-serif;color:#848E9C;background:#111318;border:1px solid #2B2F36;cursor:pointer;transition:all 0.15s;text-decoration:none;white-space:nowrap}
.combat-detail-share-btn:hover{color:#EAECEF;border-color:#5E6673;background:#1E2026}
.combat-detail-share-btn.copied{color:#0ecb81;border-color:rgba(14,203,129,0.3);background:rgba(14,203,129,0.06)}
.combat-detail-share-btn svg{flex-shrink:0}

/* My Games history */
.combat-my-games{display:none;flex:1;flex-direction:column;padding:0;background:#0d0e12;border:1px solid rgba(246,70,93,0.12);border-radius:8px;overflow:visible;position:relative}
.combat-my-games.visible{display:flex}
.combat-my-games::-webkit-scrollbar{width:5px}
.combat-my-games::-webkit-scrollbar-thumb{background:#2B2F36;border-radius:3px}
.combat-my-games-empty{text-align:center;padding:60px 24px;color:#5E6673;font-size:13px}
.combat-my-games-empty:only-child{background:none;border:none;box-shadow:none}
.combat-my-games:has(.combat-my-games-empty:only-child){background:none;border:none}
.combat-hist-head{display:grid;grid-template-columns:2.5fr 1fr 1fr 1fr 0.8fr 0.9fr 0.8fr;column-gap:20px;padding:12px 16px;border-bottom:1px solid #2B2F36;background:#111318}
.combat-hist-row{display:grid;grid-template-columns:2.5fr 1fr 1fr 1fr 0.8fr 0.9fr 0.8fr;column-gap:20px}
.combat-hist-clickable{cursor:pointer;transition:background 0.15s}
.combat-hist-clickable:hover{background:rgba(234,236,239,0.04)}
.combat-tbl-cell.urgent-text{color:#f6465d;font-weight:600;font-family:'Fira Code',monospace;font-size:12px}
.combat-divider.hidden{display:none}

/* Combat Info popup (first-time explainer) */
.combat-info-overlay{position:fixed;top:0;left:0;right:0;bottom:0;z-index:70;display:none;align-items:center;justify-content:center;background:rgba(0,0,0,0.88);user-select:text;-webkit-user-select:text}
.combat-info-overlay.visible{display:flex}
.combat-info-popup{width:440px;max-width:92%;max-height:85vh;background:#0d0e12;border:1.5px solid rgba(246,70,93,0.25);border-radius:16px;overflow:hidden;display:flex;flex-direction:column;animation:jackpotIn 0.35s cubic-bezier(0.34,1.56,0.64,1);box-shadow:0 0 80px rgba(246,70,93,0.08),0 24px 48px rgba(0,0,0,0.7);position:relative}
.combat-info-topband{height:3px;background:linear-gradient(90deg,transparent,#f6465d,#FCD535,#f6465d,transparent);flex-shrink:0}
.combat-info-close{position:absolute;top:14px;right:16px;font-size:16px;color:#5E6673;cursor:pointer;z-index:2;transition:all 0.15s;line-height:1;width:32px;height:32px;display:flex;align-items:center;justify-content:center;border-radius:50%}
.combat-info-close:hover{color:#EAECEF;background:rgba(234,236,239,0.08)}
.combat-info-scroll{flex:1;overflow-y:auto;padding:28px 24px 16px;scrollbar-width:thin;scrollbar-color:#2B2F36 transparent}
.combat-info-scroll::-webkit-scrollbar{width:5px}
.combat-info-scroll::-webkit-scrollbar-thumb{background:#2B2F36;border-radius:3px}
.combat-info-icon-wrap{text-align:center;margin-bottom:16px}
.combat-info-title{font-size:22px;font-weight:800;color:#EAECEF;text-align:center;margin-bottom:4px}
.combat-info-sub{font-size:12px;color:#5E6673;text-align:center;margin-bottom:24px}
.combat-info-cards{display:flex;flex-direction:column;gap:12px}
.combat-info-card{display:flex;gap:14px;align-items:flex-start;padding:14px 16px;background:#111318;border:1px solid #1E2026;border-radius:10px}
.combat-info-card-num{width:28px;height:28px;min-width:28px;border-radius:50%;background:rgba(246,70,93,0.12);border:1px solid rgba(246,70,93,0.25);color:#f6465d;font-size:13px;font-weight:800;display:flex;align-items:center;justify-content:center;font-family:'Fira Code',monospace;flex-shrink:0;margin-top:2px}
.combat-info-card-num.green{background:rgba(14,203,129,0.12);border-color:rgba(14,203,129,0.25);color:#0ecb81}
.combat-info-card-num.gold{background:rgba(252,213,53,0.12);border-color:rgba(252,213,53,0.25);color:#FCD535}
.combat-info-card-body{flex:1;min-width:0}
.combat-info-card-title{font-size:14px;font-weight:700;color:#EAECEF;margin-bottom:4px}
.combat-info-card-text{font-size:12px;color:#848E9C;line-height:1.5}
.combat-info-footer{padding:16px 24px;background:#0d0e12;border-top:1px solid #1E2026;flex-shrink:0;display:flex;flex-direction:column;gap:12px}
.combat-info-check-row{display:flex;align-items:center;justify-content:center;gap:8px;cursor:pointer;font-size:12px;color:#848E9C;user-select:none;-webkit-user-select:none}
.combat-info-check-row:hover{color:#EAECEF}
.combat-info-checkbox{width:16px;height:16px;accent-color:#0ecb81;cursor:pointer;flex-shrink:0;margin:0}
.combat-info-join-btn{width:100%;padding:13px;border-radius:8px;font-size:14px;font-weight:800;color:#EAECEF;background:linear-gradient(135deg,#0ecb81,#0aa06a);text-transform:uppercase;letter-spacing:1px;cursor:pointer;transition:all 0.2s;border:none;text-align:center}
.combat-info-join-btn:hover{transform:translateY(-1px);box-shadow:0 4px 20px rgba(14,203,129,0.4)}