:root{

  --pb-fg: rgba(230,255,245,.92);

  --pb-dim: rgba(230,255,245,.75);

  --pb-line: rgba(0,255,200,.22);

  --pb-line2: rgba(0,170,255,.16);

  --pb-panel: rgba(0,0,0,.65);

  --pb-panel2: rgba(0,0,0,.72);

  --pb-shadow: rgba(0,0,0,.70);

  --pb-r: 18px;

}



.pb-arcade{ padding: 4vh 2vw; box-sizing: border-box; color: var(--pb-fg); }

.pb-arcade__panel{

  background: linear-gradient(180deg, var(--pb-panel), var(--pb-panel2));

  border: 1px solid var(--pb-line);

  border-radius: var(--pb-r);

  box-shadow: 0 20px 60px var(--pb-shadow);

  padding: 18px;

  position: relative;

  overflow: hidden;

}

.pb-arcade__panel:before{

  content:"";

  position:absolute; inset:0;

  background:

    linear-gradient(90deg, transparent, rgba(0,255,200,.06), transparent),

    radial-gradient(circle at 30% 10%, rgba(0,170,255,.12), transparent 55%),

    radial-gradient(circle at 70% 0%, rgba(0,255,200,.10), transparent 60%);

  pointer-events:none;

}

.pb-arcade__head{ position:relative; display:flex; gap:14px; align-items:flex-start; justify-content:space-between; padding-bottom: 14px; border-bottom: 1px solid var(--pb-line2); margin-bottom: 14px; }

.pb-arcade__kicker{ font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;

  letter-spacing:.18em; text-transform:uppercase; color: var(--pb-dim); font-size: 12px; }

.pb-arcade__title{ font-size: 22px; font-weight: 800; margin-top: 4px; }

.pb-arcade__title--xl{ font-size: 32px; line-height:1.05; }

.pb-arcade__head--directory{ align-items:flex-end; }

.pb-arcade__sub{ color: var(--pb-dim); margin-top: 6px; }

.pb-arcade__section{ position:relative; margin-top: 16px; }

.pb-arcade__sectionTitle{

  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;

  letter-spacing:.14em; color: var(--pb-dim); font-size: 12px; margin-bottom: 10px;

}

.pb-arcade__grid{ display:grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 12px; position:relative; }

.pb-arcade__card{

  display:flex; flex-direction:column; text-decoration:none;

  border:1px solid var(--pb-line2); border-radius: 16px; overflow:hidden;

  background: rgba(0,0,0,.35);

  transition: transform .12s ease, border-color .12s ease, background .12s ease;

}

.pb-arcade__card:hover{ transform: translateY(-2px); border-color: var(--pb-line); background: rgba(0,0,0,.45); }

.pb-arcade__thumb{ height: 120px; background: rgba(0,255,200,.08); background-size: cover; background-position:center; }

.pb-arcade__meta{ padding: 12px; }

.pb-arcade__gameTitle{ font-weight: 800; color: var(--pb-fg); }

.pb-arcade__gameSlug{ margin-top: 4px; font-family: ui-monospace, monospace; color: var(--pb-dim); font-size: 12px; }

.pb-arcade__notice{ padding: 12px; border:1px solid var(--pb-line2); border-radius: 14px; background: rgba(0,0,0,.35); }

.pb-arcade__frame{ position:relative; margin-top: 12px; }

.pb-arcade__iframe{ width:100%; border: 1px solid var(--pb-line2); border-radius: 14px; background:#000; }

.pb-arcade__head--game{ align-items:center; }

.pb-arcade__stat{ text-align:right; }

.pb-arcade__statLabel{ font-family: ui-monospace, monospace; letter-spacing:.14em; text-transform:uppercase; font-size:11px; color:var(--pb-dim); }

.pb-arcade__statValue{ font-weight:900; font-size: 16px; }

.pb-arcade__foot{ display:flex; justify-content:space-between; gap: 10px; align-items:center; margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--pb-line2); }

.pb-arcade__badge{

  display:inline-block; padding: 6px 10px; border-radius: 999px;

  border: 1px solid var(--pb-line2);

  font-family: ui-monospace, monospace; font-size: 11px; letter-spacing:.08em;

  background: rgba(0,0,0,.35); color: var(--pb-fg);

}

.pb-arcade__badge--dim{ color: var(--pb-dim); }

.pb-arcade__link{ color: var(--pb-fg); text-decoration:none; border-bottom: 1px dashed var(--pb-line2); }

.pb-arcade__link:hover{ border-bottom-color: var(--pb-line); }



/* =========================

   Game wrapper controls

========================= */

.pb-arcade__controls{ display:flex; gap:10px; align-items:center; margin-top: 6px; }

.pb-arcade__btn{

  appearance:none;

  border:1px solid var(--pb-line);

  background: rgba(0,0,0,.35);

  color: var(--pb-fg);

  border-radius: 999px;

  padding: 9px 12px;

  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace;

  font-size: 12px;

  letter-spacing: .08em;

  cursor: pointer;

  box-shadow: 0 10px 30px rgba(0,0,0,.35);

}

.pb-arcade__btn:hover{ background: rgba(0,0,0,.52); }

.pb-arcade__btn--dim{ opacity: .85; border-color: var(--pb-line2); }



.pb-arcade__toast{

  position: fixed;

  left: 50%;

  bottom: 18px;

  transform: translateX(-50%);

  padding: 10px 14px;

  border: 1px solid var(--pb-line);

  border-radius: 999px;

  background: rgba(0,0,0,.72);

  color: var(--pb-fg);

  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace;

  font-size: 12px;

  letter-spacing: .04em;

  z-index: 99999;

  opacity: 0;

  pointer-events:none;

  transition: opacity .18s ease;

}

.pb-arcade__toast[data-open="1"]{ opacity: 1; }



/* Sidebar play button */

.pb-arcade__playBtn{

  display:inline-flex;

  align-items:center;

  gap:10px;

  padding: 10px 14px;

  border-radius: 14px;

  border: 1px solid var(--pb-line);

  background: linear-gradient(180deg, rgba(0,0,0,.55), rgba(0,0,0,.68));

  color: var(--pb-fg);

  text-decoration:none !important;

  box-shadow: 0 18px 40px rgba(0,0,0,.40);

}

.pb-arcade__playBtn:hover{ transform: translateY(-1px); }

.pb-arcade__playIcon{

  width: 26px; height: 26px;

  display:inline-flex; align-items:center; justify-content:center;

  border-radius: 999px;

  border: 1px solid var(--pb-line2);

  background: rgba(0,0,0,.35);

  font-weight: 700;

}

.pb-arcade__playText{

  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace;

  font-size: 12px;

  letter-spacing: .06em;

}



/* Fullscreen support */

.pb-arcade__frame:fullscreen{

  background: #000;

  padding: 0;

  margin: 0;

  border-radius: 0;

}

.pb-arcade__frame:fullscreen .pb-arcade__iframe{

  width: 100% !important;

  height: 100vh !important;

  border-radius: 0 !important;

}



.pb-arcade__playMeta{

  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace;

  font-size: 11px;

  letter-spacing: .08em;

  color: var(--pb-dim);

  padding-left: 8px;

  border-left: 1px solid var(--pb-line2);

}





/* Leaderboard */

.pb-arcade__leaderboard{ display:flex; flex-direction:column; gap:10px; }

.pb-arcade__lbRow{

  display:grid; grid-template-columns: 72px minmax(180px,1.4fr) repeat(3,minmax(110px,.8fr));

  gap:10px; align-items:center;

  padding: 12px;

  border:1px solid var(--pb-line2);

  border-radius: 14px;

  background: rgba(0,0,0,.3);

}

.pb-arcade__lbRank{

  font-family: ui-monospace, monospace; font-size: 20px; font-weight: 900; color: var(--pb-fg);

}

.pb-arcade__lbIdentity{ min-width:0; }

.pb-arcade__lbStat{ text-align:right; }

.pb-arcade__lbLabel{ font-family: ui-monospace, monospace; letter-spacing:.12em; text-transform:uppercase; font-size:11px; color:var(--pb-dim); }

.pb-arcade__lbValue{ font-weight:800; font-size:16px; color:var(--pb-fg); }

.pb-arcade__identityLink, .pb-arcade__identityLink:visited{ color: var(--pb-fg); text-decoration:none; font-weight:700; }

.pb-arcade__ghost{ color: var(--pb-dim); font-family: ui-monospace, monospace; }

@media (max-width: 900px){

  .pb-arcade__lbRow{ grid-template-columns: 64px 1fr; }

  .pb-arcade__lbStat{ text-align:left; }

}



.pb-arcade__leaderboardPanel{

  margin-top: 14px;

  padding: 14px;

  border: 1px solid var(--pb-line2);

  border-radius: 16px;

  background: rgba(0,0,0,.28);

}

.pb-arcade__leaderboardHeader{

  display:flex;

  justify-content:space-between;

  align-items:flex-start;

  gap:12px;

  margin-bottom:12px;

}

.pb-arcade__leaderboardTitle{ font-size:18px; font-weight:800; margin-top:4px; }

.pb-arcade__leaderboardFilters{ display:flex; gap:8px; flex-wrap:wrap; }

.pb-arcade__leaderboardMeta{ margin-bottom: 10px; }

.pb-arcade__btn--sm{ padding: 7px 10px; font-size: 11px; }

.pb-arcade__btn.is-active{ border-color: var(--pb-line); background: rgba(0,255,200,.10); }

@media (max-width: 900px){

  .pb-arcade__leaderboardHeader,

  .pb-arcade__head--game,

  .pb-arcade__foot{ flex-direction:column; align-items:flex-start; }

  .pb-arcade__stat{ text-align:left; }

}





.pb-arcade__featureWrap{ margin-bottom: 18px; }

.pb-arcade__featureCard{

  display:grid;

  grid-template-columns: minmax(280px, 1.1fr) minmax(260px, .9fr);

  gap:0;

  overflow:hidden;

  text-decoration:none;

  border:1px solid var(--pb-line);

  border-radius: 18px;

  background: linear-gradient(180deg, rgba(0,0,0,.42), rgba(0,0,0,.6));

  box-shadow: 0 20px 60px rgba(0,0,0,.45);

}

.pb-arcade__featureCard:hover{ transform: translateY(-2px); }

.pb-arcade__featureMedia{

  min-height: 260px;

  background: radial-gradient(circle at 20% 20%, rgba(0,255,200,.16), transparent 45%), rgba(0,255,200,.07);

  background-size: cover;

  background-position:center;

}

.pb-arcade__featureBody{

  display:flex;

  flex-direction:column;

  justify-content:center;

  gap:12px;

  padding: 22px;

}

.pb-arcade__featureTitle{ font-size: 30px; line-height:1.05; font-weight:900; color:var(--pb-fg); }

.pb-arcade__featureSlug{ font-family: ui-monospace, monospace; color: var(--pb-dim); font-size: 13px; letter-spacing:.08em; }

.pb-arcade__featureMeta{ display:flex; gap:8px; flex-wrap:wrap; }

.pb-arcade__cardFlag{ margin-bottom:6px; font-family: ui-monospace, monospace; font-size:11px; letter-spacing:.14em; color: var(--pb-dim); }

.pb-arcade__card.is-featured{ border-color: var(--pb-line); }



@media (max-width: 900px){

  .pb-arcade__featureCard{ grid-template-columns: 1fr; }

  .pb-arcade__featureMedia{ min-height: 190px; }

  .pb-arcade__title--xl{ font-size: 26px; }

  .pb-arcade__featureTitle{ font-size: 24px; }

}


.pb-arcade__toastDock{
  position: fixed;
  left: 18px;
  bottom: 18px;
  display:flex;
  flex-direction:column;
  gap:10px;
  z-index:99999;
  pointer-events:none;
}
.pb-arcade__toast{
  position: relative;
  left:auto;
  bottom:auto;
  transform: translateX(0) translateY(12px) scale(.96);
  opacity: 0;
  transition: opacity .18s ease, transform .22s ease;
}
.pb-arcade__toast[data-open="1"]{ opacity: 1; transform: translateX(0) translateY(0) scale(1); }
.pb-arcade__toast.is-success{ border-color: rgba(0,255,200,.45); box-shadow: 0 10px 30px rgba(0,0,0,.35); }
.pb-arcade__toast.is-xp{
  border-color: rgba(0,170,255,.42);
  background: rgba(0,18,30,.88);
  font-weight: 900;
  box-shadow: 0 0 18px rgba(0,170,255,.18), 0 14px 30px rgba(0,0,0,.38);
}
.pb-arcade__lbRow--stats{ grid-template-columns: repeat(4, minmax(120px,1fr)); }
@media (max-width: 900px){
  .pb-arcade__toastDock{ left: 10px; right: 10px; bottom: 10px; }
  .pb-arcade__lbRow--stats{ grid-template-columns: repeat(2, minmax(120px,1fr)); }
}