/* Minibasket Court Animator – stili (prefisso .mbc per non interferire col tema) */
.mbc { --mbc-accent: #0c3c84; --mbc-accent-dark: #082a5c; --mbc-ink: #1f2937; --mbc-soft: #f3f4f6; font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; color: var(--mbc-ink); max-width: 960px; margin: 0 auto 1.5em; line-height: 1.4; }
.mbc *, .mbc *::before, .mbc *::after { box-sizing: border-box; }
.mbc .mbc-svg { display: block; width: 100%; height: auto; border-radius: 10px; background: #b9814b; box-shadow: 0 2px 10px rgba(0,0,0,.12); user-select: none; -webkit-user-select: none; }
.mbc .mbc-edit-svg { touch-action: none; cursor: default; }
.mbc .mbc-edit-svg .mbc-obj { cursor: grab; }
.mbc .mbc-edit-svg .mbc-obj:active { cursor: grabbing; }

.mbc .mbc-caption { display: flex; gap: .6em; align-items: baseline; flex-wrap: wrap; margin: .7em 0 .4em; min-height: 2.6em; font-size: 1.05em; }
.mbc .mbc-step { flex: none; background: var(--mbc-accent); color: #fff; border-radius: 999px; padding: .15em .7em; font-size: .8em; font-weight: 700; letter-spacing: .02em; }
.mbc .mbc-text { flex: 1 1 14em; font-weight: 500; }

.mbc .mbc-controls, .mbc .mbc-toolbar, .mbc .mbc-frames, .mbc .mbc-selbar { display: flex; flex-wrap: wrap; align-items: center; gap: .4em; }
.mbc button, .mbc select { font: inherit; font-size: .92em; line-height: 1.2; min-height: 2.4em; padding: .35em .75em; border: 1px solid #d1d5db; border-radius: 8px; background: #fff; color: var(--mbc-ink); cursor: pointer; margin: 0; box-shadow: none; text-transform: none; letter-spacing: normal; }
.mbc button:hover { background: var(--mbc-soft); }
.mbc button:focus-visible, .mbc select:focus-visible, .mbc input:focus-visible, .mbc textarea:focus-visible { outline: 2px solid var(--mbc-accent); outline-offset: 1px; }
.mbc .mbc-play, .mbc .mbc-primary { background: var(--mbc-accent); border-color: var(--mbc-accent); color: #fff; font-weight: 700; }
.mbc .mbc-play { min-width: 3.2em; }
.mbc .mbc-play:hover, .mbc .mbc-primary:hover { background: var(--mbc-accent-dark); border-color: var(--mbc-accent-dark); }
.mbc .mbc-danger { color: #b91c1c; border-color: #fca5a5; }
.mbc .mbc-danger:hover { background: #fef2f2; }
.mbc .mbc-range { flex: 1 1 8em; min-width: 6em; accent-color: var(--mbc-accent); }
.mbc .mbc-check { display: inline-flex; align-items: center; gap: .25em; font-size: .9em; white-space: nowrap; }

.mbc .mbc-legend { display: flex; flex-wrap: wrap; gap: .4em 1.1em; margin-top: .7em; font-size: .82em; color: #4b5563; }
.mbc .mbc-legend span { display: inline-flex; align-items: center; gap: .35em; }
.mbc .mbc-legend svg { width: 2.2em; height: 1em; }
.mbc .mbc-legend span:nth-child(n+4) svg { width: 1em; }
.mbc .mbc-legend em { font-style: normal; }

.mbc-player:fullscreen { max-width: none; background: #fff; padding: 1em; display: flex; flex-direction: column; justify-content: center; }
.mbc-player:fullscreen .mbc-svg { max-height: 78vh; width: auto; max-width: 100%; margin: 0 auto; }

/* editor */
.mbc-editor { max-width: none; }
.mbc .mbc-toolbar { margin-bottom: .5em; }
.mbc .mbc-tlabel { font-weight: 700; font-size: .9em; margin-right: .2em; }
.mbc .mbc-add-attacker { color: #1d4ed8; }
.mbc .mbc-add-defender { color: #b91c1c; }
.mbc .mbc-add-cone { color: #c2410c; }
.mbc .mbc-add-hoop { color: #a16207; }
.mbc .mbc-court-sel { margin-left: auto; }
.mbc .mbc-selbar { min-height: 2.8em; margin-bottom: .5em; padding: .3em .6em; background: #fffbeb; border: 1px solid #fde68a; border-radius: 8px; font-size: .92em; }
.mbc .mbc-selbar label { display: inline-flex; align-items: center; gap: .3em; }
.mbc .mbc-selbar input { width: 4.5em; padding: .3em .4em; border: 1px solid #d1d5db; border-radius: 6px; font: inherit; }
.mbc .mbc-frames { margin: .7em 0 .5em; }
.mbc .mbc-framelist { display: inline-flex; flex-wrap: wrap; gap: .3em; }
.mbc .mbc-fbtn { min-width: 2.4em; font-weight: 700; }
.mbc .mbc-fbtn.is-cur { background: var(--mbc-ink); border-color: var(--mbc-ink); color: #fff; }
.mbc .mbc-props { display: grid; grid-template-columns: 1fr 13em; gap: .8em; }
@media (max-width: 640px) { .mbc .mbc-props { grid-template-columns: 1fr; } .mbc .mbc-court-sel { margin-left: 0; } }
.mbc .mbc-props label { display: flex; flex-direction: column; gap: .3em; font-weight: 600; font-size: .9em; }
.mbc .mbc-props textarea, .mbc .mbc-props input { font: inherit; font-weight: 400; padding: .45em .6em; border: 1px solid #d1d5db; border-radius: 8px; width: 100%; }
.mbc .mbc-help { font-size: .85em; color: #4b5563; background: var(--mbc-soft); border-radius: 8px; padding: .7em .9em; margin: .8em 0; }
.mbc .mbc-preview-box { margin-top: .8em; }
.mbc .mbc-preview-box .mbc { margin: 0; }