.packet-game .game-hero { background: linear-gradient(135deg, #0b3d5c, #1769aa 55%, #18a999); }
.pk-side { text-align: center; background: radial-gradient(circle at top, #14507a, #0a2236); color: #fff; }
.pk-side .buddy p { color: #12124a; }
.pk-envelope { font-size: 4.2rem; line-height: 1; }
.pk-target { margin-top: 10px; padding: 12px; border-radius: 16px; background: rgba(255,255,255,.08); border: 2px dashed rgba(255,255,255,.35); }
.pk-target small { display: block; text-transform: uppercase; letter-spacing: .1em; opacity: .75; }
.pk-target strong { display: block; font-size: 2.2rem; }
.pk-target span { font-size: .9rem; opacity: .9; }
.pk-map { position: relative; height: 380px; border-radius: 18px; background: radial-gradient(circle at 30% 20%, #17406b, #0a1e33); overflow: hidden; }
.pk-map svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.pk-map line { stroke: #4b6a8f; stroke-width: 1.2; vector-effect: non-scaling-stroke; stroke-width: 4px; stroke-linecap: round; }
.pk-map line.used { stroke: #ffd23f; filter: drop-shadow(0 0 4px #ffd23f); }
.pk-map line.down { stroke: #ee4266; stroke-dasharray: 6 6; }
.pk-node { position: absolute; transform: translate(-50%, -50%); display: flex; flex-direction: column; align-items: center; gap: 2px; width: 92px; padding: 6px 4px; border: 3px solid transparent; border-radius: 16px; background: #1d3b5c; color: #e6f0ff; cursor: pointer; transition: transform .15s, border-color .15s, background .15s; z-index: 1; }
.pk-node:hover { transform: translate(-50%, -50%) scale(1.07); }
.pk-node:focus-visible { outline: 3px solid #ffd23f; outline-offset: 2px; }
.pk-node .icon { font-size: 1.8rem; line-height: 1; }
.pk-node .name { font-size: .72rem; font-weight: 700; line-height: 1.1; text-align: center; }
.pk-node.start { border-color: #3bceac; }
.pk-node.goal { border-color: #ffd23f; box-shadow: 0 0 14px rgba(255,210,63,.6); }
.pk-node.picked { background: #2f5f94; }
.pk-node.hacked { background: #5a1a2e; border-color: #ee4266; }
.pk-node.lit { background: #18a999; }
.pk-node .badge { position: absolute; top: -10px; right: -6px; font-size: 1.1rem; }
.pk-node .step { position: absolute; top: -10px; left: -8px; display: grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; background: #ffd23f; color: #12124a; font-weight: 900; font-size: .8rem; }
.pk-cut { position: absolute; transform: translate(-50%, -50%); font-size: 1.4rem; z-index: 1; }
.pk-packet { position: absolute; transform: translate(-50%, -110%); font-size: 2rem; z-index: 2; transition: left .35s ease-in-out, top .35s ease-in-out; filter: drop-shadow(0 0 6px #fff); }
.pk-cards { display: grid; gap: 10px; }
.pk-cards.order { grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); }
.pk-card { display: flex; align-items: center; gap: 10px; padding: 14px; border: 3px solid #d7deea; border-radius: 16px; background: #f7f9ff; font-weight: 700; text-align: left; cursor: pointer; transition: transform .1s, border-color .15s, background .15s; }
.pk-card:hover { transform: translateY(-2px); border-color: #1769aa; }
.pk-card.picked { border-color: #18a999; background: #e3f8f4; }
.pk-num { flex: none; display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; background: #1769aa; color: #fff; font-weight: 900; }
.pk-card:not(.picked) .pk-num { background: #c3cbd9; }
.pk-mono { font-family: ui-monospace, monospace; white-space: pre; }
@media (max-width: 575px) {
  .pk-map { height: 320px; }
  .pk-node { width: 58px; padding: 4px 2px; }
  .pk-node .name { font-size: .58rem; }
  .pk-node .icon { font-size: 1.3rem; }
}