/* css/bop-mascots.css - Bopstarr player mascots: the avatar fill and the picker sheet (js/bop-mascots.js). */

/* Any avatar circle that shows a mascot: the portrait fills it on a tinted glow. */
.bm-has {
    --mc: #a855f7;
    position: relative;
    padding: 0 !important;
    color: transparent !important;
    background: radial-gradient(circle at 38% 30%, #5b2a9e 0%, #150c2e 78%) !important; /* no color-mix() */
    background: radial-gradient(circle at 38% 30%, color-mix(in srgb, var(--mc) 62%, #2a1458) 0%, #150c2e 78%) !important;
}
.bm-has > .bm-img { display: block; width: 100%; height: 100%; object-fit: cover; border-radius: inherit; pointer-events: none; user-select: none; }
.bm-has > .fa-star, .bm-has > i { z-index: 1; }
/* A tappable avatar (Live: give a player a mascot). */
.bm-tap { cursor: pointer; font: inherit; padding: 0; transition: transform .18s; }
.bm-tap:hover { transform: scale(1.06); }
.bm-tap:active { transform: scale(.96); }
.bm-tap:focus-visible { outline: 2px solid #f0abfc; outline-offset: 2px; }

/* ------------------------------------------------------------------ picker */
.bm-sheet { position: fixed; inset: 0; z-index: 2147482000; display: flex; align-items: flex-end; justify-content: center; font-family: Inter, system-ui, -apple-system, 'Segoe UI', sans-serif; color: #f8fafc; -webkit-tap-highlight-color: transparent; }
.bm-backdrop { position: absolute; inset: 0; background: rgba(6, 4, 18, .62); opacity: 0; transition: opacity .22s ease; -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); }
.bm-panel {
    --mc: #a855f7;
    position: relative; width: min(100%, 34rem); max-height: calc(100dvh - 1.5rem); overflow-y: auto; overscroll-behavior: contain;
    padding: .7rem 1rem calc(1rem + env(safe-area-inset-bottom));
    border-radius: 1.6rem 1.6rem 0 0; border: 1px solid rgba(255, 255, 255, .12); border-bottom: 0;
    background: radial-gradient(120% 60% at 50% 0%, color-mix(in srgb, var(--mc) 26%, transparent), transparent 70%), linear-gradient(180deg, #1b1236, #0e0a20);
    box-shadow: 0 -24px 60px rgba(0, 0, 0, .5), inset 0 1px 0 rgba(255, 255, 255, .12);
    transform: translateY(100%); transition: transform .32s cubic-bezier(.2, .9, .25, 1.05), background .3s;
}
.bm-sheet { --mc: #a855f7; }
.bm-sheet .bm-panel { --mc: inherit; }
.bm-sheet.is-open .bm-backdrop { opacity: 1; }
.bm-sheet.is-open .bm-panel { transform: none; }
.bm-sheet.is-leaving .bm-backdrop { opacity: 0; }
.bm-sheet.is-leaving .bm-panel { transform: translateY(100%); transition-duration: .2s; }
@media (min-width: 640px) {
    .bm-sheet { align-items: center; padding: 1rem; }
    .bm-panel { border-radius: 1.6rem; border-bottom: 1px solid rgba(255, 255, 255, .12); padding-bottom: 1.1rem; transform: translateY(18px) scale(.97); opacity: 0; transition: transform .28s cubic-bezier(.2, .9, .25, 1.05), opacity .2s; }
    .bm-sheet.is-open .bm-panel { opacity: 1; }
    .bm-sheet.is-leaving .bm-panel { transform: translateY(12px) scale(.98); opacity: 0; }
    .bm-grab { display: none !important; }
}
.bm-grab { display: block; width: 2.6rem; height: .3rem; margin: 0 auto .55rem; border-radius: 99px; background: rgba(255, 255, 255, .22); }
.bm-x { position: absolute; top: .6rem; right: .7rem; width: 2.2rem; height: 2.2rem; border: 0; border-radius: 50%; background: rgba(255, 255, 255, .08); color: #cbd5e1; font-size: 1.35rem; line-height: 1; cursor: pointer; }
.bm-x:hover { background: rgba(255, 255, 255, .16); color: #fff; }
.bm-title { margin: .1rem 2.4rem .2rem 0; font-size: 1.25rem; font-weight: 900; letter-spacing: -.02em; line-height: 1.2; color: #fff; }
.bm-sub { margin: 0 0 .6rem; font-size: .86rem; line-height: 1.45; color: #a5b4cf; }
.bm-sub:empty { display: none; }

.bm-stage { display: flex; align-items: center; gap: .9rem; margin: 0 0 .8rem; padding: .5rem .8rem .5rem .5rem; border-radius: 1.2rem; background: rgba(255, 255, 255, .05); border: 1px solid rgba(255, 255, 255, .08); }
.bm-preview { position: relative; flex: none; width: 8.5rem; height: 9.5rem; display: grid; place-items: center; border-radius: 1rem; background: radial-gradient(circle at 50% 45%, color-mix(in srgb, var(--mc) 45%, transparent), transparent 70%); }
.bm-preview bopstarr-3d { display: block; width: 100%; height: 100%; }
.bm-preview bopstarr-3d img { width: 100%; height: 100%; object-fit: contain; }
.bm-preview-img { width: 7.5rem; height: 7.5rem; border-radius: 50%; object-fit: cover; animation: bmBob 2.6s ease-in-out infinite; }
.bm-preview-initial { display: grid; place-items: center; width: 6rem; height: 6rem; border-radius: 50%; font-size: 2.6rem; font-weight: 900; color: #fff; background: linear-gradient(135deg, #ca438e, #8054d4); border: 1px solid rgba(255, 255, 255, .35); }
@keyframes bmBob { 50% { transform: translateY(-5px) rotate(-2deg); } }
.bm-caption { display: flex; flex-direction: column; gap: .2rem; min-width: 0; }
.bm-cap-name { font-size: 1.15rem; font-weight: 900; color: #fff; letter-spacing: -.01em; }
.bm-cap-desc { font-size: .84rem; line-height: 1.35; color: #c4b5fd; }
.bm-cap-use { font-size: .76rem; color: #fbbf24; }
.bm-cap-use[hidden] { display: none; }

.bm-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(4.6rem, 1fr)); gap: .45rem; margin: 0 0 .8rem; }
.bm-tile { position: relative; display: flex; flex-direction: column; align-items: center; gap: .3rem; padding: .45rem .2rem .4rem; border: 1px solid rgba(255, 255, 255, .08); border-radius: 1rem; background: rgba(255, 255, 255, .04); color: #e2e8f0; cursor: pointer; font: inherit; transition: transform .18s, background .18s, border-color .18s; }
.bm-tile:hover { background: rgba(255, 255, 255, .08); transform: translateY(-2px); }
.bm-tile:focus-visible { outline: 2px solid #f0abfc; outline-offset: 2px; }
.bm-tile-face { display: grid; place-items: center; width: 3.6rem; height: 3.6rem; border-radius: 50%; overflow: hidden; background: radial-gradient(circle at 38% 30%, color-mix(in srgb, var(--mc, #a855f7) 60%, #2a1458), #150c2e 78%); box-shadow: 0 0 0 2px rgba(255, 255, 255, .1); transition: box-shadow .18s; }
.bm-tile-face .bm-img { width: 100%; height: 100%; object-fit: cover; display: block; }
.bm-tile-name { font-size: .68rem; font-weight: 700; line-height: 1.15; text-align: center; color: #cbd5e1; overflow-wrap: anywhere; }
.bm-tile[aria-checked="true"] { background: color-mix(in srgb, var(--mc, #a855f7) 22%, transparent); border-color: color-mix(in srgb, var(--mc, #a855f7) 75%, white 10%); }
.bm-tile[aria-checked="true"] .bm-tile-face { box-shadow: 0 0 0 3px var(--mc, #a855f7), 0 0 22px color-mix(in srgb, var(--mc, #a855f7) 70%, transparent); }
.bm-tile[aria-checked="true"] .bm-tile-name { color: #fff; }
.bm-tile.is-in-use::after { content: ''; position: absolute; top: .4rem; right: .45rem; width: .5rem; height: .5rem; border-radius: 50%; background: #fbbf24; box-shadow: 0 0 6px #fbbf24; }
.bm-tile--none .bm-tile-face { font-size: 1.4rem; font-weight: 900; color: #fff; background: linear-gradient(135deg, #ca438e, #8054d4); }

.bm-error { margin: -.3rem 0 .6rem; padding: .5rem .7rem; border-radius: .7rem; background: rgba(244, 63, 94, .14); color: #fecdd3; font-size: .84rem; }
.bm-error[hidden] { display: none; }
.bm-actions { display: flex; gap: .6rem; }
.bm-btn { flex: 1; min-height: 3rem; border-radius: 999px; font: inherit; font-size: .95rem; font-weight: 800; cursor: pointer; transition: transform .15s, filter .15s; }
.bm-btn:active { transform: scale(.97); }
.bm-btn--ghost { border: 1px solid rgba(255, 255, 255, .16); background: transparent; color: #e2e8f0; }
.bm-btn--go { flex: 1.6; border: 0; color: #fff; background: linear-gradient(135deg, #ec4899, #8b5cf6); box-shadow: 0 10px 26px -10px #d946efaa; }
.bm-sheet.is-busy .bm-btn--go { filter: saturate(.5) brightness(.85); pointer-events: none; }
.bm-sheet.is-busy .bm-btn--go::after { content: ''; display: inline-block; width: .9em; height: .9em; margin-left: .5em; vertical-align: -.12em; border: 2px solid rgba(255, 255, 255, .5); border-top-color: #fff; border-radius: 50%; animation: bmSpin .7s linear infinite; }
@keyframes bmSpin { to { transform: rotate(360deg); } }
@media (max-width: 380px) {
    .bm-preview { width: 7rem; height: 8rem; }
    .bm-grid { grid-template-columns: repeat(4, 1fr); }
}
@media (prefers-reduced-motion: reduce) {
    .bm-panel, .bm-backdrop { transition: none; }
    .bm-preview-img { animation: none; }
}