/* pip-account.css — streak chip, rewards panel, toasts and frame skins (2026-10-08).
   Loaded by the Worker beside js/pip-account.js. Site tokens from tokens.css. */

/* Fixed palette: the homepage switches the site tokens to a dark theme, so the
   chip and panel carry their own colours instead of inheriting them. */
.pipa-chip, .pipa-panel, .pipa-toasts {
  --pa-paper: #fff7ea; --pa-paper-2: #fbefd9; --pa-ink: #1f2328; --pa-muted: #5d6168;
  --pa-rule: #e5d6b8; --pa-accent: #f5cf2e; --pa-hot: #e8505b; --pa-cool: #2f8fd6;
  color-scheme: light;
}
.pipa-chip {
  display: inline-flex; align-items: center; gap: 8px; margin-left: auto;
  min-height: 40px; padding: 3px 4px 3px 12px; border-radius: 999px;
  border: 2px solid var(--pa-ink); background: var(--pa-paper); color: var(--pa-ink);
  font: 700 0.95rem/1 var(--font-body, system-ui); cursor: pointer; box-shadow: 0 3px 0 var(--pa-ink); white-space: nowrap;
}
.pipa-chip:not(.is-signed-out) { padding-right: 4px; }
.pipa-chip:active { transform: translateY(2px); box-shadow: 0 1px 0 var(--pa-ink); }
.pipa-chip:focus-visible { outline: 3px solid var(--pa-cool); outline-offset: 2px; }
.pipa-chip__streak { display: inline-flex; align-items: center; gap: 4px; font-size: 1.05rem; }
.pipa-chip__streak .pipa-flame { font-size: 1.15rem; }
.pipa-chip__coins { display: inline-flex; align-items: center; gap: 3px; font-size: .95rem; font-variant-numeric: tabular-nums; }
.pipa-chip__face { width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; background: var(--pa-accent); font-size: .85rem; }
.pipa-chip__sign {
  display: inline-flex; align-items: center; gap: 8px; height: 32px; padding: 0 12px 0 8px; border-radius: 999px;
  background: #fff; color: #1f1f1f; border: 1px solid #dadce0; font: 600 .88rem/1 "Roboto", var(--font-body, system-ui);
}
.pipa-chip__short { display: none; }
@media (max-width: 720px) { .pipa-chip__long { display: none; } .pipa-chip__short { display: inline; } }
.pipa-chip--float { position: fixed; right: 12px; bottom: 12px; z-index: 50; }
.pipa-flame { filter: saturate(.7) opacity(.7); transition: filter .3s; }
.pipa-flame.is-lit { filter: none; animation: pipa-flick 1.6s ease-in-out infinite alternate; }
@keyframes pipa-flick { from { transform: scale(1) rotate(-3deg); } to { transform: scale(1.12) rotate(3deg); } }
@media (prefers-reduced-motion: reduce) { .pipa-flame.is-lit { animation: none; } }

.pipa-panel {
  position: fixed; inset: 0; margin: auto; height: fit-content;
  width: min(560px, calc(100vw - 24px)); max-height: min(88vh, 900px); padding: 0; overflow: auto;
  border: 3px solid var(--pa-ink); border-radius: 20px;
  background: var(--pa-paper); color: var(--pa-ink); font-family: var(--font-body, system-ui);
  box-shadow: 0 10px 0 var(--pa-ink);
}
.pipa-panel::backdrop { background: oklch(20% 0.012 250 / .55); }
.pipa-head { display: flex; justify-content: space-between; align-items: center; padding: 16px 20px 0; }
.pipa-head h2 { margin: 0; font-size: 1.4rem; }
.pipa-x { border: 0; background: none; font-size: 1.8rem; line-height: 1; cursor: pointer; color: inherit; }
.pipa-sec { padding: 14px 20px; border-top: 2px dashed var(--pa-rule); }
.pipa-sec h3 { margin: 0 0 10px; font-size: 1.05rem; }
.pipa-sec h3 small { display: block; font-weight: 500; color: var(--pa-muted); font-size: .8rem; margin-top: 2px; }
.pipa-me, .pipa-signin { padding: 12px 20px 16px; }
.pipa-me { display: flex; gap: 12px; align-items: center; }
.pipa-me img { border-radius: 50%; }
.pipa-me small { display: block; color: var(--pa-muted); }
.pipa-signin p { margin: 0 0 10px; }
#pipa-gbtn { min-height: 44px; color-scheme: light; }
#pipa-gbtn iframe { color-scheme: light; background: transparent; }
/* GIS draws an HTML fallback button and the real iframe button; inside the modal it never
   hides the fallback, so two buttons showed. Once the iframe exists, show only the iframe. */
#pipa-gbtn > div:has(> iframe) > div { display: none !important; }

.pipa-streak { display: grid; gap: 10px; }
.pipa-big { display: flex; align-items: baseline; gap: 8px; }
.pipa-big .pipa-flame { font-size: 2.2rem; }
.pipa-big b { font-size: 3rem; line-height: 1; }
.pipa-stats { display: flex; gap: 16px; list-style: none; margin: 0; padding: 0; color: var(--pa-muted); font-size: .9rem; }
.pipa-stats b { color: var(--pa-ink); }
.pipa-cal { display: grid; grid-template-columns: repeat(14, 1fr); gap: 4px; }
.pipa-cal i { aspect-ratio: 1; border-radius: 5px; background: var(--pa-paper-2); }
.pipa-cal i.on { background: var(--pa-hot); }
.pipa-cal i.shield { background: var(--pa-cool); }
.pipa-cal i.today { outline: 2px solid var(--pa-ink); outline-offset: 1px; }
.pipa-note, .pipa-goal { margin: 0; font-size: .9rem; color: var(--pa-ink); }
.pipa-goal { margin-top: 10px; }

.pipa-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.pipa-skin, .pipa-frame {
  display: grid; gap: 2px; padding: 6px; border-radius: 12px; cursor: pointer; text-align: center;
  border: 2px solid var(--pa-rule); background: #fff; color: inherit; font: inherit;
}
.pipa-skin img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; border-radius: 8px; }
.pipa-skin span, .pipa-frame span { font-weight: 700; font-size: .9rem; }
.pipa-skin small, .pipa-frame small { font-size: .72rem; color: var(--pa-muted); }
.pipa-skin.is-on, .pipa-frame.is-on { border-color: var(--pa-ink); box-shadow: 0 3px 0 var(--pa-ink); }
.pipa-skin[disabled], .pipa-frame[disabled] { cursor: not-allowed; opacity: .55; }
.pipa-skin[disabled] img { filter: grayscale(1) blur(1px) !important; }
.pipa-frames { display: grid; grid-template-columns: repeat(auto-fill, minmax(118px, 1fr)); gap: 8px; }
.pipa-frame { min-height: 64px; align-content: center; }
.pipa-frame--neon { box-shadow: inset 0 0 0 2px #ff3df2, inset 0 0 14px #22e6ff; }
.pipa-frame--gold { background: linear-gradient(135deg, #fff3b0, #e8b923 55%, #fff3b0); }
.pipa-frame--midnight { background: #1d2333; color: #e9ecf6; }
.pipa-frame--crt { background: repeating-linear-gradient(0deg, #101810 0 2px, #1a2a1a 2px 4px); color: #7dff8a; }
.pipa-frame--holo { background: linear-gradient(120deg, #ffd1f7, #c7f0ff, #d9ffcf, #fff1c2); }
.pipa-frame--legend { background: radial-gradient(circle at 30% 20%, #ffe680, #c0392b 70%); color: #fff; }
.pipa-badges { display: flex; flex-wrap: wrap; gap: 6px; list-style: none; padding: 0; margin: 0; }
.pipa-badges li { padding: 4px 10px; border-radius: 999px; border: 2px dashed var(--pa-rule); font-size: .8rem; color: var(--pa-muted); }
.pipa-badges li.on { border-style: solid; border-color: var(--pa-ink); background: var(--pa-accent); color: var(--pa-ink); font-weight: 700; }
.pipa-foot { padding: 12px 20px 18px; font-size: .8rem; color: var(--pa-muted); border-top: 2px dashed var(--pa-rule); }
.pipa-foot span { display: block; margin-top: 6px; }
.pipa-link { border: 0; background: none; padding: 0; color: var(--pa-cool); text-decoration: underline; cursor: pointer; font: inherit; }

.pipa-toasts { position: fixed; left: 50%; bottom: 16px; transform: translateX(-50%); z-index: 60; display: grid; gap: 8px; width: min(440px, calc(100vw - 24px)); pointer-events: none; }
.pipa-toast {
  pointer-events: auto; padding: 12px 16px; border-radius: 14px; background: var(--pa-ink); color: var(--pa-paper);
  box-shadow: 0 6px 18px oklch(20% 0.012 250 / .35); animation: pipa-in .35s ease-out; transition: opacity .35s, transform .35s;
}
.pipa-toast .pipa-link { color: var(--pa-accent); }
.pipa-toast.out { opacity: 0; transform: translateY(8px); }
@keyframes pipa-in { from { opacity: 0; transform: translateY(12px); } }

/* ---- frame skins: drawn around the game stage only, never over ads ---- */
[data-pip-frame="neon"] [data-pip-skinned] { box-shadow: 0 0 0 3px #ff3df2, 0 0 22px 4px #22e6ff; border-radius: 16px; }
[data-pip-frame="gold"] [data-pip-skinned] { box-shadow: 0 0 0 4px #e8b923, 0 0 0 8px #fff3b0, 0 8px 24px #e8b92366; border-radius: 16px; }
[data-pip-frame="midnight"] [data-pip-skinned] { box-shadow: 0 0 0 6px #1d2333, 0 0 0 9px #5b6ea8; border-radius: 16px; }
[data-pip-frame="crt"] [data-pip-skinned] { box-shadow: 0 0 0 6px #101810, 0 0 0 8px #7dff8a, 0 0 26px #7dff8a66; border-radius: 22px; }
[data-pip-frame="holo"] [data-pip-skinned] { box-shadow: 0 0 0 4px #ffd1f7, 0 0 0 8px #c7f0ff, 0 0 0 12px #d9ffcf; border-radius: 18px; }
[data-pip-frame="legend"] [data-pip-skinned] { box-shadow: 0 0 0 4px #ffe680, 0 0 0 8px #c0392b, 0 0 30px 6px #ffb84d88; border-radius: 18px; }

/* Page themes (the dark homepage) colour headings/paragraphs with later, more specific rules:
   the panel is a self-contained widget, so its text colours are pinned with !important. */
.pipa-panel :is(h2, h3, p, b, span, li, strong, div) { color: var(--pa-ink) !important; -webkit-text-fill-color: currentColor; }
.pipa-panel :is(small, .pipa-stats li, .pipa-foot, .pipa-foot span, .pipa-note, .pipa-goal) { color: var(--pa-muted) !important; }
.pipa-panel :is(.pipa-stats b, .pipa-goal b) { color: var(--pa-ink) !important; }
.pipa-panel :is(.pipa-frame--midnight, .pipa-frame--legend) :is(span, small) { color: #fff !important; }
.pipa-panel .pipa-frame--crt :is(span, small) { color: #7dff8a !important; }
.pipa-panel :is(a, .pipa-link) { color: var(--pa-cool) !important; }
.pipa-toast, .pipa-toast :is(b, span) { color: var(--pa-paper) !important; }
.pipa-toast .pipa-link { color: var(--pa-accent) !important; }
@media (max-width: 480px) {
  .pipa-chip { gap: 6px; padding-left: 9px; }
  .pipa-chip__short { display: none; }
  .pipa-chip__sign { padding: 0 6px; height: 30px; }
}
/* Game headers already hold Full screen / Sound / Pause: on phones the chip keeps only the streak. */
@media (max-width: 480px) {
  .game-header .pipa-chip { padding: 3px 10px; min-height: 36px; }
  .game-header .pipa-chip__sign { display: none; }
}

/* Site pages (nav-slab): the chip now carries coins too, so on phones the "Open tray" button
   gives way and the chip keeps streak + coins + the G logo (2026-10-10). */
@media (max-width: 480px) {
  .nav-slab:has(.pipa-chip) > .btn--sm { display: none; }
  .nav-slab .pipa-chip { margin-left: auto; }
}
/* ---- coins (2026-10-09): chip bonus dot, panel Coins section, level bar, streak ladder ---- */
.pipa-chip__coins { position: relative; }
.pipa-dot {
  position: absolute; top: -5px; right: -9px; width: 10px; height: 10px; border-radius: 50%;
  background: var(--pa-hot); border: 2px solid var(--pa-paper); animation: pipa-pulse 1.4s ease-out infinite;
}
@keyframes pipa-pulse { 0% { box-shadow: 0 0 0 0 #e8505bcc; } 70% { box-shadow: 0 0 0 8px #e8505b00; } 100% { box-shadow: 0 0 0 0 #e8505b00; } }
@media (prefers-reduced-motion: reduce) { .pipa-dot { animation: none; } }
.pipa-coins { display: grid; gap: 12px; }
.pipa-coins__top { display: grid; grid-template-columns: auto 1fr; gap: 16px; align-items: center; }
.pipa-coins__bal { display: flex; align-items: baseline; gap: 6px; }
.pipa-coins__bal span { font-size: 1.6rem; }
.pipa-coins__bal b { font-size: 2rem; line-height: 1; font-variant-numeric: tabular-nums; }
.pipa-lvl { display: grid; gap: 4px; min-width: 0; }
.pipa-lvl__row { display: flex; justify-content: space-between; gap: 8px; align-items: baseline; }
.pipa-lvl small { font-size: .78rem; }
.pipa-lvl__bar { height: 12px; border-radius: 999px; background: var(--pa-paper-2); border: 2px solid var(--pa-ink); overflow: hidden; }
.pipa-lvl__bar i { display: block; height: 100%; background: linear-gradient(90deg, var(--pa-accent), #f59e0b); transition: width .4s; }
.pipa-bonus { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 8px; }
.pipa-bonus__card { display: grid; gap: 4px; align-content: start; padding: 10px 12px; border-radius: 14px; border: 2px solid var(--pa-rule); background: #fff; }
.pipa-bonus__card.is-ready { border-color: var(--pa-ink); box-shadow: 0 3px 0 var(--pa-ink); background: #fffbe6; }
.pipa-bonus__card h4 { margin: 0; font-size: .95rem; }
.pipa-bonus__card p { margin: 0; font-size: .88rem; }
.pipa-count { font-variant-numeric: tabular-nums; }
.pipa-btn {
  justify-self: start; min-height: 40px; padding: 6px 18px; border-radius: 999px; cursor: pointer;
  border: 2px solid var(--pa-ink); background: var(--pa-accent); color: var(--pa-ink); font: 800 .95rem/1 var(--font-body, system-ui);
  box-shadow: 0 3px 0 var(--pa-ink);
}
.pipa-btn:active { transform: translateY(2px); box-shadow: 0 1px 0 var(--pa-ink); }
.pipa-btn:disabled { opacity: .6; cursor: progress; }
.pipa-btn:focus-visible { outline: 3px solid var(--pa-cool); outline-offset: 2px; }
.pipa-ladder { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; list-style: none; margin: 0; padding: 0; }
.pipa-ladder li { display: grid; gap: 2px; padding: 6px 2px; text-align: center; border-radius: 10px; background: var(--pa-paper-2); border: 2px solid transparent; }
.pipa-ladder li small { font-size: .66rem; }
.pipa-ladder li b { font-size: .8rem; }
.pipa-ladder li.done { background: var(--pa-accent); }
.pipa-ladder li.next { border-color: var(--pa-ink); background: #fff; }
.pipa-ladder li.today { border-color: var(--pa-ink); }
.pipa-free { font-size: .8rem; }
.pipa-panel :is(h4) { color: var(--pa-ink) !important; }
.pipa-panel .pipa-btn { color: var(--pa-ink) !important; }
@media (max-width: 420px) { .pipa-coins__top { grid-template-columns: 1fr; } .pipa-ladder li b { font-size: .7rem; } }