.player-unavailable {
  height: 100%;
  display: grid;
  place-items: center;
  padding: 30px;
  color: var(--muted);
  font: 12px 'Space Mono', monospace;
  text-align: center;
  background: #080d0c;
}

.twitch-club-login {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  margin-top: 26px;
  padding: 15px;
  border: 1px solid rgba(145, 70, 255, .45);
  background: linear-gradient(135deg, rgba(145, 70, 255, .18), rgba(13, 25, 23, .82));
  box-shadow: inset 3px 0 #9146ff;
}

.twitch-club-login > div { display: grid; gap: 4px; }
.twitch-club-kicker { color: #c7a7ff; font: 9px 'Space Mono', monospace; letter-spacing: .14em; }
.twitch-club-login strong { font-size: 19px; }
.twitch-club-login small, .twitch-login-status { color: var(--muted); font: 10px/1.35 'Space Mono', monospace; }
.twitch-login-button { flex: 0 0 auto; padding: 10px 12px; background: #ff0033; color: #fff; font: 700 11px 'Space Mono', monospace; }
.twitch-login-button span { margin-left: 8px; }
.twitch-login-button:hover { background: #ff335c; }
.twitch-login-button.is-connected { background: var(--lime); color: var(--ink); pointer-events: none; }
.twitch-login-button.is-unavailable { opacity: .55; pointer-events: none; }
.twitch-login-status { margin: 8px 0 0; }
.player-frame { z-index: 2; }
.expand-player { z-index: 3; }

/* Camada final: mantém a referência visual, mas elimina as sobreposições da
   reconstrução anterior que escondiam a foto e quebravam o flip do player. */
:root {
  --ink: #050a16;
  --panel: #0a1427;
  --panel-2: #101f3d;
  --line: rgba(117, 177, 255, .2);
  --white: #f7fbff;
  --muted: #a9b8cb;
  --lime: #ffd21a;
  --jampa-blue: #087dff;
}

body {
  background: radial-gradient(circle at 8% 8%, rgba(8, 125, 255, .18), transparent 34%),
    radial-gradient(circle at 92% 80%, rgba(255, 210, 26, .12), transparent 30%), var(--ink);
}
.social-heading-top { padding: clamp(38px, 7vw, 88px) 0 clamp(25px, 4vw, 52px); }
#social-title { max-width: 900px; margin: 0 auto; }
.arena { padding-top: 28px; }
.arena-grid { grid-template-columns: minmax(0, 1.8fr) minmax(300px, .9fr) !important; gap: 18px !important; align-items: stretch; }
.section-heading { margin-bottom: 18px; }
.arena-game-title { color: var(--white); font-size: clamp(22px, 3vw, 36px); }
.live-info .arena-game-title { display: block; flex: 0 0 auto; width: 100%; margin: 0 0 20px; text-align: center; line-height: 1; text-wrap: balance; }
.arena-club-open { padding: 0; border: 0; background: none; cursor: pointer; }
.arena-club-open:disabled { cursor: default; }
.arena-club-open:not(:disabled):hover span, .arena-club-open:focus-visible span { color: #fff2aa; }
.arena-club-open:focus-visible { outline: 2px solid var(--lime); outline-offset: 4px; border-radius: 4px; }
.arena-game-title span { color: var(--lime); }

.player-card {
  aspect-ratio: 16 / 9;
  min-height: 0;
  border: 2px solid rgba(8, 125, 255, .85) !important;
  border-radius: 14px;
  perspective: 1400px;
}
.player-placeholder, .player-frame {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}
.player-placeholder { padding: 0 !important; display: grid !important; grid-template-columns: minmax(0, 9fr) minmax(0, 7fr); transform-origin: center; background: #09152a; }
.player-cover-image { display: block !important; position: relative; inset: auto; grid-column: 1; width: 100%; height: 100%; min-width: 0; min-height: 0; object-fit: contain; object-position: center; }
.player-cover-shade { display: none !important; }
.player-cover-content { position: relative; inset: auto; grid-column: 2; display: flex; flex-direction: column; align-items: flex-start; justify-content: center; min-width: 0; max-width: none; padding: clamp(16px, 2.5vw, 34px); background: linear-gradient(135deg, #10234c, #060d20 75%); }
.player-cover-content .cover-kicker { margin: 0 0 10px; color: var(--lime); font: 700 11px/1.2 "Space Mono", monospace; letter-spacing: .13em; }
.player-cover-content h3 { margin: 0 0 18px !important; font-size: clamp(30px, 3.8vw, 53px) !important; line-height: .9 !important; text-shadow: 3px 3px 0 rgba(8, 125, 255, .8); }
.cover-action { min-height: 46px; padding: 0 22px !important; clip-path: none; border-radius: 8px; }
.player-frame { z-index: 1; background: #000; opacity: 0; transform: rotateY(180deg); pointer-events: none; transition: transform .78s cubic-bezier(.2,.8,.2,1), opacity .4s ease; backface-visibility: hidden; }
.player-placeholder { z-index: 2; opacity: 1; transform: rotateY(0); transition: transform .78s cubic-bezier(.2,.8,.2,1), opacity .35s ease; backface-visibility: hidden; }
.player-card.is-playing .player-placeholder { opacity: 0; transform: rotateY(-180deg); pointer-events: none; }
.player-card.is-playing .player-frame { opacity: 1; transform: rotateY(0); pointer-events: auto; z-index: 3; }
.player-frame iframe { width: 100%; height: 100%; border: 0; display: block; }

.live-info { min-width: 0; border: 1px solid rgba(8, 125, 255, .55) !important; border-radius: 14px; padding: clamp(18px, 3vw, 30px); }
.side-panel-tabs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; flex: 0 0 auto; margin-bottom: 16px; padding: 4px; border: 1px solid var(--line); border-radius: 9px; background: rgba(3, 10, 24, .65); }
.side-panel-tab { min-height: 34px; border: 0; border-radius: 6px; background: transparent; color: var(--muted); font: 800 11px 'Space Mono', monospace; cursor: pointer; }
.side-panel-tab.is-active { background: var(--lime); color: var(--ink); }
.side-panel-tab:hover:not(:disabled):not(.is-active) { color: var(--white); background: rgba(117,177,255,.13); }
.side-panel-tab:focus-visible { outline: 2px solid var(--lime); outline-offset: 2px; }
.side-panel-tab:disabled { opacity: .5; cursor: not-allowed; }
.side-switcher { position: relative; min-height: 100%; }
.side-face { min-height: 100%; display: flex; flex-direction: column; }
.club-identity { margin-bottom: 24px !important; }
.club-identity img { width: clamp(82px, 10vw, 120px) !important; height: clamp(82px, 10vw, 120px) !important; object-fit: cover; object-position: 50% 32%; }
.club-name { margin: 10px 0 0 !important; font-size: clamp(42px, 5vw, 64px) !important; }
.twitch-club-login { margin-top: auto !important; border-color: rgba(8, 125, 255, .55); box-shadow: inset 3px 0 var(--jampa-blue); background: linear-gradient(135deg, rgba(8, 125, 255, .15), rgba(10, 20, 39, .85)); }
.twitch-login-button { background: #ff1744; border-radius: 7px; }
.open-chat { width: 100%; min-height: 48px; margin-top: 18px; padding: 12px 16px !important; clip-path: none; border-radius: 8px; }
.side-face-back { display: none; }
.side-switcher.is-chat .side-face-front { display: none; }
.side-switcher.is-chat .side-face-back { display: flex; }
.chat-exclusive-frame { flex: 1; min-height: 240px; overflow: hidden; background: #050a12; border: 1px solid var(--line); }
.chat-exclusive-frame iframe { width: 100%; height: 100%; min-height: 240px; border: 0; }

.roster { padding-top: clamp(45px, 7vw, 80px); }
.roster-grid { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 0 !important; border-block: 1px solid var(--line); }
.vacancy-card { min-height: 190px; padding: 20px 18px; border: 0 !important; border-left: 1px solid var(--line) !important; border-radius: 0; transform: none; background: linear-gradient(145deg, rgba(16, 31, 61, .95), rgba(6, 17, 36, .95)) !important; box-shadow: none; }
.vacancy-card:first-child { border-left: 0 !important; }
.vacancy-card:hover { transform: translateY(-4px); border-left-color: var(--jampa-blue) !important; box-shadow: 0 12px 28px rgba(0,0,0,.22); }
.vacancy-card h3 { margin: 24px 0 10px; font-size: clamp(22px, 2.2vw, 32px) !important; }
.vacancy-status { color: var(--muted); font: 9px "Space Mono", monospace; }
.vacancy-action { border-top: 1px solid var(--line); padding-top: 14px; }
.vacancy-open-badge { display: inline-block; padding: 5px 8px; border-radius: 4px; background: var(--lime); color: var(--ink) !important; font: 800 10px "Space Mono", monospace; }
.vacancy-taken, .vacancy-closed { color: var(--muted); font: 9px/1.4 "Space Mono", monospace; }
.vacancy-taken b { display: block; margin-top: 4px; color: var(--lime) !important; }

.social-hub { padding-top: 35px; }
.social-hub .like-gate { gap: clamp(20px, 4vw, 44px); padding: clamp(20px, 4vw, 42px); border: 1px solid var(--line); border-radius: 14px; background: linear-gradient(135deg, rgba(16, 31, 61, .92), rgba(6, 17, 36, .95)); }
.social-hub .gate-card-grid { gap: 12px; }
.social-hub .gate-card-grid .social-card { min-height: 105px; border: 1px solid var(--line); border-radius: 10px; background: rgba(4, 9, 20, .55); }
.social-hub .gate-card-grid .social-card svg { width: 32px; height: 32px; }
.social-youtube svg { color: #ff1744; }
.social-discord svg { color: #5865f2; }
.social-hub .follower-actions { gap: 10px; }

@media (max-width: 940px) {
  .arena-grid { grid-template-columns: 1fr !important; }
  .live-info { min-height: 360px; }
  .roster-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .vacancy-card:nth-child(4) { border-left: 0 !important; border-top: 1px solid var(--line) !important; }
  .vacancy-card:nth-child(5) { border-top: 1px solid var(--line) !important; }
}
@media (max-width: 620px) {
  .shell { width: min(calc(100% - 24px), var(--max)); }
  .site-header { width: min(calc(100% - 24px), var(--max)); }
  .social-heading-top { padding-top: 34px; }
  #social-title { font-size: clamp(48px, 16vw, 78px) !important; }
  #social-title strong { font-size: clamp(21px, 7vw, 34px) !important; }
  .arena-game-title { font-size: 21px; }
  .player-card { aspect-ratio: 2 / 3; }
  .player-card.is-playing { aspect-ratio: 16 / 9; }
  .player-placeholder { grid-template-columns: 1fr; grid-template-rows: minmax(0, 2fr) minmax(0, 1fr); }
  .player-cover-image { grid-column: 1; grid-row: 1; }
  .player-cover-content { grid-column: 1; grid-row: 2; padding: 12px 18px; }
  .player-cover-content .cover-kicker { margin-bottom: 6px; font-size: 9px; }
  .player-cover-content h3 { margin-bottom: 9px !important; font-size: clamp(25px, 7vw, 34px) !important; }
  .player-cover-content .cover-actions { width: 100%; margin-top: 0; }
  .player-cover-content .cover-action { width: 100%; min-height: 42px; }
  .roster-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .vacancy-card, .vacancy-card:nth-child(4), .vacancy-card:nth-child(5) { border-left: 1px solid var(--line) !important; border-top: 1px solid var(--line) !important; }
  .vacancy-card:nth-child(odd) { border-left: 0 !important; }
  .vacancy-card:first-child, .vacancy-card:nth-child(2) { border-top: 0 !important; }
  .social-hub .like-gate { padding: 18px; }
  .social-hub .gate-card-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .social-hub .gate-card-grid .social-card { min-height: 92px; padding: 10px 8px; }
  .social-hub .gate-card-grid .social-card b { font-size: 16px; }
  .social-hub .gate-card-grid .social-card small { font-size: 8px; }
}
@media (prefers-reduced-motion: reduce) {
  .player-placeholder, .player-frame { transition: none; }
}

/* Painel lateral e roster EA */
.live-side-title { margin:22px 0 5px; font-size:clamp(30px,4vw,48px); line-height:.86; }
.live-side-note { color:var(--muted); font:11px/1.4 "Space Mono",monospace; margin:0 0 18px; }
.side-vacancy-list { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px; overflow:auto; }
.side-vacancy-list .vacancy-card { min-height:0; padding:11px; border:1px solid var(--line) !important; border-radius:8px; transform:none; }
.side-vacancy-list .vacancy-card h3 { margin:10px 0 8px; font-size:19px !important; }
.side-vacancy-list .vacancy-top { gap:4px; }
.side-vacancy-list .vacancy-position { font-size:16px; }
.side-vacancy-list .vacancy-status { font-size:7px; }
.side-vacancy-list .vacancy-action { padding-top:8px; }
.side-vacancy-list .vacancy-taken, .side-vacancy-list .vacancy-closed, .side-vacancy-list .vacancy-open-badge { font-size:8px; }
.side-vacancy-list .vacancy-taken b { font-size:10px; }
.side-vacancy-list-back { margin-top:12px; max-height:170px; }
.open-chat:disabled { opacity:.42; cursor:not-allowed; filter:grayscale(1); }
.chat-exclusive { height:100%; display:flex; flex-direction:column; }
.chat-exclusive-frame { min-height:220px; flex:1; }
.chat-offline-note, .vacancy-empty { color:var(--muted); font:10px/1.4 "Space Mono",monospace; padding:15px; }
.ea-roster-list { margin-top:24px; display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:10px; }
.ea-roster-heading { grid-column:1/-1; display:flex; justify-content:space-between; align-items:end; gap:12px; border-bottom:1px solid var(--line); padding-bottom:12px; }
.ea-roster-heading strong { color:var(--muted); font:10px "Space Mono",monospace; }
.roster-player { text-align:left; min-width:0; padding:14px; border:1px solid var(--line); border-radius:10px; background:linear-gradient(145deg,rgba(14,35,72,.92),rgba(6,17,36,.96)); color:var(--white); cursor:pointer; transition:transform .2s,border-color .2s; }
.roster-player:hover { transform:translateY(-3px); border-color:var(--lime); }
.roster-player span, .roster-player small { display:block; color:var(--lime); font:9px "Space Mono",monospace; }
.roster-player strong { display:block; margin:9px 0 4px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size:19px; }
.roster-player small { color:var(--muted); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.admin-panel { margin:40px 0; padding:24px; border:1px solid var(--line); border-radius:14px; background:linear-gradient(145deg,rgba(16,31,61,.86),rgba(6,17,36,.9)); }
.admin-section-heading { display:flex; align-items:end; justify-content:space-between; gap:20px; margin-bottom:22px; }
.admin-section-heading h2 { margin:0; font-size:clamp(30px,5vw,52px); line-height:.85; }
.position-admin-grid { display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap:10px; }
.position-admin-card { padding:12px; border:1px solid var(--line); border-radius:10px; background:rgba(0,0,0,.18); }
.position-admin-card.is-published { border-color:rgba(255,210,26,.7); box-shadow:inset 0 -3px var(--lime); }
.position-toggle { display:flex; width:100%; align-items:center; justify-content:space-between; gap:6px; border:0; background:none; color:var(--white); cursor:pointer; }
.position-toggle strong { color:var(--lime); font:18px "Space Mono",monospace; }
.position-toggle span { color:var(--muted); font:7px "Space Mono",monospace; }
.position-admin-card label { display:grid; gap:5px; margin-top:12px; color:var(--muted); font:9px "Space Mono",monospace; }
.position-admin-card input, .ea-search-form input, .ea-search-form select { min-width:0; width:100%; padding:10px; border:1px solid var(--line); border-radius:7px; background:var(--ink); color:var(--white); font:12px "Space Mono",monospace; }
.ea-search-form { display:grid; grid-template-columns:minmax(0,2fr) 1fr auto; gap:10px; }
#active-club-form { grid-template-columns:minmax(0,1fr) auto; margin-bottom:30px; }
.ea-search-results, .ea-club-list { display:grid; gap:8px; margin-top:14px; }
.ea-result, .admin-club-card { display:flex; align-items:center; justify-content:space-between; gap:14px; padding:14px; border:1px solid var(--line); border-radius:9px; background:rgba(0,0,0,.18); }
.ea-result div, .admin-club-card div { min-width:0; }
.ea-result strong, .admin-club-card h3 { display:block; margin:0 0 4px; font-size:18px; }
.ea-result small, .admin-club-card small { color:var(--muted); font:9px "Space Mono",monospace; }
.admin-club-card .button, .ea-result .button { min-width:0; padding:10px 12px; font-size:11px; }
@media(max-width:940px){.ea-roster-list{grid-template-columns:repeat(3,minmax(0,1fr))}.position-admin-grid{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media(max-width:620px){.side-vacancy-list{grid-template-columns:repeat(2,minmax(0,1fr))}.ea-roster-list{grid-template-columns:repeat(2,minmax(0,1fr))}.ea-roster-heading{display:block}.ea-roster-heading strong{display:block;margin-top:8px}.ea-player-data{grid-template-columns:1fr}.position-admin-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.admin-section-heading{display:block}.admin-section-heading .button{margin-top:14px;width:100%}.ea-search-form{grid-template-columns:1fr}.ea-result,.admin-club-card{align-items:flex-start;flex-direction:column}.ea-result .button,.admin-club-card .button{width:100%}}
@media(max-width:620px){#active-club-form{grid-template-columns:1fr}}

@media (max-width: 760px) {
  .twitch-club-login { align-items: flex-start; flex-direction: column; }
  .twitch-login-button { width: 100%; text-align: center; }
}

/* Vagas públicas: posição e quantidade, sem ação de candidatura. */
.sr-only { position:absolute !important; width:1px !important; height:1px !important; padding:0 !important; margin:-1px !important; overflow:hidden !important; clip:rect(0,0,0,0) !important; white-space:nowrap !important; border:0 !important; }
.live-side-title, .live-side-note, .chat-exclusive-heading strong { display:none !important; }
.side-vacancy-list, .roster-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px !important; }
.vacancy-card.vacancy-micro, .side-vacancy-list .vacancy-card.vacancy-micro {
  position: relative;
  display: grid;
  place-items: center;
  min-width: 0;
  min-height: 94px !important;
  width: 100%;
  padding: 12px !important;
  border: 1px solid rgba(117,177,255,.32) !important;
  border-radius: 12px !important;
  background: linear-gradient(150deg, rgba(20,45,88,.96), rgba(5,13,31,.98)) !important;
  color: var(--white);
  box-shadow: inset 0 1px rgba(255,255,255,.07), 0 8px 20px rgba(0,0,0,.15);
  transform: none;
  overflow: hidden;
  text-align: center;
  cursor: default;
  transition: border-color .2s, box-shadow .2s, transform .2s;
}
.vacancy-micro::before {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: 3px;
  background: var(--lime);
  opacity: .85;
}
.vacancy-micro::after {
  content: "";
  position: absolute;
  inset: auto -30% -75% -30%;
  height: 90px;
  background: radial-gradient(circle, rgba(8,125,255,.22), transparent 70%);
  pointer-events: none;
}
.vacancy-micro .vacancy-position, .side-vacancy-list .vacancy-micro .vacancy-position {
  position: relative;
  z-index: 1;
  color: var(--white);
  font: 900 clamp(25px,3vw,38px)/1 'Barlow Condensed',system-ui,sans-serif;
  letter-spacing: .015em;
}
.vacancy-micro .vacancy-led {
  position: absolute;
  top: 12px;
  right: 12px;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--lime);
  box-shadow: 0 0 0 3px rgba(255,210,26,.12);
}
.arena-game-title #arena-game-name { color: var(--white); }
.vacancy-micro .vacancy-count {
  position: absolute;
  z-index: 1;
  bottom: 9px;
  left: 0;
  width: 100%;
  color: var(--lime);
  font: 700 10px "Space Mono", monospace;
  text-transform: uppercase;
}
.vacancy-card.vacancy-micro { padding-bottom: 23px !important; }
.vacancy-card.vacancy-micro:hover, .side-vacancy-list .vacancy-card.vacancy-micro:hover {
  border-color: rgba(117,177,255,.32) !important;
  box-shadow: inset 0 1px rgba(255,255,255,.07), 0 8px 20px rgba(0,0,0,.15);
  transform: none;
}
.side-vacancy-list .vacancy-micro { min-height: 78px !important; }
.side-vacancy-list .vacancy-micro .vacancy-position { font-size: 27px; }
@media (max-width: 620px) { .side-vacancy-list, .roster-grid { grid-template-columns: repeat(2,minmax(0,1fr)); } .vacancy-micro { min-height: 88px !important; } }
@media (prefers-reduced-motion: reduce) { .vacancy-micro { transition: none; } }