/* Meriam Parabola: lapangan di kanvas, slider gaya dan sudut, catatan rumus */
.mp-wrap { flex: 1; min-height: 0; display: flex; padding: clamp(4px, 1vw, 12px); background: #1e3a8a; }
.mp-stage { position: relative; flex: 1; min-height: 0; border-radius: 16px; overflow: hidden; border: 3px solid #fff; background: #bae6fd; display: flex; flex-direction: column; }
.mp-chips { display: flex; flex-wrap: wrap; gap: 5px; padding: 5px 8px; background: rgba(15,23,42,.8); color: #fff; font-weight: 800; font-size: clamp(11px, 1.45vw, 17px); }
.mp-chips span { background: rgba(255,255,255,.16); border-radius: 999px; padding: 1px 10px; white-space: nowrap; }
.mp-chips .k { background: #f59e0b; color: #0f172a; }
.mp-cvbox { position: relative; flex: 1; min-height: 0; touch-action: none; }
.mp-cvbox canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.mp-fb { position: absolute; left: 50%; top: 14px; transform: translate(-50%, -6px); background: var(--ink); color: #fff; padding: 6px 16px; border-radius: 14px; font-weight: 800; font-size: clamp(13px, 1.9vw, 24px); opacity: 0; pointer-events: none; transition: opacity .2s, transform .2s; text-align: center; max-width: 92%; z-index: 2; }
.mp-fb.show { opacity: 1; transform: translate(-50%, 0); }
.mp-fb.ok { background: var(--ok); } .mp-fb.bad { background: var(--bad); }
.mp-ctl { display: grid; grid-template-columns: 1fr auto 1fr; gap: clamp(6px, 1.4vw, 18px); align-items: center; padding: 6px clamp(8px, 1.6vw, 20px); background: rgba(255,255,255,.95); border-top: 3px solid #fff; }
.mp-sl label { display: block; font-weight: 800; font-size: clamp(12px, 1.6vw, 18px); }
.mp-sl label b { font-size: 1.25em; color: #b45309; }
.mp-row { display: flex; align-items: center; gap: 6px; }
.mp-row input[type=range] { flex: 1; min-width: 0; height: 30px; accent-color: #7c3aed; }
.mp-step { flex: 0 0 auto; width: clamp(34px, 5vw, 46px); height: clamp(34px, 5vw, 46px); border: 0; border-radius: 50%; background: #e0e7ff; color: #1e1b4b; font: inherit; font-weight: 900; font-size: 1.3rem; cursor: pointer; padding: 0; box-shadow: 0 3px 0 rgba(15,23,42,.25); }
.mp-step:active { transform: translateY(2px); }
.mp-step:disabled, .mp-row input:disabled { opacity: .4; }
.mp-mid { display: flex; flex-direction: column; gap: 4px; align-items: center; }
.mp-fire { min-height: 46px; padding: 0 clamp(18px, 3vw, 36px); border: 0; border-radius: 999px; background: #dc2626; color: #fff; font: inherit; font-weight: 900; font-size: clamp(16px, 2.2vw, 26px); cursor: pointer; box-shadow: 0 5px 0 rgba(15,23,42,.3); }
.mp-fire:active { transform: translateY(3px); box-shadow: 0 2px 0 rgba(15,23,42,.3); }
.mp-fire:disabled { background: #94a3b8; cursor: default; }
.mp-mini { display: flex; gap: 4px; }
.mp-sec { min-height: 30px; padding: 0 10px; border: 2px solid #7c3aed; border-radius: 999px; background: #fff; color: #5b21b6; font: inherit; font-weight: 800; font-size: clamp(10px, 1.2vw, 13px); cursor: pointer; }
.mp-sec[hidden] { display: none; }
.mp-notes { position: absolute; left: 50%; top: 8%; transform: translateX(-50%); width: min(92%, 560px); max-height: 84%; overflow: auto; background: #fff; border: 4px solid #7c3aed; border-radius: 16px; padding: 10px 16px; z-index: 6; box-shadow: 0 12px 30px rgba(15,23,42,.4); }
.mp-notes[hidden] { display: none; }
.mp-notes h3 { margin: 0 0 4px; } .mp-notes ul { margin: 0 0 6px; padding-left: 18px; font-weight: 700; font-size: clamp(12px, 1.6vw, 17px); line-height: 1.45; }
.mp-notes p { margin: 6px 0 0; font-size: clamp(11px, 1.3vw, 15px); font-weight: 600; }
.mp-notes .panel-x { position: absolute; right: 6px; top: 4px; }
.mp-tbl { border-collapse: collapse; width: 100%; font-weight: 700; font-size: clamp(11px, 1.5vw, 16px); text-align: center; }
.mp-tbl th, .mp-tbl td { border: 1px solid #c7d2fe; padding: 2px 6px; } .mp-tbl th { background: #ede9fe; }
.mp-stars { font-size: clamp(32px, 7vh, 60px); color: #f59e0b; letter-spacing: 6px; line-height: 1; } .mp-stars .off { color: #cbd5e1; }
@media (max-height: 520px) { .mp-wrap { padding: 3px 6px; } .mp-stage { border-width: 2px; border-radius: 12px; } .mp-ctl { padding: 3px 8px; } .mp-fire { min-height: 38px; } .mp-row input[type=range] { height: 24px; } .mp-chips { padding: 3px 6px; } }
@media (max-width: 640px) and (orientation: portrait) { .mp-ctl { grid-template-columns: 1fr 1fr; } .mp-mid { grid-column: 1 / -1; flex-direction: row; justify-content: center; order: 3; } }
@media (prefers-reduced-motion: reduce) { .mp-fb { transition: none; } }