/* Cosmetics shop: avatar frames, name colours, dice skins and the shop dialog. Looks only - nothing here changes gameplay. */

/* ---- avatar frames (.ava.frame-*) ---- */
.ava.frame-gold { box-shadow: 0 0 0 2px #ffc940, 0 0 0 3px rgba(255, 201, 64, 0.35), 0 0 12px -2px rgba(255, 201, 64, 0.9); }
.ava.frame-neon {
  box-shadow: 0 0 0 2px #a77bff, 0 0 10px 1px rgba(167, 123, 255, 0.9), 0 0 22px 2px rgba(139, 92, 255, 0.55);
  animation: frame-neon 1.8s ease-in-out infinite;
}
@keyframes frame-neon {
  50% { box-shadow: 0 0 0 2px #d9c8ff, 0 0 14px 3px rgba(199, 173, 255, 1), 0 0 30px 6px rgba(139, 92, 255, 0.7); }
}
.ava.frame-fire, .ava.frame-ice, .ava.frame-royal { position: relative; isolation: isolate; }
.ava.frame-fire::before, .ava.frame-ice::before {
  content: ""; position: absolute; inset: -3px; z-index: -1; border-radius: inherit;
}
.ava.frame-fire::before { background: conic-gradient(from 180deg, #ff3d6e, #ff8a3d, #ffc940, #ff8a3d, #ff3d6e); box-shadow: 0 0 14px -2px rgba(255, 138, 61, 0.9); }
.ava.frame-ice::before { background: conic-gradient(#7ee0ff, #e4f8ff, #5ab8ff, #c8f1ff, #7ee0ff); box-shadow: 0 0 14px -2px rgba(126, 224, 255, 0.9); }
.ava.frame-royal { box-shadow: 0 0 0 2px #ffc940, 0 0 0 3px rgba(167, 123, 255, 0.7); }
.ava.frame-royal::after {
  content: "♛"; position: absolute; top: -11px; right: -7px; font-size: 13px; line-height: 1; color: #ffc940;
  text-shadow: 0 0 6px rgba(255, 201, 64, 0.9), 0 1px 0 #7a4b00; transform: rotate(18deg);
}
/* the header chip is a .ava too: give the crown room */
.menu summary .ava.frame-royal { margin-top: 2px; }

/* ---- name colours (.nc-*) ---- */
.nc-gold { color: #ffc940; text-shadow: 0 0 10px rgba(255, 201, 64, 0.45); }
.nc-violet { color: #b18cff; text-shadow: 0 0 10px rgba(177, 140, 255, 0.45); }
.nc-green { color: #45f7a8; text-shadow: 0 0 10px rgba(31, 224, 138, 0.45); }
.nc-pink { color: #ff7aa2; text-shadow: 0 0 10px rgba(255, 61, 110, 0.45); }
.nc-rainbow {
  background: linear-gradient(90deg, #ff3d6e, #ffc940, #45f7a8, #7ee0ff, #b18cff, #ff3d6e) 0 0 / 300% 100%;
  -webkit-background-clip: text; background-clip: text; color: transparent; -webkit-text-fill-color: transparent;
  animation: nc-rainbow 4s linear infinite;
}
@keyframes nc-rainbow { to { background-position: 300% 0; } }
@media (prefers-reduced-motion: reduce) {
  .ava.frame-neon, .nc-rainbow { animation: none; }
}

/* ---- dice skins: body[data-dice-skin] on /dice, [data-dice-skin] on the shop previews ---- */
[data-dice-skin="neon"] .screen, [data-dice-skin="neon"].shop-dice, [data-dice-skin="neon"] .shop-dice {
  background: radial-gradient(120% 90% at 50% 0%, rgba(126, 224, 255, 0.25), transparent 60%), linear-gradient(180deg, #06111f, #040913);
  box-shadow: 0 0 0 1px rgba(126, 224, 255, 0.55) inset, 0 0 40px -10px rgba(126, 224, 255, 0.8) inset;
}
[data-dice-skin="neon"] .roll-num, [data-dice-skin="neon"] .shop-dice-num { color: #7ee0ff; text-shadow: 0 0 14px #7ee0ff, 0 0 40px rgba(126, 224, 255, 0.6); }
[data-dice-skin="neon"] .roll-num.is-idle { color: #1d4a5e; text-shadow: none; }
[data-dice-skin="neon"] .play-btn.under, [data-dice-skin="neon"] .shop-dice-btns .under {
  color: #04111a; background: linear-gradient(180deg, #8ff1ff, #16b8e0); box-shadow: 0 6px 0 #0b6e88, 0 14px 30px -8px rgba(126, 224, 255, 0.8);
}
[data-dice-skin="neon"] .play-btn.over, [data-dice-skin="neon"] .shop-dice-btns .over {
  color: #fff; background: linear-gradient(180deg, #d58cff, #8b2fd6); box-shadow: 0 6px 0 #4d1480, 0 14px 30px -8px rgba(167, 123, 255, 0.8);
}

[data-dice-skin="gold"] .screen, [data-dice-skin="gold"].shop-dice, [data-dice-skin="gold"] .shop-dice {
  background: radial-gradient(120% 90% at 50% 0%, rgba(255, 201, 64, 0.22), transparent 60%), linear-gradient(180deg, #1c1304, #0e0902);
  box-shadow: 0 0 0 1px rgba(255, 201, 64, 0.5) inset, 0 2px 30px rgba(0, 0, 0, 0.5) inset;
}
[data-dice-skin="gold"] .roll-num, [data-dice-skin="gold"] .shop-dice-num {
  background: linear-gradient(180deg, #fff3c4, #ffc940 55%, #c98700); -webkit-background-clip: text; background-clip: text; color: transparent;
  -webkit-text-fill-color: transparent; text-shadow: none; filter: drop-shadow(0 0 14px rgba(255, 201, 64, 0.5));
}
[data-dice-skin="gold"] .roll-num.is-idle { background: linear-gradient(180deg, #5a4a20, #3a2e12); }
[data-dice-skin="gold"] .roll-num.is-win { background: linear-gradient(180deg, #d4ffe9, var(--win)); }
[data-dice-skin="gold"] .roll-num.is-lose { background: linear-gradient(180deg, #ffd0dc, var(--lose)); }
[data-dice-skin="gold"] .play-btn.under, [data-dice-skin="gold"] .shop-dice-btns .under {
  color: #241500; background: linear-gradient(180deg, #ffe08a, #ffb300); box-shadow: 0 6px 0 #a86a00, 0 14px 34px -8px rgba(255, 179, 0, 0.8);
}
[data-dice-skin="gold"] .play-btn.over, [data-dice-skin="gold"] .shop-dice-btns .over {
  color: #fff3c4; background: linear-gradient(180deg, #7a4b00, #3f2500); box-shadow: 0 6px 0 #1f1200, 0 14px 30px -8px rgba(122, 75, 0, 0.9);
}

[data-dice-skin="retro"] .screen, [data-dice-skin="retro"].shop-dice, [data-dice-skin="retro"] .shop-dice {
  background: repeating-linear-gradient(0deg, rgba(0, 0, 0, 0.18) 0 2px, transparent 2px 4px), linear-gradient(180deg, #0c1a0c, #051005);
  box-shadow: 0 0 0 1px rgba(69, 247, 168, 0.45) inset, 0 0 0 4px #0a0a0a inset;
}
[data-dice-skin="retro"] .roll-num, [data-dice-skin="retro"] .shop-dice-num { font-family: var(--mono); letter-spacing: 0.04em; color: #45f7a8; text-shadow: 2px 2px 0 #0b6a3a, 0 0 10px rgba(69, 247, 168, 0.6); }
[data-dice-skin="retro"] .roll-num.is-idle { color: #1f5a3a; text-shadow: none; }
[data-dice-skin="retro"] .roll-num.is-land { animation: none; }
[data-dice-skin="retro"] .play-btn, [data-dice-skin="retro"] .shop-dice-btns i { border-radius: 4px; }
[data-dice-skin="retro"] .play-btn::after { display: none; }
[data-dice-skin="retro"] .play-btn .pb-label { font-family: var(--mono); letter-spacing: 0.08em; }
[data-dice-skin="retro"] .play-btn.under, [data-dice-skin="retro"] .shop-dice-btns .under { color: #03200f; background: #45f7a8; box-shadow: 4px 4px 0 #0b6a3a; }
[data-dice-skin="retro"] .play-btn.over, [data-dice-skin="retro"] .shop-dice-btns .over { color: #fff; background: #ff3d6e; box-shadow: 4px 4px 0 #8f0f35; }
[data-dice-skin="retro"] .play-btn:active:not(.is-busy) { transform: translate(3px, 3px); box-shadow: 1px 1px 0 #000; }

[data-dice-skin="space"] .screen, [data-dice-skin="space"].shop-dice, [data-dice-skin="space"] .shop-dice {
  background:
    radial-gradient(1px 1px at 20% 30%, #fff 50%, transparent 51%), radial-gradient(1.5px 1.5px at 70% 20%, #fff 50%, transparent 51%),
    radial-gradient(1px 1px at 40% 80%, #fff 50%, transparent 51%), radial-gradient(1px 1px at 85% 65%, #b18cff 50%, transparent 51%),
    radial-gradient(1.5px 1.5px at 10% 70%, #7ee0ff 50%, transparent 51%), radial-gradient(1px 1px at 60% 50%, #fff 50%, transparent 51%),
    radial-gradient(120% 90% at 50% 100%, rgba(139, 92, 255, 0.35), transparent 60%), linear-gradient(180deg, #050314, #02010a);
  box-shadow: 0 0 0 1px rgba(177, 140, 255, 0.4) inset, 0 2px 40px rgba(0, 0, 0, 0.7) inset;
}
[data-dice-skin="space"] .roll-num, [data-dice-skin="space"] .shop-dice-num {
  background: linear-gradient(180deg, #ffffff, #b18cff 60%, #7ee0ff); -webkit-background-clip: text; background-clip: text; color: transparent;
  -webkit-text-fill-color: transparent; text-shadow: none; filter: drop-shadow(0 0 16px rgba(177, 140, 255, 0.7));
}
[data-dice-skin="space"] .roll-num.is-idle { background: linear-gradient(180deg, #3a3566, #22203f); }
[data-dice-skin="space"] .roll-num.is-win { background: linear-gradient(180deg, #d4ffe9, var(--win)); }
[data-dice-skin="space"] .roll-num.is-lose { background: linear-gradient(180deg, #ffd0dc, var(--lose)); }
[data-dice-skin="space"] .roll-num.is-rolling { animation: space-drift 600ms ease-in-out infinite alternate; }
@keyframes space-drift { from { transform: translateY(-2px); } to { transform: translateY(2px); } }
[data-dice-skin="space"] .play-btn.under, [data-dice-skin="space"] .shop-dice-btns .under {
  color: #fff; background: linear-gradient(180deg, #6d7cff, #2d35c7); box-shadow: 0 6px 0 #141a6b, 0 14px 30px -8px rgba(109, 124, 255, 0.8);
}
[data-dice-skin="space"] .play-btn.over, [data-dice-skin="space"] .shop-dice-btns .over {
  color: #fff; background: linear-gradient(180deg, #c678ff, #7a1fd0); box-shadow: 0 6px 0 #3d0c70, 0 14px 30px -8px rgba(198, 120, 255, 0.8);
}

/* ---- dialog ---- */
.shop-dialog { width: min(720px, calc(100vw - 32px)); max-height: calc(100vh - 32px); overflow: auto; }
.shop-kicker { margin: -8px 0 12px; font-size: 0.72rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--gold); font-weight: 800; }
.shop-preview {
  display: grid; grid-template-columns: minmax(0, 1fr) 150px; align-items: center; gap: 14px; margin-bottom: 14px; padding: 12px 14px;
  border-radius: var(--r); background: var(--well); box-shadow: 0 0 0 1px var(--line) inset;
}
.shop-preview-who { display: inline-flex; align-items: center; gap: 10px; min-width: 0; }
.shop-preview-who .ava { width: 40px; height: 40px; border-radius: 12px; font-size: 1.05rem; }
.shop-name { font-weight: 800; font-size: 1.05rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.shop-tabs { margin: 0 0 12px; }
.shop-tabs button { flex: 1 1 auto; justify-content: center; }
.shop-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; }
.shop-card {
  display: grid; gap: 8px; justify-items: center; padding: 14px 10px 12px; border-radius: var(--r);
  background: rgba(255, 255, 255, 0.03); box-shadow: 0 0 0 1px var(--line) inset; text-align: center;
  transition: box-shadow var(--fast), transform var(--fast);
}
.shop-card:hover { transform: translateY(-1px); box-shadow: 0 0 0 1px var(--line-2) inset; }
.shop-card.is-on { box-shadow: 0 0 0 2px var(--violet) inset, 0 0 24px -8px var(--violet); }
.shop-card-name { font-weight: 800; font-size: var(--step--1); }
.shop-price { font-weight: 800; color: var(--gold); font-variant-numeric: tabular-nums; }
.shop-price.is-owned { color: var(--mute); }
.shop-state { font-weight: 800; color: var(--win); font-size: var(--step--1); min-height: 36px; display: inline-flex; align-items: center; }
.shop-swatch { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; }
.shop-swatch .ava { width: 40px; height: 40px; border-radius: 12px; font-size: 1.05rem; }
.shop-dice {
  display: grid; justify-items: center; gap: 6px; width: 100%; max-width: 150px; min-height: 76px; padding: 10px 8px 8px; border-radius: 12px;
  background: radial-gradient(120% 90% at 50% 0%, rgba(139, 92, 255, 0.22), transparent 60%), linear-gradient(180deg, #0f0c26, #0a0819);
  box-shadow: 0 0 0 1px var(--line) inset; overflow: hidden;
}
.shop-dice-num { font: 800 1.6rem/1 var(--display); letter-spacing: -0.03em; color: var(--ink); text-shadow: 0 0 20px rgba(177, 140, 255, 0.35); font-variant-numeric: tabular-nums; }
.shop-dice-num small { font-size: 0.5em; opacity: 0.55; }
.shop-dice-btns { display: flex; gap: 6px; width: 100%; }
.shop-dice-btns i { flex: 1; height: 14px; border-radius: 6px; display: block; }
.shop-dice-btns .under { background: linear-gradient(180deg, #4cfbae, #12c477); box-shadow: 0 3px 0 #087a49; }
.shop-dice-btns .over { background: linear-gradient(180deg, #ff6d92, #e01f57); box-shadow: 0 3px 0 #8f0f35; }
.btn-sm { min-height: 36px; padding: 0 14px; font-size: var(--step--1); }
.btn-star { color: #1d1300; background: linear-gradient(180deg, #ffe08a, #ffc940); box-shadow: 0 0 18px -6px var(--gold); }
.btn-star:hover:not(:disabled) { filter: brightness(1.06); }
.btn-star:disabled { opacity: 0.45; cursor: not-allowed; }
.shop-msg { min-height: 0; margin: 12px 0 0; text-align: center; }
.shop-msg:empty { display: none; }
.shop-msg[data-kind="bad"] { color: var(--lose); }
.shop-note { margin-top: 10px; color: var(--gold); }
.shop-hint { margin-top: 10px; }

@media (max-width: 560px) {
  .shop-dialog { padding: 20px 14px; }
  .shop-preview { grid-template-columns: minmax(0, 1fr) 120px; gap: 10px; padding: 10px; }
  .shop-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  .shop-card { padding: 12px 8px 10px; }
  .shop-tabs button { padding: 0 8px; font-size: 0.78rem; }
}