/* Tap cosmetics (Telegram Stars shop, looks only): coin skins switch the coin's SVG gradients and colours by
   [data-skin] on any ancestor (the /tap stage, a preview card); tap effects style what bursts under the finger by
   [data-fx]. The gradients live once in views/tap.html (.coin-defs). Nothing here touches a number. */
.coin-defs { position: absolute; width: 0; height: 0; overflow: hidden; }

/* ---- default: Oltin ---- */
.coin-svg .c-rim { fill: url(#cr-gold); }
.coin-svg .c-face { fill: url(#cf-gold); }
.coin-svg .c-ring { fill: none; stroke: #fff6d6; stroke-width: 3; opacity: 0.55; }
.coin-svg .c-dots { fill: none; stroke: #b86f00; stroke-width: 2; stroke-dasharray: 2 6; opacity: 0.55; }
.coin-svg .c-die { fill: #b86f00; opacity: 0.92; }
.coin-svg .c-pips { fill: #fff3c4; }
.coin-svg .c-shine { fill: none; stroke: #fffbe8; stroke-width: 7; stroke-linecap: round; opacity: 0.75; }
.tap-bal-coin .c-ring { stroke-width: 10; }

/* ---- Olmos: blue crystal ---- */
[data-skin="diamond"] .c-rim { fill: url(#cr-diamond); }
[data-skin="diamond"] .c-face { fill: url(#cf-diamond); }
[data-skin="diamond"] .c-ring { stroke: #e8faff; opacity: 0.8; }
[data-skin="diamond"] .c-dots { stroke: #e8faff; opacity: 0.5; stroke-dasharray: 6 4; }
[data-skin="diamond"] .c-die { fill: #173f94; }
[data-skin="diamond"] .c-pips { fill: #e8faff; }
/* ---- Olov: red-orange with a flame glow ---- */
[data-skin="fire"] .c-rim { fill: url(#cr-fire); }
[data-skin="fire"] .c-face { fill: url(#cf-fire); }
[data-skin="fire"] .c-ring { stroke: #ffe0a0; }
[data-skin="fire"] .c-dots { stroke: #7d1206; }
[data-skin="fire"] .c-die { fill: #7d1206; }
[data-skin="fire"] .c-pips { fill: #fff1c2; }
/* ---- Neon: violet body, cyan light ---- */
[data-skin="neon"] .c-rim { fill: url(#cr-neon); }
[data-skin="neon"] .c-face { fill: url(#cf-neon); }
[data-skin="neon"] .c-ring { stroke: #b18cff; opacity: 0.9; }
[data-skin="neon"] .c-dots { stroke: #22d3ee; opacity: 0.85; }
[data-skin="neon"] .c-die { fill: #0b0820; stroke: #22d3ee; stroke-width: 3; opacity: 1; }
[data-skin="neon"] .c-pips { fill: #22d3ee; }
[data-skin="neon"] .c-shine { stroke: #c9f7ff; opacity: 0.45; }
/* ---- O'zbekiston: flag colours ---- */
[data-skin="uzbek"] .c-rim { fill: url(#cr-uzbek); }
[data-skin="uzbek"] .c-face { fill: url(#cf-uzbek); }
[data-skin="uzbek"] .c-ring { stroke: #ffffff; opacity: 0.85; }
[data-skin="uzbek"] .c-dots { stroke: #ce1126; opacity: 0.6; }
[data-skin="uzbek"] .c-die { fill: #ffffff; stroke: #0099b5; stroke-width: 3; opacity: 0.96; }
[data-skin="uzbek"] .c-pips { fill: #0099b5; }
[data-skin="uzbek"] .c-shine { opacity: 0.45; }
/* ---- Qora oltin: black with gold ---- */
[data-skin="blackgold"] .c-rim { fill: url(#cr-blackgold); }
[data-skin="blackgold"] .c-face { fill: url(#cf-blackgold); }
[data-skin="blackgold"] .c-ring { stroke: #ffc940; opacity: 0.85; }
[data-skin="blackgold"] .c-dots { stroke: #ffc940; opacity: 0.6; }
[data-skin="blackgold"] .c-die { fill: #ffc940; }
[data-skin="blackgold"] .c-pips { fill: #111111; }
[data-skin="blackgold"] .c-shine { opacity: 0.3; }

/* the light behind the coin follows the skin */
[data-skin="diamond"] .tap-glow { background: radial-gradient(circle, rgba(143, 220, 255, 0.55) 0%, rgba(39, 99, 214, 0.22) 38%, transparent 64%), radial-gradient(circle, rgba(139, 92, 255, 0.3) 30%, transparent 72%); }
[data-skin="fire"] .tap-glow { background: radial-gradient(circle, rgba(255, 138, 31, 0.6) 0%, rgba(200, 32, 15, 0.28) 40%, transparent 66%); animation: tap-flicker 1.6s ease-in-out infinite; }
[data-skin="neon"] .tap-glow { background: radial-gradient(circle, rgba(34, 211, 238, 0.45) 0%, rgba(123, 77, 255, 0.35) 40%, transparent 68%); }
[data-skin="uzbek"] .tap-glow { background: radial-gradient(circle, rgba(0, 153, 181, 0.4) 0%, rgba(30, 181, 58, 0.2) 40%, transparent 66%); }
[data-skin="blackgold"] .tap-glow { background: radial-gradient(circle, rgba(255, 201, 64, 0.38) 0%, rgba(0, 0, 0, 0.3) 40%, transparent 66%); }
@keyframes tap-flicker { 0%, 100% { opacity: 1; transform: scale(1); } 30% { opacity: 0.8; transform: scale(1.03); } 60% { opacity: 0.92; transform: scale(0.98); } }
[data-skin="diamond"] .tap-coin { filter: drop-shadow(0 22px 40px rgba(0, 0, 0, 0.55)) drop-shadow(0 0 34px rgba(143, 220, 255, 0.45)); }
[data-skin="fire"] .tap-coin { filter: drop-shadow(0 22px 40px rgba(0, 0, 0, 0.55)) drop-shadow(0 0 38px rgba(255, 106, 0, 0.55)); }
[data-skin="neon"] .tap-coin { filter: drop-shadow(0 22px 40px rgba(0, 0, 0, 0.55)) drop-shadow(0 0 30px rgba(34, 211, 238, 0.55)); }
[data-skin="uzbek"] .tap-coin { filter: drop-shadow(0 22px 40px rgba(0, 0, 0, 0.55)) drop-shadow(0 0 26px rgba(0, 153, 181, 0.4)); }
[data-skin="blackgold"] .tap-coin { filter: drop-shadow(0 22px 40px rgba(0, 0, 0, 0.6)) drop-shadow(0 0 30px rgba(255, 201, 64, 0.35)); }

/* ---- tap effects (the burst under the finger) ---- */
.tap-spark.fx-stars, .tap-spark.fx-hearts { width: auto; height: auto; background: none; font-size: 15px; line-height: 1; transform-origin: center; }
.tap-spark.fx-stars { color: #ffe27a; text-shadow: 0 0 8px rgba(255, 226, 122, 0.9); }
.tap-spark.fx-hearts { color: #ff4f8b; text-shadow: 0 0 8px rgba(255, 79, 139, 0.8); }
.tap-spark.fx-confetti { width: 6px; height: 10px; border-radius: 1px; background: var(--c, #ffc940); animation-name: tap-confetti; }
.tap-spark.fx-embers { width: 6px; height: 6px; background: radial-gradient(circle, #fff1c2, #ff8a1f 55%, transparent 72%); box-shadow: 0 0 8px #ff6a00; }
.tap-spark.fx-coinrain { width: 12px; height: 12px; background: radial-gradient(circle at 35% 30%, #fff3c4, #ffc940 45%, #c27a00 75%); box-shadow: inset 0 0 0 1px #a65f00; }
@keyframes tap-confetti { to { transform: translate(var(--dx), var(--dy)) rotate(var(--rot, 360deg)); opacity: 0; } }

/* ---- Bezaklar grid (info sheet) ---- */
.tap-cos { display: grid; gap: 8px; }
.tap-cos h3 { margin: 0; font-size: var(--step-0); }
.tap-cos-note { margin: 0; font-size: 0.78rem; color: var(--mute); }
.tap-cos-tabs { display: flex; gap: 6px; }
.tap-cos-tabs button {
  flex: 1; min-height: 36px; border: 0; border-radius: 12px; cursor: pointer; font: 800 0.8rem/1 var(--font); color: var(--mute);
  background: rgba(255, 255, 255, 0.05); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.08);
}
.tap-cos-tabs button[aria-selected="true"] { color: #fff; background: rgba(139, 92, 255, 0.25); box-shadow: inset 0 0 0 1px rgba(177, 140, 255, 0.5); }
.tap-cos-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.cos-card {
  display: grid; justify-items: center; gap: 4px; padding: 10px 6px 8px; border: 0; border-radius: 16px; cursor: pointer; color: var(--ink); font: inherit;
  background: rgba(255, 255, 255, 0.04); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.08); transition: transform 80ms ease, box-shadow var(--fast);
}
.cos-card:active { transform: scale(0.97); }
.cos-card:focus-visible { outline: 2px solid var(--violet-2); outline-offset: 2px; }
.cos-card.is-equipped { box-shadow: inset 0 0 0 2px var(--win); }
.cos-card.is-preview { box-shadow: inset 0 0 0 2px var(--gold); }
.cos-prev { width: 52px; height: 52px; display: grid; place-items: center; }
.cos-prev .coin-svg { width: 100%; height: 100%; filter: drop-shadow(0 4px 10px rgba(0, 0, 0, 0.5)); }
.cos-fx { font-size: 1.6rem; line-height: 1; }
.cos-name { font-weight: 800; font-size: 0.74rem; text-align: center; line-height: 1.15; }
.cos-state { font-size: 0.7rem; font-weight: 800; color: var(--mute); }
.cos-state.is-price { color: var(--gold); }
.cos-state.is-on { color: var(--win); }
.tap-cos-msg { margin: 0; min-height: 1.2em; font-size: var(--step--1); font-weight: 700; }
.tap-cos-buy { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }

@media (prefers-reduced-motion: reduce) {
  [data-skin="fire"] .tap-glow { animation: none; }
}