/* The arcade header, on every game (Kota 10/2: "the top bar is the same for every game").
   Copied from the arcade's own .top/.bar/.mark/.chip/.me/.slotA rules in arcade-mock.html, so
   the PLAYBEBIDA mark sits on the same spot as on the arcade. Used by arcade-header.js (the
   static games) and pick5-play/dev/Topbar.tsx (Pick 5); build.py links it into each game page. */
.pb-top{box-sizing:border-box;width:100%;align-self:stretch;position:sticky;top:env(safe-area-inset-top,0px);z-index:20;background:#141414;border-bottom:3px solid #000;color:#fff}
.pb-bar{box-sizing:border-box;max-width:1240px;margin:0 auto;padding:12px 24px;display:flex;flex-wrap:wrap;align-items:center;gap:12px 18px}
.pb-mark{display:block;font-family:Teko,'Archivo Narrow',system-ui,sans-serif;font-weight:700;font-size:34px;line-height:.9;letter-spacing:.5px;color:#F2D233;text-shadow:3px 3px 0 #000;white-space:nowrap;text-decoration:none}
.pb-mark span{color:#fff}
.pb-game{display:flex;align-items:center;gap:10px;font-family:Teko,system-ui,sans-serif;font-weight:700;font-size:28px;line-height:.9;letter-spacing:.5px;color:#fff;text-decoration:none;white-space:nowrap}
.pb-game::before{content:"";width:3px;height:26px;background:#2D2D2D;border-radius:2px}
.pb-tabs{display:flex;gap:8px;flex-wrap:wrap}
.pb-tab{font-family:Teko,system-ui,sans-serif;font-weight:600;font-size:19px;letter-spacing:.8px;line-height:1;padding:7px 12px 4px;border-radius:8px;background:#2D2D2D;color:#fff;box-shadow:3px 3px 0 #000;text-decoration:none;text-transform:uppercase}
.pb-tab[aria-current="page"]{background:#F2D233;color:#0D0D0D}
/* Home + Back (Kota 10/5): dark chips at either end of the bar */
.pb-nav{display:flex;align-items:center;gap:6px;height:36px;padding:0 12px 0 8px;border-radius:8px;background:#2D2D2D;color:#fff;box-shadow:3px 3px 0 #000;text-decoration:none;font-family:Teko,system-ui,sans-serif;font-weight:600;font-size:20px;letter-spacing:.8px;line-height:1;text-transform:uppercase;white-space:nowrap}
.pb-nav span{padding-top:3px}
.pb-nav svg{width:20px;height:20px;flex:0 0 20px}
.pb-nav:hover{background:#3A3A3A}
.pb-nav:active{transform:translate(2px,2px);box-shadow:1px 1px 0 #000}
.pb-nav:focus-visible{outline:3px solid #F2D233;outline-offset:2px}
.pb-home{margin-left:auto}
.pb-home~.pb-me{margin-left:0}
/* the mid-game warning: an in-page modal, never a browser dialog */
.pb-leave{position:fixed;inset:0;z-index:1000;display:grid;place-items:center;padding:16px;background:rgba(0,0,0,.66)}
.pb-leave-card{box-sizing:border-box;width:100%;max-width:360px;padding:22px 20px 20px;border-radius:14px;background:#141414;border:3px solid #000;box-shadow:6px 6px 0 #000;color:#fff;font-family:Archivo,'Helvetica Neue',Arial,sans-serif;text-align:center}
.pb-leave-card h2{margin:0;font-family:Teko,system-ui,sans-serif;font-weight:700;font-size:34px;line-height:1;letter-spacing:.5px;text-transform:uppercase;color:#F2D233}
.pb-leave-card p{margin:10px 0 0;text-wrap:balance;font-size:15px;line-height:1.4;color:#ddd}
.pb-leave-row{display:flex;gap:12px;margin-top:20px}
.pb-leave-row button{flex:1;min-height:48px;border-radius:10px;border:3px solid #000;box-shadow:3px 3px 0 #000;font-family:Teko,system-ui,sans-serif;font-weight:700;font-size:22px;letter-spacing:.6px;line-height:1;text-transform:uppercase;cursor:pointer;padding-top:4px}
.pb-leave-stay{background:#F2D233;color:#0D0D0D}
.pb-leave-go{background:#2D2D2D;color:#fff}
.pb-leave-row button:active{transform:translate(2px,2px);box-shadow:1px 1px 0 #000}
.pb-leave-row button:focus-visible{outline:3px solid #fff;outline-offset:2px}
.pb-me{margin-left:auto;display:flex;align-items:center;gap:8px;font-family:Archivo,'Helvetica Neue',Arial,sans-serif;font-weight:600;font-size:14px;color:#fff;text-decoration:none}
.pb-me i{width:34px;height:34px;border-radius:50%;background:#F2D233;color:#0D0D0D;font-style:normal;font-family:Teko,system-ui,sans-serif;font-weight:700;font-size:20px;display:grid;place-items:center;box-shadow:2px 2px 0 #000}
.pb-slot{background:#F2D233;color:#0D0D0D}
.pb-slot div{max-width:1240px;margin:0 auto;padding:6px 24px;display:flex;align-items:center;justify-content:center;gap:8px;font-family:Archivo,'Helvetica Neue',Arial,sans-serif;font-weight:700;font-size:12px;letter-spacing:1.4px;text-transform:uppercase}
.pb-slot i{width:12px;height:12px;border-radius:3px;background:#0D0D0D}
@media(max-width:600px){
  .pb-bar,.pb-slot div{padding-inline:16px}
  .pb-mark{font-size:28px} .pb-game::before{height:22px}
  /* one line on a phone, whatever the game's name: it takes the room left and trims, Profile is just its circle */
  .pb-game{font-size:24px;flex:1 1 0;min-width:0;overflow:hidden;text-overflow:ellipsis;display:block;padding-left:13px;position:relative}
  .pb-game::before{position:absolute;left:0;top:50%;transform:translateY(-50%)}
  .pb-me span{display:none}
  .pb-tabs{order:5;flex-basis:100%}
  /* icons only on a phone */
  .pb-nav{padding:0;width:36px;justify-content:center} .pb-nav span{display:none}
  .pb-bar{gap:12px 10px}
}

/* V2 links build: no profile page */
.pb-me{display:none!important}