/* Games bot workspace — comprehensive control / واجهة الألعاب layout editor.
   Reuses the site's dark-gold token palette (#0d0709 / #160b10 / #1e0f16 /
   #d62f7f) already used across style-music-individual-v4.css so this stays
   visually consistent with the rest of /dashboard without redefining colors. */

.games-feature-caption{display:flex;align-items:center;justify-content:space-between;gap:14px;margin:22px 0 14px;padding:2px}
.games-feature-caption strong{color:#f6edf1;font-size:14px}
.games-feature-caption small{color:#a38593;font-size:11px}
.games-feature-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
@media (max-width:1180px){.games-feature-grid{grid-template-columns:repeat(2,1fr)}}
@media (max-width:620px){.games-feature-grid{grid-template-columns:1fr}}
.games-feature-card{position:relative;background:#0d0709;border:1px solid #1e0f16;border-radius:16px;padding:18px;min-height:118px;display:flex;flex-direction:column;gap:8px}
.games-feature-card.is-ready{cursor:pointer;transition:border-color .15s,transform .15s}
.games-feature-card.is-ready:hover{border-color:#d62f7f;transform:translateY(-2px)}
.games-feature-card.is-soon{opacity:.55;cursor:not-allowed}
.games-feature-status{align-self:flex-start;font-size:10px;font-weight:700;padding:4px 10px;border-radius:999px;background:#1e0f16;color:#a38593}
.games-feature-card.is-ready .games-feature-status{background:rgba(214,47,127,.18);color:#d62f7f}
.games-feature-card h3{margin:0;font-size:14px;color:#f6edf1}
.games-feature-card p{margin:0;font-size:11px;color:#a38593;line-height:1.6}

.games-overview-panel{margin-top:16px;border:1px solid #3a1f2b;background:#160b10;border-radius:16px;overflow:hidden;box-shadow:0 12px 34px rgba(0,0,0,.12)}
.games-overview-panel>header{min-height:58px;padding:0 17px;display:flex;align-items:center;justify-content:space-between;gap:12px;border-bottom:1px solid #3a1f2b}
.games-overview-panel>header>div{display:flex;align-items:center;gap:9px}
.games-overview-panel>header span{width:30px;height:30px;display:grid;place-items:center;color:#e8579c;background:rgba(214,47,127,.14);border-radius:9px}
.games-overview-panel>header strong{color:#f6edf1;font-size:13px}
.games-leaderboard-list{min-height:120px;padding:12px;display:flex;flex-direction:column;gap:8px}
.games-leaderboard-list>div:not(.games-panel-empty){min-height:48px;padding:7px 10px;display:grid;grid-template-columns:28px 34px minmax(0,1fr) auto;align-items:center;gap:9px;border:1px solid #3a1f2b;border-radius:11px;background:#0d0709}
.games-leaderboard-list b{width:25px;height:25px;display:grid;place-items:center;color:#e8579c;background:rgba(214,47,127,.14);border-radius:8px;font-size:11px}
.games-leaderboard-list img{width:34px;height:34px;object-fit:cover;border:1px solid rgba(172,19,86,.3);border-radius:50%}
.games-leaderboard-list span{min-width:0}
.games-leaderboard-list strong{display:block;overflow:hidden;color:#f6edf1;font-size:11px;text-overflow:ellipsis;white-space:nowrap}
.games-leaderboard-list small{color:#d62f7f;font-size:10px}
.games-leaderboard-list em{color:#e8579c;font-size:14px;font-style:normal;font-weight:900}
.games-panel-empty{min-height:120px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;color:#a5205e;font-size:11px}

.games-interface-page .system-customize-head{position:relative}
/* The shared .system-customize-card (style-music-individual-v4.css) uses a
   warm translucent brown (rgba(40,20,29,.76)) that reads as a visibly
   different hue than the flat #0d0709/#160b10 tones every other card on this
   page uses — scoped to the Games customize page only so System's own
   customize tab (which already looks correct there) is untouched. */
.games-customize-page .system-customize-card{background:#160b10;border-color:#1e0f16}
.games-customize-page .system-avatar-field img,
.games-customize-page .system-banner-field img{border-color:#28141d}
.games-back-btn{display:inline-flex;align-items:center;gap:6px;background:#160b10;border:1px solid #3a1f2b;color:#f6edf1;font-size:11px;font-weight:700;padding:8px 16px;border-radius:999px;cursor:pointer;margin-bottom:10px}
.games-back-btn:hover{background:#1e0f16;border-color:#d62f7f}

.games-section-card{background:#0d0709;border:1px solid #1e0f16;border-radius:16px;padding:18px;margin-top:16px}
.games-section-head{display:flex;align-items:baseline;justify-content:space-between;gap:12px;flex-wrap:wrap;margin-bottom:14px}
.games-section-head strong{color:#f6edf1;font-size:13px}
.games-section-head small{color:#a38593;font-size:11px}

.games-layout-mode-row{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-bottom:12px}
.games-layout-mode-row>span{font-size:11px;color:#a38593}
.games-layout-mode-toggle{display:inline-flex;background:#160b10;border:1px solid #3a1f2b;border-radius:999px;padding:3px}
.games-layout-mode-toggle button{border:0;background:transparent;color:#a38593;font-size:11px;font-weight:700;padding:7px 16px;border-radius:999px;cursor:pointer}
.games-layout-mode-toggle button.active{background:#d62f7f;color:#0d0709}
#gamesLayoutModeHint{font-size:10px;color:#a5205e}

.games-layout-canvas{position:relative;width:100%;max-width:680px;margin:0 auto;border-radius:14px;overflow:hidden;background:#000;touch-action:none;user-select:none}
.games-layout-canvas img{display:block;width:100%;height:auto;pointer-events:none;-webkit-user-drag:none}
.games-layout-brackets{position:absolute;inset:10px;pointer-events:none}
.games-layout-brackets i{position:absolute;width:22px;height:22px;border-color:#d62f7f;border-style:solid;border-width:0}
.games-layout-brackets i:nth-child(1){top:0;left:0;border-top-width:2px;border-left-width:2px}
.games-layout-brackets i:nth-child(2){top:0;right:0;border-top-width:2px;border-right-width:2px}
.games-layout-brackets i:nth-child(3){bottom:0;left:0;border-bottom-width:2px;border-left-width:2px}
.games-layout-brackets i:nth-child(4){bottom:0;right:0;border-bottom-width:2px;border-right-width:2px}
.games-layout-avatar{position:absolute;transform:translate(-50%,-50%);border-radius:50%;overflow:hidden;border:3px solid #d62f7f;box-shadow:0 0 0 2px rgba(0,0,0,.5),0 6px 18px rgba(0,0,0,.4);cursor:move}
.games-layout-avatar img{display:block;width:100%;height:100%;object-fit:cover;pointer-events:none;-webkit-user-drag:none}
.games-layout-handle{position:absolute;right:-6px;bottom:-6px;width:18px;height:18px;border-radius:50%;background:#d62f7f;border:2px solid #0d0709;cursor:nwse-resize;z-index:2}
.games-layout-name{position:absolute;transform:translate(-50%,-50%);text-align:center;border:1px dashed rgba(214,47,127,.6);padding:2px 6px;border-radius:6px;cursor:move;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-weight:700;text-shadow:0 1px 3px rgba(0,0,0,.7)}
.games-layout-upload-row{display:flex;justify-content:center;margin-top:14px}
.games-layout-fields{display:grid;grid-template-columns:repeat(5,1fr);gap:10px;margin-top:16px}
@media (max-width:900px){.games-layout-fields{grid-template-columns:repeat(2,1fr)}}
.games-layout-fields label{display:grid;gap:6px;font-size:10px;color:#a38593}
.games-layout-fields input[type=number],.games-layout-fields input[type=text]{width:100%;border:1px solid #3a1f2b;background:#160b10;color:#f6edf1;border-radius:10px;padding:9px 10px;font:600 12px Cairo,sans-serif}
.games-layout-color-field .sant-color-trigger{height:34px}
.games-layout-color-field .sant-color-trigger-swatch,.games-layout-color-field .sant-color-trigger-hex{height:34px}

.soft-file-btn{display:inline-flex;align-items:center;gap:8px;background:#160b10;border:1px solid #3a1f2b;color:#f6edf1;font-size:11px;font-weight:700;padding:10px 18px;border-radius:999px;cursor:pointer}
.soft-file-btn:hover{background:#1e0f16;border-color:#d62f7f}
.soft-file-btn input{display:none}

.switch-row{display:flex;align-items:center;gap:10px;font-size:12px;color:#f6edf1;padding:10px 2px;cursor:pointer}
.switch-row+.switch-row{border-top:1px solid #1e0f16}
.switch-row input{display:none}
.switch-row span{width:36px;height:20px;border-radius:999px;background:#1e0f16;position:relative;flex:none;transition:.2s}
.switch-row span:after{content:"";position:absolute;width:14px;height:14px;border-radius:50%;background:#fff;top:3px;right:3px;transition:.2s}
.switch-row input:checked+span{background:#d62f7f}
.switch-row input:checked+span:after{right:19px}

.games-lobby-image-list{display:grid;gap:10px}
.games-lobby-image-row{display:flex;align-items:center;gap:12px;background:#160b10;border:1px solid #1e0f16;border-radius:12px;padding:8px 12px}
.games-lobby-image-row img{width:44px;height:44px;border-radius:10px;object-fit:cover;background:#000}
.games-lobby-image-row div{flex:1;min-width:0;display:grid;gap:2px}
.games-lobby-image-row strong{font-size:12px;color:#f6edf1}
.games-lobby-image-row small{font-size:10px;color:#a38593}

.games-roulette-timing-fields{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
@media (max-width:900px){.games-roulette-timing-fields{grid-template-columns:1fr}}
.games-stat-field{background:#0d0709;border:1px solid #1e0f16;border-radius:14px;padding:14px}
.games-stat-label{display:block;font-size:10px;font-weight:800;letter-spacing:.03em;color:#a38593;text-transform:uppercase}
.games-stat-caption{display:block;margin-top:2px;font-size:10px;color:#a5205e}
.games-stat-value-box{margin-top:10px;background:#0d070a;border:1px solid #1e0f16;border-radius:11px}
.games-stat-value-box input{width:100%;height:46px;border:0;background:transparent;color:#f6edf1;font:800 20px Cairo,sans-serif;text-align:center;padding:0 12px}
.games-stat-value-box input:focus{outline:none}
.games-roulette-spin-field{margin-top:14px}
.games-roulette-spin-field .games-stat-label{display:block;margin-bottom:8px}

.games-roulette-layout{display:grid;grid-template-columns:1fr 260px;gap:22px;align-items:start}
@media (max-width:760px){.games-roulette-layout{grid-template-columns:1fr}}
.games-roulette-fields{display:grid;gap:12px}
.games-roulette-color-field{display:grid;gap:6px;font-size:11px;color:#a38593}
.games-roulette-color-field small{color:#a5205e;font-weight:400}
.games-roulette-color3-row{display:grid;grid-template-columns:1fr auto;gap:8px;align-items:end}
.games-roulette-clear3{background:#160b10;border:1px solid #3a1f2b;color:#a38593;font-size:11px;border-radius:10px;padding:0 14px;height:34px;cursor:pointer}
.games-roulette-clear3:hover{border-color:#d62f7f;color:#f6edf1}
.games-roulette-preview{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;background:#0d070a;border:1px solid #1e0f16;border-radius:16px;padding:16px;min-height:220px}
.games-roulette-preview img{width:100%;max-width:220px;height:auto;border-radius:12px}
.games-roulette-preview .games-quick-spinner{width:26px;height:26px;border-radius:50%;border:3px solid #28141d;border-top-color:#d62f7f;animation:gamesSpin .8s linear infinite}
@keyframes gamesSpin{to{transform:rotate(360deg)}}

/* ---- Games dashboard: every game (grid, pictures, timers, roulette store) ---- */
.games-feature-card{flex-direction:row;align-items:flex-start;gap:14px;min-height:104px}
.games-feature-card:focus-visible{outline:2px solid #d62f7f;outline-offset:2px}
.games-feature-icon{flex:none;width:40px;height:40px;display:grid;place-items:center;border-radius:12px;background:rgba(214,47,127,.14);color:#e8579c}
.games-feature-icon svg,.games-feature-icon i{width:20px;height:20px}
.games-feature-body{min-width:0;flex:1;display:grid;gap:6px;align-content:start}
.games-feature-meta{display:flex;flex-wrap:wrap;gap:6px;margin-top:auto}
.games-feature-meta:empty{display:none}
.games-feature-meta em{font-style:normal;font-size:10px;font-weight:700;padding:3px 9px;border-radius:999px;background:rgba(214,47,127,.16);color:#e8579c}
.games-feature-card{flex-wrap:wrap}
.games-feature-card .games-feature-meta{flex-basis:100%;padding-inline-start:54px}

.games-image-group+.games-image-group{margin-top:22px}
.games-image-group h4{margin:0 0 10px;color:#e8579c;font-size:12px;font-weight:800}
.games-image-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
.games-image-grid-single{grid-template-columns:minmax(0,560px)}
@media (max-width:860px){.games-image-grid{grid-template-columns:1fr}}
.games-image-card{display:flex;flex-direction:column;gap:12px;background:#160b10;border:1px solid #1e0f16;border-radius:14px;padding:12px}
.games-image-card[data-has-custom="1"]{border-color:#512c3d}
.games-image-frame{position:relative;aspect-ratio:16/9;border-radius:10px;overflow:hidden;background:#0d070a;display:grid;place-items:center}
.games-image-frame img{width:100%;height:100%;object-fit:contain;display:block;-webkit-user-drag:none}
.games-image-meta{display:grid;gap:5px}
.games-image-title{display:flex;align-items:center;justify-content:space-between;gap:10px}
.games-image-title strong{color:#f6edf1;font-size:12px}
.games-image-badge{flex:none;font-style:normal;font-size:10px;font-weight:700;padding:3px 10px;border-radius:999px;background:#1e0f16;color:#a38593}
.games-image-badge.is-custom{background:rgba(214,47,127,.22);color:#dcc7d1}
.games-image-meta small{color:#a38593;font-size:10.5px;line-height:1.6}
.games-image-size{color:#a5205e!important}
.games-image-actions{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin-top:auto}
.games-image-reset{background:transparent;border:1px solid #3a1f2b;color:#a38593;font-size:11px;font-weight:700;padding:9px 16px;border-radius:999px;cursor:pointer}
.games-image-reset:hover{border-color:#d62f7f;color:#f6edf1}
.games-image-reset[hidden]{display:none}
.games-layout-upload-row{gap:10px;flex-wrap:wrap}
.games-background-color{max-width:260px}

.games-number-field{position:relative}
.games-option-box{display:flex;align-items:center;overflow:hidden}
.games-option-box input{flex:1;min-width:0;-moz-appearance:textfield}
.games-option-box input::-webkit-outer-spin-button,.games-option-box input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
.games-step{flex:none;width:46px;height:46px;border:0;background:transparent;color:#d62f7f;font:700 20px Cairo,sans-serif;cursor:pointer}
.games-step:hover{background:#160b10;color:#f6edf1}
.games-number-field.is-invalid .games-stat-value-box{border-color:#c25b4e}
.games-number-error{display:block;margin-top:6px;color:#e08a7d;font-size:10.5px}
.games-number-error[hidden]{display:none}
.games-option-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
@media (max-width:760px){.games-option-grid{grid-template-columns:1fr}}
.games-option-note{margin-top:14px}
.games-section-head .games-image-reset{padding:7px 14px}

.games-switch-row{align-items:flex-start;padding:12px 2px}
.games-switch-row>span{margin-top:2px}
.games-switch-text{display:grid;gap:3px}
.games-switch-text b{font-size:12px;color:#f6edf1;font-weight:700}
.games-switch-text small{font-size:10.5px;color:#a38593;line-height:1.6}
.games-display-toggle{margin-top:10px}

.games-perk-tabs{margin-bottom:14px}
.games-perk-tabs button{cursor:pointer}
.games-perk-tabs button.active{background:#d62f7f;color:#0d0709}
.games-perk-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
@media (max-width:1100px){.games-perk-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:640px){.games-perk-grid{grid-template-columns:1fr}}
.games-perk-card{display:grid;grid-template-columns:auto 1fr;gap:10px 12px;align-items:center;background:#160b10;border:1px solid #1e0f16;border-radius:14px;padding:12px}
.games-perk-card.is-custom{border-color:#d62f7f}
.games-perk-icon{width:42px;height:42px;display:grid;place-items:center;border-radius:12px;background:#0d070a;font-size:22px;overflow:hidden}
.games-perk-icon img{width:30px;height:30px;object-fit:contain}
.games-perk-info{min-width:0;display:grid;gap:2px}
.games-perk-info strong{color:#f6edf1;font-size:12px}
.games-perk-info small{color:#a38593;font-size:10px;line-height:1.5}
.games-perk-card .games-number-field{grid-column:1/-1;background:transparent;border:0;padding:0}
.games-perk-card .games-stat-label{display:none}
.games-perk-card .games-stat-value-box{margin-top:0}
.games-perk-card .games-step,.games-perk-card .games-stat-value-box input{height:40px}