/* ============================================================
   PROCYBER ARCADE — "PAC-HUNT"  (self-hosted, 0 external requests)
   ============================================================ */
#pcgame{ position:fixed; inset:0; z-index:9600; display:grid; place-items:center; padding:16px;
  background:radial-gradient(130% 130% at 50% 0%, rgba(10,16,40,.92), rgba(2,4,11,.985));
  font-family:"Space Mono",ui-monospace,monospace; -webkit-tap-highlight-color:transparent; }
#pcgame[hidden]{ display:none; }

.pcg-panel{ position:relative; width:100%; max-width:min(95vw,496px); padding:18px 18px 13px; border-radius:20px;
  background:linear-gradient(180deg,rgba(12,20,44,.98),rgba(5,9,22,.99)); border:1px solid rgba(60,240,255,.28);
  box-shadow:0 50px 140px -30px rgba(47,244,255,.45), inset 0 0 0 1px rgba(60,240,255,.05), inset 0 0 70px rgba(123,98,255,.06); }

.pcg-x,.pcg-snd{ position:absolute; top:11px; width:34px; height:34px; border-radius:10px; cursor:pointer; z-index:6; line-height:1;
  display:grid; place-items:center; transition:background .2s, transform .2s; }
.pcg-x{ right:11px; background:rgba(255,61,240,.1); border:1px solid rgba(255,61,240,.4); color:#ff9df4; font-size:13px; }
.pcg-x:hover{ background:rgba(255,61,240,.22); }
.pcg-snd{ right:53px; background:rgba(60,240,255,.08); border:1px solid rgba(60,240,255,.32); color:#7fe9ff; font-size:14px; }
.pcg-snd:hover{ background:rgba(60,240,255,.18); }

.pcg-head{ text-align:center; margin-bottom:10px; }
.pcg-title{ font-family:"Chakra Petch",sans-serif; font-weight:700; letter-spacing:.18em; font-size:17px; color:#dce8ff; }
.pcg-title b{ color:#2ff4ff; }
.pcg-sub{ display:block; font-size:9px; letter-spacing:.16em; color:#8294ba; margin-top:4px; text-transform:uppercase; }

.pcg-hud{ display:flex; justify-content:space-between; align-items:center; gap:8px; font-size:10px; letter-spacing:.05em; color:#8294ba; margin-bottom:9px; padding:0 3px; }
.pcg-hud b{ color:#5dffb0; font-size:13px; margin-left:4px; }
.pcg-hud .pcg-lvl b{ color:#ffae3d; }
.pcg-hud .pcg-hi b{ color:#7b62ff; }
.pcg-lives{ display:inline-flex; gap:3px; align-items:center; min-width:54px; }
.pcg-life{ width:11px; height:11px; border-radius:50%;
  background:radial-gradient(circle at 35% 30%, #eafff6, #5dffb0 45%, #7b62ff 90%); box-shadow:0 0 6px rgba(93,255,176,.6); }

.pcg-stage{ position:relative; display:grid; place-items:center; border-radius:11px; overflow:hidden; background:#05080f; }
#pcgCanvas{ width:100%; max-width:418px; height:auto; display:block; image-rendering:auto; }
.pcg-scan{ position:absolute; inset:0; pointer-events:none; mix-blend-mode:overlay; opacity:.6;
  background:repeating-linear-gradient(0deg, rgba(0,0,0,0) 0, rgba(0,0,0,0) 2px, rgba(0,0,0,.5) 3px); }
.pcg-vig{ position:absolute; inset:0; pointer-events:none; box-shadow:inset 0 0 70px rgba(0,0,0,.66); border-radius:11px; }

.pcg-overlay{ position:absolute; inset:0; display:none; place-content:center; justify-items:center; text-align:center; padding:16px;
  background:rgba(3,6,16,.85); z-index:5; overflow:auto; }
.pcg-overlay.show{ display:grid; }
.pcg-overlay .big{ font-family:"Chakra Petch",sans-serif; font-weight:700; font-size:clamp(20px,6vw,30px); letter-spacing:.04em; line-height:1.1; }
.pcg-overlay .grad{ background:linear-gradient(110deg,#2ff4ff,#5dffb0 48%,#7b62ff 78%,#ff3df0); -webkit-background-clip:text; background-clip:text; color:transparent; }
.pcg-overlay .small{ font-size:11px; letter-spacing:.08em; color:#aeb9d6; margin-top:8px; line-height:1.6; }
.pcg-overlay .cta{ margin-top:12px; font-size:10.5px; letter-spacing:.18em; color:#2ff4ff; }
.pcg-code{ display:inline-block; margin-top:12px; font-size:13px; letter-spacing:.16em; color:#5dffb0; padding:8px 16px; border-radius:9px;
  border:1px dashed rgba(93,255,176,.5); background:rgba(93,255,176,.06); }

.pcg-row{ display:flex; gap:10px; justify-content:center; margin-top:14px; flex-wrap:wrap; }
.pcg-btn{ cursor:pointer; font-family:"Chakra Petch",sans-serif; font-size:12px; font-weight:500; letter-spacing:.1em; text-transform:uppercase;
  padding:11px 22px; border-radius:11px; border:1px solid rgba(60,240,255,.42); background:rgba(47,244,255,.08); color:#eafcff; transition:background .2s, transform .15s; }
.pcg-btn:hover{ background:rgba(47,244,255,.2); transform:translateY(-1px); }
.pcg-btn.alt{ border-color:rgba(123,98,255,.45); background:rgba(123,98,255,.12); }
.pcg-btn.alt:hover{ background:rgba(123,98,255,.24); }

.pcg-board{ width:100%; max-width:330px; border-collapse:collapse; margin:12px auto 0; font-size:11px; }
.pcg-board caption{ font-family:"Chakra Petch",sans-serif; letter-spacing:.16em; font-size:12px; color:#ffae3d; text-transform:uppercase; margin-bottom:6px; }
.pcg-board th{ color:#2ff4ff; font-size:8.5px; letter-spacing:.1em; text-transform:uppercase; text-align:left; padding:3px 7px; border-bottom:1px solid rgba(60,240,255,.22); }
.pcg-board td{ padding:4px 7px; border-bottom:1px solid rgba(120,170,255,.08); color:#c2d0ee; }
.pcg-board td.r{ color:#ffae3d; width:22px; }
.pcg-board td.s{ color:#5dffb0; text-align:right; }
.pcg-board td.lv{ color:#7b62ff; text-align:right; width:34px; }
.pcg-board tr.me td{ color:#fff; text-shadow:0 0 8px rgba(93,255,176,.6); }

.pcg-name{ background:rgba(10,18,40,.7); border:1px solid rgba(60,240,255,.45); color:#eafcff; font-family:"Space Mono",monospace;
  font-size:15px; letter-spacing:.14em; text-align:center; padding:11px; border-radius:10px; width:min(78vw,220px); text-transform:uppercase; outline:none; }
.pcg-name:focus{ border-color:#2ff4ff; box-shadow:0 0 0 3px rgba(47,244,255,.15); }

.pcg-foot{ text-align:center; font-size:9px; letter-spacing:.08em; color:#8294ba; margin-top:9px; }

.pcg-dpad{ display:none; }
@media (max-width:620px){
  .pcg-dpad{ display:grid; grid-template-columns:repeat(3,54px); grid-template-rows:repeat(2,54px); justify-content:center; gap:6px; margin-top:13px; }
  .pcg-dpad button{ background:rgba(60,240,255,.08); border:1px solid rgba(60,240,255,.32); color:#7fe9ff; border-radius:12px; font-size:18px; cursor:pointer; touch-action:none; }
  .pcg-dpad button:active{ background:rgba(60,240,255,.26); }
  .pcg-dpad button[data-dir="up"]{ grid-column:2; grid-row:1; }
  .pcg-dpad button[data-dir="left"]{ grid-column:1; grid-row:2; }
  .pcg-dpad button[data-dir="down"]{ grid-column:2; grid-row:2; }
  .pcg-dpad button[data-dir="right"]{ grid-column:3; grid-row:2; }
}

/* footer launcher in the main site */
.arcade-launch{ cursor:pointer; }
.arcade-launch:hover{ color:#5dffb0 !important; }