/* GEA · Forms — input, textarea, select, search, check, radio, switch, file */

.gea-field { display: flex; flex-direction: column; gap: var(--gea-space-2); width: 100%; }
.gea-field__label {
    display: inline-flex; align-items: center; gap: var(--gea-space-1);
    font-size: var(--gea-text-sm); font-weight: var(--gea-weight-medium);
    color: var(--gea-text); line-height: var(--gea-leading-none);
}
.gea-field__label .gea-required { color: var(--gea-brand-500); }
.gea-field__label .gea-optional { color: var(--gea-text-subtle); font-weight: 400; margin-left: 4px; }
.gea-field__hint  { font-size: var(--gea-text-xs); color: var(--gea-text-subtle); }
.gea-field__error { display: inline-flex; align-items: center; gap: var(--gea-space-1-5); font-size: var(--gea-text-xs); color: var(--gea-danger); }
.gea-field__success { display: inline-flex; align-items: center; gap: var(--gea-space-1-5); font-size: var(--gea-text-xs); color: var(--gea-success); }

/* INPUT base */
.gea-input, .gea-textarea, .gea-select select {
    display: block; width: 100%; height: 44px; padding: 0 14px;
    font: inherit; font-size: var(--gea-text-sm); color: var(--gea-text);
    background: var(--gea-surface);
    border: 1px solid var(--gea-border); border-radius: var(--gea-radius-md);
    transition: border-color .15s var(--gea-ease-out), box-shadow .15s var(--gea-ease-out), background-color .15s var(--gea-ease-out);
    appearance: none; -webkit-appearance: none;
}
.gea-input::placeholder, .gea-textarea::placeholder { color: var(--gea-text-subtle); opacity: 1; }
.gea-input:hover, .gea-textarea:hover, .gea-select select:hover { border-color: var(--gea-border-strong); }
.gea-input:focus, .gea-textarea:focus, .gea-select select:focus {
    outline: none; border-color: var(--gea-brand-500);
    box-shadow: var(--gea-ring-brand); background: var(--gea-surface-raised);
}
.gea-input[disabled], .gea-textarea[disabled], .gea-select select[disabled] {
    cursor: not-allowed; opacity: .55; background: var(--gea-bg-elevated);
}
.gea-input[readonly] { background: var(--gea-bg-elevated); cursor: default; }
.gea-input--sm { height: 36px; padding: 0 12px; }
.gea-input--lg { height: 52px; padding: 0 16px; font-size: var(--gea-text-md); }

.gea-textarea { height: auto; min-height: 96px; padding: 12px 14px; line-height: var(--gea-leading-normal); resize: vertical; }

/* FILE INPUT — replace the browser's default "Choose file" button with a
   design-system styled button via ::file-selector-button. Applies to any
   input[type=file] with .gea-input AND any unstyled file input on the site
   (catch-all fallback so we never see the raw browser look anywhere). */
.gea-input[type="file"],
input[type="file"]:not([class]) {
    display: flex;
    align-items: center;
    height: 44px;
    padding: 0;
    padding-right: 14px;
    overflow: hidden;
    color: var(--gea-text-muted);
    font-size: var(--gea-text-sm);
    background: var(--gea-surface);
    border: 1px solid var(--gea-border);
    border-radius: var(--gea-radius-md);
    cursor: pointer;
}

.gea-input[type="file"]::file-selector-button,
input[type="file"]:not([class])::file-selector-button {
    height: 100%;
    padding: 0 16px;
    margin-right: 14px;
    font-family: var(--gea-font-sans);
    font-size: var(--gea-text-sm);
    font-weight: var(--gea-weight-semibold);
    color: var(--gea-text);
    background: var(--gea-surface-raised);
    border: 0;
    border-right: 1px solid var(--gea-border);
    cursor: pointer;
    transition: background-color .15s var(--gea-ease-out), color .15s var(--gea-ease-out);
}
.gea-input[type="file"]:hover::file-selector-button,
input[type="file"]:not([class]):hover::file-selector-button {
    background: var(--gea-surface-overlay);
    color: var(--gea-brand-300);
}
.gea-input[type="file"]:focus,
input[type="file"]:not([class]):focus {
    outline: none;
    border-color: var(--gea-brand-500);
    box-shadow: var(--gea-ring-brand);
}
.gea-input[type="file"]:disabled,
input[type="file"]:not([class]):disabled {
    opacity: .55;
    cursor: not-allowed;
}

.gea-input-group { position: relative; display: flex; align-items: center; width: 100%; }
.gea-input-group .gea-input { padding-left: 42px; }
.gea-input-group__addon {
    position: absolute; inset: 0 auto 0 12px; display: flex; align-items: center;
    color: var(--gea-text-subtle); pointer-events: none;
}
.gea-input-group__addon .gea-icon { width: 18px; height: 18px; }
.gea-input-group--right .gea-input { padding-left: 14px; padding-right: 42px; }
.gea-input-group--right .gea-input-group__addon { inset: 0 12px 0 auto; }

/* Static text prefix (e.g. "+995") rendered as a left-attached chip with
   its own background + divider line, like Stripe's phone-number field.
   Use .gea-input-group--prefix on the wrapper. */
.gea-input-group--prefix .gea-input-group__addon {
    position: static;
    align-self: stretch;
    display: flex;
    align-items: center;
    padding: 0 var(--gea-space-3);
    background: var(--gea-surface-2, #0d1117);
    border-right: 1px solid var(--gea-border-2);
    color: var(--gea-text);
    font-weight: 600;
    font-family: var(--gea-font-mono, monospace);
    font-size: var(--gea-text-sm);
    pointer-events: auto;
    border-radius: var(--gea-radius-md) 0 0 var(--gea-radius-md);
    white-space: nowrap;
}
.gea-input-group--prefix .gea-input {
    padding-left: var(--gea-space-3);
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
    border-left: 0;
}
.gea-input-group--prefix:has(.gea-input:focus) .gea-input-group__addon {
    border-color: var(--gea-brand-500, #01EEEB);
    color: var(--gea-brand-300, #01EEEB);
}

.gea-field.is-invalid .gea-input,
.gea-field.is-invalid .gea-textarea,
.gea-field.is-invalid .gea-select select { border-color: var(--gea-danger); }
.gea-field.is-invalid .gea-input:focus,
.gea-field.is-invalid .gea-textarea:focus,
.gea-field.is-invalid .gea-select select:focus { box-shadow: var(--gea-ring-danger); }
.gea-field.is-valid .gea-input,
.gea-field.is-valid .gea-textarea,
.gea-field.is-valid .gea-select select { border-color: var(--gea-success); }

/* SELECT */
.gea-select { position: relative; width: 100%; }
.gea-select select { padding-right: 40px; cursor: pointer; }
.gea-select::after {
    content: ''; position: absolute; right: 14px; top: 50%;
    width: 9px; height: 9px;
    border-right: 2px solid var(--gea-text-subtle);
    border-bottom: 2px solid var(--gea-text-subtle);
    transform: translateY(-75%) rotate(45deg);
    pointer-events: none;
}

/* DROPDOWN */
.gea-dropdown { position: relative; display: inline-block; }
.gea-dropdown__trigger {
    display: inline-flex; align-items: center; gap: var(--gea-space-2);
    height: 40px; padding: 0 14px;
    color: var(--gea-text); background: var(--gea-surface);
    border: 1px solid var(--gea-border); border-radius: var(--gea-radius-md);
    font-size: var(--gea-text-sm); font-weight: var(--gea-weight-medium); cursor: pointer;
    transition: border-color .15s var(--gea-ease-out);
}
.gea-dropdown__trigger:hover { border-color: var(--gea-border-strong); }
.gea-dropdown__trigger .gea-icon { width: 14px; height: 14px; color: var(--gea-text-subtle); }
.gea-dropdown.is-open .gea-dropdown__trigger { border-color: var(--gea-brand-500); box-shadow: var(--gea-ring-brand); }

/* Avatar-only trigger — used in app header for the account menu.
   Compact pill with avatar + chevron, no text label. */
.gea-dropdown__trigger--avatar {
    height: 40px;
    padding: 4px 10px 4px 4px;
    gap: 8px;
    border-radius: var(--gea-radius-full);
}
.gea-dropdown__trigger--avatar .gea-icon { color: var(--gea-text-subtle); transition: transform .2s var(--gea-ease-out); }
.gea-dropdown.is-open .gea-dropdown__trigger--avatar .gea-icon { transform: rotate(180deg); color: var(--gea-brand-500); }

.gea-dropdown__menu {
    position: absolute; top: calc(100% + 6px); left: 0; min-width: 220px;
    padding: var(--gea-space-1);
    background: var(--gea-surface-raised); border: 1px solid var(--gea-border);
    border-radius: var(--gea-radius-lg); box-shadow: var(--gea-shadow-xl);
    z-index: var(--gea-z-dropdown);
    opacity: 0; transform: translateY(-4px); pointer-events: none;
    transition: opacity .15s var(--gea-ease-out), transform .15s var(--gea-ease-out);
}
.gea-dropdown.is-open .gea-dropdown__menu { opacity: 1; transform: translateY(0); pointer-events: auto; }
.gea-dropdown__menu--right { left: auto; right: 0; }

/* Open upward — used in the footer where there's no room below */
.gea-dropdown--up .gea-dropdown__menu { top: auto; bottom: calc(100% + 6px); transform: translateY(4px); }
.gea-dropdown--up.is-open .gea-dropdown__menu { transform: translateY(0); }

/* Hover variant — dropdown opens on pointer hover or keyboard focus,
   without needing the data-dropdown JS to toggle .is-open. Used in the
   header nav (e.g. News categories). The 6px gap between trigger and
   menu is bridged by the menu's negative ::before bridge so the menu
   doesn't close when the cursor moves between trigger and menu. */
.gea-dropdown--hover:hover .gea-dropdown__menu,
.gea-dropdown--hover:focus-within .gea-dropdown__menu {
    opacity: 1; transform: translateY(0); pointer-events: auto;
}
.gea-dropdown--hover .gea-dropdown__menu::before {
    content: ""; position: absolute; left: 0; right: 0;
    top: -8px; height: 8px;
}

.gea-dropdown__item {
    display: flex; align-items: center; gap: var(--gea-space-3);
    width: 100%; padding: 8px 10px;
    font-size: var(--gea-text-sm); color: var(--gea-text);
    background: transparent; border: 0; border-radius: var(--gea-radius-sm);
    cursor: pointer; text-align: left;
    transition: background-color .075s var(--gea-ease-out);
}
.gea-dropdown__item:hover, .gea-dropdown__item.is-active { background: rgba(255,255,255,.06); }
.gea-dropdown__item--danger { color: var(--gea-danger); }
.gea-dropdown__item--danger:hover { background: var(--gea-danger-soft); }
.gea-dropdown__item .gea-icon { width: 16px; height: 16px; color: var(--gea-text-subtle); }
.gea-dropdown__item.is-active .gea-icon { color: var(--gea-brand-500); }
.gea-dropdown__label {
    padding: 8px 10px 4px; font-size: var(--gea-text-2xs); font-weight: var(--gea-weight-semibold);
    text-transform: uppercase; letter-spacing: var(--gea-tracking-widest); color: var(--gea-text-subtle);
}
.gea-dropdown__divider { height: 1px; margin: var(--gea-space-1) 0; background: var(--gea-divider); }

/* User-card header for account dropdowns: avatar + name + handle */
.gea-dropdown__user {
    display: flex; align-items: center; gap: var(--gea-space-3);
    padding: 10px 10px 12px;
    margin-bottom: 4px;
    border-bottom: 1px solid var(--gea-border-subtle);
}
.gea-dropdown__user-info { min-width: 0; line-height: 1.2; }
.gea-dropdown__user-name {
    display: block;
    font-size: var(--gea-text-sm);
    font-weight: var(--gea-weight-semibold);
    color: var(--gea-text);
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
    max-width: 180px;
}
.gea-dropdown__user-handle {
    display: block;
    font-family: var(--gea-font-mono);
    font-size: var(--gea-text-xs);
    color: var(--gea-brand-300);
    margin-top: 2px;
}

/* CUSTOM SELECT — dropdown styled as a form select (full-width, 44px, animated chevron, checkmark on selected) */
.gea-dropdown--select { display: block; width: 100%; }
.gea-dropdown--select .gea-dropdown__trigger {
    display: flex; width: 100%; height: 44px;
    padding: 0 14px; justify-content: space-between;
    background: var(--gea-surface);
    font-weight: var(--gea-weight-regular);
}
.gea-dropdown--select.is-open .gea-dropdown__trigger {
    background: var(--gea-surface-raised);
}
.gea-dropdown--select .gea-dropdown__trigger > .gea-icon { transition: transform .2s var(--gea-ease-out); }
.gea-dropdown--select.is-open .gea-dropdown__trigger > .gea-icon { transform: rotate(180deg); color: var(--gea-brand-500); }
.gea-dropdown--select .gea-dropdown__menu { width: 100%; max-height: 320px; overflow-y: auto; }
.gea-dropdown--select .gea-dropdown__trigger-value { color: var(--gea-text); flex: 1; text-align: left; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.gea-dropdown--select .gea-dropdown__trigger-value.is-placeholder { color: var(--gea-text-disabled); }
.gea-dropdown--select .gea-dropdown__item .gea-icon { opacity: 0; transition: opacity .15s var(--gea-ease-out); flex: none; }
.gea-dropdown--select .gea-dropdown__item.is-active .gea-icon { opacity: 1; color: var(--gea-brand-500); }
.gea-dropdown--select .gea-dropdown__item.is-active { background: rgba(1,238,235,.06); color: var(--gea-text); }

/* size variants align with input sizes */
.gea-dropdown--select-sm .gea-dropdown__trigger { height: 36px; padding: 0 12px; }
.gea-dropdown--select-lg .gea-dropdown__trigger { height: 52px; padding: 0 16px; font-size: var(--gea-text-md); }

/* SEARCH */
.gea-search { position: relative; display: flex; align-items: center; width: 100%; }
.gea-search__input {
    width: 100%; height: 44px; padding: 0 16px 0 44px;
    background: var(--gea-surface); border: 1px solid var(--gea-border);
    border-radius: var(--gea-radius-lg); color: var(--gea-text); font-size: var(--gea-text-sm);
    transition: border-color .15s var(--gea-ease-out), box-shadow .15s var(--gea-ease-out), background-color .15s var(--gea-ease-out);
}
.gea-search__input::placeholder { color: var(--gea-text-disabled); }
.gea-search__input:hover { border-color: var(--gea-border-strong); }
.gea-search__input:focus {
    outline: none; border-color: var(--gea-brand-500);
    box-shadow: var(--gea-ring-brand); background: var(--gea-surface-raised);
}
.gea-search__icon { position: absolute; left: 14px; width: 18px; height: 18px; color: var(--gea-text-subtle); pointer-events: none; }
.gea-search__shortcut {
    position: absolute; right: 12px; display: inline-flex; align-items: center;
    height: 22px; padding: 0 6px;
    font-family: var(--gea-font-mono); font-size: var(--gea-text-2xs); font-weight: var(--gea-weight-semibold);
    color: var(--gea-text-muted); background: var(--gea-bg-elevated);
    border: 1px solid var(--gea-border); border-radius: var(--gea-radius-xs);
}
.gea-search--lg .gea-search__input { height: 52px; padding: 0 18px 0 52px; font-size: var(--gea-text-md); }
.gea-search--lg .gea-search__icon { left: 18px; width: 20px; height: 20px; }
.gea-search--pill .gea-search__input { border-radius: var(--gea-radius-full); }

/* CHECKBOX */
.gea-check { display: inline-flex; align-items: flex-start; gap: var(--gea-space-3); cursor: pointer; user-select: none; }
.gea-check input { position: absolute; opacity: 0; pointer-events: none; }
.gea-check__box {
    flex: none; position: relative; width: 18px; height: 18px; margin-top: 1px;
    background: var(--gea-surface); border: 1.5px solid var(--gea-border-strong);
    border-radius: var(--gea-radius-xs);
    transition: background-color .15s var(--gea-ease-out), border-color .15s var(--gea-ease-out), box-shadow .15s var(--gea-ease-out);
}
.gea-check__box::after {
    content: ''; position: absolute; inset: 0;
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 16 16' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M3 8.5l3 3 7-7' fill='none' stroke='%23010101' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    background-size: 12px; background-repeat: no-repeat; background-position: center;
    opacity: 0; transition: opacity .15s var(--gea-ease-out);
}
.gea-check:hover .gea-check__box { border-color: var(--gea-brand-500); }
.gea-check input:checked + .gea-check__box { background: var(--gea-brand-500); border-color: var(--gea-brand-500); }
.gea-check input:checked + .gea-check__box::after { opacity: 1; }
.gea-check input:focus-visible + .gea-check__box { box-shadow: var(--gea-ring-brand); }
.gea-check input:disabled + .gea-check__box { opacity: .45; cursor: not-allowed; }
.gea-check__label { font-size: var(--gea-text-sm); color: var(--gea-text); line-height: var(--gea-leading-snug); }
.gea-check__hint  { display: block; font-size: var(--gea-text-xs); color: var(--gea-text-subtle); margin-top: 2px; }

/* RADIO */
.gea-radio { display: inline-flex; align-items: flex-start; gap: var(--gea-space-3); cursor: pointer; user-select: none; }
.gea-radio input { position: absolute; opacity: 0; pointer-events: none; }
.gea-radio__dot {
    flex: none; position: relative; width: 18px; height: 18px; margin-top: 1px;
    background: var(--gea-surface); border: 1.5px solid var(--gea-border-strong);
    border-radius: 50%;
    transition: border-color .15s var(--gea-ease-out), box-shadow .15s var(--gea-ease-out);
}
.gea-radio__dot::after {
    content: ''; position: absolute; inset: 0; margin: auto;
    width: 8px; height: 8px; background: var(--gea-brand-500);
    border-radius: 50%; transform: scale(0);
    transition: transform .15s var(--gea-ease-spring);
}
.gea-radio:hover .gea-radio__dot { border-color: var(--gea-brand-500); }
.gea-radio input:checked + .gea-radio__dot { border-color: var(--gea-brand-500); }
.gea-radio input:checked + .gea-radio__dot::after { transform: scale(1); }
.gea-radio input:focus-visible + .gea-radio__dot { box-shadow: var(--gea-ring-brand); }
.gea-radio__label { font-size: var(--gea-text-sm); color: var(--gea-text); }

/* SWITCH */
.gea-switch { display: inline-flex; align-items: center; gap: var(--gea-space-3); cursor: pointer; user-select: none; }
.gea-switch input { position: absolute; opacity: 0; pointer-events: none; }
.gea-switch__track {
    flex: none; position: relative; width: 38px; height: 22px;
    background: var(--gea-surface-overlay); border: 1px solid var(--gea-border);
    border-radius: var(--gea-radius-full);
    transition: background-color .2s var(--gea-ease-out);
}
.gea-switch__track::after {
    content: ''; position: absolute; top: 2px; left: 2px;
    width: 16px; height: 16px;
    background: var(--gea-text); border-radius: 50%;
    box-shadow: var(--gea-shadow-sm);
    transition: transform .2s var(--gea-ease-spring);
}
.gea-switch input:checked + .gea-switch__track { background: var(--gea-brand-500); border-color: var(--gea-brand-500); }
.gea-switch input:checked + .gea-switch__track::after { transform: translateX(16px); background: var(--gea-text-on-brand); }
.gea-switch input:focus-visible + .gea-switch__track { box-shadow: var(--gea-ring-brand); }

/* PASSWORD STRENGTH RULES — live checklist below the password input.
   Wrapped in an inset panel that subtly tints when the password starts
   meeting requirements. Each rule has a circular indicator that fills
   with cyan and shows a check mark when satisfied. */
.gea-pwd-rules {
    list-style: none;
    margin: var(--gea-space-3) 0 0;
    padding: var(--gea-space-3) var(--gea-space-4);
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--gea-space-2) var(--gea-space-5);
    background: var(--gea-surface);
    border: 1px solid var(--gea-border-subtle);
    border-radius: var(--gea-radius-md);
    transition: border-color .2s var(--gea-ease-out), background-color .2s var(--gea-ease-out);
}
@media (max-width: 540px) {
    .gea-pwd-rules { grid-template-columns: 1fr; }
}

.gea-pwd-rules__item {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: var(--gea-text-xs);
    color: var(--gea-text-muted);
    line-height: 1.45;
    transition: color .2s var(--gea-ease-out);
}

/* Indicator — empty circle by default, fills with cyan + ✓ when satisfied. */
.gea-pwd-rules__item::before {
    content: '';
    flex: none;
    width: 16px;
    height: 16px;
    border: 1.5px solid var(--gea-border-strong);
    border-radius: 50%;
    background: transparent;
    transition: all .25s var(--gea-ease-out);
}

.gea-pwd-rules__item.is-valid {
    color: var(--gea-text);
    font-weight: var(--gea-weight-medium);
}
.gea-pwd-rules__item.is-valid::before {
    background-color: var(--gea-brand-500);
    border-color: var(--gea-brand-500);
    box-shadow: 0 0 0 3px rgba(1, 238, 235, .15);
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 16 16' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M3.5 8.5l3 3 6-7' fill='none' stroke='%23010101' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    background-size: 11px;
    background-repeat: no-repeat;
    background-position: center;
    transform: scale(1.05);
}

/* When ANY rule is satisfied, the panel border subtly warms up. */
.gea-pwd-rules:has(.gea-pwd-rules__item.is-valid) {
    border-color: rgba(1, 238, 235, .18);
}

/* FILE */
.gea-file {
    position: relative; display: flex; align-items: center; gap: var(--gea-space-3);
    padding: var(--gea-space-5);
    border: 1.5px dashed var(--gea-border-strong); border-radius: var(--gea-radius-lg);
    background: var(--gea-surface);
    transition: border-color .15s var(--gea-ease-out), background-color .15s var(--gea-ease-out);
    cursor: pointer;
}
.gea-file:hover { border-color: var(--gea-brand-500); background: var(--gea-surface-raised); }
.gea-file input[type="file"] { position: absolute; inset: 0; opacity: 0; cursor: pointer; }
.gea-file__icon {
    flex: none; display: grid; place-items: center; width: 40px; height: 40px;
    background: rgba(1,238,235,.10); border-radius: var(--gea-radius-md); color: var(--gea-brand-500);
}
.gea-file__icon .gea-icon { width: 20px; height: 20px; }
.gea-file__title { font-size: var(--gea-text-sm); font-weight: var(--gea-weight-medium); color: var(--gea-text); }
.gea-file__hint  { font-size: var(--gea-text-xs); color: var(--gea-text-subtle); margin-top: 2px; }

/* ============== GAME PICKER ==============
   Card grid where the captain ticks every game their team competes in.
   Hidden checkbox + label-as-card pattern: clicking the card toggles
   the checkbox and the active visual state. */
.gea-game-picker { gap: var(--gea-space-3); }
.gea-game-pick {
    position: relative;
    display: flex;
    align-items: center;
    gap: var(--gea-space-3);
    padding: 12px 14px;
    border: 1.5px solid var(--gea-border);
    border-radius: var(--gea-radius-lg);
    background: var(--gea-surface);
    cursor: pointer;
    transition: border-color .18s var(--gea-ease-out),
                background-color .18s var(--gea-ease-out),
                box-shadow .18s var(--gea-ease-out),
                transform .18s var(--gea-ease-out);
    user-select: none;
}
.gea-game-pick:hover {
    border-color: rgba(1, 238, 235, .35);
    background: var(--gea-surface-raised);
}
.gea-game-pick input[type="checkbox"] {
    position: absolute;
    opacity: 0;
    pointer-events: none;
    width: 0; height: 0;
}
.gea-game-pick__logo {
    flex: none;
    display: grid;
    place-items: center;
    width: 40px; height: 40px;
    border-radius: var(--gea-radius-md);
    background: rgba(255, 255, 255, .03);
}
.gea-game-pick__logo .gea-game-logo { width: 28px; height: 28px; object-fit: contain; }
.gea-game-pick__body {
    flex: 1; min-width: 0;
    display: flex; flex-direction: column; gap: 2px;
}
.gea-game-pick__name {
    font-family: var(--gea-font-display);
    font-size: var(--gea-text-sm);
    font-weight: var(--gea-weight-semibold);
    color: var(--gea-text);
}
.gea-game-pick__sub {
    font-size: var(--gea-text-xs);
    color: var(--gea-text-subtle);
}
.gea-game-pick__tick {
    flex: none;
    width: 22px; height: 22px;
    border-radius: 50%;
    border: 1.5px solid var(--gea-border-strong);
    display: grid; place-items: center;
    background: transparent;
    color: transparent;
    transition: all .18s var(--gea-ease-out);
}
.gea-game-pick__tick .gea-icon { width: 12px; height: 12px; }

.gea-game-pick.is-active {
    border-color: var(--gea-brand-500);
    background: rgba(1, 238, 235, .06);
    box-shadow: 0 0 0 1px rgba(1, 238, 235, .25), 0 6px 18px -10px rgba(1, 238, 235, .35);
}
.gea-game-pick.is-active .gea-game-pick__tick {
    background: var(--gea-brand-500);
    border-color: var(--gea-brand-500);
    color: var(--gea-text-on-brand);
}