/* FUTPIXEL TV design system: shared broadcast components and the opening ident (tv-ident.js).
   Every colour, radius, shadow and motion value comes from the :root tokens in styles.css; module stylesheets
   (front menu, match setup, account, intro, halftime, fulltime, settings, controller) skin their own classes
   with the same tokens. New panels can use these classes directly:
     .tv-panel (+ .tv-panel--edge)   graphite glass card with the red top rule (or red left edge)
     .tv-lt > b + span               lower third: red tag and plate (b is the tag, span the text)
     .tv-chip                        eyebrow with the red "F" channel chip; .tv-live is the AO VIVO chip with its dot
     .tv-btn (+ --primary, --ghost)  graphite secondary, red primary and ghost buttons, 44 px targets
     .tv-seg > button[aria-pressed]  segmented toggle
     .tv-input, .tv-select           wells with the gold chevron
     .tv-tile                        selectable tile with the red underline sweep
     .tv-badge (+ --red, --gold, --ok)
     .tv-toast (+ [data-kind=error]) notification lower third
     .tv-link                        gold text link with a 44 px hit area */
.tv-panel{position:relative;padding:18px;border:1px solid var(--edge);border-top:3px solid var(--red);border-radius:var(--r-sm);background:var(--panel-grad);box-shadow:var(--shadow-2),inset 0 1px 0 #ffffff0d;color:var(--ink)}
.tv-panel--edge{border-top-width:1px;border-top-color:var(--edge);box-shadow:inset 4px 0 0 var(--red),var(--shadow-2)}
.tv-lt{display:inline-flex;align-items:stretch;max-width:100%;font:700 13px/1.1 var(--tv-font);letter-spacing:1px;text-transform:uppercase;box-shadow:var(--shadow-1)}
.tv-lt>b{flex:none;padding:6px 18px 5px 10px;background:linear-gradient(180deg,var(--red),#b00d2a);color:#fff;clip-path:polygon(0 0,100% 0,calc(100% - 9px) 100%,0 100%)}
.tv-lt>span{min-width:0;padding:6px 12px 5px;margin-left:-6px;background:var(--paper);color:#101217;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.tv-chip{display:inline-flex;align-items:center;gap:9px;font:700 11px/1 var(--tv-font);letter-spacing:2.2px;color:var(--gold);text-transform:uppercase}
.tv-chip::before{content:"F";display:inline-grid;place-items:center;width:18px;height:18px;border-radius:var(--r-xs);background:var(--red);color:#fff;font:italic 900 13px/1 var(--tv-font);letter-spacing:0}
.tv-live{display:inline-flex;align-items:center;gap:7px;padding:4px 9px 3px 8px;border-radius:var(--r-xs);background:linear-gradient(180deg,var(--red),#b00d2a);color:#fff;font:700 10px/1 var(--tv-font);letter-spacing:1.5px;text-transform:uppercase;white-space:nowrap}
.tv-live::before{content:"";width:6px;height:6px;border-radius:50%;background:#fff;box-shadow:0 0 6px #fff;animation:live-dot 1.4s ease-in-out infinite}
.tv-btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-width:44px;min-height:44px;padding:10px 18px;border:1px solid var(--line);border-radius:var(--r-sm);background:var(--btn);color:var(--ink);font:700 14px/1 var(--tv-font);letter-spacing:1.1px;text-transform:uppercase;text-decoration:none;box-shadow:inset 0 1px 0 #ffffff14,var(--shadow-1);transition:background var(--dur) ease,border-color var(--dur) ease,transform var(--dur-fast) ease,box-shadow var(--dur) ease}
.tv-btn:hover{border-color:#646c7d;background:var(--btn-hover)}
.tv-btn--primary{border-color:#ff8a9c;background:var(--primary);color:#fff;box-shadow:inset 0 1px 0 #ffffff40,0 4px 14px #e5173a4d}
.tv-btn--primary:hover{border-color:#ffc0ca;background:var(--primary-hover)}
.tv-btn--ghost{border-color:var(--edge);background:transparent;box-shadow:none}
.tv-btn--ghost:hover{border-color:var(--edge-strong);background:#ffffff0d}
.tv-seg{display:inline-grid;grid-auto-flow:column;grid-auto-columns:minmax(0,1fr);gap:2px;padding:3px;border-radius:var(--r-sm);background:var(--well);box-shadow:inset 0 0 0 1px var(--edge)}
.tv-seg>button{min-height:44px;padding:0 14px;border:0;border-radius:3px;background:transparent;box-shadow:none;color:var(--muted);font:700 13px/1 var(--tv-font);letter-spacing:1px;text-transform:uppercase}
.tv-seg>button:hover{background:#ffffff0d;color:var(--ink)}
.tv-seg>button[aria-pressed=true],.tv-seg>button[aria-selected=true]{background:linear-gradient(180deg,#2c313c,#1c1f27);color:#fff;box-shadow:inset 0 -3px 0 var(--red),inset 0 1px 0 #ffffff1f}
.tv-input,.tv-select{width:100%;min-width:0;min-height:44px;padding:9px 12px;border:1px solid #ffffff2e;border-radius:var(--r-sm);background-color:var(--well);color:var(--ink);font:600 14px/1.2 var(--ui-font)}
.tv-input:hover,.tv-select:hover{border-color:#ffffff66}
.tv-input::placeholder{color:#7d8491}
.tv-select{appearance:none;-webkit-appearance:none;padding-right:32px;background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'><path d='M1 1l5 5 5-5' fill='none' stroke='%23ffc42e' stroke-width='2'/></svg>");background-repeat:no-repeat;background-position:right 12px center}
.tv-tile{position:relative;overflow:hidden;display:flex;flex-direction:column;align-items:flex-start;gap:8px;min-height:44px;padding:16px;border:1px solid var(--edge);border-radius:var(--r-sm);background:linear-gradient(160deg,#1c2029,#12141a);color:var(--ink);text-align:left;box-shadow:var(--shadow-1);transition:transform var(--dur) var(--ease-out),border-color var(--dur) ease,background var(--dur) ease}
.tv-tile::after{content:"";position:absolute;left:0;right:0;bottom:0;height:3px;background:var(--red);transform:scaleX(0);transform-origin:left;transition:transform var(--dur-slow) var(--ease-out)}
.tv-tile:hover,.tv-tile:focus-visible,.tv-tile[aria-pressed=true]{border-color:var(--edge-strong);background:linear-gradient(160deg,#262b35,#181b22);transform:translateY(-2px)}
.tv-tile:hover::after,.tv-tile:focus-visible::after,.tv-tile[aria-pressed=true]::after{transform:scaleX(1)}
.tv-badge{display:inline-flex;align-items:center;gap:5px;padding:3px 7px 2px;border-radius:var(--r-xs);background:var(--graphite);color:var(--ink);font:700 10px/1.2 var(--tv-font);letter-spacing:1px;text-transform:uppercase;white-space:nowrap}
.tv-badge--red{background:var(--red);color:#fff}.tv-badge--gold{background:var(--gold);color:var(--gold-ink)}.tv-badge--ok{background:#123d29;color:#9ff0c4;box-shadow:inset 0 0 0 1px #3fd08a66}
.tv-toast{display:flex;align-items:center;gap:12px;max-width:min(560px,calc(100vw - 32px));padding:11px 16px 11px 14px;border:1px solid var(--edge);border-left:4px solid var(--red);border-radius:0 var(--r-sm) var(--r-sm) 0;background:var(--lt-bg);color:var(--ink);font:600 13px/1.45 var(--ui-font);box-shadow:var(--shadow-2);animation:tv-toast-in var(--dur-slow) var(--ease-out) both}
.tv-toast[data-kind=error]{border-left-color:var(--warn);background:linear-gradient(90deg,#2a1414f5,#1a1012f0)}
.tv-toast[data-kind=success]{border-left-color:var(--ok)}
.tv-link{display:inline-flex;align-items:center;min-height:44px;padding:0 4px;color:var(--gold);font:700 12px/1 var(--tv-font);letter-spacing:1px;text-transform:uppercase;text-decoration:none;text-underline-offset:3px}
.tv-link:hover{text-decoration:underline}
@keyframes tv-toast-in{from{opacity:0;translate:0 8px}}

/* Opening ident (tv-ident.js): black slate, a red bar wipes across, FUTPIXEL [TV] slams in with a glint, AO VIVO
   pulses, then the slate fades off the home screen. 1.4 s, transform and opacity only, never takes input:
   pointer-events:none on every layer and aria-hidden on the root; the text is generated content only. */
.tv-ident{--ident-size:clamp(38px,9vw,112px);--ident-bar:min(14vh,calc(var(--ident-size) * 1.6));position:fixed;inset:0;z-index:3000;display:grid;place-items:center;overflow:hidden;background:radial-gradient(ellipse 70% 55% at 50% 50%,#1a0b10,#07080b 70%);pointer-events:none;contain:strict;animation:tv-ident-out .3s var(--ease-in) 1.1s both}
.tv-ident *{pointer-events:none}
.tv-ident::before{content:"";position:absolute;inset:0;background:repeating-linear-gradient(0deg,#ffffff06 0 1px,#0000 1px 3px)}
.tv-ident-bar{position:absolute;left:0;right:0;top:calc(50% - var(--ident-bar) / 2);height:var(--ident-bar);background:linear-gradient(180deg,var(--red-hi),var(--red) 50%,var(--red-deep));box-shadow:0 0 60px #e5173a80;transform-origin:left bottom;animation:tv-ident-bar .95s var(--ease-out) both}
.tv-ident-logo{position:relative;display:flex;align-items:center;gap:.12em;overflow:hidden;padding:.08em .14em;font:italic 900 var(--ident-size)/1 var(--tv-font);letter-spacing:-.01em;color:#fff;transform:skew(-6deg);animation:tv-ident-slam .42s var(--ease-snap) .22s both}
.tv-ident-word::before{content:"FUTPIXEL";text-shadow:0 .05em 0 #0006}
.tv-ident-tv{padding:.06em .16em .02em;border-radius:.05em;background:var(--red);box-shadow:inset 0 .04em 0 #ffffff59,0 .06em .2em #0008;color:#fff}
.tv-ident-tv::before{content:"TV"}
.tv-ident-glint{position:absolute;top:-20%;bottom:-20%;left:0;width:22%;background:linear-gradient(100deg,#fff0,#ffffffb3 50%,#fff0);transform:translateX(-160%) skew(-18deg);animation:tv-ident-glint .45s ease-out .62s both}
.tv-ident-live{position:absolute;top:calc(50% + var(--ident-bar) / 2 + 18px);left:50%;display:flex;align-items:center;gap:8px;padding:5px 11px 4px 9px;border-radius:var(--r-xs);background:#07080be6;box-shadow:inset 0 0 0 1px #ffffff26;color:#fff;font:700 13px/1 var(--tv-font);letter-spacing:2.4px;transform:translateX(-50%);animation:tv-ident-live .25s var(--ease-out) .72s both}
.tv-ident-live::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--red-hi);box-shadow:0 0 8px var(--red-hi);animation:live-dot .36s ease-in-out .8s 2}
.tv-ident-live::after{content:"AO VIVO"}
.tv-ident.is-skipping{animation:tv-ident-skip .14s ease-out both}
@keyframes tv-ident-bar{0%{transform:scaleX(0)}34%{transform:scaleX(1)}72%{transform:scaleX(1) scaleY(1)}100%{transform:scaleX(1) scaleY(.1)}}
@keyframes tv-ident-slam{from{opacity:0;transform:skew(-6deg) scale(1.7)}to{opacity:1;transform:skew(-6deg) scale(1)}}
@keyframes tv-ident-glint{to{transform:translateX(560%) skew(-18deg)}}
@keyframes tv-ident-live{from{opacity:0;transform:translate(-50%,8px)}}
@keyframes tv-ident-out{to{opacity:0}}
@keyframes tv-ident-skip{from{opacity:1}to{opacity:0}}
/* Portrait phones: a bigger wordmark, and the bar follows its size so the collapsed rule lands under it. */
@media(orientation:portrait){.tv-ident{--ident-size:clamp(40px,13vw,112px)}}
@media(prefers-reduced-motion:reduce){.tv-ident{display:none}}
/* Decorative loops rest while the page is hidden (tv-ident.js flags it). */
html[data-tv-idle] .tv-live::before{animation-play-state:paused}

/* Long TV dialogs scroll on a thin broadcast bar: red thumb on the dark well (Conta, Configurações/Controle,
   Meu time, Escolher times, help). Chromium and Firefox use scrollbar-width/-color; the ::-webkit-scrollbar pill
   below only applies where those are unsupported (Safari). */
.account-body,.settings-body,.squad-body,.clubs-body,.help-panel{scrollbar-width:thin;scrollbar-color:var(--red) var(--well)}
.account-body::-webkit-scrollbar,.settings-body::-webkit-scrollbar,.squad-body::-webkit-scrollbar,.clubs-body::-webkit-scrollbar,.help-panel::-webkit-scrollbar{width:8px;height:8px}
.account-body::-webkit-scrollbar-track,.settings-body::-webkit-scrollbar-track,.squad-body::-webkit-scrollbar-track,.clubs-body::-webkit-scrollbar-track,.help-panel::-webkit-scrollbar-track{background:var(--well)}
.account-body::-webkit-scrollbar-thumb,.settings-body::-webkit-scrollbar-thumb,.squad-body::-webkit-scrollbar-thumb,.clubs-body::-webkit-scrollbar-thumb,.help-panel::-webkit-scrollbar-thumb{border:2px solid var(--well);border-radius:var(--r-pill);background:var(--red)}
.account-body::-webkit-scrollbar-thumb:hover,.settings-body::-webkit-scrollbar-thumb:hover,.squad-body::-webkit-scrollbar-thumb:hover,.clubs-body::-webkit-scrollbar-thumb:hover,.help-panel::-webkit-scrollbar-thumb:hover{background:var(--red-hi)}
.settings-body,.squad-body,.clubs-body{scroll-padding:12px}