/* Sheet rows 196/197. Tier colour is per-package, the way his design runs a different accent down
   each card. Everything else leans on style.css so these pages cannot drift from the rest. */
.pk{--pk1:#29a9e4;--pk2:#8a35e8;--pk3:#e8a626;--pk4:#e0457b;--pk2t:#a06bf5;--pk4t:#f07098}
/* Row 312 (Dennis, 9/2): animated banner at the top of the Games page. Row 314: the LaunchBox
   promo image sits right above the four package cards. */
.pk-herobanner{margin:0 0 22px}
.pk-hero-vid{width:100%;height:auto;display:block;border-radius:14px;border:1px solid rgba(53,64,127,.5)}
.pk-launchbox{margin:22px 0 0}
.pk-launchbox img{width:100%;height:auto;display:block;border-radius:14px;border:1px solid rgba(53,64,127,.5)}
.pk-steps{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(12px,1.6vw,20px);margin:26px 0 0;padding:0;list-style:none}
.pk-card{position:relative;display:flex;flex-direction:column;gap:10px;background:var(--panel);border:1px solid rgba(53,64,127,.55);border-radius:12px;padding:20px 18px 18px}
.pk-card[data-t="1"]{border-color:rgba(41,169,228,.5)}.pk-card[data-t="2"]{border-color:rgba(138,53,232,.5)}
.pk-card[data-t="3"]{border-color:rgba(232,166,38,.5)}.pk-card[data-t="4"]{border-color:rgba(224,69,123,.5)}
.pk-step{position:absolute;top:-14px;left:18px;width:28px;height:28px;display:grid;place-items:center;border-radius:50%;background:var(--void);border:1px solid currentColor;font-family:var(--display);font-size:.85rem}
.pk-card[data-t="1"] .pk-step{color:var(--pk1)}.pk-card[data-t="2"] .pk-step{color:var(--pk2t)}
.pk-card[data-t="3"] .pk-step{color:var(--pk3)}.pk-card[data-t="4"] .pk-step{color:var(--pk4t)}
.pk-card h3,.pk-card .pk-title{font-family:var(--display);text-transform:uppercase;font-size:1.15rem;margin:6px 0 0;line-height:1.1}
.pk-inc{opacity:.85}
.pk-all{display:block;margin:18px auto 0;background:none;border:1px solid rgba(53,64,127,.6);border-radius:999px;color:var(--blue-lit);font-family:var(--display);text-transform:uppercase;font-size:.76rem;letter-spacing:.06em;padding:0 20px;min-height:44px;cursor:pointer}
.pk-all:hover{border-color:var(--amber);color:var(--amber)}
.pk-all:focus-visible{outline:2px solid var(--amber);outline-offset:2px}
.pk-rest{margin-top:.8rem}
.pk-price{align-self:flex-start;font-family:var(--display);text-transform:uppercase;font-size:.72rem;letter-spacing:.06em;border:1px solid currentColor;border-radius:999px;padding:5px 11px}
.pk-card[data-t="1"] .pk-price{color:var(--pk1)}.pk-card[data-t="2"] .pk-price{color:var(--pk2t)}
.pk-card[data-t="3"] .pk-price{color:var(--pk3)}.pk-card[data-t="4"] .pk-price{color:var(--pk4t)}
.pk-num{font-family:var(--display);font-size:1.9rem;line-height:1}
.pk-num span{font-size:.9rem;color:var(--muted);margin-left:6px}
.pk-lead{color:#C8CEE0;font-size:.92rem;line-height:1.45;flex:1}
.pk-best{display:block;color:var(--muted);font-size:.78rem;text-transform:uppercase;letter-spacing:.06em}
.pk-best b{display:block;color:var(--text);font-family:var(--display);font-size:.9rem;letter-spacing:0;text-transform:none;margin-top:2px}
/* Amber is the only action colour, site-wide (colour review 8/29: a tier-coloured button turns a
   category code into an action code). And not merely amber - the exact site button: same
   gradient, chamfer clip and glow as .btn-coin, so /games has one action language, not two. */
.pk-go{display:block;text-align:center;text-decoration:none;padding:11px 13px;font-family:var(--display);text-transform:uppercase;font-size:.8rem;letter-spacing:.04em;color:#1A1205;background:linear-gradient(180deg,#FFC95A,var(--amber));clip-path:var(--chamfer);box-shadow:0 0 22px rgba(255,176,32,.35)}
.pk-go:hover{filter:brightness(1.07)}
.pk-go:focus-visible{outline:2px solid #fff;outline-offset:2px}
/* hybrid card: his artwork on top, the info panel as real HTML below (Louis's rule: images may
   carry artwork and labels, never controls). Panel border takes the tier colour like his design. */
.pk-card--art{padding:0}
.pk-art{display:block;width:100%;height:auto;border-radius:11px 11px 0 0}
/* Dennis, 8/30: the Arcade Gamer picture was smaller than the other three. His four card arts are
   all 760 wide but not the same height - the Arcade one is 544 against 608/616 - because each was
   cropped above the painted panel in his own design. One ratio for all four, filled rather than
   letterboxed, so the row reads as one set. */
.pk-card--art .pk-art{aspect-ratio:760/608;height:auto;object-fit:contain;object-position:center;background:var(--panel)}
.pk-panel{display:flex;flex-direction:column;gap:9px;padding:14px 14px 16px;flex:1;border-top:2px solid}
.pk-card[data-t="1"] .pk-panel{border-color:var(--pk1)}.pk-card[data-t="2"] .pk-panel{border-color:var(--pk2t)}
.pk-card[data-t="3"] .pk-panel{border-color:var(--pk3)}.pk-card[data-t="4"] .pk-panel{border-color:var(--pk4t)}
.pk-row{display:flex;align-items:baseline;justify-content:space-between;gap:10px}
.pk-row--foot{flex-direction:column;align-items:stretch;gap:10px;margin-top:auto}
.pk-row--foot .pk-go{text-align:center}
.pk-panel .pk-num{margin:0;font-size:1.5rem}
.pk-panel .pk-go{flex:0 0 auto;line-height:1.2;padding:10px 13px;font-size:.74rem}
.pk-note{margin:16px 0 0;text-align:center;color:var(--blue-lit);font-family:var(--display);text-transform:uppercase;font-size:.74rem;letter-spacing:.08em;border:1px solid rgba(53,64,127,.5);border-radius:999px;padding:10px}
.pk-help{display:flex;flex-wrap:wrap;align-items:center;gap:14px;justify-content:space-between;margin:18px 0 0;background:var(--panel);border:1px solid rgba(53,64,127,.5);border-radius:12px;padding:18px}
.pk-help p{margin:0;color:#C8CEE0}.pk-help h2{font-family:var(--display);text-transform:uppercase;font-size:1.1rem;margin:0 0 4px}
/* package page */
.pk .crumb a{text-decoration:underline}
.pk-tabs{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 18px;padding:0;list-style:none}
.pk-tabs a{display:block;text-decoration:none;border:1px solid rgba(53,64,127,.6);border-radius:8px;padding:9px 14px;font-family:var(--display);text-transform:uppercase;font-size:.76rem;letter-spacing:.04em;color:#C8CEE0}
.pk-tabs a[aria-current="page"]{border-color:var(--blue);color:var(--blue-lit);background:rgba(0,136,201,.1)}
.pk-hero h1{font-family:var(--display);text-transform:uppercase;font-size:clamp(2.2rem,5vw,3.6rem);line-height:.95;margin:6px 0 12px}
/* Rows 211-215: his layout - the console art fills the right of the hero and fades in behind the
   copy, the way his mockup composes it, rather than sitting in a box beside it. */
.pk-hero--art{position:relative;min-height:320px;display:flex;align-items:center;border-radius:14px;overflow:hidden}
.pk-hero--art .pk-hero-copy{position:relative;z-index:1;max-width:min(52%,560px);padding:26px 0 26px 24px}
.pk-hero-art{position:absolute;top:0;right:0;bottom:0;left:34%;width:auto;height:100%;object-fit:cover;object-position:center;
  -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 26%);mask-image:linear-gradient(90deg,transparent 0,#000 26%)}
@media(max-width:880px){
  .pk-hero--art{display:block;min-height:0;overflow:visible}
  .pk-hero--art .pk-hero-copy{max-width:none;padding:0}
  .pk-hero-art{position:static;width:100%;height:auto;margin:0 0 16px;border-radius:12px;-webkit-mask-image:none;mask-image:none}
}
.pk-chips{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 14px;padding:0;list-style:none}
.pk-chips li{border:1px solid rgba(53,64,127,.6);border-radius:999px;padding:6px 12px;font-family:var(--display);text-transform:uppercase;font-size:.72rem;letter-spacing:.05em;color:#C8CEE0}
.pk-stats{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:0;border:1px solid rgba(53,64,127,.5);border-radius:12px;background:var(--void);margin:22px 0}
.pk-stats>div{padding:16px 14px;text-align:center;border-left:1px solid rgba(53,64,127,.5)}
.pk-stats>div:first-child{border-left:0}
.pk-stats b{display:block;font-family:var(--display);font-size:1.4rem;color:var(--blue-lit)}
.pk-stats span{display:block;color:var(--muted);font-size:.72rem;text-transform:uppercase;letter-spacing:.07em;margin-top:3px}
.pk-sys{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:12px;margin:14px 0 0;padding:0;list-style:none}
.pk-sys a{display:block;text-decoration:none;color:inherit;background:var(--panel);border:1px solid rgba(53,64,127,.5);border-radius:10px;padding:14px}
.pk-sys a:hover{border-color:var(--blue)}
.pk-sys strong{display:block;font-family:var(--display);text-transform:uppercase;font-size:.9rem;line-height:1.2}
.pk-sys span{display:block;color:var(--blue-lit);font-size:.8rem;margin-top:4px}
.pk-next{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:14px;margin:24px 0 0;background:var(--panel);border:1px solid rgba(53,64,127,.5);border-radius:12px;padding:18px}
.pk-next h2{font-family:var(--display);text-transform:uppercase;font-size:1.05rem;margin:0 0 4px}
.pk-next p{margin:0;color:var(--muted);font-size:.9rem}
@media(max-width:900px){.pk-steps{grid-template-columns:repeat(2,minmax(0,1fr))}.pk-stats{grid-template-columns:repeat(2,minmax(0,1fr))}.pk-stats>div:nth-child(3){border-left:0}.pk-stats>div:nth-child(n+3){border-top:1px solid rgba(53,64,127,.5)}}
@media(max-width:560px){.pk-steps{grid-template-columns:1fr}}