/* Site-wide progression toasts and the hub player card (js/tg-progress.js). Sits above every game's own UI,
   so it keeps to one small dark cartridge-label look that reads on light and dark games alike. */
/* Same face as the hub (arcade-home.css): the pixel font read as cheap, Chakra Petch keeps the HUD feel. */
@font-face { font-family: TGArcade; src: url('/TomGames/fonts/ChakraPetch-Bold.ttf') format('truetype'); font-display: swap; size-adjust: 122%; }
.tgp-stack {
  position: fixed; top: 12px; right: 12px; z-index: 2147483000; width: min(300px, calc(100vw - 24px));
  display: flex; flex-direction: column; gap: 8px; pointer-events: none;
}
.tgp-toast {
  --r: #ffd25b;
  position: relative; display: flex; flex-direction: column; gap: 5px; padding: 11px 13px 12px;
  background: linear-gradient(160deg, #22142f, #120a1c); color: #fff3d6; border: 2px solid var(--r); border-radius: 7px;
  box-shadow: 0 4px 0 #07040b, 0 10px 26px #0008; font: 13px/1.35 Arial, sans-serif; text-align: left; pointer-events: auto; cursor: pointer;
  opacity: 0; transform: translateX(24px) scale(.97); transition: opacity .22s, transform .32s cubic-bezier(.2, 1.4, .4, 1);
}
.tgp-toast.is-in { opacity: 1; transform: none; }
.tgp-row { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.tgp-kicker { color: var(--r); font: 8px/1.4 TGArcade, monospace; letter-spacing: .5px; }
.tgp-gain { color: #ffd25b; font: 13px/1.2 TGArcade, monospace; }
.tgp-lv { color: #62f4eb; font: 9px/1.2 TGArcade, monospace; white-space: nowrap; }
.tgp-name { color: #fff; font-size: 15px; font-weight: 900; }
.tgp-sub { color: #cbb8d8; font-size: 12px; }
.tgp-tag { align-self: flex-start; padding: 3px 6px; border-radius: 3px; background: var(--r); color: #1a0f22; font: 8px/1.3 TGArcade, monospace; }
.tgp-bar { display: block; height: 8px; border-radius: 2px; background: #ffffff1a; box-shadow: inset 0 0 0 1px #ffffff14; overflow: hidden; }
.tgp-bar i { display: block; height: 100%; background: repeating-linear-gradient(90deg, #62f4eb 0 6px, #4fd8cf 6px 8px); transition: width 1.1s cubic-bezier(.2, .8, .3, 1); }
.tgp-xp { --r: #62f4eb; }
.tgp-chal { --r: #62f4a0; }
.tgp-follow { --r: #ff70c5; color: #fff3d6; text-decoration: none; }
.tgp-guest { --r: #c7b4d8; cursor: default; padding-right: 34px; }
.tgp-guest .tgp-chip-btns { margin-top: 4px; }
.tgp-x { position: absolute; top: 5px; right: 6px; width: 26px; height: 26px; padding: 0; border: 0; border-radius: 4px;
  background: transparent; color: #cbb8d8; font: 20px/26px Arial, sans-serif; cursor: pointer; }
.tgp-x:hover, .tgp-x:focus-visible { background: #ffffff1a; color: #fff; }
.tgp-more { --r: #c7b4d8; color: #fff3d6; text-decoration: none; font-size: 12px; }
.tgp-link { color: #ffd25b; font-weight: 700; text-decoration: underline; text-underline-offset: 3px; }
.tgp-r-common { --r: #b9c4d0; } .tgp-r-uncommon { --r: #62f4a0; } .tgp-r-rare { --r: #62b8ff; }
.tgp-r-epic { --r: #c58aff; } .tgp-r-legendary { --r: #ffd25b; }
.tgp-r-legendary.is-in { animation: tgp-glint 1.6s .3s 2; }
@keyframes tgp-glint { 50% { box-shadow: 0 4px 0 #07040b, 0 0 26px #ffd25b99; } }

.tgp-levelup { --r: #ffd25b; align-items: center; text-align: center; padding: 16px 14px 14px; overflow: hidden; }
.tgp-levelup .tgp-kicker { font-size: 10px; }
.tgp-big { color: #fff; font: 34px/1.2 TGArcade, monospace; text-shadow: 3px 3px 0 #ff70c5, 0 0 18px #ffd25b88; }
.tgp-levelup.is-in .tgp-big { animation: tgp-pop .6s .15s cubic-bezier(.2, 1.6, .4, 1) backwards; }
.tgp-burst { position: absolute; left: 50%; top: 52%; width: 6px; height: 6px; pointer-events: none; }
.tgp-levelup.is-in .tgp-burst { animation: tgp-burst .9s .1s ease-out both; }
@keyframes tgp-pop { from { transform: scale(.3); opacity: 0; } }
@keyframes tgp-burst {
  from { box-shadow: 0 0 #ffd25b, 0 0 #62f4eb, 0 0 #ff70c5, 0 0 #c58aff, 0 0 #ffd25b, 0 0 #62f4eb, 0 0 #ff70c5, 0 0 #c58aff; opacity: 1; }
  to { box-shadow: -90px -34px #ffd25b, 90px -30px #62f4eb, -70px 30px #ff70c5, 74px 34px #c58aff, -120px 0 #ffd25b, 120px 4px #62f4eb, -30px -46px #ff70c5, 30px 44px #c58aff; opacity: 0; }
}

/* Hub player card */
.tgp-card:empty { display: none; }
.tgp-card {
  box-sizing: border-box; max-width: 1192px; width: calc(100% - 48px); margin: 20px auto 0;
  display: flex; align-items: center; gap: 16px; padding: 14px 16px; border: 3px solid #aa82bb; border-radius: 12px 12px 6px 6px;
  background: linear-gradient(145deg, #2d1d40, #150d22 72%); box-shadow: inset 0 0 0 2px #120a1e, 0 5px 0 #080510; color: #fff5ce;
}
.tgp-card .tgp-face { flex: 0 0 auto; width: 56px; height: 56px; border: 3px solid #62f4eb; border-radius: 8px; overflow: hidden; display: grid; place-items: center; background: #0d0816; color: #62f4eb; font: 20px TGArcade, monospace; }
.tgp-card .tgp-face img { width: 100%; height: 100%; object-fit: cover; }
.tgp-card .tgp-info { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 6px; }
.tgp-card .tgp-name { font-size: 18px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tgp-card .tgp-title { color: #ff70c5; font: 10px TGArcade, monospace; }
.tgp-card .tgp-lv { font-size: 12px; }
.tgp-card .tgp-side { display: flex; flex-direction: column; align-items: flex-end; gap: 8px; }
.tgp-pid { border: 1px dashed #8e70a0; border-radius: 4px; background: #21152b; color: #f8e6b5; font: 10px TGArcade, monospace; padding: 7px 8px; cursor: pointer; }
.tgp-pid:hover, .tgp-pid:focus-visible { border-color: #62f4eb; color: #62f4eb; }
.tgp-btn { display: inline-block; border: 2px solid #ffd25b; border-radius: 5px; background: linear-gradient(180deg, #49315a, #241632); color: #ffd25b; font: 9px/1 TGArcade, monospace; padding: 11px 12px; box-shadow: 0 3px #09050e; white-space: nowrap; }
.tgp-btn:hover, .tgp-btn:focus-visible { background: #ffd25b; color: #1b1026; }
.tgp-card.is-guest { flex-wrap: wrap; }
.tgp-card.is-guest .tgp-sub { flex: 1 1 320px; font-size: 13px; }
.tgp-card.is-guest .tgp-kicker { flex-basis: 100%; color: #62f4eb; }
/* Player chip in game menus / results screens (data-tg-player). Self-contained: games style a, b, small… their own way. */
.tgp-chip:empty, .tgp-chip[hidden] { display: none !important; }
.tgp-chip {
  box-sizing: border-box; width: 100%; max-width: 380px; margin: 12px auto 0; padding: 11px 13px 12px;
  display: flex; flex-direction: column; align-items: flex-start; gap: 5px; text-align: left;
  background: linear-gradient(160deg, #22142f, #120a1c); color: #fff3d6; border: 2px solid #ff70c5; border-radius: 8px;
  box-shadow: 0 4px 0 #07040b, 0 8px 22px #0006; font: 13px/1.35 Arial, sans-serif; letter-spacing: 0; text-transform: none;
}
.tgp-chip * { box-sizing: border-box; }
.tgp-chip .tgp-kicker { display: inline-flex; align-items: center; gap: 6px; color: #ff70c5; font: 8px/1.4 TGArcade, monospace; }
.tgp-chip.is-guest .tgp-kicker::before { content: ''; width: 7px; height: 7px; border-radius: 50%; background: #ff4f7e; box-shadow: 0 0 8px #ff4f7e; animation: tgp-blink 1.6s steps(2, end) infinite; }
@keyframes tgp-blink { 50% { opacity: .25; } }
.tgp-chip .tgp-name { margin: 0; color: #fff; font: 900 15px/1.25 Arial, sans-serif; }
.tgp-chip .tgp-sub { margin: 0; color: #d6c6e2; font: 12.5px/1.4 Arial, sans-serif; }
.tgp-chip-btns { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; margin-top: 5px; }
.tgp-chip .tgp-btn { border-color: #ffd25b; background: #ffd25b; color: #1b1026; text-decoration: none; padding: 10px 12px; }
.tgp-chip .tgp-btn:hover, .tgp-chip .tgp-btn:focus-visible { background: #fff0b8; }
.tgp-chip .tgp-link { color: #ffd25b; font: 700 12.5px Arial, sans-serif; }
.tgp-chip.is-member { border-color: #62f4eb; padding: 9px 11px; }
.tgp-chip-me { display: flex; align-items: center; gap: 11px; width: 100%; color: inherit; text-decoration: none; }
.tgp-chip-me .tgp-face { flex: 0 0 auto; width: 40px; height: 40px; border: 2px solid #62f4eb; border-radius: 7px; overflow: hidden; display: grid; place-items: center; background: #0d0816; color: #62f4eb; font: 14px TGArcade, monospace; }
.tgp-chip-me .tgp-face img { width: 100%; height: 100%; object-fit: cover; }
.tgp-chip-me .tgp-info { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 5px; }
.tgp-chip-me .tgp-name { font-size: 14px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tgp-chip-me:hover .tgp-name, .tgp-chip-me:focus-visible .tgp-name { color: #62f4eb; }
/* Landscape phones: one line, "Your XP isn't being saved [Sign in to save XP]". */
@media (max-height: 500px) {
  .tgp-chip { margin-top: 6px; }
  .tgp-chip.is-guest { flex-direction: row; flex-wrap: wrap; align-items: center; gap: 4px 10px; padding: 7px 9px; }
  .tgp-chip.is-guest .tgp-kicker, .tgp-chip.is-guest .tgp-sub, .tgp-chip.is-guest .tgp-link { display: none; }
  .tgp-chip.is-guest .tgp-name { flex: 1 1 140px; font-size: 13px; }
  .tgp-chip-btns { margin-top: 0; }
  .tgp-chip .tgp-btn { padding: 8px 10px; }
  .tgp-chip.is-member { padding: 6px 9px; }
}
@media (max-width: 600px) {
  .tgp-stack { left: 12px; right: 12px; width: auto; }
  .tgp-card { flex-wrap: wrap; gap: 12px; width: calc(100% - 36px); margin-top: 15px; }
  .tgp-card .tgp-side { flex-direction: row; flex-basis: 100%; justify-content: space-between; align-items: center; }
}
@media (prefers-reduced-motion: reduce) {
  .tgp-toast, .tgp-bar i { transition: none; }
  .tgp-chip .tgp-kicker::before { animation: none; }
  .tgp-toast.is-in, .tgp-toast.is-in *, .tgp-levelup.is-in .tgp-burst { animation: none !important; }
}