:root{
  --bg:#0b0b0f;
  --panel:#13131a;
  --panel2:#1a1a22;
  --text:#f2f2f7;
  --muted:#a7a7b3;
  --brand:#ffcc00; /* JogosPlay amarelo */
  --accent:#ffffff;
  --radius:18px;
}

*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  background: radial-gradient(1200px 600px at 15% 0%, rgba(255,204,0,.12), transparent 60%),
              radial-gradient(900px 500px at 90% 10%, rgba(255,255,255,.06), transparent 55%),
              var(--bg);
  color:var(--text);
  font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  line-height:1.45;
}
a{color:inherit;text-decoration:none}
.jp-container{max-width:1200px;margin:0 auto;padding:0 18px}
.jp-header{
  position:sticky;top:0;z-index:20;
  background: rgba(11,11,15,.76);
  backdrop-filter: blur(10px);
  border-bottom:1px solid rgba(255,255,255,.06);
}
.jp-header-inner{display:flex;align-items:center;gap:18px;min-height:72px}
.jp-logo-text{font-weight:900;letter-spacing:.2px}
.jp-nav{display:flex;gap:14px;flex:1;align-items:center}
.jp-nav a{color:var(--muted);font-weight:600;font-size:14px}
.jp-nav a:hover{color:var(--text)}
.jp-search{
  display:flex;align-items:center;gap:10px;
  background: rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.08);
  border-radius:999px;
  padding:10px 12px;
  min-width:280px;
  position:relative;
}
.jp-search input{
  width:100%;
  background:transparent;border:0;outline:none;
  color:var(--text);
  font-size:14px;
}
.jp-search-results{
  position:absolute;left:0;right:0;top:calc(100% + 10px);
  background: rgba(19,19,26,.98);
  border:1px solid rgba(255,255,255,.10);
  border-radius:16px;
  overflow:hidden;
  box-shadow: 0 18px 40px rgba(0,0,0,.45);
  display:none;
}
.jp-search-results.active{display:block}
.jp-search-item{display:flex;align-items:center;gap:12px;padding:10px 12px}
.jp-search-item:hover{background: rgba(255,255,255,.06)}
.jp-search-item img{width:56px;height:32px;object-fit:cover;border-radius:10px}
.jp-search-item .t{font-weight:700;font-size:13px}
.jp-search-item .m{color:var(--muted);font-size:12px}

.jp-hero{
  padding:28px 0 8px;
}
.jp-hero-card{
  background: linear-gradient(180deg, rgba(255,255,255,.08), rgba(255,255,255,.04));
  border:1px solid rgba(255,255,255,.10);
  border-radius: var(--radius);
  overflow:hidden;
  position:relative;
  min-height:320px;
}
.jp-hero-inner{display:grid;grid-template-columns: 1.2fr .8fr;gap:18px}
.jp-hero-left{padding:22px}
.jp-pill{
  display:inline-flex;align-items:center;gap:8px;
  background: rgba(255,204,0,.14);
  border:1px solid rgba(255,204,0,.22);
  color:var(--text);
  padding:6px 10px;border-radius:999px;
  font-weight:800;font-size:12px;
}
.jp-hero h1{margin:14px 0 8px;font-size:42px;line-height:1.05}
.jp-hero p{margin:0;color:var(--muted);max-width:56ch}
.jp-hero-actions{margin-top:16px;display:flex;gap:10px;flex-wrap:wrap}
.jp-btn{
  display:inline-flex;align-items:center;justify-content:center;
  height:42px;padding:0 14px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.14);
  background: rgba(255,255,255,.08);
  color:var(--text);
  font-weight:800;font-size:14px;
}
.jp-btn.primary{background: var(--brand); color:#111; border-color: rgba(0,0,0,.18)}
.jp-btn:hover{transform: translateY(-1px)}
.jp-hero-right{padding:22px;display:flex;align-items:center;justify-content:center}
.jp-hero-right .thumb{width:100%;max-width:420px;aspect-ratio:16/9; border-radius:18px; overflow:hidden; border:1px solid rgba(255,255,255,.12)}
.jp-hero-right img{width:100%;height:100%;object-fit:cover;display:block}

.jp-section{padding:18px 0}
.jp-section-head{display:flex;align-items:end;justify-content:space-between;gap:14px;margin-bottom:10px}
.jp-section-title{font-size:18px;font-weight:900}
.jp-section-sub{color:var(--muted);font-size:13px}

.jp-rail{
  position:relative;
}
.jp-rail-track{
  display:flex;gap:12px;
  overflow:auto;
  scroll-snap-type:x mandatory;
  padding-bottom:6px;
}
.jp-rail-track::-webkit-scrollbar{height:10px}
.jp-rail-track::-webkit-scrollbar-thumb{background: rgba(255,255,255,.12);border-radius:999px}
.jp-card{
  flex:0 0 220px;
  scroll-snap-align:start;
  background: rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.10);
  border-radius:18px;
  overflow:hidden;
  transition: transform .15s ease, background .15s ease;
}
.jp-card:hover{transform: translateY(-2px); background: rgba(255,255,255,.08)}
.jp-card .thumb{aspect-ratio:16/9;background:#111}
.jp-card img{width:100%;height:100%;object-fit:cover;display:block}
.jp-card .meta{padding:10px 10px 12px}
.jp-card .meta .t{font-weight:900;font-size:14px;margin:0 0 4px}
.jp-card .meta .c{color:var(--muted);font-size:12px}
.jp-rail-btn{
  position:absolute;top:50%;transform:translateY(-50%);
  width:42px;height:42px;border-radius:999px;
  background: rgba(0,0,0,.55);
  border:1px solid rgba(255,255,255,.14);
  display:flex;align-items:center;justify-content:center;
  cursor:pointer;
}
.jp-rail-btn:hover{background: rgba(0,0,0,.72)}
.jp-rail-btn.prev{left:-8px}
.jp-rail-btn.next{right:-8px}

.jp-grid{
  display:grid;
  grid-template-columns: repeat(6, 1fr);
  gap:12px;
}
@media (max-width: 1100px){ .jp-grid{grid-template-columns: repeat(4, 1fr)} }
@media (max-width: 720px){
  .jp-header-inner{flex-wrap:wrap;padding:10px 0}
  .jp-search{min-width:100%}
  .jp-hero-inner{grid-template-columns:1fr}
  .jp-hero h1{font-size:34px}
  .jp-grid{grid-template-columns: repeat(2, 1fr)}
  .jp-rail-btn{display:none}
}

.jp-page{
  padding:18px 0 34px;
}
.jp-h1{font-size:34px;font-weight:950;margin:10px 0}
.jp-breadcrumb{color:var(--muted);font-size:12px;margin:10px 0}
.jp-footer{
  border-top:1px solid rgba(255,255,255,.06);
  padding:22px 0;
  color:var(--muted);
  font-size:13px;
}
.jp-footer a{color:var(--text)}

/* ====== 0.1.1: Polimento visual + painel admin ====== */
.jp-page, .jp-hero{ position: relative; }
.jp-hero::before{
  content:"";
  position:absolute;
  inset:-180px -40px auto -40px;
  height:520px;
  background:
    radial-gradient(700px 360px at 18% 25%, rgba(255,255,255,.10), transparent 55%),
    radial-gradient(600px 320px at 82% 30%, rgba(255,200,0,.08), transparent 55%),
    linear-gradient(to bottom, rgba(0,0,0,.0), rgba(0,0,0,.55));
  pointer-events:none;
  filter: blur(0px);
}

.jp-hero-right{ position:relative; overflow:hidden; }
.jp-hero-thumb{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; opacity:.85; transform: scale(1.02); }
.jp-hero-right::after{
  content:"";
  position:absolute; inset:0;
  background: linear-gradient(135deg, rgba(0,0,0,.55), rgba(0,0,0,.15) 55%, rgba(0,0,0,.55));
  pointer-events:none;
}
.jp-hero-poster{ position:relative; z-index:1; }

/* ====== Player shell (JogosPlay) ====== */
.jp-player{
  --jp-bar-h: 58px;
  max-width:1100px;
  margin:24px auto;
  border-radius:22px;
  overflow:hidden;
  background:#111;
  box-shadow:0 20px 60px rgba(0,0,0,.45);
  position:relative;
}

/*
  Fix stacking: alguns iframes acabam "subindo" e cobrindo a barra.
  Mantemos a barra sempre acima do jogo (sem depender de z-index do iframe).
*/
.jp-playerbar{
  display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding:14px 16px;
  background:rgba(20,20,20,.92);
  backdrop-filter: blur(8px);
  border-top:1px solid rgba(255,255,255,.06);
  position:relative;
  z-index:40;
  min-height:var(--jp-bar-h);
}
.jp-brand{font-weight:900;letter-spacing:.2px;opacity:.95}
.jp-actions{display:flex;gap:10px;flex-wrap:wrap;justify-content:flex-end}
.jp-player .jp-btn{border:0;border-radius:999px;padding:10px 12px;background:rgba(255,255,255,.08);color:#fff;cursor:pointer;line-height:1}
.jp-player .jp-btn:hover{background:rgba(255,255,255,.13)}
.jp-player .jp-btn:focus-visible{outline:2px solid rgba(255,204,0,.9);outline-offset:2px}

/* === Playerbar icons (sem fonte externa) === */
.jp-player .jp-btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  min-width:40px;
  min-height:40px;
}
.jp-player .jp-btn::before{
  content:"";
  width:16px;height:16px;
  display:block;
  background:currentColor;
  -webkit-mask-repeat:no-repeat;
  -webkit-mask-position:center;
  -webkit-mask-size:contain;
  mask-repeat:no-repeat;
  mask-position:center;
  mask-size:contain;
}

/* Ícones via mask SVG */
.jp-player .jp-like::before{
  -webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M2 10h4v12H2V10zm20 1c0-1.1-.9-2-2-2h-6.3l.9-4.2.03-.32c0-.41-.17-.79-.44-1.06L13 2 6.6 8.4C6.2 8.8 6 9.3 6 9.8V20c0 1.1.9 2 2 2h8c.8 0 1.5-.5 1.8-1.2l3-7c.1-.3.2-.6.2-.8v-2z'/%3E%3C/svg%3E");
          mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M2 10h4v12H2V10zm20 1c0-1.1-.9-2-2-2h-6.3l.9-4.2.03-.32c0-.41-.17-.79-.44-1.06L13 2 6.6 8.4C6.2 8.8 6 9.3 6 9.8V20c0 1.1.9 2 2 2h8c.8 0 1.5-.5 1.8-1.2l3-7c.1-.3.2-.6.2-.8v-2z'/%3E%3C/svg%3E");
}
.jp-player .jp-dislike::before{
  -webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M2 2h4v12H2V2zm20 11c0 1.1-.9 2-2 2h-6.3l.9 4.2.03.32c0 .41-.17.79-.44 1.06L13 22l-6.4-6.4c-.4-.4-.6-.9-.6-1.4V4c0-1.1.9-2 2-2h8c.8 0 1.5.5 1.8 1.2l3 7c.1.3.2.6.2.8v2z'/%3E%3C/svg%3E");
          mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M2 2h4v12H2V2zm20 11c0 1.1-.9 2-2 2h-6.3l.9 4.2.03.32c0 .41-.17.79-.44 1.06L13 22l-6.4-6.4c-.4-.4-.6-.9-.6-1.4V4c0-1.1.9-2 2-2h8c.8 0 1.5.5 1.8 1.2l3 7c.1.3.2.6.2.8v2z'/%3E%3C/svg%3E");
}
.jp-player .jp-lights::before{
  -webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M9 21h6v-1H9v1zm3-20C7.9 1 5 3.9 5 7c0 2.4 1.4 4.5 3.5 5.5V17c0 .6.4 1 1 1h5c.6 0 1-.4 1-1v-4.5C17.6 11.5 19 9.4 19 7c0-3.1-2.9-6-7-6zm2.9 10.2-1.4.8V16H10v-4l-1.4-.8C7.1 10.3 6 8.7 6 7c0-2.5 2.5-5 6-5s6 2.5 6 5c0 1.7-1.1 3.3-3.1 4.2z'/%3E%3C/svg%3E");
          mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M9 21h6v-1H9v1zm3-20C7.9 1 5 3.9 5 7c0 2.4 1.4 4.5 3.5 5.5V17c0 .6.4 1 1 1h5c.6 0 1-.4 1-1v-4.5C17.6 11.5 19 9.4 19 7c0-3.1-2.9-6-7-6zm2.9 10.2-1.4.8V16H10v-4l-1.4-.8C7.1 10.3 6 8.7 6 7c0-2.5 2.5-5 6-5s6 2.5 6 5c0 1.7-1.1 3.3-3.1 4.2z'/%3E%3C/svg%3E");
}
.jp-player .jp-fullscreen::before{
  -webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M7 14H5v5h5v-2H7v-3zm0-4h2V7h3V5H5v5zm10 9h-3v2h5v-5h-2v3zm0-14V7h-3v2h3v3h2V5h-5z'/%3E%3C/svg%3E");
          mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M7 14H5v5h5v-2H7v-3zm0-4h2V7h3V5H5v5zm10 9h-3v2h5v-5h-2v3zm0-14V7h-3v2h3v3h2V5h-5z'/%3E%3C/svg%3E");
}
.jp-player .jp-close::before{
  -webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M18.3 5.7 12 12l6.3 6.3-1.4 1.4L10.6 13.4 4.3 19.7 2.9 18.3 9.2 12 2.9 5.7 4.3 4.3l6.3 6.3 6.3-6.3 1.4 1.4z'/%3E%3C/svg%3E");
          mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M18.3 5.7 12 12l6.3 6.3-1.4 1.4L10.6 13.4 4.3 19.7 2.9 18.3 9.2 12 2.9 5.7 4.3 4.3l6.3 6.3 6.3-6.3 1.4 1.4z'/%3E%3C/svg%3E");
}

/* Se quiser texto junto, descomente:
.jp-player .jp-btn{ padding:10px 14px }
.jp-player .jp-btn::after{ content: attr(title); font-weight:800; font-size:13px; }
*/

.jp-player .jp-like[aria-pressed="true"],
.jp-player .jp-dislike[aria-pressed="true"]{background:rgba(255,204,0,.18);border:1px solid rgba(255,204,0,.35)}

.jp-stage{position:relative;background:#000;overflow:hidden;z-index:1;padding-top:0}
/* ====== Player shell (JogosPlay) ====== */
.jp-target{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(1px,1px,1px,1px);white-space:nowrap}
.jp-poster{border:0;background:transparent;padding:0;margin:0;display:block;cursor:pointer;position:relative;width:100%;text-decoration:none;color:inherit}
.jp-poster-img{width:100%;height:auto;display:block}
.jp-play{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);background:#f5c400;color:#111;padding:14px 18px;border-radius:999px;font-weight:900;box-shadow:0 18px 40px rgba(0,0,0,.45)}
.jp-player.jp-embed-missing .jp-play{background:rgba(255,80,80,.92);color:#111}
.jp-framewrap{display:none;position:relative;width:100%;aspect-ratio:16/9;background:#000;z-index:1}
.jp-framewrap iframe{
  /* Alguns providers tentam aplicar estilos inline no iframe.
     Forçamos o iframe a ficar preso dentro do container (sem cobrir o menu/tabs). */
  position:absolute !important;
  inset:0 !important;
  width:100% !important;
  height:100% !important;
  border:0 !important;
  z-index:1 !important;
}

/* Mostra iframe quando estiver tocando (JS) */
.jp-player.is-playing .jp-framewrap{display:block}

/* CSS-only fallback: hash target ativa o iframe mesmo se JS falhar */
.jp-target:target + .jp-stage .jp-poster{display:none}
.jp-target:target + .jp-stage .jp-framewrap{display:block}

/* Fallback mais robusto: checkbox (não depende de hash nem JS) */
.jp-toggle:checked + .jp-stage .jp-poster{display:none}
.jp-toggle:checked + .jp-stage .jp-framewrap{display:block}

/* Garante clique sempre no poster */
.jp-poster{position:relative;z-index:3;pointer-events:auto}
.jp-play{pointer-events:none}
.jp-poster-img{pointer-events:none}

.jp-lights-overlay{position:fixed;inset:0;background:rgba(0,0,0,.78);z-index:9998}
.jp-player.is-playing{z-index:9999;position:relative}

/* Botão Fechar só faz sentido depois de iniciar */
.jp-player .jp-close{display:none}
.jp-player.is-playing .jp-close{display:inline-flex}
.jp-toggle:checked ~ .jp-playerbar .jp-close{display:inline-flex}
.jp-target:target ~ .jp-playerbar .jp-close{display:inline-flex}

/* Fullscreen: manter barra visível (abaixo) e o jogo ocupando o máximo */
.jp-player{display:flex;flex-direction:column}
:fullscreen .jp-player{max-width:none;width:100%;height:100%;margin:0;border-radius:0;box-shadow:none}
:fullscreen .jp-stage{flex:1;display:flex}
:fullscreen .jp-framewrap{flex:1;aspect-ratio:auto;height:100%}
:fullscreen .jp-playerbar{position:absolute;z-index:9999}

/* Tabs (sem JS): inputs radio controlam a aba ativa */
.jp-tabs{display:flex;gap:10px;flex-wrap:wrap;margin:18px 0 8px;position:relative;z-index:40}
.jp-tab-radio{position:absolute;left:-9999px}
.jp-tab{border:0;cursor:pointer;border-radius:999px;padding:10px 14px;background:rgba(255,255,255,.07);color:#fff;font-weight:900;letter-spacing:.2px;user-select:none}
.jp-tab:hover{background:rgba(255,255,255,.11)}
.jp-tab-radio:checked + .jp-tab{background:rgba(255,204,0,.18);border:1px solid rgba(255,204,0,.35)}
.jp-tabpanes{margin-top:6px;width:100%}
.jp-tabpane{display:none}
.jp-tab-radio[id$='-desc']:checked ~ .jp-tabpanes [data-pane="desc"]{display:block}
.jp-tab-radio[id$='-walk']:checked ~ .jp-tabpanes [data-pane="walk"]{display:block}

.jp-walkthrough{margin:18px 0 0;padding:14px 14px 10px;border-radius:18px;background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.08)}
.jp-walkthrough-head{display:flex;align-items:flex-end;justify-content:space-between;gap:12px;margin-bottom:10px}
.jp-walkthrough-title{font-weight:900;letter-spacing:.2px}
.jp-walkthrough-sub{color:var(--muted);font-size:13px}
.jp-walkthrough-frame{position:relative;width:100%;aspect-ratio:16/9;background:#000;border-radius:14px;overflow:hidden}
.jp-walkthrough-frame iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.jp-walkthrough-placeholder{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;text-align:center;padding:18px;color:rgba(255,255,255,.85);background:linear-gradient(135deg, rgba(255,255,255,.04), rgba(255,255,255,.01));font-weight:800}
.jp-walkthrough-empty{color:var(--muted);padding:8px 2px}

@media (max-width: 720px){
  .jp-player{margin:16px auto;border-radius:18px}
  .jp-playerbar{padding:12px 12px}
  .jp-player .jp-btn{padding:9px 11px}
}

.jp-card{ transition: transform .16s ease, box-shadow .16s ease; }
.jp-card:hover{ transform: translateY(-3px); box-shadow: 0 18px 40px rgba(0,0,0,.45); }
.jp-card-thumb{ overflow:hidden; }
.jp-card-thumb img{ transition: transform .18s ease; }
.jp-card:hover .jp-card-thumb img{ transform: scale(1.04); }

.jp-section-title{ letter-spacing:.2px }

/* Painel admin: Últimos jogos adicionados */
.jp-admin-panel{ padding:14px 0 0; }
.jp-admin-box{ border:1px solid rgba(255,255,255,.08); background: rgba(255,255,255,.04); border-radius:16px; padding:12px 14px; }
.jp-admin-box summary{ cursor:pointer; user-select:none; font-weight:800; }
.jp-admin-table{ width:100%; border-collapse: collapse; margin-top:10px; font-size:12px; }
.jp-admin-table th, .jp-admin-table td{ padding:8px 8px; border-bottom:1px solid rgba(255,255,255,.07); vertical-align:top; }
.jp-admin-table th{ color: var(--muted); font-weight:800; text-transform:uppercase; letter-spacing:.06em; font-size:11px; }
.jp-admin-badge{ display:inline-flex; align-items:center; gap:6px; padding:3px 8px; border-radius:999px; background: rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.10); font-weight:800; }
.jp-admin-ok{ background: rgba(0,255,120,.10); border-color: rgba(0,255,120,.18); }
.jp-admin-warn{ background: rgba(255,200,0,.10); border-color: rgba(255,200,0,.18); }
.jp-admin-muted{ color: var(--muted); }

@media (max-width: 720px){
  .jp-admin-table{ display:block; overflow-x:auto; }
}