/* Pink Penguin Games — the one header every page shares. Loaded by /shared/site.js. Uses tokens.css. */
:root{ --pps-h:80px; }
@media (max-width:760px){ :root{ --pps-h:60px; } }
@media (max-width:760px){ :root:has(.pps.in-game){ --pps-h:56px; } }
.pps{position:sticky;top:0;z-index:1000;height:var(--pps-h);flex:none;display:flex;align-items:center;gap:12px;
  padding:0 max(32px,env(safe-area-inset-right)) 0 max(32px,env(safe-area-inset-left));
  background:var(--pp-bg);color:var(--pp-text);font-family:var(--pp-font-body);
  -webkit-user-select:none;user-select:none;box-sizing:border-box}
.pps.in-game{padding-left:max(16px,env(safe-area-inset-left));padding-right:max(16px,env(safe-area-inset-right));box-shadow:0 1px 0 var(--pp-edge)}
.pps *{box-sizing:border-box}
.pps a{color:inherit;text-decoration:none}
.pps-in{display:contents}
.pps:not(.in-game) .pps-in{display:flex;align-items:center;gap:20px;width:100%;max-width:1136px;margin:0 auto}

/* logo: lockup on desktop pages, penguin icon on phones and inside games. Light/dark files swap with the theme. */
.pps-brand{display:flex;align-items:center;flex:none;border-radius:6px}
.pps-brand img{display:block}
.pps-lockup img{height:42px;width:auto}
.pps-icon{display:none}
.pps-icon img{width:36px;height:36px}
.pps.in-game .pps-lockup{display:none}
.pps.in-game .pps-icon{display:block}
.pps .dk{display:none}
@media (prefers-color-scheme:dark){ :root:not([data-theme="light"]) .pps .lt{display:none} :root:not([data-theme="light"]) .pps .dk{display:block} }
:root[data-theme="dark"] .pps .lt{display:none}
:root[data-theme="dark"] .pps .dk{display:block}

/* breadcrumb */
.pps-crumbs{display:flex;align-items:center;gap:6px;min-width:0;flex:1;color:var(--pp-muted)}
.pps-crumb{color:var(--pp-text)!important;font-weight:800;font-size:15px;display:inline-flex;align-items:center;min-height:44px;padding:0 4px}
.pps-crumb:hover{color:var(--pp-accent)!important}
.pps-sep{width:16px;height:16px;flex:none;stroke:currentColor;fill:none;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round}
.pps-here{font-weight:800;font-size:15px;color:var(--pps-zc,var(--pp-text))}
.pps-chip{display:inline-flex;align-items:center;gap:2px;height:44px;padding:0 12px 0 6px;border-radius:6px;background:var(--pp-paper);box-shadow:var(--pp-sheet);color:var(--pp-text)!important;font-weight:800;font-size:14px;flex:none;transition:transform .15s}
.pps-chip:hover{transform:translateY(-1px)}
.pps-chip svg{width:18px;height:18px;stroke:currentColor;fill:none;stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round}
.pps-game{font-family:var(--pp-font-display);font-weight:600;font-size:21px;line-height:1.1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0;color:var(--pp-text)}
.pps-zone-title{font-family:var(--pp-font-display);font-weight:600;font-size:19px;color:var(--pps-zc,var(--pp-text))}

/* sound + theme */
.pps-tools{display:flex;gap:10px;flex:none;margin-left:auto}
.pps-btn{width:44px;height:44px;border-radius:999px;border:0;background:var(--pp-paper);color:var(--pp-text);box-shadow:var(--pp-sheet);display:inline-flex;align-items:center;justify-content:center;cursor:pointer;padding:0;transition:transform .15s}
.pps-btn:hover{transform:translateY(-1px)}
.pps-btn svg{width:21px;height:21px;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.pps-btn.off{color:var(--pp-muted)}
.pps a:focus-visible,.pps-btn:focus-visible{outline:3px dashed var(--pp-focus);outline-offset:3px}

.pps[data-z="arcade"]{--pps-zc:var(--pp-zone-arcade)}
.pps[data-z="classics"]{--pps-zc:var(--pp-zone-classics)}
.pps[data-z="kids"]{--pps-zc:var(--pp-zone-kids)}
.pps[data-z="bible"]{--pps-zc:var(--pp-zone-bible)}

/* desktop zone page: "Home › Classics"; phone: "‹ Home" chip + zone title */
.pps-phone{display:none!important}
@media (max-width:760px){
  .pps{gap:8px;padding:0 max(10px,env(safe-area-inset-right)) 0 max(12px,env(safe-area-inset-left))}
  .pps:not(.in-game) .pps-in{gap:8px}
  .pps-lockup img{height:30px}
  .pps.has-zone .pps-lockup{display:none}
  .pps.has-zone .pps-icon{display:block}
  .pps-icon img{width:30px;height:30px}
  .pps-desk{display:none!important}
  .pps-phone{display:inline-flex!important}
  .pps-tools{gap:8px}
  .pps-game{font-size:19px}
  .pps.in-game .pps-btn{width:40px;height:40px}
  .pps.in-game .pps-chip{height:40px}
}
@media (max-width:340px){ .pps.in-game .pps-chip span{display:none} .pps.in-game .pps-chip{padding:0 8px 0 6px} }