@font-face{font-family:'Barlow Semi Condensed';font-style:normal;font-weight:400;font-display:swap;src:url('assets/fonts/barlow-semi-condensed-400-latin-ext.woff2') format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;}
@font-face{font-family:'Barlow Semi Condensed';font-style:normal;font-weight:400;font-display:swap;src:url('assets/fonts/barlow-semi-condensed-400-latin.woff2') format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;}
@font-face{font-family:'Barlow Semi Condensed';font-style:normal;font-weight:500;font-display:swap;src:url('assets/fonts/barlow-semi-condensed-500-latin-ext.woff2') format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;}
@font-face{font-family:'Barlow Semi Condensed';font-style:normal;font-weight:500;font-display:swap;src:url('assets/fonts/barlow-semi-condensed-500-latin.woff2') format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;}
@font-face{font-family:'Barlow Semi Condensed';font-style:normal;font-weight:600;font-display:swap;src:url('assets/fonts/barlow-semi-condensed-600-latin-ext.woff2') format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;}
@font-face{font-family:'Barlow Semi Condensed';font-style:normal;font-weight:600;font-display:swap;src:url('assets/fonts/barlow-semi-condensed-600-latin.woff2') format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;}
@font-face{font-family:'Barlow Semi Condensed';font-style:normal;font-weight:700;font-display:swap;src:url('assets/fonts/barlow-semi-condensed-700-latin-ext.woff2') format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;}
@font-face{font-family:'Barlow Semi Condensed';font-style:normal;font-weight:700;font-display:swap;src:url('assets/fonts/barlow-semi-condensed-700-latin.woff2') format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;}
@font-face{font-family:'Cinzel';font-style:normal;font-weight:600;font-display:swap;src:url('assets/fonts/cinzel-600-latin-ext.woff2') format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;}
@font-face{font-family:'Cinzel';font-style:normal;font-weight:600;font-display:swap;src:url('assets/fonts/cinzel-600-latin.woff2') format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;}
@font-face{font-family:'Cinzel';font-style:normal;font-weight:700;font-display:swap;src:url('assets/fonts/cinzel-700-latin-ext.woff2') format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;}
@font-face{font-family:'Cinzel';font-style:normal;font-weight:700;font-display:swap;src:url('assets/fonts/cinzel-700-latin.woff2') format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;}
@font-face{font-family:'Cinzel';font-style:normal;font-weight:800;font-display:swap;src:url('assets/fonts/cinzel-800-latin-ext.woff2') format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;}
@font-face{font-family:'Cinzel';font-style:normal;font-weight:800;font-display:swap;src:url('assets/fonts/cinzel-800-latin.woff2') format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;}
/* ============================================================
   Arthur Lanches – Guia · HOME v2.2 (Teemo vs Inimigo)
   ESQUERDA = você (Teemo, skins controlam o splash) · CENTRO = pool
   DIREITA = inimigo + guia · lock-in com animação de VS diagonal.
   Duotone: ouro #caa14a + teal #37b6a6 sobre near-black #0a1410.
   Cinzel (display) + Barlow Semi Condensed (UI/dados). Assinatura: cogumelos.
   ============================================================ */

:root{
  --void:#0a1410; --slate:#111a16; --slate-2:#0d1512;
  --gold:#caa14a; --gold-hi:#f0cf87; --gold-dim:#8a6f30;
  --hex:#37b6a6; --hex-dim:#1f5f58;
  --parchment:#e6d6b3; --parchment-soft:#a99e84;
  --enemy:#c8453c; --shroom:#e0322e; --ink:#070c09;
  --line:rgba(202,161,74,.20); --line-soft:rgba(202,161,74,.10); --line-hex:rgba(55,182,166,.28);
  --header-h:56px; --footer-h:28px;
  font-synthesis:none;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;font-size:112.5%} /* base 18px: aumenta todo o texto (fonte em rem, layout em px) */
body{min-height:100vh;background:var(--void);color:var(--parchment);
  font-family:'Barlow Semi Condensed',system-ui,sans-serif;-webkit-font-smoothing:antialiased;overflow-x:hidden}
img{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
button{font-family:inherit;cursor:pointer;color:inherit;background:none;border:none}
h1,h2,h3,h4{font-weight:700}
:focus-visible{outline:2px solid var(--hex);outline-offset:2px;border-radius:3px}

.backdrop{position:fixed;inset:0;z-index:-2;background:radial-gradient(120% 80% at 50% -10%, #12271f 0%, #0b1712 45%, #070f0b 100%)}
.backdrop::before{content:"";position:absolute;inset:0;opacity:.06;background-image:
  linear-gradient(60deg,transparent 47%,var(--gold) 48%,var(--gold) 52%,transparent 53%),
  linear-gradient(-60deg,transparent 47%,var(--hex) 48%,var(--hex) 52%,transparent 53%);
  background-size:64px 111px;-webkit-mask-image:radial-gradient(70% 60% at 50% 40%,#000,transparent 82%);mask-image:radial-gradient(70% 60% at 50% 40%,#000,transparent 82%)}
.backdrop::after{content:"";position:absolute;inset:0;background:radial-gradient(55% 45% at 50% 42%,rgba(202,161,74,.08),transparent 70%)}

/* ============================================================ HEADER ============================================================ */
.site-header{height:var(--header-h);display:flex;align-items:center;gap:14px;padding:0 16px;border-bottom:1px solid var(--line);
  background:linear-gradient(180deg,rgba(7,13,9,.92),rgba(7,13,9,.6));-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);position:sticky;top:0;z-index:50}
.brand{display:flex;align-items:center;gap:10px;flex:none}
.brand-logo{width:34px;height:34px;border-radius:50%;overflow:hidden;flex:none;border:2px solid var(--gold);box-shadow:0 0 0 1px #000,0 0 12px rgba(202,161,74,.4)}
.brand-logo img{width:100%;height:100%;object-fit:cover}
.brand-text{font-family:'Cinzel',serif;font-weight:700;font-size:1.02rem;letter-spacing:.06em;color:var(--parchment)}
.brand-text strong{color:var(--gold);font-weight:800}
.socials{display:flex;align-items:center;gap:6px;list-style:none;margin-left:4px}
.socials a{width:29px;height:29px;display:grid;place-items:center;border-radius:7px;color:var(--parchment-soft);border:1px solid var(--line-soft);background:rgba(0,0,0,.25);transition:.16s}
.socials a:hover{color:var(--ink);background:var(--gold);border-color:var(--gold)}
.socials svg{width:15px;height:15px;fill:currentColor}
.socials .opgg{font-weight:700;font-size:.56rem}.socials a:has(.opgg){width:auto;padding:0 8px}
.header-actions{display:flex;align-items:center;gap:8px;margin-left:auto}
.btn-hex{font-weight:600;font-size:.78rem;display:inline-flex;align-items:center;gap:7px;padding:8px 13px;border-radius:7px;border:1px solid var(--gold);letter-spacing:.02em;transition:.16s;
  clip-path:polygon(7px 0,100% 0,100% calc(100% - 7px),calc(100% - 7px) 100%,0 100%,0 7px)}
.btn-hex--live{color:var(--parchment);background:rgba(0,0,0,.3)}
.btn-hex--live:hover{background:rgba(202,161,74,.14)}
.live-dot{width:7px;height:7px;border-radius:50%;background:var(--enemy);box-shadow:0 0 0 0 rgba(200,69,60,.7);animation:pulse 1.6s infinite}
@keyframes pulse{70%{box-shadow:0 0 0 6px rgba(200,69,60,0)}100%{box-shadow:0 0 0 0 rgba(200,69,60,0)}}
.btn-hex--gold{color:var(--ink);font-weight:700;background:linear-gradient(180deg,var(--gold-hi),var(--gold) 60%,var(--gold-dim))}
.btn-hex--gold:hover{filter:brightness(1.07)}
.mode-toggle{display:flex;flex:none;border:1px solid var(--line-hex);border-radius:8px;overflow:hidden;background:rgba(0,0,0,.3)}
.mode-btn{font-weight:600;font-size:.76rem;letter-spacing:.04em;padding:7px 13px;color:var(--parchment-soft);transition:.16s;text-transform:uppercase}
.mode-btn.is-active{color:var(--ink);background:linear-gradient(180deg,#49c9b9,var(--hex));font-weight:700}
.mode-btn:not(.is-active):hover{color:var(--hex)}
.window-chrome{display:flex;gap:5px;flex:none}
.chrome-btn{width:24px;height:24px;display:grid;place-items:center;border-radius:5px;border:1px solid var(--line-soft);color:var(--parchment-soft);font-size:.72rem;background:rgba(0,0,0,.28);transition:.14s}
.chrome-btn:hover{color:var(--parchment);border-color:var(--line)}
.chrome-btn--x:hover{color:var(--enemy);border-color:var(--enemy)}
/* hamburger: some no desktop (header-menu flui normal via display:contents) */
.header-menu{display:contents}
.hamburger{display:none;flex-direction:column;justify-content:center;gap:4px;width:36px;height:32px;padding:7px 8px;flex:none;margin-left:auto;
  border:1px solid var(--line-soft);border-radius:7px;background:rgba(0,0,0,.28);cursor:pointer}
.hamburger span{display:block;height:2px;width:100%;background:var(--parchment);border-radius:2px;transition:transform .2s,opacity .2s}
.hamburger[aria-expanded="true"] span:nth-child(1){transform:translateY(6px) rotate(45deg)}
.hamburger[aria-expanded="true"] span:nth-child(2){opacity:0}
.hamburger[aria-expanded="true"] span:nth-child(3){transform:translateY(-6px) rotate(-45deg)}

/* ============================================================ STAGE ============================================================ */
.stage{height:calc(100vh - var(--header-h) - var(--footer-h));display:grid;
  grid-template-columns:300px minmax(0,1fr) 384px;grid-template-rows:minmax(0,1fr) auto;
  grid-template-areas:"you center guide" "bottom bottom bottom";gap:14px;padding:14px}
.stage > *{min-width:0;min-height:0}
.you-col{grid-area:you}.center{grid-area:center}.guide-col{grid-area:guide}.bottombar{grid-area:bottom}
.you-col,.center,.guide-col{border:1px solid var(--line);border-radius:12px;
  background:linear-gradient(180deg,rgba(17,26,22,.72),rgba(13,21,18,.72));box-shadow:0 12px 40px rgba(0,0,0,.4);position:relative;overflow:hidden}

.side-tag{position:absolute;top:9px;z-index:6;font-size:.58rem;font-weight:800;letter-spacing:.14em;text-transform:uppercase;padding:3px 9px;border-radius:5px}
.side-tag--you{left:9px;color:var(--ink);background:var(--hex)}
.side-tag--enemy{right:9px;color:#fff;background:var(--enemy)}

/* ============================================================ VOCÊ = TEEMO (esquerda) ============================================================ */
.you-col{display:flex;flex-direction:column}
.lo-splash-wrap{position:relative;flex:1;min-height:150px;overflow:hidden}
.lo-splash{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center 16%;opacity:0;transition:opacity .5s ease}
.lo-splash.is-on{opacity:1}
.lo-splash-veil{position:absolute;inset:0;background:linear-gradient(180deg,rgba(7,13,9,.1) 0%,transparent 26%,rgba(7,13,9,.6) 62%,rgba(7,13,9,.97) 100%)}
.lo-nameplate{position:absolute;left:0;right:0;bottom:0;padding:14px 16px;z-index:2}
.lo-title{font-family:'Cinzel',serif;font-size:.66rem;color:var(--hex);letter-spacing:.14em;text-transform:uppercase;opacity:.95;margin-bottom:1px}
.lo-name{font-family:'Cinzel',serif;font-weight:800;font-size:clamp(1.5rem,3.6vw,2.1rem);line-height:1;color:#fff;text-shadow:0 3px 14px rgba(0,0,0,.85)}
.lo-skin{font-size:.72rem;color:var(--parchment-soft);margin-top:4px;letter-spacing:.02em}
.you-setup{flex:none;padding:12px 14px;border-top:1px solid var(--line-soft)}
.you-setup-empty{font-size:.82rem;color:var(--parchment-soft);text-align:center;padding:6px 4px;line-height:1.5}
.setup-label{font-size:.58rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--gold-dim);margin-bottom:9px;display:flex;align-items:center;gap:6px}
.setup-label::after{content:"";flex:1;height:1px;background:linear-gradient(90deg,var(--line),transparent)}
.setup-row{display:flex;gap:10px;flex-wrap:wrap;align-items:flex-start}
.setup-slot{display:flex;flex-direction:column;align-items:center;gap:4px;width:44px}
.ss-label{font-size:.5rem;text-transform:uppercase;letter-spacing:.05em;color:var(--parchment-soft);text-align:center;line-height:1.1}
.setup-slot img{width:40px;height:40px;border-radius:7px;object-fit:cover;border:1px solid var(--gold);background:#0a120e;box-shadow:0 1px 4px rgba(0,0,0,.5)}
.setup-slot img.ss-rune{border-radius:50%}
.setup-div{width:1px;align-self:stretch;background:var(--line-soft);margin:0 2px}

/* ============================================================ CENTRO — moldura + pool ============================================================ */
.center{display:flex;flex-direction:column;padding:10px 12px 12px}
.center-head{display:flex;align-items:center;justify-content:center;gap:12px;flex:none;margin-bottom:8px}
.loadout-rune{width:34px;height:2px;position:relative;background:linear-gradient(90deg,transparent,var(--gold))}
.loadout-rune--r{background:linear-gradient(90deg,var(--gold),transparent)}
.loadout-rune::after{content:"";position:absolute;top:-4px;width:9px;height:9px;transform:rotate(45deg);border:2px solid var(--gold);background:var(--void)}
.loadout-rune--l::after{right:-2px}.loadout-rune--r::after{left:-2px}
.center-title{font-family:'Cinzel',serif;font-weight:800;font-size:1.05rem;letter-spacing:.16em;text-transform:uppercase;color:var(--gold);text-shadow:0 0 18px rgba(202,161,74,.35)}
.pool-search{flex:none;display:flex;align-items:center;gap:9px;padding:9px 14px;border-radius:9px;background:rgba(6,12,8,.7);border:1px solid var(--gold);margin-bottom:8px;
  clip-path:polygon(10px 0,100% 0,100% calc(100% - 10px),calc(100% - 10px) 100%,0 100%,0 10px);transition:.16s}
.pool-search:focus-within{border-color:var(--hex);box-shadow:0 0 14px rgba(55,182,166,.3)}
.search-ico{width:17px;height:17px;flex:none;fill:none;stroke:var(--gold);stroke-width:2;stroke-linecap:round}
#searchBar{flex:1;min-width:0;background:transparent;border:none;outline:none;color:var(--parchment);font-family:inherit;font-size:.92rem}
#searchBar::placeholder{color:var(--parchment-soft);opacity:.8}
.champ-count{font-size:.66rem;color:var(--gold);font-weight:600;flex:none;font-variant-numeric:tabular-nums}
.pool-filters{flex:none;display:flex;align-items:center;justify-content:center;gap:10px;flex-wrap:wrap;margin-bottom:10px}
.diff-filter{display:flex;gap:3px;min-height:22px}
.diff-btn{display:flex;align-items:center;gap:3px;padding:3px 8px;border-radius:20px;border:1px solid var(--line);background:rgba(0,0,0,.2);transition:.14s}
.diff-btn img{width:14px;height:14px}
.diff-btn span{font-size:.66rem;font-weight:700;color:var(--parchment-soft);font-variant-numeric:tabular-nums}
.diff-btn:hover{border-color:var(--shroom)}
.diff-btn.is-active{border-color:var(--shroom);background:rgba(224,50,46,.15)}
.diff-btn.is-active span{color:var(--parchment)}
.chip{font-size:.66rem;font-weight:600;letter-spacing:.03em;padding:4px 10px;border-radius:20px;border:1px solid var(--line);color:var(--parchment-soft);background:rgba(0,0,0,.2);transition:.14s;text-transform:uppercase}
.chip:hover{border-color:var(--gold);color:var(--parchment)}
.chip--toggle.is-active{color:var(--ink);background:var(--hex);border-color:var(--hex);font-weight:700}
/* ordenação */
.sort-wrap{display:inline-flex;align-items:center;gap:5px;padding:2px 8px 2px 9px;border-radius:20px;border:1px solid var(--line);background:rgba(0,0,0,.2)}
.sort-wrap:hover{border-color:var(--gold)}
.sort-ico{font-size:.72rem;color:var(--gold)}
.sort-select{background:transparent;border:none;outline:none;color:var(--parchment);font-family:inherit;font-size:.66rem;font-weight:600;text-transform:uppercase;letter-spacing:.03em;cursor:pointer;padding:3px 2px}
.sort-select option{background:#0e1a15;color:var(--parchment);text-transform:none}
/* chips de filtro ativo (perto da busca) */
.active-filters{flex:none;display:flex;align-items:center;justify-content:center;gap:6px;flex-wrap:wrap;margin:-2px 0 10px}
.active-filters[hidden]{display:none}
.af-label{font-size:.6rem;color:var(--parchment-soft);text-transform:uppercase;letter-spacing:.08em}
.af-chip{display:inline-flex;align-items:center;gap:5px;font-size:.62rem;font-weight:700;letter-spacing:.02em;padding:3px 4px 3px 9px;border-radius:20px;
  border:1px solid var(--hex);color:var(--hex);background:rgba(55,182,166,.12);text-transform:uppercase}
.af-chip .af-x{width:15px;height:15px;display:grid;place-items:center;border-radius:50%;background:rgba(55,182,166,.25);color:#dff5f1;font-size:.62rem;line-height:1}
.af-chip:hover .af-x{background:var(--hex);color:var(--ink)}
.af-clear{font-size:.6rem;font-weight:700;text-transform:uppercase;letter-spacing:.04em;color:var(--parchment-soft);border:1px solid var(--line);border-radius:20px;padding:3px 9px;transition:.14s}
.af-clear:hover{border-color:var(--enemy);color:var(--enemy)}

.pool-frame-wrap{flex:1;min-height:0;display:grid;place-items:center;align-content:center;position:relative}
.pool-frame{position:relative;width:min(100%,56vh);aspect-ratio:1;max-width:540px;margin:auto}
.ring-svg{position:absolute;inset:-14px;width:calc(100% + 28px);height:calc(100% + 28px);z-index:3;pointer-events:none;filter:drop-shadow(0 0 20px rgba(202,161,74,.45))}
.ring-ticks-lg{animation:ringspin 100s linear infinite;transform-origin:50% 50%}
@keyframes ringspin{to{transform:rotate(360deg)}}
.pool-frame::after{content:"";position:absolute;inset:-4px;border-radius:50%;box-shadow:inset 0 0 26px rgba(0,0,0,.7),inset 0 0 0 5px rgba(10,20,16,.55),0 0 36px rgba(55,182,166,.14)}
.filigree{position:absolute;width:38px;height:38px;z-index:4;pointer-events:none}
.filigree::before{content:"";position:absolute;top:0;left:0;width:100%;height:2px;background:linear-gradient(90deg,var(--gold),transparent)}
.filigree::after{content:"";position:absolute;top:0;left:0;width:2px;height:100%;background:linear-gradient(180deg,var(--gold),transparent)}
.filigree--tl{top:-4px;left:-4px}.filigree--tr{top:-4px;right:-4px;transform:scaleX(-1)}
.filigree--bl{bottom:-4px;left:-4px;transform:scaleY(-1)}.filigree--br{bottom:-4px;right:-4px;transform:scale(-1,-1)}
.pool-grid{position:absolute;inset:15%;border-radius:20px;overflow-y:auto;overflow-x:hidden;z-index:2;padding:16px;
  display:grid;grid-template-columns:repeat(auto-fill,minmax(52px,1fr));gap:9px;align-content:start;justify-items:center;
  background:radial-gradient(circle at 50% 40%,rgba(18,40,32,.45),rgba(6,14,10,.7));
  -webkit-mask:linear-gradient(180deg,transparent 0,#000 7%,#000 93%,transparent 100%);mask:linear-gradient(180deg,transparent 0,#000 7%,#000 93%,transparent 100%);
  scrollbar-width:thin;scrollbar-color:var(--gold-dim) transparent}
.pool-grid::-webkit-scrollbar{width:8px}.pool-grid::-webkit-scrollbar-thumb{background:var(--gold-dim);border-radius:4px}.pool-grid::-webkit-scrollbar-thumb:hover{background:var(--gold)}
.pool-loading{grid-column:1/-1;align-self:center;text-align:center;color:var(--parchment);font-size:.82rem;padding:20px;text-shadow:0 1px 4px #000}
.roster-empty{position:absolute;bottom:2%;left:50%;transform:translateX(-50%);z-index:6;white-space:nowrap;background:rgba(6,14,8,.9);border:1px solid var(--gold);border-radius:20px;padding:5px 14px;font-size:.8rem;color:var(--parchment)}
/* clip-path chanfra os cantos e CORTA o box-shadow — então o realce é via BORDA (grossa), não sombra */
.champion-icon{position:relative;width:52px;height:52px;overflow:hidden;cursor:pointer;background:#0a120e;border:2px solid var(--line);transition:transform .14s,border-color .16s,border-width .12s;
  clip-path:polygon(7px 0,100% 0,100% calc(100% - 7px),calc(100% - 7px) 100%,0 100%,0 7px)}
.champion-icon img{width:100%;height:100%;object-fit:cover}
.champion-icon.has-guide{border-color:var(--gold)}
.champion-icon.no-guide{filter:grayscale(.55) brightness(.72)}
.champion-icon:hover,.champion-icon:focus-visible{transform:scale(1.18);z-index:5;outline:none;border-width:3px;border-color:var(--gold-hi)}
.champion-icon.selected{border-width:3px;border-color:var(--enemy);transform:scale(1.1);z-index:4}
.champion-icon.no-guide.selected{filter:none}
/* badge de "picado" (canto inferior-esquerdo, hextech dourado) — visível mesmo sem hover */
.champion-icon.selected::after{content:"\25B8";position:absolute;bottom:2px;left:2px;z-index:7;width:15px;height:15px;
  display:grid;place-items:center;border-radius:50%;font-size:.58rem;line-height:1;color:var(--ink);
  background:linear-gradient(180deg,var(--gold-hi),var(--gold));border:1px solid rgba(0,0,0,.55);box-shadow:0 1px 4px rgba(0,0,0,.6)}
/* PREVIEW: o pick pulsa chamando pra apertar Confirmar */
body[data-select="preview"] .champion-icon.selected{animation:pickPulse 1.3s ease-in-out infinite}
@keyframes pickPulse{0%,100%{border-color:var(--enemy)}50%{border-color:var(--gold-hi)}}
body[data-select="preview"] .champion-icon.selected::after{animation:pickBadge 1.3s ease-in-out infinite}
@keyframes pickBadge{50%{transform:scale(1.15)}}
/* CONFIRMADO: travado, firme (badge vira check dourado) */
body[data-select="confirmed"] .champion-icon.selected{border-width:3px;border-color:var(--gold);animation:none}
body[data-select="confirmed"] .champion-icon.selected::after{content:"\2713";background:linear-gradient(180deg,#f2ead2,var(--gold));animation:none;transform:none}
.champion-icon .guide-pip{position:absolute;top:3px;right:3px;width:6px;height:6px;border-radius:50%;background:var(--gold);box-shadow:0 0 5px var(--gold);display:none}
.champion-icon.has-guide .guide-pip{display:block}

/* ============================================================ DIREITA — inimigo + guia ============================================================ */
.guide-col{display:flex;flex-direction:column}
.guide-state{margin:auto;text-align:center;padding:26px}
.guide-none .enemy-mark{width:76px;height:76px;margin:0 auto 16px;border-radius:50%;display:grid;place-items:center;border:2px dashed rgba(200,69,60,.5);background:radial-gradient(circle,rgba(120,20,20,.3),rgba(20,6,6,.4))}
.guide-none .enemy-mark span{font-family:'Cinzel',serif;font-weight:800;font-size:1.4rem;color:rgba(255,110,110,.8)}
.empty-heading{font-family:'Cinzel',serif;font-size:1.4rem;color:var(--gold);text-transform:lowercase;letter-spacing:.02em;line-height:1.3}

/* visibilidade por estado */
.guide-none{display:none}
.enemy-wrap{display:none;flex-direction:column;height:100%}
body[data-select="none"] .guide-none{display:flex;flex-direction:column}
body[data-select="preview"] .enemy-wrap,body[data-select="confirmed"] .enemy-wrap{display:flex}

/* cabeçalho do inimigo */
.enemy-head{position:relative;overflow:hidden;flex:1;min-height:150px;transition:flex-basis .35s ease}
body[data-select="confirmed"] .enemy-head{flex:none;height:132px;min-height:132px}
/* #enSplash usa a LOADING ART (retrato); ancorar no rosto. Ajuste fácil aqui: */
.en-splash{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center 15%;opacity:0;transition:opacity .5s ease}
.en-splash.is-on{opacity:1}
.en-splash-veil{position:absolute;inset:0;background:linear-gradient(180deg,rgba(7,13,9,.15) 0%,transparent 24%,rgba(7,13,9,.62) 60%,rgba(7,13,9,.97) 100%)}
.en-nameplate{position:absolute;left:0;right:0;bottom:0;padding:12px 15px;z-index:2}
.en-title{font-family:'Cinzel',serif;font-size:.66rem;color:var(--enemy);letter-spacing:.12em;text-transform:uppercase;opacity:.95;margin-bottom:1px}
.en-name{font-family:'Cinzel',serif;font-weight:800;font-size:clamp(1.4rem,3.4vw,1.95rem);line-height:1;color:#fff;text-shadow:0 3px 14px rgba(0,0,0,.85)}
/* badges numa linha (clicáveis = filtro), cogumelos numa LINHA horizontal abaixo */
.en-badges{display:flex;gap:6px;flex-wrap:wrap;margin-top:9px}
.en-badges .badge{cursor:pointer;transition:transform .14s,filter .14s,box-shadow .14s;font-family:inherit}
.en-badges .badge:hover{transform:translateY(-1px);filter:brightness(1.08)}
.en-badges .badge.is-filter-active{box-shadow:0 0 0 2px var(--hex),0 0 10px rgba(55,182,166,.55)}
.en-shrooms{display:flex;margin-top:9px}
.en-shrooms span{display:inline-flex;gap:3px;align-items:center}
.en-shrooms img{width:18px;height:18px;filter:drop-shadow(0 1px 2px rgba(0,0,0,.6))}
.en-shrooms img.empty{filter:grayscale(1) brightness(.5);opacity:.3}
.badge{font-size:.62rem;font-weight:700;letter-spacing:.04em;text-transform:uppercase;padding:3px 8px;border-radius:5px;border:1px solid;line-height:1}
.badge--role{color:var(--ink);background:var(--gold);border-color:var(--gold)}
.badge--class{color:var(--parchment);border-color:var(--line);background:rgba(0,0,0,.35)}
.badge--dmg-ad{color:#f0b4b0;border-color:rgba(200,69,60,.6);background:rgba(200,69,60,.14)}
.badge--dmg-ap{color:#a7e6dd;border-color:var(--line-hex);background:rgba(55,182,166,.14)}
.badge--dmg-tank{color:var(--parchment);border-color:var(--line);background:rgba(0,0,0,.35)}
.en-tagline{margin-top:9px;color:var(--parchment);font-size:.86rem;font-weight:500;opacity:.94;border-left:3px solid var(--gold);padding-left:9px;line-height:1.4}
body[data-select="confirmed"] .en-tagline{display:none}
body[data-select="confirmed"] .en-badges{display:none}

/* confirmar */
.confirm-zone{display:none;flex:none;padding:14px 16px}
body[data-select="preview"] .confirm-zone{display:block}
.confirm-btn{width:100%;display:flex;align-items:center;gap:10px;padding:12px 16px;border-radius:9px;color:var(--ink);
  background:linear-gradient(180deg,var(--gold-hi),var(--gold) 60%,var(--gold-dim));
  clip-path:polygon(10px 0,100% 0,100% calc(100% - 10px),calc(100% - 10px) 100%,0 100%,0 10px);
  box-shadow:0 6px 18px rgba(0,0,0,.5);animation:lockPulse 1.5s ease-in-out infinite}
@keyframes lockPulse{0%,100%{box-shadow:0 6px 18px rgba(0,0,0,.5),0 0 0 0 rgba(240,207,135,.55)}50%{box-shadow:0 6px 22px rgba(0,0,0,.5),0 0 0 6px rgba(240,207,135,0)}}
.confirm-btn:hover{filter:brightness(1.06)}
.cb-glyph{font-size:1.2rem;line-height:1}
.cb-text{font-family:'Cinzel',serif;font-weight:800;font-size:1rem;letter-spacing:.06em;text-transform:uppercase}
.cb-sub{margin-left:auto;font-size:.62rem;font-weight:700;opacity:.7;text-transform:uppercase;letter-spacing:.05em}

/* guia */
.guide,.ingame{display:none}
body[data-select="confirmed"][data-mode="study"] .guide{display:flex}
body[data-select="confirmed"][data-mode="ingame"] .ingame{display:flex}
.reveal{animation:guideReveal .5s cubic-bezier(.2,.7,.3,1)}
@keyframes guideReveal{from{opacity:0;transform:translateY(8px) scale(.985);clip-path:inset(0 0 100% 0)}to{opacity:1;transform:none;clip-path:inset(0 0 0 0)}}
.guide{flex-direction:column;flex:1;min-height:0}
.guide-tabs{display:flex;gap:2px;padding:8px 8px 0;border-bottom:1px solid var(--line);flex:none}
.gtab{flex:1;font-weight:600;font-size:.68rem;letter-spacing:.005em;padding:9px 2px;color:var(--parchment-soft);border-bottom:2px solid transparent;transition:.14s;text-transform:uppercase;white-space:nowrap}
.gtab:hover{color:var(--parchment)}.gtab.is-active{color:var(--gold);border-bottom-color:var(--gold)}
.guide-body{flex:1;overflow-y:auto;padding:15px 17px;scrollbar-width:thin;scrollbar-color:var(--gold-dim) transparent}
.guide-body::-webkit-scrollbar{width:8px}.guide-body::-webkit-scrollbar-thumb{background:var(--gold-dim);border-radius:4px}
.g-eyebrow{font-family:'Cinzel',serif;font-size:.68rem;letter-spacing:.16em;text-transform:uppercase;color:var(--gold);opacity:.85;margin-bottom:12px;display:flex;align-items:center;gap:8px}
.g-eyebrow::after{content:"";flex:1;height:1px;background:linear-gradient(90deg,var(--line),transparent)}
.mu-list{list-style:none;display:flex;flex-direction:column;gap:9px}
.mu-list li{position:relative;padding-left:19px;color:var(--parchment);font-size:.9rem;line-height:1.5}
.mu-list li::before{content:"";position:absolute;left:2px;top:8px;width:7px;height:7px;transform:rotate(45deg);background:var(--gold)}
.mu-empty{color:var(--parchment-soft);font-size:.9rem}
.build-switch{display:flex;gap:4px;margin-bottom:15px;border:1px solid var(--line);border-radius:8px;padding:3px;background:rgba(0,0,0,.25);width:fit-content}
.build-switch button{font-size:.72rem;font-weight:600;padding:6px 12px;border-radius:6px;color:var(--parchment-soft);text-transform:uppercase;letter-spacing:.03em;transition:.14s}
.build-switch button.is-active{color:var(--ink);background:var(--gold);font-weight:700}
.item-track{display:flex;flex-wrap:wrap;gap:9px}
.item-cell{position:relative;width:54px;height:54px;flex:none}
.item-cell .seq{position:absolute;top:-6px;left:-6px;width:17px;height:17px;border-radius:50%;background:var(--slate);border:1px solid var(--gold);color:var(--gold);font-size:.6rem;font-weight:700;display:grid;place-items:center;z-index:2;font-variant-numeric:tabular-nums}
.item-cell img{width:100%;height:100%;object-fit:cover;border-radius:8px;background:#0a120e;border:1px solid var(--line);transition:transform .15s,box-shadow .2s}
.item-cell:hover img{transform:scale(1.08);box-shadow:0 0 12px rgba(202,161,74,.5)}
.first-buy{margin-top:14px;font-size:.78rem;color:var(--parchment-soft)}.first-buy b{color:var(--gold-hi)}
/* ---- página de runa (estilo cliente): árvore -> keystone em destaque -> linhas menores ---- */
.rune-page{display:flex;flex-direction:column;gap:12px}
.rune-tree{background:rgba(0,0,0,.2);border:1px solid var(--line-soft);border-radius:11px;padding:11px 10px 13px}
.rune-tree-head{display:flex;align-items:center;gap:9px;margin-bottom:6px;padding-bottom:9px;border-bottom:1px solid var(--line-soft)}
.rune-tree-head .rth-ic{width:26px;height:26px;object-fit:contain;flex:none}
.rune-tree-head .rth-dot{width:11px;height:11px;flex:none;transform:rotate(45deg);border:2px solid var(--gold);border-radius:2px}
.rune-tree-head.secondary .rth-dot{border-color:var(--hex)}
.rth-labels{display:flex;flex-direction:column;line-height:1.15}
.rth-kicker{font-family:'Cinzel',serif;font-size:.58rem;letter-spacing:.14em;text-transform:uppercase;color:var(--gold);opacity:.85}
.rune-tree-head.secondary .rth-kicker{color:var(--hex)}
.rth-name{font-size:.82rem;font-weight:700;color:#fff;letter-spacing:.02em}
.rune-slot{display:flex;justify-content:center;flex-wrap:wrap;gap:12px;margin-top:9px}
.rune-slot.keystones{gap:16px;margin-top:6px;margin-bottom:4px;padding-bottom:9px;border-bottom:1px dashed rgba(202,161,74,.18)}
.rune-cell{position:relative;cursor:default;line-height:0}
.rune-ic{width:32px;height:32px;border-radius:50%;object-fit:cover;background:#0a120e;border:1px solid var(--line);transition:transform .14s,box-shadow .18s,filter .18s}
.rune-cell.on .rune-ic{border-color:var(--gold);box-shadow:0 0 10px rgba(202,161,74,.45)}
.rune-cell.on.sec .rune-ic{border-color:var(--hex);box-shadow:0 0 10px rgba(55,182,166,.45)}
.rune-cell.dim .rune-ic{width:26px;height:26px;filter:grayscale(.75) brightness(.5);opacity:.5}
.rune-cell.ks .rune-ic{width:34px;height:34px}
.rune-cell.ks.on .rune-ic{width:56px;height:56px;border:2px solid var(--gold);box-shadow:0 0 16px rgba(202,161,74,.55)}
.rune-cell.ks.dim .rune-ic{width:34px;height:34px;filter:grayscale(.75) brightness(.5);opacity:.5}
.rune-cell:hover .rune-ic{transform:scale(1.12);filter:none;opacity:1}
.shard-block .shard-row{display:flex;justify-content:center;gap:14px;margin-top:9px}
.shard-cell{cursor:default;line-height:0}
.shard-ic{width:26px;height:26px;border-radius:50%;object-fit:cover;background:#0a120e;border:1px solid var(--line);transition:transform .14s,box-shadow .18s,filter .18s}
.shard-cell.on .shard-ic{border-color:var(--gold);box-shadow:0 0 8px rgba(202,161,74,.45)}
.shard-cell.dim .shard-ic{filter:grayscale(.75) brightness(.5);opacity:.5;width:22px;height:22px}
.shard-cell:hover .shard-ic{transform:scale(1.12);filter:none;opacity:1}
.cd-list{display:flex;flex-direction:column;gap:8px}
.cd-row{display:grid;grid-template-columns:42px 1fr auto;align-items:center;gap:11px;padding:8px 12px;border-radius:9px;background:rgba(0,0,0,.28);border:1px solid var(--line-soft)}
.cd-row img{width:40px;height:40px;border-radius:8px;object-fit:cover;border:1px solid var(--line)}
.cd-slot{display:inline-grid;place-items:center;width:21px;height:21px;border-radius:5px;background:var(--gold);color:var(--ink);font-family:'Cinzel',serif;font-weight:800;font-size:.8rem}
.cd-info{display:flex;flex-direction:column;gap:1px;min-width:0}
.cd-name{font-size:.82rem;color:var(--parchment);font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;display:flex;align-items:center;gap:6px}
.cd-sub{font-size:.64rem;color:var(--parchment-soft)}
.cd-val{font-size:1.1rem;font-weight:700;color:var(--gold-hi);font-variant-numeric:tabular-nums;white-space:nowrap}
.cd-note{margin-top:14px;font-size:.82rem;color:var(--parchment-soft);border-left:3px solid var(--hex);padding-left:10px;line-height:1.5}
.cd-fallback{color:var(--parchment-soft);font-size:.88rem;line-height:1.5}
/* IN-GAME */
.ingame{flex-direction:column;flex:1;min-height:0;overflow-y:auto;padding:14px 16px;gap:14px;background:radial-gradient(120% 60% at 50% 0%,rgba(200,69,60,.08),transparent 60%);scrollbar-width:thin;scrollbar-color:var(--gold-dim) transparent}
.ig-head{display:flex;align-items:center;gap:10px}
.ig-name{font-family:'Cinzel',serif;font-weight:800;font-size:1.35rem;color:#fff;line-height:1}
.ig-role{font-size:.64rem;font-weight:700;color:var(--ink);background:var(--gold);padding:3px 8px;border-radius:5px;text-transform:uppercase}
.ig-shrooms{display:inline-flex;gap:2px;margin-left:auto}.ig-shrooms img{width:16px;height:16px}.ig-shrooms img.empty{filter:grayscale(1) brightness(.5);opacity:.3}
.ig-eyebrow{font-size:.62rem;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--enemy);margin-bottom:6px}
.ig-cds{display:grid;grid-template-columns:repeat(4,1fr);gap:8px}
.ig-cd{display:flex;flex-direction:column;align-items:center;gap:4px;padding:10px 4px;border-radius:10px;background:rgba(200,69,60,.1);border:1px solid rgba(200,69,60,.35)}
.igc-slot{font-family:'Cinzel',serif;font-weight:800;font-size:1rem;color:var(--enemy)}
.ig-cd img{width:32px;height:32px;border-radius:7px;object-fit:cover;border:1px solid rgba(200,69,60,.4)}
.igc-val{font-size:1.5rem;font-weight:700;color:#fff;font-variant-numeric:tabular-nums;line-height:1}
.igc-unit{font-size:.58rem;color:var(--parchment-soft);text-align:center;line-height:1.1}
.ig-essentials{display:flex;gap:10px;flex-wrap:wrap}
.ig-slot{display:flex;flex-direction:column;align-items:center;gap:4px;min-width:52px}
.igs-label{font-size:.54rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--parchment-soft)}
.ig-slot img{width:42px;height:42px;border-radius:8px;object-fit:cover;border:1px solid var(--line);background:#0a120e}.ig-slot .ig-rune{border-radius:50%}
.ig-tips{list-style:none;display:flex;flex-direction:column;gap:7px}
.ig-tips li{position:relative;padding-left:17px;font-size:.86rem;line-height:1.45;color:var(--parchment)}
.ig-tips li::before{content:"›";position:absolute;left:2px;top:0;color:var(--enemy);font-weight:700}
.ig-empty{color:var(--parchment-soft);font-size:.9rem}

/* ============================================================ BOTTOM BAR (skins do Teemo) ============================================================ */
.bottombar{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:12px;border:1px solid var(--line);border-radius:12px;padding:8px 12px;background:linear-gradient(180deg,rgba(17,26,22,.7),rgba(13,21,18,.7))}
.chat-hook{display:flex;align-items:center;gap:8px;min-width:150px;padding:8px 12px;border-radius:7px;border:1px dashed var(--line-hex);color:var(--hex);font-size:.76rem;cursor:default;opacity:.85;font-weight:600;text-transform:uppercase;letter-spacing:.04em}
.chat-caret{color:var(--hex)}
.skins{display:flex;align-items:center;gap:8px;min-width:0}
.skin-arrow{width:30px;height:30px;flex:none;border-radius:50%;border:1px solid var(--gold);color:var(--gold);font-size:1.2rem;line-height:1;transition:.16s}
.skin-arrow:hover{background:var(--gold);color:var(--ink)}
.skin-viewport{flex:1;min-width:0;overflow-x:auto;overflow-y:hidden;scroll-snap-type:x proximity;scrollbar-width:none;-ms-overflow-style:none;overscroll-behavior-x:contain;
  -webkit-mask:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent);mask:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent)}
.skin-viewport::-webkit-scrollbar{display:none}
.skin-track{display:flex;gap:8px;padding:2px 4px}
.skin-track img{pointer-events:none;-webkit-user-drag:none}
.skin-thumb{flex:none;width:96px;height:44px;border-radius:6px;overflow:hidden;cursor:pointer;border:1px solid var(--line);opacity:.65;transition:.15s;position:relative;scroll-snap-align:center}
.skin-thumb img{width:100%;height:100%;object-fit:cover;object-position:center 22%}
.skin-thumb .st-name{position:absolute;left:0;right:0;bottom:0;font-size:.54rem;color:#fff;text-align:center;padding:1px;background:linear-gradient(180deg,transparent,rgba(0,0,0,.85));white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.skin-thumb:hover{opacity:1}
.skin-thumb.is-active{opacity:1;border-color:var(--hex);box-shadow:0 0 10px rgba(55,182,166,.4)}
.skin-dots{display:none} /* scroll nativo agora: sem paginação por bolinhas (não escala pra 63 skins) */
.quit-hook{flex:none;padding:8px 18px;border-radius:7px;border:1px solid var(--line);color:var(--parchment-soft);font-weight:700;font-size:.78rem;letter-spacing:.06em;transition:.14s}
.quit-hook:hover{border-color:var(--enemy);color:var(--enemy)}

/* ============================================================ VS LOCK-IN OVERLAY ============================================================ */
.vs-overlay{position:fixed;inset:0;z-index:9998;opacity:0;pointer-events:none;transition:opacity .3s}
.vs-overlay[hidden]{display:none}
.vs-overlay.show{opacity:1;pointer-events:auto}
.vs-overlay::before{content:"";position:absolute;inset:0;background:radial-gradient(circle at 50% 50%,rgba(240,207,135,.55),transparent 62%);opacity:0;z-index:2;pointer-events:none}
.vs-overlay.enter::before{animation:vsFlash .6s ease-out}
@keyframes vsFlash{0%{opacity:0}28%{opacity:.9}100%{opacity:0}}
.vs-half{position:absolute;inset:0;overflow:hidden;will-change:transform;transition:transform .8s cubic-bezier(.7,0,.25,1)}
/* fundo borrado = o splash do próprio campeão (preenche as laterais, na cor dele) */
.vs-half::before{content:"";position:absolute;inset:0;z-index:0;background-image:var(--vs-bg);background-size:cover;background-position:center 20%;filter:blur(30px) saturate(1.2) brightness(.5);transform:scale(1.18)}
/* retrato num card emoldurado, centrado (loading art = retrato, cover sem distorcer) */
.vs-half img{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:min(82%,320px);aspect-ratio:308/560;max-height:88%;object-fit:cover;object-position:center;
  border-radius:11px;z-index:1;border:2px solid var(--gold);box-shadow:0 16px 48px rgba(0,0,0,.6)}
.vs-you img{box-shadow:0 16px 48px rgba(0,0,0,.6),0 0 34px rgba(55,182,166,.55)}
.vs-enemy img{box-shadow:0 16px 48px rgba(0,0,0,.6),0 0 34px rgba(200,69,60,.55)}
.vs-half .vs-label{position:absolute;font-family:'Cinzel',serif;font-weight:800;font-size:clamp(1.4rem,4vw,2.6rem);letter-spacing:.08em;text-transform:uppercase;color:#fff;text-shadow:0 3px 18px #000;z-index:2}
.vs-you{right:auto;width:50%;background:linear-gradient(160deg,#0e1c17,#0a120e)}
.vs-you::after{content:"";position:absolute;inset:0;background:linear-gradient(135deg,rgba(55,182,166,.18),transparent 55%),linear-gradient(180deg,transparent,rgba(7,13,9,.4))}
.vs-you .vs-label{top:16%;left:9%;color:#bff0e8}
.vs-enemy{left:auto;width:50%;background:linear-gradient(200deg,#1c0e0e,#160a0a)}
.vs-enemy::after{content:"";position:absolute;inset:0;background:linear-gradient(315deg,rgba(200,69,60,.22),transparent 55%),linear-gradient(0deg,transparent,rgba(7,13,9,.4))}
.vs-enemy .vs-label{bottom:15%;right:9%;color:#f3b6b1;text-align:right}
.vs-overlay.enter .vs-half{animation:vsSlam .5s cubic-bezier(.2,.85,.25,1)}
@keyframes vsSlam{0%{transform:scale(1.14);opacity:0}60%{opacity:1}100%{transform:scale(1);opacity:1}}
.vs-overlay.open .vs-you{transform:translateX(-102%)}
.vs-overlay.open .vs-enemy{transform:translateX(102%)}
.vs-seal{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%) rotate(-8deg);z-index:3;width:124px;height:124px;display:grid;place-items:center;border-radius:50%;
  background:radial-gradient(circle,#1a130a,#0a0805);border:3px solid var(--gold);box-shadow:0 0 30px rgba(240,207,135,.6),inset 0 0 22px rgba(0,0,0,.6);transition:opacity .35s,transform .35s}
.vs-seal span{font-family:'Cinzel',serif;font-weight:800;font-size:2.7rem;color:var(--gold-hi);letter-spacing:.04em;text-shadow:0 2px 8px #000}
.vs-overlay.show .vs-seal{animation:vsPulse 1s ease-in-out infinite}
.vs-overlay.open .vs-seal{opacity:0;transform:translate(-50%,-50%) rotate(-8deg) scale(1.5);animation:none}
@keyframes vsPulse{0%,100%{box-shadow:0 0 28px rgba(240,207,135,.5),inset 0 0 22px rgba(0,0,0,.6)}50%{box-shadow:0 0 48px rgba(240,207,135,.95),inset 0 0 22px rgba(0,0,0,.6)}}

/* ============================================================ FLOATING + FOOTER + easter egg ============================================================ */
.mini-card{position:fixed;z-index:200;width:220px;pointer-events:none;background:linear-gradient(180deg,#12201b,#0b1512);border:1px solid var(--gold);border-radius:10px;box-shadow:0 14px 40px rgba(0,0,0,.6);overflow:hidden;opacity:0;transform:translateY(4px);transition:opacity .12s,transform .12s}
.mini-card.show{opacity:1;transform:translateY(0)}
.mc-splash{height:86px;position:relative;background:#0a120e}
.mc-splash img{width:100%;height:100%;object-fit:cover;object-position:center 22%}
.mc-splash::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 40%,rgba(11,21,18,.95))}
.mc-body{padding:8px 12px 12px;margin-top:-24px;position:relative;z-index:2}
.mc-name{font-family:'Cinzel',serif;font-weight:700;font-size:1.05rem;color:#fff}
.mc-title{font-size:.66rem;color:var(--gold);text-transform:uppercase;letter-spacing:.06em;margin-bottom:6px}
.mc-meta{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.mc-shrooms{display:inline-flex;gap:2px}.mc-shrooms img{width:14px;height:14px}.mc-shrooms img.empty{filter:grayscale(1) brightness(.5);opacity:.3}
.mc-tags{font-size:.66rem;color:var(--parchment-soft)}
.mc-tagline{font-size:.72rem;color:var(--parchment);margin-top:6px;line-height:1.4;opacity:.9}
.mc-noguide{font-size:.66rem;color:var(--enemy);margin-top:6px;font-weight:600}
.tip{position:fixed;z-index:210;max-width:280px;pointer-events:none;background:linear-gradient(180deg,#0e1a15,#0a1310);border:1px solid var(--gold);border-radius:9px;padding:8px 11px;box-shadow:0 12px 34px rgba(0,0,0,.65),0 0 14px rgba(202,161,74,.12);opacity:0;transition:opacity .1s}
.tip.show{opacity:1}
.tip .tip-name{font-weight:700;font-size:.82rem;color:var(--gold-hi);line-height:1.25}
.tip .tip-detail{font-size:.72rem;color:var(--hex);font-weight:600;margin-top:2px;line-height:1.35}
.tip .tip-desc{font-size:.74rem;color:var(--parchment);margin-top:5px;line-height:1.45;white-space:normal;word-break:break-word}
.site-footer{min-height:var(--footer-h);display:flex;align-items:center;justify-content:center;flex-wrap:wrap;gap:10px 16px;padding:18px 18px calc(22px + env(safe-area-inset-bottom));border-top:1px solid var(--line-soft)}
.made-by{font-size:.76rem;color:var(--parchment-soft)}.made-by a{color:var(--gold);font-weight:600}.made-by a:hover{text-decoration:underline}
#malphite-modal{position:fixed;inset:0;z-index:9999;background:rgba(0,0,0,.94);display:grid;place-items:center;animation:fadein .2s}
#malphite-modal img{width:min(90vw,720px);height:auto;max-height:92vh;border-radius:12px;box-shadow:0 0 60px rgba(240,207,135,.7);animation:pop .25s cubic-bezier(.2,1.3,.4,1)}
@keyframes pop{from{transform:scale(.6);opacity:0}to{transform:scale(1);opacity:1}}
@keyframes fadein{from{opacity:0}to{opacity:1}}

/* ============================================================ RESPONSIVO ============================================================ */
@media (max-width:1180px){.stage{grid-template-columns:260px minmax(0,1fr) 320px}}
@media (max-width:960px){
  .stage{height:auto;grid-template-columns:1fr;grid-template-areas:"center" "you" "guide" "bottom";gap:12px}
  .pool-frame{width:min(86vw,420px)}
  .you-col{min-height:380px}
  .guide-col{min-height:480px}
  body[data-select="confirmed"] .enemy-head{height:150px}
  .guide-body,.ingame{max-height:60vh}
}
@media (max-width:720px){
  /* header numa linha só: brand + hamburger. O resto vira dropdown. */
  .site-header{padding:9px 12px;gap:8px}
  .hamburger{display:flex}
  .header-menu{display:none;position:absolute;top:100%;left:8px;right:8px;flex-direction:column;align-items:stretch;gap:12px;
    padding:14px;background:linear-gradient(180deg,rgba(10,18,12,.98),rgba(7,13,9,.99));border:1px solid var(--line);border-top:0;
    border-radius:0 0 12px 12px;box-shadow:0 18px 40px rgba(0,0,0,.55);z-index:60}
  .header-menu.open{display:flex}
  .header-menu .socials{margin-left:0;justify-content:center;flex-wrap:wrap}
  .header-menu .header-actions{margin-left:0;flex-direction:column;align-items:stretch;gap:8px}
  .header-menu .header-actions .btn-hex{justify-content:center;padding:11px}
  .header-menu .mode-toggle{align-self:center}
  .header-menu .window-chrome{justify-content:center;gap:8px}
  .header-menu .chrome-btn{width:34px;height:34px}
  .bottombar{grid-template-columns:1fr;gap:8px}.chat-hook,.quit-hook{display:none}
  .ig-cds{grid-template-columns:repeat(2,1fr)}
}
@media (prefers-reduced-motion:reduce){*{scroll-behavior:auto;animation:none !important;transition:none !important}}

/* ============================================================ PASS DE FUNCIONALIDADE ============================================================ */
/* favoritos (estrela no ícone) */
.fav-star{position:absolute;top:1px;left:1px;z-index:6;width:18px;height:18px;line-height:1;display:grid;place-items:center;
  font-size:.82rem;color:var(--gold-hi);text-shadow:0 1px 3px #000;opacity:0;transition:opacity .12s,transform .12s}
.fav-star::before{content:"\2606"}                 /* estrela vazia */
.fav-star.is-fav::before{content:"\2605"}          /* estrela cheia */
.fav-star.is-fav{opacity:1}
.champion-icon:hover .fav-star,.champion-icon:focus-within .fav-star,.fav-star:focus-visible{opacity:1}
.fav-star:hover{transform:scale(1.18);color:#fff}

/* chat-hook pulse ao clicar */
.skins.pulse{animation:skinPulse 1.3s ease-out}
@keyframes skinPulse{0%{box-shadow:0 0 0 0 rgba(55,182,166,.5)}100%{box-shadow:0 0 0 14px rgba(55,182,166,0)}}
.chat-hook{cursor:pointer}
.chat-hook:hover{opacity:1;border-color:var(--hex)}

/* copiar build/runas */
.g-head{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:12px}
.g-head .g-t{font-family:'Cinzel',serif;font-size:.68rem;letter-spacing:.16em;text-transform:uppercase;color:var(--gold);opacity:.85}
.copy-btn{flex:none;font-size:.64rem;font-weight:700;text-transform:uppercase;letter-spacing:.04em;padding:5px 10px;border-radius:6px;border:1px solid var(--line-hex);color:var(--hex);background:rgba(55,182,166,.08);transition:.14s}
.copy-btn:hover{background:var(--hex);color:var(--ink);border-color:var(--hex)}
.copy-btn.copied{background:var(--hex);color:var(--ink);border-color:var(--hex)}

/* recolher/expandir o painel do guia */
.guide-reopen{display:none;position:absolute;inset:0;z-index:3;place-items:center;background:linear-gradient(180deg,rgba(17,26,22,.9),rgba(13,21,18,.9))}
.guide-reopen span{font-family:'Cinzel',serif;font-weight:800;font-size:.8rem;letter-spacing:.24em;text-transform:uppercase;color:var(--gold);writing-mode:vertical-rl;transform:rotate(180deg)}
.guide-reopen:hover{background:rgba(202,161,74,.12)}
body[data-guide="collapsed"] .stage{grid-template-columns:300px minmax(0,1fr) 46px}
body[data-guide="collapsed"] .guide-col > .guide-state,
body[data-guide="collapsed"] .guide-col > .enemy-wrap{visibility:hidden}
body[data-guide="collapsed"] .guide-reopen{display:grid}

/* modais */
.modal{position:fixed;inset:0;z-index:9000;display:grid;place-items:center;opacity:0;transition:opacity .18s}
.modal[hidden]{display:none}
.modal.show{opacity:1}
.modal-backdrop{position:absolute;inset:0;background:rgba(0,0,0,.72);-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px)}
.modal-box{position:relative;width:min(440px,92vw);background:linear-gradient(180deg,#13211c,#0b1512);border:1px solid var(--gold);border-radius:14px;
  padding:22px 22px 20px;box-shadow:0 24px 70px rgba(0,0,0,.7),0 0 24px rgba(202,161,74,.2);transform:translateY(8px);transition:transform .2s}
.modal.show .modal-box{transform:none}
.modal-x{position:absolute;top:12px;right:12px;width:28px;height:28px;border-radius:7px;border:1px solid var(--line);color:var(--parchment-soft);font-size:.78rem}
.modal-x:hover{color:var(--enemy);border-color:var(--enemy)}
.modal-title{font-family:'Cinzel',serif;color:var(--gold);font-size:1.3rem;letter-spacing:.03em;margin-bottom:14px;text-transform:lowercase}
.modal-body{color:var(--parchment);font-size:.92rem;line-height:1.6}
.modal-body p{margin-bottom:10px}
.modal-body b{color:var(--gold-hi)}
.help-steps{list-style:none;counter-reset:h;display:flex;flex-direction:column;gap:8px;margin:4px 0 12px}
.help-steps li{position:relative;padding-left:30px;counter-increment:h}
.help-steps li::before{content:counter(h);position:absolute;left:0;top:-1px;width:20px;height:20px;border-radius:50%;background:var(--gold);color:var(--ink);font-weight:800;font-size:.72rem;display:grid;place-items:center}
.set-row{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:11px 0;border-bottom:1px solid var(--line-soft)}
.set-row:last-child{border-bottom:0}
.set-k{font-weight:600;color:var(--parchment-soft);text-transform:uppercase;font-size:.72rem;letter-spacing:.08em}
.set-v{font-weight:600;color:var(--parchment);font-variant-numeric:tabular-nums}
.set-note{color:var(--parchment-soft);font-weight:400;font-size:.72rem}
.set-row--off{opacity:.55}
.set-toggle{padding:6px 14px;border-radius:20px;border:1px solid var(--gold);color:var(--gold);font-weight:700;font-size:.74rem;text-transform:uppercase;letter-spacing:.04em;transition:.14s}
.set-toggle:hover{background:rgba(202,161,74,.14)}

/* ============================================================ TAB VÍDEOS (facade leve do YouTube) ============================================================ */
.vid-list{display:flex;flex-direction:column;gap:14px}
.vid-facade{position:relative;width:100%;aspect-ratio:16/9;border-radius:10px;overflow:hidden;cursor:pointer;
  border:1px solid var(--line);background:#0a120e;transition:border-color .15s,box-shadow .15s}
.vid-facade:hover,.vid-facade:focus-visible{border-color:var(--gold);box-shadow:0 0 16px rgba(202,161,74,.35);outline:none}
.vid-thumb{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.vid-facade::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(7,13,9,.05) 40%,rgba(7,13,9,.8));pointer-events:none;z-index:1}
.vid-play{position:absolute;left:50%;top:46%;transform:translate(-50%,-50%);z-index:2;width:54px;height:54px;border-radius:50%;display:grid;place-items:center;
  background:linear-gradient(180deg,var(--gold-hi),var(--gold) 60%,var(--gold-dim));border:2px solid rgba(255,255,255,.18);
  box-shadow:0 4px 18px rgba(0,0,0,.6),0 0 22px rgba(202,161,74,.5);transition:transform .15s}
.vid-facade:hover .vid-play{transform:translate(-50%,-50%) scale(1.08)}
.vid-play svg{width:24px;height:24px;fill:var(--ink);margin-left:3px}
.vid-title{position:absolute;left:0;right:0;bottom:0;z-index:2;padding:9px 12px;font-size:.82rem;font-weight:600;color:#fff;line-height:1.3;
  text-shadow:0 1px 4px #000;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.vid-facade.playing{cursor:default;border-color:var(--gold)}
.vid-facade.playing::after,.vid-facade.playing .vid-play,.vid-facade.playing .vid-title,.vid-facade.playing .vid-thumb{display:none}
.vid-facade iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.vid-channel{display:inline-block;margin-top:14px;font-size:.78rem;font-weight:600;color:var(--hex);border-bottom:1px solid transparent;transition:.14s}
.vid-channel:hover{border-bottom-color:var(--hex)}
.vid-empty{color:var(--parchment-soft);font-size:.9rem;line-height:1.5}

/* ============================================================ TEMA CLARO (opcional) ============================================================ */
body[data-theme="light"]{
  --void:#efe7d4; --slate:#f6efdb; --slate-2:#eae1c9;
  --parchment:#2c2214; --parchment-soft:#6f6249;
  --gold:#9a7a2c; --gold-hi:#7c5f1f; --gold-dim:#b9932f;
  --hex:#1a8074; --hex-dim:#0f4a43;
  --line:rgba(138,111,48,.42); --line-soft:rgba(138,111,48,.2); --line-hex:rgba(26,128,116,.4);
}
body[data-theme="light"] .backdrop{background:radial-gradient(120% 80% at 50% -10%,#f5eed9,#e9dfc4 45%,#ddd0b1)}
body[data-theme="light"] .backdrop::before{opacity:.08}
body[data-theme="light"] .you-col,body[data-theme="light"] .center,body[data-theme="light"] .guide-col,body[data-theme="light"] .bottombar{background:linear-gradient(180deg,rgba(252,247,233,.94),rgba(244,236,216,.94))}
body[data-theme="light"] .site-header{background:linear-gradient(180deg,rgba(250,244,228,.96),rgba(250,244,228,.72))}
body[data-theme="light"] .pool-grid{background:radial-gradient(circle at 50% 34%,rgba(226,215,187,.7),rgba(206,193,162,.6))}
body[data-theme="light"] .champion-icon,body[data-theme="light"] .rune,body[data-theme="light"] .shard,body[data-theme="light"] .item-cell img,body[data-theme="light"] .cd-row img,body[data-theme="light"] .spell-card img,body[data-theme="light"] .setup-slot img,body[data-theme="light"] .lo-spell,body[data-theme="light"] .ig-slot img{background:#efe7d4}
body[data-theme="light"] .cd-row{background:rgba(230,220,195,.55)}
body[data-theme="light"] .modal-box,body[data-theme="light"] .mini-card{background:linear-gradient(180deg,#fbf6e8,#f3ecd6)}
body[data-theme="light"] .empty-heading,body[data-theme="light"] .lo-name,body[data-theme="light"] .en-name,body[data-theme="light"] .ig-name{color:#3a2c17}
body[data-theme="light"] .gtab.is-active{color:var(--gold);border-bottom-color:var(--gold)}
/* superfícies interativas: fundo claro (corrige os blocos escuros hardcoded) */
body[data-theme="light"] .socials a,
body[data-theme="light"] .btn-hex--live,
body[data-theme="light"] .mode-toggle,
body[data-theme="light"] .chrome-btn,
body[data-theme="light"] .hamburger,
body[data-theme="light"] .diff-btn,
body[data-theme="light"] .chip,
body[data-theme="light"] .class-chip,
body[data-theme="light"] .sort-wrap,
body[data-theme="light"] .build-switch,
body[data-theme="light"] .rune-tree,
body[data-theme="light"] .badge--class,
body[data-theme="light"] .badge--dmg-tank{background:rgba(255,255,255,.6);border-color:var(--line)}
body[data-theme="light"] .socials a:hover{background:var(--gold);color:#fff}
body[data-theme="light"] .hamburger span{background:var(--parchment)}
/* inputs / busca / selects */
body[data-theme="light"] .pool-search,
body[data-theme="light"] .pool-search input,
body[data-theme="light"] .sort-select,
body[data-theme="light"] .sort-select option,
body[data-theme="light"] input,
body[data-theme="light"] select,
body[data-theme="light"] textarea{background:#fdfaf0;color:var(--parchment)}
body[data-theme="light"] ::placeholder{color:var(--parchment-soft)}
/* dropdown do header (mobile) claro */
body[data-theme="light"] .header-menu{background:linear-gradient(180deg,#fbf6e8,#f3ecd6)}
/* fundos de imagem (ícones/runas/itens/spells) claros */
body[data-theme="light"] .setup-slot img,
body[data-theme="light"] .rune-ic,
body[data-theme="light"] .shard-ic,
body[data-theme="light"] .vs-you,
body[data-theme="light"] .mc-splash,
body[data-theme="light"] .champion-info .guide-portrait,
body[data-theme="light"] .champion-info .item,
body[data-theme="light"] .champion-info .item-alternativo,
body[data-theme="light"] .champion-info .runa-menor,
body[data-theme="light"] .champion-info .shard,
body[data-theme="light"] .champion-info .cd-ability img{background:#e6dcc3}
/* botões/chips dourados: gradiente VIVO no claro (o gold-hi ficou escuro p/ texto) */
body[data-theme="light"] .btn-hex--gold,
body[data-theme="light"] .confirm-btn,
body[data-theme="light"] .chip.is-active,
body[data-theme="light"] .diff-btn.is-active{background:linear-gradient(180deg,#f2d489,#caa14a 60%,#b08a34);color:#3a2c17}
/* backdrop do modal um pouco mais suave no claro */
body[data-theme="light"] .modal-backdrop{background:rgba(60,44,23,.5)}

/* ============================================================
   GUIA §3 — usado só pelo PREVIEW do painel (admin/ importa este CSS).
   Escopado em .champion-info; a home não tem esse nó, então não afeta.
   ============================================================ */
.champion-info{max-width:900px;margin:34px auto;background:rgba(20,20,20,.9);padding:25px;border-radius:12px;border:2px solid var(--gold);box-shadow:0 0 20px rgba(255,215,0,.5)}
.champion-info .guide-head{display:flex;justify-content:center;margin-bottom:10px}
.champion-info .guide-portrait{width:104px;height:104px;border-radius:50%;object-fit:cover;border:3px solid var(--gold);background:#0a120e;box-shadow:0 0 0 3px rgba(0,0,0,.6),0 0 22px rgba(255,215,0,.5)}
.champion-info h2{text-align:center;font-family:'Cinzel',serif;font-size:28px;font-weight:700;text-transform:uppercase;color:var(--gold);margin-bottom:6px;text-shadow:2px 2px 5px rgba(0,0,0,.5)}
.champion-info .guide-sub{font-family:'Barlow Semi Condensed',sans-serif;text-align:center;color:var(--parchment-soft);font-size:.85rem;letter-spacing:.06em;text-transform:uppercase;margin-bottom:22px}
.champion-info .guide-sub b{color:var(--gold-hi)}
.champion-info .matchup,.champion-info .spells,.champion-info .build,.champion-info .runas,.champion-info .cooldowns{margin-bottom:20px;padding:15px;border-radius:8px;background:rgba(50,50,50,.5);border-left:4px solid var(--gold)}
.champion-info .matchup h3,.champion-info .spells h3,.champion-info .build h3,.champion-info .runas h3,.champion-info .cooldowns h3{font-family:'Barlow Semi Condensed',sans-serif;font-size:2.2em;font-weight:700;color:var(--gold);border-bottom:2px solid var(--gold);padding-bottom:5px;margin-bottom:12px;text-align:center}
.champion-info .matchup ul{list-style:none;max-width:760px;margin:0 auto}
.champion-info .matchup li{font-family:'Barlow Semi Condensed',sans-serif;color:#fff;font-size:.98rem;line-height:1.6;padding:7px 0 7px 22px;position:relative;border-bottom:1px solid rgba(202,161,74,.12)}
.champion-info .matchup li:last-child{border-bottom:0}
.champion-info .matchup li::before{content:"";position:absolute;left:2px;top:14px;width:8px;height:8px;transform:rotate(45deg);background:var(--gold)}
.champion-info .spells{text-align:center}
.champion-info .spells .spell-row{display:flex;justify-content:center;gap:26px;flex-wrap:wrap}
.champion-info .spell-slot{display:flex;flex-direction:column;align-items:center;gap:5px}
.champion-info .spell{width:64px;height:64px;border-radius:8px;object-fit:cover;border:1px solid var(--line)}
.champion-info .spell-name{font-family:'Barlow Semi Condensed',sans-serif;font-size:.72rem;color:var(--parchment);max-width:80px}
.champion-info .spell-cd{font-family:'Barlow Semi Condensed',sans-serif;font-size:.68rem;color:#bbb}
.champion-info .build{text-align:center}
.champion-info .build-principal,.champion-info .build-alternativa{text-align:center;margin-top:12px}
.champion-info .build-principal h4,.champion-info .build-alternativa h4{color:var(--gold-hi);font-family:'Barlow Semi Condensed',sans-serif;font-size:1.2em;font-weight:700;margin:0 0 12px;text-align:center}
.champion-info .build-alternativa{margin-top:22px;padding-top:18px;border-top:1px solid rgba(202,161,74,.45)}
.champion-info .build-items{display:flex;flex-wrap:wrap;justify-content:center;gap:10px}
.champion-info .item,.champion-info .item-alternativo{width:64px;height:64px;border-radius:8px;object-fit:cover;background:#0a120e;border:1px solid var(--line-soft)}
.champion-info .runas{text-align:center}
.champion-info .runas-cols{display:flex;flex-wrap:wrap;justify-content:center;gap:26px}
.champion-info .runa-col h4{color:var(--gold-hi);font-family:'Barlow Semi Condensed',sans-serif;font-size:1.15em;font-weight:700;margin:0 0 12px}
.champion-info .runa-tree-name{font-family:'Barlow Semi Condensed',sans-serif;font-size:.72rem;color:var(--parchment-soft);text-transform:uppercase;letter-spacing:.05em;margin-top:6px}
.champion-info .runa-stack{display:flex;flex-direction:column;align-items:center;gap:10px}
.champion-info .runa-menor{width:52px;height:52px;border-radius:50%;object-fit:cover;background:#0a120e;border:1px solid var(--line-soft)}
.champion-info .runa.keystone .runa-menor{width:72px;height:72px;border:2px solid var(--gold);box-shadow:0 0 14px rgba(255,215,0,.5)}
.champion-info .shards-row{display:flex;justify-content:center;gap:10px}
.champion-info .shard{width:34px;height:34px;border-radius:50%;object-fit:cover;background:#0a120e;border:1px solid var(--line-soft)}
.champion-info .cooldowns p{font-family:'Barlow Semi Condensed',sans-serif;font-size:14px;color:#bbb;text-align:center}
.champion-info .cd-grid{display:flex;flex-wrap:wrap;justify-content:center;gap:12px;margin-bottom:10px}
.champion-info .cd-ability{display:flex;flex-direction:column;align-items:center;gap:5px;min-width:74px}
.champion-info .cd-ability img{width:52px;height:52px;border-radius:8px;object-fit:cover;background:#0a120e;border:1px solid var(--line)}
.champion-info .cd-slot{font-family:'Cinzel',serif;font-weight:700;color:var(--gold);font-size:.9rem}
.champion-info .cd-val{font-family:'Barlow Semi Condensed',sans-serif;font-size:.72rem;color:var(--parchment)}
.champion-info .cd-name{font-family:'Barlow Semi Condensed',sans-serif;font-size:.66rem;color:#999;max-width:82px;text-align:center}
.champion-info .cd-note{margin-top:6px}
.champion-info .empty-guide{text-align:center;padding:40px 10px}
.champion-info .empty-guide .empty-heading{font-family:'Cinzel',serif;font-size:1.8rem;color:var(--gold);text-transform:lowercase}

/* ============================================================
   Filtro de classe (tags no topo do pool) + slider de volume
   ============================================================ */
.class-filters{display:flex;flex-wrap:wrap;gap:6px;justify-content:center;margin:2px auto 8px;padding:0 4px;max-width:640px;min-height:25px}
/* reserva a 2a linha de chips no mobile (evita CLS: os chips sao preenchidos por JS e empurram o pool-frame) */
@media (max-width:480px){.class-filters{min-height:56px}}
.class-chip{font-family:inherit;font-size:.72rem;font-weight:600;letter-spacing:.02em;color:var(--parchment-soft,#c9b48c);
  background:rgba(6,12,7,.55);border:1px solid rgba(202,161,74,.28);border-radius:999px;padding:5px 13px;cursor:pointer;
  transition:transform .15s,color .15s,border-color .15s,background .15s;white-space:nowrap;line-height:1}
.class-chip:hover{color:var(--gold,#caa14a);border-color:rgba(202,161,74,.6);transform:translateY(-1px)}
.class-chip.is-active{color:#0b120c;background:linear-gradient(180deg,#f0cf87,#caa14a);border-color:#caa14a;
  box-shadow:0 0 10px rgba(202,161,74,.4)}

.set-vol-wrap{display:flex;align-items:center;gap:10px;flex:1;justify-content:flex-end}
.set-vol{--vol:90%;-webkit-appearance:none;appearance:none;width:130px;height:5px;border-radius:999px;cursor:pointer;
  background:linear-gradient(90deg,#f0cf87,#caa14a) no-repeat,rgba(202,161,74,.2);background-size:var(--vol) 100%,100% 100%}
.set-vol::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:15px;height:15px;border-radius:50%;
  background:#f0cf87;border:2px solid #caa14a;box-shadow:0 0 8px rgba(202,161,74,.6);cursor:pointer}
.set-vol::-moz-range-thumb{width:15px;height:15px;border-radius:50%;background:#f0cf87;border:2px solid #caa14a;cursor:pointer}
.set-vol-val{font-size:.76rem;color:var(--gold,#caa14a);min-width:38px;text-align:right;font-variant-numeric:tabular-nums}

/* ============================================================
   Doação: botão flutuante + modal (Pix + PayPal)
   ============================================================ */
.donate-fab{position:fixed;right:18px;bottom:18px;z-index:120;display:inline-flex;align-items:center;gap:8px;
  padding:11px 16px;border-radius:999px;cursor:pointer;font-family:inherit;font-weight:700;font-size:.85rem;
  color:#0b120c;background:linear-gradient(180deg,#f0cf87,#caa14a);border:1px solid #caa14a;
  box-shadow:0 6px 20px rgba(0,0,0,.4),0 0 16px rgba(202,161,74,.45);transition:transform .18s,box-shadow .18s}
.donate-fab:hover{transform:translateY(-2px) scale(1.03);box-shadow:0 10px 26px rgba(0,0,0,.5),0 0 22px rgba(202,161,74,.65)}
.donate-fab .df-heart{color:#c0392b;font-size:1rem;filter:drop-shadow(0 0 3px rgba(0,0,0,.3))}
@media (max-width:600px){.donate-fab .df-text{display:none}.donate-fab{padding:13px}}

.donate-box{max-width:400px;text-align:center}
.donate-head{display:flex;align-items:center;justify-content:center;gap:10px;margin-bottom:6px}
.donate-heart{color:#c0392b;font-size:1.4rem;filter:drop-shadow(0 0 6px rgba(192,57,43,.5))}
.donate-sub{font-size:.86rem;line-height:1.5;color:var(--parchment-soft,#c9b48c);margin:0 0 16px}
.donate-block{text-align:left;background:rgba(6,12,7,.5);border:1px solid rgba(202,161,74,.25);border-radius:10px;padding:12px;margin-bottom:12px}
.donate-block-head{display:flex;align-items:center;gap:8px;margin-bottom:8px}
.db-tag{font-weight:800;font-size:.72rem;letter-spacing:.06em;color:#0b120c;background:linear-gradient(180deg,#f0cf87,#caa14a);
  padding:2px 9px;border-radius:6px}
.db-hint{font-size:.72rem;color:var(--parchment-soft,#c9b48c)}
.pix-row{display:flex;align-items:stretch;gap:8px}
.pix-code{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-family:ui-monospace,Menlo,Consolas,monospace;
  font-size:.72rem;color:var(--parchment,#e1c699);background:rgba(0,0,0,.35);border:1px solid rgba(202,161,74,.2);
  border-radius:7px;padding:9px 11px;line-height:1.6}
.pix-copy{flex:none;padding:8px 15px;font-size:.8rem}
.donate-paypal{display:block;text-align:center;padding:11px;border-radius:9px;font-weight:700;font-size:.86rem;
  color:#fff;background:#0070ba;border:1px solid #0a5a94;text-decoration:none;transition:.18s;margin-bottom:6px}
.donate-paypal:hover{background:#0a5a94}
.donate-later{margin-top:8px;background:none;border:0;color:var(--parchment-soft,#c9b48c);font-family:inherit;
  font-size:.78rem;text-decoration:underline;text-underline-offset:3px;cursor:pointer;opacity:.8}
.donate-later:hover{opacity:1;color:var(--gold,#caa14a)}

/* ============================================================
   Dev (Lucas): CTA no rodapé + modal "quer um site" + café Pix
   ============================================================ */
.dev-ctas{display:inline-flex;flex-wrap:wrap;gap:9px;justify-content:center;align-items:center}
.dev-cta{display:inline-flex;align-items:center;gap:5px;padding:7px 15px;border-radius:999px;font-family:inherit;font-size:.8rem;font-weight:600;
  color:var(--gold);background:transparent;border:1px solid var(--gold);cursor:pointer;transition:color .16s,background .16s,box-shadow .16s}
.dev-cta b{font-weight:800}
.dev-cta:hover{color:var(--ink);background:var(--gold)}
.dev-cta--coffee{color:var(--gold-hi);border-color:var(--gold-hi)}
.dev-cta--coffee:hover{color:var(--ink);background:var(--gold-hi);box-shadow:0 0 16px rgba(202,161,74,.35)}
.dev-box{max-width:420px;text-align:center}
.dev-sub{font-size:.86rem;line-height:1.5;color:var(--parchment-soft);margin:2px 0 16px}
.dev-form{display:flex;flex-direction:column;gap:11px;text-align:left}
.dev-field{display:flex;flex-direction:column;gap:5px}
.dev-field span{font-size:.72rem;font-weight:600;letter-spacing:.03em;color:var(--gold-hi)}
.dev-field input,.dev-field textarea{font-family:inherit;font-size:.9rem;color:var(--parchment);background:rgba(6,12,7,.6);
  border:1px solid var(--line);border-radius:8px;padding:10px 12px;outline:none;transition:border-color .15s,box-shadow .15s}
.dev-field textarea{resize:vertical;min-height:66px;line-height:1.5}
.dev-field input:focus,.dev-field textarea:focus{border-color:var(--gold);box-shadow:0 0 0 3px rgba(202,161,74,.16)}
.dev-field input::placeholder,.dev-field textarea::placeholder{color:var(--parchment-soft);opacity:.7}
.dev-err{font-size:.78rem;color:var(--enemy);margin:-2px 2px 0}
.dev-submit{justify-content:center;margin-top:4px;padding:12px}
.dev-coffee{text-align:center}
.coffee-head{font-family:'Cinzel',serif;color:var(--gold);font-size:1.3rem;letter-spacing:.03em;text-transform:lowercase;margin-bottom:2px}
.dev-done{text-align:center;padding:22px 6px}
.dev-done-emoji{font-size:2.4rem;margin-bottom:8px}
/* tema claro: campos do dev-form claros */
body[data-theme="light"] .dev-field input,body[data-theme="light"] .dev-field textarea{background:#fdfaf0;color:var(--parchment)}

/* presets de valor do café (dev) */
.coffee-presets{display:grid;grid-template-columns:repeat(3,1fr);gap:7px;margin-bottom:11px}
.coffee-amt{font-family:inherit;font-weight:700;font-size:.9rem;padding:10px 4px;border-radius:8px;cursor:pointer;
  color:var(--gold);background:rgba(202,161,74,.08);border:1px solid var(--line);transition:transform .12s,background .14s,color .14s,border-color .14s}
.coffee-amt:hover{border-color:var(--gold);background:rgba(202,161,74,.18);transform:translateY(-1px)}
.coffee-amt.is-on{color:var(--ink);background:linear-gradient(180deg,var(--gold-hi),var(--gold));border-color:var(--gold);box-shadow:0 0 14px rgba(202,161,74,.45)}
.coffee-hint{font-size:.74rem;color:var(--parchment-soft);text-align:center;margin-top:8px}
body[data-theme="light"] .coffee-amt.is-on{background:linear-gradient(180deg,#f2d489,#caa14a 60%,#b08a34);color:#3a2c17}
/* valor custom */
.coffee-custom{display:flex;align-items:center;gap:8px;margin:0 0 14px;padding:10px 13px;border:1px solid var(--line);border-radius:9px;background:rgba(6,12,7,.5);transition:border-color .15s,box-shadow .15s}
.coffee-custom span{font-size:.92rem;font-weight:800;color:var(--gold-hi)}
.coffee-custom input{flex:1;min-width:0;font-family:inherit;font-size:.98rem;color:var(--parchment);background:transparent;border:0;outline:none}
.coffee-custom input::placeholder{color:var(--parchment-soft);opacity:.7}
.coffee-custom:focus-within{border-color:var(--gold);box-shadow:0 0 0 3px rgba(202,161,74,.14)}
body[data-theme="light"] .coffee-custom{background:#fdfaf0}
/* QR do Pix (alto contraste, fundo branco p/ escanear) */
.qr-wrap{display:flex;justify-content:center;margin:2px 0 14px}
.qr-box{width:200px;height:200px;border-radius:12px;overflow:hidden;background:#fff;box-shadow:0 12px 34px rgba(0,0,0,.4)}
.qr-box:empty{display:none}
.qr-box svg{width:100%;height:100%;display:block}

/* ===== aviso de cookies (LGPD) ===== */
.cookie-note{position:fixed;left:50%;bottom:16px;transform:translateX(-50%) translateY(180%);z-index:9400;display:flex;align-items:center;gap:12px;max-width:min(560px,calc(100vw - 24px));background:linear-gradient(180deg,#13211c,#0b1512);border:1px solid rgba(202,161,74,.35);border-radius:999px;padding:9px 10px 9px 18px;box-shadow:0 12px 34px rgba(0,0,0,.55);opacity:0;transition:transform .35s cubic-bezier(.2,1,.3,1),opacity .3s}
.cookie-note.show{transform:translateX(-50%);opacity:1}
.cookie-note .ck-txt{font-size:.8rem;line-height:1.4;color:#c9b48c}
.cookie-note .ck-ok{flex:none;font-family:inherit;font-weight:700;font-size:.78rem;color:#0b0d0a;background:linear-gradient(180deg,#f0cf87,#caa14a);border:0;border-radius:999px;padding:7px 16px;cursor:pointer}
.cookie-note .ck-ok:hover{filter:brightness(1.08)}
@media (max-width:520px){.cookie-note{left:12px;right:12px;max-width:none;flex-direction:column;gap:8px;padding:12px 14px;border-radius:14px;text-align:center;transform:translateY(180%)}.cookie-note.show{transform:none}}

/* ===== toast do café (notificação de canto, estilo Windows) ===== */
.cafe-toast{position:fixed;right:18px;bottom:18px;z-index:9500;width:min(320px,calc(100vw - 36px));background:linear-gradient(180deg,#13211c,#0b1512);border:1px solid #caa14a;border-left:4px solid #caa14a;border-radius:12px;padding:14px 34px 14px 16px;box-shadow:0 16px 44px rgba(0,0,0,.6),0 0 20px rgba(202,161,74,.1);cursor:pointer;transform:translateX(130%);opacity:0;transition:transform .45s cubic-bezier(.2,1,.3,1),opacity .3s,border-color .16s}
.cafe-toast.show{transform:none;opacity:1}
.cafe-toast:hover{border-color:#f0cf87;box-shadow:0 18px 50px rgba(0,0,0,.7),0 0 26px rgba(202,161,74,.22)}
.cafe-toast .ct-head{font-family:'Cinzel',serif;color:#f0cf87;font-size:.95rem;letter-spacing:.02em;margin-bottom:4px}
.cafe-toast .ct-body{font-size:.84rem;line-height:1.45;color:#dcc79a}
.cafe-toast .ct-body b{color:#f0cf87}
.cafe-toast .ct-x{position:absolute;top:8px;right:8px;width:22px;height:22px;border-radius:6px;border:0;background:transparent;color:#b7a074;font-size:.7rem;line-height:1;cursor:pointer}
.cafe-toast .ct-x:hover{color:#e0524a}
@media (max-width:520px){.cafe-toast{right:10px;left:10px;bottom:10px;width:auto}}

/* 2 builds na mesma página (principal + do patch) */
.build-block + .build-block{margin-top:20px;padding-top:16px;border-top:1px solid var(--line-soft)}