/**
 * Game-page vote buttons — sidebar-fit "Your Voice Matters" panel.
 *
 * Coral/cream patron-themed widget rendered inside .game-left-sidebar on
 * single-games / single-boardgames in both catalog and live contexts.
 * 280px wide to match the rank box. Camera-friendly for OBS/YouTube.
 *
 * Hook classes preserved for game-vote-buttons.js:
 *   .game-vote-buttons         (container, data attrs)
 *   .game-vote-btn             (clickable, request_type)
 *   .game-vote-btn-count       (vote tally — JS updates after vote)
 *   .game-vote-balance-amount  (user balance — JS updates after vote)
 *   .game-vote-buttons-msg     (status text — JS writes errors here)
 *
 * Visual classes are gv-* (panel/header/actions/footer).
 *
 * Local color tokens (--coral, --cream) match patron-requests.css. They are
 * scoped to .gv-panel here so we don't depend on patron-requests.css being
 * loaded on game pages.
 *
 * Depends on: wakasm-color-utils (for --radius-full via .wakasm-coin)
 */

.game-vote-buttons.gv-panel {
    --gv-cream:      #fff0c7;
    --gv-coral:      #ff685d;
    --gv-coral-deep: #e94c43;
    --gv-coral-glow: #ff8a7e;

    width: 280px;
    box-sizing: border-box;
    margin: 0 0 20px;
    border-radius: 12px;
    border: 2px solid var(--gv-cream);
    background:
        radial-gradient(circle at 90% 10%, rgba(255, 207, 61, 0.32), transparent 28%),
        linear-gradient(180deg, var(--gv-coral-glow) 0%, var(--gv-coral-deep) 100%);
    color: #fff;
    font-family: 'Changa', 'Segoe UI', sans-serif;
    box-shadow: 0 4px 0 rgba(0, 0, 0, 0.25);
    position: relative;
    isolation: isolate;
}

/* === Balance pill (top right) === */
.gv-balance {
    position: absolute;
    top: 10px;
    right: 10px;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 3px 8px 3px 4px;
    border-radius: 999px;
    background: rgba(0, 0, 0, 0.22);
    color: #fff7e7;
    font-size: 11px;
    font-weight: 900;
    line-height: 1;
}

/* === Header === */
.gv-panel-header {
    padding: 14px 14px 10px;
    text-align: center;
}

.gv-panel-eyebrow {
    display: inline-block;
    margin: 0 0 4px;
    padding: 2px 9px;
    border-radius: 999px;
    background: rgba(0, 0, 0, 0.16);
    color: #ffe7dd;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.gv-panel-title {
    margin: 0;
    color: #fff5df;
    font-size: 22px;
    font-weight: 950;
    line-height: 1;
    text-shadow: 0 2px 0 rgba(0, 0, 0, 0.25);
    letter-spacing: 0.01em;
}

.gv-panel-game {
    margin: 4px 0 0;
    color: #fff7e7;
    font-size: 13px;
    font-weight: 800;
    line-height: 1.18;
    opacity: 0.95;
}
.gv-panel-game strong { font-weight: 950; }

/* === Tabs (Vote / Contribute) === */
.gv-tabs {
    display: flex;
    gap: 0;
    margin: 6px 12px 8px;
    padding: 3px;
    background: rgba(0, 0, 0, 0.22);
    border-radius: 999px;
}
.gv-tab {
    flex: 1;
    appearance: none;
    border: 0;
    background: transparent;
    color: rgba(255, 247, 231, 0.78);
    font-family: inherit;
    font-size: 12px;
    font-weight: 900;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    padding: 6px 8px;
    border-radius: 999px;
    cursor: pointer;
    transition: background 0.15s ease, color 0.15s ease;
}
.gv-tab:hover { color: #fff; }
.gv-tab.is-active {
    background: var(--gv-cream);
    color: var(--gv-coral-deep);
}

/* === Action panels === */
.gv-tabpanel { display: none; }
.gv-tabpanel.is-active { display: grid; }
.gv-actions {
    gap: 7px;
    padding: 4px 12px 12px;
}

/* === Contribute buttons (no tally; just label + cost) === */
.gv-contribute-btn {
    appearance: none;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 9px;
    width: 100%;
    padding: 10px 12px;
    border: 0;
    border-radius: 9px;
    background: var(--gv-cream);
    color: var(--gv-coral-deep);
    font-family: inherit;
    font-size: 14px;
    font-weight: 950;
    line-height: 1;
    text-align: left;
    cursor: pointer;
    box-shadow: 0 3px 0 rgba(0, 0, 0, 0.18);
    transition: transform 0.12s ease, box-shadow 0.12s ease, filter 0.12s ease;
}
.gv-contribute-btn:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 0 rgba(0, 0, 0, 0.2);
    filter: brightness(1.04);
}
.gv-contribute-btn:active {
    transform: translateY(2px);
    box-shadow: 0 1px 0 rgba(0, 0, 0, 0.2);
}

.game-vote-btn.gv-action {
    appearance: none;
    display: flex;
    align-items: center;
    gap: 9px;
    width: 100%;
    padding: 10px 12px;
    border: 0;
    border-radius: 9px;
    background: var(--gv-cream);
    color: var(--gv-coral-deep);
    font-family: inherit;
    font-size: 14px;
    font-weight: 950;
    line-height: 1;
    text-align: left;
    cursor: pointer;
    box-shadow: 0 3px 0 rgba(0, 0, 0, 0.18);
    transition: transform 0.12s ease, box-shadow 0.12s ease, filter 0.12s ease;
}
.game-vote-btn.gv-action:hover:not(:disabled) {
    transform: translateY(-1px);
    box-shadow: 0 4px 0 rgba(0, 0, 0, 0.2);
    filter: brightness(1.04);
}
.game-vote-btn.gv-action:active:not(:disabled) {
    transform: translateY(2px);
    box-shadow: 0 1px 0 rgba(0, 0, 0, 0.2);
}

.gv-action-label {
    flex: 1 1 auto;
}

.gv-action-tally {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    padding: 3px 7px;
    border-radius: 999px;
    background: var(--gv-coral-deep);
    color: #fff;
    font-size: 11px;
    font-weight: 950;
    line-height: 1;
}
.gv-action-tally-arrow {
    font-size: 9px;
    transform: translateY(-1px);
}

.gv-action-cost {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    color: #5a2a26;
    font-size: 11px;
    font-weight: 800;
    line-height: 1;
}

/* JS feedback states */
.game-vote-btn.is-loading { opacity: 0.7; cursor: wait; }
.game-vote-btn.just-voted {
    transform: scale(1.04);
    filter: brightness(1.1);
}

/* Review-already-exists "disabled" button (replaces Request a Review when a
   review is linked). Same shape as the live button so the user sees the option
   that WAS available, but desaturated salmon, struck through with an X, and
   stamped "Review Exists" on the corner. The element is still an <a> linking
   to the review, so clicking takes them there. */
.gv-action.gv-action-disabled,
.gv-action.gv-action-disabled:link,
.gv-action.gv-action-disabled:visited,
.gv-action.gv-action-disabled:hover,
.gv-action.gv-action-disabled:active {
    position: relative;
    display: flex;
    align-items: center;
    gap: 9px;
    width: 100%;
    padding: 10px 12px;
    margin-top: 6px;
    border: 0;
    border-radius: 9px;
    background: linear-gradient(180deg, #d4a8a0 0%, #c89890 100%);
    color: #5a2a26;
    font-family: inherit;
    font-size: 14px;
    font-weight: 950;
    line-height: 1;
    text-align: left;
    text-decoration: none;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.18),
                0 2px 0 rgba(0, 0, 0, 0.18);
    overflow: visible;
    transition: filter 0.15s ease;
}
.gv-action.gv-action-disabled:hover { filter: brightness(1.05); }

.gv-action.gv-action-disabled .gv-action-label,
.gv-action.gv-action-disabled .gv-action-cost {
    opacity: 0.55;
    position: relative;
    z-index: 1;
}
.gv-action.gv-action-disabled .gv-action-cost { color: #4a2422; }

/* Strikethrough X across the button. Two ink-stroke bars angled to corners,
   with a fade at the ends + soft shadow so it reads as hand-drawn ink rather
   than a flat CSS line. */
.gv-action.gv-action-disabled::before,
.gv-action.gv-action-disabled::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 6px;
    right: 6px;
    height: 3px;
    background: linear-gradient(
        90deg,
        rgba(74, 28, 26, 0)   0%,
        rgba(74, 28, 26, 0.55) 12%,
        rgba(74, 28, 26, 0.78) 50%,
        rgba(74, 28, 26, 0.55) 88%,
        rgba(74, 28, 26, 0)   100%
    );
    border-radius: 2px;
    box-shadow: 0 1px 0 rgba(74, 28, 26, 0.18);
    filter: blur(0.35px);
    pointer-events: none;
}
.gv-action.gv-action-disabled::before { transform: translateY(-50%) rotate(-9deg); }
.gv-action.gv-action-disabled::after  { transform: translateY(-50%) rotate(9deg); }

/* Rotated "Review Exists" stamp pinned to the top-right corner. */
.gv-action-stamp-pill {
    position: absolute;
    top: -3px;
    right: -6px;
    transform: rotate(-8deg);
    background: var(--gv-cream);
    color: var(--gv-coral-deep);
    font-family: inherit;
    font-size: 10px;
    font-weight: 950;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    padding: 4px 9px;
    border-radius: 999px;
    border: 2px solid var(--gv-coral-deep);
    box-shadow: 0 2px 0 rgba(0, 0, 0, 0.18);
    pointer-events: none;
    white-space: nowrap;
    z-index: 2;
}

/* Custom in-theme tooltip, driven by data-gv-tip. Cream bubble with coral-deep
   text, anchored above the button. Used in place of native title= so we don't
   get OS-styled tooltips that clash with the panel theme. */
/* Lift the hovered/focused button above its grid siblings so the tooltip
   doesn't get painted over by the next button in the stack. Companion fix
   to removing overflow:hidden from .gv-panel. */
.gv-panel [data-gv-tip] { position: relative; z-index: 1; }
.gv-panel [data-gv-tip]:hover,
.gv-panel [data-gv-tip]:focus-visible { z-index: 50; }
.gv-panel [data-gv-tip]:hover::after,
.gv-panel [data-gv-tip]:focus-visible::after {
    content: attr(data-gv-tip);
    position: absolute;
    top: 50%;
    left: calc(100% + 12px);
    transform: translateY(-50%);
    width: max-content;
    max-width: 220px;
    padding: 8px 10px;
    background: var(--gv-cream);
    color: var(--gv-coral-deep);
    font-family: 'Changa', 'Segoe UI', sans-serif;
    font-size: 11px;
    font-weight: 700;
    line-height: 1.35;
    text-align: left;
    white-space: normal;
    border-radius: 8px;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.25);
    z-index: 20;
    pointer-events: none;
}
.gv-panel [data-gv-tip]:hover::before,
.gv-panel [data-gv-tip]:focus-visible::before {
    content: '';
    position: absolute;
    top: 50%;
    left: calc(100% + 1px);
    transform: translateY(-50%);
    border: 6px solid transparent;
    border-right-color: var(--gv-cream);
    z-index: 20;
    pointer-events: none;
}

/* === Footer (note + Patreon CTA) === */
.gv-footer {
    padding: 10px 12px 12px;
    text-align: center;
}
.gv-footer-note {
    margin: 0 0 8px;
    color: #ffe7dd;
    font-size: 11px;
    font-weight: 700;
    line-height: 1.25;
}
.gv-footer-note strong { color: #fff5df; font-weight: 950; }

/* Anchor states explicitly listed: theme global `a:visited/:focus/:active`
   rule in wakasm-custom.css has higher specificity than a single class,
   so without these the link reverts to site green (#4da44b). */
.gv-join,
.gv-join:link,
.gv-join:visited,
.gv-join:focus,
.gv-join:hover,
.gv-join:active {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    padding: 9px 12px;
    border-radius: 8px;
    background: rgba(255, 143, 123, 0.95);
    color: #fff;
    text-decoration: none;
    font-size: 14px;
    font-weight: 950;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.22),
                0 3px 0 rgba(0, 0, 0, 0.18);
    transition: filter 0.12s ease;
}
.gv-join:hover { filter: brightness(1.06); }

/* JS message line — sits below CTA, only shows when populated */
.game-vote-buttons-msg {
    margin: 8px 0 0;
    min-height: 0;
    font-size: 11px;
    font-weight: 700;
    color: #fff5df;
    text-align: center;
}
.game-vote-buttons-msg.is-error { color: #ffe1d8; }
.game-vote-buttons-msg:empty { display: none; }

/* === Closed state === */
.game-vote-buttons.gv-panel.is-closed {
    background: linear-gradient(180deg, #4a3030 0%, #3a2424 100%);
    border-color: rgba(255, 240, 199, 0.35);
}
.game-vote-buttons.gv-panel.is-closed .gv-panel-title {
    color: #c8b9a0;
    font-style: italic;
}
.game-vote-buttons.gv-panel.is-closed .gv-panel-eyebrow {
    background: rgba(0, 0, 0, 0.3);
    color: #b8aa92;
}
.game-vote-buttons.gv-panel.is-closed .game-vote-btn.gv-action {
    background: rgba(255, 240, 199, 0.4);
    color: #5a3a36;
    cursor: not-allowed;
    box-shadow: 0 2px 0 rgba(0, 0, 0, 0.2);
}
.game-vote-buttons.gv-panel.is-closed .gv-action-tally {
    background: rgba(0, 0, 0, 0.35);
}
.game-vote-buttons.gv-panel.is-closed .gv-action-cost {
    color: #6a4a46;
}

/* Crosslink to /community-requests/ — small text link below the actions,
   only renders when at least one open request has votes on this game. */
.gv-crosslink,
.gv-crosslink:link,
.gv-crosslink:visited {
    display: block;
    margin-top: 8px;
    text-align: center;
    font-family: inherit;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--gv-cream);
    opacity: 0.75;
    text-decoration: underline;
    text-underline-offset: 3px;
    text-decoration-color: rgba(255, 240, 199, 0.45);
}
.gv-crosslink:hover,
.gv-crosslink:focus-visible {
    opacity: 1;
    text-decoration-color: var(--gv-cream);
}

/* Mobile / narrow contexts (catalog body on phone, etc.). Drop the hard
   280px so the widget shrinks to fit and centers in its container. */
@media (max-width: 720px) {
    .game-vote-buttons.gv-panel {
        width: 100%;
        max-width: 280px;
        margin-left: auto;
        margin-right: auto;
    }
}