/* Front styles — Themes + Anchored flapper (tip-only flick) */
.bpw-wrap { max-width: 980px; margin: 1rem auto; border: 1px solid #eee; border-radius: 16px; padding: 16px; background: #fff; box-shadow: 0 8px 30px rgba(0,0,0,.07); overflow: hidden; }
.bpw-ui { display: flex; gap: 16px; align-items: flex-start; }
.bpw-left { position: relative; flex: 1; text-align: center; min-width: 0; }
.bpw-right { width: 300px; max-width: 48%; }

.bpw-canvas-wrap { position: relative; }
.bpw-canvas, .bpw-overlay { display: block; width: 100%; height: auto; margin: 12px auto 8px; }
.bpw-canvas { background: transparent; }
.bpw-overlay { position: absolute; left: 0; top: 0; pointer-events: none; z-index: 3; }

:root{ --bpw-pointer-size:44px; --bpw-pointer-body:#1e2a3a; --bpw-pointer-tip:#fff; }
/* FIXED OUTSIDE POINTER — base fixed; tip flicks on rim */
.bpw-ticker { position: absolute; width: 120px; height: 120px; pointer-events: none; z-index: 6; }
/* Place pointer at 12 o'clock, outside the wheel, pointing inward */
.bpw-pointer-inward { top: calc(-1 * var(--bpw-pointer-size) + 4px); left: 50%; width: calc(var(--bpw-pointer-size)*0.8); height: var(--bpw-pointer-size); transform: translateX(-50%) rotate(180deg); transform-origin: 50% 90%; will-change: transform; }
.bpw-pointer-inward .bpw-t-hinge{ position: absolute; inset: 0; background: var(--bpw-pointer-body); border-radius: 50% 50% 6px 6px; }
.bpw-pointer-inward .bpw-t-tip{ position: absolute; bottom:6%; left:50%; width:14px; height:14px; transform:translateX(-50%); background:var(--bpw-pointer-tip); border-radius:50%; }
@keyframes bpw-tick { 0%{ transform: translateX(-50%) rotate(180deg);} 40%{ transform: translateX(-50%) rotate(16deg);} 70%{ transform: translateX(-50%) rotate(176deg);} 100%{ transform: translateX(-50%) rotate(180deg);} }
.bpw-pointer-inward.is-ticking { animation: bpw-tick .14s cubic-bezier(.25,1.7,.45,1) both; }

/* OUTSIDE FLAPPER — legacy tip flick (kept for compatibility) */
.bpw-t-hinge { position: absolute; left: 0; top: 50%; transform: translate(-50%,-50%); width: 28px; height: 28px; background: #1e2a3a; border-radius: 50%; box-shadow: 0 2px 4px rgba(0,0,0,.28); }
.bpw-t-hinge::after{ content:""; position:absolute; inset:6px; background:#fff; border-radius:50%; box-shadow: inset 0 1px 1px rgba(0,0,0,.25); }
.bpw-pointer-outward .bpw-t-tip{ position: absolute; left: 0; top: 50%; transform: translate(0,-50%) rotate(0deg); transform-origin: 0% 50%; width: 0; height: 0; border-left: 70px solid #1e2a3a; border-top: 14px solid transparent; border-bottom: 14px solid transparent; filter: drop-shadow(0 2px 2px rgba(0,0,0,.25)); border-radius: 2px; }
.bpw-pointer-inward .bpw-t-tip{ position: absolute; left: 0; top: 50%; transform: translate(0,-50%) rotate(0deg); transform-origin: 0% 50%; width: 0; height: 0; border-right: 70px solid #1e2a3a; border-top: 14px solid transparent; border-bottom: 14px solid transparent; filter: drop-shadow(0 2px 2px rgba(0,0,0,.25)); border-radius: 2px; }
@keyframes bpw-flick { 0%{ transform: translate(0,-50%) rotate(0deg);} 40%{ transform: translate(0,-50%) rotate(-16deg);} 100%{ transform: translate(0,-50%) rotate(0deg);} }
.bpw-t-tip.flick { animation: bpw-flick .14s ease-out; }

/* Controls & info */
.bpw-controls { display: flex; gap: 8px; flex-wrap: wrap; justify-content: center; margin-top: 8px; }
.bpw-btn { border: 1px solid #ddd; background: #f7f7f7; padding: 8px 12px; border-radius: 10px; cursor: pointer; }
.bpw-btn:disabled { opacity: .5; cursor: not-allowed; }
.bpw-primary { background: #2271b1; color: #fff; border-color: #1a5c8d; }
.bpw-status { margin-top: 8px; min-height: 24px; font-size: 14px; }
.bpw-remaining, .bpw-participants { margin-top: 4px; font-size: 13px; color: #444; }
.bpw-list { list-style: none; margin: 0; padding: 0; }
.bpw-list li { display: flex; align-items: center; gap: 8px; padding: 4px 0; border-bottom: 1px dashed #eee; }
.bpw-swatch { width: 14px; height: 14px; border-radius: 50%; border: 1px solid rgba(0,0,0,.12); display: inline-block; }

/* Result card */
.bpw-result-card { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%) scale(.96); background: #111; color: #fff; padding: 16px 18px; border-radius: 12px; box-shadow: 0 10px 30px rgba(0,0,0,.35); z-index: 9; min-width: 260px; text-align: center; opacity: 0; pointer-events: none; }
.bpw-result-card.show { opacity: 1; transform: translate(-50%, -50%) scale(1); pointer-events: auto; transition: transform .35s cubic-bezier(.2,.8,.2,1), opacity .35s ease; }
.bpw-result-title { font-size: 12px; letter-spacing: .08em; text-transform: uppercase; opacity: .76; margin-bottom: 4px; }
.bpw-result-value { font-size: 20px; font-weight: 700; }
.bpw-result-close { margin-top: 10px; }

.bpw-history { margin: .25rem 0 0; padding-left: 1rem; font-size: 14px; max-height: 380px; overflow: auto; }
.bpw-history li { margin: .15rem 0; }

/* Theme hints */
.bpw-theme-retro_neon .bpw-wrap{ background: #0d0f1a; color: #e7e7e7; }
.bpw-theme-retro_neon .bpw-left, .bpw-theme-retro_neon .bpw-right { color: #e7e7e7; }
.bpw-theme-retro_neon .bpw-btn { background: #151a2b; color:#fff; border-color:#303b7a; }

@media (max-width: 900px) { .bpw-ui { flex-direction: column; } .bpw-right { width: 100%; max-width: 100%; } .bpw-canvas, .bpw-overlay { margin-top: 12px; } }
@media (max-width: 480px) { .bpw-controls .bpw-btn { flex: 1 1 calc(50% - 8px); } }
@media (max-width: 360px) { .bpw-controls .bpw-btn { flex-basis: 100%; } }
@media (prefers-reduced-motion: reduce) { .bpw-canvas { transition: none !important; } }