/* Keep it busy: an idle game with the dot. Tokens and type come from styles.css. */
body.play { background: var(--lime); color: var(--black); min-height: 100vh; }
.p-grid { display: grid; grid-template-columns: minmax(0, 1fr) 440px; min-height: 100vh; }

/* The stage: the lime flood, the count, the dot */
.p-stage { position: relative; overflow: hidden; min-height: 100vh; user-select: none; -webkit-user-select: none; }
.p-top { position: absolute; top: 32px; left: var(--pad); right: var(--pad); display: flex; justify-content: space-between; align-items: center; font-size: 15px; z-index: 3; }
.p-back:hover { text-decoration: underline; text-underline-offset: 3px; }
.p-title { color: rgba(0, 0, 0, .55); }
.p-count { position: absolute; top: 96px; left: var(--pad); right: var(--pad); display: flex; flex-direction: column; z-index: 3; pointer-events: none; }
.p-num { font-size: 120px; line-height: .95; letter-spacing: -0.05em; font-variant-numeric: tabular-nums; }
.p-unit { margin-top: 8px; font-size: 26px; letter-spacing: -0.015em; }
.p-rate { margin-top: 10px; font-size: 17px; color: rgba(0, 0, 0, .62); }
.p-blob { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; z-index: 1; }
.p-blob path, .p-blob #pDrops { fill: var(--black); }
.p-blob #pDrops use { pointer-events: visiblePainted; cursor: pointer; }
.p-hit { position: absolute; z-index: 2; border-radius: 50%; cursor: pointer; background: transparent; touch-action: manipulation; -webkit-tap-highlight-color: transparent; }
.p-hit:focus-visible { outline: 3px solid var(--black); outline-offset: 10px; }
.p-floaters { position: absolute; inset: 0; pointer-events: none; z-index: 4; }
.p-float { position: absolute; font-size: 22px; font-weight: 500; letter-spacing: -0.01em; color: var(--black); white-space: nowrap; animation: p-rise 1s cubic-bezier(.2, .7, .2, 1) forwards; }
@keyframes p-rise { 0% { opacity: 1; transform: translate(-50%, 0) scale(.9); } 15% { transform: translate(-50%, -14px) scale(1.06); } 65% { opacity: 1; } 100% { opacity: 0; transform: translate(-50%, -80px) scale(1); } }
.p-toast { position: absolute; left: var(--pad); right: var(--pad); bottom: 72px; z-index: 3; font-size: 22px; letter-spacing: -0.01em; max-width: 560px; opacity: 0; transform: translateY(8px); transition: opacity .3s, transform .4s cubic-bezier(.3, .75, .1, 1); }
.p-toast[data-show] { opacity: 1; transform: none; }
.p-toast .stop { fill: var(--black); }
.p-saved { position: absolute; left: var(--pad); bottom: 32px; z-index: 3; font-size: 13px; color: rgba(0, 0, 0, .6); }

/* The shop: black, like the site's sections */
.p-shop { background: var(--ink); color: var(--white); padding: 40px 32px 48px; overflow-y: auto; max-height: 100vh; position: sticky; top: 0; }
.p-shop h2 { font-size: 34px; font-weight: 400; letter-spacing: -0.025em; }
.p-shop h3 { margin-top: 40px; font-size: 22px; font-weight: 400; letter-spacing: -0.015em; }
.p-help { margin-top: 8px; font-size: 14px; color: var(--grey); line-height: 1.4; }
.p-list { list-style: none; margin-top: 24px; border-top: 1px solid var(--bubble); }
.p-item { border-bottom: 1px solid var(--bubble); }
.p-item button {
  width: 100%; display: grid; grid-template-columns: 1fr auto; column-gap: 16px; row-gap: 4px;
  text-align: left; padding: 16px 0; color: var(--white);
}
.p-item button:disabled { cursor: default; }
.p-item button:disabled .p-name, .p-item button:disabled .p-cost { opacity: .38; }
.p-item button:not(:disabled):hover .p-name { text-decoration: underline; text-underline-offset: 3px; }
.p-name { font-size: 19px; letter-spacing: -0.01em; }
.p-owned { font-size: 19px; color: var(--lime); font-variant-numeric: tabular-nums; text-align: right; }
.p-line { font-size: 13px; color: var(--grey); line-height: 1.35; }
.p-cost { font-size: 13px; color: var(--white); text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.p-item.locked { display: none; }
.p-item.hint button { opacity: .5; }
.p-item.hint .p-name::after { content: ''; }
.p-chans { margin-top: 16px; display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.p-chan {
  display: flex; flex-direction: column; align-items: flex-start; gap: 4px;
  padding: 14px 16px; border-radius: 20px; background: var(--tile); color: var(--white); text-align: left;
}
.p-chan span:first-child { font-size: 16px; }
.p-chan span:last-child { font-size: 12px; color: var(--grey); }
.p-chan:disabled { cursor: default; }
.p-chan:disabled span:first-child { opacity: .4; }
.p-chan[data-on] { background: var(--lime); color: var(--black); }
.p-chan[data-on] span:last-child { color: rgba(0, 0, 0, .6); }
.p-reset { margin-top: 40px; font-size: 13px; color: var(--grey); text-decoration: underline; text-underline-offset: 3px; }

@media (max-width: 900px) {
  :root { --pad: 20px; }
  .p-grid { grid-template-columns: 1fr; }
  .p-stage { min-height: 76vh; }
  .p-num { font-size: 72px; }
  .p-unit { font-size: 20px; }
  .p-count { top: 76px; }
  .p-toast { font-size: 18px; bottom: 56px; }
  .p-shop { position: static; max-height: none; padding: 32px 20px 56px; }
}

/* Upgrades: one-time buys, cheapest first */
.p-ups-title { margin-top: 32px; }
.p-ups:empty { display: none; }
.p-up { gap: 6px; }
.p-up span:nth-child(1) { font-size: 15px; line-height: 1.25; }
.p-up span:nth-child(2) { font-size: 12px; color: var(--grey); line-height: 1.35; }
.p-up .p-up-cost { margin-top: 2px; font-size: 12px; color: var(--lime); }
.p-up:disabled .p-up-cost { color: var(--grey); }
.p-up:not(:disabled):hover { background: #232323; }
.p-shop h3 + .p-help + .p-chans + h3 { margin-top: 32px; }

/* What just changed, said under the dot */
.p-callout { position: absolute; right: var(--pad); top: 104px; transform: translateY(10px); z-index: 4; text-align: right; pointer-events: none; opacity: 0; transition: opacity .3s, transform .45s cubic-bezier(.3, .75, .1, 1); max-width: 360px; }
.p-callout[data-show] { opacity: 1; transform: none; }
.p-callout b { display: block; font-size: 30px; font-weight: 400; letter-spacing: -0.025em; }
.p-callout span { display: block; margin-top: 4px; font-size: 16px; color: rgba(0, 0, 0, .7); }
@media (max-width: 900px) { .p-callout { top: auto; bottom: 110px; left: var(--pad); right: var(--pad); text-align: left; max-width: none; } .p-callout b { font-size: 24px; } }

/* Words that the dot can pass under: lime text in difference blending reads black on the lime
   and lime on the dot, so it's always legible and stays in the two brand colours */
.p-floaters, .p-count, .p-callout { mix-blend-mode: difference; }
.p-float, .p-num, .p-unit, .p-callout b { color: var(--lime); }
.p-rate, .p-callout span { color: rgba(157, 255, 7, .62); }

/* Credits: what you spend. Jobs done never goes down */
.p-credits { margin-top: 6px; font-size: 20px; letter-spacing: -0.01em; color: var(--lime); font-variant-numeric: tabular-nums; }
.p-spent { font-size: 18px; animation-name: p-spend; }
@keyframes p-spend { 0% { opacity: 1; transform: translate(-50%, 0); } 70% { opacity: 1; } 100% { opacity: 0; transform: translate(-50%, 34px); } }