/* =========================================================== games.css — multi card game 1) componentes das telas multi-formato (seletor de liga, chips de formato, catálogo, perfil por liga) 2) temas por card game: o documento continua o mesmo, muda a paleta e alguns acabamentos (data-theme no /.app/.tv) =========================================================== */ /* ---- seletor de liga (barra do topo) ---- */ .leaguepick{display:flex;align-items:center;gap:8px;padding:9px 0;margin-right:auto} .leaguepick .k{font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:#b7ad96;font-weight:600} .leaguepick select{font-family:"Saira Condensed";font-weight:800;font-size:15px;text-transform:uppercase;letter-spacing:.04em; color:var(--sheet);background:rgba(255,255,255,.09);border:2px solid rgba(255,255,255,.35); padding:5px 10px;max-width:230px} .leaguepick select:focus{outline:2px solid var(--red);outline-offset:1px} .leaguepick select option,.leaguepick select optgroup{color:#141414;background:#fff} /* ---- porta de entrada: escolha da liga na primeira visita ---- */ .gate-bg{position:fixed;inset:0;z-index:60;display:grid;place-items:center;padding:20px; background:rgba(20,16,10,.72);backdrop-filter:blur(3px)} .gate{width:min(760px,100%);max-height:92vh;overflow:auto;background:var(--sheet); border:3px solid var(--ink);box-shadow:0 30px 70px rgba(0,0,0,.5);padding:26px} .gate-h{border-bottom:2px dashed var(--hair);padding-bottom:14px;margin-bottom:18px} .gate-h .kick{font-size:10px;letter-spacing:.24em;text-transform:uppercase;color:var(--ink2)} .gate-h h2{font-family:"Saira Condensed";font-weight:900;font-size:clamp(28px,5vw,42px); text-transform:uppercase;line-height:.95;margin-top:6px} .gate-h p{font-size:12px;color:var(--ink2);margin-top:8px;line-height:1.5} .gate-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:12px} .gate-card{display:flex;flex-direction:column;gap:4px;text-align:left;padding:14px; border:2px solid var(--ink);background:rgba(255,255,255,.45);transition:transform .1s,box-shadow .1s} .gate-card:hover{transform:translateY(-2px);box-shadow:0 6px 0 rgba(0,0,0,.18)} .gate-card .ico{font-size:22px;line-height:1} .gate-card .gm{font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--ink2)} .gate-card .nm{font-family:"Saira Condensed";font-weight:900;font-size:22px;text-transform:uppercase;line-height:1} .gate-card .sub{font-size:11px;color:var(--ink2);line-height:1.45} .gate-card.store{background:var(--ink);color:var(--sheet)} .gate-card.store .sub{color:#b7ad96} .gate-card[data-theme="pokemon"]{box-shadow:inset 5px 0 0 #e3350d} .gate-card[data-theme="pokemon"]:hover{box-shadow:inset 5px 0 0 #e3350d,0 6px 0 rgba(0,0,0,.18)} .gate-skip{display:block;margin:18px auto 0;font-size:11px;letter-spacing:.1em;text-transform:uppercase; color:var(--ink2);border-bottom:1px solid var(--hair)} .gate-skip:hover{color:var(--ink)} /* ---- escopo "Geral da Loja": chips e etiquetas de formato ---- */ .fmt-legend{display:flex;flex-wrap:wrap;gap:8px;margin-top:14px} .fmt-chip{font-size:11px;letter-spacing:.04em;text-transform:uppercase;border:1px solid var(--hair); background:rgba(255,255,255,.4);padding:4px 10px;color:var(--ink2)} .fmt-chip b{font-family:"Saira Condensed";font-weight:800;font-size:13px;color:var(--ink);letter-spacing:.06em} .fmt-chip[data-theme="pokemon"]{border-color:#e3350d;box-shadow:inset 3px 0 0 #e3350d} .fmt-chip[data-theme="mtg"]{box-shadow:inset 3px 0 0 var(--ink)} .fmt-tags{display:inline-flex;flex-wrap:wrap;gap:5px} .fmt-tags i{font-style:normal;font-size:10px;letter-spacing:.04em;text-transform:uppercase; border:1px solid var(--ink);padding:1px 6px;white-space:nowrap} .fmt-tags i b{font-weight:700;color:var(--redink)} .fmt-tags i[data-theme="pokemon"]{border-color:#e3350d;color:#a3260a} /* quebra dos pontos por formato dentro da gaveta do jogador */ .scope-split{border:1px solid var(--hair);margin-top:14px} .scope-split .k{font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:var(--sheet); background:var(--ink);padding:4px 10px} .scope-split .row{display:flex;align-items:center;gap:10px;padding:6px 10px;border-bottom:1px dashed var(--hair);font-size:12px} .scope-split .row:last-child{border-bottom:none} .scope-split .nm{flex:1;font-family:"Saira Condensed";font-weight:800;font-size:15px;text-transform:uppercase} .scope-split .pt{font-family:"Saira Condensed";font-weight:900;font-size:16px;color:var(--redink)} .scope-bar{font-size:11px;color:var(--ink2);background:rgba(0,0,0,.05); border-bottom:1px dashed var(--hair);padding:7px 16px;line-height:1.5} .scope-bar b{color:var(--ink)} .lbl-scope{font-size:10px;letter-spacing:.06em;color:var(--redink);text-transform:none} .reg-league{font-size:12px;color:var(--ink2);border-left:3px solid var(--red); background:rgba(180,35,24,.07);padding:8px 10px;margin-bottom:14px;line-height:1.45} .fmt-pick{display:flex;flex-wrap:wrap;gap:10px} /* ---- catálogo de card games e formatos ---- */ .fmt-row{display:grid;grid-template-columns:1fr auto;gap:12px;align-items:start; border:1px solid var(--hair);padding:10px 12px;margin-bottom:10px;background:rgba(255,255,255,.35)} .fmt-row.off{opacity:.6;background:repeating-linear-gradient(45deg,rgba(0,0,0,.03) 0 8px,transparent 8px 16px)} .fmt-row[data-theme="pokemon"]{box-shadow:inset 4px 0 0 #e3350d} .fmt-row[data-theme="mtg"]{box-shadow:inset 4px 0 0 var(--ink)} .fmt-h{display:flex;align-items:center;gap:8px;flex-wrap:wrap} .fmt-h b{font-family:"Saira Condensed";font-weight:900;font-size:19px;text-transform:uppercase;letter-spacing:.02em} .fmt-h .gm{font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:var(--ink2); border:1px solid var(--hair);padding:1px 6px} .fmt-main small{display:block;margin-top:4px;font-size:11px;color:var(--ink2);line-height:1.6} .fmt-row .uacts select{font-family:"Spline Sans Mono";font-size:11px;border:1px solid var(--ink); background:var(--sheet);padding:3px 6px;max-width:190px} .fmt-edit{grid-column:1/-1;border-top:1px dashed var(--hair);margin-top:8px;padding-top:12px} .fmt-form .row3{display:grid;grid-template-columns:1fr 1fr 1fr;gap:8px} .fmt-form .row3 input{border:2px solid var(--ink);background:var(--sheet);padding:8px 10px; font-family:"Spline Sans Mono";font-size:13px} /* ---- perfil do jogador por formato ---- */ .lgprof{border:1px solid var(--hair);padding:12px;margin-bottom:12px;background:rgba(255,255,255,.35)} .lgprof[data-theme="pokemon"]{box-shadow:inset 4px 0 0 #e3350d} .lgprof[data-theme="mtg"]{box-shadow:inset 4px 0 0 var(--ink)} .lgprof-h{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-bottom:10px} .lgprof-h .nm{font-family:"Saira Condensed";font-weight:900;font-size:19px;text-transform:uppercase} .lgprof-h .gm{font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:var(--ink2)} /* 11 tipos de energia não cabem numa linha só: o seletor quebra em grade */ .colorpick.energy{flex-wrap:wrap} .colorpick.energy .cpick{flex:1 1 78px} /* liga arquivada no Hall do telão (escopo loja mistura formatos) */ .tv-hall-row .per .lg{display:block;font-family:"Spline Sans Mono";font-size:11px; font-weight:400;letter-spacing:.06em;color:#8d8470;text-transform:none;font-style:normal} /* telas médias: com o seletor de liga + as abas de admin, a barra do topo fica apertada — comprime tipografia e respiros antes de virar menu ☰ */ @media (min-width:881px) and (max-width:1200px){ .topbar{padding-left:22px;padding-right:22px;gap:8px} .topbar .nav button{padding:0 11px;font-size:14px} .leaguepick select{max-width:160px;font-size:14px} .leaguepick .k{display:none} } @media (max-width:880px){ /* o seletor ganha uma linha própria abaixo da marca (nav vira menu ☰) */ .topbar{flex-wrap:wrap} .leaguepick{order:3;margin-right:0;width:100%;padding:0 0 12px} .leaguepick select{flex:1;max-width:none} .fmt-row{grid-template-columns:1fr} .fmt-row .uacts{justify-content:flex-start} .fmt-form .row3{grid-template-columns:1fr} } /* =========================================================== TEMA · POKÉMON — mesma súmula, outra casa: papel claro azulado, azul-marinho no lugar do kraft e o vermelho da franquia =========================================================== */ :root[data-theme="pokemon"]{ --sheet:#f3f7ff; --sheet2:#e6eefb; --ink:#13294f; --ink2:#48628c; --faint:#93a6c2; --line:#13294f; --hair:rgba(19,41,79,.34); --red:#e3350d; --redink:#c22c0b; --hl:#ffe98a; --green:#1f9c5a; --desk:#16264a; } :root[data-theme="pokemon"] body{ background: radial-gradient(120% 90% at 50% -10%, #24406f, transparent 60%), url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cg fill='none' stroke='%23ffffff' stroke-opacity='0.05' stroke-width='6'%3E%3Ccircle cx='60' cy='60' r='40'/%3E%3Cpath d='M20 60h80'/%3E%3Ccircle cx='60' cy='60' r='12'/%3E%3C/g%3E%3C/svg%3E"), var(--desk); } :root[data-theme="pokemon"] .app{ background:linear-gradient(180deg,#ffffff,#e9f0fb); box-shadow:0 0 0 1px rgba(0,0,0,.12),0 40px 90px rgba(4,16,40,.5); } :root[data-theme="pokemon"] .app::after{opacity:.22} :root[data-theme="pokemon"] .feed b{background:#cfdcf0;box-shadow:inset 0 1px 2px rgba(0,0,0,.3)} /* marca vira uma pokébola (topo e telão) */ :root[data-theme="pokemon"] .brand .mk, :root[data-theme="pokemon"] .tv-top .mk{ color:transparent;border-color:#fff; background:linear-gradient(180deg,#e3350d 0 48%,#fff 48% 52%,#f4f4f4 52% 100%); box-shadow:inset 0 0 0 2px rgba(0,0,0,.35);position:relative} :root[data-theme="pokemon"] .brand .mk::after, :root[data-theme="pokemon"] .tv-top .mk::after{ content:"";position:absolute;left:50%;top:50%;transform:translate(-50%,-50%); width:34%;height:34%;border-radius:50%;background:#fff;box-shadow:0 0 0 2px #13294f} /* acabamento um pouco mais macio que a súmula kraft */ :root[data-theme="pokemon"] .panel, :root[data-theme="pokemon"] .fmt-row, :root[data-theme="pokemon"] .lgprof, :root[data-theme="pokemon"] .metarow{border-radius:10px;overflow:hidden} :root[data-theme="pokemon"] .panel{background:rgba(255,255,255,.72)} :root[data-theme="pokemon"] .st-row.lead{ background:repeating-linear-gradient(45deg,rgba(227,53,13,.10) 0 12px,transparent 12px 24px)} :root[data-theme="pokemon"] .stamp{color:var(--red);border-color:var(--red)} :root[data-theme="pokemon"] .pod-card.c1{box-shadow:0 0 0 3px #ffcb05,0 12px 30px rgba(4,16,40,.25)} /* telão no tema Pokémon */ :root[data-theme="pokemon"] .tv{ background: radial-gradient(120% 90% at 50% -10%, #29497d, transparent 60%), repeating-linear-gradient(91deg, rgba(0,0,0,.12) 0 2px, transparent 2px 7px), var(--desk); } :root[data-theme="pokemon"] .tv-top .b, :root[data-theme="pokemon"] .tv-top .meta .k, :root[data-theme="pokemon"] .tv-hall-row .per, :root[data-theme="pokemon"] .tv-hall-row .dk{color:#a9bde0} :root[data-theme="pokemon"] .tv-top .meta .v.gold, :root[data-theme="pokemon"] .tv-hall-row .pt{color:#ffcb05}