/* Coin Clicker only. Everything else comes from ../shared/game.css. */
#screen{touch-action:manipulation;user-select:none;-webkit-user-select:none}
canvas#world{cursor:pointer;touch-action:manipulation}
canvas#world:focus-visible{outline:2px solid var(--cyan);outline-offset:3px}
/* the bar fills toward the goal: skate orange to arcade pink to mint */
.progress-fill{background:linear-gradient(90deg,#ff9a3c,#ff4fd8,#3df0b0);transition:width .15s ease-out}
/* the shop: five buttons, keys 1–5 */
.tools.shop{grid-template-columns:repeat(5,minmax(0,1fr));gap:8px}
.buy{position:relative;display:flex;flex-direction:column;align-items:center;gap:2px;padding:8px 4px 9px;line-height:1.15;min-height:64px}
.buy .k{position:absolute;top:5px;left:7px;font-size:10px;color:var(--muted)}
.buy b{font-size:11.5px;letter-spacing:.03em;white-space:nowrap}
.buy .fx{font-size:10.5px;font-weight:700;color:#b9b2cc;white-space:nowrap}
.buy .cost{font-size:13px;color:#ffd43b;white-space:nowrap}
.buy .cost::before{content:"";display:inline-block;width:.72em;height:.72em;margin-right:.3em;border-radius:50%;
  background:radial-gradient(circle at 35% 35%,#fff0a0,#ffc12a 55%,#b8800a);box-shadow:0 1px 0 #8a5a04;vertical-align:-.04em}
.buy.can{border-color:#ffc12a;background:linear-gradient(180deg,#3a2a08,var(--panel) 70%)}
.buy.cant .cost{color:#a39cb6}
.buy.locked{opacity:.42}
.buy.locked .cost::before,.buy.maxed .cost::before{display:none}
.buy.maxed .cost{color:var(--jax)}
.buy.no{animation:nope .3s ease-out}
@keyframes nope{20%{transform:translateX(-4px)}45%{transform:translateX(4px)}70%{transform:translateX(-2px)}100%{transform:none}}
@media (prefers-reduced-motion:reduce){.buy.no{animation:none;border-color:var(--flint)}}
@media (max-width:640px){.tools.shop{gap:5px}.buy{padding:7px 2px 8px;min-height:58px}.buy b{font-size:9.5px;letter-spacing:0}
  .buy .fx{font-size:9px}.buy .cost{font-size:11.5px}.buy .k{display:none}}
@media (max-width:380px){.buy b{font-size:8.5px}.buy .fx{font-size:8px}}
/* short screens (a small iframe, a phone on its side): slimmer shop buttons so the picture keeps its room */
@media (max-height:440px){.buy{min-height:0;padding:5px 2px 6px}.buy .fx{display:none}}