/* the buddy, companions, shop and capsule machine */
.coinchip { display: inline-flex; align-items: center; gap: 6px; font-weight: 900; background: var(--ink); color: var(--on-ink); border-radius: 999px; padding: 6px 12px 6px 8px; font-variant-numeric: tabular-nums; align-self: flex-start }
.coinchip.big { font-size: 17px; padding: 8px 14px 8px 10px }
.avatar { position: relative; display: inline-block; width: var(--sz); height: var(--sz); flex: none }
.avatar img { width: 100%; height: 100%; image-rendering: pixelated; display: block; border-radius: 22%; background: var(--card-2) }
.avatar .crown { position: absolute; left: 22%; top: -14%; width: 56% }
.avatar .crown svg { display: block; width: 100% }
.petimg { image-rendering: pixelated; display: block }
.petimg.shadow { filter: brightness(0) opacity(.25) }
.bob { animation: bob 1.1s steps(2, end) infinite }
.wob { animation: wob 1.4s steps(4, end) infinite; transform-origin: 50% 90% }
@keyframes bob { 50% { transform: translateY(-4px) } }
@keyframes wob { 25% { transform: rotate(-6deg) } 75% { transform: rotate(6deg) } }
.buddycard { display: flex; align-items: flex-end; gap: 6px; text-decoration: none; color: inherit; position: relative }
.buddycard .pet { margin-left: -18px }
.buddycard .bc-t { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 4px; align-self: center; margin-left: 10px }
.buddy-grid { display: grid; gap: 14px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 340px), 1fr)); align-items: start }
.bstage { display: flex; flex-direction: column; gap: 14px }
.bscene { display: flex; align-items: flex-end; justify-content: center; gap: 0; padding: 18px 0 6px; border-radius: 22px; background: radial-gradient(70% 60% at 50% 70%, var(--or-soft), transparent) }
.bscene .pet { margin-left: -24px; cursor: pointer }
.petinfo { display: flex; flex-direction: column; gap: 6px }
.ability { display: flex; flex-direction: column; gap: 4px; padding: 12px; border-radius: 16px; background: var(--card-2); border: 1.5px solid var(--line) }
.ability .abname { font-weight: 900 }
.ability .btn { align-self: flex-start; margin-top: 4px }
.wtabs { display: flex; gap: 6px; overflow-x: auto; padding-bottom: 6px; margin-bottom: 10px }
.wtabs button { flex: none; border: 1.5px solid var(--line); background: var(--card-2); color: inherit; border-radius: 999px; padding: 8px 14px; font: inherit; font-weight: 800; cursor: pointer }
.wtabs button[aria-selected="true"] { background: var(--ink); color: var(--on-ink); border-color: var(--ink) }
.wgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(112px, 1fr)); gap: 10px }
.witem { position: relative; display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 10px 6px; border-radius: 18px; border: 2px solid var(--line); background: var(--card-2); color: inherit; font: inherit; cursor: pointer; text-align: center; transition: transform .12s var(--ease-out), border-color .15s }
.witem:active { transform: scale(.96) }
.witem.on { border-color: var(--or); background: var(--or-soft) }
.witem.locked .avatar { opacity: .55 }
.witem .wword { font-weight: 800; font-size: 14px; line-height: 1.2 }
.witem .lock { position: absolute; top: 6px; right: 6px; display: inline-flex; align-items: center; gap: 3px; font-size: 12px; font-weight: 900; background: var(--ink); color: var(--on-ink); border-radius: 999px; padding: 2px 7px 2px 4px }
.witem .lock svg { width: 13px; height: 13px }
.witem .lock.cap { background: #8b4fd6; padding: 2px 8px }
.shopgrid .witem { cursor: default }
.shopgrid .btn svg, .eggcard .btn svg { width: 16px; height: 16px; margin-right: 4px }
.pgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); gap: 10px }
.pcard { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 14px 8px; border-radius: 20px; border: 2px solid var(--line); background: var(--card); color: inherit; font: inherit; cursor: pointer; text-align: center }
.pcard.on { border-color: var(--or); background: var(--or-soft) }
.pcard:disabled { cursor: default }
.starter { max-width: 560px }
.starters { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 10px; width: 100% }
.shop-top { display: grid; gap: 14px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr)) }
.capcard { display: flex; align-items: center; gap: 14px; text-decoration: none; color: #fff; background: linear-gradient(135deg, #ff7a1a, #ea4200) }
.capcard b { display: block; font-size: 20px }
.capcard .small { color: #fff; opacity: .9 }
.capcard .btn { background: #fff; color: #1f1d2b; flex: none }
.capicon { flex: none; width: 64px; height: 64px; border-radius: 50%; background: rgba(255,255,255,.35); position: relative; border: 3px solid #fff }
.capicon i { position: absolute; width: 18px; height: 18px; border-radius: 50%; border: 2px solid #1f1d2b }
.capicon i:nth-child(1) { left: 10px; top: 26px; background: #3b82f6 } .capicon i:nth-child(2) { left: 26px; top: 30px; background: #ffd23f }
.capicon i:nth-child(3) { left: 30px; top: 12px; background: #22b86a } .capicon i:nth-child(4) { left: 12px; top: 10px; background: #e0408f }
.eggcard { display: flex; align-items: center; gap: 14px }
.capstage { position: relative; height: min(62vh, 560px); min-height: 320px; border-radius: 28px; overflow: hidden; background: radial-gradient(120% 80% at 50% 20%, #fff 0%, #ffe8d4 60%, #ffd9bd 100%) }
.capstage canvas { display: block; width: 100%; height: 100%; touch-action: none; cursor: grab }
.caphint { position: absolute; left: 0; right: 0; bottom: 10px; text-align: center; font-size: 12px; font-weight: 800; color: #b09580; pointer-events: none }
.capbtns { display: flex; gap: 10px }
.capbtns .gbtn { flex: 1 }
.gbtn.orange { background: var(--or); color: #fff }
.capodds { display: flex; justify-content: space-between; gap: 8px; color: var(--muted); font-weight: 800; flex-wrap: wrap }
.capodds b { color: #8b4fd6 }
.prizecard { text-align: center; align-items: center; box-shadow: 0 0 0 6px var(--rc) }
.prizecard .rar { font-weight: 900; font-size: 13px; letter-spacing: .12em; text-transform: uppercase; color: #fff; background: var(--rc); border-radius: 999px; padding: 5px 14px }
.prizecard .rar.dark { background: var(--ink); color: var(--on-ink) }
.prizecard .pic { width: 160px; height: 160px; border-radius: 26px; display: grid; place-items: center; background: color-mix(in srgb, var(--rc) 14%, transparent) }
.refundchip { display: inline-flex; align-items: center; gap: 6px; font-weight: 900; color: #b07a00; background: #fff4cf; border-radius: 999px; padding: 6px 12px }
.helpbtn { display: inline-flex; align-items: center; gap: 8px; margin-top: 12px; border: 2px dashed var(--or); background: var(--or-soft); color: inherit; border-radius: 16px; padding: 6px 14px 6px 8px; font: inherit; font-weight: 800; cursor: pointer }
.helpbtn img { image-rendering: pixelated }
.helpon { margin-top: 10px }
.opt.gone { opacity: .25; text-decoration: line-through }
@media (prefers-reduced-motion: reduce) { .bob, .wob { animation: none } }
.capcard, .eggcard, .buddycard { flex-direction: row }
.capcard > span:not(.capicon):not(.btn), .eggcard > span { display: flex; flex-direction: column; gap: 2px; flex: 1; min-width: 0 }
.capcard .btn { align-self: center }
.prizecard, .starter { background: var(--bg); border: 1.5px solid var(--line) }
.capstage { height: min(54vh, 520px) }
.helpon { color: #fff; font-weight: 800; opacity: .9 }

/* the stick buddy: lines take the text colour, the face the page colour */
.avatar.stick { --stick: var(--fg); --face: var(--bg); display: grid; place-items: center; background: none }
.avatar.stick svg { width: 100%; height: 100%; display: block; overflow: visible }
.witem .avatar.stick, .buddycard .avatar.stick { border-radius: 16px; background: var(--card-2) }
.stickbtn { all: unset; cursor: pointer; display: block }
.stickbtn:focus-visible { outline: 3px solid var(--or); outline-offset: 4px; border-radius: 20px }
.prizecard .avatar.stick { --stick: #1f1d2b; --face: #fff; background: #fff; border-radius: 22px }
.avatar.stick svg { overflow: hidden }
.avatar.stick.big svg { overflow: visible }
.avatar.stick { overflow: hidden }
.avatar.stick.big { overflow: visible }

/* "put it on your home screen" */
.instcard { flex-direction: row; align-items: center; gap: 14px; flex-wrap: wrap }
.instcard img { border-radius: 14px; flex: none }
.instcard .it { flex: 1; min-width: 180px; display: flex; flex-direction: column; gap: 2px }
.instmodal { background: var(--bg); border: 1.5px solid var(--line); max-width: 480px; align-items: stretch; text-align: left }
.insttabs { display: flex; gap: 6px; flex-wrap: wrap }
.insttabs button { border: 1.5px solid var(--line); background: var(--card-2); color: inherit; border-radius: 999px; padding: 8px 14px; font: inherit; font-weight: 800; cursor: pointer }
.insttabs button[aria-selected="true"] { background: var(--ink); color: var(--on-ink); border-color: var(--ink) }
.inststeps { list-style: none; margin: 4px 0 0; padding: 0; display: flex; flex-direction: column; gap: 10px }
.inststeps li { display: flex; gap: 12px; align-items: flex-start; padding: 12px; border-radius: 14px; background: var(--card-2); border: 1.5px solid var(--line) }
.inststeps .n { flex: none; width: 28px; height: 28px; border-radius: 9px; display: grid; place-items: center; background: var(--or); color: #fff; font-weight: 900 }
.inststeps .ico { width: 22px; height: 22px; vertical-align: -6px; display: inline-block; margin: 0 2px }