/* Missioni */
.msbtn { position: relative; display: flex; align-items: center; gap: 6px; height: clamp(38px, 6.4vh, 50px); padding: 0 12px; border-radius: 12px; cursor: pointer; font-family: var(--font); color: #fff; -webkit-text-stroke: 3px var(--ink); paint-order: stroke fill; font-size: clamp(13px, 2.2vh, 18px);
  background: linear-gradient(#3fdc5c, #168a33); border: 3px solid var(--ink); box-shadow: 0 4px 0 #0b4a1a, 0 4px 0 3px var(--ink), inset 0 2px 0 rgba(255,255,255,.4); }
.msbtn .ico { width: 24px; height: 24px; } .msbtn b { font-weight: 400; }
.msbtn:active { transform: translateY(3px); box-shadow: 0 1px 0 #0b4a1a, 0 1px 0 3px var(--ink); }
.msbtn .cnt { position: absolute; top: -9px; right: -9px; min-width: 24px; height: 24px; padding: 0 6px; border-radius: 12px; background: #e23b3b; border: 2px solid var(--ink); display: grid; place-items: center; font-size: 14px; -webkit-text-stroke: 0; color: #fff; }
@media (max-width: 900px) { .msbtn b { display: none; } .msbtn { padding: 0 9px; } }

#screen-missions { display: none; }
#screen-missions.active { display: block; }
.ms-tabs { display: flex; gap: 6px; min-width: 0; }
.ms-tabs button { position: relative; padding: 6px 14px; border-radius: 12px; border: 3px solid var(--ink); background: rgba(10, 8, 18, .6); color: #cfc8dd; font-family: var(--font); font-size: clamp(13px, 2.3vh, 18px); cursor: pointer; }
.ms-tabs button.on { background: linear-gradient(color-mix(in srgb, var(--mc) 80%, #fff), var(--mc)); color: #fff; -webkit-text-stroke: 3px var(--ink); paint-order: stroke fill; }
.ms-tabs .dot { position: absolute; top: -6px; right: -6px; width: 16px; height: 16px; border-radius: 50%; background: #e23b3b; border: 2px solid var(--ink); animation: bob .8s ease-in-out infinite; }
.ms-body { position: absolute; left: 0; right: 0; top: calc(70px + var(--safe-t)); bottom: 0; display: flex; flex-direction: column; max-width: 980px; margin: 0 auto; padding: 4px calc(18px + var(--safe-r)) 16px calc(18px + var(--safe-l)); }
.ms-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 8px 4px 12px; }
.ms-head h3 { margin: 0; font-size: clamp(20px, 3.8vh, 30px); color: var(--mc); }
.ms-head small { color: #cfc8dd; font-size: clamp(12px, 2.1vh, 15px); } .ms-head small b { color: #fff; }
.ms-list { flex: 1; min-height: 0; overflow-y: auto; display: grid; gap: 10px; align-content: start; padding: 2px 4px 6px; -webkit-overflow-scrolling: touch; }
.ms { display: grid; grid-template-columns: 1fr auto auto; align-items: center; gap: 14px; padding: 10px 14px; border-radius: 12px; border: 3px solid var(--ink); border-left: 8px solid var(--mc); background: linear-gradient(rgba(52, 38, 60, .92), rgba(20, 13, 28, .94)); box-shadow: 0 4px 10px rgba(0, 0, 0, .5); }
.ms-main > b { font-size: clamp(14px, 2.5vh, 19px); display: block; margin-bottom: 6px; font-weight: 400; }
.ms-bar { height: clamp(20px, 3.2vh, 26px); border-width: 3px; } .ms-bar b { font-size: clamp(11px, 1.9vh, 14px); margin: 0; -webkit-text-stroke: 2.5px var(--ink); }
.ms-bar i { background: linear-gradient(#fff, var(--mc)); }
.ms-rw { display: flex; flex-direction: column; gap: 2px; min-width: 76px; font-family: var(--font); }
.ms-rw span { display: flex; align-items: center; justify-content: flex-end; gap: 5px; font-size: clamp(15px, 2.6vh, 20px); color: #fff; -webkit-text-stroke: 3px var(--ink); paint-order: stroke fill; }
.ms-rw .cico { height: 26px; max-width: 30px; }
.ms-b { padding: 7px 14px; font-size: clamp(13px, 2.3vh, 17px); animation: pulse 1.2s ease-in-out infinite; }
.ms-s { width: 64px; display: grid; place-items: center; } .ms-s .ico { width: 28px; height: 28px; } .ms-s:not(.ok) { opacity: .5; }
.ms.ready { border-color: #f2cf86; box-shadow: 0 0 18px rgba(242, 207, 134, .45), 0 4px 10px rgba(0, 0, 0, .5); }
.ms.claimed { opacity: .6; }
@media (max-width: 700px) { .ms { grid-template-columns: 1fr auto; } .ms-b, .ms-s { grid-column: 2; grid-row: 1 / span 2; } .ms-rw { flex-direction: row; gap: 10px; min-width: 0; } .ms-rw span { justify-content: flex-start; } .ms-tabs button { padding: 5px 9px; } }
@media (max-height: 460px) { .ms-body { top: calc(58px + var(--safe-t)); } .ms { padding: 6px 12px; gap: 10px; } .ms-main > b { margin-bottom: 3px; } .ms-head { padding: 2px 4px 8px; } }