/* ---- Shmangus Clicker (pages/clicker.js): the hub's card and the game ----
   The phone draws the same: components/clicker/ClickerCard.tsx, app/games/clicker.tsx.
   Built from the arcade look (games.css): candy on its lip, the buddy, springy pops. */

/* ==== the hub's card ==== */
.ck-card { display: flex; align-items: center; gap: 14px; width: 100%; border: none; background: var(--arc-teal); border-radius: 22px; padding: 10px 14px 10px 10px; margin-bottom: 5px; box-shadow: 0 5px 0 #0F8591; font: inherit; color: #FFFFFF; text-align: left; cursor: pointer; transition: transform 140ms var(--arc-spring); -webkit-tap-highlight-color: transparent; }
.ck-card:hover { transform: translateY(-2px); }
.ck-card:active { transform: translateY(5px); box-shadow: 0 0 0 #0F8591; }
.ck-card:focus-visible { outline: 3px solid var(--ink-muted); outline-offset: 3px; }
.ck-card-art { position: relative; flex: none; width: 76px; height: 64px; border-radius: 16px; display: grid; place-items: center; overflow: hidden; background: #0E7E8A; }
.ck-card-rays { position: absolute; inset: -30%; background: repeating-conic-gradient(from 0deg, rgba(255, 214, 92, 0.38) 0deg 12deg, transparent 12deg 30deg); animation: ck-spin 18s linear infinite; }
.ck-card-art > :not(.ck-card-rays) { position: relative; }
.ck-card-words { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.ck-card-title { font: 900 21px/1.15 var(--arc-font); letter-spacing: -0.2px; color: var(--arc-cocoa); }
.ck-card-sub { font-size: 13.5px; font-weight: 700; color: #08383D; }
.ck-card-go { flex: none; background: #FFFFFF; color: #0B6F7A; border-radius: 999px; padding: 0 16px; min-height: 38px; display: grid; place-items: center; font: 900 15px/1 var(--arc-font); box-shadow: 0 3px 0 #BDEFF3; }

/* ==== the game ==== */
/* A screen of its own over the app, like the city (the phone pushes it full screen too). */
body.ck-open { overflow: hidden; }
/* A column: the top row and the stage stand still, only the shop scrolls (buying never sends the buddy away). */
.ck-page { position: fixed; inset: 0; z-index: 1400; background: var(--bg); color: var(--ink); display: flex; flex-direction: column; overflow: hidden; box-sizing: border-box; padding: calc(10px + env(safe-area-inset-top)) 16px 0; }
.ck-top { flex: none; display: flex; align-items: center; gap: 10px; width: 100%; max-width: 980px; margin: 0 auto; }
.ck-back { flex: none; width: 44px; height: 44px; border-radius: 50%; border: 1px solid var(--border); border-bottom-width: 3px; background: var(--surface-solid, var(--surface)); color: var(--ink); display: grid; place-items: center; cursor: pointer; padding: 0; }
.ck-back svg { width: 20px; height: 20px; stroke: currentColor; fill: none; stroke-width: 48; stroke-linecap: round; stroke-linejoin: round; }
.ck-back:active { transform: translateY(2px); border-bottom-width: 1px; }
.ck-rank { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 5px; padding: 7px 14px 8px; border-radius: 18px; border: 1px solid var(--border); border-bottom-width: 3px; background: var(--surface-solid, var(--surface)); }
.ck-rank.up { animation: ck-pop 520ms var(--arc-spring); }
.ck-rank-words { display: flex; align-items: baseline; justify-content: space-between; gap: 4px 10px; flex-wrap: wrap; }
.ck-rank-title { font: 900 16px/1.15 var(--arc-font); color: var(--ink); }
.ck-rank-next { font-size: 12.5px; font-weight: 700; color: var(--ink-muted); }
.ck-rank-bar { display: block; height: 7px; border-radius: 99px; background: color-mix(in srgb, var(--ink) 10%, transparent); overflow: hidden; }
.ck-rank-bar i { display: block; width: 0; height: 100%; border-radius: 99px; background: var(--arc-lemon); transition: width 300ms ease-out; }

.ck-body { flex: 1; min-height: 0; width: 100%; max-width: 980px; margin: 12px auto 0; display: flex; flex-direction: column; gap: 14px; }
.ck-stage { flex: none; }
.ck-shop { flex: 1; min-height: 0; overflow-y: auto; overflow-x: hidden; overscroll-behavior: contain; margin: 0 -16px; padding: 0 16px calc(24px + env(safe-area-inset-bottom)); }
@media (min-width: 860px) {
  .ck-body { flex-direction: row; align-items: stretch; }
  .ck-stage { flex: 1 1 0; align-self: flex-start; }
  .ck-shop { flex: 1 1 0; margin: 0; padding: 0 4px 24px; }
}

/* The stage: the counter, the buddy on its sunburst, the golden buddy, the floating +N. */
.ck-stage { position: relative; display: flex; flex-direction: column; align-items: center; padding: 18px 12px 22px; border-radius: 28px; overflow: hidden; background: radial-gradient(circle at 50% 62%, #2E5BC9 0%, #272456 62%); box-shadow: inset 0 -5px 0 #1A1840; color: #FFFFFF; touch-action: manipulation; user-select: none; -webkit-user-select: none; }
.ck-rays { position: absolute; left: 50%; top: 62%; width: 760px; height: 760px; margin: -380px 0 0 -380px; background: repeating-conic-gradient(from 0deg, rgba(255, 214, 92, 0.13) 0deg 9deg, transparent 9deg 24deg); border-radius: 50%; animation: ck-spin 40s linear infinite; pointer-events: none; }
.ck-count { position: relative; display: flex; flex-direction: column; align-items: center; gap: 2px; text-align: center; }
.ck-num { min-height: 48px; font: 900 46px/1.05 var(--arc-font); letter-spacing: -0.8px; font-variant-numeric: tabular-nums; text-shadow: 0 3px 0 rgba(0, 0, 0, 0.25); overflow-wrap: anywhere; }
/* Until the game arrives: the buddy thinks, takes no taps, and asks for none. */
.ck-page.loading .ck-buddy { pointer-events: none; }
.ck-page.loading .ck-hello, .ck-page.loading .ck-unit, .ck-page.loading .ck-rank-next { visibility: hidden; }
.ck-unit { display: inline-flex; align-items: center; gap: 6px; font: 900 16px/1.2 var(--arc-font); color: #FFE7A0; }
.ck-unit .cty-coin-ico.big { width: 18px; height: 18px; vertical-align: 0; }
.ck-rate { position: relative; min-height: 18px; margin-top: 6px; font-size: 14px; font-weight: 800; color: #B8B3EC; text-align: center; }
.ck-sync { position: relative; margin-top: 6px; font-size: 12.5px; font-weight: 800; color: #FFD45C; }
.ck-sync[hidden] { display: none; }

.ck-buddy-wrap { position: relative; margin-top: 18px; display: grid; place-items: center; }
/* The buddy's size: as big as 210 px, smaller on a short screen so the shop keeps room (half the
   height goes to the top row and the stage at most); the face is 0.81 of it. */
.ck-page { --ck-b: clamp(104px, calc(50vh - 170px), 210px); --ck-face: calc(var(--ck-b) * 0.81); }
.ck-buddy { position: relative; width: var(--ck-b); height: var(--ck-b); border-radius: 50%; border: none; padding: 0; background: radial-gradient(circle, rgba(255, 214, 92, 0.32) 0 42%, transparent 66%); display: grid; place-items: center; cursor: pointer; touch-action: manipulation; -webkit-tap-highlight-color: transparent; }
.ck-buddy:focus-visible { outline: 3px solid #FFD45C; outline-offset: 4px; }
.ck-buddy-face { display: grid; place-items: center; filter: drop-shadow(0 8px 0 rgba(0, 0, 0, 0.28)); transition: transform 90ms ease-out; }
.ck-buddy:hover .ck-buddy-face { transform: scale(1.03); }
.ck-buddy.hit .ck-buddy-face { animation: ck-squash 260ms var(--arc-spring); }
.ck-hello { position: absolute; top: -6px; right: -26px; background: #FFFFFF; color: var(--arc-cocoa); font: 900 14px/1 var(--arc-font); padding: 8px 12px; border-radius: 14px 14px 14px 4px; box-shadow: 0 3px 0 rgba(0, 0, 0, 0.2); animation: ck-bob 1.6s ease-in-out infinite; pointer-events: none; white-space: nowrap; }
.ck-hello[hidden] { display: none; }

.ck-floats { position: absolute; inset: 0; pointer-events: none; z-index: 5; }
/* A +N on its own cocoa pill: it reads on the yellow face, the rays and the well alike.
   A golden catch's stays whole for most of its rise, then fades. */
.ck-float { position: absolute; transform: translate(-50%, -50%); padding: 3px 9px 4px; border-radius: 99px; background: rgba(43, 33, 24, 0.88); font: 900 20px/1 var(--arc-font); color: #FFFFFF; box-shadow: 0 2px 0 rgba(0, 0, 0, 0.25); animation: ck-rise 850ms cubic-bezier(0.2, 0.8, 0.3, 1) both; white-space: nowrap; }
.ck-float.gold { font-size: 26px; padding: 4px 12px 5px; color: #FFD45C; animation: ck-rise-gold 1.4s linear both; }

.ck-gold { position: absolute; z-index: 6; width: 72px; height: 72px; margin: -36px 0 0 -36px; border-radius: 50%; border: 3px solid #FFF3B0; padding: 0; display: grid; place-items: center; cursor: pointer; background: radial-gradient(circle at 38% 32%, #FFF6C4 0 14%, #FFD54A 30% 62%, #F2A900 64%); box-shadow: 0 0 0 6px rgba(255, 214, 92, 0.25), 0 0 26px 6px rgba(255, 200, 61, 0.65), 0 4px 0 #B87400; }
.ck-gold[hidden] { display: none; }
.ck-gold.in { animation: ck-gold-in 420ms var(--arc-spring), ck-wobble 1.4s ease-in-out 420ms infinite; }
.ck-gold:focus-visible { outline: 3px solid #FFFFFF; outline-offset: 3px; }

/* The line under the buddy: the quiet stats, or for a moment the news on a white pill. Its own room (two lines). */
.ck-note { position: relative; z-index: 4; min-height: 52px; margin-top: 8px; width: 100%; display: flex; align-items: center; justify-content: center; text-align: center; }
.ck-quiet { font-size: 13px; font-weight: 700; color: #B8B3EC; }
.ck-notice { display: inline-flex; align-items: center; gap: 8px; max-width: 100%; box-sizing: border-box; padding: 8px 14px; border-radius: 16px; border: none; background: #FFFFFF; color: var(--arc-cocoa); font-family: inherit; font-size: 14px; font-weight: 800; line-height: 1.3; text-align: left; box-shadow: 0 4px 0 rgba(0, 0, 0, 0.22); cursor: pointer; animation: ck-gold-in 320ms var(--arc-spring); }

.ck-off { position: relative; display: flex; flex-direction: column; align-items: center; gap: 10px; padding: 40px 0; }
.ck-off p { margin: 0; font-weight: 800; }

/* The shop: boosts as candy keys, then Stronger taps and the helpers as rows on their lips. */
.ck-shop { position: relative; display: flex; flex-direction: column; gap: 10px; }
/* Boosts waiting: two equal columns. */
.ck-boosts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.ck-boosts[hidden] { display: none; }
/* An odd one out spans the row. */
.ck-boost:last-child:nth-child(odd) { grid-column: 1 / -1; }
.ck-boost { display: flex; align-items: center; gap: 9px; min-width: 0; min-height: 52px; padding: 6px 12px 6px 8px; margin-bottom: 4px; border: none; border-radius: 16px; background: var(--c); color: var(--cink, #FFFFFF); box-shadow: 0 4px 0 var(--lip); cursor: pointer; font: inherit; text-align: left; transition: transform 70ms ease-out, box-shadow 70ms ease-out; }
.ck-boost:active:not(.off) { transform: translateY(4px); box-shadow: 0 0 0 var(--lip); }
.ck-boost.off { filter: saturate(0.35); opacity: 0.6; cursor: default; }
.ck-boost-ic { flex: none; width: 38px; height: 38px; border-radius: 12px; background: rgba(255, 255, 255, 0.4); display: grid; place-items: center; font-size: 22px; }
.ck-boost-words { min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.ck-boost-words b { font: 900 15px/1.15 var(--arc-font); }
.ck-boost-price { display: inline-flex; align-items: center; gap: 5px; font-size: 13px; font-weight: 800; }
.ck-boost-price .cty-coin-ico { width: 13px; height: 13px; border-width: 1.2px; vertical-align: 0; }

.ck-rows { display: flex; flex-direction: column; gap: 10px; }
.ck-row { display: flex; align-items: center; gap: 12px; padding: 9px 10px 9px 9px; border-radius: 20px; border: 1px solid var(--border); border-bottom-width: 4px; background: var(--surface-solid, var(--surface)); color: var(--ink); }
.ck-row.bought .ck-tile { animation: ck-pop 420ms var(--arc-spring); }
.ck-tile { position: relative; flex: none; width: 50px; height: 50px; border-radius: 15px; display: grid; place-items: center; font-size: 27px; background: var(--c); box-shadow: inset 0 -4px 0 var(--lip); }
.ck-row.mystery .ck-tile { filter: grayscale(1); opacity: 0.55; }
.ck-row-words { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.ck-row-name { display: flex; align-items: center; flex-wrap: wrap; gap: 4px 8px; font: 900 17px/1.15 var(--arc-font); overflow-wrap: break-word; }
.ck-row.mystery .ck-row-name { color: var(--ink-muted); }
/* How many: a badge on the tile's corner. */
.ck-owned { position: absolute; right: -7px; top: -7px; display: grid; place-items: center; min-width: 24px; height: 22px; padding: 0 6px; box-sizing: border-box; border-radius: 99px; border: 2px solid var(--surface-solid, var(--surface)); background: var(--arc-cocoa); color: #FFFFFF; font: 900 12px/1 var(--arc-font); white-space: nowrap; }
.ck-row-line { font-size: 13px; font-weight: 700; color: var(--ink-muted); overflow-wrap: break-word; }
/* One width for every price, so the rows line up. */
.ck-buy { flex: none; display: inline-flex; align-items: center; justify-content: center; gap: 6px; width: 106px; min-height: 46px; padding: 6px 8px; margin-bottom: 4px; border: none; border-radius: 15px; background: var(--arc-mint); color: var(--arc-cocoa); font: 900 15px/1.1 var(--arc-font); box-shadow: 0 4px 0 #13936A; cursor: pointer; text-align: center; transition: transform 70ms ease-out, box-shadow 70ms ease-out; }
.ck-price { display: flex; flex-direction: column; align-items: center; min-width: 0; }
.ck-price small { font: 800 11.5px/1.15 var(--arc-font); }
.ck-buy:active:not(.off) { transform: translateY(4px); box-shadow: 0 0 0 #13936A; }
.ck-buy.off { background: color-mix(in srgb, var(--ink) 10%, transparent); color: var(--ink-muted); box-shadow: 0 4px 0 color-mix(in srgb, var(--ink) 16%, transparent); cursor: default; }
.ck-buy .cty-coin-ico { width: 15px; height: 15px; vertical-align: 0; }
.ck-buy:focus-visible, .ck-boost:focus-visible { outline: 3px solid var(--ink-muted); outline-offset: 2px; }

@keyframes ck-spin { to { transform: rotate(360deg); } }
@keyframes ck-squash { 0% { transform: scale(0.86, 0.82); } 60% { transform: scale(1.06, 1.04); } 100% { transform: scale(1); } }
@keyframes ck-rise { 0% { opacity: 0; transform: translate(-50%, -40%) scale(0.7); } 15% { opacity: 1; transform: translate(-50%, -60%) scale(1.1); } 100% { opacity: 0; transform: translate(-50%, -190%) scale(1); } }
@keyframes ck-rise-gold { 0% { opacity: 0; transform: translate(-50%, -40%) scale(0.7); } 12% { opacity: 1; transform: translate(-50%, -60%) scale(1.1); } 75% { opacity: 1; transform: translate(-50%, -150%) scale(1); } 100% { opacity: 0; transform: translate(-50%, -190%) scale(1); } }
@keyframes ck-pop { 0% { transform: scale(0.85); } 60% { transform: scale(1.08); } 100% { transform: scale(1); } }
@keyframes ck-gold-in { from { transform: scale(0.2); opacity: 0; } to { transform: scale(1); opacity: 1; } }
@keyframes ck-wobble { 0%, 100% { transform: rotate(-6deg) scale(1); } 50% { transform: rotate(6deg) scale(1.06); } }
@keyframes ck-bob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-5px); } }
.ck-page.still *, .ck-page.still *::before { animation: none !important; transition: none !important; }
@media (max-width: 380px) {
  .ck-boosts { grid-template-columns: minmax(0, 1fr); }
  .ck-num { font-size: 38px; }
  /* A face of ~140 px leaves room for the golden buddy beside it. */
  .ck-page { --ck-b: clamp(104px, calc(50vh - 170px), 176px); --ck-face: calc(var(--ck-b) * 0.8); }
  .ck-hello { right: -14px; }
  .ck-buy { width: 96px; }
  .ck-notice { font-size: 13px; }
}
/* A short screen: less room around the counter and the buddy. */
@media (max-height: 740px) {
  .ck-stage { padding: 12px 12px 10px; }
  .ck-num { font-size: 38px; min-height: 40px; }
  .ck-buddy-wrap { margin-top: 8px; }
  .ck-note { margin-top: 4px; }
  .ck-body { margin-top: 10px; gap: 12px; }
}
@media (max-width: 360px) {
  .ck-card { gap: 10px; }
  .ck-card-art { width: 60px; height: 56px; }
  .ck-card-title { font-size: 18px; }
}