/* ===== GAME UI (ROULETTE) ===== */
.game-ui{display:none;position:fixed;inset:0;overflow:auto;align-items:center;justify-content:center}
.game-ui.active{display:flex}
.game-ui-inner{transform:scale(2);transform-origin:center center;width:860px;flex-shrink:0;display:flex;flex-direction:column;height:540px;background:linear-gradient(135deg,#f5e6f0 0%,#e8d5f0 40%,#d5e8f5 100%);border-radius:16px;box-shadow:0 20px 60px rgba(80,40,100,0.25);overflow:hidden}

.topbar{display:flex;align-items:center;justify-content:space-between;padding:10px 20px;flex-shrink:0}
.balance-box{display:flex;align-items:center;gap:10px;background:rgba(255,255,255,0.7);border-radius:14px;padding:8px 14px;backdrop-filter:blur(6px);border:1px solid rgba(255,255,255,0.9)}
.player-tag{font-size:11px;color:#9080b0;font-weight:600;background:rgba(255,255,255,0.6);padding:6px 12px;border-radius:10px;margin-right:4px}
.balance-info{display:flex;flex-direction:column}
.balance-label{font-size:10px;color:#a090b0;font-weight:500}
.balance-amount{font-size:16px;font-weight:700;color:#3a2a4a;display:flex;align-items:center;gap:5px}
.add-btn{width:34px;height:34px;background:linear-gradient(135deg,#c0a0e0,#a080c8);border-radius:10px;border:none;color:#fff;font-size:20px;cursor:pointer;line-height:1}
.top-right{display:flex;gap:8px}
.icon-btn{width:38px;height:38px;background:rgba(255,255,255,0.6);border-radius:12px;border:1px solid rgba(255,255,255,0.9);cursor:pointer;font-size:16px;display:flex;align-items:center;justify-content:center;color:#7060a0}

.main{display:flex;flex:1;padding:0 16px;gap:16px;overflow:hidden;min-height:0;align-items:center;justify-content:center}

.table-area{flex:0 1 540px;max-width:540px;display:flex;flex-direction:column;gap:6px;min-width:0;justify-content:center}

.table-card{background:rgba(255,255,255,0.55);border-radius:18px;padding:12px 14px;border:1px solid rgba(255,255,255,0.9);backdrop-filter:blur(8px)}
.table-status{text-align:center;font-size:12px;color:#9080b0;font-weight:600;letter-spacing:1px;margin-bottom:10px;background:rgba(255,255,255,0.5);border-radius:8px;padding:5px}

.num-table{display:flex;gap:3px;width:100%}
.zero-col{display:flex;align-items:center;justify-content:center}
.zero-cell{width:36px;height:110px;background:#5a9a5a;border-radius:8px;color:#fff;font-size:16px;font-weight:700;cursor:pointer;display:flex;align-items:center;justify-content:center;border:none;position:relative;transition:filter .12s}
.zero-cell:hover{filter:brightness(1.15)}
.zero-cell.has-bet{outline:2px solid #f5c842}
.numbers-grid{flex:1;display:grid;grid-template-rows:repeat(3,1fr);grid-template-columns:repeat(12,1fr);gap:3px}
.n-cell{height:34px;border-radius:7px;color:#fff;font-size:12px;font-weight:700;cursor:pointer;border:none;position:relative;transition:filter .12s;display:flex;align-items:center;justify-content:center}
.n-cell.red-n{background:#e05060}
.n-cell.black-n{background:#5a5a7a}
.n-cell:hover{filter:brightness(1.2)}
.n-cell.has-bet{outline:2px solid #f5c842}
.col2-1-btn{display:flex;flex-direction:column;justify-content:space-between;gap:3px}
.col21-cell{width:46px;flex:1;background:rgba(200,180,230,0.4);border:1px solid rgba(180,160,210,0.5);border-radius:7px;color:#7060a0;font-size:11px;font-weight:600;cursor:pointer;display:flex;align-items:center;justify-content:center;position:relative}
.col21-cell:hover{background:rgba(200,180,230,0.7)}
.col21-cell.has-bet{outline:2px solid #f5c842}

.dozen-row{display:flex;gap:3px}
.doz-btn{flex:1;height:30px;background:rgba(255,255,255,0.45);border:1px solid rgba(200,180,220,0.5);border-radius:8px;color:#7060a0;font-size:11px;font-weight:600;cursor:pointer;font-family:inherit;position:relative;transition:all .12s}
.doz-btn:hover{background:rgba(255,255,255,0.75)}
.doz-btn.has-bet{outline:2px solid #f5c842;background:rgba(255,255,255,0.7)}

.outside-row{display:flex;gap:3px}
.out-btn{flex:1;height:30px;background:rgba(255,255,255,0.45);border:1px solid rgba(200,180,220,0.5);border-radius:8px;color:#7060a0;font-size:11px;font-weight:600;cursor:pointer;font-family:inherit;display:flex;align-items:center;justify-content:center;gap:4px;position:relative;transition:all .12s}
.out-btn:hover{background:rgba(255,255,255,0.75)}
.out-btn.has-bet{outline:2px solid #f5c842}
.diamond{width:16px;height:16px;transform:rotate(45deg);display:inline-block;border-radius:2px}
.d-red{background:#e05060}.d-black{background:#5a5a7a}

.wheel-area{width:230px;flex-shrink:0;display:flex;flex-direction:column;align-items:center;justify-content:center;position:relative}
.wheel-container{position:relative;width:200px;height:200px}
canvas#wheelCanvas{display:block;border-radius:50%;position:absolute;top:0;left:0;width:200px;height:200px}
.wheel-pointer{position:absolute;top:4px;left:50%;transform:translateX(-50%);width:0;height:0;border-left:7px solid transparent;border-right:7px solid transparent;border-top:16px solid #e0c060;filter:drop-shadow(0 2px 4px rgba(0,0,0,0.3));z-index:5}
.wheel-hub{position:absolute;top:100px;left:100px;transform:translate(-50%,-50%);width:46px;height:46px;border-radius:50%;background:radial-gradient(circle at 40% 35%,#f5e0b0,#c09030);border:3px solid #e0c060;z-index:1;display:flex;align-items:center;justify-content:center;box-shadow:0 2px 8px rgba(0,0,0,0.2)}

.magnifier{position:absolute;top:107px;left:100px;transform:translateX(-50%);width:76px;height:76px;z-index:6;margin-left:3px;margin-top:33px}
.mag-circle{width:68px;height:68px;border-radius:50%;background:#f5edf8;border:3px solid rgba(200,170,230,0.85);display:flex;align-items:center;justify-content:center;box-shadow:0 4px 16px rgba(0,0,0,0.25)}
.mag-number{font-size:24px;font-weight:800;color:#3a2a4a}
.mag-handle{display:none}

.history-bar{background:rgba(255,255,255,0.55);border-top:1px solid rgba(200,180,220,0.4);padding:10px 16px;flex-shrink:0;backdrop-filter:blur(6px)}
.history-top{display:flex;align-items:center;gap:16px;margin-bottom:8px}
.history-title{font-size:13px;font-weight:700;color:#5a4a7a}
.history-legend{display:flex;gap:12px;font-size:11px;color:#8070a0}
.legend-dot{width:10px;height:10px;border-radius:50%;display:inline-block;margin-right:4px;vertical-align:middle}
.history-clear{margin-left:auto;padding:4px 12px;background:rgba(255,255,255,0.6);border:1px solid rgba(200,180,220,0.6);border-radius:8px;font-size:11px;color:#9080b0;cursor:pointer;font-family:inherit}
.history-clear:hover{background:rgba(255,255,255,0.9)}
.history-nums{display:flex;gap:6px;overflow-x:auto;padding-bottom:2px}
.history-nums::-webkit-scrollbar{height:3px}
.history-nums::-webkit-scrollbar-thumb{background:#c0a0e0;border-radius:2px}
.h-num{width:32px;height:32px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:12px;font-weight:700;color:#fff;flex-shrink:0}
.h-red{background:#e05060}.h-black{background:#5a5a7a}.h-green{background:#5a9a5a}

.bet-dot{position:absolute;top:-4px;right:-4px;background:#f5c842;color:#3a2a00;border-radius:50%;width:16px;height:16px;font-size:9px;display:flex;align-items:center;justify-content:center;font-weight:700;z-index:2;border:1px solid #fff}

/* CONTEXT MENU (меню быстрой ставки на числа/секторы) */
.ctx-menu{position:fixed;background:#fff;border:1.5px solid rgba(180,150,210,0.6);border-radius:12px;padding:10px;z-index:1000;min-width:170px;box-shadow:0 8px 28px rgba(100,60,140,0.3)}
.ctx-menu .ctx-title{font-size:11px;color:#9080b0;margin-bottom:8px;letter-spacing:0.5px;text-align:center;font-weight:600}
.ctx-quick{display:flex;gap:4px;margin-bottom:8px;flex-wrap:wrap}
.ctx-q{flex:1;min-width:34px;padding:6px 4px;background:rgba(192,160,224,0.18);border:1px solid rgba(180,150,210,0.5);border-radius:8px;color:#7050a0;font-size:12px;font-weight:600;cursor:pointer;font-family:inherit;text-align:center}
.ctx-q:hover{background:rgba(192,160,224,0.35)}
.ctx-input-row{display:flex;gap:4px;margin-bottom:8px}
.ctx-input{flex:1;background:#f7f0fa;border:1px solid rgba(180,150,210,0.5);border-radius:8px;color:#3a2a4a;font-size:13px;padding:6px 8px;width:80px;font-family:inherit;outline:none}
.ctx-input:focus{border-color:#a070c8}
.ctx-ok{padding:6px 12px;background:linear-gradient(135deg,#c0a0e0,#9060c8);border:none;border-radius:8px;color:#fff;font-size:12px;font-weight:600;cursor:pointer;font-family:inherit}
.ctx-ok:hover{filter:brightness(1.1)}
.ctx-hint{background:rgba(192,160,224,0.18);border:1px solid rgba(180,150,210,0.5);border-radius:8px;padding:7px 8px;font-size:11px;color:#7050a0;font-weight:600;text-align:center;margin-bottom:8px;cursor:pointer}
.ctx-hint:hover{background:rgba(192,160,224,0.35)}
.ctx-cancel{width:100%;padding:5px;background:none;border:1px solid rgba(200,160,160,0.4);border-radius:8px;color:#b08080;font-size:11px;cursor:pointer;font-family:inherit}
.ctx-cancel:hover{background:rgba(200,100,100,0.08)}

@media (max-width:700px){
  .ctx-menu{min-width:120px;padding:7px;border-radius:9px}
  .ctx-menu .ctx-title{font-size:9px;margin-bottom:5px}
  .ctx-quick{gap:3px;margin-bottom:5px}
  .ctx-q{padding:4px 3px;font-size:9px;border-radius:6px;min-width:24px}
  .ctx-input-row{gap:3px;margin-bottom:5px}
  .ctx-input{font-size:10px;padding:4px 5px;border-radius:6px}
  .ctx-ok{padding:4px 8px;font-size:9px;border-radius:6px}
  .ctx-hint{padding:5px 5px;font-size:8px;border-radius:6px;margin-bottom:5px}
  .ctx-cancel{padding:4px;font-size:9px;border-radius:6px}
}