/* connect-four.css — HotelsCasa */
.c4-wrapper{display:inline-block}
.c4-open-btn{background:linear-gradient(135deg,#4a0000 0%,#c0392b 100%);color:#fff;border:none;border-radius:10px;padding:12px 28px;font-size:1rem;font-weight:600;cursor:pointer;box-shadow:0 4px 14px rgba(0,0,0,.25);transition:transform .15s,box-shadow .15s}
.c4-open-btn:hover{transform:translateY(-2px);box-shadow:0 6px 18px rgba(0,0,0,.3)}
.c4-modal{display:flex;position:fixed;inset:0;z-index:99999;background:rgba(0,0,0,.72);align-items:center;justify-content:center;padding:12px}
.c4-modal-inner{background:#1a1a2e;border-radius:16px;width:100%;max-width:460px;max-height:95dvh;overflow-y:auto;padding:20px;color:#e8e8f0;position:relative;box-shadow:0 20px 60px rgba(0,0,0,.6)}
.c4-prize-title{text-align:center;font-size:.8rem;font-weight:700;letter-spacing:.12em;color:#f4c430;text-transform:uppercase;margin-bottom:6px}
.c4-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:14px}
.c4-logo{font-size:1.1rem;font-weight:800;color:#fff}.c4-logo span{color:#e74c3c}
.c4-close{background:none;border:none;color:#aaa;font-size:1.3rem;cursor:pointer;padding:4px 8px;border-radius:6px}
.c4-coins-bar{background:rgba(255,255,255,.04);border-radius:12px;padding:12px 14px;margin-bottom:12px;position:relative}
.c4-coins-label{font-size:.75rem;color:#888;margin-bottom:8px;text-transform:uppercase;letter-spacing:.08em}
.c4-coins-row{display:flex;flex-wrap:wrap;gap:4px}
.c4-coin-slot{width:calc(5% - 4px);min-width:20px;aspect-ratio:1}
.c4-coin{width:100%;height:100%;display:flex;align-items:center;justify-content:center;font-size:.85rem;border-radius:50%}
.c4-coin--empty{opacity:.25}.c4-coin--filled{opacity:1;animation:c4-pop .4s cubic-bezier(.17,.67,.47,1.4)}
@keyframes c4-pop{0%{transform:scale(0)}60%{transform:scale(1.3)}100%{transform:scale(1)}}
.c4-info-btn{position:absolute;top:10px;right:10px;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.12);color:#ccc;border-radius:50%;width:24px;height:24px;font-size:.8rem;cursor:pointer}
.c4-info-popup{display:flex;position:absolute;inset:0;background:rgba(0,0,0,.8);z-index:10;align-items:center;justify-content:center;border-radius:16px;padding:20px}
.c4-info-inner{background:#16213e;border-radius:12px;padding:24px;max-width:320px;width:100%;position:relative}
.c4-info-inner h3{color:#e74c3c;margin-bottom:14px}.c4-info-inner ul{padding-left:1.2em;line-height:1.9}
.c4-info-inner li{font-size:.9rem;color:#d0d0e0}.c4-info-note{font-size:.78rem;color:#888;margin-top:12px}
.c4-info-close{position:absolute;top:10px;right:12px;background:none;border:none;color:#aaa;font-size:1.2rem;cursor:pointer}
.c4-player-status{display:flex;align-items:center;justify-content:space-between;background:rgba(255,255,255,.04);border-radius:10px;padding:8px 14px;margin-bottom:14px}
.c4-rank-badge{display:flex;align-items:center;gap:6px;font-size:.9rem;font-weight:600}.c4-rank-icon{font-size:1.1rem}.c4-rank-name{color:#d0d0e0}
.c4-stats{display:flex;gap:14px;font-size:.78rem;color:#888}.c4-stat-val{color:#f4c430;font-weight:700}
.c4-screen--mode h2{text-align:center;font-size:1rem;color:#d0d0e0;margin-bottom:16px}
.c4-mode-cards{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-bottom:12px}
.c4-mode-card{background:rgba(255,255,255,.05);border:1.5px solid rgba(255,255,255,.08);border-radius:12px;padding:18px 12px;text-align:center;position:relative}
.c4-mode-card--prize{border-color:rgba(231,76,60,.25)}.c4-mode-card--prize:hover{border-color:#e74c3c;background:rgba(231,76,60,.05)}
.c4-mode-card--locked{opacity:.75}
.c4-mode-badge{position:absolute;top:-10px;left:50%;transform:translateX(-50%);background:#f4c430;color:#1a1a2e;font-size:.65rem;font-weight:800;padding:3px 10px;border-radius:20px;white-space:nowrap}
.c4-mode-icon{font-size:2rem;margin-bottom:8px}.c4-mode-title{font-size:.95rem;font-weight:700;margin-bottom:6px}
.c4-mode-desc{font-size:.78rem;color:#888;line-height:1.5;margin-bottom:12px}
.c4-mode-btn{background:rgba(255,255,255,.1);border:none;color:#e8e8f0;border-radius:8px;padding:8px 16px;font-size:.85rem;font-weight:600;cursor:pointer;width:100%}
.c4-mode-btn--prize{background:linear-gradient(135deg,#f4c430,#e0a800);color:#1a1a2e}
.c4-difficulty-row{display:flex;align-items:center;gap:6px;justify-content:center;margin-top:10px;font-size:.82rem;color:#888}
.c4-diff-btn{background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.1);color:#aaa;border-radius:8px;padding:5px 12px;font-size:.82rem;cursor:pointer}
.c4-diff-btn--active{background:rgba(231,76,60,.2);border-color:#e74c3c;color:#e74c3c;font-weight:700}
.c4-register-popup{display:flex;position:absolute;inset:0;background:rgba(0,0,0,.8);z-index:10;align-items:center;justify-content:center;border-radius:16px;padding:20px}
.c4-register-inner{background:#16213e;border-radius:12px;padding:28px 24px;max-width:300px;width:100%;text-align:center;position:relative}
.c4-register-inner h3{color:#e74c3c;margin-bottom:10px}.c4-register-inner p{font-size:.88rem;color:#ccc;margin-bottom:16px}
.c4-register-close{position:absolute;top:10px;right:12px;background:none;border:none;color:#aaa;font-size:1.1rem;cursor:pointer}
.c4-register-btn{display:inline-block;background:linear-gradient(135deg,#f4c430,#e0a800);color:#1a1a2e;text-decoration:none;border-radius:8px;padding:10px 28px;font-weight:700}

/* ── Игра ── */
.c4-screen--game{padding:6px 0}
.c4-game-top{display:flex;justify-content:space-between;align-items:center;margin-bottom:10px}
.c4-turn-label{font-size:.9rem;font-weight:600;color:#d0d0e0}
.c4-menu-btn{background:none;border:1px solid rgba(255,255,255,.12);color:#888;border-radius:8px;padding:5px 12px;font-size:.78rem;cursor:pointer}

/* Поле */
.c4-board-wrap{display:flex;justify-content:center}
.c4-board{width:100%;max-width:340px}
.c4-arrows{display:grid;grid-template-columns:repeat(7,1fr);gap:3px;margin-bottom:3px}
.c4-arrow{background:rgba(255,255,255,.06);border:none;color:#e74c3c;font-size:.9rem;cursor:pointer;border-radius:6px 6px 0 0;padding:5px 0;transition:background .1s}
.c4-arrow:hover{background:rgba(231,76,60,.2)}
.c4-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:4px;background:#16296b;padding:8px;border-radius:10px}
.c4-cell{aspect-ratio:1;border-radius:50%;background:#1a1a2e;transition:background .2s;box-shadow:inset 0 2px 6px rgba(0,0,0,.5)}
.c4-cell--hover{background:#25254a}
.c4-cell--p1{background:radial-gradient(circle at 38% 38%,#ff6b6b,#c0392b);box-shadow:0 0 8px rgba(231,76,60,.4);animation:c4-drop .3s ease}
.c4-cell--p2{background:radial-gradient(circle at 38% 38%,#ffe566,#f4c430);box-shadow:0 0 8px rgba(244,196,48,.4);animation:c4-drop .3s ease}
.c4-cell--last{animation:c4-drop .3s ease,c4-pulse 1s ease 0.3s}
@keyframes c4-drop{from{opacity:0;transform:scale(.6)}to{opacity:1;transform:scale(1)}}
@keyframes c4-pulse{0%{box-shadow:0 0 8px rgba(244,196,48,.4)}50%{box-shadow:0 0 20px rgba(244,196,48,.8)}100%{box-shadow:0 0 8px rgba(244,196,48,.4)}}

.c4-result-banner{text-align:center;font-size:1.1rem;font-weight:800;padding:10px 16px;border-radius:10px;margin:10px 0;animation:c4-banner .4s ease}
@keyframes c4-banner{from{transform:scale(.8);opacity:0}to{transform:none;opacity:1}}
.c4-result--win{background:rgba(45,106,79,.3);color:#52b788;border:1px solid rgba(82,183,136,.3)}
.c4-result--lose{background:rgba(192,57,43,.2);color:#e74c3c;border:1px solid rgba(231,76,60,.3)}
.c4-result--draw{background:rgba(255,255,255,.05);color:#aaa;border:1px solid rgba(255,255,255,.1)}

.c4-next-actions{display:flex;gap:10px;justify-content:center;margin-top:12px}
.c4-btn{border:none;border-radius:10px;padding:11px 20px;font-size:.9rem;font-weight:700;cursor:pointer}
.c4-btn--new{background:linear-gradient(135deg,#c0392b,#7b1c1c);color:#fff}
.c4-btn--menu{background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.12);color:#ccc}
.c4-screen--champion{text-align:center;padding:20px 0}
.c4-champion-title{font-size:2rem;font-weight:900;color:#f4c430;margin-bottom:12px}
.c4-champion-content p{font-size:.92rem;color:#ccc;margin-bottom:8px}
.c4-champion-btn{display:inline-block;background:linear-gradient(135deg,#f4c430,#e0a800);color:#1a1a2e;text-decoration:none;border-radius:10px;padding:12px 28px;font-weight:800;margin:8px 0 12px}
.c4-champion-play-btn{background:none;border:1px solid rgba(255,255,255,.15);color:#888;border-radius:8px;padding:8px 20px;font-size:.85rem;cursor:pointer;display:block;margin:0 auto}
.c4-modal-inner::-webkit-scrollbar{width:4px}
.c4-modal-inner::-webkit-scrollbar-thumb{background:rgba(255,255,255,.15);border-radius:2px}
@media(max-width:420px){.c4-modal-inner{padding:14px}.c4-grid{gap:3px;padding:6px}.c4-coin-slot{min-width:16px}}

/* v2: призовая карточка вырезана — единственная карточка по центру
   (сетка была на 2 колонки, и карточка прижималась влево) */
.c4-mode-cards { display: flex !important; justify-content: center; grid-template-columns: none; }
.c4-mode-cards .c4-mode-card { width: 100%; max-width: 300px; }