:root {
  color-scheme: dark;
  --bg: #090b14;
  --panel: #101321;
  --panel-raised: #161a2d;
  --line: #292b43;
  --muted: #9b9bb3;
  --text: #f5f4fb;
  --lime: #b98aff;
  --red: #ff526f;
  --blue: #5b8cff;
  --font-body: "DM Sans", sans-serif;
  --font-display: "Space Grotesk", sans-serif;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 90px; }
body { margin: 0; background: var(--bg); color: var(--text); font-family: var(--font-body); -webkit-font-smoothing: antialiased; }
button, input { font: inherit; }
button, a { -webkit-tap-highlight-color: transparent; }
a { color: inherit; text-decoration: none; }
button:focus-visible, a:focus-visible, input:focus-visible { outline: 2px solid var(--lime); outline-offset: 3px; }
.section-wrap { width: min(1180px, calc(100% - 64px)); margin-inline: auto; }
[data-screen-view][hidden] { display: none !important; }
[hidden] { display: none !important; }
main.screen-transition { animation: screen-enter .32s ease-out both; }
@keyframes screen-enter { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: translateY(0); } }
body.account-expelled .site-header, body.account-expelled .site-footer { display: none; }
.expelled-screen { min-height: 100vh; display: grid; place-items: center; padding-block: 40px; }
.expelled-panel { width: min(560px, 100%); padding: clamp(28px, 6vw, 56px); border: 1px solid rgba(255, 82, 107, .32); background: linear-gradient(145deg, rgba(34, 18, 38, .96), rgba(13, 16, 29, .98)); box-shadow: 0 24px 80px rgba(0, 0, 0, .3); }
.expelled-panel h1 { margin: 18px 0 12px; color: #ff7188; font: 700 clamp(32px, 6vw, 52px) var(--font-display); }
.expelled-panel > p { color: #d7d3df; line-height: 1.7; }
.profile-screen, .players-screen, .public-profile-screen, .help-screen, .inbox-screen { min-height: calc(100vh - 78px); padding-top: 64px; padding-bottom: 72px; }
.screen-heading { display: flex; align-items: flex-end; justify-content: space-between; gap: 20px; margin-bottom: 30px; }
.screen-heading h1 { margin: 12px 0 8px; font-size: clamp(36px, 5vw, 52px); letter-spacing: -.055em; }
.screen-heading .section-intro { margin-bottom: 0; }
.inbox-screen .screen-heading { align-items: center; }
.player-leaderboards { margin-bottom: 44px; }
.player-leaderboards-heading { display: flex; align-items: flex-end; justify-content: space-between; gap: 20px; margin-bottom: 18px; }
.player-leaderboards-heading h2 { margin: 9px 0 5px; color: #e5e1ef; font: 600 clamp(23px,3vw,30px)/1.15 var(--font-display); letter-spacing: -.04em; }
.player-leaderboards-heading p { margin: 0; color: #9aa5a1; font-size: 11px; line-height: 1.6; }
.player-game-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 14px; }
.player-game-card { min-width: 0; padding: 19px; border: 1px solid #302b4c; background: linear-gradient(135deg,#141629,#101321 72%); }
.player-game-card-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; padding-bottom: 13px; border-bottom: 1px solid #302b4c; }
.player-game-card-heading h3 { margin: 0; color: #e5e1ef; font: 600 16px/1.35 var(--font-display); }
.player-game-format { flex: 0 0 auto; padding: 5px 8px; border: 1px solid #45405f; color: #b8a7dc; font: 700 8px var(--font-display); letter-spacing: .08em; text-transform: uppercase; }
.player-game-ranking { display: grid; gap: 8px; margin: 13px 0 0; padding: 0; list-style: none; }
.player-game-rank { display: grid; grid-template-columns: 24px minmax(0,1fr) auto; align-items: center; gap: 9px; min-height: 40px; }
.player-game-rank-number { color: var(--lime); font: 700 11px var(--font-display); }
.player-game-rank-name { min-width: 0; overflow-wrap: anywhere; color: #e5e1ef; font-size: 11px; font-weight: 700; }
.player-game-rank-meta { color: #9aa5a1; font-size: 9px; text-align: right; }
.player-game-empty { margin: 14px 0 0; color: #9aa5a1; font-size: 10px; line-height: 1.6; }
.inbox-list { display: grid; gap: 12px; max-width: 860px; }
.inbox-item { display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 18px 20px; border: 1px solid #302b4c; background: #101321; }
.inbox-item.is-unread { border-color: rgba(185,138,255,.55); background: linear-gradient(110deg,rgba(87,53,128,.18),#101321 65%); }
.inbox-item-content h2 { margin: 0; color: #f0eafb; font: 600 15px var(--font-display); }
.inbox-item-content p { margin: 7px 0; color: #b8b4c5; font-size: 12px; line-height: 1.6; }
.inbox-item-content time { color: #89849a; font-size: 10px; }
.inbox-read-button { flex: 0 0 auto; min-height: 36px; padding-inline: 12px; font-size: 10px; }
.inbox-read-label { flex: 0 0 auto; color: #9690a5; font-size: 10px; }
.inbox-empty { padding: 24px; border: 1px dashed #39334f; color: #aaa5b8; text-align: center; font-size: 13px; }
.screen-back { flex: 0 0 auto; }
.profile-panel { max-width: 760px; padding: 26px; border: 1px solid #302b4c; background: linear-gradient(135deg,#141629,#101321 72%); }
.profile-panel #profile-form { display: grid; gap: 18px; }
.profile-panel #profile-form[hidden], .profile-panel [hidden] { display: none !important; }
.profile-summary-heading { display: flex; align-items: center; gap: 18px; padding-bottom: 22px; border-bottom: 1px solid #302b4c; }
.profile-summary-heading h2 { margin: 7px 0 0; font-size: 26px; letter-spacing: -.04em; }
.profile-identity-line { display: flex; align-items: center; flex-wrap: wrap; gap: 12px; }
.profile-identity-line h2 { margin: 7px 0 0; }
.profile-summary-heading .profile-avatar-preview, .profile-summary-heading .avatar-placeholder { width: 72px; height: 72px; flex: 0 0 auto; grid-row: auto; }
.profile-label, .profile-details dt { color: #a19bb2; font: 700 9px var(--font-display); letter-spacing: .1em; text-transform: uppercase; }
.profile-details { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin: 23px 0; }
.profile-details > div { display: grid; align-content: start; gap: 9px; min-width: 0; padding: 15px; border: 1px solid rgba(53,48,79,.75); background: rgba(16,19,33,.62); }
.profile-details > .profile-games, .profile-details > .profile-bio, .profile-details > .profile-game-accounts { grid-column: 1 / -1; }
.profile-details dt, .profile-details dd { margin: 0; }
.profile-details dd { color: #e5e1ef; font-size: 12px; line-height: 1.7; white-space: pre-wrap; }
.profile-details .profile-game-tags { margin-top: 0; white-space: normal; }
.profile-follower-count { display: inline-flex; align-items: baseline; gap: 5px; padding: 5px 9px; border: 1px solid #35304f; background: rgba(185,138,255,.08); color: #b9b2c9; font-size: 9px; white-space: nowrap; }
.profile-follower-count strong { color: var(--text); font: 700 13px var(--font-display); }
.profile-public-username { display: flex; align-items: center; flex-wrap: wrap; gap: 9px; }
.profile-public-username .profile-follower-count { vertical-align: middle; }
.profile-tournaments { padding-top: 18px; border-top: 1px solid #302b4c; }
.profile-tournaments h3, .report-moderation h3 { margin: 0 0 12px; font-size: 14px; }
.profile-tournament-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.profile-tournament-item { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 11px 12px; border: 1px solid rgba(53,48,79,.75); background: rgba(16,19,33,.7); }
.profile-tournament-item strong { color: #e5e1ef; font-size: 11px; }
.profile-tournament-item small { color: #a19bb2; font-size: 10px; text-align: right; }
.profile-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 22px; }
.profile-actions .button { min-width: 145px; }
.profile-screen, .public-profile-screen { padding-top: 30px; padding-bottom: 30px; }
.profile-screen .screen-heading, .public-profile-screen .screen-heading { margin-bottom: 18px; }
.profile-screen .screen-heading h1, .public-profile-screen .screen-heading h1 { margin: 8px 0 4px; font-size: clamp(30px, 4vw, 40px); }
.profile-panel { max-width: none; padding: 22px; border-color: rgba(130,105,184,.35); border-radius: 14px; background: radial-gradient(ellipse at 5% 0%, rgba(111,73,159,.16), transparent 42%), linear-gradient(135deg,#141629,#101321 72%); }
.profile-summary { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(280px, .8fr); grid-template-areas: "identity identity" "details badges" "details tournaments" "actions actions"; gap: 16px 22px; }
.profile-summary-heading { grid-area: identity; gap: 15px; padding-bottom: 16px; }
.profile-summary-heading .profile-avatar-preview, .profile-summary-heading .avatar-placeholder { width: 64px; height: 64px; }
.profile-summary-heading h2 { font-size: 24px; }
.profile-public-username { gap: 8px; margin: 7px 0 0; color: #a19bb2; font-size: 11px; }
.profile-public-username .profile-follower-count { padding: 4px 8px; }
.profile-details { grid-area: details; align-content: start; gap: 10px; margin: 0; }
.profile-details > div { gap: 6px; padding: 12px 14px; border-color: rgba(75,67,103,.6); border-radius: 9px; }
.profile-details dd { font-size: 12px; line-height: 1.5; }
.profile-details > .profile-games, .profile-details > .profile-bio, .profile-details > .profile-game-accounts { grid-column: 1 / -1; }
.earned-badges { grid-area: badges; align-self: start; padding: 0; border-top: 0; }
.earned-badges h3, .profile-tournaments h3 { margin-bottom: 9px; }
.earned-badge { padding: 6px 9px; border-radius: 6px; }
.profile-tournaments { grid-area: tournaments; align-self: start; padding-top: 13px; }
.profile-tournament-list { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; }
.profile-tournament-item { align-items: flex-start; flex-direction: column; gap: 4px; min-height: 36px; padding: 8px 10px; border-radius: 7px; }
.profile-actions { grid-area: actions; margin-top: 0; padding-top: 14px; border-top: 1px solid #302b4c; }
.public-profile-panel { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(280px, .8fr); grid-template-areas: "identity identity" "notice notice" "details badges" "details tournaments" "actions actions"; gap: 16px 22px; }
.public-profile-panel .profile-summary-heading { grid-area: identity; }
.public-profile-panel .profile-preview-notice { grid-area: notice; margin: 0; }
.public-profile-panel .profile-details { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.public-profile-panel .profile-details { grid-area: details; align-content: start; margin: 0; }
.public-profile-panel .profile-details > .profile-games, .public-profile-panel .profile-details > .profile-bio { grid-column: 1 / -1; }
.public-profile-panel .earned-badges { grid-area: badges; align-self: start; padding: 0; border-top: 0; }
.public-profile-panel .profile-tournaments { grid-area: tournaments; align-self: start; padding-top: 13px; }
.public-profile-panel .profile-actions { grid-area: actions; margin-top: 0; padding-top: 14px; border-top: 1px solid #302b4c; }
.profile-friend-status { display: block; margin-top: 7px; color: var(--blue); font-size: 10px; }
.profile-preview-notice { margin: 18px 0 0; padding: 10px 12px; border-left: 2px solid var(--blue); background: rgba(91,140,255,.08); color: #c4d5ff; font-size: 10px; }
.player-search { max-width: 760px; margin-bottom: 12px; }
.player-search input { width: 100%; height: 42px; padding: 0 12px; border: 1px solid #35304f; background: #111321; color: var(--text); font-size: 12px; }
.player-search input:focus { border-color: var(--lime); outline: none; }
.player-search-hint { max-width: 760px; margin: 0 0 18px; }
.player-directory { display: grid; gap: 10px; max-width: 760px; }
.player-directory-item { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 16px 18px; border: 1px solid #302b4c; background: linear-gradient(135deg,#141629,#101321 72%); }
.player-directory-item > div { display: grid; gap: 5px; }
.player-directory-item strong { font-size: 13px; }
.player-directory-item small { color: #a19bb2; font-size: 10px; }
.report-moderation { margin-top: 28px; padding-top: 20px; border-top: 1px solid #302b4c; }
.report-moderation[hidden] { display: none; }
.profile-panel [data-public-actions][hidden] { display: none; }
.earned-badges { padding-top: 18px; border-top: 1px solid #302b4c; }
.earned-badges h3 { margin: 0 0 12px; font-size: 14px; }
.badge-list { display: flex; flex-wrap: wrap; gap: 8px; }
.earned-badge { padding: 8px 11px; border: 1px solid rgba(185,138,255,.4); background: rgba(185,138,255,.09); color: #dfccff; font-size: 10px; }
.badges-empty { margin: 0; color: #a19bb2; font-size: 11px; }
.profile-summary > .button { margin-top: 22px; }
.profile-panel .avatar-editor { margin-bottom: 0; }
.profile-panel .form-message:not(:empty) { margin-top: -8px; }
.profile-edit-actions { display: flex; flex-wrap: wrap; gap: 10px; }
.profile-edit-actions .button { min-width: 150px; }
.favorite-game-picker { position: relative; }
.favorite-game-suggestions { max-height: 240px; overflow-y: auto; position: absolute; top: 56px; left: 0; right: 0; z-index: 4; border: 1px solid #35304f; background: #111321; box-shadow: 0 14px 36px rgba(0,0,0,.4); }
.favorite-game-suggestions[hidden] { display: none; }
.favorite-game-option { width: 100%; padding: 10px 12px; border: 0; border-bottom: 1px solid rgba(53,48,79,.65); background: transparent; color: #e5e1ef; text-align: left; font-size: 11px; cursor: pointer; }
.favorite-game-option:hover, .favorite-game-option:focus-visible { background: rgba(185,138,255,.12); color: var(--lime); }
.favorite-game-tags { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.favorite-game-tag { display: inline-flex; align-items: center; gap: 7px; padding: 5px 7px 5px 10px; border: 1px solid rgba(185,138,255,.4); background: rgba(185,138,255,.09); color: #dfccff; font-size: 10px; }
.favorite-game-tag button { width: 20px; height: 20px; border: 0; background: transparent; color: #ff8ba0; font-size: 16px; line-height: 1; cursor: pointer; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  main.screen-transition { animation: none; }
}
.profile-trophy { align-self: flex-start; padding: 3px 7px; border: 1px solid #45405f; color: #b8a7dc; font: 700 8px var(--font-display); letter-spacing: .06em; text-transform: uppercase; }
.profile-tournament-item.is-place-1 { border-color: rgba(255,200,87,.55); background: linear-gradient(135deg,rgba(255,200,87,.12),rgba(16,19,33,.7) 70%); }
.profile-tournament-item.is-place-1 .profile-trophy { border-color: rgba(255,200,87,.7); background: rgba(255,200,87,.14); color: #ffd47a; }
.profile-tournament-item.is-place-2 { border-color: rgba(206,214,230,.45); }
.profile-tournament-item.is-place-2 .profile-trophy { border-color: rgba(206,214,230,.6); background: rgba(206,214,230,.1); color: #dfe5f1; }
.profile-tournament-item.is-place-3 { border-color: rgba(222,146,96,.45); }
.profile-tournament-item.is-place-3 .profile-trophy { border-color: rgba(222,146,96,.6); background: rgba(222,146,96,.1); color: #f0b48b; }
.profile-tournament-item.is-placed .profile-trophy { border-color: rgba(185,138,255,.5); color: var(--lime); }
.profile-tournament-item.is-hidden-record { opacity: .6; }
.profile-tournament-item .profile-trophy-hidden { color: #8f89a1; font-style: italic; }
.profile-trophy-settings { display: grid; gap: 10px; margin: 0; padding: 14px; border: 1px solid #302b4c; background: rgba(16,19,33,.62); }
.profile-trophy-settings legend { padding: 0 6px; color: #c3ccc7; font-size: 10px; font-weight: 600; }
.profile-trophy-settings .field-hint { margin: 0; }
.profile-trophy-options { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 8px; }
.profile-trophy-option { display: grid; grid-template-columns: auto minmax(0,1fr); align-items: center; gap: 4px 9px; padding: 9px 10px; border: 1px solid rgba(53,48,79,.75); color: #e5e1ef; font-size: 11px; cursor: pointer; }
.profile-trophy-option:has(input:checked) { border-color: rgba(185,138,255,.5); background: rgba(185,138,255,.07); }
.profile-trophy-option input { grid-row: span 2; accent-color: var(--lime); }
.profile-trophy-option span { overflow-wrap: anywhere; font-weight: 600; }
.profile-trophy-option small { color: #a19bb2; font-size: 9px; }
@media (max-width: 600px) { .profile-trophy-options { grid-template-columns: 1fr; } }

/* Cuentas de juego */
.profile-details .game-account-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 6px; white-space: normal; }
.game-account-item { display: grid; grid-template-columns: minmax(0,1fr) auto; align-items: center; gap: 2px 8px; padding: 8px 10px; border: 1px solid rgba(53,48,79,.75); border-radius: 7px; background: rgba(16,19,33,.7); }
.game-account-item small { grid-column: 1; color: #a19bb2; font-size: 9px; line-height: 1.4; }
.game-account-item strong { grid-column: 1; color: #e5e1ef; font: 600 12px var(--font-display); overflow-wrap: anywhere; }
.game-account-privacy { grid-column: 2; grid-row: 1 / span 2; padding: 3px 7px; border: 1px solid #45405f; color: #a19bb2; font: 700 8px var(--font-display); letter-spacing: .06em; text-transform: uppercase; }
.game-account-privacy.is-public { border-color: rgba(185,138,255,.5); color: var(--lime); }
.game-account-settings { display: grid; gap: 10px; margin: 0; padding: 14px; border: 1px solid #302b4c; background: rgba(16,19,33,.62); }
.game-account-settings legend { padding: 0 6px; color: #c3ccc7; font-size: 10px; font-weight: 600; }
.game-account-settings > .field-hint { margin: 0; }
.game-account-rows { display: grid; gap: 8px; }
.game-account-row { display: grid; grid-template-columns: minmax(120px,.7fr) minmax(0,1.3fr) auto auto; grid-template-areas: "game field visibility remove" "game hint hint hint"; align-items: center; gap: 4px 12px; padding: 10px 12px; border: 1px solid rgba(53,48,79,.75); }
.game-account-row > strong { grid-area: game; color: #e5e1ef; font-size: 11px; overflow-wrap: anywhere; }
.game-account-row > .form-field { grid-area: field; }
.game-account-row > .field-hint { grid-area: hint; margin: 0; }
.game-account-visibility { grid-area: visibility; display: inline-flex; align-items: center; gap: 6px; color: #c5bbd8; font-size: 10px; white-space: nowrap; cursor: pointer; }
.game-account-visibility input { accent-color: var(--lime); }
.game-account-row > .button { grid-area: remove; min-height: 34px; padding-inline: 10px; font-size: 10px; }
.game-account-add { display: flex; align-items: flex-end; flex-wrap: wrap; gap: 10px; }
.game-account-add .form-field { flex: 1 1 220px; }
.gametag-field { display: grid; gap: 6px; margin-bottom: 4px; }
.gametag-field .field-hint { margin: 0; }
@media (max-width: 600px) {
  .game-account-row { grid-template-columns: minmax(0,1fr) auto; grid-template-areas: "game remove" "field field" "hint hint" "visibility visibility"; }
}
.game-account-staff-note { margin: 2px 0 0; color: #a19bb2; font-size: 9px; }
.managed-user-game-accounts { display: block; color: #c5bbd8; overflow-wrap: anywhere; }

.site-header { height: 78px; padding: 0 max(32px, calc((100vw - 1180px) / 2)); border-bottom: 1px solid rgba(255,255,255,.055); display: flex; align-items: center; justify-content: space-between; position: sticky; top: 0; z-index: 5; background: rgba(9,11,20,.96); backdrop-filter: blur(14px); }
.brand { display: inline-flex; align-items: center; gap: 10px; font: 700 14px var(--font-display); letter-spacing: .06em; }
.brand-mark { width: 30px; height: 30px; display: grid; place-items: center; background: var(--lime); color: #171020; font-size: 19px; font-weight: 700; clip-path: polygon(0 0,100% 0,100% 72%,72% 100%,0 100%); }
.brand-accent { color: var(--lime); }
.main-nav { display: flex; align-items: center; gap: 35px; }
.nav-link { color: #9da6aa; font-size: 12px; font-weight: 600; transition: color .2s; }
.nav-link:hover, .nav-link.active { color: var(--text); }
.nav-button { padding: 0; border: 0; background: none; font-family: inherit; cursor: pointer; }
.button { min-height: 46px; padding: 0 20px; border: 1px solid transparent; display: inline-flex; align-items: center; justify-content: center; gap: 14px; font-size: 12px; font-weight: 700; transition: background .2s, border-color .2s, transform .2s; cursor: pointer; }
.button:hover { transform: translateY(-2px); }
.button-primary { background: var(--lime); color: #171020; }
.button-primary:hover { background: #d2b4ff; }
.button-outline { border-color: #353d42; color: #e6eae8; }
.button-outline:hover { border-color: var(--lime); }
.button-small { min-height: 36px; padding: 0 13px; font-size: 11px; }
.account-actions { display: flex; align-items: center; gap: 8px; }
.login-trigger[hidden], .signed-in-user[hidden], .inbox-trigger[hidden] { display: none !important; }
.inbox-trigger { position: relative; min-height: 38px; padding: 0 12px; display: inline-flex; align-items: center; gap: 7px; border: 1px solid #35304f; background: #111321; color: #e6e1f0; font: 600 11px var(--font-display); cursor: pointer; }
.inbox-trigger:hover { border-color: var(--lime); }
.inbox-unread-badge { min-width: 18px; height: 18px; padding: 0 4px; display: inline-grid; place-items: center; border-radius: 10px; background: #ff526b; color: white; font: 700 9px var(--font-display); }
.inbox-unread-badge[hidden] { display: none; }
.signed-in-user { display: flex; align-items: center; gap: 9px; position: relative; }
.account-menu-toggle { min-height: 38px; padding: 0 10px; display: inline-flex; align-items: center; gap: 9px; border: 1px solid #35304f; background: #111321; color: var(--text); cursor: pointer; }
.account-avatar, .account-avatar-placeholder { width: 25px; height: 25px; flex: 0 0 auto; border: 1px solid rgba(185,138,255,.4); border-radius: 50%; }
.account-avatar { object-fit: cover; }.account-avatar[hidden], .account-avatar-placeholder[hidden] { display: none; }
.account-avatar-placeholder { display: grid; place-items: center; background: #28213c; color: var(--lime); font: 700 11px var(--font-display); }
.account-menu-toggle:hover, .account-menu-toggle[aria-expanded="true"] { border-color: var(--lime); }
.account-name { max-width: 130px; overflow: hidden; color: #e8e2f5; font-size: 11px; font-weight: 700; text-overflow: ellipsis; white-space: nowrap; }
.account-menu-chevron { color: var(--lime); font-size: 14px; transition: transform .2s; }
.account-menu-toggle[aria-expanded="true"] .account-menu-chevron { transform: rotate(180deg); }
.account-menu { min-width: 170px; padding: 5px; position: absolute; top: calc(100% + 8px); right: 0; z-index: 8; border: 1px solid #35304f; background: #111321; box-shadow: 0 14px 36px rgba(0,0,0,.4); }
.account-menu[hidden] { display: none; }
.account-menu button { width: 100%; padding: 10px 11px; border: 0; background: transparent; color: #e5e1ef; text-align: left; font-size: 11px; cursor: pointer; }
.account-menu button:hover, .account-menu button:focus-visible { background: rgba(185,138,255,.12); color: var(--lime); }
.account-menu button:last-child { margin-top: 4px; border-top: 1px solid #302b4c; color: #ff8ba0; }
.menu-toggle { display: none; }

.hero { min-height: 586px; padding-top: 91px; position: relative; display: grid; grid-template-columns: 1fr .9fr; align-items: center; }
.hero-copy { padding-bottom: 50px; position: relative; z-index: 1; }
.eyebrow { display: flex; align-items: center; gap: 9px; color: #a8b0b3; font: 700 9px var(--font-display); letter-spacing: .15em; }
.live-dot { display: inline-block; width: 7px; height: 7px; flex: 0 0 auto; border-radius: 50%; background: var(--red); box-shadow: 0 0 10px rgba(255,82,111,.4); }
h1, h2, h3, p { margin-top: 0; }
h1, h2, h3 { font-family: var(--font-display); }
.hero h1 { margin: 20px 0 15px; font-size: clamp(54px, 6.2vw, 78px); line-height: .98; letter-spacing: -.065em; font-weight: 600; }
.hero h1 span, .section-heading h2 span, .community-copy h2 span { color: var(--lime); }
.hero-description { max-width: 420px; margin-bottom: 25px; color: #9ca6aa; font-size: 13px; line-height: 1.8; }
.hero-actions { display: flex; align-items: center; gap: 24px; }
.text-link { display: inline-flex; align-items: center; gap: 9px; color: #d6dcda; font-size: 11px; font-weight: 700; transition: color .2s; }
.text-link:hover { color: var(--lime); }
.hero-proof { display: flex; align-items: center; gap: 13px; margin-top: 39px; }
.avatar-stack { display: flex; padding-left: 3px; }
.avatar-stack span { width: 26px; height: 26px; margin-left: -4px; display: grid; place-items: center; border: 2px solid var(--bg); border-radius: 50%; background: #30233f; color: #d9c1ff; font-size: 9px; font-weight: 700; }
.avatar-stack span:nth-child(2) { background: #594853; color: #f6b6aa; }.avatar-stack span:nth-child(3) { background: #394d5d; color: #9de0ef; }.avatar-stack span:nth-child(4) { background: #252d2e; color: #c6ceca; }
.hero-proof p { margin: 0; color: #7e898c; font-size: 10px; line-height: 1.55; }.hero-proof strong { color: #d5dbd8; font-weight: 600; }
.hero-art { height: 425px; max-width: 500px; width: 100%; justify-self: end; position: relative; overflow: hidden; background: radial-gradient(ellipse at 49% 47%, rgba(185,138,255,.18), transparent 38%), radial-gradient(ellipse at 88% 14%, rgba(255,82,111,.09), transparent 40%), linear-gradient(145deg,#17152b,#111321 58%,#101321); border: 1px solid #302b4c; }
.hero-art::before, .hero-art::after { content: ""; position: absolute; width: 380px; height: 380px; border: 1px solid rgba(91,140,255,.18); border-radius: 50%; top: 22px; left: 50%; transform: translateX(-50%); }
.hero-art::after { width: 290px; height: 290px; top: 67px; border-color: rgba(255,82,111,.2); }
.art-ring { position: absolute; z-index: 1; top: 112px; left: 50%; border: 1px solid rgba(185,138,255,.3); border-radius: 50%; transform: translateX(-50%) rotate(-24deg); }
.ring-one { width: 230px; height: 115px; }.ring-two { width: 230px; height: 115px; transform: translateX(-50%) rotate(24deg); }
.art-glow { position: absolute; top: 132px; left: 50%; width: 145px; height: 145px; background: rgba(185,138,255,.22); border-radius: 50%; filter: blur(36px); transform: translateX(-50%); }
.art-label { position: absolute; top: 22px; left: 23px; display: flex; align-items: center; gap: 7px; color: #9da7a1; font: 700 8px var(--font-display); letter-spacing: .12em; }
.art-center { position: absolute; z-index: 2; top: 113px; left: 50%; width: 140px; height: 140px; display: grid; place-items: center; background: linear-gradient(145deg,#d5bcff,#8b5cf6 72%); clip-path: polygon(50% 0,93% 25%,100% 70%,67% 100%,23% 94%,0 54%,14% 14%); transform: translateX(-50%) rotate(-8deg); box-shadow: 0 0 55px rgba(185,138,255,.24); }
.art-x { color: #1d1730; font: 500 94px/1 var(--font-display); transform: rotate(8deg); }
.art-plus { position: absolute; top: 13px; right: -39px; color: var(--red); font-size: 21px; }
.art-spark { position: absolute; z-index: 2; color: var(--blue); }.spark-one { top: 108px; left: 80px; font-size: 21px; }.spark-two { top: 205px; right: 74px; color: var(--red); font-size: 27px; }
.art-stats { position: absolute; z-index: 2; bottom: 32px; left: 0; right: 0; display: flex; flex-direction: column; align-items: center; gap: 5px; }
.art-stats span { color: #8e9b95; font: 700 8px var(--font-display); letter-spacing: .19em; }.art-stats strong { color: #eef4e7; font: 600 22px var(--font-display); letter-spacing: .1em; }
.art-side-note { position: absolute; right: 15px; top: 50%; color: #65716a; font: 700 8px var(--font-display); letter-spacing: .18em; writing-mode: vertical-rl; }
.hero-bottom { position: absolute; bottom: 24px; left: 0; right: 0; display: flex; justify-content: space-between; color: #657074; font: 700 8px var(--font-display); letter-spacing: .16em; }
.scroll-indicator { display: flex; gap: 10px; }.scroll-indicator span { color: var(--lime); }

.role-tools-section { min-height: calc(100vh - 78px); padding-top: 64px; padding-bottom: 72px; }
.role-tools-section[hidden] { display: none; }
.role-tools-panel { padding: 22px; border: 1px solid #302b4c; background: linear-gradient(115deg,#17152b,#101321); }
.role-tools-heading { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.role-tools-heading h2 { margin: 8px 0 4px; font-size: 22px; letter-spacing: -.04em; }
.role-tools-heading p { margin: 0; color: #929e99; font-size: 10px; line-height: 1.6; }
.role-tools-list { display: grid; grid-template-columns: repeat(auto-fit,minmax(230px,1fr)); gap: 18px; margin-top: 24px; }
.role-tool-button { min-height: 190px; padding: 25px; display: flex; flex-direction: column; align-items: flex-start; justify-content: space-between; gap: 22px; border: 1px solid #38334f; background: linear-gradient(145deg,#1a1b2d,#121622); color: #e6e1f0; text-align: left; font-size: 16px; font-weight: 600; cursor: pointer; transition: border-color .2s, color .2s, background .2s, transform .2s; }
.role-tool-button:hover { transform: translateY(-3px); border-color: var(--lime); background: linear-gradient(145deg,#222036,#151a25); color: var(--lime); }
.role-tool-icon { width: 44px; height: 44px; color: var(--lime); }
.role-demo-note { margin: 13px 0 0; color: #788480; font-size: 9px; line-height: 1.5; }
.demo-role-note { margin: -5px 0 0; color: #899590; font-size: 9px; line-height: 1.5; }
.form-field select { width: 100%; height: 39px; padding: 0 11px; border: 1px solid #303a3c; border-radius: 0; background: #0c1113; color: var(--text); font-size: 11px; }
.form-field select:focus { border-color: var(--lime); outline: none; }

.tournaments-section, .tournaments-screen { min-height: calc(100vh - 78px); padding-top: 64px; padding-bottom: 72px; }
.tournaments-screen .section-heading h1 { margin: 8px 0 4px; font-size: clamp(38px,5vw,56px); letter-spacing: -.05em; }
.public-tournament-search { display: grid; grid-template-columns: minmax(0,1fr) auto; align-items: end; gap: 10px; margin-bottom: 18px; }
.public-tournament-search > .form-field { min-width: 0; max-width: 700px; margin: 0; }
.public-tournament-search input, .public-tournament-search select { width: 100%; height: 42px; padding: 0 12px; border: 1px solid #303a3c; background: #0c1113; color: var(--text); font-size: 11px; }
.public-tournament-filter-toggle { min-width: 120px; height: 39px; min-height: 39px; margin: 0; }
.public-tournament-filter-toggle[aria-expanded="true"] { border-color: var(--lime); color: var(--lime); }
.public-tournament-filters { grid-column: 1/-1; display: grid; grid-template-columns: repeat(3,minmax(140px,1fr)); align-items: end; gap: 12px; margin-top: 10px; padding: 17px; border: 1px solid #302b4c; background: linear-gradient(135deg,#141629,#101321 72%); box-shadow: 0 14px 36px rgba(0,0,0,.4); }
.public-tournament-filters .form-field { margin: 0; }
.public-tournament-filter-reset { min-height: 39px; }
.public-tournament-search .tournament-filter-count { grid-column: 1/-1; }
.tournament-empty-state { grid-column: 1/-1; padding: 24px; border: 1px solid #302b4c; color: #a19bb2; text-align: center; }
.card-status[data-lifecycle-status="active"] { color: #a9e56c; }
.card-status[data-lifecycle-status="past"] { color: #ff9b9b; }
.section-heading { display: flex; align-items: end; justify-content: space-between; }
.section-heading h2 { margin: 12px 0 7px; font-size: clamp(34px, 4vw, 44px); line-height: 1.1; letter-spacing: -.05em; font-weight: 600; }
.eyebrow-line { width: 20px; height: 1px; background: var(--lime); }
.section-intro { margin-bottom: 0; color: var(--muted); font-size: 12px; line-height: 1.7; }
.view-all { margin-bottom: 8px; }
.filter-row { display: flex; align-items: center; gap: 9px; margin: 30px 0 21px; }
.filter-chip { padding: 9px 14px; border: 1px solid #283035; background: transparent; color: #a3adae; font-size: 10px; cursor: pointer; transition: all .2s; }
.filter-chip:hover, .filter-chip.selected { border-color: var(--lime); color: var(--lime); background: rgba(185,138,255,.08); }
.filter-chip span { margin-left: 5px; color: #768081; font-size: 8px; }
.filter-note { display: flex; align-items: center; gap: 8px; margin-left: auto; color: #889393; font: 700 8px var(--font-display); letter-spacing: .12em; }
.tournament-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 16px; }
.tournament-card { min-width: 0; overflow: hidden; border: 1px solid #252d31; background: var(--panel); transition: border-color .2s, transform .2s; }
.tournament-card:hover { border-color: #49564d; transform: translateY(-3px); }
.tournament-card[hidden] { display: none; }
.card-banner { height: 119px; padding: 15px 17px; position: relative; overflow: hidden; display: flex; align-items: flex-start; justify-content: space-between; }
.card-banner::before { content: ""; position: absolute; inset: 0; opacity: .77; }
.banner-coral::before { background: radial-gradient(ellipse at 75% 120%,#ff526f 0,transparent 48%), linear-gradient(115deg,#482330,#25232f 70%); }
.banner-violet::before { background: radial-gradient(ellipse at 77% 120%,#a879ff 0,transparent 48%), linear-gradient(115deg,#352443,#242332 70%); }
.banner-lime::before { background: radial-gradient(ellipse at 77% 120%,#5b8cff 0,transparent 48%), linear-gradient(115deg,#243553,#222735 70%); }
.banner-blue::before { background: radial-gradient(ellipse at 77% 120%,#4c9dff 0,transparent 48%), linear-gradient(115deg,#243653,#222735 70%); }
.banner-symbol { position: absolute; right: 31px; top: -27px; color: rgba(255,255,255,.075); font: 700 142px/.95 var(--font-display); letter-spacing: -.1em; }
.game-label, .card-status { z-index: 1; padding: 6px 8px; background: rgba(12,15,16,.55); color: #d0d7d1; font: 700 8px var(--font-display); letter-spacing: .1em; }
.card-status { color: var(--lime); }
.card-status.is-closed { color: #ff9b9b; }
.card-content { padding: 17px 18px 16px; }
.card-date { color: #96a19f; font: 700 8px var(--font-display); letter-spacing: .09em; }
.card-registration-deadline { margin-top: 5px; color: #c5bbd8; font-size: 9px; }
.date-icon { color: var(--lime); font-size: 11px; }.date-divider { padding: 0 4px; color: #586260; }
.card-content h3 { margin: 9px 0 4px; font-size: 19px; letter-spacing: -.035em; }
.card-subtitle { min-height: 17px; margin-bottom: 17px; color: #899495; font-size: 10px; }
.card-meta { display: flex; align-items: center; justify-content: space-between; color: #9ea8a7; font-size: 9px; }
.card-meta strong { color: #e8ede8; }.card-meta > span:first-child > span { color: #9bac81; }
.prize { color: #899493; font: 700 8px var(--font-display); letter-spacing: .09em; }.prize strong { margin-left: 6px; color: var(--lime); font-size: 11px; letter-spacing: 0; }
.card-progress { height: 2px; margin-top: 10px; background: #29312f; }.card-progress span { display: block; height: 100%; background: var(--lime); }
.card-footer { display: flex; align-items: center; justify-content: space-between; margin-top: 14px; }
.format-tag { padding: 6px 8px; border: 1px solid #30393a; color: #adb6b2; font-size: 9px; }
.join-button.is-joined { border-color: rgba(185,138,255,.45); background: rgba(185,138,255,.12); color: var(--lime); }
.bracket-preview { margin-top: 18px; padding: 16px 18px; border: 1px solid #252d31; display: flex; align-items: center; justify-content: space-between; background: #0e1215; }
.bracket-copy { display: flex; align-items: center; gap: 13px; }.bracket-icon { width: 31px; height: 31px; display: grid; place-items: center; border: 1px solid rgba(185,138,255,.4); color: var(--lime); }
.bracket-copy div { display: flex; flex-direction: column; gap: 4px; }.bracket-copy strong { font-size: 11px; }.bracket-copy div span { color: #85908e; font-size: 9px; }
.entrants-dialog, .tournament-details-dialog { width: min(640px, calc(100% - 32px)); max-height: min(90vh, 820px); padding: 27px; overflow-y: auto; border: 1px solid #35304f; background: #111525; color: var(--text); box-shadow: 0 25px 90px rgba(0,0,0,.65); }
.entrants-dialog::backdrop, .tournament-details-dialog::backdrop { background: rgba(4,7,8,.8); backdrop-filter: blur(5px); }
.entrants-dialog[open], .tournament-details-dialog[open] { animation: dialog-enter .18s ease-out; }
.tournament-details-heading { margin: 0 0 8px; color: var(--lime); font: 700 10px var(--font-display); letter-spacing: .09em; text-transform: uppercase; }
.tournament-details-rules { margin: 0; color: #c6d0ca; font-size: 13px; line-height: 1.65; white-space: pre-line; overflow-wrap: anywhere; }
.entrants-list { display: grid; gap: 8px; }
.entrant-item { display: grid; grid-template-columns: 34px minmax(0,1fr) auto; align-items: center; gap: 12px; padding: 11px 12px; border: 1px solid #302b4c; background: #0e1120; }
.entrant-position { color: var(--lime); font: 700 11px var(--font-display); }
.entrant-info { display: grid; gap: 4px; min-width: 0; }
.entrant-info strong { color: #e5e1ef; font-size: 12px; overflow-wrap: anywhere; }
.entrant-info small { color: #87928d; font-size: 9px; line-height: 1.5; }
.entrant-info .entrant-lineup { color: #c5bbd8; }
.entrant-item .button { min-height: 34px; padding-inline: 10px; font-size: 10px; }
.entrants-note { margin: 0; padding: 14px; border: 1px dashed #39334f; color: #aaa5b8; text-align: center; font-size: 11px; }
@media (max-width: 600px) {
  .entrants-dialog { padding: 21px 17px; }
  .entrant-item { grid-template-columns: 28px minmax(0,1fr); }
  .entrant-item .button { grid-column: 1/-1; width: 100%; }
}

/* Tickets de pago */
.join-button.is-payment-pending { border-color: rgba(255,196,107,.5); background: rgba(255,196,107,.1); color: #ffc46b; }
.registration-payment { margin: 14px 0 0; padding: 12px 14px; border: 1px solid rgba(255,196,107,.35); background: rgba(255,196,107,.07); color: #f1dcb8; font-size: 11px; line-height: 1.55; }
.inbox-tickets { max-width: 860px; margin-bottom: 18px; }
.inbox-tickets h2 { margin: 8px 0 6px; color: #e5e1ef; font: 600 19px var(--font-display); letter-spacing: -.03em; }
.inbox-tickets-intro { margin: 0 0 14px; color: var(--muted); font-size: 12px; }
.payment-ticket-list { display: grid; gap: 10px; }
.payment-ticket { display: grid; grid-template-columns: 120px minmax(0,1fr); border: 1px solid rgba(255,196,107,.4); background: #101321; }
.payment-ticket.is-paid { border-color: rgba(126,226,168,.4); }
.payment-ticket-stub { display: grid; place-content: center; gap: 4px; padding: 16px 10px; border-right: 2px dashed rgba(255,196,107,.4); background: rgba(255,196,107,.08); text-align: center; }
.payment-ticket.is-paid .payment-ticket-stub { border-right-color: rgba(126,226,168,.4); background: rgba(126,226,168,.07); }
.payment-ticket-stub small { color: var(--muted); font: 700 9px var(--font-display); letter-spacing: .18em; }
.payment-ticket-stub strong { color: #ffc46b; font: 700 22px var(--font-display); letter-spacing: -.02em; }
.payment-ticket.is-paid .payment-ticket-stub strong { color: #7ee2a8; }
.payment-ticket-body { display: grid; gap: 6px; padding: 15px 18px; min-width: 0; }
.payment-ticket-body h3 { margin: 0; color: #f0eafb; font: 600 15px var(--font-display); overflow-wrap: anywhere; }
.payment-ticket-body p { margin: 0; color: #aaa5b8; font-size: 11px; line-height: 1.5; }
.payment-ticket-body .payment-ticket-note { color: #d8d2e6; }
.payment-ticket-status { justify-self: start; padding: 3px 8px; border: 1px solid rgba(255,196,107,.45); color: #ffc46b; font: 700 9px var(--font-display); letter-spacing: .08em; text-transform: uppercase; }
.payment-ticket.is-paid .payment-ticket-status { border-color: rgba(126,226,168,.45); color: #7ee2a8; }
.entrant-info .entrant-ticket { justify-self: start; padding: 2px 7px; border: 1px solid rgba(255,196,107,.45); color: #ffc46b; font: 700 9px var(--font-display); letter-spacing: .04em; }
.entrant-info .entrant-ticket.is-paid { border-color: rgba(126,226,168,.45); color: #7ee2a8; }
.entrant-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 6px; }
@media (max-width: 600px) {
  .payment-ticket { grid-template-columns: 1fr; }
  .payment-ticket-stub { border-right: 0; border-bottom: 2px dashed rgba(255,196,107,.4); }
  .payment-ticket.is-paid .payment-ticket-stub { border-bottom-color: rgba(126,226,168,.4); }
  .entrant-actions { grid-column: 1/-1; }
  .entrant-actions .button { flex: 1; }
}

.how-section { padding: 77px 0 84px; border-block: 1px solid #22263d; background: #0d1020; }
.how-heading { align-items: end; }.how-heading .section-intro { max-width: 200px; margin-bottom: 7px; }
.steps-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 15px; margin-top: 36px; }
.step-card { min-height: 195px; padding: 21px; border: 1px solid #292b43; background: #111525; position: relative; }
.step-number { position: absolute; top: 18px; right: 19px; color: #606d6a; font: 700 9px var(--font-display); letter-spacing: .12em; }
.step-icon { width: 36px; height: 36px; margin-bottom: 20px; display: grid; place-items: center; border: 1px solid rgba(185,138,255,.4); color: var(--lime); font-size: 18px; }
.step-card h3 { margin-bottom: 7px; font-size: 15px; }.step-card p { max-width: 260px; margin-bottom: 0; color: #8f9a99; font-size: 10px; line-height: 1.7; }
.community-section { padding-top: 80px; }
.community-panel { min-height: 279px; padding: 37px 48px; position: relative; overflow: hidden; display: flex; align-items: center; border: 1px solid #302b4c; background: linear-gradient(110deg,#1c1730,#121321 70%); }
.community-copy { position: relative; z-index: 1; max-width: 475px; }.community-copy h2 { margin: 14px 0 9px; font-size: 37px; line-height: 1.08; letter-spacing: -.055em; }
.community-copy p { max-width: 350px; margin-bottom: 18px; color: #9aa5a1; font-size: 11px; line-height: 1.7; }.community-copy .button { min-height: 40px; }
.community-art { position: absolute; top: 0; right: 4%; width: 360px; height: 100%; display: grid; place-items: center; }
.community-ring { width: 210px; height: 210px; border: 1px solid rgba(185,138,255,.42); border-radius: 50%; box-shadow: 0 0 0 28px rgba(255,82,111,.06),0 0 0 57px rgba(91,140,255,.05); }
.community-cross { position: absolute; z-index: 1; color: var(--lime); font: 300 115px/.8 var(--font-display); transform: rotate(45deg); opacity: .8; }
.community-word { position: absolute; z-index: 2; color: rgba(238,246,229,.75); font: 700 11px/1.4 var(--font-display); text-align: center; letter-spacing: .22em; }
.site-footer { min-height: 83px; display: flex; align-items: center; justify-content: space-between; gap: 15px; color: #707b7b; font: 700 8px var(--font-display); letter-spacing: .1em; }
.community-screen { min-height: calc(100vh - 161px); padding-top: 64px; padding-bottom: 72px; }
.community-page-heading { margin-bottom: 32px; }
.community-page-heading h1 { margin: 10px 0 6px; font-size: clamp(38px,5vw,56px); letter-spacing: -.05em; }
.community-upload-panel { display: grid; grid-template-columns: minmax(0,.85fr) minmax(0,1.15fr); gap: 30px; padding: 24px; border: 1px solid #302b4c; background: linear-gradient(135deg,#17162b,#101321 72%); }
.community-upload-panel[hidden] { display: none; }
.community-upload-copy h2 { margin: 9px 0; color: #e5e1ef; font: 600 21px var(--font-display); }
.community-upload-copy p { margin: 0; color: #a19bb2; font-size: 11px; line-height: 1.7; }
.community-upload-copy .community-storage-note { margin-top: 12px; color: #837c95; font-size: 10px; }
.community-upload-form { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); align-content: start; gap: 12px; }
.community-upload-form .form-field { margin: 0; }
.community-upload-form > .form-field:first-child, .community-video-file, .community-upload-help { grid-column: 1/-1; }
.community-video-file input { height: auto; padding: 9px; font-size: 10px; }
.community-upload-help { margin: -7px 0 0; color: #837c95; font-size: 9px; }
.community-upload-submit { min-height: 40px; grid-column: 1/-1; justify-self: start; }
.community-content-section { margin-top: 42px; }
.community-section-heading { display: flex; align-items: end; justify-content: space-between; gap: 16px; margin-bottom: 15px; }
.community-section-heading h2 { margin: 7px 0 0; color: #e5e1ef; font: 600 clamp(22px,3vw,30px)/1.15 var(--font-display); letter-spacing: -.04em; }
.community-carousel-controls { display: flex; align-items: center; gap: 10px; color: #a19bb2; font: 600 10px var(--font-display); }
.community-carousel-button { width: 38px; min-height: 38px; padding: 0; font-size: 16px; }
.community-carousel-button:disabled { opacity: .45; cursor: not-allowed; }
.community-featured-list { display: grid; }
.community-video-card { min-width: 0; overflow: hidden; border: 1px solid #302b4c; background: linear-gradient(145deg,#141629,#101321 72%); }
.community-video-player { display: block; width: 100%; aspect-ratio: 16/9; background: #080a10; object-fit: contain; }
.community-featured-card { display: grid; grid-template-columns: minmax(0,1.35fr) minmax(230px,.65fr); }
.community-featured-card .community-video-player { height: 100%; min-height: 300px; aspect-ratio: auto; }
.community-video-content { min-width: 0; padding: 16px; }
.community-featured-card .community-video-content { display: flex; flex-direction: column; align-items: flex-start; justify-content: center; padding: 24px; }
.community-video-content h3 { margin: 0 0 7px; color: #e5e1ef; font: 600 16px/1.35 var(--font-display); overflow-wrap: anywhere; }
.community-featured-card .community-video-content h3 { font-size: clamp(20px,3vw,28px); }
.community-video-tournament, .community-video-meta { margin: 0 0 5px; color: #a19bb2; font-size: 10px; line-height: 1.6; }
.community-video-meta { color: #777e8e; font-size: 9px; }
.community-video-rank { display: block; margin-bottom: 8px; color: var(--lime); font: 700 8px var(--font-display); letter-spacing: .12em; }
.community-video-actions { display: flex; align-items: center; gap: 8px; margin-top: 13px; }
.community-like-button, .community-delete-button { min-height: 34px; padding: 0 11px; font-size: 10px; }
.community-edit-button { min-height: 34px; padding: 0 11px; font-size: 10px; }
.community-like-button { color: #ff8298; }
.community-like-button[aria-pressed="true"] { border-color: rgba(255,82,111,.55); background: rgba(255,82,111,.12); color: #ff8298; }
.community-like-button span { margin-left: 4px; color: #e5e1ef; }
.community-delete-button { color: #ff9b9b; }
.community-video-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 14px; }
.community-popular-grid { grid-template-columns: repeat(3,minmax(0,1fr)); }
.community-empty-state { grid-column: 1/-1; margin: 0; padding: 22px; border: 1px solid #302b4c; background: rgba(16,19,33,.62); color: #a19bb2; font-size: 11px; line-height: 1.7; text-align: center; }
.community-video-unavailable { min-height: 130px; margin: 0; padding: 25px; display: grid; place-items: center; background: #080a10; color: #a19bb2; font-size: 10px; text-align: center; }
.community-video-count { margin: 0; color: #a19bb2; font-size: 10px; }
.community-edit-form { width: 100%; display: grid; gap: 12px; }
.community-edit-form .form-field { margin: 0; }
.community-edit-form .form-field input, .community-edit-form .form-field select { width: 100%; height: 39px; padding: 0 11px; border: 1px solid #303a3c; background: #0c1113; color: var(--text); font-size: 11px; }
.community-edit-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.community-edit-actions .button { min-height: 36px; padding-inline: 12px; font-size: 10px; }
.home-viral-section { padding-top: 30px; padding-bottom: 64px; }
.home-section-heading { display: flex; align-items: end; justify-content: space-between; gap: 20px; margin-bottom: 18px; }
.home-section-heading h2 { margin: 8px 0 5px; color: #e5e1ef; font: 600 clamp(27px,4vw,38px)/1.1 var(--font-display); letter-spacing: -.05em; }
.home-section-heading p { margin: 0; color: #9aa5a1; font-size: 11px; line-height: 1.6; }
.home-section-heading > .button { flex: 0 0 auto; min-height: 40px; }
.home-viral-stage { display: grid; }
.home-viral-controls { justify-content: center; margin-top: 14px; }
.home-faq-section { padding: 64px 0 70px; border-block: 1px solid #22263d; background: #0d1020; }
.home-faq-list { display: grid; gap: 9px; margin-top: 20px; }
.home-faq-item { border: 1px solid #302b4c; background: linear-gradient(135deg,#141629,#101321 72%); }
.home-faq-item summary { padding: 17px 19px; color: #e5e1ef; font: 600 12px/1.5 var(--font-display); cursor: pointer; list-style: none; }
.home-faq-item summary::-webkit-details-marker { display: none; }
.home-faq-item summary::after { content: "+"; float: right; margin-left: 14px; color: var(--lime); font: 600 17px/1 var(--font-display); }
.home-faq-item[open] summary::after { content: "−"; }
.home-faq-item p { margin: -3px 19px 17px; max-width: 760px; color: #9aa5a1; font-size: 11px; line-height: 1.7; }
.home-social-section { padding-top: 54px; padding-bottom: 62px; }
.home-social-panel { display: flex; align-items: center; justify-content: space-between; gap: 28px; padding: 28px 32px; border: 1px solid #302b4c; background: linear-gradient(110deg,#1c1730,#121321 70%); }
.home-social-panel h2 { margin: 8px 0 5px; color: #e5e1ef; font: 600 clamp(24px,3.5vw,34px)/1.1 var(--font-display); letter-spacing: -.045em; }
.home-social-panel p { margin: 0; color: #9aa5a1; font-size: 11px; line-height: 1.6; }
.home-social-links { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 9px; }
.home-social-link { width: 44px; height: 44px; display: grid; place-items: center; border: 1px solid #45405f; background: rgba(16,19,33,.72); color: #e5e1ef; transition: border-color .2s, background .2s, color .2s, transform .2s; }
.home-social-link:hover, .home-social-link:focus-visible { border-color: var(--red); background: var(--red); color: #fff; transform: translateY(-2px); outline: none; }
.home-social-link.is-unconfigured { border-style: dashed; color: #858096; }
.home-social-link.is-unconfigured:hover { border-color: #45405f; background: rgba(16,19,33,.72); color: #858096; transform: none; }
.home-social-mark { font: 700 11px var(--font-display); letter-spacing: -.04em; }
.social-links-workspace > form { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 14px; margin-top: 18px; }
.social-links-workspace .form-field { margin: 0; }
.social-links-message { grid-column: 1/-1; margin: 0; color: #a9e56c; font-size: 10px; }
.social-links-workspace > form > .button { grid-column: 1/-1; justify-self: start; }
.footer-brand { color: #dfe5df; font-size: 11px; letter-spacing: .05em; }.footer-brand .brand-mark { width: 25px; height: 25px; font-size: 15px; }

.teams-screen, .team-profile-screen { min-height: calc(100vh - 78px); padding-top: 64px; padding-bottom: 72px; }
.teams-heading-actions { display: flex; flex-wrap: wrap; gap: 10px; }
.team-invitations-panel, .team-create-panel { margin-bottom: 22px; padding: 22px; border: 1px solid #302b4c; background: linear-gradient(135deg,#17162b,#101321 72%); }
.team-invitations-panel { border-color: rgba(185,138,255,.5); background: linear-gradient(110deg,rgba(87,53,128,.22),#101321 65%); }
.team-invitations-panel h2, .inbox-invitations h2 { margin: 8px 0 14px; color: #e5e1ef; font: 600 19px var(--font-display); letter-spacing: -.03em; }
.inbox-invitations { max-width: 860px; margin-bottom: 18px; }
.team-invitation-list { display: grid; gap: 10px; }
.team-invitation-card { display: grid; grid-template-columns: 96px minmax(0,1fr) auto; align-items: center; gap: 16px; padding: 12px; border: 1px solid #302b4c; background: #101321; }
.team-invitation-cover { height: 58px; }
.team-invitation-cover .team-cover-initial { font-size: 28px; }
.team-invitation-cover .team-number-badge { left: 6px; bottom: 6px; padding: 3px 5px; font-size: 8px; }
.team-invitation-info { display: grid; gap: 5px; min-width: 0; }
.team-invitation-info strong { color: #f0eafb; font: 600 14px var(--font-display); overflow-wrap: anywhere; }
.team-invitation-info small { color: #a19bb2; font-size: 10px; }
.team-invitation-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.team-invitation-actions .button { min-height: 36px; padding-inline: 12px; font-size: 10px; }
.team-create-panel { display: grid; grid-template-columns: minmax(0,.85fr) minmax(0,1.15fr); gap: 30px; }
.team-create-copy h2 { margin: 9px 0; color: #e5e1ef; font: 600 21px var(--font-display); }
.team-create-copy p { margin: 0; color: #a19bb2; font-size: 11px; line-height: 1.7; }
.team-create-copy .team-create-note { margin-top: 12px; padding: 9px 10px; border-left: 2px solid var(--lime); background: rgba(185,138,255,.07); color: #c7c0d7; font-size: 10px; }
.team-create-form { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); align-content: start; gap: 12px; }
.team-create-form .form-field { margin: 0; }
.team-create-form .field-hint { margin: -4px 0 0; }
.team-create-form .form-message:not(:empty) { margin-top: 0; color: #f0a79e; }
.team-form-actions { display: flex; flex-wrap: wrap; gap: 10px; }
.team-form-actions .button { min-height: 42px; }
.team-directory-tools { display: flex; align-items: end; justify-content: space-between; gap: 16px; margin-bottom: 18px; }
.team-search { flex: 1 1 auto; max-width: 560px; margin: 0; }
.team-search input { height: 42px; padding: 0 12px; border: 1px solid #303a3c; background: #0c1113; font-size: 11px; }
.team-directory-count { margin: 0 0 12px; color: #a19bb2; font-size: 10px; white-space: nowrap; }
.team-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 16px; }
.team-empty-state { grid-column: 1/-1; margin: 0; padding: 24px; border: 1px dashed #39334f; color: #aaa5b8; text-align: center; font-size: 12px; }
.team-card { min-width: 0; overflow: hidden; display: flex; flex-direction: column; border: 1px solid #252d31; background: var(--panel); transition: border-color .2s, transform .2s; }
.team-card:hover { border-color: #49564d; transform: translateY(-3px); }
.team-card.is-own-team { border-color: rgba(185,138,255,.55); }
.team-card-cover, .team-profile-cover, .team-invitation-cover { position: relative; overflow: hidden; display: grid; place-items: center; background: radial-gradient(ellipse at 77% 120%,#a879ff 0,transparent 52%), linear-gradient(115deg,#352443,#1c1d2c 70%); }
.team-card-cover { height: 132px; }
.team-card-cover img, .team-profile-cover img, .team-invitation-cover img { width: 100%; height: 100%; object-fit: cover; }
.team-cover-initial { color: rgba(255,255,255,.14); font: 700 96px/1 var(--font-display); letter-spacing: -.06em; }
.team-number-badge { position: absolute; left: 14px; bottom: 12px; padding: 6px 9px; background: rgba(12,15,16,.72); color: var(--lime); font: 700 11px var(--font-display); letter-spacing: .12em; backdrop-filter: blur(4px); }
.team-card-content { display: flex; flex: 1 1 auto; flex-direction: column; padding: 16px 17px; }
.team-card-content h3 { margin: 0 0 6px; font-size: 18px; letter-spacing: -.035em; overflow-wrap: anywhere; }
.team-card-description { display: -webkit-box; min-height: 34px; margin: 0 0 14px; overflow: hidden; color: #899495; font-size: 10px; line-height: 1.7; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.team-card-meta { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: auto; color: #9ea8a7; font-size: 9px; }
.team-card-meta strong { color: #e8ede8; }
.team-card-footer { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; margin-top: 14px; }
.team-card-footer .button { margin-left: auto; }
.team-ban-tag { padding: 5px 7px; border: 1px solid rgba(255,82,111,.5); color: #ff9b9b; font: 700 8px var(--font-display); letter-spacing: .08em; text-transform: uppercase; }
.team-profile { overflow: hidden; border: 1px solid rgba(130,105,184,.35); border-radius: 14px; background: radial-gradient(ellipse at 5% 0%, rgba(111,73,159,.16), transparent 42%), linear-gradient(135deg,#141629,#101321 72%); }
.team-profile-cover { height: clamp(150px, 24vw, 260px); }
.team-profile-cover .team-cover-initial { font-size: clamp(120px, 18vw, 200px); }
.team-profile-cover .team-number-badge { left: 22px; bottom: 18px; padding: 8px 12px; font-size: 15px; }
.team-profile-body { display: grid; gap: 22px; padding: 24px; }
.team-profile-identity h2 { margin: 7px 0 8px; font-size: clamp(28px, 4vw, 40px); letter-spacing: -.05em; overflow-wrap: anywhere; }
.team-profile-identity > p { max-width: 720px; margin: 0; color: #b8b4c5; font-size: 12px; line-height: 1.7; white-space: pre-wrap; }
.team-profile-identity .team-own-rank { display: flex; align-items: center; gap: 8px; margin-top: 12px; color: #a19bb2; font-size: 10px; }
.team-ban-notice { margin-top: 12px !important; padding: 10px 12px; border-left: 2px solid var(--red); background: rgba(255,82,111,.08); color: #ffb3c0 !important; font-size: 11px !important; }
.team-profile-stats { display: grid; grid-template-columns: repeat(5,minmax(0,1fr)); gap: 8px; margin: 0; }
.team-profile-stats > div { padding: 12px 14px; border: 1px solid rgba(75,67,103,.6); border-radius: 9px; background: rgba(16,19,33,.62); }
.team-profile-stats dt { color: #a19bb2; font: 700 8px var(--font-display); letter-spacing: .08em; text-transform: uppercase; }
.team-profile-stats dd { margin: 6px 0 0; color: #e5e1ef; font: 600 16px var(--font-display); }
.team-members h3, .team-invite h3, .team-edit h3 { margin: 0 0 12px; font-size: 14px; }
.team-member-list { display: grid; gap: 8px; }
.team-member-row { display: grid; grid-template-columns: 40px minmax(0,1fr) auto auto; align-items: center; gap: 12px; padding: 10px 12px; border: 1px solid rgba(53,48,79,.75); border-radius: 9px; background: rgba(16,19,33,.7); }
.team-member-avatar { width: 40px; height: 40px; display: grid; place-items: center; border: 1px solid rgba(185,138,255,.4); border-radius: 50%; background: #1a1730; color: var(--lime); object-fit: cover; font: 700 16px var(--font-display); }
.team-member-info { display: grid; gap: 4px; min-width: 0; }
.team-member-info strong, .team-member-name { justify-self: start; padding: 0; border: 0; background: none; color: #e5e1ef; font: 700 12px var(--font-body); text-align: left; overflow-wrap: anywhere; cursor: pointer; }
.team-member-name:not(:disabled):hover { transform: none; border: 0; background: none; box-shadow: none; color: var(--lime); animation: none; }
.team-member-info small { color: #87928d; font-size: 9px; }
.team-rank-badge { justify-self: start; padding: 5px 8px; border: 1px solid #45405f; color: #b8a7dc; font: 700 8px var(--font-display); letter-spacing: .08em; text-transform: uppercase; white-space: nowrap; }
.team-rank-badge.is-leader { border-color: rgba(185,138,255,.7); background: rgba(185,138,255,.14); color: var(--lime); }
.team-rank-badge.is-subleader { border-color: rgba(91,140,255,.6); background: rgba(91,140,255,.1); color: #a9c1ff; }
.team-member-controls { display: flex; align-items: center; flex-wrap: wrap; justify-content: flex-end; gap: 7px; }
.team-member-controls select, .managed-team-actions select { height: 34px; padding: 0 8px; border: 1px solid #303a3c; background: #0c1113; color: var(--text); font-size: 10px; }
.team-member-controls .button { min-height: 34px; padding-inline: 10px; font-size: 10px; }
.team-invite, .team-edit { padding-top: 18px; border-top: 1px solid #302b4c; }
.team-invite-form { display: grid; grid-template-columns: minmax(0,1fr) auto; align-items: end; gap: 10px; max-width: 620px; }
.team-invite-form .form-field { margin: 0; }
.team-invite-form .button { min-height: 39px; }
.team-invite-form .form-message { grid-column: 1/-1; }
.team-invite-form .form-message:not(:empty) { margin-top: 0; color: #f0a79e; }
.team-profile-actions { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; padding-top: 16px; border-top: 1px solid #302b4c; }
.team-profile-actions .field-hint { margin: 0; }
.managed-team-banned { color: #ff9b9b !important; }
.lineup-picker { margin: 0 0 14px; padding: 14px; border: 1px solid #302b4c; background: #0e1120; }
.lineup-picker legend { padding: 0 6px; color: #c3ccc7; font-size: 10px; font-weight: 600; }
.lineup-options { display: grid; gap: 7px; }
.lineup-option { display: flex; align-items: center; gap: 10px; padding: 9px 10px; border: 1px solid rgba(53,48,79,.75); color: #e5e1ef; font-size: 11px; cursor: pointer; }
.lineup-option:has(input:checked) { border-color: rgba(185,138,255,.55); background: rgba(185,138,255,.08); }
.lineup-option input { accent-color: var(--lime); }
.lineup-option .team-rank-badge { margin-left: auto; }
@media (max-width: 800px) {
  .team-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .team-create-panel { gap: 20px; padding: 18px; }
  .team-profile-stats { grid-template-columns: repeat(3,minmax(0,1fr)); }
}
@media (max-width: 600px) {
  .teams-screen, .team-profile-screen { padding-top: 34px; padding-bottom: 42px; }
  .teams-heading-actions, .teams-heading-actions .button { width: 100%; }
  .team-create-panel { grid-template-columns: 1fr; padding: 15px; }
  .team-create-form { grid-template-columns: 1fr; }
  .team-create-form .form-wide { grid-column: auto; }
  .team-form-actions .button { flex: 1 1 0; }
  .team-directory-tools { align-items: stretch; flex-direction: column; gap: 6px; }
  .team-grid { grid-template-columns: 1fr; gap: 12px; }
  .team-invitation-card { grid-template-columns: 72px minmax(0,1fr); }
  .team-invitation-actions { grid-column: 1/-1; }
  .team-invitation-actions .button { flex: 1 1 0; }
  .team-profile-body { padding: 16px; }
  .team-profile-stats { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .team-member-row { grid-template-columns: 40px minmax(0,1fr) auto; }
  .team-member-controls { grid-column: 1/-1; justify-content: flex-start; }
  .team-invite-form { grid-template-columns: 1fr; }
  .team-profile-actions .button { width: 100%; }
}
.lineup-option.is-unavailable { cursor: not-allowed; opacity: .6; }
.lineup-conflict { color: #ff9b9b; font-size: 9px; }
.lineup-gametag { color: #a19bb2; font-size: 9px; overflow-wrap: anywhere; }

.bracket-screen { min-height: calc(100vh - 78px); padding-top: 64px; padding-bottom: 72px; }
.bracket-view { display: grid; gap: 18px; }
.bracket-notice { margin: 0; padding: 16px 18px; border: 1px solid #302b4c; background: linear-gradient(135deg,#141629,#101321 72%); color: #c7c0d7; font-size: 12px; line-height: 1.7; }
.bracket-notice.is-own-notice { border-color: rgba(91,140,255,.5); background: rgba(91,140,255,.08); color: #c4d5ff; font-size: 11px; }
.bracket-notice.is-subtle { padding: 0; border: 0; background: none; color: #87928d; font-size: 10px; }
.bracket-toolbar { display: flex; align-items: center; flex-wrap: wrap; gap: 12px; padding: 14px 16px; border: 1px dashed #45405f; }
.bracket-toolbar .field-hint { margin: 0; }
.bracket-champion { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 12px; padding: 18px 22px; border: 1px solid rgba(185,138,255,.6); background: radial-gradient(ellipse at 90% 0%, rgba(185,138,255,.25), transparent 55%), linear-gradient(110deg,#251a3a,#101321 70%); }
.bracket-champion span { color: #c5bbd8; font: 700 10px var(--font-display); letter-spacing: .14em; text-transform: uppercase; }
.bracket-champion strong { color: var(--text); font: 700 clamp(20px,3vw,28px) var(--font-display); letter-spacing: -.03em; }
.bracket-section h2 { margin: 6px 0 12px; color: #e5e1ef; font: 600 clamp(19px,2.6vw,24px) var(--font-display); letter-spacing: -.03em; }
.bracket-rounds { display: flex; align-items: stretch; gap: 16px; padding-bottom: 10px; overflow-x: auto; }
.bracket-round { flex: 0 0 240px; display: flex; flex-direction: column; }
.bracket-round h3 { margin: 0 0 10px; color: #a19bb2; font: 700 10px var(--font-display); letter-spacing: .12em; text-transform: uppercase; }
.bracket-round-matches { display: flex; flex: 1 1 auto; flex-direction: column; justify-content: space-around; gap: 12px; }
.bracket-match { display: grid; gap: 4px; padding: 10px; border: 1px solid #302b4c; background: #101321; }
.bracket-match.is-ready { border-color: rgba(185,138,255,.45); }
.bracket-match.is-pending { opacity: .78; }
.bracket-match-meta { display: flex; justify-content: space-between; gap: 8px; margin-bottom: 3px; color: #87928d; font: 700 8px var(--font-display); letter-spacing: .08em; text-transform: uppercase; }
.bracket-match.is-ready .bracket-match-meta span:last-child { color: var(--lime); }
.bracket-slot { display: flex; align-items: center; justify-content: space-between; gap: 10px; min-height: 32px; padding: 6px 9px; border: 1px solid rgba(53,48,79,.75); background: #0c0f1b; }
.bracket-slot-name { min-width: 0; overflow: hidden; color: #e5e1ef; font-size: 11px; font-weight: 600; text-overflow: ellipsis; white-space: nowrap; }
.bracket-slot-score { color: #c5bbd8; font: 700 12px var(--font-display); }
.bracket-slot.is-empty .bracket-slot-name { color: #6f6a82; font-weight: 400; font-style: italic; }
.bracket-slot.is-winner { border-color: rgba(185,138,255,.6); background: rgba(185,138,255,.1); }
.bracket-slot.is-winner .bracket-slot-name, .bracket-slot.is-winner .bracket-slot-score { color: var(--lime); }
.bracket-slot.is-loser .bracket-slot-name { color: #7d778f; text-decoration: line-through; }
.bracket-slot.is-own { box-shadow: inset 3px 0 0 var(--blue); }
.bracket-match-action { min-height: 30px; margin-top: 4px; padding-inline: 10px; font-size: 10px; }
.bracket-result-form { display: grid; gap: 8px; margin-top: 6px; padding-top: 8px; border-top: 1px solid #302b4c; }
.bracket-result-form .form-field { margin: 0; gap: 5px; font-size: 9px; }
.bracket-result-form select, .bracket-result-form input { height: 32px; }
.bracket-result-scores { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.bracket-result-actions { display: flex; gap: 6px; }
.bracket-result-actions .button { flex: 1 1 0; min-height: 32px; padding-inline: 8px; font-size: 10px; }
.bracket-table-wrap { overflow-x: auto; border: 1px solid #302b4c; }
.bracket-standings { width: 100%; border-collapse: collapse; font-size: 11px; }
.bracket-standings th, .bracket-standings td { padding: 10px 12px; border-bottom: 1px solid rgba(53,48,79,.75); text-align: center; white-space: nowrap; }
.bracket-standings thead th { background: #141629; color: #a19bb2; font: 700 9px var(--font-display); letter-spacing: .08em; text-transform: uppercase; }
.bracket-standings tbody th { color: #e5e1ef; text-align: left; font-weight: 600; }
.bracket-standings tbody td:first-child { color: var(--lime); font: 700 12px var(--font-display); }
.bracket-standings tbody td:last-child { color: var(--text); font-weight: 700; }
.bracket-standings tr.is-own { background: rgba(91,140,255,.08); }
.bracket-br-editor { padding: 18px; border: 1px dashed #45405f; }
.bracket-br-form { display: grid; gap: 12px; }
.bracket-br-form > .form-field { max-width: 240px; margin: 0; }
.bracket-br-rows { display: grid; gap: 8px; }
.bracket-br-row { display: grid; grid-template-columns: minmax(0,1fr) 110px 110px; align-items: end; gap: 10px; padding: 9px 10px; border: 1px solid rgba(53,48,79,.75); background: #0e1120; }
.bracket-br-row strong { align-self: center; color: #e5e1ef; font-size: 11px; overflow-wrap: anywhere; }
.bracket-br-row .form-field { margin: 0; gap: 5px; font-size: 9px; }
.bracket-br-form .button { justify-self: start; min-height: 40px; }
.bracket-br-form .form-message:not(:empty) { margin-top: 0; color: #f0a79e; }
.card-bracket { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 12px; padding-top: 11px; border-top: 1px solid #252d31; color: #a19bb2; font-size: 9px; }
.card-bracket-links { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 6px 14px; }
.card-bracket-link { padding: 0; border: 0; background: none; color: var(--lime); font: 600 10px var(--font-body); cursor: pointer; }
.card-bracket-link:not(:disabled):hover { transform: none; border: 0; background: none; box-shadow: none; color: #d8c4ff; animation: none; }
@media (max-width: 600px) {
  .bracket-screen { padding-top: 34px; padding-bottom: 42px; }
  .bracket-round { flex-basis: 210px; }
  .bracket-br-row { grid-template-columns: 1fr 1fr; }
  .bracket-br-row strong { grid-column: 1/-1; }
  .bracket-br-form .button { width: 100%; }
}

.registration-dialog, .login-dialog, .report-dialog { width: min(560px, calc(100% - 32px)); max-height: min(90vh, 820px); padding: 27px; overflow-y: auto; border: 1px solid #35304f; background: #111525; color: var(--text); box-shadow: 0 25px 90px rgba(0,0,0,.65); }
.registration-dialog::backdrop, .login-dialog::backdrop, .report-dialog::backdrop { background: rgba(4,7,8,.8); backdrop-filter: blur(5px); }
.login-dialog { width: min(440px, calc(100% - 32px)); }
.login-dialog[open], .registration-dialog[open], .report-dialog[open] { animation: dialog-enter .18s ease-out; }
@keyframes dialog-enter { from { opacity: 0; transform: translateY(8px) scale(.99); } to { opacity: 1; transform: translateY(0) scale(1); } }
.dialog-header { display: flex; align-items: flex-start; justify-content: space-between; margin-bottom: 22px; }.dialog-header h2 { margin: 9px 0 4px; font-size: 29px; letter-spacing: -.04em; }.dialog-tournament { margin: 0; color: #9aa5a1; font-size: 11px; }
.dialog-header p { margin-bottom: 0; color: #9aa5a1; font-size: 11px; }
.dialog-close { width: 32px; height: 32px; border: 1px solid #303a39; background: transparent; color: #c6d0ca; font-size: 22px; cursor: pointer; }
.login-view[hidden] { display: none; }
.workspace-view[hidden] { display: none; }
.workspace-page { min-height: calc(100vh - 78px); padding-top: 64px; padding-bottom: 72px; }
.workspace-panel { max-width: 900px; padding: 22px; border: 1px solid #302b4c; background: linear-gradient(135deg,#141629,#101321 72%); }
.workspace-panel h2 { margin-bottom: 8px; font-size: 20px; }
.workspace-panel > form { display: grid; gap: 14px; }
.team-management-summary { display: grid; grid-template-columns: repeat(auto-fit,minmax(160px,1fr)); gap: 12px; margin-bottom: 16px; }
.team-management-stat { display: grid; gap: 5px; padding: 17px; border: 1px solid #302b4c; background: #101321; }
.team-management-stat strong { color: var(--lime); font: 700 25px var(--font-display); }
.team-management-stat span { color: #a19bb2; font-size: 10px; }
.team-management-note { max-width: 900px; margin: 0 0 14px; color: #a19bb2; font-size: 10px; line-height: 1.6; }
.managed-team-list { display: grid; gap: 14px; }
.managed-team-card, .team-management-empty { padding: 20px; border: 1px solid #302b4c; background: linear-gradient(135deg,#141629,#101321 72%); }
.managed-team-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; }
.managed-team-heading h2 { margin: 0 0 5px; font-size: 19px; }
.managed-team-heading p, .managed-team-roster { margin: 0; color: #a19bb2; font-size: 11px; line-height: 1.7; }
.managed-team-captain { color: #c5bbd8; font-size: 10px; }
.managed-team-stats { display: grid; grid-template-columns: repeat(6,minmax(0,1fr)); gap: 8px; margin: 17px 0 12px; }
.managed-team-stats > div { padding: 11px; border: 1px solid rgba(53,48,79,.75); background: rgba(16,19,33,.62); }
.managed-team-stats dt { color: #a19bb2; font: 700 8px var(--font-display); letter-spacing: .06em; text-transform: uppercase; }
.managed-team-stats dd { margin: 6px 0 0; color: #e5e1ef; font: 600 13px var(--font-display); }
.managed-team-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; }
.tournament-management-header { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 18px; }
.tournament-management-header h2 { margin: 0; color: #e5e1ef; font: 600 20px var(--font-display); }
.tournament-search-panel { display: grid; grid-template-columns: minmax(0,1fr); align-items: start; gap: 10px; margin-bottom: 16px; }
.tournament-search-panel .form-field { margin: 0; }
.tournament-search-panel .form-field input, .tournament-search-panel .form-field select { width: 100%; height: 42px; padding: 0 12px; border: 1px solid #303a3c; background: #0c1113; color: var(--text); font-size: 11px; }
.tournament-filter-disclosure { grid-column: 1/-1; min-width: 150px; }
.tournament-filter-disclosure summary { min-height: 42px; padding: 0 14px; display: flex; align-items: center; justify-content: space-between; gap: 12px; border: 1px solid #38334f; background: linear-gradient(145deg,#1a1b2d,#121622); color: #e6e1f0; font-size: 11px; font-weight: 600; cursor: pointer; list-style: none; }
.tournament-filter-disclosure summary::-webkit-details-marker { display: none; }
.tournament-filter-disclosure[open] summary { border-color: var(--lime); color: var(--lime); }
.tournament-management-filters { display: grid; grid-template-columns: repeat(2,minmax(130px,1fr)); align-items: end; gap: 12px; margin-top: 8px; padding: 17px; border: 1px solid #302b4c; background: linear-gradient(135deg,#141629,#101321 72%); }
.tournament-management-filters .form-field { margin: 0; }
.tournament-management-filters .form-field input, .tournament-management-filters .form-field select { width: 100%; height: 39px; padding: 0 11px; border: 1px solid #303a3c; background: #0c1113; color: var(--text); font-size: 11px; }
.tournament-filter-reset { min-height: 39px; }
.tournament-filter-count { grid-column: 1/-1; margin: 0; color: #a19bb2; font-size: 10px; }
.tournament-form-panel { margin-bottom: 20px; }
.tournament-form-actions { display: flex; flex-wrap: wrap; gap: 10px; }
.tournament-form-actions .button { flex: 1 1 0; width: auto; min-height: 46px; }
.tournament-schedule-preview { margin: 0; padding: 12px 14px; border: 1px solid rgba(53,48,79,.75); background: rgba(16,19,33,.62); color: #c5bbd8; font-size: 11px; line-height: 1.6; }
.admin-tournament-list { display: grid; grid-template-columns: repeat(auto-fit,minmax(250px,1fr)); gap: 14px; }
.admin-tournament-card { min-height: 190px; display: flex; flex-direction: column; align-items: stretch; justify-content: space-between; gap: 18px; padding: 19px; border: 1px solid #302b4c; background: linear-gradient(135deg,#141629,#101321 72%); }
.admin-tournament-card h2 { margin: 0 0 9px; color: #e5e1ef; font: 600 16px var(--font-display); }
.admin-tournament-card p { margin: 0; color: #a19bb2; font-size: 11px; line-height: 1.7; }
.admin-tournament-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.admin-tournament-actions .button { flex: 1 1 0; min-height: 40px; }
.team-edit-form { display: grid; gap: 12px; margin-top: 17px; padding-top: 16px; border-top: 1px solid #302b4c; }
.team-edit-form .form-grid { align-items: end; }
.team-edit-form select { width: 100%; height: 39px; padding: 0 11px; border: 1px solid #303a3c; background: #0c1113; color: var(--text); font-size: 11px; }
.team-edit-form .form-message:not(:empty) { margin-top: 0; }
.view-heading { margin: 0 0 16px; }.view-heading h3 { margin: 0 0 5px; font-size: 17px; }.view-heading p { margin: 0; color: #98a39f; font-size: 11px; line-height: 1.6; }
.view-heading strong { color: var(--lime); font-weight: 600; }
.login-dialog form { display: grid; gap: 14px; }.login-dialog .form-message:not(:empty) { margin: 0; color: #f0a79e; font-size: 10px; line-height: 1.5; }
.report-dialog form { display: grid; gap: 14px; }
.login-dialog .form-message.info-message { color: #b2c5a1; }
.account-links { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 12px; margin-top: 17px; color: #a3aeaa; font-size: 10px; }
.account-links > span { display: inline-flex; align-items: center; flex-wrap: wrap; gap: 5px; }
.account-links .text-link { padding: 0; border: 0; background: none; color: var(--lime); font-size: 10px; cursor: pointer; }
.form-privacy { margin: 16px 0 0; }
.password-hint { margin: -5px 0 0; color: #889491; font-size: 9px; line-height: 1.55; }.password-hint.is-valid { color: var(--lime); }
.login-dialog .form-grid { row-gap: 12px; }
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px 12px; }.form-wide { grid-column: 1/-1; }
.form-field { display: flex; flex-direction: column; gap: 7px; color: #c3ccc7; font-size: 10px; font-weight: 600; }
.form-field input { width: 100%; height: 39px; padding: 0 11px; border: 1px solid #303a3c; border-radius: 0; background: #0c1113; color: var(--text); font-size: 11px; }
.form-field input::placeholder { color: #667271; }.form-field input:focus { border-color: var(--lime); outline: none; }
.form-field textarea { width: 100%; min-height: 90px; padding: 10px 11px; resize: vertical; border: 1px solid #303a3c; border-radius: 0; background: #0c1113; color: var(--text); font: 11px/1.6 var(--font-body); }
.form-field textarea::placeholder { color: #667271; }.form-field textarea:focus { border-color: var(--lime); outline: none; }
.form-field input[readonly] { color: #8e9a93; }
.form-field input[type="file"] { height: auto; padding: 9px; font-size: 10px; }
.field-hint { margin: -5px 0 0; color: #84908b; font-size: 9px; line-height: 1.55; }
.signup-age-output { align-self: center; }
.local-data-notice { margin: 0 0 14px; padding: 9px 10px; border-left: 2px solid var(--lime); background: rgba(185,138,255,.07); color: #b9b4c9; font-size: 9px; line-height: 1.5; }
.avatar-editor { display: grid; grid-template-columns: 76px 1fr; align-items: center; gap: 8px 14px; margin-bottom: 18px; }
.profile-avatar-preview, .avatar-placeholder { width: 76px; height: 76px; grid-row: span 2; border: 1px solid rgba(185,138,255,.4); border-radius: 50%; object-fit: cover; }
.avatar-placeholder { display: grid; place-items: center; background: #1a1730; color: var(--lime); font: 700 32px var(--font-display); }
.avatar-editor .form-field { gap: 6px; }.avatar-editor .field-hint { margin: 0; }
.badge-preview { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 17px; padding: 12px; border: 1px solid #302b4c; color: #dce4dc; font-size: 10px; }.badge-preview span { color: #a19bb2; font-size: 9px; text-align: right; }
.workspace-list { display: grid; gap: 9px; margin-top: 16px; }
.workspace-list:empty { display: none; }
.workspace-list-item { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 11px 12px; border: 1px solid #302b4c; background: #0e1120; }
.workspace-list-item strong { display: block; color: #e5ebe5; font-size: 10px; }.workspace-list-item small { display: block; margin-top: 4px; color: #87928d; font-size: 9px; }
.workspace-list-item select { min-width: 130px; height: 34px; padding: 0 8px; border: 1px solid #303a3c; background: #0c1113; color: var(--text); font-size: 10px; }
.managed-user-actions { display: flex; align-items: center; flex-wrap: wrap; justify-content: flex-end; gap: 7px; }
.managed-user-actions .button { min-height: 34px; padding-inline: 10px; font-size: 10px; }
.managed-user-actions button:disabled { opacity: .45; cursor: not-allowed; }
.team-choice, .consent-choice { display: flex; align-items: center; gap: 9px; color: #b7c1bb; font-size: 10px; line-height: 1.5; }
.team-choice input, .consent-choice input { accent-color: var(--lime); }
.team-fields, .guardian-fields { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }.team-fields[hidden], .guardian-fields[hidden] { display: none; }
.guardian-note { grid-column: 1/-1; padding: 10px; border-left: 2px solid var(--lime); background: rgba(185,138,255,.08); color: #c7c0d7; font-size: 10px; line-height: 1.55; }
.consent-choice { grid-column: 1/-1; align-items: flex-start; }
.form-privacy { margin: 17px 0 12px; color: #7d8986; font-size: 9px; line-height: 1.5; }.submit-button { width: 100%; }
.form-message { min-height: 0; margin: 0; color: var(--lime); font-size: 11px; }.form-message:not(:empty) { margin-top: 12px; }
.toast { position: fixed; z-index: 10; right: 22px; bottom: 22px; max-width: min(360px,calc(100% - 44px)); padding: 13px 17px; border: 1px solid rgba(185,138,255,.4); background: #1a1730; color: #ece5fb; font-size: 11px; opacity: 0; transform: translateY(10px); pointer-events: none; transition: opacity .2s, transform .2s; }
.toast.visible { opacity: 1; transform: translateY(0); }
.confirm-dialog { width: min(480px, calc(100% - 32px)); padding: 27px; border: 1px solid rgba(255,82,111,.45); background: #111525; color: var(--text); box-shadow: 0 25px 90px rgba(0,0,0,.65); }
.confirm-dialog::backdrop { background: rgba(4,7,8,.8); backdrop-filter: blur(5px); }
.confirm-dialog[open] { animation: dialog-enter .18s ease-out; }
.confirm-dialog .dialog-header h2 { font-size: 24px; }
.confirm-message { display: grid; gap: 10px; }
.confirm-message p { margin: 0; color: #c7c0d7; font-size: 12px; line-height: 1.7; }
.confirm-message .confirm-warning { padding: 10px 12px; border-left: 2px solid var(--red); background: rgba(255,82,111,.1); color: #ffc2cc; font-weight: 600; }
.confirm-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 10px; margin-top: 22px; }
.confirm-actions .button { min-height: 42px; }
.confirm-accept { border-color: var(--red); background: var(--red); color: #fff; }
@media (max-width: 600px) { .confirm-dialog { padding: 21px 17px; } .confirm-actions { flex-direction: column-reverse; } .confirm-actions .button { width: 100%; } }

@media (min-width: 1400px) { .hero { min-height: 630px; } }
@media (max-width: 800px) {
  .site-header { height: 70px; padding-inline: 24px; }.main-nav { gap: 18px; }.header-cta { padding-inline: 12px; font-size: 10px; }.signed-in-user { gap: 7px; }.account-name { max-width: 85px; }
  .profile-summary { grid-template-columns: minmax(0, 1fr) minmax(220px, .8fr); gap: 14px; }
  .player-game-grid { gap: 11px; }.player-game-card { padding: 15px; }
  .section-wrap { width: calc(100% - 48px); }.hero { min-height: 530px; grid-template-columns: 1fr .8fr; padding-top: 65px; }.hero-art { height: 350px; }.hero h1 { font-size: 59px; }
  .profile-screen, .players-screen, .public-profile-screen, .help-screen, .inbox-screen { min-height: calc(100vh - 70px); padding-top: 48px; padding-bottom: 56px; }
  .profile-screen, .public-profile-screen { padding-top: 30px; padding-bottom: 30px; }
  .art-center { top: 93px; width: 115px; height: 115px; }.art-x { font-size: 77px; }.art-ring { top: 100px; }.ring-one,.ring-two { width: 185px; height: 93px; }.hero-art::before { width: 300px; height: 300px; }.hero-art::after { width: 225px; height: 225px; top: 60px; }
  .card-banner { height: 100px; }.card-content { padding-inline: 14px; }.community-art { right: -8%; opacity: .7; }.community-video-grid, .community-popular-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }.community-upload-panel { gap: 20px; padding: 18px; }.community-featured-card { grid-template-columns: minmax(0,1.2fr) minmax(200px,.8fr); }.home-social-panel { align-items: flex-start; flex-direction: column; padding: 23px; }.home-social-links { justify-content: flex-start; }
}
@media (max-width: 600px) {
  html { scroll-padding-top: 70px; }.section-wrap { width: calc(100% - 36px); }.site-header { padding-inline: 18px; }.header-cta { min-height: 36px; padding-inline: 8px; gap: 5px; font-size: 9px; }.signed-in-user { gap: 6px; }.account-menu-toggle { min-height: 36px; padding-inline: 8px; }.account-name { max-width: 76px; font-size: 10px; }.account-menu { min-width: 160px; }.inbox-trigger { min-height: 36px; padding-inline: 9px; }.inbox-trigger > span:nth-child(2) { display: none; }
  .player-leaderboards { margin-bottom: 34px; }.player-game-grid { grid-template-columns: 1fr; }.player-game-card { padding: 15px; }
  .menu-toggle { width: 37px; height: 37px; padding: 9px; display: flex; flex-direction: column; justify-content: center; gap: 5px; border: 1px solid #30383a; background: transparent; cursor: pointer; }.menu-toggle span { height: 1px; width: 17px; background: #e0e8e1; }
  .main-nav { position: absolute; top: 69px; left: 0; right: 0; padding: 17px 20px; display: none; flex-direction: column; align-items: flex-start; gap: 18px; border-bottom: 1px solid #293134; background: #101518; }.main-nav.open { display: flex; }
  .hero { padding-top: 61px; padding-bottom: 45px; display: flex; flex-direction: column; align-items: stretch; }.hero-copy { padding-bottom: 27px; }.hero h1 { margin-top: 17px; font-size: clamp(54px,15vw,72px); }.hero-description { max-width: 440px; }.hero-proof { margin-top: 25px; }.hero-art { height: 310px; max-width: none; }.hero-bottom { bottom: 12px; font-size: 7px; }.scroll-indicator { gap: 5px; }
  .profile-screen, .players-screen, .public-profile-screen, .help-screen, .inbox-screen { padding-top: 34px; padding-bottom: 42px; }
  .inbox-item { align-items: stretch; flex-direction: column; gap: 12px; padding: 15px; }.inbox-read-button { width: 100%; }.inbox-screen .screen-heading > .button { width: 100%; }
  .screen-heading { align-items: flex-start; flex-direction: column; gap: 14px; margin-bottom: 22px; }
  .screen-heading h1 { font-size: 38px; }
  .profile-panel { padding: 18px 15px; }
  .profile-summary { grid-template-columns: minmax(0, 1fr); grid-template-areas: "identity" "details" "badges" "tournaments" "actions"; }
  .profile-summary-heading { align-items: flex-start; }
  .profile-summary-heading h2 { font-size: 21px; }
  .public-profile-panel { grid-template-columns: minmax(0, 1fr); grid-template-areas: "identity" "notice" "details" "badges" "tournaments" "actions"; }
  .public-profile-panel .profile-details { grid-template-columns: minmax(0, 1fr); }
  .profile-summary > .profile-details, .profile-summary > .earned-badges, .profile-summary > .profile-tournaments, .profile-summary > .profile-actions { grid-column: 1; }
  .profile-details, .profile-tournament-list { grid-template-columns: 1fr; }
  .profile-details > .profile-games, .profile-details > .profile-bio { grid-column: auto; }
  .profile-edit-actions, .profile-actions { flex-direction: column; }
  .profile-edit-actions .button, .profile-actions .button { width: 100%; }
  .player-directory-item { align-items: flex-start; flex-direction: column; }
  .player-directory-item .button { width: 100%; }
  .tournaments-section, .tournaments-screen { padding-top: 34px; padding-bottom: 42px; }.section-heading { align-items: flex-start; }.section-heading h2 { font-size: 35px; }.view-all { margin-top: 42px; white-space: nowrap; }.filter-row { flex-wrap: wrap; }.filter-note { width: 100%; margin: 5px 0 0; }.public-tournament-filters { grid-template-columns: repeat(2,minmax(0,1fr)); gap: 10px; padding: 13px; }
  .tournament-grid { grid-template-columns: 1fr; gap: 12px; }.card-banner { height: 115px; }.card-content { padding: 16px; }
  .bracket-preview { gap: 12px; padding: 13px; }.bracket-copy { gap: 9px; }.bracket-copy div span { max-width: 210px; line-height: 1.5; }.bracket-preview > .text-link { white-space: nowrap; font-size: 9px; }
  .community-screen { padding-top: 34px; padding-bottom: 42px; }.community-page-heading { margin-bottom: 24px; }.community-upload-panel { grid-template-columns: 1fr; gap: 16px; padding: 15px; }.community-upload-form { grid-template-columns: 1fr; }.community-upload-form > .form-field:first-child, .community-video-file, .community-upload-help, .community-upload-submit { grid-column: auto; }.community-upload-submit { width: 100%; }.community-content-section { margin-top: 32px; }.community-section-heading { align-items: flex-start; flex-direction: column; gap: 10px; }.community-carousel-controls { align-self: flex-end; }.community-featured-card { grid-template-columns: 1fr; }.community-featured-card .community-video-player { min-height: 0; aspect-ratio: 16/9; }.community-featured-card .community-video-content { padding: 16px; }.community-video-grid, .community-popular-grid { grid-template-columns: 1fr; gap: 12px; }.community-video-content { padding: 13px; }.community-section { padding-top: 58px; }.community-panel { min-height: 300px; padding: 28px 22px; }.community-copy { max-width: 100%; }.community-copy h2 { font-size: 33px; }.community-art { right: -39%; opacity: .36; }.home-viral-section, .home-social-section { padding-top: 36px; padding-bottom: 42px; }.home-section-heading { align-items: flex-start; flex-direction: column; gap: 12px; }.home-section-heading > .button { width: 100%; }.home-faq-section { padding: 38px 0 44px; }.home-faq-item summary { padding: 15px; }.home-faq-item p { margin-inline: 15px; }.home-social-panel { padding: 18px; }.home-social-links { gap: 7px; }.home-social-link { width: 40px; height: 40px; }.social-links-workspace > form { grid-template-columns: 1fr; }.social-links-message, .social-links-workspace > form > .button { grid-column: auto; }.social-links-workspace > form > .button { width: 100%; }.site-footer { padding: 20px 0; flex-wrap: wrap; }.site-footer > span:nth-child(2) { order: 3; width: 100%; }
  .workspace-page { min-height: calc(100vh - 70px); padding-top: 34px; padding-bottom: 42px; }.workspace-panel, .managed-team-card, .team-management-empty { padding: 16px; }.managed-team-heading { flex-direction: column; gap: 8px; }.managed-team-stats { grid-template-columns: repeat(2,minmax(0,1fr)); }.managed-team-stats > div:last-child { grid-column: 1/-1; }.managed-team-actions .button { flex: 1 1 100%; }.admin-tournament-card { min-height: 170px; padding: 15px; }.admin-tournament-actions { width: 100%; }.admin-tournament-actions .button { flex: 1 1 0; }.tournament-management-header { align-items: flex-start; flex-direction: column; }.tournament-management-header .button { width: 100%; }.tournament-search-panel { grid-template-columns: minmax(0,1fr); gap: 10px; }.tournament-filter-disclosure { grid-column: 1/-1; min-width: 120px; }.tournament-management-filters { grid-template-columns: repeat(2,minmax(0,1fr)); gap: 10px; padding: 13px; }.tournament-filter-reset { width: 100%; }.admin-tournament-list { grid-template-columns: 1fr; }.role-tools-section { padding-top: 36px; padding-bottom: 44px; }.role-tools-panel { padding: 15px; }.role-tools-list { grid-template-columns: repeat(2,minmax(0,1fr)); gap: 10px; margin-top: 18px; }.role-tool-button { min-height: 150px; padding: 17px; font-size: 14px; }.role-tool-icon { width: 38px; height: 38px; }
  .registration-dialog, .login-dialog, .report-dialog { padding: 21px 17px; }.form-grid { gap: 12px 9px; }.team-fields,.guardian-fields { grid-template-columns: 1fr; }.guardian-note,.consent-choice { grid-column: auto; }.avatar-editor { grid-template-columns: 58px 1fr; gap: 8px 10px; }.profile-avatar-preview,.avatar-placeholder { width: 58px; height: 58px; }.workspace-list-item { align-items: flex-start; flex-direction: column; }.workspace-list-item select { width: 100%; }.managed-user-actions { width: 100%; justify-content: flex-start; }.managed-user-actions select { flex: 1 1 100%; }
}
button { transition: color .2s, background .2s, border-color .2s, box-shadow .2s, transform .2s; }
button:not(:disabled):hover { animation: button-hover .24s ease-out; transform: translateY(-2px) scale(1.03); border-color: var(--red); background: var(--red); color: #fff; box-shadow: 0 5px 18px rgba(255,82,111,.28); }
@keyframes button-hover { from { transform: translateY(0) scale(1); } to { transform: translateY(-2px) scale(1.03); } }
@media (prefers-reduced-motion: reduce) { *,*::before,*::after { scroll-behavior: auto !important; transition-duration: .01ms !important; animation-duration: .01ms !important; } }