/* ================= FINZO Red Green Game ================= */
.rg-page{
  --rg-green:#17b978;
  --rg-red:#ed5962;
  --rg-violet:#7466ea;
  display:flex;
  flex-direction:column;
  gap:0;
  padding-bottom:10px;
  color:var(--text);
}
.rg-page *{box-sizing:border-box}
.rg-page button{-webkit-tap-highlight-color:transparent}

/* Same FINZO section-title language used on the Games page. */
.rg-title-row{align-items:center;margin-top:0;margin-bottom:7px;min-height:38px}
.rg-title-row h2{margin:0;white-space:nowrap}
.rg-rules-btn{
  border:0;
  background:transparent;
  color:var(--primary);
  min-height:36px;
  padding:0 1px 0 10px;
  display:inline-flex;
  align-items:center;
  gap:7px;
  font-size:.68rem;
  font-weight:900;
  transition:transform .16s var(--ease),opacity .18s;
}
.rg-rules-btn i{
  width:24px;
  height:24px;
  border-radius:50%;
  display:grid;
  place-items:center;
  color:var(--primary);
  background:var(--primary-soft);
  border:1px solid color-mix(in srgb,var(--primary) 16%,var(--border));
  font-size:.62rem;
}
.rg-rules-btn:active{transform:scale(.96);opacity:.82}

/* Direct-on-page sections: no outer cards. */
.rg-section{padding:8px 0 14px}
.rg-divider{height:1px;background:color-mix(in srgb,var(--border) 82%,transparent);margin:1px 0}
.rg-orders-divider{height:0;background:none;border:0;border-top:1px dashed color-mix(in srgb,var(--primary) 30%,var(--border));margin:22px 0 21px;opacity:.78}

/* Result strip: 29 completed periods + the current question-mark period. */
.rg-results-section{padding-top:1px;padding-bottom:12px}
.rg-results-grid{display:grid;grid-template-columns:repeat(10,minmax(0,1fr));gap:5px}
.rg-record{position:relative;text-align:center;min-width:0;padding:2px;transform-origin:center}
.rg-record img{display:block;width:100%;aspect-ratio:1;object-fit:contain;filter:drop-shadow(0 4px 5px color-mix(in srgb,var(--text) 10%,transparent));user-select:none;-webkit-user-drag:none}
.rg-record small{display:block;margin-top:1px;font-size:.46rem;line-height:1.1;color:var(--text-muted);font-weight:850;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.rg-record.is-loading>span{display:block;width:100%;aspect-ratio:1;border-radius:50%;background:linear-gradient(100deg,var(--surface-2) 20%,color-mix(in srgb,var(--primary) 7%,var(--surface)) 40%,var(--surface-2) 60%);background-size:220% 100%;animation:rgShimmer 1.25s linear infinite}
.rg-record.is-current img{opacity:.86;filter:drop-shadow(0 5px 7px color-mix(in srgb,var(--primary) 18%,transparent))}
.rg-record.is-current small{color:var(--primary);font-weight:950}
.rg-record.is-new{animation:rgRecordPop .68s var(--ease)}
@keyframes rgShimmer{to{background-position:-220% 0}}
@keyframes rgRecordPop{0%{transform:scale(.7);opacity:.15}62%{transform:scale(1.14)}100%{transform:scale(1);opacity:1}}

/* Round state */
.rg-game-section{padding-top:14px}
.rg-round-head{display:flex;align-items:flex-end;justify-content:space-between;gap:14px}
.rg-period-box small,.rg-period-box b{display:block}
.rg-period-box small{font-size:.59rem;color:var(--text-muted);font-weight:800}
.rg-period-box b{margin-top:3px;font-size:.94rem;font-weight:950;letter-spacing:.015em}
.rg-timer-box{text-align:right;min-width:112px}
.rg-status-pill{display:inline-flex;align-items:center;gap:5px;padding:5px 8px;border-radius:999px;background:var(--primary-soft);color:var(--primary);font-size:.48rem;font-weight:950;letter-spacing:.035em}
.rg-status-pill i{font-size:.36rem}
.rg-status-pill.open{background:var(--success-soft);color:var(--success)}
.rg-status-pill.waiting{background:var(--warning-soft);color:var(--warning)}
.rg-status-pill.ended{background:var(--surface-2);color:var(--text-muted)}
.rg-timer-box strong{display:block;margin-top:4px;font-size:1.56rem;line-height:1;font-variant-numeric:tabular-nums;font-weight:950;letter-spacing:-.04em}
.rg-progress-track{height:5px;border-radius:999px;background:var(--surface-2);overflow:hidden;margin-top:10px}
.rg-progress-track span{display:block;height:100%;width:0;border-radius:inherit;background:linear-gradient(90deg,var(--primary),color-mix(in srgb,var(--primary) 64%,#fff));transition:width .28s linear}
.rg-section-label{display:flex;align-items:center;justify-content:space-between;gap:10px;margin:15px 0 8px}
.rg-section-label span{font-size:.72rem;font-weight:950}
.rg-section-label small{font-size:.52rem;color:var(--text-muted);font-weight:700}
.rg-number-label{margin-top:16px}

/* Full-color game color cards */
.rg-color-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:9px;padding:8px 4px 2px}
.rg-color-card{
  position:relative;
  min-width:0;
  min-height:104px;
  border:0;
  border-radius:18px;
  padding:12px 9px 10px;
  color:#fff;
  text-align:left;
  overflow:visible;
  isolation:isolate;
  transition:transform .16s var(--ease),filter .18s,opacity .18s,box-shadow .2s;
}
.rg-color-card.green{background:linear-gradient(145deg,#25cf8d,#0e9d67);box-shadow:0 15px 28px -17px rgba(14,157,103,.72),0 7px 18px -14px rgba(0,0,0,.42),inset 0 1px 0 rgba(255,255,255,.2)}
.rg-color-card.violet{background:linear-gradient(145deg,#897cf7,#6151d5);box-shadow:0 15px 28px -17px rgba(97,81,213,.72),0 7px 18px -14px rgba(0,0,0,.42),inset 0 1px 0 rgba(255,255,255,.2)}
.rg-color-card.red{background:linear-gradient(145deg,#f57078,#d9434d);box-shadow:0 15px 28px -17px rgba(217,67,77,.72),0 7px 18px -14px rgba(0,0,0,.42),inset 0 1px 0 rgba(255,255,255,.2)}
.rg-color-card:after{content:"";position:absolute;inset:0;border-radius:inherit;background:radial-gradient(circle at 88% 86%,rgba(255,255,255,.15),transparent 38%);z-index:-1;pointer-events:none}
.rg-color-card:active:not(:disabled){transform:scale(.965)}
.rg-color-card.has-bet{box-shadow:0 17px 31px -16px rgba(0,0,0,.44),inset 0 0 0 2px rgba(255,255,255,.7),inset 0 1px 0 rgba(255,255,255,.25)}
.rg-color-card:disabled{opacity:.76;filter:saturate(.76);cursor:not-allowed}
.rg-color-main{height:100%;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:5px;position:relative;z-index:1;min-width:0;padding-top:4px}
.rg-color-image{width:34px;height:34px;display:block;flex:0 0 34px;border-radius:50%;background:rgba(255,255,255,.15);padding:2px}
.rg-color-image img{display:block;width:100%;height:100%;object-fit:contain;filter:drop-shadow(0 4px 5px rgba(0,0,0,.16))}
.rg-color-copy{display:flex;flex-direction:column;align-items:center;min-width:0;max-width:100%}
.rg-color-copy>b{font-size:.77rem;line-height:1.05;font-weight:950;text-shadow:0 1px 1px rgba(0,0,0,.12);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%}
.rg-color-copy>small{display:block;margin-top:5px;font-size:.51rem;line-height:1;font-weight:850;color:rgba(255,255,255,.68);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%}
.rg-color-multiplier{position:absolute;top:9px;right:9px;z-index:2;padding:0;background:transparent;border:0;color:rgba(255,255,255,.56);font-size:.54rem;font-weight:950;line-height:1;text-shadow:0 1px 2px rgba(0,0,0,.16)}
.rg-your-bet{position:absolute;left:8px;top:-8px;z-index:4;display:inline-flex;align-items:center;max-width:66%;min-height:22px;padding:4px 7px;border-radius:999px;background:var(--surface);color:var(--text);border:1px solid color-mix(in srgb,var(--primary) 8%,var(--border));font-size:.47rem;font-weight:950;line-height:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;box-shadow:0 7px 16px -12px rgba(0,0,0,.66)}
.rg-your-bet:empty{display:none}

/* Number selection uses clean typography instead of donor ball artwork. */
.rg-number-grid{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:8px}
.rg-number-card{position:relative;min-width:0;aspect-ratio:1;border:1px solid var(--border);border-radius:15px;background:var(--surface-2);display:grid;place-items:center;padding:7px;box-shadow:0 8px 18px -20px var(--text);transition:transform .16s var(--ease),border-color .2s,background .2s,opacity .2s,box-shadow .2s}
.rg-number-value{font-size:1.55rem;line-height:1;font-weight:950;letter-spacing:-.045em;text-shadow:0 5px 12px color-mix(in srgb,currentColor 16%,transparent)}
.rg-number-card.tone-green{background:color-mix(in srgb,var(--rg-green) 7%,var(--surface));border-color:color-mix(in srgb,var(--rg-green) 19%,var(--border))}.rg-number-card.tone-green .rg-number-value{color:var(--rg-green)}
.rg-number-card.tone-red{background:color-mix(in srgb,var(--rg-red) 7%,var(--surface));border-color:color-mix(in srgb,var(--rg-red) 19%,var(--border))}.rg-number-card.tone-red .rg-number-value{color:var(--rg-red)}
.rg-number-card.tone-green-violet{background:linear-gradient(135deg,color-mix(in srgb,var(--rg-green) 7%,var(--surface)),color-mix(in srgb,var(--rg-violet) 7%,var(--surface)));border-color:color-mix(in srgb,var(--rg-violet) 18%,var(--border))}.rg-number-card.tone-green-violet .rg-number-value{background:linear-gradient(135deg,var(--rg-green) 30%,var(--rg-violet) 68%);-webkit-background-clip:text;background-clip:text;color:transparent}
.rg-number-card.tone-red-violet{background:linear-gradient(135deg,color-mix(in srgb,var(--rg-red) 7%,var(--surface)),color-mix(in srgb,var(--rg-violet) 7%,var(--surface)));border-color:color-mix(in srgb,var(--rg-violet) 18%,var(--border))}.rg-number-card.tone-red-violet .rg-number-value{background:linear-gradient(135deg,var(--rg-red) 30%,var(--rg-violet) 68%);-webkit-background-clip:text;background-clip:text;color:transparent}
.rg-number-card:active:not(:disabled){transform:scale(.94)}
.rg-number-card.has-bet{border-color:var(--primary);box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--primary) 28%,transparent),0 9px 20px -19px var(--primary)}
.rg-number-card:disabled{opacity:.7;filter:saturate(.68)}
.rg-number-bet{position:absolute;left:50%;bottom:4px;transform:translateX(-50%);max-width:88%;padding:3px 5px;border-radius:999px;background:var(--primary);color:#fff;font-size:.39rem;font-weight:950;line-height:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;box-shadow:0 5px 10px -8px var(--primary)}
.rg-number-bet:empty{display:none}

/* Orders / history. Active tab becomes the theme-colored chip itself. */
.rg-orders-section{padding-top:13px}
.rg-order-tabs{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-bottom:2px;padding:2px 0}
.rg-order-tabs button{border:0;background:transparent;color:var(--text);min-height:38px;border-radius:12px;padding:0 9px;font-size:.68rem;font-weight:900;transition:background .22s var(--ease),color .22s var(--ease),box-shadow .22s var(--ease),transform .16s var(--ease)}
.rg-order-tabs button.active{color:#fff;background:var(--primary);box-shadow:0 10px 20px -15px var(--primary)}
.rg-order-tabs button:active{transform:scale(.97)}
.rg-order-panel{display:none;min-width:0}
.rg-order-panel.active{display:block;animation:rgPanelIn .2s var(--ease)}
@keyframes rgPanelIn{from{opacity:.35;transform:translateY(4px)}to{opacity:1;transform:none}}
.rg-table-scroll{width:100%;max-width:100%;overflow:visible;overscroll-behavior:auto;touch-action:pan-y;padding-top:7px}
.rg-table{width:100%;max-width:100%;min-width:0;border-collapse:separate;border-spacing:0;table-layout:fixed}
.rg-table col.rg-col-user{width:32%}.rg-table col.rg-col-select{width:17%}.rg-table col.rg-col-amount{width:27%}.rg-table col.rg-col-time{width:24%}
.rg-my-table col.rg-col-period{width:22%}.rg-my-table col.rg-col-select{width:15%}.rg-my-table col.rg-col-amount{width:22%}.rg-my-table col.rg-col-result{width:15%}.rg-my-table col.rg-col-profit{width:26%}
.rg-table th,.rg-table td{padding:8px 4px;border-bottom:1px solid color-mix(in srgb,var(--border) 76%,transparent);font-size:.62rem;color:var(--text);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;vertical-align:middle}
.rg-table th{padding-top:8px;padding-bottom:8px;font-size:.56rem;color:color-mix(in srgb,var(--primary) 86%,var(--text));font-weight:950;background:transparent;border:0;border-bottom:1px solid color-mix(in srgb,var(--border) 60%,transparent);position:static;letter-spacing:.01em}
.rg-table th:first-child,.rg-table td:first-child{text-align:left}
.rg-table th:last-child,.rg-table td:last-child{text-align:right}
.rg-table th:not(:first-child):not(:last-child),.rg-table td:not(:first-child):not(:last-child){text-align:center}
.rg-table tbody tr:last-child td{border-bottom:0}
.rg-order-enter td{animation:rgOrderEnter .42s cubic-bezier(.22,.78,.32,1) both}
@keyframes rgOrderEnter{0%{opacity:.08;transform:translateY(-7px)}70%{opacity:1;transform:translateY(1px)}100%{opacity:1;transform:none}}
.rg-user-cell{min-width:0;display:inline-flex;align-items:center;gap:5px;justify-content:flex-start;max-width:100%;font-weight:850;vertical-align:middle}
.rg-user-cell b{min-width:0;overflow:hidden;text-overflow:ellipsis;font-size:.6rem}
.rg-user-img{width:23px;height:23px;flex:0 0 23px;border-radius:7px;object-fit:cover;border:1px solid var(--border);background:var(--surface-2)}
.rg-user-img-empty{display:inline-grid;place-items:center;color:var(--text-muted);font-size:.58rem;background:var(--surface-2)}
.rg-select-img,.rg-result-img{width:23px;height:23px;object-fit:contain;display:block;margin:0 auto}
.rg-amount-cell{font-weight:900}
.rg-time-cell{font-size:.56rem!important;color:var(--text-muted)!important}
.rg-period-cell{font-variant-numeric:tabular-nums;font-size:.57rem!important}
.rg-profit{font-weight:950;font-size:.59rem!important}
.rg-profit.win{color:var(--success)}
.rg-profit.loss{color:var(--danger)}
.rg-profit.pending{color:var(--text-muted)}
.rg-table-empty{height:108px!important;color:var(--text-muted)!important;font-size:.62rem!important;font-weight:750!important}

/* Content rendered inside FINZO BottomSheet */
.rg-sheet-content{display:flex;flex-direction:column;gap:14px;padding-bottom:4px}
.rg-sheet-hero{display:flex;align-items:center;gap:12px;padding:12px;border:1px solid color-mix(in srgb,var(--rg-sheet-accent,var(--primary)) 16%,var(--border));border-radius:18px;background:color-mix(in srgb,var(--rg-sheet-accent,var(--primary)) 7%,var(--surface-2))}
.rg-sheet-period{position:absolute;right:12px;top:10px;z-index:2;font-size:.55rem;font-weight:900;color:var(--text-muted);letter-spacing:.01em;white-space:nowrap}
.rg-join-sheet-content .rg-sheet-hero{position:relative;padding-top:24px}.rg-join-sheet-content .rg-sheet-hero-copy{padding-right:4px}
.rg-sheet-hero-img{width:56px;height:56px;flex:0 0 56px;border-radius:18px;background:var(--surface);display:grid;place-items:center;border:1px solid color-mix(in srgb,var(--rg-sheet-accent,var(--primary)) 14%,var(--border));box-shadow:0 10px 22px -20px var(--text)}
.rg-sheet-hero-img img{width:48px;height:48px;object-fit:contain}
.rg-sheet-hero-copy{min-width:0}
.rg-sheet-hero-copy small,.rg-sheet-hero-copy b,.rg-sheet-hero-copy span{display:block}
.rg-sheet-hero-copy small{font-size:.55rem;color:var(--text-muted);font-weight:800}
.rg-sheet-hero-copy b{font-size:1rem;font-weight:950;margin-top:2px}
.rg-sheet-hero-copy span{font-size:.6rem;color:var(--rg-sheet-accent,var(--primary));font-weight:900;margin-top:3px}
.rg-sheet-wallet{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:12px 13px;border:1px solid var(--border);border-radius:16px;background:var(--surface-2)}
.rg-sheet-wallet div small,.rg-sheet-wallet div b{display:block}
.rg-sheet-wallet div small{font-size:.56rem;color:var(--text-muted);font-weight:750}
.rg-sheet-wallet div b{font-size:1.03rem;margin-top:3px;font-weight:950}
.rg-sheet-wallet button{border:0;background:var(--primary-soft);color:var(--primary);border-radius:10px;min-height:36px;padding:0 10px;font-size:.6rem;font-weight:900}
.rg-sheet-section>span{display:block;margin-bottom:8px;font-size:.62rem;font-weight:900;color:var(--text)}
.rg-contract-grid{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:7px}
.rg-contract-btn{height:42px;border-radius:12px;border:1px solid var(--border);background:var(--surface-2);color:var(--text);font-size:.62rem;font-weight:900;transition:transform .14s,border-color .2s,background .2s,color .2s}
.rg-contract-btn:active{transform:scale(.94)}
.rg-contract-btn.active{border-color:var(--rg-sheet-accent,var(--primary));background:color-mix(in srgb,var(--rg-sheet-accent,var(--primary)) 9%,var(--surface));color:var(--rg-sheet-accent,var(--primary))}
.rg-qty-row{display:grid;grid-template-columns:44px 44px minmax(72px,1fr) 44px 44px;gap:7px}
.rg-qty-row button{height:42px;border-radius:12px;border:1px solid var(--border);background:var(--surface-2);color:var(--text);font-size:.64rem;font-weight:900}
.rg-qty-row input{height:42px;min-width:0;text-align:center;border:1px solid var(--border);border-radius:12px;background:var(--surface);color:var(--text);font-size:16px;font-weight:900;outline:none}
.rg-qty-row input:focus{border-color:var(--primary);box-shadow:0 0 0 4px var(--primary-soft)}
.rg-qty-row input::-webkit-inner-spin-button,.rg-qty-row input::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}
.rg-qty-row input[type=number]{-moz-appearance:textfield}
.rg-join-summary{display:flex;flex-direction:column;align-items:center;gap:8px;padding:4px 2px 1px;text-align:center}
.rg-join-total{width:100%;display:flex;flex-direction:column;align-items:center;justify-content:center}
.rg-join-total small{font-size:.58rem;color:var(--text-muted);font-weight:800;letter-spacing:.01em}
.rg-join-total strong{display:block;margin-top:2px;font-size:1.72rem;line-height:1.08;font-weight:950;letter-spacing:-.035em;color:var(--text)}
.rg-join-meta{width:100%;display:flex!important;align-items:center;justify-content:center;gap:0;flex-wrap:wrap;color:var(--text-muted)}
.rg-join-meta>span{display:inline-flex;align-items:baseline;gap:5px;padding:2px 10px;position:relative;white-space:nowrap}
.rg-join-meta>span+span:before{content:"";position:absolute;left:0;top:50%;width:1px;height:12px;transform:translateY(-50%);background:var(--border);opacity:.8}
.rg-join-meta small{font-size:.49rem;color:var(--text-muted);font-weight:750}
.rg-join-meta b{font-size:.58rem;color:var(--text);font-weight:900}
.rg-join-action{height:48px;width:100%;border:0;border-radius:14px;background:var(--rg-sheet-accent,var(--primary));color:#fff;font-size:.72rem;font-weight:950;box-shadow:0 12px 22px -17px var(--rg-sheet-accent,var(--primary));display:flex;align-items:center;justify-content:center;gap:8px}
.rg-join-action:disabled{opacity:.55;box-shadow:none}
.rg-join-action .ui-busy-spin{border-color:rgba(255,255,255,.35);border-top-color:#fff}

/* Premium join sheet */
.rg-join-sheet-content{gap:15px;padding:2px 1px 8px}
.rg-join-sheet-content .rg-sheet-hero{position:relative;overflow:hidden;padding:15px;border-color:color-mix(in srgb,var(--rg-sheet-accent,var(--primary)) 24%,var(--border));border-radius:22px;background:linear-gradient(145deg,color-mix(in srgb,var(--rg-sheet-accent,var(--primary)) 15%,var(--surface)),color-mix(in srgb,var(--rg-sheet-accent,var(--primary)) 5%,var(--surface-2)));box-shadow:0 18px 34px -28px color-mix(in srgb,var(--rg-sheet-accent,var(--primary)) 72%,transparent),inset 0 1px 0 color-mix(in srgb,#fff 42%,transparent)}
.rg-join-sheet-content .rg-sheet-hero:after{content:"";position:absolute;right:-34px;top:-42px;width:126px;height:126px;border-radius:50%;background:color-mix(in srgb,var(--rg-sheet-accent,var(--primary)) 10%,transparent);filter:blur(1px);pointer-events:none}
.rg-join-sheet-content .rg-sheet-hero-img{position:relative;z-index:1;width:62px;height:62px;flex-basis:62px;border-radius:20px;background:color-mix(in srgb,var(--surface) 90%,transparent);border-color:color-mix(in srgb,var(--rg-sheet-accent,var(--primary)) 23%,var(--border));box-shadow:0 14px 28px -20px color-mix(in srgb,var(--text) 45%,transparent),inset 0 1px 0 color-mix(in srgb,#fff 55%,transparent)}
.rg-join-sheet-content .rg-sheet-hero-img img{width:54px;height:54px;filter:drop-shadow(0 7px 9px color-mix(in srgb,var(--text) 16%,transparent))}
.rg-join-sheet-content .rg-sheet-hero-copy{position:relative;z-index:1}
.rg-join-sheet-content .rg-sheet-hero-copy small{font-size:.59rem;letter-spacing:.11em}
.rg-join-sheet-content .rg-sheet-hero-copy b{font-size:1.1rem;letter-spacing:-.018em}
.rg-join-sheet-content .rg-sheet-hero-copy span{font-size:.65rem}
.rg-join-sheet-content .rg-sheet-wallet{padding:13px 14px;border-radius:18px;background:linear-gradient(180deg,color-mix(in srgb,var(--surface-2) 88%,var(--surface)),var(--surface-2));box-shadow:0 12px 26px -26px color-mix(in srgb,var(--text) 55%,transparent),inset 0 1px 0 color-mix(in srgb,#fff 45%,transparent)}
.rg-join-sheet-content .rg-sheet-wallet div small{font-size:.61rem}
.rg-join-sheet-content .rg-sheet-wallet div b{font-size:1.1rem}
.rg-join-sheet-content .rg-sheet-wallet button{min-height:38px;padding:0 12px;border:1px solid color-mix(in srgb,var(--primary) 14%,transparent);border-radius:12px;font-size:.64rem;box-shadow:0 9px 18px -17px var(--primary)}
.rg-join-sheet-content .rg-sheet-section{padding:13px;border:1px solid color-mix(in srgb,var(--border) 88%,transparent);border-radius:19px;background:linear-gradient(180deg,var(--surface),color-mix(in srgb,var(--surface-2) 72%,var(--surface)));box-shadow:0 14px 28px -30px color-mix(in srgb,var(--text) 52%,transparent),inset 0 1px 0 color-mix(in srgb,#fff 45%,transparent)}
.rg-join-sheet-content .rg-sheet-section>span{margin-bottom:10px;font-size:.67rem;letter-spacing:.005em}
.rg-join-sheet-content .rg-contract-grid{gap:8px}
.rg-join-sheet-content .rg-contract-btn{height:44px;border-radius:13px;background:var(--surface);font-size:.65rem;box-shadow:0 8px 16px -18px color-mix(in srgb,var(--text) 60%,transparent),inset 0 1px 0 color-mix(in srgb,#fff 45%,transparent)}
.rg-join-sheet-content .rg-contract-btn.active{border-color:var(--rg-sheet-accent,var(--primary));background:linear-gradient(145deg,var(--rg-sheet-accent,var(--primary)),color-mix(in srgb,var(--rg-sheet-accent,var(--primary)) 82%,#000));color:#fff;box-shadow:0 12px 22px -17px var(--rg-sheet-accent,var(--primary)),inset 0 1px 0 rgba(255,255,255,.28)}
.rg-join-sheet-content .rg-qty-row button,.rg-join-sheet-content .rg-qty-row input{height:44px;border-radius:13px;background:var(--surface);box-shadow:inset 0 1px 0 color-mix(in srgb,#fff 45%,transparent)}
.rg-join-sheet-content .rg-qty-row button{font-size:.69rem;transition:transform .14s,border-color .2s,background .2s}
.rg-join-sheet-content .rg-qty-row button:active{transform:scale(.94);border-color:var(--rg-sheet-accent,var(--primary));background:color-mix(in srgb,var(--rg-sheet-accent,var(--primary)) 7%,var(--surface))}
.rg-join-sheet-content .rg-qty-row input:focus{border-color:var(--rg-sheet-accent,var(--primary));box-shadow:0 0 0 4px color-mix(in srgb,var(--rg-sheet-accent,var(--primary)) 11%,transparent)}
.rg-join-sheet-content .rg-join-summary{gap:10px;padding:16px 13px 14px;border:1px solid color-mix(in srgb,var(--rg-sheet-accent,var(--primary)) 18%,var(--border));border-radius:20px;background:linear-gradient(145deg,color-mix(in srgb,var(--rg-sheet-accent,var(--primary)) 8%,var(--surface)),color-mix(in srgb,var(--rg-sheet-accent,var(--primary)) 3%,var(--surface-2)));box-shadow:0 16px 28px -28px color-mix(in srgb,var(--rg-sheet-accent,var(--primary)) 58%,transparent),inset 0 1px 0 color-mix(in srgb,#fff 48%,transparent)}
.rg-join-sheet-content .rg-join-total small{font-size:.62rem}
.rg-join-sheet-content .rg-join-total strong{margin-top:4px;font-size:1.88rem;color:var(--rg-sheet-accent,var(--primary));text-shadow:0 9px 20px color-mix(in srgb,var(--rg-sheet-accent,var(--primary)) 12%,transparent)}
.rg-join-sheet-content .rg-join-meta small{font-size:.54rem}
.rg-join-sheet-content .rg-join-meta b{font-size:.64rem}
.rg-join-sheet-content .rg-join-action{height:52px;border-radius:16px;background:linear-gradient(135deg,var(--rg-sheet-accent,var(--primary)),color-mix(in srgb,var(--rg-sheet-accent,var(--primary)) 78%,#151515));font-size:.76rem;box-shadow:0 18px 28px -18px color-mix(in srgb,var(--rg-sheet-accent,var(--primary)) 72%,transparent),inset 0 1px 0 rgba(255,255,255,.25);transition:transform .14s,filter .2s,box-shadow .2s}
.rg-join-sheet-content .rg-join-action:not(:disabled):active{transform:translateY(1px) scale(.99);filter:saturate(1.08)}
[data-theme="dark"] .rg-join-sheet-content .rg-sheet-hero,[data-theme="dark"] .rg-join-sheet-content .rg-sheet-section,[data-theme="dark"] .rg-join-sheet-content .rg-join-summary{box-shadow:0 18px 36px -27px rgba(0,0,0,.9),inset 0 1px 0 rgba(255,255,255,.06)}

/* Rules */
.rg-rule-intro{font-size:.72rem;line-height:1.55;color:var(--text-muted);margin:0}
.rg-rule-cards{display:grid;gap:8px}
.rg-rule-row{display:grid;grid-template-columns:38px minmax(0,1fr) auto;gap:10px;align-items:center;padding:10px;border:1px solid var(--border);border-radius:15px;background:var(--surface-2)}
.rg-rule-row img{width:38px;height:38px;object-fit:contain}
.rg-rule-row div b,.rg-rule-row div small{display:block}
.rg-rule-row div b{font-size:.69rem;font-weight:950}
.rg-rule-row div small{margin-top:2px;font-size:.54rem;color:var(--text-muted);line-height:1.35}
.rg-rule-row>strong{font-size:.7rem;color:var(--primary);font-weight:950}
.rg-rule-fee-note{display:flex;align-items:flex-start;gap:10px;padding:11px 12px;border:1px solid color-mix(in srgb,var(--primary) 20%,var(--border));border-radius:15px;background:color-mix(in srgb,var(--primary) 6%,var(--surface));color:var(--text)}
.rg-rule-fee-note>i{flex:0 0 auto;width:30px;height:30px;border-radius:10px;display:grid;place-items:center;background:var(--primary-soft);color:var(--primary);font-size:.7rem}
.rg-rule-fee-note span{min-width:0}.rg-rule-fee-note b,.rg-rule-fee-note small{display:block}.rg-rule-fee-note b{font-size:.66rem;font-weight:950}.rg-rule-fee-note small{margin-top:3px;font-size:.55rem;line-height:1.45;color:var(--text-muted)}
/* Win / loss result popup */
.alert-card:has(.rg-result-popup){max-width:420px;max-height:calc(100dvh - 24px);padding:24px 20px 20px;border-radius:28px;overflow:hidden;display:flex;flex-direction:column}
.alert-card:has(.rg-result-popup)>.a-ic{display:none!important}
.alert-card:has(.rg-result-popup)>h3{flex:none;margin:0 42px 14px 0;font-size:1.2rem;line-height:1.2;letter-spacing:-.025em;text-align:left}
.alert-card:has(.rg-result-popup)>p{flex:1;min-height:0;margin:0;overflow:hidden;color:var(--text);font-size:.82rem;line-height:1.45;display:flex}
.alert-card:has(.rg-result-popup) .a-actions{flex:none;margin-top:18px}
.alert-card:has(.rg-result-popup) .a-actions .btn{min-height:48px;border-radius:15px;font-weight:900}
.rg-result-popup{display:flex!important;flex:1;min-height:0;flex-direction:column;gap:14px;width:100%;text-align:left;color:var(--text)}
.rg-popup-banner{position:relative;display:grid!important;grid-template-columns:minmax(0,1fr) 88px;gap:14px;align-items:center;overflow:hidden;padding:18px;border:1px solid color-mix(in srgb,var(--rg-result-accent) 22%,var(--border));border-radius:21px;background:linear-gradient(145deg,color-mix(in srgb,var(--rg-result-accent) 13%,var(--surface)),color-mix(in srgb,var(--rg-result-accent) 5%,var(--surface-2)))}
.rg-result-popup.win{--rg-result-accent:var(--success)}
.rg-result-popup.loss{--rg-result-accent:var(--danger)}
.rg-popup-banner:after{content:"";position:absolute;right:-30px;top:-45px;width:125px;height:125px;border-radius:50%;background:color-mix(in srgb,var(--rg-result-accent) 10%,transparent);pointer-events:none}
.rg-popup-banner-copy{position:relative;z-index:1;display:flex!important;flex-direction:column;min-width:0}
.rg-popup-status{align-self:flex-start;display:inline-flex!important;align-items:center;gap:6px;margin-bottom:9px;padding:5px 9px;border-radius:999px;background:color-mix(in srgb,var(--rg-result-accent) 13%,var(--surface));color:var(--rg-result-accent);font-size:.62rem;font-weight:950;letter-spacing:.055em}
.rg-popup-status i{font-size:.67rem}
.rg-popup-banner-copy>small{font-size:.68rem;font-weight:800;color:var(--text-muted)}
.rg-popup-banner-copy>strong{margin-top:4px;font-size:1.9rem;line-height:1;font-weight:950;letter-spacing:-.045em;color:var(--rg-result-accent)}
.rg-popup-banner-copy>em{margin-top:7px;font-size:.69rem;line-height:1.35;font-style:normal;font-weight:700;color:var(--text-muted)}
.rg-popup-result-ball{position:relative;z-index:1;display:flex!important;flex-direction:column;align-items:center;justify-content:center;gap:5px;min-width:0;padding:9px 5px;border:1px solid color-mix(in srgb,var(--rg-result-accent) 14%,var(--border));border-radius:18px;background:color-mix(in srgb,var(--surface) 86%,transparent);box-shadow:0 12px 24px -20px color-mix(in srgb,var(--text) 40%,transparent)}
.rg-popup-number{width:62px;height:62px;object-fit:contain;filter:drop-shadow(0 8px 10px color-mix(in srgb,var(--text) 15%,transparent))}
.rg-popup-result-ball small{font-size:.6rem;font-weight:850;color:var(--text-muted)}
.rg-popup-summary{display:grid!important;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
.rg-popup-summary>span{display:flex!important;flex-direction:column;justify-content:center;min-width:0;min-height:66px;padding:10px 8px;border:1px solid var(--border);border-radius:15px;background:var(--surface-2);text-align:center}
.rg-popup-summary small{font-size:.62rem;color:var(--text-muted);font-weight:750;line-height:1.25}
.rg-popup-summary b{margin-top:4px;font-size:.78rem;color:var(--text);font-weight:950;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.rg-popup-orders{display:flex!important;min-height:0;flex-direction:column;overflow:hidden;border:1px solid var(--border);border-radius:17px;background:var(--surface)}
.rg-popup-order-title{flex:none;display:flex!important;align-items:center;justify-content:space-between;gap:10px;padding:11px 13px;background:var(--surface-2)}
.rg-popup-order-title b{font-size:.72rem;font-weight:900;color:var(--text)}
.rg-popup-order-title small{font-size:.62rem;font-weight:750;color:var(--text-muted)}
.rg-popup-bets{display:block!important;padding:0 13px}
.rg-popup-bets.is-scrollable{max-height:min(146px,22dvh);overflow-y:auto;overscroll-behavior:contain;scrollbar-width:thin;scrollbar-color:color-mix(in srgb,var(--rg-result-accent) 36%,var(--border)) transparent}
.rg-popup-bets.is-scrollable::-webkit-scrollbar{width:4px}.rg-popup-bets.is-scrollable::-webkit-scrollbar-thumb{background:color-mix(in srgb,var(--rg-result-accent) 36%,var(--border));border-radius:999px}
.rg-popup-bet{display:flex!important;align-items:center;justify-content:space-between;gap:12px;padding:11px 0;font-size:.7rem}
.rg-popup-bet+.rg-popup-bet{border-top:1px solid color-mix(in srgb,var(--border) 76%,transparent)}
.rg-popup-bet>span{min-width:0;font-weight:750;color:var(--text-muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.rg-popup-bet>b{flex:none;font-size:.72rem;font-weight:950;color:var(--text)}
@media(max-width:390px){
  .alert-card:has(.rg-result-popup){padding:22px 16px 17px;border-radius:24px}
  .rg-popup-banner{grid-template-columns:minmax(0,1fr) 76px;padding:15px;gap:11px}
  .rg-popup-number{width:54px;height:54px}
  .rg-popup-banner-copy>strong{font-size:1.65rem}
  .rg-popup-summary{gap:6px}
  .rg-popup-summary>span{padding:9px 5px}
}

[data-theme="dark"] .rg-order-tabs button:not(.active){color:var(--text)}
[data-theme="dark"] .rg-table th{color:color-mix(in srgb,var(--primary) 72%,#fff);background:transparent;border-top:0;border-left:0;border-right:0}
[data-theme="dark"] .rg-color-card.green{box-shadow:0 16px 29px -17px rgba(25,185,120,.45),0 8px 18px -14px rgba(0,0,0,.78),inset 0 1px 0 rgba(255,255,255,.16)}
[data-theme="dark"] .rg-color-card.violet{box-shadow:0 16px 29px -17px rgba(116,102,234,.45),0 8px 18px -14px rgba(0,0,0,.78),inset 0 1px 0 rgba(255,255,255,.16)}
[data-theme="dark"] .rg-color-card.red{box-shadow:0 16px 29px -17px rgba(237,89,98,.45),0 8px 18px -14px rgba(0,0,0,.78),inset 0 1px 0 rgba(255,255,255,.16)}
[data-theme="dark"] .rg-your-bet{background:color-mix(in srgb,var(--surface) 94%,#fff);border-color:color-mix(in srgb,var(--primary) 14%,var(--border))}

@media(max-width:390px){
  .rg-results-grid{gap:4px}
  .rg-record{padding:1px}
  .rg-record small{font-size:.42rem}
  .rg-color-grid{gap:7px;padding-left:3px;padding-right:3px}
  .rg-color-card{min-height:98px;padding:10px 7px 9px;border-radius:16px}
  .rg-color-image{width:30px;height:30px;flex-basis:30px}
  .rg-color-copy>b{font-size:.7rem}
  .rg-color-copy>small{font-size:.46rem}
  .rg-color-multiplier{top:8px;right:8px;font-size:.47rem}
  .rg-your-bet{left:6px;top:-7px;font-size:.43rem;min-height:20px;padding:4px 6px}
  .rg-number-grid{gap:6px}
  .rg-number-card{padding:5px;border-radius:13px}
  .rg-number-value{font-size:1.4rem}
  .rg-contract-grid{gap:5px}
  .rg-contract-btn{font-size:.55rem}
  .rg-qty-row{grid-template-columns:40px 40px minmax(62px,1fr) 40px 40px;gap:5px}
  .rg-qty-row button,.rg-qty-row input{height:40px}
  .rg-table th,.rg-table td{padding:7px 3px;font-size:.58rem}
  .rg-user-img{width:21px;height:21px;flex-basis:21px}
  .rg-select-img,.rg-result-img{width:21px;height:21px}
}
@media(max-width:335px){
  .rg-title-row h2{font-size:.92rem}
  .rg-rules-btn{font-size:.62rem}
  .rg-results-grid{gap:3px}
  .rg-record small{font-size:.38rem}
  .rg-color-grid{gap:6px;padding-left:2px;padding-right:2px}
  .rg-color-image{width:27px;height:27px;flex-basis:27px}
  .rg-color-copy>b{font-size:.63rem}
  .rg-color-copy>small{font-size:.42rem}
  .rg-color-multiplier{font-size:.44rem}
  .rg-number-grid{gap:5px}
  .rg-number-value{font-size:1.28rem}
  .rg-qty-row{grid-template-columns:38px 38px minmax(56px,1fr) 38px 38px}
  .rg-contract-btn{font-size:.5rem}
  .rg-table th{font-size:.5rem}.rg-table td{font-size:.54rem}.rg-profit{font-size:.54rem!important}.rg-user-cell b{font-size:.53rem}.rg-time-cell{font-size:.5rem!important}
}
@media(prefers-reduced-motion:reduce){.rg-page *{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important}}

[data-theme="dark"] .rg-orders-divider{border-top-color:color-mix(in srgb,var(--primary) 34%,var(--border));opacity:.74}


/* Clearly-marked Red Green Test Mode simulation UI */
.rg-test-join-note{display:flex;align-items:flex-start;gap:9px;padding:10px 11px;border:1px solid color-mix(in srgb,var(--warning) 22%,var(--border));border-radius:14px;background:color-mix(in srgb,var(--warning) 6%,var(--surface));color:var(--text)}
.rg-test-join-note>i{color:var(--warning);margin-top:2px}.rg-test-join-note span{min-width:0}.rg-test-join-note b,.rg-test-join-note small{display:block}.rg-test-join-note b{font-size:.65rem;font-weight:950}.rg-test-join-note small{margin-top:3px;font-size:.54rem;line-height:1.4;color:var(--text-muted)}

/* Lifafa-style win celebration reused for Red Green result popups. */
.rg-win-confetti-layer{position:fixed;inset:0;overflow:hidden;pointer-events:none;z-index:8}
.rg-win-confetti{position:absolute;top:-16px;width:9px;height:14px;opacity:.95;border-radius:2px;pointer-events:none;will-change:transform}
@media(prefers-reduced-motion:reduce){.rg-win-confetti-layer,.rg-win-confetti{display:none!important}}