/* /domains/gromadan.com/public_html/css/game/go.css
   Підключається ПІСЛЯ /css/style.css — CSS-змінні вже оголошені там. */

/* ── Екрани ────────────────────────────────────────────────────── */
.go-screen { display: none; width: 100%; flex-direction: column; }
.go-screen.active { display: flex; }

#go-lobby  { align-items: stretch; max-width: 520px; margin: 0 auto; gap: 16px; }
#go-waiting { align-items: center;  max-width: 420px; margin: auto; }
#go-game   { align-items: center;  max-width: 100%; margin: 0 auto; gap: 10px; }
#go-ended  { align-items: center;  max-width: 420px; margin: auto; }

/* ── Лобі ──────────────────────────────────────────────────────── */
.go-card {
    background: var(--surface);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow);
    padding: 26px;
}

.go-card-title { font-size: 1.3rem; font-weight: 800; margin-bottom: 4px; }
.go-card-sub   { font-size: .88rem; color: var(--text-secondary); margin-bottom: 22px; }

.go-btns { display: flex; gap: 12px; }

.go-btn {
    flex: 1;
    padding: 15px 12px;
    border-radius: var(--radius-md);
    border: none;
    font-weight: 700;
    font-size: .92rem;
    cursor: pointer;
    transition: var(--transition);
}
.go-btn-primary   { background: var(--gradient); color: #fff; }
.go-btn-primary:hover { filter: brightness(1.08); transform: translateY(-1px); }
.go-btn-secondary { background: var(--bg); color: var(--text-primary); border: 2px solid var(--border); }
.go-btn-secondary:hover { border-color: var(--primary); color: var(--primary); background: var(--primary-light); }

/* Конфіг бота */
.go-bot-cfg { display: none; margin-top: 16px; padding: 16px; background: var(--bg); border-radius: var(--radius-md); }
.go-bot-cfg.open { display: block; }
.go-bot-lbl { display: flex; justify-content: space-between; font-size: .88rem; font-weight: 600; margin-bottom: 10px; }
.go-bot-val { background: var(--primary); color: #fff; padding: 2px 12px; border-radius: var(--radius-pill); font-weight: 700; }
input[type=range].go-slider { width: 100%; accent-color: var(--primary); }
.go-bot-start { width: 100%; margin-top: 14px; padding: 13px; border: none; border-radius: var(--radius-md);
    background: var(--gradient); color: #fff; font-weight: 700; cursor: pointer; }

/* Список партій */
.go-section-title {
    font-size: .72rem; font-weight: 700; text-transform: uppercase;
    letter-spacing: .5px; color: var(--text-secondary); margin-bottom: 8px;
}
.go-games-list { display: flex; flex-direction: column; gap: 8px; }
.go-games-empty { font-size: .88rem; color: var(--text-secondary); text-align: center; padding: 16px 0; }

.go-game-item {
    display: flex; align-items: center; gap: 10px;
    padding: 10px 14px; background: var(--bg);
    border-radius: var(--radius-md); cursor: pointer;
    border: 1px solid transparent; transition: var(--transition);
    text-decoration: none; color: inherit;
}
.go-game-item:hover { border-color: var(--primary); background: var(--primary-light); }
.go-game-item-ava { width: 28px; height: 28px; border-radius: 50%; object-fit: cover; flex-shrink: 0; }
.go-game-item-info { flex: 1; font-size: .88rem; font-weight: 600; }
.go-game-item-sub  { font-size: .75rem; color: var(--text-secondary); font-weight: 400; }
.go-badge { padding: 3px 10px; border-radius: var(--radius-pill); font-size: .7rem; font-weight: 700; }
.go-badge-live    { background: #ECFDF5; color: #059669; }
.go-badge-spectators { background: var(--primary-light); color: var(--primary); }

/* ── Очікування ─────────────────────────────────────────────────── */
#go-waiting {
    background: var(--surface); border-radius: var(--radius-lg);
    box-shadow: var(--shadow); padding: 52px 28px;
    text-align: center; gap: 14px;
}
.go-pulse {
    width: 88px; height: 88px; border-radius: 50%;
    background: var(--primary-light);
    display: flex; align-items: center; justify-content: center;
    font-size: 2.6rem;
    animation: go-pulse 1.6s ease-out infinite;
}
@keyframes go-pulse {
    0%   { box-shadow: 0 0 0 0   rgba(15,76,129,.35); }
    70%  { box-shadow: 0 0 0 20px rgba(15,76,129,0);  }
    100% { box-shadow: 0 0 0 0   rgba(15,76,129,0);   }
}
.go-wait-text { color: var(--text-secondary); font-size: .9rem; }
.go-wait-cancel {
    padding: 10px 22px; border: 2px solid var(--border);
    border-radius: var(--radius-pill); background: transparent;
    color: var(--text-secondary); font-weight: 600; cursor: pointer;
    transition: var(--transition);
}
.go-wait-cancel:hover { border-color: var(--nope-bg); color: var(--nope-bg); }

/* ── Гра ────────────────────────────────────────────────────────── */
.go-game-hdr {
    display: flex; align-items: center; justify-content: space-between;
    width: 100%; padding: 0 2px;
}
.go-game-label { font-size: .82rem; font-weight: 700; color: var(--text-secondary); }
.go-turn-badge {
    display: flex; align-items: center; gap: 6px;
    font-size: .88rem; font-weight: 700; color: var(--primary);
}
.go-rules-btn {
    width: 36px; height: 36px; border-radius: 50%; border: 2px solid var(--border);
    background: var(--surface); color: var(--text-secondary);
    font-weight: 700; font-size: .92rem; cursor: pointer;
    display: flex; align-items: center; justify-content: center;
    transition: var(--transition);
}
.go-rules-btn:hover { border-color: var(--primary); color: var(--primary); }

/* Хто грає */
.go-players {
    display: flex; align-items: center; gap: 10px;
    width: 100%; background: var(--surface);
    border-radius: var(--radius-md); padding: 10px 14px;
    box-shadow: var(--shadow);
}
.go-player { display: flex; align-items: center; gap: 8px; flex: 1; min-width: 0; }
.go-player.right { flex-direction: row-reverse; text-align: right; }
.go-pava { width: 36px; height: 36px; border-radius: 50%; object-fit: cover; flex-shrink: 0; border: 2px solid transparent; transition: border-color .2s; }
.go-player.active .go-pava { border-color: var(--primary); }
.go-pname { font-size: .88rem; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.go-pcap  { font-size: .72rem; color: var(--text-secondary); }
.go-stone-dot { width: 18px; height: 18px; border-radius: 50%; flex-shrink: 0; }
.go-stone-dot.black { background: #111; box-shadow: inset -1px -1px 3px rgba(255,255,255,.2); }
.go-stone-dot.white { background: #fff; border: 2px solid #aaa; }
.go-vs { font-size: .8rem; font-weight: 700; color: var(--text-secondary); flex-shrink: 0; }

/* Глядачі */
.go-spect-banner {
    width: 100%; text-align: center; padding: 7px;
    background: #FFF4E5; color: #B45309;
    border-radius: var(--radius-sm); font-size: .8rem; font-weight: 600;
}

/* Дошка */
.go-board-wrap { position: relative; width: 100%; max-width: 720px; }
#goCanvas { width: 100%; aspect-ratio: 1; display: block; cursor: crosshair; border-radius: 6px; }
#goCanvas.no-turn { cursor: default; }

/* Повідомлення */
.go-msg {
    width: 100%; text-align: center; padding: 9px 16px;
    border-radius: var(--radius-sm); font-size: .85rem; font-weight: 600;
}
.go-msg.info    { background: var(--primary-light); color: var(--primary); }
.go-msg.error   { background: #FFECEC; color: var(--nope-bg); }
.go-msg.success { background: #ECFDF5; color: #059669; }

/* Кнопки дій */
.go-actions { display: flex; gap: 10px; width: 100%; }
.go-action {
    flex: 1; padding: 12px; border: 2px solid var(--border);
    border-radius: var(--radius-md); background: transparent;
    color: var(--text-secondary); font-weight: 600; font-size: .88rem;
    cursor: pointer; transition: var(--transition);
}
.go-action:hover { border-color: var(--primary); color: var(--primary); background: var(--primary-light); }
.go-action.danger:hover { border-color: var(--nope-bg); color: var(--nope-bg); background: #FFECEC; }

/* ── Кінець гри ─────────────────────────────────────────────────── */
#go-ended {
    background: var(--surface); border-radius: var(--radius-lg);
    box-shadow: var(--shadow); padding: 52px 28px;
    text-align: center; gap: 8px;
}
.go-end-icon  { font-size: 3rem; }
.go-end-title { font-size: 1.25rem; font-weight: 800; }
.go-end-sub   { color: var(--text-secondary); font-size: .9rem; }
.go-end-score {
    display: flex; gap: 20px; justify-content: center;
    background: var(--bg); border-radius: var(--radius-md);
    padding: 14px 24px; margin: 12px 0;
}
.go-end-score-item { text-align: center; }
.go-end-score-num  { font-size: 1.5rem; font-weight: 800; color: var(--primary); }
.go-end-score-lbl  { font-size: .72rem; color: var(--text-secondary); margin-top: 2px; }
.go-end-back { margin-top: 10px; padding: 13px 28px; border: none;
    border-radius: var(--radius-md); background: var(--gradient);
    color: #fff; font-weight: 700; cursor: pointer; }

/* ── Попап правил ───────────────────────────────────────────────── */
.go-rules-content h4 { font-size: .95rem; font-weight: 700; color: var(--primary); margin: 14px 0 6px; }
.go-rules-content h4:first-child { margin-top: 0; }
.go-rules-content p  { font-size: .87rem; line-height: 1.5; margin-bottom: 6px; }

/* ── Мобільна адаптація ─────────────────────────────────────────── */
@media (max-width: 900px) {
    #go-lobby  { max-width: 100%; padding: 0 14px; }
    #go-waiting, #go-ended { max-width: 100%; border-radius: 0; box-shadow: none; min-height: calc(100dvh - 60px); justify-content: center; }
    .go-card   { border-radius: 0; box-shadow: none; }
    .go-btns   { flex-direction: column; }
    #go-game   { max-width: 100%; padding: 8px 10px; }
    .go-board-wrap { max-width: 100%; }
    #goCanvas  { border-radius: 0; }
}
@media (min-width: 901px) {
    .go-players   { padding: 16px 22px; gap: 16px; }
    .go-player    { gap: 14px; }
    .go-pava      { width: 64px; height: 64px; border-width: 3px; }
    .go-pname     { font-size: 1.15rem; }
    .go-pcap      { font-size: .88rem; }
    .go-stone-dot { width: 28px; height: 28px; }
    .go-vs        { font-size: 1rem; }
}
.go-spect-banner { display: flex; align-items: center; justify-content: center; gap: 12px; }
.go-spect-leave {
    padding: 5px 14px; border: 2px solid #B45309; border-radius: var(--radius-pill);
    background: transparent; color: #B45309; font-weight: 700; font-size: .8rem; cursor: pointer;
}
.go-spect-leave:hover { background: #B45309; color: #fff; }
.go-wait-bot { width: 100%; margin-top: 10px; padding-top: 16px; border-top: 1px solid var(--border);
    display: flex; flex-direction: column; gap: 10px; align-items: center; }
.go-wait-bot-row { display: flex; gap: 8px; width: 100%; }
.go-wait-sel { padding: 10px; border: 2px solid var(--border); border-radius: var(--radius-md);
    background: var(--bg); color: var(--text-primary); font: inherit; }
.go-wait-play { flex: 1; padding: 12px; border: none; border-radius: var(--radius-md);
    background: var(--gradient); color: #fff; font-weight: 700; cursor: pointer; }

.go-search-bar { width: 100%; max-width: 720px; align-items: center; gap: 10px; padding: 8px 14px;
    background: var(--primary-light); color: var(--primary); border-radius: var(--radius-md);
    font-size: .82rem; font-weight: 600; }
.go-search-bar button { margin-left: auto; border: none; background: transparent; color: var(--primary);
    font-weight: 700; font-size: .8rem; cursor: pointer; }
.go-search-dot { width: 10px; height: 10px; border-radius: 50%; background: var(--primary);
    animation: go-blink 1s infinite; }
@keyframes go-blink { 50% { opacity: .25; } }

/* ═══ Лобі v2 (широкі блоки) ═══ */
#go-lobby { max-width: 900px; gap: 20px; }

.go-panel, .go-card {
    background: var(--surface);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow);
    padding: 26px 28px;
}
.go-panel-title {
    display: flex; align-items: center; gap: 12px;
    font-size: 1.35rem; font-weight: 800; color: var(--primary);
    margin-bottom: 16px;
}
.go-live-count {
    font-size: .8rem; font-weight: 700; padding: 5px 12px;
    border-radius: var(--radius-pill);
    background: var(--primary-light); color: var(--primary);
}
.go-live-count:empty { display: none; }

.go-card-title { font-size: 1.8rem; }
.go-card-hint  { margin-top: 16px; font-size: .85rem; color: var(--text-secondary); }
.go-slider-ends {
    display: flex; justify-content: space-between;
    font-size: .7rem; color: var(--text-secondary); margin-top: 4px;
}

/* Топ-3 */
.go-top-list { display: flex; flex-direction: column; gap: 12px; }
.go-top-item {
    display: grid; grid-template-columns: 38px 56px 1fr auto auto;
    align-items: center; gap: 14px;
    padding: 12px 16px; border: 1px solid var(--border); border-radius: var(--radius-md);
}
.go-medal {
    width: 36px; height: 36px; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    color: #fff; font-weight: 800;
}
.go-medal.m1 { background: #F5B921; }
.go-medal.m2 { background: #AEB7C4; }
.go-medal.m3 { background: #C98B5E; }
.go-top-ava  { width: 56px; height: 56px; border-radius: 50%; object-fit: cover; }
.go-top-info { min-width: 0; }
.go-top-name { font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.go-top-sub  { font-size: .78rem; color: var(--text-secondary); }
.go-top-rate small, .go-top-win small { display: block; font-size: .72rem; color: var(--text-secondary); }
.go-top-rate b { font-size: 1.35rem; color: var(--primary); }
.go-top-win  { background: var(--primary-light); border-radius: var(--radius-md); padding: 8px 16px; text-align: center; }
.go-top-win b { color: var(--primary); }

/* Партії онлайн */
.go-game-item {
    display: flex; align-items: center; gap: 14px;
    padding: 12px 16px; background: var(--surface);
    border: 1px solid var(--border); border-radius: var(--radius-md);
}
.go-gavas { display: flex; flex-shrink: 0; }
.go-gavas img { width: 44px; height: 44px; border-radius: 50%; object-fit: cover; border: 2px solid var(--surface); }
.go-gavas img + img { margin-left: -12px; }
.go-gnames { flex: 1; min-width: 0; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.go-gnames i { font-style: normal; color: var(--text-secondary); font-weight: 600; margin: 0 4px; }
.go-gside { display: flex; align-items: center; gap: 10px; flex-shrink: 0; }
.go-ingame { font-size: .75rem; font-weight: 700; color: #059669; }
.go-watch {
    padding: 9px 16px; border-radius: var(--radius-pill);
    background: var(--gradient); color: #fff; font-size: .8rem; font-weight: 700;
}

/* Очікування: повзунок */
.go-wait-bot .go-slider { width: 100%; }
.go-wait-bot .go-slider-ends { width: 100%; }
.go-wait-play { width: 100%; }

/* Мобільна версія: низькі блоки, нічого не вилазить */
@media (max-width: 900px) {
    #go-lobby { padding: 0 12px; gap: 12px; }
    .go-panel, .go-card { padding: 16px; border-radius: var(--radius-lg); box-shadow: var(--shadow); }
    .go-panel-title { font-size: 1.1rem; margin-bottom: 10px; }
    .go-card-title  { font-size: 1.4rem; }
    .go-card-sub    { margin-bottom: 14px; }
    .go-btns { flex-direction: row; gap: 8px; }
    .go-btn  { padding: 12px 8px; font-size: .85rem; }
    .go-card-hint { margin-top: 10px; }

    .go-top-list { gap: 8px; }
    .go-top-item { grid-template-columns: 30px 42px 1fr auto; gap: 10px; padding: 8px 10px; }
    .go-medal    { width: 28px; height: 28px; font-size: .8rem; }
    .go-top-ava  { width: 42px; height: 42px; }
    .go-top-win  { display: none; }
    .go-top-rate b { font-size: 1.05rem; }

    .go-game-item { padding: 8px 10px; gap: 8px; }
    .go-gavas img { width: 36px; height: 36px; }
    .go-ingame { display: none; }
    .go-watch  { padding: 7px 10px; font-size: .72rem; }
}

/* ═══ Рейтинг ═══ */
.go-top-page { width: 100%; max-width: 900px; margin: 0 auto; display: flex; flex-direction: column; gap: 20px; }
.go-medal.mx { background: var(--primary-light); color: var(--primary); font-size: .75rem; }
a.go-top-name { display: block; color: inherit; text-decoration: none; }
a.go-top-name:hover { color: var(--primary); }
.go-top-sub { display: flex; align-items: center; gap: 6px; min-width: 0; }
.go-top-sub span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.go-top-all {
    display: block; margin-top: 14px; padding: 12px; text-align: center;
    border-radius: var(--radius-md); background: var(--primary-light); color: var(--primary);
    font-weight: 700; font-size: .9rem; text-decoration: none; transition: var(--transition);
}
.go-top-all:hover { filter: brightness(.96); }
.go-top-pager { display: flex; justify-content: space-between; align-items: center; margin-top: 16px; gap: 12px; }
.go-top-pager a { color: var(--primary); font-weight: 700; text-decoration: none; }
.go-top-pageno { font-size: .85rem; color: var(--text-secondary); font-weight: 600; }
.go-end-rating { font-size: 1.15rem; font-weight: 800; color: var(--primary); }
@media (max-width: 900px) {
    .go-top-page { padding: 0 12px; gap: 12px; }
}